.countdown-timer-cell {
  --countdown-color: #64748b;
  --countdown-soft: rgba(100, 116, 139, 0.12);

  width: 250px;
  min-width: 250px;
}

.countdown-view {
  display: grid;
  gap: 2px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 7px 12px;

  border: 1px solid var(--countdown-color);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      var(--countdown-soft),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 0 0 1px var(--countdown-soft),
    0 4px 14px rgba(15, 23, 42, 0.15);
}

.countdown-timer-cell[data-countdown-state="safe"] {
  --countdown-color: #22c55e;
  --countdown-soft: rgba(34, 197, 94, 0.14);
}

.countdown-timer-cell[data-countdown-state="warning"] {
  --countdown-color: #f59e0b;
  --countdown-soft: rgba(245, 158, 11, 0.15);
}

.countdown-timer-cell[data-countdown-state="danger"],
.countdown-timer-cell[data-countdown-state="expired"] {
  --countdown-color: #ef4444;
  --countdown-soft: rgba(239, 68, 68, 0.15);
}

.countdown-text {
  overflow: hidden;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.countdown-live {
  color: var(--countdown-color);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.countdown-target {
  overflow: hidden;
  color: rgba(226, 232, 240, 0.62);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.countdown-editor {
  display: none;
  gap: 7px;
}

body.mo-edit-mode .countdown-view {
  margin-bottom: 7px;
}

body.mo-edit-mode .countdown-editor {
  display: grid;
}

.countdown-editor .cell-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

.countdown-date-input {
  color-scheme: dark;
}

/* Compact countdown timer */
.countdown-target {
  display: none !important;
}

.countdown-view {
  min-height: 38px !important;
  padding: 4px 10px !important;
  gap: 0 !important;
  align-content: center !important;
  border-radius: 11px !important;
}

.countdown-text {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.countdown-live {
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.mo-edit-mode .countdown-view {
  margin-bottom: 5px !important;
}