:root {
  --bg:           #fff;
  --fg:           #212529;
  --panel-bg:     #f8f9fa;
  --accent:       #0d6efd;
  --transition:   0.3s ease;
}

body {
  margin:                 0;
  height:                 100vh;
  display:                flex;
  align-items:            center;
  justify-content:        center;
  background:             var(--bg);
  color:                  var(--fg);
  transition:             background var(--transition),
                          color var(--transition);
}

.dark-mode {
  --bg:           #212529;
  --fg:           #e9ecef;
  --panel-bg:     #343a40;
}

.login-card {
  position:               relative;
  background:             var(--panel-bg);
  border-radius:          0.5rem;
  box-shadow:             0 4px 15px rgba(0, 0, 0, 0.1);
  padding:                2rem;
  width:                  100%;
  max-width:              400px;
  transition:             background var(--transition),
                          color var(--transition);
}

.login-card h2 {
  margin-bottom:          1.5rem;
  font-weight:            500;
}

.theme-toggle {
  position:               absolute;
  top:                    1rem;
  right:                  1rem;
  background:             transparent;
  border:                 none;
  font-size:              1.25rem;
  cursor:                 pointer;
  color:                  var(--fg);
  transition:             color var(--transition);
}

.theme-toggle:hover {
  color: var(--accent);
}

.btn-primary {
  --bs-btn-bg:            var(--accent);
  --bs-btn-hover-bg:      darken(var(--accent), 10%);
  --bs-btn-border-color:  var(--accent);
}

/* ── Dark-mode form controls ───────────────────────────── */
.dark-mode .form-control {
  background-color:       var(--panel-bg) !important;
  color:                  var(--fg)       !important;
  border-color:           var(--fg)       !important;
  transition:             background-color var(--transition),
                          color var(--transition),
                          border-color var(--transition);
}

.dark-mode .form-control::placeholder {
  color:                  #adb5bd !important;
}