/* =====================================================================
   payout.css — ОКНО ВЫВОДА ДЕНЕГ С БАЛАНСА
   ---------------------------------------------------------------------
   Язык взят у окна пополнения (deposit.css), а не придуман заново: это
   его зеркало, и человек, только что пополнявший баланс, должен узнать
   окно с первого взгляда. Отсюда и совпадения — тот же кружок со знаком
   рубля, тот же ряд быстрых сумм, та же жёлтая памятка, тот же список
   прошлых заявок.

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

   ЧТО ЗДЕСЬ КРАСНОЕ, А ЧТО ЗЕЛЁНОЕ. Кружок в шапке — зелёный, как у
   пополнения: зелёный на сайте значит «деньги», а не «удачно». Красным
   набрана ровно одна вещь — кнопка отмены заявки (.po-danger): это
   единственное необратимое действие окна.

   ТАЙМЕРА ЗДЕСЬ НЕТ, и это не упущение. У пополнения десять минут на
   перевод, потому что переводит игрок; здесь переводит админ, а за
   заявкой стоят уже списанные деньги — обрывать её по часам нельзя.
   Поэтому вместо полосы таймера стоит пульсирующая точка ожидания.

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

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

/* ---------- шапка со знаком рубля ---------- */
.po-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;
}

/* ---------- плашка доступного баланса ----------
   Стоит НАД полем суммы, а не под ним: это верхняя граница всего, что
   человек может здесь набрать, и узнавать её после набора поздно. */
.po-balance{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 16px;border-radius:16px;margin-bottom:14px;
  background:rgba(3,16,54,.55);border:2px solid rgba(99,224,110,.3);
}
.po-balance-label{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7FA3D6;
}
.po-balance-value{
  font-family:"MegaBoxFont","Arial Black",system-ui,sans-serif;
  font-weight:900;font-size:1.25rem;color:#fff;letter-spacing:.02em;
  -webkit-text-stroke:0.06em var(--au-ink,#150a22);paint-order:stroke fill;
}

/* ---------- быстрые суммы ----------
   Ряд кнопок над полем: набирать сумму с клавиатуры телефона — самое
   долгое действие всего окна. «Всё» стоит последней и подсвечена
   зелёным: это самое частое намерение и самая длинная для набора
   сумма (баланс с копейками). */
.po-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.po-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;
}
.po-chip:hover{color:#fff;border-color:rgba(85,184,255,.5)}
.po-chip:active{transform:translateY(3px);box-shadow:0 0 0 rgba(2,12,45,.5)}
.po-chip.is-on{
  color:#fff;background:linear-gradient(180deg,#55B8FF,#2278DE);
  border-color:rgba(0,0,0,.2);box-shadow:0 3px 0 #14508F;
}
.po-chip.is-all{color:#9BEBA6;border-color:rgba(99,224,110,.35)}
.po-chip.is-all:hover{color:#fff;border-color:rgba(99,224,110,.6)}
.po-chip.is-all.is-on{
  color:#fff;background:linear-gradient(180deg,#63E06E,#34B747);
  border-color:rgba(0,0,0,.2);box-shadow:0 3px 0 #1C7A2E;
}

/* Подзаголовок над блоком реквизитов. Форма здесь длинная, и без него
   поля телефона читались бы как продолжение суммы. */
.po-section{
  display:block;margin:20px 0 12px;padding-top:16px;
  border-top:2px solid rgba(255,255,255,.1);
}

/* Пометка «необязательно» у подписи поля. Мелко и в сторону: это
   уточнение к подписи, а не вторая подпись. */
.po-opt{
  margin-left:8px;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#7FA3D6;
}

/* ---------- крупная сумма заявки ----------
   Главное число экрана ожидания: столько списано и столько придёт.
   Шрифт сцены с обводкой — тот же, что у баланса в шапке. */
.po-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;
}
.po-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;
}

/* ---------- реквизит получателя ----------
   Номер набран моноширинным: по нему игрок проверяет, не ошибся ли он
   при вводе, а слипшиеся группы цифр — главный источник такой ошибки.
   Кнопки «Копировать» здесь нет намеренно: номер свой, копировать его
   некуда. */
.po-req{
  display:block;padding:14px 16px;border-radius:16px;margin-bottom:12px;
  background:rgba(3,16,54,.55);border:2px solid rgba(255,255,255,.14);
}
.po-req-label{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#7FA3D6;margin-bottom:4px;
}
.po-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;
}
.po-req-sub{display:block;margin-top:5px;font-size:.8rem;color:#BBD6F5}
.po-req-sub:empty{display:none}

/* ---------- памятка ----------
   Не «условия обслуживания», а те четыре вещи, на которых здесь
   ошибаются: списание вперёд, комиссия, имя получателя и окно отмены. */
.po-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;
}
.po-hints li{display:flex;gap:9px;align-items:flex-start}
.po-hints li + li{margin-top:7px}
.po-hints b{color:#FFF3C4}

/* ---------- кнопки ---------- */
.po-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.po-actions .au-submit{width:100%;margin-top:0}
.po-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;
}
.po-ghost:hover{color:#fff}
.po-ghost:active{transform:translateY(4px);box-shadow:0 0 0 rgba(2,12,45,.55)}
/* Отмена — единственное необратимое действие окна, и единственное
   красное в нём. Она же переспрашивает вторым нажатием (см. wireCancel). */
.po-danger{color:#FDA4AF;border-color:rgba(251,113,133,.3)}
.po-danger:hover{color:#fff;border-color:rgba(251,113,133,.6)}

/* Строка на месте пропавшей кнопки отмены: админ уже взял заявку.
   Молча убрать кнопку нельзя — её исчезновение читается как поломка. */
.po-locked{
  margin:2px 0 0;text-align:center;font-size:.8rem;line-height:1.5;color:#94A9C9;
}

/* ---------- строка ожидания решения ----------
   Пока админ переводит, окно опрашивает сервер. Точка слева пульсирует —
   по ней видно, что опрос идёт, а не оборвался вместе с вкладкой. Тот же
   приём и та же анимация, что у окна пополнения. */
.po-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;
}
.po-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:po-pulse 1.4s ease-out infinite;
}
@keyframes po-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)}
}

/* ---------- строка «код заявки» ----------
   Код нужен ровно в одном случае — когда что-то пошло не так и человек
   пишет в поддержку. Поэтому он и стоит мелко, под всем остальным. */
.po-code{margin-top:14px;text-align:center;font-size:.78rem;color:#7FA3D6}
.po-code b{
  font-family:'Consolas','SF Mono',ui-monospace,monospace;
  color:#BBD6F5;letter-spacing:.08em;
}

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

/* ---------- прошлые выводы ----------
   Тот самый «статус вывода», за которым в окно возвращаются, когда
   живой заявки уже нет. Показывается только когда есть что показать. */
.po-history{margin-top:22px;border-top:2px solid rgba(255,255,255,.1);padding-top:16px}
.po-history-title{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7FA3D6;margin-bottom:10px;
}
.po-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);
}
.po-hrow:last-child{border-bottom:none}
.po-hrow b{color:#fff;font-weight:800}
.po-hstate{font-size:.76rem;font-weight:700;white-space:nowrap}
.po-hstate.is-done{color:#8CE99A}
.po-hstate.is-review,.po-hstate.is-paying{color:#FFD84D}
.po-hstate.is-declined,.po-hstate.is-canceled{color:#94A9C9}

@media (max-width:520px){
  .po-backdrop .po-card{padding:26px 20px 22px}
  .po-sum{font-size:1.9rem}
  .po-balance{flex-direction:column;align-items:flex-start;gap:4px}
}

@media (prefers-reduced-motion: reduce){
  .po-dot{animation:none}
}