/* Generované zo styles.css (bloky @tel) — scripts/build-static-chrome.js. Needitovať. */
/* ---------- Ukážka portálu tvorcu (majiteľ 1. 10. 2026) ----------
   Statická ukážka (CREATOR_PREVIEW_DATA v script.js, čísla programu z creators-config.js). Od 1200 px scéna vedľa okna
   v tom istom overlayi (nie samostatný dialóg — ×, Esc a klik mimo zatvárajú celý celok): telefón pred notebookom; okno sa
   zúži, aby sa oba zmestili. Pod 1200 px zbaliteľná sekcia v okne (len telefón). Ikony len inline SVG. .vcp = obsah portálu
   (v telefóne .vcd-scroll .vcp, v notebooku .vcd-desk), zariadenia nižšie (.vcd). */
.vcp {
  display: flex; flex-direction: column; gap: 16px; padding: 28px; box-sizing: border-box;
  background: #120c26; border: 1px solid #3a2d6b; border-radius: 28px;
  color: #f4f1ff; font-family: var(--font-body); text-align: left; line-height: 1.35;
}
.vcp svg { display: block; flex: none; }
.vcp > * { flex-shrink: 0; }   /* panel s max-height: karty sa nesmú stláčať (karta so sumou má overflow: hidden) */
.vcp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.vcp-kicker { min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #a996ff; white-space: nowrap; }
.vcp-pill { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #2a1f52; color: #c9bcff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vcp-profile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vcp-ava { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; font-size: 18px; font-weight: 800; }
.vcp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* profil ako náhľad Instagramu (1. 10. 2026): krúžok príbehu, modrá fajka, sledujúci */
.vcp-profile--ig .vcp-ava { padding: 3px; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.vcp-profile--ig .vcp-ava > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: inset 0 0 0 2.5px #120c26; }
.vcp-profile--ig .vcp-who b { display: inline-flex; align-items: center; gap: 4px; }
.vcp-verif { display: inline-grid; width: 15px; height: 15px; flex: none; }
.vcp-verif svg { width: 100%; height: 100%; }
.vcp-igl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #b3a9d6; white-space: nowrap; }
.vcp-igl svg { width: 13px; height: 13px; flex: none; color: #e1306c; }
/* počet ďalších nákupov zlatý ako ich suma (majiteľ 1. 10. 2026) */
.vcp-rep__r--b .vcp-rep__n { color: #e8b85c; }
/* riadky rozpisu: popisy biele tučné, počet prvých nákupov fialový, opakovaných žltý (majiteľ 2. 10. 2026: „nech ich vidno riadne“) */
.vcp-rep .vcp-rep__l { color: #fff; font-weight: 800; }
.vcp-rep .vcp-rep__r--a .vcp-rep__n { color: #a68bff; font-weight: 800; }
.vcp-rep .vcp-rep__r--a .vcp-rep__s { color: #a68bff; } /* suma prvých nákupov fialová ako 61× (2. 10. 2026) */
.vcp-rep .vcp-rep__r--b .vcp-rep__n { color: #ffd23f; font-weight: 800; }
/* mesiac, za ktorý sú čísla (1. 10. 2026) */
.vcp-month { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; background: #1a1233; border: 1px solid #2e2452; color: #c9bcff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.vcp-month svg { width: 13px; height: 13px; flex: 0 0 auto; color: #a996ff; }
/* v telefóne nie je miesto vedľa profilu — mesiac je tam v „Na výplatu za …“ a v rebríčku */
.vcd-scroll .vcp-month { display: none; }
.vcp-who b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.vcp-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #7be0a8; white-space: nowrap; }
.vcp-ok svg { width: 13px; height: 13px; }
.vcp-pay { display: flex; flex-direction: column; border-radius: 20px; background: #1e1630; border: 1px solid #6b5426; overflow: hidden; }
.vcp-pay__top { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; }
.vcp-pay__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.vcp-pay__sumw { min-width: 0; }
.vcp-pay__l { display: block; font-size: 13px; font-weight: 600; color: #b3a9d6; }
.vcp-pay__sum { display: block; margin-top: 2px; font-size: 44px; line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; color: #e8b85c; white-space: nowrap; }
.vcp-pay__btn {
  flex: none; height: 48px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; pointer-events: none;
  background: #e8b85c; color: #2a1c05; font: 800 15px/1 var(--font-body); letter-spacing: 0.02em;
}
.vcp-pay__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: #b3a9d6; white-space: nowrap; }
.vcp-pay__note svg { width: 14px; height: 14px; color: #e8b85c; }
.vcp-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #1a1233; border: 1px dashed #7b5cff; }
.vcp-code__txt { min-width: 0; }
.vcp-code__l { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #b3a9d6; white-space: nowrap; }
.vcp-code__v { display: block; margin-top: 4px; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: 0.06em; color: #f4f1ff; }
.vcp-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: #2a1f52; border: 1px solid #3a2d6b; color: #e6e0ff; font: 700 13px/1 var(--font-body); white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vcp-copy svg { width: 15px; height: 15px; }
.vcp-copy:hover { background: #33276a; }
.vcp-copy:focus-visible { outline: 2px solid #a996ff; outline-offset: 2px; }
.vcp-copy.is-done { background: #173628; border-color: #24563d; color: #7be0a8; }
.vcp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vcp-stats li { min-width: 0; padding: 10px 12px; border-radius: 14px; background: #1a1233; border: 1px solid #2e2452; }
.vcp-stats li > span { display: block; font-size: 12px; color: #b3a9d6; white-space: nowrap; }
.vcp-stats strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1.15; font-weight: 800; white-space: nowrap; }
/* hlavná novinka (majiteľ 1. 10. 2026): spodok karty „Na výplatu“ — rozpis sumy na prvé nákupy s kódom a ďalšie nákupy
   tých istých zákazníkov (vlastné fialové pozadie, aby bol výrazný; v jednej karte so sumou, nech sa panel zmestí) */
.vcp-rep {
  display: flex; flex-direction: column; gap: 7px; padding: 13px 20px 15px; border-top: 1px solid #4b3a9c;
  background: linear-gradient(135deg, rgba(123,92,255,0.30), rgba(123,92,255,0.12) 60%, rgba(232,184,92,0.10));
}
.vcp-rep__t { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 15px; line-height: 1.25; font-weight: 800; color: #f4f1ff; }
.vcp-rep__t svg { width: 24px; height: 24px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #e8b85c; color: #2a1c05; }
.vcp-rep__t span { min-width: 0; white-space: nowrap; }
.vcp-rep__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.vcp-rep__r { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.35; }
.vcp-rep__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7b5cff; }
.vcp-rep__r--b .vcp-rep__dot { background: #e8b85c; }
.vcp-rep__l { flex: 1 1 auto; min-width: 0; color: #d9d2f5; white-space: nowrap; }
.vcp-rep__n { flex: none; color: #b3a9d6; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vcp-rep__s { flex: none; min-width: 5.4em; text-align: right; color: #e8b85c; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vcp-rep__bar { display: flex; gap: 3px; height: 6px; margin-top: 2px; }
.vcp-rep__bar i { display: block; height: 100%; border-radius: 999px; background: #7b5cff; }
.vcp-rep__bar i + i { flex: 1 1 auto; background: #e8b85c; }
/* rebríček tvorcov (vymyslené ukážkové dáta): prepínač Použité kódy | Top zárobok, vodorovné pruhy top 5 */
.vcp-lb { padding: 12px 14px; border-radius: 16px; background: #1a1233; border: 1px solid #2e2452; }
.vcp-lb__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
.vcp-lb__t { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8f86b3; white-space: nowrap; }
.vcp-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; background: #120c26; border: 1px solid #2e2452; }
.vcp-seg__b {
  height: 32px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #b3a9d6; font: 700 12px/1 var(--font-body); white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.vcp-seg__b:hover { color: #f4f1ff; }
.vcp-seg__b[aria-pressed="true"] { background: #7b5cff; color: #fff; }
.vcp-seg__b:focus-visible { outline: 2px solid #a996ff; outline-offset: 2px; }
.vcp-lb__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vcp-lb__row {
  display: grid; grid-template-columns: 20px 7.4em minmax(0, 1fr) 4.2em; align-items: center; gap: 8px;
  height: 26px; margin: 0 -6px; padding: 0 6px; border-radius: 9px; font-size: 12.5px;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vcp-lb__rank { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2a1f52; color: #c9bcff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vcp-lb__name { min-width: 0; font-weight: 700; color: #e6e0ff; white-space: nowrap; }
.vcp-lb__track { height: 8px; border-radius: 999px; background: #261c4a; overflow: hidden; }
.vcp-lb__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5a3fd9, #8b6cff); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vcp-lb__v { text-align: right; font-weight: 800; color: #f4f1ff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vcp-lb__row.is-me { background: rgba(232,184,92,0.1); box-shadow: inset 0 0 0 1px #6b5426; }
.vcp-lb__row.is-me .vcp-lb__rank { background: #e8b85c; color: #2a1c05; }
.vcp-lb__row.is-me .vcp-lb__name, .vcp-lb__row.is-me .vcp-lb__v { color: #e8b85c; }
.vcp-lb__row.is-me .vcp-lb__track i { background: linear-gradient(90deg, #b9862c, #e8b85c); }
@media (prefers-reduced-motion: reduce) { .vcp-lb__row, .vcp-lb__track i, .vcp-seg__b { transition: none; } }
.vcp-rules__t { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8f86b3; }
.vcp-rules ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; }
.vcp-rules li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: #d9d2f5; }
.vcp-rules li svg { width: 13px; height: 13px; color: #7b5cff; }
.vcp-rules li span { min-width: 0; white-space: nowrap; }
.vcp-rules li.is-wide { grid-column: 1 / -1; font-weight: 700; color: #f4f1ff; }
.vcp-rules li.is-wide svg { color: #e8b85c; }
.vcp-end { margin: 0; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.vcp-end span, .vcp-end em { white-space: nowrap; }
.vcp-end em { font-style: normal; color: #e8b85c; }

/* ---------- Ukážka v zariadeniach (majiteľ 1. 10. 2026, 3. kolo) ----------
   Portál ako otvorený web veelyn.sk/tvorcovia v telefóne (rám z oranžového titánu, Dynamic Island, bočné tlačidlá; bez loga
   a nápisov výrobcu) a vedľa okna aj v notebooku (desktopová verzia v 2 stĺpcoch). Zariadenia sú navrhnuté v pevných px na
   javisku .vcd (--sw × --sh) a celé javisko sa zmenší na miesto kontajnera: mierka --vcd-k = min(šírka / --sw, výška / --sh)
   počíta script.js (vcScale; WebKit nevie tan(atan2()) s jednotkami cqw — vracal zápornú mierku). Rozloženie portálu
   v telefóne je preto vždy rovnaké (displej 312 px) a texty sa nezalamujú.
   Bez obrázkov a bez filter: blur — tiene sú prechody; telefón stojí v miernej perspektíve. */
.vc-portal--side { display: none; }
@media (min-width: 1200px) {
  #modal-affiliate { --vcp-w: clamp(440px, 32vw, 560px); gap: 24px; }
  #modal-affiliate .modal__panel.vc { flex: 0 1 auto; width: min(1060px, calc(100vw - 2rem - 24px - var(--vcp-w))); max-width: none; }
  /* 1200–1479 px: okno má len ~780–950 px → užší stĺpec s balíkom, viac miesta pre text */
  @media (max-width: 1479px) { #modal-affiliate .modal__panel.vc { grid-template-columns: clamp(270px, 38%, 450px) minmax(0, 1fr); } }
  @media (max-width: 1365px) { #modal-affiliate .modal__panel.vc { grid-template-columns: clamp(270px, 36%, 450px) minmax(0, 1fr); } }
  /* scéna vedľa okna (pevná veľkosť → okno sa nehýbe); nízka obrazovka: len telefón */
  .vc-portal--side {
    display: block; position: relative; z-index: 1; flex: none; width: var(--vcp-w);
    height: min(94vh, 840px, calc(var(--vcp-w) * 2.05));
  }
  .vc-more { display: none; }
}
/* od 800 px výšky aj notebook: telefón stojí pred ním a prekrýva jeho pravý dolný roh */
@media (min-width: 1200px) and (min-height: 800px) {
  .vc-portal--side { height: min(94vh, 840px, calc(var(--vcp-w) * 1.8)); }
  .vcd.vcd--side { --sw: 500px; --sh: 900px; }
  .vcd--side .vcd-lap { display: block; }
  .vcd--side .vcd-phone { left: 158px; top: 192px; }
  .vcd--side .vcd-phone__floor { left: 168px; top: 858px; }
}

/* javisko: zvisle v strede; vedľa okna zarovnané k nemu (medzera 24 px), v zbalenej sekcii v strede (kontajner = javisko) */
.vcd {
  --sw: 356px; --sh: 730px;
  position: absolute; left: 0; top: 50%; width: var(--sw); height: var(--sh);
  transform-origin: 0 50%;
  transform: translateY(-50%) scale(var(--vcd-k, 0.85));
  text-align: left;
}
.vc-portal--side .vcd { animation: vcdIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes vcdIn { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.vcd-floor { position: absolute; left: 6%; right: 6%; bottom: 0; height: 80px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(124,58,237,0.2), rgba(124,58,237,0)); }

/* --- telefón: 330 × 691 px (pomer tela 163,4 × 78 mm), displej 312 × 673 px --- */
.vcd-phone {
  position: absolute; z-index: 2; left: 12px; top: 12px; width: 330px; height: 691px;
  transform: perspective(1800px) rotateY(-8deg) rotateX(4deg);
}
/* tieň na podložke */
.vcd-phone__floor {
  position: absolute; z-index: 1; left: 22px; top: 678px; width: 340px; height: 52px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,0.66), rgba(0,0,0,0.32) 55%, rgba(0,0,0,0));
}
/* bok telefónu (je bližšie vpravo dole → vidno ho za prednou stranou) + tieň */
.vcd-phone__flank {
  position: absolute; inset: 3px -6px -3px 3px; border-radius: 55px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 98.3%, rgba(255,230,204,0.8) 99.1%, rgba(255,255,255,0) 99.9%),
    linear-gradient(180deg, #f7a86e 0%, #d9692a 9%, #b5501a 28%, #e27b37 50%, #c45c1f 76%, #8a380e 100%);
  box-shadow: 26px 36px 60px -18px rgba(0,0,0,0.8), 10px 16px 24px -8px rgba(0,0,0,0.5);
}
.vcd-key { position: absolute; width: 6px; border-radius: 2px; background: linear-gradient(90deg, #9d4216, #f5a066 45%, #d9692a 75%, #8f3a10); }
.vcd-key--act { left: -3px; top: 124px; height: 30px; }
.vcd-key--vu { left: -3px; top: 176px; height: 54px; }
.vcd-key--vd { left: -3px; top: 242px; height: 54px; }
.vcd-key--side { right: -9px; top: 196px; height: 86px; }
.vcd-key--cam { right: -8px; top: 404px; height: 70px; border-radius: 3px; background: linear-gradient(90deg, #7a3a16, #3a2a24 35%, #574a46 60%, #7a3a16); }
/* predná strana: rám z oranžového titánu (kovový lesk podľa uhla), čierny okraj skla, displej */
.vcd-phone__body {
  position: absolute; z-index: 1; inset: 0; padding: 5px; border-radius: 54px;
  background:
    linear-gradient(90deg, rgba(255,238,220,0) 0.4%, rgba(255,238,220,0.6) 0.8%, rgba(255,238,220,0) 1.3%, rgba(255,238,220,0) 98.7%, rgba(255,238,220,0.5) 99.2%, rgba(255,238,220,0) 99.6%),
    linear-gradient(180deg, rgba(255,238,220,0) 0.2%, rgba(255,238,220,0.55) 0.4%, rgba(255,238,220,0) 0.65%, rgba(255,238,220,0) 99.35%, rgba(255,238,220,0.4) 99.6%, rgba(255,238,220,0) 99.8%),
    conic-gradient(from 210deg, #ffd0a4, #f08a3c 7%, #a9461a 18%, #e8742c 30%, #ffbe88 42%, #f08a3c 52%, #9c4216 66%, #e8742c 80%, #ffd0a4);
  box-shadow: inset 0 0 0 1px rgba(255,230,206,0.55), 0 0 0 0.6px rgba(92,34,6,0.9);
}
.vcd-ant { position: absolute; width: 4px; height: 2.5px; background: rgba(96,38,10,0.6); }
.vcd-ant--1 { left: 0; top: 76px; }
.vcd-ant--2 { right: 0; top: 76px; }
.vcd-ant--3 { left: 0; bottom: 76px; }
.vcd-ant--4 { right: 0; bottom: 76px; }
.vcd-phone__glass { position: relative; height: 100%; padding: 4px; border-radius: 49px; background: #040404; box-shadow: 0 0 0 1px rgba(70,24,4,0.85); }
.vcd-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 45px; background: #120c26; isolation: isolate; }
/* stavový riadok a Dynamic Island */
.vcd-status {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 46px;
  display: flex; align-items: center; justify-content: space-between; padding: 3px 22px 0 36px;
  background: #0f0a21; color: #fff; font: 600 14.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.01em;
}
.vcd-status__t { width: 38px; text-align: center; }
.vcd-status__i { display: flex; align-items: center; gap: 5px; }
.vcd-status__i svg { display: block; flex: none; fill: currentColor; }
.vcd-status__i svg:nth-child(1) { width: 17px; height: 11.5px; }
.vcd-status__i svg:nth-child(2) { width: 15.5px; height: 11.5px; }
.vcd-status__i svg:nth-child(3) { width: 26px; height: 12.5px; }
.vcd-island {
  position: absolute; z-index: 4; left: 50%; top: 10px; width: 92px; height: 27px; margin-left: -46px; border-radius: 14px;
  background: radial-gradient(circle at 79% 50%, #1d2638 0, #111621 3px, #000 5.5px);
}
/* adresný riadok dole ako Safari na iPhone (majiteľ 1. 10. 2026: „nech to vyzerá viac ako web“): matné sklo, obsah
   stránky prechádza pod ním; pole s adresou (aA, zámok, veelyn.sk, obnoviť) a pod ním lišta prehliadača */
.vcd-url {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 9px 12px 24px; border-radius: 0 0 45px 45px;   /* = displej (sklo sa inak neorezalo) */
  background: rgba(22,15,44,0.74); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
}
.vcd-url__f {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 38px; border-radius: 13px;
  background: rgba(255,255,255,0.11); color: #ece8ff; font: 500 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.vcd-url__f > svg { display: block; flex: none; width: 9px; height: 11.5px; fill: #a99fd0; color: #a99fd0; }
.vcd-url__aa { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -0.02em; color: #ece8ff; }
.vcd-url__r { position: absolute; right: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #ece8ff; }
.vcd-url__r svg { display: block; width: 100%; height: 100%; }
.vcd-url__tools { display: flex; justify-content: space-between; align-items: center; padding: 11px 10px 0; color: #b9a8ff; }
.vcd-url__tools svg { display: block; width: 22px; height: 22px; }
.vcd-url__tools svg:nth-child(2) { opacity: 0.35; }
/* web: posúva sa vo vnútri displeja, posuvník skrytý; spodok obsahu sa dá vysunúť nad lištu prehliadača */
.vcd-scroll {
  position: absolute; z-index: 1; left: 0; right: 0; top: 46px; bottom: 0;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}

.vcd-scroll::-webkit-scrollbar { display: none; }
.vc-portal--side .vcd-scroll { overscroll-behavior: contain; }
.vcd-home { position: absolute; z-index: 3; left: 50%; bottom: 7px; width: 112px; height: 4px; margin-left: -56px; border-radius: 3px; background: rgba(255,255,255,0.78); pointer-events: none; }
/* odlesk skla */
.vcd-glare {
  position: absolute; z-index: 5; inset: 0; pointer-events: none;
  background: linear-gradient(114deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.035) 33%, rgba(255,255,255,0) 33.3%);
}

/* --- notebook (len vedľa okna): veko 450 × 288 px s tenkým rámom a kamerkou, displej 428 × 262 px; spodok v perspektíve --- */
.vcd-lap { display: none; position: absolute; z-index: 1; left: 0; top: 10px; width: 470px; }
.vcd-lap::after {
  content: ""; position: absolute; z-index: -1; left: -8px; right: -8px; top: 326px; height: 50px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.62), rgba(0,0,0,0.28) 55%, rgba(0,0,0,0));
}
.vcd-lap__lid {
  position: relative; height: 288px; margin: 0 10px; padding: 3px; border-radius: 15px 15px 4px 4px;
  background: linear-gradient(180deg, #73777e, #4b4e54 38%, #3a3c41);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 -1px 0 rgba(0,0,0,0.35);
}
.vcd-lap__bezel { position: relative; height: 100%; padding: 11px 8px 9px; border-radius: 12px 12px 2px 2px; background: #09090b; }
.vcd-lap__cam { position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5c82, #0b0d12 72%); }
.vcd-lap__screen { position: relative; height: 100%; overflow: hidden; border-radius: 2px; background: #120c26; }
.vcd-lap__bar { position: relative; display: flex; align-items: center; height: 18px; padding: 0 8px; background: #1b1728; box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
.vcd-lap__dots { display: flex; gap: 4px; }
.vcd-lap__dots i { display: block; width: 5.5px; height: 5.5px; border-radius: 50%; background: #ff5f57; }
.vcd-lap__dots i:nth-child(2) { background: #febc2e; }
.vcd-lap__dots i:nth-child(3) { background: #28c840; }
.vcd-lap__url {
  position: absolute; left: 50%; top: 3.5px; display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 150px; height: 11px; margin-left: -75px; border-radius: 4px; background: #2a2440; color: #d6cff2;
  font: 500 6.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; white-space: nowrap;
}
.vcd-lap__url svg { display: block; flex: none; width: 4.5px; height: 6px; fill: currentColor; color: currentColor; }
.vcd-lap__page { position: absolute; left: 0; top: 18px; width: 1000px; transform: scale(0.428); transform-origin: 0 0; }
.vcd-lap__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(122deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0) 40.3%); }
.vcd-lap__base { display: block; width: 470px; height: 60px; max-width: none; }
/* desktopová verzia portálu (1000 px, na displeji zmenšená) */
.vcd-desk { gap: 18px; width: 1000px; padding: 26px 40px 30px; border: 0; border-radius: 0; background: none; }
.vcd-desk__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vcd-desk__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* --- portál v telefóne: mobilné rozloženie pre displej 312 px (obsah 284 px) --- */
.vcd-scroll .vcp { gap: 10px; min-height: 100%; padding: 12px 14px 112px; border: 0; border-radius: 0; background: none; }   /* 112 px = lišta Safari dole */
.vcd-scroll .vcp-head { gap: 8px; }
.vcd-scroll .vcp-kicker { font-size: 10px; letter-spacing: 0.12em; }
.vcd-scroll .vcp-pill { height: 22px; padding: 0 9px; font-size: 10.5px; }
.vcd-scroll .vcp-profile { gap: 10px; }
.vcd-scroll .vcp-ava { width: 36px; height: 36px; font-size: 15px; }
.vcd-scroll .vcp-who b { font-size: 14px; }
.vcd-scroll .vcp-ok { font-size: 12px; }
.vcd-scroll .vcp-pay { border-radius: 16px; }
.vcd-scroll .vcp-pay__top { gap: 6px; padding: 12px 14px 10px; }
.vcd-scroll .vcp-pay__l { font-size: 12px; }
.vcd-scroll .vcp-pay__sum { font-size: 30px; }
.vcd-scroll .vcp-pay__btn { height: 38px; min-height: 38px; padding: 0 16px; font-size: 13px; }
.vcd-scroll .vcp-pay__note { font-size: 11.5px; }
.vcd-scroll .vcp-rep { gap: 6px; padding: 10px 12px 12px; }
.vcd-scroll .vcp-rep__t { gap: 7px; font-size: 13px; }
.vcd-scroll .vcp-rep__t svg { width: 20px; height: 20px; padding: 4px; }
.vcd-scroll .vcp-rep__r { gap: 6px; font-size: 12px; }
.vcd-scroll .vcp-rep__s { min-width: 5em; }
/* v telefóne stačí „Ďalšie nákupy“ (nadpis hovorí „z ďalších nákupov tvojich ľudí“), pri kóde „−10 %“ (okno píše „Tvoji ľudia
   majú s kódom −10 %“) a „Zákazníci“ (61 je aj v rozpise „Prvé nákupy s kódom“) — inak by písmo kleslo pod čitateľnosť */
.vcd-scroll .vcp-rep__x, .vcd-scroll .vcp-code__x, .vcd-scroll .vcp-stats__x { display: none; }
.vcd-scroll .vcp-code { padding: 10px 12px; border-radius: 14px; }
.vcd-scroll .vcp-code__l { font-size: 10px; letter-spacing: 0.08em; }
.vcd-scroll .vcp-code__v { margin-top: 3px; font-size: 20px; }
.vcd-scroll .vcp-copy { height: 36px; min-height: 36px; padding: 0 12px; font-size: 12px; }
.vcd-scroll .vcp-stats { gap: 6px; }
.vcd-scroll .vcp-stats li { padding: 7px 9px; border-radius: 12px; }
.vcd-scroll .vcp-stats li > span { font-size: 11px; }
.vcd-scroll .vcp-stats strong { font-size: 18px; }
.vcd-scroll .vcp-lb { padding: 10px 12px; border-radius: 14px; }
.vcd-scroll .vcp-lb__t { font-size: 11px; }
.vcd-scroll .vcp-seg { flex: 1 1 100%; }
.vcd-scroll .vcp-seg__b { flex: 1 1 0; height: 30px; min-height: 30px; }
.vcd-scroll .vcp-lb__list { margin-top: 6px; }
.vcd-scroll .vcp-lb__row { grid-template-columns: 18px 7.3em minmax(0, 1fr) 4.4em; gap: 7px; height: 24px; font-size: 12px; }
.vcd-scroll .vcp-lb__rank { width: 18px; height: 18px; font-size: 10.5px; }
.vcd-scroll .vcp-rules__t { margin-bottom: 7px; font-size: 11px; }
.vcd-scroll .vcp-rules ul { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.vcd-scroll .vcp-rules li { font-size: 12.5px; }
.vcd-scroll .vcp-end { font-size: 14.5px; white-space: normal; }
.vcd-scroll .vcp-end span, .vcd-scroll .vcp-end em { display: block; }
@media (prefers-reduced-motion: reduce) { .vc-portal--side .vcd { animation: none; } }


.ac-crx { display: grid; gap: 18px; }
.ac-crx.has-ph { grid-template-columns: 240px minmax(0, 1fr); align-items: center; }
.ac-crx:not(.has-ph) > .vcph { display: none; }
.vcph { position: relative; min-width: 0; height: 488px; overflow: hidden; contain: layout paint; }
.vcph-stage { position: relative; width: 240px; height: 488px; }   /* 240 × 703 / 346 — mierka 0,694 */
.vcph-stage::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 226px; translate: -50% 0; border-radius: 36px; background: var(--ac-sk); }
.vcph-stage:has(.vcd)::before { content: none; }
.vcph .vcx-vcd { top: 0; transform: scale(var(--vcd-k, 0.69)); transform-origin: 0 0; }
.vcph .vcx-vcd .vcd-scroll { overscroll-behavior: contain; }
@media (max-width: 640px) {
  .ac-crx.has-ph { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vcph { height: 270px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .vcph-stage { width: 100%; height: 520px; }   /* mierka 0,74 podľa výšky, telefón v strede */
  .vcph-stage::before { width: 250px; }
  .vcph .vcx-vcd .vcd-scroll { overflow: hidden; }
  .ac-crx.has-ph > .ac-cr { position: relative; margin-top: -24px; }
}

.vcph { --vcx-tx: #f4f1ff; --vcx-tx2: #b3a9d6; --vcx-gold: #e8b85c; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd { --sw: 346px; --sh: 703px; left: calc((100% - var(--sw) * var(--vcd-k, 0.8)) / 2); animation: none; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-phone { left: 8px; top: 6px; transform: none; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-phone__flank,
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-floor,
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-phone__floor { display: none; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-key--side { right: -4px; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcd-key--cam { right: -4px; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd :is(.vcp-lb__t, .vcp-code__l) { text-transform: none; letter-spacing: 0; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcp-lb__t { font-size: 12px; color: #b3a9d6; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcp-code__l { font-size: 11.5px; letter-spacing: 0; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcp-rules { display: none; }
.vcp-head--pill { justify-content: flex-end; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcp-head--pill { margin: -2px 0 -4px; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-vcd .vcp-pill { height: 22px; padding: 0 9px; background: #2a1f52; color: #c9bcff; font-size: 11px; font-weight: 700; }
/* notifikácie na displeji telefónu: pod stavovým riadkom, najnovšia hore, prilietajú zhora */
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-pn { position: absolute; z-index: 6; top: 50px; left: 10px; right: 10px; display: grid; pointer-events: none; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-pn .vcx-nt { grid-area: 1 / 1; }   /* stará odchádza na tom istom mieste, nová prilieta zhora */
/* vo zmenšenom telefóne Safari sklo nerozmaže — plnšie pozadie, nech pod ním nepresvitá text portálu */
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-pn .vcx-nt { background: rgba(26,18,52,0.96); }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-pn .vcx-nt { animation: vcxPnIn 0.45s cubic-bezier(.2,.8,.3,1) both; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-pn .vcx-nt.is-out { animation: vcxNtOut 0.3s ease forwards; }
@keyframes vcxPnIn { from { opacity: 0; transform: translateY(-18px) scale(0.96); } to { opacity: 1; transform: none; } }
/* notifikácie ako na iOS: sklo, rádius 16, ikonka Veelyn vľavo */
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(20,14,40,0.75); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08); text-align: left; }
@keyframes vcxNtOut { to { opacity: 0; transform: translateY(-8px) scale(0.97); } }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt__i { width: 28px; height: 28px; border-radius: 8px; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt__t b { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--vcx-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt__s { font-size: 13px; font-weight: 800; line-height: 1.25; color: var(--vcx-gold); }
:is(#modal-affiliate.vcx-modal, .vcph) .vcx-nt__w { align-self: start; font-size: 11px; color: var(--vcx-tx2); }