:root{--login-navy:#0b1324;--login-blue:#2563eb;--login-cyan:#22d3ee;--login-text:#172033;--login-muted:#6b7890;--login-border:#dfe6ef}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{font-family:Inter,Arial,sans-serif;color:var(--login-text);background:#f3f6fb}
.login-shell{display:grid;grid-template-columns:minmax(420px,1.08fr) minmax(420px,.92fr);min-height:100vh}
.login-showcase{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:48px clamp(42px,6vw,92px);color:#fff;background:radial-gradient(circle at 75% 18%,rgba(34,211,238,.2),transparent 24%),radial-gradient(circle at 13% 80%,rgba(37,99,235,.32),transparent 30%),linear-gradient(145deg,#0b1324 0%,#102a50 58%,#123f65 100%)}
.login-showcase:before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}
.showcase-orb{position:absolute;border:1px solid rgba(108,224,255,.24);border-radius:50%;box-shadow:0 0 80px rgba(34,211,238,.08)}
.orb-one{width:360px;height:360px;right:-150px;top:24%}.orb-two{width:190px;height:190px;right:70px;top:34%}
.brand-mark,.showcase-copy,.showcase-footer{position:relative;z-index:1}
.brand-mark{display:flex;align-items:center;gap:13px;font-size:1.1rem;letter-spacing:-.02em}
.brand-mark span,.mobile-brand>i{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;color:#07182c;background:linear-gradient(135deg,#67e8f9,#fff);box-shadow:0 8px 24px rgba(34,211,238,.22)}
.brand-mark img{width:46px;height:46px;object-fit:contain;border-radius:12px;background:#fff;padding:4px}
.showcase-copy{max-width:650px;margin:auto 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:rgba(255,255,255,.07)}
.eyebrow i{color:#5ee8bc}.showcase-copy h1{max-width:640px;margin:24px 0 18px;font-size:clamp(2.35rem,4vw,4.4rem);line-height:1.02;letter-spacing:-.055em;font-weight:800}
.showcase-copy p{max-width:590px;margin:0;color:#bdcada;font-size:clamp(.95rem,1.25vw,1.12rem);line-height:1.75}
.feature-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.feature-row span{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;color:#dce9f5;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);font-size:.79rem;font-weight:600}.feature-row i{color:#67e8f9}
.showcase-footer{color:#8fa5bb;font-size:.75rem}.showcase-footer i{color:#5ee8bc;margin-right:7px}
.login-panel{display:grid;place-items:center;padding:42px;background:radial-gradient(circle at 100% 0,rgba(37,99,235,.08),transparent 34%),#f5f7fb}
.login-card{width:100%;max-width:440px}.mobile-brand{display:none}.login-card header{margin-bottom:28px}.welcome-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:13px;color:#2563eb;background:#e8f0ff}
.login-card h2{margin:0 0 8px;font-size:2rem;font-weight:800;letter-spacing:-.045em}.login-card header p{margin:0;color:var(--login-muted);font-size:.9rem}
.login-alert{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px;padding:12px 14px;border-radius:11px;color:#b4233a;background:#fff0f2;border:1px solid #ffd6dc;font-size:.8rem;font-weight:600}.login-alert i{margin-top:2px}
.field-group{margin-bottom:18px}.field-group>label{display:block;margin-bottom:7px;color:#42506a;font-size:.76rem;font-weight:700}.field-control{position:relative}.field-control>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8c99ac;font-size:.82rem}
.field-control input{width:100%;height:50px;padding:0 45px 0 42px;border:1px solid var(--login-border);border-radius:11px;outline:0;color:#263248;background:#fff;font:500 .88rem Inter;transition:.18s}.field-control input::placeholder{color:#a2adbd}.field-control input:focus{border-color:#70a0f7;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
.password-toggle{position:absolute;right:8px;top:7px;width:36px;height:36px;border:0;border-radius:8px;color:#7d899b;background:transparent}.password-toggle:hover{color:#2563eb;background:#eef4ff}
.captcha-box{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0;padding:15px 16px;border:1px solid #dae7ea;border-radius:12px;background:linear-gradient(120deg,#f0fbfb,#f8fbff)}
.captcha-label{display:block;margin-bottom:5px;color:#39747a;font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.035em}.captcha-label i{margin-right:4px;color:#0ca678}.captcha-box strong{font-size:1.16rem;letter-spacing:.08em}.captcha-answer{width:92px}.captcha-answer label{display:block;margin-bottom:4px;color:#69778b;font-size:.64rem;font-weight:700;text-align:center}.captcha-answer input{width:100%;height:40px;border:1px solid #cfdde2;border-radius:9px;outline:0;text-align:center;font:700 1rem Inter;background:#fff}.captcha-answer input:focus{border-color:#70a0f7;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.login-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:52px;border:0;border-radius:11px;color:#fff;background:linear-gradient(105deg,#1d4ed8,#3182f6);box-shadow:0 10px 24px rgba(37,99,235,.23);font:.75rem Inter;font-weight:750;text-transform:uppercase;letter-spacing:.035em;transition:.18s}.login-button:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(37,99,235,.3)}
.login-card footer{margin-top:24px;color:#8a96a8;text-align:center;font-size:.69rem}.login-card footer i{margin-right:5px;color:#10a879}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-showcase{display:none}.login-panel{min-height:100vh;padding:28px 20px}.mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:46px;font-size:1rem}.mobile-brand img{width:42px;height:42px;object-fit:contain;border-radius:11px}.mobile-brand>i{font-size:1rem}.login-card header{margin-bottom:24px}}
@media(max-width:480px){.login-panel{align-items:start;padding-top:24px}.mobile-brand{margin-bottom:38px}.welcome-icon{display:none}.login-card h2{font-size:1.72rem}.captcha-box{gap:10px;padding:13px}.captcha-answer{width:78px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}