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

/* UX audit (2026-05-12): project-wide reduced-motion opt-out for users
   with vestibular sensitivity or the system preference set. Targets
   :root so every animation/transition collapses to near-instant. Plays
   well with the per-component @media (prefers-reduced-motion: reduce)
   blocks scattered later in the file — those just stay redundant. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* UX audit L3 (2026-05-12): skip-link for keyboard users. Visually hidden
   until focused, then anchors itself top-left over the top-bar with a
   brand-accent background. href="#main" jumps to the page-content
   landmark in base_admin.html. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  background: #7c8cf8;
  color: #0f0d15;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: top 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Strip default focus outline on #main since the skip-link sends focus
   here programmatically — we don't want a permanent ring around the
   whole content area. */
main.main-content:focus {
  outline: none;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: #0f0d15;
  color: #e8e6f0;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}
/* The <nav aria-label="Main navigation"> wrapper (added 2026-05-12 for a11y
   landmarks) is the sticky container — sticky on .top-bar alone gets trapped
   inside a 48px-tall parent and scrolls off with it. */
nav[aria-label="Main navigation"] {
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 48px;
  background: #161422;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
  font-size: 13px;
  flex-shrink: 0;
}
.top-bar .tb-brand {
  font-size: 16px;
  font-weight: 700;
  color: #7c8cf8;
  margin-right: auto;
  letter-spacing: -0.3px;
}
.top-bar .tb-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.top-bar .tb-links a {
  color: #c5c0d8;
  text-decoration: none;
  /* UX audit (2026-05-12): padding bumped 6×12 → 8×14 for a 36px
     tap-target (was ~32px). Admin is used heavily and the previous
     size felt cramped per the audit. min-height + flex centering
     locks the height at 36px regardless of line-height rounding
     (8+8+19.5 line-height landed at 35.5 raw without min-height). */
  padding: 8px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition:
    background 0.15s,
    color 0.15s;
  font-weight: 500;
}
.top-bar .tb-links a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e6f0;
}
.top-bar .tb-links a.active {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.top-bar .tb-links a.tb-logout {
  color: #8b85a0;
  margin-left: 8px;
}
.top-bar .tb-links a.tb-logout:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.top-bar .tb-badge {
  /* UX audit (2026-05-12): white text on #7c8cf8 was 2.7:1 contrast
     (below WCAG AA 4.5:1 for small text). Darkening the bg to #3b4ad6
     gives ~5.5:1 with white text. Visual hue stays in the brand-indigo
     family. */
  background: #3b4ad6;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
/* fn-38.4: red variant for Overdue content requests. Same token as
   .cr-deadline.overdue so admin visual language stays consistent.
   UX audit (2026-05-12): bg darkened from #f87171 (2.77:1 with white)
   to #b91c1c for ~5.9:1 contrast — passes WCAG AA for small text. */
.top-bar .tb-badge-overdue {
  background: #b91c1c;
}

/* Dropdown groups in the top bar (Analytics, Admin) — hover + focus open. */
.top-bar .tb-dropdown {
  position: relative;
  display: inline-block;
}
.top-bar .tb-dropdown-trigger {
  background: transparent;
  border: none;
  /* UX audit (2026-05-12): aligned with .tb-links a padding 8×14
     so the Analytics/Admin dropdown triggers match the 36px height
     of the other top-bar tabs. min-height locks the visual rhythm. */
  padding: 8px 14px;
  min-height: 36px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #c5c0d8;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition:
    background 0.15s,
    color 0.15s;
}
.top-bar .tb-dropdown-trigger:hover,
.top-bar .tb-dropdown:hover .tb-dropdown-trigger,
.top-bar .tb-dropdown:focus-within .tb-dropdown-trigger {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e6f0;
}
.top-bar .tb-dropdown-trigger.active {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.top-bar .tb-caret {
  font-size: 9px;
  opacity: 0.7;
  transform: translateY(1px);
}
.top-bar .tb-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 200;
}
/* Invisible hover bridge — fills the 4px visual gap between the trigger
   and the menu so the mouse can cross without the dropdown closing.
   Without this the hover chain breaks mid-transit and the menu vanishes
   before the user can click a child link. */
.top-bar .tb-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
  background: transparent;
}
.top-bar .tb-dropdown:hover .tb-dropdown-menu,
.top-bar .tb-dropdown:focus-within .tb-dropdown-menu {
  display: block;
}
.top-bar .tb-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: #c5c0d8;
  text-decoration: none;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
}
.top-bar .tb-dropdown-menu a:hover {
  background: rgba(124, 140, 248, 0.1);
  color: #e8e6f0;
}
.top-bar .tb-dropdown-menu a.active {
  background: rgba(124, 140, 248, 0.18);
  color: #7c8cf8;
}

/* Sidebar — sticky within .app-body flex row, scrolls independently */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: #1e1b2e;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
  z-index: 10;
  flex-shrink: 0;
}
/* Mobile toggle/overlay/nav removed — admin is desktop-first, top bar replaces mobile nav */
.sidebar-header {
  padding: 24px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-brand {
  font-size: 16px;
  font-weight: 700;
  color: #e8e6f0;
}
.sidebar-search {
  padding: 12px;
}
.sidebar-search input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #e8e6f0;
  font-size: 13px;
}
.sidebar-search input:focus {
  outline: none;
  border-color: #7c8cf8;
}
.sidebar-search input::placeholder {
  color: #5a5670;
}
.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #c5c0d8;
  margin-bottom: 2px;
  transition: background 0.15s;
}
.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.sidebar-item.active {
  background: rgba(124, 140, 248, 0.15);
  border-left: 3px solid #7c8cf8;
  color: #e8e6f0;
}
.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar-avatar-img {
  object-fit: cover;
  font-size: 0;
}
.sidebar-item-text {
  min-width: 0;
  overflow: hidden;
}
.sidebar-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-meta {
  font-size: 11px;
  color: #5a5670;
  margin-top: 2px;
}
/* Sidebar footer links removed — moved to top bar */
.sf-badge {
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

/* Main — fills remaining space in .app-body flex row */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  min-height: calc(100vh - 48px);
  max-width: 1600px;
  overflow-y: auto;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.page-header h2 {
  font-size: 23px;
  color: #e8e6f0;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.header-actions {
  display: flex;
  gap: 8px;
}

/* Page nav tabs */
.page-nav {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page-nav-tab {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  color: #5a5670;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px 8px 0 0;
}
.page-nav-tab:hover {
  color: #e8e6f0;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}
.page-nav-tab.active {
  color: #7c8cf8;
  border-bottom-color: #7c8cf8;
  background: rgba(124, 140, 248, 0.08);
  font-weight: 600;
}

/* Sub-tab navigation (content + analytics groups) */
.sub-nav {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  margin-top: -12px;
  padding: 0 2px 0 0;
  border-bottom: 1px solid var(--border-subtle);
}
.sub-nav-tab {
  padding: 6px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  border-radius: 6px 6px 0 0;
}
.sub-nav-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
}
.sub-nav-tab.active {
  color: var(--accent-secondary);
  border-bottom-color: var(--accent-secondary);
  background: rgba(165, 148, 249, 0.06);
  font-weight: 600;
}

/* Sortable columns */
th.sortable a {
  color: #8b85a0;
  text-decoration: none;
  white-space: nowrap;
}
th.sortable a:hover {
  color: #7c8cf8;
  text-decoration: none;
}
th.sortable.active a {
  color: #7c8cf8;
  font-weight: 600;
}

/* Sort bar */
.sort-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sort-label {
  font-size: 13px;
  color: #5a5670;
  margin-right: 4px;
}
.sort-pill {
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: #8b85a0;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.15s;
}
.sort-pill:hover {
  color: #e8e6f0;
  border-color: #7c8cf8;
  text-decoration: none;
}
.sort-pill.active {
  background: #7c8cf8;
  color: #fff;
  border-color: #7c8cf8;
}

/* Filter bar */
.filter-sort-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filter-sort-row .filter-bar {
  margin-bottom: 0;
}
.filter-sort-row .sort-bar {
  margin-bottom: 0;
  margin-left: auto;
}
.filter-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  color: #8b85a0;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.15s;
}
.filter-tab:hover {
  color: #e8e6f0;
  border-color: #7c8cf8;
  text-decoration: none;
}
.filter-tab.active {
  background: #7c8cf8;
  color: #fff;
  border-color: #7c8cf8;
}
.filter-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  margin: 0 4px;
  align-self: center;
}
.filter-tab.dur-tab {
  background: rgba(165, 148, 249, 0.08);
  border-color: rgba(165, 148, 249, 0.2);
  color: #a594f9;
}
.filter-tab.dur-tab:hover {
  border-color: #a594f9;
}
.filter-tab.dur-tab.active {
  background: #a594f9;
  color: #fff;
  border-color: #a594f9;
}
.filter-tab.clear-dur {
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.4);
  border: none;
}
.filter-tab.clear-dur:hover {
  color: #ff6b6b;
}

/* Card */
.card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow-x: auto;
}
.card-padded {
  padding: 20px;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: rgba(255, 255, 255, 0.04);
  color: #8b85a0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  vertical-align: top;
  color: #c5c0d8;
}
tr:last-child td {
  border-bottom: none;
}
tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
tr:hover {
  background: rgba(124, 140, 248, 0.06);
  box-shadow: inset 3px 0 0 #7c8cf8;
}
.rank-cell {
  font-weight: 700;
  color: #8b85a0;
  text-align: center;
  width: 40px;
}
.caption-cell {
  max-width: 250px;
}
.caption-preview {
  font-size: 13px;
  color: #c5c0d8;
  margin-bottom: 4px;
}
.empty-cell {
  text-align: center;
  color: #5a5670;
  padding: 48px 12px !important;
}
.empty-cell .empty-icon {
  font-size: 28px;
  opacity: 0.4;
  margin-bottom: 8px;
  display: block;
}
.empty-cell .empty-hint {
  font-size: 11px;
  color: #5a5670;
  margin-top: 4px;
  display: block;
}

/* Badges */
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.type-badge.video {
  background: rgba(167, 139, 250, 0.15);
  color: #7c8cf8;
}
.type-badge.short_video {
  background: rgba(192, 132, 252, 0.15);
  color: #a594f9;
}
.type-badge.photo {
  background: rgba(96, 165, 250, 0.15);
  color: #3b82f6;
}
.type-badge.mixed {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.segment-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.segment-badge.whale {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.segment-badge.high {
  background: rgba(124, 140, 248, 0.12);
  color: #7c8cf8;
}
.segment-badge.mid {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.segment-badge.low {
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}
.segment-badge.new {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
}
.segment-badge.inactive {
  background: rgba(155, 151, 173, 0.12);
  color: #9b97ad;
}
.segment-badge.never_buyer {
  background: rgba(107, 104, 128, 0.1);
  color: #6b6880;
}

/* Buttons — 3-tier hierarchy */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none !important;
  transition: all 0.15s;
}
.btn:hover {
  text-decoration: none !important;
}

/* Tier 1: Primary — THE main action per screen */
.btn-primary {
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(124, 140, 248, 0.3);
}
.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 140, 248, 0.4);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 140, 248, 0.2);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* Tier 2: Secondary — important but not primary */
.btn-secondary {
  background: rgba(124, 140, 248, 0.12);
  color: #a594f9;
  border: 1px solid rgba(124, 140, 248, 0.2);
  font-weight: 500;
}
.btn-secondary:hover {
  background: rgba(124, 140, 248, 0.2);
  color: #c5bfff;
  border-color: rgba(124, 140, 248, 0.35);
}
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Tier 3: Ghost — tertiary actions (cancel, dismiss, filter) */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8b85a0;
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: #c5c0d8;
}

/* Semantic: Success */
.btn-success {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
  font-weight: 500;
}
.btn-success:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
}

/* Semantic: Danger */
.btn-danger {
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
  font-weight: 500;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(248, 113, 113, 0.4);
}

/* Size: Small — for table actions, inline controls */
.btn-sm {
  padding: 4px 12px;
  font-size: 11px;
  border-radius: 8px;
}
.bounty-alert {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}
.bounty-alert.success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.bounty-alert.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.bounty-link {
  color: #7c8cf8;
  word-break: break-all;
}
.btn-copy {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #8b85a0;
  cursor: pointer;
  font-size: 13px;
  margin-left: 8px;
  transition: all 0.15s;
}
.btn-copy:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: #c5c0d8;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  padding: 16px 0;
}
/* conv16 #7 — Load more button (appends next page's tiles into the
   existing grid via JS instead of full-page reload, preserving selection
   state on Keep / Keep-Paid tabs). Sits above the standard pagination
   row which is kept as a fallback for direct page-jump. */
.ci-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 8px 0 0;
}
.ci-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 40px;
  padding: 0 24px;
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.05s;
}
.ci-load-more-btn:hover {
  opacity: 0.9;
}
.ci-load-more-btn:active {
  transform: translateY(1px);
}
.ci-load-more-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #c5c0d8;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
}
.page-btn:hover {
  border-color: #7c8cf8;
  color: #7c8cf8;
  text-decoration: none;
}
.page-btn.active {
  background: #7c8cf8;
  border-color: #7c8cf8;
  color: #fff;
}
.page-dots {
  color: #5a5670;
  padding: 0 4px;
  line-height: 36px;
}

.meta {
  color: #5a5670;
  font-size: 13px;
}

/* Clickable rows */
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover {
  background: rgba(139, 92, 246, 0.06) !important;
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: #262340;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: #262340;
  z-index: 1;
  border-radius: 16px 16px 0 0;
}
.modal-header h3 {
  font-size: 19px;
  color: #e8e6f0;
  font-weight: 700;
}
.modal-close {
  background: none;
  border: none;
  color: #5a5670;
  font-size: 28px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover {
  color: #e8e6f0;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0;
}
.modal-stat {
  background: #161422;
  padding: 16px;
  text-align: center;
}
.modal-stat-label {
  font-size: 11px;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.modal-stat-value {
  font-size: 19px;
  font-weight: 700;
  color: #e8e6f0;
}
.modal-stat-value.score {
  color: #7c8cf8;
}

.modal-section {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.modal-section h4 {
  font-size: 13px;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.modal-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  padding-right: 16px;
}
.detail-row:nth-child(odd) {
  padding-right: 16px;
}
.detail-row:nth-child(even) {
  padding-left: 16px;
}
.detail-label {
  color: #8b85a0;
}

.modal-caption {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}
.modal-caption-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.caption-num {
  font-size: 13px;
  font-weight: 600;
  color: #7c8cf8;
}
.modal-caption-text {
  font-size: 13px;
  color: #c5c0d8;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}

.media-ids {
  font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
  font-size: 13px;
  color: #5a5670;
  padding: 8px 0;
  word-break: break-all;
}
.row-thumbs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.row-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.row-thumb-more {
  font-size: 11px;
  color: #5a5670;
  white-space: nowrap;
}
.preview-cell {
  min-width: 200px;
}

/* PPV table column toggle — hide Sends(6), Purchases(7), Future LTV(10) when collapsed */
.ppv-table.cols-compact tr > :nth-child(6),
.ppv-table.cols-compact tr > :nth-child(7),
.ppv-table.cols-compact tr > :nth-child(10) {
  display: none;
}
.col-toggle {
  padding: 4px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8b85a0;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.col-toggle:hover {
  color: #c5c0d8;
  border-color: rgba(255, 255, 255, 0.16);
}
.bundle-thumbs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}
.bundle-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.bundle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bundle-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a5670;
  font-size: 18px;
  background: #161422;
}
.bundle-thumb-more {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a5670;
  font-size: 16px;
  font-weight: 600;
}
.bundle-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(124, 140, 248, 0.2);
  z-index: 1;
}
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.open {
  display: flex;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 24px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Modal scrollbar */
.modal::-webkit-scrollbar {
  width: 6px;
}
.modal::-webkit-scrollbar-track {
  background: transparent;
}
.modal::-webkit-scrollbar-thumb {
  background: rgba(124, 140, 248, 0.2);
  border-radius: 3px;
}

/* Media grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.media-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  position: relative;
}
.media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 140, 248, 0.12);
}
.media-card-pinned {
  border-color: rgba(124, 140, 248, 0.5);
  box-shadow: 0 0 0 1px rgba(124, 140, 248, 0.3);
}
.pin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 13, 21, 0.7);
  backdrop-filter: blur(8px);
  color: #8b85a0;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  opacity: 0;
}
.media-card:hover .pin-btn,
.pin-btn.pinned {
  opacity: 1;
}
.pin-btn.pinned {
  background: rgba(124, 140, 248, 0.3);
  color: #7c8cf8;
}
.pin-btn:hover {
  background: rgba(124, 140, 248, 0.5);
  color: #fff;
}
.pin-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #1e1b2e;
  border-top: 1px solid rgba(124, 140, 248, 0.3);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
.pin-bar span {
  color: #7c8cf8;
  font-weight: 600;
  font-size: 14px;
}
.pin-bar-btn {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pin-bar-clear {
  background: transparent;
  color: #8b85a0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pin-bar-clear:hover {
  color: #e8e6f0;
  border-color: rgba(255, 255, 255, 0.25);
}
.media-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #161422;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.media-thumb.loaded {
  animation: none;
  background: #161422;
}
.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-placeholder {
  text-align: center;
  color: #5a5670;
  font-size: 28px;
  line-height: 1.4;
}
.play-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e8e6f0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.media-card-info {
  padding: 12px 12px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.media-card-rank {
  font-weight: 700;
  color: #8b85a0;
  font-size: 13px;
}
.media-card-score {
  margin-left: auto;
  font-weight: 700;
  color: #7c8cf8;
  font-size: 16px;
  text-shadow: 0 0 12px rgba(124, 140, 248, 0.4);
}
.media-dur {
  font-size: 11px;
  color: #5a5670;
}
.media-card-stats {
  padding: 4px 12px 8px;
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #5a5670;
}

.modal-preview {
  padding: 0;
  text-align: center;
  background: #161422;
  max-height: 70vh;
  overflow: visible;
}
.modal-preview img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}
.modal-preview video {
  max-width: 100%;
  max-height: 65vh;
  display: block;
  margin: 0 auto;
}

.empty-state {
  text-align: center;
  padding: 80px 24px;
}
.empty-state .empty-icon {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 12px;
}
.empty-state h2 {
  font-size: 16px;
  font-weight: 600;
  color: #8b85a0;
  margin-bottom: 4px;
}
.empty-state p {
  font-size: 13px;
  color: #5a5670;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Login */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: #0f0d15;
}
.login-box {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px;
  width: 400px;
  max-width: 92vw;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(124, 140, 248, 0.06);
}
.login-box h1 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 4px;
  color: #e8e6f0;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.login-box .login-subtitle {
  font-size: 13px;
  color: #5a5670;
  text-align: center;
  margin-bottom: 24px;
}
.login-box label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.login-box input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #e8e6f0;
  font-size: 16px;
  margin-bottom: 16px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.login-box input:focus {
  outline: none;
  border-color: #7c8cf8;
  background: rgba(124, 140, 248, 0.08);
}
.login-box input::placeholder {
  color: #5a5670;
}
.login-box button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.15s;
  box-shadow: 0 4px 20px rgba(124, 140, 248, 0.25);
}
.login-box button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124, 140, 248, 0.35);
}
.login-box button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 140, 248, 0.2);
}
.login-box button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.login-box .error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.login-box .success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  text-align: center;
}
.success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  text-align: center;
}

/* Vault folder styles */
.vault-media-count {
  font-size: 11px;
  color: #5a5670;
  margin-left: 8px;
}
.vault-unknown {
  color: #5a5670;
  font-style: italic;
}
.vault-sync-note {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  color: #fbbf24;
  margin-bottom: 12px;
}

/* Vault send sequence */
.folder-row {
  cursor: pointer;
}
.folder-row:hover {
  background: rgba(124, 140, 248, 0.06);
}
.folder-row.expanded {
  background: rgba(124, 140, 248, 0.08);
}
.expand-arrow {
  display: inline-block;
  width: 16px;
  font-size: 11px;
  color: #5a5670;
  transition: transform 0.15s;
  margin-right: 4px;
}
.seq-cell {
  padding: 0 !important;
  background: #161422;
}
.seq-summary {
  padding: 8px 16px;
  font-size: 13px;
  color: #8b85a0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.seq-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.seq-table th {
  background: rgba(255, 255, 255, 0.04);
  color: #8b85a0;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: left;
}
.seq-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #c5c0d8;
}
.seq-num {
  color: #5a5670;
  font-size: 11px;
}
.seq-gap {
  color: #6b6580;
  font-size: 13px;
  font-style: italic;
}
.seq-gap-warn {
  color: #d97706;
  font-weight: 500;
}
.seq-empty {
  padding: 16px;
  color: #9b97ad;
  font-style: italic;
  text-align: center;
}
.type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.type-video {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}
.type-short_video {
  background: rgba(147, 51, 234, 0.12);
  color: #a78bfa;
}
.type-photo {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}
.type-mixed {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

/* Scrollbar */
.sidebar-list::-webkit-scrollbar {
  width: 6px;
}
.sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.15);
  border-radius: 3px;
}

/* Focus-visible for keyboard navigation */
/* Focus — visible for keyboard, hidden for mouse */
*:focus-visible {
  outline: 2px solid #7c8cf8;
  outline-offset: 2px;
  border-radius: inherit;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* Sticky table header for long lists */
.card table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #262340;
}

/* DM Analytics */
.dm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
.dm-stat-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 24px;
}
.dm-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.dm-stat-body {
  flex: 1;
}
.dm-stat-label {
  font-size: 11px;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.dm-stat-value {
  font-size: 23px;
  font-weight: 700;
  color: #e8e6f0;
}
.dm-stat-detail {
  font-size: 13px;
  color: #5a5670;
  margin-top: 4px;
}
.section-heading {
  font-size: 16px;
  color: #e8e6f0;
  font-weight: 600;
  margin: 24px 0 12px;
}
.dm-no-data {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 13px;
  color: #fbbf24;
  margin-bottom: 16px;
}
.dm-no-data code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}
.channel-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.channel-tag.dm-star {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.channel-tag.untapped {
  background: rgba(124, 140, 248, 0.12);
  color: #7c8cf8;
}
.channel-tag.hidden-gem {
  background: rgba(192, 132, 252, 0.12);
  color: #9333ea;
}
.channel-tag.overused {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.channel-tag.mass-only {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.channel-tag.balanced {
  background: rgba(155, 151, 173, 0.12);
  color: #9b97ad;
}
.opp-group {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
}
.opp-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.opp-group table {
  width: 100%;
}

/* Skeleton shimmer — loading placeholder for images/media */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.skeleton.loaded {
  animation: none;
  background: #161422;
}
.skeleton.loaded img {
  opacity: 1;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: #161422;
  }
  .page-loader {
    display: none !important;
  }
}

/* Page loading bar — thin animated stripe at top */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.page-loader.active {
  opacity: 1;
}
.page-loader::after {
  content: "";
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, #7c8cf8, #a594f9);
  border-radius: 0 2px 2px 0;
  animation: pageLoad 1s ease-in-out infinite;
}
@keyframes pageLoad {
  0% {
    transform: translateX(-100%);
    width: 30%;
  }
  50% {
    width: 60%;
  }
  100% {
    transform: translateX(400%);
    width: 30%;
  }
}

/* ── Vault Manager Modal ── */
.vault-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(30, 27, 46, 0.85);
  backdrop-filter: blur(4px);
  color: #7c8cf8;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.media-card:hover .vault-btn,
.vault-btn:focus {
  opacity: 1;
}
.vault-btn:hover {
  background: rgba(124, 140, 248, 0.25);
}

.vault-mgr-body {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}
.vault-mgr-loading,
.vault-mgr-error {
  text-align: center;
  padding: 32px;
  color: #888;
}
.vault-mgr-error {
  color: #f87171;
}
.vault-mgr-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.vault-mgr-back {
  font-size: 13px;
  color: #7c8cf8;
  cursor: pointer;
  margin-bottom: 12px;
  padding: 4px 0;
}
.vault-mgr-back:hover {
  text-decoration: underline;
}
.vault-mgr-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.vault-mgr-model-row:hover {
  background: rgba(124, 140, 248, 0.08);
}
.vault-mgr-model-name {
  font-size: 14px;
}
.vault-mgr-arrow {
  color: #666;
  font-size: 10px;
}
.vault-mgr-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 6px;
}
.vault-mgr-folder-name {
  font-size: 14px;
}
.vault-mgr-send-btn {
  padding: 4px 16px;
  border-radius: 6px;
  border: 1px solid #7c8cf8;
  background: transparent;
  color: #7c8cf8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 70px;
}
.vault-mgr-send-btn:hover {
  background: rgba(124, 140, 248, 0.15);
}
.vault-mgr-send-btn.sending {
  border-color: #fbbf24;
  color: #fbbf24;
  cursor: wait;
}
.vault-mgr-send-btn.sent {
  border-color: #34d399;
  color: #34d399;
}
.vault-mgr-send-btn.failed {
  border-color: #f87171;
  color: #f87171;
}
.vault-mgr-create {
  margin-top: 12px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
}
.vault-mgr-new-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1a1725;
  color: #e8e6f0;
  font-size: 13px;
  margin-right: 8px;
}
.vault-mgr-new-input::placeholder {
  color: #666;
}
.vault-mgr-create-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid #a594f9;
  background: transparent;
  color: #a594f9;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.vault-mgr-create-btn:hover {
  background: rgba(165, 148, 249, 0.15);
}
.vault-mgr-create-btn.sent {
  border-color: #34d399;
  color: #34d399;
}
.vault-mgr-create-btn.failed {
  border-color: #f87171;
  color: #f87171;
}

/* Smart Vault table vault icon */
.sv-vault-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(124, 140, 248, 0.3);
  background: transparent;
  color: #7c8cf8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.sv-vault-btn:hover {
  background: rgba(124, 140, 248, 0.15);
}

/* ── Clock-In Triage ── */
.ci-header {
  margin-bottom: 24px;
}
.ci-header h1 {
  font-size: 23px;
  font-weight: 700;
  color: #e8e6f0;
  margin-bottom: 4px;
}
.ci-header p {
  font-size: 13px;
  color: #8b85a0;
}
.ci-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.ci-model-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ci-model-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 140, 248, 0.12);
}
.ci-model-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #161422;
  position: relative;
}
.ci-model-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ci-model-thumb .ci-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  color: #5a5670;
}
.ci-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7c8cf8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}
.ci-badge-done {
  background: #22c55e;
}
.ci-model-info {
  padding: 12px;
}
.ci-model-name {
  font-size: 14px;
  font-weight: 600;
  color: #e8e6f0;
  margin-bottom: 4px;
}
.ci-model-meta {
  font-size: 11px;
  color: #8b85a0;
  display: flex;
  gap: 8px;
}
/* fn-33.3: cross-promoter CTR strip on model tile. Hidden when
   mc.top_hosts is empty (template-level guard), so the selector itself
   only needs to style the populated case. */
.ci-top-hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  font-size: 11px;
  color: #8b85a0;
}
.ci-host-ctr {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124, 140, 248, 0.08);
  border: 1px solid rgba(124, 140, 248, 0.15);
  color: #c5c0d8;
  white-space: nowrap;
  line-height: 1.4;
}
.ci-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ci-stat-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
}
.ci-stat-label {
  font-size: 11px;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ci-stat-value {
  font-size: 23px;
  font-weight: 700;
  color: #e8e6f0;
}
.ci-stat-value.accent {
  color: #7c8cf8;
}
.ci-stat-value.green {
  color: #22c55e;
}
.ci-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.ci-filter-tab {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #8b85a0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.ci-filter-tab:hover {
  color: #e8e6f0;
  border-color: rgba(255, 255, 255, 0.2);
}
.ci-filter-tab.active {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
  border-color: rgba(124, 140, 248, 0.3);
}
.ci-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #8b85a0;
  text-decoration: none;
  margin-bottom: 16px;
  transition: color 0.15s;
}
.ci-back-link:hover {
  color: #7c8cf8;
}
.ci-triage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding-bottom: 56px; /* space for FAB */
}

/* ── Floating action bar (Keep tab) ── */
.kp-fab {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 13, 21, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  padding: 10px 24px;
  display: flex;
  justify-content: center;
}
/* Inline batch post panel (replaces modal overlay) */
.kp-batch-panel {
  margin: 24px 0 80px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #1e1b2e;
  overflow: hidden;
}
.kp-batch-panel-inner {
  max-width: 100%;
}
.kp-batch-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kp-batch-panel-header h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}
.kp-batch-panel-close {
  background: none;
  border: none;
  color: #6b6680;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.kp-batch-panel-close:hover {
  color: #fff;
}
.kp-fab-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  width: 100%;
}
.kp-fab-selectall {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c0bcd0;
  font-size: 13px;
  cursor: pointer;
}
.kp-fab-selectall input {
  cursor: pointer;
}
.kp-fab-count {
  flex: 1;
  color: #e8e6f0;
  font-size: 13px;
  font-weight: 500;
}
.kp-fab-btn {
  background: #7c8cf8;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
/* Keep tab card checkboxes (on hover) */
.kp-cb-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.15s;
}
.ci-triage-card:hover .kp-cb-wrap {
  opacity: 1;
}
.kp-cb-wrap:has(:checked) {
  opacity: 1;
}
.kp-cb-check {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #7c8cf8;
}

.kp-fab-btn:hover {
  background: #6b7be7;
}
.ci-triage-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.kp-self-badge {
  display: inline-block;
  background: rgba(124, 140, 248, 0.2);
  color: #7c8cf8;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Star tier badge next to host name in the batch-post host grid.
   Amber when lit so it stands out against the default muted text —
   tier count encoded by star count (1-3), rank via hover tooltip. */
.kp-host-stars {
  display: inline-block;
  color: #fbbf24;
  font-size: 11px;
  letter-spacing: 1px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}

/* Numeric CTR badge — surfaced 2026-04-27 per Galen's ask so the
   batch-post host picker is a ranked decision surface. Sits between
   the host name and the star tier so the eye reads name → number →
   tier. tabular-nums keeps decimals aligned across rows. Modifiers:
   .kp-host-ctr-zero (warn — 0 clicks across ≥50 views),
   .kp-host-ctr-empty (— em dash for hosts below the 50-unique-views
   noise floor in fetch_top_hosts_by_model). */
.kp-host-ctr {
  display: inline-block;
  color: #a594f9;
  background: rgba(124, 140, 248, 0.12);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.kp-host-ctr.kp-host-ctr-zero {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
}
.kp-host-ctr.kp-host-ctr-empty {
  color: rgba(255, 255, 255, 0.35);
  background: transparent;
  font-weight: 400;
}

/* fn-74 T3: per-tile CVR overlay badge — shown bottom-right on each
   .sc-edge-tile in the story-cycle picker preview. Bottom-right avoids
   collision with the picker's ★ badge which sits at top-left
   (.sc-edge-tile-badge: top: 4px; left: 4px). pointer-events: none so the
   tile click bubbles to scOpenTileModal. 3-state pattern matches
   .kp-host-ctr* but uses an opaque-fallback / blur-enhanced background
   because the badge sits over arbitrary user photos (need 4.5:1 contrast
   for WCAG 2.2 AA without a known surface color). */
.sc-edge-tile-cvr {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: inline-block;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  pointer-events: none;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
.sc-edge-tile-cvr.sc-edge-tile-cvr-zero {
  color: #fb923c;
  background: rgba(0, 0, 0, 0.78);
}
.sc-edge-tile-cvr.sc-edge-tile-cvr-empty {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}
@supports (
  (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))
) {
  .sc-edge-tile-cvr {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
  }
  .sc-edge-tile-cvr.sc-edge-tile-cvr-zero {
    background: rgba(0, 0, 0, 0.45);
  }
  .sc-edge-tile-cvr.sc-edge-tile-cvr-empty {
    background: rgba(0, 0, 0, 0.35);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .sc-edge-tile-cvr,
  .sc-edge-tile-cvr.sc-edge-tile-cvr-zero,
  .sc-edge-tile-cvr.sc-edge-tile-cvr-empty {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* "P" pill = model is in the `protected` tier per Galen's
   billboard_tier_settings. Visual cue only, non-blocking. */
.kp-host-protected {
  display: inline-block;
  background: rgba(165, 148, 249, 0.18);
  color: #c4b8fb;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

/* fn-60.5 / fn-64.2: Per-host S4S recency badge — "posted you · Xd ago"
   pill showing how many days ago this host last paired with the
   currently-promoted model. Only renders when the /api/host-s4s-recency
   endpoint returns a key for this host_id AND the host has no Stories
   cluster data (otherwise the recency element folds INTO the cluster
   per fn-64.2 D5). Visually distinct from the CTR pill (purple) and
   the star tier (amber) — uses a muted teal so the eye reads
   name → CTR → ★ → P → Stories cluster (with folded recency) → recency
   fallback without the new pill stealing attention. fn-64.2 expanded
   the label from "Xd" to "posted you · Xd ago" so the meaning reads
   without hovering for the tooltip; padding bumped accordingly. */
.kp-host-recency {
  display: inline-block;
  background: rgba(94, 234, 212, 0.12);
  color: #5eead4;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

/* fn-63.2: Per-host Stories cluster — "Stories: N · 4h ago" pill in the
   batch-post host grid. Two halves render independently: the count
   (active live stories ≤24h) and a <time> tail recomputed every 60s
   (server emits ISO ts; client rerenders relative). Sits between the
   "P" pill and the recency badge so the eye reads
   name → CTR → ★ → P → Stories → recency. Distinct from CTR purple,
   star amber, and recency teal — uses an indigo so the new signal
   doesn't visually merge with adjacent badges.

   .kp-host-stories--empty (active_count===0) is a POSITIVE state per
   spec D4 — Galen's question is "is it safe to post?" and 0 IS the
   affirmative answer. Muted neutral grey reads as "all clear" without
   competing with active-count pills for attention. */
.kp-host-stories {
  display: inline-block;
  background: rgba(124, 140, 248, 0.12);
  color: #c7d0fa;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.kp-host-stories b {
  font-weight: 600;
  color: #a594f9;
}
.kp-host-stories .kp-host-stories-time {
  color: rgba(255, 255, 255, 0.55);
  margin-left: 2px;
}
.kp-host-stories.kp-host-stories--empty {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}
.kp-host-stories.kp-host-stories--empty b {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
/* fn-64.2 D5: per-host S4S recency folded INTO the Stories cluster as
   a 3rd element. Uses the same teal accent as the standalone
   .kp-host-recency fallback so the colour signal is consistent across
   both render paths (D8 — one colour, one signal). Slightly muted
   inside the cluster so it doesn't out-shout the "Stories: N" count. */
.kp-host-stories .kp-host-stories-recency {
  color: #5eead4;
  margin-left: 2px;
}
/* fn-66.2: skeleton placeholder shown in the Stories cluster slot while
   /api/host-story-status or /api/host-s4s-recency is in-flight. Pulse
   animation communicates "data loading" to differentiate from the
   silent-absence state (badge actually has no data). Same visual
   register as the .kp-host-recency teal so the eye reads it as a
   pending pill, not a hard error. */
.kp-host-skeleton {
  display: inline-block;
  background: rgba(94, 234, 212, 0.06);
  color: rgba(94, 234, 212, 0.4);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  animation: kp-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes kp-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.kp-host-self {
  border-left: 2px solid #7c8cf8;
}
.kp-stats-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  background: rgba(15, 13, 21, 0.7);
  border: none;
  border-radius: 6px;
  color: #b0adc0;
  font-size: 13px;
  padding: 4px 7px;
  cursor: pointer;
  line-height: 1;
  backdrop-filter: blur(4px);
}
.kp-stats-btn:hover {
  background: rgba(124, 140, 248, 0.3);
  color: #fff;
}
.ci-triage-card.kp-selectable {
  cursor: pointer;
}
.ci-triage-card.kp-selectable:hover {
  border-color: rgba(124, 140, 248, 0.3);
}
.ci-triage-card.kp-selected {
  border-color: #7c8cf8;
  box-shadow: 0 0 0 1px #7c8cf8;
}
.ci-triage-card.triaged {
  opacity: 0.4;
  pointer-events: none;
}
.ci-triage-card.triaged.fade-out {
  opacity: 0;
  transform: scale(0.95);
}
.ci-triage-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.ci-triage-card.triaged .ci-triage-overlay {
  opacity: 1;
}
.ci-triage-overlay.keep {
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 14px;
}
.ci-triage-overlay.tomorrow {
  background: rgba(245, 158, 11, 0.15);
  border: 2px solid rgba(245, 158, 11, 0.4);
  border-radius: 14px;
}
.ci-triage-overlay.skip {
  background: rgba(107, 102, 128, 0.15);
  border: 2px solid rgba(107, 102, 128, 0.4);
  border-radius: 14px;
}
.ci-card-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #161422;
  position: relative;
  cursor: pointer;
}
.ci-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ci-card-body {
  padding: 8px 12px 4px;
}
.ci-card-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #8b85a0;
  margin-bottom: 4px;
}
.ci-card-stats .val {
  color: #e8e6f0;
  font-weight: 600;
}
.ci-card-actions {
  display: flex;
  gap: 4px;
  padding: 4px 12px 12px;
}
.ci-btn {
  flex: 1;
  padding: 6px 0;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* fn-45.1: primary/secondary hierarchy.
   Primary (filled pills): Keep (green), Paid (pink) — the "decide" actions.
   Secondary (ghost/outline): Later (amber), Skip (grey) — the "defer" actions.
   Classes also apply to Keep/Keep-Paid tab move buttons via ci-btn-sm. */
.ci-btn-keep {
  background: #22c55e;
  color: #ffffff;
  border: 1px solid transparent;
}
.ci-btn-keep:hover {
  background: #16a34a;
}
.ci-btn-tomorrow {
  background: transparent;
  color: rgba(245, 158, 11, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.ci-btn-tomorrow:hover {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.5);
}
.ci-btn-skip {
  background: transparent;
  color: rgba(139, 133, 160, 0.85);
  border: 1px solid rgba(139, 133, 160, 0.3);
}
.ci-btn-skip:hover {
  background: rgba(139, 133, 160, 0.15);
  color: #8b85a0;
  border-color: rgba(139, 133, 160, 0.5);
}
/* fn-44.3 / fn-45.1: Keep-Paid variant — filled pink #EC4899 pill, primary tier. */
.ci-btn-keep-paid {
  background: #ec4899;
  color: #ffffff;
  border: 1px solid transparent;
}
.ci-btn-keep-paid:hover {
  background: #db2777;
}
.ci-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #262340;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #e8e6f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 200;
  opacity: 0;
  transition:
    transform 0.3s,
    opacity 0.3s;
  pointer-events: none;
}
.ci-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ci-toast-undo {
  color: #7c8cf8;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 13px;
  padding: 0;
}
.ci-toast-undo:hover {
  text-decoration: underline;
}
.ci-empty {
  text-align: center;
  padding: 80px 24px;
}
.ci-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.ci-empty h2 {
  font-size: 23px;
  font-weight: 700;
  color: #e8e6f0;
  margin-bottom: 8px;
}
.ci-empty p {
  font-size: 14px;
  color: #8b85a0;
}
/* Clock-in triage tabs */
.ci-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ci-header-row p {
  margin: 0;
}
.ci-btn-reset {
  background: rgba(107, 102, 128, 0.15);
  color: #8b85a0;
  font-size: 11px;
  padding: 6px 12px;
  white-space: nowrap;
}
.ci-btn-reset:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.ci-triage-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0;
}
.ci-triage-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #8b85a0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-triage-tab:hover {
  color: #e8e6f0;
}
.ci-triage-tab.active {
  color: #e8e6f0;
  border-bottom-color: #7c8cf8;
}
.ci-triage-tab.tab-keep.active {
  border-bottom-color: #22c55e;
}
/* fn-44.2: Keep-Paid tab — pink/magenta distinct from Keep green. */
.ci-triage-tab.tab-keep-paid.active {
  border-bottom-color: #ec4899;
}
.ci-triage-tab.tab-tomorrow.active {
  border-bottom-color: #f59e0b;
}
.ci-triage-tab.tab-skip.active {
  border-bottom-color: #6b6680;
}
.ci-tab-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.ci-triage-tab.active .ci-tab-count {
  background: rgba(124, 140, 248, 0.2);
  color: #7c8cf8;
}
.ci-triage-tab.tab-keep.active .ci-tab-count {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.ci-triage-tab.tab-keep-paid.active .ci-tab-count {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}
.ci-triage-tab.tab-tomorrow.active .ci-tab-count {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.ci-triage-tab.tab-skip.active .ci-tab-count {
  background: rgba(107, 102, 128, 0.2);
  color: #8b85a0;
}
.ci-btn-sm {
  font-size: 10px;
  padding: 4px 0;
}

/* ── Keep Post modal ── */
.ci-btn-post {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.ci-btn-post:hover {
  background: rgba(124, 140, 248, 0.3);
}
.kp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8b85a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.kp-dropdown {
  position: relative;
}
.kp-dropdown-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: #8b85a0;
  cursor: pointer;
  list-style: none;
}
.kp-dropdown-summary::-webkit-details-marker {
  display: none;
}
.kp-chevron {
  font-size: 10px;
  transition: transform 0.2s;
}
.kp-dropdown[open] .kp-chevron {
  transform: rotate(180deg);
}
.kp-dropdown-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  padding: 4px;
}
.kp-promoter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #e8e6f0;
}
.kp-promoter-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.kp-promoter-row input[type="checkbox"] {
  accent-color: #7c8cf8;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.kp-promoter-limit {
  margin-left: auto;
  font-size: 11px;
  color: #6b6680;
}
.kp-toggle-group {
  display: flex;
  gap: 4px;
  background: #1a1725;
  border-radius: 8px;
  padding: 4px;
}
.kp-toggle {
  flex: 1;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #6b6680;
  transition: all 0.15s;
}
.kp-toggle.active {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.kp-toggle:hover:not(.active) {
  color: #8b85a0;
}
.kp-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 13px;
  color: #e8e6f0;
  resize: vertical;
  font-family: inherit;
  margin-top: 8px;
}
.kp-textarea::placeholder {
  color: #5a5670;
}
.kp-textarea:focus {
  outline: none;
  border-color: rgba(124, 140, 248, 0.4);
}
.kp-template-btn {
  background: none;
  border: none;
  color: #7c8cf8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.kp-template-btn:hover {
  text-decoration: underline;
}
.kp-limits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #8b85a0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.kp-limit-row {
  display: flex;
  justify-content: space-between;
}
.kp-limit-warn {
  color: #f59e0b;
}
.kp-limit-full {
  color: #ef4444;
}
.kp-post-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.kp-post-btn:hover {
  opacity: 0.9;
}
.kp-post-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.kp-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kp-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.03);
}
.kp-result-ok {
  color: #22c55e;
}
.kp-result-fail {
  color: #ef4444;
}
.kp-result-summary {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}

/* ── Templates tab ────────────────────────────────────────────── */
.ci-triage-tab.tab-templates.active {
  border-bottom-color: #a594f9;
}

.ct-panel {
  padding: 16px 0;
}

.ct-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ct-add-btn {
  font-size: 12px;
  padding: 6px 14px;
}

.ct-add-btn-sm {
  font-size: 12px;
  padding: 4px 12px;
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
  border: 1px solid rgba(124, 140, 248, 0.3);
  border-radius: 6px;
  cursor: pointer;
}
.ct-add-btn-sm:hover {
  background: rgba(124, 140, 248, 0.25);
}

.ct-save-sm {
  font-size: 12px;
  padding: 5px 16px;
  background: #7c8cf8;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ct-save-sm:hover {
  background: #6b7be7;
}

.ct-cancel-sm {
  font-size: 11px;
  padding: 4px 10px;
  margin-left: auto;
  background: transparent;
  color: #8b85a0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
}
.ct-cancel-sm:hover {
  color: #e8e6f0;
}

.ct-add-form {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-select {
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8e6f0;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.ct-cancel-btn {
  font-size: 11px;
  padding: 4px 10px;
  margin-left: auto;
}

.ct-textarea {
  width: 100%;
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8e6f0;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.ct-textarea:focus {
  outline: none;
  border-color: #7c8cf8;
}

.ct-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 4px;
  align-items: center;
  padding: 6px 8px;
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.ct-tb-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c0bcd0;
  font-size: 13px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ct-tb-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.ct-tb-active {
  background: rgba(124, 140, 248, 0.25);
  color: #7c8cf8;
  border-color: #7c8cf8;
}
.ct-tb-emoji {
  font-size: 15px;
  line-height: 1;
  /* OS emoji rendering — let the system font do the colored variant */
  font-family:
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.ct-tb-emoji:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.1);
  transition: transform 80ms ease;
}
.ct-tb-group {
  display: flex;
  gap: 2px;
}
.ct-tb-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
  align-self: center;
  flex-shrink: 0;
}

/* Host grid action buttons (Select All / Unselect All) */
.kp-host-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.kp-action-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.kp-action-btn:hover {
  background: rgba(124, 140, 248, 0.25);
}
.kp-action-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8b85a0;
}
.kp-action-btn-ghost:hover {
  color: #e8e6f0;
  background: rgba(255, 255, 255, 0.04);
}
.ct-tb-select {
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c0bcd0;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.ct-tb-dropdown {
  position: relative;
}
.ct-tb-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 20;
  min-width: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.ct-tb-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #c0bcd0;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ct-tb-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.ct-richtext {
  width: 100%;
  min-height: 60px;
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  border-radius: 0 0 6px 6px;
  color: #e8e6f0;
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  box-sizing: border-box;
  outline: none;
}
.ct-richtext:focus {
  border-color: #7c8cf8;
}
.ct-richtext:empty::before {
  content: attr(data-placeholder);
  color: #5a5670;
  pointer-events: none;
}
/* OF formatting classes rendered inside the editor */
.ct-richtext .m-editor-fs__sm {
  font-size: 11px;
}
.ct-richtext .m-editor-fs__s {
  font-size: 13px;
}
.ct-richtext .m-editor-fs__default {
  font-size: 16px;
}
.ct-richtext .m-editor-fs__l {
  font-size: 19px;
}
.ct-richtext .m-editor-fs__lg {
  font-size: 23px;
}
.ct-richtext .m-editor-fc__gray {
  color: #8b85a0;
}
.ct-richtext .m-editor-fc__blue-1 {
  color: #7c8cf8;
}
.ct-richtext .m-editor-fc__blue-2 {
  color: #5b9cf5;
}
/* Also render formatting in the template list cards */
.ct-card-text .m-editor-fs__sm {
  font-size: 11px;
}
.ct-card-text .m-editor-fs__s {
  font-size: 13px;
}
.ct-card-text .m-editor-fs__default {
  font-size: 16px;
}
.ct-card-text .m-editor-fs__l {
  font-size: 19px;
}
.ct-card-text .m-editor-fs__lg {
  font-size: 23px;
}
.ct-card-text .m-editor-fc__gray {
  color: #8b85a0;
}
.ct-card-text .m-editor-fc__blue-1 {
  color: #7c8cf8;
}
.ct-card-text .m-editor-fc__blue-2 {
  color: #5b9cf5;
}

.ct-hint {
  color: #8b85a0;
  font-size: 11px;
}

.ct-hint code {
  color: #a594f9;
  background: rgba(165, 148, 249, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.ct-preview {
  display: none;
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 13px;
  color: #c0bcd0;
}
.ct-preview::before {
  content: "Preview:";
  display: block;
  font-size: 10px;
  color: #5a5670;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ct-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-loading,
.ct-empty,
.ct-error {
  color: #8b85a0;
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

.ct-error {
  color: #ef4444;
}

.ct-category-label {
  color: #7c8cf8;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124, 140, 248, 0.2);
}
.ct-category-label:first-child {
  margin-top: 0;
}
.ct-group-label {
  color: #8b85a0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 4px;
}

.ct-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-card-inactive {
  opacity: 0.5;
}

.ct-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ct-card-preview {
  font-size: 13px;
  color: #c8c5d8;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

.ct-card-use-count {
  font-size: 11px;
  color: #5a5670;
  white-space: nowrap;
  flex-shrink: 0;
}

.ct-card-edit-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-edit-actions {
  display: flex;
  gap: 6px;
}

.ct-card-actions {
  display: flex;
  gap: 6px;
}

.ct-btn-sm {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
}

/* ── Batch modal: channel checks, select, host grid ──────────────────────── */
.kp-channel-checks {
  display: flex;
  gap: 16px;
}
.kp-channel-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c8c5d8;
  cursor: pointer;
}
.kp-channel-check input[type="checkbox"] {
  accent-color: #7c8cf8;
  width: 15px;
  height: 15px;
}
.kp-channel-hint {
  color: #ef4444;
  font-size: 11px;
  margin: 4px 0 0;
}
.kp-select {
  width: 100%;
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e8e6f0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.kp-template-preview {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 12px;
  color: #8b85a0;
  white-space: pre-wrap;
  word-break: break-word;
}
.kp-host-grid {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.kp-host-loading {
  padding: 16px;
  color: #8b85a0;
  font-size: 13px;
  text-align: center;
}
.kp-host-header {
  display: grid;
  grid-template-columns: 24px 1fr 64px 64px;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #5a5670;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #161422;
}
.kp-host-row {
  display: grid;
  grid-template-columns: 24px 1fr 64px 64px;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  font-size: 13px;
  color: #c8c5d8;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.kp-host-row:last-child {
  border-bottom: none;
}
.kp-host-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.kp-host-row input[type="checkbox"] {
  accent-color: #7c8cf8;
  width: 15px;
  height: 15px;
}
.kp-host-name {
  /* Conv16 fix (Galen "3 stars cuts off the stories stuff"): the name span
     hosts model-name + CTR pill + ★ rating + P pill + Stories recency tail
     all on one inline line. Long names (e.g. "Lola Rose 🌹 #1 Busty
     Accountant 🍒") + ★★★ + P + recency overflowed the 432px grid cell and
     got clipped via overflow:hidden+text-overflow:ellipsis, hiding the
     Stories badge entirely. Allow wrap to a second line on overflow —
     short rows stay 1 line (33px), long rows grow to 2 lines (~51px). */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.4;
}
.kp-host-cell {
  text-align: center;
  font-size: 12px;
  color: #8b85a0;
}
.kp-host-cell-maxed {
  color: #ef4444;
  font-weight: 600;
}
.kp-batch-summary {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 12px;
  color: #8b85a0;
}

/* Step 1 action row: send + review buttons side by side */
.kp-step1-actions {
  display: flex;
  gap: 8px;
}
.kp-step1-actions .kp-post-btn {
  flex: 2;
}
.kp-review-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(124, 140, 248, 0.4);
  border-radius: 8px;
  background: rgba(124, 140, 248, 0.1);
  color: #7c8cf8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.kp-review-btn:hover {
  background: rgba(124, 140, 248, 0.2);
}
.kp-review-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Review grid (Step 2) ────────────────────────────────────────────────── */
.rv-model-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 13px;
}
.rv-model-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #262340;
  flex-shrink: 0;
}
.rv-model-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(124, 140, 248, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rv-model-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rv-model-name {
  font-weight: 600;
  color: #e8e6f0;
  font-size: 13px;
}
.rv-model-username {
  color: #8b85a0;
  font-size: 11px;
}

.rv-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: #8b85a0;
  min-height: 28px;
}
.rv-page-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c8c5d8;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.rv-page-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.rv-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.rv-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  overflow: hidden;
}
.rv-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
  background: #1a1725;
  transition: background 0.12s;
}
.rv-row:last-child {
  border-bottom: none;
}
.rv-row:hover {
  background: #1e1b2e;
}
.rv-row.rv-row-skip {
  opacity: 0.45;
}
.rv-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: #262340;
  flex-shrink: 0;
}
.rv-thumb-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: #262340;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a5670;
  font-size: 20px;
  flex-shrink: 0;
}
.rv-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rv-row-host {
  font-weight: 600;
  color: #e8e6f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rv-badge-channel {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rv-badge-feed {
  background: rgba(124, 140, 248, 0.15);
  color: #7c8cf8;
}
.rv-badge-story {
  background: rgba(165, 148, 249, 0.15);
  color: #a594f9;
}
.rv-badge-history {
  font-size: 10px;
  color: #6b6680;
}
.rv-badge-skip {
  font-size: 10px;
  color: #ef4444;
}
.rv-row-caption {
  font-size: 11px;
  color: #6b6680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
.rv-row-status {
  flex-shrink: 0;
  font-size: 11px;
  color: #5a5670;
  text-align: right;
  white-space: nowrap;
}

/* ── Review row: modified state ─────────────────────────────────────────── */
.rv-row.rv-row-modified {
  background: rgba(124, 140, 248, 0.04);
}

/* ── Customized / Auto badges ───────────────────────────────────────────── */
.rv-badge-custom {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(124, 140, 248, 0.2);
  color: #7c8cf8;
  letter-spacing: 0.02em;
}
.rv-badge-auto {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #8b85a0;
}

/* ── CVR badge (billboard data) ────────────────────────────────────────── */
.rv-cvr-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(124, 140, 248, 0.12);
  color: #7c8cf8;
  letter-spacing: 0.02em;
}
.rv-cvr-badge.rv-cvr-none {
  background: rgba(255, 255, 255, 0.04);
  color: #5a5670;
  font-weight: 400;
}
/* fn-28.4: per-source CVR — accent blue, slightly stronger than per-host avg */
.rv-cvr-badge.rv-cvr-source {
  background: rgba(124, 140, 248, 0.18);
  color: #a5b0fa;
}
/* fn-32.5: pHash v2 match-confidence variants on the Review modal CVR badge.
   `.phash`       = same-model dHash fallback (muted + dotted border).
   `.phash-cross` = cross-model lookalike (further muted, trailing "?" from JS). */
.rv-cvr-badge.rv-cvr-source.phash {
  background: rgba(124, 140, 248, 0.08);
  color: #8b93c7;
  border: 1px dashed rgba(124, 140, 248, 0.5);
  padding: 0 5px;
}
.rv-cvr-badge.rv-cvr-source.phash.phash-cross {
  background: rgba(255, 255, 255, 0.04);
  color: #6b6680;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
/* fn-58.1: host-avg fallback tier — dashed border (WCAG 1.4.1 non-color cue)
   + lower-opacity accent bg so it reads distinct from per-pair `.rv-cvr-source`
   at-a-glance. Per-pair bg is rgba(124,140,248,0.18); host-avg is 0.06 — a
   0.12 opacity delta (≥ the 0.10 spec floor). Phash composition does NOT
   apply here: host-avg is computed from billboard host-aggregate, not a
   phash-matched per-pair lookup. */
.rv-cvr-badge.rv-cvr-host-avg {
  background: rgba(124, 140, 248, 0.06);
  color: #a5b0fa;
  border: 1.5px dashed rgba(124, 140, 248, 0.5);
  padding: 0 5px;
}
/* fn-28.4: coverage note beneath the promoted-model username in Review header */
.rv-coverage-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #6b6680;
  letter-spacing: 0.01em;
}
/* fn-32.5: pHash indexing note — sits under the CVR coverage line when
   sweepers are still warming. Even more muted so it reads as informational. */
.rv-coverage-note.rv-phash-note {
  color: #5a5670;
  font-style: italic;
}

/* fn-32.5: triage grid (Keep tab) CVR badge variants.
   Base `.ci-cvr-badge` is just a color hint — the badge text sits inside the
   plain `<span>CVR <span class="val">X%</span></span>` stats row. We only need
   to style the match-type variants (exact keeps the existing accent color). */
.ci-cvr-badge .val {
  color: #7c8cf8;
}
.ci-cvr-badge.phash .val {
  color: #8b93c7;
  border-bottom: 1px dashed rgba(124, 140, 248, 0.5);
}
.ci-cvr-badge.phash.phash-cross .val {
  color: #6b6680;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
}
/* fn-58.2: host-avg fallback tier on the triage tile — mirrors fn-58.1's
   `.rv-cvr-host-avg` byte-for-byte (commit 1d43bf7). Dashed border (WCAG
   1.4.1 non-color cue) + 0.06 bg gives a 0.12 opacity delta vs the per-pair
   accent (0.18 in `.rv-cvr-source`), well above the 0.10 spec floor. The
   `padding: 0 5px` matches the phash family border-compensation so vertical
   centering doesn't shift between tiers. Phash composition does NOT apply
   here: host-avg comes from billboard host-aggregate, not a phash-matched
   per-pair lookup — the route never sets `cvr_match_type='phash_*'` on the
   same row that flips to 'host_avg'. */
.ci-cvr-badge.ci-cvr-host-avg {
  background: rgba(124, 140, 248, 0.06);
  color: #a5b0fa;
  border: 1.5px dashed rgba(124, 140, 248, 0.5);
  padding: 0 5px;
}
/* fn-58.2: no-data tier on the triage tile — replaces the pre-fn-58 silent
   row drop on the CTR sort path. Muted color matches `.kp-host-ctr-empty`
   so the visual language for "no CTR yet" is consistent across surfaces.
   The em-dash content lives in the template (not generated content) so
   it's screen-reader-friendly. */
.ci-cvr-badge.ci-cvr-none .val {
  color: rgba(255, 255, 255, 0.35);
}

/* ── Caption source indicator ──────────────────────────────────────────── */
.rv-caption-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.rv-caption-src {
  font-size: 10px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 3px;
}
.rv-caption-src-billboard {
  background: rgba(124, 140, 248, 0.1);
  color: #7c8cf8;
}
.rv-caption-src-template {
  background: rgba(255, 255, 255, 0.04);
  color: #6b6680;
}

/* ── Reset button ───────────────────────────────────────────────────────── */
.rv-reset-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8b85a0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition:
    color 0.12s,
    border-color 0.12s;
}
.rv-reset-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ── Row caption click target ───────────────────────────────────────────── */
.rv-caption-click {
  font-size: 11px;
  color: #6b6680;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: 0 -4px;
  transition:
    background 0.12s,
    color 0.12s;
}
.rv-caption-click:hover {
  background: rgba(124, 140, 248, 0.08);
  color: #a594f9;
}

.rv-link-hint {
  font-size: 10px;
  color: #5a5670;
}

/* ── Caption inline editor ──────────────────────────────────────────────── */
.rv-caption-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-tpl-picker {
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c0bcd0;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}
.rv-caption-editor {
  min-height: 48px;
  max-height: 120px;
  overflow-y: auto;
  background: #1a1725;
  border: 1px solid rgba(124, 140, 248, 0.4);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: #e8e6f0;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.rv-caption-editor-actions {
  display: flex;
  gap: 6px;
}

/* ── Picker overlay ─────────────────────────────────────────────────────── */
.rv-picker-overlay {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #161422;
  overflow: hidden;
  /* Stick to top of Step 2 so it doesn't flow below the grid */
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 300px;
  overflow-y: auto;
}
.kp-host-cell-info {
  color: #f59e0b;
  font-size: 11px;
}
.rv-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 8px;
}
.rv-picker-target-label {
  font-size: 11px;
  color: #8b85a0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-picker-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.rv-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
}
.rv-picker-thumb-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s;
}
.rv-picker-thumb-wrap:hover {
  border-color: #7c8cf8;
}
.rv-picker-thumb-wrap.rv-picker-thumb-selected {
  border-color: #7c8cf8;
  box-shadow: 0 0 0 1px #7c8cf8;
}
.rv-picker-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #262340;
}
.rv-picker-thumb-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 3px;
  padding: 1px 3px;
  pointer-events: none;
}

/* GIF Shadow Cache — status badges on Keep tab video cards */
.ci-gif-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}
.ci-gif-ready {
  background: rgba(34, 197, 94, 0.85);
  color: #fff;
}
.ci-gif-converting {
  background: rgba(245, 158, 11, 0.85);
  color: #fff;
}
.ci-gif-failed {
  background: rgba(139, 133, 160, 0.7);
  color: #d4d0de;
}
.ci-gif-spin {
  display: inline-block;
  animation: ci-spin 1.2s linear infinite;
}
@keyframes ci-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Review step — media type badges (photo/video/gif) */
.rv-type-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
.rv-type-photo {
  background: rgba(124, 140, 248, 0.85);
  color: #fff;
}
.rv-type-video {
  background: rgba(245, 158, 11, 0.85);
  color: #fff;
}
.rv-type-gif {
  background: rgba(34, 197, 94, 0.85);
  color: #fff;
}
.rv-picker-thumb-wrap {
  position: relative;
}

/* ── Inline video playback overlay (triage grid) ── */
.ci-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}
.ci-play-overlay .ci-play-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 0.1s,
    background 0.1s;
}
.ci-play-overlay .ci-play-icon:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.75);
}
.ci-play-overlay.playing .ci-play-icon {
  font-size: 16px;
}
.ci-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── NSFW Safe Mode ── */
.nsfw-safe img[src*="media-proxy"],
.nsfw-safe video[src*="media-proxy"],
.nsfw-safe video[data-src*="media-proxy"],
.nsfw-safe .ci-model-thumb img,
.nsfw-safe .camp-content-thumb,
.nsfw-safe #lightbox-content img,
.nsfw-safe #lightbox-content video {
  filter: blur(24px);
  transition: filter 0.2s ease;
}
.nsfw-safe img[src*="media-proxy"]:hover,
.nsfw-safe .camp-content-thumb:hover {
  filter: blur(8px);
}
.nsfw-safe #lightbox-content img:hover,
.nsfw-safe #lightbox-content video:hover,
.nsfw-safe .modal-section img:hover,
.nsfw-safe .modal-section video:hover {
  filter: blur(0);
}

/* ═══════════════════════════════════════════════════════════════════
 * fn-39.5: Paid Post composer — FREE/PAID segmented badge on Keep
 *          tiles, thumbnail star, paid-post FAB, composer modal,
 *          landing-card 🔓/🔒 eligibility pill.
 *
 * Admin desktop-first system (Minor Third typography, 4px grid,
 * #0F0D15 body / #1E1B2E cards / #7C8CF8 primary accent / #A594F9
 * secondary). No CSS variables used here — all raw hex so grep-find
 * works and we don't break if an undefined var slips through.
 * ═══════════════════════════════════════════════════════════════════ */

/* Landing card pill: lock icon indicating paid-post eligibility. */
.ci-paid-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  vertical-align: middle;
}
.ci-paid-pill-on {
  background: rgba(165, 148, 249, 0.18);
  color: #c4b8fb;
}
.ci-paid-pill-off {
  background: rgba(107, 102, 128, 0.2);
  color: #6b6680;
}

/* fn-39.5 patch: per-tile FREE/PAID toggle + thumbnail star on Keep
 * tiles were REMOVED. FREE/PAID assignment now happens inside the
 * composer modal via drag-drop (.kp-paid-dropzone-*). Old .kp-pp-*
 * selectors are gone. Triage tiles now behave identically whether
 * the admin is building a free batch post or a paid post. */

/* Paid-post FAB button — second FAB beside "Post All". Hidden until
 * ≥1 tile is selected (JS flips inline display); colored with the
 * secondary accent #A594F9 to match paid-composer branding. */
.kp-fab-paid-btn {
  background: #a594f9 !important;
  color: #0f0d15 !important;
  min-height: 44px; /* CLAUDE.md design-system touch target */
  /* Visibility is controlled by inline style + JS. Button starts with
   * `style="display: none"`. On selection, JS sets `.style.display = ""`
   * to let the default `.kp-fab-btn` display rule take over. DO NOT
   * add `display: none` here — it shadows the inline-style unset and
   * the button stays hidden. Live bug 2026-04-22. */
}
.kp-fab-paid-btn:hover:not(:disabled) {
  background: #b8abff !important;
}
.kp-fab-paid-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Paid-post composer modal. Reuses the #batchPostModal 680px pattern. */
.kp-paid-modal {
  max-width: 680px;
}
.kp-paid-banner {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.kp-paid-banner-warn {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.kp-paid-banner-error {
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.kp-paid-banner-info {
  background: rgba(124, 140, 248, 0.12);
  color: #c5c0d8;
  border: 1px solid rgba(124, 140, 248, 0.3);
}

/* fn-39.5 patch: two-column drop-zone composer UI. Admin drags
 * tiles between FREE (preview) and PAID (locked). All tiles land
 * in PAID by default on modal open; drag one or more into FREE to
 * set the post previews. Desktop-first per admin design-system;
 * mobile drag isn't a supported flow for v1. */
.kp-paid-dropzones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kp-paid-dropzone {
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.kp-paid-dropzone-free {
  border-left: 3px solid #7c8cf8;
}
.kp-paid-dropzone-paid {
  border-left: 3px solid #a594f9;
}
.kp-paid-dropzone.kp-paid-dropzone-hover {
  border-color: #c5c0d8;
  background: #1e1b2e;
}
.kp-paid-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kp-paid-zone-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c0bcd0;
}
.kp-paid-dropzone-free .kp-paid-zone-title {
  color: #7c8cf8;
}
.kp-paid-dropzone-paid .kp-paid-zone-title {
  color: #a594f9;
}
.kp-paid-zone-count {
  font-size: 11px;
  font-weight: 700;
  color: #6b6680;
  background: #0f0d15;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 24px;
  text-align: center;
}
.kp-paid-zone-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 100px;
  align-content: flex-start;
  padding: 4px 0;
}
.kp-paid-zone-hint {
  margin-top: 8px;
  font-size: 10px;
  color: #6b6680;
  line-height: 1.3;
}

/* Draggable tile — shown inside a drop zone. Min 44px touch target
 * per design-system; uses a cursor: grab hint to signal dragability. */
.kp-paid-tile-draggable {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1725;
  flex: 0 0 auto;
  cursor: grab;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.kp-paid-tile-draggable:active {
  cursor: grabbing;
}
.kp-paid-tile-draggable img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* let drag events bubble from the cell */
}
.kp-paid-tile-draggable.is-paid img {
  filter: blur(2px) brightness(0.85);
}
.kp-paid-tile-draggable.kp-paid-tile-dragging {
  opacity: 0.4;
  border-color: #c5c0d8;
}

/* Thumbnail star — only rendered on FREE tiles. Amber when active
 * (picked as the feed-grid thumbnail). */
.kp-paid-thumb-star {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 13, 21, 0.7);
  color: #6b6680;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-paid-thumb-star.is-active {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.6);
  background: rgba(251, 191, 36, 0.15);
}

/* Price row with $ prefix */
.kp-paid-price-row {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: #1a1725;
}
.kp-paid-price-prefix {
  padding: 8px 12px;
  color: #8b85a0;
  background: #161422;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.kp-paid-price-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e8e6f0;
  font-size: 14px;
  padding: 8px 12px;
  min-height: 36px;
}
.kp-paid-price-input:focus {
  outline: none;
}

/* Caption textarea — shares .kp-select padding/border. */
.kp-paid-caption {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

/* Expire + schedule row (2 cols on wide screens) */
.kp-paid-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kp-paid-schedule-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp-paid-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c0bcd0;
  cursor: pointer;
  min-height: 24px;
}
.kp-paid-radio input[type="radio"] {
  accent-color: #a594f9;
  margin: 0;
}

/* Submit button — matches .kp-post-btn but with the secondary accent
 * used for paid-post controls. */
.kp-paid-submit-btn {
  min-height: 44px;
  background: #a594f9 !important;
  color: #0f0d15 !important;
}
.kp-paid-submit-btn:hover:not(:disabled) {
  background: #b8abff !important;
}
.kp-paid-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* fn-59.2 — Onboard New Model form
   Single-column admin form. Reuses .card + .btn tokens from above. */
.onboard-card {
  max-width: 640px;
}
.onboard-row {
  margin-bottom: 18px;
}
.onboard-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e8e6f0;
  margin-bottom: 6px;
}
.onboard-row .onboard-req {
  color: #f87171;
}
.onboard-row .onboard-hint {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: #9b97ad;
  margin-top: 2px;
}
.onboard-row input[type="text"],
.onboard-row input[type="number"],
.onboard-row input[type="password"],
.onboard-row input[type="email"] {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #e8e6f0;
  font-size: 14px;
  font-family: inherit;
}
.onboard-row input:focus {
  outline: none;
  border-color: #7c8cf8;
  background: rgba(255, 255, 255, 0.06);
}
.onboard-row input.onboard-input-error {
  border-color: rgba(239, 68, 68, 0.7);
  background: rgba(239, 68, 68, 0.05);
}
.onboard-field-error {
  margin-top: 4px;
  font-size: 12px;
  color: #f87171;
}
.onboard-row-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.onboard-row-checkbox input[type="checkbox"] {
  margin-top: 2px;
}
.onboard-row-checkbox .onboard-hint {
  display: block;
  margin-left: 0;
  margin-top: 4px;
}
.onboard-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.onboard-banner {
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 13px;
}
.onboard-banner-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.onboard-banner-warn {
  background: rgba(243, 156, 18, 0.12);
  border: 1px solid rgba(243, 156, 18, 0.25);
  color: #f5b66e;
}

/* ─────────────────────────────────────────────────────────────────────
   fn-59.3: Auth-status pills (admin model list).
   Six tiers — solid border on healthy/loading; dashed border on the
   three problem states (expired / missing / skipped_2fa) so the cue
   does not depend on color alone (WCAG 1.4.1 non-color-cue).
   Reuses fn-58 RGBA token style — no new :root vars (CLAUDE.md hard
   rule on undefined CSS variables).
   ───────────────────────────────────────────────────────────────────── */
.auth-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: help;
  /* Default fallback — overridden by data-tier rules below. */
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}
.auth-status-pill[data-tier="valid"] {
  background: rgba(52, 211, 153, 0.15);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.3);
}
.auth-status-pill[data-tier="expiring"] {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.35);
}
.auth-status-pill[data-tier="expired"] {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
  border: 1.5px dashed rgba(248, 113, 113, 0.55);
}
.auth-status-pill[data-tier="missing"] {
  background: rgba(248, 113, 113, 0.08);
  color: var(--danger);
  border: 1.5px dashed rgba(248, 113, 113, 0.45);
}
.auth-status-pill[data-tier="skipped_2fa"] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
}
.auth-status-pill[data-tier="loading"] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Re-extract button — small ghost variant, sits next to the pill. */
.auth-reextract-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid rgba(124, 140, 248, 0.3);
  cursor: pointer;
  min-height: 26px;
}
.auth-reextract-btn:hover:not(:disabled) {
  background: rgba(124, 140, 248, 0.1);
}
.auth-reextract-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Toast for re-extract success / failure feedback. Single instance —
   the JS removes any existing toast before appending a new one. */
.auth-status-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.auth-status-toast.ok {
  background: rgba(52, 211, 153, 0.18);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.35);
}
.auth-status-toast.err {
  background: rgba(248, 113, 113, 0.18);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.4);
}

/* fn-61.2 — Story-cycle dashboard (/admin/story-cycle).
   Self-contained block. All selectors prefixed `sc-` to avoid clashes
   with the autopilot dashboard (`ap-` prefix) and the rest of admin.css. */
.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.sc-header h2 {
  font-size: 23px;
  font-weight: 700;
  color: #e8e6f0;
  margin: 0;
  /* UX audit (2026-05-12): h2 no longer wraps the status pills as
     children — the pills are now siblings inside .sc-page-title-row.
     h2 stays a plain inline-block so the accessible heading name is
     just "Story Cycle". */
}
.sc-page-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sc-header .sc-sub {
  font-size: 13px;
  color: #8b85a0;
  line-height: 1.5;
}
.sc-header .sc-sub code {
  background: rgba(124, 140, 248, 0.12);
  color: #c8c5d8;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.sc-status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc-status-active {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
}
.sc-status-paused {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.sc-mode-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sc-mode-dryrun {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.sc-mode-live {
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.sc-global-btn {
  background: #1e1b2e;
  color: #e8e6f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sc-global-btn:hover {
  background: #262340;
}
.sc-global-btn-danger {
  background: #4b1c1c;
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.3);
}
.sc-global-btn-danger:hover {
  background: #5a2121;
}
.sc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sc-stat {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px 20px;
}
.sc-stat-val {
  font-size: 28px;
  font-weight: 700;
  color: #e8e6f0;
  line-height: 1.1;
}
.sc-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b85a0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.sc-section {
  margin-bottom: 32px;
}
.sc-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #c8c5d8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}
.sc-chain-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 16px 18px;
}
.sc-chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #262340;
  border: 1px solid rgba(124, 140, 248, 0.25);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #e8e6f0;
  cursor: help;
  transition: background 0.15s ease;
}
.sc-chain-pill:hover {
  background: #2f2b50;
  border-color: rgba(124, 140, 248, 0.5);
}
.sc-chain-pill-sm {
  padding: 3px 9px;
  font-size: 11px;
  cursor: default;
}
.sc-chain-host {
  font-weight: 600;
  color: #c8c5d8;
}
.sc-chain-arrow {
  color: #8b85a0;
  font-weight: 700;
}
.sc-chain-mention {
  color: #7c8cf8;
  font-weight: 600;
}
.sc-chain-sep {
  color: #4b4760;
  font-size: 11px;
}
.sc-chain-meta {
  font-size: 11px;
  color: #8b85a0;
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.sc-chain-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc-table {
  width: 100%;
  border-collapse: collapse;
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.sc-table th {
  background: #262340;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b85a0;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: #e8e6f0;
  vertical-align: middle;
}
.sc-table tr:last-child td {
  border-bottom: none;
}
.sc-meta-dim {
  color: #6b6680;
  font-size: 11px;
}
.sc-empty {
  padding: 32px;
  text-align: center;
  color: #8b85a0;
  background: #1e1b2e;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.sc-empty-sm {
  padding: 16px;
  font-size: 12px;
}

/* Phase E (fn-61.5) — per-edge execution status badges */
.sc-status-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.sc-status-pending {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.sc-status-sending {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
  animation: sc-pulse 1.6s ease-in-out infinite;
}
.sc-status-sent {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.sc-status-failed,
.sc-status-skipped_auth_expired {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.sc-status-cancelled {
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.25);
  text-decoration: line-through;
}
.sc-status-deleted {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.sc-status-unknown,
.sc-status-draft {
  background: rgba(148, 163, 184, 0.08);
  color: #6b7280;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
@keyframes sc-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.sc-cycle-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 8px;
  border-radius: 3px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(255, 255, 255, 0.04);
  color: #6b7280;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.sc-edge-card-status {
  border-left: 3px solid rgba(124, 140, 248, 0.4);
}
.sc-edge-error {
  color: #fca5a5 !important;
  cursor: help;
}
.sc-edge-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

/* Phase D (fn-61.4) — preview badges + pairing-mode pill */
.sc-preview-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  color: #fff;
  vertical-align: middle;
}
.sc-pairing-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.sc-pairing-smart {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.sc-pairing-random {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.sc-pairing-smart_fallback_random {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.35);
}

/* Phase B (fn-61.3) — per-edge content slots */
.sc-edge-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc-edge-card {
  background: #1e1b2e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 16px;
}
.sc-edge-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
}
.sc-edge-meta-dim {
  color: #8b85a0;
  font-size: 12px;
  margin-left: 4px;
}
.sc-edge-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sc-edge-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  transition:
    border-color 120ms ease,
    transform 120ms ease;
}
.sc-edge-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-edge-tile-picked {
  border-color: #7c8cf8;
  box-shadow: 0 0 0 2px rgba(124, 140, 248, 0.25);
}
.sc-edge-tile-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  /* Galen feedback (2026-05-12): ★ is now a real <button> on every
     tile. Default state = "pick this one" — subtle bg, low opacity,
     hover ramps to the brand-gradient. .sc-edge-tile-picked parent
     overrides this to the full gradient (was the old static badge). */
  background: rgba(0, 0, 0, 0.55);
  color: #e8e6f0;
  border: 0;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}
.sc-edge-tile-badge:hover {
  opacity: 1;
  background: linear-gradient(135deg, #a594f9, #c4b5fa);
  color: #fff;
  transform: scale(1.05);
}
.sc-edge-tile-badge:focus-visible {
  outline: 2px solid rgba(124, 140, 248, 0.95);
  outline-offset: 2px;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .sc-edge-tile-badge:not(.sc-edge-tile-picked .sc-edge-tile-badge) {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* Picked tile's ★: full brand gradient, fully opaque, click is a no-op
   (the JS handler early-returns when the parent already has
   .sc-edge-tile-picked). cursor: default reinforces "this isn't an
   action" — but we DON'T disable the button so keyboard nav still
   focuses it. */
.sc-edge-tile-picked .sc-edge-tile-badge {
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  color: #fff;
  opacity: 1;
  cursor: default;
}
.sc-edge-tile-picked .sc-edge-tile-badge:hover {
  /* Don't pulse on hover when already picked — it's not a click target. */
  transform: none;
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
}
@media (prefers-reduced-motion: reduce) {
  .sc-edge-tile-badge {
    transition: none;
  }
  .sc-edge-tile-badge:hover {
    transform: none;
  }
}
@media (max-width: 720px) {
  .sc-edge-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sc-reason-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sc-reason-disabled {
  background: rgba(107, 102, 128, 0.18);
  color: #8b85a0;
}
.sc-reason-paused {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}
.sc-reason-no_keep_media {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.sc-reason-not_in_chain {
  background: rgba(124, 140, 248, 0.18);
  color: #7c8cf8;
}
.sc-reason-in_chain {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
}
/* Row-level tint must beat the global zebra-stripe selector
   `tbody tr:nth-child(even)` (specificity 0,1,2). Scoping with
   `.sc-table tbody tr.sc-reason-in_chain` (0,2,3) ensures every
   in-chain row renders green regardless of zebra parity. The
   colon-class selector above still styles the inline badge `<span>`
   (which the nth-child rule doesn't match). */
.sc-table tbody tr.sc-reason-in_chain {
  background: rgba(34, 197, 94, 0.18);
}
.sc-reason-no_auth_label,
.sc-reason-auth_unknown {
  background: rgba(107, 102, 128, 0.18);
  color: #8b85a0;
}
.sc-reason-auth_expired,
.sc-reason-auth_invalid,
.sc-reason-auth_failed,
.sc-reason-auth_error {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}

/* fn-69: multi-chain split-map per-cycle_class section */
.sc-class-section {
  background: #161422;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.sc-class-protected {
  border-left: 3px solid #7c8cf8;
}
.sc-class-unprotected {
  border-left: 3px solid #a594f9;
}
.sc-class-shoutout {
  border-left: 3px solid #f8c97c;
}
.sc-class-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sc-class-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #e8e6f0;
}
.sc-class-meta-dim {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  margin-left: 8px;
}
.sc-class-run-btn {
  background: linear-gradient(135deg, #7c8cf8, #a594f9);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.sc-class-run-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}
.sc-class-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Galen feedback (2026-05-12): Stop button — sibling to Run when a
   chain is in-flight. Red destructive styling distinguishes it from
   the brand-indigo Run. */
.sc-class-stop-btn {
  background: #b91c1c;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 8px;
  transition:
    background 120ms ease,
    transform 120ms ease;
}
.sc-class-stop-btn:hover:not(:disabled) {
  background: #dc2626;
  transform: scale(1.02);
}
.sc-class-stop-btn:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}
.sc-class-stop-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .sc-class-stop-btn {
    transition: none;
  }
  .sc-class-stop-btn:hover {
    transform: none;
  }
}
.sc-edge-retry-btn {
  background: rgba(124, 140, 248, 0.14);
  color: #c7d2fe;
  border: 1px solid rgba(124, 140, 248, 0.45);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: background 120ms ease;
}
.sc-edge-retry-btn:hover:not(:disabled) {
  background: rgba(124, 140, 248, 0.28);
}
.sc-edge-retry-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.sc-edge-retry-btn-queued {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.5);
}
.sc-mode-skipped_below_min {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
}

/* fn-69 T5: per-model class-override dropdown + resolved-class badge */
.sc-class-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.sc-class-select {
  background: #1a1725;
  color: #e8e6f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 110px;
}
.sc-class-select:disabled {
  opacity: 0.5;
  cursor: progress;
}
.sc-class-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  white-space: nowrap;
}
.sc-class-badge-protected {
  background: rgba(124, 140, 248, 0.18);
  color: #a5b4fc;
}
.sc-class-badge-unprotected {
  background: rgba(165, 148, 249, 0.18);
  color: #c4b5fd;
}
.sc-class-badge-shoutout {
  background: rgba(248, 201, 124, 0.18);
  color: #fcd34d;
}
.sc-class-badge-suffix {
  opacity: 0.6;
  font-weight: 400;
  margin-left: 2px;
}

/* fn-70: per-class "Not picked" subsection inside cycle_class_row macro */
.sc-not-picked .sc-section-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.sc-not-picked-meta {
  margin-bottom: 8px;
  font-size: 11px;
}
.sc-not-picked-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sc-not-picked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  flex-wrap: wrap;
}
.sc-not-picked-name {
  font-size: 12px;
  color: #e8e6f0;
  font-weight: 500;
  flex: 1;
  min-width: 100px;
}

/* fn-71: per-class stagger-minutes input next to the Run-now button */
.sc-class-stagger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 8px;
  white-space: nowrap;
}
.sc-class-stagger-label {
  font-weight: 500;
}
.sc-class-stagger-input {
  width: 60px;
  background: #1a1725;
  color: #e8e6f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
  text-align: right;
}
.sc-class-stagger-input:disabled {
  opacity: 0.5;
  cursor: progress;
}
.sc-class-stagger-input:focus {
  outline: none;
  border-color: #7c8cf8;
}
.sc-class-stagger-unit {
  opacity: 0.7;
}

/* fn-72: Anti-repeat telemetry line on per-class card. One row under the
   header; clean (green tint) or forced-overlap (yellow tint). Counts come
   from `dedup_summary_by_class` injected by /admin/story-cycle. */
.sc-class-dedup {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 16px 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", "Menlo", "Monaco", monospace;
  cursor: help;
}
.sc-class-dedup-clean {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  color: #86efac;
}
.sc-class-dedup-warn {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.22);
  color: #fcd34d;
}
.sc-class-dedup-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.sc-class-dedup-stat {
  font-variant-numeric: tabular-nums;
}
.sc-class-dedup-sep {
  opacity: 0.4;
}
.sc-class-dedup-tag {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.sc-class-dedup-clean .sc-class-dedup-tag {
  color: #86efac;
}
.sc-class-dedup-warn .sc-class-dedup-tag {
  color: #fcd34d;
}

/* UX: dedup-line content rewrite (icon + plain text + hint).
   Existing .sc-class-dedup-clean / .sc-class-dedup-warn tinting still applies. */
.sc-class-dedup-icon {
  font-size: 15px;
  font-weight: 700;
}
.sc-class-dedup-msg {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  letter-spacing: 0.005em;
}
.sc-class-dedup-hint {
  opacity: 0.6;
  font-weight: 400;
}

/* UX: tab strip for cycle_class sections. One tab per class, only the
   selected tab's <section> is visible (toggled by `hidden` attr from the
   scShowTab JS handler). Sits between the global empty-states and the
   per-class sections so the user lands on Protected by default. */
.sc-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
  margin-bottom: -1px; /* overlap parent border for active state */
  border-radius: 6px 6px 0 0;
}
.sc-tab:hover {
  color: var(--text-primary, #fff);
  background: rgba(255, 255, 255, 0.03);
}
.sc-tab--active {
  color: #fff;
  border-bottom-color: #7c8cf8;
}
.sc-tab-label {
  font-weight: 600;
}
.sc-tab-count {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}
.sc-tab--active .sc-tab-count {
  background: rgba(124, 140, 248, 0.18);
  color: #c4cdfb;
}
.sc-tab-panel[hidden] {
  display: none !important;
}

/* UX: collapsible <details> sections for Last chain, Not picked, Content
   options, Models table. Native <details>/<summary> — no JS needed. */
.sc-collapsible {
  /* margin/padding from existing .sc-section already applies */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin: 12px 16px;
  overflow: hidden;
}
.sc-collapsible[open] {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.16);
}
/* Inner padding for the body content of an opened collapsible. The
   <summary> already has its own 12/14 padding; non-summary children
   are direct content (description divs, edge-lists, tables) that need
   matching left/right padding so they don't bleed to the border. The
   bottom-child rule adds the closing bottom padding so the box has
   even breathing room top-to-bottom. */
.sc-collapsible > *:not(summary) {
  padding-left: 14px;
  padding-right: 14px;
}
.sc-collapsible[open] > *:last-child:not(summary) {
  padding-bottom: 14px;
}
.sc-collapsible[open] > .sc-collapsible-summary + *:not(summary) {
  padding-top: 4px;
}
.sc-collapsible-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  transition: background 120ms ease;
}
.sc-collapsible-summary:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sc-collapsible-summary::-webkit-details-marker {
  display: none;
}
.sc-collapsible-summary::before {
  content: "▸";
  display: inline-block;
  font-size: 11px;
  opacity: 0.5;
  transition: transform 120ms ease;
}
.sc-collapsible[open] > .sc-collapsible-summary::before {
  transform: rotate(90deg);
}
.sc-collapsible-title {
  font-weight: 600;
  color: var(--text-primary, #fff);
}
.sc-collapsible-hint {
  margin-left: auto;
  opacity: 0.5;
  font-size: 12px;
  font-weight: 400;
}

/* Last-chain summary stats (sent/failed/pending counts in the closed view). */
.sc-last-chain-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.sc-last-chain-stats .sc-stat-sent {
  color: #86efac;
}
.sc-last-chain-stats .sc-stat-failed {
  color: #fca5a5;
}
.sc-last-chain-stats .sc-stat-pending {
  color: #fcd34d;
}
.sc-last-chain-stats .sc-stat-other {
  opacity: 0.6;
}

/* UX cycle #10: shared content-preview modal triggered from .sc-edge-tile
   click. Single instance lives at the page top in story_cycle.html;
   scOpenTileModal/scTileModalClose toggle visibility via [hidden] +
   .sc-tile-modal-open. Video sources autoplay + loop; close stops + clears
   src so the proxy connection is released. */
.sc-edge-tile {
  cursor: pointer;
}
.sc-tile-modal[hidden] {
  display: none !important;
}
.sc-tile-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sc-tile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.sc-tile-modal-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  background: var(--surface-card, #1e1b2e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.sc-tile-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
}
.sc-tile-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.sc-tile-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  padding-right: 36px;
}
.sc-tile-modal-host {
  font-weight: 600;
}
.sc-tile-modal-arrow {
  opacity: 0.45;
}
.sc-tile-modal-mentioned {
  color: #c4cdfb;
  font-weight: 600;
}
.sc-tile-modal-picked-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  background: rgba(252, 211, 77, 0.18);
  color: #fcd34d;
  border-radius: 999px;
}
.sc-tile-modal-picked-badge[hidden] {
  display: none;
}
.sc-tile-modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  min-height: 280px;
  max-height: 60vh;
  overflow: hidden;
}
.sc-tile-modal-media img,
.sc-tile-modal-media video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  display: block;
  background: #000;
}
.sc-tile-modal-error {
  color: #fca5a5;
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
.sc-tile-modal-burn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.sc-tile-modal-burn-btn {
  background: rgba(124, 140, 248, 0.12);
  border: 1px solid rgba(124, 140, 248, 0.45);
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}
.sc-tile-modal-burn-btn:hover:not(:disabled) {
  background: rgba(124, 140, 248, 0.22);
  border-color: rgba(124, 140, 248, 0.7);
}
.sc-tile-modal-burn-status {
  font-size: 12px;
  color: #fca5a5;
}
.sc-tile-modal-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.sc-tile-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}
.sc-tile-modal-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.sc-tile-modal-stat-val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .sc-tile-modal-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────────────
   fn-75 T3: picker manual-override surfaces — swap button on tiles,
   OVERRIDDEN badge on row header, and the swap modal listing all of
   the mentioned model's Keep content sorted by CVR DESC.
   ────────────────────────────────────────────────────────────────── */

/* Swap button — overlay on each picker preview tile, top-left to
   avoid colliding with the ★ posts this badge (also top) and the
   bottom-right CVR badge. Always visible (not hover-only) so it's
   discoverable per Galen's "i can't select images here" complaint. */
.sc-edge-tile-swap-btn {
  position: absolute;
  /* Galen feedback (2026-05-12): top-left was blocking the
     "★ posts this" badge on picked tiles. Moved to top-right —
     no collision (CVR badge is bottom-right, ★ badge is top-left). */
  top: 8px;
  right: 8px;
  z-index: 3;
  /* UX audit (2026-05-12): enlarged from 50×20 @ 0.85 opacity to
     64×28 @ 1.0 opacity. Galen flagged the old size as fiddly. */
  min-width: 64px;
  min-height: 28px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  letter-spacing: 0.02em;
  opacity: 1;
  transition:
    opacity 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .sc-edge-tile-swap-btn {
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.sc-edge-tile-swap-btn:hover {
  background: rgba(124, 140, 248, 0.92);
  transform: scale(1.05);
}
.sc-edge-tile-swap-btn:focus-visible {
  outline: 2px solid rgba(124, 140, 248, 0.95);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sc-edge-tile-swap-btn {
    transition: none;
  }
  .sc-edge-tile-swap-btn:hover {
    transform: none;
  }
}

/* OVERRIDDEN badge — distinct amber color so Galen sees at a glance
   which row headers carry an admin manual swap. Click to clear. */
.sc-edge-override-badge {
  display: inline-block;
  background: #b87a2c;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 120ms ease,
    transform 120ms ease;
}
.sc-edge-override-badge:hover {
  background: #d18b35;
}
/* fn-75 UX hotfix: armed state for inline 2-click clear confirm.
   Visual cue that the next click commits the destructive action —
   replaces the old window.confirm() dialog. */
.sc-edge-override-badge-armed {
  background: #c53030;
  transform: scale(1.05);
  animation: sc-armed-pulse 1.5s ease-in-out infinite;
}
.sc-edge-override-badge-armed:hover {
  background: #e53e3e;
}
@keyframes sc-armed-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(197, 48, 48, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(197, 48, 48, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc-edge-override-badge-armed {
    animation: none;
  }
}

/* Screen-reader-only utility — used by the aria-live announcer for
   transient feedback ("Override saved", "Override cleared", etc.). */
.sc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Swap modal — mirrors .sc-tile-modal pattern but wider grid for
   listing all Keep media (uncapped, vs the picker preview's 5-tile
   limit). */
.sc-swap-modal[hidden] {
  display: none !important;
}
.sc-swap-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-swap-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 21, 0.78);
}
.sc-swap-modal-content {
  position: relative;
  background: #1e1b2e;
  color: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 90vw;
  max-height: 88vh;
  width: 1000px;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.sc-swap-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.sc-swap-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sc-swap-modal-header {
  margin-bottom: 16px;
  padding-right: 40px;
}
.sc-swap-modal-header h3 {
  margin: 0 0 4px 0;
  font-size: 19px;
  font-weight: 600;
}
.sc-swap-modal-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.sc-swap-modal-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  font-style: italic;
}
.sc-swap-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.sc-swap-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #161422;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}
.sc-swap-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 140, 248, 0.4);
}
.sc-swap-tile-current {
  outline: 2px solid #fbbf24;
  outline-offset: 1px;
}
.sc-swap-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .sc-swap-modal-content {
    width: 100%;
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }
  .sc-swap-modal-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

/* 2026-05-14: sticky per-class run-state rollup strip on /admin/story-cycle.
   Always-visible at-a-glance state per cycle_class, regardless of which tab
   panel is open. Server-renders initial state from `pending_chain_count_by_class`;
   JS updates from `/admin/story-cycle/chain-status?by_class` poll. */
.sc-class-rollup {
  position: sticky;
  top: 48px;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: #161422;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.sc-class-rollup-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
}
.sc-class-rollup-item[data-state="active"] {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--success, #22c55e);
}
.sc-class-rollup-item[data-state="failed"] {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--danger, #ef4444);
}
.sc-class-rollup-item[data-state="done"] {
  background: rgba(124, 140, 248, 0.1);
  border-color: rgba(124, 140, 248, 0.3);
  color: var(--accent-primary, #7c8cf8);
}
.sc-class-rollup-item[data-state="idle"] {
  color: var(--text-dim, rgba(255, 255, 255, 0.35));
}
.sc-rollup-emoji {
  font-size: 14px;
  line-height: 1;
}
.sc-rollup-name {
  font-weight: 600;
  text-transform: lowercase;
}
.sc-rollup-state-text {
  opacity: 0.85;
}