/* ====================================================
   OBSIDIAN NEXUS — Design System v7.0
   Full redesign: Dark Cinema × AI Mission Control
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:    #020308;
  --bg-deep:    #030512;
  --bg-base:    #05091a;

  /* Glass surfaces */
  --glass-1:    rgba(10,18,55,0.65);
  --glass-2:    rgba(14,24,70,0.72);
  --glass-3:    rgba(20,34,90,0.80);
  --glass-border:       rgba(99,102,241,0.18);
  --glass-border-hover: rgba(99,102,241,0.40);
  --glass-blur: blur(24px) saturate(1.8);

  /* Primary accent — Electric Indigo */
  --accent:          #6366f1;
  --accent-bright:   #818cf8;
  --accent-light:    #a5b4fc;
  --accent-glow:     rgba(99,102,241,0.25);
  --accent-gradient: linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  --accent-text:     #c4b5fd;

  /* Neon palette */
  --cyan:         #00d4ff;
  --cyan-dim:     #22d3ee;
  --cyan-glow:    rgba(0,212,255,0.25);
  --emerald:      #00ffa3;
  --emerald-dim:  #10b981;
  --emerald-glow: rgba(0,255,163,0.20);
  --amber:        #fbbf24;
  --amber-glow:   rgba(251,191,36,0.22);
  --rose:         #fb4d6d;
  --rose-glow:    rgba(251,77,109,0.22);
  --violet:       #c084fc;
  --violet-glow:  rgba(192,132,252,0.22);
  --indigo:       #818cf8;

  /* Text scale */
  --text-0: #ffffff;
  --text-1: #f0f4ff;
  --text-2: #bdc8e8;
  --text-3: #7c8db5;
  --text-4: #445275;
  --text-5: #2a3558;

  /* Radius */
  --r-xs:   5px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.5);
  --shadow-md:  0 6px 30px rgba(0,0,0,0.6);
  --shadow-lg:  0 16px 60px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 40px rgba(99,102,241,0.35);
  --shadow-cyan:   0 0 40px rgba(0,212,255,0.30);

  /* Easing */
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --ease-out:    cubic-bezier(0,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-back:   cubic-bezier(0.36,0,0.66,-0.56);
  --t-fast: 110ms;
  --t-base: 200ms;
  --t-slow: 380ms;

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h:  62px;
  --hud-h:     36px;
}

/* ── Keyframes ─────────────────────────────────────── */
@keyframes orb-1 {
  0%,100% { transform:translate(0,0) scale(1); opacity:.7; }
  33%     { transform:translate(60px,-40px) scale(1.15); opacity:.5; }
  66%     { transform:translate(-30px,50px) scale(0.9); opacity:.8; }
}
@keyframes orb-2 {
  0%,100% { transform:translate(0,0) scale(1); opacity:.5; }
  50%     { transform:translate(-80px,30px) scale(1.2); opacity:.7; }
}
@keyframes orb-3 {
  0%,100% { transform:translate(0,0) scale(1); opacity:.4; }
  40%     { transform:translate(40px,60px) scale(1.1); opacity:.6; }
  80%     { transform:translate(-20px,-30px) scale(0.95); opacity:.3; }
}
@keyframes aurora {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes float-in {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scale-in {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes slide-in-left {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes hud-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.45; }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.4; transform:scale(0.7); }
}
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(0,212,255,0.5); }
  100% { box-shadow:0 0 0 10px rgba(0,212,255,0); }
}
@keyframes spin-kf { to { transform:rotate(360deg); } }
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
@keyframes emergency-glow {
  0%,100% { box-shadow:0 0 16px rgba(251,77,109,0.45); }
  50%     { box-shadow:0 0 32px rgba(251,77,109,0.75),0 0 8px rgba(255,255,255,0.1) inset; }
}
@keyframes log-in {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes glow-breathe {
  0%,100% { box-shadow:0 0 20px rgba(99,102,241,0.3); }
  50%     { box-shadow:0 0 40px rgba(99,102,241,0.6); }
}
@keyframes border-flow {
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
@keyframes loginPulse {
  0%,100% { opacity:.8; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.06); }
}

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

html,body {
  height:100%; overflow:hidden;
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  font-size:16px; -webkit-font-smoothing:antialiased;
  background:var(--bg-void); color:var(--text-1);
}

/* Deep space background */
body {
  background-color:var(--bg-void);
  background-image:
    radial-gradient(ellipse 80% 60% at 10% -5%,  rgba(99,102,241,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 95%,  rgba(168,85,247,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 55% 52%,  rgba(0,212,255,0.06)  0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 78% 15%,  rgba(251,77,109,0.08) 0%, transparent 50%);
}

/* Animated orbs */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 55% 45% at 12% 8%,  rgba(99,102,241,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 88% 88%, rgba(168,85,247,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 50% 50%, rgba(0,212,255,0.05)  0%, transparent 60%);
  animation:orb-1 22s ease-in-out infinite;
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 40% 35% at 75% 20%, rgba(251,77,109,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 30% 30% at 25% 80%, rgba(0,212,255,0.06)  0%, transparent 55%);
  animation:orb-2 28s ease-in-out infinite;
}

::selection { background:rgba(99,102,241,0.35); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,0.30); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,0.50); }

/* ── App Shell ─────────────────────────────────────── */
.app-shell {
  display:flex; height:calc(100vh - var(--hud-h));
  margin-top:var(--hud-h); position:relative; z-index:1;
}

/* ── HUD Top Strip ─────────────────────────────────── */
.hud-topstrip {
  position:fixed; top:0; left:0; right:0; height:var(--hud-h); z-index:9999;
  background:rgba(2,3,10,0.96); backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid rgba(99,102,241,0.20);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; font-family:'JetBrains Mono',monospace;
}
.hud-topstrip::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(99,102,241,0.65) 25%,
    rgba(0,212,255,0.65) 75%,
    transparent 100%);
}
.hud-brand { display:flex; align-items:center; gap:10px; }
.hud-logo-mark {
  font-size:1.05rem; color:var(--accent-light);
  animation:hud-pulse 3s ease-in-out infinite;
  text-shadow:0 0 16px rgba(165,180,252,0.7);
}
.hud-logo-text {
  font-family:'Outfit',sans-serif; font-size:0.78rem;
  font-weight:800; letter-spacing:3.5px; color:#fff;
  text-shadow:0 0 24px rgba(99,102,241,0.5);
}
.hud-version { font-size:0.58rem; color:var(--text-4); letter-spacing:1.5px; }
.hud-metrics { display:flex; align-items:center; gap:20px; }
.hud-metric  { display:flex; align-items:center; gap:6px; }
.hud-metric-label { font-size:0.62rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-4); }
.hud-metric-value { font-size:0.85rem; color:var(--cyan); font-weight:600; min-width:36px; text-shadow:0 0 10px var(--cyan-glow); }
.hud-ws-status { color:var(--emerald); text-shadow:0 0 10px var(--emerald-glow); }
.hud-right   { display:flex; align-items:center; gap:12px; }
.hud-clock   { font-size:0.70rem; color:var(--text-3); letter-spacing:2px; min-width:68px; text-align:right; }
.hud-kb-hint {
  background:transparent; border:1px solid rgba(99,102,241,0.22);
  color:var(--text-4); padding:2px 8px; border-radius:4px;
  font-size:0.78rem; cursor:pointer; transition:all var(--t-fast);
  font-family:'JetBrains Mono',monospace; line-height:1;
}
.hud-kb-hint:hover { border-color:rgba(99,102,241,0.5); color:var(--accent-light); }
@media (max-width:700px) { .hud-metrics { display:none; } }

/* ── Sidebar ───────────────────────────────────────── */
.side-nav {
  width:var(--sidebar-w); flex-shrink:0;
  background:rgba(4,8,28,0.88);
  backdrop-filter:blur(32px) saturate(2.0);
  border-right:1px solid rgba(99,102,241,0.15);
  display:flex; flex-direction:column; padding:20px 10px;
  z-index:100; position:relative;
  box-shadow:8px 0 60px rgba(0,0,0,0.5);
  transition:width var(--t-slow) var(--ease);
}
/* Glowing right edge */
.side-nav::after {
  content:''; position:absolute; right:-1px; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
    transparent 5%,
    rgba(99,102,241,0.60) 30%,
    rgba(0,212,255,0.50) 68%,
    transparent 95%);
}

/* Brand */
.side-nav-brand {
  padding:8px 14px 28px; display:flex; align-items:center; gap:12px;
}
.brand-avatar {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.35),rgba(0,212,255,0.25));
  border:1px solid rgba(99,102,241,0.40);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(99,102,241,0.25);
}
.brand-avatar-icon { font-size:1.15rem; color:var(--accent-light); }
.brand-text { display:flex; flex-direction:column; gap:2px; }
.side-nav-brand h2 {
  font-family:'Outfit',sans-serif; font-size:0.92rem;
  font-weight:800; letter-spacing:1.8px; margin:0;
  background:linear-gradient(135deg,#fff 0%,var(--accent-light) 60%,var(--cyan-dim) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-sub { font-size:0.58rem; color:var(--text-4); letter-spacing:1.2px; text-transform:uppercase; }

/* Nav sections */
.nav-section-label {
  font-size:0.58rem; text-transform:uppercase; letter-spacing:2.5px;
  color:var(--text-5); padding:16px 16px 8px; font-weight:700;
}
.side-nav-menu { flex:1; }
.side-nav-menu ul { list-style:none; }
.side-nav-menu li {
  display:flex; align-items:center; gap:11px;
  padding:10px 16px; margin-bottom:3px;
  border-radius:var(--r-sm); font-size:0.84rem; font-weight:500;
  color:var(--text-4); cursor:pointer;
  transition:all var(--t-base) var(--ease); position:relative;
  overflow:hidden;
}
.side-nav-menu li::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(99,102,241,0.12),transparent);
  opacity:0; transition:opacity var(--t-base);
}
.side-nav-menu li:hover { color:var(--text-2); }
.side-nav-menu li:hover::before { opacity:1; }
.side-nav-menu li.active {
  color:var(--accent-light);
  background:rgba(99,102,241,0.14);
  border:1px solid rgba(99,102,241,0.25);
  box-shadow:0 0 24px rgba(99,102,241,0.10),inset 0 1px 0 rgba(255,255,255,0.05);
}
.side-nav-menu li.active::after {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:26px;
  background:linear-gradient(to bottom,var(--cyan),var(--accent));
  border-radius:0 4px 4px 0;
  box-shadow:0 0 14px rgba(0,212,255,0.6);
}
.side-nav-menu li i { width:17px; opacity:0.65; flex-shrink:0; transition:all var(--t-base); }
.side-nav-menu li.active i { opacity:1; filter:drop-shadow(0 0 5px var(--cyan)); }
.side-nav-menu li:hover i { opacity:0.9; }

/* Sidebar user block */
.sidebar-user {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-top:1px solid rgba(99,102,241,0.12); margin-top:8px;
  cursor:pointer; border-radius:var(--r-sm); transition:all var(--t-base);
}
.sidebar-user:hover { background:rgba(99,102,241,0.08); }
.sidebar-user-avatar {
  width:32px; height:32px; border-radius:var(--r-sm); flex-shrink:0;
  background:var(--accent-gradient); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.72rem; color:#fff;
  box-shadow:0 0 16px rgba(99,102,241,0.30);
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-info .name { font-size:0.80rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-info .role { font-size:0.62rem; color:var(--text-4); text-transform:uppercase; letter-spacing:0.5px; }

/* Sidebar footer */
.side-nav-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:14px 4px 4px;
  border-top:1px solid rgba(99,102,241,0.10); margin-top:4px;
}
.version-badge { font-size:0.62rem; color:var(--text-5); font-family:'JetBrains Mono',monospace; letter-spacing:0.5px; }
.logout-btn {
  display:flex; align-items:center; gap:5px;
  background:none; border:1px solid rgba(255,255,255,0.08);
  color:var(--text-4); font-size:0.72rem; padding:5px 10px;
  border-radius:7px; cursor:pointer; transition:all var(--t-base);
}
.logout-btn:hover { color:var(--rose); border-color:rgba(251,77,109,0.30); background:rgba(251,77,109,0.06); }

/* Sidebar collapse */
.app-shell.sidebar-collapsed .side-nav { width:64px; }
.app-shell.sidebar-collapsed .side-nav .side-nav-brand,
.app-shell.sidebar-collapsed .side-nav .nav-section-label,
.app-shell.sidebar-collapsed .side-nav li span,
.app-shell.sidebar-collapsed .side-nav .side-nav-footer,
.app-shell.sidebar-collapsed .side-nav .sidebar-user-info {
  opacity:0; pointer-events:none; width:0; overflow:hidden;
}
.app-shell.sidebar-collapsed .side-nav li { justify-content:center; padding:10px; }

/* Mobile sidebar */
.sidebar-backdrop { display:none; }
@media (max-width:1000px) {
  .side-nav {
    position:fixed; top:var(--hud-h); left:0; bottom:0;
    width:var(--sidebar-w); z-index:4000;
    transform:translateX(-100%);
    transition:transform 0.3s var(--ease);
  }
  .app-shell.sidebar-open .side-nav { transform:translateX(0); }
  .sidebar-backdrop {
    display:block; position:fixed; inset:0; top:var(--hud-h);
    background:rgba(0,0,0,0.55); backdrop-filter:blur(5px);
    z-index:3999; display:none;
  }
  .app-shell.sidebar-open .sidebar-backdrop { display:block; }
}

/* ── Main Shell ────────────────────────────────────── */
.main-shell { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; z-index:1; }

/* ── Top Bar ───────────────────────────────────────── */
.top-bar {
  height:var(--topbar-h); padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(99,102,241,0.13);
  background:rgba(4,7,22,0.72); backdrop-filter:blur(24px) saturate(1.8);
  flex-shrink:0; z-index:50;
  box-shadow:0 1px 0 rgba(99,102,241,0.08);
}
.hamburger-btn {
  background:transparent; border:1px solid var(--glass-border);
  color:var(--text-3); width:34px; height:34px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t-base); flex-shrink:0; margin-right:12px;
}
.hamburger-btn:hover { border-color:rgba(99,102,241,0.45); color:var(--accent-light); background:rgba(99,102,241,0.10); }
.hamburger-btn i { width:16px; }

.search-box {
  width:300px; background:rgba(10,18,55,0.50);
  border:1px solid rgba(99,102,241,0.18); border-radius:var(--r-md);
  padding:9px 16px; display:flex; align-items:center; gap:10px;
  transition:all var(--t-base); backdrop-filter:blur(12px);
}
.search-box:focus-within {
  border-color:rgba(99,102,241,0.50);
  background:rgba(14,24,70,0.60);
  box-shadow:0 0 0 3px rgba(99,102,241,0.10), 0 0 24px rgba(99,102,241,0.15);
}
.search-box input { background:transparent; border:none; outline:none; color:var(--text-1); font-size:0.82rem; width:100%; }
.search-box input::placeholder { color:var(--text-4); }
.search-box i { color:var(--text-4); width:15px; flex-shrink:0; }

.top-bar-right { display:flex; align-items:center; gap:10px; }

.pipeline-status-chip {
  display:flex; align-items:center; gap:8px;
  background:rgba(14,22,60,0.60); border:1px solid rgba(99,102,241,0.22);
  border-radius:var(--r-full); padding:7px 18px;
  font-size:0.74rem; font-weight:600; letter-spacing:1.2px;
  font-family:'JetBrains Mono',monospace; color:var(--text-3);
  transition:all var(--t-base); backdrop-filter:blur(8px);
}
.pipeline-status-chip.running { border-color:rgba(99,102,241,0.45); color:var(--accent-light); background:rgba(99,102,241,0.12); }
.pipeline-status-chip.done    { border-color:rgba(0,255,163,0.40); color:var(--emerald); background:rgba(0,255,163,0.08); }
.pipeline-status-chip.error   { border-color:rgba(251,77,109,0.40); color:var(--rose); background:rgba(251,77,109,0.08); }
.pipeline-status-chip .chip-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pipeline-status-chip.running .chip-dot { animation:pulse-dot 1.2s ease infinite; }

.icon-btn-ghost {
  background:transparent; border:1px solid rgba(99,102,241,0.18);
  color:var(--text-3); width:34px; height:34px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t-base);
}
.icon-btn-ghost i { width:16px; }
.icon-btn-ghost:hover { border-color:rgba(99,102,241,0.45); color:var(--accent-light); background:rgba(99,102,241,0.10); }

/* ── Content Area ──────────────────────────────────── */
.content-area { flex:1; padding:28px 32px; overflow-y:auto; scroll-behavior:smooth; }
@media (max-width:1000px) { .content-area { padding:20px; } .top-bar { padding:0 20px; } }
@media (max-width:600px)  { .content-area { padding:14px; } }

/* ── Page System ───────────────────────────────────── */
.page { display:none; }
.page.active { display:block; animation:float-in 0.38s var(--ease-out); }
.hidden { display:none !important; }
.spin { display:inline-block; animation:spin-kf 0.75s linear infinite; }

/* ── Layouts ───────────────────────────────────────── */
.dashboard-layout { display:grid; grid-template-columns:1fr 310px; gap:24px; max-width:1440px; margin:0 auto; }
.single-col-layout { max-width:880px; margin:0 auto; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.page-header h2 {
  font-family:'Outfit',sans-serif; font-size:1.65rem; font-weight:800;
  background:linear-gradient(135deg,#fff 0%,var(--accent-light) 50%,var(--cyan-dim) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
@media (max-width:1200px) { .dashboard-layout { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════
   GLASS CARDS
   ══════════════════════════════════════════ */
.premium-card {
  background:var(--glass-1);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg); padding:26px;
  margin-bottom:22px; position:relative; overflow:hidden;
  transition:border-color var(--t-slow), transform var(--t-slow), box-shadow var(--t-slow);
  box-shadow:0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  animation:float-in 0.4s var(--ease-out) both;
}
/* Top shimmer line */
.premium-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.5) 40%,rgba(0,212,255,0.4) 60%,transparent);
  opacity:0.6;
}
/* Hover glass sheen */
.premium-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(99,102,241,0.03) 50%,
    transparent 100%);
  opacity:0; transition:opacity var(--t-slow); pointer-events:none; border-radius:inherit;
}
.premium-card:hover {
  border-color:var(--glass-border-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 50px rgba(0,0,0,0.55), 0 0 40px rgba(99,102,241,0.10),
             inset 0 1px 0 rgba(255,255,255,0.09);
}
.premium-card:hover::after { opacity:1; }

.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.card-header h3 {
  font-size:0.67rem; font-weight:700; color:var(--text-3);
  text-transform:uppercase; letter-spacing:2.5px;
  display:flex; align-items:center; gap:7px;
}
.card-header h3 i { width:13px; opacity:0.8; }
.card-header-actions { display:flex; align-items:center; gap:6px; }

/* Staggered entrance for multiple cards */
.premium-card:nth-child(1) { animation-delay:0ms; }
.premium-card:nth-child(2) { animation-delay:60ms; }
.premium-card:nth-child(3) { animation-delay:120ms; }
.premium-card:nth-child(4) { animation-delay:180ms; }

/* ══════════════════════════════════════════
   FORMS & INPUTS
   ══════════════════════════════════════════ */
.input-minimal { margin-top:16px; }
.input-minimal label {
  font-size:0.62rem; color:var(--text-4); font-weight:600; margin-bottom:8px;
  display:block; text-transform:uppercase; letter-spacing:1.8px;
}
.input-minimal input,
.input-minimal select {
  width:100%;
  background:rgba(4,8,30,0.55);
  border:1px solid rgba(99,102,241,0.18);
  padding:12px 15px; border-radius:var(--r-sm);
  color:var(--text-1); font-size:0.88rem; outline:none;
  transition:all var(--t-base); font-family:'Inter',sans-serif;
  appearance:none; -webkit-appearance:none;
}
.input-minimal select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236366f1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.input-minimal input:focus,
.input-minimal select:focus {
  border-color:rgba(99,102,241,0.55);
  background:rgba(8,14,50,0.70);
  box-shadow:0 0 0 3px rgba(99,102,241,0.10), 0 0 20px rgba(99,102,241,0.12);
}
.input-minimal input::placeholder { color:var(--text-5); }
.input-minimal select option,
.input-minimal select optgroup {
  background:rgba(5,8,28,0.98); color:var(--text-1); font-size:0.86rem;
}
.input-minimal select optgroup { color:var(--text-4); font-size:0.70rem; font-style:normal; letter-spacing:0.5px; }

/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
/* Primary — Generate Script */
.action-btn {
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
  color:#fff; border:none; border-radius:var(--r-md);
  padding:11px 22px; font-size:0.83rem; font-weight:600;
  cursor:pointer; transition:all var(--t-base);
  letter-spacing:0.3px; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 4px 20px rgba(99,102,241,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
}
.action-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);
  opacity:0; transition:opacity var(--t-base);
}
.action-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,0.55), inset 0 1px 0 rgba(255,255,255,0.18); filter:brightness(1.1); }
.action-btn:hover::before { opacity:1; }
.action-btn:active { transform:translateY(0); }

/* Secondary — AI Rewrite */
.secondary-btn {
  background:rgba(14,24,70,0.60);
  color:var(--text-2); border:1px solid rgba(99,102,241,0.25);
  border-radius:var(--r-md); padding:11px 22px;
  font-size:0.83rem; font-weight:500;
  cursor:pointer; transition:all var(--t-base);
  backdrop-filter:blur(8px);
  display:inline-flex; align-items:center; gap:7px;
}
.secondary-btn:hover { border-color:rgba(99,102,241,0.55); color:var(--accent-light); background:rgba(20,35,100,0.65); box-shadow:0 0 24px rgba(99,102,241,0.15); }

/* Outline */
.action-btn-outline {
  background:transparent; color:var(--text-3);
  border:1px solid rgba(99,102,241,0.20); border-radius:var(--r-md);
  padding:8px 18px; font-size:0.78rem; font-weight:500;
  cursor:pointer; transition:all var(--t-base);
  display:inline-flex; align-items:center; gap:6px;
}
.action-btn-outline:hover { border-color:rgba(99,102,241,0.50); color:var(--accent-light); background:rgba(99,102,241,0.08); box-shadow:0 0 16px rgba(99,102,241,0.12); }

/* BUILD REEL — Hero button */
.publish-btn {
  width:100%; padding:14px 20px; border:none; border-radius:var(--r-md);
  background:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#06b6d4 100%);
  background-size:200% 100%;
  color:#fff; font-size:0.88rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all var(--t-base); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 28px rgba(99,102,241,0.50), inset 0 1px 0 rgba(255,255,255,0.20);
  animation:glow-breathe 3s ease-in-out infinite;
}
.publish-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transform:translateX(-100%); transition:transform 0.6s var(--ease);
}
.publish-btn:hover:not(:disabled) {
  transform:translateY(-2px);
  background-position:100% 0;
  box-shadow:0 10px 40px rgba(99,102,241,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
}
.publish-btn:hover:not(:disabled)::before { transform:translateX(100%); }
.publish-btn:disabled { opacity:0.25; cursor:not-allowed; animation:none; }

/* Danger */
.danger-btn {
  background:rgba(251,77,109,0.10); color:var(--rose);
  border:1px solid rgba(251,77,109,0.28); border-radius:var(--r-md);
  padding:8px 18px; font-size:0.78rem; font-weight:600;
  cursor:pointer; transition:all var(--t-base);
  display:inline-flex; align-items:center; gap:6px;
}
.danger-btn:hover { background:rgba(251,77,109,0.20); border-color:rgba(251,77,109,0.55); box-shadow:0 0 20px rgba(251,77,109,0.22); transform:translateY(-1px); }

.btn-loading { opacity:0.55; pointer-events:none; }

/* Style toggle buttons */
.style-btn {
  flex:1; background:rgba(4,8,30,0.55); color:var(--text-4);
  border:1px solid rgba(99,102,241,0.18); border-radius:var(--r-sm);
  padding:8px 6px; font-size:0.70rem; font-weight:600;
  cursor:pointer; transition:all var(--t-base); letter-spacing:0.5px;
  text-transform:uppercase;
}
.style-btn:hover,
.style-btn.active {
  border-color:rgba(99,102,241,0.55); color:var(--accent-light);
  background:rgba(99,102,241,0.15); box-shadow:0 0 16px rgba(99,102,241,0.16);
}

/* ══════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════ */
.progress-bar-bg { height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; margin-top:16px; position:relative; }
.progress-bar-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--cyan));
  background-size:200% 100%;
  transition:width 0.7s var(--ease); border-radius:2px;
  animation:shimmer 2s linear infinite;
}
.progress-bar-glow { position:absolute; right:0; top:50%; transform:translate(50%,-50%); width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.progress-label-text { font-size:0.68rem; color:var(--text-4); margin-top:10px; text-align:center; font-family:'JetBrains Mono',monospace; letter-spacing:0.3px; }

/* ══════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:28px; right:28px;
  transform:translateY(120px) scale(0.94); opacity:0;
  background:rgba(6,10,35,0.92); backdrop-filter:blur(24px) saturate(1.5);
  color:var(--text-1); padding:14px 22px; border-radius:var(--r-md);
  font-weight:500; font-size:0.84rem;
  box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,102,241,0.20);
  z-index:10000; transition:all var(--t-slow) var(--ease-spring);
  max-width:380px; pointer-events:none;
  border-left:3px solid rgba(99,102,241,0.50);
}
.toast--visible { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.toast--success { border-left-color:var(--emerald); }
.toast--error   { border-left-color:var(--rose); }
.toast--warn    { border-left-color:var(--amber); }
.toast--info    { border-left-color:var(--accent); }

/* ══════════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════════ */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:var(--r-full); font-size:0.63rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; }
.status-badge--done     { background:rgba(0,255,163,0.12); color:var(--emerald); border:1px solid rgba(0,255,163,0.25); }
.status-badge--running  { background:rgba(99,102,241,0.14); color:var(--accent-light); border:1px solid rgba(99,102,241,0.30); }
.status-badge--queued   { background:rgba(255,255,255,0.06); color:var(--text-3); border:1px solid rgba(255,255,255,0.10); }
.status-badge--error    { background:rgba(251,77,109,0.12); color:var(--rose); border:1px solid rgba(251,77,109,0.25); }
.status-badge--cancelled{ background:rgba(251,191,36,0.10); color:var(--amber); border:1px solid rgba(251,191,36,0.22); }
.status-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-badge--running .status-dot { animation:pulse-dot 1.4s ease-in-out infinite; }

/* ══════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.80); backdrop-filter:blur(16px);
  z-index:5000; display:flex; align-items:center; justify-content:center;
  animation:scale-in 0.22s var(--ease-out);
}
.modal-overlay.hidden { display:none; }
.modal-content {
  background:rgba(6,10,38,0.95); backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(99,102,241,0.25); border-radius:var(--r-xl);
  padding:30px; max-width:460px; width:90%; max-height:82vh; overflow-y:auto;
  box-shadow:0 40px 100px rgba(0,0,0,0.65); position:relative;
}
.modal-content h3 { font-family:'Outfit',sans-serif; font-size:1rem; font-weight:700; margin-bottom:22px; color:var(--text-1); }
.modal-close {
  position:absolute; top:14px; right:14px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10);
  color:var(--text-3); cursor:pointer; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm);
  transition:all var(--t-fast);
}
.modal-close:hover { background:rgba(251,77,109,0.15); color:var(--rose); border-color:rgba(251,77,109,0.30); }
.preview-modal-body video { width:100%; max-height:55vh; border-radius:var(--r-sm); background:#000; }
.preview-modal-actions { display:flex; gap:10px; margin-top:18px; }

/* ══════════════════════════════════════════
   KEYBOARD SHORTCUTS OVERLAY
   ══════════════════════════════════════════ */
.kb-overlay {
  position:fixed; inset:0; z-index:8000;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center;
  animation:scale-in 0.2s var(--ease-out);
}
.kb-overlay.hidden { display:none; }
.kb-panel {
  background:rgba(6,10,38,0.96); border:1px solid rgba(99,102,241,0.28);
  border-radius:var(--r-xl); padding:30px; width:400px; max-width:92vw;
  box-shadow:0 40px 80px rgba(0,0,0,0.60);
}
.kb-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; border-bottom:1px solid rgba(99,102,241,0.15); padding-bottom:14px; }
.kb-title {
  font-family:'Outfit',sans-serif; font-size:0.96rem; font-weight:700;
  background:linear-gradient(135deg,var(--text-1),var(--accent-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.kb-grid { display:flex; flex-direction:column; gap:10px; }
.kb-row { display:grid; grid-template-columns:28px 28px 1fr; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-2); }
kbd {
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  border-bottom:2px solid rgba(255,255,255,0.12); border-radius:5px;
  padding:3px 7px; font-family:'JetBrains Mono',monospace;
  font-size:0.72rem; color:var(--text-1); min-width:26px; text-align:center;
}

/* ══════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════ */
.mono-tag {
  font-family:'JetBrains Mono',monospace; font-size:0.70rem;
  color:var(--accent-bright);
  background:rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.28);
  border-radius:6px; padding:2px 8px;
}

/* ══════════════════════════════════════════
   MISSION CONTROL — WEBGL SECTION
   ══════════════════════════════════════════ */
.mc-webgl-section {
  margin-bottom:24px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(99,102,241,0.22);
  background:rgba(3,5,20,0.92);
  box-shadow:0 0 60px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}
.mc-webgl-header { padding:12px 20px; border-bottom:1px solid rgba(255,255,255,0.05); }
.mc-webgl-title {
  display:flex; align-items:center; gap:12px; position:relative;
  font-size:0.70rem; font-weight:700; letter-spacing:2.5px;
  color:var(--text-3); text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}
.mc-corner { position:absolute; width:10px; height:10px; border-color:rgba(99,102,241,0.6); border-style:solid; }
.mc-corner--tl { top:-4px; left:-4px; border-width:2px 0 0 2px; }
.mc-corner--tr { top:-4px; right:-4px; border-width:2px 2px 0 0; }

/* Split: canvas + agents */
.mc-split-layout { display:flex; min-height:190px; }
.mc-canvas-compact {
  position:relative; flex:0 0 36%; overflow:hidden;
  background:linear-gradient(180deg,#020310 0%,#040520 100%);
  border-right:1px solid rgba(255,255,255,0.04);
}
.mc-canvas-compact canvas { display:block; width:100%; height:100%; }
.mc-canvas-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
}

/* Agent Grid 2×5 */
.mc-agent-grid {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:rgba(255,255,255,0.025);
}
.mc-agent-card {
  display:flex; flex-direction:column; justify-content:center;
  gap:4px; padding:9px 14px;
  background:rgba(5,9,30,0.88);
  font-family:'JetBrains Mono',monospace;
  transition:all 0.28s var(--ease);
  position:relative; overflow:hidden; min-height:36px;
}
/* Left status bar */
.mc-agent-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:rgba(99,102,241,0.15); transition:all 0.28s var(--ease);
}

/* Agent card header */
.agent-card-header { display:flex; align-items:center; gap:6px; }
.agent-index {
  font-size:0.52rem; color:var(--text-5); opacity:0.6;
  font-weight:700; letter-spacing:0.5px; min-width:14px;
}
.agent-name { font-size:0.68rem; color:var(--text-3); font-weight:500; letter-spacing:0.3px; flex:1; }
.mc-agent-card .chip-dot { width:5px; height:5px; border-radius:50%; background:var(--text-5); transition:all 0.28s; flex-shrink:0; }
.mc-agent-card .chip-engine { font-size:0.50rem; color:var(--text-5); opacity:0.4; margin-left:auto; text-transform:uppercase; letter-spacing:0.5px; }

/* Agent result badge */
.chip-result {
  display:none; font-size:0.58rem;
  font-family:'JetBrains Mono',monospace; color:var(--text-3);
  background:rgba(255,255,255,0.05); border-radius:3px;
  padding:1px 6px; margin-left:20px;
  max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:0.2px; line-height:1.4;
}
.chip-result.visible { display:inline-block; animation:log-in 0.2s var(--ease-out); }
.chip-result.result-ok    { color:var(--emerald); background:rgba(0,255,163,0.08); }
.chip-result.result-warn  { color:var(--amber); background:rgba(251,191,36,0.08); }
.chip-result.result-error { color:var(--rose); background:rgba(251,77,109,0.08); }

/* Agent card STATES */
.mc-agent-card.active { background:rgba(0,212,255,0.06); }
.mc-agent-card.active::before { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.mc-agent-card.active .chip-dot { background:var(--cyan); box-shadow:0 0 7px var(--cyan); animation:pulse-dot 1s ease infinite; }
.mc-agent-card.active .agent-name { color:var(--cyan); }
.mc-agent-card.active .agent-index { color:var(--cyan); opacity:0.8; }

.mc-agent-card.done { background:rgba(0,255,163,0.04); }
.mc-agent-card.done::before { background:var(--emerald); }
.mc-agent-card.done .chip-dot { background:var(--emerald); }
.mc-agent-card.done .agent-name { color:var(--emerald-dim); }
.mc-agent-card.done .agent-index { color:var(--emerald); opacity:0.6; }

.mc-agent-card.error { background:rgba(251,77,109,0.06); }
.mc-agent-card.error::before { background:var(--rose); box-shadow:0 0 10px var(--rose); }
.mc-agent-card.error .chip-dot { background:var(--rose); animation:pulse-dot 0.6s ease infinite; }
.mc-agent-card.error .agent-name { color:var(--rose); }
.mc-agent-card.error .agent-index { color:var(--rose); opacity:0.8; }

/* Agent results log */
.mc-agent-results-log {
  border-top:1px solid rgba(255,255,255,0.05);
  background:rgba(2,4,16,0.70);
  max-height:0; overflow:hidden;
  transition:max-height 0.4s var(--ease), padding 0.3s var(--ease);
}
.mc-agent-results-log:not(.hidden) { max-height:280px; padding:12px 20px 14px; }
.results-log-header {
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  font-weight:700; letter-spacing:2px; color:var(--text-4);
  text-transform:uppercase; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.05); margin-bottom:8px;
}
.results-log-body {
  display:flex; flex-direction:column; gap:5px;
  max-height:190px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(99,102,241,0.25) transparent;
}
.results-log-body::-webkit-scrollbar { width:4px; }
.results-log-body::-webkit-scrollbar-thumb { background:rgba(99,102,241,0.28); border-radius:2px; }
.result-log-entry {
  display:grid; grid-template-columns:58px 88px 1fr;
  gap:10px; align-items:start;
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; line-height:1.5;
  padding:5px 8px; border-radius:5px;
  background:rgba(255,255,255,0.025);
  border-left:2px solid var(--text-5);
  animation:log-in 0.25s var(--ease-out);
}
.result-log-entry.log-ok    { border-left-color:var(--emerald); }
.result-log-entry.log-warn  { border-left-color:var(--amber); }
.result-log-entry.log-error { border-left-color:var(--rose); }
.result-log-entry.log-info  { border-left-color:var(--accent); }
.result-log-time  { color:var(--text-4); }
.result-log-agent { color:var(--cyan); font-weight:600; }
.result-log-msg   { color:var(--text-2); word-break:break-word; }

/* Emergency Stop */
.emergency-stop-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  font-weight:700; letter-spacing:1.5px; color:#fff;
  background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
  border:1px solid rgba(251,77,109,0.55); border-radius:var(--r-full);
  padding:5px 14px; cursor:pointer; transition:all var(--t-base);
  box-shadow:0 0 18px rgba(220,38,38,0.40);
  animation:emergency-glow 1.5s ease-in-out infinite;
  margin-left:auto;
}
.emergency-stop-btn:hover { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 0 32px rgba(239,68,68,0.60); transform:scale(1.04); }
.emergency-stop-btn:active { transform:scale(0.97); }
.emergency-stop-btn.hidden { display:none; }

/* Status badge in header */
#pipelineStatusBadge { font-size:0.62rem; }

/* ══════════════════════════════════════════
   DIRECTOR AGENT CARD
   ══════════════════════════════════════════ */
.director-card { border-color:rgba(99,102,241,0.25); }
.director-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--text-5); margin-right:8px; vertical-align:middle;
  transition:all var(--t-base);
}
.director-dot.active { background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse-dot 1.2s ease-in-out infinite; }
.director-dot.done  { background:var(--emerald); box-shadow:0 0 10px var(--emerald); }
.director-dot.error { background:var(--rose); box-shadow:0 0 10px var(--rose); animation:pulse-dot 0.6s ease infinite; }

/* Analytics mini row */
.analytics-mini-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-bottom:16px;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.04);
}
.dna-stat-item .val {
  font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--text-1),var(--accent-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.dna-stat-item .lab {
  font-size:0.58rem; color:var(--text-4); margin-top:5px;
  text-transform:uppercase; letter-spacing:1.5px; font-weight:600;
}

/* Activity Feed */
.activity-feed {
  background:rgba(2,4,18,0.55); border:1px solid rgba(99,102,241,0.12);
  border-radius:var(--r-sm); padding:14px 18px;
  max-height:220px; overflow-y:auto;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  line-height:1.7; display:flex; flex-direction:column; gap:3px;
}
.activity-feed::-webkit-scrollbar { width:3px; }
.activity-feed::-webkit-scrollbar-thumb { background:rgba(99,102,241,0.25); border-radius:2px; }
.feed-line { display:flex; gap:10px; align-items:baseline; animation:log-in 0.2s var(--ease-out); }
.feed-time  { color:var(--text-5); flex-shrink:0; font-size:0.68rem; }
.feed-agent { flex-shrink:0; font-size:0.70rem; font-weight:600; letter-spacing:0.5px; padding:1px 6px; border-radius:4px; background:rgba(255,255,255,0.06); }
.feed-line--info .feed-agent    { color:var(--accent-light); }
.feed-line--success .feed-agent { color:var(--emerald); }
.feed-line--warn .feed-agent    { color:var(--amber); }
.feed-line--error .feed-agent   { color:var(--rose); }
.feed-line--info    { color:var(--text-3); }
.feed-line--success { color:var(--text-1); }
.feed-line--warn    { color:var(--amber); }
.feed-line--error   { color:var(--rose); }

/* Chart */
.chart-container { height:110px; margin-top:14px; position:relative; }

/* ══════════════════════════════════════════
   SCRIPT EDITOR
   ══════════════════════════════════════════ */
.editor-container {
  background:rgba(2,4,18,0.60); border:1px solid rgba(99,102,241,0.18);
  border-radius:var(--r-md); height:260px; display:flex;
  margin-bottom:16px; overflow:hidden;
  transition:border-color var(--t-base);
}
.editor-container:focus-within {
  border-color:rgba(99,102,241,0.40);
  box-shadow:0 0 0 3px rgba(99,102,241,0.08);
}
.line-numbers {
  width:42px; padding:16px 0; text-align:center; color:var(--text-5);
  font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  background:rgba(0,0,0,0.20); border-right:1px solid rgba(99,102,241,0.12);
  display:flex; flex-direction:column; gap:2px; line-height:1.65;
  user-select:none;
}
#scriptOutput {
  flex:1; padding:16px 18px; background:transparent; border:none; outline:none;
  color:var(--text-1); font-family:'JetBrains Mono',monospace;
  font-size:0.84rem; line-height:1.65; resize:none;
}
#scriptOutput::placeholder { color:var(--text-5); }

/* ══════════════════════════════════════════
   BUILD CONFIG — GEMINI ENGINE SELECTOR
   ══════════════════════════════════════════ */
#geminiModelGroup {
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid rgba(0,212,255,0.18);
  background:rgba(0,212,255,0.04);
  padding:12px; margin-top:8px !important;
  animation:float-in 0.25s var(--ease-out);
}
#geminiModelGroup label { color:var(--cyan) !important; }
#geminiModelGroup select {
  border-color:rgba(0,212,255,0.25) !important;
  background:rgba(0,10,30,0.60) !important;
}
#geminiModelGroup select:focus { border-color:rgba(0,212,255,0.55) !important; box-shadow:0 0 0 3px rgba(0,212,255,0.10) !important; }

/* Highlight recommended option */
#geminiModel option[value="gemini-2.5-flash"] { color:var(--cyan); }
#geminiModel option[value="gemini-2.5-pro"]   { color:var(--violet); }

/* ══════════════════════════════════════════
   FINOPS TOKEN TRACKER
   ══════════════════════════════════════════ */
.finops-card { border-color:rgba(251,191,36,0.18); }
.finops-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.finops-stat { text-align:center; }
.finops-val {
  font-family:'Outfit',sans-serif; font-size:1.45rem; font-weight:700;
  color:var(--amber); line-height:1;
}
.finops-lab { font-size:0.56rem; color:var(--text-4); margin-top:4px; text-transform:uppercase; letter-spacing:1.2px; }
.finops-bar-bg { height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden; }
.finops-bar-fill { height:100%; background:linear-gradient(90deg,var(--amber),var(--rose)); border-radius:2px; transition:width 0.8s var(--ease); }
#finopsCacheRate { font-size:0.62rem; }

/* ══════════════════════════════════════════
   TELEMETRY CARD
   ══════════════════════════════════════════ */
.telemetry-card .card-header { margin-bottom:14px; }
.telemetry-grid { display:flex; flex-direction:column; gap:12px; }
.tele-row { display:grid; grid-template-columns:46px 1fr 55px; align-items:center; gap:12px; }
.tele-label { font-size:0.68rem; color:var(--text-3); font-family:'JetBrains Mono',monospace; letter-spacing:1px; text-transform:uppercase; }
.tele-bar-bg { height:4px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; position:relative; }
.tele-bar-fill { height:100%; border-radius:3px; transition:width 0.8s var(--ease); }
.tele-bar-fill::after { content:''; position:absolute; right:-1px; top:-2px; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; }
.tele-bar--cyan    { background:var(--cyan); color:var(--cyan); }
.tele-bar--indigo  { background:var(--accent-light); color:var(--accent-light); }
.tele-bar--emerald { background:var(--emerald); color:var(--emerald); }
.tele-bar--amber   { background:var(--amber); color:var(--amber); }
.tele-val { text-align:right; font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-3); }

/* Responsive */
@media (max-width:900px) {
  .mc-split-layout { flex-direction:column; }
  .mc-canvas-compact { flex:0 0 140px; border-right:none; border-bottom:1px solid rgba(255,255,255,0.04); }
  .mc-agent-grid { grid-template-columns:1fr 1fr; }
  .analytics-mini-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) { .mc-agent-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════
   DASHBOARD — METRICS GRID
   ══════════════════════════════════════════ */
.metrics-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; margin-bottom:24px;
}
.metric-card {
  background:var(--glass-1); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--r-md);
  padding:22px; position:relative; overflow:hidden;
  transition:all var(--t-base);
}
.metric-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.4) 50%,transparent);
}
.metric-card:hover { border-color:var(--glass-border-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.metric-card .metric-label { font-size:0.58rem; text-transform:uppercase; letter-spacing:1.8px; color:var(--text-4); margin-bottom:10px; font-weight:700; }
.metric-card .metric-value { font-family:'Outfit',sans-serif; font-size:1.85rem; font-weight:800; color:var(--text-1); line-height:1; }
.metric-card .metric-icon { position:absolute; top:18px; right:18px; width:18px; color:var(--text-4); opacity:0.25; }
.metric-card--indigo .metric-value { color:var(--accent-light); }
.metric-card--cyan    .metric-value { color:var(--cyan); }
.metric-card--emerald .metric-value { color:var(--emerald); }
.metric-card--amber   .metric-value { color:var(--amber); }

/* Storage bar */
.storage-bar { width:100%; height:5px; background:rgba(255,255,255,0.05); border-radius:var(--r-full); overflow:hidden; margin:10px 0; }
.storage-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--cyan)); border-radius:var(--r-full); transition:width 0.7s var(--ease); }

/* DNA stats */
.dna-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ══════════════════════════════════════════
   JOB TABLE
   ══════════════════════════════════════════ */
.job-table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.80rem; }
.job-table th {
  text-align:left; padding:10px 16px; color:var(--text-4);
  font-size:0.60rem; text-transform:uppercase; letter-spacing:1.8px;
  border-bottom:1px solid rgba(99,102,241,0.12); font-weight:700;
}
.job-table td {
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.025);
  color:var(--text-2); vertical-align:middle;
}
.job-table tr { transition:background var(--t-fast); }
.job-table tr:hover td { background:rgba(99,102,241,0.06); }
.job-table tr:last-child td { border-bottom:none; }

.job-action-btn {
  background:transparent; border:1px solid rgba(99,102,241,0.18);
  color:var(--text-4); padding:3px 10px; border-radius:var(--r-full);
  font-size:0.63rem; font-weight:500; cursor:pointer; transition:all var(--t-fast);
}
.job-action-btn:hover { border-color:var(--text-3); color:var(--text-1); }
.job-action-btn--cancel:hover { border-color:var(--rose); color:var(--rose); background:rgba(251,77,109,0.10); }
.job-action-btn--retry:hover  { border-color:var(--emerald); color:var(--emerald); background:rgba(0,255,163,0.10); }

/* Video preview */
.video-preview-wrapper {
  aspect-ratio:16/9; background:rgba(0,0,0,0.50);
  border-radius:var(--r-md); position:relative; overflow:hidden;
  margin-bottom:18px; border:1px solid rgba(99,102,241,0.15);
}
.video-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 40%, rgba(99,102,241,0.07), transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(139,92,246,0.05), transparent 60%),
             var(--bg-void);
}
.vp-inner { display:flex; flex-direction:column; align-items:center; gap:10px; }
.play-icon { width:48px; color:var(--text-4); opacity:0.35; transition:all var(--t-slow); }
.vp-label  { font-size:0.62rem; color:var(--text-5); letter-spacing:1.5px; text-transform:uppercase; font-family:'JetBrains Mono',monospace; }
.video-placeholder:hover .play-icon { opacity:0.75; color:var(--accent-light); transform:scale(1.12); }

/* Reels grid */
.reels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.reels-grid .premium-card { margin-bottom:0; }
.reels-empty { text-align:center; padding:80px 40px; color:var(--text-4); }
.reels-empty i { width:56px; height:56px; margin-bottom:16px; opacity:0.12; }

/* Upgrade button */
.upgrade-btn {
  background:var(--accent-gradient); color:#fff; border:none;
  border-radius:var(--r-full); padding:7px 18px; font-size:0.74rem; font-weight:600;
  letter-spacing:0.5px; cursor:pointer; transition:all var(--t-base);
  box-shadow:0 0 22px rgba(99,102,241,0.28);
}
.upgrade-btn:hover { transform:translateY(-1px); box-shadow:0 4px 28px rgba(99,102,241,0.45); }

/* ══════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════ */
.profile-header { display:flex; align-items:center; gap:24px; margin-bottom:32px; }
.profile-avatar {
  width:80px; height:80px; border-radius:var(--r-lg); flex-shrink:0;
  background:var(--accent-gradient); display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-size:2rem; font-weight:800; color:#fff;
  box-shadow:0 8px 36px rgba(99,102,241,0.35);
}
.profile-info h2 { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.profile-info .profile-email { font-size:0.86rem; color:var(--text-3); }
.profile-info .profile-role {
  display:inline-block; margin-top:8px; font-size:0.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.2px; padding:3px 12px;
  border-radius:var(--r-full); background:rgba(99,102,241,0.16); color:var(--accent-light);
  border:1px solid rgba(99,102,241,0.28);
}
.profile-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.profile-stat-card {
  background:var(--glass-1); border:1px solid var(--glass-border);
  border-radius:var(--r-md); padding:22px; text-align:center; transition:border-color var(--t-base);
}
.profile-stat-card:hover { border-color:var(--glass-border-hover); }
.profile-stat-card .stat-value { font-family:'Outfit',sans-serif; font-size:1.85rem; font-weight:800; line-height:1; margin-bottom:6px; }
.profile-stat-card .stat-label { font-size:0.58rem; color:var(--text-4); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.profile-stat-card:nth-child(1) .stat-value { color:var(--accent-light); }
.profile-stat-card:nth-child(2) .stat-value { color:var(--cyan); }
.profile-stat-card:nth-child(3) .stat-value { color:var(--emerald); }

/* ══════════════════════════════════════════
   ADMIN PAGE
   ══════════════════════════════════════════ */
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.log-viewer {
  background:rgba(2,4,18,0.50); border:1px solid rgba(99,102,241,0.14);
  border-radius:var(--r-md); padding:16px; font-family:'JetBrains Mono',monospace;
  font-size:0.74rem; line-height:1.8; color:var(--text-3); max-height:280px; overflow-y:auto;
}
.log-viewer .log-line { display:flex; gap:8px; }
.log-viewer .log-time   { color:var(--text-5); flex-shrink:0; }
.log-viewer .log-level--info  { color:var(--accent-light); }
.log-viewer .log-level--warn  { color:var(--amber); }
.log-viewer .log-level--error { color:var(--rose); }
.env-table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.80rem; }
.env-table td { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.025); }
.env-table td:first-child { color:var(--text-3); font-family:'JetBrains Mono',monospace; font-size:0.74rem; }
.env-table td:last-child { color:var(--text-1); text-align:right; }
.workflow-step { display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:0.84rem; color:var(--text-3); }
.step-badge {
  font-size:0.60rem; background:rgba(99,102,241,0.15); color:var(--accent-light);
  padding:2px 9px; border-radius:var(--r-full); font-weight:600; letter-spacing:0.5px;
}

/* ══════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════ */
.login-page {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-void);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(88,60,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0,200,255,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(168,85,247,0.10) 0%, transparent 55%);
}
.login-page.hidden { display:none !important; }

.login-container { text-align:center; width:100%; max-width:400px; padding:24px; }
.login-brand { margin-bottom:32px; }
.login-brand .login-logo {
  font-size:3rem; color:var(--accent-light); display:block; margin-bottom:12px;
  text-shadow:0 0 40px rgba(99,102,241,0.60);
  animation:loginPulse 3s ease-in-out infinite;
}
.login-brand h1 {
  font-family:'Outfit',sans-serif; font-size:2rem; font-weight:900;
  letter-spacing:0.12em; color:var(--text-1); margin:0;
  background:linear-gradient(135deg,#fff 0%,var(--accent-light) 60%,var(--cyan-dim) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.login-subtitle {
  font-size:0.80rem; color:var(--text-4); letter-spacing:0.10em;
  text-transform:uppercase; margin-top:6px;
}
.login-card {
  background:rgba(6,10,38,0.90); border:1px solid rgba(99,102,241,0.28);
  border-radius:var(--r-xl); padding:34px 30px;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 40px 100px rgba(0,0,0,0.55), 0 0 60px rgba(99,102,241,0.10);
  position:relative; overflow:hidden;
}
.login-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,0.6) 40%,rgba(0,212,255,0.5) 60%,transparent);
}
.login-card h2 { font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:700; color:var(--text-1); margin:0 0 26px; }
.login-form .input-minimal { text-align:left; }
.login-form .input-minimal input { width:100%; box-sizing:border-box; }
.login-error { color:var(--rose); font-size:0.82rem; min-height:20px; margin-top:8px; text-align:left; }
.login-hint { font-size:0.76rem; color:var(--text-4); margin-top:18px; margin-bottom:0; }

/* ══════════════════════════════════════════
   SETTINGS / MISC
   ══════════════════════════════════════════ */
#app-shell.hidden { display:none !important; }

/* Sidebar collapse toggle */
.app-shell.sidebar-collapsed .side-nav .sidebar-user { justify-content:center; }

/* ══════════════════════════════════════════
   FULL RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:1200px) {
  .metrics-grid    { grid-template-columns:repeat(2,1fr); }
  .admin-grid      { grid-template-columns:1fr; }
}
@media (max-width:1000px) {
  .hamburger-btn { display:flex; }
  .analytics-mini-row { grid-template-columns:repeat(2,1fr); }
  .finops-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .hud-metrics  { display:none; }
  .metrics-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .content-area   { padding:14px; }
  .premium-card   { padding:18px; }
  .metrics-grid   { grid-template-columns:1fr; }
  .reels-grid     { grid-template-columns:1fr; }
  .profile-header { flex-direction:column; text-align:center; }
  .profile-stats-grid { grid-template-columns:1fr; }
  .dna-stats-grid { grid-template-columns:1fr 1fr; }
}

/* Caption color swatches */
.caption-color-swatch {
  width:24px; height:24px; border-radius:6px; border:2px solid transparent;
  cursor:pointer; transition:all var(--t-fast); flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15);
}
.caption-color-swatch:hover  { transform:scale(1.15); box-shadow:0 0 0 2px rgba(255,255,255,0.40); }
.caption-color-swatch.active { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan),0 0 10px rgba(0,212,255,0.35); transform:scale(1.10); }

/* Range slider accent */
input[type=range] { accent-color:var(--accent); }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:rgba(99,102,241,0.25); }
input[type=range]::-webkit-slider-thumb { width:14px; height:14px; border-radius:50%; background:var(--accent-light); border:none; box-shadow:0 0 8px rgba(99,102,241,0.5); }