/* Кабинет клиента 2Dogs Connect, стиль «Цветные главы».
   Шрифты Onest и Unbounded (SIL OFL 1.1, лицензии в static/fonts), иконки Tabler (MIT). */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/onest-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/onest-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/static/fonts/onest-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/static/fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/static/fonts/unbounded-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/static/fonts/unbounded-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f4efe6;
  --paper: #fffdf9;
  --sky: #9cc8ff;
  --sand: #ebc48f;
  --navy: #14213d;
  --coral: #ff6a3d;
  --coral-ink: #2a0d02;
  --sky-ink: #0b2447;
  --yellow: #ffd23f;
  --yellow-ink: #3b2a00;
  --muted: #4f5a70;
  --danger: #b3261e;
  --radius: 26px;
  --display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 64px;
  --nav-gap: 10px; /* отступ плавающего меню от краёв */
  /* Кривые движения: выход и появление, перемещение по экрану, шторка */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--navy); }
body {
  font: 16px/1.45 var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
a { color: inherit; }
main { max-width: 520px; margin: 0 auto; padding: 0 10px calc(var(--nav-h) + var(--nav-gap) * 2 + 24px + env(safe-area-inset-bottom)); }
body:has(#screen-login:not([hidden])) main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ic { width: 22px; height: 22px; flex: none; }

/* Шапка */
.top { display: flex; align-items: center; justify-content: space-between; max-width: 520px; margin: 0 auto; padding: 14px 16px 10px; }
.brand { font: 700 16px/1 var(--display); text-decoration: none; letter-spacing: -0.01em; }
.brand span { font-weight: 500; font-size: 11px; }
.top-btn { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: -8px; border-radius: 50%; }
.top-btn .ic { width: 26px; height: 26px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-support { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--coral); color: var(--coral-ink); font-weight: 800; font-size: 14px; text-decoration: none; }
.top-support .ic { width: 20px; height: 20px; }
.top-support .nav-dot { top: -2px; left: auto; right: -2px; background: var(--navy); box-shadow: 0 0 0 2px var(--bg); }
.top-support { box-shadow: 0 3px 0 #c94a22; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.top-support:active { transform: translateY(2px); box-shadow: 0 1px 0 #c94a22; }
.top-support:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Главы */
.ch { display: block; border-radius: var(--radius); padding: 16px; margin-bottom: 8px; text-decoration: none; }
.ch-white { background: var(--paper); }
.ch-sky { background: var(--sky); color: var(--sky-ink); }
.ch-sand { background: var(--sand); }
.ch-navy { background: var(--navy); color: #fff; }
.ch-coral { background: var(--coral); color: var(--coral-ink); }
.ch-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Нажатие: кнопки сжимаются до 0.96, большие карточки до 0.98 */
.ch-link, .ch-block, .btn, .nav a, .back, .send { transition: transform .15s var(--ease-out); }
.ch-link:active, .ch-block:active { transform: scale(.98); }
.btn:not(:disabled):active, .back:active, .send:not(:disabled):active, .nav a:active { transform: scale(.96); }
.h-page { font: 700 24px/1.1 var(--display); margin: 4px 6px 14px; letter-spacing: -0.01em; }
.h-display { font: 900 24px/1.1 var(--display); margin: 10px 0 0; letter-spacing: -0.01em; }
.h-chapter { font: 700 16px/1.25 var(--display); margin: 0; }
.big { font: 900 40px/1 var(--display); margin-top: 10px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big-sm { font: 900 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.small { font-size: 14px; margin: 4px 0 0; }
.strong { font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }
.error { color: var(--danger); font-size: 14px; margin: 0 0 12px; }
.chip { display: inline-block; background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; }
.chip-light { background: #e9e2d4; color: var(--navy); }
.chip-warn { background: var(--coral); color: var(--coral-ink); }

/* Экран входа: короткий рассказ о сервисе, вход и регистрация, документы */
.promo-hero { text-align: center; padding: 22px 18px; }
.promo-hero .h-display { margin-top: 14px; font-size: 22px; }
.promo-hero .small { margin-top: 8px; opacity: .85; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.hero-actions .btn { min-height: 54px; padding: 0 12px; font-size: 16px; }
#login-form button[type=submit], #signup-form button[type=submit] { margin-top: 18px; }
.login-docs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 18px 6px 8px; font-size: 13px; }
.login-docs a { color: var(--muted); }
.login-docs a[aria-current="page"] { color: var(--navy); font-weight: 700; text-decoration: none; }

/* Открытые страницы документов и поддержки: оформление кабинета без нижнего меню */
.page-doc main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.page-doc .top .btn-sm { margin-right: -4px; }
.doc-form { margin: 8px 0 16px; }
.doc-form select, .doc-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 16px/1.4 var(--text);
  color: var(--navy); background: #fff; border: 2px solid #e2d9c8; border-radius: 14px;
}
.doc-form textarea { resize: vertical; }
.doc-form select:focus, .doc-form textarea:focus { outline: none; border-color: var(--navy); }
.doc-form .error, .doc-form .ok { margin: 12px 0 0; }
.ok { color: #1d6b3a; font-size: 14px; font-weight: 600; }

/* Вход из браузера: плашка зовёт в Telegram */
.tg-plaque { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--sky); color: var(--sky-ink); text-decoration: none; transition: transform .15s var(--ease-out); }
.tg-plaque:active { transform: scale(.98); }
.tg-plaque > span:nth-child(2) { flex: 1; min-width: 0; }
.tg-plaque b { display: block; font-size: 15px; }
.tg-plaque .small { display: block; margin: 0; }
.tg-plaque-ic { display: flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--sky-ink); color: #fff; }
.tg-plaque-ic .ic { width: 22px; height: 22px; }
.tg-plaque:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Приветствие */
.hello { font: 900 26px/1.15 var(--display); margin: 2px 6px 14px; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* Преимущества */
.perks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; }
.perks li .ic { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 12px; background: var(--bg); }
.perks b { display: block; font-size: 14px; line-height: 1.25; }
.perks span { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.perks-mark { margin: 14px 0 0; font-size: 14px; }

/* Статус */
#home-status { background: var(--paper); transition: background-color .3s ease, color .3s ease; }
#home-status.is-doberman { background: var(--sky); color: var(--sky-ink); }
#home-status.is-husky { background: var(--sand); }
.status-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
/* Собака справа в карточке тарифа по эскизу: стоит на нижнем крае, уши выходят за верхний.
   Справа и снизу обрезается по скруглению карточки. Текст не заходит под собаку */
#home-status { position: relative; }
#home-status.has-dog { min-height: 188px; }
#home-status.has-dog .status-row > div:first-child, #home-status.has-dog #status-devices { max-width: calc(100% - 140px); }
#home-status.has-dog .big { font-size: clamp(30px, calc(17vw - 33px), 40px); }
.status-dog { position: absolute; right: 0; bottom: 0; width: auto; height: 206px; clip-path: inset(-20% 0 0 0 round 0 0 var(--radius) 0); pointer-events: none; }
.dots { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; }
.dots span.on { background: currentColor; }
#status-devices { margin-top: 14px; }
#status-word { margin-left: .22em; }

/* Выбор собаки */
/* Выбор собаки, карточки по эскизу владельца: собака во всю верхнюю часть, уши выходят за край.
   У выбранной карточки фон цвета породы, тёмно-синяя рамка и тёмно-синяя полоса с названием */
.breed-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.breed-card { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; border: 3px solid transparent; border-radius: 22px; background: var(--paper); color: var(--navy); text-align: center; text-decoration: none; transition: transform .15s var(--ease-out), border-color .3s ease; }
.breed-card:active { transform: scale(.98); }
.breed-card:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* Фото обрезается только снизу, по полосе с названием; вверх собака выходит свободно */
.bc-photo { position: relative; display: block; aspect-ratio: 618 / 415; border-radius: 19px 19px 0 0; clip-path: inset(-80% -10% 0 -10%); transition: background-color .3s ease; }
.bc-photo img { position: absolute; height: auto; }
.bc-husky .bc-photo img { width: 84%; left: 7.3%; top: -19%; }
.bc-doberman .bc-photo img { width: 81.6%; left: 1.5%; top: -32.8%; }
.bc-label { display: flex; flex-direction: column; gap: 2px; padding: 9px 8px 11px; border-radius: 0 0 19px 19px; transition: background-color .3s ease, color .3s ease; }
.bc-label b { font-weight: 900; font-size: 18px; line-height: 1.2; }
.bc-label span { font-size: 14px; }
.breed-card[aria-checked="true"] { border-color: var(--navy); }
.breed-card[aria-checked="true"] .bc-label, .breed-cards-home .bc-label { background: var(--navy); color: #fff; }
.bc-husky[aria-checked="true"] .bc-photo, .breed-cards-home .bc-husky .bc-photo { background: var(--sand); }
.bc-doberman[aria-checked="true"] .bc-photo, .breed-cards-home .bc-doberman .bc-photo { background: var(--sky); }
/* На главной без тарифа обе карточки цветные, над ними место для ушей */
.breed-cards-home { margin: 44px 0 0; }
.breed-cards-home .breed-card { border-color: var(--navy); }

/* Тарифы: три плитки срока в ряд, крупно число месяцев */
.plans { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.plan { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 14px 4px 12px; border-radius: 20px; background: var(--paper); text-align: center; transition: transform .15s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.plan:active { transform: scale(.96); }
/* Рамка выбора одна на весь ряд и переезжает к выбранному сроку. Без скрипта рамку рисует сам тариф */
.plan[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--navy); }
.plans.has-ring .plan[aria-checked="true"] { box-shadow: none; }
.plan-ring { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; border-radius: 20px; box-shadow: inset 0 0 0 3px var(--navy); pointer-events: none; transition: left .38s var(--ease-out), width .38s var(--ease-out), top .38s var(--ease-out), height .38s var(--ease-out); }
.plan-ring.no-anim { transition: none; }
.plan-num { font: 900 30px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-unit { font-size: 12px; font-weight: 700; margin-top: 3px; }
.plan-price { display: flex; flex-direction: column; align-items: center; margin-top: 10px; font-weight: 900; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-price s { font-size: 12px; font-weight: 700; opacity: .55; text-decoration-thickness: 2px; line-height: 1.1; }
.plan-per { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
/* Годовой тариф: у Добермана голубая плитка и бежевая метка, у Хаски наоборот. Выбор, как у всех, тёмно-синей рамкой */
.plan-best-doberman { background: var(--sky); color: var(--sky-ink); }
.plan-best-husky { background: var(--sand); color: var(--navy); }
.plan-best .plan-per { color: inherit; opacity: .75; }
.badge { position: absolute; z-index: 2; top: -10px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; box-shadow: 0 0 0 3px var(--bg); }
.plan-best-doberman .badge { background: var(--sand); color: var(--navy); }
.plan-best-husky .badge { background: var(--sky); color: var(--sky-ink); }
.plan-who { margin: 10px 6px 0; }
.plan-who b { font-weight: 900; }
.plan-change { margin: 10px 0 0; }
.row-icon { display: flex; align-items: center; gap: 8px; }
/* Промокод: ссылка и форма одной высоты, поэтому при раскрытии ничего не сдвигается */
.promo { margin-top: 12px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
.promo .link { display: inline-flex; align-self: center; align-items: center; gap: 6px; margin: 0; min-height: 44px; font-weight: 700; }
.promo .link .ic { width: 20px; height: 20px; }
.promo-ok { color: #1f7a3a; font-weight: 700; margin: 8px 6px 0; }


/* Окно промокода: купон с перфорацией и вырезами по краям */
.promo-dialog { background: var(--paper); }
.ticket { position: relative; border-radius: 24px; background: var(--sand); color: var(--navy); overflow: hidden;
  -webkit-mask: radial-gradient(circle 13px at 0 var(--cut), transparent 12px, #000 13px) left / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% var(--cut), transparent 12px, #000 13px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 var(--cut), transparent 12px, #000 13px) left / 51% 100% no-repeat,
        radial-gradient(circle 13px at 100% var(--cut), transparent 12px, #000 13px) right / 51% 100% no-repeat;
  --cut: 112px; }
.ticket-head { height: var(--cut); padding: 16px 20px 0; text-align: center; border-bottom: 2px dashed rgba(20, 33, 61, .3); }
.ticket-head .h-chapter { font-size: 18px; }
.ticket-head .small { margin: 2px 0 0; }
.ticket-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: var(--coral); color: var(--coral-ink); margin-bottom: 4px; }
.ticket-ic .ic { width: 22px; height: 22px; }
.ticket-stub { padding: 18px 20px 20px; }
.ticket-stub input[type=text] { margin: 0; height: 60px; padding: 0 16px; border: 2px dashed var(--navy); border-radius: 16px; background: var(--paper); text-align: center; text-transform: uppercase; letter-spacing: .14em; font: 900 22px var(--display); }
.ticket-stub input[type=text]::placeholder { color: #c9bda8; letter-spacing: .3em; }
.ticket-stub input[type=text]:focus { border-style: solid; }
.ticket-stub .btn { margin-top: 12px; min-height: 52px; }
#promo-sheet-note { text-align: center; margin: 10px 0 0; }
.promo-dialog > .btn-ghost { margin-top: 10px; }
.pay-zone { margin-top: 14px; }
.btn.btn-pay { margin-top: 0; min-height: 76px; padding: 12px 18px; font-size: 16px; font-weight: 900; line-height: 1.3; box-shadow: 0 5px 0 #c94a22; }
/* Цена всегда второй строкой: длинные названия («Перейти на Супердоберман») не рвутся посередине */
.btn-pay .swap { white-space: pre-line; }
.btn.btn-pay:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #c94a22; }
.pay-zone .plan-change { margin: 10px 0 0; }
.pay-methods { margin-top: 12px; color: var(--muted); }
/* Подпись кнопки и тексты, которые меняются на месте, проявляются заново */
.swap { display: inline-block; }
.pay-methods .ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }

/* Кнопки */
.btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; font-size: 15px; text-align: center; text-decoration: none; }
.btn .ic { width: 20px; height: 20px; }
.btn-wide { display: flex; width: 100%; margin-top: 12px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-sky { background: var(--sky); color: var(--sky-ink); }
.btn-coral { background: var(--coral); color: var(--coral-ink); box-shadow: 0 5px 0 #c94a22; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.btn.btn-coral:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #c94a22; }
.btn-coral:disabled, .btn-coral[aria-disabled="true"] { box-shadow: 0 5px 0 rgba(201, 74, 34, .5); }
.btn-stone { background: #e2d9c8; color: var(--navy); }
.btn-ghost { box-shadow: inset 0 0 0 2px currentColor; }
.btn-outline-light { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.btn-outline-dark { box-shadow: inset 0 0 0 2px var(--navy); color: var(--navy); }
.btn-support { min-height: 56px; font-size: 16px; }
.unread { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--coral); color: var(--coral-ink); font-size: 12px; font-weight: 900; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
/* Копирование: иконка копирования уступает место галочке */
.swap-ic { position: relative; display: inline-grid; width: 20px; height: 20px; flex: none; }
.swap-ic .ic { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .3s cubic-bezier(0.2, 0, 0, 1), scale .3s cubic-bezier(0.2, 0, 0, 1), filter .3s cubic-bezier(0.2, 0, 0, 1); }
.swap-ic .ic + .ic { opacity: 0; scale: .25; filter: blur(4px); }
.is-copied .swap-ic .ic:first-child { opacity: 0; scale: .25; filter: blur(4px); }
.is-copied .swap-ic .ic + .ic { opacity: 1; scale: 1; filter: blur(0); }
.btn:focus-visible, .plan:focus-visible, .ch:focus-visible, .nav a:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.ch-navy .btn:focus-visible { outline-color: #fff; }
.link { all: unset; cursor: pointer; text-decoration: underline; margin-top: 10px; display: inline-block; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Формы */
label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
input[type=email], input[type=password], input[type=text], input[type=tel] {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: 16px var(--text);
  color: var(--navy); background: #fff; border: 2px solid #e2d9c8; border-radius: 14px;
}
input:focus { outline: none; border-color: var(--navy); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--navy); }

/* Подключение */
.connect-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
/* Приложения: стикеры платформ и список для выбранной */
/* Названия приложений простым списком в две колонки, без плашек */
.apps-note .ic { width: 15px; height: 15px; }
.apps-note .ic { vertical-align: -2px; }
.apps-note { margin-top: 14px; }
.qr-dialog { text-align: center; }
.qr-box { display: flex; justify-content: center; margin: 14px auto 12px; padding: 14px; width: max-content; max-width: 100%; box-sizing: border-box; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px #e9e2d4; }
.qr-dialog .qr { width: min(240px, 64vw); margin: 0; border-radius: 0; }
.qr { display: block; width: 240px; max-width: 100%; aspect-ratio: 1; margin: 4px auto 8px; border-radius: 14px; background: #fff; }

/* Друзья */
.duo { display: flex; justify-content: center; align-items: center; margin-top: 16px; }
/* Собака в круге: цветная рамка, белый зазор, заливка. Голова выходит за верх круга:
   маска пропускает круг и всё, что выше его середины */
.dog-badge { --d: 90px; position: relative; display: block; width: var(--d); height: var(--d); flex: none; border-radius: 50%; background: var(--fill); box-shadow: inset 0 0 0 4px var(--ring), inset 0 0 0 8px var(--paper); }
.dog-badge-husky { --ring: var(--sand); --fill: var(--navy); }
.dog-badge-doberman { --ring: var(--sky); --fill: var(--sand); }
.dog-badge-pic { position: absolute; left: 0; right: 0; top: calc(var(--d) * -.15); height: calc(var(--d) * 1.15);
  -webkit-mask: radial-gradient(circle calc(var(--d) / 2 - 8px) at 50% calc(var(--d) * .65), #000 calc(100% - .5px), transparent 100%), linear-gradient(#000, #000) 0 0 / 100% calc(var(--d) * .65) no-repeat;
  mask: radial-gradient(circle calc(var(--d) / 2 - 8px) at 50% calc(var(--d) * .65), #000 calc(100% - .5px), transparent 100%), linear-gradient(#000, #000) 0 0 / 100% calc(var(--d) * .65) no-repeat; }
.dog-badge-pic img { position: absolute; top: calc(var(--d) * .02); width: 97%; height: auto; }
.dog-badge-husky img { left: 11%; }
.dog-badge-doberman img { left: 0; }
.duo-plus { width: 34px; height: 34px; margin: 0 -8px; z-index: 1; border-radius: 50%; background: var(--coral); color: var(--coral-ink); border: 3px solid var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 900; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; }
.stats3 .big-sm { font-size: 20px; white-space: nowrap; }
.progress { height: 10px; border-radius: 999px; background: rgba(11, 36, 71, .18); margin-top: 12px; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--sky-ink); min-width: 10px; transition: width .6s var(--ease-out); }
.level-icon .ic { width: 34px; height: 34px; opacity: .35; }
#ref-level { transition: background-color .3s ease, color .3s ease; }
#ref-level.is-vip { background: var(--coral); color: var(--coral-ink); }
#ref-level.is-vip .progress span { background: var(--coral-ink); }
#ref-level.is-vip .level-icon .ic { opacity: 1; }
/* Бонусы партнёрки: другу ярко, себе спокойно */
.ref-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; text-align: left; }
.ref-perk { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 20px; }
.ref-perk .ic { width: 24px; height: 24px; margin-bottom: 6px; }
.ref-perk b { font: 900 24px/1.05 var(--display); letter-spacing: -0.02em; }
.ref-perk span { font-size: 13px; line-height: 1.3; }
.ref-perk-friend { background: var(--coral); color: var(--coral-ink); }
.ref-perk-you { background: var(--navy); color: #fff; }
.level-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.level-btns .btn { padding: 0 10px; }
.level-btns .btn[hidden] + .btn, .level-btns .btn:only-child { grid-column: 1 / -1; }
#ref-level.is-author { background: var(--navy); color: #fff; }
#ref-level.is-author .level-icon .ic { opacity: 1; color: var(--coral); }
#ref-request-note { margin-top: 10px; }
.payout-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.payout-btns .btn { padding: 0 10px; }
.ref-link { font-weight: 700; font-size: 14px; margin-top: 4px; word-break: break-all; }
/* Кнопки ссылки делят ширину карточки поровну */
.ref-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ref-actions .btn { padding: 0 10px; }

/* Помощь и аккаунт */
.links { list-style: none; margin: 8px 0 0; padding: 0; }
.links a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-weight: 600; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-weight: 700; word-break: break-all; }
.facts + .btn-wide { margin-top: 16px; }
.sub-title { margin: 0; }

/* История операций */
.history { list-style: none; margin: 8px 0 0; padding: 0; }
.history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #efe7da; }
.history li:first-child { border-top: 0; }
.history b { display: block; font-size: 15px; }
.history span { font-size: 13px; color: var(--muted); }
.history .history-sum { font-size: 15px; font-weight: 800; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.history .history-sum.is-in { color: #1f7a3a; }

/* Частые вопросы */
.faq details { border-top: 1px solid #efe7da; }
.faq details:first-of-type { margin-top: 8px; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 700 20px/1 var(--display); color: var(--muted); transition: rotate .2s var(--ease-out); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin: 0 0 12px; font-size: 15px; }
.faq summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 8px; }

/* Нижнее меню: плавающая капсула поверх контента */
.nav {
  position: fixed; z-index: 20;
  left: var(--nav-gap); right: var(--nav-gap); bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  height: var(--nav-h); padding: 6px;
  background: var(--paper); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 33, 61, .18), 0 0 0 1px rgba(20, 33, 61, .05);
  border: 1px solid transparent;
  transition: transform .3s var(--ease-drawer), opacity .3s var(--ease-drawer);
}
.nav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border-radius: 999px; font-size: 10px; letter-spacing: -0.01em; white-space: nowrap; font-weight: 700; color: var(--muted); text-decoration: none; transition: transform .15s var(--ease-out), color .15s ease; }
.nav a .ic { width: 22px; height: 22px; }
.nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.nav .nav-help { color: #c2410c; }
.nav .nav-help[aria-current="page"] { background: var(--coral); color: var(--coral-ink); }
/* Капля: подложка активной вкладки. Передний край уходит к новой вкладке первым, задний догоняет,
   поэтому по дороге она вытягивается и снова собирается. Цвет текста меняется, когда капля подошла */
.nav-blob { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; right: 100%; border-radius: 999px; background: var(--navy); opacity: 0; pointer-events: none;
  transition: left .42s var(--ease-out), right .42s var(--ease-out), background-color .3s ease, opacity .2s ease; }
.nav-blob.is-help { background: var(--coral); }
.nav-blob.is-on { opacity: 1; }
.nav-blob[data-dir="right"] { transition-duration: .5s, .3s, .3s, .2s; transition-delay: .06s, 0s, 0s, 0s; }
.nav-blob[data-dir="left"] { transition-duration: .3s, .5s, .3s, .2s; transition-delay: 0s, .06s, 0s, 0s; }
.nav-blob.no-anim { transition: none; }
.nav.has-blob a[aria-current="page"] { background: transparent; transition-delay: 0s, .12s; }
.nav-dot { position: absolute; top: 6px; left: calc(50% + 7px); width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--paper); }
.nav-help[aria-current="page"] .nav-dot { background: var(--navy); }
/* Пока открыта клавиатура, меню уезжает вниз и не закрывает поле ввода */
body.kb-open .nav { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
body.kb-open .composer { bottom: 8px; }
@media (min-width: 560px) { .nav { left: 50%; right: auto; width: 500px; transform: translateX(-50%); } body.kb-open .nav { transform: translate(-50%, calc(100% + 40px)); } }

/* Подстраницы: чат и документы */
.sub-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.back { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); flex: none; }
.chat { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.agent-ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--paper); }
.msg-in { display: flex; align-items: flex-end; gap: 8px; max-width: 90%; }
.msg-in .bubble { max-width: none; }
.agent-ava-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.bubble time { display: block; font-size: 11px; opacity: .65; margin-top: 4px; }
.bubble-in { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 6px; }
.bubble-out { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.bubble-out time { text-align: right; }
/* Новое сообщение растёт из своего угла */
.bubble-out { transform-origin: bottom right; }
.msg-in { transform-origin: bottom left; }
.composer {
  position: sticky; bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + env(safe-area-inset-bottom));
  display: flex; gap: 8px; align-items: flex-end; padding: 8px; margin-top: 8px;
  background: var(--paper); border-radius: 26px; box-shadow: 0 4px 20px rgba(20, 33, 61, .12);
}
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 11px 12px; border: 0; resize: none; font: 16px/1.35 var(--text); color: var(--navy); background: transparent; }
.composer textarea:focus { outline: none; }
.send { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: #fff; flex: none; }
.send:disabled { opacity: .55; }
.send:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.doc { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.doc h1 { font: 700 20px/1.2 var(--display); margin: 4px 0 6px; }
.doc .public-date { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.doc h2 { font: 700 15px/1.3 var(--display); margin: 20px 0 6px; }
.doc p { margin: 6px 0; }
.doc ul { margin: 6px 0; padding-left: 20px; }
.doc li { margin: 4px 0; }

/* Окна выезжают шторкой снизу и парят над краем экрана, как меню */
dialog { max-width: 460px; width: calc(100% - var(--nav-gap) * 2); max-height: calc(100% - 40px); margin: auto auto calc(var(--nav-gap) + env(safe-area-inset-bottom)); border: 0; border-radius: 32px; background: var(--paper); color: var(--navy); padding: 22px; overscroll-behavior: contain; box-shadow: 0 -10px 40px rgba(20, 33, 61, .2); }
dialog::backdrop { background: rgba(20, 33, 61, .55); transition: opacity .25s ease; }
dialog.is-closing::backdrop { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { dialog[open]::backdrop { animation: fade-in .3s ease-out both; } }
@keyframes fade-in { from { opacity: 0; } }

/* Загрузка: контуры кабинета с мягким переливом */
.skeleton { padding-top: 2px; }
.sk { position: relative; overflow: hidden; background: #ebe3d4; border-radius: var(--radius); margin-bottom: 8px; }
.sk-line { width: 62%; height: 30px; margin: 2px 6px 16px; border-radius: 12px; }
.sk-card { height: 120px; }
.sk-tall { height: 190px; }
.sk-short { height: 84px; }
@media (prefers-reduced-motion: no-preference) {
  .sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 253, 249, .65), transparent); transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite; }
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Лапки после оплаты: слой поверх всего, в том числе поверх окна */
.confetti { position: fixed; z-index: 50; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; }
.paw { position: absolute; left: 0; top: 0; width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
#ref-level.is-vip .btn-coral { background: var(--navy); color: #fff; }
.help-mail { margin-top: 10px; }
.help-mail a { color: inherit; font-weight: 700; }

/* Страница «не найдено» */
.nf-card { text-align: center; padding: 8px 20px 22px; }
.nf-code { font: 900 64px/1 var(--display); margin: 14px 0 6px; letter-spacing: -0.02em; }
.nf-card .small { max-width: 320px; margin: 8px auto 0; }
.nf-card .btn { max-width: 320px; margin: 18px auto 0; }

/* Пробные 3 дня */
.promo-trial { display: inline-block; margin: 12px 0 0; background: var(--sand); color: var(--navy); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 800; }
.trial-card .trial-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.trial-card .dog-badge { --d: 84px; }
.trial-card .dog-badge-husky img { left: 6%; }
.trial-card .h-chapter { margin: 6px 0 4px; }
.trial-card .small { margin: 0; }
.trial-row { width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }

/* Переключатель «Российские сайты напрямую» */
.switch-row { display: flex; align-items: center; gap: 16px; margin: 0; cursor: pointer; }
.switch-row > span:first-child { display: grid; gap: 4px; flex: 1; min-width: 0; }
.switch-title { margin: 0; }
.switch-note { margin: 0; font-weight: 400; }
.switch-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: #d9cfbd; transition: background-color .25s ease; }
.switch-knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(20, 33, 61, .25); transition: transform .3s cubic-bezier(0.2, 0, 0, 1), width .15s ease-out; }
.switch-input:checked + .switch { background: var(--navy); }
.switch-input:checked + .switch .switch-knob { transform: translateX(20px); }
/* Пока палец на тумблере, ручка чуть вытягивается, как на iPhone */
.switch-row:active .switch-knob { width: 28px; }
.switch-row:active .switch-input:checked + .switch .switch-knob { transform: translateX(16px); }
.kbd .switch-input:focus-visible + .switch { outline: 3px solid var(--coral); outline-offset: 2px; }
.switch-input:disabled + .switch { cursor: progress; }
.bill { margin: 12px 0 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px 0; font-size: 15px; }
.bill dt { color: var(--muted); }
.bill dd { margin: 0; padding-left: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.bill .bill-total { color: var(--navy); font-weight: 800; padding-top: 8px; border-top: 2px dashed #ddd2bf; font-size: 17px; }
.pending-pay { margin: 0 0 14px; }
.pending-pay p { margin: 0 0 10px; }
.pending-pay .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pending-pay .row .btn { width: 100%; }
/* Способы оплаты: СБП и карта плитками, криптовалюта капсулой во всю ширину */
.pay-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.pt { all: unset; box-sizing: border-box; position: relative; cursor: pointer; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 112px; padding: 16px 10px; text-align: center; -webkit-tap-highlight-color: transparent; transition: scale .15s ease-out, opacity .15s ease-out; }
.pt:not(:disabled):active { scale: .96; }
#pay-dialog:focus { outline: none; }
#pay-dialog .pt:focus-visible, #pay-dialog .btn:focus-visible { outline: none; }
.kbd #pay-dialog .pt:focus-visible, .kbd #pay-dialog .btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* Ожидание оплаты: всё по центру, над заголовком крутится кольцо */
#pay-dialog.pay-wait { text-align: center; }
#pay-dialog.pay-wait #pay-text { max-width: 320px; margin-left: auto; margin-right: auto; text-wrap: balance; }
.pay-spin { display: block; width: 44px; height: 44px; margin: 4px auto 14px; border-radius: 50%; border: 4px solid #e9e2d4; border-top-color: var(--coral); }
.pay-spin[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .pay-spin { animation: spin .9s linear infinite; } }
@keyframes spin { to { rotate: 360deg; } }
.pt b { font: 800 14px Onest, sans-serif; }
.pt-sbp { background: var(--navy); color: #fff; }
.pt-sbp img { width: 126px; height: 50px; }
.pt-card { background: var(--sand); color: var(--navy); }
.pt-card .ic { width: 40px; height: 40px; }
.pt-card:disabled { cursor: default; opacity: .7; }
.pt-soon { position: absolute; top: 10px; right: 10px; font: 800 11px Onest, sans-serif; padding: 3px 8px; border-radius: 999px; background: rgba(20, 33, 61, .1); }
.pt-crypto { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 60px; padding: 10px 18px; border-radius: 999px; background: var(--sky); color: var(--sky-ink); }
.pt-crypto img { width: 32px; height: 32px; }
/* Звёзды Telegram: тёмная таблетка с искрами цветов Telegram Stars по краям */
.pt-stars { grid-column: 1 / -1; flex-direction: row; justify-content: center; min-height: 60px; padding: 10px 18px; border-radius: 999px; color: #fff;
  background: url(/static/pay/stars-sparkles-l.svg) left 14px center / auto 100% no-repeat, url(/static/pay/stars-sparkles-r.svg) right 14px center / auto 100% no-repeat, var(--navy); }
.pt-stars img { width: 34px; height: 36px; }
.pt[hidden] { display: none; }
.verify-card { padding: 12px 14px 12px 16px; }
.verify-row { display: flex; align-items: center; gap: 12px; }
.verify-row > div { flex: 1; min-width: 0; }
.verify-row .small { margin: 2px 0 0; overflow-wrap: anywhere; }
.btn-compact { min-height: 40px; padding: 0 16px; font-size: 14px; flex: none; }
.verify-card .error, .verify-card .ok { margin: 8px 0 0; }

/* Подключение: мастер в три шага. На экране только следующий шаг и одна кнопка */
.wiz { padding: 16px 16px 14px; }
.wiz-top { display: flex; align-items: center; gap: 8px; }
.wiz-prog { display: flex; gap: 5px; }
.wiz-prog i { width: 22px; height: 6px; border-radius: 9px; background: #e9e2d4; transition: background-color .3s ease; }
.wiz-prog i.on { background: var(--coral); }
.wiz-prog i.done { background: #2f9e5b; }
.wiz-prog-text { font-size: 12px; font-weight: 800; color: var(--muted); }
.wiz-app { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 800; -webkit-tap-highlight-color: transparent; }
.wiz-app:active { scale: .96; }
.wiz-app:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.wiz-app-ic { display: flex; }
.wiz-app-ic img, .wiz-app-ic .app-letter { border-radius: 7px; }
.wiz-app-arrow .ic { width: 16px; height: 16px; rotate: -90deg; color: var(--muted); }
.wiz-stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 4px 2px; }
.wiz-ic { display: flex; min-height: 76px; }
.wiz-ic img, .wiz-ic .app-letter { border-radius: 22px; box-shadow: 0 8px 20px -8px rgba(20, 33, 61, .45); }
.wiz-check { display: flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 50%; background: #2f9e5b; color: #fff; font: 900 36px/1 var(--display); }
.wiz-title { font: 700 19px/1.2 var(--display); margin: 14px 0 4px; }
.wiz-text { margin: 0; max-width: 290px; color: var(--muted); text-wrap: balance; }
.btn.btn-hero { margin-top: 16px; min-height: 62px; font-size: 16px; font-weight: 900; box-shadow: 0 5px 0 #c94a22; }
.btn.btn-hero:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #c94a22; }
.wiz-alt { margin-top: 12px; font-weight: 700; min-height: 32px; }
.wiz-done { list-style: none; margin: 12px 0 0; padding: 8px 0 0; border-top: 1px dashed #ddd2bf; }
.wiz-done li { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.wiz-done .link { margin: 0 0 0 auto; min-height: 32px; display: inline-flex; align-items: center; }
.wiz-ok { display: inline-flex; width: 20px; height: 20px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: #2f9e5b; color: #fff; font-size: 12px; }
.app-letter { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 24%; background: #e2d9c8; color: var(--navy); font-weight: 900; }
.other-dev { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px; padding: 12px 16px 12px 12px; border-radius: var(--radius); background: var(--paper); -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease-out); }
.other-dev:active { transform: scale(.98); }
.other-dev:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.other-dev b { display: block; font-size: 15px; }
.other-dev .small { display: block; margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.other-dev > .ic { margin-left: auto; flex: none; color: var(--muted); }
.other-ic { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 14px; background: var(--navy); color: #fff; }
.other-ic .ic { width: 24px; height: 24px; }
.ru-how { font-weight: 700; }

/* Окно выбора приложения */
.app-pick { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; align-content: start; gap: 6px; margin-top: 12px; }
.app-opt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 2px 7px; border-radius: 16px; background: var(--bg); text-align: center; font-size: 11px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
.app-opt img, .app-opt .app-letter { border-radius: 24%; }
.app-opt small { font-size: 10px; font-weight: 700; color: var(--muted); }
.app-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--navy); }
.app-opt:active { scale: .96; }
.app-opt:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Шторка с прокруткой: текст листается, «Закрыть» прибита к низу, пока низ не виден — «листай ниже» */
.sheet-dialog { padding: 0; overflow: hidden; }
.sheet-dialog[open] { display: flex; flex-direction: column; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 34px; }
.sheet-more { position: relative; z-index: 1; height: 0; display: flex; justify-content: center; align-items: flex-end; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); pointer-events: none; transition: opacity .2s ease; }
.sheet-more::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(255, 253, 249, 0), var(--paper) 75%); z-index: -1; }
.sheet-more .ic { width: 14px; height: 14px; rotate: -90deg; }
.sheet-dialog.at-end .sheet-more { opacity: 0; }
.sheet-foot { padding: 10px 22px 20px; }
.sheet-foot .btn { margin: 0; }
.ru-auto { margin: 14px 0; padding: 12px 14px; border-radius: 18px; background: #e8f5ec; }
.ru-auto b { display: block; font-size: 14px; margin-bottom: 8px; }
.ru-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ru-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.ru-tags span:has(img) { padding-left: 4px; }
.ru-tags img { border-radius: 6px; }
.ru-acc { border-top: 1px solid #ebe3d4; padding: 10px 2px; }
.ru-acc summary { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; font-weight: 800; font-size: 15px; list-style: none; }
.ru-acc summary::-webkit-details-marker { display: none; }
.ru-acc summary::after { content: "+"; margin-left: auto; font: 700 20px/1 var(--display); color: var(--muted); }
.ru-acc[open] summary::after { content: "−"; }
.ru-acc summary img { border-radius: 8px; }
.ru-acc ol { margin: 8px 0 4px; padding-left: 20px; font-size: 14px; }
.ru-acc ol li { margin: 4px 0; }
.ru-acc .btn { margin-top: 8px; }
.ru-letter { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: #e2d9c8; font-weight: 900; }
.soon { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ebe3d4; color: var(--muted); font-size: 11px; font-weight: 800; }
/* Вкладки устройств: все восемь сразу, двумя рядами; выбранную подсвечивает переезжающая плашка */
#apps-os { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 0 0; padding: 4px; border-radius: 20px; background: var(--bg); }
.os-tab { all: unset; box-sizing: border-box; position: relative; z-index: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 2px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; text-align: center; color: var(--navy); transition: color .25s ease; -webkit-tap-highlight-color: transparent; }
.os-tab[aria-selected="true"] { color: #fff; }
.os-pill { position: absolute; z-index: 0; border-radius: 999px; background: var(--navy); transition: left .35s var(--ease-out), top .35s var(--ease-out), width .35s var(--ease-out); }
.os-pill.no-anim { transition: none; }
.connect-actions .btn { min-width: 0; padding: 0 12px; }

/* Уведомление по центру экрана: проявляется и само гаснет, ничего не сдвигает */
.toast { position: fixed; inset: auto; top: 50%; left: 50%; z-index: 60; margin: 0; box-sizing: border-box; width: max-content; max-width: min(320px, calc(100% - 40px)); padding: 14px 20px; border: 0; border-radius: 20px; background: rgba(20, 33, 61, .94); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; box-shadow: 0 16px 40px rgba(20, 33, 61, .3); pointer-events: none; opacity: 0; translate: -50% -50%; scale: .96; transition: opacity .2s ease-out, scale .2s ease-out; }
.toast.is-on { opacity: 1; scale: 1; }
.toast[hidden] { display: none; }
.toast:popover-open { display: block; }

/* Рамки фокуса в окнах только с клавиатуры: на тапах первая кнопка не должна гореть обводкой */
dialog:focus { outline: none; }
dialog :focus-visible { outline: none; }
.kbd dialog :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Выбор в окнах меняется плавно */
.app-opt { transition: box-shadow .2s ease, scale .15s ease-out, background-color .2s ease; }
.wiz-app { transition: scale .15s ease-out, background-color .2s ease; }

/* Инструкции раскрываются плавно, плюс поворачивается в крестик */
.ru-acc summary::after { content: "+"; transition: rotate .25s cubic-bezier(0.2, 0, 0, 1); }
.ru-acc[open] summary::after { content: "+"; rotate: 45deg; }
.acc-body { overflow: hidden; }

/* Верх мастера: «Выбери приложение [Happ ⌄]» в одну строку, шаги над картинкой */
.wiz-top { justify-content: space-between; }
.wiz-pick-label { font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.wiz-app { margin-left: 0; max-width: 60%; min-height: 40px; padding: 5px 10px 5px 6px; background: var(--sand); box-shadow: 0 2px 0 #d3a96c; }
.wiz-app > span:not(.wiz-app-ic):not(.wiz-app-arrow) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-app-arrow .ic { color: var(--navy); }
.wiz-prog-row { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.wiz-stage { padding-top: 14px; }

/* Обновление свайпом вниз в установленном приложении */
html.standalone { overscroll-behavior-y: none; }
.ptr { position: fixed; z-index: 55; top: 0; left: 50%; display: flex; width: 40px; height: 40px; margin-left: -20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: 0 6px 18px rgba(20, 33, 61, .18); translate: 0 -56px; opacity: 0; pointer-events: none; }
.ptr .ic { width: 22px; height: 22px; }
.ptr.is-back { transition: translate .25s ease-out, opacity .25s ease-out; }
.ptr.is-loading .ic { animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ptr.is-loading .ic { animation: none; } }
/* На рабочем столе шапка чуть ниже: не задевает размытую полосу системы сверху */
html.standalone .top { padding-top: 24px; }
html.standalone .ptr { top: env(safe-area-inset-top); }
.pay-test { margin-top: 14px; }
.pay-test .btn { margin-top: 0; }

/* Проверка подключения: список проверок в шторке */
/* Статус серверов: строка на «Главной» (раскрывается) и карточка в «Помощи» */
.srv-notice { margin: 0 0 8px; padding: 12px 16px; border-radius: var(--radius); background: var(--sand); color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.srv-card { padding: 14px 18px; }
.srv-sum { display: flex; align-items: center; gap: 12px; list-style: none; cursor: default; }
details.srv-card > .srv-sum { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.srv-sum::-webkit-details-marker { display: none; }
.srv-text { flex: 1; min-width: 0; }
.srv-text b { display: block; font: 700 15px/1.3 var(--display); }
.srv-text .small { display: block; margin: 2px 0 0; color: var(--muted); }
.srv-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #2f9e5b; box-shadow: 0 0 0 4px rgba(47, 158, 91, .18); }
.srv-card.is-warn .srv-dot { background: #d99a2b; box-shadow: 0 0 0 4px rgba(217, 154, 43, .22); }
.srv-card.is-bad .srv-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(179, 38, 30, .18); }
.srv-card.is-bad { background: #fde6df; }
.srv-chev { display: flex; flex: none; color: var(--muted); }
.srv-chev .ic { width: 18px; height: 18px; rotate: -90deg; transition: rotate .2s var(--ease-out); }
details[open] > .srv-sum .srv-chev .ic { rotate: 90deg; }
.srv-list { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(20, 33, 61, .08); display: grid; gap: 4px; }
.srv-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.srv-flag { width: 22px; flex: none; text-align: center; font-size: 18px; line-height: 1; }
.srv-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.srv-mine { padding: 2px 8px; border-radius: 999px; background: var(--sky); color: var(--sky-ink); font-size: 12px; font-weight: 800; }
.srv-state { flex: none; font-size: 13px; font-weight: 700; color: #1d6b3a; }
.srv-state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.srv-item.is-bad .srv-state { color: var(--danger); }
/* Сердцебиение: когда все серверы работают, точка бьётся двойным толчком и пускает волну */
.srv-dot { position: relative; }
.srv-card.is-ok .srv-dot { animation: srv-beat 1.8s ease-in-out infinite; }
.srv-card.is-ok .srv-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2f9e5b; animation: srv-wave 1.8s cubic-bezier(.2, 0, 0, 1) infinite; }
@keyframes srv-beat { 0%, 40%, 100% { scale: 1; } 10% { scale: 1.3; } 20% { scale: 1; } 28% { scale: 1.18; } }
@keyframes srv-wave { 0% { scale: 1; opacity: .5; } 60%, 100% { scale: 2.8; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .srv-chev .ic { transition: none; }
  .srv-card.is-ok .srv-dot, .srv-card.is-ok .srv-dot::after { animation: none; }
}

/* Проверка подключения: карточка в «Помощи» и окно с результатом */
.check-card-head { display: flex; align-items: flex-start; gap: 12px; }
.check-card-head .small { margin: 4px 0 0; }
.check-card-ic, .check-head-ic { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--sky); color: var(--sky-ink); }
.check-card-ic .ic, .check-head-ic .ic { width: 22px; height: 22px; }
.check-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.check-head .small { margin: 2px 0 0; color: var(--muted); }
.check-verdict { margin: 0 0 12px; padding: 14px 16px; border-radius: 20px; }
.check-verdict b { display: block; font: 700 15px/1.3 var(--display); }
.check-verdict .small { margin: 6px 0 0; }
.check-verdict.is-ok { background: #2f9e5b; color: #fff; }
.check-verdict.is-bad { background: var(--coral); color: var(--coral-ink); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--bg); font-size: 14px; line-height: 1.35; }
.check-item > div { min-width: 0; padding-top: 3px; }
.check-item b { display: block; font-weight: 700; }
.check-item span:not(.check-ic) { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.check-ic { display: flex; width: 26px; height: 26px; flex: none; align-items: center; justify-content: center; border-radius: 50%; font: 900 13px/1 var(--display); color: #fff; }
.check-item.is-ok .check-ic { background: #2f9e5b; }
.check-item.is-warn .check-ic { background: var(--sand); color: var(--navy); }
.check-item.is-fail .check-ic { background: var(--danger); }
.check-item.is-wait { color: var(--muted); }
.check-item.is-wait .check-ic { border: 3px solid rgba(20, 33, 61, .15); border-top-color: var(--navy); }
@media (prefers-reduced-motion: no-preference) { .check-item.is-wait .check-ic { animation: spin .8s linear infinite; } }
.check-note { color: var(--muted); margin: 12px 4px 0; }
.check-dialog .sheet-scroll { padding-bottom: 6px; }
.check-actions { display: grid; gap: 8px; padding-top: 12px; box-shadow: 0 -1px 0 rgba(20, 33, 61, .08); }
.check-actions .btn { width: 100%; }