@import '_content/SciBooster.UI.Shared/SciBooster.UI.Shared.uxrj4iyryu.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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { width: 17px; height: 17px; color: var(--lb-purple); }
.gram-rule-text[b-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { padding: var(--lb-gap-4) var(--lb-gap-6); font-size: var(--lb-fs-lg); vertical-align: baseline; }
.gram-conj td:first-child[b-7um5v9oe3q] { width: 1%; white-space: nowrap; font-weight: 700; color: var(--lb-ink); padding-right: var(--lb-gap-5); }
.gram-conj td:last-child[b-7um5v9oe3q] { font-weight: 500; color: var(--lb-text-secondary); line-height: 1.45; }
.gram-conj tr:not(:last-child) td[b-7um5v9oe3q] { border-bottom: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }

/* 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { width: 50%; padding-left: var(--lb-gap-5); }
.gram-table tr:not(:last-child) td[b-7um5v9oe3q] { border-bottom: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }
.gram-table td.gt-fc:not(:last-child)[b-7um5v9oe3q] { border-right: 1px solid color-mix(in srgb, var(--lb-purple) 12%, transparent); }
.gram-table[b-7um5v9oe3q]  .gt-end { color: var(--lb-purple); font-weight: 800; }

/* Příklady — číslované, klíčové slovo zvýrazněné */
.gram-examples[b-7um5v9oe3q] { display: flex; flex-direction: column; gap: var(--lb-gap-4); margin-bottom: var(--lb-gap-8); }
.gram-ex[b-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-0); }
.gram-ex-text[b-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] 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-7um5v9oe3q] { display: flex; flex-direction: column; gap: var(--lb-gap-5); }
.gram-rule-label[b-7um5v9oe3q] { margin-bottom: calc(-1 * var(--lb-gap-2)); }
.gram-rule .gram-conj[b-7um5v9oe3q],
.gram-rule .gram-table[b-7um5v9oe3q] { margin: 0; background: var(--lb-surface); }
.gram-rule .gram-table caption.gt-cap[b-7um5v9oe3q] { 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-7um5v9oe3q] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.gram-veta[b-7um5v9oe3q] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: stretch; }
.gv-blok[b-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { text-transform: none; letter-spacing: 0; font-style: italic; font-size: var(--lb-fs-xs); }
.gv-blok small[b-7um5v9oe3q] { 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-7um5v9oe3q] { background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent); }
.gv-blok.is-v small[b-7um5v9oe3q] { color: color-mix(in srgb, var(--lb-on-accent) 80%, transparent); }
.gv-blok.is-s[b-7um5v9oe3q] { background: var(--lb-info-bg); border-color: color-mix(in srgb, var(--lb-info-text) 35%, transparent); }
.gv-blok.is-e[b-7um5v9oe3q] { border: 2px solid var(--lb-purple); color: var(--lb-purple-text); }
.gv-blok[b-7um5v9oe3q]  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-7um5v9oe3q] { 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-7um5v9oe3q] { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lb-memo-ico); margin-top: var(--lb-gap-0); }
.gram-memo b[b-7um5v9oe3q] { display: block; font-size: var(--lb-fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.gram-memo[b-7um5v9oe3q]  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-7um5v9oe3q] { display: flex; flex-direction: column; gap: var(--lb-gap-3); margin: 0 0 var(--lb-gap-8); }
.gram-item[b-7um5v9oe3q] { 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-7um5v9oe3q] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lb-gap-0) var(--lb-gap-4); min-width: 0; }
.gi-word[b-7um5v9oe3q] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-xl); color: var(--lb-ink); }
.gi-mean[b-7um5v9oe3q] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); }
.gi-use[b-7um5v9oe3q] { 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-7um5v9oe3q] { font-style: italic; color: var(--lb-text-secondary); }
.gi-pis[b-7um5v9oe3q] { 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-7um5v9oe3q] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.gi-cte[b-7um5v9oe3q] { font-weight: 700; color: var(--lb-purple-text); }
.gi-slovo[b-7um5v9oe3q] { font-family: var(--lb-font-head); font-size: var(--lb-fs-lg); color: var(--lb-ink); }
.gi-slovo em[b-7um5v9oe3q] { font-style: normal; font-weight: 700; color: var(--lb-purple); }
.gi-play[b-7um5v9oe3q] { 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-7um5v9oe3q] { background: color-mix(in srgb, var(--lb-purple) 16%, var(--lb-surface)); }
.gi-play svg[b-7um5v9oe3q] { width: 16px; height: 16px; }

/* Jeden příklad ve všech tvarech: karta na rod, řádek pád + tvar, koncovka svítí. */
.gram-rady[b-7um5v9oe3q] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--lb-gap-3); }
.gram-rada[b-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { 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-7um5v9oe3q] { border-top: 1px solid color-mix(in srgb, var(--lb-purple) 10%, transparent); }
.gr-pad[b-7um5v9oe3q] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); white-space: nowrap; }
.gr-tvar[b-7um5v9oe3q] { 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-7um5v9oe3q] { grid-template-columns: 1fr; }
.gr-tab[b-7um5v9oe3q] { width: 100%; border-collapse: collapse; }
.gr-tab th[b-7um5v9oe3q] { 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-7um5v9oe3q] { padding: var(--lb-gap-2) var(--lb-gap-3) var(--lb-gap-2) 0; vertical-align: baseline; }
.gr-tab tr + tr td[b-7um5v9oe3q] { border-top: 1px solid color-mix(in srgb, var(--lb-purple) 10%, transparent); }
.gr-tab td.gr-tvar[b-7um5v9oe3q] { text-align: left; white-space: nowrap; }

/* Tmavý motiv (autor 07.10.2026: „gramatika se v tmavém špatně čte"):
   - tabulky uvnitř pravidla měly pozadí --lb-surface, tmavší než fialový panel kolem,
     takže uprostřed karty zela tmavá díra; teď jsou o stupeň světlejší než panel
     a mají výraznější rámeček i linky mezi řádky
   - zvýrazněný výraz byl tmavě fialový text s podtržením na tmavém podkladu; teď
     světlá fialová v sytější fialové pilulce, stejně čitelná jako ve světlém motivu */
[data-theme="dark"] .gram-rule .gram-conj[b-7um5v9oe3q],
[data-theme="dark"] .gram-rule .gram-table[b-7um5v9oe3q] {
    background: color-mix(in srgb, var(--lb-purple) 12%, var(--lb-surface-elevated));
    border-color: color-mix(in srgb, var(--lb-purple) 45%, transparent);
}
[data-theme="dark"] .gram-conj tr:not(:last-child) td[b-7um5v9oe3q],
[data-theme="dark"] .gram-table tr:not(:last-child) td[b-7um5v9oe3q] {
    border-bottom-color: color-mix(in srgb, var(--lb-purple) 28%, transparent);
}
[data-theme="dark"] .gram-rule[b-7um5v9oe3q] { border-color: color-mix(in srgb, var(--lb-purple) 40%, transparent); }
[data-theme="dark"] .gram-rule[b-7um5v9oe3q]  mark.gram-hl,
[data-theme="dark"] .gram-ex[b-7um5v9oe3q]  mark.gram-hl {
    color: var(--lb-purple-text);
    background: color-mix(in srgb, var(--lb-purple) 38%, transparent);
    border-bottom: none; border-radius: var(--lb-radius-2xs);
    padding: 0 .3em;
}
/* Přehrávání (reproduktor v kolečku) v tmavém motivu světlejší a výraznější (autor 07.10.2026):
   tmavě fialová ikona na skoro průhledném kruhu zanikala. */
[data-theme="dark"] .gi-play[b-7um5v9oe3q] {
    color: var(--lb-purple-text);
    background: color-mix(in srgb, var(--lb-purple) 24%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-purple) 60%, transparent);
}
[data-theme="dark"] .gi-play:hover[b-7um5v9oe3q] { background: color-mix(in srgb, var(--lb-purple) 36%, var(--lb-surface)); }
/* /Layout/FeedbackDialog.razor.rz.scp.css */
/* Dialog hlášení: vystředěná karta nad ztmavenou stránkou. */
.fb-scrim[b-kn0tl4heq6] {
    position: fixed; inset: 0; z-index: 90;
    background: var(--lb-scrim);
}
.fb-dialog[b-kn0tl4heq6] {
    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-kn0tl4heq6] { margin: 0; font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }
.fb-text[b-kn0tl4heq6] { 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-kn0tl4heq6] { 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-kn0tl4heq6] { 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-kn0tl4heq6] { background: var(--lb-surface); color: var(--lb-accent); box-shadow: var(--lb-shadow-xs); }

.fb-input[b-kn0tl4heq6] {
    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-kn0tl4heq6] { outline: none; border-color: var(--lb-accent); }

.fb-shot[b-kn0tl4heq6] { display: flex; flex-direction: column; gap: var(--lb-gap-2); }
.fb-check[b-kn0tl4heq6] { 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-kn0tl4heq6] { 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-kn0tl4heq6] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.fb-error[b-kn0tl4heq6] { margin: 0; font-size: var(--lb-fs-sm); color: var(--lb-error-text); }

.fb-actions[b-kn0tl4heq6] { 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-kn0tl4heq6] {
    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-2vlqi4ju40] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Horní lišta ── */
.topbar[b-2vlqi4ju40] {
    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);
    transition: box-shadow .2s ease, border-color .2s ease;
}
/* Stín jen když pod lištou leží obsah (třídy na <html> přepíná js/listy.js, autor 04.10.2026):
   bílé lišty na bílé kartě článku splývaly s textem. Nahoře/dole stránky zůstávají čisté. */
html.lb-pod-hlavickou .topbar[b-2vlqi4ju40] { box-shadow: var(--lb-shadow-sm); border-bottom-color: transparent; }
.topbar-inner[b-2vlqi4ju40] {
    width: 100%;
    max-width: 860px;
    padding: 0 var(--lb-gap-8);
    display: flex;
    align-items: center;
    gap: var(--lb-gap-6);
}

.brand[b-2vlqi4ju40] {
    display: inline-flex;
    align-items: center;
    gap: var(--lb-gap-3);
    text-decoration: none;
    flex: 0 0 auto;
}
.brand-name[b-2vlqi4ju40] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-3xl); color: var(--lb-ink); }
.brand-accent[b-2vlqi4ju40] { color: var(--lb-accent); }
/* Logo (atom) pred nazvem - vyska tlacitek v liste, aby linka hlavicky drzela. */
.brand-logo[b-2vlqi4ju40] { width: 2.7rem; height: 2.7rem; flex-shrink: 0; }

/* Přepínač kurzu — uprostřed; obal nese pozici rozbalovacího výběru. */
.course-switch[b-2vlqi4ju40] { position: relative; margin: 0 auto; display: inline-flex; }
.course-pill[b-2vlqi4ju40] {
    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);
    height: 2.6rem;                             /* stejně vysoká jako tlačítko uživatele (autor 12.10.2026) */
    padding: 0 var(--lb-gap-5);
    box-shadow: var(--lb-shadow);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.course-pill:hover[b-2vlqi4ju40] { border-color: var(--lb-accent); }
.course-flag[b-2vlqi4ju40] { font-size: var(--lb-fs-xl); line-height: 1; display: inline-flex; align-items: center; }
.course-name[b-2vlqi4ju40] { font-weight: 600; color: var(--lb-ink); font-size: var(--lb-fs-md); white-space: nowrap; line-height: 1; transform: translateY(0.1em); }   /* svisle na střed s ikonou; háček nad „Š" táhl text opticky nahoru k horní hraně ikony, proto o kousek níž */
.course-caret[b-2vlqi4ju40] { width: 16px; height: 16px; color: var(--lb-text-muted); }

/* Akce vpravo */
.tb-actions[b-2vlqi4ju40] { 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-2vlqi4ju40] { margin-left: auto; }
/* Výběr kurzu visí pod tlačítkem uprostřed, ne u pravého kraje jako profil. */
/* .tb-menu stojí níž a se stejnou specifičností by šířku přebil - proto dvojitá třída. */
.tb-menu.course-menu[b-2vlqi4ju40] { left: 50%; right: auto; transform: translateX(-50%); min-width: 300px; max-width: 360px; }
.course-menu:focus[b-2vlqi4ju40] { outline: none; }
.tb-menu-item.course-item[b-2vlqi4ju40] { display: flex; align-items: center; gap: var(--lb-gap-3); min-height: 3.2rem; padding: var(--lb-gap-3) var(--lb-gap-5); }   /* vyšší a delší položky výběru kurzu */
.course-item .tb-menu-name[b-2vlqi4ju40] { flex: 1 1 auto; white-space: nowrap; }   /* „Chemie, základní škola" na jeden řádek */
.course-native[b-2vlqi4ju40] { display: inline-flex; font-size: var(--lb-fs-sm); opacity: .8; }

.tb-btn[b-2vlqi4ju40] {
    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);
    /* Bez kolečka (06.10.2026, autor): kolečko nese jen avatar profilu. Aktivní Domů
       se proto pozná jen barvou, ne podkladem - jinak by vypadalo jako jediné tlačítko. */
    background: none;
    border: none;
    border-radius: var(--lb-radius-pill);
    color: var(--lb-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tb-btn svg[b-2vlqi4ju40] { width: 20px; height: 20px; }
.tb-label[b-2vlqi4ju40] { font-size: var(--lb-fs-2xs); letter-spacing: .02em; }
.tb-btn:hover[b-2vlqi4ju40] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); color: var(--lb-accent); }
.tb-active[b-2vlqi4ju40], .tb-on[b-2vlqi4ju40] { color: var(--lb-accent); }

.profile[b-2vlqi4ju40] { position: relative; display: inline-flex; }
.profile-btn[b-2vlqi4ju40] {
    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-2vlqi4ju40] { width: 20px; height: 20px; }
.profile-btn:hover[b-2vlqi4ju40] { 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-2vlqi4ju40] { position: fixed; inset: 0; z-index: 29; background: none; border: none; }
.voice-picker[b-2vlqi4ju40] { position: relative; display: inline-flex; }
.tb-menu[b-2vlqi4ju40] {
    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-2vlqi4ju40] { 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-2vlqi4ju40] { outline: none; }
.pm-mobile[b-2vlqi4ju40] { display: none; }   /* jen mobil — desktop má ovládání v liště */
.pm-state[b-2vlqi4ju40] { color: var(--lb-text-muted); font-size: var(--lb-fs-sm); font-weight: 600; }
.pm-voices[b-2vlqi4ju40] { max-height: 220px; overflow-y: auto; }
.tb-menu-empty[b-2vlqi4ju40] { padding: var(--lb-gap-4) var(--lb-gap-4); font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.tb-menu-item[b-2vlqi4ju40], .tb-menu-link[b-2vlqi4ju40] {
    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-2vlqi4ju40], .tb-menu-link:hover[b-2vlqi4ju40] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.tb-menu-active[b-2vlqi4ju40] { background: color-mix(in srgb, var(--lb-accent) 12%, transparent); }
.tb-menu-active .tb-menu-name[b-2vlqi4ju40] { font-weight: 600; color: var(--lb-accent); }
.tb-menu-name[b-2vlqi4ju40] { font-size: var(--lb-fs-base); }
.tb-menu-tag[b-2vlqi4ju40] { font-size: var(--lb-fs-2xs); color: var(--lb-text-muted); letter-spacing: .03em; }
.tb-menu-tag.tag-warn[b-2vlqi4ju40] { color: var(--lb-hint-text); }   /* síťový hlas - varovat, seká se */
.tb-menu-sep[b-2vlqi4ju40] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.tb-menu-danger[b-2vlqi4ju40] { color: var(--lb-accent-strong); }
/* Položka s ikonou (autor 18.10.2026): ikona vlevo, text za ní, stav (zapnuto / motiv) vpravo. */
.pm-s-ikonou[b-2vlqi4ju40] { justify-content: flex-start; white-space: nowrap; }
.pm-s-ikonou .pm-state[b-2vlqi4ju40] { margin-left: auto; }
.pm-ikona[b-2vlqi4ju40] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--lb-text-secondary); }
/* Hlášení: chyba červeně s broukem, připomínka fialově se žárovkou - druh je vidět na první pohled. */
.tb-menu-report[b-2vlqi4ju40] { color: var(--lb-error-text); font-weight: 600; }
.tb-menu-report:hover[b-2vlqi4ju40] { background: var(--lb-error-bg); }
.tb-menu-idea[b-2vlqi4ju40] { color: var(--lb-purple-text); font-weight: 600; }
.tb-menu-idea:hover[b-2vlqi4ju40] { background: var(--lb-purple-bg); }
.tb-menu-report .pm-ikona[b-2vlqi4ju40], .tb-menu-idea .pm-ikona[b-2vlqi4ju40] { color: currentColor; }
.pm-user[b-2vlqi4ju40] { padding: var(--lb-gap-2) var(--lb-gap-4) var(--lb-gap-0); font-size: var(--lb-fs-md); font-weight: 700; }


.content[b-2vlqi4ju40] {
    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-2vlqi4ju40] {
    padding-bottom: calc(var(--lb-botnav-h) + var(--lb-gap-9));
}
/* Bez spodní lišty (nástěnka) stačí malý okraj: 40 px pod posledním pruhem udělalo stránku
   o pár pixelů delší než okno a prohlížeč přidal posuvník, i když byl obsah celý vidět
   (autor 12.10.2026). Dvě třídy, ať přebije i mobilní zkratku `padding` níž. */
.content:not(.content-botnav)[b-2vlqi4ju40] {
    padding-bottom: var(--lb-gap-5);
}

/* ── Spodní patička: rychlá navigace mezi moduly ── */
.botnav[b-2vlqi4ju40] {
    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);
    transition: box-shadow .2s ease, border-color .2s ease;
    /* 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));
}

html.lb-pod-listou .botnav[b-2vlqi4ju40] { box-shadow: var(--lb-shadow-up); border-top-color: transparent; }

.bn-item[b-2vlqi4ju40] {
    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-2vlqi4ju40] { width: 22px; height: 22px; }
.bn-item span[b-2vlqi4ju40] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bn-item:hover[b-2vlqi4ju40] { 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-2vlqi4ju40] { color: var(--lb-accent-strong); }
.bn-on svg[b-2vlqi4ju40] { color: var(--lb-accent); }
.bn-on[b-2vlqi4ju40]::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-2vlqi4ju40] { gap: var(--lb-gap-3); padding: 0 var(--lb-gap-4); height: 3.4rem; }
    .topbar-inner[b-2vlqi4ju40] { 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-2vlqi4ju40] { display: flex; flex-direction: column; line-height: 1; font-size: var(--lb-fs-md); }
    /* 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-2vlqi4ju40] { font-size: var(--lb-fs-sm); }
    .course-pill[b-2vlqi4ju40] { height: 2.3rem; padding: 0 var(--lb-gap-3); gap: var(--lb-gap-1); }   /* jako .profile-btn na mobilu */
    .course-flag[b-2vlqi4ju40] { font-size: var(--lb-fs-md); }
    .course-caret[b-2vlqi4ju40] { display: none; }
    .tb-label[b-2vlqi4ju40] { display: none; }
    .tb-btn[b-2vlqi4ju40] { min-width: 2.1rem; height: 2.3rem; }
    .tb-btn svg[b-2vlqi4ju40] { width: 18px; height: 18px; }
    .profile-btn[b-2vlqi4ju40] { width: 2.3rem; height: 2.3rem; }
    .content[b-2vlqi4ju40] { 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-2vlqi4ju40] { gap: var(--lb-gap-0); }
    .tb-btn[b-2vlqi4ju40] { min-width: 1.9rem; padding: 0 var(--lb-gap-1); }
}

/* Tmavý motiv (05.10.2026, autor): stín na tmavém podkladu není vidět, takže se lišty
   odlišují jinak - jsou o stupeň světlejší než obsah a mají světlejší linku na hraně,
   a ta zůstává i při rolování (ve světlém motivu ji tam nahradí stín). */
html[data-theme="dark"] .topbar[b-2vlqi4ju40],
html[data-theme="dark"].lb-pod-hlavickou .topbar[b-2vlqi4ju40] {
    background: var(--lb-surface-elevated);
    border-bottom-color: color-mix(in srgb, var(--lb-text-muted) 45%, var(--lb-surface-elevated));
}
html[data-theme="dark"] .botnav[b-2vlqi4ju40],
html[data-theme="dark"].lb-pod-listou .botnav[b-2vlqi4ju40] {
    background: var(--lb-surface-elevated);
    border-top-color: color-mix(in srgb, var(--lb-text-muted) 45%, var(--lb-surface-elevated));
}
/* /Layout/PageBack.razor.rz.scp.css */
.page-back[b-cw6wci0ky9] {
    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-cw6wci0ky9] {
    color: var(--lb-ink);
}

.page-back svg[b-cw6wci0ky9] {
    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-4nliy7ufid] { --g: var(--lb-purple); margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.gramatika-page h1[b-4nliy7ufid] { font-family: var(--lb-font-head); font-size: var(--lb-fs-5xl); margin-bottom: var(--lb-gap-1); color: var(--lb-ink); }
.subtitle[b-4nliy7ufid] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-8); }
.alert[b-4nliy7ufid] { color: var(--lb-error-text); padding: var(--lb-gap-6); }

.level[b-4nliy7ufid] { margin-top: var(--lb-gap-8); }
.level h2[b-4nliy7ufid] { 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-4nliy7ufid] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.topic-card[b-4nliy7ufid] { 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-4nliy7ufid] { border-color: var(--g); box-shadow: 0 4px 14px color-mix(in srgb, var(--g) 16%, transparent); transform: translateY(-1px); }
.topic-card.done[b-4nliy7ufid] { background: color-mix(in srgb, var(--g) 5%, var(--lb-surface)); border-color: color-mix(in srgb, var(--g) 28%, transparent); }
.tc-head[b-4nliy7ufid] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-4); }
.tc-title[b-4nliy7ufid] { font-family: var(--lb-font-head); font-weight: 600; font-size: var(--lb-fs-xl); color: var(--lb-ink); }
.tc-meta[b-4nliy7ufid] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-1); }
.topic-card.done .tc-meta[b-4nliy7ufid] { color: var(--g); }

/* Odznak „hotovo" (zeleně, konzistentně s ostatními sekcemi) */
[b-4nliy7ufid] .lb-done-badge, .lb-done-badge[b-4nliy7ufid] { 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-2xk1x8zzwy] { --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-2xk1x8zzwy] { color: var(--lb-error-text); padding: var(--lb-gap-6); }

.tema-eyebrow[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { 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-2xk1x8zzwy] { display: flex; gap: var(--lb-gap-3); margin: var(--lb-gap-1) 0 var(--lb-gap-7); }
.g-step[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { background: var(--g); color: var(--lb-on-accent); }
.g-step.passed[b-2xk1x8zzwy] { color: var(--g); }


/* Procvičení */
.exercise[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { 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-2xk1x8zzwy] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.opt[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { border-color: var(--g); }
.opt.correct[b-2xk1x8zzwy] { border-color: var(--lb-success-border); background: var(--lb-success-bg); color: var(--lb-success-text); font-weight: 600; }
.opt.wrong[b-2xk1x8zzwy] { border-color: var(--lb-error); background: var(--lb-error-bg); color: var(--lb-error-text); font-weight: 600; }
.opt.dim[b-2xk1x8zzwy] { opacity: .5; }

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

/* skládání vět */
.order-prompt[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { 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-2xk1x8zzwy] { border-style: solid; border-color: var(--lb-success-border); background: var(--lb-success-bg); }
.order-bank[b-2xk1x8zzwy] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); margin-bottom: var(--lb-gap-5); }
.order-placeholder[b-2xk1x8zzwy] { color: var(--lb-text-muted); align-self: center; }
.chip[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { border-color: var(--g); }
.chip.placed[b-2xk1x8zzwy] { background: color-mix(in srgb, var(--g) 8%, var(--lb-surface)); border-color: color-mix(in srgb, var(--g) 30%, transparent); }
.order-result[b-2xk1x8zzwy] { margin: var(--lb-gap-3) 0; font-weight: 600; }
.order-result.ok[b-2xk1x8zzwy] { color: var(--lb-success-text); }
.order-result.bad[b-2xk1x8zzwy] { color: var(--lb-error-text); }
.hint-btn[b-2xk1x8zzwy] { 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-2xk1x8zzwy] { background: color-mix(in srgb, var(--g) 10%, transparent); }
/* /Pages/Home.razor.rz.scp.css */
.dash[b-djmgchhtk0] {
    display: flex;
    flex-direction: column;
    gap: var(--lb-gap-5);
}

.dash-loading[b-djmgchhtk0] { 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-djmgchhtk0] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--lb-gap-4);
    margin-top: var(--lb-gap-2);
}
.sec-title[b-djmgchhtk0] { font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); margin: 0; color: var(--lb-ink); }
.sec-link[b-djmgchhtk0] {
    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-djmgchhtk0] { width: 16px; height: 16px; }
.sec-link:hover[b-djmgchhtk0] { color: var(--lb-accent-strong); }

/* ── HERO ── */
.hero[b-djmgchhtk0] {
    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-djmgchhtk0] {
    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-djmgchhtk0] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-accent); }
.hero-title[b-djmgchhtk0] { font-family: var(--lb-font-head); font-size: var(--lb-fs-3xl); line-height: 1.05; margin: var(--lb-gap-2) 0 0; color: var(--lb-ink); }   /* odsazeni od stitku nad nim (autor 03.10.2026) */
/* Cislo lekce pred nadpisem - barvou akcentu jako procenta postupu, aby nesplyvalo s nazvem. */
.hero-num[b-djmgchhtk0] { color: var(--lb-accent); opacity: .6; }   /* tlumene, aby nesvitilo vic nez nazev (autor 03.10.2026) */
.hero-sub[b-djmgchhtk0] { font-size: var(--lb-fs-base); color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }

.hero-progress[b-djmgchhtk0] { display: flex; align-items: center; gap: var(--lb-gap-5); margin-top: var(--lb-gap-1); max-width: 360px; }
.hero-bar[b-djmgchhtk0] { 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-djmgchhtk0] { display: block; height: 100%; background: var(--lb-cta-gradient); border-radius: var(--lb-radius-pill); transition: width .3s ease; }
.hero-pct[b-djmgchhtk0] { font-weight: 700; color: var(--lb-accent); font-size: var(--lb-fs-md); }

.hero-meta[b-djmgchhtk0] { display: flex; align-items: center; gap: var(--lb-gap-4); color: var(--lb-text-secondary); font-size: var(--lb-fs-sm); }
.hero-chip[b-djmgchhtk0] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); }
.hero-chip svg[b-djmgchhtk0] { width: 14px; height: 14px; color: var(--lb-text-muted); }
.hero-sep[b-djmgchhtk0] { 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-djmgchhtk0] {
    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-djmgchhtk0] { width: 20px; height: 20px; }
.hero-cta:hover[b-djmgchhtk0] { transform: translateY(-1px); box-shadow: var(--lb-shadow-cta-hover); }

.hero-foot[b-djmgchhtk0] {
    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-djmgchhtk0] { width: 18px; height: 18px; }
.hero-foot:hover[b-djmgchhtk0] { color: var(--lb-accent-strong); }

.hero-art[b-djmgchhtk0] { 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-djmgchhtk0] {
    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-djmgchhtk0] { display: none; }
.hero--noart .hero-body[b-djmgchhtk0] { flex-basis: 100%; }

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

.mod[b-djmgchhtk0] {
    --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-djmgchhtk0] { 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-djmgchhtk0] { display: flex; align-items: center; gap: var(--lb-gap-4); min-width: 0; }
.mod-ico[b-djmgchhtk0] {
    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-djmgchhtk0] { width: 29px; height: 29px; object-fit: contain; }
/* Odznak počtu k opakování v pravém horním rohu dlaždice (role .lb-count-badge
   z palety, tady jen jiné umístění a velikost než v dolní liště). */
.mod .mod-badge[b-djmgchhtk0] {
    /* Vysunutý přes roh dlaždice, jako odznak na ikoně aplikace (autor 13.10.2026). */
    top: -.6rem; right: -.6rem; left: auto; margin-left: 0;
    min-width: 1.7rem; height: 1.7rem; font-size: var(--lb-fs-sm);
}
/* Po načtení odznak jednou poskočí, ať si ho student všimne; pak zůstane v klidu. */
.mod .mod-badge[b-djmgchhtk0] { animation: mod-badge-hop-b-djmgchhtk0 .9s ease-out .6s 1; transform-origin: 50% 100%; }
@keyframes mod-badge-hop-b-djmgchhtk0 {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-6px) scale(1.15); }
    55% { transform: translateY(0) scale(.95); }
    75% { transform: translateY(-2px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .mod .mod-badge[b-djmgchhtk0] { animation: none; } }
.mod-titles[b-djmgchhtk0] { display: flex; flex-direction: column; gap: var(--lb-gap-0); min-width: 0; }

.mod-eyebrow[b-djmgchhtk0] { font-size: var(--lb-fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mod); }
.mod-head[b-djmgchhtk0] { 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-djmgchhtk0] { display: none; font-size: var(--lb-fs-sm); color: var(--lb-text-muted); line-height: 1.35; }
@media (min-width: 1120px) {
    .mod-desc[b-djmgchhtk0] { display: block; }
}

.mod-stat[b-djmgchhtk0] { 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-djmgchhtk0] { 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-djmgchhtk0] { display: block; height: 100%; background: var(--mod); border-radius: var(--lb-radius-pill); }
.mod-stat-val[b-djmgchhtk0] { 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-djmgchhtk0] { --mod: var(--lb-success-text); }

.mod-oblasti[b-djmgchhtk0] { --mod: var(--lb-green-vivid); }
.mod-gramatika[b-djmgchhtk0] { --mod: var(--lb-purple); }
.mod-opakovani[b-djmgchhtk0] { --mod: var(--lb-accent); }
/* Předmět: dvě dlaždice - Opakování oranžové a Tahák fialový; popis má místo vždy. */
.mods--predmet[b-djmgchhtk0] { grid-template-columns: repeat(2, 1fr); }
.mods--predmet .mod-opakovani:not(.mod-done)[b-djmgchhtk0] { --mod: var(--lb-orange); }
.mods--predmet .mod-desc[b-djmgchhtk0] { display: block; }
.mod-tahak[b-djmgchhtk0] { --mod: var(--lb-purple); }

/* ── 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-djmgchhtk0] { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--lb-gap-4); }

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

.prog-week[b-djmgchhtk0] { display: flex; gap: var(--lb-gap-2); }
.wk[b-djmgchhtk0] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-1); }
.wk-dot[b-djmgchhtk0] {
    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-djmgchhtk0] { width: 14px; height: 14px; }
.wk-on .wk-dot[b-djmgchhtk0] { background: var(--lb-cta-gradient); border-color: transparent; }
.wk-today .wk-dot[b-djmgchhtk0] { box-shadow: var(--lb-ring-accent); }
.wk-d[b-djmgchhtk0] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 600; }
.wk-today .wk-d[b-djmgchhtk0] { color: var(--lb-accent); }

.pcard-stat[b-djmgchhtk0] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--lb-gap-1); text-align: center;
}
.prog-stat-ico[b-djmgchhtk0] { width: 22px; height: 22px; flex: 0 0 auto; color: var(--lb-accent); }
.pcard-stat strong[b-djmgchhtk0] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); line-height: 1.05; }
.pcard-stat span[b-djmgchhtk0] { 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-djmgchhtk0] {
    /* 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);
    /* Zelený jako karta lekce nahoře (autor 03.10.2026): přehled začíná i končí stejnou
       barvou, fialová patří Opakování uprostřed. */
    background: var(--lb-hero-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-djmgchhtk0] { width: 92px; height: auto; flex: 0 0 auto; }
/* Stejná animace jako tipy Boostera v lekci (autor 12.10.2026): jednou za cyklus
   (--lb-tip-cyklus) Booster povyskočí a při dopadu se rozsvítí obrys pruhu - keyframes
   lb-tip-booster a lb-tip-okraj v app.css. Pouští js/pulse.js, až je pruh vidět. */
.tip[b-djmgchhtk0] { outline: 2px solid transparent; outline-offset: -1px; }
.tip.lb-pulse-go[b-djmgchhtk0] { animation: lb-tip-okraj var(--lb-tip-cyklus) ease-in-out var(--lb-tip-start) infinite; }
.tip.lb-pulse-go .tip-booster[b-djmgchhtk0] { animation: lb-tip-booster var(--lb-tip-cyklus) ease-out var(--lb-tip-start) infinite; }
@media (prefers-reduced-motion: reduce) {
    .tip.lb-pulse-go[b-djmgchhtk0], .tip.lb-pulse-go .tip-booster[b-djmgchhtk0] { animation: none; }
}
.tip-body[b-djmgchhtk0] {
    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-djmgchhtk0]::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-djmgchhtk0] { font-weight: 700; font-size: var(--lb-fs-lg); color: var(--lb-accent-strong); margin-bottom: var(--lb-gap-1); }
.tip-text[b-djmgchhtk0] { 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-djmgchhtk0], .tip-text[b-djmgchhtk0] { padding-right: var(--lb-gap-11); }
.tip-cta[b-djmgchhtk0] {
    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-djmgchhtk0] { width: 18px; height: 18px; }
.tip-cta:hover[b-djmgchhtk0] { box-shadow: var(--lb-shadow-cta-hover); }

/* Nabídka jiného kurzu s opakováním: oranžový blok s vlastním tlačítkem (autor 13.10.2026),
   odlišený od Boosterovy hlášky, s vlajkou a kódem kurzu. */
/* Kompaktní řádek (autor 17.10.2026): štítek, text a malá šipka vedle sebe; šipka už nepadá na
   vlastní řádek, dvě nabídky se vejdou do bubliny bez rolování. */
.tip-jiny[b-djmgchhtk0] {
    display: flex; align-items: center; flex-wrap: nowrap; gap: var(--lb-gap-2);
    margin-top: var(--lb-gap-2);
    padding: var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-3);
    background: var(--lb-tip-bg-silna);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 45%, var(--lb-border-strong));
    border-radius: var(--lb-radius-sm);
    font-size: var(--lb-fs-sm); color: var(--lb-text);
}
.tip-jiny-kurz[b-djmgchhtk0] {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--lb-gap-1);
    padding: var(--lb-gap-0) var(--lb-gap-2);
    border-radius: var(--lb-radius-pill);
    background: var(--lb-surface);
    font-weight: 700;
}
.tip-jiny-text[b-djmgchhtk0] { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.tip-jiny-text strong[b-djmgchhtk0] { color: var(--lb-accent-strong); }
.tip-jiny-cta[b-djmgchhtk0] {
    flex: 0 0 auto; width: 32px; height: 32px; min-height: 0; border-radius: 50%; padding: 0; gap: 0;
    justify-content: center; margin-left: auto;
}
.tip-jiny-cta svg[b-djmgchhtk0] { width: 15px; height: 15px; }
/* Bez Boosterova tlačítka text nepotřebuje místo vpravo. */
.tip[data-bez-cta] .tip-title[b-djmgchhtk0], .tip[data-bez-cta] .tip-text[b-djmgchhtk0] { padding-right: 0; }

/* Bílý pruh, když není co opakovat; barevný (silnější stupeň tipu), dokud dnes zbývá. */
.tip[b-djmgchhtk0] { background: var(--lb-surface); border-color: var(--lb-border-strong); }
.tip[data-due][b-djmgchhtk0] { background: var(--lb-tip-bg-silna); border-color: color-mix(in srgb, var(--lb-accent) 45%, var(--lb-border-strong)); }
/* Počet k opakování za titulkem: číslo podtržené fixou jako nadpis vrstvy v Oblastech
   (.dm-misto), ne kolečko - to vypadalo jako další tlačítko (autor 13.10.2026). */
.tip-pocet[b-djmgchhtk0] {
    display: inline-block; margin-left: var(--lb-gap-2); padding: 0 var(--lb-gap-1);
    font-size: var(--lb-fs-4xl); line-height: 1; vertical-align: -.12em;
    font-weight: 800; color: var(--lb-accent-strong);
    background: linear-gradient(transparent 66%, color-mix(in srgb, var(--lb-accent) 35%, transparent) 66%,
                                color-mix(in srgb, var(--lb-accent) 35%, transparent) 94%, transparent 94%);
    border-radius: var(--lb-radius-xs);
}

/* ── Prázdný stav ── */
.dash-empty[b-djmgchhtk0] { 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-djmgchhtk0] { width: 132px; height: auto; margin-bottom: var(--lb-gap-2); }
.dash-empty h1[b-djmgchhtk0] { font-size: var(--lb-fs-4xl); margin: 0; color: var(--lb-ink); }
.dash-empty p[b-djmgchhtk0] { color: var(--lb-text-muted); max-width: 26rem; margin: 0 0 var(--lb-gap-5); line-height: 1.55; }
.dash-empty-cta[b-djmgchhtk0] {
    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-djmgchhtk0] { flex-direction: column; min-height: 0; }
    .hero-art[b-djmgchhtk0] { 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-djmgchhtk0] {
        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-djmgchhtk0], .prog-grid[b-djmgchhtk0] { gap: var(--lb-gap-3); }
    .mod[b-djmgchhtk0] { padding: var(--lb-gap-4); }
    /* Ikona nad text: na 110px širokou dlaždici se vedle sebe nevejdou. */
    .mod-top[b-djmgchhtk0] { flex-direction: column; align-items: flex-start; gap: var(--lb-gap-2); }
    .mod-ico[b-djmgchhtk0] { width: 34px; height: 34px; }
    .mod-ico img[b-djmgchhtk0] { width: 23px; height: 23px; }
    /* Lišta pod číslo, ne vedle něj - na tuhle šířku by z ní byl pahýl. */
    .mod-stat[b-djmgchhtk0] { flex-direction: column; align-items: flex-start; gap: var(--lb-gap-2); }
    .mod-stat-bar[b-djmgchhtk0] { width: 100%; flex: 0 0 auto; }

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

/* ── Mobil: celkově zmenšit + míň odsazení ── */
@media (max-width: 560px) {
    .dash[b-djmgchhtk0] { 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-djmgchhtk0] { border-radius: var(--lb-radius); }
    .hero-body[b-djmgchhtk0] { padding: var(--lb-gap-4) var(--lb-gap-5); gap: var(--lb-gap-1); }
    .hero-eyebrow[b-djmgchhtk0] { font-size: var(--lb-fs-2xs); padding-right: var(--lb-gap-11); }
    .hero-title[b-djmgchhtk0] { font-size: var(--lb-fs-3xl); padding-right: var(--lb-gap-11); line-height: 1; }
    .hero-sub[b-djmgchhtk0] { font-size: var(--lb-fs-sm); padding-right: var(--lb-gap-11); margin-top: 0; }
    .hero-progress[b-djmgchhtk0] { max-width: none; margin-top: var(--lb-gap-2); gap: var(--lb-gap-4); }
    .hero-meta[b-djmgchhtk0] { 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-djmgchhtk0] {
        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-djmgchhtk0] { width: 18px; height: 18px; }
    .hero-cta-label[b-djmgchhtk0] { display: none; }
    .hero-foot[b-djmgchhtk0] { 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-djmgchhtk0] { 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-djmgchhtk0], .prog-grid[b-djmgchhtk0] { gap: var(--lb-gap-2); }
    .mod[b-djmgchhtk0] { padding: var(--lb-gap-3); }
    .mod-ico[b-djmgchhtk0] { width: 28px; height: 28px; }
    .mod-ico img[b-djmgchhtk0] { width: 19px; height: 19px; }
    .mod-head[b-djmgchhtk0] { font-size: var(--lb-fs-base); }
    .mod-stat[b-djmgchhtk0] { gap: var(--lb-gap-1); }
    .mod-stat-val[b-djmgchhtk0] { font-size: var(--lb-fs-xs); }

    .pcard[b-djmgchhtk0] { padding: var(--lb-gap-3); }
    .pcard-stat strong[b-djmgchhtk0] { 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-djmgchhtk0] { width: 15px; height: 15px; border-width: 1px; }
    .wk-dot svg[b-djmgchhtk0] { width: 9px; height: 9px; }
    .wk-d[b-djmgchhtk0] { 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-djmgchhtk0] { flex-wrap: wrap; padding: var(--lb-gap-3) var(--lb-gap-4); gap: var(--lb-gap-2); }
    .tip-body[b-djmgchhtk0] { flex: 1 1 0; padding: var(--lb-gap-3) var(--lb-gap-5); }
    .tip-booster[b-djmgchhtk0] { width: 74px; }
    .tip-title[b-djmgchhtk0] { font-size: var(--lb-fs-md); }
    .tip-text[b-djmgchhtk0] { font-size: var(--lb-fs-xs); }
    /* Na úzkém displeji menší kolečko, ať bublině zbyde na text. */
    .tip-title[b-djmgchhtk0], .tip-text[b-djmgchhtk0] { padding-right: var(--lb-gap-9); }
    .tip-cta[b-djmgchhtk0] { width: 34px; height: 34px; right: var(--lb-gap-3); }
    .tip-cta svg[b-djmgchhtk0] { width: 15px; height: 15px; }
    .dash-empty-booster[b-djmgchhtk0] { width: 104px; }
}

/* ══ Vzhled 05.10.2026 (mockup autora, převzato do SciBoosteru i LangBoosteru) ══
   Jeden blok na konci, aby přebil starší pravidla i jejich mobilní varianty výš:
   - karta lekce: obrázek vsazený se zaoblenými rohy (bez prolnutí), „Přehled lekcí"
     jako bílá pilulka s ikonou, na mobilu přes spodek obrázku,
   - dlaždice: výraznější tónovaná karta, šipka v kolečku vpravo nahoře, název sekce jako nadpis,
   - pokrok: ikona v tónovaném kolečku vlevo, u lekcí lišta postupu,
   - Booster: bez bubliny, nadpis a text rovnou v kartě, šipka vpravo. */

.sec-title[b-djmgchhtk0] { font-weight: 800; }

.hero[b-djmgchhtk0] {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    grid-template-areas: "body art" "foot art";
    gap: 0 var(--lb-gap-4);
    padding: var(--lb-gap-4);
    border-color: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-border-strong));
}
.hero-body[b-djmgchhtk0] { grid-area: body; padding: var(--lb-gap-3) var(--lb-gap-4); }
.hero-art[b-djmgchhtk0] { grid-area: art; border-radius: var(--lb-radius); min-height: 180px; }
.hero-art img[b-djmgchhtk0] { mask-image: none; -webkit-mask-image: none; }
.hero-foot[b-djmgchhtk0] {
    grid-area: foot; align-self: end;
    display: flex; align-items: center; justify-content: flex-start; gap: var(--lb-gap-4);
    margin: var(--lb-gap-3) 0 0;
    padding: var(--lb-gap-4) var(--lb-gap-5);
    border-top: 0;
    border-radius: var(--lb-radius);
    background: var(--lb-surface);
    box-shadow: var(--lb-shadow-sm);
    color: var(--lb-ink); font-weight: 600;
}
.hero-foot:hover[b-djmgchhtk0] { color: var(--lb-accent-strong); }
.hero-foot .hero-foot-ico[b-djmgchhtk0] { width: 22px; height: 22px; color: var(--lb-accent); }
.hero-foot > svg:last-child[b-djmgchhtk0] { margin-left: auto; color: var(--lb-accent); }
.hero--noart[b-djmgchhtk0] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "foot"; }

.mod[b-djmgchhtk0] {
    position: relative;
    background: color-mix(in srgb, var(--mod) 9%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--mod) 28%, var(--lb-border));
    border-radius: var(--lb-radius-lg);
}
.mod-sipka[b-djmgchhtk0] {
    position: absolute; top: var(--lb-gap-4); right: var(--lb-gap-4);
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lb-surface);
    border: 1px solid color-mix(in srgb, var(--mod) 30%, var(--lb-border));
    color: var(--mod);
}
.mod-sipka svg[b-djmgchhtk0] { width: 16px; height: 16px; }
.mod-top[b-djmgchhtk0] { padding-right: 0; }   /* šipka i ikona z dlaždic zmizely (13.10.2026) */
.mod-ico[b-djmgchhtk0] { background: color-mix(in srgb, var(--mod) 18%, var(--lb-surface)); }
.mod-eyebrow[b-djmgchhtk0] { font-family: var(--lb-font-head); font-size: var(--lb-fs-lg); font-weight: 800; letter-spacing: 0; text-transform: none; }
.mod-head[b-djmgchhtk0] { font-family: var(--lb-font-body); font-size: var(--lb-fs-md); font-weight: 600; color: var(--lb-text); }

.pcard[b-djmgchhtk0] { border-color: var(--lb-border); border-radius: var(--lb-radius-lg); }
.pcard-stat[b-djmgchhtk0] { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--lb-gap-4); text-align: left; }
.pc-ico[b-djmgchhtk0] {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lb-accent-tint);
}
.pc-txt[b-djmgchhtk0] { display: flex; flex-direction: column; gap: var(--lb-gap-0); min-width: 0; flex: 1 1 auto; }
.pc-bar[b-djmgchhtk0] { display: block; height: 6px; margin-top: var(--lb-gap-2); border-radius: var(--lb-radius-pill); background: var(--lb-accent-tint); overflow: hidden; }
.pc-bar span[b-djmgchhtk0] { display: block; height: 100%; border-radius: var(--lb-radius-pill); background: var(--lb-accent); }
.streak-flame[b-djmgchhtk0] {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--lb-sun) 16%, var(--lb-surface));
}

.tip[b-djmgchhtk0] { align-items: center; padding: var(--lb-gap-4) var(--lb-gap-5); }
.tip-body[b-djmgchhtk0] { background: none; box-shadow: none; padding: 0; position: relative; }
.tip-body[b-djmgchhtk0]::before { display: none; }
.tip-title[b-djmgchhtk0] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-lg); color: var(--lb-ink); }
.tip-text[b-djmgchhtk0] { font-size: var(--lb-fs-base); }
.tip-title[b-djmgchhtk0], .tip-text[b-djmgchhtk0] { padding-right: var(--lb-gap-11); }
.tip-cta[b-djmgchhtk0] { right: 0; width: 46px; height: 46px; }

@media (max-width: 820px) {
    .hero[b-djmgchhtk0] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "art" "foot"; }
    .hero-art[b-djmgchhtk0] { height: 200px; min-height: 0; }
    /* Pilulka přesahuje přes spodek obrázku. */
    .hero-foot[b-djmgchhtk0] { position: relative; z-index: 1; margin: calc(-1 * var(--lb-gap-8)) var(--lb-gap-3) 0; }
}
@media (max-width: 720px) {
    .mod-sipka[b-djmgchhtk0] { top: var(--lb-gap-3); right: var(--lb-gap-3); width: 1.9rem; height: 1.9rem; }
    .mod-top[b-djmgchhtk0] { padding-right: 0; }
    .pcard-stat[b-djmgchhtk0] { flex-direction: column; align-items: flex-start; gap: var(--lb-gap-2); }
    .pc-ico[b-djmgchhtk0], .streak-flame[b-djmgchhtk0] { width: 2.1rem; height: 2.1rem; }
}
@media (max-width: 560px) {
    .hero[b-djmgchhtk0] { padding: var(--lb-gap-3); }
    .hero-body[b-djmgchhtk0] { padding: var(--lb-gap-3) var(--lb-gap-3) var(--lb-gap-4); }
    .hero-art[b-djmgchhtk0] { height: 170px; }
    .mod-eyebrow[b-djmgchhtk0] { font-size: var(--lb-fs-md); }
    .mod-head[b-djmgchhtk0] { font-size: var(--lb-fs-sm); }
    .tip[b-djmgchhtk0] { padding: var(--lb-gap-3) var(--lb-gap-4); }
    .tip-title[b-djmgchhtk0] { font-size: var(--lb-fs-md); }
    .tip-text[b-djmgchhtk0] { font-size: var(--lb-fs-sm); }
    .tip-title[b-djmgchhtk0], .tip-text[b-djmgchhtk0] { padding-right: var(--lb-gap-10); }
    .tip-cta[b-djmgchhtk0] { width: 40px; height: 40px; }
}

/* Prázdný přehled a chyba načtení (05.10.2026): zelený panel jako karta lekce, Booster
   v dýmu. Dým jsou dvě rozmazané záře, zelená a fialová - na přihlášení je jen zelená
   pod kartou, tady je obláček kolem celé postavy, takže se obrazovky nepletou. */
.dash-empty[b-djmgchhtk0] {
    background: var(--lb-hero-bg);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 22%, var(--lb-border-strong));
    border-radius: var(--lb-radius-lg);
    padding: var(--lb-gap-9) var(--lb-gap-6);
    gap: var(--lb-gap-3);
}
.dash-empty h1[b-djmgchhtk0] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-3xl); }
.dash-empty p[b-djmgchhtk0] { color: var(--lb-text-secondary); margin: 0; }
.dash-empty-dym[b-djmgchhtk0] { position: relative; display: grid; place-items: center; width: 20rem; max-width: 100%; height: 15rem; margin-bottom: var(--lb-gap-2); }
.dash-empty-dym[b-djmgchhtk0]::before, .dash-empty-dym[b-djmgchhtk0]::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(14px); pointer-events: none;
}
.dash-empty-dym[b-djmgchhtk0]::before {
    inset: 8% 4% 0 4%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--lb-accent) 40%, transparent) 0%, transparent 70%);
}
.dash-empty-dym[b-djmgchhtk0]::after {
    inset: 0 26% 30% 18%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--lb-purple) 26%, transparent) 0%, transparent 70%);
}
.dash-empty-dym .dash-empty-booster[b-djmgchhtk0] {
    position: relative; z-index: 1;
    height: 14rem; width: auto; margin: 0;
    filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--lb-ink) 22%, transparent));
}
.dash-empty-cta[b-djmgchhtk0] { margin-top: var(--lb-gap-4); }

.dash-kroky[b-djmgchhtk0] {
    list-style: none; margin: var(--lb-gap-6) 0 0; padding: 0;
    width: 100%; max-width: 30rem;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lb-gap-3);
    text-align: left;
}
.dash-kroky li[b-djmgchhtk0] {
    display: flex; flex-direction: column; gap: var(--lb-gap-2);
    padding: var(--lb-gap-4);
    background: var(--lb-surface);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-xs);
    font-size: var(--lb-fs-sm); line-height: 1.35; color: var(--lb-text-secondary);
}
.dash-kroky li span[b-djmgchhtk0] {
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lb-accent-tint); color: var(--lb-accent-strong);
    font-family: var(--lb-font-head); font-weight: 800;
}
@media (max-width: 560px) {
    .dash-empty[b-djmgchhtk0] { padding: var(--lb-gap-7) var(--lb-gap-4); }
    .dash-empty h1[b-djmgchhtk0] { font-size: var(--lb-fs-2xl); }
    .dash-empty-dym[b-djmgchhtk0] { width: 16rem; height: 12.5rem; }
    .dash-empty-dym .dash-empty-booster[b-djmgchhtk0] { height: 11.5rem; }
    .dash-kroky[b-djmgchhtk0] { grid-template-columns: minmax(0, 1fr); }
    .dash-kroky li[b-djmgchhtk0] { flex-direction: row; align-items: center; gap: var(--lb-gap-3); }
    .dash-kroky li span[b-djmgchhtk0] { flex: 0 0 auto; }
}

/* Prázdný přehled ožije (05.10.2026, autor): Booster jednou poskočí a zhoupne se směrem
   k tlačítku, hned potom tlačítko krátce povyroste a vrátí se - oko jde od postavy
   k akci. Jen jednou, až je panel vidět (třída lb-pulse-go z js/pulse.js); kdo má
   omezený pohyb, třídu nedostane a nic se nehýbe. */
@keyframes dash-booster-ukaz-b-djmgchhtk0 {
    0%   { transform: translateY(0) rotate(0); }
    30%  { transform: translateY(-10px) rotate(-5deg); }
    55%  { transform: translateY(0) rotate(4deg); }
    75%  { transform: translateY(-3px) rotate(-1.5deg); }
    100% { transform: translateY(0) rotate(0); }
}
@keyframes dash-cta-pozor-b-djmgchhtk0 {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}
.dash-empty--start.lb-pulse-go .dash-empty-booster[b-djmgchhtk0] {
    transform-origin: 50% 100%;
    animation: dash-booster-ukaz-b-djmgchhtk0 .9s ease-in-out .3s both;
}
.dash-empty--start.lb-pulse-go .dash-empty-cta[b-djmgchhtk0] {
    animation: dash-cta-pozor-b-djmgchhtk0 .5s ease-in-out 1.15s;
}

/* ══ Výraznější přehled (05.10.2026, autor: „tmavá je hodně nevýrazná") ══
   Odstíny sekcí byly počítané pro světlý podklad a na tmavém skoro mizely. Ikony stojí
   v zaobleném čtverci, Opakování po splnění dne zůstává v barvě sekce (zelená je jen
   lišta - dřív zešedozelenala celá dlaždice). V tmavém motivu sytější tónování a rámečky. */
.mod-ico[b-djmgchhtk0], .pc-ico[b-djmgchhtk0], .streak-flame[b-djmgchhtk0] { border-radius: var(--lb-radius-sm); }
.mod-opakovani.mod-done[b-djmgchhtk0] { --mod: var(--lb-accent); }
.mods--predmet .mod-opakovani.mod-done[b-djmgchhtk0] { --mod: var(--lb-orange); }
/* Hotovo: pruh zůstává v barvě dlaždice (zelená vybočovala z tlumené palety) a nadpis
   oranžová je jen fajfka u „Hotovo pro dnešek" (autor 13.10.2026). */
.mod-ok[b-djmgchhtk0] { color: var(--lb-accent-strong); font-weight: 800; }

[data-theme="dark"] .mod[b-djmgchhtk0] {
    background: color-mix(in srgb, var(--mod) 24%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--mod) 65%, var(--lb-border));
}
[data-theme="dark"] .mod-ico[b-djmgchhtk0] { background: color-mix(in srgb, var(--mod) 48%, var(--lb-surface)); }
[data-theme="dark"] .mod-sipka[b-djmgchhtk0] {
    background: color-mix(in srgb, var(--mod) 30%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--mod) 70%, var(--lb-border));
}
[data-theme="dark"] .mod-stat-bar[b-djmgchhtk0] { background: color-mix(in srgb, var(--mod) 36%, transparent); }
[data-theme="dark"] .hero[b-djmgchhtk0] {
    background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-accent) 55%, var(--lb-border));
}
[data-theme="dark"] .hero-bar[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-accent) 32%, transparent); }
/* „Přehled lekcí" se na obrázku ztrácel (autor 05.10.2026): rámeček v akcentu, v tmavém
   motivu světlejší, lehce zelená výplň. */
.hero-foot[b-djmgchhtk0] { border: 1px solid color-mix(in srgb, var(--lb-accent) 35%, var(--lb-border)); }
[data-theme="dark"] .hero-foot[b-djmgchhtk0] {
    background: color-mix(in srgb, var(--lb-accent) 16%, var(--lb-surface-elevated));
    border-color: color-mix(in srgb, var(--lb-accent) 60%, var(--lb-border));
}
[data-theme="dark"] .pcard[b-djmgchhtk0] {
    background: var(--lb-surface-elevated);
    border-color: color-mix(in srgb, var(--lb-text) 20%, transparent);
}
[data-theme="dark"] .pc-ico[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-accent) 38%, var(--lb-surface)); }
[data-theme="dark"] .pc-bar[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-accent) 34%, transparent); }
[data-theme="dark"] .streak-flame[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-sun) 36%, var(--lb-surface)); }
[data-theme="dark"] .tip[b-djmgchhtk0] {
    background: var(--lb-surface-elevated);
    border-color: color-mix(in srgb, var(--lb-text) 20%, transparent);
}
[data-theme="dark"] .tip[data-due][b-djmgchhtk0] {
    background: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-surface));
    border-color: color-mix(in srgb, var(--lb-accent) 60%, var(--lb-border));
}

/* Tvůj pokrok (05.10.2026, mockup autora): u série malý popisek „Série dní" a pod ním
   velký údaj, stejně jako u ostatních karet. Lišta lekcí přes celou šířku karty (textový
   sloupec se smrskl na šířku „2 / 53" a lišta s ním). Ikony v tmavém motivu jasnější. */
.streak-txt[b-djmgchhtk0] { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.streak-lbl[b-djmgchhtk0] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.streak-txt .streak-num[b-djmgchhtk0] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-md); color: var(--lb-ink); }
.pc-txt[b-djmgchhtk0] { align-self: stretch; width: 100%; }
[data-theme="dark"] .prog-stat-ico[b-djmgchhtk0] { color: var(--lb-accent-strong); }
/* Údaje o stupeň menší a obsah karet svisle na střed (autor 05.10.2026); neaktivní dny
   série mají v tmavém motivu světlejší obrys - --lb-border-strong tam s kartou splýval. */
.pcard-stat[b-djmgchhtk0] { justify-content: center; }
.pcard-stat strong[b-djmgchhtk0] { font-size: var(--lb-fs-lg); }
.pcard[b-djmgchhtk0] { padding: var(--lb-gap-6); }
@media (max-width: 560px) {
    .pcard-stat strong[b-djmgchhtk0] { font-size: var(--lb-fs-md); }
    .pcard[b-djmgchhtk0] { padding: var(--lb-gap-5) var(--lb-gap-4); }
}
[data-theme="dark"] .wk-dot[b-djmgchhtk0] { border-color: color-mix(in srgb, var(--lb-text-muted) 70%, transparent); }

/* Stat karty na širší obrazovce (autor 07.10.2026: „vypadá divně, zvětšit a vycentrovat"):
   textový sloupec se natahoval na celou výšku i šířku karty, takže číslo sedělo nahoře
   vlevo a ikona pod ním uprostřed. Teď ikona + text jako jeden blok na středu karty, svisle
   i vodorovně; sloupec má pevnou šířku, ať má lišta lekcí kam růst. Údaj a ikona o stupeň
   větší. Úzká obrazovka (pod 720 px) si drží své sloupcové rozvržení. */
@media (min-width: 721px) {
    .pcard-stat[b-djmgchhtk0] { justify-content: center; align-items: center; gap: var(--lb-gap-5); }
    .pcard-stat .pc-txt[b-djmgchhtk0] { align-self: center; flex: 0 1 9rem; width: auto; }
    .pcard-stat strong[b-djmgchhtk0] { font-size: var(--lb-fs-2xl); }
    .pcard-stat .pc-txt > span:not(.pc-bar)[b-djmgchhtk0] { font-size: var(--lb-fs-sm); }
    .pcard-stat .pc-ico[b-djmgchhtk0] { width: 3.2rem; height: 3.2rem; }
    .pcard-stat .prog-stat-ico[b-djmgchhtk0] { width: 26px; height: 26px; }
}

/* Dlaždice odkazuje dál: nenápadná šipka vpravo dole v barvě nadpisu (autor 13.10.2026),
   místo kolečka nahoře, které zmizelo. Místo jí nechává číslo pod pruhem. */
.mod-dal[b-djmgchhtk0] {
    position: absolute; right: var(--lb-gap-4); bottom: var(--lb-gap-4);
    display: grid; place-items: center; color: var(--mod); opacity: .75;
}
.mod-dal svg[b-djmgchhtk0] { width: 18px; height: 18px; }
.mod:hover .mod-dal[b-djmgchhtk0] { opacity: 1; }
/* Místo pro šipku jen u čísla, ne v celém řádku - jinak se zkrátil pruh postupu. */
.mod-stat-val[b-djmgchhtk0] { padding-right: var(--lb-gap-7); }
/* Trochu víc vzduchu nad nadpisem dlaždice (autor 13.10.2026). */
.mod[b-djmgchhtk0] { padding-top: var(--lb-gap-6); }

/* Číslo u Boostera se při jeho poskočení krátce zvětší a vrátí (tentýž cyklus jako
   lb-tip-booster, autor 13.10.2026). */
.tip.lb-pulse-go .tip-pocet[b-djmgchhtk0] { animation: tip-pocet-puls-b-djmgchhtk0 var(--lb-tip-cyklus) ease-out var(--lb-tip-start) infinite; }
@keyframes tip-pocet-puls-b-djmgchhtk0 {
    0%, 90% { transform: scale(1); }
    93%     { transform: scale(1.25); }
    97%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .tip.lb-pulse-go .tip-pocet[b-djmgchhtk0] { animation: none; } }
[data-theme="dark"] .tip-jiny[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-surface)); }

/* Dokud je co dělat, světle broskvový pruh s tmavým textem; oranžové je jen tlačítko
   a číslo (varianta C z mockupu autora 13.10.2026 - plná oranžová moc svítila).
   Nabídka jiného kurzu je uvnitř bílý blok s jemným oranžovým obrysem. */
.tip[data-due] .tip-jiny[b-djmgchhtk0] {
    background: var(--lb-surface);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 35%, var(--lb-border-strong));
}
.tip[data-due] .tip-jiny-kurz[b-djmgchhtk0] { background: var(--lb-warm-tint); }
[data-theme="dark"] .tip[data-due] .tip-jiny[b-djmgchhtk0] { background: var(--lb-surface-elevated); }

/* Tvůj pokrok: všechny tři karty jedním rozložením (autor 13.10.2026) - nahoře ikona
   a vedle ní popisek nad údajem, dole vlastní obsah karty (dny série, pruh lekcí).
   Dřív měla série ikonu vlevo a statistiky nahoře, s popiskem pod číslem. */
.pcard-streak[b-djmgchhtk0] { justify-content: flex-start; }
.pcard-streak > .prog-week[b-djmgchhtk0], .pcard-streak > .pc-bar[b-djmgchhtk0] { margin-top: auto; }
.pcard-streak > .pc-bar[b-djmgchhtk0] { width: 100%; }
.streak-txt .streak-num[b-djmgchhtk0] { font-size: var(--lb-fs-xl); }
.streak-ico[b-djmgchhtk0] { background: var(--lb-accent-tint); color: var(--lb-accent); }
.streak-ico .prog-stat-ico[b-djmgchhtk0] { width: 20px; height: 20px; }
[data-theme="dark"] .streak-ico[b-djmgchhtk0] { background: color-mix(in srgb, var(--lb-accent) 38%, var(--lb-surface)); }

/* Údaj pod nadpisem dlaždice („94 oblastí", „Hotovo pro dnešek") stejným písmem jako popis,
   ne tučně tmavě - tmavý tučný řádek se s barevným nadpisem přetahoval (autor 13.10.2026). */
.mod-head[b-djmgchhtk0] { font-family: var(--lb-font-body); font-weight: 400; color: var(--lb-text-muted); }

/* Hlavička karet s číslem: popisek na řádku s ikonou (svisle na střed), hodnota pod nimi
   s malým odstupem (autor 13.10.2026). `display: contents` pustí popisek i hodnotu do
   mřížky hlavičky, aniž by se měnil markup. */
.pcard-stred .prog-streak[b-djmgchhtk0] { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--lb-gap-3); }
.pcard-stred .prog-streak .streak-txt[b-djmgchhtk0] { display: contents; }
.pcard-stred .prog-streak .streak-lbl[b-djmgchhtk0] { grid-column: 2; line-height: 1.2; }
.pcard-stred .prog-streak .streak-num[b-djmgchhtk0] { grid-column: 1 / -1; margin-top: var(--lb-gap-3); }
/* Série dní zůstává po staru: ikona vlevo, vedle ní popisek nad hodnotou, dny hned pod
   hlavičkou (autor 13.10.2026). */
.pcard-streak:not(.pcard-stred)[b-djmgchhtk0] { justify-content: center; }
.pcard-streak:not(.pcard-stred) > .prog-week[b-djmgchhtk0] { margin-top: 0; }
/* Karty s číslem (slova, lekce) mají obsah na středu - vodorovně i svisle; série
   s dny zůstává zarovnaná vlevo (autor 13.10.2026). */
.pcard-stred[b-djmgchhtk0] { justify-content: center; align-items: center; text-align: center; }
.pcard-stred > .pc-bar[b-djmgchhtk0] { margin-top: 0; }
.pcard-stred .prog-streak[b-djmgchhtk0] { grid-template-columns: auto auto; justify-content: center; }
.pcard-stred .prog-streak .streak-lbl[b-djmgchhtk0] { text-align: left; }
.pcard-stred .prog-streak .streak-num[b-djmgchhtk0] { justify-self: center; }

/* ── Booster mimo bublinu (zkouška, autor 14.10.2026) ──
   Pruh už není karta: Booster stojí volně na ploše stránky a mluví do bubliny vedle sebe,
   ocásek bubliny míří k němu. Barvu stavu nese bublina - broskvová, dokud dnes zbývá
   opakování, bílá po splnění. Záblesk obrysu při Boosterově poskočení jde taky na bublinu. */
.tip[b-djmgchhtk0], .tip[data-due][b-djmgchhtk0] {
    background: none; border: 0; padding: 0; box-shadow: none;
    /* Bublina odsazená od Boostera (autor 14.10.2026), ocásek mezeru přemostí. */
    align-items: center; gap: var(--lb-gap-8);
    --bublina: var(--lb-surface);
    --bublina-okraj: var(--lb-border-strong);
}
.tip[data-due][b-djmgchhtk0] {
    --bublina: var(--lb-tip-bg-silna);
    --bublina-okraj: color-mix(in srgb, var(--lb-accent) 45%, var(--lb-border-strong));
}
[data-theme="dark"] .tip[b-djmgchhtk0], [data-theme="dark"] .tip[data-due][b-djmgchhtk0] { background: none; border: 0; }
[data-theme="dark"] .tip[b-djmgchhtk0] {
    --bublina: var(--lb-surface-elevated);
    --bublina-okraj: color-mix(in srgb, var(--lb-text) 20%, var(--lb-surface-elevated));
}
[data-theme="dark"] .tip[data-due][b-djmgchhtk0] {
    --bublina: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-surface));
    --bublina-okraj: color-mix(in srgb, var(--lb-accent) 60%, var(--lb-border));
}
.tip-body[b-djmgchhtk0] {
    background: var(--bublina);
    border: 1px solid var(--bublina-okraj);
    border-radius: var(--lb-radius-lg);
    /* Vyšší bublina (autor 14.10.2026): víc vzduchu nad titulkem a pod textem. */
    padding: var(--lb-gap-7) var(--lb-gap-7);
    box-shadow: var(--lb-shadow-xs);
    outline: 2px solid transparent; outline-offset: -1px;
}
/* Ocásek ze dvou trojúhelníků: spodní v barvě obrysu, horní v barvě bubliny o pixel
   menší - obrys pak obtéká i ocásek. Míří kousek nad střed, k Boosterově hlavě. */
.tip-body[b-djmgchhtk0]::before, .tip-body[b-djmgchhtk0]::after {
    content: ""; display: block; position: absolute; top: 42%; transform: translateY(-50%);
    border-style: solid; border-color: transparent;
}
.tip-body[b-djmgchhtk0]::before { left: -19px; border-width: 12px 19px 12px 0; border-right-color: var(--bublina-okraj); }
.tip-body[b-djmgchhtk0]::after { left: -17px; border-width: 11px 18px 11px 0; border-right-color: var(--bublina); }
.tip-cta[b-djmgchhtk0] { right: var(--lb-gap-5); }
.tip.lb-pulse-go[b-djmgchhtk0] { animation: none; }
.tip.lb-pulse-go .tip-body[b-djmgchhtk0] { animation: lb-tip-okraj var(--lb-tip-cyklus) ease-in-out var(--lb-tip-start) infinite; }
@media (prefers-reduced-motion: reduce) { .tip.lb-pulse-go .tip-body[b-djmgchhtk0] { animation: none; } }
@media (max-width: 560px) {
    .tip[b-djmgchhtk0], .tip[data-due][b-djmgchhtk0] { gap: var(--lb-gap-6); }
    .tip-body[b-djmgchhtk0] { padding: var(--lb-gap-6) var(--lb-gap-5); }
    .tip-cta[b-djmgchhtk0] { right: var(--lb-gap-4); }
}

/* Dlaždice Procvičování, varianta C z mockupu autora (18.10.2026): v prvním řádku ikona
   (stejná jako ve spodní liště: Tahák lístek, Opakování šipky v kruhu), nadpis a šipka;
   pod nimi údaj, popis a lišta. Vnitřní okraj stejný ze všech stran - dřív byl text
   u boků natlačený a nahoře volný. Přebíjí starší vrstvy výš (mod-top, mod-dal v rohu). */
.mod[b-djmgchhtk0] { padding: var(--lb-gap-6) var(--lb-gap-7); gap: var(--lb-gap-2); }
.mod-radek[b-djmgchhtk0] { display: flex; align-items: center; gap: var(--lb-gap-3); min-width: 0; color: var(--mod); }
.mod-ikona[b-djmgchhtk0] { flex: 0 0 auto; display: grid; place-items: center; }
.mod-ikona svg[b-djmgchhtk0] { width: 22px; height: 22px; }
.mod-radek .mod-eyebrow[b-djmgchhtk0] { flex: 1 1 auto; min-width: 0; }
.mod-dal[b-djmgchhtk0] { position: static; flex: 0 0 auto; opacity: .8; }
.mod-stat-val[b-djmgchhtk0] { padding-right: 0; }
.mod-desc[b-djmgchhtk0] { margin-top: var(--lb-gap-1); }
@media (max-width: 720px) {
    .mod[b-djmgchhtk0] { padding: var(--lb-gap-5); }
}
@media (max-width: 560px) {
    .mod[b-djmgchhtk0] { padding: var(--lb-gap-5); }
    .mod-radek[b-djmgchhtk0] { gap: var(--lb-gap-2); }
    .mod-ikona svg[b-djmgchhtk0] { width: 19px; height: 19px; }
    .mod-dal svg[b-djmgchhtk0] { width: 16px; height: 16px; }
}
/* /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-ggihglwi6f] { --lb-section: var(--lb-purple); max-width: 760px; margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-11); }
.alert[b-ggihglwi6f] { color: var(--lb-error-text); padding: var(--lb-gap-6); }
.kor-eyebrow[b-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); margin: 0 0 var(--lb-gap-6); }

.kor-volby[b-ggihglwi6f] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-5); margin-bottom: var(--lb-gap-8); }
.kor-volba[b-ggihglwi6f] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-2); }
.kor-volba-label[b-ggihglwi6f] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-right: var(--lb-gap-1); }
.kor-chip[b-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { margin-top: var(--lb-gap-11); }
.kor-lekce-head[b-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { border-top: 2px solid var(--lb-purple-border); padding-top: var(--lb-gap-7); }
.kor-karta-title[b-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { width: 17px; height: 17px; }
.kor-pozn-label[b-ggihglwi6f] { 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-ggihglwi6f] { 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-ggihglwi6f] { outline: none; border-color: var(--lb-purple); }

.kor-souhrn[b-ggihglwi6f] { margin-top: var(--lb-gap-11); padding-top: var(--lb-gap-8); border-top: 2px solid var(--lb-purple-border); }
.kor-souhrn h2[b-ggihglwi6f] { 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-ggihglwi6f] { color: var(--lb-text-muted); font-size: var(--lb-fs-md); }
.kor-text[b-ggihglwi6f] { 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-ggihglwi6f] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-5); }
.kor-mazani[b-ggihglwi6f] { 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-85lho8lh2d] {
    max-width: 440px;
    margin: 6vh auto 0;
    padding: var(--lb-gap-8) var(--lb-gap-9) var(--lb-gap-10);
    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);
}

/* Booster vítá a rovnou mluví. Bublina stojí vlevo od něj a ocásek míří na hlavu -
   ne doprostřed postavy, kde by vypadal, jako by mluvil hrudí. Za postavou je měkká
   záře v barvě značky, aby nestála na holé ploše karty. */
.login-hero[b-85lho8lh2d] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--lb-gap-4);
    margin-bottom: var(--lb-gap-5);
}
.login-booster[b-85lho8lh2d] {
    position: relative;
    height: 190px; width: auto;
    filter: drop-shadow(0 8px 14px rgba(27,24,27,.28));
}
.login-hello-bubble[b-85lho8lh2d] {
    position: relative;
    max-width: 180px;
    margin-top: var(--lb-gap-7);
    padding: var(--lb-gap-4) var(--lb-gap-5);
    /* Booster mluví fialově jako všechny jeho tipy v appce; zelená zůstává akcím. */
    background: var(--lb-purple-bg);
    border: 1.5px solid color-mix(in srgb, var(--lb-purple) 45%, var(--lb-purple-border));
    border-radius: var(--lb-radius);
    border-top-right-radius: 6px;
    box-shadow: var(--lb-shadow-sm);
    font-size: var(--lb-fs-md);
    font-weight: 500;
    line-height: 1.35;
    color: var(--lb-text);
    text-align: left;
}
/* Ocásek: čtvereček otočený o 45°, kreslí se jen jeho horní a pravá hrana, takže
   navazuje na lem bubliny a míří k hlavě postavy. */
.login-hello-bubble[b-85lho8lh2d]::after {
    content: "";
    position: absolute;
    top: 12px; right: -8px;
    width: 13px; height: 13px;
    background: inherit;
    border: inherit;
    border-left: 0; border-bottom: 0;
    border-top-right-radius: 3px;
    transform: rotate(45deg);
}

/* Značka jako v hlavičce appky: logo s atomem + název, jen větší. */
.login-brand[b-85lho8lh2d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lb-gap-3);
    margin-bottom: var(--lb-gap-3);
}
.login-brand-icon[b-85lho8lh2d] { height: 44px; width: auto; }

/* Na úzkém displeji se bublina i s postavou nevejde vedle sebe. */
@media (max-width: 420px) {
    .login-hello-bubble[b-85lho8lh2d] { max-width: 140px; margin-top: var(--lb-gap-5); }
    .login-booster[b-85lho8lh2d] { height: 150px; }
    .login-brand-icon[b-85lho8lh2d] { height: 36px; }
}

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

/* Hlavní slovo je značka; „Přihlášení“ je jen tichý podtitul, ne druhý nadpis. */
.login-title[b-85lho8lh2d] {
    font-family: var(--lb-font-body);
    font-size: var(--lb-fs-base);
    font-weight: 500;
    text-align: center;
    color: var(--lb-text-muted);
    margin: 0 0 var(--lb-gap-8);
}

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

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

/* ::deep - input kreslí podřízená komponenta InputText, scope atribut karty nedostane. */
.login-field[b-85lho8lh2d]  .login-input {
    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-field[b-85lho8lh2d]  .login-input:focus {
    outline: none;
    border-color: var(--lb-accent);
    box-shadow: var(--lb-ring-accent);
}

.login-error[b-85lho8lh2d] {
    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-85lho8lh2d] {
    width: 100%;
    padding: var(--lb-gap-5);
    font-weight: 700;
}

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

.set-block[b-mog7oujxhl] { margin-bottom: var(--lb-gap-9); }
.set-head[b-mog7oujxhl] { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--lb-gap-5); }
.set-head h2[b-mog7oujxhl] { font-size: var(--lb-fs-xl); margin: 0; color: var(--lb-accent-strong); }
.set-add[b-mog7oujxhl] {
    font-size: var(--lb-fs-sm);
}
.set-desc[b-mog7oujxhl] { 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-mog7oujxhl] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lb-gap-4); }
.goal-opt[b-mog7oujxhl] { 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-mog7oujxhl] { border-color: var(--lb-accent-strong); }
.goal-opt.on[b-mog7oujxhl] { 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-mog7oujxhl] { font-weight: 600; font-size: var(--lb-fs-md); color: var(--lb-ink-read); }
.goal-opt.on .goal-opt-label[b-mog7oujxhl] { color: var(--lb-accent-strong); }
.goal-opt-note[b-mog7oujxhl] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
@media (max-width: 480px) { .goal-opts[b-mog7oujxhl] { grid-template-columns: 1fr; } }
.set-empty[b-mog7oujxhl] { color: var(--lb-text-secondary); }

.set-courses[b-mog7oujxhl] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.set-course[b-mog7oujxhl] {
    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-mog7oujxhl] { background: var(--lb-warm-tint); border-color: var(--lb-warm-border); }
.set-flag[b-mog7oujxhl] { font-size: var(--lb-fs-4xl); line-height: 1; }
.set-course-body[b-mog7oujxhl] { flex: 1; }
.set-course-title[b-mog7oujxhl] { font-weight: 700; color: var(--lb-ink-read); }
.set-course-sub[b-mog7oujxhl] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); }
.set-progress-bar[b-mog7oujxhl] { 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-mog7oujxhl] { height: 100%; background: var(--lb-accent-strong); border-radius: var(--lb-radius-pill); }
.set-progress-pct[b-mog7oujxhl] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); }
.set-badge[b-mog7oujxhl] { 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-mog7oujxhl] { 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-mog7oujxhl] { border-color: var(--lb-accent-strong); color: var(--lb-accent-strong); }
.set-course-actions[b-mog7oujxhl] { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lb-gap-2); }
.set-remove[b-mog7oujxhl] { 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-mog7oujxhl] { color: var(--lb-error-text); }
.set-remove-confirm[b-mog7oujxhl] { 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-mog7oujxhl] {
    color: var(--lb-error-text);
}
.set-remove-no[b-mog7oujxhl] {
    color: var(--lb-text-muted);
}
/* „Učení přes jiný jazyk" — label + combo s vlaječkami */
.set-cross-row[b-mog7oujxhl] { display: flex; align-items: center; gap: var(--lb-gap-3); margin-top: var(--lb-gap-4); flex-wrap: wrap; }
.set-cross-lbl[b-mog7oujxhl] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.cross-picker[b-mog7oujxhl] { position: relative; }
.cross-btn[b-mog7oujxhl] { 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-mog7oujxhl], .cross-btn.on[b-mog7oujxhl] { border-color: var(--lb-accent-strong); }
.cross-btn .cross-off[b-mog7oujxhl] { color: var(--lb-text-muted); font-weight: 600; }
.cross-caret[b-mog7oujxhl] { width: 15px; height: 15px; color: var(--lb-text-muted); }
.cross-menu[b-mog7oujxhl] { 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-mog7oujxhl] { 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-mog7oujxhl] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-opt.on[b-mog7oujxhl] { background: var(--lb-error-bg); color: var(--lb-accent-strong); font-weight: 700; }
.cross-btn[b-mog7oujxhl]  .lb-flag, .cross-opt[b-mog7oujxhl]  .lb-flag { width: 20px; height: 14px; border-radius: var(--lb-radius-2xs); overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.cross-btn[b-mog7oujxhl]  .lb-flag svg, .cross-opt[b-mog7oujxhl]  .lb-flag svg { width: 100%; height: 100%; display: block; }

/* plná imerze — přepínač na konci menu */
.cross-sep[b-mog7oujxhl] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.cross-full[b-mog7oujxhl] { 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-mog7oujxhl] { background: var(--lb-warm-tint); }
.cross-full-txt[b-mog7oujxhl] { 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-mog7oujxhl] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 400; }
.cross-full.on .cross-full-txt[b-mog7oujxhl] { color: var(--lb-accent-strong); font-weight: 700; }
.cross-toggle[b-mog7oujxhl] { 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-mog7oujxhl] { background: var(--lb-accent-strong); }
.cross-knob[b-mog7oujxhl] { 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-mog7oujxhl] { transform: translateX(14px); }

/* ── Hlasy: radek = role, vyber hlasu, zkouska ─────────────────────────── */
.voice-rows[b-mog7oujxhl] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.voice-row[b-mog7oujxhl] {
    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-mog7oujxhl] { display: flex; flex-direction: column; min-width: 9rem; flex: 1 1 9rem; }
.voice-role-name[b-mog7oujxhl] { font-weight: 600; color: var(--lb-text); }
.voice-role-note[b-mog7oujxhl] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); }
.voice-select[b-mog7oujxhl] {
    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-mog7oujxhl] {
    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-mog7oujxhl] { 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-mog7oujxhl] { font-style: italic; margin-top: var(--lb-gap-4); }
.voice-prefill[b-mog7oujxhl] { flex: 0 0 auto; font-size: var(--lb-fs-base); padding: var(--lb-gap-2) var(--lb-gap-5); }

/* Záložky nastavení (autor 18.10.2026): pilulky jako výběr v Opakování, aktivní v akcentu. */
.set-tabs[b-mog7oujxhl] { display: flex; gap: var(--lb-gap-2); flex-wrap: wrap; margin: calc(-1 * var(--lb-gap-4)) 0 var(--lb-gap-8); }
.set-tab[b-mog7oujxhl] {
    padding: var(--lb-gap-3) var(--lb-gap-6); border-radius: var(--lb-radius-pill);
    border: 1px solid var(--lb-border); background: var(--lb-surface);
    color: var(--lb-text-secondary); font-weight: 600; font-size: var(--lb-fs-md); text-decoration: none;
}
.set-tab:hover[b-mog7oujxhl] { border-color: var(--lb-accent); color: var(--lb-accent-strong); }
.set-tab.on[b-mog7oujxhl] { background: var(--lb-accent); border-color: var(--lb-accent); color: var(--lb-on-accent); }

/* Diagnostika: řádky nástrojů, popis vlevo, akce vpravo (na telefonu pod popisem). */
.diag-list[b-mog7oujxhl] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.diag-item[b-mog7oujxhl] {
    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-sm);
    padding: var(--lb-gap-5) var(--lb-gap-7);
}
.diag-body[b-mog7oujxhl] { flex: 1; min-width: 0; }
.diag-title[b-mog7oujxhl] { font-weight: 700; color: var(--lb-ink-read); }
.diag-desc[b-mog7oujxhl] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); line-height: 1.45; }
.diag-confirm[b-mog7oujxhl] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-3); margin-top: var(--lb-gap-4); font-size: var(--lb-fs-sm); color: var(--lb-text); }
.diag-danger[b-mog7oujxhl] { color: var(--lb-error-text); border-color: var(--lb-error-border); }
.diag-item a.lb-btn[b-mog7oujxhl] { text-decoration: none; }
.diag-danger:hover:not(:disabled)[b-mog7oujxhl] { background: var(--lb-error-bg); color: var(--lb-error-text); border-color: var(--lb-error-border); }
@media (max-width: 480px) {
    .diag-item[b-mog7oujxhl] { flex-direction: column; align-items: stretch; }
}
/* /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-ekiyx3blva], .oblast[b-ekiyx3blva] { --lb-section: var(--lb-mod-oblasti); --lb-section-gradient: var(--lb-cta-gradient); margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.alert[b-ekiyx3blva] { color: var(--lb-error); }

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

/* Filtry stavu - vzhled filtrů lekcí (PrehledLekci.razor.css, autor 08.10.2026): ikona,
   popisek a počet, aktivní s okrajem v akcentu a nádechem, tři v řadě. */
.dm-filters[b-ekiyx3blva] { display: grid; grid-template-columns: repeat(3, minmax(0, 9.5rem)); gap: var(--lb-gap-3); margin-bottom: var(--lb-gap-5); }
.dm-filters.dm-tags[b-ekiyx3blva] { margin-bottom: var(--lb-gap-8); }
.lf[b-ekiyx3blva] {
    display: flex; align-items: center; gap: var(--lb-gap-1); min-width: 0;
    background: var(--lb-surface); border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius-pill); padding: var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-3);
    font: inherit; font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text);
    cursor: pointer; transition: all .12s;
}
.lf:hover[b-ekiyx3blva] { border-color: var(--lb-accent); }
.lf.lf-on[b-ekiyx3blva] { background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface)); border-color: var(--lb-accent); }
.dm-filters .lf-ico[b-ekiyx3blva] { flex: 0 0 auto; display: grid; place-items: center; color: var(--lb-text-muted); }
.dm-filters .lf-ico[b-ekiyx3blva]  svg { width: 18px; height: 18px; }
.lf-vse .lf-ico[b-ekiyx3blva], .lf-rozdelane .lf-ico[b-ekiyx3blva] { color: var(--lb-accent); }
.lf-hotove .lf-ico[b-ekiyx3blva] { color: var(--lb-success-text); }
.lf-txt[b-ekiyx3blva] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-pocet[b-ekiyx3blva] {
    margin-left: auto; flex: 0 0 auto;
    min-width: 1.5rem; padding: var(--lb-gap-0) var(--lb-gap-1);
    border-radius: var(--lb-radius-pill); text-align: center;
    background: var(--lb-warm-tint-2); color: var(--lb-text-secondary);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.lf-on .lf-pocet[b-ekiyx3blva] { background: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-surface)); color: var(--lb-accent-strong); }
.lf.lf-tag[b-ekiyx3blva] { font-size: var(--lb-fs-sm); padding: var(--lb-gap-1) var(--lb-gap-5); }

.dm-series[b-ekiyx3blva] { margin-bottom: var(--lb-gap-8); }
.dm-cards[b-ekiyx3blva] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-5); }
.dm-card[b-ekiyx3blva] {
    display: flex; align-items: center; gap: var(--lb-gap-5); text-align: left;
    background: var(--lb-surface); border: 1px solid var(--lb-tile-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; min-width: 16rem; flex: 1 1 18rem;
    box-shadow: var(--lb-shadow-sm);   /* karta jako karta slovíčka - jinak splývala (08.10.2026) */
}
.dm-card:hover[b-ekiyx3blva] { border-color: var(--lb-accent); }

/* ── kruhová „placka" série + písmeno dílu ── */
.dm-badge[b-ekiyx3blva] {
    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-ekiyx3blva] { 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-ekiyx3blva]::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%);
}
/* Bez obrázku není co podkládat - kruh dostane plnou barvu série. */
.dm-badge--noimg[b-ekiyx3blva] { background: var(--dm-part, var(--lb-accent)); }
.dm-badge--lg[b-ekiyx3blva] { width: 96px; height: 96px; }

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

.dm-check[b-ekiyx3blva] {
    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-ekiyx3blva] { color: var(--lb-green-vivid); font-weight: 700; }

.dm-body[b-ekiyx3blva] { display: flex; flex-direction: column; gap: var(--lb-gap-1); min-width: 0; flex: 1; }
.dm-title[b-ekiyx3blva] { font-weight: 600; font-size: var(--lb-fs-lg); color: var(--lb-text); }
.dm-meta[b-ekiyx3blva] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); }
.dm-bar[b-ekiyx3blva] {
    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-ekiyx3blva] { display: block; height: 100%; background: var(--lb-accent); }

/* ── detail oblasti ── */
.dm-intro[b-ekiyx3blva] { padding-top: var(--lb-gap-3); }
/* Panel úvodu: hlavička nahoře, pod čarou co oblast naučí a postup. */
.dm-intro-panel[b-ekiyx3blva] {
    background: var(--lb-surface); border: 1.5px solid var(--lb-tile-border); border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-sm); padding: var(--lb-gap-6); margin-bottom: var(--lb-gap-7);
}
.dm-intro-panel > :last-child[b-ekiyx3blva] { margin-bottom: 0; }
.dm-intro-panel .dm-progress[b-ekiyx3blva] { margin-top: var(--lb-gap-5); }
.dm-hero[b-ekiyx3blva] { display: flex; align-items: center; gap: var(--lb-gap-7); }
.dm-hero-txt[b-ekiyx3blva] { min-width: 0; }
.dm-hero-txt .ph-title[b-ekiyx3blva] { margin-bottom: var(--lb-gap-0); }
.dm-hero-txt .sub[b-ekiyx3blva] { color: var(--lb-text-muted); margin: 0; font-size: var(--lb-fs-md); }
.dm-skills[b-ekiyx3blva] { margin-top: var(--lb-gap-6); padding-top: var(--lb-gap-5); border-top: 1px solid var(--lb-border); }
.dm-skills h2[b-ekiyx3blva] {
    font-size: var(--lb-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--lb-mod-oblasti-text); margin: 0 0 var(--lb-gap-3);
}
.dm-skills ul[b-ekiyx3blva] { margin: 0; padding-left: var(--lb-gap-6); color: var(--lb-text); font-size: var(--lb-fs-md); }
.dm-skills li[b-ekiyx3blva] { margin-bottom: var(--lb-gap-2); }
.dm-skills li[b-ekiyx3blva]::marker { content: "✓  "; color: var(--lb-mod-oblasti); font-weight: 700; }
.dm-progress[b-ekiyx3blva] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); margin: 0 0 var(--lb-gap-1); }
.dm-note[b-ekiyx3blva] { 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-ekiyx3blva] { font-size: var(--lb-fs-2xl); color: var(--lb-accent-strong); margin: 0 0 var(--lb-gap-4); }


.card-nav[b-ekiyx3blva] { display: flex; justify-content: center; gap: var(--lb-gap-5); margin-top: var(--lb-gap-8); flex-wrap: wrap; }
.skip[b-ekiyx3blva] { 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-ekiyx3blva] { color: var(--lb-accent); text-decoration: underline; }

.finish[b-ekiyx3blva] { text-align: center; padding-top: var(--lb-gap-8); }
.finish .dm-bar[b-ekiyx3blva] { max-width: 22rem; margin: 0 auto; }
.dm-bar-radek[b-ekiyx3blva] { display: flex; align-items: center; gap: var(--lb-gap-4); width: 100%; max-width: 26rem; margin: 0 auto; }
.dm-bar-radek .dm-bar[b-ekiyx3blva] { flex: 1 1 auto; max-width: none; margin: 0; }
.dm-bar-cislo[b-ekiyx3blva] { font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 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. */
/* Kde student je (vrstva / téma) - místo drobečků; „← Zpět" dole vlevo (08.10.2026). */
.dm-misto[b-ekiyx3blva] { margin: var(--lb-gap-5) 0 var(--lb-gap-4); font-family: var(--lb-font-head); font-size: var(--lb-fs-xl); color: var(--lb-ink); }

.dm-topics[b-ekiyx3blva] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-4); margin-bottom: var(--lb-gap-8); }

/* 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-ekiyx3blva] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lb-gap-4); margin-bottom: var(--lb-gap-8); }
@media (max-width: 720px) { .dm-topics[b-ekiyx3blva] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .dm-topics[b-ekiyx3blva] { grid-template-columns: 1fr; } }

.dm-kinds[b-ekiyx3blva] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .dm-kinds[b-ekiyx3blva] { 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-ekiyx3blva] { 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-ekiyx3blva] { 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-ekiyx3blva] { display: none; }
.dm-kind-ico--noimg svg[b-ekiyx3blva] { display: block; width: 60%; height: 60%; }
.dm-topic[b-ekiyx3blva] {
    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;
    /* Výraznější rámeček dlaždice (autor 08.10.2026) - slabá linka s pozadím splývala. */
    border: 1px solid var(--lb-tile-border); border-radius: var(--lb-radius-sm);
    background: var(--lb-surface); color: inherit; font: inherit;
    box-shadow: var(--lb-shadow-sm);   /* karta jako karta slovíčka - jinak splývala (08.10.2026) */
    transition: border-color .12s, transform .12s;
}
.dm-topic:hover[b-ekiyx3blva] { border-color: var(--lb-accent); transform: translateY(-1px); }
.dm-topic-ico[b-ekiyx3blva] {
    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-ekiyx3blva] { 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-ekiyx3blva] { background: color-mix(in srgb, var(--lb-accent) 30%, var(--lb-surface)); }
.dm-topic-txt[b-ekiyx3blva] { display: flex; flex-direction: column; gap: var(--lb-gap-0); min-width: 0; }
.dm-topic-title[b-ekiyx3blva] { font-weight: 600; }
.dm-topic .dm-meta[b-ekiyx3blva] { 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-ekiyx3blva] { 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-ekiyx3blva] { position: relative; }
.dm-dot[b-ekiyx3blva] {
    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-ekiyx3blva] {
    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-ekiyx3blva] {
    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-ekiyx3blva] { background: var(--lb-success); }

/* Dlaždice vrstvy (08.10.2026): „Slovní zásoba 1 · Základní". Číslo je název, slovní
   popisek tišeji; stav vrstvy (hotová / rozdělaná / nezačatá) v barvě stavu, aby byl vidět
   bez klikání dovnitř. */
.dm-layer-pop[b-ekiyx3blva] { font-weight: 500; color: var(--lb-text-secondary); }
.dm-layer-stav[b-ekiyx3blva] { font-weight: 600; }
.dm-kind.dm-rozdelano .dm-layer-stav[b-ekiyx3blva] { color: var(--lb-accent); }
.dm-kind.dm-hotovo .dm-layer-stav[b-ekiyx3blva] { color: var(--lb-success-text); }
/* Vrstva nad názvem dílu na jeho úvodu - kde v oblastech student je. */
.dm-hero-vrstva[b-ekiyx3blva] {
    display: block; font-size: var(--lb-fs-sm); font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--lb-text-muted); margin-bottom: var(--lb-gap-1);
}
.dm-dalsi-vrstva[b-ekiyx3blva] { justify-content: center; margin-top: var(--lb-gap-5); }

/* ── Hlavicka oblasti: kroky vlevo, postup celou oblasti vpravo ──────────── */
.dm-head[b-ekiyx3blva] { 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-ekiyx3blva] { flex: 1 1 16rem; }
/* Celek tise: cislo vlevo je to, co se meni. */
.dm-postup[b-ekiyx3blva] { flex: 1 1 100%; --lb-postup: var(--lb-mod-oblasti); }

/* ── Dlaždice tématu podle návrhu autora (08.10.2026) ─────────────────────── */
.dm-topic[b-ekiyx3blva] { align-items: flex-start; border-width: 1.5px; border-radius: var(--lb-radius); padding: var(--lb-gap-5); }
.dm-topic .dm-topic-txt[b-ekiyx3blva] { flex: 1 1 auto; gap: var(--lb-gap-1); }
.dmt-hlava[b-ekiyx3blva] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lb-gap-2); }
.dmt-hlava .dm-topic-title[b-ekiyx3blva] { font-weight: 700; color: var(--lb-ink); }
.dmt-sipka[b-ekiyx3blva] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--lb-accent); margin-top: .1em; }
.dmt-bar[b-ekiyx3blva] { margin-top: var(--lb-gap-2); }
.dmt-bar > span[b-ekiyx3blva] { background: var(--lb-mod-oblasti); }   /* barva sekce, ne zelená (autor 08.10.2026) */
.dmt-pocet[b-ekiyx3blva] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }

/* Podrobný filtr vpravo, s ikonou posuvníků a šipkou dolů (návrh 08.10.2026). */
.lf.lf-more[b-ekiyx3blva] { margin-left: auto; display: inline-flex; align-items: center; gap: var(--lb-gap-2); }
.lf-ico[b-ekiyx3blva] { width: 1.05rem; height: 1.05rem; }
.lf-chev[b-ekiyx3blva] { width: .95rem; height: .95rem; transition: transform .15s; }
.lf-chev-on[b-ekiyx3blva] { transform: rotate(180deg); }

/* Kde student je: nadpis vrstvy / tématu se zvýrazňovačem pod textem (návrh 08.10.2026).
   Hlavní nadpis „Oblasti" zůstává bez něj. */
.dm-misto[b-ekiyx3blva] {
    display: inline-block; font-weight: 800;
    margin-top: var(--lb-gap-2);   /* blíž k úvodu stránky (autor 08.10.2026) */
    /* Zarovnaný s obsahem sekce; pod textem silné podtržení fixou (autor 08.10.2026). */
    padding: 0 var(--lb-gap-1);
    background: linear-gradient(transparent 66%, color-mix(in srgb, var(--lb-accent) 35%, transparent) 66%,
                                color-mix(in srgb, var(--lb-accent) 35%, transparent) 94%, transparent 94%);
    border-radius: var(--lb-radius-xs);
}

/* Na užší obrazovce dostane název tématu celou šířku dlaždice (autor 08.10.2026): obrázek
   jde dolů doprava vedle ukazatele a počtu položek, které jsou krátké, šipka do rohu.
   Dlouhé názvy (němčina) se pak zalomí až výjimečně. */
.dm-topic[b-ekiyx3blva] { position: relative; }
@media (max-width: 900px) {
    .dm-topic[b-ekiyx3blva] { padding: var(--lb-gap-4); }
    .dm-topic .dm-topic-ico[b-ekiyx3blva] {
        position: absolute; right: var(--lb-gap-4); bottom: var(--lb-gap-4);
        width: 46px; height: 46px;
    }
    .dmt-hlava[b-ekiyx3blva] { padding-right: var(--lb-gap-5); }
    .dmt-hlava .dm-topic-title[b-ekiyx3blva] { font-size: var(--lb-fs-md); }
    .dmt-sipka[b-ekiyx3blva] { position: absolute; top: var(--lb-gap-4); right: var(--lb-gap-3); }
    .dm-topic .dm-meta[b-ekiyx3blva] { font-size: var(--lb-fs-sm); }
    .dmt-bar[b-ekiyx3blva], .dmt-pocet[b-ekiyx3blva] { margin-right: calc(46px + var(--lb-gap-4)); }
}

/* /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-gits3xthqr] { width: 108px; align-self: stretch; flex: 0 0 auto; object-fit: contain; object-position: center; background: var(--lb-paper-warm); }
.lc-num[b-gits3xthqr] { font-size: var(--lb-fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); }
.lc-title[b-gits3xthqr] { 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-gits3xthqr] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-0); }

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

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


/* Filtry (05.10.2026, mockup autora): ikona, popisek a počet lekcí, na telefonu tři v řadě (užší dva). Aktivní
   má okraj v akcentu a nádech; ikona nese barvu stavu (hotové zelená, zamčené šedá). */
.lekce-filters[b-gits3xthqr] { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.75rem, 1fr)); gap: var(--lb-gap-3); }
.lf[b-gits3xthqr] {
    display: flex; align-items: center; gap: var(--lb-gap-1); min-width: 0;
    background: var(--lb-surface); border: 1.5px solid var(--lb-border);
    border-radius: var(--lb-radius-pill); padding: var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-2) var(--lb-gap-3);
    font: inherit; font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text);
    cursor: pointer; transition: all .12s;
}
.lf:hover[b-gits3xthqr] { border-color: var(--lb-accent); }
.lf-on[b-gits3xthqr] { background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface)); border-color: var(--lb-accent); }
.lf-ico[b-gits3xthqr] { flex: 0 0 auto; display: grid; place-items: center; color: var(--lb-text-muted); }
.lf-ico[b-gits3xthqr]  svg { width: 18px; height: 18px; }
.lf-all .lf-ico[b-gits3xthqr], .lf-available .lf-ico[b-gits3xthqr] { color: var(--lb-accent); }
.lf-done .lf-ico[b-gits3xthqr] { color: var(--lb-success-text); }
.lf-available .lf-ico[b-gits3xthqr]  svg { fill: currentColor; }
.lf-txt[b-gits3xthqr] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-pocet[b-gits3xthqr] {
    margin-left: auto; flex: 0 0 auto;
    min-width: 1.5rem; padding: var(--lb-gap-0) var(--lb-gap-1);
    border-radius: var(--lb-radius-pill); text-align: center;
    background: var(--lb-warm-tint-2); color: var(--lb-text-secondary);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.lf-on .lf-pocet[b-gits3xthqr] { background: color-mix(in srgb, var(--lb-accent) 22%, var(--lb-surface)); color: var(--lb-accent-strong); }

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

.lcard[b-gits3xthqr] { --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-gits3xthqr], .lcard-avail:hover[b-gits3xthqr] { transform: translateY(-2px); box-shadow: var(--lb-shadow-md); }
/* Hotová lekce tlumeně (05.10.2026, autor: „zelená u hotových lekcí strašně svítí"):
   šedozelená, oko patří lekci, která je na řadě. */
.lcard-done[b-gits3xthqr] { --st: color-mix(in srgb, var(--lb-success) 45%, var(--lb-text-muted)); }
.lcard-avail[b-gits3xthqr] { --st: var(--lb-accent); border: 1.5px solid var(--lb-accent); } /* lekce na řadě: rámeček jako aktivní filtr */
.lcard-locked[b-gits3xthqr] { --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-gits3xthqr] { 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-gits3xthqr], .lcard-locked .lc-main[b-gits3xthqr] { opacity: .5; transition: opacity .12s; }
.lcard-unlocking .lc-thumb-wrap[b-gits3xthqr], .lcard-unlocking .lc-main[b-gits3xthqr] { opacity: 1; }

/* Aktivní odemykací tlačítko (oranžové) na konci zamčené karty */
.lc-unlock-trigger[b-gits3xthqr] { 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-gits3xthqr] { background: color-mix(in srgb, var(--lb-accent) 26%, transparent); }
.lc-unlock-trigger svg[b-gits3xthqr] { width: 18px; height: 18px; }

.lc-unlock[b-gits3xthqr] { display: flex; gap: var(--lb-gap-2); flex-wrap: wrap; margin-top: var(--lb-gap-2); }
.lc-unlock-btn[b-gits3xthqr] { 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-gits3xthqr] { background: transparent; border: 1px solid var(--lb-border-strong); color: var(--lb-text-secondary); }
.lc-unlock-btn:hover[b-gits3xthqr] { filter: brightness(1.05); }

.lc-thumb-wrap[b-gits3xthqr] { 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-gits3xthqr] { 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-gits3xthqr] { width: 100%; height: 100%; object-fit: cover; background: none; }
.lcard-locked .lc-thumb[b-gits3xthqr] { filter: grayscale(0.6); }

.lc-main[b-gits3xthqr] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-0); }
.lc-top[b-gits3xthqr] { display: flex; align-items: center; gap: var(--lb-gap-3); }
.lcard .lc-num[b-gits3xthqr] { 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-gits3xthqr] { 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-gits3xthqr] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin: 0; }
.lc-status[b-gits3xthqr] { 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-gits3xthqr] { width: 15px; height: 15px; }

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

@media (max-width: 720px) {
    .lekce-grid[b-gits3xthqr] { grid-template-columns: 1fr; }
    .lekce-head[b-gits3xthqr] { flex-direction: column; align-items: flex-start; }
}
/* Postup knihy pod nadpisem přes celou šířku (05.10.2026, dřív karta s kroužkem vpravo). */
.lekce-postup[b-gits3xthqr] { flex: 1 1 100%; }
/* /Pages/Progress.razor.rz.scp.css */
/* Pokrok (docs/zadani-pokrok.md). Karty jako na dashboardu (plocha, silnější linka, jemný
   stín); na telefonu jeden sloupec, od 900 px dva. Barvy pásem a kalendáře jsou role
   z palety v app.css (--lb-band-*, --lb-heat-*), tady jen rozmístění. */

.pokrok[b-ntvj61bwkc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lb-gap-5);
    max-width: 960px;
}

.pk-head h1[b-ntvj61bwkc] { margin: 0; font-size: var(--lb-fs-4xl); font-weight: 800; }
.pk-course[b-ntvj61bwkc] {
    display: flex; align-items: center; gap: var(--lb-gap-2);
    margin: var(--lb-gap-1) 0 0; color: var(--lb-text-secondary); font-weight: 600;
}
.pk-flag[b-ntvj61bwkc] { display: inline-flex; width: 1.4rem; }

.pk-loading[b-ntvj61bwkc] { color: var(--lb-text-muted); font-style: italic; }

.pk-card[b-ntvj61bwkc] {
    background: var(--lb-surface);
    border: 1px solid var(--lb-border-strong);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-xs);
    padding: var(--lb-gap-6) var(--lb-gap-7);
    min-width: 0;
}
.pk-error[b-ntvj61bwkc] { color: var(--lb-error-text); }

.pk-title[b-ntvj61bwkc] { margin: 0 0 var(--lb-gap-4); font-size: var(--lb-fs-xl); font-weight: 800; }
.pk-subtitle[b-ntvj61bwkc] { margin: var(--lb-gap-7) 0 var(--lb-gap-3); font-size: var(--lb-fs-lg); font-weight: 700; }
.pk-muted[b-ntvj61bwkc] { margin: 0; color: var(--lb-text-muted); }
.pk-hint[b-ntvj61bwkc] { margin: var(--lb-gap-4) 0 var(--lb-gap-3); font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.pk-actions[b-ntvj61bwkc] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); margin-top: var(--lb-gap-6); }
.pk-actions .lb-btn[b-ntvj61bwkc] { text-decoration: none; }

/* ── Slovní zásoba ── */
.pk-eyebrow[b-ntvj61bwkc] {
    font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--lb-success-text);
}
.pk-big-row[b-ntvj61bwkc] { display: flex; align-items: baseline; gap: var(--lb-gap-3); flex-wrap: wrap; }
.pk-big[b-ntvj61bwkc] { font-family: var(--lb-font-head); font-size: var(--lb-fs-hero); font-weight: 800; line-height: 1.05; color: var(--lb-ink); }
.pk-big-unit[b-ntvj61bwkc] { font-size: var(--lb-fs-lg); color: var(--lb-text-secondary); font-weight: 600; }

.pk-bands[b-ntvj61bwkc] {
    display: flex; gap: 2px;
    height: 14px; margin-top: var(--lb-gap-5);
    border-radius: var(--lb-radius-pill); overflow: hidden;
    background: var(--lb-heat-0);
}
.pk-band[b-ntvj61bwkc] { flex-basis: 0; min-width: 4px; }
.band-new[b-ntvj61bwkc] { background: var(--lb-band-new); }
.band-learning[b-ntvj61bwkc] { background: var(--lb-band-learning); }
.band-known[b-ntvj61bwkc] { background: var(--lb-band-known); }
.band-solid[b-ntvj61bwkc] { background: var(--lb-band-solid); }

.pk-legend[b-ntvj61bwkc] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lb-gap-2) var(--lb-gap-6);
    list-style: none; margin: var(--lb-gap-5) 0 0; padding: 0;
    font-size: var(--lb-fs-md); color: var(--lb-text-secondary);
}
.pk-legend li[b-ntvj61bwkc] { display: flex; align-items: center; gap: var(--lb-gap-2); }
.pk-legend strong[b-ntvj61bwkc] { margin-left: auto; color: var(--lb-ink); font-variant-numeric: tabular-nums; }
.pk-dot[b-ntvj61bwkc] { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.pk-deltas[b-ntvj61bwkc] {
    list-style: none; margin: var(--lb-gap-3) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--lb-gap-2) var(--lb-gap-5);
    font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-text-secondary);
}
.pk-delta-good[b-ntvj61bwkc] { color: var(--lb-success-text); }

/* ── Co tě čeká ── */
.pk-today[b-ntvj61bwkc] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lb-gap-4); }
.pk-today-label[b-ntvj61bwkc] { color: var(--lb-text-secondary); font-weight: 600; }
.pk-today-num[b-ntvj61bwkc] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); font-variant-numeric: tabular-nums; }

.pk-bar[b-ntvj61bwkc] {
    display: block; height: 6px; margin-top: var(--lb-gap-2);
    border-radius: var(--lb-radius-pill); background: var(--lb-accent-tint); overflow: hidden;
}
.pk-bar span[b-ntvj61bwkc] { display: block; height: 100%; border-radius: var(--lb-radius-pill); background: var(--lb-accent); }

.pk-forecast[b-ntvj61bwkc] {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--lb-gap-3); align-items: end;
}
.pk-fc-col[b-ntvj61bwkc] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-1); min-width: 0; }
.pk-fc-num[b-ntvj61bwkc] { font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-ink); min-height: 1.2em; font-variant-numeric: tabular-nums; }
.pk-fc-bar[b-ntvj61bwkc] {
    display: flex; align-items: flex-end;
    width: 100%; max-width: 34px; height: 72px;
    border-radius: var(--lb-radius-xs); background: var(--lb-heat-0); overflow: hidden;
}
.pk-fc-bar span[b-ntvj61bwkc] { display: block; width: 100%; background: var(--lb-mod-opakovani); border-radius: var(--lb-radius-xs) var(--lb-radius-xs) 0 0; }
.pk-fc-day[b-ntvj61bwkc] { font-size: var(--lb-fs-xs); font-weight: 700; color: var(--lb-text-muted); white-space: nowrap; }
.pk-fc-day.is-today[b-ntvj61bwkc] { color: var(--lb-accent); }

/* ── Jak ti to jde ── */
.pk-stats[b-ntvj61bwkc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lb-gap-4); }
.pk-stat[b-ntvj61bwkc] {
    display: flex; flex-direction: column; gap: var(--lb-gap-1);
    padding: var(--lb-gap-5); border-radius: var(--lb-radius-sm); background: var(--lb-warm-tint);
}
.pk-stat strong[b-ntvj61bwkc] { font-family: var(--lb-font-head); font-size: var(--lb-fs-4xl); line-height: 1.05; color: var(--lb-ink); }
.pk-stat span[b-ntvj61bwkc] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); font-weight: 600; }
.pk-trend[b-ntvj61bwkc] { font-size: var(--lb-fs-xs); font-weight: 700; color: var(--lb-text-muted); }
.pk-trend.is-up[b-ntvj61bwkc] { color: var(--lb-success-text); }
.pk-trend.is-down[b-ntvj61bwkc] { color: var(--lb-error-text); }

.pk-words[b-ntvj61bwkc] { list-style: none; margin: 0; padding: 0; }
.pk-words li[b-ntvj61bwkc] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--lb-gap-1) var(--lb-gap-3);
    padding: var(--lb-gap-3) 0; border-bottom: 1px solid var(--lb-border);
}
.pk-words li:last-child[b-ntvj61bwkc] { border-bottom: 0; }
.pk-word[b-ntvj61bwkc] { font-weight: 800; color: var(--lb-ink); }
.pk-gloss[b-ntvj61bwkc] { color: var(--lb-text-secondary); }
.pk-hard[b-ntvj61bwkc] {
    font-size: var(--lb-fs-xs); font-weight: 700; color: var(--lb-hint-text);
    background: var(--lb-hint-bg); border-radius: var(--lb-radius-pill); padding: 0 var(--lb-gap-2);
}
.pk-fails[b-ntvj61bwkc] { margin-left: auto; font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-error-text); white-space: nowrap; }

/* ── Pravidelnost ── */
.pk-streak[b-ntvj61bwkc] { display: flex; align-items: center; gap: var(--lb-gap-3); }
.pk-flame[b-ntvj61bwkc] {
    width: 2.4rem; height: 2.4rem; border-radius: var(--lb-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--lb-accent-tint); font-size: var(--lb-fs-xl);
}
.pk-streak-txt[b-ntvj61bwkc] { display: flex; flex-direction: column; }
.pk-streak-lbl[b-ntvj61bwkc] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); font-weight: 600; }
.pk-streak-txt strong[b-ntvj61bwkc] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }

/* Mřížka týdnů: sloupec = týden, řádek = den (pondělí nahoře). Buňka drží čtverec a šířku
   bere ze sloupce, takže 12 až 13 týdnů se vejde i na 320 px. */
.pk-cal[b-ntvj61bwkc] {
    display: grid;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 22px);
    gap: 3px;
}
.pk-cell[b-ntvj61bwkc] { display: block; aspect-ratio: 1; border-radius: var(--lb-radius-2xs); background: var(--lb-heat-0); }
.pk-cell.heat-1[b-ntvj61bwkc] { background: var(--lb-heat-1); }
.pk-cell.heat-2[b-ntvj61bwkc] { background: var(--lb-heat-2); }
.pk-cell.is-future[b-ntvj61bwkc] { background: transparent; }
.pk-cell.is-today[b-ntvj61bwkc] { box-shadow: var(--lb-ring-accent); }

.pk-cal-legend[b-ntvj61bwkc] {
    display: flex; align-items: center; gap: 3px; margin-top: var(--lb-gap-3);
    font-size: var(--lb-fs-xs); color: var(--lb-text-muted);
}
.pk-cal-legend .pk-cell[b-ntvj61bwkc] { width: 12px; }
.pk-cal-legend span:first-child[b-ntvj61bwkc] { margin-right: var(--lb-gap-1); }
.pk-cal-legend span:last-child[b-ntvj61bwkc] { margin-left: var(--lb-gap-1); }

/* ── Kniha a oblasti ── */
.pk-tiles[b-ntvj61bwkc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lb-gap-4); }
.pk-tile[b-ntvj61bwkc] {
    display: flex; flex-direction: column; gap: var(--lb-gap-1);
    padding: var(--lb-gap-5); border-radius: var(--lb-radius-sm);
    background: var(--lb-warm-tint); border: 1px solid var(--lb-border);
    color: inherit; text-decoration: none;
}
.pk-tile:hover[b-ntvj61bwkc] { border-color: var(--lb-accent-border); }
.pk-tile-lbl[b-ntvj61bwkc] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); font-weight: 600; }
.pk-tile strong[b-ntvj61bwkc] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); }

@media (min-width: 900px) {
    .pokrok[b-ntvj61bwkc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-head[b-ntvj61bwkc] { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .pk-card[b-ntvj61bwkc] { padding: var(--lb-gap-5); }
    .pk-legend[b-ntvj61bwkc] { grid-template-columns: minmax(0, 1fr); }
    .pk-stat strong[b-ntvj61bwkc] { font-size: var(--lb-fs-3xl); }
}
/* /Pages/Tahak.razor.rz.scp.css */
/* Tahák - shrnutí probraných kapitol. Tři úrovně: kapitoly → oddíly → obsah oddílu.
   Vzhled podle mockupu autora (05.10.2026): drobečky v pilulce s domečkem, hlavička jako
   karta s obrázkem kapitoly, tabulka s obrázkem pojmu a značkami v čipech, „Dobré vědět"
   k oddílu a dole Zpět + Další tahák. Barva je akcent (zelená), fialová zůstala dlaždici
   taháku na přehledu. Značka veličiny v čipu kurzívou, jednotka vzpřímeně - jak radí tip. */
.tahak[b-o2bpx3we0c] { display: flex; flex-direction: column; gap: var(--lb-gap-6); }
.th-prazdno[b-o2bpx3we0c] { color: var(--lb-text-muted); }

/* Drobečky */
.th-drobky[b-o2bpx3we0c] {
    min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--lb-gap-1) var(--lb-gap-3);
    padding: var(--lb-gap-3) var(--lb-gap-5);
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-pill);
    font-size: var(--lb-fs-sm); color: var(--lb-text-secondary);
}
.th-drobky a[b-o2bpx3we0c] { color: var(--lb-text-secondary); text-decoration: none; }
.th-drobky a:hover[b-o2bpx3we0c] { color: var(--lb-accent); }
.th-drobky [aria-current][b-o2bpx3we0c] { color: var(--lb-ink); font-weight: 700; }
.th-domu[b-o2bpx3we0c] { display: inline-grid; place-items: center; color: var(--lb-ink) !important; }
.th-domu svg[b-o2bpx3we0c] { width: 20px; height: 20px; }
.th-sip[b-o2bpx3we0c] { color: var(--lb-text-muted); }

/* Hlavička */
.th-head[b-o2bpx3we0c] {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--lb-gap-4);
    padding: var(--lb-gap-7) var(--lb-gap-6);
    background: linear-gradient(120deg, var(--lb-surface) 40%, var(--lb-accent-tint));
    border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-xs);
}
.th-head-text[b-o2bpx3we0c] { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-2); }
.th-head--obr .th-head-text[b-o2bpx3we0c] { max-width: 60%; }
.th-eyebrow[b-o2bpx3we0c] { font-size: var(--lb-fs-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lb-accent); }
.th-title[b-o2bpx3we0c] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-4xl); margin: 0; color: var(--lb-ink); text-wrap: balance; line-height: 1.1; }
.th-sub[b-o2bpx3we0c] { color: var(--lb-text-secondary); margin: 0; line-height: 1.45; }
/* Obrázek kapitoly vpravo, do textu se rozplyne. */
.th-head-obr[b-o2bpx3we0c] {
    position: absolute; right: 0; top: 0; height: 100%; width: 44%; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--lb-ink) 45%);
    mask-image: linear-gradient(90deg, transparent, var(--lb-ink) 45%);
}

/* Menu kapitol a oddílů */
.th-menu[b-o2bpx3we0c] { display: flex; flex-direction: column; gap: var(--lb-gap-3); }
.th-polozka[b-o2bpx3we0c] {
    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);
    box-shadow: var(--lb-shadow-xs);
    padding: var(--lb-gap-4) var(--lb-gap-5);
    color: var(--lb-text); text-decoration: none;
    transition: border-color .12s, transform .12s;
}
.th-polozka:hover[b-o2bpx3we0c] { border-color: var(--lb-accent); transform: translateY(-1px); }
.th-polozka-obr[b-o2bpx3we0c] { width: 3.6rem; height: 3.6rem; flex: 0 0 auto; border-radius: var(--lb-radius-sm); object-fit: cover; }
.th-polozka-text[b-o2bpx3we0c] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.th-polozka-nazev[b-o2bpx3we0c] { font-family: var(--lb-font-head); font-weight: 700; font-size: var(--lb-fs-xl); color: var(--lb-ink); }
.th-ukazka[b-o2bpx3we0c] { color: var(--lb-text-muted); font-size: var(--lb-fs-sm); overflow-wrap: anywhere; }
.th-stitky[b-o2bpx3we0c] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); }
.th-stitek[b-o2bpx3we0c] { font-size: var(--lb-fs-xs); font-weight: 700; color: var(--lb-accent-strong); background: var(--lb-accent-tint); border-radius: var(--lb-radius-pill); padding: var(--lb-gap-0) var(--lb-gap-3); }
.th-sipka[b-o2bpx3we0c] {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--lb-accent-tint); color: var(--lb-accent);
}
.th-ikona[b-o2bpx3we0c] {
    flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: var(--lb-radius-sm);
    display: grid; place-items: center;
    background: var(--lb-accent-tint); color: var(--lb-accent);
}
.th-ikona--jednotky[b-o2bpx3we0c] { background: var(--lb-purple-bg); color: var(--lb-purple-text); }
.th-ikona--vzorce[b-o2bpx3we0c] { background: var(--lb-warm-tint-2); color: var(--lb-orange); }
.th-ikona--pojmy[b-o2bpx3we0c] { background: var(--lb-bg); color: var(--lb-text-secondary); }
.th-ikona[b-o2bpx3we0c]  svg { width: 22px; height: 22px; }
[b-o2bpx3we0c] .th-sip-ico { width: 18px; height: 18px; }

/* Obsah oddílu */
.th-kap[b-o2bpx3we0c] {
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-xs);
    padding: var(--lb-gap-3);
}
.th-tab-obal[b-o2bpx3we0c] { overflow-x: auto; }
.th-tab[b-o2bpx3we0c] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lb-fs-md); color: var(--lb-text); }
.th-tab th[b-o2bpx3we0c] {
    text-align: left; font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-ink);
    padding: var(--lb-gap-4) var(--lb-gap-3); background: var(--lb-bg);
}
.th-tab th:first-child[b-o2bpx3we0c] { border-radius: var(--lb-radius-sm) 0 0 var(--lb-radius-sm); padding-left: var(--lb-gap-4); }
.th-tab th:last-child[b-o2bpx3we0c] { border-radius: 0 var(--lb-radius-sm) var(--lb-radius-sm) 0; }
.th-tab td[b-o2bpx3we0c] { padding: var(--lb-gap-3); border-bottom: 1px solid var(--lb-border); vertical-align: middle; }
.th-tab td:first-child[b-o2bpx3we0c] { padding-left: var(--lb-gap-4); }
.th-tab tr:last-child td[b-o2bpx3we0c] { border-bottom: none; }

.th-nazev[b-o2bpx3we0c] { display: inline-flex; align-items: center; gap: var(--lb-gap-4); font-weight: 600; color: var(--lb-ink); }
.th-obr[b-o2bpx3we0c] {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: var(--lb-radius-sm); overflow: hidden;
    background: var(--lb-bg);
}
.th-obr img[b-o2bpx3we0c] { width: 100%; height: 100%; object-fit: cover; display: block; }

.th-cip[b-o2bpx3we0c] {
    display: inline-block; min-width: 2.4rem; text-align: center;
    padding: var(--lb-gap-1) var(--lb-gap-3); border-radius: var(--lb-radius-sm);
    background: var(--lb-accent-tint); border: 1px solid color-mix(in srgb, var(--lb-accent) 35%, var(--lb-surface));
    color: var(--lb-accent-strong); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.th-cip--velicina[b-o2bpx3we0c] { font-style: italic; }
.th-cip--vzorec[b-o2bpx3we0c] { margin-left: auto; }
.th-jednotka[b-o2bpx3we0c] { display: inline-flex; align-items: center; gap: var(--lb-gap-3); }
.th-jn[b-o2bpx3we0c] { color: var(--lb-text-secondary); }
.th-vzorec[b-o2bpx3we0c] { font-weight: 700; color: var(--lb-accent-strong); font-variant-numeric: tabular-nums; }

.th-radky[b-o2bpx3we0c] { list-style: none; margin: 0; padding: 0; }
.th-radky li[b-o2bpx3we0c] {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--lb-gap-3) var(--lb-gap-4);
    padding: var(--lb-gap-3) var(--lb-gap-4); border-bottom: 1px solid var(--lb-border);
}
.th-radky li:last-child[b-o2bpx3we0c] { border-bottom: none; }
.th-radky--pojmy li[b-o2bpx3we0c] { flex-wrap: nowrap; align-items: flex-start; }
.th-pojem[b-o2bpx3we0c] { min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-0); }
.th-pojem strong[b-o2bpx3we0c] { color: var(--lb-ink); font-size: var(--lb-fs-md); }
.th-pojem span[b-o2bpx3we0c] { color: var(--lb-text-secondary); font-size: var(--lb-fs-sm); line-height: 1.4; }

/* Dobré vědět */
.th-tip[b-o2bpx3we0c] {
    display: flex; gap: var(--lb-gap-4); align-items: flex-start;
    padding: var(--lb-gap-5);
    border-radius: var(--lb-radius-lg);
    background: var(--lb-accent-tint);
    border: 1px solid color-mix(in srgb, var(--lb-accent) 25%, var(--lb-surface));
}
.th-tip-ico[b-o2bpx3we0c] {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center; background: var(--lb-surface); color: var(--lb-accent);
}
.th-tip-ico svg[b-o2bpx3we0c] { width: 22px; height: 22px; }
.th-tip-obsah[b-o2bpx3we0c] { min-width: 0; display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.th-tip-label[b-o2bpx3we0c] { font-size: var(--lb-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lb-accent-strong); }
.th-tip-text[b-o2bpx3we0c] { color: var(--lb-text); line-height: 1.55; }
[b-o2bpx3we0c] mark.th-hl { background: none; padding: 0; color: var(--lb-accent); font-weight: 700; }

/* Další tahák vpravo v řadě se Zpět (.lb-zpet-dole, app.css) */
.th-dalsi[b-o2bpx3we0c] {
    display: inline-flex; align-items: center; gap: var(--lb-gap-2);
    padding: var(--lb-gap-3) var(--lb-gap-6);
    border-radius: var(--lb-radius-pill);
    font-weight: 700; text-decoration: none;
}
.th-dalsi[b-o2bpx3we0c] { margin-left: auto; background: var(--lb-section-gradient); color: var(--lb-on-accent); box-shadow: var(--lb-shadow-sm); }
.th-dalsi:hover[b-o2bpx3we0c] { filter: brightness(1.05); }

@media (max-width: 560px) {
    .th-head[b-o2bpx3we0c] { padding: var(--lb-gap-6) var(--lb-gap-5); }
    .th-title[b-o2bpx3we0c] { font-size: var(--lb-fs-3xl); }
    .th-head--obr .th-head-text[b-o2bpx3we0c] { max-width: 62%; }
    .th-head-obr[b-o2bpx3we0c] { width: 40%; }
    .th-polozka[b-o2bpx3we0c] { padding: var(--lb-gap-3) var(--lb-gap-4); gap: var(--lb-gap-4); }
    .th-kap[b-o2bpx3we0c] { padding: var(--lb-gap-2); }
    .th-tab[b-o2bpx3we0c] { font-size: var(--lb-fs-sm); }
    .th-tab th[b-o2bpx3we0c], .th-tab td[b-o2bpx3we0c] { padding-left: var(--lb-gap-2); padding-right: var(--lb-gap-2); }
    .th-nazev[b-o2bpx3we0c] { gap: var(--lb-gap-3); }
    .th-obr[b-o2bpx3we0c] { width: 2.2rem; height: 2.2rem; }
    .th-jednotka[b-o2bpx3we0c] { flex-wrap: wrap; gap: var(--lb-gap-1) var(--lb-gap-2); }
}

/* Tmavý motiv: čipy a tip sytější, ať se od karty odliší (jako v mockupu). */
[data-theme="dark"] .th-cip[b-o2bpx3we0c] { background: color-mix(in srgb, var(--lb-accent) 16%, var(--lb-surface)); border-color: color-mix(in srgb, var(--lb-accent) 45%, var(--lb-border)); }
[data-theme="dark"] .th-tip[b-o2bpx3we0c] { background: color-mix(in srgb, var(--lb-accent) 12%, var(--lb-surface)); border-color: color-mix(in srgb, var(--lb-accent) 38%, var(--lb-border)); }
[data-theme="dark"] .th-head[b-o2bpx3we0c] { background: linear-gradient(120deg, var(--lb-surface) 40%, color-mix(in srgb, var(--lb-accent) 16%, var(--lb-surface))); }
[data-theme="dark"] .th-tab th[b-o2bpx3we0c] { background: var(--lb-surface-elevated); }
/* /Pages/Ucebnice.razor.rz.scp.css */
.ucebnice[b-t2ptu19crs] {
    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-t2ptu19crs], .alert[b-t2ptu19crs] { padding: var(--lb-gap-6); }
.alert[b-t2ptu19crs] { color: var(--lb-error-text); }

.lesson-head[b-t2ptu19crs] { border-bottom: 1px solid var(--lb-border); padding-bottom: var(--lb-gap-6); margin-bottom: var(--lb-gap-3); }
.lesson-eyebrow[b-t2ptu19crs] { font-size: var(--lb-fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-text-muted); }
.lesson-head h1[b-t2ptu19crs] { margin: var(--lb-gap-1) 0 var(--lb-gap-2); font-size: var(--lb-fs-5xl); }
.situation[b-t2ptu19crs] { color: var(--lb-text-secondary); margin: var(--lb-gap-1) 0; }
.goal[b-t2ptu19crs] { color: var(--lb-text); margin: var(--lb-gap-1) 0; }
.hint[b-t2ptu19crs] { 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-t2ptu19crs] { margin-top: var(--lb-gap-8); }
section h2[b-t2ptu19crs] { font-size: var(--lb-fs-xl); margin: 0 0 var(--lb-gap-4); color: var(--lb-accent-strong); }

/* slovní zásoba */
.vocab-grid[b-t2ptu19crs] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--lb-gap-3); }
.vocab-chip[b-t2ptu19crs] { 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-t2ptu19crs] { border-color: var(--lb-accent-strong); }
.vc-de[b-t2ptu19crs] { font-weight: 600; }
.vc-cz[b-t2ptu19crs] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.func-words[b-t2ptu19crs] { margin-top: var(--lb-gap-4); display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: center; }
.fw-label[b-t2ptu19crs] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-right: var(--lb-gap-1); }
.fw-chip[b-t2ptu19crs] { 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-t2ptu19crs] { border-color: var(--lb-accent-strong); }

/* gramatika */
.grammar-list[b-t2ptu19crs] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); }
.grammar-chip[b-t2ptu19crs] { 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-t2ptu19crs] { border-color: var(--lb-accent-strong); background: var(--lb-warm-tint); }

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

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

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

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

/* cvičení */
.exercise[b-t2ptu19crs] { padding: var(--lb-gap-2) 0; border-bottom: 1px dashed var(--lb-border); }
.ex-prompt[b-t2ptu19crs] { font-size: var(--lb-fs-lg); }
.ex-options[b-t2ptu19crs] { margin-top: var(--lb-gap-1); display: flex; gap: var(--lb-gap-2); }
.opt[b-t2ptu19crs] { 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-t2ptu19crs] { border-color: var(--lb-success); color: var(--lb-success); background: var(--lb-success-bg); }
.ex-answer[b-t2ptu19crs] { font-size: var(--lb-fs-base); color: var(--lb-success); margin-top: var(--lb-gap-0); }

/* klikací slovo v textu */
[b-t2ptu19crs] 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-t2ptu19crs] 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-t2ptu19crs] { position: sticky; top: 1rem; }
.lk-card[b-t2ptu19crs] { 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-t2ptu19crs] { 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-t2ptu19crs] { font-size: var(--lb-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); }
.lk-de[b-t2ptu19crs] { font-size: var(--lb-fs-3xl); font-weight: 700; margin: var(--lb-gap-0) 0; }
.lk-cz[b-t2ptu19crs] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-3); }
.lk-conj[b-t2ptu19crs] { width: 100%; border-collapse: collapse; margin: var(--lb-gap-2) 0; font-size: var(--lb-fs-md); }
.lk-conj td[b-t2ptu19crs] { padding: var(--lb-gap-0) var(--lb-gap-2); border-bottom: 1px solid var(--lb-warm-border); }
.lk-conj td:first-child[b-t2ptu19crs] { color: var(--lb-text-muted); width: 3rem; }
.lk-row[b-t2ptu19crs] { font-size: var(--lb-fs-md); margin-top: var(--lb-gap-1); }
.lk-note[b-t2ptu19crs] { 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-t2ptu19crs] { margin-top: var(--lb-gap-4); display: flex; flex-wrap: wrap; gap: var(--lb-gap-2); align-items: center; }
.lk-gl-label[b-t2ptu19crs] { font-size: var(--lb-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--lb-text-muted); width: 100%; }
.lk-grammar .grammar-chip[b-t2ptu19crs] { font-size: var(--lb-fs-sm); padding: var(--lb-gap-1) var(--lb-gap-4); }
.lk-expl[b-t2ptu19crs] { 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-t2ptu19crs] 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-t2ptu19crs] { margin-top: var(--lb-gap-4); display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.lk-ex[b-t2ptu19crs] { 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-t2ptu19crs] { max-width: 760px; margin: 0 auto; padding: var(--lb-gap-6) var(--lb-gap-8) var(--lb-gap-11); }
.ucebnice-picker h1[b-t2ptu19crs] { font-size: var(--lb-fs-5xl); margin-bottom: var(--lb-gap-1); }
.picker-sub[b-t2ptu19crs] { color: var(--lb-text-secondary); margin-bottom: var(--lb-gap-8); }
.ucebnice-picker .level h2[b-t2ptu19crs] { font-size: var(--lb-fs-xl); color: var(--lb-accent-strong); margin-bottom: var(--lb-gap-4); }
.lesson-cards[b-t2ptu19crs] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.lesson-card[b-t2ptu19crs] { 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-t2ptu19crs] { border-color: var(--lb-accent-strong); }
.lesson-card.done[b-t2ptu19crs] { background: var(--lb-warm-tint); border-color: var(--lb-warm-border); }
.lc-head[b-t2ptu19crs] { display: flex; justify-content: space-between; align-items: center; }
.lc-title[b-t2ptu19crs] { font-weight: 600; font-size: var(--lb-fs-lg); }
.lc-badge[b-t2ptu19crs] { 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-t2ptu19crs] { color: var(--lb-text-muted); font-size: var(--lb-fs-base); margin-top: var(--lb-gap-1); }

/* dokončení lekce */
.lesson-finish[b-t2ptu19crs] { 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-t2ptu19crs] { grid-template-columns: 1fr; }
    .lookup[b-t2ptu19crs] { position: static; }
}
/* /Pages/Vyuka.razor.rz.scp.css */
.vyuka[b-1kk29nioov] { margin: 0 auto; padding: var(--lb-gap-3) 0 var(--lb-gap-10); }
.alert[b-1kk29nioov] { color: var(--lb-error-text); }

/* „Učení přes jiný jazyk" — label + combo s vlaječkami */
.cross-row[b-1kk29nioov] { display: flex; align-items: center; justify-content: flex-end; gap: var(--lb-gap-3); margin: -1rem 0 var(--lb-gap-6); }
.cross-lbl[b-1kk29nioov] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.cross-picker[b-1kk29nioov] { position: relative; }
.cross-btn[b-1kk29nioov] { 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-1kk29nioov] { border-color: var(--lb-accent); }
.cross-btn.on[b-1kk29nioov] { border-color: var(--lb-accent); }
.cross-btn .cross-off[b-1kk29nioov] { color: var(--lb-text-muted); font-weight: 600; }
.cross-caret[b-1kk29nioov] { width: 15px; height: 15px; color: var(--lb-text-muted); }
.cross-menu[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-opt.on[b-1kk29nioov] { 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-1kk29nioov]  .lb-flag, .cross-opt[b-1kk29nioov]  .lb-flag { width: 20px; height: 14px; border-radius: var(--lb-radius-2xs); overflow: hidden; display: inline-flex; flex: 0 0 auto; }
.cross-btn[b-1kk29nioov]  .lb-flag svg, .cross-opt[b-1kk29nioov]  .lb-flag svg { width: 100%; height: 100%; display: block; }

/* plná imerze — přepínač na konci menu */
.cross-sep[b-1kk29nioov] { height: 1px; background: var(--lb-border); margin: var(--lb-gap-1) var(--lb-gap-1); }
.cross-full[b-1kk29nioov] { 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-1kk29nioov] { background: color-mix(in srgb, var(--lb-accent) 10%, transparent); }
.cross-full-txt[b-1kk29nioov] { 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-1kk29nioov] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); font-weight: 400; }
.cross-full.on .cross-full-txt[b-1kk29nioov] { color: var(--lb-accent); font-weight: 700; }
.cross-toggle[b-1kk29nioov] { 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-1kk29nioov] { background: var(--lb-accent); }
.cross-knob[b-1kk29nioov] { 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-1kk29nioov] { transform: translateX(14px); }

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

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

/* vocab card */
.card[b-1kk29nioov] { 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-1kk29nioov] { font-size: var(--lb-fs-5xl); font-weight: 700; }
.card-cz[b-1kk29nioov] { color: var(--lb-text-secondary); margin: var(--lb-gap-1) 0 var(--lb-gap-4); }
.conj[b-1kk29nioov] { margin: var(--lb-gap-3) auto; border-collapse: collapse; font-size: var(--lb-fs-md); }
.conj td[b-1kk29nioov] { padding: var(--lb-gap-0) var(--lb-gap-4); border-bottom: 1px solid var(--lb-warm-border); }
.conj td:first-child[b-1kk29nioov] { color: var(--lb-text-muted); }
.forms[b-1kk29nioov] { font-size: var(--lb-fs-md); color: var(--lb-text-secondary); }
.note[b-1kk29nioov] { 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-1kk29nioov] { margin-top: var(--lb-gap-3); display: flex; gap: var(--lb-gap-1); justify-content: center; flex-wrap: wrap; }
.ghint[b-1kk29nioov] { 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-1kk29nioov] { display: flex; gap: var(--lb-gap-4); justify-content: center; margin: var(--lb-gap-5) 0; }
.rate[b-1kk29nioov] { 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-1kk29nioov] { color: var(--lb-success); border-color: var(--lb-success-border); }
.rate.hard[b-1kk29nioov] { color: var(--lb-accent-strong); border-color: var(--lb-accent-border); }

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

/* kvíz k článku (gramatická cvičení běží ve vložené OpakovaniBatch, vlastní styly nemají) */
.q-prompt[b-1kk29nioov] { font-size: var(--lb-fs-xl); margin-bottom: var(--lb-gap-4); }
.q-options[b-1kk29nioov] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-3); }
.opt[b-1kk29nioov] { 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-1kk29nioov] { border-color: var(--lb-accent-strong); }
.opt.correct[b-1kk29nioov] { border-color: var(--lb-success); background: var(--lb-success-bg); color: var(--lb-success); font-weight: 600; }
.opt.wrong[b-1kk29nioov] { border-color: var(--lb-error-text); background: var(--lb-error-bg); color: var(--lb-error-text); }
.opt.dim[b-1kk29nioov] { opacity: .5; }

/* reading — „papírová" čtecí plocha */
.article[b-1kk29nioov] {
    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-1kk29nioov] {
    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. */
/* Mřížka o dvou sloupcích: vlevo jméno, replika a překlady pod sebou, vpravo reproduktor
   přes všechny řádky, svisle uprostřed bubliny. Dřív stál u prvního řádku repliky, takže
   podle délky textu seděl pokaždé jinde (autor 07.10.2026). `.line-row` se rozpustí
   (display: contents), aby replika i tlačítko byly položkami téže mřížky. */
.dialog .turn[b-1kk29nioov] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--lb-gap-3); row-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-1kk29nioov] {
    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-1kk29nioov] { --lb-lupa-barva: var(--sp, var(--lb-speaker-anna)); }
.dialog .turn.sp-anna[b-1kk29nioov] { --sp: var(--lb-speaker-anna); }
.dialog .turn.sp-tom[b-1kk29nioov] { --sp: var(--lb-speaker-tom); }
.dialog .turn.sp-side[b-1kk29nioov] { --sp: var(--lb-speaker-side); }
.dialog .speaker[b-1kk29nioov] {
    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 .turn > *[b-1kk29nioov] { grid-column: 1; }
.dialog .line-row[b-1kk29nioov] { display: contents; }
.dialog .turn .line[b-1kk29nioov] { grid-column: 1; }
.dialog .line[b-1kk29nioov] {
    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 .turn-speak[b-1kk29nioov] {
    grid-column: 2; grid-row: 1 / span 4; align-self: center;
    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: .7; transition: opacity .12s, background .12s;
}
/* V tmavém motivu bylo tlumené tlačítko na podbarvené replice skoro neviditelné
   (autor 07.10.2026): plné krytí, sytější kruh a světlejší akcent. */
[data-theme="dark"] .dialog .turn .turn-speak[b-1kk29nioov] {
    opacity: 1; color: var(--lb-accent-strong);
    background: color-mix(in srgb, var(--lb-accent) 24%, transparent);
}
.dialog .turn:hover .turn-speak[b-1kk29nioov] { opacity: 1; }
.dialog .turn-speak:hover[b-1kk29nioov] { background: color-mix(in srgb, var(--lb-accent) 22%, transparent); }
.dialog .turn-speak svg[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] {
    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-1kk29nioov] { background: var(--lb-warm-tint-2); }
.article-pars .par-text[b-1kk29nioov] { white-space: pre-wrap; }
/* Ilustrace odstavce (SciBooster): pod textem, na střed, v šířce čtecího sloupce. */
.article-pars .par-ilustrace[b-1kk29nioov] { display: block; width: min(100%, 22rem); aspect-ratio: 1;
    margin: var(--lb-gap-5) auto var(--lb-gap-3); border-radius: var(--lb-radius); box-shadow: var(--lb-shadow-xs); }
.article-pars .par-foto-zdroj[b-1kk29nioov] { font-size: var(--lb-fs-2xs); color: var(--lb-text-muted); text-align: center; margin-top: calc(-1 * var(--lb-gap-2)); }
.article-pars .turn-trans[b-1kk29nioov],
.dialog .turn-trans[b-1kk29nioov] {
    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);
}
/* Bez pruhu vlevo (autor 15.10.2026): preklad odlisi tlumena barva, v dialogu kurziva. */
.dialog .turn-trans[b-1kk29nioov] { font-style: italic; }
.article-pars .turn-trans.native[b-1kk29nioov],
.dialog .turn-trans.native[b-1kk29nioov] { color: var(--lb-text-muted); font-style: italic; }
.rd-trans-row[b-1kk29nioov] { display: flex; gap: var(--lb-gap-3); align-items: center; flex-wrap: wrap; }
.rd-trans-label[b-1kk29nioov] { font-size: var(--lb-fs-sm); font-weight: 600; color: var(--lb-text-muted); margin-right: var(--lb-gap-0); }
.trans-toggle.on[b-1kk29nioov] { font-weight: 600; }
/* Vlaječkový přepínač překladu — off = tichý obrys, on = oranžově zvýrazněný */
.flag-chip[b-1kk29nioov] {
    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-1kk29nioov] { border-color: var(--lb-accent); color: var(--lb-accent); }
.flag-chip .flag-emoji[b-1kk29nioov] { font-size: var(--lb-fs-lg); line-height: 1; filter: grayscale(.35); transition: filter .12s; }
.flag-chip.on[b-1kk29nioov] { 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-1kk29nioov] { filter: none; }

[b-1kk29nioov] 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-1kk29nioov] button.w:hover { color: var(--lb-accent-strong); background: var(--lb-accent-tint); }
/* Pojem viditelný i bez myši: první výskyt nového pojmu lekce tučně s plnou zelenou
   čarou, všechno ostatní jen jemně tečkovaně (rozkliknout jde, při čtení neruší). */
[b-1kk29nioov] button.w { text-decoration-line: underline; text-underline-offset: var(--lb-concept-line-off); }
[b-1kk29nioov] button.w.w-novy { text-decoration-color: var(--lb-accent); text-decoration-thickness: var(--lb-concept-line-w); font-weight: 600; }
[b-1kk29nioov] button.w.w-jemny { text-decoration-color: var(--lb-concept-line); text-decoration-style: dotted; text-decoration-thickness: var(--lb-concept-line-thin); }
/* Predbezna zminka (mentions): pojem z pozdejsi lekce - prerusovana cara a tlumena barva, karta se neotvira. */
[b-1kk29nioov] button.w.w-pozdeji { color: var(--lb-text-secondary); text-decoration-color: var(--lb-concept-line); text-decoration-style: dashed; text-decoration-thickness: var(--lb-concept-line-thin); }
/* Slovo + interpunkce za nim drzi pohromade - zlom patri do mezery, ne za tlacitko. */
[b-1kk29nioov] span.nb { white-space: nowrap; }
/* V buňce tabulky se víceslovný pojem („látkou nebezpečnou pro životní prostředí") zalomit
   smí, jinak tabulka na telefonu přeteče (autor 18.10.2026). */
[b-1kk29nioov] .lb-tabulka span.nb { white-space: normal; }
/* Zvyraznena znacka, jednotka nebo vzorec v clanku predmetu (*takhle*) - stejne jako klicovy
   vyraz v poznamce pojmu (mark.tip-hl): barva akcentu a podtrzeni. */
[b-1kk29nioov] mark.clanek-hl {
    background: none; padding: 0; color: var(--lb-accent); font-weight: 700;
    border-bottom: 2px solid color-mix(in srgb, var(--lb-accent) 55%, transparent);
}
/* 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-1kk29nioov] {
    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-elevated); 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);
}
/* Panel od textu odděluje ztmavené pozadí (autor 08.10.2026), ne barevný pruh: zbytek
   stránky pod závěsem potemní a klik kamkoli mimo panel ho zavře. Závěs leží pod panelem
   i pod spodní lištou (ta zůstává použitelná). */
.wordpop-zaves[b-1kk29nioov] {
    position: fixed; inset: 0; z-index: 18;
    background: var(--lb-scrim);
    animation: lb-card-swap .2s ease-out;
}

/* Neviditelná kopie panelu na konci čtení: stejný obsah, šířka i odsazení, takže má přesně
   jeho výšku a obsah jde odrolovat nad pevný panel. Stojí v toku stránky, ne pevně. */
.wordpop.wordpop-misto[b-1kk29nioov] {
    position: static; transform: none; visibility: hidden; box-shadow: none;
    margin: var(--lb-gap-5) auto 0;
}
.wordpop .wp-close[b-1kk29nioov] {
    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-1kk29nioov] { background: var(--lb-accent-tint); color: var(--lb-accent-strong); }
.wordpop .wp-close svg[b-1kk29nioov] { width: 1.1rem; height: 1.1rem; }
/* Osobnost: portret vlevo, text vpravo. Bez portretu je radek jen obal textu. */
.wordpop .wp-row[b-1kk29nioov] { display: flex; gap: var(--lb-gap-5); align-items: flex-start; }
.wordpop .wp-body[b-1kk29nioov] { min-width: 0; flex: 1; }
.wordpop .wp-portret[b-1kk29nioov] { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--lb-radius-sm); flex-shrink: 0; }
.wordpop .wp-zdroj[b-1kk29nioov] { font-size: var(--lb-fs-xs); color: var(--lb-text-muted); margin-top: var(--lb-gap-2); }
.wordpop .wp-head[b-1kk29nioov] { font-size: var(--lb-fs-xl); }
/* Doplňkový pojem zajímavosti: poznámka a přepínač „Učit se" (autor 08.10.2026). */
.wordpop .wp-note[b-1kk29nioov] { margin-top: var(--lb-gap-3); font-size: var(--lb-fs-md); line-height: 1.5; color: var(--lb-text); }
.wordpop[b-1kk29nioov]  mark.wp-hl { background: none; padding: 0; color: var(--lb-purple-text); font-weight: 700;
    border-bottom: 2px solid color-mix(in srgb, var(--lb-purple) 45%, transparent); }
.wp-uceni[b-1kk29nioov] {
    display: inline-flex; align-items: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-4);
    padding: var(--lb-gap-2) var(--lb-gap-5) var(--lb-gap-2) var(--lb-gap-3);
    background: var(--lb-surface); border: 2px solid var(--lb-purple-border); border-radius: var(--lb-radius-pill);
    color: var(--lb-text); font-family: inherit; cursor: pointer; text-align: left;
}
.wp-uceni:hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-purple); }
.wp-uceni-text[b-1kk29nioov] { display: flex; flex-direction: column; line-height: 1.2; }
.wp-uceni .lb-lbl[b-1kk29nioov] { font-weight: 700; font-size: var(--lb-fs-base); }
.wp-uceni .lb-sub[b-1kk29nioov] { font-size: var(--lb-fs-xs); color: var(--lb-text-secondary); }
.wp-uceni-prepinac[b-1kk29nioov] {
    position: relative; flex: 0 0 auto; width: 2.4rem; height: 1.4rem; border-radius: var(--lb-radius-pill);
    background: var(--lb-border-strong); transition: background .2s;
}
.wp-uceni-prepinac span[b-1kk29nioov] {
    position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--lb-surface); box-shadow: var(--lb-shadow-xs); transition: transform .2s;
}
.wp-uceni.on[b-1kk29nioov] { border-color: var(--lb-purple); }
.wp-uceni.on .wp-uceni-prepinac[b-1kk29nioov] { background: var(--lb-purple); }
.wp-uceni.on .wp-uceni-prepinac span[b-1kk29nioov] { transform: translateX(1rem); }
.wordpop .wp-head strong[b-1kk29nioov] { color: var(--lb-ink-read); }
.wordpop .wp-native[b-1kk29nioov] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }
.wordpop .wp-native[b-1kk29nioov]::before { content: "= "; opacity: .5; }
.wordpop .wp-from[b-1kk29nioov] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }
.wordpop .wp-gram[b-1kk29nioov] { font-size: var(--lb-fs-sm); color: var(--lb-hint-text); margin-top: var(--lb-gap-2); }
.wordpop .wp-later[b-1kk29nioov] { font-size: var(--lb-fs-base); color: var(--lb-text-secondary); margin-top: var(--lb-gap-1); }

/* Otázky k textu (05.10.2026, mockup autora): hlavička jako karta s terčem, každá otázka
   ve vlastní kartě s číslem v kolečku, odpovědi jako pilulky. Krátké odpovědi vedle sebe
   ve stejně širokých sloupcích (--sloupcu z Vyuky), dlouhé pod sebou přes celou šířku. */
.comp[b-1kk29nioov] { display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.comp-head[b-1kk29nioov], .comp-block[b-1kk29nioov] {
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-xs);
}
.comp-head[b-1kk29nioov] { display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-4); padding: var(--lb-gap-6) var(--lb-gap-6); }
.comp-head h2[b-1kk29nioov] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-2xl); color: var(--lb-ink); margin: 0 0 var(--lb-gap-1); }
/* Vyhodnoceni otazek nese kartu shrnuti z app.css; `.phase h2` by jeji nadpis zmensil a obarvil. */
.comp-vysledek h2[b-1kk29nioov] { font-size: var(--lb-fs-3xl); color: var(--lb-text); margin: var(--lb-gap-3) 0; }
.comp-head p[b-1kk29nioov] { margin: 0; color: var(--lb-text-secondary); }
.comp-terc[b-1kk29nioov] { width: 4.5rem; height: 4.5rem; flex: 0 0 auto; }
.comp-terc .t-podklad[b-1kk29nioov] { fill: var(--lb-accent-tint); }
.comp-terc .t-cervena[b-1kk29nioov] { fill: var(--lb-error); }
.comp-terc .t-bila[b-1kk29nioov] { fill: var(--lb-surface); }
.comp-terc .t-sip[b-1kk29nioov] { stroke: var(--lb-ink); stroke-width: 3; stroke-linecap: round; }
.comp-terc .t-pero[b-1kk29nioov] { fill: var(--lb-accent); }

.comp-block[b-1kk29nioov] { padding: var(--lb-gap-5); display: flex; flex-direction: column; gap: var(--lb-gap-4); }
.cq-radek[b-1kk29nioov] { display: flex; align-items: flex-start; gap: var(--lb-gap-4); }
.cq-cislo[b-1kk29nioov] {
    flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--lb-accent) 20%, var(--lb-surface)); color: var(--lb-accent-strong);
    font-family: var(--lb-font-head); font-weight: 800;
}
.comp-block .cq-de[b-1kk29nioov] { font-size: var(--lb-fs-md); font-weight: 600; color: var(--lb-ink); line-height: 1.4; padding-top: var(--lb-gap-1); }
.comp-block .q-options[b-1kk29nioov] { display: grid; grid-template-columns: repeat(var(--sloupcu, 1), minmax(0, 1fr)); gap: var(--lb-gap-3); }
.comp-block .opt[b-1kk29nioov] {
    text-align: center;
    padding: var(--lb-gap-3) var(--lb-gap-4);
    border-radius: var(--lb-radius-pill);
    border-color: var(--lb-border-strong); /* bez okraje pilulky vybledly (autor 05.10.2026) */
    background: var(--lb-bg);
    font-size: var(--lb-fs-md);
    color: var(--lb-text);
}
.comp-block .opt:hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-accent); }
/* Fajfka u spravne a krizek u spatne odpovedi jako ve vyberu v opakovani; fajfka se
   DOKRESLI (500 ms), nenaskoci - vyhodnoceni po posledni otazce na ni ceka. */
.comp-block .opt[b-1kk29nioov] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-gap-2); }
.cq-mark[b-1kk29nioov] { width: 18px; height: 18px; flex: 0 0 auto; }
@keyframes lb-cq-fajfka-b-1kk29nioov { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.comp-block .opt.correct .cq-mark polyline[b-1kk29nioov] { stroke-dasharray: 30; animation: lb-cq-fajfka-b-1kk29nioov .5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .comp-block .opt.correct .cq-mark polyline[b-1kk29nioov] { animation: none; stroke-dasharray: none; }
}
/* Stavy po odpovědi znovu tady: obecné .opt.correct/.wrong mají stejnou váhu jako
   .comp-block .opt výš a pilulka by je přebila (správná odpověď by nezezelenala). */
.comp-block .opt.correct[b-1kk29nioov] { border-color: var(--lb-success); background: var(--lb-success-bg); color: var(--lb-success-text); font-weight: 700; }
.comp-block .opt.wrong[b-1kk29nioov] { border-color: var(--lb-error-text); background: var(--lb-error-bg); color: var(--lb-error-text); }
.cq-reveal[b-1kk29nioov] { padding: var(--lb-gap-3) var(--lb-gap-4); border-radius: var(--lb-radius-sm); background: var(--lb-success-bg); color: var(--lb-success-text); }
.comp-zpet[b-1kk29nioov] {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: var(--lb-gap-3) var(--lb-gap-5);
    border-radius: var(--lb-radius-pill);
    border: 1px solid var(--lb-border);
    background: var(--lb-surface); color: var(--lb-text-secondary);
}
.comp-zpet:hover[b-1kk29nioov] { color: var(--lb-ink); border-color: var(--lb-border-strong); }

/* grammar */
.gram-item[b-1kk29nioov] { 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-1kk29nioov] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-4); }
.gi-title[b-1kk29nioov] { font-weight: 600; }
.gi-actions[b-1kk29nioov] { display: flex; gap: var(--lb-gap-2); align-items: center; }
.gi-done[b-1kk29nioov] { color: var(--lb-success); font-weight: 700; }
.mini[b-1kk29nioov] { 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-1kk29nioov] { background: var(--lb-accent-strong); color: var(--lb-on-accent); border-color: var(--lb-accent-strong); }
.gi-expl[b-1kk29nioov] { 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-1kk29nioov] { display: flex; justify-content: space-between; align-items: center; gap: var(--lb-gap-6); margin-bottom: var(--lb-gap-6); }
.reading-head h2[b-1kk29nioov] { margin: 0; font-family: var(--lb-font-read); font-size: var(--lb-fs-3xl); color: var(--lb-accent-strong); }
.phase .trans-toggle[b-1kk29nioov] { margin-top: var(--lb-gap-7); }
.phase .wordpop[b-1kk29nioov] { margin-top: var(--lb-gap-7); }
.speak-article[b-1kk29nioov] { 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-1kk29nioov] { background: var(--lb-accent-deep); border-color: var(--lb-accent-deep); }
.trans-toggle[b-1kk29nioov] { 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-1kk29nioov] { text-decoration: underline; }
.translation[b-1kk29nioov] { 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-1kk29nioov] { --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-1kk29nioov] { font-size: var(--lb-fs-2xl); font-weight: 700; color: var(--lb-text); margin-bottom: var(--lb-gap-3); }
.gc-expl[b-1kk29nioov] { white-space: pre-wrap; line-height: 1.55; color: var(--lb-text); }
.gc-examples[b-1kk29nioov] { margin-top: var(--lb-gap-5); display: flex; flex-direction: column; gap: var(--lb-gap-1); }
.gc-ex[b-1kk29nioov] { background: var(--lb-warm-tint); border-radius: var(--lb-radius-xs); padding: var(--lb-gap-1) var(--lb-gap-4); }
.rating-row3[b-1kk29nioov] { display: flex; gap: var(--lb-gap-4); justify-content: center; margin: var(--lb-gap-2) 0; }
.rating-row3 .rating-btn[b-1kk29nioov] { 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-1kk29nioov] { border: 1px solid var(--lb-success-border); background: var(--lb-success-bg); color: var(--lb-success-text); }
.rating-row3 .rating-practice[b-1kk29nioov] { border: 1px solid var(--lb-accent-strong); background: var(--lb-accent-strong); color: var(--lb-on-accent); }
.counter.center[b-1kk29nioov] { text-align: center; display: block; }

.finish[b-1kk29nioov] { text-align: center; padding-top: var(--lb-gap-8); }
.finish .card-nav[b-1kk29nioov] { 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-1kk29nioov] { max-width: 420px; margin: var(--lb-gap-7) auto 0; text-align: left; }
.fin-again .fa-toggle[b-1kk29nioov] {
    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-1kk29nioov] { border-color: var(--lb-border-strong); color: var(--lb-text); }
.fin-again .fa-label[b-1kk29nioov] { display: inline; }
.fin-again .fa-pre[b-1kk29nioov] { font-size: var(--lb-fs-sm); color: var(--lb-text-secondary); }
.fin-again .fa-label strong[b-1kk29nioov] { font-weight: 700; color: var(--lb-text); }
.fin-again .fa-chevron[b-1kk29nioov] { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .2s ease; }
.fin-again .fa-chevron.is-open[b-1kk29nioov] { transform: rotate(180deg); }
.fin-again .fa-items[b-1kk29nioov] { display: flex; flex-direction: column; gap: var(--lb-gap-3); margin-top: var(--lb-gap-3); }
.fin-again .fa-items .btn[b-1kk29nioov] { width: 100%; }

/* cíl lekce / outcomes */
.lesson-goal[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { margin: 0; padding-left: var(--lb-gap-7); color: var(--lb-text-secondary); }
.lesson-goal li[b-1kk29nioov] { 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-1kk29nioov] { position: relative; }

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


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

/* ════════════ Gramatika (browse) — fialové téma dle mockupu ════════════ */
.gram-head[b-1kk29nioov] { --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-1kk29nioov] { font-size: var(--lb-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lb-purple); }
.gram-title-row[b-1kk29nioov] { display: flex; align-items: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-1); }
.gram-ico[b-1kk29nioov] { 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-1kk29nioov] { width: 24px; height: 24px; }
.gram-head .gram-title[b-1kk29nioov] { 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. */


/* 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-1kk29nioov] { display: flex; flex-wrap: wrap; gap: var(--lb-gap-4); justify-content: space-between; margin-bottom: var(--lb-gap-3); }
.gram-actions-l[b-1kk29nioov], .gram-actions-r[b-1kk29nioov] { display: flex; gap: var(--lb-gap-4); flex-wrap: wrap; }
.gram-actions-r[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { border: 1px solid color-mix(in srgb, var(--lb-purple) 50%, transparent); background: transparent; color: var(--lb-purple); }
/* Najetí myší zůstává fialové - obecné .lb-btn:hover by vzalo barvu sekce lekce (oranžovou),
   protože tlačítka stojí mimo .gram-card (autor 07.10.2026). */
.gram-practice:hover:not(:disabled)[b-1kk29nioov] { background: color-mix(in srgb, var(--lb-purple) 10%, transparent); border-color: var(--lb-purple); color: var(--lb-purple); }
[data-theme="dark"] .gram-practice:hover:not(:disabled)[b-1kk29nioov] { color: var(--lb-purple-text); background: color-mix(in srgb, var(--lb-purple) 18%, transparent); }
/* „Pokračovat / Dokončit" je na gramatice vždy plně fialové, v barvě sekce (autor 07.10.2026):
   průhledné s oranžovou září vedle fialového „Procvičit" nepatřilo ke gramatice. */
.gram-actions-r .gram-cont[b-1kk29nioov],
.gram-actions-l ~ .gram-actions-r .gram-cont[b-1kk29nioov] { background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent); box-shadow: none; }
.gram-actions-r .gram-cont:hover[b-1kk29nioov],
.gram-actions-l ~ .gram-actions-r .gram-cont:hover[b-1kk29nioov] { color: var(--lb-on-accent); filter: brightness(1.08); }
/* Tmavý motiv (autor 07.10.2026): průhledné „Pokračovat" s oranžovou září a slabě orámované
   „Procvičit" na tmavém pozadí zanikaly. Procvičit dostane výrazný fialový rámeček,
   Pokračovat plnou fialovou - obě v barvě gramatiky, bez oranžové záře. */
[data-theme="dark"] .gram-practice[b-1kk29nioov] { border: 2px solid var(--lb-purple); color: var(--lb-purple-text); }
[data-theme="dark"] .gram-actions-r .gram-cont[b-1kk29nioov],
[data-theme="dark"] .gram-actions-l ~ .gram-actions-r .gram-cont[b-1kk29nioov] {
    background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent); box-shadow: none;
}
[data-theme="dark"] .gram-actions-r .gram-cont:hover[b-1kk29nioov],
[data-theme="dark"] .gram-actions-l ~ .gram-actions-r .gram-cont:hover[b-1kk29nioov] { color: var(--lb-on-accent); filter: brightness(1.12); }
/* Navigace pod tlačítky — jen odkazy: vlevo předchozí jev, vpravo přeskočení celé gramatiky. */
/* „Přeskočit gramatiku" uprostřed pod kartou (06.10.2026, autor), „Zpět" vlevo. Mřížka
   o třech sloupcích drží přeskočení na středu, i když Zpět na první kartě chybí. */
.gram-nav[b-1kk29nioov] { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--lb-gap-5); margin-bottom: var(--lb-gap-5); }
.gram-nav > .gram-link[b-1kk29nioov] { justify-self: start; }
.gram-link[b-1kk29nioov] { padding: var(--lb-gap-2) 0; }
.gram-link:hover[b-1kk29nioov] { color: var(--lb-purple); text-decoration: underline; }
.gram-nav > .gram-link-r[b-1kk29nioov] { grid-column: 2; justify-self: center; color: var(--lb-text-muted); }
/* Na gramatice v barvě sekce (fialová), ne oranžová akce lekce (autor 07.10.2026). */
.gram-nav > .gram-link-r:hover[b-1kk29nioov] { color: var(--lb-purple); }
[data-theme="dark"] .gram-nav > .gram-link-r:hover[b-1kk29nioov],
[data-theme="dark"] .gram-link:hover[b-1kk29nioov] { color: var(--lb-purple-text); }
@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-1kk29nioov] { padding: var(--lb-gap-4) var(--lb-gap-5); }
    .gram-nav[b-1kk29nioov] { font-size: var(--lb-fs-sm); }
}

/* ════════════ Čtení (reading) — dle mockupu ════════════ */
.reading2[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { position: relative; border-radius: var(--lb-radius) var(--lb-radius) 0 0; overflow: hidden; }
.rd-hero.rd-hero--noimg[b-1kk29nioov] { display: none; }
.rd-hero-img[b-1kk29nioov] { display: block; width: 100%; height: 240px; object-fit: cover; object-position: 78% 18%; }
.rd-hero[b-1kk29nioov]::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-1kk29nioov] { height: auto; aspect-ratio: 2 / 1; object-fit: contain; object-position: center; background: var(--lb-surface); }
.rd-hero--cover[b-1kk29nioov]::after { height: 38%; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); }
.rd-hero-title--cover[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { margin-left: auto; }
.rd-trans-flags[b-1kk29nioov] { 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-1kk29nioov] { display: none; }
}
.rd-transbar-prose[b-1kk29nioov] { flex-direction: column; align-items: flex-start; }
.rd-transbar-prose > .trans-toggle[b-1kk29nioov], .rd-transbar-prose > .translation[b-1kk29nioov] { align-self: stretch; }
.rd-transbar-prose .translation[b-1kk29nioov] { width: 100%; }
.rd-body[b-1kk29nioov] { 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-1kk29nioov],
.rd-card .article[b-1kk29nioov] { background: none; border: none; box-shadow: none; padding: 0; }
/* max-width (autor 18.10.2026): na telefonu je .rd-body sloupec zarovnaný na začátek a sloupec
   by dostal šířku podle obsahu - široká tabulka v článku pak roztáhla celou stránku do strany. */
.rd-main[b-1kk29nioov] { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* 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-1kk29nioov] {
    box-sizing: border-box;
    position: relative;
    /* 290 px delalo z delsiho tipu uzky dlouhy sloupec (autor 06.10.2026). */
    width: 420px;
    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) * 1.75);
}
/* 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-1kk29nioov]::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 cyklus (--lb-tip-cyklus, 12 s) upozorni na sebe (autor 25. a 26.09.2026; od 10.10.2026 jen obrys a zarovka).
   Stoji vpravo vedle textu, takze se pri cteni snadno minie; nadechnuti ji pripomene,
   aniz by prekazela. Samostatne probliknuti pri najeti autor zrusil; poskakovani Boostera
   hybalo strankou, vratilo se 10.10.2026 jen jako jemny skok nahoru (transform, layout se
   nemeni) a bublina blikne pri dopadu. 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. */
/* 10.10.2026: misto cele bubliny se pri dopadu Boostera rozsviti jen obrys a zarovka
   (keyframes lb-tip-okraj, lb-tip-zarovka a lb-tip-booster v app.css). */
.rd-tip.lb-pulse-go[b-1kk29nioov]::before {
    outline: 2px solid transparent; outline-offset: -1px;
    animation: lb-tip-okraj var(--lb-tip-cyklus) ease-in-out var(--lb-tip-start) infinite;
}
.rd-tip.lb-pulse-go .rd-tip-head svg[b-1kk29nioov] { animation: lb-tip-zarovka var(--lb-tip-cyklus) ease-in-out var(--lb-tip-start) infinite; }
.rd-tip.lb-pulse-go .rd-tip-booster[b-1kk29nioov] { animation: lb-tip-booster var(--lb-tip-cyklus) ease-out var(--lb-tip-start) infinite; }
/* Tmavý motiv: tip na tmavém pozadí zanikal, nese proto výrazný fialový rámeček v barvě tipu
   (autor 07.10.2026). */
[data-theme="dark"] .rd-tip[b-1kk29nioov]::before { border: 1.5px solid color-mix(in srgb, var(--lb-purple) 60%, transparent); }
@media (prefers-reduced-motion: reduce) {
    .rd-tip.lb-pulse-go[b-1kk29nioov]::before,
    .rd-tip.lb-pulse-go .rd-tip-head svg[b-1kk29nioov],
    .rd-tip.lb-pulse-go .rd-tip-booster[b-1kk29nioov] { animation: none; }
}

.rd-tip-head[b-1kk29nioov] { 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-1kk29nioov] { width: 17px; height: 17px; color: var(--lb-yellow); }
/* Cilova fraze v bubline - to, o cem tip mluvi. */
.rd-tip-term[b-1kk29nioov] {
    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-1kk29nioov] { font-size: var(--lb-fs-md); color: var(--lb-text); line-height: 1.5; }
.rd-tip-list[b-1kk29nioov] { 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-1kk29nioov] 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-1kk29nioov] { position: absolute; right: -30px; bottom: -64px; width: 104px; height: auto; z-index: 5; }
/* Mezi 700 a ~830 px stojí tip už u okraje obsahu (odsazení 24 px) a -30 px vystrčilo
   Boostera za okraj stránky - stránka dostala vodorovný posuvník (autor 07.10.2026).
   Do 900 px proto vyčuhuje jen tolik, co pojme odsazení; pod 700 px to drží pravidlo níž. */
@media (max-width: 900px) { .rd-tip-booster[b-1kk29nioov] { right: -8px; } }

/* Spodní lišta: překlad + Přečíst + Pokračovat */
.rd-foot[b-1kk29nioov] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-5); }
.rd-foot-top[b-1kk29nioov] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--lb-gap-6); }
.rd-readbtn[b-1kk29nioov] { 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-1kk29nioov] { background: color-mix(in srgb, var(--lb-accent) 20%, transparent); }
.rd-readbtn svg[b-1kk29nioov] { 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-1kk29nioov] {
    padding: var(--lb-gap-5) var(--lb-gap-9);
    font-size: var(--lb-fs-lg);
}
.rd-continue:hover[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { display: flex; flex-direction: column; align-items: center; gap: var(--lb-gap-2); }
.hub-check[b-1kk29nioov] { 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-1kk29nioov] { width: 24px; height: 24px; }
.phase.hub h2[b-1kk29nioov] { font-family: var(--lb-font-head); font-size: var(--lb-fs-2xl); color: var(--lb-ink); margin: 0; }
.phase.hub p[b-1kk29nioov] { color: var(--lb-text-secondary); margin: 0; font-size: var(--lb-fs-base); }
.hub-actions[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { font-size: var(--lb-fs-3xl); }
.lesson-hub .hub-btn[b-1kk29nioov] { flex-direction: column; gap: 0; line-height: 1.2; }
.lesson-hub .hub-lbl[b-1kk29nioov] { font-weight: 700; }
.lesson-hub .hub-sub[b-1kk29nioov] { font-size: var(--lb-fs-xs); font-weight: 500; opacity: .82; }

/* Co se naučíš (lekce předmětu, autor 16.10.2026): nadtitulek jako štítek sekce, pojmy
   lekce jako seznam ve výchozím panelu (jen termíny, bez definic; pilulky v řadě se četly
   hůř, autor 16.10.2026), široký jako tlačítka pod ním. */
.phase.hub .prehled-nad[b-1kk29nioov] { font-size: var(--lb-fs-sm); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--lb-accent-strong); }
.prehled-pojmy[b-1kk29nioov] { list-style: none; margin: 0; padding: var(--lb-gap-1) 0; width: 100%; max-width: 340px;
    background: var(--lb-surface); border: 1px solid var(--lb-border); border-radius: var(--lb-radius);
    text-align: left; }
.prehled-pojmy li[b-1kk29nioov] { display: flex; align-items: center; gap: var(--lb-gap-4);
    padding: var(--lb-gap-3) var(--lb-gap-5); border-bottom: 1px solid var(--lb-border);
    font-size: var(--lb-fs-md); font-weight: 600; color: var(--lb-ink); }
.prehled-pojmy li:last-child[b-1kk29nioov] { border-bottom: none; }
/* Obrázek pojmu jako v řádku Taháku (.th-obr). */
.prehled-obr[b-1kk29nioov] { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: var(--lb-radius-sm); overflow: hidden;
    background: var(--lb-bg); }
.prehled-obr img[b-1kk29nioov] { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .prehled-obr[b-1kk29nioov] { width: 2.2rem; height: 2.2rem; } }
/* ── Finish: pokrok se neuložil (revize 09/2026 - závěr se tvářil úspěšně i po výpadku API) ── */
.finish-unsaved[b-1kk29nioov] { 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-1kk29nioov] { flex: 1 1 16rem; }
.finish-saved[b-1kk29nioov] { 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-1kk29nioov] { margin: var(--lb-gap-7) 0 var(--lb-gap-2); }
.fn-label[b-1kk29nioov] { 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); }
/* Stín jako karta slovíčka (autor 07.10.2026): bílá karta jen s linkou na krémovém
   pozadí ve světlém motivu splývala. */
.fn-card[b-1kk29nioov] { display: flex; align-items: center; gap: var(--lb-gap-6); background: var(--lb-surface); border: 1px solid var(--lb-border); box-shadow: var(--lb-shadow-sm); 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-1kk29nioov] { border-color: var(--lb-accent); box-shadow: var(--lb-shadow-cta); }
/* Tmavý motiv: stín na tmavém pozadí není vidět, kartu další lekce proto nese rámeček
   v barvě akce - je to hlavní cesta dál z konce lekce (autor 07.10.2026). */
[data-theme="dark"] .fn-card[b-1kk29nioov] { border: 1.5px solid color-mix(in srgb, var(--lb-accent) 55%, var(--lb-border)); }
.fn-thumb[b-1kk29nioov] { 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-1kk29nioov] { margin-left: var(--lb-gap-1); }
.fn-info[b-1kk29nioov] { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: var(--lb-gap-3); text-align: left; }
.fn-texty[b-1kk29nioov] { min-width: 0; }
/* Kolecko srovnane se stredem prvniho radku nazvu: posun = (vyska radku - kolecko) / 2.
   Pevny okraj nesedel, nazev ma vlastni pismo s jinou vyskou radku (autor 02.10.2026). */
.fn-info .fn-num[b-1kk29nioov] { margin-top: calc((var(--lb-fs-lg) * 1.2 - 22px) / 2); }
/* Cislo lekce jako v prehledu lekci (.lcard .lc-num), aby student videl, kam v knize jde. */
.fn-num[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); margin-top: var(--lb-gap-0); }
.fn-arrow[b-1kk29nioov] { width: 20px; height: 20px; flex: 0 0 auto; color: var(--lb-accent); }

@media (max-width: 700px) {
    .rd-body[b-1kk29nioov] { flex-direction: column; }
    .rd-tip[b-1kk29nioov] { 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-1kk29nioov] { right: -8px; }
    .rd-hero-img[b-1kk29nioov] { height: 175px; }
    .rd-hero-title[b-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { 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-1kk29nioov] { color: var(--lb-panel-label); }
/* Úlohy na teplém oranžovém panelu (autor 07.10.2026): dva zelené panely pod sebou splývaly
   a cihlová --lb-orange působila jako varování. Barvy jsou v paletě (--lb-ulohy-*). */
.done-hub .hub-ulohy[b-1kk29nioov] { background: var(--lb-ulohy-bg); border-color: var(--lb-ulohy-border); }
.done-hub .hub-ulohy .hub-group[b-1kk29nioov] { color: var(--lb-ulohy-text); }
.done-hub .hub-ulohy .hub-btn:hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-ulohy-text); color: var(--lb-ulohy-text); }
.done-hub .hub-clanek .hub-btn:hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-accent); color: var(--lb-accent); }
.done-hub .hub-group[b-1kk29nioov] { 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-1kk29nioov] { border-color: var(--lb-purple); color: var(--lb-purple-text); }
.done-hub .hub-more[b-1kk29nioov] { display: flex; flex-direction: column; align-items: stretch; gap: var(--lb-gap-4); margin-top: var(--lb-gap-5); }
.done-hub .hub-again[b-1kk29nioov] { flex-direction: row; gap: var(--lb-gap-4); }
.done-hub .hub-again-txt[b-1kk29nioov] { 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 .lb-zpet-dole[b-1kk29nioov] { width: 100%; max-width: 340px; margin-top: 0; }
.done-hub .done-hub-title[b-1kk29nioov] { display: inline-flex; align-items: center; gap: var(--lb-gap-4); }
.done-hub .done-hub-title .fn-num[b-1kk29nioov] { 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-1kk29nioov] { order: -1; margin-left: 0; }
.gram-actions--navrat .gram-actions-l[b-1kk29nioov] { margin-left: auto; }
.rd-foot--navrat[b-1kk29nioov] { align-items: flex-start; }
.gram-postup[b-1kk29nioov] { flex: 1 1 100%; --lb-postup: var(--lb-purple); }
.gram-postup.is-navrat[b-1kk29nioov] { display: none; }

/* Otázky k textu v tmavém motivu (05.10.2026, mockup autora): pilulky odpovědí měly
   pozadí skoro stejné jako panel a žádný okraj - nečitelné. Tmavší výplň s viditelným
   okrajem, číslo v plnějším zeleném kolečku. Stavy správně/špatně zůstávají. */
[data-theme="dark"] .comp-block .opt:not(.correct):not(.wrong)[b-1kk29nioov] { background: var(--lb-bg); border-color: var(--lb-border-strong); }
[data-theme="dark"] .comp-block .opt:not(.correct):not(.wrong):hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-accent); }
[data-theme="dark"] .cq-cislo[b-1kk29nioov] { background: color-mix(in srgb, var(--lb-accent) 28%, var(--lb-surface)); color: var(--lb-accent-strong); }

/* ── Zajímavosti (07.10.2026, autor): Booster s velkou bublinou za otázkami k textu.
   Booster stojí vlevo a bublina je výrazně větší než tip u článku - tady je hlavní
   obsah obrazovky, ne poznámka na okraji. Na úzké obrazovce jde Booster nad bublinu. ── */
.phase.zaj[b-1kk29nioov] { display: flex; flex-direction: column; gap: var(--lb-gap-6); }
.zaj-scena[b-1kk29nioov] { display: flex; align-items: flex-end; gap: var(--lb-gap-6); }
/* Větší než u tipu (104 px): Booster tu vypráví, ne jen nakukuje z rohu. */
.zaj-booster[b-1kk29nioov] { width: 10rem; height: auto; flex: 0 0 auto; align-self: flex-end; margin-bottom: var(--lb-gap-5); }
.zaj-bublina[b-1kk29nioov] {
    position: relative; flex: 1 1 auto; min-width: 0;
    background: var(--lb-tip-bg);
    border: 1px solid color-mix(in srgb, var(--lb-purple) 25%, transparent);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow-sm);
    padding: var(--lb-gap-7) var(--lb-gap-8) var(--lb-gap-6);
}
/* Ocásek bubliny k Boosterovi (vlevo dole), ze dvou vrstev: výplň a okraj. */
.zaj-bublina[b-1kk29nioov]::before, .zaj-bublina[b-1kk29nioov]::after {
    content: ""; position: absolute; left: -14px; bottom: var(--lb-gap-9);
    border: 14px solid transparent; border-left: 0;
    border-right-color: color-mix(in srgb, var(--lb-purple) 25%, transparent);
}
.zaj-bublina[b-1kk29nioov]::after { left: -12px; border-right-color: var(--lb-tip-bg); }
[data-theme="dark"] .zaj-bublina[b-1kk29nioov] { border: 1.5px solid color-mix(in srgb, var(--lb-purple) 60%, transparent); }
[data-theme="dark"] .zaj-bublina[b-1kk29nioov]::before { border-right-color: color-mix(in srgb, var(--lb-purple) 60%, transparent); }

.zaj-head[b-1kk29nioov] { display: inline-flex; align-items: center; gap: var(--lb-gap-2); font-weight: 800; font-size: var(--lb-fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--lb-purple-text); margin-bottom: var(--lb-gap-4); }
.zaj-head svg[b-1kk29nioov] { width: 17px; height: 17px; color: var(--lb-yellow); }

/* Přirozená výška aktuální položky. Vodorovně se ořízne jen vjíždějící položka, ocásek
   bubliny (::before/::after na .zaj-bublina) zůstane vidět. */
.zaj-obsah[b-1kk29nioov] { overflow-x: clip; }
.zaj-polozka[b-1kk29nioov] { min-width: 0; }
/* Přechod: nová položka vjede z boku, odkud se listovalo (autor 07.10.2026; zpomaleno
   z 0,45 na 0,8 s, rychlý posun se přehlédl). */
@keyframes zaj-zprava-b-1kk29nioov { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
@keyframes zaj-zleva-b-1kk29nioov  { from { opacity: 0; transform: translateX(-3rem); } to { opacity: 1; transform: none; } }
.zaj-polozka.zaj-vjezd-zprava[b-1kk29nioov] { animation: zaj-zprava-b-1kk29nioov .8s cubic-bezier(.2, .8, .2, 1); }
.zaj-polozka.zaj-vjezd-zleva[b-1kk29nioov]  { animation: zaj-zleva-b-1kk29nioov .8s cubic-bezier(.2, .8, .2, 1); }

/* Booster se při každé položce pohne, tři pohyby se střídají. */
@keyframes zaj-skok-b-1kk29nioov {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    15% { transform: translateY(0) scale(1.05, .93); }
    40% { transform: translateY(-1.4rem) scale(.97, 1.04); }
    65% { transform: translateY(0) scale(1.03, .96); }
    80% { transform: translateY(-.4rem); }
}
@keyframes zaj-naklon-b-1kk29nioov {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-8deg); }
    45% { transform: rotate(6deg); }
    70% { transform: rotate(-3deg); }
}
@keyframes zaj-vynor-b-1kk29nioov {
    0% { opacity: 0; transform: translateY(1.5rem) scale(.85); }
    60% { opacity: 1; transform: translateY(-.3rem) scale(1.04); }
    100% { opacity: 1; transform: none; }
}
.zaj-booster[b-1kk29nioov] { transform-origin: 50% 90%; }
.zaj-booster.zaj-anim-0[b-1kk29nioov] { animation: zaj-skok-b-1kk29nioov .9s ease-in-out; }
.zaj-booster.zaj-anim-1[b-1kk29nioov] { animation: zaj-naklon-b-1kk29nioov .9s ease-in-out; }
.zaj-booster.zaj-anim-2[b-1kk29nioov] { animation: zaj-vynor-b-1kk29nioov .7s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .zaj-booster[b-1kk29nioov], .zaj-polozka[b-1kk29nioov] { animation: none !important; }
}

/* Tlačítko obrazovky fialově (Dokončit, při návratu Zpět), v barvě bubliny: lišta dostane
   fialovou sekci, primární tlačítko z ní bere přechod i stín. Je jen jedno, stojí vpravo
   (10.10.2026). */
.zaj-nav[b-1kk29nioov] {
    justify-content: flex-end;
    --lb-section: var(--lb-purple);
    --lb-section-gradient: linear-gradient(135deg, var(--lb-purple), color-mix(in srgb, var(--lb-purple) 75%, var(--lb-on-accent)));
}

/* Pojem vyprávěný příběhem: portrét a jméno s glosou jako hlavička karty. */
.zaj-pojem[b-1kk29nioov] { display: flex; align-items: center; gap: var(--lb-gap-5); margin-bottom: var(--lb-gap-5); }
.zaj-portret[b-1kk29nioov] { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--lb-radius-sm); flex: 0 0 auto; box-shadow: var(--lb-shadow-xs); }
.zaj-pojem-nazev[b-1kk29nioov] { font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-2xl); color: var(--lb-ink); line-height: 1.2; }
.zaj-pojem-glosa[b-1kk29nioov] { color: var(--lb-text-secondary); font-size: var(--lb-fs-md); margin-top: var(--lb-gap-1); }

/* Obrázek celý, bez ořezu: fotka je 3:2, kresba čtverec. Výšku drží max-height, šířka
   se dopočte; uprostřed bubliny, aby čtvercová kresba nevisela vlevo. */
.zaj-obrazek[b-1kk29nioov] { display: block; width: auto; max-width: 100%; height: auto; max-height: 16rem; margin: 0 auto var(--lb-gap-5); border-radius: var(--lb-radius-sm); }
/* Popisek fotky (zdroj a licence) hned pod obrázkem, text zajímavosti až pod ním. */
.zaj-zdroj-obrazek[b-1kk29nioov] { margin: calc(-1 * var(--lb-gap-4)) 0 var(--lb-gap-5); text-align: center; }
/* Text jako v článku (stejný renderer, stejné písmo), jen bez odsazení karty článku. */
.zaj-text[b-1kk29nioov] { font-family: var(--lb-font-read); font-size: var(--lb-fs-lg); line-height: 1.6; color: var(--lb-ink-read); }
/* Zvýrazněná nosná slova v bublině fialově jako v gramatice LangBoosteru (autor 07.10.2026):
   ve světlém motivu fialové písmo s podtržením, v tmavém fialový štítek bez podtržení.
   Zvýraznění má přednost před podtržením klikacího pojmu - pojem uvnitř zvýraznění
   zůstává klikací, ale druhou čáru pod ním nekreslí (dvě podtržení vedle sebe rušila). */
.zaj-text[b-1kk29nioov]  mark.clanek-hl {
    color: var(--lb-purple);
    border-bottom: 2px solid color-mix(in srgb, var(--lb-purple) 55%, transparent);
}
.zaj-text[b-1kk29nioov]  mark.clanek-hl button.w {
    color: inherit; font-weight: inherit; text-decoration: none;
}
/* V bublině platí pro pojmy jiná pravidla než v článku (autor 07.10.2026): žádný „první
   výskyt nového pojmu" tučně se zelenou čarou. Co má vyniknout, je fialově zvýrazněné;
   ostatní pojmy jen jemně tečkovaně, aby šly rozkliknout a nerušily. */
.zaj-text[b-1kk29nioov]  button.w.w-novy {
    font-weight: inherit;
    text-decoration-color: var(--lb-concept-line); text-decoration-style: dotted;
    text-decoration-thickness: var(--lb-concept-line-thin);
}
[data-theme="dark"] .zaj-text[b-1kk29nioov]  mark.clanek-hl {
    color: var(--lb-purple-text);
    background: color-mix(in srgb, var(--lb-purple) 38%, transparent);
    border-bottom: none; border-radius: var(--lb-radius-2xs);
    padding: 0 .3em;
}
/* Zvýraznění bez pojmu (nejde rozkliknout) je jen fialové písmo, bez podtržení a bez štítku
   (autor 08.10.2026); podtržení a štítek patří tomu, co se dá rozkliknout. */
.zaj-text[b-1kk29nioov]  mark.clanek-hl:not(:has(button.w)),
[data-theme="dark"] .zaj-text[b-1kk29nioov]  mark.clanek-hl:not(:has(button.w)) {
    border-bottom: none; background: none; padding: 0;
}
.zaj-preklad[b-1kk29nioov] { margin-top: var(--lb-gap-4); font-size: var(--lb-fs-md); color: var(--lb-text-secondary); line-height: 1.5; }
.zaj-zdroj[b-1kk29nioov] { margin-top: var(--lb-gap-3); font-size: var(--lb-fs-xs); color: var(--lb-text-muted); }

/* Listování: šipky po stranách, mezi nimi tečky; aktivní tečka je protáhlá pilulka. */
.zaj-listovani[b-1kk29nioov] { display: flex; align-items: center; justify-content: center; gap: var(--lb-gap-4); margin-top: var(--lb-gap-6); }
/* Tečky jsou čísla v kolečkách (autor 07.10.2026): aktivní větší a sytě fialové s bílým
   číslem, neaktivní menší a světle fialové. */
.zaj-tecky[b-1kk29nioov] { display: flex; align-items: center; gap: var(--lb-gap-3); }
.zaj-tecka[b-1kk29nioov] {
    width: 1.6rem; height: 1.6rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--lb-purple-border); border-radius: 50%;
    background: var(--lb-purple-bg); color: var(--lb-purple-text);
    font-family: inherit; font-size: var(--lb-fs-xs); font-weight: 700; line-height: 1;
    cursor: pointer; transition: all .2s;
}
.zaj-tecka:hover:not(.on)[b-1kk29nioov] { border-color: var(--lb-purple); }
.zaj-tecka.on[b-1kk29nioov] {
    width: 2.2rem; height: 2.2rem;
    background: var(--lb-purple); border-color: var(--lb-purple); color: var(--lb-on-accent);
    font-size: var(--lb-fs-md); font-weight: 800;
}
.zaj-sipka[b-1kk29nioov] { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lb-border-strong); border-radius: 50%; background: var(--lb-surface); color: var(--lb-purple-text); cursor: pointer; }
.zaj-sipka svg[b-1kk29nioov] { width: 1.1rem; height: 1.1rem; }
.zaj-sipka:hover:not(:disabled)[b-1kk29nioov] { border-color: var(--lb-purple); }
.zaj-sipka:disabled[b-1kk29nioov] { opacity: .35; cursor: default; }

/* Těžké / Znám pod bublinou vedle sebe, nikdy pod sebou (pravidlo karty pojmu). */
/* Přepínač „Učit se" u celé zajímavosti (autor 12.10.2026): zařadí do opakování všechny její pojmy. */
.zaj-uceni[b-1kk29nioov] { display: flex; justify-content: center; }
.zaj-uceni .wp-uceni[b-1kk29nioov] { margin-top: 0; }
.zaj-nav[b-1kk29nioov] { margin-top: 0; }

@media (max-width: 700px) {
    .zaj-scena[b-1kk29nioov] { flex-direction: column; align-items: stretch; }
    /* Booster nad bublinou, vlevo; ocásek míří nahoru k němu. */
    .zaj-booster[b-1kk29nioov] { width: 7rem; align-self: flex-start; margin: 0 0 0 var(--lb-gap-6); }
    .zaj-bublina[b-1kk29nioov] { padding: var(--lb-gap-6) var(--lb-gap-6) var(--lb-gap-5); }
    .zaj-bublina[b-1kk29nioov]::before, .zaj-bublina[b-1kk29nioov]::after {
        left: var(--lb-gap-10); bottom: auto; top: -14px;
        border: 14px solid transparent; border-top: 0;
        border-bottom-color: color-mix(in srgb, var(--lb-purple) 25%, transparent);
    }
    .zaj-bublina[b-1kk29nioov]::after { left: var(--lb-gap-10); top: -12px; border-bottom-color: var(--lb-tip-bg); }
    [data-theme="dark"] .zaj-bublina[b-1kk29nioov]::before { border-bottom-color: color-mix(in srgb, var(--lb-purple) 60%, transparent); }
    .zaj-text[b-1kk29nioov] { font-size: var(--lb-fs-md); }
}

/* Kvíz se po poslední odpovědi sám přepíná na vyhodnocení: tlačítka pod otázkami do té doby
   zmizí (místo drží), ať klik netrefí to, co se mezitím objeví (12.10.2026). */
.card-nav.je-posun[b-1kk29nioov] { visibility: hidden; pointer-events: none; }
/* /Pages/Zacit.razor.rz.scp.css */
.wizard[b-nbd0i22yza] { max-width: 560px; margin: 0 auto; padding: var(--lb-gap-8) var(--lb-gap-8) var(--lb-gap-11); }
.wizard h1[b-nbd0i22yza] { font-size: var(--lb-fs-4xl); margin: 0 0 var(--lb-gap-8); color: var(--lb-ink-read); }

.wiz-field[b-nbd0i22yza] { margin-bottom: var(--lb-gap-8); }
.wiz-label[b-nbd0i22yza] { 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-nbd0i22yza] {
    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-nbd0i22yza] { outline: none; border-color: var(--lb-accent-strong); }

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

.wiz-info[b-nbd0i22yza] {
    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-nbd0i22yza] { 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-nbd0i22yza] {
    padding: var(--lb-gap-5) var(--lb-gap-9);
    font-size: var(--lb-fs-lg);
}
.wiz-go:disabled[b-nbd0i22yza] { opacity: .5; cursor: default; }

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

.wiz-hint[b-nbd0i22yza] { 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-nbd0i22yza] { 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; }