:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f5f1;
  color: #202421;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f4f5f1; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar {
  min-height: 88px;
  padding: 18px clamp(18px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #ffffff;
  border-bottom: 1px solid #d9ddd7;
}
.eyebrow, .section-label { margin: 0 0 4px; color: #69716b; font-size: 11px; font-weight: 700; }
h1 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.status { display: flex; align-items: center; gap: 8px; color: #4a514c; font-size: 13px; font-weight: 650; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2a23a; box-shadow: 0 0 0 3px #f8ecd8; }
.status-dot.live { background: #2c9564; box-shadow: 0 0 0 3px #dceee4; }
.status-dot.stale { background: #c75d4d; box-shadow: 0 0 0 3px #f4dfdb; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #cfd5cf; border-radius: 6px; background: #fff; color: #343a36; cursor: pointer; }
.icon-button:hover { background: #eef1ed; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button.loading svg { animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { width: min(1460px, 100%); margin: 0 auto; padding: 28px clamp(18px, 4vw, 56px) 42px; }
.sft-section { padding: 0 0 30px; margin-bottom: 28px; border-bottom: 1px solid #cfd5cf; }
.progress-section { padding: 0 0 26px; }
.progress-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.progress-heading h2 { margin: 0; font-size: clamp(26px, 4vw, 42px); line-height: 1.08; letter-spacing: 0; }
.progress-heading > strong { font-size: 24px; color: #2c7154; }
.progress-summary { display: flex; align-items: baseline; gap: 12px; }
.progress-summary strong { color: #9b4b35; font-size: 24px; }
.progress-summary span { color: #6b726d; font-size: 12px; font-weight: 700; }
.progress-track { height: 8px; margin-top: 16px; overflow: hidden; background: #dce1dc; border-radius: 3px; }
.progress-track div { width: 0; height: 100%; background: #2c9564; transition: width 500ms ease; }
.sft-track div { background: #d06b45; }
.updated { margin: 8px 0 0; color: #717873; font-size: 12px; }

.metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid #d9ddd7; background: #fff; }
.metric { min-width: 0; min-height: 116px; padding: 18px; border-right: 1px solid #e2e5e1; }
.metric:last-child { border-right: 0; }
.metric span, .metric small { display: block; color: #6b726d; font-size: 12px; }
.metric strong { display: block; margin: 10px 0 6px; font-size: 25px; line-height: 1; letter-spacing: 0; overflow-wrap: anywhere; }
.sft-metrics { margin-top: 18px; }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.chart-panel { min-width: 0; padding: 18px; background: #fff; border: 1px solid #d9ddd7; border-radius: 6px; }
.chart-wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: 0; }
.panel-heading span { color: #747b76; font-size: 12px; text-align: right; }
.chart-wrap { position: relative; width: 100%; height: 260px; }
.chart-wide .chart-wrap { height: 330px; }

.model-profile, .data-profile { display: grid; grid-template-columns: minmax(240px, 0.8fr) 2fr; gap: 34px; margin-top: 20px; padding: 24px 0; border-top: 1px solid #cfd5cf; }
.data-profile { margin-top: 0; }
.profile-heading h2 { margin: 0; max-width: 440px; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.profile-heading h2 + p { margin: 10px 0 0; max-width: 500px; color: #68706a; font-size: 13px; line-height: 1.55; }
.profile-heading a { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: #216d7e; font-size: 12px; font-weight: 700; text-decoration: none; }
.profile-heading a:hover { text-decoration: underline; }
.profile-heading a svg { width: 14px; height: 14px; }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-left: 1px solid #d9ddd7; border-top: 1px solid #d9ddd7; }
.profile-grid div { min-width: 0; padding: 14px; border-right: 1px solid #d9ddd7; border-bottom: 1px solid #d9ddd7; }
.profile-grid dt { color: #747b76; font-size: 11px; }
.profile-grid dd { margin: 5px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

.run-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 18px 0; border-top: 1px solid #cfd5cf; border-bottom: 1px solid #cfd5cf; }
.run-strip div { min-width: 0; padding: 0 18px; border-right: 1px solid #d9ddd7; }
.run-strip div:first-child { padding-left: 0; }
.run-strip div:last-child { border-right: 0; }
.run-strip span { display: block; color: #747b76; font-size: 11px; }
.run-strip strong { display: block; margin-top: 5px; font-size: 14px; overflow-wrap: anywhere; }
.error-banner { position: fixed; right: 18px; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); padding: 12px 14px; color: #7c2f26; background: #fff5f2; border: 1px solid #e4a59b; border-radius: 6px; font-size: 13px; box-shadow: 0 8px 30px rgb(60 40 35 / 14%); }

@media (max-width: 1050px) {
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .metric:nth-child(3) { border-right: 0; }
  .metric:nth-child(-n + 3) { border-bottom: 1px solid #e2e5e1; }
  .model-profile, .data-profile { grid-template-columns: 1fr; }
  .run-strip { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .run-strip div:nth-child(3) { border-right: 0; }
}
@media (max-width: 700px) {
  .topbar { align-items: flex-start; padding: 16px 18px; }
  h1 { font-size: 18px; }
  .status span:last-child { display: none; }
  main { padding: 22px 14px 32px; }
  .metrics-grid, .charts-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 104px; padding: 15px; border-bottom: 1px solid #e2e5e1; }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n + 2) { border-bottom: 0; }
  .chart-panel, .chart-wide { grid-column: 1 / -1; padding: 14px; }
  .chart-wrap, .chart-wide .chart-wrap { height: 250px; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .run-strip { grid-template-columns: 1fr 1fr; }
  .run-strip div, .run-strip div:first-child { padding: 0 10px; }
  .run-strip div:nth-child(odd) { padding-left: 0; }
  .run-strip div:nth-child(even) { border-right: 0; }
}