:root{color-scheme:dark;--navy:#061946;--blue:#0878ff;--cyan:#16baff;--ice:#d1e6ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{background:#03163e;color:#fff}button,input{font:inherit}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(500px,38%) minmax(0,62%);position:relative;overflow:hidden;isolation:isolate}
.login-panel{z-index:2;position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,3.8vw,76px) clamp(32px,4.3vw,88px);background:radial-gradient(ellipse 98% 60% at 10% 0%,#0d67db 0%,#073479 36%,transparent 82%),linear-gradient(140deg,#051e57 0%,#05235c 49%,#03163c 100%)}
.login-panel:before{content:"";pointer-events:none;position:absolute;inset:0;opacity:.32;background:linear-gradient(133deg,transparent 50%,#0f65bb22 50.2%,transparent 51%),radial-gradient(circle at 80% 84%,#0061fc33 0%,transparent 40%)}
.login-panel:after{content:"";pointer-events:none;position:absolute;right:-80px;top:-35%;width:90px;height:180%;transform:rotate(19deg);background:linear-gradient(90deg,transparent,#067bff90,#0abfff77,transparent);filter:blur(7px);z-index:3}
.panel-aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 6%,#1582f84f,transparent 38%)}
.brand,.form-content,.panel-footer{position:relative;z-index:4}.brand{display:flex;gap:17px;align-items:center}.brand-symbol{width:67px;height:67px;flex-shrink:0;display:grid;place-items:center;border-radius:18px;background:linear-gradient(125deg,#16bcff,#076dff);box-shadow:0 15px 38px #007aff55;transform:skew(-9deg)}.brand-symbol span{transform:skew(9deg);font-style:italic;font-size:46px;line-height:1;font-weight:900;letter-spacing:-6px;padding-right:7px}.brand-copy strong{display:block;font-size:clamp(24px,2.35vw,41px);letter-spacing:-2px;line-height:1.13;font-weight:800}.brand-copy strong span{color:#17a9ff}.brand-copy small{font-size:clamp(8px,.64vw,10px);letter-spacing:2px;line-height:1.6;display:block;color:#b2ccef;font-weight:700;margin-top:4px}
.form-content{margin:clamp(22px,4.5vh,90px) 0;max-width:580px}.eyebrow{font-weight:800;color:#2ac0ff;font-size:clamp(10px,.7vw,12px);letter-spacing:2.9px;white-space:nowrap}.eyebrow span{color:#c4eeff;margin:0 .25rem}.form-content h1{font-size:clamp(42px,4.2vw,77px);letter-spacing:-3px;line-height:1.075;font-weight:800;margin:22px 0 15px}.form-content h1 span{color:#12a8ff}.lead{font-size:clamp(14px,1vw,17px);line-height:1.7;color:#d7e7ff;max-width:510px;margin:0 0 28px}
#login-form{padding:clamp(19px,1.6vw,30px);border:1.25px solid #148bff;box-shadow:0 0 0 1px #24a0ff21,0 15px 45px #000c3080,0 0 26px #0074ff34,inset 0 1px 0 #58c0ff2e;background:linear-gradient(120deg,#031f50dc,#02235ccc);border-radius:19px;backdrop-filter:blur(14px)}.field+.field{margin-top:16px}.field label{font-weight:700;color:#f3f7ff;font-size:13px;display:block;margin-bottom:8px}.input-wrap{position:relative;display:flex;align-items:center}.input-wrap>svg{position:absolute;left:17px;color:#abc8f0;pointer-events:none}.input-wrap input{background:#153d77ae;border:1px solid #638dbd;color:white;border-radius:10px;width:100%;height:54px;padding:0 55px;font-size:14px;min-width:0;outline:none;transition:border-color .18s,box-shadow .18s}.input-wrap input::placeholder{color:#a5bddc}.input-wrap input:focus{border-color:#36b9ff;box-shadow:0 0 0 4px #20a0ff25}.toggle{position:absolute;right:10px;top:6px;width:41px;height:42px;display:grid;place-items:center;color:#b9d4f5;background:transparent;border:none;cursor:pointer;border-radius:9px}.toggle:focus-visible,.submit:focus-visible{outline:3px solid #83d7ff;outline-offset:3px}.toggle:hover{background:#ffffff1b}.error{min-height:12px;padding-top:4px;color:#ffb9c5;font-size:12px}.submit{display:flex;justify-content:space-between;align-items:center;width:100%;height:58px;border:0;border-radius:11px;background:linear-gradient(107deg,#079dff,#0264ff 75%);color:#fff;font-weight:800;font-size:16px;padding:0 21px;cursor:pointer;box-shadow:0 10px 24px #005dffc9,inset 0 1px 0 #91ddff55;transition:transform .2s,filter .2s}.submit:hover{transform:translateY(-1px);filter:brightness(1.1)}.submit:disabled{opacity:.64;cursor:wait}.secure-note{margin:18px 0 0;color:#a7c1e4;font-size:11px;display:flex;gap:8px;align-items:center;justify-content:center;white-space:normal}.secure-note svg{flex:none}.panel-footer{display:flex;align-items:center;gap:27px}.splice-mark{display:flex;align-items:center;gap:9px}.splice-shape{font-size:34px;font-weight:800;color:#49a8ff}.splice-mark span:last-child{display:flex;flex-direction:column}.splice-mark small{font-size:7px;letter-spacing:2px}.splice-mark strong{font-size:26px;letter-spacing:-2px;line-height:1}.footer-divider{height:42px;width:1px;background:#92b7e7}.panel-footer p{letter-spacing:2.2px;font-weight:700;font-size:9px;color:#b6cdf1;line-height:1.7;margin:0}
.road-visual{position:relative;min-height:100vh;overflow:hidden;background:#112b50}.road-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:54% 50%;filter:saturate(1.06) contrast(1.05)}.road-tint{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#071f52ba 0%,#05265340 10%,transparent 28%),linear-gradient(0deg,#021d45a3 0%,transparent 35%,transparent 70%,#05346429)}.road-edge{position:absolute;pointer-events:none;left:-60px;top:-30%;height:160%;width:90px;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#15aaff98,transparent);filter:blur(12px)}.road-status{position:absolute;right:clamp(20px,3vw,58px);top:clamp(18px,3vw,48px);font-size:10px;letter-spacing:1.5px;font-weight:800;border:1px solid #9ecff899;border-radius:100px;padding:12px 19px;backdrop-filter:blur(16px);background:#0729566e;display:flex;align-items:center;gap:9px}.status-dot{height:8px;width:8px;background:#20c6ff;box-shadow:0 0 12px #20c6ff;border-radius:100px}.road-caption{position:absolute;bottom:clamp(34px,5vw,80px);left:clamp(24px,4vw,85px);display:flex;gap:18px;font-size:12px;font-weight:800;letter-spacing:2px;line-height:1.8;text-shadow:0 2px 7px #062446}.caption-stripe{background:#13b5ff;height:82px;width:3px}
@media(min-width:1600px){.login-page{grid-template-columns:minmax(610px,38%) minmax(0,62%)}.form-content{margin-top:5vh;margin-bottom:5vh}.form-content h1{font-size:70px}}
@media(max-width:1190px){.login-page{grid-template-columns:minmax(440px,43%) 1fr}.login-panel{padding:30px 34px}.form-content h1{font-size:48px}.brand-copy strong{font-size:27px}.brand-copy small{font-size:8px}}
@media(max-width:850px){.login-page{display:block}.login-panel{min-height:100svh;padding:28px clamp(19px,6vw,55px);background:linear-gradient(90deg,#041844f5,#062f73e0),url('/static/rodovia.webp?v=splice-20261018b') center/cover;max-width:none}.login-panel:after{display:none}.road-visual{display:none}.brand-copy strong{font-size:27px}.form-content{width:100%;max-width:520px;margin:35px auto}.form-content h1{font-size:clamp(38px,9vw,52px);letter-spacing:-2px}.panel-footer{justify-content:center}.form-content .eyebrow{white-space:normal}.lead{font-size:14px}}
@media(max-width:400px){.brand-symbol{width:55px;height:55px}.brand-symbol span{font-size:36px}.brand-copy strong{font-size:22px}.brand-copy small{font-size:7px;letter-spacing:1px}.form-content h1{font-size:37px}.panel-footer{gap:13px}.panel-footer p{font-size:8px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.submit,.input-wrap input{transition:none}}