/* Login page (mockup match): dual-panel card, scoped to .lgx-body / .lgx-page */
.lgx-body{margin:0;min-height:100vh;background:#f1f2f6;font-family:'Nunito',system-ui,sans-serif;color:#1f2937;-webkit-font-smoothing:antialiased}
.lgx-body *,.lgx-body *::before,.lgx-body *::after{box-sizing:border-box}
.lgx-page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px;overflow:hidden}

/* Corner gradient circles */
.lgx-page .lgx-circle{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.lgx-page .lgx-circle.c1{width:300px;height:300px;left:-150px;top:-150px;background:linear-gradient(135deg,#7c3aed 0%,#4338ca 55%,#2563eb 100%)}
.lgx-page .lgx-circle.c2{width:240px;height:240px;right:-110px;bottom:-110px;background:linear-gradient(135deg,#2563eb 0%,#4338ca 50%,#7c3aed 100%)}

/* Dual panel */
.lgx-page .lgx-shell{position:relative;z-index:1;display:flex;align-items:center;width:100%;max-width:940px}
.lgx-page .lgx-card{position:relative;z-index:2;flex:0 0 46%;background:#fff;border-radius:6px;padding:46px 46px 40px;box-shadow:0 18px 50px rgba(30,41,90,.16);margin-right:-12px}
.lgx-page .lgx-welcome{position:relative;flex:1;min-height:500px;border-radius:6px;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;
  background:linear-gradient(160deg,#1e4fff 0%,#1736e6 45%,#0f22c4 100%);box-shadow:0 22px 60px rgba(23,54,230,.35)}

/* Wavy blobs */
.lgx-page .lgx-wave{position:absolute;pointer-events:none}
.lgx-page .lgx-wave.w1{width:120%;height:70%;left:-25%;top:-28%;border-radius:42% 58% 63% 37% / 45% 40% 60% 55%;background:linear-gradient(180deg,#2f5bff 0%,#1d43f0 100%);opacity:.9}
.lgx-page .lgx-wave.w2{width:95%;height:65%;right:-30%;bottom:-22%;border-radius:58% 42% 35% 65% / 55% 45% 55% 45%;background:linear-gradient(200deg,#0d1fb3 0%,#0a1a9e 100%);opacity:.85}
.lgx-page .lgx-wave.w3{width:60%;height:45%;left:-18%;bottom:-12%;border-radius:63% 37% 54% 46% / 55% 48% 52% 45%;background:#1630d8;opacity:.8}
.lgx-page .lgx-welcome-inner{position:relative;z-index:1;max-width:360px}
.lgx-page .lgx-welcome h2{margin:0 0 10px;font-size:28px;font-weight:800;letter-spacing:.02em;color:#fff}
.lgx-page .lgx-welcome p{margin:0 0 28px;font-size:15px;font-weight:600;color:rgba(255,255,255,.92)}
.lgx-page .lgx-signup{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 30px;border-radius:3px;background:#0d22b8;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-decoration:none;box-shadow:0 6px 16px rgba(5,14,90,.3);cursor:default}

/* Left form */
.lgx-page .lgx-title{margin:0 0 34px;text-align:center;font-size:20px;font-weight:700;color:#374151}
.lgx-page .lgx-title span{display:inline-block;border-bottom:1.5px solid #374151;padding-bottom:2px}
.lgx-page .lgx-error{display:flex;align-items:flex-start;gap:9px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13.5px;font-weight:600;border-radius:6px;padding:10px 12px;margin:-14px 0 18px}
.lgx-page .lgx-error i{margin-top:2px}
.lgx-page .lgx-input{position:relative;display:flex;align-items:center;height:52px;margin:0 0 20px;background:#fff;border:1px solid #e3e6ee;border-left:0;border-radius:4px;box-shadow:0 6px 16px rgba(30,41,90,.06);cursor:text;transition:box-shadow .15s,border-color .15s}
.lgx-page .lgx-input::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;background:#1d4ed8}
.lgx-page .lgx-input:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px rgba(37,99,235,.12),0 6px 16px rgba(30,41,90,.06)}
.lgx-page .lgx-input.is-invalid{border-color:#fca5a5}
.lgx-page .lgx-input.is-invalid::before{background:#ef4444}
.lgx-page .lgx-ico{flex:0 0 52px;height:24px;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:15px;border-right:1px solid #d1d5db;margin-left:4px}
.lgx-page .lgx-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 14px;font:inherit;font-size:13.5px;color:#111827}
.lgx-page .lgx-input input::placeholder{color:#9ca3af}
.lgx-page .lgx-eye{flex:0 0 auto;width:36px;height:36px;margin-right:6px;border:0;background:none;color:#c0c5cf;border-radius:6px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.lgx-page .lgx-eye:hover{color:#4b5563}
.lgx-page .lgx-eye:focus-visible{outline:2px solid #2563eb}

.lgx-page .lgx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 30px;font-size:13px}
.lgx-page .lgx-remember{display:inline-flex;align-items:center;gap:9px;color:#6b7280;cursor:pointer;margin:0}
.lgx-page .lgx-remember input{width:15px;height:15px;margin:0;accent-color:#374151;cursor:pointer}
.lgx-page .lgx-forgot{color:#374151;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.lgx-page .lgx-forgot:hover{color:#1d4ed8}

.lgx-page .lgx-submit{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto;width:130px;height:40px;border:0;border-radius:3px;background:#1d3fd6;color:#fff;font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 18px rgba(29,63,214,.3);transition:background .15s,transform .15s}
.lgx-page .lgx-submit:hover{background:#1632b8}
.lgx-page .lgx-submit:active{transform:translateY(1px)}
.lgx-page .lgx-submit:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.3)}
.lgx-page .lgx-door{font-size:13px}
.lgx-page .lgx-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:lgx-spin .7s linear infinite}
.lgx-page .lgx-submit.is-loading{width:170px;opacity:.92;cursor:progress}
.lgx-page .lgx-submit.is-loading .lgx-spinner{display:inline-block}
.lgx-page .lgx-submit.is-loading .lgx-door{display:none}
@keyframes lgx-spin{to{transform:rotate(360deg)}}

/* Tablet / mobile: stack, form first */
@media (max-width:820px){
  .lgx-page{align-items:flex-start;padding:40px 18px}
  .lgx-page .lgx-shell{flex-direction:column;align-items:stretch;max-width:440px}
  .lgx-page .lgx-card{flex:none;margin:0;padding:36px 24px 30px}
  .lgx-page .lgx-welcome{min-height:200px;margin-top:-6px;padding:30px 24px;border-radius:0 0 6px 6px}
  .lgx-page .lgx-welcome h2{font-size:22px}
  .lgx-page .lgx-welcome p{margin-bottom:18px;font-size:14px}
  .lgx-page .lgx-circle.c1{width:200px;height:200px;left:-110px;top:-110px}
  .lgx-page .lgx-circle.c2{width:160px;height:160px;right:-80px;bottom:-80px}
  .lgx-page .lgx-submit{width:100%}
  .lgx-page .lgx-submit.is-loading{width:100%}
}
@media (prefers-reduced-motion:reduce){.lgx-page *{transition:none !important}.lgx-page .lgx-spinner{animation-duration:1.6s}}

/* Right panel: invoice paperwork photo (Unsplash, Kelly Sikkema) */
.lgx-page .lgx-welcome{background:linear-gradient(90deg,rgba(15,23,42,.28) 0%,rgba(15,23,42,.05) 35%,rgba(29,63,214,.12) 100%),url('/images/login-right-invoice.jpg') center/cover no-repeat #cbd5e1;box-shadow:0 22px 60px rgba(30,41,90,.25);padding:0}
@media (max-width:820px){.lgx-page .lgx-welcome{min-height:180px;height:180px}}

/* Logo above title */
.lgx-page .lgx-logo{text-align:center;margin:-10px 0 18px}
.lgx-page .lgx-logo img{max-width:190px;max-height:64px;width:auto;height:auto;display:inline-block}

/* Forgot / reset password (single card) */
.lgx-page .lgx-single{justify-content:center}
.lgx-page .lgx-single .lgx-card{flex:0 1 440px;margin:0}
.lgx-page .lgx-help{margin:-16px 0 22px;text-align:center;font-size:13.5px;color:#6b7280;line-height:1.5}
.lgx-page .lgx-notice{display:flex;align-items:flex-start;gap:9px;background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;font-size:13.5px;font-weight:600;border-radius:6px;padding:10px 12px;margin:-14px 0 18px;line-height:1.45}
.lgx-page .lgx-notice i{margin-top:2px}
.lgx-page .lgx-submit.lgx-wide,.lgx-page .lgx-submit.lgx-wide.is-loading{width:100%;margin-top:6px}
.lgx-page .lgx-linkbtn{text-decoration:none}
.lgx-page .lgx-back{display:block;margin-top:22px;text-align:center;font-size:13px;font-weight:600;color:#374151;text-decoration:none}
.lgx-page .lgx-back:hover{color:#1d4ed8}