body {
  background:
    radial-gradient(circle at top, rgba(13, 110, 253, 0.14), transparent 32%),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
  color: #16324f;
  min-height: 100vh;
}

.hero-card,
.example-panel {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(13, 110, 253, 0.08);
  border-radius: 1rem;
  padding: 1.5rem;
}

.checker-card,
.card {
  border-radius: 1rem;
}

.eyebrow {
  color: #0d6efd;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.strength-chip {
  background: #e9f2ff;
  border-radius: 999px;
  display: inline-block;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
}

.score-0 {
  background: #fde7e9;
  color: #842029;
}

.score-1 {
  background: #fff1d6;
  color: #8a5b00;
}

.score-2 {
  background: #fff9db;
  color: #7a6500;
}

.score-3 {
  background: #e1f3e8;
  color: #146c43;
}

.score-4 {
  background: #d9ecff;
  color: #084298;
}

.example-value {
  font-family: "Courier New", monospace;
  font-size: 1rem;
  word-break: break-word;
}

#feedback-list li + li {
  margin-top: 0.5rem;
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-card,
  .example-panel,
  .card-body {
    padding: 1.25rem;
  }

  .input-group-lg > .form-control,
  .input-group-lg > .btn {
    font-size: 1rem;
    min-height: 3.25rem;
  }
}