*{box-sizing:border-box}
:root{
  --bg:#0b0b0b; --text:#fff; --muted:#a1a1aa;
  --brand:#2563eb;              /* синий */
  --ok:#22c55e;                 /* зелёный */
  --note:#facc15;               /* жёлтый для "Внимание" */
  --border:rgba(255,255,255,.10);
  --panel:rgba(255,255,255,.05);
}

html,body{height:100%}
body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.wrapper{width:100%; max-width:460px; margin:0 auto; padding:24px 16px 64px; text-align:center}

.logo{width:144px; height:144px; margin:0 auto 24px; display:block}
h1{font-size:28px; line-height:1.3; font-weight:800; margin:0 0 22px}
h1 span{color:var(--brand)}
.muted{color:var(--muted); margin:0 0 18px}

.steps{text-align:left; margin:12px 0 24px}
.step{display:flex; align-items:flex-start; gap:10px; font-size:16px; line-height:1.4; margin-bottom:18px}
.circle{
  background:var(--brand); color:#fff; font-weight:700;
  width:26px; height:26px; border-radius:50%; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.link-style{ color:#3b82f6 }

.id-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 8px}
input[type="number"], input[type="text"]{
  flex:1 1 260px; min-width:260px; max-width:100%;
  padding:14px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-size:16px; outline:none;
  appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]:focus, input[type="text"]:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25) }

/* Кнопки */
.btn{
  display:inline-block; width:100%; padding:15px; margin:10px 0;
  border-radius:12px; font-size:16px; font-weight:800; text-decoration:none;
  cursor:pointer; user-select:none; transition:transform .08s ease, filter .15s ease;
  border:0; color:#fff; background:var(--brand); /* по умолчанию — СИНЯЯ, как "Найти" */
}
.btn:active{ transform:translateY(1px) }
.btn[aria-disabled="true"]{ filter:grayscale(.6) brightness(.85); pointer-events:none }

/* Варианты как в базе */
.btn.primary { background:var(--ok); color:#fff }                      /* зелёная заливка */
.btn.outline { background:transparent; color:#fff; border:2px solid var(--ok) } /* зелёная рамка, белый текст */

/* Контейнер с кнопками */
.actions{ display:none; }
.actions.show{ display:block; animation:reveal .35s ease forwards }
@keyframes reveal{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Сообщения */
.error{ color:#f87171; margin-top:8px; }

/* Маленькое уведомление */
.note{ display:none; color:var(--note); font-size:13px; margin-top:6px }
.note.show{ display:block; animation:reveal .35s ease forwards }

/* Фокус для пульта */
:focus-visible{ outline:3px solid rgba(59,130,246,.6); outline-offset:2px; border-radius:12px }

/* Адаптив */
@media (max-width:480px){
  .wrapper{ padding-top:12px }
  h1{ font-size:24px; margin-bottom:20px }
  .step{ font-size:15px }
  .btn{ font-size:15px; padding:14px }
}