body.modal-open { overflow: hidden; }

.om-compare-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(1, 7, 12, .76);
  backdrop-filter: blur(9px);
}
.om-compare-backdrop.open { display: grid; }

.om-compare-modal {
  width: min(1220px, 96vw);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid rgba(84, 181, 222, .25);
  border-radius: 18px;
  background:
    radial-gradient(circle at 72% -20%, rgba(28, 115, 154, .18), transparent 32%),
    linear-gradient(180deg, #0b1d29, #07141e);
  color: #edf8ff;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.om-compare-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.om-compare-modal-head small { color: #5f8498; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.om-compare-modal-head h2 { margin: 4px 0 4px; font-size: 24px; letter-spacing: -.025em; }
.om-compare-modal-head p { max-width: 720px; margin: 0; color: #7f9bab; font-size: 11px; line-height: 1.5; }
.om-compare-close {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(120, 173, 197, .18);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #aac2d0;
  font-size: 22px;
  cursor: pointer;
}

.om-compare-periods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
}
.om-compare-period-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(54, 169, 220, .17);
  border-radius: 11px;
  background: rgba(8, 31, 44, .72);
}
.om-compare-period-card.comparison { border-color: rgba(94, 201, 115, .17); }
.om-compare-period-card small { color: #5e8499; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.om-compare-period-card strong { min-height: 17px; font-size: 12px; }
.om-compare-period-card select { margin-top: 2px; }
.om-compare-arrow { color: #5d8499; font-size: 25px; text-align: center; }

.om-compare-previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 22px 16px;
}
.om-compare-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 157, 185, .14);
  border-radius: 12px;
  background: rgba(5, 20, 29, .72);
}
.om-compare-preview-card > header { padding: 10px 11px; border-bottom: 1px solid rgba(255,255,255,.05); }
.om-compare-preview-card header span { display: block; color: #608297; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.om-compare-preview-card header b { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
.om-compare-image { position: relative; min-height: 230px; display: grid; place-items: center; overflow: hidden; background: #02090e; color: #628095; font-size: 10px; }
.om-compare-image > img { width: 100%; height: 230px; object-fit: contain; }
.om-compare-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.om-compare-split img { width: 100%; height: 100%; object-fit: cover; }
.om-compare-split-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.75); }
.om-compare-split-label { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.om-compare-split-label span { padding: 4px 6px; border-radius: 6px; background: rgba(3,13,20,.78); color: #e8f7ff; font-size: 8px; }

.om-compare-results { padding: 0 22px 14px; }
.om-compare-loading, .om-compare-warning { padding: 12px; border: 1px solid rgba(91, 156, 185, .14); border-radius: 9px; background: rgba(5, 21, 31, .65); color: #88a6b6; font-size: 10px; }
.om-compare-warning { border-color: rgba(235, 167, 79, .22); color: #e7c18c; }
.om-compare-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.om-compare-metric-head small { display: block; color: #5d8296; font-size: 8px; letter-spacing: .12em; }
.om-compare-metric-head b { display: block; margin-top: 3px; font-size: 12px; }
.om-compare-metric-head > span { padding: 5px 7px; border-radius: 999px; background: rgba(53, 171, 218, .08); color: #75c9e8; font-size: 8px; }
.om-compare-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.om-compare-metric { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(5, 19, 28, .72); }
.om-compare-metric header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.om-compare-metric header b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.om-compare-metric .sensor { padding: 3px 5px; border-radius: 5px; background: rgba(49, 162, 209, .11); color: #82cee9; font-size: 7px; font-weight: 800; }
.om-compare-metric > strong { display: block; margin: 11px 0 7px; font-size: 23px; font-variant-numeric: tabular-nums; }
.om-compare-metric > strong.positive { color: #65dfa2; }
.om-compare-metric > strong.negative { color: #ff8b98; }
.om-compare-metric > strong.neutral { color: #c1d3dd; }
.om-compare-metric .transition { color: #7895a6; font-size: 9px; font-variant-numeric: tabular-nums; }
.om-compare-metric footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 9px; color: #688697; font-size: 8px; }

.om-compare-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(255,255,255,.055);
}
.om-compare-note { color: #617f91; font-size: 9px; }
.om-compare-run { padding: 10px 14px; border: 1px solid rgba(58, 200, 251, .42); border-radius: 9px; background: rgba(18, 119, 160, .48); color: #edfbff; font-weight: 800; cursor: pointer; }
.om-compare-run:disabled { opacity: .36; cursor: not-allowed; }

@media (max-width: 900px) {
  .om-compare-periods { grid-template-columns: 1fr; }
  .om-compare-arrow { transform: rotate(90deg); }
  .om-compare-previews { grid-template-columns: 1fr; }
}