:root {
  --login-bg: #09090f;
  --login-card: #1a1a24;
  --login-border: #26263a;
  --login-text: #f0f0fa;
  --login-text2: #9898b8;
  --login-text3: #77779a;
  --login-input-bg: #16161f;
  --login-placeholder: #44445a;
  --login-icon: #55556a;
  --login-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.08);
  --login-glow-1: rgba(139,92,246,.12);
  --login-glow-2: rgba(236,72,153,.1);
  --login-glow-3: rgba(139,92,246,.08);
  --login-error-bg: rgba(248,113,113,.08);
  --login-error-border: rgba(248,113,113,.2);
  --login-error-text: #f87171;
}

html[data-theme="light"] {
  --login-bg: #F4F0FB;
  --login-card: rgba(255,255,255,.96);
  --login-border: rgba(124,58,237,.18);
  --login-text: #1B1426;
  --login-text2: #43394F;
  --login-text3: #6E6685;
  --login-input-bg: rgba(124,58,237,.04);
  --login-placeholder: #9CA3AF;
  --login-icon: #8B8499;
  --login-shadow: 0 24px 64px rgba(124,58,237,.12), 0 0 0 1px rgba(124,58,237,.08);
  --login-glow-1: rgba(168,85,247,.14);
  --login-glow-2: rgba(244,114,182,.12);
  --login-glow-3: rgba(124,58,237,.08);
  --login-error-bg: rgba(239,68,68,.08);
  --login-error-border: rgba(239,68,68,.22);
  --login-error-text: #DC2626;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  background:var(--login-bg);
  color:var(--login-text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
  padding:30px 16px;
  transition:background .2s, color .2s;
}

.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
.glow-1{width:500px;height:500px;background:var(--login-glow-1);top:-150px;right:-100px;}
.glow-2{width:350px;height:350px;background:var(--login-glow-2);bottom:-80px;left:-80px;}
.glow-3{width:200px;height:200px;background:var(--login-glow-3);bottom:30%;right:15%;}

.login-wrap{
  width:100%;max-width:430px;z-index:1;
  background:var(--login-card);
  border:1px solid var(--login-border);
  border-radius:24px;
  padding:34px 32px 28px;
  box-shadow:var(--login-shadow);
  backdrop-filter:blur(2px);
  transition:background .2s, border-color .2s, box-shadow .2s;
}

.logo-area{text-align:center;margin-bottom:28px;}
.logo-badge{
  width:62px;height:62px;border-radius:18px;margin:0 auto 14px;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;color:#fff;letter-spacing:.5px;
  box-shadow:0 8px 28px rgba(139,92,246,.42);
}
.logo-area h1{font-size:24px;font-weight:800;color:var(--login-text);margin-bottom:7px;letter-spacing:-.3px;}
.logo-area p{font-size:13px;color:var(--login-text3);line-height:1.5;}

.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--login-text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.6px;}
.input-wrap{position:relative;}
.input-wrap .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--login-icon);font-size:14px;}
.form-input{
  width:100%;padding:13px 14px 13px 40px;border-radius:12px;
  background:var(--login-input-bg);border:1px solid var(--login-border);
  color:var(--login-text);font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.form-input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12);}
.form-input::placeholder{color:var(--login-placeholder);}

.remember{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--login-text2);
  margin:2px 0 22px;
  cursor:pointer;
}
.remember input{accent-color:#8b5cf6;width:15px;height:15px;cursor:pointer;}

.btn-signin{
  width:100%;padding:14px 16px;border-radius:12px;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);
  border:none;color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;letter-spacing:.2px;
  box-shadow:0 6px 22px rgba(139,92,246,.4);
  transition:all .15s; display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;
}
.btn-signin:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 8px 28px rgba(139,92,246,.5);}

.error-box{
  background:var(--login-error-bg);border:1px solid var(--login-error-border);
  color:var(--login-error-text);border-radius:10px;padding:11px 14px;
  font-size:12px;margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}

@media (max-width:480px){
  .login-wrap{
    border-radius:20px;
    padding:28px 20px 22px;
  }
  .logo-area{
    margin-bottom:24px;
  }
  .logo-area h1{
    font-size:21px;
  }
}