.disco-offline-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 14px 0 20px;
  padding: 22px 24px;
  border: 1px solid #d8dbe1;
  border-radius: 20px;
  background: #fff;
  color: #171717;
}
.disco-offline-card > div:first-child { flex: 1; min-width: 0; }
.disco-offline-card span { color: #a91d35; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.disco-offline-card h2 { margin: 5px 0 7px; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.2; }
.disco-offline-card p { margin: 0 0 10px; color: #555d68; font-size: 14px; }
.disco-offline-card small { display: block; margin-top: 8px; color: #67707b; font-size: 12px; line-height: 1.4; }
.disco-offline-progress { height: 8px; max-width: 680px; overflow: hidden; border-radius: 50px; background: #e9eaed; }
.disco-offline-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #ae1c36; transition: width .25s ease; }
.disco-offline-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.disco-offline-actions button { min-height: 44px; padding: 10px 17px; border: 0; border-radius: 10px; background: #171717; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.disco-offline-actions button[data-disco-offline-pause] { background: #f0f0f1; color: #171717; }
.disco-offline-actions button[hidden] { display: none; }
.disco-offline-actions button:disabled { opacity: .55; cursor: default; }
.disco-offline-card[data-offline-complete="true"] { border-color: #71b997; background: #f7fcf9; }
.disco-offline-card[data-offline-complete="true"] .disco-offline-progress i { background: #23875a; }
@media (max-width: 620px) {
  .disco-offline-card { align-items: stretch; flex-direction: column; gap: 14px; margin: 12px 0 16px; padding: 17px; border-radius: 16px; }
  .disco-offline-actions button { width: 100%; }
  .disco-offline-actions { width: 100%; }
}