:root {
  --kes-navy: #1b3a4b;
  --kes-teal: #0f6e56;
  --kes-sand: #f3efe6;
  --kes-ink: #1a2421;
  --kes-accent: #c45c26;
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(15, 110, 86, 0.08), transparent 40%),
    linear-gradient(180deg, var(--kes-sand), #f8f6f1 45%, #eef3f1);
  color: var(--kes-ink);
  min-height: 100vh;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

.bg-kes {
  background: linear-gradient(90deg, var(--kes-navy), #234e61 55%, var(--kes-teal));
}

.page-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kes-navy);
}

.card-kes {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(27, 58, 75, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.badge-status {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.table thead th {
  white-space: nowrap;
  font-size: 0.85rem;
  color: #445;
}

.constraint-min {
  outline: 2px solid var(--kes-accent);
  background: rgba(196, 92, 38, 0.08);
}

.quality-bar {
  height: 0.75rem;
  border-radius: 999px;
  background: #dde5e2;
  overflow: hidden;
}

.quality-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b45309, var(--kes-teal));
}

.login-shell {
  max-width: 560px;
  margin: 4rem auto;
}

.nav-tabs .nav-link.active {
  color: var(--kes-teal);
  font-weight: 600;
}

.demand-clickable tbody tr.demand-row {
  cursor: pointer;
}

.demand-clickable tbody tr.demand-row:hover {
  background: rgba(15, 110, 86, 0.08);
}

.demand-link {
  color: var(--kes-teal);
  font-weight: 600;
  text-decoration: none;
}

.demand-link:hover {
  text-decoration: underline;
}