:root {
  --bg-page:      #2b2b2b;
  --card-bg:      #333;
  --accent:       #b73127;
  --accent-dark:  #99261f;
  --text-light:   #fff;
  --text-muted:   #ccc;
  --input-bg:     #222;
  --input-border: #444;
  --radius:       6px;
  --shadow:       0 4px 12px rgba(0,0,0,0.5);
}

body, html {
  margin: 0; padding: 0;
  background: var(--bg-page);
  color: var(--text-light);
  font-family: sans-serif;
  height: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 400px;
  padding: 2rem;
}
.card h2 {
  margin-top: 0;
  color: var(--accent);
  text-align: center;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
}
.form-group input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--text-light);
  font-size: 1rem;
}
.form-group input:focus {
  outline: none;
  border-color: var(--accent);
}
button {
  width: 100%;
  padding: 0.7rem;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
button:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.flash {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.flash.error   { background: #a12e24; }
.flash.success { background: #2a7f2a; }
.flash.info    { background: #2a4d7f; }