/* =====================================================================
   JIDOS kurz – vzhled. Kurz běží uvnitř index.php (?page=kurz), načítá se
   až po main.css a staví na jeho tokenech (--bg, --ink, --brand, --radius …).
   Dark mode přebírá automaticky přes [data-theme="dark"] z main.css.
   ===================================================================== */

.k-app {
  /* aliasy na tokeny webu (s rezervou, kdyby main.css chyběl) */
  --k-pozadi:  var(--bg-soft, #f7f8fc);
  --k-karta:   var(--bg-card, #ffffff);
  --k-ink:     var(--ink, #0a0e27);
  --k-ink-2:   var(--ink-soft, #4b5269);
  --k-ink-3:   var(--ink-mute, #6b7280);
  --k-cara:    var(--line, #e7e9f3);
  --k-brand:   var(--brand, #22224c);
  --k-modra:   var(--brand-muted, #4256bf);
  --k-modra-2: var(--brand-muted-dark, #344aa3);
  --k-modra-bg: var(--brand-soft, #eef0ff);
  --k-zluta:   var(--accent, #ffd84d);
  --k-r-s:     var(--radius-sm, 10px);
  --k-r:       var(--radius, 16px);
  --k-r-l:     var(--radius-lg, 24px);
  --k-stin:    var(--shadow-sm, 0 1px 2px rgba(10,14,39,.04), 0 1px 3px rgba(10,14,39,.04));
  --k-ease:    var(--ease, cubic-bezier(.2,.7,.2,1));

  /* stavy */
  --k-ok:        var(--success, #16a34a);
  --k-ok-bg:     #e9f8ef;
  --k-ok-ink:    #11683a;
  --k-chyba:     var(--danger, #dc2626);
  --k-chyba-bg:  #fdeeee;
  --k-chyba-ink: #a11d1d;
  --k-pozor-bg:  #fff5d1;
  --k-pozor-ink: #6f5200;
  --k-rozprac:   #4256bf;
  --k-novy:      #c9cee0;

  /* tabule */
  --k-tabule:   #22224c;
  --k-tabule-2: #2e2e66;
  --k-krida:    #f4f2ea;
  --k-hl:       #ffd84d;
  --k-skrt:     #ff7d8f;
  --k-nove:     #7ee3c6;
  --k-font-krida: 'Patrick Hand', 'Segoe Print', 'Comic Neue', ui-rounded, system-ui, sans-serif;
  --k-font-nadpis: 'Space Grotesk', 'Inter', sans-serif;   /* v2: stejné nadpisy jako na webu (písmo se nestahuje, jako na jidos.cz) */
  --k-font-cisla: 'Source Sans 3', system-ui, sans-serif;               /* čísla, časy, odznaky */
  --k-hvezda:   #f59e0b;
  /* tabule na výpočty */
  --tb-papir:   #fffefa;
  --tb-mriz:    rgba(66, 86, 191, .13);
  --tb-ink:     #1b2045;
  --tb-cervena: #d4343a;
  --tb-modra:   #3550d6;

  color: var(--k-ink);
}

[data-theme="dark"] .k-app {
  --tb-papir:    #121633;
  --tb-mriz:     rgba(140, 160, 255, .14);
  --tb-ink:      #f1f3ff;
  --tb-cervena:  #ff7f86;
  --tb-modra:    #8fa0ff;
  --k-ok-bg:     #10301f;
  --k-ok-ink:    #7ee2a2;
  --k-chyba-bg:  #3a1719;
  --k-chyba-ink: #ffaaaa;
  --k-pozor-bg:  #33290c;
  --k-pozor-ink: #ffd84d;
  --k-rozprac:   #6f80ff;
  --k-novy:      #3a4166;
  --k-tabule:    #0f1330;
  --k-tabule-2:  #1b2150;
  --k-modra:     #5a6cff;
  --k-modra-2:   #4256bf;
  --k-hvezda:    #fbbf24;
}

/* ---------- základ a přepis obecných pravidel z main.css ---------- */

.k-app * { box-sizing: border-box; }
.k-app h1, .k-app h2, .k-app h3 { color: var(--k-ink); margin: 0; }
.k-app p { margin: 0; }
.k-app button { font: inherit; }
.k-app :focus-visible { outline: 3px solid rgba(66, 86, 191, .45); outline-offset: 2px; }

.k-h1 {
  font-family: var(--k-font-nadpis);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  color: var(--k-brand);
  text-wrap: balance;
}
[data-theme="dark"] .k-h1 { color: var(--k-ink); }
.k-h2 {
  font-family: var(--k-font-nadpis);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}
.k-vyklad-otazka { margin: -4px 0 12px; padding: 10px 14px; border-left: 4px solid var(--k-modra); background: var(--k-pozadi); border-radius: 0 10px 10px 0; line-height: 1.5; color: var(--k-ink); }
.k-h3 {
  font-family: var(--k-font-nadpis);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 22px 0 4px !important;
}
.k-eyebrow {   /* v2: tichý řádek nad nadpisem, ne modré kapitálky */
  display: inline-block;
  color: var(--k-ink-3);
  font-weight: 600;
  font-size: .92rem;
}
.k-lead { font-size: 1.02rem; color: var(--k-ink-2); line-height: 1.55; }
.k-cisla { font-variant-numeric: tabular-nums; }

/* ---------- obal, karty, tlačítka ---------- */

/* v2: kurzy jsou ve stejném sloupci uprostřed jako ostatní stránky webu
   (--v2-obsah z css/v2.css). */
.k-obal {
  max-width: var(--v2-obsah, 1160px);
  margin: 0 auto;
}
.k-uzky { max-width: 760px; }
.k-obal.ks-prihlaseni { max-width: 640px; }

.k-karta {
  background: var(--k-karta);
  border: 1px solid var(--k-cara);
  border-radius: var(--k-r);
  box-shadow: var(--k-stin);
  padding: 22px;
}

.k-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid var(--k-cara);
  background: var(--k-karta);
  color: var(--k-ink) !important;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--k-ease), border-color .2s var(--k-ease), transform .2s var(--k-ease), box-shadow .2s var(--k-ease);
}
.k-btn:hover { border-color: var(--k-ink-3); }
.k-btn:disabled { opacity: .5; cursor: default; }
.k-btn[hidden] { display: none; }
.k-btn-hlavni {   /* v2: hlavní tlačítko tmavomodré jako na zbytku webu */
  background: var(--k-brand);
  border-color: var(--k-brand);
  color: #fff !important;
}
.k-btn-hlavni:hover {
  background: #33336e;
  border-color: #33336e;
}
[data-theme="dark"] .k-btn-hlavni:hover { background: var(--k-modra-2); border-color: var(--k-modra-2); }
.k-btn-zvyraznit { border-color: var(--k-modra); color: var(--k-modra) !important; background: var(--k-modra-bg); }
.k-btn-maly { min-height: 36px; padding: 6px 14px; font-size: .88rem; }
.k-btn-plna { width: 100%; }
.k-odkaz {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--k-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: .88rem;
}
.k-odkaz:hover { color: var(--k-ink); }

.k-akce { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.k-akce > .k-btn { flex: 1 1 auto; }
.k-akce-konec { margin-top: 24px; }

/* ================= PŘEHLED KURZU ================= */

.k-prehled {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.k-souhrn {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.k-souhrn-uvod { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }

.k-stav-kurzu { display: flex; flex-direction: column; gap: 14px; }
.k-stav-radek { display: flex; align-items: baseline; justify-content: space-between; }
.k-stav-nadpis { font-family: var(--k-font-nadpis); font-size: 1rem; font-weight: 600; }
.k-stav-cislo { font-family: var(--k-font-cisla); font-size: 1rem; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
.k-stav-cislo b { font-size: 1.7rem; color: var(--k-ink); }
.k-stav-pozn { font-size: .84rem; color: var(--k-ink-3); line-height: 1.45; }

/* mapa 30 témat – každá buňka jedno téma, skupiny = kapitoly */
.k-mapa { display: flex; flex-wrap: wrap; gap: 8px; }
.k-mapa-skupina { display: flex; gap: 3px; }
.k-mapa-bunka {
  display: block;
  width: 14px;
  height: 26px;
  border-radius: 4px;
  background: var(--k-novy);
  transition: transform .15s var(--k-ease);
}
.k-mapa-bunka:hover { transform: translateY(-2px); }
.k-mapa-bunka.k-s-zvladnuty { background: var(--k-ok); }
.k-mapa-bunka.k-s-rozpracovany { background: var(--k-rozprac); }
.k-mapa-bunka.k-s-zamceno { background: var(--k-novy); opacity: .55; }
.k-mapa-bunka.k-s-brzy {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--k-novy);
}

.k-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: .8rem;
  color: var(--k-ink-3);
}
.k-legenda li { display: flex; align-items: center; gap: 6px; }
.k-legenda i { width: 10px; height: 10px; border-radius: 3px; background: var(--k-novy); }
.k-legenda i.k-s-zvladnuty { background: var(--k-ok); }
.k-legenda i.k-s-rozpracovany { background: var(--k-rozprac); }
.k-legenda i.k-s-brzy { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-novy); }

/* přístup */
.k-pristup { display: flex; flex-direction: column; gap: 12px; }
.k-pristup-nadpis { font-family: var(--k-font-nadpis); font-size: 1.05rem; font-weight: 600; }
.k-pristup-text { font-size: .9rem; color: var(--k-ink-2); line-height: 1.5; }
.k-pristup-pozn { font-size: .82rem; color: var(--k-ink-3); line-height: 1.45; }
.k-bonus { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--k-ink-3); }   /* v2: jen tichá poznámka, žádný zelený rámeček */
.k-bonus b { color: inherit; }
.k-bonus-ikona {
  flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: var(--k-ok); color: #fff; font-size: .75rem; font-weight: 700;
}
.k-pristup-ok { flex-direction: row; align-items: center; gap: 14px; background: var(--k-ok-bg); border-color: transparent; }
.k-pristup-ok .k-pristup-text { color: var(--k-ok-ink); }
.k-pristup-ikona {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--k-ok);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* pruh ke 4 000 kr – 10 dílů po 400 kr */
.k-pruh { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.k-pruh-dil { height: 12px; border-radius: 3px; background: var(--k-pozadi); box-shadow: inset 0 0 0 1px var(--k-cara); overflow: hidden; }
.k-pruh-dil > span { display: block; height: 100%; background: var(--k-modra); transition: width .6s var(--k-ease); }
.k-pruh-popis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .84rem; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
.k-pruh-popis span { white-space: nowrap; }
.k-pruh-popis b { color: var(--k-ink); }

/* kapitoly a témata */
.k-kapitoly { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.k-kapitola-hlava {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
}
.k-kapitola-cislo { font-size: .9rem; font-weight: 600; color: var(--k-ink-3); }
.k-kapitola-nazev { font-family: var(--k-font-nadpis); font-size: 1.35rem; font-weight: 700; }
.k-kapitola-vpravo { display: flex; align-items: center; gap: 10px; }
.k-kapitola-postup { font-family: var(--k-font-cisla); color: var(--k-ink-3); font-variant-numeric: tabular-nums; font-size: .95rem; }
.k-stitek-zdarma {
  background: var(--k-zluta);
  color: #0a0e27;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.k-temata {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--k-karta);
  border: 1px solid var(--k-cara);
  border-radius: var(--k-r);
  box-shadow: var(--k-stin);
  overflow: hidden;
}
.k-temata li + li { border-top: 1px solid var(--k-cara); }

.k-tema {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: var(--k-ink) !important;
  text-decoration: none;
  transition: background .15s var(--k-ease);
}
a.k-tema:hover { background: var(--k-pozadi); }
a.k-tema:hover .k-tema-nazev { color: var(--k-modra); }

/* číslo tématu ve stylu políčka záznamového archu */
.k-tema-cislo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--k-novy);
  border-radius: 7px;
  font-family: var(--k-font-cisla);
  font-weight: 600;
  font-size: .92rem;
  color: var(--k-ink-2);
  font-variant-numeric: tabular-nums;
  background: var(--k-karta);
}
.k-s-rozpracovany .k-tema-cislo { border-color: var(--k-rozprac); color: var(--k-rozprac); }
.k-s-zvladnuty .k-tema-cislo,
.k-tema-cislo.k-s-zvladnuty { border-color: var(--k-ok); background: var(--k-ok); color: #fff; }
.k-s-brzy .k-tema-cislo { border-style: dashed; color: var(--k-ink-3); }

.k-tema-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-tema-nazev { font-weight: 600; font-size: .98rem; line-height: 1.3; transition: color .15s; }
.k-tema-kratce { font-size: .85rem; color: var(--k-ink-3); line-height: 1.35; }
.k-s-brzy .k-tema-nazev { color: var(--k-ink-2); }

.k-tema-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.k-uloha-testu {
  display: inline-block;
  font-size: .74rem;
  font-weight: 500;
  color: var(--k-ink-3);
  border: 1px solid var(--k-cara);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.k-tema-stav { font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--k-ink-3); }
.k-s-novy .k-tema-stav { color: var(--k-modra); }
.k-s-rozpracovany .k-tema-stav { color: var(--k-rozprac); }
.k-s-zvladnuty .k-tema-stav { color: var(--k-ok); }
.k-s-zamceno .k-tema-stav { color: var(--k-ink-3); font-weight: 500; }
.k-s-brzy .k-tema-stav { font-weight: 500; }

/* ================= STRÁNKA TÉMATU ================= */

.k-drobky { display: flex; flex-wrap: wrap; gap: 8px; font-size: .88rem; color: var(--k-ink-3); margin-bottom: 14px; }
.k-drobky a { color: var(--k-ink-2); }
.k-drobky a:hover { color: var(--k-modra); }

.k-tema-hlava { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.k-tema-cislo-velke { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 10px; flex: 0 0 52px; margin-top: 2px; }
.k-tema-h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.k-tema-podtitul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px !important;
  color: var(--k-ink-2);
  font-size: .95rem;
}

.k-upozorneni {
  background: var(--k-pozor-bg);
  color: var(--k-pozor-ink);
  border-radius: var(--k-r-s);
  padding: 10px 14px;
  font-size: .9rem;
  margin-bottom: 16px !important;
}
.k-upozorneni a { color: inherit; font-weight: 600; text-decoration: underline; }

.k-tema-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 24px;
  align-items: start;
}
.k-tema-hlavni { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.k-tema-bok { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 88px; }

/* kroky tématu */
.k-kroky {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--k-karta);
  border: 1px solid var(--k-cara);
  border-radius: var(--k-r);
  box-shadow: var(--k-stin);
  padding: 6px;
  gap: 4px;
}
.k-krok {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 11px;
  padding: 9px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--k-ink-2);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s var(--k-ease), color .15s;
  min-width: 0;
}
.k-krok:hover:not(:disabled) { background: var(--k-pozadi); }
.k-krok:disabled { cursor: default; opacity: .5; }
.k-krok-znak {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  border: 1.5px solid var(--k-novy);
  color: var(--k-ink-3);
}
.k-krok-nazev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-krok-kratce { display: none; }
.k-krok-hotovo .k-krok-znak { background: var(--k-ok); border-color: var(--k-ok); color: #fff; font-size: 0; }
.k-krok-hotovo .k-krok-znak::before { content: "✓"; font-size: .8rem; }
.k-krok-aktivni { background: var(--k-modra-bg); color: var(--k-ink); }
.k-krok-aktivni .k-krok-znak { border-color: var(--k-modra); color: var(--k-modra); }
.k-krok-aktivni.k-krok-hotovo .k-krok-znak { color: #fff; }

/* panely */
.k-panel { padding: 24px; }
.k-panel[hidden] { display: none; }
.k-panel-hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 8px;
}
.k-panel-nadpis { font-family: var(--k-font-nadpis); font-size: 1.3rem; font-weight: 700; }
.k-panel-popis { color: var(--k-ink-2); font-size: .93rem; margin-top: 4px !important; line-height: 1.5; }
.k-panel-pata { margin-top: 18px !important; text-align: center; }

/* tečky rychlotestu */
.k-tecky { display: flex; gap: 6px; padding-top: 6px; }
.k-tecky i { width: 26px; height: 8px; border-radius: 4px; background: var(--k-novy); }
.k-tecky i.k-t-hotovo { background: var(--k-modra); }
.k-tecky i.k-t-ted { background: var(--k-modra-bg); box-shadow: inset 0 0 0 1.5px var(--k-modra); }

.k-vysledek-testu { text-align: center; padding: 18px 0 4px; display: flex; flex-direction: column; gap: 8px; color: var(--k-ink-2); }
.k-vysledek-testu[hidden] { display: none; }
.k-vysledek-velky { font-family: var(--k-font-cisla); font-size: 2.6rem; font-weight: 700; color: var(--k-ink); line-height: 1; }
.k-vysledek-testu .k-akce { justify-content: center; }
.k-vysledek-testu .k-akce .k-btn { flex: 0 1 auto; min-width: 220px; }

/* mistrovství: posledních 5 odpovědí */
.k-mistr { display: flex; gap: 4px; }
.k-mistr i {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--k-pozadi);
  box-shadow: inset 0 0 0 1.5px var(--k-cara);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
}
.k-mistr i.k-m-ok { background: var(--k-ok); box-shadow: none; }
.k-mistr i.k-m-ok::before { content: "✓"; line-height: 1; }
.k-mistr i.k-m-chyba { background: var(--k-chyba); box-shadow: none; }
.k-mistr i.k-m-chyba::before { content: "✕"; font-size: .64rem; line-height: 1; }
.k-mistr-maly i { width: 16px; height: 16px; border-radius: 4px; font-size: .62rem; }
.k-mistr-popis { font-size: .76rem; color: var(--k-ink-3); }

.k-oznameni {
  background: var(--k-ok-bg);
  color: var(--k-ok-ink);
  border-radius: var(--k-r-s);
  padding: 10px 14px;
  font-size: .93rem;
  margin: 8px 0 4px;
}
.k-oznameni[hidden] { display: none; }

/* ---------- příklad ---------- */

.k-uloha { transition: opacity .2s; }
.k-uloha.k-nacitani .k-priklad { opacity: .35; }
.k-app .k-otazka {
  margin: 14px 0 4px !important;
  padding: 11px 16px;
  border-left: 4px solid var(--k-modra);
  border-radius: 0 12px 12px 0;
  background: var(--k-pozadi);
  color: var(--k-ink);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
}
.k-app .k-otazka:empty { display: none; }
.k-otazka-cislo { display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-modra); }

.k-priklad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3em;
  font-family: var(--k-font-krida);
  font-size: clamp(30px, 8vw, 42px);
  color: var(--k-ink);
  padding: 18px 0 10px;
  min-height: 3.4em;
  transition: opacity .2s;
}
.k-priklad.k-nove { animation: k-nove .45s var(--k-ease); }
@keyframes k-nove { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.k-zadani { display: inline-flex; }
.k-zadani .pr-radky { display: flex; flex-direction: column; gap: .15em; }
.pr-obr { display: flex; justify-content: center; font-size: 17px; margin-bottom: 4px; }
.pr-obr svg, .k-obrazek svg { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.k-obrazek { display: flex; justify-content: center; margin: 8px 0 2px; color: var(--k-ink); font-size: 15px; }
.k-obrazek[hidden], .pr-obr[hidden] { display: none; }
/* náčrtky: čáry i popisky berou barvu textu; zvýraznění podle podkladu */
.g-car { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-slaba { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .45; stroke-dasharray: 5 4; }
.g-mriz { stroke: currentColor; stroke-width: .6; opacity: .22; }
.g-vypln { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.g-sede { fill: currentColor; fill-opacity: .28; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
/* čtverečky s pevnou barvou – zadání se o barvu opírá, proto nezávisí na světlém / tmavém režimu */
.g-ctv-seda { fill: #9aa0ae; stroke: #3d4150; stroke-width: 1.2; }
.g-ctv-bila { fill: #ffffff; stroke: #3d4150; stroke-width: 1.2; }
.g-txt { fill: currentColor; font-family: inherit; font-size: 15px; }
.g-mala { font-size: 12px; opacity: .8; }
.g-bod { fill: currentColor; }
.g-hl { stroke: var(--k-modra); fill: none; stroke-width: 2.6; }
.g-txt.g-hl-t { fill: var(--k-modra); font-weight: 700; stroke: none; }
.pr-obr .g-hl { stroke: var(--k-hl); }
.pr-obr .g-txt.g-hl-t { fill: var(--k-hl); }
.pr-obr .g-txt { font-size: 16px; }
.g-tab { stroke: currentColor; stroke-width: 1.2; opacity: .6; }
.g-primka { stroke-dasharray: 10 4; }
.g-bez { fill: none; stroke: none; }
.g-sirka { stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.g-txt.g-tucne { font-weight: 700; }
.g-papir { fill: none; stroke: none; }
.g-bod-hl { fill: var(--k-modra); }
.pr-obr .g-bod-hl { fill: var(--k-hl); }
.g-kurz { font-style: italic; }
.pr-obr svg.g-rys { max-width: 540px; }
.g-rys .g-txt { font-size: 21px; }
.g-rys .g-txt.g-mala { font-size: 19px; }
.pr-radek { padding: 0; }

.k-vstup-zl { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.k-app .k-vstup input {
  width: 2.3em;
  margin: 0;
  font-family: var(--k-font-krida);
  font-size: .8em;
  line-height: 1.2;
  text-align: center;
  padding: 2px 0;
  border: 2px solid var(--k-cara);
  border-radius: 10px;
  background: var(--k-pozadi);
  color: var(--k-ink);
  box-shadow: none;
}
.k-app .k-vstup input.k-vstup-cislo { width: 4.4em; }
.k-app .k-vstup input.k-vstup-pomer { width: 2.6em; }
.k-app .k-vstup input.k-vstup-vyraz { width: min(100%, 11em); text-align: left; padding: 2px 10px; }
.k-vstup.k-vstup-siroky { flex-basis: 100%; justify-content: center; flex-wrap: wrap; row-gap: 10px; }
.k-priklad.k-priklad-maly { font-size: clamp(22px, 6vw, 32px); }
.k-zadani { max-width: 100%; }
.k-zadani .pr-radek { flex-wrap: wrap; }
.k-predpona-dalsi { margin-left: .5em; }
.k-zadani-radky { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1em; padding-left: .45em; border-left: .08em solid currentColor; border-radius: .3em 0 0 .3em; }
.k-zadani-radky .pr-radek { padding: 0; }
.k-klavesy { display: flex; flex-basis: 100%; justify-content: center; gap: 8px; flex-wrap: wrap; }
.k-app .k-klavesa {
  font-family: var(--k-font-krida); font-size: 22px; line-height: 1; min-width: 46px; min-height: 42px; padding: 6px 10px;
  border: 1.5px solid var(--k-cara); border-radius: 10px; background: var(--k-karta); color: var(--k-ink); cursor: pointer;
}
.k-app .k-klavesa:hover { border-color: var(--k-modra); }
.k-app .k-klavesa[data-vloz="²"] { font-size: 30px; font-weight: 700; }
.k-app .k-klavesa:active { transform: translateY(1px); }
.k-pomer-dvojtecka { padding: 0 .1em; }
.k-jednotka.k-predpona { font-size: .75em; color: var(--k-ink); white-space: nowrap; }
.k-app .k-vstup input::placeholder { color: var(--k-ink-3); opacity: .5; }
.k-vstup { display: inline-flex; align-items: center; gap: .25em; }
.k-jednotka { font-size: .6em; color: var(--k-ink-2); font-family: inherit; }
.k-jednotka.k-jednotka-cislo { font-size: .85em; color: var(--k-ink); white-space: nowrap; }
.k-rovnase[hidden] { display: none; }
/* zadání s vlastním „=“ / předponou „x =“: políčko na samostatném řádku pod zadáním */
.k-priklad.k-priklad-pod { row-gap: .3em; }
.k-priklad-pod .k-vstup { flex-basis: 100%; justify-content: center; }
.k-t-priklad.k-priklad-pod .k-vstup { justify-content: flex-start; }
.k-app .k-vstup input:focus {
  outline: none;
  border-color: var(--k-modra);
  background: var(--k-karta);
  box-shadow: 0 0 0 3px rgba(66, 86, 191, .18);
}
.k-app .k-vstup input:disabled { opacity: 1; background: var(--k-karta); color: var(--k-ink-2); }
.k-vstup-cara { width: 100%; height: 3px; border-radius: 2px; background: currentColor; }

.k-zpetna {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .95rem;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.k-zpetna[hidden] { display: none; }
.k-spravne { background: var(--k-ok-bg); color: var(--k-ok-ink); }
.k-spatne { background: var(--k-chyba-bg); color: var(--k-chyba-ink); }
.k-nezkraceno, .k-neplatne { background: var(--k-pozor-bg); color: var(--k-pozor-ink); }
.k-reseni { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.k-reseni .pr-radek { font-family: var(--k-font-krida); font-size: 1.5em; padding: 0; font-weight: 400; }
.k-radost { animation: k-radost .5s var(--k-ease); }
.k-zatres { animation: k-zatres .4s ease-in-out; }
@keyframes k-radost { 0% { transform: scale(.97); opacity: 0; } 60% { transform: scale(1.01); opacity: 1; } 100% { transform: none; } }
@keyframes k-zatres { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.k-postup { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--k-cara); }
.k-postup[hidden] { display: none; }
.k-postup-nadpis { font-family: var(--k-font-nadpis); font-size: 1rem; font-weight: 600; margin-bottom: 10px !important; }

/* ---------- výklad ---------- */

.k-tahak {
  position: relative;
  background: var(--k-modra-bg);
  border-radius: 14px;
  padding: 26px 20px 18px;
  margin-top: 12px;
}
.k-tahak-stitek {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--k-zluta);
  color: #0a0e27;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.k-tahak-pravidlo { font-size: 1.05rem; line-height: 1.6; color: var(--k-ink) !important; }
.k-tahak-pravidlo b, .k-tahak-body b { font-weight: 700; }
.k-tahak-body { margin: 12px 0 0; padding-left: 1.2rem; color: var(--k-ink-2); font-size: .93rem; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.k-video { margin-top: 16px !important; font-weight: 600; }

/* ---------- zvládnuto ---------- */

.k-panel-hotovo { text-align: center; padding: 36px 24px; }
.k-panel-hotovo .k-akce { justify-content: center; }
.k-panel-hotovo .k-akce .k-btn { flex: 0 1 auto; }
.k-panel-hotovo .k-panel-popis { max-width: 46ch; margin-left: auto !important; margin-right: auto !important; }
.k-hotovo-znak {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--k-ok);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  animation: k-radost .6s var(--k-ease);
}

/* ---------- boční panel ---------- */

.k-bok-karta { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.k-bok-nadpis { font-family: var(--k-font-nadpis); font-size: .98rem; font-weight: 600; }
.k-bok-radek { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--k-ink-2); }
.k-pozor { margin: 0; padding-left: 1.1rem; font-size: .87rem; color: var(--k-ink-2); line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.k-zpet { font-size: .9rem; color: var(--k-ink-2) !important; padding: 4px 4px; }

/* info karty (brzy, zamčeno, 404) */
.k-info { display: flex; flex-direction: column; gap: 12px; }
.k-info p { color: var(--k-ink-2); line-height: 1.55; }
.k-uzky-obsah { max-width: 720px; }
.k-zamceno { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* ================= PŘEHRÁVAČ (tabule) ================= */

.pr { outline: none; }
.pr:focus-visible .pr-tabule { box-shadow: 0 0 0 3px rgba(66, 86, 191, .5); }

.pr-tabule {
  position: relative;
  background: radial-gradient(120% 90% at 20% 0%, var(--k-tabule-2) 0%, var(--k-tabule) 62%), var(--k-tabule);
  color: var(--k-krida);
  border-radius: 14px;
  padding: 18px 10px;
  min-height: 10.5em;
  font-family: var(--k-font-krida);
  font-size: clamp(25px, 6.6vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .15em;
  overflow: hidden;
}
.pr-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .28em;
  padding: .55em 0;
}
.pr-staticky { display: inline-flex; }

.pr-zl { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; min-width: 1.3em; vertical-align: middle; }
.pr-cara { display: block; height: .085em; min-height: 2px; border-radius: 2px; background: currentColor; margin: .06em 0; }
.pr-b { position: relative; display: block; padding: 0 .18em; line-height: 1.12; white-space: nowrap; }
.pr-v { position: relative; display: inline-block; transition: color .3s, text-shadow .3s; }

.pr-hl .pr-v { color: var(--k-hl); text-shadow: 0 0 .35em rgba(255, 216, 77, .45); }

.pr-v::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  height: .09em;
  min-height: 2px;
  border-radius: 2px;
  background: var(--k-skrt);
  transform: rotate(-32deg) scaleX(0);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.3, .7, .3, 1);
}
.pr-skrt .pr-v { color: rgba(244, 242, 234, .45); text-shadow: none; }
.pr-skrt .pr-v::after { transform: rotate(-32deg) scaleX(1); }
/* škrt přes střed: jeden znak šikmo, dva znaky méně, slovo jen mírně */
.pr-stredni .pr-v::after { left: -8%; right: -8%; transform: rotate(-18deg) scaleX(0); }
.pr-skrt.pr-stredni .pr-v::after { transform: rotate(-18deg) scaleX(1); }
.pr-dlouhe .pr-v::after { left: -5%; right: -5%; transform: rotate(-6deg) scaleX(0); }
.pr-skrt.pr-dlouhe .pr-v::after { transform: rotate(-6deg) scaleX(1); }

.pr-r {
  position: absolute;
  left: 50%;
  font-size: .62em;
  line-height: 1;
  color: var(--k-nove);
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transition: opacity .3s .25s, transform .35s .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.pr-b-c .pr-r { bottom: 92%; }
.pr-b-j .pr-r { top: 92%; }
.pr-b-n .pr-r { bottom: 86%; }
.pr-cis:has(.pr-ma-r) { margin-top: .5em; }
.pr-ma-r .pr-r { opacity: 1; transform: translateX(-50%) scale(1); }
.pr-hl.pr-ma-r .pr-r { color: var(--k-hl); text-shadow: 0 0 .35em rgba(255, 216, 77, .5); }

.pr-prazdna .pr-v::before { content: "\00a0\00a0\00a0"; }
.pr-op { opacity: .92; padding: 0 .05em; }
.pr-cis .pr-b { padding: 0 .1em; }
.pr-smi { display: inline-flex; align-items: center; gap: .08em; }
.pr-cele { transition: color .3s; }
.pr-cele.pr-hl { color: var(--k-hl); text-shadow: 0 0 .35em rgba(255, 216, 77, .45); }
.pr-op.pr-zav-l { margin-right: -.22em; }
.pr-op.pr-zav-p { margin-left: -.22em; }
.pr-radek.pr-radek-dlouhy { font-size: .8em; gap: .22em; }
.pr-radek.pr-radek-delsi { font-size: .66em; gap: .2em; }
.pr-txt { font-size: .6em; line-height: 1.2; opacity: .85; padding: 0 .1em; max-width: 14em; text-align: center; }
.pr-txt.pr-hl { color: var(--k-hl); opacity: 1; }
.pr-op.pr-hl { color: var(--k-hl); text-shadow: 0 0 .35em rgba(255, 216, 77, .45); opacity: 1; }

/* mocnina, odmocnina, složený zlomek */
.pr-moc { display: inline-flex; align-items: flex-start; }
.pr-moc-z { display: inline-flex; align-items: center; gap: .08em; }
.pr-b.pr-moc-e { font-size: .58em; line-height: 1; padding: 0 .06em; margin-top: -.12em; }
.pr-odm { display: inline-flex; align-items: stretch; }
.pr-odm-znak { font-size: 1.15em; line-height: 1; align-self: center; margin-right: -.04em; }
.pr-odm-pod { display: inline-flex; align-items: center; gap: .2em; border-top: .075em solid currentColor; padding: .08em .12em 0; margin-top: .12em; }
.pr-odm.pr-hl .pr-odm-znak, .pr-odm.pr-hl .pr-odm-pod { color: var(--k-hl); }
.pr-slz { display: inline-flex; flex-direction: column; align-items: stretch; text-align: center; vertical-align: middle; }
.pr-slz-c, .pr-slz-j { display: flex; align-items: center; justify-content: center; gap: .2em; padding: .05em .2em; font-size: .9em; }
.pr-slz.pr-hl > .pr-cara { background: var(--k-hl); }

.pr-vstup { animation: pr-vstup .45s cubic-bezier(.2, .8, .3, 1); }
@keyframes pr-vstup { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
.pr-odchod { opacity: 0 !important; transition: opacity .25s; }
.pr-zmena .pr-v { animation: pr-zmena .5s ease-out; }
@keyframes pr-zmena { 0% { transform: scale(1.25); color: var(--k-hl); } 100% { transform: none; } }

.pr-prubeh { height: 4px; border-radius: 2px; background: var(--k-cara); margin: 12px 2px 0; overflow: hidden; }
.pr-prubeh span { display: block; height: 100%; width: 0; background: var(--k-modra); border-radius: 2px; transition: width .4s ease; }

.pr-pozn { font-size: 1rem; line-height: 1.55; min-height: 4.6em; margin: 12px 2px 14px !important; color: var(--k-ink) !important; }
.pr-pozn b { font-weight: 700; background: linear-gradient(transparent 58%, rgba(255, 216, 77, .6) 58%); padding: 0 .1em; }
.pr-pozn-vpred { animation: pr-pozn-vpred .35s ease-out; }
.pr-pozn-vzad { animation: pr-pozn-vzad .35s ease-out; }
@keyframes pr-pozn-vpred { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes pr-pozn-vzad { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.pr-ovl { display: flex; align-items: center; gap: 8px; }
.pr-ovl-2 { justify-content: center; margin-top: 8px; }
.pr-btn {
  appearance: none;
  font-weight: 600;
  font-size: .92rem;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--k-cara);
  background: var(--k-karta);
  color: var(--k-ink);
  cursor: pointer;
}
.pr-btn:disabled { opacity: .4; cursor: default; }
.pr-btn-dalsi { flex: 1; background: var(--k-modra); border-color: var(--k-modra); color: #fff; }
.pr-btn-dalsi:disabled { background: var(--k-ok); border-color: var(--k-ok); opacity: 1; }
.pr-ovl-2 .pr-btn { min-height: 38px; font-size: .86rem; background: transparent; }
.pr-btn-ikona { min-width: 44px; font-size: 1.05rem; }
.pr-pocitadlo { min-width: 3.6em; text-align: center; font-size: .86rem; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }

/* ================= MENU WEBU NA STRÁNKÁCH KURZU =================
   Hlavní menu webu zůstává na stránkách kurzu stejné jako jinde (v2 – dřív
   se tu na počítači schovávalo pod „hamburger“). */

/* ve školním režimu má školní účet, třídy i odhlášení hlavička webu – lišta „Školní účet“ v kurzu by se opakovala */
body.skolni-rezim .k-zak-pruh:not(.k-demo-pruh) { display: none; }

/* ================= HVĚZDIČKY ================= */

.k-hvezdy { display: inline-flex; align-items: center; gap: 1px; line-height: 1; white-space: nowrap; }
.k-hvezdy i { font-style: normal; font-size: 1.05rem; color: var(--k-novy); }
.k-hvezdy i::before { content: "★"; }
.k-hvezdy i.k-h-plna { color: var(--k-hvezda); }
.k-hvezdy-velke i { font-size: 1.3rem; }
.k-hvezdy-obri { justify-content: center; gap: 6px; margin: 0 auto 12px; }
.k-hvezdy-obri i { font-size: 2.6rem; animation: k-hvezda .5s var(--k-ease) both; }
.k-hvezdy-obri i:nth-child(2) { animation-delay: .12s; }
.k-hvezdy-obri i:nth-child(3) { animation-delay: .24s; }
@keyframes k-hvezda { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.k-tema-meta .k-hvezdy i { font-size: 1.1rem; }

/* ================= VÝBĚR ÚROVNĚ ================= */

.k-urovne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 14px; }
.k-uroven {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1.5px solid var(--k-cara);
  border-radius: 12px;
  background: var(--k-karta);
  color: var(--k-ink);
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s var(--k-ease), background .15s var(--k-ease);
}
.k-uroven:hover:not(:disabled) { border-color: var(--k-ink-3); }
.k-uroven-nazev { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; font-size: .95rem; }
.k-uroven-popis { font-size: .78rem; color: var(--k-ink-3); line-height: 1.3; }
.k-uroven-hvezda { font-style: normal; color: var(--k-novy); font-size: 1.05rem; line-height: 1; }
.k-uroven-hvezda::before { content: "★"; }
.k-uroven-hotovo .k-uroven-hvezda { color: var(--k-hvezda); }
.k-uroven-aktivni { border-color: var(--k-modra); background: var(--k-modra-bg); }
.k-uroven-zamcena { cursor: default; opacity: .55; }
.k-uroven-zamcena .k-uroven-hvezda::before { content: "🔒"; font-size: .75rem; }

.k-mistr-radek { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 2px; }

/* ================= PRO LEKTORY ================= */

.k-lektor { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-style: dashed; box-shadow: none; }
.k-btn-nebezpeci { color: var(--k-chyba) !important; border-color: var(--k-chyba); background: transparent; }
.k-btn-nebezpeci:hover { background: var(--k-chyba-bg); border-color: var(--k-chyba); }
.k-odkaz-silny { color: inherit !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ================= RESPONZIVITA ================= */

@media (max-width: 980px) {
  .k-prehled { grid-template-columns: 1fr; gap: 24px; }
  .k-souhrn { position: static; }
  .k-tema-layout { grid-template-columns: 1fr; }
  .k-tema-bok { position: static; }
  .k-zamceno { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .k-karta { padding: 18px; }
  .k-panel { padding: 18px 16px; }
  .k-tema { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; gap: 12px; }
  .k-tema-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
  .k-krok { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: .78rem; }
  .k-krok-nazev { display: none; }
  .k-krok-kratce { display: block; }
  .k-tema-hlava { gap: 12px; }
  .k-tema-cislo-velke { width: 44px; height: 44px; flex-basis: 44px; font-size: 1.1rem; }
    .k-mapa-bunka { width: 12px; height: 24px; }
  .k-mapa { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .k-app *, .k-app *::before, .k-app *::after { animation: none !important; transition: none !important; }
}

/* ---------- katalog kurzů ---------- */
.k-katalog { display: flex; flex-direction: column; gap: 28px; }
.k-katalog-hlava { max-width: 640px; }
.k-katalog-predmet { display: flex; flex-direction: column; gap: 12px; }
.k-katalog-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.k-kurz-karta { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; transition: transform .15s var(--k-ease), box-shadow .15s var(--k-ease); }
.k-kurz-karta:has(.k-kurz-odkaz):hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10,14,39,.08); }
.k-app a.k-kurz-odkaz { color: var(--k-ink); text-decoration: none; }
.k-kurz-odkaz::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* celá karta je odkaz */
.k-kurz-akce { position: relative; z-index: 1; align-self: flex-start; }
.k-katalog-kredit { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 20px; }
.k-katalog-kredit p { margin: 0; flex: 1 1 320px; color: var(--k-ink-2); line-height: 1.5; }
.k-katalog-kredit .k-bonus { flex: 1 1 100%; }
.k-kurz-nazev { font-family: var(--k-font-nadpis); font-size: 1.2rem; font-weight: 700; color: var(--k-ink); }
.k-kurz-popis { color: var(--k-ink-2); font-size: .95rem; line-height: 1.45; }
.k-kurz-pata { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--k-cara); color: var(--k-ink-3); font-size: .9rem; }
.k-kurz-brzy { background: var(--k-pozadi); }
.k-kurz-brzy .k-kurz-nazev { color: var(--k-ink-2); }
.k-kurz-priprava { color: var(--k-pozor-ink); background: var(--k-pozor-bg); border-radius: 999px; padding: 1px 10px; font-weight: 600; }
.k-lead-odkaz { margin: 6px 0 0; }
.k-lead-odkaz a { color: var(--k-modra); text-decoration: none; font-weight: 600; }
.k-katalog-balicek { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 20px; border: 2px solid var(--k-modra); }
.k-katalog-balicek .k-kurz-nazev { margin: 2px 0 4px; }
.k-katalog-balicek p { margin: 0; }
.k-koupit-form { margin: 0; }
.k-pristup .k-koupit-form { margin-top: 10px; }
.k-zprava { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--k-r-s); font-weight: 600; }
.k-zprava-ok { background: var(--k-ok-bg); color: var(--k-ok-ink); }
.k-zprava-chyba { background: var(--k-chyba-bg); color: var(--k-chyba-ink); }
.k-zprava-info { background: var(--k-pozor-bg); color: var(--k-pozor-ink); }

/* ---------- rýsování (konstrukční úlohy, assets/rysovani.js) ---------- */

.k-app .k-otazka.k-otazka-rys { font-size: 1.02rem; font-weight: 500; line-height: 1.55; }
.k-priklad.k-priklad-rys { display: block; font-family: inherit; font-size: 1rem; padding: 6px 0 0; min-height: 0; }
.k-priklad-rys .k-zadani, .k-priklad-rys .k-rovnase { display: none; }
.k-priklad-rys .k-vstup { display: block; }

.rys { --rys-akcent: #e8830c; display: flex; flex-direction: column; gap: 8px; width: 100%; font-size: 15px; color: var(--k-ink); }
.rys-lista { display: flex; flex-wrap: wrap; gap: 4px; }
.rys .rys-nastroj span { white-space: nowrap; }
.rys .rys-nastroj {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 60px; padding: 6px 4px 5px; border: 1px solid var(--k-cara); border-radius: var(--k-r-s);
  background: var(--k-karta); color: var(--k-ink); font: inherit; font-size: 11px; line-height: 1.1; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rys-nastroj:hover:not(:disabled) { border-color: var(--k-modra); }
.rys-nastroj svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rys-nastroj .rys-ik-plna { fill: currentColor; stroke: none; }
.rys-nastroj .rys-ik-slaba { opacity: .5; stroke-dasharray: 2 2; }
.rys-nastroj.rys-aktivni { background: var(--k-modra); border-color: var(--k-modra); color: #fff; }
.rys-napoveda { margin: 0 !important; min-height: 1.35em; font-size: .88rem; color: var(--k-ink-2); }

.rys-plocha { position: relative; border: 1px solid var(--k-cara); border-radius: var(--k-r-s); overflow: hidden; background: var(--k-karta); }
.rys-svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rys-zamceno .rys-svg { cursor: default; }
.rys-mriz line { stroke: var(--k-modra); stroke-opacity: .1; stroke-width: 1; }
.rys-dany { stroke: var(--k-ink); fill: none; stroke-linecap: round; }
.rys-moje { stroke: var(--k-modra); fill: none; stroke-linecap: round; }
.rys-cary .rys-vybrane { stroke: var(--rys-akcent); }
.rys-bod { fill: var(--k-modra); }
.rys-bod-dany { fill: var(--k-ink); }
.rys-bod-hledany { fill: var(--k-modra); stroke: var(--k-karta); stroke-width: 1.5px; }
.rys-body .rys-vybrane { fill: var(--rys-akcent); }
.rys-popisek { fill: var(--k-ink); font-family: inherit; font-weight: 600; paint-order: stroke; stroke: var(--k-karta); stroke-width: .28em; stroke-linejoin: round; pointer-events: none; }
.rys-popisek-hledany { fill: var(--k-modra); font-weight: 800; }
.rys-popisek-cara { font-style: italic; font-weight: 400; fill: var(--k-ink-2); }
.rys-duch { fill: none; stroke: var(--k-modra); stroke-opacity: .65; stroke-dasharray: 7 6; }
.rys-duch-bod { fill: var(--k-modra); opacity: .6; }
.rys-prichyt { fill: none; stroke: var(--k-modra); }
.rys-prichyt-prusecik { stroke: var(--rys-akcent); }
.rys-hover { fill: none; stroke: var(--rys-akcent); }
.rys-guma { fill: none; stroke: var(--k-chyba); stroke-opacity: .85; }
.rys-mereni { stroke: var(--rys-akcent); stroke-dasharray: 6 5; }
.rys-mereni-stitek { fill: var(--rys-akcent); }
.rys-mereni-text { fill: var(--k-ink); font-weight: 700; paint-order: stroke; stroke: var(--k-karta); stroke-width: .25em; }
.rys-mereni-stitek + .rys-mereni-text { fill: #1a1405; stroke: none; }
.rys-znacka-ok { fill: none; stroke: var(--k-ok); }
.rys-znacka-chyba { fill: none; stroke: var(--k-chyba); }
.rys-reseni { fill: none; stroke: var(--k-ok); stroke-dasharray: 4 3; }
.rys-reseni-text { fill: var(--k-ok); font-weight: 800; paint-order: stroke; stroke: var(--k-karta); stroke-width: .25em; }

.rys-dotaz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; align-self: flex-start;
  padding: 6px 8px; border: 1px solid var(--k-modra); border-radius: var(--k-r-s); background: var(--k-modra-bg); font-size: 15px;
}
.rys-dotaz[hidden], .rys-smer[hidden], .rys-stitky[hidden], .rys-stav[hidden] { display: none; }
.rys-dotaz-popis { font-weight: 600; }
.rys .rys-dotaz-vstup { width: 5.2em; min-width: 0; height: 34px; margin: 0; padding: 4px 8px; border: 1px solid var(--k-cara); border-radius: 7px; background: var(--k-karta); color: var(--k-ink); font: inherit; font-size: 16px; box-shadow: none; }
.rys .rys-dotaz button, .rys .rys-akce, .rys .rys-stitek {
  min-height: 34px; padding: 4px 10px; border: 1px solid var(--k-cara); border-radius: 8px;
  background: var(--k-karta); color: var(--k-ink); font: inherit; font-size: 14px; cursor: pointer;
}
.rys-dotaz .rys-dotaz-ok { background: var(--k-modra); border-color: var(--k-modra); color: #fff; font-weight: 700; }
.rys-smer { display: inline-flex; gap: 4px; }
.rys .rys-smer button { font-size: 18px; padding: 2px 10px; }
.rys-smer button[aria-pressed="true"] { background: var(--k-modra); border-color: var(--k-modra); color: #fff; }
.rys-dole { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.rys-stitky { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; }
.rys-stitky-popis { font-size: .88rem; color: var(--k-ink-2); }
.rys .rys-stitek { min-width: 42px; font-size: 17px; font-weight: 800; }
.rys-stitek.rys-aktivni { background: var(--k-modra); border-color: var(--k-modra); color: #fff; }
.rys .rys-stitek-bez { font-size: 13px; font-weight: 500; }
.rys-stav { flex: 1 1 auto; font-size: .84rem; color: var(--k-ink-3); }
.rys-akce:disabled, .rys-nastroj:disabled, .rys-stitek:disabled { opacity: .45; cursor: default; }
.rys-zamceno .rys-lista, .rys-zamceno .rys-dole .rys-akce:not(.rys-lupa-btn) { display: none; }
.rys-papir { fill: var(--k-karta); }
.rys-plocha.rys-oddaleno { background: var(--k-pozadi); }
.rys-oddaleno .rys-papir { stroke: var(--k-cara); stroke-width: 2; }
.rys-lupa { display: inline-flex; gap: 4px; }
.rys .rys-lupa-btn { min-width: 38px; padding: 2px 8px; font-size: 19px; font-weight: 700; line-height: 1; }

@media (max-width: 640px) {
  .rys-lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .rys .rys-nastroj { min-width: 0; padding: 4px 1px 3px; font-size: 10px; }
  .rys .rys-nastroj svg { width: 20px; height: 20px; }
  .rys .rys-nastroj span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* ---------- testy (assets/testy.js) ---------- */

.k-testy-hlava, .k-test-hlava { margin: 8px 0 18px; }
.k-test-hlava { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.k-testy-skupina { margin: 26px 0; }
.k-testy-popis { color: var(--k-ink-2); margin: 4px 0 14px !important; max-width: 720px; }
.k-testy-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.k-test-karta { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.k-test-nazev { font-family: var(--k-font-nadpis); font-size: 1.1rem; font-weight: 700; color: var(--k-ink); margin: 0; }
.k-test-meta { margin: 0 !important; font-size: .88rem; color: var(--k-ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.k-test-nejlepsi { margin: 0 !important; font-size: .9rem; color: var(--k-ok-ink); }
.k-test-casovac { display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--k-ink-2); cursor: pointer; margin-top: auto; }
.k-test-karta > a.k-btn-plna { margin-top: auto; text-align: center; }
.k-test-karta > a.k-btn-plna + .k-test-casovac { margin-top: 6px; }
.k-test-znovu { font-size: .9rem; }
.k-test-zamek { margin: auto 0 0 !important; font-size: .9rem; color: var(--k-ink-3); }
.k-test-zamceny { opacity: .8; }
.k-testy-rozdelane, .k-testy-historie { margin: 18px 0; }
.k-testy-seznam { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.k-testy-seznam li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-tabulka-historie { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .92rem; }
.k-tabulka-historie th { text-align: left; font-weight: 600; color: var(--k-ink-3); font-size: .8rem; padding: 6px 8px; border-bottom: 1px solid var(--k-cara); }
.k-tabulka-historie td { padding: 8px; border-bottom: 1px solid var(--k-cara); vertical-align: middle; }
.k-pct { color: var(--k-ink-3); }
.k-pruh-mini { display: block; height: 5px; border-radius: 3px; background: var(--k-cara); margin-top: 4px; overflow: hidden; max-width: 160px; }
.k-pruh-mini > span { display: block; height: 100%; background: var(--k-ok); border-radius: 3px; }
.k-pruh-velky { height: 10px; max-width: none; border-radius: 5px; }

/* lišta s časem: drží se pod (lepící) hlavičkou webu, výšku hlavičky nastaví testy.js do --k-hlavicka */
.k-test-lista {
  position: sticky; top: var(--k-hlavicka, 0px); z-index: 30;
  margin: -6px 0 16px; padding: 8px 0;
  background: var(--bg, #fff);
  box-shadow: 0 8px 10px -10px rgba(0, 0, 0, .25);
}
.k-test-stav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.k-test-lista .k-test-stav { justify-content: flex-end; gap: 10px; }
.k-app .k-test-cas-prepinac {
  font: inherit; font-size: .85rem; padding: 6px 12px; border-radius: var(--k-r-s);
  border: 1px solid var(--k-cara); background: var(--k-karta); color: var(--k-ink-2); cursor: pointer;
}
.k-app .k-test-cas-prepinac:hover { border-color: var(--k-modra); color: var(--k-modra); }
.k-test-cas-prepinac[hidden] { display: none; }
.k-test-lista .k-test-vyplneno { margin-right: auto; order: -1; font-weight: 600; color: var(--k-ink-2); }
@media (max-width: 600px) {
  .k-test-lista { padding: 6px 0; }
  .k-test-cas { font-size: 1rem; padding: 4px 10px; }
}
.k-test-cas { font-family: var(--k-font-nadpis); font-weight: 700; font-size: 1.15rem; padding: 6px 12px; border-radius: var(--k-r-s); background: var(--k-modra-bg); color: var(--k-modra); font-variant-numeric: tabular-nums; }
.k-test-cas[hidden] { display: none; }
.k-test-cas-malo { background: var(--k-chyba-bg); color: var(--k-chyba-ink); }
.k-test-vyplneno { font-size: .9rem; color: var(--k-ink-3); }
.k-t-pokyny { margin-bottom: 14px; color: var(--k-ink-2); font-size: .95rem; }
.k-t-uloha { margin-bottom: 14px; padding: 18px 20px; }
.k-t-uloha-hlava { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.k-t-cislo { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; background: var(--k-brand); color: #fff; font-family: var(--k-font-cisla); font-weight: 700; font-size: 1.1rem; }
.k-t-body { font-size: .85rem; color: var(--k-ink-3); }
.k-t-body b { font-size: 1.05rem; }
.k-t-body-plne { color: var(--k-ok-ink); }
.k-t-body-cast { color: var(--k-pozor-ink); }
.k-t-body-nula { color: var(--k-chyba-ink); }
.k-t-uvod { color: var(--k-ink); line-height: 1.55; margin-bottom: 6px; }
.k-t-pokyn { margin: 6px 0 !important; font-weight: 600; color: var(--k-ink); }
.k-t-obrazek { margin: 8px 0; }
.k-t-poduloha { padding: 12px 0; border-top: 1px dashed var(--k-cara); }
.k-t-poduloha.k-t-jedina { border-top: 0; padding-top: 4px; }
.k-t-pod-hlava { display: flex; gap: 10px; align-items: baseline; }
.k-t-pod-cislo { flex: none; font-weight: 700; color: var(--k-modra); min-width: 2.2em; }
.k-t-text { line-height: 1.5; color: var(--k-ink); font-size: 1.06rem; font-weight: 600; }
.k-t-vstup { margin-top: 8px; }
.k-t-vstup .rys { margin-top: 4px; }
.k-priklad.k-t-priklad { justify-content: flex-start; padding: 6px 0 2px; min-height: 0; font-size: clamp(20px, 5vw, 28px); }
.k-t-volby { display: flex; flex-direction: column; gap: 6px; }
.k-t-volby-prirazeni, .k-t-volby-anone { flex-direction: row; flex-wrap: wrap; }
.k-app .k-t-volba {
  display: flex; align-items: baseline; gap: 8px; text-align: left; padding: 9px 14px; min-height: 42px;
  border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); background: var(--k-karta); color: var(--k-ink); cursor: pointer; font: inherit;
}
.k-t-volby-prirazeni .k-t-volba { min-width: 46px; justify-content: center; }
.k-t-volby-anone .k-t-volba span { font-size: .85rem; color: var(--k-ink-3); }
.k-app .k-t-volba:hover:not(:disabled) { border-color: var(--k-modra); }
.k-app .k-t-volba[aria-checked="true"] { border-color: var(--k-modra); background: var(--k-modra-bg); box-shadow: inset 0 0 0 1px var(--k-modra); }
.k-app .k-t-volba[aria-checked="true"] span { color: var(--k-modra); }
.k-app .k-t-volba:disabled { cursor: default; }
.k-t-moznosti { list-style: none; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--k-r-s); background: var(--k-pozadi); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; }
.k-t-pata { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px; }
.k-t-pata-text { margin: 0 !important; color: var(--k-ink-2); }
.k-t-ulozeno { margin: 0 !important; font-size: .82rem; color: var(--k-ink-3); min-height: 1.2em; }

.k-t-souhrn { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-bottom: 16px; padding: 20px 22px; }
.k-t-skore { display: flex; align-items: baseline; gap: 6px; font-family: var(--k-font-nadpis); }
.k-t-skore-cislo { font-size: 3rem; font-weight: 800; color: var(--k-ink); line-height: 1; }
.k-t-skore-max { font-size: 1.3rem; color: var(--k-ink-3); }
.k-t-souhrn-text { flex: 1 1 200px; }
.k-t-souhrn-slovo { margin: 0 0 6px !important; font-weight: 700; font-size: 1.1rem; }
.k-t-souhrn-slovo span { color: var(--k-ink-3); font-weight: 500; }
.k-t-doporuceni { flex-basis: 100%; }
.k-t-dop-seznam { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.k-t-dop-seznam li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--k-pozadi); font-size: .92rem; }
.k-t-dop-seznam li span { color: var(--k-chyba-ink); white-space: nowrap; font-size: .85rem; }
.k-t-hodnoceni { margin-top: 10px; padding: 10px 12px; border-radius: var(--k-r-s); background: var(--k-pozadi); font-size: .93rem; }
.k-t-h-spravne { background: var(--k-ok-bg); }
.k-t-h-spatne, .k-t-h-prazdne { background: var(--k-chyba-bg); }
.k-t-h-radek { display: flex; gap: 8px; align-items: baseline; }
.k-t-h-znak { font-weight: 800; }
.k-t-h-spravne .k-t-h-znak { color: var(--k-ok-ink); }
.k-t-h-spatne .k-t-h-znak, .k-t-h-prazdne .k-t-h-znak { color: var(--k-chyba-ink); }
.k-t-h-zprava { margin: 6px 0 0 !important; color: var(--k-ink-2); }
.k-t-h-spravne > .k-t-h-spravne { background: none; }
.k-t-h-spravne .pr-radek, .k-t-hodnoceni .pr-radek { display: inline-flex; font-family: var(--k-font-krida); font-size: 1.25em; vertical-align: middle; }
div.k-t-h-spravne { margin-top: 6px; }
.k-t-hodnoceni > .k-t-h-spravne { padding: 0; background: none; }
.k-t-postup-btn { margin-top: 8px; }
.k-t-prehravac { margin-top: 10px; }
.k-t-konec { margin: 18px 0; }
.k-prehled-testy { display: flex; flex-direction: column; gap: 8px; }
.k-prehled-testy p { margin: 0 !important; color: var(--k-ink-2); font-size: .92rem; }

@media (max-width: 640px) {
  .k-t-uloha { padding: 14px; }
  .k-tabulka-historie th:first-child, .k-tabulka-historie td:first-child { display: none; }
}

/* ================= VSTUPY S VÝBĚREM A DOPLŇOVÁNÍM (čeština – assets/vstupy.js) ================= */

.k-priklad.k-priklad-cj { display: block; font-family: inherit; font-size: 1rem; padding: 12px 0 4px; min-height: 0; }
.k-priklad-cj .k-zadani, .k-priklad-cj .k-rovnase { display: none; }
.k-priklad-cj .k-vstup { display: block; }
/* výběr z možností s matematickým zadáním (střední škola): zadání nahoře, možnosti pod ním */
.k-priklad.k-priklad-cj.k-priklad-cj-zad .k-zadani { display: flex; justify-content: center; margin: 4px 0 14px; font-family: var(--k-font-krida); font-size: clamp(24px, 6vw, 34px); color: var(--k-ink); }
.k-t-cj { margin-top: 4px; }
.cj { font-size: 1rem; color: var(--k-ink); }
.k-app .cj-veta { font-size: 1.24rem; line-height: 2.15; margin: 0 0 6px !important; color: var(--k-ink) !important; overflow-wrap: anywhere; }
.k-app .cj-veta b { font-weight: 700; background: linear-gradient(transparent 60%, rgba(255, 216, 77, .55) 60%); padding: 0 .08em; }

/* mezery: segmenty (i | y) a rozbalovací seznam */
.cj-seg { display: inline-flex; vertical-align: baseline; border: 1.5px dashed var(--k-modra); border-radius: 8px; background: var(--k-karta); margin: 0 1px; line-height: 1; overflow: hidden; }
.k-app .cj-seg-m { border: 0; background: transparent; color: var(--k-modra); font-weight: 700; font-size: .95em; min-width: 1.75em; min-height: 1.75em; padding: 0 .3em; cursor: pointer; }
.k-app .cj-seg-m + .cj-seg-m { border-left: 1px solid var(--k-cara); }
.k-app .cj-seg-m:hover:not(:disabled) { background: var(--k-modra-bg); }
.cj-seg.cj-vyplneno { border-style: solid; border-color: var(--k-cara); }
.k-app .cj-seg.cj-vyplneno .cj-seg-m { color: var(--k-ink-3); font-weight: 500; }
.k-app .cj-seg .cj-seg-m.cj-on { background: var(--k-modra); color: #fff; font-weight: 700; }
.cj-rozbal { position: relative; display: inline-block; vertical-align: baseline; margin: 0 1px; }
.k-app .cj-rozbal-btn { font-weight: 700; font-size: .95em; color: var(--k-modra); background: var(--k-karta); border: 1.5px dashed var(--k-modra); border-radius: 8px; padding: .1em .55em; min-height: 1.75em; line-height: 1.3; cursor: pointer; }
.k-app .cj-rozbal-btn::after { content: " ▾"; font-size: .8em; opacity: .7; }
.cj-rozbal.cj-vyplneno .cj-rozbal-btn { border-style: solid; color: var(--k-ink); }
.cj-rozbal-ph { font-weight: 500; color: var(--k-ink-3); }
.cj-rozbal-menu { display: none; position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; flex-direction: column; background: var(--k-karta); border: 1px solid var(--k-cara); border-radius: 10px; box-shadow: 0 8px 24px rgba(10, 14, 39, .16); padding: 4px; }
.cj-otevreno .cj-rozbal-menu { display: flex; }
.k-app .cj-rozbal-m { text-align: left; white-space: nowrap; border: 0; background: transparent; color: var(--k-ink); padding: 8px 12px; border-radius: 7px; font-size: .95rem; line-height: 1.3; cursor: pointer; }
.k-app .cj-rozbal-m:hover { background: var(--k-modra-bg); }
.cj-ok.cj-seg, .cj-ok.cj-rozbal .cj-rozbal-btn { border: 2px solid var(--k-ok) !important; }
.cj-chyba.cj-seg, .cj-chyba.cj-rozbal .cj-rozbal-btn { border: 2px solid var(--k-chyba) !important; background: var(--k-chyba-bg); }
.k-app .cj-chyba.cj-seg .cj-seg-m.cj-on { background: var(--k-chyba); }
.k-app .cj-ok.cj-seg .cj-seg-m.cj-on { background: var(--k-ok); }
.cj-zamceno .cj-seg-m, .cj-zamceno .cj-rozbal-btn { cursor: default; }
.cj-radky { display: flex; flex-direction: column; gap: 6px; }
.cj-radek { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--k-pozadi); }
.cj-radek-t { flex: 1 1 260px; line-height: 1.5; }
.cj-radek-m { flex: 0 0 auto; font-size: 1.05rem; }

/* výběr z možností */
.cj-volby { display: flex; gap: 8px; margin-top: 4px; }
.cj-volby-chipy { flex-wrap: wrap; }
.cj-volby-radky { flex-direction: column; }
.k-app .cj-volba { display: flex; align-items: baseline; gap: 8px; text-align: left; min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--k-cara); border-radius: 12px; background: var(--k-karta); color: var(--k-ink); font-size: 1rem; line-height: 1.45; cursor: pointer; transition: border-color .15s, background .15s; }
.cj-volby-chipy .cj-volba { align-items: center; }
.k-app .cj-volba:hover:not(:disabled) { border-color: var(--k-modra); }
.k-app .cj-volba[aria-checked="true"] { border-color: var(--k-modra); background: var(--k-modra-bg); box-shadow: inset 0 0 0 1px var(--k-modra); font-weight: 600; }
.k-app .cj-volba.cj-ok { border-color: var(--k-ok); background: var(--k-ok-bg); box-shadow: inset 0 0 0 1px var(--k-ok); }
.k-app .cj-volba.cj-chyba { border-color: var(--k-chyba); background: var(--k-chyba-bg); box-shadow: inset 0 0 0 1px var(--k-chyba); }
.cj-volba:disabled { cursor: default; }
.cj-volba-p { flex: 0 0 auto; }

/* označování slov a čárek */
.k-app .cj-slovo { display: inline; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1.5px dashed var(--k-ink-3); border-radius: 4px; padding: .05em .12em; margin: 0 -.06em; cursor: pointer; line-height: 1.5; }
.k-app .cj-slovo:hover:not(:disabled) { background: var(--k-modra-bg); }
.k-app .cj-slovo.cj-on { background: var(--k-modra); color: #fff; border-bottom-color: transparent; }
.k-app .cj-slovo.cj-ok { background: var(--k-ok-bg); color: var(--k-ok-ink); box-shadow: inset 0 0 0 2px var(--k-ok); }
.k-app .cj-slovo.cj-chyba { background: var(--k-chyba-bg); color: var(--k-chyba-ink); box-shadow: inset 0 0 0 2px var(--k-chyba); }
.k-app .cj-slovo.cj-chybi { box-shadow: inset 0 0 0 2px var(--k-chyba); border-bottom-style: solid; }
.k-app .cj-carka { display: inline-block; width: .9em; height: 1.55em; margin: 0 .02em 0 -.06em; padding: 0; vertical-align: -.35em; border: 0; border-radius: 5px; background: transparent; color: var(--k-modra); font: inherit; font-weight: 800; cursor: pointer; position: relative; }
.k-app .cj-carka::after { content: ""; position: absolute; left: 50%; bottom: .2em; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--k-ink-3); opacity: .45; }
.k-app .cj-carka span { visibility: hidden; }
.k-app .cj-carka:hover:not(:disabled) { background: var(--k-modra-bg); }
.k-app .cj-carka.cj-on span { visibility: visible; }
.k-app .cj-carka.cj-on::after { display: none; }
.k-app .cj-carka.cj-ok { background: var(--k-ok-bg); color: var(--k-ok-ink); }
.k-app .cj-carka.cj-chyba { background: var(--k-chyba-bg); color: var(--k-chyba-ink); }
.k-app .cj-carka.cj-chybi { background: var(--k-chyba-bg); box-shadow: inset 0 0 0 2px var(--k-chyba); }
.cj-veta-carky { line-height: 2.3; }

/* pořadí částí textu */
.k-app .cj-poradi-pokyn { font-size: .88rem; color: var(--k-ink-3); margin: 0 0 8px !important; }
.cj-casti { display: flex; flex-direction: column; gap: 8px; }
.k-app .cj-cast { display: grid; grid-template-columns: 2.4em 1.4em 1fr; align-items: baseline; gap: 6px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--k-cara); border-radius: 12px; background: var(--k-karta); color: var(--k-ink); font-size: .98rem; line-height: 1.5; cursor: pointer; }
.k-app .cj-cast:hover:not(:disabled) { border-color: var(--k-modra); }
.cj-cast-cislo { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; border: 1.5px dashed var(--k-cara); font-weight: 800; color: #fff; align-self: center; }
.cj-cast.cj-on { border-color: var(--k-modra); }
.cj-cast.cj-on .cj-cast-cislo { background: var(--k-modra); border: 0; }
.cj-cast.cj-ok .cj-cast-cislo { background: var(--k-ok); }
.cj-cast.cj-chyba .cj-cast-cislo { background: var(--k-chyba); }
.cj-cast.cj-chyba { border-color: var(--k-chyba); }
.cj-cast-k { color: var(--k-ink-3); }

/* psaná odpověď */
.cj-text-radek { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.1rem; }
.k-app input.cj-text-pole { width: min(100%, 18em); font: inherit; font-size: 1.1rem; padding: 8px 12px; border: 2px solid var(--k-cara); border-radius: 10px; background: var(--k-pozadi); color: var(--k-ink); }
.k-app input.cj-text-pole:focus { outline: none; border-color: var(--k-modra); background: var(--k-karta); box-shadow: 0 0 0 3px rgba(66, 86, 191, .18); }
.k-app input.cj-text-pole.cj-ok { border-color: var(--k-ok); }
.k-app input.cj-text-pole.cj-chyba { border-color: var(--k-chyba); }
.k-app input.cj-text-pole.cj-text-kratke { width: min(100%, 8.5em); }

/* výsledek v „Správně je …“ – delší text menším písmem */
.k-reseni.k-reseni-dlouhe { flex-wrap: wrap; }
.k-reseni.k-reseni-dlouhe .pr-radek { font-size: 1.15em; flex-wrap: wrap; }
.k-t-cj { margin-top: 4px; }

/* ukázka textu (porozumění, návaznost, literatura) */
.k-obrazek .cj-ukazka { width: 100%; text-align: left; font-size: 1.06rem; line-height: 1.65; background: var(--k-karta); border: 1px solid var(--k-cara); border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(10, 14, 39, .06); }
.cj-ukazka p { margin: 0 0 .6em !important; color: var(--k-ink) !important; }
.cj-ukazka p:last-child { margin-bottom: 0 !important; }
.cj-ukazka .cj-vers { white-space: pre-line; font-style: italic; }
.cj-ukazka-zdroj { font-size: .82rem; color: var(--k-ink-3) !important; }
.k-vyklad-otazka + .k-obrazek .cj-ukazka { margin-bottom: 6px; }

/* tabule pro věty (čeština): nižší a menší písmo než u příkladů */
.pr-text .pr-tabule { min-height: 6.2em; font-size: clamp(20px, 4.6vw, 28px); justify-content: center; padding: 16px 12px; }
.pr-text .pr-radek { padding: .3em 0; gap: .3em; }
.pr-text .pr-radek.pr-radek-dlouhy { font-size: .9em; }
.pr-text .pr-radek.pr-radek-delsi { font-size: .8em; }
.cj-wslovo { white-space: nowrap; }
.k-app .cj-vyber .cj-veta, .k-app .cj-text .cj-veta { line-height: 1.6; margin-bottom: 10px !important; }


/* ================= TABULE NA VÝPOČTY ================= */

/* tlačítko u příkladu: má být vidět, ale nepřebít „Zkontrolovat“ */
.k-tabule-pruh { display: flex; justify-content: center; margin: 4px 0 2px; }
.k-tabule-pruh[hidden] { display: none; }
.k-app .k-tabule-btn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 440px);
  padding: 10px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--k-modra) 55%, transparent);
  border-radius: 14px;
  background-image:
    linear-gradient(to right, var(--tb-mriz) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tb-mriz) 1px, transparent 1px);
  background-size: 14px 14px;
  background-color: var(--tb-papir);
  color: var(--k-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--k-ease), transform .15s var(--k-ease), box-shadow .2s var(--k-ease);
}
.k-app .k-tabule-btn:hover { border-color: var(--k-modra); border-style: solid; box-shadow: 0 6px 18px rgba(66, 86, 191, .14); }
.k-app .k-tabule-btn:active { transform: scale(.985); }
.k-tabule-ikona {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--k-modra);
  color: #fff;
}
.k-tabule-ikona svg { width: 24px; height: 24px; }
.k-tabule-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.k-tabule-text b { font-size: 1rem; }
.k-tabule-text small { font-size: .8rem; color: var(--k-ink-2); }
.k-tabule-nahled { flex: none; width: 76px; height: 46px; border-radius: 8px; background: var(--tb-papir); border: 1px solid var(--k-cara); }
.k-tabule-nahled[hidden] { display: none; }

/* v testu: menší tlačítko u podúlohy */
.k-app .k-t-tabule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px 6px 8px;
  border: 1.5px dashed color-mix(in srgb, var(--k-modra) 55%, transparent);
  border-radius: 10px;
  background: var(--tb-papir);
  color: var(--k-modra);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.k-app .k-t-tabule-btn:hover { border-style: solid; border-color: var(--k-modra); }
.k-app .k-t-tabule-btn svg { width: 20px; height: 20px; }
.k-t-tabule-btn .k-t-tabule-tecka { width: 7px; height: 7px; border-radius: 50%; background: var(--k-modra); }
.k-t-tabule-btn .k-t-tabule-tecka[hidden] { display: none; }

/* okno */
html.tb-otevreno, html.tb-otevreno body { overscroll-behavior: none; }
.tb-zaves {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 14, 39, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: tb-zaves .18s var(--k-ease);
}
@keyframes tb-zaves { from { opacity: 0; } to { opacity: 1; } }
.tb-okno {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(940px, 100%);
  overflow: hidden;
  border-radius: 18px;
  background: var(--k-karta);
  color: var(--k-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  outline: none;
  animation: tb-okno .22s var(--k-ease);
}
@keyframes tb-okno { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.tb-hlava {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--k-cara);
  background: var(--k-karta);
}
.tb-titul { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-family: var(--k-font-nadpis); font-weight: 700; font-size: 1.05rem; color: var(--k-ink); white-space: nowrap; }
.tb-titul svg { color: var(--k-modra); }
.tb-nastroje { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tb-nastroje::-webkit-scrollbar { display: none; }
.tb-oddel { flex: none; width: 1px; height: 26px; margin: 0 6px; background: var(--k-cara); }
.k-app .tb-n {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 11px;
  background: none;
  color: var(--k-ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.k-app .tb-n:hover { background: var(--k-pozadi); color: var(--k-ink); }
.k-app .tb-n[aria-pressed="true"] { background: color-mix(in srgb, var(--k-modra) 12%, var(--k-karta)); border-color: var(--k-modra); color: var(--k-modra); }
.k-app .tb-n:disabled { opacity: .35; cursor: default; background: none; }
.k-app .tb-zavrit { margin-left: 2px; color: var(--k-ink); }
.tb-stav { flex: none; font-size: .78rem; color: var(--k-ink-3); white-space: nowrap; }
.tb-stav:empty { display: none; }

/* zadání nahoře */
.tb-zadani {
  flex: none;
  position: relative;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--k-cara);
  background: var(--k-pozadi);
}
.tb-zadani-obsah { max-height: min(26vh, 230px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
/* výšku nastavuje tabule.js (táhlo); sbalené zadání ukáže jen první řádek */
.tb-zadani { padding-bottom: 14px; }
.tb-zadani-tahlo {
  position: absolute; left: 0; right: 0; bottom: -7px; height: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
}
.tb-zadani-tahlo span {
  width: 46px; height: 6px; border-radius: 3px;
  background: var(--k-karta); border: 1px solid var(--k-cara); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: background .15s, border-color .15s, width .15s;
}
.tb-zadani-tahlo:hover span, .tb-zadani-tahlo:focus-visible span, .tb-tahlo-aktivni span { background: var(--k-modra); border-color: var(--k-modra); width: 60px; }
.tb-zadani-tahlo:focus-visible { outline: none; }
.tb-zadani-sbalene .tb-zadani-obsah { display: none; }
.k-app .tb-zadani-sbalene .tb-zadani-vic { margin: 0; }
@media (pointer: coarse) { .tb-zadani-tahlo { height: 26px; bottom: -13px; } .tb-zadani-tahlo span { width: 56px; } }
.tb-zadani-obsah > * { margin: 0 !important; }
.k-app .tb-zadani .k-otazka { margin: 0 !important; padding: 0; border: 0; background: none; font-size: 1rem; }
.tb-zadani .k-obrazek, .tb-zadani .k-t-obrazek { justify-content: flex-start; margin: 0; cursor: zoom-in; }
.tb-zadani .k-obrazek svg { max-width: 220px; max-height: 15vh; }
.tb-obrazek-velky .k-obrazek svg { max-width: 460px; max-height: 45vh; }
.tb-obrazek-velky .tb-zadani-obsah { max-height: 60vh; overflow-y: auto; }
.tb-obrazek-velky .k-obrazek { cursor: zoom-out; }
.tb-zadani .cj-ukazka { padding: 8px 12px; font-size: .95rem; }
.tb-priklad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3em;
  font-family: var(--k-font-krida);
  font-size: clamp(24px, 6vw, 32px);
  line-height: 1.2;
  color: var(--k-ink);
}
.tb-priklad .k-zadani { display: inline-flex; }
.tb-priklad-otaznik { color: var(--k-modra); }
.tb-zadani .k-t-uvod, .tb-zadani .k-t-pokyn, .tb-zadani .k-t-text { font-size: .98rem; }
.k-app .tb-zadani-vic {
  appearance: none;
  display: block;
  margin: 6px 0 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--k-modra);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.tb-zadani-vic[hidden] { display: none !important; }

/* papír */
.tb-plocha { position: relative; flex: 1 1 auto; min-height: 140px; overflow: hidden; background: var(--tb-papir); }
.tb-platno { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; }
.tb-platno[data-nastroj="guma"] { cursor: cell; }
.tb-platno[data-nastroj="text"] { cursor: text; }

/* psaní textu: lišta nahoře v papíru (klávesnice na mobilu ji nezakryje) */
.tb-text-lista {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--k-karta) 94%, transparent);
  border-bottom: 1px solid var(--k-cara);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .3);
  font-family: system-ui, sans-serif;
}
.tb-text-lista[hidden] { display: none; }
.tb-text-radek { display: flex; align-items: center; gap: 8px; }
.k-app .tb-text-vstup {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--k-font-krida); font-size: 20px; line-height: 1.2;
  padding: 6px 10px; border: 2px solid var(--k-modra); border-radius: 10px;
  background: var(--k-pozadi); color: var(--k-ink); box-shadow: none;
}
.k-app .tb-text-vstup:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-modra) 22%, transparent); }
.tb-text-pocet { flex: none; font-size: .75rem; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
.tb-text-pocet-plno { color: var(--k-chyba-ink, #c0392b); font-weight: 700; }
.k-app .tb-text-ok {
  flex: none; appearance: none; border: 0; border-radius: 10px; padding: 9px 14px; min-height: 40px;
  background: var(--k-modra); color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.k-app .tb-text-zrus {
  flex: none; appearance: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--k-cara); border-radius: 10px; background: var(--k-karta); color: var(--k-ink-2); cursor: pointer; padding: 0;
}
.tb-text-znaky { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tb-text-znaky::-webkit-scrollbar { display: none; }
.k-app .tb-text-znak {
  flex: none; appearance: none; min-width: 38px; height: 34px; padding: 0 8px;
  border: 1px solid var(--k-cara); border-radius: 8px; background: var(--k-karta); color: var(--k-ink);
  font-family: var(--k-font-krida); font-size: 20px; line-height: 1; cursor: pointer;
}
.k-app .tb-text-znak:hover { border-color: var(--k-modra); color: var(--k-modra); }
.k-app .tb-text-znak.tb-text-znak-mocnina { font-size: 30px; font-weight: 700; padding-top: 6px; }
@media (max-width: 700px), (max-height: 520px) {
  .tb-text-lista { padding: 6px 8px; gap: 5px; }
  .tb-text-pocet { display: none; }
  .k-app .tb-text-ok { padding: 8px 12px; }
}
.tb-platno[data-nastroj="ruka"] { cursor: grab; }
.tb-platno.tb-tahne { cursor: grabbing; }
.tb-napoveda {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(90%, 360px);
  margin: 0 !important;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--k-ink-3);
  pointer-events: none;
}
.tb-napoveda b { color: var(--k-ink-2); }
.tb-napoveda[hidden] { display: none; }
.tb-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  border: 1px solid var(--k-cara);
  border-radius: 10px;
  overflow: hidden;
  background: var(--k-karta);
  box-shadow: 0 2px 8px rgba(10, 14, 39, .08);
}
.k-app .tb-zoom button { appearance: none; border: 0; background: none; color: var(--k-ink-2); min-width: 34px; height: 32px; padding: 0 6px; font-size: .95rem; cursor: pointer; }
.k-app .tb-zoom button:hover { background: var(--k-pozadi); color: var(--k-ink); }
.k-app .tb-zoom .tb-zoom-hodnota { min-width: 54px; font-size: .78rem; font-variant-numeric: tabular-nums; border-left: 1px solid var(--k-cara); border-right: 1px solid var(--k-cara); }
.tb-toast {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--k-ink);
  color: var(--k-karta);
  font-size: .88rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.tb-toast[hidden] { display: none; }

/* odpověď dole – vždy na spodním okraji okna */
.tb-odpoved {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--k-cara);
  background: var(--k-karta);
  box-shadow: 0 -8px 20px rgba(10, 14, 39, .06);
  max-height: 45%;
  overflow-y: auto;
}
.tb-odpoved-popis { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink-3); }
.tb-vstup-misto {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--k-font-krida);
  font-size: 28px;
  color: var(--k-ink);
}
.tb-vstup-misto .k-vstup { flex-wrap: wrap; row-gap: 8px; }
.tb-vstup-misto .k-vstup.k-vstup-siroky { justify-content: flex-start; }
.tb-vstup-misto .k-klavesy { justify-content: flex-start; font-family: system-ui, sans-serif; }
.tb-vstup-misto .k-t-vstup { margin: 0; font-family: system-ui, sans-serif; font-size: 1rem; width: 100%; }
.tb-akce { display: flex; gap: 8px; margin-left: auto; }
.tb-akce .k-btn { min-width: 150px; }

@media (max-width: 700px), (max-height: 520px) {
  .tb-zaves { padding: 0; align-items: stretch; background: var(--k-karta); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tb-okno { width: 100%; height: 100%; border-radius: 0; box-shadow: none; animation: tb-mobil .2s var(--k-ease); }
  @keyframes tb-mobil { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .tb-hlava { padding: 4px 4px 4px 10px; gap: 2px; }
  .tb-titul span { display: none; }
  .tb-titul { margin-right: 2px; }
  .k-app .tb-n { width: 40px; height: 40px; }
  .tb-oddel { margin: 0 2px; }
  .tb-n-znovu { display: none !important; }
  .tb-stav { display: none; }
  .tb-zadani { padding: 8px 12px 12px; }
  .tb-zadani-obsah { max-height: 22vh; }
  .tb-odpoved { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px 10px; }
  .tb-odpoved-popis { font-size: .7rem; }
  .tb-vstup-misto { font-size: 24px; }
  .tb-akce { flex: 0 0 auto; }
  .tb-akce .k-btn { min-width: 0; min-height: 46px; padding-left: 16px; padding-right: 16px; }
  .k-tabule-text small { font-size: .76rem; }
}

/* ================= ZAKRESLENÍ GRAFU (assets/graf.js) ================= */

.k-priklad.k-priklad-graf { display: block; font-size: 1rem; font-family: inherit; padding: 6px 0 0; min-height: 0; }
.k-priklad-graf .k-zadani { display: flex; justify-content: center; margin: 2px 0 10px; font-family: var(--k-font-krida); font-size: clamp(24px, 6vw, 34px); }
.k-priklad-graf .k-rovnase { display: none; }
.k-priklad-graf .k-vstup { display: block; }
.gr { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; margin: 0 auto; color: var(--k-ink); font-family: system-ui, sans-serif; }
.gr-plocha { border: 1px solid var(--k-cara); border-radius: var(--k-r-s); background: var(--tb-papir); overflow: hidden; }
.gr-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }
.gr-zamceno .gr-svg { cursor: default; }
.gr-mriz line { stroke: var(--tb-mriz); stroke-width: 1; }
.gr-osy line { stroke: var(--k-ink); stroke-width: 1.6; }
.gr-sipka { fill: var(--k-ink); }
.gr-znacka { stroke: var(--k-ink); stroke-width: 1.4; }
.gr-cisla text { fill: var(--k-ink-2); font-size: 12px; }
.gr-cisla .gr-osa-jm { fill: var(--k-ink); font-size: 15px; font-style: italic; }
.gr-cara { fill: none; stroke: var(--k-modra); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gr-cara-spatne { stroke: var(--k-chyba, #d4343a); stroke-dasharray: 8 6; }
.gr-osa-paraboly { stroke: var(--k-modra); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .55; }
.gr-soumerny { fill: none; stroke: var(--k-modra); stroke-width: 2; opacity: .7; }
.gr-bod circle { fill: var(--k-modra); stroke: var(--k-karta); stroke-width: 2.5; }
.gr-bod .gr-znacka-kruh { fill: none; stroke-width: 3; }
.gr-ok .gr-znacka-kruh { stroke: var(--k-ok, #16a34a); }
.gr-chyba .gr-znacka-kruh { stroke: var(--k-chyba, #d4343a); }
.gr-jmeno { fill: var(--k-ink); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--tb-papir); stroke-width: 4px; stroke-linejoin: round; }
.gr-nahled-bod { fill: var(--k-modra); opacity: .3; }
.gr-reseni-cara { fill: none; stroke: var(--k-ok, #16a34a); stroke-width: 3; stroke-dasharray: 9 7; }
.gr-reseni-bod { fill: var(--k-ok, #16a34a); }
.gr-lista { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gr-napoveda { flex: 1 1 220px; margin: 0 !important; font-size: .88rem; line-height: 1.4; color: var(--k-ink-2); }
.k-app .gr-smaz { min-height: 36px; padding: 4px 12px; font-size: .88rem; flex: none; }
.gr-smaz[hidden] { display: none; }

/* ---------- tlačítko zpět – vždy vlevo nahoře, stejné na všech stránkách kurzu ---------- */
.k-zpet-pruh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 20px;
}
.k-zpet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--k-modra);
  background: var(--k-modra-bg);
  color: var(--k-modra) !important;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: var(--k-stin);
  transition: background .2s var(--k-ease), color .2s var(--k-ease), transform .2s var(--k-ease), box-shadow .2s var(--k-ease);
}
.k-zpet-btn svg { flex: none; transition: transform .2s var(--k-ease); }
.k-zpet-btn:hover,
.k-zpet-btn:focus-visible {
  background: var(--k-modra);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(66, 86, 191, .28);
}
.k-zpet-btn:hover svg { transform: translateX(-3px); }
.k-zpet-btn:focus-visible { outline: 3px solid var(--k-modra-bg); outline-offset: 2px; }
.k-zpet-pruh .k-drobky { margin: 0; }
@media (max-width: 640px) {
  .k-zpet-pruh { margin-bottom: 14px; }
  .k-zpet-btn { min-height: 40px; font-size: .92rem; }
}

/* ---------- školní účet žáka: pruh nahoře ---------- */
.k-zak-pruh {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  margin-bottom: 14px; padding: 8px 14px; border-radius: 12px;
  background: var(--k-modra-bg); color: var(--k-ink-2); font-size: .88rem;
}
.k-zak-pruh b { color: var(--k-ink); }
.k-zak-pruh a { color: var(--k-modra) !important; font-weight: 600; }

/* ---------- Školy: přihlášení žáka a správa tříd (.ks-*) ---------- */
.ks-prihlaseni { padding-top: 24px; padding-bottom: 48px; }
.ks-karta { padding: 28px; }
.ks-karta .k-h2 { margin: 4px 0 8px; }
.ks-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.ks-form-radek { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ks-form-radek .ks-pole { flex: 1 1 160px; }
.ks-pole { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--k-ink-2); }
.ks-pole input, .ks-pole select, .ks-form textarea {
  font: inherit; font-weight: 500; font-size: 1rem; color: var(--k-ink);
  background: var(--k-karta); border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s);
  padding: 10px 12px; min-height: 44px; width: 100%; box-sizing: border-box;
}
.ks-form textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, 'Consolas', monospace; font-size: .95rem; }
.ks-pole input:focus, .ks-pole select:focus, .ks-form textarea:focus { outline: none; border-color: var(--k-modra); box-shadow: 0 0 0 3px var(--k-modra-bg); }
.ks-jmeno { display: flex; align-items: stretch; }
.ks-jmeno input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.ks-pripona {
  display: flex; align-items: center; padding: 0 12px; font-family: ui-monospace, 'Consolas', monospace; font-weight: 600;
  color: var(--k-ink-2); background: var(--k-pozadi); border: 1.5px solid var(--k-cara); border-left: 0;
  border-radius: 0 var(--k-r-s) var(--k-r-s) 0; white-space: nowrap;
}
.ks-kod { font-family: ui-monospace, 'Consolas', monospace !important; letter-spacing: .12em; text-transform: uppercase; font-size: 1.15rem !important; }
.ks-pozn { margin: 10px 0 0; font-size: .88rem; color: var(--k-ink-3); line-height: 1.5; }
.ks-slabe { color: var(--k-ink-3); }

.ks-sprava { padding-top: 8px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 18px; }
.ks-hlava { margin: 8px 0 0; }
.ks-hlava .k-h1 { margin: 4px 0 6px; }
.ks-hlava .k-lead { margin: 0; }
.ks-zprava { margin: 0; }
.ks-blok { padding: 22px 24px; }
.ks-blok > .k-bok-nadpis, .ks-radek-akce .k-bok-nadpis { margin: 0 0 12px; }
.ks-blok > summary { cursor: pointer; font-weight: 700; color: var(--k-ink); }
.ks-blok[open] > summary { margin-bottom: 12px; }
.ks-nebezpeci > summary { color: var(--k-chyba-ink); }
.ks-radek-akce { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ks-radek-akce .k-bok-nadpis { margin: 0; }
.ks-tlacitka { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ks-radek-akce .ks-tlacitka { margin-top: 0; }
.ks-tlacitka form { margin: 0; }
.ks-inline { display: inline; margin-left: 8px; }

.ks-tridy { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ks-tridy:has(.ks-skola) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ks-trida {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s);
  background: var(--k-karta); color: var(--k-ink) !important; text-decoration: none !important;
  transition: border-color .15s var(--k-ease), transform .15s var(--k-ease);
}
.ks-trida b { font-size: 1.15rem; font-family: var(--k-font-nadpis); }
.ks-trida span { font-size: .85rem; color: var(--k-ink-3); }
.ks-trida:hover { border-color: var(--k-modra); transform: translateY(-1px); }
.ks-trida-konec { opacity: .55; }

.ks-tabulka-obal { overflow-x: auto; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.ks-tabulka { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ks-tabulka th { text-align: left; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--k-ink-3); padding: 8px 10px; border-bottom: 1.5px solid var(--k-cara); white-space: nowrap; }
.ks-tabulka td { padding: 10px; border-bottom: 1px solid var(--k-cara); vertical-align: middle; }
.ks-tabulka tbody tr:hover { background: var(--k-pozadi); }
.ks-tabulka code { font-size: .88rem; white-space: nowrap; }
.ks-tabulka input[type="checkbox"], .ks-predmety input { width: 18px; height: 18px; accent-color: var(--k-modra); }

.ks-uprava { margin-top: 16px; padding: 16px 18px; border: 1.5px solid var(--k-modra); border-radius: var(--k-r-s); background: var(--k-modra-bg); }
.ks-uprava .k-bok-nadpis { margin: 0; }
.ks-predmety { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ks-predmety legend { font-size: .88rem; font-weight: 600; color: var(--k-ink-2); margin-bottom: 6px; padding: 0; }
.ks-predmety label { display: inline-flex; align-items: center; gap: 6px; }
.ks-seznam { margin: 0 0 6px; padding-left: 20px; }
.ks-seznam li { margin: 4px 0; }
.ks-odkaz-pozvanky code { display: block; padding: 10px 12px; background: var(--k-pozadi); border-radius: var(--k-r-s); word-break: break-all; font-size: .85rem; user-select: all; }

@media (max-width: 600px) {
  .ks-karta, .ks-blok { padding: 18px 16px; }
  .ks-radek-akce { align-items: stretch; }
  .ks-tlacitka .k-btn { flex: 1 1 auto; }
}
.ks-pole input, .ks-pole select, .ks-form textarea, .ks-pripona { margin: 0; }
.ks-jmeno input { height: auto; align-self: stretch; }

/* Školy: role, záložky přihlášení, učitelé ve třídě */
.k-zak-pruh-odkazy { display: inline-flex; gap: 14px; }
.ks-zalozky { display: flex; gap: 4px; margin: 14px 0 4px; padding: 4px; background: var(--k-pozadi); border-radius: var(--k-r-s); }
.ks-zalozky a {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: calc(var(--k-r-s) - 3px); font-weight: 600;
  color: var(--k-ink-2) !important; text-decoration: none !important;
}
.ks-zalozky a[aria-current="page"] { background: var(--k-karta); color: var(--k-ink) !important; box-shadow: var(--k-stin); }
.ks-uvod { margin: 12px 0 0; color: var(--k-ink-2); }
.ks-pozn-hore { margin-top: 0; }
.ks-mezera { margin-top: 12px; }
.ks-podnadpis { margin: 22px 0 0 !important; font-size: 1rem; }
.ks-stitek {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; vertical-align: 1px;
  background: var(--k-modra-bg); color: var(--k-modra);
}
.ks-ceka { color: var(--k-pozor-ink); background: var(--k-pozor-bg); padding: 1px 8px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.ks-trida-moje { border-color: var(--k-modra); }
.ks-trida i { font-style: normal; color: var(--k-ink-3); }
.ks-ucitele { list-style: none; margin: 0; padding: 0; }
.ks-ucitele li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--k-cara); }
.ks-ucitele li:last-child { border-bottom: 0; }
.ks-ucitele .ks-inline { margin-left: 0; }
.ks-pridat-ucitele { padding-top: 14px; border-top: 1.5px dashed var(--k-cara); }
.ks-pridat-ucitele .ks-predmety { flex: 2 1 260px; align-self: center; }
.ks-predmety-radek { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ks-predmety-radek label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ks-prirazeni input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--k-modra); }
tr.ks-slabe td { opacity: .55; }
.ks-form.ks-form-radek { flex-direction: row; }
.ks-form.ks-form-radek .ks-pole { flex: 1 1 160px; }
.ks-form.ks-form-radek > .k-btn { flex: 0 0 auto; }
.ks-sprava .k-btn-maly { font-size: .88rem; font-weight: 600; }

/* Školy: co žák dělal (pro učitele) */
.ks-zak-odkaz { font-weight: 700; color: var(--k-ink) !important; text-decoration: underline; text-decoration-color: var(--k-cara); text-underline-offset: 3px; }
.ks-zak-odkaz:hover { color: var(--k-modra) !important; text-decoration-color: currentColor; }
.ks-kurz { border-top: 1px solid var(--k-cara); padding: 10px 0; }
.ks-kurz:first-of-type { border-top: 0; }
.ks-kurz > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 4px 0; }
.ks-temata .k-hvezdy { font-size: .9rem; }
.ks-filtr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ks-filtr select { font: inherit; font-size: .92rem; color: var(--k-ink); background: var(--k-karta); border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); padding: 7px 10px; min-height: 38px; max-width: 100%; }
.ks-zaskrt { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--k-ink-2); white-space: nowrap; }
.ks-zaskrt input { width: 18px; height: 18px; accent-color: var(--k-modra); }
/* zapamatované zařízení (přihlášení pro školy) */
.ks-pamatovat { white-space: normal; align-items: flex-start; line-height: 1.4; margin: 2px 0 4px; }
.ks-pamatovat input { flex: none; margin-top: 1px; }
.ks-pamatovat small { display: block; color: var(--k-ink-3); font-size: .82rem; }
.ks-zarizeni { margin: 4px 0 16px; }
.ks-zarizeni-nadpis { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--k-ink-3); }
.ks-zarizeni-ucet { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ks-zarizeni-ucet form { margin: 0; }
.ks-zarizeni-pokracovat button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 16px; border: 2px solid var(--k-modra); border-radius: var(--k-r-s); background: var(--k-modra-bg); color: var(--k-ink); font: inherit; text-align: left; cursor: pointer; }
.ks-zarizeni-pokracovat button:hover { background: var(--k-karta); }
.ks-zarizeni-pokracovat small { color: var(--k-ink-2); font-size: .85rem; }
.ks-zarizeni-odebrat { font-size: .82rem; color: var(--k-ink-3) !important; padding: 0 4px; }
.ks-zapomenout { margin: 12px 0 0; font-size: .88rem; }
.ks-zapomenout small { color: var(--k-ink-3); }
.k-pamatovat-nabidka { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px; margin: 0 auto 14px; border: 1.5px solid var(--k-modra); border-radius: var(--k-r); background: var(--k-modra-bg); }
.k-pamatovat-nabidka p { margin: 0; color: var(--k-ink); flex: 1 1 280px; }
.k-pamatovat-nabidka p small { display: block; color: var(--k-ink-2); }
.k-pamatovat-nabidka form { display: flex; gap: 8px; margin: 0; }
.ks-pokusy { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ks-pokus { border: 1.5px solid var(--k-cara); border-left: 5px solid var(--k-cara); border-radius: var(--k-r-s); padding: 14px 16px; background: var(--k-karta); }
.ks-pokus-ok { border-left-color: var(--k-ok); }
.ks-pokus-chyba { border-left-color: var(--k-chyba); }
.ks-pokus-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .88rem; }
.ks-pokus-stav { font-weight: 800; }
.ks-pokus-ok .ks-pokus-stav { color: var(--k-ok-ink); }
.ks-pokus-chyba .ks-pokus-stav { color: var(--k-chyba-ink); }
.ks-pokus-tema { font-weight: 600; color: var(--k-ink); }
.ks-pokus-cas { margin-left: auto; }
.ks-stitek-postup { background: var(--k-pozor-bg); color: var(--k-pozor-ink); }
.ks-pokus-zadani { margin: 10px 0 0; }
.ks-pokus-zadani .k-otazka { margin: 0 0 6px; font-size: .98rem; }
.ks-pokus-zadani .k-obrazek { margin: 6px 0; max-width: 420px; }
.ks-pokus-zadani .k-obrazek svg { max-width: 100%; height: auto; }
.ks-pokus-veta { margin: 4px 0; }
.ks-pokus-priklad { font-size: 1.15rem; justify-content: flex-start; min-height: 0; padding: 6px 0; overflow-x: auto; }
.ks-pokus-odpovedi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ks-odp { flex: 1 1 200px; padding: 8px 12px; border-radius: var(--k-r-s); background: var(--k-pozadi); }
.ks-odp small { display: block; font-size: .75rem; color: var(--k-ink-3); margin-bottom: 2px; }
.ks-odp b { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 1.02rem; }
.ks-odp-ok { background: var(--k-ok-bg); }
.ks-odp-chyba { background: var(--k-chyba-bg); }
.ks-pokus .ks-tlacitka { align-items: center; }
.ks-pokus .k-btn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.ks-bez-tabule { font-size: .85rem; }
.ks-pokus-prehravac { margin-top: 12px; }
.ks-strankovani { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ks-strankovani .k-btn:only-child { margin-left: auto; }

/* ---------- Pro školy: nabídka (.ps-*), licenční podmínky (.pp-*) ---------- */
.ps { padding-bottom: 56px; }
.ps-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px 0 36px; }
.ps-hero .k-h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; margin: 6px 0 14px; }
.ps-hero .k-lead { font-size: 1.12rem; max-width: 36em; }
.ps-hero .k-akce { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.ps-fakta { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 26px 0 0; padding: 0; color: var(--k-ink-2); font-size: .95rem; }
.ps-fakta b { display: block; font-family: var(--k-font-nadpis); font-size: 1.9rem; line-height: 1; color: var(--k-ink); }
.ps-kartka {
  margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center;
  padding: 22px 22px 18px; background: #fff; color: #0a0e27; border: 1.5px dashed #9aa3c7; border-radius: 6px;
  box-shadow: 0 18px 40px rgba(10,14,39,.14), 0 2px 6px rgba(10,14,39,.08); transform: rotate(-2deg); max-width: 420px; justify-self: center;
}
.ps-kartka-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ps-kartka-text small { font-size: .68rem; color: #6b7280; margin-top: 6px; }
.ps-kartka-text small:first-child { color: #4256bf; font-weight: 800; letter-spacing: .06em; margin-top: 0; }
.ps-kartka-text b { font-size: 1.3rem; line-height: 1.2; }
.ps-kartka-text span { font-size: .85rem; color: #4b5269; }
.ps-kartka-text code { font-family: ui-monospace, 'Consolas', monospace; font-weight: 700; font-size: .92rem; color: #0a0e27; background: none; padding: 0; white-space: nowrap; }
.ps-kartka-text .ps-kod { font-size: 1.25rem; letter-spacing: .04em; }
.ps-qr { width: 118px; height: 118px; display: block; }
.ps-kartka figcaption { grid-column: 1 / -1; font-size: .78rem; color: #6b7280; border-top: 1px solid #eef0f6; padding-top: 10px; }
.ps-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-sloupec { padding: 24px; }
.ps-sloupec .k-h2 { font-size: 1.2rem; margin: 0 0 12px; }
.ps-sloupec ul, .ps-cena ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ps-sloupec li, .ps-cena li { position: relative; padding-left: 22px; line-height: 1.45; color: var(--k-ink-2); }
.ps-sloupec li::before, .ps-cena li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 9px; height: 5px; border-left: 2.2px solid var(--k-ok); border-bottom: 2.2px solid var(--k-ok); transform: rotate(-45deg); }
.ps-sekce { margin-top: 48px; scroll-margin-top: 90px; }
.ps-sekce > .k-h2 { margin: 0 0 8px; }
.ps-uvod { margin: 0 0 16px; color: var(--k-ink-2); }
.ps-pozn { margin: 14px 0 0; font-size: .9rem; color: var(--k-ink-3); }
.ps-kroky { list-style: none; counter-reset: ps; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ps-kroky li { counter-increment: ps; position: relative; padding: 52px 16px 16px; background: var(--k-karta); border: 1.5px solid var(--k-cara); border-radius: var(--k-r); display: flex; flex-direction: column; gap: 6px; }
.ps-kroky li::before { content: counter(ps); position: absolute; top: 14px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--k-modra); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.ps-kroky b { font-size: 1rem; color: var(--k-ink); }
.ps-kroky span { font-size: .9rem; color: var(--k-ink-2); line-height: 1.45; }
.ps-predmety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-predmet { padding: 20px 22px; border-top: 5px solid var(--k-modra); }
.ps-predmet-cestina { border-top-color: #d4343a; }
.ps-predmet-anglictina { border-top-color: #16a34a; }
.ps-predmet h3 { margin: 0 0 10px; font-size: 1.15rem; }
.ps-predmet p { margin: 8px 0 0; font-size: .92rem; color: var(--k-ink-2); line-height: 1.5; }
.ps-predmet small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k-ink-3); }
.ps-ceny { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 16px; }
.ps-cena { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.ps-cena h3 { margin: 0; font-size: 1.1rem; }
.ps-cena-castka { margin: 0; }
.ps-cena-castka b { font-family: var(--k-font-nadpis); font-size: 2rem; color: var(--k-ink); }
.ps-cena-castka span { color: var(--k-ink-3); font-size: .9rem; }
.ps-cena p { margin: 0; color: var(--k-ink-2); }
.ps-cena .k-btn { margin-top: auto; }
.ps-cena-hlavni { border: 2px solid var(--k-modra); box-shadow: 0 10px 30px rgba(66,86,191,.15); }
.ps-cena-namiru { padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.ps-cena-namiru p { margin: 0; max-width: 46em; color: var(--k-ink-2); }
.ps-cena-namiru b { color: var(--k-ink); }
.ps-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ps-faq details { background: var(--k-karta); border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); padding: 0 18px; }
.ps-faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; color: var(--k-ink); }
.ps-faq details[open] summary { padding-bottom: 6px; }
.ps-faq p { margin: 0 0 14px; color: var(--k-ink-2); line-height: 1.55; }
.ps-poptavka { padding: 28px; max-width: 860px; }
.ps-poptavka .k-h2 { margin: 0 0 6px; }
.ps-siroke { flex: 2 1 260px !important; }
.ps-past { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ps-souhlas { margin: 2px 0 0; font-size: .85rem; line-height: 1.5; color: var(--k-ink-3); }
/* galerie správy školy */
.ps-galerie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 4px 0 18px; }
.ps-snimek { grid-column: span 2; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-snimek:nth-child(n+4) { grid-column: span 3; }
.ps-snimek a { display: block; height: 230px; overflow: hidden; border: 1.5px solid var(--k-cara); border-radius: var(--k-r); background: #fff; box-shadow: var(--k-stin); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ps-snimek a:hover, .ps-snimek a:focus-visible { border-color: var(--k-modra); box-shadow: 0 10px 28px rgba(66,86,191,.16); transform: translateY(-2px); }
.ps-snimek img { display: block; width: 165%; max-width: none; height: auto; }   /* náhled: zvětšený levý horní roh snímku */
.ps-snimek:nth-child(n+4) img { width: 125%; }
.ps-snimek figcaption, .ps-lb-text { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; line-height: 1.45; color: var(--k-ink-2); }
.ps-snimek figcaption b, .ps-lb-text b { color: var(--k-ink); font-size: .98rem; }
.ps-lb { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--k-r); background: var(--k-karta); box-shadow: 0 24px 60px rgba(10,14,39,.35); }
.ps-lb::backdrop { background: rgba(10,14,39,.6); }
.ps-lb figure { margin: 0; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.ps-lb-obr { overflow: auto; background: #fff; flex: 1; min-height: 0; }
.ps-lb-obr img { display: block; width: 100%; height: auto; }
.ps-lb figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--k-cara); }
.ps-lb-ovl { display: flex; align-items: center; gap: 8px; }
.ps-lb-pocet { min-width: 3.5em; text-align: center; font-size: .85rem; color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .ps-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-snimek, .ps-snimek:nth-child(n+4) { grid-column: span 1; }
  .ps-snimek a { height: 180px; }
  .ps-snimek img, .ps-snimek:nth-child(n+4) img { width: 150%; }
}
@media (max-width: 520px) {
  .ps-galerie { grid-template-columns: 1fr; }
  .ps-snimek a { height: 200px; }
  .ps-snimek img, .ps-snimek:nth-child(n+4) img { width: 180%; }
}
.ps-pata { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--k-cara); font-size: .9rem; color: var(--k-ink-3); }
.kk-skoly {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; padding: 20px 24px;
  text-decoration: none !important; color: var(--k-ink-2) !important; border: 1.5px solid var(--k-cara); background: linear-gradient(120deg, var(--k-modra-bg), var(--k-karta) 70%);
  transition: border-color .15s var(--k-ease), transform .15s var(--k-ease);
}
.kk-skoly:hover { border-color: var(--k-modra); transform: translateY(-1px); }
.kk-skoly span { max-width: 48em; line-height: 1.5; }
.kk-skoly small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--k-modra); }
.kk-skoly span > b { color: var(--k-ink); font-size: 1.1rem; margin-right: 6px; }
.kk-skoly-sipka { color: var(--k-modra); white-space: nowrap; }
.ks-poptavka p { margin: 8px 0 0; color: var(--k-ink-2); }
.ks-poptavka-zprava { background: var(--k-pozadi); border-radius: var(--k-r-s); padding: 10px 12px; }

.pp { max-width: 860px; padding-bottom: 56px; }
.pp-navrh { margin: 8px 0 16px; line-height: 1.5; font-weight: 500; }
.pp-navrh code, .pp-text code { font-size: .85em; }
.pp-doplnit { background: #ffe58a; color: #5b4300; padding: 0 4px; border-radius: 4px; font-weight: 700; }
.pp-obsah { padding: 18px 22px; margin-top: 18px; font-size: .92rem; }
.pp-obsah ol { columns: 2; margin: 8px 0 12px; padding-left: 20px; }
.pp-obsah li { margin: 2px 0; }
.pp-obsah a { color: var(--k-modra) !important; }
.pp-text { padding: 26px 30px; margin-top: 18px; line-height: 1.6; color: var(--k-ink-2); }
.pp-text h2 { margin: 0 0 6px; font-size: 1.35rem; color: var(--k-ink); }
.pp-text h3 { margin: 26px 0 8px; font-size: 1.05rem; color: var(--k-ink); scroll-margin-top: 90px; }
.pp-text p { margin: 0 0 8px; }
.pp-text ul { margin: 4px 0 10px; padding-left: 22px; }
.pp-text li { margin: 4px 0; }
.pp-pozn { color: var(--k-ink-3); font-size: .92rem; }
.pp-pata { text-align: center; }

@media (max-width: 900px) {
  .ps-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 12px; }
  .ps-tri, .ps-predmety { grid-template-columns: 1fr; }
  .ps-kroky { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ps-kroky { grid-template-columns: 1fr; }
  .ps-kartka { transform: none; padding: 16px; gap: 10px 12px; }
  .ps-qr { width: 92px; height: 92px; }
  .ps-kartka-text code { font-size: .8rem; }
  .ps-kartka-text .ps-kod { font-size: 1.05rem; }
  .ps-poptavka, .pp-text { padding: 20px 16px; }
  .pp-obsah ol { columns: 1; }
}
.ps-predmet h3, .ps-cena h3, .pp-text h2, .pp-text h3 { font-family: inherit; }
.ps-predmet { border-top: 1.5px solid var(--k-cara); box-shadow: inset 0 5px 0 var(--k-modra); }
.ps-predmet-cestina { box-shadow: inset 0 5px 0 #d4343a; }
.ps-predmet-anglictina { box-shadow: inset 0 5px 0 #16a34a; }
.ps-cipy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ps-cipy span { padding: 3px 10px; border-radius: 999px; background: var(--k-pozadi); border: 1px solid var(--k-cara); font-size: .84rem; color: var(--k-ink); white-space: nowrap; }
.pp { max-width: none; }
.pp > * { max-width: 860px; }

/* Ceník škol, kalkulačka, ukázka správy */
.kk-skoly { display: block; padding: 26px 28px; margin-top: 32px; transform: none !important; color: var(--k-ink-2) !important; scroll-margin-top: 90px; }
.kk-skoly .k-h2 { margin: 4px 0 6px; }
.kk-skoly p { margin: 0; max-width: 52em; }
.kk-skoly .k-akce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kk-skoly-pozn { margin-top: 12px !important; font-size: .9rem; color: var(--k-ink-3); }
.ps-cenik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ps-cenik-polozka { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); background: var(--k-karta); }
.ps-cenik-hlavni { border-color: var(--k-modra); box-shadow: 0 8px 24px rgba(66,86,191,.12); }
.ps-cenik-nazev { font-weight: 700; color: var(--k-ink); }
.ps-cenik-polozka b { font-family: var(--k-font-nadpis); font-size: 2rem; line-height: 1.15; color: var(--k-ink); margin-top: 4px; }
.ps-cenik-za { font-size: .85rem; color: var(--k-ink-3); }
.ps-cenik-polozka small { margin-top: 8px; font-size: .85rem; color: var(--k-ink-2); }
.ps-podminky { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--k-ink-2); font-size: .95rem; }
.ps-podminky b { color: var(--k-ink); }
.ps-kalkulacka { margin-top: 20px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px 28px; }
.ps-kalkulacka h3 { grid-column: 1 / -1; margin: 0; font-size: 1.15rem; font-family: inherit; }
.ps-kalk-pole { display: flex; flex-direction: column; gap: 14px; }
.ps-kalk-pole .ks-pole { max-width: 200px; }
.ps-kalk-vysledek { background: var(--k-modra-bg); border-radius: var(--k-r-s); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ps-kalk-celkem { margin: 0; color: var(--k-ink-2); }
.ps-kalk-celkem b { font-family: var(--k-font-nadpis); font-size: 2.2rem; color: var(--k-ink); margin-right: 6px; }
.ps-kalk-rozpis { margin: 0; font-size: .9rem; color: var(--k-ink-2); line-height: 1.5; }
.ps-kalk-tip { margin: 0; font-size: .9rem; font-weight: 600; color: var(--k-pozor-ink); background: var(--k-pozor-bg); border-radius: var(--k-r-s); padding: 8px 10px; }
.ps-ukazka { padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; background: linear-gradient(120deg, var(--k-modra-bg), var(--k-karta) 75%); }
.ps-ukazka .k-h2 { margin: 0 0 8px; }
.ps-ukazka p { margin: 0; color: var(--k-ink-2); line-height: 1.55; }
.ps-ukazka-role { display: flex; flex-direction: column; gap: 10px; }
.ps-ukazka-role .k-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 10px 16px; height: auto; }
.ps-ukazka-role .k-btn small { font-weight: 500; font-size: .82rem; opacity: .8; }
@media (max-width: 900px) {
  .ps-cenik, .ps-kalkulacka, .ps-ukazka { grid-template-columns: 1fr; }
}
.k-demo-pruh { background: var(--k-pozor-bg) !important; color: var(--k-pozor-ink) !important; }
.k-demo-pruh b { color: inherit !important; }
.k-demo-pruh a { color: var(--k-pozor-ink) !important; text-decoration: underline; }
.kk-skoly .ps-cenik-polozka small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .85rem; color: var(--k-ink-2); }

/* ================= TŘÍDA: přehled, úkoly (skola_trida.php) ================= */
.ks-trida-zalozky { margin: 4px 0 18px; max-width: 560px; }
.ks-kurz-vyber { margin: 0 0 14px; }
.ks-kurz-vyber .ks-pole { min-width: min(100%, 340px); }
/* přehled třídy: žáci × témata */
.ks-hm-obal { overflow-x: auto; }
.ks-hm { border-collapse: separate; border-spacing: 3px; font-size: .82rem; }
.ks-hm th, .ks-hm td { min-width: 30px; height: 30px; padding: 0 4px; text-align: center; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ks-hm thead th { color: var(--k-ink-3); font-weight: 700; }
.ks-hm td { background: var(--k-pozadi, #f3f4f8); color: var(--k-ink-2); }
.ks-hm .ks-hm-zak { position: sticky; left: 0; z-index: 1; min-width: 160px; text-align: left; padding: 0 10px 0 4px; background: var(--k-karta); white-space: nowrap; font-weight: 600; }
.ks-hm .ks-hm-zvl, .ks-hm-vzor.ks-hm-zvl { background: var(--k-ok); color: #fff; font-weight: 700; }
.ks-hm .ks-hm-roz2, .ks-hm-vzor.ks-hm-roz2 { background: #ffd66b; color: #5b4300; }
.ks-hm .ks-hm-roz1, .ks-hm-vzor.ks-hm-roz1 { background: #ffb4a8; color: #7a1d10; }
.ks-hm .ks-hm-suma { background: transparent; color: var(--k-ink); }
.ks-hm tfoot td { background: transparent; color: var(--k-ink-3); font-size: .74rem; }
.ks-hm-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.ks-hm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ks-hm-vzor { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--k-pozadi, #f3f4f8); border: 1px solid var(--k-cara); }
.ks-hm-temata { margin-top: 12px; font-size: .9rem; }
.ks-hm-temata summary { cursor: pointer; color: var(--k-modra); font-weight: 600; }
.ks-hm-temata ol { columns: 2; margin: 10px 0 0; padding-left: 28px; }
.ks-hm-temata li { margin: 2px 0; break-inside: avoid; }
/* úkoly (učitel) */
.ks-ukoly { display: flex; flex-direction: column; gap: 8px; }
.ks-ukol { border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); background: var(--k-karta); }
.ks-ukol > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 12px 16px; cursor: pointer; list-style: none; }
.ks-ukol > summary::-webkit-details-marker { display: none; }
.ks-ukol[open] > summary { border-bottom: 1px solid var(--k-cara); }
.ks-ukol-hlava { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ks-ukol-hlava small { color: var(--k-ink-2); font-size: .85rem; }
.ks-stitek { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--k-modra-bg); color: var(--k-modra); font-size: .75rem; font-weight: 700; }
.ks-po-terminu { color: var(--k-chyba-ink); font-weight: 600; }
.ks-ukol-plneni { display: inline-flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--k-ink-2); white-space: nowrap; }
.ks-pruh-ukol { width: 90px; height: 7px; border-radius: 4px; background: var(--k-cara); overflow: hidden; }
.ks-pruh-ukol i { display: block; height: 100%; background: var(--k-ok); }
.ks-ukol-telo { padding: 6px 16px 14px; }
.ks-ukol-stav { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--k-pozadi, #f3f4f8); color: var(--k-ink-3); }
.ks-ukol-stav-hotovo { background: var(--k-ok-bg); color: var(--k-ok-ink); }
.ks-ukol-stav-rozpracovano { background: var(--k-pozor-bg); color: var(--k-pozor-ink, #7a5a00); }
.ks-ukol-form fieldset { border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); padding: 12px 14px; margin: 0; }
.ks-ukol-form legend { padding: 0 6px; font-weight: 700; font-size: .9rem; color: var(--k-ink); }
.ks-ukol-druh { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ks-ukol-druh label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; max-width: 380px; }
.ks-ukol-druh label span { display: flex; flex-direction: column; gap: 1px; }
.ks-ukol-druh small { color: var(--k-ink-3); font-size: .85rem; }
.ks-ukol-form input[type=radio], .ks-ukol-form input[type=checkbox] { width: 17px; height: 17px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--k-modra); }
.ks-ukol-temata { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 22px; }
.ks-ukol-kapitola { display: flex; flex-direction: column; gap: 4px; }
.ks-ukol-kapitola b { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--k-ink-3); margin-bottom: 2px; }
.ks-ukol-kapitola label { display: flex; gap: 8px; align-items: baseline; font-size: .92rem; cursor: pointer; }
.ks-ukol-form [hidden] { display: none !important; }
/* úkoly (žák, výběr kurzů) */
.kk-ukoly { padding: 20px 22px; margin-bottom: 18px; border: 2px solid var(--k-modra); }
.kk-ukoly .k-h2 { margin: 0 0 12px; }
.kk-ukoly-seznam { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kk-ukol { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1.5px solid var(--k-cara); border-radius: var(--k-r-s); background: var(--k-karta); }
.kk-ukol .k-btn { align-self: flex-start; }
.kk-ukol-hlava { display: flex; flex-direction: column; gap: 2px; }
.kk-ukol-hlava small { color: var(--k-ink-2); font-size: .85rem; }
.kk-ukol-po { border-color: var(--k-chyba); }
.kk-ukol-po .kk-ukol-hlava small { color: var(--k-chyba-ink); }
.kk-ukol-hotovo { background: var(--k-ok-bg); border-color: transparent; }
.kk-ukol-temata { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.kk-ukol-temata li { display: flex; justify-content: space-between; gap: 10px; }
.kk-ukol-temata span { color: var(--k-ink-3); font-size: .82rem; white-space: nowrap; }
.kk-ukol-tema-zvladnuty span { color: var(--k-ok-ink); font-weight: 600; }
.kk-ukol-stav { margin: 0; font-size: .85rem; color: var(--k-ink-2); }
.kk-ukoly-nic { margin: 0; color: var(--k-ok-ink); font-weight: 600; }
.kk-ukoly-splnene { margin-top: 12px; }
.kk-ukoly-splnene summary { cursor: pointer; color: var(--k-ink-2); font-weight: 600; margin-bottom: 10px; }
@media (max-width: 640px) {
  .ks-hm-temata ol { columns: 1; }
  .ks-hm .ks-hm-zak { min-width: 120px; }
}