.login-layout *{box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}:root{--bg: #0d1014;--gunmetal-1: #1a1f26;--gunmetal-2: #222832;--edge: #2e3744;--bolt: #4d5a6b;--text: #e6ecf3;--muted: #9aa6b2;--accent: #20e3ff;--danger: #ff4060}.login-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(80vmax 60vmax at 15% 20%,rgba(32,227,255,.07),transparent 60%),radial-gradient(70vmax 50vmax at 85% 80%,rgba(32,227,255,.06),transparent 65%),linear-gradient(180deg,#0b0e12,var(--bg));color:var(--text);overflow:hidden}.login-layout:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px,32px 32px;-webkit-mask-image:radial-gradient(circle at 50% 50%,black 40%,transparent 80%);mask-image:radial-gradient(circle at 50% 50%,black 40%,transparent 80%);pointer-events:none}.login-layout .container{display:flex;align-items:center;justify-content:center}.login-layout .container .box.panel-industrial{position:relative;width:420px;height:520px;border-radius:18px;background:linear-gradient(180deg,var(--gunmetal-1),#141920);box-shadow:0 20px 40px #00000073,inset 0 0 0 1px #0e141a,inset 0 0 0 2px #ffffff05;overflow:hidden}.login-layout .container .box.panel-industrial:before{content:"";position:absolute;right:0;top:0;width:140px;height:70px;background:linear-gradient(180deg,#19202a,#131922);clip-path:polygon(0 0,100% 0,100% 100%,40% 100%);border-left:1px solid #0f141a;border-bottom:1px solid #0f141a;box-shadow:inset 0 1px #ffffff0d}.login-layout .container .box.panel-industrial .bolts{pointer-events:none}.login-layout .container .box.panel-industrial .bolt{position:absolute;width:16px;height:16px;background:conic-gradient(from 0deg,#5c6b7e,#3c4756,#5c6b7e);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);box-shadow:inset 0 1px #fff3,inset 0 -1px #0006;opacity:.8}.bolt.tl{left:12px;top:12px}.bolt.tr{right:12px;top:12px}.bolt.bl{left:12px;bottom:12px}.bolt.br{right:12px;bottom:12px}.login-layout .content{position:absolute;inset:10px;border-radius:12px;background:linear-gradient(180deg,var(--gunmetal-2),#1a212b);box-shadow:inset 0 0 0 1px var(--edge),inset 0 0 30px #00000080;display:flex;align-items:center;justify-content:center}.login-layout .content:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);opacity:.35;pointer-events:none}.login-layout .form{width:290px;display:flex;flex-direction:column;align-items:center;gap:10px}.login-layout .logo{width:90px;height:90px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(180deg,#222a35,#151c24);border:1px solid #0f141a;box-shadow:inset 0 0 18px #0009;margin-bottom:6px}.login-layout .logo-img{width:72px;height:72px;-o-object-fit:contain;object-fit:contain}.login-layout .content .form h2{margin:4px 0 6px;font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text);text-shadow:0 0 18px rgba(32,227,255,.12)}.login-layout .inputBox{position:relative;width:100%;margin-top:16px;display:flex;flex-direction:column}.login-layout .inputBox input{width:100%;padding:12px 42px 12px 40px;font-size:.98rem;color:var(--text);background:#121820;border:1px solid #1d2732;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff05,0 8px 20px #00000040;outline:none;transition:border-color .2s,box-shadow .2s,transform .06s}.login-layout .inputBox:focus-within input{border-color:#20e3ff99;box-shadow:0 0 0 3px #20e3ff24,inset 0 0 0 1px #ffffff08,0 10px 24px #20e3ff14}.login-layout .inputBox .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.1rem;color:#7f8b99;pointer-events:none;transition:color .2s}login-layout .inputBox:focus-within .input-icon{color:var(--accent)}.login-layout .inputBox span{position:absolute;left:12px;top:-10px;font-size:.72rem;color:#0b0f14;background:var(--accent);padding:2px 6px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 12px #20e3ff59}.login-layout .togglePass{position:absolute;right:8px;bottom:8px;background:none;border:none;color:#7f8b99;cursor:pointer;font-size:1.15rem;padding:4px;transition:color .2s,transform .06s}.login-layout .togglePass:hover{color:var(--accent)}.login-layout .togglePass:active{transform:translateY(1px)}.login-layout .links{width:100%;margin-top:8px;display:flex;justify-content:space-between}.login-layout .links a{color:var(--muted);text-decoration:none;font-size:.9rem;transition:color .2s,text-shadow .2s}.login-layout .links a:hover{color:var(--accent);text-shadow:0 0 10px rgba(32,227,255,.4)}.login-layout .content .form .inputBox input[type=submit]{background:linear-gradient(180deg,#2a3441,#1e2630);border:1px solid #2e3a48;border-radius:12px;text-transform:uppercase;letter-spacing:.12em;padding:12px;cursor:pointer;color:var(--text);box-shadow:inset 0 0 0 1px #ffffff08,0 10px 24px #00000040;transition:box-shadow .2s,border-color .2s,transform .06s,filter .2s}.login-layout .content .form .inputBox input[type=submit]:hover{border-color:#20e3ff99;box-shadow:0 0 0 3px #20e3ff1f,0 14px 30px #0000004d;filter:saturate(1.03)}.login-layout .content .form .inputBox input[type=submit]:active{transform:translateY(1px)}.login-layout .error{font-size:.8rem;color:var(--danger);margin-top:6px;text-shadow:0 0 8px rgba(255,64,96,.25)}.login-layout .inputBox .error{margin-top:6px;font-size:.8rem;color:var(--danger);text-shadow:0 0 8px rgba(255,64,96,.25);animation:fadeInError .3s ease}@keyframes fadeInError{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.login-layout .cover,.login-layout .shadow{display:none}.login-layout .inputBox .inputWrapper{position:relative;width:100%;display:flex;align-items:center}.login-layout .inputBox .inputWrapper input{width:100%;padding:12px 42px 12px 40px;font-size:.98rem;color:var(--text);background:#121820;border:1px solid #1d2732;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff05,0 8px 20px #00000040;outline:none;transition:border-color .2s,box-shadow .2s,transform .06s}.login-layout .inputBox .inputWrapper:focus-within input{border-color:#20e3ff99;box-shadow:0 0 0 3px #20e3ff24,inset 0 0 0 1px #ffffff08,0 10px 24px #20e3ff14}.login-layout .inputBox .inputWrapper .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:1.1rem;color:#7f8b99;pointer-events:none;transition:color .2s}.login-layout .inputBox .inputWrapper:focus-within .input-icon{color:var(--accent)}.login-layout .inputBox .inputWrapper .togglePass{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#7f8b99;cursor:pointer;font-size:1.15rem;padding:4px;transition:color .2s,transform .06s}.login-layout .inputBox .inputWrapper .togglePass:hover{color:var(--accent)}.login-layout .inputBox .inputWrapper span{position:absolute;left:12px;top:-10px;font-size:.72rem;color:#0b0f14;background:var(--accent);padding:2px 6px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 12px #20e3ff59}.login-layout .inputBox .error{margin-top:6px;font-size:.8rem;color:var(--danger);text-shadow:0 0 8px rgba(255,64,96,.25)}@media(max-width:480px){.login-layout .container .box.panel-industrial{width:92vw;height:520px}}
