/* MESHVIX 3D — jeden stylopis pre uvodnu stranku aj studio. */

/* Inter je uz v projekte kvoli 3D textu, tak ho pouzijeme aj na rozhranie.
   TTF je vacsi nez woff2, ale server ho posiela zabalene a odpada tym
   zavislost na cudzom CDN - stranka funguje aj bez internetu. */
@font-face {
  font-family: "Inter UI";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter UI";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 600 800;
  font-display: swap;
}

/* ------------------------------------------------------------------ farby

   Zlta, cierna, siva -- zadal Jakub 25. 8. 2026.

   ZLTA JE PLOCHA, NIE ATRAMENT. Toto je cely vtip tejto palety a je to
   jediny dovod, preco su tu tokeny dva a nie jeden. #ffc800 na bielom ma
   kontrast 1,5:1 -- nedaju sa nim pisat pismena ani kreslit obrysy. Da sa
   nim ale VYPLNIT plocha a napisat na nu cierno: 12,4:1.

     --brand        zlta VYPLN (tlacidlo, znacka, zvyraznenie)
     --brand-ink    to, co sa pise NA zltu -- takmer cierna
     --brand-text   zlta pouzita ako ATRAMENT alebo obrys: v svetlom rezime
                    tmava jantarova (6,9:1 na bielom), v tmavom priamo zlta

   Kto napise `color: var(--brand)`, vyrobi necitatelny text. Existuje na to
   kontrola v `npm run vzhlad`. */

:root {
  /* POVIE PREHLIADACU, V AKOM REZIME KRESLI VLASTNE PRVKY.
     Bez toho zostavaju posuvniky, zaskrtavatka, rozbalovacie zoznamy aj
     posuvne pruhy SVETLE aj v tmavej teme -- a nie je to drobnost:
     `<button>` bez vlastneho pozadia dostane systemovu `ButtonFace`, teda
     #f0f0f0, a v tmavom prostredi svieti ako lampa.
     Nasiel to az meranie svetlych ploch v tmavej teme: biely posuvnik na
     /generator/ a svetle tlacidlo vo zvukovom nastroji mali TU ISTU pricinu,
     hoci to boli dve rozne stranky dvoch roznych relacii. */
  color-scheme: light;

  --bg: #f3f3f5;
  --bg-deep: #e7e7ea;
  --panel: #ffffff;
  --panel-2: #fafafb;
  --line: #dcdce0;
  --line-soft: #ebebee;
  --ink: #0b0b0d;
  --ink-soft: #53535c;
  --ink-faint: #63636d;   /* 5,6:1 na paneli -- bolo #7e7e89 s 4,0:1 */

  --brand: #ffc800;
  --brand-2: #ffa000;
  --brand-ink: #14140a;
  --brand-soft: #fff4cc;
  --brand-text: #6b5200;
  --focus: #6b5200;
  --brand-edge: #c99e00;   /* tmavsi okraj zltej plochy -- aby tlacidlo malo hranu */
  --grid: #d2d2d8;         /* technicky raster na pozadi hero */
  --nahlad: #e4e4e9;       /* plocha pod nahladom modelu -- modely su biele */
  /* Sila zlteho svetla za nadpisom. Musi byt tokenom, lebo v kazdej teme je
     spravna ina hodnota: na cierne pozadie svetlo SVIETI a znesie vela,
     na svetlom sa z neho stava zafarbenie a tmavy nadpis na nom zablatie. */
  --zar: 20%;

  --ok: #16a34a;
  --warn: #b4541a;
  --warn-bg: #fff3e8;
  --stage-1: #ededf0;
  --stage-2: #dededf;

  --r-xs: 8px;
  --r-sm: 11px;
  --r: 16px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgba(12, 12, 14, .06), 0 1px 3px rgba(12, 12, 14, .05);
  --sh-2: 0 2px 4px rgba(12, 12, 14, .05), 0 12px 28px -10px rgba(12, 12, 14, .18);
  --sh-3: 0 4px 8px rgba(12, 12, 14, .06), 0 28px 60px -20px rgba(12, 12, 14, .3);

  --font: "Inter UI", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --top-h: 62px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b0b0c;
  --bg-deep: #050506;
  --panel: #141416;
  --panel-2: #1b1b1e;
  --line: #2b2b30;
  --line-soft: #202024;
  --ink: #f2f2f4;
  --ink-soft: #a9a9b3;
  --ink-faint: #97979f;   /* 5,9:1 na tmavom paneli -- bolo #76767f s 3,6:1 */

  /* Na tmavom je zlta citatelna aj ako atrament (11,7:1), takze
     `--brand-text` sa tu rovna `--brand`. Prave preto to musia byt dva
     tokeny a nie jedna farba s vynimkami po sublistoch. */
  --brand: #ffc800;
  --brand-2: #ffa61f;
  --brand-ink: #14140a;
  --brand-soft: #2b2410;
  --brand-text: #ffc800;
  --focus: #ffc800;
  --brand-edge: #b98d00;
  --grid: #26262b;
  --nahlad: #1e1e22;
  --zar: 46%;

  --warn: #ffb083;
  --warn-bg: #30200f;
  --stage-1: #101012;
  --stage-2: #060607;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .6);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .6), 0 16px 34px -14px rgba(0, 0, 0, .8);
  --sh-3: 0 6px 14px rgba(0, 0, 0, .65), 0 34px 70px -24px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

/* KAM DOSKOCI ODKAZ V RAMCI STRANKY.
   Hlavicka je `position: sticky`, takze cielovy nadpis skonci POD nou a clovek
   vidi text bez jeho nadpisu. Tyka sa to vsetkych troch pripadov naraz:
   odkazu `#generatory` na domovskej, `scrollIntoView` v nastrojoch, a hlavne
   odkazu „Preskocit na obsah" -- ten pouziva citacka obrazovky a prave jemu
   by prvy riadok obsahu zmizol pod pruhom.
   `scroll-padding-top` sa pisе na posuvny prvok, nie na ciel; jedno miesto
   miesto `scroll-margin` na kazdom nadpise. Pripocitany je aj vystrazny pas
   pod hlavickou (3 px) a kusok vzduchu. */
html { scroll-padding-top: calc(var(--top-h) + 1.2rem); }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.021em; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ hlavicka */

.top {
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 clamp(.9rem, 3vw, 1.8rem);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.6) blur(14px);
}

/* Vystrazny pas pod hlavickou. Ziadna dekoracia navyse -- zlto-cierny sikmy
   pruh je znacka strojov a vytahov a stranke o generatore dielov dava
   identitu, ktoru samotna farba nedá. Su to 3 px, takze neprekazi.

   `::after` a nie prvok v HTML: hlavicku vykresluje `layout.php` pre vsetkych
   pat generatorov a nechcem, aby si niekto musel pamatat, ze ho ma pridat. */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: repeating-linear-gradient(
    -45deg, var(--brand) 0 8px, var(--ink) 8px 16px);
  opacity: .9;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; letter-spacing: -.03em; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: var(--brand-ink);
  background: var(--brand); border: 1px solid var(--brand-edge);
  box-shadow: 0 2px 0 var(--brand-edge);
}
.brand__name { font-size: 1.06rem; }
.top__nav { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.2rem); font-size: .93rem; }
/* Priamy potomok a `:not(.btn)` -- oboje z konkretneho dovodu.
   Bez `:not(.btn)`: `.top__nav a` je 0-1-1, `.btn--primary` je 0-1-0, takze
   tlacidlo v hlavicke dostalo sivu farbu na modrom prechode -- kontrast 1,3:1
   pri minime 4,5:1. Poradie v subore s tym nespravi nic.
   Bez `>`: pravidlo by siahlo aj na odkazy v rozbalenych paneloch sekcii
   a jazykov, ktore su v hlavicke vnorene hlbsie. */
.top__nav > a:not(.btn) { text-decoration: none; color: var(--ink-soft); }
.top__nav > a:not(.btn):hover { color: var(--ink); }
.top__lang {
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .6rem; font-size: .76rem; font-weight: 700; letter-spacing: .05em;
}

/* ------------------------------------------------------------------ tlacidla */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* Ram je VIDITELNY uz v zakladnom `.btn`. Predtym bol priehladny, takze
     tlacidlo s triedou `btn` a bez varianty splynulo s panelom a vyzeralo
     ako obycajny text -- presne to sa stalo tlacidlam "Scale to it" a
     "Download OBJ" v dosadzovaci. Varianty si ram prepisuju samy, takze
     toto nic z nich nemeni; menia sa len tie, ktore variantu NEMAJU, a
     tam je viditelny ram vzdy lepsi nez neviditelny. */
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .66rem 1.1rem; font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; background: var(--panel); color: var(--ink);
  transition: background .16s, border-color .16s, transform .06s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--brand); color: var(--brand-ink);
  border-color: var(--brand-edge);
  box-shadow: 0 2px 0 var(--brand-edge);
}
.btn--primary:hover { background: var(--brand-2); }
.btn--primary:active { box-shadow: 0 0 0 var(--brand-edge); }
/* Vypnute tlacidlo. Predtym to bol `filter: grayscale(.7)` nad znackovou
   zltou -- z ktorej vysla ZABLATENA OLIVOVA. Nevyzeralo to vypnuto, ale
   pokazeno; na telefone to bola prva vec, ktorá do oka udrela.
   Teraz je to jednoznacne "este nie": tlmene, bez tiena, bez znackovej
   farby. Plati pre KAZDU variantu, nie len pre zltu.
   `[disabled]` ma vyssiu specificitu nez `.btn--primary`, takze prebije
   aj ju bez `!important`. */
.btn[disabled] {
  background: var(--line-soft); color: var(--ink-faint);
  border-color: var(--line); box-shadow: none; cursor: not-allowed;
}
.btn--ghost { border-color: var(--line); color: var(--ink-soft); background: var(--panel); }
.btn--ghost:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--sm { padding: .42rem .8rem; font-size: .86rem; }
.btn--lg { padding: .82rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }

.icon-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  width: 32px; height: 32px; border-radius: var(--r-xs); cursor: pointer; font-size: 1rem; line-height: 1;
}
.icon-btn:hover { color: var(--ink); }

/* ------------------------------------------------------------ uvodna stranka */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.6rem, 7vw, 5.6rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3.4rem);
}
/* Raster a jedno zlte svetlo.

   Povodne to boli dve rozmazane farebne skvrny. Pri modrej to fungovalo;
   zlta rozmazana do svetleho pozadia zmizne a zostane po nej spinavy odtien.
   Zlta preto svieti len raz a z jedneho miesta, a niesie ju technicky raster
   -- ten dava stranke o cely stupen viac 'nastroj' nez farebna skvrna.

   `mask` odstrihne raster k okrajom, aby sa neskoncil rezom. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 100%;
  opacity: 1;
  mask: radial-gradient(72% 62% at 50% 46%, #000 35%, transparent 82%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 38% at 50% 48%, color-mix(in srgb, var(--brand) var(--zar), transparent), transparent 70%);
  filter: blur(30px);
}
/* Úvod: dva stĺpce na širokej obrazovke, pod sebou na úzkej.

   `align-items: center` a nie `stretch`: obrázok má pevný pomer strán a
   pri roztiahnutí by sa v ňom teleso posunulo mimo stred. */
.hero__in { position: relative; max-width: 1100px; margin: 0 auto; text-align: center; }
.hero__vizual { display: none; }

@media (min-width: 980px) {
  .hero__in {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 4vw, 3.2rem); align-items: center; text-align: left;
  }
  .hero__text { min-width: 0; }
  .hero__sub { margin-inline: 0; }
  .hero__cta, .hero__tags { justify-content: flex-start; }
  .hero__vizual { display: block; min-width: 0; }
}

/* Obrázok nesmie prerásť svoj stĺpec ani na veľmi širokej obrazovke --
   inak by úvod narástol do výšky a tlačidlá by spadli pod okraj okna. */
.hero__obr { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; }
/* Veta pod tlacidlami portalu: hovori, ze ucet NIE JE podmienka. Je to
   upokojenie, nie ponuka, preto je tlmena a mensia nez ostatny text. */
.portal__pozn { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-faint); }

/* Stranka uctu centruje obsah, lenze portal to nezniesol: odrazky sa
   vycentrovali a ich zlte znacky zostali pri lavom okraji, takze text sa od
   svojej znacky odtrhol. V kode to nebolo vidiet vobec -- az na snimke. */
.acc-guest .portal__text { text-align: left; }

.hero__kota {
  font-size: 13px; font-weight: 600; fill: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Obrys farbou pozadia, aby bol popis citatelny nad mriezkou aj nad tienom.
   `paint-order: stroke` kresli obrys POD vyplnou -- bez neho by obrys pismo
   zozral zvnutra a zostali by z neho len obrysy. */
.hero__kota--sikma {
  stroke: var(--bg); stroke-width: 4px; paint-order: stroke fill;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600; color: var(--brand-text);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px; padding: .32rem .9rem; margin-bottom: 1.3rem;
  backdrop-filter: blur(8px);
}
.hero__h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem); letter-spacing: -.04em; max-width: 20ch;
  margin-inline: auto; font-weight: 800;
}
.hero__sub { font-size: clamp(1rem, 1.9vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; margin-inline: auto; }
.hero__cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.7rem; }
.hero__tags {
  list-style: none; display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
  padding: 0; margin: 1.9rem 0 0; font-size: .74rem; color: var(--ink-soft);
}
.hero__tags li {
  border: 1px solid var(--line); border-radius: 999px; padding: .2rem .64rem;
  font-family: var(--mono); background: color-mix(in srgb, var(--panel) 60%, transparent);
}

/* pas s ukazkami hned pod hlavickou */
.showcase {
  position: relative; max-width: 1180px; margin: clamp(1.4rem, 4vw, 2.6rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.showcase__grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
}
.showcase__item {
  /* Osem ukazok: `1 1 150px` z nich pri sirokom okne spravilo 6+2 a dva
     osirele kusy vyzerali ako chyba vykreslenia. Stvrtina sirky da 4+4. */
  flex: 0 1 calc(25% - .6rem); min-width: 150px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: .5rem; box-shadow: var(--sh-1); display: block; text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.showcase__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.showcase__item img { width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block; border-radius: var(--r-sm); background: var(--nahlad); }
.showcase__item span { display: block; font-size: .8rem; color: var(--ink-soft); text-align: center; padding: .45rem .2rem .15rem; }

/* tri sposoby, ako zacat */
.ways {
  display: grid; gap: 1rem; max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.way {
  position: relative; display: block; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem; box-shadow: var(--sh-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.way:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.way__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: .9rem; font-size: 1.15rem;
  background: var(--brand-soft); color: var(--brand-text);
}
.way h3 { font-size: 1.1rem; }
.way p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.way__go { display: inline-block; margin-top: .8rem; font-size: .86rem; font-weight: 600; color: var(--brand-text); }

.features {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}
/* Pat vlastnosti: pri zaklade 230px z nich vyslo 4+1 a karty boli uzke ako
   stlpce novin ("Live 3D preview" sa lamalo do piatich riadkov). Zaklad 300px
   da tri na riadok, cize 3+2, a text dostane sirku. */
.feature { flex: 1 1 300px; max-width: 350px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--sh-1); }
.feature h2 { font-size: 1rem; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem); }
.section--alt { background: var(--bg-deep); border-block: 1px solid var(--line); }
.section__head { max-width: 1100px; margin: 0 auto 2rem; text-align: center; }
.section__head h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.03em; }
.section__head p { color: var(--ink-soft); margin: 0; }
.section__cta { text-align: center; margin: 2.4rem 0 0; }

.tracklist { max-width: 1180px; margin: 0 auto 2.6rem; }
.tracklist__head { margin-bottom: 1rem; }
.tracklist__head h3 { font-size: 1.22rem; }
.tracklist__head p { font-size: .92rem; color: var(--ink-soft); margin: 0; max-width: 70ch; }
.tracklist__cat {
  display: flex; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1.6rem 0 .7rem;
}
.tracklist__cat span { font-size: .95rem; text-transform: none; letter-spacing: 0; opacity: .8; }

.cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.card a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.card a:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--sh-2); }
.card__img {
  /* height:auto je nutne - bez neho vyhra atribut height z HTML a pomer stran
     sa neuplatni, takze by karty vyrastli do neumernej vysky */
  width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block;
  background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
  padding: .35rem;
}
.card__body { padding: .75rem .85rem .9rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card h3 { font-size: .95rem; margin: 0; }
.card p {
  font-size: .82rem; color: var(--ink-soft); margin: 0; flex: 1;
  /* dva riadky staci - karty tak zostanu rovnako vysoke */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.card__go { font-size: .8rem; font-weight: 600; color: var(--brand-text); margin-top: .5rem; }

.steps {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1000px;
  display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; margin-bottom: .7rem;
  background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: var(--brand-ink); font-weight: 700; font-size: .9rem;
}
.step h3 { font-size: 1.02rem; }
.step p { color: var(--ink-soft); font-size: .92rem; margin: 0; }

.foot { border-top: 1px solid var(--line); background: var(--panel); padding: 2.2rem clamp(1rem, 4vw, 2rem); }
.foot__in { max-width: 1180px; margin: 0 auto; font-size: .88rem; color: var(--ink-soft); }
.foot__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.foot__meta a { color: var(--ink-soft); }

/* ------------------------------------------------------------------- studio */

.page--app { height: 100%; overflow: hidden; }
.page--app #main { height: calc(100dvh - var(--top-h)); }
.page--app .foot { display: none; }

/* Druhý riadok je knižnica — pás cez celú šírku pod všetkými tromi stĺpcami.
   `minmax(0, 1fr)` na prvom riadku je nutné: bez tej nuly by stĺpce s vlastným
   posúvaním nafúkli riadok na svoju prirodzenú výšku a pás by vytlačili
   z obrazovky. */
.studio {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr) 316px;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
}

/* ---------------------------------------------------------------- knižnica */

.kniznica {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  background: var(--panel);
  display: flex; flex-direction: column;
  min-height: 0;
}
.kniznica__hlava {
  display: flex; align-items: center; gap: .75rem;
  padding: .35rem .75rem; min-height: 2.35rem;
}
.kniznica__prep {
  display: flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .2rem .1rem; cursor: pointer;
  color: inherit; font: inherit; font-weight: 600;
}
.kniznica__sipka { transition: transform .15s ease; font-size: .8em; opacity: .7; }
.kniznica--zavreta .kniznica__sipka { transform: rotate(-90deg); }
.kniznica__pocet {
  font-weight: 400; opacity: .6; font-variant-numeric: tabular-nums;
}
.kniznica__pocet:not(:empty)::before { content: "("; }
.kniznica__pocet:not(:empty)::after { content: ")"; }
.kniznica__nastroje { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.kniznica__hladaj {
  width: 11rem; max-width: 34vw;
  padding: .25rem .5rem; border: 1px solid var(--line); border-radius: .4rem;
  background: var(--bg); color: inherit; font: inherit; font-size: .85rem;
}
.kniznica__odkaz { font-size: .85rem; opacity: .75; }
.kniznica__odkaz:hover { opacity: 1; }

/* Pás sa zatvára na nulovú výšku, nie cez `display:none` — takto sa dá
   prechod animovať a zavretý pás stále drží svoj riadok mriežky. */
.kniznica__pas {
  display: flex; gap: .5rem; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  padding: 0 .75rem .6rem;
  scrollbar-width: thin;
}
.kniznica--zavreta .kniznica__pas { display: none; }

.kniznica__kus {
  flex: 0 0 auto; width: 104px;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .3rem; border: 1px solid var(--line); border-radius: .5rem;
  background: var(--bg); color: inherit; font: inherit; cursor: pointer;
  text-align: left;
}
.kniznica__kus:hover { border-color: var(--accent, #6ea8fe); }
.kniznica__kus--cak { opacity: .55; cursor: progress; }
.kniznica__obr {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: .35rem; background: var(--panel);
}
.kniznica__meno {
  font-size: .72rem; line-height: 1.2; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kniznica__prazdno {
  margin: 0; padding: .9rem .15rem; font-size: .85rem; opacity: .7;
}

/* Na úzkej obrazovke sa štúdio skladá pod seba a pás zostáva posledný. */
@media (max-width: 900px) {
  .kniznica__hladaj { width: 8rem; }
  .kniznica__kus { width: 88px; }
}

.studio__left, .studio__right {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel);
}
.studio__left { border-right: 1px solid var(--line); }
.studio__right { border-left: 1px solid var(--line); }
.panel-scroll { overflow-y: auto; padding: 1rem .9rem 2rem; scrollbar-width: thin; flex: 1; min-height: 0; }

.panel__title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700; margin: 0 0 .7rem;
}
.panel + .panel, .panel { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
/* ZALOMENIE JE TU KVOLI TELEFONU. Bez `flex-wrap` sa riadok tlacidiel nemal
   ako zlomit a widget textur pretekal na 320 px o 15 bodov -- brana to hlasila
   od 26. 8. Autor widgetu si pri tom spravne vsimol, ze `.panel__actions`
   patri RAMU, nie widgetu, takze oprava patri sem.
   `flex: 1 1 8rem` znamena "rovnaky diel, ale nikdy uzsie nez 8rem": tlacidlo
   sa radsej presunie na dalsi riadok, nez by sa stlacilo tak, ze sa jeho nazov
   nezmesti. Zuzenie pod obsah je horsie nez zalomenie -- zalomenie vidno,
   orezany text vyzera ako preklep. */
.panel__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.panel__actions .btn { flex: 1 1 8rem; }

/* rezimy */
.modes { display: grid; gap: 2px; padding: .55rem; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.mode {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto;
  align-items: center; gap: 0 .55rem; text-align: left;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: var(--r-sm); padding: .5rem .6rem; font: inherit; color: var(--ink-soft);
  transition: background .14s, color .14s;
}
.mode:hover { background: var(--panel); color: var(--ink); }
.mode__icon {
  grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 1rem;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-soft);
}
.mode__name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.mode__desc { font-size: .74rem; color: var(--ink-faint); line-height: 1.35; }
.mode.is-active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 32%, transparent); }
.mode.is-active .mode__name { color: var(--brand-text); }
.mode.is-active .mode__icon { background: var(--brand); border-color: var(--brand-text); color: var(--brand-ink); }

/* vstupy */
.input { margin-bottom: 1.3rem; }
.input__label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.input__text, .input__search {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .6rem .7rem; resize: vertical;
}
.input__text:focus, .input__search:focus { background: var(--panel); }
.input__text { min-height: 3.4em; }
.input--ai .btn { margin-top: .6rem; }
.input__note { font-size: .78rem; color: var(--ink-faint); margin: .6rem 0 0; line-height: 1.45; }
.input__note--off { color: var(--warn); background: var(--warn-bg); border-radius: var(--r-xs); padding: .5rem .6rem; }

.drop {
  position: relative; display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--line); border-radius: var(--r); background: var(--panel-2);
  padding: 1.3rem .9rem; cursor: pointer; transition: border-color .15s, background .15s;
  min-height: 132px;
}
.drop:hover, .drop.is-over { border-color: var(--brand-text); background: var(--brand-soft); }
.drop__empty { display: grid; gap: .25rem; }
.drop__icon { font-size: 1.6rem; color: var(--ink-faint); }
.drop__empty strong { font-size: .92rem; }
.drop__hint { font-size: .76rem; color: var(--ink-faint); }
.drop__filled { display: grid; gap: .4rem; justify-items: center; width: 100%; }
.drop__preview { max-width: 100%; max-height: 96px; border-radius: var(--r-xs); background: #fff; }
.drop__name { font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.drop__change { font-size: .74rem; color: var(--brand-text); font-weight: 600; }

.filters { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.pill {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: .22rem .6rem; font: inherit; font-size: .74rem; cursor: pointer;
}
.pill:hover { color: var(--ink); }
.pill.is-active { background: var(--brand); border-color: var(--brand-text); color: var(--brand-ink); }

/* dlazdice stylov */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tile {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm);
  padding: .3rem .3rem .45rem; cursor: pointer; font: inherit; text-align: center;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.tile:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); transform: translateY(-2px); box-shadow: var(--sh-1); }
.tile.is-active { border-color: var(--brand-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent); }
.tile__img {
  width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block;
  border-radius: var(--r-xs); background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
}
.tile__name { display: block; font-size: .76rem; margin-top: .3rem; line-height: 1.25; color: var(--ink-soft); }
.tile.is-active .tile__name { color: var(--brand-text); font-weight: 600; }
.tiles__empty { font-size: .84rem; color: var(--ink-faint); text-align: center; padding: 1.4rem 0; }

/* scena */
.studio__stage { position: relative; min-width: 0; background: radial-gradient(120% 90% at 50% 0%, var(--stage-1), var(--stage-2)); }
.stage-wrap { position: absolute; inset: 0; }
#stage { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#stage:active { cursor: grabbing; }
.stage-wrap.is-busy #stage { opacity: .5; transition: opacity .15s; }

.stage__top {
  position: absolute; top: 1rem; left: 1.2rem; right: 1.2rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  pointer-events: none;
}
.stage__title h1 { font-size: 1.2rem; margin: 0; letter-spacing: -.025em; }
.stage__title p { font-size: .85rem; color: var(--ink-soft); margin: .2rem 0 0; max-width: 48ch; }

.chip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: .26rem .7rem;
  font-size: .78rem; backdrop-filter: blur(8px); white-space: nowrap;
}
.chip b { font-weight: 600; font-family: var(--mono); font-size: .78rem; }
.chip i { font-style: normal; color: var(--ink-faint); font-size: .72rem; }
.chip--warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* PREKRYV NAD PLATNOM. `position: absolute` znamena, ze to patri DOVNUTRA
   `.stage` -- nikam inam. */
.stage__stats {
  position: absolute; left: 1.2rem; bottom: 1rem;
  display: flex; gap: .4rem; flex-wrap: wrap; max-width: 46%;
}

/* TIE ISTE CISLA, ALE AKO OBYCAJNY RIADOK.
   Dva nastroje pouzivali `.stage__stats` bez toho, aby mali plátno -- prvok sa
   teda nemal coho chytit a odplaval na stranku, kde na `/3dmodelsetter/`
   prekryval formular. Na telefone to nebolo vidiet: v uzkom okne sa
   `.stage__stats` prepina na `position: static`, takze brána na mobil
   nemala co najst. */
.staty-riadok { display: flex; gap: .4rem; flex-wrap: wrap; margin: .7rem 0 0; }

.stage__tools {
  position: absolute; bottom: 1rem; right: 1.2rem;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: flex-end;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: .34rem .5rem;
  box-shadow: var(--sh-1); backdrop-filter: blur(10px);
}
.seg { display: inline-flex; background: var(--panel-2); border-radius: 999px; padding: 2px; }
.seg__btn {
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: .78rem; padding: .22rem .62rem; border-radius: 999px;
}
.seg__btn.is-active { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1); }
.colors { display: inline-flex; gap: 4px; }
.mini-select {
  font: inherit; font-size: .78rem; color: var(--ink-soft); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .18rem .5rem; cursor: pointer;
}
.swatch { width: 19px; height: 19px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.swatch.is-active { border-color: var(--ink); }
.check { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink-soft); cursor: pointer; }

.stage__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; pointer-events: none; }
.stage__emptyBox {
  text-align: center; color: var(--ink-faint); max-width: 34ch;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.6rem;
  backdrop-filter: blur(6px);
}
.stage__emptyBox span { font-size: 1.8rem; display: block; margin-bottom: .4rem; opacity: .55; }
.stage__emptyBox p { margin: 0; font-size: .92rem; }

/* Pásik postupu pri generovaní. Šírka sa mení plynulo, ale nie príliš pomaly —
   pri trojsekundovom dopyte na stav by dlhý prechod znamenal, že pásik nikdy
   nedôjde tam, kde naozaj je. */
.postup {
  margin-top: .65rem; height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.postup__pas {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--brand-text, var(--ink));
  transition: width .4s ease;
}
/* Kým server nepovie ani jedno percento, pásik sa hýbe sám. Nula percent po
   dobu pol minúty vyzerá ako zaseknutá úloha, hoci beží. */
.postup--nevie .postup__pas {
  width: 35%; animation: postup-tam-spat 1.5s ease-in-out infinite;
}
@keyframes postup-tam-spat {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.stage__busy {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem;
  font-size: .8rem; color: var(--ink-soft); box-shadow: var(--sh-1);
}
.spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-top-color: var(--brand-text); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 140%);
  background: var(--ink); color: var(--bg); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .86rem; box-shadow: var(--sh-2);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1); z-index: 60; margin: 0;
}
.toast.is-on { transform: translate(-50%, 0); }

/* parametre */
.params { display: grid; gap: .85rem; }
.field { display: grid; gap: .3rem; }
.field[hidden] { display: none; }
.field__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.field__label { font-size: .84rem; font-weight: 600; }
.field__value { font-size: .78rem; color: var(--ink-soft); font-family: var(--mono); }
.field__hint { font-size: .74rem; color: var(--ink-faint); margin: 0; line-height: 1.4; }
.field__row { display: grid; grid-template-columns: 1fr 66px; gap: .45rem; align-items: center; }
.field__range { width: 100%; accent-color: var(--brand-text); }
.field__num, .field__text, .field__select {
  font: inherit; font-size: .87rem; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: .35rem .5rem; width: 100%;
}
.field__text { resize: vertical; min-height: 2.2em; }
.field__select { cursor: pointer; }
.field--bool { grid-template-columns: 1fr auto; align-items: center; }
.field--bool .field__head { grid-column: 1; justify-content: flex-start; }
.switch { position: relative; display: inline-flex; margin-left: auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.field__color { display: flex; align-items: center; gap: .5rem; }
.field__color input[type="color"] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.field__hex { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; }
.field__file { display: grid; gap: .3rem; }
.field__filename { font-size: .74rem; color: var(--ink-faint); font-family: var(--mono); overflow-wrap: anywhere; }

/* export */
.export { position: relative; padding: .8rem .9rem 1rem; border-top: 1px solid var(--line); background: var(--panel); }
.menu {
  position: absolute; right: .9rem; bottom: 4rem; left: .9rem; z-index: 10;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: .35rem; display: grid; gap: 2px; max-height: 62vh; overflow: auto;
}
.menu__item {
  display: grid; grid-template-columns: 50px 1fr; align-items: baseline; gap: .5rem;
  border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left;
  padding: .45rem .55rem; border-radius: var(--r-xs); cursor: pointer;
}
.menu__item:hover { background: var(--panel-2); }
.menu__item strong { font-size: .76rem; font-family: var(--mono); color: var(--brand-text); }
.menu__item span { font-size: .82rem; color: var(--ink-soft); display: block; }
.menu__item em { display: block; font-style: normal; font-size: .71rem; color: var(--ink-faint); margin-top: .1rem; }
.menu__item.is-primary { background: var(--brand-soft); }

.notice { max-width: 60ch; margin: 2rem auto; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); }


/* ------------------------------------------------------- ucet a prihlasenie */

.userchip { display: inline-flex; align-items: center; }
.userchip__link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .18rem .55rem .18rem .18rem;
  background: var(--panel);
}
.userchip__link:hover { border-color: var(--brand-text); }
.userchip__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; font-weight: 700;
  background: linear-gradient(140deg, var(--brand), var(--brand-2)); color: var(--brand-ink);
}
.userchip__credits { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }

body.is-locked { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.modal__back { position: absolute; inset: 0; background: rgba(8, 11, 18, .55); backdrop-filter: blur(4px); }
.modal__box {
  position: relative; width: min(420px, 100%); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--sh-3); max-height: 92dvh; overflow: auto;
}
.modal__x {
  position: absolute; top: .7rem; right: .8rem; border: 0; background: transparent;
  font-size: 1.4rem; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.modal__x:hover { color: var(--ink); }
.modal__title { font-size: 1.4rem; margin: 1rem 0 .3rem; }
.modal__lead { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.seg--wide { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.seg--wide .seg__btn { padding: .4rem .5rem; font-size: .88rem; }

.form { display: grid; gap: .8rem; }
.form .field { gap: .25rem; }
.form .field__label { font-size: .8rem; color: var(--ink-soft); }
.form .field__text { padding: .58rem .7rem; font-size: .95rem; }
/* Súhlas s podmienkami. Je to POLÍČKO S TEXTOM, nie drobné písmo pod
   formulárom: text, ktorý sa nedá prečítať, nie je informovaný súhlas.
   Preto má rovnakú veľkosť ako ostatný text formulára a odkazy sú podčiarknuté
   -- majú vyzerať ako odkazy, lebo človek na ne má naozaj kliknúť. */
.suhlas {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: .2rem 0 .1rem; cursor: pointer;
  font-size: .9rem; line-height: 1.45; color: var(--ink-soft);
}
/* Políčko nesmie zmenšiť flex a nesmie sa posunúť pri dlhom texte. */
.suhlas__box { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; accent-color: var(--brand-text); }
.suhlas__text a { color: var(--ink); text-decoration: underline; }
.suhlas__text a:hover { color: var(--brand-text); }

/* ─────────────────────────────────────────────── vernostný program ───── */

.vernost__hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vernost__uroven { margin: .1rem 0 0; font-size: 1.35rem; font-weight: 800; color: var(--brand-text); }
/* Odznak je OZDOBA, nie informácia -- to isté hovorí text vedľa neho.
   Preto `aria-hidden` v značke.

   ŽLTÁ JE POVRCH, NIE ATRAMENT. Prvá podoba mala `color: var(--brand)`, teda
   žltý znak na bielom -- 1,5:1, takmer neviditeľný. Chytila to vlastná brána
   `zlta nie je atrament`, a chytila to správne: prvok je síce pre čítačku
   neviditeľný, ale pre oko nie -- a práve pre oko tam je.
   Tá istá farba, opačne použitá: tmavý znak na žltom podklade. */
.vernost__odznak {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink);
  font-size: 1.2rem; line-height: 1;
}
.vernost__mesiace { margin: .8rem 0 .4rem; color: var(--ink-soft); }
.vernost__mesiace b { color: var(--ink); font-size: 1.1rem; }

/* Pásik postupu. `<progress>` kreslí každý prehliadač inak a jediný spôsob,
   ako to zjednotiť, je prepísať OBE vrstvy: `-webkit-progress-bar` (podklad)
   aj `-webkit-progress-value` (výplň). Keď sa prepíše len jedna, vo Firefoxe
   alebo v Safari zostane pôvodná a pásik vyzerá inak než tu. */
.vernost__pasik {
  display: block; width: 100%; height: .6rem; margin: 0 0 .5rem;
  appearance: none; border: 0; border-radius: 999px;
  background: var(--line-soft);   /* Firefox berie toto */
}
.vernost__pasik::-webkit-progress-bar { background: var(--line-soft); border-radius: 999px; }
.vernost__pasik::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
.vernost__pasik::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

.vernost__dalej { margin: 0 0 .9rem; font-size: .9rem; color: var(--ink-faint); }
.vernost__bonusy { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.vernost__bonusy li {
  padding-left: 1.4rem; position: relative; color: var(--ink-soft); font-size: .93rem;
}
.vernost__bonusy li::before {
  content: "✓"; position: absolute; left: 0; color: var(--brand-text); font-weight: 700;
}
/* Veta „zatiaľ nič" nesmie vyzerať ako odmena -- preto bez odrážky. */
.vernost__zatial { padding-left: 0 !important; }
.vernost__zatial::before { content: none !important; }
.vernost__alebo { margin: 1rem 0 .4rem; font-size: .9rem; color: var(--ink-faint); }

/* Mesačné plány. Rovnaká mriežka ako balíčky, aby stránka mala rytmus. */
.plany { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem; background: var(--panel-2); display: grid; gap: .35rem; align-content: start;
}
.plan h3 { margin: 0; font-size: 1.05rem; }
.plan__tokeny { color: var(--brand-text); font-size: 1.15rem; }
.plan__cena { color: var(--ink-soft); font-size: .92rem; margin-bottom: .5rem; }
.predZrus { margin: 1.2rem 0 0; }

/* ──────────────────────────────────── prieskum pri rušení ───────────── */

/* `<dialog>` a nie vlastný `<div>`: prehliadač sám rieši zaostrenie, Esc a to,
   že sa pod oknom nedá klikať. Vlastná náhrada tieto tri veci vždy spraví
   horšie -- a najčastejšie zabudne práve na Esc. */
.odchod {
  max-width: 460px; width: calc(100vw - 2rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--ink);
  padding: 1.6rem; position: relative;
}
.odchod::backdrop { background: rgb(0 0 0 / .45); }
.odchod h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.odchod__lead { margin: 0 0 1rem; color: var(--ink-soft); font-size: .94rem; }
.odchod__zavri { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.odchod__dovody, .odchod__ktora div { display: grid; gap: .3rem; margin-bottom: .9rem; }
.odchod__moznost {
  display: flex; gap: .6rem; align-items: center; cursor: pointer;
  padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.odchod__moznost:hover { border-color: var(--ink-faint); }
.odchod__moznost input { accent-color: var(--brand-text); }
.odchod__podotazka { margin: 0 0 .4rem; font-weight: 600; font-size: .92rem; }

/* OBE tlačidlá majú rovnakú veľkosť. „Aj tak zrušiť" nesmie byť menšie ani
   svetlejšie než „Beriem" -- ponuka je krok, nie prekážka. */
.odchod__tlacidla { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.odchod__tlacidla .btn { flex: 1 1 auto; }

/* ŠIROKÁ TABUĽKA V NÁSTROJI SA POSÚVA SAMA V SEBE, netlačí celú stránku.
   Je to pravidlo RÁMU, nie starosť autora nástroja: široká tabuľka na úzkom
   displeji je taký bežný prípad, že spoliehať sa na to, že si naň každý
   spomenie, znamená, že si naň raz niekto nespomenie.

   Našla to brána `npm run mobil` v ten istý deň, keď som pustil do sveta
   sekciu vizuálnych modelov: `presnost__tabulka` pretekala o 117 px vo
   všetkých piatich jazykoch.

   `display: block` je tu nutné — bez neho `overflow` na `<table>` neúčinkuje,
   lebo tabuľkový režim rozloženia sa ním neriadi. Cena je, že tabuľka prestane
   byť pre rozloženie tabuľkou; pre čítačku obrazovky ňou zostáva, lebo značka
   sa nemení. */
/* Obal, ktorý sa posúva sám v sebe. To isté, čo robí rám pre tabuľky vo
   widgetoch, ale pre tabuľky, ktoré píšeme my — napríklad rebrík úrovní
   v cenníku. Značka `<table>` tak zostáva nedotknutá a čítačka ju číta ako
   tabuľku; posúva sa OBAL, nie ona. */
/* `min-width: 0` NIE JE ozdoba, je to celá oprava.
   Prvok v mriežke má predvolene `min-width: auto`, čo znamená „nikdy sa
   nezmenším pod svoj obsah". Tabuľka vnútri má `width: max-content`, takže
   obsah je široký — a mriežka sa podľa neho roztiahne, hoci obal má
   `overflow-x: auto`. Posuvný rámec potom nefunguje nie preto, že by bol zle
   napísaný, ale preto, že sa nikdy nedostane pod svoju obsahovú šírku.
   Bez tohto riadka pretekal CELÝ cenník o 213 px pri 320 px — vrátane blokov,
   ktoré s tabuľkou nemajú nič spoločné. */
.tabulka-obal { overflow-x: auto; max-width: 100%; min-width: 0; }
.cennik__blok { min-width: 0; }
.urovne-tab { border-collapse: collapse; width: max-content; min-width: 100%; }
.urovne-tab th, .urovne-tab td {
  padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.urovne-tab thead th { font-size: .85rem; color: var(--ink-faint); font-weight: 600; }
.urovne-tab tbody th { font-weight: 700; }

.widget table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
/* A VNUTRI sa tabuľkové rozloženie vráti.
   Bez tohto `display: block` na `<table>` spraví blokovými aj `thead` a
   `tbody`, tie si nechajú vlastnú šírku a pretečú namiesto tabuľky — presne
   to sa stalo: z „tabuľka presahuje o 117 px" sa stalo „thead presahuje
   o 115 px". Posunul som problém, nie vyriešil.
   `width: max-content` s `min-width: 100%`: tabuľka je taká široká, akú
   šírku naozaj potrebuje, ale nikdy užšia než rámec, v ktorom sedí. */
.widget table thead,
.widget table tbody {
  display: table;
  width: max-content;
  min-width: 100%;
}
.widget table tr { display: table-row; }

.form__error {
  margin: 0; font-size: .84rem; color: #b42318; background: #fef3f2;
  border-radius: var(--r-xs); padding: .5rem .7rem;
}
.form__error.is-ok { color: var(--ok); background: #ecfdf3; }
[data-theme="dark"] .form__error { background: #2b1414; }
[data-theme="dark"] .form__error.is-ok { background: #10241a; }
.form__note { margin: 0; font-size: .78rem; color: var(--ink-faint); text-align: center; }
.form--inline { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.form--inline .form__error { grid-column: 1 / -1; }

.account { padding: clamp(1.6rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 4rem; }
.account__in { max-width: 980px; margin: 0 auto; display: grid; gap: 2.2rem; }
.acc-head {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem; box-shadow: var(--sh-1);
}
.acc-head h1 { font-size: 1.5rem; margin: 0; }
.acc-head__mail { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.acc-head__credits { margin-left: auto; text-align: right; }
.acc-head__credits b { display: block; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.acc-head__credits i { font-style: normal; font-size: .78rem; color: var(--ink-faint); }
.acc-guest { text-align: center; padding: 3rem 1rem; }
.acc-block h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.acc-empty, .acc-off { color: var(--ink-faint); font-size: .9rem; }

.packs { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pack {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem; display: grid; gap: .25rem; box-shadow: var(--sh-1);
}
.pack h3 { font-size: 1rem; margin: 0; }
.pack__credits { font-size: 1.5rem; font-weight: 700; }
.pack__price { font-size: 1.1rem; color: var(--brand-text); font-weight: 600; }
.pack__per { font-style: normal; font-size: .76rem; color: var(--ink-faint); margin-bottom: .6rem; }

.mygrid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mycard {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
}
.mycard__img {
  width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block;
  background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
}
.mycard__body { padding: .8rem .9rem 1rem; }
.mycard__body h3 { font-size: .95rem; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.mycard__meta { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .7rem; }
.mycard__row { display: flex; flex-wrap: wrap; gap: .3rem; }
.mycard__badge {
  position: absolute; top: .6rem; left: .6rem; font-size: .7rem; font-weight: 600;
  background: var(--brand); color: var(--brand-ink); border-radius: 999px; padding: .12rem .55rem;
}
.btn--danger:hover { border-color: #d92d20; color: #d92d20; }
.btn.is-on { border-color: var(--brand-text); color: var(--brand-text); }

.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ledger td { padding: .5rem .2rem; border-bottom: 1px solid var(--line-soft); }
.ledger td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ledger .is-plus { color: var(--ok); }
.ledger .is-minus { color: var(--ink-soft); }

.acc-lead { color: var(--ink-soft); font-size: .92rem; margin: -.4rem 0 1rem; max-width: 62ch; }
.acc-right {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem 1.2rem; margin-bottom: .7rem;
}
.acc-right > div { flex: 1 1 320px; }
.acc-right h3 { font-size: .95rem; margin: 0 0 .2rem; }
.acc-right p { font-size: .82rem; color: var(--ink-faint); margin: 0; max-width: 62ch; }
.acc-right > .btn { margin-left: auto; }
.acc-right--danger { border-color: #f0c6c2; background: #fff8f7; }
.acc-kill { border: 1px solid #f0c6c2; border-radius: var(--r); padding: 1rem 1.2rem; background: #fff8f7; }

/* pravne stranky - jeden stlpec, siroke riadkovanie, ziadne ozdoby */
.legal { padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2rem) 4.5rem; }
.legal__in { max-width: 72ch; margin: 0 auto; }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 .6rem; letter-spacing: -.02em; }
.legal__lead { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 2.2rem; }
.legal h2 {
  font-size: 1.1rem; margin: 2.2rem 0 .6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
}
.legal p, .legal li { line-height: 1.7; color: var(--ink-soft); }
.legal p { margin: 0 0 .8rem; }
.legal ul { margin: 0 0 .9rem; padding-left: 1.1rem; display: grid; gap: .35rem; }
.legal strong { color: var(--ink); }
.legal__id {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem 1.2rem; line-height: 1.85; color: var(--ink-soft);
}
.legal__id strong { display: block; font-size: 1.02rem; margin-bottom: .2rem; }

.gallery {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
  max-width: 1180px; margin: 0 auto;
}
.gcard { flex: 0 1 calc(20% - .72rem); min-width: 215px; max-width: 280px; }
.gcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.gcard:hover { border-color: var(--brand-text); box-shadow: var(--sh-2); }
.gcard__link { display: block; text-decoration: none; }
.gcard__img {
  width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block;
  background: linear-gradient(160deg, var(--stage-1), var(--stage-2));
}
.gcard__body { padding: .75rem .85rem .9rem; }
.gcard__body h3 { font-size: .92rem; margin: 0 0 .1rem; overflow-wrap: anywhere; }
.gcard__meta { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .5rem; }

.export .btn--block + .btn--block { margin-top: .4rem; }

/* ------------------------------------------------------------------- mobil */

@media (max-width: 1180px) {
  .studio { grid-template-columns: 268px minmax(0, 1fr) 280px; }
  .mode__desc { display: none; }
}

@media (max-width: 900px) {
  .page--app { overflow: auto; height: auto; }
  .page--app #main { height: auto; }
  .studio { grid-template-columns: 1fr; height: auto; }
  .studio__left, .studio__right { border: 0; border-bottom: 1px solid var(--line); }
  .panel-scroll { overflow: visible; max-height: none; }
  .modes { grid-template-columns: repeat(4, 1fr); }
  .mode { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .5rem .3rem; }
  .mode__icon { grid-row: auto; }
  .mode__desc { display: none; }
  .studio__stage { height: 56dvh; min-height: 320px; }
  .stage__title p { display: none; }
  .stage__stats { max-width: none; position: static; padding: .7rem 1rem 0; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .export { position: static; }
  .menu { position: static; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- pat generatorov v hlavicke

   meshvix3d.com nesie pat generatorov na jednej domene. Menu ich vypisuje zo
   `web/inc/sekcie.php` -- jedneho zoznamu, do ktoreho sa pridava sekcia.
   Ziadna z piatich relacii si tu nerobi vlastne farby: vsetko nize berie
   premenne z `:root`, takze tmavy rezim funguje sam a nie je co zabudnut.

   Je to `<details>`, teda bez JavaScriptu. Za cenu jednej drobnosti: menu sa
   zavrie az druhym klikom na tlacidlo, nie klikom vedla. Vymenene vedome --
   hlavicka je na kazdej podstranke vsetkych piatich generatorov a skript,
   ktory by ju otvaral, by ju vedel aj zhodit. */

.sekcie { position: relative; }
.sekcie__tlacidlo {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--ink-soft); white-space: nowrap;
}
.sekcie__tlacidlo::-webkit-details-marker { display: none; }
.sekcie__tlacidlo:hover { color: var(--ink); }
.sekcie[open] .sekcie__tlacidlo { color: var(--ink); }
.sekcie__sipka { font-size: .7em; transition: transform .15s ease; }
.sekcie[open] .sekcie__sipka { transform: rotate(180deg); }

.sekcie__panel {
  position: absolute; top: calc(100% + .55rem); left: 0; z-index: 50;
  width: min(340px, calc(100vw - 2rem));
  display: grid; gap: .15rem; padding: .4rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3);
}

/* Panel je v selektore zamerne, nie pre poriadok: `.top__nav a` ma
   specifickost 0-1-1 a prebije `.sekcia` (0-1-0) bez ohladu na to, ze je
   v subore o 600 riadkov vyssie. Nazov sekcie by zostal tlmeny namiesto
   plnej farby textu -- a vidno to az v otvorenom paneli, nie na tokenoch. */
.sekcie__panel .sekcia {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center;
  gap: .7rem; padding: .55rem .6rem; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink);
}
.sekcie__panel a.sekcia:hover { background: var(--panel-2); }
.sekcia__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem;
  background: var(--brand-soft); color: var(--brand-text);
}
.sekcia__text { display: grid; gap: .1rem; min-width: 0; }
.sekcia__text strong { font-size: .93rem; font-weight: 600; letter-spacing: -.01em; }
.sekcia__text small { font-size: .8rem; line-height: 1.35; color: var(--ink-soft); }

.sekcia--tu { background: var(--brand-soft); }
.sekcia--tu .sekcia__text strong { color: var(--ink); }

/* Sekcia bez stranky nie je odkaz -- a musi to byt vidno aj bez farby, lebo
   samotny odtien je pre farboslepeho ten isty signal ako ziadny. */
.sekcia--caka { cursor: default; }
.sekcia--caka .sekcia__ikona { background: var(--line-soft); color: var(--ink-faint); }
.sekcia--caka .sekcia__text strong { color: var(--ink-soft); font-weight: 500; }
.sekcia--caka .sekcia__text small { font-style: italic; }

.foot__sekcie { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .9rem; }
.foot__sekcie a { color: var(--ink-soft); }
.foot__caka { color: var(--ink-soft); }

@media (max-width: 640px) {
  /* Na uzkom displeji sa panel nezmesti vedla tlacidla, tak sa roztiahne pod
     celu hlavicku. `position: fixed` preto, lebo hlavicka je `sticky` a
     absolutne umiestneny panel by sa zarezal do jej spodnej hrany. */
  .sekcie__panel {
    position: fixed; top: var(--top-h); left: .6rem; right: .6rem; width: auto;
  }
}

/* --------------------------------------------------------- prepinac jazykov

   Vypisuje vsetky jazyky zo `web/inc/jazyky.php`, nie len ten druhy. Znova
   `<details>`, teda bez JavaScriptu -- hlavicka musi fungovat aj vtedy, ked
   sa nejaky skript na stranke pokazi.

   Panel je zarovnany doprava (`right: 0`), lebo prepinac stoji na pravom
   okraji hlavicky; s `left: 0` by vytrcal von zo stranky a na uzkom displeji
   by sa nedal precitat. */

.jazyky { position: relative; }
.jazyky__tlacidlo {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .5rem; border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--ink-soft); font-size: .82rem; font-weight: 600; line-height: 1.4;
}
.jazyky__tlacidlo::-webkit-details-marker { display: none; }
.jazyky__tlacidlo:hover { color: var(--ink); border-color: var(--brand-text); }
.jazyky[open] .jazyky__tlacidlo { color: var(--ink); border-color: var(--brand-text); }

.jazyky__panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 50;
  min-width: 190px; display: grid; gap: .1rem; padding: .35rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-3);
}

.jazyky__panel .jazyk {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center;
  gap: .5rem; padding: .45rem .5rem; border-radius: var(--r-xs);
  text-decoration: none; color: var(--ink); font-size: .9rem;
}
.jazyky__panel .jazyk:hover { background: var(--panel-2); }
.jazyk__kod {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-align: center;
  padding: .15rem 0; border-radius: 5px;
  background: var(--line-soft); color: var(--ink-faint);
}
.jazyk--tu { background: var(--brand-soft); }
.jazyk--tu .jazyk__nazov { color: var(--ink); font-weight: 600; }
.jazyk--tu .jazyk__kod { background: var(--brand); color: var(--brand-ink); }

@media (max-width: 640px) {
  .jazyky__panel { position: fixed; top: var(--top-h); right: .6rem; left: auto; }
}

/* ------------------------------------------------ zlta a cierna, nie len siva

   Prva verzia temy bola merateľne v poriadku (ziaden text pod 4,5:1), ale na
   snimke to bola SIVO-BIELA stranka so zltym tlacidlom. Zadanie znelo zlta,
   cierna, siva -- a cierna v nej nebola vobec.

   Toto je presne ten pripad, ked meranie nestaci a treba sa pozriet: kontrast
   odpoveda na otazku "da sa to precitat", nie na otazku "ma to nejaky
   charakter". Obe su potrebne. */

/* Nadpis sekcie dostane kratku zltu linku. Jeden prvok, ktory sa opakuje cez
   celu stranku, spravi s celkovym dojmom viac nez desat farebnych detailov. */
.section__head h2::before {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 2px;
  margin: 0 auto .9rem; background: var(--brand);
}

/* Dlazdice sposobov a cisla krokov: plna zlta s ciernym znakom. Bledozlta
   vypln so zltym znakom bola na snimke sotva rozoznatelna od bielej karty. */
.way__icon { background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand-edge); }
.way { border-top: 3px solid transparent; }
.way:hover { border-top-color: var(--brand); }

/* Patka je cierna. Je to jedine velke miesto, kde sa da cierna pouzit ako
   PLOCHA a nie ako pismo -- a stranka tym dostane spodnu hranu. Vystrazny pas
   nad nou ju viaze na hlavicku, takze sa to cita ako jeden celok. */
.foot {
  /* Podklad je tmavy v OBOCH temach, takze tu zlta atramentom byt MOZE
     (13:1). Prepisuje sa preto TOKEN, nie jednotlive pravidla -- pravidlo
     "zlta nie je atrament" tym zostava v platnosti pre zvysok stranky a kto
     ho porusi inde, stale spadne na brane. Vynimka v brane by ju oslabila
     pre vsetkych; vynimka v tokene plati presne tam, kde je pravdiva. */
  --brand-text: var(--brand);
  position: relative;
  background: var(--ink); border-top: 0;
  color: color-mix(in srgb, var(--panel) 78%, var(--ink));
}
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 8px, var(--ink) 8px 16px);
}
.foot__in { color: inherit; }
.foot strong { color: var(--panel); }
.foot__meta a, .foot__sekcie a { color: inherit; }
.foot__meta a:hover, .foot__sekcie a:hover { color: var(--brand-text); }
.foot__caka { color: color-mix(in srgb, var(--panel) 52%, var(--ink)); }

/* V tmavom rezime je `--ink` takmer biela, takze by z patky bola svetla
   plocha. Tam sa berie najtmavsi podklad, aky paleta ma. */
[data-theme="dark"] .foot {
  background: var(--bg-deep);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
[data-theme="dark"] .foot strong { color: var(--ink); }
[data-theme="dark"] .foot::before {
  background: repeating-linear-gradient(-45deg, var(--brand) 0 8px, var(--bg-deep) 8px 16px);
}

/* Nahlad modelu na karte -- ten isty dovod ako pri pase ukazok. */
.card__img { background: var(--nahlad); }

/* Patka musi dosadnut na spodok aj na kratkej stranke.
   Bez toho konci obsah v polovici obrazovky a pod ciernou patkou zostane
   siva prazdnota -- na `/ucet/` a na pravnych strankach to vyzeralo, akoby
   sa stranka nedonacitala.

   `:not(.page--app)` preto, ze studio ma vlastnu vysku (`height: 100%`
   a `overflow: hidden`) a flexovy `body` by mu ju rozbil. */
body:not(.page--app) { display: flex; flex-direction: column; min-height: 100%; height: auto; }
body:not(.page--app) > #main { flex: 1 0 auto; }
body:not(.page--app) > .foot { flex-shrink: 0; }

/* Odkazy v patke: podciarknutie az pri prejdeni mysou. Predvolene
   podciarknutie robilo zo spodneho pasu zoznam surovych odkazov. */
.foot__meta a, .foot__sekcie a { text-decoration: none; }
.foot__meta a:hover, .foot__sekcie a:hover { text-decoration: underline; }

/* ------------------------------------------- pat generatorov na uvodnej

   Jakub 26. 8.: "chybaju mi na stranke tlacidla, ktore presmeruju na urcite
   generatory". Zoznam je ten isty `sekcie()`, z ktoreho sa kresli hlavicka
   aj patka -- novy generator sa tu objavi sam. */

/* ------------------------------------------------- generatory ako dlazdice

   Bolo to pat sirokych riadkov pod sebou. Jakub 26. 8.: *„toto nech nie je len
   text, chceme modernu stranku nie old school."* Mal pravdu -- zoznam riadkov
   je zoznam, aj ked ma ramcek.

   Teraz je to MRIEZKA KARIET: kazdy generator dostane vlastnu plochu, ikonu
   nad nazvom a vetu pod nim. Karta ma svoj vlastny priestor, takze pat
   generatorov vyzera ako pat veci, ktore stranka vie -- nie ako menu.

   `auto-fit` s minimom 268 px: na sirokej obrazovke tri stlpce, na tablete
   dva, na telefone jeden. Ziadne hranice v @media -- mriezka si to zaridi
   sama a nikto na nu nemusi myslet pri pridani sesteho generatora. */

.genmriezka {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1100px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1rem;
}
.gen {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.3rem 1.3rem 1.15rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  text-decoration: none; color: var(--ink);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
/* Znackovy pas hore, nie vlavo: pri karte je horna hrana to prve, co oko
   chyti, a pri troch stlpcoch vedla seba drzi riadok pokope. */
.gen::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--brand); border-radius: var(--r) var(--r) 0 0;
}
a.gen:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--brand-edge); }
.gen__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 15px; font-size: 1.55rem;
  background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand-edge);
  margin-bottom: .35rem;
}
.gen__telo { display: grid; gap: .3rem; min-width: 0; }
.gen__telo strong { font-size: 1.12rem; letter-spacing: -.015em; }
.gen__popis { font-size: .92rem; color: var(--ink-soft); line-height: 1.5; }
/* `margin-top: auto` drzi odkaz pri spodnej hrane, takze vsetky karty v riadku
   maju "Otvorit" v jednej linke aj ked su popisy rozne dlhe. */
.gen__go { margin-top: auto; padding-top: .5rem; font-size: .88rem; font-weight: 600; color: var(--brand-text); }

/* Proza sekcie: odstavce pod nastrojom. Uzsi stlpec nez zvysok stranky --
   text sa cita zle, ked je riadok siroky cez celu obrazovku. 68 znakov je
   hranica, pri ktorej oko este trafi zaciatok dalsieho riadka. */
.section--proza { max-width: 780px; margin-inline: auto; }
.section--proza h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 2rem 0 .6rem; }
.section--proza h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.section--proza p { max-width: 68ch; color: var(--ink-soft); line-height: 1.65; }
.section--proza li { color: var(--ink-soft); line-height: 1.6; }

/* ------------------------------------------------- pas kompatibility

   Nastroje a formaty patria na uvodnu stranku, nie do dokumentacie: je to
   prva otazka, ktoru si clovek polozi ("otvori sa mi to vobec?"), a odpoved
   na nu rozhoduje o tom, ci pojde dalej. */

.kompat {
  max-width: 1100px; margin: 2.2rem auto 0; padding: 1.5rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); text-align: center;
}
.kompat__nadpis { margin: 0 0 1rem; font-weight: 600; font-size: 1.02rem; }
/* Tabulka nastroj -> format. Mriezka, nie <table>: pri piatich riadkoch a
   dvoch stlpcoch je tabulka zbytocna vaha a na telefone sa zle zalamuje.
   Riadky maju tenku ciaru medzi sebou, aby sa dvojice nezliali. */
.kompat__tabulka {
  list-style: none; padding: 0; margin: 0 auto 1.2rem; max-width: 620px; text-align: left;
}
.kompat__tabulka li {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .4rem 1rem; align-items: baseline;
  padding: .58rem 0; border-top: 1px solid var(--line-soft);
}
.kompat__tabulka li:first-child { border-top: 0; }
.kompat__tabulka b { font-weight: 650; font-size: .98rem; letter-spacing: -.01em; }
/* Odporucany format je vyrazny, ostatne su za nim tlmene -- clovek ma odist
   s JEDNOU odpovedou, nie s piatimi moznostami. */
.kompat__tabulka span { font-family: var(--mono); font-size: .86rem; color: var(--ink); }
.kompat__tabulka i {
  display: block; margin-top: .2rem;
  font-family: var(--sans, inherit); font-style: normal;
  font-size: .82rem; color: var(--ink-faint);
}

@media (max-width: 460px) {
  .kompat__tabulka li { grid-template-columns: 1fr; gap: .15rem; }
}
.kompat__formaty { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; }
.kompat__stitok {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .02em;
  padding: .26rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
}
.kompat__pozn { margin: 1rem auto 0; max-width: 62ch; font-size: .9rem; color: var(--ink-soft); }

/* Generator bez stranky nie je odkaz. Musi to byt vidno aj bez farby --
   samotny odtien je pre farboslepeho ten isty signal ako ziadny. */
/* `cursor: default` plati len tam, kde sa NEDA kliknut. Sekcia, ktora ma
   stranku ale zatial nic nevyrobi, je stlmena A ZAROVEN je to odkaz -- na tej
   stranke je co citat. Kurzor, ktory tvrdi opak, je drobne klamstvo, ktore
   clovek nevie pomenovat, len mu nesedi. */
.gen--caka { border-left-color: var(--line); cursor: default; }
a.gen--caka { cursor: pointer; }
.gen--caka .gen__ikona { background: var(--line-soft); color: var(--ink-faint); border-color: var(--line); }
.gen--caka .gen__telo strong { color: var(--ink-soft); font-weight: 600; }
.gen--caka .gen__go { color: var(--ink-faint); font-weight: 500; font-style: italic; }

/* ------------------------------------------------- cennik

   Cena je vlavo a velka, popis vpravo. Zamerne: clovek cita cennik oci po
   cislach, nie po vetach, a chce ich mat pod sebou v jednom stlpci.

   `zadarmo` ma vlastny podklad, aby bolo na prvy pohlad vidiet, ze to nie je
   ta ista kategoria ako plateny riadok. */

.cennik { max-width: 860px; margin: 0 auto; display: grid; gap: 1.6rem; }
.cennik__blok {
  padding: 1.4rem 1.4rem 1.2rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.cennik__blok--zadarmo { background: var(--panel-2); border-color: var(--brand-edge); }
.cennik__blok h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.cennik__lead { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .93rem; max-width: 62ch; }

.cennik__zoznam { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.cennik__zoznam li {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: .3rem 1rem; align-items: baseline;
  padding-top: .9rem; border-top: 1px solid var(--line-soft);
}
.cennik__zoznam li:first-child { padding-top: 0; border-top: 0; }
.cennik__cena {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
  color: var(--brand-text); white-space: nowrap;
}
.cennik__cena--nula { color: var(--ink-soft); font-weight: 600; }
.cennik__co { display: grid; gap: .2rem; min-width: 0; }
.cennik__co strong { font-size: 1rem; }
.cennik__co span { font-size: .89rem; color: var(--ink-soft); line-height: 1.5; }

.baliky {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem;
}
.balik {
  padding: 1rem; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.balik__nazov { margin: 0 0 .5rem; font-weight: 650; font-size: .95rem; }
.balik__tokeny { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.balik__tokeny b { font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; }
.balik__cena { margin: .4rem 0 .1rem; font-size: 1.15rem; font-weight: 700; }
.balik__zakus { margin: 0; font-size: .78rem; color: var(--ink-faint); font-family: var(--mono); }

.cennik__pozn { margin: .6rem 0 0; font-size: .87rem; color: var(--ink-soft); max-width: 62ch; }
.cennik__pozn--vypnute { font-weight: 600; color: var(--ink); }

@media (max-width: 520px) {
  .cennik__zoznam li { grid-template-columns: 1fr; gap: .15rem; }
}

/* ------------------------------------------------- sprava stranky

   Zamerne strohe. Sprava nie je vykladna skrina: ma byt citatelna, hustá
   a nema odvádzať pozornosť od cisel. Ziadne tiene, ziadne animacie.

   Pouziva rovnake premenne ako zvysok stranky, takze dedi aj tmavu temu --
   vlastna paleta by znamenala druhy zdroj farieb a brana `jedna paleta` by
   spravne scervenala. */

.pack__povodne { display: block; font-size: .85rem; color: var(--ink-soft); }
.pack__zlava {
  display: block; font-style: normal; font-size: .78rem; font-weight: 600;
  color: var(--brand-text);
}

.neovereny__pozn { margin: .5rem 0 0; font-size: .88rem; color: var(--ink-soft); }

/* Vysledok skusky fotky. Znak aj farba naraz -- kto farby nerozlisi, ma
   z toho stale ctyri riadky so znakom. */
.skuska-fotky { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.skuska-fotky li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; }
.skuska-fotky strong { display: block; font-size: .95rem; }
.skuska-fotky p { margin: .2rem 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.skuska-fotky__znak { font-weight: 700; line-height: 1.5; }
.skuska-fotky .je-ok .skuska-fotky__znak { color: var(--ok, #1a7f37); }
.skuska-fotky .je-zle .skuska-fotky__znak { color: var(--chyba, #c0392b); }
/* `je-rada` je RADA, nie výsledok merania — preto tlmená a s otáznikom.
   Zelená by tvrdila, že sa niečo overilo; červená, že je niečo zle. Ani jedno
   neplatí: je to otázka, ktorú si má zákazník položiť sám (perspektíva pri
   dlhých dieloch, `fotka.js`). */
.skuska-fotky .je-rada .skuska-fotky__znak { color: var(--ink-soft, #6b7280); }
.skuska-fotky .je-rada strong { color: var(--ink-soft, #6b7280); font-weight: 600; }
.widget__zaver { margin: 1rem 0 0; font-weight: 600; }
.widget__zaver[data-druh="zle"] { color: var(--chyba, #c0392b); }

/* Obrazok k rozteci. SVG berie farbu z temy cez `currentColor`, takze sa
   v tmavom rezime nemusi vymienat za druhy subor. */
.roztec { margin: 1.2rem 0 1.6rem; color: var(--ink); }
.roztec svg { width: 100%; max-width: 340px; height: auto; display: block; }

.admin-body { background: var(--bg); }
/* `width: 100%` TU NIE JE ZBYTOCNE, hoci pri blokovom prvku by bolo.
   `body:not(.page--app)` je flexovy stlpec (kvoli pate dole) a `margin: 0 auto`
   je v priecnej osi automaticky okraj -- ten VYPINA roztiahnutie polozky.
   Bez definovanej sirky sa potom prvok zmensi len na svoju „fit-content"
   sirku, a to bolo 615 px pri okne 320 px. Rovnake cislo pri 320 aj pri 360
   bolo tou stopou: nebola to vec obsahu, ale podlahy.
   `min-width: 0` to NEOPRAVILO -- automaticke minimum tu nebolo vinnikom.
   Dokazane pokusom v prehliadaci: `width: 320px` na tomto prvku aj
   `display: block` na `body` obe zrazili stranku na 320 px. */
.admin { width: 100%; max-width: 900px; min-width: 0; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.admin__head { margin-bottom: 1.6rem; }
.admin__head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .3rem; }
.admin__kto { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.admin__oznam {
  margin: 0 0 1.4rem; padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); font-size: .93rem;
}
/* Uspech a chyba sa nesmu lisit LEN farbou -- kto farby nerozlisi, ma z toho
   dva rovnake pasy. Preto ma chyba aj hrubsi lavy okraj a tucny text. */
.admin__oznam--ok { background: var(--panel); }
.admin__oznam--zle {
  background: var(--panel); border-left: 4px solid var(--chyba, #c0392b);
  font-weight: 600;
}

.admin__blok {
  margin: 0 0 1.6rem; padding: 1.2rem 1.3rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.admin__blok h2 { margin: 0 0 1rem; font-size: 1.1rem; }

.admin__cisla {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem;
}
.admin__cisla li { display: grid; gap: .1rem; }
.admin__cisla b { font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.admin__cisla span { font-size: .82rem; color: var(--ink-soft); }

/* Poznamka pod cislami. Nie je to chyba ani uspech -- je to veta, ktora
   cisla nad nou vysvetli, takze nesmie vyzerat ako oznam. */
.admin__pozn {
  margin: .9rem 0 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.55;
}
.admin__pozn b { color: var(--ink); font-variant-numeric: tabular-nums; }
.admin__pozn code {
  font-size: .82em; padding: .1rem .3rem; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
}

.admin__blok .tabulka-obal { margin-top: 1rem; }
.admin__tab { border-collapse: collapse; width: 100%; font-size: .88rem; }
.admin__tab th, .admin__tab td { padding: .5rem .7rem; text-align: left; white-space: nowrap; }
.admin__tab thead th { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.admin__tab tbody tr { border-top: 1px solid var(--line); }
.admin__tab tbody th { font-weight: 600; }
.admin__tab td { font-variant-numeric: tabular-nums; }

/* Co clovek napisal vlastnymi slovami. Text sa NEZALAMUJE na jeden riadok --
   je to jedina cast prieskumu, ktora nie je predpripravena odpoved, a skratit
   ju by znamenalo zahodit presne to, kvoli comu sa pytame. */
.admin__poznamky { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; }
.admin__poznamky li {
  padding: .7rem .9rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.admin__poznamky p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.55; }
.admin__poznamka-akcia { margin: .6rem 0 0; }
.admin__poznamka-kedy { font-size: .78rem; color: var(--ink-soft); }
.admin__poznamka-dovod { font-size: .78rem; font-weight: 600; margin-left: .5rem; }

.admin__podnadpis {
  margin: 1.4rem 0 .7rem; font-size: .95rem;
}
/* Rebrik urovni je uzsi -- je to sest kratkych poloziek a v sirokej mriezke
   by sa roztiahli tak, ze by sa citali ako sest samostatnych blokov. */
.admin__cisla--uzke { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.admin__cisla--uzke b { font-size: 1.25rem; }

/* Nadpis nad poznamkami stal PRILEPENY na vetu o zlave -- vyzeralo to ako
   jeden odstavec s tucnym zaciatkom. Vidno to az na obrazku. */
.admin__blok h3 { margin: 1.5rem 0 .6rem; font-size: .95rem; }

.admin__form { display: grid; gap: 1.1rem; }
.admin__form--riadok { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .6rem; }
.admin__pole { display: grid; gap: .3rem; }
.admin__prepinac { display: flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.admin__prepinac input { width: 18px; height: 18px; accent-color: var(--brand-text); }
.admin__text { display: grid; gap: .3rem; }
.admin__nazov { font-weight: 600; font-size: .95rem; }
.admin__popis { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; max-width: 68ch; }
.admin__popis--varovanie { color: var(--ink); font-weight: 600; }

.admin input[type="text"], .admin input[type="email"] {
  width: 100%; padding: .55rem .7rem; font: inherit;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* Tabulka zaznamu sa na uzkej obrazovke posuva SAMA vo svojom ramceku --
   inak by posunula celu stranku a brana na pretecenie by spravne scervenala. */
.admin__zaznam { width: 100%; border-collapse: collapse; font-size: .86rem; display: block; overflow-x: auto; }
.admin__zaznam th, .admin__zaznam td { padding: .45rem .6rem; text-align: left; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.admin__zaznam th { color: var(--ink-soft); font-weight: 600; border-top: 0; }
.admin__zaznam code { font-family: var(--mono); font-size: .82rem; }

/* ------------------------------------------------- oznam nad strankou

   Vyvesuje sa zo spravy. Zlta je POVRCH, atrament je tmavy -- to iste
   pravidlo ako vsade inde.

   TRIEDA SA VOLA `oznam-pas`, NIE `oznam`, A JE TO NALEZ:
   `.oznam` uz na stranke existovalo (stranka 404 a overenie e-mailu) a moje
   pravidlo im prepisalo farbu pisma na takmer ciernu. V svetlej teme to nebolo
   vidiet vobec; v tmavej vysiel nadpis "Taky odkaz nepoznáme" s kontrastom
   1,01 -- teda neviditelny. Nasla to brana na kontrast, nie oko.
   Nove meno triedy sa oplati skontrolovat PRED napisanim, nie po nom. */

.oznam-pas {
  background: var(--brand); color: var(--brand-ink);
  padding: .6rem 1rem; text-align: center; font-size: .92rem; font-weight: 600;
}

/* ------------------------------------------------- postavene v MESHVIX 3D

   Dva stlpce: vlavo, o com to je, vpravo diely, ktore su v hre naozaj.
   Pod 900 px pod sebou -- na telefone by dva uzke stlpce znamenali, ze ani
   jeden nie je citatelny. */

.hra {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem; align-items: center;
}
@media (min-width: 900px) {
  .hra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.4rem; }
}

.hra__stitok {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint);
}
.hra__nazov { margin: 0 0 .7rem; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; }
.hra__popis { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }
.hra__body { margin: 0 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.hra__body li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: .93rem; }
/* Znackovy stvorcek namiesto odrazky -- odrazka je predvolena a nic nehovori. */
.hra__body li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .55rem; height: .55rem; border-radius: 3px; background: var(--brand);
}
.hra__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

/* Diely: mriezka 2x2. Pevny pomer stran, aby sa pri lenivom nacitani obrazkov
   nehybal zvysok stranky. */
.hra__diely {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
}
.hra__diely li {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: .5rem; box-shadow: var(--sh-1); text-align: center;
}
.hra__diely img {
  display: block; width: 100%; aspect-ratio: 360 / 280; height: auto;
  object-fit: contain; border-radius: calc(var(--r) - 6px); background: var(--nahlad);
}
.hra__diely span { display: block; margin-top: .4rem; font-size: .85rem; color: var(--ink-soft); }

/* ------------------------------------------------- co tu ludia vyrobili */

.zdielane {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1100px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem;
}
.zcard { flex: 0 1 calc(25% - .7rem); min-width: 160px; }
.zcard a {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: .5rem; box-shadow: var(--sh-1);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.zcard a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-text); }
.zcard__img { width: 100%; height: auto; aspect-ratio: 9 / 7; object-fit: contain; display: block; border-radius: var(--r-sm); background: var(--nahlad); }
.zcard__body { display: grid; gap: .1rem; padding: .5rem .3rem .2rem; }
.zcard__body strong { font-size: .9rem; }
.zcard__body small { font-size: .78rem; color: var(--ink-soft); }
.zdielane__prazdne { text-align: center; color: var(--ink-soft); margin: 0 0 1.4rem; }

/* ------------------------------------------------------- ucet a kredity */

.portal {
  max-width: 1000px; margin: 0 auto; display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--sh-1);
}
.portal h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.portal p { color: var(--ink-soft); }
.portal__body { margin: 0 0 1.4rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.portal__body li { position: relative; padding-left: 1.8rem; color: var(--ink-soft); font-size: .95rem; }
.portal__body li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 12px; height: 12px; border-radius: 3px; background: var(--brand); border: 1px solid var(--brand-edge);
}
.portal__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.portal__znak { color: var(--brand-text); line-height: 0; }

@media (max-width: 780px) {
  .portal { grid-template-columns: 1fr; }
  .portal__znak { display: none; }
  .gen { grid-template-columns: 44px minmax(0, 1fr); }
  .gen__ikona { width: 44px; height: 44px; font-size: 1.25rem; }
  .gen__go { grid-column: 2; }
}

/* --------------------------------- v ktorom generatore prave som (hlavicka) */

/* Ked je clovek v niektorom z piatich generatorov, tlacidlo v hlavicke
   nepise "Generatory", ale ktory to je. Bez toho vyzera hlavicka na
   vsetkych piatich rovnako a po dvoch prekliknutiach clovek nevie, kde je. */
.sekcie__znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: .85rem;
  background: var(--brand); color: var(--brand-ink);
}
.sekcie__kde { font-weight: 600; color: var(--ink); }
.sekcie--tu .sekcie__tlacidlo {
  gap: .45rem; padding: .22rem .5rem .22rem .28rem;
  border: 1px solid var(--line); border-radius: 999px;
}
.sekcie--tu[open] .sekcie__tlacidlo, .sekcie--tu .sekcie__tlacidlo:hover { border-color: var(--brand-text); }

@media (max-width: 640px) {
  /* Na uzkom displeji sa nazov nezmesti vedla znacky a odkazov -- zostane
     samotna ikona, ktora povie to iste a zaberie 22 px. */
  .sekcie__kde { display: none; }
}

/* --------------------------------------------------- miesto pre nastroj

   Ram vykresli stranku generatora a nechá v nej jedno miesto; nastroj do
   neho pripoji vlastny modul (`assets/js/widget.js`). Vzhlad miesta je moj,
   obsah je ich. */

.widget {
  max-width: 1100px; margin: 0 auto; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1rem, 3vw, 2rem); box-shadow: var(--sh-1);
}
/* Ked sa nastroj pripoji, prestava to byt "oznam v ramceku" a stava sa to
   z toho plocha, do ktorej kresli on. */
.widget[data-stav="hotovo"] { display: block; align-items: stretch; }
/* Platno a obrazky vo widgete nesmu prerast svoj ramcek. Bez tohto staci, aby
   si jeden nastroj nastavil pevnu sirku platna, a POSUNIE CELU STRANKU -- co
   sa 26. 8. stalo generatoru textur (pretecenie 186 px pri 375 px).
   Je to v rame zamerne: ram ruci za rozlozenie stranky, nie widget. */
.widget canvas, .widget img, .widget svg, .widget video {
  max-width: 100%;
  height: auto;
}

.widget__zaloha { margin: 0; color: var(--ink-soft); text-align: center; }

/* Chyba sa ukaze NA MIESTE nastroja, nie ako biela stranka -- a ukaze sa
   vzdy. Ticho prazdny ramcek vyzera ako "este sa nacitava" a nepovie nic. */
.widget__chyba { margin: 0; color: var(--warn); font-weight: 600; text-align: center; }
.widget__podrobnosti {
  margin: .8rem 0 0; max-width: 100%; overflow-x: auto;
  font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-xs); padding: .6rem .8rem;
}
.widget[data-stav="chyba"] { flex-direction: column; border-color: var(--warn); }

.hero--nastroj { padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero--nastroj .hero__h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* --------------------------------------------------------------- oznam

   Vysledok akcie na vlastnej stranke: overenie e-mailu, potvrdenie, chyba.
   Zelena a cervena samy nestacia -- pre farboslepeho je odtien ten isty
   signal ako ziadny, takze stav nesie aj ZNAK a nadpis. */

.oznam {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.8rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.4rem); box-shadow: var(--sh-1);
}
.oznam h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.oznam p { color: var(--ink-soft); }
.oznam__znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1rem;
  font-size: 1.7rem; font-weight: 700;
}
.oznam--ok .oznam__znak { background: var(--brand); color: var(--brand-ink); border: 1px solid var(--brand-edge); }
.oznam--chyba .oznam__znak { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.oznam--chyba { border-color: var(--warn); }
.oznam__cta { margin: 1.4rem 0 0; }

/* Pás v účte, keď e-mail nie je overený. Nie je to chyba, tak nie je
   červený -- je to nedokončený krok, tak je žltý. */
.neovereny {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .8rem 1.2rem; max-width: 900px; margin: 0 auto 1.4rem;
  background: var(--brand-soft); border: 1px solid var(--brand-edge);
  border-radius: var(--r); padding: .9rem 1.2rem; color: var(--ink);
}
.neovereny__text { margin: 0; }

/* ------------------------------------------- prihlasenie cez inu sluzbu

   Cely blok je skryty, kym server nepovie, ze je sluzba nastavena. Mrtve
   tlacidlo je horsie nez ziadne: clovek nan klika a hlada, preco nefunguje. */

.socialne { display: grid; gap: .9rem; margin: 0 0 1.1rem; justify-items: center; }
.socialne__alebo {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  margin: 0; font-size: .82rem; color: var(--ink-faint);
}
.socialne__alebo::before, .socialne__alebo::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}


/* ------------------------------------------------------ poistka na [hidden]

   `hidden` je atribut, ktory ma prvok schovat -- a schovava ho slabym
   pravidlom z prehliadaca. STACI JEDNO vlastne pravidlo s `display`, ktore
   ho prebije, a prvok sa znova objavi: vizualne aj v citacke obrazovky.
   Nepride pritom ziadna chyba a v kode to vyzera spravne, lebo `hidden` tam
   je napisany.

   V tomto stylopise uz bola uzka zaplata `.field[hidden]`, cize na to tu
   niekto raz narazil a zalepil to na jednom mieste. Toto je ta istá vec
   sirsie: `!important` preto, ze je to jediny sposob, ako prebit KAZDE
   buduce pravidlo, ktore o `hidden` nevie.

   Ked treba prvok s `hidden` napriek tomu ukazat, atribut sa odstrani --
   nie prebije stylom. */
[hidden] { display: none !important; }

/* ------------------------------------------------------- hlavicka na mobile

   Zmerané, nie odhadnuté: pri sirke okna 375 px mala `.top__nav` 437 px,
   takze cela stranka pretekala o 213 px do strany a obsah bol odrezany.
   Skratka to nebolo vidiet, kym sa na to niekto nepozrel na uzkom displeji.

   Skryva sa to, co je dostupne inde, a v tomto poradi:
     Galeria a Modely   su v patke aj v menu generatorov
     nazov znacky       znak zostava a je rozpoznatelny sam
     kod jazyka         zemegula povie to iste

   Menu generatorov, hlavne tlacidlo, ucet a prepinac jazykov zostavaju --
   to su veci, ktore inde nie su. */

@media (max-width: 700px) {
  .top__nav > a:not(.btn) { display: none; }
  .brand__name { white-space: nowrap; }
}

@media (max-width: 520px) {
  /* Znak znacky zostava; nazov je hned pod nim v patke aj v titulku okna. */
  .brand__name { display: none; }
  .top { padding-inline: .7rem; }
  .top__nav { gap: .45rem; }
  .btn--sm { padding: .4rem .62rem; }
}

@media (max-width: 430px) {
  /* Zemegula povie to iste, co dvojpismenovy kod, a usetri 20 px. */
  .jazyky__kod { display: none; }
  .jazyky__tlacidlo { padding: .25rem .4rem; }
  .sekcie__tlacidlo { font-size: .88rem; }
}

@media (max-width: 430px) {
  /* Na najuzsich telefonoch stali vedla seba dve takmer rovnake slova:
     ponuka "Generatory" a tlacidlo "Generator". Spolu 177 px z 320 --
     a hlavicka pretekala o 24 px v anglictine a o 51 px v slovencine,
     ktora ma dlhsie slova. Zmerane, nie odhadnute.

     Odchadza TLACIDLO, nie ponuka. Ponuka vedie na to iste, a navyse je
     to jedine miesto, kde je vidno, v ktorom generatore clovek prave je
     -- co si Jakub vyslovene ziadal. Na domovskej stranke je popri tom
     velke tlacidlo priamo v uvode.

     HRANICA SA 26. 8. POSUNULA Z 360 NA 430 a je to poucne: pri 360 to sedelo
     v anglictine aj slovencine, ale v den, ked pribudla NEMCINA, hlavicka
     pretiekla o 12 px. Nemecke "Anmelden" ma 91 px oproti anglickemu
     "Sign in" so 67 -- a taketo prekvapenie pride s KAZDYM dalsim jazykom.
     430 px je preto zamerne s rezervou: hranica ma vydrzat aj jazyk, ktory
     este nemame. Merane, nie odhadnute. */
  .top__nav > a.btn--primary { display: none; }
}

/* Stranka pre neznamu adresu: oznam a hned pod nim ponuka, nie slepa ulicka. */
.nf-dalej { max-width: 780px; margin: 2.4rem auto 0; }
.nf-dalej__nadpis { text-align: center; color: var(--ink-soft); margin: 0 0 1rem; }


/* CENA A CAS NAD TLACIDLOM GENEROVANIA.
   Zamerne nad nim a nie pod: zakaznik ma vediet, co ho to bude stat, este nez
   klikne. Cas sa zobrazi len ked ho je z coho pocitat -- pozri
   `job_odhad_trvania()`. */
.input__cena {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  margin: 0 0 .45rem;
  font-size: .87rem;
}
.cena__kredit { font-weight: 600; }
.cena__cas { opacity: .7; }
.cena__cas::before { content: "·"; margin-right: .45rem; opacity: .6; }

/* ------------------------------------------------- galéria ako komunita */

/* Prepínač radenia. Nad zoznamom, aby pri listovaní zostal na mieste. */
.gal-lista { display: flex; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }

/* Päta karty je MIMO odkazu na štúdio: vnorený odkaz v odkaze prehliadač
   rozoberá nepredvídateľne a klik na srdiečko by občas otvoril štúdio. */
.gcard__pata {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .5rem .75rem .65rem;
  border-top: 1px solid var(--line);
}
.gcard__srdce {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: .2rem .35rem; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: .9rem;
  border-radius: .4rem; font-variant-numeric: tabular-nums;
}
.gcard__srdce:hover { color: var(--ink); }
.gcard__srdce.je-moje { color: #d6336c; }
.gcard__srdce:disabled { opacity: .5; cursor: progress; }
.gcard__stiahnut { font-size: .85rem; opacity: .8; }
.gcard__stiahnut:hover { opacity: 1; }

/* -------------------------------------------------------------- profilovka */

/* Profilovka je vždy kruh a vždy štvorec na vstupe — `object-fit: cover`
   oreže, čo z pomeru strán prečnieva, namiesto aby to roztiahlo tvár. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--panel); color: var(--ink-soft);
  border: 1px solid var(--line); overflow: hidden;
  font-weight: 700; line-height: 1; user-select: none;
}
.avatar--mini { width: 20px; height: 20px; font-size: .65rem; }
.avatar--velka { width: 88px; height: 88px; font-size: 2rem; }
.avatar--pismeno { background: var(--brand, var(--panel)); color: var(--brand-text, var(--ink)); }

.gcard__autor {
  display: flex; align-items: center; gap: .4rem;
  margin: .2rem 0 .1rem; font-size: .82rem; color: var(--ink-soft);
}

/* Profil v účte: profilovka vľavo, polia vpravo, na úzkom pod sebou. */
.profil { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.profil__vlavo { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.profil__vpravo { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.profil__akcie { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.profil__zdroj { font-size: .78rem; color: var(--ink-soft); text-align: center; }

/* Výber modelu na profilovku. Dlaždice sú štvorcové a rovnaké — pri rôznych
   pomeroch strán by sa mriežka trhala a náhľady by sa nedali porovnať. */
.profil__vyber {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .5rem; margin: .8rem 0; max-height: 60vh; overflow-y: auto;
}
.profil__kus {
  padding: 0; border: 1px solid var(--line); border-radius: .5rem;
  background: var(--bg); cursor: pointer; overflow: hidden; line-height: 0;
}
.profil__kus:hover { border-color: var(--brand, #6ea8fe); }
.profil__kus img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Meno autora je tlačidlo, ale nemá vyzerať ako tlačidlo — je to odkaz na
   jeho prácu vnútri karty, ktorá je sama odkazom do štúdia. */
.gcard__autorMeno {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}
.gcard__autorMeno:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Hlavička tvorcu nad zoznamom, keď je galéria zúžená na jedného človeka. */
.gal-tvorca {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: .8rem; background: var(--panel);
}
.gal-tvorca__text { flex: 1 1 12rem; min-width: 0; }
.gal-tvorca__text h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.gal-tvorca__text p { margin: 0; font-size: .88rem; color: var(--ink-soft); }

/* ------------------------------------------------ hromadné stiahnutie */

/* Lišta sa ukáže až keď je niečo vybrané — prázdna lišta s vypnutým
   tlačidlom je len šum nad zoznamom. */
.hromadne {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .75rem; margin: 0 0 .8rem;
  border: 1px solid var(--line); border-radius: .6rem; background: var(--panel);
  font-size: .88rem;
}

/* Zaškrtávatko leží NA náhľade, nie v riadku tlačidiel: pri vyberaní
   viacerých sa klikáva rýchlo za sebou a mieriť do malého štvorčeka medzi
   tlačidlami je otrava. Podklad je preto, aby bolo vidno aj na svetlom
   náhľade. */
.mycard { position: relative; }
.mycard__vyber {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  width: 20px; height: 20px; cursor: pointer;
  accent-color: var(--brand-text, #2a6cf0);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-radius: .25rem;
}

/* nahlasenie nevhodneho modelu -------------------------------------------- */
/* Vlajka je zamerne nenapadna: ma byt po ruke tomu, kto nieco zavadne uvidi,
   a nema lakat na klik zo zvedavosti. Preto tlmena farba a plna nepriehladnost
   az pri najazde alebo zameraní klavesnicou -- skryt ju uplne by znamenalo,
   ze ju najde len mys, nie klavesnica. */
.gcard__nahlasit {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); opacity: .45; font-size: .95rem; line-height: 1;
  padding: .3rem .4rem; border-radius: 6px;
}
.gcard__nahlasit:hover, .gcard__nahlasit:focus-visible { opacity: 1; }

.nahlasenie {
  border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem;
  max-width: 26rem; width: calc(100vw - 2rem);
  background: var(--panel); color: var(--ink);
}
.nahlasenie::backdrop { background: rgb(0 0 0 / .45); }
.nahlasenie h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.nahlasenie__co { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .9rem; }
.nahlasenie__dovody { display: grid; gap: .4rem; margin-bottom: .8rem; }
.nahlasenie__dovody .je-vybrany {
  border-color: var(--zlta); background: color-mix(in srgb, var(--zlta) 18%, transparent);
}
.nahlasenie__popis {
  width: 100%; min-height: 4.5rem; resize: vertical; padding: .5rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit;
}
.nahlasenie__hlaska { margin: .7rem 0 0; font-size: .92rem; }
.nahlasenie__pata { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }

/* rada k fotke pri nahravani -------------------------------------------- */
/* Tlmená, ale čitateľná: je to rada, nie chyba. Zmerané 2. 9. -- predmet
   v scéne motor odleje aj s okolím, jeden predmet na pozadí vyjde dobre. */
.drop__rada {
  display: block; max-width: 34ch; margin: .45rem auto 0;
  font-size: .78rem; line-height: 1.35; color: var(--ink-soft);
}

/* ZOZNAM DIELOV po rozdelení modelu.
   Diel je TLAČIDLO, nie riadok tabuľky: klik naň ho nechá na scéne samotný
   a vzťahuje sa naň všetko ostatné (stiahnutie, previerka, zjednodušenie).
   Vybraný diel je zvýraznený farbou značky, aby bolo vidno, že to, čo je na
   scéne, nie je celý model. */
.diely { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0; }
.diel {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: .5rem;
  padding: .4rem .6rem; font-size: .8rem; color: inherit; text-align: left; cursor: pointer;
}
.diel:hover { border-color: color-mix(in srgb, var(--brand-text) 45%, var(--line)); }
.diel b { font-family: var(--mono); color: var(--ink-faint); font-weight: 600; }
.diel i { font-style: normal; color: var(--ink-faint); font-size: .72rem; margin-left: auto; }
.diel.is-active { border-color: var(--brand-text); background: color-mix(in srgb, var(--brand) 12%, var(--panel)); }

/* NÁVODY pod štúdiom: kam s modelom ďalej.
   Nie je to súčasť nástroja, preto vlastný odstup a šírka viazaná na text
   (--sirka-textu), nie na trojstĺpcové rozloženie štúdia nad ním. */
.navody { max-width: 68rem; margin: 3rem auto 4rem; padding: 0 1.2rem; }
.navody__h { font-size: 1.35rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.navody__h2 { font-size: 1.05rem; margin: 2.2rem 0 .4rem; letter-spacing: -.02em; }
.navody__uvod { color: var(--ink-soft); margin: 0 0 1.2rem; max-width: 62ch; font-size: .9rem; }
.navody__mriezka {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.navod { background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: 1rem; }
.navod__h { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 0 0 .5rem; }
.navod__ikona { color: var(--brand-text); }
.navod__format { margin: 0 0 .6rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.navod__format code {
  font-family: var(--mono); font-size: .72rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: .3rem; padding: .1rem .4rem;
}
.navod__text { margin: 0 0 .6rem; font-size: .86rem; }
/* Riadok „na čo si dať pozor" má vlastnú farbu ZÁMERNE: je to jediná veta
   na karte, ktorú si človek musí odniesť, keď zvyšok preletí očami. */
.navod__pozor { margin: 0; font-size: .82rem; color: var(--ink-soft); border-left: 2px solid var(--brand-text); padding-left: .6rem; }

.navody__tabulka { border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; font-size: .85rem; }
.navody__riadok { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: .5rem; padding: .45rem .8rem; }
.navody__riadok + .navody__riadok { border-top: 1px solid var(--line); }
.navody__riadok--hlava { background: var(--panel); font-weight: 600; font-size: .78rem; color: var(--ink-faint); }
.navody__riadok code { font-family: var(--mono); font-size: .8rem; }
.navody__riadok .ano { color: var(--ok, #26c281); }
.navody__riadok .nie { color: var(--ink-faint); }

@media (max-width: 34rem) {
  /* Na telefóne sa štvorstĺpcová tabuľka nezmestí a zlomí sa do neprečítateľnej
     kaše. Menšie písmo drží štyri stĺpce pohromade -- rozbiť ju na karty by
     znamenalo stratiť to jediné, na čo je: porovnanie riadok po riadku. */
  .navody__riadok { grid-template-columns: 1.6fr 1fr .7fr 1.2fr; font-size: .74rem; padding: .4rem .5rem; }
}