/* ============================================================================
   PRELAUNCH MODE — публичный landing (гость) / персональная страница ожидания.
   Композиция — по visual-эталону (mock/prelaunch-reference): 2-колоночный hero
   (большая C на светящейся платформе слева, заголовок+прогресс справа), единая
   полоса статистики с иконками, объединённая карточка профиль+реферал, новости,
   Telegram, футер. Всегда тёмный премиум-экран, НЕЗАВИСИМО от темы сайта.

   RWD (CLAUDE.md): desktop-first, брейкпоинты 1100/767/420 + ландшафт; резиновая
   сетка (grid + minmax/clamp), плавные размеры clamp()/vw. Анимации только
   compositor-friendly (transform/opacity), respect prefers-reduced-motion, без CLS.
   ========================================================================== */

.prelaunch{
  --pl-bg:#08080a;
  --pl-orange:#ff7a1a;
  --pl-orange-br:#ff9a3d;
  --pl-red:#ff5a00;
  --pl-ink:#f4f5f7;
  --pl-muted:rgba(255,255,255,.60);
  --pl-faint:rgba(255,255,255,.38);
  --pl-card:rgba(255,255,255,.038);
  --pl-card-2:rgba(255,255,255,.055);
  --pl-bd:rgba(255,255,255,.085);
  --pl-radius:20px;
  --pl-maxw:1160px;

  position:fixed; inset:0; z-index:2147483000;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  color:var(--pl-ink);
  background:
    radial-gradient(60% 50% at 20% 16%, rgba(255,110,20,.22) 0%, rgba(255,80,10,.05) 40%, transparent 68%),
    radial-gradient(50% 40% at 92% 30%, rgba(255,120,30,.06) 0%, transparent 60%),
    linear-gradient(180deg,#0b0908 0%, var(--pl-bg) 44%, #050505 100%);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.prelaunch, .prelaunch *, .prelaunch *::before, .prelaunch *::after{ box-sizing:border-box; }

/* Центрированная колонка контента + safe-area со всех сторон (iOS/PWA standalone). */
.pl-shell{
  width:100%; max-width:var(--pl-maxw); margin:0 auto;
  padding:
    calc(env(safe-area-inset-top,0px) + clamp(18px,3vw,30px))
    calc(env(safe-area-inset-right,0px) + clamp(16px,3.5vw,34px))
    calc(env(safe-area-inset-bottom,0px) + clamp(22px,4vw,40px))
    calc(env(safe-area-inset-left,0px) + clamp(16px,3.5vw,34px));
  position:relative; /* контекст для плавающего .pl-exit */
  display:flex; flex-direction:column; gap:clamp(14px,2vw,20px);
}

/* Логаут/вход — компактный плавающий control в углу (НЕ отдельная верхняя панель). */
.pl-exit{
  position:absolute; z-index:6;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:calc(env(safe-area-inset-right,0px) + clamp(14px,3.5vw,30px));
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  color:var(--pl-muted); font-size:13.5px; font-weight:600;
  padding:7px 12px; border-radius:999px; border:1px solid var(--pl-bd); background:rgba(255,255,255,.04);
  transition:color .15s, border-color .15s, background .15s;
}
.pl-exit:hover{ color:var(--pl-ink); border-color:rgba(255,122,26,.5); background:var(--pl-card-2); }

/* ── HERO: 2 колонки на десктопе ── */
.pl-hero{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:center; gap:clamp(16px,3vw,40px);
  padding:clamp(10px,2.4vw,24px) 0 clamp(4px,1.5vw,14px);
}
.pl-hero__art{
  position:relative; justify-self:center;
  width:clamp(200px,26vw,340px); aspect-ratio:1/1; display:grid; place-items:center;
}
/* Большая C — SHARED ANIMATION PRIMITIVE экрана обновления (.clike-update-loader из assets/clike-update.css):
   дуги clike-ring-cw/ccw + пульс clike-logo-pulse + радиальное свечение .clike-update-logo::before.
   Здесь задаём ТОЛЬКО размер/позицию (разрешено отличаться): контейнер резиновый, а фикс-px inset
   логотипа переводим в проценты, чтобы примитив масштабировался под hero-арт. Анимацию НЕ дублируем. */
.pl-hero__loader.clike-update-loader{ width:100%; height:100%; }
.pl-hero__loader .clike-update-logo{ inset:16%; }        /* 50/220 базы → крупнее для hero (C заметнее) */
.pl-hero__loader .clike-update-logo::before{ inset:-10%; }

.pl-hero__intro{ min-width:0; }
/* Заголовок: на desktop одной строкой (кегль подобран под ширину intro-колонки). «Clike» — оранжевый,
   «.ru скоро откроется!» — белое (по разметке .ru вне accent-span). */
.pl-title{ margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.08; color:#fff;
  font-size:clamp(26px,3.6vw,44px); white-space:nowrap; }   /* desktop — гарантированно одна строка (mobile ниже переносит) */
.pl-title__accent{ color:var(--pl-orange); }
/* Три предложения: desktop — три ровные строки (по одной на предложение, небольшой одинаковый gap);
   mobile — широкий контейнер, естественный перенос. Не жирный. */
.pl-sub{ margin:clamp(10px,1.4vw,16px) 0 0; max-width:64ch; color:var(--pl-muted); font-size:clamp(13.5px,1.15vw,15px); line-height:1.45; font-weight:400; }
.pl-sub p{ margin:0; }
.pl-sub p + p{ margin-top:.3em; }

.pl-progress{ margin-top:clamp(16px,2vw,24px); max-width:560px; }
.pl-progress__label{ color:var(--pl-muted); font-size:14px; }
.pl-progress__num{ margin-top:4px; font-weight:800; font-size:clamp(30px,4.4vw,46px); line-height:1; color:var(--pl-orange); }
.pl-bar{ margin-top:12px; height:12px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.06); }
.pl-bar__fill{ height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--pl-red),var(--pl-orange),var(--pl-orange-br));
  box-shadow:0 0 16px rgba(255,120,30,.5); transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.pl-status{ margin:12px 0 0; max-width:52ch; color:var(--pl-muted); font-size:14px; line-height:1.5; }

/* CTA (гость) */
.pl-cta{ margin-top:clamp(16px,2vw,22px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
/* Гостевая CTA — только layout (ширина/отступы); ВНЕШНИЙ ВИД даёт canonical .ds-auth-primary
   (assets/ds/components/ds-auth-primary.css) — тот же CTA-паттерн, что submit на странице регистрации. */
.pl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 28px;
  text-decoration:none; cursor:pointer; }
.pl-cta .pl-btn{ min-width:min(280px,100%); }

/* ── Универсальная карточка ── */
.pl-card{ border-radius:var(--pl-radius); background:var(--pl-card); border:1px solid var(--pl-bd);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:clamp(14px,1.8vw,20px); }

/* ── Единая инфо-карточка: 3 колонки (аккаунт | участники | баланс). Без аватара и раннего номера. ── */
.pl-info{ display:flex; align-items:center; gap:clamp(8px,1.6vw,20px); }
.pl-info__col{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:clamp(7px,1vw,11px); }
.pl-info__col--user{ display:block; }
.pl-info__name{ font-weight:600; font-size:clamp(15px,1.6vw,17px); color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-info__mail{ margin-top:4px; color:#8fe0a6; font-size:12.5px; font-weight:400; }
.pl-info__ico{ flex:0 0 auto; width:clamp(22px,2.4vw,28px); height:clamp(22px,2.4vw,28px); color:var(--pl-orange); opacity:.9; }
.pl-info__ico svg{ width:100%; height:100%; }
.pl-info__b{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.pl-info__num{ font-weight:600; font-size:clamp(16px,2vw,22px); line-height:1.15; color:#fff; letter-spacing:-.01em; overflow-wrap:anywhere; }
.pl-info__num--accent{ color:var(--pl-orange); }
.pl-info__lbl{ color:var(--pl-muted); font-size:clamp(10.5px,1.1vw,12px); line-height:1.25; font-weight:400; }
.pl-info__lbl-short{ display:none; }   /* короткая подпись включается на мобиле, чтобы 3 колонки влезли в одну строку */
.pl-info__sep{ flex:0 0 auto; width:1px; height:34px; align-self:center; background:rgba(255,255,255,.09); }

.pl-ref__h{ font-weight:500; font-size:clamp(14px,1.5vw,16px); color:var(--pl-ink); line-height:1.35; }
.pl-ref__h b{ color:var(--pl-orange); font-weight:700; }
.pl-ref__label{ margin:10px 0 6px; color:var(--pl-muted); font-size:12.5px; font-weight:400; }
.pl-ref__row{ display:flex; gap:8px; align-items:stretch; }
.pl-ref__input{ flex:1 1 0; min-width:0; width:100%; height:38px; padding:0 12px; border-radius:10px; background:rgba(0,0,0,.28); border:1px solid var(--pl-bd); color:var(--pl-ink); font-size:13.5px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Кнопка «Скопировать» — компактная, вторичная относительно ссылки. */
/* Копирование ссылки — тот же CTA-язык, что .ds-auth-primary (оранжевый градиент, pill-radius, белый
   текст), но компактнее (secondary внутри карточки). Геометрия ЗАФИКСИРОВАНА: min-width под более
   длинный текст «✓ Скопировано», поэтому success-state меняет ТОЛЬКО цвет/текст, не размер/позицию. */
.pl-ref__copy{ flex:0 0 auto; min-width:148px; height:40px; padding:0 16px; border-radius:999px; cursor:pointer; border:0;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; box-sizing:border-box;
  font-weight:700; font-size:14px; color:#fff; background:linear-gradient(140deg,#ff8a3d,var(--ds-brand-1,#e8651c));
  box-shadow:0 6px 20px rgba(232,101,28,.32); transition:filter .15s, background .2s; }
.pl-ref__copy:hover{ filter:brightness(1.04); } .pl-ref__copy:active{ filter:brightness(.98); }
.pl-ref__copy.is-done{ background:#2f9e44; color:#fff; box-shadow:0 6px 20px rgba(47,158,68,.3); }   /* success: меняются ТОЛЬКО цвет+текст */
.pl-ref__stats{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--pl-muted); font-size:13px; font-weight:400; }
.pl-ref__stat{ display:inline-flex; align-items:center; gap:7px; } .pl-ref__stats b{ color:var(--pl-ink); font-weight:600; }
.pl-ref__ico{ width:16px; height:16px; color:var(--pl-orange); } .pl-ref__ico svg{ width:100%; height:100%; }

/* Новости */
.pl-news__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pl-news__h{ font-weight:700; font-size:clamp(16px,1.9vw,19px); color:#fff; }
.pl-news__all{ flex:0 0 auto; text-decoration:none; color:var(--pl-ink); font-size:13px; font-weight:600; padding:7px 14px; border-radius:10px; border:1px solid var(--pl-bd); background:var(--pl-card-2); transition:border-color .15s; }
.pl-news__all:hover{ border-color:rgba(255,122,26,.5); }
.pl-news__list{ display:flex; flex-direction:column; gap:14px; }
.pl-news__item{ display:flex; gap:14px; }
.pl-news__cover{ position:relative; flex:0 0 auto; width:clamp(84px,10vw,120px); aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.05); }
.pl-news__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-news__cover--empty{ background:linear-gradient(135deg,rgba(255,120,30,.14),rgba(255,255,255,.03)); }
.pl-news__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; display:grid; place-items:center; font-size:11px; padding-left:2px; }
.pl-news__body{ min-width:0; align-self:center; }
.pl-news__title{ font-weight:700; font-size:15px; color:#fff; line-height:1.3; }
.pl-news__text{ margin-top:5px; color:var(--pl-muted); font-size:13.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pl-news__date{ margin-top:7px; color:var(--pl-faint); font-size:12.5px; }
.pl-news__empty{ color:var(--pl-faint); font-size:14px; }

/* Telegram — desktop: ОДНА горизонтальная строка (лого+текст слева, синяя кнопка справа по центру
   по вертикали). Mobile — колонкой: текст сверху, кнопка по центру (ниже). */
.pl-tg{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pl-tg__top{ display:flex; align-items:center; gap:13px; flex:1 1 auto; min-width:0; }
.pl-tg__icon{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,#2aabee,#229ed9); color:#fff; }
.pl-tg__icon svg{ width:23px; height:23px; }
.pl-tg__meta{ min-width:0; } .pl-tg__title{ display:block; font-weight:600; font-size:clamp(14.5px,1.5vw,16px); color:#fff; } .pl-tg__sub{ display:block; margin-top:2px; color:var(--pl-muted); font-size:13px; font-weight:400; }
/* Кнопка того же тона, что и Telegram-лого; белый текст; компактная; без стрелки; по центру по вертикали справа. */
.pl-tg__btn{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px; border-radius:12px; font-weight:600; font-size:14px; color:#fff; background:#229ed9; text-decoration:none; transition:filter .15s; white-space:nowrap; }
.pl-tg__btn:hover{ filter:brightness(1.07); } .pl-tg__btn:active{ transform:translateY(1px); }

/* Футер */
.pl-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-top:6px; padding-top:8px; }
.pl-foot__c{ color:var(--pl-faint); font-size:13px; }
.pl-foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.pl-foot__nav a{ color:var(--pl-muted); font-size:13px; text-decoration:none; } .pl-foot__nav a:hover{ color:var(--pl-ink); }

/* ── Entrance stagger ── */
.pl-anim{ opacity:0; transform:translateY(14px); animation:plRise .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:var(--pl-d,0ms); }
/* Анимация самой C (кольца/пульс/свечение) — общий примитив clike-update.css, здесь НЕ объявляется.
   Осталась только entrance-анимация появления блоков (plRise). */
@keyframes plRise{ to{ opacity:1; transform:none; } }

/* ── Брейкпоинты ── */
@media (max-width:900px){
  /* Hero → одна колонка, C сверху, всё по центру. Компактнее по вертикали. */
  .pl-shell{ gap:12px; }
  .pl-hero{ grid-template-columns:1fr; text-align:center; gap:4px; padding:6px 0 2px; }
  .pl-hero__art{ width:clamp(150px,46vw,230px); }
  .pl-title{ white-space:normal; }   /* mobile — заголовок переносится естественно */
  /* Текст hero на mobile — ОДИН непрерывный цельный текст: предложения-<p> идут инлайн, без
     межабзацных отступов и без forced-переносов; браузер переносит строки только по ширине.
     (Desktop не трогаем — там <p> остаются блоками = 3 аккуратные строки.) Почти на всю ширину,
     спокойный кегль/line-height, по центру. */
  .pl-sub{ margin:12px auto 0; max-width:100%; padding:0 8px; font-size:14px; line-height:1.55; }
  .pl-sub p{ display:inline; margin:0; }
  .pl-sub p + p{ margin-top:0; }
  .pl-sub p + p::before{ content:" "; }   /* переносимый пробел между предложениями (в разметке пробела нет) */
  .pl-progress{ margin:14px auto 0; }
  .pl-cta{ justify-content:center; }
  .pl-cta .pl-btn{ flex:1 1 auto; }
  /* Telegram — колонкой: текст сверху, кнопка по центру карточки. */
  .pl-tg{ flex-direction:column; align-items:stretch; gap:14px; }
  .pl-tg__top{ justify-content:flex-start; }
  .pl-tg__btn{ align-self:center; }
}
@media (max-width:767px){
  .pl-card{ padding:16px; }
  .pl-info__lbl{ font-size:11.5px; }
  .pl-info__sep{ height:30px; }
  .pl-ref__label{ margin:10px 0 6px; }
  .pl-ref__stats{ margin-top:12px; }
}
@media (max-width:520px){
  /* Инфо-карточка на узком экране: ОСТАЁТСЯ одной строкой из 3 колонок (аккаунт | участники | баланс).
     Компактный кегль/иконки/подписи + min-width:0 → влезает в 390px без горизонтального скролла. */
  .pl-card{ padding:13px; }
  .pl-info{ gap:8px; }
  .pl-info__col{ gap:6px; }
  .pl-info__ico{ width:20px; height:20px; }
  .pl-info__b{ gap:0; }
  .pl-info__num{ font-size:17px; }
  .pl-info__lbl{ font-size:10.5px; line-height:1.2; }
  .pl-info__lbl-full{ display:none; }   /* короткие подписи «уже с нами» / «Clike Coins» */
  .pl-info__lbl-short{ display:inline; }
  .pl-info__name{ font-size:14px; }
  .pl-info__mail{ margin-top:2px; font-size:10.5px; }
  .pl-info__sep{ height:32px; }
}
@media (max-width:420px){
  .prelaunch{ --pl-radius:16px; }
  .pl-shell{ gap:10px; }
  .pl-hero__art{ width:clamp(140px,44vw,200px); }
  .pl-ref__copy{ padding:0 12px; }
  .pl-title{ font-size:clamp(26px,8vw,34px); }
  /* ещё плотнее для 3-колоночной инфо-карточки на самых узких экранах */
  .pl-info{ gap:6px; }
  .pl-info__num{ font-size:16px; }
  .pl-info__ico{ width:18px; height:18px; }
}
/* Совсем узкие экраны (<340px): referral-строка стеком, чтобы ничего не обрезалось. */
@media (max-width:339px){
  .pl-ref__row{ flex-direction:column; } .pl-ref__copy{ width:100%; }
}
@media (orientation:landscape) and (max-height:560px){
  .pl-hero{ grid-template-columns:0.8fr 1.2fr; text-align:left; }
  .pl-hero__art{ width:clamp(120px,22vh,180px); }
}

/* ── Доступность: гасим движение ── */
@media (prefers-reduced-motion:reduce){
  .prelaunch *{ animation:none !important; }
  .pl-anim{ opacity:1 !important; transform:none !important; }
  .pl-bar__fill{ transition:none !important; }
}