@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:#0d0d12;color:#f0f0f5;-webkit-font-smoothing:antialiased}

.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}

.auth-visual{
  background:linear-gradient(135deg,#0d0d12 0%,#13131a 100%);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;padding:2.5rem;position:relative;overflow:hidden
}
.auth-visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(99,102,241,.12) 0%,transparent 60%);
}

.auth-brand{display:flex;align-items:center;gap:.625rem;position:relative;z-index:1}
.brand-icon{font-size:1.75rem}
.brand-name{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}

.auth-tagline{margin-top:auto;margin-bottom:auto;position:relative;z-index:1;padding:2rem 0}
.auth-tagline h2{font-size:1.75rem;font-weight:700;line-height:1.25;margin-bottom:.875rem;letter-spacing:-.02em}
.auth-tagline p{color:#a0a0b8;font-size:.9375rem;line-height:1.6;max-width:340px}

.auth-dots{
  position:absolute;bottom:2rem;left:2.5rem;right:2.5rem;
  height:160px;z-index:0;
  background:radial-gradient(circle at 50% 100%,rgba(99,102,241,.08) 0%,transparent 70%);
}

.auth-form-side{display:flex;align-items:center;justify-content:center;padding:2rem;background:#0d0d12}
.auth-form-inner{width:100%;max-width:400px}
.auth-form-inner h1{font-size:1.5rem;font-weight:700;margin-bottom:.25rem;letter-spacing:-.02em}
.auth-sub{color:#a0a0b8;font-size:.875rem;margin-bottom:1.5rem}

.form-group{margin-bottom:1rem}
label{display:block;font-size:.8125rem;font-weight:500;color:#a0a0b8;margin-bottom:.375rem}
.form-control{
  width:100%;background:#13131a;border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:.625rem .875rem;
  color:#f0f0f5;font-size:.9375rem;font-family:inherit;outline:none;
  transition:border-color .15s
}
.form-control:focus{border-color:#6366f1}
.form-control::placeholder{color:#62627a}

.btn-auth{
  width:100%;background:#6366f1;color:#fff;border:none;
  padding:.75rem;border-radius:8px;font-size:.9375rem;font-weight:600;
  cursor:pointer;margin-top:.25rem;transition:background .15s;font-family:inherit
}
.btn-auth:hover{background:#4f46e5}

.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#a0a0b8;cursor:pointer}
.checkbox-label input{accent-color:#6366f1;width:15px;height:15px}

.auth-links{margin-top:1.5rem;text-align:center;font-size:.8125rem;color:#62627a}
.auth-links a{color:#6366f1;text-decoration:none}
.auth-links a:hover{color:#818cf8}

.alert{padding:.75rem 1rem;border-radius:8px;font-size:.875rem;margin-bottom:1rem;line-height:1.5}
.alert-danger {background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#f87171}
.alert-success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80}

@media(max-width:768px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-form-side{min-height:100vh}
}