:root{
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#eef2f9; --line:#d9e0ec;
  --text:#16202f; --dim:#5a6b84;
  --a:#a85f00; --b:#1a5fd0; --c:#0f7f63; --d:#c0344d; --e:#6d3fbe;
  --kod-bg:#f7f9fc; --stin:0 1px 3px rgba(20,35,60,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1720px; margin:0 auto; padding:0 30px 90px}
header.top{
  background:linear-gradient(135deg,#ffffff,#e9eff9);
  border-bottom:3px solid var(--a); padding:20px 0; margin-bottom:30px;
  position:sticky; top:0; z-index:60; box-shadow:var(--stin);
}
header.top .wrap{padding-bottom:0; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap}
header.top a.zpet{color:var(--b); text-decoration:none; font-size:15px; font-weight:600}
header.top a.zpet:hover{text-decoration:underline}
h1{font-size:2.15rem; margin:.3em 0 .2em; color:#0d1726; line-height:1.22}
h2{
  font-size:1.7rem; margin:2.4em 0 .7em; color:var(--a);
  border-bottom:3px solid var(--line); padding-bottom:.35em;
}
h3{font-size:1.25rem; margin:1.7em 0 .5em; color:var(--b)}
h4{font-size:1.02rem; margin:1.4em 0 .4em; color:var(--c);
   text-transform:uppercase; letter-spacing:.6px}
p,li{color:var(--text)}
a{color:var(--b)}
strong{color:#0d1726}
code{
  background:#eaeff8; color:#8a3d00; padding:2px 6px; border-radius:5px;
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.88em;
}
pre{
  background:var(--kod-bg); border:1px solid var(--line); border-left:4px solid var(--c);
  border-radius:10px; padding:15px 17px; overflow-x:auto; margin:.4em 0 1.2em;
  box-shadow:var(--stin);
}
pre code{background:none; color:#16202f; padding:0; font-size:.87rem; line-height:1.6}
.soubor{
  background:var(--panel2); border:1px solid var(--line); border-bottom:none;
  border-radius:9px 9px 0 0; padding:6px 14px; font-size:.76rem;
  font-family:"SF Mono",Menlo,monospace; color:var(--a); letter-spacing:.4px;
  margin-top:1.1em; display:inline-block; font-weight:600;
}
.soubor + pre{border-radius:0 10px 10px 10px; margin-top:0}
table{border-collapse:collapse; width:100%; margin:1em 0 1.5em; font-size:.94rem;
  background:var(--panel); box-shadow:var(--stin); border-radius:8px; overflow:hidden}
th,td{border:1px solid var(--line); padding:9px 13px; text-align:left; vertical-align:top}
th{background:var(--panel2); color:var(--a)}
tr:nth-child(even) td{background:#fafbfe}
blockquote{
  border-left:4px solid var(--e); background:#f6f2fd;
  margin:1.1em 0; padding:11px 18px; border-radius:0 10px 10px 0; color:#2b2340;
}
blockquote p{margin:.4em 0}
hr{border:none; border-top:1px solid var(--line); margin:2.4em 0}
footer{margin-top:60px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--dim); font-size:.85rem}
.meta{color:var(--dim); font-size:.92rem; margin-bottom:6px}

/* --- Zvýraznění syntaxe (Pygments) -------------------------------- */
.codehilite{background:none}
.codehilite .k,.codehilite .kn,.codehilite .kc{color:#a020a0; font-weight:600}
.codehilite .kd{color:#a020a0; font-weight:600}
.codehilite .s,.codehilite .s1,.codehilite .s2,.codehilite .sa,.codehilite .sd{color:#0a7d4b}
.codehilite .si,.codehilite .se{color:#0a6d9b}
.codehilite .c,.codehilite .c1,.codehilite .cm{color:#8a94a6; font-style:italic}
.codehilite .n{color:#16202f}
.codehilite .nf{color:#1a5fd0; font-weight:600}
.codehilite .nb{color:#0f7f63}
.codehilite .nc{color:#a85f00; font-weight:600}
.codehilite .mi,.codehilite .mf{color:#b5006b}
.codehilite .o,.codehilite .p{color:#4a5a72}

/* --- Přehledové karty na úvodní stránce ---------------------------- */
.karty{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin:26px 0}
.karta{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; text-decoration:none; display:block; transition:.15s;
  border-top:4px solid var(--b); box-shadow:var(--stin);
}
.karta:hover{transform:translateY(-3px); border-color:var(--a); box-shadow:0 6px 18px rgba(20,35,60,.13)}
.karta .cislo{font-size:.74rem; color:var(--dim); letter-spacing:1.5px; text-transform:uppercase}
.karta .nazev{font-size:1.14rem; color:#0d1726; font-weight:700; margin:6px 0 8px}
.karta .popis{font-size:.88rem; color:var(--dim); line-height:1.5}
.karta .stitek{display:inline-block; margin-top:12px; font-size:.72rem; padding:3px 10px;
  border-radius:20px; background:#e3effb; color:var(--b)}
.hotovo{border-top-color:var(--c)}
.hotovo .stitek{background:#e0f4ee; color:var(--c)}
nav.kroky{display:flex; justify-content:space-between; gap:14px; margin-top:50px;
  padding-top:22px; border-top:1px solid var(--line); font-size:.92rem}
nav.kroky a{background:var(--panel); border:1px solid var(--line); padding:11px 18px;
  border-radius:10px; text-decoration:none; color:var(--b); box-shadow:var(--stin)}
nav.kroky a:hover{border-color:var(--a)}
.obsah-box{
  background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--a);
  border-radius:12px; padding:14px 24px; margin:22px 0 30px; box-shadow:var(--stin);
}
.obsah-box strong{color:var(--a)}
.obsah-box ul{margin:.5em 0; padding-left:20px}

/* --- Blok (slajd) -------------------------------------------------- */
section.blok{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:8px 28px 24px; margin:26px 0; box-shadow:var(--stin); scroll-margin-top:100px;
}
section.blok > .blok-hlava{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:0 -28px 18px; padding:14px 28px; border-bottom:2px solid var(--line);
  background:linear-gradient(135deg,#fbfcfe,#eef3fb); border-radius:16px 16px 0 0;
}
section.blok > .blok-hlava .poradi{
  background:var(--a); color:#fff; font-size:.78rem; font-weight:700;
  padding:3px 11px; border-radius:20px; letter-spacing:.5px; white-space:nowrap;
}
section.blok > .blok-hlava .nazev{font-size:1.4rem; font-weight:700; color:#0d1726}
section.blok > .blok-hlava .sekce{font-size:.8rem; color:var(--dim); margin-left:auto}
section.blok > .blok-telo > :first-child{margin-top:0}
section.blok h3{margin-top:1.2em}

/* --- Dvousloupcový řádek ------------------------------------------ */
.radek{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:26px;
  align-items:start; margin:20px 0 26px; padding-bottom:20px;
  border-bottom:1px dashed var(--line);
}
.radek:last-child{border-bottom:none; padding-bottom:0}
.radek > .cast > :first-child{margin-top:0}
.radek > .cast > :last-child{margin-bottom:0}
.radek > .vlevo pre{margin-top:0}
.radek > .vpravo{
  background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:14px 18px;
}
.radek > .vpravo p:first-child{margin-top:0}
.radek.siroky{grid-template-columns:minmax(0,1fr)}

/* --- Poznámka ------------------------------------------------------ */
.poznamka{
  background:#fff8e8; border:1px solid #f0d9a8; border-left:5px solid #d99a00;
  border-radius:0 12px 12px 0; padding:12px 20px; margin:18px 0;
}
.poznamka > .hlava{font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:#95681a; margin-bottom:6px}
.poznamka > div > :first-child{margin-top:0}
.poznamka > div > :last-child{margin-bottom:0}

/* --- Rozbalovací část ---------------------------------------------- */
details.skryte{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  margin:18px 0; box-shadow:var(--stin); overflow:hidden;
}
details.skryte > summary{
  cursor:pointer; padding:12px 20px; font-weight:700; color:var(--b);
  background:var(--panel2); list-style:none; user-select:none;
}
details.skryte > summary::-webkit-details-marker{display:none}
details.skryte > summary::before{content:"▸ "; color:var(--a)}
details.skryte[open] > summary::before{content:"▾ "}
details.skryte > summary:hover{background:#e3eaf6}
details.skryte > .obsah{padding:6px 20px 18px}
details.skryte > .obsah > :first-child{margin-top:0}

/* --- Inline "Poradit" přímo na konci řádku textu ------------------- */
details.skryte.poradit-radek{
  display:inline-block; vertical-align:middle; margin:0 0 0 .4em;
  border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
}
details.skryte.poradit-radek > summary{
  display:inline-block; font-size:.82em; font-weight:600; color:#7a5a12;
  padding:.1em .55em; border-radius:999px;
  background:#fff7e0; border:1px solid #c99a2e;
  cursor:pointer; white-space:nowrap;
}
details.skryte.poradit-radek > summary::before,
details.skryte.poradit-radek[open] > summary::before{content:""}
details.skryte.poradit-radek > summary:hover{background:#ffedb0}
details.skryte.poradit-radek[open] > summary{background:#ffe49a}
details.skryte.poradit-radek > .obsah{
  display:block; margin:.4em 0 .6em; padding:.5em .8em;
  background:#fffbe6; border-left:3px solid #c99a2e; border-radius:4px;
  font-size:.92em; white-space:normal;
}

/* --- Dílna: editor vlevo, živý výsledek vpravo --------------------- */
.dilna{
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  margin:22px 0 28px; box-shadow:var(--stin); overflow:hidden;
}
.dilna-hlava{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px; background:var(--panel2); border-bottom:1px solid var(--line);
}
.dilna-nazev{font-family:"SF Mono",Menlo,monospace; font-size:.79rem;
  color:var(--a); font-weight:700; margin-right:auto}
.dilna button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--text);
  padding:6px 13px; border-radius:8px; transition:.13s;
}
.dilna button:hover{background:#eaf1fb; border-color:var(--b)}
.dilna button.hlavni{background:linear-gradient(135deg,#12a184,#0d7f68);
  color:#fff; border-color:transparent}
.dilna button.hlavni:hover{filter:brightness(1.08)}
.dilna button.hlavni.bezi{background:linear-gradient(135deg,#c0344d,#9c2438)}
.dilna button.poradit{background:#fff7e0; border-color:#c99a2e}
.dilna button.poradit:hover{background:#ffeec2; border-color:#a87d17}
.dilna script{display:none}
.dilna-telo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:0}
.dilna-vlevo{border-right:1px solid var(--line); background:var(--kod-bg); min-width:0}
.dilna-vlevo textarea{
  width:100%; border:0; outline:none; resize:none; display:block;
  background:transparent; color:#16202f; padding:14px 16px;
  font-family:"SF Mono",Menlo,Consolas,monospace; font-size:.82rem; line-height:1.62;
  tab-size:4; white-space:pre; overflow-x:auto; min-height:220px;
}
.dilna-vpravo{min-width:0; background:#fff}
.dilna-ramec{position:sticky; top:96px; height:min(76vh,760px); display:flex;
  flex-direction:column}
.dilna-ramec iframe{width:100%; height:100%; border:0; display:block; background:#fff}
.dilna-vyzva{
  padding:26px; color:var(--dim); font-size:.9rem; text-align:center;
  display:flex; flex-direction:column; justify-content:center; height:100%; gap:8px;
}
.dilna-vyzva b{color:var(--text); font-size:1rem}
.dilna-stav{font-size:.76rem; color:var(--dim); padding:5px 16px;
  border-top:1px solid var(--line); background:var(--panel2)}
.dilna.jenkod .dilna-telo{grid-template-columns:minmax(0,1fr)}
.dilna.jenkod .dilna-vlevo{border-right:none}

/* --- Živý řádek: editor vlevo, taby vpravo ------------------------- */
.radek-zive > .vpravo{background:transparent; border:1px solid var(--line); border-radius:12px; padding:0; overflow:hidden}
.radek-taby{display:flex; gap:0; border-bottom:2px solid var(--line); margin-bottom:0}
.radek-taby button{
  font:inherit; font-size:.84rem; font-weight:600; cursor:pointer;
  padding:9px 18px; border:1px solid var(--line); border-bottom:none;
  border-radius:10px 10px 0 0; background:var(--panel2); color:var(--dim);
  margin-bottom:-2px; position:relative;
}
.radek-taby button:hover{background:#eaf1fb}
.radek-taby button.active{background:var(--panel); color:var(--text); border-bottom:2px solid var(--panel)}
.radek-editor{
  width:100%; min-height:180px; resize:vertical; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--kod-bg);
  color:var(--text); font:.82rem/1.6 "SF Mono",Menlo,Consolas,monospace;
  tab-size:4; white-space:pre; display:block;
}
.radek-spustit{
  margin:10px 0 0; font:inherit; font-size:.82rem; font-weight:600;
  cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#12a184,#0d7f68); border:none;
  padding:8px 18px; border-radius:8px;
}
.radek-spustit:hover{filter:brightness(1.08)}
.radek-spustit.bezi{background:linear-gradient(135deg,#c0344d,#9c2438)}
.radek-panel{display:none; padding:14px 18px}
.radek-panel.active{display:block}
.radek-ramec{border:1px solid var(--line); border-top:3px solid var(--c);
  border-radius:0 0 12px 12px; overflow:hidden; height:500px; resize:vertical; background:#fff}
.radek-ramec iframe{width:100%; height:100%; border:0; display:block}

.zive-info{
  background:#e8f2fd; border:1px solid #b9d6f5; border-radius:10px;
  padding:12px 18px; margin:18px 0 26px; font-size:.9rem; color:#274866;
}
.zive-info strong{color:var(--b)}
.varovani-soubor{
  background:#fff5e0; border:1px solid #f0d9a8; border-radius:10px;
  padding:12px 18px; margin:18px 0; font-size:.9rem; color:#6b4c12;
}

/* --- Prezentační režim --------------------------------------------- */
.prez-prepinac{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#1a5fd0,#123f8f); border:none;
  padding:8px 16px; border-radius:9px;
}
.prez-prepinac:hover{filter:brightness(1.1)}
.prez-lista{display:none}
body.prez header.top{display:none}
body.prez .wrap{max-width:1860px; padding-top:14px; padding-bottom:96px}
body.prez .wrap > *{display:none !important}
body.prez .wrap > section.blok.aktivni{display:block !important}
/* Prezentační režim je určený studentům, ne učitelským poznámkám. */
body.prez section.blok.jen-ucitel{display:none !important}
body.prez section.blok.aktivni.jen-ucitel{display:none !important}
/* Inline „💡 Poradit“ u jednotlivých řádků zůstává i v prezentaci – studenti
   si během výkladu potřebují otevřít nápovědu ke konkrétnímu kroku. */
body.prez details.skryte:not(.poradit-radek),body.prez .poznamka.jen-ucitel{display:none !important}
body.prez section.blok{border:none; box-shadow:none; background:transparent;
  margin:0; padding:0 4px 20px}
body.prez section.blok > .blok-hlava{margin:0 0 18px; border-radius:12px;
  border:1px solid var(--line)}
body.prez section.blok > .blok-hlava .nazev{font-size:1.9rem}
body.prez{font-size:19px}
body.prez .dilna-ramec{top:14px}
body.prez .prez-lista{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
  align-items:center; gap:14px; padding:10px 22px;
  background:rgba(255,255,255,.97); border-top:2px solid var(--a);
  box-shadow:0 -2px 14px rgba(20,35,60,.12); backdrop-filter:blur(6px);
}
.prez-lista button{
  font:inherit; font-size:.9rem; font-weight:700; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:7px 15px; border-radius:9px;
}
.prez-lista button:hover{background:#e0e8f5; border-color:var(--b)}
.prez-lista .pocitadlo{font-weight:700; color:var(--a); font-variant-numeric:tabular-nums}
.prez-lista .nadpis{color:var(--dim); font-size:.9rem; margin-right:auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prez-lista select{font:inherit; font-size:.85rem; padding:6px 8px;
  border-radius:8px; border:1px solid var(--line); max-width:280px; background:#fff}

@media (max-width:1100px){
  .radek{grid-template-columns:minmax(0,1fr)}
  .dilna-telo{grid-template-columns:minmax(0,1fr)}
  .dilna-vlevo{border-right:none; border-bottom:1px solid var(--line)}
  .dilna-ramec{position:static; height:520px}
}
@media print{
  header.top,nav.kroky,.dilna-hlava,.radek-spustit,.radek-ramec,.prez-lista{display:none}
  body{background:#fff; font-size:11pt}
  section.blok{break-inside:avoid; box-shadow:none}
  details.skryte[open] > .obsah{display:block}
}