/* ============================================================
   ZERO — Autonomous AI Workforce
   Design system: dark, premium, glass. Cool-slate neutrals,
   violet primary + teal secondary accents.
   ============================================================ */

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

:root {
  /* neutrals — cool slate */
  --bg-0: oklch(0.145 0.012 265);   /* app base */
  --bg-1: oklch(0.175 0.014 265);   /* panel */
  --bg-2: oklch(0.205 0.016 265);   /* elevated */
  --bg-3: oklch(0.245 0.018 265);   /* hover / input */
  --bg-glass: oklch(0.20 0.016 265 / 0.55);

  --line: oklch(1 0 0 / 0.07);
  --line-strong: oklch(1 0 0 / 0.12);

  --tx-0: oklch(0.97 0.004 265);    /* primary text */
  --tx-1: oklch(0.78 0.008 265);    /* secondary */
  --tx-2: oklch(0.62 0.01 265);     /* muted */
  --tx-3: oklch(0.48 0.012 265);    /* faint */

  /* accents — shared chroma, varied hue */
  --violet: oklch(0.64 0.17 288);
  --violet-2: oklch(0.72 0.15 290);
  --teal: oklch(0.74 0.12 195);
  --green: oklch(0.74 0.15 158);
  --amber: oklch(0.79 0.14 78);
  --rose: oklch(0.66 0.18 18);
  --blue: oklch(0.68 0.15 250);

  --violet-soft: oklch(0.64 0.17 288 / 0.14);
  --teal-soft: oklch(0.74 0.12 195 / 0.14);
  --green-soft: oklch(0.74 0.15 158 / 0.14);
  --amber-soft: oklch(0.79 0.14 78 / 0.14);
  --rose-soft: oklch(0.66 0.18 18 / 0.14);
  --blue-soft: oklch(0.68 0.15 250 / 0.14);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 8px 30px oklch(0 0 0 / 0.35);
  --shadow-3: 0 24px 70px oklch(0 0 0 / 0.5);
  --glow-violet: 0 0 0 1px oklch(0.64 0.17 288 / 0.4), 0 8px 40px oklch(0.64 0.17 288 / 0.25);

  --sidebar-w: 248px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.08); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.16); background-clip: padding-box; }

html, body, #root { height: 100%; }
body {
  font-family: 'Manrope', -apple-system, system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--tx-0);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  overflow: hidden;
}

.mono { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.02em; }

/* ambient background glow on app base */
.app-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.app-aurora::before, .app-aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.5;
}
.app-aurora::before {
  width: 700px; height: 700px; top: -300px; left: -150px;
  background: radial-gradient(circle, oklch(0.64 0.17 288 / 0.35), transparent 70%);
}
.app-aurora::after {
  width: 600px; height: 600px; bottom: -250px; right: -100px;
  background: radial-gradient(circle, oklch(0.74 0.12 195 / 0.22), transparent 70%);
}

/* ---------- layout ---------- */
.app { position: relative; z-index: 1; display: flex; height: 100%; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.page { padding: 28px 34px 80px; max-width: 1500px; margin: 0 auto; width: 100%; }

/* ---------- glass / panels ---------- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
}
.panel {
  background: linear-gradient(180deg, oklch(0.20 0.016 265 / 0.7), oklch(0.175 0.014 265 / 0.7));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.panel-flat { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); }

/* ---------- type helpers ---------- */
.h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; }
.h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tx-2); }
.muted { color: var(--tx-2); }
.faint { color: var(--tx-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* gradient text */
.grad-text {
  background: linear-gradient(100deg, var(--tx-0) 30%, var(--violet-2) 75%, var(--teal));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--tx-0); transition: all 0.16s ease; white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: oklch(1 0 0 / 0.2); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: linear-gradient(180deg, var(--violet-2), var(--violet));
  border-color: transparent; color: white;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.2) inset, 0 6px 20px oklch(0.64 0.17 288 / 0.35);
}
.btn-primary:hover { filter: brightness(1.08); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--tx-1); }
.btn-ghost:hover { background: var(--bg-2); color: var(--tx-0); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-icon { padding: 8px; }
.btn-icon svg { width: 16px; height: 16px; }

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); letter-spacing: -0.005em;
  white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot-pulse { box-shadow: 0 0 0 0 currentColor; animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.74 0.15 158 / 0.5); }
  70% { box-shadow: 0 0 0 6px oklch(0.74 0.15 158 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.74 0.15 158 / 0); }
}

/* avatars */
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: white; flex: none; letter-spacing: 0;
}

/* progress */
.track { height: 6px; border-radius: 99px; background: oklch(1 0 0 / 0.08); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 99px; }

/* divider */
.hr { height: 1px; background: var(--line); border: 0; }

/* card hover lift */
.lift { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* grids */
.grid { display: grid; gap: 16px; }

/* entrance — transform-only so content is ALWAYS visible (opacity never
   gated). Preview/backgrounded tabs hold animations at the 0% frame, so
   we must never put opacity:0 in a keyframe that controls visibility. */
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.rise { animation: rise 0.55s cubic-bezier(0.2,0.7,0.2,1); }

.fadein { }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.blink { animation: blink 1.2s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.06), transparent);
  background-size: 200% 100%; animation: shimmer 1.6s infinite;
}

/* striped image placeholder */
.placeholder-img {
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.03) 0 10px, transparent 10px 20px);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--tx-3); font-family: 'JetBrains Mono', monospace; font-size: 11px;
}

/* tiny utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.tr { text-align: right; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* selection */
::selection { background: oklch(0.64 0.17 288 / 0.4); }

input, textarea, select { font-family: inherit; }
button { font-family: inherit; }

/* range sliders (builder) */
input[type="range"].zr {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
  outline: none; cursor: pointer;
  /* the colored fill gradient lives on the element background (set inline per value) */
}
/* make the native tracks transparent so the element-background gradient shows through */
input[type="range"].zr::-webkit-slider-runnable-track {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: transparent;
}
input[type="range"].zr::-moz-range-track { height: 6px; border-radius: 99px; background: transparent; }
input[type="range"].zr::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -5px;
  background: white; border: 3px solid var(--zr-accent, var(--violet)); box-shadow: 0 2px 6px oklch(0 0 0 /.4); cursor: grab;
}
input[type="range"].zr::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: white; border: 3px solid var(--zr-accent, var(--violet));
  box-shadow: 0 2px 6px oklch(0 0 0 /.4); cursor: grab;
}
input[type="text"].zin, textarea.zin {
  width: 100%; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 12px; color: var(--tx-0); font-size: 13.5px; outline: none; transition: border-color .15s ease;
}
input[type="text"].zin:focus, textarea.zin:focus { border-color: var(--violet); }
input[type="text"].zin::placeholder, textarea.zin::placeholder { color: var(--tx-3); }