@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
:root{
--navy:#06131e;--navy2:#082536;--cyan:#28bddf;--text:#eef8fc;
--muted:#8ca7b6;--line:#d5e1e6;--ink:#0b2c3d;
}
html,body{margin:0;width:100%;min-height:100%;font-family:Manrope,system-ui,sans-serif}
body{background:#06131e;overflow:hidden}
.boot-screen{
position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:
radial-gradient(circle at 50% 40%,#12384c 0,#081d2b 42%,#06131e 80%);
transition:opacity .65s ease,visibility .65s ease,transform .65s ease
}
.boot-screen.hide{opacity:0;visibility:hidden;transform:scale(1.025)}
.boot-logo-shell{position:relative;width:100px;height:100px;display:grid;place-items:center}
.boot-logo-shell img{width:72px;height:72px;border-radius:22px;background:#fff;padding:9px;box-shadow:0 0 70px #28bddf55;z-index:2}
.orbit{position:absolute;inset:0;border:1px solid #4dd7f544;border-radius:50%;animation:spin 6s linear infinite}
.orbit-b{inset:-18px;border-color:#ffffff20;animation-direction:reverse;animation-duration:9s}
.boot-screen h1{margin:25px 0 4px;color:#fff;font-size:34px;letter-spacing:5px}
.boot-screen h1 b{color:#39c7e8}
.boot-screen p{margin:0;color:#92b3c2}
.boot-modules{height:22px;overflow:hidden;margin:25px 0 20px}
.boot-modules span{display:block;height:22px;color:#bdeefa;font-size:10px;letter-spacing:3px;text-align:center;animation:modules 7s infinite}
.boot-progress{width:250px;height:3px;background:#18384a;border-radius:99px;overflow:hidden}
.boot-progress i{display:block;width:42%;height:100%;background:linear-gradient(90deg,transparent,#34c8e8,transparent);animation:progress 1.15s infinite}
.login-shell{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;background:#f7fafc}
.brand-panel{
position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
padding:42px 48px;background:
linear-gradient(145deg,rgba(5,19,30,.95),rgba(7,39,55,.96)),
radial-gradient(circle at 70% 20%,#1ba6c944,transparent 35%)
}
.brand-panel:before,.brand-panel:after{
content:"";position:absolute;border-radius:50%;border:1px solid #50d7f51c
}
.brand-panel:before{width:620px;height:620px;right:-250px;top:-120px;animation:spin 35s linear infinite}
.brand-panel:after{width:390px;height:390px;right:-70px;top:40px;animation:spin 24s linear infinite reverse}
.brand-glow{
position:absolute;width:330px;height:330px;right:60px;top:110px;border-radius:50%;
background:#1aa9c91c;filter:blur(45px)
}
.brand-panel header,.brand-panel footer,.brand-content{position:relative;z-index:2}
.brand-panel header{display:flex;align-items:center;justify-content:space-between}
.brand-panel header img{width:190px;filter:brightness(0) invert(1)}
.brand-panel header span{padding:8px 12px;border:1px solid #4ac6e13a;border-radius:99px;color:#9ed8e6;font-size:9px;letter-spacing:1.5px}
.brand-content{max-width:650px;margin-bottom:7vh}
.brand-content small{color:#4ed2ee;font-size:10px;letter-spacing:3px;font-weight:800}
.brand-content h2{margin:16px 0 18px;color:#fff;font-size:54px;line-height:1.06;letter-spacing:-1.8px}
.brand-content p{max-width:570px;color:#9db9c7;font-size:15px;line-height:1.75}
.module-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.module-pills span{padding:9px 13px;border-radius:99px;background:#ffffff0d;border:1px solid #ffffff1b;color:#d9f2f8;font-size:10px}
.brand-panel footer{display:flex;align-items:center;justify-content:space-between;color:#71909f;font-size:9px}
.brand-panel footer b{color:#c6e6ee;letter-spacing:1px}
.form-panel{display:grid;place-items:center;padding:32px;background:
linear-gradient(180deg,#fbfdfe,#f3f8fa)}
.login-card{width:min(430px,92%)}
.mobile-logo{display:none}
.form-heading small{color:#1684a5;font-size:9px;letter-spacing:2.5px;font-weight:800}
.form-heading h1{margin:7px 0 8px;color:#092c3d;font-size:36px;letter-spacing:-1px}
.form-heading p{margin:0 0 30px;color:#748b96;font-size:13px}
.login-card label{display:block;margin:16px 0}
.login-card label>span{display:block;margin-bottom:7px;color:#183b4a;font-size:11px;font-weight:800}
.field{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;height:52px;border:1px solid #ccdae0;border-radius:13px;background:#fff;box-shadow:0 5px 15px #0c2d3d0c;transition:.2s}
.field:focus-within{border-color:#2aafd1;box-shadow:0 0 0 4px #2aafd117}
.field i{display:grid;place-items:center}
.field i svg{width:18px;fill:#7e98a4}
.field input{width:100%;height:100%;border:0;outline:0;background:transparent;color:#102f3d}
.field button{margin-right:7px;height:36px;padding:0 11px;border:0;border-radius:8px;background:#edf4f7;color:#456674;font-size:10px;font-weight:800}
.sign-in{
width:100%;height:54px;margin-top:9px;display:flex;align-items:center;justify-content:space-between;
padding:0 18px;border:0;border-radius:14px;background:
linear-gradient(135deg,#0a3144,#0d7d9c);color:#fff;font-weight:800;
box-shadow:0 16px 35px #0d7d9c31;transition:.2s
}
.sign-in:hover{transform:translateY(-2px);box-shadow:0 20px 40px #0d7d9c3d}
.sign-in b{font-size:20px}
.security-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:#81959e;font-size:9px}
.pulse{width:8px;height:8px;border-radius:50%;background:#20ae68;box-shadow:0 0 0 5px #20ae6815;animation:pulse 1.7s infinite}
.login-alert{display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;padding:11px;margin-bottom:15px;border:1px solid #f1c8c8;border-radius:12px;background:#fff0f0;color:#8e2e2e}
.login-alert>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#df4646;color:#fff;font-weight:900}
.login-alert div{display:flex;flex-direction:column}.login-alert small{margin-top:2px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{from{transform:translateX(-110%)}to{transform:translateX(340%)}}
@keyframes modules{0%,12%{transform:translateY(0)}14%,26%{transform:translateY(-22px)}28%,40%{transform:translateY(-44px)}42%,54%{transform:translateY(-66px)}56%,68%{transform:translateY(-88px)}70%,82%{transform:translateY(-110px)}84%,100%{transform:translateY(0)}}@keyframes pulse{50%{box-shadow:0 0 0 10px transparent}}
@media(max-width:950px){.login-shell{grid-template-columns:1fr}.brand-panel{display:none}.mobile-logo{display:block;margin-bottom:30px}.mobile-logo img{width:180px}.form-panel{min-height:100vh}.login-card{width:min(430px,90%)}}


.brand-footer-right{display:flex;align-items:flex-end;gap:13px}
.brand-footer-right small{color:#6f8e9d;font-size:8px;letter-spacing:.25px}
.brand-footer-right small i{color:#eb6269;font-style:normal}
.mobile-credit{display:none;margin-top:22px;text-align:center;color:#94a6ae;font-size:9px}
.mobile-credit i{color:#e75c63;font-style:normal}
@media(max-width:950px){
  .mobile-credit{display:block}
}