/* Tela de login da Gire. As cores da marca ficam nestas variáveis */
#login-root{--orange:#E94E1B;--orange-h:#d3450f;--deep:#000000;position:fixed;inset:0;z-index:90;overflow:auto;color:#fff;font:15px/1.45 Lato,Helvetica,Roboto,Arial,sans-serif;background:var(--deep)}
.lg-bg{position:fixed;inset:0;overflow:hidden;background:linear-gradient(125deg,#000000 0%,#141414 42%,#241007 72%,#000000 100%);background-size:220% 220%;animation:lg-flow 26s ease-in-out infinite alternate}
/* Luz que acompanha o mouse */
.lg-light{position:absolute;left:0;top:0;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgb(233 78 27/.34) 0,rgb(233 78 27/.13) 34%,rgb(233 78 27/0) 68%);will-change:transform;transform:translate3d(50vw,50vh,0)}
@keyframes lg-flow{from{background-position:0 0}to{background-position:100% 100%}}
.lg-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.lg-blob.a{width:48vw;height:48vw;left:-14vw;top:-18vw;background:#E94E1B;opacity:.28}
.lg-blob.b{width:42vw;height:42vw;right:-12vw;bottom:-18vw;background:#E94E1B;opacity:.22}
.lg-ball{position:absolute;border-radius:50%;will-change:transform;animation:lg-fly-a 19s ease-in-out infinite}
.lg-ball.s1{width:210px;height:210px;left:calc(50% - 330px);top:calc(50% - 280px);background:radial-gradient(circle at 32% 28%,#ffc9ad 0,#f0693a 26%,#E94E1B 48%,#7a2406 88%);box-shadow:0 30px 70px rgb(233 78 27/.28)}
.lg-ball.s2{width:280px;height:280px;left:calc(50% + 110px);top:calc(50% - 40px);background:radial-gradient(circle at 32% 26%,#777777 0,#333333 24%,#171717 52%,#000000 86%);box-shadow:inset -14px -18px 40px rgb(233 78 27/.32),0 30px 70px rgb(0 0 0/.5);animation-name:lg-fly-b;animation-duration:25s;animation-delay:-7s}
.lg-ball.s3{width:96px;height:96px;left:calc(50% - 370px);top:calc(50% + 150px);background:radial-gradient(circle at 32% 28%,#5c5c5c 0,#262626 45%,#000000 90%);box-shadow:inset -6px -8px 16px rgb(233 78 27/.38);animation-name:lg-fly-c;animation-duration:16s;animation-delay:-3s}
.lg-ball.s4{width:64px;height:64px;left:calc(50% + 300px);top:calc(50% - 250px);background:radial-gradient(circle at 32% 28%,#ffd8c2 0,#f0693a 42%,#8f2d09 92%);animation-name:lg-fly-c;animation-duration:13s;animation-delay:-8s}
/* Voo: cada esfera faz uma curva lenta e diferente */
@keyframes lg-fly-a{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(16px,-20px,0)}50%{transform:translate3d(30px,6px,0)}75%{transform:translate3d(10px,22px,0)}}
@keyframes lg-fly-b{0%,100%{transform:translate3d(0,0,0)}30%{transform:translate3d(-22px,18px,0)}60%{transform:translate3d(12px,30px,0)}80%{transform:translate3d(20px,-10px,0)}}
@keyframes lg-fly-c{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(20px,18px,0)}66%{transform:translate3d(-14px,26px,0)}}
.lg-mark{position:absolute;right:-4vmin;bottom:-8vmin;width:62vmin;color:#fff;opacity:.05;pointer-events:none}
.lg-mark svg{width:100%;height:auto;display:block}
.lg-mark svg path:last-child{fill:#fff}
.lg-wrap{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 16px;perspective:1100px}
.lg-card{width:100%;max-width:430px;padding:36px 36px 28px;border-radius:24px;background:rgb(16 16 16/.56);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border:1px solid rgb(255 255 255/.22);box-shadow:0 30px 80px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.18)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg-card{background:rgb(16 16 16/.95)}}
.lg-logo{width:42px;height:auto;color:#fff;display:block;margin-bottom:18px}
.lg-logo svg{width:100%;height:auto;display:block}
.lg-card h1{margin:0;font-size:27px;font-weight:900;line-height:1.2}
.lg-sub{margin:4px 0 22px;color:rgb(255 255 255/.8);min-height:22px}
.lg-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:rgb(255 255 255/.1);margin-bottom:20px}
.lg-tabs button{border:0;background:none;color:rgb(255 255 255/.82);font:700 14px Lato,Helvetica,Roboto,Arial,sans-serif;padding:10px 6px;border-radius:9px;cursor:pointer;min-height:44px}
.lg-tabs button:hover{color:#fff}
.lg-tabs button[aria-selected=true]{background:#fff;color:#000000}
.lg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lg-field label{font-weight:700;font-size:13px}
.lg-input{position:relative}
.lg-input input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border-radius:10px;border:1px solid #777777;background:rgb(255 255 255/.1);color:#fff;font:15px Lato,Helvetica,Roboto,Arial,sans-serif}
.lg-input input::placeholder{color:rgb(255 255 255/.65)}
.lg-input input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:inset 0 0 0 100px #2a2a2a;caret-color:#fff}
.lg-input input.pw{padding-right:48px}
.lg-eye{position:absolute;right:2px;top:1px;width:44px;height:44px;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:9px}
.lg-eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#login-root :focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.lg-remember{display:flex;align-items:center;gap:8px;margin:2px 0 16px;cursor:pointer;min-height:28px;width:fit-content}
.lg-remember input{width:18px;height:18px;accent-color:var(--orange);margin:0}
.lg-error{margin:0 0 12px;padding:10px 12px;border-radius:9px;background:rgb(127 29 29/.75);border:1px solid rgb(254 202 202/.45);font-size:14px}
.lg-error[hidden]{display:none}
.lg-btn{width:100%;height:48px;border:0;border-radius:11px;background:var(--orange);color:#fff;font:900 16px Lato,Helvetica,Roboto,Arial,sans-serif;cursor:pointer;box-shadow:0 10px 26px rgb(233 78 27/.35);transition:background .15s,transform .15s}
.lg-btn:hover{background:var(--orange-h)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn[disabled]{opacity:.65;cursor:not-allowed}
.lg-foot{margin:16px 0 0;text-align:center;font-size:13px;color:rgb(255 255 255/.8)}
@media(max-width:640px){.lg-card{padding:28px 20px 22px}.lg-ball.s1{left:-60px;top:20px;width:150px;height:150px}.lg-ball.s2{left:auto;right:-90px;top:auto;bottom:40px;width:190px;height:190px}.lg-ball.s3,.lg-ball.s4{display:none}.lg-mark{width:90vw;right:-20vw}}
@media(prefers-reduced-motion:reduce){.lg-bg,.lg-ball{animation:none}.lg-light{display:none}.lg-btn{transition:none}}

/* Transição do login para o painel */
.lg-layer{position:absolute;inset:0;transform-origin:50% 50%;pointer-events:none}
.lg-iris{position:absolute;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle closest-side,#000 0,#000 90%,#3a1407 95%,#E94E1B 99%,rgb(233 78 27/0) 100%);will-change:transform,opacity}
.lg-welcome{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;opacity:0;pointer-events:none;perspective:900px}
.lg-welcome strong{font-size:clamp(26px,4vw,40px);font-weight:900;line-height:1.15;color:#fff}
.lg-welcome span{font-size:15px;color:#9a9a9a}
#login-root.is-leaving{pointer-events:none;overflow:hidden}
.is-leaving .lg-card{transform-origin:50% 50%;will-change:transform,opacity;animation:lg-card-out .42s cubic-bezier(.55,0,.75,.4) both}
.is-leaving .lg-light,.is-leaving .lg-mark{transition:opacity .4s ease-out;opacity:0}
.is-leaving .lg-iris{animation:lg-iris-grow .78s cubic-bezier(.65,0,.3,1) .12s both}
.is-leaving .lg-layer{will-change:transform,opacity;animation:lg-depth .82s cubic-bezier(.5,0,.2,1) both}
.is-leaving .lg-layer.far{--to:1.25;animation-duration:.6s}
.is-leaving .lg-layer.mid{--to:2.2;animation-delay:.04s}
.is-leaving .lg-layer.near{--to:3.2}
.is-leaving .lg-layer.nearest{--to:4.6;animation-delay:.02s}
.is-leaving .lg-welcome{animation:lg-hello-in .46s cubic-bezier(.2,.7,.2,1) .38s both}
.is-leaving .lg-welcome>*{transform-style:preserve-3d}
#login-root.is-revealing{animation:lg-reveal .38s ease-in-out both}
.is-revealing .lg-welcome{animation:lg-hello-out .3s ease-in both}
#app.app-enter{transform-origin:50% 40%;animation:lg-app-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes lg-card-out{to{opacity:0;transform:translate3d(0,-14px,-260px) rotateX(11deg) scale(.94)}}
@keyframes lg-iris-grow{0%{opacity:0;transform:scale(1)}14%{opacity:1}100%{opacity:1;transform:scale(var(--grow,14))}}
@keyframes lg-depth{55%{opacity:1}100%{opacity:0;transform:scale(var(--to,2))}}
@keyframes lg-hello-in{from{opacity:0;transform:translate3d(0,14px,-90px)}to{opacity:1;transform:none}}
@keyframes lg-hello-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-8px,50px)}}
@keyframes lg-reveal{to{opacity:0}}
@keyframes lg-app-in{from{opacity:.25;transform:scale(.982)}to{opacity:1;transform:none}}
/* Quem pediu menos movimento no sistema vê só um fade curto */
.is-simple .lg-card,.is-simple .lg-layer,.is-simple .lg-iris{animation:none}
.is-simple .lg-card{opacity:0;transition:opacity .2s}
.is-simple .lg-welcome{animation:lg-simple-in .2s ease-out both}
#login-root.is-simple.is-revealing{animation:lg-reveal .24s ease-out both}
@keyframes lg-simple-in{from{opacity:0}to{opacity:1}}