/* Детектор: страница обязана быть читаемой на записи экрана —
   крупные шрифты, высокий контраст, большие кнопки. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  color: #111418;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

#app { max-width: 560px; margin: 0 auto; padding: 1rem 1rem 3rem; }

.screen { padding-top: 2.5rem; }
.hidden { display: none !important; }

.card { width: 100%; }

.deal {
  font-size: 1.05rem; color: #4a5158; margin-bottom: 1rem;
}
.deal b { color: #111418; }

.clock {
  font-size: 1.6rem; font-weight: 600; color: #3a4046; margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.code-label {
  font-size: 1rem; color: #4a5158; text-transform: uppercase; letter-spacing: .08em;
}
.code {
  font-size: clamp(2.6rem, 12vw, 4.2rem);
  font-weight: 800;
  letter-spacing: .04em;
  margin: .35rem 0 .3rem;
  color: #0b3d91;
  font-variant-numeric: tabular-nums;
  transition: opacity .18s ease;
}
.code.rotating { opacity: .25; }
.code-countdown {
  font-size: .95rem; color: #6a7178; margin-bottom: 1.4rem;
  font-variant-numeric: tabular-nums; min-height: 1.2em;
}

.steps { margin: 0 0 1.4rem 1.4rem; font-size: 1.15rem; line-height: 1.55; }
.steps li { margin-bottom: .35rem; }

.note { font-size: .85rem; color: #6a7178; margin-bottom: 1.6rem; }
.hint { font-size: 1.1rem; margin-bottom: 1.2rem; }
.status { font-size: 1.05rem; color: #4a5158; margin-top: 1rem; min-height: 1.4em; }

.btn {
  display: block; width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1.25rem; font-weight: 700;
  border: none; border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  margin-top: 1rem;
}
.btn.primary { background: #0b3d91; color: #fff; }
.btn.primary:disabled { background: #9fb4d4; }
.btn.ghost { background: #eef1f4; color: #333; font-weight: 500; font-size: 1.05rem; }

.btn.giant {
  min-height: 140px;
  font-size: 1.6rem;
  border-radius: 20px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.color-blue   { background: #1565d8; }
.color-green  { background: #1c9e4b; }
.color-red    { background: #d23b3b; }
.color-yellow { background: #e6b800; color: #222 !important; text-shadow: none; }

.wait-word {
  min-height: 5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; letter-spacing: .06em;
  color: #0b3d91;
  margin: 1rem 0;
}
.wait-word.small { min-height: 3.2rem; font-size: 2.2rem; margin: .4rem 0; }
.wait-word.visible { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

h1 { font-size: 1.5rem; margin-bottom: .8rem; }
h2 { font-size: 1.4rem; margin-bottom: 1rem; }
p  { font-size: 1.1rem; line-height: 1.5; }

/* ── экран генерации кода ── */
.gen-card { text-align: center; padding-top: 2rem; }
.gen-card h2 { font-size: 1.5rem; }
.gen-card .hint { color: #6a7178; font-size: 1rem; margin-bottom: 2rem; }

.spinner {
  width: 74px; height: 74px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  border: 6px solid #dfe6ef;
  border-top-color: #0b3d91;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.gen-bar {
  width: 100%; height: 10px;
  background: #e6ebf1; border-radius: 6px;
  overflow: hidden; margin-bottom: 1rem;
}
.gen-fill {
  height: 100%; width: 0%;
  background: #0b3d91; border-radius: 6px;
  transition: width .4s ease;
}
.gen-card .status { color: #4a5158; font-size: 1rem; min-height: 1.3em; }