/* =============================================================================
   VidPipe Studio — Admin Interface
   Uses unified tokens from tokens.css. Dark sidebar + brand indigo accent.
   All .a-* classes preserved (JSX dependency).
   ============================================================================= */

.admin-app {
  /* Sidebar palette — premium dark, Linear-inspired */
  --sb-bg: #0A0A0C;
  --sb-bg2: #101014;
  --sb-text: #8A8A95;
  --sb-text-hi: #F8F8FA;
  --sb-border: rgba(255, 255, 255, 0.055);
  --sb-hover: rgba(255, 255, 255, 0.04);
  --sb-accent: rgba(139, 119, 255, 0.14);
  --sb-accent-glow: rgba(139, 119, 255, 0.22);

  font-family: var(--font-sans);
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}

.admin-app[data-theme="dark"] {
  --sb-bg: #050507;
  --sb-bg2: #0B0B0E;
  --sb-border: rgba(255, 255, 255, 0.05);
  --sb-hover: rgba(255, 255, 255, 0.05);
}

/* ═══ SIDEBAR ═══ */
.a-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background:
    radial-gradient(ellipse 400px 200px at top left, rgba(139, 119, 255, 0.06), transparent 70%),
    linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg2) 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sb-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.a-sidebar::-webkit-scrollbar { width: 4px; }
.a-sidebar::-webkit-scrollbar-track { background: transparent; }
.a-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.a-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

.a-sb-brand {
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.a-sb-brand::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sb-border), transparent);
}
.a-sb-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6E5AFF 0%, #8B77FF 50%, #A594FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-extrabold);
  font-size: 15px;
  color: #fff;
  box-shadow:
    0 4px 14px rgba(139, 119, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  letter-spacing: -0.02em;
}
.a-sb-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sb-text-hi);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.a-sb-brand-sub {
  font-size: 10.5px;
  color: var(--sb-text);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.a-sb-new {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 14px 12px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  border: 1px solid rgba(139, 119, 255, 0.28);
  background: linear-gradient(135deg, rgba(110, 90, 255, 0.22), rgba(139, 119, 255, 0.14));
  font-family: inherit;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(110, 90, 255, 0.12);
  letter-spacing: -0.01em;
}
.a-sb-new i { font-size: 12px; color: #B8ABFF; }
.a-sb-new:hover {
  background: linear-gradient(135deg, rgba(110, 90, 255, 0.30), rgba(139, 119, 255, 0.20));
  border-color: rgba(139, 119, 255, 0.42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 18px rgba(110, 90, 255, 0.22);
  transform: translateY(-1px);
}
.a-sb-new:active { transform: translateY(0); }

.a-sb-nav { padding: 2px 10px; flex: 1; }
.a-sb-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sb-text);
  opacity: 0.55;
  padding: 14px 12px 6px;
}
.a-sb-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  margin-bottom: 1px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-text);
  cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease), transform 150ms var(--ease);
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  position: relative;
  letter-spacing: -0.005em;
}
.a-sb-btn:hover {
  background: var(--sb-hover);
  color: var(--sb-text-hi);
}
.a-sb-btn:hover i { opacity: 0.95; }
.a-sb-btn.active {
  background: var(--sb-accent);
  color: #D9CFFF;
  font-weight: 600;
}
.a-sb-btn.active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 7px;
  bottom: 7px;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8B77FF, #6E5AFF);
  box-shadow: 0 0 10px var(--sb-accent-glow);
}
.a-sb-btn i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.62;
  transition: opacity 150ms var(--ease);
}
.a-sb-btn.active i { opacity: 1; color: #B8ABFF; }
.a-sb-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sb-border), transparent);
  margin: 10px 14px;
}

.a-sb-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease);
  background: rgba(0, 0, 0, 0.18);
}
.a-sb-footer:hover { background: rgba(255, 255, 255, 0.03); }
.a-sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6E5AFF, #8B77FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 3px 10px rgba(110, 90, 255, 0.22), inset 0 1px 0 rgba(255,255,255,0.2);
  letter-spacing: -0.01em;
}
.a-sb-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text-hi);
  letter-spacing: -0.01em;
}
.a-sb-user-role {
  font-size: 10.5px;
  color: var(--sb-text);
  text-transform: capitalize;
  margin-top: 1px;
  letter-spacing: 0.01em;
}

/* ═══ CONTENT AREA ═══ */
.a-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Topbar */
.a-topbar {
  height: 56px;
  min-height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-3);
}
.a-topbar-page {
  font-size: var(--text-base);
  color: var(--color-text-2);
  flex: 1;
  font-weight: var(--weight-medium);
}
.a-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.a-tb-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-3);
  transition: all var(--duration-fast) var(--ease);
  font-size: var(--text-md);
}
.a-tb-icon:hover {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}
.a-tb-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}
.a-tb-user:hover {
  border-color: var(--color-border-stronger);
  background: var(--color-surface-2);
}
.a-tb-user-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: #fff;
}

/* Page area */
.a-page {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8) var(--space-16);
}
/* When Scripts Studio is rendered inline, it manages its own scroll + padding,
   so strip the wrapper page's padding and let it stretch full-height. This
   fixes: (a) inner chat scroll not working because the outer page was eating
   the scroll, and (b) ugly white page background bleeding through under the
   chat. */
.a-page:has(.ss-wrap) { padding: 0; overflow: hidden; }
.a-page:has(.ss-wrap) > div { max-width: none !important; height: 100%; }
/* Hide the outer topbar when Scripts Studio is active — the component has
   its own header, so showing both creates a redundant double-header with
   two hamburgers. */
.a-content:has(.ss-wrap) > .a-topbar { display: none; }

/* ─── Scripts Studio — header (light mode defaults) ───────────────────────── */
.ss-header {
  position: sticky; top: 0; z-index: 15;
  background: rgba(252, 251, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 16px;
  display: flex; align-items: center; gap: 6px;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.ss-wrap.has-msgs .ss-header { border-bottom-color: rgba(139, 119, 255, 0.10); }
.ss-header-icon {
  width: 34px; height: 34px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer; color: #6b6b73;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 150ms ease, color 150ms ease;
}
.ss-header-icon i { font-size: 14px; }
.ss-header-icon:hover { background: rgba(0,0,0,0.04); color: #1a1a1a; }
.ss-header-title {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 6px; margin-left: 2px; border-radius: 12px;
  cursor: pointer; transition: background 150ms ease;
}
.ss-header-title:hover { background: rgba(139, 119, 255, 0.08); }
.ss-header-logo {
  width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(135deg, #6E5AFF 0%, #8B77FF 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(110, 90, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.ss-header-logo i { font-size: 10px; color: #fff; }
.ss-header-name {
  font-size: 14px; font-weight: 600; color: #1a1a1a;
  letter-spacing: -0.015em;
}
.ss-header-ctx {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #6b6b73;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(139, 119, 255, 0.06);
  border: 1px solid rgba(139, 119, 255, 0.14);
  font-weight: 500; letter-spacing: 0.005em;
}

/* ─── Scripts Studio — dark-mode overrides ─────────────────────
   The component uses inline styles (React JSX) tuned for light mode. We
   override the critical surfaces in dark mode via !important so the chat
   palette flows with the dark sidebar instead of glowing white. */
.admin-app[data-theme="dark"] .ss-header {
  background: rgba(14, 14, 20, 0.75);
}
.admin-app[data-theme="dark"] .ss-wrap.has-msgs .ss-header { border-bottom-color: rgba(139, 119, 255, 0.14); }
.admin-app[data-theme="dark"] .ss-header-icon { color: #A5A5B2; }
.admin-app[data-theme="dark"] .ss-header-icon:hover { background: rgba(255,255,255,0.06); color: #F5F5F8; }
.admin-app[data-theme="dark"] .ss-header-title:hover { background: rgba(139, 119, 255, 0.12); }
.admin-app[data-theme="dark"] .ss-header-name { color: #F5F5F8; }
.admin-app[data-theme="dark"] .ss-header-ctx {
  color: #A5A5B2;
  background: rgba(139, 119, 255, 0.10);
  border-color: rgba(139, 119, 255, 0.22);
}

/* ─── Scripts Studio — welcome context pickers (native <select> wrapped in a styled label) ─── */
.ss-ctx-select {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(139, 119, 255, 0.20);
  font-family: inherit; cursor: pointer;
  font-size: 12.5px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  transition: transform 180ms cubic-bezier(0.2,0.8,0.2,1), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.ss-ctx-select:hover {
  transform: translateY(-1px);
  border-color: rgba(139, 119, 255, 0.48);
  background: #fafaff;
  box-shadow: 0 6px 18px rgba(110, 90, 255, 0.14), 0 0 0 3px rgba(139, 119, 255, 0.08);
}
.ss-ctx-select .ss-ctx-label {
  color: #8a8a95; font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ss-ctx-select .ss-ctx-val {
  color: #1a1a1a; font-weight: 600; letter-spacing: -0.005em;
}
.ss-ctx-select select {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent;
  font: inherit;
}

.admin-app[data-theme="dark"] .ss-ctx-select {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(139, 119, 255, 0.06));
  border-color: rgba(139, 119, 255, 0.22);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.admin-app[data-theme="dark"] .ss-ctx-select:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(139, 119, 255, 0.12));
  border-color: rgba(139, 119, 255, 0.48);
  box-shadow: 0 6px 18px rgba(110, 90, 255, 0.22), 0 0 0 3px rgba(139, 119, 255, 0.12);
}
.admin-app[data-theme="dark"] .ss-ctx-select .ss-ctx-label { color: #8a8a95; }
.admin-app[data-theme="dark"] .ss-ctx-select .ss-ctx-val { color: #F5F5F8; }
/* Dark-mode native select dropdown: inherit dark bg from browser */
.admin-app[data-theme="dark"] .ss-ctx-select select { color-scheme: dark; }
.admin-app[data-theme="dark"] .ss-wrap {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 119, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(139, 119, 255, 0.05), transparent 55%),
    linear-gradient(180deg, #0A0A0D 0%, #0E0E14 40%, #0B0B10 100%) !important;
  color: #E8E8EC;
}
.admin-app[data-theme="dark"] .ss-wrap .ss-icon-btn { color: #A5A5B2 !important; }
.admin-app[data-theme="dark"] .ss-wrap .ss-icon-btn:hover { background: rgba(255,255,255,0.05) !important; color: #F5F5F8 !important; }

/* Welcome hero — second line ("What should we work on today?") */
.admin-app[data-theme="dark"] .ss-wrap .ss-msg-in > div > div:nth-child(2) { color: #F5F5F8 !important; }

/* Welcome action chips */
.admin-app[data-theme="dark"] .ss-wrap .ss-chip {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(139, 119, 255, 0.06)) !important;
  border-color: rgba(139, 119, 255, 0.22) !important;
  color: #D8D8E0 !important;
}
.admin-app[data-theme="dark"] .ss-wrap .ss-chip:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(139, 119, 255, 0.12)) !important;
  border-color: rgba(139, 119, 255, 0.42) !important;
  color: #F5F5F8 !important;
  box-shadow: 0 6px 20px rgba(110, 90, 255, 0.22), 0 0 0 3px rgba(139, 119, 255, 0.12) !important;
}

/* Chat input pill */
.admin-app[data-theme="dark"] .ss-wrap .ss-input-pill {
  background: linear-gradient(180deg, #14141C, #10101A) !important;
  border-color: rgba(139, 119, 255, 0.22) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(139, 119, 255, 0.08) !important;
}
.admin-app[data-theme="dark"] .ss-wrap .ss-input-pill:focus-within {
  border-color: rgba(139, 119, 255, 0.48) !important;
  box-shadow: 0 6px 28px rgba(110, 90, 255, 0.22), 0 0 0 3px rgba(139, 119, 255, 0.14) !important;
  background: linear-gradient(180deg, #16161F, #12121C) !important;
}
.admin-app[data-theme="dark"] .ss-wrap .ss-input-pill input[type="text"] {
  color: #F5F5F8 !important;
  background: transparent !important;
}
.admin-app[data-theme="dark"] .ss-wrap .ss-input-pill input[type="text"]::placeholder {
  color: #6B6B77 !important;
}

/* Input-fade gradient at bottom of chat */
.admin-app[data-theme="dark"] .ss-wrap > div > div[style*="pointer-events"][style*="sticky"] {
  background: linear-gradient(rgba(11, 11, 16, 0), #0B0B10 35%, #0B0B10 100%) !important;
}

/* User message bubbles + AI text */
.admin-app[data-theme="dark"] .ss-wrap .ss-msg-in [style*="background: rgb(244, 244, 244)"],
.admin-app[data-theme="dark"] .ss-wrap .ss-msg-in [style*="background:#f4f4f4"] {
  background: #1E1E28 !important;
  color: #F0F0F4 !important;
}
/* Transcript preview card — dark */
.admin-app[data-theme="dark"] .ss-wrap .ss-msg-in .ss-script-body[style*="linear-gradient(180deg, rgba(139"] {
  color: #E4E4E8 !important;
  background: linear-gradient(180deg, rgba(139, 119, 255, 0.10), rgba(139, 119, 255, 0.04)) !important;
  border-color: rgba(139, 119, 255, 0.22) !important;
}

/* Drag-drop overlay */
.admin-app[data-theme="dark"] .ss-wrap [style*="border: 2px dashed"] {
  border-color: rgba(139, 119, 255, 0.38) !important;
  background: rgba(10, 10, 14, 0.85) !important;
  color: #F0F0F4 !important;
}
.a-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.a-page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.admin-app[data-theme="dark"] .a-page-title {
  background: linear-gradient(135deg, #FFFFFF 0%, #C8C9FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.a-page-sub {
  font-size: var(--text-base);
  color: var(--color-text-2);
  margin-top: 2px;
}

/* Stats */
.a-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.a-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--duration-fast) var(--ease);
}
.a-stat:hover { border-color: var(--color-border-strong); }
.a-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}
.a-stat-val {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-tight);
}

/* Buttons */
.a-btn-primary {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-brand);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--ease);
}
.a-btn-primary:hover {
  background: var(--color-brand-hover);
  box-shadow: var(--shadow-brand);
}
.a-btn-primary:active { transform: scale(0.98); }

/* Cards */
.a-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--duration-fast) var(--ease);
}
.a-card:hover { border-color: var(--color-border-strong); }
.a-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Status pills */
.a-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.a-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.a-pill.active { background: var(--color-brand-soft); color: var(--color-brand); }
.a-pill.draft { background: var(--color-warn-soft); color: var(--color-warn); }
.a-pill.done { background: var(--color-success-soft); color: var(--color-success); }
.a-pill.error { background: var(--color-danger-soft); color: var(--color-danger); }

/* Scene cards */
.a-scene-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.a-scene-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.a-scene-card.approved {
  border-color: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success-soft);
}

/* Animations */
@keyframes aFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.a-anim {
  animation: aFadeUp 0.4s var(--ease) forwards;
  opacity: 0;
}
.a-d1 { animation-delay: 0.04s; }
.a-d2 { animation-delay: 0.08s; }
.a-d3 { animation-delay: 0.12s; }

/* Responsive */
@media (max-width: 1000px) {
  .a-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Collapsed sidebar */
.admin-app.sb-collapsed .a-sidebar {
  width: 64px;
  min-width: 64px;
}
.admin-app.sb-collapsed .a-sb-brand-name,
.admin-app.sb-collapsed .a-sb-brand-sub,
.admin-app.sb-collapsed .a-sb-btn span,
.admin-app.sb-collapsed .a-sb-label,
.admin-app.sb-collapsed .a-sb-user-name,
.admin-app.sb-collapsed .a-sb-user-role,
.admin-app.sb-collapsed .a-sb-new span { display: none; }

/* In collapsed mode, hide the chevrons (section-expand arrows) — they
   take space and make the icons look off-center. */
.admin-app.sb-collapsed .a-sb-btn > i.fa-chevron-right,
.admin-app.sb-collapsed .a-sb-btn > i.fa-chevron-down { display: none; }

.admin-app.sb-collapsed .a-sb-nav { padding: 2px 8px; }
.admin-app.sb-collapsed .a-sb-btn {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
  width: 48px;
  margin: 0 auto 2px;
  border-radius: 10px;
}
.admin-app.sb-collapsed .a-sb-btn i {
  width: auto;
  font-size: 15px;
  opacity: 0.7;
}
.admin-app.sb-collapsed .a-sb-btn:hover i { opacity: 1; }
.admin-app.sb-collapsed .a-sb-btn.active {
  background: linear-gradient(135deg, rgba(139, 119, 255, 0.20), rgba(110, 90, 255, 0.12));
  box-shadow: 0 2px 10px rgba(110, 90, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.04);
}
.admin-app.sb-collapsed .a-sb-btn.active i { color: #B8ABFF; opacity: 1; }
/* Replace the left accent bar (which gets clipped) with a subtle right-edge dot for active state. */
.admin-app.sb-collapsed .a-sb-btn.active::before { display: none; }
.admin-app.sb-collapsed .a-sb-btn.active::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8B77FF, #6E5AFF);
  box-shadow: 0 0 10px var(--sb-accent-glow);
}

.admin-app.sb-collapsed .a-sb-new {
  justify-content: center;
  margin: 10px auto;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.admin-app.sb-collapsed .a-sb-footer {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}
.admin-app.sb-collapsed .a-sb-brand {
  justify-content: center;
  padding: 16px 0 14px;
}
.admin-app.sb-collapsed .a-sb-brand::after { left: 12px; right: 12px; }
.admin-app.sb-collapsed .a-sb-divider { margin: 10px 12px; }
/* Collapsed-mode section-nested items: cannot show children when nav is narrow.
   The JS still renders them — hide via CSS to avoid broken rows. */
.admin-app.sb-collapsed .a-sb-nav > div > div { display: none; }
.admin-app.sb-collapsed .a-sb-nav > div > div.a-sb-btn,
.admin-app.sb-collapsed .a-sb-nav > div > button { display: flex; }
.a-sidebar { transition: width var(--duration-base) var(--ease), min-width var(--duration-base) var(--ease); }

@media (max-width: 768px) {
  .admin-app:not(.sb-collapsed) .a-sidebar { width: 60px; min-width: 60px; }
  .admin-app:not(.sb-collapsed) .a-sb-brand-name,
  .admin-app:not(.sb-collapsed) .a-sb-brand-sub,
  .admin-app:not(.sb-collapsed) .a-sb-btn span,
  .admin-app:not(.sb-collapsed) .a-sb-label,
  .admin-app:not(.sb-collapsed) .a-sb-user-name,
  .admin-app:not(.sb-collapsed) .a-sb-user-role,
  .admin-app:not(.sb-collapsed) .a-sb-new span { display: none; }
  .admin-app:not(.sb-collapsed) .a-sb-btn { justify-content: center; padding: var(--space-3); }
  .admin-app:not(.sb-collapsed) .a-sb-new { justify-content: center; }
  .admin-app:not(.sb-collapsed) .a-sb-footer { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   Phase 2 widgets in icon-rail sidebar states
   The WorkspaceSwitcher + BalancePanel inject wide rows that don't fit in a
   60–64 px icon rail. Hide them whenever the sidebar is in icon-rail mode:
     - .admin-app.sb-collapsed       (desktop user collapse)
     - @media (max-width:768px)      (mobile forced collapse)
   Desktop expanded sidebar keeps showing them exactly as before.
   ----------------------------------------------------------------------------- */
.admin-app.sb-collapsed [data-phase2-ws-injected],
.admin-app.sb-collapsed [data-phase2-balance-injected] {
  display: none !important;
}

@media (max-width: 768px) {
  /* Hide injected Workspace + Balance regardless of collapse state — on mobile
     the sidebar is forced to 60 px and the wide widgets would clip. */
  .admin-app [data-phase2-ws-injected],
  .admin-app [data-phase2-balance-injected] {
    display: none !important;
  }

  /* Tighten the non-collapsed (forced-rail) layout so brand, nav, and buttons
     center cleanly without text labels. */
  .admin-app:not(.sb-collapsed) .a-sb-brand {
    justify-content: center;
    padding: 16px 0 14px;
  }
  .admin-app:not(.sb-collapsed) .a-sb-brand::after {
    left: 12px;
    right: 12px;
  }
  .admin-app:not(.sb-collapsed) .a-sb-nav {
    padding: 2px 8px;
  }
  .admin-app:not(.sb-collapsed) .a-sb-btn {
    justify-content: center;
    width: 48px;
    margin: 0 auto 2px;
    padding: 10px 0;
    gap: 0;
    border-radius: 10px;
  }
  .admin-app:not(.sb-collapsed) .a-sb-btn > i.fa-chevron-right,
  .admin-app:not(.sb-collapsed) .a-sb-btn > i.fa-chevron-down {
    display: none;
  }
  /* Section-nested items: same trick as the desktop-collapsed rule — hide
     children rows but keep the section's own button/header visible. */
  .admin-app:not(.sb-collapsed) .a-sb-nav > div > div {
    display: none;
  }
  .admin-app:not(.sb-collapsed) .a-sb-nav > div > div.a-sb-btn,
  .admin-app:not(.sb-collapsed) .a-sb-nav > div > button {
    display: flex;
  }
}

/* =============================================================================
   Video Library — Premium Design (matches Scripts Studio / Pipeline)
   Uses design-system classes: .card, .card-glass, .badge, .btn-*, .drop-zone
   Only .vl-* for layout-specific overrides
   ============================================================================= */

/* ─── Video Library v2 — redesigned hero + unified search/filter toolbar ───── */
.vl2 { max-width: 1200px; margin: 0 auto; }
.vl2-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 6px 2px 22px;
  position: relative;
}
.vl2-hero::before {
  content: ""; position: absolute;
  left: -40px; top: -20px; width: 220px; height: 140px;
  background: radial-gradient(ellipse at center, rgba(139, 119, 255, 0.14), transparent 70%);
  filter: blur(20px); pointer-events: none; z-index: 0;
}
.vl2-hero-text { position: relative; z-index: 1; }
.vl2-title {
  font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-text) 0%, #8B77FF 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
  line-height: 1.1;
}
.vl2-subtitle { color: var(--color-text-3); font-size: 14px; margin: 0; letter-spacing: 0.01em; }
.vl2-new-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #6E5AFF 0%, #8B77FF 100%);
  color: #fff; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px rgba(110, 90, 255, 0.30), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease;
  position: relative; z-index: 1;
  letter-spacing: -0.005em;
}
.vl2-new-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(110, 90, 255, 0.42), inset 0 1px 0 rgba(255,255,255,0.3);
}
.vl2-new-btn:active { transform: translateY(0); }

.vl2-toolbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg, #fff);
  padding: 10px 2px 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.admin-app[data-theme="dark"] .vl2-toolbar { background: var(--color-bg, #0A0A0D); }

.vl2-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 2px 4px 2px 44px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.vl2-search:focus-within {
  border-color: rgba(139, 119, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(139, 119, 255, 0.10);
  background: var(--color-surface-2, #fff);
}
.vl2-search > i.fa-search {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-3); font-size: 13px;
  pointer-events: none;
}
.vl2-search input {
  flex: 1; border: 0; outline: 0;
  background: transparent;
  padding: 13px 10px;
  font-size: 14.5px; font-family: inherit;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.vl2-search input::placeholder { color: var(--color-text-3); opacity: 1; }
.vl2-search-clear {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; color: var(--color-text-3);
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, color 150ms ease;
  font-family: inherit;
}
.vl2-search-clear:hover { background: var(--color-surface-2); color: var(--color-text); }

.vl2-filter-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 10px;
}
.vl2-filter-spacer { flex: 1; min-width: 8px; }
.vl2-fpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px; border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-2);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
  letter-spacing: -0.005em;
}
.vl2-fpill:hover {
  border-color: rgba(139, 119, 255, 0.30);
  background: rgba(139, 119, 255, 0.06);
  color: var(--color-text);
}
.vl2-fpill.active {
  background: linear-gradient(135deg, rgba(110, 90, 255, 0.16), rgba(139, 119, 255, 0.10));
  border-color: rgba(139, 119, 255, 0.42);
  color: #6E5AFF; font-weight: 600;
  box-shadow: 0 2px 8px rgba(110, 90, 255, 0.14);
}
.admin-app[data-theme="dark"] .vl2-fpill.active { color: #B8ABFF; }
.vl2-fpill-count {
  font-size: 10.5px; opacity: 0.7;
  font-family: var(--font-mono, monospace);
  padding: 1px 6px; border-radius: 6px;
  background: rgba(139, 119, 255, 0.10);
}

.vl2-fselect {
  padding: 7px 10px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font-size: 12.5px; font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.vl2-fselect:hover { border-color: rgba(139, 119, 255, 0.30); }
.admin-app[data-theme="dark"] .vl2-fselect { color-scheme: dark; }

.vl2-clear {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  background: transparent; color: #DC2626;
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
}
.vl2-clear:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.40);
}

.vl2-upload { transition: opacity 200ms ease, transform 200ms ease; }
.vl2-upload.open { animation: vl2-slide 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes vl2-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page layout */
.vl-page { padding: var(--space-2) 0; }
.vl-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}
.vl-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Upload card overrides (card-glass provides the glass background) */
.vl-upload-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Step structure */
.vl-step {}
.vl-step-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.vl-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(91, 94, 244, 0.35);
}
.vl-step-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

/* Style pills (upload form) */
.vl-pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  flex: 1;
}
.vl-pill {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.vl-pill:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  border-color: var(--color-border-stronger);
}
.vl-pill.active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(91, 94, 244, 0.35);
}
.vl-pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* Upload per-platform zones */
.vl-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) { .vl-upload-grid { grid-template-columns: 1fr; } }
.vl-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  text-align: center;
}
.vl-upload-zone:hover:not(.vl-disabled):not(.vl-zone-done) {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.vl-upload-zone.drag-over {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  transform: scale(1.02);
}
.vl-upload-zone.vl-zone-done {
  border-color: var(--color-success);
  border-style: solid;
  background: rgba(16, 185, 129, 0.06);
  cursor: default;
}
.vl-upload-zone.vl-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.vl-zone-icon { color: var(--color-brand); }
.vl-zone-icon svg { width: 36px; height: 36px; }
.vl-zone-label { font-weight: var(--weight-bold); font-size: var(--text-base); }
.vl-zone-dim { font-size: 11px; color: var(--color-text-4); font-family: var(--font-mono); }
.vl-zone-hint { font-size: var(--text-sm); color: var(--color-text-3); margin-top: var(--space-1); }
.vl-zone-progress { width: 100%; margin-top: var(--space-2); }
.vl-zone-pct { font-size: 12px; color: var(--color-text-3); margin-top: 4px; display: block; }
.vl-zone-done-label { color: var(--color-success); font-weight: var(--weight-semibold); font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; }
.vl-upload-note { text-align: center; font-size: 12px; color: var(--color-text-4); margin-top: var(--space-2); }

/* Platform video cards in video detail */
.vl-platform-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.vl-pv-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--color-surface);
}
.vl-pv-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.vl-pv-icon { color: var(--color-brand); display: flex; align-items: center; }
.vl-pv-icon svg { width: 24px; height: 24px; }
.vl-pv-info { display: flex; flex-direction: column; }
.vl-pv-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.vl-pv-dim { font-size: 11px; color: var(--color-text-4); font-family: var(--font-mono); }
.vl-pv-btns { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Share buttons row */
.vl-share-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.vl-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  position: relative;
}
.vl-share-btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-soft);
}
.vl-share-btn-page {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.vl-share-btn-page:hover {
  background: var(--color-brand);
  color: #fff;
}
.vl-copied-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-success);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 700;
  animation: vl-pop 0.2s ease;
}
.vl-video-id {
  margin-left: auto;
  font-size: 10px;
  color: var(--color-text-4);
  font-family: var(--font-mono);
  user-select: all;
}
@keyframes vl-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Toast notification */
.vl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-success);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 9999;
  animation: vl-toast-in 0.3s ease;
}
@keyframes vl-toast-in {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Drop zone disabled override */
.drop-zone.vl-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Progress bar (upload) */
.vl-progress-wrap { padding: var(--space-4) 0; }
.vl-progress-track {
  width: 100%;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.vl-progress-bar {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(91, 94, 244, 0.5);
}
.vl-progress-label {
  text-align: center;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Filter bar */
.vl-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.vl-filter-pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.vl-filter-pill {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  font-family: var(--font-sans);
}
.vl-filter-pill:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text); }
.vl-filter-pill.active {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(91, 94, 244, 0.35);
}
.vl-pill-count {
  font-size: 10px;
  opacity: 0.7;
  font-family: var(--font-mono);
}

/* Empty state */
.vl-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.vl-empty-state i {
  font-size: 48px;
  color: var(--color-text-4);
  margin-bottom: var(--space-4);
  display: block;
}
.vl-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-2);
  margin-bottom: var(--space-1);
}
.vl-empty-sub {
  font-size: var(--text-sm);
  color: var(--color-text-3);
}

/* Project groups */
.vl-project-group { margin-bottom: var(--space-6); }
.vl-project-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.vl-project-title i { color: var(--color-brand); }

/* Video card (uses .card .card-interactive from design system) */
.vl-video-card {
  margin-bottom: var(--space-3);
}
.vl-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.vl-card-meta { flex: 1; min-width: 0; }
.vl-card-name {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--space-1);
}
.vl-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.vl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.vl-card-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}
.vl-btn-danger:hover { color: var(--color-danger) !important; }

/* Edit row */
.vl-edit-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

/* Format list */
.vl-format-list { margin-bottom: var(--space-3); }
.vl-fmt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  gap: var(--space-2);
  transition: background var(--duration-fast) var(--ease);
}
.vl-fmt:hover { background: rgba(255, 255, 255, 0.02); }
.vl-fmt-original {
  background: var(--color-brand-soft);
  border: 1px solid rgba(91, 94, 244, 0.15);
  margin-bottom: var(--space-1);
}
.vl-fmt-label {
  color: var(--color-text-2);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vl-fmt-dim { font-size: 10px; color: var(--color-text-4); }
.vl-fmt-btns { display: flex; gap: var(--space-1); }

/* Player */
.vl-player { padding: var(--space-3) 0; }
.vl-player video {
  width: 100%;
  max-height: 400px;
  border-radius: var(--radius-lg);
  background: #000;
}

/* Resize section */
.vl-resize {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}
.vl-resize-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-2);
}
.vl-resize-header i { color: var(--color-brand); margin-right: var(--space-2); }

/* ==========================================================================
 * Campaign ID card — premium input block shown at Setup step. Consistent
 * with the rest of the dark / purple-accent aesthetic. Supports light + dark.
 * ========================================================================== */
.camp-id-card {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(139, 119, 255, 0.05) 0%, rgba(139, 119, 255, 0.02) 100%);
  border: 1px solid rgba(139, 119, 255, 0.18);
  backdrop-filter: blur(10px);
  min-width: 460px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.camp-id-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #A78BFA, #8B77FF);
  opacity: 0.6;
}
.camp-id-card:focus-within {
  border-color: rgba(139, 119, 255, 0.45);
  background: linear-gradient(135deg, rgba(139, 119, 255, 0.10) 0%, rgba(139, 119, 255, 0.04) 100%);
  box-shadow: 0 0 0 3px rgba(139, 119, 255, 0.08);
}
.camp-id-card[data-filled="0"] {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.04) 0%, rgba(245, 158, 11, 0.01) 100%);
}
.camp-id-card[data-filled="0"]::before {
  background: linear-gradient(180deg, #FBBF24, #F59E0B);
}
.camp-id-card[data-filled="0"]:focus-within {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
}

.camp-id-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #A78BFA;
  background: rgba(139, 119, 255, 0.12);
  flex-shrink: 0;
}
.camp-id-card[data-filled="0"] .camp-id-icon {
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
}

.camp-id-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 220px;
}
.camp-id-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A78BFA;
  line-height: 1;
}
.camp-id-card[data-filled="0"] .camp-id-label {
  color: #F59E0B;
}
.camp-id-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text-1, #0F172A);
  font-size: 14px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  padding: 0;
  letter-spacing: -0.01em;
  width: 100%;
}
.camp-id-input::placeholder {
  color: var(--color-text-4, #9CA3AF);
  font-weight: 500;
  opacity: 0.6;
}

.camp-id-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.camp-id-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.camp-id-btn:hover { transform: translateY(-1px); }
.camp-id-btn:active { transform: translateY(0); }

.camp-id-btn-ghost {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(139, 119, 255, 0.08);
  color: #A78BFA;
  font-size: 12px;
}
.camp-id-btn-ghost:hover {
  background: rgba(139, 119, 255, 0.16);
}

.camp-id-btn-suggest {
  padding: 7px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8B77FF 0%, #A78BFA 100%);
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(139, 119, 255, 0.25);
}
.camp-id-btn-suggest:hover {
  box-shadow: 0 4px 14px rgba(139, 119, 255, 0.35);
}

.camp-id-hint {
  margin-top: 8px;
  font-size: 11px;
  color: #B45309;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}
.camp-id-hint i { font-size: 11px; opacity: 0.8; }

/* Dark mode */
.admin-app[data-theme="dark"] .camp-id-card {
  background: linear-gradient(135deg, rgba(139, 119, 255, 0.08) 0%, rgba(139, 119, 255, 0.02) 100%);
  border-color: rgba(139, 119, 255, 0.25);
}
.admin-app[data-theme="dark"] .camp-id-card[data-filled="0"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.01) 100%);
  border-color: rgba(245, 158, 11, 0.32);
}
.admin-app[data-theme="dark"] .camp-id-card:focus-within {
  background: linear-gradient(135deg, rgba(139, 119, 255, 0.14) 0%, rgba(139, 119, 255, 0.05) 100%);
  box-shadow: 0 0 0 3px rgba(139, 119, 255, 0.12);
}
.admin-app[data-theme="dark"] .camp-id-input { color: #E4E4E7; }
.admin-app[data-theme="dark"] .camp-id-input::placeholder { color: #6B7280; }
.admin-app[data-theme="dark"] .camp-id-icon {
  background: rgba(139, 119, 255, 0.15);
}
.admin-app[data-theme="dark"] .camp-id-card[data-filled="0"] .camp-id-icon {
  background: rgba(245, 158, 11, 0.15);
}
.admin-app[data-theme="dark"] .camp-id-hint { color: #FCD34D; }
.admin-app[data-theme="dark"] .camp-id-btn-ghost {
  background: rgba(139, 119, 255, 0.12);
}
.admin-app[data-theme="dark"] .camp-id-btn-ghost:hover {
  background: rgba(139, 119, 255, 0.22);
}

/* =============================================================================
   Sidebar — phase2 injection contrast (Workspace + Balance)

   WorkspaceSwitcher.js and BalancePanel.js use inline `color: "inherit"`
   (which resolves to var(--sb-text) = #8A8A95) plus inline opacity values
   (0.55 on the "WORKSPACE" / "BALANCE" labels, 0.7 on body rows). The two
   stack and the result is nearly unreadable on the dark sidebar. The fix is
   strictly scoped to [data-phase2-ws-injected] / [data-phase2-balance-injected]
   so the main page (cards, forms, modals) is unaffected.
   ============================================================================= */

/* Base text token for both injected hosts */
[data-phase2-ws-injected],
[data-phase2-balance-injected] {
  color: var(--sb-text-hi);
}

/* Section labels — components hardcode opacity:0.55 inline; override */
[data-phase2-ws-injected] div[style*="uppercase"],
[data-phase2-balance-injected] div[style*="uppercase"] {
  opacity: 0.9 !important;
  color: var(--sb-text-hi) !important;
}

/* Body rows ("No budget set · spent $...", "Budget", "Spent", footers) */
[data-phase2-balance-injected] [style*="opacity: 0.7"],
[data-phase2-balance-injected] [style*="opacity:0.7"],
[data-phase2-balance-injected] [style*="opacity: 0.65"],
[data-phase2-balance-injected] [style*="opacity:0.65"] {
  opacity: 0.92 !important;
  color: var(--sb-text-hi) !important;
}

/* Workspace dropdown */
[data-phase2-ws-injected] select {
  color: var(--sb-text-hi) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-phase2-ws-injected] select:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
[data-phase2-ws-injected] select option {
  background: var(--sb-bg2, #101014) !important;
  color: var(--sb-text-hi) !important;
}

/* Inputs (budget number, new-workspace name, color picker) */
[data-phase2-ws-injected] input[type="text"],
[data-phase2-ws-injected] input[type="number"],
[data-phase2-balance-injected] input[type="text"],
[data-phase2-balance-injected] input[type="number"] {
  color: var(--sb-text-hi) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
[data-phase2-ws-injected] input::placeholder,
[data-phase2-balance-injected] input::placeholder {
  color: var(--sb-text, #8A8A95) !important;
  opacity: 0.7;
}

/* Outline buttons (+ Set budget, Edit, Cancel) — text + border were "inherit"
   from the dim sidebar token. Force the high-contrast token + a slightly
   stronger border so the affordance is visible. */
[data-phase2-ws-injected] button[style*="background: none"],
[data-phase2-balance-injected] button[style*="background: none"] {
  color: var(--sb-text-hi) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  opacity: 1 !important;
}
[data-phase2-ws-injected] button[style*="background: none"]:hover,
[data-phase2-balance-injected] button[style*="background: none"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Primary buttons (Save, Create) keep their purple fill — only ensure the
   white text contrast stays explicit and not inherited. */
[data-phase2-ws-injected] button[style*="background: rgb(108"],
[data-phase2-ws-injected] button[style*="background:#6c5ce7"],
[data-phase2-balance-injected] button[style*="background: rgb(108"],
[data-phase2-balance-injected] button[style*="background:#6c5ce7"] {
  color: #ffffff !important;
}

/* "Loading balance…" placeholder text — also too dim */
[data-phase2-balance-injected] [style*="rgba(255, 255, 255, 0.45)"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* -----------------------------------------------------------------------------
   BalancePanel narrow-sidebar layout
   The inline JSX renders rows with `display:flex; justify-content:space-between`.
   In a narrow sidebar the children compress, the value can wrap into the
   label cell, and "Budget$1" / "0.0%Rema..." renders glued. Convert each
   space-between row to a stable 2-column grid: label takes flexible width
   with ellipsis truncation; value sticks to the right.
   ----------------------------------------------------------------------------- */
[data-phase2-balance-injected] [style*="space-between"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}
[data-phase2-balance-injected] [style*="space-between"] > * {
  min-width: 0;
}
[data-phase2-balance-injected] [style*="space-between"] > :first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-phase2-balance-injected] [style*="space-between"] > :last-child {
  text-align: right;
  white-space: nowrap;
}