/* /karta#sablony „Jedna karta. Nekonečno možností." — skúšobná Qivelo Karta (casti/vyskusat.html,
 * logika build/web/skusobna-karta.js cez zdroj-js/vyskusat.js → js/vyskusat.js).
 *
 * Kroky Systém · Odmena · Logo · Meno ležia na sebe (.sk-zasobnik) — „Ďalej“ je vždy na tom istom mieste
 * a nič neposkočí. Na počítači ovládanie vľavo (468 px = šesť systémov po 78 px v rade), karta vpravo;
 * pod 900 px ovládanie v strede a karta pod ním (ako na živom webe: karta pod tlačidlami).
 *
 * Tma: plocha čierna, vrstvy Grafit, text Hmla, tlmený #BDB3DD; tlačidlo a zvolená voľba Levanduľa
 * s textom Atrament, chyby Broskyňa ako výplň. Tlačidlá peňaženky ostávajú podľa Apple/Google.
 * Všetko pod #sablony — styles.css má vlastné .vzorka, .pole, .tlacidlo; kolízie sa tu vynulujú.
 * Koliesko farieb (koleso.js) visí v <body>, preto jeho pravidlá na konci nie sú pod #sablony.
 */

/* ── Rozloženie ako .rozdelenie: ovládanie na ľavej hrane obsahu (zarovno s faktami), karta v strede vpravo ── */
#sablony .vyskusat {
  display: grid; grid-template-columns: minmax(0, 468px) minmax(300px, 1fr); align-items: center;
  gap: var(--m-7) var(--m-stlpce);
}
#sablony .vyskusat-ovladanie { min-width: 0; }
#sablony .vyskusat-karta { justify-self: center; width: clamp(300px, 30vw, 400px); }
/* Pass v Apple Wallet: zaoblenie rohov ako v telefóne, vlasový obrys, aby karta nesplynula s tmou. */
#sablony .karta-zaloha {
  display: block; width: 100%; height: auto; aspect-ratio: 1125 / 1535; border-radius: 4.2% / 3.1%;
  box-shadow: 0 0 0 1px rgba(243, 239, 252, .1), 0 28px 56px -18px rgba(0, 0, 0, .7);
}
@media (max-width: 899px) {
  #sablony .vyskusat { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  #sablony .vyskusat-ovladanie { width: 100%; max-width: 468px; }
  #sablony .vyskusat-karta { width: min(100%, 380px); }
}

/* ── Kostra komponentu ── */
/* --sk-os = zarovnanie ovládania: start (počítač, stĺpec vľavo) alebo center (jeden stĺpec pod nadpisom). */
#sablony .sk { --sk-os: start; display: flex; flex-direction: column; gap: var(--m-5); width: 100%; text-align: var(--sk-os); }
/* Jeden stĺpec: ovládanie v strede pod nadpisom (hlava--stred) a nad kartou. */
@media (max-width: 899px) { #sablony .sk { --sk-os: center; } }
#sablony .sk [hidden] { display: none !important; }
#sablony .sk-krok { display: flex; flex-direction: column; align-items: var(--sk-os); gap: var(--m-4); }
#sablony .sk-zasobnik { display: grid; }
#sablony .sk-zasobnik > .sk-krok { grid-area: 1 / 1; min-width: 0; }
#sablony .sk .sk-zasobnik > .sk-krok[hidden] { display: flex !important; visibility: hidden; }
#sablony .sk-zasobnik .sk-dalej { margin-top: auto; }
#sablony .sk[data-krok="karta"] .sk-zasobnik { display: none; }
#sablony .sk .je-skryte { visibility: hidden; }

/* Kroky ako text: aktuálny Hmla so štvorčekom zo znaku pod ním, prejdené tlmené (dá sa na ne vrátiť),
   ďalšie ešte stlmenejšie. Záporný okraj = vnútorný okraj tlačidla, text stojí na hrane stĺpca. */
#sablony .sk-kroky { display: flex; flex-wrap: wrap; justify-content: var(--sk-os); gap: var(--m-1); margin: 0 -10px; }
#sablony .sk-kroky button {
  position: relative; min-height: 36px; padding: 0 10px; border-radius: var(--r-pilulka);
  font-size: var(--fs-maly); font-weight: 500; color: var(--tlmeny); transition: color var(--cas-rychly) var(--ease);
}
#sablony .sk-kroky button[aria-current] { color: var(--text); }
#sablony .sk-kroky button[aria-current]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 1.5px; background: var(--akcent);
}
#sablony .sk-kroky button:disabled { color: color-mix(in srgb, var(--tlmeny) 64%, var(--bg)); cursor: default; }

#sablony .sk-otazka { font-family: var(--font-nadpis); font-weight: 600; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.3; letter-spacing: var(--tr-h3); color: var(--text); }
#sablony .sk-popis { min-height: 3em; max-width: 30em; font-size: var(--fs-maly); line-height: 1.5; color: var(--tlmeny); text-wrap: pretty; }
#sablony .sk-pozn { font-size: var(--fs-label); line-height: 1.5; color: var(--tlmeny); }
#sablony .sk[data-krok="karta"] .sk-pozn { display: none; }
/* Bez ukážky na serveri: generátor ostáva, krok s menom a kartou nie. */
#sablony .sk--bez-ukazky [data-sk-ist="meno"], #sablony .sk--bez-ukazky .sk-pozn { display: none; }

/* ── Hlavné tlačidlá: „Ďalej“, „Vytvoriť kartu“ a akcie hotovej karty, jedna výška 48 px ── */
#sablony .sk-dalej, #sablony .uk-form button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 48px; padding: 0 28px; border-radius: var(--r-pilulka); background: var(--tl-bg); color: var(--tl-text);
  font-size: var(--fs-text); font-weight: 500; line-height: 24px; white-space: nowrap;
  transition: background-color var(--cas-rychly) var(--ease), transform var(--cas-rychly) var(--ease);
}
#sablony .sk-dalej:active, #sablony .uk-form button:active { transform: scale(.97); }

/* ── 1 · Systém: šesť veľkých volieb v rade (po 78 px, „Permanentka“ má 76), v užšom stĺpci po troch ── */
#sablony .sk-krok[data-sk-krok="system"] { container-type: inline-size; }
#sablony .vzorkovnik { display: flex; flex-wrap: nowrap; justify-content: space-between; align-self: stretch; width: 100%; margin: 0; }
#sablony .vzorkovnik button {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--m-2); padding: var(--m-1) 0;
  font-size: var(--fs-label); font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--tlmeny);
  transition: color var(--cas-rychly) var(--ease);
}
#sablony .vzorkovnik button[aria-checked="true"] { color: var(--text); }
/* .vzorka = krúžok s ikonou (v styles.css je .vzorka obrázok karty — tu ako krúžok). */
#sablony .vzorka {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; scroll-snap-align: none;
  border-radius: 50%; background: var(--plocha); color: var(--text); box-shadow: inset 0 0 0 1px var(--linka);
  transition: background-color var(--cas-rychly) var(--ease), color var(--cas-rychly) var(--ease), box-shadow var(--cas-rychly) var(--ease);
}
#sablony .vzorka svg { width: 20px; height: 20px; }
#sablony .vzorkovnik button[aria-checked="true"] .vzorka { background: var(--akcent); color: var(--tl-text); box-shadow: none; }
@container (max-width: 467px) {
  #sablony .vzorkovnik { flex-wrap: wrap; justify-content: center; row-gap: var(--m-4); }
  #sablony .vzorkovnik button { flex: 0 0 33.333%; }
}

/* ── 2 · Odmena: počítadlo − hodnota + (hodnota sa dá aj napísať) a odmena ako pilulky ── */
#sablony .sk-pravidla { display: flex; flex-direction: column; align-items: var(--sk-os); gap: var(--m-2); }
#sablony .sk-pocet { display: inline-flex; align-items: center; height: 48px; padding: 4px; border-radius: var(--r-pilulka); box-shadow: inset 0 0 0 1px var(--linka-silna); transition: box-shadow var(--cas-rychly) var(--ease); }
#sablony .sk-pocet:focus-within { box-shadow: inset 0 0 0 2px var(--akcent); }
#sablony .sk-pocet button {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text);
  transition: background-color var(--cas-rychly) var(--ease), opacity var(--cas-rychly) var(--ease), transform var(--cas-rychly) var(--ease);
}
#sablony .sk-pocet button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#sablony .sk-pocet button:active:not(:disabled) { transform: scale(.92); }
#sablony .sk-pocet button:disabled { opacity: .3; cursor: default; }
#sablony .sk-pocet-hodnota { display: inline-flex; align-items: baseline; justify-content: center; gap: .3em; min-width: 7.5em; padding: 0 var(--m-2); font-size: var(--fs-maly); color: var(--tlmeny); white-space: nowrap; cursor: text; }
#sablony .sk-pocet-hodnota input {
  min-width: 1ch; padding: 0; border: 0; background: none; outline: none; text-align: center; color: var(--text); caret-color: var(--akcent);
  font-family: var(--font-nadpis); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* Úrovne: Striebro a Zlato v riadku — názov, od koľkých návštev, zľava. */
#sablony .sk-uroven { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--sk-os); gap: var(--m-2); }
#sablony .sk-uroven b { width: 4.6em; font-size: var(--fs-maly); font-weight: 600; color: var(--text); text-align: left; }
#sablony .sk-pravidla--urovne .sk-pocet-hodnota { min-width: 6.2em; }
#sablony .sk-uroven .sk-pocet + .sk-pocet .sk-pocet-hodnota { min-width: 3.4em; }
#sablony .sk-volby { display: flex; flex-wrap: wrap; justify-content: var(--sk-os); gap: var(--m-2); }
#sablony .sk-volby button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--m-4); border-radius: var(--r-pilulka);
  box-shadow: inset 0 0 0 1px var(--linka-silna); font-size: var(--fs-maly); font-weight: 500; color: var(--text);
  transition: background-color var(--cas-rychly) var(--ease), color var(--cas-rychly) var(--ease);
}
#sablony .sk-volby button[aria-checked="true"] { background: var(--tl-bg); color: var(--tl-text); box-shadow: none; }
#sablony [data-sk-odmena] { align-self: stretch; }

/* ── Polia (v styles.css je .pole obal s okrajom — tu je .pole samotný input) ── */
#sablony .pole {
  display: block; width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 var(--m-4);
  border: 0; border-radius: var(--r-pole); background: var(--plocha); color: var(--text);
  font: inherit; font-size: var(--fs-text); box-shadow: inset 0 0 0 1px var(--linka-silna);
  -webkit-appearance: none; appearance: none; transition: box-shadow var(--cas-rychly) var(--ease);
}
#sablony .pole::placeholder { color: var(--tlmeny); opacity: 1; }
#sablony .pole:focus { outline: none; box-shadow: inset 0 0 0 2px var(--akcent); }

/* ── 3 · Logo: hľadanie webu, nahratie loga, farby ── */
#sablony .sk-hladanie { position: relative; width: 100%; }
#sablony .sablony-hladaj { display: flex; gap: var(--m-2); width: 100%; margin: 0; }
#sablony .sablony-hladaj .pole { flex: 1; width: auto; }
/* „Nájsť“ je vedľajšie tlačidlo (obrys) — hlavné v kroku je „Ďalej“. */
#sablony .sablony-hladaj button {
  position: relative; flex: none; height: 48px; padding: 0 22px; border-radius: var(--r-pilulka);
  color: var(--akcent); box-shadow: inset 0 0 0 1.5px currentColor; font-size: var(--fs-text); font-weight: 500; line-height: 24px;
  transition: background-color var(--cas-rychly) var(--ease);
}
/* Výsledky hľadania ako rozbaľovací zoznam NAD ostatným — pod hľadaním sa nič nepohne. */
#sablony .sablony-vysledky {
  position: absolute; top: calc(100% + var(--m-2)); left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px;
  border-radius: var(--r-pole); background: var(--plocha); box-shadow: inset 0 0 0 1px var(--linka-silna), 0 18px 40px rgba(0, 0, 0, .55);
}
#sablony .sablony-vysledky[hidden] { display: none; }
#sablony .sablony-vysledky button {
  display: flex; align-items: center; gap: var(--m-3); min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  text-align: left; color: var(--text); font-size: var(--fs-maly);
}
#sablony .sablony-vysledky button:focus-visible { background: rgba(243, 239, 252, .07); outline: none; }
#sablony .sablony-vysledky img { flex: none; width: 20px; height: 20px; border-radius: 4px; }
#sablony .sablony-vysledky span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sablony .sablony-vysledky small { flex: none; margin-left: auto; color: var(--tlmeny); font-size: var(--fs-label); }
#sablony .sablony-nastroje { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--sk-os); gap: var(--m-4); margin: 0; }
/* Nahrať logo: ikona a text bez rámika (minimalistické tlačidlo ako na živom webe). */
#sablony .sablony-logo {
  display: inline-flex; align-items: center; gap: var(--m-2); min-height: 44px; margin-left: calc(-1 * var(--m-1)); padding: 0 var(--m-1);
  color: var(--tlmeny); font-size: var(--fs-maly); font-weight: 500; cursor: pointer; transition: color var(--cas-rychly) var(--ease);
}
#sablony .sablony-logo svg { flex: none; }
#sablony .sablony-farby { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--sk-os); gap: var(--m-3); }
#sablony .sablony-vzorky { display: contents; }
/* Farby: krúžok 34 px vo farbe karty; zvolená má Hmla prstenec (Levanduľa by splynula s fialovou kartou). */
#sablony .sablony-farby button {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--f);
  box-shadow: inset 0 0 0 1px rgba(243, 239, 252, .16), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--prstenec, transparent);
  transition: box-shadow var(--cas-stredny) var(--ease), transform var(--cas-stredny) var(--ease);
}
#sablony .sablony-farby button[aria-checked="true"], #sablony .sablony-koliesko[aria-expanded="true"] { --prstenec: var(--text); }
#sablony .sablony-farby button:focus-visible { --prstenec: var(--akcent); outline: none; }
/* Dotyková plocha 44 px pri krúžku 34 px — neviditeľný presah. */
#sablony .sablony-farby button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
/* Koliesko = vlastná farba (koleso.js): dúhový prstenec okolo tmavého stredu. */
#sablony .sablony-farby .sablony-koliesko {
  background: radial-gradient(circle closest-side, var(--bg) 54%, transparent 56%),
              conic-gradient(#ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #0a84ff, #5e5ce6, #bf5af2, #ff375f, #ff3b30);
}
#sablony .sablony-stav { min-height: 3em; margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--tlmeny); }

/* ── Chyby: Broskyňa ako výplň s textom Atrament ── */
#sablony .sablony-stav.je-chyba, #sablony .uk-hlaska:not(:empty), #sablony .uk-stav:not(:empty) {
  width: fit-content; max-width: 100%; min-height: 0; padding: 4px 10px; border-radius: var(--r-maly);
  background: var(--broskyna); color: var(--atrament); font-size: var(--fs-maly); font-weight: 500; line-height: 1.4; text-align: left;
}
#sablony .uk-hlaska:empty { display: block; min-height: 1.5em; }
#sablony .uk-stav:empty { display: none; }

/* ── 4 · Meno: otázka, pole, hláška a „Vytvoriť kartu“ dole na mieste „Ďalej“ ── */
/* Formulár je display: contents — v DOM sa nič nemení, len poradie: pole → hláška → tlačidlo. */
#sablony [data-sk-krok="meno"] .uk-form { display: contents; }
#sablony [data-sk-krok="meno"] .uk-form .pole { order: 1; }
#sablony [data-sk-krok="meno"] .uk-hlaska { order: 2; }
#sablony [data-sk-krok="meno"] .uk-form button { order: 3; margin-top: auto; }

/* Krúžok pri hľadaní a pri príprave karty — text tlačidla zmizne, šírka ostane. */
#sablony .sk-toci {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; opacity: 0;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
}
#sablony .je-nacitava button > span { visibility: hidden; }
#sablony .je-nacitava .sk-toci { opacity: 1; animation: sk-toci .75s linear infinite; }
#sablony .je-nacitava button:disabled { opacity: 1; }
@keyframes sk-toci { to { transform: rotate(360deg); } }

/* ── 5 · Hotová karta: peňaženka (telefón) alebo veta o QR (počítač), „Spustiť kartu u mňa“, ťuknutie ── */
#sablony .sk-krok[data-sk-krok="karta"] { align-items: var(--sk-os); }
#sablony .sk-akcie { display: flex; flex-wrap: wrap; justify-content: var(--sk-os); gap: var(--m-3); }
#sablony .sk-akcie .tlacidlo { height: 48px; padding: 0 28px; }
#sablony .uk-qr { max-width: 22em; font-size: var(--fs-text); line-height: 1.5; color: var(--text); text-wrap: balance; }
#sablony .uk-koniec { max-width: 24em; font-size: var(--fs-maly); line-height: 1.5; color: var(--tlmeny); text-wrap: balance; }
#sablony .uk-znova {
  min-height: 44px; padding: 0; color: var(--tlmeny); font-size: var(--fs-maly); font-weight: 500;
  text-underline-offset: .18em; transition: color var(--cas-rychly) var(--ease);
}
/* Tlačidlá peňaženiek v tvare oficiálnych odznakov (čierne, biely text) — ako na /karta podnikov. */
#sablony .uk-wbtn {
  display: flex; align-items: center; gap: var(--m-4); width: 100%; max-width: 360px; min-height: 64px; padding: 11px 22px;
  border: 1px solid #A6A6A6; border-radius: 16px; background: #000; color: #fff; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--cas-rychly) var(--ease), border-color var(--cas-rychly) var(--ease);
}
#sablony .uk-wbtn:active { transform: scale(.985); }
#sablony .uk-wbtn[aria-disabled="true"] { cursor: default; border-color: rgba(166, 166, 166, .45); }
#sablony .uk-wbtn[aria-disabled="true"] > * { opacity: .45; }
#sablony .uk-wbtn svg { flex: none; }
#sablony .uk-wbtn .wtxt { display: flex; flex-direction: column; line-height: 1.18; }
#sablony .uk-wbtn .wtxt em { font-style: normal; font-size: var(--fs-label); letter-spacing: .01em; color: rgba(255, 255, 255, .72); }
#sablony .uk-wbtn .wtxt strong { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

/* ── Prejdenie myšou len tam, kde je myš — na dotyku by stav ostal „prilepený“ po ťuknutí ── */
@media (hover: hover) {
  #sablony .sk-kroky button:not(:disabled):hover { color: var(--text); }
  #sablony .sk-dalej:hover, #sablony .uk-form button:hover { background: var(--tl-hover); }
  #sablony .vzorkovnik button:hover { color: var(--text); }
  #sablony .vzorkovnik button:hover .vzorka { box-shadow: inset 0 0 0 1px var(--linka-silna); }
  #sablony .vzorkovnik button[aria-checked="true"]:hover .vzorka { box-shadow: none; }
  #sablony .sk-pocet button:hover:not(:disabled) { background: rgba(243, 239, 252, .08); }
  #sablony .sk-volby button:not([aria-checked="true"]):hover { background: var(--plocha); }
  #sablony .sablony-hladaj button:hover { background: color-mix(in srgb, var(--akcent) 12%, transparent); }
  #sablony .sablony-vysledky button:hover { background: rgba(243, 239, 252, .07); }
  #sablony .sablony-logo:hover { color: var(--text); }
  #sablony .sablony-farby button:hover { transform: scale(1.08); }
  #sablony .uk-znova:hover { color: var(--text); text-decoration: underline; }
  #sablony .uk-wbtn:hover { transform: translateY(-1px); border-color: #fff; }
}
/* .tlacidlo zo styles.css má :hover bez podmienky — na dotyku ho tu vrátiť do pokoja. */
@media (hover: none) {
  #sablony .sk-akcie .tlacidlo:hover { background: var(--tl-bg); }
  #sablony .sk-akcie .tlacidlo--obrys:hover { background: transparent; }
}

/* ── Telefón ── */
@media (max-width: 480px) {
  #sablony .sk-akcie { align-self: stretch; flex-direction: column; }
  #sablony .sk-akcie .tlacidlo { width: 100%; }
  #sablony .uk-wbtn { max-width: none; }
  /* Úrovne: názov nad dvoma počítadlami (vedľa seba by sa nezmestili). */
  #sablony .sk-uroven { gap: 6px; }
  #sablony .sk-uroven b { width: 100%; text-align: var(--sk-os); font-size: var(--fs-label); }
  #sablony .sk-uroven .sk-pocet { height: 44px; padding: 2px; }
  #sablony .sk-uroven .sk-pocet button { width: 40px; height: 40px; }
  #sablony .sk-pravidla--urovne .sk-pocet-hodnota, #sablony .sk-uroven .sk-pocet + .sk-pocet .sk-pocet-hodnota { min-width: 0; padding: 0 4px; font-size: var(--fs-label); }
  #sablony .sk-uroven .sk-pocet-hodnota input { font-size: 18px; }
}
/* Dotyk: kroky a voľby aspoň 44 px na prst. */
@media (pointer: coarse) {
  #sablony .sk-kroky button, #sablony .sk-volby button { min-height: 44px; }
}

/* ── Pohyb: nový krok sa jemne prelne, hotová karta príde po jednom; nič pri F5 ── */
#sablony .uk-prichod { animation: uk-prichod var(--cas-stredny) var(--ease-out) both; }
@keyframes uk-prichod { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#sablony .sk--odchod :is(.sk-kroky, .sk-zasobnik, .sk-pozn) {
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--cas-rychly) var(--ease), transform var(--cas-rychly) var(--ease);
}
#sablony .sk-postupne > * { animation: sk-prichod var(--cas-pomaly) var(--ease-out) calc(var(--i, 0) * 70ms) both; }
@keyframes sk-prichod { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #sablony .uk-prichod, #sablony .sk-postupne > * { animation: none; }
  #sablony .sk--odchod :is(.sk-kroky, .sk-zasobnik, .sk-pozn) { transition: none; }
}

/* ══ Koliesko farieb (koleso.js) — visí v <body>; na počítači pod kolieskom, na telefóne panel pri spodnom
   okraji (rovnaké podmienky ako MQ v build/web/spolocne.js: telefón alebo okno na výšku). ══ */
.koleso {
  position: absolute; z-index: 40; left: 0; top: 0; width: 272px; padding: var(--m-4);
  border-radius: var(--r-panel); background: var(--tma-vrstva); color: var(--hmla); text-align: left;
  box-shadow: inset 0 0 0 1px rgba(243, 239, 252, .14), 0 24px 48px rgba(0, 0, 0, .6);
}
.koleso[hidden] { display: none; }
.koleso-plocha { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; cursor: crosshair; }
.koleso-plocha canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.koleso-bod { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(0, 0, 0, .5); pointer-events: none; }
.koleso-jas { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; margin: var(--m-4) 0 var(--m-3); border-radius: 7px; background: linear-gradient(90deg, #000, var(--f, #fff)); cursor: pointer; }
.koleso-jas::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.koleso-jas::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.koleso-jas:focus-visible { outline: 2px solid var(--levandula); outline-offset: 3px; }
.koleso-spodok { display: flex; align-items: center; gap: var(--m-3); }
.koleso-vzorka { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243, 239, 252, .16); }
.koleso-hex {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-pole);
  background: var(--tma); color: var(--hmla); box-shadow: inset 0 0 0 1px rgba(243, 239, 252, .3);
  font: 500 16px/1 ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase;
}
.koleso-hex:focus { outline: none; box-shadow: inset 0 0 0 2px var(--levandula); }
/* „Hotovo“ vyzerá ako .tlacidlo — koleso.js ho kreslí bez triedy tlačidla. */
.koleso-hotovo {
  flex: none; height: 44px; padding: 0 18px; border-radius: var(--r-pilulka); background: var(--levandula); color: var(--atrament);
  font-size: var(--fs-text); font-weight: 500; line-height: 24px; transition: background-color var(--cas-rychly) var(--ease);
}
@media (hover: hover) { .koleso-hotovo:hover { background: var(--levandula-svetla); } }
@media (max-width: 733px), (max-aspect-ratio: 11/10) {
  .koleso { position: fixed; z-index: 60; left: 50%; top: auto; bottom: var(--m-4); transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); }
}