/* ============================================================
   МИНИ-АПП ПОД САЙТ ghostlink.online

   Один в один по языку: аврора вместо чёрного, палитра сайта,
   прозрачные поверхности с волосяной гранью, Inter и Benzin.

   Планеты и вращающийся глобус убраны совсем — у тарифов остаются
   название, цена и состав, как на витрине сайта.

   Подключается последней строкой перед </body>. Откат — снять её.
   ============================================================ */

@font-face{font-family:Inter;src:url('Inter-400-cyrillic.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('Inter-500-cyrillic.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('Inter-700-cyrillic.woff2') format('woff2');font-weight:700;font-display:swap}

:root {
  --gl-ink:#eef2ff; --gl-soft:#c6d1f0; --gl-mut:#9fabd6;
  --gl-deep:#0a1028; --gl-glow:#d6e1f8;
  --gl-line:rgba(238,242,255,.14);
  --gl-line-soft:rgba(238,242,255,.09);
  --gl-hi:rgba(238,242,255,.45);
  --gl-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- фон ---------- */

html, body {
  background:#04081a !important;
  color:var(--gl-ink) !important;
}
body { font-family:'Inter',system-ui,sans-serif; }

/* Аврора сайта: вращающаяся сетка, пять плывущих пятен, косой блик.
   Разметка .gl-aurora добавлена первой строкой внутри body. */
.gl-aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(125% 95% at 50% -10%,#111c45 0%,#0a1028 42%,#04081a 100%)}
.gl-aurora i{position:absolute;display:block;
  border-radius:44% 56% 62% 38% / 52% 44% 56% 48%;filter:blur(80px)}
.gl-aurora .a1{width:max(62vw,54vh);height:max(56vw,48vh);top:-18vh;left:-8vw;
  background:radial-gradient(circle at 50% 50%,rgba(214,225,248,.38),rgba(214,225,248,0) 68%);
  animation:glP1 37s ease-in-out infinite,glCW 71s linear infinite,glBrA 19s ease-in-out infinite}
.gl-aurora .a2{width:max(52vw,46vh);height:max(52vw,46vh);top:14vh;right:-14vw;
  background:radial-gradient(circle at 50% 50%,rgba(72,96,172,.62),rgba(72,96,172,0) 66%);
  animation:glP2 43s ease-in-out infinite,glCCW 89s linear infinite,glBrB 23s ease-in-out infinite}
.gl-aurora .a3{width:max(56vw,48vh);height:max(46vw,40vh);bottom:-16vh;left:6vw;
  background:radial-gradient(circle at 50% 50%,rgba(143,168,255,.34),rgba(143,168,255,0) 68%);
  animation:glP3 31s ease-in-out infinite,glCW 61s linear infinite,glBrA 17s ease-in-out infinite}
.gl-aurora .a4{width:max(34vw,30vh);height:max(34vw,30vh);top:38vh;left:32vw;
  background:radial-gradient(circle at 50% 50%,rgba(238,242,255,.24),rgba(238,242,255,0) 65%);
  animation:glP4 29s ease-in-out infinite,glCCW 53s linear infinite,glBrB 29s ease-in-out infinite}
.gl-aurora .a5{width:max(46vw,40vh);height:max(42vw,36vh);bottom:4vh;right:2vw;
  background:radial-gradient(circle at 50% 50%,rgba(72,96,172,.48),rgba(72,96,172,0) 66%);
  animation:glP5 47s ease-in-out infinite,glCW 79s linear infinite,glBrA 21s ease-in-out infinite}
.gl-aurora b{position:absolute;inset:-45%;display:block;filter:blur(70px);
  background:conic-gradient(from 0deg at 50% 50%,rgba(72,96,172,0) 0deg,
    rgba(185,200,238,.16) 62deg,rgba(72,96,172,0) 128deg,rgba(238,242,255,.12) 196deg,
    rgba(72,96,172,0) 258deg,rgba(143,168,255,.15) 318deg,rgba(72,96,172,0) 360deg);
  animation:glCW 97s linear infinite}
.gl-aurora u{position:absolute;display:block;left:-25%;top:6vh;width:150%;height:34vh;
  rotate:-19deg;filter:blur(55px);
  background:linear-gradient(90deg,rgba(220,230,250,0),rgba(220,230,250,.22),rgba(220,230,250,0));
  animation:glSheen 41s ease-in-out infinite alternate}

@keyframes glP1{0%{translate:0 0}13%{translate:11vw 7vh}29%{translate:-8vw 16vh}41%{translate:17vw -5vh}58%{translate:-13vw -9vh}73%{translate:5vw 19vh}87%{translate:-16vw 3vh}100%{translate:0 0}}
@keyframes glP2{0%{translate:0 0}17%{translate:-15vw 12vh}31%{translate:6vw 24vh}49%{translate:-21vw -7vh}63%{translate:9vw -16vh}81%{translate:-6vw 9vh}100%{translate:0 0}}
@keyframes glP3{0%{translate:0 0}19%{translate:18vw -11vh}34%{translate:-7vw -22vh}52%{translate:24vw 6vh}71%{translate:-14vw 12vh}89%{translate:8vw -6vh}100%{translate:0 0}}
@keyframes glP4{0%{translate:0 0}21%{translate:-19vw -14vh}38%{translate:14vw -25vh}57%{translate:26vw 11vh}76%{translate:-11vw 18vh}100%{translate:0 0}}
@keyframes glP5{0%{translate:0 0}14%{translate:9vw -17vh}33%{translate:-18vw -6vh}47%{translate:-4vw 14vh}66%{translate:15vw 9vh}84%{translate:-12vw -12vh}100%{translate:0 0}}
@keyframes glCW{to{rotate:360deg}}
@keyframes glCCW{to{rotate:-360deg}}
@keyframes glBrA{0%,100%{scale:1}37%{scale:1.24}68%{scale:.84}}
@keyframes glBrB{0%,100%{scale:1.06}44%{scale:.82}79%{scale:1.28}}
@keyframes glSheen{0%{translate:-14vw 0;opacity:.55}100%{translate:14vw 4vh;opacity:.9}}

/* Звёздное поле рисовалось под чёрный — на авроре оно лишнее. */
.noise { display:none !important; }

/* ---------- убираем планеты и глобус ---------- */

.globe-video,
.tariff-planet,
.plan-art,
.stat-art,
.plan-detail-image,
.plan-detail-space { display:none !important; }

/* Шторка подключения: кнопка закрытия и полоска-ручка были чёрно-серыми
   от прежней темы. */
.sheet-close {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
}
.handle { background:var(--gl-line) !important; }

/* Блок под глобус убираем совсем: без планеты это была пустая дыра
   на треть экрана. */
.balance-space { display:none !important; }

/* Плитку «Eclipse · Текущий тариф» оставляем — её просили вернуть. */

/* ---------- тарифы ----------
   Сетка держала колонку 104 px под спрятанную планету, и весь текст
   уезжал вправо — отсюда и «сломанный» вид. Колонку убираем. */

.tariff {
  grid-template-columns:minmax(0,1fr) !important;
  padding:20px !important;
}
.tariff-orbit { display:none !important; }
.tariff-inner { min-width:0 !important; }

/* Длинное название не должно вылезать за кнопку. */
.btn, .primary, button, .pill, .plan-pill {
  min-width:0;
  overflow-wrap:anywhere;
}

/* ---------- поверхности: как на сайте ----------
   Заливок нет, форму держит волосяная грань. */

.plan-tile,
.dashboard-link,
.acc-card,
.referral-panel,
.quick-tile,
.tariff {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  border-radius:22px !important;
  transition:border-color .3s ease;
}
.plan-tile:hover,
.dashboard-link:hover,
.quick-tile:hover,
.tariff:hover { border-color:rgba(238,242,255,.3) !important; }

.acc-avatar,
.profile-mark,
.promo,
.referral-promo,
.currency-inline,
.tariff-currency,
.quick-ico {
  background:transparent !important;
  border:1px solid var(--gl-line-soft) !important;
}

/* ---------- кнопки ---------- */

.home-actions .primary,
.home-actions .primary.topup-main,
.home-actions .connect-main,
.referral-actions button,
.promo button,
.referral-promo button,
.currency-options button,
.plan-pill,
.pill,
.acc-follow {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
  box-shadow:none !important;
  transition:border-color .25s ease;
}
.home-actions .primary:hover,
.referral-actions button:hover,
.promo button:hover,
.currency-options button:hover,
.plan-pill:hover,
.pill:hover { border-color:var(--gl-hi) !important; }

/* Главное действие отличается яркостью грани, а не заливкой. */
.home-actions .primary.connect-main,
.referral-actions button:first-child,
.plan-pill.active,
.preview-plan-switcher .active,
.currency-options button[aria-pressed="true"] {
  border-color:var(--gl-hi) !important;
  color:var(--gl-ink) !important;
  background:transparent !important;
}

.preview-plan-switcher {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
}

/* ---------- панель и шторки ---------- */

.nav, .cosmic-nav {
  background:rgba(10,16,40,.5) !important;
  border:1px solid var(--gl-line) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.sheet {
  background:rgba(10,16,40,.92) !important;
  border-top:1px solid var(--gl-line) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.sheet-wrap, .currency-gate {
  background:rgba(4,8,26,.78) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.toast {
  background:rgba(10,16,40,.92) !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
}
.toast::before { background:transparent !important; }

.acc-banner, .onboarding, .onboarding-wrap, .channel-gate {
  background:radial-gradient(125% 95% at 50% -10%,#111c45 0%,#0a1028 42%,#04081a 100%) !important;
}
.channel-gate-inner .primary {
  background:transparent !important;
  border:1px solid var(--gl-hi) !important;
  color:var(--gl-ink) !important;
}

/* ---------- график ---------- */

.usage-chart i{background-image:linear-gradient(180deg,#8ea8ff 0%,rgba(72,96,172,.3) 100%) !important}
.usage-chart i.is-peak{background-image:linear-gradient(180deg,#dce7ff 0%,rgba(142,168,255,.45) 100%) !important}
.usage-chart i.is-today{background-image:linear-gradient(180deg,#b9ccff 0%,rgba(72,96,172,.4) 100%) !important}

/* ---------- подписи ---------- */

.acc-handle, .acc-status { color:var(--gl-mut) !important; }
hr, [class*="divider"], [class*="separator"] {
  border-color:var(--gl-line-soft) !important;
  background:var(--gl-line-soft) !important;
}

/* ---------- загрузочный экран ---------- */

.loader { background:radial-gradient(125% 95% at 50% -10%,#111c45 0%,#0a1028 42%,#04081a 100%) !important; }
.loader img {
  content:url('star.png');
  width:min(190px,46vw) !important;
  height:auto !important;
  filter:drop-shadow(0 0 48px rgba(142,168,255,.55)) !important;
  animation:glStarIn 1.15s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes glStarIn{
  from{opacity:0;translate:0 -34vh;scale:.82;rotate:-16deg;filter:blur(10px)}
  55%{opacity:1}
  to{opacity:1;translate:0 0;scale:1;rotate:0deg;filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .gl-aurora i,.gl-aurora b,.gl-aurora u,.loader img{animation:none !important}
}

/* ---------- текст ----------
   Подписи были серыми от прежней чёрной темы. На авроре им нужен
   наш светлый, иначе читаются тускло. */

.tariff, .tariff *,
.plan-tile, .plan-tile *,
.dashboard-link, .dashboard-link *,
.acc-card, .acc-card *,
.referral-panel, .referral-panel *,
.quick-tile, .quick-tile * {
  color:var(--gl-ink) !important;
}
.tariff-note, .tariff-sub, .acc-handle, .acc-status,
[class*="caption"], [class*="hint"], [class*="muted"] {
  color:var(--gl-mut) !important;
}

/* ---------- кнопки с палитрой ----------
   Как на сайте: по грани медленно вращается цветовое кольцо, свечение
   заперто внутри рамки через overflow. */

.quick-tile {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.quick-tile::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:conic-gradient(from var(--gl-ang,0deg),
    #3b53a0 0deg,#8ea8ff 95deg,#b9c8ee 165deg,#6f8ede 245deg,#3b53a0 360deg);
  filter:blur(7px);
  opacity:.55;
  animation:glSpin 9s linear infinite;
  transition:opacity .3s ease;
}
.quick-tile:hover::before { opacity:.9; }

@property --gl-ang { syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes glSpin { to { --gl-ang:360deg } }

/* Без поддержки @property кольцо просто стоит на месте — не мигает. */
@supports not (background:conic-gradient(from var(--gl-ang,0deg),#000,#fff)) {
  .quick-tile::before { display:none }
}

/* ---------- скругления ----------
   Кнопки круглее: пилюля вместо скруглённого прямоугольника. */

.btn, button, .primary, .quick-tile, .pill, .plan-pill,
.referral-actions button, .promo button, .currency-options button {
  border-radius:999px !important;
}
.plan-tile, .dashboard-link, .acc-card, .referral-panel, .tariff {
  border-radius:26px !important;
}

/* ---------- палитра у каждой кнопки своя ----------
   Как на сайте: цвета и направление вращения различаются, иначе ряд
   кнопок выглядит штампованным. */

.quick-tile:nth-child(1)::before {
  background:conic-gradient(from var(--gl-ang,0deg),
    #2f4a96 0deg,#8ea8ff 100deg,#cfdcff 180deg,#5b7fd0 260deg,#2f4a96 360deg);
  animation:glSpin 9s linear infinite;
}
.quick-tile:nth-child(2)::before {
  background:conic-gradient(from var(--gl-ang,0deg),
    #1f6f74 0deg,#7fe3dd 90deg,#bfeeea 170deg,#3f9aa0 250deg,#1f6f74 360deg);
  animation:glSpinBack 11s linear infinite;
}
.quick-tile:nth-child(3)::before {
  background:conic-gradient(from var(--gl-ang,0deg),
    #6b4bb0 0deg,#b79cff 95deg,#ddd0ff 175deg,#8464d4 255deg,#6b4bb0 360deg);
  animation:glSpin 13s linear infinite;
}
.quick-tile:nth-child(4)::before {
  background:conic-gradient(from var(--gl-ang,0deg),
    #9a6a20 0deg,#f5c274 95deg,#ffe4bd 175deg,#c08c3a 255deg,#9a6a20 360deg);
  animation:glSpinBack 10s linear infinite;
}

@keyframes glSpinBack { to { --gl-ang:-360deg } }

/* ---------- график ----------
   Ровный переход от светлого к нашему синему, у пикового дня свой
   оттенок — раньше все столбики были на одно лицо. */

.usage-chart i {
  background-image:linear-gradient(180deg,#b9ccff 0%,#5b7fd0 55%,rgba(72,96,172,.22) 100%) !important;
  border-radius:999px !important;
}
.usage-chart i.is-peak {
  background-image:linear-gradient(180deg,#eef2ff 0%,#8ea8ff 55%,rgba(142,168,255,.28) 100%) !important;
}
.usage-chart i.is-today {
  background-image:linear-gradient(180deg,#d6e1f8 0%,#6f8ede 55%,rgba(72,96,172,.26) 100%) !important;
}

/* ============================================================
   ЗАВЕРШАЮЩИЙ ПРОХОД

   Списки собраны разбором самой дизайн-системы: выбраны все правила
   с тёмной и со светлой заливкой. Раньше я правил по одному классу и
   всё время пропускал те, что живут в шторках — они появляются в
   разметке только при открытии, и в браузере их не видно.
   ============================================================ */

/* ---------- всё тёмное → прозрачное с гранью ---------- */

.avatar, .notification-button,
.stat, .list, .list-icon, .earning-list,
.account-orbit-card, .account-card-foot i,
.secondary, .period, .sheet-metric, .device-row, .choice-group,
.hub-summary, .hub-limit, .app-open, .client-hero, .guide-step,
.app-logo, .notification-item,
.currency-gate-inner,
.referral-code-line, .referral-star,
.plan-capabilities>div, .traffic-mode-card,
.server-chip, .server-chip-more,
.connection-plan-hero,
.client-clean-mark, .client-clean-status,
.traffic-usage-line,
.legal-document-view #legal-back,
.current-plan-view #tariff-change,
.devices-card, .devices-connect,
.payment-method {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
}

/* ---------- всё белое → прозрачное с яркой гранью ----------
   Белая заливка выбивалась пятном: на сайте главное действие
   отличается яркостью грани, а не цветом фона. */

.traffic-tariffs-pill,
.connection-guide-pill,
.period.selected,
.tariff-detail-view .period.selected,
.sheet .period.selected,
.acc-follow,
.app-open.recommended,
.currency-inline button.active,
.preview-plan-switcher button.active,
.notification-item>span,
#notification-support,
.period-save {
  background:transparent !important;
  border:1px solid var(--gl-hi) !important;
  color:var(--gl-ink) !important;
  box-shadow:none !important;
}

/* Активная вкладка нижней панели: подсветка гранью, не заливкой. */
.cosmic-nav button.active, .nav button.active {
  background:transparent !important;
  border:1px solid var(--gl-hi) !important;
  color:var(--gl-ink) !important;
}

/* ---------- остатки планет и космической графики ----------
   Планеты просили убрать везде, не только у тарифов. */

.space-planet, .space-planet:before, .space-planet:after,
.earth-surface, .earth-axis:before, .earth-axis:after,
.referral-orbit i,
.device-summary-shape,
.connection-plan-hero img,
.connection-plan-hero:after,
.balance-space:after,
.plan-tile .stat-icon:after,
.tariff-planet:before, .tariff-planet:after,
.plan-detail-space>i,
.toast:before {
  display:none !important;
}

/* ---------- скругления в шторках ---------- */

.secondary, .period, .sheet-metric, .device-row, .choice-group,
.hub-summary, .app-open, .client-hero, .guide-step,
.server-chip, .server-chip-more, .payment-method,
.traffic-tariffs-pill, .connection-guide-pill, .acc-follow,
.devices-connect {
  border-radius:999px !important;
}

.traffic-mode-card, .plan-capabilities>div, .devices-card,
.account-orbit-card, .notification-item, .list, .referral-code-line {
  border-radius:26px !important;
}

/* ---------- поля ввода ---------- */

input, textarea, select {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
  border-radius:999px !important;
}
input::placeholder, textarea::placeholder { color:var(--gl-mut) !important; }

/* ---------- пустой столбик графика ---------- */

.usage-chart i.is-empty {
  background-image:linear-gradient(180deg,rgba(238,242,255,.16) 0%,rgba(238,242,255,.04) 100%) !important;
}

/* Сумма баланса — это число, а не кнопка: рамка ей не нужна. */
.wallet-amount {
  background:transparent !important;
  border:none !important;
}

/* Точка-маркер в списке операций осталась тёмной — ревизия нашла. */
.operations-card .tx:before {
  background:var(--gl-line) !important;
}

/* ============================================================
   ЧИТАЕМОСТЬ ТЕКСТА

   Собрано обходом: подписи в теме были почти чёрными (#050505,
   #555, #666) — на прежнем фоне они и задумывались тусклыми, а на
   авроре просто пропадают.
   ============================================================ */

/* Стрелку перебивало правило .home-actions .connect-main .arrow —
   оно сильнее по специфичности, поэтому целимся так же. */
.arrow,
.payment-method-arrow,
.connect-main .arrow,
.home-actions .connect-main .arrow,
.home-actions .primary .arrow {
  color:var(--gl-ink) !important;
  opacity:1 !important;
}

/* Дни недели под графиком. */
.usage-axis span { color:var(--gl-soft) !important; }

/* Переключатель валют: невыбранные читаемы, выбранная — ярче всех. */
.currency-inline button,
.tariff-currency button { color:var(--gl-mut) !important; }
.currency-inline button.active,
.tariff-currency button.active {
  color:var(--gl-ink) !important;
  border-color:var(--gl-hi) !important;
}

/* Прочие приглушённые подписи. */
.stat-label, .eyebrow, .group-title, .counter,
.payment-method-copy span,
.channel-gate-number,
.preview-plan-switcher span,
.tariff-note, .sheet-metric-label {
  color:var(--gl-mut) !important;
}

/* ---------- белая точка-выделение ----------
   Кружок рядом с ACTIVE и в пилюле тарифа: белое пятно, которое
   просили убрать. */
.pill .dot, .plan-pill .dot { display:none !important; }

/* ---------- название тарифа крупнее ---------- */
.plan-pill {
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  padding:10px 20px !important;
}

/* ---------- тарифы: убрать пустоту ----------
   Карточка держала высоту под планету 208 px. Без неё остаётся
   воздух, которого никто не просил. */
.tariff {
  min-height:0 !important;
  align-items:start !important;
}
.tariff-inner { padding:0 !important; }
.tariff-headline { margin-bottom:8px !important; }

/* Фон-иллюстрация в шапке аккаунта: там просвечивал Eclipse. */
.acc-banner {
  background:transparent !important;
  border:none !important;
}

/* Едущий указатель в переключателе валют был белой заливкой — под ним
   пропадал текст выбранной валюты. Оставляем только грань. */
.currency-inline:before,
.tariff-currency:before {
  background:transparent !important;
  border:1px solid var(--gl-hi) !important;
  box-shadow:none !important;
}

/* ============================================================
   ВНУТРЕННОСТИ ШТОРОК

   Здесь я долго промахивался. Эти кнопки и карточки заданы во
   встроенном <style> внутри index.html, а не в дизайн-системе,
   и половина из них вообще без классов — поэтому разбор
   orbit-system.css их не находил.

   Целимся по месту: всё, что лежит внутри .sheet.
   ============================================================ */

.sheet button,
.sheet .primary,
.sheet .secondary,
.sheet input,
.sheet .payment-rate-note,
.sheet [class*="card"],
.sheet [class*="note"],
.sheet [class*="field"],
.sheet [class*="amount"],
.sheet [class*="option"] {
  background:transparent !important;
  border:1px solid var(--gl-line) !important;
  color:var(--gl-ink) !important;
  box-shadow:none !important;
}

/* Главное действие шторки — ярче гранью. */
.sheet .primary { border-color:var(--gl-hi) !important; }

/* Стрелка внутри шторки. */
.sheet .arrow { color:var(--gl-ink) !important; }

/* Подписи внутри шторок. */
.sheet p, .sheet span, .sheet small { color:var(--gl-soft) !important; }
.sheet [class*="label"], .sheet [class*="hint"], .sheet [class*="rate"] {
  color:var(--gl-mut) !important;
}

/* ---------- отдельные пожелания ---------- */

/* Пилюлю с названием тарифа просили мельче. */
.plan-pill {
  font-size:12px !important;
  padding:8px 16px !important;
}

/* Плитку с названием тарифа возвращаем — просили оставить рядом. */
.stat.plan-tile { display:flex !important; }

/* Политика, соглашение, поддержка — площе, не пилюли. */
.quick-tile { border-radius:18px !important; }

/* Чёрная карточка с планетой в шапке аккаунта. */
.account-orbit-card,
.acc-banner,
.acc-card .plan-art,
.account-card-foot i {
  background:transparent !important;
  border:none !important;
}

/* ============================================================
   ДОРАБОТКА

   1. Блоки «0 / 7» и «Eclipse» стояли с прямыми углами и гранью —
      это и были те самые белые квадраты по бокам. Углы им никто не
      скруглял: в моём списке скруглений .stat не было.

   2. У чётных карточек тарифа стояли row-reverse и text-align:right,
      поэтому Orbit смотрел влево, Nova вправо, Eclipse снова влево.
      Приводим все к одной стороне.
   ============================================================ */

.stat, .stat.plan-tile {
  border:none !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.04) !important;
}

/* Все тарифы смотрят в одну сторону.

   Направление строки задаём только заголовку. Раньше я поставил
   flex-direction:row на все элементы карточки разом — и состав у
   чётных тарифов рассыпался в строку вместо столбика. */
.tariff,
.tariff-inner,
.tariff:nth-child(even),
.tariff:nth-child(even) .tariff-inner {
  text-align:left !important;
  direction:ltr !important;
}
.tariff-headline,
.tariff:nth-child(even) .tariff-headline {
  flex-direction:row !important;
}

/* Заголовок карточки: название слева, цена справа — у всех одинаково. */
.tariff-headline {
  display:flex !important;
  justify-content:space-between !important;
  align-items:baseline !important;
}

/* Список внутри карточки — столбиком, по левому краю. */
.tariff-inner ul,
.tariff-inner .tariff-features,
.tariff-features {
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
}

/* Строки состава шли лесенкой: контейнер выравнивал каждую по-своему.
   Прижимаем всё к левому краю. */
.tariff-description {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  text-align:left !important;
  padding-left:0 !important;
  margin-left:0 !important;
  text-indent:0 !important;
}
.tariff-description > * { display:block !important; }

/* Лесенку делал не отступ, а transform: translateX у каждой строки —
   декоративный приём .tariff-contour. Снимаем сдвиг. */
.tariff-contour,
.tariff-contour *,
.tariff-description * {
  transform:none !important;
  translate:none !important;
}

/* ============================================================
   ДОРАБОТКА ПО СНИМКАМ
   ============================================================ */

/* Значок планеты в плитке тарифа — просили убрать. */
.stat-icon { display:none !important; }

/* ---------- шторка пополнения: меньше рамок ----------
   Там было три вложенных кадра подряд: карточка вокруг суммы,
   карточка вокруг подсказки и кнопка. Рамки оставляем только тому,
   что нажимают, — поле, суммам и кнопке. */

.sheet [class*="card"],
.sheet [class*="note"],
.sheet [class*="rate"],
.sheet [class*="group"],
.sheet [class*="box"] {
  background:transparent !important;
  border:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------- политика, соглашение, поддержка ----------
   Все синие, но кольцо у каждой крутится по-своему: своя начальная
   точка и своя сторона вращения. Один цвет — разное движение. */

.quick-tile::before {
  background:conic-gradient(from var(--gl-ang,0deg),
    #2f4a96 0deg,#8ea8ff 100deg,#cfdcff 180deg,#5b7fd0 260deg,#2f4a96 360deg) !important;
  opacity:.5;
}
.quick-tile:nth-child(1)::before { animation:glSpin 9s linear infinite !important }
.quick-tile:nth-child(2)::before { animation:glSpinBack 11s linear infinite !important }
.quick-tile:nth-child(3)::before { animation:glSpin 13s linear infinite reverse !important }
.quick-tile:nth-child(4)::before { animation:glSpinBack 10s linear infinite !important }

/* ---------- реферальный код ----------
   Код вылезал за рамку: длинная строка в узкой пилюле. */

.referral-code-line {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  padding:12px 16px !important;
  border-radius:18px !important;
}
.referral-code-line * {
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  font-size:14px !important;
}

/* Обе кнопки рефералки одного размера и формы. */
.referral-actions { display:flex !important; gap:8px !important; }
.referral-actions button {
  flex:1 1 0 !important;
  min-width:0 !important;
  padding:12px 14px !important;
  border-radius:999px !important;
  white-space:nowrap !important;
}

/* ---------- аватар в шапке профиля ---------- */
.acc-avatar, .profile-mark, .avatar {
  display:none !important;
}

/* ---------- переход между экранами ----------
   Экраны переключаются через display:none, поэтому плавно увести
   уходящий нельзя — анимируем приходящий. Свойства transform и
   opacity у .view.active заданы с !important, поэтому двигаем через
   translate и filter: их правило не занимает. */

.view.active {
  animation:glViewIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes glViewIn {
  from { translate:26px 0; filter:blur(6px) }
  to   { translate:0 0;    filter:blur(0) }
}

@media (prefers-reduced-motion:reduce){
  .view.active { animation:none }
}

/* ============================================================
   ПРОФИЛЬ, МЕНЮ И ПЕРЕХОД
   ============================================================ */

/* Затмение в шапке профиля. Это <img> без единого класса внутри
   .acc-banner — поэтому все правила по .plan-art мимо него и летели.
   Убираем и картинку, и пустую полосу 150 px, которая под ней
   оставалась белым пятном. */

.acc-banner,
.acc-banner img {
  display:none !important;
}

/* ---------- имя тарифа крупнее и жирнее ---------- */

.plan-pill {
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  padding:10px 20px !important;
}

/* ---------- нижнее меню: прозрачное и белое ----------
   Было синеватым от --gl-deep. Теперь светлое стекло. */

.nav, .cosmic-nav {
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

/* Выбранная вкладка: подсветка мягкая, переход плавный —
   не щелчок, а переезд, как у вкладок на странице входа. */
.nav button, .cosmic-nav button {
  transition:background .35s var(--gl-ease), border-color .35s var(--gl-ease),
             color .3s ease, scale .3s var(--gl-ease) !important;
}
.nav button.active, .cosmic-nav button.active {
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  color:#ffffff !important;
  scale:1.04;
}

/* ---------- переход между экранами ----------

   Без fill-mode: both. Это важно. С ним элемент до запуска анимации
   держит состояние «from» — сдвинутый и размытый, — и если анимация
   почему-то не стартовала, экран так и остаётся мутным и съехавшим.
   Выглядит как «вкладка не открывается». Без заливки состояния экран
   в худшем случае просто появится без анимации.

   Размытие убрано и из движения блоков: filter:blur на больших
   контейнерах дорого считается на телефоне. */

.view.active {
  animation:glViewIn .42s cubic-bezier(.22,1,.36,1);
}
@keyframes glViewIn {
  from { translate:28px 0; opacity:.35 }
  to   { translate:0 0;    opacity:1 }
}

.view.active > * {
  animation:glItemIn .4s cubic-bezier(.22,1,.36,1);
}
.view.active > *:nth-child(1){animation-delay:.03s}
.view.active > *:nth-child(2){animation-delay:.08s}
.view.active > *:nth-child(3){animation-delay:.13s}
.view.active > *:nth-child(4){animation-delay:.18s}
.view.active > *:nth-child(5){animation-delay:.23s}

@keyframes glItemIn {
  from { translate:0 12px; opacity:0 }
  to   { translate:0 0;    opacity:1 }
}

/* ---------- едущая подложка в меню ----------
   Как вкладки «Вход / Регистрация» на странице входа: подложка
   переезжает к нажатой вкладке с лёгким перелётом, а не переключается
   щелчком. Три вкладки — шаг в треть ширины. */

.nav, .cosmic-nav { position:relative; }

.nav::before, .cosmic-nav::before {
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  left:6px;
  width:calc((100% - 12px) / 3);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  translate:calc(var(--gl-tab,0) * 100%) 0;
  transition:translate .52s cubic-bezier(.34,1.42,.44,1);
  pointer-events:none;
  z-index:0;
}

.nav button, .cosmic-nav button {
  position:relative;
  z-index:1;
  background:transparent !important;
  border:1px solid transparent !important;
}
.nav button.active, .cosmic-nav button.active {
  background:transparent !important;
  border-color:transparent !important;
  color:#ffffff !important;
  scale:1;
}

@media (prefers-reduced-motion:reduce){
  .view.active, .view.active > *, .nav::before, .cosmic-nav::before { animation:none !important }
}
/* Какая вкладка выбрана — узнаём через :has, без единой строчки
   скрипта. Если браузер :has не понимает, подложка просто стоит
   на первой вкладке и ничего не ломается. */
.nav:has(button:nth-of-type(1).active),
.cosmic-nav:has(button:nth-of-type(1).active) { --gl-tab:0 }
.nav:has(button:nth-of-type(2).active),
.cosmic-nav:has(button:nth-of-type(2).active) { --gl-tab:1 }
.nav:has(button:nth-of-type(3).active),
.cosmic-nav:has(button:nth-of-type(3).active) { --gl-tab:2 }

@supports not selector(:has(*)) {
  .nav::before, .cosmic-nav::before { display:none }
  .nav button.active, .cosmic-nav button.active {
    background:rgba(255,255,255,.14) !important;
    border-color:rgba(255,255,255,.28) !important;
  }
}

/* --- хаб подключения: планета скрыта, шапка не должна держать её высоту --- */
.connection-plan-hero{height:auto!important;min-height:0!important;padding:0!important;margin:0 0 18px!important;overflow:visible!important}
.connection-plan-copy{position:static!important;inset:auto!important;padding:0!important;display:flex;flex-direction:column;gap:4px}
.connection-plan-copy span{font-size:11px;letter-spacing:.16em;opacity:.6}
.connection-plan-copy h2{margin:0!important;font-size:30px;line-height:1.05}
/* Заголовок плана — это подпись, а не кнопка: грань ему не нужна. */
.sheet .connection-plan-hero{border:none!important;box-shadow:none!important}

/* Значок приложения задан во встроенном <style> селектором из двух классов,
   поэтому одного .app-logo не хватает — целимся длиннее. */
.sheet .connection-hub .app-logo{
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;flex:0 0 44px!important;
  border-radius:14px!important;border:1px solid var(--gl-line)!important;
  background:rgba(255,255,255,.05)!important;font-size:13px!important;font-weight:700!important}

/* ============================================================
   ПЕРВЫЙ ЗАПУСК

   Экран знакомства остался от чёрной темы: текст прижат влево,
   гигантский номер шага набран Benzin — ноль читается как «O»,
   а кнопка «Пропустить» висела мелким серым в углу.

   Приводим к сайту: одна колонка по центру, номер шага — мелкая
   разряжённая подпись, кнопка-пилюля прозрачная.
   ============================================================ */

.onboarding-wrap,
.onboarding {
  background:radial-gradient(120% 78% at 50% -18%,#0d1533 0%,#080d22 46%,#04081a 100%) !important;
}

.onboarding {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}

.onboarding-stage {
  width:100%;
  max-width:420px;
  margin:0 auto;
  align-items:center !important;
  text-align:center !important;
}

/* Номер шага: подпись, а не заголовок. */
.onboarding-mark {
  margin:0 0 18px !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.34em !important;
  text-indent:.34em;
  color:var(--gl-mut) !important;
}

.onboarding h2 {
  margin:0 auto 14px !important;
  max-width:none !important;
  font-size:clamp(26px,7.4vw,34px) !important;
  line-height:1.14 !important;
}

.onboarding-copy {
  max-width:340px !important;
  margin:0 auto !important;
  font-size:13px !important;
  line-height:1.66 !important;
  color:var(--gl-soft) !important;
}

.onboarding-footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:420px;
  margin:0 auto;
}

.onboarding-dots {
  justify-content:center !important;
  margin:0 0 18px !important;
}
.onboarding-dots i { background:rgba(238,242,255,.22) !important; }
.onboarding-dots i.active { background:var(--gl-ink) !important; }

.onboarding .primary {
  width:100%;
  justify-content:center;
  background:transparent !important;
  border:1px solid var(--gl-hi) !important;
  color:var(--gl-ink) !important;
  box-shadow:none !important;
}

.onboarding-skip { display:none !important; }

/* ============================================================
   КАРТОЧКА АККАУНТА

   Кнопку «Продлить» держало absolute + top:164px — отсчёт шёл от
   баннера с планетой. Баннер убран, карточка стала ниже, и кнопку
   срезало по overflow:hidden: наружу торчала белая полоска.

   Ставим карточку в поток: колонка, кнопка последняя.
   ============================================================ */

.acc-card {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:16px !important;
  padding:20px !important;
  overflow:visible !important;
}

.acc-body { padding:0 !important; }

.acc-follow {
  position:static !important;
  inset:auto !important;
  order:9;
  align-self:flex-start;
  padding:12px 26px !important;
  border-radius:999px !important;
}

/* ============================================================
   ПЛИТКИ «ПОЛИТИКА / СОГЛАШЕНИЕ / ПОДДЕРЖКА»

   Кольцо я собрал размытым пятном под плиткой (blur + z-index:-1),
   и оно не обводило, а заливало её синим — на фоне остальных
   прозрачных поверхностей плитки выбивались цветным блоком.

   Настоящее кольцо: градиент по краю через mask-composite.
   ============================================================ */

.quick-tile::before {
  inset:0 !important;
  z-index:0 !important;
  padding:1px !important;
  border-radius:inherit !important;
  filter:none !important;
  opacity:.62 !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
}
.quick-tile > * { position:relative; z-index:1; }
.quick-tile:hover::before { opacity:.92 !important; }

/* Без mask-composite кольцо залило бы плитку — тогда лучше без него. */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)) {
  .quick-tile::before { display:none !important; }
}

/* Номер шага: разряжённость была такой, что «02» читалось как «0 2». */
.onboarding-mark {
  letter-spacing:.16em !important;
  text-indent:.16em;
}

/* Стрелка в кнопке стояла вплотную к слову. */
.onboarding .primary {
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* ============================================================
   ПЛИТКА ТАРИФА НА ГЛАВНОЙ

   Она была задумана как фото планеты во всю плитку с названием
   поверх: отсюда padding:0, min-height:150px и скрытая подпись.
   Планету убрали — осталась пустая коробка с «Eclipse» у нижнего
   края и без подписи, в отличие от соседнего блока «0 / 7».

   Возвращаем её к обычному виду блока статистики.
   ============================================================ */

.cosmic-stats .plan-tile {
  min-height:118px !important;
  padding:18px !important;
  overflow:visible !important;
}
.plan-tile .stat-value {
  margin:0 !important;
  text-shadow:none !important;
}
.plan-tile .stat-label { display:block !important; }

/* ============================================================
   ПОЛЕ КОДА

   Раньше здесь стояли две одинаковые строки — «Код друга» и
   «Промокод», каждая со своей кнопкой «Применить». Свели в одну,
   но на 375px подпись перестала помещаться и обрывалась на
   «или др)». Отдаём полю всю свободную ширину, кнопку ужимаем.
   ============================================================ */

.referral-promo { gap:8px !important; }

.referral-promo input {
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:12px !important;
  text-overflow:ellipsis;
}

.referral-promo button {
  flex:0 0 auto !important;
  padding:12px 18px !important;
  white-space:nowrap;
}

/* ============================================================
   ДВИЖЕНИЕ — ОДИН В ОДИН С САЙТОМ

   Раньше здесь лежала своя смесь: экран уезжал вбок, блоки
   всплывали на 12px без размытия, а внутри работали ещё и кадры
   прежней тёмной темы — они двигали те же элементы через transform
   и спорили с каскадом.

   Ниже — ровно тот набор, что на ghostlink.online:

     glItemIn   = authItem  (каскад блоков, он же смена раздела)
     glCardIn   = authCard  (появление крупной карточки)
     glSwap     = authSwap  (подменённая надпись)
     glVeil     = modalVeil (подложка модального окна)
     glSheetIn  = modalCard (карточка модального окна)
     glFadeUp   = fadeUp    (мелкие подписи)
     .gl-rv     = .reveal   (появление при прокрутке, в обе стороны)

   Кривые оттуда же: --gl-ease основная, --gl-overshoot с перелётом
   для едущих подложек, --gl-pop для вылета карточки.
   ============================================================ */

:root {
  --gl-ease:cubic-bezier(.22,1,.36,1);
  --gl-overshoot:cubic-bezier(.34,1.42,.44,1);
  --gl-pop:cubic-bezier(.2,1.25,.4,1);
}

@keyframes glItemIn {
  from { opacity:0; translate:0 16px; scale:.97; filter:blur(6px) }
  to   { opacity:1; translate:0 0;    scale:1;   filter:blur(0) }
}
@keyframes glCardIn {
  from { opacity:0; translate:0 24px; scale:.985; filter:blur(7px) }
  to   { opacity:1; translate:0 0;    scale:1;    filter:blur(0) }
}
@keyframes glSwap {
  from { opacity:0; translate:0 8px; filter:blur(5px) }
  to   { opacity:1; translate:0 0;   filter:blur(0) }
}
@keyframes glVeil {
  from { background-color:rgba(4,8,26,0) }
  to   { background-color:rgba(4,8,26,.78) }
}
@keyframes glSheetIn {
  from { opacity:0; scale:.9; translate:0 26px; filter:blur(10px) }
  to   { opacity:1; scale:1;  translate:0 0;    filter:blur(0) }
}
@keyframes glFadeUp {
  from { opacity:0; translate:0 6px }
  to   { opacity:1; translate:0 0 }
}

/* ---------- смена экрана ----------
   На сайте раздел кабинета не уезжает целиком: его блоки въезжают
   один за другим, и по этому каскаду видно, что содержимое
   подменилось, а не мигнуло. Делаем так же — экран целиком не
   двигаем. */

.view.active { animation:none !important; }

.view.active > * { animation:glItemIn .5s var(--gl-ease) both !important; }
.view.active > *:nth-child(1) { animation-delay:.02s !important }
.view.active > *:nth-child(2) { animation-delay:.09s !important }
.view.active > *:nth-child(3) { animation-delay:.16s !important }
.view.active > *:nth-child(4) { animation-delay:.23s !important }
.view.active > *:nth-child(5) { animation-delay:.30s !important }
.view.active > *:nth-child(n+6) { animation-delay:.36s !important }

/* Кадры прежней темы на тех же элементах: они ехали через transform
   и translateX, поэтому каскад с ними складывался в рывок. */

.view.active .profile-mark,
.view.active .profile-title,
.view.active .profile-sub,
.view.active .stat:first-child,
.view.active .stat:nth-child(2),
.view.active .tariff,
.header-user,
.header-user > div,
.notification-button,
.device-summary-shape { animation:none !important; }

/* Шапка и баланс — теми же кадрами, что на сайте. */
.header-user { animation:glItemIn .55s var(--gl-ease) both .04s !important; }
.balance { animation:glCardIn .5s var(--gl-ease) both .1s !important; }
.home-actions .primary { animation:glItemIn .5s var(--gl-ease) both !important; }
.home-actions .primary + .primary { animation-delay:.07s !important; }

/* Столбики графика оставляем — но на кривой сайта. */
.usage-chart i { animation:chart-rise .6s var(--gl-ease) both !important; }

/* ---------- шторка = модальное окно сайта ----------
   Подложке анимируем только цвет. Прозрачность на этом же элементе
   выключила бы его собственный backdrop-filter, и размытие
   включалось бы рывком в конце — ровно та же оговорка, что в
   стилях сайта. */

.sheet-wrap.open { animation:glVeil .3s ease both; }

.sheet-wrap.open .sheet:not(.dragging):not(.settling) {
  animation:glSheetIn .5s var(--gl-pop) both .04s;
}

/* Содержимое шторки — тот же каскад, что у раздела кабинета. */
.sheet > *:not(.handle):not(.sheet-close) {
  animation:glItemIn .5s var(--gl-ease) both !important;
}
.sheet > *:not(.handle):not(.sheet-close):nth-child(3) { animation-delay:.02s !important }
.sheet > *:nth-child(4) { animation-delay:.09s !important }
.sheet > *:nth-child(5) { animation-delay:.16s !important }
.sheet > *:nth-child(6) { animation-delay:.23s !important }
.sheet > *:nth-child(7) { animation-delay:.30s !important }
.sheet > *:nth-child(n+8) { animation-delay:.36s !important }

/* Карточки приложений и шаги инструкции внутри шторки. */
.sheet .app-card,
.sheet .guide-step,
.sheet .device-row { animation:glItemIn .5s var(--gl-ease) both !important; }
.sheet .app-card:nth-child(2),
.sheet .guide-step:nth-child(2),
.sheet .device-row:nth-child(2) { animation-delay:.07s !important }
.sheet .app-card:nth-child(3),
.sheet .guide-step:nth-child(3),
.sheet .device-row:nth-child(3) { animation-delay:.14s !important }
.sheet .app-card:nth-child(4),
.sheet .guide-step:nth-child(4),
.sheet .device-row:nth-child(4) { animation-delay:.21s !important }

/* QR в шторке — как на сайте: проявляется следом за карточкой. */
.sheet .qr, .sheet [class*="qr"] img, .sheet img[alt*="QR"] {
  animation:glSwap .5s var(--gl-ease) both .18s;
}

/* ---------- подписи и всплывающее сообщение ---------- */
/* Сообщение прячется через opacity:0, а показывается классом show.
   С fill-mode:both кадр «to» держал opacity:1 и после конца анимации —
   пустая тёмная пилюля так и висела над графиком. Анимируем только
   показанное состояние и без заливки: погасшее вернётся к opacity:0. */
.toast { animation:none !important; }
.toast.show { animation:glSwap .4s var(--gl-ease); }
.eyebrow, .group-title, .stat-label { animation:glFadeUp .45s var(--gl-ease) both; }

/* ---------- едущие подложки ----------
   Нижнее меню уже ездит по кривой сайта. Тем же движением —
   переключатель валюты и периоды подписки. */

.currency-options button,
.period,
.cur-pill { transition:color .35s var(--gl-ease), border-color .35s var(--gl-ease); }

/* ---------- появление при прокрутке ----------
   Класс gl-rv навешивает скрипт, а не разметка: если он не
   отработает, элементы просто останутся видимыми, а не пропадут. */

.gl-rv {
  opacity:0;
  translate:0 34px;
  scale:.99;
  filter:blur(6px);
  transition:
    opacity .8s var(--gl-ease) var(--gl-rv-delay,0s),
    translate .8s var(--gl-ease) var(--gl-rv-delay,0s),
    scale .8s var(--gl-ease) var(--gl-rv-delay,0s),
    filter .8s var(--gl-ease) var(--gl-rv-delay,0s);
}
.gl-rv.gl-in { opacity:1; translate:0 0; scale:1; filter:blur(0); }

/* Внутри шторки прокрутка своя и короткая — там появление лишнее. */
.sheet .gl-rv { opacity:1; translate:0 0; scale:1; filter:blur(0); }

@media (prefers-reduced-motion:reduce) {
  .view.active > *,
  .sheet > *,
  .sheet-wrap.open,
  .sheet-wrap.open .sheet,
  .header-user, .balance, .home-actions .primary,
  .usage-chart i, .toast,
  .eyebrow, .group-title, .stat-label { animation:none !important; }
  .gl-rv { opacity:1; translate:0 0; scale:1; filter:none; transition:none; }
  .nav::before, .cosmic-nav::before { transition:none; }
}

/* ============================================================
   ПЕРЕВЁРСТКА ПОД САЙТ

   До сих пор я перекрашивал чужую вёрстку. Цвета сошлись с сайтом
   один в один, а строй остался прежний — и он другой:

     — самый мелкий текст темы 5–8px, на сайте пол — 12.5px;
     — «Локации», «Сотрудничество», «Срок подписки» набраны 8px,
       а это заголовки разделов, на сайте у них clamp(17px,1.7vw,22px);
     — высоты у блоков фиксированные (118px, 150px), на сайте их
       держит содержимое и отступы;
     — всё обведено рамкой, а в кабинете сайта карточки без рамок
       вообще: разделяет их воздух, а не коробки. Грань там ровно у
       двух вещей — у витрины тарифов и у кнопок.

   Ниже — шкала и ритм сайта, снятые из styles.css.
   ============================================================ */

:root {
  /* Кегли: значения взяты из кабинета и витрины сайта как есть. */
  --t-label:   12.5px;                    /* .pf-label            */
  --t-eyebrow: 13px;                      /* .pf-eyebrow          */
  --t-body:    13.5px;                    /* .pf-intent-text      */
  --t-strong:  15px;
  --t-btn:     16px;                      /* .btn                 */
  --t-section: clamp(17px, 1.7vw, 22px);  /* .pf-section-title    */
  --t-value:   clamp(20px, 2.2vw, 25px);  /* .pf-intent-name      */
  --t-title:   clamp(24px, 2.6vw, 34px);  /* .pf-name             */

  /* Ритм. */
  --sp-section: clamp(32px, 5vh, 56px);   /* .pf-section          */
  --sp-card:    clamp(20px, 2.6vw, 30px); /* .pf-card             */
}

/* ---------- надзаголовки ----------
   Разрядку оставляем, кегль поднимаем с 7–8px до сайтовых 13px. */

.eyebrow,
.wallet-caption,
.usage-axis,
.counter,
.account-card-top,
.account-card-foot,
.connection-plan-copy span,
.plan-capabilities > div > span,
.traffic-mode-card > span,
.active-plan-meta > div > span,
.hub-summary span,
.referral-kicker,
.tariff-foot,
.client-clean-status,
.cosmic-section-head .counter {
  font-size:var(--t-eyebrow) !important;
  letter-spacing:.14em !important;
  line-height:1.4 !important;
  color:var(--gl-mut) !important;
}

/* ---------- заголовки разделов ----------
   «Локации», «Срок подписки», «Сотрудничество» — это шапки разделов,
   а стояли восьмым кеглем вровень с подписями. */

.group-title {
  font-family:"Benzin",sans-serif !important;
  font-weight:700 !important;
  font-size:var(--t-section) !important;
  letter-spacing:-.015em !important;
  line-height:1.2 !important;
  text-transform:none !important;
  color:var(--gl-ink) !important;
  padding:var(--sp-section) 0 18px !important;
  margin:0 !important;
}
.sheet .group-title:first-of-type,
.view .group-title:first-child { padding-top:0 !important; }

/* ---------- подписи ---------- */

.stat-label,
.device-row span,
.app-copy span,
.earning-row span,
.referral-code-line span,
.plan-detail-point span,
.tariff-detail-view .plan-detail-point span,
.profile-balance small,
.period b small,
.tariff-price-pill small,
.hub-limit small,
.usage-chart i span,
.acc-handle,
.acc-stats span,
.referral-stat span,
.pf-label {
  font-size:var(--t-label) !important;
  letter-spacing:0 !important;
  line-height:1.45 !important;
  color:var(--gl-mut) !important;
}

/* ---------- текст ---------- */

.tariff-description,
.tariff-kicker,
.plan-detail-kicker,
.current-plan-view .plan-detail-kicker,
.connection-intro p,
.cosmic-section-head p,
.plan-detail-copy,
.tariff-detail-view .plan-detail-copy,
.currency-gate p,
.connection-guide-view > .desc,
.client-clean-view > .desc,
.traffic-summary-view > .desc,
.about-service-view > .desc,
.profile-sub,
.balance-equivalent,
.tariff-features,
.referral-terms,
.acc-status,
.desc {
  font-size:var(--t-body) !important;
  line-height:1.6 !important;
  letter-spacing:0 !important;
}

/* ---------- значения и имена ---------- */

.stat-value,
.active-plan-meta b,
.currency-number,
.topup-main {
  font-size:var(--t-value) !important;
  letter-spacing:-.02em !important;
  line-height:1.1 !important;
}

.acc-name,
.section-head h1,
.cosmic-section-head h1,
.sheet h2,
.hero-name {
  font-size:var(--t-title) !important;
  letter-spacing:-.025em !important;
  line-height:1.05 !important;
}

/* ---------- то, что нажимают ----------
   На сайте у кнопки 16px и поля 14×30. */

.primary,
.secondary,
.btn,
.home-actions .primary,
.acc-follow,
.connection-guide-pill,
.referral-actions button,
.promo button,
.sheet .primary,
.sheet .secondary {
  font-size:var(--t-btn) !important;
  padding:14px 30px !important;
  line-height:1.2 !important;
}

.pill,
.tag,
.plan-pill,
.server-chip,
.recommended-tag,
.period > span,
.currency-options button,
.home-currency button,
.currency-inline button,
.cosmic-nav button span:last-child,
.nav button span:last-child {
  font-size:var(--t-label) !important;
  letter-spacing:.02em !important;
}

.quick-tile b,
.device-row b,
.guide-step b,
.client-clean-step b,
.notification-item b,
.plan-detail-point b,
.app-copy b,
.connection-guide-view .guide-step b,
.header-user b {
  font-size:var(--t-strong) !important;
  letter-spacing:-.01em !important;
  line-height:1.3 !important;
}

/* ============================================================
   ПОВЕРХНОСТИ

   В кабинете сайта карточка — это padding и радиус, без рамки и
   заливки (.pf-card). Грань там только у витрины тарифов (.plan) и
   у кнопок (.btn). Приводим к тому же: коробки снимаем, разделять
   начинает воздух.
   ============================================================ */

.stat,
.stat.plan-tile,
.cosmic-stats .plan-tile,
.usage-panel,
.acc-card,
.referral-panel,
.liquid-card,
.hero.liquid-card {
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:22px !important;
  padding:var(--sp-card) !important;
  min-height:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Витрина тарифов — единственные карточки с гранью, как .plan. */
.tariff {
  border:1px solid rgba(238,242,255,.12) !important;
  border-radius:22px !important;
  background:transparent !important;
  padding:28px 26px 34px !important;
}

/* Кнопки и плитки-действия грань сохраняют — это .btn сайта. */
.primary,
.secondary,
.btn,
.quick-tile,
.acc-follow,
.connection-guide-pill,
.referral-actions button,
.promo button,
.promo input,
.server-chip {
  border:1px solid rgba(238,242,255,.24) !important;
  background:transparent !important;
}

/* ============================================================
   РИТМ

   Разделы отбиваются одним шагом, а не разнобоем из margin,
   накопившихся слоями.
   ============================================================ */

.view > * + * { margin-top:var(--sp-section) !important; }
.cosmic-stats { gap:12px !important; }
.pf-card + .pf-card,
.stat + .stat { margin-top:12px; }

.section-head,
.cosmic-section-head {
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  padding-bottom:18px !important;
  margin:0 !important;
}
.section-head p,
.cosmic-section-head p {
  flex:1 1 100%;
  margin:6px 0 0 !important;
  color:var(--gl-mut) !important;
}

/* Шторка живёт по тому же ритму. */
.sheet { padding:var(--sp-card) !important; }
.sheet > * + * { margin-top:16px !important; }

/* Сетка на 375px: две колонки статистики оставляем, но без
   фиксированной высоты — её теперь держит содержимое. */
.cosmic-stats > * { min-height:0 !important; }

/* Поля 14×30 у сайта заданы под широкую колонку. На 375px «Подключить
   устройство» с ними переносилось в две строки, поэтому кнопкам во всю
   ширину боковые поля ужимаем — кегль остаётся сайтовым. */

.home-actions .primary,
.sheet .primary,
.sheet .secondary,
.acc-follow,
.connection-guide-pill,
.referral-actions button {
  padding:16px 20px !important;
  white-space:nowrap;
}
.home-actions .primary > span:first-child,
.sheet .primary > span:first-child { white-space:nowrap; }