/* ----------------- Base ----------------- */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  color: #0f2433;

  /* Soft medical gradient */
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 122, 204, 0.20), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(0, 180, 255, 0.15), transparent 50%),
    linear-gradient(135deg, #eef6ff 0%, #ffffff 60%, #f7fbff 100%);
  overflow-x: hidden;
}

/* ----------------- Clean grid lines ----------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* simple light grid */
  background-image:
    linear-gradient(to right, rgba(0, 122, 204, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 122, 204, 0.08) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px;
  opacity: 0.5;
}

/* ----------------- Subtle ECG line (clean) ----------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 60px,
      rgba(0, 122, 204, 0.25) 61px,
      rgba(0, 122, 204, 0.25) 63px,
      transparent 64px,
      transparent 120px
    );
  opacity: 0.2;
}

/* ----------------- Container ----------------- */
.container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

/* ----------------- Header ----------------- */
h1 {
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #0b2a3a;
}

/* ----------------- Controls ----------------- */
.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

select, button {
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid #bcd6ee;
  background: #ffffff;
}

button {
  cursor: pointer;
  background: #0b63b8;
  color: #fff;
  border: none;
  transition: 0.3s;
}

button:hover {
  background: #084f8e;
}

/* ----------------- Cards ----------------- */
.card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  padding: 18px;
  margin: 12px 0;
  border-left: 6px solid #0b63b8;
}

ul {
  padding-left: 20px;
  margin: 10px 0;
}

li {
  margin: 6px 0;
}

/* ----------------- Disease name ----------------- */
#name {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin: 10px 0 20px;
  color: #0b2a3a;
}