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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  background: #f9fafb;
}

/* ─── Layout ─────────────────────────────────── */
.login-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Brand Panel ────────────────────────────── */
.brand-panel {
  width: 44%;
  background: linear-gradient(150deg, #06070f 0%, #0f0f23 30%, #130d2e 60%, #1a0a3d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 3rem;
}

/* Dot grid texture */
.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(99,102,241,.15) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Glow orbs */
.brand-decoration .circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.c1 {
  width: 560px; height: 560px;
  top: -140px; right: -140px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 68%);
  animation: pulse 8s ease-in-out infinite alternate;
}
.c2 {
  width: 400px; height: 400px;
  bottom: -100px; left: -100px;
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, transparent 68%);
  animation: pulse 11s ease-in-out infinite alternate-reverse;
}
.c3 {
  width: 240px; height: 240px;
  top: 55%; left: 42%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 70%);
}

@keyframes pulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.08); opacity: 1; }
}

.brand-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  animation: fadeUp .7s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo container */
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.14));
  border: 1px solid rgba(99,102,241,.4);
  border-radius: 24px;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset,
              0 20px 40px rgba(99,102,241,.2);
}

.brand-name {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: #fff;
  margin-bottom: .5rem;
  text-shadow: 0 0 60px rgba(99,102,241,.5);
}

.brand-tagline {
  font-size: .9375rem;
  color: rgba(255,255,255,.4);
  font-weight: 300;
  margin-bottom: 2.75rem;
  letter-spacing: .02em;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  text-align: left;
}

.feature {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  letter-spacing: .01em;
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, rgba(99,102,241,.35), rgba(139,92,246,.25));
  border: 1px solid rgba(99,102,241,.45);
  border-radius: 50%;
  font-size: .65rem;
  color: #a5b4fc;
  flex-shrink: 0;
}

/* ─── Form Panel ─────────────────────────────── */
.form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: #fff;
}

.form-container {
  width: 100%;
  max-width: 400px;
  animation: fadeUp .55s .1s ease both;
}

.form-header {
  margin-bottom: 2.25rem;
}

.form-header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .375rem;
  letter-spacing: -.02em;
}

.form-header p {
  font-size: .9375rem;
  color: #64748b;
}

/* ─── Alert ──────────────────────────────────── */
.alert-error {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: .625rem;
  border-left: 3px solid #dc2626;
  color: #dc2626;
  font-size: .875rem;
  margin-bottom: 1.5rem;
  animation: shake .3s ease;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ─── Form ───────────────────────────────────── */
.form-group {
  margin-bottom: 1.375rem;
}

.form-group label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: .5rem;
  letter-spacing: .01em;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  display: flex;
  transition: color .2s;
}

.input-wrapper:focus-within .input-icon { color: #6366f1; }

.input-wrapper input {
  width: 100%;
  padding: .825rem 1rem .825rem 2.8rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .625rem;
  font-size: .9375rem;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
}

.input-wrapper input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,.1);
  background: #fafbff;
}

.input-wrapper input::placeholder { color: #cbd5e1; }

.toggle-password {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  padding: 0;
  transition: color .2s;
}
.toggle-password:hover { color: #6366f1; }

/* ─── Submit ──────────────────────────────────── */
.btn-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: .625rem;
  font-size: .9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s;
  margin-top: .5rem;
  box-shadow: 0 4px 16px rgba(99,102,241,.4), 0 1px 3px rgba(99,102,241,.3);
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
}

.btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
  pointer-events: none;
}

.btn-submit:hover {
  box-shadow: 0 8px 24px rgba(99,102,241,.5), 0 2px 6px rgba(99,102,241,.35);
  transform: translateY(-1px);
}

.btn-submit:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(99,102,241,.4);
}

/* ─── Footer ──────────────────────────────────── */
.form-footer {
  margin-top: 1.875rem;
  text-align: center;
  font-size: .8125rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.form-footer::before,
.form-footer::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #f1f5f9;
}

/* ─── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
  .brand-panel { width: 38%; padding: 2rem; }
}

@media (max-width: 768px) {
  .login-layout  { flex-direction: column; }
  .brand-panel   { width: 100%; min-height: 220px; padding: 2rem; }
  .brand-features { display: none; }
  .brand-name    { font-size: 2.25rem; }
}