/* ════════════════════════════════════════════════════════════════════════
   ClipAd Dashboard Design System
   ────────────────────────────────────────────────────────────────────────
   ONE token-driven system shared by the Creator Dashboard + Brand Portal.
   Change the platform from the tokens below — not per-component. Inline <style>
   blocks in EJS should consume these tokens, never re-declare raw values.

   Influences (translated into our warm earthy palette, not transplanted):
   • Vercel/Supabase — elevation via subtle borders + restrained accent.
   • Linear         — premium feel via fast, consistent, eased motion.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette — 10 named roles ──────────────────────────────
     Change these to reskin the entire platform. Rules of use:
     • Neutral by default; colour earns attention (actions + status only).
     • Burnt Orange = the ONE primary accent. Saffron = a sparing spark
       (new / act-now / reward) — dark text only, never white-on-saffron.
     • Elevation by light: bg < card < raised, defined by border + shadow. */
  --bg:            #F8F2ED;   /* Soft Cream — app canvas */
  --fg:            #1F1F1F;   /* Dark Text — headings + primary body */
  --heading:       #1F1F1F;
  --fg-muted:      #6F625B;   /* Muted Text — secondary / labels / captions */
  --fg-subtle:     #A2938A;   /* tertiary (derived from muted) */
  --accent:        #C4622D;   /* Primary / Burnt Orange */
  --accent-light:  #E07B45;
  --accent-dark:   #8B3A1A;
  --accent-soft:   rgba(196, 98, 45, 0.10);   /* accent tint fills/chips */
  --accent-softer: rgba(196, 98, 45, 0.06);
  --accent-line:   rgba(196, 98, 45, 0.22);   /* accent-tinted chip borders */

  /* Saffron — bright SUPPORT accent (highlight / new / act-now / reward).
     Use as a background or icon with DARK text; never as white-on-saffron. */
  --saffron:       #F4B740;
  --saffron-soft:  rgba(244, 183, 64, 0.16);  /* saffron tint background */
  --saffron-line:  rgba(244, 183, 64, 0.55);
  --highlight:     #FFE6BE;                    /* Soft Highlight — callout bg (dark text) */

  /* ── Surfaces (elevation by light: bg < card < raised) ─────────── */
  --surface:       #FFF7EF;   /* Warm Card — cards / panels */
  --surface-2:     #F4ECE3;   /* nested wells / readonly / subtle fills */
  --surface-raised:#FFFCF8;   /* modals, login — brightest */
  --surface-dark:  #2B211C;   /* Deep Contrast — sidebar / media wells / toasts */

  /* ── Borders (neutral warm tan — colour reserved for interaction) ── */
  --border:        #E8D8CC;   /* Soft Border — hairlines / dividers / inputs */
  --border-strong: #DCC7B7;   /* hover / emphasis edge */
  --border-subtle: rgba(43, 33, 28, 0.07);    /* faint neutral hairline */

  /* ── Semantic status (text colour + same-hue ~14% tint background) ─ */
  --success:       #2E8B57;  --success-bg: rgba(46, 139, 87, 0.14);   /* Money Green */
  --warning:       #B26A00;  --warning-bg: rgba(245, 124, 0, 0.16);
  --info:          #1976D2;  --info-bg:    rgba(33, 150, 243, 0.13);
  --danger:        #C62828;  --danger-bg:  rgba(229, 57, 53, 0.12);
  --danger-solid:  #D6453F;            /* solid danger button / toast accent */
  --premium:       #7B1FA2;  --premium-bg: rgba(123, 31, 162, 0.13);
  --neutral-bg:    rgba(43, 33, 28, 0.06);    /* warm neutral chip/fill */

  /* ── Spacing scale (4px base) ──────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;

  /* ── Radius scale ──────────────────────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  8px;    /* buttons, inputs, chips */
  --radius-md:  12px;   /* default card (dominant) */
  --radius-lg:  16px;   /* panels, large cards */
  --radius-xl:  20px;   /* modals, login */
  --radius-pill: 999px;

  /* ── Elevation (warm-tinted shadows, from Deep Contrast) ───────── */
  --shadow-sm:    0 1px 2px rgba(43, 33, 28, 0.06);
  --shadow-md:    0 4px 14px rgba(43, 33, 28, 0.10);
  --shadow-lg:    0 14px 34px rgba(43, 33, 28, 0.16);   /* menus / popovers */
  --shadow-xl:    0 30px 70px rgba(43, 33, 28, 0.24);   /* modals */
  --shadow-hover: 0 6px 22px rgba(196, 98, 45, 0.16);   /* card lift (accent) */

  /* ── Typography ────────────────────────────────────────────────── */
  --font-heading: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-caption: 11px;
  --text-small:   12px;
  --text-body-sm: 13px;
  --text-body:    14px;
  --text-body-lg: 15px;
  --text-lg:      16px;
  --text-title-sm: 20px;   /* page / panel / section titles */
  --text-title:   24px;
  --text-display: 32px;
  --text-stat-sm: 24px;
  --text-stat:    36px;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal: 1.5;

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    280ms;

  /* ── Focus / layering ──────────────────────────────────────────── */
  --ring:       0 0 0 3px rgba(196, 98, 45, 0.30);
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-modal:    1000;
  --z-toast:    1100;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-line); color: var(--accent-dark); }

/* One consistent, accessible keyboard focus ring everywhere.
   :where() keeps zero specificity so component rules still win. */
:where(a, button, input, select, textarea, [tabindex], .nav-item,
       .account-trigger, .inbox-tab, .campaign-tab, .settings-tab,
       .video-chip, .campaign-menu-item, .account-menu a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── App Shell ─────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ─────────────────────────────────── */
.sidebar {
  width: 220px;
  background: var(--surface-dark);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(196, 98, 45, 0.2);
  margin-bottom: var(--space-2);
}
.brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-title-sm);
  font-weight: 700;
  color: #fff;
  display: block;
}
.brand-sub {
  font-size: var(--text-caption);
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-4) 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-5);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: var(--text-body);
  font-weight: 500;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
/* Linear-style active rail: a soft accent bar + lift on the active item. */
.nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-item:hover, .nav-item.active {
  background: rgba(196, 98, 45, 0.15);
  color: #fff;
}
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.nav-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
svg.nav-icon, .nav-icon svg { width: 18px; height: 18px; display: block; }
.nav-badge { margin-left: auto; background: var(--accent); color: #fff; border-radius: var(--radius-pill); padding: 1px 7px; font-size: var(--text-caption); font-weight: 700; }

.sidebar-user {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(196, 98, 45, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-body);
  flex-shrink: 0;
}
.user-info { overflow: hidden; }
.user-name {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-status { font-size: var(--text-caption); color: var(--success); }

/* ─── Top bar (account menu, top-right of the page) ─────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: 18px;
}
.topbar-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.topbar-icon-btn:hover { color: var(--accent); border-color: var(--accent-light); background: var(--bg); }
.topbar-icon-btn:active { transform: scale(0.94); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.topbar-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.topbar-account { position: relative; }
.account-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.account-trigger:hover { border-color: var(--accent-light); background: var(--bg); }
.topbar .user-avatar { width: 30px; height: 30px; font-size: var(--text-small); }
.user-avatar.has-img { background-size: cover; background-position: center; color: transparent; }
.account-trigger .user-name { color: var(--fg); max-width: 150px; }
.topbar-caret { width: 15px; height: 15px; color: var(--fg-muted); flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.account-trigger[aria-expanded="true"] .topbar-caret { transform: rotate(180deg); }
.account-menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 6px; z-index: var(--z-dropdown); display: none;
  transform-origin: top right;
}
.account-menu.open { display: block; animation: menuPop var(--dur-fast) var(--ease-out); }
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.account-menu-name { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-small); color: var(--fg-muted); font-weight: 600; }
.account-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); font-weight: 500; color: var(--fg);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.account-menu a:hover { background: var(--bg); color: var(--accent); }
.account-menu a svg { width: 15px; height: 15px; flex-shrink: 0; }
.account-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
@media (max-width: 640px) { .account-trigger .user-name { display: none; } }

/* ─── Main Content ─────────────────────────────── */
.main-content {
  flex: 1;
  overflow: auto;
  padding: var(--space-7) var(--space-8);
  min-width: 0;            /* fill the full width to the right edge (no centered cap);
                             min-width:0 lets the flex child shrink so wide tables/grids
                             reflow instead of overflowing. Cards keep their size via the
                             auto-fill grids below — they add columns, they don't stretch. */
}

/* ─── Page Header ─────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.breadcrumb {
  font-size: var(--text-body-sm);
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.breadcrumb:hover { text-decoration: underline; }
.page-title {
  font-family: var(--font-heading);
  /* H3-scale page title (matches .section-header h3 / .panel-title). */
  font-size: var(--text-title-sm);
  font-weight: 700;
  color: var(--fg);
  line-height: var(--leading-tight);
}

/* ─── Stats ────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.stat-val {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-stat);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label { font-size: var(--text-small); color: var(--fg-muted); font-weight: 500; }

/* ─── Panels ────────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.panel-title {
  font-family: var(--font-heading);
  font-size: var(--text-title-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--fg);
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 var(--space-4);
}
.section-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-title-sm);
  font-weight: 700;
}

/* ─── Buttons ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-accent {
  background: var(--accent);
  color: white;
}
.btn-accent:hover { background: var(--accent-dark); box-shadow: var(--shadow-hover); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.btn-danger {
  background: var(--danger-solid);
  color: white;
}
.btn-danger:hover { background: var(--danger); }
.btn-sm { padding: 6px var(--space-3); font-size: var(--text-small); }
.btn-full { width: 100%; justify-content: center; }

/* ─── Upload Zone ────────────────────────────── */
.upload-zone {
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-7);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.upload-zone.drag-over { border-color: var(--accent); background: var(--accent-softer); }
.upload-icon {
  font-size: var(--space-8);
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.upload-zone h3 { font-family: var(--font-heading); font-size: 22px; margin-bottom: 6px; }
.upload-zone p { font-size: var(--text-body); color: var(--fg-muted); margin-bottom: var(--space-5); }
.upload-progress { margin-top: var(--space-4); }
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width var(--dur-slow) var(--ease-out);
  width: 0%;
}
.progress-text { font-size: var(--text-small); color: var(--fg-muted); }

/* ─── Cards: shared elevation + hover-lift ─────────────────────────
   One motion primitive for every content card so we never hand-animate
   each one. translateY + warm shadow + border on hover (Linear-ish). */
.video-card, .campaign-card, .creator-card, .collab-card, .output-card {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.video-card:hover, .campaign-card:hover, .creator-card:hover, .output-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-strong);
}

/* ─── Video Grid ─────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.video-thumb {
  aspect-ratio: 16 / 9;     /* fixed box → every card is the same size regardless of clip aspect */
  background: var(--surface-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--space-7);
  position: relative;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.video-thumb .duration-badge {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: var(--text-caption);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
/* The video fills the shared 16:9 box; object-fit: contain letterboxes any
   aspect ratio inside it, so all cards stay the exact same size. */
.video-thumb.has-player {
  width: 100%;
}
.video-thumb .video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.video-thumb-noplay {
  flex-direction: column;
  gap: var(--space-2);
}
.video-thumb-noplay .no-preview {
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 0 var(--space-3);
}
.video-info { padding: var(--space-3) 14px; }
.video-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; }
.video-info-head .video-title { flex: 1; min-width: 0; margin-bottom: 0; }
.video-title {
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-meta { font-size: var(--text-small); color: var(--fg-muted); }
.video-actions {
  display: flex;
  gap: var(--space-2);
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* ─── Status pills (semantic, tokenized) ──────────────────────────
   .video-status / .segment-status-badge / .status-badge / .status-badge-sm
   all share one shape + the same five semantic colorways. */
.video-status, .segment-status-badge, .status-badge, .status-badge-sm {
  display: inline-block;
  font-weight: 600;
  white-space: nowrap;
}
.video-status { padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-caption); margin-top: 6px; }
.segment-status-badge, .status-badge-sm { padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-caption); }
.status-badge { padding: 4px var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-small); }

.is-success, .video-status.uploaded, .segment-status-badge.approved, .segment-status-badge.accepted,
.status-badge.accepted, .status-badge-sm.active { background: var(--success-bg); color: var(--success); }
.is-warning, .video-status.processing, .segment-status-badge.pending,
.status-badge.pending, .status-badge-sm.paused { background: var(--warning-bg); color: var(--warning); }
.is-info, .video-status.segmented, .segment-status-badge.completed,
.status-badge.completed, .status-badge-sm.completed { background: var(--info-bg); color: var(--info); }
.is-danger, .video-status.failed, .segment-status-badge.rejected, .segment-status-badge.declined,
.status-badge.declined { background: var(--danger-bg); color: var(--danger); }
.is-neutral, .segment-status-badge.merged, .segment-status-badge.cancelled,
.status-badge.cancelled, .status-badge-sm.draft { background: var(--neutral-bg); color: var(--fg-muted); }

/* ─── Video Pop-out Modal ─────────────────────── */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-7);
  animation: vm-fade var(--dur-fast) var(--ease-out);
}
@keyframes vm-fade { from { opacity: 0; } to { opacity: 1; } }
.video-modal {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 86vh;
  animation: modalPop var(--dur-base) var(--ease-spring);
}
.video-modal video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.video-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.video-modal-close:hover { background: var(--accent); }
.video-modal-close:active { transform: scale(0.92); }
.video-modal-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) 52px var(--space-6) var(--space-4);
  color: #fff;
  font-size: var(--text-body);
  font-weight: 600;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

/* Shared modal entrance (used by video + warm detail + brand pop-outs). */
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ─── Trim editor (drag-handle timeline) ──────── */
.trim-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
  gap: var(--space-3);
  animation: modalPop var(--dur-base) var(--ease-spring);
}
.trim-editor-wide { width: min(720px, 94vw); }
.trim-editor .video-modal-close { background: var(--surface-2); color: var(--fg); }
.trim-editor .video-modal-close:hover { background: var(--accent); color: #fff; }
.trim-title {
  font-family: var(--font-heading);
  font-size: var(--text-h4, 1.05rem);
  font-weight: 600;
  color: var(--heading);
  padding-right: 40px;
}
.trim-stage {
  width: 100%;
  max-height: 40vh;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.trim-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* time readout above the track */
.trim-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  font-weight: 600;
  font-size: var(--text-sm);
}
.trim-len { color: var(--fg-muted); }

/* the timeline track */
.trim-timeline {
  position: relative;
  height: 70px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  margin-top: 2px;
}
.trim-filmstrip { position: absolute; inset: 0; border-radius: var(--radius-md); overflow: hidden; }
.trim-frame {
  position: absolute;
  top: 0; bottom: 0;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.trim-frame.failed { opacity: 0; }
.trim-mask {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(20, 12, 8, 0.60);
  pointer-events: none;
  z-index: 1;
}
.trim-mask-l { left: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.trim-mask-r { right: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.trim-selection {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  cursor: grab;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background: rgba(196, 98, 45, 0.06);
}
body.trim-dragging { user-select: none; cursor: ew-resize; }
body.trim-dragging .trim-selection { cursor: grabbing; }
.trim-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 16px;
  background: var(--accent);
  cursor: ew-resize;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.trim-handle-l { left: -8px; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.trim-handle-r { right: -8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.trim-handle > i { width: 2px; height: 42%; background: rgba(255,255,255,0.9); border-radius: 1px; box-shadow: 3px 0 0 rgba(255,255,255,0.55), -3px 0 0 rgba(255,255,255,0.55); }
.trim-handle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(196, 98, 45, 0.45); }
.trim-handle:hover { filter: brightness(1.08); }
.trim-playhead {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  z-index: 4;
}

/* controls row */
.trim-controls-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.trim-spacer { flex: 1; }
.trim-snap { display: flex; align-items: center; gap: 6px; color: var(--fg-muted); font-size: var(--text-sm); cursor: pointer; }
.trim-play {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font-weight: 600;
}
.trim-play:hover { border-color: var(--accent); }
.trim-msg { color: var(--danger); font-size: var(--text-sm); display: none; }
.trim-msg.show { display: block; }
.trim-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: 600;
  transition: filter var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.trim-cancel { background: transparent; color: var(--fg-muted); }
.trim-cancel:hover { color: var(--fg); border-color: var(--fg-muted); }
.trim-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.trim-save:hover { filter: brightness(1.05); }
.trim-save:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* ─── Segment List ────────────────────────────── */
.segment-list { display: flex; flex-direction: column; gap: var(--space-3); }
.segment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.segment-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.segment-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--surface-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--text-title-sm);
  flex-shrink: 0;
}
.segment-body { flex: 1; min-width: 0; }
.segment-title {
  font-weight: 600;
  font-size: var(--text-body);
  margin-bottom: var(--space-1);
}
.segment-time {
  font-size: var(--text-small);
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.segment-score { font-size: var(--text-caption); color: var(--accent); margin-top: 2px; }
.segment-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.seg-actions-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.segment-manage, .card-manage { position: relative; flex-shrink: 0; }
.card-manage > button { white-space: nowrap; }

/* ─── Card kebab + preview icon (shared) ───────────────────────────
   One icon-only trigger for every card dropdown (replaces the old
   per-page .rq-kebab) + a standalone preview icon some cards show
   directly (action lives on the card, not in the menu). */
.card-kebab {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--fg-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.card-kebab:hover { background: var(--surface-2); color: var(--fg); }
.card-kebab svg { width: 18px; height: 18px; }
.card-preview-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.card-preview-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.card-preview-btn svg { width: 18px; height: 18px; }

/* Tiny inline spinner for loading notifications/banners. */
.cb-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--accent-line); border-top-color: var(--accent);
  animation: cb-spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* ─── Tabs / chips (one pill style) ────────────────────────────────
   .inbox-tab, .campaign-tab share the pill tab; .video-chip is the
   filled-on-select chip. Centralized so creator + brand match. */
.inbox-tabs, .campaign-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); flex-wrap: wrap; }
.inbox-tab, .campaign-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.inbox-tab.active, .campaign-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.inbox-tab:hover:not(.active), .campaign-tab:hover:not(.active) { background: var(--surface); border-color: var(--border-strong); }

.video-selector {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.video-chip {
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.video-chip:hover, .video-chip.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Segment thumb as a clickable poster frame (muted, no controls). */
.segment-thumb.has-player {
  width: 110px;
  height: auto;
  max-height: 90px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 0;
}
.segment-thumb.has-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.segment-thumb .thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.9;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.segment-thumb.has-player:hover .thumb-play {
  opacity: 1;
  background: rgba(0, 0, 0, 0.32);
}

/* ─── Steps Guide ─────────────────────────────── */
.steps-guide { display: flex; flex-direction: column; gap: var(--space-4); }
.guide-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.step-n {
  width: var(--space-7);
  height: var(--space-7);
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-body);
  flex-shrink: 0;
}
.step-body { flex: 1; }
.step-body strong { font-size: var(--text-body); display: block; margin-bottom: 3px; }
.step-body p { font-size: var(--text-body-sm); color: var(--fg-muted); }

/* ─── Empty State ─────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-7);
  color: var(--fg-muted);
  font-size: var(--text-body);
}
.empty-state a { color: var(--accent); }

/* ─── Toast ────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.toast {
  background: var(--surface-dark);
  color: white;
  padding: var(--space-3) 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--dur-base) var(--ease-out);
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger-solid); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Forms (shared inputs + .form-field / .form-grid) ─────────────
   Centralized — was duplicated in creator + brand settings. One ring. */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--text-body-sm); font-weight: 600; color: var(--fg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--text-body-sm); font-weight: 600; margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-actions { margin-top: 18px; display: flex; gap: var(--space-3); align-items: center; }
.muted-note { font-size: var(--text-body-sm); color: var(--fg-muted); }

.form-group input, .form-group select,
.form-field input, .form-field select, .form-field textarea {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: inherit;
  background: var(--bg);
  color: var(--fg);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-group input:focus, .form-group select:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.form-field input[readonly] { color: var(--fg-muted); background: var(--surface-2); box-shadow: none; }
.form-error {
  padding: 10px 14px;
  background: var(--danger-bg);
  border: 1px solid rgba(229, 57, 53, 0.2);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--text-body-sm);
}
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ─── Login ────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}
.login-box {
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-6);
}
.login-brand .brand-name {
  font-family: var(--font-heading);
  font-size: var(--text-title);
  font-weight: 700;
  color: var(--fg);
}
.brand-tag {
  font-size: var(--text-caption);
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.login-box h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
}
.login-sub { font-size: var(--text-body); color: var(--fg-muted); margin-bottom: var(--space-6); }
.login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-switch { margin-top: var(--space-5); text-align: center; font-size: var(--text-body-sm); color: var(--fg-muted); }
.login-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
.login-switch a:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    position: static;
    padding: 0 var(--space-4);
    overflow-x: auto;
  }
  .sidebar-brand { padding: var(--space-3) 0; border-bottom: none; border-right: 1px solid rgba(196, 98, 45, 0.2); margin-right: var(--space-3); padding-right: var(--space-3); }
  .sidebar-nav { display: flex; gap: 0; padding: 0; }
  .nav-item { padding: var(--space-4) var(--space-3); white-space: nowrap; }
  .nav-item::before { display: none; }
  .sidebar-user { border-top: none; border-left: 1px solid rgba(196, 98, 45, 0.2); padding: var(--space-3) 0 var(--space-3) var(--space-3); margin-left: var(--space-3); }
  .main-content { padding: var(--space-5); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* Heading (Season Sans) color — sidebar .brand-name stays white and .stat-val
   stays accent via their own (more specific / earlier) rules. */
.page-title,
.panel-title,
.section-header h3,
.upload-zone h3,
.login-brand .brand-name,
.login-box h2 { color: var(--heading); }

/* ─── Animated nav icons (animate on hover) ─────────────── */
.nav-icon { transform-origin: center; }
.nav-item:hover .nav-icon { animation: nav-pop 0.4s ease; }
.nav-item:hover .lucide-house,
.nav-item:hover .lucide-inbox,
.nav-item:hover .lucide-mail { animation: nav-bounce 0.55s ease; }
.nav-item:hover .lucide-megaphone,
.nav-item:hover .lucide-scissors { animation: nav-wiggle 0.5s ease-in-out; }
.nav-item:hover .lucide-download { animation: nav-down 0.55s ease; }

@keyframes nav-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nav-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }
@keyframes nav-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg); } }
@keyframes nav-down { 0% { transform: translateY(0); } 45% { transform: translateY(3px); } 100% { transform: translateY(0); } }

/* ─── Shared marketplace components ─────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }

/* Active-campaign / browse campaign cards (one canonical card). */
.campaign-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-3); }
.campaign-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 10px; }
.campaign-brand-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.campaign-brand-name { font-weight: 600; font-size: var(--text-body); }
.campaign-type-tag { font-size: var(--text-caption); background: var(--accent-soft); color: var(--accent); padding: 2px var(--space-2); border-radius: var(--radius-sm); margin-left: auto; }
.campaign-pay { font-size: 18px; font-weight: 700; color: var(--accent); }

/* Collab / request cards */
.collab-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.collab-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.collab-brand-logo { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--surface-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; overflow: hidden; }
.collab-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.collab-brand-info { flex: 1; }
.collab-brand-name { font-weight: 700; font-size: var(--text-body-lg); }
.collab-brand-meta { font-size: var(--text-small); color: var(--fg-muted); }
.collab-message { font-size: var(--text-body); color: var(--fg-muted); line-height: var(--leading-normal); margin-bottom: 14px; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-sm); }
.collab-proposal { display: flex; gap: var(--space-5); margin-bottom: 14px; flex-wrap: wrap; }
.proposal-item { text-align: center; }
.proposal-val { font-size: 18px; font-weight: 700; color: var(--accent); }
.proposal-label { font-size: var(--text-caption); color: var(--fg-muted); margin-top: 2px; }
.collab-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Shared card action dropdown (Manage ▾ menus). */
.campaign-menu {
  position: absolute; right: 0; top: 100%; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: var(--z-dropdown); min-width: 170px;
  transform-origin: top right;
  animation: menuPop var(--dur-fast) var(--ease-out);
}
.campaign-menu-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: var(--space-2) var(--space-3); border: none; background: none; border-radius: 7px;
  font-size: var(--text-body-sm); font-weight: 600; color: var(--fg); text-decoration: none;
  white-space: nowrap; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.campaign-menu-item:hover { background: var(--accent); color: #fff; }
.campaign-menu-item.danger { color: var(--danger); }
.campaign-menu-item.danger:hover { background: var(--danger-solid); color: #fff; }

/* ─── Creator cards (centralized — was duplicated browse + requests) ─── */
.creator-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); }
.creator-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.creator-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.creator-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-dark); display: flex; align-items: center; justify-content: center; font-size: var(--text-title-sm); flex-shrink: 0; color: rgba(255, 255, 255, 0.5); overflow: hidden; }
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-name { font-weight: 700; font-size: var(--text-body-lg); margin-bottom: 2px; }
.creator-platform { font-size: var(--text-small); color: var(--fg-muted); }
.creator-platform span { background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-xs); font-weight: 600; }
.creator-bio { font-size: var(--text-body-sm); color: var(--fg-muted); margin-bottom: var(--space-3); line-height: var(--leading-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.creator-meta { display: flex; gap: var(--space-4); margin-bottom: 14px; flex-wrap: wrap; }
.creator-meta-item { font-size: var(--text-small); color: var(--fg-muted); }
.creator-meta-item strong { color: var(--fg); }
.creator-rate { background: var(--success-bg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: 14px; display: inline-block; }
.creator-rate .rate-amount { font-size: var(--text-lg); font-weight: 700; color: var(--success); }
.creator-rate .rate-type { font-size: var(--text-caption); color: var(--fg-muted); }
.creator-tier-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 14px; flex-wrap: wrap; }
.creator-tier-views { font-size: var(--text-caption); color: var(--fg-muted); }
.demo-clip { background: var(--surface-dark); border-radius: var(--radius-sm); height: 80px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); font-size: var(--text-body); overflow: hidden; }
.demo-clip img { width: 100%; height: 100%; object-fit: cover; }

/* Creator view-tier badge (one source of the five colorways). */
.tier-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-sm); font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.02em; background: var(--accent-soft); color: var(--accent); }
.tier-badge.tier-spark { background: var(--accent-soft); color: var(--accent); }
.tier-badge.tier-rise { background: var(--success-bg); color: var(--success); }
.tier-badge.tier-pro { background: var(--info-bg); color: var(--info); }
.tier-badge.tier-elite { background: var(--premium-bg); color: var(--premium); }
.tier-badge.tier-none { background: var(--neutral-bg); color: var(--fg-muted); }

/* ── Saffron accents — the SECOND accent (new / act-now / reward) ──────
   Use sparingly (never a primary CTA). Dark text on saffron only. */
.badge-new {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--saffron); color: var(--fg);
  font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Callout / heads-up banner. Default = neutral; .callout-reward = saffron good-news. */
.callout {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--text-body-sm); color: var(--fg); line-height: var(--leading-normal);
}
.callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--fg-muted); }
.callout strong { font-weight: 700; }
.callout-reward { background: var(--highlight); border-color: var(--saffron-line); }
.callout-reward svg { color: var(--accent-dark); }

/* ─── Settings (centralized — was duplicated creator + brand) ─────── */
.settings-layout { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.settings-tabs { display: flex; flex-direction: column; gap: var(--space-1); }
.settings-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-3); border-radius: 9px;
  font-size: var(--text-body); font-weight: 600; color: var(--fg-muted);
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings-tab:hover { background: var(--surface); color: var(--fg); }
.settings-tab.active { background: var(--surface); color: var(--accent); }
.settings-tab svg { width: 16px; height: 16px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: panelIn var(--dur-base) var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.settings-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: 18px; }
.settings-card h2 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 0 0 var(--space-1); }
.settings-card .sub { font-size: var(--text-body-sm); color: var(--fg-muted); margin-bottom: 18px; }
.avatar-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.settings-avatar { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; background: var(--surface-dark) center/cover no-repeat; border: 1px solid var(--border); }
.settings-avatar.square { border-radius: var(--radius-lg); }
.avatar-controls { display: flex; flex-direction: column; gap: var(--space-2); }
.avatar-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-hint { font-size: var(--text-small); color: var(--fg-muted); }
@media (max-width: 680px) {
  .settings-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .settings-tabs { flex-direction: row; flex-wrap: wrap; }
}

/* ─── Ad engine: clip status, place-ad picker, outputs ───────── */
.clip-status { font-size: var(--text-small); color: var(--fg-muted); }
.clip-status.err { color: var(--danger); }

.ad-picker {
  background: var(--bg); border-radius: var(--radius-lg); width: min(880px, 92vw);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-xl);
  animation: modalPop var(--dur-base) var(--ease-spring);
}
.ad-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.ad-picker-head h3 { font-family: var(--font-heading); font-size: var(--text-title-sm); font-weight: 700; }
.ad-picker-head .video-modal-close { position: static; background: var(--surface); color: var(--fg); }
.ad-picker-head .video-modal-close:hover { background: var(--accent); color: #fff; }
.ad-picker-placement { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--border); font-size: var(--text-body-sm); }
.ad-picker-placement > span { font-weight: 700; }
.ad-picker-placement label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--fg-muted); }
.ad-picker-offset { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) 22px; border-bottom: 1px solid var(--border); font-size: var(--text-body-sm); }
.ad-picker-offset label { font-weight: 700; }
.ad-picker-offset input[type="number"] { width: 72px; padding: 5px var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--fg); font: inherit; }
.ad-picker-offset .ad-offset-unit { color: var(--fg-muted); }
.ad-picker-offset .ad-offset-hint { flex-basis: 100%; color: var(--fg-muted); font-size: var(--text-small); }
.ad-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); padding: 22px; overflow-y: auto; }
.ad-picker-foot { padding: var(--space-3) 22px; border-top: 1px solid var(--border); font-size: var(--text-small); color: var(--fg-muted); }
.ad-creative-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.ad-creative-info { padding: var(--space-3); flex: 1; }
.ad-creative-card .btn { margin: 0 var(--space-3) var(--space-3); justify-content: center; }

.output-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--space-4); }
/* Clip/video + output cards: always 2 per row, collapsing to 1 on narrow screens. */
@media (max-width: 640px) { .video-grid, .output-grid { grid-template-columns: 1fr; } }
.output-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.output-thumb { height: 120px; background: var(--surface-dark); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.4); font-size: var(--text-title); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.output-thumb.has-player { height: auto; max-height: 360px; width: 100%; }
.output-thumb .video-player { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.output-info { padding: var(--space-3) 14px; }
.output-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.output-info-head .output-title { flex: 1; min-width: 0; margin-bottom: 0; }
.output-title { font-weight: 600; font-size: var(--text-body); margin-bottom: var(--space-1); }
.output-meta { font-size: var(--text-small); color: var(--fg-muted); }
.output-rendering { font-size: 12px; color: var(--fg-muted); white-space: nowrap; align-self: center; }
.output-actions { display: flex; gap: var(--space-2); padding: 10px 14px; border-top: 1px solid var(--border); }

/* ── MingCute icon sizing (dashboards) ──────────────────────────────
   Icons render at 1em (via mingcute-icons.js) so they scale to their
   container's font-size. These bump fixed-glyph contexts. */
svg.lucide { vertical-align: -0.125em; }
.user-avatar svg, .creator-avatar svg, .campaign-brand-logo svg,
.collab-brand-logo svg, .brand-welcome-logo svg { width: 58%; height: 58%; }
.segment-thumb svg { width: 28px; height: 28px; }
.segment-thumb .thumb-play svg { width: 26px; height: 26px; }
.cp-stat-icon svg { width: 20px; height: 20px; }

/* ─── Reduced motion ───────────────────────────────────────────────
   Honor the OS setting platform-wide: kill transforms/animations but
   keep simple opacity/colour transitions for legibility. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .nav-item::before { transition: none; }
}