/* The landing's sky-and-city backdrop. Like the hero, the left (the art's own character and logo) is
   faded out so only the sky and city show, and the middle is darkened so the form stays readable. */
body.pw-auth-site {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(8, 8, 13, .97) 0%, rgba(8, 8, 13, .9) 52%, rgba(8, 8, 13, .6) 72%, rgba(8, 8, 13, .25) 100%),
        radial-gradient(ellipse 40% 60% at 50% 45%, rgba(8, 8, 13, .6), transparent 70%),
        linear-gradient(0deg, rgba(8, 8, 13, .85), transparent 45%),
        url('/assets/img/home-2/hero/hero-bg.jpg') right center / cover no-repeat,
        var(--pw-ink);
    background-attachment: fixed;
}

.pw-auth-main {
    width: min(420px, calc(100% - 40px));
    margin-inline: auto;
    padding-block: 140px 72px;
}
.pw-auth-main-register { width: min(480px, calc(100% - 40px)); }
.pw-auth-access, .pw-auth-content { min-width: 0; }

.pw-auth-heading {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pw-line);
    text-align: center;
}
.pw-auth-heading h1 {
    margin: 0;
    color: var(--pw-paper);
    font: 400 44px/1.1 var(--pw-serif);
}
.pw-auth-heading p {
    margin: 12px 0 0;
    color: var(--pw-muted);
    font: 400 15px/1.55 var(--pw-sans);
    text-align: center;
}
.pw-auth-passwords { display: grid; gap: 16px; min-width: 0; }
.pw-auth-passwords > div { min-width: 0; }

.pw-auth-form { display: grid; gap: 16px; }
.pw-auth-form input:not([type="checkbox"]):not([type="hidden"]),
.pw-auth-form select,
.pw-auth-form textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(243, 238, 231, .19);
    border-radius: 0;
    background: rgba(8, 8, 10, .72);
    color: var(--pw-paper);
    font: 400 14px/1.4 var(--pw-sans);
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.pw-auth-form input:not([type="checkbox"]):not([type="hidden"]),
.pw-auth-form select,
.pw-auth-form textarea { padding: 7px 12px; }

.pw-auth-form input::placeholder,
.pw-auth-form textarea::placeholder { color: #aaa2a5; opacity: 1; }
.pw-auth-form input:focus,
.pw-auth-form select:focus,
.pw-auth-form textarea:focus {
    border-color: var(--pw-gold);
    outline: 2px solid rgba(198, 168, 117, .25);
    outline-offset: 2px;
    background: rgba(8, 8, 10, .94);
}

.pw-auth-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pw-red);
}

.pw-auth-form label { color: rgba(243, 238, 231, .82); }
.pw-auth-form a { color: var(--pw-gold); }
.pw-auth-form a:hover,
.pw-auth-links a:hover { color: var(--pw-paper); text-decoration: underline; text-underline-offset: 3px; }
.pw-auth-form button[type="submit"],
.pw-auth-form input[type="submit"],
.pw-auth-form .btn-primary {
    width: 100%;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--pw-red);
    border-radius: 0;
    background: var(--pw-red);
    box-shadow: none;
    color: #fff;
    font: 600 13px/1.3 var(--pw-sans);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.pw-auth-form button[type="submit"]:hover,
.pw-auth-form input[type="submit"]:hover,
.pw-auth-form .btn-primary:hover { background: var(--pw-red-light); border-color: var(--pw-red-light); }

.pw-auth-content [class*="text-red"],
.pw-auth-content [class*="text-error"],
.pw-auth-content [role="alert"] { color: #ff9a9f; }
.pw-auth-content [role="alert"] ul { margin: 8px 0 0; padding-left: 20px; }
.pw-auth-content .pw-auth-errors { margin-bottom: 20px; }
.pw-auth-status {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(126, 190, 148, .28);
    background: rgba(50, 100, 67, .14);
    color: #b9e5c4;
    font-size: 14px;
}
.pw-auth-links {
    margin: 24px 0 0;
    color: var(--pw-muted);
    font-size: 14px;
    text-align: center;
}
.pw-auth-links p { margin: 0; }
.pw-auth-links a { color: var(--pw-gold); font-weight: 600; }
.pw-auth-login-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pw-auth-login-options label { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; }
.pw-auth-login-options a { font-size: 13px; }

.pw-auth-field > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.pw-auth-hint,
.pw-auth-field-error { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.pw-auth-hint { color: var(--pw-muted); }
.pw-auth-field-error { color: #ff9a9f; }
.pw-auth-form input[aria-invalid="true"]:not([type="hidden"]) { border-color: #ff9a9f; }
.pw-auth-checkbox { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; cursor: pointer; }
.pw-auth-checkbox input { flex-shrink: 0; cursor: pointer; }
.pw-auth-links a,
.pw-auth-terms a { display: inline-flex; min-height: 44px; align-items: center; }
.pw-auth-terms { font-size: 13px; line-height: 1.5; }
.pw-auth-site :focus-visible { outline: 2px solid var(--pw-gold); outline-offset: 3px; }

.pw-auth-form .g-recaptcha,
.pw-auth-form iframe { max-width: 100%; }
.pw-auth-form > div { min-width: 0; }
.pw-auth-site :focus-visible { outline-color: var(--pw-gold); }

@media (min-width: 640px) {
    .pw-auth-passwords { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .pw-auth-main { padding-block: 110px 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .pw-auth-form input,
    .pw-auth-form select,
    .pw-auth-form textarea,
    .pw-auth-form button { transition: none; }
    .pw-auth-form button:hover { transform: none; }
}