@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   VIBEFORGE DESIGN SYSTEM
   Style: Vibrant & Block-based, Dark Mode
   Colors: Cinema dark + play red
   Typography: Fira Code / Fira Sans
   ═══════════════════════════════════════════ */

:root {
  --bg-primary: #000000;
  --bg-secondary: #0F0F23;
  --bg-tertiary: #1E1B4B;
  --bg-card: #0a0a1a;
  --bg-card-hover: #12122a;
  --bg-input: #0d0d20;

  --accent: #E11D48;
  --accent-hover: #F43F5E;
  --accent-glow: rgba(225, 29, 72, 0.3);
  --accent-soft: rgba(225, 29, 72, 0.1);

  --purple: #8B5CF6;
  --purple-glow: rgba(139, 92, 246, 0.3);
  --cyan: #06B6D4;
  --emerald: #10B981;
  --amber: #F59E0B;

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-accent: #E11D48;

  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(225, 29, 72, 0.3);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px var(--accent-glow);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  --font-display: 'Fira Code', monospace;
  --font-body: 'Fira Sans', sans-serif;
}

/* ═══ LIGHT MODE ═══ */
[data-theme="light"] {
  --bg-primary: #F8F9FB;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-input: #F1F5F9;

  --accent: #DC2626;
  --accent-hover: #EF4444;
  --accent-glow: rgba(220, 38, 38, 0.15);
  --accent-soft: rgba(220, 38, 38, 0.08);

  --purple: #7C3AED;
  --purple-glow: rgba(124, 58, 237, 0.15);
  --cyan: #0891B2;
  --emerald: #059669;
  --amber: #D97706;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-accent: #DC2626;

  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);
  --border-accent: rgba(220, 38, 38, 0.2);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px var(--accent-glow);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 300ms ease, color 300ms ease;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ═══ APP LAYOUT ═══ */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ═══ TITLE BAR ═══ */
.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 12px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
  user-select: none;
  flex-shrink: 0;
  /* Sit ABOVE the activation modal (z-index 9999) so the user can always
     drag, minimize, or close the window even when the license gate is
     blocking the rest of the UI (Requirement 7.1). */
  position: relative;
  z-index: 10000;
}

.titlebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.titlebar-logo {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titlebar-logo svg { width: 26px; height: 26px; }

.titlebar-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.titlebar-controls {
  display: flex;
  gap: 2px;
  -webkit-app-region: no-drag;
}

.titlebar-btn {
  width: 36px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.titlebar-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.titlebar-btn.close:hover { background: var(--accent); color: white; }
.titlebar-btn svg { width: 14px; height: 14px; }

/* ═══ GATEWAY STATUS ═══ */
.gateway-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  -webkit-app-region: no-drag;
}

.gateway-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background var(--transition-normal);
}
.gateway-dot.online { background: var(--emerald); box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.gateway-dot.offline { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* ═══ MAIN CONTENT ═══ */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ═══ SIDEBAR NAV ═══ */
.sidebar {
  width: 220px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 12px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: height var(--transition-normal);
}

.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-color: var(--border-accent);
}
.nav-item.active::before { height: 60%; }
.nav-item.active .nav-icon { color: var(--accent); }

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

/* ═══ CONTENT AREA ═══ */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  background: var(--bg-primary);
}

.page { display: none; animation: fadeIn 0.3s ease; }
.page.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  margin-bottom: 28px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Rich page header: icon badge + title/subtitle (Soft UI Evolution). */
.page-header--rich {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-header--rich .page-title { margin-bottom: 4px; }
.page-header-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ═══ CARDS ═══ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition-normal);
}
.card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ═══ STAT CARDS ═══ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;
}
.stat-card:nth-child(1)::after { background: var(--accent); }
.stat-card:nth-child(2)::after { background: var(--purple); }
.stat-card:nth-child(3)::after { background: var(--cyan); }
.stat-card:nth-child(4)::after { background: var(--emerald); }

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
}

.stat-value.accent { color: var(--accent); }
.stat-value.purple { color: var(--purple); }
.stat-value.cyan { color: var(--cyan); }
.stat-value.emerald { color: var(--emerald); }

/* ═══ FORMS ═══ */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  transition: all var(--transition-fast);
  outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ═══ BUTTONS ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #be123c);
  color: white;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--border-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }

.btn-danger-soft {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger-soft:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.btn-accent-soft {
  background: rgba(225, 29, 72, 0.08);
  color: var(--accent);
  border: 1px solid rgba(225, 29, 72, 0.2);
}
.btn-accent-soft:hover:not(:disabled) {
  background: rgba(225, 29, 72, 0.16);
  border-color: rgba(225, 29, 72, 0.35);
  color: var(--accent-hover);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn svg { width: 16px; height: 16px; }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* ═══ STYLE PRESETS (Char Gen) ═══ */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.preset-card {
  padding: 16px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}
.preset-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.preset-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-glow);
}

.preset-icon {
  font-size: 32px;
  margin-bottom: 8px;
  line-height: 1;
}

.preset-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.preset-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══ IMAGE GALLERY (Gen Results) ═══ */
.gen-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.gen-result-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: all var(--transition-normal);
}
.gen-result-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.gen-result-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: var(--bg-secondary);
}

.gen-result-actions {
  padding: 12px;
  display: flex;
  gap: 8px;
}

/* ═══ LOADING / SPINNER ═══ */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.generating-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  text-align: center;
}

.generating-pulse {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ═══ EMPTY STATE ═══ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state svg {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.empty-state h3 {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-align: center;
}

.empty-state p {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

/* ═══ TAGS / BADGES ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-purple { background: rgba(139,92,246,0.1); color: var(--purple); }
.badge-cyan { background: rgba(6,182,212,0.1); color: var(--cyan); }
.badge-emerald { background: rgba(16,185,129,0.1); color: var(--emerald); }

/* ═══ TWO COLUMN LAYOUT ═══ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.two-col-wide {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}

/* ═══ CHARACTER CARD ═══ */
.char-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.char-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.char-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--bg-secondary);
}

.char-card-info {
  padding: 14px;
}

.char-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.char-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* ═══ SECTION DIVIDER ═══ */
.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col, .two-col-wide { grid-template-columns: 1fr; }
}

/* ═══ PROGRESS BAR ═══ */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ═══ JOB CARD ═══ */
.job-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--bg-card);
  transition: border-color var(--transition-normal);
}

.job-card.processing { border-color: var(--purple); }
.job-card.completed { border-color: var(--emerald); }
.job-card.failed { border-color: var(--accent); }

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.job-title {
  font-size: 13px;
  font-weight: 600;
}

.job-step {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══ TREND CARD ═══ */
.trend-item {
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.trend-item:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

/* ═══ SCRIPT RESULT ═══ */
.script-result {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
  border: 1px solid var(--border);
}
.script-result .hook {
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
  margin-bottom: 8px;
}

/* ═══ SCHEDULE ENTRY ═══ */
.schedule-entry {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.schedule-entry.running { border-left: 3px solid var(--emerald); }
.schedule-entry.scheduled { border-left: 3px solid var(--purple); }
.schedule-entry.completed { border-left: 3px solid var(--text-muted); }
.schedule-entry.cancelled { opacity: 0.5; }

/* ═══ ACCOUNT TABLE ═══ */
#accountTable > div > div:nth-child(n+6):hover {
  background: rgba(255,255,255,0.02);
}

/* ═══ TRACER LOGS ═══ */
#tracerLogs > div {
  transition: background var(--transition-fast);
}
#tracerLogs > div:hover {
  background: rgba(255,255,255,0.03);
}

/* ═══ API MAP ITEMS ═══ */
#apiMapContainer > div {
  transition: background var(--transition-fast);
}
#apiMapContainer > div:hover {
  background: rgba(139, 92, 246, 0.05);
}

/* ═══ CODE INLINE ═══ */
code {
  font-family: var(--font-display);
  font-size: 12px;
}

/* ═══ PROVIDER TABS ═══ */
.provider-tab {
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
}
.provider-tab:hover {
  background: rgba(255,255,255,0.03) !important;
}

/* ═══ CREATE PAGE — STEPPER ═══ */
.create-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
  padding: 0 40px;
}
.step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  transition: all 300ms;
}
.step-indicator.active { color: var(--accent); }
.step-indicator.done { color: var(--emerald); }
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  color: var(--text-muted);
  transition: all 300ms;
}
.step-indicator.active .step-dot {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}
.step-indicator.done .step-dot {
  border-color: var(--emerald);
  background: rgba(16,185,129,0.15);
  color: var(--emerald);
}
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 12px;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  transition: all 300ms;
}
.step-line.done {
  background: var(--emerald);
}

/* ═══ CREATE PAGE — UPLOAD CARDS ═══ */
.upload-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 250ms ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.upload-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}
.upload-card:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
}
.upload-card.selected {
  border-color: var(--emerald);
  box-shadow: 0 0 20px rgba(16,185,129,0.15), inset 0 0 20px rgba(16,185,129,0.03);
}
.upload-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-family: var(--font-display);
}
.upload-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.upload-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}
.upload-card-icon svg { width: 20px; height: 20px; }
.upload-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.upload-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}
.upload-card-formats {
  font-size: 9px;
  color: var(--text-muted);
  opacity: 0.5;
  font-family: var(--font-display);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* ═══ CREATE PAGE — ACTION BAR ═══ */
.create-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-create {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  color: white;
  background: linear-gradient(135deg, var(--accent), #dc2626);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 250ms ease;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}
.btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  filter: brightness(1.1);
}
.btn-create:active {
  transform: translateY(0);
}
.btn-create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══ MODAL ═══ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  animation: fadeIn 150ms ease;
}
.modal-overlay.open {
  display: flex;
}
.modal-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 540px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: modalSlideIn 200ms ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 150ms;
}
.modal-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 150ms;
  font-family: var(--font-body);
}
.modal-tab:hover {
  color: var(--text-secondary);
}
.modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ═══ LIGHT MODE — ELEMENT OVERRIDES ═══ */
[data-theme="light"] .titlebar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .titlebar-name { color: #0F172A; }
[data-theme="light"] .titlebar-logo svg path:last-child { fill: #0F172A; }
[data-theme="light"] .titlebar-btn { color: #475569; }
[data-theme="light"] .titlebar-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .titlebar-btn.close:hover { background: #DC2626; color: #fff; }

[data-theme="light"] .sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--border);
}
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-theme="light"] .sidebar-section { color: #94A3B8; }

[data-theme="light"] .content { background: var(--bg-primary); }

[data-theme="light"] .card {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
[data-theme="light"] .card:hover {
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .stat-card {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .btn-secondary {
  background: #F1F5F9;
  border-color: var(--border);
  color: #334155;
}
[data-theme="light"] .btn-secondary:hover {
  background: #E2E8F0;
}

[data-theme="light"] .btn-ghost { color: #475569; }
[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.05); }

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-theme="light"] .upload-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .upload-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .upload-card.selected {
  border-color: var(--emerald);
  box-shadow: 0 0 12px rgba(5,150,105,0.12);
}

[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
}
[data-theme="light"] .modal-container {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
}

[data-theme="light"] .gateway-dot.online { background: var(--emerald); }
[data-theme="light"] .gateway-dot.offline { background: #CBD5E1; }

[data-theme="light"] .empty-state svg { opacity: 0.2; }

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 150ms;
  margin-right: 4px;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0,0,0,0.06);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }

/* ═══ TOAST NOTIFICATIONS ═══ */
#toastContainer {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(100%) scale(0.95);
  transition: none;
  min-width: 300px;
}
.toast.show {
  animation: toastIn 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.hide {
  animation: toastOut 250ms ease forwards;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(80px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(80px) scale(0.9); }
}

/* Toast icon */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Toast body */
.toast-body { flex: 1; min-width: 0; }
.toast-message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
}

/* Toast close */
.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
  transition: all 120ms;
  margin-top: -2px;
}
.toast-close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.04);
}
.toast-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: toastShrink linear forwards;
  border-radius: 0 3px 3px 0;
}
@keyframes toastShrink {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Type colors */
.toast-success .toast-icon { color: var(--emerald); }
.toast-success .toast-progress-bar { background: var(--emerald); }
.toast-success { border-left: 3px solid var(--emerald); }

.toast-error .toast-icon { color: var(--accent); }
.toast-error .toast-progress-bar { background: var(--accent); }
.toast-error { border-left: 3px solid var(--accent); }

.toast-warning .toast-icon { color: var(--amber); }
.toast-warning .toast-progress-bar { background: var(--amber); }
.toast-warning { border-left: 3px solid var(--amber); }

.toast-info .toast-icon { color: var(--cyan); }
.toast-info .toast-progress-bar { background: var(--cyan); }
.toast-info { border-left: 3px solid var(--cyan); }

/* Light mode */
[data-theme="light"] .toast {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .toast-close:hover {
  background: rgba(0,0,0,0.06);
}
[data-theme="light"] .toast-progress {
  background: rgba(0,0,0,0.04);
}


/* ════════════════════════════════════════════════════════════════
   CREATE PAGE — PREMIUM GENERATION PANEL
   Style: Dark OLED + Glassmorphism + Sticky Action Bar
   Pattern: Form fields ≤ 3 visible, micro-interactions, no <select>
   ════════════════════════════════════════════════════════════════ */

.gen-panel {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(225, 29, 72, 0.06), transparent 50%),
    radial-gradient(120% 100% at 100% 100%, rgba(139, 92, 246, 0.05), transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 80px; /* leave room for floating action bar */
  transition: border-color 250ms ease, background 250ms ease;
}
.gen-panel:hover { border-color: var(--border-hover); }

.gen-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.gen-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

.gen-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.gen-section-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* — Field shell — */
.gen-field { position: relative; }

.gen-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gen-field-label svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* — Picker (replaces ugly native <select>) — */
.gen-picker {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
  text-align: left;
  outline: none;
  position: relative;
}
.gen-picker:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.gen-picker:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.gen-picker.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gen-picker-leading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gen-picker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  box-shadow: 0 2px 6px var(--accent-glow);
  text-transform: uppercase;
}

.gen-picker-icon-folder {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan);
}

.gen-picker-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gen-picker-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-picker-meta {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
}

.gen-picker-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.gen-picker.is-open .gen-picker-chevron { transform: rotate(180deg); }

.gen-picker-action {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  transition: background 150ms ease;
}
.gen-picker:hover .gen-picker-action {
  background: rgba(225, 29, 72, 0.18);
}

/* — Popover (account list) — */
.gen-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  display: none;
  animation: popoverIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gen-popover.is-open { display: block; }

@keyframes popoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gen-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms ease;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.gen-popover-item:hover { background: rgba(255,255,255,0.04); }
.gen-popover-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.gen-popover-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  flex-shrink: 0;
  text-transform: uppercase;
}
.gen-popover-item.is-auto .gen-popover-avatar {
  background: linear-gradient(135deg, var(--accent), var(--purple));
}

.gen-popover-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gen-popover-title {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gen-popover-meta {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}

.gen-popover-carrot {
  font-size: 11px;
  color: var(--purple);
  font-weight: 600;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.gen-popover-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--border);
}

/* — Motion-style preset cards — */
.motion-style-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.motion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 200ms ease;
  font-family: var(--font-body);
  color: var(--text-primary);
  outline: none;
  overflow: hidden;
}
.motion-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.motion-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.motion-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.motion-card.selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
  box-shadow: 0 4px 20px var(--accent-glow);
}
.motion-card.selected::before { opacity: 1; }

.motion-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-display);
}

.motion-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  transition: background 200ms ease, color 200ms ease;
}
.motion-card:hover .motion-card-icon { color: var(--text-primary); }
.motion-card.selected .motion-card-icon {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 10px var(--accent-glow);
}

.motion-card-body { width: 100%; }
.motion-card-body h4 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--text-primary);
}
.motion-card-body p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.custom-prompt-wrap {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  opacity: 0;
  transition:
    max-height 250ms cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 250ms ease,
    opacity 200ms ease;
}
.custom-prompt-wrap.is-open {
  max-height: 200px;
  margin-top: 10px;
  opacity: 1;
}
.custom-prompt-wrap > textarea {
  min-height: 70px;
  resize: vertical;
}

/* — Floating action bar — */
.gen-action-bar {
  position: sticky;
  bottom: -32px; /* sit flush against the content padding bottom */
  left: 0;
  right: 0;
  margin: -56px -32px 0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background:
    linear-gradient(0deg, var(--bg-primary) 60%, transparent 100%);
  z-index: 20;
  pointer-events: none;
}
.gen-action-bar > * { pointer-events: auto; }

.gen-action-bar-readiness {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.gen-action-bar-readiness svg {
  width: 14px;
  height: 14px;
  color: var(--amber);
}
.gen-action-bar-readiness.is-ready { color: var(--emerald); }
.gen-action-bar-readiness.is-ready svg { color: var(--emerald); }

.gen-action-bar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
.btn-soft:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.btn-soft:active { transform: translateY(1px); }

/* Upgrade existing .btn-create with cost pill + accessible disabled state */
.btn-create {
  position: relative;
  isolation: isolate;
}
.btn-create::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.btn-create:hover::before { opacity: 1; }

.btn-create-cost {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 3px 8px;
  margin-left: 4px;
  background: rgba(255,255,255,0.16);
  border-radius: 999px;
  letter-spacing: 0.4px;
}

/* — Light-mode tuning per ui-ux-pro-max checklist (4.5:1 contrast) — */
[data-theme="light"] .gen-panel {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(220, 38, 38, 0.04), transparent 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(124, 58, 237, 0.04), transparent 55%),
    #FFFFFF;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .gen-picker { background: #F8FAFC; }
[data-theme="light"] .gen-picker:hover { background: #F1F5F9; }
[data-theme="light"] .gen-picker-meta { color: #64748B; }
[data-theme="light"] .motion-card { background: #F8FAFC; }
[data-theme="light"] .motion-card:hover { background: #F1F5F9; }
[data-theme="light"] .motion-card.selected {
  background: linear-gradient(135deg, var(--accent-soft), #FFFFFF);
}
[data-theme="light"] .motion-card-body p { color: #64748B; }
[data-theme="light"] .motion-card-icon { background: rgba(0,0,0,0.04); }
[data-theme="light"] .gen-popover {
  background: #FFFFFF;
  box-shadow: 0 16px 32px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.05);
}
[data-theme="light"] .gen-popover-item:hover { background: #F1F5F9; }
[data-theme="light"] .btn-soft {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #475569;
}
[data-theme="light"] .btn-soft:hover { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .gen-action-bar {
  background: linear-gradient(0deg, var(--bg-primary) 60%, transparent 100%);
}

/* — Reduced motion accessibility — */
@media (prefers-reduced-motion: reduce) {
  .gen-picker,
  .gen-picker-chevron,
  .motion-card,
  .motion-card::before,
  .motion-card-icon,
  .custom-prompt-wrap,
  .btn-create::before {
    transition: none !important;
    animation: none !important;
  }
}

/* — Responsive: collapse to single column on narrow widths — */
@media (max-width: 1100px) {
  .motion-style-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .gen-panel-grid { grid-template-columns: 1fr; }
  .motion-style-grid { grid-template-columns: repeat(2, 1fr); }
  .gen-action-bar { flex-direction: column; align-items: stretch; }
  .gen-action-bar-buttons { justify-content: flex-end; }
}


/* ═══ LANGUAGE TOGGLE ═══ */
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 8px;
  height: 28px;
  border-radius: var(--radius-sm);
  transition: all 150ms;
  margin-right: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  -webkit-app-region: no-drag;
}
.lang-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
[data-theme="light"] .lang-toggle:hover {
  background: rgba(0,0,0,0.06);
}

/* Settings page — language picker buttons */
.lang-pick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
}
.lang-pick-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.lang-pick-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lang-pick-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  flex-shrink: 0;
}
.deposit-qr-error {
  margin-top: 10px;
  font-size: 11px;
  color: #ef4444;
  text-align: center;
}

/* Light Mode Theme Overrides for PayOS Deposit Modal */
[data-theme="light"] .deposit-modal-overlay {
  background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .deposit-modal-container {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .deposit-title {
  color: #0F172A;
}

[data-theme="light"] .deposit-subtitle {
  color: #64748B;
}

[data-theme="light"] .deposit-close-btn {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #475569;
}

[data-theme="light"] .deposit-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

[data-theme="light"] .deposit-section-label {
  color: #64748B;
}

[data-theme="light"] .deposit-pkg-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

[data-theme="light"] .deposit-pkg-card:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

[data-theme="light"] .deposit-pkg-card.active {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
  border-color: #F59E0B;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.18);
}

[data-theme="light"] .deposit-pkg-price {
  color: #0F172A;
}

[data-theme="light"] .deposit-pkg-carrot-unit,
[data-theme="light"] .deposit-pkg-desc,
[data-theme="light"] .deposit-pkg-badge-norm {
  color: #64748B;
  background: #F1F5F9;
}

[data-theme="light"] .deposit-notice-card {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #D97706;
}

[data-theme="light"] .deposit-qr-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

[data-theme="light"] .deposit-info-row {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

[data-theme="light"] .deposit-info-row.memo-row {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .deposit-info-row.reward-row {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .deposit-info-label {
  color: #64748B;
}

[data-theme="light"] .deposit-info-val {
  color: #0F172A;
}

[data-theme="light"] .deposit-info-val.bank {
  color: #0284C7;
}

[data-theme="light"] .deposit-info-val.highlight {
  color: #D97706;
}

[data-theme="light"] .deposit-info-val.amount {
  color: #059669;
}

[data-theme="light"] .deposit-info-val.memo {
  color: #D97706;
}

[data-theme="light"] .deposit-copy-btn {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #334155;
}

[data-theme="light"] .deposit-copy-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}
.lang-pick-btn.is-active .lang-pick-flag {
  background: linear-gradient(135deg, var(--accent), var(--purple));
}
[data-theme="light"] .lang-pick-btn { background: #F8FAFC; }
[data-theme="light"] .lang-pick-btn:hover { background: #F1F5F9; }


/* ════════════════════════════════════════════════════════════════
   ACCOUNTS PAGE — CLEAN MINIMAL DESIGN
   Style: Dark OLED, data-dense, subtle accents
   ════════════════════════════════════════════════════════════════ */

/* — Compact Stats Strip — */
.acc-stats-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.acc-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex: 1;
  text-align: center;
}
.acc-stats-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.acc-stats-num.emerald { color: var(--emerald); }
.acc-stats-num.amber { color: #f59e0b; }
.acc-stats-num.blue { color: #3b82f6; }
.acc-stats-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  opacity: 0.85;
}
.acc-stats-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
  opacity: 0.6;
}

/* — Toolbar — */
.acc-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Search field */
.acc-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex: 1 1 200px;
  max-width: 320px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 34px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.acc-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.acc-search > svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.acc-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
}
.acc-search input::placeholder { color: var(--text-muted); }
.acc-search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: all 120ms;
}
.acc-search-clear:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* — Filter Tabs (clean underline style) — */
.acc-filter-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
}
.acc-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
  outline: none;
}
.acc-tab:hover {
  color: var(--text-primary);
}
.acc-tab:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
  border-radius: var(--radius-sm);
}
.acc-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.acc-tab-count {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text-muted);
  opacity: 0.7;
}
.acc-tab.is-active .acc-tab-count {
  color: var(--accent);
  opacity: 1;
}

/* Sort dropdown */
.acc-sort-wrap {
  position: relative;
  margin-left: auto;
}
.acc-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 150ms ease;
}
.acc-sort-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.acc-sort-btn.is-open {
  border-color: var(--accent);
  color: var(--text-primary);
}
.acc-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 180px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  display: none;
  animation: popoverIn 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-sort-menu.is-open { display: block; }
.acc-sort-item {
  width: 100%;
  display: block;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.acc-sort-item:hover { background: rgba(255,255,255,0.04); }
.acc-sort-item.is-active {
  color: var(--text-primary);
  font-weight: 600;
}

/* Bulk action bar */
.acc-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  animation: bulkbarIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.acc-bulkbar[hidden] { display: none; }
@keyframes bulkbarIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.acc-bulkbar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.acc-bulkbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}
.acc-bulkbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.acc-bulkbar-actions .btn-soft {
  padding: 7px 11px;
  font-size: 11.5px;
  background: transparent;
  border-color: transparent;
}
.acc-bulkbar-actions .btn-soft:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}
.btn-soft-danger { color: var(--accent); }
.btn-soft-danger:hover {
  background: var(--accent-soft) !important;
  border-color: var(--border-accent) !important;
  color: var(--accent);
}

/* — List card + grid — */
/* — Account List Card — */
.acc-list-card {
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.acc-list-card:hover {
  border-color: var(--border-hover);
}

.acc-list-header,
.acc-row {
  display: grid;
  grid-template-columns: 28px 1.6fr 90px 100px 90px 80px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
}
.acc-list-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 14px;
}
.acc-col-carrots, .acc-col-generated { text-align: right; }
.acc-col-status { text-align: center; }

.acc-list-body {
  max-height: calc(100vh - 430px);
  overflow-y: auto;
}

.acc-row {
  border-top: 1px solid var(--border);
  transition: background 120ms ease;
  position: relative;
  padding: 8px 14px;
}
.acc-row:first-child { border-top: none; }
.acc-row:hover { background: rgba(255,255,255,0.02); }
.acc-row.is-selected {
  background: rgba(255,255,255,0.025);
}
.acc-row.is-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.acc-row.is-syncing { background: rgba(6, 182, 212, 0.03); }

/* Checkbox */
.acc-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
}
.acc-checkbox-wrap input { position: absolute; opacity: 0; pointer-events: none; }
.acc-checkbox-box {
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border-hover);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
  background: transparent;
  position: relative;
}
.acc-checkbox-wrap:hover .acc-checkbox-box { border-color: var(--text-secondary); }
.acc-checkbox-wrap input:checked + .acc-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.acc-checkbox-wrap input:checked + .acc-checkbox-box::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.acc-checkbox-wrap input:indeterminate + .acc-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.acc-checkbox-wrap input:indeterminate + .acc-checkbox-box::after {
  content: '';
  width: 8px;
  height: 2px;
  background: white;
}

/* Username cell */
.acc-username-cell {
  min-width: 0;
}
.acc-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Carrots number — clean, no bar */
.acc-carrots-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}
.acc-carrots-num.low { color: var(--amber); }
.acc-carrots-num.empty { color: var(--text-muted); }

/* Status dot — minimal */
.acc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  justify-self: center;
}
.acc-status-dot.acc-status-active {
  background: var(--emerald);
  box-shadow: 0 0 4px rgba(16,185,129,0.4);
}
.acc-status-dot.acc-status-inactive {
  background: var(--text-muted);
  opacity: 0.4;
}
.acc-status-dot.acc-status-error {
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow);
}

/* Generated count */
.acc-generated-cell {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* Row actions */
.acc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms ease;
}
.acc-row:hover .acc-actions,
.acc-row:focus-within .acc-actions { opacity: 1; }
@media (hover: none) {
  .acc-actions { opacity: 1; }
}
.acc-icon-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.acc-icon-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.acc-icon-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.acc-icon-btn.danger:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.acc-icon-btn.is-spinning svg {
  animation: spin 0.8s linear infinite;
}

/* Footer */
.acc-list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-secondary);
}
.acc-list-footer .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  color: var(--text-muted) !important;
  transition: all 150ms ease;
}
.acc-list-footer .btn-ghost:hover {
  color: var(--accent) !important;
  background: var(--accent-soft);
  border-color: var(--border-accent);
}
.acc-list-footer .btn-ghost svg {
  flex-shrink: 0;
}

/* — Flex height fixes to prevent page scroll — */
#page-accounts.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 106px);
  overflow: hidden;
}
#page-accounts.active .acc-list-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#page-accounts.active .acc-list-body {
  flex: 1;
  max-height: none;
  overflow-y: auto;
}

/* — Light mode adjustments — */
[data-theme="light"] .acc-stats-strip { background: #FFFFFF; }
[data-theme="light"] .acc-search { background: #F8FAFC; }
[data-theme="light"] .acc-tab { color: #64748B; }
[data-theme="light"] .acc-tab.is-active { color: #0F172A; }
[data-theme="light"] .acc-sort-btn { color: #64748B; }
[data-theme="light"] .acc-sort-menu {
  background: #FFFFFF;
  box-shadow: 0 12px 24px rgba(15,23,42,0.1);
}
[data-theme="light"] .acc-sort-item:hover { background: #F1F5F9; }
[data-theme="light"] .acc-list-header { background: #F8FAFC; }
[data-theme="light"] .acc-list-card { background: #FFFFFF; }
[data-theme="light"] .acc-row:hover { background: #F8FAFC; }
[data-theme="light"] .acc-row.is-selected { background: rgba(0,0,0,0.02); }
[data-theme="light"] .acc-icon-btn:hover { background: #F1F5F9; }
[data-theme="light"] .acc-checkbox-box { border-color: #CBD5E1; }
[data-theme="light"] .acc-checkbox-wrap:hover .acc-checkbox-box { border-color: #94A3B8; }

/* — Responsive — */
@media (max-width: 900px) {
  .acc-list-header { display: none; }
  .acc-stats-strip { flex-wrap: wrap; gap: 8px; }
  .acc-stats-sep { display: none; }
  .acc-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      'check user actions'
      'check stats stats';
    row-gap: 4px;
    padding: 10px 14px;
  }
  .acc-checkbox-wrap { grid-area: check; }
  .acc-username-cell { grid-area: user; }
  .acc-actions       { grid-area: actions; opacity: 1; }
  .acc-carrots-num, .acc-status-dot, .acc-generated-cell {
    grid-area: stats;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .acc-tab, .acc-sort-btn, .acc-row, .acc-icon-btn, .acc-checkbox-box,
  .acc-bulkbar, .acc-sort-menu {
    transition: none !important;
    animation: none !important;
  }
  .acc-icon-btn.is-spinning svg { animation: none !important; }
}


/* Header sync-all button spinner */
.btn.is-spinning svg {
  animation: spin 0.8s linear infinite;
}


/* ════════════════════════════════════════════════════════════════
   DASHBOARD — PREMIUM OVERVIEW
   Pattern: Hero greeting + KPI cards + activity feed + health
   Style: Data-Dense Dashboard + OLED dark + glow accents
   ════════════════════════════════════════════════════════════════ */

/* — Hero — */
.dash-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
  padding: 28px 28px 24px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(225, 29, 72, 0.10), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(139, 92, 246, 0.08), transparent 55%),
    var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-wrap: wrap;
}
.dash-hero::after {
  /* subtle texture grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.dash-hero-content { position: relative; z-index: 1; min-width: 0; }
.dash-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-hero-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 14px;
  transition: all 250ms ease;
}
.dash-hero-pulse.is-busy {
  background: rgba(6,182,212,0.10);
  border-color: rgba(6,182,212,0.25);
  color: var(--cyan);
}
.dash-hero-pulse.is-idle {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-muted);
}
.dash-hero-pulse.is-error {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--accent);
}
.dash-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
}
.dash-pulse-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: dashPulseRing 1.6s ease-out infinite;
}
.dash-hero-pulse.is-idle .dash-pulse-dot::before { animation: none; opacity: 0; }
@keyframes dashPulseRing {
  0%   { transform: scale(0.6); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

.dash-hero-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  background: linear-gradient(90deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dash-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 560px;
}

/* Hero quick actions */
.dash-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}
.dash-quick-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.dash-quick-btn.primary {
  background: linear-gradient(135deg, var(--accent), #be123c);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.dash-quick-btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--accent-glow);
}
.dash-quick-btn.is-spinning svg { animation: spin 0.8s linear infinite; }

/* — KPI cards — */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  position: relative;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.kpi-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  flex-shrink: 0;
  border: 1px solid var(--border);
  transition: all 200ms ease;
}
.kpi-card:hover .kpi-icon {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.kpi-accent  .kpi-icon { color: var(--accent); }
.kpi-emerald .kpi-icon { color: var(--emerald); }
.kpi-purple  .kpi-icon { color: var(--purple); }
.kpi-cyan    .kpi-icon { color: var(--cyan); }

.kpi-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}

.kpi-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-body);
  margin-top: auto;
}

.kpi-trend {
  font-weight: 600;
}
.kpi-trend.up   { color: var(--emerald); }
.kpi-trend.down { color: var(--accent);  }
.kpi-trend-eta  { color: var(--cyan); }

.kpi-spark {
  display: inline-block;
  width: 64px;
  height: 18px;
}
.kpi-spark svg { width: 100%; height: 100%; }
.kpi-spark path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-spark .area {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: none;
}

.kpi-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.4px;
}
.kpi-pill-emerald { background: rgba(16,185,129,0.12); color: var(--emerald); }

/* Capacity bar */
.kpi-capacity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.kpi-capacity-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-display);
}
.kpi-capacity-bar {
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.kpi-capacity-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--purple), #c084fc);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* — Body two-column — */
.dash-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.dash-card-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.dash-card-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 150ms ease;
}
.dash-card-action:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Activity timeline */
.dash-timeline {
  padding: 6px 0;
  max-height: 320px;
  overflow-y: auto;
}
.dash-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.dash-timeline-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 18px;
  position: relative;
  transition: background 120ms ease;
}
.dash-timeline-row:hover { background: rgba(255,255,255,0.025); }

.dash-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.dash-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--border);
  margin-top: 4px;
  flex-shrink: 0;
}
.dash-timeline-dot.completed { background: var(--emerald); box-shadow: 0 0 0 1px var(--emerald), 0 0 8px rgba(16,185,129,0.4); }
.dash-timeline-dot.running   { background: var(--cyan);    box-shadow: 0 0 0 1px var(--cyan), 0 0 8px rgba(6,182,212,0.4); }
.dash-timeline-dot.queued    { background: var(--text-muted); }
.dash-timeline-dot.failed    { background: var(--accent);  box-shadow: 0 0 0 1px var(--accent), 0 0 8px var(--accent-glow); }
.dash-timeline-row:not(:last-child) .dash-timeline-rail::after {
  content: '';
  position: absolute;
  top: 18px;
  bottom: -8px;
  width: 1px;
  background: var(--border);
}

.dash-timeline-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-timeline-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-timeline-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-display);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-timeline-meta .sep { opacity: 0.5; }
.dash-timeline-status {
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dash-timeline-status.completed { color: var(--emerald); }
.dash-timeline-status.running   { color: var(--cyan); }
.dash-timeline-status.queued    { color: var(--text-muted); }
.dash-timeline-status.failed    { color: var(--accent); }

.dash-timeline-time {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-display);
  white-space: nowrap;
  margin-top: 2px;
}

/* Mini progress bar inside row (running) */
.dash-timeline-progress {
  margin-top: 4px;
  height: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.dash-timeline-progress-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #67e8f9);
  border-radius: 2px;
  transition: width 600ms ease;
}

/* — Health overview header — */
.dash-health-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.dash-health-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.025);
  border: 1px solid transparent;
  transition: all 150ms ease;
}
.dash-health-pill:hover { border-color: var(--border); background: rgba(255,255,255,0.04); }
.dash-health-pill-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-family: var(--font-display);
}
.dash-health-pill-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
}
.dash-health-pill.ok  .dash-health-pill-value  { color: var(--emerald); }
.dash-health-pill.warn .dash-health-pill-value { color: var(--amber); }
.dash-health-pill.err  .dash-health-pill-value { color: var(--accent); }

/* Account row */
.dash-account-list {
  padding: 4px 0 8px;
  max-height: 280px;
  overflow-y: auto;
}
.dash-account-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
  position: relative;
  transition: background 120ms ease;
}
.dash-account-row:hover { background: rgba(255,255,255,0.025); }

.dash-account-name-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.dash-account-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-account-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dash-account-status-dot.active { background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.5); }
.dash-account-status-dot.inactive { background: var(--text-muted); }
.dash-account-status-dot.error { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

.dash-account-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dash-account-bar-track {
  width: 64px;
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  overflow: hidden;
}
.dash-account-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), #c084fc);
  border-radius: 2px;
  transition: width 400ms ease;
}
.dash-account-bar.low .dash-account-bar-fill { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.dash-account-bar.empty .dash-account-bar-fill { background: var(--text-muted); }
.dash-account-carrots {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  min-width: 36px;
  text-align: right;
}
.dash-account-bar.low .dash-account-carrots   { color: var(--amber); }
.dash-account-bar.empty .dash-account-carrots { color: var(--text-muted); }

/* — Light mode — */
[data-theme="light"] .dash-hero {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(220, 38, 38, 0.06), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(124, 58, 237, 0.05), transparent 55%),
    #FFFFFF;
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .dash-hero::after {
  background-image:
    linear-gradient(rgba(15,23,42,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.025) 1px, transparent 1px);
}
[data-theme="light"] .dash-quick-btn { background: #F8FAFC; }
[data-theme="light"] .dash-quick-btn:hover { background: #F1F5F9; }
[data-theme="light"] .dash-quick-btn.primary {
  background: linear-gradient(135deg, var(--accent), #be123c);
  color: white;
}
[data-theme="light"] .dash-quick-btn.primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
}
[data-theme="light"] .kpi-card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
[data-theme="light"] .kpi-card:hover { box-shadow: var(--shadow-md); }
[data-theme="light"] .kpi-icon { background: rgba(15,23,42,0.04); }
[data-theme="light"] .kpi-spark path { stroke: var(--accent); }
[data-theme="light"] .dash-card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
[data-theme="light"] .dash-card-head { border-bottom-color: var(--border); }
[data-theme="light"] .dash-timeline-row:hover,
[data-theme="light"] .dash-account-row:hover { background: #F8FAFC; }
[data-theme="light"] .dash-timeline-dot { border-color: #FFFFFF; }
[data-theme="light"] .dash-card-action:hover { background: #F1F5F9; }
[data-theme="light"] .dash-health-pill { background: #F8FAFC; }
[data-theme="light"] .dash-health-pill:hover { background: #F1F5F9; }

/* — Responsive — */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .dash-hero { flex-direction: column; align-items: stretch; }
  .dash-health-overview { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-pulse-dot::before,
  .kpi-spark, .dash-quick-btn,
  .kpi-capacity-fill, .dash-account-bar-fill,
  .dash-timeline-progress-fill, .kpi-card {
    animation: none !important;
    transition: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   JOBS PAGE — PRODUCTION PIPELINE + BENTO GRID
   Pattern: Pipeline lanes hero strip + bento gallery
   Style: Dark OLED + glow accents + character image as poster
   ════════════════════════════════════════════════════════════════ */

/* — View toggle — */
.jobs-view-toggle {
  display: inline-flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.jobs-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.jobs-view-btn:hover { color: var(--text-primary); }
.jobs-view-btn.is-active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="light"] .jobs-view-toggle { background: #F1F5F9; }
[data-theme="light"] .jobs-view-btn.is-active { background: #FFFFFF; box-shadow: var(--shadow-sm); }

/* — Pipeline hero strip (3 lanes) — */
.jobs-pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.jobs-lane {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  overflow: hidden;
}
.jobs-lane::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.jobs-lane-queued::before    { background: linear-gradient(90deg, transparent, var(--text-muted), transparent); }
.jobs-lane-running::before   { background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: laneFlow 2s linear infinite; }
.jobs-lane-completed::before { background: linear-gradient(90deg, transparent, var(--emerald), transparent); }
@keyframes laneFlow {
  from { background-position: -200px 0; }
  to   { background-position: 200px 0; }
}

.jobs-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jobs-lane-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.jobs-lane-queued    .jobs-lane-title { color: var(--text-secondary); }
.jobs-lane-running   .jobs-lane-title { color: var(--cyan); }
.jobs-lane-completed .jobs-lane-title { color: var(--emerald); }
.jobs-lane-title-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
}
.jobs-lane-running .jobs-lane-title-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: dashPulseRing 1.6s ease-out infinite;
}
.jobs-lane-count {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

/* Lane body: track of mini cards + horizontal scroll */
.jobs-lane-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.jobs-lane-track::-webkit-scrollbar { height: 4px; }
.jobs-lane-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.jobs-lane-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  gap: 8px;
}
.jobs-lane-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: all 120ms ease;
  font-family: var(--font-body);
}
.jobs-lane-empty-cta:hover {
  background: var(--accent);
  color: white;
}

/* Mini cards in lane */
.lane-mini {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform 150ms ease, border-color 150ms ease;
}
.lane-mini:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}
.lane-mini img,
.lane-mini video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lane-mini-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lane-mini-progress {
  position: absolute;
  inset: 0;
  background: rgba(6, 182, 212, 0.08);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.lane-mini-progress::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
  transition: width 600ms ease;
}
.lane-mini-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  background: rgba(6,182,212,0.20);
}

/* — Filter chips — */
.jobs-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.jobs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.jobs-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.jobs-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--accent);
}
.jobs-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.jobs-chip-dot.running   { background: var(--cyan); }
.jobs-chip-dot.completed { background: var(--emerald); }
.jobs-chip-dot.failed    { background: var(--accent); }
.jobs-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
}
.jobs-chip.is-active .jobs-chip-count {
  background: rgba(225,29,72,0.18);
  color: var(--accent);
}
[data-theme="light"] .jobs-chip-count { background: #E2E8F0; color: #475569; }
[data-theme="light"] .jobs-chip.is-active .jobs-chip-count { background: rgba(220,38,38,0.12); color: var(--accent); }

/* — Bento grid — */
.jobs-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
}
.jobs-bento-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms ease,
    box-shadow 200ms ease;
  display: flex;
  flex-direction: column;
}
.jobs-bento-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* card poster background */
.jobs-bento-poster {
  position: absolute;
  inset: 0;
  background: var(--bg-input);
  overflow: hidden;
}
.jobs-bento-poster img,
.jobs-bento-poster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 250ms ease;
}
.jobs-bento-card:hover .jobs-bento-poster img,
.jobs-bento-card:hover .jobs-bento-poster video {
  transform: scale(1.04);
}
.jobs-bento-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85)),
    linear-gradient(90deg, rgba(0,0,0,0.40), transparent 35%);
  pointer-events: none;
}

.jobs-bento-poster-fallback {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(at 30% 30%, rgba(225,29,72,0.18), transparent 60%),
    radial-gradient(at 70% 70%, rgba(139,92,246,0.18), transparent 60%),
    var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* Top-left status badge (overlaid) */
.jobs-bento-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(15,23,42,0.55);
  color: white;
  z-index: 2;
}
.jobs-bento-badge.completed { background: rgba(16,185,129,0.85); color: white; }
.jobs-bento-badge.running   { background: rgba(6,182,212,0.85);   color: white; }
.jobs-bento-badge.failed    { background: rgba(225,29,72,0.85);   color: white; }
.jobs-bento-badge.queued    { background: rgba(15,23,42,0.65);    color: var(--text-secondary); }
.jobs-bento-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.jobs-bento-badge.running::before {
  animation: dashPulseRing 1.6s ease-out infinite, none;
}

/* Card body anchored bottom */
.jobs-bento-body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 14px;
  color: white;
}
.jobs-bento-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jobs-bento-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-display);
  color: rgba(255,255,255,0.78);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.jobs-bento-meta .sep { opacity: 0.5; }

/* Action overlay (hover or always for mobile) */
.jobs-bento-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
  opacity: 0;
  transition: opacity 150ms ease;
}
.jobs-bento-card:hover .jobs-bento-actions { opacity: 1; }
.jobs-bento-action {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}
.jobs-bento-action:hover {
  background: rgba(15,23,42,0.85);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}

/* Card sizing — completed jobs are 2x1 (wide hero), running is 2x2, others 1x1 */
.jobs-bento-card.size-2x1 { grid-column: span 2; }
.jobs-bento-card.size-2x2 { grid-column: span 2; grid-row: span 2; }

/* ── Running card: progress ring + ETA ── */
.jobs-bento-card.is-running {
  border-color: rgba(6,182,212,0.35);
}
.jobs-bento-card.is-running .jobs-bento-poster::after {
  background:
    linear-gradient(180deg, rgba(6,182,212,0.10) 0%, transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85)),
    linear-gradient(90deg, rgba(0,0,0,0.40), transparent 35%);
}

.jobs-bento-progress {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
}
.progress-ring {
  width: 56px;
  height: 56px;
  position: relative;
}
.progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.progress-ring circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.progress-ring .track {
  stroke: rgba(255,255,255,0.15);
}
.progress-ring .fill {
  stroke: var(--cyan);
  stroke-dasharray: 144.5;          /* 2 * pi * r where r=23 */
  stroke-dashoffset: 144.5;
  filter: drop-shadow(0 0 4px rgba(6,182,212,0.6));
  transition: stroke-dashoffset 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.progress-ring-text small {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.4px;
  opacity: 0.85;
  text-transform: uppercase;
}

/* Scanning bars (running animation overlay) */
.jobs-bento-card.is-running::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(6,182,212,0.10) 50%, transparent 100%);
  background-size: 100% 200px;
  background-repeat: no-repeat;
  background-position: 0 -200px;
  animation: scanLine 3s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
@keyframes scanLine {
  from { background-position: 0 -200px; }
  to   { background-position: 0 calc(100% + 200px); }
}

/* ── Failed card: red border + retry ── */
.jobs-bento-card.is-failed {
  border-color: rgba(225,29,72,0.35);
}
.jobs-bento-card.is-failed .jobs-bento-poster::after {
  background:
    linear-gradient(180deg, rgba(225,29,72,0.15) 0%, transparent 30%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.92)),
    linear-gradient(90deg, rgba(0,0,0,0.40), transparent 35%);
}
.jobs-bento-error {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  font-size: 11px;
  color: rgba(255, 220, 220, 0.95);
  background: rgba(225,29,72,0.20);
  border: 1px solid rgba(225,29,72,0.35);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

/* ── Queued card: minimal skeleton ── */
.jobs-bento-card.is-queued {
  background:
    repeating-linear-gradient(135deg,
      var(--bg-card) 0 12px,
      var(--bg-input) 12px 24px);
}
.jobs-bento-card.is-queued .jobs-bento-poster {
  background: transparent;
}

/* ── Completed card: play icon glint ── */
.jobs-bento-card.is-completed::before {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  z-index: 2;
  pointer-events: none;
  transition: all 200ms ease;
}
.jobs-bento-card.is-completed::after {
  content: '';
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='8 5 19 12 8 19'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  transition: transform 200ms ease;
}
.jobs-bento-card.is-completed:hover::before {
  background: rgba(255,255,255,0.35);
  transform: scale(1.1);
}
.jobs-bento-card.is-completed:hover::after {
  transform: scale(1.1);
}

/* ── List view fallback (legacy) ── */
.jobs-list-view .card {
  margin-bottom: 12px;
}

/* — Empty state for no jobs — */
.jobs-bento-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* — Light mode tuning — */
[data-theme="light"] .jobs-lane { background: #FFFFFF; box-shadow: var(--shadow-sm); }
[data-theme="light"] .jobs-bento-card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
[data-theme="light"] .jobs-bento-card:hover { box-shadow: var(--shadow-md); }
[data-theme="light"] .jobs-bento-card.is-queued {
  background: repeating-linear-gradient(135deg, #FFFFFF 0 12px, #F1F5F9 12px 24px);
}
[data-theme="light"] .lane-mini { background: #F8FAFC; }
[data-theme="light"] .jobs-bento-poster-fallback {
  background:
    radial-gradient(at 30% 30%, rgba(220,38,38,0.10), transparent 60%),
    radial-gradient(at 70% 70%, rgba(124,58,237,0.10), transparent 60%),
    #F8FAFC;
}

/* — Responsive — */
@media (max-width: 1100px) {
  .jobs-bento { grid-template-columns: repeat(3, 1fr); }
  .jobs-pipeline { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .jobs-bento { grid-template-columns: repeat(2, 1fr); }
  .jobs-bento-card.size-2x2 { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 500px) {
  .jobs-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .jobs-bento-card.size-2x1, .jobs-bento-card.size-2x2 { grid-column: span 1; grid-row: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jobs-lane-running::before,
  .jobs-bento-card.is-running::after,
  .jobs-lane-running .jobs-lane-title-dot::after,
  .jobs-bento-badge.running::before,
  .progress-ring .fill,
  .jobs-bento-poster img,
  .jobs-bento-poster video {
    animation: none !important;
    transition: none !important;
  }
}


/* Jobs filter chips: divider + danger + cleanup menu */
.jobs-chips { align-items: center; }
.jobs-chips-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.jobs-chip-danger {
  color: var(--accent);
  border-color: var(--border-accent);
}
.jobs-chip-danger:hover {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--accent);
}

.jobs-cleanup-wrap {
  position: relative;
}
.jobs-cleanup-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  display: none;
  animation: popoverIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.jobs-cleanup-menu.is-open { display: block; }
.jobs-cleanup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12.5px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.jobs-cleanup-item:hover { background: rgba(255,255,255,0.04); }
.jobs-cleanup-item.is-danger {
  color: var(--accent);
}
.jobs-cleanup-item.is-danger:hover {
  background: var(--accent-soft);
}
.jobs-cleanup-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--border);
}
[data-theme="light"] .jobs-cleanup-menu {
  background: #FFFFFF;
  box-shadow: 0 16px 32px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.05);
}
[data-theme="light"] .jobs-cleanup-item:hover { background: #F1F5F9; }

/* Bento card delete button (always visible) */
.jobs-bento-action.danger {
  color: rgba(255, 200, 200, 0.95);
}
.jobs-bento-action.danger:hover {
  background: rgba(225, 29, 72, 0.85);
  border-color: rgba(255,255,255,0.18);
  color: white;
}


/* ═══ ADVANCED FILTER MODAL ═══ */
.adv-filter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 520px;
  max-width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 0;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
}
.adv-filter-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
  border-radius: 14px 14px 0 0;
}
.adv-filter-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.adv-filter-close:hover { color: var(--text-primary); }
.adv-filter-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adv-filter-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
  border-radius: 0 0 14px 14px;
}
.adv-filter-section { }
.adv-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}
.adv-filter-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.adv-filter-input:focus { border-color: var(--purple); }
.adv-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.adv-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s;
  font-size: 13px;
}
.adv-filter-check:hover { background: rgba(255,255,255,0.04); }
.adv-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.adv-quick-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.adv-filter-btn { padding: 8px 16px; font-size: 12px; cursor: pointer; border-radius: 8px; }
.adv-filter-btn-apply { padding: 8px 20px; font-size: 12px; cursor: pointer; border-radius: 8px; font-weight: 600; }
.adv-filter-btn-reset { padding: 8px 16px; font-size: 12px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; gap: 6px; }

.adv-quick-date {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}
.adv-quick-date:hover {
  border-color: var(--purple);
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.08);
}
.adv-quick-date.is-active {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--purple);
  color: var(--purple);
  font-weight: 600;
}

/* Light mode */
[data-theme="light"] .adv-filter-card { background: #FFFFFF; box-shadow: 0 25px 60px rgba(15,23,42,0.15); }
[data-theme="light"] .adv-filter-header { background: #FFFFFF; }
[data-theme="light"] .adv-filter-footer { background: #FFFFFF; }
[data-theme="light"] .adv-filter-check:hover { background: #F1F5F9; }
[data-theme="light"] .adv-quick-date { background: #F8FAFC; }
[data-theme="light"] .adv-quick-date:hover { background: rgba(139, 92, 246, 0.06); }
[data-theme="light"] .adv-quick-date.is-active { background: rgba(139, 92, 246, 0.10); }


/* ═══ SETTINGS — PIPELINE SECTION ═══ */

/* Helper text under form inputs */
.form-help {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}
.form-help-error {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.5;
}

/* Number input with validation state */
.form-input.is-invalid {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Concurrency recommendation */
.concurrency-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.concurrency-recommend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--emerald);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
  font-family: var(--font-body);
}
.concurrency-recommend-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
}
.concurrency-system-info {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.system-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Setting row: label/desc on left, switch on right */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.setting-row:last-child { padding-bottom: 4px; }
.setting-row-text { flex: 1; min-width: 0; }
.setting-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.setting-row-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Toggle switch — reusable */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform 200ms ease, background-color 200ms ease;
}
.switch:hover .switch-track { border-color: var(--border-hover); }
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.switch input:checked + .switch-track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(16px);
  background: #FFFFFF;
}
.switch input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }

/* Light mode tuning */
[data-theme="light"] .switch-track { background: #E2E8F0; border-color: #CBD5E1; }
[data-theme="light"] .switch-thumb { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
[data-theme="light"] .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-thumb { transition: none; }
}


/* ════════════════════════════════════════════════════════════════
   SLOT INDICATOR — Hosts (Task 11.4)
   The component itself ships its own styles via injectStylesOnce().
   These rules just wire up the host wrappers (positioning + spacing)
   inside the dashboard hero and the create page.
   ════════════════════════════════════════════════════════════════ */

/* Dashboard: slot indicator pinned to top-right of hero card. */
.dash-hero-pulse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dash-slot-topright {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
}
.dash-slot-topright:empty { display: none; }

/* Create: floating slot indicator pinned to top-right of the page. */
.create-slot-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}
#page-create { position: relative; }
.create-slot-indicator:empty { display: none; }

/* ════════════════════════════════════════════════════════════════
   DASHBOARD — LIVE ACTIVITY TABLE (Task 11.4 / R9.5)
   ════════════════════════════════════════════════════════════════ */

.dash-live-activity {
  margin-top: 24px;
}
.dash-live-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.dash-live-count[data-empty="true"] {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border-color: var(--border);
}
.dash-live-table-wrap {
  padding: 4px 8px 12px;
  overflow-x: auto;
}
.dash-live-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
.dash-live-table thead th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
}
.dash-live-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  color: var(--text-primary);
  cursor: default;
  transition: background-color 200ms ease, color 200ms ease;
}
.dash-live-table tbody tr:last-child td { border-bottom: none; }
.dash-live-table tbody tr {
  transition: background-color 200ms ease;
  cursor: pointer;
}
.dash-live-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}
.dash-live-table tbody tr:hover td { color: var(--text-primary); }

.dash-live-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-live-account-id {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.dash-live-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}
.dash-live-progress-bar {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.dash-live-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 3px;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-live-progress-pct {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}

.dash-live-elapsed,
.dash-live-attempt {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.dash-live-attempt-bad { color: var(--amber); }

/* Light mode tweaks */
[data-theme="light"] .dash-live-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.03);
}
[data-theme="light"] .dash-live-table tbody td {
  border-bottom-color: rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .dash-live-progress-bar {
  background: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .dash-live-count[data-empty="true"] {
  background: rgba(15, 23, 42, 0.04);
}


/* ════════════════════════════════════════════════════════════════
   CREATE PAGE — BULK DANCE REFERENCE GRID (Task 11.5 / R8.x)
   Multi-file selection rendered as a compact toolbar + chip grid.
   Single-file path keeps the original <video> preview look.
   ════════════════════════════════════════════════════════════════ */

/* When the dance card holds N>1 selections we want a wider, top-aligned
   layout — taller card with the toolbar pinned to the top. */
.upload-card.is-multi {
  align-items: stretch;
  padding: 16px 18px;
}
.upload-card.is-multi .upload-card-content {
  align-items: stretch;
  text-align: left;
  gap: 12px;
}
.upload-card.is-overflow {
  border-color: var(--amber, #F59E0B);
  box-shadow: 0 0 18px rgba(245,158,11,0.18), inset 0 0 18px rgba(245,158,11,0.04);
}

/* Toolbar */
.dance-bulk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.dance-bulk-toolbar {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}
.dance-bulk-count {
  font-family: var(--font-display, 'Fira Code', monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--purple, #8B5CF6);
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.3);
}
.dance-bulk-count.is-overflow {
  color: var(--amber, #F59E0B);
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.4);
}
.dance-bulk-cost {
  font-family: var(--font-display, 'Fira Code', monospace);
  font-size: 11px;
  color: var(--text-secondary, #94A3B8);
}
.dance-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--bg-card, rgba(15,15,35,0.6));
  color: var(--text-secondary, #94A3B8);
  font-family: var(--font-body, 'Fira Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.dance-bulk-action:hover {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.4);
  color: var(--text-primary, #F8FAFC);
}
.dance-bulk-action.danger:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.4);
  color: var(--accent, #EF4444);
}

/* Grid of filename chips */
.dance-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 2px;
}
.dance-thumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  background: var(--bg-secondary, rgba(15,15,35,0.45));
  font-size: 12px;
  color: var(--text-primary, #F8FAFC);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.dance-thumb:hover {
  border-color: rgba(139,92,246,0.4);
  background: rgba(139,92,246,0.08);
}
.dance-thumb-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--purple, #8B5CF6);
  flex-shrink: 0;
}
.dance-thumb-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-primary, #F8FAFC);
  font-family: var(--font-body, 'Fira Sans', sans-serif);
}
.dance-thumb-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748B);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
  flex-shrink: 0;
}
.dance-thumb-action:hover {
  background: rgba(239,68,68,0.16);
  color: var(--accent, #EF4444);
}

/* Light-mode tightening — workspace UI rule (sufficient contrast). */
[data-theme="light"] .dance-thumb {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .dance-thumb:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.35);
}
[data-theme="light"] .dance-bulk-action {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #475569;
}
[data-theme="light"] .dance-bulk-action:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.4);
  color: #0F172A;
}
[data-theme="light"] .dance-bulk-cost { color: #475569; }

/* ════════════════════════════════════════════════════════════════
   HIGHLIGHT PULSE — freshly bulk-created jobs (R8.5)
   Adds a soft purple-to-cyan glow that auto-clears after 5 seconds
   via JS (so we don't need infinite animations or persistent state).
   ════════════════════════════════════════════════════════════════ */
.is-just-created {
  position: relative;
  animation: justCreatedPulse 1.4s ease-in-out 0s 4;
  outline: 1px solid rgba(139,92,246,0.55);
  outline-offset: 1px;
}
.is-just-created::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(139,92,246,0.6);
  animation: justCreatedRing 1.4s ease-out 0s 4;
}
@keyframes justCreatedPulse {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.45), 0 0 18px rgba(139,92,246,0.35); }
  50%  { box-shadow: 0 0 0 4px rgba(6,182,212,0.18), 0 0 22px rgba(6,182,212,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.0); }
}
@keyframes justCreatedRing {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.6); }
  100% { box-shadow: 0 0 0 14px rgba(139,92,246,0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-just-created { animation: none; }
  .is-just-created::after { animation: none; }
}

/* Light-mode highlight uses a darker outline for contrast. */
[data-theme="light"] .is-just-created {
  outline-color: rgba(124,58,237,0.6);
}


/* ─────────────────────────────────────────────────────────────
   Priority picker (Create page) — R6.1, R6.3
   3-chip radio group sized like motion-card but compact.
   ───────────────────────────────────────────────────────────── */
.priority-chip-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.priority-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}
.priority-chip:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.priority-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.priority-chip-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.55;
  transition: background-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}
.priority-chip.is-high  .priority-chip-dot { background: var(--accent); }
.priority-chip.is-normal .priority-chip-dot { background: var(--cyan); }
.priority-chip.is-low   .priority-chip-dot { background: var(--text-muted); }

.priority-chip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}
.priority-chip-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

.priority-chip.selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
  box-shadow: 0 4px 18px var(--accent-glow);
}
.priority-chip.selected .priority-chip-dot {
  opacity: 1;
  transform: scale(1.15);
}
.priority-chip.is-high.selected   { border-color: var(--accent); }
.priority-chip.is-normal.selected { border-color: var(--cyan); box-shadow: 0 4px 18px rgba(6,182,212,0.18); }
.priority-chip.is-low.selected    { border-color: var(--border-hover); box-shadow: 0 4px 14px rgba(15,23,42,0.18); }

[data-theme="light"] .priority-chip { background: #F8FAFC; }
[data-theme="light"] .priority-chip:hover { background: #F1F5F9; }
[data-theme="light"] .priority-chip-desc { color: #475569; }
[data-theme="light"] .priority-chip.selected {
  background: linear-gradient(135deg, var(--accent-soft), #FFFFFF);
}

@media (prefers-reduced-motion: reduce) {
  .priority-chip,
  .priority-chip-dot { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   Job priority badge + menu (Jobs page) — R6.4, R6.5
   Small chip overlaid on bento card poster, click opens 3-button
   popover to reassign priority. Reuses popover patterns.
   ───────────────────────────────────────────────────────────── */
.jobs-bento-priority {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: white;
  background: rgba(15, 23, 42, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-display);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.jobs-bento-priority:hover {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(255, 255, 255, 0.22);
}
.jobs-bento-priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.jobs-bento-priority.is-high   .jobs-bento-priority-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.jobs-bento-priority.is-normal .jobs-bento-priority-dot { background: var(--cyan); }
.jobs-bento-priority.is-low    .jobs-bento-priority-dot { background: rgba(255,255,255,0.55); }
.jobs-bento-priority-chevron {
  width: 10px;
  height: 10px;
  opacity: 0.65;
  transition: transform 180ms ease;
}
.jobs-bento-priority.is-open .jobs-bento-priority-chevron {
  transform: rotate(180deg);
}

.jobs-priority-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 32px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
  display: none;
  z-index: 50;
  animation: popoverIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.jobs-priority-menu.is-open { display: block; }

.jobs-priority-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  text-align: left;
  transition: background-color 150ms ease, color 150ms ease;
  font-family: inherit;
}
.jobs-priority-item:hover { background: rgba(255,255,255,0.05); }
.jobs-priority-item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}
.jobs-priority-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.jobs-priority-item[data-priority="high"]   .jobs-priority-item-dot { background: var(--accent); }
.jobs-priority-item[data-priority="normal"] .jobs-priority-item-dot { background: var(--cyan); }
.jobs-priority-item[data-priority="low"]    .jobs-priority-item-dot { background: var(--text-muted); }
.jobs-priority-item-text { flex: 1; min-width: 0; }
.jobs-priority-item-name {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary);
}
.jobs-priority-item-desc {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.jobs-priority-item.is-active .jobs-priority-item-name { color: var(--accent); }

[data-theme="light"] .jobs-priority-menu {
  background: #FFFFFF;
  box-shadow: 0 16px 32px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.06);
}
[data-theme="light"] .jobs-priority-item:hover { background: #F1F5F9; }

/* List-view priority chip (sits inline within meta) */
.jobs-list-priority {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.jobs-list-priority:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.jobs-list-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.jobs-list-priority.is-high   .jobs-list-priority-dot { background: var(--accent); }
.jobs-list-priority.is-normal .jobs-list-priority-dot { background: var(--cyan); }
.jobs-list-priority.is-low    .jobs-list-priority-dot { background: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .jobs-bento-priority,
  .jobs-bento-priority-chevron,
  .jobs-priority-item,
  .jobs-list-priority { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LICENSE ACTIVATION (Tasks 12.1, 12.2, 12.3)
   Modal · Settings → License section · Dashboard banner
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Activation modal ─── */
.activation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 5, 15, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: fadeIn 200ms ease-out;
  overflow-y: auto;
}
.activation-modal[hidden] { display: none; }

body.has-activation-modal { overflow: hidden; }

.activation-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 32px 24px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: activationSlideUp 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes activationSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.activation-header {
  text-align: center;
  margin-bottom: 22px;
}

.activation-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(139, 92, 246, 0.18));
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.activation-logo svg { width: 32px; height: 32px; }

.activation-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.activation-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.activation-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(225, 29, 72, 0.10);
  border: 1px solid rgba(225, 29, 72, 0.28);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 12.5px;
  line-height: 1.4;
}
.activation-error svg { flex-shrink: 0; margin-top: 2px; }
.activation-error[hidden] { display: none; }

.activation-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activation-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.activation-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.activation-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.activation-input.is-invalid {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.18);
}
.activation-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.activation-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.activation-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: -4px;
}

.activation-btn-primary {
  margin-top: 6px;
  width: 100%;
  padding: 13px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--accent), #be123c);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.activation-btn-primary:hover:not(:disabled) {
  filter: brightness(1.07);
  box-shadow: 0 6px 22px var(--accent-glow);
}
.activation-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.activation-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.activation-btn-spinner svg {
  animation: spin 0.8s linear infinite;
}
.activation-btn-spinner[hidden] { display: none; }

.activation-buy-link {
  display: block;
  margin-top: 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.activation-buy-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* In-modal update affordance (forced-upgrade escape hatch). */
.activation-update {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.activation-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.activation-update-status {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}
.activation-update .activation-btn-secondary {
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.activation-update-progress {
  margin-top: 10px;
}
.activation-update-progress[hidden] { display: none; }
.activation-update-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.activation-update-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #F43F5E, #8B5CF6);
  transition: width 200ms ease;
}
[data-theme="light"] .activation-update-bar {
  background: #E2E8F0;
}

.activation-diag {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.activation-diag > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: color var(--transition-fast);
}
.activation-diag > summary::-webkit-details-marker { display: none; }
.activation-diag > summary::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  transition: transform var(--transition-fast);
}
.activation-diag[open] > summary::before { transform: rotate(90deg); }
.activation-diag > summary:hover { color: var(--text-primary); }

.activation-diag-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.diag-label { color: var(--text-muted); }
.diag-value {
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--text-primary);
  background: var(--bg-input);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  user-select: text;
}

.activation-btn-secondary {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.activation-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* ─── Light-mode tuning for activation modal ─── */
[data-theme="light"] .activation-modal {
  background: rgba(15, 23, 42, 0.45);
}
[data-theme="light"] .activation-card {
  background: #FFFFFF;
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .activation-input {
  background: #F8FAFC;
}
[data-theme="light"] .activation-buy-link:hover {
  background: rgba(220, 38, 38, 0.08);
}
[data-theme="light"] .activation-btn-secondary {
  background: #F1F5F9;
  border-color: var(--border);
  color: #475569;
}
[data-theme="light"] .activation-btn-secondary:hover {
  background: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .diag-value {
  background: #F1F5F9;
  border-color: var(--border);
}

/* ─── License banner (dashboard) ─── */
.license-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.4;
  animation: fadeIn 200ms ease-out;
}
.license-banner[hidden] { display: none; }

.license-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.license-banner-message {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--text-primary);
}

.license-banner-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.license-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid transparent;
}
.license-banner-btn:hover { filter: brightness(1.08); }
.license-banner-btn:active { transform: translateY(1px); }

.license-banner-btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.license-banner-btn-primary:hover {
  background: var(--accent-hover);
}

.license-banner-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}
.license-banner-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
}

/* Severity variants */
.license-banner-warning {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--text-primary);
}
.license-banner-warning .license-banner-icon {
  background: rgba(245, 158, 11, 0.18);
  color: var(--amber);
}

.license-banner-error {
  background: rgba(225, 29, 72, 0.10);
  border-color: rgba(225, 29, 72, 0.30);
  color: var(--text-primary);
}
.license-banner-error .license-banner-icon {
  background: rgba(225, 29, 72, 0.18);
  color: var(--accent);
}

/* Light-mode banner tweaks */
[data-theme="light"] .license-banner-warning {
  background: #FEF3C7;
  border-color: #FCD34D;
}
[data-theme="light"] .license-banner-error {
  background: #FEE2E2;
  border-color: #FCA5A5;
}
[data-theme="light"] .license-banner-btn-secondary {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .license-banner-btn-secondary:hover {
  background: #F8FAFC;
  border-color: var(--border-hover);
}

/* Responsive: stack actions under message on narrow screens */
@media (max-width: 640px) {
  .license-banner {
    flex-wrap: wrap;
  }
  .license-banner-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ─── Settings → License section ─── */
.settings-license-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-license-loading,
.settings-license-empty {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.settings-license-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.license-info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.license-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.license-row:last-child { border-bottom: none; }

.license-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.license-value {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}

.license-key-mono {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-input);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-block;
  user-select: text;
}

.license-value-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.license-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.license-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.license-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.license-badge-ok {
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.license-badge-warn {
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.license-badge-err {
  background: rgba(225, 29, 72, 0.14);
  color: var(--accent);
  border: 1px solid rgba(225, 29, 72, 0.28);
}

.license-plan-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.28);
  text-transform: capitalize;
}
.license-plan-trial {
  background: rgba(6, 182, 212, 0.14);
  color: var(--cyan);
  border-color: rgba(6, 182, 212, 0.28);
}
.license-plan-lifetime {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(139, 92, 246, 0.18));
  color: var(--accent);
  border-color: rgba(244, 63, 94, 0.32);
}

.license-row-quota .license-quota-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.license-quota-bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--bg-input);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.license-quota-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--emerald));
  transition: width 300ms ease;
}
.license-quota-text {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-primary);
}

.license-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.license-actions .btn {
  cursor: pointer;
  font-size: 12.5px;
  padding: 9px 14px;
}
.license-actions .btn svg {
  width: 14px;
  height: 14px;
}
.license-deactivate-btn {
  margin-left: auto;
}
.license-deactivate-btn:hover {
  color: var(--accent) !important;
  border-color: var(--border-accent) !important;
  background: var(--accent-soft) !important;
}

/* Light-mode for settings license section */
[data-theme="light"] .license-key-mono {
  background: #F1F5F9;
  border-color: var(--border);
}
[data-theme="light"] .license-action-btn {
  background: #F1F5F9;
  border-color: var(--border);
  color: #475569;
}
[data-theme="light"] .license-action-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

/* Responsive: collapse the 160px label column on narrow widths */
@media (max-width: 540px) {
  .license-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══ Settings Update Section ═══ */

.settings-update-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.update-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.update-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.update-row:last-child { border-bottom: none; }

.update-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.update-value {
  font-size: 13px;
  color: var(--text-primary);
}

.update-version-mono {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-input);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-block;
}

.update-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.update-badge-uptodate {
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.update-badge-available {
  background: rgba(6, 182, 212, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(6, 182, 212, 0.28);
}

.update-badge-downloading {
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.update-badge-ready {
  background: rgba(139, 92, 246, 0.14);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.28);
}

.update-badge-checking {
  background: rgba(100, 116, 139, 0.14);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.28);
}

.update-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.update-actions .btn {
  cursor: pointer;
  font-size: 12.5px;
  padding: 9px 14px;
}
.update-actions .btn svg {
  width: 14px;
  height: 14px;
}
.update-actions .btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.update-uptodate-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #6ee7b7;
  animation: updateMsgFadeIn 200ms ease;
}
.update-uptodate-msg svg {
  stroke: #6ee7b7;
  flex-shrink: 0;
}

/* Light mode override */
:root[data-theme="light"] .update-uptodate-msg {
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
}
:root[data-theme="light"] .update-uptodate-msg svg {
  stroke: #047857;
}

@keyframes updateMsgFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Light-mode for update section */
[data-theme="light"] .update-version-mono {
  background: #F1F5F9;
  border-color: var(--border);
}

/* Responsive: collapse the 160px label column on narrow widths */
@media (max-width: 540px) {
  .update-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ═══ Update Banner (Req 4.1–4.4, 3.1–3.3) ═══ */

.update-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0 0 12px 0;
  animation: fadeIn 200ms ease-out;
}
.update-banner[hidden] { display: none; }

.update-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
}

.update-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}

.update-banner-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.update-banner-notes {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-line;
  max-height: 54px;
  overflow: hidden;
}

.update-banner-size {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.update-banner-speed {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.update-banner-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.update-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}
.update-banner-btn:hover { filter: brightness(1.08); }
.update-banner-btn:active { transform: translateY(1px); }

.update-banner-btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.update-banner-btn-primary:hover {
  background: var(--accent-hover);
}

.update-banner-btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}
.update-banner-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.24);
}

.update-banner-btn-cancel {
  background: transparent;
  border-color: rgba(245, 158, 11, 0.30);
  color: var(--amber);
}
.update-banner-btn-cancel:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.50);
}

/* ─── Banner state variants ─── */
.update-banner-available {
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.22);
}
.update-banner-available .update-banner-icon {
  background: rgba(6, 182, 212, 0.14);
  color: var(--cyan);
}

.update-banner-downloading {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.22);
}
.update-banner-downloading .update-banner-icon {
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
}

.update-banner-ready {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.22);
}
.update-banner-ready .update-banner-icon {
  background: rgba(16, 185, 129, 0.14);
  color: var(--emerald);
}

/* ─── Progress bar ─── */
.update-banner-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.update-banner-progress-bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--bg-input);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.update-banner-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--emerald));
  border-radius: 999px;
  transition: width 300ms ease;
}

.update-banner-percent {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 36px;
  text-align: right;
}

/* ─── Running jobs warning dialog ─── */
.update-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fadeIn 150ms ease;
}

.update-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.update-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.update-dialog-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.update-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.14);
  color: var(--amber);
}

.update-dialog-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}

.update-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ─── Light-mode tweaks ─── */
[data-theme="light"] .update-banner-available {
  background: #ECFEFF;
  border-color: #A5F3FC;
}
[data-theme="light"] .update-banner-downloading {
  background: #FFFBEB;
  border-color: #FDE68A;
}
[data-theme="light"] .update-banner-ready {
  background: #ECFDF5;
  border-color: #A7F3D0;
}
[data-theme="light"] .update-banner-btn-secondary {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .update-banner-btn-secondary:hover {
  background: #F8FAFC;
  border-color: var(--border-hover);
}
[data-theme="light"] .update-banner-btn-cancel {
  background: #FFFFFF;
  border-color: #FCD34D;
  color: #D97706;
}
[data-theme="light"] .update-banner-btn-cancel:hover {
  background: #FFFBEB;
}
[data-theme="light"] .update-dialog {
  background: #FFFFFF;
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* ─── Responsive: stack actions on narrow screens ─── */
@media (max-width: 640px) {
  .update-banner {
    flex-wrap: wrap;
  }
  .update-banner-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ═══════════════════════════════════════════
   BATCH CREATE PAGE
   ═══════════════════════════════════════════ */

/* Mode Toggle */
.batch-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
  width: fit-content;
}

.batch-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.batch-mode-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.batch-mode-btn.active {
  background: var(--purple);
  color: white;
  box-shadow: 0 2px 8px var(--purple-glow);
}

/* Upload Grid */
.batch-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.batch-upload-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.batch-upload-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.batch-upload-card.has-files {
  border-color: rgba(139, 92, 246, 0.32);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(139, 92, 246, 0.08);
}

.batch-upload-card.has-files:hover {
  border-color: rgba(139, 92, 246, 0.45);
}

.batch-upload-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.batch-upload-card-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--purple);
  letter-spacing: 0.5px;
}

.batch-upload-card-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--purple);
  background: rgba(139, 92, 246, 0.1);
  border-radius: 999px;
}

.batch-upload-placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: var(--bg-primary);
  border: 1.5px dashed rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-normal), background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}
.batch-upload-placeholder .upload-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.batch-upload-placeholder:hover {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.14);
}

.batch-upload-placeholder:hover .upload-card-icon {
  transform: scale(1.05);
}

/* File List */
.batch-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}

.batch-file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 200px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.batch-file-chip:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}

.batch-file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-file-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.batch-file-chip-remove:hover {
  background: rgba(225, 29, 72, 0.15);
  color: var(--accent);
}

.batch-file-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.batch-file-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.batch-file-action-btn:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(139, 92, 246, 0.06);
}

.batch-file-action-btn.danger:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Preview Card */
.batch-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.batch-preview-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.batch-preview-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Fira Code', monospace;
}

.batch-preview-num.batch-preview-total {
  color: var(--purple);
}

.batch-preview-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.batch-preview-op {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 300;
}

.batch-preview-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--amber);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.batch-preview-total-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: auto;
}

.batch-preview-cost-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--amber);
}

/* ─── Empty State ────────────────────────────────────────────── */
.batch-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fill the remaining viewport height so the card background extends down to
     the bottom of the screen instead of leaving a large empty gap below. The
     offset accounts for content padding + page header + the upload-cards row. */
  min-height: calc(100vh - 320px);
}

.batch-empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px;
  max-width: 420px;
}

.batch-empty-state-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.batch-empty-state-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.batch-empty-state-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  line-height: 1.5;
}

.batch-empty-state-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.batch-empty-state-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
}

.batch-empty-state-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.12);
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Summary Header ─────────────────────────────────────────── */
.batch-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), rgba(245, 158, 11, 0.04));
}

.batch-summary-entries {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.batch-summary-entries svg {
  color: var(--purple);
}

.batch-summary-cost {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--amber);
  font-weight: 600;
}

/* Pairing Grid (Explicit Mode) */
.batch-pairing-grid {
  margin-bottom: 16px;
}

.batch-pairing-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* ─── Compact Pairing Row (Redesigned) ────────────────────────── */
.batch-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  cursor: grab;
}

.batch-row:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.batch-row:active {
  cursor: grabbing;
}

.batch-row.selected {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.15);
}

.batch-row-incomplete {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.03);
}

.batch-row-files {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.batch-row-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.batch-row-drag-handle:hover {
  opacity: 1;
}

.batch-row-drag-handle:active {
  cursor: grabbing;
}

.batch-row-left,
.batch-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 150ms ease;
}

.batch-row-left:hover,
.batch-row-right:hover {
  background: rgba(255, 255, 255, 0.04);
}

.batch-row-left:active,
.batch-row-right:active {
  cursor: grabbing;
}

.batch-row-left.drag-over,
.batch-row-right.drag-over {
  background: rgba(139, 92, 246, 0.1);
  outline: 1px dashed var(--purple);
}

.batch-row-link {
  flex-shrink: 0;
  opacity: 0.5;
}

.batch-row-prompt {
  flex: 0 0 120px;
  min-width: 0;
}

.batch-row-prompt-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-input, rgba(0, 0, 0, 0.15));
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  transition: border-color 200ms ease;
}

.batch-row-prompt-input:focus {
  outline: none;
  border-color: var(--purple);
}

.batch-row-prompt-input.has-value {
  border-color: rgba(139, 92, 246, 0.4);
}

.batch-row-prompt-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.batch-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  flex-shrink: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.batch-row-left:hover .batch-row-thumb,
.batch-row-right:hover .batch-row-thumb {
  border-color: var(--border-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.batch-row-thumb-placeholder,
.batch-row-thumb-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  flex-shrink: 0;
}

.batch-row-thumb-missing {
  border: 1.5px dashed rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
}

.batch-row-thumb-draggable {
  cursor: grab;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.batch-row-thumb-draggable:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.batch-row-thumb-draggable:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.batch-row-thumb.drag-over {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.batch-row-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.batch-row-missing-text {
  font-size: 10px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.batch-row-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 200ms ease, background 200ms ease;
}

.batch-row-remove:hover {
  color: var(--accent);
  background: rgba(239, 68, 68, 0.1);
}

.batch-row:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.batch-row-remove:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
}

/* ─── Pairing List Container ─────────────────────────────────── */
.batch-pairing-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.batch-pairing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.batch-pairing-row:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.batch-pairing-row[draggable="true"] {
  cursor: grab;
}

.batch-pairing-row[draggable="true"]:active {
  cursor: grabbing;
}

.batch-pairing-row.unassigned {
  background: rgba(225, 29, 72, 0.05);
  border: 1px solid rgba(225, 29, 72, 0.15);
}

/* Drag-active state: visual feedback when row is being dragged */
.batch-pairing-row.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Drop indicator line for reorder target */
.batch-pairing-row.drop-above {
  border-top: 2px solid var(--purple);
}

.batch-pairing-row.drop-below {
  border-bottom: 2px solid var(--purple);
}

.batch-pairing-row.missing-file {
  background: rgba(239, 68, 68, 0.08);
  border: 2px solid rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.batch-pairing-row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.batch-pairing-media {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.batch-pairing-thumb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 90px;
  min-width: 90px;
  flex-shrink: 0;
}

.batch-pairing-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  flex-shrink: 0;
}

.batch-pairing-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.batch-pairing-thumb-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(239, 68, 68, 0.06);
  border: 2px dashed rgba(239, 68, 68, 0.4);
}

.batch-pairing-missing-label {
  font-size: 9px;
  color: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.batch-pairing-filename {
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.batch-pairing-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 8px;
  min-width: 40px;
}

.batch-pairing-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: grab;
  flex-shrink: 0;
  transition: color 200ms ease, background 200ms ease;
}

.batch-pairing-drag-handle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.batch-pairing-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 200ms ease, background 200ms ease;
}

.batch-pairing-remove-btn:hover {
  color: var(--accent);
  background: rgba(225, 29, 72, 0.1);
}

/* Prompt area within pairing row */
.batch-pairing-prompt-area {
  padding-left: 4px;
}

.batch-pairing-prompt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}

.batch-pairing-prompt-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.batch-pairing-prompt-toggle-label {
  font-size: 11px;
}

.batch-pairing-prompt-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.batch-pairing-prompt-expand {
  margin-top: 6px;
  position: relative;
}

.batch-pairing-prompt-input {
  width: 100%;
  min-height: 48px;
  max-height: 100px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 200ms ease;
}

.batch-pairing-prompt-input:focus {
  border-color: var(--purple);
  outline: none;
}

.batch-pairing-prompt-counter {
  display: block;
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.batch-pairing-prompt-counter.at-limit {
  color: var(--accent);
}

/* ─── Per-Entry Prompt Input (buildEntryPromptInput) ─────────── */
.batch-entry-prompt-area {
  padding-left: 4px;
  margin-top: 4px;
}

.batch-entry-prompt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}

.batch-entry-prompt-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.batch-entry-prompt-toggle-label {
  font-size: 11px;
}

.batch-entry-prompt-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 1px 6px;
  background: rgba(139, 92, 246, 0.12);
  border-radius: 8px;
}

.batch-entry-prompt-badge-text {
  font-size: 9px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.batch-entry-prompt-chevron {
  transition: transform 200ms ease;
}

.batch-entry-prompt-chevron.expanded {
  transform: rotate(180deg);
}

.batch-entry-prompt-expand {
  margin-top: 6px;
  position: relative;
}

.batch-entry-prompt-input {
  width: 100%;
  min-height: 48px;
  max-height: 100px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 200ms ease;
}

.batch-entry-prompt-input:focus {
  border-color: var(--purple);
  outline: none;
}

.batch-entry-prompt-counter {
  display: block;
  text-align: right;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.batch-entry-prompt-counter.at-limit {
  color: var(--accent);
  font-weight: 600;
}

/* ─── Multi-Select & Bulk Remove ─────────────────────────────── */
.batch-pairing-row.selected {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3);
}

.batch-pairing-checkbox-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.batch-pairing-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.batch-pairing-checkbox-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  transition: background 200ms ease, border-color 200ms ease;
}

.batch-pairing-checkbox-custom svg {
  opacity: 0;
  transition: opacity 150ms ease;
}

.batch-pairing-checkbox:checked + .batch-pairing-checkbox-custom {
  background: var(--purple);
  border-color: var(--purple);
}

.batch-pairing-checkbox:checked + .batch-pairing-checkbox-custom svg {
  opacity: 1;
  stroke: #fff;
}

.batch-pairing-checkbox:focus-visible + .batch-pairing-checkbox-custom {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.batch-pairing-checkbox-label:hover .batch-pairing-checkbox-custom {
  border-color: var(--purple);
}

.batch-bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.batch-bulk-action-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--purple);
  font-weight: 500;
}

.batch-bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.batch-bulk-action-btn.danger {
  background: rgba(225, 29, 72, 0.1);
  color: var(--accent);
}

.batch-bulk-action-btn.danger:hover {
  background: rgba(225, 29, 72, 0.2);
}

.batch-pairing-img-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.batch-pairing-warn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.batch-pairing-select {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
}

.batch-pairing-select:focus {
  border-color: var(--purple);
  outline: none;
}

/* Unassigned Warning */
.batch-unassigned-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ─── Import Summary Notification ─────────────────────────────── */
.batch-import-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  animation: batchImportSummaryIn 200ms ease-out;
}

.batch-import-summary-success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.batch-import-summary-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.batch-import-summary-error {
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.2);
}

.batch-import-summary-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-import-summary-icon {
  display: flex;
  align-items: center;
}

.batch-import-summary-success .batch-import-summary-icon { color: var(--green, #22c55e); }
.batch-import-summary-warning .batch-import-summary-icon { color: var(--amber, #f59e0b); }
.batch-import-summary-error .batch-import-summary-icon { color: var(--accent, #e11d48); }

.batch-import-summary-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.batch-import-summary-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  transition: color 200ms, background 200ms;
}

.batch-import-summary-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.batch-import-summary-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.batch-import-summary-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.batch-import-summary-stat {
  font-size: 12px;
  color: var(--text-secondary);
}

.batch-import-summary-stat strong {
  color: var(--text-primary);
  font-weight: 600;
}

.batch-import-summary-stat-valid strong {
  color: var(--green, #22c55e);
}

.batch-import-summary-stat-skipped strong {
  color: var(--amber, #f59e0b);
}

.batch-import-summary-skipped {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.batch-import-summary-skipped-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.batch-import-summary-reasons {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

.batch-import-summary-reasons li {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 0;
  padding-left: 12px;
  position: relative;
}

.batch-import-summary-reasons li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber, #f59e0b);
  transform: translateY(-50%);
}

.batch-import-summary-more {
  font-style: italic;
  opacity: 0.7;
}

.batch-import-summary-hide {
  animation: batchImportSummaryOut 300ms ease-in forwards;
}

@keyframes batchImportSummaryIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes batchImportSummaryOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* Warning Section */
.batch-warning {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 16px;
}

.batch-warning.visible {
  display: flex;
}

/* Global Prompt Section */
.batch-global-prompt-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.batch-global-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.batch-prompt-counter {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color 200ms ease;
}

.batch-prompt-counter.at-limit {
  color: var(--danger, #ef4444);
  font-weight: 600;
}

.batch-global-prompt-input {
  width: 100%;
  min-height: 72px;
  max-height: 160px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
  font-family: inherit;
  transition: border-color 200ms ease;
}

.batch-global-prompt-input:focus {
  outline: none;
  border-color: var(--accent, var(--purple));
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.batch-global-prompt-input::placeholder {
  color: var(--text-muted);
}

.batch-global-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* ─── Unified Batch Settings Panel ─────────────────────────────── */
.batch-settings-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

.batch-settings-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.batch-settings-panel-header svg {
  stroke: var(--text-secondary);
  opacity: 0.9;
}

.batch-settings-panel-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.batch-setting-field--model {
  flex: 1;
  min-width: 200px;
}

.batch-setting-field--thread {
  width: 110px;
  flex-shrink: 0;
}

.batch-setting-field--account {
  flex: 1;
  min-width: 150px;
  max-width: 240px;
}

.batch-setting-label-sm {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.batch-model-selector {
  display: flex;
  gap: 6px;
}

.batch-model-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
}

.batch-model-btn:hover {
  border-color: var(--purple);
  color: var(--text-primary);
}

.batch-model-btn.active {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.1);
  color: var(--purple);
  font-weight: 600;
}

.batch-model-btn-name {
  font-size: 12px;
}

.batch-model-btn-cost {
  font-size: 10px;
  opacity: 0.75;
  font-weight: 400;
}

.batch-model-btn.active .batch-model-btn-cost {
  opacity: 1;
}

.batch-setting-select-sm {
  width: 100%;
  padding: 8px 30px 8px 12px;
  background-color: var(--bg-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: 4px;
}

.batch-setting-select-sm:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.batch-settings-prompt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-settings-prompt-wrap {
  flex: 1;
  position: relative;
}

.batch-settings-prompt-input {
  width: 100%;
  padding: 7px 60px 7px 10px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: border-color 200ms ease;
}

.batch-settings-prompt-input:focus {
  outline: none;
  border-color: var(--purple);
}

.batch-settings-prompt-input::placeholder {
  color: var(--text-muted);
}

.batch-settings-prompt-wrap .batch-prompt-counter {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
}

.batch-settings-prompt-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 200ms ease;
}

.batch-settings-prompt-apply:hover {
  border-color: var(--purple);
  color: var(--purple);
  background: rgba(139, 92, 246, 0.06);
}

@media (max-width: 800px) {
  .batch-settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .batch-setting-field--thread,
  .batch-setting-field--account {
    width: 100%;
    max-width: none;
  }
}

/* Settings Section */
.batch-settings {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.batch-settings-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.batch-settings-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.batch-settings-hint {
  font-size: 11px;
  color: var(--text-muted);
}

.batch-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.batch-setting-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.batch-setting-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.batch-setting-select {
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.batch-setting-select:focus {
  border-color: var(--purple);
  outline: none;
}

.batch-setting-explanation {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.batch-thread-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--warning, #f59e0b);
  line-height: 1.3;
}

.batch-thread-warning svg {
  flex-shrink: 0;
  stroke: var(--warning, #f59e0b);
}

/* Action Bar */
.batch-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.batch-action-left {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.batch-action-right {
  display: flex;
  gap: 8px;
}

.batch-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
}

.batch-action-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.batch-action-btn.secondary:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.batch-action-btn.primary {
  background: linear-gradient(135deg, var(--accent), #be123c);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
  padding: 10px 22px;
  box-shadow: 0 2px 12px var(--accent-glow);
}

.batch-action-btn.primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 4px 20px var(--accent-glow);
}

.batch-action-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.batch-action-btn.primary:disabled:hover {
  background: linear-gradient(135deg, var(--accent), #be123c);
  transform: none;
}

.batch-submit-cost {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 4px;
}

/* Confirm Modal Summary */
.batch-confirm-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.batch-confirm-row:last-child {
  border-bottom: none;
}

.batch-confirm-row span {
  color: var(--text-secondary);
}

.batch-confirm-row strong {
  color: var(--text-primary);
}

/* ─── Pairing Workspace (3-column layout) ─────────────────────── */
.batch-pairing-workspace {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

.batch-pairing-center {
  min-width: 0;
}

/* ─── Unassigned Areas (left/right sidebars) ─────────────────── */
.batch-unassigned-area {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 120px;
  transition: border-color 200ms ease, background 200ms ease;
}

.batch-unassigned-area:empty {
  display: none;
}

.batch-unassigned-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.batch-unassigned-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--amber, #f59e0b);
}

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

.batch-unassigned-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
  cursor: grab;
}

.batch-unassigned-item:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.batch-unassigned-item:active {
  cursor: grabbing;
}

/* Drag-active state for unassigned items */
.batch-unassigned-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* Drop zone highlight when dragging over */
.batch-unassigned-area.drag-over {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.04);
}

.batch-unassigned-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
}

.batch-unassigned-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.batch-unassigned-name {
  font-size: 11px;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* ─── No Horizontal Scroll Enforcement (Requirement 8.4) ─────── */
#batchCreateContent {
  overflow-x: hidden;
  max-width: 100%;
}

.batch-pairing-workspace {
  overflow-x: hidden;
}

.batch-pairing-list {
  overflow-x: hidden;
}

/* ─── Smooth Reorder Animation (Requirement 8.7) ─────────────── */
.batch-pairing-row {
  animation: batchRowIn 200ms ease;
}

@keyframes batchRowIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Drag Handle Active State ───────────────────────────────── */
.batch-pairing-drag-handle:active {
  cursor: grabbing;
  color: var(--purple);
}

/* ─── Responsive: 800px breakpoint (Requirement 8.4) ─────────── */
@media (max-width: 800px) {
  /* Collapse 3-column workspace to stacked layout */
  .batch-pairing-workspace {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Unassigned areas become horizontal rows */
  .batch-unassigned-area {
    min-height: auto;
  }

  .batch-unassigned-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .batch-unassigned-item {
    flex-direction: row;
    gap: 8px;
    padding: 6px 10px;
  }

  .batch-unassigned-thumb {
    width: 48px;
    height: 48px;
  }

  /* Pairing rows: shrink thumbnails and adjust layout */
  .batch-pairing-thumb {
    width: 56px;
    height: 56px;
  }

  .batch-pairing-media {
    flex-wrap: wrap;
    gap: 8px;
  }

  .batch-pairing-row-content {
    flex-direction: column;
    gap: 8px;
  }

  /* Upload grid stacks */
  .batch-upload-grid {
    grid-template-columns: 1fr;
  }

  /* Settings grid stacks */
  .batch-settings-grid {
    grid-template-columns: 1fr;
  }

  /* Action bar wraps buttons */
  .batch-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .batch-action-left,
  .batch-action-right {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Summary header stacks on narrow viewports */
  .batch-summary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Global prompt section tighter padding */
  .batch-global-prompt-section {
    padding: 14px;
  }

  /* Connector shrinks */
  .batch-pairing-connector svg {
    width: 24px;
  }
}

/* ─── Responsive: below 768px (extra narrow) ─────────────────── */
@media (max-width: 768px) {
  .batch-pairing-workspace {
    gap: 8px;
  }

  .batch-pairing-thumb {
    width: 40px;
    height: 40px;
  }

  .batch-unassigned-thumb {
    width: 36px;
    height: 36px;
  }

  .batch-pairing-row {
    padding: 8px;
    gap: 6px;
  }

  .batch-action-btn {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ═══ Batch Sessions Manager (R9.1–R9.9, R7.8–R7.9) ═══ */

.batch-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.batch-session-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  transition: background var(--transition-fast);
}
.batch-session-row:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
}

.batch-session-info {
  min-width: 0;
}

.batch-session-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.batch-session-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.batch-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid;
  background: transparent;
}

.batch-session-date {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.batch-session-entries {
  color: var(--text-secondary);
}

.batch-session-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.batch-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--bg-primary);
  border-radius: 3px;
  overflow: hidden;
}

.batch-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms ease;
}

.batch-session-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
  font-family: var(--font-display, monospace);
}

.batch-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.batch-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.batch-action-btn.danger {
  color: var(--accent);
  border-color: rgba(244, 63, 94, 0.25);
}
.batch-action-btn.danger:hover {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.45);
}

/* Schedule row variant */
.batch-schedule-row .batch-session-progress {
  display: none;
}
.batch-schedule-row {
  grid-template-columns: 1fr auto;
}

/* ─── Light mode tweaks ─── */
[data-theme="light"] .batch-session-row {
  background: #F8FAFC;
}
[data-theme="light"] .batch-session-row:hover {
  background: #F1F5F9;
}
[data-theme="light"] .batch-progress-bar {
  background: #E2E8F0;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .batch-session-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .batch-session-progress {
    min-width: unset;
  }
  .batch-session-actions {
    justify-content: flex-end;
  }
}

/* ─── Keyboard Accessibility: Focus Indicators (Requirement 8.2, 8.3) ─── */

/* Visible focus indicators on all batch interactive elements.
   Uses outline with 2px solid var(--purple) and 2px offset.
   Purple (#8B5CF6) on dark background meets minimum 3:1 contrast ratio. */

.batch-pairing-row:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px var(--purple-glow);
}

.batch-unassigned-item:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--purple-glow);
}

.batch-pairing-drag-handle:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.batch-pairing-remove-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.batch-entry-prompt-toggle:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.batch-action-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.batch-global-prompt-input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-color: var(--purple);
}

.batch-entry-prompt-input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-color: var(--purple);
}

.batch-setting-select:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-color: var(--purple);
}

.batch-upload-placeholder:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--purple-glow);
}

.batch-file-chip-remove:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
  border-radius: 50%;
}

.batch-file-action-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--purple-glow);
}

.batch-bulk-action-btn:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--purple-glow);
}

/* ─── Batch Submission Loading State (Requirement 8.9) ────────── */
.batch-submitting {
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

.batch-submitting .batch-action-btn,
.batch-submitting .batch-setting-select,
.batch-submitting .batch-global-prompt-input,
.batch-submitting .batch-entry-prompt-input,
.batch-submitting .batch-pairing-drag-handle,
.batch-submitting .batch-pairing-remove-btn,
.batch-submitting .batch-file-chip-remove {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Confirmation Dialog: Global Prompt Value ────────────────── */
.batch-confirm-prompt-value {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  font-style: italic;
  color: var(--text-secondary);
}

/* ═══ JOB ROWS (redesigned — aligned grid layout) ═══
   Columns: [icon] [main: title + sub] [status] [carrots] [time] [actions]
   A CSS grid keeps every column edge aligned no matter the content width,
   which fixes the old flat-flexbox misalignment/clutter. */
#jobsList {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
  margin-top: 16px;
}
#jobsList .empty-state { border: none; }
.jrow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 84px 128px 56px 92px 76px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}
.jrow:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.jrow:last-child { border-bottom: none; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.jrow:hover { background: var(--bg-card-hover); }

/* ── Left icon badge ── */
.jrow-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Real result preview (image / video first-frame) sits on top of the fallback
   icon. If it fails to load it removes itself (onerror) and the icon shows. */
.jrow-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-tertiary);
}
.jrow-icon--media { color: var(--text-muted); }
.jrow-preview-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: #fff;
  z-index: 1;
}

/* ── Main cell: two lines (title + sub) ── */
.jrow-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jrow-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.jrow-char {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
}
.jrow-batch-badge {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.jrow-type-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.jrow-type-tag--motion   { background: rgba(59, 130, 246, 0.14); color: rgb(147, 197, 253); border-color: rgba(59, 130, 246, 0.28); }
.jrow-type-tag--i2v      { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border-color: rgba(139, 92, 246, 0.28); }
.jrow-type-tag--clone    { background: rgba(6, 182, 212, 0.14);  color: #67e8f9; border-color: rgba(6, 182, 212, 0.28); }
.jrow-type-tag--imagegen { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.28); }
.jrow-type-tag--enhance  { background: rgba(245, 158, 11, 0.14); color: #fcd34d; border-color: rgba(245, 158, 11, 0.28); }
[data-theme="light"] .jrow-type-tag--enhance { color: #b45309; border-color: rgba(245, 158, 11, 0.4); }

/* Type tag now lives in its OWN aligned column (not after the title) so the
   Clone / Motion / Image / I2V badges line up vertically regardless of how
   long each row's title is. */
.jrow-type-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}
.jrow-type-cell .jrow-type-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jrow-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.jrow-sub svg { flex-shrink: 0; opacity: 0.8; }
.jrow-sub-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jrow-sub-error { color: var(--accent); }

/* ── Status pill ── */
.jrow-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.jrow-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.jrow-status-label { color: var(--text-muted); }

/* Status coloring driven entirely by the row's is-* class */
.jrow.is-running   .jrow-status-label { color: var(--cyan); }
.jrow.is-running   .jrow-status-dot  { display: none; } /* spinner replaces dot */
.jrow.is-completed .jrow-status-dot { background: var(--emerald); }
.jrow.is-completed .jrow-status-label { color: var(--emerald); }
.jrow.is-failed    .jrow-status-dot { background: var(--accent); }
.jrow.is-failed    .jrow-status-label { color: var(--accent); }
.jrow.is-awaiting_review .jrow-status-dot { background: var(--purple); }
.jrow.is-awaiting_review .jrow-status-label { color: var(--purple); }

.jrow-progress {
  display: inline-flex;
  align-items: center;
  color: var(--cyan);
}
.jrow-spinner {
  animation: spin 1s linear infinite;
  color: var(--cyan);
  display: inline-block;
  vertical-align: middle;
}
/* Running-state left badge: a circular progress RING with the % in the center
   (no square box / tint behind it). */
.jrow-icon.jrow-icon--progress {
  border: none;
  background: transparent;
  overflow: visible;
}
/* Failed job badge — red alert triangle, so a failure reads instantly. */
.jrow-icon.jrow-icon--failed {
  border-color: var(--border-accent, rgba(244, 63, 94, 0.4));
  background: var(--accent-soft, rgba(244, 63, 94, 0.12));
  color: var(--accent, #f43f5e);
}
/* Cancelled job badge — muted "no entry" glyph. */
.jrow-icon.jrow-icon--cancelled {
  border-color: var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
/* Awaiting-review badge — keeps the type tint, shows an eye glyph. */
.jrow-icon.jrow-icon--review { color: var(--purple, #8b5cf6); }
/* Queued / waiting badge — a STATIC clock, muted so it reads as "idle, waiting
   its turn" (clearly NOT the animated running ring). */
.jrow-icon.jrow-icon--queued {
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-color: var(--border);
}
.jrow-ring {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.jrow-ring svg { display: block; }
.jrow-ring-track { stroke: var(--border); }
.jrow-ring-fill {
  stroke: var(--cyan);
  transition: stroke-dashoffset 160ms linear;
}
.jrow-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: -0.3px;
}
.jrow-ring-sign { font-size: 7px; font-weight: 600; margin-left: 0.5px; opacity: 0.8; }

/* ── Carrots ── */
.jrow-carrots {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  text-align: right;
}
.jrow-carrots--empty { color: var(--text-muted); font-weight: 400; }
.jrow-carrots--final { color: var(--emerald); }
/* Failed/cancelled with no charge — dimmed so it reads as "0, not billed". */
.jrow-carrots--zero { color: var(--text-muted); font-weight: 400; opacity: 0.7; }

/* ── Time ── */
.jrow-time {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  text-align: right;
}

/* ── Actions ── */
.jrow-actions-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.jrow-action {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.jrow-action:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.jrow-action-danger:hover {
  background: var(--accent-soft);
  border-color: var(--border-accent);
  color: var(--accent);
}

/* Light mode tweaks */
[data-theme="light"] .jrow:hover { background: var(--bg-tertiary); }
[data-theme="light"] .jrow-action:hover { background: rgba(0,0,0,0.04); }

/* Icon badge tints per job type */
.jrow-thumb-icon--motion   { background: rgba(59, 130, 246, 0.14);  color: rgb(147, 197, 253); border-color: rgba(59, 130, 246, 0.3); }
.jrow-thumb-icon--i2v      { background: rgba(139, 92, 246, 0.14);  color: #c4b5fd;            border-color: rgba(139, 92, 246, 0.3); }
.jrow-thumb-icon--clone    { background: rgba(6, 182, 212, 0.14);   color: #67e8f9;            border-color: rgba(6, 182, 212, 0.3); }
.jrow-thumb-icon--imagegen { background: rgba(16, 185, 129, 0.14);  color: #6ee7b7;            border-color: rgba(16, 185, 129, 0.3); }
.jrow-thumb-icon--enhance  { background: rgba(245, 158, 11, 0.14);  color: #fcd34d;            border-color: rgba(245, 158, 11, 0.3); }
[data-theme="light"] .jrow-thumb-icon--motion   { color: #2563eb; }
[data-theme="light"] .jrow-thumb-icon--i2v      { color: #7c3aed; }
[data-theme="light"] .jrow-thumb-icon--clone    { color: #0891b2; }
[data-theme="light"] .jrow-thumb-icon--imagegen { color: #059669; }
[data-theme="light"] .jrow-thumb-icon--enhance  { color: #d97706; }

/* Responsive: tighten meta columns on narrow widths */
@media (max-width: 1024px) {
  .jrow {
    grid-template-columns: 36px minmax(0, 1fr) 72px 110px 72px;
    gap: 10px;
  }
  .jrow-carrots, .jrow-time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jrow-spinner { animation-duration: 2s; }
}

/* ═══ MODEL CARDS ═══ */
.batch-model-cards {
  display: flex;
  gap: 6px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.batch-model-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 180ms ease;
  position: relative;
  flex: 1;
  justify-content: center;
}
.batch-model-card:hover {
  background: rgba(255,255,255,0.04);
}
.batch-model-card.active {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.12), 0 0 0 1px rgba(225, 29, 72, 0.15);
}
[data-theme="light"] .batch-model-card.active {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.10), 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.batch-model-card-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.batch-model-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.batch-model-card-cost {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  font-family: var(--font-display);
}

.batch-model-card-desc {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: none;
}
.batch-model-card.active .batch-model-card-desc {
  display: inline;
  color: var(--accent);
  opacity: 0.8;
}

/* ═══ THREAD SELECTOR ═══ */
.batch-thread-selector {
  display: flex;
  gap: 4px;
  background: var(--bg-input, rgba(0, 0, 0, 0.15));
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  width: fit-content;
}

.batch-thread-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.batch-thread-chip:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.batch-thread-chip.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ─── Jobs Pagination ─── */
.jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
  margin-top: auto;
  flex-wrap: wrap;
  gap: 16px;
}

.jobs-pag-info {
  font-size: 13px;
  color: var(--text-muted);
}

.jobs-pag-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jobs-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast) ease;
}

.jobs-pag-btn:hover:not([disabled]) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.jobs-pag-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  font-weight: 600;
}

.jobs-pag-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

.jobs-pag-dots {
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 4px;
}

/* ─── Proxy Status Badges ─── */
.proxy-badge {
  display: inline-inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.proxy-badge.status-active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--emerald);
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}
.proxy-badge.status-dead {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent);
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}
.proxy-badge.status-inactive {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ─── Micro Animations ─── */
.btn-danger-hover:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--accent) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}






/* ═══════════════════════════════════════════════════════════════
   DASHBOARD (simple overview — dash2-*)
   Soft UI Evolution: subtle depth, 200ms transitions, no emoji icons.
   ═══════════════════════════════════════════════════════════════ */
.dash2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Hero */
.dash2-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(139,92,246,0.10), transparent 55%),
    var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.dash2-hero-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dash2-hero-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Status pulse */
.dash2-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.dash2-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
}
.dash2-pulse--ready { color: var(--emerald); border-color: rgba(16,185,129,0.3); }
.dash2-pulse--ready .dash2-pulse-dot { background: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.dash2-pulse--busy { color: var(--purple); border-color: rgba(139,92,246,0.3); }
.dash2-pulse--busy .dash2-pulse-dot { background: var(--purple); animation: dash2Blink 1.2s ease-in-out infinite; }
.dash2-pulse--idle { color: var(--amber); border-color: rgba(245,158,11,0.3); }
.dash2-pulse--idle .dash2-pulse-dot { background: var(--amber); }
@keyframes dash2Blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Section label */
.dash2-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Quick actions */
.dash2-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* Review-waiting banner (clone composites awaiting approval) */
.dash2-review-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.dash2-review-banner:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(139, 92, 246, 0.5);
}
.dash2-review-icon { color: var(--purple); display: flex; flex-shrink: 0; }
.dash2-review-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dash2-review-arrow { color: var(--purple); flex-shrink: 0; }
.dash2-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.dash2-action:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-sm);
}
.dash2-action-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash2-action--accent  .dash2-action-icon { background: var(--accent-soft); color: var(--accent); }
.dash2-action--purple  .dash2-action-icon { background: rgba(139,92,246,0.12); color: var(--purple); }
.dash2-action--cyan    .dash2-action-icon { background: rgba(6,182,212,0.12); color: var(--cyan); }
.dash2-action--emerald .dash2-action-icon { background: rgba(16,185,129,0.12); color: var(--emerald); }
.dash2-action--amber   .dash2-action-icon { background: rgba(245,158,11,0.12); color: var(--amber, #f59e0b); }
.dash2-action-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}
.dash2-action-arrow {
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.dash2-action:hover .dash2-action-arrow { opacity: 1; transform: translateX(0); }

/* Grid: stats + recent */
.dash2-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
  align-items: stretch;
}
.dash2-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.dash2-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dash2-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 200ms ease;
}
.dash2-link:hover { color: var(--accent-hover); }

/* Stat strip */
.dash2-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash2-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dash2-stat:last-child { border-bottom: none; }
.dash2-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash2-stat-value--purple { color: var(--purple); }
.dash2-stat-value--cyan { color: var(--cyan); }
.dash2-stat-value--emerald { color: var(--emerald); }
.dash2-stat-value--accent { color: var(--accent); }
.dash2-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Recent activity */
.dash2-recent {
  display: flex;
  flex-direction: column;
}
.dash2-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 200ms ease;
}
.dash2-recent-row:hover { background: var(--bg-card-hover); }
.dash2-recent-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-muted);
}
.dash2-recent-dot--running { background: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.dash2-recent-dot--queued { background: var(--cyan); }
.dash2-recent-dot--completed { background: var(--emerald); }
.dash2-recent-dot--failed { background: var(--accent); }
.dash2-recent-dot--awaiting_review { background: var(--purple); }
.dash2-recent-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash2-recent-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.dash2-recent-status--running { color: var(--purple); background: rgba(139,92,246,0.12); }
.dash2-recent-status--completed { color: var(--emerald); background: rgba(16,185,129,0.12); }
.dash2-recent-status--failed { color: var(--accent); background: var(--accent-soft); }
.dash2-recent-prog {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.dash2-recent-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

/* Empty state */
.dash2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--text-muted);
  text-align: center;
}
.dash2-empty p { font-size: 13px; }

@media (max-width: 980px) {
  .dash2-actions { grid-template-columns: repeat(2, 1fr); }
  .dash2-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dash2-action, .dash2-action-arrow, .dash2-recent-row, .dash2-link { transition: none; }
  .dash2-pulse--busy .dash2-pulse-dot { animation: none; }
}


/* ═══ LICENSE PAGE ═══ */
.license-page-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.license-page-grid > .card { margin: 0; }
.license-buy-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.license-buy-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.12);
  color: var(--purple);
}
.license-buy-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 200px;
}
.license-buy-title {
  font-size: 15px;
  font-weight: 600;
}
.license-buy-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
.license-buy-card .btn {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .license-buy-card { flex-direction: column; align-items: flex-start; }
  .license-buy-card .btn { width: 100%; }
}


/* ═══ DASHBOARD v2 — KPIs + charts ═══ */
.dash2-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dash2-kpi {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dash2-kpi:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dash2-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash2-kpi-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.dash2-kpi--emerald .dash2-kpi-icon { background: rgba(16,185,129,0.12); color: var(--emerald); }
.dash2-kpi--purple  .dash2-kpi-icon { background: rgba(139,92,246,0.12); color: var(--purple); }
.dash2-kpi--cyan    .dash2-kpi-icon { background: rgba(6,182,212,0.12);  color: var(--cyan); }
.dash2-kpi--amber   .dash2-kpi-icon { background: rgba(245,158,11,0.12); color: var(--amber); }
.dash2-kpi-value {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash2-kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.dash2-kpi-tag {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash2-kpi-tag.up { color: var(--emerald); background: rgba(16,185,129,0.12); }
.dash2-kpi-tag.down { color: var(--accent); background: var(--accent-soft); }

/* Charts row */
.dash2-grid2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.dash2-legend { display: flex; gap: 14px; }
.dash2-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
}
.dash2-legend-item i, .dash2-donut-legend i {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.dash2-areachart {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
  margin-top: 8px;
  flex: 1;
}
.dash2-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.dash2-chart-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.dash2-chart-empty {
  display: flex; align-items: center; justify-content: center;
  height: 150px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Videos-per-day bar chart */
.dash2-daybar-todaytag {
  font-size: 12px;
  color: var(--text-secondary);
}
.dash2-daybar-todaytag b {
  color: var(--emerald);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.dash2-daybars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  min-height: 170px;
  padding-top: 18px;
  margin-top: 4px;
}
.dash2-daybar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  position: relative;
}
.dash2-daybar-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-height: 11px;
}
.dash2-daybar-col {
  width: 100%;
  max-width: 34px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--emerald), rgba(16,185,129,0.55));
  transition: height 400ms ease, background 200ms ease;
  position: relative;
}
.dash2-daybar:hover .dash2-daybar-col {
  background: linear-gradient(180deg, var(--emerald), rgba(16,185,129,0.8));
}
.dash2-daybar.is-today .dash2-daybar-col {
  background: linear-gradient(180deg, var(--accent), rgba(225,29,72,0.6));
}
.dash2-daybar.is-today .dash2-daybar-val { color: var(--accent); }
.dash2-daybar-fail {
  position: absolute;
  top: -3px; right: 50%;
  transform: translateX(50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-card);
}
.dash2-daybar-x {
  font-size: 9px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-height: 11px;
}
.dash2-daystats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.dash2-daystat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.dash2-daystat-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.dash2-daystat-val--emerald { color: var(--emerald); }
.dash2-daystat-val--purple  { color: var(--purple); }
.dash2-daystat-val--cyan    { color: var(--cyan); }
.dash2-daystat-val--amber   { color: var(--amber); }
.dash2-daystat-label {
  font-size: 11px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .dash2-daybar-col { transition: none; }
}

/* Donut */
.dash2-donut-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash2-donut-wrap { margin: 6px 0 12px; }
.dash2-donut-pct {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  fill: var(--text-primary);
}
.dash2-donut-sub { font-size: 9px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dash2-donut-legend {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
}
.dash2-donut-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
}

/* Type breakdown bars */
.dash2-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  justify-content: space-around;
}
.dash2-bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 32px;
  align-items: center;
  gap: 10px;
}
.dash2-bar-label { font-size: 12px; color: var(--text-secondary); }
.dash2-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.dash2-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  transition: width 400ms ease;
}
.dash2-bar-fill--accent  { background: var(--accent); }
.dash2-bar-fill--purple  { background: var(--purple); }
.dash2-bar-fill--cyan    { background: var(--cyan); }
.dash2-bar-fill--emerald { background: var(--emerald); }
.dash2-bar-fill--amber   { background: var(--amber, #f59e0b); }
.dash2-bar-val {
  font-size: 12px; font-weight: 600; text-align: right;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .dash2-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash2-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dash2-kpi, .dash2-bar-fill { transition: none; }
}

/* ─── Motion (Batch) page — reduced motion guard ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .batch-upload-card,
  .batch-upload-placeholder,
  .batch-upload-card:hover,
  .batch-upload-placeholder:hover,
  .batch-upload-placeholder:hover .upload-card-icon,
  .batch-row,
  .batch-row:hover,
  .batch-empty-state-step,
  .batch-empty-state-step:hover,
  .batch-action-btn.primary,
  .batch-action-btn.primary:hover {
    transform: none;
    transition: border-color 0ms, background 0ms, box-shadow 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PAGE — refined section layout (Soft UI Evolution)
   ═══════════════════════════════════════════════════════════════ */
.settings-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.settings-section--wide { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .settings-layout { grid-template-columns: 1fr; }
}

.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.settings-section:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.settings-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.settings-section-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.settings-section-icon svg { width: 20px; height: 20px; }
/* Per-section accent tints */
.settings-section-icon--lang {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(6, 182, 212, 0.04));
  color: var(--cyan);
}
.settings-section-icon--output {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.16), rgba(225, 29, 72, 0.04));
  color: var(--accent);
}
.settings-section-icon--pipeline {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.04));
  color: var(--purple);
}
.settings-section-icon--update {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.04));
  color: var(--emerald);
}

.settings-section-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}
.settings-section-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.settings-section-body {
  padding: 18px 20px;
  flex: 1;
}
.settings-section-body .form-group:last-child { margin-bottom: 0; }
/* — USER AUTH & PROFILE WIDGET STYLES — */
#userProfileWidget {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  margin-right: 2px;
  max-height: 32px;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  color: #ffffff;
  max-height: 30px;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Light mode specific badge overrides */
[data-theme="light"] .user-profile-badge {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.settings-section-body .setting-row {
  border-top: none;
  padding: 12px 14px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.settings-section-body .setting-row:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.settings-section-body .setting-row:last-child { padding-bottom: 12px; }

/* Toggle rows side-by-side in wide sections */
.settings-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.settings-toggle-grid .setting-row {
  margin-top: 0;
  height: 100%;
  align-items: flex-start;
}
.settings-toggle-grid .setting-row .switch { margin-top: 2px; }
.settings-section-body .settings-toggle-grid .setting-row:last-child { padding-bottom: 12px; }

/* Output folder row → align browse/open buttons neatly */
.settings-output-row {
  display: flex;
  gap: 8px;
}
.auth-logout-btn {
  display: none !important;
}
.settings-output-row .form-input { flex: 1; min-width: 0; }

/* Language picker fills the section body width */
.settings-lang-row {
  display: flex;
  gap: 12px;
}

@media (max-width: 640px) {
  .settings-output-row { flex-direction: column; }
  .settings-lang-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-section,
  .settings-section:hover {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION (Batch) page — two-column layout (mirrors Image-to-Video)
   Left: inputs (uploads + pairing list). Right: sticky settings + submit.
   ═══════════════════════════════════════════════════════════════ */
.batch-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}
.batch-layout-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.batch-layout-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}
/* In the side column the cards already carry their own margin via the panel;
   reset the stacking margins the sections used in the old full-width layout. */
.batch-layout-main .batch-upload-grid,
.batch-layout-main .batch-preview-card,
.batch-layout-side .batch-settings-panel {
  margin-bottom: 0;
}

/* Sidebar field rows (label left, control right) — like i2v. */
.batch-side-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.batch-side-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 32px;
}
.batch-side-row-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}
.batch-side-select {
  width: 100%;
  min-width: 90px;
  padding: 6px 28px 6px 10px;
  background-color: var(--bg-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.batch-side-select:focus { outline: none; border-color: var(--purple); }

/* Group sub-labels inside the settings panel. */
.batch-settings-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.batch-settings-group-label svg { opacity: 0.7; }
.batch-settings-group-label--divider {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 12px;
}

/* The settings panel body becomes a vertical stack in the sidebar. */
.batch-layout-side .batch-settings-panel-body {
  gap: 14px;
}

/* Submit + clear, inside the settings panel. */
.batch-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.batch-settings-actions .batch-action-btn {
  width: 100%;
  justify-content: center;
}
.batch-clear-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.batch-clear-link:hover:not(:disabled) {
  color: var(--accent);
  background: var(--accent-soft);
}
.batch-clear-link:disabled { opacity: 0.4; cursor: not-allowed; }

/* Responsive: collapse to a single column on narrow widths. */
@media (max-width: 1024px) {
  .batch-layout { grid-template-columns: 1fr; }
  .batch-layout-side { position: static; }
}

/* — USER AUTH & PROFILE WIDGET STYLES — */
#userProfileWidget {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  margin-right: 4px;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

/* Light mode specific badge overrides */
[data-theme="light"] .user-profile-badge {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.user-role-badge {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
.user-role-badge.admin {
  background: linear-gradient(135deg, #ef4444, #f43f5e);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.user-name {
  font-weight: 600;
  font-size: 12px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-credits {
  color: #d97706;
  font-weight: 700;
  font-size: 11px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.auth-logout-btn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.auth-logout-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.auth-login-trigger-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.auth-login-trigger-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Hide desktop window control buttons (minimize, maximize, close) in Web Mode */
.is-web-mode .titlebar-btn {
  display: none !important;
}

.auth-modal-overlay[hidden],
.auth-error-banner[hidden],
[hidden] {
  display: none !important;
}

/* ═══ AUTHENTICATION MODAL (UI/UX PRO MAX GLASSMORPHISM) ═══ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 16, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  animation: authFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-card-container {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(145deg, rgba(24, 25, 42, 0.95), rgba(14, 15, 27, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 32px 28px 24px 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.15);
  animation: authPopUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes authPopUp {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 20px;
  margin-bottom: 12px;
}

.auth-logo-icon {
  width: 18px;
  height: 18px;
}

.auth-brand-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #f43f5e, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-card-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}

.auth-card-subtitle {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.4;
}

/* Pill Tabs */
.auth-pill-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
}

.auth-tab-pill {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-tab-pill.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.auth-input-group {
  margin-bottom: 16px;
  text-align: left;
}

.auth-input-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  pointer-events: none;
  transition: color 0.2s;
}

.auth-field {
  width: 100%;
  padding: 12px 40px 12px 42px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.auth-toggle-pwd-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.auth-toggle-pwd-btn:hover {
  color: #c084fc;
}

.auth-field:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.auth-field:focus + .auth-input-icon,
.auth-input-wrapper:focus-within .auth-input-icon {
  color: #c084fc;
}

.auth-submit-btn {
  width: 100%;
  padding: 14px;
  margin-top: 8px;
  background: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.35);
  transition: all 0.25s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244, 63, 94, 0.5);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.auth-btn-arrow {
  transition: transform 0.2s;
}
.auth-submit-btn:hover .auth-btn-arrow {
  transform: translateX(4px);
}

.auth-spinner {
  display: inline-flex;
  animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: left;
}

.auth-bonus-banner {
  margin-top: 20px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  color: #fbbf24;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.auth-bonus-icon {
  font-size: 16px;
}

/* ═══ MULTI-PROVIDER SELECTOR BAR ═══ */
.provider-selector-bar {
  display: flex;
  gap: 8px;
  background: var(--bg-secondary);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow-x: auto;
  margin-bottom: 20px;
}

.provider-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.provider-tab-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.provider-tab-btn.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

/* ═══ DATA TABLE & CONTAINER SYSTEM ═══ */
.table-container {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 16px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
}

.data-table th {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background var(--transition-fast);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover td {
  background: var(--bg-card-hover);
}

/* ═══ ADMIN CONTROL PANEL STYLES (NATIVE VIBEFORGE DESIGN SYSTEM) ═══ */
.admin-container {
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.admin-title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.admin-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Tab Bar */
.admin-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow-x: auto;
}

.admin-tab-btn {
  flex: 1;
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.admin-tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.admin-tab-btn.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.admin-subpage {
  display: none;
}
.admin-subpage.active {
  display: block;
  animation: adminFadeIn 0.2s ease;
}

@keyframes adminFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stats Grid & Cards */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
}

.admin-stat-info {
  display: flex;
  flex-direction: column;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 0 0;
}

/* Toolbar Controls */
.admin-toolbar {
  margin-bottom: 16px;
}

.admin-input-search {
  width: 100%;
  max-width: 380px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.admin-input-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.admin-select {
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
}

.admin-select:focus {
  border-color: var(--accent);
}

.btn-xs-action {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-xs-action:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.btn-xs-action.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.provider-tag {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-hover);
  border: 1px solid var(--border-accent);
  letter-spacing: 0.5px;
}

.admin-log-console {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  height: 420px;
  overflow-y: auto;
  color: var(--text-primary);
}

.admin-log-console .log-line {
  margin-bottom: 6px;
  line-height: 1.5;
}
.admin-log-console .log-line.error { color: #f87171; }
.admin-log-console .log-line.warn { color: #fbbf24; }
.admin-log-console .log-line.info { color: #60a5fa; }

/* ═══════════════════════════════════════════
   MEDIA ASSET LIBRARY MODAL (IMAGES SELECTOR)
   ═══════════════════════════════════════════ */
.media-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-modal-backdrop.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.media-modal-card {
  width: 92%;
  max-width: 860px;
  height: 82vh;
  max-height: 720px;
  background: #0f111a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(139, 92, 246, 0.15);
  overflow: hidden;
  animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.media-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.media-modal-tabs {
  display: flex;
  gap: 8px;
}

.media-modal-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.media-modal-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.media-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.media-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.media-modal-upload-btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 24px !important;
  padding: 6px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.media-modal-upload-btn:hover {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.media-modal-close-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.media-modal-close-icon:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.media-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}

.media-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.media-grid-card {
  position: relative;
  background: #151824;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
}

.media-grid-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.media-grid-card.is-selected {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4), 0 8px 24px rgba(139, 92, 246, 0.3);
}

.media-card-thumb {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  background: #090a10;
}

.media-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-grid-card:hover .media-card-thumb img {
  transform: scale(1.04);
}

.media-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s ease;
}

.media-grid-card.is-selected .media-card-check {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.6);
}

.media-card-delete-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.15s ease;
  z-index: 10;
}

.media-grid-card:hover .media-card-delete-btn {
  opacity: 1;
  transform: scale(1);
}

.media-card-delete-btn:hover {
  background: #e11d48;
  border-color: #e11d48;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.5);
}

.media-card-name {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(0, 0, 0, 0.3);
}

.media-modal-loading, .media-modal-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
  padding: 40px 20px;
}

.media-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.media-modal-footer-info {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.media-modal-footer-btns {
  display: flex;
  gap: 10px;
}

/* Light Mode Theme Overrides for Media Library Modal */
[data-theme="light"] .media-modal-backdrop {
  background: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .media-modal-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .media-modal-header {
  background: #FFFFFF;
  border-bottom-color: #E2E8F0;
}

[data-theme="light"] .media-modal-title {
  color: #0F172A;
}

[data-theme="light"] .media-modal-tab {
  background: #F1F5F9;
  border-color: #E2E8F0;
  color: #475569;
}

[data-theme="light"] .media-modal-tab:hover {
  background: #E2E8F0;
  color: #0F172A;
}

[data-theme="light"] .media-modal-tab.is-active {
  background: #0F172A;
  border-color: #0F172A;
  color: #FFFFFF;
}

[data-theme="light"] .media-modal-upload-btn {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}

[data-theme="light"] .media-modal-body {
  background: #F8FAFC;
}

[data-theme="light"] .media-modal-footer {
  background: #FFFFFF;
  border-top-color: #E2E8F0;
}

[data-theme="light"] .media-grid-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

[data-theme="light"] .media-grid-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .media-grid-card.is-selected {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
}

[data-theme="light"] .media-card-name {
  background: #FFFFFF;
  color: #0F172A;
  border-top: 1px solid #F1F5F9;
}

[data-theme="light"] #mediaModalSelectedCount {
  color: #64748B !important;
}

[data-theme="light"] .media-modal-loading,
[data-theme="light"] .media-modal-empty {
  color: #64748B;
}

/* ═══════════════════════════════════════════════════════════════
   PAYOS VIETQR DEPOSIT MODAL (GLASSMORPHISM PRO MAX)
   ═══════════════════════════════════════════════════════════════ */
.deposit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 16, 0.82);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  padding: 16px;
  animation: depositFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes depositFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.deposit-modal-container {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 94vh;
  background: linear-gradient(145deg, rgba(22, 24, 40, 0.96), rgba(12, 13, 24, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 28px 32px 28px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), 0 0 50px rgba(245, 158, 11, 0.12);
  overflow-y: auto;
  animation: depositPopUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes depositPopUp {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.deposit-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.deposit-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  transform: rotate(90deg);
}

.deposit-header {
  text-align: center;
  margin-bottom: 22px;
}
.deposit-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 10px;
}
.deposit-carrot-badge-icon {
  font-size: 16px;
}
.deposit-brand-title {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.deposit-title {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
}
.deposit-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* Success Card */
.deposit-success-screen {
  text-align: center;
  padding: 40px 20px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  animation: depositFadeIn 0.4s ease;
}
.deposit-confetti-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  top: -10px;
  animation: confettiFall 2.5s ease-out infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(350px) rotate(720deg); opacity: 0; }
}
.deposit-success-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
  animation: bounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bounceIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.deposit-success-check {
  width: 36px;
  height: 36px;
  stroke: #ffffff;
}
.deposit-success-title {
  font-size: 24px;
  font-weight: 800;
  color: #10b981;
  margin: 0 0 6px 0;
}
.deposit-success-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
}
.deposit-success-badge {
  display: inline-block;
  font-size: 32px;
  font-weight: 900;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 6px 24px;
  border-radius: 20px;
  margin-bottom: 24px;
}
.deposit-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Two Column Layout */
.deposit-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .deposit-content-grid {
    grid-template-columns: 1fr;
  }
}

.deposit-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

/* Packages Grid */
.deposit-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.deposit-pkg-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.deposit-pkg-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}
.deposit-pkg-card.active {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.06));
  border-color: #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}
.deposit-pkg-card.popular {
  border-color: rgba(139, 92, 246, 0.5);
}
.deposit-pkg-card.popular.active {
  border-color: #8b5cf6;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25);
}

.deposit-pkg-badge-popular {
  position: absolute;
  top: -8px;
  right: 10px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}
.deposit-pkg-badge-bonus {
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
}
.deposit-pkg-badge-norm {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
}

.deposit-pkg-price {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  margin-top: 2px;
}
.deposit-pkg-carrots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.deposit-pkg-carrot-icon {
  font-size: 14px;
}
.deposit-pkg-carrot-num/* Desktop/Mobile Auth Button & KPI Label Text Toggle */
.auth-btn-desktop, .kpi-label-desktop { display: inline-block; }
.auth-btn-mobile, .kpi-label-mobile { display: none; }
.auth-login-trigger-btn { white-space: nowrap !important; }

/* Dashboard Wallet Row Flex Header */
.dash2-hero-wallet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.dash2-hero-wallet-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.dash2-hero-deposit-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(225, 29, 72, 0.15));
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--amber);
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dash2-hero-deposit-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(225, 29, 72, 0.25));
}

@media (max-width: 768px) {
  .auth-btn-desktop, .kpi-label-desktop { display: none !important; }
  .auth-btn-mobile, .kpi-label-mobile { display: inline-block !important; }

  /* Deposit Modal Close Button & Brand Header Safety */
  .deposit-header {
    padding-right: 44px !important;
  }

  .deposit-brand-badge {
    max-width: calc(100% - 10px) !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }

  .deposit-close-btn {
    top: 12px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    z-index: 10 !important;
  }

  .dash2-pulse {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }
}

/* Custom Amount Box */
.deposit-custom-amount-box {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.deposit-custom-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.deposit-custom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.deposit-live-estimate {
  font-size: 12px;
  color: var(--text-muted);
}
.deposit-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.deposit-field {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 50px 10px 14px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s ease;
}
.deposit-field:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.deposit-currency-tag {
  position: absolute;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.deposit-rate-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.4;
}

.deposit-notice-card {
  display: flex;
  gap: 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 12px;
  color: #f59e0b;
  line-height: 1.45;
}
.deposit-notice-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* Right Column: QR Card */
.deposit-qr-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deposit-qr-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  background: #ffffff;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  margin-bottom: 12px;
}
.deposit-qr-img {
  width: 100%;
  height: 100%;
  object-contain: contain;
  border-radius: 10px;
}
.deposit-qr-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  color: #3b82f6;
  font-size: 11px;
  font-weight: 600;
}
.deposit-qr-spinner svg {
  animation: spin 1s linear infinite;
}

.deposit-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 14px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.deposit-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.deposit-status-text {
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
}

.deposit-info-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deposit-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.deposit-info-row.memo-row {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.deposit-info-row.reward-row {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.deposit-info-label {
  color: var(--text-muted);
  font-size: 11px;
}
.deposit-info-val {
  font-weight: 700;
  color: #ffffff;
  font-family: monospace;
}
.deposit-info-val.bank {
  color: #38bdf8;
  font-family: inherit;
}
.deposit-info-val.highlight {
  color: #fbbf24;
  font-size: 13px;
}
.deposit-info-val.amount {
  color: #34d399;
  font-size: 13px;
}
.deposit-info-val.memo {
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.deposit-info-val.carrot {
  color: #f59e0b;
  font-size: 14px;
  font-family: inherit;
}

.deposit-info-copy-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.deposit-copy-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.deposit-copy-btn:hover {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}
.deposit-copy-btn.memo {
  background: #f59e0b;
  color: #000;
  border-color: #f59e0b;
}
.deposit-copy-btn.memo:hover {
  background: #d97706;
  color: #fff;
}

.deposit-qr-error {
  margin-top: 10px;
  font-size: 11px;
  color: #ef4444;
  text-align: center;
}

/* User deposit header button */
.user-deposit-header-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  transition: all 0.2s ease;
}
.user-deposit-header-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.dash2-hero-deposit-btn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #f59e0b;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
  transition: all 0.2s ease;
}
.dash2-hero-deposit-btn:hover {
  background: #f59e0b;
  color: #000;
  transform: translateY(-1px);
}

/* Desktop/Mobile Auth Button Text Toggle */
.auth-btn-desktop { display: inline-block; }
.auth-btn-mobile { display: none; }
.auth-login-trigger-btn { white-space: nowrap !important; }

@media (max-width: 768px) {
  .auth-btn-desktop { display: none !important; }
  .auth-btn-mobile { display: inline-block !important; }

  /* Prevent Safari Auto Zoom on input focus */
  input, select, textarea, .auth-field, .deposit-field {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* Titlebar Mobile Safe Header */
  .titlebar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(44px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .titlebar-name {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
  }

  .titlebar-logo svg {
    width: 20px !important;
    height: 20px !important;
  }

  .titlebar-controls {
    gap: 4px !important;
  }

  .user-profile-badge {
    padding: 2px 6px !important;
    max-height: 28px !important;
    gap: 4px !important;
    font-size: 10px !important;
  }

  .user-name {
    max-width: 55px !important;
  }

  .user-deposit-header-btn {
    display: none !important;
  }

  .lang-toggle, .theme-toggle {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    padding: 0 !important;
    min-height: 28px !important;
  }

  .auth-login-trigger-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
  }

  /* Page Titles & Subtitles Scaling */
  .page-title, .dash2-title, .grok-title, .jobs-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .page-subtitle, .dash2-subtitle, .jobs-subtitle {
    font-size: 11px !important;
  }

  /* Filter Chips & Pills */
  .jobs-chip, .grok-pill-item {
    font-size: 11px !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
  }

  /* Responsive Modals (Auth Modal, Deposit Modal, Media Library) */
  .auth-card-container,
  .deposit-modal-container,
  .media-library-container {
    width: 94% !important;
    max-width: 480px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    padding: 14px !important;
  }

  .deposit-content-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .deposit-packages-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Grid Layouts on Pages */
  .grid-2, .grid-3, .grid-4, .dashboard-grid, .clone-models-grid, .jobs-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Cards & Containers */
  .card, .page-container, .form-container {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}

/* Small Smartphone Screen (max-width: 480px) */
@media (max-width: 480px) {
  .deposit-packages-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-pill-tabs {
    flex-direction: row !important;
  }

  .titlebar-name {
    font-size: 11px !important;
  }
}

.pulse-glow {
  animation: pulseGlow 1s ease-in-out 2;
}
.deposit-checkout-ext-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transition: all 0.2s ease;
}
.deposit-checkout-ext-btn:hover {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.5);
  color: #ffffff;
}

/* ═══ MOBILE & IPHONE RESPONSIVE STYLING (PRO MAX) ═══ */

/* Mobile Bottom Navigation (Hidden on Desktop) */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(13, 13, 20, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 8px;
  transition: all 0.2s ease;
  flex: 1;
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
  color: var(--accent, #f43f5e);
}

.mobile-nav-item.active svg {
  stroke: var(--accent, #f43f5e);
  transform: translateY(-2px);
}

/* Responsive Media Queries for Mobile & Tablets (max-width: 768px) */
@media (max-width: 768px) {
  /* Hide Desktop Titlebar window controls & Desktop Sidebar */
  .titlebar-controls .titlebar-btn {
    display: none !important;
  }

  .sidebar {
    display: none !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
  }

  /* Adjust Main Layout */
  .main-layout {
    display: flex;
    flex-direction: column;
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  main.content {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .grok-submit-btn {
    height: 48px;
    font-size: 15px;
    border-radius: 16px;
  }
}

/* ═══════════════════════════════════════════
   UNAUTHENTICATED DEPOSIT LOCK CARD STYLES
   ═══════════════════════════════════════════ */
.deposit-unauth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.deposit-unauth-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6 0%, #E11D48 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
  margin-bottom: 4px;
}

.deposit-unauth-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary, #F8FAFC);
  margin: 0;
  letter-spacing: -0.2px;
}

.deposit-unauth-desc {
  font-size: 13px;
  color: var(--text-secondary, #94A3B8);
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

.deposit-unauth-btn {
  margin-top: 8px;
  width: 100%;
  max-width: 260px;
  height: 46px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #8B5CF6 0%, #E11D48 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.4);
  transition: all 0.25s ease;
}

.deposit-unauth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
  filter: brightness(1.1);
}

[data-theme="light"] .deposit-unauth-title {
  color: #0F172A !important;
}

[data-theme="light"] .deposit-unauth-desc {
  color: #475569 !important;
}

@media (max-width: 768px) {
  /* Prevent Safari Auto Zoom on input focus */
  input, select, textarea, .auth-field, .deposit-field {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* Titlebar Mobile Safe Header */
  .titlebar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Responsive Modals (Auth Modal, Deposit Modal, Media Library) */
  .auth-card-container,
  .deposit-modal-container,
  .media-library-container {
    width: 94% !important;
    max-width: 480px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    padding: 16px !important;
  }

  .deposit-content-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .deposit-packages-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Grid Layouts on Pages */
  .grid-2, .grid-3, .grid-4, .dashboard-grid, .clone-models-grid, .jobs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Cards & Forms */
  .card, .page-container, .form-container {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Touch targets minimum 44px */
  button, .btn, .nav-item, .auth-submit-btn, .deposit-copy-btn, .i2v-bulk-prompt-box {
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* Small Smartphone Screen (max-width: 480px) */
@media (max-width: 480px) {
  .deposit-packages-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-pill-tabs {
    flex-direction: row !important;
  }

  .titlebar-name {
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════
   LIGHT/DARK THEME MOBILE BOTTOM NAV FIXES
   ═══════════════════════════════════════════ */
.i2v-bulk-prompt-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .grok-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .grok-setting-label {
  color: #475569 !important;
}

[data-theme="light"] .grok-pill-item {
  background: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] .grok-pill-item:hover {
  background: #E2E8F0 !important;
  color: #0F172A !important;
}

[data-theme="light"] .grok-pill-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(220, 38, 38, 0.1)) !important;
  color: #7C3AED !important;
  border-color: #7C3AED !important;
}

[data-theme="light"] .grok-dropzone {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

[data-theme="light"] .batch-upload-placeholder {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .batch-upload-placeholder:hover {
  background: #F1F5F9 !important;
  border-color: #7C3AED !important;
}

[data-theme="light"] .upload-card-title {
  color: #0F172A !important;
}

[data-theme="light"] .upload-card-desc {
  color: #64748B !important;
}

[data-theme="light"] .upload-card-formats {
  color: #94A3B8 !important;
}

[data-theme="light"] .i2v-bulk-prompt-box {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.mobile-bottom-nav {
  background: var(--bg-card, rgba(13, 13, 20, 0.94)) !important;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
}

[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .mobile-nav-item {
  color: #64748B !important;
}

[data-theme="light"] .mobile-nav-item.active,
[data-theme="light"] .mobile-nav-item:hover {
  color: var(--accent, #E11D48) !important;
}

/* ═══════════════════════════════════════════
   GROK IMAGINE STYLE - IMAGE TO VIDEO UI
   ═══════════════════════════════════════════ */
.grok-i2v-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  width: 100%;
}

.grok-card {
  background: var(--bg-card, #0a0a1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  position: relative;
}

.grok-card-glow {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.15), inset 0 0 1px rgba(255, 255, 255, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
}

.grok-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.grok-pill-item {
  padding: 7px 15px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-secondary, #94A3B8);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.grok-pill-item:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #F8FAFC);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}

.grok-pill-item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(225, 29, 72, 0.25));
  color: #FFFFFF;
  border-color: var(--purple, #8B5CF6);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.35);
}

/* Grok Responsive Layout Overrides */
@media (max-width: 1024px) {
  .grok-i2v-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .grok-card {
    padding: 14px;
    border-radius: 14px;
  }

  .grok-dropzone {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .grok-pill-group {
    gap: 6px;
  }

  .grok-pill-item {
    padding: 6px 12px;
    font-size: 11px;
  }

  .grok-setting-field {
    gap: 6px;
    margin-bottom: 12px;
  }

  .grok-submit-btn {
    height: 48px;
    font-size: 15px;
    border-radius: 16px;
  }

  /* Media Library Mobile Responsive */
  .media-modal-card {
    width: 95vw !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 16px !important;
  }

  .media-modal-header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .media-modal-title {
    font-size: 14px !important;
  }

  .media-modal-tabs {
    gap: 4px !important;
  }

  .media-modal-tab {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .media-modal-upload-btn {
    padding: 5px 12px !important;
    font-size: 11px !important;
  }

  .media-modal-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .media-modal-footer {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .media-modal-footer-info {
    font-size: 11px !important;
  }

  .media-modal-footer-btns .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .media-modal-title {
    display: none !important;
  }
  .media-modal-header {
    justify-content: space-between !important;
  }
}

.grok-setting-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.grok-setting-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #94A3B8);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.grok-dropzone {
  border: 2px dashed rgba(139, 92, 246, 0.3);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.grok-dropzone:hover {
  border-color: var(--purple, #8B5CF6);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.2);
}

.grok-image-card {
  background: var(--bg-card, #0a0a1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: all 0.2s ease;
}

.grok-submit-btn {
  width: 100%;
  height: 46px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #8B5CF6 0%, #E11D48 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  transition: all 0.25s ease;
}

.grok-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(139, 92, 246, 0.6);
  filter: brightness(1.1);
}

.grok-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

[data-theme="light"] .grok-card {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .grok-pill-item {
  background: #F1F5F9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

[data-theme="light"] .grok-pill-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(220, 38, 38, 0.15)) !important;
  color: #7C3AED !important;
  border-color: #7C3AED !important;
}

[data-theme="light"] .grok-dropzone {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

/* ═══════════════════════════════════════════
   ACCOUNT HUB DASHBOARD STYLES
   ═══════════════════════════════════════════ */
.account-hub-container {
  padding: 4px;
}

.account-hub-nav {
  display: flex;
  background: var(--bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 9999px;
  padding: 4px;
  margin-bottom: 18px;
  gap: 4px;
}

.account-hub-tab-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-secondary, #94A3B8);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.account-hub-tab-btn:hover {
  color: var(--text-primary, #F8FAFC);
}

.account-hub-tab-btn.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(225, 29, 72, 0.25));
  color: #FFFFFF;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.3);
}

.account-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card, #0a0a1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 14px;
  text-align: left;
}

.account-avatar-glow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #E11D48);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  flex-shrink: 0;
}

.account-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-user-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #F8FAFC);
  margin: 0;
}

.account-user-email {
  font-size: 12px;
  color: var(--text-muted, #64748B);
}

.account-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple, #8B5CF6);
  display: inline-block;
  width: fit-content;
  margin-top: 4px;
}

.account-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.account-stat-card {
  background: var(--bg-card, #0a0a1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
}

.account-stat-label {
  font-size: 11px;
  color: var(--text-muted, #64748B);
  margin-bottom: 4px;
}

.account-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #F8FAFC);
}

.account-stat-value.carrot {
  color: var(--amber, #F59E0B);
}

.account-tx-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.account-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-card, #0a0a1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  text-align: left;
}

.account-tx-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #F8FAFC);
}

.account-tx-date {
  font-size: 10px;
  color: var(--text-muted, #64748B);
  margin-top: 2px;
}

.account-tx-amount {
  font-size: 13px;
  font-weight: 700;
}

.account-tx-amount.positive { color: var(--emerald, #10B981); }
.account-tx-amount.negative { color: var(--accent, #E11D48); }

/* Light Mode Overrides for Account Hub */
[data-theme="light"] .account-hub-nav {
  background: #F1F5F9 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .account-hub-tab-btn {
  color: #475569 !important;
}

[data-theme="light"] .account-hub-tab-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.25), rgba(220, 38, 38, 0.18)) !important;
  color: #7C3AED !important;
}

[data-theme="light"] .account-profile-header,
[data-theme="light"] .account-stat-card,
[data-theme="light"] .account-tx-row {
  background: #F8FAFC !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Grok Responsive Layout Overrides */
@media (max-width: 1024px) {
  .grok-i2v-container {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .grok-card {
    padding: 14px;
    border-radius: 14px;
  }

  .grok-dropzone {
    padding: 20px 14px;
    border-radius: 12px;
  }

  .grok-pill-group {
    gap: 6px;
  }

  .grok-pill-item {
    padding: 6px 12px;
    font-size: 11px;
  }

  .grok-setting-field {
    gap: 6px;
    margin-bottom: 12px;
  }

  .grok-submit-btn {
    height: 48px;
    font-size: 15px;
    border-radius: 16px;
  }
}