/* ============================================================================
   VFF ULTIMA — вид 2 (19.10, владелец: раскладка как у образца Xconnect, но «в нашем стиле: только зелёный и красный для обозначения»):
   цвета сайта (#111110 / #171716 / #F2F2F0, серые), Unbounded в заголовках и крупных цифрах; зелёный — «активна / в сети / норма»,
   красный — «удалить / истекла / заканчивается»; остальное — серое и белое. Плавающее меню-«таблетка», без своей шапки
   (шапку с именем бота рисует Telegram). Подключается после style.css и переопределяет токены и раскладку.
   ========================================================================== */
:root, [data-theme="light"], [data-theme="dark"] {
  --bg: #111110;
  --surface: #171716;
  --surface-2: #1d1d1b;
  --surface-sunk: #0c0c0b;
  --line: #262624;
  --line-2: #30302d;
  --text: #F2F2F0;
  --text-2: #96968F;
  --text-3: #5E5E5A;
  --x-blue: #F2F2F0;                       /* метки и полосы — нейтральные (цвет только у статусов) */
  --x-blue-bg: rgba(242, 242, 240, 0.08);
  --x-blue-deep: #1f1f1d;
  --x-green: #6fcf8e;
  --x-green-bg: rgba(111, 207, 142, 0.12);
  --x-gold: #e0776a;                       /* «заканчивается» — тоже красный: обозначения только зелёный и красный */
  --x-gold-bg: rgba(224, 119, 106, 0.12);
  --x-red: #e0776a;
  --x-red-bg: rgba(224, 119, 106, 0.12);
  --x-r: 24px;
  color-scheme: dark;
}
html, body { background: var(--bg); color: var(--text); }
body { font-family: "IBM Plex Sans", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.topbar { display: none !important; }
.screen { padding: calc(14px + env(safe-area-inset-top)) 16px calc(118px + env(safe-area-inset-bottom)); gap: 14px; }
.num, .x-num { font-variant-numeric: tabular-nums; }

/* --- плавающее меню-«таблетка» -------------------------------------- */
.navbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 74px; padding: 6px; border: 1px solid var(--line-2);
  border-radius: 34px; background: rgba(23, 23, 22, 0.94); box-shadow: 0 18px 40px -18px #000; }
.navbar-inner { gap: 4px; }
.nav-item { border-radius: 26px; color: var(--text-3); font-size: 11.5px; font-weight: 600; gap: 5px; }
.nav-item.active { color: var(--text); background: linear-gradient(180deg, #2a2a27, #1d1d1b); box-shadow: inset 0 1px 0 rgba(242,242,240,.08); }
.nav-item .nav-active-mark { display: none; }

/* --- заголовки -------------------------------------------------------- */
.x-title { margin: 18px 2px 4px; font: 700 26px/1.15 "Unbounded", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; }
.x-sub { margin: -2px 2px 6px; color: var(--text-3); font-size: 14px; }
.x-back { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.x-back button { width: 40px; height: 40px; border: 0; background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.x-back h1 { margin: 0; font: 700 20px/1.2 "Unbounded", "IBM Plex Sans", sans-serif; }
.x-back .x-sub { margin: 2px 0 0; }
.x-label { font: 600 12px/1.3 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 6px 4px 0; }

/* --- приветствие ------------------------------------------------------ */
.x-top { display: flex; align-items: center; gap: 10px; }
.x-pill { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 6px; border: 1px solid var(--line-2); border-radius: 26px;
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; cursor: pointer; }
.x-pill .x-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #262623; font-weight: 700; font-size: 14px; }
.x-roundbtn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; flex: none; }
.x-hello { display: flex; align-items: center; gap: 16px; margin: 12px 2px 4px; }
.x-hello .x-mark { width: 74px; flex: none; color: #fff; }
.x-hello .x-mark svg { width: 100%; height: auto; display: block; }
.x-hello small { display: block; color: var(--text-3); font-size: 15px; }
.x-hello b { display: block; font: 700 28px/1.12 "Unbounded", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; }

/* --- карточки и метки -------------------------------------------------- */
.x-card { border: 1px solid var(--line); border-radius: var(--x-r); background: var(--surface); padding: 18px; display: grid; gap: 14px; min-width: 0; }
.x-card--glow { background: radial-gradient(120% 140% at 0% 0%, #22221f 0%, var(--surface) 55%); }
.x-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.x-row > .x-grow { flex: 1; min-width: 0; }
.x-ico { width: 54px; height: 54px; flex: none; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, #262623, #171716);
  color: var(--text); border: 1px solid var(--line-2); }
.x-ico--plain { background: #1d1d1b; color: var(--text); border-color: var(--line-2); }
.x-ico--green { background: #22221f; color: var(--text); border-color: var(--line-2); }
.x-ico svg.x-logo { width: 34px; height: auto; color: #fff; }
.x-name { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.x-meta { color: var(--text-2); font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; font: 600 12px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase; background: var(--x-blue-bg); color: var(--x-blue); white-space: nowrap; }
.x-chip--gray { background: #1f1f1d; color: var(--text-2); letter-spacing: .04em; }
.x-chip--gold { background: var(--x-gold-bg); color: var(--x-gold); }
.x-chip--big { padding: 8px 14px; border-radius: 12px; font-size: 14px; letter-spacing: .02em; text-transform: none; }
.x-st { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 10px; background: #1f1f1d; color: var(--text-2); font-size: 14px; }
.x-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.x-st--on { background: var(--x-green-bg); color: var(--x-green); }
.x-st--on::before { background: var(--x-green); }
.x-st--warn { background: var(--x-gold-bg); color: var(--x-gold); } .x-st--warn::before { background: var(--x-gold); }
.x-st--off { background: var(--x-red-bg); color: var(--x-red); } .x-st--off::before { background: var(--x-red); }
.x-dot-on { color: var(--x-green); } .x-chev { color: var(--text-3); flex: none; }

/* --- три показателя ------------------------------------------------------ */
.x-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--x-r); background: var(--surface); overflow: hidden; }
.x-stat { padding: 16px 14px 18px; display: grid; gap: 8px; align-content: start; min-width: 0; text-align: center; }   /* 21.10 (владелец): подписи и цифры — по центру ячейки */
.x-stat + .x-stat { border-left: 1px solid var(--line); }
.x-stat span { color: var(--text-3); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.x-stat b { font: 700 24px/1 "Unbounded", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-stat b.is-long { font-size: 20px; }                      /* 21.10: 4 цифры (1023 ГБ) — чуть меньше, чтобы влезло в треть экрана */
.x-stat b small { font-size: 15px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
.x-stat b i { font-style: normal; color: var(--text-3); font-weight: 400; }
.x-stat em { font-style: normal; color: var(--text-3); font-size: 13px; }
.x-bar { height: 5px; border-radius: 5px; background: #262623; overflow: hidden; }
.x-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--x-green); }
.x-bar--blue > i { background: var(--x-blue); } .x-bar--gold > i { background: var(--x-gold); } .x-bar--red > i { background: var(--x-red); }
.x-segs { display: flex; gap: 5px; } .x-segs i { flex: 1; height: 5px; border-radius: 5px; background: #2c2c29; } .x-segs i.on { background: var(--text); }
.x-segs--2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }   /* 21.10: больше 5 устройств — два ряда по 5 */

/* --- кнопки ---------------------------------------------------------------- */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px; border-radius: 20px; border: 0;
  font: 600 16px/1.2 "IBM Plex Sans", sans-serif; cursor: pointer; text-decoration: none; }
.x-btn:disabled { opacity: .45; cursor: default; }
.x-btn--white { background: var(--text); color: var(--bg); }
.x-btn--dark { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); }
.x-btn--blue { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); }
.x-btn--red { background: var(--x-red-bg); color: var(--x-red); }
.x-btn--sq { width: 56px; padding: 0; flex: none; }
.x-btn--block { width: 100%; }
.x-btn--pill { border-radius: 30px; }
.x-btns { display: flex; gap: 10px; }
.x-btns > .x-btn:not(.x-btn--sq) { flex: 1; }
.x-link { background: none; border: 0; color: var(--text); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* --- устройство -------------------------------------------------------------- */
.x-dev { border: 1px solid var(--line); border-radius: var(--x-r); background: var(--surface); overflow: hidden; }
.x-dev__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
.x-dev__app { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; font: 700 8.5px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .02em; flex: none; }
.x-dev__app--incy { background: #262623; color: var(--text); border: 1px solid var(--line-2); }
.x-dev__app--happ { background: #262623; color: var(--text); border: 1px solid var(--line-2); font-size: 12px; }
.x-dev__name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; min-width: 0; }
.x-dev__name span:not(.x-dev__app) { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.2; }
.x-dev__name button { border: 0; background: none; color: var(--text-3); padding: 2px; cursor: pointer; flex: none; }
.x-dev__line { color: var(--text-2); font-size: 14.5px; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.x-dev__trf { color: var(--text-2); font: 400 13.5px/1.4 "IBM Plex Mono", monospace; margin-top: 6px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.x-dev__trf span { white-space: nowrap; }
.x-dev__trf b { font-weight: 400; color: var(--text-3); }
.x-ip { margin-top: 6px; display: inline-block; font: 400 14px/1.4 "IBM Plex Mono", monospace; color: var(--text-2); padding: 1px 6px; border-radius: 6px;
  filter: blur(5px); background: var(--surface-2); cursor: pointer; user-select: none; transition: filter .2s; }
.x-ip.is-open { filter: none; background: transparent; user-select: text; }
.x-dev__total { text-align: right; display: grid; gap: 4px; align-content: start; }
.x-dev__total b { font: 700 15px/1.1 "Unbounded", "IBM Plex Sans", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-dev__total span { font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; color: var(--text-3); }
.x-dev__total .x-bar { width: 100%; min-width: 64px; margin-top: 8px; }
.x-dev__act { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.x-dev__act .x-btn { min-height: 52px; border-radius: 16px; }
.x-add { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--x-r); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); width: 100%; font: inherit; }
.x-add b { display: block; font-size: 17px; } .x-add small { display: block; color: var(--text-3); font-size: 14px; margin-top: 3px; }
.x-add .x-price { color: var(--text); font: 700 17px/1 "Unbounded", sans-serif; white-space: nowrap; }

/* --- список настроек -------------------------------------------------------- */
.x-list { border: 1px solid var(--line); border-radius: var(--x-r); background: var(--surface); overflow: hidden; }
.x-li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text);
  font: 500 16px/1.3 "IBM Plex Sans", sans-serif; text-align: left; cursor: pointer; }
.x-li:first-child { border-top: 0; }
.x-li .x-grow { flex: 1; min-width: 0; } .x-li small { display: block; color: var(--text-3); font-size: 13px; margin-top: 3px; }
.x-li > svg:first-child { color: var(--text-2); flex: none; }
.x-li .x-val { color: var(--text-3); font-size: 14px; }
.x-foot { display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-3); font-size: 13.5px; padding: 4px 6px; }

/* --- тарифы ----------------------------------------------------------------- */
.x-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 5px; gap: 5px; }
.x-seg button { border: 0; border-radius: 14px; background: none; color: var(--text-2); padding: 12px 6px; font: 600 15px/1.2 "IBM Plex Sans", sans-serif; cursor: pointer; }
.x-seg button small { display: block; font: 500 12px/1.3 "IBM Plex Mono", monospace; color: var(--text-3); margin-top: 3px; }
.x-seg button[aria-checked="true"] { background: var(--text); color: var(--bg); } .x-seg button[aria-checked="true"] small { color: #55554f; }
.x-plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--x-r); background: var(--surface); cursor: pointer; text-align: left; color: var(--text); width: 100%; font: inherit; }
.x-plan[aria-checked="true"] { border-color: var(--text); background: radial-gradient(120% 140% at 0% 0%, #22221f 0%, var(--surface) 60%); }
.x-plan b { font-size: 18px; } .x-plan small { display: block; color: var(--text-3); font-size: 13.5px; margin-top: 3px; }
.x-plan .x-price { font: 700 16px/1.2 "Unbounded", sans-serif; white-space: nowrap; text-align: right; }
.x-plan .x-price s { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 400; }
.x-total { display: grid; gap: 8px; } .x-total .x-row { justify-content: space-between; font-size: 14.5px; color: var(--text-2); }
.x-total .x-sum { font: 700 26px/1 "Unbounded", sans-serif; color: var(--text); }
.x-err { color: var(--x-red); font-size: 14px; } .x-note { color: var(--x-gold); font-size: 14px; }
.x-help { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--x-r); background: transparent;
  color: var(--text-2); font: 500 16px/1.3 "IBM Plex Sans", sans-serif; width: 100%; text-align: left; cursor: pointer; }
.x-help .x-grow { flex: 1; }

/* --- окна (шторки) в тёмном виде --------------------------------------------- */
.sheet { background: var(--surface); border: 1px solid var(--line-2); }
.dialog { background: var(--surface); border: 1px solid var(--line-2); }
.code { background: var(--surface-sunk); border-color: var(--line); color: var(--text-2); }
.toast { background: var(--surface-2); border-color: var(--line-2); color: var(--text); }
@media (max-width: 360px) { .x-stat b { font-size: 23px; } .x-hello b { font-size: 26px; } }

/* 19.10: «Приглашай друзей» и «Бонусы» */
.x-invite__link { gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.x-seg--sm { flex: none; padding: 3px; border-radius: 14px; } .x-seg--sm button { padding: 8px 10px; font-size: 13px; border-radius: 11px; }
.x-invite__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.3 "IBM Plex Mono", monospace; color: var(--text-2); }
.x-roundbtn--sm { width: 40px; height: 40px; flex: none; }
.x-bonus { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 2px; }
.x-bonus b { font: 700 48px/1 "Unbounded", sans-serif; letter-spacing: -0.03em; } .x-bonus span { color: var(--text-2); font-size: 16px; }
.x-pos { color: var(--x-green); font-weight: 600; white-space: nowrap; }

/* 19.10: колокольчик и переключатели (включено — зелёный: это индикатор) */
.x-top .x-roundbtn + .x-roundbtn { margin-left: 8px; }
.x-bell { position: relative; }
.x-bell__n { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--x-green);
  color: #0c0c0b; font: 700 11px/20px "IBM Plex Sans", sans-serif; text-align: center; border: 2px solid var(--bg); }
.toggle { border: 0; cursor: pointer; } .toggle[aria-checked="true"] { background: var(--x-green); }

/* 19.10: тест скорости */
.x-speed { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 12px; }
.x-speed div { display: grid; gap: 4px; } .x-speed div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.x-speed span { color: var(--text-2); font-size: 13px; } .x-speed b { font: 700 22px/1.1 "Unbounded", sans-serif; font-variant-numeric: tabular-nums; }

/* 19.10: четыре кнопки в карточке устройства помещаются в 390 px; скрытое — скрыто */
.x-dev__act { gap: 8px; } .x-dev__act .x-btn--sq { width: 48px; min-width: 48px; padding: 0; flex: none; }
.x-dev__act .x-btn--block { min-width: 0; }
[hidden] { display: none !important; }
.x-speed-row { display: grid; gap: 10px; } .x-speed-row .x-seg--sm { width: 100%; }

/* 20.10: аватар — фото Telegram поверх инициалов (не загрузилось — видны инициалы) */
.x-ava--img { position: relative; overflow: hidden; }
.x-ava--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; z-index: 1; }
.x-ava-lg { border-radius: 50%; font-weight: 700; font-size: 17px; }

/* 20.10 (владелец): нижнее меню — подписи помещаются (5 разделов, «Настройки» / «Subscription» не выпирают) */
.navbar { left: 8px; right: 8px; padding: 5px; }
.navbar-inner { gap: 2px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-item { min-width: 0; padding: 0 2px; font-size: 10.5px; letter-spacing: -0.01em; }
.nav-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 20.10 (владелец): без подсветки и выделения при нажатии — на всех элементах */
* { -webkit-tap-highlight-color: transparent; }
button, a, [data-action], .x-li, .x-plan, .x-seg button, .nav-item, .x-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button:focus, a:focus, [data-action]:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--line-2); outline-offset: 2px; }
::selection { background: rgba(242, 242, 240, 0.18); }

/* 20.10 (владелец): немного анимации — нажатие, появление экрана и карточек, переключатели */
@media (prefers-reduced-motion: no-preference) {
  .x-btn, .x-li, .x-plan, .x-add, .x-help, .x-roundbtn, .x-seg button, .nav-item, .x-card[data-action], button.x-card {
    transition: transform .16s cubic-bezier(.2,.8,.2,1), background-color .2s ease, border-color .2s ease, opacity .2s ease, color .2s ease; }
  .x-btn:active, .x-li:active, .x-plan:active, .x-add:active, .x-help:active, .x-roundbtn:active, .nav-item:active, button.x-card:active { transform: scale(.97); }
  .x-seg button:active { transform: scale(.95); }
  .screen > * { animation: x-rise .32s cubic-bezier(.2,.8,.2,1) both; }
  .screen > *:nth-child(2) { animation-delay: .03s; } .screen > *:nth-child(3) { animation-delay: .06s; } .screen > *:nth-child(4) { animation-delay: .09s; }
  .screen > *:nth-child(5) { animation-delay: .12s; } .screen > *:nth-child(n+6) { animation-delay: .15s; }
  .x-bar i, .x-segs i { transition: width .6s cubic-bezier(.2,.8,.2,1), background-color .3s ease; }
  .x-bell__n { animation: x-pop .35s cubic-bezier(.2,1.4,.4,1) both; }
  .x-st--on::before { animation: x-pulse 2.4s ease-in-out infinite; }
}
@keyframes x-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes x-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes x-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* 20.10: «потяни, чтобы обновить» */
.x-ptr { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); z-index: 40; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
  transform: translateY(-60px); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.x-ptr svg { transition: transform .1s linear; }
.x-ptr.is-ready { border-color: var(--x-green); color: var(--x-green); }
.x-ptr.is-loading svg { animation: x-spin .8s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }
.screen.no-anim > * { animation: none !important; }

/* 20.10: фон как на сайте (пока — только владельцу): свет, планета, зерно — поверх прежнего цвета фона */
#x-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#x-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-bg__light { --mx: 50%; --my: 30%; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242,242,240,.065), transparent 65%); }
.x-bg__grain { opacity: .55; }
body.has-bg .shell { position: relative; z-index: 1; }

/* 20.10: анимация входа — три части знака собираются, пока грузится — «переставляются» и светятся, готово — растворяется */
.x-splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity .45s ease; }
.x-splash__in { display: grid; justify-items: center; gap: 26px; }
.x-splash svg { width: 132px; height: auto; overflow: visible; filter: drop-shadow(0 0 0 rgba(242,242,240,0)); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.x-splash path { fill: #F2F2F0; transform-box: fill-box; transform-origin: center; opacity: 0; }
.x-splash .p0 { animation: xs-in0 .7s cubic-bezier(.2,.9,.25,1.15) .05s forwards; }
.x-splash .p1 { animation: xs-in1 .7s cubic-bezier(.2,.9,.25,1.15) .16s forwards; }
.x-splash .p2 { animation: xs-in2 .7s cubic-bezier(.2,.9,.25,1.15) .27s forwards; }
.x-splash.is-loading svg { animation: xs-glow 1.6s ease-in-out infinite; }
.x-splash.is-loading .p1 { opacity: 1; animation: xs-shuffle1 1.6s ease-in-out infinite; }
.x-splash.is-loading .p2 { opacity: 1; animation: xs-shuffle2 1.6s ease-in-out infinite; }
.x-splash.is-loading .p0 { opacity: 1; animation: xs-shuffle0 1.6s ease-in-out infinite; }
.x-splash__bar { width: 92px; height: 2px; border-radius: 2px; background: rgba(242,242,240,.12); overflow: hidden; position: relative; opacity: 0; animation: xs-fade .4s ease .7s forwards; }
.x-splash__bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: #F2F2F0; animation: xs-run 1.1s ease-in-out infinite; }
.x-splash.is-done { opacity: 0; pointer-events: none; }
.x-splash.is-done svg { transform: scale(1.18); opacity: 0; }
@keyframes xs-in0 { from { opacity: 0; transform: translate(-70px, -50px) rotate(-28deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes xs-in1 { from { opacity: 0; transform: translate(80px, -16px) rotate(22deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes xs-in2 { from { opacity: 0; transform: translate(14px, 80px) rotate(-18deg) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes xs-shuffle0 { 0%, 100% { transform: none; } 40% { transform: translate(-3px, -3px); } }
@keyframes xs-shuffle1 { 0%, 100% { transform: none; } 25% { transform: translate(7px, -5px); } 55% { transform: translate(-2px, 3px); } }
@keyframes xs-shuffle2 { 0%, 100% { transform: none; } 45% { transform: translate(-6px, 6px); } 75% { transform: translate(3px, -2px); } }
@keyframes xs-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(242,242,240,.15)); } 50% { filter: drop-shadow(0 0 14px rgba(242,242,240,.4)); } }
@keyframes xs-run { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes xs-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .x-splash path { opacity: 1; animation: none !important; } .x-splash svg { animation: none !important; } }

/* 20.10 (владелец): блеск логотипа на главной — раз в 7 с полоса света проходит по знаку (маска по форме логотипа) */
.x-hello .x-mark { position: relative; }
.x-hello .x-mark::after, .x-welcome .x-mark::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 494 326' fill='%23000'%3E%3Cpath d='M4.8 11.8L5.2 12.9Q9 23.7 14.9 33.5L114.4 199.3Q120.6 209.6 126.4 199.2L205.7 57.5Q206.5 56.2 208 56.2L449.1 56.2Q455.1 56.2 460.1 52.8L460.6 52.4Q465.6 49 468.5 43.6L486.3 11.5Q492 1 480 1L187.9 1Q175.9 1 170 11.4L123 95.3Q122.3 96.6 121.5 95.3L95.9 52.7Q95.2 51.4 96.7 51.4L106.2 51.4Q116.2 51.3 121.1 42.6L138.6 11.4Q144.4 1 132.4 1L12.5 1Q1 1 4.8 11.8Z'/%3E%3Cpath d='M300.6 72L225.8 72Q213.8 72 207.9 82.4L134.7 213.1Q128.9 223.5 135.1 233.8L156.8 270Q163 280.3 168.8 269.8L214.8 187.8Q215.5 186.4 217 186.4L236.5 186.4Q248.5 186.4 254.3 176L270.7 146.7Q276.6 136.2 264.6 136.2L245.1 136.2Q243.6 136.2 244.4 134.9L250.8 123.5Q251.5 122.2 253 122.2L272.5 122.2Q284.5 122.2 290.4 111.7L306.7 82.4Q312.6 72 300.6 72Z'/%3E%3Cpath d='M440.6 72L341.2 72Q329.2 72 323.3 82.4L193.4 314.4Q187.6 324.9 199.6 324.9L241.3 325Q253.3 325 259.2 314.5L330.2 187.8Q330.9 186.4 332.4 186.4L376.5 186.4Q388.5 186.4 394.4 176L410.8 146.7Q416.6 136.2 404.6 136.2L360.6 136.2Q359.1 136.2 359.8 134.9L366.2 123.5Q366.9 122.2 368.4 122.2L412.5 122.2Q424.5 122.2 430.4 111.7L446.7 82.4Q452.6 72 440.6 72Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 494 326' fill='%23000'%3E%3Cpath d='M4.8 11.8L5.2 12.9Q9 23.7 14.9 33.5L114.4 199.3Q120.6 209.6 126.4 199.2L205.7 57.5Q206.5 56.2 208 56.2L449.1 56.2Q455.1 56.2 460.1 52.8L460.6 52.4Q465.6 49 468.5 43.6L486.3 11.5Q492 1 480 1L187.9 1Q175.9 1 170 11.4L123 95.3Q122.3 96.6 121.5 95.3L95.9 52.7Q95.2 51.4 96.7 51.4L106.2 51.4Q116.2 51.3 121.1 42.6L138.6 11.4Q144.4 1 132.4 1L12.5 1Q1 1 4.8 11.8Z'/%3E%3Cpath d='M300.6 72L225.8 72Q213.8 72 207.9 82.4L134.7 213.1Q128.9 223.5 135.1 233.8L156.8 270Q163 280.3 168.8 269.8L214.8 187.8Q215.5 186.4 217 186.4L236.5 186.4Q248.5 186.4 254.3 176L270.7 146.7Q276.6 136.2 264.6 136.2L245.1 136.2Q243.6 136.2 244.4 134.9L250.8 123.5Q251.5 122.2 253 122.2L272.5 122.2Q284.5 122.2 290.4 111.7L306.7 82.4Q312.6 72 300.6 72Z'/%3E%3Cpath d='M440.6 72L341.2 72Q329.2 72 323.3 82.4L193.4 314.4Q187.6 324.9 199.6 324.9L241.3 325Q253.3 325 259.2 314.5L330.2 187.8Q330.9 186.4 332.4 186.4L376.5 186.4Q388.5 186.4 394.4 176L410.8 146.7Q416.6 136.2 404.6 136.2L360.6 136.2Q359.1 136.2 359.8 134.9L366.2 123.5Q366.9 122.2 368.4 122.2L412.5 122.2Q424.5 122.2 430.4 111.7L446.7 82.4Q452.6 72 440.6 72Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 46%, rgba(17,17,16,.35) 48.6%, rgba(17,17,16,.6) 50%, rgba(17,17,16,.35) 51.4%, transparent 54%) 0 0 / 400% 100% no-repeat;
  background-position: 75% 0; opacity: 0; }
/* 21.10 (владелец: «убрать анимацию у логотипа… придумай что-то поинтереснее»): блеск и «катание» убраны.
   «Пересборка»: раз в 10 с три части знака (V и две F) по очереди выезжают вверх-вправо по наклону знака и со щелчком встают на место */
.x-hello .x-mark::after, .x-welcome .x-mark::after { display: none; }
.x-hello .x-mark svg { overflow: visible; }                 /* части выезжают за рамку знака — не обрезать (владелец: «невидимый квадрат») */
@media (prefers-reduced-motion: no-preference) {
  .x-hello .x-mark path { animation: x-snap 10s cubic-bezier(.3, 0, .2, 1) 3s infinite; }
  .x-hello .x-mark path:nth-child(2) { animation-delay: 3.12s; }
  .x-hello .x-mark path:nth-child(3) { animation-delay: 3.24s; }
}
@keyframes x-snap {
  0%, 90% { transform: none; }
  93%     { transform: translate(30px, -52px); }
  96%     { transform: translate(-4px, 7px); }
  98%, 100% { transform: none; }
}
@keyframes x-shine { 0% { background-position: 75% 0; opacity: 1; } 14% { background-position: 25% 0; opacity: 1; } 15%, 100% { background-position: 25% 0; opacity: 0; } }

/* 21.10 (владелец: «блеск попробуй сделать серым или чёрным»): знак снова белый, по нему проходит тёмно-серая полоса */
.x-hello .x-mark, .x-welcome .x-mark { color: #f2f2f0; }

/* 20.10 (владелец: «лёгкие анимации элементам интерфейса») */
@media (prefers-reduced-motion: no-preference) {
  .screen:not(.no-anim) .x-bar i, .screen:not(.no-anim) .x-segs i.on { animation: x-fill .9s cubic-bezier(.2,.8,.2,1) .15s both; }
  .screen:not(.no-anim) .x-dev, .screen:not(.no-anim) .x-li, .screen:not(.no-anim) .x-plan { animation: x-rise .38s cubic-bezier(.2,.8,.2,1) both; }
  .screen:not(.no-anim) .x-list > :nth-child(2), .screen:not(.no-anim) .x-dev:nth-of-type(2), .screen:not(.no-anim) [data-role="periods"] > :nth-child(2) { animation-delay: .05s; }
  .screen:not(.no-anim) .x-list > :nth-child(3), .screen:not(.no-anim) .x-dev:nth-of-type(3), .screen:not(.no-anim) [data-role="periods"] > :nth-child(3) { animation-delay: .1s; }
  .screen:not(.no-anim) .x-list > :nth-child(n+4), .screen:not(.no-anim) .x-dev:nth-of-type(n+4), .screen:not(.no-anim) [data-role="periods"] > :nth-child(n+4) { animation-delay: .15s; }
  .nav-item.active svg { animation: x-hop .45s cubic-bezier(.3,1.6,.5,1) both; }
  .toggle::after { transition: transform .32s cubic-bezier(.3,1.5,.5,1); }
  .x-seg button { transition: background-color .25s ease, color .25s ease, transform .16s ease; }
  .x-plan[aria-checked="true"] { animation: x-pick .3s cubic-bezier(.3,1.4,.5,1); }
  .x-ico svg { transition: transform .2s ease; } button:active .x-ico svg, .x-li:active svg { transform: scale(.9); }
  .x-chev, .x-li > svg:last-child { transition: transform .2s ease; } .x-li:active > svg:last-child { transform: translateX(3px); }
  .toast { animation: x-toast .35s cubic-bezier(.2,1.2,.4,1) both; }
}
@keyframes x-fill { from { width: 0; } }
@keyframes x-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
@keyframes x-pick { 0% { transform: scale(.98); } 60% { transform: scale(1.012); } 100% { transform: none; } }
@keyframes x-toast { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* 20.10 (владелец: «что будет при очень длинном нике?»): имя никогда не ломает вёрстку */
.x-top { min-width: 0; }
.x-pill { min-width: 0; max-width: calc(100% - 128px); flex-shrink: 1; }
.x-pill > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-hello b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.x-hello--long b { font-size: 22px; }
.x-hello--xlong b { font-size: 18px; line-height: 1.2; }
.x-ava-lg + div .x-name, .x-card .x-name[data-i18n-skip] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }

/* 20.10: первый вход без подписки — приветствие, капча «где наш логотип», «готовим доступ» */
.x-welcome { min-height: calc(100vh - 60px); display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; padding: 24px 6px 40px; }
.x-welcome h1 { margin: 6px 0 0; font: 700 24px/1.2 "Unbounded", "IBM Plex Sans", sans-serif; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.x-welcome p { margin: 0; color: var(--text-2); max-width: 320px; }
.x-welcome .x-mark { width: 120px; color: #f2f2f0; position: relative; } .x-welcome .x-mark svg { width: 100%; height: auto; display: block; }
.x-welcome__list { list-style: none; margin: 4px 0 0; padding: 14px 16px; display: grid; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); max-width: 360px; }
.x-welcome__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 14px; line-height: 1.4; } .x-welcome__list svg { flex: none; margin-top: 1px; color: var(--text); }
.x-welcome__btns { width: 100%; max-width: 360px; display: grid; gap: 10px; margin-top: 6px; }
.x-cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.x-cap__opt { aspect-ratio: 1.25; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); display: grid; place-items: center; cursor: pointer; padding: 10px; }
.x-cap__opt svg { width: 100%; height: 100%; } .x-cap__opt path { fill: var(--text); }
.x-cap__opt:active { transform: scale(.95); border-color: var(--text); }
.x-ready { display: grid; justify-items: center; gap: 14px; padding: 18px 0 8px; }
.x-ready__spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--x-green); animation: x-spin .8s linear infinite; }

/* 21.10: «Добавить устройство», когда докупка недоступна, — обычная плашка; действие справа («Тарифы» / «Продлить») — обычным шрифтом */
.x-add[data-why] .x-price { font: 600 14px/1 "IBM Plex Sans", sans-serif; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; }