/* Základ aplikace Citováno. Vzhled „Sklo“ (2026-10-08, podklady od Martina: dashboard Boltshift, menu s černou pilulkou,
   skleněná tlačítka z ceníku a z okna AI chatu, tmavý dashboard s modrofialovým akcentem).
   Výchozí je světlý režim, tmavý si uživatel zapne přepínačem v hlavičce (html[data-tema="tmave"], public/tema.js).
   Pravidla vzhledu: bílé karty se zaoblením 20 px na chladném šedém pozadí, tlačítka a navigace jako pilulky,
   sekundární ovládání ze skla (průsvitné, rozmazané pozadí, světlá horní hrana), stíny a zaoblení jen přes proměnné níž.
   Grafy dál bez kruhů a koláčů. Barva má jeden význam: inkoust = hlavní akce a aktivní položka, modrá = akcent a odkaz,
   zdroj dat = tečka u názvu karty (AI fialová, Google a Seznam oranžová, web zelená), zelená jen růst a úspěch, červená jen chyba.
   Písmo Hanken Grotesk. Předchozí vzhled: git historie (commit 5eaa9f8).
   Sklo III (2026-10-08 odpoledne, Martin: „víc barev jako ta modrá a oranžová, víc prosklené, víc animací“): pod sklem svítí
   tři barevná světla (modré, oranžové, fialové), karty a panely jsou průsvitné se světlou hranou, tlačítka jsou sklo s odleskem,
   hlavička plave jako skleněný ostrov, druhá zvýrazněná dlaždice je oranžová. Pohyb vypne prefers-reduced-motion. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokeny jen pro aplikaci (rozměry rozložení, zebra tabulek, štítek ukázky). Paleta, sklo, světlo, tlačítka, stíny a
   poloměry jsou pro web i aplikaci v jednom souboru public/css/sklo.css (načítá se první). */
:root {
  --zebra: #fafbfc;
  --hover-radek: #f2f6ff;
  /* ukázková data: žlutý štítek, aby se nikdy nepletla se skutečným měřením */
  --ukazka-pozadi: #fef3c7;
  --ukazka-text: #78350f;
  --ukazka-linka: #fcd34d;
  --sirka-panelu: 248px;
  --vyska-lisity: 64px;
  /* hlavička a levý panel plavou jako skleněné ostrovy, tohle je mezera kolem nich */
  --mezera-ostrov: 12px;
}
:root[data-tema="tmave"] {
  --zebra: #14171e;
  --hover-radek: #171d2c;
  --ukazka-pozadi: #2a2410;
  --ukazka-text: #fcd34d;
  --ukazka-linka: #6b5a1a;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--inkoust);
  font-family: var(--pisma);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* aplikace a sdílený přehled jsou hustší (14 px), veřejné stránky čtou lidé, kteří rozhodují, proto 16 px */
body.aplikace, body.sdileny { font-size: 14px; line-height: 1.5; }
/* barevné světlo pod sklem (podklad s oknem AI chatu a filtry): pevná vrstva za celým obsahem, při posunu stojí
   (samostatná vrstva místo background-attachment: fixed, aby prohlížeč při posunu nepřekresloval celé pozadí) */
body.aplikace, body.sdileny, body.verejne { background: var(--pozadi); }
body.aplikace::before, body.sdileny::before, body.verejne::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--svetla);
}

/* světlá hrana skla: proužek 1 px po obvodu, nahoře plný a dolů slábne (maska nechá jen okraj), jako na webu */
/* (levý panel se posouvá uvnitř sebe, hranu by ořízl, proto má světlou hranu jen vnitřním stínem v --stin-panel) */
:is(.karta, .kpi, .horni, .oblast, .auth-karta, .sekce-ucet, .tarif, .balicek, .prepinac-seznam, .uzivatel-seznam, .info-telo)::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: var(--sklo-hrana);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* světlo za kurzorem na kartách a dlaždicích: app.js nastaví --mx a --my, bez JavaScriptu se nic neukáže */
:is(.karta, .kpi, .oblast, .tarif, .balicek)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--kurzor-svetlo), transparent 46%);
}
@media (hover: hover) {
  :is(.karta, .kpi, .oblast, .tarif, .balicek):hover::after { opacity: 1; }
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--inkoust); text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--inkoust); text-decoration-thickness: 2px; }
strong { font-weight: 650; }
small, .male { font-size: 13px; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--linka); margin: 24px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 2px;
}

.preskocit {
  position: absolute;
  left: 8px;
  top: -60px;
  background: var(--inkoust);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--polomer);
  z-index: 100;
}
.preskocit:focus { top: 8px; }

.skryty-popisek {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.text-tlumeny { color: var(--tlumeny); }
.cislo { text-align: right; font-variant-numeric: tabular-nums; }
.tlacitka-rada { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- pruh ukázkového režimu ---------- */

.pruh-ukazka {
  background: #0b0d12;
  color: #fff;
  border-bottom: 1px solid var(--linka);
  text-align: center;
  padding: 5px 16px;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.pruh-ukazka strong { color: #fdba74; font-weight: 650; }

/* ---------- logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--inkoust);
}
.logo:hover { text-decoration: none; }

/* ---------- aplikace: horní lišta ---------- */

/* hlavička je plovoucí skleněný ostrov (jako hlavička webu): obsah pod ní při posunu prosvítá rozmazaný */
.horni {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--vyska-lisity);
  margin: var(--mezera-ostrov) 16px 0;
  padding: 0 12px 0 0;
  background: var(--plocha-panel);
  -webkit-backdrop-filter: var(--sklo-rozmazani);
  backdrop-filter: var(--sklo-rozmazani);
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer-karta);
  box-shadow: var(--stin-panel);
  position: sticky;
  top: var(--mezera-ostrov);
  z-index: 20;
}
.horni-logo {
  display: flex;
  align-items: center;
  flex: none;
  width: var(--sirka-panelu);
  height: 100%;
  padding-left: 22px;
}
.horni-mezera { flex: 1; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.prepinac, .uzivatel { position: relative; }
/* přepínač webu, zůstatek a účet jsou skleněné pilulky (podklad Boltshift: „This Month“, „Export“) */
.prepinac > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 38px 0 16px;
  border: 1px solid var(--sklo-tlacitko-linka);
  border-radius: var(--pilulka);
  background: var(--sklo-tlacitko);
  box-shadow: var(--stin-sklo);
  min-width: 260px;
  position: relative;
  transition: box-shadow 0.35s var(--pohyb), transform 0.35s var(--pohyb), background-color 0.2s;
}
/* skleněné pilulky v hlavičce se při najetí zvednou a zjasní (podklad Boltshift: „This Month“, „Export“) */
:is(.prepinac > summary, .zustatek:not(.zustatek-nula), .prepinac-tematu, .uzivatel > summary):hover { background: var(--sklo-tlacitko-hover); border-color: var(--linka-silna); box-shadow: var(--stin-sklo-hover); }
@media (prefers-reduced-motion: no-preference) {
  :is(.prepinac > summary, .zustatek, .prepinac-tematu, .uzivatel > summary):hover { transform: translateY(-1px); }
}
.prepinac > summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--inkoust-2);
  border-bottom: 1.5px solid var(--inkoust-2);
  transform: translateY(-70%) rotate(45deg);
}
.prepinac-popisek { font-size: 12px; color: var(--tlumeny); line-height: 1.2; flex: none; }
.prepinac > summary strong { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.prepinac-seznam, .uzivatel-seznam {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 90vw);
  background: var(--sklo-silne);
  -webkit-backdrop-filter: var(--sklo-rozmazani);
  backdrop-filter: var(--sklo-rozmazani);
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer-karta);
  box-shadow: var(--stin-vyssi);
  padding: 6px;
  z-index: 30;
  transform-origin: 50% 0;
}
/* rozbalené nabídky a vysvětlení pod „i“ vyjedou jemně dolů (zavřené jsou skryté, takže se nájezd přehraje při každém otevření) */
@media (prefers-reduced-motion: no-preference) {
  details[open] > :is(.prepinac-seznam, .uzivatel-seznam, .info-telo) { animation: vyjeti 0.32s var(--pohyb) both; }
}
@keyframes vyjeti { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.uzivatel-seznam { left: auto; right: 0; min-width: 220px; }
.prepinac-seznam a, .uzivatel-seznam a, .uzivatel-seznam button {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--polomer-mala);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  color: var(--inkoust);
  text-align: left;
  cursor: pointer;
}
.prepinac-seznam a span { font-size: 12px; color: var(--tlumeny); }
.prepinac-seznam a:hover, .uzivatel-seznam a:hover, .uzivatel-seznam button:hover { background: var(--pozadi-jemne); text-decoration: none; }
.prepinac-seznam a[aria-current="true"] { background: var(--akcent-svetly); }
.prepinac-novy { font-weight: 650; border-top: 1px solid var(--linka); margin-top: 4px; border-radius: 0 0 var(--polomer-mala) var(--polomer-mala) !important; }
.uzivatel-email { margin: 0; padding: 8px 12px 6px; font-size: 12px; color: var(--tlumeny); overflow-wrap: anywhere; }

.zustatek {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--pilulka);
  border: 1px solid var(--sklo-tlacitko-linka);
  background: var(--sklo-tlacitko);
  box-shadow: var(--stin-sklo);
  text-decoration: none;
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.35s var(--pohyb), transform 0.35s var(--pohyb);
}
.zustatek:hover { text-decoration: none; }
/* malá modrá mince před zůstatkem (účet a kredity mají modrou, stejně jako čtvereček účtu) */
.zustatek:not(.zustatek-nula)::before { content: ""; width: 8px; height: 8px; margin-right: 4px; border-radius: var(--pilulka); background: var(--prechod-ucet); }
.zustatek-nula { background: var(--lesk-tlacitko), var(--tl-pozadi); border-color: var(--tl-pozadi); color: var(--tl-text); font-weight: 600; box-shadow: var(--stin-tlacitko); }
.zustatek-nula:hover { background: var(--lesk-tlacitko), var(--tl-pozadi-hover); }
.zustatek-akce { font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* přepínač světlého a tmavého režimu: kulaté skleněné tlačítko, bez JavaScriptu se neukáže */
.prepinac-tematu {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--pilulka);
  border: 1px solid var(--sklo-tlacitko-linka);
  background: var(--sklo-tlacitko);
  box-shadow: var(--stin-sklo);
  color: var(--inkoust);
  cursor: pointer;
  flex: none;
  transition: box-shadow 0.35s var(--pohyb), transform 0.35s var(--pohyb);
}
.js .prepinac-tematu { display: inline-grid; }
.prepinac-tematu svg { width: 18px; height: 18px; }
/* ikona slunce a měsíce se při přepnutí pootočí (třídu tema-prepnuto dá app.js až po klepnutí, při načtení stránky se netočí) */
@media (prefers-reduced-motion: no-preference) {
  .tema-prepnuto .prepinac-tematu svg { animation: otoceni 0.6s var(--pohyb); }
}
@keyframes otoceni { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }
.prepinac-tematu .ikona-slunce { display: none; }
:root[data-tema="tmave"] .prepinac-tematu .ikona-slunce { display: block; }
:root[data-tema="tmave"] .prepinac-tematu .ikona-mesic { display: none; }

.uzivatel > summary { display: flex; align-items: center; gap: 10px; padding: 3px 14px 3px 3px; border-radius: var(--pilulka); border: 1px solid var(--sklo-tlacitko-linka); background: var(--sklo-tlacitko); box-shadow: var(--stin-sklo); transition: box-shadow 0.35s var(--pohyb), transform 0.35s var(--pohyb); }
.uzivatel-znak {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--pilulka);
  background: var(--zvyrazneni);
  color: #fff;
  font-weight: 650;
  font-size: 14px;
}
.uzivatel-jmeno { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }

/* ---------- aplikace: levý panel (podklad s menu: zaoblený panel, aktivní položka jako černá pilulka) ---------- */

.rozlozeni {
  display: grid;
  grid-template-columns: var(--sirka-panelu) minmax(0, 1fr);
  gap: 0 8px;
  flex: 1;
  align-items: start;
  padding: 0 0 0 16px;
}
/* levý panel: skleněný ostrov pod hlavičkou, barevné světlo pozadí jím prosvítá */
.panel {
  position: sticky;
  top: calc(var(--vyska-lisity) + 2 * var(--mezera-ostrov));
  max-height: calc(100vh - var(--vyska-lisity) - 3 * var(--mezera-ostrov));
  min-height: calc(100vh - var(--vyska-lisity) - 3 * var(--mezera-ostrov));
  margin-top: var(--mezera-ostrov);
  overflow-y: auto;
  padding: 14px 12px 20px;
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer-karta);
  background: var(--plocha-panel);
  box-shadow: var(--stin-panel);
}
.nav ul { list-style: none; margin: 0 0 4px; padding: 0; }
.nav-nadpis {
  margin: 18px 12px 6px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tlumeny);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.nav > .nav-nadpis:first-child { margin-top: 2px; }
/* vybraný web nahoře v panelu: barevný kruh s písmenem (stejný jako v Moje weby), doména a název */
.nav-web {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid var(--sklo-linka);
}
.nav-web .avatar { width: 36px; height: 36px; font-size: 15px; }
.nav-web-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--inkoust);
}
.nav-web-text small { display: block; margin-top: 2px; font-weight: 500; color: var(--tlumeny); font-size: 12px; }
.nav-polozka {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 14px;
  margin-bottom: 2px;
  border-radius: var(--pilulka);
  text-decoration: none;
  color: var(--inkoust-2);
  font-weight: 500;
  font-size: 14px;
  position: relative;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.35s var(--pohyb);
}
.nav-polozka .ikona { width: 18px; height: 18px; color: var(--tlumeny); transition: transform 0.35s var(--pohyb); }
/* ikony v nabídce mají barvu zdroje dat, stejnou jako tečka u karty: AI fialová, Google a Seznam oranžová, web zelená, účet modrá */
.nav-polozka :is(.ikona-odpovedi, .ikona-mereni) { color: var(--ai); }
.nav-polozka :is(.ikona-google, .ikona-pozice) { color: var(--google); }
.nav-polozka :is(.ikona-zdravi, .ikona-zmeny) { color: var(--web); }
.nav-polozka :is(.ikona-prehled, .ikona-weby, .ikona-kredity) { color: var(--akcent); }
/* najetí: bílá skleněná pilulka (podklad s menu: „Enlarz System“), aktivní položka černá pilulka */
.nav-polozka:hover { background: var(--sklo-tlacitko); box-shadow: var(--stin-sklo); color: var(--inkoust); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-polozka:hover .ikona { transform: scale(1.14); }
}
.nav-aktivni, .nav-aktivni:hover { background: var(--lesk-tlacitko), var(--tl-pozadi); color: var(--tl-text); font-weight: 600; box-shadow: var(--stin-tlacitko); }
.nav-polozka.nav-aktivni .ikona { color: var(--tl-text); transform: none; }
.ikona { flex: none; }
.nav-patka { margin: 20px 12px 0; font-size: 12px; color: var(--tlumeny); }
.nav-patka a { color: var(--tlumeny); }

.menu-mobil { display: none; }

.obsah {
  padding: 20px clamp(16px, 2.2vw, 32px) 64px;
  min-width: 0;
  max-width: 1440px;
  width: 100%;
}

/* ---------- drobečková navigace, hlavička stránky, upozornění ---------- */

.drobecky { margin: 0 0 8px; }
.drobecky ol { display: flex; flex-wrap: wrap; gap: 2px 8px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--inkoust-2); }
.drobecky li + li::before { content: "/"; margin-right: 8px; color: var(--linka-silna); }
.drobecky a { color: var(--inkoust-2); text-decoration: none; }
.drobecky a:hover { color: var(--inkoust); text-decoration: underline; text-decoration-color: var(--akcent); }
.drobecky [aria-current="page"] { color: var(--inkoust-2); }

.nadpis-stranky { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.nadpis-stranky h1 { margin: 0; overflow-wrap: anywhere; }
.h1-web { color: var(--akcent-tmavy); text-decoration: none; }
.h1-web:hover { text-decoration: underline; text-decoration-color: var(--akcent); }
.podnadpis { margin: 4px 0 0; color: var(--inkoust-2); max-width: 76ch; font-size: 14px; }
.nadpis-akce { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tlacitko.tlacitko-ikona { padding: 0; width: 40px; min-width: 40px; }
.tlacitko-ikona svg { flex: none; width: 18px; height: 18px; stroke-width: 1.8; }

.upozorneni {
  border: 1px solid var(--linka);
  border-left-width: 4px;
  border-radius: var(--polomer);
  background: var(--plocha);
  box-shadow: var(--stin);
  padding: 12px 16px;
  margin: 0 0 16px;
}
.upozorneni > :last-child { margin-bottom: 0; }
.upozorneni-ok { border-color: var(--zelena); background: var(--zelena-svetla); }
.upozorneni-chyba { border-color: var(--cervena); background: var(--cervena-svetla); }
.upozorneni-varovani { border-color: var(--akcent); background: var(--akcent-svetly); }
.upozorneni-info { border-left-color: var(--inkoust-2); }

/* ---------- tlačítka ---------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  white-space: nowrap;
  border-radius: var(--pilulka);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.4s var(--pohyb), transform 0.4s var(--pohyb);
}
.tlacitko:hover { text-decoration: none; }
/* odlesk: světlý pruh, který při najetí přejede přes sklo zleva doprava (pod textem, nad pozadím tlačítka) */
.tlacitko::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--odlesk);
  transform: translateX(-130%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tlacitko:not([disabled]):hover { transform: translateY(-1px); }
  .tlacitko:not([disabled]):hover::after { transform: translateX(130%); transition: transform 0.85s var(--pohyb); }
}
.tlacitko:active:not([disabled]) { transform: translateY(0) scale(0.98); }
.tlacitko-mala { padding: 0 12px; min-height: 30px; font-size: 13px; }
/* hlavní akce: inkoustová pilulka s leskem nahoře (ve tmavém režimu bílá); při najetí ji zespodu prosvítí modré a oranžové světlo */
.tlacitko-primarni { background: var(--lesk-tlacitko), var(--tl-pozadi); color: var(--tl-text); border-color: var(--tl-pozadi); box-shadow: var(--stin-tlacitko); }
.tlacitko-primarni:hover { background: var(--lesk-tlacitko), var(--tl-pozadi-hover); box-shadow: var(--stin-tlacitko-hover); }
.tlacitko-primarni::after { background: var(--odlesk-primarni); }
/* vedlejší akce: sklo, nahoře světlejší, s jemnou linkou a světlou horní hranou */
.tlacitko-sekundarni { background: var(--sklo-tlacitko); -webkit-backdrop-filter: var(--sklo-rozmazani); backdrop-filter: var(--sklo-rozmazani); color: var(--inkoust); border-color: var(--sklo-tlacitko-linka); box-shadow: var(--stin-sklo); }
.tlacitko-sekundarni:hover { border-color: var(--linka-silna); background: var(--sklo-tlacitko-hover); box-shadow: var(--stin-sklo-hover); }
.tlacitko-nebezpecne { background: var(--sklo-tlacitko); color: var(--cervena); border-color: var(--cervena); }
.tlacitko-nebezpecne:hover { background: var(--cervena-svetla); }
.tlacitko[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- formuláře ---------- */

.pole { margin: 0 0 16px; }
.pole label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.pole-nepovinne { font-weight: 400; color: var(--tlumeny); font-size: 12px; }
.pole input:not([type="checkbox"]):not([type="radio"]),
.pole select,
.pole textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 14px;
  font: inherit;
  color: var(--inkoust);
  background: var(--karta);
  border: 1px solid var(--linka-silna);
  border-radius: var(--polomer);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pole textarea { resize: vertical; }
.pole input:hover, .pole select:hover, .pole textarea:hover { border-color: var(--tlumeny); }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--akcent); box-shadow: var(--stin-fokus); }
.pole-napoveda { margin: 4px 0 0; font-size: 12px; color: var(--tlumeny); }
.pole-chyba { margin: 4px 0 0; font-size: 13px; color: var(--cervena); font-weight: 600; }
.pole-s-chybou input, .pole-s-chybou select, .pole-s-chybou textarea { border-color: var(--cervena) !important; }
.pole-zatrzitko .zatrzitko { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; cursor: pointer; }
.zatrzitko input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--akcent); }

/* ---------- karty: bílé s čtverečkem podle zdroje ---------- */

.mrizka-karet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; align-items: stretch; }
.mrizka-karet > .karta { grid-column: span 6; }
.mrizka-karet > .karta-ai:not(.karta-siroka) { grid-column: span 7; }
.mrizka-karet > .karta-google:not(.karta-siroka) { grid-column: span 5; }
/* karta je průsvitné sklo (barevné světlo pozadí jí jemně prosvítá) se světlou hranou; v pravém horním rohu svítí
   barva zdroje dat (AI fialová, Google a Seznam oranžová, web zelená) */
.karta {
  --zb: var(--inkoust);
  --zb-svetla: var(--akcent-svetly);
  --zare: transparent;
  position: relative;
  background: radial-gradient(640px 220px at 100% 0%, var(--zare), transparent 72%), var(--plocha);
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer-karta);
  box-shadow: var(--stin);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.obsah > .karta { margin-bottom: 18px; }
.karta-ai { --zb: var(--ai); --zb-svetla: var(--ai-svetla); --zare: var(--zare-ai); }
.karta-google { --zb: var(--google); --zb-svetla: var(--google-svetla); --zare: var(--zare-google); }
.karta-web { --zb: var(--web); --zb-svetla: var(--web-svetla); --zare: var(--zare-web); }
.karta .tabulka-obal { background: transparent; }
.mrizka-karet > .karta-siroka { grid-column: 1 / -1; }
.karta-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 16px 18px 6px 22px; min-height: 52px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--inkoust);
  white-space: nowrap;
}
.cip::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--pilulka); background: var(--zb, var(--akcent)); outline: 3px solid var(--zb-svetla, var(--akcent-svetly)); }
.cip-ucet { --zb: var(--akcent); }
.cip-ai { --zb: var(--ai); }
.cip-google { --zb: var(--google); }
.cip-web { --zb: var(--web); }
.karta-chip { font-size: 12px; font-weight: 500; color: var(--tlumeny); white-space: nowrap; }
.karta-stari { margin-left: auto; font-size: 12px; color: var(--tlumeny); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blok-akce { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.karta-telo { padding: 14px 22px 22px; flex: 1; min-width: 0; container-type: inline-size; }
.karta-telo-plne { padding: 0; }
.karta-telo-plne .tabulka-obal { border: 0; border-top: 1px solid var(--linka-jemna); border-radius: 0 0 var(--polomer-karta) var(--polomer-karta); }
.karta-hodnota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.karta-hodnota strong { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--inkoust); }
.zmena { font-size: 12px; font-weight: 650; }
.zmena-nahoru { color: var(--zelena); background: var(--zelena-svetla); padding: 1px 8px; border-radius: var(--pilulka); }
.zmena-dolu, .zmena-stejne, .zmena-sum { color: var(--tlumeny); }
.karta-patka { padding: 12px 22px 14px; border-top: 1px solid var(--linka-jemna); font-size: 13px; font-weight: 600; background: transparent; border-radius: 0 0 var(--polomer-karta) var(--polomer-karta); }
.karta-patka a { color: var(--akcent-tmavy); text-decoration: none; }
.karta-patka a::after { content: " →"; }
.karta-patka a:hover { text-decoration: underline; text-decoration-color: var(--akcent); }
.karta-prazdna .karta-telo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; color: var(--tlumeny); min-height: 120px; }
.karta-prazdna-text { margin: 0; max-width: 44ch; }
.karta-popis { margin: 0 0 10px; color: var(--inkoust-2); font-size: 14px; }
.karta-zdroj { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--linka-jemna); font-size: 12px; line-height: 1.5; color: var(--tlumeny); }
.karta-zdroj span { display: inline; }
.karta-radky { margin: 0 0 8px; display: grid; gap: 0; }
.karta-radky > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--linka-jemna); font-size: 14px; }
.karta-radky > div:last-child { border-bottom: 0; }
.karta-radky dt { color: var(--inkoust-2); flex: 1 1 40%; overflow-wrap: break-word; }
.karta-radky dd { margin: 0; flex: 1 1 56%; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }

/* štítek UKÁZKA: žlutý, aby se smyšlená data nikdy nepletla se skutečným měřením */
.stitek-ukazka {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 8px;
  border-radius: var(--pilulka);
  border: 1px solid var(--ukazka-linka);
  color: var(--ukazka-text);
  background: var(--ukazka-pozadi);
  white-space: nowrap;
  line-height: 1.5;
}

/* ---------- ikona "i" s vysvětlením pod ní ---------- */

.info { position: relative; display: inline-flex; vertical-align: middle; }
.info > summary {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--pilulka);
  color: var(--tlumeny);
  cursor: pointer;
}
.info > summary:hover, .info[open] > summary { color: var(--inkoust); background: var(--pozadi); }
.info-telo {
  position: absolute;
  z-index: 25;
  top: calc(100% + 4px);
  left: -8px;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  background: var(--sklo-silne);
  -webkit-backdrop-filter: var(--sklo-rozmazani);
  backdrop-filter: var(--sklo-rozmazani);
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer);
  box-shadow: var(--stin-vyssi);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--inkoust-2);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}
/* zavřené vysvětlení nesmí přidat šířku stránky (u okraje by vyčnívalo a na telefonu vznikl vodorovný posun) */
details.info:not([open]) > .info-telo { display: none; }
.info-telo p { margin: 0 0 8px; }
.info-telo > :last-child { margin-bottom: 0; }
.karta-hlava .info-telo { left: auto; right: -8px; }
.info-telo.info-vpravo { left: auto; right: -8px; }
.info-telo.info-vlevo { left: -8px; right: auto; }

/* ---------- metriky (popisek s "i", velké číslo, změna, drobný řádek) ---------- */

/* metriky uvnitř karty jsou samostatné dlaždice na jemném podkladu (podklad Boltshift: „Number of Sales“, „Total Revenue“) */
.metriky { display: grid; gap: 10px; margin: 0; }
.metriky-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metriky-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metriky-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metriky-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* oddělovače jsou jednopixelové ohraničení: položky se o 1 px překrývají a okraj kontejneru (overflow hidden) přebytek ořízne */
.metriky .metrika { padding: 14px 16px; background: var(--plocha-jemna); border: 1px solid var(--linka-jemna); border-radius: var(--polomer); box-shadow: var(--stin-vnitrni); }
.metrika { min-width: 0; }
.metrika-nazev { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--tlumeny); }
.metrika-nazev .info > summary { width: 20px; height: 20px; }
.metrika-cislo { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--inkoust); overflow-wrap: anywhere; }
.metrika-zmena { margin: 2px 0 0; }
.metrika-drobne { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--tlumeny); overflow-wrap: anywhere; }
.metrika-text .metrika-cislo { font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.metrika-chybi-text { margin: 2px 0 8px; font-size: 14px; color: var(--tlumeny); }
.metrika-chybi .tlacitko { align-self: flex-start; }
.cislo-velke { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- ikony systémů, avatar webu, ikona ve čtverci ---------- */

.ikona-motor { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pilulka); flex: none; color: #fff; background: var(--inkoust-2); }
.ikona-motor-claude { background: #c2652b; }
.ikona-motor-google { background: var(--google); }
.ikona-motor-seznam { background: #b3261e; }

/* avatar webu a ikona oblasti: barevný přechod s bílým znakem a lesklou horní hranou (jako barevné kruhy v podkladu Boltshift) */
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pilulka); flex: none; font-weight: 700; font-size: 16px; color: #ffffff; box-shadow: var(--stin-kruh); }
.avatar-0 { background: linear-gradient(140deg, #60a5fa 0%, #2563eb 100%); }
.avatar-1 { background: linear-gradient(140deg, #a78bfa 0%, #6d28d9 100%); }
.avatar-2 { background: linear-gradient(140deg, #34d399 0%, #047857 100%); }
.avatar-3 { background: linear-gradient(140deg, #fdba74 0%, #ea580c 100%); }
.avatar-4 { background: linear-gradient(140deg, #f9a8d4 0%, #db2777 100%); }
.avatar-5 { background: linear-gradient(140deg, #94a3b8 0%, #475569 100%); }

.ikona-ctverec { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pilulka); flex: none; color: #ffffff; box-shadow: var(--stin-kruh); }
.ikona-ctverec .ikona { width: 22px; height: 22px; }
.ikona-ctverec-ai { background: var(--prechod-ai); }
.ikona-ctverec-google { background: var(--prechod-google); }
.ikona-ctverec-web { background: var(--prechod-web); }
.ikona-ctverec-ucet { background: var(--prechod-ucet); }

/* ---------- odznaky, prázdné stavy, načítání ---------- */

.odznak { display: inline-block; padding: 2px 9px; border-radius: var(--pilulka); font-size: 12px; font-weight: 600; background: var(--pozadi-hluboke); color: var(--inkoust-2); white-space: nowrap; }
.odznak-ok { background: var(--zelena-svetla); color: var(--zelena); }
.odznak-chyba { background: var(--cervena-svetla); color: var(--cervena); }
.odznak-varovani { background: var(--ukazka-pozadi); color: var(--ukazka-text); }
.odznak-info { background: var(--akcent-svetly); color: var(--akcent-tmavy); }

.prazdny-stav { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px; background: var(--plocha); border: 1px dashed var(--linka-silna); border-radius: var(--polomer-karta); }
.prazdny-stav h2 { margin-bottom: 6px; }
.prazdny-stav p { color: var(--tlumeny); max-width: 52ch; margin-inline: auto; }
.prazdny-stav .tlacitko { margin-top: 4px; }
.prazdny-ikona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: var(--pilulka); background: var(--pozadi-hluboke); color: var(--inkoust-2); }
.prazdny-ikona svg { width: 22px; height: 22px; }
.prazdny-ikona-mala { width: 32px; height: 32px; margin-bottom: 0; }
.prazdny-ikona-mala svg { width: 18px; height: 18px; }
.prazdny-stav-chyba { border-color: var(--cervena); border-style: solid; }
.prazdny-stav-chyba .prazdny-ikona { background: var(--cervena-svetla); color: var(--cervena); }

/* načítání: kostra s pruhem, který se posouvá (v klidu stojí, viz prefers-reduced-motion) */
.nacitani { display: grid; gap: 8px; padding: 4px 0; }
.kostra { display: block; height: 14px; border-radius: var(--polomer-mala); background: linear-gradient(90deg, var(--pozadi-hluboke) 0%, var(--linka-jemna) 50%, var(--pozadi-hluboke) 100%); background-size: 200% 100%; animation: kostra-posun 1.4s linear infinite; }
.kostra-kratka { width: 40%; }
.kostra-cislo { height: 30px; width: 96px; }
@keyframes kostra-posun { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- tabulky ---------- */

.tabulka-obal { overflow: auto; max-height: 640px; background: var(--plocha); border: 1px solid var(--sklo-linka); border-radius: var(--polomer-karta); box-shadow: var(--stin); }
.tabulka { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabulka th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tlumeny);
  font-weight: 500;
  padding: 0 16px;
  height: 42px;
  border-bottom: 1px solid var(--linka);
  background: var(--pozadi-jemne);
  white-space: nowrap;
}
.tabulka td { padding: 11px 16px; line-height: 20px; border-bottom: 1px solid var(--linka-jemna); vertical-align: top; }
.tabulka tbody tr:nth-child(even) td { background: var(--zebra); }
.tabulka tbody tr:hover td { background: var(--hover-radek); }
.tabulka tr:last-child td { border-bottom: 0; }
.tabulka th.cislo { text-align: right; }
.tabulka-prazdna { color: var(--tlumeny); }
.tabulka-kompakt { font-size: 13px; }
.tabulka-kompakt th { padding: 0 8px; height: 32px; background: transparent; }
.tabulka-kompakt td { padding: 6px 8px; }
.karta-telo .tabulka-kompakt { margin: 0; }
.karta-telo .tabulka-obal:has(.tabulka-kompakt) { border: 0; border-radius: 0; max-height: none; box-shadow: none; }

.meridlo { display: inline-flex; align-items: center; gap: 10px; }
.meridlo meter { width: 120px; height: 8px; -webkit-appearance: none; appearance: none; background: var(--pozadi-hluboke); border: 0; border-radius: var(--pilulka); overflow: hidden; }
.meridlo meter::-webkit-meter-bar { background: var(--pozadi-hluboke); border: 0; border-radius: var(--pilulka); height: 8px; }
/* Měřidla ukazují podíl hlasu a postup měření (data z AI), ne hodnocení: barva zdroje AI, ne zelená „dobře“ ani červená „špatně“
   (zelená je jen růst a úspěch, červená jen chyba). Všechna volání meridlo() jsou bez prahů low, high a optimum. */
.meridlo meter::-webkit-meter-optimum-value,
.meridlo meter::-webkit-meter-suboptimum-value,
.meridlo meter::-webkit-meter-even-less-good-value { background: var(--ai); border-radius: var(--pilulka); }
.meridlo meter::-moz-meter-bar { background: var(--ai); border-radius: var(--pilulka); }
.tabulka .meridlo meter { width: 84px; }
.tabulka .meridlo-text { white-space: nowrap; }
.meridlo-text { font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- přihlášení a jednoduché stránky ---------- */

/* přihlášení a registrace: skleněná karta nad barevným světlem stránky (podklad s filtry a oknem AI chatu) */
.auth-karta {
  position: relative;
  max-width: 440px;
  margin: 40px auto;
  background: var(--sklo-silne);
  -webkit-backdrop-filter: var(--sklo-rozmazani);
  backdrop-filter: var(--sklo-rozmazani);
  border: 1px solid var(--sklo-linka);
  border-radius: var(--polomer-sklo);
  box-shadow: var(--stin-sklo), var(--stin-vyssi);
  padding: 36px;
}
.auth-karta h1 { font-size: 24px; margin-bottom: 20px; }
.auth-karta .tlacitko { width: 100%; min-height: 46px; }
.auth-karta .pole input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; }
.auth-pod { margin: 16px 0 0; font-size: 14px; color: var(--tlumeny); text-align: center; }
.jen-ukazka { border: 1px dashed var(--ukazka-linka); background: var(--ukazka-pozadi); color: var(--ukazka-text); border-radius: var(--polomer); padding: 12px 14px; margin: 16px 0; overflow-wrap: anywhere; font-size: 13px; }
.jen-ukazka strong { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }

.sekce-ucet { position: relative; background: var(--plocha); border: 1px solid var(--sklo-linka); border-radius: var(--polomer-karta); box-shadow: var(--stin); padding: 24px; margin-bottom: 16px; max-width: 640px; }
.sekce-ucet h2 { margin-bottom: 14px; }
.sekce-nebezpecna { border-color: var(--cervena); }
.udaj { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; }
.udaj dt { color: var(--tlumeny); min-width: 120px; }
.udaj dd { margin: 0; overflow-wrap: anywhere; }

.chyba-stranka { max-width: 560px; margin: 48px auto; text-align: center; }
.chyba-kod { font-size: 56px; font-weight: 700; margin: 0; color: var(--akcent-tmavy); line-height: 1; letter-spacing: -0.03em; }

/* ---------- veřejné stránky ---------- */

/* hlavička veřejných stránek plave jako skleněný ostrov, stejně jako v aplikaci a na webu */
.verejna-hlava { width: calc(100% - 32px); max-width: 1120px; margin: var(--mezera-ostrov) auto 0; background: var(--plocha-panel); -webkit-backdrop-filter: var(--sklo-rozmazani); backdrop-filter: var(--sklo-rozmazani); border: 1px solid var(--sklo-linka); border-radius: var(--polomer-karta); box-shadow: var(--stin-panel); position: sticky; top: var(--mezera-ostrov); z-index: 20; }
.verejna-hlava-vnitrek { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.verejna-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.verejna-nav a:not(.tlacitko) { text-decoration: none; font-weight: 550; font-size: 15px; }
.verejna-nav a:not(.tlacitko):hover { text-decoration: underline; text-decoration-color: var(--akcent); text-decoration-thickness: 2px; }
.verejny-obsah { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 36px 20px 64px; }
.verejna-patka { border-top: 1px solid var(--linka); background: var(--sklo); font-size: 14px; color: var(--inkoust-2); }
.verejna-patka-vnitrek { max-width: 1120px; margin: 0 auto; padding: 22px 20px; }
.verejna-patka p { margin: 0 0 6px; }
.verejna-patka-odkazy a { margin-right: 16px; }
body.verejne .tlacitko { min-height: 44px; }
body.verejne h1 { font-size: 28px; }
body.verejne h2 { font-size: 20px; }
body.verejne h3 { font-size: 16px; }

/* ---------- kontejnerové úpravy karet (podle šířky karty, ne okna) ---------- */

@container (max-width: 520px) {
  .metriky-3, .metriky-4, .metriky-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 330px) {
  .metriky-2, .metriky-3, .metriky-4, .metriky-5 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobil a malé okno ---------- */

@media (max-width: 1100px) {
  .mrizka-karet > .karta, .mrizka-karet > .karta-ai:not(.karta-siroka), .mrizka-karet > .karta-google:not(.karta-siroka) { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .rozlozeni { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .panel { display: none; }
  .menu-mobil { display: block; margin: 10px 12px 0; background: var(--plocha-panel); -webkit-backdrop-filter: var(--sklo-rozmazani); backdrop-filter: var(--sklo-rozmazani); border: 1px solid var(--sklo-linka); border-radius: var(--polomer-karta); box-shadow: var(--stin-panel); }
  .menu-mobil > summary { padding: 12px 16px; font-weight: 650; position: relative; }
  .menu-mobil > summary::after { content: "▾"; margin-left: 8px; }
  .menu-mobil[open] > summary::after { content: "▴"; }
  .menu-mobil .nav { padding: 0 12px 14px; }
  /* na telefonu hlavička nelepí (zabírala by výšku), ale zůstává skleněný ostrov */
  /* dva řádky jako mřížka: logo, režim a účet nahoře; přepínač webu se zůstatkem dole (tři pilulky vedle loga se do 375 px nevešly) */
  .horni { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo tema ucet" "web web zustatek"; align-items: center; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; height: auto; position: relative; top: auto; }
  .horni-logo { grid-area: logo; width: auto; height: auto; padding-left: 0; border-right: 0; }
  .prepinac { grid-area: web; min-width: 0; }
  .prepinac > summary { min-width: 0; width: 100%; }
  .prepinac-seznam { width: 100%; max-width: none; }
  .prepinac-tematu { grid-area: tema; }
  .uzivatel { grid-area: ucet; justify-self: end; width: max-content; }
  .zustatek { grid-area: zustatek; justify-self: end; }
  .uzivatel-jmeno { display: none; }
  .uzivatel > summary { padding: 3px; }
  .horni-mezera { display: none; }
}

@media (max-width: 720px) {
  .mrizka-karet { grid-template-columns: minmax(0, 1fr); }
  .mrizka-karet > .karta, .mrizka-karet > .karta-ai:not(.karta-siroka), .mrizka-karet > .karta-google:not(.karta-siroka) { grid-column: 1 / -1; }
  h1 { font-size: 22px; }
  body.verejne h1 { font-size: 24px; }
  .obsah { padding: 14px 16px 48px; }
  .auth-karta { margin: 16px auto; padding: 24px 18px; }
  .karta-hodnota strong { font-size: 28px; }
  .verejny-obsah { padding: 24px 16px 48px; }
  .verejna-hlava-vnitrek { padding: 12px 16px; }
  .nadpis-akce { width: 100%; }
  .tlacitko { min-height: 40px; white-space: normal; text-align: center; max-width: 100%; }
  .tlacitko-mala { min-height: 32px; }
  .karta-telo { padding: 14px 16px 16px; }
  .karta-hlava { padding: 14px 14px 4px 16px; }
  .metriky .metrika { padding: 12px 14px; }
  .tabulka-obal { max-height: 520px; }
}

/* ---------- přechody mezi stránkami (View Transitions, Chrome a Safari; jinde se stránka přepne hned jako dřív) ----------
   Stará stránka rychle zmizí, nová se prolne a černá pilulka v levém panelu přejede z položky na položku.
   Obnovení stránky (běžící měření, data-obnovit) přechod nespouští. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 0.16s ease-out both mizeni; }
::view-transition-new(root) { animation: 0.34s var(--pohyb) both objeveni; }
.panel .nav-aktivni { view-transition-name: aktivni-polozka; }
::view-transition-group(aktivni-polozka) { animation-duration: 0.5s; animation-timing-function: var(--pohyb); }
@keyframes mizeni { to { opacity: 0; } }
@keyframes objeveni { from { opacity: 0; } }
/* přepnutí světlého a tmavého režimu: nová podoba se rozlije kruhem od tlačítka (app.js), pilulka se přitom nehýbe */
.prepinani-tematu::view-transition-old(root),
.prepinani-tematu::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.prepinani-tematu .panel .nav-aktivni { view-transition-name: none; }

@media print {
  body.aplikace::before, body.sdileny::before, body.verejne::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .kostra { animation: none !important; }
  .tlacitko::after { display: none; }
}