/* Entrada WL: cenário vetorial leve e formulário independente dos módulos internos. */
:root { color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:#070e19; color:#edf4fc; font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
[hidden] { display:none !important; }
::selection { background:#b2f7f4; color:#082a3a; }
.wl-login-scene { position:fixed; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 8% 2%,#142d3b99,transparent 47%),linear-gradient(120deg,#080e17 10%,#0b1929 65%,#08111d); }
.wl-login-glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.28; will-change:transform; animation:wl-drift 22s ease-in-out infinite alternate; }
.wl-login-glow-cyan { width:480px; height:480px; left:20%; top:38%; background:#087f8d; }
.wl-login-glow-blue { width:420px; height:420px; right:-220px; top:-150px; background:#3159cc; opacity:.22; animation-delay:-9s; }
.wl-login-grid { position:absolute; inset:0; background-image:linear-gradient(#6bbaeb09 1px,transparent 1px),linear-gradient(90deg,#6bbaeb09 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 35% 50%,#000 5%,transparent 73%); }
.wl-login-horizon { position:absolute; width:110%; height:440px; left:-18%; bottom:-300px; border-radius:50%; border-top:1px solid #4ce5ef33; box-shadow:0 -18px 100px #26c6df0b,inset 0 25px 65px #3dcde209; transform:rotate(-12deg); }
.wl-login-layout { position:relative; isolation:isolate; display:flex; flex-direction:column; gap:38px; width:100%; max-width:1440px; min-height:100vh; min-height:100dvh; padding:36px 64px 25px; margin:0 auto; }
.wl-login-topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wl-login-wordmark { display:flex; align-items:center; gap:6px; margin:0; color:#f6f9fd; font-size:21px; font-weight:700; letter-spacing:-.6px; }
.wl-login-wordmark > span:first-child { color:#acbacb; font-weight:400; }
.wl-login-wordmark-dot { display:block; width:5px; height:5px; margin:8px 0 0 2px; border-radius:50%; background:#61dbe2; box-shadow:0 0 12px #54d6e766; }
.wl-login-top-note { color:#8a9aaf; font-size:11px; letter-spacing:.2px; }
.wl-login-content { flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,398px); align-items:center; gap:clamp(48px,8vw,120px); padding:24px 0; }
.wl-login-brand { min-width:0; animation:wl-arrive .8s ease both; }
.wl-login-kicker { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:#7fd6de; font-size:10px; font-weight:500; letter-spacing:2px; text-transform:uppercase; }
.wl-login-kicker > span { width:22px; height:1px; background:#6ddee7; box-shadow:0 0 12px #62e3ec66; }
.wl-login-brand h1 { margin:0; max-width:700px; color:#f2f6fc; font-size:clamp(39px,4.25vw,62px); font-weight:600; letter-spacing:-2.7px; line-height:1.12; }
.wl-login-brand h1 > span { background:linear-gradient(100deg,#a3f3ed 0%,#5dcce6 65%,#85a7f6); background-clip:text; -webkit-background-clip:text; color:transparent; }
.wl-login-description { margin:22px 0 0; color:#9aadc2; font-size:14px; line-height:1.85; font-weight:400; }
.wl-login-constellation { position:relative; width:100%; max-width:600px; aspect-ratio:600 / 270; margin-top:10px; margin-bottom:58px; }
.wl-login-connections { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.wl-login-signal { animation:wl-signal 14s linear infinite; }
.wl-login-logo-halo { position:absolute; width:43%; height:38%; top:27%; left:28%; border-radius:50%; background:radial-gradient(ellipse,#2de8f02b,transparent 70%); filter:blur(18px); }
.wl-login-visual { position:absolute; display:block; top:12%; left:28%; width:42%; height:45%; object-fit:contain; filter:drop-shadow(0 15px 19px #00000077) drop-shadow(0 0 24px #21daec16); will-change:transform; backface-visibility:hidden; animation:wl-mark-float 9s cubic-bezier(.45,0,.55,1) infinite; }
.wl-login-network { position:absolute; left:3%; right:3%; top:77%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wl-login-company { --wl-company-offset:0px; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:0; padding:7px 2px; color:#c2dce9; background:transparent; border:0; border-radius:0; box-shadow:none; will-change:transform; backface-visibility:hidden; animation:wl-company-float 9s cubic-bezier(.45,0,.55,1) infinite; }
.wl-login-company:nth-child(2) { --wl-company-offset:16px; transform:translate3d(0,16px,0); animation-delay:-3s; }
.wl-login-company:nth-child(3) { animation-delay:-6s; }
.wl-login-company-art { display:flex; align-items:center; justify-content:center; width:100%; height:56px; overflow:visible; border-radius:0; background:transparent; }
.wl-login-company-art img { display:block; flex-shrink:0; width:100%; height:100%; max-width:none; object-fit:contain; }
.wl-login-company-name { font-size:11px; font-weight:500; line-height:1.5; letter-spacing:.2px; }
.wl-login-pulse { stroke:#b6faff; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:12 88; stroke-dashoffset:100; opacity:0; animation:wl-connection-pulse 6s linear infinite; }
.wl-login-pulse-optmon { animation-delay:-2s; }
.wl-login-pulse-chaton { animation-delay:-4s; }
.wl-login-hub { animation:wl-hub-light 3.6s ease-in-out infinite; }
.wl-login-hub-ring { transform-origin:295px 165px; opacity:0; animation:wl-hub-ring 3.6s ease-out infinite; }
.wl-login-motion-control { position:absolute; top:0; right:0; display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px; border:0; border-radius:5px; background:transparent; color:#8babbf; font-size:9px; line-height:1.5; cursor:pointer; }
.wl-login-motion-control:hover { color:#b9edf1; }
.wl-login-motion-control:focus-visible { outline:2px solid #74d4de; outline-offset:2px; }
.wl-login-motion-control svg { width:12px; height:12px; }
.wl-login-play-icon,.wl-login-motion-control[aria-pressed="true"] .wl-login-pause-icon { display:none; }
.wl-login-motion-control[aria-pressed="true"] .wl-login-play-icon { display:block; }
.wl-login-motion-paused :is(.wl-login-glow,.wl-login-signal,.wl-login-pulse,.wl-login-hub,.wl-login-hub-ring,.wl-login-visual,.wl-login-company) { animation-play-state:paused !important; }
.wl-login-card { position:relative; min-width:0; color:#203249; color-scheme:light; background:linear-gradient(145deg,#fff,#f7fafd); padding:34px; border:1px solid #e3f0fa; border-radius:22px; box-shadow:0 30px 90px #0000004d,0 0 0 7px #d9edff05,0 0 80px #36c8e407; animation:wl-arrive .8s .12s ease both; }
.wl-login-card::before { position:absolute; content:""; left:34px; right:34px; top:-1px; height:2px; background:linear-gradient(90deg,transparent,#55d7df99,transparent); }
.wl-login-card-heading { margin-bottom:28px; }
.wl-login-card-symbol { display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:24px; border:1px solid #d9e7f3; border-radius:12px; color:#246eb8; background:linear-gradient(145deg,#f0f8ff,#eaf3fa); box-shadow:0 2px 4px #153f6a04; }
.wl-login-card-symbol svg { width:23px; height:23px; }
.wl-login-eyebrow { margin:0 0 8px; color:#6b819a; font-size:9px; font-weight:600; line-height:1.5; text-transform:uppercase; letter-spacing:1.8px; }
.wl-login-card h2 { margin:0; color:#142940; font-size:32px; font-weight:600; line-height:1.25; letter-spacing:-1.2px; }
.wl-login-card-description { margin:9px 0 0; color:#76869a; font-size:12px; line-height:1.65; }
.wl-login-form { display:flex; flex-direction:column; gap:21px; }
.wl-login-label { display:block; margin-bottom:8px; color:#344b62; font-size:12px; font-weight:500; }
.wl-login-field { position:relative; }
.wl-login-field-icon { position:absolute; top:16px; left:15px; width:18px; height:18px; color:#8a9aaf; pointer-events:none; }
.wl-login-input { display:block; width:100%; min-width:0; height:50px; padding:12px 14px 12px 43px; border:1px solid #dce4ed; border-radius:9px; background:#fff; color:#203249; font-size:14px; font-weight:400; line-height:1.5; transition:border-color .15s,box-shadow .15s; }
.wl-login-input::placeholder { color:#9aa7b6; opacity:1; }
.wl-login-input:focus { border-color:#4a98c7; outline:0; box-shadow:0 0 0 3px #52b6d21c; }
.wl-login-input[aria-invalid="true"] { border-color:#ce4161; }
.wl-login-field:focus-within > .wl-login-field-icon { color:#3685b6; }
.wl-login-password-field .wl-login-input { padding-right:47px; }
.wl-login-password-toggle { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:44px; height:44px; padding:11px; border:0; border-radius:7px; color:#7c8ca0; background:transparent; cursor:pointer; }
.wl-login-password-toggle:hover { background:#edf5fb; color:#286ca5; }
.wl-login-password-toggle:focus-visible { outline:2px solid #3986be; outline-offset:-2px; }
.wl-login-password-toggle svg { width:20px; height:20px; }
.wl-login-eye-slash { display:none; }
.wl-login-password-toggle[aria-pressed="true"] .wl-login-eye-slash { display:block; }
.wl-login-error { margin:7px 0 0; color:#b62e4c; font-size:12px; line-height:1.5; }
.wl-login-submit { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:50px; margin-top:5px; padding:13px 16px; border:1px solid #2569cb; border-radius:9px; background:linear-gradient(110deg,#1c57ce,#176bc7); color:#fff; box-shadow:0 5px 13px #2265bc24,inset 0 1px 0 #ffffff26; font-size:13px; font-weight:500; cursor:pointer; transition:box-shadow .2s,transform .2s; }
.wl-login-submit svg { width:18px; height:18px; transition:transform .2s; }
.wl-login-submit:hover { box-shadow:0 7px 19px #2265bc3d; transform:translateY(-1px); }
.wl-login-submit:hover svg { transform:translateX(3px); }
.wl-login-submit:focus-visible { outline:3px solid #92cde8; outline-offset:3px; }
.wl-login-submit:disabled { opacity:.7; cursor:wait; transform:none; }
.wl-login-card-footer { display:flex; align-items:flex-start; justify-content:center; gap:7px; margin-top:27px; padding-top:21px; border-top:1px solid #e6ecf2; color:#8694a5; font-size:10px; line-height:1.7; text-align:center; }
.wl-login-card-footer > span { display:block; flex-shrink:0; width:4px; height:4px; margin-top:6px; border-radius:50%; background:#9ab1c4; }
.wl-login-footer { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid #adcbe710; color:#66798f; font-size:10px; line-height:1.5; letter-spacing:.15px; }
@keyframes wl-drift { to { transform:translate3d(28px,-28px,0); } }
@keyframes wl-signal { to { stroke-dashoffset:-648; } }
@keyframes wl-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes wl-mark-float { 0%,100% { transform:translate3d(0,0,0); } 50% { transform:translate3d(0,-4px,0); } }
@keyframes wl-company-float { 0%,100% { transform:translate3d(0,var(--wl-company-offset),0); } 50% { transform:translate3d(0,calc(var(--wl-company-offset) - 4px),0); } }
@keyframes wl-connection-pulse { 0% { stroke-dashoffset:100; opacity:0; } 12%,82% { opacity:.95; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes wl-hub-light { 0%,100% { opacity:.5; } 45% { opacity:1; } }
@keyframes wl-hub-ring { 0% { transform:scale(.5); opacity:0; } 18% { opacity:.55; } 85%,100% { transform:scale(3.5); opacity:0; } }
@media (min-width:1600px) { .wl-login-layout { padding-top:48px; padding-bottom:32px; } .wl-login-content { gap:150px; } }
@media (max-width:1100px) { .wl-login-layout { padding-left:36px; padding-right:36px; } .wl-login-content { grid-template-columns:minmax(0,1fr) 360px; gap:40px; } .wl-login-brand h1 { font-size:44px; letter-spacing:-2px; } .wl-login-card { padding:30px; } .wl-login-description { font-size:12px; } .wl-login-network { gap:8px; left:0; right:0; } .wl-login-company { padding:7px 1px; gap:7px; } .wl-login-company-art { height:45px; } }
@media (max-width:900px) { .wl-login-layout { max-width:520px; gap:26px; padding:27px 26px 22px; } .wl-login-top-note { display:none; } .wl-login-content { grid-template-columns:minmax(0,1fr); gap:24px; padding:0; } .wl-login-kicker { font-size:8px; letter-spacing:1.4px; margin-bottom:13px; } .wl-login-brand h1 { font-size:30px; letter-spacing:-1.4px; } .wl-login-description { margin-top:13px; font-size:11px; line-height:1.7; } .wl-login-constellation { margin-top:0; margin-bottom:59px; } .wl-login-visual { top:5%; } .wl-login-card { border-radius:18px; padding:27px; } .wl-login-card-heading { margin-bottom:23px; } .wl-login-card-symbol { float:right; width:38px; height:38px; margin:0 0 0 8px; border-radius:10px; } .wl-login-card h2 { font-size:29px; } .wl-login-card-footer { margin-top:23px; padding-top:18px; } .wl-login-footer { justify-content:center; padding-top:18px; font-size:9px; text-align:center; } .wl-login-footer > span:last-child { display:none; } .wl-login-glow-cyan { left:-170px; top:5%; width:440px; height:440px; } }
@media (max-width:380px) { .wl-login-layout { padding:22px 18px 18px; gap:22px; } .wl-login-brand h1 { font-size:28px; letter-spacing:-1.2px; } .wl-login-card { padding:23px; } .wl-login-card-footer { font-size:9px; } .wl-login-company { padding:6px 1px; } .wl-login-company-name { font-size:10px; } }
@media (pointer:coarse) { .wl-login-input { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .wl-login-glow,.wl-login-company,.wl-login-visual { will-change:auto; } .wl-login-pulse,.wl-login-hub-ring,.wl-login-motion-control { display:none; } }