
/* ===== bundled source: auth-oauth-entry-v249.css ===== */
/* OSANIME OAuth Entry Root Fix v249
 * ROOT CAUSE: legacy global auth CSS contains:
 *   body.auth-screen-page .auth-divider,
 *   body.auth-screen-page .auth-socials { display:none!important; }
 * OAuth v249 deliberately does not use either legacy class.
 */
body.auth-screen-page .osanime-oauth-divider-v249 {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  height:auto !important;
  min-height:1px !important;
  max-height:none !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  transform:none !important;
  position:relative !important;
  align-items:center !important;
  gap:12px !important;
  margin:18px 0 14px !important;
}
body.auth-screen-page .osanime-oauth-divider-v249 > span {
  display:block !important; flex:1 1 auto !important; min-width:24px !important; height:1px !important; background:rgba(255,255,255,.10) !important;
}
body.auth-screen-page .osanime-oauth-divider-v249 > em {
  display:block !important; flex:0 0 auto !important; font-style:normal !important; font-size:11px !important; font-weight:800 !important; letter-spacing:.04em !important; color:rgba(224,231,255,.58) !important; text-transform:uppercase !important; white-space:nowrap !important;
}
body.auth-screen-page .osanime-oauth-grid-v249 {
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  height:auto !important;
  min-height:50px !important;
  max-height:none !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
  transform:none !important;
  position:relative !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 !important;
}
body.auth-screen-page .osanime-oauth-grid-v249 > a,
body.auth-screen-page .osanime-oauth-grid-v249 > span {
  visibility:visible !important; opacity:1 !important; min-width:0 !important; min-height:50px !important;
}
@media(max-width:640px){
  body.auth-screen-page .osanime-oauth-grid-v249{grid-template-columns:1fr !important;gap:8px !important}
  body.auth-screen-page .osanime-oauth-divider-v249{margin:16px 0 12px !important}
}

/* OSANIME OAuth Stage 2 — Discord Register/Login */
:root {
    --oauth-discord: #5865f2;
    --oauth-discord-soft: rgba(88,101,242,.16);
    --oauth-border: rgba(255,255,255,.10);
    --oauth-surface: rgba(8,17,35,.74);
    --oauth-muted: rgba(224,231,255,.62);
}

.osanime-oauth-grid-v249 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.oauth-stage2-provider {
    min-width: 0;
    min-height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--oauth-border) !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.88) !important;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.oauth-stage2-provider > b {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    font-size: 14px;
}

.oauth-stage2-provider.discord.is-ready {
    border-color: rgba(88,101,242,.48) !important;
    background: linear-gradient(135deg, rgba(88,101,242,.20), rgba(134,92,246,.10)) !important;
}

.oauth-stage2-provider.discord.is-ready > b {
    background: var(--oauth-discord);
    color: #fff;
    box-shadow: 0 8px 22px rgba(88,101,242,.28);
}

@media (hover:hover) and (pointer:fine) {
    .oauth-stage2-provider.discord.is-ready:hover {
        transform: translateY(-2px);
        border-color: rgba(111,124,255,.82) !important;
        background: linear-gradient(135deg, rgba(88,101,242,.28), rgba(134,92,246,.16)) !important;
        box-shadow: 0 12px 30px rgba(16,24,48,.34);
    }
}

.oauth-stage2-provider.is-disabled {
    cursor: not-allowed;
    opacity: .56;
}

.oauth-stage2-provider.is-disabled small {
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48);
}

.oauth-stage2-provider.facebook > b {
    color: #fff;
    background: #1877f2;
}

.oauth-stage2-provider.google > b {
    background: #fff;
    color: #4285f4;
    font-weight: 900;
}

.osanime-oauth-register-divider-v249 {
    margin-top: 20px !important;
}

.osanime-oauth-register-grid-v249 {
    margin-top: 2px;
}

.oauth-stage2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(88,101,242,.34);
    background: rgba(88,101,242,.10);
    color: #c8ceff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.oauth-stage2-trust-list {
    display: grid;
    gap: 10px;
    margin-top: 28px;
    max-width: 560px;
}

.oauth-stage2-trust-list > div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: rgba(229,235,255,.68);
    font-size: 13px;
    line-height: 1.55;
}

.oauth-stage2-trust-list i {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #b8c1ff;
    background: rgba(88,101,242,.12);
}

.oauth-stage2-complete-card {
    max-width: 540px;
}

.oauth-stage2-provider-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(88,101,242,.26);
    background: linear-gradient(135deg, rgba(88,101,242,.11), rgba(255,79,184,.045));
}

.oauth-stage2-provider-summary img,
.oauth-stage2-avatar-fallback {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 14px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--oauth-discord);
    border: 1px solid rgba(255,255,255,.12);
}

.oauth-stage2-avatar-fallback i {
    font-size: 24px;
}

.oauth-stage2-provider-summary > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.oauth-stage2-provider-summary small {
    color: rgba(220,227,255,.56);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
}

.oauth-stage2-provider-summary strong {
    min-width: 0;
    color: #fff;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oauth-stage2-provider-summary span {
    min-width: 0;
    color: #9ee8bf;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oauth-stage2-provider-summary span i {
    margin-right: 5px;
}

.oauth-stage2-complete-form {
    margin-top: 20px;
}

.oauth-stage2-agree {
    margin-top: 20px !important;
}

.oauth-stage2-terms-error {
    display: block;
    margin-top: -10px;
    margin-bottom: 14px;
}

.oauth-stage2-discord-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.oauth-stage2-discord-submit i {
    font-size: 17px;
}

@media (max-width: 980px) {
    .osanime-oauth-grid-v249 {
        grid-template-columns: 1fr;
    }

    .oauth-stage2-provider {
        justify-content: flex-start;
        min-height: 48px;
        padding-inline: 14px !important;
    }

    .oauth-stage2-provider.is-disabled small {
        position: static;
        margin-left: auto;
        font-size: 8px;
    }
}

@media (max-width: 640px) {
    .oauth-stage2-trust-list {
        margin-top: 20px;
    }

    .oauth-stage2-provider-summary {
        align-items: flex-start;
    }

    .oauth-stage2-provider-summary img,
    .oauth-stage2-avatar-fallback {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oauth-stage2-provider {
        transition: none !important;
    }
}

/* OSANIME OAuth Stage 3 — Google Register/Login */
:root {
    --oauth-google-blue: #4285f4;
    --oauth-google-green: #34a853;
    --oauth-google-yellow: #fbbc05;
    --oauth-google-red: #ea4335;
}

.oauth-stage2-provider.google.is-ready {
    border-color: rgba(66,133,244,.42) !important;
    background: linear-gradient(135deg, rgba(66,133,244,.14), rgba(52,168,83,.08)) !important;
}

.oauth-stage2-provider.google.is-ready > b {
    background: #fff;
    color: var(--oauth-google-blue);
    box-shadow: 0 8px 22px rgba(66,133,244,.18);
}

@media (hover:hover) and (pointer:fine) {
    .oauth-stage2-provider.google.is-ready:hover {
        transform: translateY(-2px);
        border-color: rgba(66,133,244,.75) !important;
        background: linear-gradient(135deg, rgba(66,133,244,.22), rgba(52,168,83,.11)) !important;
        box-shadow: 0 12px 30px rgba(16,24,48,.34);
    }
}

.oauth-stage3-google-eyebrow {
    border-color: rgba(66,133,244,.32);
    background: rgba(66,133,244,.09);
    color: #d7e6ff;
}

.oauth-stage3-google-trust-list i {
    color: #cfe1ff;
    background: rgba(66,133,244,.11);
}

.oauth-stage3-google-summary {
    border-color: rgba(66,133,244,.24);
    background: linear-gradient(135deg, rgba(66,133,244,.10), rgba(52,168,83,.05));
}

.oauth-stage3-google-avatar-fallback {
    background: #fff;
    color: var(--oauth-google-blue);
}

.oauth-stage3-google-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.oauth-stage3-google-submit i {
    font-size: 16px;
}

/* OSANIME OAuth Stage 4 — Facebook Register/Login */
:root {
    --oauth-facebook: #1877f2;
    --oauth-facebook-soft: rgba(24,119,242,.14);
}

.oauth-stage2-provider.facebook.is-ready {
    border-color: rgba(24,119,242,.44) !important;
    background: linear-gradient(135deg, rgba(24,119,242,.17), rgba(24,119,242,.07)) !important;
}

.oauth-stage2-provider.facebook.is-ready > b {
    color: #fff;
    background: var(--oauth-facebook);
    box-shadow: 0 8px 22px rgba(24,119,242,.24);
}

@media (hover:hover) and (pointer:fine) {
    .oauth-stage2-provider.facebook.is-ready:hover {
        transform: translateY(-2px);
        border-color: rgba(72,148,247,.82) !important;
        background: linear-gradient(135deg, rgba(24,119,242,.25), rgba(24,119,242,.11)) !important;
        box-shadow: 0 12px 30px rgba(8,34,78,.34);
    }
}

.oauth-stage4-facebook-eyebrow {
    border-color: rgba(24,119,242,.33);
    background: rgba(24,119,242,.10);
    color: #dbeaff;
}

.oauth-stage4-facebook-trust-list i {
    color: #d9eaff;
    background: rgba(24,119,242,.12);
}

.oauth-stage4-facebook-summary {
    border-color: rgba(24,119,242,.26);
    background: linear-gradient(135deg, rgba(24,119,242,.11), rgba(255,79,184,.035));
}

.oauth-stage4-facebook-summary > div {
    min-width: 0;
}

.oauth-stage4-facebook-summary span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.42;
}

.oauth-stage4-facebook-avatar-fallback {
    background: var(--oauth-facebook);
    color: #fff;
}

.oauth-stage4-email-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -8px 0 20px;
    padding: 11px 12px;
    border: 1px solid rgba(24,119,242,.18);
    border-radius: 12px;
    background: rgba(24,119,242,.065);
    color: rgba(222,232,255,.67);
    font-size: 11px;
    line-height: 1.5;
}

.oauth-stage4-email-note i {
    margin-top: 2px;
    color: #8fbdff;
}

.oauth-stage4-facebook-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.oauth-stage4-facebook-submit i {
    font-size: 16px;
}

@media (max-width: 1120px) and (min-width: 981px) {
    .osanime-oauth-grid-v249 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .oauth-stage4-email-note {
        font-size: 10.5px;
    }
}

/* OSANIME OAuth Entry Root Fix v249
 * Keep provider actions visible even when an older optimized auth stylesheet
 * contains legacy hide rules for .auth-socials / .auth-divider. v249 intentionally does NOT use those legacy classes.
 */
.osanime-oauth-divider-v249 {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 18px 0 14px !important;
}
.osanime-oauth-divider-v249 > span {
    display: block !important;
    flex: 1 1 auto;
    min-width: 24px;
    height: 1px;
    background: rgba(255,255,255,.10);
}
.osanime-oauth-divider-v249 > em {
    display: block !important;
    flex: 0 0 auto;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(224,231,255,.58);
    text-transform: uppercase;
}
.osanime-oauth-grid-v249 {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
}
.auth-passkey-wrap {
    margin-top: 12px;
}
@media (max-width: 640px) {
    .osanime-oauth-divider-v249 { margin-top: 16px !important; }
    .osanime-oauth-grid-v249 { gap: 8px; }
}


/* ===== bundled source: auth-ui-stage1-v250.css ===== */
/* ======================================================================
   OSANIME Auth UI Optimization — Stage 1 / v250
   Scope: Login, Register, Forgot Password, Login reset mode, shared footer
   Goal: one visual foundation without changing authentication behavior.
   ====================================================================== */

body.auth-screen-page.auth-ui-v250{
  --auth250-bg:#030712;
  --auth250-panel:rgba(8,14,31,.82);
  --auth250-panel-strong:rgba(8,14,31,.94);
  --auth250-line:rgba(255,255,255,.10);
  --auth250-line-strong:rgba(255,255,255,.16);
  --auth250-text:#f7f9ff;
  --auth250-muted:#9ca9bf;
  --auth250-muted-2:#748198;
  --auth250-pink:#ff4f93;
  --auth250-pink-soft:rgba(255,79,147,.14);
  --auth250-violet:#8b5cf6;
  --auth250-radius:22px;
  --auth250-shadow:0 28px 80px rgba(0,0,0,.34);
  margin:0!important;
  padding:0!important;
  min-height:100vh!important;
  min-height:100svh!important;
  background:var(--auth250-bg)!important;
  color:var(--auth250-text)!important;
  overflow-x:hidden!important;
}

body.auth-screen-page.auth-ui-v250 *,
body.auth-screen-page.auth-ui-v250 *::before,
body.auth-screen-page.auth-ui-v250 *::after{box-sizing:border-box}

body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  min-height:100svh!important;
  margin:0!important;
  padding:clamp(28px,3.2vw,54px) clamp(28px,4vw,68px) 22px!important;
  border:0!important;
  border-radius:0!important;
  position:relative!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(320px,1fr) minmax(460px,600px)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  column-gap:clamp(38px,6vw,104px)!important;
  row-gap:26px!important;
  align-items:center!important;
  background-color:#050916!important;
  isolation:isolate;
}

/* Dark readable overlay while retaining the existing anime background from style-auth. */
body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 14%,rgba(255,79,147,.16),transparent 28%),
    radial-gradient(circle at 70% 18%,rgba(139,92,246,.13),transparent 30%),
    linear-gradient(90deg,rgba(3,7,18,.82) 0%,rgba(4,8,20,.58) 45%,rgba(3,7,18,.90) 100%)!important;
}

body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250::after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0!important;
  height:180px!important;
  pointer-events:none!important;
  z-index:-1!important;
  background:linear-gradient(180deg,transparent,rgba(2,5,13,.54))!important;
}

body.auth-screen-page.auth-ui-v250 .auth-left{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  max-width:700px!important;
  min-height:0!important;
  padding:0!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

body.auth-screen-page.auth-ui-v250 .auth-right{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  align-self:center!important;
  justify-self:end!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
}

body.auth-screen-page.auth-ui-v250 .auth-logo{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  align-items:center!important;
  margin:0 0 clamp(34px,5vh,70px)!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
}
body.auth-screen-page.auth-ui-v250 .auth-logo img{
  display:block!important;
  width:auto!important;
  height:46px!important;
  max-width:min(210px,70vw)!important;
  object-fit:contain!important;
}

body.auth-screen-page.auth-ui-v250 .auth-intro{
  width:100%!important;
  max-width:620px!important;
  margin:0!important;
  padding:0!important;
}
body.auth-screen-page.auth-ui-v250 .auth-intro h1{
  margin:0!important;
  max-width:620px!important;
  color:#fff!important;
  font-size:clamp(35px,4.1vw,62px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  font-weight:900!important;
  text-wrap:balance;
}
body.auth-screen-page.auth-ui-v250 .auth-intro h1 span{color:var(--auth250-pink)!important}
body.auth-screen-page.auth-ui-v250 .auth-line{
  width:64px!important;
  height:3px!important;
  margin:24px 0 20px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--auth250-pink),var(--auth250-violet))!important;
  box-shadow:0 0 22px rgba(255,79,147,.20)!important;
}
body.auth-screen-page.auth-ui-v250 .auth-intro p{
  margin:0!important;
  max-width:570px!important;
  color:#bcc6d8!important;
  font-size:14px!important;
  line-height:1.72!important;
}

body.auth-screen-page.auth-ui-v250 .auth-feature-list{
  width:100%!important;
  max-width:610px!important;
  margin:clamp(34px,5vh,68px) 0 0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
body.auth-screen-page.auth-ui-v250 .auth-feature{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  align-items:center!important;
  gap:13px!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:rgba(7,13,29,.28)!important;
}
body.auth-screen-page.auth-ui-v250 .auth-feature-icon{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  color:#ffd1e3!important;
  background:linear-gradient(145deg,rgba(255,79,147,.17),rgba(139,92,246,.14))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  font-size:16px!important;
}
body.auth-screen-page.auth-ui-v250 .auth-feature b{
  display:block!important;
  margin:0 0 3px!important;
  color:#f8faff!important;
  font-size:13px!important;
  line-height:1.35!important;
}
body.auth-screen-page.auth-ui-v250 .auth-feature small{
  display:block!important;
  color:#8f9db4!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}

/* Shared card geometry. */
body.auth-screen-page.auth-ui-v250 .auth-card,
body.auth-screen-page.auth-ui-v250 .login-card,
body.auth-screen-page.auth-ui-v250 .register-card,
body.auth-screen-page.auth-ui-v250 .forgot-card{
  width:100%!important;
  max-width:580px!important;
  margin:0!important;
  padding:clamp(28px,3vw,42px)!important;
  border-radius:var(--auth250-radius)!important;
  border:1px solid var(--auth250-line)!important;
  background:linear-gradient(180deg,rgba(14,21,43,.86),rgba(7,12,27,.84))!important;
  box-shadow:var(--auth250-shadow),inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(20px) saturate(118%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(118%)!important;
  overflow:visible!important;
}
body.auth-screen-page.auth-ui-v250.register-page .auth-card,
body.auth-screen-page.auth-ui-v250.register-page .register-card{max-width:620px!important}

body.auth-screen-page.auth-ui-v250 .auth-card h2{
  margin:0 0 9px!important;
  color:#fff!important;
  font-size:clamp(28px,2.4vw,36px)!important;
  line-height:1.14!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
}
body.auth-screen-page.auth-ui-v250 .auth-card>p{
  margin:0 0 27px!important;
  color:#9facbf!important;
  font-size:13.5px!important;
  line-height:1.62!important;
}
body.auth-screen-page.auth-ui-v250 .auth-card>p span{color:#ff79ad!important;font-weight:800!important}

/* Stage 1 form baseline: consistent sizes only; deeper validation UX is Stage 2. */
body.auth-screen-page.auth-ui-v250 .auth-control{margin-bottom:16px!important}
body.auth-screen-page.auth-ui-v250 .auth-form>label,
body.auth-screen-page.auth-ui-v250 .auth-control>label{
  margin:0 0 8px!important;
  color:#e9edf7!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.35!important;
}
body.auth-screen-page.auth-ui-v250 .auth-field{
  width:100%!important;
  min-height:52px!important;
  height:52px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
body.auth-screen-page.auth-ui-v250 .auth-field:focus-within{
  border-color:rgba(255,79,147,.72)!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:0 0 0 3px rgba(255,79,147,.10)!important;
}
body.auth-screen-page.auth-ui-v250 .auth-field>span{color:#8d99af!important}
body.auth-screen-page.auth-ui-v250 .auth-field input{
  min-width:0!important;
  height:100%!important;
  color:#fff!important;
  font-size:13.5px!important;
}
body.auth-screen-page.auth-ui-v250 .auth-field input::placeholder{color:#68758c!important;opacity:1!important}

body.auth-screen-page.auth-ui-v250 .auth-submit{margin-top:4px!important}
body.auth-screen-page.auth-ui-v250 .auth-submit input,
body.auth-screen-page.auth-ui-v250 .auth-submit button,
body.auth-screen-page.auth-ui-v250 .auth-submit .button,
body.auth-screen-page.auth-ui-v250 .auth-submit-btn{
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  border:0!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  background:linear-gradient(135deg,#ff4f93,#e83d83)!important;
  color:#fff!important;
  font-size:13.5px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(255,79,147,.20)!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
@media(hover:hover) and (pointer:fine){
  body.auth-screen-page.auth-ui-v250 .auth-submit button:hover,
  body.auth-screen-page.auth-ui-v250 .auth-submit-btn:hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.04)!important;
    box-shadow:0 16px 34px rgba(255,79,147,.25)!important;
  }
}

body.auth-screen-page.auth-ui-v250 .auth-forgot{
  margin:12px 0 18px!important;
  font-size:12px!important;
  line-height:1.5!important;
}
body.auth-screen-page.auth-ui-v250 .auth-forgot a,
body.auth-screen-page.auth-ui-v250 .auth-forgot-button,
body.auth-screen-page.auth-ui-v250 .auth-bottom-link a,
body.auth-screen-page.auth-ui-v250 .forgot-back-link,
body.auth-screen-page.auth-ui-v250 .forgot-register-link{
  color:#ff6da5!important;
  font-weight:800!important;
  text-decoration:none!important;
}
body.auth-screen-page.auth-ui-v250 .auth-bottom-link{
  margin-top:20px!important;
  color:#8e9aaf!important;
  font-size:12px!important;
  line-height:1.55!important;
  text-align:center!important;
}
body.auth-screen-page.auth-ui-v250 .auth-security-hint,
body.auth-screen-page.auth-ui-v250 .auth-help{
  color:#78869c!important;
  font-size:10.8px!important;
  line-height:1.5!important;
}

/* Forgot Password-specific components now live in the small auth bundle, not global style.css. */
body.auth-screen-page.auth-ui-v250 .forgot-eyebrow{
  width:max-content!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 16px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,79,147,.26)!important;
  background:rgba(255,79,147,.08)!important;
  color:#ff9ac1!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-card-icon{
  width:48px!important;
  height:48px!important;
  margin:0 0 18px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,rgba(255,79,147,.18),rgba(139,92,246,.17))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#ff8db9!important;
  font-size:18px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16)!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-message{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start!important;
  margin:0 0 18px!important;
  padding:12px 13px!important;
  border-radius:12px!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-message-icon{
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-message b{display:block!important;margin-bottom:2px!important;color:#fff!important;font-size:12px!important}
body.auth-screen-page.auth-ui-v250 .forgot-message span{color:#aeb9ca!important}
body.auth-screen-page.auth-ui-v250 .forgot-message-success{border:1px solid rgba(52,211,153,.24)!important;background:rgba(52,211,153,.07)!important}
body.auth-screen-page.auth-ui-v250 .forgot-message-success .forgot-message-icon{color:#74e5b4!important;background:rgba(52,211,153,.12)!important}
body.auth-screen-page.auth-ui-v250 .forgot-message-error{border:1px solid rgba(251,113,133,.27)!important;background:rgba(251,113,133,.07)!important}
body.auth-screen-page.auth-ui-v250 .forgot-message-error .forgot-message-icon{color:#ff9aac!important;background:rgba(251,113,133,.12)!important}
body.auth-screen-page.auth-ui-v250 .forgot-field-help,
body.auth-screen-page.auth-ui-v250 .forgot-field-error{
  display:block!important;
  margin-top:7px!important;
  font-size:10.8px!important;
  line-height:1.45!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-field-help{color:#748198!important}
body.auth-screen-page.auth-ui-v250 .forgot-field-error{color:#ff8eac!important}
body.auth-screen-page.auth-ui-v250 .forgot-security-note{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin:16px 0 0!important;
  padding:11px 12px!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#7f8ca2!important;
  font-size:10.8px!important;
  line-height:1.5!important;
}
body.auth-screen-page.auth-ui-v250 .forgot-security-note i{margin-top:2px!important;color:#9ea9bc!important}
body.auth-screen-page.auth-ui-v250 .forgot-back-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:18px!important;
  padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  font-size:11.5px!important;
}

/* Footer: no absolute positioning and no overlap with forms/cards. */
body.auth-screen-page.auth-ui-v250 .auth-footer{
  grid-column:1 / -1!important;
  grid-row:2!important;
  position:static!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:18px 0 0!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:24px!important;
  color:#7f8ca1!important;
  background:transparent!important;
  z-index:5!important;
}
body.auth-screen-page.auth-ui-v250 .auth-footer-logo{
  display:flex!important;
  align-items:center!important;
  justify-self:start!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
}
body.auth-screen-page.auth-ui-v250 .auth-footer-logo img{
  display:block!important;
  width:auto!important;
  height:30px!important;
  max-width:150px!important;
  object-fit:contain!important;
}
body.auth-screen-page.auth-ui-v250 .auth-footer nav{
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px 14px!important;
  color:#8d99ae!important;
  font-size:11px!important;
  line-height:1.45!important;
}
body.auth-screen-page.auth-ui-v250 .auth-footer nav a{color:#9ba7ba!important;text-decoration:none!important;transition:color .18s ease!important}
body.auth-screen-page.auth-ui-v250 .auth-footer nav a:hover{color:#ff7caf!important}
body.auth-screen-page.auth-ui-v250 .auth-footer nav i{color:rgba(255,79,147,.62)!important;font-style:normal!important}
body.auth-screen-page.auth-ui-v250 .auth-footer p{
  justify-self:end!important;
  margin:0!important;
  color:#6f7b90!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  text-align:right!important;
  white-space:nowrap!important;
}

/* Laptop / landscape tablet */
@media(max-width:1180px){
  body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{
    grid-template-columns:minmax(290px,.78fr) minmax(430px,560px)!important;
    column-gap:34px!important;
    padding:34px 32px 20px!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-intro h1{font-size:clamp(34px,4vw,48px)!important}
  body.auth-screen-page.auth-ui-v250 .auth-feature-list{margin-top:34px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card,
  body.auth-screen-page.auth-ui-v250 .login-card,
  body.auth-screen-page.auth-ui-v250 .register-card,
  body.auth-screen-page.auth-ui-v250 .forgot-card{padding:30px!important}
}

/* Tablet portrait: stack, but keep hero compact and card dominant. */
@media(max-width:920px){
  body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:24px!important;
    min-height:100svh!important;
    padding:28px clamp(20px,5vw,44px) 20px!important;
    overflow:visible!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-left{
    grid-column:1!important;
    grid-row:1!important;
    max-width:720px!important;
    justify-self:center!important;
    text-align:center!important;
    align-items:center!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-right{
    grid-column:1!important;
    grid-row:2!important;
    max-width:720px!important;
    justify-self:center!important;
    justify-content:center!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-logo{margin-bottom:24px!important}
  body.auth-screen-page.auth-ui-v250 .auth-intro{max-width:590px!important}
  body.auth-screen-page.auth-ui-v250 .auth-intro h1{font-size:clamp(30px,7vw,43px)!important;text-align:center!important}
  body.auth-screen-page.auth-ui-v250 .auth-line{margin:18px auto 16px!important}
  body.auth-screen-page.auth-ui-v250 .auth-intro p{margin:0 auto!important;text-align:center!important}
  body.auth-screen-page.auth-ui-v250 .auth-feature-list{display:none!important}
  body.auth-screen-page.auth-ui-v250 .auth-card,
  body.auth-screen-page.auth-ui-v250 .login-card,
  body.auth-screen-page.auth-ui-v250 .register-card,
  body.auth-screen-page.auth-ui-v250 .forgot-card{max-width:680px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer{
    grid-column:1!important;
    grid-row:3!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:10px!important;
    padding-top:17px!important;
    text-align:center!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-footer-logo,
  body.auth-screen-page.auth-ui-v250 .auth-footer nav,
  body.auth-screen-page.auth-ui-v250 .auth-footer p{justify-self:center!important;text-align:center!important}
}

/* Phones */
@media(max-width:640px){
  body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{
    padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))!important;
    gap:18px!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-logo{margin-bottom:18px!important}
  body.auth-screen-page.auth-ui-v250 .auth-logo img{height:39px!important;max-width:180px!important}
  body.auth-screen-page.auth-ui-v250 .auth-intro h1{font-size:clamp(27px,9vw,36px)!important;line-height:1.08!important}
  body.auth-screen-page.auth-ui-v250 .auth-intro p{font-size:12px!important;line-height:1.62!important;max-width:420px!important}
  body.auth-screen-page.auth-ui-v250 .auth-line{width:52px!important;margin:15px auto 13px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card,
  body.auth-screen-page.auth-ui-v250 .login-card,
  body.auth-screen-page.auth-ui-v250 .register-card,
  body.auth-screen-page.auth-ui-v250 .forgot-card{
    padding:23px 17px!important;
    border-radius:17px!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  body.auth-screen-page.auth-ui-v250 .auth-card h2{font-size:25px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card>p{font-size:12px!important;margin-bottom:22px!important}
  body.auth-screen-page.auth-ui-v250 .auth-control{margin-bottom:13px!important}
  body.auth-screen-page.auth-ui-v250 .auth-field{height:50px!important;min-height:50px!important}
  body.auth-screen-page.auth-ui-v250 .auth-submit input,
  body.auth-screen-page.auth-ui-v250 .auth-submit button,
  body.auth-screen-page.auth-ui-v250 .auth-submit .button,
  body.auth-screen-page.auth-ui-v250 .auth-submit-btn{height:50px!important;min-height:50px!important}
  body.auth-screen-page.auth-ui-v250 .forgot-back-row{align-items:flex-start!important;flex-direction:column!important;gap:9px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer{margin-top:2px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer-logo img{height:27px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer nav{gap:6px 10px!important;font-size:10px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer p{font-size:9.5px!important;white-space:normal!important}
}

/* Very small phones. */
@media(max-width:380px){
  body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{padding-left:10px!important;padding-right:10px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card,
  body.auth-screen-page.auth-ui-v250 .login-card,
  body.auth-screen-page.auth-ui-v250 .register-card,
  body.auth-screen-page.auth-ui-v250 .forgot-card{padding:21px 14px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card h2{font-size:23px!important}
}

/* Short desktop windows: static footer means nothing is clipped. */
@media(min-width:921px) and (max-height:760px){
  body.auth-screen-page.auth-ui-v250 .auth-screen.auth-ui-shell-v250{padding-top:22px!important;padding-bottom:14px!important;row-gap:16px!important}
  body.auth-screen-page.auth-ui-v250 .auth-logo{margin-bottom:24px!important}
  body.auth-screen-page.auth-ui-v250 .auth-feature-list{margin-top:24px!important;gap:6px!important}
  body.auth-screen-page.auth-ui-v250 .auth-feature{padding-top:7px!important;padding-bottom:7px!important}
  body.auth-screen-page.auth-ui-v250 .auth-card,
  body.auth-screen-page.auth-ui-v250 .login-card,
  body.auth-screen-page.auth-ui-v250 .register-card,
  body.auth-screen-page.auth-ui-v250 .forgot-card{padding:25px 28px!important}
  body.auth-screen-page.auth-ui-v250 .auth-footer{min-height:48px!important;padding-top:12px!important}
}

@media(prefers-reduced-motion:reduce){
  body.auth-screen-page.auth-ui-v250 *,
  body.auth-screen-page.auth-ui-v250 *::before,
  body.auth-screen-page.auth-ui-v250 *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}


/* ===== bundled source: auth-ui-stage2-v251.css ===== */
/* ======================================================================
   OSANIME Auth UI Optimization — Stage 2 / v251
   Form & Interaction Polish
   Prerequisite: Stage 1 v250
   Scope: Login, Register, Forgot Password, Reset Password mode
   ====================================================================== */

body.auth-screen-page.auth-ui-v251{
  --auth251-control-bg:rgba(3,8,20,.48);
  --auth251-control-hover:rgba(8,14,31,.66);
  --auth251-control-focus:rgba(10,17,37,.86);
  --auth251-border:rgba(255,255,255,.12);
  --auth251-border-hover:rgba(255,255,255,.20);
  --auth251-focus:#ff5c9c;
  --auth251-valid:#55d99a;
  --auth251-error:#ff6f9f;
  --auth251-muted:#8290a7;
  --auth251-link:#ff6aa4;
}

/* Keep every control on the same vertical rhythm. */
body.auth-screen-page.auth-ui-v251 .auth-form{
  display:block!important;
  width:100%!important;
}
body.auth-screen-page.auth-ui-v251 .auth-control{
  margin:0 0 15px!important;
}
body.auth-screen-page.auth-ui-v251 .auth-form > label,
body.auth-screen-page.auth-ui-v251 .auth-control > label{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  margin:0 0 8px!important;
  color:#eef2fb!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
body.auth-screen-page.auth-ui-v251 .auth-form > label[style]{margin-top:15px!important}

/* Field shell: clear default, hover, focus, valid and error states. */
body.auth-screen-page.auth-ui-v251 .auth-field{
  position:relative!important;
  height:52px!important;
  min-height:52px!important;
  border:1px solid var(--auth251-border)!important;
  border-radius:12px!important;
  background:var(--auth251-control-bg)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field:hover{
  border-color:var(--auth251-border-hover)!important;
  background:var(--auth251-control-hover)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field:focus-within{
  border-color:rgba(255,92,156,.72)!important;
  background:var(--auth251-control-focus)!important;
  box-shadow:0 0 0 3px rgba(255,79,147,.11),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field.is-valid:not(.is-empty){
  border-color:rgba(85,217,154,.40)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field.is-invalid,
body.auth-screen-page.auth-ui-v251 .auth-field.has-error{
  border-color:rgba(255,111,159,.62)!important;
  box-shadow:0 0 0 3px rgba(255,79,147,.075)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field > span:first-child{
  width:42px!important;
  min-width:42px!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  color:#7f8aa0!important;
  font-size:14px!important;
  transition:color .18s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field:focus-within > span:first-child{color:#ff79aa!important}
body.auth-screen-page.auth-ui-v251 .auth-field input{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:0 13px 0 0!important;
  border:0!important;
  outline:0!important;
  color:#f8faff!important;
  background:transparent!important;
  font-size:13.5px!important;
  line-height:1!important;
  caret-color:#ff5c9c!important;
}
body.auth-screen-page.auth-ui-v251 .auth-field input::placeholder{color:#66748b!important;opacity:1!important}
body.auth-screen-page.auth-ui-v251 .auth-field input:-webkit-autofill,
body.auth-screen-page.auth-ui-v251 .auth-field input:-webkit-autofill:hover,
body.auth-screen-page.auth-ui-v251 .auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#f8faff!important;
  transition:background-color 9999s ease-out 0s!important;
  caret-color:#ff5c9c!important;
}

/* Password reveal controls are now true square touch targets. */
body.auth-screen-page.auth-ui-v251 .auth-eye{
  appearance:none!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  margin-right:4px!important;
  border:0!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  color:#98a4b7!important;
  background:transparent!important;
  cursor:pointer!important;
  transition:color .18s ease,background .18s ease,transform .18s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-eye:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
body.auth-screen-page.auth-ui-v251 .auth-eye:active{transform:scale(.94)!important}
body.auth-screen-page.auth-ui-v251 .auth-eye:focus-visible{
  outline:2px solid rgba(255,92,156,.78)!important;
  outline-offset:1px!important;
}
body.auth-screen-page.auth-ui-v251 .auth-eye[aria-pressed="true"]{color:#ff75aa!important;background:rgba(255,79,147,.08)!important}

/* Inline help / validation: compact and aligned. */
body.auth-screen-page.auth-ui-v251 .auth-help,
body.auth-screen-page.auth-ui-v251 .auth-field-error,
body.auth-screen-page.auth-ui-v251 .auth-password-validation,
body.auth-screen-page.auth-ui-v251 .forgot-field-help,
body.auth-screen-page.auth-ui-v251 .forgot-field-error{
  display:block!important;
  min-height:0!important;
  margin:7px 2px 0!important;
  font-size:10.8px!important;
  line-height:1.45!important;
}
body.auth-screen-page.auth-ui-v251 .auth-help{color:#728198!important}
body.auth-screen-page.auth-ui-v251 .auth-help.is-valid,
body.auth-screen-page.auth-ui-v251 .auth-password-validation.is-valid{color:#66dda2!important}
body.auth-screen-page.auth-ui-v251 .auth-help.is-invalid,
body.auth-screen-page.auth-ui-v251 .auth-password-validation.is-invalid,
body.auth-screen-page.auth-ui-v251 .auth-field-error,
body.auth-screen-page.auth-ui-v251 .forgot-field-error{color:#ff8fb3!important}

/* Minimal password strength meter created by Stage 2 JS. */
body.auth-screen-page.auth-ui-v251 .auth-strength-v251{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  margin:8px 0 0!important;
}
body.auth-screen-page.auth-ui-v251 .auth-strength-v251 i{
  display:block!important;
  height:3px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;
  transition:background .2s ease,box-shadow .2s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-strength-v251[data-strength="1"] i:nth-child(-n+1){background:#ff6f9f!important}
body.auth-screen-page.auth-ui-v251 .auth-strength-v251[data-strength="2"] i:nth-child(-n+2){background:#ffb35c!important}
body.auth-screen-page.auth-ui-v251 .auth-strength-v251[data-strength="3"] i:nth-child(-n+3){background:#9ecb65!important}
body.auth-screen-page.auth-ui-v251 .auth-strength-v251[data-strength="4"] i:nth-child(-n+4){background:#55d99a!important;box-shadow:0 0 9px rgba(85,217,154,.16)!important}

/* General feedback boxes align with Forgot Password messages. */
body.auth-screen-page.auth-ui-v251 .auth-inline-message,
body.auth-screen-page.auth-ui-v251 .forgot-message{
  border-radius:12px!important;
  margin:0 0 18px!important;
  padding:12px 13px!important;
  font-size:11.5px!important;
  line-height:1.55!important;
}
body.auth-screen-page.auth-ui-v251 .auth-inline-message i{margin-right:6px!important}

/* Long login security copy becomes a subtle note, not a visual wall. */
body.auth-screen-page.auth-ui-v251 .auth-security-hint{
  position:relative!important;
  display:block!important;
  margin:8px 2px 0!important;
  padding-left:18px!important;
  color:#718096!important;
  font-size:10.3px!important;
  line-height:1.5!important;
}
body.auth-screen-page.auth-ui-v251 .auth-security-hint::before{
  content:"\f3ed";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:1px;
  color:#8b96a9;
}

/* Remember-me is visually aligned and keyboard accessible. */
body.auth-screen-page.auth-ui-v251 .auth-remember-row{margin:14px 0 12px!important}
body.auth-screen-page.auth-ui-v251 .auth-remember-label{
  gap:9px!important;
  color:#a9b4c6!important;
  font-size:11.5px!important;
  font-weight:650!important;
}
body.auth-screen-page.auth-ui-v251 .auth-remember-box{
  width:18px!important;height:18px!important;min-width:18px!important;
  border-radius:5px!important;
  border-color:rgba(255,255,255,.25)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-remember-label input:focus-visible + .auth-remember-box{
  outline:2px solid rgba(255,92,156,.78)!important;
  outline-offset:2px!important;
}

/* Secondary actions are explicit but lower priority than Login. */
body.auth-screen-page.auth-ui-v251 .auth-forgot{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0 0 15px!important;
}
body.auth-screen-page.auth-ui-v251 .auth-forgot-button{
  min-height:38px!important;
  padding:0 11px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#c0cad9!important;
  background:rgba(255,255,255,.025)!important;
  font-size:10.8px!important;
  font-weight:750!important;
  transition:border-color .18s ease,color .18s ease,background .18s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-forgot-button:hover{
  border-color:rgba(255,79,147,.28)!important;
  color:#ff8ab8!important;
  background:rgba(255,79,147,.055)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-forgot-button:focus-visible,
body.auth-screen-page.auth-ui-v251 a:focus-visible{
  outline:2px solid rgba(255,92,156,.74)!important;
  outline-offset:3px!important;
}

/* Main submit button: stable geometry, loading lock and tactile states. */
body.auth-screen-page.auth-ui-v251 .auth-submit{margin-top:4px!important}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn{
  position:relative!important;
  overflow:hidden!important;
  height:52px!important;
  min-height:52px!important;
  border-radius:12px!important;
  box-shadow:0 10px 28px rgba(255,55,132,.15)!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn:hover:not(:disabled){
  filter:brightness(1.055)!important;
  box-shadow:0 13px 32px rgba(255,55,132,.21)!important;
  transform:translateY(-1px)!important;
}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn:active:not(:disabled){transform:translateY(0) scale(.992)!important}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn:focus-visible{
  outline:2px solid #fff!important;
  outline-offset:3px!important;
}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn.is-loading,
body.auth-screen-page.auth-ui-v251 .auth-submit-btn:disabled{
  cursor:wait!important;
  opacity:.78!important;
  filter:saturate(.78)!important;
  transform:none!important;
}
body.auth-screen-page.auth-ui-v251 .auth-submit-btn.is-loading:not([data-forgot-submit])::after{
  content:""!important;
  width:16px!important;
  height:16px!important;
  margin-left:9px!important;
  display:inline-block!important;
  vertical-align:-3px!important;
  border:2px solid rgba(255,255,255,.35)!important;
  border-top-color:#fff!important;
  border-radius:50%!important;
  animation:auth251-spin .7s linear infinite!important;
}
@keyframes auth251-spin{to{transform:rotate(360deg)}}

/* Register checkbox row: neat boundary without making the whole text feel like a button. */
body.auth-screen-page.auth-ui-v251 .register-agree-clean{
  margin:5px 0 14px!important;
  padding:11px 12px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.018)!important;
  color:#aab5c6!important;
  font-size:11px!important;
  line-height:1.55!important;
}
body.auth-screen-page.auth-ui-v251 .register-agree-clean:focus-within{
  border-color:rgba(255,79,147,.25)!important;
  background:rgba(255,79,147,.035)!important;
}

/* Register two-column names collapse earlier to avoid squeezed labels. */
body.auth-screen-page.auth-ui-v251 .register-name-grid{gap:12px!important}

/* Forgot page actions become equal, tidy touch targets. */
body.auth-screen-page.auth-ui-v251 .forgot-back-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
body.auth-screen-page.auth-ui-v251 .forgot-back-link,
body.auth-screen-page.auth-ui-v251 .forgot-register-link{
  min-height:38px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
  color:#aeb9ca!important;
  background:rgba(255,255,255,.02)!important;
  font-size:10.8px!important;
  font-weight:750!important;
}
body.auth-screen-page.auth-ui-v251 .forgot-back-link:hover,
body.auth-screen-page.auth-ui-v251 .forgot-register-link:hover{
  color:#ff8ab8!important;
  border-color:rgba(255,79,147,.25)!important;
}

/* Footer links get reliable keyboard state without changing Stage 1 layout. */
body.auth-screen-page.auth-ui-v251 .auth-footer nav a:focus-visible{
  border-radius:5px!important;
  outline:2px solid rgba(255,92,156,.70)!important;
  outline-offset:3px!important;
}

@media(max-width:640px){
  body.auth-screen-page.auth-ui-v251 .auth-form > label,
  body.auth-screen-page.auth-ui-v251 .auth-control > label{font-size:11px!important;margin-bottom:7px!important}
  body.auth-screen-page.auth-ui-v251 .auth-field{height:50px!important;min-height:50px!important;border-radius:11px!important}
  body.auth-screen-page.auth-ui-v251 .auth-field input{font-size:13px!important}
  body.auth-screen-page.auth-ui-v251 .auth-forgot{grid-template-columns:1fr!important;gap:7px!important;margin-bottom:13px!important}
  body.auth-screen-page.auth-ui-v251 .auth-forgot-button{min-height:40px!important}
  body.auth-screen-page.auth-ui-v251 .forgot-back-row{grid-template-columns:1fr!important}
  body.auth-screen-page.auth-ui-v251 .forgot-back-link,
  body.auth-screen-page.auth-ui-v251 .forgot-register-link{min-height:40px!important}
  body.auth-screen-page.auth-ui-v251 .register-name-grid{grid-template-columns:1fr!important;gap:0!important}
}

@media(prefers-reduced-motion:reduce){
  body.auth-screen-page.auth-ui-v251 .auth-submit-btn.is-loading::after{animation-duration:1.4s!important}
}

/* Existing email checkmark is shown only after browser validation succeeds. */
body.auth-screen-page.auth-ui-v251 .auth-check{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  margin-right:5px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#66dda2!important;
  background:rgba(85,217,154,.08)!important;
  opacity:0!important;
  transform:scale(.78)!important;
  transition:opacity .18s ease,transform .18s ease!important;
  pointer-events:none!important;
}
body.auth-screen-page.auth-ui-v251 .auth-email-control.is-valid .auth-check{
  opacity:1!important;
  transform:scale(1)!important;
}

/* Forgot Password already swaps its own icon to a spinner. Avoid a second spinner. */
body.auth-screen-page.auth-ui-v251 .auth-submit-btn.is-loading[data-forgot-submit]::after{display:none!important}


/* ===== bundled source: auth-ui-stage3-v252.css ===== */
/*
 * OSANIME Auth UI Optimization — Stage 3 v252
 * Scope: OAuth + Passkey visual hierarchy only.
 * Prerequisite: Auth UI Stage 2 v251 + OAuth root fix v249 + Passkeys Stage 11.
 *
 * Important: never reuse legacy .auth-socials/.auth-divider selectors here.
 */

body.auth-screen-page {
  --auth-alt-surface: rgba(6, 11, 27, .54);
  --auth-alt-border: rgba(255, 255, 255, .085);
  --auth-alt-text: #f6f8ff;
  --auth-alt-muted: #9ca8bf;
  --auth-alt-focus: rgba(255, 79, 147, .42);
  --auth-discord: #5865f2;
  --auth-facebook: #1877f2;
}

/* Alternate sign-in area: clearly secondary to the pink primary CTA. */
body.auth-screen-page .auth-alt-methods-v252 {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--auth-alt-border);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 79, 147, .055), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),
    var(--auth-alt-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

body.auth-screen-page .auth-alt-methods-register-v252 {
  margin-top: 16px;
}

/* v249 divider remains immune to the legacy global auth-divider hide rule. */
body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-divider-v249 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 18px !important;
  margin: 0 !important;
  gap: 11px !important;
}

body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-divider-v249 > span {
  display: block !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  min-width: 18px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12)) !important;
}

body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-divider-v249 > span:last-child {
  background: linear-gradient(90deg, rgba(255,255,255,.12), transparent) !important;
}

body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-divider-v249 > em {
  display: block !important;
  color: var(--auth-alt-muted) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Provider grid: complete styling so Stage 3 does not visually depend on old OAuth CSS. */
body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-grid-v249 {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 0 !important;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider {
  --provider-accent: rgba(255,255,255,.28);
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  visibility: visible !important;
  opacity: 1;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  gap: 9px !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  color: var(--auth-alt-text) !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--provider-accent);
  opacity: .8;
  pointer-events: none;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider > b {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08);
  font-size: 15px !important;
  line-height: 1 !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.17);
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider > span {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #edf1fb !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.discord {
  --provider-accent: var(--auth-discord);
}
body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.discord > b {
  color: #fff !important;
  background: linear-gradient(145deg, #6875ff, #5865f2) !important;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.google {
  --provider-accent: #e7eaf0;
}
body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.google > b {
  color: transparent !important;
  background: #fff !important;
}
body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.google > b i {
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.facebook {
  --provider-accent: var(--auth-facebook);
}
body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.facebook > b {
  color: #fff !important;
  background: linear-gradient(145deg, #2584ff, #1877f2) !important;
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.is-ready:focus-visible,
body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn:focus-visible {
  outline: none !important;
  border-color: rgba(255, 106, 167, .72) !important;
  box-shadow: 0 0 0 3px var(--auth-alt-focus), 0 10px 26px rgba(0,0,0,.18) !important;
}

@media (hover:hover) and (pointer:fine) {
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.is-ready:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.22) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.045);
  }
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.is-ready:active {
  transform: translateY(0) scale(.985);
}

body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.is-disabled {
  opacity: .44 !important;
  cursor: not-allowed !important;
  filter: saturate(.55);
}
body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider.is-disabled::before {
  opacity: .3;
}

/* Passkey sits below OAuth as a strong security-focused secondary method. */
body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-wrap {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0 !important;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.065);
}

body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn {
  position: relative;
  width: 100% !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(255, 92, 157, .20) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 50% -80%, rgba(255,79,147,.15), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  color: #f8f9ff !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #ff6ba7 !important;
  font-size: 15px;
  background: rgba(255,79,147,.09);
  border: 1px solid rgba(255,79,147,.14);
}

@media (hover:hover) and (pointer:fine) {
  body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 92, 157, .42) !important;
    background:
      radial-gradient(circle at 50% -80%, rgba(255,79,147,.22), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)) !important;
    box-shadow: 0 11px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
  }
}

body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn:active:not(:disabled) {
  transform: translateY(0) scale(.99);
}

body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn:disabled {
  opacity: .55 !important;
  cursor: wait !important;
  transform: none !important;
}

body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-status {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px;
  text-align: center;
  color: #8fd7ae;
  font-size: 10.5px;
  line-height: 1.45;
}
body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-status:not(:empty) {
  min-height: 16px !important;
  margin-top: 2px !important;
}
body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-status.is-error {
  color: #ff9aaa;
}

/* Give the account-switch link breathing room after alternative methods. */
body.auth-screen-page .auth-alt-methods-v252 + .auth-bottom-link {
  margin-top: 20px !important;
}

/* Tablet / compact desktop: keep provider cards readable. */
@media (max-width: 760px) {
  body.auth-screen-page .auth-alt-methods-v252 {
    padding: 12px;
    border-radius: 15px;
  }
  body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-grid-v249 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-grid-v249 > :nth-child(3) {
    grid-column: 1 / -1;
  }
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider {
    min-height: 52px !important;
  }
}

/* Narrow phones: one provider per row avoids clipped provider names. */
@media (max-width: 420px) {
  body.auth-screen-page .auth-alt-methods-v252 {
    margin-top: 14px;
    padding: 10px;
    gap: 10px;
    border-radius: 14px;
  }
  body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-grid-v249 {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .osanime-oauth-grid-v249 > :nth-child(3) {
    grid-column: auto;
  }
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider {
    min-height: 49px !important;
    padding: 7px 9px !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider > b {
    flex-basis: 31px !important;
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    border-radius: 9px !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider > span {
    font-size: 11px !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn {
    min-height: 48px !important;
  }
}

/* Short laptop screens: reduce only decorative spacing, not touch targets. */
@media (min-width: 921px) and (max-height: 760px) {
  body.auth-screen-page .auth-alt-methods-v252 {
    margin-top: 12px;
    padding: 10px 12px;
    gap: 9px;
  }
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider {
    min-height: 48px !important;
  }
  body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-wrap {
    padding-top: 8px;
  }
  body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn {
    min-height: 47px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-screen-page .auth-alt-methods-v252 .oauth-stage2-provider,
  body.auth-screen-page .auth-alt-methods-v252 .auth-passkey-btn {
    transition: none !important;
    transform: none !important;
  }
}


/* ===== bundled source: auth-ui-stage4-v253.css ===== */
/*
 * OSANIME Auth UI Optimization — Stage 4 v253
 * Scope: Forgot Password + Reset Password recovery UX.
 * Prerequisite: Auth UI Stage 3 v252.
 */

body.auth-screen-page.auth-ui-v253{
  --auth-recovery-pink:#ff4f93;
  --auth-recovery-pink-soft:rgba(255,79,147,.14);
  --auth-recovery-green:#67e0aa;
  --auth-recovery-red:#ff8da9;
  --auth-recovery-surface:rgba(7,13,30,.66);
  --auth-recovery-border:rgba(255,255,255,.09);
  --auth-recovery-muted:#9ba8bd;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:start!important;
  gap:14px!important;
  margin:0 0 20px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253 h2{
  margin:3px 0 5px!important;
  font-size:28px!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253 p{
  margin:0!important;
  color:#98a5b9!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253 p span{
  color:#ff79ad!important;
  font-weight:800!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-card-icon-v253{
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  margin:0!important;
  border:1px solid rgba(255,104,164,.24)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,134,180,.22),transparent 42%),
    linear-gradient(145deg,rgba(255,79,147,.17),rgba(255,79,147,.055))!important;
  color:#ff82b2!important;
  font-size:20px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-kicker-v253,
body.auth-screen-page.auth-ui-v253 .auth-recovery-eyebrow-v253{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content!important;
  max-width:100%!important;
  color:#ff8fba!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-eyebrow-v253{
  min-height:28px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,79,147,.18)!important;
  border-radius:999px!important;
  background:rgba(255,79,147,.065)!important;
  margin-bottom:16px!important;
}

/* Reset-mode left side gets recovery-specific content rather than generic music marketing. */
body.auth-screen-page.auth-ui-v253.reset-password-page .auth-left-recovery-v253{
  align-self:stretch!important;
}

body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-intro-v253 h1{
  max-width:560px!important;
}

body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-intro-v253 p span{
  color:#ff78ad!important;
  font-weight:800!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-steps-v253{
  display:grid!important;
  gap:10px!important;
  width:min(100%,520px)!important;
  margin-top:34px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  min-height:62px!important;
  padding:10px 12px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:14px!important;
  background:rgba(8,14,31,.48)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253>span{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.055)!important;
  color:#8e9bb0!important;
  border:1px solid rgba(255,255,255,.07)!important;
  font-size:12px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253 b{
  display:block!important;
  color:#edf1f8!important;
  font-size:12px!important;
  line-height:1.25!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253 small{
  display:block!important;
  margin-top:3px!important;
  color:#8d99ad!important;
  font-size:10.5px!important;
  line-height:1.35!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253.is-complete>span{
  color:#6ce1aa!important;
  background:rgba(65,205,143,.09)!important;
  border-color:rgba(83,216,157,.16)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253.is-active{
  border-color:rgba(255,89,153,.20)!important;
  background:linear-gradient(90deg,rgba(255,79,147,.075),rgba(8,14,31,.52))!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-step-v253.is-active>span{
  color:#fff!important;
  background:linear-gradient(145deg,#ff65a2,#e93c7f)!important;
  border-color:transparent!important;
  box-shadow:0 8px 20px rgba(255,79,147,.18)!important;
}

/* Three-stage progress: Request -> Email/link -> New password. */
body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-v253{
  display:grid!important;
  grid-template-columns:28px minmax(22px,1fr) 28px minmax(22px,1fr) 28px!important;
  align-items:center!important;
  width:100%!important;
  margin:2px 0 20px!important;
  padding:0 3px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-v253>span{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:#0c1426!important;
  color:#748197!important;
  font-size:10px!important;
  font-weight:850!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-v253>i{
  display:block!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(255,79,147,.32),rgba(255,255,255,.08))!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-v253>span.is-complete{
  color:#07130d!important;
  border-color:rgba(103,224,170,.45)!important;
  background:#67e0aa!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-v253>span.is-active{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(145deg,#ff67a3,#e93c7f)!important;
  box-shadow:0 0 0 4px rgba(255,79,147,.10)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-progress-request-v253>i{
  background:rgba(255,255,255,.07)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-form-v253{
  display:grid!important;
  gap:16px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-form-v253 .auth-control{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-form-v253 .auth-control>label{
  margin:0!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-submit-v253{
  margin:2px 0 0!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:-7px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:26px!important;
  padding:0 9px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.025)!important;
  color:#7f8ca0!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  transition:border-color .16s ease,color .16s ease,background .16s ease!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253>span i{
  font-size:5px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253>span.is-ok{
  color:#78dfb0!important;
  border-color:rgba(103,224,170,.18)!important;
  background:rgba(103,224,170,.055)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-error-v253{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:start!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-error-v253 b{
  display:block!important;
  margin-bottom:2px!important;
  color:#fff!important;
  font-size:11px!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-error-v253 span{
  display:block!important;
  color:#ffb1c4!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-security-note-v253{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin:16px 0 0!important;
  padding:11px 12px!important;
  border:1px solid rgba(255,255,255,.065)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.022)!important;
  color:#8592a7!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-security-note-v253 i{
  margin-top:2px!important;
  color:#aeb8c9!important;
}

/* Invalid/expired reset links are a deliberate recovery state, not a broken form. */
body.auth-screen-page.auth-ui-v253 .auth-recovery-invalid-v253{
  display:grid!important;
  justify-items:center!important;
  gap:10px!important;
  padding:20px 4px 2px!important;
  text-align:center!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-invalid-icon-v253{
  display:grid!important;
  place-items:center!important;
  width:64px!important;
  height:64px!important;
  margin:2px auto 3px!important;
  border:1px solid rgba(255,141,169,.18)!important;
  border-radius:20px!important;
  background:rgba(255,141,169,.06)!important;
  color:#ff9cb4!important;
  font-size:23px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-invalid-v253 p{
  max-width:390px!important;
  margin:0 0 6px!important;
  color:#a5b0c2!important;
  font-size:12px!important;
  line-height:1.55!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-primary-link-v253,
body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:44px!important;
  padding:0 13px!important;
  border-radius:12px!important;
  font-size:11px!important;
  font-weight:850!important;
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-primary-link-v253{
  border:1px solid transparent!important;
  background:linear-gradient(180deg,#ff62a4,#ec3f82)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(255,79,147,.15)!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253{
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.025)!important;
  color:#c1cad8!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-primary-link-v253:focus-visible,
body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(255,79,147,.20)!important;
}

@media (hover:hover) and (pointer:fine){
  body.auth-screen-page.auth-ui-v253 .auth-recovery-primary-link-v253:hover,
  body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253:hover{
    transform:translateY(-1px)!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253:hover{
    border-color:rgba(255,107,165,.22)!important;
    background:rgba(255,79,147,.055)!important;
  }
}

/* Forgot-password request timeline on the left. */
body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253{
  display:grid!important;
  grid-template-columns:auto 24px auto 24px auto!important;
  align-items:center!important;
  width:min(100%,510px)!important;
  margin:27px 0 20px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div{
  display:grid!important;
  justify-items:center!important;
  gap:6px!important;
  min-width:0!important;
  color:#758198!important;
  text-align:center!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div>span{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:50%!important;
  background:#0b1426!important;
  color:#8390a5!important;
  font-size:10px!important;
  font-weight:850!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div>b{
  max-width:104px!important;
  overflow:hidden!important;
  color:#7f8ca0!important;
  font-size:9.5px!important;
  line-height:1.25!important;
  font-weight:750!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div.is-active>span{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(145deg,#ff67a3,#e93c7f)!important;
  box-shadow:0 0 0 4px rgba(255,79,147,.09)!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div.is-active>b{color:#e9edf5!important}
body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>i{
  display:block!important;
  height:1px!important;
  margin-top:-16px!important;
  background:rgba(255,255,255,.08)!important;
}

/* Success page: remove the temptation to submit a second request immediately. */
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-v253{
  display:grid!important;
  gap:17px!important;
  opacity:.01;
  transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-v253.is-ready{
  opacity:1!important;
  transform:none!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-success-check-v253{
  display:grid!important;
  place-items:center!important;
  width:46px!important;
  height:46px!important;
  margin:0 auto!important;
  border:1px solid rgba(103,224,170,.24)!important;
  border-radius:15px!important;
  background:rgba(103,224,170,.08)!important;
  color:#6de1ab!important;
  font-size:17px!important;
}

body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253{
  display:grid!important;
  gap:8px!important;
  padding:12px!important;
  border:1px solid var(--auth-recovery-border)!important;
  border-radius:14px!important;
  background:var(--auth-recovery-surface)!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253>div{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:48px!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253>div>span{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.025)!important;
  color:#77849a!important;
  font-size:10px!important;
  font-weight:850!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253 b{
  display:block!important;
  color:#c9d1dd!important;
  font-size:11px!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253 small{
  display:block!important;
  margin-top:2px!important;
  color:#77849a!important;
  font-size:9.5px!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253>div.is-complete>span{
  color:#07130d!important;
  border-color:transparent!important;
  background:#67e0aa!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253>div.is-active>span{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(145deg,#ff67a3,#e93c7f)!important;
}
body.auth-screen-page.auth-ui-v253 .auth-recovery-success-steps-v253>div.is-active b{color:#fff!important}

body.auth-screen-page.auth-ui-v253 .auth-recovery-success-actions-v253{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}

/* Keep footer in normal flow across long error/recovery states. */
body.auth-screen-page.auth-ui-v253 .auth-footer{
  align-self:end!important;
}

@media(max-width:1060px){
  body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-side-steps-v253{
    margin-top:20px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
  }
  body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-side-step-v253{
    grid-template-columns:34px minmax(0,1fr)!important;
  }
  body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-side-step-v253>span{
    width:34px!important;height:34px!important;
  }
}

@media(max-width:780px){
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:12px!important;
    margin-bottom:17px!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-icon-v253{
    width:46px!important;height:46px!important;min-width:46px!important;border-radius:14px!important;font-size:18px!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253 h2{font-size:23px!important}
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253 p{font-size:11.5px!important}

  body.auth-screen-page.auth-ui-v253.reset-password-page .auth-recovery-side-steps-v253{
    display:none!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253{
    margin:18px auto 10px!important;
    width:min(100%,390px)!important;
  }
  body.auth-screen-page.auth-ui-v253 .forgot-features{margin-top:14px!important}
  body.auth-screen-page.auth-ui-v253 .auth-recovery-success-actions-v253{grid-template-columns:1fr!important}
}

@media(max-width:520px){
  body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253>div>b{display:none!important}
  body.auth-screen-page.auth-ui-v253 .auth-recovery-side-progress-v253{
    grid-template-columns:30px minmax(18px,1fr) 30px minmax(18px,1fr) 30px!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253>span{
    width:100%!important;
    justify-content:flex-start!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-invalid-v253{padding-top:12px!important}
}

@media(max-width:360px){
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-head-v253{
    grid-template-columns:1fr!important;
  }
  body.auth-screen-page.auth-ui-v253 .auth-recovery-card-icon-v253{margin-bottom:2px!important}
}

@media(prefers-reduced-motion:reduce){
  body.auth-screen-page.auth-ui-v253 .auth-recovery-success-v253,
  body.auth-screen-page.auth-ui-v253 .auth-recovery-primary-link-v253,
  body.auth-screen-page.auth-ui-v253 .auth-recovery-secondary-link-v253,
  body.auth-screen-page.auth-ui-v253 .auth-recovery-recommendations-v253>span{
    transition:none!important;
  }
}


/* ===== bundled source: auth-ui-stage5-v254.css ===== */
/* OSANIME Auth UI Optimization - Stage 5 v254
 * Mobile + Accessibility + Footer Final Polish
 * Incremental on top of v250-v253. No backend/auth behavior changes.
 */

:root{
  --auth254-focus:#ff79ad;
  --auth254-focus-soft:rgba(255,121,173,.28);
  --auth254-border:rgba(255,255,255,.10);
  --auth254-text:#f7f9ff;
  --auth254-muted:#aeb9cc;
  --auth254-footer:#8997ad;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:16px;
}

body.auth-screen-page.auth-ui-v254{
  min-width:280px!important;
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
}

body.auth-screen-page.auth-ui-v254 .auth-screen.auth-ui-shell-v250{
  min-height:100vh!important;
  min-height:100svh!important;
  min-height:100dvh!important;
  width:100%!important;
  max-width:1600px!important;
  margin-inline:auto!important;
  padding-left:max(24px,env(safe-area-inset-left))!important;
  padding-right:max(24px,env(safe-area-inset-right))!important;
}

body.auth-screen-page.auth-ui-v254 #auth-main-content:focus{outline:none!important}

/* Long translated labels/content must never break the auth card. */
body.auth-screen-page.auth-ui-v254 .auth-card,
body.auth-screen-page.auth-ui-v254 .auth-card *,
body.auth-screen-page.auth-ui-v254 .auth-footer,
body.auth-screen-page.auth-ui-v254 .auth-footer *{
  min-width:0;
}
body.auth-screen-page.auth-ui-v254 .auth-card h2,
body.auth-screen-page.auth-ui-v254 .auth-card>p,
body.auth-screen-page.auth-ui-v254 .auth-bottom-link,
body.auth-screen-page.auth-ui-v254 .auth-forgot-button,
body.auth-screen-page.auth-ui-v254 .oauth-stage2-provider,
body.auth-screen-page.auth-ui-v254 .auth-passkey-btn,
body.auth-screen-page.auth-ui-v254 .auth-footer a,
body.auth-screen-page.auth-ui-v254 .auth-footer p{
  overflow-wrap:anywhere;
}
body.auth-screen-page.auth-ui-v254 .auth-card h2,
body.auth-screen-page.auth-ui-v254 .auth-intro h1{text-wrap:balance}

/* Reliable keyboard focus across native, OAuth, Passkey, recovery and footer actions. */
body.auth-screen-page.auth-ui-v254 :where(
  a,
  button,
  input,
  [role="button"]
):focus-visible{
  outline:3px solid var(--auth254-focus)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 4px rgba(4,9,22,.90),0 0 0 7px var(--auth254-focus-soft)!important;
}
body.auth-screen-page.auth-ui-v254 .auth-field:focus-within{
  border-color:rgba(255,121,173,.72)!important;
  box-shadow:0 0 0 3px rgba(255,79,147,.12)!important;
}
body.auth-screen-page.auth-ui-v254 .auth-field input:focus{outline:none!important;box-shadow:none!important}

/* Touch targets: 44px minimum without making desktop visually oversized. */
body.auth-screen-page.auth-ui-v254 :where(
  .auth-eye,
  .auth-forgot-button,
  .forgot-back-link,
  .forgot-register-link,
  .auth-recovery-primary-link-v253,
  .auth-recovery-secondary-link-v253,
  .oauth-stage2-provider,
  .auth-passkey-btn,
  .auth-footer-logo,
  .auth-footer nav a
){
  min-height:44px!important;
  touch-action:manipulation;
}
body.auth-screen-page.auth-ui-v254 .auth-eye{
  min-width:44px!important;
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 44px!important;
}
body.auth-screen-page.auth-ui-v254 .auth-submit-btn{
  min-height:50px!important;
  touch-action:manipulation;
}
body.auth-screen-page.auth-ui-v254 .auth-remember-label,
body.auth-screen-page.auth-ui-v254 .register-agree-clean{
  min-height:44px!important;
}
body.auth-screen-page.auth-ui-v254 .auth-remember-label{align-items:center!important}

/* Accessibility feedback states. */
body.auth-screen-page.auth-ui-v254 [aria-invalid="true"]{
  caret-color:#ff8eac!important;
}
body.auth-screen-page.auth-ui-v254 [role="alert"],
body.auth-screen-page.auth-ui-v254 [role="status"]{
  scroll-margin-block:18px;
}
body.auth-screen-page.auth-ui-v254 form[aria-busy="true"] .auth-submit-btn{
  pointer-events:none!important;
}

/* Slight contrast lift for secondary/support text. */
body.auth-screen-page.auth-ui-v254 .auth-card>p,
body.auth-screen-page.auth-ui-v254 .auth-help,
body.auth-screen-page.auth-ui-v254 .auth-security-hint,
body.auth-screen-page.auth-ui-v254 .forgot-field-help,
body.auth-screen-page.auth-ui-v254 .forgot-security-note,
body.auth-screen-page.auth-ui-v254 .auth-bottom-link{
  color:var(--auth254-muted)!important;
}

/* Final footer: one shared geometry for Login/Register/Forgot/Reset. */
body.auth-screen-page.auth-ui-v254 .auth-footer{
  grid-column:1 / -1!important;
  position:static!important;
  width:100%!important;
  max-width:1180px!important;
  min-height:64px!important;
  margin:18px auto 0!important;
  padding:18px 0 2px!important;
  border-top:1px solid rgba(255,255,255,.085)!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:28px!important;
  row-gap:10px!important;
  background:transparent!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer-logo{
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:4px 0!important;
  border-radius:8px!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer-logo img{
  width:auto!important;
  height:30px!important;
  max-width:150px!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer nav{
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:2px 8px!important;
  line-height:1.3!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer nav a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  color:#a7b2c4!important;
  font-size:11px!important;
  font-weight:650!important;
  border-radius:8px!important;
  text-align:center!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer nav i{
  color:rgba(255,79,147,.55)!important;
  font-size:8px!important;
}
body.auth-screen-page.auth-ui-v254 .auth-footer p{
  justify-self:end!important;
  margin:0!important;
  color:var(--auth254-footer)!important;
  font-size:10.5px!important;
  line-height:1.5!important;
  text-align:right!important;
  white-space:normal!important;
}

/* Tablet: hero remains useful, card stays dominant, footer becomes centered. */
@media(max-width:920px){
  body.auth-screen-page.auth-ui-v254 .auth-screen.auth-ui-shell-v250{
    padding-left:max(20px,env(safe-area-inset-left))!important;
    padding-right:max(20px,env(safe-area-inset-right))!important;
    padding-top:max(24px,env(safe-area-inset-top))!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
    gap:20px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-left{padding-inline:4px!important}
  body.auth-screen-page.auth-ui-v254 .auth-logo{margin-bottom:18px!important}
  body.auth-screen-page.auth-ui-v254 .auth-intro p{max-width:540px!important}
  body.auth-screen-page.auth-ui-v254 .auth-right{width:100%!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:4px!important;
    margin-top:8px!important;
    padding-top:15px!important;
    text-align:center!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-footer-logo,
  body.auth-screen-page.auth-ui-v254 .auth-footer nav,
  body.auth-screen-page.auth-ui-v254 .auth-footer p{
    justify-self:center!important;
    text-align:center!important;
  }
}

/* Phones: avoid iOS input zoom, keyboard clipping, horizontal overflow and tiny links. */
@media(max-width:640px){
  body.auth-screen-page.auth-ui-v254 .auth-screen.auth-ui-shell-v250{
    padding-top:max(14px,env(safe-area-inset-top))!important;
    padding-bottom:max(16px,env(safe-area-inset-bottom))!important;
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    gap:14px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-left{gap:0!important}
  body.auth-screen-page.auth-ui-v254 .auth-logo{margin-bottom:12px!important}
  body.auth-screen-page.auth-ui-v254 .auth-logo img{height:36px!important;max-width:168px!important}
  body.auth-screen-page.auth-ui-v254 .auth-intro h1{
    font-size:clamp(25px,8.4vw,33px)!important;
    line-height:1.08!important;
    margin-bottom:0!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-line{margin:12px auto 10px!important}
  body.auth-screen-page.auth-ui-v254 .auth-intro p{
    font-size:11.5px!important;
    line-height:1.55!important;
    max-width:390px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-card,
  body.auth-screen-page.auth-ui-v254 .login-card,
  body.auth-screen-page.auth-ui-v254 .register-card,
  body.auth-screen-page.auth-ui-v254 .forgot-card{
    width:100%!important;
    padding:20px 16px!important;
    border-radius:16px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-card h2{font-size:24px!important;line-height:1.15!important}
  body.auth-screen-page.auth-ui-v254 .auth-card>p{font-size:11.5px!important;line-height:1.55!important;margin-bottom:18px!important}
  body.auth-screen-page.auth-ui-v254 .auth-form>label,
  body.auth-screen-page.auth-ui-v254 .auth-control>label{font-size:11px!important}
  body.auth-screen-page.auth-ui-v254 .auth-field{
    min-height:52px!important;
    height:52px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-field input{
    font-size:16px!important; /* prevents Safari auto-zoom */
    line-height:1.25!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-submit-btn{min-height:52px!important;height:52px!important;font-size:13px!important}
  body.auth-screen-page.auth-ui-v254 .auth-forgot-button,
  body.auth-screen-page.auth-ui-v254 .forgot-back-link,
  body.auth-screen-page.auth-ui-v254 .forgot-register-link{min-height:44px!important;font-size:11px!important}
  body.auth-screen-page.auth-ui-v254 .register-agree-clean{padding:10px 11px!important}
  body.auth-screen-page.auth-ui-v254 .auth-alt-methods-v252{padding:12px!important}
  body.auth-screen-page.auth-ui-v254 .oauth-stage2-provider,
  body.auth-screen-page.auth-ui-v254 .auth-passkey-btn{min-height:48px!important}

  body.auth-screen-page.auth-ui-v254 .auth-footer{
    width:100%!important;
    margin-top:4px!important;
    padding:14px 0 max(2px,env(safe-area-inset-bottom))!important;
    gap:2px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-footer-logo{min-height:40px!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer-logo img{height:26px!important;max-width:132px!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer nav{
    width:100%!important;
    gap:0 4px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-footer nav a{
    min-height:40px!important;
    padding:0 7px!important;
    font-size:10.5px!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-footer nav i{display:none!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer p{font-size:9.5px!important;padding-inline:6px!important}
}

/* Small phones down to 320px-ish without crushed controls. */
@media(max-width:380px){
  body.auth-screen-page.auth-ui-v254 .auth-screen.auth-ui-shell-v250{
    padding-left:max(9px,env(safe-area-inset-left))!important;
    padding-right:max(9px,env(safe-area-inset-right))!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-card,
  body.auth-screen-page.auth-ui-v254 .login-card,
  body.auth-screen-page.auth-ui-v254 .register-card,
  body.auth-screen-page.auth-ui-v254 .forgot-card{padding:18px 13px!important}
  body.auth-screen-page.auth-ui-v254 .auth-card h2{font-size:22px!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer nav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer nav a:last-of-type{grid-column:1 / -1!important}
}

/* Landscape phones / very short browser windows: remove decorative height first. */
@media(max-height:560px) and (orientation:landscape){
  body.auth-screen-page.auth-ui-v254 .auth-screen.auth-ui-shell-v250{
    padding-top:max(10px,env(safe-area-inset-top))!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-logo{margin-bottom:8px!important}
  body.auth-screen-page.auth-ui-v254 .auth-intro p,
  body.auth-screen-page.auth-ui-v254 .auth-line{display:none!important}
  body.auth-screen-page.auth-ui-v254 .auth-footer{padding-top:8px!important;margin-top:0!important}
}

/* Users asking for more contrast get stronger boundaries, not more glow. */
@media(prefers-contrast:more){
  body.auth-screen-page.auth-ui-v254 .auth-card,
  body.auth-screen-page.auth-ui-v254 .auth-field,
  body.auth-screen-page.auth-ui-v254 .auth-alt-methods-v252,
  body.auth-screen-page.auth-ui-v254 .forgot-security-note{
    border-color:rgba(255,255,255,.28)!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-card>p,
  body.auth-screen-page.auth-ui-v254 .auth-help,
  body.auth-screen-page.auth-ui-v254 .auth-security-hint,
  body.auth-screen-page.auth-ui-v254 .auth-bottom-link,
  body.auth-screen-page.auth-ui-v254 .auth-footer nav a,
  body.auth-screen-page.auth-ui-v254 .auth-footer p{color:#d2d9e5!important}
}

/* Windows High Contrast / forced colors. */
@media(forced-colors:active){
  body.auth-screen-page.auth-ui-v254 .auth-card,
  body.auth-screen-page.auth-ui-v254 .auth-field,
  body.auth-screen-page.auth-ui-v254 .auth-alt-methods-v252,
  body.auth-screen-page.auth-ui-v254 .auth-footer{border:1px solid CanvasText!important}
  body.auth-screen-page.auth-ui-v254 :where(a,button,input):focus-visible{
    outline:3px solid Highlight!important;
    box-shadow:none!important;
  }
  body.auth-screen-page.auth-ui-v254 .auth-submit-btn,
  body.auth-screen-page.auth-ui-v254 .oauth-stage2-provider,
  body.auth-screen-page.auth-ui-v254 .auth-passkey-btn{forced-color-adjust:auto}
}

/* Motion preference is authoritative in Stage 5. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body.auth-screen-page.auth-ui-v254 *,
  body.auth-screen-page.auth-ui-v254 *::before,
  body.auth-screen-page.auth-ui-v254 *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}


/* ========================================================================
   OSANIME AUTH UI FINAL — Stage 6 v255
   Production cleanup / cross-device regression guard
   ======================================================================== */

html{color-scheme:dark}
body.auth-screen-page.auth-ui-v255{
  min-width:0!important;
  overflow-x:clip!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@supports not (overflow:clip){
  body.auth-screen-page.auth-ui-v255{overflow-x:hidden!important}
}

body.auth-screen-page.auth-ui-v255 .auth-screen,
body.auth-screen-page.auth-ui-v255 .auth-left,
body.auth-screen-page.auth-ui-v255 .auth-right,
body.auth-screen-page.auth-ui-v255 .auth-card,
body.auth-screen-page.auth-ui-v255 .auth-form,
body.auth-screen-page.auth-ui-v255 .auth-field,
body.auth-screen-page.auth-ui-v255 .auth-control,
body.auth-screen-page.auth-ui-v255 .auth-alt-methods-v252,
body.auth-screen-page.auth-ui-v255 .osanime-oauth-grid-v249{
  min-width:0!important;
  max-width:100%;
}

/* Final guard against the historical global .auth-socials/.auth-divider hide rule. */
body.auth-screen-page.auth-ui-v255 .osanime-oauth-divider-v249{display:flex!important;visibility:visible!important;opacity:1!important;height:auto!important;overflow:visible!important}
body.auth-screen-page.auth-ui-v255 .osanime-oauth-grid-v249{display:grid!important;visibility:visible!important;opacity:1!important;height:auto!important;overflow:visible!important}

/* Prevent long translated labels from breaking cards/actions. */
body.auth-screen-page.auth-ui-v255 .auth-submit-btn,
body.auth-screen-page.auth-ui-v255 .oauth-stage2-provider,
body.auth-screen-page.auth-ui-v255 .auth-passkey-btn,
body.auth-screen-page.auth-ui-v255 .auth-footer a,
body.auth-screen-page.auth-ui-v255 .auth-bottom-link,
body.auth-screen-page.auth-ui-v255 .auth-forgot-button{
  overflow-wrap:anywhere;
  word-break:normal;
}
body.auth-screen-page.auth-ui-v255 input,
body.auth-screen-page.auth-ui-v255 textarea,
body.auth-screen-page.auth-ui-v255 select{
  scroll-margin-block:110px;
}

/* Final footer contract: always in normal flow and aligned on every auth page. */
body.auth-screen-page.auth-ui-v255 .auth-footer{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  flex-shrink:0!important;
}
body.auth-screen-page.auth-ui-v255 .auth-footer-logo img{display:block!important}
body.auth-screen-page.auth-ui-v255 .auth-footer nav a{min-width:0!important}

/* Disabled/busy state remains legible even under browser forced opacity rules. */
body.auth-screen-page.auth-ui-v255 [aria-busy="true"] .auth-submit-btn,
body.auth-screen-page.auth-ui-v255 .auth-submit-btn[aria-busy="true"]{
  pointer-events:none!important;
}

/* Keyboard focus must never be clipped by card/button overflow. */
body.auth-screen-page.auth-ui-v255 :focus-visible{scroll-margin-block:96px}

@media(max-width:640px){
  body.auth-screen-page.auth-ui-v255 .auth-footer nav a{font-size:11.5px!important}
  body.auth-screen-page.auth-ui-v255 .auth-footer p{font-size:10.5px!important;line-height:1.45!important}
  body.auth-screen-page.auth-ui-v255 .auth-footer-logo img{height:27px!important;max-width:138px!important}
}

@media(max-width:380px){
  body.auth-screen-page.auth-ui-v255 .auth-footer nav{grid-template-columns:1fr!important;width:100%!important;max-width:280px!important}
  body.auth-screen-page.auth-ui-v255 .auth-footer nav a,
  body.auth-screen-page.auth-ui-v255 .auth-footer nav a:last-of-type{grid-column:1!important;width:100%!important}
}

@media(prefers-reduced-motion:reduce){
  body.auth-screen-page.auth-ui-v255 *,
  body.auth-screen-page.auth-ui-v255 *::before,
  body.auth-screen-page.auth-ui-v255 *::after{
    scroll-behavior:auto!important;
  }
}

/* ==========================================================================\n   OSANIME Auth UI v256 - Desktop Logo Top Position Hotfix\n   Keep hero/card rhythm unchanged: move only the visual logo upward.\n   Tablet/phone layouts retain the Stage 5 centered logo flow.\n   ========================================================================== */
@media (min-width: 921px) {
  body.auth-screen-page.auth-ui-v254 .auth-logo {
    transform: translateY(clamp(-118px, -11vh, -88px)) !important;
    z-index: 3 !important;
  }
}

/* Short desktop windows need a smaller lift so the logo never clips. */
@media (min-width: 921px) and (max-height: 760px) {
  body.auth-screen-page.auth-ui-v254 .auth-logo {
    transform: translateY(-64px) !important;
  }
}

/* Stacked tablet/phone layout: normal document flow remains the safest. */
@media (max-width: 920px) {
  body.auth-screen-page.auth-ui-v254 .auth-logo {
    transform: none !important;
  }
}

/* ===== OSANIME Auth All Pages FINAL v262 safety layer ===== */
body.auth-all-pages-final-v262 .auth-footer,
body.auth-all-pages-final-v262 .auth-logo,
body.auth-all-pages-final-v262 .auth-card,
body.auth-all-pages-final-v262 .auth-form { min-width:0; }
body.auth-all-pages-final-v262 .auth-card,
body.auth-all-pages-final-v262 .auth-form,
body.auth-all-pages-final-v262 .auth-security-card-v258,
body.auth-all-pages-final-v262 .auth-oauth-complete-card-v257,
body.auth-all-pages-final-v262 .auth-oauth-flow-card-v261 { overflow-wrap:anywhere; }
@media (max-width:760px) {
  body.auth-all-pages-final-v262 input,
  body.auth-all-pages-final-v262 select,
  body.auth-all-pages-final-v262 textarea { font-size:16px; }
}
