/**
 * TEKAN ADS — Campaign Workflow (multi-section, guided)
 * UI-only redesign. No backend / API changes.
 * Scoped to #page-messaging so legacy pages are untouched.
 */

#page-messaging .camp-workflow-root {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* ─────────────────────────  PROGRESS BAR  ───────────────────────── */
.camp-progress {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: color-mix(in srgb, var(--ds-color-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ds-shadow-sm);
}

.camp-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-full);
  background: transparent;
  color: var(--ds-color-text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ds-transition-colors);
  white-space: nowrap;
}
.camp-progress__step:hover { color: var(--ds-color-text-secondary); background: var(--ds-color-hover); }

.camp-progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary-muted);
  border: 1px solid var(--ds-color-border-strong);
  font-size: 0.78rem;
  line-height: 1;
}
.camp-progress__dot i { width: 13px; height: 13px; }

.camp-progress__label { display: inline-block; }

.camp-progress__line {
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--ds-color-border-strong);
  opacity: 0.6;
}

.camp-progress__step.is-current {
  color: #fff;
  background: var(--ds-color-primary-muted);
  border-color: var(--ds-color-primary-border);
  box-shadow: var(--ds-shadow-glow-focus);
}
.camp-progress__step.is-current .camp-progress__dot {
  background: var(--ds-color-primary);
  border-color: var(--ds-color-primary);
  color: #fff;
}
.camp-progress__step.is-done { color: var(--ds-color-success); }
.camp-progress__step.is-done .camp-progress__dot {
  background: var(--ds-color-success-muted);
  border-color: var(--ds-color-success-border);
  color: var(--ds-color-success);
}

/* ─────────────────────────  LAYOUT  ───────────────────────── */
.camp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--ds-space-2);
  align-items: start;
}
.camp-sections { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }

@media (max-width: 1080px) {
  .camp-layout { grid-template-columns: 1fr; }
  .camp-summary { order: -1; }
}

/* ─────────────────────────  ACCORDION SECTION  ───────────────────────── */
.camp-section {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-surface);
  overflow: hidden;
  transition: border-color var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-section.is-open { border-color: var(--ds-color-primary-border); box-shadow: var(--ds-shadow-glow-accent); }

.camp-section__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  color: var(--ds-color-text);
  transition: var(--ds-transition-colors);
}
.camp-section__head:hover { background: var(--ds-color-hover); }

.camp-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-button);
  background: var(--ds-color-primary-muted);
  color: var(--ds-color-primary-hover);
  border: 1px solid var(--ds-color-primary-border);
}
.camp-section__icon i { width: 19px; height: 19px; }

.camp-section__titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.camp-section__title { font-size: 1rem; font-weight: 700; }
.camp-section__desc { font-size: 0.82rem; color: var(--ds-color-text-muted); }

.camp-section__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-text-disabled);
  flex: 0 0 auto;
}
.camp-section__status i { width: 20px; height: 20px; }
.camp-section.is-complete .camp-section__status { color: var(--ds-color-success); }

.camp-section__chev {
  width: 18px; height: 18px;
  color: var(--ds-color-text-muted);
  flex: 0 0 auto;
  transition: transform var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-section.is-open .camp-section__chev { transform: rotate(180deg); }

.camp-section__body {
  display: none;
  padding: 0 1.25rem 1.35rem;
  border-top: 1px solid var(--ds-color-divider);
}
.camp-section.is-open .camp-section__body { display: block; padding-top: 1.1rem; }

/* Inner cards — replace legacy heavy bordered panels */
.camp-card {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-bg-subtle);
  padding: 1.1rem 1.15rem;
}
.camp-card + .camp-card { margin-top: var(--ds-space-1); }
.camp-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ds-color-text);
}
.camp-card__title i { width: 17px; height: 17px; color: var(--ds-color-primary-hover); }
.camp-card__hint { margin: 0.6rem 0 0; color: var(--ds-color-text-muted); font-size: 0.82rem; line-height: 1.7; }

/* Neutralize legacy nested .panel look inside the workflow */
#page-messaging .camp-section__body .panel {
  border: 1px solid var(--ds-color-border) !important;
  background: var(--ds-color-bg-subtle) !important;
  border-radius: var(--ds-radius-input);
}

/* ─────────────────────────  SUMMARY MINI-CARD (Section 1 top)  ───────────────────────── */
.camp-mini-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.camp-mini {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
}
.camp-mini__label { font-size: 0.72rem; color: var(--ds-color-text-muted); }
.camp-mini__value { margin-top: 4px; font-size: 0.98rem; font-weight: 700; color: var(--ds-color-text); }

/* ─────────────────────────  SUMMARY SIDEBAR  ───────────────────────── */
.camp-summary { position: sticky; top: 74px; }
.camp-summary__card {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-surface);
  padding: 1.2rem 1.25rem;
}
.camp-summary__title {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1rem; font-size: 0.98rem; font-weight: 700;
}
.camp-summary__title i { width: 17px; height: 17px; color: var(--ds-color-primary-hover); }
.camp-summary__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ds-color-divider);
  font-size: 0.86rem;
}
.camp-summary__row:last-of-type { border-bottom: 0; }
.camp-summary__k { color: var(--ds-color-text-muted); }
.camp-summary__v { color: var(--ds-color-text); font-weight: 700; text-align: left; }
.camp-summary__v.is-accent { color: var(--ds-color-primary-hover); }

.camp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--ds-radius-full);
  font-size: 0.76rem; font-weight: 700;
}
.camp-badge.on { background: var(--ds-color-success-muted); color: var(--ds-color-success); border: 1px solid var(--ds-color-success-border); }
.camp-badge.off { background: var(--ds-color-secondary-muted); color: var(--ds-color-text-secondary); border: 1px solid var(--ds-color-border-strong); }

.camp-warnings { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.camp-warn {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border-radius: var(--ds-radius-sm);
  font-size: 0.8rem; line-height: 1.6;
  background: var(--ds-color-warning-muted); color: var(--ds-color-warning);
  border: 1px solid var(--ds-color-warning-border);
}
.camp-warn.is-error { background: var(--ds-color-danger-muted); color: var(--ds-color-danger); border-color: var(--ds-color-danger-border); }
.camp-warn.is-ok { background: var(--ds-color-success-muted); color: var(--ds-color-success); border-color: var(--ds-color-success-border); }
.camp-warn i { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* ─────────────────────────  BULK CONSENT WARNING  ───────────────────────── */
.camp-consent-panel {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--ds-radius-card);
  border: 1px solid var(--ds-color-warning-border);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.03));
}
.camp-consent-panel__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.camp-consent-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-warning-muted);
  color: var(--ds-color-warning);
  border: 1px solid var(--ds-color-warning-border);
  flex: 0 0 auto;
}
.camp-consent-panel__icon i { width: 1.2rem; height: 1.2rem; }
.camp-consent-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ds-color-warning);
}
.camp-consent-panel__lead {
  margin: 0.35rem 0 0;
  color: var(--ds-color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.7;
}
.camp-consent-panel__list {
  margin: 0 0 1rem;
  padding-inline-start: 1.2rem;
  color: var(--ds-color-text);
  font-size: 0.86rem;
  line-height: 1.85;
}
.camp-consent-panel__list li + li { margin-top: 0.45rem; }
.camp-consent-panel__check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.75rem 0.85rem;
  border-radius: var(--ds-radius-input);
  border: 1px solid var(--ds-color-border-strong);
  background: var(--ds-color-surface-raised);
  font-size: 0.88rem;
  line-height: 1.7;
}
.camp-consent-panel__check input {
  width: auto;
  margin-top: 0.2rem;
  flex: 0 0 auto;
}
.camp-consent-panel__actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}
#bulk-consent-locked-area.is-locked {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.15);
}

/* ─────────────────────────  MESSAGE BUILDER counters  ───────────────────────── */
.camp-editor-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem;
}
.camp-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary-muted);
  border: 1px solid var(--ds-color-border);
  color: var(--ds-color-text-secondary);
  font-size: 0.78rem; font-weight: 600;
}
.camp-meta-chip i { width: 13px; height: 13px; color: var(--ds-color-primary-hover); }
.camp-meta-chip strong { color: var(--ds-color-text); }

/* ─────────────────────────  REVIEW & LAUNCH  ───────────────────────── */
.camp-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.camp-review-cell {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
}
.camp-review-cell__label { font-size: 0.74rem; color: var(--ds-color-text-muted); display: flex; align-items: center; gap: 5px; }
.camp-review-cell__label i { width: 13px; height: 13px; }
.camp-review-cell__value { margin-top: 5px; font-size: 1rem; font-weight: 700; color: var(--ds-color-text); }

.camp-launch-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.camp-launch-actions .camp-big-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.95rem 1rem;
  border-radius: var(--ds-radius-button);
  font-size: 0.95rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
  font-family: inherit;
  transition: var(--ds-transition-colors);
}
.camp-big-btn i { width: 17px; height: 17px; }
.camp-big-btn.primary { background: var(--ds-color-primary); color: #fff; }
.camp-big-btn.primary:hover { background: var(--ds-color-primary-hover); }
.camp-big-btn.success { background: var(--ds-color-success); color: #06231a; }
.camp-big-btn.success:hover { filter: brightness(1.08); }
.camp-big-btn.ghost { background: var(--ds-color-secondary-muted); color: var(--ds-color-text); border-color: var(--ds-color-border-strong); }
.camp-big-btn.ghost:hover { background: var(--ds-color-card-hover); }

.camp-legacy-controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--ds-color-divider);
}

/* ─────────────────────────  COLLAPSIBLE LOG  ───────────────────────── */
.camp-log-card {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-surface);
  overflow: hidden;
}
.camp-log-head {
  display: flex; align-items: center; gap: 0.7rem;
  width: 100%; padding: 1rem 1.25rem;
  background: transparent; border: 0; cursor: pointer;
  font-family: inherit; color: var(--ds-color-text); text-align: right;
  transition: var(--ds-transition-colors);
}
.camp-log-head:hover { background: var(--ds-color-hover); }
.camp-log-head i.camp-log-icn { width: 18px; height: 18px; color: var(--ds-color-primary-hover); }
.camp-log-head .camp-log-title { flex: 1; font-weight: 700; font-size: 0.98rem; }
.camp-log-head .camp-section__chev { margin-inline-start: auto; }
.camp-log-body { display: none; padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--ds-color-divider); }
.camp-log-card.is-open .camp-log-body { display: block; padding-top: 1rem; }
.camp-log-card.is-open .camp-log-head .camp-section__chev { transform: rotate(180deg); }

/* ═════════════════════  SCHEDULING · compact settings panel  ═════════════════════ */

/* Unified, editable-looking inputs across the Schedule section */
#camp-sec-5 input[type="number"],
#camp-sec-5 input[type="time"],
#camp-sec-5 input[type="date"],
#camp-sec-5 select {
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  padding: 0 14px;
  color: var(--ds-color-text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--ds-duration-normal) var(--ds-ease-default), box-shadow var(--ds-duration-normal) var(--ds-ease-default);
}
#camp-sec-5 input[type="number"]:hover,
#camp-sec-5 input[type="time"]:hover,
#camp-sec-5 input[type="date"]:hover,
#camp-sec-5 select:hover { border-color: var(--ds-color-primary-border); }
#camp-sec-5 input[type="number"]:focus,
#camp-sec-5 input[type="time"]:focus,
#camp-sec-5 input[type="date"]:focus,
#camp-sec-5 select:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-glow-focus);
}
#camp-sec-5 input[type="number"] { text-align: center; }
#camp-sec-5 input[type="time"],
#camp-sec-5 input[type="date"] { color-scheme: dark; }

/* Select → chevron */
#camp-sec-5 select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2381889A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-start: 38px;
}

/* Responsive settings grid: 3 → 2 → 1 */
.camp-sched-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (max-width: 900px) { .camp-sched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .camp-sched-grid { grid-template-columns: 1fr; } }

.camp-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.camp-field__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; color: var(--ds-color-text-secondary);
}
.camp-field__label i { width: 14px; height: 14px; color: var(--ds-color-primary-hover); }

/* Time input with leading clock icon */
.camp-input-wrap { position: relative; }
.camp-input-wrap .camp-input-icn {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-start: 12px; width: 16px; height: 16px;
  color: var(--ds-color-text-muted); pointer-events: none;
}
#camp-sec-5 .camp-input-wrap input.has-icn { padding-inline-start: 38px; }

/* Local-time option card (occupies one grid cell) */
.camp-optcard {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  background: var(--ds-color-surface-raised);
  align-self: end;
}
.camp-optcard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--ds-radius-sm);
  background: var(--ds-color-primary-muted); color: var(--ds-color-primary-hover);
  border: 1px solid var(--ds-color-primary-border);
}
.camp-optcard__icon i { width: 17px; height: 17px; }
.camp-optcard__body { flex: 1; min-width: 0; }
.camp-optcard__title { font-size: 0.85rem; font-weight: 700; color: var(--ds-color-text); }
.camp-optcard__desc { font-size: 0.74rem; color: var(--ds-color-text-muted); line-height: 1.5; margin-top: 2px; }

/* Modern toggle switch */
.camp-toggle { position: relative; flex: 0 0 auto; display: inline-flex; cursor: pointer; }
.camp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.camp-toggle__track {
  display: inline-block; width: 42px; height: 24px; border-radius: var(--ds-radius-full);
  background: var(--ds-color-secondary); border: 1px solid var(--ds-color-border-strong);
  transition: background var(--ds-duration-normal) var(--ds-ease-default), border-color var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-toggle__thumb {
  position: absolute; top: 50%; inset-inline-start: 3px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: var(--ds-radius-full);
  background: #fff; box-shadow: var(--ds-shadow-sm);
  transition: inset-inline-start var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-toggle input:checked + .camp-toggle__track { background: var(--ds-color-primary); border-color: var(--ds-color-primary); }
.camp-toggle input:checked + .camp-toggle__track .camp-toggle__thumb { inset-inline-start: 21px; }
.camp-toggle input:focus-visible + .camp-toggle__track { box-shadow: var(--ds-shadow-glow-focus); }

.camp-sched-note { margin: 0.85rem 0 0; color: var(--ds-color-text-muted); font-size: 0.8rem; line-height: 1.7; }

/* Execution summary card */
.camp-exec {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ds-color-primary-border);
  border-radius: var(--ds-radius-input);
  background: linear-gradient(180deg, var(--ds-color-primary-muted), transparent), var(--ds-color-surface-raised);
}
@media (max-width: 700px) { .camp-exec { grid-template-columns: 1fr; } }

.camp-exec__main {
  display: flex; flex-direction: column; justify-content: center;
  padding-inline-end: 1rem;
  border-inline-end: 1px solid var(--ds-color-divider);
}
@media (max-width: 700px) {
  .camp-exec__main { border-inline-end: 0; border-bottom: 1px solid var(--ds-color-divider); padding: 0 0 0.9rem; }
}
.camp-exec__label { font-size: 0.8rem; color: var(--ds-color-text-muted); }
.camp-exec__big {
  font-size: 2.3rem; font-weight: 800; line-height: 1.1; margin-top: 4px;
  color: var(--ds-color-primary-hover);
}
.camp-exec__warn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 5px 10px; border-radius: var(--ds-radius-full);
  background: var(--ds-color-warning-muted); color: var(--ds-color-warning);
  border: 1px solid var(--ds-color-warning-border);
  font-size: 0.78rem; font-weight: 700; align-self: flex-start;
}
.camp-exec__warn i { width: 14px; height: 14px; }

.camp-exec__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem 1rem;
  align-content: center;
}
.camp-exec__stat { display: flex; flex-direction: column; gap: 3px; }
.camp-exec__k { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--ds-color-text-muted); }
.camp-exec__k i { width: 13px; height: 13px; }
.camp-exec__v { font-size: 0.95rem; font-weight: 700; color: var(--ds-color-text); }

/* ═══════════════════════════════════════════════════════════════════════
   FULL-PAGE CONSISTENCY — shared components (inputs, cards, layouts)
   Applies the Scheduling design language to every campaign section.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Unified form controls across the whole workflow ── */
.camp-workflow-root input[type="text"],
.camp-workflow-root input[type="number"],
.camp-workflow-root input[type="time"],
.camp-workflow-root input[type="date"],
.camp-workflow-root input[type="tel"],
.camp-workflow-root input[type="search"],
.camp-workflow-root select {
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  padding: 0 14px;
  color: var(--ds-color-text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--ds-duration-normal) var(--ds-ease-default),
              box-shadow var(--ds-duration-normal) var(--ds-ease-default),
              background var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-workflow-root textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-color-card);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  padding: 12px 14px;
  color: var(--ds-color-text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.8;
  transition: border-color var(--ds-duration-normal) var(--ds-ease-default),
              box-shadow var(--ds-duration-normal) var(--ds-ease-default),
              background var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-workflow-root input:hover,
.camp-workflow-root select:hover,
.camp-workflow-root textarea:hover { border-color: var(--ds-color-primary-border); }
.camp-workflow-root input:focus,
.camp-workflow-root select:focus,
.camp-workflow-root textarea:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-glow-focus);
  background: var(--ds-color-surface-raised);
}
.camp-workflow-root input:disabled,
.camp-workflow-root select:disabled,
.camp-workflow-root textarea:disabled { opacity: var(--ds-opacity-disabled); cursor: not-allowed; }
.camp-workflow-root input[type="number"] { text-align: center; }
.camp-workflow-root input[type="time"],
.camp-workflow-root input[type="date"] { color-scheme: dark; }
.camp-workflow-root select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2381889A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-start: 38px;
}
.camp-workflow-root label { color: var(--ds-color-text-secondary); font-size: 0.85rem; }

/* File input */
.camp-workflow-root input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ds-color-text-secondary);
  background: var(--ds-color-card);
  border: 1px dashed var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  padding: 10px 12px;
  cursor: pointer;
}
.camp-workflow-root input[type="file"]::file-selector-button {
  font-family: inherit;
  margin-inline-end: 10px;
  padding: 7px 12px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-color-primary-border);
  background: var(--ds-color-primary-muted);
  color: var(--ds-color-primary-hover);
  cursor: pointer;
}

/* Channel/mode pills consistency */
.camp-workflow-root .recipient-mode-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.camp-workflow-root .mode-option {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; margin: 0;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-button);
  background: var(--ds-color-card);
  color: var(--ds-color-text-secondary);
  font-size: 0.88rem; cursor: pointer;
  transition: var(--ds-transition-colors);
}
.camp-workflow-root .mode-option:hover { border-color: var(--ds-color-primary-border); color: var(--ds-color-text); }
.camp-workflow-root .mode-option:has(input:checked) {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-muted);
  color: #fff;
}
.camp-workflow-root .country-chip {
  border-radius: var(--ds-radius-button);
  border-color: var(--ds-color-border-strong);
}

/* ── Layout helpers ── */
.camp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-1); align-items: start; }
@media (max-width: 920px) { .camp-two { grid-template-columns: 1fr; } }

.camp-three { display: grid; grid-template-columns: 230px minmax(320px, 1fr) 290px; gap: var(--ds-space-1); align-items: start; }
@media (max-width: 1280px) { .camp-three { grid-template-columns: 1fr; } }

.camp-subtitle { margin: 0 0 0.9rem; color: var(--ds-color-text-muted); font-size: 0.86rem; line-height: 1.6; }

/* ── Variable chips bar ── */
.camp-varbar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.camp-workflow-root .placeholder-btn-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.camp-workflow-root .placeholder-btn-row button,
.camp-workflow-root .placeholder-btn-row .btn {
  padding: 6px 12px;
  border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-color-border-strong);
  background: var(--ds-color-secondary-muted);
  color: var(--ds-color-text-secondary);
  font-size: 0.8rem; font-weight: 600;
}
.camp-workflow-root .placeholder-btn-row button:hover,
.camp-workflow-root .placeholder-btn-row .btn:hover {
  border-color: var(--ds-color-primary-border);
  background: var(--ds-color-primary-muted);
  color: var(--ds-color-primary-hover);
}

/* ── Grouped action toolbar ── */
.camp-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.85rem; margin-top: 0.85rem;
  border-top: 1px solid var(--ds-color-divider);
}

/* ── Phone mockup preview ── */
.camp-phone {
  width: 100%; max-width: 280px; margin: 0 auto;
  background: #0b141a;
  border: 8px solid #1f2c33;
  border-radius: 26px;
  box-shadow: var(--ds-shadow-lg);
  overflow: hidden;
}
.camp-phone__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #1f2c33; color: #e9edef;
  font-size: 0.82rem; font-weight: 600;
}
.camp-phone__bar .camp-phone__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ds-color-primary); display: inline-flex;
  align-items: center; justify-content: center; color: #fff;
}
.camp-phone__avatar i { width: 15px; height: 15px; }
.camp-phone__screen {
  min-height: 190px; max-height: 340px; overflow: auto;
  padding: 14px 12px;
  background-color: #0b141a;
  background-image: linear-gradient(rgba(11,20,26,0.94), rgba(11,20,26,0.94));
}
.camp-bubble {
  max-width: 88%;
  background: #005c4b; color: #e9edef;
  padding: 8px 10px; border-radius: 10px 10px 10px 4px;
  font-size: 0.85rem; line-height: 1.7; white-space: pre-wrap;
  word-break: break-word; box-shadow: var(--ds-shadow-xs);
}
.camp-bubble img { max-width: 100%; border-radius: 8px; margin-bottom: 6px; display: block; }
.camp-bubble__time { display: block; text-align: left; font-size: 0.65rem; color: rgba(233,237,239,0.6); margin-top: 4px; }
.camp-bubble__empty { color: var(--ds-color-text-muted); font-style: italic; }

/* ── Recipient source selection cards ── */
.camp-src-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
}
.camp-src-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
  cursor: pointer;
  transition: var(--ds-transition-colors), box-shadow var(--ds-duration-normal) var(--ds-ease-default);
}
.camp-src-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.camp-src-card:hover { border-color: var(--ds-color-primary-border); }
.camp-src-card:has(input:checked) {
  border-color: var(--ds-color-primary);
  background: var(--ds-color-primary-muted);
  box-shadow: var(--ds-shadow-glow-focus);
}
.camp-src-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--ds-radius-sm);
  background: var(--ds-color-card); color: var(--ds-color-primary-hover);
  border: 1px solid var(--ds-color-border-strong);
}
.camp-src-card:has(input:checked) .camp-src-card__icon { background: var(--ds-color-primary); color: #fff; border-color: var(--ds-color-primary); }
.camp-src-card__icon i { width: 18px; height: 18px; }
.camp-src-card__body { min-width: 0; display: flex; flex-direction: column; }
.camp-src-card__title { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ds-color-text); line-height: 1.4; }
.camp-src-card__desc { display: block; font-size: 0.74rem; color: var(--ds-color-text-muted); line-height: 1.5; margin-top: 3px; }

.camp-recip-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--ds-space-1); align-items: start; margin-top: var(--ds-space-1); }
@media (max-width: 920px) { .camp-recip-layout { grid-template-columns: 1fr; } }

/* Live stats panel (recipients) */
.camp-livestats { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-input); background: var(--ds-color-bg-subtle); padding: 1rem 1.1rem; }
.camp-livestats__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ds-color-divider); font-size: 0.84rem; }
.camp-livestats__row:last-child { border-bottom: 0; }
.camp-livestats__k { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-color-text-muted); }
.camp-livestats__k i { width: 14px; height: 14px; }
.camp-livestats__v { font-weight: 700; color: var(--ds-color-text); }
.camp-livestats__v.is-accent { color: var(--ds-color-primary-hover); }

/* ── KPI cards (delivery log) ── */
.camp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
  margin-bottom: var(--ds-space-1);
}
.camp-kpi {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
}
.camp-kpi__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--ds-color-text-muted); }
.camp-kpi__label i { width: 14px; height: 14px; }
.camp-kpi__value { margin-top: 6px; font-size: 1.5rem; font-weight: 800; color: var(--ds-color-text); }
.camp-kpi.is-sent .camp-kpi__value { color: var(--ds-color-success); }
.camp-kpi.is-queued .camp-kpi__value { color: var(--ds-color-info); }
.camp-kpi.is-failed .camp-kpi__value { color: var(--ds-color-danger); }
.camp-kpi.is-black .camp-kpi__value { color: var(--ds-color-warning); }
.camp-kpi.is-invalid .camp-kpi__value { color: var(--ds-color-text-secondary); }

/* Log filter bar */
.camp-log-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.85rem; }
.camp-log-filter select { width: auto; min-width: 150px; }
.camp-log-filter .camp-log-search { max-width: 220px; }

/* Status badges */
.camp-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--ds-radius-full);
  font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.camp-status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.camp-status-badge.st-sent { background: var(--ds-color-success-muted); color: var(--ds-color-success); border: 1px solid var(--ds-color-success-border); }
.camp-status-badge.st-queued { background: var(--ds-color-info-muted); color: var(--ds-color-info); border: 1px solid var(--ds-color-info-border); }
.camp-status-badge.st-failed { background: var(--ds-color-danger-muted); color: var(--ds-color-danger); border: 1px solid var(--ds-color-danger-border); }
.camp-status-badge.st-neutral { background: var(--ds-color-secondary-muted); color: var(--ds-color-text-secondary); border: 1px solid var(--ds-color-border-strong); }

/* ── Campaign overview cards (replaces list table) ── */
.camp-ov-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--ds-space-1);
}
.camp-ov-head__titles h2 { margin: 0; font-size: var(--ds-text-h2-size, 1.2rem); font-weight: 700; color: var(--ds-color-text); }
.camp-ov-head__sub { margin: 4px 0 0; color: var(--ds-color-text-muted); font-size: 0.88rem; }
.camp-ov-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.camp-ov-limit { color: var(--ds-color-text-muted); font-size: 0.85rem; }

.camp-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}
.camp-ov-card {
  text-align: right;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
  padding: 1rem 1.05rem;
  cursor: pointer;
  transition: var(--ds-transition-colors), box-shadow var(--ds-duration-normal) var(--ds-ease-default);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.camp-ov-card:hover { border-color: var(--ds-color-primary-border); background: var(--ds-color-card-hover); }
.camp-ov-card.is-active { border-color: var(--ds-color-primary); box-shadow: var(--ds-shadow-glow-accent); }
.camp-ov-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.camp-ov-card__name { font-size: 1rem; font-weight: 700; color: var(--ds-color-text); word-break: break-word; }
.camp-ov-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--ds-color-text-muted); }
.camp-ov-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.camp-ov-card__meta i { width: 13px; height: 13px; }
.camp-ov-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.camp-ov-empty { padding: 1.5rem; text-align: center; color: var(--ds-color-text-muted); border: 1px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius-input); }

/* ── Campaign version-update option cards (resend policy) ── */
.camp-vopts { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
.camp-vopt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 24px;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
  cursor: pointer;
  transition: background 150ms var(--ds-ease-default),
              border-color 150ms var(--ds-ease-default),
              box-shadow 150ms var(--ds-ease-default);
}
.camp-vopt:hover { background: var(--ds-color-card-hover); border-color: var(--ds-color-primary-border); }
.camp-vopt input { position: absolute; opacity: 0; width: 0; height: 0; }

.camp-vradio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;               /* aligns radio center with the title's first line */
  border-radius: 50%;
  border: 2px solid var(--ds-color-border-strong);
  background: transparent;
  position: relative;
  transition: border-color 150ms var(--ds-ease-default), background 150ms var(--ds-ease-default);
}
.camp-vradio::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-color-primary);
  transform: scale(0);
  transition: transform 150ms var(--ds-ease-default);
}
.camp-vopt:has(input:checked) {
  border-color: var(--ds-color-primary);
  background: rgba(139, 92, 246, 0.07);
}
.camp-vopt:has(input:checked) .camp-vradio { border-color: var(--ds-color-primary); }
.camp-vopt:has(input:checked) .camp-vradio::after { transform: scale(1); }
.camp-vopt input:focus-visible + .camp-vradio { box-shadow: var(--ds-shadow-glow-focus); }

.camp-vopt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.camp-vopt__title { font-size: 16px; font-weight: 600; color: var(--ds-color-text); line-height: 1.3; }
.camp-vopt__desc { font-size: 13px; color: var(--ds-color-text-secondary); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   Future Message page (planner-style, reuses camp-* components)
   ══════════════════════════════════════════════════════════════ */
.fm-page { display: flex; flex-direction: column; gap: var(--ds-space-2); width: 100%; }
.fm-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fm-page__title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 800; color: var(--ds-color-text); }
.fm-page__title i { width: 22px; height: 22px; color: var(--ds-color-primary-hover); }
.fm-page__sub { margin: 6px 0 0; color: var(--ds-color-text-muted); font-size: 0.9rem; }
.fm-limit-badge {
  padding: 6px 12px; border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-muted); border: 1px solid var(--ds-color-primary-border);
  color: var(--ds-color-primary-hover); font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}

.fm-top, .fm-lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-2); align-items: start; }
@media (max-width: 920px) { .fm-top, .fm-lists { grid-template-columns: 1fr; } }
.fm-full { grid-column: 1 / -1; }

/* Recipient preview */
.fm-preview {
  display: flex; gap: 0.8rem; padding: 1rem;
  border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-input);
  background: var(--ds-color-surface-raised);
}
.fm-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: var(--ds-color-primary); font-size: 1.05rem;
}
.fm-preview__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fm-preview__name { font-weight: 700; color: var(--ds-color-text); }
.fm-preview__meta { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ds-color-text-muted); }
.fm-preview__meta i { width: 14px; height: 14px; }
.fm-preview-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; min-height: 128px; padding: 1rem;
  border: 1px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius-input);
  color: var(--ds-color-text-muted); font-size: 0.85rem;
}
.fm-preview-empty i { width: 26px; height: 26px; opacity: 0.6; }

/* Schedule hero + timezone */
.fm-tz {
  height: 44px; display: flex; align-items: center; padding: 0 14px;
  border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-button);
  background: var(--ds-color-bg-subtle); color: var(--ds-color-text-secondary); font-size: 0.85rem;
}
.fm-sched-hero {
  display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--ds-color-primary-border); border-radius: var(--ds-radius-input);
  background: linear-gradient(180deg, var(--ds-color-primary-muted), transparent), var(--ds-color-surface-raised);
}
.fm-sched-hero__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--ds-radius-button);
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-color-primary-muted); border: 1px solid var(--ds-color-primary-border); color: var(--ds-color-primary-hover);
}
.fm-sched-hero__icon i { width: 24px; height: 24px; }
.fm-sched-hero__main { flex: 1; min-width: 0; }
.fm-sched-hero__weekday { font-size: 0.8rem; color: var(--ds-color-text-muted); }
.fm-sched-hero__date { font-size: 1.25rem; font-weight: 800; color: var(--ds-color-text); }
.fm-sched-hero__time { font-size: 1rem; font-weight: 700; color: var(--ds-color-primary-hover); margin-top: 2px; }
.fm-sched-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: left; }
.fm-chip { padding: 4px 12px; border-radius: var(--ds-radius-full); background: var(--ds-color-primary); color: #fff; font-size: 0.8rem; font-weight: 700; }
.fm-chip.is-past { background: var(--ds-color-danger); }
.fm-countdown { font-size: 0.76rem; color: var(--ds-color-text-muted); }

/* Emoji / toolbar */
.fm-emojibar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; align-items: center; }
.fm-emoji-group { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.fm-emoji-btn {
  border: 1px solid var(--ds-color-border-strong); background: var(--ds-color-card);
  border-radius: var(--ds-radius-sm); width: 34px; height: 34px; font-size: 1.05rem; cursor: pointer; line-height: 1;
  transition: var(--ds-transition-colors);
}
.fm-emoji-btn:hover { background: var(--ds-color-card-hover); }

/* Pending cards (collapsible) */
.fm-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.fm-card { border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-input); background: var(--ds-color-surface-raised); overflow: hidden; }
.fm-card > summary { list-style: none; cursor: pointer; padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.75rem; }
.fm-card > summary::-webkit-details-marker { display: none; }
.fm-card[open] > summary .camp-section__chev { transform: rotate(180deg); }
.fm-card__ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-color-primary-muted); color: var(--ds-color-primary-hover); border: 1px solid var(--ds-color-primary-border);
}
.fm-card__ico i { width: 18px; height: 18px; }
.fm-card__head { flex: 1; min-width: 0; }
.fm-card__title { font-weight: 700; color: var(--ds-color-text); font-size: 0.92rem; }
.fm-card__sub { font-size: 0.78rem; color: var(--ds-color-text-muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; }
.fm-card__sub span:not(.camp-status-badge) { display: inline-flex; align-items: center; gap: 5px; }
.fm-card__sub i { width: 12px; height: 12px; }
.fm-card__body { padding: 0 1rem 1rem; border-top: 1px solid var(--ds-color-divider); }
.fm-card__msg { white-space: pre-wrap; word-break: break-word; font-size: 0.86rem; line-height: 1.8; color: var(--ds-color-text-secondary); padding-top: 0.8rem; }
.fm-card__actions { margin-top: 0.8rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Sent timeline */
.fm-timeline { display: flex; flex-direction: column; }
.fm-tl-item { position: relative; padding: 0 0 1rem 0; padding-inline-start: 2rem; }
.fm-tl-item::before { content: ""; position: absolute; inset-inline-start: 9px; top: 22px; bottom: 0; width: 2px; background: var(--ds-color-divider); }
.fm-tl-item:last-child::before { display: none; }
.fm-tl-dot {
  position: absolute; inset-inline-start: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ds-color-success-muted); border: 1px solid var(--ds-color-success-border); color: var(--ds-color-success);
}
.fm-tl-dot.is-failed { background: var(--ds-color-danger-muted); border-color: var(--ds-color-danger-border); color: var(--ds-color-danger); }
.fm-tl-dot i { width: 12px; height: 12px; }
.fm-tl-card { border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-input); background: var(--ds-color-surface-raised); padding: 0.75rem 0.9rem; }
.fm-tl-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.fm-tl-name { font-weight: 700; color: var(--ds-color-text); font-size: 0.9rem; }
.fm-tl-meta { font-size: 0.76rem; color: var(--ds-color-text-muted); display: flex; gap: 0.3rem 0.8rem; flex-wrap: wrap; margin-top: 4px; }
.fm-tl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fm-tl-meta i { width: 12px; height: 12px; }
.fm-tl-msg { font-size: 0.82rem; color: var(--ds-color-text-secondary); margin-top: 6px; line-height: 1.7; word-break: break-word; }

.fm-empty { padding: 1.5rem; text-align: center; color: var(--ds-color-text-muted); border: 1px dashed var(--ds-color-border-strong); border-radius: var(--ds-radius-input); }