/* ShadowVPN — личный кабинет. Один и тот же интерфейс работает:
   - как Telegram Mini App (цвета берутся из темы Telegram, см. applyTheme в app.js),
   - как обычный сайт в браузере (своя палитра, светлая/тёмная по системе).
   Mobile-first: на телефоне — нижняя панель вкладок, от 900px — боковое меню. */

:root {
  --bg: #f2f2f7;
  --bg-2: #ffffff;
  --bg-3: #f2f2f7;
  --text: #0b0b0f;
  --hint: #8a8a8e;
  --sep: rgba(60, 60, 67, .14);
  --accent: #ff2d55;
  --accent-text: #ffffff;
  --accent-soft: rgba(255, 45, 85, .14);
  --green: #1fae5b;
  --green-soft: rgba(31, 174, 91, .13);
  --red: #e5484d;
  --red-soft: rgba(229, 72, 77, .12);
  --amber: #d98a00;
  --amber-soft: rgba(217, 138, 0, .13);
  --radius: 18px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px -12px rgba(0, 0, 0, .18);
  --tabbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-2: #1c1c1e;
    --bg-3: #2c2c2e;
    --text: #f5f5f7;
    --hint: #8d8d93;
    --sep: rgba(84, 84, 88, .45);
    --accent: #ff2d55;
    --accent-soft: rgba(255, 45, 85, .18);
    --green: #32d174;
    --green-soft: rgba(50, 209, 116, .15);
    --red: #ff6369;
    --red-soft: rgba(255, 99, 105, .15);
    --amber: #ffb224;
    --amber-soft: rgba(255, 178, 36, .15);
    --shadow: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #000000; --bg-2: #1c1c1e; --bg-3: #2c2c2e; --text: #f5f5f7; --hint: #8d8d93;
  --sep: rgba(84, 84, 88, .45); --accent: #4f8cff; --accent-soft: rgba(79, 140, 255, .16);
  --green: #32d174; --green-soft: rgba(50, 209, 116, .15); --red: #ff6369; --red-soft: rgba(255, 99, 105, .15);
  --amber: #ffb224; --amber-soft: rgba(255, 178, 36, .15); --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 16px; line-height: 1.35; min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
svg.i { width: 22px; height: 22px; flex: none; }
/* Стрелка «→» в строках/карточках — размер задаём глобально, а не только
   внутри .item: иначе в других контейнерах SVG растягивался на всю ширину. */
svg.chev { width: 18px; height: 18px; flex: none; color: var(--hint); opacity: .55; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.muted { color: var(--hint); }
.small { font-size: 13px; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Каркас ─────────────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; padding: 12px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); max-width: 720px; margin: 0 auto; width: 100%; }
.screen { animation: fade-in .18s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen, .sheet, .toast { animation: none !important; transition: none !important; } }

.topbar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; }
.topbar .back { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 17px; background: none; border: none; padding: 8px 8px 8px 0; cursor: pointer; }
.topbar .back svg { width: 22px; height: 22px; }
.page-title { font-size: 28px; font-weight: 750; letter-spacing: -.4px; margin: 4px 0 14px; }
.page-sub { color: var(--hint); font-size: 14px; margin: -8px 0 16px; }
body.tg .topbar .back { display: none; } /* в Telegram — системная кнопка «Назад» */
/* Полноэкранный Telegram: сверху поверх контента лежат статус-бар и кнопки
   Telegram (закрыть/меню) — SDK отдаёт их высоту CSS-переменными. */
body.tg { --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); }
body.tg-fullscreen .main { padding-top: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
body.tg-fullscreen .toast-wrap { top: calc(10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
body.tg-fullscreen .login, body.tg-fullscreen .boot { padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }

/* Нижняя панель (телефон) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: .5px solid var(--sep);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; color: var(--hint); font-size: 11px; font-weight: 600; cursor: pointer; padding: 6px 0 0; }
.tab svg { width: 25px; height: 25px; }
.tab.active { color: var(--accent); }

/* Боковое меню (десктоп) */
.sidebar { display: none; }
@media (min-width: 900px) {
  .tabbar { display: none; }
  .main { padding: 28px 32px 48px; }
  .sidebar {
    display: flex; flex-direction: column; width: 260px; flex: none; position: sticky; top: 0; height: 100vh;
    padding: 20px 14px; background: var(--bg-2); border-right: .5px solid var(--sep);
  }
  .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; font-weight: 750; font-size: 17px; }
  .sidebar .nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
  .sidebar .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: none; border: none;
    color: var(--text); font-size: 15px; font-weight: 550; cursor: pointer; text-align: left; }
  .sidebar .nav-item svg { width: 21px; height: 21px; color: var(--hint); }
  .sidebar .nav-item:hover { background: var(--bg-3); }
  .sidebar .nav-item.active { background: var(--accent-soft); color: var(--accent); }
  .sidebar .nav-item.active svg { color: var(--accent); }
  .sidebar .nav-sep { height: .5px; background: var(--sep); margin: 10px 8px; }
  .sidebar .side-balance { margin: 0 4px 16px; padding: 14px; border-radius: var(--radius); background: var(--bg-3); }
}
.logo { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #5b8cff, #3452d6); }
.logo svg { width: 18px; height: 18px; }

/* ─── Карточки и сгруппированные списки ─────────────────────────────── */
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); font-weight: 600; margin: 22px 16px 7px; }
.section-title:first-child { margin-top: 4px; }
.section-foot { font-size: 13px; color: var(--hint); margin: 7px 16px 0; line-height: 1.4; }
.card { background: var(--bg-2); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.list { background: var(--bg-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.item {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 52px; position: relative;
  background: none; border: none; width: 100%; text-align: left; color: var(--text); font-size: 16px;
}
.item + .item::before { content: ""; pointer-events: none; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--sep); }
.item.with-icon + .item::before, .item.with-icon + .item.with-icon::before { left: 58px; }
button.item, a.item, .item.tap { cursor: pointer; }
button.item:active, a.item:active, .item.tap:active { background: var(--bg-3); }
.item .title { font-weight: 500; }
.item .sub { color: var(--hint); font-size: 14px; margin-top: 2px; }
.item .value { color: var(--hint); font-size: 15px; white-space: nowrap; }
.item .chev { color: var(--hint); opacity: .55; width: 18px; height: 18px; flex: none; }
.item.danger .title { color: var(--red); }
.item.accent .title { color: var(--accent); }
.ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; background: var(--accent); }
.ico svg { width: 19px; height: 19px; }
.ico.green { background: #34c759; } .ico.orange { background: #ff9500; } .ico.red { background: #ff3b30; }
.ico.purple { background: #af52de; } .ico.teal { background: #30b0c7; } .ico.gray { background: #8e8e93; }
.ico.indigo { background: #5856d6; } .ico.pink { background: #ff2d55; }
.ico.soft { background: var(--accent-soft); color: var(--accent); }

/* ─── Кнопки ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-size: 16px; font-weight: 600; padding: 13px 18px; border-radius: 16px; min-height: 50px;
  background: var(--accent); color: var(--accent-text); transition: opacity .15s, transform .1s; text-decoration: none;
}
.btn:active { transform: scale(.98); opacity: .85; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.block { width: 100%; }
.btn.secondary { background: var(--accent-soft); color: var(--accent); }
.btn.plain { background: var(--bg-3); color: var(--text); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn svg { width: 20px; height: 20px; }
.btn-row { display: flex; gap: 10px; }
/* min-width: 0 — иначе кнопки не сжимаются меньше ширины текста и на узком
   экране последняя уезжает за край карточки. */
.btn-row > .btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Главная: баланс ────────────────────────────────────────────────── */
.hero {
  border-radius: 22px; padding: 18px 18px 16px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, #ff2d55 0%, #b3002d 45%, #4a0013 100%);
  box-shadow: 0 12px 32px -16px rgba(255, 45, 85, .55);
}
/* Декоративный круг — под содержимым и «прозрачен» для нажатий: раньше он
   лежал поверх кнопки «Купить ключ» и съедал клики по её правой части. */
.hero::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -110px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; z-index: 0; }
.hero > * { position: relative; z-index: 1; }
.hero > .user { position: absolute; }
.hero .label { opacity: .8; font-size: 14px; font-weight: 500; }
.hero .amount { font-size: clamp(28px, 9vw, 40px); font-weight: 750; letter-spacing: -1px; margin: 2px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .btn-row .btn { white-space: nowrap; font-size: 15px; padding: 12px 10px; }
.hero .amount small { font-size: 22px; font-weight: 600; opacity: .8; margin-left: 4px; }
.hero .btn { background: rgba(255,255,255,.96); color: #7a0018; }
.hero .btn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.hero .user { position: absolute; top: 16px; right: 16px; font-size: 13px; opacity: .85; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.stat { background: var(--bg-2); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); cursor: pointer; border: none; text-align: left; color: var(--text); }
.stat .n { font-size: 22px; font-weight: 700; }
.stat .l { font-size: 13px; color: var(--hint); margin-top: 2px; }

/* ─── Баннеры / плашки ───────────────────────────────────────────────── */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: var(--radius); font-size: 15px; line-height: 1.4; }
.banner svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.banner.info { background: var(--accent-soft); color: var(--text); } .banner.info svg { color: var(--accent); }
.banner.warn { background: var(--amber-soft); } .banner.warn svg { color: var(--amber); }
.banner.danger { background: var(--red-soft); } .banner.danger svg { color: var(--red); }
.banner.success { background: var(--green-soft); } .banner.success svg { color: var(--green); }
.banner .actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.mt { margin-top: 12px; } .mt2 { margin-top: 20px; } .mb { margin-bottom: 12px; }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.gray { background: var(--bg-3); color: var(--hint); }
.pill.blue { background: var(--accent-soft); color: var(--accent); }

/* ─── Сегменты, чипы ─────────────────────────────────────────────────── */
.segmented { display: flex; background: var(--bg-3); border-radius: 14px; padding: 4px; gap: 2px; position: relative; }
.segmented button { flex: 1; border: none; background: none; color: var(--text); font-size: 14px; font-weight: 600; padding: 9px 6px; border-radius: 11px; cursor: pointer; position: relative; z-index: 1; transition: color .2s; }
.segmented button.active { background: var(--bg-2); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
:root[data-theme="dark"] .segmented button.active { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented button.active { background: #636366; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--sep); background: var(--bg-2); color: var(--text); padding: 9px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* Выбор варианта (тариф, сервер, способ оплаты) */
.options { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.options.two { grid-template-columns: 1fr 1fr; }
.option { border: 2px solid transparent; background: var(--bg-2); border-radius: var(--radius); padding: 14px; cursor: pointer; text-align: left; color: var(--text); box-shadow: var(--shadow); position: relative; }
.option.active { border-color: var(--accent); }
.option .o-title { font-weight: 650; }
.option .o-sub { color: var(--hint); font-size: 14px; margin-top: 3px; }
.option .o-price { font-size: 20px; font-weight: 700; margin-top: 6px; }
.option .badge-corner { position: absolute; top: -8px; right: 10px; }
.option:disabled { opacity: .45; cursor: default; }

/* ─── Поля ввода ─────────────────────────────────────────────────────── */
.field { display: block; }
.field + .field { margin-top: 12px; }
.field .lbl { display: block; font-size: 13px; color: var(--hint); margin: 0 4px 6px; font-weight: 500; }
.input, textarea.input, select.input {
  width: 100%; border: 1.5px solid transparent; background: var(--bg-3); color: var(--text);
  font-size: 16px; font-family: inherit; padding: 12px 14px; border-radius: 12px; outline: none;
}
.card .input { background: var(--bg-3); }
.input:focus { border-color: var(--accent); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.4; }
.input-amount { font-size: 30px; font-weight: 700; text-align: center; padding: 14px; }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.hint-err { color: var(--red); font-size: 14px; margin: 8px 4px 0; min-height: 0; }
.hint-ok { color: var(--green); font-size: 14px; margin: 8px 4px 0; }

/* Переключатель (iOS switch) */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--bg-3); border-radius: 999px; transition: background .2s; cursor: pointer; box-shadow: inset 0 0 0 1px var(--sep); }
.switch .track::after { content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.switch input:checked + .track { background: #34c759; box-shadow: none; }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:disabled + .track { opacity: .5; cursor: default; }

/* ─── Ключ доступа ───────────────────────────────────────────────────── */
.keybox { background: var(--bg-3); border-radius: 12px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; word-break: break-all; line-height: 1.45; max-height: 120px; overflow: auto; user-select: all; }
.qr { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: 16px; width: fit-content; margin: 0 auto; }
.qr { padding: 10px; }
.qr canvas, .qr img { display: block; width: min(300px, 76vw); height: auto; image-rendering: pixelated; }

.key-head { display: flex; align-items: center; gap: 14px; }
.key-head .big-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff; flex: none; }
.key-head .big-ico svg { width: 28px; height: 28px; }
.progress { height: 6px; background: var(--bg-3); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.progress.warn > div { background: var(--amber); } .progress.bad > div { background: var(--red); }

/* ─── Bottom sheet ───────────────────────────────────────────────────── */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; opacity: 0; transition: opacity .2s; }
.backdrop.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--bg); color: var(--text);
  border-radius: 18px 18px 0 0; padding: 8px 16px calc(18px + var(--safe-b)); max-height: 88vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.show { transform: none; }
.sheet .grabber { width: 38px; height: 5px; border-radius: 3px; background: var(--sep); margin: 2px auto 12px; }
.sheet h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.sheet .sheet-text { color: var(--hint); text-align: center; font-size: 15px; margin-bottom: 16px; line-height: 1.45; }
@media (min-width: 640px) {
  .sheet { left: 50%; right: auto; bottom: 50%; width: 440px; border-radius: 20px; transform: translate(-50%, 60%); opacity: 0; transition: transform .2s, opacity .2s; padding-bottom: 20px; }
  .sheet.show { transform: translate(-50%, 50%); opacity: 1; }
  .sheet .grabber { display: none; }
}

/* ─── Тосты ──────────────────────────────────────────────────────────── */
.toast-wrap { position: fixed; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: rgba(30, 30, 32, .94); color: #fff; padding: 11px 16px; border-radius: 14px; font-size: 15px; font-weight: 500; max-width: 440px;
  display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 28px rgba(0,0,0,.25); animation: toast-in .22s ease-out; }
.toast svg { width: 19px; height: 19px; flex: none; }
.toast.ok svg { color: #32d174; } .toast.err svg { color: #ff6369; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ─── Скелетоны / пустые состояния ───────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-2) 50%, var(--bg-3) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-line { height: 52px; margin-bottom: 1px; }
.empty-state { text-align: center; padding: 34px 20px; color: var(--hint); }
.empty-state .e-ico { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.empty-state .e-ico svg { width: 32px; height: 32px; }
.empty-state .e-title { color: var(--text); font-weight: 650; font-size: 17px; margin-bottom: 4px; }

/* ─── Шаги (установка, оплата) ───────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--hint); }
.step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); flex: none; }
.step.done { color: var(--text); } .step.done .dot { background: var(--green); color: #fff; }
.step.now { color: var(--text); font-weight: 600; } .step.now .dot { background: var(--accent-soft); color: var(--accent); }
.step .dot svg { width: 14px; height: 14px; }

/* ─── Вход ───────────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 20px; }
.login-box { width: 100%; max-width: 380px; text-align: center; }
.login-box .logo { width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 18px; }
.login-box .logo svg { width: 40px; height: 40px; }
.login-box h1 { font-size: 26px; font-weight: 750; margin-bottom: 8px; }
.login-box p { color: var(--hint); font-size: 15px; line-height: 1.45; margin-bottom: 22px; }
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--hint); }

/* ─── Мелочи ─────────────────────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.kv .k { color: var(--hint); } .kv .v { text-align: right; font-weight: 500; word-break: break-word; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-top: 12px; }
.chart .bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; position: relative; }
.chart .bar:hover { opacity: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { background: var(--bg-2); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.metric .n { font-size: 22px; font-weight: 700; } .metric .l { font-size: 13px; color: var(--hint); margin-top: 2px; }
.metric.tap { cursor: pointer; border: none; text-align: left; color: var(--text); font: inherit; }
.html-block { font-size: 15px; line-height: 1.5; }
.html-block blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.html-block code, code { font-family: var(--mono); font-size: 13px; background: var(--bg-3); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
pre.code { font-family: var(--mono); font-size: 13px; background: var(--bg-3); padding: 12px; border-radius: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0; }
.load-more { margin-top: 10px; }
.admin-badge { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: auto; }

/* ═══ Анимации и «живые» компоненты ═══════════════════════════════════ */
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes fill { from { width: 0; } }
.stagger > * { animation: rise .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* Отклик на нажатие — лёгкое «вдавливание», как у нативных кнопок. */
.item, .option, .key-tile, .cta, .stat, .metric.tap { transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s, background .2s; }
button.item:active, .option:active, .key-tile:active, .cta:active, .stat:active { transform: scale(.975); }

/* Сегменты со скользящей подложкой */
.segmented .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 11px; background: var(--bg-2);
  box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: transform .32s cubic-bezier(.3,1.3,.5,1), width .32s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.segmented.has-thumb button.active { background: transparent; box-shadow: none; }
.segmented.big { border-radius: 16px; }
.segmented.big button { padding: 11px 8px; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.segmented.big button svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .segmented .thumb { background: #3a3a3c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented .thumb { background: #3a3a3c; } }

/* CTA «Новый ключ» */
.cta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; border: none; cursor: pointer;
  text-align: left; color: #fff; padding: 18px; border-radius: var(--radius-lg); margin-bottom: 18px;
  background: linear-gradient(135deg, var(--c1, #6d5dfc), var(--c2, #3b5bdb)); box-shadow: 0 14px 30px -16px var(--c2, #3b5bdb); }
.cta.awg { --c1: #22c3b6; --c2: #1479d6; }
.cta.outline { --c1: #7b61ff; --c2: #3b4fd8; }
.cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: shine 3.6s ease-in-out infinite; }
.cta .plus { width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none;
  backdrop-filter: blur(4px); animation: float 3s ease-in-out infinite; }
.cta .plus svg { width: 26px; height: 26px; stroke-width: 2.4; }
.cta .t1 { font-size: 18px; font-weight: 750; letter-spacing: -.2px; }
.cta .t2 { font-size: 14px; opacity: .88; margin-top: 3px; }
.cta .arrow { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.cta .arrow svg { width: 18px; height: 18px; }

/* Карточка ключа в списке */
.key-list { display: flex; flex-direction: column; gap: 10px; }
.key-tile { display: block; width: 100%; border: none; cursor: pointer; text-align: left; color: var(--text); background: var(--bg-2);
  border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.key-tile .top { display: flex; align-items: center; gap: 12px; }
.key-tile .kicon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; font-size: 22px; }
.key-tile .kicon svg { width: 22px; height: 22px; }
.key-tile .name { font-weight: 650; font-size: 16px; }
.key-tile .meta { color: var(--hint); font-size: 13px; margin-top: 2px; }
.key-tile .bar { height: 5px; border-radius: 999px; background: var(--bg-3); margin-top: 12px; overflow: hidden; }
.key-tile .bar > div { height: 100%; border-radius: 999px; background: var(--green); animation: fill .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms + 150ms); }
.key-tile .bar.warn > div { background: var(--amber); } .key-tile .bar.bad > div { background: var(--red); }
.key-tile.dim { opacity: .62; }

/* Выбор сервера/срока при покупке */
.srv-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; }
.srv-card .flag { width: 46px; height: 46px; border-radius: 15px; background: var(--bg-3); display: grid; place-items: center; font-size: 26px; flex: none; }
.srv-card .info { flex: 1; min-width: 0; }
.chip-ping { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; }
.chip-ping::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ping.good { color: var(--green); background: var(--green-soft); } .chip-ping.mid { color: var(--amber); background: var(--amber-soft); }
.chip-ping.bad { color: var(--red); background: var(--red-soft); } .chip-ping.none { color: var(--hint); background: var(--bg-3); }
.load { height: 4px; border-radius: 999px; background: var(--bg-3); margin-top: 8px; overflow: hidden; }
.load > div { height: 100%; border-radius: 999px; background: var(--accent); animation: fill 1s cubic-bezier(.2,.8,.2,1) both; }
.option .tick { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: none; place-items: center; }
.option .tick svg { width: 15px; height: 15px; stroke-width: 3; }
.option.active .tick { display: grid; animation: pop .35s cubic-bezier(.2,.8,.2,1); }
.option.active { box-shadow: 0 0 0 1px var(--accent), 0 10px 26px -14px var(--accent); }
.term { padding: 18px 14px; text-align: center; }
.term .o-title { font-size: 15px; }
.term .o-price { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 6px; }
.term .per { color: var(--hint); font-size: 13px; margin-top: 2px; }
.term .badge-corner { top: -10px; right: 50%; transform: translateX(50%); }

/* Нижняя панель оплаты (над таб-баром) */
.paybar { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); z-index: 20; margin-top: 22px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg); padding: 14px; box-shadow: 0 12px 34px -12px rgba(0,0,0,.35); animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.paybar .sum { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.paybar .sum .v { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
@media (min-width: 900px) { .paybar { bottom: 16px; } }

/* Логотипы приложений */
.app-ico { width: 100%; height: 100%; border-radius: 28%; display: block; object-fit: cover; }
.seg-ico { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.key-tile .kicon { background: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); border-radius: 14px; overflow: hidden; }
.key-head .big-ico { overflow: hidden; border-radius: 15px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.flag-inline { margin-right: 6px; }
.cta .plus { background: none; position: relative; backdrop-filter: none; }
.cta .plus .app-ico { box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); }
.cta .plus-badge { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--c2);
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.cta .plus-badge svg { width: 14px; height: 14px; stroke-width: 3; }
.guide-link { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: var(--bg-2); color: var(--text); text-align: left;
  border-radius: var(--radius); padding: 12px 14px; margin: -6px 0 18px; cursor: pointer; box-shadow: var(--shadow); }
.guide-link .gi { width: 36px; height: 36px; flex: none; }
.guide-link .grow { min-width: 0; }
.guide-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.guide-step + .guide-step { border-top: .5px solid var(--sep); }
.guide-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 750; display: grid; place-items: center; flex: none; font-size: 14px; }
.guide-step .tx { font-size: 15px; line-height: 1.45; padding-top: 3px; }
.dl-card { display: flex; align-items: center; gap: 12px; }
.dl-card .gi { width: 52px; height: 52px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .stagger > *, .cta::after, .cta .plus, .key-tile .bar > div, .load > div, .option.active .tick, .paybar { animation: none !important; }
  .segmented .thumb { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ ДИЗАЙН v2: темы разделов, фон, глассморфизм, единая анимация.
   Этот слой лежит в конце файла и переопределяет прежние правила.
   ═══════════════════════════════════════════════════════════════════════ */

/* Плавный переход цветов темы между разделами (@property — Safari 16.4+,
   Chrome 85+; в старых браузерах цвета просто меняются мгновенно). */
@property --sec-1 { syntax: "<color>"; inherits: true; initial-value: #4f8cff; }
@property --sec-2 { syntax: "<color>"; inherits: true; initial-value: #3b5bdb; }

:root {
  --sec-1: #ff2d55; --sec-2: #a30024;
  /* единые «характер» и скорость движения для ВСЕГО интерфейса */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur-1: .16s; --dur-2: .3s; --dur-3: .48s;
  --glass: color-mix(in srgb, var(--bg-2) 80%, transparent);
  --glass-line: color-mix(in srgb, var(--text) 9%, transparent);
  transition: --sec-1 .7s ease, --sec-2 .7s ease;
}
:root[data-sec="brand"]    { --sec-1: #ff2d55; --sec-2: #a30024; }
:root[data-sec="outline"]  { --sec-1: #ff2d55; --sec-2: #a30024; }
:root[data-sec="awg"]      { --sec-1: #e0455f; --sec-2: #8c1d3f; }
:root[data-sec="deposit"]  { --sec-1: #ffb020; --sec-2: #ff6a1a; }
:root[data-sec="subs"]     { --sec-1: #ff2d55; --sec-2: #a30024; }
:root[data-sec="market"]   { --sec-1: #ff9f3a; --sec-2: #ff4f5e; }
:root[data-sec="private"]  { --sec-1: #b45cf0; --sec-2: #6a3fdc; }
:root[data-sec="reseller"] { --sec-1: #4cc9f0; --sec-2: #3a7bd5; }
:root[data-sec="history"]  { --sec-1: #3fc6d6; --sec-2: #2a7fa8; }
:root[data-sec="admin"]    { --sec-1: #ff6b8a; --sec-2: #c2367a; }
:root[data-sec="tg"]       { --sec-1: #2aabee; --sec-2: #1d6fd1; }

/* ─── Фон: медленное «северное сияние» цвета раздела ─────────────────── */
html { background: var(--bg); }
body { background: transparent; }
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg i { position: absolute; border-radius: 50%; will-change: transform; opacity: .5; }
.bg i:nth-child(1) { width: 78vmax; height: 78vmax; left: -34vmax; top: -40vmax;
  background: radial-gradient(circle at 50% 50%, var(--sec-1), transparent 62%); animation: drift-a 34s ease-in-out infinite alternate; }
.bg i:nth-child(2) { width: 70vmax; height: 70vmax; right: -36vmax; top: 18vh;
  background: radial-gradient(circle at 50% 50%, var(--sec-2), transparent 62%); animation: drift-b 42s ease-in-out infinite alternate; opacity: .38; }
.bg i:nth-child(3) { width: 60vmax; height: 60vmax; left: -10vmax; bottom: -42vmax;
  background: radial-gradient(circle at 50% 50%, var(--sec-1), transparent 64%); animation: drift-c 38s ease-in-out infinite alternate; opacity: .28; }
.bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--bg) 100%); opacity: .55; }
@keyframes drift-a { to { transform: translate3d(16vmax, 12vmax, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-14vmax, -10vmax, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(18vmax, -12vmax, 0) scale(1.15); } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg i { opacity: .3; } :root:not([data-theme="dark"]) .bg i:nth-child(2) { opacity: .22; } :root:not([data-theme="dark"]) .bg i:nth-child(3) { opacity: .16; } }
:root[data-theme="light"] .bg i { opacity: .3; } :root[data-theme="light"] .bg i:nth-child(2) { opacity: .22; } :root[data-theme="light"] .bg i:nth-child(3) { opacity: .16; }

/* ─── Единая анимация: одни и те же длительность и кривая везде ──────── */
.btn, .item, .option, .chip, .tile, .key-tile, .cta, .stat, .card, .list, .input, .switch .track, .switch .track::after,
.segmented button, .tab, .nav-item, .hint, .hint-body, .offer, .notice, .star, .progress > div, .load > div, .toast, .sec-hero {
  transition-duration: var(--dur-2); transition-timing-function: var(--ease);
}
.screen { animation: rise var(--dur-3) var(--ease) both; }
.stagger > *, .paybar, .notice { animation-duration: var(--dur-3); animation-timing-function: var(--ease); }
.sheet { transition-duration: var(--dur-3); transition-timing-function: var(--ease); }
.backdrop { transition-duration: var(--dur-2); }

/* ─── Стеклянные карточки и списки ───────────────────────────────────── */
.card, .list, .key-tile, .option, .stat, .metric, .hint, .paybar {
  background: var(--glass); border: .5px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.key-tile, .option { -webkit-backdrop-filter: none; backdrop-filter: none; } /* их много — без blur ради скорости */
.list { border-radius: var(--radius-lg); }
.item { min-height: 56px; padding-top: 12px; padding-bottom: 12px; }
.ico { border-radius: 12px; width: 36px; height: 36px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); }
.ico svg { width: 20px; height: 20px; }
.section-title { color: color-mix(in srgb, var(--sec-1) 70%, var(--hint)); letter-spacing: .06em; }

/* Основные кнопки — градиент цвета раздела */
.btn:not(.secondary):not(.plain):not(.danger) {
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); color: #fff;
  box-shadow: 0 10px 22px -12px var(--sec-2);
}
.btn.secondary { background: color-mix(in srgb, var(--sec-1) 16%, transparent); color: color-mix(in srgb, var(--sec-1) 88%, var(--text)); }
.hero .btn, .cta .btn { box-shadow: none; }
.hero .btn:not(.ghost) { background: rgba(255,255,255,.96); color: #7a0018; }
.hero .btn.ghost { background: rgba(255,255,255,.16); color: #fff; }
.hero { background: radial-gradient(120% 140% at 100% 0%, var(--sec-1) 0%, var(--sec-2) 60%, color-mix(in srgb, var(--sec-2) 60%, #000) 100%); }
.cta { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 16px 34px -18px var(--sec-2); }
.cta.awg { background: linear-gradient(135deg, #e0455f, #8c1d3f); box-shadow: 0 16px 34px -18px #8c1d3f; }
.cta.awg .plus-badge { color: #8c1d3f; }
.cta.outline { background: linear-gradient(135deg, #3fe08a, #0f9d63); box-shadow: 0 16px 34px -18px #0f9d63; }
.cta.outline .plus-badge { color: #0f9d63; }
.cta .plus-badge { color: var(--sec-2); }
.progress > div, .load > div { background: linear-gradient(90deg, var(--sec-1), var(--sec-2)); }
.chip.active, .option.active { border-color: var(--sec-1); }
.option.active { box-shadow: 0 0 0 1px var(--sec-1), 0 12px 28px -16px var(--sec-1); }
.option .tick { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.tab.active, .nav-item.active { color: var(--sec-1); }
.nav-item.active { background: color-mix(in srgb, var(--sec-1) 16%, transparent); }
.nav-item.active svg { color: var(--sec-1); }
.input:focus { border-color: var(--sec-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec-1) 18%, transparent); }
a, .topbar .back { color: color-mix(in srgb, var(--sec-1) 90%, var(--text)); }
.spinner { color: var(--sec-1); }
.tabbar { background: color-mix(in srgb, var(--bg-2) 78%, transparent); }
.sidebar { background: color-mix(in srgb, var(--bg-2) 70%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* ─── Шапка раздела ──────────────────────────────────────────────────── */
.sec-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; color: #fff; margin: 4px 0 16px;
  padding: 18px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 18px 36px -20px var(--sec-2); }
.sec-hero::before { content: ""; position: absolute; width: 190px; height: 190px; right: -50px; top: -80px; border-radius: 50%;
  background: rgba(255,255,255,.14); pointer-events: none; }
.sec-hero::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: shine 5s ease-in-out infinite; }
.sec-hero .sh-ico { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.22);
  display: grid; place-items: center; flex: none; overflow: hidden; }
.sec-hero .sh-ico svg { width: 28px; height: 28px; stroke-width: 2; }
.sec-hero .sh-ico .app-ico { border-radius: 16px; }
.sec-hero .sh-tx { position: relative; z-index: 1; min-width: 0; }
.sec-hero h1 { font-size: 22px; font-weight: 780; letter-spacing: -.3px; }
.sec-hero p { font-size: 14px; opacity: .9; margin-top: 3px; line-height: 1.35; }

/* ─── Подсказка «Как это работает» ───────────────────────────────────── */
.hint { border-radius: var(--radius); margin: 0 0 16px; overflow: hidden; }
.hint-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: none; background: none; color: var(--text);
  font-size: 15px; font-weight: 650; cursor: pointer; text-align: left; }
.hint-head > svg { width: 20px; height: 20px; color: var(--sec-1); flex: none; }
.hint-x { width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; color: var(--hint); flex: none; }
.hint.open .hint-x { display: grid; }
.hint-x svg { width: 15px; height: 15px; }
.hint-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.hint.open .hint-body { grid-template-rows: 1fr; }
.hint-list { margin: 0; padding: 0 16px 0 38px; overflow: hidden; color: var(--hint); font-size: 14px; line-height: 1.5; }
.hint.open .hint-list { padding-bottom: 14px; }
.hint-list li + li { margin-top: 6px; }

/* ─── Бесплатные предложения: пробник и промо — светятся ─────────────── */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ang { to { --ang: 360deg; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--g1), 0 10px 30px -12px var(--g1); } 50% { box-shadow: 0 0 0 5px transparent, 0 14px 38px -8px var(--g2); } }
.offer, .option.free { --g1: rgba(255,180,40,.55); --g2: rgba(255,90,120,.6); }
.offer.trial, .option.free.trial { --g1: rgba(52,214,122,.55); --g2: rgba(31,209,184,.6); --c1: #34d67a; --c2: #1fd1b8; --c3: #4cc9f0; }
.offer.promo, .option.free.promo { --c1: #ffb020; --c2: #ff5e7e; --c3: #b45cf0; }
.offer { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; border: 2px solid transparent; cursor: pointer; text-align: left; color: var(--text);
  padding: 14px; border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c3), var(--c1)) border-box;
  animation: ang 4.5s linear infinite, glow-pulse 2.8s ease-in-out infinite; }
.offer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); animation: shine 3.2s ease-in-out infinite; }
.offer:active { transform: scale(.975); }
.offer .of-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2)); animation: float 3s ease-in-out infinite; }
.offer .of-ico svg { width: 24px; height: 24px; stroke-width: 2.2; }
.offer .of-t { font-weight: 720; font-size: 16px; }
.offer .of-s { color: var(--hint); font-size: 13px; margin-top: 2px; }
.offer .of-cta { flex: none; font-weight: 700; font-size: 14px; color: #fff; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.option.free { border: 2px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c3), var(--c1)) border-box;
  animation: ang 4.5s linear infinite, glow-pulse 2.8s ease-in-out infinite; }
.option.free.active { box-shadow: 0 0 0 1px var(--c1), 0 14px 32px -12px var(--c2); }
.option.free .free-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(135deg, var(--c1), var(--c2)); margin-bottom: 6px; }
.option.free .o-price { font-size: 24px; }
.free-block { margin-top: 4px; }

/* Промокод: подсказка-строка */
.promo-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 1.5px dashed color-mix(in srgb, var(--sec-1) 55%, transparent); background: var(--glass);
  color: var(--text); padding: 12px 14px; border-radius: var(--radius); cursor: pointer; text-align: left; margin-bottom: 12px; }
.promo-row .pr-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(135deg, #ffb020, #ff5e7e); }
.promo-row .pr-ico svg { width: 20px; height: 20px; }
.promo-row:active { transform: scale(.98); }

/* ─── Объявления от админа ───────────────────────────────────────────── */
.notices { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.notice { --n1: #4f8cff; --n2: #3b5bdb; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 14px 44px 14px 14px;
  border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--n1), var(--n2)); box-shadow: 0 16px 34px -18px var(--n2);
  animation: rise var(--dur-3) var(--ease) both; }
.notice.promo { --n1: #ff9f3a; --n2: #ff4f7a; } .notice.warning { --n1: #ffb020; --n2: #e0561a; } .notice.success { --n1: #34d67a; --n2: #0e9f8a; }
.notice::before { content: ""; position: absolute; width: 150px; height: 150px; right: -40px; top: -60px; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
.notice .n-ico { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex: none; position: relative; }
.notice .n-ico svg { width: 21px; height: 21px; stroke-width: 2.1; }
.notice .n-tx { position: relative; min-width: 0; flex: 1; }
.notice .n-t { font-weight: 760; font-size: 16px; line-height: 1.25; }
.notice .n-s { font-size: 14px; opacity: .93; margin-top: 4px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; }
.notice .n-btn { margin-top: 10px; border: none; cursor: pointer; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; color: var(--n2); background: #fff; }
.notice .n-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  color: #fff; background: rgba(0,0,0,.18); }
.notice .n-x svg { width: 15px; height: 15px; stroke-width: 2.4; }
.notice.leaving { opacity: 0; transform: translateX(40px) scale(.96); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; transition: all var(--dur-2) var(--ease); }

/* ─── Оценка ключа ───────────────────────────────────────────────────── */
.stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 2px; }
.star { width: 46px; height: 46px; border: none; background: none; cursor: pointer; padding: 4px; color: var(--hint); opacity: .55; }
.star svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.star.on { color: #ffb400; opacity: 1; }
.star.on svg { fill: currentColor; animation: pop .38s var(--ease); }
.star:active { transform: scale(.85); }
.rate-note { text-align: center; color: var(--hint); font-size: 14px; min-height: 18px; margin-top: 2px; }

/* ─── Карточка срока (исправлено: плашка больше не налезает на рамку) ─── */
.term { padding: 12px 12px 16px; text-align: center; }
.term .term-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
  color: var(--hint); background: var(--bg-3); }
.term .term-tag.save { color: #fff; background: linear-gradient(135deg, #34d67a, #0e9f8a); }
.term .badge-corner { display: none; }
.term .o-title { font-size: 15px; }
.term .tick { top: 8px; right: 8px; }

/* Приватный сервер: крупный блок-преимущества */
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.perk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--glass); border: .5px solid var(--glass-line); }
.perk svg { width: 15px; height: 15px; color: var(--sec-1); }

@media (prefers-reduced-motion: reduce) {
  .bg i, .offer, .option.free, .sec-hero::after, .offer::after, .offer .of-ico, .notice, .screen { animation: none !important; }
  .hint-body, .root { transition: none !important; }
}

.offers-slot:not(:empty) { margin-top: 14px; }
.offers-slot .offer:last-child { margin-bottom: 0; }

/* Подсказки свёрнуты по умолчанию */
.hint .hint-chev { width: 20px; height: 20px; color: var(--hint); flex: none; transition: transform var(--dur-2) var(--ease); }
.hint.open .hint-chev { transform: rotate(90deg); }
.hint-x { display: none !important; }
/* Поле промокода на главной */
.promo-inline { margin-top: 14px; padding: 14px; border-radius: var(--radius-lg); background: var(--glass); border: 1.5px dashed color-mix(in srgb, var(--sec-1) 55%, transparent); }
.promo-inline .pi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.promo-inline .pr-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #ffb020, #ff5e7e); }
.promo-inline .pr-ico svg { width: 18px; height: 18px; }
.promo-inline .input { text-transform: uppercase; letter-spacing: .04em; }
.promo-inline .input::placeholder { text-transform: none; letter-spacing: 0; }
.promo-inline .btn { white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.promo-inline .hint-err:empty { display: none; }

/* Быстрые действия на главной */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa { display: flex; align-items: center; gap: 12px; border: .5px solid var(--glass-line); background: var(--glass); color: var(--text);
  border-radius: var(--radius-lg); padding: 14px; cursor: pointer; text-align: left; font: inherit; box-shadow: var(--shadow);
  transition: transform var(--dur-1) var(--ease); }
.qa:active { transform: scale(.96); }
.qa-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.qa-ico svg { width: 21px; height: 21px; }
.qa-t { font-weight: 650; font-size: 15px; line-height: 1.2; }

/* Избранное и сортировка ключей */
.fav { width: 34px; height: 34px; margin: -6px -6px -6px 0; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--hint); opacity: .7;
  transition: transform var(--dur-1) var(--ease), color var(--dur-2) var(--ease), opacity var(--dur-2); cursor: pointer; }
.fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.fav:active { transform: scale(.8); }
.fav.on { color: #ffb400; opacity: 1; }
.fav.on svg { fill: currentColor; animation: pop .38s var(--ease); }
.key-tile.is-fav { box-shadow: 0 0 0 1px color-mix(in srgb, #ffb400 55%, transparent), var(--shadow); }
.section-title.fav-title { display: flex; align-items: center; gap: 6px; color: #ffb400; }
.section-title.fav-title svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.section-title.group-title { display: flex; align-items: center; }
.sort-seg { margin: 4px 0 6px; }
.sort-seg button { font-size: 13px; padding: 8px 4px; }

/* ─── Карточка баланса: тёмный индиго и «живая» анимация ─────────────── */
.hero { background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--sec-1) 78%, #000) 0%, var(--sec-2) 58%, color-mix(in srgb, var(--sec-2) 45%, #000) 100%);
  animation: hero-in var(--dur-3) var(--ease) both, hero-glow 5.5s ease-in-out infinite; }
.hero::before { content: ""; position: absolute; width: 280px; height: 280px; left: -100px; top: -130px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); animation: orb 10s ease-in-out infinite alternate; }
.hero .hero-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); animation: shine 6s ease-in-out infinite; }
.hero .amount { text-shadow: 0 2px 28px rgba(255,255,255,.2); font-variant-numeric: tabular-nums; }
.hero .btn:not(.ghost) { color: #7a0018; }
.stat .n { font-variant-numeric: tabular-nums; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes hero-glow { 0%, 100% { box-shadow: 0 18px 40px -22px var(--sec-2); } 50% { box-shadow: 0 24px 56px -16px color-mix(in srgb, var(--sec-1) 65%, transparent); } }
@keyframes orb { to { transform: translate(70px, 50px) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .hero, .hero::before, .hero .hero-shine { animation: none !important; } }

/* ─── Пак иконок: приложение + флаг страны ────────────────────────────── */
.srv-card .flag.pk { background: none; overflow: hidden; border-radius: 14px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.srv-card .flag.pk .app-ico { border-radius: 0; }
.reissue-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; }
.reissue-seg .seg-ico { width: 24px; height: 24px; border-radius: 7px; flex: none; object-fit: cover; }
.item.pk-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; }
.item.pk-item .pk-ico { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 6px 14px -6px rgba(0,0,0,.55); }
.item.pk-item .pk-ico .app-ico { border-radius: 0; }
.item.pk-item.disabled { opacity: .5; pointer-events: none; }

/* ─── Сортировка ключей: «пилюли» в стиле приложения ──────────────────── */
.sort-chips { display: flex; gap: 8px; margin: 6px 0 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 6px; }
.sort-chips::-webkit-scrollbar { display: none; }
.sort-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: .5px solid var(--glass-line); background: var(--glass); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 650; padding: 9px 14px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.sort-chip:active { transform: scale(.96); }
.sort-chip .arr { display: none; width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.sort-chip .arr svg { width: 14px; height: 14px; display: block; }
.sort-chip.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 8px 20px -10px var(--sec-1); }
.sort-chip.active .arr { display: inline-block; }
.sort-chip.active .arr.asc { transform: rotate(180deg); }
.sort-cap { font-size: 12px; color: var(--hint); margin: 0 2px 8px; }

/* Кнопка в объявлении — компактная пилюля, не растягивается на ширину */
.notice .n-tx { display: flex; flex-direction: column; align-items: flex-start; }
.notice .n-btn { align-self: flex-start; width: auto; min-width: 0; flex: none; margin-top: 8px; font-size: 13px; padding: 6px 14px; line-height: 1.3; letter-spacing: 0; }
.notice .n-btn { position: relative; z-index: 1; }

/* ─── Режим просмотра «от имени пользователя» ─────────────────────────── */
.imp-bar { position: sticky; top: 0; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px);
  background: linear-gradient(90deg, #6d28d9, #db2777); color: #fff; font-size: 13px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); }
.imp-bar .imp-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.imp-bar .imp-t svg { width: 18px; height: 18px; flex: none; }
.imp-bar .imp-x { flex: none; border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #6d28d9; }
/* плашка занимает своё место сверху (sticky), а не перекрывает заголовок страницы */
body.impersonating .sidebar, body.impersonating .tabbar { top: auto; }

/* Группа установок по заказу: последняя попытка сверху, история — раскрывается */
.inst-group { padding: 0; overflow: hidden; }
.inst-group > .item { border-radius: 0; }
.inst-hist > summary { list-style: none; cursor: pointer; padding: 10px 16px; font-size: 13px; color: var(--hint); border-top: .5px solid var(--glass-line); display: flex; align-items: center; }
.inst-hist > summary::-webkit-details-marker { display: none; }
.inst-hist > summary::after { content: "›"; margin-left: auto; font-size: 18px; transition: transform var(--dur-2) var(--ease); }
.inst-hist[open] > summary::after { transform: rotate(90deg); }
.inst-hist .list { border-top: .5px solid var(--glass-line); background: color-mix(in srgb, var(--text) 3%, transparent); }

/* Карточка установки у пользователя */
.inst-card.bad { border-color: color-mix(in srgb, var(--red, #ff453a) 45%, transparent); }
.inst-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; }
.inst-ico svg { width: 20px; height: 20px; }
.inst-ico.run { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.inst-ico.bad { background: linear-gradient(135deg, #ff6b6b, #c2367a); }
.inst-ico.ok { background: linear-gradient(135deg, #34d67a, #0e9f8a); }
.inst-reasons { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inst-reasons li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.4; }
.inst-reasons li::before { content: "✕"; position: absolute; left: 0; color: var(--red, #ff453a); font-weight: 800; }

/* Пробный период / промо не должны прилипать к кнопке «Новый ключ» */
.offers-slot:not(:empty) { margin-bottom: 18px; }

/* Иконка «приложение + флаг» в списках */
.item.pk-row .pk-ico { width: 44px; height: 44px; border-radius: 13px; overflow: hidden; flex: none; box-shadow: 0 5px 12px -5px rgba(0,0,0,.5); }
.item.pk-row .pk-ico .app-ico { border-radius: 0; }
.key-tile .kicon .app-ico { border-radius: 0; }

/* Аналитика */
.bar-mini { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 8%, transparent); margin-top: 6px; overflow: hidden; }
.bar-mini i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sec-1), var(--sec-2)); }
.input-row .input + .input { margin-left: 8px; }

.feed-form { flex-wrap: wrap; gap: 8px; }
.feed-form .input:first-child { flex: 1 1 100%; }
.feed-form .input + .input { margin-left: 0; flex: 1 1 0; min-width: 0; }

/* Календарь выбора периода */
.cal-quick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 1px 10px; scrollbar-width: none; }
.cal-quick::-webkit-scrollbar { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; font-size: 16px; }
.cal-nav { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--glass); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; }
.cal-dow span { text-align: center; font-size: 12px; color: var(--hint); padding: 4px 0; }
.cal-day { height: 42px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; position: relative; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.cal-day:disabled { opacity: .28; cursor: default; }
.cal-day.in { background: color-mix(in srgb, var(--sec-1) 22%, transparent); }
.cal-day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sec-1); }
.cal-day.edge { color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); border-radius: 12px; z-index: 1; }
.cal-day.in.s:not(.e) { border-radius: 12px 0 0 12px; } .cal-day.in.e:not(.s) { border-radius: 0 12px 12px 0; }
.cal-day.edge.s.e { border-radius: 12px; }
.cal-sum { text-align: center; margin: 12px 0 0; font-size: 14px; color: var(--hint); min-height: 20px; }
.cal-sum b { color: var(--text); }

/* Ряды кнопок, которые не влезают, переносятся, а не обрезаются */
.btn-row.wrap { flex-wrap: wrap; }
.btn-row.wrap > .btn { flex: 1 1 auto; white-space: nowrap; }

/* Данные пользователя в админке (сворачиваемые группы) */
.ugroup { background: var(--glass); border: .5px solid var(--glass-line); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }
.ugroup > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 6px; }
.ugroup > summary::-webkit-details-marker { display: none; }
.ugroup > summary::after { content: "›"; margin-left: auto; font-size: 20px; color: var(--hint); transition: transform var(--dur-2) var(--ease); }
.ugroup[open] > summary::after { transform: rotate(90deg); }
.ugroup .ubody { padding: 2px 16px 12px; }
.urow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-top: .5px solid var(--glass-line); }
.urow:first-child { border-top: none; }
.urow > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.urow.col { flex-direction: column; gap: 3px; }

/* Журнал установки */
.joblog { max-height: 260px; overflow: auto; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 12px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; }
.joblog .t { color: var(--hint); margin-right: 6px; }
.instbar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; margin-top: 10px; }
.instbar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--sec-1), var(--sec-2)); transition: width .8s var(--ease); }

/* Логотип ShadowVPN (щит с замочной скважиной) — заполняет плитку */
.logo { background: radial-gradient(circle at 50% 45%, #1b2a5c 0%, #0b1226 72%); box-shadow: inset 0 0 0 1px rgba(110, 150, 255, .28); }
.logo svg.mark, .login-box .logo svg.mark { width: 86%; height: 86%; filter: drop-shadow(0 0 5px rgba(88, 140, 255, .65)); }
.login-box .logo { box-shadow: inset 0 0 0 1px rgba(110, 150, 255, .3), 0 10px 34px rgba(60, 100, 255, .38); }
.n-disc { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.28); vertical-align: 1px; }
.old-price { text-decoration: line-through; opacity: .55; font-weight: 500; font-size: .82em; margin-right: 4px; }
.hint-err { white-space: pre-line; }
.req-list { display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.req-list > div { padding-left: 14px; position: relative; }
.req-list > div::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--sec-1); }

/* Простые заголовки разделов (вместо градиентных баннеров); слева — маленький логотип, если он есть */
.page-title.with-ico { display: flex; align-items: center; gap: 12px; }
.page-title .pt-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.page-title .pt-ico .app-ico { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.page-title .pt-ico svg.yy { width: 40px; height: 40px; }
/* Логотип приватного сервера (инь-ян с иконками Outline и AmneziaVPN) */
svg.yy { display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.ico.plain { background: none; box-shadow: none; }
.ico.plain svg.yy { width: 100%; height: 100%; filter: none; }
.cta .plus.yy-plus { width: 52px; height: 52px; }
.cta .plus.yy-plus svg.yy { width: 100%; height: 100%; stroke-width: 0; }
.key-tile .kicon svg.yy { width: 100%; height: 100%; filter: none; }
.key-tile .kicon:has(svg.yy) { box-shadow: none; overflow: visible; }

/* Градиентная карточка раздела (как баланс на главной): ввод суммы, «спишется за 30 дней», опт-баланс */
.card.gcard { position: relative; overflow: hidden; border: none; color: #fff; z-index: 0;
  background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--sec-1) 78%, #000) 0%, var(--sec-2) 58%, color-mix(in srgb, var(--sec-2) 45%, #000) 100%);
  box-shadow: 0 18px 40px -22px var(--sec-2); animation: hero-in var(--dur-3) var(--ease) both, hero-glow 5.5s ease-in-out infinite; }
.card.gcard::before { content: ""; position: absolute; width: 240px; height: 240px; left: -90px; top: -120px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); animation: orb 10s ease-in-out infinite alternate; }
.card.gcard::after { content: ""; position: absolute; width: 200px; height: 200px; right: -70px; bottom: -100px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; z-index: -1; }
.gcard .hero-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); animation: shine 6s ease-in-out infinite; }
.gcard .muted, .gcard .small.muted { color: rgba(255,255,255,.78); }
.gcard .g-big { font-size: 30px; font-weight: 780; letter-spacing: -.6px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(255,255,255,.2); }
.gcard .g-mid { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gcard .btn { background: rgba(255,255,255,.95); color: color-mix(in srgb, var(--sec-2) 85%, #000); box-shadow: none; }
.gcard .btn.secondary, .gcard .btn.plain { background: rgba(255,255,255,.2); color: #fff; }
.gcard .banner { background: rgba(255,255,255,.16); color: #fff; border: none; }
.gcard .banner svg { color: #fff; }
.gcard .input-amount { background: rgba(255,255,255,.2); color: #fff; border: none; box-shadow: none; }
.gcard .input-amount::placeholder { color: rgba(255,255,255,.65); }
.gcard .input-amount:focus { background: rgba(255,255,255,.28); }
.gcard .chip { background: rgba(255,255,255,.2); color: #fff; border: none; }
.gcard .chip:active { background: rgba(255,255,255,.34); }
.gcard .chips .chip { animation: rise .4s var(--ease) both; }
.gcard .chips .chip:nth-child(1) { animation-delay: .18s; } .gcard .chips .chip:nth-child(2) { animation-delay: .23s; }
.gcard .chips .chip:nth-child(3) { animation-delay: .28s; } .gcard .chips .chip:nth-child(4) { animation-delay: .33s; } .gcard .chips .chip:nth-child(5) { animation-delay: .38s; }
.gcard .keybox { background: rgba(255,255,255,.16); color: #fff; }

/* Анимации открытия экранов: заголовок выезжает, блоки появляются каскадом */
@keyframes title-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ico-in { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 65% { transform: scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.page-title { animation: title-in .5s var(--ease) both; }
.page-title .pt-ico { animation: ico-in .6s var(--ease) .08s both; }
.screen > :not(.hero):not(.gcard):not(.paybar):not(.notice):not(.stagger):not(.topbar):not(.page-title) { animation: rise .46s var(--ease) both; }
.screen > :nth-child(3) { animation-delay: .05s !important; } .screen > :nth-child(4) { animation-delay: .1s !important; }
.screen > :nth-child(5) { animation-delay: .15s !important; } .screen > :nth-child(6) { animation-delay: .2s !important; }
.screen > :nth-child(n+7) { animation-delay: .25s !important; }
.cta { animation: rise .5s var(--ease) both, hero-glow 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .card.gcard, .card.gcard::before, .gcard .hero-shine, .page-title, .page-title .pt-ico, .gcard .chips .chip, .cta { animation: none !important; } }

/* ─── Заказ приватного сервера ────────────────────────────────────────── */
.option.tier-card { display: flex; align-items: center; gap: 13px; padding: 14px 14px 14px 14px; }
.tier-meter { width: 40px; height: 40px; flex: none; border-radius: 13px; display: flex; align-items: flex-end; justify-content: center; gap: 3.5px; padding: 9px 0 9px;
  background: color-mix(in srgb, var(--sec-1) 14%, transparent); }
.tier-meter i { width: 5px; border-radius: 2px; background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .25s, transform .3s var(--ease); transform-origin: bottom; }
.tier-meter i:nth-child(1) { height: 9px; } .tier-meter i:nth-child(2) { height: 15px; } .tier-meter i:nth-child(3) { height: 21px; }
.tier-meter i.on { background: linear-gradient(180deg, var(--sec-1), var(--sec-2)); }
.tier-card.active .tier-meter i.on { animation: bar-up .5s var(--ease) both; }
.tier-card.active .tier-meter i:nth-child(2) { animation-delay: .05s; } .tier-card.active .tier-meter i:nth-child(3) { animation-delay: .1s; }
@keyframes bar-up { from { transform: scaleY(.3); } to { transform: none; } }
.tier-meter.custom { align-items: center; padding: 0; color: var(--sec-1); } .tier-meter.custom svg { width: 22px; height: 22px; }
.tier-card .o-title { font-size: 16px; }
.tier-price { text-align: right; flex: none; white-space: nowrap; line-height: 1.2; }
.tier-price b { display: block; font-size: 17px; font-weight: 750; }
.tier-price small { font-size: 12px; color: var(--hint); font-weight: 500; }
.radio { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--text) 22%, transparent);
  color: #fff; transition: background .2s, border-color .2s; }
.radio svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.active > .radio { border-color: transparent; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.active > .radio svg { opacity: 1; transform: none; }
.radio.sm { width: 20px; height: 20px; } .radio.sm svg { width: 12px; height: 12px; }
.tier-card.active { background: linear-gradient(135deg, color-mix(in srgb, var(--sec-1) 13%, var(--bg-2)), var(--bg-2) 70%); }

.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loc-card { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--radius); border: 2px solid transparent; background: var(--bg-2); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; text-align: left; font: inherit; -webkit-tap-highlight-color: transparent; }
.loc-card.wide { grid-column: 1 / -1; }
.loc-card:active { transform: scale(.975); }
.loc-card.active { border-color: var(--sec-1); box-shadow: 0 0 0 1px var(--sec-1), 0 12px 28px -16px var(--sec-1);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sec-1) 13%, var(--bg-2)), var(--bg-2) 70%); }
.loc-card .l-name { font-weight: 650; font-size: 16px; }
.loc-card .l-sub { font-size: 13px; color: var(--hint); margin-top: 2px; }
.flag-svg, .flag-globe { width: 38px; height: 27px; border-radius: 6px; flex: none; box-shadow: 0 2px 8px -2px rgba(0,0,0,.5), inset 0 0 0 .5px rgba(255,255,255,.25); display: block; }
.flag-globe { display: grid; place-items: center; background: color-mix(in srgb, var(--sec-1) 18%, transparent); color: var(--sec-1); box-shadow: none; }
.flag-globe svg { width: 18px; height: 18px; }
.loc-card.active .flag-svg { animation: pop-in .4s var(--ease); }
@keyframes pop-in { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: none; } }

.order-sum .banner { margin-top: 12px; }
.custom-card { border: 1px dashed color-mix(in srgb, var(--sec-1) 45%, transparent); }

.byo-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: var(--radius); cursor: pointer; text-align: left; font: inherit; color: var(--text);
  background: var(--glass); border: .5px solid var(--glass-line); -webkit-tap-highlight-color: transparent; }
.byo-card:active { transform: scale(.975); }
.byo-ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8e8e93, #5b5b62); }
.byo-ico svg { width: 24px; height: 24px; }
.byo-card .t1 { font-weight: 700; font-size: 16px; } .byo-card .t2 { font-size: 13px; color: var(--hint); margin-top: 3px; line-height: 1.35; }
.byo-arrow { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 8%, transparent); flex: none; }
.byo-arrow svg { width: 16px; height: 16px; }

.byo-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.req-cards { display: grid; gap: 10px; }
.req-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--glass); border: .5px solid var(--glass-line); }
.req-ico { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.req-ico svg { width: 19px; height: 19px; }
.req-t { font-weight: 700; font-size: 15px; } .req-d { font-size: 14px; color: var(--hint); margin-top: 2px; line-height: 1.4; }
.flow { display: grid; gap: 14px; }
.flow-step { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.flow-step .fn { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.byo-form { position: relative; }
.pw-wrap { position: relative; } .pw-wrap .input { padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; background: none; color: var(--hint); display: grid; place-items: center; cursor: pointer; }
.pw-eye svg { width: 20px; height: 20px; }
.tiers + div > .section-title:first-child { margin-top: 20px; }
.pay-steps { display: flex; align-items: center; gap: 10px; margin: 16px 2px 4px; }
.pay-steps .ps { display: flex; align-items: center; gap: 9px; opacity: .5; transition: opacity .25s; }
.pay-steps .ps.active, .pay-steps .ps.done { opacity: 1; }
.pay-steps .fn { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff;
  background: color-mix(in srgb, var(--text) 22%, transparent); transition: background .25s; }
.pay-steps .ps.active .fn, .pay-steps .ps.done .fn { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.pay-steps .ps.done .fn::before { content: "✓"; }
.pay-steps .ps.done .fn { font-size: 0; } .pay-steps .ps.done .fn::before { font-size: 14px; }
.pay-steps b { display: block; font-size: 14px; line-height: 1.2; } .pay-steps small { display: block; font-size: 12px; color: var(--hint); }
.pay-steps .ps-line { flex: 1; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text) 14%, transparent); }

/* ─── Генератор баннеров ──────────────────────────────────────────────── */
.bn-prev { position: relative; padding: 0; overflow: hidden; border-radius: var(--radius); }
.bn-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 806; background: #04060d; }
.bn-load { position: absolute; right: 10px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.bn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-form .field + .field, .bn-form .bn-grid + .bn-grid, .bn-form .bn-grid + .field, .bn-form .field + .bn-grid { margin-top: 12px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
@media (max-width: 340px) { .bn-grid { grid-template-columns: 1fr; } }

/* палитры-«кружки», узоры, свой цвет */
.bn-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.bn-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; border: 2px solid transparent; background: none; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-dot i { width: 38px; height: 38px; border-radius: 50%; display: block; box-shadow: 0 6px 14px -6px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.28); }
.bn-dot.active { border-color: var(--sec-1); background: color-mix(in srgb, var(--sec-1) 12%, transparent); }
.bn-dot.active i { transform: scale(1.08); transition: transform .25s var(--ease); }
.bn-custom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--glass-line); font-size: 14px; font-weight: 600; }
.bn-custom input[type=color] { width: 54px; height: 34px; border: none; padding: 0; border-radius: 10px; background: none; cursor: pointer; }
.bn-pat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bn-pat .chip { padding: 8px 12px; font-size: 14px; }

/* проверка доступности из России */
.rc-block { margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--glass-line); }
.rc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rc { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--bg-3); color: var(--hint); }
.rc.ok { background: var(--green-soft); color: var(--green); }
.rc.bad { background: var(--red-soft); color: var(--red); }
.pill.grow-none { flex: none; }
.rc-block .row { flex-wrap: wrap; }

/* ─── Оформление: узор фона приложения ───────────────────────────────── */
.bg-pat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.look-still .bg i { animation: none !important; }
.look-pats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.look-pat { display: flex; flex-direction: column; gap: 6px; padding: 5px 5px 8px; border-radius: 16px; border: 2px solid transparent; background: var(--glass); color: var(--text); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.look-pat canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 11px; }
.look-pat.active { border-color: var(--sec-1); box-shadow: 0 10px 24px -14px var(--sec-1); }
.look-pat:active { transform: scale(.96); }

/* ─── Доступность из России (для пользователей) ──────────────────────── */
.reach-list { display: grid; gap: 12px; margin-top: 12px; }
.reach-card { position: relative; padding: 14px; border-radius: var(--radius); background: var(--glass); border: .5px solid var(--glass-line); box-shadow: var(--shadow); overflow: hidden; }
.reach-card .top { display: flex; align-items: center; gap: 12px; }
.reach-card .kicon { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.reach-card .kicon .app-ico { border-radius: 0; }
.reach-card .name { font-weight: 700; font-size: 16px; }
.reach-card .meta { font-size: 13px; color: var(--hint); margin-top: 2px; }
.reach-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hint); opacity: .5; }
.reach-card.ok::before { background: #34c759; opacity: 1; } .reach-card.partial::before { background: #ffb020; opacity: 1; }
.reach-card.blocked::before, .reach-card.down::before { background: #ff453a; opacity: 1; }
.reach-card .rc-row { margin-top: 10px; }
.rc.mid { background: var(--amber-soft); color: var(--amber); }
.reach-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 13px; line-height: 1.35; }
.reach-hint svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.reach-btn { margin-top: 10px; }
.reach-emoji { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.reach-emoji svg { width: 26px; height: 26px; }

.reach-ping { flex: none; font-size: 13px; font-weight: 750; padding: 4px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--bg-3); color: var(--hint); }
.reach-ping.fast { color: var(--green); background: var(--green-soft); }
.reach-ping.mid { color: var(--amber); background: var(--amber-soft); }
.reach-ping.slow { color: var(--red); background: var(--red-soft); }
.reach-card .top .pill { flex: none; }

/* статус и пинг сервера на ключах */
.kreach { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 13px; font-weight: 650; }
.kreach[hidden] { display: none; }
.kreach i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.kreach.ok { color: var(--green); } .kreach.mid { color: var(--amber); } .kreach.bad { color: var(--red); }
.kreach-card { cursor: pointer; }

/* ─── Тест скорости ──────────────────────────────────────────────────── */
.speed-card { text-align: center; padding-bottom: 16px; }
.gauge { position: relative; width: min(100%, 300px); margin: 6px auto 0; }
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge path { fill: none; stroke-linecap: round; stroke-width: 15; }
.gauge .g-bg { stroke: rgba(255,255,255,.2); }
.gauge .g-fg { stroke: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,.65)); transition: stroke-dashoffset .35s cubic-bezier(.2,.8,.2,1); }
.g-val { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.g-val b { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(255,255,255,.35); }
.g-val span { font-size: 13px; font-weight: 650; opacity: .85; margin-top: 2px; }
.g-phase { margin-top: 10px; font-size: 14px; font-weight: 650; opacity: .92; min-height: 20px; }
.speed-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.speed-tiles .st { padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 2px; }
.speed-tiles .st span { font-size: 12px; opacity: .8; font-weight: 600; }
.speed-tiles .st b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.speed-tiles .st small { font-size: 11px; opacity: .75; }
.g-foot { margin-top: 10px; font-size: 12px; opacity: .7; }

.g-where { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 750; background: rgba(255,255,255,.18); }
.g-where[hidden] { display: none; }
.g-where.on { background: rgba(60,220,140,.3); }
.g-where.on::before, .g-where.off::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.g-where.ours { background: rgba(60,220,140,.32); }
.g-where.other { background: rgba(255,190,60,.34); }
.g-where.none { background: rgba(255,255,255,.18); }
.g-where.ours::before, .g-where.other::before, .g-where.none::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.g-net { margin-top: 6px; font-size: 13px; opacity: .82; padding: 0 10px; }
.g-net[hidden] { display: none; }

/* заказ приватного сервера: ничего не выезжает за экран на узких телефонах */
.loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.loc-card { min-width: 0; position: relative; padding: 12px; gap: 10px; }
.loc-card .grow { min-width: 0; }
.loc-card .l-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.loc-card .flag-svg, .loc-card .flag-globe { width: 34px; height: 24px; }
.loc-card:not(.wide) .radio { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; }
.loc-card:not(.wide) .radio svg { width: 11px; height: 11px; }
@media (max-width: 350px) { .loc-grid { grid-template-columns: minmax(0, 1fr); } }
.tier-card .grow { min-width: 0; }
@media (max-width: 380px) {
  .option.tier-card { gap: 10px; padding: 12px; }
  .tier-meter { width: 34px; height: 34px; padding: 7px 0; }
  .tier-price b { font-size: 15px; }
}
.byo-price .g-big .per { font-size: 16px; font-weight: 700; letter-spacing: 0; margin-left: 4px; opacity: .85; }
@media (max-width: 400px) {
  .loc-card { gap: 8px; padding: 11px 10px; }
  .loc-card .l-name { font-size: 15px; }
  .loc-card .flag-svg, .loc-card .flag-globe { width: 30px; height: 21px; border-radius: 5px; }
  .loc-card:not(.wide) .radio { display: none; }
  .loc-card.active .flag-svg { outline: 2px solid var(--sec-1); outline-offset: 1px; }
}

/* ─── Реферальная программа, виджет входа ─── */
:root[data-sec="referral"] { --sec-1: #ff5fa2; --sec-2: #b83fd6; }
.ref-link { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.18); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; word-break: break-all; color: #fff; }
.ref-note { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.4; }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.ref-stats .n { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ref-stats .l { font-size: 13px; color: var(--hint); margin-top: 2px; }
.ref-how { display: grid; gap: 14px; }
.ref-step { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.ref-step .ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.ref-step .ico svg { width: 18px; height: 18px; }
.ref-star .row, .ref-write .row { align-items: flex-start; gap: 12px; }
.ref-star .o-sub, .ref-write .o-sub { line-height: 1.4; white-space: normal; }
.tg-widget { margin-top: 18px; }
.tg-widget.hidden { display: none; }
.tg-widget .or { display: flex; align-items: center; gap: 12px; color: var(--hint); font-size: 13px; margin-bottom: 14px; }
.tg-widget .or::before, .tg-widget .or::after { content: ""; flex: 1; height: 1px; background: var(--bg-3); }
.tg-widget-slot { display: flex; justify-content: center; min-height: 40px; }

/* Звёзды Telegram: своя звезда вместо эмодзи */
.ico.stars { background: linear-gradient(145deg, #3b2a0d, #5b3a0f); box-shadow: inset 0 0 0 1px rgba(255,190,60,.38), 0 4px 12px rgba(255,150,30,.25); }
.ico.stars svg.star-lg { width: 24px; height: 24px; filter: drop-shadow(0 0 4px rgba(255,190,60,.55)); }
svg.star-i { width: 1.12em; height: 1.12em; vertical-align: -0.2em; display: inline-block; }

/* ─── Розыгрыши ─── */
.banner.ok { background: var(--green-soft); } .banner.ok svg { color: var(--green); }
.gv-slot:empty { display: none; }
.gv-slot { margin-top: 12px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }   /* колонка не растёт под содержимое: иначе на узких экранах карточка уезжает за правый край */
.gv-wrap { min-width: 0; }
.gv-card, .gv-hero { --g1: #8b5cf6; --g2: #4f46e5; position: relative; overflow: hidden; width: 100%; text-align: left; border: none; color: #fff; cursor: pointer;
  border-radius: 22px; padding: 18px 18px 16px; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 30px color-mix(in srgb, var(--g2) 45%, transparent); animation: rise .5s var(--ease) both; }
.gv-hero { cursor: default; }
.gv-card::before, .gv-hero::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); pointer-events: none; }
.gv-card::after, .gv-hero::after { content: ""; position: absolute; width: 180px; height: 180px; left: -60px; bottom: -90px; border-radius: 50%; background: rgba(255,255,255,.09); pointer-events: none; }
.gv-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-140%) skewX(-18deg); animation: gvshine 4.5s ease-in-out infinite; }
@keyframes gvshine { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
.gv-card > *, .gv-hero > * { position: relative; z-index: 1; }
.gv-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
.gv-tag svg { width: 15px; height: 15px; }
.gv-title { font-size: 20px; font-weight: 800; line-height: 1.2; margin-top: 12px; }
.gv-top { font-size: 16px; font-weight: 650; margin-top: 6px; opacity: .96; } .gv-top small { font-weight: 500; opacity: .8; font-size: 13px; }
.gv-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }
.gv-meta span { display: inline-flex; align-items: center; gap: 6px; } .gv-meta svg { width: 16px; height: 16px; opacity: .9; } .gv-meta b { font-variant-numeric: tabular-nums; }
.gv-state { margin-top: 14px; display: inline-block; font-weight: 700; font-size: 15px; padding: 9px 16px; border-radius: 13px; background: rgba(255,255,255,.95); color: color-mix(in srgb, var(--g2) 85%, #000); }
.gv-state.on { background: rgba(255,255,255,.22); color: #fff; }
.gv-h { font-size: 26px; font-weight: 800; line-height: 1.15; margin: 12px 0 0; }
.gv-desc { margin: 8px 0 0; font-size: 15px; opacity: .92; line-height: 1.4; }
.gv-cdbox { margin-top: 16px; display: inline-flex; flex-direction: column; padding: 10px 16px; border-radius: 16px; background: rgba(0,0,0,.2); }
.gv-cdbox span { font-size: 13px; opacity: .8; } .gv-cdbox b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gv-win { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 18px; font-size: 15px; color: #3a2600;
  background: linear-gradient(135deg, #ffe680, #ffb400); box-shadow: 0 8px 24px rgba(255,180,0,.35); }
.gv-win > div b { font-size: 18px; display: block; }
.gv-prizes { display: grid; gap: 12px; }
.gv-prize { display: flex; align-items: center; gap: 12px; }
.gv-medal { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 24px; background: color-mix(in srgb, var(--sec-1) 16%, var(--bg-3)); }
.gv-medal i { display: grid; place-items: center; color: var(--sec-1); } .gv-medal i svg { width: 22px; height: 22px; }
.gv-medal.sm { width: 34px; height: 34px; font-size: 20px; font-weight: 700; margin-right: 12px; border-radius: 11px; }
.gv-pl { font-size: 13px; color: var(--hint); } .gv-pt { font-size: 16px; font-weight: 650; }
.item.gv-me { background: color-mix(in srgb, #ffb400 16%, var(--bg-2)); }
.gv-vres { margin-top: 10px; } .gv-ok, .gv-bad { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.35; }
.gv-ok { background: var(--green-soft); color: var(--green); } .gv-bad { background: var(--red-soft); color: var(--red); } .gv-ok svg, .gv-bad svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.gv-pool { margin-top: 10px; max-height: 260px; overflow: auto; border-radius: 12px; background: var(--bg-3); padding: 6px 12px; }
.gv-prow { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--sep); } .gv-prow:last-child { border: none; }
.gv-prow.w { color: #d99000; font-weight: 700; }

/* конфетти */
.gv-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; }
.gv-confetti i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: .9; transform: rotate(var(--r)); animation: gvfall linear infinite; }
.gv-confetti.sm i { width: 6px; height: 10px; opacity: .55; animation-name: gvfall2; }
@keyframes gvfall { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
@keyframes gvfall2 { to { transform: translateY(420px) rotate(calc(var(--r) + 360deg)); } }

/* объявление на весь экран */
.gv-splash { --g1: #8b5cf6; --g2: #4f46e5; position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow-y: auto; padding: 24px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, var(--g1), var(--g2) 62%, #0b0b1a); opacity: 0; transition: opacity .3s; }
.gv-splash.in { opacity: 1; }
.gv-splash::before { content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: 8%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 65%); animation: gvpulse 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes gvpulse { 50% { transform: translateX(-50%) scale(1.15); opacity: .7; } }
.gv-x { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; cursor: pointer; }
.gv-x svg { width: 20px; height: 20px; }
.gv-sbox { position: relative; z-index: 2; width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; transform: translateY(24px) scale(.96); transition: transform .5s var(--ease) .05s; }
.gv-splash.in .gv-sbox { transform: none; }
.gv-gift { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: rgba(255,255,255,.2); box-shadow: 0 14px 40px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.35); animation: gvbob 2.6s ease-in-out infinite; }
.gv-gift svg { width: 50px; height: 50px; } @keyframes gvbob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.gv-kicker { margin-top: 20px; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.gv-sbox h2 { font-size: 30px; font-weight: 850; line-height: 1.12; margin: 8px 0 0; }
.gv-big { margin-top: 16px; font-size: 24px; font-weight: 800; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.gv-groups { margin-top: 12px; display: grid; gap: 4px; font-size: 15px; opacity: .92; }
.gv-ssub { margin-top: 14px; font-size: 15px; opacity: .9; } .gv-ssub b { font-variant-numeric: tabular-nums; }
.gv-splash .gv-cta.btn { margin-top: 24px; width: 100%; background: #fff !important; color: color-mix(in srgb, var(--g2) 85%, #000) !important; font-size: 17px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.gv-skip { margin-top: 12px; border: none; background: none; color: rgba(255,255,255,.78); font-size: 15px; padding: 10px 20px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gv-shine, .gv-gift, .gv-splash::before, .gv-confetti i { animation: none !important; } }

/* админка */
.gv-dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); flex: none; }
.gv-form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; padding: 4px 2px; } .gv-form .check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.gv-swatches { display: flex; gap: 10px; flex-wrap: wrap; } .gv-swatches button { width: 40px; height: 40px; border-radius: 13px; border: 3px solid transparent; cursor: pointer; }
.gv-swatches button.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.gv-tk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gv-tk label { display: grid; gap: 4px; } .gv-tk span { font-size: 12px; color: var(--hint); }
.gv-prow-edit { background: var(--bg-2); border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.gv-pr-top { display: grid; grid-template-columns: 64px auto 1fr auto; gap: 8px; align-items: center; } .gv-pr-body { display: grid; gap: 8px; }

.gv-gift svg.gv-star { width: 58px; height: 58px; filter: drop-shadow(0 4px 10px rgba(120,60,0,.35)); }

/* ─── Розыгрыши: узоры, проверка, конструктор ─── */
.gv-card, .gv-hero { background: var(--pat, linear-gradient(transparent, transparent)), linear-gradient(135deg, var(--g1), var(--g2)); }
.gv-splash { background: var(--pat, linear-gradient(transparent, transparent)), radial-gradient(120% 90% at 20% 0%, var(--g1), var(--g2) 62%, #0b0b1a); }
[data-pat="dots"] { --pat: radial-gradient(rgba(255,255,255,.26) 1.6px, transparent 1.8px) 0 0 / 16px 16px; }
[data-pat="grid"] { --pat: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px) 0 0 / 22px 22px; }
[data-pat="waves"] { --pat: repeating-radial-gradient(circle at 0 100%, transparent 0 15px, rgba(255,255,255,.16) 15px 17px); }
[data-pat="rays"] { --pat: repeating-conic-gradient(from 0deg at 88% -6%, rgba(255,255,255,.17) 0 6deg, transparent 6deg 16deg); }
[data-pat="diamonds"] { --pat: linear-gradient(45deg, rgba(255,255,255,.13) 25%, transparent 25%) 0 0 / 26px 26px, linear-gradient(-45deg, rgba(255,255,255,.13) 25%, transparent 25%) 0 0 / 26px 26px; }
[data-pat="stars"] { --pat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M11 5l1.9 4.1 4.4.6-3.2 3 .8 4.4L11 15l-3.9 2.1.8-4.4-3.2-3 4.4-.6z' fill='white' fill-opacity='.28'/><path d='M33 27l1.2 2.6 2.8.4-2 1.9.5 2.8L33 33.4l-2.5 1.3.5-2.8-2-1.9 2.8-.4z' fill='white' fill-opacity='.2'/></svg>") 0 0 / 44px 44px; }
[data-pat="confetti"] { --pat: radial-gradient(rgba(255,255,255,.35) 2.5px, transparent 3px) 4px 6px / 34px 34px, radial-gradient(rgba(255,235,150,.35) 1.8px, transparent 2.2px) 20px 22px / 34px 34px, radial-gradient(rgba(255,160,200,.3) 2px, transparent 2.4px) 12px 30px / 34px 34px; }
.chips .chip.on { background: var(--accent); color: #fff; }

.gv-swatches .gv-custom-btn { background: conic-gradient(#ff5f6d, #ffc371, #a3e635, #22d3ee, #8b5cf6, #ff5f6d); }
.gv-custom { display: flex; gap: 12px; margin-top: 10px; } .gv-custom label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hint); }
.gv-custom input[type=color] { width: 46px; height: 34px; border: none; border-radius: 10px; padding: 0; background: none; cursor: pointer; }
.gv-range { font-weight: 700; font-size: 14px; color: var(--sec-1); }
.gv-pr-check { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }

.gv-how { display: grid; gap: 14px; }
.gv-step b { font-size: 15px; } .gv-step .small { margin-top: 4px; line-height: 1.45; } .gv-step a { color: var(--accent); }
.gv-steps { margin-top: 10px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; padding: 12px; border-radius: 12px; background: var(--bg-3); }
.gv-prow small { display: block; color: var(--hint); font-weight: 400; font-size: 12px; }
.gv-prow b { text-align: right; white-space: nowrap; margin-left: 10px; }

/* медали и призы: без эмодзи */
.gv-medal { background: none !important; width: auto; height: auto; }
.gv-medal.sm { margin-right: 10px; }
.gv-md { display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.28)); }
.gv-prize .gv-kind { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sec-1) 16%, var(--bg-3)); color: var(--sec-1); }
.gv-kind svg { width: 18px; height: 18px; }
.gv-win-star { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 3px 8px rgba(120,60,0,.35)); }
.gv-big small { display: block; font-size: 14px; font-weight: 600; opacity: .85; margin-top: 2px; }

.gv-edits { display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }

/* скрыть карточку розыгрыша на главной */
.gv-hide { position: absolute !important; top: 10px; right: 10px; z-index: 3 !important; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.24); color: #fff; }
.gv-hide svg { width: 16px; height: 16px; }
.gv-card { transition: opacity .25s, transform .25s; } .gv-card.gv-gone { opacity: 0; transform: scale(.96); }

/* ─── карточка розыгрыша v2 ─── */
.gv-card.gv2 { padding: 16px 16px 14px; border-radius: 26px; display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.5), 0 14px 34px color-mix(in srgb, var(--g2) 50%, transparent), 0 2px 6px rgba(0,0,0,.25); }
.gv2 .gv-deco { position: absolute; right: -6px; top: 30px; width: 128px; color: var(--g2); transform: rotate(9deg); opacity: .96; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)); z-index: 0 !important; animation: gvfloat 4.2s ease-in-out infinite; }
@keyframes gvfloat { 50% { transform: rotate(5deg) translateY(-6px); } }
.gv2 .gv-head { display: flex; align-items: center; gap: 8px; }
.gv2.hidable .gv-head { padding-right: 38px; }
.gv-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.26); }
.gv-live i { width: 8px; height: 8px; border-radius: 50%; background: #5cf59a; box-shadow: 0 0 0 0 rgba(92,245,154,.7); animation: gvlive 1.8s infinite; }
.gv-live.off i { background: rgba(255,255,255,.6); animation: none; }
@keyframes gvlive { 70% { box-shadow: 0 0 0 8px rgba(92,245,154,0); } 100% { box-shadow: 0 0 0 0 rgba(92,245,154,0); } }
.gv-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.2); font-variant-numeric: tabular-nums; }
.gv-time svg { width: 14px; height: 14px; }
.gv2 .gv-title { max-width: 70%; font-size: 24px; font-weight: 850; line-height: 1.12; margin-top: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.gv-prizebox { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px; border-radius: 20px; background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gv-pk { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--g2); box-shadow: 0 6px 14px rgba(0,0,0,.2); }
.gv-pk svg { width: 22px; height: 22px; }
.gv-pt2 { font-size: 20px; font-weight: 850; line-height: 1.15; }
.gv-prizebox small { display: block; margin-top: 2px; font-size: 13px; opacity: .85; font-weight: 500; }
.gv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.gv-cnt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 8px 13px; border-radius: 999px; background: rgba(0,0,0,.24); }
.gv-cnt svg { width: 16px; height: 16px; }
.gv-cta2 { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; padding: 10px 18px; border-radius: 15px; background: #fff; color: color-mix(in srgb, var(--g2) 88%, #000); box-shadow: 0 8px 18px rgba(0,0,0,.24); }
.gv-cta2 svg { width: 16px; height: 16px; }
.gv-cta2.on { background: rgba(255,255,255,.24); color: #fff; box-shadow: none; }
.gv-cta2 .star-i { width: 1.1em; height: 1.1em; }
.gv-wrow { flex-wrap: wrap; }
.gv-checkrow { flex-basis: 100%; display: flex; gap: 8px; margin-top: 8px; } .gv-checkrow .input { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .gv2 .gv-deco, .gv-live i { animation: none !important; } }

/* ═══ Единый стиль значков: плитка-градиент с глянцем (как у кнопок), дуотон-иконка ═══ */
svg .d { fill: currentColor; fill-opacity: .2; stroke: none; }
.tab .d { fill-opacity: .14; } .tab.active .d { fill-opacity: .32; }
.sidebar .d { fill-opacity: .16; }
.ico:not(.plain):not(.stars):not(.soft), .qa-ico, .ref-step .ico:not(.stars) {
  position: relative; color: #fff;
  background: linear-gradient(150deg, var(--c1, var(--sec-1)), var(--c2, var(--sec-2)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 14px rgba(0,0,0,.1), 0 8px 14px -8px var(--c2, var(--sec-2)); }
.ico:not(.plain):not(.stars):not(.soft)::after, .qa-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.34), transparent 55%); }
.ico svg, .qa-ico svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
.ico:not(.plain) .d, .qa-ico .d { fill-opacity: .36; }
.ico.green { --c1: #4ee394; --c2: #0fa15e; } .ico.orange { --c1: #ffb52e; --c2: #ff6a1a; } .ico.red { --c1: #ff7a7a; --c2: #e0243c; }
.ico.purple { --c1: #c58bff; --c2: #7a3fe0; } .ico.teal { --c1: #4fdcec; --c2: #1a8fb0; } .ico.gray { --c1: #aab0bf; --c2: #5b6273; }
.ico.indigo { --c1: #8686ff; --c2: #4341c9; } .ico.pink { --c1: #ff7aa6; --c2: #e0245e; }

/* Скоро закончится: избранный ключ */
.soon-fav { display: inline-grid; place-items: center; margin-left: 6px; vertical-align: -3px; color: #ffb800; }
.soon-fav svg { width: 16px; height: 16px; fill: #ffb800; stroke: #ffb800; } .soon-fav .d { display: none; }

/* ═══ «Ещё» ═══ */
.more-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 30px -14px var(--sec-2); }
.more-hero::before { content: ""; position: absolute; width: 200px; height: 200px; right: -60px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.3), transparent 68%); pointer-events: none; }
.more-hero > * { position: relative; z-index: 1; }
.mh-logo { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: none; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.mh-logo svg { width: 30px; height: 30px; }
.mh-name { font-weight: 800; font-size: 18px; } .mh-sub { font-size: 13px; opacity: .82; margin-top: 2px; }
.mh-bal { text-align: right; padding: 8px 12px; border-radius: 16px; background: rgba(0,0,0,.2); } .mh-bal small { display: block; font-size: 12px; opacity: .8; } .mh-bal b { font-size: 17px; font-variant-numeric: tabular-nums; }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mtile { position: relative; text-align: left; border: none; cursor: pointer; color: var(--text); background: var(--bg-2); border-radius: 22px; padding: 14px 14px 13px;
  display: flex; flex-direction: column; gap: 3px; min-height: 124px; box-shadow: var(--shadow); overflow: hidden; }
.mtile::before { content: ""; position: absolute; width: 130px; height: 130px; right: -50px; bottom: -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sec-1) 26%, transparent), transparent 70%); pointer-events: none; }
.mtile:active { transform: scale(.97); } .mtile { transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.mt-ico { width: 44px !important; height: 44px !important; border-radius: 15px !important; margin-bottom: 8px; }
.mt-ico svg { width: 24px !important; height: 24px !important; } .mt-ico.plain svg.yy { width: 100% !important; height: 100% !important; }
.mt-t { font-weight: 750; font-size: 16px; line-height: 1.2; } .mt-s { font-size: 13px; color: var(--hint); line-height: 1.3; }
.mt-live { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(76,217,123,.16); color: #34c759; }
.mt-live i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; animation: gvlive 1.8s infinite; }
.mtile.wide { flex-direction: row; align-items: center; gap: 12px; min-height: 0; width: 100%; padding: 12px 14px; }
.mtile.wide .mt-ico { margin: 0; } .mtile.wide .grow { display: flex; flex-direction: column; gap: 2px; } .mtile.wide::before { display: none; }
.mtile.admin { background: linear-gradient(135deg, color-mix(in srgb, #e0243c 16%, var(--bg-2)), var(--bg-2)); }

/* ═══════════ Чаты (вид как диалог в Telegram) ═══════════ */
.tab[data-tab="more"] { position: relative; }
.has-chat-unread .tab[data-tab="more"]::after { content: ""; position: absolute; top: 9px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 2px var(--bg-2); }

/* список чатов */
.ch-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: none; border: none; text-align: left; color: var(--text); cursor: pointer; position: relative; }
.ch-row + .ch-row::before { content: ""; position: absolute; left: 72px; right: 0; top: 0; height: .5px; background: var(--sep); }
.ch-row:active { background: var(--bg-3); }
.ch-avw { position: relative; flex: none; display: block; line-height: 0; }
.ch-on { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2.5px var(--bg-2); }
.ch-av { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
.ch-av.sup { background: linear-gradient(135deg, #24379a, #4f7fff); } .ch-av.sup svg { width: 62%; height: 62%; }
.ch-r1, .ch-r2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ch-r1 b { font-size: 16px; font-weight: 650; } .ch-r1 small { color: var(--hint); font-size: 13px; flex: none; }
.ch-r2 { margin-top: 3px; } .ch-prev { color: var(--hint); font-size: 15px; min-width: 0; } .ch-prev .bad { color: var(--red); font-style: normal; }
.ch-prev svg { width: 14px; height: 14px; vertical-align: -2px; }
.ch-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.mt-unread { position: absolute; top: 12px; right: 12px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: #ff3b5c; }

/* окно диалога */
.chat-ov { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); animation: chatIn .22s cubic-bezier(.2,.8,.2,1); overscroll-behavior: contain; }
.chat-ov.out { opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(18px); } }
.chat-ov::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--sec-1) 20%, transparent), transparent 60%), radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--sec-2) 16%, transparent), transparent 60%),
  radial-gradient(rgba(255,255,255,.05) 1.2px, transparent 1.4px) 0 0 / 22px 22px; }
.chat-ov > * { position: relative; z-index: 1; }
.chat-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 8px 8px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: .5px solid var(--sep); }
.ct-back, .ct-menu { width: 40px; height: 40px; border-radius: 50%; border: none; background: none; color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.ct-menu { color: var(--hint); } .ct-back svg, .ct-menu svg { width: 24px; height: 24px; }
.ct-av { flex: none; line-height: 0; } .ct-who { flex: 1; min-width: 0; margin-left: 2px; }
.ct-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-status { font-size: 13px; color: var(--hint); margin-top: 1px; } .ct-status.on { color: #34c759; }
.chat-info { display: flex; gap: 12px; align-items: flex-start; margin: 10px 10px 0; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); box-shadow: var(--shadow); font-size: 15px; line-height: 1.4; }
.chat-info > svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; } .chat-info.warn > svg { color: var(--amber); } .chat-info.bad > svg { color: var(--red); }
.chat-info .small { color: var(--hint); margin-top: 3px; }
.chat-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 6px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.chat-list { display: flex; flex-direction: column; }
.chat-empty { margin: 30px auto; max-width: 260px; text-align: center; color: var(--hint); font-size: 15px; line-height: 1.45; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.chat-empty svg { width: 26px; height: 26px; color: var(--sec-1); margin-bottom: 6px; }
.cm-day { align-self: center; margin: 12px 0 6px; } .cm-day span { font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg-2) 82%, transparent); color: var(--hint); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

.cm { display: flex; margin-top: 7px; animation: cmIn .18s cubic-bezier(.2,.8,.2,1); contain: layout style; }
.cm.cont { margin-top: 2px; } .cm.me { justify-content: flex-end; }
@keyframes cmIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.cb { position: relative; max-width: min(82%, 520px); padding: 7px 11px 6px; border-radius: 19px; word-break: break-word; overflow-wrap: anywhere; box-shadow: 0 1px 1.5px rgba(0,0,0,.14); font-size: 16px; line-height: 1.32; }
.cm.them .cb { background: var(--bg-2); color: var(--text); border-bottom-left-radius: 6px; }
.cm.me .cb { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); color: #fff; border-bottom-right-radius: 6px; }
.cm.them.cont .cb { border-top-left-radius: 6px; } .cm.me.cont .cb { border-top-right-radius: 6px; }
.cm.pend .cb { opacity: .72; } .cm.fail .cb { box-shadow: 0 0 0 1.5px var(--red); }
.cm-t { white-space: pre-wrap; } .cm-t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cm.them .cm-t a { color: var(--accent); }
.cm-meta { float: right; margin: 8px 0 -2px 12px; font-size: 12px; opacity: .72; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; line-height: 1; }
.cm-tick { display: inline-flex; } .cm-tick .t2 { opacity: 0; transition: opacity .2s; } .cm-tick.rd .t2 { opacity: 1; } .cm-tick.rd { color: #b8f0ff; opacity: 1; }
.cm-clock svg { width: 12px; height: 12px; } .cm-retry { border: none; background: rgba(255,255,255,.22); color: inherit; border-radius: 10px; padding: 3px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.cm-prog { font-variant-numeric: tabular-nums; opacity: .8; }

.cm.is-img .cb { padding: 3px; }
.cm-img { position: relative; width: min(66vw, 320px); min-height: 90px; border-radius: 16px; overflow: hidden; background: linear-gradient(110deg, var(--bg-3) 30%, color-mix(in srgb, var(--bg-3) 70%, #fff) 50%, var(--bg-3) 70%) 0 0 / 220% 100%; animation: shimmer 1.4s linear infinite; cursor: zoom-in; }
.cm.loaded .cm-img { animation: none; }
@keyframes shimmer { to { background-position: -220% 0; } }
.cm-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-img .th { filter: blur(9px); transform: scale(1.12); } .cm-img .th[src=""] { display: none; }
.cm-img .full { opacity: 0; transition: opacity .28s; } .cm.loaded .full { opacity: 1; }
.cm-img .cm-meta { position: absolute; right: 7px; bottom: 6px; margin: 0; padding: 3px 8px; border-radius: 11px; background: rgba(0,0,0,.42); color: #fff; opacity: 1; }
.cm.is-img .cm-t { padding: 6px 8px 3px; }
.cm.failed .cm-img::after { content: "Не удалось загрузить"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--hint); }

.cm-voice { display: flex; align-items: center; gap: 10px; min-width: 214px; padding: 2px 0; }
.cv-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; position: relative; }
.cm.me .cv-play { background: rgba(255,255,255,.95); color: var(--sec-2); } .cm.them .cv-play { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); color: #fff; }
.cv-play svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; } .cv-play .d { display: none; }
.cv-play::after { content: ""; display: none; width: 11px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.cm.on .cv-play svg { display: none; } .cm.on .cv-play::after { display: block; }
.cv-play.busy { opacity: .6; pointer-events: none; animation: pulse 1s infinite; } @keyframes pulse { 50% { opacity: .35; } }
.cv-mid { flex: 1; min-width: 0; } .cv-wave { display: flex; align-items: center; gap: 2px; height: 28px; cursor: pointer; }
.cv-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .38; transition: opacity .1s; } .cv-wave i.f { opacity: 1; }
.cv-dur { font-size: 12px; opacity: .8; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cm-voice .cm-meta { float: none; margin: 0; align-self: flex-end; }
.cm-file { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.cf-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; }
.cm.me .cf-ico { background: rgba(255,255,255,.95); color: var(--sec-2); } .cm.them .cf-ico { background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); color: #fff; }
.cf-ico svg { width: 22px; height: 22px; } .cf-ico .d { display: none; } .cf-ico.busy { opacity: .6; animation: pulse 1s infinite; }
.cf-i { flex: 1; min-width: 0; } .cf-n { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } .cf-s { font-size: 13px; opacity: .75; margin-top: 2px; }
.cm-file .cm-meta { float: none; margin: 0; align-self: flex-end; }

.chat-typing { display: inline-flex; gap: 4px; padding: 11px 14px; margin: 8px 0 2px; border-radius: 18px 18px 18px 6px; background: var(--bg-2); box-shadow: 0 1px 1.5px rgba(0,0,0,.14); }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--hint); animation: typ 1.2s infinite; } .chat-typing i:nth-child(2) { animation-delay: .15s; } .chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typ { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-down { position: absolute !important; right: 14px; bottom: 84px; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--bg-2); color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.3); display: grid; place-items: center; z-index: 5 !important; cursor: pointer; }
.chat-down svg { width: 22px; height: 22px; transform: rotate(90deg); }

.chat-comp { display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg-2) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: .5px solid var(--sep); }
.cc-clip { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; background: none; color: var(--hint); display: grid; place-items: center; cursor: pointer; }
.cc-clip svg { width: 24px; height: 24px; transform: rotate(-20deg); }
.cc-box { flex: 1; min-width: 0; background: var(--bg-3); border-radius: 22px; padding: 2px 14px; display: flex; }
.cc-input { flex: 1; min-width: 0; border: none; outline: none; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.3; padding: 9px 0; max-height: 140px; }
.cc-send { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 6px 14px -6px var(--sec-2); }
.cc-send svg { width: 22px; height: 22px; } .cc-send > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .16s, transform .16s; }
.cc-go { opacity: 0; transform: scale(.6) rotate(-30deg); } .cc-send.has-text .cc-go { opacity: 1; transform: none; } .cc-send.has-text .cc-mic { opacity: 0; transform: scale(.6); }
.cc-send:active { transform: scale(.92); }
.cc-rec { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.cc-rec-x { width: 40px; height: 40px; border-radius: 50%; border: none; background: none; color: var(--red); display: grid; place-items: center; cursor: pointer; } .cc-rec-x svg { width: 22px; height: 22px; }
.cc-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; animation: pulse 1s infinite; } .cc-hint { color: var(--hint); font-size: 14px; }
.chat-ov.recording .cc-clip, .chat-ov.recording .cc-box { display: none; } .chat-ov.recording .cc-send .cc-mic { opacity: 0; } .chat-ov.recording .cc-send .cc-go { opacity: 1; transform: none; }

.chat-lb { position: fixed; inset: 0; z-index: 2500; background: rgba(0,0,0,.94); display: grid; place-items: center; opacity: 0; transition: opacity .18s; }
.chat-lb.in { opacity: 1; } .chat-lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-bar { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; display: flex; gap: 10px; }
.lb-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; cursor: pointer; text-decoration: none; } .lb-btn svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .chat-ov { left: 50%; right: auto; width: min(760px, 100vw); transform: translateX(-50%); border-inline: .5px solid var(--sep); animation: none; } .chat-ov.out { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cm, .chat-ov, .cm-img { animation: none !important; } }

.ch-links { display: grid; gap: 8px; margin-top: 10px; }
.ch-l { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-3); }
.ch-l > span { display: grid; gap: 1px; min-width: 0; } .ch-l > span svg { display: none; }
.ch-l b { font-size: 15px; } .ch-l small { color: var(--hint); font-size: 12px; }
.ch-l .btn-row { flex: none; gap: 6px; } .ch-l .btn { padding-left: 10px; padding-right: 10px; }
.ch-l { flex-direction: column; align-items: stretch; gap: 8px; }
.ch-l .btn-row { width: 100%; } .ch-l .btn-row .btn:first-child { flex: 1 1 auto; } .ch-l .btn-row .btn + .btn { flex: 0 0 52px; }
.ct-link { cursor: pointer; } .ct-who.ct-link .ct-name::after { content: " ›"; color: var(--hint); font-weight: 400; }
.ct-av.ct-link:active, .ct-who.ct-link:active { opacity: .7; }

/* ═══ Звонки ═══ */
.ct-call { width: 40px; height: 40px; border-radius: 50%; border: none; background: none; color: var(--accent); display: grid; place-items: center; cursor: pointer; flex: none; }
.ct-call svg { width: 22px; height: 22px; } .ct-call:active { background: var(--bg-3); }
.cm-call { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.cm-call .cc-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.cm.them .cm-call .cc-ic { background: color-mix(in srgb, var(--sec-1) 20%, var(--bg-3)); color: var(--sec-1); }
.cm-call.miss .cc-ic { background: rgba(255,59,48,.2); color: #ff5a4f; } .cm-call.miss b { color: #ff6b62; }
.cm.me .cm-call.miss b { color: #ffd6d2; }
.cm-call .cc-ic svg { width: 20px; height: 20px; } .cm-call b { font-size: 15px; } .cc-sub { font-size: 13px; opacity: .75; margin-top: 1px; }
.cm-call .cm-meta { float: none; margin: 0 0 0 auto; align-self: flex-end; }

.call-ov { position: fixed; inset: 0; z-index: 3000; color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(1.03); transition: opacity .25s, transform .25s;
  background: radial-gradient(120% 90% at 20% 0%, var(--sec-1), var(--sec-2) 60%, #070914); }
.call-ov.in { opacity: 1; transform: none; } .call-ov.out { opacity: 0; transform: scale(.98); }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; opacity: 0; transition: opacity .3s; }
.call-ov.has-remote-video .call-remote { opacity: 1; }
.call-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 28%, transparent 60%, rgba(0,0,0,.5)); pointer-events: none; }
.call-ov > * { position: relative; z-index: 1; } .call-ov > .call-remote, .call-ov > .call-veil { position: absolute; z-index: 0; }
.call-top { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 0; } .call-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 13px; border-radius: 999px; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.call-lock svg { width: 15px; height: 15px; } .call-lock b { letter-spacing: 2px; font-size: 15px; }
.call-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 0 20px; }
.call-ov.has-remote-video .call-mid { justify-content: flex-start; padding-top: 24px; } .call-ov.has-remote-video .call-av { display: none; }
.call-av { line-height: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255,255,255,.1), 0 0 0 22px rgba(255,255,255,.06); animation: callPulse 2.4s ease-in-out infinite; }
.call-ov.ended .call-av, .call-ov.has-remote-video .call-av { animation: none; }
@keyframes callPulse { 50% { box-shadow: 0 0 0 14px rgba(255,255,255,.12), 0 0 0 30px rgba(255,255,255,.04); } }
.call-name { font-size: 28px; font-weight: 800; margin-top: 14px; text-shadow: 0 2px 12px rgba(0,0,0,.3); } .call-st { font-size: 16px; opacity: .85; font-variant-numeric: tabular-nums; }
.call-local { position: absolute !important; right: 14px; top: calc(70px + env(safe-area-inset-top, 0px)); width: 104px; height: 148px; object-fit: cover; border-radius: 16px; z-index: 3 !important; background: #000; box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: scaleX(-1); }
.call-bar { display: flex; gap: 28px; justify-content: center; padding: 10px 16px calc(34px + env(safe-area-inset-bottom, 0px)); }
.cb2 { display: grid; justify-items: center; gap: 8px; font-size: 13px; opacity: .95; }
.cbtn { width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .15s, background .2s; }
.cbtn:active { transform: scale(.92); } .cbtn svg { width: 28px; height: 28px; }
.cbtn.off { background: #fff; color: #111; } .cbtn.red { background: #ff3b30; box-shadow: 0 8px 22px -6px #ff3b30; } .cbtn.red svg { transform: rotate(135deg); }
.cbtn.green { background: #34c759; box-shadow: 0 8px 22px -6px #34c759; animation: callRing 1.2s ease-in-out infinite; } @keyframes callRing { 50% { transform: scale(1.09); } }
@media (min-width: 900px) { .call-ov { left: 50%; right: auto; width: min(560px, 100vw); transform: translateX(-50%); } .call-ov.in { transform: translateX(-50%); } .call-ov.out { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .call-av, .cbtn.green { animation: none !important; } }

/* ключ доступа нового аккаунта без Telegram */
.newkey { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--fill, rgba(120,120,140,.14)); font: 600 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; user-select: all; -webkit-user-select: all; text-align: left; }
.newkey-ok { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; text-align: left; cursor: pointer; }
.newkey-ok input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent, #2f6df6); }

/* чат: клавиатура и нажатия */
body.in-chat { overflow: hidden; overscroll-behavior: none; }
.chat-ov, .chat-ov button, .chat-comp, .chat-top { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.chat-ov.kb .chat-comp { padding-bottom: 8px; }
.ct-back, .ct-menu, .ct-call, .cc-clip { width: 44px; height: 44px; }
.ct-back:active, .ct-menu:active, .cc-clip:active { background: var(--bg-3); }
.cc-box { cursor: text; align-items: center; min-height: 44px; }
.chat-ov .chat-info { flex: none; max-height: 42%; overflow-y: auto; }
.chat-ov.kb .chat-info { max-height: 26%; }

/* плашка «нет связи с сервером» */
.net-bar { position: fixed; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); z-index: 120; display: flex; gap: 10px; align-items: center;
  padding: 12px 12px 12px 14px; border-radius: 16px; background: #ffb020; color: #2a1c00; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); animation: chatIn .22s ease; }
.net-bar .nb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; }
.net-bar .nb-t b { font-size: 15px; }
.net-bar .nb-b { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.net-bar .btn.small { background: #2a1c00; color: #fff; }
.net-bar .nb-x { border: none; background: none; color: #2a1c00; width: 28px; height: 24px; display: grid; place-items: center; margin: 0 auto; cursor: pointer; }
.net-bar .nb-x svg { width: 18px; height: 18px; }

/* iPhone, сайт добавлен на экран «Домой»: страница рисуется под системной строкой (время, сеть) — отступаем на безопасную зону, иначе плашка «Режим просмотра» с кнопкой «Выйти» оказывается под ней */
.imp-bar { padding: calc(8px + env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 12px 8px; }
.main { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
body.impersonating .main { padding-top: 12px; }
.login { padding-top: calc(24px + env(safe-area-inset-top, 0px)); } .boot { padding-top: env(safe-area-inset-top, 0px); }

/* свёрнутый звонок: полоса сверху поверх приложения */
.call-minbtn { position: absolute; left: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.28); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 2; }
.call-minbtn svg { width: 22px; height: 22px; transform: rotate(90deg); }
.call-ov.min { opacity: 0 !important; pointer-events: none !important; transform: scale(.94) !important; }
.call-mini { position: fixed; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); z-index: 3100; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 6px; border-radius: 999px;
  background: linear-gradient(90deg, #1faa59, #0f8a4a); color: #fff; box-shadow: 0 10px 28px -8px rgba(0,0,0,.55); animation: chatIn .2s ease; max-width: 560px; margin: 0 auto; }
.call-mini.ended { background: linear-gradient(90deg, #6b7280, #4b5563); }
.call-mini .cm-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; border: none; background: none; color: inherit; font: inherit; text-align: left; padding: 6px 4px 6px 12px; cursor: pointer; }
.call-mini .cm-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulse 1.3s infinite; }
.call-mini .cm-n { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-mini .cm-st { font-size: 13px; opacity: .92; font-variant-numeric: tabular-nums; flex: none; }
.call-mini button.cm-mic, .call-mini button.cm-end { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.22); }
.call-mini .cm-mic svg, .call-mini .cm-end svg { width: 20px; height: 20px; }
.call-mini .cm-mic.off { background: #fff; color: #0f8a4a; }
.call-mini .cm-end { background: #ff3b30; } .call-mini .cm-end svg { transform: rotate(135deg); }
body.call-min .main { padding-top: calc(12px + 54px + env(safe-area-inset-top, 0px)); }
body.call-min .chat-top { padding-top: calc(8px + 54px + env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }

@media (max-width: 420px) { .call-bar { gap: 10px; } .cbtn { width: 58px; height: 58px; } .cbtn svg { width: 25px; height: 25px; } }
.call-top { padding-left: 60px; padding-right: 60px; }
@media (max-width: 420px) { .call-lock { font-size: 12px; padding: 6px 10px; gap: 6px; } }
.toast-wrap { z-index: 3500; }      /* сообщения — поверх экрана звонка (раньше прятались под ним) */

/* Диагностические данные */
.dg-card { padding: 14px 16px; }
.dg-bar { height: 8px; border-radius: 6px; background: var(--bg-3); overflow: hidden; }
.dg-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sec-1), var(--sec-2)); }
.dg-sum { margin-top: 10px; font-size: 15px; } .dg-s { color: var(--hint); font-size: 13px; line-height: 1.4; margin-top: 4px; }
.dg-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: .5px solid var(--sep); }
.dg-row:first-of-type { border-top: none; }
.dg-t { font-weight: 600; font-size: 15px; } .dg-v { flex: none; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; max-width: 46%; text-align: right; overflow-wrap: anywhere; }
.dg-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bg-3); cursor: pointer; text-align: left; }
.dg-opt input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent, #2f6df6); }
.dg-opt span { display: flex; flex-direction: column; gap: 2px; } .dg-opt small { color: var(--hint); font-size: 13px; line-height: 1.35; }
.dg-opt.bad b { color: var(--red); }

/* расширенные инструкции */
.gs-p { margin: 10px 2px 4px; font-size: 15px; line-height: 1.5; color: var(--text); }
.gs-img { display: block; width: min(250px, 72%); margin: 4px auto 14px; border-radius: 22px; box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); cursor: zoom-in; background: var(--bg-3); aspect-ratio: 360 / 740; object-fit: cover; }
.gs-list { padding: 8px 16px; }
.gs-li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15px; line-height: 1.45; }
.gs-li i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 8px; }
.gs-foot { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); }
.gs-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--bg-3); color: var(--accent); } .gs-ico svg { width: 20px; height: 20px; }
.gs-list + .section-title, .banner + .section-title { margin-top: 20px; }
.gs-img.gs-wide { width: 100%; aspect-ratio: auto; border-radius: 12px; box-shadow: none; border: .5px solid var(--sep); object-fit: contain; }

/* список с галочками в форме (formSheet type "multi") */
.multi { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow-y: auto; }
.multi-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-3); cursor: pointer; }
.multi-row.dis { opacity: .5; cursor: default; }
.multi-row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.multi-row .mt-title { display: block; font-weight: 600; }
.multi-row .mt-sub { display: block; color: var(--hint); font-size: 13px; margin-top: 2px; word-break: break-word; }

/* редактор текста с форматированием как в Telegram (richEditor) */
.rte-box { display: flex; flex-direction: column; gap: 6px; }
.rte-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rte-bar::-webkit-scrollbar { display: none; }
.rte-bar button { flex: none; min-width: 38px; height: 36px; padding: 0 11px; border: none; border-radius: 10px; background: var(--bg-3); color: var(--text); font-size: 15px; display: grid; place-items: center; cursor: pointer; }
.rte-bar button.on { background: var(--accent-soft); color: var(--accent); }
.rte-bar button svg { width: 18px; height: 18px; }
.rte { white-space: pre-wrap; overflow-wrap: anywhere; outline: none; line-height: 1.4; overflow-y: auto; max-height: 45vh; height: auto; }
.rte:empty::before { content: attr(data-ph); color: var(--hint); pointer-events: none; }
.rte .tg-spoiler { background: var(--bg-3); border-radius: 4px; padding: 0 2px; box-shadow: inset 0 0 0 1px var(--sep); }
.rte code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--bg-3); border-radius: 4px; padding: 0 3px; }
.rte blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--accent); }
.rte a { color: var(--accent); text-decoration: underline; }
.rte-foot { text-align: right; margin: 0 4px; }

/* строка сервера в админке: плашка доступности фиксированной ширины, чтобы столбец не «ползал» */
.srv-row1 { display: flex; align-items: center; gap: 8px; }
.srv-row1 .title { flex: 1; min-width: 0; }
.pill.srv-pill { flex: none; width: 88px; justify-content: center; }
.srv-row1 .title.ellipsis { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.key-head .big-ico .app-ico { border-radius: 0; }

/* ─── заявки в поддержку: карточки в ленте, анкета, оценка, шапка сотрудника, быстрые ответы ─── */
.cm-svc { align-self: center; width: 100%; max-width: 100%; margin: 8px 0; display: flex; justify-content: center; }
.svc-card { width: min(100%, 340px); background: var(--bg-2); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 14px; }
.svc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .svc-h svg { width: 18px; height: 18px; color: var(--accent); }
.svc-r { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .svc-r span { color: var(--hint); } .svc-r b { text-align: right; font-weight: 600; }
.svc-line { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 85%, transparent); color: var(--hint); }
.svc-line svg { width: 16px; height: 16px; } .svc-line.ok { color: var(--green); }
.svc-stars, .stars { color: #ffb400; letter-spacing: 2px; } .svc-stars { font-size: 20px; } .svc-c { margin-top: 4px; white-space: pre-wrap; }
.sup-panel { flex: none; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg-2) 94%, transparent); border-top: .5px solid var(--sep); }
.sup-t { font-weight: 650; margin-bottom: 12px; text-align: center; }
.sup-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.sup-stars button { border: none; background: none; font-size: 40px; line-height: 1; color: var(--bg-3); cursor: pointer; padding: 0 3px; transition: transform .12s, color .12s; }
.sup-stars button.on { color: #ffb400; } .sup-stars button:active { transform: scale(.86); }
.sup-more textarea { width: 100%; resize: none; }
.sv-g { margin-top: 14px; } .sv-l { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); font-weight: 650; margin-bottom: 8px; }
.sv-o { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chip { border: 1.5px solid transparent; background: var(--bg-3); color: var(--text); padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 550; cursor: pointer; }
.sv-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sup-staff { flex: none; margin: 8px 10px 0; padding: 10px 12px; border-radius: 16px; background: var(--bg-2); box-shadow: var(--shadow); font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.ss-row { display: flex; align-items: center; gap: 8px; } .ss-row b { min-width: 0; }
.ss-meta { display: flex; flex-wrap: wrap; gap: 6px; } .ss-chip { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); }
.cc-tpl { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; background: none; font-size: 20px; cursor: pointer; }
.tpl-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-top: 10px; }
.tpl-row { text-align: left; border: none; background: var(--bg-3); color: var(--text); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.tpl-row b { font-size: 15px; } .tpl-row span, .tpl-sub { font-size: 14px; color: var(--hint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-r3 { display: flex; align-items: center; gap: 6px; margin: 3px 0 1px; } .ch-info { font-size: 13px; color: var(--hint); min-width: 0; }

/* история заявок */
.th-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; margin-top: 10px; }
.th-row { text-align: left; border: none; background: var(--bg-3); color: var(--text); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.th-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .th-sub { font-size: 13px; color: var(--hint); }
.th-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; margin-top: 10px; padding: 2px; }
.th-b { max-width: 82%; padding: 7px 11px; border-radius: 16px; background: var(--bg-3); align-self: flex-start; }
.th-b.me { align-self: flex-end; background: var(--accent-soft); }
.th-t { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; } .th-b small { display: block; text-align: right; font-size: 11px; color: var(--hint); margin-top: 2px; }
.th-svc { display: flex; justify-content: center; margin: 4px 0; }

/* анкета: «Использовать прошлые ответы» */
.sv-picks { display: flex; flex-direction: column; gap: 8px; }
.sv-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 14px; border: 1.5px solid transparent; background: var(--bg-3); color: var(--text); font-size: 15px; font-weight: 550; cursor: pointer; }
.sv-pick.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sv-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--hint); position: relative; }
.sv-pick.active .sv-dot { border-color: var(--accent); } .sv-pick.active .sv-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }

/* ─── розыгрыш на главной: яркое появление → уход на второй план (компактная строка) ─── */
.gv-wrap.gv-gone, .gv-mini.gv-gone { opacity: 0; transform: scale(.96); transition: opacity .25s, transform .25s; }
/* Порядок кадров: карточка быстро гаснет и чуть уезжает вверх (0–.3 с) → высота сворачивается (.1–.7 с) → только потом выезжает строка (с .55 с).
   Без blur/filter: на iPhone они тяжёлые и дают рывки; так в любой момент на экране нет ни «размытой полукарточки», ни наложения. */
.gv-wrap .gv-card.gv2 { max-height: 560px; transform-origin: 50% 0;
  transition: opacity .3s ease, transform .5s cubic-bezier(.4,0,.2,1), max-height .6s cubic-bezier(.4,0,.2,1) .1s, padding .6s cubic-bezier(.4,0,.2,1) .1s; }
.gv-wrap.away .gv-card.gv2 { opacity: 0; transform: translateY(-10px) scale(.96); padding-top: 0; padding-bottom: 0; pointer-events: none; box-shadow: none; }
.gv-mini { --g1: #8b5cf6; --g2: #4f46e5; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 16px; cursor: pointer; overflow: hidden; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--g1) 45%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--g1) 24%, var(--bg-2)), color-mix(in srgb, var(--g2) 16%, var(--bg-2))); }
.gv-wrap .gv-mini { max-height: 64px; transition: max-height .45s cubic-bezier(.4,0,.2,1) .55s, opacity .4s ease .6s, transform .5s cubic-bezier(.2,.8,.2,1) .55s, padding .45s ease .55s; }
.gv-wrap:not(.away) .gv-mini { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transform: translateY(6px) scale(.97); pointer-events: none; }
.gv-wrap.away .gv-mini { animation: gmglow 1.4s ease 1.15s 1; }
@keyframes gmglow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--g1) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.gm-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.gm-ico svg { width: 18px; height: 18px; }
.gm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .gm-t b { font-size: 15px; } .gm-t small { color: var(--hint); font-size: 13px; font-variant-numeric: tabular-nums; }
.gm-cta { flex: none; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--g1) 22%, transparent); }
.gm-cta.on { background: rgba(52,199,89,.2); color: var(--green); }
.gm-x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--hint); } .gm-x svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .gv-wrap .gv-card.gv2, .gv-wrap .gv-mini { transition-duration: .01s !important; transition-delay: 0s !important; } .gv-wrap.away .gv-mini { animation: none; } }

.srv-tag { display: inline-block; max-width: 100%; margin-top: 4px; padding: 1px 9px; border-radius: 8px; background: var(--bg-3); color: var(--text); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }

.has-chat-unread .sidebar .nav-item[data-tab=side-chats]::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--red); }
.sidebar .nav-item { flex: none; }
@media (max-height: 1000px) { .sidebar .nav-item { padding: 7px 12px; } .sidebar .nav-sep { margin: 6px 8px; } }
/* Чат на компьютере: занимает всю область справа от бокового меню (меню остаётся доступным); сами сообщения — колонкой не шире 960 px по центру */
@media (min-width: 900px) {
  .chat-ov { left: 260px; right: 0; width: auto; transform: none; border-inline: none; }
  .chat-ov.out { transform: none; }
  .chat-top, .chat-scroll, .chat-comp { padding-inline: max(10px, calc((100% - 960px) / 2)); }
  .chat-ov .chat-info { margin-inline: max(10px, calc((100% - 960px) / 2)); }
}

/* ─── Заставка при входе: чёрный экран, логотип и название, затем приложение раскрывается кругом из центра (всего ≈1,45 с) ─── */
#splash { display: none; }
html.sp { overflow: hidden; }
html.sp #splash { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; background: #000; }
html.sp #stage { position: relative; z-index: 2; clip-path: circle(0 at 50vw 50vh); animation: spReveal .65s .8s cubic-bezier(.65, 0, .2, 1) both; }
.sp-in { display: grid; justify-items: center; gap: 14px; animation: spOut .42s .8s cubic-bezier(.4, 0, 1, 1) forwards; }
.sp-logo svg { display: block; width: 92px; height: 92px; filter: drop-shadow(0 0 22px rgba(79, 127, 255, .5)); animation: spLogo .5s .04s cubic-bezier(.2, .8, .2, 1) both; }
.sp-name { color: #fff; font-size: 24px; font-weight: 750; letter-spacing: .02em; animation: spName .45s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes spLogo { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: none; } }
@keyframes spName { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spOut { to { opacity: 0; transform: scale(1.14); } }
@keyframes spReveal { from { clip-path: circle(0 at 50vw 50vh); } to { clip-path: circle(80vmax at 50vw 50vh); } }
@media (prefers-reduced-motion: reduce) { html.sp #splash { display: none; } html.sp #stage { clip-path: none; animation: none; } }

/* ─── Главная: компактная карточка баланса со счётчиками внутри, свой промокод, быстрые действия в один ряд ─── */
.topbar .tb-user { margin-left: auto; max-width: 55%; padding: 5px 12px; border-radius: 999px; background: var(--glass); border: .5px solid var(--glass-line); color: var(--hint); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero { padding: 16px 16px 12px; }
.hero .hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hero .amount { margin: 2px 0 0; font-size: clamp(28px, 8.6vw, 38px); }
.hero .hero-act { display: grid; gap: 8px; width: 134px; }
.hero .hero-act .btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 12px; font-size: 14px; white-space: nowrap; }
.hero .hero-act .btn svg { width: 17px; height: 17px; }
.hero .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding: 3px; border-radius: 14px; background: rgba(255, 255, 255, .13); }
.hero .hs { background: none; border: none; color: #fff; padding: 7px 4px; text-align: center; cursor: pointer; border-radius: 11px; min-width: 0; }
.hero .hs + .hs { box-shadow: -.5px 0 0 rgba(255, 255, 255, .22); }
.hero .hs .n { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero .hs .l { display: block; font-size: 12px; opacity: .8; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .hs:active { background: rgba(255, 255, 255, .16); }

.promo-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 12px; padding: 10px 10px 10px 12px; border-radius: var(--radius-lg); background: var(--glass); border: .5px solid var(--glass-line); }
.promo-inline .pr-ico { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 4px 12px color-mix(in srgb, var(--sec-2) 40%, transparent); }
.promo-inline .input-row { margin: 0; gap: 8px; }
.promo-inline .input { padding-top: 10px; padding-bottom: 10px; background: var(--bg-3); }
.promo-inline .btn { padding-top: 10px; padding-bottom: 10px; }
.promo-inline .hint-err { grid-column: 1 / -1; margin: 0; }

.quick { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick .qa { flex-direction: column; justify-content: flex-start; text-align: center; gap: 8px; padding: 12px 4px 10px; }
.quick .qa-t { font-size: 13px; line-height: 1.2; }


/* Карточка баланса: вместо круга — минималистичная карта России из точек с узлами связи (assets/ru-map.svg); слева гаснет, чтобы баланс читался */
.hero::after { display: none; }
.hero .hero-map { position: absolute; z-index: 0; top: 50%; right: 0; width: 100%; aspect-ratio: 640 / 351; transform: translateY(-50%); pointer-events: none; opacity: .85;
  background: url(/assets/ru-map.svg) center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, #000 42%); mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, #000 42%); }


/* Счётчики в карточке баланса: размытая подложка, чтобы точки карты под ними не «рябили» */
.hero .hero-stats { background: rgba(10, 12, 34, .30); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Логотип в шапке «Ещё» — фиксированный фон бренда, не меняется от оформления */
.mh-logo { background: #0d1530; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* Картинки из точек вместо декоративных кругов в цветных карточках: у каждого раздела своя (карта региона, глобус, волны, радар) */
.card.gcard::after { width: 64%; height: 150%; right: -4%; bottom: -25%; border-radius: 0; opacity: .55;
  background: url(/assets/dots-world.svg) right center / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 42%); mask-image: linear-gradient(90deg, transparent 4%, #000 42%); }
:root[data-sec="outline"] .card.gcard::after { background-image: url(/assets/dots-europe.svg); }
:root[data-sec="awg"] .card.gcard::after { background-image: url(/assets/dots-asia.svg); }
:root[data-sec="deposit"] .card.gcard::after, :root[data-sec="history"] .card.gcard::after { background-image: url(/assets/dots-waves.svg); }
:root[data-sec="subs"] .card.gcard::after, :root[data-sec="admin"] .card.gcard::after { background-image: url(/assets/dots-rings.svg); }
:root[data-sec="private"] .card.gcard::after, :root[data-sec="tg"] .card.gcard::after { background-image: url(/assets/dots-globe.svg); }
:root[data-sec="reseller"] .card.gcard::after { background-image: url(/assets/dots-americas.svg); }
.more-hero::after { content: ""; position: absolute; z-index: 0; right: -26px; top: 50%; width: 170px; height: 170px; transform: translateY(-50%); pointer-events: none; opacity: .55;
  background: url(/assets/dots-globe.svg) center / contain no-repeat; }


/* Шапка главной: то же «сияние», но в акценте приложения — он один на все разделы.
   Раньше здесь был зашит синий, и красный акцент с ним не сочетался. */
:root[data-sec] .hero {
  background:
    radial-gradient(85% 120% at 100% 0%, rgba(255, 92, 122, .55) 0%, rgba(255, 92, 122, 0) 58%),
    radial-gradient(100% 130% at 0% 105%, rgba(150, 0, 40, .6) 0%, rgba(150, 0, 40, 0) 62%),
    linear-gradient(140deg, #ff2d55 0%, #b3002d 52%, #4a0013 100%);
  box-shadow: 0 16px 36px -16px rgba(255, 45, 85, .7), inset 0 1px 0 rgba(255, 255, 255, .26); }
:root[data-sec] .more-hero {
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(255, 92, 122, .5) 0%, rgba(255, 92, 122, 0) 60%),
    linear-gradient(135deg, #ff2d55 0%, #a8002a 60%, #3d0010 100%); }


/* ═══════════ Дизайн-обновление: переходы, нажатия, значок на «Ключах», пустые состояния ═══════════ */
/* Переход между экранами: вперёд — въезд справа, назад — слева */
.screen.dir-fwd { animation: scrFwd .34s var(--ease) both; }
.screen.dir-back { animation: scrBack .34s var(--ease) both; }
@keyframes scrFwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes scrBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.dir-fwd, .screen.dir-back { animation: none; } }

/* Нажатие с пружинкой */
.item, .mtile, .qa, .key-tile, .stat, .hs, .option, .nav-item { transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, box-shadow .2s, border-color .2s; }
.item:active, .mtile:active, .qa:active, .key-tile:active, .stat:active, .hs:active, .option:active { transform: scale(.972); }
.btn:active { transform: scale(.975); }

/* Нижняя панель: активная вкладка — «таблетка» под иконкой; число скоро истекающих ключей на «Ключах» */
.tab { position: relative; }
.tab::before { content: ""; position: absolute; top: 5px; left: 50%; width: 56px; height: 31px; margin-left: -28px; border-radius: 16px; z-index: -1;
  background: color-mix(in srgb, var(--sec-1) 20%, transparent); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .32s cubic-bezier(.3, 1.5, .5, 1); }
.tab.active::before { opacity: 1; transform: none; }
.tab .tab-badge { position: absolute; top: 3px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #ff3b5c; color: #fff;
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg-2); }
.tab .tab-badge.hidden { display: none; }

/* Пустые состояния: картинка из точек (цвета темы) за иконкой */
.empty-state .e-stage { position: relative; width: 200px; height: 100px; margin: 0 auto 8px; display: grid; place-items: center; }
.empty-state .e-stage::before { content: ""; position: absolute; inset: 0; background: var(--sec-1, var(--accent)); opacity: .62;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.empty-state .e-stage .e-ico { position: relative; margin: 0; box-shadow: 0 10px 24px -10px var(--sec-2, var(--accent)); }
.e-art-world { --art: url(/assets/dots-world.svg); } .e-art-globe { --art: url(/assets/dots-globe.svg); } .e-art-europe { --art: url(/assets/dots-europe.svg); }
.e-art-asia { --art: url(/assets/dots-asia.svg); } .e-art-rings { --art: url(/assets/dots-rings.svg); } .e-art-waves { --art: url(/assets/dots-waves.svg); }
.home-sk { margin-top: 14px; }

/* ═══════════ Карточка ключа ═══════════ */
.khero { padding: 18px 16px 14px; }
.khero .kh-top { display: flex; align-items: center; gap: 14px; }
.khero .kh-ico { flex: none; width: 60px; height: 60px; display: grid; place-items: center; }
.khero .kh-ico .app-ico { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); }
.khero .kh-name { font-weight: 800; font-size: 20px; letter-spacing: -.2px; }
.khero .kh-sub { font-size: 13px; opacity: .78; margin-top: 2px; }
.khero .kh-pill { margin-top: 8px; }
.khero .kh-foot { margin-top: 12px; padding-top: 10px; border-top: .5px solid rgba(255, 255, 255, .22); font-size: 14px; opacity: .92; }
.khero .kh-foot + .kh-foot { margin-top: 6px; padding-top: 0; border-top: none; }
.kring { position: relative; flex: none; width: 76px; height: 76px; }
.kring svg { width: 76px; height: 76px; display: block; }
.kring .kr-bg { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 7; }
.kring .kr-fg { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; animation: krDraw 1.1s var(--ease) both; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)); }
.kring.warn .kr-fg { stroke: #ffd66b; } .kring.bad .kr-fg { stroke: #ff8a8a; }
.kring .kr-n { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12px; font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.kring .kr-l { position: absolute; left: 0; right: 0; bottom: 17px; text-align: center; font-size: 11px; opacity: .8; }
@keyframes krDraw { from { stroke-dasharray: 0 189; } }
@media (prefers-reduced-motion: reduce) { .kring .kr-fg { animation: none; } }
.act3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.act3.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.act3 .btn { flex-direction: column; gap: 5px; padding: 11px 4px; font-size: 13px; line-height: 1.15; height: auto; white-space: normal; text-align: center; }
.act3 .btn svg { width: 21px; height: 21px; }

/* Покупка: значок «Рекомендуем» у лучшего сервера */
.srv-card .pill.reco { margin-left: 6px; font-size: 11px; padding: 2px 8px; vertical-align: 2px; }

/* ═══════════ Шкала шрифтов и размеры иконок ═══════════ */
/* Ступени: 11 · 12 · 13 · 14 · 15 · 16 · 17 · 20 · 24 · 28 (+ крупные числа 22/26/30/40). Половинчатых размеров (12.5, 13.5, 14.5…) больше нет. */
:root { --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-h1: 28px; }

/* Иконки приложений и серверов крупнее */
.key-tile .kicon { width: 52px; height: 52px; border-radius: 16px; }
.item.pk-item .pk-ico { width: 54px; height: 54px; border-radius: 16px; }
.item.pk-row .pk-ico { width: 50px; height: 50px; border-radius: 15px; }
.srv-card .flag { width: 52px; height: 52px; border-radius: 16px; }
.srv-card .flag.pk { border-radius: 16px; }

/* Светлая тема: заголовки разделов темнее, чтобы читались на белом */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .section-title { color: color-mix(in srgb, var(--sec-1) 60%, #14142a); } }
:root[data-theme="light"] .section-title { color: color-mix(in srgb, var(--sec-1) 60%, #14142a); }

/* ═══════════ Скелетоны: нейтральные блоки с бегущим бликом (видны и в тёмной, и в светлой теме) ═══════════ */
.sk-b { display: block; position: relative; overflow: hidden; border-radius: 8px; background: rgba(127, 127, 127, .20); flex: none; }
.sk-b::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); animation: skSweep 1.25s ease-in-out infinite; }
@keyframes skSweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk-b::after { animation: none; } }
.sk-list .sk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sk-list .sk-row + .sk-row { border-top: .5px solid var(--sep); }
.sk-ic { width: 44px; height: 44px; border-radius: 14px; }
.sk-l1 { width: 58%; height: 14px; } .sk-l2 { width: 38%; height: 11px; margin-top: 8px; }
.sk-hero { pointer-events: none; }
.sk-hero .sk-b { background: rgba(255, 255, 255, .18); }
.skel-key .sk-cap { margin: 22px 16px 10px; }
.skel-key .card { margin-top: 0; }

.khero .kh-sub { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }

.legal-note { margin-top: 14px; color: var(--hint); text-align: center; line-height: 1.45; } .legal-note a { color: var(--hint); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════ Розыгрыш: «Почему результат честный» — понятно, как на ладони ═══════════ */
.gv-how { gap: 16px; }
.gv-lead { display: flex; gap: 12px; align-items: flex-start; }
.gv-lead b { font-size: 17px; line-height: 1.25; } .gv-lead .small { margin-top: 4px; line-height: 1.45; }
.gv-lead-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #34d67a, #0e9f8a); box-shadow: 0 8px 18px -8px rgba(14, 159, 138, .7); }
.gv-lead-ico svg { width: 22px; height: 22px; }
.gv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--green); background: var(--green-soft); }
.gv-chip svg { width: 13px; height: 13px; }
.gv-tl { position: relative; display: grid; gap: 16px; margin-top: 2px; }
.gv-tl::before { content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 2px; background: var(--sep); }
.gv-tl .gv-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.gv-num { z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 0 0 4px var(--bg-2); }
.gv-verdict { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; margin-top: 12px; }
.gv-verdict svg { flex: none; width: 22px; height: 22px; margin-top: 1px; } .gv-verdict b { font-size: 15px; line-height: 1.3; } .gv-verdict .small { margin-top: 3px; line-height: 1.4; }
.gv-verdict.ok { background: var(--green-soft); color: var(--green); } .gv-verdict.bad { background: var(--red-soft); color: var(--red); }
.gv-verdict .small { color: inherit; opacity: .9; }
.gv-steps > b { display: block; margin-bottom: 2px; }
.gv-chk { display: grid; gap: 6px; margin-top: 8px; }
.gv-tech { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bg-3); }
.gv-tech .kv { word-break: break-all; }
.gv-tech .btn-row .btn { text-decoration: none; text-align: center; }

/* ═══════════ Розыгрыш: красивая шапка ═══════════ */
.gv-hero { padding: 20px 18px 18px; border-radius: 24px; box-shadow: 0 20px 44px -22px var(--g2), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gv-hero::after { content: ""; position: absolute; z-index: 0; width: 280px; height: 280px; right: -100px; top: -120px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), transparent 66%); }
.gv-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gv-hero-medal { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); display: grid; }
.gv-hero .gv-h { font-size: 28px; margin-top: 14px; letter-spacing: -.3px; text-shadow: 0 2px 16px rgba(0, 0, 0, .18); }
.gv-top { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: .5px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gv-top span { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.gv-top b { font-size: 20px; line-height: 1.2; }
.gv-stats { display: flex; gap: 8px; margin-top: 10px; }
.gv-stat { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .24); }
.gv-stat.wide { flex: 1.5; }
.gv-stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.gv-stat span { display: block; font-size: 12px; opacity: .8; margin-top: 1px; }

/* Итоги: тёплое «золотое» свечение у завершённого розыгрыша (при любой теме); технические подробности — подпись над значением */
.gv-hero.done::after { background: radial-gradient(circle, rgba(255, 214, 102, .55), transparent 66%); }
.gv-hero.done { box-shadow: 0 20px 44px -22px var(--g2), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(255, 214, 102, .35); }
.gv-tech .kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.gv-tech .kv .k { margin-top: 10px; font-size: 12px; } .gv-tech .kv .k:first-child { margin-top: 0; }
.gv-tech .kv .v { text-align: left; }
.gv-lead .gv-lead-t { margin-top: 0; font-size: 14px; color: var(--text); opacity: .88; }

.gv-chip.warn { color: var(--amber); background: var(--amber-soft); }

/* ═══════════ Конструктор розыгрыша ═══════════ */
.gv-prev { position: sticky; top: calc(6px + env(safe-area-inset-top, 0px)); z-index: 6; }
.gv-prev .gv-card { zoom: .74; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
.gv-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gv-tpl { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px 12px 11px; border-radius: 16px; border: 1.5px solid var(--sep); background: var(--bg-2); color: var(--text); cursor: pointer; }
.gv-tpl i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); margin-bottom: 4px; }
.gv-tpl i svg { width: 17px; height: 17px; } .gv-tpl b { font-size: 14px; line-height: 1.2; } .gv-tpl small { font-size: 11.5px; color: var(--hint); line-height: 1.25; }
.gv-tpl.on { border-color: var(--sec-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-1) 25%, transparent); }
.gv-sec { padding: 14px 16px 16px; display: grid; gap: 14px; }
.gv-sec > .field, .gv-sec > .stack, .gv-sec > label { margin: 0; }
.gv-sec-h { display: flex; align-items: center; gap: 12px; }
.gv-sec-h > div { display: grid; gap: 1px; } .gv-sec-h b { font-size: 17px; line-height: 1.2; } .gv-sec-h small { font-size: 12px; color: var(--hint); }
.gv-sec-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; font-style: normal;
  background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 8px 18px -8px var(--sec-2); }
.gv-sec-ico svg { width: 20px; height: 20px; }
.gv-swatches button { width: 46px; height: 46px; border-radius: 15px; }
.gv-swatches .gv-dice { display: grid; place-items: center; background: var(--bg-3); color: var(--text); border: 1.5px dashed var(--sep); }
.gv-swatches .gv-dice svg { width: 22px; height: 22px; }
.gv-pats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gv-pt { position: relative; height: 56px; border-radius: 14px; border: 2.5px solid transparent; cursor: pointer; overflow: hidden; color: #fff; text-align: left; padding: 0 8px 6px; display: flex; align-items: flex-end;
  background: var(--pat, linear-gradient(transparent, transparent)), linear-gradient(135deg, var(--g1, #8b5cf6), var(--g2, #4f46e5)); }
.gv-pt span { position: relative; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.gv-pt.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 380px) { .gv-tpls { grid-template-columns: 1fr; } .gv-pats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══════════ Админ-режим ═══════════ */
.tabbar.admin-tabbar, .sidebar .nav.admin-nav { display: none; }
body.admin-mode .tabbar.user-tabbar { display: none; }
body.admin-mode .tabbar.admin-tabbar { display: flex; border-top-color: color-mix(in srgb, var(--sec-1) 60%, transparent); }
@media (min-width: 900px) {
  body.admin-mode .tabbar.admin-tabbar { display: none; }
  body.admin-mode .sidebar .nav.user-nav, body.admin-mode .sidebar .side-balance { display: none; }
  body.admin-mode .sidebar .nav.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
  body.admin-mode .sidebar .brand::after { content: "админ"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
  .nav-cap { padding: 12px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); }
}
.adm-find { display: flex; align-items: center; gap: 8px; position: relative; margin-bottom: 4px; }
.adm-find .af-ico { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--hint); pointer-events: none; display: grid; place-items: center; }
.adm-find .af-ico svg { width: 18px; height: 18px; }
.adm-find .input { flex: 1; padding-left: 38px; }
.adm-find .btn { flex: none; width: 46px; padding: 0; display: grid; place-items: center; }
.adm-find .btn svg { width: 20px; height: 20px; }
.adm-find.side { margin: 0 2px 10px; } .adm-find.side .input { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.adm-exit { white-space: nowrap; }
.adm-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tab-badge.inline { position: static; display: inline-grid; margin-left: 4px; box-shadow: none; vertical-align: 1px; }
.sidebar .nav-item .tab-badge { position: static; margin-left: auto; box-shadow: none; }
.tb-admin { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 5px 12px; border-radius: 999px; border: .5px solid var(--glass-line); background: var(--glass); color: var(--text); font-size: 13px; font-weight: 650; cursor: pointer; }
.tb-admin svg { width: 15px; height: 15px; color: var(--sec-1); }

/* бейджи в админ-режиме и боковое меню с прокруткой */
.tab-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #ff3b5c; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; place-items: center; }
.tab-badge.hidden { display: none; }
.tab-badge.inline, .sidebar .nav-item .tab-badge { display: inline-grid; }
@media (min-width: 900px) { body.admin-mode .sidebar .nav.admin-nav { min-height: 0; } .sidebar { overflow: hidden; } }

/* ═══════════ Аналитика и обзор админки: цвета, графики, без «съездов» ═══════════ */
.chart .bar { background: linear-gradient(180deg, var(--sec-1), var(--sec-2)); opacity: .95; border-radius: 5px 5px 2px 2px; }
.chart.g-green .bar { background: linear-gradient(180deg, #4ade80, #0e9f8a); }
.chart.g-cyan .bar { background: linear-gradient(180deg, #38d9ff, #2f74ff); }
.chart.g-violet .bar { background: linear-gradient(180deg, #b78cff, #6a4df0); }
.adm-metrics .metric { position: relative; padding: 14px 12px 12px; overflow: hidden; min-width: 0; }
.adm-metrics .metric::after { content: ""; position: absolute; right: -22px; top: -22px; width: 70px; height: 70px; border-radius: 50%; opacity: .22; background: var(--mc); pointer-events: none; }
.adm-metrics .m-blue { --mc: #2f8bff; } .adm-metrics .m-green { --mc: #34d67a; } .adm-metrics .m-violet { --mc: #a37bff; }
.m-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; margin-bottom: 8px; background: var(--mc); box-shadow: 0 6px 14px -6px var(--mc); }
.m-ic svg { width: 17px; height: 17px; }
.adm-metrics .n { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.adm-metrics .l { font-size: 12px; color: var(--hint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-metrics .l2 { font-size: 11px; color: var(--text); opacity: .75; margin-top: 2px; white-space: nowrap; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { position: relative; overflow: hidden; padding: 14px; border-radius: 18px; background: var(--bg-2); border: .5px solid var(--glass-line); box-shadow: var(--shadow); min-width: 0; }
.kpi::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 100px; height: 100px; border-radius: 50%; background: var(--kc); opacity: .16; pointer-events: none; }
.k-violet { --kc: #a37bff; } .k-green { --kc: #34d67a; } .k-cyan { --kc: #38d9ff; } .k-orange { --kc: #ffa23a; } .k-teal { --kc: #2dd4bf; } .k-pink { --kc: #ff6aa3; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.kpi-ic { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--kc); box-shadow: 0 8px 16px -8px var(--kc); }
.kpi-ic svg { width: 18px; height: 18px; }
.kpi-n { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.kpi-l { font-size: 13px; margin-top: 4px; } .kpi-p { font-size: 12px; color: var(--hint); margin-top: 2px; }
.dl { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dl.up { color: var(--green); background: var(--green-soft); } .dl.down { color: var(--red); background: var(--red-soft); } .dl.flat { color: var(--hint); background: var(--bg-3); }

.heat { display: grid; gap: 3px; margin-top: 12px; }
.heat-h, .heat-row { display: grid; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat-h span { font-size: 10px; color: var(--hint); }
.heat-d { font-size: 11px; color: var(--hint); font-weight: 600; }
.heat-c { display: block; aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.heat-leg { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--hint); }
.heat-leg i { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--sec-1)); border: .5px solid var(--sep); }
.chip-i { display: inline-block; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--bg-3); }
.chip-i.hot { color: #fff; background: linear-gradient(135deg, #ff7a59, #ff3d71); } .chip-i.cold { color: #fff; background: linear-gradient(135deg, #38b6ff, #5b6dff); }
.insight { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.insight > i { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.insight > i svg { width: 18px; height: 18px; }
.ins-list { display: grid; gap: 14px; } .ins-list .insight b { font-size: 14.5px; } .ins-list .small { margin-top: 3px; }

.fn { display: grid; gap: 14px; margin-top: 12px; }
.fn-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; } .fn-t b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fn-bar { height: 12px; border-radius: 6px; background: var(--bg-3); margin-top: 6px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #38d9ff, #2f74ff); } .fn-bar i.s { background: linear-gradient(90deg, #b78cff, #6a4df0); } .fn-bar i.p { background: linear-gradient(90deg, #4ade80, #0e9f8a); }
.fn-p { font-size: 12px; color: var(--hint); margin-top: 4px; }
.mth + .mth { margin-top: 16px; padding-top: 14px; border-top: .5px solid var(--sep); }
.kvr { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 14px; } .kvr + .kvr { border-top: .5px solid var(--sep); } .kvr b { font-variant-numeric: tabular-nums; }

.rk-card { padding: 4px 16px 8px; } .rk { padding: 11px 0; } .rk + .rk { border-top: .5px solid var(--sep); }
.rk-t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14.5px; font-weight: 600; } .rk-t b { font-variant-numeric: tabular-nums; }
.rk-b { height: 7px; border-radius: 4px; background: var(--bg-3); margin-top: 7px; overflow: hidden; } .rk-b i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sec-1), var(--sec-2)); }
.rk-s { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--hint); }
.kpi-grid .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.adm-quick { margin-bottom: 14px; }

/* ─── Telegram-прокси: логотип, витрина, инструкция ─── */
.cta.tg { background: linear-gradient(135deg, #2aabee, #1b63d6); box-shadow: 0 16px 34px -18px #1b63d6; }
.cta.tg .plus-badge { color: #1b63d6; }
.cta[disabled] { opacity: .55; pointer-events: none; filter: saturate(.55); }
.tg-logo { display: block; width: 64px; height: 64px; flex: none; border-radius: 28%; overflow: hidden; box-shadow: 0 14px 30px -12px rgba(27,99,214,.75); }
.tg-logo img { display: block; width: 100%; height: 100%; }
.tg-logo.sm { width: 44px; height: 44px; box-shadow: 0 8px 18px -8px rgba(27,99,214,.7); }
.guide-link .tg-logo { width: 38px; height: 38px; }
.tg-hero { position: relative; overflow: hidden; padding: 18px 16px 14px; margin-bottom: 14px; border-radius: 22px; background: var(--bg-2); border: .5px solid var(--glass-line); box-shadow: var(--shadow); }
.tg-hero::before { content: ""; position: absolute; top: -90px; right: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(42,171,238,.34), transparent 68%); pointer-events: none; }
.tg-hero > * { position: relative; }
.tg-hero-top, .tg-guide-head, .tg-sheet-head { display: flex; align-items: center; gap: 14px; }
.tg-guide-head { margin-bottom: 14px; }
.tg-sheet-head { margin-bottom: 4px; }
.tg-kick { font-size: 12px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; color: #2aabee; }
.tg-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin-top: 3px; }
.tg-lead { color: var(--hint); font-size: 14.5px; line-height: 1.45; margin: 12px 0; }
.tg-hero .perks { margin: 0 0 12px; }
.tg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 14px; }
.tg-price b { font-size: 32px; font-weight: 800; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.tg-price span { color: var(--hint); font-size: 14px; }
.tg-price em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 999px; }
.tg-note { font-size: 12.5px; color: var(--hint); line-height: 1.4; margin: 10px 2px 0; text-align: center; }
.tg-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.tg-how > div { background: var(--bg-2); border: .5px solid var(--glass-line); border-radius: 16px; padding: 12px 8px; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; }
.tg-how b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 8px; background: linear-gradient(135deg, #2aabee, #1b63d6); color: #fff; font-size: 13px; }
.tg-soon { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--amber); }
.tg-soon svg { width: 15px; height: 15px; flex: none; }
.tg-faq > div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; padding: 8px 0; }
.tg-faq > div + div { border-top: .5px solid var(--sep); }
.tg-faq svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #2aabee; }
.cta.tg .plus .app-ico { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 8px 18px -6px rgba(0,0,0,.45); }
.tg-sheet-head h3, .tg-sheet-head .sheet-text { text-align: left; }
.cta[disabled] .arrow { display: none; }
.segmented.two-rows { flex-wrap: wrap; row-gap: 2px; }
.segmented.two-rows .seg-br { flex: 0 0 100%; height: 0; }
.segmented.two-rows button { flex: 1 1 calc(50% - 2px); }
.segmented.two-rows button.row2 { flex: 0 0 auto; min-width: 58%; margin: 0 auto; }
.segmented.two-rows .thumb { bottom: auto; transition: transform .32s cubic-bezier(.3,1.3,.5,1), width .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1); }
.tg-pick { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 11px 14px; border-radius: 16px; border: .5px solid var(--glass-line); background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); text-align: left; cursor: pointer; }
.tg-pick small { display: block; color: var(--hint); font-size: 12px; }
.tg-pick b { display: block; font-size: 15.5px; font-weight: 700; margin-top: 1px; }
.tg-pick .chev { color: var(--hint); flex: none; }
.pk-item.sel { background: color-mix(in srgb, #2aabee 14%, transparent); }
.pk-item.sel > svg.chev { color: #2aabee; }

/* ─── Страница «Ключи»: плитки протоколов (вместо серой плашки) ─── */
.ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ptab { --c1: #7b61ff; --c2: #3b4fd8; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; border: .5px solid var(--glass-line); background: var(--glass); color: var(--text); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), background .3s, border-color .3s, box-shadow .35s; animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ptab.outline { --c1: #3fe08a; --c2: #0f9d63; } .ptab.awg { --c1: #ff5f7e; --c2: #b3224a; } .ptab.tg { --c1: #2aabee; --c2: #1b63d6; }
.ptab.wide { grid-column: 1 / -1; justify-self: center; min-width: 58%; justify-content: center; }
.ptab:active { transform: scale(.97); }
.pt-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); filter: saturate(.55) brightness(.92); transition: transform .35s var(--ease), filter .3s; }
.pt-ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-l { opacity: .72; transition: opacity .25s; }
.ptab.active { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, transparent), color-mix(in srgb, var(--c2) 22%, transparent)); border-color: color-mix(in srgb, var(--c1) 65%, transparent); box-shadow: 0 12px 26px -16px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ptab.active .pt-ico { filter: none; transform: scale(1.08) rotate(-3deg); animation: pop-in .45s var(--ease); }
.ptab.active .pt-l { opacity: 1; font-weight: 750; }
.ptab.active::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%); transform: translateX(-120%); animation: ptShine .9s var(--ease) .1s 1 both; }
@keyframes ptShine { to { transform: translateX(120%); } }

/* ─── Вкладка Web proxy: появление ─── */
.tg-hero { animation: rise .5s var(--ease) both; }
.tg-logo { animation: ico-in .75s var(--ease) .1s both, float 5.5s ease-in-out 1.2s infinite; }
.tg-kick { animation: rise .5s var(--ease) .15s both; }
.tg-title { animation: rise .5s var(--ease) .22s both; }
.tg-lead { animation: rise .5s var(--ease) .3s both; }
.tg-hero .perk { animation: pop-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + .4s); }
.tg-price { animation: rise .5s var(--ease) .55s both; }
.tg-price em { animation: pop-in .5s var(--ease) .95s both; }
.tg-pick { animation: rise .45s var(--ease) .65s both; }
.tg-hero .cta { animation: rise .55s var(--ease) .7s both; }
.tg-note { animation: fade-in .6s ease 1s both; }
.tg-hero + .guide-link, .tg-hero ~ .section-title { animation: rise .5s var(--ease) .85s both; }
@media (prefers-reduced-motion: reduce) {
  .ptab, .ptab.active::after, .ptab.active .pt-ico, .tg-hero, .tg-hero *, .tg-logo, .tg-hero + .guide-link, .tg-hero ~ .section-title { animation: none !important; transition: none !important; }
}

/* ─── Вход и установка ─── */
.ac-hero { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 12px; border-radius: 20px; border: .5px solid var(--glass-line); background: linear-gradient(135deg, color-mix(in srgb, var(--sec-1) 22%, var(--bg-2)), color-mix(in srgb, var(--sec-2) 12%, var(--bg-2))); }
.ac-ico { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 17px; background: rgba(255, 255, 255, .08); animation: ico-in .7s var(--ease) .1s both; }
.ac-ico svg { width: 36px; height: 36px; }
.ac-t { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.ac-s { margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--hint); }
.ac-ways { display: grid; gap: 10px; }
.ac-way { display: flex; gap: 12px; padding: 14px; border-radius: 18px; border: .5px solid var(--glass-line); background: var(--bg-2); }
.ac-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); }
.ac-way b { font-size: 15.5px; }
.ac-way .sub { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--hint); }
.ac-way .btn { margin-top: 10px; }
.ac-tips > div { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 14px; line-height: 1.4; }
.ac-tips > div + div { border-top: .5px solid var(--sep); }
.ac-tips svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--sec-1); }
.ac .btn-row { margin-top: 18px; }
.ac-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 18px; border: .5px solid var(--glass-line); background: linear-gradient(135deg, color-mix(in srgb, var(--sec-1) 14%, var(--bg-2)), var(--bg-2)); color: var(--text); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--ease); }
.ac-card:active { transform: scale(.985); }
.ac-card-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); box-shadow: 0 8px 18px -10px var(--sec-2); }
.ac-card-ico svg { width: 21px; height: 21px; }
.ac-card b { display: block; font-size: 15px; }
.ac-card small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--hint); }
.ac-card .chev { flex: none; color: var(--hint); }

/* ─── Подписка: тарифы внутри hero (как у Web proxy) ─────────────────── */
.tg-hero .options.two { gap: 10px; margin: 0 0 14px; }
.tg-hero .option { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; box-shadow: none; padding: 12px 13px; }
.tg-hero .option.active { border-color: #2aabee; background: color-mix(in srgb, #2aabee 15%, transparent); box-shadow: 0 0 0 1px #2aabee; }
.tg-hero .option .o-price { font-size: 19px; margin-top: 4px; }
.tg-hero .option .o-sub { font-size: 12.5px; }
.tg-hero .option .tick { background: #2aabee; display: none; }
.tg-hero .option.active .tick { display: grid; }
.tg-hero .kring { width: 62px; height: 62px; }
.tg-hero .kring svg { width: 62px; height: 62px; }
.tg-hero .kring .kr-n { font-size: 19px; padding-bottom: 10px; }
.tg-hero .kring .kr-l { font-size: 9px; }

/* ─── Флаг локации вместо значка приложения ──────────────────────────── */
.flag-ico { background: color-mix(in srgb, var(--text) 7%, transparent) !important; box-shadow: none !important; }
.flag-ico span { font-size: 30px; line-height: 1; filter: saturate(1.05); }
.key-tile .kicon.flag-ico { width: 44px; height: 44px; border-radius: 14px; }
.key-tile .kicon.flag-ico span { font-size: 26px; }

/* ─── Едко-красный бейдж «скоро закончится» ──────────────────────────── */
.pill.hot-red {
  background: linear-gradient(135deg, #ff2d55, #d1002f);
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px -8px rgba(255, 45, 85, .9), inset 0 1px 0 rgba(255,255,255,.28);
  animation: hotPulse 2.4s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 6px 16px -8px rgba(255, 45, 85, .9), inset 0 1px 0 rgba(255,255,255,.28); }
  50%      { box-shadow: 0 8px 22px -6px rgba(255, 45, 85, 1), inset 0 1px 0 rgba(255,255,255,.34); }
}
@media (prefers-reduced-motion: reduce) { .pill.hot-red { animation: none; } }

/* ─── Консоль на фоне героя подписки ─────────────────────────────────── */
.tg-hero .con-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-radius: inherit; z-index: 0;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #6fe3a8; opacity: .17;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.tg-hero .con-bg pre { margin: 0; padding: 12px 14px; white-space: pre; animation: conScroll 34s linear infinite; }
.tg-hero .con-bg .c-dim { color: #5b8f77; }
.tg-hero .con-bg .c-ok  { color: #9dffcb; }
.tg-hero .con-bg .c-err { color: #ff9d9d; }
@keyframes conScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .tg-hero .con-bg pre { animation: none; } }
.tg-hero > *:not(.con-bg) { position: relative; z-index: 1; }


/* ─── Консоль в фоне приложения ─────────────────────────────────────────── */
/* Строки печатаются в фоне под «северным сиянием»: страница не выглядит
   пустой, но текст не мешает читать — прозрачность низкая, есть маска. */
.bg-con {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 20px 22px;
  font: 12.5px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #ffb3c1; opacity: .085; white-space: pre-wrap; overflow: hidden;
  pointer-events: none; letter-spacing: .01em;
  /* Текст растекается по всей ширине экрана, а не стоит колонкой слева */
  columns: 3 300px; column-gap: 40px; column-fill: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.bg-con .c-dim { color: #d98a9b; }
.bg-con .c-ok  { color: #ffd0d9; }
.bg-con .c-err { color: #ff5c7a; }
:root[data-theme="light"] .bg-con { opacity: .09; color: #a30024; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bg-con { opacity: .09; } }
@media (prefers-reduced-motion: reduce) { .bg-con { opacity: .08; } }

/* Флаг страны: картинка на всю плашку, скругление как у иконок */
.flag-ico { background: none !important; box-shadow: none !important; overflow: hidden; }
.flag-ico img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }


/* ─── Кнопки в шапке главной ────────────────────────────────────────────── */
/* Раньше они стояли в колонку шириной 134px и «Купить подписку» упиралось
   в край. Теперь ряд равных кнопок под балансом: обе читаются одинаково,
   ни одна не выглядит второстепенной случайно. */
.hero .hero-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hero .hero-act {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: auto;
}
.hero .hero-act .btn {
  padding: 11px 12px; border-radius: 13px; font-size: 14.5px; font-weight: 650;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.hero .hero-act .btn:not(.ghost) {
  background: #fff; color: #7a0018;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.55);
}
.hero .hero-act .btn.ghost {
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.hero .hero-act .btn.ghost:active { background: rgba(255,255,255,.28); }

/* Счётчики: столько колонок, сколько пунктов — без пустой трети */
.hero .hero-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* ─── Карточка подписки: вертикальный ритм и один акцент ────────────────── */
.sub-hero {
  position: relative; overflow: hidden;
  padding: 16px 16px 14px; margin-bottom: 14px;
  border-radius: 22px;
  background: var(--bg-2);
  border: .5px solid var(--glass-line);
  box-shadow: var(--shadow);
}
.sub-hero::before {
  content: ""; position: absolute; top: -110px; right: -90px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--sec-1) 34%, transparent), transparent 68%);
}
.sub-hero > * { position: relative; }

.sub-head { display: flex; align-items: center; gap: 12px; }
.sub-logo { width: 52px; height: 52px; flex: none; border-radius: 17px; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, #d92b45, #8e0022);
  box-shadow: 0 10px 24px -14px rgba(140, 20, 40, .8); }
.sub-logo svg { width: 26px; height: 26px; stroke-width: 1.9; }
.sub-kick { font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sec-1); }
.sub-name { font-size: 19px; font-weight: 780; letter-spacing: -.35px; margin-top: 2px; }

.sub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.sub-stat { background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 13px;
  padding: 9px 6px; text-align: center; }
.sub-stat b { display: block; font-size: 20px; font-weight: 780; font-variant-numeric: tabular-nums;
  letter-spacing: -.4px; }
.sub-stat span { display: block; font-size: 11.5px; color: var(--hint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sub-tag { font-size: 11.5px; font-weight: 650; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--sec-1) 13%, transparent); color: var(--sec-1); }
.sub-tag.muted { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--hint);
  font-weight: 600; }

.sub-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.sub-plan {
  position: relative; text-align: left; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1.5px solid transparent; border-radius: 15px; padding: 11px 12px;
  transition: border-color .18s ease, background .18s ease;
}
.sub-plan.active { border-color: var(--sec-1); background: color-mix(in srgb, var(--sec-1) 12%, transparent); }
.sp-days { display: block; font-size: 12.5px; color: var(--hint); font-weight: 600; }
.sp-price { display: block; font-size: 19px; font-weight: 780; letter-spacing: -.4px; margin-top: 1px;
  font-variant-numeric: tabular-nums; }
.sp-day { display: block; font-size: 11.5px; color: var(--hint); margin-top: 1px; }
.sub-plan.active .sp-days, .sub-plan.active .sp-day { color: color-mix(in srgb, var(--sec-1) 75%, var(--text)); }

.sub-cta {
  margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sec-1); color: #fff; font-weight: 720;
  box-shadow: 0 14px 30px -16px var(--sec-1);
}
/* .btn.block даёт width:100%, а `.sub-cta` с display:flex без width схлопывается
   до содержимого — кнопка теряла фон и жалось вправо. Возвращаем ширину. */
.sub-hero .sub-cta.btn { width: 100%; background: var(--sec-1); color: #fff; }
.sub-cta:active { filter: brightness(.94); }
.sub-cta-price { font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.18); padding: 2px 9px; border-radius: 999px; font-size: 14px; }

.sub-note { font-size: 12px; color: var(--hint); line-height: 1.4; margin: 10px 2px 0; text-align: center; }


/* ═══════════════════════════════════════════════════════════════════════════
   ШАПКА ГЛАВНОЙ И КНОПКИ — финальный слой.
   Всё, что выше, исторически складывалось из нескольких правок, и последнее
   слово оставалось за синим градиентом и колонкой шириной 134px. Эти правила
   идут последними и перебивают всё: один акцент, две равные кнопки в ряд.
   ═══════════════════════════════════════════════════════════════════════════ */
:root .hero {
  background:
    radial-gradient(85% 120% at 100% 0%, rgba(255, 96, 124, .5) 0%, rgba(255, 96, 124, 0) 58%),
    radial-gradient(100% 130% at 0% 105%, rgba(150, 0, 40, .58) 0%, rgba(150, 0, 40, 0) 62%),
    linear-gradient(140deg, #ff2d55 0%, #a8002a 54%, #3d0010 100%);
  box-shadow: 0 16px 36px -16px rgba(255, 45, 85, .62), inset 0 1px 0 rgba(255, 255, 255, .26);
  animation: none;
}
:root .more-hero {
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(255, 96, 124, .46) 0%, rgba(255, 96, 124, 0) 60%),
    linear-gradient(135deg, #ff2d55 0%, #9c0027 60%, #2e000c 100%);
}

/* Баланс сверху, две кнопки под ним — обе одинаковой ширины */
:root .hero .hero-main {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: stretch; gap: 14px;
}
:root .hero .hero-act {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: auto;
}
:root .hero .hero-act .btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 12px; border-radius: 14px;
  font-size: 14.5px; font-weight: 680; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
:root .hero .hero-act .btn:not(.ghost) {
  background: #fff; color: #8a001c;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .6);
}
:root .hero .hero-act .btn.ghost {
  background: rgba(255, 255, 255, .17); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
:root .hero .hero-act .btn svg { width: 17px; height: 17px; flex: none; }

/* Счётчики: ровно по числу пунктов, без пустой трети */
:root .hero .hero-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* Кнопка покупки в карточке подписки — на всю ширину */
:root .sub-hero .sub-cta.btn { width: 100%; background: var(--sec-1); color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   КОНСОЛЬ ВО ВЕСЬ ФОН + приглушение акцента.
   Было: узкая колонка в левом верхнем углу и слишком яркий красный — текст
   на карточках терялся. Стало: консоль на весь экран под затемнением,
   акцент один и не кислотный.
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-con {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 200%;
  margin: 0; padding: 22px 26px;
  font: 12.5px/1.95 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #ffb8c4;
  opacity: .085;
  white-space: pre;
  pointer-events: none;
  letter-spacing: .01em;
  column-width: 460px;
  column-gap: 48px;
  column-fill: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
}
.bg-con .c-dim { color: #d08a97; }
.bg-con .c-ok  { color: #ffd6dd; }
.bg-con .c-err { color: #ff6b83; }

/* Затемнение между консолью и контентом: карточки должны читаться всегда */
.bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(8, 2, 6, .35) 0%, rgba(8, 2, 6, .72) 100%);
}
.bg > i, .bg > .bg-pat, .bg > .bg-con { z-index: 0; }

/* Акцент: тот же красный, но без кислотности — на нём держится весь текст */
:root { --accent: #e8394f; --accent-soft: rgba(232, 57, 79, .14); }
:root[data-theme="dark"] { --accent: #f0455c; --accent-soft: rgba(240, 69, 92, .16); }
:root { --sec-1: #e8394f; --sec-2: #8e0022; }
:root[data-sec] { --sec-1: #e8394f; --sec-2: #8e0022; }

:root .hero {
  background:
    radial-gradient(85% 120% at 100% 0%, rgba(240, 96, 118, .38) 0%, rgba(240, 96, 118, 0) 58%),
    radial-gradient(100% 130% at 0% 105%, rgba(120, 0, 32, .55) 0%, rgba(120, 0, 32, 0) 62%),
    linear-gradient(140deg, #d92b45 0%, #8e0022 54%, #320010 100%);
  box-shadow: 0 16px 36px -18px rgba(180, 20, 48, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Бейдж «скоро закончится» — красный, но не светящаяся лампочка */
.pill.hot-red {
  background: linear-gradient(135deg, #e8394f, #a8002a);
  color: #fff; font-weight: 760;
  box-shadow: 0 4px 12px -8px rgba(200, 30, 60, .8), inset 0 1px 0 rgba(255,255,255,.2);
  animation: none;
}


/* ─── Читаемость поверх консоли ─────────────────────────────────────────── */
/* Консоль — фон, а не контент: гасим её ещё раз и кладём тёмную подложку,
   чтобы карточки читались на любом экране. */
.bg-con { opacity: .07 !important; }
.bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(6, 2, 5, .30) 0%, rgba(6, 2, 5, .78) 100%);
}
:root[data-theme="light"] .bg-con { opacity: .05 !important; }

/* ─── Цвета: приглушаем акцент, он был слишком ярким для текста ─────────── */
:root {
  --accent: #d92b45;
  --accent-soft: rgba(217, 43, 69, .13);
}
:root[data-theme="dark"] {
  --accent: #e8394f;
  --accent-soft: rgba(232, 57, 79, .15);
}
:root, :root[data-sec] {
  --sec-1: #d92b45;
  --sec-2: #8e0022;
}

/* Герой: глубже, без «неона» */
:root .hero {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(214, 70, 92, .42) 0%, rgba(214, 70, 92, 0) 62%),
    radial-gradient(100% 130% at 0% 105%, rgba(92, 0, 26, .55) 0%, rgba(92, 0, 26, 0) 64%),
    linear-gradient(140deg, #b3253c 0%, #7a001d 58%, #2a000c 100%);
  box-shadow: 0 14px 34px -20px rgba(140, 20, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Плашки статусов — без кислотности */
.pill.hot-red { background: #b3253c; color: #fff; box-shadow: none; animation: none; }
.pill.green  { background: rgba(50, 209, 116, .16); color: #43c07a; }
.pill.amber  { background: rgba(255, 176, 32, .16); color: #e0a02c; }
.pill.red    { background: rgba(217, 43, 69, .16); color: #e05a70; }

/* Кнопка покупки: акцент, но тёмнее — на ней белый текст */
.sub-cta, :root .sub-hero .sub-cta.btn {
  background: linear-gradient(135deg, #c9253f, #8e0022) !important;
  box-shadow: 0 12px 26px -16px rgba(140, 20, 40, .8) !important;
}