/*
 * Кабинет партнёра.
 *
 * Те же цвета и гарнитуры, что у витрины, но без её картинок и анимаций:
 * сюда заходят посмотреть цифры, а не любоваться. Верстаем от узкого экрана —
 * партнёр смотрит баланс с телефона чаще, чем с компьютера.
 */
:root {
  color-scheme: light;

  --paper: #fdf9ef;
  --night: #06133f;
  --ultra: #1b45ff;
  --sun: #ffc24d;
  --grass: #0fa36b;
  --coral: #ff5a3c;

  --muted: #5a6486;
  --line: rgba(6, 19, 63, 0.13);
  --line-strong: rgba(6, 19, 63, 0.22);

  --r-sm: 11px;
  --r-md: 16px;
  --pad: 16px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/*
 * `hidden` должен побеждать любой наш `display`.
 *
 * Без этого правила поле имени, спрятанное атрибутом, всё равно показывалось:
 * `.field { display: block }` перебивает встроенный `[hidden] { display: none }`,
 * потому что у класса вес выше. На экране входа это выглядело как лишний
 * вопрос «как к вам обращаться» тому, кто уже зарегистрирован.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--night);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--pad);
  padding-bottom: 40px;
}

h1 {
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 4px 0 8px;
}

h2 {
  font-size: 16px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.lead {
  color: var(--muted);
  margin: 0 0 18px;
}

.hint {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 10px;
}

/* ── шапка ─────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mark {
  font-weight: 800;
  letter-spacing: -0.035em;
}

.mark span {
  font-weight: 400;
  opacity: 0.55;
}

.who {
  margin-left: auto;
  color: var(--muted);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── кнопки и поля ─────────────────────────────────────────────────── */
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-weight: 700;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--night);
  outline-offset: 2px;
}

.primary {
  background: var(--ultra);
  color: #fff;
}

.ghost {
  background: transparent;
  color: var(--ultra);
  border: 1.5px solid var(--ultra);
}

.sm {
  padding: 7px 11px;
  font-size: 13px;
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

.field {
  display: block;
  margin-bottom: 12px;
}

.field > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

input,
textarea {
  font: inherit;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--night);
  resize: vertical;
}

.tabs {
  display: flex;
  gap: 6px;
  background: rgba(6, 19, 63, 0.05);
  border-radius: 99px;
  padding: 4px;
  margin-bottom: 16px;
}

.tabs button {
  flex: 1;
  border-radius: 99px;
  padding: 9px;
  font-size: 14px;
  color: var(--muted);
  background: none;
}

.tabs button.on {
  background: #fff;
  color: var(--night);
  box-shadow: 0 1px 3px rgba(6, 19, 63, 0.1);
}

.err {
  color: var(--coral);
  font-size: 13.5px;
  font-weight: 600;
  margin: 0 0 10px;
}

.msg {
  font-size: 13.5px;
  font-weight: 600;
  margin: 10px 0 0;
}

.msg.bad {
  color: var(--coral);
}

.msg.good {
  color: var(--grass);
}

/* ── карточки ──────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.row button {
  flex: 1 1 180px;
}

.copy {
  display: flex;
  gap: 8px;
}

.copy input {
  font-size: 14px;
}

.copy button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── цифры ─────────────────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.metric {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}

/*
 * Главная цифра во всю ширину и на тёмном: партнёр заходит узнать ровно её.
 * Остальное — контекст, и выравнивать его с ней по весу значит заставить
 * искать глазами то, за чем пришли.
 */
.metric.big {
  grid-column: 1 / -1;
  background: var(--night);
  border-color: var(--night);
  color: #fff;
}

.metric .k {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.metric.big .k {
  color: rgba(255, 255, 255, 0.72);
}

.metric b {
  display: block;
  font-size: 21px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.metric.big b {
  font-size: 32px;
}

.metric .s {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.metric.big .s {
  color: var(--sun);
}

/* ── списки ────────────────────────────────────────────────────────── */
.line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

.line:first-child {
  border-top: 0;
}

.line .when {
  color: var(--muted);
  font-size: 13px;
  flex: 0 0 auto;
}

.line .what {
  color: var(--muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line .sum {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.line.off .sum {
  text-decoration: line-through;
  color: var(--muted);
}

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill.wait {
  background: rgba(255, 194, 77, 0.25);
  color: #7a5300;
}

.pill.paid {
  background: rgba(15, 163, 107, 0.16);
  color: #0b6b47;
}

.pill.no {
  background: rgba(255, 90, 60, 0.16);
  color: #a32b14;
}

.terms ul {
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}

.terms li {
  margin-bottom: 5px;
}

.foot {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin-top: 20px;
}

.foot a {
  color: var(--ultra);
}

/*
 * В один столбец — только на совсем узких экранах.
 *
 * Порог сначала стоял на 380px, и на обычном телефоне 375px шесть плиток
 * вытягивались в колонку длиной в два экрана: чтобы увидеть «пришло по
 * ссылке», приходилось листать. Рядом они читаются нормально.
 */
@media (max-width: 330px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .copy {
    flex-direction: column;
  }
}

/* ── фон экрана входа ──────────────────────────────────────────────────
 *
 * Расплавленный металл на WebGL. Тёмный и насыщенный, поэтому весь экран
 * входа переводится в светлый текст: тёмно-синий по умолчанию на нём просто
 * не читается, а красивый фон, ради которого нельзя прочитать подпись к полю,
 * — это испорченный экран, а не украшенный.
 */
.gate-bg {
  position: fixed;
  inset: 0;
  /* Ноль, а не −1: под нулём холст уезжает за фон body и пропадает целиком.
     Содержимое поднимаем над ним своим z-index, а не топим фон. */
  z-index: 0;
  /* Запасная заливка: видна, если WebGL недоступен или шейдер не собрался.
     Форма при этом работает как работала. */
  background: radial-gradient(120% 100% at 50% 0%, #24135e 0%, #0a0a1f 55%, #05050f 100%);
}

.gate-bg .molten {
  width: 100%;
  height: 100%;
  display: block;
}

body.on-gate {
  background: #05050f;
  color: #fff;
}

/*
 * Вход — одна карточка по центру экрана.
 *
 * Раньше форма прижималась к верху и на широком мониторе висела в углу
 * тёмным прямоугольником: смотреть было не на что, кроме пустоты под ней.
 * Здесь всё содержимое — знак, карточка, подпись — собрано в один столбец
 * и стоит по центру.
 */
body.on-gate .wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 28px var(--pad);
}

/* Знак над карточкой, а не в углу: на экране входа он часть композиции. */
body.on-gate .top {
  margin: 0 0 18px;
  justify-content: center;
}

body.on-gate .mark {
  font-size: 19px;
}

/*
 * Затемнение под содержимым: без него светлый текст ложится на светлые
 * прожилки и пропадает ровно там, где рисунок ярче всего.
 *
 * Ширина ограничена: строка длиной в монитор читается плохо, а форма входа
 * из двух полей, растянутая на 760 пикселей, выглядит как таблица.
 */
body.on-gate #gate {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 30px 26px 28px;
  border-radius: 22px;
  background: rgba(6, 9, 30, 0.62);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Тень наружу и светлая линия по верхней кромке: карточка приподнимается
     над фоном, а не лежит на нём наклейкой. */
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.on-gate #gate h1 {
  font-size: 25px;
  margin: 0 0 10px;
}

body.on-gate .lead {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
}

body.on-gate .tabs {
  margin-bottom: 20px;
}

body.on-gate .field {
  margin-bottom: 14px;
}

/* Кнопка во всю ширину: узкая слева выглядела черновиком, а не действием,
   ради которого открыли страницу. */
body.on-gate #authGo {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  font-size: 15.5px;
  box-shadow: 0 14px 30px -16px rgba(27, 69, 255, 0.95);
}

body.on-gate .top,
body.on-gate .foot {
  position: relative;
  z-index: 1;
}


body.on-gate .mark,
body.on-gate h1 {
  color: #fff;
}

body.on-gate .mark span {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

body.on-gate .lead,
body.on-gate .field > span,
body.on-gate .foot {
  color: rgba(255, 255, 255, 0.72);
}

body.on-gate .tabs {
  background: rgba(255, 255, 255, 0.1);
}

body.on-gate .tabs button {
  color: rgba(255, 255, 255, 0.66);
}

body.on-gate .tabs button.on {
  background: rgba(255, 255, 255, 0.94);
  color: var(--night);
}

/* Поля оставляем светлыми: тёмное поле на тёмном фоне сливается, и человек
   не понимает, куда нажимать. */
body.on-gate input {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  border-radius: 13px;
  padding: 14px 15px;
}

body.on-gate input::placeholder {
  color: #8b93ad;
}

body.on-gate input:focus-visible,
body.on-gate button:focus-visible {
  outline-color: #fff;
}

body.on-gate .foot a {
  color: #9db4ff;
}

/* Движение выключено — оставляем один кадр, а не мигающий фон. */
@media (prefers-reduced-motion: reduce) {
  .gate-bg .molten {
    opacity: 0.9;
  }
}

/* Подпись внизу лежит поверх фона, а не внутри карточки, и на светлых
   прожилках пропадала. Своя подложка дешевле, чем затемнять весь фон. */
body.on-gate .foot {
  /* Ширина по содержимому, чтобы подложка обхватывала текст, а не строку
     целиком; margin-inline: auto возвращает её на середину. */
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 15px;
  border-radius: 99px;
  background: rgba(6, 9, 30, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}