:root {
  --fond: #0F1115;
  --surface: #1A1D24;
  --texte: #F2F2F2;
  --muted: #9AA0AA;
  --accent: #3B82F6;
  --vert: #1DB954;
  --orange: #F5A623;
  --rouge: #E02424;
  --noir: #1A1A1A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid #262A33;
  position: sticky;
  top: 0;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.logout button {
  background: transparent;
  color: var(--muted);
  border: 1px solid #333844;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.card {
  background: var(--surface);
  border: 1px solid #262A33;
  border-radius: 14px;
  padding: 22px 20px;
}

h1 { font-size: 22px; margin: 0 0 16px; }
.muted { color: var(--muted); line-height: 1.5; }
.erreur {
  background: rgba(224,36,36,.12);
  border: 1px solid var(--rouge);
  color: #FCA5A5;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}

form label {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
}
form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  font-size: 17px;                 /* >=16px : évite le zoom auto iOS */
  background: #0D0F13;
  color: var(--texte);
  border: 1px solid #333844;
  border-radius: 10px;
}
form input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.btn {
  width: 100%;
  padding: 15px;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 10px;
}
.btn:active { filter: brightness(.92); }

.badges { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.badge {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.badge.vert { background: var(--vert); }
.badge.orange { background: var(--orange); color: #1a1a1a; }
.badge.rouge { background: var(--rouge); }
.badge.noir { background: var(--noir); border: 1px solid #333; }