@import '_content/LangBooster.UI.Shared/LangBooster.UI.Shared.8mrk58j47p.bundle.scp.css';

/* /Components/GramVyklad.razor.rz.scp.css */
/* Výklad gramatické karty - sdílí ho lekce, detail gramatiky i korektura (viz GramVyklad.razor).
   Styly se sem přestěhovaly z Vyuka.razor.css a GramatikaTema.razor.css, kde byly dvakrát. */
/* PRAVIDLO box */
.gram-rule[b-znwihtpbwl] { background: color-mix(in srgb, var(--lb-purple) 7%, var(--lb-surface)); border: 1px solid color-mix(in srgb, var(--lb-purple) 22%, transparent); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-6) var(--lb-gap-7); margin-bottom: var(--lb-gap-6); }
.gram-rule-label[b-znwihtpbwl] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); font-weight: 700; font-size: var(--lb-fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--lb-purple); margin-bottom: var(--lb-gap-2); }
.gram-rule-label svg[b-znwihtpbwl] { width: 17px; height: 17px; color: var(--lb-purple); }
.gram-rule-text[b-znwihtpbwl] { font-size: var(--lb-fs-lg); color: var(--lb-ink); line-height: 1.5; }

/* Párová tabulka (paradigma zájmen, „tvar -> význam", „spojka -> co uvádí").
   Drží STEJNÝ vzhled jako tabulka časování níž - je to týž typ obsahu, jen jiná data.
   Dřív to byl jen tenký pruh vlevo a v prózovém výkladu to zaniklo; tvar je proto
   tučně a glosa normálně, aby se dvojice čtla na první pohled. */
.gram-conj[b-znwihtpbwl] { border-collapse: separate; border-spacing: 0; margin: 0 0 var(--lb-gap-7); width: 100%; max-width: 620px;
    background: color-mix(in srgb, var(--lb-purple) 5%, var(--lb-surface)); border: 1px solid color-mix(in srgb, var(--lb-purple) 20%, transparent); border-radius: var(--lb-radius-sm); overflow: hidden; }
.gram-conj td[b-znwihtpbwl] { padding: var(--lb-gap-4) var(--lb-gap-6); font-size: var(--lb-fs-lg); vertical-align: baseline; }
.gram-conj td:first-child[b-znwihtpbwl] { width: 1%; white-space: nowrap; font-weight: 700; color: var(--lb-ink); padding-right: var(--lb-gap-5); }
.gram-conj td:last-child[b-znwihtpbwl] { font-weight: 500; color: var(--lb-text-secondary); line-height: 1.45; }
.gram-conj tr:not(:last-child) td[b-znwihtpbwl] { border-bottom: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }
/* Dlouhá tabulka (mapa knihy): menší písmo a hustší řádky, ať se dá přehlédnout. */
.gram-conj-dlouha td[b-znwihtpbwl] { font-size: var(--lb-fs-base); padding-top: var(--lb-gap-3); padding-bottom: var(--lb-gap-3); }

/* Tabulka časování — osoba a tvar jsou vlastní buňky (osoba tlumeně, scvrknutá na obsah; tvar výrazně),
   takže tvary drží svislici i u dlouhých osob. Skupiny: DE/PL/CS 2 skupiny (jednotné | množné číslo)
   oddělené linkou, EN (sloučené osoby) jen jedna → linka se nekreslí. */
.gram-table[b-znwihtpbwl] { border-collapse: separate; border-spacing: 0; margin: 0 0 var(--lb-gap-7); width: 100%; max-width: 460px;
    background: color-mix(in srgb, var(--lb-purple) 5%, var(--lb-surface)); border: 1px solid color-mix(in srgb, var(--lb-purple) 20%, transparent); border-radius: var(--lb-radius-sm); overflow: hidden; }
/* Nazev slovesa nad tabulkou, kdyz jich karta casuje vic (können / möchten). */
.gram-table caption.gt-cap[b-znwihtpbwl] { caption-side: top; text-align: left; padding: 0 0 var(--lb-gap-2) var(--lb-gap-1); font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-text-muted); }
.gram-table td[b-znwihtpbwl] { padding: var(--lb-gap-4) var(--lb-gap-6); font-size: var(--lb-fs-lg); font-weight: 600; color: var(--lb-ink); }
.gram-table td.gt-pc[b-znwihtpbwl] { width: 1%; min-width: 4.4rem; white-space: nowrap; padding-right: 0; color: var(--lb-text-muted); font-weight: 500; }
.gram-table td.gt-fc[b-znwihtpbwl] { width: 50%; padding-left: var(--lb-gap-5); }
.gram-table tr:not(:last-child) td[b-znwihtpbwl] { border-bottom: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }
.gram-table td.gt-fc:not(:last-child)[b-znwihtpbwl] { border-right: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }
.gram-table[b-znwihtpbwl]  .gt-end { color: var(--lb-purple); font-weight: 800; }

/* Příklady — číslované, klíčové slovo zvýrazněné */
.gram-examples[b-znwihtpbwl] { display: flex; flex-direction: column; gap: var(--lb-gap-4); margin-bottom: var(--lb-gap-8); }
.gram-ex[b-znwihtpbwl] { display: flex; align-items: center; gap: var(--lb-gap-4); background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-5); }
.gram-ex-num[b-znwihtpbwl] { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--lb-purple); color: var(--lb-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--lb-fs-xs); font-weight: 700; }
/* Text a překlad jsou vlastní sloupec, aby číslo i přehrání zůstaly u kraje. */
.gram-ex-body[b-znwihtpbwl] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-0); }
.gram-ex-text[b-znwihtpbwl] { font-size: var(--lb-fs-lg); color: var(--lb-ink); }
/* Tentýž styl jako inline překlad repliky ve čtení - menší, tlumený, kurzívou. */
.gram-ex-trans[b-znwihtpbwl] { font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: var(--lb-fs-md);
    line-height: 1.5; color: var(--lb-text-muted); font-style: italic; }
.gram-ex-play[b-znwihtpbwl] { flex: 0 0 auto; border: none; background: none; cursor: pointer; font-size: var(--lb-fs-lg); line-height: 1; padding: var(--lb-gap-1) var(--lb-gap-2); border-radius: var(--lb-radius-xs); opacity: .7; }
.gram-ex-play:hover[b-znwihtpbwl] { opacity: 1; background: color-mix(in srgb, var(--lb-purple) 12%, transparent); }
/* Klíčové slovo — fialové, tučné, podtržené. ::deep, protože <mark> vzniká v kódu (Hl) bez scope atributu. */
[b-znwihtpbwl] mark.gram-hl { background: none; color: var(--lb-purple); font-weight: 700; padding: 0; border-bottom: 2px solid color-mix(in srgb, var(--lb-purple) 55%, transparent); }

/* Panel pravidla nese i tabulky, stavbu věty a rámeček nazpaměť - jeden celek místo
   rozpadlých bloků (autor 26.09.2026). Uvnitř panelu dělá mezery gap, ne okraje. */
.gram-rule[b-znwihtpbwl] { display: flex; flex-direction: column; gap: var(--lb-gap-5); }
.gram-rule-label[b-znwihtpbwl] { margin-bottom: calc(-1 * var(--lb-gap-2)); }
.gram-rule .gram-conj[b-znwihtpbwl],
.gram-rule .gram-table[b-znwihtpbwl] { margin: 0; background: var(--lb-surface); }
.gram-rule .gram-table caption.gt-cap[b-znwihtpbwl] { padding-top: 0; }

/* Stavba věty v blocích: fialové určité sloveso, modrý podmět, orámované to, co odchází
   na konec. Pod sebou varianty téže věty - je vidět, co se hýbe a co drží místo. */
.gram-vety[b-znwihtpbwl] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.gram-veta[b-znwihtpbwl] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: stretch; }
.gv-blok[b-znwihtpbwl] { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.2;
    padding: var(--lb-gap-2) var(--lb-gap-4); border-radius: var(--lb-radius-xs);
    background: var(--lb-surface); border: 1px solid var(--lb-border-strong);
    font-size: var(--lb-fs-lg); font-weight: 600; color: var(--lb-ink); }
.gv-t[b-znwihtpbwl] { white-space: nowrap; }
/* Vlastní popisek úseku je překlad (gern → rád), ne název role - malými písmeny, kurzívou. */
.gv-blok small.is-preklad[b-znwihtpbwl] { text-transform: none; letter-spacing: 0; font-style: italic; font-size: var(--lb-fs-xs); }
.gv-blok small[b-znwihtpbwl] { font-size: var(--lb-fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }
.gv-blok.is-v[b-znwihtpbwl] { background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent); }
.gv-blok.is-v small[b-znwihtpbwl] { color: color-mix(in srgb, var(--lb-on-accent) 80%, transparent); }
.gv-blok.is-s[b-znwihtpbwl] { background: var(--lb-info-bg); border-color: color-mix(in srgb, var(--lb-info-text) 35%, transparent); }
.gv-blok.is-e[b-znwihtpbwl] { border: 2px solid var(--lb-purple); color: var(--lb-purple-text); }
.gv-blok[b-znwihtpbwl]  mark.gram-hl { color: inherit; border-bottom-color: currentColor; }

/* Nauč se nazpaměť: co se nedá odvodit pravidlem, vlastní rámeček uvnitř panelu. */
.gram-memo[b-znwihtpbwl] { display: flex; gap: var(--lb-gap-4); align-items: flex-start;
    background: var(--lb-memo-bg); border: 1px solid var(--lb-memo-border); border-radius: var(--lb-radius-xs);
    padding: var(--lb-gap-4) var(--lb-gap-5); color: var(--lb-memo-text); font-size: var(--lb-fs-md); line-height: 1.5; }
.gram-memo svg[b-znwihtpbwl] { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lb-memo-ico); margin-top: var(--lb-gap-0); }
.gram-memo b[b-znwihtpbwl] { display: block; font-size: var(--lb-fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.gram-memo[b-znwihtpbwl]  mark.gram-hl { color: inherit; border-bottom-color: currentColor; }

/* Celá položka: výraz, význam, kdy se používá a přehrání v jednom řádku. Na úzkém
   displeji se text zalomí, tlačítko zůstává vpravo. */
.gram-items[b-znwihtpbwl] { display: flex; flex-direction: column; gap: var(--lb-gap-3); margin: 0 0 var(--lb-gap-8); }
.gram-item[b-znwihtpbwl] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--lb-gap-5);
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-4) var(--lb-gap-4) var(--lb-gap-4) var(--lb-gap-6); }
.gi-main[b-znwihtpbwl] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lb-gap-0) var(--lb-gap-4); min-width: 0; }
.gi-word[b-znwihtpbwl] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-xl); color: var(--lb-ink); }
.gi-mean[b-znwihtpbwl] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }
.gi-use[b-znwihtpbwl] { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 var(--lb-gap-3); font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }
.gi-ex[b-znwihtpbwl] { font-style: italic; color: var(--lb-text-secondary); }
.gi-pis[b-znwihtpbwl] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-xl); color: var(--lb-ink); min-width: 3rem; }
.gi-sipka[b-znwihtpbwl] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.gi-cte[b-znwihtpbwl] { font-weight: 700; color: var(--lb-purple-text); }
.gi-slovo[b-znwihtpbwl] { font-family: var(--lb-font-head); font-size: var(--lb-fs-lg); color: var(--lb-ink); }
.gi-slovo em[b-znwihtpbwl] { font-style: normal; font-weight: 700; color: var(--lb-purple); }
.gi-play[b-znwihtpbwl] { grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--lb-purple) 30%, transparent);
    background: color-mix(in srgb, var(--lb-purple) 8%, var(--lb-surface)); color: var(--lb-purple); }
.gi-play:hover[b-znwihtpbwl] { background: color-mix(in srgb, var(--lb-purple) 16%, var(--lb-surface)); }
.gi-play svg[b-znwihtpbwl] { width: 16px; height: 16px; }

/* Jeden příklad ve všech tvarech: karta na rod, řádek pád + tvar, koncovka svítí. */
.gram-rady[b-znwihtpbwl] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--lb-gap-3); }
.gram-rada[b-znwihtpbwl] { background: var(--lb-surface); border: 1px solid color-mix(in srgb, var(--lb-purple) 20%, transparent); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-4) var(--lb-gap-5); }
.gram-rada h4[b-znwihtpbwl] { margin: 0 0 var(--lb-gap-2); font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-text-muted); }
.gr-radek[b-znwihtpbwl] { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lb-gap-4); padding: var(--lb-gap-1) 0; }
.gr-radek + .gr-radek[b-znwihtpbwl] { border-top: 1px solid color-mix(in srgb, var(--lb-purple) 10%, transparent); }
.gr-pad[b-znwihtpbwl] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); white-space: nowrap; }
.gr-tvar[b-znwihtpbwl] { font-family: var(--lb-font-head); font-size: var(--lb-fs-lg); color: var(--lb-ink); text-align: right; }

/* Skloňování rodu jako tabulka: pád | po der | po ein. Karty rodů jdou pod sebe
   (celá šířka), aby se tři sloupce vešly i na mobil. */
.gram-rady:has(.gr-tab)[b-znwihtpbwl] { grid-template-columns: 1fr; }
.gr-tab[b-znwihtpbwl] { width: 100%; border-collapse: collapse; }
.gr-tab th[b-znwihtpbwl] { font-size: var(--lb-fs-xs); font-weight: 600; color: var(--lb-text-muted); text-align: left; padding: 0 var(--lb-gap-3) var(--lb-gap-2) 0; }
.gr-tab td[b-znwihtpbwl] { padding: var(--lb-gap-2) var(--lb-gap-3) var(--lb-gap-2) 0; vertical-align: baseline; }
.gr-tab tr + tr td[b-znwihtpbwl] { border-top: 1px solid color-mix(in srgb, var(--lb-purple) 10%, transparent); }
.gr-tab td.gr-tvar[b-znwihtpbwl] { text-align: left; white-space: nowrap; }

/* Úzká obrazovka: první sloupec se smí zalomit. `nowrap` drží krátké tvary („I am") v řádku,
   ale dlouhý název („l000 Výslovnost, velká písmena") pak vytlačil druhý sloupec za okraj
   a stránka se rozjela do šířky (autor 01.10.2026). Krátké buňky se nezmění - zalomí se jen
   to, co se nevejde; první sloupec dostane nanejvýš 42 %, zbytek patří příkladům. */
@media (max-width: 560px) {
    .gram-conj td[b-znwihtpbwl] { padding: var(--lb-gap-3) var(--lb-gap-4); font-size: var(--lb-fs-md); }
    .gram-conj td:first-child[b-znwihtpbwl] { white-space: normal; width: 42%; }
    .gram-conj td:last-child[b-znwihtpbwl] { overflow-wrap: anywhere; }
    .gram-conj-dlouha td[b-znwihtpbwl] { font-size: var(--lb-fs-sm); padding-top: var(--lb-gap-2); padding-bottom: var(--lb-gap-2); }
}
/* /Layout/FeedbackDialog.razor.rz.scp.css */
/* Dialog hlášení: vystředěná karta nad ztmavenou stránkou. */
.fb-scrim[b-3lsohwnhnv] {
    position: fixed; inset: 0; z-index: 90;
    background: var(--lb-scrim);
}
.fb-dialog[b-3lsohwnhnv] {
    position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(32rem, calc(100vw - 2 * var(--lb-gap-4))); max-height: calc(100vh - 2 * var(--lb-gap-6));
    overflow-y: auto; display: flex; flex-direction: column; gap: var(--lb-gap-4);
    padding: var(--lb-gap-6); background: var(--lb-surface-elevated);
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg); box-shadow: var(--lb-shadow-lg);
    outline: none;
}
.fb-title[b-3lsohwnhnv] { margin: 0; font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }
.fb-text[b-3lsohwnhnv] { margin: 0; color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }

/* Chyba / připomínka - stejný přepínač jako agenda v opakování. */
.fb-kinds[b-3lsohwnhnv] { display: flex; width: fit-content; gap: var(--lb-gap-0); padding: var(--lb-gap-1);
    background: var(--lb-warm-tint-2); border-radius: var(--lb-radius-pill); }
.fb-kind[b-3lsohwnhnv] { border: none; background: none; padding: var(--lb-gap-2) var(--lb-gap-6); border-radius: var(--lb-radius-pill);
    font-family: inherit; font-size: var(--lb-fs-md); font-weight: 600; color: var(--lb-text-secondary); cursor: pointer; }
.fb-kind.on[b-3lsohwnhnv] { background: var(--lb-surface); color: var(--lb-accent); box-shadow: var(--lb-shadow-xs); }

.fb-input[b-3lsohwnhnv] {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 7rem;
    padding: var(--lb-gap-3) var(--lb-gap-4); font: inherit; font-size: var(--lb-fs-md); color: var(--lb-text);
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
}
.fb-input:focus[b-3lsohwnhnv] { outline: none; border-color: var(--lb-accent); }

.fb-shot[b-3lsohwnhnv] { display: flex; flex-direction: column; gap: var(--lb-gap-2); }
.fb-check[b-3lsohwnhnv] { display: flex; align-items: center; gap: var(--lb-gap-2); font-size: var(--lb-fs-base); color: var(--lb-text); cursor: pointer; }
.fb-thumb[b-3lsohwnhnv] { display: block; max-width: 100%; max-height: 12rem; object-fit: contain; object-position: left top;
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-xs); background: var(--lb-surface); }
.fb-note[b-3lsohwnhnv] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.fb-error[b-3lsohwnhnv] { margin: 0; font-size: var(--lb-fs-sm); color: var(--lb-error-text); }

.fb-actions[b-3lsohwnhnv] { display: flex; justify-content: flex-end; gap: var(--lb-gap-3); flex-wrap: wrap; }

/* „Fotím obrazovku…" - drobná hláška dole uprostřed, než se otevře dialog. */
.fb-toast[b-3lsohwnhnv] {
    position: fixed; z-index: 92; left: 50%; bottom: var(--lb-gap-8); transform: translateX(-50%);
    padding: var(--lb-gap-2) var(--lb-gap-5); border-radius: var(--lb-radius-pill);
    background: var(--lb-toast-bg); color: var(--lb-toast-text); font-size: var(--lb-fs-sm); box-shadow: var(--lb-shadow-md);
}
/* /Layout/MainLayout.razor.rz.scp.css */
.shell[b-upcllbd3q6] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Horní lišta ── */
.topbar[b-upcllbd3q6] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    height: 4rem;
    padding: 0;
    background: var(--lb-surface);
    border-bottom: 1px solid var(--lb-border);
}
.topbar-inner[b-upcllbd3q6] {
    width: 100%;
    max-width: 860px;
    padding: 0 var(--lb-gap-8);
    display: flex;
    align-items: center;
    gap: var(--lb-gap-6);
}

.brand[b-upcllbd3q6] {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-gap-3);
    text-decoration: none;
    flex: 0 0 auto;
}
.brand-name[b-upcllbd3q6] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-3xl); color: var(--lb-ink); }
.brand-accent[b-upcllbd3q6] { color: var(--lb-accent); }
.brand-icon[b-upcllbd3q6] { height: 2.3rem; width: auto; display: block; }

/* Přepínač kurzu — uprostřed; obal nese pozici rozbalovacího výběru. */
.course-switch[b-upcllbd3q6] { position: relative; margin: 0 auto; display: inline-flex; }
.course-pill[b-upcllbd3q6] {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-gap-4);
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-pill);
    padding: var(--lb-gap-2) var(--lb-gap-5);
    box-shadow: var(--lb-shadow);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.course-pill:hover[b-upcllbd3q6] { border-color: var(--lb-accent); }
.course-flag[b-upcllbd3q6] { font-size: var(--lb-fs-xl); line-height: 1; display: inline-flex; }
.course-name[b-upcllbd3q6] { font-weight: 600; color: var(--lb-ink); font-size: var(--lb-fs-md); white-space: nowrap; }
.course-caret[b-upcllbd3q6] { width: 16px; height: 16px; color: var(--lb-text-muted); }

/* Akce vpravo */
.tb-actions[b-upcllbd3q6] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); flex: 0 0 auto; }
/* Bez přepínače kurzu (jediný kurz) by se logo a akce slepily vlevo — odsuň akce doprava. */
.topbar-inner:not(:has(.course-pill)) .tb-actions[b-upcllbd3q6] { margin-left: auto; }
/* Výběr kurzu visí pod tlačítkem uprostřed, ne u pravého kraje jako profil. */
.course-menu[b-upcllbd3q6] { left: 50%; right: auto; transform: translateX(-50%); min-width: 230px; }
.course-menu:focus[b-upcllbd3q6] { outline: none; }
.course-item[b-upcllbd3q6] { display: flex; align-items: center; gap: var(--lb-gap-3); }
.course-item .tb-menu-name[b-upcllbd3q6] { flex: 1 1 auto; }
.course-native[b-upcllbd3q6] { display: inline-flex; font-size: var(--lb-fs-sm); opacity: .8; }

.tb-btn[b-upcllbd3q6] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lb-gap-0);
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 var(--lb-gap-2);
    background: none;
    border: none;
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tb-btn svg[b-upcllbd3q6] { width: 20px; height: 20px; }
.tb-label[b-upcllbd3q6] { font-size: var(--lb-fs-2xs); letter-spacing: .02em; }
.tb-btn:hover[b-upcllbd3q6] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); color: var(--lb-accent); }
.tb-active[b-upcllbd3q6], .tb-on[b-upcllbd3q6] { color: var(--lb-accent); }
.tb-active[b-upcllbd3q6] { background: color-mix(in srgb, var(--lb-accent) 12%, transparent); }

.profile[b-upcllbd3q6] { position: relative; display: inline-flex; }
.profile-btn[b-upcllbd3q6] {
    width: 2.6rem; height: 2.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--lb-accent) 10%, transparent);
    color: var(--lb-text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.profile-btn svg[b-upcllbd3q6] { width: 20px; height: 20px; }
.profile-btn:hover[b-upcllbd3q6] { background: color-mix(in srgb, var(--lb-accent) 18%, transparent); color: var(--lb-accent); }

/* Rozbalovací menu (hlas + profil) */
/* Klik mimo menu ho zavírá: vrstva přes celou stránku pod menu odchytí klik jinde. */
.tb-menu-backdrop[b-upcllbd3q6] { position: fixed; inset: 0; z-index: 29; background: none; border: none; }
.voice-picker[b-upcllbd3q6] { position: relative; display: inline-flex; }
.tb-menu[b-upcllbd3q6] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 220px;
    max-width: 320px;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    box-shadow: var(--lb-shadow-lg);
    padding: var(--lb-gap-2);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.profile-menu[b-upcllbd3q6] { min-width: 200px; }
/* Menu po otevření bere fokus kvůli Esc; obrys kolem celé plochy by ale rušil - klávesnice se orientuje podle obrysu položek uvnitř. */
.profile-menu:focus[b-upcllbd3q6] { outline: none; }
.pm-mobile[b-upcllbd3q6] { display: none; }   /* jen mobil — desktop má ovládání v liště */
.pm-state[b-upcllbd3q6] { color: var(--lb-text-muted); font-size: var(--lb-fs-sm); font-weight: 600; }
.pm-voices[b-upcllbd3q6] { max-height: 220px; overflow-y: auto; }
.tb-menu-empty[b-upcllbd3q6] { padding: var(--lb-gap-4) var(--lb-gap-4); font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.tb-menu-item[b-upcllbd3q6], .tb-menu-link[b-upcllbd3q6] {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-3);
    width: 100%; background: none; border: none; text-align: left;
    padding: var(--lb-gap-3) var(--lb-gap-4); border-radius: var(--lb-radius-xs); cursor: pointer;
    font-size: var(--lb-fs-md); color: var(--lb-text); text-decoration: none;
}
.tb-menu-item:hover[b-upcllbd3q6], .tb-menu-link:hover[b-upcllbd3q6] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.tb-menu-active[b-upcllbd3q6] { background: color-mix(in srgb, var(--lb-accent) 12%, transparent); }
.tb-menu-active .tb-menu-name[b-upcllbd3q6] { font-weight: 600; color: var(--lb-accent); }
.tb-menu-name[b-upcllbd3q6] { font-size: var(--lb-fs-base); }
.tb-menu-tag[b-upcllbd3q6] { font-size: var(--lb-fs-2xs); color: var(--lb-text-muted); letter-spacing: .03em; }
.tb-menu-tag.tag-warn[b-upcllbd3q6] { color: var(--lb-hint-text); }   /* síťový hlas - varovat, seká se */
.tb-menu-sep[b-upcllbd3q6] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.tb-menu-danger[b-upcllbd3q6] { color: var(--lb-accent-strong); }
/* Hlášení chyby: červeně s broukem, ať se v menu najde na první pohled. Ikona vlevo,
   proto bez rozložení „text vlevo, stav vpravo" ostatních položek. */
.tb-menu-report[b-upcllbd3q6] { justify-content: flex-start; color: var(--lb-error-text); font-weight: 600; white-space: nowrap; }
.tb-menu-report:hover[b-upcllbd3q6] { background: var(--lb-error-bg); }
.tb-bug[b-upcllbd3q6] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.pm-user[b-upcllbd3q6] { padding: var(--lb-gap-2) var(--lb-gap-4) var(--lb-gap-0); font-size: var(--lb-fs-md); font-weight: 700; }
.tb-menu-reset[b-upcllbd3q6] { padding: var(--lb-gap-3) var(--lb-gap-4); font-size: var(--lb-fs-base); color: var(--lb-text); display: flex; align-items: center; gap: var(--lb-gap-3); }
.tb-reset-yes[b-upcllbd3q6], .tb-reset-no[b-upcllbd3q6] { border: none; background: none; cursor: pointer; font-weight: 600; }
.tb-reset-yes[b-upcllbd3q6] { color: var(--lb-accent-strong); }
.tb-reset-no[b-upcllbd3q6] { color: var(--lb-text-muted); }

.content[b-upcllbd3q6] {
    flex: 1;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: var(--lb-gap-8) var(--lb-gap-8) var(--lb-gap-10);
}
/* Patička je `fixed`, takže z toku obsahu nic neubírá - bez tohohle odsazení by
   ležela na posledním prvku stránky (a na dlouhých obrazovkách by se pod ni
   nedalo dorolovat). Výška lišty plus rytmus, ne přesné číslo na pixel.
   Dvě třídy schválně: mobilní blok níž přepisuje `.content` zkratkou `padding`,
   která nese i spodní hodnotu. Se stejnou vahou vyhrával pozdější zápis a na
   úzké obrazovce tím odsazení mizelo - lišta pak ležela na tlačítku. */
.content.content-botnav[b-upcllbd3q6] {
    padding-bottom: calc(var(--lb-botnav-h) + var(--lb-gap-9));
}

/* ── Spodní patička: rychlá navigace mezi moduly ── */
.botnav[b-upcllbd3q6] {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Stejná vrstva jako horní lišta, aby nabídka profilu (29/30) zůstala nad ní. */
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: var(--lb-gap-2);
    background: var(--lb-surface);
    border-top: 1px solid var(--lb-border);
    box-shadow: var(--lb-shadow-md);
    /* Gesture bar na iPhonu: bez safe-area by poslední řádek ikon ležel pod ním. */
    padding: var(--lb-gap-2) var(--lb-gap-4) calc(var(--lb-gap-2) + env(safe-area-inset-bottom, 0px));
}

.bn-item[b-upcllbd3q6] {
    position: relative;   /* ukazatel „tady jsem" je ::before na horní hraně */
    flex: 1 1 0;
    max-width: 7rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lb-gap-1);
    padding: var(--lb-gap-2) var(--lb-gap-1);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-text-muted);
    text-decoration: none;
    font-size: var(--lb-fs-xs);
    font-weight: 600;
    line-height: 1;
}
.bn-item svg[b-upcllbd3q6] { width: 22px; height: 22px; }
.bn-item span[b-upcllbd3q6] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bn-item:hover[b-upcllbd3q6] { color: var(--lb-text); background: var(--lb-warm-tint); }

/* Kde právě jsem: ukazatel na hraně + barevná ikona + tmavší popisek.
   Podbarvení akcentem tu bylo dřív a brána ho po právu zastavila - značková
   oranžová na vlastním jemném podkladu má 2,51:1 a na popisku o 0,72 rem se
   to nepřečte. Proužek nese zvýraznění tvarem, ne kontrastem barvy na barvě,
   takže funguje v obou motivech. */
.bn-on[b-upcllbd3q6] { color: var(--lb-accent-strong); }
.bn-on svg[b-upcllbd3q6] { color: var(--lb-accent); }
.bn-on[b-upcllbd3q6]::before {
    content: "";
    position: absolute;
    top: 0; left: 22%; right: 22%;
    height: 3px;
    border-radius: var(--lb-radius-pill);
    background: var(--lb-cta-gradient);
}

@media (max-width: 640px) {
    .topbar[b-upcllbd3q6] { gap: var(--lb-gap-3); padding: 0 var(--lb-gap-4); height: 3.4rem; }
    .topbar-inner[b-upcllbd3q6] { padding: 0 var(--lb-gap-4); gap: var(--lb-gap-3); }
    /* Mobil: text „Lang"/„Booster" pod sebe a menší, ať zbyde místo na ikonky vpravo. */
    .brand-name[b-upcllbd3q6] { display: flex; flex-direction: column; line-height: 1; font-size: var(--lb-fs-md); }
    .brand-icon[b-upcllbd3q6] { height: 1.9rem; }
    /* Přepínač kurzu (jen u víc kurzů) na mobilu co nejmenší, ať zbyde místo na ikonky:
       jen vlajka + úroveň, bez šipky, těsný padding. */
    .course-name[b-upcllbd3q6] { font-size: var(--lb-fs-sm); }
    .course-pill[b-upcllbd3q6] { padding: var(--lb-gap-1) var(--lb-gap-3); gap: var(--lb-gap-1); }
    .course-flag[b-upcllbd3q6] { font-size: var(--lb-fs-md); }
    .course-caret[b-upcllbd3q6] { display: none; }
    .tb-label[b-upcllbd3q6] { display: none; }
    .tb-btn[b-upcllbd3q6] { min-width: 2.1rem; height: 2.3rem; }
    .tb-btn svg[b-upcllbd3q6] { width: 18px; height: 18px; }
    .profile-btn[b-upcllbd3q6] { width: 2.3rem; height: 2.3rem; }
    .content[b-upcllbd3q6] { padding: var(--lb-gap-5) var(--lb-gap-5) var(--lb-gap-9); }

    /* Ikonky (auto-čtení / hlas / motiv) zůstávají v liště i na mobilu - je na ně místo.
       Menší rozestupy, ať se všechny vejdou. Duplikáty v menu pod účtem (.pm-mobile) skryté. */
    .tb-actions[b-upcllbd3q6] { gap: var(--lb-gap-0); }
    .tb-btn[b-upcllbd3q6] { min-width: 1.9rem; padding: 0 var(--lb-gap-1); }
}
/* /Layout/PageBack.razor.rz.scp.css */
.page-back[b-ueakepa5el] {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-gap-1);
    font-size: var(--lb-fs-md);
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--lb-muted);
    text-decoration: none;
    margin-bottom: var(--lb-gap-6);
    transition: color 0.15s ease;
}

.page-back:hover[b-ueakepa5el] {
    color: var(--lb-ink);
}

.page-back svg[b-ueakepa5el] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
/* /Pages/Gramatika.razor.rz.scp.css */
/* Přehled gramatiky — nový (fialový) design, sladěný s fází Gramatika v lekci. */
.gramatika-page[b-qg1yjswygd] { --g: var(--lb-purple); margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.gramatika-page h1[b-qg1yjswygd] { font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); margin-bottom: var(--lb-gap-1); color: var(--lb-ink); }
.subtitle[b-qg1yjswygd] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-8); }
.alert[b-qg1yjswygd] { color: var(--lb-error-text); padding: var(--lb-gap-6); }

.level[b-qg1yjswygd] { margin-top: var(--lb-gap-8); }
.level h2[b-qg1yjswygd] { font-size: var(--lb-fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g); margin-bottom: var(--lb-gap-4); }

.topic-list[b-qg1yjswygd] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.topic-card[b-qg1yjswygd] { text-align: left; background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-6) var(--lb-gap-7); cursor: pointer;
    box-shadow: var(--lb-shadow-xs); transition: border-color .12s, box-shadow .12s, transform .12s; }
.topic-card:hover[b-qg1yjswygd] { border-color: var(--g); box-shadow: 0 4px 14px color-mix(in srgb, var(--g) 16%, transparent); transform: translateY(-1px); }
.topic-card.done[b-qg1yjswygd] { background: color-mix(in srgb, var(--g) 5%, var(--lb-surface)); border-color: color-mix(in srgb, var(--g) 28%, transparent); }
.tc-head[b-qg1yjswygd] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-4); }
.tc-title[b-qg1yjswygd] { font-family: var(--lb-font-head); font-weight: 600; font-size: var(--lb-fs-xl); color: var(--lb-ink); }
.tc-meta[b-qg1yjswygd] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-1); }
.topic-card.done .tc-meta[b-qg1yjswygd] { color: var(--g); }

/* Odznak „hotovo" (zeleně, konzistentně s ostatními sekcemi) */
[b-qg1yjswygd] .lb-done-badge, .lb-done-badge[b-qg1yjswygd] { display: inline-flex; align-items: center; gap: var(--lb-gap-1); background: var(--lb-success-bg-hover); color: var(--lb-success-text); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-0) var(--lb-gap-4); font-size: var(--lb-fs-xs); font-weight: 700; }
/* /Pages/GramatikaTema.razor.rz.scp.css */
/* Detail gramatiky — nový (fialový) design, sladěný s fází Gramatika v lekci. */
.tema-page[b-lp69pv4h2i] { --g: var(--lb-purple); --lb-section: var(--lb-purple); --lb-section-gradient: linear-gradient(135deg, var(--lb-purple), var(--lb-purple-deep)); margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.alert[b-lp69pv4h2i] { color: var(--lb-error-text); padding: var(--lb-gap-6); }

.link-back:hover[b-lp69pv4h2i] { text-decoration: underline; }

.tema-eyebrow[b-lp69pv4h2i] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g); margin-top: var(--lb-gap-4); }
.tema-page h1[b-lp69pv4h2i] { font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); margin: var(--lb-gap-0) 0 var(--lb-gap-5); color: var(--lb-ink); }

/* dva kroky: výklad → procvičení */
.g-steps[b-lp69pv4h2i] { display: flex; gap: var(--lb-gap-3); margin: var(--lb-gap-1) 0 var(--lb-gap-7); }
.g-step[b-lp69pv4h2i] { font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text-muted); background: color-mix(in srgb, var(--g) 8%, transparent); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-1) var(--lb-gap-5); }
.g-step.active[b-lp69pv4h2i] { background: var(--g); color: var(--lb-on-accent); }
.g-step.passed[b-lp69pv4h2i] { color: var(--g); }


/* Procvičení */
.exercise[b-lp69pv4h2i] { border: 1px solid var(--lb-border); border-radius: var(--lb-radius); padding: var(--lb-gap-7) var(--lb-gap-7); background: var(--lb-surface); box-shadow: var(--lb-shadow-sm); }
.ex-prompt[b-lp69pv4h2i] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); margin-bottom: var(--lb-gap-6); color: var(--lb-ink); }
.ex-options[b-lp69pv4h2i] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.opt[b-lp69pv4h2i] { text-align: left; border: 1px solid var(--lb-border); background: var(--lb-surface); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-6); cursor: pointer; font-size: var(--lb-fs-md); transition: border-color .12s; }
.opt:hover:not(:disabled)[b-lp69pv4h2i] { border-color: var(--g); }
.opt.correct[b-lp69pv4h2i] { border-color: var(--lb-success-border); background: var(--lb-success-bg); color: var(--lb-success-text); font-weight: 600; }
.opt.wrong[b-lp69pv4h2i] { border-color: var(--lb-error); background: var(--lb-error-bg); color: var(--lb-error-text); font-weight: 600; }
.opt.dim[b-lp69pv4h2i] { opacity: .5; }

.finish[b-lp69pv4h2i] { margin-top: var(--lb-gap-8); display: flex; align-items: center; gap: var(--lb-gap-5); flex-wrap: wrap; }
.card-nav[b-lp69pv4h2i] { display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-5); margin-top: var(--lb-gap-7); }
.counter[b-lp69pv4h2i] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); font-variant-numeric: tabular-nums; }

/* skládání vět */
.order-prompt[b-lp69pv4h2i] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); margin-bottom: var(--lb-gap-5); }
.order-build[b-lp69pv4h2i] { min-height: 2.6rem; display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); padding: var(--lb-gap-4); border: 2px dashed color-mix(in srgb, var(--g) 30%, transparent); border-radius: var(--lb-radius-sm); margin-bottom: var(--lb-gap-5); }
.order-build.ok[b-lp69pv4h2i] { border-style: solid; border-color: var(--lb-success-border); background: var(--lb-success-bg); }
.order-bank[b-lp69pv4h2i] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); margin-bottom: var(--lb-gap-5); }
.order-placeholder[b-lp69pv4h2i] { color: var(--lb-text-muted); align-self: center; }
.chip[b-lp69pv4h2i] { border: 1px solid var(--lb-border-strong); background: var(--lb-surface); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-2) var(--lb-gap-5); cursor: pointer; font-size: var(--lb-fs-md); }
.chip:hover[b-lp69pv4h2i] { border-color: var(--g); }
.chip.placed[b-lp69pv4h2i] { background: color-mix(in srgb, var(--g) 8%, var(--lb-surface)); border-color: color-mix(in srgb, var(--g) 30%, transparent); }
.order-result[b-lp69pv4h2i] { margin: var(--lb-gap-3) 0; font-weight: 600; }
.order-result.ok[b-lp69pv4h2i] { color: var(--lb-success-text); }
.order-result.bad[b-lp69pv4h2i] { color: var(--lb-error-text); }
.hint-btn[b-lp69pv4h2i] { background: none; border: 1px solid color-mix(in srgb, var(--g) 30%, transparent); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-2) var(--lb-gap-5); cursor: pointer; font-size: var(--lb-fs-base); color: var(--g); }
.hint-btn:hover[b-lp69pv4h2i] { background: color-mix(in srgb, var(--g) 10%, transparent); }
/* /Pages/Home.razor.rz.scp.css */
.dash[b-dqxbk569pj] {
    display: flex;
    flex-direction: column;
    gap: var(--lb-gap-5);
}

.dash-loading[b-dqxbk569pj] { color: var(--lb-text-muted); font-style: italic; padding: var(--lb-gap-9) 0; }

/* ── Hlavička sekce ──
   Dashboard byl tři panely bez popisu, takže se číslo „91" a číslo „487" čtly jako
   jedna hromada údajů. Nadpis dělí stránku na „co dělat" a „jak mi to jde"; odkaz
   vpravo vede na celý přehled, takže dlaždice pod ním už žádný vlastní nemají. */
.sec-head[b-dqxbk569pj] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--lb-gap-4);
    margin-top: var(--lb-gap-2);
}
.sec-title[b-dqxbk569pj] { font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); margin: 0; color: var(--lb-ink); }
.sec-link[b-dqxbk569pj] {
    display: inline-flex; align-items: center; gap: var(--lb-gap-2);
    font-weight: 700; font-size: var(--lb-fs-base); color: var(--lb-accent);
    text-decoration: none; white-space: nowrap;
}
.sec-link svg[b-dqxbk569pj] { width: 16px; height: 16px; }
.sec-link:hover[b-dqxbk569pj] { color: var(--lb-accent-strong); }

/* ── HERO ── */
.hero[b-dqxbk569pj] {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: var(--lb-radius-lg);
    overflow: hidden;
    background: var(--lb-hero-bg);
    /* Panely rozcestniku maji SILNEJSI linku nez zbytek appky: --lb-border je
       ve svetlem motivu o par stupnu jasu od kremoveho pozadi, takze karta
       nemela hranu a sest dlazdic vedle sebe splyvalo v jednu plochu.
       --lb-border-strong uz v palete je a ma hodnotu v obou motivech, takze to
       neni nova barva, jen jina role na tomtez miste. */
    border: 1px solid var(--lb-border-strong);
    box-shadow: var(--lb-shadow-xs);
    min-height: 158px;
}

.hero-body[b-dqxbk569pj] {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--lb-gap-1);
    padding: var(--lb-gap-6) var(--lb-gap-7);
    min-width: 0;
}
.hero-eyebrow[b-dqxbk569pj] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-accent); }
/* Hotová kniha: zelená z palety jako karta „Lekce hotová" - na první pohled jiný stav než
   „pokračuj". Pruh i procenta zelené, tlačítko zůstává oranžové: vede dál, ne zpět. */
.hero--hotovo[b-dqxbk569pj] { background: var(--lb-success-bg); border-color: var(--lb-success-border); }
.hero--hotovo .hero-eyebrow[b-dqxbk569pj], .hero--hotovo .hero-pct[b-dqxbk569pj] { color: var(--lb-success-text); }
.hero--hotovo .hero-bar[b-dqxbk569pj] { background: color-mix(in srgb, var(--lb-success) 18%, transparent); }
.hero--hotovo .hero-bar span[b-dqxbk569pj] { background: var(--lb-success); }
.hero-title[b-dqxbk569pj] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); line-height: 1.05; margin: 0; color: var(--lb-ink); }
.hero-num[b-dqxbk569pj] { color: var(--lb-accent); opacity: .6; }   /* tlumene, aby nesvitilo vic nez nazev (jako SciBooster) */
.hero-sub[b-dqxbk569pj] { font-size: var(--lb-fs-base); color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }

.hero-progress[b-dqxbk569pj] { display: flex; align-items: center; gap: var(--lb-gap-5); margin-top: var(--lb-gap-1); max-width: 360px; }
.hero-bar[b-dqxbk569pj] { flex: 1; height: 9px; background: color-mix(in srgb, var(--lb-accent) 16%, transparent); border-radius: var(--lb-radius-pill); overflow: hidden; }
.hero-bar span[b-dqxbk569pj] { display: block; height: 100%; background: var(--lb-cta-gradient); border-radius: var(--lb-radius-pill); transition: width .3s ease; }
.hero-pct[b-dqxbk569pj] { font-weight: 700; color: var(--lb-accent); font-size: var(--lb-fs-md); }

.hero-meta[b-dqxbk569pj] { display: flex; align-items: center; gap: var(--lb-gap-4); color: var(--lb-text-secondary); font-size: var(--lb-fs-sm); }
.hero-chip[b-dqxbk569pj] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); }
.hero-chip svg[b-dqxbk569pj] { width: 14px; height: 14px; color: var(--lb-text-muted); }
.hero-sep[b-dqxbk569pj] { width: 1px; height: 13px; background: var(--lb-border); }

/* Vzhled ze sdilene .lb-btn.is-primary; hero ji jen zvetsuje a kotvi vlevo. */
.hero-cta[b-dqxbk569pj] {
    margin-top: var(--lb-gap-1);
    align-self: flex-start;
    padding: var(--lb-gap-5) var(--lb-gap-9);
    font-size: var(--lb-fs-lg);
}
.hero-cta svg[b-dqxbk569pj] { width: 20px; height: 20px; }
.hero-cta:hover[b-dqxbk569pj] { transform: translateY(-1px); box-shadow: var(--lb-shadow-cta-hover); }

.hero-foot[b-dqxbk569pj] {
    margin-top: var(--lb-gap-4);
    padding-top: var(--lb-gap-3);
    border-top: 1px solid color-mix(in srgb, var(--lb-accent) 22%, transparent);
    display: inline-flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: var(--lb-fs-md); color: var(--lb-accent);
    text-decoration: none;
}
.hero-foot svg[b-dqxbk569pj] { width: 18px; height: 18px; }
.hero-foot:hover[b-dqxbk569pj] { color: var(--lb-accent-strong); }

.hero-art[b-dqxbk569pj] { flex: 0 0 55%; position: relative; overflow: hidden; }
/* Postavy jsou v pravé části obrázku → výřez posunutý doprava (ne střed). */
/* Levý kraj jde DO ZTRACENA, ne ostrou hranou: obrázek se rozplyne do plochy
   panelu, takže vedle textu nestojí přilepená fotka, ale jedna karta. Maska, ne
   překryv barvou - ta by musela znát pozadí a v tmavém motivu by nesedělo.
   Výřez je posunutý doprava, takže mizí jen prázdné pozadí, ne postavy. */
.hero-art img[b-dqxbk569pj] {
    width: 100%; height: 100%; object-fit: cover; object-position: 78% 18%; display: block;
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 26%);
}
.hero--noart .hero-art[b-dqxbk569pj] { display: none; }
.hero--noart .hero-body[b-dqxbk569pj] { flex-basis: 100%; }

/* ── Tři moduly ── */
.mods[b-dqxbk569pj] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lb-gap-4); }

.mod[b-dqxbk569pj] {
    --mod: var(--lb-accent);
    display: flex; flex-direction: column; align-items: stretch; gap: var(--lb-gap-3);
    text-align: left;
    background: color-mix(in srgb, var(--mod) 6.5%, var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--mod) 16%, var(--lb-border-strong));
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-xs);
    padding: var(--lb-gap-5) var(--lb-gap-6);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.mod:hover[b-dqxbk569pj] { transform: translateY(-3px); box-shadow: var(--lb-shadow-md); }

/* Ikona sedí v řádku s nadpisem, ne absolutně v rohu: dlaždice tím zhubla o celý
   řádek a název modulu si vedle barevného kolečka drží identitu stopy. */
.mod-top[b-dqxbk569pj] { display: flex; align-items: center; gap: var(--lb-gap-4); min-width: 0; }
.mod-ico[b-dqxbk569pj] {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--mod) 20%, transparent);
}
.mod-ico img[b-dqxbk569pj] { width: 29px; height: 29px; object-fit: contain; }
.mod-titles[b-dqxbk569pj] { display: flex; flex-direction: column; gap: var(--lb-gap-0); min-width: 0; }

.mod-eyebrow[b-dqxbk569pj] { font-size: var(--lb-fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mod); }
.mod-head[b-dqxbk569pj] { font-family: var(--lb-font-head); font-size: var(--lb-fs-md); line-height: 1.12; color: var(--lb-ink); }

/* Vysvětlující řádek je rozšíření, ne nosná informace - dlaždice říká, co je
   a jak na tom jsi, i bez něj. Na úzké dlaždici zabíral dva řádky, takže se
   ukazuje až od šířky, kde má kam se vejít. */
.mod-desc[b-dqxbk569pj] { display: none; font-size: var(--lb-fs-sm); color: var(--lb-text-muted); line-height: 1.35; }
@media (min-width: 1120px) {
    .mod-desc[b-dqxbk569pj] { display: block; }
}

.mod-stat[b-dqxbk569pj] { margin-top: auto; padding-top: var(--lb-gap-2); width: 100%; display: flex; align-items: center; gap: var(--lb-gap-4); font-size: var(--lb-fs-base); color: var(--lb-text-secondary); }
.mod-stat-bar[b-dqxbk569pj] { flex: 1; height: 7px; background: color-mix(in srgb, var(--mod) 20%, transparent); border-radius: var(--lb-radius-pill); overflow: hidden; }
.mod-stat-bar span[b-dqxbk569pj] { display: block; height: 100%; background: var(--mod); border-radius: var(--lb-radius-pill); }
.mod-stat-val[b-dqxbk569pj] { font-weight: 600; white-space: nowrap; }
/* Opakování splněné pro dnešek - zelený akcent místo oranžového */
.mod-opakovani.mod-done[b-dqxbk569pj] { --mod: var(--lb-success-text); }

.mod-oblasti[b-dqxbk569pj] { --mod: var(--lb-green-vivid); }
.mod-gramatika[b-dqxbk569pj] { --mod: var(--lb-purple); }
.mod-opakovani[b-dqxbk569pj] { --mod: var(--lb-accent); }

/* ── Tvůj pokrok ── */
/* Série má vlastní kartu, každý údaj vlastní dlaždici. Dřív to byl jeden pruh,
   ve kterém série, dva údaje a Booster bojovaly o týž řádek a v němčině
   („Wörter gesehen") se přetlačily přes sebe. */
.prog-grid[b-dqxbk569pj] { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--lb-gap-4); }

.pcard[b-dqxbk569pj] {
    background: var(--lb-surface);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-xs);
    padding: var(--lb-gap-5) var(--lb-gap-6);
    min-width: 0;
}

.pcard-streak[b-dqxbk569pj] { display: flex; flex-direction: column; gap: var(--lb-gap-4); justify-content: center; }
.prog-streak[b-dqxbk569pj] { display: flex; align-items: center; gap: var(--lb-gap-2); }
.streak-flame[b-dqxbk569pj] { font-size: var(--lb-fs-xl); line-height: 1; }
.streak-num[b-dqxbk569pj] { font-weight: 700; color: var(--lb-ink); }

.prog-week[b-dqxbk569pj] { display: flex; gap: var(--lb-gap-2); }
.wk[b-dqxbk569pj] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-1); }
.wk-dot[b-dqxbk569pj] {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--lb-border-strong);
    color: var(--lb-on-accent);
}
.wk-dot svg[b-dqxbk569pj] { width: 14px; height: 14px; }
.wk-on .wk-dot[b-dqxbk569pj] { background: var(--lb-cta-gradient); border-color: transparent; }
.wk-today .wk-dot[b-dqxbk569pj] { box-shadow: var(--lb-ring-accent); }
.wk-d[b-dqxbk569pj] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 600; }
.wk-today .wk-d[b-dqxbk569pj] { color: var(--lb-accent); }

.pcard-stat[b-dqxbk569pj] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--lb-gap-1); text-align: center;
}
.prog-stat-ico[b-dqxbk569pj] { width: 22px; height: 22px; flex: 0 0 auto; color: var(--lb-accent); }
.pcard-stat strong[b-dqxbk569pj] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); line-height: 1.05; }
.pcard-stat span[b-dqxbk569pj] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); }

/* ── Booster: pruh přes celou šířku ── */
/* Bublina zůstává bublinou (Booster ke studentovi MLUVÍ), jen už nestojí
   vmáčknutá vedle statistik, ale má celou šířku a postavu vedle sebe. */
.tip[b-dqxbk569pj] {
    /* Bublina je přilepená k HORNÍMU kraji, ne na střed: vychází Boosterovi
       od hlavy, ne od pasu, a výšku pruhu určuje postava. */
    display: flex; align-items: flex-start; gap: var(--lb-gap-4);
    background: var(--lb-tip-bg);
    /* Obrys z akcentu, ne neutrální linka: pruh má být teplý celý, ne teplá
       výplň v šedém rámečku. */
    border: 1px solid color-mix(in srgb, var(--lb-accent) 30%, var(--lb-border-strong));
    border-radius: var(--lb-radius-lg);
    padding: var(--lb-gap-4) var(--lb-gap-5);
}
.tip-booster[b-dqxbk569pj] { width: 92px; height: auto; flex: 0 0 auto; }
.tip-body[b-dqxbk569pj] {
    position: relative; flex: 1 1 auto; min-width: 0;
    background: var(--lb-surface);
    border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-4) var(--lb-gap-6);
    box-shadow: var(--lb-shadow-sm);
}
.tip-body[b-dqxbk569pj]::before {
    /* Pevná vzdálenost od horního kraje, ne 50 % výšky: bublina roste podle délky
       hlášky a ocásek by se s ní sunul dolů od hlavy. */
    content: ""; position: absolute; left: -9px; top: var(--lb-gap-8);
    border: 9px solid transparent; border-right-color: var(--lb-surface); border-left: 0;
}
/* Titulek nese barvu značky: je to Boosterův hlas, ne další řádek textu,
   a v pruhu plném oranžové by šedý nadpis zapadl. */
.tip-title[b-dqxbk569pj] { font-weight: 700; font-size: var(--lb-fs-lg); color: var(--lb-accent-strong); margin-bottom: var(--lb-gap-1); }
.tip-text[b-dqxbk569pj] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); line-height: 1.4; }

/* Kolečko se šipkou uvnitř bubliny, svisle na střed - tentýž tvar jako hero CTA
   na mobilu. Text vedle něj má odsazení zprava, aby pod něj nelezl. */
.tip-title[b-dqxbk569pj], .tip-text[b-dqxbk569pj] { padding-right: var(--lb-gap-11); }
.tip-cta[b-dqxbk569pj] {
    position: absolute; right: var(--lb-gap-4); top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; padding: 0; gap: 0;
    justify-content: center;
}
.tip-cta svg[b-dqxbk569pj] { width: 18px; height: 18px; }
.tip-cta:hover[b-dqxbk569pj] { box-shadow: var(--lb-shadow-cta-hover); }

/* ── Prázdný stav ── */
.dash-empty[b-dqxbk569pj] { text-align: center; padding: var(--lb-gap-11) var(--lb-gap-8); display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-4); }
/* Booster misto emoji: kde appka mluvi ke studentovi, stoji tam pruvodce. */
.dash-empty-booster[b-dqxbk569pj] { width: 132px; height: auto; margin-bottom: var(--lb-gap-2); }
.dash-empty h1[b-dqxbk569pj] { font-size: var(--lb-fs-4xl); margin: 0; color: var(--lb-ink); }
.dash-empty p[b-dqxbk569pj] { color: var(--lb-text-muted); max-width: 26rem; margin: 0 0 var(--lb-gap-5); line-height: 1.55; }
.dash-empty-cta[b-dqxbk569pj] {
    margin-top: var(--lb-gap-5);
}

/* Tři moduly i tři karty pokroku drží jeden řádek ve VŠECH šířkách - i na
   telefonu, přesně jak je to ve schváleném mockupu. Dřív se pod 820 px
   srovnaly pod sebe a z rozcestníku byl svislý seznam: na úzkém panelu (440 px)
   se z šesti dlaždic stalo šest pruhů a přehled se ztratil. Aby se vešly, mění
   se OBSAH dlaždice (níž), ne počet sloupců. */
@media (max-width: 820px) {
    .hero[b-dqxbk569pj] { flex-direction: column; min-height: 0; }
    .hero-art[b-dqxbk569pj] { flex-basis: auto; height: 200px; }
    /* Obrázek je tu POD textem přes celou šířku - do ztracena jde proto horní
       kraj, ne levý; ten by ukrojil obrázek z boku bez důvodu. */
    .hero-art img[b-dqxbk569pj] {
        mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 22%);
    }
}

/* ── Úzko: dlaždice zhubne na výšku, řádek zůstane ── */
@media (max-width: 720px) {
    .mods[b-dqxbk569pj], .prog-grid[b-dqxbk569pj] { gap: var(--lb-gap-3); }
    .mod[b-dqxbk569pj] { padding: var(--lb-gap-4); }
    /* Ikona nad text: na 110px širokou dlaždici se vedle sebe nevejdou. */
    .mod-top[b-dqxbk569pj] { flex-direction: column; align-items: flex-start; gap: var(--lb-gap-2); }
    .mod-ico[b-dqxbk569pj] { width: 34px; height: 34px; }
    .mod-ico img[b-dqxbk569pj] { width: 23px; height: 23px; }
    /* Lišta pod číslo, ne vedle něj - na tuhle šířku by z ní byl pahýl. */
    .mod-stat[b-dqxbk569pj] { flex-direction: column; align-items: flex-start; gap: var(--lb-gap-2); }
    .mod-stat-bar[b-dqxbk569pj] { width: 100%; flex: 0 0 auto; }

    .prog-grid[b-dqxbk569pj] { grid-template-columns: 1.5fr 1fr 1fr; }
    .pcard[b-dqxbk569pj] { padding: var(--lb-gap-4); }
    .prog-week[b-dqxbk569pj] { gap: var(--lb-gap-1); }
    .wk-dot[b-dqxbk569pj] { width: 22px; height: 22px; }
    .wk-dot svg[b-dqxbk569pj] { width: 11px; height: 11px; }
}

/* ── Mobil: celkově zmenšit + míň odsazení ── */
@media (max-width: 560px) {
    .dash[b-dqxbk569pj] { gap: var(--lb-gap-6); }

    /* Na úzkém displeji jde hero na dřeň: řádky k sobě a menší odsazení. Je to
       pět krátkých řádků nad sebou, takže vzdušnost, která na široké kartě dělá
       klid, tady jen odsouvá obrázek pod ohyb. */
    .hero[b-dqxbk569pj] { border-radius: var(--lb-radius); }
    .hero-body[b-dqxbk569pj] { padding: var(--lb-gap-4) var(--lb-gap-5); gap: var(--lb-gap-1); }
    .hero-eyebrow[b-dqxbk569pj] { font-size: var(--lb-fs-2xs); padding-right: var(--lb-gap-11); }
    .hero-title[b-dqxbk569pj] { font-size: var(--lb-fs-3xl); padding-right: var(--lb-gap-11); line-height: 1; }
    .hero-sub[b-dqxbk569pj] { font-size: var(--lb-fs-sm); padding-right: var(--lb-gap-11); margin-top: 0; }
    .hero-progress[b-dqxbk569pj] { max-width: none; margin-top: var(--lb-gap-2); gap: var(--lb-gap-4); }
    .hero-meta[b-dqxbk569pj] { font-size: var(--lb-fs-sm); gap: var(--lb-gap-3); }
    /* Na mobilu je CTA jen šipka v pravém horním rohu. Pilulka v toku zabírala celý řádek
       a karta kvůli tomu přerostla, takže na obrázek zbývalo málo místa - a ten je tady
       polovina sdělení. Text „Začít"/„Pokračovat" nese `title`, takže se informace neztrácí.
       (Chvíli tu pilulka s textem byla, právě kvůli té informaci; autor pak dal přednost
       obrázku - proto ta odsazení zprava, aby nadpis nelezl pod šipku.) */
    .hero-cta[b-dqxbk569pj] {
        position: absolute; top: var(--lb-gap-5); right: var(--lb-gap-5); margin: 0;
        width: 40px; height: 40px; border-radius: 50%; padding: 0; gap: 0;
        justify-content: center;
    }
    .hero-cta svg[b-dqxbk569pj] { width: 18px; height: 18px; }
    .hero-cta-label[b-dqxbk569pj] { display: none; }
    .hero-foot[b-dqxbk569pj] { font-size: var(--lb-fs-base); margin-top: var(--lb-gap-3); padding-top: var(--lb-gap-3); }
    /* Místo, které uvolnila šipka, jde obrázku. */
    .hero-art[b-dqxbk569pj] { height: 150px; }

    /* Dlaždice je tady na třetinu šířky telefonu, takže se dál ZMENŠUJE.
       (Dřív se v tomhle bloku naopak zvětšovala - to platilo, dokud byla
       na mobilu přes celou šířku. Řádek tří dlaždic to dělal nepoužitelným.) */
    .mods[b-dqxbk569pj], .prog-grid[b-dqxbk569pj] { gap: var(--lb-gap-2); }
    .mod[b-dqxbk569pj] { padding: var(--lb-gap-3); }
    .mod-ico[b-dqxbk569pj] { width: 28px; height: 28px; }
    .mod-ico img[b-dqxbk569pj] { width: 19px; height: 19px; }
    .mod-head[b-dqxbk569pj] { font-size: var(--lb-fs-base); }
    .mod-stat[b-dqxbk569pj] { gap: var(--lb-gap-1); }
    .mod-stat-val[b-dqxbk569pj] { font-size: var(--lb-fs-xs); }

    .pcard[b-dqxbk569pj] { padding: var(--lb-gap-3); }
    .pcard-stat strong[b-dqxbk569pj] { font-size: var(--lb-fs-xl); }
    /* Kolečka dní se vejdou do třetiny řádku jen takhle malá; iniciály dnů
       zůstávají, bez nich by student nepoznal, který den je který. */
    .wk-dot[b-dqxbk569pj] { width: 15px; height: 15px; border-width: 1px; }
    .wk-dot svg[b-dqxbk569pj] { width: 9px; height: 9px; }
    .wk-d[b-dqxbk569pj] { font-size: var(--lb-fs-2xs); }

    /* Pruh Boostera na mobilu: postava a bublina vedle sebe, šipka zůstává
       v bublině. `flex-basis: 0` je tu nutnost, ne kosmetika: se zapnutým
       zalamováním flexbox nejdřív ZALAMUJE a až pak zužuje, takže bublina se
       svou šířkou podle textu spadla pod postavu a ocásek pak mířil do prázdna.
       (Tlačítko se tu dřív roztahovalo na celou šířku - to platilo, dokud stálo
       vedle bubliny jako pilulka s popiskem.) */
    .tip[b-dqxbk569pj] { flex-wrap: wrap; padding: var(--lb-gap-3) var(--lb-gap-4); gap: var(--lb-gap-2); }
    .tip-body[b-dqxbk569pj] { flex: 1 1 0; padding: var(--lb-gap-3) var(--lb-gap-5); }
    .tip-booster[b-dqxbk569pj] { width: 74px; }
    .tip-title[b-dqxbk569pj] { font-size: var(--lb-fs-md); }
    .tip-text[b-dqxbk569pj] { font-size: var(--lb-fs-xs); }
    /* Na úzkém displeji menší kolečko, ať bublině zbyde na text. */
    .tip-title[b-dqxbk569pj], .tip-text[b-dqxbk569pj] { padding-right: var(--lb-gap-9); }
    .tip-cta[b-dqxbk569pj] { width: 34px; height: 34px; right: var(--lb-gap-3); }
    .tip-cta svg[b-dqxbk569pj] { width: 15px; height: 15px; }
    .dash-empty-booster[b-dqxbk569pj] { width: 104px; }
}
/* /Pages/KorekturaGramatiky.razor.rz.scp.css */
/* Korektura gramatiky - dlouhý čtecí sloupec, lekce pod sebou. Karty mají fialovou barvu
   sekce Gramatika jako v lekci; poznámka a souhrn jsou neutrální, ať nesoutěží s obsahem. */
.kor-page[b-l4lutxxvy7] { --lb-section: var(--lb-purple); max-width: 760px; margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-11); }
.alert[b-l4lutxxvy7] { color: var(--lb-error-text); padding: var(--lb-gap-6); }
.kor-eyebrow[b-l4lutxxvy7] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-purple); margin-top: var(--lb-gap-4); }
.kor-page h1[b-l4lutxxvy7] { font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); margin: var(--lb-gap-0) 0 var(--lb-gap-3); color: var(--lb-ink); }
.kor-intro[b-l4lutxxvy7] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); margin: 0 0 var(--lb-gap-6); }

.kor-volby[b-l4lutxxvy7] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-5); margin-bottom: var(--lb-gap-8); }
.kor-volba[b-l4lutxxvy7] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-2); }
.kor-volba-label[b-l4lutxxvy7] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-right: var(--lb-gap-1); }
.kor-chip[b-l4lutxxvy7] { border: 1px solid var(--lb-border); background: var(--lb-surface); color: var(--lb-text); border-radius: var(--lb-radius-pill);
    padding: var(--lb-gap-1) var(--lb-gap-5); font-size: var(--lb-fs-sm); font-weight: 600; cursor: pointer; }
.kor-chip.is-on[b-l4lutxxvy7] { background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent); }

/* Lekce: výrazně oddělené bloky - fialová hlavička s číslem nahoře, rámeček pro korekturu
   dole. Tenká linka mezi lekcemi nestačila, lekce splývaly (autor 26.09.2026). */
.kor-lekce[b-l4lutxxvy7] { margin-top: var(--lb-gap-11); }
.kor-lekce-head[b-l4lutxxvy7] { background: var(--lb-purple-bg); border: 1px solid var(--lb-purple-border); border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-5) var(--lb-gap-6); margin-bottom: var(--lb-gap-7); }
.kor-lekce-title[b-l4lutxxvy7] { display: flex; align-items: center; gap: var(--lb-gap-4); font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); color: var(--lb-ink); margin: 0; }
.kor-num[b-l4lutxxvy7] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 2rem; height: 2rem; padding: 0 var(--lb-gap-2);
    border-radius: var(--lb-radius-pill); background: var(--lb-purple); color: var(--lb-on-accent);
    font-family: var(--lb-font-body); font-size: var(--lb-fs-md); font-weight: 700; }
.kor-karta[b-l4lutxxvy7] { margin-bottom: var(--lb-gap-7); }
/* Karty jedné lekce od sebe odděluje fialová linka - bez ní splývaly příklady jedné
   s pravidlem druhé (autor 26.09.2026). Hlavička lekce zůstává výraznější. */
.kor-karta + .kor-karta[b-l4lutxxvy7] { border-top: 2px solid var(--lb-purple-border); padding-top: var(--lb-gap-7); }
.kor-karta-title[b-l4lutxxvy7] { font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); font-weight: 600; color: var(--lb-ink); margin: 0 0 var(--lb-gap-4); }

.kor-pozn-box[b-l4lutxxvy7] { margin-top: var(--lb-gap-2); border: 1px dashed var(--lb-border-strong); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5); background: var(--lb-surface); }
.kor-napsat svg[b-l4lutxxvy7] { width: 17px; height: 17px; }
.kor-pozn-label[b-l4lutxxvy7] { display: block; font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-text-muted); margin-bottom: var(--lb-gap-2); }
.kor-pozn[b-l4lutxxvy7] { box-sizing: border-box; width: 100%; font: inherit; font-size: var(--lb-fs-md); color: var(--lb-ink); background: var(--lb-surface);
    border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-5); resize: vertical; }
.kor-pozn:focus[b-l4lutxxvy7] { outline: none; border-color: var(--lb-purple); }

.kor-souhrn[b-l4lutxxvy7] { margin-top: var(--lb-gap-11); padding-top: var(--lb-gap-8); border-top: 2px solid var(--lb-purple-border); }
.kor-souhrn h2[b-l4lutxxvy7] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); color: var(--lb-ink); margin: 0 0 var(--lb-gap-3); }
.kor-prazdno[b-l4lutxxvy7] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); }
.kor-text[b-l4lutxxvy7] { white-space: pre-wrap; font-family: var(--lb-font-body); font-size: var(--lb-fs-sm); color: var(--lb-text); background: var(--lb-surface);
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5); max-height: 360px; overflow: auto; }
.kor-akce[b-l4lutxxvy7] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-5); }
.kor-mazani[b-l4lutxxvy7] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
/* /Pages/Login.razor.rz.scp.css */
.login-card[b-tmmbz1rdme] {
    max-width: 400px;
    margin: 10vh auto 0;
    padding: var(--lb-gap-10) var(--lb-gap-9);
    background: var(--lb-surface);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--lb-accent) 12%, transparent);
}

.login-brand[b-tmmbz1rdme] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--lb-gap-4);
    margin-bottom: var(--lb-gap-8);
}

/* Celá postava vedle textu na jednom řádku by musela mít výšku písma a nebyla by k
   poznání; proto je nad ním a dostane prostor. */
.login-logo[b-tmmbz1rdme] { height: 130px; width: auto; filter: drop-shadow(0 5px 10px rgba(27,24,27,.22)); }

/* Booster vítá a rovnou mluví. Bublina stojí vlevo od něj, ocásek míří na hlavu -
   ne doprostřed postavy, kde by vypadal jako by mluvil hrudí. */
.login-hello[b-tmmbz1rdme] { display: flex; align-items: flex-start; justify-content: center; gap: var(--lb-gap-3); }
.login-hello-bubble[b-tmmbz1rdme] {
    position: relative;
    max-width: 190px;
    margin-top: var(--lb-gap-4);
    padding: var(--lb-gap-3) var(--lb-gap-4);
    background: var(--lb-tip-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    font-size: var(--lb-fs-base);
    line-height: 1.35;
    color: var(--lb-text);
    text-align: left;
}
/* Ocásek dvakrát: spodní trojúhelník dělá obrys, horní ho zakryje plochou bubliny. */
.login-hello-bubble[b-tmmbz1rdme]::before,
.login-hello-bubble[b-tmmbz1rdme]::after {
    content: ""; position: absolute; top: 14px;
    border: 8px solid transparent;
}
.login-hello-bubble[b-tmmbz1rdme]::before { right: -9px; border-left-color: var(--lb-border); }
.login-hello-bubble[b-tmmbz1rdme]::after { right: -8px; border-left-color: var(--lb-tip-bg); }

/* V dark mode splyne --lb-tip-bg (#15181D) s kartou (#14171B) - dáme bublině vlastní tón. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .login-hello-bubble[b-tmmbz1rdme] {
        background: var(--lb-surface-elevated);
        border-color: var(--lb-border-strong);
    }
    :root:not([data-theme="light"]) .login-hello-bubble[b-tmmbz1rdme]::after {
        border-left-color: var(--lb-surface-elevated);
    }
    :root:not([data-theme="light"]) .login-hello-bubble[b-tmmbz1rdme]::before {
        border-left-color: var(--lb-border-strong);
    }
}
:root[data-theme="dark"] .login-hello-bubble[b-tmmbz1rdme] {
    background: var(--lb-surface-elevated);
    border-color: var(--lb-border-strong);
}
:root[data-theme="dark"] .login-hello-bubble[b-tmmbz1rdme]::after {
    border-left-color: var(--lb-surface-elevated);
}
:root[data-theme="dark"] .login-hello-bubble[b-tmmbz1rdme]::before {
    border-left-color: var(--lb-border-strong);
}

/* Na úzkém displeji se bublina i s postavou nevejde vedle sebe. */
@media (max-width: 420px) {
    .login-hello-bubble[b-tmmbz1rdme] { max-width: 150px; }
    .login-logo[b-tmmbz1rdme] { height: 104px; }
}

/* Značka musí sedět s hlavičkou appky: patkový nadpisový font, ne tělový Inter. */
.login-name[b-tmmbz1rdme] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); font-weight: 700; letter-spacing: -.01em; color: var(--lb-ink); }
.login-accent[b-tmmbz1rdme] { color: var(--lb-accent); }

.login-title[b-tmmbz1rdme] {
    font-size: var(--lb-fs-xl);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--lb-gap-8);
}

.login-field[b-tmmbz1rdme] {
    display: block;
    margin-bottom: var(--lb-gap-6);
}

.login-field > span[b-tmmbz1rdme] {
    display: block;
    font-size: var(--lb-fs-sm);
    font-weight: 600;
    color: var(--lb-text-muted);
    margin-bottom: var(--lb-gap-2);
}

.login-input[b-tmmbz1rdme] {
    width: 100%;
    padding: var(--lb-gap-4) var(--lb-gap-5);
    font-size: var(--lb-fs-md);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm);
    background: var(--lb-paper-warm);
    color: inherit;
    box-sizing: border-box;
}

.login-input:focus[b-tmmbz1rdme] {
    outline: none;
    border-color: var(--lb-accent);
    box-shadow: var(--lb-ring-accent);
}

.login-error[b-tmmbz1rdme] {
    background: var(--lb-error-bg);
    color: var(--lb-error-text);
    border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-4) var(--lb-gap-5);
    font-size: var(--lb-fs-base);
    margin-bottom: var(--lb-gap-6);
}

.login-cta[b-tmmbz1rdme] {
    width: 100%;
    padding: var(--lb-gap-5);
    font-weight: 700;
}

.login-cta:disabled[b-tmmbz1rdme] { opacity: .6; cursor: default; }
/* /Pages/Nastaveni.razor.rz.scp.css */
.settings[b-7dd727qecd] { max-width: 640px; margin: 0 auto; padding: var(--lb-gap-8) var(--lb-gap-8) var(--lb-gap-11); }
.settings h1[b-7dd727qecd] { font-size: var(--lb-fs-5xl); margin: 0 0 var(--lb-gap-8); color: var(--lb-ink-read); }

.set-block[b-7dd727qecd] { margin-bottom: var(--lb-gap-9); }
.set-head[b-7dd727qecd] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--lb-gap-5); }
.set-head h2[b-7dd727qecd] { font-size: var(--lb-fs-xl); margin: 0; color: var(--lb-accent-strong); }
.set-add[b-7dd727qecd] {
    font-size: var(--lb-fs-sm);
}
.set-desc[b-7dd727qecd] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); margin: 0 0 var(--lb-gap-6); line-height: 1.5; }
.goal-opts[b-7dd727qecd] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lb-gap-4); }
.goal-opt[b-7dd727qecd] { display: flex; flex-direction: column; align-items: flex-start; gap: var(--lb-gap-0); text-align: left;
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-6); cursor: pointer; transition: all .12s; }
.goal-opt:hover[b-7dd727qecd] { border-color: var(--lb-accent-strong); }
.goal-opt.on[b-7dd727qecd] { border-color: var(--lb-accent-strong); background: color-mix(in srgb, var(--lb-accent-strong) 8%, var(--lb-surface)); box-shadow: 0 0 0 1px var(--lb-accent-strong) inset; }
.goal-opt-label[b-7dd727qecd] { font-weight: 600; font-size: var(--lb-fs-md); color: var(--lb-ink-read); }
.goal-opt.on .goal-opt-label[b-7dd727qecd] { color: var(--lb-accent-strong); }
.goal-opt-note[b-7dd727qecd] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
@media (max-width: 480px) { .goal-opts[b-7dd727qecd] { grid-template-columns: 1fr; } }
.set-empty[b-7dd727qecd] { color: var(--lb-text-secondary); }

.set-courses[b-7dd727qecd] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.set-course[b-7dd727qecd] {
    display: flex; align-items: center; gap: var(--lb-gap-5);
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-7);
}
.set-course.active[b-7dd727qecd] { background: var(--lb-warm-tint); border-color: var(--lb-warm-border); }
.set-flag[b-7dd727qecd] { font-size: var(--lb-fs-4xl); line-height: 1; }
.set-course-body[b-7dd727qecd] { flex: 1; }
.set-course-title[b-7dd727qecd] { font-weight: 700; color: var(--lb-ink-read); }
.set-course-sub[b-7dd727qecd] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); }
.set-progress-bar[b-7dd727qecd] { height: 5px; background: var(--lb-warm-tint-2); border-radius: var(--lb-radius-pill); overflow: hidden; margin: var(--lb-gap-2) 0 var(--lb-gap-1); }
.set-progress-fill[b-7dd727qecd] { height: 100%; background: var(--lb-accent-strong); border-radius: var(--lb-radius-pill); }
.set-progress-pct[b-7dd727qecd] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.set-badge[b-7dd727qecd] { font-size: var(--lb-fs-sm); color: var(--lb-success-text); background: var(--lb-success-bg); border: 1px solid var(--lb-success-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-0) var(--lb-gap-4); }
.set-switch[b-7dd727qecd] { background: none; border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-2) var(--lb-gap-5); font-size: var(--lb-fs-base); cursor: pointer; color: var(--lb-text-secondary); }
.set-switch:hover[b-7dd727qecd] { border-color: var(--lb-accent-strong); color: var(--lb-accent-strong); }
.set-course-actions[b-7dd727qecd] { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lb-gap-2); }
.set-remove[b-7dd727qecd] { background: none; border: none; padding: var(--lb-gap-0) var(--lb-gap-1); font-size: var(--lb-fs-sm); cursor: pointer; color: var(--lb-text-muted); text-decoration: underline; }
.set-remove:hover[b-7dd727qecd] { color: var(--lb-error-text); }
.set-remove-confirm[b-7dd727qecd] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); display: inline-flex; align-items: center; gap: var(--lb-gap-2); }
.set-remove-yes[b-7dd727qecd] {
    color: var(--lb-error-text);
}
.set-remove-no[b-7dd727qecd] {
    color: var(--lb-text-muted);
}
/* „Učení přes jiný jazyk" — label + combo s vlaječkami */
.set-cross-row[b-7dd727qecd] { display: flex; align-items: center; gap: var(--lb-gap-3); margin-top: var(--lb-gap-4); flex-wrap: wrap; }
.set-cross-lbl[b-7dd727qecd] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.cross-picker[b-7dd727qecd] { position: relative; }
.cross-btn[b-7dd727qecd] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); padding: var(--lb-gap-1) var(--lb-gap-4) var(--lb-gap-1) var(--lb-gap-4); border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border-strong); background: var(--lb-surface); color: var(--lb-text); font-family: inherit; font-size: var(--lb-fs-sm); font-weight: 600; cursor: pointer; transition: border-color .15s; }
.cross-btn:hover[b-7dd727qecd], .cross-btn.on[b-7dd727qecd] { border-color: var(--lb-accent-strong); }
.cross-btn .cross-off[b-7dd727qecd] { color: var(--lb-text-muted); font-weight: 600; }
.cross-caret[b-7dd727qecd] { width: 15px; height: 15px; color: var(--lb-text-muted); }
.cross-menu[b-7dd727qecd] { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 100%;
    background: var(--lb-surface-elevated); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); box-shadow: var(--lb-shadow-lg);
    padding: var(--lb-gap-1); display: flex; flex-direction: column; gap: 1px; }
.cross-opt[b-7dd727qecd] { display: flex; align-items: center; gap: var(--lb-gap-3); width: 100%; white-space: nowrap; background: none; border: none;
    text-align: left; padding: var(--lb-gap-2) var(--lb-gap-4); border-radius: var(--lb-radius-xs); font-family: inherit; font-size: var(--lb-fs-base); color: var(--lb-text); cursor: pointer; }
.cross-opt:hover[b-7dd727qecd] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-opt.on[b-7dd727qecd] { background: var(--lb-error-bg); color: var(--lb-accent-strong); font-weight: 700; }
.cross-btn[b-7dd727qecd]  .lb-flag, .cross-opt[b-7dd727qecd]  .lb-flag { width: 20px; height: 14px; border-radius: var(--lb-radius-2xs); overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.cross-btn[b-7dd727qecd]  .lb-flag svg, .cross-opt[b-7dd727qecd]  .lb-flag svg { width: 100%; height: 100%; display: block; }

/* plná imerze — přepínač na konci menu */
.cross-sep[b-7dd727qecd] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.cross-full[b-7dd727qecd] { display: flex; align-items: center; gap: var(--lb-gap-4); width: 100%; background: none; border: none;
    text-align: left; padding: var(--lb-gap-2) var(--lb-gap-4); border-radius: var(--lb-radius-xs); font-family: inherit; cursor: pointer; }
.cross-full:hover[b-7dd727qecd] { background: var(--lb-warm-tint); }
.cross-full-txt[b-7dd727qecd] { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--lb-fs-base); color: var(--lb-text); white-space: nowrap; }
.cross-full-txt small[b-7dd727qecd] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 400; }
.cross-full.on .cross-full-txt[b-7dd727qecd] { color: var(--lb-accent-strong); font-weight: 700; }
.cross-toggle[b-7dd727qecd] { flex: 0 0 auto; width: 34px; height: 20px; border-radius: var(--lb-radius-pill); background: var(--lb-border-strong); position: relative; transition: background .15s; }
.cross-toggle.on[b-7dd727qecd] { background: var(--lb-accent-strong); }
.cross-knob[b-7dd727qecd] { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lb-on-accent); box-shadow: var(--lb-shadow-xs); transition: transform .15s; }
.cross-toggle.on .cross-knob[b-7dd727qecd] { transform: translateX(14px); }

/* ── Hlasy: radek = role, vyber hlasu, zkouska ─────────────────────────── */
.voice-rows[b-7dd727qecd] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.voice-row[b-7dd727qecd] {
    display: flex; align-items: center; gap: var(--lb-gap-5); flex-wrap: wrap;
    background: var(--lb-surface); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-6);
}
.voice-role[b-7dd727qecd] { display: flex; flex-direction: column; min-width: 9rem; flex: 1 1 9rem; }
.voice-role-name[b-7dd727qecd] { font-weight: 600; color: var(--lb-text); }
.voice-role-note[b-7dd727qecd] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); }
.voice-select[b-7dd727qecd] {
    flex: 1 1 12rem; min-width: 0; font-family: inherit; font-size: var(--lb-fs-base);
    color: var(--lb-text); background: var(--lb-surface);
    border: 1px solid var(--lb-border-strong); border-radius: var(--lb-radius-xs);
    padding: var(--lb-gap-2) var(--lb-gap-3);
}
.voice-test[b-7dd727qecd] {
    flex: 0 0 auto;
    font-size: var(--lb-fs-base);
    color: var(--lb-accent-strong);
}
/* Ktery hlas se pro roli opravdu pouzije (i kdyz ho vybral automat). */
.voice-now[b-7dd727qecd] { flex: 0 0 auto; font-size: var(--lb-fs-xs); color: var(--lb-text-muted); }
/* Zkusebni veta: at je videt, co se prave prehralo. */
.voice-sample[b-7dd727qecd] { font-style: italic; margin-top: var(--lb-gap-4); }
.voice-prefill[b-7dd727qecd] { flex: 0 0 auto; font-size: var(--lb-fs-base); padding: var(--lb-gap-2) var(--lb-gap-5); }
/* /Pages/Oblasti.razor.rz.scp.css */
/* ── Oblasti (ADR-23) ─────────────────────────────────────────────────────────
   Odlišení od lekcí je tvarem: obrázek série je KRUH s písmenem dílu, zatímco
   lekce mají obdélníkový banner. Písmeno kreslí appka (CSS overlay), do malby
   se nikdy nepíše - jeden obrázek tak obslouží celou sérii A/B/C.
   ──────────────────────────────────────────────────────────────────────────── */
/* Sekce oblasti je zelena - sdilena tlacitka z ni berou barvu. */
.oblasti-picker[b-5hvp3nfpkx], .oblast[b-5hvp3nfpkx] { --lb-section: var(--lb-mod-oblasti); --lb-section-gradient: linear-gradient(135deg, var(--lb-green-vivid), var(--lb-green-deep)); margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.alert[b-5hvp3nfpkx] { color: var(--lb-error); }

.oblasti-picker h1[b-5hvp3nfpkx] { font-size: var(--lb-fs-5xl); margin-bottom: var(--lb-gap-1); }
.oblasti-picker .sub[b-5hvp3nfpkx] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-8); }

/* filtry - stejný vzhled jako filtr lekcí (.lf) */
.dm-filters[b-5hvp3nfpkx] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); margin-bottom: var(--lb-gap-4); }
.dm-filters.dm-tags[b-5hvp3nfpkx] { margin-bottom: var(--lb-gap-8); }
.lf[b-5hvp3nfpkx] {
    border: 1px solid var(--lb-border); background: var(--lb-surface);
    color: var(--lb-text-secondary); border-radius: var(--lb-radius-pill);
    padding: var(--lb-gap-2) var(--lb-gap-6); font-size: var(--lb-fs-base); cursor: pointer;
}
.lf:hover[b-5hvp3nfpkx] { border-color: var(--lb-accent); }
.lf.lf-on[b-5hvp3nfpkx] { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-on-accent); }
.lf.lf-tag[b-5hvp3nfpkx] { font-size: var(--lb-fs-sm); padding: var(--lb-gap-1) var(--lb-gap-5); }

.dm-series[b-5hvp3nfpkx] { margin-bottom: var(--lb-gap-8); }
/* Mřížka se stejně vysokými řádky: karta s dvouřádkovým názvem nesmí natáhnout jen svůj
   řádek, jinak má každá řada jinou výšku (autor 03.10.2026). */
.dm-cards[b-5hvp3nfpkx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-auto-rows: 1fr; gap: var(--lb-gap-5); }
.dm-card[b-5hvp3nfpkx] {
    display: flex; align-items: center; gap: var(--lb-gap-5); text-align: left;
    background: var(--lb-surface); border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius); padding: var(--lb-gap-5) var(--lb-gap-7) var(--lb-gap-5) var(--lb-gap-5);
    cursor: pointer;
}
.dm-card:hover[b-5hvp3nfpkx] { border-color: var(--lb-accent); }
.dm-card.dm-locked[b-5hvp3nfpkx] { opacity: .55; cursor: not-allowed; }
.dm-card.dm-locked:hover[b-5hvp3nfpkx] { border-color: var(--lb-border); }

/* ── kruhová „placka" série + písmeno dílu ── */
.dm-badge[b-5hvp3nfpkx] {
    position: relative; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
    overflow: hidden; display: grid; place-items: center;
    background: color-mix(in srgb, var(--dm-part, var(--lb-accent)) 16%, var(--lb-surface));
    border: 2px solid color-mix(in srgb, var(--dm-part, var(--lb-accent)) 45%, transparent);
}
.dm-badge img[b-5hvp3nfpkx] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pismeno dilu se kresli PRES obrazek serie, takze na svetlem motivu (snih, pecivo, papir)
   by zmizelo i pres stin. Jemne ztmaveni drzi kontrast, at je pod nim cokoli; bez obrazku
   se neuplatni, protoze tam uz plnou barvu drzi .dm-badge--noimg. Sedi POD pismenem, tedy
   nize nez ve stredu, aby motiv zbytecne nekalilo. */
.dm-badge:has(img)[b-5hvp3nfpkx]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 78%, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .10) 50%, transparent 72%);
}
/* Pismeno je male a sedi dole, ne uprostred: v kruhu 62 px zabiralo velke `A` stred motivu
   a treba z jidla u cs-dishes nezbylo skoro nic. Dole navic nekonkuruje motivu o tyz prostor
   a cte se jako index u ikony. Velikost se mezi 62 a 96 px skaluje stejnym pomerem. */
.dm-letter[b-5hvp3nfpkx] {
    position: relative; z-index: 1; font-family: var(--lb-font-head);
    font-size: var(--lb-fs-md); font-weight: 700; color: var(--lb-on-accent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    align-self: end; margin-bottom: var(--lb-gap-0);
}
/* Bez obrázku není co podkládat - písmeno dostane plnou barvu série. */
.dm-badge--noimg[b-5hvp3nfpkx] { background: var(--dm-part, var(--lb-accent)); }
.dm-badge--lg[b-5hvp3nfpkx] { width: 96px; height: 96px; }
.dm-badge--lg .dm-letter[b-5hvp3nfpkx] { font-size: var(--lb-fs-3xl); margin-bottom: var(--lb-gap-1); }

/* deterministická paleta podle pořadí písmene (A, B, C…) */
.dm-badge[data-part="0"][b-5hvp3nfpkx] { --dm-part: var(--lb-accent); }
.dm-badge[data-part="1"][b-5hvp3nfpkx] { --dm-part: var(--lb-teal); }
.dm-badge[data-part="2"][b-5hvp3nfpkx] { --dm-part: var(--lb-purple); }
.dm-badge[data-part="3"][b-5hvp3nfpkx] { --dm-part: var(--lb-green-vivid); }
.dm-badge[data-part="4"][b-5hvp3nfpkx] { --dm-part: var(--lb-sun); }

.dm-check[b-5hvp3nfpkx], .dm-lock[b-5hvp3nfpkx] {
    position: absolute; z-index: 2; right: -2px; bottom: -2px;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: var(--lb-fs-xs); background: var(--lb-surface); border: 1px solid var(--lb-border);
}
.dm-check[b-5hvp3nfpkx] { color: var(--lb-green-vivid); font-weight: 700; }

.dm-body[b-5hvp3nfpkx] { display: flex; flex-direction: column; gap: var(--lb-gap-1); min-width: 0; flex: 1; }
.dm-title[b-5hvp3nfpkx] { font-weight: 600; font-size: var(--lb-fs-lg); color: var(--lb-text); }
.dm-meta[b-5hvp3nfpkx] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); }
.dm-bar[b-5hvp3nfpkx] {
    display: block; height: 5px; border-radius: var(--lb-radius-2xs); overflow: hidden;
    background: color-mix(in srgb, var(--lb-border) 70%, transparent);
}
.dm-bar > span[b-5hvp3nfpkx] { display: block; height: 100%; background: var(--lb-accent); }

/* ── detail oblasti ── */
.dm-intro[b-5hvp3nfpkx] { padding-top: var(--lb-gap-3); }
.dm-hero[b-5hvp3nfpkx] { display: flex; align-items: center; gap: var(--lb-gap-7); margin-bottom: var(--lb-gap-7); }
.dm-hero-txt[b-5hvp3nfpkx] { min-width: 0; }
.dm-hero-txt .ph-title[b-5hvp3nfpkx] { margin-bottom: var(--lb-gap-0); }
.dm-hero-txt .sub[b-5hvp3nfpkx] { color: var(--lb-text-muted); margin: 0; font-size: var(--lb-fs-md); }
.dm-skills[b-5hvp3nfpkx] { margin-bottom: var(--lb-gap-7); }
.dm-skills h2[b-5hvp3nfpkx] { font-size: var(--lb-fs-md); color: var(--lb-text-secondary); margin: 0 0 var(--lb-gap-2); }
.dm-skills ul[b-5hvp3nfpkx] { margin: 0; padding-left: var(--lb-gap-7); color: var(--lb-text); }
.dm-skills li[b-5hvp3nfpkx] { margin-bottom: var(--lb-gap-1); }
.dm-progress[b-5hvp3nfpkx] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); margin: 0 0 var(--lb-gap-1); }
.dm-note[b-5hvp3nfpkx] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-4); }

/* Etapová lišta (.breadcrumb) je v app.css - tady se opisovala, takže se rozjížděla. */

/* Nadpis drzi barvu nadpisu jinde v aplikaci; modula se pozna z prouzku postupu. */
.ph-title[b-5hvp3nfpkx] { font-size: var(--lb-fs-2xl); color: var(--lb-accent-strong); margin: 0 0 var(--lb-gap-4); }


.card-nav[b-5hvp3nfpkx] { display: flex; justify-content: center; gap: var(--lb-gap-5); margin-top: var(--lb-gap-8); flex-wrap: wrap; }
.skip[b-5hvp3nfpkx] { display: block; margin: var(--lb-gap-6) auto 0; background: none; border: none; color: var(--lb-text-muted); cursor: pointer; font-size: var(--lb-fs-base); }
.skip:hover[b-5hvp3nfpkx] { color: var(--lb-accent); text-decoration: underline; }

.finish[b-5hvp3nfpkx] { text-align: center; padding-top: var(--lb-gap-8); }
.finish .dm-bar[b-5hvp3nfpkx] { max-width: 22rem; margin: 0 auto; }

/* Konec dílu: Booster vedle názvu a věty, stejně jako konec knihy v lekci. */
.dm-done[b-5hvp3nfpkx] {
    display: flex; align-items: center; gap: var(--lb-gap-6); text-align: left;
    margin: 0 0 var(--lb-gap-7); padding: var(--lb-gap-6);
    background: var(--lb-accent-tint); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg);
}
.dm-done-booster[b-5hvp3nfpkx] { width: 8rem; height: auto; flex: 0 0 auto; }
.dm-done-texty[b-5hvp3nfpkx] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.dm-done-title[b-5hvp3nfpkx] { margin: 0; font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }
.dm-done-text[b-5hvp3nfpkx] { margin: 0; color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }
@media (max-width: 560px) {
    .dm-done[b-5hvp3nfpkx] { flex-direction: column; text-align: center; }
    .dm-done-booster[b-5hvp3nfpkx] { width: 6.5rem; }
}
/* Nabídka dalšího průchodu: všechna tlačítka stejně široká a vystředěná. Mřížka by lichý
   počet (3 tlačítka) nechala viset vlevo; takhle se poslední řádek vystředí. */
.dm-again .lb-btn[b-5hvp3nfpkx] { flex: 0 0 16rem; }
@media (max-width: 480px) { .dm-again .lb-btn[b-5hvp3nfpkx] { flex: 1 1 100%; max-width: 22rem; } }

/* ── strom témat ──────────────────────────────────────────────────────────────
   Téma není učivo, proto vypadá jinak než série: obdélníková dlaždice bez kruhu
   a bez písmene. Kruh s písmenem si drží jen to, co se opravdu učí.
   ──────────────────────────────────────────────────────────────────────────── */
/* Drobečky: cesta stromem, ne volba filtru - proto bez rámečku a s oddělovačem. */
.dm-crumbs[b-5hvp3nfpkx] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-2);
    margin-bottom: var(--lb-gap-6); }
.dm-crumb[b-5hvp3nfpkx] {
    background: none; border: none; padding: var(--lb-gap-1) 0; cursor: pointer;
    font: inherit; font-size: var(--lb-fs-base); color: var(--lb-text-secondary);
}
.dm-crumb:hover[b-5hvp3nfpkx] { color: var(--lb-mod-oblasti-text); text-decoration: underline; }
/* Poslední drobeček je místo, kde student stojí - nezvýrazňuje se jako odkaz. */
.dm-crumb-on[b-5hvp3nfpkx] { color: var(--lb-mod-oblasti-text); font-weight: 600; }
.dm-crumb-sep[b-5hvp3nfpkx] { color: var(--lb-text-disabled); }

/* Tři v řadě: s obrázkem je dlaždice vyšší, takže dvousloupcová mřížka by na běžné
   šířce nechávala půl obrazovky prázdnou. Pod 720 px se láme na dva a pak na jeden. */
.dm-topics[b-5hvp3nfpkx] { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--lb-gap-4); margin-bottom: var(--lb-gap-8); }
@media (max-width: 720px) { .dm-topics[b-5hvp3nfpkx] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .dm-topics[b-5hvp3nfpkx] { grid-template-columns: 1fr; } }

.dm-kind-q[b-5hvp3nfpkx] { font-size: var(--lb-fs-xl); margin: 0 0 var(--lb-gap-4); color: var(--lb-text); }
.dm-kinds[b-5hvp3nfpkx] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .dm-kinds[b-5hvp3nfpkx] { grid-template-columns: 1fr; } }
/* Dlaždice druhu: malovaná ikona na zeleném podkladu modulu. Obrázek je objekt na
   průhledném pozadí, proto contain a menší než kolečko - ne cover jako u témat. */
.dm-kind-ico[b-5hvp3nfpkx] { display: grid; place-items: center; background: color-mix(in srgb, var(--lb-mod-oblasti) 18%, var(--lb-surface)); color: var(--lb-mod-oblasti-text); }
.dm-topic-ico.dm-kind-ico img[b-5hvp3nfpkx] { width: 68%; height: 68%; object-fit: contain; }
/* Kreslený tah se ukáže jen jako záloha za chybějící obrázek. */
.dm-kind-ico svg[b-5hvp3nfpkx] { display: none; }
.dm-kind-ico--noimg svg[b-5hvp3nfpkx] { display: block; width: 60%; height: 60%; }
/* Postup druhu na rozcestníku: velké číslo prošlých, menší celek, vpravo hotové díly. */
.dm-kind .dm-topic-txt[b-5hvp3nfpkx] { flex: 1 1 auto; }
.dm-kind-stat[b-5hvp3nfpkx] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lb-gap-3); margin-top: var(--lb-gap-3); flex-wrap: wrap; }
.dm-kind-num[b-5hvp3nfpkx] { font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); font-weight: 700; color: var(--lb-mod-oblasti-text); }
.dm-kind-of[b-5hvp3nfpkx] { font-family: var(--lb-font-body); font-size: var(--lb-fs-sm); font-weight: 500; color: var(--lb-text-secondary); }
.dm-kind-parts[b-5hvp3nfpkx] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.dm-kind .dm-bar[b-5hvp3nfpkx] { margin-top: var(--lb-gap-2); }
.dm-kind .dm-bar > span[b-5hvp3nfpkx] { background: var(--lb-mod-oblasti); }
/* Dvě vrstvy přes sebe: prošlé světle pod naučeným. */
.dm-bar2[b-5hvp3nfpkx] { position: relative; }
.dm-bar2 > span[b-5hvp3nfpkx] { position: absolute; left: 0; top: 0; bottom: 0; }
.dm-kind .dm-bar2 > .dm-bar-prosle[b-5hvp3nfpkx] { background: color-mix(in srgb, var(--lb-mod-oblasti) 35%, transparent); }
.dm-topic[b-5hvp3nfpkx] {
    display: flex; flex-direction: row; gap: var(--lb-gap-4); align-items: center;
    padding: var(--lb-gap-4) var(--lb-gap-5); text-align: left; cursor: pointer;
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
    background: var(--lb-surface); color: inherit; font: inherit;
    transition: border-color .12s, transform .12s;
}
.dm-topic:hover[b-5hvp3nfpkx] { border-color: var(--lb-accent); transform: translateY(-1px); }
.dm-topic-ico[b-5hvp3nfpkx] {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface));
}
.dm-topic-ico img[b-5hvp3nfpkx] { width: 100%; height: 100%; object-fit: cover; }
/* Bez obrázku ať kolečko nezůstane jako prázdná díra. */
.dm-topic-ico--noimg[b-5hvp3nfpkx] { background: color-mix(in srgb, var(--lb-accent) 30%, var(--lb-surface)); }
.dm-topic-txt[b-5hvp3nfpkx] { display: flex; flex-direction: column; gap: var(--lb-gap-0); min-width: 0; }
.dm-topic-title[b-5hvp3nfpkx] { font-weight: 600; }
.dm-topic .dm-meta[b-5hvp3nfpkx] { color: var(--lb-text-secondary); font-size: var(--lb-fs-base); }

/* Podrobný filtr je schovaný: rozbaluje se, takže záložky stavu nezapadnou mezi štítky. */
.lf.lf-more[b-5hvp3nfpkx] { color: var(--lb-text-secondary); }

/* Stav tématu: jemné podbarvení plochy + tečka v téže barvě. Tečka, ne text -
   dlaždice už nese tři čísla. Rozdělané oranžově, všechno hotové zeleně. */
.dm-topic[b-5hvp3nfpkx] { position: relative; }
.dm-dot[b-5hvp3nfpkx] {
    position: absolute; top: var(--lb-gap-3); right: var(--lb-gap-3);
    width: 9px; height: 9px; border-radius: 50%; background: var(--lb-accent);
}
.dm-topic.dm-rozdelano[b-5hvp3nfpkx] {
    background: color-mix(in srgb, var(--lb-accent) 6%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-accent) 30%, var(--lb-border));
}
.dm-topic.dm-hotovo[b-5hvp3nfpkx] {
    background: color-mix(in srgb, var(--lb-success) 7%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-success) 30%, var(--lb-border));
}
.dm-topic.dm-hotovo .dm-dot[b-5hvp3nfpkx] { background: var(--lb-success); }

/* ── Hlavicka oblasti: kroky vlevo, postup celou oblasti vpravo ──────────── */
.dm-head[b-5hvp3nfpkx] { display: flex; align-items: center; gap: var(--lb-gap-6); flex-wrap: wrap; }
/* Kroky si berou misto, kolecko drzi u prave hrany i po zalomeni (space-between plati per radek). */
.dm-head .breadcrumb[b-5hvp3nfpkx] { flex: 1 1 16rem; }
.dm-ring[b-5hvp3nfpkx] { position: relative; flex: 0 0 auto; margin-left: auto; width: 52px; height: 52px; }
.dm-ring svg[b-5hvp3nfpkx] { width: 52px; height: 52px; transform: rotate(-90deg); }
.dm-ring-bg[b-5hvp3nfpkx] { fill: none; stroke: color-mix(in srgb, var(--lb-mod-oblasti) 18%, transparent); stroke-width: 5; }
.dm-ring-fg[b-5hvp3nfpkx] { fill: none; stroke: var(--lb-mod-oblasti); stroke-width: 5; stroke-linecap: round; }
.dm-ring-txt[b-5hvp3nfpkx] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: var(--lb-fs-ring); font-weight: 700; letter-spacing: -.02em; color: var(--lb-ink);
    font-variant-numeric: tabular-nums;
}
/* Celek tise: cislo vlevo je to, co se meni. */
.dm-ring-total[b-5hvp3nfpkx] { color: var(--lb-text-muted); font-weight: 500; }
/* /Pages/PrehledLekci.razor.rz.scp.css */
/* Přehled lekcí. Přestěhováno z Vyuka.razor.css, když se stránka osamostatnila
   (revize aplikace 09/2026). Základní .lc-* pravidla jdou s ní - karta je přepisuje,
   ale font a barvy titulku bere odsud. */
.lc-thumb[b-1n6rcoo7tq] { width: 108px; align-self: stretch; flex: 0 0 auto; object-fit: contain; object-position: center; background: var(--lb-paper-warm); }
.lc-num[b-1n6rcoo7tq] { font-size: var(--lb-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); }
.lc-title[b-1n6rcoo7tq] { font-family: var(--lb-font-head); font-weight: 600; font-size: var(--lb-fs-xl); color: var(--lb-ink); margin-top: var(--lb-gap-0); }
.lc-sub[b-1n6rcoo7tq] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-0); }

/* ════════════ Přehled lekcí (nový picker) ════════════ */
.lekce[b-1n6rcoo7tq] { display: flex; flex-direction: column; gap: var(--lb-gap-7); }
.lekce-loading[b-1n6rcoo7tq] { color: var(--lb-text-muted); font-style: italic; }

.lekce-head[b-1n6rcoo7tq] { display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-6); flex-wrap: wrap; }
.lekce-title[b-1n6rcoo7tq] { font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); margin: 0; color: var(--lb-ink); }
.lekce-sub[b-1n6rcoo7tq] { color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }

/* Vpravo i po zalomeni hlavicky - viz .gram-score. */
.lekce-prog[b-1n6rcoo7tq] { margin-left: auto; display: flex; align-items: center; gap: var(--lb-gap-5); background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius); padding: var(--lb-gap-4) var(--lb-gap-6); box-shadow: var(--lb-shadow-xs); }
.lekce-prog-ico[b-1n6rcoo7tq] { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--lb-accent) 14%, transparent); color: var(--lb-accent); }
.lekce-prog-ico svg[b-1n6rcoo7tq] { width: 22px; height: 22px; }
.lekce-prog-txt[b-1n6rcoo7tq] { display: flex; flex-direction: column; }
.lekce-prog-txt strong[b-1n6rcoo7tq] { color: var(--lb-ink); font-size: var(--lb-fs-md); }
.lekce-prog-txt span[b-1n6rcoo7tq] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.lekce-prog-ring[b-1n6rcoo7tq] { position: relative; width: 48px; height: 48px; }
.lekce-prog-ring svg[b-1n6rcoo7tq] { width: 48px; height: 48px; transform: rotate(-90deg); }
.lpr-bg[b-1n6rcoo7tq] { fill: none; stroke: color-mix(in srgb, var(--lb-accent) 16%, transparent); stroke-width: 6; }
.lpr-fg[b-1n6rcoo7tq] { fill: none; stroke: var(--lb-accent); stroke-width: 6; stroke-linecap: round; }
.lekce-prog-pct[b-1n6rcoo7tq] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--lb-fs-2xs); font-weight: 700; letter-spacing: -.02em; color: var(--lb-ink); }

.lekce-filters[b-1n6rcoo7tq] { display: flex; gap: var(--lb-gap-3); flex-wrap: wrap; }
.lf[b-1n6rcoo7tq] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-2) var(--lb-gap-5); font-size: var(--lb-fs-base); font-weight: 600; color: var(--lb-text-secondary); cursor: pointer; transition: all .12s; }
.lf:hover[b-1n6rcoo7tq] { border-color: var(--lb-accent); }
.lf-on[b-1n6rcoo7tq] { background: color-mix(in srgb, var(--lb-accent) 12%, transparent); border-color: transparent; color: var(--lb-accent); }

.lekce-grid[b-1n6rcoo7tq] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lb-gap-6); }

.lcard[b-1n6rcoo7tq] { --st: var(--lb-accent); display: flex; align-items: center; gap: var(--lb-gap-6); text-align: left; width: 100%;
    text-decoration: none; color: inherit;
    background: color-mix(in srgb, var(--st) 4%, var(--lb-surface));
    border: 1px solid color-mix(in srgb, var(--st) 16%, var(--lb-border));
    border-radius: var(--lb-radius); padding: var(--lb-gap-5) var(--lb-gap-6); cursor: pointer;
    box-shadow: var(--lb-shadow-xs);
    transition: transform .12s, box-shadow .12s; }
.lcard-done:hover[b-1n6rcoo7tq], .lcard-avail:hover[b-1n6rcoo7tq] { transform: translateY(-2px); box-shadow: var(--lb-shadow-md); }
.lcard-done[b-1n6rcoo7tq] { --st: var(--lb-green-vivid); }
.lcard-avail[b-1n6rcoo7tq] { --st: var(--lb-accent); }
.lcard-locked[b-1n6rcoo7tq] { --st: var(--lb-text-muted); cursor: default; }
/* Karta je odkaz, takže musí mít vidět, že na ní stojí focus (ovládání klávesnicí). */
.lcard:focus-visible[b-1n6rcoo7tq] { outline: none; box-shadow: var(--lb-ring-accent), var(--lb-shadow-md); }
/* Zamčená = ztlumený, neaktivní obsah; aktivní zůstává jen odemykací tlačítko na konci. */
.lcard-locked .lc-thumb-wrap[b-1n6rcoo7tq], .lcard-locked .lc-main[b-1n6rcoo7tq] { opacity: .5; transition: opacity .12s; }
.lcard-unlocking .lc-thumb-wrap[b-1n6rcoo7tq], .lcard-unlocking .lc-main[b-1n6rcoo7tq] { opacity: 1; }

/* Aktivní odemykací tlačítko (oranžové) na konci zamčené karty */
.lc-unlock-trigger[b-1n6rcoo7tq] { width: 38px; height: 38px; flex: 0 0 auto; border: none; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lb-accent) 14%, transparent); color: var(--lb-accent); transition: background .12s; }
.lc-unlock-trigger:hover[b-1n6rcoo7tq] { background: color-mix(in srgb, var(--lb-accent) 26%, transparent); }
.lc-unlock-trigger svg[b-1n6rcoo7tq] { width: 18px; height: 18px; }

.lc-unlock[b-1n6rcoo7tq] { display: flex; gap: var(--lb-gap-2); flex-wrap: wrap; margin-top: var(--lb-gap-2); }
.lc-unlock-btn[b-1n6rcoo7tq] { font-size: var(--lb-fs-xs); font-weight: 600; border: none; border-radius: var(--lb-radius-xs); padding: var(--lb-gap-1) var(--lb-gap-4); cursor: pointer; background: var(--lb-accent); color: var(--lb-on-accent); }
.lc-unlock-btn.ghost[b-1n6rcoo7tq] { background: transparent; border: 1px solid var(--lb-border-strong); color: var(--lb-text-secondary); }
.lc-unlock-btn:hover[b-1n6rcoo7tq] { filter: brightness(1.05); }

.lc-thumb-wrap[b-1n6rcoo7tq] { position: relative; width: 76px; height: 76px; flex: 0 0 auto; border-radius: var(--lb-radius-sm); overflow: hidden;
    background: color-mix(in srgb, var(--st) 14%, transparent); display: flex; align-items: center; justify-content: center; }
.lc-lang-badge[b-1n6rcoo7tq] { position: absolute; bottom: 3px; left: 3px; background: rgba(0,0,0,.52); color: var(--lb-on-accent);
    font-size: var(--lb-fs-2xs); font-weight: 600; line-height: 1.3; padding: 1px 5px; border-radius: var(--lb-radius-2xs); pointer-events: none; white-space: nowrap; }
.lcard .lc-thumb[b-1n6rcoo7tq] { width: 100%; height: 100%; object-fit: cover; background: none; }
.lcard-locked .lc-thumb[b-1n6rcoo7tq] { filter: grayscale(0.6); }

.lc-main[b-1n6rcoo7tq] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-0); }
.lc-top[b-1n6rcoo7tq] { display: flex; align-items: center; gap: var(--lb-gap-3); }
.lcard .lc-num[b-1n6rcoo7tq] { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--st); color: var(--lb-on-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: 0; text-transform: none; margin: 0; }
.lcard .lc-title[b-1n6rcoo7tq] { font-family: var(--lb-font-head); font-weight: 600; font-size: var(--lb-fs-xl); color: var(--lb-ink); margin: 0; line-height: 1.15; }
.lcard .lc-sub[b-1n6rcoo7tq] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin: 0; }
.lc-status[b-1n6rcoo7tq] { display: inline-flex; align-items: center; gap: var(--lb-gap-1); margin-top: var(--lb-gap-1); font-size: var(--lb-fs-sm); font-weight: 600; color: var(--st); }
.lc-st-ico[b-1n6rcoo7tq] { width: 15px; height: 15px; }

.lc-arrow[b-1n6rcoo7tq] { flex: 0 0 auto; color: var(--st); display: inline-flex; align-items: center; }
.lc-arrow svg[b-1n6rcoo7tq] { width: 20px; height: 20px; }

@media (max-width: 720px) {
    .lekce-grid[b-1n6rcoo7tq] { grid-template-columns: 1fr; }
    .lekce-head[b-1n6rcoo7tq] { flex-direction: column; align-items: flex-start; }
}
/* /Pages/Progress.razor.rz.scp.css */
/* Progress.razor — minimalistický styling pro diagnostickou stránku. */

.subtitle[b-i43deizqtf] {
    color: var(--lb-text-secondary);
    margin-bottom: var(--lb-gap-9);
}

.progress-block[b-i43deizqtf] {
    margin-bottom: var(--lb-gap-9);
}

.progress-block h2[b-i43deizqtf] {
    font-size: var(--lb-fs-xl);
    color: var(--lb-text);
    border-bottom: 2px solid var(--lb-border);
    padding-bottom: var(--lb-gap-1);
    margin-bottom: var(--lb-gap-5);
}

.progress-table[b-i43deizqtf] {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
}

.progress-table th[b-i43deizqtf] {
    text-align: left;
    font-weight: 500;
    color: var(--lb-text-secondary);
    padding: var(--lb-gap-2) var(--lb-gap-4);
    border-bottom: 1px solid var(--lb-warm-tint-2);
    width: 65%;
}

.progress-table td[b-i43deizqtf] {
    text-align: right;
    padding: var(--lb-gap-2) var(--lb-gap-4);
    border-bottom: 1px solid var(--lb-warm-tint-2);
    font-variant-numeric: tabular-nums;
    color: var(--lb-text);
    font-weight: 600;
}

.ratio-note[b-i43deizqtf] {
    display: block;
    font-size: var(--lb-fs-sm);
    color: var(--lb-text-muted);
    font-weight: 400;
    margin-top: var(--lb-gap-0);
}

.hypothesis-note[b-i43deizqtf] {
    margin-top: var(--lb-gap-5);
    padding: var(--lb-gap-4) var(--lb-gap-5);
    background: var(--lb-hint-bg);
    border-left: 4px solid var(--lb-yellow);
    border-radius: var(--lb-radius-2xs);
    font-size: var(--lb-fs-md);
    color: var(--lb-hint-text);
}

.alert[b-i43deizqtf] {
    padding: var(--lb-gap-5) var(--lb-gap-6);
    border-radius: var(--lb-radius-xs);
    background: var(--lb-error-bg);
    color: var(--lb-error-text);
    margin-bottom: var(--lb-gap-6);
}

.refresh-button[b-i43deizqtf] {
    margin-top: var(--lb-gap-6);
}

/* /Pages/Ucebnice.razor.rz.scp.css */
.ucebnice[b-1rxtjxgj4u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--lb-gap-9);
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--lb-gap-6) var(--lb-gap-8) var(--lb-gap-11);
}

.loading[b-1rxtjxgj4u], .alert[b-1rxtjxgj4u] { padding: var(--lb-gap-6); }
.alert[b-1rxtjxgj4u] { color: var(--lb-error-text); }

.lesson-head[b-1rxtjxgj4u] { border-bottom: 1px solid var(--lb-border); padding-bottom: var(--lb-gap-6); margin-bottom: var(--lb-gap-3); }
.lesson-eyebrow[b-1rxtjxgj4u] { font-size: var(--lb-fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-text-muted); }
.lesson-head h1[b-1rxtjxgj4u] { margin: var(--lb-gap-1) 0 var(--lb-gap-2); font-size: var(--lb-fs-5xl); }
.situation[b-1rxtjxgj4u] { color: var(--lb-text-secondary); margin: var(--lb-gap-1) 0; }
.goal[b-1rxtjxgj4u] { color: var(--lb-text); margin: var(--lb-gap-1) 0; }
.hint[b-1rxtjxgj4u] { background: var(--lb-warm-tint); border: 1px solid var(--lb-warm-border); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-3) var(--lb-gap-5); font-size: var(--lb-fs-base); color: var(--lb-hint-text); margin-top: var(--lb-gap-5); }

section[b-1rxtjxgj4u] { margin-top: var(--lb-gap-8); }
section h2[b-1rxtjxgj4u] { font-size: var(--lb-fs-xl); margin: 0 0 var(--lb-gap-4); color: var(--lb-accent-strong); }

/* slovní zásoba */
.vocab-grid[b-1rxtjxgj4u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--lb-gap-3); }
.vocab-chip[b-1rxtjxgj4u] { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-2) var(--lb-gap-4); cursor: pointer; }
.vocab-chip:hover[b-1rxtjxgj4u] { border-color: var(--lb-accent-strong); }
.vc-de[b-1rxtjxgj4u] { font-weight: 600; }
.vc-cz[b-1rxtjxgj4u] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.func-words[b-1rxtjxgj4u] { margin-top: var(--lb-gap-4); display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: center; }
.fw-label[b-1rxtjxgj4u] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-right: var(--lb-gap-1); }
.fw-chip[b-1rxtjxgj4u] { background: var(--lb-warm-tint-2); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-0) var(--lb-gap-2); font-size: var(--lb-fs-base); cursor: pointer; }
.fw-chip:hover[b-1rxtjxgj4u] { border-color: var(--lb-accent-strong); }

/* gramatika */
.grammar-list[b-1rxtjxgj4u] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); }
.grammar-chip[b-1rxtjxgj4u] { background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg); padding: var(--lb-gap-2) var(--lb-gap-5); cursor: pointer; font-size: var(--lb-fs-md); }
.grammar-chip:hover[b-1rxtjxgj4u] { border-color: var(--lb-accent-strong); background: var(--lb-warm-tint); }

/* fráze */
.phrase[b-1rxtjxgj4u] { padding: var(--lb-gap-2) 0; border-bottom: 1px dashed var(--lb-border); }
.phrase .de[b-1rxtjxgj4u] { font-size: var(--lb-fs-lg); }
.phrase .cz[b-1rxtjxgj4u] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); }

/* dialog */
.setting[b-1rxtjxgj4u] { font-style: italic; color: var(--lb-text-secondary); font-size: var(--lb-fs-base); margin-bottom: var(--lb-gap-3); }
.dialog .turn[b-1rxtjxgj4u] { display: flex; gap: var(--lb-gap-4); padding: var(--lb-gap-1) 0; }
.turn .speaker[b-1rxtjxgj4u] { font-weight: 600; color: var(--lb-accent-strong); min-width: 3.5rem; }
.turn .line[b-1rxtjxgj4u] { line-height: 1.7; }

/* článek */
.article[b-1rxtjxgj4u] { white-space: pre-wrap; line-height: 2; font-size: var(--lb-fs-lg); }

/* otázky */
.questions li[b-1rxtjxgj4u] { margin-bottom: var(--lb-gap-4); }
.q-de[b-1rxtjxgj4u] { line-height: 1.7; }
.q-cz[b-1rxtjxgj4u] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.q-answer[b-1rxtjxgj4u] { font-size: var(--lb-fs-base); color: var(--lb-success); }

/* cvičení */
.exercise[b-1rxtjxgj4u] { padding: var(--lb-gap-2) 0; border-bottom: 1px dashed var(--lb-border); }
.ex-prompt[b-1rxtjxgj4u] { font-size: var(--lb-fs-lg); }
.ex-options[b-1rxtjxgj4u] { margin-top: var(--lb-gap-1); display: flex; gap: var(--lb-gap-2); }
.opt[b-1rxtjxgj4u] { border: 1px solid var(--lb-border); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-0) var(--lb-gap-3); font-size: var(--lb-fs-md); }
.opt-correct[b-1rxtjxgj4u] { border-color: var(--lb-success); color: var(--lb-success); background: var(--lb-success-bg); }
.ex-answer[b-1rxtjxgj4u] { font-size: var(--lb-fs-base); color: var(--lb-success); margin-top: var(--lb-gap-0); }

/* klikací slovo v textu */
[b-1rxtjxgj4u] button.w {
    background: none; border: none; padding: 0 1px; margin: 0; font: inherit;
    color: inherit; cursor: pointer; border-bottom: 1px dotted var(--lb-warm-border);
}
[b-1rxtjxgj4u] button.w:hover { color: var(--lb-accent-strong); border-bottom-color: var(--lb-accent-strong); background: var(--lb-warm-tint); }

/* boční panel */
.lookup[b-1rxtjxgj4u] { position: sticky; top: 1rem; }
.lk-card[b-1rxtjxgj4u] { background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-6); box-shadow: var(--lb-shadow-xs); }
.lk-empty[b-1rxtjxgj4u] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); padding: var(--lb-gap-6); border: 1px dashed var(--lb-border); border-radius: var(--lb-radius-sm); text-align: center; }
.lk-pos[b-1rxtjxgj4u] { font-size: var(--lb-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); }
.lk-de[b-1rxtjxgj4u] { font-size: var(--lb-fs-3xl); font-weight: 700; margin: var(--lb-gap-0) 0; }
.lk-cz[b-1rxtjxgj4u] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-3); }
.lk-conj[b-1rxtjxgj4u] { width: 100%; border-collapse: collapse; margin: var(--lb-gap-2) 0; font-size: var(--lb-fs-md); }
.lk-conj td[b-1rxtjxgj4u] { padding: var(--lb-gap-0) var(--lb-gap-2); border-bottom: 1px solid var(--lb-warm-border); }
.lk-conj td:first-child[b-1rxtjxgj4u] { color: var(--lb-text-muted); width: 3rem; }
.lk-row[b-1rxtjxgj4u] { font-size: var(--lb-fs-md); margin-top: var(--lb-gap-1); }
.lk-note[b-1rxtjxgj4u] { margin-top: var(--lb-gap-3); font-size: var(--lb-fs-base); color: var(--lb-text-secondary); background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-3); }
.lk-grammar[b-1rxtjxgj4u] { margin-top: var(--lb-gap-4); display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: center; }
.lk-gl-label[b-1rxtjxgj4u] { font-size: var(--lb-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); width: 100%; }
.lk-grammar .grammar-chip[b-1rxtjxgj4u] { font-size: var(--lb-fs-sm); padding: var(--lb-gap-1) var(--lb-gap-4); }
.lk-expl[b-1rxtjxgj4u] { font-size: var(--lb-fs-md); line-height: 1.5; white-space: pre-wrap; color: var(--lb-text); }
/* Klíčový výraz ve výkladu - stejná značka jako v gramatice i v tipu Boostera, jen
   barva sekce. `::deep`, protože značky staví sdílené Zvyrazneni přes RenderTreeBuilder. */
[b-1rxtjxgj4u] mark.gram-hl {
    background: none; padding: 0;
    color: var(--lb-purple); font-weight: 700;
    border-bottom: 2px solid color-mix(in srgb, var(--lb-purple) 55%, transparent);
}
.lk-examples[b-1rxtjxgj4u] { margin-top: var(--lb-gap-4); display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.lk-ex[b-1rxtjxgj4u] { background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-1) var(--lb-gap-3); font-size: var(--lb-fs-md); }

/* picker lekcí */
.ucebnice-picker[b-1rxtjxgj4u] { max-width: 760px; margin: 0 auto; padding: var(--lb-gap-6) var(--lb-gap-8) var(--lb-gap-11); }
.ucebnice-picker h1[b-1rxtjxgj4u] { font-size: var(--lb-fs-5xl); margin-bottom: var(--lb-gap-1); }
.picker-sub[b-1rxtjxgj4u] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-8); }
.ucebnice-picker .level h2[b-1rxtjxgj4u] { font-size: var(--lb-fs-xl); color: var(--lb-accent-strong); margin-bottom: var(--lb-gap-4); }
.lesson-cards[b-1rxtjxgj4u] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.lesson-card[b-1rxtjxgj4u] { text-align: left; background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-7); cursor: pointer; }
.lesson-card:hover[b-1rxtjxgj4u] { border-color: var(--lb-accent-strong); }
.lesson-card.done[b-1rxtjxgj4u] { background: var(--lb-warm-tint); border-color: var(--lb-warm-border); }
.lc-head[b-1rxtjxgj4u] { display: flex; justify-content: space-between; align-items: center; }
.lc-title[b-1rxtjxgj4u] { font-weight: 600; font-size: var(--lb-fs-lg); }
.lc-badge[b-1rxtjxgj4u] { background: var(--lb-success); color: var(--lb-on-accent); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-0) var(--lb-gap-3); font-size: var(--lb-fs-xs); }
.lc-meta[b-1rxtjxgj4u] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-1); }

/* dokončení lekce */
.lesson-finish[b-1rxtjxgj4u] { margin-top: var(--lb-gap-9); padding-top: var(--lb-gap-6); border-top: 1px solid var(--lb-border); display: flex; align-items: center; gap: var(--lb-gap-5); }
@media (max-width: 800px) {
    .ucebnice[b-1rxtjxgj4u] { grid-template-columns: 1fr; }
    .lookup[b-1rxtjxgj4u] { position: static; }
}
/* /Pages/Vyuka.razor.rz.scp.css */
.vyuka[b-4wtso8bdlt] { margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.alert[b-4wtso8bdlt] { color: var(--lb-error-text); }

/* „Učení přes jiný jazyk" — label + combo s vlaječkami */
.cross-row[b-4wtso8bdlt] { display: flex; align-items: center; justify-content: flex-end; gap: var(--lb-gap-3); margin: -1rem 0 var(--lb-gap-6); }
.cross-lbl[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.cross-picker[b-4wtso8bdlt] { position: relative; }
.cross-btn[b-4wtso8bdlt] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); padding: var(--lb-gap-1) var(--lb-gap-4) var(--lb-gap-1) var(--lb-gap-4); border-radius: var(--lb-radius-sm);
    border: 1px solid var(--lb-border-strong); background: var(--lb-surface); color: var(--lb-ink);
    font-family: inherit; font-size: var(--lb-fs-sm); font-weight: 600; cursor: pointer; transition: border-color .15s; }
.cross-btn:hover[b-4wtso8bdlt] { border-color: var(--lb-accent); }
.cross-btn.on[b-4wtso8bdlt] { border-color: var(--lb-accent); }
.cross-btn .cross-off[b-4wtso8bdlt] { color: var(--lb-text-muted); font-weight: 600; }
.cross-caret[b-4wtso8bdlt] { width: 15px; height: 15px; color: var(--lb-text-muted); }
.cross-menu[b-4wtso8bdlt] { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 100%;
    background: var(--lb-surface-elevated); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
    box-shadow: var(--lb-shadow-lg); padding: var(--lb-gap-1); display: flex; flex-direction: column; gap: 1px; }
.cross-opt[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-3); width: 100%; white-space: nowrap;
    background: none; border: none; text-align: left; padding: var(--lb-gap-2) var(--lb-gap-4); border-radius: var(--lb-radius-xs);
    font-family: inherit; font-size: var(--lb-fs-base); color: var(--lb-ink); cursor: pointer; }
.cross-opt:hover[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-opt.on[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 12%, transparent); color: var(--lb-accent); font-weight: 700; }
/* vlajka v tlačítku i menu */
.cross-btn[b-4wtso8bdlt]  .lb-flag, .cross-opt[b-4wtso8bdlt]  .lb-flag { width: 20px; height: 14px; border-radius: var(--lb-radius-2xs); overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.cross-btn[b-4wtso8bdlt]  .lb-flag svg, .cross-opt[b-4wtso8bdlt]  .lb-flag svg { width: 100%; height: 100%; display: block; }

/* plná imerze — přepínač na konci menu */
.cross-sep[b-4wtso8bdlt] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.cross-full[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-4); width: 100%; background: none; border: none;
    text-align: left; padding: var(--lb-gap-2) var(--lb-gap-4); border-radius: var(--lb-radius-xs); font-family: inherit; cursor: pointer; }
.cross-full:hover[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-full-txt[b-4wtso8bdlt] { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--lb-fs-base); color: var(--lb-ink); white-space: nowrap; }
.cross-full-txt small[b-4wtso8bdlt] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 400; }
.cross-full.on .cross-full-txt[b-4wtso8bdlt] { color: var(--lb-accent); font-weight: 700; }
.cross-toggle[b-4wtso8bdlt] { flex: 0 0 auto; width: 34px; height: 20px; border-radius: var(--lb-radius-pill); background: var(--lb-border-strong); position: relative; transition: background .15s; }
.cross-toggle.on[b-4wtso8bdlt] { background: var(--lb-accent); }
.cross-knob[b-4wtso8bdlt] { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--lb-on-accent); box-shadow: var(--lb-shadow-xs); transition: transform .15s; }
.cross-toggle.on .cross-knob[b-4wtso8bdlt] { transform: translateX(14px); }

/* Etapová lišta (.breadcrumb) je v app.css - sdílí ji lekce, oblast i gramatika. */

.phase h2[b-4wtso8bdlt] { font-size: var(--lb-fs-xl); color: var(--lb-accent-strong); margin: 0 0 var(--lb-gap-4); }
.ph-intro[b-4wtso8bdlt], .ph-intro[b-4wtso8bdlt] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); margin-bottom: var(--lb-gap-5); }

/* vocab card */
.card[b-4wtso8bdlt] { background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-8); text-align: center; }
.card-de[b-4wtso8bdlt] { font-size: var(--lb-fs-5xl); font-weight: 700; }
.card-cz[b-4wtso8bdlt] { color: var(--lb-text-secondary); margin: var(--lb-gap-1) 0 var(--lb-gap-4); }
.conj[b-4wtso8bdlt] { margin: var(--lb-gap-3) auto; border-collapse: collapse; font-size: var(--lb-fs-md); }
.conj td[b-4wtso8bdlt] { padding: var(--lb-gap-0) var(--lb-gap-4); border-bottom: 1px solid var(--lb-warm-border); }
.conj td:first-child[b-4wtso8bdlt] { color: var(--lb-text-muted); }
.forms[b-4wtso8bdlt] { font-size: var(--lb-fs-md); color: var(--lb-text-secondary); }
.note[b-4wtso8bdlt] { margin-top: var(--lb-gap-4); font-size: var(--lb-fs-base); color: var(--lb-text-secondary); background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-3); text-align: left; }
.ghints[b-4wtso8bdlt] { margin-top: var(--lb-gap-3); display: flex; gap: var(--lb-gap-1); justify-content: center; flex-wrap: wrap; }
.ghint[b-4wtso8bdlt] { font-size: var(--lb-fs-xs); background: var(--lb-warm-tint-2); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-0) var(--lb-gap-3); color: var(--lb-hint-text); }
.rate-row[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-4); justify-content: center; margin: var(--lb-gap-5) 0; }
.rate[b-4wtso8bdlt] { border: 1px solid var(--lb-border-strong); background: var(--lb-surface); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-2) var(--lb-gap-5); cursor: pointer; }
.rate.know[b-4wtso8bdlt] { color: var(--lb-success); border-color: var(--lb-success-border); }
.rate.hard[b-4wtso8bdlt] { color: var(--lb-accent-strong); border-color: var(--lb-accent-border); }

.card-nav[b-4wtso8bdlt] { display: flex; align-items: center; justify-content: space-between; margin-top: var(--lb-gap-6); }
.counter[b-4wtso8bdlt] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }
.skip[b-4wtso8bdlt] {
    display: block;
    margin: var(--lb-gap-6) auto 0;
}
.skip:hover[b-4wtso8bdlt] { color: var(--lb-accent-strong); text-decoration: underline; }
.skip.inline[b-4wtso8bdlt] { display: inline-flex; margin: 0; }

/* kvíz k článku (gramatická cvičení běží ve vložené OpakovaniBatch, vlastní styly nemají) */
.q-prompt[b-4wtso8bdlt] { font-size: var(--lb-fs-xl); margin-bottom: var(--lb-gap-4); }
.q-options[b-4wtso8bdlt] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); }
.opt[b-4wtso8bdlt] { border: 1px solid var(--lb-border-strong); background: var(--lb-surface); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-2) var(--lb-gap-5); cursor: pointer; }
.opt:hover:not(:disabled)[b-4wtso8bdlt] { border-color: var(--lb-accent-strong); }
.opt.correct[b-4wtso8bdlt] { border-color: var(--lb-success); background: var(--lb-success-bg); color: var(--lb-success); font-weight: 600; }
.opt.wrong[b-4wtso8bdlt] { border-color: var(--lb-error-text); background: var(--lb-error-bg); color: var(--lb-error-text); }
.opt.dim[b-4wtso8bdlt] { opacity: .5; }

/* reading — „papírová" čtecí plocha */
.article[b-4wtso8bdlt] {
    white-space: pre-wrap;
    font-family: var(--lb-font-read);
    font-size: var(--lb-fs-lg);
    line-height: 1.9;
    color: var(--lb-ink-read);
    background: linear-gradient(180deg, var(--lb-read-paper) 0%, var(--lb-read-paper-2) 100%);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    padding: var(--lb-gap-8) var(--lb-gap-8);
    box-shadow: var(--lb-shadow-sm);
}
/* dialog — repliky s mluvčími (jméno nad replikou) */
.dialog[b-4wtso8bdlt] {
    background: linear-gradient(180deg, var(--lb-read-paper) 0%, var(--lb-read-paper-2) 100%);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    padding: var(--lb-gap-8) var(--lb-gap-8);
    box-shadow: var(--lb-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--lb-gap-6);
}
/* Replika nese barvu mluvciho (jmeno + jemne podbarveni), aby slo poznat, kdo co
   rika, a aby repliky nesplyvaly v jeden blok. Pruh vlevo tu byl misto podbarveni;
   dohromady to bylo o inkoust navic, takze zustava jen plocha.
   Barva se ridi POSTAVOU, ne poradim - viz --lb-speaker-* v palete. */
.dialog .turn[b-4wtso8bdlt] {
    display: flex; flex-direction: column; gap: var(--lb-gap-0);
    padding: var(--lb-gap-4) var(--lb-gap-5);
    border-radius: var(--lb-radius-sm);
    background: color-mix(in srgb, var(--sp, var(--lb-speaker-anna)) var(--lb-speaker-tint), transparent);
}
/* Prave ctena replika: tatáz barva mluvciho, jen vyrazneji - aby oko vedelo, kde
   appka je, ale nesahalo to na cteci klid. Bez `transition`: nad hodnotou
   `color-mix()` zustaval prechod zaseknuty na vychozim stavu, takze se podbarveni
   neprepnulo vubec (zmereno v prohlizeci). Zvyrazneni je stav, ne animace. */
.dialog .turn.is-reading[b-4wtso8bdlt] {
    background: color-mix(in srgb, var(--sp, var(--lb-speaker-anna)) var(--lb-speaker-tint-strong), transparent);
}
/* Lupa karaoke pod barvu mluvciho: replika ma podklad v jeho barve, takze oranzova
   lupa nad modrou Tomovou replikou pusobila jako cizi teleso. Promenna se dedi do
   ramecku, ktery uvnitr vyrobi js/tts.js. */
.dialog .turn .line[b-4wtso8bdlt] { --lb-lupa-barva: var(--sp, var(--lb-speaker-anna)); }
.dialog .turn.sp-anna[b-4wtso8bdlt] { --sp: var(--lb-speaker-anna); }
.dialog .turn.sp-tom[b-4wtso8bdlt] { --sp: var(--lb-speaker-tom); }
.dialog .turn.sp-side[b-4wtso8bdlt] { --sp: var(--lb-speaker-side); }
.dialog .speaker[b-4wtso8bdlt] {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sp, var(--lb-speaker-anna));
}
.dialog .line-row[b-4wtso8bdlt] { display: flex; align-items: flex-start; gap: var(--lb-gap-3); }
.dialog .line[b-4wtso8bdlt] {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--lb-font-read);
    font-size: var(--lb-fs-lg); line-height: 1.75; color: var(--lb-ink-read);
}
/* Přehrání jedné repliky — tichý kruh, zvýrazní se při najetí */
.dialog .turn-speak[b-4wtso8bdlt] {
    flex: 0 0 auto; margin-top: var(--lb-gap-1);
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lb-accent) 10%, transparent);
    color: var(--lb-accent); opacity: .55; transition: opacity .12s, background .12s;
}
.dialog .turn:hover .turn-speak[b-4wtso8bdlt] { opacity: 1; }
.dialog .turn-speak:hover[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 22%, transparent); }
.dialog .turn-speak svg[b-4wtso8bdlt] { width: 16px; height: 16px; }
/* Inline překlad repliky — menší, tlumená barva, jasně oddělený od cílového textu */
/* Vypraveci clanek: odstavce misto jednoho bloku, at pod kazdym muze stat jeho preklad. */
.article.article-pars[b-4wtso8bdlt] { white-space: normal; display: flex; flex-direction: column; gap: var(--lb-gap-6); }
/* Odstavec ma vlastni plochu, aby se dal podbarvit pri cteni. Zaporny bocni okraj
   vraci text na puvodni linku - bez nej by se pri zapnutem zvyrazneni cely clanek
   posunul dovnitr. */
.article-pars .par[b-4wtso8bdlt] {
    display: flex; flex-direction: column; gap: var(--lb-gap-0);
    padding: var(--lb-gap-3) var(--lb-gap-4);
    margin-inline: calc(-1 * var(--lb-gap-4));
    border-radius: var(--lb-radius-sm);
}
/* Prave cteny odstavec - protejsek `.turn.is-reading` u dialogu. Proza nema v datech
   mluvciho (model Article nenese `voice`), takze se nepodbarvuje barvou postavy, ale
   tichou teplou plochou. Bez `transition`: zvyrazneni je stav, ne animace. */
.article-pars .par.is-reading[b-4wtso8bdlt] { background: var(--lb-warm-tint-2); }
.article-pars .par-text[b-4wtso8bdlt] { white-space: pre-wrap; }
.article-pars .turn-trans[b-4wtso8bdlt],
.dialog .turn-trans[b-4wtso8bdlt] {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--lb-fs-md); line-height: 1.5; color: var(--lb-text-muted); margin-top: var(--lb-gap-0);
    padding-left: var(--lb-gap-4); border-left: 2px solid var(--lb-warm-border);
}
/* Preklad uz sedi na podbarvene plose repliky, pruh vlevo by ji jen ohranicil. */
.dialog .turn-trans[b-4wtso8bdlt] { padding-left: 0; border-left: none; font-style: italic; }
.article-pars .turn-trans.native[b-4wtso8bdlt],
.dialog .turn-trans.native[b-4wtso8bdlt] { color: var(--lb-text-muted); font-style: italic; }
.rd-trans-row[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-3); align-items: center; flex-wrap: wrap; }
.rd-trans-label[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text-muted); margin-right: var(--lb-gap-0); }
.trans-toggle.on[b-4wtso8bdlt] { font-weight: 600; }
/* Vlaječkový přepínač překladu — off = tichý obrys, on = oranžově zvýrazněný */
.flag-chip[b-4wtso8bdlt] {
    display: inline-flex; align-items: center; gap: var(--lb-gap-2); cursor: pointer;
    border: 1px solid var(--lb-border-strong); background: var(--lb-surface);
    border-radius: var(--lb-radius-pill); padding: var(--lb-gap-1) var(--lb-gap-5) var(--lb-gap-1) var(--lb-gap-3); font-family: inherit;
    font-size: var(--lb-fs-base); font-weight: 600; color: var(--lb-text-secondary); transition: all .12s;
}
.flag-chip:hover[b-4wtso8bdlt] { border-color: var(--lb-accent); color: var(--lb-accent); }
.flag-chip .flag-emoji[b-4wtso8bdlt] { font-size: var(--lb-fs-lg); line-height: 1; filter: grayscale(.35); transition: filter .12s; }
.flag-chip.on[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface)); border-color: var(--lb-accent); color: var(--lb-accent); }
.flag-chip.on .flag-emoji[b-4wtso8bdlt] { filter: none; }

[b-4wtso8bdlt] button.w { background: none; border: none; padding: 0 2px; font: inherit; color: inherit; cursor: pointer; border-radius: var(--lb-radius-2xs); transition: background .1s; }
[b-4wtso8bdlt] button.w:hover { color: var(--lb-accent-strong); background: var(--lb-accent-tint); }
/* Slovo + interpunkce za nim drzi pohromade - zlom patri do mezery, ne za tlacitko. */
[b-4wtso8bdlt] span.nb { white-space: nowrap; }
/* Překlad slova pevně nad spodní lištou, ve sloupci čtení. Dřív ležel pod článkem
   a u textu nahoře nebyl vidět. Vrstva pod lištou i menu (botnav 20, menu 29/30). */
.wordpop[b-4wtso8bdlt] {
    position: fixed; z-index: 19;
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--lb-botnav-h) + var(--lb-gap-3) + env(safe-area-inset-bottom, 0px));
    width: min(44rem, calc(100% - 2 * var(--lb-gap-4)));
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-4) var(--lb-gap-9) var(--lb-gap-4) var(--lb-gap-6); box-shadow: var(--lb-shadow-lg);
}
.wordpop .wp-close[b-4wtso8bdlt] {
    position: absolute; top: var(--lb-gap-2); right: var(--lb-gap-2);
    width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--lb-radius-pill); cursor: pointer; color: var(--lb-text-muted);
}
.wordpop .wp-close:hover[b-4wtso8bdlt] { background: var(--lb-accent-tint); color: var(--lb-accent-strong); }
.wordpop .wp-close svg[b-4wtso8bdlt] { width: 1.1rem; height: 1.1rem; }
.wordpop .wp-head[b-4wtso8bdlt] { font-size: var(--lb-fs-xl); }
.wordpop .wp-head strong[b-4wtso8bdlt] { color: var(--lb-ink-read); }
.wordpop .wp-native[b-4wtso8bdlt] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }
.wordpop .wp-native[b-4wtso8bdlt]::before { content: "= "; opacity: .5; }
.wordpop .wp-from[b-4wtso8bdlt] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }
.wordpop .wp-gram[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); color: var(--lb-hint-text); margin-top: var(--lb-gap-2); }

/* comprehension — otázky pod sebou, odpovědi na výšku (vejdou se delší) */
.comp-block[b-4wtso8bdlt] { margin-bottom: var(--lb-gap-5); }
.comp-block .cq-de[b-4wtso8bdlt] { font-size: var(--lb-fs-md); margin-bottom: var(--lb-gap-2); color: var(--lb-ink-read); }
/* Odpovedi VEDLE SEBE: "ano/ne" zabiralo dva radky na celou sirku obrazovky. Dlouha
   odpoved si vlastni radek vezme sama (flex-wrap), takze stackovat nastvrdo netreba. */
.comp-block .q-options[b-4wtso8bdlt] { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--lb-gap-2); }
.comp-block .opt[b-4wtso8bdlt] { text-align: left; padding: var(--lb-gap-2) var(--lb-gap-5); border-radius: var(--lb-radius-xs); font-size: var(--lb-fs-md); }

/* grammar */
.gram-item[b-4wtso8bdlt] { border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-6); margin-bottom: var(--lb-gap-4); background: var(--lb-surface); }
.gi-head[b-4wtso8bdlt] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-4); }
.gi-title[b-4wtso8bdlt] { font-weight: 600; }
.gi-actions[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-2); align-items: center; }
.gi-done[b-4wtso8bdlt] { color: var(--lb-success); font-weight: 700; }
.mini[b-4wtso8bdlt] { border: 1px solid var(--lb-border-strong); background: var(--lb-surface); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-1) var(--lb-gap-4); cursor: pointer; font-size: var(--lb-fs-base); }
.mini.primary[b-4wtso8bdlt] { background: var(--lb-accent-strong); color: var(--lb-on-accent); border-color: var(--lb-accent-strong); }
.gi-expl[b-4wtso8bdlt] { white-space: pre-wrap; line-height: 1.5; color: var(--lb-text); margin: var(--lb-gap-4) 0; font-size: var(--lb-fs-md); }

/* čtení — hlavička s přečtením + překlad */
.reading-head[b-4wtso8bdlt] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-6); margin-bottom: var(--lb-gap-6); }
.reading-head h2[b-4wtso8bdlt] { margin: 0; font-family: var(--lb-font-read); font-size: var(--lb-fs-3xl); color: var(--lb-accent-strong); }
.phase .trans-toggle[b-4wtso8bdlt] { margin-top: var(--lb-gap-7); }
.phase .wordpop[b-4wtso8bdlt] { margin-top: var(--lb-gap-7); }
.speak-article[b-4wtso8bdlt] { background: var(--lb-accent-strong); color: var(--lb-on-accent); border: 1px solid var(--lb-accent-strong); border-radius: var(--lb-radius-lg); padding: var(--lb-gap-2) var(--lb-gap-6); cursor: pointer; font-size: var(--lb-fs-base); white-space: nowrap; }
.speak-article:hover[b-4wtso8bdlt] { background: var(--lb-accent-deep); border-color: var(--lb-accent-deep); }
.trans-toggle[b-4wtso8bdlt] { background: none; border: none; color: var(--lb-accent-strong); cursor: pointer; padding: var(--lb-gap-1) 0; font-size: var(--lb-fs-md); margin-top: var(--lb-gap-4); }
.trans-toggle:hover[b-4wtso8bdlt] { text-decoration: underline; }
.translation[b-4wtso8bdlt] { white-space: pre-wrap; line-height: 1.8; color: var(--lb-text-secondary); background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-4) var(--lb-gap-6); margin-top: var(--lb-gap-1); }

/* gramatika — karta jevu */
/* Gramaticka karta je fialova stopa - sdilena tlacitka uvnitr z ni berou barvu
   (--g drzelo jen nadpis, --lb-section ridi .lb-btn). */
.gram-card[b-4wtso8bdlt] { --lb-section: var(--lb-purple); --lb-section-gradient: linear-gradient(135deg, var(--lb-purple), var(--lb-purple-deep)); background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-7); margin-bottom: var(--lb-gap-6); }
.gc-title[b-4wtso8bdlt] { font-size: var(--lb-fs-2xl); font-weight: 700; color: var(--lb-text); margin-bottom: var(--lb-gap-3); }
.gc-expl[b-4wtso8bdlt] { white-space: pre-wrap; line-height: 1.55; color: var(--lb-text); }
.gc-examples[b-4wtso8bdlt] { margin-top: var(--lb-gap-5); display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.gc-ex[b-4wtso8bdlt] { background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-1) var(--lb-gap-4); }
.rating-row3[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-4); justify-content: center; margin: var(--lb-gap-2) 0; }
.rating-row3 .rating-btn[b-4wtso8bdlt] { padding: var(--lb-gap-3) var(--lb-gap-7); border-radius: var(--lb-radius-lg); font-size: var(--lb-fs-md); font-weight: 600; cursor: pointer; }
.rating-row3 .rating-know[b-4wtso8bdlt] { border: 1px solid var(--lb-success-border); background: var(--lb-success-bg); color: var(--lb-success-text); }
.rating-row3 .rating-practice[b-4wtso8bdlt] { border: 1px solid var(--lb-accent-strong); background: var(--lb-accent-strong); color: var(--lb-on-accent); }
.counter.center[b-4wtso8bdlt] { text-align: center; display: block; }

.finish[b-4wtso8bdlt] { text-align: center; padding-top: var(--lb-gap-8); }
.finish .card-nav[b-4wtso8bdlt] { justify-content: center; gap: var(--lb-gap-5); margin-top: var(--lb-gap-7); }

/* Opakování na konci lekce: jeden tichý řádek, pod ním tlačítka pod sebou. */
.fin-again[b-4wtso8bdlt] { max-width: 420px; margin: var(--lb-gap-7) auto 0; text-align: left; }
.fin-again .fa-toggle[b-4wtso8bdlt] {
    display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-3);
    width: 100%; padding: var(--lb-gap-3) var(--lb-gap-5);
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm);
    background: var(--lb-surface); color: var(--lb-text-secondary);
    font-size: var(--lb-fs-md); cursor: pointer;
}
.fin-again .fa-toggle:hover[b-4wtso8bdlt] { border-color: var(--lb-border-strong); color: var(--lb-text); }
.fin-again .fa-label[b-4wtso8bdlt] { display: inline; }
.fin-again .fa-pre[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.fin-again .fa-label strong[b-4wtso8bdlt] { font-weight: 700; color: var(--lb-text); }
.fin-again .fa-chevron[b-4wtso8bdlt] { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .2s ease; }
.fin-again .fa-chevron.is-open[b-4wtso8bdlt] { transform: rotate(180deg); }
.fin-again .fa-items[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-3); margin-top: var(--lb-gap-3); }
.fin-again .fa-items .btn[b-4wtso8bdlt] { width: 100%; }

/* cíl lekce / outcomes */
.lesson-goal[b-4wtso8bdlt] { background: var(--lb-warm-tint); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-5) var(--lb-gap-7); margin-bottom: var(--lb-gap-7); }
.lesson-goal .lg-label[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-2); }
.lesson-goal ul[b-4wtso8bdlt] { margin: 0; padding-left: var(--lb-gap-7); color: var(--lb-text-secondary); }
.lesson-goal li[b-4wtso8bdlt] { margin: var(--lb-gap-0) 0; }

/* Fáze je vztažný bod pro absolutně umístěné prvky uvnitř (např. odznak nad kartou). */
.phase[b-4wtso8bdlt] { position: relative; }

/* reading hero banner (nízký kino-pruh) */
.lesson-hero-wrap[b-4wtso8bdlt] { position: relative; margin-bottom: var(--lb-gap-7); border-radius: var(--lb-radius); overflow: hidden; box-shadow: var(--lb-shadow); }
.lesson-hero[b-4wtso8bdlt] { display: block; width: 100%; height: 210px; object-fit: cover; object-position: center 12%; }


@media (max-width: 640px) {
    .lesson-hero[b-4wtso8bdlt] { height: 150px; }
}

/* ════════════ Gramatika (browse) — fialové téma dle mockupu ════════════ */
.gram-head[b-4wtso8bdlt] { --g: var(--lb-purple); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lb-gap-6); flex-wrap: wrap; margin-bottom: var(--lb-gap-7); }
.gram-eyebrow[b-4wtso8bdlt] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-purple); }
.gram-title-row[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-1); }
.gram-ico[b-4wtso8bdlt] { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--lb-radius-sm); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--lb-purple) 14%, transparent); color: var(--lb-purple); }
.gram-ico svg[b-4wtso8bdlt] { width: 24px; height: 24px; }
.gram-head .gram-title[b-4wtso8bdlt] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); margin: 0; color: var(--lb-ink); }

/* Progres drzi VPRAVO i kdyz se zabali na novy radek. `justify-content: space-between`
   sam nestaci: u dlouheho nadpisu („Co delam rad (like + -ing, prefer)") se skore
   zabalilo na dalsi radek a prilepilo se doleva, takze jednou bylo vpravo a jednou
   vlevo. `margin-left: auto` ho drzi u prave hrany v obou pripadech. */
.gram-score[b-4wtso8bdlt] { margin-left: auto; display: flex; align-items: center; gap: var(--lb-gap-5); background: color-mix(in srgb, var(--lb-purple) 5%, var(--lb-surface)); border: 1px solid color-mix(in srgb, var(--lb-purple) 18%, transparent); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-5); box-shadow: var(--lb-shadow-xs); }
.gram-score-txt[b-4wtso8bdlt] { text-align: right; display: flex; flex-direction: column; }
.gram-score-txt strong[b-4wtso8bdlt] { font-size: var(--lb-fs-xl); color: var(--lb-purple); }
.gram-score-txt span[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.gram-ring[b-4wtso8bdlt] { position: relative; width: 44px; height: 44px; }
.gram-ring svg[b-4wtso8bdlt] { width: 44px; height: 44px; transform: rotate(-90deg); }
.gr-bg[b-4wtso8bdlt] { fill: none; stroke: color-mix(in srgb, var(--lb-purple) 16%, transparent); stroke-width: 5; }
.gr-fg[b-4wtso8bdlt] { fill: none; stroke: var(--lb-purple); stroke-width: 5; stroke-linecap: round; }
.gram-ring-pct[b-4wtso8bdlt] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--lb-fs-ring); font-weight: 700; letter-spacing: -.02em; color: var(--lb-ink); }


/* Akce — vlevo volby k jevu, vpravo pokračování. Na úzké obrazovce se skupiny zalomí pod sebe
   (a pak se každá roztáhne na plnou šířku, ať se dobře klikají). */
.gram-actions[b-4wtso8bdlt] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-4); justify-content: space-between; margin-bottom: var(--lb-gap-3); }
.gram-actions-l[b-4wtso8bdlt], .gram-actions-r[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-4); flex-wrap: wrap; }
.gram-actions-r[b-4wtso8bdlt] { margin-left: auto; }
/* Gramaticka stopa ma tlacitka do pilulky - tvar je mistni, zbytek ze sdilene
   .lb-btn (fialovou nese --lb-section teto sekce). */
.gram-btn[b-4wtso8bdlt] { border-radius: var(--lb-radius-pill); }
/* „Znám" u pravidla je sdílený přepínač .lb-btn-mark.is-know (app.css), jako u slovíčka. */
.gram-practice[b-4wtso8bdlt] { border: 1px solid color-mix(in srgb, var(--lb-purple) 50%, transparent); background: transparent; color: var(--lb-purple); }
.gram-practice:hover[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-purple) 10%, transparent); }
/* Když má karta cvičení, „Pokračovat" je sekundární (procvičit je hlavní akce) */
.gram-actions-l ~ .gram-actions-r .gram-cont[b-4wtso8bdlt] { background: transparent; border-color: var(--lb-border-strong); color: var(--lb-text-secondary); }
.gram-actions-l ~ .gram-actions-r .gram-cont:hover[b-4wtso8bdlt] { border-color: var(--lb-purple); color: var(--lb-purple); filter: none; }
/* Navigace pod tlačítky — jen odkazy: vlevo předchozí jev, vpravo přeskočení celé gramatiky. */
.gram-nav[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-5); margin-bottom: var(--lb-gap-5); }
.gram-link[b-4wtso8bdlt] { padding: var(--lb-gap-2) 0; }
.gram-link:hover[b-4wtso8bdlt] { color: var(--lb-purple); text-decoration: underline; }
.gram-link-r[b-4wtso8bdlt] { margin-left: auto; color: var(--lb-text-muted); }
.gram-link-r:hover[b-4wtso8bdlt] { color: var(--lb-accent-strong); }
@media (max-width: 560px) {
    /* Úzká obrazovka: pilulky se stáhnou po stranách, aby se všechny tři akce vešly
       na jeden řádek (na 375 px chybělo 27 px a „Pokračovat" padalo dolů, kde vedle
       něj zbylo prázdné místo). Když se nevejdou ani tak (do ~350 px), zalomí se
       samy a `margin-left: auto` drží pokračování u pravé hrany i na druhém řádku. */
    .gram-btn[b-4wtso8bdlt] { padding: var(--lb-gap-4) var(--lb-gap-5); }
    .gram-nav[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); }
}

/* ════════════ Čtení (reading) — dle mockupu ════════════ */
.reading2[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-7); }

/* Banner s overlay titulkem + reprákem */
/* Banner + tělo = jedna kompaktní karta */
/* Cela karta je cteci papir, ne plocha rozhrani: dialog i clanek uvnitr ji jen
   vyplnuji (viz .rd-card .dialog niz). Driv drzela --lb-surface a papir mel jen
   clanek - v tmavem tematu by tak dialog lezel na neutralni plose rozhrani a
   clanek na teplem papiru, tedy dve ruzne plochy v jedne karte. */
.rd-card[b-4wtso8bdlt] { position: relative; background: linear-gradient(180deg, var(--lb-read-paper) 0%, var(--lb-read-paper-2) 100%); border: 1px solid var(--lb-border); border-radius: var(--lb-radius); box-shadow: var(--lb-shadow-md); }
.rd-hero[b-4wtso8bdlt] { position: relative; border-radius: var(--lb-radius) var(--lb-radius) 0 0; overflow: hidden; }
.rd-hero.rd-hero--noimg[b-4wtso8bdlt] { display: none; }
.rd-hero-img[b-4wtso8bdlt] { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 78% 18%; }
.rd-hero[b-4wtso8bdlt]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); pointer-events: none; }
/* Obálka knihy (intro L000): celá malba v poměru 2:1, žádný ořez na pás.
   Titul knihy vykresluje appka přes obrázek - do malby se nevypaluje, protože
   tutéž obálku čte student v každém domácím jazyce. */
.rd-hero--cover .rd-hero-img[b-4wtso8bdlt] { height: auto; aspect-ratio: 2 / 1; object-fit: contain; object-position: center; background: var(--lb-surface); }
.rd-hero--cover[b-4wtso8bdlt]::after { height: 38%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); }
.rd-hero-title--cover[b-4wtso8bdlt] { font-size: clamp(1.9rem, 4.2vw, 3rem); letter-spacing: .01em; left: 1.8rem; bottom: 1.4rem; text-shadow: 0 2px 14px rgba(0,0,0,.55); }

.rd-hero-title[b-4wtso8bdlt] { position: absolute; left: 1.4rem; bottom: 1.1rem; z-index: 2; font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); font-weight: 700; color: var(--lb-on-accent); text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* Tělo: dialog vlevo, Tip Boostera vpravo */
/* Překlad nad článkem, zarovnaný doprava pod obrázek (stejný horizontální padding jako tělo) */
/* Cteni vlevo, preklad vpravo. Drive byla lista jen na preklad a zarovnavala se
   doprava; ted nese i „Precist cele", takze se krajni prvky rozestoupi. */
.rd-transbar[b-4wtso8bdlt] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); align-items: center; justify-content: space-between; padding: var(--lb-gap-5) var(--lb-gap-8) 0; }
.rd-transbar > .rd-trans-label[b-4wtso8bdlt] { margin-left: auto; }
.rd-trans-flags[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-3); margin-left: auto; flex-wrap: nowrap; }
/* Na úzkém displeji jen vlajka - dva celé názvy jazyků se vedle tlačítka čtení nevešly
   a druhá vlaječka spadla pod první (autor 25.09.2026). */
@media (max-width: 600px) {
    .rd-trans-flags .flag-name[b-4wtso8bdlt] { display: none; }
}
.rd-transbar-prose[b-4wtso8bdlt] { flex-direction: column; align-items: flex-start; }
.rd-transbar-prose > .trans-toggle[b-4wtso8bdlt], .rd-transbar-prose > .translation[b-4wtso8bdlt] { align-self: stretch; }
.rd-transbar-prose .translation[b-4wtso8bdlt] { width: 100%; }
.rd-body[b-4wtso8bdlt] { display: flex; gap: var(--lb-gap-8); align-items: flex-start; padding: var(--lb-gap-8) var(--lb-gap-8) var(--lb-gap-8); }
/* dialog i clanek uvnitr karty = bez vlastniho ramecku/pozadi (papir nese karta) */
.rd-card .dialog[b-4wtso8bdlt],
.rd-card .article[b-4wtso8bdlt] { background: none; border: none; box-shadow: none; padding: 0; }
.rd-main[b-4wtso8bdlt] { flex: 1 1 auto; min-width: 0; }

/* Tip stoji MIMO kartu clanku (viz komentar u markupu), takze uz neni polozkou
   .rd-body a sirku si rika sam. Sirsi obrazovka ho drzi vpravo jako sloupec vedle
   clanku, uzsi ho pusti pres celou sirku pod kartu.

   `box-sizing: border-box` je tu podstatny: driv mel v uzkem rozvrzeni `width: 100%`
   pri content-boxu, takze se k te stovce procent pricetlo jeho vlastni odsazeni
   a tip pretekal z karty ven o 39 px doleva. */
.rd-tip[b-4wtso8bdlt] {
    box-sizing: border-box;
    position: relative;
    width: 290px;
    margin: var(--lb-gap-5) 0 0 auto;
    isolation: isolate;
    padding: var(--lb-gap-6) var(--lb-gap-7) var(--lb-gap-10);
    /* Vpravo misto pro Boostera: vycuhuje z rohu a na uzke obrazovce vjizdel do textu. */
    padding-right: calc(var(--lb-gap-11) + var(--lb-gap-3));
}
/* Podklad bubliny je samostatna vrstva pod textem a Boosterem. Nadechuje se jen ona:
   kdyz se zvetsoval cely tip, posunul se s nim i Booster pod spodni hranu a stranka
   na okamzik prodlouzila - posuvnik pri kazdem nadechnuti poskocil (autor 26.09.2026).
   Podklad se zvetsi o par pixelu uvnitr mista, ktere Booster zabira stejne. */
.rd-tip[b-4wtso8bdlt]::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--lb-tip-bg);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 22%, transparent);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-sm);
}
/* Bublina jednou za sedm vterin „nadechne" a na okamzik ztmavne (autor 25. a 26.09.2026).
   Stoji vpravo vedle textu, takze se pri cteni snadno minie; nadechnuti ji pripomene,
   aniz by prekazela. Samostatne probliknuti pri najeti a poskakovani Boostera autor
   zrusil - Booster hybal strankou. Cyklus pousti trida `lb-pulse-go`, kterou pripisuje
   js/pulse.js pres IntersectionObserver, az kdyz na tip student doscrolluje; zaporne
   zpozdeni preskoci klidovou cast cyklu, takze prvni nadechnuti prijde do vteriny. */
@keyframes lb-rdtip-bublina-b-4wtso8bdlt {
    0%, 88% { transform: scale(1);    background: var(--lb-tip-bg); }
    94%     { transform: scale(1.03); background: var(--lb-tip-bg-silna); }
    100%    { transform: scale(1);    background: var(--lb-tip-bg); }
}
.rd-tip.lb-pulse-go[b-4wtso8bdlt]::before { animation: lb-rdtip-bublina-b-4wtso8bdlt 7s ease-in-out -5.6s infinite; }
@media (prefers-reduced-motion: reduce) {
    .rd-tip.lb-pulse-go[b-4wtso8bdlt]::before { animation: none; }
}

.rd-tip-head[b-4wtso8bdlt] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); font-weight: 700; font-size: var(--lb-fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-accent); margin-bottom: var(--lb-gap-3); }
.rd-tip-head svg[b-4wtso8bdlt] { width: 17px; height: 17px; color: var(--lb-yellow); }
/* Cilova fraze v bubline - to, o cem tip mluvi. */
.rd-tip-term[b-4wtso8bdlt] {
    font-family: var(--lb-font-read);
    font-size: var(--lb-fs-md); font-weight: 600; color: var(--lb-ink-read); margin-bottom: var(--lb-gap-0);
}
.rd-tip-text[b-4wtso8bdlt] { font-size: var(--lb-fs-md); color: var(--lb-text); line-height: 1.5; }
.rd-tip-list[b-4wtso8bdlt] { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--lb-gap-2); }
/* Zvýrazněné fráze v tipu — oranžové (mark vzniká v kódu → ::deep) */
[b-4wtso8bdlt] mark.tip-hl { background: none; color: var(--lb-accent); font-weight: 700; padding: 0; border-bottom: 2px solid color-mix(in srgb, var(--lb-accent) 55%, transparent); }
/* Booster částečně vyčuhuje z bubliny (vpravo dole), nepřekrývá text */
.rd-tip-booster[b-4wtso8bdlt] { position: absolute; right: -24px; bottom: -50px; width: 78px; height: auto; z-index: 5; }

/* Spodní lišta: překlad + Přečíst + Pokračovat */
.rd-foot[b-4wtso8bdlt] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-5); }
.rd-foot-top[b-4wtso8bdlt] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-6); }
.rd-readbtn[b-4wtso8bdlt] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); background: color-mix(in srgb, var(--lb-accent) 12%, transparent); color: var(--lb-accent); border: none; border-radius: var(--lb-radius-pill); padding: var(--lb-gap-3) var(--lb-gap-7); font-weight: 600; font-size: var(--lb-fs-md); cursor: pointer; }
.rd-readbtn:hover[b-4wtso8bdlt] { background: color-mix(in srgb, var(--lb-accent) 20%, transparent); }
.rd-readbtn svg[b-4wtso8bdlt] { width: 18px; height: 18px; }
/* Hlavni akce na konci cteni je zamerne vetsi nez bezne tlacitko; vzhled bere
   ze sdilene .lb-btn.is-primary, tady zustava jen rozmer. */
.rd-continue[b-4wtso8bdlt] {
    padding: var(--lb-gap-5) var(--lb-gap-9);
    font-size: var(--lb-fs-lg);
}
.rd-continue:hover[b-4wtso8bdlt] { transform: translateY(-1px); }

/* ── Rozcestník (hub) po slovíčkách / procvičení ── */
/* Rozcestnik je mezikrok, ne cil - drzi se kompaktne (driv zabiral pres pul obrazovky). */
.phase.hub[b-4wtso8bdlt] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-7); padding: var(--lb-gap-7) 0 var(--lb-gap-4); text-align: center; }
.hub-head[b-4wtso8bdlt] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-2); }
.hub-check[b-4wtso8bdlt] { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--lb-success-bg-hover); color: var(--lb-success-text); }
.hub-check svg[b-4wtso8bdlt] { width: 24px; height: 24px; }
.phase.hub h2[b-4wtso8bdlt] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); margin: 0; }
.phase.hub p[b-4wtso8bdlt] { color: var(--lb-text-secondary); margin: 0; font-size: var(--lb-fs-base); }
.hub-actions[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-2); width: 100%; max-width: 340px; }
/* Cviceni ma vlastni barvu (zluta z designu, tataz jako zarovka u tipu), aby se odlisilo
   od oranzoveho „pokracovat" - procvicit neni dalsi krok lekce, ale odbocka. */
.hub-btn-ico[b-4wtso8bdlt] { width: 18px; height: 18px; flex: 0 0 auto; }

/* Rozcestník rozdělané lekce. Nemá odškrtnuté kolečko jako rozcestníky uvnitř lekce -
   nic se tu nedokončilo, jen se vybírá, kudy dál. Pod „Pokračovat" stojí, CO je za ním:
   samotné slovo nestačilo, protože návrat umí jen fázi a ta může být i zkoušení
   sedmnácti slov od jedničky. */
.lesson-hub .hub-head h2[b-4wtso8bdlt] { font-size: var(--lb-fs-3xl); }
.lesson-hub .hub-btn[b-4wtso8bdlt] { flex-direction: column; gap: 0; line-height: 1.2; }
.lesson-hub .hub-lbl[b-4wtso8bdlt] { font-weight: 700; }
.lesson-hub .hub-sub[b-4wtso8bdlt] { font-size: var(--lb-fs-xs); font-weight: 500; opacity: .82; }
/* ── Finish: pokrok se neuložil (revize 09/2026 - závěr se tvářil úspěšně i po výpadku API) ── */
.finish-unsaved[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-5); flex-wrap: wrap; margin: var(--lb-gap-6) 0 0; padding: var(--lb-gap-5) var(--lb-gap-6); border: 1px solid var(--lb-error-border); border-radius: var(--lb-radius); background: var(--lb-error-bg); color: var(--lb-error-text); font-size: var(--lb-fs-sm); }
.finish-unsaved span[b-4wtso8bdlt] { flex: 1 1 16rem; }
.finish-saved[b-4wtso8bdlt] { margin: var(--lb-gap-6) 0 0; padding: var(--lb-gap-4) var(--lb-gap-6); border: 1px solid var(--lb-success-border); border-radius: var(--lb-radius); background: var(--lb-success-bg); color: var(--lb-success-text); font-size: var(--lb-fs-sm); }
/* ── Finish: karta další lekce ── */
.finish-next[b-4wtso8bdlt] { margin: var(--lb-gap-7) 0 var(--lb-gap-2); }
/* Konec knihy: Booster s pohárem vedle oslavy, pod ní cesta dál. Na úzké obrazovce pod sebou. */
.book-done[b-4wtso8bdlt] {
    display: flex; align-items: center; gap: var(--lb-gap-6);
    margin: 0 0 var(--lb-gap-7); padding: var(--lb-gap-6);
    background: var(--lb-accent-tint); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg);
}
.bd-booster[b-4wtso8bdlt] { width: 8rem; height: auto; flex: 0 0 auto; }
.bd-texty[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-3); align-items: flex-start; }
.bd-title[b-4wtso8bdlt] { margin: 0; font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }
.bd-text[b-4wtso8bdlt] { margin: 0; color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }
.bd-cta[b-4wtso8bdlt] { margin-top: var(--lb-gap-2); text-decoration: none; }
@media (max-width: 560px) {
    .book-done[b-4wtso8bdlt] { flex-direction: column; text-align: center; }
    .bd-texty[b-4wtso8bdlt] { align-items: center; }
    .bd-booster[b-4wtso8bdlt] { width: 6.5rem; }
}
.fn-label[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lb-text-muted); margin-bottom: var(--lb-gap-3); }
.fn-card[b-4wtso8bdlt] { display: flex; align-items: center; gap: var(--lb-gap-6); background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius); padding: var(--lb-gap-5) var(--lb-gap-6); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fn-card:hover[b-4wtso8bdlt] { border-color: var(--lb-accent); box-shadow: var(--lb-shadow-cta); }
.fn-thumb[b-4wtso8bdlt] { width: 64px; height: 64px; object-fit: cover; border-radius: var(--lb-radius-sm); flex: 0 0 auto; background: var(--lb-paper-warm); }
.fn-card--noimg .fn-info[b-4wtso8bdlt] { margin-left: var(--lb-gap-1); }
.fn-info[b-4wtso8bdlt] { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: var(--lb-gap-3); text-align: left; }
.fn-texty[b-4wtso8bdlt] { min-width: 0; }
/* Kolecko srovnane se stredem prvniho radku nazvu. */
.fn-info .fn-num[b-4wtso8bdlt] { margin-top: var(--lb-gap-0); }
/* Cislo lekce jako v prehledu lekci (.lcard .lc-num), aby student videl, kam v knize jde. */
.fn-num[b-4wtso8bdlt] { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--lb-accent); color: var(--lb-on-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--lb-fs-xs); font-weight: 700; }
.fn-title[b-4wtso8bdlt] { font-family: var(--lb-font-head); font-weight: 600; font-size: var(--lb-fs-lg); color: var(--lb-ink); line-height: 1.2; }
.fn-sub[b-4wtso8bdlt] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }
.fn-arrow[b-4wtso8bdlt] { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lb-accent); }

@media (max-width: 700px) {
    .rd-body[b-4wtso8bdlt] { flex-direction: column; }
    .rd-tip[b-4wtso8bdlt] { width: 100%; margin-left: 0; }
    /* Tip je tu pres celou sirku, takze -24 px vpravo by Boostera vystrcilo za okraj
       stranky a stranka dostala vodorovny posuvnik. Vycuhuje jen tolik, co pojme odsazeni. */
    .rd-tip-booster[b-4wtso8bdlt] { right: -8px; }
    .rd-hero-img[b-4wtso8bdlt] { height: 175px; }
    .rd-hero-title[b-4wtso8bdlt] { font-size: var(--lb-fs-3xl); left: 1rem; bottom: .8rem; }
}

/* Rozcestník hotové lekce: pravidla gramatiky pod jedním štítkem, opakování celé lekce
   odsazené od cílů - je to jiný druh volby (začít znovu), ne další místo v lekci. */
.done-hub .hub-gram[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-2); margin-top: var(--lb-gap-3);
    padding: var(--lb-gap-4) var(--lb-gap-4) var(--lb-gap-5); border-radius: var(--lb-radius);
    background: var(--lb-purple-bg); border: 1px solid var(--lb-purple-border); }
.done-hub .hub-clanek[b-4wtso8bdlt] { display: flex; flex-direction: column; gap: var(--lb-gap-2);
    padding: var(--lb-gap-4) var(--lb-gap-4) var(--lb-gap-5); border-radius: var(--lb-radius);
    background: var(--lb-accent-tint); border: 1px solid var(--lb-accent-border); }
.done-hub .hub-clanek .hub-group[b-4wtso8bdlt] { color: var(--lb-panel-label); }
.done-hub .hub-clanek .hub-btn:hover:not(:disabled)[b-4wtso8bdlt] { border-color: var(--lb-accent); color: var(--lb-accent); }
.done-hub .hub-group[b-4wtso8bdlt] { font-size: var(--lb-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lb-purple-text); }
.done-hub .hub-gram .hub-btn:hover:not(:disabled)[b-4wtso8bdlt] { border-color: var(--lb-purple); color: var(--lb-purple-text); }
.done-hub .hub-more[b-4wtso8bdlt] { display: flex; flex-direction: column; align-items: stretch; gap: var(--lb-gap-4); margin-top: var(--lb-gap-5); }
.done-hub .hub-again[b-4wtso8bdlt] { flex-direction: row; gap: var(--lb-gap-4); }
.done-hub .hub-again-txt[b-4wtso8bdlt] { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
/* Zpět vlevo pod sloupcem voleb (autor 25.09.2026), ne na okraji stránky. */
.done-hub .done-hub-nav[b-4wtso8bdlt] { width: 100%; max-width: 340px; justify-content: flex-start; margin-top: 0; }
.done-hub .done-hub-title[b-4wtso8bdlt] { display: inline-flex; align-items: center; gap: var(--lb-gap-4); }
.done-hub .done-hub-title .fn-num[b-4wtso8bdlt] { width: 30px; height: 30px; font-size: var(--lb-fs-md); font-family: var(--lb-font-body); }

/* Návrat do hotové lekce: „Zpět" všude VLEVO dole - na rozcestníku, v článku i na kartě
   pravidla (autor 25.09.2026, po zkoušce obou stran). Bez počitadla „4 / 5": prohlíží se
   jedno pravidlo, ne celá gramatika. */
.gram-actions--navrat .gram-actions-r[b-4wtso8bdlt] { order: -1; margin-left: 0; }
.gram-actions--navrat .gram-actions-l[b-4wtso8bdlt] { margin-left: auto; }
.gram-score.is-navrat[b-4wtso8bdlt] { display: none; }
.rd-foot--navrat[b-4wtso8bdlt] { align-items: flex-start; }
/* /Pages/Zacit.razor.rz.scp.css */
.wizard[b-cmtucto4fe] { max-width: 560px; margin: 0 auto; padding: var(--lb-gap-8) var(--lb-gap-8) var(--lb-gap-11); }
.wizard h1[b-cmtucto4fe] { font-size: var(--lb-fs-4xl); margin: 0 0 var(--lb-gap-8); color: var(--lb-ink-read); }

.wiz-field[b-cmtucto4fe] { margin-bottom: var(--lb-gap-8); }
.wiz-label[b-cmtucto4fe] { display: block; font-size: var(--lb-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-3); }

.wiz-select[b-cmtucto4fe] {
    width: 100%; max-width: 320px; padding: var(--lb-gap-4) var(--lb-gap-5); font-size: var(--lb-fs-lg);
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-sm); background: var(--lb-surface); color: var(--lb-text); cursor: pointer;
}
.wiz-select:focus[b-cmtucto4fe] { outline: none; border-color: var(--lb-accent-strong); }

.wiz-sep[b-cmtucto4fe] { height: 1px; background: var(--lb-warm-tint-2); margin: var(--lb-gap-8) 0 var(--lb-gap-7); }

.wiz-info[b-cmtucto4fe] {
    background: var(--lb-warm-tint); border: 1px solid var(--lb-warm-border); border-radius: var(--lb-radius-sm);
    padding: var(--lb-gap-5) var(--lb-gap-6); color: var(--lb-text-secondary); font-size: var(--lb-fs-md); line-height: 1.5; margin-bottom: var(--lb-gap-8);
}
.wiz-info.muted[b-cmtucto4fe] { background: var(--lb-warm-tint); border-color: var(--lb-warm-tint-2); color: var(--lb-text-secondary); }

/* Vzhled ze sdilene .lb-btn.is-primary; wizard chce vetsi rozmer. */
.wiz-go[b-cmtucto4fe] {
    padding: var(--lb-gap-5) var(--lb-gap-9);
    font-size: var(--lb-fs-lg);
}
.wiz-go:disabled[b-cmtucto4fe] { opacity: .5; cursor: default; }

.wiz-error[b-cmtucto4fe] { color: var(--lb-error-text); margin-top: var(--lb-gap-6); }
.wiz-foot[b-cmtucto4fe] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-8); }

.wiz-hint[b-cmtucto4fe] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-top: var(--lb-gap-2); line-height: 1.45; }
/* Bila na teplem stredu mela 2,27:1 - a to v OBOU motivech, --lb-warm-mid ma
   jedinou hodnotu. Odznak je tichy popisek, takze bere tutez dvojici jako
   ostatni tiche stitky v appce (5,6:1 ve svetlem, 8,9:1 v tmavem). */
.wiz-opt[b-cmtucto4fe] { font-weight: 500; font-size: var(--lb-fs-xs); text-transform: none; letter-spacing: 0; color: var(--lb-text-secondary); background: var(--lb-warm-tint-2); border-radius: var(--lb-radius-sm); padding: var(--lb-gap-0) var(--lb-gap-3); margin-left: var(--lb-gap-2); vertical-align: middle; }