/* Smarttech Radius Enterprise v12 - Login Soft Pastel Corporate */
:root{
  --st-bg-1:#f8fbfa;
  --st-bg-2:#f4fbf7;
  --st-bg-3:#fff7f7;
  --st-card:#ffffff;
  --st-border:#e8eef3;
  --st-text:#1f2937;
  --st-muted:#6b7280;
  --st-mint:#7bdcb5;
  --st-mint-dark:#45bd91;
  --st-red:#e53935;
  --st-blue-soft:#f5fbff;
}
body.login-body,
body.auth-body,
body.installer-body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(147,197,253,.32), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(254,202,202,.34), transparent 34%),
    linear-gradient(135deg,var(--st-bg-1) 0%,var(--st-bg-2) 48%,var(--st-bg-3) 100%) !important;
  color:var(--st-text);
}
.login-wrap,.auth-wrap,.installer-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 18px;
}
.login-card,.auth-card,.installer-card{
  width:min(1080px,96vw);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:0;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(232,238,243,.95);
  border-radius:28px;
  box-shadow:0 28px 80px rgba(15,23,42,.10);
  overflow:hidden;
  backdrop-filter:blur(18px);
}
.login-left,.auth-left,.installer-left{
  background:
    radial-gradient(circle at 26% 20%, rgba(123,220,181,.36), transparent 30%),
    radial-gradient(circle at 72% 10%, rgba(191,219,254,.40), transparent 28%),
    linear-gradient(145deg,#ffffff 0%,#f6fbf9 100%) !important;
  padding:54px 48px;
  color:var(--st-text) !important;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--st-border);
}
.login-left *,.auth-left *,.installer-left *{color:inherit}
.login-left img,.auth-left img,.installer-left img{
  width:152px;
  height:auto;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--st-border);
  border-radius:22px;
  padding:14px;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
  margin-bottom:34px;
}
.login-left h1,.auth-left h1,.installer-left h1{
  font-size:34px;
  line-height:1.08;
  margin:0 0 16px;
  letter-spacing:-.04em;
  color:#162033 !important;
}
.login-left p,.auth-left p,.installer-left p{
  color:#667085 !important;
  line-height:1.7;
  max-width:520px;
  margin:0 0 28px;
}
.login-left .progress,.auth-left .progress,.installer-left .progress{
  height:10px;
  width:280px;
  background:#fff;
  border:1px solid #d9e6ef;
  border-radius:999px;
  overflow:hidden;
  margin:24px 0 10px;
}
.login-left .progress span,.auth-left .progress span,.installer-left .progress span{
  display:block;
  height:100%;
  width:78%;
  background:linear-gradient(90deg,#7bdcb5,#93c5fd,#facc15,#e53935);
  border-radius:999px;
}
.login-left small,.auth-left small,.installer-left small{
  color:#7a8797 !important;
}
.login-feature-list{
  display:grid;
  gap:11px;
  margin-top:28px;
}
.login-feature-list .feature,
.login-left .feature,.auth-left .feature,.installer-left .feature{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(255,255,255,.84);
  border:1px solid #e6f4ee;
  border-radius:16px;
  color:#0f5132 !important;
  font-weight:700;
  box-shadow:0 10px 26px rgba(15,23,42,.045);
}
.login-feature-list .feature:before,
.login-left .feature:before,.auth-left .feature:before,.installer-left .feature:before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:#dffbed;
  color:#087443;
  font-weight:900;
}
.login-right,.auth-right,.installer-right{
  padding:58px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.92);
}
.login-right h2,.auth-right h2,.installer-right h2{
  font-size:27px;
  margin:0 0 10px;
  letter-spacing:-.03em;
  color:#1f2937;
}
.login-right .subtitle,.auth-right .subtitle,.installer-right .subtitle,
.login-right p,.auth-right p,.installer-right p{
  color:var(--st-muted);
}
.login-right form,.auth-right form,.installer-right form{
  margin-top:26px;
}
.login-right label,.auth-right label,.installer-right label{
  display:block;
  font-weight:700;
  font-size:13px;
  margin:14px 0 7px;
  color:#344054;
}
.login-right input,.auth-right input,.installer-right input,
.login-right select,.auth-right select,.installer-right select{
  width:100%;
  height:48px;
  border:1px solid #dde5ee;
  background:#fff;
  border-radius:15px;
  padding:0 15px;
  outline:none;
  font-size:14px;
  transition:.16s;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
.login-right input:focus,.auth-right input:focus,.installer-right input:focus{
  border-color:#8ee3c2;
  box-shadow:0 0 0 4px rgba(123,220,181,.18);
}
.login-right button,.auth-right button,.installer-right button,
.login-right .btn,.auth-right .btn,.installer-right .btn{
  height:48px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,#91e5c3,#62d2a8) !important;
  color:#064e3b !important;
  font-weight:800;
  padding:0 24px;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(98,210,168,.24);
  transition:.16s;
}
.login-right button:hover,.auth-right button:hover,.installer-right button:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}
.login-actions,.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.system-status-login{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.system-status-login .status{
  border:1px solid #d8f3e6;
  background:#ecfff5;
  color:#087443;
  border-radius:14px;
  padding:10px 12px;
  font-size:12px;
  font-weight:800;
}
.system-status-login .status:before{
  content:"●";
  margin-right:7px;
  color:#16a34a;
}
.notice,.success,.alert-success{
  background:#ecfff5 !important;
  color:#087443 !important;
  border:1px solid #bcf3d6 !important;
  border-radius:16px !important;
  padding:13px 15px !important;
}
.error,.alert-danger{
  background:#fff1f2 !important;
  color:#be123c !important;
  border:1px solid #fecdd3 !important;
  border-radius:16px !important;
  padding:13px 15px !important;
}
@media(max-width:900px){
  .login-card,.auth-card,.installer-card{grid-template-columns:1fr}
  .login-left,.auth-left,.installer-left{min-height:auto;padding:34px 28px;border-right:0;border-bottom:1px solid var(--st-border)}
  .login-right,.auth-right,.installer-right{padding:34px 28px}
  .system-status-login{grid-template-columns:1fr}
}


/* Actual login.php class alignment */
.auth-shell.card{
  width:min(1080px,96vw) !important;
  min-height:620px;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  padding:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(232,238,243,.95) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.10) !important;
  backdrop-filter:blur(18px);
}
.auth-visual{
  background:
    radial-gradient(circle at 26% 20%, rgba(123,220,181,.36), transparent 30%),
    radial-gradient(circle at 72% 10%, rgba(191,219,254,.40), transparent 28%),
    linear-gradient(145deg,#ffffff 0%,#f6fbf9 100%) !important;
  padding:54px 48px !important;
  color:#1f2937 !important;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid #e8eef3;
}
.auth-logo-img{
  width:152px !important;
  height:auto !important;
  object-fit:contain !important;
  background:#fff !important;
  border:1px solid #e8eef3 !important;
  border-radius:22px !important;
  padding:14px !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
  margin-bottom:34px !important;
}
.auth-visual h1{
  font-size:34px !important;
  line-height:1.08 !important;
  margin:0 0 16px !important;
  letter-spacing:-.04em !important;
  color:#162033 !important;
}
.auth-visual p{color:#667085 !important;line-height:1.7 !important;max-width:520px;margin:0 0 28px !important}
.auth-progress-mini{
  height:10px !important;
  width:280px !important;
  background:#fff !important;
  border:1px solid #d9e6ef !important;
  border-radius:999px !important;
  overflow:hidden !important;
  margin:24px 0 10px !important;
}
.auth-progress-mini i{
  display:block !important;height:100% !important;background:linear-gradient(90deg,#7bdcb5,#93c5fd,#facc15,#e53935) !important;border-radius:999px !important;
}
.auth-visual small{color:#7a8797 !important}
.auth-panel.single-auth{
  padding:58px 46px !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.92) !important;
}
.auth-tabs{background:#f6f8fb;border:1px solid #edf1f5;border-radius:17px;padding:5px;margin:0 0 22px !important}
.auth-tab{border-radius:13px !important;background:transparent !important;color:#667085 !important}
.auth-tab.active{background:linear-gradient(135deg,#91e5c3,#62d2a8) !important;color:#064e3b !important;box-shadow:0 14px 35px rgba(98,210,168,.22) !important}
.auth-form h2{font-size:27px !important;margin:0 0 10px !important;letter-spacing:-.03em !important;color:#1f2937 !important}
.auth-form .muted{color:#6b7280 !important}
.auth-form input{
  width:100% !important;height:48px !important;border:1px solid #dde5ee !important;background:#fff !important;border-radius:15px !important;padding:0 15px !important;outline:none !important;font-size:14px !important;transition:.16s !important;box-shadow:inset 0 1px 2px rgba(15,23,42,.03) !important;
}
.auth-form input:focus{border-color:#8ee3c2 !important;box-shadow:0 0 0 4px rgba(123,220,181,.18) !important}
.auth-form label{display:block;font-weight:700;font-size:13px;margin:14px 0 7px;color:#344054}
.auth-form .btn.full,.auth-form button.full{
  width:auto !important;min-width:210px;height:48px;float:right;margin-top:18px;border-radius:15px !important;background:linear-gradient(135deg,#91e5c3,#62d2a8) !important;color:#064e3b !important;box-shadow:0 16px 34px rgba(98,210,168,.24) !important;
}
.auth-form .btn.full:hover,.auth-form button.full:hover{transform:translateY(-1px)}
.two-col-auth{gap:13px !important}
.auto-radius-badge{background:#ecfff5 !important;border:1px solid #bcf3d6 !important;color:#087443 !important}
.login-system-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;clear:both}
.login-system-row span{border:1px solid #d8f3e6;background:#ecfff5;color:#087443;border-radius:14px;padding:10px 12px;font-size:12px;font-weight:800}
.login-system-row span:before{content:"●";margin-right:7px;color:#16a34a}
@media(max-width:900px){
  .auth-shell.card{grid-template-columns:1fr !important}
  .auth-visual{min-height:auto;padding:34px 28px !important;border-right:0;border-bottom:1px solid #e8eef3}
  .auth-panel.single-auth{padding:34px 28px !important}
  .login-system-row{grid-template-columns:1fr}
}


/* Login centered layout fix */
html,body.login-body{
  width:100%;
  min-height:100%;
  margin:0 !important;
}
body.login-body{
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow-x:hidden !important;
  padding:0 !important;
}
.login-center-wrap{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 20px;
  box-sizing:border-box;
}
.login-center-wrap .auth-shell.card{
  margin:0 auto !important;
  width:min(1080px,94vw) !important;
  max-width:1080px !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}
.auth-shell.card{
  margin-left:auto !important;
  margin-right:auto !important;
}
@media(max-width:900px){
  .login-center-wrap{
    align-items:flex-start;
    padding:18px 12px;
  }
  .login-center-wrap .auth-shell.card{
    width:100% !important;
    max-width:520px !important;
  }
}


/* v12.5 login action alignment fix */
.auth-form{clear:both;}
.login-action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:center;
  margin-top:18px;
  clear:both;
}
.auth-form .login-action-grid .btn,
.auth-form .login-action-grid button{
  width:100% !important;
  min-width:0 !important;
  float:none !important;
  margin-top:0 !important;
  height:54px !important;
  border-radius:16px !important;
  font-weight:900 !important;
}
.auth-form .login-action-grid .btn-outline,
.auth-form .login-action-grid button.btn-outline{
  background:#ffffff !important;
  color:#0f5132 !important;
  border:2px solid #7bdcb5 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.05) !important;
}
.auth-form .login-action-grid .btn-red,
.auth-form .login-action-grid button.btn-red{
  background:linear-gradient(135deg,#91e5c3,#62d2a8) !important;
  color:#064e3b !important;
  border:0 !important;
}
@media(max-width:520px){
  .login-action-grid{grid-template-columns:1fr;}
}