@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --accent: #6366f1;
  --accent-light: #818cf8;
  --accent-glow: rgba(99,102,241,0.3);
  --cyan: #06b6d4;
  --pink: #ec4899;
  --green: #10b981;
  --red: #ef4444;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background */
.bg-animation { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bg-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15; animation:orbFloat 20s ease-in-out infinite; }
.bg-orb:nth-child(1) { width:600px; height:600px; background:var(--accent); top:-200px; left:-100px; }
.bg-orb:nth-child(2) { width:500px; height:500px; background:var(--cyan); top:50%; right:-150px; animation-delay:-7s; }
.bg-orb:nth-child(3) { width:400px; height:400px; background:var(--pink); bottom:-100px; left:40%; animation-delay:-14s; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(50px,-80px) scale(1.1); }
  66% { transform:translate(-30px,60px) scale(0.9); }
}

#particleCanvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.4; }

/* Login Card */
.login-container { position:relative; z-index:10; width:100%; max-width:440px; padding:20px; }

.login-card {
  background: rgba(17,24,39,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
  animation: cardEntry 0.6s cubic-bezier(0.4,0,0.2,1);
}

@keyframes cardEntry {
  from { opacity:0; transform:translateY(30px) scale(0.95); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.login-header { text-align:center; margin-bottom:32px; }
.login-logo {
  width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, var(--accent), var(--cyan));
  display:inline-flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:#fff;
  box-shadow: 0 8px 30px var(--accent-glow);
  margin-bottom:16px;
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow:0 8px 30px var(--accent-glow); transform:scale(1); }
  50% { box-shadow:0 8px 40px rgba(6,182,212,0.4); transform:scale(1.05); }
}

.login-header h1 { font-size:28px; font-weight:800; }
.login-header h1 span { color:var(--accent-light); }
.login-header p { font-size:13px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:2px; }

/* Alert */
.alert {
  padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:20px;
  font-size:13px; display:flex; align-items:center; gap:10px;
}
.alert-error { background:rgba(239,68,68,0.12); color:var(--red); border:1px solid rgba(239,68,68,0.2); }
.alert-success { background:rgba(16,185,129,0.12); color:var(--green); border:1px solid rgba(16,185,129,0.2); }

/* Form */
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-size:12px; font-weight:600; color:var(--text-secondary);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:1px;
}
.form-label i { margin-right:4px; color:var(--accent-light); }
.form-input {
  width:100%; padding:14px 16px; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text-primary); font-size:14px; font-family:inherit;
  transition:var(--transition); outline:none;
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 20px var(--accent-glow); }
.form-input::placeholder { color:var(--text-muted); }

.password-wrapper { position:relative; }
.password-wrapper .form-input { padding-right:48px; }
.toggle-password {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:16px; padding:4px; transition:var(--transition);
}
.toggle-password:hover { color:var(--accent-light); }

.form-options { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.remember-me { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.remember-me input { accent-color:var(--accent); width:16px; height:16px; }

.btn-login {
  width:100%; padding:14px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--accent),#4f46e5);
  color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  font-family:inherit; transition:var(--transition);
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 4px 20px var(--accent-glow);
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.btn-login:active { transform:translateY(0); }

.login-footer { text-align:center; margin-top:24px; }
.login-footer p { font-size:11px; color:var(--text-muted); }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:10px; }