/* Zaměřovák — společný vzhled */
:root{
  --modra:#1b5cf0; --modra-tm:#1247c4; --modra-sv:#eef3ff;
  --inkoust:#0f1722; --text:#2b3542; --sedy:#6b7686; --slaby:#9aa4b2;
  --linka:#e3e8ef; --plocha:#ffffff; --pozadi:#f6f8fb; --pozadi2:#eef2f7;
  --zelena:#0f9d58; --zelena-sv:#e8f6ef; --oranz:#e8730a; --oranz-sv:#fdf1e3;
  --cervena:#d92d20; --cervena-sv:#fdecea;
  --r:12px; --r-s:9px; --r-l:18px;
  --stin:0 1px 2px rgba(16,24,40,.05), 0 6px 20px -6px rgba(16,24,40,.10);
  --stin-s:0 1px 2px rgba(16,24,40,.06);
  --pismo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hlava-pozadi:rgba(233,240,255,.9); --hlava-linka:#c9daff;
  --na-modre:#fff;
  /* text na barevných „měkkých" podkladech (.chyba, .stitek, …) */
  --na-cerv:#912018; --na-zel:#08603a; --na-mod:#12388f; --na-oran:#93400a;
  /* patička a tmavé bloky mají vlastní tokeny — jinak by se v tmavém režimu
     obrátily spolu s --inkoust a zbělaly */
  --pata-pozadi:#0f1722; --pata-text:#aab3c0; --pata-odkaz:#dbe2ec;
  --pata-nadpis:#ffffff; --pata-linka:#22304a; --pata-tlum:#7d8899;
  color-scheme:light;
}

/* --- tmavý režim -----------------------------------------------------------
   Barvy jsou jen tokeny, takže stačí je předefinovat a přebarví se celý web.
   Tři stavy: bez volby se řídíme systémem, s volbou rozhoduje data-tema.
   Modrá je v tmavém světlejší — původní #1b5cf0 na černé nedrží kontrast. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetlo"]){
    --modra:#5b93ff; --modra-tm:#7fadff; --modra-sv:#16233c;
    --inkoust:#eef2f8; --text:#c6d0dc; --sedy:#94a1b1; --slaby:#717f8f;
    --linka:#242c37; --plocha:#151b24; --pozadi:#0b0e13; --pozadi2:#111722;
    --zelena:#35c98a; --zelena-sv:#0f2a20; --oranz:#f2913b; --oranz-sv:#2a1c0e;
    --cervena:#f0655a; --cervena-sv:#2c1412;
    --stin:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -8px rgba(0,0,0,.6);
    --stin-s:0 1px 2px rgba(0,0,0,.45);
    --hlava-pozadi:rgba(14,20,34,.88); --hlava-linka:#233149;
    --na-modre:#08101f;
    --na-cerv:#f0655a; --na-zel:#35c98a; --na-mod:#9dc0ff; --na-oran:#f2913b;
    --pata-pozadi:#0d1117; --pata-text:#9aa6b4; --pata-odkaz:#d3dbe6;
    --pata-nadpis:#eef2f8; --pata-linka:#222b38; --pata-tlum:#78838f;
    color-scheme:dark;
  }
}
:root[data-tema="tma"]{
  --modra:#5b93ff; --modra-tm:#7fadff; --modra-sv:#16233c;
  --inkoust:#eef2f8; --text:#c6d0dc; --sedy:#94a1b1; --slaby:#717f8f;
  --linka:#242c37; --plocha:#151b24; --pozadi:#0b0e13; --pozadi2:#111722;
  --zelena:#35c98a; --zelena-sv:#0f2a20; --oranz:#f2913b; --oranz-sv:#2a1c0e;
  --cervena:#f0655a; --cervena-sv:#2c1412;
  --stin:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -8px rgba(0,0,0,.6);
  --stin-s:0 1px 2px rgba(0,0,0,.45);
    --hlava-pozadi:rgba(14,20,34,.88); --hlava-linka:#233149;
  --na-modre:#08101f;
  --na-cerv:#f0655a; --na-zel:#35c98a; --na-mod:#9dc0ff; --na-oran:#f2913b;
  --pata-pozadi:#0d1117; --pata-text:#9aa6b4; --pata-odkaz:#d3dbe6;
  --pata-nadpis:#eef2f8; --pata-linka:#222b38; --pata-tlum:#78838f;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--pismo);color:var(--text);background:var(--pozadi);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--modra);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--inkoust);line-height:1.22;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:750}
h3{font-size:1.18rem;font-weight:700}
p{margin:0 0 1em}
.obal{max-width:1140px;margin:0 auto;padding:0 20px}
.uzky{max-width:760px;margin:0 auto;padding:0 20px}

/* --- hlavička --- */
.hlava{position:sticky;top:0;z-index:50;background:var(--hlava-pozadi);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--hlava-linka)}
.hlava .obal{display:flex;align-items:center;gap:28px;height:64px}
.znacka{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;
  color:var(--inkoust);letter-spacing:-.03em}
.znacka:hover{text-decoration:none}
.znacka .logo{width:30px;height:30px;flex:0 0 30px}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{padding:8px 13px;border-radius:8px;color:var(--text);font-size:.94rem;font-weight:500}
.menu a:hover{background:rgba(27,92,240,.10);text-decoration:none}
.menu a.aktivni{color:var(--modra);background:var(--modra-sv)}
.hamburger{display:none;margin-left:auto;background:none;border:1px solid var(--linka);
  border-radius:8px;padding:8px 10px;cursor:pointer}

/* --- tlačítka --- */
.tl{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-s);border:1px solid transparent;
  font-weight:600;font-size:.95rem;cursor:pointer;font-family:inherit;
  transition:background .14s,border-color .14s,transform .06s;white-space:nowrap}
.tl:hover{text-decoration:none}
.tl:active{transform:translateY(1px)}
.tl-hlavni{background:var(--modra);color:var(--na-modre)}
.tl-hlavni:hover{background:var(--modra-tm);color:var(--na-modre)}
.tl-druhy{background:var(--plocha);color:var(--inkoust);border-color:var(--linka);box-shadow:var(--stin-s)}
.tl-druhy:hover{background:var(--pozadi2)}
.tl-tichy{background:transparent;color:var(--sedy)}
.tl-tichy:hover{background:var(--pozadi2);color:var(--inkoust)}
.tl-cerv{background:var(--cervena);color:#fff}
.tl-cerv:hover{background:#b42318;color:#fff}
.tl-maly{padding:7px 13px;font-size:.87rem}
.tl-velky{padding:14px 26px;font-size:1.03rem}
.tl:disabled{opacity:.5;cursor:not-allowed}

/* --- karty, mřížky --- */
.karta{background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r);
  padding:22px;box-shadow:var(--stin-s)}
.mrizka{display:grid;gap:20px}
.m2{grid-template-columns:repeat(2,1fr)}
.m3{grid-template-columns:repeat(3,1fr)}
.m4{grid-template-columns:repeat(4,1fr)}

/* --- formuláře --- */
label{display:block;font-weight:600;font-size:.88rem;color:var(--inkoust);margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--linka);border-radius:var(--r-s);
  font-family:inherit;font-size:.96rem;color:var(--inkoust);background:var(--plocha);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--modra);box-shadow:0 0 0 3px rgba(27,92,240,.14)}
.pole{margin-bottom:15px}
.napoveda{font-size:.83rem;color:var(--sedy);margin-top:5px}
.chyba{background:var(--cervena-sv);color:var(--na-cerv);border:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.uspech{background:var(--zelena-sv);color:var(--na-zel);border:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.info{background:var(--modra-sv);color:var(--na-mod);border:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}
.varovani{background:var(--oranz-sv);color:var(--na-oran);border:1px solid color-mix(in srgb,currentColor 32%,transparent);
  padding:11px 14px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:14px}

/* --- tabulky --- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-weight:650;color:var(--sedy);font-size:.79rem;
  text-transform:uppercase;letter-spacing:.045em;padding:10px 12px;border-bottom:1px solid var(--linka)}
td{padding:11px 12px;border-bottom:1px solid var(--linka);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tabulka-obal{overflow-x:auto;background:var(--plocha);border:1px solid var(--linka);border-radius:var(--r)}

/* --- štítky --- */
.stitek{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:.76rem;font-weight:650;background:var(--pozadi2);color:var(--sedy)}
.stitek.zel{background:var(--zelena-sv);color:var(--na-zel)}
.stitek.oran{background:var(--oranz-sv);color:var(--na-oran)}
.stitek.cerv{background:var(--cervena-sv);color:var(--na-cerv)}
.stitek.mod{background:var(--modra-sv);color:var(--na-mod)}

/* --- patička --- */
.pata{background:var(--pata-pozadi);color:var(--pata-text);border-top:1px solid var(--linka);margin-top:80px;padding:52px 0 30px;font-size:.92rem}
.pata a{color:var(--pata-odkaz)}
.pata h4{color:var(--pata-nadpis);font-size:.83rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.pata .obal{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.pata ul{list-style:none;padding:0;margin:0}
.pata li{margin-bottom:9px}
.pata-dole{border-top:1px solid var(--pata-linka);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--pata-tlum)}

@media (max-width:880px){
  .m3,.m4{grid-template-columns:repeat(2,1fr)}
  .pata .obal{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--plocha);
    flex-direction:column;padding:10px;border-bottom:1px solid var(--linka);gap:2px}
  .menu.otevreno{display:flex}
  .menu a{width:100%}
  .hamburger{display:block}
  .m2,.m3,.m4{grid-template-columns:1fr}
  .pata .obal{grid-template-columns:1fr}
}

.menu .odkaz-odhlasit{color:var(--sedy);font-size:.9rem}
.menu .odkaz-odhlasit:hover{color:var(--cervena)}


/* --- přepínač světlo / tma ------------------------------------------------- */
.motiv{margin-left:6px;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;border:1px solid var(--linka);
  cursor:pointer;flex:0 0 36px;padding:0;
  /* Tlačítko je vždycky obrácené proti stránce, ať je vidět:
     ve světlém režimu tmavé s bílým měsícem, v tmavém bílé s tmavým sluncem. */
  background:#111827;border-color:#111827;color:#ffffff}
:root[data-tema="tma"] .motiv{background:#ffffff;border-color:#ffffff;color:#111827}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetlo"]) .motiv{background:#ffffff;border-color:#ffffff;color:#111827}
}
.motiv:hover{background:var(--modra);border-color:var(--modra);color:#ffffff}
:root[data-tema="tma"] .motiv:hover{background:var(--modra);border-color:var(--modra);color:#08101f}
.motiv svg{stroke-width:2}
.motiv:focus-visible{outline:2px solid var(--modra);outline-offset:2px}
.motiv svg{width:18px;height:18px}
/* Ikona ukazuje, kam se přepne: ve světlém režimu měsíc, v tmavém slunce. */
.motiv .slunce{display:none}
.motiv .mesic{display:block}
:root[data-tema="tma"] .motiv .slunce{display:block}
:root[data-tema="tma"] .motiv .mesic{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="svetlo"]) .motiv .slunce{display:block}
  :root:not([data-tema="svetlo"]) .motiv .mesic{display:none}
}


/* --- hlavička podstránky ---------------------------------------------------
   Velký název stránky (Návod, Ukázky, …) je v modré z loga; v tmavém režimu
   se token --modra sám zesvětlí, takže drží kontrast na obou pozadích. */
.hlavicka-str h1{color:var(--modra)}
.hlavicka-str{background:var(--plocha)}

/* Tmavý blok s výzvou na konci stránky — vlastní tokeny, aby se v tmavém
   režimu neobrátil do bílé. */
.zaver{background:var(--pata-pozadi);color:var(--pata-text)}
.zaver h2{color:var(--pata-nadpis)}
.zaver p{color:var(--pata-text)}