:root{
  --blue:#3b82f6;--blue-12:rgba(59,130,246,.12);
  --amber:#f59e0b;--amber-12:rgba(245,158,11,.12);
  --red:#ef4444;
  --green:#10b981;
  
  --bg-1:#0b0f19;--bg-2:#111827;--bg-3:#1f2937;--bg-4:#374151;
  --border:#374151;--border-2:#4b5563;
  --text-1:#f9fafb;--text-2:#d1d5db;--text-3:#9ca3af;
  --shadow:0 10px 40px rgba(0,0,0,.4);
  --radius:12px;--radius-sm:8px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Tajawal',sans-serif;
}

body{
  min-height:100vh;
  background:linear-gradient(135deg, #0b0f19 0%, #111827 50%, #1f2937 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.login-wrapper{
  width:100%;
  max-width:420px;
}

.login-card{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
  position:relative;
}

.login-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--blue), #8b5cf6, var(--blue));
  background-size:200% 100%;
  animation:gradientMove 3s ease infinite;
}

@keyframes gradientMove{
  0%, 100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.login-header{
        justify-self: center;
  padding:40px 36px 0;
}

.login-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.brand-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--blue), #1d4ed8);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  color:#fff;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}

.brand-text h1{
  font-size:20px;
  font-weight:800;
  color:var(--text-1);
  margin:0;
}

.brand-text p{
  font-size:13px;
  color:var(--text-3);
  margin:0;
}

/* Theme Toggle - Single Button */
.theme-toggle-single{
  position:fixed;
  top:20px;
  left:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text-1);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
  font-size:18px;
  box-shadow:var(--shadow);
  z-index:100;
}

.theme-toggle-single:hover{
  transform:scale(1.1);
  border-color:var(--border-2);
}

/* Light theme - icon changes to moon */
body[data-theme="light"] .theme-toggle-single i{
  color:var(--amber);
}

body[data-theme="dark"] .theme-toggle-single i{
  color:var(--amber);
}

/* Logo Image */
.brand-logo{flex:1;overflow:hidden}
.brand-logo .logo-img{max-height:80px;width:auto;max-width:100%;display:block}

/* Light Theme - applies to entire page */
body[data-theme="light"] {
  --bg-1:#f8fafc;--bg-2:#ffffff;--bg-3:#f1f5f9;--bg-4:#e2e8f0;
  --border:#e2e8f0;--border-2:#cbd5e1;
  --text-1:#0f172a;--text-2:#475569;--text-3:#94a3b8;
  --shadow:0 10px 40px rgba(0,0,0,.1);
  background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
}

/* Auto theme follows system preference */
@media (prefers-color-scheme: light) {
  body[data-theme="auto"] {
    --bg-1:#f8fafc;--bg-2:#ffffff;--bg-3:#f1f5f9;--bg-4:#e2e8f0;
    --border:#e2e8f0;--border-2:#cbd5e1;
    --text-1:#0f172a;--text-2:#475569;--text-3:#94a3b8;
    --shadow:0 10px 40px rgba(0,0,0,.1);
  }
}

.login-title{
  font-size:26px;
  font-weight:800;
  color:var(--text-1);
  margin-bottom:8px;
  text-align:center;
  letter-spacing:-0.5px;
}

.login-subtitle{
  font-size:15px;
  color:var(--text-2);
  margin-bottom:20px;
  text-align:center;
  font-weight:500;
}

.login-body{
  padding:10px 36px 10px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.form-label{
  font-size:14px;
  font-weight:700;
  color:var(--text-2);
  display:flex;
  align-items:center;
  gap:6px;
}

.form-label::before{
  content:'';
  width:4px;
  height:16px;
  background:var(--blue);
  border-radius:2px;
}

.input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}

.input-icon{
  position:absolute;
  right:16px;
  color:var(--text-3);
  font-size:18px;
  z-index:2;
  transition:color .2s ease;
}

.form-input:focus + .input-icon,
.input-wrap:focus-within .input-icon{
  color:var(--blue);
}

.form-input{
  width:100%;
  padding:16px 48px 16px 16px;
  background:var(--bg-3);
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:15px;
  color:var(--text-1);
  transition:all .2s ease;
}

.form-input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-12), 0 4px 12px rgba(59,130,246,.15);
  background:var(--bg-2);
}

.form-input::placeholder{
  color:var(--text-3);
  font-weight:500;
}

.toggle-password{
  position:absolute;
  left:16px;
  background:none;
  border:none;
  color:var(--text-3);
  font-size:18px;
  cursor:pointer;
  transition:all .2s ease;
  padding:8px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}

.toggle-password:hover{
  color:var(--text-1);
  background:var(--bg-4);
}

.form-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  margin-top:8px;
  padding:4px 0;
}

.remember-me{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  color:var(--text-2);
  font-weight:500;
  transition:color .2s ease;
}

.remember-me:hover{
  color:var(--text-1);
}

.remember-me input{
  display:none;
}

.checkmark{
  width:22px;
  height:22px;
  border:2px solid var(--border-2);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
  background:var(--bg-3);
}

.remember-me input:checked + .checkmark{
  background:var(--blue);
  border-color:var(--blue);
}

.remember-me input:checked + .checkmark::after{
  content:'\f00c';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:12px;
  color:#fff;
}

.forgot-password{
  color:var(--blue);
  text-decoration:none;
  font-weight:700;
  transition:all .2s ease;
  position:relative;
}

.forgot-password::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:var(--blue);
  transition:width .2s ease;
}

.forgot-password:hover{
  opacity:1;
}

.forgot-password:hover::after{
  width:100%;
}

.login-btn{
  width:100%;
  padding:16px 24px;
  background:linear-gradient(135deg, var(--blue), #1d4ed8);
  border:none;
  border-radius:var(--radius-sm);
  font-size:16px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  transition:all .3s ease;
  box-shadow:0 4px 15px rgba(59,130,246,.4);
  margin-top:12px;
  position:relative;
  overflow:hidden;
}

.login-btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:left .5s ease;
}

.login-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 25px rgba(59,130,246,.5);
}

.login-btn:hover::before{
  left:100%;
}

.login-btn:active{
  transform:translateY(-1px);
}

.btn-icon{
  font-size:18px;
}

.login-footer{
  padding:20px 32px;
  background:var(--bg-3);
  border-top:1px solid var(--border);
  text-align:center;
}

.login-footer p{
  font-size:12px;
  color:var(--text-3);
  margin:0;
}

/* Toast notification */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  z-index:9999;
  animation:toastIn .3s ease;
  min-width:280px;
  justify-content:center;
}

.toast.hide{
  animation:toastOut .3s ease forwards;
}

@keyframes toastIn{
  from{opacity:0;transform:translateX(-50%) translateY(20px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}

@keyframes toastOut{
  to{opacity:0;transform:translateX(-50%) translateY(20px);}
}

.toast.success{
  border-color:var(--green);
  background:rgba(16,185,129,.1);
}

.toast.error{
  border-color:var(--red);
  background:rgba(239,68,68,.1);
}

.toast-icon{
  font-size:18px;
}

.toast.success .toast-icon{color:var(--green);}
.toast.error .toast-icon{color:var(--red);}

.toast-text{
  font-size:14px;
  font-weight:600;
  color:var(--text-1);
}

/* Responsive */
@media(max-width:480px){
  body{
    padding:16px;
  }
  
  .login-wrapper{
    max-width:100%;
  }
  
  .login-card{
    border-radius:16px;
  }
  
  .login-header{
    padding:28px 24px 0;
  }
  
  .login-body{
    padding:32px 24px 28px;
  }
  
  .login-footer{
    padding:16px 24px;
  }
  
  .brand-icon{
    width:52px;
    height:52px;
    font-size:22px;
  }
  
  .brand-logo .logo-img{
    max-height:40px;
  }
  
  .login-title{
    font-size:22px;
  }
  
  .login-subtitle{
    font-size:14px;
    margin-bottom:15px;
  }
  
  .login-form{
    gap:20px;
  }
  
  .form-input{
    padding:14px 44px 14px 14px;
    font-size:16px;
  }
  
  .form-label{
    font-size:13px;
  }
  
  .login-btn{
    padding:14px 20px;
    font-size:15px;
  }
  
  .theme-toggle-single{
    top:12px;
    left:12px;
    width:40px;
    height:40px;
    font-size:16px;
  }
}

@media(max-width:360px){
  .login-header{
    padding:24px 20px 0;
  }
  
  .login-body{
    padding:28px 20px 24px;
  }
  
  .login-brand{
    gap:12px;
  }
  
  .brand-icon{
    width:44px;
    height:44px;
    font-size:18px;
  }
  
  .login-title{
    font-size:20px;
  }
  
  .form-options{
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
  }
}