/* ================================================================
   TubeRank Pro — Custom Styles v5.0 (Second-pass redesign)
   All new CSS classes used by index.html v2 (premium redesign)
   Tailwind handles utility classes; this file covers:
     - Layout primitives (sidebar, main-area, overlay)
     - Glassmorphism (glass-dark, glass-sidebar)
     - Navigation (nav-item, nav-label, nav-icon)
     - Cards (card, kpi-card, kpi-* variants)
     - Buttons (btn-brand, btn-ghost)
     - Tags (tag, tag-* variants)
     - Forms (field, field-icon, slider)
     - Typography (grad, page-title, page-sub, section-title)
     - States (skel, spinner, fade-in, score-ring, empty-state)
     - Charts (chart-wrap)
     - Info boxes (info-box, warn-box, error-box)
     - Toast, channel avatar, thumb card, page system
     - Mobile responsive + light mode overrides
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════════ */
:root {
  --brand:        #f43f5e;
  --brand-light:  #fb7185;
  --brand-dark:   #e11d48;
  --bg:           #07070e;
  --bg-card:      rgba(255,255,255,.035);
  --bg-sidebar:   rgba(12,12,22,.96);
  --border:       rgba(255,255,255,.07);
  --border-soft:  rgba(255,255,255,.04);
  --text:         #cbd5e1;
  --text-muted:   #64748b;
  --sidebar-w:    240px;
  --radius-card:  18px;
  --radius-btn:   12px;
  --transition:   .2s cubic-bezier(.4,0,.2,1);
}

body.light {
  --bg:           #f1f5f9;
  --bg-card:      rgba(255,255,255,.85);
  --bg-sidebar:   rgba(255,255,255,.97);
  --border:       rgba(0,0,0,.08);
  --border-soft:  rgba(0,0,0,.05);
  --text:         #1e293b;
  --text-muted:   #94a3b8;
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* scrollbar-thin utility */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(244,63,94,.25) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(244,63,94,.25); border-radius: 2px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT — SIDEBAR + MAIN
══════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-w);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Hardware-accelerated smooth slide */
  transition: transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
  will-change: transform;
}

.main-area {
  min-height: 100vh;
  /* On desktop: offset by sidebar width */
  margin-left: var(--sidebar-w);
}

/* ── Mobile: drawer hidden off-canvas ───────────────────────── */
@media (max-width: 767px) {
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
    visibility: hidden;          /* keep off accessibility tree */
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 4px 0 40px rgba(0,0,0,.6);
  }
  .main-area { margin-left: 0; }
}

/* Sidebar backdrop overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;                  /* just below sidebar */
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s ease;
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
  animation: overlayFadeIn .28s ease forwards;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   GLASSMORPHISM
══════════════════════════════════════════════════════════════ */
.glass-dark {
  background: rgba(15,15,28,.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.light .glass-dark {
  background: rgba(255,255,255,.9);
  border-color: var(--border);
}
body.light .glass-sidebar {
  background: var(--bg-sidebar);
  border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
.nav-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding: 0 8px;
  margin-bottom: 4px;
  display: block;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  line-height: 1.2;
  /* Mobile: prevent 300ms tap delay & ensure tap target size */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(244,63,94,.15);
  user-select: none;
  min-height: 40px;
}
/* Active feedback on touch */
.nav-item:active { background: rgba(244,63,94,.08); color: #fb7185; }

.nav-item:hover {
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
}

.nav-item.active {
  background: rgba(244,63,94,.12);
  color: #fb7185;
  font-weight: 600;
}

.nav-item.active .nav-icon {
  filter: drop-shadow(0 0 5px rgba(244,63,94,.5));
}

body.light .nav-item { color: #64748b; }
body.light .nav-item:hover { background: rgba(0,0,0,.05); color: #1e293b; }
body.light .nav-item.active { background: rgba(244,63,94,.08); color: var(--brand); }

.nav-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: .85rem;
  color: inherit;
}

/* Logo glow */
.logo-glow {
  box-shadow: 0 0 12px rgba(244,63,94,.5), 0 0 30px rgba(244,63,94,.15);
}

/* ══════════════════════════════════════════════════════════════
   PAGE SYSTEM (tab switching)
══════════════════════════════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; animation: fadeUp .3s ease both; }

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

.page-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.page-sub {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

body.light .page-title { color: #0f172a; }

/* ══════════════════════════════════════════════════════════════
   GRADIENT TEXT UTILITY
══════════════════════════════════════════════════════════════ */
.grad {
  background: linear-gradient(135deg, #f43f5e, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.light .card {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════════════════════ */
.kpi-card {
  border-radius: var(--radius-card);
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Accent stripe — top edge */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Color variants */
.kpi-red   { background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(244,63,94,.02)); }
.kpi-red::before   { background: linear-gradient(90deg, #f43f5e, #fb7185); }

.kpi-blue  { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.02)); }
.kpi-blue::before  { background: linear-gradient(90deg, #3b82f6, #60a5fa); }

.kpi-green { background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(34,197,94,.02)); }
.kpi-green::before { background: linear-gradient(90deg, #22c55e, #4ade80); }

.kpi-amber { background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); }
.kpi-amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.kpi-purple { background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(139,92,246,.02)); }
.kpi-purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.kpi-cyan  { background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(6,182,212,.02)); }
.kpi-cyan::before  { background: linear-gradient(90deg, #06b6d4, #22d3ee); }

.kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kpi-label i { font-size: .75rem; }

.kpi-red   .kpi-label i { color: #fb7185; }
.kpi-blue  .kpi-label i { color: #60a5fa; }
.kpi-green .kpi-label i { color: #4ade80; }
.kpi-amber .kpi-label i { color: #fbbf24; }
.kpi-purple .kpi-label i { color: #a78bfa; }
.kpi-cyan  .kpi-label i { color: #22d3ee; }

.kpi-val {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-val.text-xl { font-size: 1.3rem; }

body.light .kpi-val { color: #0f172a; }

/* ══════════════════════════════════════════════════════════════
   SECTION TITLE
══════════════════════════════════════════════════════════════ */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
}
.section-title i { font-size: .85rem; }

body.light .section-title { color: #1e293b; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-weight: 700;
  font-size: .84rem;
  border: none;
  cursor: pointer;
  transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 16px rgba(244,63,94,.3);
  white-space: nowrap;
}
.btn-brand:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244,63,94,.4);
}
.btn-brand:active { transform: translateY(0); filter: brightness(.95); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: transparent;
  color: #94a3b8;
  font-weight: 600;
  font-size: .84rem;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  border-color: rgba(255,255,255,.15);
}

body.light .btn-ghost {
  border-color: rgba(0,0,0,.12);
  color: #64748b;
}
body.light .btn-ghost:hover {
  background: rgba(0,0,0,.04);
  color: #1e293b;
}

/* ══════════════════════════════════════════════════════════════
   TAGS / CHIPS
══════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: .73rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: filter var(--transition), transform var(--transition), background var(--transition);
  line-height: 1.3;
  text-decoration: none;
}
.tag:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tag i     { font-size: .7rem; }

/* Variants */
.tag-gray   { background: rgba(255,255,255,.06); color: #94a3b8; border-color: rgba(255,255,255,.07); }
.tag-brand  { background: rgba(244,63,94,.12);   color: #fb7185; border-color: rgba(244,63,94,.2);   }
.tag-blue   { background: rgba(59,130,246,.12);  color: #60a5fa; border-color: rgba(59,130,246,.2);  }
.tag-green  { background: rgba(34,197,94,.12);   color: #4ade80; border-color: rgba(34,197,94,.2);   }
.tag-amber  { background: rgba(245,158,11,.12);  color: #fbbf24; border-color: rgba(245,158,11,.2);  }
.tag-orange { background: rgba(251,146,60,.12);  color: #fb923c; border-color: rgba(251,146,60,.2);  }
.tag-cyan   { background: rgba(6,182,212,.12);   color: #22d3ee; border-color: rgba(6,182,212,.2);   }
.tag-purple { background: rgba(139,92,246,.12);  color: #a78bfa; border-color: rgba(139,92,246,.2);  }

body.light .tag-gray { background: rgba(0,0,0,.05); color: #64748b; border-color: rgba(0,0,0,.08); }

/* ══════════════════════════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════════════════════════ */
.field {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  color: #e2e8f0;
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.field::placeholder { color: var(--text-muted); }
.field:focus {
  border-color: rgba(244,63,94,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(244,63,94,.1);
}

body.light .field {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}
body.light .field:focus {
  border-color: #f43f5e;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(244,63,94,.08);
}

/* Field with left icon */
.field-icon {
  position: relative;
}
.field-icon-i {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .82rem;
  pointer-events: none;
  z-index: 1;
}

/* Range slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244,63,94,.25);
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition);
}
.slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f43f5e;
  border: none;
  box-shadow: 0 0 0 3px rgba(244,63,94,.25);
}
.slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgba(244,63,94,.5) var(--val, 0%), rgba(255,255,255,.08) var(--val, 0%));
  border-radius: 3px;
  height: 6px;
}

body.light .slider { background: #e2e8f0; }
body.light .slider::-webkit-slider-runnable-track { background: linear-gradient(to right, rgba(244,63,94,.4) var(--val,0%), #e2e8f0 var(--val,0%)); }

/* ══════════════════════════════════════════════════════════════
   ALERT / INFO BOXES
══════════════════════════════════════════════════════════════ */
.info-box, .warn-box, .error-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .8rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.info-box  { background: rgba(59,130,246,.08);  border-color: rgba(59,130,246,.2);  color: #93c5fd; }
.warn-box  { background: rgba(245,158,11,.07);  border-color: rgba(245,158,11,.2);  color: #fbbf24; }
.error-box { background: rgba(239,68,68,.08);   border-color: rgba(239,68,68,.2);   color: #fca5a5; }

.info-box  i { color: #60a5fa; }
.warn-box  i { color: #fbbf24; }
.error-box i { color: #f87171; }

body.light .info-box  { background: rgba(59,130,246,.06);  border-color: rgba(59,130,246,.2);  color: #1d4ed8; }
body.light .warn-box  { background: rgba(245,158,11,.06);  border-color: rgba(245,158,11,.2);  color: #b45309; }
body.light .error-box { background: rgba(239,68,68,.06);   border-color: rgba(239,68,68,.2);   color: #b91c1c; }

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════════════════════ */
.skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

body.light .skel {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease infinite;
}

/* ══════════════════════════════════════════════════════════════
   SPINNER
══════════════════════════════════════════════════════════════ */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.06);
  border-top-color: #f43f5e;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

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

body.light .spinner { border-color: rgba(0,0,0,.08); border-top-color: #f43f5e; }

/* ══════════════════════════════════════════════════════════════
   FADE IN + PAGE ANIMATION
══════════════════════════════════════════════════════════════ */
.fade-in { animation: fadeUp .35s ease both; }

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

/* ══════════════════════════════════════════════════════════════
   CHART WRAPPER
══════════════════════════════════════════════════════════════ */
.chart-wrap {
  position: relative;
  height: 220px;
}
.chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   SCORE RING (SEO Audit)
══════════════════════════════════════════════════════════════ */
.score-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 900;
  border: 4px solid;
  animation: scorePulse .55s cubic-bezier(.4,0,.2,1) both;
}

.score-ring-good   { color: #4ade80; border-color: rgba(34,197,94,.5);   box-shadow: 0 0 24px rgba(34,197,94,.25);  }
.score-ring-fair   { color: #fbbf24; border-color: rgba(245,158,11,.5);  box-shadow: 0 0 24px rgba(245,158,11,.25); }
.score-ring-poor   { color: #f87171; border-color: rgba(239,68,68,.5);   box-shadow: 0 0 24px rgba(239,68,68,.25);  }

@keyframes scorePulse {
  0%   { transform: scale(.8); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}

.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #e2e8f0;
  margin: 0 0 8px;
}

.empty-sub {
  font-size: .82rem;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}

body.light .empty-title { color: #1e293b; }

/* ══════════════════════════════════════════════════════════════
   CHANNEL AVATAR
══════════════════════════════════════════════════════════════ */
.ch-avatar {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  object-fit: cover;
  border: 3px solid rgba(244,63,94,.3);
  box-shadow: 0 0 20px rgba(244,63,94,.15);
  transition: box-shadow .3s;
}
.ch-avatar:hover { box-shadow: 0 0 32px rgba(244,63,94,.3); }

/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */
.toast-el {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  transform: translateY(80px);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  background: rgba(15,15,28,.95);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.toast-el.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.light .toast-el {
  background: rgba(255,255,255,.95);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════════════
   THUMBNAIL CARD
══════════════════════════════════════════════════════════════ */
.thumb-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.thumb-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.35); }

.thumb-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.thumb-card:hover::after { transform: translateX(100%); }

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.7));
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   COMPARISON BARS
══════════════════════════════════════════════════════════════ */
.cmp-bar {
  height: 8px;
  border-radius: 4px;
  min-width: 4px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   VIDEO TABLE UTILITIES
══════════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,63,94,.2) transparent;
}

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #fb7185; }
th.sort-asc::after  { content: ' ↑'; color: #fb7185; }
th.sort-desc::after { content: ' ↓'; color: #fb7185; }

/* ══════════════════════════════════════════════════════════════
   KEYWORD TABLE SCROLL
══════════════════════════════════════════════════════════════ */
#kw-table-wrap {
  max-height: 420px;
  overflow-y: auto;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,63,94,.3) transparent;
}

/* ══════════════════════════════════════════════════════════════
   DOWNLOADER QUALITY BADGES
══════════════════════════════════════════════════════════════ */
.quality-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.quality-4k    { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.3); }
.quality-1080  { background: rgba(34,197,94,.12);  color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.quality-720   { background: rgba(59,130,246,.12);  color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.quality-480   { background: rgba(245,158,11,.12);  color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.quality-360   { background: rgba(100,116,139,.1);  color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
.quality-audio { background: rgba(6,182,212,.12);   color: #22d3ee; border: 1px solid rgba(6,182,212,.25); }

/* ══════════════════════════════════════════════════════════════
   TIP BADGE
══════════════════════════════════════════════════════════════ */
.tip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 900;
  background: rgba(251,146,60,.15);
  color: #fb923c;
  border: 1px solid rgba(251,146,60,.25);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   KEYWORD SCORE BAR
══════════════════════════════════════════════════════════════ */
.kw-score-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #f43f5e, #fb923c);
}

/* ══════════════════════════════════════════════════════════════
   QUOTA ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes quotaWarn {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.quota-warn-pulse { animation: quotaWarn 2s ease infinite; }

/* ══════════════════════════════════════════════════════════════
   COPY POP ANIMATION
══════════════════════════════════════════════════════════════ */
@keyframes copyPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.copy-pop { animation: copyPop .2s ease; }

/* ══════════════════════════════════════════════════════════════
   ANIMATED COUNTER
══════════════════════════════════════════════════════════════ */
.counter-anim { transition: all .8s cubic-bezier(.4,0,.2,1); }

/* ══════════════════════════════════════════════════════════════
   SEO CHECKLIST
══════════════════════════════════════════════════════════════ */
.ck-item:has(input:checked) label {
  text-decoration: line-through;
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════════
   SECTION DIVIDER
══════════════════════════════════════════════════════════════ */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.08), transparent);
  margin: 20px 0;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE TABLES
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .table-responsive th:nth-child(n+4),
  .table-responsive td:nth-child(n+4) { display: none; }
  .page-title { font-size: 1.3rem; }
  .kpi-val    { font-size: 1.3rem; }
  .empty-state { padding: 40px 16px; }
  .toast-el { bottom: 12px; right: 12px; left: 12px; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES (component-level)
══════════════════════════════════════════════════════════════ */
body.light .kpi-red    { background: linear-gradient(135deg,rgba(244,63,94,.05),rgba(244,63,94,.01)); }
body.light .kpi-blue   { background: linear-gradient(135deg,rgba(59,130,246,.05),rgba(59,130,246,.01)); }
body.light .kpi-green  { background: linear-gradient(135deg,rgba(34,197,94,.05),rgba(34,197,94,.01)); }
body.light .kpi-amber  { background: linear-gradient(135deg,rgba(245,158,11,.05),rgba(245,158,11,.01)); }
body.light .kpi-purple { background: linear-gradient(135deg,rgba(139,92,246,.05),rgba(139,92,246,.01)); }
body.light .kpi-cyan   { background: linear-gradient(135deg,rgba(6,182,212,.05),rgba(6,182,212,.01)); }

body.light .tag-gray   { background: rgba(0,0,0,.05); color: #64748b; border-color: rgba(0,0,0,.09); }
body.light .tag-brand  { background: rgba(244,63,94,.07); color: #e11d48; }
body.light .tag-blue   { background: rgba(59,130,246,.07); color: #2563eb; }
body.light .tag-green  { background: rgba(34,197,94,.07); color: #16a34a; }
body.light .tag-amber  { background: rgba(245,158,11,.07); color: #d97706; }
body.light .tag-orange { background: rgba(251,146,60,.07); color: #ea580c; }
body.light .tag-cyan   { background: rgba(6,182,212,.07); color: #0891b2; }
body.light .tag-purple { background: rgba(139,92,246,.07); color: #7c3aed; }

body.light .section-title { color: #0f172a; }
body.light .empty-title   { color: #0f172a; }

body.light .thumb-card  { background: #fff; border-color: rgba(0,0,0,.08); }
body.light .nav-label   { color: #94a3b8; }

/* Mob quota badge */
#mob-quota { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════
   CHIP — BACKWARD COMPAT (used by app.js dynamic rendering)
   Maps to the new .tag system visually
══════════════════════════════════════════════════════════════ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: filter .15s, transform .15s;
  line-height: 1.3;
}
.chip:hover { filter: brightness(1.12); transform: translateY(-1px); }

.chip-gray   { background: rgba(255,255,255,.06); color: #94a3b8; border-color: rgba(255,255,255,.07); }
.chip-brand, .chip-red { background: rgba(244,63,94,.12); color: #fb7185; border-color: rgba(244,63,94,.2); }
.chip-blue   { background: rgba(59,130,246,.12);  color: #60a5fa; border-color: rgba(59,130,246,.2);  }
.chip-green  { background: rgba(34,197,94,.12);   color: #4ade80; border-color: rgba(34,197,94,.2);   }
.chip-amber, .chip-yellow { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.2); }
.chip-orange { background: rgba(251,146,60,.12);  color: #fb923c; border-color: rgba(251,146,60,.2);  }
.chip-cyan   { background: rgba(6,182,212,.12);   color: #22d3ee; border-color: rgba(6,182,212,.2);   }
.chip-purple { background: rgba(139,92,246,.12);  color: #a78bfa; border-color: rgba(139,92,246,.2);  }

body.light .chip-gray   { background: rgba(0,0,0,.05); color: #64748b; border-color: rgba(0,0,0,.09); }
body.light .chip-brand, 
body.light .chip-red    { background: rgba(244,63,94,.07); color: #e11d48; }
body.light .chip-blue   { background: rgba(59,130,246,.07); color: #2563eb; }
body.light .chip-green  { background: rgba(34,197,94,.07); color: #16a34a; }
body.light .chip-purple { background: rgba(139,92,246,.07); color: #7c3aed; }
body.light .chip-orange { background: rgba(251,146,60,.07); color: #ea580c; }
body.light .chip-cyan   { background: rgba(6,182,212,.07); color: #0891b2; }

/* ── Table Row Hover ────────────────────────────────────── */
.tr-h:hover { background: rgba(255,255,255,.025); }
body.light .tr-h:hover { background: rgba(0,0,0,.025); }

/* ── i18n RTL Support ───────────────────────────────────── */
[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .sidebar.open { transform: translateX(0); visibility: visible; }
[dir="rtl"] .main-area { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] .nav-icon { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .page-header { direction: rtl; }
[dir="rtl"] .field-icon-i { left: auto; right: 10px; }
[dir="rtl"] .field.pl-9 { padding-left: 0.75rem; padding-right: 2.5rem; }
[dir="rtl"] .section-title { direction: rtl; }
[dir="rtl"] .section-title i { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .kpi-label { direction: rtl; }
[dir="rtl"] .empty-state { direction: rtl; }
@media (max-width: 767px) {
  [dir="rtl"] .sidebar { right: 0; left: auto; transform: translateX(100%); visibility: hidden; }
  [dir="rtl"] .sidebar.open { transform: translateX(0); visibility: visible; }
  [dir="rtl"] .main-area { margin-right: 0; }
}

/* ── Language Switcher ─────────────────────────────────── */
.lang-opt { color: #94a3b8; text-align: left; }
.lang-opt:hover { color: #fff; }
body.light .lang-opt { color: #64748b; }
body.light .lang-opt:hover { color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════
   AI VIDEO CREATOR — Workspace styles
═══════════════════════════════════════════════════════════════ */

/* Stepper */
.aic-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2px 2px;
}
.aic-stepper::-webkit-scrollbar { display: none; }

.aic-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: all .2s;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.aic-step:hover { color: #94a3b8; background: rgba(255,255,255,.04); }
.aic-step.active {
  color: #fff;
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.25);
}
.aic-step-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  transition: all .2s;
}
.aic-step.active .aic-step-dot {
  background: #f43f5e;
  color: #fff;
  box-shadow: 0 0 12px rgba(244,63,94,.4);
}
.aic-step.done .aic-step-dot {
  background: rgba(34,197,94,.2);
  color: #4ade80;
}
.aic-step.done { color: #4ade80; }

.aic-step-line {
  flex: 1; min-width: 24px; max-width: 60px;
  height: 1px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* Panel */
.aic-panel { min-height: 0; }

/* Script textarea */
.aic-textarea {
  width: 100%;
  min-height: 260px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
  font-family: inherit;
  transition: border-color .2s;
}
.aic-textarea:focus { border-color: rgba(244,63,94,.4); }
.aic-textarea::placeholder { color: #475569; }
body.light .aic-textarea { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); color: #1e293b; }
body.light .aic-textarea::placeholder { color: #94a3b8; }

/* Voice cards */
.aic-voice-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex; align-items: center; gap: 8px;
}
.aic-voice-card:hover { border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.06); }
.aic-voice-card.selected { border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.1); }
.aic-voice-card .vc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}

/* Scene items */
.aic-scene-item {
  display: flex; align-items: flex-start; gap-3;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  transition: all .15s;
}
.aic-scene-item:hover { border-color: rgba(255,255,255,.12); }
.aic-scene-num {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(139,92,246,.15);
  color: #a78bfa;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.aic-scene-thumb {
  width: 72px; height: 44px; border-radius: 8px;
  background: rgba(255,255,255,.05);
  object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.aic-scene-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aic-scene-thumb i { color: #475569; }

/* Upload zone */
.aic-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px;
  border: 1.5px dashed rgba(255,255,255,.1);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  min-height: 80px;
}
.aic-upload-zone:hover { border-color: rgba(244,63,94,.4); background: rgba(244,63,94,.04); }

/* Stock thumbnail */
.aic-stock-item {
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  position: relative;
}
.aic-stock-item:hover { border-color: rgba(244,63,94,.5); transform: scale(1.02); }
.aic-stock-item img { width: 100%; height: 100%; object-fit: cover; }
.aic-stock-item.selected { border-color: #f43f5e; box-shadow: 0 0 0 2px rgba(244,63,94,.3); }

/* Preview frame */
.aic-preview-frame {
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  display: flex; flex-direction: column;
}
.aic-preview-slide {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.aic-preview-content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  width: 100%;
}
.aic-preview-text {
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  line-height: 1.4;
  max-width: 80%;
}
.aic-preview-bg {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  z-index: 0;
}
.aic-preview-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}
.aic-preview-content { position: relative; z-index: 2; }

.aic-playbar {
  display: flex; align-items: center; gap-3: 10px;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
}
.aic-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f43f5e;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  transition: all .15s;
}
.aic-play-btn:hover { background: #e11d48; transform: scale(1.05); }

/* Thumb strip */
.aic-thumb-item {
  width: 80px; height: 50px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent;
  transition: all .15s;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #64748b;
}
.aic-thumb-item.active { border-color: #f43f5e; }
.aic-thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* Export button */
.aic-export-btn {
  display: flex; align-items: center; gap-3;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.aic-export-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* Duration btn active */
.aic-dur-btn.active { background: rgba(244,63,94,.15); color: #fb7185; border-color: rgba(244,63,94,.3); }

/* Light mode */
body.light .aic-step { color: #94a3b8; }
body.light .aic-step:hover { color: #64748b; background: rgba(0,0,0,.04); }
body.light .aic-step-line { background: rgba(0,0,0,.1); }
body.light .aic-scene-item { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .aic-voice-card { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .aic-upload-zone { border-color: rgba(0,0,0,.12); }
body.light .aic-export-btn { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
body.light .aic-preview-frame { border-color: rgba(0,0,0,.12); }

/* ═══════════════════════════════════════════════════════════════
   BLOG — Card & article styles
═══════════════════════════════════════════════════════════════ */

/* Category chip active */
.blog-cat-btn { transition: all .15s; }
.blog-cat-btn.active { background: rgba(244,63,94,.15); color: #fb7185; border-color: rgba(244,63,94,.3); }

/* Article card */
.blog-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  display: flex; flex-direction: column;
}
.blog-card:hover {
  border-color: rgba(244,63,94,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(244,63,94,.08);
}
.blog-card-img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-img .blog-cat-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.blog-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.blog-card-title {
  font-size: 14px; font-weight: 700;
  color: #fff; line-height: 1.45;
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-excerpt {
  font-size: 12px; color: #64748b;
  line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1; margin-bottom: 12px;
}
.blog-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; color: #475569;
}

/* Featured article */
.blog-featured-card {
  border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: all .2s;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .blog-featured-card { grid-template-columns: 1fr; } }
.blog-featured-card:hover { border-color: rgba(244,63,94,.4); box-shadow: 0 20px 60px rgba(244,63,94,.1); }
.blog-featured-img { aspect-ratio: 16/10; overflow: hidden; }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.04); }
.blog-featured-body { padding: 28px 28px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) { .blog-featured-body { padding: 20px; } }

/* Blog modal */
.blog-modal-inner {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
  animation: fadeUp .3s ease both;
}
body.light .blog-modal-inner { background: #fff; border-color: rgba(0,0,0,.1); }
.blog-body { font-size: 14px; line-height: 1.8; color: #94a3b8; }
.blog-body h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 20px 0 8px; }
.blog-body p { margin-bottom: 12px; }
.blog-body ul { padding-left: 20px; margin-bottom: 12px; list-style: disc; }
.blog-body li { margin-bottom: 4px; }
.blog-body strong { color: #e2e8f0; }
.blog-body code { font-size: 12px; background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 5px; color: #fb7185; font-family: monospace; }
body.light .blog-body { color: #475569; }
body.light .blog-body h3 { color: #0f172a; }
body.light .blog-body code { background: rgba(0,0,0,.06); }

body.light .blog-card { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); }
body.light .blog-card-title { color: #0f172a; }
body.light .blog-card-excerpt { color: #94a3b8; }
body.light .blog-featured-card { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }

/* ── Blog category badge (standalone) ── */
.blog-cat-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(244,63,94,.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* ── Blog featured card using background-image div ── */
.blog-featured-img[style*="background-image"] {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 200px;
  border-radius: 16px 0 0 16px;
}
@media (max-width: 640px) {
  .blog-featured-img[style*="background-image"] {
    border-radius: 16px 16px 0 0;
    min-height: 180px;
  }
}

/* ── Blog card img using background-image div ── */
.blog-card-img[style*="background-image"] {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* ── aic-preview-content flex center ── */
.aic-preview-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 100%;
  transition: background-image .5s ease;
}

/* ════════════════════════════════════════════════════════
   AUTH — pages auth, login/register card
   ════════════════════════════════════════════════════════ */

/* Auth page wrapper — centré verticalement */
/* ════════════════════════════════════════════════════════
   AUTH PAGE
   ════════════════════════════════════════════════════════ */

.auth-page-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 8rem);
  padding: 2rem 0;
}

/* Card */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(244,63,94,.06);
}

/* Tab switcher */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.auth-tab {
  padding: .5rem 1rem;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  transition: all .2s;
  border: none;
  background: transparent;
  cursor: pointer;
}
.auth-tab:hover:not(.auth-tab-active) { color: #cbd5e1; background: rgba(255,255,255,.04); }
.auth-tab-active {
  background: rgba(244,63,94,.18);
  color: #fb7185;
  box-shadow: 0 1px 6px rgba(244,63,94,.18);
}

/* Label */
.auth-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .375rem;
}

/* Field group */
.auth-field-group { display: flex; flex-direction: column; }

/* Eye-toggle button inside password field */
.auth-eye-btn {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color .15s;
}
.auth-eye-btn:hover { color: #cbd5e1; }

/* Error / success inline boxes */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .625rem .875rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.4;
}
.auth-error i { margin-top: 1px; }

/* Password strength bar */
.pwd-strength-wrap { display: flex; align-items: center; gap: .5rem; }
.pwd-strength-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}
.pwd-strength-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease, background-color .3s ease;
  background: #ef4444;
}
.pwd-strength-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  min-width: 44px;
  text-align: right;
  transition: color .3s;
}

/* Strength color states (applied via JS class on fill) */
.pwd-strength-fill.weak   { background: #ef4444; }
.pwd-strength-fill.fair   { background: #f97316; }
.pwd-strength-fill.good   { background: #eab308; }
.pwd-strength-fill.strong { background: #22c55e; }

/* Free plan perks grid */
.auth-perks {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.auth-perk {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: 11px;
  color: #94a3b8;
  padding: .25rem 0;
}
.auth-perk i { width: 12px; text-align: center; font-size: 10px; flex-shrink: 0; }

/* Sidebar avatar initials */
#sidebar-avatar, #mob-avatar {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.02em;
  user-select: none;
}

/* Shake animation for auth errors */
@keyframes auth-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.auth-shake { animation: auth-shake .35s ease; }

/* ════════════════════════════════════════════════════════
   PLAN CARDS — Pricing page
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   PRICING & PLAN CARDS
   ════════════════════════════════════════════════════════ */

/* Save badge next to annual toggle */
.pricing-save-badge {
  background: rgba(244,63,94,.15);
  color: #fb7185;
  border: 1px solid rgba(244,63,94,.25);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-left: .25rem;
  animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%,100% { opacity: 1; }
  50%      { opacity: .65; }
}

/* Billing toggle switch */
.pricing-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.pricing-toggle input { opacity: 0; width: 0; height: 0; }
.pricing-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  transition: .3s;
}
.pricing-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: #94a3b8;
  border-radius: 50%;
  transition: .3s;
}
.pricing-toggle input:checked + .pricing-toggle-slider { background: rgba(244,63,94,.4); }
.pricing-toggle input:checked + .pricing-toggle-slider::before { transform: translateX(20px); background: #fb7185; }

/* Plan cards */
.plan-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.plan-card:hover {
  border-color: rgba(244,63,94,.28);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.plan-card-popular {
  border-color: rgba(244,63,94,.55);
  background: rgba(244,63,94,.055);
  box-shadow: 0 0 0 1px rgba(244,63,94,.2), 0 20px 60px rgba(244,63,94,.12);
}
.plan-card-popular:hover {
  box-shadow: 0 0 0 1px rgba(244,63,94,.35), 0 24px 72px rgba(244,63,94,.2);
}
.plan-card-studio {
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.04);
}
.plan-card-studio:hover {
  border-color: rgba(168,85,247,.6);
  box-shadow: 0 16px 48px rgba(168,85,247,.15);
}

/* Plan badge chips */
.plan-badge-free {
  background: rgba(148,163,184,.12);
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,.2);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.plan-badge-pro {
  background: rgba(244,63,94,.15);
  color: #fb7185;
  border: 1px solid rgba(244,63,94,.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.plan-badge-studio {
  background: rgba(168,85,247,.15);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

/* "Most Popular" ribbon (Pro — rose/orange gradient) */
.plan-badge-ribbon {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  background: linear-gradient(135deg, #f43f5e, #fb923c);
  color: white;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 16px rgba(244,63,94,.45);
  white-space: nowrap;
}
/* "Best Value" ribbon override (Studio — violet gradient) */
.plan-card-studio .plan-badge-ribbon {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 4px 16px rgba(168,85,247,.45);
}
/* Light-mode plan cards */
body.light .plan-card {
  background: #fff;
  border-color: #e2e8f0;
}
body.light .plan-card:hover {
  border-color: rgba(244,63,94,.3);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
body.light .plan-card-popular {
  border-color: rgba(244,63,94,.5);
  background: rgba(244,63,94,.04);
  box-shadow: 0 0 0 1px rgba(244,63,94,.2), 0 12px 40px rgba(244,63,94,.1);
}
body.light .plan-card-studio {
  border-color: rgba(168,85,247,.4);
  background: rgba(168,85,247,.03);
}
body.light .plan-feature-list li  { color: #475569; }
body.light .plan-badge-free        { background: rgba(148,163,184,.15); color: #64748b; }
body.light .plan-badge-pro         { background: rgba(244,63,94,.1);    color: #e11d48; }
body.light .plan-badge-studio      { background: rgba(168,85,247,.1);   color: #7c3aed; }
body.light .compare-table          { background: #fff; }
body.light .compare-group-row td   { background: #f1f5f9; color: #475569; }
body.light .compare-row:hover      { background: rgba(244,63,94,.03); }
body.light .compare-feature        { color: #334155; }
body.light .compare-cell           { color: #475569; }
body.light .compare-th-popular     { background: rgba(244,63,94,.06); }

/* Plan feature list */
.plan-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.plan-feature-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 12px;
  color: #94a3b8;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.plan-feature-list li:last-child { border-bottom: none; }
.plan-feature-list li.feature-highlight { color: #e2e8f0; font-weight: 600; }
.plan-feature-list li.feature-locked    { color: #475569; text-decoration: line-through; opacity: .55; }
.plan-feature-list li .feat-icon        { width: 14px; text-align: center; flex-shrink: 0; }

/* ── Feature comparison table ────────────────────────────────── */
.compare-table { border-collapse: collapse; min-width: 540px; }
.compare-table th, .compare-table td { padding: .6rem .75rem; text-align: center; }
.compare-th-feature { text-align: left; width: 40%; }
.compare-th {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.compare-th-popular {
  background: rgba(244,63,94,.05);
  border-radius: 8px 8px 0 0;
  color: #fb7185;
}
.compare-group-row td {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  padding: .9rem .75rem .4rem;
  text-align: left;
  border-top: 1px solid rgba(255,255,255,.05);
}
.compare-row td { border-bottom: 1px solid rgba(255,255,255,.04); }
.compare-feature {
  text-align: left;
  font-size: 12px;
  color: #94a3b8;
}
.compare-cell { font-size: 13px; }
.compare-cell-popular { background: rgba(244,63,94,.04); }
.compare-yes   { color: #22c55e; }
.compare-no    { color: #334155; font-size: 11px; }
.compare-limit {
  background: rgba(255,255,255,.06);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.compare-unlimited {
  background: rgba(34,197,94,.1);
  color: #4ade80;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}

/* FAQ items — collapsible <details> */
.faq-item { padding: .125rem 0; }
.faq-summary {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  cursor: pointer;
  padding: .75rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
  color: #475569;
  transition: transform .2s;
  flex-shrink: 0;
}
details[open] .faq-summary::after  { transform: rotate(-180deg); }
details[open] .faq-summary         { color: #fb7185; }
.faq-answer {
  font-size: 12px;
  color: #64748b;
  padding: 0 0 .875rem;
  line-height: 1.6;
}

/* Plan detail grid on profile */
.plan-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.plan-detail-item {
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: .75rem;
}
.plan-detail-item .plan-detail-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .25rem;
}
.plan-detail-item .plan-detail-value {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
}

/* ════════════════════════════════════════════════════════
   PRO GATE OVERLAY
   ════════════════════════════════════════════════════════ */

.pro-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(7,7,14,.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.pro-gate-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(251,161,133,.2);
  border-radius: 28px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 0 60px rgba(244,63,94,.15), 0 32px 64px rgba(0,0,0,.5);
  animation: fadeInUp .35s ease;
}

/* ════════════════════════════════════════════════════════
   16:9 STUDIO — AI Video Creator full widescreen layout
   ════════════════════════════════════════════════════════ */

/* Force le canvas preview en 16:9 */
.studio-16-9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.studio-16-9-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vmaker-style 3-column layout */
.studio-layout {
  display: grid;
  grid-template-columns: 52px 240px 1fr;
  gap: 0;
  height: calc(100vh - 180px);
  min-height: 480px;
  background: #0d0d18;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 1024px) {
  .studio-layout { grid-template-columns: 1fr; height: auto; }
}

/* Left icon sidebar */
.studio-sidebar-icons {
  background: #080810;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .75rem 0;
  gap: .25rem;
}
.studio-icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #64748b;
  font-size: 14px;
  transition: all .2s;
  cursor: pointer;
  border: none;
  background: transparent;
}
.studio-icon-btn:hover, .studio-icon-btn.active { background: rgba(244,63,94,.12); color: #fb7185; }

/* Middle asset panel */
.studio-asset-panel {
  background: #0a0a16;
  border-right: 1px solid rgba(255,255,255,.06);
  overflow-y: auto;
  padding: .75rem;
}

/* Main canvas area */
.studio-canvas-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.studio-canvas-top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06060f;
  padding: 1.5rem;
  min-height: 0;
}
.studio-timeline {
  height: 110px;
  background: #080810;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow-x: auto;
  padding: .5rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.studio-track {
  height: 28px;
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  gap: .375rem;
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.studio-track-video  { border-left: 3px solid #fb7185; }
.studio-track-audio  { border-left: 3px solid #34d399; }
.studio-track-text   { border-left: 3px solid #60a5fa; }

/* Filmstrip clips */
.studio-clip {
  position: absolute;
  top: 4px; bottom: 4px;
  border-radius: 4px;
  display: flex; align-items: center;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.studio-clip-video { background: rgba(251,113,133,.25); border: 1px solid rgba(251,113,133,.4); }
.studio-clip-audio { background: rgba(52,211,153,.2);  border: 1px solid rgba(52,211,153,.35); }
.studio-clip-text  { background: rgba(96,165,250,.2);  border: 1px solid rgba(96,165,250,.35); }

/* ════════════════════════════════════════════════════════
   STUDIO HEADER BAR — step pills + credits badge
   ════════════════════════════════════════════════════════ */
.studio-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .625rem 1rem;
  background: #080810;
  border-bottom: 1px solid rgba(255,255,255,.06);
  border-radius: 16px 16px 0 0;
  flex-wrap: wrap;
}
.studio-header-logo {
  font-size: 13px;
  font-weight: 700;
  color: #fb7185;
  letter-spacing: -.3px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.studio-step-pills {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}
.studio-pill {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .65rem;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: transparent;
  border: 1px solid transparent;
  transition: all .2s;
  cursor: default;
  white-space: nowrap;
}
.studio-pill.active {
  color: #fb7185;
  background: rgba(244,63,94,.1);
  border-color: rgba(244,63,94,.25);
}
.studio-pill.done {
  color: #22c55e;
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.2);
}
.studio-pill-num {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: currentColor;
  color: #080810;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.studio-pill-sep {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,.1);
}

/* Credits badge in header */
.studio-credits-badge {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}
.studio-credits-badge:hover { background: rgba(251,191,36,.14); }

/* ════════════════════════════════════════════════════════
   ASSET PANEL — sub-panels (ap-panel)
   ════════════════════════════════════════════════════════ */
.ap-panel { display: flex; flex-direction: column; gap: .625rem; }
.ap-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .125rem;
}
.ap-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
}
.ap-section-label {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .25rem;
}
.ap-divider {
  height: 1px;
  background: rgba(255,255,255,.05);
  margin: .25rem 0;
}

/* ════════════════════════════════════════════════════════
   STUDIO CANVAS — script overlay + textarea
   ════════════════════════════════════════════════════════ */
.studio-script-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: flex-start;
  padding: .75rem;
  z-index: 10;
  backdrop-filter: blur(2px);
  border-radius: 12px;
  transition: opacity .25s;
}
.studio-script-overlay.hidden {
  display: none;
}
.studio-script-ta {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.65;
  font-family: 'Courier New', monospace;
  caret-color: #fb7185;
}
.studio-script-ta::placeholder { color: rgba(255,255,255,.25); }

/* ════════════════════════════════════════════════════════
   STUDIO STATS BAR — bottom info below canvas
   ════════════════════════════════════════════════════════ */
.studio-stats-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .375rem .75rem;
  background: rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.studio-stat {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}
.studio-stat strong { color: #94a3b8; font-weight: 700; }
.studio-stat-sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.08);
}
.studio-16-9-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  color: #334155;
  letter-spacing: .05em;
  background: rgba(255,255,255,.04);
  padding: .15rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════════════════════
   STUDIO PLAYBAR
   ════════════════════════════════════════════════════════ */
.studio-playbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem;
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.05);
}
.studio-playbar-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #94a3b8;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .18s;
}
.studio-playbar-btn:hover { background: rgba(244,63,94,.15); color: #fb7185; }
.studio-playbar-btn.play-main {
  width: 34px; height: 34px;
  background: rgba(244,63,94,.15);
  border-color: rgba(244,63,94,.3);
  color: #fb7185;
}
.studio-playbar-btn.play-main:hover { background: rgba(244,63,94,.28); }
.studio-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
}
.studio-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#fb7185,#f97316);
  border-radius: 99px;
  width: 0%;
  transition: width .1s;
}
.studio-timecode {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
  font-family: monospace;
}

/* ════════════════════════════════════════════════════════
   THUMBNAIL STRIP
   ════════════════════════════════════════════════════════ */
#aic-thumb-strip {
  display: flex;
  gap: .375rem;
  padding: .5rem .75rem;
  overflow-x: auto;
  background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.04);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.thumb-item {
  flex-shrink: 0;
  width: 64px;
  height: 36px; /* 16:9 */
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.08);
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
  cursor: pointer;
  transition: border-color .18s;
  position: relative;
  overflow: hidden;
}
.thumb-item.active { border-color: #fb7185; }
.thumb-item:hover  { border-color: rgba(244,63,94,.45); }
.thumb-item-num {
  position: absolute;
  bottom: 1px; left: 3px;
  font-size: 7px;
  font-weight: 800;
  color: rgba(255,255,255,.5);
}

/* ════════════════════════════════════════════════════════
   TIMELINE HEADER
   ════════════════════════════════════════════════════════ */
.studio-timeline-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .25rem .125rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: .25rem;
}
.studio-timeline-head-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #334155;
}

/* ════════════════════════════════════════════════════════
   BG COLOR SWATCHES
   ════════════════════════════════════════════════════════ */
.aic-bg-swatch {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: transform .18s, border-color .18s;
  flex-shrink: 0;
}
.aic-bg-swatch:hover  { transform: scale(1.2); border-color: rgba(255,255,255,.5); }
.aic-bg-swatch.active { border-color: #fb7185; transform: scale(1.1); }
.aic-swatches-row {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

/* ════════════════════════════════════════════════════════
   EXPORT PANEL — gated items (SRT / Scenes = Studio only)
   ════════════════════════════════════════════════════════ */
.aic-export-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.aic-export-btn:hover:not(.aic-export-gated) {
  background: rgba(244,63,94,.08);
  border-color: rgba(244,63,94,.25);
  color: #fb7185;
}
.aic-export-gated {
  opacity: .45;
  cursor: not-allowed;
  position: relative;
}
.aic-export-gated.unlocked {
  opacity: 1;
  cursor: pointer;
}
.aic-export-gated.unlocked:hover {
  background: rgba(168,85,247,.08);
  border-color: rgba(168,85,247,.3);
  color: #c084fc;
}
.aic-export-plan-tag {
  margin-left: auto;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: rgba(168,85,247,.15);
  color: #c084fc;
  border: 1px solid rgba(168,85,247,.25);
}

/* Voice segment rows in asset panel */
.aic-seg-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .5rem;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  color: #64748b;
}
.aic-seg-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(244,63,94,.12);
  color: #fb7185;
  font-size: 9px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aic-seg-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: 10px;
}

/* Media grid in asset panel */
.aic-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .375rem;
}
.aic-media-item {
  aspect-ratio: 16/9;
  border-radius: 7px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #334155;
  cursor: pointer;
  transition: border-color .18s;
  overflow: hidden;
}
.aic-media-item:hover { border-color: rgba(244,63,94,.35); }
.aic-media-item img { width:100%; height:100%; object-fit:cover; }

/* Upload zone */
.aic-upload-zone {
  border: 2px dashed rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 1.25rem .5rem;
  text-align: center;
  color: #334155;
  font-size: 11px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.aic-upload-zone:hover {
  border-color: rgba(244,63,94,.3);
  color: #fb7185;
}

/* Voice card in asset panel */
.aic-voice-card-sm {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: all .2s;
}
.aic-voice-card-sm:hover  { border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.05); }
.aic-voice-card-sm.active { border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.08); }
.aic-voice-avatar-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.aic-voice-info-sm { flex: 1; overflow: hidden; }
.aic-voice-name-sm {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aic-voice-meta-sm {
  font-size: 9px;
  color: #475569;
  white-space: nowrap;
}

/* Transition select */
.aic-select-sm {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 11px;
  padding: .35rem .5rem;
  outline: none;
  cursor: pointer;
}
.aic-select-sm:focus { border-color: rgba(244,63,94,.4); }

/* Range sliders in asset panel */
.aic-range {
  width: 100%;
  accent-color: #fb7185;
  cursor: pointer;
}

/* Scene preview in canvas */
#aic-preview-content {
  text-align: center;
  padding: 1.5rem;
  max-width: 90%;
}
#aic-preview-scene-label {
  font-size: clamp(10px, 1.8vw, 14px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .5rem;
}
#aic-preview-text {
  font-size: clamp(12px, 2.2vw, 18px);
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — header button + dropdown
   ════════════════════════════════════════════════════════ */
.lang-switcher-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
  font-size: 12px;
}
.lang-switcher-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}
body.light .lang-switcher-btn {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.1);
  color: #334155;
}
body.light .lang-switcher-btn:hover {
  background: rgba(0,0,0,.08);
  color: #0f172a;
}

.lang-dropdown-menu {
  position: absolute;
  z-index: 200;
  width: 148px;
  background: rgba(15,15,28,.96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  overflow: hidden;
  backdrop-filter: blur(20px);
  /* default: align to right of trigger */
  right: 0;
}
body.light .lang-dropdown-menu {
  background: rgba(255,255,255,.97);
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.lang-opt-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
}
.lang-opt-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.lang-opt-item.active { color: #fb7185; background: rgba(244,63,94,.07); }
body.light .lang-opt-item { color: #64748b; }
body.light .lang-opt-item:hover { background: rgba(0,0,0,.05); color: #0f172a; }
body.light .lang-opt-item.active { color: #e11d48; background: rgba(244,63,94,.06); }

/* Checkmark for active option */
.lang-opt-item.active::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 9px;
  color: #fb7185;
}

/* ════════════════════════════════════════════════════════
   RTL SUPPLEMENTARY — studio, auth, layout
   ════════════════════════════════════════════════════════ */

/* Auth page */
[dir="rtl"] .auth-page-wrap { direction: rtl; }
[dir="rtl"] .auth-error { direction: rtl; }
[dir="rtl"] .pwd-strength-wrap { direction: rtl; }
[dir="rtl"] .auth-perks { direction: rtl; }
[dir="rtl"] .auth-eye-btn { right: auto; left: .75rem; }

/* Pricing cards */
[dir="rtl"] .plan-badge-ribbon { right: auto; left: 1.25rem; }
[dir="rtl"] .compare-feature { text-align: right; }
[dir="rtl"] .faq-summary::after { margin-right: auto; margin-left: 0; }

/* Studio layout */
[dir="rtl"] .studio-layout {
  grid-template-columns: 1fr 240px 52px;
}
[dir="rtl"] .studio-sidebar-icons {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.06);
  order: 3;
}
[dir="rtl"] .studio-asset-panel {
  border-right: none;
  border-left: 1px solid rgba(255,255,255,.06);
  order: 2;
}
[dir="rtl"] .studio-canvas-area { order: 1; }
[dir="rtl"] .studio-credits-badge { direction: rtl; }
[dir="rtl"] .studio-step-pills { direction: rtl; }
[dir="rtl"] .studio-stats-bar { direction: rtl; }
[dir="rtl"] .ap-panel { direction: rtl; }
[dir="rtl"] .ap-panel-head { direction: rtl; }
[dir="rtl"] .studio-header { direction: rtl; }

/* Sidebar in RTL */
[dir="rtl"] .lang-switcher-btn { direction: rtl; }
[dir="rtl"] .lang-dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .lang-opt-item { text-align: right; direction: rtl; }
[dir="rtl"] .lang-opt-item.active::after { margin-left: 0; margin-right: auto; }

/* Cards + modals */
[dir="rtl"] .card { direction: rtl; }
[dir="rtl"] .modal-inner { direction: rtl; }
[dir="rtl"] .user-dropdown { direction: rtl; }

/* Nav icon spacing RTL */
[dir="rtl"] .nav-item .nav-icon { margin-right: 0; margin-left: .5rem; }

/* Desktop topbar RTL */
[dir="rtl"] #desktop-topbar { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] #lang-switcher-desktop .lang-dropdown-menu { right: auto; left: 0; }

/* ── Auto-Clean Widget (profile page) ─────────────────────────── */
#autoclean-widget details summary { list-style: none; }
#autoclean-widget details summary::-webkit-details-marker { display: none; }
#ac-history::-webkit-scrollbar { width: 4px; }
#ac-history::-webkit-scrollbar-thumb { background: #334155; border-radius: 9px; }
.ac-log-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: .5rem;
  background: rgba(255,255,255,.02);
  font-size: .65rem;
  color: #94a3b8;
}
.ac-log-row .ac-log-by {
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .6rem;
}
.ac-log-row .ac-log-count {
  margin-left: auto;
  color: #e2e8f0;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   VideoExpress-style AI Studio Dashboard  ▸ TubeRank dark edition
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero wrapper ─────────────────────────────────────────────── */
.vex-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #06081a 0%, #0b0f24 35%, #080d1e 65%, #060a18 100%);
  border-radius: 28px;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid rgba(99,102,241,.18);
  box-shadow:
    0 0 0 1px rgba(6,182,212,.06),
    0 0 120px rgba(99,102,241,.12),
    0 32px 80px rgba(0,0,0,.6);
}

/* floating ambient orbs */
.vex-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.vex-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(99,102,241,.11) 0%, transparent 70%);
  top: -160px; left: -120px;
  animation: vex-orb-drift 12s ease-in-out infinite;
}
.vex-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 70%);
  top: 20px; right: -100px;
  animation: vex-orb-drift 15s ease-in-out infinite reverse;
}
.vex-orb-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(244,63,94,.07) 0%, transparent 70%);
  bottom: -80px; left: 38%;
  animation: vex-orb-drift 10s ease-in-out infinite 3s;
}
@keyframes vex-orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px,-15px) scale(1.04); }
  66%      { transform: translate(-12px,10px) scale(.97); }
}

/* grid dot pattern overlay */
.vex-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* all children above orbs */
.vex-hero > *:not(.vex-orb) { position: relative; z-index: 1; }

/* ── Logo row ────────────────────────────────────────────────── */
.vex-logo-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.6rem;
}
.vex-logo-icon {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.55), 0 0 0 2px rgba(99,102,241,.2);
  flex-shrink: 0;
}
.vex-logo-badge {
  position: absolute;
  top: -6px; right: -7px;
  background: linear-gradient(135deg,#f59e0b,#f97316);
  color: #fff;
  font-size: .48rem; font-weight: 900;
  padding: .12rem .35rem;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(249,115,22,.5);
}
.vex-logo-name { font-size: 1.2rem; font-weight: 900; color: #f1f5f9; letter-spacing: -.01em; }
.vex-logo-ai   { font-size: 1.2rem; font-weight: 900; color: #818cf8; }

/* Credits pill */
.vex-credits-pill {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .78rem;
  backdrop-filter: blur(8px);
}
.vex-upgrade-btn {
  background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(249,115,22,.15));
  border: 1px solid rgba(245,158,11,.35);
  color: #fbbf24;
  border-radius: 999px;
  font-size: .66rem; font-weight: 800;
  padding: .25rem .75rem;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .02em;
}
.vex-upgrade-btn:hover {
  background: linear-gradient(135deg, rgba(245,158,11,.3), rgba(249,115,22,.25));
  box-shadow: 0 4px 12px rgba(245,158,11,.25);
  transform: translateY(-1px);
}

/* ── Hero headline ───────────────────────────────────────────── */
.vex-headline-wrap { text-align: center; margin-bottom: 1.75rem; }

.vex-breakthru-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(6,182,212,.15));
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 999px;
  padding: .4rem 1.25rem;
  font-size: .73rem; font-weight: 700; color: #c7d2fe;
  margin-bottom: 1.1rem;
  animation: vex-badge-pulse 3s ease-in-out infinite;
  letter-spacing: .01em;
}
@keyframes vex-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.4), 0 0 20px rgba(99,102,241,.08); }
  50%      { box-shadow: 0 0 0 8px rgba(99,102,241,.0), 0 0 30px rgba(99,102,241,.15); }
}
.vex-robot { font-size: 1.15rem; }

.vex-headline {
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  color: #f1f5f9;
  letter-spacing: -.03em;
  text-shadow: 0 2px 20px rgba(99,102,241,.2);
}
.vex-headline-hl { display: inline; white-space: nowrap; }
.vex-hl-inner {
  display: inline-block;
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 40%, #67e8f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: .05em .25em;
  border: 2px solid rgba(139,92,246,.45);
  border-radius: 10px;
  margin: 0 .05em;
  position: relative;
}
.vex-hl-inner::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 8px;
  background: rgba(99,102,241,.08);
  pointer-events: none;
}

/* ── Tech corners decoration on headline box ─────────────────── */
.vex-headline-box {
  display: inline-block;
  position: relative;
  padding: 1rem 2rem;
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 12px;
  background: rgba(99,102,241,.04);
}
.vex-headline-box::before,
.vex-headline-box::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(99,102,241,.6);
  border-style: solid;
}
.vex-headline-box::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.vex-headline-box::after  { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; }

/* ── Stage: 5-column chip-orbiting layout ───────────────────── */
.vex-stage {
  display: grid;
  grid-template-columns: 110px 110px 1fr 110px 110px;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.6rem;
}

/* Tool chip columns */
.vex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Inner cols (closer to center) slightly offset */
.vex-col-left-inner  { padding-top: 1.5rem; }
.vex-col-right-inner { padding-top: 1.5rem; }

/* Individual tool chip — VideoExpress style */
.vex-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 1rem .75rem .8rem;
  cursor: pointer;
  width: 100px;
  text-align: center;
  position: relative;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s, background .2s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vex-chip:hover {
  transform: translateY(-5px) scale(1.03);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 20px rgba(99,102,241,.15);
}
.vex-chip:active { transform: translateY(-2px) scale(1.01); }
.vex-chip span:not(.vex-chip-badge) {
  font-size: .67rem;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.35;
}
.vex-chip-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  flex-shrink: 0;
  transition: box-shadow .2s;
}
.vex-chip:hover .vex-chip-icon {
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.vex-chip-badge {
  position: absolute;
  top: -7px; right: -7px;
  font-size: .48rem; font-weight: 900;
  padding: .17rem .5rem;
  border-radius: 999px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  letter-spacing: .05em;
  box-shadow: 0 3px 8px rgba(99,102,241,.55);
  white-space: nowrap;
}
.vex-chip-badge-studio {
  background: linear-gradient(135deg,#a855f7,#ec4899);
  box-shadow: 0 3px 8px rgba(168,85,247,.55);
}
.vex-chip-badge-soon {
  background: rgba(100,116,139,.45);
  color: #94a3b8;
  box-shadow: none;
}
.vex-chip-badge-trial {
  background: linear-gradient(135deg,#10b981,#059669);
  box-shadow: 0 3px 8px rgba(16,185,129,.5);
  animation: vex-badge-pulse 2.5s ease-in-out infinite;
}

/* ── Central video player ────────────────────────────────────── */
.vex-player-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* multi-layer animated glow */
.vex-player-glow {
  position: absolute;
  inset: -20px;
  border-radius: 32px;
  background: conic-gradient(from 180deg,
    rgba(99,102,241,.35) 0deg,
    rgba(6,182,212,.25) 90deg,
    rgba(168,85,247,.3) 180deg,
    rgba(99,102,241,.2) 270deg,
    rgba(99,102,241,.35) 360deg);
  filter: blur(22px);
  z-index: 0;
  animation: vex-glow-pulse 5s ease-in-out infinite, vex-glow-spin 20s linear infinite;
  opacity: .75;
}
@keyframes vex-glow-pulse {
  0%,100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@keyframes vex-glow-spin {
  from { filter: blur(22px) hue-rotate(0deg); }
  to   { filter: blur(22px) hue-rotate(360deg); }
}

.vex-player {
  position: relative;
  z-index: 1;
  background: #080b18;
  border-radius: 20px;
  border: 2px solid rgba(99,102,241,.5);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(6,182,212,.2),
    0 0 40px rgba(99,102,241,.15),
    0 24px 70px rgba(0,0,0,.8);
  aspect-ratio: 16 / 9;
}
.vex-player-split { display: flex; height: 100%; }
.vex-player-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.vex-player-left {
  background: linear-gradient(160deg, #16103a 0%, #0e0c28 100%);
  border-right: 1px solid rgba(99,102,241,.25);
}
.vex-player-right {
  background: linear-gradient(160deg, #071b30 0%, #080e1e 100%);
}

/* Avatar section — left half */
.vex-player-demo-avatar {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: .5rem;
}
.vex-avatar-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(99,102,241,.18));
  border: 2px solid rgba(139,92,246,.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow:
    0 0 30px rgba(139,92,246,.35),
    0 0 60px rgba(139,92,246,.15);
  animation: vex-avatar-pulse 3s ease-in-out infinite;
}
@keyframes vex-avatar-pulse {
  0%,100% { box-shadow: 0 0 30px rgba(139,92,246,.35), 0 0 60px rgba(139,92,246,.15); }
  50%      { box-shadow: 0 0 45px rgba(139,92,246,.5), 0 0 80px rgba(139,92,246,.25); }
}
.vex-avatar-label {
  font-size: .55rem; font-weight: 700;
  color: rgba(167,139,250,.7);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vex-avatar-wave {
  display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.vex-avatar-wave span {
  width: 4px;
  background: linear-gradient(to top, #6366f1, #a78bfa);
  border-radius: 3px;
  animation: vex-wave 1.4s ease-in-out infinite;
}
.vex-avatar-wave span:nth-child(1) { height: 60%; animation-delay: 0s; }
.vex-avatar-wave span:nth-child(2) { height: 100%; animation-delay: .15s; }
.vex-avatar-wave span:nth-child(3) { height: 75%; animation-delay: .3s; }
.vex-avatar-wave span:nth-child(4) { height: 90%; animation-delay: .45s; }
.vex-avatar-wave span:nth-child(5) { height: 55%; animation-delay: .6s; }
@keyframes vex-wave {
  0%,100% { transform: scaleY(.45); opacity: .55; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Scene section — right half */
.vex-player-demo-scene {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; text-align: center; padding: 1rem; width: 100%;
}
.vex-scene-icon {
  animation: vex-scene-float 3.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px currentColor);
}
@keyframes vex-scene-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(3deg); }
}
.vex-scene-hint {
  font-size: .62rem; color: #374151;
  letter-spacing: .03em;
}
.vex-scene-text {
  font-size: .72rem; font-weight: 700;
  line-height: 1.3;
  margin-top: .2rem;
}
.vex-scene-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: .3rem;
}

/* Central play button overlay */
.vex-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 5; pointer-events: none;
}
.vex-play-center {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  cursor: pointer;
  pointer-events: all;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  font-size: 1.1rem; color: #fff;
}
.vex-play-center:hover {
  background: rgba(99,102,241,.4);
  border-color: rgba(99,102,241,.7);
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(99,102,241,.5);
}

/* Player bottom controls bar */
.vex-player-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .6rem .85rem;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 6;
}
.vex-play-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.vex-play-btn:hover { background: rgba(255,255,255,.22); transform: scale(1.1); }
.vex-player-meta {
  display: flex; align-items: center; gap: .6rem; margin-left: auto;
}
.vex-speed-badge {
  font-size: .58rem; font-weight: 800; color: #94a3b8;
  background: rgba(255,255,255,.08);
  padding: .1rem .45rem; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.1);
}
.vex-duration {
  font-size: .65rem; color: #94a3b8;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Connector lines between chips and player ───────────────── */
.vex-connector {
  position: absolute;
  background: linear-gradient(90deg, rgba(99,102,241,.0), rgba(99,102,241,.25), rgba(99,102,241,.0));
  height: 1px;
  animation: vex-connector-pulse 3s ease-in-out infinite;
}
@keyframes vex-connector-pulse {
  0%,100% { opacity: .4; }
  50%      { opacity: .9; }
}

/* ── Quick-launch bar ───────────────────────────────────────── */
.vex-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-top: .5rem;
  padding: 0 .5rem;
}
.vex-qbtn {
  display: inline-flex; align-items: center;
  gap: .3rem;
  font-size: .73rem; font-weight: 800;
  border-radius: 999px;
  padding: .6rem 1.25rem;
  cursor: pointer;
  border: none;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .18s;
  position: relative;
  letter-spacing: .01em;
}
.vex-qbtn:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.1);
}
.vex-qbtn:active { transform: translateY(-1px) scale(1.01); }
.vex-qbtn-cost {
  margin-left: .4rem;
  font-size: .58rem; font-weight: 700;
  background: rgba(0,0,0,.3);
  border-radius: 999px;
  padding: .12rem .5rem;
  border: 1px solid rgba(255,255,255,.15);
}
.vex-qbtn-p2v { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; box-shadow: 0 5px 18px rgba(99,102,241,.5); }
.vex-qbtn-i2v { background: linear-gradient(135deg,#06b6d4,#3b82f6); color:#fff; box-shadow: 0 5px 18px rgba(6,182,212,.5); }
.vex-qbtn-tts { background: linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow: 0 5px 18px rgba(16,185,129,.5); }
.vex-qbtn-tp  { background: linear-gradient(135deg,#f43f5e,#ec4899); color:#fff; box-shadow: 0 5px 18px rgba(244,63,94,.5); }
.vex-qbtn-ve  { background: linear-gradient(135deg,#f97316,#fb923c); color:#fff; box-shadow: 0 5px 18px rgba(249,115,22,.5); }

/* ── Feature cards row ──────────────────────────────────────── */
.vex-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .95rem;
  margin-top: 1.25rem;
}
.vex-feat-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255,255,255,.042);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s, background .2s;
  position: relative;
  overflow: hidden;
}
.vex-feat-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.065);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.vex-feat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}
.vex-feat-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff;
  box-shadow: 0 5px 14px rgba(0,0,0,.35);
}
.vex-feat-body { flex: 1; min-width: 0; }
.vex-feat-title { font-size: .82rem; font-weight: 800; color: #f1f5f9; line-height: 1.2; }
.vex-feat-sub   { font-size: .63rem; color: #64748b; margin-top: .2rem; }
.vex-feat-badge {
  position: absolute; top: .55rem; right: .55rem;
  font-size: .49rem; font-weight: 900;
  padding: .17rem .5rem; border-radius: 999px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  letter-spacing: .05em;
  box-shadow: 0 2px 8px rgba(99,102,241,.5);
}
.vex-feat-badge-studio { background: linear-gradient(135deg,#a855f7,#ec4899); box-shadow: 0 2px 8px rgba(168,85,247,.5); }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 960px) {
  .vex-stage {
    grid-template-columns: 100px 100px 1fr 100px 100px;
    gap: .85rem;
  }
  .vex-chip { width: 90px; }
}
@media (max-width: 800px) {
  .vex-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .vex-col {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .vex-col-left-inner,
  .vex-col-right-inner { padding-top: 0; }
  .vex-chip { width: 82px; }
  .vex-player-wrap { max-width: 100%; }
}
@media (max-width: 560px) {
  .vex-hero { padding: 1.5rem 1rem 1.25rem; border-radius: 20px; }
  .vex-headline { font-size: 1.3rem; letter-spacing: -.02em; }
  .vex-headline-box { padding: .75rem 1.25rem; }
  .vex-cards-row { grid-template-columns: 1fr 1fr; }
  .vex-qbtn { font-size: .66rem; padding: .5rem .9rem; }
  .vex-quickbar { gap: .45rem; }
}

/* Keep backward-compat classes used by modal JS */
.chip-purple { background: rgba(168,85,247,.2); color: #d8b4fe; border-color: rgba(168,85,247,.3); }

/* ═══════════════════════════════════════════════════════════
   AI TOOL MODALS — Workspace panels
   ═══════════════════════════════════════════════════════════ */
.ait-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,7,14,.88);
  backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: aitFadeIn .2s ease;
}
@keyframes aitFadeIn { from { opacity:0 } to { opacity:1 } }
.ait-panel {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  width: 100%; max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  animation: aitSlideUp .25s ease;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
}
.ait-panel-md { max-width: 900px; }
@keyframes aitSlideUp { from { transform: translateY(24px); opacity:0 } to { transform:none; opacity:1 } }
.ait-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky; top: 0; z-index: 10;
  background: #0d1117;
}
.ait-header-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem;
  flex-shrink: 0;
}
.ait-panel-title { font-size: 1.05rem; font-weight: 800; color: #f8fafc; }
.ait-panel-sub   { font-size: .72rem; color: #64748b; margin-top: .15rem; display:flex; align-items:center; gap:.5rem; }
.ait-close-btn {
  width: 36px; height: 36px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: #94a3b8; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s, color .2s;
}
.ait-close-btn:hover { background: rgba(255,255,255,.1); color: #f8fafc; }

.ait-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
@media (max-width: 700px) {
  .ait-panel-body { grid-template-columns: 1fr; }
  .ait-col-output { order: -1; min-height: 180px; }
}

.ait-col-inputs { display: flex; flex-direction: column; gap: .9rem; }
.ait-col-output { display: flex; flex-direction: column; }

/* Form elements */
.ait-field-group { display: flex; flex-direction: column; }
.ait-label { font-size: .72rem; font-weight: 700; color: #94a3b8; margin-bottom: .45rem; display:flex; align-items:center; }
.ait-textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: .75rem 1rem;
  color: #e2e8f0; font-size: .8rem; line-height: 1.5;
  resize: vertical; min-height: 90px; width: 100%;
  transition: border-color .2s;
  font-family: inherit;
}
.ait-textarea:focus { outline: none; border-color: rgba(99,102,241,.5); }
.ait-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: .6rem .9rem;
  color: #e2e8f0; font-size: .8rem; width: 100%;
  transition: border-color .2s;
}
.ait-input:focus { outline: none; border-color: rgba(99,102,241,.5); }
.ait-select {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: .55rem .85rem;
  color: #e2e8f0; font-size: .8rem; width: 100%;
}
.ait-hint { font-size: .65rem; color: #475569; margin-top: .35rem; }
.ait-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ait-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; }
@media(max-width:600px) { .ait-row-2,.ait-row-3 { grid-template-columns: 1fr; } }

/* Range input */
.ait-range {
  -webkit-appearance: none;
  width: 100%; height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 9px; outline: none;
  accent-color: #6366f1;
}
.ait-range-val { font-size: .75rem; font-weight: 700; color: #e2e8f0; min-width: 32px; text-align:right; }

/* Button groups (opt-btn) */
.ait-btn-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.ait-opt-btn {
  padding: .3rem .7rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #94a3b8; font-size: .7rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ait-opt-btn:hover  { border-color: rgba(255,255,255,.25); color: #e2e8f0; }
.ait-opt-btn.active { border-color: #6366f1; background: rgba(99,102,241,.2); color: #a5b4fc; }

/* Style grid */
.ait-style-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem;
}
.ait-style-btn {
  padding: .5rem .4rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #94a3b8; font-size: .65rem; font-weight: 600;
  text-align: center; cursor: pointer; transition: all .15s;
}
.ait-style-btn .ait-style-icon { font-size: 1.2rem; display:block; margin-bottom: .25rem; }
.ait-style-btn:hover  { border-color: rgba(99,102,241,.4); color: #e2e8f0; }
.ait-style-btn.active { border-color: #6366f1; background: rgba(99,102,241,.18); color: #a5b4fc; }

/* Motion grid */
.ait-motion-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem;
}
.ait-motion-btn {
  padding: .5rem .3rem; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #94a3b8; font-size: .62rem; font-weight: 600;
  text-align: center; cursor: pointer; transition: all .15s;
}
.ait-motion-btn .ait-motion-icon { font-size: 1.1rem; display:block; margin-bottom: .2rem; }
.ait-motion-btn:hover  { border-color: rgba(6,182,212,.4); color: #e2e8f0; }
.ait-motion-btn.active { border-color: #06b6d4; background: rgba(6,182,212,.18); color: #67e8f9; }

/* Voice grid */
.ait-voice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .4rem; }
.ait-voice-btn {
  padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; transition: all .15s;
  text-align: left;
}
.ait-voice-btn .ait-voice-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(16,185,129,.2); color: #6ee7b7;
  font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ait-voice-btn .ait-voice-name { font-size: .72rem; font-weight: 700; color: #e2e8f0; }
.ait-voice-btn .ait-voice-meta { font-size: .6rem; color: #64748b; }
.ait-voice-btn:hover  { border-color: rgba(16,185,129,.4); }
.ait-voice-btn.active { border-color: #10b981; background: rgba(16,185,129,.12); }

/* Tabs */
.ait-tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.ait-tab {
  padding: .35rem .8rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent; color: #94a3b8;
  font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.ait-tab.active { border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.15); color: #fda4af; }
.ait-tab-panel { display: flex; flex-direction: column; }
.ait-tab-panel.hidden { display: none; }

/* Preview bar */
.ait-preview-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.ait-preview-btn {
  padding: .35rem .8rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #94a3b8; font-size: .7rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ait-preview-btn:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.ait-preview-stop { border-color: rgba(239,68,68,.3); color: #f87171; }

/* Dropzone */
.ait-dropzone {
  border: 2px dashed rgba(255,255,255,.12);
  border-radius: 14px; padding: 1.5rem 1rem;
  cursor: pointer; text-align: center;
  transition: border-color .2s, background .2s;
  position: relative; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.ait-dropzone:hover, .ait-dropzone.dragover {
  border-color: rgba(99,102,241,.5);
  background: rgba(99,102,241,.06);
}
.ait-drop-idle { display: flex; flex-direction: column; align-items: center; }
.ait-drop-preview {
  max-width: 100%; max-height: 160px;
  border-radius: 10px; object-fit: cover;
}

/* Run button */
.ait-run-btn {
  width: 100%; padding: .85rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-size: .85rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .2s, transform .15s;
  border: none; margin-top: auto;
  box-shadow: 0 4px 20px rgba(99,102,241,.35);
}
.ait-run-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.ait-run-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ait-run-cyan   { background: linear-gradient(135deg, #0891b2, #0e7490); box-shadow: 0 4px 20px rgba(6,182,212,.3); }
.ait-run-emerald{ background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 4px 20px rgba(16,185,129,.3); }
.ait-run-rose   { background: linear-gradient(135deg, #e11d48, #be123c); box-shadow: 0 4px 20px rgba(244,63,94,.3); }
.ait-run-orange { background: linear-gradient(135deg, #ea580c, #c2410c); box-shadow: 0 4px 20px rgba(249,115,22,.3); }
.ait-credit-cost {
  margin-left: auto; font-size: .68rem; font-weight: 600;
  background: rgba(255,255,255,.15); border-radius: 999px;
  padding: .15rem .6rem;
}

/* Plan badges inside panel */
.ait-badge-pro    { font-size: .6rem; font-weight: 800; letter-spacing:.06em; padding:.15rem .55rem; border-radius:999px; background:rgba(99,102,241,.25); color:#a5b4fc; border:1px solid rgba(99,102,241,.4); }
.ait-badge-studio { font-size: .6rem; font-weight: 800; letter-spacing:.06em; padding:.15rem .55rem; border-radius:999px; background:rgba(168,85,247,.25); color:#d8b4fe; border:1px solid rgba(168,85,247,.4); }
.ait-badge-trial  { font-size: .6rem; font-weight: 800; letter-spacing:.06em; padding:.15rem .55rem; border-radius:999px; background:rgba(16,185,129,.2); color:#34d399; border:1px solid rgba(16,185,129,.4); }
.ait-badge-free   { font-size: .6rem; font-weight: 800; letter-spacing:.06em; padding:.15rem .55rem; border-radius:999px; background:rgba(30,41,59,.6); color:#64748b; border:1px solid rgba(148,163,184,.2); }

/* Output area */
.ait-output-area {
  flex: 1; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; position: relative; overflow: hidden;
  flex-direction: column;
}
.ait-output-idle { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem; }

/* Processing state */
.ait-processing {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; padding: 2rem; text-align: center; width: 100%;
}
.ait-progress-bar-wrap {
  width: 100%; max-width: 260px;
  height: 6px; background: rgba(255,255,255,.08);
  border-radius: 9px; overflow: hidden;
}
.ait-progress-bar {
  height: 100%; border-radius: 9px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  animation: aitProgress 2s ease-in-out forwards;
}
@keyframes aitProgress { from { width:0 } to { width:92% } }

/* Result card */
.ait-result-card {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 1.25rem; gap: .75rem;
  animation: aitFadeIn .3s ease;
}
.ait-result-header {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ait-result-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size: .68rem; font-weight: 700;
  padding: .25rem .65rem; border-radius: 999px;
  background: rgba(34,197,94,.15); color: #4ade80;
  border: 1px solid rgba(34,197,94,.25);
}
.ait-result-scenes {
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 260px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #334155 transparent;
}
.ait-scene-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px;
  background: rgba(255,255,255,.03);
  font-size: .7rem; color: #94a3b8;
}
.ait-scene-num {
  min-width: 22px; height: 22px;
  border-radius: 6px; background: rgba(99,102,241,.2);
  color: #a5b4fc; font-weight: 800; font-size: .65rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ait-stat-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem;
}
.ait-stat-item {
  padding: .55rem; border-radius: 10px;
  background: rgba(255,255,255,.04); text-align: center;
}
.ait-stat-val { font-size: .9rem; font-weight: 800; color: #f8fafc; }
.ait-stat-lbl { font-size: .6rem; color: #64748b; margin-top: .15rem; }

/* Video editor operations */
.ve-ops-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem;
}
.ve-op-btn {
  padding: .55rem .5rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: #94a3b8; font-size: .68rem; font-weight: 600;
  text-align: center; cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.ve-op-btn i { font-size: 1rem; }
.ve-op-btn:hover  { border-color: rgba(249,115,22,.4); color: #e2e8f0; }
.ve-op-btn.selected { border-color: #f97316; background: rgba(249,115,22,.18); color: #fdba74; }

.ve-queue-list {
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: .5rem; min-height: 60px; max-height: 140px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .3rem;
}
.ve-queue-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; border-radius: 8px;
  background: rgba(249,115,22,.08);
  font-size: .7rem; color: #cbd5e1;
}
.ve-queue-item .ve-op-tag {
  font-size: .6rem; font-weight: 800;
  background: rgba(249,115,22,.2); color: #fdba74;
  border-radius: 6px; padding: .1rem .45rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.ve-queue-item button {
  margin-left: auto; color: #ef4444; font-size: .7rem; cursor: pointer;
}

/* Pro-gate modal */
.ait-progate-card {
  background: #0d1117;
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 24px;
  width: 100%; max-width: 440px;
  position: relative;
  box-shadow: 0 0 60px rgba(251,191,36,.1), 0 32px 64px rgba(0,0,0,.5);
  animation: aitSlideUp .25s ease;
}

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD STYLES
═══════════════════════════════════════════════════════════════ */

/* Admin tab buttons */
.admin-tab-btn {
  padding: .45rem .9rem;
  border-radius: 14px;
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: background .18s, color .18s;
  text-align: center;
  white-space: nowrap;
}
.admin-tab-btn:hover  { background: rgba(255,255,255,.06); color: #e2e8f0; }
.admin-tab-btn.active { background: rgba(244,63,94,.18); color: #fb7185; }

/* Admin provider selector buttons */
.adm-provider-btn {
  padding: .4rem .9rem;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  transition: all .18s;
  white-space: nowrap;
}
.adm-provider-btn:hover  { background: rgba(255,255,255,.07); color: #e2e8f0; border-color: rgba(255,255,255,.14); }
.adm-provider-btn.active { background: rgba(244,63,94,.15); color: #fb7185; border-color: rgba(244,63,94,.35); }

/* Admin API key card */
.adm-key-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  transition: border-color .2s;
}
.adm-key-card:hover { border-color: rgba(244,63,94,.2); }
.adm-key-card.is-set { border-color: rgba(16,185,129,.25); }

/* Admin key status dot */
.adm-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.adm-status-dot.set   { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.adm-status-dot.unset { background: #475569; }

/* Admin ad slot card */
.adm-ad-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.adm-ad-card.is-set { border-color: rgba(59,130,246,.25); }

/* Admin users table rows */
#adm-users-tbody tr { transition: background .15s; }
#adm-users-tbody tr:hover { background: rgba(255,255,255,.03); }
#adm-users-tbody td  { padding: .6rem .75rem .6rem 0; vertical-align: middle; }

/* Admin action buttons in user table */
.adm-user-action-btn {
  padding: .25rem .6rem;
  border-radius: 7px;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.adm-user-action-btn.edit { background: rgba(99,102,241,.15); color: #818cf8; border: 1px solid rgba(99,102,241,.25); }
.adm-user-action-btn.edit:hover { background: rgba(99,102,241,.28); }

/* Admin key masked value display */
.adm-key-masked {
  font-family: 'Courier New', monospace;
  font-size: .72rem;
  color: #94a3b8;
  letter-spacing: .08em;
}

/* Admin input (API key) */
.adm-key-input {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-size: .78rem;
  color: #e2e8f0;
  font-family: 'Courier New', monospace;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.adm-key-input:focus {
  border-color: rgba(244,63,94,.4);
  box-shadow: 0 0 0 3px rgba(244,63,94,.08);
}
.adm-key-input::placeholder { color: #475569; letter-spacing: .02em; font-family: sans-serif; }

/* Admin ad textarea */
.adm-ad-textarea {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .6rem .75rem;
  font-size: .72rem;
  color: #e2e8f0;
  font-family: 'Courier New', monospace;
  resize: vertical;
  outline: none;
  min-height: 80px;
  transition: border-color .18s;
}
.adm-ad-textarea:focus { border-color: rgba(59,130,246,.4); }

/* Test button states */
.adm-test-btn {
  padding: .3rem .7rem;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: #94a3b8;
  transition: all .18s;
  white-space: nowrap;
}
.adm-test-btn:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }
.adm-test-btn.testing { opacity: .6; cursor: wait; }
.adm-test-result { font-size: .68rem; margin-top: .35rem; }
.adm-test-result.ok  { color: #10b981; }
.adm-test-result.err { color: #f87171; }

/* ══════════════════════════════════════════════════════════════════
   HOME / LANDING PAGE — Arabic RTL Premium Design
   منصة الخدمات الاحترافية
   ══════════════════════════════════════════════════════════════════ */

.home-rtl-page {
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', 'Noto Sans Arabic', sans-serif;
  overflow-x: hidden;
  padding-bottom: 2rem;
}

/* ── Hero Section ──────────────────────────────────────────────── */
.home-hero-wrap {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244,63,94,.13) 0%, transparent 70%),
              linear-gradient(180deg, #0f0f1a 0%, #07070e 100%);
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  margin-bottom: 0;
}
.home-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.home-orb-1 {
  width: 400px; height: 400px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(244,63,94,.18) 0%, transparent 70%);
  animation: homeOrbFloat 8s ease-in-out infinite;
}
.home-orb-2 {
  width: 300px; height: 300px;
  top: 30px; left: -60px;
  background: radial-gradient(circle, rgba(99,102,241,.14) 0%, transparent 70%);
  animation: homeOrbFloat 11s ease-in-out infinite reverse;
}
.home-orb-3 {
  width: 200px; height: 200px;
  bottom: -40px; right: 30%;
  background: radial-gradient(circle, rgba(16,185,129,.12) 0%, transparent 70%);
  animation: homeOrbFloat 9s ease-in-out infinite 3s;
}
@keyframes homeOrbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.25);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .78rem;
  color: #fb7185;
  font-weight: 600;
  margin-bottom: 1.5rem;
  animation: homeBadgePulse 3s ease-in-out infinite;
}
@keyframes homeBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); }
  50%       { box-shadow: 0 0 0 8px rgba(244,63,94,.08); }
}
.home-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  animation: homeDotBlink 1.5s ease-in-out infinite;
}
@keyframes homeDotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
.home-hero-h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.home-hl {
  background: linear-gradient(135deg, #f43f5e, #fb7185, #fda4af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-hero-sub {
  font-size: 1rem;
  color: #94a3b8;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.home-cta-row {
  display: flex;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.home-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(244,63,94,.35);
  font-family: inherit;
}
.home-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(244,63,94,.45);
  background: linear-gradient(135deg, #fb4365, #f43f5e);
}
.home-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.home-btn-outline:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}
.home-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.home-stat-num {
  font-size: 1.5rem;
  font-weight: 900;
  color: #f43f5e;
  line-height: 1;
}
.home-stat-label {
  font-size: .72rem;
  color: #64748b;
  font-weight: 500;
}
.home-stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.08);
}

/* ── Section Wrapper ───────────────────────────────────────────── */
.home-section-wrap {
  padding: 2.5rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.home-section-pro-wrap {
  background: linear-gradient(180deg, transparent, rgba(244,63,94,.04) 30%, transparent);
  border-radius: 24px;
  padding: 2.5rem 1.5rem;
}
.home-pro-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(244,63,94,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.home-section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.home-section-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.home-icon-free {
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(5,150,105,.2));
  color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
}
.home-icon-pro {
  background: linear-gradient(135deg, rgba(244,63,94,.2), rgba(190,18,60,.2));
  color: #f43f5e;
  border: 1px solid rgba(244,63,94,.2);
}
.home-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: .15rem;
  line-height: 1.2;
}
.home-section-sub {
  font-size: .82rem;
  color: #64748b;
}
.home-section-badge {
  margin-right: auto;
  padding: .35rem 1rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.home-badge-green {
  background: rgba(16,185,129,.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
}
.home-badge-rose {
  background: rgba(244,63,94,.15);
  color: #f43f5e;
  border: 1px solid rgba(244,63,94,.25);
}
.home-badge-cta {
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}
.home-badge-cta:hover {
  background: rgba(244,63,94,.25);
  transform: scale(1.04);
}

/* ── Cards Grid ────────────────────────────────────────────────── */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}

/* ── Free Cards ────────────────────────────────────────────────── */
.home-card {
  position: relative;
  background: #111827;
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: all .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.home-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.home-card-free:hover { border-color: rgba(16,185,129,.2); }
.home-card-pro {
  background: linear-gradient(145deg, #111827, #1a0f1e);
  border-color: rgba(244,63,94,.12);
}
.home-card-pro:hover {
  border-color: rgba(244,63,94,.3);
  box-shadow: 0 20px 40px rgba(244,63,94,.12);
}

/* Glowing background effect */
.home-card-glow {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.home-card:hover .home-card-glow { opacity: 0.5; }
.home-glow-cyan    { background: rgba(6,182,212,.5); }
.home-glow-emerald { background: rgba(16,185,129,.5); }
.home-glow-amber   { background: rgba(245,158,11,.5); }
.home-glow-violet  { background: rgba(139,92,246,.5); }

/* Pro card shine effect */
.home-card-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  transform: skewX(-15deg);
  transition: left .6s ease;
  pointer-events: none;
}
.home-card-pro:hover .home-card-shine { left: 160%; }

.home-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.home-badge-pill {
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .75rem;
  border-radius: 999px;
}
.home-pill-free {
  background: rgba(16,185,129,.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.2);
}
.home-pill-pro {
  background: rgba(244,63,94,.15);
  color: #f43f5e;
  border: 1px solid rgba(244,63,94,.2);
}
.home-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.3;
}
.home-card-title-pro {
  color: #fda4af;
}
.home-card-desc {
  font-size: .83rem;
  color: #94a3b8;
  line-height: 1.6;
  flex: 1;
}
.home-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.home-tag {
  font-size: .68rem;
  padding: .2rem .6rem;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: #64748b;
  border: 1px solid rgba(255,255,255,.06);
  font-weight: 500;
}
.home-tag-pro {
  background: rgba(244,63,94,.08);
  color: #f87171;
  border-color: rgba(244,63,94,.12);
}

/* Pro features checklist */
.home-pro-features {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.home-pro-feat {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: #94a3b8;
}
.home-pro-feat i {
  color: #10b981;
  font-size: .75rem;
  flex-shrink: 0;
}

/* Card action buttons */
.home-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  margin-top: auto;
  transition: all .2s;
  user-select: none;
}
.home-btn-free-card {
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.08);
}
.home-card-free:hover .home-btn-free-card {
  background: rgba(16,185,129,.12);
  color: #10b981;
  border-color: rgba(16,185,129,.2);
}
.home-btn-pro-card {
  background: linear-gradient(135deg, rgba(244,63,94,.15), rgba(190,18,60,.15));
  color: #fb7185;
  border: 1px solid rgba(244,63,94,.2);
}
.home-card-pro:hover .home-btn-pro-card {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(244,63,94,.35);
}

/* ── CTA Banner ────────────────────────────────────────────────── */
.home-cta-banner {
  position: relative;
  margin-top: 2rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(244,63,94,.2);
  background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(139,92,246,.06));
}
.home-cta-banner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(244,63,94,.12), transparent);
  pointer-events: none;
}
.home-cta-banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  flex-wrap: wrap;
}
.home-cta-banner-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(244,63,94,.35);
  animation: homeCrownPulse 2.5s ease-in-out infinite;
}
@keyframes homeCrownPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(244,63,94,.35); }
  50%       { box-shadow: 0 4px 28px rgba(244,63,94,.6); }
}
.home-cta-text {
  flex: 1;
  min-width: 200px;
}
.home-cta-text h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: .25rem;
}
.home-cta-text p {
  font-size: .8rem;
  color: #94a3b8;
  line-height: 1.5;
}
.home-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all .25s;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(244,63,94,.35);
}
.home-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 32px rgba(244,63,94,.5);
}
.home-cta-btn-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-15deg);
  animation: homeBtnShimmer 2.5s ease-in-out infinite;
}
@keyframes homeBtnShimmer {
  0%   { left: -100%; }
  50%  { left: 160%; }
  100% { left: 160%; }
}

/* ── Footer ────────────────────────────────────────────────────── */
/* ── AI Studio Hub Block (home page) ───────────────────────────── */
.home-ai-hub-block {
  position: relative;
  margin: 0 1.5rem 2rem;
  padding: 2rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(255,51,102,.12), rgba(111,45,168,.12));
  border: 2px solid rgba(255, 51, 102, .45);
  border-radius: 20px;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
  direction: rtl;
}

/* Ambient orbs */
.home-hub-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}
.home-hub-orb-1 {
  width: 220px; height: 220px;
  background: rgba(255, 51, 102, .18);
  top: -60px; right: -60px;
}
.home-hub-orb-2 {
  width: 180px; height: 180px;
  background: rgba(111, 45, 168, .18);
  bottom: -50px; left: -50px;
}

/* Header row */
.home-hub-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .85rem;
}
.home-hub-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.home-hub-badge-new {
  background: #f43f5e;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.home-hub-explore-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(244, 63, 94, .5);
  background: rgba(244, 63, 94, .08);
  color: #f43f5e;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
}
.home-hub-explore-btn:hover {
  background: rgba(244, 63, 94, .16);
  border-color: rgba(244, 63, 94, .75);
}

/* Subtitle */
.home-hub-sub {
  position: relative;
  z-index: 1;
  font-size: .9rem;
  color: #94a3b8;
  margin: 0 0 1.4rem;
  line-height: 1.6;
}

/* 4-card grid */
.home-hub-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
  margin-bottom: 1.4rem;
}
.home-hub-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  background: rgba(22, 24, 36, .85);
  border: 1px solid #23263a;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.home-hub-card:hover {
  border-color: rgba(244, 63, 94, .55);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(244, 63, 94, .12);
}
.home-hub-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}
.home-hub-icon-p2v { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.home-hub-icon-i2v { background: linear-gradient(135deg, #ec4899, #be185d); }
.home-hub-icon-tts { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.home-hub-icon-tp  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.home-hub-card-body {
  flex: 1;
  min-width: 0;
}
.home-hub-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 .25rem;
  line-height: 1.3;
}
.home-hub-card-desc {
  font-size: .76rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.home-hub-cost-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(244, 63, 94, .12);
  color: #f43f5e;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(244, 63, 94, .25);
  white-space: nowrap;
}

/* Bottom CTA */
.home-hub-footer-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding-top: .25rem;
}
.home-hub-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 2rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: opacity .18s, transform .18s;
  box-shadow: 0 4px 18px rgba(244, 63, 94, .35);
}
.home-hub-cta-btn:hover { opacity: .92; transform: translateY(-2px); }
.home-hub-btn-shimmer {
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: homeHubShimmer 2.4s ease-in-out infinite;
}
@keyframes homeHubShimmer {
  0%   { left: -75%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}
.home-hub-cta-note {
  font-size: .72rem;
  color: #475569;
  margin: 0;
}

/* Light mode overrides */
body.light .home-ai-hub-block {
  background: linear-gradient(135deg, rgba(255,51,102,.07), rgba(111,45,168,.07));
  border-color: rgba(244, 63, 94, .3);
}
body.light .home-hub-title  { color: #1e293b; }
body.light .home-hub-sub    { color: #475569; }
body.light .home-hub-card   { background: #fff; border-color: #e2e8f0; }
body.light .home-hub-card:hover { border-color: rgba(244,63,94,.4); }
body.light .home-hub-card-title { color: #1e293b; }
body.light .home-hub-card-desc  { color: #94a3b8; }
body.light .home-hub-cta-note   { color: #94a3b8; }

/* Responsive */
@media (max-width: 640px) {
  .home-ai-hub-block { margin: 0 .75rem 1.5rem; padding: 1.5rem 1rem 1.25rem; }
  .home-hub-grid     { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .home-hub-header   { flex-direction: column; align-items: flex-start; }
  .home-hub-cta-btn  { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .home-hub-grid { grid-template-columns: 1fr; }
}

.home-footer {
  text-align: center;
  padding: 2rem 1.5rem 1rem;
  color: #475569;
  font-size: .78rem;
  border-top: 1px solid rgba(255,255,255,.04);
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.home-footer-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.home-footer-link {
  color: #64748b;
  font-size: .78rem;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .18s;
  font-family: inherit;
  padding: 0;
}
.home-footer-link:hover { color: #94a3b8; }
.home-footer-sep { color: #334155; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-hero-wrap { padding: 2.5rem 1rem 2rem; }
  .home-cta-banner-content { padding: 1.25rem; }
  .home-cta-btn { width: 100%; justify-content: center; }
  .home-section-head { gap: .75rem; }
  .home-section-badge { width: 100%; text-align: center; margin-right: 0; }
  .home-stats-row { gap: .75rem; }
  .home-section-wrap { padding: 2rem 1rem; }
  .home-section-pro-wrap { padding: 2rem 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   AI STUDIO HUB — Bilingual RTL/LTR Premium Design
   hub-hero-wrap · hub-toolkit · hub-theme-toggle
   ══════════════════════════════════════════════════════════════════ */

/* ── Hub Hero Wrapper ──────────────────────────────────────────── */
.hub-hero-wrap {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg,
    rgba(244,63,94,.10) 0%,
    rgba(99,102,241,.08) 35%,
    rgba(6,182,212,.06) 70%,
    transparent 100%
  ), #0a0a14;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
/* reuse vex orbs */
.hub-hero-wrap .vex-orb { z-index: 0; }

/* ── Top Bar ───────────────────────────────────────────────────── */
.hub-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  gap: .75rem;
  flex-wrap: wrap;
}
.hub-logo-area {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.hub-logo-icon {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 3px 12px rgba(244,63,94,.35);
  flex-shrink: 0;
}
.hub-logo-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: #f59e0b;
  color: #000;
  font-size: .52rem;
  font-weight: 900;
  padding: .12rem .3rem;
  border-radius: 4px;
  line-height: 1;
}
.hub-logo-text { display: flex; flex-direction: column; gap: .05rem; }
.hub-logo-name {
  font-size: .88rem;
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1;
}
.hub-logo-ai { color: #f43f5e; }
.hub-logo-sub {
  font-size: .55rem;
  color: #475569;
  letter-spacing: .07em;
  font-weight: 600;
}

/* Theme toggle pill */
.hub-theme-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.hub-theme-btn:hover {
  background: rgba(255,255,255,.1);
  color: #e2e8f0;
  border-color: rgba(255,255,255,.18);
}
/* light-mode overrides for hub */
body.light .hub-hero-wrap {
  background: linear-gradient(160deg, rgba(244,63,94,.06) 0%, rgba(99,102,241,.05) 50%, transparent 100%), #f0f2f8;
}
body.light .hub-theme-btn {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.1);
  color: #475569;
}
body.light .hub-topbar { border-bottom-color: rgba(0,0,0,.06); }
body.light .hub-logo-name { color: #1e293b; }
body.light .hub-logo-sub  { color: #94a3b8; }

.hub-theme-icon { font-size: .82rem; }
.hub-theme-label { display: none; }
@media (min-width: 480px) { .hub-theme-label { display: inline; } }

.hub-topbar-right {
  display: flex; align-items: center; gap: .5rem;
}

/* ── Headline Section ──────────────────────────────────────────── */
.hub-headline-section {
  position: relative;
  z-index: 2;
  padding: 2rem 1.5rem 1.25rem;
  text-align: center;
}

/* Arabic badge */
.hub-ar-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.25);
  border-radius: 999px;
  padding: .38rem 1rem;
  font-size: .78rem;
  color: #fb7185;
  font-weight: 600;
  margin-bottom: 1.25rem;
  direction: rtl;
  animation: homeBadgePulse 3s ease-in-out infinite;
}
.hub-ar-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f43f5e;
  animation: homeDotBlink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.hub-ar-badge-new {
  background: #f43f5e;
  color: #fff;
  font-size: .65rem;
  padding: .15rem .5rem;
  border-radius: 8px;
  font-weight: 700;
}

/* Bilingual headline box */
.hub-headline-box {
  border: 1px solid rgba(244,63,94,.2);
  border-radius: 16px;
  padding: 1.25rem 1.75rem;
  margin-bottom: 1rem;
  background: rgba(244,63,94,.04);
  backdrop-filter: blur(8px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.light .hub-headline-box {
  background: rgba(244,63,94,.03);
  border-color: rgba(244,63,94,.15);
}
.hub-headline-ar {
  font-size: clamp(1.15rem, 3.5vw, 1.65rem);
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1.35;
  margin-bottom: .5rem;
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
}
body.light .hub-headline-ar { color: #1e293b; }
.hub-headline-en {
  font-size: clamp(.9rem, 2.5vw, 1.1rem);
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.4;
}
body.light .hub-headline-en { color: #64748b; }
.hub-hl {
  background: linear-gradient(135deg, #f43f5e, #fb7185, #fda4af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hub-subtitle {
  font-size: .82rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* CTA button row */
.hub-cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.hub-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.4rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  box-shadow: 0 3px 16px rgba(244,63,94,.35);
  position: relative;
  overflow: hidden;
}
.hub-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(244,63,94,.45);
}
.hub-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.4rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  font-weight: 700;
  font-size: .85rem;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.hub-btn-secondary:hover {
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.3);
  color: #fb7185;
  transform: translateY(-2px);
}
body.light .hub-btn-secondary {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.1);
  color: #334155;
}
.hub-cost-tag {
  font-size: .65rem;
  padding: .15rem .45rem;
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Feature Highlights Grid (4 cards: h4 + p description) ─────── */
.hub-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1rem 1.5rem 1.25rem;
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
}
.hub-feature-item {
  background: #161824;
  border: 1px solid #23263a;
  border-radius: 12px;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hub-feature-item:hover {
  border-color: rgba(244, 63, 94, .5);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(244, 63, 94, .12);
}
.hub-feature-item h4 {
  font-size: .95rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 .4rem;
  line-height: 1.4;
}
.hub-feature-item p {
  font-size: .78rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}
/* Light mode */
body.light .hub-feature-item {
  background: #ffffff;
  border-color: #e2e8f0;
}
body.light .hub-feature-item:hover {
  border-color: rgba(244, 63, 94, .4);
  box-shadow: 0 6px 20px rgba(244, 63, 94, .08);
}
body.light .hub-feature-item h4 { color: #1e293b; }
body.light .hub-feature-item p  { color: #64748b; }

/* ── Toolkit Grid Section (Arabic RTL) ─────────────────────────── */
.hub-toolkit-section {
  position: relative;
  z-index: 2;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.04);
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
}
body.light .hub-toolkit-section { border-top-color: rgba(0,0,0,.05); }

.hub-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-right: .75rem;
  border-right: 3px solid #f43f5e;
}
body.light .hub-section-title { color: #1e293b; }
.hub-section-title i { color: #f59e0b; font-size: .9rem; }

.hub-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}

.hub-tool-card {
  background: #111827;
  border-radius: 14px;
  padding: 1.1rem;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
body.light .hub-tool-card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.hub-tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}
.hub-tool-free:hover  { border-color: rgba(16,185,129,.25); }
.hub-tool-pro:hover   { border-color: rgba(244,63,94,.3); }
.hub-tool-ai:hover    { border-color: rgba(99,102,241,.3); }

.hub-tool-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: .65rem;
  padding: .18rem .55rem;
  border-radius: 7px;
  font-weight: 700;
}
.hub-tbadge-free  { background: rgba(16,185,129,.15); color: #10b981; }
.hub-tbadge-pro   { background: rgba(244,63,94,.15);  color: #f43f5e; }
.hub-tbadge-ai    { background: rgba(99,102,241,.15); color: #818cf8; }

.hub-tool-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.hub-tool-title {
  font-size: .92rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.3;
  margin-top: .35rem;
}
body.light .hub-tool-title { color: #1e293b; }
.hub-tool-desc {
  font-size: .78rem;
  color: #94a3b8;
  line-height: 1.5;
  flex: 1;
}
body.light .hub-tool-desc { color: #64748b; }
.hub-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255,255,255,.04);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,.06);
  transition: all .2s;
  margin-top: auto;
}
body.light .hub-tool-btn {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.06);
  color: #64748b;
}
.hub-tool-card:hover .hub-tool-btn {
  color: #f43f5e;
  background: rgba(244,63,94,.08);
  border-color: rgba(244,63,94,.15);
}

/* ── Feature row Arabic labels ─────────────────────────────────── */
.hub-feat-ar {
  font-size: .65rem;
  color: #64748b;
  font-weight: 600;
  margin-top: .15rem;
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
}
.hub-feat-card .vex-feat-body { gap: .05rem; }

/* Quick bar hidden label on small */
.hub-qbar-hidden { display: none; }
@media (min-width: 900px) {
  .hub-qbar-hidden { display: flex; }
}

/* ── Responsive adjustments ────────────────────────────────────── */
@media (max-width: 640px) {
  .hub-headline-section { padding: 1.5rem 1rem 1rem; }
  .hub-headline-box     { padding: 1rem; }
  .hub-toolkit-section  { padding: 1rem; }
  .hub-topbar           { padding: .75rem 1rem; gap: .5rem; }
  .hub-ar-badge         { font-size: .72rem; }
  .hub-cta-row          { gap: .5rem; }
  .hub-btn-primary,
  .hub-btn-secondary    { padding: .58rem 1rem; font-size: .8rem; }
  .hub-toolkit-grid     { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  .hub-features-grid    { grid-template-columns: repeat(2, 1fr); padding: .75rem 1rem 1rem; gap: .75rem; }
}

/* ══════════════════════════════════════════════════════════════════
   AICREATOR TUTORIAL SECTION v2 — Arabic RTL (version HTML finale)
   ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper global ── */
.aicr-tutorial-section {
  direction: rtl;
  font-family: 'Segoe UI', Tahoma, 'Arabic Typesetting', sans-serif;
  padding: 1.25rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ════════════════════════════
   ① Hero Hub
   ════════════════════════════ */
.aicr-hero-hub {
  background: linear-gradient(135deg,
    rgba(255, 51, 102, .15) 0%,
    rgba(111, 45, 168, .15) 100%);
  border: 2px solid rgba(255, 51, 102, .55);
  border-radius: 16px;
  padding: 1.6rem 1.75rem;
  box-shadow: 0 8px 25px rgba(255, 51, 102, .12);
  position: relative;
  overflow: hidden;
}

.aicr-hero-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 15%, rgba(255,51,102,.07) 0%, transparent 65%);
  pointer-events: none;
}

.aicr-hero-hub-header {
  display: flex;
  align-items: center;
  margin-bottom: .7rem;
}

.aicr-hero-hub-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.aicr-badge-new {
  background: #f43f5e;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: .04em;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(244,63,94,.4);
  animation: aicrBadgePulse 2.8s ease-in-out infinite;
}

@keyframes aicrBadgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(244,63,94,.4); }
  50%       { box-shadow: 0 2px 18px rgba(244,63,94,.75); }
}

.aicr-hero-hub-desc {
  color: #94a3b8;
  font-size: .95rem;
  margin-bottom: 1.2rem;
  line-height: 1.6;
}

/* Hub feature pills (compact single-line labels) */
.aicr-hub-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .65rem;
}

.aicr-hub-feature-item {
  background: #161824;
  border: 1px solid #23263a;
  border-radius: 8px;
  padding: .6rem .9rem;
  font-size: .85rem;
  font-weight: 700;
  color: #e2e8f0;
  text-align: center;
  transition: background .2s, border-color .2s, transform .2s;
}

.aicr-hub-feature-item:hover {
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.4);
  transform: translateY(-2px);
}

/* Light-mode hero hub */
body.light .aicr-hero-hub {
  background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(111,45,168,.06));
  border-color: rgba(244,63,94,.3);
}
body.light .aicr-hero-hub-title  { color: #1a1a1a; }
body.light .aicr-hero-hub-desc   { color: #666; }
body.light .aicr-hub-feature-item {
  background: #fff;
  border-color: #e0e0e0;
  color: #1a1a1a;
}
body.light .aicr-hub-feature-item:hover {
  background: rgba(244,63,94,.07);
  border-color: rgba(244,63,94,.3);
}

/* ════════════════════════════
   ② Section title (shared)
   ════════════════════════════ */
.aicr-section-title {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 900;
  color: #f1f5f9;
  border-right: 4px solid #f43f5e;
  padding-right: 12px;
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.4;
  margin-top: .25rem;
}

.aicr-title-icon { font-size: 1.15rem; flex-shrink: 0; }

body.light .aicr-section-title { color: #1a1a1a; }

/* ════════════════════════════
   ③ Tutorial container
   ════════════════════════════ */
.aicr-tutorial-container {
  background: #161824;
  border: 1px solid #23263a;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

body.light .aicr-tutorial-container {
  background: #fff;
  border-color: #e0e0e0;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.aicr-tutorial-intro {
  color: #a0a0a5;
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

body.light .aicr-tutorial-intro {
  color: #666;
  border-bottom-color: #e0e0e0;
}

/* Step cards */
.aicr-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.aicr-step-card {
  background: #1f2233;
  border: 1px solid #23263a;
  border-radius: 12px;
  padding: 1.3rem 1.2rem 1.15rem;
  position: relative;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s;
}

.aicr-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(244,63,94,.15);
  border-color: rgba(244,63,94,.4);
}

.aicr-step-number {
  position: absolute;
  top: -13px;
  right: 15px;
  background: #f43f5e;
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .8rem;
  box-shadow: 0 3px 10px rgba(244,63,94,.45);
}

.aicr-step-title {
  margin-top: .3rem;
  margin-bottom: .55rem;
  font-size: 1rem;
  font-weight: 800;
  color: #f1f5f9;
}

.aicr-step-desc {
  color: #a0a0a5;
  font-size: .86rem;
  line-height: 1.6;
}

body.light .aicr-step-card {
  background: #f1f3f7;
  border-color: #e0e0e0;
}
body.light .aicr-step-card:hover  { border-color: rgba(244,63,94,.3); }
body.light .aicr-step-title       { color: #1a1a1a; }
body.light .aicr-step-desc        { color: #666; }

/* Table heading */
.aicr-table-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: .75rem;
}

body.light .aicr-table-heading { color: #1a1a1a; }

/* Responsive table wrapper */
.aicr-table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #23263a;
  margin-bottom: 1.5rem;
}

body.light .aicr-table-responsive { border-color: #e0e0e0; }

/* Explanation table */
.aicr-btn-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  font-size: .9rem;
  background: #1f2233;
  border-radius: 12px;
  overflow: hidden;
  min-width: 480px;
}

.aicr-btn-table thead tr {
  background: rgba(244,63,94,.10);
}

.aicr-btn-table th {
  padding: .85rem 1.1rem;
  color: #f43f5e;
  font-weight: 800;
  font-size: .88rem;
}

.aicr-btn-table td {
  padding: .85rem 1.1rem;
  color: #a0a0a5;
  border-bottom: 1px solid rgba(255,255,255,.05);
  line-height: 1.55;
  vertical-align: middle;
}

.aicr-btn-table tbody tr:last-child td { border-bottom: none; }

.aicr-btn-table tbody tr { transition: background .18s; }
.aicr-btn-table tbody tr:hover { background: rgba(244,63,94,.06); }

/* Pill tag */
.aicr-btn-tag {
  display: inline-block;
  background: #f43f5e;
  color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(244,63,94,.3);
}

body.light .aicr-btn-table          { background: #f1f3f7; }
body.light .aicr-btn-table thead tr { background: rgba(244,63,94,.07); }
body.light .aicr-btn-table td       { color: #666; border-bottom-color: #e0e0e0; }
body.light .aicr-btn-table tbody tr:hover { background: rgba(244,63,94,.04); }

/* CTA launch */
.aicr-action-cta { text-align: center; padding-top: .25rem; }

.aicr-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #f43f5e;
  color: #fff;
  border: none;
  padding: .9rem 2.2rem;
  border-radius: 10px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(244,63,94,.3);
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.aicr-launch-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation: aicrBtnShimmer 2.5s ease-in-out infinite;
}

@keyframes aicrBtnShimmer {
  0%   { left: -100%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}

.aicr-launch-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(244,63,94,.5);
}

/* ════════════════════════════
   ④ Toolkit grid
   ════════════════════════════ */
.aicr-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .9rem;
}

.aicr-tool-card {
  background: #161824;
  border: 1px solid #23263a;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
  position: relative;
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1);
}

.aicr-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Badge top-left (LTR position = left in RTL context means visual left) */
.aicr-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: .65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

.aicr-badge-free {
  background: rgba(40, 167, 69, .15);
  color: #28a745;
}

.aicr-badge-pro {
  background: rgba(244, 63, 94, .15);
  color: #f43f5e;
}

.aicr-tool-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: .45rem;
}

.aicr-tool-card-desc {
  color: #a0a0a5;
  font-size: .84rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.aicr-tool-card-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: .55rem .75rem;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: .84rem;
  font-family: inherit;
  background: #23263a;
  color: #e2e8f0;
  transition: background .18s, color .18s;
}

.aicr-tool-card-btn:hover {
  background: #f43f5e;
  color: #fff;
}

body.light .aicr-tool-card {
  background: #fff;
  border-color: #e0e0e0;
}
body.light .aicr-tool-card-title  { color: #1a1a1a; }
body.light .aicr-tool-card-desc   { color: #666; }
body.light .aicr-tool-card-btn {
  background: #e0e0e0;
  color: #1a1a1a;
}
body.light .aicr-tool-card-btn:hover {
  background: #f43f5e;
  color: #fff;
}

/* ════════════════════════════
   ⑤ Section footer
   ════════════════════════════ */
.aicr-section-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  color: #a0a0a5;
  border-top: 1px solid #23263a;
  font-size: .84rem;
  margin-top: .5rem;
}

body.light .aicr-section-footer {
  color: #666;
  border-top-color: #e0e0e0;
}

/* ════════════════════════════
   Responsive — 640px
   ════════════════════════════ */
@media (max-width: 640px) {
  .aicr-tutorial-section      { padding: .75rem .75rem 0; gap: 1.1rem; }
  .aicr-hero-hub              { padding: 1.1rem 1rem; }
  .aicr-hub-features-grid     { grid-template-columns: repeat(2, 1fr); }
  .aicr-tutorial-container    { padding: 1.25rem 1rem; }
  .aicr-steps-grid            { grid-template-columns: 1fr; }
  .aicr-toolkit-grid          { grid-template-columns: 1fr; }
  .aicr-section-title         { font-size: 1rem; }
  .aicr-launch-btn            { padding: .8rem 1.4rem; font-size: .95rem; }
  .aicr-hero-hub-title        { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 9 — HOME VEX STAGE (AI Studio Hub chip grid + player in page-home)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.home-vex-stage-wrap {
  margin: 0 1rem 2rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(145deg, rgba(99,102,241,.08) 0%, rgba(139,92,246,.08) 50%, rgba(6,182,212,.06) 100%);
  border: 1.5px solid rgba(99,102,241,.35);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

/* ── Header ── */
.home-vex-header { margin-bottom: 1.2rem; }
.home-vex-title-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.home-vex-logo-icon {
  width: 2.6rem; height: 2.6rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  flex-shrink: 0;
}
.home-vex-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
}
.home-vex-subtitle {
  font-size: .78rem;
  color: #64748b;
  margin: .1rem 0 0;
}
.home-vex-open-btn {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none; border-radius: 8px;
  font-size: .78rem; font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}
.home-vex-open-btn:hover { opacity: .85; }

/* ── Chips row (horizontal scroll — mobile) ── */
.home-vex-chips-row {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  scrollbar-width: none;
}
.home-vex-chips-row::-webkit-scrollbar { display: none; }
.home-vex-chip {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem .4rem .45rem;
  background: rgba(30,34,58,.85);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  font-size: .75rem; font-weight: 600; color: #cbd5e1;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
  position: relative;
}
.home-vex-chip:hover {
  border-color: rgba(99,102,241,.7);
  background: rgba(99,102,241,.15);
}
.home-vex-chip-icon {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #fff;
  flex-shrink: 0;
}
.home-vex-chip-badge {
  font-size: .58rem; font-weight: 800;
  padding: .1rem .35rem;
  border-radius: 4px;
  background: rgba(99,102,241,.85);
  color: #fff;
  text-transform: uppercase;
  margin-inline-start: .15rem;
}
.home-vex-chip-trial { background: rgba(16,185,129,.85); }
.home-vex-chip-studio { background: linear-gradient(90deg,#7c3aed,#ec4899); }
.home-vex-chip-soon { background: rgba(100,116,139,.7); }

/* ── 5-column stage layout ── */
.home-vex-stage {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1fr 1fr;
  gap: .6rem;
  align-items: center;
  min-height: 280px;
}

/* ── Chip cards (columns) ── */
.home-vex-col {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: center;
}
.home-vex-chip-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .65rem .55rem .5rem;
  background: rgba(20,24,44,.9);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-size: .68rem; font-weight: 600; color: #94a3b8;
  transition: border-color .2s, transform .2s, background .2s;
  width: 100%;
  position: relative;
}
.home-vex-chip-card:hover {
  border-color: rgba(99,102,241,.6);
  background: rgba(99,102,241,.1);
  transform: translateY(-2px);
}
.home-vex-chip-card-icon {
  width: 2.2rem; height: 2.2rem;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff;
  flex-shrink: 0;
}

/* ── Center player ── */
.home-vex-player-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-vex-player-glow {
  position: absolute;
  inset: -8px;
  background: conic-gradient(from 0deg, #6366f1, #8b5cf6, #ec4899, #06b6d4, #6366f1);
  border-radius: 20px;
  opacity: .35;
  filter: blur(6px);
  animation: homeVexGlowSpin 6s linear infinite;
  z-index: 0;
}
@keyframes homeVexGlowSpin { to { transform: rotate(360deg); } }
.home-vex-player {
  position: relative; z-index: 1;
  width: 100%; min-height: 190px;
  background: #0f1120;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(99,102,241,.4);
}
.home-vex-player-split {
  display: flex;
  height: 155px;
}
.home-vex-player-half {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.home-vex-player-left { border-right: 1px solid rgba(99,102,241,.25); }

/* Avatar */
.home-vex-demo-avatar {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.home-vex-avatar-circle {
  width: 3rem; height: 3rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  border: 2px solid rgba(255,255,255,.15);
}
.home-vex-avatar-label {
  font-size: .58rem; font-weight: 800; color: #94a3b8; letter-spacing: .08em;
}
.home-vex-avatar-wave {
  display: flex; gap: 2px; align-items: flex-end; height: 16px;
}
.home-vex-avatar-wave span {
  width: 3px; border-radius: 2px;
  background: linear-gradient(to top, #6366f1, #8b5cf6);
  animation: homeVexWave .9s ease-in-out infinite alternate;
}
.home-vex-avatar-wave span:nth-child(1){ height:6px; animation-delay:.0s; }
.home-vex-avatar-wave span:nth-child(2){ height:12px; animation-delay:.1s; }
.home-vex-avatar-wave span:nth-child(3){ height:9px; animation-delay:.2s; }
.home-vex-avatar-wave span:nth-child(4){ height:14px; animation-delay:.3s; }
.home-vex-avatar-wave span:nth-child(5){ height:7px; animation-delay:.4s; }
@keyframes homeVexWave { to { transform: scaleY(1.8); } }

/* Scene */
.home-vex-demo-scene {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: .5rem;
  height: 100%;
  background: linear-gradient(135deg, #0a0f2e, #1a0630);
}
.home-vex-scene-text {
  font-size: .65rem; color: #94a3b8; text-align: center; font-style: italic;
}
.home-vex-scene-wave {
  display: flex; gap: 2px; align-items: flex-end; height: 20px;
}
.home-vex-scene-wave span {
  width: 4px; border-radius: 2px;
  background: linear-gradient(to top, #06b6d4, #8b5cf6);
  animation: homeVexWave .8s ease-in-out infinite alternate;
}
.home-vex-scene-wave span:nth-child(1){ height:5px; animation-delay:.0s; }
.home-vex-scene-wave span:nth-child(2){ height:14px; animation-delay:.1s; }
.home-vex-scene-wave span:nth-child(3){ height:9px; animation-delay:.15s; }
.home-vex-scene-wave span:nth-child(4){ height:18px; animation-delay:.2s; }
.home-vex-scene-wave span:nth-child(5){ height:7px; animation-delay:.25s; }
.home-vex-scene-wave span:nth-child(6){ height:12px; animation-delay:.3s; }
.home-vex-scene-wave span:nth-child(7){ height:5px; animation-delay:.35s; }

/* Play overlay */
.home-vex-play-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  top: 0; bottom: 2rem;
}
.home-vex-play-btn {
  width: 2.8rem; height: 2.8rem;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  pointer-events: all;
  transition: background .2s, transform .2s;
  display: flex; align-items: center; justify-content: center;
}
.home-vex-play-btn:hover {
  background: rgba(99,102,241,.7);
  transform: scale(1.1);
}

/* Controls bar */
.home-vex-controls {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem;
  background: rgba(0,0,0,.4);
  border-top: 1px solid rgba(99,102,241,.2);
}
.home-vex-speed {
  font-size: .6rem; font-weight: 800;
  background: rgba(99,102,241,.3);
  padding: .1rem .3rem;
  border-radius: 4px; color: #a5b4fc;
}
.home-vex-demo-label {
  font-size: .58rem; color: #475569;
  font-weight: 600; letter-spacing: .05em;
}
.home-vex-duration {
  font-size: .65rem; color: #475569; font-variant-numeric: tabular-nums;
}

/* ── Light mode ── */
body.light .home-vex-stage-wrap {
  background: linear-gradient(145deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
  border-color: rgba(99,102,241,.25);
}
body.light .home-vex-chip {
  background: #fff;
  border-color: rgba(99,102,241,.2);
  color: #334155;
}
body.light .home-vex-chip-card {
  background: #fff;
  border-color: rgba(99,102,241,.15);
  color: #475569;
}
body.light .home-vex-player { background: #1a1a2e; }
body.light .home-vex-title { color: #1e293b; }

/* ── Responsive: hide 5-col grid on small screens, show chip row only ── */
@media (max-width: 900px) {
  .home-vex-stage { display: none; }
}
@media (min-width: 901px) {
  .home-vex-chips-row { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SESSION 9 — HOME PLANS PREVIEW SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.home-plans-wrap {
  margin: 0 1rem 2rem;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(145deg, rgba(17,24,39,.8), rgba(11,17,35,.9));
  border: 1.5px solid rgba(99,102,241,.2);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.home-plans-wrap::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 30%;
  width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.6), transparent);
}

/* Header */
.home-plans-head { text-align: center; margin-bottom: 1.5rem; }
.home-plans-badge-top {
  display: inline-block;
  padding: .3rem .75rem;
  background: rgba(99,102,241,.15);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50px;
  font-size: .75rem; font-weight: 700; color: #a5b4fc;
  margin-bottom: .6rem;
}
.home-plans-title {
  font-size: 1.3rem; font-weight: 800; color: #f1f5f9; margin: 0 0 .35rem;
}
.home-plans-sub {
  font-size: .82rem; color: #64748b; margin: 0;
}

/* Plans grid — 3 colonnes fixes sur desktop */
.home-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}

/* Plan card */
.home-plan-card {
  background: rgba(20,24,44,.85);
  border: 1.5px solid rgba(99,102,241,.2);
  border-radius: 16px;
  padding: 1.5rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: .75rem;
  position: relative;
  transition: border-color .2s, transform .2s;
  min-height: 480px;
}
.home-plan-card:hover { border-color: rgba(99,102,241,.5); transform: translateY(-3px); }

/* FREE */
.home-plan-free { border-color: rgba(16,185,129,.25); }
.home-plan-free:hover { border-color: rgba(16,185,129,.6); }

/* PRO — highlighted */
.home-plan-pro {
  border-color: rgba(244,63,94,.45);
  background: linear-gradient(145deg, rgba(244,63,94,.08), rgba(99,102,241,.08));
  box-shadow: 0 0 30px rgba(244,63,94,.12);
}
.home-plan-pro:hover { border-color: rgba(244,63,94,.8); }
.home-plan-popular-badge {
  position: absolute;
  top: -1px; inset-inline-start: 50%; transform: translateX(-50%);
  padding: .2rem .7rem;
  background: linear-gradient(90deg, #f43f5e, #ec4899);
  color: #fff;
  font-size: .65rem; font-weight: 800;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}
body[dir="rtl"] .home-plan-popular-badge { transform: translateX(50%); }

/* STUDIO */
.home-plan-studio { border-color: rgba(168,85,247,.3); }
.home-plan-studio:hover { border-color: rgba(168,85,247,.7); }
.home-plan-studio-badge {
  position: absolute;
  top: -1px; inset-inline-start: 50%; transform: translateX(-50%);
  padding: .2rem .7rem;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: .65rem; font-weight: 800;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}
body[dir="rtl"] .home-plan-studio-badge { transform: translateX(50%); }

/* Card top */
.home-plan-card-top { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.home-plan-icon {
  width: 3rem; height: 3rem;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.home-plan-icon-free  { background: linear-gradient(135deg,#10b981,#059669); }
.home-plan-icon-pro   { background: linear-gradient(135deg,#f43f5e,#ec4899); }
.home-plan-icon-studio{ background: linear-gradient(135deg,#7c3aed,#a855f7); }
.home-plan-name { font-size: .95rem; font-weight: 800; color: #f1f5f9; margin: 0; }
.home-plan-price { display: flex; align-items: baseline; gap: .2rem; }
.home-plan-amount {
  font-size: 1.6rem; font-weight: 900;
  background: linear-gradient(90deg,#6366f1,#ec4899);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.home-plan-period { font-size: .75rem; color: #64748b; }

/* Feature list */
.home-plan-feats {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
  flex: 1;
}
.home-plan-feats li {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .77rem; color: #94a3b8;
  line-height: 1.4;
}
.home-plan-feats li i {
  color: #10b981; font-size: .65rem; margin-top: .18rem; flex-shrink: 0;
}
.home-plan-pro .home-plan-feats li i { color: #f43f5e; }
.home-plan-studio .home-plan-feats li i { color: #a855f7; }

/* Feature highlight (items importants) */
.home-plan-feat-highlight {
  color: #e2e8f0 !important;
  font-weight: 600;
}
.home-plan-pro .home-plan-feat-highlight { color: #fda4af !important; }
.home-plan-studio .home-plan-feat-highlight { color: #d8b4fe !important; }

/* Feature locked (Free plan — fonctions verrouillées) */
.home-plan-feat-locked {
  opacity: .45 !important;
  text-decoration: line-through;
}
.home-plan-feat-locked i { color: #475569 !important; }

/* CTA buttons */
.home-plan-cta {
  width: 100%;
  padding: .65rem 1rem;
  border: none; border-radius: 10px;
  font-size: .8rem; font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.home-plan-cta:hover { opacity: .88; transform: translateY(-1px); }
.home-plan-cta-free   { background: rgba(16,185,129,.2); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.home-plan-cta-pro    { background: linear-gradient(90deg,#f43f5e,#ec4899); color: #fff; }
.home-plan-cta-studio { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; }

/* Compare link */
.home-plans-compare { text-align: center; }
.home-plans-compare-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 50px;
  color: #6366f1;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.home-plans-compare-btn:hover {
  background: rgba(99,102,241,.1);
  border-color: rgba(99,102,241,.6);
}

/* Light mode */
body.light .home-plans-wrap {
  background: #fff;
  border-color: rgba(99,102,241,.15);
}
body.light .home-plan-card {
  background: #f8fafc;
  border-color: rgba(99,102,241,.12);
}
body.light .home-plans-title { color: #1e293b; }
body.light .home-plan-name { color: #1e293b; }
body.light .home-plan-feats li { color: #475569; }

/* Light mode */
body.light .home-plan-feat-highlight { color: #1e293b !important; }
body.light .home-plan-feat-locked { color: #94a3b8 !important; }

/* Responsive — tablette intermédiaire */
@media (max-width: 900px) and (min-width: 601px) {
  .home-plans-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .home-plan-card { padding: 1.1rem .8rem .9rem; min-height: auto; }
  .home-plan-feats li { font-size: .71rem; }
}

/* Responsive — mobile */
@media (max-width: 600px) {
  .home-plans-grid { grid-template-columns: 1fr; gap: 1rem; }
  .home-plan-card { min-height: auto; }
  .home-vex-stage-wrap { margin: 0 .5rem 1.5rem; padding: 1rem .85rem; }
  .home-plans-wrap { margin: 0 .5rem 1.5rem; padding: 1.25rem .85rem 1rem; }
}