button,
.btn {
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
}

button:not(:disabled):active,
.btn:not([aria-disabled='true']):active,
button.is-pressed,
.btn.is-pressed {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 0 2px 6px rgba(7, 29, 53, .16) !important;
}

button.is-activated,
.btn.is-activated {
  outline: 3px solid rgba(47, 123, 255, .18);
  outline-offset: 2px;
}

button.is-busy,
.btn.is-busy {
  cursor: progress;
  opacity: .78;
}

button.is-success,
.btn.is-success {
  background: #eafaf3 !important;
  border-color: #75c9a6 !important;
  color: #08714e !important;
  box-shadow: 0 0 0 3px rgba(15, 159, 114, .10) !important;
}

button.is-error,
.btn.is-error {
  background: #fff0f3 !important;
  border-color: #e2a4b0 !important;
  color: #a52943 !important;
  box-shadow: 0 0 0 3px rgba(189, 59, 85, .10) !important;
}

.feedback-live {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sync-chip.saved span {
  background: #0f9f72;
  box-shadow: 0 0 0 4px rgba(15, 159, 114, .12);
}

.statusbox.status-success {
  border-color: #a9dbc7;
  background: #edf9f3;
  color: #0a6d4c;
}

.statusbox.status-warning {
  border-color: #efd38e;
  background: #fff8e7;
  color: #8a641a;
}

.published-admin-card {
  grid-column: 1 / -1;
}

.published-admin-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.published-admin-list {
  display: grid;
  gap: 8px;
}

.published-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #dbe6ee;
  border-radius: 12px;
  background: #f9fbfd;
}

.published-admin-row b {
  display: block;
  margin-bottom: 3px;
}

.published-admin-row small {
  color: #607487;
}

.public-preview-banner {
  max-width: 980px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid #9ec4ff;
  border-radius: 12px;
  background: #edf5ff;
  color: #155bc0;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .published-admin-row {
    grid-template-columns: 1fr;
  }
}
