:root {
  --rf-auth-card-bg: rgba(4, 8, 13, .44);
  --rf-auth-card-surface: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)), var(--rf-auth-card-bg);
  --rf-auth-card-border: rgba(247, 248, 251, .12);
  --rf-auth-input-bg: rgba(9, 14, 22, .86);
  --rf-auth-input-focus-bg: rgba(13, 20, 31, .96);
  --rf-auth-zone-bg: rgba(255, 255, 255, .035);
  --rf-auth-zone-bg-strong: rgba(255, 255, 255, .07);
  --rf-auth-focus: rgba(247, 248, 251, .58);
  --rf-auth-focus-soft: rgba(247, 248, 251, .06);
  --rf-auth-link-border: rgba(247, 248, 251, .22);
  --rf-auth-link-border-hover: rgba(247, 248, 251, .54);
  --rf-auth-primary-bg: rgba(255, 255, 255, .92);
  --rf-auth-primary-bg-hover: #fff;
  --rf-auth-primary-text: #05080d;
  --rf-auth-language-bg: rgba(8, 12, 18, .78);
  --rf-auth-error-bg: rgba(60, 18, 18, .32);
}

.rf-auth-input-control:focus {
  border-color: rgba(247, 248, 251, .32) !important;
  background: var(--rf-auth-input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--rf-auth-focus-soft) !important;
  outline: none;
}

.rf-auth-primary-button {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: var(--rf-auth-primary-bg) !important;
  color: var(--rf-auth-primary-text) !important;
}

.rf-auth-primary-button:hover,
.rf-auth-primary-button:focus-visible {
  border-color: rgba(255, 255, 255, .5) !important;
  background: var(--rf-auth-primary-bg-hover) !important;
  color: var(--rf-auth-primary-text) !important;
}

.rf-auth-secondary-link {
  color: rgba(226, 232, 240, .78) !important;
  border-bottom: 1px solid var(--rf-auth-link-border);
  text-decoration: none;
}

.rf-auth-secondary-link:hover,
.rf-auth-secondary-link:focus-visible {
  color: #fff !important;
  border-color: var(--rf-auth-link-border-hover);
}

/* Play authentication uses the same colors and controls as Site accounts. */
.rf-auth-page {overflow-y:auto}
.rf-auth-layout {position:relative;isolation:isolate;display:flex;min-height:calc(100dvh - var(--rf-nav-height));width:100%}
.rf-auth-story,.rf-auth-form-panel {flex:1 1 50%;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,80px)}
.rf-auth-story {border-right:1px solid var(--rf-border-soft)}
.rf-auth-background {position:absolute;inset:0 auto 0 0;width:50%;height:100%;z-index:-2}
.rf-auth-background img {display:block;width:100%;height:100%;object-fit:cover;object-position:65% center}
.rf-auth-layout::before {content:"";position:absolute;inset:0 auto 0 0;width:50%;background:linear-gradient(90deg,rgba(0,3,6,.82),rgba(0,3,6,.48));z-index:-1}
.rf-auth-kicker {color:var(--rf-warning);font-size:14px;letter-spacing:.12em;margin:0 0 24px}
.rf-auth-story h2 {font-size:clamp(44px,5vw,76px);line-height:1.08;letter-spacing:-.035em;margin:0 0 24px;font-weight:650}
.rf-auth-story>p:last-child {max-width:380px;color:var(--rf-text-secondary);line-height:1.6}
.rf-auth-form-content {width:min(100%,440px);margin:auto;min-width:0}
.rf-auth-form-content h1 {font-size:clamp(26px,2.5vw,36px);line-height:1.15;letter-spacing:-.025em;margin:0 0 12px;font-weight:650}
.rf-auth-subtitle {font-size:14px;line-height:1.6;color:var(--rf-text-secondary);margin:0 0 28px}
.rf-auth-form {display:flex;flex-direction:column;gap:18px}
.rf-auth-fields-row {display:flex;gap:16px}
.rf-auth-field {position:relative;flex:1;min-width:0}
.rf-auth-field label {position:absolute;left:13px;top:28px;transform:translateY(-50%);font-size:14px;line-height:1.2;color:var(--rf-text-secondary);margin:0;pointer-events:none;transition:top .12s ease,font-size .12s ease,transform .12s ease}
.rf-auth-field input:focus+label,.rf-auth-field input:not(:placeholder-shown)+label {top:7px;transform:none;font-size:11px;color:var(--rf-text-muted)}
.rf-auth-field input {display:block;width:100%;min-width:0;min-height:56px;padding:22px 12px 8px;border:1px solid var(--rf-auth-card-border);border-radius:var(--rf-radius-sm);background:var(--rf-auth-input-bg);color:var(--rf-text-primary);font:inherit;font-size:16px;user-select:text}
.rf-auth-form .rf-auth-primary-button,.rf-auth-social-button {display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border-radius:var(--rf-radius-sm);font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
.rf-auth-social-button {border:1px solid var(--rf-auth-card-border);color:var(--rf-text-primary)}
.rf-auth-divider {text-align:center;color:var(--rf-text-muted);font-size:13px;margin:20px 0}
.rf-auth-terms {display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.5;color:var(--rf-text-secondary)}
.rf-auth-terms input {flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--rf-text-primary)}
.rf-auth-terms a {text-decoration:underline;text-underline-offset:3px}
.rf-auth-switch {text-align:center;color:var(--rf-text-muted);font-size:14px;line-height:1.6;margin:24px 0 0}
.rf-auth-errors,.rf-auth-field-error {color:var(--rf-danger);font-size:13px;line-height:1.5;margin:6px 0 0}
.rf-auth-errors {padding:12px;border:1px solid var(--rf-danger);border-radius:var(--rf-radius-sm);background:var(--rf-auth-error-bg)}
@media(max-width:780px) {
 .rf-auth-layout {min-height:calc(100dvh - var(--rf-nav-height))}
 .rf-auth-story {display:none}
 .rf-auth-background,.rf-auth-layout::before {position:fixed;top:var(--rf-nav-height);bottom:0;width:100%;height:calc(100dvh - var(--rf-nav-height))}
 .rf-auth-background img {object-position:center}
 .rf-auth-layout::before {background:rgba(0,3,6,.76)}
 .rf-auth-form-panel {flex-basis:100%;padding:32px 20px}
}
@media(max-width:380px) {.rf-auth-fields-row {flex-direction:column;gap:18px}}

.rf-auth-input-control:-webkit-autofill,
.rf-auth-input-control:-webkit-autofill:hover,
.rf-auth-input-control:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--rf-text-primary);
  caret-color:var(--rf-text-primary);
  box-shadow:0 0 0 1000px var(--rf-auth-input-bg) inset;
}

html:has(> body.rf-auth-page) {scrollbar-width:none}
html:has(> body.rf-auth-page)::-webkit-scrollbar {display:none}
