.login-page{background:radial-gradient(at 0 0,#22d3ee26 0%,#0000 50%),radial-gradient(at 100% 100%,#6366f11a 0%,#0000 50%),radial-gradient(#10b9810d 0%,#0000 70%),linear-gradient(135deg,#020617 0%,#0a0f1f 30%,#0f1724 60%,#111827 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative}.login-page:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#ffffff04 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-size:60px 60px;position:fixed;inset:0}.login-page .login-card{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:1;background:#0f172abf;border:1px solid #ffffff1a;border-radius:28px;grid-template-columns:1fr 1fr;width:100%;max-width:1000px;animation:.5s cubic-bezier(.4,0,.2,1) slideUp;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 80px #00000080,inset 0 0 0 1px #ffffff0d,inset 0 1px #ffffff0a}.login-page .login-card:before{content:"";z-index:1;opacity:.8;background:linear-gradient(90deg,#0000 0%,#22d3ee4d 25%,#6366f166 50%,#22d3ee4d 75%,#0000 100%);height:1px;position:absolute;top:0;left:20px;right:20px}.login-page .login-left{background:linear-gradient(135deg,#10b98126 0%,#3b82f61f 50%,#6366f114 100%);flex-direction:column;justify-content:center;padding:56px 48px;display:flex;position:relative;overflow:hidden}.login-page .login-left:before{content:"";pointer-events:none;background:radial-gradient(circle,#22d3ee14 0%,#0000 70%);border-radius:50%;width:300px;height:300px;position:absolute;top:-100px;right:-100px}.login-page .login-left:after{content:"";pointer-events:none;background:radial-gradient(circle,#6366f10f 0%,#0000 70%);border-radius:50%;width:250px;height:250px;position:absolute;bottom:-80px;left:-80px}.login-page .login-badge{color:#67e8f9;text-transform:uppercase;letter-spacing:.2em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1;background:#ffffff14;border:1px solid #ffffff1f;border-radius:40px;align-items:center;gap:8px;width:fit-content;margin-bottom:28px;padding:8px 18px;font-size:11px;font-weight:700;display:inline-flex;position:relative}.login-page .login-badge:before{content:"";background:#22d3ee;border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-dot;box-shadow:0 0 8px #22d3ee99}.login-page .login-title{color:#f1f5f9;letter-spacing:.3px;z-index:1;margin-bottom:16px;font-size:34px;font-weight:800;line-height:1.3;position:relative}.login-page .login-title span{background:linear-gradient(135deg,#22d3ee,#6366f1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.login-page .login-desc{color:#94a3b8;z-index:1;border-left:2px solid #22d3ee4d;margin-bottom:32px;padding-left:16px;font-size:15px;font-weight:500;line-height:1.8;position:relative}.login-page .login-features{color:#cbd5e1;z-index:1;flex-direction:column;gap:14px;list-style:none;display:flex;position:relative}.login-page .login-features li{align-items:center;gap:12px;font-size:14px;font-weight:500;transition:transform .3s;display:flex}.login-page .login-features li:hover{color:#e2e8f0;transform:translate(4px)}.login-page .login-features li:before{content:"✦";color:#22d3ee;text-shadow:0 0 8px #22d3ee80;font-size:16px}.login-page .login-right{flex-direction:column;justify-content:center;padding:56px 48px;display:flex;position:relative}.login-page .login-heading{color:#f1f5f9;letter-spacing:.3px;margin-bottom:8px;font-size:28px;font-weight:700}.login-page .login-subtext{color:#94a3b8;margin-bottom:32px;font-size:14px;font-weight:500}.login-page .login-form{flex-direction:column;gap:20px;display:flex}.login-page .error-text{color:#fca5a5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f871711f;border:1px solid #f8717133;border-radius:12px;align-items:center;gap:10px;padding:12px 16px;font-size:13px;font-weight:500;animation:.5s shake;display:flex}.login-page .error-text:before{content:"⚠️";font-size:16px}.login-page .password-wrapper{position:relative}.login-page .toggle-password{color:#67e8f9;cursor:pointer;letter-spacing:.3px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#22d3ee14;border:1px solid #22d3ee26;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .3s;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.login-page .toggle-password:hover{color:#a5f3fc;background:#22d3ee2e;border-color:#22d3ee4d;transform:translateY(-50%)scale(1.05)}.login-page .input{color:#e2e8f0;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;outline:none;width:100%;padding:14px 18px;font-size:15px;font-weight:500;transition:all .3s}.login-page .input:hover{background:#ffffff0d;border-color:#ffffff26}.login-page .input:focus{background:#ffffff0f;border-color:#22d3ee;box-shadow:0 0 0 4px #22d3ee1a,0 0 20px #22d3ee0d}.login-page .input::placeholder{color:#475569;font-weight:400}.login-page .input-label{color:#94a3b8;letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px;font-size:13px;font-weight:600;display:block}.login-page .btn{cursor:pointer;color:#fff;letter-spacing:.3px;border:none;border-radius:14px;padding:14px 24px;font-size:15px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.login-page .btn:before{content:"";opacity:0;background:linear-gradient(135deg,#fff3 0%,#0000 50%);transition:opacity .3s;position:absolute;inset:0}.login-page .btn:after{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.login-page .btn:hover{transform:translateY(-2px)}.login-page .btn:hover:before{opacity:1}.login-page .btn:hover:after{left:100%}.login-page .btn:active{transform:translateY(0)}.login-page .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.login-page .btn:disabled:before,.login-page .btn:disabled:after{display:none}.login-page .btn-lg{border-radius:14px;padding:16px 28px;font-size:16px}.login-page .btn-primary{background:linear-gradient(135deg,#06b6d4,#6366f1);box-shadow:0 4px 15px #22d3ee4d,inset 0 1px #fff3}.login-page .btn-primary:hover{box-shadow:0 8px 30px #22d3ee66,inset 0 1px #ffffff4d}.login-page .w-full{width:100%}.login-page .btn.loading{color:#0000;position:relative}.login-page .btn.loading:after{content:"";border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.login-legal{text-align:center;color:#64748b;background:#ffffff05;border:1px solid #ffffff0d;border-radius:12px;flex-direction:column;gap:4px;margin-top:20px;padding:12px 16px;font-size:11px;line-height:1.8;display:flex}.login-legal a{color:#67e8f9;border-radius:6px;padding:4px 8px;font-weight:600;text-decoration:none;transition:all .3s}.login-legal a:hover{color:#a5f3fc;background:#22d3ee1a}.forgot-link{text-align:center;color:#64748b;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:6px;width:100%;padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .3s;display:inline-flex}.forgot-link:before{content:"🔒";font-size:13px;transition:transform .3s}.forgot-link:hover{color:#67e8f9;background:#22d3ee14;border-color:#22d3ee26}.forgot-link:hover:before{transform:scale(1.2)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse-dot{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes spin{to{transform:translate(-50%,-50%)rotate(360deg)}}@media (max-width:768px){.login-page .login-card{grid-template-columns:1fr;max-width:500px}.login-page .login-left{order:1;padding:32px 24px}.login-page .login-right{order:2;padding:32px 24px}.login-page .login-title,.login-page .login-heading{font-size:24px}}@media (max-width:480px){.login-page{padding:12px}.login-page .login-card{border-radius:24px}.login-page .login-left,.login-page .login-right{padding:28px 20px}.login-page .login-title,.login-page .login-heading{font-size:22px}.login-page .login-badge{padding:6px 14px;font-size:10px}.login-page .login-features li{font-size:13px}}@media (prefers-color-scheme:dark){.login-page .input:-webkit-autofill{-webkit-text-fill-color:#e2e8f0;border-color:#22d3ee4d;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0f172acc}.login-page .input:-webkit-autofill:hover{-webkit-text-fill-color:#e2e8f0;border-color:#22d3ee4d;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0f172acc}.login-page .input:-webkit-autofill:focus{-webkit-text-fill-color:#e2e8f0;border-color:#22d3ee4d;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #0f172acc}}.login-page .input:focus-visible,.login-page .btn:focus-visible{outline-offset:2px;outline:2px solid #22d3ee80}@media (prefers-reduced-motion:reduce){.login-page .login-card{animation:none}.login-page .login-features li:hover{transform:none}.login-page .error-text,.login-page .login-badge:before{animation:none}}
