body.login-page{
  padding:0;
  background:var(--bg-main);
}

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

.login-card{
  width:420px;
  background:#12171d;
  border:1px solid #252d37;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

.login-content{
  padding:28px;
}

.login-content h1{
  margin-top:0;
  margin-bottom:14px;
  font-size:20px;
}

.login-content p,
.login-content li{
  font-size:14px;
  color:var(--text-dim);
}

.login-content ul{
  margin:8px 0 12px 18px;
}

.warn{
  font-size:12px;
  color:#caa86a;
  margin-bottom:12px;
}

.error{
  background:#3a1d1d;
  color:#ffb4b4;
  padding:8px 10px;
  border-radius:6px;
  font-size:13px;
  margin-bottom:10px;
}

.form-table{
  width:100%;
  margin-top:14px;
}

.form-table td{
  padding:6px;
}

.form-table .label{
  width:70px;
  color:var(--text-dim);
}

.form-table input[type="text"],
.form-table input[type="password"]{
  width:100%;
  background:#0b1016 !important;
  color:var(--text) !important;
  border:1px solid #2c3642 !important;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
}

.form-table input[type="text"]:focus,
.form-table input[type="password"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(30,144,255,.18);
}

.form-table input[type="text"]:-webkit-autofill,
.form-table input[type="text"]:-webkit-autofill:hover,
.form-table input[type="text"]:-webkit-autofill:focus,
.form-table input[type="password"]:-webkit-autofill,
.form-table input[type="password"]:-webkit-autofill:hover,
.form-table input[type="password"]:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:0 0 0 1000px #0b1016 inset !important;
  box-shadow:0 0 0 1000px #0b1016 inset !important;
  border:1px solid #2c3642 !important;
  caret-color:var(--text) !important;
}

.demo-cred{
  text-align:center;
  margin-top:10px;
  font-size:12px;
  color:var(--text-dim);
}

.footer{
  text-align:center;
  margin-top:14px;
  font-size:11px;
  color:var(--text-dim);
}

.whatsapp-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* g//ap:8px; */
  margin-top:8px;
  padding:8px;
  line-height:0;
  border-radius:999px;
  background:#25d366;
  color:#ffffff;
  font-weight:700;
  letter-spacing:0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.whatsapp-link:hover{
  color:#ffffff;
  background:#1ebe5b;
  box-shadow:0 8px 18px rgba(37, 211, 102, .28);
  transform:translateY(-1px);
}

.whatsapp-label{
  font-size:10px;
}

.whatsapp-icon{
  width:32px;
  height:32px;
  display:block;
}

.theme-toggle{
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
  color:var(--text-dim);
}

.theme-toggle:hover{
  color:var(--accent);
}

body.light-mode .login-card{
  background:#f7fafc;
  border:1px solid var(--border-soft);
  box-shadow:0 10px 24px rgba(53, 74, 96, .08);
}

body.light-mode .form-table input[type="text"],
body.light-mode .form-table input[type="password"]{
  background:#ffffff !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  box-shadow:none;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
}

body.light-mode .form-table input[type="text"]:-webkit-autofill,
body.light-mode .form-table input[type="text"]:-webkit-autofill:hover,
body.light-mode .form-table input[type="text"]:-webkit-autofill:focus,
body.light-mode .form-table input[type="password"]:-webkit-autofill,
body.light-mode .form-table input[type="password"]:-webkit-autofill:hover,
body.light-mode .form-table input[type="password"]:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text) !important;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
  border:1px solid var(--border) !important;
  caret-color:var(--text) !important;
}

.login-footer a{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.login-footer a:hover{
  color: var(--accent);
  text-decoration: none;
}
a{
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.4px;
}
a:hover{
  color: var(--accent);
  text-decoration: none;
}