/*! Copyright (c) MatchFlow.gg. All rights reserved. Proprietary: see https://matchflow.gg/terms */
.pr-page {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: #f6f4ff;
  background: radial-gradient(ellipse at 16% 12%, #342052 0, transparent 48%), radial-gradient(ellipse at 90% 85%, #17274a 0, transparent 45%), #0b0925;
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.5;
}
.pr-world {
  background: radial-gradient(ellipse at 15% 15%, #17365b 0, transparent 50%), radial-gradient(ellipse at 90% 80%, #342052 0, transparent 50%), #0b0925;
}
.pr-page *, .pr-page *::before, .pr-page *::after { box-sizing: border-box; }
.pr-page a { color: #cbc1ff; text-underline-offset: 4px; }
.pr-page a:hover { color: #fff; }
.pr-page :focus-visible { outline: 3px solid #b3a3ff; outline-offset: 4px; }
.pr-skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: #201b3d; z-index: 2; }
.pr-skip:focus { top: 16px; }
.pr-header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 24px clamp(20px, 5vw, 80px); }
.pr-page .pr-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: clamp(20px, 3vw, 27px); }
.pr-brand img { object-fit: contain; }
.pr-back { font-size: 14px; text-decoration: none; padding-block: 8px; }
.pr-main { display: grid; place-items: center; padding: 32px 20px; }
.pr-card { width: min(100%, 464px); padding: clamp(24px, 5vw, 40px); border: 1px solid #ffffff1c; border-radius: 28px; background: #17132eea; box-shadow: 0 28px 80px #0004; overflow-wrap: anywhere; }
.pr-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #a18bff1f; color: #c8baff; font-size: 28px; }
.pr-kicker { margin: 24px 0 8px; color: #b5a5ed; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.pr-card h1 { font-size: clamp(28px, 4vw, 34px); line-height: 1.15; letter-spacing: -.035em; margin: 0 0 18px; }
.pr-lead { color: #c6c1d9; margin: 0 0 24px; }
.pr-error { padding: 14px; border-radius: 12px; background: #ff6c881a; color: #ffc1ce; }
.pr-form { display: grid; gap: 10px; }
.pr-form label { font-size: 14px; font-weight: 600; }
.pr-form input:not([type=hidden]) { min-width: 0; width: 100%; padding: 14px; border: 1px solid #ffffff29; border-radius: 12px; background: #0d0b20; color: #fff; font: inherit; font-size: 16px; }
.pr-form input::placeholder { color: #928ba9; }
.pr-password { display: flex; position: relative; margin-bottom: 10px; }
.pr-password input { padding-right: 70px; }
.pr-show { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #c8baff; font: inherit; font-size: 13px; min-height: 44px; cursor: pointer; }
.pr-page .pr-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; margin-top: 10px; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(110deg, #8659ea, #526ce4) border-box; color: #fff; text-decoration: none; font: inherit; font-weight: 700; cursor: pointer; }
.pr-button:disabled { opacity: .65; cursor: wait; }
.pr-note { color: #a8a1bc; font-size: 13px; margin: 18px 0 0; }
.pr-form .pr-note { margin: 0; }
.pr-return { display: block; text-align: center; font-size: 14px; margin-top: 24px; }
.pr-footer { padding: 24px 20px; text-align: center; color: #a8a1bc; font-size: 13px; }
@media (max-width: 480px) {
  .pr-header { padding: 16px 20px; }
  .pr-brand img { width: 36px; height: 36px; }
  .pr-main { padding-block: 20px; }
  .pr-card { border-radius: 22px; }
}
