.mio-page .container {
  width: min(100% - 40px, var(--tool-content-width));
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.mio-workflow {
  margin: var(--tool-page-gap) 0;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.mio-workflow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mio-workflow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem .75rem;
  align-items: center;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
}

.mio-workflow li span {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  font-weight: 800;
}

.mio-workflow li strong {
  min-width: 0;
  color: var(--navy-950);
  font-size: 1rem;
}

.mio-workflow li small {
  grid-column: 2;
  font-weight: 700;
}

.mio-workflow li.active {
  border-color: #8bbcff;
  background: #eef6ff;
}

.mio-workflow li.active span {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: #fff;
}

.mio-workflow li.complete span {
  border-color: #86efac;
  background: #dcfce7;
  color: #047857;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: var(--tool-page-gap);
  align-items: start;
}

.tool-main {
  display: grid;
  min-width: 0;
  gap: var(--tool-page-gap);
}

.tool-side-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.tool-side-nav h2 {
  margin: 0 0 .5rem;
  color: var(--navy-950);
  font-size: 1.35rem;
}

.tool-side-nav a {
  display: block;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 800;
  text-decoration: none;
}

.tool-side-nav a:hover {
  border-color: #b9d5ff;
  color: var(--blue-600);
}

.panel {
  min-width: 0;
  padding: var(--tool-panel-padding);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.section-header,
.subsection-heading,
.results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.section-header h2,
.results-header h2,
.content-section h2 {
  margin: 0;
  color: var(--navy-950);
  font-size: var(--tool-heading-2);
  line-height: 1.2;
}

.section-header p,
.results-header p,
.subsection-heading p,
.template-helper,
.upload-status {
  margin: .25rem 0 0;
  color: var(--text-secondary);
}

.template-loader,
.upload-row,
.model-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
  margin-top: 1rem;
}

.template-loader label,
.upload-row label,
.model-choice-grid label,
.scenario-value-grid label {
  display: grid;
  gap: .4rem;
  color: var(--navy-950);
  font-weight: 800;
}

.template-loader select,
.upload-row input,
.model-choice-grid select,
.scenario-value-grid input,
.data-table input,
.data-table select {
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
}

.editor-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}

.actions {
  margin-top: 1rem;
}

button {
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid var(--blue-600);
  border-radius: 8px;
  background: var(--blue-600);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(31, 111, 235, .18);
}

button:hover {
  background: var(--blue-500);
}

button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

button.reset {
  border-color: #fecaca;
  background: #fff;
  color: #b42318;
  box-shadow: none;
}

.privacy-note,
.method-note,
.import-guidance {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
}

.privacy-note {
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #047857;
  font-weight: 700;
}

.method-note,
.import-guidance {
  border-left: 3px solid var(--blue-600);
  background: var(--surface);
  color: var(--text-secondary);
}

.model-formula-note {
  display: grid;
  gap: .55rem;
}

.model-formula-note p {
  margin: 0;
}

.import-guidance h3,
.setup-subsection h3,
.data-quality-panel h3,
.result-section h3,
.chart-card h4 {
  margin: 0;
  color: var(--navy-950);
}

.result-section h4 {
  margin: 1rem 0 .35rem;
  color: var(--navy-950);
  font-size: 1rem;
}

.section-support-copy {
  margin: 0 0 .75rem;
  color: var(--text-secondary);
}

.import-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}

.import-columns div {
  min-width: 0;
  padding-right: .75rem;
  border-right: 1px solid var(--border);
}

.import-columns div:last-child {
  border-right: 0;
}

.import-columns strong,
.import-columns span {
  display: block;
}

.example-row {
  padding: .75rem;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--navy-800);
}

.data-use-guidance,
.sample-adequacy,
.model-guidance,
.insight-card,
.formula-block {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.data-use-guidance {
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: #fff;
  color: var(--text-secondary);
}

.data-use-guidance strong,
.sample-adequacy strong,
.formula-block span,
.insight-card span {
  display: block;
  color: var(--blue-600);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.data-use-guidance ul {
  display: grid;
  gap: .35rem;
  margin: .6rem 0 0;
  padding-left: 1.2rem;
}

.setup-subsection,
.result-section {
  margin-top: 1.1rem;
}

.setup-subsection .table-scroll {
  margin-top: .9rem;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.data-table,
.result-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.data-table th,
.data-table td,
.result-table th,
.result-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.data-table th,
.result-table th {
  background: var(--surface);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.data-table td:last-child,
.data-table th:last-child,
.result-table td:last-child,
.result-table th:last-child {
  border-right: 0;
}

.result-table .selected-row td {
  background: #eef5ff;
}

.data-table .narrow {
  width: 120px;
}

.data-quality-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.sample-adequacy {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--blue-600);
  background: #fff;
  color: var(--text-secondary);
}

.sample-adequacy p {
  margin: .35rem 0 0;
}

.model-guidance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .35fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
  padding: 1rem;
  border-color: #b9d5ff;
  background: #eef6ff;
}

.model-guidance h3,
.model-guidance p {
  margin: 0;
}

.model-guidance p {
  margin-top: .35rem;
  color: var(--text-secondary);
}

.model-recommendation {
  display: flex;
  align-items: center;
  padding: .85rem 1rem;
  border: 1px solid #b9d5ff;
  border-radius: 8px;
  background: #fff;
  color: var(--navy-950);
  font-weight: 800;
}

.quality-status,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid #b9d5ff;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: .8rem;
  font-weight: 800;
}

.quality-status.good,
.status-pill.interpolation {
  border-color: #86efac;
  background: #dcfce7;
  color: #047857;
}

.status-pill.limited {
  border-color: #facc15;
  background: #fef9c3;
  color: #854d0e;
}

.status-pill.extrapolation {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.quality-grid,
.summary-grid,
.scenario-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.quality-grid article,
.summary-grid article {
  min-width: 0;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.quality-grid span,
.summary-grid span {
  display: block;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.quality-grid strong,
.summary-grid strong {
  display: block;
  margin-top: .25rem;
  color: var(--navy-950);
  font-size: 1.25rem;
  line-height: 1.2;
}

.quality-list {
  display: grid;
  gap: .35rem;
  margin: 1rem 0 0;
  color: var(--text-secondary);
}

.error {
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #b42318;
  font-weight: 750;
}

.hidden {
  display: none !important;
}

.interpretation-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-left: 4px solid var(--blue-600);
  border-radius: 8px;
  background: #eef6ff;
  color: var(--text-secondary);
}

.interpretation-panel h3 {
  margin: 0 0 .35rem;
  color: var(--navy-950);
}

.interpretation-panel p {
  margin: .35rem 0;
}

.equation-list {
  display: grid;
  gap: .65rem;
}

.equation-list code,
.formula-block code {
  display: block;
  padding: .85rem;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy-950);
  white-space: nowrap;
}

.formula-block {
  padding: 1rem;
  background: #fff;
}

.formula-block p {
  margin: .45rem 0 .7rem;
  color: var(--text-secondary);
}

.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.insight-card {
  padding: 1rem;
  background: var(--surface);
}

.insight-card h4 {
  margin: .4rem 0;
  color: var(--navy-950);
  font-size: 1.1rem;
}

.insight-card p {
  margin: 0;
  color: var(--text-secondary);
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.chart-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: .85rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.chart-controls label {
  display: grid;
  gap: .4rem;
  color: var(--navy-950);
  font-weight: 800;
}

.chart-controls span {
  font-size: .82rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.chart-controls select {
  width: 100%;
  min-height: 44px;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
}

.chart-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.chart-card-wide {
  grid-column: 1 / -1;
}

.chart-card canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.chart-card p,
.chart-summary {
  margin: .75rem 0 0;
  color: var(--text-secondary);
}

.chart-value-list {
  display: grid;
  gap: .4rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.chart-value-list li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.chart-value-list strong {
  color: var(--navy-950);
}

.chart-value-list span {
  text-align: right;
}

@media (max-width: 980px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .tool-side-nav {
    position: static;
  }

  .mio-workflow ol,
  .quality-grid,
  .summary-grid,
  .chart-grid,
  .interpretation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mio-page .container {
    width: min(100% - 28px, var(--tool-content-width));
    padding-top: 1rem;
  }

  .section-header,
  .subsection-heading,
  .results-header {
    flex-direction: column;
  }

  .template-loader,
  .upload-row,
  .model-choice-grid,
  .model-guidance,
  .import-columns,
  .chart-controls,
  .mio-workflow ol,
  .quality-grid,
  .summary-grid,
  .scenario-value-grid,
  .chart-grid,
  .interpretation-grid {
    grid-template-columns: 1fr;
  }

  .editor-actions,
  .actions {
    width: 100%;
  }

  .editor-actions button,
  .actions button {
    flex: 1 1 180px;
  }

  .import-columns div {
    padding-right: 0;
    padding-bottom: .75rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}