/* ============================================================================
   DMB Playlists — list view + create/edit form. Drag-drop multi-upload with
   per-file progress; videos go through /api/cx/generate_signed_url. .cxm-pll-*
   prefix; tokens from cxm-tokens.css.
   ========================================================================= */

.cxm-pll-root { padding: var(--cxm-sp-4) 0; }

/* ── List header ─────────────────────────────────────────────────────── */
.cxm-pll-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-5);
}
.cxm-pll-header__title {
  font-size: var(--cxm-fs-20);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0;
}
.cxm-pll-header__sub {
  margin: 4px 0 0;
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  max-width: 60ch;
}

/* ── Loader ──────────────────────────────────────────────────────────── */
.cxm-pll-loader {
  padding: var(--cxm-sp-6) 0;
  text-align: center;
  color: var(--cxm-g70);
}
.cxm-pll-loader i { font-size: 24px; color: var(--cxm-b60); }
.cxm-pll-loader p { margin: 8px 0 0; font-size: var(--cxm-fs-12); }

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATE — stacked-card illustration + copy + CTA
   ════════════════════════════════════════════════════════════════════════ */
.cxm-pll-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px 72px;
  background: #fafbff;
  border: 2px dashed #dde3f7;
  border-radius: 16px;
}

/* Three fanned cards built with pure CSS */
.cxm-pll-zero__art {
  position: relative;
  width: 120px;
  height: 96px;
  margin-bottom: 32px;
  flex-shrink: 0;
}
.cxm-pll-zero__shard {
  position: absolute;
  border-radius: 12px;
  border: 2px solid;
}
/* Back card */
.cxm-pll-zero__shard--c {
  width: 70px;
  height: 56px;
  top: 0;
  left: 4px;
  background: #edf0ff;
  border-color: #c5cdf8;
  transform: rotate(-12deg);
  transform-origin: bottom center;
}
/* Middle card */
.cxm-pll-zero__shard--b {
  width: 74px;
  height: 58px;
  top: 12px;
  left: 16px;
  background: #e8edff;
  border-color: #b3bcf5;
  transform: rotate(-5deg);
  transform-origin: bottom center;
}
/* Front card — carries the icon */
.cxm-pll-zero__shard--a {
  width: 78px;
  height: 62px;
  top: 22px;
  left: 28px;
  background: var(--cxm-b10, #e8f0fe);
  border-color: var(--cxm-b40, #93b4f8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--cxm-b60, #4185f4);
  transform: rotate(0deg);
  box-shadow: 0 4px 16px rgba(65, 133, 244, 0.16);
}

.cxm-pll-zero__title {
  font-size: 20px;
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0 0 10px;
}
.cxm-pll-zero__desc {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g70);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 46ch;
}

/* ════════════════════════════════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════════════════════════════════ */
.cxm-pll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cxm-sp-3);
}

/* ── Card shell ──────────────────────────────────────────────────────── */
.cxm-pll-card {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.cxm-pll-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ── Hue variants (banner BG + segment colour) ───────────────────────── */
/* h0 — Indigo (default) */
.cxm-pll-card--h0 .cxm-pll-card__banner { background: #eef2ff; }
.cxm-pll-card--h0 .cxm-pll-card__seg   { background: #6366f1; }
.cxm-pll-card--h0 .cxm-pll-card__badge { background: #e0e7ff; color: #4338ca; }
.cxm-pll-card--h0 .cxm-pll-card__seg-empty { color: #6366f1; }

/* h1 — Violet */
.cxm-pll-card--h1 .cxm-pll-card__banner { background: #f5f3ff; }
.cxm-pll-card--h1 .cxm-pll-card__seg   { background: #8b5cf6; }
.cxm-pll-card--h1 .cxm-pll-card__badge { background: #ede9fe; color: #6d28d9; }
.cxm-pll-card--h1 .cxm-pll-card__seg-empty { color: #8b5cf6; }

/* h2 — Teal */
.cxm-pll-card--h2 .cxm-pll-card__banner { background: #f0fdfa; }
.cxm-pll-card--h2 .cxm-pll-card__seg   { background: #14b8a6; }
.cxm-pll-card--h2 .cxm-pll-card__badge { background: #ccfbf1; color: #0f766e; }
.cxm-pll-card--h2 .cxm-pll-card__seg-empty { color: #14b8a6; }

/* h3 — Amber */
.cxm-pll-card--h3 .cxm-pll-card__banner { background: #fffbeb; }
.cxm-pll-card--h3 .cxm-pll-card__seg   { background: #f59e0b; }
.cxm-pll-card--h3 .cxm-pll-card__badge { background: #fef3c7; color: #b45309; }
.cxm-pll-card--h3 .cxm-pll-card__seg-empty { color: #f59e0b; }

/* h4 — Rose */
.cxm-pll-card--h4 .cxm-pll-card__banner { background: #fff1f2; }
.cxm-pll-card--h4 .cxm-pll-card__seg   { background: #f43f5e; }
.cxm-pll-card--h4 .cxm-pll-card__badge { background: #ffe4e6; color: #be123c; }
.cxm-pll-card--h4 .cxm-pll-card__seg-empty { color: #f43f5e; }

/* ── Banner: segment strip + item-count badge ────────────────────────── */
.cxm-pll-card__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  gap: 8px;
  flex-shrink: 0;
}
.cxm-pll-card__segs {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.cxm-pll-card__seg {
  flex: 1;
  max-width: 36px;
  height: 8px;
  border-radius: 4px;
  min-width: 12px;
  opacity: 0.85;
}
.cxm-pll-card__seg-empty {
  font-size: 13px;
  opacity: 0.5;
  display: flex;
  align-items: center;
}
.cxm-pll-card__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Card body ───────────────────────────────────────────────────────── */
.cxm-pll-card__body {
  padding: 14px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.cxm-pll-card__name {
  margin: 0;
  font-size: var(--cxm-fs-14, 14px);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.cxm-pll-card__desc {
  margin: 0;
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cxm-pll-card__desc--muted { color: var(--cxm-g40); font-style: italic; }

/* ── Card footer ─────────────────────────────────────────────────────── */
.cxm-pll-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--cxm-g20);
  gap: var(--cxm-sp-2);
}
.cxm-pll-card__dur {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cxm-pll-card__dur i { color: var(--cxm-g50); }
.cxm-pll-card__btns {
  display: flex;
  gap: 4px;
}
.cxm-pll-card__btn {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g70);
  cursor: pointer;
  font-size: var(--cxm-fs-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cxm-pll-card__btn:hover { background: var(--cxm-g10); color: var(--cxm-b60); border-color: var(--cxm-b40); }
.cxm-pll-card__btn--del:hover { color: var(--cxm-e60, #e53e3e); border-color: var(--cxm-e60, #e53e3e); background: var(--cxm-e10, #fff5f5); }
.cxm-pll-card__btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

/* ── Form view ───────────────────────────────────────────────────────── */
.cxm-pll-form {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.cxm-pll-form__header {
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-4) var(--cxm-sp-5) var(--cxm-sp-3);
  border-bottom: 1px solid var(--cxm-g20);
}
.cxm-pll-form__back {
  appearance: none;
  width: 36px; height: 36px;
  border-radius: var(--cxm-r);
  border: 1px solid var(--cxm-g30);
  background: #fff;
  color: var(--cxm-g70);
  cursor: pointer;
  font-size: var(--cxm-fs-14);
  flex-shrink: 0;
}
.cxm-pll-form__back:hover { background: var(--cxm-g10); color: var(--cxm-g100); }
.cxm-pll-form__title { flex: 1; min-width: 0; }
.cxm-pll-form__title h4 {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  margin: 0;
}
.cxm-pll-form__title p {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
  margin: 2px 0 0;
}
.cxm-pll-form__meta {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-1) var(--cxm-sp-3);
  background: var(--cxm-g10);
  border-radius: var(--cxm-r);
  flex-shrink: 0;
}
.cxm-pll-form__meta-item { display: flex; flex-direction: column; align-items: center; }
.cxm-pll-form__meta-num {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cxm-pll-form__meta-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-600);
}
.cxm-pll-form__meta-divider {
  width: 1px; height: 22px;
  background: var(--cxm-g30);
}

/* ── Form body ───────────────────────────────────────────────────────── */
.cxm-pll-form__body {
  padding: var(--cxm-sp-4) var(--cxm-sp-5);
  flex: 1;
}

.cxm-pll-section { margin-bottom: var(--cxm-sp-5); }
.cxm-pll-section:last-child { margin-bottom: 0; }
.cxm-pll-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--cxm-sp-3);
}
.cxm-pll-section__head h5 {
  margin: 0;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cxm-pll-section__count {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  font-weight: var(--cxm-fw-500);
}

/* ── Details grid ────────────────────────────────────────────────────── */
.cxm-pll-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cxm-sp-3);
}
.cxm-pll-form-grid--no-default { grid-template-columns: 1fr 1fr; }
.cxm-pll-form-grid__field { display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 880px) {
  .cxm-pll-form-grid,
  .cxm-pll-form-grid--no-default { grid-template-columns: 1fr; }
}

/* ── Drop zone — hero state when empty, compact when items exist ────── */
.cxm-pll-drop {
  position: relative;
  border: 2px dashed var(--cxm-g40);
  border-radius: var(--cxm-r);
  background: var(--cxm-g10);
  cursor: pointer;
  transition: border-color var(--cxm-dur, 0.15s),
              background var(--cxm-dur, 0.15s),
              box-shadow var(--cxm-dur, 0.15s);
  text-align: center;
}
.cxm-pll-drop:hover {
  border-color: var(--cxm-b40);
  background: rgba(65, 133, 244, 0.04);
}
.cxm-pll-drop:focus {
  outline: 2px solid var(--cxm-b60);
  outline-offset: 2px;
}
.cxm-pll-drop--over {
  border-color: var(--cxm-b60);
  border-style: solid;
  background: rgba(65, 133, 244, 0.10);
  box-shadow: 0 0 0 4px rgba(65, 133, 244, 0.10);
}
.cxm-pll-drop--busy { opacity: 0.65; pointer-events: none; }

.cxm-pll-drop__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero state (empty) */
.cxm-pll-drop--empty { padding: var(--cxm-sp-5) var(--cxm-sp-4); }
.cxm-pll-drop__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cxm-sp-2);
}
.cxm-pll-drop__icons {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  margin-bottom: var(--cxm-sp-2);
}
.cxm-pll-drop__icon {
  font-size: 28px;
  color: var(--cxm-g50);
  transition: color var(--cxm-dur, 0.15s), transform var(--cxm-dur, 0.15s);
}
.cxm-pll-drop:hover .cxm-pll-drop__icon { color: var(--cxm-b60); }
.cxm-pll-drop__icon--up { font-size: 36px; color: var(--cxm-b60); }
.cxm-pll-drop:hover .cxm-pll-drop__icon--up { transform: translateY(-3px); }
.cxm-pll-drop--over .cxm-pll-drop__icon--up { transform: translateY(-3px); color: var(--cxm-b80); }

.cxm-pll-drop__title {
  margin: 0;
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
}
.cxm-pll-drop__sub {
  margin: 0;
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g70);
}
.cxm-pll-drop__hint {
  margin: var(--cxm-sp-1) 0 var(--cxm-sp-2);
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g60);
}

/* Compact state (items exist) */
.cxm-pll-drop--compact { padding: var(--cxm-sp-2) var(--cxm-sp-3); }
.cxm-pll-drop__compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxm-sp-2);
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g70);
}
.cxm-pll-drop__compact i { color: var(--cxm-b60); font-size: var(--cxm-fs-14); }
.cxm-pll-drop__compact strong { color: var(--cxm-b60); font-weight: var(--cxm-fw-700); }

/* ── Items list ──────────────────────────────────────────────────────── */
.cxm-pll-list {
  list-style: none;
  margin: var(--cxm-sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-2);
}
/* 7-column grid (handle · order · thumb · body · fit · duration · remove).
   Each cell is pinned to its column further down so optional cells (fit
   hidden for videos · duration hidden during upload) leave their column
   empty instead of letting grid auto-flow shift later cells leftward,
   which was wrapping the remove button to a second line in some rows. */
.cxm-pll-list__row {
  display: grid;
  grid-template-columns:
    22px                /* drag handle */
    28px                /* order pill  */
    64px                /* thumbnail   */
    minmax(0, 1fr)      /* name + meta */
    108px               /* fit pill    */
    96px                /* duration    */
    28px;               /* remove ×    */
  gap: var(--cxm-sp-2);
  align-items: center;
  padding: var(--cxm-sp-2) var(--cxm-sp-3);
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  transition: border-color var(--cxm-dur, 0.15s),
              box-shadow var(--cxm-dur, 0.15s),
              opacity var(--cxm-dur, 0.15s),
              transform var(--cxm-dur, 0.15s);
  position: relative;
}
/* Pin each cell to its column so ng-if'd optional cells (fit on videos,
   duration during upload) leave empty cells rather than collapsing the
   grid and wrapping the remove button. */
.cxm-pll-list__handle   { grid-column: 1; }
.cxm-pll-list__order    { grid-column: 2; }
.cxm-pll-list__thumb    { grid-column: 3; }
.cxm-pll-list__body     { grid-column: 4; }
.cxm-pll-list__fit      { grid-column: 5; }
.cxm-pll-list__duration { grid-column: 6; }
.cxm-pll-list__remove   { grid-column: 7; }
.cxm-pll-list__row[draggable="true"] { cursor: grab; }
.cxm-pll-list__row[draggable="true"]:active { cursor: grabbing; }
.cxm-pll-list__row:hover {
  border-color: var(--cxm-b40);
  box-shadow: 0 2px 8px rgba(65, 133, 244, 0.08);
}
.cxm-pll-list__row--uploading {
  background: linear-gradient(135deg, var(--cxm-b10), #fff);
  border-color: var(--cxm-b40);
  cursor: default !important;
}

.cxm-pll-list__row--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.cxm-pll-list__row--drop-above::before,
.cxm-pll-list__row--drop-below::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  background: var(--cxm-b60);
  border-radius: 2px;
  box-shadow: 0 0 0 4px rgba(65, 133, 244, 0.15);
  pointer-events: none;
  z-index: 2;
}
.cxm-pll-list__row--drop-above::before { top: -2px; }
.cxm-pll-list__row--drop-below::after  { bottom: -2px; }

/* ── Drag handle ─────────────────────────────────────────────────────── */
.cxm-pll-list__handle {
  width: 22px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cxm-g40);
  font-size: 14px;
  cursor: grab;
  transition: color var(--cxm-dur, 0.15s);
}
.cxm-pll-list__row:hover .cxm-pll-list__handle { color: var(--cxm-g70); }
.cxm-pll-list__handle--disabled { opacity: 0.3; cursor: default; }

.cxm-pll-list__order {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cxm-b60);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-700);
  font-variant-numeric: tabular-nums;
}
.cxm-pll-list__row--uploading .cxm-pll-list__order { background: var(--cxm-g50); }

.cxm-pll-list__thumb {
  width: 64px; height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cxm-g20, #F1F2F5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--cxm-g30);
}
.cxm-pll-list__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.cxm-pll-list__thumb-video {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2c3e50, #1a2230);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.cxm-pll-list__thumb-fallback { color: var(--cxm-g50); font-size: 18px; }

/* Clickable thumbnail — the whole 64x44 tile is a button that opens the media
   lightbox. A zoom glyph fades in on hover/focus to signal it is interactive. */
.cxm-pll-list__thumb--clickable { cursor: pointer; }
.cxm-pll-list__thumb-btn {
  display: block;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.cxm-pll-list__thumb-btn:focus {
  outline: 2px solid var(--cxm-b60, #4185F4);
  outline-offset: 1px;
}
.cxm-pll-list__thumb-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.cxm-pll-list__thumb-btn:hover .cxm-pll-list__thumb-overlay,
.cxm-pll-list__thumb-btn:focus .cxm-pll-list__thumb-overlay {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cxm-pll-list__thumb-overlay { transition: none; }
}

.cxm-pll-list__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Read-only media label — single line, ellipsis when it overflows. */
.cxm-pll-list__name {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cxm-pll-list__meta {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  min-width: 0;
}

.cxm-pll-list__type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--cxm-rf);
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  letter-spacing: 0.5px;
}
.cxm-pll-list__type-pill--image { background: var(--cxm-s10); color: var(--cxm-s70); }
.cxm-pll-list__type-pill--video { background: var(--cxm-p10); color: var(--cxm-p60); }
.cxm-pll-list__type-pill--pdf   { background: var(--cxm-g20, #F1F2F5); color: var(--cxm-g100, #040911); }
.cxm-pll-list__type-pill i { font-size: 10px; }

.cxm-pll-list__progress {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-1);
  flex: 1;
  min-width: 0;
  position: relative;
  height: 8px;
  background: var(--cxm-g20);
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
}
.cxm-pll-list__progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cxm-b60), var(--cxm-b80));
  border-radius: 4px;
  transition: width 0.2s ease;
}
.cxm-pll-list__progress-label {
  position: absolute;
  right: 4px;
  top: -16px;
  font-size: 10px;
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-b80);
  font-variant-numeric: tabular-nums;
}

/* Duration pill — same height (30px) + visual weight as the fit pill so
   they form one paired cluster on the right of each row. Leading clock/
   repeat icon mirrors the fit pill's crop icon for instant identity. */
.cxm-pll-list__duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  padding: 0 8px;
  min-width: 0;
  transition: border-color 120ms, box-shadow 120ms;
}
.cxm-pll-list__duration-icon {
  font-size: 11px;
  color: var(--cxm-g70);
  flex: 0 0 auto;
}

/* Per-item object-fit selector (image rows). Leading crop icon gives the
   pill an instant identity so admins scanning the playlist can read each
   row's controls at a glance. Custom SVG caret + appearance:none so the
   <select> looks identical across Chrome/Firefox/Safari. Height locked to
   match the duration pill so the row reads as a balanced control cluster. */
.cxm-pll-list__fit {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 0 0 8px;
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  overflow: hidden;
  min-width: 0;
  transition: border-color 120ms, box-shadow 120ms;
}
.cxm-pll-list__fit:hover { border-color: var(--cxm-b40); }
.cxm-pll-list__fit:focus-within {
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18);
}
.cxm-pll-list__fit-icon {
  font-size: 11px;
  color: var(--cxm-g70);
  margin-right: 4px;
  flex: 0 0 auto;
}
.cxm-pll-list__fit-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%237F8C8D' d='M0 0l4 5 4-5z'/></svg>")
    no-repeat right 10px center / 8px 5px;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g100);
  cursor: pointer;
  padding: 0 22px 0 4px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cxm-pll-list__duration:hover { border-color: var(--cxm-b40); }
.cxm-pll-list__duration:focus-within { border-color: var(--cxm-b60); box-shadow: 0 0 0 2px rgba(65, 133, 244, 0.18); }
.cxm-pll-list__duration-input {
  border: 0;
  outline: 0;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  background: transparent;
  padding: 0;
  text-align: center;
  -moz-appearance: textfield;
}
.cxm-pll-list__duration-input::-webkit-outer-spin-button,
.cxm-pll-list__duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.cxm-pll-list__duration-suffix {
  color: var(--cxm-g70);
  font-size: var(--cxm-fs-11);
  font-weight: var(--cxm-fw-600);
  white-space: nowrap;
  flex: 0 0 auto;
}

.cxm-pll-list__remove {
  appearance: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cxm-g60);
  cursor: pointer;
  font-size: var(--cxm-fs-12);
}
.cxm-pll-list__remove:hover:not([disabled]) { background: var(--cxm-e10); color: var(--cxm-e60); }
.cxm-pll-list__remove[disabled] { opacity: 0.35; cursor: default; }

/* ── Sticky footer ───────────────────────────────────────────────────── */
.cxm-pll-form__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--cxm-sp-2);
  padding: var(--cxm-sp-3) var(--cxm-sp-5);
  border-top: 1px solid var(--cxm-g20);
  background: var(--cxm-g10);
  border-radius: 0 0 var(--cxm-rl) var(--cxm-rl);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cxm-pll-grid { grid-template-columns: 1fr; }
  .cxm-pll-form__header { flex-direction: column; }
  .cxm-pll-form__meta { align-self: stretch; justify-content: center; }
  .cxm-pll-list__row {
    grid-template-columns: 22px 28px 64px 1fr;
    grid-template-rows: auto auto;
  }
  .cxm-pll-list__duration,
  .cxm-pll-list__remove { grid-column: 1 / -1; }
  .cxm-pll-list__remove { justify-self: flex-end; }
  .cxm-pll-drop__icons { gap: var(--cxm-sp-2); }
  .cxm-pll-zero { padding: 40px 16px 48px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Media preview lightbox (cxm-plprev) — opened from a playlist thumbnail.
   Light chrome (header + thumbnail strip) framing a dark media stage; reuses
   the ui-bootstrap modal shell via windowClass "cxm-plprev-window".
   ═════════════════════════════════════════════════════════════════════════ */
.cxm-plprev-window .modal-dialog { max-width: 960px; margin: 5vh auto; }
.cxm-plprev-window .modal-content {
  border: 0;
  border-radius: var(--cxm-rl, 12px);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.35);
  background: transparent;
  animation: cxm-plprev-pop 180ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes cxm-plprev-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cxm-plprev-window .modal-content { animation: none; }
}

.cxm-plprev {
  background: #fff;
  outline: none;
  display: flex;
  flex-direction: column;
}

/* Header */
.cxm-plprev__head {
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-4, 16px);
  padding: var(--cxm-sp-4, 16px) var(--cxm-sp-5, 20px);
  border-bottom: 1px solid var(--cxm-g30, #e0e4ea);
}
.cxm-plprev__titles { min-width: 0; flex: 1 1 auto; }
.cxm-plprev__name {
  font-size: 15px;
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2c3e50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cxm-plprev__meta {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2, 8px);
  margin-top: var(--cxm-sp-1, 4px);
}
.cxm-plprev__count {
  font-size: var(--cxm-fs-12, 12px);
  font-weight: var(--cxm-fw-600, 600);
  color: var(--cxm-g70, #7f8c8d);
}
.cxm-plprev__close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--cxm-rf, 9999px);
  background: var(--cxm-g20, #F1F2F5);
  color: var(--cxm-g70, #7f8c8d);
  font-size: 16px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.cxm-plprev__close:hover { background: var(--cxm-g30, #e0e4ea); color: var(--cxm-g100, #2c3e50); }
.cxm-plprev__close:focus { outline: 2px solid var(--cxm-b60, #4185F4); outline-offset: 2px; }

/* Stage — dark frame holding the media + nav arrows. */
.cxm-plprev__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cxm-sp-3, 12px);
  padding: var(--cxm-sp-4, 16px);
  background: #0f1722;
}
.cxm-plprev__media {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 60vh;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cxm-plprev__video,
.cxm-plprev__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--cxm-rs, 6px);
  background: #000;
}
.cxm-plprev__img { object-fit: contain; }
.cxm-plprev__pdf {
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--cxm-rs, 6px);
  background: #fff;
}

/* Nav arrows */
.cxm-plprev__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--cxm-rf, 9999px);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 120ms ease;
}
.cxm-plprev__nav:hover { background: rgba(255, 255, 255, 0.22); }
.cxm-plprev__nav:focus { outline: 2px solid var(--cxm-b60, #4185F4); outline-offset: 2px; }
.cxm-plprev__nav[disabled] { opacity: 0.3; cursor: default; }

/* Loading + error overlays sit on top of the media area. */
.cxm-plprev__loading,
.cxm-plprev__error {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cxm-sp-2, 8px);
  text-align: center;
  padding: var(--cxm-sp-5, 20px);
}
.cxm-plprev__loading { color: rgba(255, 255, 255, 0.75); font-size: var(--cxm-fs-13, 13px); }
.cxm-plprev__spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: var(--cxm-rf, 9999px);
  animation: cxm-plprev-spin 700ms linear infinite;
}
@keyframes cxm-plprev-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cxm-plprev__spinner { animation-duration: 1.6s; }
}
.cxm-plprev__error { color: #fff; }
.cxm-plprev__error > .fa { font-size: 30px; color: #f39c12; }
.cxm-plprev__error-title { font-size: 15px; font-weight: var(--cxm-fw-700, 700); margin: var(--cxm-sp-2, 8px) 0 0; }
.cxm-plprev__error-name { font-size: var(--cxm-fs-13, 13px); color: rgba(255, 255, 255, 0.8); margin: 0; word-break: break-all; }
.cxm-plprev__error-hint { font-size: var(--cxm-fs-12, 12px); color: rgba(255, 255, 255, 0.6); margin: var(--cxm-sp-1, 4px) 0 0; }

/* Thumbnail strip — jump to any item; active one is ringed in accent blue. */
.cxm-plprev__strip {
  display: flex;
  gap: var(--cxm-sp-2, 8px);
  padding: var(--cxm-sp-3, 12px) var(--cxm-sp-4, 16px);
  overflow-x: auto;
  border-top: 1px solid var(--cxm-g30, #e0e4ea);
  background: #fff;
}
.cxm-plprev__thumb {
  flex: 0 0 auto;
  width: 56px; height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--cxm-rs, 6px);
  overflow: hidden;
  background: var(--cxm-g20, #F1F2F5);
  color: var(--cxm-g70, #7f8c8d);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease;
}
.cxm-plprev__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cxm-plprev__thumb.is-active { border-color: var(--cxm-b60, #4185F4); }
.cxm-plprev__thumb:focus { outline: 2px solid var(--cxm-b60, #4185F4); outline-offset: 1px; }

/* Shorter media area on low-height viewports. */
@media (max-height: 720px) {
  .cxm-plprev__media { height: 50vh; max-height: 50vh; }
}