/* onboarding.css — page transitions, tile grids */
.qp-page { animation: qpfade 0.25s ease-out; }
@keyframes qpfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.qp-page__title { font-size: 22px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.3px; }
.qp-page__subtitle { font-size: 14px; color: #707070; margin-bottom: 22px; }

.qp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 540px) { .qp-tiles { grid-template-columns: repeat(3, 1fr); } }

.qp-tile {
  background: #ffffff; border: 1px solid #ececec; border-radius: 14px;
  padding: 18px 14px; cursor: pointer; transition: all 0.15s;
  text-align: center; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qp-tile:hover { border-color: #1a1a1a; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.qp-tile:active { transform: translateY(0); }
.qp-tile__icon { font-size: 30px; line-height: 1; }
.qp-tile__title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.qp-tile__subtitle { font-size: 11px; color: #999; }

.qp-tile.qp-tile--selected { border-color: #1a1a1a; background: #fafafa; }

.qp-back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: #707070;
  cursor: pointer; padding: 6px 0; background: none; border: 0;
  margin-bottom: 8px;
}
.qp-back:hover { color: #1a1a1a; }

.qp-form { display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.qp-form__label { font-size: 13px; font-weight: 500; color: #1a1a1a; }
.qp-form__input {
  border: 1px solid #d1d1d1; border-radius: 8px;
  padding: 12px 14px; font-size: 16px;
  background: #fff; outline: none;
  transition: border-color 0.15s;
}
.qp-form__input:focus { border-color: #1a1a1a; }
.qp-form__hint { font-size: 12px; color: #999; }
.qp-form__error { font-size: 12px; color: #c53030; }

.qp-btn {
  background: #1a1a1a; color: #fff; border: 0;
  padding: 12px 24px; border-radius: 8px;
  font-size: 15px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.qp-btn:hover { background: #333; }
.qp-btn:disabled { background: #ccc; cursor: not-allowed; }
.qp-btn--secondary { background: transparent; color: #1a1a1a; border: 1px solid #d1d1d1; }
.qp-btn--secondary:hover { background: #f5f5f5; }

.qp-done {
  text-align: center; padding: 40px 20px;
}
.qp-done__icon { font-size: 56px; margin-bottom: 18px; }
.qp-done__title { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.qp-done__subtitle { font-size: 14px; color: #707070; margin-bottom: 24px; }
.qp-done__info { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 16px; text-align: left; }
.qp-done__info dt { font-size: 12px; color: #999; margin-top: 8px; }
.qp-done__info dt:first-child { margin-top: 0; }
.qp-done__info dd { font-size: 14px; font-weight: 500; color: #1a1a1a; }

.qp-otp-input {
  letter-spacing: 0.5em; text-align: center; font-size: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Mono", "SF Mono", Menlo, monospace;
}