body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: #2d2d2d;
  background: #f7f7f5;
}
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 20px 56px;
}
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; }
h1 { margin: 4px 0 8px; font-size: 2.1rem; }
h2 { margin-top: 0; font-size: 1.25rem; }
h3 { margin: 0 0 10px; font-size: 1.08rem; }
.eyebrow { color: #a26520; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin: 0; }
.lead { max-width: 900px; font-size: 1.02rem; }
a { color: #0f7180; text-decoration: none; }
a:hover { text-decoration: underline; }
.panel {
  background: #fff;
  border: 1px solid #e4e4df;
  border-radius: 6px;
  padding: 18px;
  margin: 18px 0;
}
.model-definitions { border-top: 3px solid #c9822b; }
.definition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.definition-card {
  border: 1px solid #e7e7e2;
  border-radius: 6px;
  padding: 14px 16px;
  background: #fcfcfb;
}
.definition-card p { margin-bottom: 10px; }
.equation {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #eeeeea;
  border-radius: 4px;
  padding: 8px 10px;
  margin: 10px 0;
}
.note {
  color: #555;
  margin-bottom: 0;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
}
.controls label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  min-width: 220px;
  gap: 6px;
}
select {
  padding: 8px 10px;
  border: 1px solid #d1d5d9;
  border-radius: 4px;
  background: #fff;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
.recommendation .family {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.82rem;
  margin-right: 6px;
  background: #e9eef0;
}
.good { background: #d8f0df; }
.warn { background: #fff1c2; }
.bad { background: #f7d3d3; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { border-bottom: 1px solid #e7e7e7; text-align: left; padding: 7px 6px; }
th { color: #555; font-weight: 600; }
.plot { min-height: 430px; }
pre { white-space: pre-wrap; font-size: 0.86rem; background: #fafafa; padding: 12px; border-radius: 4px; }
@media (max-width: 900px) {
  .grid, .definition-grid { grid-template-columns: 1fr; }
}


.equation-text {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #eeeeea;
  border-radius: 4px;
  padding: 10px 12px;
  margin: 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.55;
}
.plot-note {
  color: #666;
  font-size: 0.88rem;
  margin: 8px 0 0;
}

/* UI_V7_MARKERS_AND_CURVES_START */
.plot-controls {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  font-size: 0.95rem;
}
.plot-controls label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}
.plot-controls .checkbox-label {
  font-weight: 500;
  color: #555;
}
.plot-controls select {
  padding: 5px 8px;
  border: 1px solid #d7d7d0;
  border-radius: 4px;
  background: #fff;
}
.plot-controls input[type="checkbox"] {
  width: 15px;
  height: 15px;
}
.plot-range-label {
  color: #666;
  font-size: 0.9rem;
}
.badge + .badge {
  margin-left: 6px;
}
/* UI_V7_MARKERS_AND_CURVES_END */


.warning-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 4px solid #b7791f;
  background: #fffaf0;
  color: #744210;
  font-size: 0.92rem;
}
.muted {
  color: #666;
  font-size: 0.92rem;
}