/* /tvorcovia/ — portál Veelyn Creators (aplikácia tvorcu)
   Základ (pozadie, písmo, formulárové polia wd-*, pásik značiek) dáva legal.css,
   tu je obal aplikácie: bočný panel na PC, záložky pod hlavičkou na mobile,
   karty, rebríček, inšpirácie a ich detail. Všetko je pod body.cr-body, iné stránky to neovplyvní.
   29. 9. 2026: aplikácia má hlavičku a pätičku úvodu (styles/app-chrome.css, scripts/lib-app-chrome.js); brána ostáva bez nich.
   16. 10. 2026 (majiteľ: „na Veelyn nechcem klipy, iba pre tvorcov, kde im dám iba kód, rebríček, zárobky a inšpirácie“;
   „kód daj v profile, kde budú aj zárobky; v inšpiráciách urob nejaký odsek, tým guides, proste svoj“): 3 záložky Profil ·
   Rebríček · Inšpirácie. Zlatá (--cr-gold) len na peniaze; kód, aktívna záložka, čipy, „Ty“ a Tvoje miesto sú fialové. */
.cr-body {
  --cr-bg: #0a0510;
  --cr-panel: #0e0717;
  --cr-surface: rgba(124,58,237,0.08);
  --cr-surface-2: rgba(124,58,237,0.15);
  --cr-line: rgba(167,139,250,0.22);
  --cr-line-soft: rgba(167,139,250,0.12);
  --cr-ink: #f4f1ee;
  --cr-ink-2: rgba(244,241,238,0.8);
  --cr-mute: #a39cae;
  --cr-violet: #a78bfa;
  --cr-violet-2: #7c3aed;
  --cr-bar: #8b5cf6;
  --cr-gold: #f4cc6c;
  --cr-green: #7be88a;
  --cr-red: #fca5a5;
  --cr-side-w: 248px;
  --cr-tab-h: 64px;
  --cr-safe-b: env(safe-area-inset-bottom, 0px);
  --cr-ease: cubic-bezier(.22,1,.36,1);
  /* vrstvy: lišty < toast */
  --cr-z-bar: 20; --cr-z-toast: 40;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
.cr-body [hidden] { display: none !important; }
.cr-body h1, .cr-body h2, .cr-body h3 { text-wrap: balance; }
:where(.cr-body > :not(.header, .mobile-menu, .footer)) p, :where(.cr-body > :not(.header, .mobile-menu, .footer)) li { font-size: 0.95rem; } /* nie v hlavičke a pätičke úvodu */
.cr-body a { text-underline-offset: 3px; }
.cr-body :where(.cr-body > :not(.header, .mobile-menu, .footer)) :focus-visible { outline: 2px solid var(--cr-violet); outline-offset: 2px; }

/* ---------- hlavička a pätička úvodu (29. 9. 2026) ----------
   Brána ostáva bez nich; aplikácia (aj kostra pri načítaní — html.cr-boot) ich má. Záložky portálu sú hneď pod prilepenou
   hlavičkou: top = --vn-hdr (výška hlavičky, styles/app-chrome.css + skript obálky v scripts/lib-app-chrome.js). */
html:not(.cr-boot) .cr-body:not(.is-app) > :is(.header, .mobile-menu, .footer) { display: none !important; }
.cr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cr-ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-ico--fill { fill: currentColor; stroke: none; }
.cr-num { font-variant-numeric: tabular-nums; }
.cr-nowrap { white-space: nowrap; }

/* ---------- brána: prihlásenie, čaká na schválenie, neaktívny účet, Klipy skončili ---------- */
.cr-gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px 48px; }
.cr-gate__card { width: 100%; max-width: 440px; box-sizing: border-box; background: var(--cr-surface); border: 1px solid var(--cr-line); border-radius: 20px; padding: 28px 24px 24px; text-align: center; }
.cr-gate__logo { display: inline-block; line-height: 0; margin-bottom: 14px; border-radius: 50%; transition: box-shadow .18s ease; }
.cr-gate__logo:hover { box-shadow: 0 0 0 3px rgba(167,139,250,0.35); }
.cr-gate__logo img { width: 64px; height: 64px; display: block; }
.cr-gate h1 { font-size: 1.75rem; margin: 0 0 6px; background: none; color: #fff; -webkit-text-fill-color: #fff; }
.cr-gate__lead { margin: 0 0 20px; color: var(--cr-ink-2); text-wrap: pretty; }
.cr-gate__lead a { color: var(--cr-violet); font-weight: 700; transition: color .18s ease; }
.cr-gate__lead a:hover { color: #fff; }
.cr-gate .wd-form { margin: 0 0 16px; text-align: left; background: rgba(10,5,16,0.45); }
.cr-gate .wd-btn { width: 100%; justify-self: stretch; text-decoration: none; transition: box-shadow .18s ease; }
.cr-gate .wd-btn:hover { box-shadow: 0 6px 18px -6px rgba(124,58,237,0.7); }
.cr-gate__icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: rgba(167,139,250,0.14); color: var(--cr-violet); }
.cr-gate__icon .cr-ico { width: 26px; height: 26px; }
.cr-gate__icon--off { background: rgba(252,165,165,0.12); color: var(--cr-red); }
.cr-gate__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.cr-gate__row--1 { flex-wrap: nowrap; }
.cr-gate__back { display: inline-block; margin-top: 18px; font-size: 0.85rem; color: var(--cr-mute); border-radius: 6px; transition: color .18s ease; }
.cr-gate__back:hover { color: #fff; }
@media (max-width: 359px) { .cr-gate__row--1 { flex-wrap: wrap; } .cr-gate__card { padding-left: 18px; padding-right: 18px; } }
/* načítanie brány (27. 9. 2026): namiesto „Načítavam…" dlaždice v tvare obsahu brány — ikona, nadpis, text, tlačidlo
   (rozmery ako „Prihláška čaká na schválenie"; bývalý kliper — html[data-cr-gate=klipy] — dlhší text a 2 tlačidlá) */
.cr-loading { display: grid; justify-items: center; }
.cr-loading .cr-sk--gi { width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; }
.cr-loading .cr-sk--gh { width: min(300px, 88%); height: calc(1.75rem * 1.15 * 2 - 8px); margin: 4px 0 10px; border-radius: 10px; } /* nadpis na 2 riadky */
.cr-loading .cr-sk--gl { width: 100%; height: calc(0.95rem * 1.5 * 3); margin-bottom: 20px; } /* text: 3 / 4 riadky podľa šírky */
.cr-loading .cr-sk--gb { width: 126px; height: 38.6px; border-radius: 10px; }
/* „Klipy na Veelyne skončili“ (16. 10. 2026, text s doplatkom a Môj účet): nadpis na 1 riadok od 424 px, text 4 / 5 / 6 / 7
   riadkov podľa šírky (namerané v Chromiu aj WebKite), 2 tlačidlá vedľa seba, pod 360 px pod sebou */
html[data-cr-gate="klipy"] .cr-loading .cr-sk--gl { height: calc(0.95rem * 1.5 * 4); }
html[data-cr-gate="klipy"] .cr-loading .cr-sk--gb { width: min(290px, 100%); }
@media (min-width: 424px) { html[data-cr-gate="klipy"] .cr-loading .cr-sk--gh { width: min(270px, 80%); height: calc(1.75rem * 1.15 - 8px); } }
@media (max-width: 444px) { html[data-cr-gate="klipy"] .cr-loading .cr-sk--gl { height: calc(0.95rem * 1.5 * 5); } }
@media (max-width: 391px) { html[data-cr-gate="klipy"] .cr-loading .cr-sk--gl { height: calc(0.95rem * 1.5 * 6); } }
@media (max-width: 321px) { html[data-cr-gate="klipy"] .cr-loading .cr-sk--gl { height: calc(0.95rem * 1.5 * 7); } }
@media (max-width: 358px) { html[data-cr-gate="klipy"] .cr-loading .cr-sk--gb { width: min(170px, 100%); height: calc(38.6px * 2 + 10px); } }
/* „Pozrieme sa na tvoj profil…“ (text z 16. 10. 2026) má 3 riadky od 334 px až po PC (karta max. 440 px), pod 334 px 4 —
   namerané 18. 10. 2026 v Chromiu aj WebKite; dlaždica čakajúcej prihlášky (uložený stav pending → html.cr-wait) sedí s bránou */
@media (max-width: 333px) { .cr-loading .cr-sk--gl { height: calc(0.95rem * 1.5 * 4); } }
html.cr-wait .cr-body #crLoading { display: grid !important; }
html.cr-wait .cr-body #crLogin { display: none !important; }
.wd-err.is-ok { color: var(--cr-green); }
/* hláška e-mailovej kontroly (email-check.js, 28. 9. 2026): vždy 1 riadok, písmo podľa šírky */
.cdl-msg { width: 100%; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: hidden; }
.cdl-msg.cdl-wrap { white-space: normal; }
.cdl-msg.cdl-gone { visibility: hidden; }

/* ---------- obal aplikácie ---------- */
.cr-app { display: grid; grid-template-columns: var(--cr-side-w) minmax(0, 1fr); align-items: start; }
/* bočný panel hneď pod hlavičkou úvodu, prilepený pri scrollovaní (pätička úvodu je pod celou aplikáciou) */
.cr-side { position: sticky; top: var(--vn-hdr); height: calc(100vh - var(--vn-hdr)); z-index: var(--cr-z-bar); display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 18px; box-sizing: border-box; background: var(--cr-panel); border-right: 1px solid var(--cr-line-soft); overflow-y: auto; }
.cr-nav { display: grid; gap: 4px; }
.cr-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 10px; color: var(--cr-ink-2); font-weight: 650; font-size: 0.95rem; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.cr-nav a > span:not([class]) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-nav a:hover { background: rgba(167,139,250,0.1); color: #fff; }
/* aktívna záložka = aria-current (route()); počas kostry (html.cr-boot) ešte nie je → zvýrazní ju html[data-cr-tab] hneď od
   prvého vykreslenia (detail inšpirácie = Inšpirácie), ako v schválenom návrhu kostier (16. 10. 2026). :where = rovnaká váha
   ako aria-current, hover sa správa rovnako */
.cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]) { background: rgba(124,58,237,0.26); color: #fff; }
.cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]) .cr-ico { color: var(--cr-violet); }
.cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]):hover { background: rgba(124,58,237,0.36); }
/* odznaky v rohu (nič neposúvajú): počet nových inšpirácií fialovo, „môžeš požiadať o výplatu“ zlatá bodka (peniaze) */
.cr-nav__badge { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); min-width: 22px; box-sizing: border-box; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; line-height: 1.5; text-align: center; color: #fff; background: var(--cr-violet-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-nav__dot { position: absolute; top: 50%; right: 14px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--cr-gold); box-shadow: 0 0 0 2px var(--cr-panel); }
.cr-side__foot { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Tvoj kód v paneli (5. 10. 2026): telo čipu otvorí okno Tvoj kód, ikona vpravo len kopíruje */
.cr-chip { display: flex; align-items: stretch; width: 100%; color: #fff; background: linear-gradient(135deg, rgba(167,139,250,0.10), rgba(124,58,237,0.18)); border: 1px solid rgba(167,139,250,0.45); border-radius: 12px; transition: border-color .18s ease, background-color .18s ease; }
.cr-chip:hover { border-color: var(--cr-violet); }
.cr-chip > button { font: inherit; color: inherit; background: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease; }
.cr-chip > button:focus-visible { outline-offset: -3px; }
.cr-chip__edit { flex: 1; min-width: 0; display: block; padding: 9px 4px 9px 12px; text-align: left; border-radius: 11px 0 0 11px; }
.cr-chip__edit:hover { background-color: rgba(167,139,250,0.10) !important; }
.cr-chip__copy { flex: none; display: grid; place-items: center; width: 44px; border-radius: 0 11px 11px 0; }
.cr-chip__copy:hover { background-color: rgba(167,139,250,0.18) !important; }
.cr-chip small { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--cr-violet); }
.cr-chip small .cr-ico { width: 12px; height: 12px; stroke-width: 2.2; transition: color .18s ease; }
.cr-chip__edit:hover small .cr-ico { color: #fff; }
.cr-chip strong { display: block; min-width: 0; font-size: 1.05rem; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* dlhý kód: celý je v Profile */
.cr-chip__copy .cr-ico { color: var(--cr-violet); }
.cr-chip__copy.is-done .cr-ico { color: var(--cr-green); }
.cr-side__link { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--cr-mute); background: none; border: 0; border-radius: 10px; padding: 8px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
.cr-side__link:hover { color: #fff; background: rgba(167,139,250,0.08); }
.cr-side__link .cr-ico { width: 18px; height: 18px; }

.cr-main { padding: 36px clamp(20px, 4vw, 48px) 56px; min-width: 0; }
.cr-view { max-width: 1080px; margin: 0 auto; }
.cr-view:focus { outline: none; }
.cr-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 22px; }
.cr-head h1 { min-width: 0; margin: 0; font-size: 2rem; line-height: 1.15; background: none; color: #fff; -webkit-text-fill-color: #fff; white-space: nowrap; overflow: hidden;
  /* písmo nadpisov sekcií úvodu (Manrope 800, užšie písmená) namiesto Fraunces kurzívy — 29. 9. 2026 */
  font-family: 'Manrope', 'Manrope Local', system-ui, sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.02em; }
.cr-head h1:focus, .cr-view h2:focus { outline: none; }
.cr-view h2, .cr-view h3 { font-family: 'Manrope', 'Manrope Local', system-ui, sans-serif; font-style: normal; background: none; -webkit-text-fill-color: currentColor; }

/* ---------- karty, štítky, zoznamy ---------- */
.cr-card { min-width: 0; box-sizing: border-box; background: var(--cr-surface); border: 1px solid var(--cr-line); border-radius: 16px; padding: 20px; }
.cr-card--violet { background: linear-gradient(135deg, rgba(167,139,250,0.07), rgba(124,58,237,0.15)); border-color: rgba(167,139,250,0.45); }
.cr-card--gold { background: linear-gradient(135deg, rgba(244,204,108,0.09), rgba(124,58,237,0.12)); border-color: rgba(244,204,108,0.34); }
.cr-card__t { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: 'Manrope', 'Manrope Local', system-ui, sans-serif; font-style: normal; font-size: 1.02rem; font-weight: 800; color: #fff; }
.cr-card__t .cr-ico { color: var(--cr-violet); }
.cr-card--gold .cr-card__t .cr-ico { color: var(--cr-gold); }
.cr-label { display: block; font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800; color: var(--cr-violet); margin-bottom: 6px; white-space: nowrap; }
.cr-lab { display: block; margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; color: var(--cr-mute); white-space: nowrap; }
.cr-sub { margin: 6px 0 0; font-size: 0.86rem; color: var(--cr-mute); }
.cr-fine { margin: 0; font-size: 0.8rem; line-height: 1.55; color: var(--cr-mute); }
.cr-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-checks li { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--cr-ink); font-size: 0.92rem; line-height: 1.45; }
.cr-checks li .cr-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cr-violet); stroke-width: 2.2; }
.cr-checks li strong, .cr-checks li b { color: #fff; }
.cr-dots { display: grid; gap: 8px; margin: 0; padding: 0 0 0 1.1rem; }
.cr-dots li { margin: 0; color: var(--cr-ink-2); font-size: 0.9rem; line-height: 1.5; }
.cr-dots li::marker { color: var(--cr-violet); }
.cr-lnk { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.88rem; font-weight: 800; color: var(--cr-violet); text-decoration: none; border-radius: 8px; white-space: nowrap; transition: color .18s ease; }
.cr-lnk:hover { color: #fff; }
.cr-lnk .cr-ico { width: 16px; height: 16px; }
.cr-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--cr-mute); }
.cr-empty .cr-ico { width: 30px; height: 30px; color: var(--cr-violet); }
.cr-empty p { margin: 0; color: var(--cr-ink-2); }
.cr-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: rgba(167,139,250,0.14); color: var(--cr-ink); white-space: nowrap; }
.cr-pill .cr-ico { flex: none; width: 15px; height: 15px; }
/* hláška v rezervovanom riadku: miesto je vždy, chyba ani úspech nič neposunú */
.cr-err { margin: 0; min-height: 1.45em; font-size: 0.86rem; font-weight: 600; line-height: 1.45; color: var(--cr-red); }
.cr-err.is-ok { color: var(--cr-green); }

/* tlačidlá */
.cr-btn, .cr-btn2, .cr-btn3 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none !important; white-space: nowrap; border-radius: 10px; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s var(--cr-ease), opacity .18s ease; }
.cr-btn { font-size: 0.95rem; color: #fff; background: linear-gradient(135deg, #7c3aed, #a78bfa); border: 0; padding: 11px 18px; }
.cr-btn:hover:not(:disabled) { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(124,58,237,0.7); }
.cr-btn2 { font-size: 0.88rem; color: #fff; background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.45); padding: 8px 14px; }
.cr-btn2:hover:not(:disabled) { color: #fff; background: rgba(124,58,237,0.45); border-color: var(--cr-violet); }
.cr-btn3 { font-size: 0.86rem; font-weight: 700; color: var(--cr-ink-2); background: none; border: 1px solid rgba(255,255,255,0.14); padding: 8px 12px; }
.cr-btn3:hover:not(:disabled) { color: #fff; border-color: var(--cr-violet); background: rgba(124,58,237,0.22); }
.cr-btn:disabled, .cr-btn2:disabled, .cr-btn3:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.cr-btn .cr-ico, .cr-btn2 .cr-ico, .cr-btn3 .cr-ico { width: 17px; height: 17px; }
.cr-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; color: var(--cr-ink-2); background: rgba(167,139,250,0.08); border: 1px solid var(--cr-line-soft); border-radius: 10px; cursor: pointer; text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.cr-iconbtn:hover { color: #fff; background: rgba(124,58,237,0.35); border-color: var(--cr-violet); }
.cr-iconbtn .cr-ico { width: 17px; height: 17px; }
.cr-iconbtn.is-done, .cr-btn2.is-done, .cr-btn3.is-done { color: var(--cr-green); border-color: rgba(123,232,138,0.5); }
.cr-btn.is-done { box-shadow: 0 0 0 2px rgba(123,232,138,0.45); }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cr-textbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.88rem; font-weight: 800; color: var(--cr-violet); background: none; border: 0; border-radius: 8px; padding: 8px 8px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: color .18s ease; }
.cr-textbtn:hover { color: #fff; }
.cr-textbtn .cr-ico { width: 16px; height: 16px; }
/* „Kopírovať …“ ↔ „Skopírované“: oba texty v jednej bunke mriežky → šírka tlačidla sa po kliku nezmení. Ikona je v bunke
   spolu s textom (18. 10. 2026): kratší „Kopírovať“ je s ikonou na strede, nie s medzerou za ikonou */
.cr-cpl { display: inline-grid; justify-items: center; }
.cr-cpl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.cr-cpl > span + span { visibility: hidden; }
.is-done .cr-cpl > span:first-child { visibility: hidden; }
.is-done .cr-cpl > span + span { visibility: visible; }
.cr-linkbox { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; background: rgba(10,5,16,0.55); border: 1px solid var(--cr-line); border-radius: 12px; }
.cr-linkbox > span { flex: 1; min-width: 0; display: flex; font-size: 0.9rem; color: var(--cr-ink-2); white-space: nowrap; }
.cr-linkbox > span > span:first-child { flex: none; }
.cr-linkbox > span > span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; font-weight: 800; }

/* ---------- PROFIL (#profil): mobil 1 stĺpec v poradí kód, story, pravidlá, zárobky, viditeľnosť, päta; PC od 1200 px
   vľavo peniaze, kód a Zárobky, vpravo story, pravidlá, viditeľnosť a päta (obaly __l / __r; na mobile display: contents) ---------- */
.cr-prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.cr-prof__l, .cr-prof__r { display: contents; }
.cr-o1 { order: 1; } .cr-o2 { order: 2; } .cr-o3 { order: 3; } .cr-o4 { order: 4; } .cr-o5 { order: 5; } .cr-o6 { order: 6; } .cr-o7 { order: 7; }
.cr-money { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 44px; padding: 0 10px 0 14px; border-radius: 12px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); color: var(--cr-mute); text-decoration: none !important; font-size: 0.9rem; font-weight: 700; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.cr-money:hover { background: rgba(124,58,237,0.2); border-color: var(--cr-violet); color: var(--cr-ink-2); }
.cr-money__t { display: block; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-money b { color: var(--cr-gold); font-weight: 800; }
.cr-money > .cr-ico { width: 18px; height: 18px; color: var(--cr-violet); }
/* kód: 1 riadok (fit1 zmenší písmo), pevná výška riadku → výška karty nezávisí od dĺžky kódu */
.cr-kod__code { display: block; height: 2.55rem; font-size: 2.2rem; line-height: 2.55rem; font-weight: 800; letter-spacing: 0.06em; color: #fff; white-space: nowrap; overflow: hidden; }
.cr-kod__btns { margin-top: 12px; }
.cr-kod__btns .cr-btn3 { align-self: stretch; padding: 0 14px; }
.cr-kod__deal { margin: 16px 0; }
.cr-share__sh { margin-top: 12px; }
html:not(.cr-nsh) .cr-share__sh { display: none; }   /* Zdieľať odkaz len kde ho prehliadač vie — miesto rezervuje už hlavička */
.cr-must { background: rgba(167,139,250,0.06); border-color: var(--cr-line); }
.cr-mfoot { display: grid; gap: 10px; justify-items: start; min-width: 0; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--cr-line-soft); }
.cr-mfoot p { margin: 0; max-width: 100%; font-size: 0.82rem; color: var(--cr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-mfoot .cr-actions { flex-wrap: nowrap; }
/* ciele #profil/zarobky a #profil/viditelnost: nad nimi ostane miesto pre prilepenú hlavičku (a záložky na mobile) */
#zarobky, #viditelnost { scroll-margin-top: calc(var(--vn-hdr, 0px) + 20px); }
/* story s kódom (creators-story.js — vzhľad bez zmeny): náhľad 9 : 16, pozadie, vône, Zdieľať do story a Stiahnuť */
.cr-storyc .cr-story__t { display: none; }   /* nadpis karty je „Zdieľaj kód v príbehu“ */
.cr-story__wrap { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 18px; align-items: start; }
.cr-story__prev { aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #120a1e; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.cr-story__prev img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.cr-story__prev img:not([src]) { opacity: 0; }
.cr-story__prev img.is-busy { opacity: 0.55; }
.cr-story__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cr-story__sc button { font-size: 0.8rem; padding: 5px 11px; }
.cr-storyc .cr-actions { flex-wrap: nowrap; }
@media (max-width: 560px) {
  .cr-story__wrap { grid-template-columns: minmax(0, 1fr); }
  .cr-story__prev { width: min(100%, 280px); margin: 0 auto; }
  .cr-storyc .cr-actions { justify-content: center; }
}
@media (max-width: 359px) { .cr-storyc .cr-actions { flex-wrap: wrap; } }

/* ---------- ZÁROBKY (oddiel Profilu) ---------- */
.cr-zar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.cr-h2 { margin: 10px 0 0; font-size: 1.35rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.cr-bal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: end; }
.cr-bal__main { min-width: 0; }
.cr-bal__big { display: block; font-size: 2.4rem; line-height: 1.1; font-weight: 800; color: var(--cr-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-meter { height: 8px; margin-top: 14px; border-radius: 999px; background: rgba(167,139,250,0.14); overflow: hidden; }
.cr-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cr-violet-2), var(--cr-violet)); transition: width .6s var(--cr-ease); }
.cr-card--gold .cr-meter i { background: linear-gradient(90deg, #d4a247, var(--cr-gold)); }
.cr-meterl { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 0.8rem; font-weight: 700; color: var(--cr-mute); white-space: nowrap; }
.cr-payhint { margin: 8px 0 0; min-height: 1.5em; font-size: 0.86rem; line-height: 1.5; color: var(--cr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-payhint.is-wrap { white-space: normal; text-wrap: pretty; }
.cr-payhint__go { padding: 0; font-size: inherit; }
.cr-bal__btn { align-self: end; }
.cr-mrows { display: grid; margin: 16px 0 0; padding: 4px 0 0; border-top: 1px solid var(--cr-line-soft); }
.cr-mrows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; }
.cr-mrows dt { min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--cr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-mrows dd { margin: 0; font-weight: 800; color: var(--cr-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cr-n { min-width: 0; padding: 11px 12px; border-radius: 14px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); transition: border-color .18s ease, background-color .18s ease; }
.cr-n:hover { border-color: var(--cr-line); background: var(--cr-surface-2); }
.cr-n small { display: block; font-size: 0.74rem; font-weight: 700; color: var(--cr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-n strong { display: block; margin-top: 2px; font-size: 1.2rem; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
@media (max-width: 359px) { .cr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-n:last-child { grid-column: 1 / -1; } }
.cr-src { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(167,139,250,0.5); color: var(--cr-violet); font-size: 0.74rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.cr-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9rem; }
.cr-table th { padding: 0 10px 10px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--cr-violet); border-bottom: 1px solid var(--cr-line-soft); text-align: left; white-space: nowrap; }
.cr-table td { padding: 11px 10px; border-bottom: 1px solid var(--cr-line-soft); color: var(--cr-ink-2); vertical-align: middle; }
.cr-table tr:last-child td { border-bottom: 0; }
.cr-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-table td.c-date { white-space: nowrap; }
.cr-table td.c-amt b { color: var(--cr-gold); }
.cr-table td.c-amt small { display: none; }
.cr-table tr.is-off td { color: var(--cr-mute); }
.cr-table tr.is-off td.c-amt b { color: var(--cr-mute); text-decoration: line-through; }
.cr-table tbody tr { transition: background-color .18s ease; }
.cr-table tbody tr:hover { background: rgba(167,139,250,0.05); }
.cr-ordempty p { margin: 0 0 12px; color: var(--cr-ink-2); }
.cr-zar2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cr-payform { display: grid; gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
.cr-payform .cr-row { display: grid; gap: 12px; }
.cr-payform .wd-field input { transition: border-color .18s ease, box-shadow .18s ease; }
.cr-payform .wd-field input:hover { border-color: rgba(167,139,250,0.6); }
.cr-payform .cr-err { margin: -4px 0 -2px; }
.cr-payhist { margin: 0; padding: 0; list-style: none; }
.cr-payhist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--cr-line-soft); font-size: 0.9rem; white-space: nowrap; }
.cr-payhist li:first-child { border-top: 0; padding-top: 0; }
.cr-payhist li.cr-sub { white-space: normal; }
.cr-payhist b { color: #fff; font-variant-numeric: tabular-nums; }
.cr-payhist .cr-st { margin-left: auto; }
.cr-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; white-space: nowrap; background: rgba(167,139,250,0.14); color: var(--cr-ink-2); }
.cr-st--ok { background: rgba(123,232,138,0.13); color: var(--cr-green); }
.cr-st--wait { background: rgba(167,139,250,0.16); color: var(--cr-violet); }
.cr-st--off { background: rgba(255,255,255,0.06); color: var(--cr-mute); }

/* ---------- viditeľnosť v rebríčku: prepínače (výška sa pri prepnutí nemení) ---------- */
.cr-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cr-line-soft); }
.cr-lbset .cr-setting:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.cr-setting label { flex: 1; min-width: 0; cursor: pointer; }
.cr-setting b { display: block; color: #fff; font-size: 0.95rem; }
.cr-setting small { display: block; margin-top: 2px; font-size: 0.84rem; line-height: 1.45; color: var(--cr-mute); }
.cr-setting small b { display: inline; font-size: inherit; color: #fff; }
#crLbState { min-height: 1.45em; }
#crPubState { min-height: 2.9em; }
.cr-lbset .cr-err { margin-top: 10px; }
.cr-switch { position: relative; flex: 0 0 auto; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: rgba(167,139,250,0.22); cursor: pointer; transition: background-color .2s ease; }
.cr-switch:hover { background: rgba(167,139,250,0.34); }
.cr-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.45); transition: transform .22s var(--cr-ease); }
.cr-switch[aria-checked="true"] { background: var(--cr-violet-2); }
.cr-switch[aria-checked="true"]:hover { background: #8b5cf6; }
.cr-switch[aria-checked="true"] i { transform: translateX(20px); }
.cr-switch:disabled { opacity: 0.6; cursor: progress; }

/* ---------- účet tvorcu: iniciála + štítok „✓ Tvorca Veelyn" (bočný panel) ---------- */
.cr-me { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 6px; border-radius: 12px; color: #fff; text-decoration: none; transition: background-color .18s ease; }
.cr-me:hover { color: #fff; background: rgba(167,139,250,0.08); }
.cr-ava { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; font-size: 1rem; font-weight: 800; line-height: 1; color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 0 0 2px var(--cr-panel), 0 0 0 3.5px rgba(167,139,250,0.7); }
.cr-me__txt { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.cr-me__txt b { max-width: 100%; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.cr-tag .cr-ico { width: 12px; height: 12px; stroke-width: 3; }

/* ---------- REBRÍČEK ---------- */
.cr-head--lb { flex-wrap: nowrap; }
.cr-head--lb .cr-chips { flex-wrap: nowrap; flex: none; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chips button { font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--cr-ink-2); background: rgba(167,139,250,0.08); border: 1px solid var(--cr-line-soft); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.cr-chips button:hover { color: #fff; border-color: var(--cr-violet); }
.cr-chips button[aria-pressed="true"] { color: #fff; background: var(--cr-violet-2); border-color: var(--cr-violet-2); }
.cr-chips button[aria-pressed="true"]:hover { background: #8b5cf6; border-color: var(--cr-violet); }
.cr-chips small { margin-left: 4px; font-weight: 800; opacity: 0.7; }
.cr-lbwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cr-lbcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.cr-lbme { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.cr-lbme__rank { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.3rem; font-weight: 800; color: #fff; background: var(--cr-violet-2); font-variant-numeric: tabular-nums; }
.cr-lbme__rank.is-medal { font-size: 1.9rem; background: rgba(167,139,250,0.16); }
.cr-lbme--none .cr-lbme__rank { color: var(--cr-mute); background: rgba(167,139,250,0.14); }
.cr-lbme__t { margin: 0; font-size: 1.25rem; font-weight: 800; color: #fff; white-space: nowrap; }
.cr-lbme__t small { font-size: 0.9rem; font-weight: 700; color: var(--cr-mute); }
.cr-lbme .cr-sub { margin-top: 2px; color: var(--cr-ink-2); }
.cr-lbme__p { margin: 0 0 12px; color: var(--cr-ink-2); }
.cr-lbme__rw b { color: var(--cr-gold); }   /* peňažná odmena za miesto */
.cr-visrow { display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 44px; padding: 0 10px 0 14px; border-radius: 12px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); color: var(--cr-mute); font-size: 0.88rem; font-weight: 700; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.cr-visrow:hover { background: rgba(124,58,237,0.2); border-color: var(--cr-violet); color: var(--cr-ink-2); }
.cr-visrow > .cr-ico { flex: none; width: 18px; height: 18px; color: var(--cr-violet); }
.cr-visrow__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-visrow__t b { color: #fff; }
.cr-pill--season { justify-self: start; max-width: 100%; box-sizing: border-box; background: rgba(167,139,250,0.14); color: var(--cr-ink); overflow: hidden; }
.cr-pill--season > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-lb { margin: 0; padding: 0; list-style: none; }
.cr-lbrow { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 48px; box-sizing: border-box; margin: 0; padding: 6px 10px 6px 4px; border: 1px solid transparent; border-top-color: var(--cr-line-soft); border-radius: 0; transition: background-color .18s ease; }
.cr-lb > .cr-lbrow:first-child { border-top-color: transparent; }
.cr-lbrow.is-me { border-color: rgba(167,139,250,0.55); border-radius: 12px; background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(124,58,237,0.22)); }
.cr-lbrow.is-me + .cr-lbrow { border-top-color: transparent; }
.cr-lbrow:not(.is-me):not(.cr-lbrow--sk):hover { background: rgba(167,139,250,0.06); border-radius: 12px; }
.cr-rank { text-align: center; font-size: 1rem; font-weight: 800; color: var(--cr-ink-2); font-variant-numeric: tabular-nums; }
.cr-rank--medal { font-size: 1.55rem; line-height: 1; }
.cr-lbrow .cr-ava { width: 36px; height: 36px; font-size: 0.92rem; box-shadow: none; }
.cr-lbrow .cr-ava--anon { color: var(--cr-mute); background: rgba(167,139,250,0.14); }
.cr-lbname { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.cr-lbname b { min-width: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-lbname em { font-style: normal; color: var(--cr-mute); }
.cr-lbplat { flex: none; width: 16px; height: 16px; color: var(--cr-mute); }
.cr-you { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--cr-violet-2); white-space: nowrap; }
.cr-rw { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; line-height: 1.5; white-space: nowrap; color: var(--cr-gold); background: rgba(244,204,108,0.12); }   /* peňažná odmena */
.cr-lbnum { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.cr-lbnum b { font-size: 1.05rem; color: #fff; }
.cr-lbnum small { font-size: 0.78rem; color: var(--cr-mute); }
.cr-lbgap { margin: 0; padding: 2px 0 4px; text-align: center; letter-spacing: 0.3em; color: var(--cr-mute); }
.cr-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cr-tierb { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; color: #1a1208; }
.cr-tierb--1 { background: linear-gradient(135deg, #ecc39a, #b9793f); }
.cr-tierb--2 { background: linear-gradient(135deg, #f1f3f7, #aab2c0); }
.cr-tierb--3 { background: linear-gradient(135deg, #f4cc6c, #d4a247); }
.cr-tierb--4 { color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.cr-tierp { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; }
.cr-tierp .cr-meter { flex: 1 1 auto; min-width: 48px; margin: 0; }
.cr-tierp small { flex: 0 0 auto; font-size: 0.8rem; font-weight: 700; color: var(--cr-ink-2); white-space: nowrap; }
.cr-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-badge { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px; padding: 10px 30px 10px 12px; border-radius: 12px; background: rgba(167,139,250,0.07); border: 1px solid var(--cr-line-soft); box-sizing: border-box; transition: border-color .18s ease, background-color .18s ease; }
.cr-badge:hover { border-color: var(--cr-line); background: rgba(167,139,250,0.11); }
.cr-badge__i { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.15rem; line-height: 1; background: rgba(167,139,250,0.12); filter: grayscale(1); opacity: 0.5; }
.cr-badge.is-got .cr-badge__i { filter: none; opacity: 1; background: rgba(167,139,250,0.22); }
.cr-badge--sk .cr-badge__i { filter: none; opacity: 1; }
.cr-badge__t { min-width: 0; display: flex; flex-direction: column; font-size: 0.88rem; font-weight: 700; line-height: 1.3; color: var(--cr-mute); white-space: nowrap; }
.cr-badge__t > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-badge.is-got .cr-badge__t { color: #fff; }
.cr-badge__t small { font-size: 0.76rem; font-weight: 700; color: var(--cr-mute); }
.cr-badge__ok { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; color: var(--cr-green); stroke-width: 2.4; }
.cr-win { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cr-win > li { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--cr-line-soft); }
.cr-win > li:first-child { padding-top: 0; border-top: 0; }
.cr-win__m { font-size: 0.7rem; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800; color: var(--cr-violet); }
.cr-win ol { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.cr-win ol li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-size: 0.92rem; }
.cr-win ol b { min-width: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-win ol em { font-style: normal; color: var(--cr-mute); white-space: nowrap; }
.cr-win ol li.is-me b { color: var(--cr-violet); }
.cr-win__r { font-size: 1.1rem; line-height: 1; }
/* rebríček sa načítava: dlaždice s rozmermi obsahu */
.cr-sk { display: block; border-radius: 8px; animation: rvShimmer 1.6s linear infinite;
  background: var(--rv-tile, #17131e) linear-gradient(100deg, transparent 25%, var(--rv-hi, rgba(255,255,255,0.055)) 50%, transparent 75%) no-repeat 120% 0 / 250% 100%; }
.cr-lbrow .cr-ava--sk, .cr-lbme__rank.cr-sk { box-shadow: none; }
.cr-lbrow--sk .cr-sk--r { width: 22px; height: 18px; margin: 0 auto; }
.cr-lbrow--sk .cr-sk--t { width: min(160px, 80%); height: 16px; }
.cr-lbrow--sk .cr-sk--n { width: 44px; height: 16px; }
.cr-lbme .cr-sk--l { width: 120px; height: 11px; margin: 3px 0 9px; }
.cr-lbme .cr-sk--h { width: 150px; height: 24px; }
.cr-lbme .cr-sk--s { width: min(220px, 90%); height: 14px; margin-top: 9px; }
.cr-lbme .cr-sk--bar { width: min(260px, 100%); height: 22px; margin-top: 12px; }
.cr-badge--sk .cr-sk--t { width: 70%; height: 14px; }

/* ---------- INŠPIRÁCIE: knižnica (Scripty · Videá od tvorcov · Návody) ---------- */
.cr-ilead { display: block; margin: -12px 0 0; font-size: 0.95rem; color: var(--cr-mute); white-space: nowrap; overflow: hidden; }
/* prepínač oddielov: 4 rovnaké stĺpce, počet od 400 px; oddiel bez obsahu je neaktívny, tvar ostáva */
.cr-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 4px; border-radius: 14px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); }
.cr-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 38px; padding: 0 6px; font: inherit; font-size: 0.86rem; font-weight: 800; color: var(--cr-ink-2); background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.cr-seg button:hover:not(:disabled) { color: #fff; background: rgba(167,139,250,0.12); border-color: var(--cr-line); }
.cr-seg button[aria-pressed="true"] { color: #fff; background: var(--cr-violet-2); border-color: var(--cr-violet-2); }
.cr-seg button[aria-pressed="true"]:hover { background: #8b5cf6; }
.cr-seg button:disabled { opacity: 0.4; cursor: default; }
.cr-seg small { font-size: 0.78rem; font-weight: 800; opacity: 0.72; font-variant-numeric: tabular-nums; }
@media (max-width: 399px) { .cr-seg small { display: none; } }
.cr-inlib { margin-top: 18px; }
.cr-isec + .cr-isec { margin-top: 28px; }
.cr-isec__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 1.12rem; line-height: 1.3; font-weight: 800; color: #fff; }
.cr-isec__h small { font-size: 0.86rem; font-weight: 800; color: var(--cr-mute); }
/* jeden oddiel: len ten oddiel, bez nadpisu (názov je v prepínači) */
html[data-cr-inf="scripty"] #crInLib .cr-isec:not(.cr-isec--s), html[data-cr-inf="videa"] #crInLib .cr-isec:not(.cr-isec--v), html[data-cr-inf="navody"] #crInLib .cr-isec:not(.cr-isec--g) { display: none; }
html[data-cr-inf="scripty"] #crInLib .cr-isec__h, html[data-cr-inf="videa"] #crInLib .cr-isec__h, html[data-cr-inf="navody"] #crInLib .cr-isec__h { display: none; }
.cr-inempty { display: none; }
.cr-inempty--on { display: block; }
.cr-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; margin: 0; padding: 0; list-style: none; }
.cr-lib > li { margin: 0; min-width: 0; }
/* tablet (16. 10. 2026): 2 stĺpce by tu dali dlaždicu ~360 × 640 px (sotva jeden rad na obrazovke) → auto-fill ako na PC,
   3–5 stĺpcov po ~165–190 px; telefón (viewport 440) ostáva na 2 stĺpcoch */
@media (min-width: 560px) and (max-width: 899px) { .cr-lib { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (min-width: 900px) { .cr-lib { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 48px) / 5)), 1fr)); gap: 18px 12px; } }
.cr-itile { display: grid; gap: 7px; width: 100%; padding: 0; color: var(--cr-ink); text-align: left; text-decoration: none !important; border-radius: 12px; transition: color .18s ease; }
.cr-itile:hover { color: var(--cr-violet); }
.cr-itile__v { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #120a1e; border: 1px solid var(--cr-line-soft); container-type: inline-size; transition: border-color .18s ease, box-shadow .18s ease; }
.cr-itile:hover .cr-itile__v { border-color: var(--cr-violet); box-shadow: 0 0 0 1px var(--cr-violet), 0 12px 26px -14px rgba(124,58,237,0.9); }
.cr-itile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-itile__tx { display: grid; gap: 1px; min-width: 0; }
.cr-itile__t { display: block; min-width: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.35; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s ease; }
.cr-itile:hover .cr-itile__t { color: var(--cr-violet); }
.cr-itile__s { display: block; min-width: 0; font-size: 0.8rem; line-height: 1.35; color: var(--cr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-itile.is-hidden .cr-itile__v > :is(.cr-pos, .cr-ext, img) { opacity: 0.45; }
/* plagáty mimo prvého radu sa dofarbia plynulo po načítaní (html.cr-fadeimg nastaví skript; bez neho hneď) */
html.cr-fadeimg #crInLib .cr-itile__v img { opacity: 0; transition: opacity .3s ease; }
html.cr-fadeimg #crInLib .cr-itile__v img.is-ld { opacity: 1; }
html.cr-fadeimg #crInLib .cr-itile.is-hidden .cr-itile__v > img.is-ld { opacity: 0.45; }
.cr-ibadge { position: absolute; z-index: 2; top: 8px; left: 8px; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cr-ibadge--s { color: #fff; background: var(--cr-violet-2); }
.cr-ibadge--v { color: #fff; background: rgba(10,5,16,0.5); border: 1px solid rgba(255,255,255,0.85); }
.cr-ibadge--g { color: var(--cr-violet); background: none; border: 1px solid rgba(167,139,250,0.7); }
.cr-ibadge--st { position: static; flex: none; }
.cr-inew { position: absolute; z-index: 2; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; box-sizing: border-box; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: rgba(10,5,16,0.62); white-space: nowrap; }
.cr-inew::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cr-violet); box-shadow: 0 0 0 2px rgba(167,139,250,0.3); }
/* ukážka pre admina: skrytá položka s pásikom (len ?nahlad=1) */
.cr-ihid { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 5px 8px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: #fff; background: repeating-linear-gradient(135deg, #5b21b6 0 10px, #4c1d95 10px 20px); white-space: nowrap; }
/* zložený plagát: pozadie story, naše fľaše a text ako vo videu */
.cr-pos { position: absolute; inset: 0; display: block; overflow: hidden; }
.cr-pos__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-pos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,3,12,0.45), transparent 30%, transparent 70%, rgba(6,3,12,0.55)); pointer-events: none; }
.cr-pos__b { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; }
.cr-pos__b img { display: block; height: 100%; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); }
.cr-pos__b--1 { height: 46%; }
.cr-pos__b--3 { height: 40%; }
.cr-pos__b--3 img { height: 80%; margin: 0 -7%; }
.cr-pos__b--3 img:nth-child(2) { position: relative; z-index: 1; height: 100%; }
.cr-pos--podium .cr-pos__b { bottom: 28%; }
.cr-pos--cherry .cr-pos__b { bottom: 21%; }
.cr-pos--city .cr-pos__b { bottom: 17%; }
.cr-pos__cap { position: absolute; z-index: 1; left: 8%; right: 8%; top: 17%; display: block; text-align: center; text-wrap: balance; font-size: 7.4cqw; font-weight: 800; line-height: 1.5; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.cr-pos__cap span { padding: 0.12em 0.4em; border-radius: 0.3em; background: rgba(10,5,16,0.72); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* video zo siete: cudzí plagát sa nesťahuje — neutrálny rámik, ikona siete a @autor */
.cr-ext { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; text-align: center; color: #fff; background: radial-gradient(120% 70% at 50% 35%, rgba(124,58,237,0.16), transparent 70%), #0d0a12; }
.cr-ext .cr-ico { width: 18cqw; height: 18cqw; min-width: 34px; min-height: 34px; }
.cr-ext b { max-width: 100%; font-size: 0.82rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-ext small { font-size: 0.74rem; font-weight: 700; color: var(--cr-mute); white-space: nowrap; }
.cr-ext--none { color: var(--cr-violet); }
/* návody: karty (mobil 1 stĺpec, od 900 px 2), kruh s ikonou, popis najviac 2 riadky, „Nové“ bodka */
.cr-glist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-glist > li { margin: 0; min-width: 0; }
@media (min-width: 900px) { .cr-glist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-gcard { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; box-sizing: border-box; height: 100%; padding: 14px; border-radius: 14px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); color: var(--cr-ink); text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, color .18s ease; }
.cr-gcard:hover { border-color: var(--cr-violet); background: var(--cr-surface-2); color: #fff; }
.cr-gcard__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(124,58,237,0.32); color: #fff; }
.cr-gcard__i .cr-ico { width: 20px; height: 20px; }
.cr-gcard__tx { display: grid; gap: 2px; min-width: 0; }
.cr-gcard__tx b { display: block; min-width: 0; font-size: 0.95rem; font-weight: 800; line-height: 1.35; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-gcard__s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; font-size: 0.84rem; line-height: 1.4; color: var(--cr-mute); }
.cr-gcard__tx small { font-size: 0.76rem; font-weight: 700; color: var(--cr-violet); white-space: nowrap; }
.cr-gcard__go { width: 18px; height: 18px; color: var(--cr-mute); transform: rotate(-90deg); transition: color .18s ease; }
.cr-gcard:hover .cr-gcard__go { color: var(--cr-violet); }
.cr-gnew { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--cr-violet); box-shadow: 0 0 0 3px rgba(167,139,250,0.25); }
.cr-gcard.is-hidden { opacity: 0.6; }

/* ---------- DETAIL inšpirácie (#inspiracie/<id>) ---------- */
.cr-back2 { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 6px 8px 6px 0; font-size: 0.9rem; font-weight: 800; color: var(--cr-violet); text-decoration: none !important; border-radius: 8px; white-space: nowrap; transition: color .18s ease; }
.cr-back2:hover { color: #fff; }
.cr-back2 .cr-ico { width: 18px; height: 18px; }
.cr-det { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cr-det > *, .cr-det__main > * { min-width: 0; }
.cr-det__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
/* mobil: médium medzi blokmi (script: po predlohe, video: hneď pod nadpisom) — obal textu je display: contents */
.cr-det--v .cr-det__main { display: contents; }
.cr-det--v .cr-det__main > * { order: 5; }
.cr-det--v .cr-det__hd { order: 1; }
.cr-det--s .cr-det__btns { order: 2; }
.cr-det--s .cr-pred { order: 3; }
.cr-det--s > .cr-det__vcol { order: 4; }
.cr-det--vid > .cr-det__vcol { order: 2; }
.cr-det--vid .cr-det__btns { order: 3; }
.cr-det--g { max-width: 720px; }
.cr-det__meta { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 0.86rem; font-weight: 700; color: var(--cr-mute); white-space: nowrap; }
.cr-det__meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-det__meta .cr-ico { width: 16px; height: 16px; flex: none; color: #fff; }
.cr-det__meta a { color: var(--cr-ink-2); text-decoration: none; transition: color .18s ease; }
.cr-det__meta a:hover { color: #fff; }
.cr-det__h { margin: 6px 0 0; font-size: 1.45rem; line-height: 1.25; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; letter-spacing: -0.01em; }
.cr-view .cr-det__h { text-wrap: nowrap; }   /* text-wrap: balance z .cr-body h2 by inak zrušil nowrap */
.cr-view .cr-det__h.is-wrap { white-space: normal; text-wrap: balance; }
.cr-gsub { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--cr-mute); }
.cr-det__btns { margin: 0; }
.cr-det__copy { flex: 1 1 100%; }
.cr-pred { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(167,139,250,0.06); border: 1px solid var(--cr-line-soft); }
.cr-pred a { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 0.9rem; font-weight: 800; color: var(--cr-violet); text-decoration: none; border-radius: 6px; transition: color .18s ease; }
.cr-pred a:hover { color: #fff; }
.cr-pred a .cr-ico { width: 15px; height: 15px; }
.cr-pred p { margin: 0; font-size: 0.86rem; color: var(--cr-ink-2); }
.cr-det__vcol { display: grid; justify-items: center; gap: 12px; min-width: 0; }
/* Otvoriť na TikToku / Instagrame / YouTube pod prehrávačom Scriptu a Návodu (16. 10. 2026): šírka prehrávača, na stred */
.cr-det__open { width: min(100%, 300px); }
.cr-det--g .cr-det__open { width: min(100%, 320px); }
.cr-player { position: relative; width: min(100%, 320px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 16px; border: 1px solid var(--cr-line); background: #07030c; container-type: inline-size; }
.cr-det--s .cr-player { width: min(100%, 300px); }
.cr-player video, .cr-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cr-player video { object-fit: contain; }
.cr-player__go { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; padding: 0; color: #fff; background: rgba(10,5,16,0); border: 0; cursor: pointer; font: inherit; transition: background-color .18s ease; }
.cr-player__go:hover { background: rgba(10,5,16,0.18); }
.cr-player__go > i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(124,58,237,0.85); box-shadow: 0 10px 30px -8px rgba(0,0,0,0.8); transition: transform .18s var(--cr-ease), background-color .18s ease; }
.cr-player__go:hover > i { transform: scale(1.06); background: var(--cr-violet-2); }
.cr-player__go .cr-ico { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; stroke: none; }
.cr-player__go--ext { place-content: end center; padding-bottom: 26px; }
.cr-player__go--ext > i { width: 56px; height: 56px; }
.cr-player__note { display: block; font-size: 0.8rem; font-weight: 700; color: var(--cr-ink-2); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
/* pod „Prehrá sa z …“ sivý riadok „TikTok môže použiť cookies“ (16. 10. 2026: upozornenie ešte pred ťuknutím) */
.cr-player__ck { display: block; margin-top: -6px; font-size: 0.72rem; font-weight: 600; color: var(--cr-mute); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
.cr-player .cr-ext { padding-bottom: 112px; }
.cr-player .cr-ext .cr-ico { width: 52px; height: 52px; }
.cr-player .cr-ext b { font-size: 0.95rem; }
.cr-player .cr-ext--none { padding-bottom: 12px; }
.cr-sect { margin: 6px 0 0; font-size: 1.05rem; font-weight: 800; color: #fff; }
.cr-parts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-part { margin: 0; padding: 14px; border-radius: 14px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); }
.cr-insp__pn { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 6px; color: #fff; font-size: 0.95rem; white-space: nowrap; }
.cr-insp__pn b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr-insp__num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cr-bar); color: #fff; font-size: 0.78rem; font-weight: 800; }
.cr-insp__opt { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(167,139,250,0.55); color: var(--cr-violet); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.cr-insp__t { flex: none; margin-left: auto; color: var(--cr-mute); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.cr-insp__row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; margin: 6px 0 0; color: var(--cr-ink); font-size: 0.9rem; line-height: 1.5; }
.cr-insp__row em { padding-top: 3px; font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-violet); white-space: nowrap; }
.cr-insp__row b { color: #fff; }
.cr-insp__rules { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cr-line); background: rgba(167,139,250,0.06); }
.cr-insp__rules .cr-label { color: var(--cr-violet); }
.cr-insp__rl { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--cr-ink); font-size: 0.86rem; line-height: 1.45; }
.cr-caption { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: rgba(10,5,16,0.55); border: 1px solid var(--cr-line-soft); font-size: 0.9rem; line-height: 1.5; color: var(--cr-ink); white-space: pre-line; overflow-wrap: anywhere; }
.cr-caption b { color: #fff; }
.cr-remind { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.8rem; font-weight: 700; color: var(--cr-mute); }
.cr-remind .cr-ico { flex: none; width: 15px; height: 15px; color: var(--cr-violet); }
.cr-remind > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.cr-remind > span.is-wrap { white-space: normal; }
/* bez popisu k videu: pripomienka samostatne (medzeru dáva mriežka detailu) */
.cr-remind--solo { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cr-line-soft); background: var(--cr-surface); }
/* bloky návodu: odsek, podnadpis, zoznam, kroky, Takto áno / Takto nie, tip, text na skopírovanie */
.cr-gp { margin: 0; color: var(--cr-ink); font-size: 0.95rem; line-height: 1.6; }
.cr-gh { margin: 8px 0 0; font-size: 1.08rem; font-weight: 800; color: #fff; }
.cr-gsteps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-gsteps li { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--cr-ink); font-size: 0.92rem; line-height: 1.5; }
.cr-gsteps b { color: #fff; }
.cr-gsteps__n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: var(--cr-violet-2); color: #fff; font-size: 0.78rem; font-weight: 800; }
.cr-gbox { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cr-line); background: rgba(167,139,250,0.06); }
.cr-gbox__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.92rem; font-weight: 800; color: #fff; }
.cr-gbox__t .cr-ico { width: 18px; height: 18px; color: var(--cr-violet); stroke-width: 2.2; }
.cr-gbox--ok { border-color: rgba(167,139,250,0.55); }
.cr-gbox--no { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.03); }
.cr-gbox--no .cr-gbox__t .cr-ico { color: var(--cr-mute); }
.cr-xs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-xs li { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--cr-ink-2); font-size: 0.92rem; line-height: 1.45; }
.cr-xs li .cr-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cr-mute); stroke-width: 2.2; }
.cr-gbox--tip { display: flex; align-items: flex-start; gap: 10px; border-color: rgba(167,139,250,0.55); border-left-width: 3px; }
.cr-gbox--tip > .cr-ico { flex: none; width: 20px; height: 20px; color: var(--cr-violet); }
.cr-gbox--tip p { margin: 0; color: var(--cr-ink); font-size: 0.92rem; line-height: 1.5; }
.cr-gcopy { padding: 12px 14px; border-radius: 14px; background: var(--cr-surface); border: 1px solid var(--cr-line-soft); }
.cr-gcopy__v { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(10,5,16,0.55); border: 1px solid var(--cr-line-soft); color: #fff; font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.cr-gcopy__a { justify-content: flex-end; margin-top: 10px; }
.cr-det__end { margin-top: 6px; }
@media (min-width: 900px) {
  .cr-det--v { grid-template-columns: 320px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .cr-det--s { grid-template-columns: 280px minmax(0, 1fr); }
  .cr-det--v .cr-det__main { display: grid; grid-column: 2; grid-row: 1; }
  .cr-det--v .cr-det__main > * { order: 0; }
  .cr-det--v > .cr-det__vcol { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--vn-hdr, 0px) + 24px); align-self: start; }
  .cr-det--v .cr-player, .cr-det--v .cr-det__open { width: 100%; }
  .cr-det:not(.cr-det--v) { max-width: 720px; }
  .cr-det__copy { flex: 0 0 auto; }
}

/* ---------- toast ---------- */
.cr-toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--cr-z-toast); display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 16px; font-size: 0.9rem; font-weight: 700; color: #fff; background: #1d1330; border: 1px solid var(--cr-line); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.8); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s var(--cr-ease); }
.cr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cr-toast .cr-ico { width: 18px; height: 18px; flex: none; color: var(--cr-green); }
.cr-toast > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-toast.is-err .cr-ico { color: var(--cr-red); }
.cr-body.is-app .cr-toast { margin-left: calc(var(--cr-side-w) / 2); }
/* hláška pri otvorenom okne je v okne → v strede obrazovky, nie posunutá o bočný panel */
.cr-body.is-app .cr-dlg > .cr-toast, .cr-dlg > .cr-toast { margin-left: 0; }

/* ---------- okno Tvoj kód (majiteľ 5. 10. 2026: „klikneš a vyrobíš si ten kód“) ----------
   tmavá karta ako portál, fialový okraj; stav overenia farbou a tučným (zelená voľný, červená obsadený, sivá počas overenia);
   zatvára ho iba krížik, obsah scrolluje vnútri; na telefóne vyššie, aby ho klávesnica neprekryla */
.cr-dlg { position: fixed; inset: 0; z-index: 50; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  color: var(--cr-ink); background: var(--cr-panel); border: 1px solid rgba(167,139,250,0.45); border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(0,0,0,0.9); }
.cr-dlg:not([open]) { display: none; }
.cr-dlg::backdrop { background: rgba(5,2,10,0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cr-dlg[open] { animation: cr-dlg-in .22s var(--cr-ease); }
@keyframes cr-dlg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
html.cr-dlg-on { overflow: hidden; scrollbar-gutter: stable; }
.cr-dlg__box { display: grid; gap: 12px; margin: 0; padding: 18px 20px 20px; background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(124,58,237,0.13)); }
.cr-dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cr-dlg__head h2 { margin: 0; font-family: 'Manrope', 'Manrope Local', system-ui, sans-serif; font-style: normal; font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 800; color: var(--cr-violet); }
.cr-dlg__in { display: block; width: 100%; box-sizing: border-box; height: 62px; padding: 0 14px; font: inherit; font-size: clamp(1.3rem, 6vw, 1.75rem); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #fff;
  background: rgba(10,5,16,0.7); border: 1px solid rgba(167,139,250,0.35); border-radius: 12px; caret-color: var(--cr-violet); outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
.cr-dlg__in:hover { border-color: rgba(167,139,250,0.6); }
.cr-dlg__in:focus { border-color: var(--cr-violet); box-shadow: 0 0 0 3px rgba(167,139,250,0.25); }
.cr-dlg__in.is-ok { border-color: rgba(123,232,138,0.75); box-shadow: 0 0 0 3px rgba(123,232,138,0.14); }
.cr-dlg__in.is-bad { border-color: rgba(252,165,165,0.8); box-shadow: 0 0 0 3px rgba(252,165,165,0.14); }
.cr-dlg__st { margin: -2px 0 0; min-height: 1.5em; font-size: 0.92rem; font-weight: 800; line-height: 1.5; color: var(--cr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-dlg__st.is-ok { color: var(--cr-green); }
.cr-dlg__st.is-bad { color: var(--cr-red); }
.cr-dlg__link { padding: 11px 12px; }
.cr-dlg__save { width: 100%; margin-top: 4px; padding: 13px 18px; }
@media (max-width: 600px) {
  .cr-dlg { margin: max(16px, 9vh) auto auto; max-height: calc(100vh - max(16px, 9vh) - 16px); max-height: calc(100dvh - max(16px, 9vh) - 16px); }
  .cr-dlg__box { padding: 16px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .cr-dlg[open] { animation: none; } }

/* ---------- šírky ---------- */
@media (min-width: 900px) {
  /* Účet na výplatu a Výplaty vedľa seba, keď majú aspoň 300 px (v ľavom stĺpci PC 1200–1400 px pod sebou: IBAN celý) */
  .cr-zar2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
  .cr-zar { gap: 16px; }
  .cr-view--prof { max-width: 760px; }
}
@media (min-width: 1200px) {
  .cr-view--prof { max-width: 1080px; }
  .cr-prof { grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
  .cr-prof__l, .cr-prof__r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
  .cr-prof__r .cr-story__wrap { grid-template-columns: minmax(0, 1fr); }
  .cr-prof__r .cr-story__prev { width: 300px; max-width: 100%; margin: 0 auto; }
  .cr-prof__r .cr-storyc .cr-actions { justify-content: center; }
  .cr-lbwrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .cr-lbcol { gap: 16px; }
  .cr-lbcol .cr-badges { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* tablet a mobil: záložky hneď pod hlavičkou úvodu, prilepené pri scrollovaní (29. 9. 2026), 3 rovnaké stĺpce */
@media (max-width: 899px) {
  .cr-app { grid-template-columns: minmax(0, 1fr); }
  .cr-side { position: sticky; top: var(--vn-hdr); height: auto; width: auto; padding: 0; background: none; border: 0; overflow: visible; }
  .cr-side__foot { display: none; }
  .cr-nav { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; height: var(--cr-tab-h); box-sizing: border-box; padding: 6px 4px; background: var(--cr-panel); border-bottom: 1px solid var(--cr-line-soft); }
  .cr-nav a { flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; border-radius: 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; text-align: center; -webkit-tap-highlight-color: transparent; }
  .cr-nav a:hover { background: none; color: #fff; }
  .cr-nav a .cr-ico { width: 44px; height: 26px; padding: 3px 12px; border-radius: 999px; box-sizing: border-box; transition: background-color .18s ease; }
  .cr-nav a:hover .cr-ico { background: rgba(167,139,250,0.14); }
  .cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]) { background: none; }
  .cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]) .cr-ico { background: rgba(124,58,237,0.32); }
  .cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]):hover { background: none; color: #ede9fe; }
  .cr-nav a:is([aria-current="page"], :where(html.cr-boot[data-cr-tab="profil"]) [data-nav="profil"], :where(html.cr-boot[data-cr-tab="rebricek"]) [data-nav="rebricek"], :where(html.cr-boot[data-cr-tab="inspiracie"], html.cr-boot[data-cr-tab="indet"]) [data-nav="inspiracie"]):hover .cr-ico { background: rgba(124,58,237,0.42); }
  .cr-nav__badge { top: 2px; right: max(0px, calc(50% - 36px)); transform: none; min-width: 0; padding: 0 5px; font-size: 0.62rem; }
  .cr-nav__dot { top: 6px; right: calc(50% - 22px); margin: 0; }
  .cr-main { padding: 0 0 40px; }
  .cr-view { padding: 20px 16px 0; }
  .cr-body.is-app .cr-toast { margin-left: 0; }
  .cr-head { margin-bottom: 16px; }
  .cr-head h1 { font-size: 1.65rem; }
  #zarobky, #viditelnost { scroll-margin-top: calc(var(--vn-hdr, 0px) + var(--cr-tab-h) + 14px); }
}
@media (max-width: 600px) {
  .cr-card { padding: 16px; border-radius: 14px; }
  .cr-bal { grid-template-columns: minmax(0, 1fr); }
  .cr-bal .cr-btn { width: 100%; }
  .cr-bal__big { font-size: 2rem; }
  .cr-det__copy { width: 100%; }
  /* objednávky: riadok tabuľky = kartička (hore dátum a stav, dole zdroj a provízia) */
  .cr-table thead { display: none; }
  .cr-table, .cr-table tbody { display: block; }
  .cr-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--cr-line-soft); }
  .cr-table tr:last-child { border-bottom: 0; }
  .cr-table td { display: block; padding: 0; border: 0; }
  .cr-table td.c-date { grid-column: 1; grid-row: 1; align-self: center; font-weight: 700; color: #fff; }
  .cr-table tr.is-off td.c-date { color: var(--cr-mute); }
  .cr-table td.c-st { grid-column: 2; grid-row: 1; justify-self: end; }
  .cr-table td.c-src { grid-column: 1; grid-row: 2; align-self: center; }
  .cr-table td.c-amt { grid-column: 2; grid-row: 2; justify-self: end; white-space: nowrap; }
  .cr-table td.c-base { display: none; }
  .cr-table td.c-amt small { display: inline; margin-right: 6px; font-size: 0.78rem; color: var(--cr-mute); }
  .cr-lbme { gap: 14px; }
  .cr-lbrow { grid-template-columns: 30px 32px minmax(0, 1fr) auto; gap: 8px; padding: 6px 8px 6px 0; }
  .cr-lbrow .cr-ava { width: 32px; height: 32px; font-size: 0.85rem; }
  .cr-rank--medal { font-size: 1.35rem; }
  .cr-badges { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cr-badge { min-height: 52px; padding: 8px 30px 8px 10px; }
  .cr-insp__row { grid-template-columns: 62px minmax(0, 1fr); font-size: 0.88rem; }
  .cr-det__h { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-body *, .cr-body *::before, .cr-body *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ukážka pre admina (?nahlad=1): vymyslené údaje, nič sa neukladá */
.cr-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 auto 14px; max-width: 1080px; box-sizing: border-box; padding: 9px 14px; border: 1px solid #d4a247; border-radius: 12px; background: rgba(26,18,8,0.94); color: var(--cr-gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; }
.cr-preview b { margin-right: auto; white-space: nowrap; }
.cr-preview a { color: #fff; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; transition: color .18s ease; }
.cr-preview a:hover { color: var(--cr-gold); }
html.cr-pv .cr-body #crPreview { display: flex !important; }
@media (max-width: 899px) { .cr-preview { margin: 16px 16px 0; } }

/* 27. 9. 2026: pás odkazov (značky, typy, tóny) zbalený do jedného nenápadného riadku dole — odkazy ostávajú v HTML (SEO) */
.brandstrip-fold { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }
.brandstrip-fold > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,241,238,0.34); transition: color 0.15s ease; }
.brandstrip-fold > summary::-webkit-details-marker { display: none; }
.brandstrip-fold > summary::after { content: "▾"; margin-left: 0.5em; }
.brandstrip-fold[open] > summary::after { content: "▴"; }
.brandstrip-fold > summary:hover, .brandstrip-fold > summary:focus-visible { color: #a78bfa; outline: none; }
.brandstrip-fold > .brandstrip { border-top: 0; padding-top: 0; }

/* ---------- KOSTRA pri načítaní (majiteľ 25. 9. 2026: „najprv len prázdne dlaždice v tvare a veľkosti budúceho obsahu“) ----------
   html.cr-boot (hlavička stránky, kým nie sú údaje aj obrázky): bočný panel a záložky hneď, zobrazená záložka podľa
   html[data-cr-tab] = ten istý obsah, v ktorom sú bloky [data-sk] dlaždicami bez textu ([data-sk="t"] = pruh v mieste textu).
   Premenlivé bloky [data-psk] majú výšku z minulej návštevy pri tej istej šírke (--cr-psk-<n> z me.sz), inak predvolenú
   (--cr-psd-<n>, namerané na ukážkových údajoch). Po načítaní sa obsah objaví pod závojom (reveal.js, dropIn). */
html.cr-boot .cr-body #crGate { display: none !important; }
html.cr-boot .cr-body #crApp { display: grid !important; }
html.cr-boot .cr-main > .cr-view { display: none !important; }
html.cr-boot[data-cr-tab="profil"] .cr-main > #v-profil, html.cr-boot[data-cr-tab="rebricek"] .cr-main > #v-rebricek,
html.cr-boot[data-cr-tab="inspiracie"] .cr-main > #v-inspiracie, html.cr-boot[data-cr-tab="indet"] .cr-main > #v-indet { display: block !important; }
html.cr-boot .cr-main > .cr-view { visibility: hidden; pointer-events: none; }
html.cr-boot .cr-main > .cr-view [data-sk] { visibility: visible; color: transparent !important; -webkit-text-fill-color: transparent !important; border-color: transparent !important; box-shadow: none !important; text-shadow: none !important; text-decoration: none !important; animation: rvShimmer 1.6s linear infinite;
  background: var(--rv-tile, #17131e) linear-gradient(100deg, transparent 25%, var(--rv-hi, rgba(255,255,255,0.055)) 50%, transparent 75%) no-repeat 120% 0 / 250% 100% !important; }
html.cr-boot .cr-main > .cr-view [data-sk] * { visibility: hidden !important; }
html.cr-boot .cr-main > .cr-view [data-sk="t"] { border-radius: 8px; }
html.cr-boot .cr-main > .cr-view [data-sk] [data-sk] { animation: none; }
html.cr-boot .cr-main :is(#h-profil, #h-inspiracie) { width: min(240px, 60%); flex: none; }
html.cr-boot .cr-main #h-rebricek { width: min(150px, 40%); flex: none; }
html.cr-boot .cr-main .cr-ilead { width: min(330px, 92%); }
html.cr-boot .cr-main :is(.cr-h2, .cr-isec__h, .cr-sect) { width: 150px; }
html.cr-boot .cr-main .cr-gh { width: 50%; }
html.cr-boot .cr-main .cr-det__h { width: 82%; }
html.cr-boot .cr-main .cr-mfoot p { width: 60%; }
html.cr-boot .cr-main .cr-itile__t { width: 78%; }
html.cr-boot .cr-main .cr-itile__s { width: 55%; }
html.cr-boot .cr-main .cr-back2 { padding-left: 6px; }
html.cr-boot .cr-main [data-psk] { overflow: hidden; }
html.cr-boot .cr-main [data-psk="1"] { height: var(--cr-psk-1, var(--cr-psd-1)); }
html.cr-boot .cr-main [data-psk="2"] { height: var(--cr-psk-2, var(--cr-psd-2)); }
html.cr-boot .cr-main [data-psk="3"] { height: var(--cr-psk-3, var(--cr-psd-3)); }
html.cr-boot .cr-main [data-psk="4"] { height: var(--cr-psk-4, var(--cr-psd-4)); }
html.cr-boot .cr-main [data-psk="5"] { height: var(--cr-psk-5, var(--cr-psd-5)); }
html.cr-boot .cr-main [data-psk="6"] { height: var(--cr-psk-6, var(--cr-psd-6)); }
/* predvolené výšky (namerané 16. 10. 2026 na ukážkovom tvorcovi): 1 story, 2 objednávky, 3 výplaty, 4 Tvoje miesto,
   5 poradie, 6 odznaky. Story premerané pri oprave prvej návštevy (kostra záložky aj bez uloženého profilu): 375 px 986,
   390 px 943, 440 px 901, 600 px 513, 768–1199 px 489, od 1200 px 1030 */
.cr-body { --cr-psd-1: 900px; --cr-psd-2: 420px; --cr-psd-3: 150px; --cr-psd-4: 150px; --cr-psd-5: 300px; --cr-psd-6: 220px; }
@media (max-width: 400px) { .cr-body { --cr-psd-1: 950px; } }
@media (min-width: 561px) { .cr-body { --cr-psd-1: 490px; } }
@media (min-width: 601px) { .cr-body { --cr-psd-2: 360px; --cr-psd-3: 160px; --cr-psd-4: 156px; --cr-psd-5: 308px; --cr-psd-6: 214px; } }
@media (min-width: 1200px) { .cr-body { --cr-psd-1: 1030px; } }
/* bez inšpirácií: prázdny stav, bez prepínača (html[data-cr-in0] z me.in) */
html.cr-boot[data-cr-in0] .cr-main #crInSeg { display: none; }
html.cr-boot[data-cr-in0] .cr-main #crInLib .cr-inempty { display: block; }
/* detail: rámik 9 : 16 len pri scripte a videu (návod: html[data-cr-ig] z me.ig) */
.cr-detsk .cr-skl { display: block; border-radius: 10px; }
/* riadok s odznakom 21 px a nadpis na 1 riadok (výška riadku nadpisu: PC 1,45rem × 1,25, mobil 1,25rem × 1,25), aby rámik
   videa pod nadpisom po načítaní neposkočil (16. 10. 2026) */
.cr-detsk .cr-skl--meta { width: 190px; height: 21px; border-radius: 999px; }
.cr-detsk .cr-skl--h { width: 82%; height: calc(1.45rem * 1.25); margin-top: 6px; }
@media (max-width: 600px) { .cr-detsk .cr-skl--h { height: calc(1.25rem * 1.25); } }
.cr-detsk .cr-skl--btn { height: 44px; }
.cr-detsk .cr-skl--part { height: 118px; border-radius: 14px; }
html[data-cr-ig] .cr-detsk .cr-det__vcol { display: none; }
html[data-cr-ig] .cr-detsk .cr-det--v { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
html[data-cr-ig] .cr-detsk .cr-det--v .cr-det__main { grid-column: 1; }
/* video od tvorcu (html[data-cr-iv] z me.iv, 16. 10. 2026): rámik ako v obsahu — mobil hneď pod nadpisom a 320 px, PC stĺpec 320 px */
html[data-cr-iv] .cr-detsk .cr-det--s .cr-player { width: min(100%, 320px); }
@media (max-width: 899px) {
  html[data-cr-iv] .cr-detsk .cr-det--s > .cr-det__vcol { order: 2; }
  html[data-cr-iv] .cr-detsk .cr-det--s .cr-det__btns { order: 3; }
}
@media (min-width: 900px) {
  html[data-cr-iv] .cr-detsk .cr-det--s { grid-template-columns: 320px minmax(0, 1fr); }
  html[data-cr-iv] .cr-detsk .cr-det--s .cr-player { width: 100%; }
}
/* script s predlohou aj videom (html[data-cr-ip] z me.ip, 18. 10. 2026): na mobile je predloha nad rámikom videa — kostra
   pre ňu drží miesto, aby rámik po načítaní neposkočil; výška z minulej návštevy pri tej istej šírke (--cr-ip-h), inak odhad
   (--cr-ipd: odkaz „Pozrieť predlohu“ a text na 1 riadok — telefóny užšie ako 440 px majú na webe viewport 440; pod 421 px
   bez neho text na 2 riadky) */
.cr-detsk .cr-skl--pred { display: none; box-sizing: border-box; padding: 0; }
html[data-cr-ip] .cr-detsk .cr-skl--pred { display: block; height: var(--cr-ip-h, var(--cr-ipd)); }
.cr-body { --cr-ipd: 72px; }
@media (max-width: 420px) { .cr-body { --cr-ipd: 92px; } }
html.cr-boot .cr-app :is(.cr-me, .cr-chip) { pointer-events: none; animation: rvShimmer 1.6s linear infinite;
  background: var(--rv-tile, #17131e) linear-gradient(100deg, transparent 25%, var(--rv-hi, rgba(255,255,255,0.055)) 50%, transparent 75%) no-repeat 120% 0 / 250% 100%; border-color: transparent; box-shadow: none; }
html.cr-boot .cr-app :is(.cr-me, .cr-chip) > * { visibility: hidden; }
html.cr-boot .cr-app :is(.cr-nav__dot, .cr-nav__badge) { visibility: hidden; }
/* logá: dlaždica s oblými rohmi (brána: kruh) */
html.rv .cr-gate__logo[data-reveal]:not(.is-in), .cr-gate__logo > .rv-veil { border-radius: 50%; }
/* závoj pri objavení pod lištami portálu (záložky majú z-index 20, závoj z reveal.css 60): dropIn() dáva závoj aj blokom
   bez [data-reveal] (karty, hlavička) — tie jadro do vlastnej vrstvy neizoluje */
.cr-app .rv-veil { z-index: 1; }