/* ==========================================================================
   ClipAd UI kit — one look for six shared parts, on ALL four dashboards
   (creator, brand, studio, admin). Loaded LAST, after each portal's own
   design layer, so it wins ties. Uses only existing tokens, so each portal
   keeps its own accent (orange; Mulberry on Brand).

   Parts: 1 Buttons · 2 Status pills · 3 Tabs · 4 Filter chips ·
          5 Meters (upload progress, seat meter) · 6 Feedback (toast, callout,
          empty state, skeleton, dialog) · 7 Clip cards

   Specificity: `:not(#kit)` adds one ID, so these rules beat the per-portal
   `body.<portal> …` rules without `!important`.
   Words for the status pills come from public/dashboard/js/kit.js.
   ========================================================================== */

/* ── 1 · Buttons ─────────────────────────────────────────────────────────
   32px default · 28px small · 44px large. Radius 8. 13px / 600.
   Primary = the portal accent. Everything else reads as the outline button. */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; height: 32px; padding: 0 14px; border-radius: var(--radius-sm);
  font: 600 var(--text-body-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border); box-shadow: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); box-shadow: none; transform: none; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn:active { transform: translateY(1px); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn svg { width: 14px; height: 14px; flex: none; }

/* Primary */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-accent, .btn-primary, .btn-solid, .btn-accept) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-accent, .btn-primary, .btn-solid, .btn-accept):hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-dark-ink, var(--accent-ink)); box-shadow: none;
}
/* Publish = the one green action */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn-publish { background: var(--success); border-color: var(--success); color: #fff; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn-publish:hover { filter: brightness(.92); background: var(--success); border-color: var(--success); color: #fff; }
/* Outline family (default look) */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-ghost, .btn-outline, .btn-neutral, .btn-white, .btn-line) {
  background: var(--surface); border-color: var(--border); color: var(--fg);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-ghost, .btn-outline, .btn-neutral, .btn-white, .btn-line):hover {
  background: var(--surface-2); border-color: var(--border-strong); color: var(--fg); box-shadow: none;
}
/* Quiet text button (kit "ghost"): add .btn-text */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.btn-text { background: transparent; border-color: transparent; color: var(--fg-muted); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.btn-text:hover { background: var(--neutral-bg); color: var(--fg); }
/* Danger = tinted, not solid */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-danger, .btn-decline) {
  background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.btn-danger, .btn-decline):hover {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
/* Sizes */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.btn-sm { min-height: 28px; height: 28px; padding: 0 10px; font-size: var(--text-small); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.btn-lg { min-height: 44px; height: 44px; padding: 0 20px; font-size: var(--text-body); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.btn-full { width: 100%; }
/* Disabled + loading */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn:disabled,
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .btn.is-loading::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: kit-spin .8s linear infinite;
}
@keyframes kit-spin { to { transform: rotate(360deg); } }

/* ── 2 · Status pills ────────────────────────────────────────────────────
   One shape for every status word on every dashboard: 20px, pill, dot, tinted (10px text).
   Colour follows the MEANING (kit.js sets data-kit-tone from the word):
     ok = good / done / money · wait = waiting on someone · info = working on it
     bad = failed / blocked · prem = tier · neu = idle / ended · acc = needs you   */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.status-badge, .status-badge-sm, .video-status, .segment-status-badge, .status-pill, .adm-pill, .cr-pill, .clip-stat, .dot-pill, .badge-status, .lc-status-pill, .lh-status-pill, .rc-status-pill, .kit-pill, .ord-status-pill, .eng-status, .an-pill, .ord-pill, .mh-adv-pill, .wbx-state, .wd-state, .int-state, .tfa-status) {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; min-height: 0; margin: 0; padding: 0 7px;
  border: 0; border-radius: var(--radius-pill); box-shadow: none; text-transform: none; letter-spacing: 0;
  font: 600 10px/1 var(--font-body); white-space: nowrap; vertical-align: middle;
  background: var(--neutral-bg); color: var(--fg-muted);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.status-badge, .status-badge-sm, .video-status, .segment-status-badge, .status-pill, .adm-pill, .cr-pill, .clip-stat, .dot-pill, .badge-status, .kit-pill, .ord-status-pill, .eng-status, .an-pill, .ord-pill, .mh-adv-pill, .wbx-state, .wd-state, .int-state, .tfa-status)::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; border: 0;
}
/* Pills that already carry their own dot element: hide the generated one */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lc-status-pill, .lh-status-pill, .rc-status-pill)::before { display: none; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lc-status-dot, .lh-status-dot, .ord-status-dot) { width: 5px; height: 5px; border-radius: 50%; background: currentColor !important; flex: none; }
/* In a card's label row, status pills sit inline (no block, no top margin) */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .video-card .video-status { display: inline-flex; margin: 0; padding: 0 7px; background: var(--neutral-bg); }

/* Tones from the existing class names (fallback when kit.js has not run) */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.is-success, .video-status.uploaded, .segment-status-badge.approved, .segment-status-badge.accepted, .status-badge.accepted, .status-badge-sm.active,
      .adm-pill.green, .cr-pill.ok, .clip-stat.published, .dot-pill.is-active, .lc-status-pill.is-ready, .status-pill.is-published, .rc-status-pill.is-published, .ch-pub-on)
  { background: var(--success-bg); color: var(--success); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.is-warning, .segment-status-badge.pending, .status-badge.pending, .adm-pill.amber, .cr-pill.wait, .clip-stat.pending, .dot-pill.is-awaiting, .status-pill.pending)
  { background: var(--warning-bg); color: var(--warning); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.is-info, .video-status.processing, .video-status.segmented, .segment-status-badge.completed, .status-badge.completed, .status-badge-sm.completed,
      .adm-pill.blue, .clip-stat.ready, .clip-stat.rendering, .lc-status-pill.is-processing)
  { background: var(--info-bg); color: var(--info); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.is-danger, .video-status.failed, .segment-status-badge.rejected, .segment-status-badge.declined, .status-badge.declined, .adm-pill.red, .clip-stat.failed,
      .lc-status-pill.is-failed, .status-pill.suspended, .lh-status-pill.is-live)
  { background: var(--danger-bg); color: var(--danger); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.adm-pill.purple) { background: var(--premium-bg); color: var(--premium); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal)
  :is(.is-neutral, .segment-status-badge.merged, .segment-status-badge.cancelled, .status-badge.cancelled, .status-badge-sm.draft, .status-badge-sm.paused,
      .adm-pill.grey, .cr-pill.other, .status-pill.is-draft, .rc-status-pill.is-draft)
  { background: var(--neutral-bg); color: var(--fg-muted); }
/* Tone set by kit.js from the status word (wins over the class guess above) */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="ok"]   { background: var(--success-bg); color: var(--success); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="wait"] { background: var(--warning-bg); color: var(--warning); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="info"] { background: var(--info-bg); color: var(--info); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="bad"]  { background: var(--danger-bg); color: var(--danger); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="prem"] { background: var(--premium-bg); color: var(--premium); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="neu"]  { background: var(--neutral-bg); color: var(--fg-muted); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) [data-kit-tone="acc"]  { background: var(--accent-soft); color: var(--accent-dark); }
/* "Live" pulses */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .kit-live::before { animation: kit-pulse 1.6s ease-out infinite; }
@keyframes kit-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 6px transparent; } }

/* ── 3 · Tabs ────────────────────────────────────────────────────────────
   A tray with one raised selected tab. Counts are plain muted numbers. */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tabs, .inbox-tabs, .filter-tabs) {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--surface-2);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tab, .inbox-tab) {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border: 0; border-radius: 7px;
  background: none; color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tab, .inbox-tab):hover:not(.active) { background: var(--neutral-bg); color: var(--fg); border: 0; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tab, .inbox-tab).active {
  background: var(--surface); color: var(--fg); font-weight: 500; border: 0; box-shadow: var(--shadow-sm);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tab, .inbox-tab) :is(.tab-count, .lib-count, .n) {
  min-width: 0; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--fg-subtle); font: 500 var(--text-caption)/1 var(--font-body);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tab, .inbox-tab).active :is(.tab-count, .lib-count, .n) { background: none; color: var(--fg-subtle); }

/* ── 4 · Filter chips ────────────────────────────────────────────────────
   30px pill with a count. The selected chip is filled dark. */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .lib-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lib-chip, .video-chip) {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--fg); font: 500 var(--text-small)/1 var(--font-body); cursor: pointer; text-transform: none; letter-spacing: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lib-chip, .video-chip):hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--fg); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lib-chip, .video-chip) :is(.n, .lib-count) { font-weight: 600; color: var(--fg-muted); opacity: 1; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lib-chip.on, .lib-chip.active, .lib-chip[aria-pressed="true"], .video-chip.selected, .video-chip.active) {
  background: var(--fg); color: var(--surface); border-color: var(--fg);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.lib-chip.on, .lib-chip.active, .lib-chip[aria-pressed="true"], .video-chip.selected, .video-chip.active) :is(.n, .lib-count) { color: var(--surface); opacity: .7; }

/* ── 5 · Meters ──────────────────────────────────────────────────────────
   Upload progress and the seat meter: 4px track, rounded fill.
   Seat fill: accent → warning at 90% → danger when full (kit.js sets data-level). */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.progress-bar, .mh-progress, .mh-cr-progress, .kit-meter) {
  height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-bottom: 6px;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.progress-fill, .mh-progress-bar, .mh-cr-progress > i, .kit-meter > i) {
  display: block; height: 100%; border-radius: 2px; background: var(--info); transition: width var(--dur-slow) var(--ease-out);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .kit-meter > i { background: var(--accent); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .kit-meter[data-level="high"] > i { background: var(--warning); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .kit-meter[data-level="full"] > i { background: var(--danger); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .progress-text { font: 400 var(--text-small)/1.4 var(--font-body); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.kit-seat { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: var(--space-2); }
.kit-seat .kit-meter { margin: 0; }
.kit-seat-cap { font: 400 var(--text-small)/1.3 var(--font-body); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ── 6 · Feedback ────────────────────────────────────────────────────── */
/* Toast: charcoal, icon on the left */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .toast {
  display: flex; align-items: center; gap: 10px; background: var(--surface-dark); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 14px; font: 400 var(--text-body-sm)/1.4 var(--font-body); box-shadow: var(--shadow-lg);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .toast::before {
  content: "i"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--info); color: #fff; font: 700 11px/1 var(--font-body);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .toast.success::before { content: "✓"; background: var(--success); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .toast.error::before { content: "!"; background: var(--danger-solid, var(--danger)); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.toast.success, .toast.error) { border-left: 0; }

/* Callout: tinted note. Variants: default (accent), .callout-danger, .callout-warning, .callout-success, .callout-info */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line, var(--border)); color: var(--fg); font: 400 var(--text-body-sm)/1.5 var(--font-body);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent-dark); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-reward { background: var(--accent-soft); border-color: var(--accent-line, var(--border)); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-danger svg  { color: var(--danger); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-warning svg { color: var(--warning); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-success svg { color: var(--success); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .callout-info svg { color: var(--info); }

/* Empty state: centred, small icon tile (optional .empty-ico), title + one line + one action */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--fg-muted); font: 400 var(--text-body-sm)/1.5 var(--font-body);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .empty-state :is(h3, h4, .empty-title) { margin: 0; font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .empty-state p { margin: 0; max-width: 42ch; font-size: var(--text-body-sm); color: var(--fg-muted); }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .empty-state .empty-ico {
  width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--fg-muted); display: grid; place-items: center;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .empty-state .empty-ico svg { width: 18px; height: 18px; }

/* Skeleton: soft shimmer on the surface tokens */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .skeleton {
  background-color: var(--surface-2);
  background-image: linear-gradient(90deg, transparent 0, var(--surface-raised) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat; background-position: -100% 0; border-radius: 6px; animation: kit-shimmer 1.4s ease-in-out infinite;
}
@keyframes kit-shimmer { to { background-position: 200% 0; } }

/* Dialog: 24px radius, raised surface, 18px title, actions bottom-right */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.rv-modal, .mh-dialog, .cb-modal-card, .ed-modal, .wbx-modal) {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 22px;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.rv-modal h3, .mh-dialog h3, .mh-dialog h2, .ed-modal-title, .cb-modal-card h3) {
  margin: 0 0 12px; font: 600 18px/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg);
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.rv-modal-actions, .mh-dialog-actions, .ed-modal-actions) {
  display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
}

/* ── 7 · Clip cards ──────────────────────────────────────────────────────
   Video on the left (about a third), content on the right, one visible action.
   Applies to every clip / rendered-deliverable card on all four dashboards. */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.output-grid, .segment-list.mc-grid, .video-grid.clips-grid) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) {
  display: grid; grid-template-columns: 34% minmax(0, 1fr); gap: 0; overflow: visible; align-items: stretch;
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg); box-shadow: none !important;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) .video-thumb {
  position: relative; min-height: 150px; height: 100%; aspect-ratio: auto; background: var(--surface-dark); overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) .video-thumb :is(video, img) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) .video-info {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px !important;
}
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) .video-title { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) :is(.clip-desc, .video-meta.vm-line) { margin-top: 0; font-size: var(--text-small); color: var(--fg-muted); font-weight: 400; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) :is(.mc-labels, .clip-labels) { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) :is(.mc-actions, .clip-actions) { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.output-grid, .segment-list.mc-grid, .video-grid.clips-grid) { grid-template-columns: 1fr; }
  body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) { grid-template-columns: 1fr; }
  body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.video-card.mc-filled, .clips-grid > .video-card) .video-thumb {
    min-height: 0; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not(#kit) .kit-live::before, body:not(#kit) .skeleton, body:not(#kit) .btn.is-loading::before { animation: none; }
}

/* ── Figures ─────────────────────────────────────────────────────────────
   Numbers render in Season Sans (the "Season Digits" font in fonts/season-sans.css).
   Its digits are not equal-width by default, so columns of figures ask for the
   tabular set. */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(table, td, th, .kpi, .mh-kpi, .stat-card, .campaign-stat-val, .cp-bar-row, .num, .tn) {
  font-variant-numeric: tabular-nums;
}

/* Gradient placeholder for an avatar or logo with no picture (public/js/placeholder-avatar.js).
   Only the background is set, so the element keeps its own shape. */
.ph-grad { background-size: cover; background-position: center; color: #fff; }
.ph-grad > svg, .ph-grad > i { display: none; }
.ph-grad { transition: none !important; }

/* ── Phones: analytics tables become one small card per row (cells carry data-label) ─────────────── */
@media (max-width: 640px) {
  body:not(#kit):is(.creator-portal, .brand-portal) :is(.an-table, .an-table tbody) { display: block; width: 100%; }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table thead { display: none; }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 4px; border-bottom: 1px solid var(--border-subtle);
  }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody td { display: block; height: auto; padding: 0; border: 0; min-width: 0; font-size: var(--text-body-sm); overflow-wrap: anywhere; }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--fg-muted); }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody td:first-child { grid-column: 1 / -1; }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody td:first-child::before { display: none; }
  body:not(#kit):is(.creator-portal, .brand-portal) .an-table tbody td:empty { display: none; }
}
@media (max-width: 640px) {
  /* a row of filter chips wraps inside the screen instead of running off its right edge */
  body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.campaign-tabs, .inbox-tabs, .filter-tabs) { max-width: 100%; box-sizing: border-box; }
}

/* ── Phones: collab request cards keep a small picture and the actions drop under the text ───────── */
@media (max-width: 560px) {
  body:not(#kit):is(.creator-portal, .brand-portal) .collab-card { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  body:not(#kit):is(.creator-portal, .brand-portal) .collab-card .segment-thumb { width: 44px; height: 44px; flex: none; font-size: 20px; }
  body:not(#kit):is(.creator-portal, .brand-portal) .collab-card .segment-body { flex: 1 1 0; min-width: 0; }
  body:not(#kit):is(.creator-portal, .brand-portal) .collab-card .segment-actions { flex: 1 0 100%; flex-direction: row !important; align-items: center !important; justify-content: space-between; }
}
@media (max-width: 560px) {
  body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) div:has(> .filter-tab) { flex-wrap: wrap !important; row-gap: 6px; }
}

/* the search icon sits inside the box, so the text starts after it (the generic 32px field rule had removed that space) */
body:not(#kit):is(.creator-portal, .brand-portal, .studio-portal) .ib-search input { padding-left: 34px; }
@media (max-width: 560px) {
  /* a lone last stat takes the whole row instead of a cramped half */
  body:not(#kit):is(.creator-portal, .brand-portal, .studio-portal) :is(.ov-kpis, .mh-kpis, .an-kpis) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Status labels added to the one system (Orders, engagements, analytics stage, requests, advertisers, webinars, integrations). */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) :is(.int-state, .wd-state) { margin: 0; width: fit-content; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .int-namerow .int-state { margin-top: 0; }

/* Two-step login status: same pill as every other status; it draws its own dot via ::before */
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .tfa-status .tfa-dot { display: none; }
body:not(#kit):is(.creator-portal, .brand-portal, .admin-portal, .studio-portal) .tfa-status.tfa-on { background: var(--success-bg); color: var(--success); }