/* ============================================================
SciBooster - Editorial téma
Patkový nadpis (Fraunces) + čistý sans (Inter), zeleno-fialová paleta.
============================================================ */
/* Jemný „swap" při změně obsahu karty (nové slovo) — přes @key přemount.
Nenápadné, jen signalizace že se karta změnila. */
@keyframes lb-card-swap {
from { opacity: 0; transform: translateY(8px) scale(.992); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
@keyframes lb-card-swap { from { opacity: 0; } to { opacity: 1; } }
}
/* ============================================================
Design tokeny — LIGHT default + [data-theme="dark"] override.
Sémantické tokeny + legacy aliasy (var()), aby se theme propsal všude.
============================================================ */
:root {
/* Brand - zelena (hlavni akce) + fialova (Booster, pravidla) */
--lb-accent: #059669;
--lb-accent-hover: #10B981;
--lb-accent-strong: #047857; /* pressed */
--lb-cta-gradient: linear-gradient(135deg, #059669 0%, #10B981 100%);
/* Rekni prohlizeci, ktery motiv plati, aby se s nim srovnaly i prvky, ktere
kresli SAM: vstupni pole, posuvniky, zaskrtavatka. Bez toho zustaly
v tmavem motivu bile - prihlasovaci pole byla bila dira v tmave karte. */
color-scheme: light;
/* Povrchy (LIGHT) — navzorkováno z mockup-light.png */
--lb-bg: #F7FAF8;
--lb-surface: #FFFFFF;
--lb-surface-elevated: #FFFFFF;
--lb-sidebar: #EFF5F2;
/* Text */
--lb-text: #1F2623;
--lb-text-secondary: #5A6661;
--lb-text-muted: #8C9893;
--lb-text-disabled: #C2CBC7;
/* Okraje */
--lb-border: #E1E8E4;
--lb-border-strong: #CDD8D3;
/* Rámeček klikací dlaždice (témata a díly oblastí) - o stupeň tmavší než linka, aby
dlaždice nesplývala s pozadím (autor 08.10.2026). */
--lb-tile-border: #BBC8C2;
/* Stavy */
--lb-success: #38A169;
--lb-warning: #F6AD55;
--lb-error: #E53E3E;
--lb-info: #3182CE;
/* Stíny */
/* Vyska prvku nad strankou. Driv si kazdy soubor psal stin rucne: 84 stinu
v 53 hodnotach, z toho devetkrat tentyz a petkrat skoro tentyz, jen jinak
zaokrouhleny (rgba(28,25,23,.04) vs rgba(27,24,27,.03)). Brana je poustela,
protoze rgba() je povolena. Ctyri stupne staci na vsechno, co appka mela. */
--lb-shadow-xs: 0 1px 2px rgba(28,25,23,.04), 0 2px 6px rgba(28,25,23,.05);
--lb-shadow-sm: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.06);
--lb-shadow-md: 0 2px 6px rgba(28,25,23,.05), 0 14px 32px rgba(28,25,23,.10);
/* Stin nahoru: spodni lista, pod kterou jeste lezi obsah (js/listy.js). */
--lb-shadow-up: 0 -1px 2px rgba(28,25,23,.04), 0 -8px 24px rgba(28,25,23,.08);
/* Ztmaveni pod dialogem a tmavy stitek (hlaseni chyb). Vlastni role, ne --lb-ink: ta je
v tmavem motivu svetla, takze stranku pod dialogem misto ztmaveni zesvetlila. */
--lb-scrim: rgba(15, 17, 20, .45);
--lb-toast-bg: #1F2623;
--lb-toast-text: #FFFFFF;
--lb-shadow: 0 8px 32px rgba(0,0,0,.08);
--lb-shadow-lg: 0 14px 44px rgba(0,0,0,.12);
/* Výška spodní navigační lišty (bez safe-area). Nad ní se drží pevné prvky obrazovky
(překlad slova ve čtení) a o ni se odsazuje obsah, aby pod lištu šlo dorolovat. */
--lb-botnav-h: 4.2rem;
/* Zare pod akcentnim tlacitkem - neni to vyska, je to barva prvku pod nim,
proto vlastni role a v tmavem tematu se nemeni. */
--lb-shadow-cta: 0 6px 16px color-mix(in srgb, var(--lb-accent) 32%, transparent);
--lb-shadow-cta-hover: 0 9px 22px color-mix(in srgb, var(--lb-accent) 42%, transparent);
--lb-shadow-practice: 0 5px 14px color-mix(in srgb, var(--lb-yellow) 30%, transparent);
/* Prstenec stavu (fokus, vybrano, spravne/spatne). Take ne vyska - proto se
nesmi michat se stupni vyse; kdyz prvek potrebuje oboji, pisou se za sebou. */
--lb-ring-accent: 0 0 0 3px color-mix(in srgb, var(--lb-accent) 16%, transparent);
--lb-ring-success: 0 0 0 3px color-mix(in srgb, var(--lb-success) 28%, transparent);
--lb-ring-error: 0 0 0 3px color-mix(in srgb, var(--lb-error) 26%, transparent);
--lb-shadow-hairline: 0 0 0 1px rgba(28,25,23,.10);
/* Tvar */
/* ---- RADIUSY ------------------------------------------------------------
Aplikace jich mela 23 (2,3,4,6,7,8,9,10,11,12,14,16,18,20px, 999px, 50%),
takze tentyz typ karty mel v kazde sekci jiny rob. Skala je pet stupnu;
50% (kolecko) a 999px (pilulka) jsou tvary, ne stupne. */
--lb-radius-2xs: 4px;
--lb-radius-xs: 8px;
--lb-radius-sm: 12px;
--lb-radius: 18px;
--lb-radius-lg: 24px;
--lb-radius-pill: 999px;
/* ---- VELIKOSTI PISMA ----------------------------------------------------
374 deklaraci ve 57 hodnotach (a to jen proto, ze `.85rem` a `0.85rem`
je totez napsane dvakrat). Tentyz prvek mel v kazde sekci jinou velikost:
`.bridge-text` 1,25 rem v jedne komponente a 1,15 rem v druhe.
Skala je odstupnovana podle SKUTECNYCH spicek aplikace, ne teoreticky -
proto neni geometricka. Kdyz nova obrazovka potrebuje jinou velikost,
vezme nejblizsi stupen; kdyz zadny nesedi, prida se stupen SEM. */
--lb-fs-2xs: .65rem; /* odznaky, horni indexy */
--lb-fs-ring: .58rem; /* procento v kolecku postupu - „100 %" se do nej musi vejit */
--lb-fs-xs: .72rem; /* popisky pod prvkem */
--lb-fs-sm: .8rem; /* druhotny text */
--lb-fs-base: .85rem; /* zakladni text rozhrani */
--lb-fs-md: .95rem; /* text v obsahu */
--lb-fs-lg: 1.05rem; /* konverzacni text, replika */
--lb-fs-xl: 1.15rem; /* nadpis sekce */
--lb-fs-2xl: 1.3rem; /* nadpis etapy */
--lb-fs-3xl: 1.4rem; /* nadpis obrazovky */
--lb-fs-4xl: 1.7rem;
--lb-fs-5xl: 1.9rem;
--lb-fs-6xl: 2.3rem; /* lemma na karte slovicka */
--lb-fs-hero: 2.6rem; /* titul obalky, velke ikony prazdneho stavu */
/* Spacing škála (4-8-12-16-24-32-48-64) */
--lb-sp-1: 4px; --lb-sp-2: 8px; --lb-sp-3: 12px; --lb-sp-4: 16px;
--lb-sp-6: 24px; --lb-sp-8: 32px; --lb-sp-12: 48px; --lb-sp-16: 64px;
/* ---- MEZERY -------------------------------------------------------------
974 hodnot padding/margin/gap v 69 odstinech: .55 vedle .6, .85 vedle .9,
1.25 vedle 1.3. Rozdil nikdo nevidi, ale dohromady to delalo dojem, ze
neco je „nalepene" a neco „rozhazene".
--lb-sp-* vys je 4px mrizka pro rozvrzeni. Tahle skala je RYTMUS OBSAHU
v rem a je odstupnovana podle spicek aplikace (1rem 122x, .5rem 96x,
.6rem 86x), aby sjednoceni nehnulo cely layout. Novy stupen se prida SEM,
cislo se do scoped CSS nepise. */
--lb-gap-0: .15rem; /* vlasova mezera (radek odznaku) */
--lb-gap-1: .25rem;
--lb-gap-2: .4rem;
--lb-gap-3: .5rem;
--lb-gap-4: .6rem;
--lb-gap-5: .8rem;
--lb-gap-6: 1rem; /* zakladni rytmus */
--lb-gap-7: 1.2rem;
--lb-gap-8: 1.5rem;
--lb-gap-9: 2rem;
--lb-gap-10: 2.5rem;
--lb-gap-11: 3rem;
/* Sekce → barva (vizuální identita stop) */
--lb-teal: #1E6E96;
--lb-purple: #7C3AED;
/* Oranzova Opakovani na prehledu predmetu (autor 03.10.2026): tmavsi odstin, aby
popisek dlazdice drzel kontrast na svetlem; --lb-sun je pro text moc svetla. */
--lb-orange: #C2410C;
--lb-sun: #FF8703;
/* Úlohy v rozcestníku hotové lekce (autor 07.10.2026): teplá jantarová, ne cihlová
--lb-orange, ta na panelu působila jako varování. */
--lb-ulohy-bg: #FFF5E6;
--lb-ulohy-border: #F6CF94;
--lb-ulohy-text: #A35208;
--lb-yellow: #F5B301; /* žlutá z designu: žárovka u tipů, barva cvičení */
/* Čtecí vrstva (kniha): článek, replika dialogu, fráze oblasti. Dosud byla
Georgia a #33271d opsaná natvrdo ve Vyuce i v Oblastech. */
/* Od 05.10.2026 Nunito jako nadpisy i rozhraní - jedno písmo napříč appkou (autor:
„článek bych nechal, jen bych sjednotil font"). Dřív Georgia. */
--lb-font-read: 'Nunito', 'Inter', system-ui, sans-serif;
--lb-ink-read: #1E2B26;
/* Ctecí plocha (clanek, dialog). POZOR: --lb-paper uz existuje niz s jinym
vyznamem (pozadi stranky), proto vlastni jmeno. */
/* ── Paleta: role, ne odstiny ──────────────────────────────
PRAVIDLO: v aplikaci nesmi byt barva napsana natvrdo. Kdyz zadna role
nesedi, zalozi se tady NOVA a zapise do docs/design-system.md.
Hlida tools/check_styles.py.
Hodnoty jsou vybrane z odstinu, ktery uz aplikace nejcasteji pouzivala,
aby sjednoceni neprebarvilo pul aplikace. Kde se sesypalo vic odstinu do
jedne role (ctyri teple sede, sest zelenych), je to zamer - prave ta
zivelnost delala nejednotny dojem. */
/* text na barevne plose - a NIC JINEHO. Bila je v obou tematech, takze jako
pozadi karty nebo dlazdice zustavala v tmavem tematu svetla dira: 41
deklaraci ji tak pouzivalo a napriklad karta lekce v prehledu byla bila
s bilym titulkem (1,09:1). Plocha rozhrani je --lb-surface, plovouci
prvek --lb-surface-elevated; oba se v tmavem bloku pretezuji. Vyjimka je
kolecko prepinace (.cross-knob), ktere skutecne lezi na akcentu. */
--lb-on-accent: #FFFFFF;
--lb-on-yellow: #3A2A00;
/* „umim / spravne" - zelena skala */
/* -text je TEXT na jemne zelene plose, -solid je VYPLNENA zelena plocha s
bilym popisem (odznak hotovo, tecka u spravne odpovedi, tlacitko Znam).
Driv to byl jeden token pro oboji, coz v tmavem motivu nejde smirit:
text musi zesvetlat, plocha pod bilym popisem naopak tmava zustat. -solid
proto tmavou hodnotu nema - je to vivid barva znacky, jako oranzove CTA. */
--lb-success-text: #15803D;
--lb-success-solid: #15803D;
--lb-success-bg: #F0FDF4;
--lb-success-bg-hover: #DCFCE7;
--lb-success-border: #86EFAC;
/* „chyba / spatne" */
--lb-error-text: #B3261E;
--lb-error-bg: #FDECEB;
--lb-error-border: #FCA5A5;
/* napoveda / upozorneni (zluta vrstva) */
--lb-hint-bg: #FEF3C7;
/* Okraj a text te same vrstvy. Pribyly kvuli shrnuti davky: vysledek se barvi
podle uspesnosti a slabsi pasmo nema byt cervene jako chyba - to by z „projdi
si to jeste" udelalo verdikt. */
--lb-hint-border: #FCD34D;
/* informace (modra) a gramatika (fialova) v jemnych vrstvach */
--lb-info-bg: #DBEAFE;
--lb-info-text: #1E3A8A;
--lb-purple-bg: #EDE9FE;
/* obrys fialoveho panelu (napr. pravidla na rozcestniku hotove lekce) */
--lb-purple-border: #DDD6FE;
/* Hluboka fialova je konec gradientu na TLACITKU (bily popis na ni lezi),
zatimco stitek fáze potrebuje TEXT na fialove plose. Dva ukoly, dva
tokeny: v tmavem motivu se plocha i text prevraci, gradient ne. */
--lb-purple-deep: #5B21B6;
--lb-purple-text: #5B21B6;
/* „Nauč se nazpaměť" v gramatice: co se nedá odvodit pravidlem. Vlastní teplá žlutá,
aby se nepletla s tipem Boostera (oranžová) ani s pravidlem (fialová). */
--lb-memo-bg: #FFF6DB;
--lb-memo-border: #F2D58A;
--lb-memo-text: #7A5200;
--lb-memo-ico: #D99A00;
/* teple plochy a linky (papirova vrstva mimo cteni: karty, poznamky) */
--lb-warm-tint: #F3F7F5;
--lb-warm-tint-2: #E7EFEB;
--lb-warm-border: #C9D8D0;
/* akcent v jemnych vrstvach */
--lb-accent-tint: #DDF3E8;
--lb-concept-line: var(--lb-accent-border); /* podtržení pojmu v článku */
--lb-concept-line-w: 2px;
--lb-concept-line-thin: 1px;
--lb-concept-line-off: 3px;
--lb-accent-border: #A3D9C0;
--lb-accent-deep: #065F46;
--lb-accent-text: var(--lb-accent-deep); /* text-odkaz v akcentu (Další příklad), 17.10.2026 */
/* gramaticka napoveda (hneda vrstva vykladu) */
--lb-hint-text: #7A5418;
/* teply stred a hloubka: karta postupu */
--lb-warm-mid: #9AB3A7;
--lb-warm-deep: #5E7D6E;
/* Panel se zadanim cviceni - dva konce gradientu plus text na nem. Je to
PLOCHA, ne inkoust: driv tu hluboky konec drzel --lb-ink-read a jakmile
se ctecí inkoust v tmavem tematu prevratil na svetly, panel se rozsvitil
pod svetlym textem. Do e77b7ea byl panel svetly (#f3f4f6) a tmave hnedy
gradient se neujal - ve svetlem tematu je to ted zase svetla plocha,
jen kremova misto sede, a text na ni je tmavy. */
--lb-panel: #EDF7F2;
--lb-panel-2: #DCEFE5;
--lb-panel-text: #1F2623;
--lb-panel-label: var(--lb-accent-deep);
--lb-read-paper: #FFFFFF;
--lb-read-paper-2: #F8FBF9;
/* Mluvci dialogu. Barva se ridi POSTAVOU, ne poradim replik: Anna je vzdycky
oranzova, Tom modry - jinak se barvy prohodily z lekce na lekci podle toho,
kdo v ni mluvil prvni. Vedlejsi postavy (prodavacka, kolemjdouci) maji jednu
spolecnou barvu; v zadne lekci nejsou dve zaraz a jmeno je nad replikou. */
/* Anna ma vlastni hodnotu misto --lb-accent-strong, protoze se v kazdem
tematu resi jinak: na papire drzi oranzova (autor ji tam chce a je to
barva postavy od zacatku), v tmavem splyvala s oranzovymi prvky rozhrani
a jde do ruzova. Je to jedina postava, ktera meni odstin podle tematu. */
--lb-speaker-anna: #B0288F;
--lb-speaker-tom: var(--lb-teal);
/* Zelena, ne fialova: fialova byla od Tomovy modre jen 47 stupnu odstinu a jmena
splyvala. Zelena je od Anny 86 a od Toma 94 stupnu, tedy nejdal od obou. */
--lb-speaker-side: var(--lb-green-vivid);
/* Sila podbarveni repliky (bezna / prave ctena). Procento, ne barva: bublina
je barva mluvciho zamichana do papiru, a na tmavem papire je potreba
zamichat vic, aby bublina nesla tutez informaci jako na svetlem. */
--lb-speaker-tint: 5%;
--lb-speaker-tint-strong: 14%;
--lb-mod-vyuka: var(--lb-accent);
/* Oblasti: tataz zelena jako dlazdice na rozcestniku - modul se pozna podle barvy,
tak nesmi mit jinou barvu v menu a jinou uvnitr. Na plochy vyrazna zelena, na text
tmavsi tehoz odstinu (vyrazna ma na bile kontrast 3,9 - na text nestaci). */
--lb-green-deep: #24800D;
/* Oblasti mají primární barvu jako výuka, ne vlastní zelenou (autor 08.10.2026). */
--lb-mod-oblasti: var(--lb-accent);
--lb-mod-oblasti-text: var(--lb-accent-deep);
--lb-mod-gramatika: var(--lb-purple);
--lb-mod-opakovani: var(--lb-sun);
/* Dashboard — výrazná zelená oblastí + barevné plochy (navzorkováno z mockup-dash1.png) */
--lb-green-vivid: #2E9510;
--lb-hero-bg: #E6F4EC;
--lb-progress-bg: #F1F8F4;
/* Pokrok (docs/zadani-pokrok.md): pásma pojmů a kalendář aktivity. Jen odkazy na role,
žádné hexy - tmavý motiv se propíše sám. Nový pojem je neutrální, učení má barvu
opakování, umím a pevně jsou dva stupně zelené „správně". Kalendář: prázdný den = tint
plochy, slabý = akcent zamíchaný do plochy, silný = akcent. */
--lb-band-new: var(--lb-border-strong);
--lb-band-learning: var(--lb-sun);
--lb-band-known: var(--lb-success);
--lb-band-solid: var(--lb-green-deep);
--lb-heat-0: var(--lb-warm-tint-2);
--lb-heat-1: color-mix(in srgb, var(--lb-accent) 40%, var(--lb-surface));
--lb-heat-2: var(--lb-accent);
--lb-tip-bg: #F1ECFD;
/* Silnejsi stupen teze vrstvy - jen na probliknuti, kdyz na tip student
doscrolluje. Stejna role jako --lb-howto-bg-silna u modre rady. */
--lb-tip-bg-silna: #E2D7FB;
/* Barva rozsviceneho obrysu tipu pri dopadu Boostera (lb-tip-okraj). */
/* Zare za Boosterem (trida .lb-booster): mekky ovál barvy akce pod postavou. Puvodne
jen na prihlaseni SciBoosteru, od 15.10.2026 u Boostera vsude (autor). */
--lb-booster-zare: var(--lb-accent);
--lb-tip-zare: var(--lb-purple);
/* Cyklus tipu: jak casto Booster povyskoci a bublina se rozsviti (7 s bylo moc casto,
autor 10.10.2026). Start je zaporne zpozdeni na zacatek skoku (88 % cyklu). */
--lb-tip-cyklus: 7s;
--lb-tip-start: -5.56s;
/* Jednorazova rada o OVLADANI appky („klik oznaci, dvojklik posune“). Zamerne jina
barva nez --lb-tip-bg: vyukovy tip uci jazyk a zustava, tenhle uci appku a po
odkliknuti zmizi. Kdyby mely tutez plochu, student by je nerozlisil. */
--lb-howto-bg: #E8F1FB;
--lb-howto-border: #B8D4F0;
--lb-howto-head: #2C5D8F;
/* Silnejsi stupen teze rodiny. Pribyl kvuli probliknuti, kdyz na radu student
doscrolluje: barva na pul vteriny zesili a zase se vrati. */
--lb-howto-bg-silna: #D6E7F8;
--lb-howto-border-silna: #8FBCE4;
/* Karaoke: lupa, ktera jede po ctenem textu. Zamerne SLABA - je to vodítko,
kam se divat, ne zvyrazneni obsahu. Kdyby konkurovala oznacenemu vyrazu
v Boosterovi nebo klikatelnemu slovu, prekryla by je pri kazdem cteni.
Barvu bere z MISTA, kde zrovna jede: replika ma podklad v barve mluvciho,
takze oranzova lupa nad modrou Tomovou replikou byla cizi teleso. `--lb-lupa-barva`
si prepise kontext (viz .line ve Vyuka.razor.css) a lupa je pak vzdycky tmavsi
odstin toho, nad cim stoji. Bez prepsani plati oranzova vyuky.
Michani barvy dela az `.lb-lupa`, ne token: hodnota tokenu se vyhodnoti uz na
:root a lokalniho prepisu by si nevsimla. V palete proto zustavaji jen SILY. */
--lb-lupa-barva: var(--lb-accent);
--lb-lupa-sila: 16%;
--lb-lupa-sila-okraj: 34%;
/* Fonty (Inter UI; Lora→Fraunces fallback na nadpisy) */
--lb-font-body: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
/* Nadpisy zaobleným bezpatkovým písmem (04.10.2026): přívětivější pro děti, sedí
k zaoblenému logu. Text článku zůstává patkový (--lb-font-read). */
--lb-font-head: 'Nunito', 'Inter', system-ui, sans-serif;
/* Sekce (barva stopy) - .lb-btn a spol. z ni kresli hlavni akci a hover.
Uvnitr .lb-wizard ji sekce prepise; mimo nej plati oranzova vyuky, jinak
by tlacitko za wizardem zustalo bez barvy a gradient by se nevykreslil. */
--lb-section: var(--lb-accent);
--lb-section-gradient: var(--lb-cta-gradient);
/* Legacy aliasy — stará jména tokenů dál fungují a dědí theme */
--lb-terracotta: var(--lb-accent);
--lb-accent-soft: var(--lb-accent-hover);
--lb-ink: var(--lb-text);
--lb-muted: var(--lb-text-muted);
--lb-paper: var(--lb-bg);
--lb-paper-warm: var(--lb-sidebar);
--lb-card: var(--lb-surface);
--lb-line: var(--lb-border);
--lb-green: var(--lb-success);
--lb-mustard: var(--lb-sun);
--lb-olive: var(--lb-success);
--lb-mint: #5EEAD4;
/* Bootstrap override */
--bs-primary: #059669;
--bs-body-color: #1F2623;
--bs-body-bg: #F7FAF8;
--bs-link-color: #047857;
--bs-link-hover-color: #065F46;
--bs-border-color: #E1E8E4;
}
[data-theme="dark"] {
color-scheme: dark;
--lb-accent: #059669;
--lb-accent-hover: #10B981;
--lb-accent-strong: #34D399; /* na tmavém je „silnější" světlejší (glow) */
--lb-accent-text: #34D399;
/* Povrchy (DARK) — navzorkováno z mockup-dark.png (neutrálnější, nižší kontrast) */
--lb-bg: #0F1014;
/* Výchozí panel (05.10.2026, autor): plocha --lb-surface a okraj --lb-border. Dřív
#14171B na #0F1014 s okrajem #20242B - panel s pozadím splýval a otázky, karty i
výběry byly v tmavém motivu nečitelné. Světlejší plocha a viditelný okraj platí
pro všechny neutrální panely najednou; barevné panely si barvu míchají samy. */
--lb-surface: #161B22;
--lb-surface-elevated: #1C222A;
--lb-sidebar: #0F1216;
--lb-text: #F5F5F5;
--lb-text-secondary: #B8BEC8;
--lb-text-muted: #7E8794;
--lb-text-disabled: #5E6673;
/* O stupeň světlejší (autor 07.10.2026): plochy se od pozadí lišily jen málo
a rámečky s nimi splývaly - karty, rozbalovací volby i panely. */
--lb-border: #353E4A;
--lb-border-strong: #4A5464;
/* Rámeček klikací dlaždice (témata a díly oblastí) - o stupeň tmavší než linka, aby
dlaždice nesplývala s pozadím (autor 08.10.2026). */
--lb-tile-border: #545F70;
--lb-success: #48BB78;
--lb-warning: #ED8936;
--lb-error: #FC8181;
--lb-info: #63B3ED;
/* Na tmavem podkladu je jemny stin neviditelny - stupne drzi tutez roli,
jen hlubsi, aby karta sla porad poznat od plochy pod ni. */
--lb-shadow-xs: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.24);
--lb-shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 8px 24px rgba(0,0,0,.30);
--lb-shadow-md: 0 2px 6px rgba(0,0,0,.36), 0 14px 32px rgba(0,0,0,.38);
--lb-shadow-up: 0 -1px 2px rgba(0,0,0,.32), 0 -8px 24px rgba(0,0,0,.34);
--lb-scrim: rgba(0, 0, 0, .62);
--lb-toast-bg: #2A2E35;
--lb-toast-text: #F5F5F5;
--lb-shadow: 0 12px 40px rgba(0,0,0,.35);
--lb-shadow-lg: 0 16px 48px rgba(0,0,0,.45);
--lb-shadow-hairline: 0 0 0 1px rgba(0,0,0,.35);
/* Dashboard plochy v tmavém — tlumené, ne světlé díry */
--lb-green-vivid: #5BC93B;
/* V tmavém je „tmavsi na text" naopak SVETLEJSI - tmava zelena by na tmavem podkladu
zmizela. Role zustava tataz (zelena na text), hodnota se prevraci. */
--lb-green-deep: #86DD6C;
/* Ctecí inkoust se musi prevracet jako kazda jina role: v tmavem tematu je
"tmavy inkoust na papire" naopak SVETLY, jinak replika dialogu i nadpis
Boosterova tipu zmizely tmave na tmavem. O chlup tepleji nez --lb-text, aby
cteni nebylo studene, ale bez hnedeho nadechu - ten dela papir, ne inkoust. */
--lb-ink-read: #E9E6E2;
/* Ctecí papir v tmavem tematu ztmavne. Neutralne, ne do tepla: teply hnedy
papir si sedl s hnedym panelem cviceni pod nim a cela faze cteni pak byla
jedna hneda plocha. Papir je o odstin SVETLEJSI nez --lb-surface pod nim,
takze list porad jde poznat od rozhrani, jen uz ne barvou. */
--lb-read-paper: #171A1F;
--lb-read-paper-2: #14171B;
/* Panel se zadanim je v tmavem tematu tmava plocha se svetlym textem, tedy
obracene nez ve svetlem. Neutralni, ne hneda: hneda se sesla s tmavym
pozadim a cetla se jako skvrna, ne jako plocha se zadanim. */
--lb-panel: #262B33;
--lb-panel-2: #1B1F26;
--lb-panel-text: #FBF7F1;
--lb-panel-label: #C4BDB5;
/* Ruzova Anna se v tmavem tematu rozsvetluje jako kazda jina barva na text. */
--lb-speaker-anna: #EE8CD2;
/* Tomova modra je jedina barva mluvciho, ktera je sama o sobe tmava - na
tmavem papire mela kontrast kolem 2,8:1 a jmeno slo precist jen se snahou.
Anna i vedlejsi postava uz svetle jsou. Role zustava tataz, hodnota se
prevraci - stejne jako u --lb-green-deep. */
--lb-speaker-tom: #5FA8D0;
/* Na tmavem papire je 5 % barvy mluvciho neviditelnych: bublina zmizela a
zbylo jen jmeno nad replikou. */
--lb-speaker-tint: 14%;
--lb-speaker-tint-strong: 26%;
--lb-hero-bg: #131B17;
--lb-progress-bg: #111713;
/* Pásma Pokroku: --lb-green-deep je v tmavém motivu světlá a pevně by svítilo nad vším
ostatním. Ve tmě je „silnější" jasnější: umím = zelená zamíchaná do plochy, pevně = plná. */
--lb-band-known: color-mix(in srgb, var(--lb-success) 55%, var(--lb-surface));
--lb-band-solid: var(--lb-success); /* tmavý motiv */
--lb-tip-bg: #1B1730;
--lb-tip-bg-silna: #262043;
/* Rada o ovladani - modra rodina i v tmavem, aby se nepletla s oranzovym tipem. */
--lb-howto-bg: #16202B;
--lb-howto-border: #2A4055;
--lb-howto-head: #8CC4EE;
--lb-howto-bg-silna: #1D2C3B;
--lb-howto-border-silna: #3A5A78;
/* Lupa na tmavem pozadi potrebuje vic, aby byla vubec videt. */
--lb-lupa-sila: 26%;
--lb-lupa-sila-okraj: 48%;
/* Teple plochy (DARK). Kremova --lb-warm-tint je nejcastejsi jemna plocha v
appce - preklad pod clankem, poznamka pod cvicenim, hotova lekce, aktivni
kurz v nastaveni. Bez hodnoty v tomto bloku zustavala v tmavem tematu
kremova: svetla dira, a navic na ni psal --lb-text, tedy svetle na svetle.
Hodnoty drzi o stupen nad --lb-surface, aby plocha zustala "jemne jina"
jako ve svetlem, ne aby svitila. */
--lb-warm-tint: #1B1E23;
--lb-warm-tint-2: #22262C;
--lb-warm-border: #2E343D;
/* Stitek fáze cviceni a hinty: --lb-hint-bg musi ztmavnout spolu s
--lb-hint-text, protoze ta dvojice se pouziva zaroven (stitek) i zvlast
(--lb-hint-text lezi i na --lb-warm-tint vyse). Kdyby ztmavl jen jeden,
rozbije se druhe misto. */
--lb-hint-bg: #2A2113;
--lb-hint-border: #56411A;
--lb-hint-text: #D2A679;
/* Stavove plochy (DARK). Prevraci se v PARECH: kdyby ztmavla jen plocha,
zustal by na ni tmavy text, a kdyby jen text, plocha sviti dal. Takhle
mel panel "Lekce hotova" v tmavem motivu 1,79:1 (kremova karta se
sekundarnim textem) a chybova plocha 1,64:1. Obrysy (--lb-*-border) tu
nejsou: ty se v tmavem cti jako prstenec a svetle zustat maji. */
--lb-success-text: #7BD79A;
--lb-success-bg: #16251C;
--lb-success-bg-hover: #1D3325;
--lb-error-text: #F5A3A0;
--lb-error-bg: #2A1817;
--lb-info-bg: #16222E;
--lb-info-text: #8CC4EE;
--lb-purple-bg: #221C3A;
--lb-orange: #FB923C;
--lb-ulohy-bg: #2A2114;
--lb-ulohy-border: #5E4524;
--lb-ulohy-text: #FBC27A;
--lb-purple-text: #C4B5FD;
--lb-purple-border: #3A3160;
--lb-memo-bg: #2A2310;
--lb-memo-border: #4A3B12;
--lb-memo-text: #F5D27A;
--lb-memo-ico: #F5B301;
/* Podbarveni slova pod kurzorem v clanku - plocha, takze taky ztmavne. */
--lb-accent-tint: #15261F;
--bs-body-color: #F5F5F5;
--bs-body-bg: #0F1014;
--bs-border-color: #20242B;
}
html, body {
font-family: var(--lb-font-body);
background-color: var(--lb-paper);
color: var(--lb-ink);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--lb-font-head);
font-weight: 600;
color: var(--lb-ink);
}
h1:focus {
outline: none;
}
/* ============================================================
Globální „hotovo" odznak — JEDEN styl napříč všemi stopami
(výuka, čtení, slovní zásoba/oblasti, gramatika). Uprav tady → změní se všude.
Použití: hotovo (fajfka je z ::before)
============================================================ */
.lb-done-badge {
display: inline-flex;
align-items: center;
gap: .25rem;
background: #eef6f0;
color: #15803d;
border: 1px solid #cbe6d3;
border-radius: 999px;
padding: .18rem .6rem;
font-size: .76rem;
font-weight: 600;
line-height: 1;
}
.lb-done-badge::before { content: "✓"; font-weight: 700; }
/* ============================================================
Počet čekajících věcí na ikoně (např. slova k opakování v dolní liště).
Použití: 12 v prvku s position: relative.
============================================================ */
.lb-count-badge {
position: absolute;
/* Pod hranou položky: na ní je ukazatel „tady jsem" (3 px) a odznak by ho přeryl. */
top: .55rem; left: 50%;
margin-left: .75rem; /* ikona 22 px je na středu: odznak začne až za jejím pravým okrajem */
min-width: 1.15rem; height: 1.15rem;
padding: 0 .3rem;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px;
background: var(--lb-accent);
color: var(--lb-on-accent);
font-size: .68rem;
font-weight: 700;
line-height: 1;
}
a, .btn-link {
color: var(--lb-accent);
}
a:hover, .btn-link:hover {
color: var(--lb-accent-strong);
}
.btn-primary {
color: #fff;
background-color: var(--lb-accent);
border-color: var(--lb-accent);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
background-color: var(--lb-accent-strong);
border-color: var(--lb-accent-strong);
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem rgba(5, 150, 105, 0.45);
}
.form-check-input:checked {
background-color: var(--lb-accent);
border-color: var(--lb-accent);
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: .6rem 1.25rem .7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: .75rem;
top: .5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
/* ============================================================
DESIGN SYSTEM — pojmenované komponenty (viz docs/design-system.md)
PRAVIDLO: nová obrazovka se skládá z těchto tříd. Když se něco nevejde,
je to ROZHODNUTÍ: buď se rozšíří komponenta tady (a platí všude), nebo se
vědomě založí nový styl a zapíše do docs/design-system.md. Co se nezapíše,
za půl roku nikdo nedohledá - a design se rozjede přesně takhle: dnes je
v aplikaci 57 různých velikostí písma ve 376 pravidlech.
Tyhle třídy NEJSOU scoped (nejsou v .razor.css), takže platí ve všech
sekcích. Scoped CSS smí řešit jen ROZMÍSTĚNÍ, ne vzhled.
============================================================ */
/* ── Text ──────────────────────────────────────────────────── */
/* Standardní text aplikace (popisky, próza rozhraní). */
.lb-text {
font-family: var(--lb-font-body);
font-size: .95rem;
line-height: 1.55;
color: var(--lb-text);
}
/* ============================================================
Most ve cviceni - veta v domacim jazyce, kterou si student vyzada.
Tentyz prvek zil v peti komponentach ve DVOU identitach: tri mely teplou
plochu s oranzovym pruhem a serifovy text v akcentu, dve zlutou plochu
hintu a text v hnede. Zluta ale v teto appce znamena TIP (zarovka), a most
neni tip - je to preklad zadani. Plati tedy akcentni podoba.
Velikost byla xl u tri a 2xl u dvou; plati xl.
Rozmisteni (odsazeni nad/pod) zustava ve scoped CSS, protoze v kazdem
cviceni sedi most jinde.
============================================================ */
/* Přepínač domácího jazyka (vlaječka + název) - karta slovíčka i zadání cvičení vypadají
stejně, vpravo dole na kartě (autor 09.10.2026). Rozmístění si řeší místo použití. */
.lb-lang-chip {
display: inline-flex; align-items: center; gap: var(--lb-gap-1);
padding: var(--lb-gap-0) var(--lb-gap-4); border-radius: var(--lb-radius-pill);
border: 1px solid var(--lb-border); background: var(--lb-surface); color: var(--lb-text-muted);
font-family: inherit; font-size: var(--lb-fs-sm); cursor: pointer; transition: all .15s;
}
.lb-lang-chip:hover { border-color: var(--lb-accent); color: var(--lb-accent); }
.lb-lang-chip.on { border-color: var(--lb-accent); color: var(--lb-accent); background: color-mix(in srgb, var(--lb-accent) 8%, var(--lb-surface)); }
.lb-lang-chip-flag { font-size: var(--lb-fs-md); line-height: 1; }
/* Překlad do domácího jazyka pod slovem - „= být", tiše. */
.lb-native-gloss { font-size: var(--lb-fs-md); color: var(--lb-text-muted); }
.lb-native-gloss::before { content: "= "; opacity: .5; }
/* Překlad do jiného jazyka (most): tichá nápověda, ne panel. Bez podbarvení a pruhu vlevo -
ten styl jinde v aplikaci nemáme a nápověda křičela víc než zadání (autor 09.10.2026). */
.lb-bridge {
padding: var(--lb-gap-2) 0;
text-align: center;
}
.lb-bridge-label {
font-size: var(--lb-fs-sm);
color: var(--lb-text-secondary);
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 600;
margin-bottom: var(--lb-gap-2);
}
.lb-bridge-text {
font-size: var(--lb-fs-md);
font-style: italic;
color: var(--lb-text-secondary);
}
/* Konverzační text = to, co říká postava (replika dialogu, článek lekce).
Serif, čtecí velikost - je to KNIHA, ne rozhraní. */
.lb-text-talk {
font-family: var(--lb-font-read);
font-size: 1.05rem;
line-height: 1.75;
color: var(--lb-ink-read);
}
/* Překladový text pod replikou/odstavcem - nesmí soupeřit s originálem. */
.lb-text-trans {
font-family: var(--lb-font-body);
font-size: .9rem;
line-height: 1.5;
font-style: italic;
color: var(--lb-text-muted);
}
/* Lemma = slovo na kartě slovíčka, hlavní hrdina obrazovky. */
.lb-text-lemma {
font-family: var(--lb-font-head);
font-size: var(--lb-fs-6xl);
font-weight: 700;
line-height: 1.1;
color: var(--lb-ink);
}
/* Booster vsude se zari za sebou (autor 15.10.2026, prevzato z prihlaseni SciBoosteru).
Prechod je primo pozadi obrazku - postava je pruhledna, takze zare presvita za ni a
nepotrebuje obalovy prvek ani ::before. Barva z tokenu --lb-booster-zare. */
/* Ovál je velký a na středu (16.10.2026): nízký plochý ovál u spodku (75 % x 38 % na 82 %)
seděl pod nohama stojícího Boostera, ale ležící a spící póza ho celý zakryla dekou a knihou
a na malém obrázku nebyla záře vidět vůbec. */
.lb-booster {
background: radial-gradient(ellipse 82% 70% at 50% 60%,
color-mix(in srgb, var(--lb-booster-zare) 30%, transparent) 0%,
transparent 72%);
}
/* Tabulka a odrážkový seznam v článku (BlokyOdstavce, autor 15.10.2026): výčet souběžných
pravidel (znaky dělitelnosti) je přehlednější v tabulce než v jednom odstavci. Vzhled jako
tabulka Taháku: záhlaví na podbarvené pilulce, řádky oddělené tenkou linkou. Celé v jednom
bloku, odstavec kolem má pre-wrap. */
.lb-blok-text { white-space: pre-wrap; }
.lb-tabulka-obal { overflow-x: auto; margin: var(--lb-gap-4) 0; white-space: normal; }
.lb-tabulka { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lb-fs-md); color: var(--lb-text); }
.lb-tabulka th {
text-align: left; font-size: var(--lb-fs-sm); font-weight: 700; color: var(--lb-ink);
padding: var(--lb-gap-3); background: var(--lb-bg);
}
.lb-tabulka th:first-child { border-radius: var(--lb-radius-sm) 0 0 var(--lb-radius-sm); padding-left: var(--lb-gap-4); }
.lb-tabulka th:last-child { border-radius: 0 var(--lb-radius-sm) var(--lb-radius-sm) 0; }
.lb-tabulka td { padding: var(--lb-gap-3); border-bottom: 1px solid var(--lb-border); vertical-align: top; }
.lb-tabulka td:first-child { padding-left: var(--lb-gap-4); font-weight: 700; white-space: nowrap; }
.lb-tabulka tr:last-child td { border-bottom: none; }
/* Telefon (autor 18.10.2026): tabulka se má vejít bez vodorovného posuvníku - první sloupec
se smí zalomit, menší písmo a odsazení buněk. */
@media (max-width: 480px) {
.lb-tabulka { font-size: var(--lb-fs-sm); }
.lb-tabulka td, .lb-tabulka th { padding: var(--lb-gap-2); }
.lb-tabulka td:first-child, .lb-tabulka th:first-child { padding-left: var(--lb-gap-3); white-space: normal; }
}
[data-theme="dark"] .lb-tabulka th { background: var(--lb-surface-elevated); }
.lb-seznam { margin: var(--lb-gap-3) 0; padding-left: var(--lb-gap-7); white-space: normal; }
.lb-seznam li { margin: var(--lb-gap-2) 0; }
/* Text Boostera (tip, bublina) - vysvětlení, ne obsah lekce. */
.lb-text-booster {
font-family: var(--lb-font-body);
font-size: .92rem;
line-height: 1.5;
color: var(--lb-text);
}
/* Nadpis a úvodní řádka sekce - stejné v lekci, oblasti i gramatice.
Barvu bere ze sekce (--lb-section), takže fialová gramatika se nemusí
definovat zvlášť. */
.lb-section-title {
font-family: var(--lb-font-head);
font-size: 1.1rem;
margin: 0 0 .6rem;
color: var(--lb-section);
}
.lb-section-intro {
font-family: var(--lb-font-body);
font-size: .9rem;
color: var(--lb-text-secondary);
margin-bottom: .8rem;
}
/* ── Tlačítko ──────────────────────────────────────────────── */
.lb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-gap-2);
font-family: inherit; font-size: var(--lb-fs-md); font-weight: 600;
border: 1px solid var(--lb-border-strong);
background: var(--lb-surface);
color: var(--lb-text);
border-radius: var(--lb-radius-sm); padding: var(--lb-gap-4) var(--lb-gap-7);
cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s, filter .12s;
}
.lb-btn:hover:not(:disabled) { border-color: var(--lb-section); color: var(--lb-section); }
.lb-btn:disabled { opacity: .55; cursor: default; }
/* Hlavní akce sekce - barvu bere ze sekce, takže jedno tlačítko slouží
oranžové lekci i fialové gramatice. */
.lb-btn.is-primary {
background: var(--lb-section-gradient);
color: var(--lb-on-accent); border-color: transparent;
box-shadow: 0 6px 16px color-mix(in srgb, var(--lb-section) 32%, transparent);
}
.lb-btn.is-primary:hover:not(:disabled) { filter: brightness(1.05); color: var(--lb-on-accent); }
/* Tlačítko se dvouřádkovým popisem: nahoře název, pod ním malým, CO se stane.
Vzniklo u hodnocení slova („Těžké" a „Znám" zněly oba jako hodnocení, ne jako akce)
a je to role, ne lokální styl - stejná dvojice stojí v opakování i v objevování slov.
Podtitulek dědí barvu od tlačítka, takže u plné výplně je bílý jako název a nemusí
se rozepisovat pro každý stav. --lb-fs-xs je v paletě přesně „popisky pod prvkem". */
.lb-btn-2l { flex-direction: column; gap: 0; line-height: 1.15; }
.lb-btn-2l .lb-lbl { font-weight: 700; }
.lb-btn-2l .lb-sub { font-size: var(--lb-fs-xs); font-weight: 500; opacity: .78; }
/* Značka na slovo („Těžké" / „Znám"). V klidu průhledná, stiskem se vybarví - stav
slova je pak vidět na první pohled a nepletou se s akcí, která dávku posouvá.
Je to role, ne lokální styl: táž dvojice stojí v procvičování i v procházení
slovíček a musí vypadat i reagovat stejně. */
.lb-btn-mark {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
padding: var(--lb-gap-2) var(--lb-gap-5); border-radius: var(--lb-radius-pill);
font-family: inherit; font-size: var(--lb-fs-base); font-weight: 600;
/* Bílé pozadí a širší rámeček (autor 05.10.2026): průhledné tlačítko splývalo s plochou
pod sebou a tenká linka se ztrácela. */
background: var(--lb-surface); border: 2px solid transparent;
box-shadow: var(--lb-shadow-xs);
cursor: pointer; transition: all .15s;
}
.lb-btn-mark.is-hard { border-color: var(--lb-error-border); color: var(--lb-error-text); }
.lb-btn-mark.is-hard:hover { background: var(--lb-error-bg); border-color: var(--lb-error); }
.lb-btn-mark.is-hard.on {
background: var(--lb-error); border-color: var(--lb-error);
color: var(--lb-on-accent); box-shadow: var(--lb-ring-error);
}
.lb-btn-mark.is-know { border-color: var(--lb-success-border); color: var(--lb-success-text); }
.lb-btn-mark.is-know:hover { background: var(--lb-success-bg); border-color: var(--lb-success-solid); }
.lb-btn-mark.is-know.on {
background: var(--lb-success-solid); border-color: var(--lb-success-solid);
color: var(--lb-on-accent); box-shadow: var(--lb-ring-success);
}
/* Odbočka do cvičení - žlutá, aby se nepletla s „pokračovat". Na rozcestníku dávky
ji autor vrátil na oranžovou (procvičení TAM je ten další krok), takže roli teď
nikdo nepoužívá; zůstává pro odbočku, která se pletla s pokračováním. */
.lb-btn.is-practice {
background: var(--lb-yellow); color: var(--lb-on-yellow); border-color: transparent;
box-shadow: var(--lb-shadow-practice);
}
.lb-btn.is-practice:hover:not(:disabled) { filter: brightness(1.05); color: var(--lb-on-yellow); border-color: transparent; }
/* Tichá akce (přeskočit, zpět) - nese jen text. */
.lb-btn.is-quiet {
border-color: transparent; background: transparent;
color: var(--lb-text-muted); font-weight: 500;
}
/* Rámeček z obecného .lb-btn:hover sem nepatří - tichá akce je odkaz, ne tlačítko
(autor 07.10.2026: „hover na link má rámeček"). */
.lb-btn.is-quiet:hover:not(:disabled) { color: var(--lb-section); border-color: transparent; }
/* Tlačítko Zpět pod obsahem vlevo (autor 08.10.2026). Sticky: u dlouhého obsahu drží
v levém dolním rohu nad patičkou a je zvýrazněné stínem, po dorolování si sedne na
své místo pod obsahem a vypadá jako běžné tlačítko. Kontejner samotný kliky
propouští, aby přes obsah neblokoval nic kromě tlačítka. */
.lb-zpet-dole {
position: sticky; bottom: calc(var(--lb-botnav-h) + var(--lb-gap-4)); z-index: 15;
display: flex; justify-content: flex-start; margin-top: var(--lb-gap-7);
pointer-events: none; container-type: scroll-state;
}
.lb-zpet-dole > .lb-btn { pointer-events: auto; transition: box-shadow .15s, border-color .15s; }
/* Plné pozadí i při hoveru: Bootstrap `.btn:hover` ho jinak zprůhlední a přes obsah
by prosvítal text (autor 09.10.2026). */
.lb-zpet-dole > .lb-btn, .lb-zpet-dole > .lb-btn:hover { background: var(--lb-surface); }
/* Akce vpravo ve stejné řadě (Další tahák): ukáže se, až Zpět sedne na své místo. */
.lb-zpet-dole > .lb-zpet-vpravo { margin-left: auto; pointer-events: auto; }
@container scroll-state(stuck: bottom) {
/* Nad obsahem výrazný stín, ať tlačítko z textu vystoupí. */
.lb-zpet-dole > .lb-btn { box-shadow: var(--lb-shadow-lg), var(--lb-shadow-md); border-color: var(--lb-tile-border); }
.lb-zpet-dole > .lb-zpet-vpravo { visibility: hidden; pointer-events: none; }
}
/* ── Sekce wizardu (lekce / oblast / gramatika / opakování) ──
Stejné rozvržení a etapová lišta; sekce se odlišuje JEN barvou. */
.lb-wizard { --lb-section: var(--lb-accent); --lb-section-gradient: var(--lb-cta-gradient); }
.lb-wizard.is-grammar { --lb-section: var(--lb-purple); --lb-section-gradient: linear-gradient(135deg, #7C3AED, #9F67FF); }
.lb-wizard.is-domain { --lb-section: var(--lb-accent); --lb-section-gradient: var(--lb-cta-gradient); }
.lb-wizard.is-review { --lb-section: var(--lb-sun); --lb-section-gradient: linear-gradient(135deg, #FF8703, #ffa640); }
/* Etapová lišta jako pilulka (04.10.2026, dřív „zapadající šipky"). Sdílí ji lekce,
oblasti i gramatika; sekce se odlišuje jen barvou aktivní etapy. Lekce má u etap ikony
a na úzké liště se neaktivním etapám schová popisek - čtyři popisky se na telefon
nevejdou a useknuté „Čte…" je horší než samotná ikona. */
.breadcrumb {
container-type: inline-size;
display: flex; gap: 4px; padding: 4px;
margin-bottom: 1.7rem;
background: var(--lb-surface);
border: 1px solid var(--lb-border);
border-radius: var(--lb-radius-pill);
}
.breadcrumb .crumb {
flex: 1 1 0; min-width: 0;
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: .45rem .5rem;
border-radius: var(--lb-radius-pill);
color: var(--lb-text-secondary);
font-family: var(--lb-font-head);
font-size: .86rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.breadcrumb .crumb svg { width: 18px; height: 18px; flex: 0 0 auto; }
.breadcrumb .crumb > span { overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } /* při line-height 1 ořízl overflow čárku nad Ú („Úlohy") */
/* Ikona etapy a u hotové etapy malá zelená fajfka v pravém dolním rohu (autor 16.10.2026):
ikona zůstává, aby i na úzké liště bez popisků bylo vidět, která etapa je hotová. */
.breadcrumb .crumb-ikona { position: relative; display: inline-flex; font-style: normal; }
.breadcrumb .crumb-fajfka {
position: absolute; right: -5px; bottom: -4px;
display: grid; place-items: center;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--lb-accent);
color: var(--lb-on-accent);
box-shadow: 0 0 0 2px var(--lb-surface);
}
.breadcrumb .crumb .crumb-fajfka svg { width: 8px; height: 8px; }
@container (max-width: 420px) {
.breadcrumb .crumb:not(.active):has(svg) > span { display: none; }
}
/* Pět etap (lekce předmětu se Zajímavostmi, 16.10.2026) se ořezávalo už na šířce kolem 680 px
(„Zají…", „Hot…") - popisek mají jen aktivní etapy i na širší liště. */
@container (max-width: 760px) {
.breadcrumb:has(> .crumb:nth-child(5)) .crumb:not(.active):has(svg) > span { display: none; }
}
/* Etapa, ktera prave dobehla, se jednou tise zazeleni. Bez toho se lista prepne
skokem a postup v lekci neni videt - prave to delalo appku staticnou. Animace
bezi jen pri zmene tridy, tedy jednou za etapu. */
@keyframes lb-crumb-done {
0% { transform: scale(1); }
40% { transform: scale(1.06); }
100% { transform: scale(1); }
}
/* Hotová etapa (05.10.2026, autor; od 16.10.2026 ikona s fajfkou v rohu): jasně zelená se bila s barvou aktivní etapy
(u úloh fialová). Že je hotová, říká fajfka v rohu ikony a tmavší text; budoucí etapy jsou šedé
(--lb-text-secondary), nejsvětlejší šedá byla vybledlá. */
.breadcrumb .crumb.passed {
color: var(--lb-text);
animation: lb-crumb-done .45s ease-out;
}
.breadcrumb .crumb { transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) {
.breadcrumb .crumb.passed { animation: none; }
.breadcrumb .crumb { transition: none; }
}
.breadcrumb .crumb.active { flex-grow: 1.5; background: var(--lb-section-gradient); color: #fff; }
/* Gramatická etapa uvnitř lekce je fialová i tam, kde je sekce oranžová. */
.breadcrumb .crumb.crumb-gram.active { background: linear-gradient(135deg, var(--lb-purple), #9F67FF); }
/* Zajímavosti (etapa lekce předmětu, 16.10.2026) jsou fialové jako jejich obrazovka. */
.breadcrumb .crumb.crumb-zaj.active { background: linear-gradient(135deg, var(--lb-purple), #9F67FF); }
/* Ukazatel postupu (05.10.2026): popis vlevo, číslo „n / m" vpravo, tenká lišta pod tím -
stejně jako hlavička lekce a karta lekce na přehledu. Nahradil kroužky s procenty, které
byly v Opakování, Přehledu lekcí, gramatice i oblastech každý trochu jiný. Barvu nese
`--lb-postup` (výchozí akcent), stránka ji nastaví podle sekce. */
.lb-postup { display: flex; flex-direction: column; gap: var(--lb-gap-2); min-width: 0; width: 100%; align-self: stretch; }
.lb-postup-radek { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lb-gap-3); }
.lb-postup-popis { font-size: var(--lb-fs-sm); color: var(--lb-text-muted); min-width: 0; }
.lb-postup-cislo {
font-family: var(--lb-font-head); font-weight: 800; font-size: var(--lb-fs-md);
color: var(--lb-postup, var(--lb-accent)); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lb-postup-lista {
height: 8px; border-radius: var(--lb-radius-pill); overflow: hidden;
background: color-mix(in srgb, var(--lb-postup, var(--lb-accent)) 16%, transparent);
}
.lb-postup-lista span {
display: block; height: 100%; border-radius: var(--lb-radius-pill);
background: var(--lb-postup, var(--lb-accent)); transition: width .3s ease;
}
/* ============================================================
Vyklad gramatiky jako seznam bodu (Zvyrazneni.Body). Globalne: prvky
vznikaji v RenderFragmentu staticke tridy, takze scoped CSS stranky na
ne nedosahne - stejne jako u word-tipu nize.
============================================================ */
.lb-vyklad-uvod { margin: 0 0 var(--lb-gap-3); }
.lb-vyklad-body { margin: 0; padding-left: 1.2em; }
.lb-vyklad-body li { margin: var(--lb-gap-2) 0; }
.lb-vyklad-body li::marker { color: var(--lb-purple); }
/* ============================================================
Word tip + popup — globální (MarkupString nemá Blazor scope)
============================================================ */
.word-tip {
border-bottom: 1px dotted rgba(28, 25, 23, 0.35);
cursor: help;
display: inline;
}
.lb-word-popup {
position: absolute;
z-index: 500;
min-width: 180px;
max-width: 300px;
padding: .9rem 1.1rem;
background: linear-gradient(165deg, #22352D 0%, #18251F 100%);
border-top: 3px solid rgba(16, 185, 129, 0.5);
border-radius: 12px;
box-shadow: 0 4px 8px rgba(28,25,23,0.15), 0 12px 28px rgba(28,25,23,0.25);
pointer-events: none;
}
.lb-word-popup[hidden] { display: none; }
.wp-lemma-row {
display: flex;
align-items: baseline;
gap: .6rem;
flex-wrap: wrap;
}
.wp-lemma {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.3rem;
font-weight: 600;
color: #FFF7F0;
line-height: 1.2;
}
.wp-gloss {
font-size: .95rem;
color: #FBBF24;
font-style: italic;
font-weight: 500;
}
.wp-forms {
margin-top: .4rem;
font-size: .8rem;
color: rgba(255, 245, 238, 0.65);
font-family: 'JetBrains Mono', 'Consolas', monospace;
border-left: 2px solid rgba(255,245,238,0.2);
padding-left: .5rem;
}
/* ============================================================
Loadovací obrazovka — znak + brand + progress
============================================================ */
.app-loader {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.15rem;
background: var(--lb-paper);
font-family: var(--lb-font-body);
}
.loader-mark {
height: 200px;
width: auto;
animation: lb-float 2s ease-in-out infinite;
filter: drop-shadow(var(--lb-shadow));
}
@keyframes lb-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
/* Booster u tipu (rada, Pouziti, vyukovy tip): jednou za cyklus bubliny (--lb-tip-cyklus,
7 s; 12 s autor 12.10.2026 vratil - interval byl dlouhy) jemne povyskoci a v 91 % dopadne - v tu chvili se rozsviti obrys bubliny a zarovka.
Jen nahoru: transform layout nemeni a Booster nevyjede pod spodni hranu, takze stranka
neposkakuje (duvod, proc tu skok drive nebyl). Pousti ho trida `lb-pulse-go` z js/pulse.js;
zaporne zpozdeni --lb-tip-start preskoci klid, prvni skok prijde hned (autor 10.10.2026).
Procenta jsou spocitana na 7 s (skok ~1,2 s, zablesk ~0,7 s) - pri zmene cyklu prepocitat. */
@keyframes lb-tip-booster {
0%, 79.43% { transform: translateY(0); }
86.29% { transform: translateY(-8px); animation-timing-function: ease-in; }
91.43% { transform: translateY(0); }
94% { transform: translateY(-2px); }
96.57%, 100% { transform: translateY(0); }
}
/* Pri dopadu se rozsviti jen obrys bubliny a zarovka v nadpisu, plocha bubliny zustava
(autor 10.10.2026: blikani cele bubliny bylo moc). Obrys je outline pres border podkladu
(::before), barvu dava --lb-tip-zare - rada „Jak na to" si ji prepise na svou modrou.
Jemne: obrys jen do 22 % sily a pozvolna (plna barva, 45 % i 30 % byly moc). */
@keyframes lb-tip-okraj {
0%, 89.71%, 100% { outline-color: transparent; box-shadow: var(--lb-shadow-sm); }
94.86% {
outline-color: color-mix(in srgb, var(--lb-tip-zare) 22%, transparent);
box-shadow: var(--lb-shadow-sm), 0 0 6px color-mix(in srgb, var(--lb-tip-zare) 8%, transparent);
}
}
@keyframes lb-tip-zarovka {
0%, 91.43%, 100% { fill: transparent; filter: none; }
94.86% { fill: color-mix(in srgb, var(--lb-yellow) 70%, transparent); filter: drop-shadow(0 0 5px var(--lb-yellow)); }
}
.loader-brand {
font-family: var(--lb-font-head);
font-size: 1.95rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--lb-ink);
}
.loader-brand span {
color: var(--lb-accent);
}
.loader-bar {
width: 180px;
height: 5px;
background: var(--lb-line);
border-radius: 999px;
overflow: hidden;
}
.loader-bar-fill {
display: block;
height: 100%;
width: var(--blazor-load-percentage, 0%);
background: var(--lb-accent);
border-radius: 999px;
transition: width 0.15s ease-in-out;
}
.loader-text {
font-size: .85rem;
letter-spacing: .02em;
color: var(--lb-muted);
}
code {
color: #c02d76;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ── Karaoke: lupa jedouci po ctenem textu ─────────────────────────────────
Prvek vyrabi js/tts.js, ne Blazor, takze se na nej scoped CSS nechyti a pravidla
musi byt tady. Casy slov jsou z ElevenLabs (docs/audio-generovani.md), nic se
neodhaduje z delky slov.
Posun mezi slovy dela CSS prechod. Diky nemu je plynuly, i kdyz se poloha prepisuje
jen na hranici slov - bez toho by lupa skakala. */
.lb-lupa-host { position: relative; }
/* Kusy textu musi byt NAD lupou. Absolutne umisteny prvek se jinak kresli pres
netransformovany obsah a lupa by prekryla samotna slova. */
.lb-lupa-host .nb { position: relative; z-index: 1; }
.lb-lupa {
position: absolute;
z-index: 0;
opacity: 0;
pointer-events: none;
background: color-mix(in srgb, var(--lb-lupa-barva) var(--lb-lupa-sila), transparent);
border: 1px solid color-mix(in srgb, var(--lb-lupa-barva) var(--lb-lupa-sila-okraj), transparent);
border-radius: var(--lb-radius-xs);
transition: left .12s linear, top .12s linear, width .12s linear, opacity .25s;
}
/* Kdo si preje omezit pohyb, dostane lupu bez prejezdu - jen preskakuje. */
@media (prefers-reduced-motion: reduce) {
.lb-lupa { transition: opacity .25s; }
}
/* Koncovka nebo přípona se spojovníkem („-n", „ge...t") se nelomí přes řádek.
Třídu dává Zvyrazneni v kódu, proto žije tady a ne ve scoped stylu. */
.lb-nowrap { white-space: nowrap; }
/* Vzorce $...$ (matematika, Reading/Vzorce.cs + KaTeX): barvu dědí z textu (oba motivy),
samostatný vzorec $$...$$ je blok, který se na úzkém displeji posune vodorovně, místo aby
přetekl stránku. Holý zápis = KaTeX se nenačetl. */
.lb-vzorec .katex { font-size: 1.08em; }
.lb-vzorec.is-blok { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; white-space: normal; }
.lb-vzorec.is-blok .katex-display { margin: var(--lb-gap-3) 0; }
.lb-vzorec-holy { font-family: ui-monospace, monospace; font-size: .95em; }
/* ============================================================
Karta shrnuti: konec davky v opakovani i otazky k clanku v lekci
(06.10.2026). Globalne, aby obe mista vypadala stejne - driv zila jen
ve scoped CSS davky a otazky vyhodnoceni nemely vubec. Pasmo a poza
Boostera se pocitaji jednou, v Booster/Uspesnost.cs.
============================================================ */
.batch-complete {
text-align: center;
padding: var(--lb-gap-9) var(--lb-gap-6);
background-color: var(--lb-success-bg);
border: 1px solid var(--lb-success-border);
border-radius: var(--lb-radius-xs);
}
.batch-complete-title {
margin: var(--lb-gap-3) 0;
color: var(--lb-text);
font-size: var(--lb-fs-3xl);
}
.batch-complete-stats {
color: var(--lb-success-text);
font-size: var(--lb-fs-xl);
margin: var(--lb-gap-6) 0 var(--lb-gap-8) 0;
}
.batch-complete-stats strong {
font-size: var(--lb-fs-3xl);
font-variant-numeric: tabular-nums;
}
/* Shrnuti se barvi podle uspesnosti. Jednotna zelena rikala „vyborne" i tomu, kdo
mel pet z deseti. Slabsi pasmo je ZLUTE, ne cervene: „projdi si to jeste" neni
chyba, a cervena by z nej udelala verdikt. */
.batch-complete.uspech-stredni {
background-color: var(--lb-accent-tint);
border-color: var(--lb-accent-border);
}
.batch-complete.uspech-stredni .batch-complete-stats { color: var(--lb-accent-deep); }
.batch-complete.uspech-nizky {
background-color: var(--lb-hint-bg);
border-color: var(--lb-hint-border);
}
.batch-complete.uspech-nizky .batch-complete-stats { color: var(--lb-hint-text); }
/* Booster na shrnuti PRILETI - je to jedine misto davky, kde neco reaguje na to, jak
jsi dopadl. Puvodni nadechnuti (10 px, pul sekundy) nebylo skoro videt. Prilet shora
s naklonem jako pri letu, kousek pres cil a usadit se; jednou, ne dokola. */
@keyframes lb-booster-prichod {
0% { opacity: 0; transform: translate(40px, -70px) rotate(12deg) scale(.85); }
45% { opacity: 1; transform: translate(-4px, 8px) rotate(-4deg) scale(1.03); }
70% { transform: translate(2px, -3px) rotate(1.5deg) scale(1); }
100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
/* Po přistání dvakrát radostně poskočí s podřepem (autor 05.10.2026: „měl by se zase
nějak hýbnout" - samotný přílet se přehlédl). Taky jen jednou. */
@keyframes lb-booster-radost {
0%, 100% { transform: translateY(0) scale(1, 1); }
12% { transform: translateY(0) scale(1.06, .92); }
30% { transform: translateY(-22px) scale(.96, 1.05) rotate(-3deg); }
46% { transform: translateY(0) scale(1.05, .94); }
62% { transform: translateY(-12px) scale(.98, 1.03) rotate(3deg); }
78% { transform: translateY(0) scale(1.02, .98); }
}
.batch-booster {
width: 10rem; height: auto; /* větší (autor 05.10.2026), v obou appkách stejně */
animation: lb-booster-prichod .9s ease-out both, lb-booster-radost 1s ease-in-out 1s 1;
transform-origin: 50% 90%;
}
@media (prefers-reduced-motion: reduce) {
.batch-booster { animation: none; }
}
/* Tlačítka shrnutí pod sebou a stejně široká (autor 14.10.2026) - různě dlouhé popisky
dřív dávaly schod. */
.batch-complete-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--lb-gap-3);
}
.batch-complete-actions > .lb-btn { width: min(100%, 20rem); justify-content: center; }