:root{
  --pozadi:#f6f7f5;--plocha:#fff;--text:#1c2429;--text-2:#5b6870;--linka:#d9dfe2;
  --akcent:#1f6f6a;--akcent-text:#fff;--chyba:#a4262c;--polomer:10px;--stin:rgb(0 0 0 / .18);
}
@media (prefers-color-scheme: dark){
  :root{--pozadi:#141a1d;--plocha:#1d2529;--text:#e6ebed;--text-2:#a3b0b6;--linka:#2f3a40;--akcent:#5fc4bc;--akcent-text:#0e1a19;--chyba:#f08c8c;--stin:rgb(0 0 0 / .6)}
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--pozadi);color:var(--text);font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--akcent)}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px}
.lista{position:sticky;top:0;background:var(--plocha);border-bottom:1px solid var(--linka);z-index:2}
.hlavni-nav{display:flex;gap:4px;align-items:center;max-width:960px;margin:0 auto;padding:6px 12px}
.hlavni-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--polomer);text-decoration:none;color:var(--text);font-weight:600}
.hlavni-nav a[aria-current=page]{background:var(--akcent);color:var(--akcent-text)}
.odhlaseni{margin-left:auto}
.tlacitko-text{background:none;border:0;color:var(--text-2);min-height:44px;padding:0 10px;font:inherit;cursor:pointer}
.obsah{max-width:960px;margin:0 auto;padding:16px 16px 120px}
.karta{background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer);padding:20px}
.uzka{max-width:400px;margin:10vh auto 0}
.formular{display:grid;gap:6px}
.formular label{font-size:14px;color:var(--text-2);margin-top:8px}
.formular input{font:inherit;padding:10px 12px;border:1px solid var(--linka);border-radius:8px;background:var(--pozadi);color:var(--text);min-height:44px}
.tlacitko{min-height:48px;min-width:44px;padding:0 18px;border-radius:var(--polomer);border:1px solid var(--linka);background:var(--plocha);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.tlacitko.primarni{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent);margin-top:12px}
/* odkaz stylovaný jako tlačítko: <a> obsah necentruje ani neruší podtržení z UA stylu */
a.tlacitko{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.chyba{color:var(--chyba);font-weight:600}
h1{font-size:1.6rem;margin:0 0 12px;text-wrap:balance}
h2{font-size:1.2rem;margin:24px 0 8px;color:var(--text-2)}
.mrizka{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.dlazdice{display:block;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer);overflow:hidden;text-decoration:none;color:var(--text)}
.dlazdice img,.dlazdice .bez-nahledu{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--linka)}
.dlazdice .bez-nahledu{display:grid;place-items:center;color:var(--text-2);font-size:13px}
.dlazdice .popis{padding:8px 10px;font-weight:600;font-size:15px}
.typ{font-size:12px;color:var(--text-2)}
.dlazdice .typ{display:block;font-weight:400}
/* §6.1 náhled dlaždice se po najetí přehrává – video vkládá nahledy.js */
.dlazdice .nahled{position:relative;display:block}
.dlazdice .dlazdice-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.seznam-lekci{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.seznam-lekci a{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:8px 14px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer);text-decoration:none;color:var(--text);font-weight:600}
.seznam-lekci .pocet{color:var(--text-2);font-weight:400;font-size:14px}
.abeceda{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;padding:0;list-style:none}
.abeceda a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:8px;text-decoration:none;font-weight:600}
.abeceda a[aria-current=page]{background:var(--akcent);color:var(--akcent-text)}
.abeceda a.vse{padding:0 12px}  /* „Vše" je širší než jedno písmeno */
.strankovani{display:flex;gap:8px;justify-content:center;margin-top:16px}
/* §6.6 navigace předchozí/další v seznamu */
.navigace{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:10px 0}
.navigace .tlacitko{flex:0 0 auto}
.navigace .pozice{flex:1;text-align:center;color:var(--text-2);font-size:14px}
.navigace [aria-disabled=true]{opacity:.45;pointer-events:none}
/* přehrávač */
.prehravac{background:#000;border-radius:var(--polomer);overflow:hidden;position:relative}
.prehravac video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.ovladani{position:sticky;bottom:0;display:flex;gap:8px;justify-content:center;padding:10px 0;background:linear-gradient(transparent,var(--pozadi) 30%)}
.ovladani .tlacitko{flex:1 1 0;max-width:180px}
.varianty{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.varianty .tlacitko[aria-pressed=true]{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent)}
.glosa{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;margin:14px 0;font-weight:700;letter-spacing:.02em}
.glosa .plus{color:var(--text-2);font-weight:400}
.glosa a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;background:var(--plocha);border:1px solid var(--linka);text-decoration:none}
.glosa .bez-odkazu{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--text-2)}
.upozorneni{padding:12px 14px;border-radius:var(--polomer);background:var(--plocha);border:1px dashed var(--linka);color:var(--text-2)}
.zkratky{font-size:13px;color:var(--text-2);margin-top:8px}
.zkratky kbd{font:inherit;border:1px solid var(--linka);border-radius:4px;padding:0 5px}
@media (max-width:700px){.zkratky{display:none}}
/* §6.6 živý náhled odkazovaného slova v glose – jen myší/klávesnicí (přehrává nahledy.js) */
.glosa a{position:relative}
.glosa-nahled{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:160px;height:90px;object-fit:cover;border:1px solid var(--linka);border-radius:8px;background:var(--plocha);box-shadow:0 6px 18px var(--stin);pointer-events:none;z-index:3}
.glosa a:hover .glosa-nahled,.glosa a:focus-within .glosa-nahled{display:block}
@media (hover: none){.glosa a:hover .glosa-nahled,.glosa a:focus-within .glosa-nahled{display:none}}
/* §11.3 ukazatel průběhu s úchytkami výseku od–do (dva překryté nativní posuvníky) */
.prubeh{position:relative;padding:19px 0;margin:6px 0 2px}
.prubeh-draha{position:relative;height:6px;border-radius:3px;background:var(--linka)}
.prubeh-vysek{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:3px;background:var(--akcent);opacity:.35}
.prubeh-poloha{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--text)}
.prubeh-uchytka{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;margin:0;padding:0;background:none;border:0;-webkit-appearance:none;appearance:none;pointer-events:none}
.prubeh-uchytka::-webkit-slider-runnable-track{height:100%;background:none}
.prubeh-uchytka::-moz-range-track{height:100%;background:none}
.prubeh-uchytka::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;box-sizing:border-box;width:44px;height:44px;border:10px solid transparent;border-radius:50%;background:var(--akcent);background-clip:content-box;cursor:pointer}
.prubeh-uchytka::-moz-range-thumb{pointer-events:auto;box-sizing:border-box;width:44px;height:44px;border:10px solid transparent;border-radius:50%;background:var(--akcent);background-clip:content-box;cursor:pointer}
.prubeh-uchytka:focus{outline:none}
.prubeh-uchytka:focus-visible::-webkit-slider-thumb{outline:3px solid var(--akcent);outline-offset:2px}
.prubeh-uchytka:focus-visible::-moz-range-thumb{outline:3px solid var(--akcent);outline-offset:2px}
/* §6.1 pole hledání v hlavičce a výsledky po kategoriích */
.hledani{flex:1 1 160px;min-width:0;display:flex}
.hledani input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--linka);border-radius:var(--polomer);background:var(--pozadi);color:var(--text);font:inherit}
.skryte{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kategorie{margin-top:8px}
.kategorie h2{font-size:1rem;letter-spacing:.02em;text-transform:uppercase}
@media (max-width:700px){.hlavni-nav{flex-wrap:wrap}.hledani{order:3;flex-basis:100%}}
/* §7 seznamy uživatele: přehled, akce vlastníka, ovládání pořadí položek */
.formular.radek{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.formular.radek input{flex:1 1 200px}
.akce-seznamu{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.prubeh-seznamu{color:var(--text-2);margin:0 0 8px}
/* §7 řazení položek vlastního seznamu přetažením (Sortable) */
.mrizka li.tazena{opacity:.4}
/* §6.1 výběrový režim: zaškrtávací kolečko na dlaždici a lišta hromadných akcí */
body.rezim-vyberu .mrizka li[data-heslo-id] .nahled::after{content:"";position:absolute;inset:6px auto auto 6px;width:26px;height:26px;border-radius:50%;border:2px solid var(--plocha);background:rgb(0 0 0 / .35);box-shadow:0 0 0 1px var(--linka)}
body.rezim-vyberu .mrizka li.vybrano .nahled::after{background:var(--akcent);content:"✓";color:var(--akcent-text);display:grid;place-items:center;font-weight:700}
body.rezim-vyberu .mrizka li.vybrano .dlazdice{outline:3px solid var(--akcent);outline-offset:-3px}
/* lišta je ukotvená dole u spodní hrany okna (dosah palce, 44px cíle); roste nahoru */
.lista-vyberu{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;background:var(--plocha);border:1px solid var(--linka);border-width:1px 0 0;border-radius:0;margin:0}
.lista-vyberu[hidden]{display:none}   /* autorský display by přebil [hidden] z UA stylu */
.lista-vyberu .tlacitko{margin:0}     /* .primarni má margin-top, v liště by tlačítko odsadilo */
.lista-vyberu .vyber-cil{position:relative;flex-basis:100%;max-height:50vh;overflow:auto}
.lista-vyberu .vyber-seznamu{position:static;left:auto;right:auto;top:auto;margin-top:8px}
/* poslední řada dlaždic musí v režimu zůstat nad lištou (na telefonu se tlačítka lámou do řádků) */
body.rezim-vyberu .obsah{padding-bottom:160px}
@media (max-width:700px){body.rezim-vyberu .obsah{padding-bottom:320px}}
/* §6.1 widget „přidat do seznamu": rozbalený výběr */
.mrizka > li{position:relative}
.vyber-cil:empty{display:none}
.vyber-seznamu{position:absolute;z-index:3;top:56px;right:6px;left:6px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer);padding:10px;box-shadow:0 8px 24px var(--stin);display:grid;gap:8px}
.vyber-seznamu ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vyber-seznamu .formular.radek{flex-wrap:wrap}
.vyber-seznamu input{min-width:0;flex:1 1 100%}
.vyber-seznamu .tlacitko{width:100%;text-align:left}
.vyber-seznamu .v-seznamu{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent)}
.vyber-seznamu .tlacitko[disabled]{opacity:.6}
/* §7 rychlé seznamy: zaškrtávátka „Umím" / „Umí Ruda" na detailu hesla */
.rychle-seznamy{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0 12px}
.rychle-seznamy .rychly-seznam{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.rychle-seznamy input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--akcent);cursor:pointer}
/* mimo dlaždici (detail hesla, výsledky) drží obal `hromadne` kotvu pro absolutní výběr */
.hromadne{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.hromadne .vyber-seznamu{top:100%;margin-top:6px;left:0;right:auto;min-width:min(360px,100%)}
/* §8 úvod procvičování */
.pokracovani{display:flex;gap:10px;align-items:center;flex-wrap:wrap}   /* inline `.tlacitko` nemá 44 px, ve flexu se blokifikuje */
.pokracovani p{margin:0}
.rozvolneni{margin:0 0 12px}
.zalozky{display:flex;gap:6px;margin:0 0 12px}
.zalozky a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--polomer);border:1px solid var(--linka);text-decoration:none;color:var(--text);font-weight:600}
.zalozky a[aria-current=page]{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent)}
.procvicovani fieldset{border:1px solid var(--linka);border-radius:var(--polomer);padding:10px 14px;margin:0;display:grid;gap:4px}
.procvicovani legend{font-weight:600;color:var(--text-2);padding:0 6px}
.procvicovani label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:inherit;color:var(--text)}
/* `.formular input` (min-height/padding/border/background) by ovládací prvek svisle roztáhlo – 44 px cíl drží obalující `label` */
.procvicovani input[type=radio],.procvicovani input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;padding:0;border:0;background:none;accent-color:var(--akcent)}
.procvicovani .volba .pocet{color:var(--text-2);font-size:14px}
.procvicovani h2{font-size:1rem;margin:10px 0 2px}
.procvicovani details summary{min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.procvicovani details summary .pocet{color:var(--text-2)}
/* `display:flex` ruší nativní značku (ta existuje jen u `display:list-item`) – kreslíme vlastní */
.procvicovani details summary::marker,.procvicovani details summary::-webkit-details-marker{content:"";display:none}
.procvicovani details summary::before{content:"\25B8";color:var(--text-2);font-weight:400}
.procvicovani details[open] summary::before{content:"\25BE"}
.procvicovani input[type=number]{max-width:160px}

/* §8 karta hesla */
.hlava-karty{display:flex;gap:10px;align-items:center;justify-content:space-between;color:var(--text-2);font-size:14px;margin-bottom:6px}
.hlava-karty form{margin-left:auto}
.karta-hesla .ovladani{position:static;background:none}  /* přehrávač má vlastní lepivé ovládání, na kartě je lišta dole */
.neutralni-plocha{aspect-ratio:16/9;border-radius:var(--polomer);background:repeating-linear-gradient(45deg,var(--linka) 0 12px,var(--plocha) 12px 24px);border:1px solid var(--linka)}
.lista-karty{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;gap:8px;align-items:center;justify-content:center;padding:10px 12px;background:var(--plocha);border-top:1px solid var(--linka)}
.lista-karty .tlacitko{margin:0;flex:1 1 0;max-width:220px;white-space:nowrap}
.lista-karty .odpovedi{display:contents}
.lista-karty .odpovedi[hidden]{display:none}   /* autorský display by přebil [hidden] z UA stylu */
.lista-karty [aria-pressed=true]{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent)}
.lista-karty .vysledek{background:var(--akcent);color:var(--akcent-text);border-color:var(--akcent);display:inline-flex;align-items:center;justify-content:center}
body:has(.lista-karty) .obsah{padding-bottom:110px}
@media (max-width:700px){.lista-karty{flex-wrap:wrap}.lista-karty .tlacitko{flex:1 1 40%;max-width:none}body:has(.lista-karty) .obsah{padding-bottom:180px}}
.okno-znaku{border:1px solid var(--linka);border-radius:var(--polomer);background:var(--plocha);color:var(--text);padding:12px;width:min(560px,92vw)}
.okno-znaku::backdrop{background:rgb(0 0 0 / .55)}
.okno-znaku video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px}
.okno-znaku .nazev-znaku{margin:0 0 8px;font-weight:700}
.okno-znaku .tlacitko{margin-top:10px;width:100%}
.cisla{list-style:none;padding:0;margin:0 0 12px;display:flex;gap:16px;flex-wrap:wrap}
.cisla b{font-size:1.4rem;display:block}
.akce-shrnuti{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* §9 statistiky */
.tabulka{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:15px}
.tabulka th,.tabulka td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linka);vertical-align:top}
.tabulka th{color:var(--text-2);font-weight:600}
.nejhorsi{margin:8px 0 0;padding-left:22px;color:var(--text-2);font-size:14px}
@media (max-width:700px){.tabulka{display:block;overflow-x:auto}}

/* §10 administrace: rozcestník s počty */
.rozcestnik{list-style:none;padding:0;margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rozcestnik a{display:grid;gap:2px;padding:14px;min-height:88px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer);text-decoration:none;color:var(--text)}
.rozcestnik .nazev{font-weight:600}
.rozcestnik b{font-size:1.6rem;line-height:1.1}
.rozcestnik .popisek{color:var(--text-2);font-size:14px}
.akce-uctu{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.akce-uctu .formular.radek{display:flex;gap:6px;margin:0}
.akce-uctu input{min-width:0;flex:1 1 140px}
.hotovo{color:var(--akcent);font-weight:600}

/* §4.1 stav hesla na detailu */
.odznak-stavu,.akce-administratora{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}

/* §4.1 formulář úpravy hesla — stejné ovládací prvky jako procvičování */
.obsah form.formular fieldset{border:1px solid var(--linka);border-radius:var(--polomer);padding:10px 14px;margin:0;display:grid;gap:4px}
.obsah form.formular legend{font-weight:600;color:var(--text-2);padding:0 6px}
.obsah form.formular fieldset label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;color:var(--text);font-size:inherit}
.obsah form.formular fieldset input[type=radio],.obsah form.formular fieldset input[type=checkbox]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--akcent)}

/* §4.1 našeptávač cílového hesla pro sloučení */
.vyber-hesla{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.vyber-hesla .tlacitko{width:100%;text-align:left;display:grid;gap:2px}
.vyber-hesla .typ{font-weight:400}
.vyber-hesla form{margin:0}
.dvojice{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dvojice li{padding:12px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer)}
.dvojice h2{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--text-2)}
.dvojice .nazev{margin:0;font-weight:600}
.dvojice .popisek{margin:2px 0 0;color:var(--text-2);font-size:14px}

/* §11.1 videa hesla ve správě — pořadí, odebrání, ruční nahrání */
.sprava-videa{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.sprava-videa li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer)}
.sprava-videa img,.sprava-videa .bez-nahledu{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--linka)}
.sprava-videa .bez-nahledu{display:grid;place-items:center;color:var(--text-2);font-size:13px}
.sprava-videa .popis{flex:1 1 160px;display:grid;gap:2px}
.sprava-videa .akce{display:flex;gap:6px;flex-wrap:wrap}
.sprava-videa .akce form{margin:0}
.obsah input[type=file]{font:inherit;padding:10px 0}
.moje-videa{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.moje-videa li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 12px;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--polomer)}
.moje-videa form{margin:0}
.akce-slovniku{margin:0 0 12px}