/* ============================================================
   THEME.CSS — jednotný vzhled celého webu "Angličtina"
   ------------------------------------------------------------
   Plynulé "Apple" animace s křivkou cubic-bezier(.32,.72,0,1).
   Tento soubor obsahuje jen SPOLEČNÉ věci (barvy, header, hero,
   footer, tlačítka, základní animace) – každá stránka si pak
   může dopsat vlastní styl jen pro svůj obsah.

   SVĚTLÝ / TMAVÝ REŽIM
   - Barvy jsou v proměnných (--bg-*, --text-*, ...). Tmavý režim
     je výchozí, světlý se zapne atributem <html data-theme="light">.
   - Který režim platí, řeší assets/js/theme-init.js (podle denní
     doby, nebo podle ručního výběru) a přepínač v hlavičce
     vkládá assets/js/site.js.
   - Když píšeš nový styl, používej proměnné místo #fff / #222,
     pak bude automaticky fungovat v obou režimech.

   Použití v <head> každé stránky:
     <link rel="stylesheet" href="assets/css/theme.css">
     <script src="assets/js/theme-init.js"></script>
   ============================================================ */

:root{
  color-scheme:dark;
  --bg-dark:#121212;
  --bg-dark-2:#1a1a1a;
  --bg-card:#1f1f1f;
  --bg-card-2:#222;
  --bg-card-3:#2a2a2a;
  --text-dark:#fff;
  --text-dim:#aaa;
  --text-dim-2:#888;
  --border-soft:#2d2d2d;
  --header-bg:rgba(0,0,0,.55);
  --shadow:0 14px 28px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --glass:rgba(31,31,31,.72);
  --hl:rgba(255,193,7,.35);
  --accent:#4caf50;
  --ease:cubic-bezier(.32,.72,0,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --A1:#4caf50;--A2:#26a69a;--B1:#2196f3;--B2:#ff9800;--C1:#e91e63;
  --bad:#f44336;
  --good-soft:rgba(76,175,80,.16);
  --bad-soft:rgba(244,67,54,.16);
  --blue-soft:rgba(33,150,243,.16);
  --orange-soft:rgba(255,152,0,.16);
  --radius:1rem;
  --radius-lg:1.4rem;
}

/* ---------- SVĚTLÝ REŽIM ---------- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg-dark:#f3f4f7;
  --bg-dark-2:#e9ecf2;
  --bg-card:#ffffff;
  --bg-card-2:#f2f4f7;
  --bg-card-3:#e5e8ee;
  --text-dark:#16181d;
  --text-dim:#5a616c;
  --text-dim-2:#7f8691;
  --border-soft:#dde1e7;
  --header-bg:rgba(255,255,255,.72);
  --shadow:0 14px 28px rgba(30,40,60,.12);
  --shadow-lg:0 24px 60px rgba(30,40,60,.18);
  --glass:rgba(255,255,255,.8);
  --hl:rgba(255,193,7,.45);
  --accent:#2e7d32;
  --A1:#43a047;--A2:#00897b;--B1:#1e88e5;--B2:#f57c00;--C1:#d81b60;
  --bad:#e53935;
  --good-soft:rgba(67,160,71,.14);
  --bad-soft:rgba(229,57,53,.12);
  --blue-soft:rgba(30,136,229,.12);
  --orange-soft:rgba(245,124,0,.13);
}

*{box-sizing:border-box}

html,body{margin:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg-dark);
  color:var(--text-dark);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .5s var(--ease),color .5s var(--ease);
}
/* odchod ze stránky (jen prohlížeče bez přechodů mezi stránkami): mizí obsah, hlavička stojí */
body.leaving>*:not(header.site){opacity:0;transform:scale(.985);transition:opacity .22s var(--ease),transform .25s var(--ease)}

/* ---------- PLYNULÉ PŘECHODY MEZI STRÁNKAMI ----------
   Chrome / Edge / Safari 18.2+: hlavička zůstane při přechodu na místě
   (žádné probliknutí), zvýraznění Slovní zásoba | Gramatika | Hry
   dojede na nové místo a obsah se jen jemně prolne. Ostatní prohlížeče stránku
   prostě otevřou (nebo použijí animaci z assets/js/menu.js). */
@view-transition{navigation:auto}
header.site{view-transition-name:site-hdr}
:root.tm-switching header.site{view-transition-name:none!important}
::view-transition-group(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(root){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .32s cubic-bezier(.32,.72,0,1) both}
::view-transition-group(site-hdr){animation:none}
::view-transition-old(site-hdr){animation:none;opacity:0}
::view-transition-new(site-hdr){animation:none}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

a{color:inherit}

/* ---------- HEADER / NAV (shodné na celém webu, obsah viz assets/js/menu.js) ---------- */
header.site{
  /* stejné písmo na všech stránkách (jinak se hlavička mezi stránkami mírně mění) */
  font-family:"Plus Jakarta Sans",Arial,Helvetica,sans-serif;font-size:16px;line-height:1.3;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;
  padding:.85rem 2rem;background:var(--header-bg);color:var(--text-dark);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  position:sticky;top:0;z-index:1000;
  border-bottom:1px solid transparent;
}
:root[data-theme="light"] header.site{border-bottom-color:var(--border-soft)}
header.site nav{display:flex;align-items:center;gap:1.2rem;min-width:0}
header.site nav a{color:inherit;text-decoration:none;font-weight:bold;white-space:nowrap;transition:opacity .25s var(--ease),color .25s}
header.site nav a:hover{opacity:.65}
header.site a.active{color:var(--accent)}
header.site .nav-extra{display:none}
/* lupa vlevo (místo „Domů“) */
header.site a.nav-search{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--border-soft);
  background:var(--bg-card-2);color:var(--text-dark);transition:transform .3s var(--ease),border-color .25s,opacity .25s}
header.site a.nav-search:hover{opacity:1;border-color:var(--text-dim-2)}
header.site a.nav-search:active{transform:scale(.92)}
header.site a.nav-search .t{display:none}
/* Plán učení hned vedle lupy (assets/js/menu.js → PLAN) */
header.site a.nav-plan{display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 .95rem 0 .8rem;margin-left:-.55rem;border-radius:2rem;
  border:1px solid var(--border-soft);background:var(--bg-card-2);color:var(--text-dark);font-size:.9rem;font-weight:800;transition:transform .3s var(--ease),border-color .25s,opacity .25s}
header.site a.nav-plan:hover{opacity:1;border-color:var(--text-dim-2)}
header.site a.nav-plan:active{transform:scale(.94)}
header.site a.nav-plan.active{color:var(--text-dark);border-color:var(--A1);background:var(--good-soft)}
header.site a.nav-plan .ic{font-size:1rem;line-height:1}
header.site a.nav-plan .tl{display:none}
header.site .hdr-right{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
/* přepínač jazyka vedle lupy (assets/js/menu.js → JAZYKY) */
header.site .nav-lang{position:relative;display:inline-flex}
header.site .nav-lang[hidden]{display:none}
header.site .flag{width:1.35rem;height:.9rem;border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
header.site .lang-btn{display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 .7rem 0 .65rem;border-radius:2rem;border:1px solid var(--border-soft);
  background:var(--bg-card-2);color:var(--text-dark);font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;transition:transform .3s var(--ease),border-color .25s}
header.site .lang-btn:hover{border-color:var(--text-dim-2)}
header.site .lang-btn:active{transform:scale(.94)}
header.site .lang-btn i{font-style:normal;font-size:.7rem;color:var(--text-dim);transition:transform .3s var(--ease)}
header.site .nav-lang.open .lang-btn i{transform:rotate(180deg)}
header.site .lang-menu{position:absolute;left:0;top:calc(100% + .45rem);min-width:12rem;display:flex;flex-direction:column;gap:.1rem;padding:.35rem;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:1rem;box-shadow:var(--shadow-lg);z-index:5;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .2s var(--ease),transform .3s var(--ease)}
header.site .nav-lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
header.site .lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:.7rem;font-weight:700;font-size:.95rem;color:var(--text-dark)}
header.site .lang-menu a[hidden]{display:none}
header.site .lang-menu a:hover{opacity:1;background:var(--bg-card-2)}
header.site .lang-menu a.on{background:var(--bg-card-2)}
header.site .lang-menu a.on::after{content:"✓";margin-left:auto;color:var(--A1);font-weight:800}
header.site .lang-menu a span{flex:1}
header.site .lang-menu small{font-size:.75rem;opacity:.7}
header.site .lang-menu a span.fl-ico{flex:0 0 1.35rem}
header.site .flag.fl-ico{display:inline-flex;align-items:center;justify-content:center;box-shadow:none;font-size:1rem;line-height:1}
header.site .lang-sep{margin:.3rem .5rem .1rem;padding-top:.45rem;border-top:1px solid var(--border-soft);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
header.site .lang-sep[hidden]{display:none}
@media(max-width:1180px){
  /* v mobilním menu ☰: oba jazyky rovnou vedle sebe (pointer-events:inherit – když je menu zavřené, nesmí neviditelné odkazy chytat klepnutí, např. na „Změnit hru“) */
  header.site .nav-lang{display:block}
  header.site .lang-btn{display:none}
  header.site .lang-menu{position:static;opacity:1;transform:none;pointer-events:inherit;flex-direction:row;gap:.3rem;min-width:0;
    background:none;border:0;box-shadow:none;padding:.15rem 0;border-radius:0}
  header.site .lang-menu{flex-wrap:wrap}
  header.site .lang-menu a{flex:1 1 30%;justify-content:center}
  header.site .lang-sep{flex:1 1 100%;margin:.25rem 0 0}
  header.site .lang-menu a span{flex:0 1 auto}
  header.site .lang-menu a span.fl-ico{flex:0 0 1.35rem}
  header.site .lang-menu a.on::after{display:none}
  header.site .lang-menu a.on{outline:2px solid var(--A1);outline-offset:-2px}
}
/* stránky jen pro správce (de-…): obsah schovaný, dokud se neověří přihlášení */
html.jazyk-zamek body>*:not(header.site){visibility:hidden}

header.site .zdroje-link{font-size:1rem;text-decoration:none;color:var(--text-dim-2);transition:opacity .25s var(--ease)}
header.site .zdroje-link:hover{opacity:.65}

/* přepínač uprostřed: Slovní zásoba | Gramatika – šedé pole, zvýraznění přejíždí */
header.site .nav-seg{justify-self:center;position:relative;display:inline-flex;align-items:center;padding:.25rem;border-radius:2rem;
  background:var(--bg-card-2);border:1px solid var(--border-soft)}
header.site .seg-knob{position:absolute;z-index:0;top:.25rem;bottom:.25rem;left:0;width:0;border-radius:2rem;opacity:0;
  background:var(--seg-knob,#3a3a3a);box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s}
:root[data-theme="light"] header.site .seg-knob{--seg-knob:#fff;box-shadow:0 2px 10px rgba(30,40,60,.14)}
header.site .seg-it{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1rem;border-radius:2rem;
  text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap;color:var(--text-dim);transition:color .3s}
header.site .seg-it:hover{color:var(--text-dark)}
header.site .seg-it.on{color:var(--text-dark)}
header.site .seg-it .ic{font-size:1rem;line-height:1;filter:grayscale(.6);opacity:.8;transition:filter .3s,opacity .3s}
header.site .seg-it.on .ic,header.site .seg-it:hover .ic{filter:none;opacity:1}
header.site .seg-it .short{display:none}
header.site a.seg-it.active{color:var(--text-dark)}
/* při přechodu Slovní zásoba ↔ Gramatika zmizí jen obsah, hlavička zůstane */
body.leaving-seg>*:not(header.site){opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .35s var(--ease)}

/* tlačítko ☰ (jen na mobilu) */
header.site .nav-burger{display:none;width:2.5rem;height:2.5rem;border:1px solid var(--border-soft);border-radius:.8rem;background:var(--bg-card-2);
  cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-dark)}
header.site .nav-burger span{display:block;width:1.1rem;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),opacity .25s}
header.site.menu-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.site.menu-open .nav-burger span:nth-child(2){opacity:0}
header.site.menu-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1180px){
  header.site{grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;padding:.6rem .8rem}
  header.site .nav-burger{display:flex}
  header.site .seg-it{padding:.42rem .75rem;font-size:.85rem}
  header.site .seg-it .full{display:none}
  header.site .seg-it .short{display:inline}
  header.site .zdroje-link{display:none}
  /* menu se rozbalí pod hlavičkou */
  header.site nav.nav-main{position:absolute;left:.8rem;right:.8rem;top:calc(100% + .4rem);flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--bg-card);border:1px solid var(--border-soft);border-radius:1.1rem;padding:.45rem;box-shadow:var(--shadow-lg);
    opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease)}
  header.site.menu-open nav.nav-main{opacity:1;transform:none;pointer-events:auto}
  header.site nav.nav-main a{padding:.75rem .9rem;border-radius:.75rem;font-size:1rem}
  header.site nav.nav-main a:hover{opacity:1;background:var(--bg-card-2)}
  header.site nav.nav-main a.nav-search{display:flex;width:auto;height:auto;border:0;border-radius:.75rem;background:none;gap:.6rem;justify-content:flex-start}
  header.site nav.nav-main a.nav-search .t{display:inline}
  header.site nav.nav-main a.nav-plan{display:flex;height:auto;margin:0;border:0;background:none;gap:.6rem;justify-content:flex-start;font-size:1rem}
  header.site nav.nav-main a.nav-plan.active{background:var(--good-soft);color:var(--accent)}
  header.site nav.nav-main a.nav-plan .t{display:none}
  header.site nav.nav-main a.nav-plan .tl{display:inline}
  header.site .nav-extra{display:flex;flex-direction:column;border-top:1px solid var(--border-soft);margin-top:.3rem;padding-top:.3rem}
  header.site .nav-extra a{color:var(--text-dim);font-weight:600}
}
/* účet vpravo v hlavičce */
header.site .acct-link{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--text-dark);font-weight:700;font-size:.9rem;
  border:1px solid var(--border-soft);background:var(--bg-card-2);border-radius:2rem;padding:.2rem .75rem .2rem .2rem;white-space:nowrap;
  transition:transform .3s var(--ease),border-color .25s}
header.site .acct-link:hover{border-color:var(--text-dim-2)}
header.site .acct-link:active{transform:scale(.94)}
header.site .acct-link .av{width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font-size:.95rem;background:var(--bg-card-3);font-weight:800;color:#fff}
header.site .acct-link.in .av{background:linear-gradient(135deg,var(--A1),var(--B1))}
header.site .nav-mob,header.site .nav-tm{display:none}
@media(max-width:1180px){
  header.site .acct-link{padding:0;border:0;background:none}
  header.site .acct-link .nm{display:none}
  header.site .acct-link .av{width:2.4rem;height:2.4rem;font-size:1.05rem;border:1px solid var(--border-soft)}
  header.site .nav-mob{display:flex;flex-direction:column;border-top:1px solid var(--border-soft);margin-top:.3rem;padding-top:.3rem}
  header.site .nav-tm{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border-top:1px solid var(--border-soft);margin-top:.3rem;padding:.6rem .5rem .3rem .9rem;font-weight:700;color:var(--text-dim)}
  header.site .nav-tm .tm-tip{right:0;top:auto;bottom:calc(100% + .7rem);transform-origin:bottom right}
  header.site .nav-tm .tm-tip::before{display:none}
}
/* tablet / telefon na šířku: menu ☰, ale v přepínači celé názvy */
@media(min-width:601px) and (max-width:1180px){
  header.site .seg-it .full{display:inline}
  header.site .seg-it .short{display:none}
}
@media(max-width:400px){
  header.site .seg-it{padding:.42rem .55rem;gap:.3rem;font-size:.8rem}
  .tm{grid-template-columns:repeat(3,2rem);height:2.15rem}
  .tm-knob{width:2rem}
}
@media(max-width:350px){header.site .seg-it .ic{display:none}}
/* Úzký telefon nebo zvětšené písmo v telefonu (Safari „Velikost textu“, iOS Dynamic Type):
   přepínač Slovíčka | Gramatika | Hry se nesmí překrývat s ☰ a účtem.
   Měří se šířka hlavičky v rem → při větším písmu se zjednoduší dřív. */
@media(max-width:1180px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  header.site{container-type:inline-size;container-name:hdr}
  header.site .nav-seg{min-width:0;max-width:100%;overflow:hidden}
  header.site .seg-it{min-width:0;flex:0 1 auto}
}
@container hdr (max-width:28rem){
  header.site .seg-it .ic{display:none}
  header.site .seg-it{padding:.42rem .62rem}
}
@container hdr (max-width:23rem){
  header.site .seg-it{padding:.38rem .45rem;font-size:.76rem}
  header.site .nav-burger{width:2.2rem;height:2.2rem}
  header.site .acct-link .av{width:2.15rem;height:2.15rem}
}

/* jednodušší header pro vedlejší stránky */
header.site.simple{justify-content:flex-start;background:var(--bg-dark-2)}
header.site.simple a{text-decoration:none;color:var(--accent);font-weight:bold}

/* ---------- PŘEPÍNAČ REŽIMU 🌙 | AUTO | ☀️ (vkládá site.js) ---------- */
.tm{position:relative;display:grid;grid-template-columns:repeat(3,2.3rem);height:2.3rem;padding:.2rem;border-radius:2rem;
  background:var(--bg-card-2);border:1px solid var(--border-soft);font-family:Arial,Helvetica,sans-serif;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;flex:0 0 auto}
.tm button{position:relative;z-index:1;border:0;background:none;padding:0;margin:0;cursor:pointer;display:grid;place-items:center;
  border-radius:2rem;color:var(--text-dim);font-size:1rem;line-height:1;transition:color .3s,transform .25s var(--ease),opacity .3s}
.tm button:active{transform:scale(.88)}
.tm button>span{display:block;transition:transform .45s var(--spring)}
.tm button:not([aria-checked="true"]){opacity:.55}
.tm button:not([aria-checked="true"]):hover{opacity:1}
.tm button[aria-checked="true"]>span{transform:scale(1.12)}
.tm .tm-a{font-size:.6rem;font-weight:800;letter-spacing:.03em}
.tm button[data-m="auto"][aria-checked="true"]{color:#fff}
.tm-knob{position:absolute;z-index:0;top:.2rem;left:.2rem;width:2.3rem;height:calc(100% - .4rem);border-radius:2rem;
  background:linear-gradient(135deg,#7e57c2,#2196f3);box-shadow:0 4px 12px rgba(33,150,243,.35);
  transition:transform .5s var(--spring),background .5s var(--ease),box-shadow .5s var(--ease)}
.tm[data-pos="dark"] .tm-knob{transform:translateX(0);background:linear-gradient(135deg,#3949ab,#1a237e);box-shadow:0 0 14px rgba(92,107,192,.55)}
.tm[data-pos="auto"] .tm-knob{transform:translateX(100%)}
.tm[data-pos="light"] .tm-knob{transform:translateX(200%);background:linear-gradient(135deg,#ffd54f,#ff9800);box-shadow:0 0 14px rgba(255,170,0,.5)}
.tm:focus-within{outline:2px solid var(--B1);outline-offset:2px}
.tm button:focus{outline:none}

/* bublina s vysvětlením AUTO */
.tm-tip{position:absolute;right:-.2rem;top:calc(100% + .7rem);width:16.5rem;z-index:1200;text-align:left;
  background:var(--bg-card);color:var(--text-dark);border:1px solid var(--border-soft);border-radius:1rem;padding:.8rem .9rem;
  box-shadow:var(--shadow-lg);font:500 .84rem/1.45 "Plus Jakarta Sans",Arial,Helvetica,sans-serif;
  opacity:0;transform:translateY(-6px) scale(.96);transform-origin:top right;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--spring)}
.tm-tip.show{opacity:1;transform:none;pointer-events:auto}
.tm-tip::before{content:"";position:absolute;top:-6px;right:2.7rem;width:11px;height:11px;background:inherit;border-left:1px solid var(--border-soft);border-top:1px solid var(--border-soft);transform:rotate(45deg)}
.tm-tip b{display:block;font-size:.9rem;margin-bottom:.25rem}
.tm-tip .tm-row{display:flex;flex-direction:column;gap:.1rem;margin:.5rem 0 .35rem;padding:.45rem .6rem;border-radius:.7rem;background:var(--bg-card-2);font-weight:600;font-size:.8rem}
.tm-tip small{display:block;color:var(--text-dim);font-size:.76rem}

/* plynulý přechod mezi režimy (View Transitions – kruhové odhalení) */
:root.tm-switching::view-transition-old(root),:root.tm-switching::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)!important;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.2rem;
  padding:3rem 1rem 2.5rem;text-align:center;background:var(--bg-dark-2);
}
.hero::before,.hero::after{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  filter:blur(90px);opacity:.28;pointer-events:none;
  animation:themeFloat 18s ease-in-out infinite alternate;
}
:root[data-theme="light"] .hero::before,:root[data-theme="light"] .hero::after{opacity:.22}
.hero::before{background:#2196f3;left:8%;top:-120px}
.hero::after{background:#ff9800;right:8%;bottom:-160px;animation-delay:-9s}
.hero>*{position:relative;z-index:1}
.hero h1{
  margin:0;font-size:4.2rem;line-height:1.1;
  background:linear-gradient(270deg,#4caf50,#2196f3,#ff9800);
  background-size:600% 600%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:themeGradientShift 30s ease infinite,themeHeroIn 1.1s var(--ease) both;
}
.hero p.subtitle{color:var(--text-dim);margin:0;max-width:640px;animation:themeHeroIn 1.1s .1s var(--ease) both}
@media(min-width:720px){.hero h1{font-size:5.5rem}}

@keyframes themeFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.2)}}
@keyframes themeHeroIn{from{opacity:0;transform:translateY(28px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes themeGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes themeRise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes themePop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes themeShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes themePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ---------- TLAČÍTKA / PILLS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:0;border-radius:2rem;padding:.75rem 1.4rem;font-size:1rem;font-weight:bold;
  font-family:inherit;color:var(--text-dark);background:var(--bg-card-2);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s var(--ease);
  outline:0 solid transparent;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn.primary{background:linear-gradient(120deg,var(--A1),var(--A2));color:#fff}
.btn.accent-blue{background:linear-gradient(120deg,var(--B1),#1976d2);color:#fff}
.btn.ghost{background:transparent;border:2px solid var(--border-soft)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem 1rem;border-radius:2rem;font-size:.85rem;font-weight:bold;background:var(--bg-card-2);color:var(--text-dim)}

/* ---------- OBECNÉ KARTY / PANELY ---------- */
.panel{background:var(--bg-card);border-radius:var(--radius-lg);padding:1.4rem;border:1px solid var(--border-soft)}
:root[data-theme="light"] .panel{box-shadow:0 1px 2px rgba(30,40,60,.04),0 8px 24px rgba(30,40,60,.05)}
.section-light{background:#fff;color:#111}

/* ---------- FOOTER ---------- */
footer.site{background:var(--bg-dark);color:var(--text-dark);text-align:center;padding:1.4rem 1rem;font-size:.9rem;border-top:1px solid var(--border-soft)}
footer.site a{color:var(--text-dim);text-decoration:underline}
footer.site .nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
footer.site .txt{margin-top:.6rem}
footer.site .nav a{color:var(--text-dim);text-decoration:none;font-weight:bold;transition:color .25s var(--ease)}
footer.site .nav a:hover{color:var(--text-dark)}

/* ---------- OBECNÉ UTILITY ---------- */
.rise-in{animation:themeRise .7s var(--ease) both}
.scrollbar-thin::-webkit-scrollbar{width:6px;height:6px}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:4px}

/* ============================================================
   SVĚTLÝ REŽIM NA STRÁNKÁCH S TAILWINDEM
   (abeceda, nepravidelná slovesa, přítomný čas)
   Tyto stránky mají "tmavé přebarvení" barevných Tailwind tříd
   na světlé odstíny. Ve světlém režimu je vrátíme na tmavší,
   dobře čitelné odstíny. Selektor s :root[data-theme] má vyšší
   prioritu, takže vyhraje i nad jejich !important pravidly.
   ============================================================ */
:root[data-theme="light"] .text-indigo-500,:root[data-theme="light"] .text-indigo-600{color:#4f46e5!important}
:root[data-theme="light"] .text-indigo-400{color:#00897b!important}
:root[data-theme="light"] .text-indigo-700,:root[data-theme="light"] .text-indigo-800,:root[data-theme="light"] .text-indigo-900,:root[data-theme="light"] .text-indigo-950{color:#3730a3!important}
:root[data-theme="light"] .text-purple-500,:root[data-theme="light"] .text-purple-600{color:#9333ea!important}
:root[data-theme="light"] .text-purple-700,:root[data-theme="light"] .text-purple-800,:root[data-theme="light"] .text-purple-900{color:#6b21a8!important}
:root[data-theme="light"] .text-amber-400,:root[data-theme="light"] .text-amber-500,:root[data-theme="light"] .text-amber-600{color:#d97706!important}
:root[data-theme="light"] .text-amber-700,:root[data-theme="light"] .text-amber-800,:root[data-theme="light"] .text-amber-900{color:#92400e!important}
:root[data-theme="light"] .text-emerald-400,:root[data-theme="light"] .text-emerald-500,:root[data-theme="light"] .text-emerald-600,:root[data-theme="light"] .text-emerald-700{color:#047857!important}
:root[data-theme="light"] .text-rose-500,:root[data-theme="light"] .text-rose-600,:root[data-theme="light"] .text-rose-700{color:#e11d48!important}
:root[data-theme="light"] .text-teal-500,:root[data-theme="light"] .text-teal-600{color:#0d9488!important}
:root[data-theme="light"] .text-teal-700,:root[data-theme="light"] .text-teal-800{color:#115e59!important}
:root[data-theme="light"] .text-sky-400,:root[data-theme="light"] .text-sky-500,:root[data-theme="light"] .text-sky-600{color:#0284c7!important}
:root[data-theme="light"] .text-sky-700,:root[data-theme="light"] .text-sky-800{color:#075985!important}
:root[data-theme="light"] .text-pink-500,:root[data-theme="light"] .text-pink-600{color:#db2777!important}
:root[data-theme="light"] .text-blue-600{color:#2563eb!important}
:root[data-theme="light"] .text-orange-500,:root[data-theme="light"] .text-orange-600{color:#ea580c!important}
:root[data-theme="light"] .text-orange-950{color:#7c2d12!important}
:root[data-theme="light"] .text-red-600{color:#dc2626!important}
:root[data-theme="light"] .text-yellow-600{color:#ca8a04!important}
:root[data-theme="light"] .text-lime-600,:root[data-theme="light"] .text-lime-700{color:#4d7c0f!important}
:root[data-theme="light"] .text-fuchsia-600,:root[data-theme="light"] .text-fuchsia-700,:root[data-theme="light"] .text-fuchsia-800{color:#a21caf!important}
:root[data-theme="light"] .text-violet-600,:root[data-theme="light"] .text-violet-800{color:#6d28d9!important}
:root[data-theme="light"] .text-cyan-600,:root[data-theme="light"] .text-cyan-700,:root[data-theme="light"] .text-cyan-950{color:#0e7490!important}
:root[data-theme="light"] .hover\:text-amber-600:hover{color:#d97706!important}
:root[data-theme="light"] .hover\:text-indigo-600:hover{color:#4f46e5!important}
:root[data-theme="light"] .hover\:bg-slate-300:hover,:root[data-theme="light"] .hover\:bg-slate-800:hover{background-color:var(--bg-card-3)!important}
:root[data-theme="light"] .bg-slate-900{background:#1f2430!important;color:#fff}
:root[data-theme="light"] .bg-slate-900 .text-slate-400{color:#aab!important}
:root[data-theme="light"] .bg-slate-800,:root[data-theme="light"] .bg-slate-800\/80{background:#2c3240!important}
:root[data-theme="light"] .shadow-sm,:root[data-theme="light"] .shadow-md,:root[data-theme="light"] .shadow-xl{box-shadow:0 8px 24px rgba(30,40,60,.1)!important}

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

/* dotyk: bez 300ms čekání na dvojklik a bez šedého záblesku */
button,a,label,summary,select,input[type=checkbox],[role=button]{touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}

/* neověřený e-mail → oranžová tečka u ikonky účtu v hlavičce (assets/js/ucet.js) */
header.site .acct-link.nv .av{position:relative}
header.site .acct-link.nv .av::after{content:"";position:absolute;top:-.1rem;right:-.1rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--B2);box-shadow:0 0 0 2px var(--bg-dark)}

/* jen pro správce (třídu je-spravce na <html> nastavuje assets/js/menu.js) – např. počet vět u témat gramatiky */
.jen-spravce{display:none}
html.je-spravce .jen-spravce{display:inline}

/* =====================================================================
   HLAVNÍ PANEL – čistší verze (10. 11. 2026)
   počítač (nad 1180 px): lupa, plán a statistiky jen jako ikonky, menší přepínač vzhledu, bez názvu tématu
   mobil a tablet (do 1180 px): vlevo výběr předmětu · uprostřed pilulka vyhledávání · vpravo plán, statistiky, účet;
   sekce jsou v liště dole (menu.js → nav.tabbar). Žádné ☰ – menu účtu vyjede zdola po klepnutí na účet.
   ===================================================================== */
header.site .m-subj,header.site .m-search,header.site .m-ic,header.site .m-sheet,header.site .m-back{display:none}
.tabbar{display:none}
@media(min-width:1181px){
  header.site{padding:.7rem 1.6rem}
  header.site nav{gap:.55rem}
  header.site a.nav-plan{width:2.4rem;padding:0;margin-left:0;justify-content:center;border-radius:50%}
  header.site a.nav-plan .t{display:none}
  header.site .hdr-title-d{display:none!important}
  header.site .lang-btn{height:2.4rem}
  header.site .hdr-right{gap:.6rem}
  header.site .tm{grid-template-columns:repeat(3,1.95rem);height:2.1rem;padding:.15rem}
  header.site .tm .tm-knob{width:1.95rem;top:.15rem;left:.15rem;height:calc(100% - .3rem)}
  header.site .tm .tm-a{font-size:.52rem}
  header.site .seg-it{padding:.42rem .9rem;font-size:.9rem}
  header.site .seg-it .ic{filter:none;opacity:.75}
}
@keyframes mSheetIn{from{transform:translateY(100%)}}
@media(max-width:1180px){
  /* hlavička bez rozmazání (jinak by „fixed“ panely uvnitř nefungovaly) – skoro neprůhledné pozadí */
  header.site{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr)!important;gap:.5rem;padding:.55rem .7rem;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg-dark)!important}
  header.site .nav-burger,header.site .nav-seg{display:none!important}
  header.site .hdr-title-m{grid-column:1/-1;font-size:.8rem;color:var(--text-dim);padding-bottom:.05rem}
  /* vlevo: předmět */
  header.site .m-subj{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;min-width:0;max-width:100%;height:2.4rem;padding:0 .7rem 0 .6rem;
    border-radius:2rem;border:1px solid var(--border-soft);background:transparent;color:var(--text-dark);font:inherit;font-weight:800;font-size:.9rem;cursor:pointer;
    transition:transform .3s var(--spring),border-color .25s,background .25s;-webkit-tap-highlight-color:transparent}
  header.site .m-subj span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  header.site .m-subj i{font-style:normal;font-size:.65rem;color:var(--text-dim);transition:transform .35s var(--ease)}
  header.site .m-subj:active{transform:scale(.95)}
  header.site.sheet-subj .m-subj{background:var(--bg-card-2)}
  header.site.sheet-subj .m-subj i{transform:rotate(180deg)}
  header.site .m-subj .flag{width:1.25rem;height:.84rem}
  /* uprostřed: pilulka vyhledávání */
  header.site .m-search{display:inline-flex;align-items:center;gap:.45rem;justify-self:center;height:2.4rem;padding:0 1.1rem;min-width:0;
    border-radius:2rem;background:var(--bg-card-2);border:1px solid var(--border-soft);color:var(--text-dim);text-decoration:none;font-weight:600;font-size:.9rem;
    transition:transform .3s var(--spring),border-color .25s,color .25s}
  header.site .m-search:hover,header.site .m-search:active{color:var(--text-dark);border-color:var(--text-dim-2)}
  header.site .m-search:active{transform:scale(.96)}
  header.site .m-search span{white-space:nowrap}
  /* vpravo: kolečka */
  header.site .hdr-right{gap:.35rem;justify-self:end}
  header.site .m-ic{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--border-soft);color:var(--text-dark);
    text-decoration:none;font-size:1rem;transition:transform .3s var(--spring),border-color .25s,background .25s}
  header.site .m-ic:active,header.site .acct-link:active{transform:scale(.9)}
  header.site .m-ic.active{background:var(--bg-card-2);border-color:var(--text-dim-2)}
  header.site.menu-open .acct-link .av{background:var(--bg-card-2);border-color:var(--text-dim-2)}
  /* panely zdola (výběr předmětu, menu účtu) */
  header.site .m-back{display:block;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
  header.site.sheet-subj .m-back,header.site.menu-open .m-back{opacity:1;pointer-events:auto}
  header.site .m-sheet,header.site nav.nav-main{display:flex!important;flex-direction:column;position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;z-index:1002;
    max-height:82vh;overflow:auto;background:var(--bg-card)!important;border:1px solid var(--border-soft);border-bottom:0;border-radius:1.4rem 1.4rem 0 0!important;
    padding:.6rem .9rem calc(1rem + env(safe-area-inset-bottom))!important;box-shadow:0 -12px 40px rgba(0,0,0,.35);gap:.1rem!important;
    transform:translateY(105%)!important;opacity:1!important;pointer-events:none;transition:transform .45s cubic-bezier(.32,.72,0,1)!important}
  header.site.sheet-subj .m-subj-sheet,header.site.menu-open nav.nav-main{transform:none!important;pointer-events:auto}
  .ms-grab{display:block;width:2.6rem;height:.28rem;border-radius:1rem;background:var(--border-soft);margin:.1rem auto .6rem;flex:0 0 auto}
  header.site nav.nav-main::before{content:"";display:block;width:2.6rem;height:.28rem;border-radius:1rem;background:var(--border-soft);margin:.1rem auto .6rem;flex:0 0 auto}
  header.site .ms-h{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:.5rem .3rem .45rem}
  header.site .ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));gap:.45rem}
  header.site .ms-t{display:flex;align-items:center;gap:.55rem;padding:.75rem .8rem;border-radius:1rem;border:1px solid var(--border-soft);text-decoration:none;
    color:var(--text-dark);font-weight:700;font-size:.92rem;transition:transform .3s var(--spring),background .25s,border-color .25s}
  header.site .ms-t[hidden]{display:none}
  header.site .ms-t:active{transform:scale(.96)}
  header.site .ms-t.on{background:var(--bg-card-2);border-color:var(--text-dim-2)}
  header.site .ms-t span:not(.ms-i){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header.site .ms-t small{opacity:.55;font-size:.75rem}
  header.site .ms-i{display:grid;place-items:center;width:1.5rem;flex:0 0 auto}
  header.site.sheet-subj .ms-t{animation:mTileIn .45s cubic-bezier(.32,.72,0,1) both}
  header.site.sheet-subj .ms-t:nth-child(2){animation-delay:.03s}header.site.sheet-subj .ms-t:nth-child(3){animation-delay:.06s}header.site.sheet-subj .ms-t:nth-child(4){animation-delay:.09s}
  header.site.sheet-subj .ms-t:nth-child(5){animation-delay:.12s}header.site.sheet-subj .ms-t:nth-child(n+6){animation-delay:.15s}
  /* menu účtu: jen to, co nahoře chybí (plán lekcí, třídy, účet, vzhled) */
  header.site nav.nav-main > a.nav-search,header.site nav.nav-main > a.nav-plan,header.site nav.nav-main .nav-lang{display:none!important}
  header.site .nav-mob{border-top:0!important;margin-top:0!important;padding-top:0!important}
  header.site nav.nav-main a{padding:.85rem .9rem;border-radius:.9rem;font-size:1rem}
  header.site nav.nav-main a:active{background:var(--bg-card-2)}
  html.m-sheet-open{overflow:hidden}
  html.m-sheet-open .tabbar{transform:translateY(110%)}
  /* spodní lišta */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:990;justify-content:space-around;gap:.15rem;
    padding:.4rem .45rem calc(.4rem + env(safe-area-inset-bottom));background:var(--bg-dark);
    border-top:1px solid var(--border-soft);overflow-x:auto;scrollbar-width:none;transition:transform .4s cubic-bezier(.32,.72,0,1);view-transition-name:site-tab}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar .tb-knob{position:absolute;z-index:0;top:.4rem;bottom:calc(.4rem + env(safe-area-inset-bottom));left:0;width:0;border-radius:1rem;opacity:0;
    background:var(--bg-card-2);border:1px solid var(--border-soft);transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s}
  .tabbar .tb-it{position:relative;z-index:1;flex:1 1 0;min-width:3.6rem;max-width:7rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.42rem .2rem .34rem;
    border-radius:1rem;text-decoration:none;color:var(--text-dim);font-weight:700;font-size:.68rem;line-height:1.1;-webkit-tap-highlight-color:transparent;transition:color .5s .1s,transform .3s var(--spring)}
  .tabbar .tb-it .ic{font-size:1.25rem;line-height:1;display:grid;place-items:center;height:1.4rem;transition:transform .45s var(--spring)}
  .tabbar .tb-it .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar .tb-it.on{color:var(--text-dark)}
  .tabbar .tb-it.on .ic{transform:translateY(-1px) scale(1.08)}
  .tabbar .tb-it:active{transform:scale(.92)}
  html.ma-tabbar body{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
  html.sheet-open .tabbar{transform:translateY(110%)}
  ::view-transition-group(site-tab){animation:none}
  ::view-transition-old(site-tab){animation:none;opacity:0}
  ::view-transition-new(site-tab){animation:none}
}
@keyframes mTileIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
@media(max-width:430px){
  header.site{gap:.35rem;padding:.55rem .55rem}
  header.site .m-search{padding:0 .8rem;font-size:.85rem}
  header.site .m-subj{font-size:.85rem;padding:0 .55rem 0 .5rem}
  header.site .m-ic,header.site .acct-link .av{width:2.25rem!important;height:2.25rem!important}
}
@media(max-width:350px){
  header.site .m-search{width:2.25rem;padding:0;justify-content:center}
  header.site .m-search span{display:none}
}
/* přechod mezi sekcemi lišty: stránka přejede doleva / doprava (Chrome, Edge, Safari 18.2+) */
@keyframes vtSlOutL{to{opacity:0;transform:translateX(-36px)}}
@keyframes vtSlInR{from{opacity:0;transform:translateX(42px)}}
@keyframes vtSlOutR{to{opacity:0;transform:translateX(36px)}}
@keyframes vtSlInL{from{opacity:0;transform:translateX(-42px)}}
html:active-view-transition-type(vpred)::view-transition-old(root){animation:vtSlOutL .26s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(vpred)::view-transition-new(root){animation:vtSlInR .4s cubic-bezier(.32,.72,0,1) both}
html:active-view-transition-type(vzad)::view-transition-old(root){animation:vtSlOutR .26s cubic-bezier(.4,0,1,1) both}
html:active-view-transition-type(vzad)::view-transition-new(root){animation:vtSlInL .4s cubic-bezier(.32,.72,0,1) both}
@media(prefers-reduced-motion:reduce){header.site .m-sheet,header.site nav.nav-main,.tabbar .tb-knob{transition:none!important}}
/* kdo není správce, má jen angličtinu → výběr předmětu nemá smysl; pilulka hledání zůstane uprostřed, jen je širší */
@media(max-width:1180px){
  html:not(.je-spravce) header.site .m-subj{display:none!important}
  html:not(.je-spravce) header.site .m-search{grid-column:2;grid-row:1;width:clamp(8.5rem,46vw,19rem)!important;padding:0 1.1rem!important;justify-content:center}
  html:not(.je-spravce) header.site .hdr-right{grid-column:3;grid-row:1}
  html:not(.je-spravce) header.site .m-search span{display:inline!important}
}
/* stránka s vyhledáváním: pilulka v hlavičce se schová (kulička s lupou „spadne“ do pole hledání – menu.js) */
header.site .m-search.m-pryc{visibility:hidden;pointer-events:none}
.m-drop{position:fixed;z-index:9999;display:flex;align-items:center;justify-content:center;gap:.45rem;overflow:hidden;white-space:nowrap;
  border-radius:2rem;border:1px solid var(--border-soft);background:var(--bg-card-2);color:var(--text-dim);font-weight:800;font-size:.9rem;pointer-events:none}
.m-drop span{transition:opacity .15s}
}