:root{
  color-scheme: dark;

  --bg:#000000;        /* фон сайта */
  --card:#0D0D0D;      /* фон основных блоков */
  --card-2:#151515;
  --input:#151515;     /* поля ввода */
  --input-focus:#1C1C1C;
  /* Границы и серые нейтральные, без синевы: на чистом чёрном
     прежние синеватые оттенки выглядели инородно. */
  --line:#212121;
  --line-2:#333333;
  --focus:#6E6E6E;       /* обводка фокуса */
  --focus-line:#5C5C5C;  /* линия под полем */

  --text:#ECECEC;
  --text-2:#9B9B9B;
  --text-3:#6A6A6A;

  --accent:#FF3D63;
  --accent-ink:#20060D;
  --accent-soft:#2B1119;

  --ok:#2DC7B6;
  --warn:#E0A24E;
  --warn-soft:#251C10;
  --bad:#FF6E60;

  --r:14px;
  --ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ui); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

.page{max-width:680px; margin:0 auto; padding:40px 18px 64px; display:flex; flex-direction:column; gap:16px}

/* ---------- шапка ---------- */
.top{text-align:center; padding:8px 4px 6px}
.top h1{
  margin:0; font-size:clamp(28px,7vw,38px); font-weight:800;
  letter-spacing:-.035em; text-wrap:balance;
}
.top p{margin:10px auto 0; color:var(--text-2); font-size:14px; max-width:44ch; text-wrap:balance}

/* ---------- карточки ---------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:22px;
}
.card.slim{padding:0; overflow:hidden}
.card h2{margin:0; font-size:19px; font-weight:800; letter-spacing:-.025em}
.card .sub{margin:5px 0 16px; color:var(--text-2); font-size:13px}

/* ---------- поля ---------- */
form{display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:7px}
.field label,.field .label{font-size:13.5px; font-weight:700; letter-spacing:-.01em}
.field input{
  width:100%; color:var(--text);
  border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; font-family:var(--mono); font-size:13.5px;

  /* Линия под полем — это фоновый слой-градиент: его ширину
     можно анимировать, в отличие от настоящей рамки. */
  background-color:var(--input);
  background-image:linear-gradient(var(--focus-line), var(--focus-line));
  background-repeat:no-repeat;
  background-position:50% calc(100% - 1px);
  background-size:0 2px;

  transition:border-color .2s ease, background-color .15s ease,
             background-size .32s cubic-bezier(.22,1,.36,1);
}
.field input::placeholder{color:var(--text-3)}
.field input:hover{border-color:var(--line-2)}
.field input:focus{
  border-color:var(--line-2); outline:none;
  background-color:var(--input-focus);
  /* чуть уже поля, чтобы линия не упиралась в скругления */
  background-size:calc(100% - 22px) 2px;
}
.field input[aria-invalid="true"]{border-color:var(--bad)}
.field input[type=number]{appearance:textfield}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button{appearance:none; margin:0}
.note{margin:0; font-size:12px; color:var(--text-3)}
.err{margin:0; font-size:12px; color:var(--bad); font-weight:600}

/* Результат автоопределения просмотров */
.resolve{
  margin:0; display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600;
}
.resolve.busy{color:var(--text-2)}
.resolve.ok{color:var(--ok)}
.resolve.warn{color:var(--warn)}
.resolve.no{color:var(--bad)}
.resolve b{font-family:var(--mono); font-variant-numeric:tabular-nums}
/* Крутилка на время запроса */
.resolve.busy::before{
  content:""; width:12px; height:12px; flex:none; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--text-2);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.resolve.busy::before{animation:none}}

/* Поле только для чтения, когда число определено сервером */
.field input[readonly]{
  color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, var(--line));
  background-color:color-mix(in srgb, var(--ok) 8%, var(--bg));
  background-size:0 2px;
  cursor:default;
}

/* ---------- обязательные условия ---------- */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.must{
  position:relative; overflow:hidden;
  border-radius:14px; padding:18px 20px;
  /* Розово-белый: насыщенная розовая база плюс мягкое белое свечение сверху слева */
  background:
    radial-gradient(115% 88% at 26% 10%, rgba(255,255,255,.36), rgba(255,255,255,0) 58%),
    linear-gradient(152deg, #FF5B92 0%, #FB2470 48%, #E30B5E 100%);
  color:#fff;
  box-shadow:0 12px 30px -16px rgba(227,11,94,.75);
}
.must h2{
  margin:0 0 14px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.82);
}
.must-rows{display:flex; flex-direction:column; gap:12px}
.must-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.must-row p{
  margin:0; flex:1 1 240px; min-width:0;
  font-size:13px; line-height:1.45; color:rgba(255,255,255,.92);
}

.must-chip{
  all:unset; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 13px; border-radius:10px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4);
  font-family:var(--mono); font-size:14.5px; font-weight:700;
  color:#fff; letter-spacing:-.01em;
  transition:background .15s, color .15s, border-color .15s;
}
.must-chip:hover{background:rgba(255,255,255,.3)}
.must-chip:focus-visible{outline:2px solid #fff; outline-offset:2px}
.must-chip .ico{width:15px; height:15px; flex:none; opacity:.75}
/* Скопировано — плашка выворачивается в белое */
.must-chip.done{background:#fff; color:#D9095A; border-color:#fff}
.must-chip.done .ico{opacity:1}

@media (max-width:430px){
  .must{padding:16px}
  .must-chip{font-size:13.5px; padding:8px 11px}
  .must-row p{font-size:12.5px; flex-basis:100%}
}

/* ---------- способы выплаты ---------- */
/* Три способа в ряд на десктопе, два на телефоне, один на совсем узком */
.methods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
@media (max-width:560px){.methods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.methods{grid-template-columns:1fr}}

/* Валют сервера всего две — раскладываем их пополам, без пустой ячейки */
.methods-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:340px){.methods-2{grid-template-columns:1fr}}
/* Плитки повыше: этот способ выплаты нам выгоднее, и он должен читаться первым */
.methods-2 .method{padding:14px 12px; font-size:15px}
.methods-2 .method .ic{width:30px; height:30px}

.method{
  all:unset; cursor:pointer; position:relative;
  /* Контент по центру плитки: иначе на широкой плитке справа
     остаётся заметная пустота. */
  display:flex; align-items:center; justify-content:center;
  gap:9px; min-width:0;
  padding:11px 12px; border:1px solid var(--line); border-radius:11px;
  background:var(--input); font-size:14px; font-weight:600;
  transition:border-color .15s, background .15s;
}
.method:hover{border-color:var(--line-2); background:var(--card-2)}
.method[aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft)}

/* Иконки приходят из разных источников и в разных пропорциях,
   поэтому каждая живёт в одинаковом боксе и вписывается в него. */
.method .ic{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
}
.method .ic img,
.method .ic svg{
  width:100%; height:100%; object-fit:contain; display:block;
}
.method .name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:-.01em;
}
/* Курс идёт сразу за названием, а не прижимается к краю:
   иначе на узком экране «Золото» съедается многоточием. */
.method .x{
  flex:none; margin-left:1px;
  font-family:var(--mono); font-size:10px; font-weight:700;
  color:var(--warn); background:var(--warn-soft);
  border:1px solid var(--warn); padding:1px 5px; border-radius:20px;
}
.method .rec{
  position:absolute; top:-8px; right:8px;
  font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink);
  padding:2px 6px; border-radius:20px; line-height:1.25; white-space:nowrap;
}

/* Узкий экран. Блок стоит ПОСЛЕ всех правил .method*, иначе базовые
   селекторы той же специфичности перебивают его обратно. */
@media (max-width:430px){
  .method{padding:9px 10px; gap:7px; font-size:13px}
  .method .ic{width:22px; height:22px}
  .method .x{font-size:9px; padding:1px 4px; margin-left:0}
  .method .rec{font-size:8.5px; padding:1.5px 5px; right:6px}
  /* Специфичность .methods-2 .method .ic выше, чем у правила выше,
     поэтому валюты сервера ужимаем отдельно — иначе останутся крупными. */
  .methods-2 .method{padding:11px 10px; font-size:13.5px}
  .methods-2 .method .ic{width:26px; height:26px}
}

/* Заголовки групп способов выплаты */
.group-head{
  display:flex; align-items:center; gap:10px; margin:6px 0 0;
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-3);
}
.group-head::after{content:""; flex:1; height:1px; background:var(--line)}
.group-head.first{margin-top:0}
.group-hint{margin:-2px 0 2px; font-size:11.5px; color:var(--ok)}

/* ---------- калькулятор ---------- */
.payout{
  background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:15px 17px;
}
.payout .cap{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-3);
}
.payout .sum{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:7px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.payout .sum b{font-size:24px; font-weight:700; letter-spacing:-.04em}
.payout .sum span{font-size:14px; color:var(--text-2)}
.payout .sum .tilde{color:var(--text-3); padding:0 2px}
.payout #p-amount{color:var(--ok); transition:color .15s}
.payout.zero #p-amount{color:var(--text-3)}
.payout-note{margin:8px 0 0; font-size:12px; color:var(--text-3)}
.payout-note.up{color:var(--warn)}

/* ---------- кнопка ---------- */
.submit{
  all:unset; cursor:pointer; text-align:center; padding:14px;
  background:var(--accent); color:var(--accent-ink);
  border-radius:11px; font-size:15px; font-weight:800; letter-spacing:-.01em;
  transition:filter .15s, opacity .15s;
}
.submit:hover{filter:brightness(1.08)}
.submit[disabled]{opacity:.45; cursor:not-allowed; filter:none}
.form-msg{
  margin:0; padding:11px 13px; border-radius:10px;
  font-size:13px; font-weight:600; text-align:center;
}
.form-msg.ok{background:#0E2B28; color:var(--ok)}
.form-msg.no{background:#2C1512; color:var(--bad)}

/* ---------- требования ---------- */
details summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  padding:16px 20px; font-size:14px; font-weight:700; color:var(--text);
}
details summary::-webkit-details-marker{display:none}
details summary svg{margin-left:auto; color:var(--text-3); transition:transform .18s}
details[open] summary svg{transform:rotate(90deg)}
.req{padding:0 20px 20px; border-top:1px solid var(--line); margin-top:-2px; padding-top:16px}
.req h3{margin:0 0 8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3)}
.req h3+ul{margin-bottom:18px}
.req ul{margin:0; padding-left:18px; color:var(--text-2); font-size:13.5px}
.req li+li{margin-top:5px}
.req b{color:var(--text); font-family:var(--mono); font-weight:600}
.req .warn{
  margin:4px 0 0; padding:11px 13px; font-size:12.5px; color:var(--warn);
  background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:8px;
}

/* ---------- тарифы ---------- */
.tariffs{width:100%; border-collapse:collapse; font-family:var(--mono); font-variant-numeric:tabular-nums}
.tariffs td{padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.tariffs tr:last-child td{border-bottom:none}
.tariffs td:last-child{text-align:right; font-weight:700; white-space:nowrap}
.tariffs td:first-child{color:var(--text-2)}
.tariffs tr.hit td{color:var(--ok)}
.tariffs tr.hit td:first-child{color:var(--ok)}
.tariff-note{
  margin:14px 0 0; padding:10px 12px; font-size:12.5px; color:var(--warn);
  background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:8px;
}

.foot{
  text-align:center; color:var(--text-3); font-size:12.5px;
  padding:6px 10px; text-wrap:balance;
}

/* ---------- плавающая реклама ---------- */
/* Позицию задаёт JS через left/top: блок перетаскивается и прилипает
   к ближайшему углу. touch-action:none — иначе на телефоне жест
   перехватит прокрутка страницы и перетащить не выйдет. */
.promo{
  /* Угол задаётся классом .at-*, а не пиксельными координатами:
     right/bottom браузер считает от контейнера БЕЗ полосы прокрутки,
     а window.innerWidth её включает — отсюда брались лишние 14px. */
  position:fixed; z-index:40;
  width:280px; border-radius:14px; overflow:hidden;
  background:#100C24;
  border:1px solid rgba(150,120,255,.45);
  box-shadow:0 16px 40px -18px rgba(40,10,120,.95), 0 0 0 1px rgba(0,0,0,.4);
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
  cursor:grab;
}
/* Хватать можно за всю карточку, включая афишу */
.promo-link,.promo-link img,.promo-bar{-webkit-user-drag:none; cursor:inherit}
.promo.at-tl{left:14px;  top:14px;    right:auto;  bottom:auto}
.promo.at-tr{right:14px; top:14px;    left:auto;   bottom:auto}
.promo.at-bl{left:14px;  bottom:14px; right:auto;  top:auto}
.promo.at-br{right:14px; bottom:14px; left:auto;   top:auto}

/* Перетаскивание и «докатывание» идут через transform — он не трогает
   раскладку и анимируется плавно, в отличие от left/top с auto. */
.promo.dragging{cursor:grabbing; transition:none}
.promo.settling{transition:transform .38s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.promo.settling{transition:none}}

.promo-bar{
  display:flex; align-items:center; gap:7px;
  padding:6px 6px 6px 9px;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* Полоски-«ручка»: подсказывают, что блок можно таскать */
.promo-grip{display:flex; flex-direction:column; gap:2px; flex:none}
.promo-grip i{display:block; width:11px; height:1.5px; border-radius:1px; background:rgba(255,255,255,.35)}
.promo-tag{
  font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.promo-close{
  all:unset; cursor:pointer; margin-left:auto; flex:none;
  width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  color:rgba(255,255,255,.55); transition:background .15s, color .15s;
}
.promo-close svg{width:12px; height:12px}
.promo-close:hover{background:rgba(255,255,255,.14); color:#fff}
.promo-close:focus-visible{outline:2px solid #fff; outline-offset:1px}

.promo-link{display:block; line-height:0}
.promo-link img{width:100%; height:auto; display:block; pointer-events:none}

@media (max-width:520px){
  .promo{width:200px}
}

/* Если блок стоит в нижнем углу — освобождаем низ страницы,
   чтобы футер не оказался под ним навсегда. */
body.promo-bottom .page{padding-bottom:210px}