.official-exchange-dialog {
  --prediction: #a9d8f2;
  --prediction-soft: rgba(117, 188, 226, .12);
  --prediction-border: rgba(158, 211, 239, .28);
}

.official-exchange-dialog .prediction-exchange-grid {
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2.2fr);
}

.official-exchange-dialog .official-public-publish {
  display: grid;
  grid-template-columns: 138px minmax(280px, 1fr) minmax(260px, 320px);
  align-items: center;
  gap: 18px;
  margin: 18px 0 12px;
  border: 1px solid rgba(69, 208, 242, .28);
  padding: 18px;
  background: linear-gradient(120deg, rgba(69, 208, 242, .08), rgba(5, 13, 20, .72));
}

.official-exchange-dialog .official-public-publish h3,
.official-exchange-dialog .official-public-publish p { margin: 0; }

.official-exchange-dialog.is-editor-inline .official-public-publish > .prediction-exchange-group-label {
  grid-column: 1;
}

.official-exchange-dialog.is-editor-inline .official-public-publish > div { grid-column: 2; }
.official-exchange-dialog.is-editor-inline .official-public-publish > .official-public-export { grid-column: 3; }

.official-exchange-dialog .official-public-publish h3 {
  color: #dbeaf2;
  font: 700 16px/1.4 var(--jp);
}

.official-exchange-dialog .official-public-publish p {
  margin-top: 7px;
  color: #8fa7b5;
  font: 500 12px/1.65 var(--jp);
}

.official-exchange-dialog .official-public-export {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(136, 224, 247, .62);
  padding: 10px 16px;
  background: #45d0f2;
  color: #06111a;
  font: 800 11px/1.35 var(--jp);
  letter-spacing: .06em;
  cursor: pointer;
}

.official-exchange-dialog .official-public-export:disabled {
  cursor: wait;
  opacity: .58;
}

.official-exchange-dialog .prediction-exchange-import {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.official-exchange-dialog .official-pack-private-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #8fa7b5;
  font: 700 12px/1.55 var(--mono);
  letter-spacing: .04em;
}

.official-exchange-dialog .prediction-pack-preview-head em {
  color: #8fa7b5;
}

.official-exchange-dialog .prediction-pack-merge {
  border-color: #dfe7ec;
  background: #dfe7ec;
  color: #08121b;
}

.official-exchange-dialog .prediction-pack-merge:disabled {
  opacity: .32;
}

@media (max-width: 760px) {
  .official-exchange-dialog .official-public-publish {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .official-exchange-dialog.is-editor-inline .official-public-publish > .prediction-exchange-group-label,
  .official-exchange-dialog.is-editor-inline .official-public-publish > div,
  .official-exchange-dialog.is-editor-inline .official-public-publish > .official-public-export {
    grid-column: 1;
  }

  .official-exchange-dialog .prediction-exchange-grid,
  .official-exchange-dialog .prediction-exchange-import {
    grid-template-columns: 1fr;
  }
}