body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  margin: 0;
  background: #f6f7fb;
  color: #111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.header {
  background: #005195;
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.headerBtn {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.headerBtn:hover {
  background: rgba(255,255,255,0.25);
}

.subtitle {
  opacity: 0.9;
  margin-top: 4px;
}

.footer {
  margin: 10px 0 0 0;
  padding: 10px 12px;
  color: #444;
}

.footerText {
  font-size: 12px;
  opacity: 0.9;
  text-align: center;
}

/* ── About Banner ── */
.about-banner {
  background: #fff;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.about-tagline {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
.about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  margin-right: 16px;
  padding: 0;
  border: none;
  background: none;
  color: #005195;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.about-toggle:hover {
  background: none;
}
.about-toggle:hover .about-text {
  text-decoration: underline;
}
.about-arrow {
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
  text-decoration: none !important;
}
.about-toggle:hover .about-arrow {
  text-decoration: none !important;
}
.about-banner.open-about #aboutToggle .about-arrow,
.about-banner.open-howto #howToToggle .about-arrow {
  transform: rotate(180deg);
}
.about-body {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fafbfe;
  font-size: 13px;
  color: #444;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  border-color: transparent;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.3s ease;
}
.about-banner.open-about #aboutBody,
.about-banner.open-howto #howToBody {
  max-height: 600px;
  opacity: 1;
  padding: 12px;
  margin-top: 12px;
  border-color: #eef1f7;
}
.howto-steps {
  margin: 0;
  padding-left: 20px;
}
.howto-steps li {
  margin-bottom: 6px;
}
.howto-steps li:last-child {
  margin-bottom: 0;
}
.about-body p {
  margin: 0 0 10px;
}
.about-columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .about-columns { grid-template-columns: 1fr; }
}
.about-body h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #005195;
}
.about-body ul {
  margin: 0;
  padding-left: 18px;
}
.about-body li {
  margin-bottom: 4px;
}

.panel {
  background: #fff;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.row.split {
  align-items: stretch;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  flex: 1;
}

label {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

select, input {
  padding: 8px;
  border: 1px solid #cbd2e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus, input:focus {
  outline: none;
  border-color: #005195;
  box-shadow: 0 0 0 3px rgba(0,81,149,0.10);
}

.card {
  flex: 1;
  min-width: 360px;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 12px;
}

.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.cardTitle {
  font-weight: 800;
}

.cardTitleBlock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cardSubtext {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

/* Default button style */
button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd2e1;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

button:hover {
  background: #f5f7fa;
  border-color: #b0b8c9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
button:active {
  transform: scale(0.98);
}

.cardActions button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd2e1;
  background: #fff;
  cursor: pointer;
}

.methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 12px;
  max-height: 360px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fafbfe;
}

.defects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 12px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fafbfe;
}

.methodItem {
  display: flex;
  gap: 8px;
  align-items: start;
  font-size: 13px;
}

.methodRow {
  display: grid;
  grid-template-columns: 24px 1fr 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 6px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fff;
}

.methodRow .methodName {
  font-size: 13px;
}

.methodCellWrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.methodCellWrap input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #cbd2e1;
  font-size: 13px;
}
.methodResetBtn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: #888;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.methodResetBtn:hover {
  color: #005195;
  background: #e8f0fb;
}

.methodHeaderRow {
  display: grid;
  grid-template-columns: 24px 1fr 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 6px;
  font-weight: 800;
  font-size: 12px;
  color: #333;
}

.deps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.depHeaderRow {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #333;
  padding: 6px;
}

.depRow {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.depChildrenBox {
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fafbfe;
  padding: 8px;
  max-height: 180px;
  overflow: auto;
}

.depChildrenActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.depChildrenActions button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd2e1;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.depChildItem {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 2px 0;
}

.depChildMuted {
  color: #666;
  font-size: 12px;
  margin-bottom: 6px;
}

.depRow button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd2e1;
  background: #fff;
  cursor: pointer;
}

.hint {
  margin-top: 10px;
  font-size: 12px;
  color: #444;
}

.uploadPanel {
  padding-top: 14px;
}

.uploadHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.uploadTitle {
  margin: 0;
}

.uploadGrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.uploadCard {
  border: 1px solid #e7eaf3;
  border-radius: 10px;
  background: #fafbfe;
  padding: 12px;
}

.uploadCardTitle {
  font-weight: 800;
  margin-bottom: 8px;
}

.uploadList {
  margin: 0;
  padding-left: 18px;
  color: #333;
  line-height: 1.35;
}

.uploadList li + li {
  margin-top: 6px;
}

.templateRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.templateBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.secondaryBtn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #cbd2e1;
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.uploadMuted {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.uploadFiles input[type="file"] {
  background: #fff;
}

@media (max-width: 900px) {
  .uploadGrid {
    grid-template-columns: 1fr;
  }
}

.actions {
  align-items: center;
}

button.primary, .primaryBtn {
  background: #005195;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

button.primary:hover, .primaryBtn:hover {
  background: #003d73;
  box-shadow: 0 2px 8px rgba(0,81,149,0.25);
}

.status {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
}
.status.success {
  color: #15803d;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

th, td {
  border: 1px solid #d7dbe7;
  padding: 8px;
  text-align: left;
}

th {
  background: #f2f5fb;
}

.error {
  color: #b00020;
  font-weight: 700;
}

.resultsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .resultsGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .resultsGrid {
    grid-template-columns: 1fr;
  }
}

.resultsCard {
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

.resultsCardTitle {
  font-weight: 800;
  margin: 0 0 8px 0;
  font-size: 13px;
}

.auditWrap {
  margin-top: 12px;
}
.auditSection {
  margin-bottom: 10px;
}
.auditSection:last-child {
  margin-bottom: 0;
}
.auditSection-title {
  font-weight: 700;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.auditChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.auditChip {
  font-size: 12px;
  color: #333;
  background: #f0f2f5;
  border: 1px solid #e0e3ea;
  border-radius: 6px;
  padding: 3px 8px;
}
.auditChip--red {
  background: #fef2f2;
  border-color: #f5c6c6;
  color: #991b1b;
}
.auditTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.auditTable th {
  text-align: left;
  font-weight: 700;
  color: #555;
  padding: 4px 8px;
  border-bottom: 2px solid #e3e6ee;
}
.auditTable td {
  padding: 4px 8px;
  border-bottom: 1px solid #f0f2f5;
}
.auditStrike {
  text-decoration: line-through;
  color: #999;
}

.metaBar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.metaStat {
  flex: 1 1 0;
  min-width: 120px;
  background: #f7f9fc;
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}
.metaStat--hero {
  background: #eaf2fb;
  border-color: #b5cfe8;
}
.metaStat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
}
.metaStat--hero .metaStat-val {
  font-size: 22px;
  color: #005195;
}
.metaStat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.metaDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.metaChip {
  font-size: 12px;
  font-weight: 600;
  color: #444;
  background: #f0f2f5;
  border: 1px solid #e0e3ea;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Skeleton loading placeholder */
.skel-bone {
  background: #e9ecf0;
  border-radius: 4px;
}
.skel-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.skel-meta-item {
  height: 14px;
}
.skel-card {
  border: 1px solid #e3e6ee;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.skel-title {
  height: 14px;
  width: 70%;
  margin-bottom: 10px;
}
.skel-row {
  height: 12px;
  margin-bottom: 6px;
}
.skel-row:last-child {
  margin-bottom: 0;
}
.skel-row.w80 { width: 80%; }
.skel-row.w60 { width: 60%; }
.skel-row.w90 { width: 90%; }
.skel-row.w50 { width: 50%; }
.skel-row.w70 { width: 70%; }

/* Red outline for validation errors */
.error-outline {
  border: 2px solid #d32f2f !important;
  outline: none;
}

/* Compare Runs Panel */
.comparePanel {
  display: none;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e3e6ee;
  border-radius: 8px;
  padding: 10px;
  background: #fafbfe;
}

.comparePanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comparePanelTitle {
  font-weight: 700;
  font-size: 13px;
}

.comparePanelActions {
  display: flex;
  gap: 8px;
}

.compareRunsList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compareRunItem {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid #eef1f7;
  font-size: 13px;
}

.compareRunItem:last-child {
  border-bottom: none;
}

.compareRunItem input[type="checkbox"] {
  margin-right: 10px;
}

.compareRunItem label {
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0;
}

.comparePanelEmpty {
  color: #666;
  font-style: italic;
  font-size: 13px;
  padding: 8px 0;
}

/* Run History Panel */
.historyPanel {
  display: none;
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e3e6ee;
  border-radius: 8px;
  background: #fafbfe;
  padding: 6px;
}
.historyPanel.open {
  display: block;
}
.historyList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.historyItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #eef1f7;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.historyItem:hover {
  background: #f0f4fb;
  border-color: #c2d6ec;
}
.historyDeleteBtn {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: #aaa;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.historyDeleteBtn:hover {
  color: #c0392b;
  background: #fdecea;
}
.historyDate {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  min-width: 105px;
}
.historyTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.historyTag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: #eef1f7;
  color: #444;
  white-space: nowrap;
}
.historyTag.ht-changed {
  background: #e0ecfa;
  color: #005195;
}
.historyEmpty {
  color: #888;
  font-size: 13px;
  font-style: italic;
  padding: 12px 8px;
  text-align: center;
}

/* ── Info Tooltips (ⓘ) ── */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef4fb;
  color: #005195;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 5px;
  vertical-align: middle;
  user-select: none;
  border: 1px solid #c2d6ec;
  font-style: normal;
  line-height: 1;
  flex-shrink: 0;
}
.info-tip:hover {
  background: #ddeaf8;
}
.info-tip-body {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  min-width: 240px;
  max-width: 340px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #c2d6ec;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  font-size: 13px;
  font-weight: 400;
  color: #333;
  line-height: 1.55;
  z-index: 100;
  cursor: default;
  white-space: normal;
}
.info-tip-body::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid #c2d6ec;
  border-top: 1px solid #c2d6ec;
  transform: rotate(45deg);
}
.info-tip:hover > .info-tip-body {
  display: block;
}
.info-tip-body strong {
  color: #005195;
  font-weight: 700;
}
.info-tip-body p {
  margin: 0 0 6px;
}
.info-tip-body p:last-child {
  margin-bottom: 0;
}

.metaStat-label .info-tip {
  width: 14px;
  height: 14px;
  font-size: 9px;
  margin-left: 3px;
  vertical-align: middle;
}
.metaStat-label .info-tip-body,
.metaChip .info-tip-body {
  text-transform: none;
  letter-spacing: 0;
}
.metaChip .info-tip {
  width: 14px;
  height: 14px;
  font-size: 9px;
  margin-left: 3px;
}
.resultsCardTitle .info-tip {
  vertical-align: middle;
}
h2 .info-tip {
  width: 20px;
  height: 20px;
  font-size: 12px;
  vertical-align: middle;
}

/* Input with unit prefix/suffix inside the box */
.input-unit {
  display: flex;
  align-items: center;
  border: 1px solid #cbd2e1;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.input-unit input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
  padding: 8px;
  font-size: 14px;
  outline: none;
}
.input-unit input:focus {
  outline: none;
}
.input-unit-prefix,
.input-unit-suffix {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  background: #f6f7fb;
  white-space: nowrap;
  user-select: none;
}
.input-unit-prefix {
  border-right: 1px solid #cbd2e1;
}
.input-unit-suffix {
  border-left: 1px solid #cbd2e1;
}
.input-unit:focus-within {
  border-color: #005195;
  box-shadow: 0 0 0 2px rgba(0,81,149,0.12);
}

/* Inline field hints */
.field-hint {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 400;
}

/* Alpha/Beta Panel (SME & Round Robin) */
.alphaBetaRow {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #eef4fb;
  border: 1px solid #c2d6ec;
  border-radius: 8px;
  margin-bottom: 12px;
}

.alphaBetaInfo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
}

.alphaBetaFormula {
  font-family: 'Times New Roman', serif;
  font-size: 15px;
  color: #005195;
  font-weight: 600;
}

.alphaBetaField {
  min-width: 160px;
  max-width: 220px;
  flex: 0 1 auto;
}

.alphaBetaField input[type="number"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
  height: 34px;
}

.debugMatrixInlineBtn {
  padding: 7px 18px;
  border: 1px solid #bbb;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  color: #005195;
  text-align: center;
  box-sizing: border-box;
  height: 34px;
  white-space: nowrap;
}

.debugMatrixInlineBtn:hover {
  background: #f0f5fc;
  border-color: #005195;
}

/* (tooltip-icon replaced by .info-tip) */

/* ── Debug Matrix Preview (frozen-pane grid) ── */
.dmPanel {
  border: 1px solid #c2d6ec;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 12px;
  overflow: visible;
}
.dmToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #eef4fb;
  border-bottom: 1px solid #c2d6ec;
}
.dmTitle {
  font-weight: 700;
  font-size: 14px;
  color: #005195;
}
.dmControls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dmBtn {
  width: 28px; height: 28px;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #333; padding: 0; line-height: 1;
}
.dmBtn:hover { background: #f0f0f0; }
#debugMatrixZoomLevel {
  font-size: 12px; font-weight: 600; color: #555;
  min-width: 36px; text-align: center;
}
.dmStatus {
  padding: 6px 14px;
  font-size: 12px; color: #555;
  border-bottom: 1px solid #e3e6ee;
}

/* 2×2 frozen-pane grid */
.dmGrid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  max-height: 70vh;
  overflow: hidden;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}
.dmGrid.dmLoading .dmBody,
.dmGrid.dmLoading .dmRowHeaders {
  filter: blur(4px) grayscale(40%);
  opacity: 0.4;
  pointer-events: none;
  transition: filter 0.15s, opacity 0.15s;
}

/* Top-left corner (frozen) */
.dmCornerPin {
  grid-row: 1; grid-column: 1;
  background: #e4e8f0;
  z-index: 3;
  overflow: hidden;
  border-right: 2px solid #b0bdd0;
  border-bottom: 2px solid #b0bdd0;
  display: flex;
  align-items: flex-end;
}

/* Column headers (scroll horizontally via JS sync, fixed vertically) */
.dmColHeaders {
  grid-row: 1; grid-column: 2;
  overflow: hidden;
  background: #f0f3f9;
  border-bottom: 2px solid #b0bdd0;
  position: relative;
}

/* Row headers (scroll vertically, fixed horizontally) */
.dmRowHeaders {
  grid-row: 2; grid-column: 1;
  overflow: hidden;
  background: #f0f3f9;
  border-right: 2px solid #b0bdd0;
}

/* Data body (scrolls both ways — drives all sync) */
.dmBody {
  grid-row: 2; grid-column: 2;
  overflow: auto;
}

/* Shared cell styling — override the global table width:100% */
.dmGrid table {
  border-collapse: collapse;
  white-space: nowrap;
  table-layout: fixed;
  width: auto;
}
.dmGrid th, .dmGrid td {
  border: 1px solid #dde1ea;
  padding: 2px 4px;
  text-align: center;
  font-size: 11px;
}
.dmGrid .dmBody td {
  min-width: 22px;
  max-width: 22px;
  width: 22px;
  padding: 1px 1px;
  font-size: 8px;
}

/* Column header strip — all elements positioned by JS from body column offsets */
.dmColStrip {
  position: relative;
  height: 160px;
  overflow: visible;
}
.dmColLine {
  position: absolute;
  bottom: -3px;
  width: 200px;
  height: 1px;
  background: #dde1ea;
  transform-origin: 0% 100%;
  transform: rotate(-55deg);
  pointer-events: none;
}
.dmColHText {
  position: absolute;
  bottom: 4px;
  width: 180px;
  transform-origin: bottom left;
  transform: rotate(-55deg);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  cursor: default;
  line-height: 1.3;
}
.dmColWarnBg {
  position: absolute;
  bottom: 0;
  top: 0;
  background: #fde8e8;
  transform-origin: bottom left;
  transform: skewX(-35deg);
  pointer-events: none;
}
.dmColHText.dmWarn {
  color: #b91c1c;
}

/* Row header cells (method names) */
.dmGrid .dmRowH {
  background: #f0f3f9;
  font-weight: 600;
  font-size: 11px;
  color: #333;
  text-align: left;
  padding: 2px 8px;
  cursor: default;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Value color coding */
.dmGrid .dmZ { color: #ccc; }

/* Source dominance colors (SME = blue, RR = orange) */
.dmGrid .dmSrc-sme  { background: #dbeafe !important; } /* SME only */
.dmGrid .dmSrc-rr   { background: #ffedd5 !important; } /* RR only */
.dmGrid .dmSrc-bal  { background: #f3f4f6 !important; } /* balanced */
.dmGrid .dmSrc-sme1 { background: #eff6ff !important; } /* slight SME lean */
.dmGrid .dmSrc-sme2 { background: #dbeafe !important; } /* moderate SME */
.dmGrid .dmSrc-sme3 { background: #bfdbfe !important; } /* strong SME */
.dmGrid .dmSrc-rr1  { background: #fff7ed !important; } /* slight RR lean */
.dmGrid .dmSrc-rr2  { background: #ffedd5 !important; } /* moderate RR */
.dmGrid .dmSrc-rr3  { background: #fed7aa !important; } /* strong RR */

.dmLegend {
  background: #f9fafb;
  border: 1px solid #e3e6ee;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  color: #555;
}
.dmLegend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 3px 0;
}
.dmLegend-label {
  font-weight: 700;
  color: #333;
  min-width: 85px;
}
.dmLegend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.dmLegend-scale {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  max-width: 280px;
  flex: 1;
}
.dmLegend-grad {
  display: block;
  height: 12px;
  border-radius: 4px;
  border: 1px solid #d0d0d0;
}
.dmLegend-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #888;
}
.dmLegend-hint {
  color: #999;
  font-style: italic;
  margin-left: 4px;
}

/* Uncovered highlight (all-zero row/column) */
.dmGrid .dmWarn {
  background: #fde8e8 !important;
  color: #b91c1c !important;
}

/* ── Spinner Loader ── */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid #dde1ea;
  border-top-color: #005195;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
  margin-right: 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.status-msg {
  transition: opacity 0.3s ease;
}

/* Duplicate run prompt */
.dup-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #333;
}
.dup-prompt-msg {
  color: #005195;
  font-weight: 600;
}
.dup-prompt button {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}