/* No blue tap flash on phones */
html { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   ClipAd Creator Dashboard — design-system layer (kobbe-ui/DESIGN_SYSTEM.md).
   Loaded ONLY by views/dashboard/partials/shell-top.ejs, after dashboard.css, so the
   Brand, Studio and Admin portals are untouched. Same shell and measurements as
   brand-ds.css / studio-ds.css; the accent is the system's Bright Orange #FF5900
   (dashboard.css :root — no override). Selectors are prefixed body.creator-portal
   so they outrank dashboard.css and each page's inline <style>.
   ========================================================================== */

body.creator-portal {
  --sd-sidebar-w: 222px;
  --sd-topbar-h: 45px;
  --sd-control-h: 32px;
  --side-fill: rgba(255, 255, 255, .06);
  --side-fill-hover: rgba(255, 255, 255, .09);
  --side-guide: rgba(255, 255, 255, .05);
  --side-text: rgba(255, 255, 255, .62);
  --side-text-hi: #F4EEE7;
  --side-lift: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 1px rgba(0, 0, 0, .35);
  --chart-grid: rgba(43, 33, 28, .09);
  --chart-axis: var(--fg-subtle);

  background: var(--surface-dark);
  font-size: var(--text-body);
}
body.creator-portal :is(.ov-kpi-val, .kpi-value, td, .an-views) { font-variant-numeric: tabular-nums; }

/* ── Frame ──────────────────────────────────────────────────────────────── */
body.creator-portal .app-shell.sd-app {
  display: grid; grid-template-columns: var(--sd-sidebar-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: 100vh; min-height: 0; background: var(--surface-dark);
  transition: grid-template-columns var(--dur-slow, 320ms) var(--ease-out);
}
body.creator-portal .app-shell.sd-app.is-collapsed { grid-template-columns: 64px minmax(0, 1fr); }

/* Sidebar */
body.creator-portal .sidebar.sd-side {
  position: relative; inset: auto; width: auto; height: auto; min-height: 0; transform: none;
  display: flex; flex-direction: column; padding: 0 14px 8px 12px; overflow: visible;
  background: var(--surface-dark); color: var(--side-text-hi); border: 0; box-shadow: none;
}
body.creator-portal .sd-side .nav-icon, body.creator-portal .sd-side svg { width: 14px; height: 14px; stroke-width: 1.5; flex: none; }
body.creator-portal .sd-brand { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding-left: 8px; }
body.creator-portal .sd-wordmark { display: flex; align-items: center; gap: 7px; color: var(--side-text-hi); text-decoration: none; font: 600 17px/1 var(--font-heading); word-spacing: .12em; white-space: nowrap; }
body.creator-portal .sd-wordmark .brand-mark { width: 20px; height: 20px; flex: none; }
body.creator-portal .sd-wordmark .brand-sub { font: inherit; color: var(--accent); letter-spacing: 0; text-transform: none; }
body.creator-portal .sd-iconbtn {
  position: relative; width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center;
  border-radius: 8px; color: var(--side-text); background: none; border: 0; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
body.creator-portal .sd-iconbtn:hover { background: var(--side-fill); color: var(--side-text-hi); }
body.creator-portal .sd-findrow { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
body.creator-portal .sd-find {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px;
  border: 0; border-radius: 8px; background: var(--side-fill); box-shadow: var(--side-lift);
  color: var(--side-text); font: 500 var(--text-small)/1 var(--font-body); text-align: left; cursor: pointer;
}
body.creator-portal .sd-find:hover { background: var(--side-fill-hover); }
body.creator-portal .sd-find span { flex: 1; }
body.creator-portal .sd-find kbd { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: rgba(255,255,255,.08); font: 500 10px/1 var(--font-body); }
body.creator-portal .sd-bell { width: 32px; height: 32px; background: var(--side-fill); box-shadow: var(--side-lift); }
body.creator-portal .sd-bell .topbar-badge {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; min-width: 18px; padding: 0; box-sizing: border-box; border-radius: 50%;
  background: var(--accent); color: #fff; font: 700 10px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 2px var(--surface-dark);
}
body.creator-portal .sd-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; padding: 0; overflow-y: auto; scrollbar-width: none; gap: 0; }
body.creator-portal .sd-nav::-webkit-scrollbar { display: none; }
body.creator-portal .sd-group { display: flex; align-items: center; height: 20px; margin-top: 14px; padding: 0 8px; font: 600 var(--text-small)/1 var(--font-body); color: var(--side-text-hi); }
body.creator-portal .sd-children { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 10px; padding-left: 11px; }
body.creator-portal .sd-children::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--side-guide); }
body.creator-portal .sd-side .nav-item {
  position: relative; display: flex; align-items: center; gap: 8px; height: 28px; flex: none; margin: 0; padding: 0 8px;
  border-radius: 6px; color: var(--side-text); background: none; font: 500 var(--text-small)/1 var(--font-body);
  text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast);
}
body.creator-portal .sd-side .nav-item:hover { background: rgba(255,255,255,.04); color: var(--side-text-hi); }
body.creator-portal .sd-side .nav-item.active { background: var(--side-fill); color: var(--side-text-hi); font-weight: 600; }
body.creator-portal .sd-side .nav-item.active::before { content: ''; position: absolute; left: -11px; top: 0; bottom: 0; width: 2px; background: var(--accent); border-radius: 0; }
body.creator-portal .sd-side .nav-item.sd-home.active::before { display: none; }
body.creator-portal .sd-side .nav-item::after { display: none; }
body.creator-portal .sd-side .nav-item > span:not(.nav-badge) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.creator-portal .sd-side .nav-badge { margin-left: auto; flex: none; }

/* Sidebar footer: account card */
body.creator-portal .sd-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: auto; }
body.creator-portal .sd-card {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: var(--side-fill); box-shadow: var(--side-lift);
  color: var(--side-text-hi); font: 500 var(--text-small)/1 var(--font-body); text-align: left; cursor: pointer;
}
body.creator-portal .sd-card:hover { background: var(--side-fill-hover); }
body.creator-portal .sd-card .user-avatar {
  width: 18px; height: 18px; flex: none; border-radius: 5px; display: grid; place-items: center;
  background-color: rgba(255,255,255,.1); background-size: cover; background-position: center; color: var(--side-text-hi); font: 600 10px/1 var(--font-body); border: 0;
}
body.creator-portal .sd-card .user-avatar svg { width: 11px; height: 11px; }
body.creator-portal .sd-card .user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: inherit; font: inherit; max-width: none; }
body.creator-portal .sd-card .topbar-caret { width: 12px; height: 12px; color: var(--side-text); margin: 0; }
body.creator-portal .sd-account { position: relative; }
body.creator-portal .sd-account .account-menu {
  position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% + 6px); min-width: 0; width: auto;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px;
}
body.creator-portal .account-menu-name { padding: 8px 10px 8px; font-size: var(--text-small); font-weight: 600; }
body.creator-portal .account-menu a { height: 32px; padding: 0 10px; border-radius: 8px; font-size: var(--text-body-sm); font-weight: 500; display: flex; align-items: center; gap: 8px; }
body.creator-portal .account-menu-sep { height: 1px; margin: 4px 0; }

/* Sidebar pop-outs: a lighter step of the charcoal, always on the top layer. */
body.creator-portal :is(.sd-account .account-menu, .notif-pop) {
  --sidebar-pop: #242424;
  --surface: var(--sidebar-pop); --surface-raised: var(--sidebar-pop); --bg: #1b1b1b;
  --surface-2: rgba(255, 255, 255, .08); --neutral-bg: rgba(255, 255, 255, .08);
  --fg: #F4EEE7; --heading: #F4EEE7; --fg-muted: rgba(255, 255, 255, .62); --fg-subtle: rgba(255, 255, 255, .42);
  --border: rgba(255, 255, 255, .09); --border-subtle: rgba(255, 255, 255, .07);
  background: var(--sidebar-pop) !important; color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
  z-index: 2147483000 !important;
  color-scheme: dark;
}
body.creator-portal .account-menu a { color: var(--fg); }
body.creator-portal .account-menu a:hover { background: var(--surface-2); color: var(--fg); }
body.creator-portal .account-menu a#logout-link { color: #ff7b7b; }
/* The sidebar is its own stacking context (view-transition-name), so lift the whole
   layer above the main panel to keep its pop-outs on top. */
body.creator-portal .sd-app > .sd-side { z-index: 70; }
body.creator-portal .notif-pop .notif-tab { background: rgba(255, 255, 255, .06); border-color: transparent; color: rgba(255, 255, 255, .72); }
body.creator-portal .notif-pop .notif-tab:hover { background: rgba(255, 255, 255, .1); color: #F4EEE7; border-color: transparent; }
body.creator-portal .notif-pop .notif-tab.on { background: rgba(255, 255, 255, .16); color: #F4EEE7; border-color: transparent; }
body.creator-portal .notif-pop .notif-act { background: rgba(255, 255, 255, .12); color: #F4EEE7; }
body.creator-portal .notif-pop .notif-act:hover { background: rgba(255, 255, 255, .18); filter: none; }

/* Notifications pop-out — same treatment as Studio: only All and Unread tabs, half-size
   type icons, light titles that go bold on hover, and title-only rows (description,
   time and action appear when the row is hovered or focused). */
body.creator-portal .notif-pop .notif-body { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.creator-portal .notif-pop .notif-tab:not([data-filter="all"]):not([data-filter="unread"]) { display: none; }
body.creator-portal .notif-pop .notif-ico { width: 22px; height: 22px; flex: none; }
body.creator-portal .notif-pop .notif-ico svg { width: 12px; height: 12px; }
body.creator-portal .notif-pop .notif-title { font-weight: 400; }
body.creator-portal .notif-pop .notif-row:is(:hover, :focus-within) .notif-title { font-weight: 600; }
body.creator-portal .notif-pop .notif-row .notif-body,
body.creator-portal .notif-pop .notif-row .notif-meta { display: none; }
body.creator-portal .notif-pop .notif-row:is(:hover, :focus-within) .notif-body { display: block; }
body.creator-portal .notif-pop .notif-row:is(:hover, :focus-within) .notif-meta { display: flex; }
body.creator-portal .notif-pop .notif-row { align-items: center; }
body.creator-portal .notif-pop .notif-row:is(:hover, :focus-within) { align-items: flex-start; }

/* Collapsed rail */
body.creator-portal .sd-app.is-collapsed .sd-side { padding-inline: 12px; width: 56px; flex: none; }
body.creator-portal .sd-app.is-collapsed :is(.sd-wordmark > span, .sd-find span, .sd-find kbd, .sd-group, .nav-item > span, .sd-card .user-name, .sd-card .topbar-caret) { display: none; }
body.creator-portal .sd-app.is-collapsed .sd-brand { flex-direction: column; height: auto; gap: 8px; padding: 12px 0 4px; }
body.creator-portal .sd-app.is-collapsed .sd-findrow { flex-direction: column; }
body.creator-portal .sd-app.is-collapsed :is(.sd-find, .sd-card, .nav-item) { justify-content: center; padding: 0; }
body.creator-portal .sd-app.is-collapsed .sd-find { width: 32px; flex: none; }
body.creator-portal .sd-app.is-collapsed .sd-children { margin: 6px 0 0; padding: 0; }
body.creator-portal .sd-app.is-collapsed .sd-children::before, body.creator-portal .sd-app.is-collapsed .nav-item.active::before { display: none; }
body.creator-portal .sd-app.is-collapsed .sd-account .account-menu { right: auto; width: 220px; }

/* Main panel + topbar */
body.creator-portal .main-content.sd-main { min-width: 0; min-height: 0; margin: 0; padding: 6px 4px 6px 0; display: flex; background: none; overflow: hidden; }
body.creator-portal .sd-panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
body.creator-portal .topbar.sd-topbar {
  position: static; height: var(--sd-topbar-h); min-height: 0; flex: none; display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0 32px; background: var(--bg); border: 0; border-bottom: 1px solid var(--border); box-shadow: none; backdrop-filter: none;
}
body.creator-portal .sd-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-body-sm); color: var(--fg-muted); white-space: nowrap; }
body.creator-portal .sd-crumbs a { color: var(--fg-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
body.creator-portal .sd-crumbs a:hover { color: var(--fg); }
body.creator-portal .sd-crumbs svg { width: 12px; height: 12px; color: var(--fg-subtle); flex: none; stroke-width: 1.75; }
body.creator-portal .sd-crumbs .topbar-title, body.creator-portal .sd-crumbs [aria-current] { margin: 0; padding: 0; font: 600 var(--text-body-sm)/1 var(--font-body); color: var(--fg); letter-spacing: 0; }
body.creator-portal .sd-topbar .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
body.creator-portal .sd-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 25px 32px 32px; scrollbar-gutter: stable; }
body.creator-portal .sd-scroll::-webkit-scrollbar { width: 7px; }
body.creator-portal .sd-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
body.creator-portal #portal-view { display: flex; flex-direction: column; gap: 12px; max-width: none; margin: 0; padding: 0; }
body.creator-portal #portal-view > * { margin-top: 0; margin-bottom: 0; }
body.creator-portal #portal-view > style, body.creator-portal #portal-view > script { display: none; }
body.creator-portal .email-verify-banner { margin: 0 0 12px; border-radius: var(--radius-md); font-size: var(--text-body-sm); }

/* Find page-jump */
.sd-find-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,20,.45); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; }
.sd-find-dialog { width: min(480px, calc(100vw - 32px)); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 16px; display: flex; flex-direction: column; gap: 8px; animation: menuPop var(--dur-base) var(--ease-out); }
.sd-find-input { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: 400 var(--text-body) var(--font-body); color: var(--fg); outline: none; }
.sd-find-input:focus { border-color: #cfc7be; box-shadow: 0 0 0 3px rgba(31, 31, 31, .10); }
.sd-find-list { display: flex; flex-direction: column; gap: 2px; min-height: 120px; }
.sd-find-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font: 500 var(--text-body-sm) var(--font-body); }
.sd-find-item svg { width: 14px; height: 14px; color: var(--fg-muted); }
.sd-find-item:hover, .sd-find-item.is-first { background: var(--surface-2); }
.sd-find-empty { padding: 16px 10px; color: var(--fg-muted); font-size: var(--text-body-sm); }

/* ── Titles ─────────────────────────────────────────────────────────────── */
body.creator-portal :is(.ov-card-head h3, .settings-card h2, .settings-panel h2, .cp-panel-head h3, .cp-panel-head h2, .mh-block-title, .form-section-title, .campaign-row-title) {
  font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); letter-spacing: 0; text-transform: none; margin: 0;
}
body.creator-portal :is(.form-section-sub, .field-hint, .muted-note, .an-sub, .an-muted, .campaign-row-meta) { font-size: var(--text-body-sm); color: var(--fg-muted); }
body.creator-portal .muted-note { font-size: var(--text-small); }

/* ── KPI strip (overview + analytics hero numbers) ─────────────────────── */
body.creator-portal .ov-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; margin: 0 0 12px; }
body.creator-portal .ov-kpi {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 69px; padding: 13px 16px 11px;
  background: none; border: 0; border-radius: var(--radius-md); box-shadow: none;
}
body.creator-portal .ov-kpi + .ov-kpi::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--border); }
body.creator-portal .ov-kpi-label { order: 1; margin: 0; font: 500 var(--text-body-sm)/16px var(--font-body); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.creator-portal .ov-kpi-val { order: 2; font: 600 var(--text-lg)/24px var(--font-heading); color: var(--fg); letter-spacing: 0; }
body.creator-portal .ov-kpi-sub { order: 3; margin: 0; font-size: var(--text-body-sm); line-height: 1.3; color: var(--fg-muted); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
body.creator-portal :is(.ov-card, .ov-welcome, .settings-card, .campaign-row, .campaign-card, .creator-card, .collab-card, .creative-card,
  .segment-card, .cp-panel, .cp-ins-card, .wizard-card, .ord-detail, .mh-block, .cb-modal-card) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
body.creator-portal :is(.ov-card, .ov-welcome, .settings-card, .cp-panel) { padding: 16px; }
body.creator-portal :is(.campaign-row, .campaign-card, .creator-card, .collab-card, .creative-card, .segment-card):hover { transform: none; box-shadow: var(--shadow-sm); }
body.creator-portal .ov-card-head { margin-bottom: 8px; }
body.creator-portal .ov-link { font-size: var(--text-small); font-weight: 500; color: var(--fg-muted); }
body.creator-portal .ov-welcome h2 { font: 600 var(--text-title-sm)/1.3 var(--font-heading); word-spacing: .12em; }
body.creator-portal .ov-welcome p { font-size: var(--text-body-sm); }
body.creator-portal .ov-item-ic, body.creator-portal .ov-act-ic { background: var(--surface-2); color: var(--fg-muted); }
body.creator-portal .ov-item-title, body.creator-portal .ov-act-title { font-size: var(--text-body-sm); }
body.creator-portal .ov-item-cta { font-weight: 500; }
body.creator-portal .ov-count { background: var(--neutral-bg); font-weight: 600; }
body.creator-portal .settings-card + .settings-card { margin-top: 12px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
body.creator-portal .btn {
  height: var(--sd-control-h); min-height: 0; padding: 0 12px; gap: 8px; border-radius: 8px; border: 1px solid transparent;
  font: 600 var(--text-body-sm)/1 var(--font-body); letter-spacing: 0; text-transform: none; box-shadow: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
body.creator-portal .btn svg { width: 14px; height: 14px; }
body.creator-portal .btn:active { transform: translateY(1px); }
body.creator-portal .btn-accent, body.creator-portal .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
body.creator-portal .btn-accent:hover, body.creator-portal .btn-primary:hover { background: var(--accent-dark); color: #fff; border-color: transparent; }
body.creator-portal .btn-ghost { background: transparent; color: var(--fg-muted); font-weight: 500; border-color: transparent; }
body.creator-portal .btn-ghost:hover { background: var(--neutral-bg); color: var(--fg); border-color: transparent; }
body.creator-portal .btn-outline, body.creator-portal .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); }
body.creator-portal .btn-outline:hover, body.creator-portal .btn-secondary:hover { background: var(--surface-raised); border-color: var(--border-strong); }
body.creator-portal .btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
body.creator-portal .btn-sm { height: 28px; padding: 0 8px; font-size: var(--text-small); }
body.creator-portal .btn-lg { height: 44px; padding: 0 20px; font-size: var(--text-body); border-radius: var(--radius-md); }
body.creator-portal .btn[disabled], body.creator-portal .btn:disabled { opacity: .45; pointer-events: none; }
body.creator-portal .sd-topbar .btn { height: 28px; font-size: var(--text-small); padding: 0 10px; gap: 6px; }
body.creator-portal .sd-topbar .btn svg { width: 12px; height: 12px; }
body.creator-portal .btn:not(.btn-accent):not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-outline):not(.btn-secondary) { background: var(--surface); color: var(--fg); border-color: var(--border); }
body.creator-portal .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.creator-portal .card-kebab { width: 28px; height: 28px; border-radius: 8px; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
body.creator-portal .form-grid { gap: 12px; }
body.creator-portal :is(.form-field, .form-group) { gap: 4px; }
body.creator-portal :is(.form-field, .form-group) > label { margin: 0 0 4px; font: 600 var(--text-small)/1.3 var(--font-body); color: var(--fg-muted); text-transform: none; letter-spacing: 0; }
body.creator-portal :is(.form-field, .form-group) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
body.creator-portal .field-input:not(textarea), body.creator-portal .filter-bar :is(select, input) {
  height: var(--sd-control-h); padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-raised); color: var(--fg); font: 400 var(--text-body-sm) var(--font-body); box-shadow: none;
}
body.creator-portal :is(.form-field, .form-group) textarea, body.creator-portal textarea.field-input {
  min-height: 88px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised);
  color: var(--fg); font: 400 var(--text-body-sm)/1.5 var(--font-body); box-shadow: none;
}
body.creator-portal :is(.form-field, .form-group, .filter-bar) :is(input, select, textarea):hover, body.creator-portal .field-input:hover { border-color: var(--border-strong); }
body.creator-portal :is(.form-field, .form-group, .filter-bar) :is(input, select, textarea):focus, body.creator-portal .field-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
body.creator-portal :is(.form-field, .form-group, .filter-bar) :is(input, textarea)::placeholder, body.creator-portal .field-input::placeholder { color: var(--fg-subtle); }
body.creator-portal input[type="checkbox"], body.creator-portal input[type="radio"] { accent-color: var(--accent); }
body.creator-portal .filter-bar { gap: 8px; margin-bottom: 12px; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
body.creator-portal :is(.campaign-tabs, .filter-tabs) { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
body.creator-portal :is(.campaign-tab, .filter-tab, .settings-tab) {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; border: 0;
  background: none; color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body); box-shadow: none; text-align: left;
}
body.creator-portal :is(.campaign-tab, .filter-tab, .settings-tab) svg { width: 14px; height: 14px; }
body.creator-portal :is(.campaign-tab, .filter-tab, .settings-tab):hover { background: var(--neutral-bg); color: var(--fg); }
body.creator-portal :is(.campaign-tab, .filter-tab, .settings-tab).active { background: var(--surface-2); color: var(--fg); font-weight: 600; }

/* ── Status pills, chips ───────────────────────────────────────────────── */
body.creator-portal :is(.status-badge, .status-badge-sm, .tier-badge, .an-pill, .rc-pill, .ord-pill, .cp-badge, .verif-badge, .country-chip, .mh-tag) {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 600 var(--text-caption)/1 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
}

/* ── Menus ─────────────────────────────────────────────────────────────── */
body.creator-portal :is(.campaign-menu, .card-menu) {
  min-width: 180px; padding: 4px; background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
body.creator-portal .campaign-menu-item {
  height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 8px;
  font: 500 var(--text-body-sm)/1 var(--font-body); color: var(--fg); background: none;
}
body.creator-portal .campaign-menu-item svg { width: 14px; height: 14px; color: var(--fg-muted); }
body.creator-portal .campaign-menu-item:hover { background: var(--surface-2); color: var(--fg); }
body.creator-portal .campaign-menu-item.danger, body.creator-portal .campaign-menu-item.danger svg { color: var(--danger); }
body.creator-portal .campaign-menu-item.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Empty states ──────────────────────────────────────────────────────── */
body.creator-portal .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 200px; padding: 40px 24px; color: var(--fg-muted); font-size: var(--text-body-sm); background: none; border: 0; }
body.creator-portal .empty-state p { max-width: 46ch; margin: 0 auto; line-height: 1.5; }
body.creator-portal .empty-state h3, body.creator-portal .empty-state h4 { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); margin: 0 auto; }

/* Every empty state is centered, horizontally. Pages reveal some of them with an
   inline display:block (not flex), so centering can't rely on align-items alone:
   text-align + auto side margins on the children cover both layouts. */
body.creator-portal :is(.empty-state, .mh-empty, .rv-empty, .rv-note, .notif-empty-in, .ov-allclear) { text-align: center; }
body.creator-portal :is(.empty-state, .mh-empty) > * { margin-left: auto; margin-right: auto; }
/* An empty state rendered INSIDE a card grid must span every column to center on the page. */
body.creator-portal :is(.creative-grid, .creator-grid, .video-grid) > :is(.empty-state, .mh-empty) { grid-column: 1 / -1; }
body.creator-portal .ov-allclear { justify-content: center; }
body.creator-portal .notif-empty-in { display: flex; flex-direction: column; align-items: center; }

/* ── Tables ────────────────────────────────────────────────────────────── */
body.creator-portal #portal-view table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
body.creator-portal #portal-view table th { height: 25px; padding: 6px; text-align: left; font-weight: 500; color: var(--fg-muted); background: none; border: 0; text-transform: none; letter-spacing: 0; font-size: 10px; }
body.creator-portal #portal-view table td { height: 23px; padding: 0 6px; border: 0; }
body.creator-portal #portal-view table tbody tr:nth-child(odd) td { background: var(--surface-2); }
body.creator-portal #portal-view table tbody td:first-child { border-radius: 6px 0 0 6px; }
body.creator-portal #portal-view table tbody td:last-child { border-radius: 0 6px 6px 0; }

/* ── Dialogs, pop-outs, toasts ─────────────────────────────────────────── */
body.creator-portal :is(.cb-modal-overlay, .cb-pop, .cp-modal-overlay) { background: rgba(20,20,20,.45); backdrop-filter: blur(2px); }
body.creator-portal :is(.cb-modal-card, .cb-pop-card) { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
body.creator-portal :is(.cb-pop-head h3, .cb-modal-card > h2) { font: 600 var(--text-title-sm)/1.3 var(--font-heading); word-spacing: .12em; }
body.creator-portal #toast-container { bottom: 20px; }
body.creator-portal .toast { background: var(--surface-dark); color: var(--on-dark, #F4EEE7); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font: 500 var(--text-body-sm) var(--font-body); padding: 12px 16px; }
body.creator-portal .toast.success { border-left: 3px solid var(--success); }
body.creator-portal .toast.error { border-left: 3px solid var(--danger-solid); }

/* Settings: notification-preference icons and toggles follow Studio's calm treatment */
body.creator-portal .np-ico, body.creator-portal .np-ico[class*="tint-"] { background: #ece6df !important; color: var(--fg) !important; }
body.creator-portal .np-sw { gap: 6px; }
body.creator-portal .np-track { width: 29px; height: 17px; }
body.creator-portal .np-track::after { top: 1.5px; left: 1.5px; width: 12px; height: 12px; }
body.creator-portal .np-sw input:checked + .np-track::after { transform: translateX(12px); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body.creator-portal .ov-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.creator-portal .ov-kpi::before { display: none; }
}
@media (min-width: 769px) and (max-width: 900px) {
  body.creator-portal .app-shell.sd-app, body.creator-portal .app-shell.sd-app.is-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
  body.creator-portal .sd-side { padding-inline: 12px; }
  body.creator-portal .sd-side :is(.sd-wordmark > span, .sd-find span, .sd-find kbd, .sd-group, .nav-item > span, .sd-card .user-name, .sd-card .topbar-caret) { display: none; }
  body.creator-portal .sd-brand { flex-direction: column; height: auto; gap: 8px; padding: 12px 0 4px; }
  body.creator-portal .sd-findrow { flex-direction: column; }
  body.creator-portal .sd-side :is(.sd-find, .sd-card, .nav-item) { justify-content: center; padding: 0; }
  body.creator-portal .sd-find { width: 32px; flex: none; }
  body.creator-portal .sd-children { margin: 6px 0 0; padding: 0; }
  body.creator-portal .sd-children::before, body.creator-portal .sd-side .nav-item.active::before { display: none; }
  body.creator-portal .sd-account .account-menu { right: auto; width: 220px; }
  body.creator-portal #sd-collapse { display: none; }
}
@media (max-width: 560px) {
  body.creator-portal .sd-scroll { padding: 24px 16px; }
  body.creator-portal .sd-topbar { padding: 0 16px; }
  body.creator-portal .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ══ Creator-only pages ═══════════════════════════════════════════════════
   Videos, Segments, Outputs, Campaigns, Analytics and Audience use class names
   the Brand portal does not, so they are mapped onto the same system here. */

/* Page titles inside a page (section headings): 14px/600 heading face */
body.creator-portal :is(.section-header h3, .panel-title, .review-header h3, .upload-zone h3, .aud-section-title, .aud-card-title, .output-title, .video-title, .page-videos h3, .page-segments h3, .page-outputs h3) {
  font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); letter-spacing: 0; text-transform: none; margin: 0;
}
body.creator-portal .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 0; border: 0; }
body.creator-portal .section-header :is(span, p, small) { font-size: var(--text-body-sm); color: var(--fg-muted); }
body.creator-portal #portal-view p a:not(.btn), body.creator-portal .section-header a:not(.btn) { color: var(--accent-dark); font-weight: 500; }
body.creator-portal .page-outputs > p { font-size: var(--text-body-sm); color: var(--fg-muted); margin: 0 0 12px !important; }

/* KPI strip: Analytics (.an-stats) — hairline-divided cells, no boxes */
body.creator-portal .an-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; margin: 0 0 12px; }
body.creator-portal .an-stat {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 69px; padding: 13px 16px 11px;
  background: none; border: 0; border-radius: var(--radius-md); box-shadow: none;
}
body.creator-portal .an-stat + .an-stat::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--border); }
body.creator-portal .an-stat-label { order: 1; margin: 0; font: 500 var(--text-body-sm)/16px var(--font-body); color: var(--fg-muted); }
body.creator-portal .an-stat-val { order: 2; font: 600 var(--text-lg)/24px var(--font-heading); color: var(--fg); letter-spacing: 0; font-variant-numeric: tabular-nums; }
body.creator-portal .an-stat-val.accent { color: var(--fg); }
@media (max-width: 1100px) {
  body.creator-portal .an-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.creator-portal .an-stat + .an-stat::before { display: none; }
}
/* Audience KPIs keep their sparkline layout: boxed cards */
body.creator-portal .aud-kpis { gap: 12px; margin: 0 0 12px; }
body.creator-portal .aud-kpi { padding: 14px 16px; background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
body.creator-portal .aud-kpi-val { font: 600 var(--text-lg)/24px var(--font-heading); color: var(--fg); letter-spacing: 0; font-variant-numeric: tabular-nums; }
body.creator-portal .aud-kpi-val.accent { color: var(--fg); }
body.creator-portal .aud-kpi-label { font: 500 var(--text-body-sm)/16px var(--font-body); color: var(--fg-muted); margin-top: 4px; }

/* Cards */
body.creator-portal :is(.an-table-wrap, .aud-card, .aud-empty, .aud-inline-empty, .ad-creative-card, .output-card, .video-card, .upload-zone, .segment-card, .collab-card, .campaign-card, .ov-band, .ov-setup) {
  background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
body.creator-portal :is(.aud-card, .aud-empty) { padding: 16px; }
body.creator-portal .an-table-wrap { padding: 8px; overflow: visible; }
body.creator-portal .ov-band { padding: 12px 16px; }
body.creator-portal .ov-setup { background: var(--surface-2); }
body.creator-portal :is(.aud-section) { margin-bottom: 12px; }
body.creator-portal .aud-section-head { margin-bottom: 8px; }
body.creator-portal .aud-section-note, body.creator-portal .aud-coverage, body.creator-portal .aud-estnote { font-size: var(--text-small); color: var(--fg-subtle); }
body.creator-portal .aud-grid { gap: 12px; }
body.creator-portal .aud-coverage { margin-bottom: 12px; }
body.creator-portal :is(.aud-refresh-btn, .an-refresh) {
  height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body);
}
body.creator-portal :is(.aud-refresh-btn, .an-refresh):hover { background: var(--surface-raised); border-color: var(--border-strong); color: var(--fg); }

/* Platform selector (Audience) reads as the system's tab row */
body.creator-portal .aud-selector { gap: 4px; margin-bottom: 8px; }
body.creator-portal .aud-pill { height: 28px; padding: 0 10px; border-radius: 6px; border: 0; background: none; color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body); box-shadow: none; }
body.creator-portal .aud-pill:hover { background: var(--neutral-bg); color: var(--fg); }
body.creator-portal .aud-pill.active, body.creator-portal .aud-pill.is-active, body.creator-portal .aud-pill[aria-pressed="true"] { background: var(--surface-2); color: var(--fg); font-weight: 600; }

/* Analytics table */
body.creator-portal .an-table thead th { font-size: 10px; letter-spacing: 0; text-transform: none; }
body.creator-portal .an-table tbody tr:hover td { background: var(--surface-2); }
body.creator-portal :is(.an-camp, .an-views) { font-weight: 600; color: var(--fg); }
body.creator-portal .an-earn { font-weight: 600; }
body.creator-portal .an-pill { font: 600 var(--text-caption)/1 var(--font-body); height: 20px; padding: 0 8px; text-transform: none; }
body.creator-portal .an-review { height: 24px; padding: 0 8px; }

/* Video + output grids: compact cards, 12px gap */
body.creator-portal :is(.video-grid, .output-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 640px) { body.creator-portal :is(.video-grid, .output-grid) { grid-template-columns: 1fr; } }
body.creator-portal :is(.video-card, .output-card) { gap: 0; overflow: visible; }
body.creator-portal :is(.video-card, .output-card):hover { transform: none; }
body.creator-portal :is(.video-card:hover .video-thumb, .output-card:hover .output-thumb) { box-shadow: none; }
body.creator-portal :is(.video-thumb, .output-thumb) { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
body.creator-portal :is(.video-info, .output-info) { padding: 12px 14px 14px; background: none; display: flex; flex-direction: column; gap: 8px; }
body.creator-portal .video-info-head, body.creator-portal .output-info-head { align-items: flex-start; }
body.creator-portal :is(.video-title, .output-title) { font-size: var(--text-body-sm); margin: 0; }
body.creator-portal :is(.video-meta, .output-meta) { font-size: var(--text-small); color: var(--fg-muted); }
body.creator-portal .output-actions { padding: 0; border: 0; }

/* Upload zone */
body.creator-portal .upload-zone { padding: 32px 24px; border: 1px dashed var(--border-strong); box-shadow: none; background: var(--surface); }
body.creator-portal .upload-zone p { font-size: var(--text-body-sm); color: var(--fg-muted); }
body.creator-portal .upload-zone .upload-icon { color: var(--fg-muted); }
body.creator-portal .upload-zone.dragover { border-color: var(--accent); background: var(--accent-softer); }
body.creator-portal .progress-bar { height: 6px; background: var(--surface-2); border-radius: 999px; }
body.creator-portal .progress-fill { background: var(--accent); }

/* Segments */
body.creator-portal .page-segments { display: flex; flex-direction: column; gap: 12px; }
body.creator-portal .video-selector { display: flex; flex-wrap: wrap; gap: 8px; }
body.creator-portal .segment-list { gap: 12px; }
body.creator-portal .review-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* Campaigns: headings and the marketplace tab row */
body.creator-portal .page-campaigns h2, body.creator-portal #portal-view h2:not(.empty-state *) { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; letter-spacing: 0; color: var(--fg); }
body.creator-portal .video-chip { height: 28px; padding: 0 10px; border-radius: 6px; border: 0; background: var(--surface); color: var(--fg-muted); font: 500 var(--text-small)/1 var(--font-body); box-shadow: var(--shadow-sm); }
body.creator-portal .video-chip:hover { background: var(--surface-raised); color: var(--fg); }
body.creator-portal .video-chip.selected { background: var(--surface-2); color: var(--fg); font-weight: 600; box-shadow: none; }
body.creator-portal .segment-card { padding: 12px 14px; }
body.creator-portal .segment-card :is(.segment-title, h4) { font: 600 var(--text-body-sm)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal .segment-card :is(.segment-time, .segment-score, .segment-clip-state) { font-size: var(--text-small); color: var(--fg-muted); }

/* Campaigns: engagement cards + marketplace cards */
body.creator-portal .eng-card { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); padding: 16px; }
body.creator-portal .eng-card:hover { box-shadow: var(--shadow-sm); border-color: transparent; }
body.creator-portal .eng-card.cb-new { background: var(--surface-2); }
body.creator-portal .eng-title { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal .eng-logo { width: 36px; height: 36px; }
body.creator-portal :is(.eng-status, .campaign-tag) { font: 600 var(--text-caption)/1 var(--font-body); height: 20px; padding: 0 8px; border-radius: 999px; align-items: center; display: inline-flex; }
body.creator-portal .campaign-grid { gap: 12px; }
body.creator-portal .campaign-title { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; }
body.creator-portal .campaign-brand-name { font: 600 var(--text-body-sm)/1.3 var(--font-body); }
body.creator-portal .campaign-budget .budget-amount { font: 600 var(--text-lg)/24px var(--font-heading); }
body.creator-portal .eng-flag { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border-color: transparent; font: 600 var(--text-small)/1 var(--font-body); }
body.creator-portal .eng-flag:hover { background: var(--neutral-bg); }
body.creator-portal select, body.creator-portal #portal-view input[type="text"], body.creator-portal #portal-view input[type="search"], body.creator-portal #portal-view input[type="number"], body.creator-portal #portal-view input[type="url"] {
  height: var(--sd-control-h); padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--fg); font: 400 var(--text-body-sm) var(--font-body);
}
body.creator-portal #portal-view input:focus, body.creator-portal select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }


/* ==========================================================================
   Studio parity (Studio is the reference): intro row, KPI strips, media cards,
   upload zone, empty states, section titles and flat status labels.
   ========================================================================== */

/* ── Page intro row (sentence left, page actions right) ─────────────────── */
body.creator-portal .page-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 12px; padding: 0; border: 0; min-height: 0;
}
body.creator-portal .page-header-left { min-width: 0; }
body.creator-portal .page-header .page-subtitle { margin: 0; max-width: 78ch; font-size: var(--text-body-sm); line-height: 1.5; color: var(--fg-muted); }
body.creator-portal .page-header .page-subtitle a { color: var(--accent); }
body.creator-portal .page-header-actions { display: flex; align-items: center; gap: 4px; flex: none; }

/* ── Section titles ─────────────────────────────────────────────────────── */
body.creator-portal :is(.section-header h2, .section-header h3, .ac-sec-title, .aud-section-title, .aud-card-title, .review-header h3, .upload-zone h3) {
  font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); letter-spacing: 0; text-transform: none; margin: 0;
}
body.creator-portal .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 8px; }
body.creator-portal :is(.ac-sec-sub, .aud-section-note, .aud-coverage) { font-size: var(--text-body-sm); color: var(--fg-muted); }
body.creator-portal .aud-section-head :is(svg, i) { color: var(--fg-muted); }

/* ── KPI strips on Analytics + Audience: same strip as Overview ─────────── */
body.creator-portal .an-stats, body.creator-portal .aud-kpis {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; margin: 0 0 12px;
}
body.creator-portal :is(.an-stat, .aud-kpi) {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 69px; padding: 13px 16px 11px;
  background: none; border: 0; border-radius: var(--radius-md); box-shadow: none;
}
body.creator-portal :is(.an-stat, .aud-kpi) + :is(.an-stat, .aud-kpi)::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--border); }
body.creator-portal :is(.an-stat-label, .aud-kpi-label) { order: 1; margin: 0; font: 500 var(--text-body-sm)/16px var(--font-body); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.creator-portal :is(.an-stat-val, .aud-kpi-val) { order: 2; font: 600 var(--text-lg)/24px var(--font-heading); color: var(--fg); letter-spacing: 0; }
body.creator-portal :is(.an-stat-val, .aud-kpi-val):is(.accent, .money) { color: var(--fg); }
body.creator-portal .aud-kpi-foot { order: 3; margin: 0; font-size: var(--text-body-sm); color: var(--fg-muted); }
@media (max-width: 720px) {
  body.creator-portal :is(.an-stats, .aud-kpis) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.creator-portal :is(.an-stat, .aud-kpi) + :is(.an-stat, .aud-kpi)::before { display: none; }
}
body.creator-portal .an-table-wrap { background: none; border: 0; border-radius: 0; overflow: visible; }

/* ── Media cards (videos, outputs): boxed like Studio's library ─────────── */
body.creator-portal .video-grid { gap: 12px; }
body.creator-portal :is(.video-card, .output-card) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: visible; gap: 0;
}
body.creator-portal :is(.video-card, .output-card):hover { transform: none; box-shadow: var(--shadow-sm); }
body.creator-portal :is(.video-card:hover .video-thumb, .output-card:hover .output-thumb) { box-shadow: none; }
body.creator-portal :is(.video-card .video-thumb, .output-card .output-thumb) { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
body.creator-portal :is(.video-info, .output-info) { padding: 12px 16px 16px; }
body.creator-portal :is(.video-title, .output-title) { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal :is(.video-meta, .clip-stat) { font-size: var(--text-small); color: var(--fg-muted); }
body.creator-portal .duration-badge { background: rgba(20,20,20,.72); color: #fff; font: 600 var(--text-caption)/1 var(--font-body); padding: 3px 6px; border-radius: 4px; }

/* ── Upload zone ────────────────────────────────────────────────────────── */
body.creator-portal .upload-zone { padding: 28px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
body.creator-portal .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-softer); }
body.creator-portal .upload-zone h3 { margin: 8px 0 4px; }
body.creator-portal .upload-zone p { font-size: var(--text-body-sm); margin: 0 0 12px; }
body.creator-portal .upload-zone .upload-icon svg { width: 22px; height: 22px; color: var(--fg-subtle); }

/* ── Empty states: small icon, title, one line (no illustration) ────────── */
body.creator-portal .empty-state .empty-illu { display: none; }
body.creator-portal .empty-state:has(.empty-illu)::before {
  content: ''; width: 22px; height: 22px; background: var(--fg-subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.4-7.2A2 2 0 0 1 7.3 4.5h9.4a2 2 0 0 1 1.9 1.3L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.4-7.2A2 2 0 0 1 7.3 4.5h9.4a2 2 0 0 1 1.9 1.3L21 13v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.creator-portal .empty-state p { font-size: var(--text-body-sm); }

/* ── Status labels: coloured text, no fill (Studio's flat labels) ───────── */
body.creator-portal :is(.status-badge, .status-badge-sm, .video-status, .segment-status-badge, .an-pill, .tier-badge, .rc-pill, .ord-pill) {
  background: none; padding-left: 0; padding-right: 0;
}

/* ── Analytics: top campaigns list (Studio's top-content list) ───────────── */
body.creator-portal .an-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body.creator-portal .an-top-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
body.creator-portal .an-top-row:last-child { border-bottom: 0; padding-bottom: 0; }
body.creator-portal .an-top-row:first-child { padding-top: 0; }
body.creator-portal .an-rank { flex: 0 0 24px; height: 24px; border-radius: 999px; background: var(--surface-2); color: var(--fg-muted); display: flex; align-items: center; justify-content: center; font: 600 var(--text-caption)/1 var(--font-body); }
body.creator-portal .an-top-main { flex: 1 1 auto; min-width: 0; }
body.creator-portal .an-top-title { font: 600 var(--text-body-sm)/1.3 var(--font-body); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.creator-portal .an-top-sub { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
body.creator-portal .an-top-sub .cp-bar-track { flex: 1 1 auto; max-width: 320px; height: 6px; }
body.creator-portal .an-top-views { flex: 0 0 auto; text-align: right; }
body.creator-portal .an-top-views .v { display: block; font: 600 var(--text-body-sm)/1.2 var(--font-body); color: var(--fg); font-variant-numeric: tabular-nums; }
body.creator-portal .an-top-views .l { display: block; font-size: var(--text-caption); color: var(--fg-subtle); }

/* ── Connected accounts: Studio's channel card ───────────────────────────── */
body.creator-portal .platform-list { gap: 8px; }
body.creator-portal .platform-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px 16px; gap: 12px; }
body.creator-portal .pf-icon { width: 32px; height: 32px; border-radius: var(--radius-md); }
body.creator-portal .pf-icon svg { width: 17px; height: 17px; }
body.creator-portal .platform-meta .pf-name-row { display: flex; align-items: center; gap: 8px; }
body.creator-portal .platform-meta .pf-name { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal .platform-meta .pf-status { font-size: var(--text-caption); }
body.creator-portal .ch-status { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; }
body.creator-portal .ch-status svg { width: 12px; height: 12px; }
body.creator-portal .ch-status.connected { background: var(--success); color: #fff; }
body.creator-portal .ch-status.revoked { background: #fff; border: 1px solid var(--border); color: var(--danger); }
body.creator-portal .ch-status.off { background: var(--fg-muted); color: #fff; }
body.creator-portal .ch-dash { display: block; width: 9px; height: 2px; border-radius: 1px; background: currentColor; }
body.creator-portal .ch-reach { display: flex; gap: 20px; margin-left: auto; flex: 0 0 auto; text-align: right; }
body.creator-portal .ch-reach .rc-v { font: 600 var(--text-body)/1.2 var(--font-heading); color: var(--fg); font-variant-numeric: tabular-nums; }
body.creator-portal .ch-reach .rc-l { font-size: var(--text-caption); color: var(--fg-subtle); }
body.creator-portal .pf-kebab { width: 28px; height: 28px; border-radius: 8px; }

/* ── Earnings: calm rate card (the balance strip uses .ov-kpis) ──────────── */
body.creator-portal .earn-amount { font: 600 var(--text-lg)/24px var(--font-heading); color: var(--fg); }
body.creator-portal .earn-amount.muted { font-size: var(--text-lg); }
body.creator-portal .earn-tier-badge, body.creator-portal .earn-tier-badge.muted { background: none; padding: 0; color: var(--fg-muted); font: 500 var(--text-body-sm)/16px var(--font-body); }
body.creator-portal .earn-facts li { font-size: var(--text-body-sm); }
body.creator-portal .earn-facts li svg { color: var(--fg-muted); }
body.creator-portal #payout-balance.ov-kpis { margin-bottom: 12px; }
body.creator-portal #payout-balance .ov-kpi-val { color: var(--fg); }

/* ── Pop-outs: Studio's dialog look ──────────────────────────────────────── */
body.creator-portal :is(.rv-modal-overlay, .rating-pop-overlay, .sla-overlay, .video-modal-overlay) { background: rgba(20,20,20,.45); backdrop-filter: blur(2px); }
body.creator-portal :is(.rv-modal, .rating-pop, .sla-overlay-card, .gate-card) {
  background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}
body.creator-portal :is(.rv-modal h3, .rating-pop h3, .sla-overlay-head, .gate-title) { font: 600 var(--text-title-sm)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal .sla-overlay-head { border-bottom-color: var(--border); }

/* Channel card: one row, actions stay on the name line (also on phones). */
body.creator-portal .platform-row { flex-wrap: nowrap; }
body.creator-portal .platform-meta { flex: 1 1 auto; min-width: 0; }
body.creator-portal .platform-meta .pf-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; margin-top: 0; }
body.creator-portal .platform-meta .pf-status.error { white-space: normal; }
body.creator-portal .platform-actions { flex: 0 0 auto; width: auto; margin-left: 0; }
body.creator-portal .ch-reach .rc-v { font-size: var(--text-body-sm); }
@media (max-width: 560px) {
  body.creator-portal .platform-row { flex-wrap: nowrap; padding: 10px 12px; gap: 10px; }
  body.creator-portal .platform-actions { width: auto; }
  body.creator-portal .platform-row .btn { padding: 0 10px; }
}

/* ── Overview: "Get set up" card — same look as Studio's "Get your workspace running" ── */
body.creator-portal .ov-setup { padding: 16px; background: var(--surface); }
body.creator-portal .ov-setup-head { margin-bottom: 12px; }
body.creator-portal .ov-setup-title { margin: 0; font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); }
body.creator-portal .ov-setup-steps { display: flex; flex-direction: column; gap: 2px; }
body.creator-portal .ov-step { display: flex; align-items: center; gap: 12px; padding: 5px 8px; border-radius: 8px; background: none; text-decoration: none; }
body.creator-portal .ov-step:nth-child(odd) { background: var(--surface-2); }
body.creator-portal .ov-step-box { width: 22px; height: 22px; flex: none; border: 0; border-radius: 6px; display: grid; place-items: center; background: var(--accent-soft); color: var(--fg); font: 600 var(--text-small)/1 var(--font-body); }
body.creator-portal .ov-step-box svg { width: 12px; height: 12px; }
body.creator-portal .ov-step-label { flex: 1; min-width: 0; font: 600 var(--text-body-sm)/1.3 var(--font-body); color: var(--fg); }
body.creator-portal .ov-step-link { flex: none; white-space: nowrap; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--fg) 50%, transparent); text-decoration: none; }
body.creator-portal .ov-step-link:hover { text-decoration: underline; }
body.creator-portal .ov-step.is-done .ov-step-box { background: var(--accent-soft); color: var(--fg); border: 0; }
body.creator-portal .ov-step.is-done .ov-step-label { color: var(--fg-muted); text-decoration: none; }
@media (max-width: 560px) { body.creator-portal .ov-step-label { font-size: 13px; } }

/* ===== Page layout: centred content column, tight top, 24px under the top row (same as Studio) ===== */
/* The page view is a column with a 12px gap, so a top row needs 12px of its own margin to make 24px. */
body.creator-portal #portal-view { width: 100%; max-width: 1498px; margin: 0 auto; padding: 0 calc(7.5% + 22px); box-sizing: border-box; }
body.creator-portal #portal-view > :is(.page-header, .upload-row, .campaign-tabs, .filter-tabs) { margin-bottom: 12px; }
body.creator-portal .page-segments > .section-header { margin-top: 0; }
/* A page header with nothing visible in it (the description was removed) takes no space. */
body.creator-portal #portal-view .page-header:not(:has(.page-header-left > *:not(h1.page-title))):not(:has(.page-header-actions)) { display: none; }

/* A brief the brand attached to a collab request. */
body.creator-portal .rq-brief { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--text-small); font-weight: 600; color: var(--accent-dark); text-decoration: none; }
body.creator-portal .rq-brief svg { width: 14px; height: 14px; }
body.creator-portal .rq-brief:hover { text-decoration: underline; }

/* ── Phones (≤560px): use the whole width, keep the top bar to the page name ─────────────────────── */
@media (max-width: 560px) {
  body.creator-portal .sd-scroll { padding: 16px 16px 32px; scrollbar-gutter: auto; overflow-x: hidden; }
  body.creator-portal #portal-view { padding-left: 0; padding-right: 0; }
  body.creator-portal #crumb-creator, body.creator-portal #crumb-creator + svg { display: none; }
  body.creator-portal .sd-crumbs .topbar-title { font-size: var(--text-body); }
}