/* ==========================================================================
   keyf — служебные страницы в стиле нового кабинета: вход, оплата, ошибка,
   «открыть в приложении», информация (FAQ, соглашение…), обращение в поддержку
   и мини-приложение /app. Подключается после cabinet.css (сервер подменяет
   старые style.css / dashboard.css / mono.css). Разметка страниц прежняя.
   ========================================================================== */
:root { --text-dim: #b9b8b3; --danger: #fff; --surface: #121212; }
body { min-height: 100vh; }

/* ---------- карточка по центру: вход, оплата, ошибка, «открыть в приложении» ---------- */
body > .card, body > .card.box {
  width: 100%; max-width: 420px; margin: 0; padding: 34px 30px 30px; text-align: center; border-radius: 24px;
  background: linear-gradient(#161616, #101010); border: 1px solid #262626;
  box-shadow: 0 0 0 10px #0c0c0c, 0 0 0 11px #1d1d1d, 0 50px 120px -40px rgba(0,0,0,.9);
  animation: rise .5s cubic-bezier(.2,.8,.2,1);
}
body > .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.08), transparent 70%); }
body:has(> .card) { display: flex; align-items: center; justify-content: center; padding: 24px; }
/* логотип: стрелки + keyf, как в шапке сайта */
.card .brand { display: inline-flex; align-items: center; gap: 9px; font: 700 26px/1 var(--sans); letter-spacing: -.03em; color: #fff; margin: 0 0 8px; }
.card .brand::before, .screen .logo-title::before { content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 2l5 5M7 3v4H3M16 16l-5-5M11 15v-4h4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 2l5 5M7 3v4H3M16 16l-5-5M11 15v-4h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.card .subtitle { color: #8b8a86; font-size: 14px; margin-bottom: 26px; }
body > .card .hint, body > .card p { color: #8b8a86; font-size: 13.5px; line-height: 1.6; }
.card .note { color: #b9b8b3; font-size: 14.5px; line-height: 1.6; margin: 6px 0 22px; }
.card .error { color: #fff; font-size: 13px; min-height: 16px; margin-top: 12px; }
.card .error:empty { display: none; }
/* большая белая кнопка входа через Telegram */
.btn-telegram { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; border-radius: 999px; background: #f2f1ed; color: #0a0a0a; text-decoration: none; font: 600 15px/1 var(--sans); transition: background .2s, box-shadow .2s, transform .15s; }
.btn-telegram::before { content: "✈"; font-size: 15px; }
.btn-telegram:hover { background: #fff; box-shadow: 0 0 26px rgba(255,255,255,.2); }
.btn-telegram:active { transform: scale(.98); }
.card .btn, .box .btn { display: flex; width: 100%; margin: 0 0 10px; min-height: 48px; }
.card .back { display: inline-block; margin-top: 8px; color: #8b8a86; font-size: 13px; text-decoration: none; }
.card .back::before { content: "← "; }
.card .back:hover { color: #fff; }
/* ошибка: крупный код антиквой */
.box .code { font: 400 96px/.9 var(--serif); letter-spacing: -.02em; color: #fff; margin: 0 0 14px; text-shadow: 0 0 40px rgba(255,255,255,.15); }
.box h1 { font: 600 20px/1.25 var(--sans); color: #fff; margin: 0 0 10px; }
.card.box h1:first-child { font: 400 34px/1 var(--serif); letter-spacing: -.01em; margin-bottom: 12px; }

/* ---------- страницы с текстом: информация и обращение ---------- */
body > .page, body > .wrap { position: relative; z-index: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 32px 20px 70px; }
body:has(> .page) { display: block; padding: 0; }
.page > .top, .wrap > .top { margin-bottom: 26px; }
.page > .top a, .wrap > .top a { color: #8b8a86; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #2e2e2e; border-radius: 999px; padding: 8px 14px; transition: border-color .2s, color .2s; }
.page > .top a::before, .wrap > .top a::before { content: "←"; }
.page > .top a:hover, .wrap > .top a:hover { color: #fff; border-color: #666; }
.page h1, .wrap > h1 { font: 400 clamp(40px, 6vw, 60px)/.95 var(--serif); letter-spacing: -.02em; color: #fff; margin: 0 0 22px; }
.page .card { padding: 30px 32px; }
.page .card h1 { margin-bottom: 24px; }
.content { color: #b9b8b3; font-size: 15.5px; line-height: 1.75; }
.content h2, .content h3 { font: 600 18px/1.3 var(--sans); color: #fff; margin: 28px 0 10px; }
.content strong, .content b { color: #fff; }
.content a { color: #fff; text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.content p { margin: 0 0 14px; }
.content ol, .content ul { padding-left: 22px; margin: 0 0 20px; }
.content li { margin-bottom: 10px; }
.content li::marker { color: #8b8a86; }
.content code { font: 500 .88em var(--mono); background: #1a1a1a; border: 1px solid #262626; border-radius: 6px; padding: 1px 6px; }
.wrap .meta { color: #8b8a86; font-size: 14px; margin-bottom: 22px; }
.wrap .meta strong { color: #fff; }
/* переписка: сообщения поддержки — светлые слева, ваши — справа */
.messages { display: grid; gap: 10px; margin-bottom: 20px; }
.msg { max-width: 86%; padding: 13px 15px; border-radius: 16px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: #161616; border: 1px solid #262626; color: #e6e5e0; animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
.msg.user { justify-self: end; border-bottom-right-radius: 6px; background: #1c1c1c; }
.msg.support { justify-self: start; border-bottom-left-radius: 6px; border-color: #3a3a3a; box-shadow: inset 2px 0 0 #f2f1ed; }
.msg .who { display: block; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: #8b8a86; margin-bottom: 7px; white-space: normal; }
.msg .who b { color: #fff; }
.closed-note { color: #8b8a86; font-size: 14px; }
.wrap textarea { width: 100%; margin-bottom: 12px; }

/* ---------- мини-приложение /app (кнопка «Подписка» в боте) ---------- */
.screen { max-width: 400px !important; }
.screen .logo { margin-bottom: 26px; }
.screen .logo-mark { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: #8b8a86; margin-bottom: 10px; }
.screen .logo-title { display: inline-flex; align-items: center; gap: 10px; font: 700 34px/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.screen .logo-title::before { width: 24px; height: 24px; }
.screen .panel { border-radius: 24px; padding: 24px 22px; background: linear-gradient(#161616, #101010); border: 1px solid #262626; box-shadow: 0 0 0 8px #0c0c0c, 0 0 0 9px #1d1d1d, 0 40px 100px -40px rgba(0,0,0,.9); position: relative; overflow: hidden; }
.screen .panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.07), transparent 70%); }
.status-row { font: 600 15px/1.3 var(--sans) !important; color: #fff !important; }
.status-row .dot { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.7); animation: pulse 2.4s ease-in-out infinite; }
.status-row .dot.off { background: transparent; border: 1.5px solid #8b8a86; box-shadow: none; animation: none; }
.screen .link-box { display: block; padding: 14px 15px; margin-bottom: 18px; border-radius: 14px; background: #0a0a0a; border: 1px dashed #3a3a3a; font: 500 12.5px/1.5 var(--mono); color: #fff; word-break: break-all; cursor: default; }
.screen button { border-radius: 999px !important; min-height: 50px; font: 600 15px/1 var(--sans) !important; }
.screen .btn-primary:hover { background: #fff; box-shadow: 0 0 24px rgba(255,255,255,.18); }
.screen .btn-secondary { border-color: #2e2e2e !important; }
.screen .btn-secondary:hover { border-color: #666 !important; background: #171717; }
.screen .hint { color: #8b8a86; }
.channel-fab { background: #161616 !important; border-color: #2e2e2e !important; }
.sheet { background: #141414 !important; border-color: #2e2e2e !important; border-radius: 24px 24px 0 0 !important; }
.sheet-title { font: 600 17px/1.2 var(--sans) !important; color: #fff; }
.app-item { border: 1px solid transparent; transition: background .2s, border-color .2s; }
.app-item:hover, .app-item:active { background: #1c1c1c !important; border-color: #2e2e2e; }
.app-icon { background: #1e1e1e !important; border: 1px solid #2e2e2e; color: #fff !important; font-family: var(--mono) !important; }
body > .toast { background: #f2f1ed !important; color: #0a0a0a !important; border: 0 !important; border-radius: 999px !important; font: 600 13.5px/1 var(--sans) !important; padding: 12px 18px !important; box-shadow: 0 14px 40px -10px rgba(0,0,0,.8); }
@keyframes pulse { 50% { box-shadow: 0 0 3px 1px rgba(255,255,255,.35); } }

@media (max-width: 560px) {
  body > .card, body > .card.box { padding: 28px 22px 24px; box-shadow: 0 0 0 6px #0c0c0c, 0 0 0 7px #1d1d1d; }
  .page .card { padding: 22px 18px; }
  .box .code { font-size: 76px; }
}

.box .btn-secondary, body > .card .btn-secondary { border-color: #3a3a3a; }

/* у страницы оплаты подпись называется .note — как всплывающие уведомления кабинета; возвращаем ей вид обычного текста */
body > .card .note { display: block; grid-template-columns: none; background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; animation: none; overflow: visible; color: #b9b8b3; font-size: 14.5px; line-height: 1.6; margin: 6px 0 22px; }