:root{
  --bg:#06070d; --card:rgba(16,18,34,.62); --muted:rgba(255,255,255,.60);
  --text:rgba(255,255,255,.94); --accent:#8b5cf6; --accent2:#7c3aed;
  --ok:#34d399; --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%,rgba(139,92,246,.16),transparent 55%),
    radial-gradient(ellipse 90% 70% at 100% 15%,rgba(236,72,153,.06),transparent 58%);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
/* Подвал прижат к низу экрана: на коротких вкладках кабинета он иначе
   зависал посреди пустоты, и страницы выглядели по-разному. */
.wrap{max-width:760px;margin:0 auto;padding:0 18px 24px;
  min-height:100dvh;display:flex;flex-direction:column}
.wrap>.foot{margin-top:auto}
/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:32px;height:32px;border-radius:9px}
.brand b{font-size:17px;letter-spacing:-.02em}
a.login{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 14px;border-radius:10px;border:1px solid var(--border)}
a.login:hover{color:var(--text);background:rgba(255,255,255,.04)}
/* герой */
.hero{text-align:center;padding:34px 0 8px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  border:1px solid var(--border);background:rgba(255,255,255,.03);padding:6px 12px;border-radius:999px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
h1{font-size:clamp(27px,6vw,40px);line-height:1.12;letter-spacing:-.035em;margin:18px 0 12px;font-weight:800}
.lead{color:var(--muted);font-size:16px;margin:0 auto;max-width:520px}
/* кнопки */
.btn{display:block;text-align:center;text-decoration:none;font-weight:650;font-size:15px;
  padding:15px 20px;border-radius:14px;border:1px solid var(--border);color:var(--text);
  background:rgba(255,255,255,.05);transition:background .18s ease,transform .12s ease}
.btn:hover{background:rgba(255,255,255,.09)}
.btn:active{transform:scale(.99)}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:transparent;color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.cta{margin:26px auto 0;max-width:420px}
/* карточки-фичи */
.feats{margin:34px 0 0;border:1px solid var(--border);background:var(--card);border-radius:18px;overflow:hidden}
.feat{display:flex;gap:14px;padding:18px 16px;align-items:flex-start}
.feat+.feat{border-top:1px solid var(--border)}
.feat .ic{font-size:20px;line-height:1.2}
.feat b{display:block;font-size:15px;margin-bottom:3px}
.feat span{color:var(--muted);font-size:13px}
/* секции */
section{margin-top:52px}
h2{font-size:24px;letter-spacing:-.03em;margin:0 0 6px;text-align:center;font-weight:800}
.sub{color:var(--muted);font-size:14px;text-align:center;margin:0 0 22px}
/* тарифы */
.plans{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.plan{display:block;text-decoration:none;color:var(--text);border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:18px 16px;transition:border-color .18s,transform .12s,background .18s}
.plan:hover{border-color:rgba(139,92,246,.5);background:rgba(124,58,237,.10)}
.plan:active{transform:scale(.99)}
.plan .name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.plan .price{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.plan .per{display:block;font-size:12px;color:var(--muted)}
.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(52,211,153,.16);color:var(--ok);padding:3px 7px;border-radius:6px}
/* шаги */
.steps{counter-reset:s;display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:16px}
.step .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;background:rgba(139,92,246,.18);color:#c4b5fd}
.step b{display:block;font-size:15px;margin-bottom:3px}
.step span{color:var(--muted);font-size:13px}
/* faq */
details{border:1px solid var(--border);background:var(--card);border-radius:14px;padding:0 16px;margin-bottom:10px}
summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:400;font-size:19px;line-height:1}
details[open] summary::after{content:"−"}
details p{margin:0 0 15px;color:var(--muted);font-size:14px}
/* подвал */
.foot{margin-top:52px;padding-top:22px;padding-bottom:8px;border-top:1px solid var(--border);text-align:center;
  color:rgba(255,255,255,.38);font-size:13px}
.foot a{color:rgba(255,255,255,.55);text-decoration:none;margin:0 7px}
.foot a:hover{color:var(--text)}
.tgline{margin-top:30px;text-align:center;color:var(--muted);font-size:14px}
.tgline a{color:#a78bfa;text-decoration:none}
/* статьи + оферта */
.doc{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:22px 20px;margin-top:18px}
.doc h3{margin:26px 0 8px;font-size:17px;letter-spacing:-.02em}
.doc h3:first-child{margin-top:0}
.doc p,.doc li{color:var(--muted);font-size:14px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--border);padding:8px 10px;text-align:left;white-space:nowrap}
.doc th{color:var(--text);font-weight:600}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.tabs a{font-size:13px;padding:9px 14px;border-radius:11px;border:1px solid var(--border);
  color:var(--muted);text-decoration:none}
.tabs a.on{background:rgba(124,58,237,.18);border-color:rgba(139,92,246,.45);color:var(--text)}
.crumbs{color:var(--muted);font-size:13px;margin-top:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.card-link{display:block;text-decoration:none;border:1px solid var(--border);background:var(--card);
  border-radius:16px;padding:18px;margin-top:14px;color:var(--text)}
.card-link:hover{border-color:rgba(139,92,246,.45)}
.card-link b{display:block;font-size:16px;margin-bottom:6px}
.card-link span{color:var(--muted);font-size:13px}
.card-link .meta{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.38)}
@media (max-width:520px){.wrap{padding:0 14px 60px}.feat{padding:15px 13px}}
.fld{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--border);
  background:#0f1120;color:var(--text);font-size:15px;font-family:inherit}
.fld:focus{outline:none;border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.fld::placeholder{color:rgba(255,255,255,.30)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.choice label{display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:block;text-align:center;padding:14px 10px;border-radius:13px;
  border:1px solid var(--border);background:var(--card);font-size:14px;font-weight:600}
.choice input:checked+span{border-color:rgba(139,92,246,.6);background:rgba(124,58,237,.16)}
.plan.on{border-color:rgba(139,92,246,.6);background:rgba(124,58,237,.14)}

/* ── выбор тарифа с кружком (как на референсе) ── */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pgrid .wide,.pgrid .trial{grid-column:1 / -1}
.pcard{position:relative;display:block;cursor:pointer;border:1px solid var(--border);
  background:var(--card);border-radius:16px;padding:16px 44px 16px 16px;
  transition:border-color .16s,background .16s}
.pcard input{position:absolute;opacity:0;pointer-events:none}
.pcard .dot{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);transition:border-color .16s}
.pcard .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .16s}
.pcard input:checked~.dot{border-color:var(--accent)}
.pcard input:checked~.dot::after{transform:scale(1)}
.pcard:has(input:checked),.pcard.on{border-color:var(--accent);background:rgba(124,58,237,.14)}
.pcard .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.pcard .v{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.pcard .m{display:block;font-size:12px;color:var(--muted);line-height:1.35}
.pcard.trial:has(input:checked),.pcard.trial.on{border-color:var(--ok);background:rgba(52,211,153,.12)}
.pcard.trial input:checked~.dot{border-color:var(--ok)}
.pcard.trial input:checked~.dot::after{background:var(--ok)}
/* сводка */
.sum{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:18px 16px;margin-top:14px}
.sum .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum .row+.row{margin-top:8px}
.sum .row b{font-size:16px}
.sum .row .big{font-size:22px;font-weight:800;letter-spacing:-.03em}
.sum .row span{color:var(--muted);font-size:14px}
.sum .hint{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.sum ul{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--border);padding-top:14px}
.sum li{position:relative;padding-left:18px;font-size:14px;color:var(--muted);margin-bottom:8px}
.sum li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sum .btn{margin-top:16px}
.paynote{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
.paynote a{color:#a78bfa;text-decoration:none}
@media (min-width:700px){
  .wrap{max-width:860px}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pgrid .wide{grid-column:auto}
}

/* ── кабинет ── */
.lkhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0 6px;border-bottom:1px solid var(--border);margin-bottom:16px}
.lkhead .who{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lktabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.lktabs::-webkit-scrollbar{display:none}
.lktabs a{flex:0 0 auto;font-size:14px;padding:9px 16px;border-radius:999px;text-decoration:none;
  border:1px solid var(--border);color:var(--muted);background:var(--card)}
.lktabs a.on{background:#fff;color:#0d0f1a;border-color:#fff;font-weight:600}
.pane{border:1px solid var(--border);background:var(--card);border-radius:18px;padding:18px 16px;margin-bottom:14px}
.pane h3{margin:0 0 6px;font-size:17px;letter-spacing:-.02em}
.pane p{margin:0 0 12px;color:var(--muted);font-size:14px}
.pane p:last-child{margin-bottom:0}
.stat{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:650;margin-bottom:4px}
.stat i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.stat.off i{background:#f0a58a}
.linkbox{display:block;width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--border);
  background:#0f1120;color:var(--muted);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:10px 0}
.dev{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
.dev:first-of-type{border-top:0}
.dev .ic{font-size:20px;flex:0 0 auto}
.dev .mid{flex:1;min-width:0}
.dev b{display:block;font-size:14px;font-weight:600}
.dev span{display:block;font-size:12px;color:var(--muted)}
.dev .rm{flex:0 0 auto;font-size:13px;color:#f0a58a;text-decoration:none;padding:7px 12px;
  border:1px solid rgba(240,165,138,.32);border-radius:10px;background:none;cursor:pointer;font-family:inherit}
.dev .rm:hover{background:rgba(240,165,138,.10)}
.pay-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 0;border-top:1px solid var(--border)}
.pay-row:first-of-type{border-top:0}
.pay-row .l b{display:block;font-size:14px}
.pay-row .l span{font-size:12px;color:var(--muted)}
.pay-row .r{font-size:15px;font-weight:700;white-space:nowrap}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mini a{display:block;text-decoration:none;border:1px solid var(--border);background:rgba(255,255,255,.03);
  border-radius:13px;padding:13px;text-align:center;color:var(--text)}
.mini a:hover{border-color:rgba(139,92,246,.5)}
.mini a b{display:block;font-size:13px;color:var(--muted);font-weight:500}
.mini a span{display:block;font-size:18px;font-weight:800;margin-top:3px}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:22px 0}
.wrap a.login,.wrap a.login:hover{text-decoration:none}

/* ── шапка вошедшего: почта + аватар вместо «Войти» ── */
a.me{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);
  font-size:13px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--border);
  max-width:60vw}
a.me:hover{color:var(--text);background:rgba(255,255,255,.04)}
a.me .ava{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent2),var(--accent))}
a.me .mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){a.me .mail{display:none}a.me{padding:5px;border-color:transparent}}
/* ── профиль: пара «ключ — значение» и список сессий ── */
.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0 0;border-top:1px solid var(--border);font-size:14px}
.kv span{color:var(--muted)}
.kv b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slist{margin-top:4px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--border)}
.srow b{font-size:14px;font-weight:600}
.srow .tag{margin-left:8px;vertical-align:middle}
.srow span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* ── поддержка: отдельная страница ── */
.sup-top{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:2px;padding:18px 0 14px}
.sup-ava{width:52px;height:52px;border-radius:50%;margin-bottom:8px}
.sup-top b{font-size:17px;letter-spacing:-.02em}
.sup-top span{color:var(--muted);font-size:13px}
/* ── чат ── */
.chat-pane{display:flex;flex-direction:column;padding:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--border)}
.chat-head b{font-size:15px}
.chat-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.chat-dot.off{background:rgba(255,255,255,.28)}
.chat-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;display:flex;flex-direction:column;gap:3px}
.msg.op{align-self:flex-start}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg-who{font-size:12px;color:var(--muted)}
.msg-who i{font-style:normal;opacity:.7;margin-left:4px}
.msg-txt{padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;border:1px solid var(--border);background:var(--card)}
.msg.me .msg-txt{background:rgba(124,58,237,.22);border-color:rgba(139,92,246,.4)}
.msg-img{display:block;max-width:240px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.msg-img img{display:block;width:100%;height:auto}
/* «печатает…» — три точки, как в мессенджере */
.msg.typing .msg-txt{display:flex;gap:4px;align-items:center;padding:13px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:typedot 1.2s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.18s}
.msg.typing i:nth-child(3){animation-delay:.36s}
@keyframes typedot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);align-items:center}
.chat-form .fld{flex:1 1 auto}
.chat-clip{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:17px;opacity:.75}
.chat-clip:hover{opacity:1;background:rgba(255,255,255,.05)}
.chat-send{flex:0 0 auto;width:46px;height:42px;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:18px;cursor:pointer}
.chat-send:hover{filter:brightness(1.08)}
.chat-preview{position:relative;margin:0 16px 12px;display:inline-block;max-width:150px}
.chat-preview img{display:block;width:100%;border-radius:12px;border:1px solid var(--border)}
.chat-preview button{position:absolute;top:-7px;right:-7px;width:23px;height:23px;border-radius:50%;
  border:1px solid var(--border);background:#12141f;color:var(--text);cursor:pointer;
  font-size:14px;line-height:1;padding:0}
.chat-foot{margin:0;padding:0 16px 14px;text-align:center;color:rgba(255,255,255,.38);font-size:12px}

/* Экран поддержки: фиксированная высота и БЕЗ прокрутки страницы — иначе при
   открытии клавиатуры уезжает вся вёрстка. Скроллится только лента сообщений.

   Две переменные из JS (visualViewport):
     --vvh   — высота ВИДИМОЙ области; 100dvh при поднятой клавиатуре врёт;
     --vvtop — на сколько Safari прокрутил окно, чтобы показать поле ввода.
   Без --vvtop контейнер остаётся приклеенным к верху окна, а видимая область
   уходит ниже него — на экране пусто. Сдвигаем содержимое следом за ней. */
html.sup-html,body.sup-page{height:100%;overflow:hidden;overscroll-behavior:none}
body.sup-page{position:fixed;top:0;left:0;right:0}
body.sup-page .wrap{height:var(--vvh,100dvh);display:flex;flex-direction:column;
  padding:0 14px;max-width:760px;
  /* min-height от общего .wrap (прижатый подвал) не даёт странице сжаться под
     клавиатуру — здесь он вреден, поле ввода уезжало под неё. */
  min-height:0;
  transform:translateY(var(--vvtop,0px));will-change:transform}
body.sup-page .sup-top{flex:0 0 auto}
body.sup-page .chat-pane{flex:1 1 auto;min-height:0;margin-bottom:12px}
@media (max-width:520px){
  body.sup-page .sup-top{padding:14px 0 10px}
  body.sup-page .chat-pane{margin-bottom:0;border-radius:18px 18px 0 0;border-bottom:none}
}
/* Клавиатура съедает половину экрана: сворачиваем шапку, чтобы место досталось
   переписке, а не логотипу. Класс вешает JS, когда видимая область укоротилась. */
body.sup-page.kb-open .sup-ava{display:none}
body.sup-page.kb-open .sup-top{padding:8px 0 6px;gap:0}
body.sup-page.kb-open .sup-top b{font-size:15px}
body.sup-page.kb-open .sup-top span{display:none}
body.sup-page.kb-open .chat-head{padding:9px 16px}
body.sup-page.kb-open .chat-foot{padding-bottom:8px}
/* Домашняя полоса на айфоне перекрывала нижний край поля ввода. */
body.sup-page .chat-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
body.sup-page.kb-open .chat-foot{padding-bottom:8px}

/* ── привязка Telegram ── */
.btn.tg{background:#2ea6ff;border-color:transparent;color:#fff}
.btn.tg:hover{background:#3fb0ff}
/* Подписи под кнопками стоят просторно: впритык они читались как обрезок
   самой кнопки, а не как отдельная строка. */
/* Селекторы с .pane: правило `.pane p` специфичнее одного класса и обнуляло
   margin — подписи прилипали к кнопке вплотную. */
.pane .gift,.gift{margin:34px 0 0;text-align:center;font-size:15px;font-weight:800;
  color:#ff6b6b}
.pane .hint,.hint{margin:22px 0 0;text-align:center;font-size:13px;color:var(--muted);
  line-height:1.55}
.pane .gift + .hint{margin-top:16px}
.lines{line-height:1.6}

/* ── друзья: уровни и ссылки ── */
.reflink{margin-top:14px}
.reflab{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.reflink .linkbox{margin:0 0 8px}
.reflink .btn{padding:11px 14px;font-size:14px}
.pnote{margin:10px 0 0;font-size:13px;color:var(--muted)}
.tiers{display:grid;gap:8px;margin-top:12px}
.tier{border:1px solid var(--border);background:rgba(255,255,255,.02);
  border-radius:13px;padding:11px 13px}
.tier.on{border-color:rgba(139,92,246,.55);background:rgba(124,58,237,.14)}
.tier b{display:block;font-size:14px}
.tier span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.tier i{display:block;font-style:normal;font-size:13px;color:#c4b5fd;margin-top:5px}
/* Длинные строки не должны рваться посреди слова или висеть на тире. */
.pane p,.tier span,.frow b,.hint{overflow-wrap:break-word;hyphens:none}