*{box-sizing:border-box}
:root{
    --navy:#092a52;
    --navy-2:#0e3c73;
    --red:#7f1623;
    --red-2:#a51e2f;
    --ink:#162033;
    --muted:#6e7a90;
    --line:#dfe5ee;
    --surface:#fff;
    --bg:#f4f7fb;
}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{text-decoration:none;color:inherit}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(390px,44%) 1fr;background:#fff}
.login-side{display:flex;align-items:center;justify-content:center;padding:46px;background:linear-gradient(145deg,#fff,#f6f8fc)}
.login-card{width:min(470px,100%)}
.brand-mark,.portal-brand{display:flex;align-items:center;gap:13px}
.brand-mark strong,.portal-brand strong{display:block;font-size:18px;color:var(--navy)}
.brand-mark span,.portal-brand span{display:block;margin-top:3px;font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.brand-emblem{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-weight:900;font-size:24px;color:#fff;background:linear-gradient(145deg,var(--navy),var(--red));box-shadow:0 12px 28px rgba(9,42,82,.2)}
.brand-emblem.small{width:42px;height:42px;border-radius:12px;font-size:20px}
.login-heading{margin:58px 0 30px}
.eyebrow{display:inline-block;color:var(--red-2);font-weight:700;font-size:13px;margin-bottom:10px}
.login-heading h1,.portal-welcome h1{margin:0;color:var(--navy);font-size:36px}
.login-heading p,.portal-welcome p{color:var(--muted);line-height:1.8}
form label{display:block;margin-bottom:20px}
form label>span{display:block;margin-bottom:8px;font-size:14px;font-weight:700;color:#33415b}
input{width:100%;height:52px;border:1px solid var(--line);border-radius:13px;padding:0 15px;font-size:15px;outline:none;background:#fff;transition:.2s}
input:focus{border-color:#7493bb;box-shadow:0 0 0 4px rgba(9,42,82,.08)}
.password-wrap{display:flex;position:relative}
.password-wrap input{padding-left:74px}
.password-wrap button{position:absolute;left:7px;top:7px;height:38px;border:0;border-radius:9px;background:#eef3f9;color:var(--navy);padding:0 13px;cursor:pointer}
.primary-btn{width:100%;height:54px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 14px 28px rgba(9,42,82,.2)}
.primary-btn:hover{transform:translateY(-1px)}
.security-note{text-align:center;color:var(--muted);font-size:12px;margin-top:22px}
.alert{padding:13px 15px;border-radius:12px;margin:0 0 20px;font-size:14px}
.alert.danger{background:#fff0f2;color:#8d1e2b;border:1px solid #f2c8ce}
.alert.warning{background:#fff8e8;color:#7c5b08;border:1px solid #f0deae}
.visual-side{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 22%,rgba(165,30,47,.23),transparent 27%),linear-gradient(145deg,#071d38,#0d3566 58%,#091e3a);min-height:100vh}
.visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:45px 45px}
.visual-copy{position:absolute;z-index:5;right:9%;top:12%;color:white;max-width:470px}
.visual-copy span{font-size:12px;letter-spacing:5px;color:#d6dde9}
.visual-copy h2{font-size:52px;line-height:1.15;margin:18px 0}
.visual-copy p{line-height:1.9;color:#c8d2e0}
.shaft{position:absolute;bottom:-4%;width:190px;height:62%;border:1px solid rgba(255,255,255,.16);background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 50px rgba(0,0,0,.28)}
.shaft-one{left:15%}.shaft-two{left:45%;height:73%}
.rail{position:absolute;inset:0 50% 0 auto;width:2px;background:rgba(255,255,255,.14)}
.car{position:absolute;left:19px;right:19px;height:170px;background:linear-gradient(145deg,#1b283b,#37465a);border:1px solid rgba(255,255,255,.26);box-shadow:0 22px 50px rgba(0,0,0,.35);animation:liftMove 8s ease-in-out infinite alternate}
.car-two{animation-delay:-3s}
.car-one{bottom:12%}.car-two{bottom:48%}
.car-top{height:14px;background:linear-gradient(90deg,var(--red),#d03a4e,var(--red))}
.door{position:absolute;top:14px;bottom:0;width:49%;background:linear-gradient(90deg,#778292,#b8c0ca,#626d7c)}
.door.left{left:0;border-right:1px solid #2b3541}.door.right{right:0;border-left:1px solid #2b3541}
@keyframes liftMove{0%{transform:translateY(0)}100%{transform:translateY(-220px)}}
.portal-body{background:var(--bg)}
.portal-header{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,70px)}
.portal-user{display:flex;align-items:center;gap:22px}
.portal-user strong,.portal-user span{display:block;text-align:left}
.portal-user strong{font-size:14px}.portal-user span{font-size:12px;color:var(--muted);margin-top:3px}
.logout-link{padding:10px 15px;border-radius:10px;background:#fff0f2;color:var(--red);font-weight:700;font-size:13px}
.portal-main{max-width:1150px;margin:auto;padding:70px 24px}
.portal-welcome{max-width:700px;margin-bottom:38px}
.portal-welcome h1{font-size:34px}
.systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.system-card{position:relative;display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 10px 30px rgba(20,40,70,.06);transition:.2s}
.system-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(20,40,70,.1);border-color:#c5d3e5}
.system-icon{width:70px;height:70px;flex:0 0 70px;border-radius:18px;display:grid;place-items:center;color:white;font-weight:900;font-size:27px;background:linear-gradient(145deg,var(--navy),var(--red))}
.system-code{font-size:11px;letter-spacing:2px;color:var(--red);font-weight:800}
.system-content h2{font-size:20px;margin:8px 0;color:var(--navy)}
.system-content p{margin:0;color:var(--muted);line-height:1.8;font-size:13px}
.system-arrow{margin-right:auto;font-size:25px;color:var(--navy)}
.empty-state{background:#fff;border:1px solid var(--line);border-radius:20px;padding:45px;text-align:center}
.empty-state h2{color:var(--navy)}
.empty-state p{color:var(--muted)}
@media(max-width:900px){
    .auth-shell{grid-template-columns:1fr}.visual-side{display:none}.login-side{min-height:100vh;padding:28px}
    .systems-grid{grid-template-columns:1fr}
    .portal-header{height:auto;padding:18px 20px;gap:20px;align-items:flex-start}
    .portal-user{gap:10px;flex-direction:column;align-items:flex-end}
}
@media(max-width:520px){
    .login-heading{margin-top:38px}.login-heading h1{font-size:30px}
    .portal-main{padding-top:42px}.portal-welcome h1{font-size:28px}
    .system-card{align-items:flex-start;padding:22px}.system-icon{width:55px;height:55px;flex-basis:55px}
    .system-arrow{display:none}
}