:root {
  --ke-black: #000000;
  --ke-red: #bb0000;
  --ke-green: #006600;
  --ke-white: #ffffff;
  --up-surface: #f7f7f5;
  --up-text-muted: #6c6c6c;
}

body {
  background-color: var(--up-surface);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.up-navbar {
  background: linear-gradient(135deg, var(--ke-black) 0%, var(--ke-red) 100%);
  border-bottom: 4px solid var(--ke-green);
}

.up-disclaimer {
  background-color: #fff3cd;
  color: #664d03;
  border-bottom: 1px solid #ffe69c;
}

.up-footer {
  background-color: var(--ke-black);
  color: var(--up-white, #eee);
}
.up-footer p { color: #ddd; }

.card-candidate {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.card-candidate:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.card-candidate img.candidate-photo {
  height: 220px;
  object-fit: cover;
  background-color: #eee;
}

.badge-party {
  background-color: var(--ke-green);
  color: #fff;
}

.btn-ke-primary {
  background-color: var(--ke-red);
  border-color: var(--ke-red);
  color: #fff;
}
.btn-ke-primary:hover {
  background-color: #950000;
  border-color: #950000;
  color: #fff;
}

.results-banner {
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #58151c;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.position-tile {
  border-radius: 0.75rem;
  border: 1px solid #e5e5e5;
  background: #fff;
  padding: 1.25rem;
  height: 100%;
  transition: box-shadow 0.15s ease;
}
.position-tile:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

@media (max-width: 576px) {
  .card-candidate img.candidate-photo { height: 160px; }
}