*{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:light;font-family:"Segoe UI",Arial,sans-serif}
body{min-height:100vh;color:#334155;background:radial-gradient(circle at 12% 15%,rgba(255,255,255,.25),transparent 24%),radial-gradient(circle at 88% 85%,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,#667eea 0%,#764ba2 48%,#c850c0 100%)}
button,input{font:inherit}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:32px}
.login-card{width:min(980px,100%);min-height:600px;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 30px 80px rgba(48,33,88,.32);animation:card-enter .65s cubic-bezier(.2,.8,.2,1) both}
.login-visual{position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,rgba(239,246,255,.9),rgba(245,243,255,.9))}
.visual-glow{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.22),rgba(168,85,247,.08) 55%,transparent 72%);filter:blur(4px);animation:pulse-glow 4s ease-in-out infinite}
.login-visual img{position:relative;z-index:2;width:min(330px,68%);filter:drop-shadow(0 24px 24px rgba(71,85,105,.22));transform-style:preserve-3d;transition:transform .2s ease-out;animation:float 3.5s ease-in-out infinite}
.shape{position:absolute;z-index:1;display:block;border:2px solid rgba(99,102,241,.28);animation:drift 7s ease-in-out infinite}
.shape-one{top:18%;left:17%;width:22px;height:22px;border-radius:7px;transform:rotate(18deg)}
.shape-two{right:15%;bottom:20%;width:34px;height:34px;border-color:rgba(168,85,247,.28);border-radius:50%;animation-delay:-2s}
.shape-three{right:20%;top:22%;width:18px;height:18px;border-color:rgba(34,197,94,.4);transform:rotate(45deg);animation-delay:-4s}
.login-panel{display:flex;flex-direction:column;justify-content:center;padding:64px 54px}
.brand{margin-bottom:32px}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:7px 13px;margin-bottom:18px;border-radius:999px;color:#fff;font-size:14px;font-weight:800;letter-spacing:.14em;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 10px 24px rgba(99,102,241,.25)}
.brand h1{color:#0f172a;font-size:clamp(34px,5vw,48px);line-height:1;letter-spacing:-.04em}
.brand p{margin-top:12px;color:#64748b;line-height:1.5}
.login-alert{display:flex;gap:10px;align-items:center;margin-bottom:18px;padding:12px 14px;border:1px solid #fecaca;border-radius:14px;color:#b91c1c;font-size:14px;background:#fef2f2;animation:shake .35s ease-in-out}
.login-alert svg,.input-icon svg,.password-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.login-alert svg{width:20px;flex:0 0 auto}
.input-group{position:relative;display:flex;align-items:center;margin-bottom:16px;border:1px solid transparent;border-radius:12px;color:#94a3b8;background:#f1f5f9;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.input-group:focus-within{color:#6366f1;border-color:#a5b4fc;background:#fff;box-shadow:0 0 0 4px rgba(99,102,241,.12)}
.input-icon,.password-toggle{width:52px;display:grid;place-items:center;flex:0 0 auto}
.input-icon svg,.password-toggle svg{width:20px}
.input-group input{min-width:0;width:100%;height:56px;border:0;outline:0;color:#0f172a;background:transparent}
.input-group input::placeholder{color:#94a3b8}
.password-toggle{height:56px;border:0;color:#94a3b8;background:transparent;cursor:pointer;transition:color .2s ease}
.password-toggle:hover{color:#6366f1}
.login-button{position:relative;width:100%;height:56px;margin-top:8px;overflow:hidden;border:0;border-radius:12px;color:#fff;font-weight:800;letter-spacing:.08em;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 14px 30px rgba(34,197,94,.26);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.login-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 18px 34px rgba(34,197,94,.32)}
.login-button:active:not(:disabled){transform:translateY(0)}
.login-button:disabled{cursor:wait;opacity:.78}
.button-loader{position:absolute;top:50%;left:50%;display:none;width:22px;height:22px;margin:-11px;border:3px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.login-button.is-loading .button-text{opacity:0}
.login-button.is-loading .button-loader{display:block}
.login-footer{display:flex;justify-content:space-between;gap:16px;margin-top:28px;color:#94a3b8;font-size:12px}
@keyframes card-enter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes pulse-glow{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:8px -12px}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){.login-shell{padding:20px}.login-card{min-height:auto;grid-template-columns:1fr}.login-visual{min-height:230px}.login-visual img{width:190px}.login-panel{padding:40px 32px}}
@media(max-width:480px){.login-shell{padding:0}.login-card{min-height:100vh;border:0;border-radius:0}.login-visual{min-height:190px}.login-panel{justify-content:flex-start;padding:34px 22px}.login-footer{flex-direction:column;align-items:center;gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}