/* =====================================================================
   deposit.css — ОКНО ПОПОЛНЕНИЯ БАЛАНСА
   ---------------------------------------------------------------------
   Язык взят у окна входа (auth.css) и окна привязки Telegram
   (telegram.css), а не придуман заново: это такое же короткое дело
   поверх страницы. Отсюда и совпадения — тот же затемнённый фон с двумя
   пятнами, та же синяя панель с жёсткой нижней тенью, тот же заголовок
   шрифтом сцены с обводкой, те же зелёные кнопки действия.

   Каркас окна (.au-backdrop, .au-card, .au-title, .au-field, .au-input,
   .au-submit, .au-error) БЕРЁТСЯ ИЗ auth.css целиком. Здесь только то,
   чего там нет и не должно быть: плитки способов оплаты, плашка
   реквизита с кнопкой копирования, крупная сумма, таймер на оплату и
   строка ожидания решения админа.

   КРИПТА НЕ ПОЛУЧИЛА СВОЕГО ОКНА. Это тот же экран с теми же плитками и
   той же плашкой реквизита: платят по-прежнему переводом человеку, и
   отдельный «крипто-раздел» только удваивал бы правила. Своего здесь у
   неё три вещи — вкладки валюты над списком, строка пересчёта в USDT и
   красное предупреждение о сети.

   ПОЧЕМУ ТАЙМЕР — ПОЛОСА, А НЕ ЦИФЕРБЛАТ. У человека десять минут на
   перевод в чужом приложении: он уходит в банк и возвращается. Полоса
   отвечает на «сколько осталось» одним взглядом, без чтения, и краснеет
   на последней минуте — цифры рядом остаются для точности.

   Разметку строит js/deposit.ui.js — переименование класса сломает
   привязку, как и в auth.css.
   ===================================================================== */

.dp-backdrop{
  /* Высокий экран оплаты не влезает в центрированный flex и обрезался бы
     сверху — тот же случай, что у окна рефералки (см. .nm-backdrop). */
  align-items:flex-start;
}
.dp-backdrop .dp-card{width:min(470px,100%);margin:auto}

/* ---------- шапка со значком рубля ----------
   Кружок того же кроя, что у окна Telegram, но зелёный: зелёный на сайте
   значит «деньги» (баланс в шапке, кнопки действия), и окно должно
   читаться до заголовка. */
.dp-mark{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:1.7rem;color:#fff;
  background:linear-gradient(180deg,#63E06E,#34B747);
  border:3px solid var(--ink,#051D48);
  box-shadow:0 5px 0 var(--ink,#051D48), 0 16px 30px -12px rgba(2,10,45,.9);
  -webkit-text-stroke:0.08em var(--ink,#051D48);paint-order:stroke fill;
}

/* Крипта отличается от рублей ЦВЕТОМ ЗНАЧКА, а не отдельным окном:
   бирюза Tether против зелени рубля — этого хватает, чтобы с первого
   взгляда понять, какой валютой сейчас платят. */
.dp-mark.is-crypto{
  background:linear-gradient(180deg,#4FD8C4,#17A398);
  box-shadow:0 5px 0 var(--ink,#051D48), 0 16px 30px -12px rgba(2,45,42,.9);
}

/* ---------- переключатель «рубли / криптовалюта» ----------
   Две вкладки вместо шести плиток в столбик. Способов стало много (СБП,
   карта и четыре сети USDT), и одним списком они превращали форму в
   простыню, где человек ищет свою строку глазами вместо того, чтобы
   выбрать валюту одним нажатием. */
.dp-tabs{
  display:flex;gap:6px;margin:0 0 16px;padding:5px;border-radius:16px;
  background:rgba(3,16,54,.55);border:2px solid rgba(255,255,255,.1);
}
.dp-tab{
  flex:1 1 0;cursor:pointer;padding:10px 8px 11px;border-radius:12px;border:0;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.86rem;color:#8FAFD8;
  background:transparent;
  transition:color .16s ease, background .16s ease, box-shadow .16s ease;
}
.dp-tab:hover{color:#EAF4FF}
.dp-tab.is-on{
  color:#fff;background:linear-gradient(180deg,#55B8FF,#2278DE);
  box-shadow:0 3px 0 #14508F;
}

/* ---------- пересчёт в USDT ----------
   Под полем суммы, пока набирают, и крупнее — на экране оплаты, где это
   уже не подсказка, а расшифровка главного числа. */
.dp-conv{
  display:block;margin-top:7px;
  font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:700;color:#7FE3D2;
}
.dp-conv b{color:#B6F5E9;font-weight:800}
.dp-conv.is-big{
  text-align:center;margin:-10px 0 16px;font-size:.86rem;color:#BBD6F5;
}
.dp-conv.is-big b{color:#fff}

/* ---------- предупреждение о сети ----------
   Красное, и это единственное красное на экране оплаты: монета,
   отправленная не в ту сеть, не «задерживается», а исчезает — вернуть её
   не может никто, включая нас. Жёлтая памятка ниже говорит о вещах,
   которые всего лишь замедлят зачисление; здесь речь о потере денег. */
.dp-danger{
  margin:0 0 14px;padding:12px 15px;border-radius:14px;
  background:rgba(251,113,133,.1);border:2px solid rgba(251,113,133,.4);
  font-size:.82rem;line-height:1.5;color:#FFD7DE;
}
.dp-danger b{color:#fff}

/* ---------- быстрые суммы ----------
   Ряд «частых» кнопок над полем. Он тут не ради красоты: набирать сумму
   с клавиатуры телефона — самое долгое действие всего окна, а платят
   обычно круглым. */
.dp-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dp-chip{
  flex:1 1 auto;min-width:74px;cursor:pointer;
  padding:10px 12px 12px;border-radius:13px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.88rem;color:#BBD6F5;
  background:rgba(3,16,54,.5);border:2px solid rgba(255,255,255,.12);
  box-shadow:0 3px 0 rgba(2,12,45,.5);
  transition:color .16s ease, border-color .16s ease, background .16s ease,
             transform .09s ease, box-shadow .09s ease;
}
.dp-chip:hover{color:#fff;border-color:rgba(85,184,255,.5)}
.dp-chip:active{transform:translateY(3px);box-shadow:0 0 0 rgba(2,12,45,.5)}
.dp-chip.is-on{
  color:#fff;background:linear-gradient(180deg,#55B8FF,#2278DE);
  border-color:rgba(0,0,0,.2);box-shadow:0 3px 0 #14508F;
}

/* ---------- плитки способов оплаты ----------
   Два способа — две строки-плитки с радиокнопкой слева. Строкой, а не
   квадратом: у каждой есть подпись («перевод по номеру телефона»), и в
   квадрате она не помещается, а без неё СБП и карта различаются только
   словом. */
.dp-methods{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.dp-method{
  display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;text-align:left;
  padding:13px 15px;border-radius:15px;
  background:rgba(3,16,54,.45);border:2px solid rgba(255,255,255,.12);
  color:#BBD6F5;font-family:'Manrope',sans-serif;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.dp-method:hover{border-color:rgba(85,184,255,.45);color:#EAF4FF}
.dp-method.is-on{
  background:rgba(85,184,255,.14);border-color:rgba(85,184,255,.6);color:#fff;
}
.dp-method-dot{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);background:rgba(3,16,54,.6);
  display:grid;place-items:center;
}
.dp-method.is-on .dp-method-dot{border-color:#8CD2FF}
.dp-method-dot::after{
  content:"";width:10px;height:10px;border-radius:50%;background:#55B8FF;
  transform:scale(0);transition:transform .18s cubic-bezier(.2,.9,.25,1.4);
}
.dp-method.is-on .dp-method-dot::after{transform:scale(1)}
.dp-method-body{min-width:0;flex:1}
.dp-method-title{display:block;font-weight:800;font-size:.98rem;color:#fff}
.dp-method-hint{display:block;font-size:.78rem;margin-top:2px}

/* ---------- строка «способа сейчас нет» ----------
   Выключенный в настройках способ просто пропадает из списка, и человек,
   который шёл платить именно по СБП, видит на его месте пустоту. Плашка
   объясняет пропажу словами — жёлтая, как памятка на экране оплаты: это
   не отказ, а предупреждение, и красный тут был бы враньём. */
.dp-warn{
  margin:-8px 0 18px;padding:11px 14px;border-radius:14px;
  background:rgba(255,228,92,.08);border:2px solid rgba(255,228,92,.28);
  font-size:.82rem;line-height:1.5;color:#F6E6B0;
}

/* ---------- крупная сумма на экране оплаты ----------
   Главное число окна: столько нужно перевести, и ошибиться в нём нельзя.
   Шрифт сцены с обводкой — тот же, что у баланса в шапке. */
.dp-sum{
  text-align:center;margin-bottom:18px;
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:2.3rem;line-height:1;letter-spacing:.03em;color:#fff;
  -webkit-text-stroke:0.09em var(--au-ink,#150a22);paint-order:stroke fill;
}
.dp-sum small{
  display:block;margin-top:8px;
  font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#BBD6F5;
  -webkit-text-stroke:0;
}

/* ---------- плашка реквизита ----------
   Номер, кнопка «Копировать» и подпись под ними. Номер набран моноширинным
   с разрядкой: его переписывают в чужое приложение цифра за цифрой, и
   слипшиеся группы — главный источник ошибки. */
.dp-req{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-radius:16px;margin-bottom:12px;
  background:rgba(3,16,54,.55);border:2px solid rgba(255,255,255,.14);
}
.dp-req-body{flex:1;min-width:0}
.dp-req-label{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7FA3D6;margin-bottom:4px;
}
.dp-req-value{
  display:block;font-family:'Consolas','SF Mono',ui-monospace,monospace;
  font-size:1.12rem;font-weight:700;color:#fff;letter-spacing:.06em;
  word-break:break-all;
}
/* Адрес кошелька — те же 34–48 знаков без пробелов, что и номер карты,
   только вчетверо длиннее. Крупный шрифт номера карты на нём переносится
   в четыре строки и лезет из карточки, поэтому адрес набирается мельче и
   плотнее: читают его глазами разве что по первым и последним знакам —
   переносят кнопкой «Копировать». */
.dp-req-value.is-addr{font-size:.86rem;letter-spacing:.02em;line-height:1.45}
.dp-req-sub{display:block;margin-top:5px;font-size:.8rem;color:#BBD6F5}
.dp-copy{
  flex:0 0 auto;cursor:pointer;border-radius:12px;padding:10px 14px 12px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.8rem;color:#fff;
  background:linear-gradient(180deg,#55B8FF,#2278DE);
  border:2px solid rgba(0,0,0,.18);box-shadow:0 3px 0 #14508F;
  transition:filter .16s ease, transform .09s ease, box-shadow .09s ease;
}
.dp-copy:hover{filter:brightness(1.1)}
.dp-copy:active{transform:translateY(3px);box-shadow:0 0 0 #14508F}
.dp-copy.is-done{background:linear-gradient(180deg,#63E06E,#34B747);box-shadow:0 3px 0 #1C7A2E}

/* ---------- таймер ----------
   Полоса тает слева направо, число рядом. Красный порог — минута:
   к этому моменту перевод либо уже сделан, либо не будет сделан вовсе. */
.dp-timer{margin:16px 0 18px}
.dp-timer-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.8rem;font-weight:700;color:#BBD6F5;margin-bottom:8px;
}
.dp-timer-val{
  font-family:'Consolas','SF Mono',ui-monospace,monospace;
  font-size:1.05rem;font-weight:700;color:#fff;
}
.dp-timer-bar{
  height:8px;border-radius:99px;overflow:hidden;
  background:rgba(3,16,54,.7);border:2px solid rgba(255,255,255,.1);
}
.dp-timer-fill{
  height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#63E06E,#34B747);
  transition:width 1s linear, background .4s ease;
}
.dp-timer.is-low .dp-timer-fill{background:linear-gradient(90deg,#FBBF24,#F97316)}
.dp-timer.is-out .dp-timer-fill{background:linear-gradient(90deg,#FB7185,#E11D48)}
.dp-timer.is-out .dp-timer-val{color:#FDA4AF}

/* ---------- памятка ----------
   Две строки о том, что важно сделать правильно. Не «условия
   обслуживания», а именно то, на чём ошибаются: сумма до копейки и
   обычный перевод физлицу. */
.dp-hints{
  list-style:none;margin:0 0 18px;padding:14px 16px;border-radius:16px;
  background:rgba(255,228,92,.08);border:2px solid rgba(255,228,92,.28);
  font-size:.82rem;line-height:1.55;color:#F6E6B0;
}
.dp-hints li{display:flex;gap:9px;align-items:flex-start}
.dp-hints li + li{margin-top:7px}
.dp-hints b{color:#FFF3C4}

/* ---------- кнопки ---------- */
.dp-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.dp-actions .au-submit{width:100%;margin-top:0}
.dp-ghost{
  display:block;width:100%;cursor:pointer;text-align:center;text-decoration:none;
  border-radius:14px;padding:12px 18px 14px;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:.86rem;color:#BBD6F5;
  background:rgba(3,16,54,.5);border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 0 rgba(2,12,45,.55);
  transition:color .16s ease, transform .09s ease, box-shadow .09s ease;
}
.dp-ghost:hover{color:#fff}
.dp-ghost:active{transform:translateY(4px);box-shadow:0 0 0 rgba(2,12,45,.55)}

/* ---------- строка ожидания решения ----------
   Пока админ смотрит выписку, окно опрашивает сервер. Точка слева
   пульсирует — по ней видно, что опрос идёт, а не оборвался вместе с
   вкладкой. Тот же приём и та же анимация, что у окна Telegram. */
.dp-wait{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:18px 0 4px;min-height:22px;
  font-size:.84rem;font-weight:700;color:#BBD6F5;text-align:center;
}
.dp-dot{
  flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:#55B8FF;box-shadow:0 0 0 0 rgba(85,184,255,.55);
  animation:dp-pulse 1.4s ease-out infinite;
}
@keyframes dp-pulse{
  0%  {box-shadow:0 0 0 0 rgba(85,184,255,.55)}
  70% {box-shadow:0 0 0 10px rgba(85,184,255,0)}
  100%{box-shadow:0 0 0 0 rgba(85,184,255,0)}
}
.dp-wait.is-ok{color:#B9F79A}
.dp-wait.is-ok .dp-dot{background:#63E06E;animation:none}
.dp-wait.is-error{color:#FDA4AF}
.dp-wait.is-error .dp-dot{background:#FF6B6B;animation:none}

/* ---------- экран отказа ----------
   Тот же макет, что у экрана успеха в auth.css, но красный кружок:
   статус должен читаться до текста. */
.dp-fail .au-success-ic{
  background:linear-gradient(180deg,#FB7185,#E11D48);
  box-shadow:0 5px 0 #9F1239, 0 0 34px rgba(225,29,72,.4);
}

/* Список прошлых заявок. Показывается только когда есть что показать —
   пустая «история пополнений» была бы шумом в окне, где и так есть что
   читать. */
.dp-history{margin-top:22px;border-top:2px solid rgba(255,255,255,.1);padding-top:16px}
.dp-history-title{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7FA3D6;margin-bottom:10px;
}
.dp-hrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;font-size:.84rem;color:#BBD6F5;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dp-hrow:last-child{border-bottom:none}
.dp-hrow b{color:#fff;font-weight:800}
.dp-hstate{font-size:.76rem;font-weight:700;white-space:nowrap}
.dp-hstate.is-approved{color:#8CE99A}
.dp-hstate.is-review{color:#FFD84D}
.dp-hstate.is-declined,.dp-hstate.is-expired,.dp-hstate.is-canceled{color:#94A9C9}

@media (max-width:520px){
  .dp-backdrop .dp-card{padding:26px 20px 22px}
  .dp-sum{font-size:1.9rem}
  .dp-req{gap:10px}
  .dp-copy{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .dp-dot{animation:none}
  .dp-timer-fill{transition:none}
  .dp-method-dot::after{transition:none}
}