.biomarker-page {
  --bio-ink: #0d2348;
  --bio-muted: #58677e;
  --bio-line: #dbe3ef;
  --bio-panel: #ffffff;
  color: var(--bio-ink);
}

.biomarker-page .bio-hero {
  display: block;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
  margin: .5rem 0 1.5rem;
}

.biomarker-page .bio-hero-copy {
  color: var(--bio-muted);
  font-size: 1.08rem;
  max-width: 1080px;
}

.biomarker-page .bio-hero-callout {
  background: linear-gradient(135deg, #fbf9ff, #f2f0ff);
  border: 1px solid #ddd7f5;
  border-radius: 18px;
  padding: 1.2rem 1.35rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 8px 28px rgba(30, 55, 100, .05);
}

.biomarker-page .bio-callout-icon { font-size: 2.4rem; }
.biomarker-page .bio-hero-callout strong { display:block; font-size:1.05rem; margin-bottom:.2rem; }
.biomarker-page .bio-hero-callout span { display:block; color:var(--bio-muted); }

.biomarker-page .bio-tile-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin:1rem 0 2rem;
}

.biomarker-page .bio-tile {
  --bio-accent:#2f6bd2;
  --bio-tint:#f4f8ff;
  background:linear-gradient(145deg,#fff,var(--bio-tint));
  border:1px solid color-mix(in srgb,var(--bio-accent) 18%,white);
  border-radius:16px;
  padding:1.15rem;
  min-height:215px;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 22px rgba(17,42,79,.045);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  cursor:pointer;
}

.biomarker-page .bio-tile:hover,
.biomarker-page .bio-tile:focus,
.biomarker-page .bio-tile[aria-pressed="true"] {
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(17,42,79,.09);
  border-color:color-mix(in srgb,var(--bio-accent) 42%,white);
  outline:none;
}

.biomarker-page .bio-tile-head { display:flex; align-items:flex-start; gap:.85rem; }
.biomarker-page .bio-tile-icon {
  width:54px;height:54px;flex:0 0 54px;
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--bio-accent) 13%,white);
  color:var(--bio-accent);font-size:1.65rem;
}
.biomarker-page .bio-tile h3 { font-size:1.03rem;line-height:1.25;margin:.15rem 0 .35rem;color:var(--bio-accent); }
.biomarker-page .bio-tile p { color:var(--bio-muted);font-size:.92rem;margin:.6rem 0 1rem; }
.biomarker-page .bio-tile-meta {
  margin-top:auto;padding-top:.85rem;
  border-top:1px solid color-mix(in srgb,var(--bio-accent) 17%,white);
  display:flex;justify-content:space-between;align-items:center;
  font-weight:600;color:var(--bio-accent);font-size:.88rem;
}

.biomarker-page .bio-controls {
  display:grid;
  grid-template-columns:minmax(260px,1fr) 220px auto;
  gap:.8rem;
  margin:.4rem 0 1rem;
}
.biomarker-page .bio-controls input,
.biomarker-page .bio-controls select,
.biomarker-page .bio-controls button {
  width:100%;padding:.82rem 1rem;border-radius:12px;
  border:1px solid var(--bio-line);background:#fff;color:var(--bio-ink);
}
.biomarker-page .bio-controls button { width:auto; cursor:pointer; font-weight:600; }
.biomarker-page .bio-controls input:focus,
.biomarker-page .bio-controls select:focus,
.biomarker-page .bio-controls button:focus { outline:2px solid #aac4f5;outline-offset:1px; }

.biomarker-page .bio-table-wrap {
  overflow-x:auto;border:1px solid var(--bio-line);
  border-radius:14px;background:#fff;
}
.biomarker-page #bio-biomarker-table { width:100%;border-collapse:collapse;font-size:.91rem; }
.biomarker-page #bio-biomarker-table th { text-align:left;background:#f3f6fb;color:var(--bio-ink);padding:.8rem;border-bottom:1px solid var(--bio-line); }
.biomarker-page #bio-biomarker-table td { padding:.8rem;border-bottom:1px solid #edf1f6;vertical-align:top; }
.biomarker-page #bio-biomarker-table tr:hover td { background:#fbfdff; }
.biomarker-page #bio-biomarker-table a { font-weight:600;text-decoration:none; }
.biomarker-page .bio-badge { display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#eef3fb;color:#304f7d;font-size:.78rem; }
.biomarker-page .bio-results-note { color:var(--bio-muted);font-size:.9rem;margin:.6rem 0 1rem; }

@media (max-width:1050px) { .biomarker-page .bio-tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .biomarker-page .bio-hero { grid-template-columns:1fr; }
  .biomarker-page .bio-tile-grid { grid-template-columns:1fr; }
  .biomarker-page .bio-controls { grid-template-columns:1fr; }
  .biomarker-page .bio-controls button { width:100%; }
  .biomarker-page .bio-tile { min-height:190px; }
}