/* Кабинет покупателя поверх оформления панели (app.css, hex.css, hx.css, raion.css).
   Здесь — только то, чего у панели нет: вход, тарифы, QR, мелочи. Цвета — только переменные панели,
   чтобы светлая тема и акцент работали так же, как у неё. */

/* ─── шапка: баланс вместо «Разделов» ─── */
/* плашка баланса: значок в цветном кружке и сумма обычным шрифтом с узкими пробелами между разрядами */
.shop-balance {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.06); color: var(--fg); cursor: pointer;
  font: 700 15px/1 var(--font, "Geist", system-ui, sans-serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.shop-balance:hover { border-color: var(--accent-line, var(--accent)); background: var(--accent-soft); }
.shop-balance:active { transform: scale(0.97); }
.shop-balance__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.shop-balance__sum { white-space: nowrap; }
.header__actions .theme-toggle { width: 40px; height: 40px; min-height: 40px; flex: none; aspect-ratio: 1; border-radius: 50%; padding: 0; }

/* Поле с готовым знаком: собачку юзернейма вводить не нужно — она нарисована в поле */
.field__box { position: relative; display: block; }
.field__prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-weight: 600; pointer-events: none; }
.input--prefixed { padding-left: 30px; }
/* Шаги инструкции — списком: абзацем их не читают (владелец, 2026-11-04) */
.field__steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.field__steps li { line-height: 1.45; }
.field__shot { display: block; width: 100%; margin: 8px 0 4px; border-radius: 12px; border: 1px solid var(--line); }
/* На телефоне рядом с плашкой баланса длинный заголовок («Как подключить») обрезался многоточием — чуть мельче */
@media (max-width: 420px) { .header__title { font-size: clamp(17px, 5.2vw, 22px) !important; } }
.shop-side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 14px; font-weight: 800; letter-spacing: -0.02em; }
.shop-side-brand img { border-radius: 50%; }
@media (max-width: 899px) { .shop-side-brand { display: none; } }

/* ─── крупная цифра с кнопками под ней ─── */
.shop-hero-actions { margin-top: 14px; }
.shop-hero-text { font-size: clamp(26px, 7vw, 34px) !important; letter-spacing: -0.035em; }

/* ─── карточки и мелочи ─── */
.shop-pad { padding: 14px; }
.shop-inline { display: flex; gap: 8px; }
.shop-inline .input { flex: 1; min-width: 0; }
.shop-form { display: grid; gap: 12px; }
.shop-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 2px 12px; color: var(--fg-2); font-size: 13.5px; line-height: 1.45; }
.shop-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ─── тарифы ─── */
.shop-plan { padding: 16px; margin-bottom: 10px; display: grid; gap: 12px; }
.shop-plan--hit { border-color: var(--accent) !important; box-shadow: 0 18px 40px -26px var(--accent); }
.shop-plan__name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.shop-plan__meta { font-size: 12.5px; margin-top: 2px; }
.shop-plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shop-plan__price b { font-size: 28px; letter-spacing: -0.03em; }
.shop-plan__price s, .shop-plan__price span { font-size: 13px; }

/* ─── подписка: QR и запасная ссылка ─── */
.shop-qr { display: grid; justify-items: center; gap: 6px; margin: 14px 0 12px; }
.shop-qr__img { width: 190px; height: 190px; padding: 10px; border-radius: 16px; background: #fff; color: #0a0a0b; }
.shop-qr__img svg { width: 100%; height: 100%; display: block; }
.shop-qr .field__hint { margin: 0; text-align: center; }
.shop-spare { margin-top: 12px; color: var(--fg-3); font-size: 13px; }
.shop-spare summary { cursor: pointer; }
.shop-spare[open] { display: grid; gap: 8px; }
.shop-spare .field__hint { margin: 4px 0 0; }

/* ─── серверы и шаги ─── */
.shop-cc, .shop-step {
  display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--fg-2); font-size: 11.5px; font-weight: 600;
}
.shop-step { min-width: 26px; border-radius: 50%; color: var(--accent); border-color: var(--accent); }
/* Флаг страны: квадратная плитка со скруглением — в круге эмодзи-флаг выглядел приплюснутым овалом (владелец) */
.shop-flag { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--glass-rgb), 0.05); font-size: 21px; line-height: 1; flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* ─── серверы: глобус и сводка ─── */
.shop-globe-card { display: grid; gap: 12px; padding: 14px; overflow: hidden; }
.shop-globe { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto; touch-action: none; cursor: grab; }
.shop-globe::before {
  content: ""; position: absolute; inset: 7%; border-radius: 50%;
  transform: scale(var(--globe-zoom, 1)); transition: transform 0.12s linear;
  background: radial-gradient(closest-side, #0a0d14 84%, color-mix(in srgb, var(--accent) 55%, transparent) 97%, transparent 100%);
  box-shadow: 0 0 90px -30px var(--accent);
}
.shop-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.shop-globe--off { display: none; }
.shop-globe-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.shop-globe-card__stats div { display: grid; gap: 2px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.04); text-align: center; }
.shop-globe-card__stats b { font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-globe-card__stats span { font-size: 11.5px; color: var(--fg-3); }
.shop-globe-card__hint { margin: 0; text-align: center; }

/* ─── окно при запуске: уведомления в PWA или «добавить на экран» в браузере (shop/views.js → bootGate) ─── */
/* Во весь экран и на сплошном фоне: кабинет под ним не виден и не листается, пока не нажали одну из кнопок.
   Появляется без анимации — его открывает уезжающая заставка; уходит — коротким затуханием. */
.shop-gate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(110% 55% at 50% -6%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 64%), var(--bg);
}
.shop-gate--out { animation: gate-out 0.22s ease-in both; }
@keyframes gate-out { to { opacity: 0; transform: scale(0.985); } }
.shop-gate__card { width: min(400px, 100%); display: grid; justify-items: center; gap: 14px; text-align: center; }
.shop-gate__app { width: 76px; height: 76px; border-radius: 19px; box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.shop-gate__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.shop-gate__card h2 { margin: 4px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.shop-gate__card > p { margin: 0; max-width: 340px; color: var(--fg-2); font-size: 15px; line-height: 1.5; }
.shop-gate__steps { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; text-align: left; }
.shop-gate__steps li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--s-1, rgba(255, 255, 255, 0.04));
}
.shop-gate__n { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; font-size: 13px; font-weight: 800; color: var(--accent); background: var(--accent-soft); }
.shop-gate__step { min-width: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg); }
.shop-gate__key {
  display: inline-grid; place-items: center; width: 27px; height: 27px; margin: -3px 2px 0; vertical-align: middle;
  border-radius: 8px; color: var(--accent); background: var(--accent-soft);
}
.shop-gate__btns { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.shop-gate__btns .btn { width: 100%; min-height: 52px; font-size: 16px; }
.shop-gate__minor { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--fg-3); }
.shop-gate__minor .link-btn { padding: 8px 6px; color: var(--fg-2); font-size: 14.5px; font-weight: 600; }
body.is-gated { overflow: hidden; }

.shop-hint { display: flex; gap: 12px; padding: 14px; }
.shop-hint__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.shop-hint__body { display: grid; gap: 4px; min-width: 0; }
.shop-hint__body b { font-size: 15px; letter-spacing: -0.01em; }
.shop-hint__body p { margin: 0; color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.shop-hint__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shop-hint__btns .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }

/* ─── пригласить друга: билет-приглашение (владелец, 2026-10-28: «переделай полностью») ─── */
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 24px; overflow: hidden; color: #fff;
  background:
    radial-gradient(110% 90% at 100% 0%, color-mix(in srgb, var(--accent) 60%, #fff) 0%, transparent 52%),
    linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, #000) 100%);
  box-shadow: 0 20px 44px -20px color-mix(in srgb, var(--accent) 75%, transparent); }
.ticket > * { min-width: 0; }
.ticket__main { padding: 18px 18px 16px; display: grid; gap: 12px; }
.ticket__eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono, monospace); letter-spacing: .14em;
  text-transform: uppercase; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket__title { font: 800 21px/1.15 var(--font); letter-spacing: -0.03em; max-width: 18ch; }
.ticket__row { display: flex; align-items: center; gap: 14px; }
.ticket__qr { flex: none; width: 112px; height: 112px; padding: 8px; border-radius: 16px; background: #fff; color: #0a0a0b;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.ticket__qr svg { width: 100%; height: 100%; display: block; }
.ticket__stats { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ticket__stats div { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 14px;
  background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .16); }
.ticket__stats b { font: 800 24px/1 var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ticket__stats span { font-size: 13px; opacity: .85; }
/* Отрывная часть: пунктир и две выемки по краям, как у настоящего билета */
.ticket__stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 14px 18px; border: 0; border-top: 1.5px dashed rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .16);
  color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--s-4, var(--bg)); }
.ticket__stub::before { left: -9px; }
.ticket__stub::after { right: -9px; }
.ticket__stub .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; opacity: .95; }
.ticket__stub svg { flex: none; opacity: .9; }
.ticket__stub:active { background: rgba(0, 0, 0, .26); }
.ticket-actions { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.ticket-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-3); text-align: center; }

/* ─── профиль ─── */
.shop-me { display: flex; align-items: center; gap: 14px; padding: 16px; }
.shop-me__name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.shop-me__id { font-size: 12px; margin-top: 2px; }
/* id в профиле копируется нажатием — его называют поддержке */
.shop-me__copy { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-family: var(--mono, inherit);
  cursor: pointer; text-align: left; }
.shop-me__copy svg { opacity: .6; }
.shop-steps p { margin: 0 0 8px; color: var(--fg-2); }
.shop-doc { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.shop-video { padding: 8px; }
.shop-video video { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; display: block; }

/* ─── вход: как у страницы входа в панель, только для покупателя ─── */
.shop-login {
  position: relative; z-index: 1; width: 100%; max-width: 440px; min-height: 100dvh; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.shop-login__word {
  font-weight: 900; font-size: clamp(64px, 22vw, 104px); line-height: 0.82; letter-spacing: -0.07em;
  background: linear-gradient(180deg, var(--fg) 35%, color-mix(in srgb, var(--fg) 45%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-login__word sup { font-size: 0.22em; letter-spacing: 0; vertical-align: top; position: relative; top: 0.45em; -webkit-text-fill-color: var(--fg-2); }
.shop-login__cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.shop-login__cap i { flex: 1; height: 1px; background: var(--line); }
.shop-login__card { padding: 20px 18px 18px; display: grid; gap: 14px; }
.shop-login__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.035em; }
.shop-login__forgot { display: flex; justify-content: flex-end; margin-top: -4px; }
/* «Вход | Регистрация» — две половины поровну */
.shop-login__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(var(--glass-rgb), 0.06); border: 1px solid var(--line); }
.shop-login__tabs button { min-height: 42px; border: 0; border-radius: 12px; background: none; color: var(--fg-3); font: 700 14.5px/1 var(--font, inherit); cursor: pointer; transition: background 0.2s, color 0.2s; }
.shop-login__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -14px var(--accent); }
.shop-login__hint { margin: 0; text-align: center; }
.shop-login__foot { text-align: center; font-size: 12.5px; margin: 0; }
.shop-or { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.shop-or i { flex: 1; height: 1px; background: var(--line); }
.shop-tg { background: linear-gradient(180deg, #45b8f0, #2aabee) !important; color: #fff !important; border: 0 !important; box-shadow: 0 14px 34px -16px #2aabee; gap: 8px; }
.shop-code { font-size: 56px; font-weight: 800; letter-spacing: 0.12em; text-align: center; padding: 14px 0; border-radius: 18px; border: 1px dashed var(--line); background: var(--sunken, rgba(0, 0, 0, 0.2)); }
.shop-wait { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: 13.5px; }
.shop-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: shop-pulse 1.6s infinite; }
@keyframes shop-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (min-width: 900px) {
  .shop-login { max-width: 1040px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; column-gap: 64px; }
  .shop-login__word { font-size: 160px; }
  .shop-login__foot { grid-column: 1 / -1; }
}

/* ─── страница оплаты ─── */
.pay-hero .money-hero__label span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-lines { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 13.5px; }
.pay-lines div { display: flex; justify-content: space-between; gap: 12px; opacity: 0.92; }
.pay-lines b { font-variant-numeric: tabular-nums; }
.pay-grid { display: grid; gap: 10px; }
@media (min-width: 700px) { .pay-grid { grid-template-columns: 1fr 1fr; } }
.pay-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 14px 14px 12px; text-align: left;
  border-radius: 20px; border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.05); color: var(--fg); cursor: pointer;
  font: inherit; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.pay-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-card:active { transform: scale(0.985); }
.pay-card:disabled { opacity: 0.85; }
/* Пока выставляется счёт: крутилка — на месте стрелки справа, ровно по центру своего квадрата. Раньше общая
   крутилка кнопок вставала поверх эмодзи и вращалась со смещением (владелец): у карточки нет центровки, как у кнопки. */
.pay-card.btn--loading { color: var(--fg) !important; }
.pay-card.btn--loading .pay-card__chev { visibility: hidden; }
.pay-card.btn--loading::after {
  top: 50%; right: 16px; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box;
  border-width: 2px; transform-origin: 50% 50%;
}
.pay-card__body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.pay-card__body b { font-size: 16px; letter-spacing: -0.01em; }
.pay-card__body small { color: var(--fg-3); font-size: 12.5px; }
.pay-card__chev { color: var(--fg-3); }
.pay-emoji { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(var(--glass-rgb), 0.06); overflow: hidden; }
.pay-emoji img, .pay-emoji video, .pay-emoji svg { width: 36px !important; height: 36px !important; object-fit: contain; }
.pay-emoji--icon { color: var(--accent); background: var(--accent-soft); }
.pay-promo { padding: 0; }
.pay-promo summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; color: var(--fg-2); font-weight: 600; }
.pay-promo summary::-webkit-details-marker { display: none; }
.pay-promo summary span { flex: 1; }
.pay-promo[open] .pay-promo__chev { transform: rotate(180deg); }
.pay-promo__form { padding: 0 14px 14px; }
.pay-promo--on { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pay-promo--on .grow { display: grid; gap: 2px; }
.pay-promo--on small { color: var(--fg-3); font-size: 12.5px; }
.pay-invoice { display: grid; gap: 10px; padding: 14px; }
.pay-invoice .field__hint { margin: 0; text-align: center; }
.pay-wait { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-2); }
.money-hero .pay-wait { margin-top: 14px; color: inherit; opacity: 0.9; }
.pay-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: shop-pulse 1.6s infinite; }
.money-hero .pay-wait i { background: #fff; }
.pay-cancel { text-align: center; }
.pay-cancel .link-btn { color: var(--fg-3); font-weight: 500; font-size: 13.5px; }
.shop-check--hint { color: var(--warn, #f5b301); animation: shop-shake 0.4s; }
@keyframes shop-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pay-emoji--tint i { width: 32px; height: 32px; background: var(--fg); -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.pay-hero__no { opacity: 0.75; font-size: 11.5px; letter-spacing: 0.04em; }

/* ─── окна кабинета: заголовок крупнее, поля шире — читаются как отдельный экран, а не всплывашка ─── */
.sheet__head { padding: 8px 20px 14px; }
.sheet__title { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.sheet__body { padding: 0 20px 22px; }
.sheet .field__hint { line-height: 1.5; }

/* ─── каталог покупки: напоминание о живой подписке ─── */
.shop-owned { display: grid; gap: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }

/* ─── раздел «Подписка»: карточки подписок ─── */
.shop-subcard {
  position: relative; display: grid; gap: 4px; width: 100%; padding: 16px 44px 16px 18px; text-align: left;
  color: var(--fg); font: inherit; cursor: pointer; border: 0;
}
.shop-subcard + .shop-subcard { margin-top: 8px; }
.shop-subcard__title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.shop-subcard__sub { color: var(--fg-3); font-size: 13px; }
.shop-subcard__go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }
/* значок товара слева — как у строк списков (optionList): круглая плитка в цвет смысла (владелец: «добавь иконку») */
.shop-subcard--ico { padding-left: 68px; }
.shop-subcard__ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.shop-subcard__ico--ok { background: var(--ok-soft, color-mix(in srgb, var(--ok) 16%, transparent)); color: var(--ok); }
.shop-subcard__ico--tg { background: color-mix(in srgb, #2aabee 18%, transparent); color: #2aabee; }

/* ─── ссылка подписки под QR: на всю ширину и по центру, а не маленькой плашкой в углу ─── */
.shop-pad > .secret { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; margin-top: 12px;
  min-height: 46px; padding: 10px 14px; text-align: center; overflow-wrap: anywhere; word-break: break-all; }
.shop-pad > .secret span { flex: 0 1 auto; font-size: 13px; line-height: 1.35; }
.shop-pad .btn-row { margin-bottom: 4px; }

/* запасной вход через нашего бота — мелкой строкой под главной кнопкой «Войти через Telegram» */
.shop-login__alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: -2px;
  color: var(--fg-3); font-size: 13px; text-align: center; }
.shop-login__alt[hidden] { display: none; }
.shop-login__alt .link-btn { font-size: 13px; }

/* ─── тапалка (#/tap) ─── */
.tap-hero { padding: 22px 16px 18px; text-align: center; overflow: hidden; }
.tap-hero__label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tap-hero__value { margin-top: 6px; font-size: clamp(28px, 8vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.tap-hero__sub { margin-top: 4px; font-size: 14px; color: var(--muted); min-height: 1.3em; }
.tap-hero__hint { margin-top: 18px; font-size: 13px; }
.tap-btn {
  position: relative; display: grid; place-items: center; width: min(62vw, 220px); aspect-ratio: 1; margin: 22px auto 0;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer; color: #fff; user-select: none;
  /* none, а не manipulation: иначе браузер ждёт, не жест ли это, и часть быстрых касаний пропадает */
  touch-action: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.08s, filter 0.2s;
}
.tap-btn:active { transform: scale(0.95); }
.tap-btn:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.tap-btn__ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); pointer-events: none; }
.tap-btn--hit .tap-btn__ring { animation: tap-ring 0.5s ease-out; }
.tap-btn__core { display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.tap-btn__core b { font-size: 18px; letter-spacing: -0.01em; }
@keyframes tap-ring { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.tap-float {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; font: 800 20px/1 var(--mono, monospace);
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); animation: tap-float 0.9s ease-out forwards;
}
@keyframes tap-float { to { transform: translate(-50%, -150%); opacity: 0; } }
.tap-bar { display: block; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.tap-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 0.3s; }
.tap-note { margin: 10px 4px 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tap-btn--hit .tap-btn__ring, .tap-float { animation: none; opacity: 0; } }

/* ─── бонус дня на главной ─── */
.shop-bonus { display: flex; align-items: center; gap: 12px; padding: 14px; }
.shop-bonus__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.shop-bonus b { display: block; font-size: 15px; }
.shop-bonus small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* ─── темы для Happ (#/themes): превью-телефон рисуется цветами темы ─── */
.shop-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chip { flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.05);
  color: var(--fg); font: 600 13.5px/1 inherit; cursor: pointer; }
.shop-chip span { color: var(--muted); margin-left: 3px; }
.shop-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-chip[aria-selected="true"] span { color: rgba(255, 255, 255, 0.75); }

/* ─── тапалка: проверка «не автокликер» — мишень в одной из 9 клеток поверх кнопки ─── */
.tap-pad { position: relative; width: min(62vw, 220px); margin: 22px auto 0; }
.tap-pad .tap-btn { margin: 0 auto; }
.tap-check { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  border-radius: 50%; overflow: hidden; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); z-index: 2; }
.tap-check[hidden] { display: none; }
.tap-check button { border: 0; background: transparent; cursor: pointer; padding: 0; }
.tap-check button.is-target { margin: 18%; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 22px var(--accent); animation: tap-target 1s ease-in-out infinite; }
@keyframes tap-target { 50% { transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .tap-check button.is-target { animation: none; } }

/* ─── «Почта и пароль»: состояние, вкладки, шаги по одному ─── */
.acc-state { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.05); }
.acc-state__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.acc-state b { display: block; font-size: 15px; word-break: break-all; }
.acc-state small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.acc-tabs { margin: 14px 0 12px; }
.acc-tabs .seg { width: 100%; }
.acc-tabs .seg__opt { flex: 1; justify-content: center; }
.acc-sent { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--accent-soft); color: var(--fg); font-size: 14px; line-height: 1.45; }
.acc-sent svg { flex: none; color: var(--accent); margin-top: 2px; }
.acc-code { text-align: center; font-size: 22px; letter-spacing: 0.4em; }
.acc-pass { position: relative; display: block; }
.acc-pass .input { padding-right: 46px; }
.acc-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.acc-eye:hover { color: var(--fg); }
.acc-meter { height: 4px; margin-top: -4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.acc-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bad, #ff5c6c); transition: width 0.25s, background 0.25s; }
.acc-meter i[data-level="2"] { background: var(--warn, #f5c451); }
.acc-meter i[data-level="3"], .acc-meter i[data-level="4"] { background: var(--ok, #3ddc97); }
.acc-hint { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.acc-hint--foot { margin-top: 14px; }

/* ─── «глазок» в полях пароля ─── */
.pass-wrap { position: relative; display: block; }
.pass-wrap .input { padding-right: 46px; width: 100%; }
.pass-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pass-eye:hover, .pass-eye.is-on { color: var(--accent); }

/* ─── привязка Telegram ─── */
.tg-link { display: flex; gap: 16px; align-items: center; }
.tg-link__qr { flex: none; width: 132px; height: 132px; padding: 8px; border-radius: 14px; background: #fff; }
.tg-link__qr svg { display: block; width: 100%; height: 100%; }
.tg-link__code span { display: block; color: var(--muted); font-size: 13px; }
.tg-link__code b { display: block; margin: 4px 0; font-size: 32px; letter-spacing: 0.12em; }
.tg-link__code small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 420px) { .tg-link__qr { width: 110px; height: 110px; } }

.shop-tg-hint { margin: 8px 2px 0; text-align: center; font-size: 12.5px; line-height: 1.45; }

/* ─── «Что идёт мимо VPN»: режимы, списки сайтов чипами ─── */
.route-lead { margin: 0 2px 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.route-modes { display: grid; gap: 8px; margin-bottom: 14px; }
.route-mode { display: flex; gap: 11px; align-items: flex-start; width: 100%; padding: 12px 13px; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(var(--glass-rgb), 0.05); color: inherit; cursor: pointer; }
.route-mode.is-on { border-color: var(--accent); background: var(--accent-soft); }
.route-mode__mark { display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.route-dot { display: block; width: 13px; height: 13px; border: 1.6px solid var(--line); border-radius: 50%; }
.route-mode.is-on .route-mode__mark { color: var(--accent); }
.route-mode__body b { display: block; font-size: 14.5px; }
.route-mode__body small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.route-box { padding: 13px; margin-bottom: 10px; }
.route-box__head { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.route-box__head b { display: block; color: var(--ink); font-size: 14.5px; }
.route-box__head small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; }
.route-empty { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.route-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.route-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(var(--glass-rgb), 0.08); color: var(--ink); font-size: 12.5px; }
.route-chip svg { color: var(--muted); }
.route-chip:hover svg { color: var(--danger, #ff6b6b); }
.route-add { display: flex; gap: 8px; margin-top: 10px; }
.route-add .input { flex: 1; min-width: 0; }
.route-add .btn { flex: none; padding: 0 14px; }

/* «сайт → выбранный сервер»: к чипу добавляется, куда он ведёт */
.route-chip__to { color: var(--accent); font-size: 12px; }
.route-chip__to::before { content: "→"; margin: 0 5px 0 2px; color: var(--muted); }
.route-add--pin { flex-wrap: wrap; }
.route-add--pin .input[name="domain"] { flex: 1 1 100%; }
.route-add--pin select { flex: 1; min-width: 0; }

/* «Что нового» (views.js, VIEWS.updates): карточка на обновление — дата, название, пара фраз и «что сделано» галочками */
.upd-list { display: flex; flex-direction: column; gap: 12px; }
.upd { padding: 16px; }
.upd__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upd__date { font-family: var(--mono); font-size: 12px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
.upd__title { margin: 8px 0 4px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.upd__body { margin: 0 0 10px; color: var(--fg-2); font-size: 14.5px; line-height: 1.5; }
.upd__done { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.upd__done li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.upd__done li svg { flex: none; margin-top: 2px; color: var(--ok); }

/* Номера разделов «01 / …, 02 / …» (raion.css): счётчик сбрасывается у .view, а экраны кабинета рисуются прямо
   в [data-screen] — без общего предка каждый раздел начинал свой счётчик, и все были «01». */
[data-screen] { counter-reset: rx-sec; }

/* Карточки подписки, DNS и прокси — одной высоты (владелец: «размеры примерно одинаковые»): заголовок и подпись
   в одну строку, длинное — с многоточием */
.shop-subcard { min-height: 74px; align-content: center; }
.shop-subcard__title, .shop-subcard__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.shop-subcard .spread { min-width: 0; gap: 8px; }
.shop-subcard .badge { flex: none; }

/* Страница DNS: шаги для iPhone и Android отдельными карточками */
.shop-addon-step { display: grid; gap: 10px; }
.shop-addon-step + .shop-addon-step { margin-top: 10px; }
.shop-addon-step__head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.shop-addon-step .field__hint { margin: 0; line-height: 1.5; }

/* Темы для Happ: редактор сайта (site/css/themes.css) внутри мини-приложения — его слова-цвета берём из своих */
.shop-tp {
  --card: rgba(var(--glass-rgb), 0.05); --card-2: rgba(var(--glass-rgb), 0.07); --line-2: var(--line-strong, var(--line));
  --brand: var(--accent); --brand-2: var(--accent); --grid: transparent; --top-h: 0px; --radius: 22px;
  --acc: var(--accent); --acc-soft: var(--accent-soft);
}
.shop-tp .tp { padding: 0 0 28px; max-width: none; }
.shop-tp .tp-head { display: none; }  /* заголовок — в шапке мини-приложения */
.shop-tp .tp-dock, .shop-tp .tp-toast { display: none; }  /* своя всплывашка; закреплённую кнопку прятала бы нижняя панель */
.shop-tp .tp-side { margin-top: 28px; }
.shop-tp .tp-gallery { padding: 18px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.shop-tp .tp-filters { margin: 14px 0 16px; padding: 0; flex-wrap: wrap; }
.shop-tp .tp-filters button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.shop-tp .tp-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.shop-tp .tp-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
@media (min-width: 980px) {
  .shop-tp .tp { grid-template-columns: 330px minmax(0, 1fr); gap: 32px; }
  .shop-tp .tp-stage { position: sticky; top: 12px; }
  .shop-tp .tp-side { margin-top: 0; }
}

/* Готовые наборы приложений (services/routing.py, APPS): плитка цвета приложения, логотип белым — как значок на
   телефоне, по нему приложение узнают быстрее, чем по названию */
.app-tile { display: inline-grid; place-items: center; flex: none; border-radius: 28%; background: var(--app);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 12px -6px var(--app); color: #fff; }
.app-tile svg { display: block; color: #fff; }
.route-chip .app-tile { border-radius: 6px; box-shadow: none; }
.route-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 12px; }
.route-app { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 12px 6px 10px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--s-2, rgba(255,255,255,.03)); color: var(--ink);
  cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.route-app:active { transform: scale(.97); }
.route-app b { max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.route-app small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.route-app.is-on { border-color: var(--accent); background: var(--accent-soft); }
.route-app.is-on small { color: var(--accent); font-weight: 600; }
.route-app-head { display: flex; gap: 12px; align-items: center; margin: 0 2px 12px; color: var(--muted); font-size: 13.5px; }
.route-app-head b { color: var(--ink); }

/* «Авто» — свои серверы: галочки списком в две колонки на широком экране */
.route-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; margin-top: 12px; }
.route-auto__row { display: flex; gap: 9px; align-items: center; min-width: 0; padding: 9px 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--ink); cursor: pointer; }
.route-auto__row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.route-auto__box { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.6px solid var(--line);
  border-radius: 5px; color: #fff; }
.route-auto__row.is-on .route-auto__box { border-color: var(--accent); background: var(--accent); }
.route-auto__name { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.app-tile--img { display: block; object-fit: cover; background: none; }

/* «Проверка» (views.js, VIEWS.check): состояние VPN — цветом, скорость — тремя крупными цифрами */
.net-card { padding: 14px; }
.net-card__head { display: flex; gap: 12px; align-items: center; }
.net-card__head b { display: block; font-size: 17px; }
.net-card__head small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.net-card__dot { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: var(--muted); }
.net-card--ok .net-card__dot { background: var(--ok, #2fb67c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok, #2fb67c) 18%, transparent); }
.net-card--warn .net-card__dot { background: var(--warn, #e0a23a); box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn, #e0a23a) 18%, transparent); }
.net-card--bad .net-card__dot { background: var(--bad, #e5534b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad, #e5534b) 18%, transparent); }
.net-card__ip { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.net-card__ip .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.speed-card { padding: 14px; }
.speed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.speed-grid span { display: block; color: var(--muted); font-size: 12px; }
.speed-grid b { display: block; margin: 4px 0 1px; font-family: var(--mono, monospace); font-size: 26px; font-variant-numeric: tabular-nums; }
.speed-grid small { color: var(--muted); font-size: 11px; }
.speed-bar { height: 4px; margin: 14px 0 8px; overflow: hidden; border-radius: 4px; background: var(--line); }
.speed-bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s; }
.speed-card .btn { margin-top: 10px; }
.site-card { padding: 14px; }
.site-res { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.site-res b { display: block; font-size: 14.5px; }
.site-res p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.site-res .btn { margin-top: 10px; }
.site-res--ok { border-color: color-mix(in srgb, var(--ok, #2fb67c) 55%, transparent); }
.site-res--warn { border-color: color-mix(in srgb, var(--warn, #e0a23a) 55%, transparent); }
.site-res--bad { border-color: color-mix(in srgb, var(--bad, #e5534b) 55%, transparent); }

/* Уведомления (notifySheet) */
.notify-quiet { margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; }
.notify-quiet b { display: block; font-size: 14.5px; }
.notify-quiet small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.notify-quiet__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.notify-chip { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.notify-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* «Мой год с нами» (VIEWS.wrapped) */
.wr-hero { position: relative; margin-bottom: 12px; padding: 22px 18px; overflow: hidden; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, var(--brand-2, #6fb3f5) 0%, transparent 55%),
              linear-gradient(150deg, var(--brand, #3390ec), var(--brand-3, #2a5bd7)); }
.wr-hero__year { display: block; font-family: var(--mono, monospace); font-size: 54px; font-weight: 800; line-height: 1; opacity: .9; letter-spacing: -.02em; }
.wr-hero b { display: block; margin-top: 8px; font-size: 21px; }
.wr-hero small { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; opacity: .9; }
.wr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin-bottom: 12px; }
.wr-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--s-1, rgba(255,255,255,.04)); }
.wr-tile b { font-family: var(--mono, monospace); font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wr-tile > span:last-child { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.wr-tile__icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 10px; color: #fff; background: var(--accent); }
.wr-tile--violet .wr-tile__icon { background: #8b5cf6; }
.wr-tile--green .wr-tile__icon { background: #22a06b; }
.wr-tile--amber .wr-tile__icon { background: #e0a23a; }
.wr-tile--pink .wr-tile__icon { background: #e4407a; }
.wr-countries { padding: 14px; }
.wr-bar { position: relative; display: flex; align-items: center; height: 30px; margin-top: 6px; padding: 0 10px; overflow: hidden; border-radius: 9px; background: var(--line); font-size: 13px; }
.wr-bar span { position: relative; z-index: 1; }
.wr-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.wr-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* нечётная последняя — во всю ширину, без дыры */
.notify-topics .switch + .switch { border-top: 1px solid var(--line); }