:root {
  --coral: #FF7663;
  --coral-strong: #F45A45;
  --coral-text: #C0361C; /* коралл для мелкого текста: >=4.5:1 на светлом (AA) */
  --purpur: #370B27;
  --bg: #FBF7F5;
  --border: #EADBD4;
  --radius: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--purpur);
  font-family: "Onest", system-ui, sans-serif; line-height: 1.5;
}
.pk-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px 80px; }
.pk-head h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.05; margin: 0 0 12px; }
.pk-hint { color: #6b5560; font-size: 15px; margin: 0 0 28px; }

.pk-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.pk-num {
  padding: 13px 14px; border: 1.5px solid var(--border); background: #fff;
  border-radius: 12px; font: inherit; font-weight: 600; color: var(--purpur);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.pk-num:hover { border-color: var(--coral); }
.pk-num.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }

.pk-drop {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 110px; padding: 20px; margin-bottom: 16px;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: #fff; color: #6b5560; cursor: pointer; transition: border-color .2s, background .2s;
}
.pk-drop:hover, .pk-drop.is-over { border-color: var(--coral); background: #fff6f4; }
.pk-drop-text { font-size: 15px; font-weight: 500; }

.pk-err { color: var(--coral-text); font-weight: 600; margin: 0 0 16px; font-size: 14px; }

.pk-canvas-box {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--border); margin-bottom: 20px; aspect-ratio: 1/1;
}
#cv { display: block; width: 100%; height: 100%; }

.pk-dl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 16px; border: 0; border-radius: 999px;
  background: var(--coral); color: #fff; font: inherit; font-weight: 700; font-size: 16px;
  cursor: pointer; transition: background .2s, opacity .2s;
}
.pk-dl:hover:not(:disabled) { background: var(--coral-strong); }
.pk-dl:disabled { opacity: .45; cursor: not-allowed; }

/* Скрытый, но фокусируемый file-input: выбор файла доступен с клавиатуры */
.pk-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Focus-ring (a11y) */
.pk-num:focus-visible, .pk-dl:focus-visible {
  outline: 2px solid var(--coral-strong);
  outline-offset: 3px;
}
.pk-drop:focus-within {
  outline: 2px solid var(--coral-strong);
  outline-offset: 3px;
}

@media (max-width: 420px) { .pk-nums { grid-template-columns: 1fr; } }