/* ==========================================================================
   TWEEEK — stylopis, třetí generace
   Psáno od nuly. Předchozí generace byla „papír a vlasovky": světlá,
   editorial, ale pořád rozhraní poskládané z ploch. Tahle je NOČNÍ PŘENOS
   LIGY — identita, ne šablona:

   · Tma je výchozí. E-shopy se hrají večer; skóre svítí ze tmy.
   · Typografie je rozhraní. Číslo nese velikost podle důležitosti,
     ne rámeček podle šablony. Nic nebydlí v krabici — krabice smí být
     jen to, co opravdu pluje NAD stránkou (výběr, dialog, oznámení).
   · Limetka #E5FA6A je podpis: kóta před názvem sekce, jednička v lize,
     objednávky v grafu, jedna hlavní akce. Nikdy dekorace.
   · Pohyb říká, co se stalo: čísla dojíždějí, čáry se kreslí, řádky
     ligy kloužou na nová místa. Nic neposkakuje pro radost.

   SYSTÉM
   · písmo: Archivo. Stupnice: mikro 11 / text 15.5 / objekt 20 /
     sekce 28 / titul 40–64 / displej 46–96 / skóre 64–150.
   · mezery: násobky 8; mezi sekcemi 96–128, uvnitř sekce 16–32.
   · poloměry: 999 kapsle, 14 plovoucí plochy, 10 drobnosti.
   · stíny: jen plovoucí vrstva. Stránka sama je plochá.
   · tempo: cubic-bezier(0.22, 1, 0.36, 1); najetí 0.2 s, vstup 0.5–0.7 s,
     počítadla 0.62 s, pružina 0.36 s.
   ========================================================================== */

/* ================================================================== tokeny */

:root {
  /* Papír je výchozí: hustý denní nástroj. Off-white s teplým nádechem,
     inkoust, limetka jako podpis. */
  --papir: #faf9f6;
  --papir-2: #f1efe9;             /* najetí, vstupy */
  --papir-3: #e9e6de;             /* stisk */
  --inkoust: #0b0b0c;
  --tlumene: #6b6b64;
  --slabe: #a3a39a;
  --vlasovka: rgba(11, 11, 12, 0.09);
  --vlasovka-2: rgba(11, 11, 12, 0.2);

  --limeta: #d8f24a;
  --na-limete: #0b0b0c;

  --nahoru: #0f9d5f;
  --dolu: #e0353c;
  --pozor-b: #c07508;

  /* Plovoucí vrstva — jediné místo, kde existuje „krabice". */
  --plocha: #ffffff;
  --plocha-lem: rgba(11, 11, 12, 0.08);
  --stin-plovouci: 0 24px 60px -24px rgba(11, 11, 12, 0.28), 0 2px 8px rgba(11, 11, 12, 0.08);

  --pismo: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tempo: cubic-bezier(0.22, 1, 0.36, 1);
  --sloupec: 1560px;
  --okraj: 48px;

  color-scheme: light;
}

/* Tma je záměr, ne negativ: noční přenos ligy — skóre svítí ze tmy. */
:root[data-tema="tmavy"] {
  --papir: #0b0b0c;
  --papir-2: #131315;
  --papir-3: #1a1a1d;
  --inkoust: #f5f3ee;
  --tlumene: #a8a8a0;
  --slabe: #63635c;
  --vlasovka: rgba(245, 243, 238, 0.09);
  --vlasovka-2: rgba(245, 243, 238, 0.22);
  --limeta: #e5fa6a;
  --nahoru: #4ade80;
  --dolu: #ff6b6b;
  --pozor-b: #e8a13c;
  --plocha: #151517;
  --plocha-lem: rgba(245, 243, 238, 0.1);
  --stin-plovouci: 0 24px 70px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetly"]) {
    --papir: #0b0b0c;
    --papir-2: #131315;
    --papir-3: #1a1a1d;
    --inkoust: #f5f3ee;
    --tlumene: #a8a8a0;
    --slabe: #63635c;
    --vlasovka: rgba(245, 243, 238, 0.09);
    --vlasovka-2: rgba(245, 243, 238, 0.22);
    --limeta: #e5fa6a;
    --nahoru: #4ade80;
    --dolu: #ff6b6b;
    --pozor-b: #e8a13c;
    --plocha: #151517;
    --plocha-lem: rgba(245, 243, 238, 0.1);
    --stin-plovouci: 0 24px 70px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

/* Přemostění na staré názvy, ať stránky, které ještě jedou na styles.css
   (napojení, nastavení, profil, obchod, průvodce), převezmou barvy. */
:root {
  --pozadi: var(--papir); --povrch: var(--papir); --povrch-2: var(--papir-2);
  --linka: var(--vlasovka); --linka-2: var(--vlasovka-2);
  --text: var(--inkoust); --text-2: var(--tlumene); --text-3: var(--slabe); --text-4: var(--slabe);
  --akcent: var(--limeta); --akcent-svetly: var(--limeta); --na-akcentu: var(--na-limete);
  --dobre: var(--nahoru); --spatne: var(--dolu); --pozor: var(--pozor-b);
  --bg: var(--papir); --surface: var(--papir); --ink: var(--inkoust);
  --line: var(--vlasovka); --line-2: var(--vlasovka-2); --dim: var(--slabe);
  --panel: transparent; --panel-lem: var(--vlasovka);
  --hloubka-1: transparent; --hloubka-2: transparent;
}

/* Barvy sérií grafu. Objednávky jsou limetkové — jsou to body do skóre.
   Starý stylopis si je přepisuje na .chart-wrap, proto tady taky. */
.chart-wrap {
  --c-bal: var(--inkoust);
  --c-ads: var(--slabe);
  --c-ord: #9cb300;
}
:root[data-tema="tmavy"] .chart-wrap { --c-ord: var(--limeta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetly"]) .chart-wrap { --c-ord: var(--limeta); }
}

/* ================================================================== základ */

body { background: var(--papir); color: var(--inkoust); font-family: var(--pismo); }
::selection { background: var(--limeta); color: var(--na-limete); }

.tw-t-mikro {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slabe);
}

/* Staré oddělovací čáry z šablon. Sekce teď dělí vzduch, ne linky. */
.tw-cara { display: none; }

/* ================================================================== lišta */

.shell { display: block; min-height: 100vh; }
.hlavni { display: block; }

.tw-navbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 30px;
  height: 64px; padding: 0 var(--okraj);
  background: color-mix(in srgb, var(--papir) 84%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--vlasovka);
}
.tw-nb-znacka { display: flex; align-items: center; flex: none; text-decoration: none; color: inherit; }
.tw-nb-znacka svg { height: 19px; width: auto; display: block; fill: currentColor; }

.tw-nb-odkazy { display: flex; align-items: center; gap: 2px; }
.tw-nb-odkazy a {
  position: relative; padding: 8px 13px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--tlumene); text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.tw-nb-odkazy a:hover { color: var(--inkoust); background: var(--papir-2); }
.tw-nb-odkazy a[aria-current] { color: var(--inkoust); font-weight: 600; }
.tw-nb-odkazy a[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--limeta); transform: translateX(-50%);
}

.tw-nb-vpravo { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tw-nb-motiv {
  width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--tlumene); font-size: 14px; line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.tw-nb-motiv:hover { background: var(--papir-2); color: var(--inkoust); }

.tw-kdo { position: relative; }
.tw-nb-kdo {
  display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: inherit; font-family: var(--pismo);
  transition: background 0.2s ease;
}
.tw-nb-kdo:hover { background: var(--papir-2); }
.tw-nb-kdo b { font-size: 13px; font-weight: 600; }
.tw-nb-kdo .tw-av { width: 27px; height: 27px; border-radius: 50%; overflow: hidden; flex: none; }
.tw-nb-kdo .tw-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-nb-kdo .tw-av span {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--papir-3); font-size: 10px; font-weight: 700; color: var(--tlumene);
}
.tw-kdo-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 195px; padding: 6px; border-radius: 14px;
  background: var(--plocha); border: 1px solid var(--plocha-lem);
  box-shadow: var(--stin-plovouci);
  transform-origin: top right;
}
.tw-kdo-panel a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--inkoust); text-decoration: none;
  transition: background 0.16s ease;
}
.tw-kdo-panel a:hover { background: var(--papir-2); }
.tw-kdo-panel a[aria-current] { font-weight: 700; }
.tw-kdo-panel .tw-kdo-odchod { color: var(--tlumene); margin-top: 6px; position: relative; }
.tw-kdo-panel .tw-kdo-odchod::before {
  content: ""; position: absolute; top: -3px; left: 12px; right: 12px; height: 1px;
  background: var(--vlasovka);
}

/* --- přepínač obchodů: jádro aplikace ------------------------------- */

.tw-vyber { position: relative; flex: none; }
.tw-vyber-tl {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 4px 12px 4px 4px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; font-family: var(--pismo); color: inherit;
  transition: background 0.2s ease;
}
.tw-vyber-tl:hover { background: var(--papir-2); }
.tw-vyber-jm {
  font-size: 13.5px; font-weight: 650; max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-vyber-tl > svg { width: 10px; flex: none; color: var(--slabe); transition: transform 0.28s var(--tempo); }
.tw-vyber-tl[aria-expanded="true"] > svg { transform: rotate(180deg); }

.tw-vyber-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 335px; padding: 6px; border-radius: 16px;
  background: var(--plocha); border: 1px solid var(--plocha-lem);
  box-shadow: var(--stin-plovouci);
  transform-origin: top left;
}
.tw-ob-radek, .tw-ob-pridat {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; width: 100%; padding: 10px 12px; border: 0;
  border-radius: 11px; background: none; cursor: pointer; text-align: left;
  font-family: var(--pismo); color: inherit; text-decoration: none;
  transition: background 0.16s ease;
}
.tw-ob-radek:hover, .tw-ob-pridat:hover { background: var(--papir-2); }
.tw-ob-radek[aria-pressed="true"] { background: var(--papir-2); box-shadow: inset 2px 0 0 var(--limeta); }
.tw-ob-tx { min-width: 0; }
.tw-ob-tx b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-ob-tx small { display: block; font-size: 12px; color: var(--slabe); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-ob-cisla { display: flex; align-items: center; gap: 8px; }
.tw-ob-cisla b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-ob-stav { width: 7px; height: 7px; border-radius: 50%; background: var(--slabe); }
.tw-ob-stav.ok { background: var(--nahoru); }
.tw-ob-stav.zle { background: var(--dolu); }
.tw-ob-pridat { margin-top: 6px; position: relative; }
.tw-ob-pridat::before { content: ""; position: absolute; top: -3px; left: 12px; right: 12px; height: 1px; background: var(--vlasovka); }

.tw-ob-znak {
  width: 36px; height: 36px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; flex: none;
  background: var(--papir-3);
  font-size: 13px; font-weight: 700;
}
.tw-ob-znak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-ob-znak.plus { color: var(--slabe); font-size: 17px; font-weight: 500; }
.tw-vyber-tl .tw-ob-znak { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }

.tw-tabbar { display: none; }

/* ======================================================== stránka a rytmus */

.tw-strana { max-width: var(--sloupec); margin: 0 auto; padding: 0 var(--okraj) 140px; }
.tw-strana.uzsi { max-width: 1180px; }

.tw-hl-radek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 44px 0 0; flex-wrap: wrap;
}

/* Limetková kóta — podpis před popiskem bloku. Tam, kde jiné produkty
   kreslí rámeček, Tweeek udělá značku. */
.tw-hl-radek > .tw-t-mikro::before,
.tw-zpas-hlava .tw-t-mikro::before,
.tw-poz-hlavni > .tw-t-mikro::before {
  content: ""; display: inline-block; width: 18px; height: 3px;
  background: var(--limeta); margin-right: 10px; vertical-align: 2px;
}

.tw-titul-radek {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 20px 0 40px;
}
.tw-titul { font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.tw-ziva {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--nahoru); margin-left: 14px; vertical-align: 8px;
}
.tw-prepinace { display: flex; gap: 10px; flex-wrap: wrap; }

.tw-sekce-hlava { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 96px 0 26px; }
.tw-sekce-hlava h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.tw-sekce-hlava h2::before {
  content: ""; display: inline-block; width: 20px; height: 4px;
  background: var(--limeta); margin-right: 12px; vertical-align: 6px;
}
.tw-sekce-hlava .tw-pozn { font-size: 13px; color: var(--slabe); }
.tw-sekce-hlava .tw-znamka { margin-left: auto; }
.tw-pozn.odsaz { display: block; margin-top: 20px; font-size: 13px; color: var(--slabe); line-height: 1.55; max-width: 72ch; }

/* ================================================================ ovládání */

.tw-akce {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px; flex: none;
  height: 40px; padding: 0 18px; border: 1px solid var(--vlasovka-2); border-radius: 999px;
  background: none; color: var(--inkoust); font-family: var(--pismo);
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.14s var(--tempo);
}
.tw-akce:hover { background: var(--inkoust); color: var(--papir); border-color: var(--inkoust); }
.tw-akce:active { transform: scale(0.96); }
.tw-akce.hlavni { background: var(--limeta); border-color: var(--limeta); color: var(--na-limete); }
.tw-akce.hlavni:hover { background: var(--limeta); color: var(--na-limete); border-color: var(--limeta); filter: brightness(1.07); }
.tw-akce.velka { height: 52px; padding: 0 28px; font-size: 15.5px; }

.tw-pod-akce {
  position: relative; background: none; border: 0; padding: 2px 0 5px; cursor: pointer;
  font-family: var(--pismo); font-size: 14.5px; font-weight: 600; color: var(--inkoust);
  text-decoration: none; white-space: nowrap;
}
.tw-pod-akce::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--limeta); transform-origin: left;
  transition: transform 0.3s var(--tempo);
}
.tw-pod-akce:hover::after { animation: pretah 0.44s var(--tempo); }
@keyframes pretah {
  0% { transform: scaleX(1); transform-origin: right; }
  48% { transform: scaleX(0); transform-origin: right; }
  52% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* Přepínače období a metrik. Aktivní volba je obrácená — inkoust na
   papíru; ve tmě tedy svítí světlý štítek. Žádný rámeček okolo skupiny. */
.seg-tabs, .tw-obdobi, .chips {
  display: flex; gap: 2px; padding: 0; border: 0; background: none; box-shadow: none;
}
.seg-tabs button, .tw-obdobi button, .chips button {
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--slabe); font-family: var(--pismo);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.seg-tabs button:hover, .tw-obdobi button:hover, .chips button:hover { color: var(--inkoust); background: var(--papir-2); }
.seg-tabs button[aria-pressed="true"], .tw-obdobi button[aria-pressed="true"],
.chips button[aria-pressed="true"], .seg-tabs button.active {
  color: var(--papir); background: var(--inkoust); font-weight: 650;
}

.tw-rady { margin: 26px 0 0; padding: 0; list-style: none; max-width: 74ch; }
.tw-rady li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px;
  font-size: 15.5px; line-height: 1.55; color: var(--tlumene);
  padding: 12px 0;
}
.tw-rady li i { font-style: normal; color: var(--slabe); font-variant-numeric: tabular-nums; }

/* ================================================================= známky */

.tw-znamka {
  display: inline-flex; align-items: center; flex: none;
  font-size: 10px; font-weight: 650; letter-spacing: 0.09em;
  padding: 4px 9px; border-radius: 999px; color: var(--tlumene);
  border: 1px solid var(--vlasovka); white-space: nowrap;
}
.tw-znamka.overeno { color: var(--nahoru); border-color: transparent; background: color-mix(in srgb, var(--nahoru) 13%, transparent); }
.tw-znamka.atribuce { color: var(--pozor-b); border-color: transparent; background: color-mix(in srgb, var(--pozor-b) 13%, transparent); }
.tw-znamka.malo { color: var(--slabe); }
.tw-znamka.novy { color: var(--na-limete); background: var(--limeta); border-color: var(--limeta); }

.tw-zmena {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tlumene); white-space: nowrap;
}
.tw-zmena.nahoru { color: var(--nahoru); }
.tw-zmena.dolu { color: var(--dolu); }

.tw-pohyb {
  width: 36px; flex: none; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--slabe); white-space: nowrap;
}
.tw-pohyb.nahoru { color: var(--nahoru); }
.tw-pohyb.dolu { color: var(--dolu); }

/* =========================================================== Domů: závěr */

.tw-zaver { padding: 40px 0 0; }
.tw-zaver h1 {
  font-size: clamp(46px, 6vw, 96px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.96; max-width: 16ch;
}
.tw-zaver h1 .tw-druhy { color: var(--slabe); display: block; }
.tw-zaver[data-stav="spatne"] h1 .tw-prvni { color: var(--dolu); }
.tw-zaver[data-stav="dobre"] h1 .tw-prvni { color: var(--nahoru); }

.tw-duvod {
  margin-top: 26px; font-size: 17px; line-height: 1.6; color: var(--tlumene);
  max-width: 60ch;
}
.tw-duvod b { color: var(--inkoust); font-weight: 600; }
.tw-zaver-akce { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }

.tw-jistota { margin-top: 40px; max-width: 380px; }
.tw-jistota-radek { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.tw-jistota-radek b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-jistota-drah { height: 3px; background: var(--vlasovka); border-radius: 2px; overflow: hidden; }
.tw-jistota-drah i { display: block; height: 100%; background: var(--limeta); border-radius: 2px; }

/* ------------------------------------------------- pás „právě teď" */

.tw-zpas { margin-top: 34px; }
.tw-zpas-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 6px; }
.tw-zpas-hlava .tw-pod-akce { font-size: 13px; }
.tw-zpas-drah {
  display: flex; align-items: baseline; gap: 0; overflow-x: auto;
  margin: 0 calc(var(--okraj) * -1); padding: 8px var(--okraj) 10px;
  scrollbar-width: none;
}
.tw-zpas-drah::-webkit-scrollbar { display: none; }

/* Události nejsou kapsle — je to jeden běžící řádek a položky dělí
   limetková tečka. Ticker, ne sada čipů. */
.tw-zk {
  flex: none; display: flex; align-items: baseline; gap: 9px;
  padding: 4px 0; color: inherit; text-decoration: none; font-size: 14px;
  background: none; box-shadow: none; border-radius: 0;
}
.tw-zk + .tw-zk::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--limeta); align-self: center; margin: 0 22px;
  flex: none; opacity: 0.7;
}
a.tw-zk:hover .tw-zk-tx { color: var(--inkoust); }
.tw-zk-cas { font-size: 11px; color: var(--slabe); font-variant-numeric: tabular-nums; }
.tw-zk-tx { font-weight: 500; color: var(--tlumene); white-space: nowrap; transition: color 0.2s ease; }
.tw-zk-c { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-zk-c.nahoru { color: var(--nahoru); }
.tw-zk-c.dolu { color: var(--dolu); }

/* -------------------------------------------------------------- graf */

/* Graf leží přímo na stránce, přes celou šířku sloupce. Žádný rám,
   žádná bublina — odečet je pevný typografický řádek nad plátnem. */
.tw-graf-pas { margin-top: 96px; padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.tw-graf-hlava { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding: 0 0 4px; }
.tw-graf-hlava h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.03em; }
.tw-graf-hlava h2::before {
  content: ""; display: inline-block; width: 20px; height: 4px;
  background: var(--limeta); margin-right: 12px; vertical-align: 6px;
}
.tw-graf-hlava .tw-pozn { font-size: 13px; color: var(--slabe); }
.tw-graf-hlava .tw-klice { margin-left: auto; display: flex; gap: 20px; }
.tw-graf-hlava .tw-klice span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tlumene); }
.tw-graf-hlava .tw-klice i { width: 14px; height: 2px; border-radius: 2px; display: block; }

.tw-graf-pas .chart-wrap { position: relative; margin: 0 -12px; }
.chart .s-bal path.kresli { stroke-width: 3; }
.tip-box { display: none; }

.tw-odecet {
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap;
  padding: 12px 12px 8px; min-height: 50px;
}
.tw-od-kdy { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slabe); }
.tw-od-bal { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.tw-od-bal.nahoru { color: var(--nahoru); }
.tw-od-bal.dolu { color: var(--dolu); }
.tw-od-kus { font-size: 13px; color: var(--slabe); }
.tw-od-kus b { color: var(--tlumene); font-weight: 650; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- fakta */

/* Čísla bez dlaždic: popisek nahoře, číslo velké, kontext pod ním.
   Hierarchii dělá velikost, ne mřížka. */
.tw-fakta {
  display: flex; flex-wrap: wrap; gap: 40px 84px;
  margin-top: 96px; background: none; box-shadow: none; border-radius: 0; overflow: visible;
}
.tw-fakt { display: flex; flex-direction: column; gap: 10px; padding: 0; min-width: 150px; position: static; }
.tw-fakt-p { order: -1; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slabe); }
.tw-fakt-c {
  font-size: clamp(38px, 4.2vw, 60px); font-weight: 800; letter-spacing: -0.045em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tw-fakt-c.nahoru { color: var(--nahoru); }
.tw-fakt-c.dolu { color: var(--dolu); }
.tw-fakt-s { font-size: 13.5px; color: var(--slabe); line-height: 1.5; }
.tw-fakt-s b { font-weight: 600; color: var(--tlumene); }
.tw-fakt + .tw-fakt::before { display: none; }
.tw-fakta.ctyri { margin-top: 26px; }
.tw-fakta .jiskra { align-self: flex-start; }

/* --------------------------------------- objevy na Domů i v Objevit */

.tw-objev { margin-top: 8px; }
.tw-objev .tw-zpas-hlava { margin-top: 96px; margin-bottom: 22px; }
.tw-objev-rada { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 44px; }
.tw-objev-rada.velka { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* Produkt je typografický předmět, ne karta: jméno, velké číslo, jiskra.
   Kóta nahoře se na najetí protáhne a zezelená do limetky; odhalí se
   řádek navíc. */
.tw-prod {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 18px 0 14px; border-radius: 0; background: none; box-shadow: none;
  color: inherit; text-decoration: none;
  transition: transform 0.3s var(--tempo);
}
.tw-prod::before {
  content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px;
  background: var(--vlasovka-2); transition: width 0.35s var(--tempo), background 0.35s ease;
}
.tw-prod:hover { transform: translateY(-3px); box-shadow: none; }
.tw-prod:hover::before { width: 52px; background: var(--limeta); }
.tw-prod-jm {
  font-size: 20px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tw-prod-meta { font-size: 12.5px; color: var(--slabe); }
.tw-prod-spodek { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.tw-prod-spodek .jiskra { margin-left: auto; }
.tw-prod-ks { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tw-prod-vic {
  font-size: 12.5px; color: var(--slabe);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.35s var(--tempo), opacity 0.3s ease 0.05s, margin-top 0.35s var(--tempo);
}
.tw-prod:hover .tw-prod-vic { max-height: 40px; opacity: 1; margin-top: 4px; }

/* ------------------------------------------------------------- pozice */

.tw-poz {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 70px; align-items: center; margin-top: 110px;
}
.tw-poz-hlavni { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tw-poz-cislo {
  font-size: clamp(72px, 9vw, 150px); font-weight: 800; letter-spacing: -0.055em;
  line-height: 0.88; font-variant-numeric: tabular-nums;
}
.tw-poz-cislo.slabe { color: var(--slabe); }
.tw-poz-cislo small { font-size: 0.34em; font-weight: 700; color: var(--slabe); letter-spacing: -0.02em; }
.tw-poz .tw-jistota-drah { width: 100%; max-width: 320px; }
.tw-poz-okoli .tw-pod-akce { font-size: 13.5px; margin-top: 18px; display: inline-block; }
.tw-poz-r {
  display: grid; grid-template-columns: 56px 36px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 15px 0; font-size: 15px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.tw-poz-r.ja { font-weight: 650; box-shadow: inset 3px 0 0 var(--limeta); padding-left: 16px; background: none; }
.tw-poz-p { font-weight: 750; font-variant-numeric: tabular-nums; }
.tw-poz-jm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-poz-r > b { font-variant-numeric: tabular-nums; font-size: 16px; }

/* ------------------------------------------------------------- nálezy */

.tw-nalez {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 28px; align-items: start;
  padding: 26px 0; position: relative; border: 0; border-radius: 0; background: none; box-shadow: none;
  transition: padding-left 0.3s var(--tempo);
}
.tw-nalez::before {
  content: ""; position: absolute; left: -16px; top: 30px; width: 3px; height: 20px;
  background: var(--slabe); transform: scaleY(0); transform-origin: center;
  transition: transform 0.3s var(--tempo);
}
.tw-nalez[data-stav="spatne"]::before { background: var(--dolu); }
.tw-nalez[data-stav="pozor"]::before { background: var(--pozor-b); }
.tw-nalez[data-stav="dobre"]::before { background: var(--nahoru); }
.tw-nalez:hover { padding-left: 10px; background: none; box-shadow: none; }
.tw-nalez:hover::before { transform: scaleY(1); }
.tw-nalez-c { font-size: 13px; font-weight: 500; color: var(--slabe); font-variant-numeric: tabular-nums; padding-top: 4px; }
.tw-nalez-t { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.tw-nalez-t h3 { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; }
.tw-nalez-t p { font-size: 15px; line-height: 1.6; color: var(--tlumene); max-width: 76ch; }
.tw-nalez-s { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slabe); padding-top: 6px; }
.tw-nalez[data-stav="spatne"] .tw-nalez-s { color: var(--dolu); }
.tw-nalez[data-stav="pozor"] .tw-nalez-s { color: var(--pozor-b); }
.tw-nalez[data-stav="dobre"] .tw-nalez-s { color: var(--nahoru); }

/* ------------------------------------------------------------- spodek */

.tw-spodek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; align-items: start; margin-top: 110px; }
.tw-spodek h2 { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.tw-spodek h2::before {
  content: ""; display: inline-block; width: 16px; height: 3px;
  background: var(--limeta); margin-right: 10px; vertical-align: 3px;
}
.tw-obchod-r {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: inherit; font-family: var(--pismo);
  padding: 14px 0; border-radius: 0;
  transition: padding-left 0.28s var(--tempo);
}
.tw-obchod-r:hover { background: none; padding-left: 10px; }
.tw-obchod-r .tw-jm { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-obchod-r.aktivni .tw-jm {
  text-decoration: underline; text-decoration-color: var(--limeta);
  text-decoration-thickness: 2.5px; text-underline-offset: 5px;
}
.tw-obchod-r .tw-roas { font-size: 13px; color: var(--slabe); font-variant-numeric: tabular-nums; }
.tw-obchod-r .tw-bil { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.tw-obchod-r .tw-bil.nahoru { color: var(--nahoru); }
.tw-obchod-r .tw-bil.dolu { color: var(--dolu); }

.tw-rozpad-r {
  display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 0; font-size: 14px; border: 0;
}
.tw-rozpad-r > i { width: 6px; height: 6px; border-radius: 50%; }
.tw-rozpad-r > span { color: var(--tlumene); }
.tw-rozpad-r > b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ====================================================== Objevit: seznamy */

.tw-seznam-r {
  display: grid; grid-template-columns: 36px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px; align-items: center; padding: 17px 0;
  font-size: 15px; border: 0; border-radius: 0; background: none;
  transition: padding-left 0.25s var(--tempo);
}
.tw-seznam-r:hover { background: none; padding-left: 8px; }
.tw-seznam-c { font-size: 13px; font-weight: 500; color: var(--slabe); font-variant-numeric: tabular-nums; }
.tw-seznam-jm { font-weight: 650; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-seznam-jm small { display: block; font-size: 12px; font-weight: 400; color: var(--slabe); overflow: hidden; text-overflow: ellipsis; }
.tw-seznam-v { font-size: 13.5px; color: var(--slabe); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tw-seznam-v.silny { font-size: 16px; font-weight: 750; color: var(--inkoust); }
.tw-seznam-drah { height: 3px; border-radius: 2px; background: var(--vlasovka); overflow: hidden; }
.tw-seznam-drah i { display: block; height: 100%; background: var(--limeta); border-radius: 2px; }

/* Kampaň nese dobu běhu jako hlavní číslo — výdrž je informace. */
.tw-seznam-r.kampan { grid-template-columns: 82px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.tw-seznam-bezi { display: flex; flex-direction: column; gap: 2px; }
.tw-seznam-bezi b { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.tw-seznam-bezi small { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slabe); }
.tw-seznam-bezi.zije small { color: var(--nahoru); }

.tw-seznam-r.zdroj { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

/* ========================================================== tabulka ligy */

.tw-tabulka { margin-top: 6px; }
.tw-zr {
  display: grid;
  grid-template-columns: 72px 36px 34px minmax(0, 1.7fr) 110px minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 18px 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  transition: padding-left 0.25s var(--tempo);
  will-change: transform;
}
.tw-zr:hover { background: none; padding-left: 8px; }
.tw-zr-poradi {
  font-size: 20px; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--slabe);
}
.tw-zr-poradi.prvni {
  background: var(--limeta); color: var(--na-limete);
  border-radius: 9px; padding: 5px 10px; justify-self: start;
}
.tw-zr.top { padding-top: 26px; padding-bottom: 26px; }
.tw-zr.top .tw-zr-poradi { font-size: 34px; color: var(--inkoust); }
.tw-zr.top .tw-zr-poradi.prvni { color: var(--na-limete); }
.tw-zr-kdo { min-width: 0; }
.tw-zr-kdo .kdo { font-size: 16px; font-weight: 650; color: inherit; text-decoration: none; }
.tw-zr-kdo .kdo:hover { text-decoration: underline; text-decoration-color: var(--limeta); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tw-zr.top .tw-zr-kdo .kdo { font-size: 19px; font-weight: 750; }
.tw-zr-kdo small { display: block; font-size: 12px; color: var(--slabe); margin-top: 2px; }
.tw-zr-jiskra { opacity: 0.9; }
.tw-zr-vedle { font-size: 12px; color: var(--slabe); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tw-zr-cislo { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; }
.tw-zr.top .tw-zr-cislo { font-size: 34px; }
.tw-zr.ja { box-shadow: inset 3px 0 0 var(--limeta); padding-left: 16px; background: none; }
.tw-zr.ja:hover { padding-left: 20px; }
.tw-zr.malo { opacity: 0.55; }
.tw-zr.malo:hover { opacity: 0.9; }
.tw-zr-znamka { justify-self: end; }

/* ================================================================== živě */

.tw-zive-prvni { padding: 6px 0 40px; }
.tw-zive-prvni h2 {
  font-size: clamp(28px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1.02; max-width: 26ch; margin: 12px 0 16px;
}
.tw-zive-prvni .tw-zu-cas { font-size: 12px; }
.tw-zive-prvni-s { display: flex; align-items: center; gap: 14px; }
.tw-zive-prvni-s .tw-zu-c { font-size: 19px; }

.tw-proud { border: 0; }
.tw-zu {
  display: grid; grid-template-columns: 50px 34px minmax(0, 1fr) auto minmax(90px, auto);
  gap: 14px; align-items: center; padding: 15px 0;
  border: 0; border-radius: 0; background: none;
  transition: padding-left 0.25s var(--tempo);
}
.tw-zu:hover { background: none; padding-left: 8px; }
.tw-zu-cas { font-size: 12px; color: var(--slabe); font-variant-numeric: tabular-nums; }
.tw-zu-tx { font-size: 15px; color: var(--tlumene); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-zu-tx b { color: var(--inkoust); font-weight: 600; }
.tw-zu-tx a { color: inherit; text-decoration: none; }
.tw-zu-tx a:hover b { text-decoration: underline; text-decoration-color: var(--limeta); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tw-zu-c { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tw-zu-c.nahoru { color: var(--nahoru); }
.tw-zu-c.dolu { color: var(--dolu); }
.tw-zu-stitek {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slabe); text-align: right;
}
.tw-zu-stitek.milnik { color: var(--pozor-b); }

/* ==================================================== veřejná hlavička */

.vh {
  position: sticky; top: 0; z-index: 40; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 var(--okraj); max-width: none;
  background: color-mix(in srgb, var(--papir) 84%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--vlasovka);
}
.vh .znacka { color: inherit; }
.vh .logo-napis { height: 19px; width: auto; display: block; }
.vh-nav { display: flex; align-items: center; gap: 4px; }
.vh-nav a {
  padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: var(--tlumene); text-decoration: none; border: 0; background: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.vh-nav a:hover { color: var(--inkoust); background: var(--papir-2); }
.vh-nav a[aria-current] { color: var(--inkoust); font-weight: 600; }
.vh-nav .btn {
  padding: 0 16px; height: 36px; display: inline-flex; align-items: center;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--inkoust);
  background: none; box-shadow: inset 0 0 0 1px var(--vlasovka-2);
  transition: background 0.2s ease, color 0.2s ease;
}
.vh-nav .btn:hover { background: var(--inkoust); color: var(--papir); box-shadow: none; }

/* ================================================================ sdílení */

/* Náhled karty je předmět: perspektiva + náklon za kurzorem. */
.sh-prev {
  display: flex; justify-content: center; background: none; perspective: 900px;
  border: 0; border-radius: 0; overflow: visible; padding: 14px 0;
}
.sh-prev canvas {
  width: auto; max-width: 100%; max-height: 46vh; border-radius: 16px;
  box-shadow: var(--stin-plovouci);
  transform: rotateY(var(--nx, 0deg)) rotateX(var(--ny, 0deg));
  transition: transform 0.25s ease-out;
}
.sw.brand { display: grid; place-items: center; color: #e5fa6a; background: #0b0b0c; }

/* ================================================================ landing

   Landing má jeden vzhled bez ohledu na motiv: noční přenos. Uvnitř jsou
   dva papírové pásy (verdikt a skóre) — nádech a výdech, ne střídání
   šablon. Tokeny se přepíšou lokálně, sdílené díly se přebarví samy. */

.lp {
  --papir: #0b0b0c; --papir-2: #131315; --papir-3: #1a1a1d;
  --inkoust: #f5f3ee; --tlumene: #a8a8a0; --slabe: #63635c;
  --vlasovka: rgba(245, 243, 238, 0.09); --vlasovka-2: rgba(245, 243, 238, 0.22);
  --limeta: #e5fa6a; --na-limete: #0b0b0c;
  --nahoru: #4ade80; --dolu: #ff6b6b;
  --plocha: #151517; --plocha-lem: rgba(245, 243, 238, 0.1);
  --stin-plovouci: 0 24px 70px -24px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.4);
  background: var(--papir); color: var(--inkoust);
  overflow-x: clip;
}
.lp section { padding-inline: max(var(--okraj), calc((100% - var(--sloupec)) / 2)); }

.lp-svetly {
  --papir: #f5f3ee; --papir-2: #ebe9e2; --papir-3: #e2dfd6;
  --inkoust: #0b0b0c; --tlumene: #6b6b64; --slabe: #a3a39a;
  --vlasovka: rgba(11, 11, 12, 0.09); --vlasovka-2: rgba(11, 11, 12, 0.2);
  --limeta: #d8f24a; --nahoru: #0f9d5f; --dolu: #d63031;
  --plocha: #ffffff; --plocha-lem: rgba(11, 11, 12, 0.08);
  background: var(--papir); color: var(--inkoust);
}
.lp-svetly .chart-wrap { --c-bal: var(--inkoust); --c-ads: var(--slabe); --c-ord: #9cb300; }

/* ------------------------------------------------------------------ hero */

.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
  min-height: min(calc(100svh - 64px), 860px); padding-top: 24px; padding-bottom: 56px;
}
.lp-hero-tx h1 {
  font-size: clamp(54px, 7.2vw, 118px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.93;
}
.lp-hero-tx h1 span { display: block; }
.lp-hero-tx > p {
  margin-top: 28px; font-size: 18px; line-height: 1.6;
  color: var(--tlumene); max-width: 50ch;
}
.lp-akce { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; }

.lp-scena { perspective: 1300px; min-height: 480px; display: flex; align-items: center; justify-content: center; }
.lp-jeviste {
  position: relative; width: min(480px, 100%); height: 470px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.3s ease-out;
}
.lp-karta {
  position: absolute; border-radius: 18px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--plocha); border: 1px solid var(--plocha-lem);
  box-shadow: var(--stin-plovouci);
  transform: translate3d(calc(var(--x) * 12px), calc(var(--y) * 10px), var(--z));
}
.lp-skore { left: 0; top: 10%; width: 60%; z-index: 3; }
.lp-liga-mini { right: 0; top: 2%; width: 45%; z-index: 1; }
.lp-feed-mini { left: 3%; bottom: 9%; width: 54%; z-index: 4; }
.lp-produkt-mini { right: 0; bottom: 20%; width: 44%; z-index: 2; }

.lp-k-mikro { font-size: 10px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slabe); }
.lp-k-cislo { font-size: clamp(44px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-k-pozn { font-size: 12.5px; color: var(--tlumene); }
.lp-k-pozn.nahoru { color: var(--nahoru); }
.lp-k-verdikt { font-size: 13px; font-weight: 600; color: var(--nahoru); }
.lp-k-radek { display: flex; align-items: baseline; gap: 10px; font-size: 13px; min-width: 0; }
.lp-k-radek i { font-style: normal; width: 24px; flex: none; color: var(--slabe); font-variant-numeric: tabular-nums; }
.lp-k-radek span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tlumene); }
.lp-k-radek b { font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-k-radek b.nahoru { color: var(--nahoru); }
.lp-k-radek .tecka { width: 8px; height: 8px; border-radius: 50%; background: var(--slabe); align-self: center; flex: none; }
.lp-k-radek .tecka.nahoru { background: var(--nahoru); }

.lp-znacka-ukazky {
  display: block; margin-top: 26px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--slabe);
}
.lp-jeviste .lp-znacka-ukazky { position: absolute; right: 6px; bottom: -26px; margin: 0; }

/* -------------------------------------------------------------- pásy */

.lp-pas-zive, .lp-verdikt, .lp-inteligence, .lp-objevy, .lp-liga, .lp-obchody, .lp-share {
  padding-top: 130px; padding-bottom: 120px;
}
.lp-pas-hlava h2 {
  font-size: clamp(34px, 4.6vw, 64px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1.0; max-width: 22ch;
}
.lp-pas-hlava p { margin-top: 20px; font-size: 16.5px; line-height: 1.6; color: var(--tlumene); max-width: 56ch; }
.lp-pas-hlava .tw-t-mikro { display: inline-flex; align-items: center; margin-bottom: 18px; }
.lp-pas-hlava .tw-t-mikro::before {
  content: ""; display: inline-block; width: 18px; height: 3px;
  background: var(--limeta); margin-right: 10px;
}
.lp-pas-hlava .tw-ziva { width: 8px; height: 8px; margin-left: 10px; vertical-align: 0; }

/* -------------------------------------------------------------- proud */

.lp-pas-zive { background: #0f0f11; }
.lp-proud { margin-top: 44px; max-width: 780px; }
.lp-pr {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline; padding: 15px 0;
  font-size: 15px;
}
.lp-pr-cas { font-size: 12px; color: var(--slabe); font-variant-numeric: tabular-nums; }
.lp-pr-tx { color: var(--tlumene); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-pr-tx b { color: var(--inkoust); font-weight: 600; }
.lp-pr-c { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-pr-c.nahoru { color: var(--nahoru); }
.lp-pr-c.dolu { color: var(--dolu); }
.lp-pas-zive .lp-znacka-ukazky.svetla { margin-top: 34px; }

/* ------------------------------------------------------------ verdikt */

.lp-verdikty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 58px; }
.lp-v i { display: block; width: 44px; height: 4px; border-radius: 2px; margin-bottom: 20px; background: var(--slabe); }
.lp-v[data-stav="spatne"] i { background: var(--dolu); }
.lp-v[data-stav="pozor"] i { background: #c07508; }
.lp-v[data-stav="dobre"] i { background: var(--nahoru); }
.lp-v h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.lp-v-kdy { margin-top: 10px; font-size: 14.5px; font-weight: 600; }
.lp-v-co { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--tlumene); }

/* -------------------------------------------------------- inteligence */

.lp-cisla { display: flex; gap: 64px; flex-wrap: wrap; margin: 52px 0 44px; }
.lp-c b {
  display: block; font-size: clamp(40px, 4.4vw, 64px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.lp-c span { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slabe); }
.lp-graf { border-radius: 0; padding: 0; background: none; box-shadow: none; }
.lp-graf .chart-wrap { position: relative; }
.lp-graf .lp-znacka-ukazky { margin: 8px 0 0; }

/* ------------------------------------------------------------- objevy */

.lp-objev-rada { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 56px; }
.lp-ob {
  position: relative; padding: 22px 0 0; border-radius: 0;
  background: none; box-shadow: none;
  transition: transform 0.3s var(--tempo);
}
.lp-ob::before {
  content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px;
  background: var(--vlasovka-2); transition: width 0.35s var(--tempo), background 0.35s ease;
}
.lp-ob:hover { transform: translateY(-4px); box-shadow: none; }
.lp-ob:hover::before { width: 52px; background: var(--limeta); }
.lp-ob h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 8px; }
.lp-ob-s { font-size: 14px; color: var(--tlumene); }
.lp-ob-s b { font-weight: 700; color: var(--inkoust); }
.lp-ob-s b.nahoru { color: var(--nahoru); }

/* --------------------------------------------------------------- liga */

.lp-tabulka { max-width: 740px; margin-top: 52px; }
.lp-zr {
  display: grid; grid-template-columns: 52px 40px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 16px 0;
  font-size: 16px; border: 0; border-radius: 0; background: none;
  will-change: transform;
}
.lp-zr-p { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--slabe); }
.lp-zr-jm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-zr-jm em { font-style: normal; font-weight: 500; color: var(--slabe); }
.lp-zr-c { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-zr.ty { box-shadow: inset 3px 0 0 var(--limeta); padding-left: 16px; background: none; transition: box-shadow 0.5s ease; }
.lp-zr.ty.povysen .lp-zr-p { color: var(--limeta); }
.lp-cisla.skutecna { margin: 76px 0 0; padding-top: 44px; border-top: 1px solid var(--vlasovka); }

/* ------------------------------------------------------------ obchody */

.lp-obchody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.lp-vyber {
  max-width: 430px; padding: 8px; border-radius: 18px; justify-self: center;
  background: var(--plocha); border: 1px solid var(--plocha-lem);
  box-shadow: var(--stin-plovouci);
  width: 100%;
}
.lp-vy-r {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 12px; border-radius: 12px;
}
.lp-vy-r.aktivni { background: var(--papir-2); box-shadow: inset 2px 0 0 var(--limeta); }
.lp-vy-r.tichy { color: var(--slabe); }
.lp-vy-tx { min-width: 0; }
.lp-vy-tx b { display: block; font-size: 14px; font-weight: 600; }
.lp-vy-tx small { display: block; font-size: 12px; color: var(--slabe); }
.lp-vy-r .lp-zr-c { font-size: 15px; }

/* -------------------------------------------------------- share karty */

.lp-karty {
  display: flex; justify-content: center; align-items: center;
  margin-top: 64px; perspective: 1100px;
}
.lp-sk {
  width: 250px; aspect-ratio: 10 / 14; border-radius: 22px; padding: 26px;
  display: flex; flex-direction: column; gap: 6px; flex: none;
  background: #0b0b0c; color: #f5f3ee;
  box-shadow: 0 50px 90px -36px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(245, 243, 238, 0.1);
  transform: rotateY(calc(var(--n) * -13deg)) rotate(calc(var(--n) * 3.4deg)) translateX(calc(var(--n) * -16px));
  transition: transform 0.45s var(--tempo);
}
.lp-sk.hlavni { z-index: 2; transform: translateY(-18px) scale(1.07); }
.lp-karty:hover .lp-sk { transform: rotateY(calc(var(--n) * -9deg)) rotate(calc(var(--n) * 2.4deg)) translateX(calc(var(--n) * -34px)); }
.lp-karty:hover .lp-sk.hlavni { transform: translateY(-26px) scale(1.09); }
.lp-sk-logo { color: #e5fa6a; margin-bottom: auto; }
.lp-sk-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #e5fa6a; }
.lp-sk b { font-size: 46px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-sk-s { font-size: 12px; color: rgba(245, 243, 238, 0.6); }

/* --------------------------------------------------------------- závěr */

.lp-zaver {
  padding: 160px max(var(--okraj), calc((100% - var(--sloupec)) / 2)) 150px;
  text-align: center; border-top: 1px solid var(--vlasovka);
}
.lp-zaver h2 { font-size: clamp(42px, 6vw, 92px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.96; }
.lp-zaver p { margin: 24px auto 0; font-size: 17px; color: var(--tlumene); max-width: 46ch; }
.lp-zaver .lp-akce { justify-content: center; margin-top: 40px; }

.lp-paticka {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px max(var(--okraj), calc((100% - var(--sloupec)) / 2));
  border-top: 1px solid var(--vlasovka);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; color: var(--slabe);
  background: var(--papir);
}
.lp-paticka nav { display: flex; gap: 22px; }
.lp-paticka a { color: var(--tlumene); text-decoration: none; }
.lp-paticka a:hover { color: var(--inkoust); }

/* ================================================================= pohyb */

.cursor > g { transition: transform 0.15s cubic-bezier(0.33, 1, 0.68, 1); }

@media (prefers-reduced-motion: no-preference) {
  .chart .kresli {
    stroke-dasharray: var(--delka, 2000); stroke-dashoffset: var(--delka, 2000);
    animation: kresli 1.2s var(--tempo) 0.15s forwards;
  }
  @keyframes kresli { to { stroke-dashoffset: 0; } }

  .chart .objd {
    opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: objd-in 0.42s var(--tempo) forwards;
    animation-delay: calc(0.4s + var(--i) * 0.05s);
  }
  @keyframes objd-in {
    from { opacity: 0; transform: scale(0.2); }
    62% { transform: scale(1.16); }
    to { opacity: 1; transform: scale(1); }
  }

  .chart .ted-halo { transform-box: fill-box; transform-origin: center; animation: tep-halo 2.8s ease-out 1.4s infinite; }
  @keyframes tep-halo {
    0% { transform: scale(1); opacity: 0.45; }
    72%, 100% { transform: scale(3.6); opacity: 0; }
  }

  /* Nástup pohledu: titulek se odcloní, čísla a řádky najedou. */
  .tw-strana.tw-prijezd .tw-zaver h1 span { animation: odclonit 0.66s var(--tempo) both; }
  .tw-strana.tw-prijezd .tw-zaver h1 .tw-druhy { animation-delay: 0.1s; }
  .tw-strana.tw-prijezd .tw-duvod { animation: zjevit 0.6s var(--tempo) 0.22s both; }
  .tw-strana.tw-prijezd .tw-jistota { animation: zjevit 0.6s var(--tempo) 0.3s both; }
  .tw-strana.tw-prijezd .tw-fakt { animation: zjevit-radek 0.55s var(--tempo) both; }
  .tw-strana.tw-prijezd .tw-fakt:nth-child(2) { animation-delay: 0.06s; }
  .tw-strana.tw-prijezd .tw-fakt:nth-child(3) { animation-delay: 0.12s; }
  .tw-strana.tw-prijezd .tw-fakt:nth-child(4) { animation-delay: 0.18s; }
  @keyframes odclonit {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 -6% 0 0); }
  }
  @keyframes zjevit { from { opacity: 0; } }

  .tw-strana.tw-prijezd .tw-zk { animation: zk-sem 0.5s var(--tempo) both; animation-delay: calc(0.1s + var(--i, 0) * 0.05s); }
  @keyframes zk-sem { from { opacity: 0; transform: translateX(14px); } }

  .tw-strana.tw-prijezd .tw-zr,
  .tw-strana.tw-prijezd .tw-zu,
  .tw-strana.tw-prijezd .tw-seznam-r,
  .tw-strana.tw-prijezd .tw-prod,
  .tw-strana.tw-prijezd .tw-zive-prvni {
    animation: zjevit-radek 0.5s var(--tempo) both;
    animation-delay: calc(var(--i, 0) * 0.045s);
  }
  @keyframes zjevit-radek { from { opacity: 0; transform: translateY(10px); } }

  /* Rozbalení panelů v liště — pružné, z rohu. */
  .tw-vyber-panel:not([hidden]), .tw-kdo-panel:not([hidden]) { animation: pruzina 0.36s var(--tempo); }
  @keyframes pruzina {
    0% { opacity: 0; transform: scale(0.92) translateY(-8px); }
    62% { opacity: 1; transform: scale(1.012) translateY(1px); }
    100% { opacity: 1; transform: none; }
  }

  /* Výměna kontextu obchodu je proměna: obsah jen krátce nadechne,
     čísla dojedou počítadly, graf se kreslí znovu. */
  .shell > .hlavni.tw-nastup { animation: kontext-sem 0.35s var(--tempo); }
  @keyframes kontext-sem { from { opacity: 0.4; transform: translateY(6px); } }

  .tw-ziva, .lp-pas-hlava .tw-ziva { animation: tep-tecka 2.2s ease-out infinite; }
  @keyframes tep-tecka {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nahoru) 45%, transparent); }
    70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--nahoru) 0%, transparent); }
  }

  /* Zpoždění po vrstvách natvrdo — násobit délku (--z je v px) časem
     v calc() nejde a celá deklarace by spadla na nulu. */
  .lp-karta { animation: vznaset 7s ease-in-out infinite; }
  .lp-karta:nth-child(2) { animation-delay: -1.7s; }
  .lp-karta:nth-child(3) { animation-delay: -3.3s; }
  .lp-karta:nth-child(4) { animation-delay: -4.9s; }
  @keyframes vznaset {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
  }

  .lp-pr.novy { animation: pr-sem 0.55s var(--tempo); }
  @keyframes pr-sem { from { opacity: 0; transform: translateY(-12px); } }

  [data-odhal] { transition: opacity 0.7s var(--tempo), transform 0.7s var(--tempo); transition-delay: calc(var(--i, 0) * 90ms); }
  .lp-pred { opacity: 0; transform: translateY(28px); }
  .lp-tu { opacity: 1; transform: none; }

  html.prepina, html.prepina * {
    transition: background-color 0.24s ease, color 0.24s ease,
      border-color 0.24s ease, fill 0.24s ease, stroke 0.24s ease !important;
  }
}

/* ============================================================ užší okna */

@media (max-width: 1200px) {
  :root { --okraj: 32px; }
  .tw-fakta { gap: 32px 56px; }
  .tw-spodek { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .tw-poz { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tw-zr { grid-template-columns: 60px 36px 34px minmax(0, 1.7fr) minmax(0, 1fr) auto; }
  .tw-zr-vedle, .tw-zr-jiskra { display: none; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 64px; }
  .lp-scena { min-height: 430px; }
  .lp-verdikty, .lp-objev-rada { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-obchody { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}

@media (max-width: 760px) {
  :root { --okraj: 20px; }
  .tw-navbar { gap: 14px; height: 58px; }
  .tw-nb-odkazy { display: none; }
  .tw-nb-kdo b { display: none; }
  .tw-vyber-jm { max-width: 110px; }
  .tw-vyber-panel { position: fixed; left: 12px; right: 12px; top: 66px; min-width: 0; }
  .tw-kdo-panel { position: fixed; left: auto; right: 12px; top: 66px; }

  /* Hlavní navigace jde dolů do palce. */
  .tw-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    justify-content: space-around; gap: 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--papir) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--vlasovka);
  }
  .tw-tabbar a {
    position: relative; padding: 9px 14px; border-radius: 10px;
    font-size: 12.5px; font-weight: 600; color: var(--tlumene); text-decoration: none;
  }
  .tw-tabbar a[aria-current] { color: var(--inkoust); }
  .tw-tabbar a[aria-current]::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--limeta); transform: translateX(-50%);
  }
  .shell > .hlavni { padding-bottom: 84px; }

  .tw-titul-radek { margin: 12px 0 26px; }
  .tw-sekce-hlava, .tw-objev .tw-zpas-hlava, .tw-graf-pas, .tw-fakta { margin-top: 64px; }
  .tw-poz, .tw-spodek { margin-top: 72px; }
  .tw-fakta { gap: 28px 36px; }
  .tw-zr { grid-template-columns: 46px 30px minmax(0, 1.7fr) auto; padding: 15px 0; gap: 10px; }
  .tw-zr .av, .tw-zr-znamka { display: none; }
  .tw-zr-cislo { font-size: 20px; }
  .tw-zu { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .tw-zu .av, .tw-zu-stitek { display: none; }
  .tw-poz-r { grid-template-columns: 44px 30px minmax(0, 1fr) auto; }
  .tw-seznam-r { grid-template-columns: 30px minmax(0, 1.6fr) minmax(0, 1fr); }
  .tw-seznam-r > .tw-seznam-v:not(.silny), .tw-seznam-drah { display: none; }
  .tw-seznam-r.kampan { grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr); }
  .tw-seznam-r.zdroj { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

  .lp section { padding-inline: var(--okraj); }
  .lp-hero { padding-top: 40px; }
  .lp-hero-tx h1 { font-size: clamp(46px, 13vw, 64px); }
  .lp-scena { min-height: 400px; }
  .lp-jeviste { height: 400px; }
  .lp-karta { padding: 16px 18px; border-radius: 15px; }
  .lp-k-cislo { font-size: 38px; }
  .lp-pas-zive, .lp-verdikt, .lp-inteligence, .lp-objevy, .lp-liga, .lp-obchody, .lp-share {
    padding-top: 84px; padding-bottom: 76px;
  }
  .lp-cisla { gap: 30px 40px; }
  .lp-karty { margin-top: 44px; }
  .lp-sk { width: 168px; padding: 18px; border-radius: 18px; }
  .lp-sk b { font-size: 30px; }
  .lp-zaver { padding-top: 100px; padding-bottom: 100px; }
  .lp-paticka { flex-direction: column; gap: 12px; padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}

/* Jiskra bez rozměru by se roztáhla přes celý blok. */
.jiskra { width: 76px; height: 22px; flex: none; }
.tw-zr-jiskra .jiskra { width: 100px; }

@media (max-width: 760px) {
  /* Graf drží čitelnou velikost a posouvá se prstem — zmenšit ho na
     třetinu by znamenalo zmenšit i všechna čísla v něm. */
  .tw-graf-pas .chart-wrap { overflow-x: auto; margin: 0 calc(var(--okraj) * -1); padding: 0 var(--okraj); scrollbar-width: none; }
  .tw-graf-pas .chart-wrap::-webkit-scrollbar { display: none; }
  .tw-graf-pas .chart { min-width: 640px; }

  .tw-nalez { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tw-nalez-c, .tw-nalez-s { display: none; }
  .tw-objev-rada, .tw-objev-rada.velka { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Nová událost v proudu přijede shora; čas jí chvíli svítí. */
  .tw-zu.novy { animation: zu-novy 0.6s var(--tempo); }
  @keyframes zu-novy { from { opacity: 0; transform: translateY(-12px); } }
  .tw-zu.novy .tw-zu-cas { color: var(--limeta); transition: color 2.5s ease 2s; }
}

/* ==========================================================================
   KOMPOZICE — hustota
   Třetí generace měla identitu, ale skládala ji do jednoho úzkého sloupce:
   obří titulek, odstavec, vzduch, sekce, vzduch. Na 1440+ zela pravá půlka
   obrazovky prázdnotou a stránka působila jako koncept, ne nástroj.

   Tahle vrstva mění skladbu, ne jazyk:
   · hlava je dvousloupec — vlevo soud, vpravo finance; první obrazovka
     odpovídá na „jak na tom jsem" bez rolování,
   · související věci stojí VEDLE sebe (trojice: objevy · liga · rozpad),
   · vzdušnost drží mezery MEZI celky, uvnitř celků je informace hustá,
   · vlasové linky se vracejí jako tichý nástroj vztahů — sloupec od
     sloupce, řádek od řádku, ne krabice kolem všeho.
   ========================================================================== */

/* ------------------------------------------------------------ rytmus */

.tw-hl-radek { padding-top: 30px; }
.tw-zpas { margin-top: 22px; }
.tw-sekce-hlava { margin: 64px 0 20px; }
.tw-objev .tw-zpas-hlava { margin-top: 0; }
.tw-graf-pas { margin-top: 56px; }
.tw-strana { padding-bottom: 100px; }

/* ------------------------------------------------------------- hlava */

.tw-hero {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 36px 64px; align-items: start;
  margin-top: 34px;
}
.tw-hero .tw-zaver { padding: 0; }
.tw-hero .tw-zaver h1 {
  font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -0.04em;
  line-height: 1.0; max-width: 18ch;
}
.tw-hero .tw-duvod { margin-top: 16px; font-size: 15px; max-width: 54ch; }
.tw-hero .tw-zaver-akce { margin-top: 20px; gap: 18px; }
.tw-hero .tw-jistota { margin-top: 26px; max-width: 340px; }

/* KPI modul: bilance se sparkline, pod ní řada tří metrik. Sloupec je
   od soudu oddělený vlasovkou — vztah, ne krabice. */
.tw-kpi {
  border-left: 1px solid var(--vlasovka); padding-left: 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.tw-kpi-hlavni { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.tw-kpi-sloupek { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tw-kpi-cislo {
  font-size: clamp(36px, 3.2vw, 52px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.tw-kpi-cislo.nahoru { color: var(--nahoru); }
.tw-kpi-cislo.dolu { color: var(--dolu); }
.tw-kpi-pozn { font-size: 13px; color: var(--slabe); line-height: 1.5; }
.tw-kpi-pozn b { color: var(--tlumene); font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-kpi-jiskra .jiskra { width: 120px; height: 34px; }
.tw-kpi-rada {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; border-top: 1px solid var(--vlasovka); padding-top: 18px;
}
.tw-kpi-men { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tw-kpi-men > b {
  font-size: 24px; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tw-zmena.mala { font-size: 11.5px; font-weight: 650; }

/* -------------------------------------------------------------- graf */

.tw-graf-pas .tw-odecet { padding: 10px 12px 6px; min-height: 44px; }
.tw-od-bal { font-size: 24px; }

/* ----------------------------------------------------------- trojice */

.tw-trojice {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; margin-top: 64px; align-items: start;
}
.tw-troj { min-width: 0; padding: 0 36px; border-left: 1px solid var(--vlasovka); }
.tw-troj:first-child { padding-left: 0; border-left: 0; }
.tw-troj:last-child { padding-right: 0; }

/* Objevy v úzkém sloupci: předměty pod sebou, těsněji. */
.tw-troj .tw-objev { margin-top: 0; }
.tw-troj .tw-objev-rada { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tw-troj .tw-prod { padding: 13px 0 11px; border-top: 1px solid var(--vlasovka); }
.tw-troj .tw-prod::before { display: none; }
.tw-troj .tw-prod:first-child { border-top: 0; padding-top: 4px; }
.tw-troj .tw-prod-jm { font-size: 16px; -webkit-line-clamp: 1; }
.tw-troj .tw-prod-spodek { margin-top: 6px; }
.tw-troj .tw-prod-ks { font-size: 21px; }
.tw-troj .tw-zpas-hlava { margin-bottom: 10px; }

/* Pozice v úzkém sloupci: číslo menší, okolí těsné. */
.tw-troj .tw-poz { display: block; margin-top: 0; }
.tw-troj .tw-poz-cislo { font-size: clamp(48px, 4.6vw, 76px); line-height: 0.92; }
.tw-troj .tw-poz-hlavni { gap: 10px; margin-bottom: 12px; }
.tw-troj .tw-poz-r { padding: 10px 0; font-size: 14px; border-top: 1px solid var(--vlasovka); }
.tw-troj .tw-poz-r:first-of-type { border-top: 0; }
.tw-troj .tw-poz-r.ja { padding-left: 12px; }
.tw-troj .tw-poz-okoli .tw-pod-akce { margin-top: 12px; }
.tw-troj .tw-duvod { font-size: 13.5px; margin-top: 10px; }

/* Obchody a rozpad kontrol ve třetím sloupci. */
.tw-spodek { display: flex; flex-direction: column; gap: 26px; margin-top: 0; }
.tw-spodek-blok { display: flex; flex-direction: column; }
.tw-spodek-blok > .tw-t-mikro { margin-bottom: 8px; }
.tw-t-mikro.s-kotou::before {
  content: ""; display: inline-block; width: 16px; height: 3px;
  background: var(--limeta); margin-right: 9px; vertical-align: 2px;
}
.tw-obchod-r { padding: 10px 0; font-size: 14px; border-top: 1px solid var(--vlasovka); }
.tw-obchod-r:first-of-type { border-top: 0; }
.tw-obchod-r .tw-jm { font-size: 14px; }
.tw-obchod-r .tw-bil { font-size: 14px; min-width: 84px; }
.tw-rozpad-r { padding: 9px 0; font-size: 13.5px; border-top: 1px solid var(--vlasovka); }
.tw-rozpad-r:first-of-type { border-top: 0; }

/* ------------------------------------------------------------ nálezy */

.tw-nalezy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; }
.tw-nalez { padding: 18px 0; gap: 18px; grid-template-columns: 34px minmax(0, 1fr) auto; border-top: 1px solid var(--vlasovka); }
.tw-nalez:nth-child(-n+2) { border-top: 0; }
.tw-nalez-t h3 { font-size: 16.5px; }
.tw-nalez-t p { font-size: 14px; line-height: 1.55; }
.tw-nalez::before { left: -14px; top: 22px; height: 18px; }
.tw-nalez .tw-pod-akce { font-size: 13.5px; }

/* -------------------------------------------------------------- shell */

.tw-navbar { height: 60px; gap: 26px; }
.tw-vyber-tl { box-shadow: inset 0 0 0 1px var(--vlasovka); }
.tw-vyber-tl:hover { box-shadow: inset 0 0 0 1px var(--vlasovka-2); }
/* Aktivní stránka nese limetkovou linku pod textem — tečka byla drobnost,
   tohle je stav. */
.tw-nb-odkazy a[aria-current]::after {
  left: 13px; right: 13px; bottom: 3px; width: auto; height: 2px;
  border-radius: 1px; transform: none;
}

/* ---------------------------------------------------- seznamy (Objevit) */

.tw-seznam-hlava {
  display: grid; grid-template-columns: 36px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px; align-items: baseline; padding: 0 0 8px;
  border-bottom: 1px solid var(--vlasovka);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slabe);
}
.tw-seznam-hlava.kampan { grid-template-columns: 82px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.tw-seznam-hlava.zdroj { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.tw-seznam-hlava > span:not(:first-child):not(:nth-child(2)) { text-align: right; }
.tw-seznam-hlava.zdroj > span:first-child { text-align: left; }
.tw-seznam-hlava.zdroj > span:not(:first-child) { text-align: right; }

.tw-seznam-r { padding: 12px 0; border-top: 1px solid var(--vlasovka); border-radius: 0; }
.tw-seznam-r:first-of-type, .tw-sekce-hlava + .tw-seznam-r, .tw-seznam-hlava + .tw-seznam-r { border-top-color: transparent; }
.tw-seznam-r:hover { background: none; padding-left: 8px; }
.tw-seznam-jm { font-size: 15px; }
.tw-seznam-v.silny { font-size: 15px; }
.tw-seznam-bezi b { font-size: 24px; }
.tw-objev-rada { gap: 14px 36px; }
.tw-objev-rada .tw-prod, .tw-objev-rada.velka .tw-prod { padding: 14px 0 12px; }

/* -------------------------------------------------------- liga: duchové */

.tw-zr { padding: 15px 0; }
.tw-zr.top { padding-top: 20px; padding-bottom: 20px; }
.tw-zr.duch { opacity: 1; }
.tw-zr.duch .tw-zr-poradi { color: var(--slabe); opacity: 0.55; }
.tw-duch-kolo {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px dashed var(--vlasovka-2);
}
.tw-duch-jm { display: block; font-size: 15px; font-weight: 500; color: var(--slabe); }
.tw-zr.duch small { display: block; font-size: 12px; color: var(--slabe); opacity: 0.75; margin-top: 2px; }
.tw-zr.duch .tw-zr-cislo { color: var(--slabe); opacity: 0.5; font-weight: 600; }
.tw-zr.duch:hover { padding-left: 0; }
.tw-titul { font-size: clamp(36px, 4.2vw, 52px); }
.tw-titul-radek { margin: 16px 0 30px; }

/* ------------------------------------------------------------- živě */

.tw-zive-prvni { padding-bottom: 28px; }
.tw-zive-prvni h2 { font-size: clamp(24px, 2.8vw, 40px); margin: 10px 0 12px; }
.tw-proud { position: relative; }
/* Časová kolejnice: proud je osa, ne výpis. Vede středem sloupce
   s avatary a řádky na ní sedí jako zastávky. */
.tw-proud::before {
  content: ""; position: absolute; left: 66px; top: 10px; bottom: 10px;
  width: 1px; background: var(--vlasovka);
}
.tw-zu { padding: 10px 0; border-top: 0; position: relative; }
.tw-zu .av { position: relative; z-index: 1; }
.tw-den-prelom {
  position: relative; z-index: 1; display: flex; align-items: center;
  padding: 20px 0 8px; margin-left: 0;
}
.tw-den-prelom span {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slabe);
  background: var(--papir); padding-right: 12px;
}
.tw-den-prelom::after { content: ""; flex: 1; height: 1px; background: var(--vlasovka); }

/* --------------------------------------------- staré stránky v lati */

/* Napojení, Nastavení, Profil a Obchod jedou na starém stylopisu.
   Karta se srovná do plochého modulu s vlasovým lemem — žádný stín,
   žádný plovoucí obdélník — a hlavička dostane novou škálu. */
.card {
  background: var(--plocha); border: 1px solid var(--plocha-lem);
  border-radius: 12px; box-shadow: none;
}
.hlava h1 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.04em; }

/* ------------------------------------------------------------ užší okna */

@media (max-width: 1240px) {
  .tw-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tw-kpi { border-left: 0; padding-left: 0; border-top: 1px solid var(--vlasovka); padding-top: 22px; }
  .tw-trojice { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tw-troj { padding: 0; border-left: 0; }
  .tw-nalezy { grid-template-columns: minmax(0, 1fr); }
  .tw-nalez:nth-child(-n+2) { border-top: 1px solid var(--vlasovka); }
  .tw-nalez:first-child { border-top: 0; }
}
@media (max-width: 760px) {
  .tw-kpi-rada { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-kpi-hlavni { grid-template-columns: minmax(0, 1fr); }
  .tw-kpi-jiskra { display: none; }
  .tw-seznam-hlava { display: none; }
  .tw-proud::before { left: 60px; }
  .tw-zr.duch .tw-duch-kolo { display: none; }
}

@media (max-width: 760px) {
  /* Číslo a štítek nálezu jsou skryté — mřížka se musí složit na jeden
     sloupec, jinak text spadne do úzkého sloupce po čísle. */
  .tw-nalez { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Lupa na tašce objednávky: při najetí kurzorem na den s objednávkou
   zmizí kurzorové kolečko a taška se zvětší kolem svého středu. Vlastní
   skupina, protože vstupní animace i poloha jsou taky transformy. */
.chart .tw-lupa {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.18s var(--tempo);
}
.chart .tw-lupa.zvetsena { transform: scale(1.5); }