*{box-sizing:border-box}
:root{
 --nav:#04182e;
 --panel:#061d37;
 --panel2:#082743;
 --line:#315574;
 --blue:#0875f7;
 --gold:#f5a70a;
 --text:#f5f8ff;
 --muted:#b9c8dc;
}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#031528;color:var(--text)}
body{min-height:100vh;overflow:hidden}
.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,60.3%) minmax(430px,39.7%);background:#031528}
.showcase{min-height:100vh;overflow:hidden;background:#031528}
.showcase img{width:100%;height:100vh;display:block;object-fit:cover;object-position:left top}

.login-side{
 min-height:100vh;
 background:
   radial-gradient(circle at 60% 35%,rgba(18,63,105,.18),transparent 42%),
   linear-gradient(180deg,#071b33 0%,#04182e 100%);
 border-left:1px solid #27496a;
 position:relative;
 display:flex;
 flex-direction:column;
 padding:20px 34px 26px;
 box-shadow:inset 0 0 60px rgba(0,0,0,.18)
}
.version{position:absolute;right:22px;top:18px;color:#c8d5e6;font-size:14px}
.login-content{width:min(520px,100%);margin:auto;display:flex;flex-direction:column;align-items:stretch}
.logo{text-align:center;font-weight:900;font-style:italic;font-size:68px;letter-spacing:-4px;line-height:.9;color:#fff;text-shadow:0 2px 1px rgba(0,0,0,.25)}
.logo::after{content:"";display:inline-block;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:27px solid var(--gold);margin-left:-48px;transform:translateY(2px)}
.logo-sub{text-align:center;letter-spacing:8px;font-weight:700;font-size:17px;margin-top:7px}
.gold-line{width:88px;height:3px;background:var(--gold);margin:22px auto 35px;border-radius:5px}
.login-content h1{text-align:center;font-size:31px;margin:0 0 8px}
.subtitle{text-align:center;font-size:18px;color:#c5d2e3;margin:0 0 28px}

.alert{background:#5b1c24;border:1px solid #a84551;color:#fff;padding:11px 14px;border-radius:8px;margin-bottom:12px}
.field{height:58px;border:1px solid #4b6988;border-radius:7px;background:rgba(255,255,255,.06);display:grid;grid-template-columns:48px 1fr 42px;align-items:center;margin-bottom:15px}
.field:focus-within{border-color:#0d7eff;box-shadow:0 0 0 2px rgba(13,126,255,.15)}
.field-icon{text-align:center;font-size:22px;color:#d8e2f0}
.field input{height:100%;border:0;outline:0;background:transparent;color:#fff;font-size:17px;width:100%}
.field input::placeholder{color:#aabbd0}
.field-right{font-size:12px;color:#a9bad0;text-align:center}
.eye{background:transparent;border:0;color:#b7c8dc;font-size:22px;cursor:pointer;height:100%}
.remember-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 28px;color:#f1f4f8}
.remember-row label{display:flex;align-items:center;gap:8px;font-size:15px}
.remember-row input{width:20px;height:20px;accent-color:#1479ef}
.remember-row a{color:#1690ff;text-decoration:none;font-size:14px}
.login-button{height:60px;border:0;border-radius:7px;background:linear-gradient(90deg,#0875f7,#0866e8);color:white;font-size:18px;cursor:pointer;box-shadow:0 8px 20px rgba(0,85,200,.18)}
.login-button:hover{filter:brightness(1.05)}
.login-icon{font-size:23px;margin-right:10px}
.separator{display:flex;align-items:center;gap:14px;margin:27px 0 22px;color:#dbe5f2}
.separator span{height:1px;background:#6c8198;flex:1;opacity:.6}
.separator b{font-weight:400}
.code-button{height:58px;border-radius:7px;border:1px solid #587593;background:rgba(255,255,255,.02);color:#fff;font-size:16px;cursor:pointer}
.code-button span{font-size:22px;margin-right:10px}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;text-align:center}
.modules strong{font-size:28px;display:block;margin-bottom:5px}
.modules span{font-size:14px;color:#d4deea}
.login-footer{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;color:#c4d0df;font-size:12px}
.login-footer b{display:block;color:#fff;margin-bottom:5px}
.login-footer span{display:block}
.footer-slogan{text-align:right;line-height:1.35}
.footer-slogan i{display:block;width:88px;height:3px;background:var(--gold);margin:10px 0 0 auto;border-radius:4px}

@media(max-width:1050px){
 body{overflow:auto}
 .login-page{grid-template-columns:1fr}
 .showcase{display:none}
 .login-side{min-height:100vh;padding:22px}
 .login-content{max-width:540px}
}
@media(max-width:560px){
 .login-side{padding:18px}
 .logo{font-size:52px}
 .logo-sub{letter-spacing:5px;font-size:13px}
 .login-content h1{font-size:26px}
 .subtitle{font-size:15px}
 .remember-row{gap:12px;align-items:flex-start}
 .modules{grid-template-columns:repeat(2,1fr)}
 .login-footer{gap:18px}
}