/* Личный кабинет. Палитра общая с лендингом — человек должен узнать бренд. */
/* ── ПАЛИТРА ──────────────────────────────────────────────────────────────
   Синяя палитра (действующая) объявлена ниже. Прежняя — янтарь и зелень —
   сохранена здесь целиком: чтобы откатиться, замените значения в блоках
   :root и тёмной темы на эти.

   светлая:  --bg:#EEF1F5; --surface-2:#E4E9F0; --ink:#0E1A2B; --ink-2:#45566B;
             --ink-3:#7387A0; --line:#D3DCE7; --accent:#C4701A; --accent-ink:#A85C12;
             --accent-dim:#F6E7D5; --warn:#9A6510; --brand:#1F9E63; --on-accent:#fff;
   тёмная:   --bg:#0B1622; --surface:#12202F; --surface-2:#1A2B3D; --ink:#E8EEF5;
             --ink-2:#9BADC2; --ink-3:#6B8098; --line:#1F3346; --accent:#E8983C;
             --accent-ink:#F0AC5E; --accent-dim:#33270F; --brand:#45C98A; --on-accent:#fff;

   ⚠️ Контраст обеих палитр проверен по WCAG. Подбирая свои оттенки, проверьте
   заново: белое на светло-синей кнопке даёт 3.2 при норме 4.5 — отсюда
   и появилась переменная --on-accent.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg:#F7FAFF; --surface:#FFFFFF; --surface-2:#EAF1FC;
  --ink:#0D1E36; --ink-2:#45566B; --ink-3:#5A7499; --line:#D0DDF0;
  --accent:#2563EB; --accent-ink:#1B47C4; --accent-dim:#E7F0FE; --on-accent:#FFFFFF;
  --ok:#117955; --brand:#3B82F6; --ok-dim:#DFF3EA;
  --warn:#8A5A0B; --warn-dim:#FBEED6;
  --bad:#BE392E; --bad-dim:#FCE3E1;
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius:14px;
  --shadow:0 1px 2px rgba(13,30,54,.04), 0 10px 28px -16px rgba(13,30,54,.14);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:#101F35; --surface:#17293F; --surface-2:#1F3350;
    --ink:#EDF3FB; --ink-2:#9BADC2; --ink-3:#8298B5; --line:#2A415F;
    --accent:#6EA8FE; --accent-ink:#9CC2FF; --accent-dim:#17304F; --on-accent:#06121F;
    --ok:#4ACB93; --brand:#8CBBFF; --ok-dim:#123528; --warn:#E8B455; --warn-dim:#382D12;
    --bad:#EC7A70; --bad-dim:#3E2020;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  }
}

*, *::before, *::after { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--font-sans); -webkit-font-smoothing:antialiased;
}
h1 { font-size:1.5rem; margin:0; letter-spacing:-.02em; }
h2 { font-size:1.0625rem; margin:0 0 .875rem; letter-spacing:-.01em; }
p { margin:0 0 .75rem; }
a { color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

.wrap { max-width:560px; margin-inline:auto; padding:0 1.125rem; }

/* шапка */
.top { background:var(--surface); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; height:58px; gap:1rem; }
.brand { font:700 1.0625rem/1 var(--font-mono); letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.brand i { display:block;
  width:22px; height:22px; border-radius:0; background:none; box-shadow:none; position:relative; flex:none; }
/* Знак: тёмная часть красится в цвет текста (currentColor) через маску — так один
   файл работает в обеих темах; синий самолётик лежит поверх картинкой. */
.brand i::before, .brand i::after { content:""; position:absolute; inset:0;
  background-position:center; background-repeat:no-repeat; background-size:contain; }
.brand i::before { background-color:currentColor;
  -webkit-mask:url(/static/logo-mark.png) center/contain no-repeat; mask:url(/static/logo-mark.png) center/contain no-repeat; }
.brand i::after { background-image:url(/static/logo-plane.png); }

.top form { margin-left:auto; }

main { padding-block:1.5rem 4rem; }

/* карточка баланса — главное на странице */
.hero {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1rem; text-align:center;
}
.hero .k { font:500 .6875rem/1 var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.hero .amount { font:800 2.75rem/1 var(--font-mono); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; margin:.75rem 0 .5rem; }
.hero .state { font-size:.9375rem; color:var(--ink-2); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem; margin-bottom:1rem; }

/* состояние — формой, не только цветом */
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .625rem;
  border-radius:999px; font:600 .8125rem/1 var(--font-sans); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.ok { color:var(--ok); background:var(--ok-dim); }
.pill.warn { color:var(--warn); background:var(--warn-dim); }
.pill.bad { color:var(--bad); background:var(--bad-dim); }

/* ссылка подписки — её копируют, поэтому крупно и удобно */
.sub {
  font-family:var(--font-mono); font-size:.8125rem; word-break:break-all;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:.875rem; margin:.75rem 0; user-select:all; -webkit-user-select:all;
}

/* суммы пополнения */
.amounts { display:grid; grid-template-columns:repeat(2,1fr); gap:.625rem; }
.amounts form { margin:0; }
.amounts button { width:100%; }
.amount-btn small { display:block; font-weight:400; opacity:.75; font-size:.75rem; margin-top:.15rem; }

/* формы */
label { display:block; font:500 .75rem/1 var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem; }

/* ⚠️ Перечисляем типы поимённо, но НЕ через input[type=text].
   Так было до 09.09.2026 — и поле почты (type=email) не подпадало под стиль
   вовсе: человек видел мелкую рамку от браузера рядом с нашей крупной кнопкой.
   Заметно это только на той единственной странице, где поле не текстовое,
   поэтому и прожило незамеченным. */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=url], select, textarea {
  display:block; width:100%; box-sizing:border-box;
  padding:.8rem .875rem; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
  /* ⚠️ Не мельче 1rem (16px). Safari на iPhone сам увеличивает страницу,
     когда фокус попадает в поле с более мелким шрифтом, — человек вводит
     почту, и вёрстка уезжает. */
  font:400 1rem var(--font-sans);
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); outline:none; }

/* Свою стрелку рисуем сами: с appearance:none родная пропадает, а без него
   Safari игнорирует и рамку, и фон, и радиус. Картинка — data:, её разрешает
   img-src в CSP. */
select {
  appearance:none; -webkit-appearance:none;
  padding-right:2.25rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b93a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:.75rem;
}

/* Отступы полей — классом, а не атрибутом style: инлайн на страницах кабинета
   не работает (CSP style-src 'self'), и разметка с ним только вводит в
   заблуждение — выглядит настроенной, а браузер её не видит. */
.field { margin-bottom:1.125rem; }
.field:last-of-type { margin-bottom:1.375rem; }

/* Форма внутри карточки — по левому краю, даже когда карточка центрирована:
   подпись над полем читается от края поля, а не «плавает» над ним. */
.center form { text-align:left; }

/* Мелочи, ради которых раньше стоял мёртвый style="" */
.brand-center { justify-content:center; margin-bottom:1.25rem; }
.lead-sm { font-size:.9375rem; }
.note-sm { font-size:.8125rem; line-height:1.5; margin-top:1.25rem; }
.note-sm + .note-sm { margin-top:.75rem; }

/* Страница подключения: выбор устройства и пронумерованные шаги.

   Вкладки — обычные ссылки, а не скрипт: страницу открывают в том числе
   из встроенных браузеров мессенджеров. Переносятся на узком экране сами. */
.os-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.25rem; }
.os-tab {
  padding:.5rem .875rem; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-2); text-decoration:none;
  font:500 .875rem var(--font-sans); white-space:nowrap;
}
.os-tab:hover { border-color:var(--accent); color:var(--ink); }
.os-tab.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.step { display:flex; gap:1rem; align-items:flex-start; }
.step-n {
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-dim); color:var(--accent-ink);
  font:700 .875rem/1 var(--font-mono);
}
.step-body { flex:1; min-width:0; }
.step-body h2 { margin-bottom:.75rem; }
.step-body .btn + .note-sm { margin-top:.75rem; }

/* Два канала связи в ряд. На узком экране становятся друг под другом сами —
   без медиазапроса: auto-fit сжимает колонки, пока помещаются, и переносит. */
.channels { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem; align-items:start; }
.channels .card { margin-bottom:0; }

/* Сворачиваемая история. Стрелку рисуем сами: родной маркер по-разному
   выглядит в разных браузерах и не поддаётся выравниванию. */
details.card > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:.625rem; }
details.card > summary::-webkit-details-marker { display:none; }
details.card > summary h2 { margin:0; }
details.card > summary::after {
  content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s;
}
details.card[open] > summary::after { transform:rotate(225deg) translate(-2px,-2px); }
details.card[open] > summary { margin-bottom:.875rem; }

/* Подвал кабинета: контакты и канал по центру, помельче основного текста. */
.support-foot { text-align:center; margin-top:1.5rem; }
.support-foot p { margin:.375rem 0; }

/* Шестизначный код из письма: цифры вразрядку и покрупнее — его сверяют
   глазами с письмом, а не читают как текст. */
.code-input {
  font:600 1.375rem/1.2 var(--font-mono); letter-spacing:.35em;
  text-align:center; padding-left:.5rem; padding-right:.5rem;
}
.code-input::placeholder { letter-spacing:.35em; color:var(--ink-3); opacity:.45; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; flex-direction:column;
  padding:.75rem 1rem; border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:var(--on-accent); font:600 .9375rem var(--font-sans);
  cursor:pointer; text-decoration:none; width:100%;
}
.btn:hover { filter:brightness(1.07); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover { background:var(--surface-2); filter:none; }
.btn.sm { padding:.5rem .75rem; font-size:.8125rem; width:auto; }
/* подтверждение копирования: цвет говорит «получилось» без лишнего текста */
.btn.copied { background:var(--ok); }
.btn.copied:hover { filter:none; }

/* история */
.tx { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.625rem 0; border-bottom:1px solid var(--line); font-size:.9375rem; }
.tx:last-child { border-bottom:0; }
.tx .when { font-family:var(--font-mono); font-size:.8125rem; color:var(--ink-3); }
.tx .sum { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:600;
  white-space:nowrap; }
.tx .sum.plus { color:var(--ok); }

.flash { padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.9375rem; }
.flash.ok { background:var(--ok-dim); color:var(--ok); }
.flash.bad { background:var(--bad-dim); color:var(--bad); }

.dim { color:var(--ink-3); }
.hint { font-size:.8125rem; color:var(--ink-3); margin:.5rem 0 0; }

/* экран «ссылка устарела» */
.center { min-height:100dvh; display:grid; place-items:center; padding:1.5rem; text-align:center; }
/* 420, а не 380: на 380 поле ввода и выбор срока становятся заметно уже кнопки
   под ними, и форма выглядит зажатой. Разница в 40 пикселей на телефоне
   не мешает — карточка всё равно упирается в поля страницы. */
.center .card { max-width:420px; box-shadow:var(--shadow); }

/* Нейтральное сообщение: не удача и не ошибка. Нужно для «оплата не завершена» —
   зелёная плашка там врала, а красная пугала бы там, где ничего не сломалось. */
.flash.info { background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line); }

/* сводка по приглашениям */
.ref-stats { display:flex; flex-wrap:wrap; gap:1.25rem; margin:.875rem 0 .25rem;
  font-size:.8125rem; color:var(--ink-3); }
.ref-stats strong { color:var(--ink); font-family:var(--font-mono); }

/* Две кнопки рядом на главной: «Скачать …» и «Открыть в …». Классом, а не
   атрибутом style: CSP кабинета инлайновые стили молча не применяет. */
.btn-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.625rem; margin:.875rem 0 .5rem; }
.btn-pair .btn { margin:0; padding-inline:.5rem; white-space:nowrap; }

/* Свёрнутый список приложений на главной. Те же карточки, что на сайте,
   только компактнее: по две в ряд, неполный ряд — по центру. */
.apps-box summary { cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; }
.apps-box summary::-webkit-details-marker { display:none; }
.apps-box summary h2 { margin:0; }
.apps-box summary::after { content:"▾"; color:var(--ink-3); font-size:1rem; transition:transform .15s; }
.apps-box[open] summary::after { transform:rotate(180deg); }
.apps-box[open] summary { margin-bottom:.75rem; }
.app-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:.625rem; margin-top:.875rem; }
.app-tile { flex:0 0 calc(50% - .3125rem); min-width:0; border:1px solid var(--line);
  border-radius:10px; padding:.875rem .625rem; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:.2rem; }
.app-tile svg { width:28px; height:28px; color:var(--accent); margin-bottom:.25rem; }
.app-tile .app-name { font-weight:600; font-size:.9375rem; }
.app-tile .app-sub, .app-tile .app-where { font-size:.75rem; color:var(--ink-3); }
.app-tile .app-sub { margin-bottom:.5rem; }
/* Кнопка — по низу карточки: подпись бывает в две строки, и без этого
   кнопки в соседних карточках стояли на разной высоте. */
.app-tile .btn { width:100%; margin-top:auto; }
.app-tile.mine { border-color:var(--accent); }

/* Поддержка в кабинете: переписка пузырями, как в мессенджере. */
.card-wide { max-width:560px; }
.sup-thread { display:flex; flex-direction:column; gap:.5rem; margin:1rem 0; max-height:420px; overflow-y:auto; }
.sup-msg { border-radius:12px; padding:.5rem .75rem; max-width:85%; }
.sup-in { align-self:flex-end; background:color-mix(in srgb, var(--brand) 16%, transparent); }
.sup-out { align-self:flex-start; background:var(--surface-2, var(--surface)); border:1px solid var(--line); }
.sup-who { font-size:.75rem; color:var(--ink-3); margin-bottom:.125rem; }
.sup-text { white-space:pre-wrap; word-break:break-word; }
.support-foot .btn { margin-bottom:.5rem; }