:root {
  --red: #e00000;
  --gold: #caa64a;
  --ink: #111;
  --muted: #777;
  --bg: #faf7f7;
  --bd: #eee;
}

body {
  font-family: system-ui, Segoe UI, Roboto, Arial;
  background: var(--bg);
  margin: 0;
}

.card {
  max-width: 720px;
  margin: 64px auto;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}

.goldbar {
  height: 4px;
  background: linear-gradient(90deg,#b88a2c,#e5c873,#b88a2c);
}
.wrap { padding: 26px; }
h1 { margin: 6px 0 12px; color: var(--ink); }
label { font-weight: 600; display: block; margin-top: 10px; }
input {
  width: 100%; padding: 12px 14px; margin: 8px 0 14px;
  border: 1px solid #ddd; border-radius: 10px;
}
.btn {
  display: inline-block; padding: 12px 14px;
  border-radius: 12px; border: 1px solid #ddd;
  background: #fff; cursor: pointer; text-decoration: none;
}
.btn-primary {
  background: var(--red); border-color: var(--red);
  color: #fff; font-weight: 700; width: 100%;
}
.links {
  margin-top: 10px; text-align: center;
}
.links a { color: var(--red); text-decoration: none; }
.links a:hover { text-decoration: underline; }

.alert {
  background: #fff3f2;
  border: 1px solid #ffd3cf;
  color: #7d1007;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 14px;
}

.tag {
  display: inline-block;
  background: rgba(202,166,74,.12);
  color: #6b520f;
  border: 1px solid rgba(202,166,74,.35);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

/* Role tabs */
.role-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 20px;
}
.role-btn {
  background: #fff;
  border: 1px solid #d6c199;
  color: #790a0a;
  padding: 8px 18px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}
.role-btn.active,
.role-btn:hover {
  background: #790a0a;
  color: #fff;
  transform: scale(1.05);
}