/* ============================================================
   LOGIN  —  scoped styles for index.html only.
   ============================================================ */
#sl{background:linear-gradient(150deg,#0A2272 0%,#1B4FDB 52%,#3B6FFF 100%);min-height:100vh;align-items:stretch}
.lg-split{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:100vh}
.lg-hero{display:flex;flex-direction:column;justify-content:center;padding:64px 52px;color:#fff;position:relative;overflow:hidden}
.lg-hero::before{content:'';position:absolute;top:-60px;left:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.03);pointer-events:none}
.lg-hero::after{content:'';position:absolute;bottom:-80px;right:-80px;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.lg-brand{font-family:var(--fd);font-size:28px;margin-bottom:4px}
.lg-brand em{opacity:.5;font-style:normal}
.lg-tag{font-size:12px;opacity:.5;margin-bottom:56px;letter-spacing:.06em;text-transform:uppercase}
.lg-h1{font-family:var(--fd);font-size:42px;line-height:1.1;margin-bottom:16px;font-weight:400}
.lg-sub{font-size:15px;opacity:.72;max-width:370px;line-height:1.65;margin-bottom:44px}
.lg-feats{display:flex;flex-direction:column;gap:14px}
.lg-feat{display:flex;align-items:center;gap:13px;font-size:14px;opacity:.8}
.lg-feat-ico{width:36px;height:36px;background:rgba(255,255,255,.14);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lg-panel{background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:64px 52px;overflow-y:auto}
.lg-ph{margin-bottom:28px}
.lg-ph h2{font-family:var(--fd);font-size:27px;margin-bottom:5px}
.lg-ph p{font-size:14px;color:var(--tx2)}
.lg-tabs{display:flex;background:var(--sf2);border-radius:var(--r);padding:4px;gap:4px;margin-bottom:26px}
.lg-tab{flex:1;padding:9px;border-radius:var(--rs);border:none;background:transparent;font-family:var(--fb);font-size:14px;font-weight:500;cursor:pointer;color:var(--tx2);transition:all .15s}
.lg-tab.on{background:var(--sf);color:var(--tx);box-shadow:var(--sh)}
.lg-pane{display:none}.lg-pane.on{display:block}
/* Register form: group fields into labelled cards so the long form reads as
   two clear sections instead of one flat scroll. Scoped to #lg-pane-register
   so the Sign In pane is completely unaffected. */
#lg-pane-register .lg-sec{background:var(--sf);border:1px solid var(--br);border-radius:var(--r);padding:18px 18px 4px;margin-bottom:16px;box-shadow:var(--sh)}
#lg-pane-register .lg-sec-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:14px}
/* Read-only company-domain suffix shown beside an email input (used in the
   admin Add-User modal). Sits flush against the input as one control. */
.lg-email-wrap{display:flex;align-items:stretch}
.lg-email-wrap .lg-fi{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.lg-email-suffix{display:flex;align-items:center;padding:0 12px;background:var(--sf2);border:1.5px solid var(--br);border-left:none;border-top-right-radius:var(--rs);border-bottom-right-radius:var(--rs);font-size:13.5px;color:var(--tx2);white-space:nowrap;font-weight:500}
.lg-err{background:var(--rl);border:1px solid rgba(193,48,48,.18);border-radius:var(--rs);padding:10px 13px;font-size:13px;color:var(--rd);margin-bottom:16px;display:none;align-items:center;gap:8px}
.lg-err.on{display:flex}
.lg-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lg-fg{margin-bottom:16px}
.lg-fg label{display:block;font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:6px}
.lg-fg label .req{color:var(--rd);margin-left:2px}
.lg-fi{width:100%;padding:11px 14px;border:1.5px solid var(--br);border-radius:var(--rs);font-family:var(--fb);font-size:14px;background:var(--sf);color:var(--tx);outline:none;transition:border-color .15s,box-shadow .15s}
.lg-fi:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(27,79,219,.09)}
.lg-fi.bad{border-color:var(--rd);background:var(--rl)}
.lg-fi.bad:focus{border-color:var(--rd);box-shadow:0 0 0 3px rgba(193,48,48,.14)}
.lg-fld-err{display:none;font-size:12px;color:var(--rd);margin-top:6px;line-height:1.4}
.lg-fld-err.on{display:block}
.lg-fi::placeholder{color:var(--tx3)}
.lg-pw{position:relative}.lg-pw .lg-fi{padding-right:42px}
.lg-eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--tx3);display:flex;align-items:center;padding:2px}
.lg-eye:hover{color:var(--tx)}
.lg-foot{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px}
.lg-chk{display:flex;align-items:center;gap:7px;cursor:pointer}
.lg-chk input{width:14px;height:14px;accent-color:var(--ac);cursor:pointer}
.lg-lnk{color:var(--ac);text-decoration:none;font-weight:500}.lg-lnk:hover{text-decoration:underline}
.lg-or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tx3);margin:16px 0}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--br)}
.lg-demo{text-align:center;font-size:13px;color:var(--tx2)}
.lg-demo strong{color:var(--tx)}
.lg-btn{width:100%;padding:12px;background:var(--ac);color:#fff;border:none;border-radius:var(--rs);font-family:var(--fb);font-size:15px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.lg-btn:hover{background:var(--ad);transform:translateY(-1px);box-shadow:0 4px 14px rgba(27,79,219,.28)}
.lg-btn:active{transform:scale(.98)}
.lg-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;pointer-events:none}
.lg-spin{width:17px;height:17px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:lgspin .7s linear infinite;flex-shrink:0}
@keyframes lgspin{to{transform:rotate(360deg)}}
.lg-ok{display:none;flex-direction:column;align-items:center;text-align:center;padding:16px 0}
.lg-ok.on{display:flex}
.lg-ok-ico{width:60px;height:60px;background:var(--gnl);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--gn)}
.lg-ok h3{font-family:var(--fd);font-size:22px;margin-bottom:5px}
.lg-ok p{font-size:14px;color:var(--tx2);margin-bottom:18px}
.lg-prog{height:4px;background:var(--al);border-radius:10px;overflow:hidden;width:180px}
.lg-progf{height:100%;background:var(--ac);border-radius:10px;transition:width .08s linear;width:0%}

@media (max-width:860px){
  .lg-split{grid-template-columns:1fr}
  .lg-hero{display:none}
  .lg-panel{padding:48px 28px}
}