/* CITYPLAYER V10.4 — Login visual CITYPLAY sem os círculos decorativos atrás da logo */
body.auth-body{
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#000;
    color:#fff;
}

body.auth-body::before{
    content:'';
    position:fixed;
    inset:-8%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 55% 60% at 24% 50%,rgba(20,178,198,.28),transparent 68%),
        radial-gradient(ellipse 35% 48% at 43% 53%,rgba(37,215,234,.09),transparent 70%),
        radial-gradient(ellipse 26% 34% at 8% 14%,rgba(255,20,120,.055),transparent 72%),
        radial-gradient(ellipse 22% 28% at 38% 88%,rgba(255,138,0,.032),transparent 72%),
        linear-gradient(100deg,#010405 0%,#041116 30%,#020809 57%,#000 100%);
    animation:cityplayBackground 10s ease-in-out infinite alternate;
}

body.auth-body::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.2;
    background-image:radial-gradient(rgba(255,255,255,.22) .55px,transparent .55px);
    background-size:5px 5px;
    -webkit-mask-image:linear-gradient(90deg,#000,transparent 68%);
    mask-image:linear-gradient(90deg,#000,transparent 68%);
}

.cityplay-auth-shell{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.16fr) minmax(480px,.94fr);
    min-height:100vh;
    min-height:100dvh;
}

.cityplay-brand-panel{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    overflow:hidden;
    padding:52px 54px 92px;
}

.cityplay-brand-panel::after{
    content:'';
    position:absolute;
    top:0;
    right:-1px;
    bottom:0;
    width:34%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,#000 98%);
}

.cityplay-brand-glow{
    position:absolute;
    left:50%;
    top:50%;
    width:min(48vw,650px);
    aspect-ratio:1;
    border-radius:50%;
    transform:translate(-50%,-51%);
    background:
        radial-gradient(circle,rgba(37,215,234,.17) 0%,rgba(23,107,255,.075) 38%,rgba(255,20,120,.025) 52%,transparent 69%);
    filter:blur(18px);
    animation:cityplayGlow 4.6s ease-in-out infinite;
}

.cityplay-logo-stage{
    position:relative;
    z-index:1;
    width:min(92%,650px);
    display:flex;
    align-items:center;
    justify-content:center;
    animation:cityplayLogoEnter 1s cubic-bezier(.2,.8,.2,1) both;
}

.cityplay-brand-image{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    object-fit:contain;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 0 15px rgba(37,215,234,.24)) drop-shadow(0 0 8px rgba(255,20,120,.075)) drop-shadow(0 18px 26px rgba(0,0,0,.54));
    animation:cityplayLogoFloat 5.2s ease-in-out 1s infinite;
}

.cityplay-brand-fallback{
    position:relative;
    z-index:2;
    font-size:clamp(54px,8vw,110px);
    letter-spacing:-.055em;
    text-shadow:0 0 30px rgba(34,184,199,.42);
}

.cityplay-tagline{
    position:absolute;
    z-index:2;
    left:8%;
    right:8%;
    bottom:38px;
    margin:0;
    text-align:center;
    color:rgba(255,255,255,.72);
    font-size:clamp(15px,1.55vw,21px);
    line-height:1.5;
    letter-spacing:.01em;
    font-weight:500;
    text-shadow:0 4px 18px rgba(0,0,0,.34);
    animation:cityplayFadeUp .8s .48s ease both;
}

.cityplay-tagline-highlight{
    display:inline-block;
    margin-top:2px;
    font-weight:900;
    background:linear-gradient(90deg,#25d7ea 0%,#176bff 32%,#7d35ff 55%,#ff1478 76%,#ff8a00 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
}

.cityplay-form-panel{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:34px clamp(26px,4vw,68px);
    background:linear-gradient(90deg,rgba(0,0,0,.93),#000 20%,#000);
    animation:cityplayPanelEnter .72s ease-out both;
}

.cityplay-form-wrap{
    width:100%;
    max-width:510px;
}

.cityplay-mobile-logo{display:none}

.cityplay-login-card{
    width:100%;
    padding:38px 32px 30px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(10,10,10,.78),rgba(0,0,0,.58));
    -webkit-backdrop-filter:blur(24px);
    backdrop-filter:blur(24px);
    box-shadow:0 28px 85px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03);
    animation:cityplayCardEnter .82s .12s cubic-bezier(.2,.8,.2,1) both;
}

.auth-has-error .cityplay-login-card{
    animation:cityplayCardEnter .55s ease both,cityplayShake .42s .55s ease both;
}

.cityplay-login-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
}

.cityplay-shield{
    width:50px;
    height:50px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    color:#63dce5;
    background:linear-gradient(145deg,rgba(34,184,199,.17),rgba(24,122,151,.11) 58%,rgba(37,99,235,.08));
    border:1px solid rgba(90,216,226,.27);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 26px rgba(34,184,199,.09),0 0 22px rgba(31,109,153,.07);
}

.cityplay-shield svg{width:26px;height:26px}
.cityplay-login-head h1{margin:0;color:#fff;font-size:clamp(25px,2.4vw,31px);line-height:1.15;font-weight:900;letter-spacing:-.025em}
.cityplay-login-head p{margin:5px 0 0;color:rgba(255,255,255,.62);font-size:14px;line-height:1.45;max-width:280px}
.cityplay-login-card form{display:grid;gap:18px}

.cityplay-field{display:block;margin:0}
.cityplay-field-label{display:block;margin:0 0 8px;color:rgba(255,255,255,.64);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}

.cityplay-field-control{
    position:relative;
    display:flex;
    align-items:center;
    min-height:52px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    background:rgba(0,0,0,.52);
    transition:border-color .22s,box-shadow .22s,background-color .22s;
}

.cityplay-field-control:focus-within{
    border-color:rgba(68,211,221,.78);
    background:rgba(4,20,24,.82);
    box-shadow:0 0 0 3px rgba(34,184,199,.10),0 0 28px rgba(34,184,199,.07);
}

.cityplay-field-icon{
    width:21px;
    height:21px;
    margin-left:16px;
    flex:0 0 auto;
    color:#52d4de;
    transition:filter .22s;
}

.cityplay-field-control:focus-within .cityplay-field-icon{
    filter:drop-shadow(0 0 7px rgba(34,184,199,.45));
}

.cityplay-field-control input[type=text],
.cityplay-field-control input[type=password]{
    width:100%;
    min-width:0;
    height:50px;
    padding:0 15px;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#fff;
    font-family:inherit;
    font-size:15px;
}

.cityplay-field-control input::placeholder{color:rgba(255,255,255,.35)}

/* V12.18 — mantém o preenchimento automático do navegador no tema escuro. */
.cityplay-field-control input:-webkit-autofill,
.cityplay-field-control input:-webkit-autofill:hover,
.cityplay-field-control input:-webkit-autofill:focus,
.cityplay-field-control input:-webkit-autofill:active{
    -webkit-text-fill-color:#fff!important;
    caret-color:#fff!important;
    -webkit-box-shadow:0 0 0 1000px #050505 inset!important;
    box-shadow:0 0 0 1000px #050505 inset!important;
    border:0!important;
    transition:background-color 99999s ease-out 0s!important;
}

.cityplay-field-control:focus-within input:-webkit-autofill,
.cityplay-field-control:focus-within input:-webkit-autofill:hover,
.cityplay-field-control:focus-within input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #06181c inset!important;
    box-shadow:0 0 0 1000px #06181c inset!important;
}

.cityplay-password-toggle{
    width:48px;
    height:50px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:12px;
    outline:0;
    background:transparent;
    color:rgba(255,255,255,.58);
    cursor:pointer;
    transition:color .2s,background-color .2s;
}

.cityplay-password-toggle:hover,
.cityplay-password-toggle:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.cityplay-password-toggle svg{width:21px;height:21px}
.cityplay-password-toggle .eye-closed{display:none}
.cityplay-password-toggle.is-showing .eye-open{display:none}
.cityplay-password-toggle.is-showing .eye-closed{display:block}

.cityplay-caps{
    margin-top:-8px;
    padding:10px 12px;
    border:1px solid rgba(245,158,11,.28);
    border-radius:11px;
    background:rgba(245,158,11,.1);
    color:#ffd58a;
    font-size:13px;
}

.cityplay-caps[hidden]{display:none}

.cityplay-remember{
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.58);
    font-size:12.5px;
    line-height:1.45;
    cursor:pointer;
}

.cityplay-remember input{
    width:17px;
    height:17px;
    margin:0;
    flex:0 0 auto;
    accent-color:#22b8c7;
    cursor:pointer;
}

.cityplay-submit{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    min-height:56px;
    margin-top:2px;
    padding:0 22px;
    overflow:hidden;
    border:1px solid rgba(100,224,232,.22);
    border-radius:13px;
    background:linear-gradient(115deg,#0ca7bd 0%,#20cfe0 52%,#178ee8 100%);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 34px rgba(12,167,189,.24),0 0 22px rgba(23,107,255,.055),0 0 18px rgba(255,20,120,.028),inset 0 1px 0 rgba(255,255,255,.20);
    transition:box-shadow .2s,filter .2s;
}

.cityplay-submit::before{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:-48%;
    width:34%;
    transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
    animation:cityplayButtonShine 4.6s 1.5s ease-in-out infinite;
}

.cityplay-submit span,.cityplay-submit svg{position:relative;z-index:1}
.cityplay-submit svg{width:19px;height:19px;transition:transform .2s}
.cityplay-submit:hover{filter:brightness(1.08);box-shadow:0 18px 42px rgba(15,139,155,.31),inset 0 1px 0 rgba(255,255,255,.22)}
.cityplay-submit:hover svg{transform:translateX(3px)}
.cityplay-submit:disabled{cursor:wait;opacity:.78}
.cityplay-submit.is-loading svg{animation:cityplayArrowPulse .8s ease-in-out infinite alternate}

.auth-alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:-8px 0 20px;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
    line-height:1.45;
}

.auth-alert--warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:#ffd58a}
.auth-alert--error{background:rgba(255,35,45,.11);border:1px solid rgba(255,52,62,.3);color:#ffb1b6}

.cityplay-help{
    max-width:390px;
    margin:22px auto 0;
    color:rgba(255,255,255,.42);
    font-size:12.5px;
    line-height:1.5;
    text-align:center;
}

.cityplay-auth-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 20px;
    margin-top:15px;
    font-size:12.5px;
}

.cityplay-auth-links a{color:rgba(255,255,255,.46);text-decoration:none;transition:color .18s}
.cityplay-auth-links a:hover,.cityplay-auth-links a:focus-visible{color:#fff}

.auth-body .loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:rgba(0,0,0,.9);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.auth-body .spinner{
    position:relative;
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    background:conic-gradient(from 0deg,#ff8a00 0 13%,#ff334d 20%,#ff1478 34%,#7d35ff 51%,#176bff 69%,#25d7ea 86%,#ff8a00 100%);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
    mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);
    filter:drop-shadow(0 0 8px rgba(37,215,234,.34)) drop-shadow(0 0 7px rgba(255,20,120,.16));
    animation:cityplaySpin .82s linear infinite;
}

@keyframes cityplayBackground{
    from{transform:scale(1) translate3d(0,0,0)}
    to{transform:scale(1.06) translate3d(-1.5%,-1%,0)}
}

@keyframes cityplayGlow{
    0%,100%{opacity:.72;transform:translate(-50%,-51%) scale(.96)}
    50%{opacity:1;transform:translate(-50%,-51%) scale(1.08)}
}

@keyframes cityplayLogoEnter{
    from{opacity:0;transform:translateY(34px) scale(.92)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes cityplayLogoFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-9px) scale(1.012)}
}

@keyframes cityplayPanelEnter{
    from{opacity:0;transform:translateX(32px)}
    to{opacity:1;transform:translateX(0)}
}

@keyframes cityplayCardEnter{
    from{opacity:0;transform:translateY(24px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes cityplayFadeUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes cityplayShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-8px)}
    40%{transform:translateX(8px)}
    60%{transform:translateX(-5px)}
    80%{transform:translateX(5px)}
}

@keyframes cityplayButtonShine{
    0%,55%{left:-48%;opacity:0}
    66%{opacity:1}
    82%,100%{left:118%;opacity:0}
}

@keyframes cityplayArrowPulse{to{transform:translateX(4px)}}
@keyframes cityplaySpin{to{transform:rotate(360deg)}}

@media(max-width:980px){
    body.auth-body{overflow-y:auto}
    body.auth-body::after{-webkit-mask-image:none;mask-image:none;opacity:.12}
    .cityplay-auth-shell{display:block;min-height:100vh;min-height:100dvh}
    .cityplay-brand-panel{display:none}
    .cityplay-form-panel{
        min-height:100vh;
        min-height:100dvh;
        padding:26px 20px;
        background:radial-gradient(circle at 50% 17%,rgba(37,215,234,.18),transparent 33%),radial-gradient(circle at 85% 8%,rgba(255,20,120,.045),transparent 25%),rgba(0,0,0,.86);
    }
    .cityplay-form-wrap{max-width:510px}
    .cityplay-mobile-logo{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:128px;
        margin:0 auto 12px;
    }
    .cityplay-mobile-logo img{
        display:block;
        width:min(74vw,310px);
        height:auto;
        object-fit:contain;
        background:transparent!important;
        filter:drop-shadow(0 0 15px rgba(34,184,199,.28));
        animation:cityplayLogoFloat 5.2s ease-in-out infinite;
    }
    .cityplay-mobile-logo strong{font-size:42px;text-shadow:0 0 25px rgba(34,184,199,.36)}
}

@media(max-width:560px){
    .cityplay-form-panel{align-items:center;padding:18px 12px 24px}
    .cityplay-login-card{padding:26px 20px 23px;border-radius:20px}
    .cityplay-login-head{align-items:flex-start;margin-bottom:24px}
    .cityplay-shield{width:45px;height:45px;border-radius:14px}
    .cityplay-shield svg{width:23px;height:23px}
    .cityplay-login-head h1{font-size:24px}
    .cityplay-login-head p{font-size:13px}
    .cityplay-auth-links{flex-direction:column;gap:10px}
}

@media(max-height:700px) and (min-width:981px){
    .cityplay-brand-panel{padding-top:24px;padding-bottom:72px}
    .cityplay-logo-stage{width:min(82%,570px)}
    .cityplay-form-panel{padding-top:18px;padding-bottom:18px}
    .cityplay-login-card{padding-top:26px;padding-bottom:23px}
    .cityplay-login-head{margin-bottom:20px}
    .cityplay-login-card form{gap:14px}
    .cityplay-help{margin-top:16px}
}

body.auth-body.keyboard-open .cityplay-form-panel{align-items:flex-start}

@media(prefers-reduced-motion:reduce){
    .auth-body *,
    .auth-body *::before,
    .auth-body *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}