/* Tela de login (escopada em #login-screen; keyframes com prefixo lg-). Gerado a partir do design-preview/login.html */
#login-screen{--jak:'Plus Jakarta Sans',system-ui,sans-serif}
#login-screen *{box-sizing:border-box;margin:0;padding:0}
#login-screen{position:fixed;inset:0;z-index:200;height:100%}
#login-screen[hidden]{display:none}
#login-screen{font-family:var(--jak);color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden;
  background:#050608}
#login-screen button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#login-screen input{font:inherit;color:inherit;background:none;border:0;outline:0}
#login-screen img{display:block}
#login-screen .bgimg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#login-screen .bgimg i{position:absolute;inset:0;background:url(assets/login-bg.jpg) center/cover no-repeat;transform:scale(1.18);transform-origin:0 0;
  
  -webkit-mask-image:linear-gradient(to bottom left,#000 calc(var(--reveal) - 45%),transparent var(--reveal));
  mask-image:linear-gradient(to bottom left,#000 calc(var(--reveal) - 45%),transparent var(--reveal));
  animation:lg-bg-reveal 4.4s cubic-bezier(.45,.05,.25,1) .15s both}
@property --reveal{syntax:'<percentage>';inherits:false;initial-value:145%}
@keyframes lg-bg-reveal{from{--reveal:0%}to{--reveal:145%}}
#login-screen .bgimg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,.45) 100%)}
#login-screen .screen{position:relative;z-index:1;min-height:100%;display:grid;place-items:center;padding:24px}
#login-screen .lg-modal{display:flex;width:min(1060px,100%);height:min(690px,calc(100vh - 48px));min-height:560px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  
  background:linear-gradient(0deg,#0c0e12 0%,#1f2532 100%);backdrop-filter:blur(24px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.45);padding:1px;
  opacity:0;transform:translateY(16px) scale(.985);animation:lg-enter .9s cubic-bezier(.16,1,.3,1) .9s forwards}
@keyframes lg-enter{to{opacity:1;transform:none}}
#login-screen .left{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:52px 44px 44px}
#login-screen .hero{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:440px;max-width:100%}
#login-screen .lg-brand{position:relative;top:0;display:flex;align-items:center;gap:13px}
#login-screen .lg-brand .nlogo{height:78px;width:auto;flex:none}
#login-screen .bt{display:flex;flex-direction:column;gap:2px}
#login-screen .bt b{font-size:29px;font-weight:700;line-height:31px;letter-spacing:-.72px;color:#f1f5f9;white-space:nowrap}
#login-screen .bt b i{font-style:normal;color:#37baf7}
#login-screen .bt span{position:relative;display:block;padding-left:53px;font-size:16px;font-weight:200;line-height:21px;letter-spacing:-.72px;color:#f1f5f9;white-space:nowrap}
#login-screen .bt span i{font-style:normal;color:#37baf7}
#login-screen .lg-brand .nlogo,#login-screen .lg-brand .nlogo .nl-s,#login-screen .lg-brand .tag-line{animation-delay:1.1s;animation-fill-mode:backwards}
#login-screen .tag-line{position:absolute;left:0;top:50%;width:51px;height:2px;background:linear-gradient(90deg,#0033a4,#96dfff);border-radius:1px;transform-origin:left center}
#login-screen .headline{display:flex;flex-direction:column;align-items:flex-start;text-align:left;letter-spacing:-.6px}
#login-screen .headline h2{font-size:24px;font-weight:700;line-height:32px;white-space:nowrap}
#login-screen .headline .grad{background:linear-gradient(90deg,#2563eb,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
#login-screen .headline p{margin-top:16px;min-height:36px;width:362px;max-width:100%;max-width:100%;font-size:16px;font-weight:300;line-height:18px;letter-spacing:0;text-align:left;color:#a1a1aa}
#login-screen .syncs{display:flex;flex-direction:column;gap:50px;margin-top:46px;width:440px;max-width:100%;flex:none}
#login-screen .sync{position:relative;height:44px;width:290px;outline-offset:6px}
#login-screen .sync{--start:calc(1.3s + var(--i)*.8s);--rest:0}
#login-screen .headline,#login-screen .syncs{--settle:7.9s}
#login-screen .sync{--back:calc(var(--settle) + .9s + var(--i)*.12s)}
#login-screen .sync{animation:lg-settle 1.2s cubic-bezier(.65,0,.35,1) var(--settle,7.9s) forwards}
#login-screen .headline{animation:lg-head-down 1.2s cubic-bezier(.65,0,.35,1) var(--settle) forwards}
@keyframes lg-settle{to{transform:translateY(calc(46px - var(--i)*34px))}}
@keyframes lg-head-down{to{transform:translateY(56px)}}
#login-screen .caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:#38bdf8;animation:lg-blink .7s steps(1) infinite}
@keyframes lg-blink{50%{opacity:0}}
#login-screen .sync .lg-pill{opacity:0;animation:lg-pill-in 1s cubic-bezier(.2,.7,.2,1) var(--start) forwards}
#login-screen .sync .lg-pill i{transform-origin:50% 50%;animation:lg-bar-grow .7s cubic-bezier(.2,.8,.2,1) calc(var(--start) + 1s) backwards,lg-bar-back .9s cubic-bezier(.65,0,.35,1) calc(var(--back) + .2s) forwards}
#login-screen .sync .cone{opacity:var(--rest);transform-origin:0 50%;animation:lg-cone-life 3s ease-in-out calc(var(--start) + 1.15s) backwards}
#login-screen .sync .txt{opacity:1;animation:lg-txt-in .9s cubic-bezier(.2,.7,.2,1) calc(var(--start) + 1.9s) backwards,lg-txt-white 1.2s ease-in-out calc(var(--start) + 2.95s) forwards,lg-txt-back .9s cubic-bezier(.65,0,.35,1) calc(var(--back) + .2s) forwards}
@property --ta{syntax:'<number>';inherits:false;initial-value:0}
@keyframes lg-txt-white{from{--ta:0}to{--ta:1}}
@keyframes lg-pill-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes lg-bar-grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes lg-cone-life{0%{opacity:0;transform:scaleX(.45)}28%{opacity:1;transform:scaleX(1)}60%{opacity:1;transform:scaleX(1)}100%{opacity:var(--rest);transform:scaleX(1)}}
@keyframes lg-word-out{to{opacity:0;transform:translateX(-8px)}}
@keyframes lg-bar-back{to{right:200px}}
@keyframes lg-txt-back{to{left:74px}}
#login-screen .sync.done .lg-pill b{animation:none;opacity:0;transform:translateX(-8px);transition:opacity .18s ease,transform .2s ease}
#login-screen .sync.done .lg-pill i{animation:none;right:200px;transition:right .5s cubic-bezier(.65,0,.35,1) .15s,box-shadow .2s}
#login-screen .sync.done .txt{animation:none;--ta:1;left:74px;transition:opacity .18s ease,transform .18s ease,left .5s cubic-bezier(.65,0,.35,1) .15s}
#login-screen .sync.done.open .lg-pill b{opacity:1;transform:none;transition:opacity .35s ease .4s,transform .45s cubic-bezier(.2,.7,.2,1) .4s}
#login-screen .sync.done.open .lg-pill i{right:110px;transition:right .5s cubic-bezier(.65,0,.35,1),box-shadow .2s}
#login-screen .sync.done.open .txt{left:160px;transition:opacity .18s ease,transform .18s ease,left .5s cubic-bezier(.65,0,.35,1)}
#login-screen .sync.done:hover{width:390px}
#login-screen .sync .txt{transition:opacity .18s ease,transform .18s ease}
#login-screen .sync .txt.out{opacity:0;transform:translateX(6px)}
#login-screen .syncs.ready .sync{cursor:default}
#login-screen .syncs.ready .sync:hover .lg-pill i{box-shadow:0 0 10px 2px var(--c)}
@keyframes lg-txt-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
#login-screen .sync .lg-pill{position:absolute;z-index:1;left:0;top:0;width:256px;height:44px;display:flex;align-items:center;gap:10px;padding:0 113px 0 18px;
  border-radius:999px 0 0 999px;overflow:hidden;
  
  background:linear-gradient(90deg,#0c0e12 0%,rgba(31,37,50,0) 100%)}
#login-screen .sync .lg-pill .ic{display:block;position:relative;width:24px;height:24px;flex:none}
#login-screen .sync .lg-pill .ic img{position:absolute;inset:0;width:100%;height:100%}
#login-screen .sync .lg-pill .ic.lg-p img{inset:5.21%;width:89.58%;height:89.58%}
#login-screen .sync .lg-pill b{font-size:15.5px;font-weight:500;line-height:18px;white-space:nowrap;animation:lg-word-out .4s ease-in var(--back) forwards}
#login-screen .sync .lg-pill i{position:absolute;right:110px;top:6px;width:3px;height:32px;border-radius:999px;background:var(--c);box-shadow:0 0 6px 1px var(--c)}
#login-screen .sync .cone{position:absolute;left:131px;top:-53px;width:294.1px;height:150px;pointer-events:none;z-index:0;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%)}
#login-screen .sync .cone .cg{position:absolute;inset:0;background:var(--c);-webkit-mask:url(assets/lg-cone.png) center/100% 100% no-repeat;mask:url(assets/lg-cone.png) center/100% 100% no-repeat}
#login-screen .sync .txt{z-index:1;position:absolute;left:160px;top:6px;width:134px;font-size:14px;font-weight:400;line-height:16px;text-align:left;
  background:linear-gradient(90deg,#fff 35.6%,rgba(255,255,255,var(--ta)));-webkit-background-clip:text;background-clip:text;color:transparent}
#login-screen .right{position:relative;flex:1 1 50%;min-width:0;display:grid;place-items:center;overflow:hidden;border-left:1px solid rgba(255,255,255,.06);
  background:radial-gradient(circle at 75% 30%,#1e2025 0%,#161719 60%,#111214 100%)}
#login-screen .right video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none}
#login-screen .right video.on{opacity:1}
#login-screen .lg-card{position:relative;z-index:5;zoom:1.3;width:386px;max-width:calc((100% - 20px) / 1.3);padding:36px 26px;border-radius:36px;background:rgba(0,0,0,.7);backdrop-filter:blur(2px)}
#login-screen .lg-card h1{text-align:center;font-size:24px;font-weight:700;line-height:32px;letter-spacing:-.6px;text-wrap:balance}
#login-screen .lg-card .lg-sub{margin-top:4px;text-wrap:balance;text-align:center;font-size:14px;line-height:20px;color:#a1a1aa}
#login-screen form{margin-top:36px;display:flex;flex-direction:column;gap:14px}
#login-screen .fg{display:flex;flex-direction:column;gap:4px}
#login-screen label{font-size:12px;line-height:16px;color:#d4d4d8}
#login-screen .field{position:relative;border:1px solid #1e293b;border-radius:8px;background:linear-gradient(180deg,#0c0e12 0%,#15181f 100%);transition:border-color .15s}
#login-screen .field:hover{border-color:#2f3d57}
#login-screen .field input{display:block;width:100%;height:36px;padding:0 41px 0 15px;border:0;border-radius:8px;background:transparent;font-size:14px;color:#fff;caret-color:#fff}
#login-screen .field input::placeholder{color:#71717a}
#login-screen .field input:-webkit-autofill,#login-screen .field input:-webkit-autofill:hover,#login-screen .field input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 600000s 0s,color 600000s 0s}
#login-screen .field input:autofill{-webkit-text-fill-color:#fff;caret-color:#fff;transition:background-color 600000s 0s,color 600000s 0s}
#login-screen .field.err{border-color:rgba(244,63,94,.75);animation:lg-shake .35s}
#login-screen .field input:focus,#login-screen .field input:focus-visible{outline:0;box-shadow:none}
@keyframes lg-shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
#login-screen .eye{position:absolute;right:0;top:0;bottom:0;width:40px;display:grid;place-items:center;opacity:.9;transition:opacity .15s}
#login-screen .eye:hover{opacity:1}
#login-screen .eye img{width:16px;height:16px}
#login-screen .msg{min-height:0;font-size:12px;line-height:16px;color:#fb7185}
#login-screen .msg:empty{display:none}
#login-screen .msg.ok{color:#34d399}
#login-screen .msg.warn{color:#fbbf24}
#login-screen .go{height:34px;padding:7px 16px;border-radius:8px;background:linear-gradient(180deg,#0c0e12 0%,#15181f 100%);font-size:14px;line-height:20px;box-shadow:0 2px 4px -2px rgba(0,0,0,.1),0 4px 6px -1px rgba(0,0,0,.1);position:relative;overflow:hidden;isolation:isolate;transition:transform .1s}
#login-screen .go::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,#2563eb 0%,#38bdf8 100%);
  
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 60%);mask-image:linear-gradient(0deg,#000 0%,#000 30%,transparent 60%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position .7s cubic-bezier(.4,0,.2,1),mask-position .7s cubic-bezier(.4,0,.2,1)}
#login-screen .go:hover:not(:disabled)::before,#login-screen .go:focus-visible::before{-webkit-mask-position:0 100%;mask-position:0 100%}
#login-screen .go:active{transform:translateY(1px)}
#login-screen .go:disabled{opacity:.7;cursor:progress}
#login-screen :focus-visible{outline:2px solid rgba(56,189,248,.6);outline-offset:2px}
@media (max-width:860px){#login-screen .lg-modal{flex-direction:column;height:auto;min-height:0}
#login-screen .left{padding:32px 24px}
#login-screen .syncs{display:none}
#login-screen .right{min-height:520px}
}
#login-screen::after{content:"";position:fixed;inset:0;z-index:50;background:#050608;opacity:0;pointer-events:none;transition:opacity .5s ease}
#login-screen.leaving::after{opacity:1}
@media (prefers-reduced-motion:reduce){#login-screen .bgimg i{animation:none}
#login-screen .lg-modal{animation:none;opacity:1;transform:none}
#login-screen .sync .lg-pill,#login-screen .sync .txt,#login-screen .sync .cone,#login-screen .sync .lg-pill i{animation:none;opacity:1;transform:none}
#login-screen .sync .txt{--ta:1}
}