*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* ── Themes ──────────────────────────────────────────── */

.theme-blue {
  --bg-from: #e8eaf6;
  --bg-mid:  #dce3f8;
  --bg-to:   #f0f4ff;
  --blob-top:    rgba(63, 81, 181, 0.22);
  --blob-bottom: rgba(25, 118, 210, 0.20);
  --eyebrow:     #3949ab;
  --heading:     #1a237e;
  --body-text:   #37474f;
  --card-border: rgba(63, 81, 181, 0.10);
  --card-shadow: rgba(30, 48, 130, 0.14);
  --input-focus: #3949ab;
  --btn-from:    #3949ab;
  --btn-to:      #1a237e;
  --btn-shadow:  rgba(26, 35, 126, 0.24);
  --btn-shadow-h:rgba(26, 35, 126, 0.32);
}

.theme-green {
  --bg-from: #f3ede4;
  --bg-mid:  #e8dfd1;
  --bg-to:   #f9f7f2;
  --blob-top:    rgba(245, 166, 35, 0.25);
  --blob-bottom: rgba(0, 117, 104, 0.25);
  --eyebrow:     #007568;
  --heading:     #1a3c36;
  --body-text:   #5d5246;
  --card-border: rgba(51, 41, 32, 0.08);
  --card-shadow: rgba(67, 47, 22, 0.16);
  --input-focus: #007568;
  --btn-from:    #007568;
  --btn-to:      #0f4e47;
  --btn-shadow:  rgba(15, 78, 71, 0.22);
  --btn-shadow-h:rgba(15, 78, 71, 0.30);
}

.theme-default {
  --bg-from: #f0eef6;
  --bg-mid:  #ebe5f5;
  --bg-to:   #f5f0ff;
  --blob-top:    rgba(102, 126, 234, 0.22);
  --blob-bottom: rgba(118, 75, 162, 0.20);
  --eyebrow:     #6b4f9e;
  --heading:     #2d1b5e;
  --body-text:   #4a3f57;
  --card-border: rgba(102, 78, 162, 0.10);
  --card-shadow: rgba(80, 50, 120, 0.14);
  --input-focus: #6b4f9e;
  --btn-from:    #6b4f9e;
  --btn-to:      #4a2d8a;
  --btn-shadow:  rgba(74, 45, 138, 0.22);
  --btn-shadow-h:rgba(74, 45, 138, 0.30);
}

/* ── Shell ───────────────────────────────────────────── */

.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at top right,    var(--blob-top),    transparent 32%),
    radial-gradient(circle at bottom left,  var(--blob-bottom), transparent 36%),
    linear-gradient(160deg, var(--bg-from) 0%, var(--bg-mid) 52%, var(--bg-to) 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.38;
  pointer-events: none;
}
.blob--top    { top: -6rem;    right: -4rem; width: 28rem; height: 28rem;
                background: radial-gradient(circle, var(--eyebrow), transparent); }
.blob--bottom { bottom: -5rem; left: -5rem;  width: 24rem; height: 24rem;
                background: radial-gradient(circle, var(--input-focus), transparent); }

/* ── Card ────────────────────────────────────────────── */

.login-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 28rem);
  padding: 3rem;
  border-radius: 2rem;
  background: rgba(255, 252, 248, 0.88);
  border: 1px solid var(--card-border);
  box-shadow: 0 2.5rem 5rem var(--card-shadow);
  backdrop-filter: blur(16px);
}

/* ── Typography ──────────────────────────────────────── */

.eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--eyebrow);
}

h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--heading);
}

/* ── Form ────────────────────────────────────────────── */

form { margin-top: 1.75rem; }

.form-group { margin-bottom: 1rem; }

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--body-text);
}

.form-group input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 140ms ease;
  outline: none;
}
.form-group input:focus { border-color: var(--input-focus); }

/* ── Error ───────────────────────────────────────────── */

.error-msg {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: rgba(211, 47, 47, 0.10);
  color: #c62828;
  font-size: 0.875rem;
}

/* ── Button ──────────────────────────────────────────── */

.primary-action {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 1rem 2rem var(--btn-shadow);
}
.primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 1.3rem 2.4rem var(--btn-shadow-h);
}