/* Random VIP-BIO link – the generator itself (form, photos, three phones). Loaded by the public page /random and by the editor.
   Only colour tokens that both site.css and app.css define, so themes and palettes apply by themselves. */
.rn-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start;margin-top:30px}
.rn-form{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:12px 8px;text-align:left}
.rn-form>*{grid-column:1/-1;min-width:0}
.rn-form>.rn-f-name{grid-column:1}
.rn-form>.rn-f-age{grid-column:2}
.rn-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rn-form input[type=text]{width:100%;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:11px 13px;font:500 15px/1.2 var(--f-body);letter-spacing:0;text-transform:none}
.rn-drop{border:2px dashed var(--line);border-radius:16px;padding:20px 14px;text-align:center;color:var(--muted);background:transparent;cursor:pointer;font:600 15px/1.3 var(--f-body)}
.rn-drop:hover,.rn-drop.over{border-color:var(--coral);color:var(--ink)}
.rn-thumbs{display:flex;flex-wrap:wrap;gap:12px 10px}
.rn-thumbs:empty{display:none}
.rn-thumbs div{position:relative;width:72px;height:96px;border-radius:12px;background:var(--paper) center/cover;border:1px solid var(--line)}
.rn-thumbs button{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:#000;color:#fff;font-size:13px;line-height:22px;padding:0;cursor:pointer}
.rn-go{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;margin-top:4px;padding:0 20px;border:0;border-radius:999px;background:var(--coral);color:#fff;font:700 16px/1.1 var(--f-body);cursor:pointer}
.rn-go:disabled{opacity:.45;cursor:default}
.rn-hint{font-size:13px;color:var(--muted);margin:0}
.rn-form input.bad{border-color:#ef4444}
.rn-err{color:#ef4444;font-weight:600}
.rn-err[hidden]{display:none}
.rn-out{min-width:0}
.rn-out.is-on{display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:10px;justify-content:start;scroll-margin-top:110px}
.rn-empty{max-width:920px;box-sizing:border-box;display:flex;flex-direction:column;gap:22px;justify-content:center;min-height:420px;padding:34px 28px;color:var(--muted);text-align:center;border:2px dashed var(--line);border-radius:24px}
.rn-kick{font:800 26px/1.1 var(--f-disp);color:var(--ink);margin:0}
.rn-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;text-align:left}
.rn-steps li{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:18px}
.rn-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;font:800 16px/1 var(--f-disp)}
.rn-steps h3{font:800 18px/1.15 var(--f-disp);color:var(--ink);margin:12px 0 6px}
.rn-steps p{font-size:14px;line-height:1.45;margin:0;color:var(--muted)}
.rn-here{margin:0;font-size:14px}
.rn-var{text-align:center;padding:10px 10px 14px;border-radius:36px;border:3px solid transparent;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;min-width:0}
.rn-var:hover{border-color:rgba(34,197,94,.55)}
.rn-var.sel{border-color:#22c55e;background:rgba(34,197,94,.08);box-shadow:0 0 34px -8px rgba(34,197,94,.7)}
.rn-phone{position:relative;border-radius:28px;border:6px solid #000;background:#000;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;box-shadow:0 0 0 1px var(--line)}
.rn-phone::-webkit-scrollbar{display:none}
.rn-var small{display:block;margin:10px 0 8px;color:var(--muted);font-size:13px}
.rn-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rn-btns button{border-radius:999px;padding:9px 16px;font:600 14px/1 var(--f-body);cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);white-space:nowrap}
.rn-btns .rn-use{background:#1f8f4e;border-color:#1f8f4e;color:#fff}
.rn-btns .rn-use:hover{background:#19783f}
.rn-btns .rn-again:hover{border-color:var(--ink)}

/* inside the editor: the details on top in one wide box, the three phones under it */
.rn-stack{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:18px}
/* row 1: name, age, location · row 2: OnlyFans, Instagram and Telegram side by side · row 3: the button in the middle */
.rn-stack .rn-form{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.rn-stack .rn-form>.rn-f-name{grid-column:1/6}
.rn-stack .rn-form>.rn-f-age{grid-column:6/8}
.rn-stack .rn-form>.rn-f-loc{grid-column:8/13}
.rn-stack .rn-form>.rn-f-of{grid-column:1/5}
.rn-stack .rn-form>.rn-f-ig{grid-column:5/9}
.rn-stack .rn-form>.rn-f-tg{grid-column:9/13}
.rn-stack .rn-form>.rn-go{grid-column:1/-1;justify-self:center;min-width:min(100%,360px);margin:6px 0 0;min-height:50px}
/* inside the editor, under the generator: the three plans as cards in the look of the price list (picture, name, price, what is in it, button) */
.rn-upg{margin-top:36px}
.rn-upg-h{font:800 24px/1.15 var(--f-disp);color:var(--ink);margin:0 0 6px}
.rn-upg-l{margin:0 0 16px;font-size:14.5px;color:var(--muted)}
.rn-upg-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rn-uc{display:grid;grid-template-columns:118px minmax(0,1fr);overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--white);color:var(--ink);text-align:left;transition:border-color .15s,box-shadow .15s}
.rn-uc:hover{border-color:rgba(34,197,94,.55)}
.rn-uc>img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.rn-uc-b{display:flex;flex-direction:column;gap:9px;min-width:0;padding:16px}
.rn-uc-b h3{font:800 18px/1.15 var(--f-disp);margin:0}
.rn-uc-p{display:flex;align-items:baseline;gap:6px;font-size:13px;color:var(--muted)}
.rn-uc-p b{font:800 30px/1 var(--f-disp);color:var(--ink)}
.rn-uc ul{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:6px;font-size:13px;line-height:1.35;color:var(--muted)}
.rn-uc li{display:flex;gap:8px}
.rn-uc li::before{content:"✓";flex:none;color:var(--coral);font-weight:800}
.rn-uc-n{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted)}
.rn-uc .rn-uc-b>.btn,.rn-uc-own,.rn-uc-ask{margin-top:auto}
.rn-uc .btn{justify-content:center;text-align:center}
.rn-uc.is-own{border-color:#22c55e;box-shadow:0 0 30px -10px rgba(34,197,94,.75)}
.rn-uc-own{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;background:rgba(34,197,94,.14);color:#22c55e;font-weight:800}
.rn-uc.is-low{opacity:.5}
.rn-uc-ask{display:grid;gap:8px}
.rn-uc-ask>p:first-child{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.rn-uc-ask>div{display:flex;gap:8px;flex-wrap:wrap}
.rn-uc-ask .btn{flex:1 1 auto}
@media (max-width:1280px){.rn-upg-g{grid-template-columns:minmax(0,1fr)}}
.rn-stack .rn-out.is-on{justify-content:center}
.rn-stack .rn-empty{max-width:none;min-height:0}

/* public page /random on a wide screen (from 1560 px): the plans as a picker right next to the generator, so there is nothing left to scroll down to.
   A click marks a plan green and shows its button. Narrower screens keep the big plan cards below. */
.rn-pick{display:none}
/* public page on a computer: five boxes in one row – the form, three phones and the plans – from edge to edge of the page, with the same gap
   between all of them and the same top and bottom line. The phones keep the shape of a real phone; the form and the plans take the rest of the width. */
@media (min-width:981px){
  .rn-page .rn-grid{grid-template-columns:minmax(320px,1fr) minmax(0,1016px);gap:13px;align-items:stretch}
  .rn-page .rn-form{align-content:space-between}
  .rn-page .rn-out:not(.is-on){display:grid}
  .rn-page .rn-empty{min-height:0;max-width:none}
  /* a phone card has 13 px of air on each side, so cards without a gap stand 26 px apart – the same as from the form and from the plans */
  .rn-page .rn-out.is-on{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:-13px;margin-bottom:-17px}
}
@media (min-width:1560px){
  .rn-row{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,22%,460px);gap:13px;align-items:stretch}   /* the plans take about a fifth of the row */
  .rn-pick{display:flex;flex-direction:column;gap:12px;margin-top:30px;padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--white);text-align:left}
  .rn-pick[hidden],.rn-pick [hidden]{display:none}
  .rn-page .rn-plans{display:none}
  .rn-page .rn-pick .rn-pick-t{font:800 20px/1.15 var(--f-disp)!important;letter-spacing:0!important;color:var(--ink);margin:0!important}
  /* three small price cards in the look of the price list: picture on the left, name and a big price beside it. They share the height that is left. */
  .rn-pls{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0}
  .rn-pl{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr);flex:1 1 0;min-height:92px;width:100%;box-sizing:border-box;padding:0;overflow:hidden;border-radius:18px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
  .rn-pl-i{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
  .rn-pl-b{display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;padding:12px 14px}
  .rn-pl-n{font:800 16px/1.15 var(--f-disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rn-pl-p{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:12px;color:var(--muted)}
  .rn-pl-p b{font:800 25px/1 var(--f-disp);color:var(--ink)}
  .rn-pl-p i{font-style:normal}
  .rn-pl-f{align-self:flex-start;font-style:normal;font-size:11.5px;line-height:1;font-weight:700;color:#22c55e;padding:4px 8px;border-radius:999px;background:rgba(34,197,94,.12);white-space:nowrap}
  .rn-pl:hover{border-color:rgba(34,197,94,.55)}
  .rn-pl.is-sel{border-color:#22c55e;background:rgba(34,197,94,.1);box-shadow:0 0 28px -8px rgba(34,197,94,.75)}
  .rn-pl.is-sel::after{content:"✓";position:absolute;top:8px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#22c55e;color:#fff;font:800 13px/1 system-ui,sans-serif}
  /* what every plan has, said once */
  .rn-pick-inc{padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink)}
  .rn-pick-inc>b{font:800 14px/1.2 var(--f-disp)}
  .rn-pick .rn-pick-inc .checks{margin:9px 0 0;gap:7px;font-size:13px;line-height:1.35;color:var(--muted)}
  .rn-pick .rn-pick-inc .checks li{gap:9px}
  .rn-pick .rn-pick-inc .checks li::before{width:17px;height:17px;margin-top:1px}
  .rn-pick-b{display:grid;gap:8px}
  .rn-pick-b .rn-hint{text-align:center}
  .rn-pick-go{justify-content:center;text-align:center;min-height:48px;font-size:14.5px}
  .rn-pick-all{font-size:13px;color:var(--muted);text-align:center}
}
/* big screens (from 1700 px): the plans box is wider and everything in it larger */
@media (min-width:1700px){
  .rn-page .rn-pick .rn-pick-t{font-size:23px!important}
  .rn-pl{grid-template-columns:116px minmax(0,1fr);min-height:108px}
  .rn-pl-b{gap:7px;padding:12px 16px}
  .rn-pl-n{font-size:19px}
  .rn-pl-p{gap:7px;font-size:14px}
  .rn-pl-p b{font-size:33px}
  .rn-pl-f{font-size:13px;padding:5px 10px}
  .rn-pl.is-sel::after{top:10px;right:10px;width:26px;height:26px;font-size:15px}
  .rn-pick-inc{font-size:14.5px}
  .rn-pick-inc>b{font-size:16px}
  .rn-pick .rn-pick-inc .checks{font-size:14.5px}
  .rn-pick .rn-pick-inc .checks li::before{width:19px;height:19px}
  .rn-pick-b .rn-hint,.rn-pick-all{font-size:14px}
  .rn-pick-go{min-height:54px;font-size:16px}
}
@media (max-width:1100px){.rn-grid{grid-template-columns:300px minmax(0,1fr);gap:16px}.rn-stack{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){
  .rn-grid{grid-template-columns:minmax(0,1fr)}
  .rn-out.is-on{grid-template-columns:minmax(0,1fr);gap:18px;max-width:380px;margin:0 auto;scroll-margin-top:120px}
  .rn-empty{min-height:0;padding:24px 18px}
  .rn-steps{grid-template-columns:minmax(0,1fr)}
  .rn-stack .rn-form{grid-template-columns:minmax(0,1fr) 84px}
  .rn-stack .rn-form>*,.rn-stack .rn-form>.rn-f{grid-column:1/-1}
  .rn-stack .rn-form>.rn-f-name{grid-column:1}
  .rn-stack .rn-form>.rn-f-age{grid-column:2}
  .rn-stack .rn-form>.rn-go{grid-column:1/-1;justify-self:stretch;min-height:54px}
}
/* editor: a saved model picked on top fills the details */
.rn-model{border:1.5px solid #22c55e;background:rgba(34,197,94,.1);border-radius:14px;padding:10px 12px}
.rn-form .rn-model select{width:100%;box-sizing:border-box;background:var(--paper);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:9px 10px;font:600 15px/1.2 var(--f-body);letter-spacing:0;text-transform:none}
/* plány vpravo bez obrázkov na stránke /random (majiteľ 16. 10.: na užšom webe sa nezmestili; editor ich má ďalej) – celý názov a cena sa vždy zmestia */
.rn-page .rn-pl{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}.rn-page .rn-pl-i{display:none!important}
.rn-page .rn-pl-n{white-space:normal;overflow:visible}.rn-page .rn-pl-p{flex-wrap:wrap}
/* Odomkni VIP-BIO link (editor → Random): rovnako ako cenník – tmavá karta, malý obrázok hore, text pod ním; na celú šírku, v mobile pod sebou (majiteľ 16. 10.) */
.rn-upg{max-width:1180px;margin-left:auto;margin-right:auto}
.rn-upg-g{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))!important;gap:16px;align-items:stretch}
.rn-uc{display:flex!important;flex-direction:column;background:#0a0610!important;border-color:rgba(255,95,180,.35)!important;color:#f4f1f6!important;border-radius:22px}
.rn-uc>img{height:160px!important;width:100%;object-fit:cover;object-position:center 40%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.rn-uc-b{padding:12px 18px 18px!important;gap:10px!important;flex:1 1 auto}
.rn-uc-b h3{font-size:22px!important;color:#fff!important}
.rn-uc-p{color:#b9b0c6!important}.rn-uc-p b{font-size:36px!important;color:#fff!important}
.rn-uc ul{font-size:13.5px!important;color:#e9e4ef!important;gap:8px!important}
.rn-uc li::before{content:""!important;width:18px;height:18px;border-radius:50%;margin-top:1px;background:#ff2f9f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.rn-uc-n{color:#cfc8d9!important;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 12px}
.rn-uc .gift-b{background:#fde68a;color:#3a2a00;border-radius:12px;padding:8px 12px;font-weight:700;font-size:13px;margin:0}
.rn-uc .btn{min-height:46px;border-radius:999px}
.rn-uc .btn.coral{background:linear-gradient(105deg,#ff2f9f,#ff4fa3 60%,#ff6a8a)!important;color:#fff!important;border:0!important}
@media (max-width:760px){.rn-uc>img{height:140px!important}}
/* editor: „Uložiť modelku“ hneď vedľa „Shuffle all“ */
.rn-save{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1.5px solid var(--coral);border-radius:999px;background:transparent;color:inherit;font:700 16px/1 var(--f-body);cursor:pointer}
.rn-save:hover{background:rgba(255,47,159,.12)}
.rn-stack .rn-form:has(>.rn-save)>.rn-go{grid-column:1/7;justify-self:end;min-width:min(100%,300px)}
.rn-stack .rn-form>.rn-save{grid-column:7/-1;justify-self:start;margin:6px 0 0;min-width:min(100%,220px)}
@media (max-width:760px){.rn-stack .rn-form:has(>.rn-save)>.rn-go,.rn-stack .rn-form>.rn-save{grid-column:1/-1;justify-self:stretch}}