:root { --jcb-blue:#087cc2; --jcb-navy:#073b66; --jcb-ink:#17314a; }
body.login-page { min-height:100vh; margin:0; display:grid; place-items:center; padding:2rem; font-family:"Source Sans Pro",Arial,sans-serif; background:linear-gradient(135deg,#eaf5fb 0%,#d5eaf7 100%); position:relative; overflow:hidden; }
body.login-page::before,body.login-page::after { content:""; position:fixed; border:42px solid rgba(8,124,194,.07); border-radius:50%; width:350px; height:350px; pointer-events:none; }
body.login-page::before { top:-180px; left:-100px; } body.login-page::after { right:-160px; bottom:-220px; }
.login-shell { width:min(1080px,100%); min-height:580px; display:grid; grid-template-columns:1.25fr .9fr; position:relative; z-index:1; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 24px 60px rgba(19,62,93,.17); }
.login-visual { position:relative; min-height:580px; background:linear-gradient(135deg,rgba(6,59,102,.88),rgba(8,124,194,.55)),url('../images/general/img_login.jpg') center/cover; display:flex; flex-direction:column; justify-content:flex-end; padding:3rem; color:#fff; }
.login-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(4,37,65,.8)); }
.login-brand,.login-visual-copy { position:relative; } .login-brand { font-size:2.25rem; font-weight:800; letter-spacing:.06em; margin-bottom:auto; }
.login-visual-copy h1 { margin:0 0 .5rem; font-weight:700; font-size:2rem; } .login-visual-copy p { margin:0; color:rgba(255,255,255,.85); font-size:1rem; }
.login-form-panel { display:flex; flex-direction:column; justify-content:center; padding:3rem 3.5rem; }
.login-logo { width:58px; height:auto; align-self:flex-end; object-fit:contain; margin-bottom:2.4rem; }
.login-form-panel h2 { color:var(--jcb-navy); font-size:1.65rem; font-weight:700; margin:0 0 .35rem; }
.login-form-panel .intro { color:#718196; font-size:.92rem; margin-bottom:2rem; }
.login-form-panel .form-label { color:var(--jcb-ink); font-size:.86rem; font-weight:600; margin-bottom:.45rem; }
.login-form-panel .form-control { height:48px; border:1px solid #ccdae6; border-radius:9px; background:#f9fbfd; padding:.7rem .85rem; }
.login-form-panel .form-control:focus { border-color:var(--jcb-blue); box-shadow:0 0 0 .2rem rgba(8,124,194,.14); background:#fff; }
.login-form-panel .btn-primary { min-height:48px; border:0; border-radius:9px; background:var(--jcb-blue); box-shadow:0 7px 14px rgba(8,124,194,.2); font-weight:700; }
.login-form-panel .btn-primary:hover { background:#066eaf; }
.login-footer { color:#8a9aaa; font-size:.75rem; text-align:center; margin:2rem 0 0; }
@media(max-width:850px) { body.login-page { padding:1rem; } .login-shell { grid-template-columns:1fr; min-height:0; } .login-visual { min-height:250px; padding:2rem; } .login-brand { font-size:1.7rem; } .login-visual-copy h1 { font-size:1.45rem; } .login-form-panel { padding:2rem; } .login-logo { margin-bottom:1.5rem; } }