body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  /* Blobs radiaux DKup-style : sauge/mint/teal/jade qui flottent en arrière-plan, version vibrante */
  background-image:
    radial-gradient(ellipse 700px 550px at 10% 15%, rgba(110, 231, 183, 0.22), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 10%, rgba(13, 148, 136, 0.22), transparent 60%),
    radial-gradient(ellipse 600px 450px at 50% 95%, rgba(52, 211, 153, 0.18), transparent 60%),
    radial-gradient(ellipse 500px 400px at 95% 65%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(ellipse 450px 350px at 5% 80%, rgba(167, 243, 208, 0.10), transparent 60%);
  background-attachment: fixed;
}

/* === Login screen === */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-2xl) var(--sp-xl);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  text-align: center;
}

.login-logo {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--sp-lg);
  display: block;
  filter: drop-shadow(0 8px 24px var(--accent-glow));
}

.login-card h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-xs);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-card .tagline {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: var(--sp-xl);
  font-weight: 400;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.login-card input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 15px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card-solid);
}

.btn-primary {
  width: 100%;
  padding: 12px 16px;
  background: var(--accent-gradient);
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: translateY(1px); }

.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
  margin-top: var(--sp-xs);
}