:root {
  --hijau-tua: #2f6d3c;
  --hijau: #3f8e4f;
  --hijau-muda: #eaf6ec;
  --oranye: #e07a1f;
}

body {
  background-color: #f4f7f4;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.app-navbar {
  background: linear-gradient(90deg, var(--hijau-tua), var(--hijau));
}

.navbar .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid #fff;
}

.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.card-header {
  background-color: var(--hijau-muda);
  border-bottom: 1px solid #dfeee1;
  border-radius: 12px 12px 0 0 !important;
  font-weight: 600;
  color: var(--hijau-tua);
}

.stat-card {
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem 1.5rem;
}
.stat-card .stat-icon { font-size: 2rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }

.bg-grad-hijau { background: linear-gradient(135deg, #3f8e4f, #2f6d3c); }
.bg-grad-oranye { background: linear-gradient(135deg, #f0973b, #d9691a); }
.bg-grad-biru { background: linear-gradient(135deg, #3d8bd4, #1e5f9c); }
.bg-grad-ungu { background: linear-gradient(135deg, #9159c9, #6a3aa0); }

.btn-hijau {
  background-color: var(--hijau);
  border-color: var(--hijau);
  color: #fff;
}
.btn-hijau:hover { background-color: var(--hijau-tua); color: #fff; }

.table thead th {
  background-color: var(--hijau-muda);
  color: var(--hijau-tua);
  white-space: nowrap;
}

.badge-rank-1 { background-color: #ffd700; color: #5c4a00; }
.badge-rank-2 { background-color: #c0c0c0; color: #3a3a3a; }
.badge-rank-3 { background-color: #cd7f32; color: #fff; }

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f6d3c, #6fbf73);
}

.login-card {
  max-width: 400px;
  width: 100%;
  border-radius: 16px;
}