@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#1f343b;
  --muted:#7c8b8e;
  --line:#e5ebea;
  --teal:#17365D;
  --teal-light:#E8EEF6;
  --coral:#245A91;
  --canvas:#F4F7FB;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",Arial,sans-serif;color:var(--ink)}
body{min-height:100vh;min-height:100svh;background:var(--canvas)}
button,input{font:inherit}
.login-shell{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);background:#fff}

/* Left brand experience */
.brand-panel{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding:38px clamp(30px,6vw,86px) 28px;background:#F4F7FB;display:flex;flex-direction:column}
.brand-panel:before{content:"";position:absolute;z-index:-1;width:650px;height:650px;border-radius:50%;right:-235px;bottom:-330px;border:1px solid rgba(40,127,130,.13);box-shadow:0 0 0 55px rgba(40,127,130,.025),0 0 0 110px rgba(40,127,130,.02)}
.brand-panel:after{content:"";position:absolute;z-index:-1;width:360px;height:360px;border-radius:50%;left:-210px;top:35%;background:rgba(255,255,255,.35);filter:blur(2px)}
.brand-top{display:flex;align-items:center;gap:12px}
.brand-symbol{width:58px;height:58px;display:block;flex:0 0 58px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 5px 18px rgba(31,67,67,.10);border:1px solid rgba(22,66,135,.12)}
.brand-logo-img{padding:0}
.brand-symbol svg{width:29px;height:29px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-name{display:flex;flex-direction:column;gap:5px;font-family:Manrope,sans-serif;font-size:13px;font-weight:800;letter-spacing:1.3px;color:#17365D}.brand-name small{font:700 8px "DM Sans",Arial,sans-serif;letter-spacing:1.5px;color:#71818a}
.brand-name span{color:#245A91;padding:0 3px}
.hero-copy{margin-top:clamp(55px,10vh,105px);max-width:500px}
.eyebrow{display:flex;align-items:center;gap:9px;color:#628184;font-size:9px;font-weight:700;letter-spacing:2px}
.eyebrow span{width:22px;height:2px;background:var(--coral);border-radius:2px}
.hero-copy h1{margin:20px 0 14px;font-family:Manrope,sans-serif;font-size:clamp(36px,4.5vw,58px);line-height:1.08;letter-spacing:-2.3px;font-weight:700;color:#243b42}
.hero-copy p{max-width:380px;margin:0;color:#718184;font-size:14px;line-height:1.8}

/* Abstract stock/invoice illustration */
.visual-stage{position:relative;width:min(510px,100%);height:290px;margin:auto auto 0}
.stage-glow{position:absolute;width:250px;height:250px;left:50%;top:50%;transform:translate(-50%,-48%);border-radius:50%;background:rgba(255,255,255,.72);filter:blur(1px)}
.stage-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(67,132,130,.22);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}
.ring-one{width:370px;height:220px}
.ring-two{width:430px;height:260px;transform:translate(-50%,-50%) rotate(22deg);border-color:rgba(216,121,104,.18)}
.stage-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:36px;background:#fff;box-shadow:0 20px 55px rgba(35,73,74,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}
.center-grid{width:57px;height:57px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:14px}
.center-grid span{border-radius:4px;background:#D5DFEA}
.center-grid span:nth-child(2),.center-grid span:nth-child(4),.center-grid span:nth-child(8){background:#78b4ad}
.center-grid span:nth-child(5){background:#D5DFEA}
.stage-center b{font-family:Manrope,sans-serif;font-size:12px;color:#31494e}
.stage-center small{margin-top:5px;font-size:7px;letter-spacing:1.2px;color:#91a09e}
.stage-card{position:absolute;z-index:2;display:flex;align-items:center;gap:11px;padding:12px 15px;background:rgba(255,255,255,.96);border:1px solid rgba(223,233,230,.9);border-radius:12px;box-shadow:0 12px 35px rgba(37,69,69,.09)}
.stock-card{left:0;top:48px}
.invoice-card{right:0;bottom:37px}
.mini-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px}
.mini-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mini-icon.teal{background:#E8EEF6;color:#368a84}
.mini-icon.coral{background:#F4F7FB;color:#245A91}
.stage-card b{display:block;font-size:10px;color:#33494d}
.stage-card small{display:block;margin-top:4px;font-size:9px;color:#8b999a}
.card-dot{width:7px;height:7px;border-radius:50%;background:#6eb18b;margin-left:10px}
.card-check{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background:#E8EEF6;color:#4e9c6d;font-size:11px;margin-left:8px}
.brand-foot{display:flex;align-items:center;gap:13px;color:#91a09d;font-size:8px;font-weight:700;letter-spacing:1.2px}
.foot-line{width:35px;height:1px;background:#cbd8d4}

/* Right sign-in form */
.form-panel{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:45px clamp(28px,5vw,76px) 24px;background:#fff}
.form-wrap{width:100%;max-width:370px;margin:auto}
.form-heading{margin-bottom:34px}
.welcome-tag{color:var(--teal);font-size:9px;font-weight:800;letter-spacing:2px}
.form-heading h2{margin:12px 0 8px;font-family:Manrope,sans-serif;font-size:30px;line-height:1.2;letter-spacing:-1px;color:#263e45}
.form-heading p{margin:0;color:#849194;font-size:12px;line-height:1.7}
#loginForm{display:flex;flex-direction:column;gap:9px}
#loginForm label{margin-top:10px;color:#52666a;font-size:11px;font-weight:700}
.field-wrap{height:49px;display:flex;align-items:center;gap:12px;padding:0 13px;border:1px solid #e1e9e7;border-radius:8px;background:#FFFFFF;transition:.2s}
.field-wrap:focus-within{border-color:#78aaa4;background:#fff;box-shadow:0 0 0 3px rgba(40,127,130,.08)}
.field-wrap svg{width:18px;height:18px;flex:none;stroke:#829694;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.field-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#2c4146;font-size:13px}
.field-wrap input::placeholder{color:#a5b0ad}
.show-password{border:0;background:transparent;color:#548d88;font-size:9px;font-weight:800;letter-spacing:.7px;padding:7px 0}
.login-error{min-height:0;margin:0;color:#B42318;font-size:11px}
.login-error:not(:empty){margin-top:3px}
.submit-button{height:49px;margin-top:13px;padding:0 17px;border:0;border-radius:8px;background:#17365D;color:#fff;display:flex;align-items:center;justify-content:center;gap:13px;font-size:13px;font-weight:700;box-shadow:0 8px 18px rgba(40,127,130,.17);transition:.2s}
.submit-button:hover{background:#216e71;transform:translateY(-1px);box-shadow:0 11px 22px rgba(40,127,130,.22)}
.submit-button span{font-size:18px;font-weight:400}
.form-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:25px;color:#98a4a1;font-size:10px}
.security-icon{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#E8EEF6;color:#57956e;font-size:10px;font-weight:800}
.mobile-brand{display:none;align-items:center;gap:10px}.mobile-brand b{display:flex;flex-direction:column;gap:4px;color:#17365D;font:800 10px Manrope;letter-spacing:1px}.mobile-brand small{font:700 7px "DM Sans",Arial,sans-serif;color:#7d8a98;letter-spacing:1.2px}
.form-footer{width:100%;max-width:370px;display:flex;justify-content:space-between;margin-top:auto;padding-top:25px;color:#a2adaa;font-size:8px;font-weight:700;letter-spacing:1px}

/* Responsive */
@media(max-width:900px){
 .login-shell{grid-template-columns:minmax(0,1fr) 390px}
 .brand-panel{padding-left:35px;padding-right:35px}
 .hero-copy h1{font-size:43px}
 .visual-stage{transform:scale(.9);transform-origin:center bottom}
}
@media(max-width:680px){
 .login-shell{display:flex;flex-direction:column;min-height:100svh}
 .brand-panel{min-height:0;height:260px;padding:18px 22px 12px}
 .brand-symbol{width:42px;height:42px;flex-basis:42px;border-radius:50%}
 .brand-symbol svg{width:24px;height:24px}
 .brand-name{font-size:11px}.brand-name small{font-size:7px}
 .hero-copy{margin-top:25px}
 .eyebrow{font-size:8px}
 .hero-copy h1{font-size:29px;letter-spacing:-1px;margin:10px 0 7px}
 .hero-copy p{max-width:310px;font-size:10px;line-height:1.5}
 .visual-stage{position:absolute;right:-42px;bottom:-55px;width:260px;height:160px;margin:0;transform:scale(.68);transform-origin:center}
 .stage-card{display:none}
 .stage-center{width:125px;height:125px;border-radius:27px}
 .center-grid{width:42px;height:42px;margin-bottom:9px;gap:4px}
 .stage-center b{font-size:10px}
 .stage-center small{font-size:6px}
 .ring-one{width:270px;height:155px}.ring-two{width:310px;height:180px}
 .brand-foot{display:none}
 .form-panel{flex:1;min-height:0;padding:30px 24px 18px}
 .form-wrap{max-width:390px;margin:auto}
 .form-heading{margin-bottom:25px}
 .form-heading h2{font-size:27px}
 .form-footer{max-width:390px;padding-top:25px}
}
@media(max-width:380px){
 .brand-panel{height:238px}
 .hero-copy h1{font-size:26px}
 .form-panel{padding-left:19px;padding-right:19px}
 .field-wrap{height:46px}
 .submit-button{height:46px}
}
@media(max-height:700px) and (min-width:681px){
 .brand-panel{padding-top:22px;padding-bottom:18px}
 .hero-copy{margin-top:35px}
 .hero-copy h1{font-size:43px}
 .visual-stage{height:235px}
 .form-panel{padding-top:22px;padding-bottom:18px}
 .form-heading{margin-bottom:22px}
 .form-heading h2{font-size:26px}
}


/* ===== Premium animated, viewport-fit login experience ===== */
html,body{width:100%;min-height:100%;margin:0}
.login-shell{
  min-height:100vh;min-height:100svh;min-height:100dvh;
  height:100vh;height:100svh;height:100dvh;
  overflow:hidden;
  animation:loginShellIn .65s cubic-bezier(.2,.75,.25,1) both;
}
.brand-panel,.form-panel{min-height:0;height:100%;min-width:0}
.brand-panel{padding-top:clamp(20px,4.5vh,42px);padding-bottom:clamp(16px,3vh,28px)}
.form-panel{padding-top:clamp(18px,4vh,42px);padding-bottom:clamp(12px,2.5vh,24px)}
.form-wrap{margin:auto}
.form-heading{animation:loginContentIn .65s .12s both}
#loginForm{animation:loginContentIn .7s .2s both}
.form-security{animation:loginContentIn .7s .3s both}
.brand-top{animation:loginContentIn .65s .05s both}
.hero-copy{animation:loginContentIn .75s .14s both}
.stage-center{animation:stageFloat 5s ease-in-out infinite}
.stage-card.stock-card{animation:cardFloatLeft 5.5s ease-in-out infinite}
.stage-card.invoice-card{animation:cardFloatRight 6s ease-in-out infinite}
.ring-one{animation:ringRotate 24s linear infinite}
.ring-two{animation:ringRotateReverse 30s linear infinite}
.stage-glow{animation:glowPulse 4.5s ease-in-out infinite}
.brand-symbol{transition:transform .3s ease,box-shadow .3s ease}
.brand-symbol:hover{transform:translateY(-3px) rotate(-4deg);box-shadow:0 12px 28px rgba(31,67,67,.16)}
.field-wrap{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.field-wrap:focus-within{transform:translateY(-1px)}
.submit-button{position:relative;overflow:hidden}
.submit-button:before{
  content:"";position:absolute;top:-80%;left:-45%;width:35%;height:260%;
  background:rgba(255,255,255,.16);transform:rotate(22deg);
  animation:buttonShine 5s ease-in-out infinite;
}
.form-footer{
  flex:0 0 auto;max-width:100%;margin-top:auto;padding-top:12px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  color:#98a5b2;font-size:8px;letter-spacing:.8px;
}
.form-footer>span:last-child{text-align:right}
.developer-credit{justify-self:center;white-space:nowrap;letter-spacing:.35px;font-size:9px;font-weight:500;color:#7d8da0}
.developer-credit strong{color:#17365D;font-weight:800}

/* Viewport-aware compact layout for laptop and smaller screens */
@media(max-height:820px) and (min-width:681px){
 .brand-panel{padding-top:22px;padding-bottom:18px}
 .hero-copy{margin-top:clamp(22px,5vh,48px)}
 .hero-copy h1{font-size:clamp(34px,4vw,48px);margin:13px 0 10px}
 .hero-copy p{font-size:12px;line-height:1.6}
 .visual-stage{height:clamp(175px,27vh,245px)}
 .form-panel{padding-top:18px;padding-bottom:12px}
 .form-heading{margin-bottom:clamp(14px,3vh,25px)}
 .form-heading h2{font-size:27px}
 .form-security{margin-top:16px}
}
@media(max-height:680px) and (min-width:681px){
 .brand-top .brand-symbol{width:44px;height:44px;flex-basis:44px}
 .hero-copy{margin-top:18px}
 .hero-copy h1{font-size:34px;margin:9px 0}
 .visual-stage{height:145px}
 .stage-card{padding:8px 10px}
 .stage-center{width:125px;height:125px}
 .form-heading{margin-bottom:12px}
 .form-heading h2{font-size:24px;margin:8px 0 5px}
 #loginForm{gap:5px}
 #loginForm label{margin-top:6px}
 .field-wrap{height:43px}
 .submit-button{height:44px;margin-top:7px}
 .form-security{margin-top:10px}
 .form-footer{padding-top:6px}
}
@media(max-width:680px){
 .login-shell{
   display:flex;flex-direction:column;
   height:100vh;height:100svh;height:100dvh;
   min-height:100svh;min-height:100dvh;
   overflow-x:hidden;overflow-y:auto;
 }
 .brand-panel{
   flex:0 0 auto;height:clamp(174px,27svh,218px);min-height:174px;
   padding:14px 20px 10px;
 }
 .brand-top{gap:9px}
 .brand-symbol{width:38px;height:38px;flex-basis:38px}
 .brand-name{font-size:10px}
 .hero-copy{margin-top:17px;max-width:75%}
 .hero-copy h1{font-size:clamp(23px,6vw,29px);margin:7px 0 5px;letter-spacing:-1px}
 .hero-copy p{font-size:9px;line-height:1.45;max-width:270px}
 .eyebrow{font-size:7px;letter-spacing:1.4px}
 .visual-stage{position:absolute;right:-35px;bottom:-34px;width:205px;height:135px;margin:0;transform:scale(.68);transform-origin:right bottom}
 .stage-card{display:none}
 .stage-center{width:112px;height:112px;border-radius:24px}
 .stage-center b{font-size:9px}
 .stage-center small{font-size:6px}
 .ring-one{width:230px;height:135px}.ring-two{width:265px;height:155px}
 .brand-foot{display:none}
 .form-panel{
   flex:1 0 auto;height:auto;min-height:0;
   padding:clamp(16px,3vh,25px) 22px 12px;
   justify-content:center;
 }
 .form-wrap{max-width:390px;margin:auto}
 .mobile-brand{display:none}
 .form-heading{margin-bottom:clamp(13px,2.5vh,22px)}
 .welcome-tag{font-size:8px}
 .form-heading h2{font-size:clamp(23px,6vw,27px);margin:8px 0 5px}
 .form-heading p{font-size:10px;line-height:1.5}
 #loginForm{gap:6px}
 #loginForm label{margin-top:7px;font-size:10px}
 .field-wrap{height:44px;padding:0 11px}
 .field-wrap input{font-size:12px}
 .submit-button{height:45px;margin-top:8px;font-size:12px}
 .form-security{margin-top:13px;font-size:9px}
 .form-footer{
   margin-top:clamp(10px,2vh,18px);padding-top:10px;
   grid-template-columns:1fr;justify-items:center;gap:5px;
   text-align:center;font-size:7px;
 }
 .form-footer>span:last-child{text-align:center}
 .developer-credit{grid-row:2;white-space:normal;font-size:9px}
}
@media(max-width:380px){
 .brand-panel{height:168px;min-height:168px;padding-left:16px;padding-right:16px}
 .hero-copy{margin-top:13px}
 .hero-copy h1{font-size:23px}
 .form-panel{padding-left:18px;padding-right:18px}
 .form-heading{margin-bottom:12px}
 .field-wrap{height:42px}
 .submit-button{height:43px}
 .form-footer{margin-top:8px}
}
@media(max-height:700px) and (max-width:680px){
 .brand-panel{height:150px;min-height:150px}
 .hero-copy{margin-top:10px}
 .hero-copy h1{font-size:22px;margin:5px 0}
 .hero-copy p{font-size:8px}
 .visual-stage{transform:scale(.55);right:-28px;bottom:-26px}
 .form-panel{padding-top:12px;padding-bottom:8px}
 .form-heading{margin-bottom:9px}
 .form-heading h2{font-size:22px}
 #loginForm{gap:4px}
 #loginForm label{margin-top:5px}
 .field-wrap{height:39px}
 .submit-button{height:40px;margin-top:5px}
 .form-security{margin-top:8px}
 .form-footer{margin-top:6px;padding-top:6px}
}
@keyframes loginShellIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginContentIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes stageFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes cardFloatLeft{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes cardFloatRight{0%,100%{translate:0 0}50%{translate:0 7px}}
@keyframes ringRotate{from{rotate:0deg}to{rotate:360deg}}
@keyframes ringRotateReverse{from{rotate:360deg}to{rotate:0deg}}
@keyframes glowPulse{0%,100%{opacity:.55;scale:1}50%{opacity:.9;scale:1.08}}
@keyframes buttonShine{0%,65%{left:-45%}85%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}