:root{--blue:#149dff;--cyan:#4ac9ff;--gold:#ffbd4a;--ink:#020a14;--white:#f7fbff;--muted:#aab7c5}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink)}
body.msb-login-ref{min-height:100vh!important;overflow:hidden!important;color:var(--white)!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important;background:var(--ink)!important}
body.msb-login-ref:before,body.msb-login-ref:after{display:none!important}
.login-stage{position:relative;isolation:isolate;width:100vw;height:100vh;min-height:640px;overflow:hidden;background:#020914 url('/static/msb_login_cinematic_final.webp?v=20260911-final') center center/cover no-repeat}
.login-stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,9,18,.18) 0%,rgba(2,9,18,.06) 34%,rgba(2,9,18,.12) 59%,rgba(2,9,18,.32) 100%),linear-gradient(180deg,rgba(1,7,15,.18),transparent 48%,rgba(1,7,15,.24))}
.cinematic-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 5% 7%,rgba(1,8,18,.40),transparent 32%),radial-gradient(circle at 58% 29%,rgba(27,120,194,.10),transparent 26%),radial-gradient(circle at 29% 58%,rgba(255,174,57,.08),transparent 31%)}
.brand-zone,.clock-zone,.network-zone,.login-panel-wrap,.right-copy,.trust-strip,.copyright,.tanker-motto{position:absolute;z-index:5}
.brand-zone{left:3.6vw;top:4.1vh;width:360px}
.msb-wordmark{position:relative;width:310px;height:126px}
.msb-metal{position:absolute;left:0;top:-6px;font-size:84px;line-height:.9;font-style:italic;font-weight:1000;letter-spacing:-.095em;background:linear-gradient(180deg,#fff 2%,#d9e0e7 31%,#737e8a 55%,#e8eef3 74%,#7e8a95 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 2px rgba(0,0,0,.55))}
.brand-drop{position:absolute;left:103px;top:38px;width:24px;height:44px;background:linear-gradient(180deg,#36bbff,#0077e8);clip-path:polygon(52% 0,100% 58%,78% 100%,22% 100%,0 58%);transform:rotate(7deg);filter:drop-shadow(0 0 8px rgba(33,171,255,.7))}
.erp-lockup{position:absolute;left:5px;bottom:2px;width:296px;display:flex;align-items:center;gap:15px}
.erp-lockup i{height:2px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.25))}
.erp-lockup i:last-child{background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.9))}
.erp-lockup b{font-size:30px;letter-spacing:.34em;padding-left:.34em;color:#e8edf3;text-shadow:0 2px 6px #000}
.brand-tagline{margin-top:10px;color:#d5dce5;font-size:13px;font-weight:650;letter-spacing:.32em;white-space:nowrap;text-shadow:0 2px 10px #000}
.brand-pillars{display:grid;gap:14px;margin-top:25px;color:#dce5ee;font-size:13px;letter-spacing:.34em;text-shadow:0 2px 8px #000}
.clock-zone{right:3.8vw;top:2.4vh;text-align:right}
.clock-zone b{display:block;font-size:30px;line-height:1;font-weight:500;letter-spacing:.04em;text-shadow:0 3px 15px #000}
.clock-zone span{display:block;margin-top:8px;color:#d4dae2;font-size:12px;text-shadow:0 2px 8px #000}
.network-zone{right:5.2vw;top:11.2vh;width:min(30vw,430px);height:min(58vh,520px)}
.network-zone svg{width:100%;height:100%;overflow:visible}
.pk-outline{fill:rgba(3,18,32,.28);stroke:rgba(37,185,255,.76);stroke-width:1.4;filter:drop-shadow(0 0 7px rgba(30,164,255,.34))}
.route{fill:none;stroke-width:2.1;stroke-linecap:round;stroke-dasharray:5 5;filter:url(#mapGlow);animation:routeFlow 6s linear infinite}
.route.blue{stroke:#31baff}.route.gold{stroke:#ffbc48;stroke-width:2.5}
.route-b{animation-duration:7.5s}.route-c{animation-duration:9s}.route-d{animation-duration:5.5s}
.node circle:first-child{fill:#ffbd4a;stroke:#fff2c6;stroke-width:1.2;filter:url(#mapGlow)}
.node.terminal circle:first-child{fill:#33c1ff;stroke:#d9f5ff}
.node .pulse{fill:none;stroke:rgba(255,190,72,.66);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:nodePulse 2.1s ease-out infinite}
.node.terminal .pulse{stroke:rgba(52,196,255,.65)}
.node text{fill:#fff;font-size:12px;font-weight:700;paint-order:stroke;stroke:#06101b;stroke-width:4px;stroke-linejoin:round}
.map-legend{position:absolute;right:-20px;top:155px;width:105px;padding:9px 10px;border:1px solid rgba(63,156,220,.42);border-radius:6px;background:rgba(2,14,27,.67);backdrop-filter:blur(7px);display:grid;gap:8px;color:#dbe7f1;font-size:9px}
.map-legend span{display:flex;align-items:center;gap:7px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.blue-dot{background:#32c4ff;box-shadow:0 0 9px #1ab1ff}.gold-dot{background:#ffc24e;box-shadow:0 0 9px #ffb02f}.line-swatch{width:15px;height:2px;background:#4bcaff;box-shadow:0 0 6px #41c4ff}
.right-copy{right:2vw;color:#e0e8f1;font-size:9px;line-height:1.8;letter-spacing:.27em;text-shadow:0 2px 8px #000}
.top-copy{top:13.5vh}.lower-copy{top:46vh}
.lower-copy i{display:block;width:22px;height:1px;background:#e7b94e;margin-top:10px}
.login-panel-wrap{left:50%;top:18vh;transform:translateX(-50%);width:min(29vw,400px)}
.login-panel{margin:0!important;padding:37px 34px 27px!important;border:1px solid rgba(56,157,229,.52)!important;border-radius:17px!important;background:linear-gradient(155deg,rgba(3,18,34,.91),rgba(3,14,29,.83))!important;box-shadow:0 28px 70px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.05),0 0 32px rgba(17,133,222,.08)!important;backdrop-filter:blur(13px)}
.panel-head{text-align:center;margin:0 0 25px}
.panel-head>span{display:block;color:#f5f7fa;font-size:20px;line-height:1.2}
.panel-head h1{margin:7px 0 8px!important;background:none!important;color:#fff!important;font-size:34px!important;line-height:1!important;letter-spacing:-.02em!important}
.panel-head h1 b{font-weight:1000}.panel-head h1 em{font-style:normal;color:#20a8ff;font-weight:1000}
.panel-head p{margin:0!important;color:#a9b8c7!important;font-size:9px!important;font-weight:700;letter-spacing:.22em}
.login-note,.login-error{margin:-10px 0 12px;padding:9px 11px;border-radius:8px;font-size:10px;text-align:center}
.login-note{background:rgba(19,156,255,.10);border:1px solid rgba(47,173,255,.28);color:#cdefff}
.login-error{background:rgba(244,63,94,.10);border:1px solid rgba(244,63,94,.30);color:#ffd1d9}
.login-field{height:51px!important;margin:0 0 14px!important;padding:0!important;display:flex!important;align-items:center!important;border:1px solid rgba(112,163,202,.43)!important;border-radius:8px!important;background:rgba(12,29,48,.73)!important;transition:.18s ease!important;color:#dce8f2!important}
.login-field:focus-within{border-color:#35b6ff!important;box-shadow:0 0 0 3px rgba(29,164,255,.08),0 0 22px rgba(29,164,255,.13)!important}
.field-icon{width:47px;min-width:47px;text-align:center;color:#e6eef5;font-size:19px;opacity:.92}
.login-field input{flex:1!important;width:auto!important;height:49px!important;margin:0!important;padding:0 8px!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:#f8fbff!important;font-size:13px!important}
.login-field input::placeholder{color:#99aabc!important;opacity:1}
.password-toggle{width:42px!important;height:42px!important;min-width:42px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#eef6fd!important;font-size:14px!important}
.login-submit{position:relative;width:100%!important;height:49px!important;margin:3px 0 0!important;padding:0!important;border:1px solid #31b5ff!important;border-radius:7px!important;background:linear-gradient(180deg,#169df3,#0873cf)!important;color:#fff!important;box-shadow:0 10px 28px rgba(0,119,226,.28),inset 0 1px 0 rgba(255,255,255,.18)!important;font-size:14px!important;font-weight:800!important;overflow:hidden!important}
.login-submit:before{content:"";position:absolute;top:-35%;left:-28%;width:20%;height:170%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.60),transparent);transform:skewX(-18deg);animation:buttonSweep 4.7s ease-in-out infinite}
.login-submit:disabled{opacity:.74}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 2px 0;color:#cbd7e2;font-size:10px}
.login-options label{display:flex;align-items:center;gap:7px;cursor:pointer}
.login-options input{width:15px!important;height:15px!important;margin:0!important;accent-color:#139cf9}
.login-options button{margin:0!important;padding:2px 0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#3ebcff!important;font-size:10px!important}
.login-assist{min-height:16px;margin-top:4px;color:#95b8d2;font-size:9px;text-align:right}
.panel-divider{height:1px;margin:8px 0 14px;background:rgba(117,159,193,.25)}
.panel-keywords{display:flex;justify-content:center;align-items:center;gap:8px;color:#8fa4b7;font-size:7px;letter-spacing:.16em}
.panel-keywords i{width:2px;height:2px;border-radius:50%;background:#7891a5}
.tanker-motto{left:8.2vw;bottom:21vh;width:205px;text-align:center;color:#dce6ef;text-shadow:0 2px 8px #000}
.tanker-motto b,.tanker-motto span{display:block;font-size:9px;letter-spacing:.18em}.tanker-motto span{margin-top:5px;color:#b6c3cf}
.trust-strip{left:19.2vw;right:20vw;bottom:2.8vh;height:62px;display:flex;align-items:center;justify-content:center}
.trust-item{height:48px;min-width:128px;padding:0 20px;display:flex;align-items:center;gap:11px;border-right:1px solid rgba(204,216,229,.30)}
.trust-item:last-child{border-right:0}
.trust-item>b{font-size:21px;font-weight:400;color:#eef5fb}
.trust-item span{display:block}.trust-item strong{display:block;color:#f3f7fb;font-size:9px;letter-spacing:.08em;text-align:center}.trust-item small{display:block;margin-top:5px;color:#aebbc7;font-size:7px;letter-spacing:.10em;white-space:nowrap}
.copyright{right:3.4vw;bottom:2.7vh;color:#c1c9d1;font-size:8px;text-shadow:0 2px 6px #000}
.cursor-glow,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;transform:translate3d(-100px,-100px,0);will-change:transform}
.cursor-glow{width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,rgba(38,174,255,.15) 0%,rgba(255,194,76,.06) 38%,transparent 70%);mix-blend-mode:screen;filter:blur(2px)}
.cursor-ring{width:32px;height:32px;margin:-16px 0 0 -16px;border:1px solid rgba(84,195,255,.58);border-radius:50%;box-shadow:0 0 17px rgba(52,177,255,.18);transition:width .18s,height .18s,margin .18s,border-color .18s}
.cursor-spark{position:fixed;width:3px;height:3px;border-radius:50%;background:#63d1ff;box-shadow:0 0 8px #39bfff;pointer-events:none;z-index:9998;animation:sparkFade .65s ease-out forwards}
.cursor-active .cursor-ring{width:47px;height:47px;margin:-23.5px 0 0 -23.5px;border-color:rgba(255,203,98,.86)}
@keyframes routeFlow{to{stroke-dashoffset:-35}}
@keyframes nodePulse{0%{opacity:.9;transform:scale(.55)}80%,100%{opacity:0;transform:scale(1.45)}}
@keyframes buttonSweep{0%,68%{left:-28%}86%,100%{left:125%}}
@keyframes sparkFade{0%{opacity:.8;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.15)}}

@media(max-width:1280px){.brand-zone{left:2.8vw}.network-zone{right:4vw;width:30vw}.right-copy{display:none}.login-panel-wrap{width:365px}.trust-strip{left:17vw;right:17vw}.trust-item{min-width:112px;padding:0 13px}}
@media(max-height:820px){.brand-zone{top:3.0vh;transform:scale(.92);transform-origin:top left}.brand-pillars{margin-top:18px;gap:10px}.clock-zone{top:2vh}.network-zone{top:8vh;height:57vh}.login-panel-wrap{top:13.7vh}.login-panel{padding:30px 30px 22px!important}.panel-head{margin-bottom:19px}.panel-head>span{font-size:19px}.panel-head h1{font-size:32px!important}.login-field{height:48px!important;margin-bottom:11px!important}.login-field input{height:46px!important}.login-submit{height:47px!important}.trust-strip{bottom:1.7vh}.tanker-motto{bottom:18vh}}
@media(max-width:1030px){.brand-pillars,.right-copy,.map-legend,.tanker-motto{display:none}.brand-zone{transform:scale(.82);transform-origin:top left}.network-zone{right:2vw;width:37vw;opacity:.78}.login-panel-wrap{left:45%;width:360px}.trust-strip{left:10vw;right:10vw}}
@media(max-width:820px){body.msb-login-ref{overflow:auto!important}.login-stage{height:auto;min-height:980px;background-position:38% center}.brand-zone{left:20px;top:20px}.clock-zone{right:20px;top:22px}.network-zone{right:-10%;top:105px;width:68vw;height:480px;opacity:.42}.login-panel-wrap{left:50%;top:235px;width:min(90vw,410px)}.trust-strip{left:4vw;right:4vw;bottom:35px;flex-wrap:wrap;height:auto}.trust-item{border:0;min-width:31%;padding:8px}.copyright{right:20px;bottom:10px}}
@media(max-width:540px){.login-stage{min-height:940px}.brand-zone{transform:scale(.68)}.clock-zone b{font-size:22px}.clock-zone span{font-size:9px}.network-zone{top:95px;right:-25%;width:95vw;opacity:.32}.login-panel-wrap{top:220px;width:92vw}.login-panel{padding:27px 20px 22px!important}.trust-strip{display:none}.copyright{left:0;right:0;text-align:center}.panel-keywords{gap:5px;font-size:6px}}
@media(min-width:900px) and (max-width:1280px) and (max-height:820px){
  .brand-zone{left:3.1vw;top:3.0vh;transform:scale(1.04);transform-origin:top left}
  .brand-pillars{margin-top:17px;gap:10px}
  .clock-zone{right:3.3vw;top:1.8vh}
  .clock-zone b{font-size:34px}
  .clock-zone span{font-size:12px}
  .network-zone{right:4.0vw;top:7.2vh;width:29vw;height:56vh}
  .node text{font-size:13px}
  .map-legend{right:-16px;top:150px;width:110px;font-size:10px}
  .right-copy{right:1.7vw;font-size:10px;line-height:1.72}
  .top-copy{top:13vh}.lower-copy{top:45vh}
  .login-panel-wrap{left:50.5%;top:14.8vh;width:390px}
  .login-panel{padding:32px 31px 23px!important}
  .panel-head{margin-bottom:20px}
  .panel-head>span{font-size:20px}
  .panel-head h1{font-size:34px!important}
  .panel-head p{font-size:9px!important}
  .login-field{height:49px!important}
  .login-field input{height:47px!important;font-size:13px!important}
  .login-submit{height:48px!important;font-size:14px!important}
  .trust-strip{left:15vw;right:15vw;bottom:2.4vh;height:66px}
  .trust-item{height:52px;min-width:125px;padding:0 16px;gap:12px}
  .trust-item>b{font-size:23px}
  .trust-item strong{font-size:9px}.trust-item small{font-size:7px}
  .tanker-motto{left:8.6vw;bottom:18.5vh}
  .tanker-motto b,.tanker-motto span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.route,.pulse,.login-submit:before,.cursor-spark{animation:none!important}.cursor-glow,.cursor-ring{display:none!important}}