:root{ --brand:#6c5ce7; }

html,body{height:100%}
body{margin:0;background:#0b1220}

/* ==== SPLIT LAYOUT (exact, like your sample) ==== */
.split-row{min-height:100vh}
.left-pane{
  background:#fff;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background-image: url('/assets/uploads/login_left_bg.jpg'); /* settings can overwrite */
  background-size:cover; background-position:center;
}
.left-pane::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.90));
}
.left-pane > *{position:relative; z-index:1}

.right-pane{
  color:#e9eef7; position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(108,92,231,0.35), transparent 60%),
    #0b1220;
}
.right-pane::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background: var(--hero-bg, none);            /* set by inline style if provided */
  background-size:cover; background-position:center;
}

.login-card{
  width:100%; max-width:420px; border:0; border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); background:#fff;
}
.brand{font-weight:700; letter-spacing:.2px; color:var(--brand)}
.form-control, .btn{border-radius:10px}
.btn-primary{background:var(--brand); border-color:var(--brand)}
.btn-primary:hover{filter:brightness(.95)}

.device-shot{width:100%; max-width:720px; border-radius:14px; background:#0f172a;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-wrap{max-width:560px}
@media (max-width:991.98px){ .right-pane{display:none} }

/* staff layout spacing */
:root { --sidebar-w: 280px; }
.sidebar.fixed-left { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); }
.main-with-sidebar { margin-left: var(--sidebar-w); }
@media (max-width: 991px){
  .sidebar.fixed-left { position: static; width: 100%; }
  .main-with-sidebar { margin-left: 0; }
}