.slow-page {
  padding: 22px 24px 26px;
  min-width: 1120px;
  color: #0e1f38;
}

.slow-page[hidden] { display: none; }

.slow-hero,
.slow-readiness,
.slow-filter,
.slow-table-panel,
.slow-metric {
  background: #fff;
  border: 1px solid #dce6f1;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(35, 62, 92, .055);
}

.slow-hero {
  min-height: 136px;
  padding: 20px 22px;
  border-left: 3px solid #37ca91;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(105deg, #fff 68%, #f5fbf9 100%);
}

.slow-eyebrow {
  color: #1f64e9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.slow-hero h1 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: 0; }
.slow-hero p { margin: 13px 0 0; color: #61718a; font-size: 14px; }
.slow-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.slow-last-calc { color: #8492a8; font-size: 12px; margin-right: 4px; }

.slow-btn {
  min-height: 36px;
  border: 1px solid #cfdbea;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: #2a5ca9;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(28, 61, 94, .04);
}

.slow-btn:hover { border-color: #4d9f83; color: #09875d; }
.slow-btn.primary { background: #08a66c; border-color: #08a66c; color: #fff; box-shadow: 0 5px 13px rgba(8, 166, 108, .2); }
.slow-btn.primary:hover { background: #07885a; }
.slow-btn:disabled { opacity: .5; cursor: not-allowed; }

.slow-readiness {
  margin-top: 14px;
  min-height: 64px;
  padding: 11px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fbfcfe;
  box-shadow: none;
}

.slow-info-mark {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #8c98a7;
  color: #fff;
  font-weight: 800;
  font-family: Georgia, serif;
}

.slow-readiness strong { display: block; color: #7e8b9d; font-size: 14px; }
.slow-readiness span { display: block; margin-top: 7px; color: #99a4b3; font-size: 12px; }

.source-readiness { margin-top: 14px; padding: 16px 18px; border: 1px solid #edd8a3; border-radius: 8px; background: #fffbef; box-shadow: 0 8px 24px rgba(99, 74, 25, .05); }
.source-readiness[hidden] { display: none; }
.source-readiness.complete { border-color: #bfe4d3; background: #f3fbf7; }
.source-readiness-head { display: flex; align-items: flex-start; gap: 12px; }
.source-readiness-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #9a6a06; color: #fff; font-weight: 800; }
.source-readiness-head strong { color: #684a0b; font-size: 14px; }
.source-readiness-head p { margin: 7px 0 0; color: #8a7651; font-size: 12px; }
.source-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.source-card { padding: 14px; border: 1px solid #e4d8b9; border-radius: 7px; background: rgba(255, 255, 255, .78); }
.source-card.ready { border-color: #b7dfcd; background: #f6fcf9; }
.source-card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.source-card-title strong { display: block; font-size: 14px; }
.source-card-title code { display: block; margin-top: 6px; color: #8a98aa; font-size: 10px; }
.source-card-title > span { padding: 4px 7px; border: 1px solid #ead9b1; border-radius: 5px; color: #b27914; background: #fffaf0; font-size: 11px; white-space: nowrap; }
.source-card.ready .source-card-title > span { border-color: #cde8d9; color: #68a33f; background: #f5fbee; }
.source-card dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e8e2d2; font-size: 11px; }
.source-card dt { color: #8794a6; }
.source-card dd { margin: 0; color: #33465f; font-variant-numeric: tabular-nums; }
.source-card.ready dd:first-of-type { color: #159a69; font-weight: 700; }
.source-card > p { min-height: 34px; margin: 14px 0 0; color: #69778b; font-size: 11px; line-height: 1.55; }

.slow-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.slow-metric { min-height: 148px; padding: 17px 18px; display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-content: start; width: 100%; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.slow-metric:hover { border-color: #8bcdb5; box-shadow: 0 8px 24px rgba(8, 166, 108, .12); }
.slow-metric.active { border-color: #08a66c; box-shadow: 0 0 0 2px rgba(8, 166, 108, .1), 0 10px 24px rgba(8, 166, 108, .08); }
.slow-metric-icon { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.slow-metric-icon.blue { background: #edf3ff; color: #2474ed; }
.slow-metric-icon.purple { background: #f5edff; color: #864df2; }
.slow-metric-icon.green { background: #eaf9f3; color: #09a66c; }
.slow-metric-icon.red { background: #fff0f0; color: #ef5252; }
.slow-metric-label { color: #6e7c91; font-size: 12px; }
.slow-metric-value { display: block; margin-top: 8px; font-size: 24px; line-height: 1; }
.slow-metric-note { grid-column: 2; color: #65738a; font-size: 12px; line-height: 1.7; }
.slow-metric-split { display: inline-flex; gap: 16px; margin-top: 9px; padding-top: 9px; border-top: 1px solid #efeafb; color: #44516a; }
.slow-metric-split b { margin-left: 5px; color: #3d2c68; }

.slow-filter { margin-top: 16px; padding: 16px 17px; display: flex; gap: 14px 10px; align-items: center; flex-wrap: wrap; box-shadow: 0 8px 20px rgba(35, 62, 92, .045); }
.slow-field { display: flex; align-items: center; gap: 8px; }
.slow-field label { font-weight: 700; white-space: nowrap; color: #263a56; }
.slow-field input,
.slow-field select {
  height: 35px;
  border: 1px solid #cfdbeb;
  border-radius: 6px;
  background: #fff;
  color: #334965;
  padding: 0 11px;
  min-width: 150px;
  outline: none;
}
.slow-field input:focus,
.slow-field select:focus { border-color: #52ad8c; box-shadow: 0 0 0 3px rgba(8, 166, 108, .08); }
.slow-field.wide select { min-width: 230px; }
.slow-field.date input { min-width: 150px; }
.slow-field.days-range { min-width: 220px; }
.slow-field.days-range > div { display: flex; align-items: center; gap: 6px; }
.slow-field.days-range input { min-width: 0; width: 96px; }
.slow-snapshot-note { color: #12a36f; font-size: 12px; }

.slow-table-panel { margin-top: 16px; overflow: hidden; }
.slow-table-head { min-height: 58px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #dce6f1; background: #fff; }
.slow-table-title { font-weight: 800; }
.slow-table-title small { color: #8190a6; font-weight: 400; margin-left: 10px; }
.slow-date-chip { display: inline-flex; margin-left: 8px; padding: 5px 8px; border-radius: 5px; background: #f3f6fa; color: #78879d; font-size: 12px; }
.slow-table-help { margin-left: auto; color: #61718a; font-size: 12px; text-align: right; }
.slow-table-wrap { overflow: auto; min-height: 360px; }
.slow-table { width: 100%; min-width: 1540px; table-layout: fixed; border-collapse: collapse; }
.slow-table th:nth-child(1), .slow-table td:nth-child(1) { width: 42px; padding-left: 14px; padding-right: 8px; text-align: center; }
.slow-table th:nth-child(2), .slow-table td:nth-child(2) { width: 250px; overflow: hidden; text-overflow: ellipsis; }
.slow-table th:nth-child(3), .slow-table td:nth-child(3) { width: 126px; }
.slow-table th:nth-child(4), .slow-table td:nth-child(4) { width: 150px; overflow: hidden; text-overflow: ellipsis; }
.slow-table th:nth-child(5), .slow-table td:nth-child(5) { width: 148px; }
.slow-table th:nth-child(6), .slow-table td:nth-child(6),
.slow-table th:nth-child(7), .slow-table td:nth-child(7),
.slow-table th:nth-child(8), .slow-table td:nth-child(8) { width: 116px; }
.slow-table th:nth-child(9), .slow-table td:nth-child(9) { width: 145px; }
.slow-table th:nth-child(10), .slow-table td:nth-child(10) { width: 135px; }
.slow-table th:nth-child(11), .slow-table td:nth-child(11) { width: 72px; text-align: center; }
.slow-table input[type="checkbox"] { appearance: auto; width: 16px; height: 16px; min-width: 16px; margin: 0; }
.slow-table th,
.slow-table td { height: 55px; padding: 10px 12px; border-right: 1px solid #e1e8f1; border-bottom: 1px solid #e1e8f1; text-align: left; white-space: nowrap; font-size: 13px; }
.slow-table th { height: 53px; background: #f7f9fc; color: #243b58; font-weight: 800; position: sticky; top: 0; z-index: 1; }
.slow-table tbody tr:hover td { background: #f8fcfa; }
.slow-num { text-align: right !important; font-variant-numeric: tabular-nums; font-weight: 700; }
.slow-net { color: #008e5e; }
.slow-muted-num { color: #8795a9; font-weight: 400; }
.slow-tag { display: inline-flex; align-items: center; min-height: 25px; padding: 0 7px; border: 1px solid #c9e8b8; border-radius: 5px; background: #f1faeb; color: #55a51d; font-size: 12px; margin-right: 4px; }
.slow-tag.slow { border-color: #e1cdfd; background: #f8f1ff; color: #8448d8; }
.slow-tag.stockout { border-color: #f6c4c4; background: #fff1f1; color: #d74a4a; }
.slow-tag.replenish { border-color: #f0d39e; background: #fff8e7; color: #a86b08; }
.slow-detail { min-height: 30px; padding: 0 4px; color: #069864; font-weight: 700; background: none; border: 0; cursor: pointer; }
.slow-detail:hover { color: #04784f; text-decoration: underline; }
.slow-loading, .slow-empty, .slow-error { min-height: 320px; display: grid; place-items: center; color: #7d8ba0; }
.slow-error { color: #d74949; }

.slow-pager { min-height: 52px; padding: 9px 16px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #718096; font-size: 12px; }
.slow-pager button { min-width: 32px; height: 30px; border: 1px solid #d5dfeb; border-radius: 5px; background: #fff; color: #4d6078; cursor: pointer; }
.slow-pager button.active { background: #0aa56c; border-color: #0aa56c; color: #fff; }
.slow-pager button:disabled { opacity: .45; cursor: not-allowed; }

.slow-modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 30px; background: rgba(8, 25, 43, .36); }
.slow-modal-backdrop[hidden] { display: none; }
.slow-modal { width: min(860px, 92vw); max-height: 86vh; overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 28px 80px rgba(12, 34, 57, .22); }
.slow-modal-head { min-height: 62px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e7ef; }
.slow-modal-head h2 { margin: 0; font-size: 17px; }
.slow-modal-close { width: 30px; height: 30px; border: 0; background: transparent; color: #718096; font-size: 22px; cursor: pointer; }
.slow-modal-body { padding: 20px; }
.slow-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.slow-modal-grid label { display: grid; gap: 7px; color: #54657c; font-size: 12px; }
.slow-modal-grid input { width: 100%; height: 36px; border: 1px solid #cedae8; border-radius: 6px; padding: 0 10px; }
.slow-modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 9px; }
.slow-code-table { width: 100%; border-collapse: collapse; }
.slow-code-table th, .slow-code-table td { padding: 9px 10px; border: 1px solid #e0e7ef; text-align: left; font-size: 12px; }
.slow-code-table th { background: #f7f9fc; }

.slow-modal.field-config-modal { width: min(1040px, 96vw); max-height: 92vh; }
.field-config-modal .slow-modal-body { padding: 14px; }
.field-config-info { display: flex; gap: 12px; padding: 14px 16px; border-radius: 8px; background: #f5f5f6; color: #7a8491; }
.field-config-info strong { display: block; color: #697584; font-size: 14px; }
.field-config-info p { margin: 7px 0 0; font-size: 12px; line-height: 1.7; }
.field-config-thresholds { margin-top: 18px; padding: 17px; border: 1px solid #dce6f1; border-radius: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.field-config-thresholds > strong { grid-column: 1 / -1; }
.field-config-thresholds label { display: grid; gap: 8px; color: #40516a; font-size: 12px; }
.field-config-thresholds input { width: 100%; height: 34px; border: 1px solid #d2deeb; border-radius: 5px; padding: 0 10px; }
.field-status { min-height: 34px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #cce9bd; border-radius: 6px; background: #f2faed; color: #42a31d; }
.field-config-section { margin-top: 18px; border: 1px solid #dce6f1; border-radius: 8px; overflow: hidden; }
.field-config-section-head { min-height: 72px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #dce6f1; }
.field-config-section-head > span { width: 35px; height: 35px; border-radius: 7px; display: grid; place-items: center; background: #eaf2ff; color: #2670dc; font-weight: 800; }
.field-config-section-head div { display: grid; gap: 5px; }
.field-config-section-head small { color: #8390a3; }
.field-config-section-head em { margin-left: auto; padding: 5px 9px; border: 1px solid #70d6ae; border-radius: 6px; color: #079961; font-style: normal; font-size: 12px; }
.field-config-section table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.field-config-section th, .field-config-section td { padding: 10px; border-right: 1px solid #e1e8f1; border-bottom: 1px solid #e1e8f1; text-align: left; }
.field-config-section th { background: #f7f9fc; color: #43536b; font-size: 12px; }
.field-config-section th:first-child { width: 32%; }
.field-config-section td strong, .field-config-section td small { display: block; }
.field-config-section td strong { color: #31445e; font-size: 13px; }
.field-config-section td strong i { margin-left: 7px; color: #d66c38; font-style: normal; font-size: 10px; }
.field-config-section td small { margin-top: 5px; color: #8795a8; line-height: 1.5; }
.field-config-section select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #cedae8; border-radius: 6px; background: #fff; color: #334965; }
.field-config-section code { display: inline-flex; padding: 7px 10px; border: 1px solid #cfebc3; border-radius: 6px; background: #f1faed; color: #319b19; }
.field-config-actions { position: sticky; bottom: -20px; margin: 18px -14px -14px; padding: 14px; border-top: 1px solid #dce6f1; background: #fff; box-shadow: 0 -8px 20px rgba(37, 62, 91, .06); }
.field-config-actions > span { margin-right: auto; color: #079961; }
.slow-modal.detail-drawer { width: min(820px, 94vw); max-height: 92vh; }
.detail-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.detail-heading h3 { margin: 0; font-size: 18px; }
.detail-heading p { margin: 7px 0 0; color: #8390a3; }
.detail-alert { margin-top: 15px; padding: 12px 14px; border: 1px solid #ead3f9; border-radius: 7px; background: #fcf7ff; color: #74429b; }
.detail-formula { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr 28px) 1fr; align-items: center; gap: 8px; }
.detail-formula div { min-height: 76px; padding: 12px; border: 1px solid #dce6f1; border-radius: 7px; display: grid; gap: 9px; }
.detail-formula div.result { background: #edf9f4; border-color: #bce9d6; }
.detail-formula span { color: #748399; font-size: 12px; }
.detail-formula strong { font-size: 17px; }
.detail-formula b { text-align: center; color: #91a0b2; }
.detail-code { margin-top: 10px; display: grid; gap: 7px; }
.detail-code code { padding: 8px 10px; border-radius: 5px; background: #f5f7fa; color: #40536d; }
.detail-description { width: 100%; margin-top: 15px; border-collapse: collapse; }
.detail-description th, .detail-description td { padding: 10px; border: 1px solid #dfe7f0; text-align: left; font-size: 12px; }
.detail-description th { width: 18%; background: #f7f9fc; color: #53657c; }
.detail-section { margin-top: 18px; }
.detail-section h4 { margin: 0 0 9px; }
.detail-section p { color: #66768d; line-height: 1.75; }
.detail-binding { padding: 12px; border: 1px solid #dce6f1; border-radius: 7px; display: flex; justify-content: space-between; gap: 16px; }
.slow-modal.history-modal { width: min(1500px, calc(100vw - 48px)); }
.history-filter { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.history-filter label { display: grid; gap: 7px; color: #475569; font-size: 13px; }
.history-filter label > div { display: flex; align-items: center; gap: 6px; }
.history-filter input, .history-filter select { min-width: 0; height: 36px; border: 1px solid #d5deea; border-radius: 6px; padding: 0 10px; background: #fff; }
.history-filter label > div input { width: 50%; }
.history-table { min-width: 1180px; }

@media (max-width: 1280px) {
  .slow-page { min-width: 980px; padding: 18px; }
  .slow-hero { align-items: flex-start; }
  .slow-hero-actions { max-width: 620px; }
  .slow-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-filter { grid-template-columns: repeat(3, 1fr); }
}