/* ==========================================================================
   3wLearn – společný styl pro všechny stránky
   Postaveno na Bootstrap 5.3.3. Tento soubor se načítá AŽ PO bootstrap.min.css.
   Styl: Apple (velké nadpisy, hodně vzduchu, průsvitná lišta, měkké stíny).
   ========================================================================== */

/* 1) BARVY A PROMĚNNÉ ------------------------------------------------------ */
:root{
  /* základ */
  --tw-bg:#f5f5f7;            /* světle šedé pozadí stránky */
  --tw-surface:#ffffff;       /* karty */
  --tw-ink:#1d1d1f;           /* hlavní text */
  --tw-ink-2:#424245;         /* sekundární text */
  --tw-muted:#6e6e73;         /* popisky */
  --tw-line:#d2d2d7;          /* linky */
  --tw-line-soft:#e8e8ed;
  --tw-bar:#dfe5ff;           /* neaktivní sloupce grafů */

  /* značka */
  --tw-accent:#2f5bea;        /* kobaltová modrá – tlačítka, odkazy */
  --tw-accent-hover:#2149cc;
  --tw-violet:#7c5cff;        /* do přechodů */
  --tw-rose:#e0569b;          /* do přechodů */
  --tw-warm:#ff9f43;          /* teplý akcent (zvýraznění) */
  --tw-good:#1f9d55;  --tw-good-bg:#e6f6ec;
  --tw-bad:#e5484d;   --tw-bad-bg:#fdecec;

  /* tmavé sekce */
  --tw-night:#0a0a0f;
  --tw-night-2:#16161d;
  --tw-night-ink:#f5f5f7;
  --tw-night-muted:#a1a1aa;

  /* přechod pro nadpisy */
  --tw-grad:linear-gradient(92deg,#2f5bea 0%,#7c5cff 48%,#e0569b 100%);

  /* stíny (vrstvené, měkké) */
  --tw-shadow-sm:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04);
  --tw-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -6px rgba(0,0,0,.08),0 28px 60px -24px rgba(30,40,90,.18);
  --tw-shadow-lg:0 2px 4px rgba(0,0,0,.04),0 20px 50px -12px rgba(30,40,90,.22),0 60px 120px -40px rgba(47,91,234,.25);

  /* zaoblení */
  --tw-r-sm:12px; --tw-r:20px; --tw-r-lg:28px; --tw-pill:980px;

  /* pohyb (Apple / Emil Kowalski) */
  --tw-ease-out:cubic-bezier(.23,1,.32,1);
  --tw-ease-in-out:cubic-bezier(.77,0,.175,1);

  --tw-nav-h:52px;

  /* Bootstrap proměnné → naše barvy */
  --bs-body-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-color:var(--tw-ink);
  --bs-body-bg:var(--tw-bg);
  --bs-body-font-size:1.0625rem;
  --bs-body-line-height:1.55;
  --bs-primary:#2f5bea;
  --bs-primary-rgb:47,91,234;
  --bs-link-color:#2f5bea;
  --bs-link-color-rgb:47,91,234;
  --bs-link-hover-color:#2149cc;
  --bs-link-hover-color-rgb:33,73,204;
  --bs-border-color:var(--tw-line);
  --bs-border-radius:12px;
  --bs-focus-ring-color:rgba(47,91,234,.35);
  interpolate-size:allow-keywords;
}

/* 2) ZÁKLAD ------------------------------------------------------------------ */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--tw-nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--tw-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;color:inherit;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:rgba(47,91,234,.18)}
:focus-visible{outline:3px solid rgba(47,91,234,.45);outline-offset:3px;border-radius:6px}
img,svg{max-width:100%}

/* 3) TYPOGRAFIE ---------------------------------------------------------------- */
.tw-eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--tw-accent);margin-bottom:.75rem}
.tw-eyebrow.is-warm{color:var(--tw-warm)}
.tw-display{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.tw-h1{font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.04;letter-spacing:-.032em;font-weight:800}
.tw-h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.028em;font-weight:700}
.tw-h3{font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.018em;font-weight:700}
.tw-lead{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.45;color:var(--tw-ink-2);font-weight:400;letter-spacing:-.005em}
.tw-muted{color:var(--tw-muted)}
.tw-small{font-size:.875rem}
.tw-mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
.tw-grad{background:var(--tw-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tw-dark .tw-grad{background:linear-gradient(92deg,#8ea6ff 0%,#b39dff 50%,#ff8fc4 100%);-webkit-background-clip:text;background-clip:text}
.tw-measure{max-width:44rem}
.tw-measure-sm{max-width:34rem}

/* 4) NAVIGACE (průsvitná lišta) -------------------------------------------- */
.tw-nav{position:sticky;top:0;z-index:1030;min-height:var(--tw-nav-h);background:rgba(250,250,252,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);transition:background-color .3s var(--tw-ease-out),box-shadow .3s var(--tw-ease-out)}
.tw-nav.is-scrolled{background:rgba(250,250,252,.86);box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.25)}
.tw-nav .navbar{padding:0;min-height:var(--tw-nav-h)}
.tw-brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.125rem;letter-spacing:-.02em;color:var(--tw-ink)!important;text-decoration:none}
.tw-logo{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--tw-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px -4px rgba(124,92,255,.6)}
.tw-logo svg{width:17px;height:17px}
.tw-nav .nav-link{font-size:.875rem;font-weight:500;color:var(--tw-ink-2);padding:.5rem .8rem!important;border-radius:999px;transition:color .2s var(--tw-ease-out),background-color .2s var(--tw-ease-out)}
.tw-nav .nav-link:hover{color:var(--tw-ink)}
.tw-nav .nav-link.active{color:var(--tw-ink);font-weight:600}
.tw-nav .navbar-toggler{border:0;padding:.5rem;box-shadow:none!important}
.tw-burger{display:block;width:20px;height:12px;position:relative}
.tw-burger::before,.tw-burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--tw-ink);border-radius:2px;transition:transform .3s var(--tw-ease-out),top .3s var(--tw-ease-out)}
.tw-burger::before{top:2px}.tw-burger::after{top:9px}
.navbar-toggler[aria-expanded="true"] .tw-burger::before{top:5px;transform:rotate(45deg)}
.navbar-toggler[aria-expanded="true"] .tw-burger::after{top:5px;transform:rotate(-45deg)}
@media (max-width:991.98px){
  .tw-nav .navbar-collapse{padding:.5rem 0 1.25rem}
  .tw-nav .nav-link{font-size:1.375rem;font-weight:600;color:var(--tw-ink);padding:.6rem 0!important;letter-spacing:-.02em}
  .tw-nav .tw-nav-cta{margin-top:.75rem}
}

/* 5) TLAČÍTKA ---------------------------------------------------------------- */
.btn{--bs-btn-font-weight:600;--bs-btn-padding-x:1.35rem;--bs-btn-padding-y:.7rem;--bs-btn-border-radius:var(--tw-pill);
  letter-spacing:-.01em;transition:transform .18s var(--tw-ease-out),background-color .2s var(--tw-ease-out),border-color .2s var(--tw-ease-out),color .2s var(--tw-ease-out),box-shadow .2s var(--tw-ease-out)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn-tw{--bs-btn-color:#fff;--bs-btn-bg:var(--tw-accent);--bs-btn-border-color:var(--tw-accent);
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--tw-accent-hover);--bs-btn-hover-border-color:var(--tw-accent-hover);
  --bs-btn-active-color:#fff;--bs-btn-active-bg:var(--tw-accent-hover);--bs-btn-active-border-color:var(--tw-accent-hover);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px -10px rgba(47,91,234,.8)}
.btn-tw-ghost{--bs-btn-color:var(--tw-accent);--bs-btn-bg:transparent;--bs-btn-border-color:rgba(47,91,234,.35);
  --bs-btn-hover-color:var(--tw-accent-hover);--bs-btn-hover-bg:rgba(47,91,234,.06);--bs-btn-hover-border-color:var(--tw-accent);
  --bs-btn-active-color:var(--tw-accent-hover);--bs-btn-active-bg:rgba(47,91,234,.1);--bs-btn-active-border-color:var(--tw-accent)}
.btn-tw-light{--bs-btn-color:var(--tw-ink);--bs-btn-bg:#fff;--bs-btn-border-color:#fff;--bs-btn-hover-bg:#f0f0f3;--bs-btn-hover-border-color:#f0f0f3;--bs-btn-hover-color:var(--tw-ink);--bs-btn-active-bg:#e8e8ed;--bs-btn-active-border-color:#e8e8ed}
.btn-tw-sm{--bs-btn-padding-x:.95rem;--bs-btn-padding-y:.38rem;--bs-btn-font-size:.8125rem}
.btn-tw-lg{--bs-btn-padding-x:1.75rem;--bs-btn-padding-y:.9rem;--bs-btn-font-size:1.0625rem}
.tw-link{display:inline-flex;align-items:center;gap:.2rem;font-weight:500;color:var(--tw-accent);text-decoration:none}
.tw-link::after{content:"›";font-size:1.25em;line-height:1;transform:translateY(-.04em);transition:transform .2s var(--tw-ease-out)}
.tw-link:hover{text-decoration:underline;text-underline-offset:3px}
.tw-link:hover::after{transform:translate(3px,-.04em)}
.tw-dark .tw-link{color:#8ea6ff}

/* 6) SEKCE A STÍNOVANÉ POZADÍ ---------------------------------------------- */
.tw-section{padding:clamp(4.5rem,10vw,8.5rem) 0;position:relative}
.tw-section-sm{padding:clamp(3rem,6vw,5rem) 0;position:relative}
.tw-white{background:var(--tw-surface)}
.tw-hero{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,6rem);isolation:isolate}
/* barevná „záře“ – stínování pozadí */
.tw-glow::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 45% at 18% 20%,rgba(47,91,234,.16),transparent 70%),
    radial-gradient(35% 40% at 85% 10%,rgba(124,92,255,.16),transparent 70%),
    radial-gradient(40% 40% at 70% 85%,rgba(224,86,155,.10),transparent 70%)}
.tw-dark{background:radial-gradient(60% 55% at 85% 0%,rgba(124,92,255,.22),transparent 70%),
  radial-gradient(55% 60% at 0% 100%,rgba(47,91,234,.28),transparent 70%),var(--tw-night);color:var(--tw-night-ink)}
.tw-dark .tw-lead,.tw-dark .tw-muted{color:var(--tw-night-muted)}
.tw-dark .tw-eyebrow{color:#8ea6ff}
.tw-divider{height:1px;background:var(--tw-line-soft);border:0;margin:0}

/* 7) KARTY ----------------------------------------------------------------- */
.tw-card{background:var(--tw-surface);border-radius:var(--tw-r-lg);box-shadow:var(--tw-shadow);padding:clamp(1.5rem,3vw,2.25rem);height:100%;position:relative;overflow:hidden}
.tw-card-flat{background:var(--tw-surface);border:1px solid var(--tw-line-soft);border-radius:var(--tw-r);padding:1.5rem;height:100%}
.tw-card-dark{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--tw-r-lg);padding:clamp(1.5rem,3vw,2.25rem);height:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tw-card-tint{background:linear-gradient(160deg,#eef2ff 0%,#f5f0ff 55%,#fff 100%)}
.tw-num{font-size:.8125rem;font-weight:600;color:var(--tw-accent);font-variant-numeric:tabular-nums;margin-bottom:.85rem;display:inline-block}
.tw-dark .tw-num{color:#8ea6ff}
.tw-card h3,.tw-card-flat h3,.tw-card-dark h3{font-size:1.3125rem;letter-spacing:-.018em;margin-bottom:.5rem}
.tw-card p,.tw-card-flat p{color:var(--tw-ink-2);margin:0}
.tw-card-dark p{color:var(--tw-night-muted);margin:0}
.tw-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(47,91,234,.08);color:var(--tw-accent);margin-bottom:1rem}
.tw-dark .tw-icon{background:rgba(142,166,255,.12);color:#8ea6ff}
.tw-icon svg{width:22px;height:22px}
.tw-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:var(--tw-pill);background:rgba(255,255,255,.7);border:1px solid var(--tw-line-soft);font-size:.8125rem;font-weight:500;color:var(--tw-ink-2);box-shadow:var(--tw-shadow-sm)}
.tw-badge-soon{display:inline-flex;align-items:center;padding:.18rem .6rem;border-radius:var(--tw-pill);background:#fff4e6;color:#b35c00;font-size:.75rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.tw-dark .tw-badge-soon{background:rgba(255,159,67,.14);color:#ffb870}

/* 8) KVÍZ / TEST ------------------------------------------------------------ */
.tw-quiz{background:var(--tw-surface);border-radius:var(--tw-r-lg);box-shadow:var(--tw-shadow-lg);padding:clamp(1.25rem,3vw,2rem);color:var(--tw-ink)}
.tw-quiz-meta{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;color:var(--tw-muted);font-variant-numeric:tabular-nums}
.tw-progress{height:4px;border-radius:4px;background:var(--tw-line-soft);overflow:hidden;margin:.75rem 0 1.25rem}
.tw-progress>i{display:block;height:100%;background:var(--tw-grad);border-radius:4px;transition:width .5s var(--tw-ease-out)}
.tw-q{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:1rem}
.tw-opt{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;padding:.85rem 1rem;margin-bottom:.55rem;border-radius:14px;border:1px solid var(--tw-line-soft);background:#fbfbfd;color:var(--tw-ink);font-weight:500;
  transition:transform .18s var(--tw-ease-out),background-color .2s var(--tw-ease-out),border-color .2s var(--tw-ease-out),opacity .25s var(--tw-ease-out)}
.tw-opt .k{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:#fff;border:1px solid var(--tw-line);font-size:.8125rem;font-weight:600;color:var(--tw-muted)}
.tw-opt .m{margin-left:auto;font-size:.8125rem;font-weight:600}
button.tw-opt:hover{border-color:rgba(47,91,234,.45);background:#fff}
button.tw-opt:active{transform:scale(.985);transition-duration:.08s}
.tw-opt.is-right{background:var(--tw-good-bg);border-color:var(--tw-good);color:#0f5a31}
.tw-opt.is-right .k{background:var(--tw-good);border-color:var(--tw-good);color:#fff}
.tw-opt.is-wrong{background:var(--tw-bad-bg);border-color:var(--tw-bad);color:#8c1d22}
.tw-opt.is-wrong .k{background:var(--tw-bad);border-color:var(--tw-bad);color:#fff}
.tw-opt.is-dim{opacity:.45}
.tw-explain{border-radius:16px;padding:1rem 1.1rem;background:linear-gradient(160deg,#eef2ff,#f6f2ff);border:1px solid rgba(124,92,255,.18);font-size:.9375rem;color:var(--tw-ink-2);margin-top:.75rem}
.tw-explain b{display:block;font-size:.75rem;letter-spacing:.06em;color:var(--tw-violet);margin-bottom:.35rem}
.tw-chat{background:var(--tw-surface);border-radius:var(--tw-r-lg);box-shadow:var(--tw-shadow);display:flex;flex-direction:column;min-height:100%;overflow:hidden;color:var(--tw-ink)}
.tw-chat-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--tw-line-soft);font-weight:600}
.tw-chat-body{flex:1;padding:1.25rem;display:flex;flex-direction:column;gap:.6rem;min-height:240px}
.tw-bub{max-width:88%;padding:.65rem .9rem;border-radius:18px;font-size:.9375rem;line-height:1.45;animation:twPop .35s var(--tw-ease-out) both}
.tw-bub.ai{background:#f0f0f5;border-bottom-left-radius:6px;align-self:flex-start}
.tw-bub.me{background:var(--tw-accent);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.tw-chat-foot{padding:1rem 1.25rem;border-top:1px solid var(--tw-line-soft)}
.tw-chip{display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:var(--tw-pill);border:1px solid rgba(47,91,234,.3);background:#fff;color:var(--tw-accent);font-size:.875rem;font-weight:500;margin:0 .35rem .4rem 0;
  transition:transform .18s var(--tw-ease-out),background-color .2s var(--tw-ease-out)}
.tw-chip:hover{background:rgba(47,91,234,.06)}
.tw-chip:active{transform:scale(.96);transition-duration:.08s}
.tw-chip[disabled]{opacity:.4;pointer-events:none}
.tw-dots{display:inline-flex;gap:4px}
.tw-dots i{width:6px;height:6px;border-radius:50%;background:#a1a1aa;animation:twDot 1.1s infinite}
.tw-dots i:nth-child(2){animation-delay:.15s}.tw-dots i:nth-child(3){animation-delay:.3s}
@keyframes twDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes twPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* 9) SEGMENTOVÝ PŘEPÍNAČ (jako v iOS) -------------------------------------- */
.tw-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--tw-pill);background:rgba(118,118,128,.12)}
.tw-seg button{border:0;background:transparent;color:var(--tw-ink-2);font-weight:500;font-size:.9375rem;padding:.5rem 1.05rem;border-radius:var(--tw-pill);
  transition:background-color .25s var(--tw-ease-out),color .2s var(--tw-ease-out),box-shadow .25s var(--tw-ease-out),transform .18s var(--tw-ease-out)}
.tw-seg button:active{transform:scale(.96);transition-duration:.08s}
.tw-seg button.is-on{background:#fff;color:var(--tw-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 3px 10px -2px rgba(0,0,0,.12)}
.tw-dark .tw-seg{background:rgba(255,255,255,.1)}
.tw-dark .tw-seg button{color:var(--tw-night-muted)}
.tw-dark .tw-seg button.is-on{background:#fff;color:var(--tw-ink)}

/* 10) TELEFON (ukázka aplikace) ------------------------------------------- */
.tw-phone{width:min(300px,78vw);aspect-ratio:300/610;border-radius:52px;background:linear-gradient(145deg,#2a2a31,#0d0d12);padding:12px;margin-inline:auto;position:relative;
  box-shadow:0 0 0 1.5px #3a3a42 inset,0 40px 90px -30px rgba(0,0,0,.6),0 20px 50px -20px rgba(47,91,234,.35)}
.tw-phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:16px;background:#0a0a0f;z-index:3}
.tw-screen{position:relative;width:100%;height:100%;border-radius:40px;background:#fff;color:var(--tw-ink);overflow:hidden;font-size:.84rem;line-height:1.4}
.tw-scr{position:absolute;inset:0;padding:58px 18px 18px;display:flex;flex-direction:column;gap:.55rem;opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .45s var(--tw-ease-out),transform .55s var(--tw-ease-out);pointer-events:none}
.tw-scr.is-on{opacity:1;transform:none}
.tw-scr h4{font-size:1.15rem;letter-spacing:-.02em;margin:0 0 .15rem}
.tw-scr .lbl{font-size:.7rem;color:var(--tw-muted);margin-top:.2rem}
.tw-scr .fld{border:1px solid var(--tw-line-soft);border-radius:10px;padding:.5rem .65rem;background:#fbfbfd}
.tw-scr .pbtn{background:var(--tw-accent);color:#fff;border-radius:12px;padding:.6rem;text-align:center;font-weight:600;margin-top:.35rem}
.tw-scr .tile{border:1px solid var(--tw-line-soft);border-radius:12px;padding:.6rem .7rem;display:flex;justify-content:space-between;align-items:center}
.tw-scr .tile b{font-size:.88rem}
.tw-scr .bdg{font-size:.65rem;padding:.12rem .5rem;border-radius:999px;background:var(--tw-good-bg);color:var(--tw-good);font-weight:600}
.tw-scr .bdg.buy{background:rgba(47,91,234,.1);color:var(--tw-accent)}
.tw-scr .po{border:1px solid var(--tw-line-soft);border-radius:10px;padding:.5rem .65rem;display:flex;justify-content:space-between}
.tw-scr .po.good{border-color:var(--tw-good);background:var(--tw-good-bg)}
.tw-scr .po.bad{border-color:var(--tw-bad);background:var(--tw-bad-bg)}
.tw-scr .po.dim{opacity:.45}
.tw-ring{width:118px;height:118px;margin:.5rem auto;position:relative}
.tw-ring svg{transform:rotate(-90deg)}
.tw-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;letter-spacing:-.02em}
.tw-bars{display:flex;align-items:flex-end;gap:6px;height:70px}
.tw-bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--tw-bar)}
.tw-bars i:last-child{background:var(--tw-grad)}

/* scrollytelling: telefon vlevo, kroky vpravo */
.tw-story-stage{position:sticky;top:calc(var(--tw-nav-h) + 24px);height:calc(100vh - var(--tw-nav-h) - 48px);min-height:560px;display:flex;align-items:center;justify-content:center}
.tw-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding-left:1.5rem;border-left:2px solid rgba(255,255,255,.1);transition:opacity .4s var(--tw-ease-out),border-color .4s var(--tw-ease-out);opacity:.35}
.tw-step.is-on{opacity:1;border-left-color:#8ea6ff}
.tw-step h3{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;margin:.35rem 0 .6rem}
.tw-step p{color:var(--tw-night-muted);max-width:30rem;margin:0;font-size:1.0625rem}
@media (max-width:991.98px){
  .tw-story-stage{height:auto;min-height:0;top:calc(var(--tw-nav-h) + 8px);z-index:2;padding:.5rem 0 1rem;background:linear-gradient(var(--tw-night) 85%,transparent)}
  .tw-story-stage .tw-phone{width:180px;border-radius:34px;padding:8px}
  .tw-story-stage .tw-phone::before{top:14px;width:58px;height:17px}
  .tw-story-stage .tw-screen{border-radius:27px;font-size:.55rem}
  .tw-story-stage .tw-scr{padding:38px 11px 11px;gap:.3rem}
  .tw-story-stage .tw-scr h4{font-size:.75rem}
  .tw-story-stage .tw-ring{width:70px;height:70px}.tw-story-stage .tw-ring svg{width:70px;height:70px}.tw-story-stage .tw-ring b{font-size:1rem}
  .tw-step{min-height:55vh}
}

/* 11) PÁS S FUNKCEMI (běžící text) ---------------------------------------- */
.tw-marquee{overflow:hidden;border-block:1px solid var(--tw-line-soft);background:var(--tw-surface);padding:1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tw-marquee-track{display:flex;gap:2.25rem;width:max-content;animation:twMarquee 40s linear infinite}
.tw-marquee:hover .tw-marquee-track{animation-play-state:paused}
.tw-marquee span{font-weight:600;color:var(--tw-ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:2.25rem}
.tw-marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--tw-grad)}
@keyframes twMarquee{to{transform:translateX(-50%)}}

/* 12) ÚROVNĚ (A1–B2) ------------------------------------------------------ */
.tw-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (max-width:575.98px){.tw-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tw-level{border:1px solid var(--tw-line-soft);background:var(--tw-surface);border-radius:18px;padding:1rem;text-align:left;color:var(--tw-ink);
  transition:transform .18s var(--tw-ease-out),box-shadow .25s var(--tw-ease-out),border-color .25s var(--tw-ease-out),background-color .25s var(--tw-ease-out)}
.tw-level:active{transform:scale(.97);transition-duration:.08s}
.tw-level .c{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.tw-level b{display:block;font-weight:600;margin-top:.35rem}
.tw-level small{color:var(--tw-muted)}
.tw-level.is-done{background:#f3f5ff;border-color:rgba(47,91,234,.25)}
.tw-level.is-on{border-color:transparent;box-shadow:0 0 0 2px var(--tw-accent),var(--tw-shadow)}
.tw-level.is-on .c{background:var(--tw-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tw-level-bar{height:4px;border-radius:4px;background:var(--tw-line-soft);margin:1rem 0 1.5rem;overflow:hidden}
.tw-level-bar i{display:block;height:100%;background:var(--tw-grad);transition:width .6s var(--tw-ease-out)}
.tw-tag{display:inline-flex;padding:.4rem .8rem;border-radius:var(--tw-pill);background:#f0f0f5;font-size:.875rem;margin:0 .35rem .45rem 0;color:var(--tw-ink-2)}
.tw-list-num{list-style:none;padding:0;margin:0;counter-reset:n}
.tw-list-num li{display:flex;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--tw-line-soft);color:var(--tw-ink-2)}
.tw-list-num li:last-child{border-bottom:0}
.tw-list-num li::before{counter-increment:n;content:counter(n,decimal-leading-zero);font-size:.75rem;font-weight:600;color:var(--tw-accent);padding-top:.2rem;font-variant-numeric:tabular-nums}
.tw-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-radius:var(--tw-r-lg);overflow:hidden;background:var(--tw-surface);box-shadow:var(--tw-shadow-sm);border:1px solid var(--tw-line-soft)}
.tw-flow>div{padding:1.4rem 1.25rem;border-right:1px solid var(--tw-line-soft);border-bottom:1px solid var(--tw-line-soft);margin:0 -1px -1px 0;display:flex;flex-direction:column;gap:.3rem}
.tw-flow b{font-size:1.125rem;letter-spacing:-.015em}
.tw-flow span.d{color:var(--tw-muted);font-size:.9375rem}

/* 13) CENÍK ---------------------------------------------------------------- */
.tw-price{font-size:clamp(2.25rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.tw-price-sm{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.tw-plan{text-align:left;border:1px solid var(--tw-line-soft);background:var(--tw-surface);border-radius:20px;padding:1.1rem 1.2rem;width:100%;color:var(--tw-ink);
  transition:transform .18s var(--tw-ease-out),box-shadow .25s var(--tw-ease-out),border-color .25s var(--tw-ease-out)}
.tw-plan:active{transform:scale(.98);transition-duration:.08s}
.tw-plan b{display:block;font-size:1.0625rem}
.tw-plan .p{display:block;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin-top:.25rem}
.tw-plan small{color:var(--tw-muted)}
.tw-plan.is-on{border-color:transparent;box-shadow:0 0 0 2px var(--tw-accent),var(--tw-shadow)}
.tw-summary{position:sticky;top:calc(var(--tw-nav-h) + 24px)}
.tw-card.tw-dark{background:radial-gradient(80% 60% at 100% 0%,rgba(124,92,255,.28),transparent 70%),radial-gradient(70% 60% at 0% 100%,rgba(47,91,234,.32),transparent 70%),var(--tw-night);color:var(--tw-night-ink);box-shadow:var(--tw-shadow-lg)}
.tw-check{list-style:none;padding:0;margin:1.25rem 0}
.tw-check li{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem 0;border-top:1px solid rgba(255,255,255,.1)}
.tw-check li::before{content:"";flex:none;width:18px;height:18px;margin-top:.2rem;border-radius:50%;background:#8ea6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

/* 14) ČASTÉ OTÁZKY (Bootstrap accordion v Apple stylu) -------------------- */
.tw-faq{--bs-accordion-bg:transparent;--bs-accordion-border-width:0;--bs-accordion-btn-padding-x:0;--bs-accordion-btn-padding-y:1.35rem;--bs-accordion-body-padding-x:0;--bs-accordion-body-padding-y:0;
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:var(--tw-ink);--bs-accordion-transition:none}
.tw-faq .accordion-item{border-bottom:1px solid var(--tw-line)!important}
.tw-faq .accordion-button{font-size:clamp(1.125rem,1.8vw,1.3125rem);font-weight:600;letter-spacing:-.015em;color:var(--tw-ink)}
.tw-faq .accordion-button::after{background-image:none;content:"+";font-size:1.6rem;font-weight:300;line-height:1;width:auto;height:auto;color:var(--tw-accent);transition:transform .3s var(--tw-ease-out)}
.tw-faq .accordion-button:not(.collapsed)::after{transform:rotate(45deg)}
.tw-faq .accordion-body{color:var(--tw-ink-2);padding-bottom:1.35rem;max-width:46rem}
.tw-faq .collapsing{transition:height .35s var(--tw-ease-out)}

/* 15) FORMULÁŘE ----------------------------------------------------------- */
.form-label{font-weight:600;font-size:.9375rem;margin-bottom:.4rem}
.form-control,.form-select{border-radius:14px;border-color:var(--tw-line);padding:.75rem .95rem;font-size:1rem;background-color:#fff;transition:border-color .2s var(--tw-ease-out),box-shadow .2s var(--tw-ease-out)}
.form-control:focus,.form-select:focus{border-color:var(--tw-accent);box-shadow:0 0 0 4px rgba(47,91,234,.15)}
.form-check-input{width:1.2em;height:1.2em;margin-top:.18em;border-color:#b9b9c0}
.form-check-input:checked{background-color:var(--tw-accent);border-color:var(--tw-accent)}
.form-check-input:focus{box-shadow:0 0 0 4px rgba(47,91,234,.15)}
.form-check-label{color:var(--tw-ink-2)}
.tw-fieldset{border:1px solid var(--tw-line-soft);border-radius:20px;padding:1.25rem;background:#fbfbfd}
.tw-fieldset legend{float:none;width:auto;font-size:.9375rem;font-weight:600;padding:0 .4rem;margin:0}
.tw-firm{display:none}
.tw-fieldset:has(#firm:checked) .tw-firm{display:flex}
.tw-q-num{font-size:.75rem;font-weight:600;color:var(--tw-accent);font-variant-numeric:tabular-nums}
.tw-q-title{display:block;font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;margin:.1rem 0 .2rem}
.tw-q-help{font-size:.875rem;color:var(--tw-muted);margin-bottom:.65rem}
/* zaškrtávací „čipy“ v dotazníku */
.tw-choice{position:relative;display:inline-flex;margin:0 .35rem .45rem 0}
.tw-choice input{position:absolute;opacity:0;pointer-events:none}
.tw-choice span{display:inline-flex;padding:.55rem 1rem;border-radius:var(--tw-pill);border:1px solid var(--tw-line);background:#fff;font-size:.9375rem;font-weight:500;cursor:pointer;
  transition:transform .18s var(--tw-ease-out),background-color .2s var(--tw-ease-out),border-color .2s var(--tw-ease-out),color .2s var(--tw-ease-out)}
.tw-choice:active span{transform:scale(.96);transition-duration:.08s}
.tw-choice input:checked+span{background:var(--tw-ink);border-color:var(--tw-ink);color:#fff}
.tw-choice input:focus-visible+span{outline:3px solid rgba(47,91,234,.45);outline-offset:2px}
.tw-note{border-radius:14px;padding:.8rem 1rem;background:#fff4e6;color:#8a4a00;font-size:.9375rem}

/* 16) PRÁVNÍ DOKUMENTY ---------------------------------------------------- */
.tw-toc{position:sticky;top:calc(var(--tw-nav-h) + 24px);display:flex;flex-direction:column;gap:2px;font-size:.9375rem}
.tw-toc a{padding:.45rem .8rem;border-radius:10px;color:var(--tw-muted);text-decoration:none;transition:background-color .2s var(--tw-ease-out),color .2s var(--tw-ease-out)}
.tw-toc a:hover{background:#fff;color:var(--tw-ink)}
.tw-toc a.active{background:#fff;color:var(--tw-ink);font-weight:600;box-shadow:var(--tw-shadow-sm)}
.tw-doc{background:var(--tw-surface);border-radius:var(--tw-r-lg);box-shadow:var(--tw-shadow);padding:clamp(1.5rem,4.5vw,3.5rem);color:var(--tw-ink-2);font-size:1rem}
.tw-doc h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.025em;color:var(--tw-ink);margin:3rem 0 1rem;scroll-margin-top:calc(var(--tw-nav-h) + 24px)}
.tw-doc h2:first-child{margin-top:0}
.tw-doc h3{font-size:1.1875rem;color:var(--tw-ink);margin:1.75rem 0 .6rem}
.tw-doc p{margin-bottom:.85rem}
.tw-doc ol,.tw-doc ul{padding-left:1.4rem;display:grid;gap:.6rem;margin-bottom:1rem}
.tw-doc ol ol{margin-top:.5rem;list-style:lower-alpha}
.tw-doc li::marker{color:var(--tw-accent);font-weight:600}
.tw-doc a{text-underline-offset:3px}
@media (max-width:991.98px){.tw-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:.35rem}.tw-toc a{background:#fff;font-size:.8125rem}}

/* 17) ZDROJE – rozklikávací seznam ---------------------------------------- */
.tw-src{background:var(--tw-surface);border-radius:20px;box-shadow:var(--tw-shadow-sm);border:1px solid var(--tw-line-soft);margin-bottom:.75rem}
.tw-src .accordion-button{border-radius:20px!important;padding:1.15rem 1.35rem;background:transparent;box-shadow:none!important;display:flex;gap:1rem;flex-wrap:wrap}
.tw-src .accordion-button b{font-size:1.0625rem;color:var(--tw-ink)}
.tw-src .accordion-button .d{color:var(--tw-muted);font-size:.9375rem}
.tw-src .accordion-button .lic{margin-left:auto;font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:var(--tw-pill);background:#f0f0f5;color:var(--tw-ink-2)}
.tw-src .accordion-button::after{margin-left:.75rem}
.tw-src .accordion-body{padding:0 1.35rem 1.25rem;color:var(--tw-ink-2)}

/* 18) PATIČKA ------------------------------------------------------------- */
.tw-footer{background:var(--tw-bg);border-top:1px solid var(--tw-line-soft);padding:3rem 0 2.5rem;font-size:.8125rem;color:var(--tw-muted)}
.tw-footer h6{font-size:.8125rem;font-weight:600;color:var(--tw-ink);margin-bottom:.75rem}
.tw-footer a{color:var(--tw-ink-2);text-decoration:none;display:block;padding:.2rem 0}
.tw-footer a:hover{text-decoration:underline;color:var(--tw-ink)}
.tw-footer .tw-legal{border-top:1px solid var(--tw-line-soft);margin-top:2rem;padding-top:1.25rem}

/* 19) ANIMACE PŘI ROLOVÁNÍ ----------------------------------------------- */
.tw-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--tw-ease-out),transform .9s var(--tw-ease-out);transition-delay:var(--d,0s)}
.tw-reveal.is-in{opacity:1;transform:none}
.tw-float{animation:twFloat 7s ease-in-out infinite}
@keyframes twFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* 20) DOTYKOVÁ ZAŘÍZENÍ A OMEZENÝ POHYB ---------------------------------- */
@media (hover:hover) and (pointer:fine){
  .tw-card.is-hover{transition:transform .35s var(--tw-ease-out),box-shadow .35s var(--tw-ease-out)}
  .tw-card.is-hover:hover{transform:translateY(-4px);box-shadow:var(--tw-shadow-lg)}
  .tw-level:hover:not(.is-on),.tw-plan:hover:not(.is-on){border-color:rgba(47,91,234,.35)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.15s!important;transition-property:opacity,background-color,border-color,color!important}
  .tw-reveal{opacity:1;transform:none}
  .tw-marquee-track{animation:none}
  .btn:active,.tw-opt:active,.tw-chip:active,.tw-level:active,.tw-plan:active,.tw-seg button:active,.tw-choice:active span{transform:none}
}
@media (prefers-reduced-transparency:reduce){.tw-nav{background:#fafafc;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 21) PŘEPÍNAČ SVĚTLÝ / TMAVÝ ------------------------------------------- */
.tw-theme{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--tw-ink-2);
  transition:background-color .2s var(--tw-ease-out),color .2s var(--tw-ease-out),transform .18s var(--tw-ease-out)}
.tw-theme:hover{background:rgba(127,127,140,.12);color:var(--tw-ink)}
.tw-theme:active{transform:scale(.92);transition-duration:.08s}
.tw-theme svg{width:19px;height:19px;grid-area:1/1;transition:opacity .3s var(--tw-ease-out),transform .45s var(--tw-ease-out)}
.tw-theme .tw-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-bs-theme="dark"] .tw-theme .tw-sun{opacity:0;transform:rotate(60deg) scale(.6)}
[data-bs-theme="dark"] .tw-theme .tw-moon{opacity:1;transform:none}
/* plynulý přechod barev jen v okamžiku přepnutí */
.tw-theme-anim,.tw-theme-anim *{transition:background-color .3s var(--tw-ease-out),border-color .3s var(--tw-ease-out),color .3s var(--tw-ease-out)!important}

/* 22) TMAVÝ REŽIM --------------------------------------------------------
   Přepíná se atributem data-bs-theme="dark" na <html> (Bootstrap 5.3).
   Většina barev jde přes proměnné, níže jen místa s pevnou barvou. */
[data-bs-theme="dark"]{
  --tw-bg:#0d0d12;
  --tw-surface:#16161e;
  --tw-ink:#f2f2f5;
  --tw-ink-2:#c3c3cf;
  --tw-muted:#8d8d9c;
  --tw-line:#2e2e3a;
  --tw-line-soft:#24242e;
  --tw-bar:#2a2a3d;
  --tw-accent:#6b8bff;
  --tw-accent-hover:#87a0ff;
  --tw-good:#4ade80;  --tw-good-bg:rgba(74,222,128,.12);
  --tw-bad:#fb7185;   --tw-bad-bg:rgba(251,113,133,.12);
  --tw-night:#08080c;
  --tw-grad:linear-gradient(92deg,#7d9bff 0%,#ac94ff 50%,#ff86bf 100%);
  --tw-shadow-sm:0 1px 0 rgba(255,255,255,.04) inset,0 2px 8px rgba(0,0,0,.4);
  --tw-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -10px rgba(0,0,0,.6),0 30px 60px -30px rgba(0,0,0,.7);
  --tw-shadow-lg:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -20px rgba(0,0,0,.75),0 50px 120px -40px rgba(107,139,255,.28);
  --bs-primary:#6b8bff;--bs-primary-rgb:107,139,255;
  --bs-link-color:#8ea6ff;--bs-link-color-rgb:142,166,255;--bs-link-hover-color:#aabdff;--bs-link-hover-color-rgb:170,189,255;
  --bs-focus-ring-color:rgba(107,139,255,.4);
  color-scheme:dark;
}
[data-bs-theme="dark"] ::selection{background:rgba(107,139,255,.35)}
[data-bs-theme="dark"] .tw-nav{background:rgba(13,13,18,.72);border-bottom-color:rgba(255,255,255,.08)}
[data-bs-theme="dark"] .tw-nav.is-scrolled{background:rgba(13,13,18,.86);box-shadow:0 1px 0 rgba(255,255,255,.04),0 10px 30px -18px rgba(0,0,0,.8)}
[data-bs-theme="dark"] .tw-glow::before{background:
    radial-gradient(40% 45% at 18% 20%,rgba(107,139,255,.20),transparent 70%),
    radial-gradient(35% 40% at 85% 10%,rgba(172,148,255,.18),transparent 70%),
    radial-gradient(40% 40% at 70% 85%,rgba(255,134,191,.10),transparent 70%)}
[data-bs-theme="dark"] .tw-white{background:#111118}
[data-bs-theme="dark"] .tw-card{border:1px solid rgba(255,255,255,.06)}
[data-bs-theme="dark"] .tw-card-tint{background:linear-gradient(160deg,#1b1b2e 0%,#1d1a2c 55%,#16161e 100%)}
[data-bs-theme="dark"] .tw-card-flat{border-color:var(--tw-line-soft)}
[data-bs-theme="dark"] .tw-dark{border-block:1px solid rgba(255,255,255,.05)}
[data-bs-theme="dark"] .tw-pill{background:rgba(255,255,255,.06);border-color:var(--tw-line)}
[data-bs-theme="dark"] .tw-badge-soon{background:rgba(255,159,67,.14);color:#ffb870}
[data-bs-theme="dark"] .tw-note{background:rgba(255,159,67,.12);color:#ffc58f}
[data-bs-theme="dark"] .tw-icon{background:rgba(107,139,255,.14)}
[data-bs-theme="dark"] .btn-tw-ghost{--bs-btn-border-color:rgba(107,139,255,.45);--bs-btn-hover-bg:rgba(107,139,255,.1);--bs-btn-active-bg:rgba(107,139,255,.16)}
/* test a chat */
[data-bs-theme="dark"] .tw-opt{background:#1c1c26;border-color:var(--tw-line-soft)}
[data-bs-theme="dark"] .tw-opt .k{background:#24242f;border-color:var(--tw-line)}
[data-bs-theme="dark"] button.tw-opt:hover{background:#21212c;border-color:rgba(107,139,255,.5)}
[data-bs-theme="dark"] .tw-opt.is-right{color:#86efac}
[data-bs-theme="dark"] .tw-opt.is-wrong{color:#fda4af}
[data-bs-theme="dark"] .tw-opt.is-right .k,[data-bs-theme="dark"] .tw-opt.is-wrong .k{color:#0d0d12}
[data-bs-theme="dark"] .tw-explain{background:linear-gradient(160deg,rgba(107,139,255,.12),rgba(172,148,255,.10));border-color:rgba(172,148,255,.25)}
[data-bs-theme="dark"] .tw-explain b{color:#b9a8ff}
[data-bs-theme="dark"] .tw-bub.ai{background:#22222d}
[data-bs-theme="dark"] .tw-chip{background:transparent;border-color:rgba(107,139,255,.45);color:#9fb3ff}
[data-bs-theme="dark"] .tw-chip:hover{background:rgba(107,139,255,.1)}
[data-bs-theme="dark"] .tw-dots i{background:#6e6e7e}
/* přepínače, úrovně, štítky */
[data-bs-theme="dark"] .tw-seg{background:rgba(255,255,255,.07)}
[data-bs-theme="dark"] .tw-seg button.is-on,[data-bs-theme="dark"] .tw-dark .tw-seg button.is-on{background:#2c2c38;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 3px 10px -2px rgba(0,0,0,.6)}
[data-bs-theme="dark"] .tw-level.is-done{background:#1b1d30;border-color:rgba(107,139,255,.3)}
[data-bs-theme="dark"] .tw-tag{background:#22222d}
[data-bs-theme="dark"] .tw-flow{border-color:var(--tw-line-soft)}
/* telefon */
[data-bs-theme="dark"] .tw-screen{background:#111118}
[data-bs-theme="dark"] .tw-scr .fld{background:#1c1c26}
[data-bs-theme="dark"] .tw-scr .bdg.buy{background:rgba(107,139,255,.16)}
/* formuláře */
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background-color:#1a1a23;border-color:var(--tw-line);color:var(--tw-ink)}
[data-bs-theme="dark"] .form-control::placeholder{color:#6f6f7e}
[data-bs-theme="dark"] .form-control:focus{background-color:#1d1d27;box-shadow:0 0 0 4px rgba(107,139,255,.22)}
[data-bs-theme="dark"] .form-check-input{background-color:#1a1a23;border-color:#4a4a58}
[data-bs-theme="dark"] .form-check-input:checked{background-color:var(--tw-accent);border-color:var(--tw-accent)}
[data-bs-theme="dark"] .tw-fieldset{background:#13131a}
[data-bs-theme="dark"] .tw-choice span{background:#1a1a23}
[data-bs-theme="dark"] .tw-choice input:checked+span{background:#f2f2f5;border-color:#f2f2f5;color:#0d0d12}
/* časté otázky, zdroje, právní stránky, patička */
[data-bs-theme="dark"] .tw-faq .accordion-item{border-bottom-color:var(--tw-line)!important}
[data-bs-theme="dark"] .tw-faq .accordion-button{background:transparent}
[data-bs-theme="dark"] .tw-src{border-color:var(--tw-line-soft)}
[data-bs-theme="dark"] .tw-src .accordion-button{color:var(--tw-ink)}
[data-bs-theme="dark"] .tw-src .accordion-button .lic{background:#24242f}
[data-bs-theme="dark"] .tw-toc a:hover,[data-bs-theme="dark"] .tw-toc a.active{background:#1c1c26}
@media (max-width:991.98px){[data-bs-theme="dark"] .tw-toc a{background:#1a1a23}}
[data-bs-theme="dark"] .tw-marquee{background:#111118}
[data-bs-theme="dark"] .tw-footer{background:#0b0b10}
[data-bs-theme="dark"] .navbar-toggler .tw-burger::before,[data-bs-theme="dark"] .navbar-toggler .tw-burger::after{background:var(--tw-ink)}
@media (prefers-reduced-motion:reduce){.tw-theme svg{transition:opacity .15s linear!important}}
[data-bs-theme="dark"] .btn-tw-light{--bs-btn-color:#16161d;--bs-btn-hover-color:#16161d;--bs-btn-active-color:#16161d;--bs-btn-bg:#f2f2f5;--bs-btn-border-color:#f2f2f5}

/* 23) PROFILY (rodina) ---------------------------------------------------- */
.tw-avatar{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;color:#fff;font-size:1.75rem;font-weight:700;margin:0 auto;
  box-shadow:var(--tw-shadow-sm);transition:transform .25s var(--tw-ease-out),box-shadow .25s var(--tw-ease-out)}
.tw-avatar.is-on{box-shadow:0 0 0 3px var(--tw-surface),0 0 0 5px var(--tw-accent),var(--tw-shadow)}
.tw-avatar-add{background:var(--tw-bg);color:var(--tw-muted);border:2px dashed var(--tw-line);box-shadow:none;font-weight:400}
/* velké mezery mezi sloupci jen na širokých displejích – na mobilu by přetékaly */
@media (max-width:991.98px){.row.g-5{--bs-gutter-x:1.5rem}}
html{overflow-x:clip}

/* 24) ŠTÍTEK „PŘIPRAVUJEME“ (řídí ho FEATURES v 3wlearn.js) --------------- */
.tw-soon-auto{margin-left:.5rem;vertical-align:middle;font-size:.6875rem;letter-spacing:.01em;position:relative;top:-.1em}
h1 .tw-soon-auto,h2 .tw-soon-auto{font-size:.8125rem;top:-.35em}
.tw-tag .tw-soon-auto,li .tw-soon-auto{font-size:.625rem;padding:.1rem .45rem}

/* 25) ÚROVNĚ A1–C2: šest tlačítek -------------------------------------- */
.tw-levels{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:991.98px){.tw-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:575.98px){.tw-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 26) MAPA MÍST ----------------------------------------------------------- */
.tw-map{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:var(--tw-r-lg);overflow:hidden;box-shadow:var(--tw-shadow);
  background:
    radial-gradient(40% 50% at 20% 25%,rgba(47,91,234,.10),transparent 70%),
    radial-gradient(40% 50% at 80% 75%,rgba(124,92,255,.10),transparent 70%),
    linear-gradient(var(--tw-line-soft) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,var(--tw-line-soft) 1px,transparent 1px) 0 0/40px 40px,
    var(--tw-surface)}
.tw-map-roads{position:absolute;inset:0;width:100%;height:100%}
.tw-map-roads path{fill:none;stroke:var(--tw-bar);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 7}
.tw-pin{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem .4rem .45rem;border-radius:var(--tw-pill);
  border:1px solid var(--tw-line);background:var(--tw-surface);color:var(--tw-ink);font-weight:600;font-size:.8125rem;box-shadow:var(--tw-shadow-sm);white-space:nowrap;
  transition:transform .2s var(--tw-ease-out),box-shadow .25s var(--tw-ease-out),border-color .25s var(--tw-ease-out)}
.tw-pin .i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tw-bg);font-size:.875rem}
.tw-pin:hover{box-shadow:var(--tw-shadow)}
.tw-pin:active{transform:translate(-50%,-50%) scale(.95);transition-duration:.08s}
.tw-pin.is-done{border-color:rgba(31,157,85,.5);box-shadow:0 0 0 4px rgba(31,157,85,.12),0 0 24px rgba(31,157,85,.35)}
.tw-pin.is-done .i{background:var(--tw-good);color:#fff}
.tw-pin.is-part{border-color:rgba(47,91,234,.45)}
.tw-pin.is-part .i{background:rgba(47,91,234,.12)}
.tw-pin.is-new{opacity:.85}
.tw-pin.is-sel{border-color:var(--tw-accent);box-shadow:0 0 0 3px var(--tw-accent),var(--tw-shadow);z-index:2}
@media (max-width:575.98px){.tw-map{aspect-ratio:4/5}.tw-pin .t{display:none}.tw-pin{padding:.3rem}}
.tw-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--tw-line);vertical-align:middle;margin-right:.2rem}
.tw-dot.is-done{background:var(--tw-good);box-shadow:0 0 8px rgba(31,157,85,.6)}
.tw-dot.is-part{background:var(--tw-accent)}
.tw-map-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tw-bg);font-size:1.6rem}
.tw-level-chip{font-size:.75rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--tw-pill);background:rgba(47,91,234,.1);color:var(--tw-accent)}
.tw-map-dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;font-size:.9375rem;margin:0}
.tw-map-dl dt{color:var(--tw-muted);font-weight:500}
.tw-map-dl dd{margin:0;color:var(--tw-ink-2)}

/* 27) RYCHLÉ KOLO: zvuk, odezva, „Proč?“ ---------------------------------- */
.tw-sound-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1rem;max-width:520px;padding:.85rem 1.1rem;border-radius:20px;background:var(--tw-bg);border:1px solid var(--tw-line-soft);font-weight:500}
.tw-sound-ask.is-answered{display:none}
.tw-sound-btn{border:0;background:transparent;font-size:1rem;line-height:1;padding:.2rem;border-radius:8px}
.tw-sound-btn:hover{background:var(--tw-bg)}
.tw-why{font-weight:700}
.tw-src-note{margin-top:.4rem;font-size:.75rem;color:var(--tw-muted)}
.tw-bub.ai .tw-src-note{opacity:.9}
.tw-input.is-right{border-color:var(--tw-good);background-color:var(--tw-good-bg)}
.tw-input.is-wrong{border-color:var(--tw-bad);background-color:var(--tw-bad-bg)}
.tw-ok{color:var(--tw-good);font-weight:600}
.tw-no-text{color:var(--tw-bad);font-weight:600}
.tw-wait{color:var(--tw-accent);font-weight:600}
.tw-no{color:var(--tw-muted)}
.tw-yes{animation:twYes .5s var(--tw-ease-out)}
.tw-no{}
.tw-opt.tw-no,.tw-input.tw-no{animation:twShake .35s var(--tw-ease-out)}
@keyframes twYes{0%{transform:scale(1)}40%{transform:scale(1.03);box-shadow:0 0 0 6px rgba(31,157,85,.18)}100%{transform:scale(1)}}
@keyframes twShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tw-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--tw-good);pointer-events:none;animation:twSpark .65s var(--tw-ease-out) forwards}
.tw-spark:nth-child(3n){background:var(--tw-accent)}.tw-spark:nth-child(3n+1){background:#ff9f43}
@keyframes twSpark{from{opacity:1;transform:rotate(var(--a)) translateX(0)}to{opacity:0;transform:rotate(var(--a)) translateX(42px)}}

/* 28) UPOZORNĚNÍ (náhled motivace) --------------------------------------- */
.tw-notif{max-width:380px;padding:1rem 1.1rem;border-radius:22px;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--tw-line-soft);box-shadow:var(--tw-shadow-lg);min-height:96px}
.tw-notif-app{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--tw-muted);margin-bottom:.35rem}
.tw-logo-sm{width:18px;height:18px;border-radius:5px}
.tw-notif-body{font-weight:500;color:var(--tw-ink);line-height:1.4}
.tw-notif .tw-soon-auto{margin:.6rem 0 0}

/* 29) FIRMY: přehled školení --------------------------------------------- */
.tw-firm-row{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--tw-line-soft);font-size:.9375rem}
.tw-firm-row:last-of-type{border-bottom:0}

/* tmavý režim pro nové prvky */
[data-bs-theme="dark"] .tw-notif{background:rgba(30,30,40,.7)}
[data-bs-theme="dark"] .tw-pin.is-done{box-shadow:0 0 0 4px rgba(74,222,128,.14),0 0 26px rgba(74,222,128,.35)}
[data-bs-theme="dark"] .tw-level-chip{background:rgba(107,139,255,.16)}
@media (prefers-reduced-motion:reduce){.tw-yes,.tw-opt.tw-no,.tw-input.tw-no,.tw-spark{animation:none!important}}
.tw-card.tw-dark p{color:var(--tw-night-muted)}
.tw-card.tw-dark .tw-muted{color:var(--tw-night-muted)!important}

/* ===== 30. Mapa míst – vložená interaktivní mapa ===== */
.tw-mapframe{position:relative;height:clamp(460px,68vh,680px);border-radius:var(--tw-r-lg);overflow:hidden;box-shadow:var(--tw-shadow);border:1px solid var(--tw-line-soft);background:var(--tw-surface)}
.tw-mapframe iframe{display:block;width:100%;height:100%;border:0}
.tw-mapframe-open{display:none}
@media (max-width:767.98px){
  .tw-mapframe{height:440px}
  .tw-mapframe-open{display:flex;position:absolute;inset:0;align-items:flex-end;justify-content:center;padding-bottom:1.25rem;text-decoration:none;background:linear-gradient(to top,rgba(0,0,0,.25),transparent 45%)}
}

/* ===== 31. Štítky „Připravujeme“ jen pro tvůrce (?tvurce) ===== */
html:not(.tw-creator) .tw-badge-soon{display:none!important}

/* ===== 32. Podmenu stránky předmětu ===== */
.tw-subnav{position:sticky;top:var(--tw-nav-h);z-index:1010;background:color-mix(in srgb,var(--tw-bg) 82%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--tw-line-soft)}
.tw-subnav .container{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding-top:.5rem;padding-bottom:.5rem}
.tw-subnav .container::-webkit-scrollbar{display:none}
.tw-subnav a{flex:none;padding:.35rem .8rem;border-radius:var(--tw-pill);font-size:.875rem;font-weight:500;color:var(--tw-muted);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.tw-subnav a:hover,.tw-subnav a.is-on{color:var(--tw-ink);background:var(--tw-surface);box-shadow:var(--tw-shadow-sm)}
[id]{scroll-margin-top:calc(var(--tw-nav-h) + 56px)}

/* ===== 33. Úvod: karusel ukázkových otázek (3 předměty) ===== */
.tw-qcar-wrap{max-width:560px;margin:0 auto;padding:0 6%}
.tw-qcar{display:grid;position:relative;touch-action:pan-y}
.tw-qc{grid-area:1/1;width:100%;max-width:440px;justify-self:center;align-self:center;border-radius:var(--tw-r-lg);overflow:hidden;background:var(--tw-surface);box-shadow:var(--tw-shadow-lg);
  transition:transform .65s cubic-bezier(.22,.8,.22,1),opacity .65s ease,filter .65s ease;will-change:transform}
.tw-qc .tw-quiz{box-shadow:none;border-radius:0}
.tw-qc-band{background:var(--c);color:#fff;text-align:center;font-weight:600;font-size:1.05rem;padding:.7rem 1rem;letter-spacing:-.01em}
.tw-qc[data-pos="center"]{transform:translateX(0) scale(1);z-index:3}
.tw-qc[data-pos="left"]{transform:translateX(-30%) scale(.78);z-index:1;opacity:.92;cursor:pointer}
.tw-qc[data-pos="right"]{transform:translateX(30%) scale(.78);z-index:1;opacity:.92;cursor:pointer}
.tw-qc[data-pos="left"]:hover{transform:translateX(-33%) scale(.8)}
.tw-qc[data-pos="right"]:hover{transform:translateX(33%) scale(.8)}
.tw-qc[data-pos="left"] .tw-quiz,.tw-qc[data-pos="right"] .tw-quiz{pointer-events:none}
.tw-qc:focus-visible{outline:3px solid var(--tw-accent);outline-offset:4px}
@media (max-width:575.98px){
  .tw-qcar-wrap{padding:0 10%}
  .tw-qc[data-pos="left"]{transform:translateX(-22%) scale(.84)}
  .tw-qc[data-pos="right"]{transform:translateX(22%) scale(.84)}
}
@media (prefers-reduced-motion:reduce){.tw-qc{transition:none}}