/* ============================================================
   ARMADA UI — общий стиль публичных страниц (вход, регистрация,
   подтверждение почты, восстановление/сброс пароля, вход через Telegram,
   форумы). Цвета, шрифт и формы — те же, что на главной (landing.html):
   Montserrat, фиолетовый градиент кнопок, лавандовый фон, скругления 10–20px.
   Кабинет (base.html) использует ту же палитру через свои переменные.
   ============================================================ */
:root {
  --violet:      #5A30D6;
  --violet-2:    #7440EC;
  --violet-deep: #36149A;
  --violet-soft: #F0EDFD;
  --ink:         #0B0820;
  --ink-2:       #2E2A45;
  --text:        #585A70;
  --muted:       #7E7F94;
  --line:        #E6E6EE;
  --line-2:      #D9D7EA;
  --paper:       #F6F7FC;
  --surface:     #FFFFFF;
  --ok:          #16A34A;
  --ok-soft:     #E7F8EE;
  --bad:         #DC2C40;
  --bad-soft:    #FDECEE;
  --warn:        #B26A00;
  --warn-soft:   #FFF4DE;
  --btn-grad:    linear-gradient(135deg, #7440EC 0%, #5128CC 52%, #36149A 100%);
  --text-grad:   linear-gradient(90deg, #6A3FE0 0%, #5A30D6 50%, #4A23C2 100%);
  --shadow-card: 0 2px 10px rgba(46, 24, 120, .05);
  --shadow-lg:   0 30px 60px -28px rgba(46, 24, 120, .28), 0 2px 8px rgba(46, 24, 120, .05);
  --shadow-btn:  0 10px 22px rgba(70, 30, 180, .28);
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.mono, code { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
h1 em, h2 em, .accent {
  font-style: normal; background: var(--text-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--violet);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2);
  font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}
.btn:hover { border-color: #C3B6F2; color: var(--violet); }
.btn-primary, .btn-brand {
  background: var(--btn-grad); color: #FFFFFF; border-color: transparent; box-shadow: var(--shadow-btn);
}
.btn-primary:hover, .btn-brand:hover { color: #FFFFFF; transform: translateY(-1px); filter: brightness(1.07); }
.btn-secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.btn-link {
  background: none; border: none; color: var(--violet); font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.btn-link:hover { border-bottom-color: var(--violet); }
.btn-arrow { display: inline-block; transition: transform .16s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---------- Формы ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px;
}
.field label a { font-weight: 600; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.input {
  width: 100%; padding: 13px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #A9A8BD; }
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(90, 48, 214, .12); }

.flash {
  padding: 12px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid;
}
.flash.error   { background: var(--bad-soft); color: var(--bad); border-color: rgba(220, 44, 64, .25); }
.flash.success { background: var(--ok-soft);  color: var(--ok);  border-color: rgba(22, 163, 74, .25); }

.back-link {
  display: flex; width: fit-content; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 22px;
  transition: color .15s ease;
}
.back-link:hover { color: var(--violet); }

.sep {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.sep i { flex: 1; height: 1px; background: var(--line); }
.tos { font-size: 12.5px; color: var(--muted); margin-top: 12px; text-align: center; }

.auth-foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--text);
}
.auth-foot a { color: var(--violet); font-weight: 700; border-bottom: 1px solid rgba(90, 48, 214, .35); }
.auth-foot a:hover { border-bottom-color: var(--violet); }

/* Надзаголовок формы: фиолетовая черта + капс */
.coord, .eyebrow-line {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.coord::before, .eyebrow-line::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--btn-grad); }

/* ============================================================
   КАРКАС 1: «панель + форма» (вход, регистрация)
   Слева — сцена с главной: лавандовый фон и 3D-карта, справа — форма.
   ============================================================ */
.deck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); min-height: 100vh; }
.board {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 36px 48px 32px;
  background: #FCFCFE url('/static/landing/hero-bg.jpg') no-repeat;   /* тон = верхний край картинки */
  background-size: auto 62%; background-position: right bottom 30px;
}
.board::before {   /* левый край сцены — чистый, текст читается */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 249, 255, .96) 0%, rgba(250, 249, 255, .75) 38%, rgba(250, 249, 255, 0) 62%);
}
.board > * { position: relative; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img, .brand .logo-full { display: block; height: 28px; width: auto; }
.brand .tag {
  display: block; margin-top: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--muted);
}
.board-mid { margin-top: 56px; max-width: 560px; }
.board-mid h1, .board-mid h2 {
  font-size: clamp(32px, 3.3vw, 50px); font-weight: 800; line-height: 1.06;
  letter-spacing: -.01em; color: var(--ink);
}
.board-mid h1 span, .board-mid h2 span {
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--violet);
}
.board-mid p, .board-mid .lede { font-size: 16px; font-weight: 500; color: var(--text); margin-top: 16px; max-width: 44ch; }

/* «Платежи прямо сейчас» (вход) — белая карточка */
.log {
  margin-top: 28px; max-width: 360px; background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden;
}
.log-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--muted);
}
.log-head .live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.log-row {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 16px;
  border-bottom: 1px solid #F0EFF6; font-size: 13px; font-weight: 600; color: var(--text);
}
.log-row:last-child { border-bottom: none; }
.log-row b { color: var(--ok); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Условия (регистрация) */
.terms { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.term {
  display: flex; gap: 14px; align-items: center; padding: 12px 14px;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card);
}
.term .n {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 25%, #7A50EC 0%, #5530CF 45%, #3A16A8 100%);
  color: #FFFFFF; font-size: 12px; font-weight: 800;
}
.term .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.term .s { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.board-foot { margin-top: auto; padding-top: 28px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }

.panel {
  background: var(--surface); border-left: 1px solid var(--line);
  padding: 44px 48px; display: flex; flex-direction: column; justify-content: center;
}
.panel h1, .panel h2 {
  font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 14px 0 10px;
}
.panel .desc { font-size: 14.5px; font-weight: 500; color: var(--text); margin-bottom: 26px; }
.panel .btn { width: 100%; }

/* ============================================================
   КАРКАС 2: «карточка по центру» (подтверждение почты, восстановление, сброс)
   ============================================================ */
.mesh { display: none; }
body:has(> .brand-bar) {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FCFCFF 0%, #F2F1FD 100%);
}
/* 3D-сцена с главной справа сверху; края растворяются, чтобы не было «обреза» картинки */
body:has(> .brand-bar)::before, body:has(> .card)::before {
  content: ''; position: fixed; right: 0; top: 0; z-index: 0; pointer-events: none;
  width: min(72vw, 1180px); height: 560px;
  background: url('/static/landing/hero-bg.jpg') right top / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to right, transparent 0%, #000 40%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
body:has(> .brand-bar) > *, body:has(> .card) > * { position: relative; z-index: 1; }
.brand-bar { padding: 24px 32px; position: relative; z-index: 2; }
.brand-logo {
  display: block; width: 210px; height: 25px; flex-shrink: 0;
  background: url('/static/logo.svg') left center / contain no-repeat;
}
body:has(> .brand-bar) > main {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 16px 56px;
}
.auth-card {
  width: 100%; max-width: 450px; background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px 36px;
  box-shadow: var(--shadow-lg); backdrop-filter: blur(8px);
}
.auth-card h1 { font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.auth-card .desc { font-size: 14.5px; font-weight: 500; color: var(--text); margin-bottom: 24px; }
.auth-card .btn-primary { width: 100%; }
.auth-card .auth-foot { text-align: center; }
.auth-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); position: relative; display: inline-block; }
.pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--ok); opacity: .3;
  animation: ui-pulse 2s ease-out infinite;
}
@keyframes ui-pulse { 0% { transform: scale(1); opacity: .3; } 100% { transform: scale(2.4); opacity: 0; } }

/* подтверждение почты */
.email-icon {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: #FFFFFF;
  background: radial-gradient(circle at 35% 25%, #7A50EC 0%, #5530CF 45%, #3A16A8 100%);
  box-shadow: 0 10px 22px -8px rgba(58, 22, 168, .6);
}
.auth-card .em { font-size: 15px; font-weight: 700; color: var(--ink); margin: -18px 0 22px; word-break: break-all; }
.dev-banner {
  background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(178, 106, 0, .25);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px; margin-bottom: 18px;
}
.dev-banner .code { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 16px; letter-spacing: .2em; color: var(--ink); margin-left: 6px; }
.code-input {
  width: 100%; padding: 16px 14px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 600;
  letter-spacing: .45em; text-align: center; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.code-input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(90, 48, 214, .12); }
.code-input::placeholder { color: #CFCDE3; }
.code-form-row { margin-top: 16px; }
.actions-row {
  margin-top: 20px; display: flex; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--muted);
}
.actions-row form { display: inline; }

/* ============================================================
   КАРКАС 3: вход через Telegram (одна карточка)
   ============================================================ */
body:has(> .card) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 32px 16px;
  background: linear-gradient(180deg, #FCFCFF 0%, #F2F1FD 100%);
}
.brand-top img { height: 26px; width: auto; }
body > .card {
  width: 100%; max-width: 470px; background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 32px; box-shadow: var(--shadow-lg);
}
.card .h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; color: var(--ink); }
.card .sub { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 22px; }
.card .btn { width: 100%; }
.card .btn-secondary { margin-top: 10px; }
.steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.step {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
}
.step-n {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-grad); color: #FFFFFF; font-size: 12.5px; font-weight: 800;
}
.step-t { font-size: 13.5px; font-weight: 500; color: var(--text); }
.step-t code { background: #FFFFFF; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); font-size: 12px; }
.card .input { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; letter-spacing: .4em; text-align: center; }
.tg-link { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-weight: 700; }
.foot { margin-top: 18px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.foot a { color: var(--violet); }

/* ============================================================
   ФОРУМЫ: шапка как на главной + сетка карточек
   ============================================================ */
nav.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 253, 255, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; width: 100%; }
.nav-bar { display: flex; align-items: center; gap: 28px; height: 72px; }
nav.top .brand-logo { width: 200px; height: 24px; }
.nav-links { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color .15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--violet); }
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta .btn { padding: 10px 18px; font-size: 13.5px; }
.nav-bot {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--violet-soft); color: var(--violet); font-size: 13px; font-weight: 700;
  transition: transform .16s ease;
}
.nav-bot:hover { transform: translateY(-1px); }
.nav-bot .ic { font-size: 15px; line-height: 1; }

/* заголовок форумов по центру — 3D-сцену сюда не кладём (легла бы под текст), только мягкий фон */
.forums-section {
  padding: 0 0 72px;
  background:
    radial-gradient(760px 380px at 82% 0%, rgba(116, 64, 236, .12), transparent 70%),
    radial-gradient(620px 320px at 10% 10%, rgba(90, 48, 214, .07), transparent 70%),
    linear-gradient(180deg, #FCFCFF 0%, #F6F7FC 100%);
}
.forums-section .page-head { padding: 76px 0 34px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: #F2F1FD; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6F6CA3;
}
.forums-section .page-head h1 {
  font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  margin-top: 18px; color: var(--ink);
}
.forums-section .page-head p { font-size: 17px; font-weight: 500; color: var(--text); max-width: 640px; margin: 16px auto 0; }
.bot-cta-wrap { display: flex; justify-content: center; margin: 34px 0 6px; }
.bot-cta {
  display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: var(--r-sm);
  background: var(--btn-grad); color: #FFFFFF; font-size: 16px; font-weight: 700; box-shadow: var(--shadow-btn);
  transition: transform .16s ease, filter .16s ease;
}
.bot-cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
.bot-cta .ic { font-size: 20px; line-height: 1; }
.bot-cta .arrow { transition: transform .16s ease; }
.bot-cta:hover .arrow { transform: translateX(4px); }
.forums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.forum-card {
  position: relative; display: block; padding: 22px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.forum-card:hover { transform: translateY(-3px); border-color: #C9BEF0; box-shadow: 0 16px 30px -18px rgba(46, 24, 120, .35); }
.forum-card .ic {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 14px;
}
.forum-card[data-c='accent'] .ic { background: var(--violet-soft); color: var(--violet); }
.forum-card[data-c='brand']  .ic { background: radial-gradient(circle at 35% 25%, #7A50EC 0%, #5530CF 45%, #3A16A8 100%); color: #FFFFFF; }
.forum-card[data-c='plum']   .ic { background: #F6EBFF; color: #8A2BD8; }
.forum-card[data-c='mint']   .ic { background: var(--ok-soft); color: var(--ok); }
.forum-card .label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.forum-card .v { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 4px; word-break: break-word; }
.forum-card .meta { font-size: 13px; font-weight: 500; color: var(--text); margin-top: 4px; }
.forum-card .arr { position: absolute; top: 18px; right: 20px; color: #B9B5D6; font-size: 18px; transition: color .16s ease, transform .16s ease; }
.forum-card:hover .arr { color: var(--violet); transform: translate(3px, -3px); }
body > footer { padding: 26px 0; border-top: 1px solid var(--line); background: var(--surface); text-align: center; color: var(--muted); font-size: 13.5px; font-weight: 500; }
body > footer a { color: var(--ink-2); font-weight: 600; }
body > footer a:hover { color: var(--violet); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Узкие экраны ---------- */
@media (max-width: 1500px) {
  .nav-bot .lbl { display: none; }
}
@media (max-width: 1060px) {
  .nav-links { display: none; }
}
@media (max-width: 980px) {
  .deck { grid-template-columns: 1fr; }
  /* центр 3D-сцены (≈67% ширины картинки: 521 из 777px при высоте 210) — в центр экрана.
     Через vw, а не %: проценты в background-position считаются от (блок − картинка). */
  .board { padding: 24px 20px 220px; background-size: auto 210px; background-position: calc(50vw - 521px) bottom; }
  .board::before { background: linear-gradient(180deg, rgba(250, 249, 255, .96) 0%, rgba(250, 249, 255, .9) 45%, rgba(250, 249, 255, 0) 62%); }
  .board-mid { margin-top: 26px; }
  .log, .terms { display: none; }
  .board-foot { display: none; }
  .panel { border-left: none; border-top: 1px solid var(--line); padding: 30px 20px 44px; }
}
@media (max-width: 600px) {
  .brand-bar { padding: 18px 20px; }
  .auth-card, body > .card { padding: 28px 22px; }
  .nav-bot .lbl { display: none; }
  .nav-cta .btn-secondary { display: none; }
  .wrap { padding: 0 18px; }
  body:has(> .brand-bar)::before, body:has(> .card)::before { width: 100vw; height: 300px; opacity: .55; }
}