/* AgileX Platform — AI-powered recruitment platform
   White-labelled from 2nth.ai platform (par.2nth.ai/agilex)
   Brand: red #E04032 / green #2ECC71 / blue #3498DB on near-black */

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

/* ─── AgileX Design Tokens ────────────────────────────────────── */
:root {
  /* Backgrounds — near black */
  --c-carbon:   #0D0D0D;
  --c-graphite: #1A1A1A;
  --c-gunmetal: #242424;
  --c-chassis:  #2E2E2E;

  /* Text */
  --c-titanium: #F5F5F5;

  /* Steel scale */
  --c-steel-900: #2E2E2E;
  --c-steel-800: #3A3A3A;
  --c-steel-700: #555555;
  --c-steel-600: #777777;
  --c-steel-500: #888888;
  --c-steel-400: #AAAAAA;
  --c-steel-300: #CCCCCC;

  /* Borders */
  --c-border:    hsla(0,0%,100%,.08);
  --c-border-md: hsla(0,0%,100%,.14);
  --c-grid-line: hsla(0,0%,100%,.025);

  /* Brand — red primary */
  --c-brand:     #E04032;
  --c-brand-dim: rgba(224,64,50,.15);
  --c-brand-glow:rgba(224,64,50,.25);
  --c-selection: rgba(224,64,50,.25);

  /* Recruitment pipeline stages / agents */
  --c-design:   #E04032; /* red    — Ava / sourced */
  --c-software: #3498DB; /* blue   — Grant / screened */
  --c-hardware: #9B59B6; /* purple — Iris / interviewed */
  --c-robotics: #2ECC71; /* green  — Leo / hired */
  --c-live:     #2ECC71; /* green */

  /* Status */
  --c-success:  #2ECC71;
  --c-warning:  #F39C12;
  --c-error:    #E04032;
  --c-queued:   #F39C12;

  /* Cloudflare */
  --c-cf:       #F6821F;

  /* Fonts */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Radii */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill:9999px;

  /* Nav */
  --nav-h: 56px;
}

/* Light mode */
.light {
  --c-carbon:   #f8f8f8;
  --c-graphite: #f0f0f0;
  --c-gunmetal: #e8e8e8;
  --c-chassis:  #dedede;
  --c-titanium: #111111;
  --c-steel-900:#e4e4e7;
  --c-steel-800:#d4d4d8;
  --c-steel-700:#a1a1aa;
  --c-steel-600:#71717a;
  --c-steel-500:#52525b;
  --c-steel-400:#3f3f46;
  --c-steel-300:#27272a;
  --c-border:   rgba(0,0,0,.08);
  --c-border-md:rgba(0,0,0,.14);
  --c-grid-line:rgba(0,0,0,.03);
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-carbon);
  color: var(--c-titanium);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-selection); }

/* ─── Typography ────────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.font-mono    { font-family: var(--font-mono); }
h1,h2,h3 { line-height: 1.2; }

/* ─── Grid Background ───────────────────────────────────────────── */
.grid-bg {
  background-image: linear-gradient(var(--c-grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--c-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─── Navigation ────────────────────────────────────────────────── */
.nav-bg {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid var(--c-border);
  background: rgba(15,10,30,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
}
.light .nav-bg {
  background: rgba(255,255,255,.85);
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--c-titanium);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.nav-brand .text-brand { color: var(--c-brand); }
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
}
.nav-link {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-steel-500);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--c-titanium); }
.nav-link.active {
  color: var(--c-brand);
  background: var(--c-brand-dim);
}
.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--c-border-md);
  margin: 0 4px;
}
.nav-spacer { flex: 1; }

/* Badge */
.badge-beta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-brand);
  background: var(--c-brand-dim);
  border: 1px solid rgba(124,58,237,.25);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* ─── Auth Bar ──────────────────────────────────────────────────── */
.auth-bar { display: flex; align-items: center; gap: 12px; }
.auth-balance {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-brand);
  background: var(--c-brand-dim);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.auth-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-steel-900);
  border: 1px solid var(--c-border-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-brand);
  cursor: pointer;
  position: relative;
}

/* ─── CTAs / Buttons ────────────────────────────────────────────── */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-brand);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  border: none;
  border-radius: var(--r-md);
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.cta-primary:hover { background: #6D28D9; }
.cta-primary:active { transform: scale(.98); }
.cta-primary:disabled { background: var(--c-steel-800); color: var(--c-steel-600); cursor: not-allowed; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--c-brand);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  border: 1px solid rgba(124,58,237,.4);
  border-radius: var(--r-md);
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.cta:hover { background: var(--c-brand-dim); border-color: var(--c-brand); }

.cta-sm { padding: 6px 12px; font-size: 12.5px; }
.cta-ghost {
  background: none; border: 1px solid var(--c-border-md);
  color: var(--c-steel-500); border-radius: var(--r-md);
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.cta-ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ─── Cards ─────────────────────────────────────────────────────── */
.card-cell {
  background: var(--c-graphite);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color .2s;
}
.card-cell:hover { border-color: var(--c-border-md); }
.card-cell.interactive { cursor: pointer; }
.card-cell.interactive:hover { border-color: rgba(124,58,237,.3); }

.elevated {
  background: var(--c-gunmetal);
  border: 1px solid var(--c-border-md);
  border-radius: var(--r-lg);
  padding: 24px;
}

/* ─── Status Pills ───────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  text-transform: uppercase;
}
.pill-draft    { background:rgba(161,161,170,.12); color:var(--c-steel-500); border:1px solid var(--c-border); }
.pill-queued,
.pill-processing { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.pill-complete { background:rgba(34,197,94,.12);  color:#22c55e; border:1px solid rgba(34,197,94,.2); }
.pill-failed   { background:rgba(239,68,68,.12);  color:#ef4444; border:1px solid rgba(239,68,68,.2); }
.pill-live     { background:rgba(34,197,94,.12);  color:#22c55e; border:1px solid rgba(34,197,94,.2); }
.pill-beta     { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.pill-soon     { background:rgba(161,161,170,.12); color:var(--c-steel-500); border:1px solid var(--c-border); }

/* ─── Plan Badges ────────────────────────────────────────────────── */
.plan-badge { font-family:var(--font-mono); font-size:10px; border-radius:var(--r-pill); padding:3px 9px; letter-spacing:.04em; }
.plan-explorer { background:rgba(161,161,170,.12); color:var(--c-steel-500); border:1px solid var(--c-border); }
.plan-starter  { background:rgba(16,185,129,.12);  color:#10b981; border:1px solid rgba(16,185,129,.2); }
.plan-designer { background:rgba(99,102,241,.12);  color:#818cf8; border:1px solid rgba(99,102,241,.2); }
.plan-builder  { background:rgba(245,158,11,.12);  color:#f59e0b; border:1px solid rgba(245,158,11,.2); }

/* ─── Pillar Accents ─────────────────────────────────────────────── */
.pillar-design   { color:var(--c-design);   }
.pillar-software { color:var(--c-software); }
.pillar-hardware { color:var(--c-hardware); }
.pillar-robotics { color:var(--c-robotics); }
.pillar-dot { height:.5rem; width:.5rem; flex-shrink:0; border-radius:4px; display:inline-block; }

/* ─── Inputs & Forms ─────────────────────────────────────────────── */
.field {
  width: 100%;
  background: var(--c-gunmetal);
  border: 1px solid var(--c-border-md);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--c-titanium);
  outline: none;
  transition: border-color .15s;
}
.field:focus { border-color: var(--c-brand); }
.field::placeholder { color: var(--c-steel-600); }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-steel-500);
  margin-bottom: 6px;
}

/* ─── Metric Cards ───────────────────────────────────────────────── */
.metric-value {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.02em;
  color: var(--c-titanium);
  line-height: 1;
}
.metric-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-steel-600);
  margin-top: 4px;
}

/* ─── Section Headers ────────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-brand);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0.04em;
  color: var(--c-titanium);
  line-height: 1.1;
  margin-bottom: 12px;
}

/* ─── Chat / Agent Streaming ─────────────────────────────────────── */
.chat-wrap { display:flex; flex-direction:column; height:420px; gap:10px; }
.chat-messages {
  flex:1; overflow-y:auto; padding:14px;
  background:var(--c-carbon); border:1px solid var(--c-border);
  border-radius:var(--r-md); font-size:13.5px; line-height:1.6;
  scrollbar-width:thin; scrollbar-color:var(--c-steel-900) transparent;
}
.msg-user {
  background:var(--c-brand-dim); border:1px solid rgba(124,58,237,.2);
  color:var(--c-titanium); border-radius:var(--r-md);
  padding:8px 12px; margin:6px 0 6px auto; max-width:80%; font-weight:500;
}
.msg-agent {
  background:var(--c-graphite); border:1px solid var(--c-border);
  color:var(--c-titanium); border-radius:var(--r-md);
  padding:10px 12px; margin:6px 0; white-space:pre-wrap; font-size:13.5px;
}
.msg-agent.streaming::after { content:'▋'; color:var(--c-brand); animation:blink .7s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.chat-input-row { display:flex; gap:8px; }
.chat-input-row input {
  flex:1; background:var(--c-gunmetal); border:1px solid var(--c-border-md);
  color:var(--c-titanium); border-radius:var(--r-md); padding:10px 12px;
  font-family:var(--font-body); font-size:14px; outline:none;
}
.chat-input-row input:focus { border-color:var(--c-brand); }
.chat-input-row input::placeholder { color:var(--c-steel-600); }

/* ─── Upload Drop Zone ───────────────────────────────────────────── */
.drop-zone {
  border:2px dashed var(--c-border-md); border-radius:var(--r-md);
  padding:20px; text-align:center; cursor:pointer; color:var(--c-steel-500);
  font-size:13px; transition:border-color .15s, background .15s;
}
.drop-zone:hover { border-color:var(--c-brand); background:var(--c-brand-dim); color:var(--c-brand); }

/* ─── Table ──────────────────────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th {
  text-align:left; padding:10px 14px;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-steel-500); font-weight:600; border-bottom:1px solid var(--c-border);
}
.data-table td { padding:11px 14px; border-bottom:1px solid var(--c-border); color:var(--c-titanium); vertical-align:top; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--c-graphite); }

/* ─── Code / Mono ────────────────────────────────────────────────── */
.install-cmd {
  background:var(--c-gunmetal); border:1px solid var(--c-border-md);
  border-radius:var(--r-md); padding:12px 16px;
  font-family:var(--font-mono); font-size:13px; color:var(--c-brand);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.copy-btn {
  background:var(--c-brand-dim); border:1px solid rgba(124,58,237,.2);
  color:var(--c-brand); border-radius:var(--r-sm); padding:4px 10px;
  font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.copy-btn:hover { background:rgba(6,182,212,.25); }

/* ─── Alert / Notice ─────────────────────────────────────────────── */
.notice {
  padding:12px 16px; border-radius:var(--r-md); border-left:3px solid;
  font-size:13.5px; margin-bottom:14px;
}
.notice-brand  { background:var(--c-brand-dim); border-color:var(--c-brand);  color:var(--c-titanium); }
.notice-warn   { background:rgba(245,158,11,.08); border-color:#f59e0b; color:#fde68a; }
.notice-error  { background:rgba(239,68,68,.08);  border-color:#ef4444; color:#fca5a5; }
.notice-success{ background:rgba(34,197,94,.08);  border-color:#22c55e; color:#bbf7d0; }

/* ─── Skills Card ────────────────────────────────────────────────── */
.skill-card {
  background:var(--c-graphite); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:20px; position:relative; overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.skill-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.skill-card:hover { border-color:rgba(124,58,237,.25); transform:translateY(-1px); }
.skill-card.locked { opacity:.5; }
.skill-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; }

/* ─── Tier Gate ──────────────────────────────────────────────────── */
.tier-gate {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.2); border-radius:var(--r-md);
  font-size:13px;
}
.tier-gate span { color:#f59e0b; }

/* ─── Theme Toggle ───────────────────────────────────────────────── */
.theme-toggle {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:none; border:1px solid var(--c-border-md);
  color:var(--c-steel-500); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:14px;
  transition:all .15s;
}
.theme-toggle:hover { border-color:var(--c-brand); color:var(--c-brand); }

/* ─── App Layout ─────────────────────────────────────────────────── */
.app-main { max-width:1100px; margin:0 auto; padding:36px 24px; }
.page-header { margin-bottom:32px; }
.page-header .eyebrow { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-brand); margin-bottom:6px; }
.page-header h1 { font-family:var(--font-display); font-size:clamp(24px,3.5vw,36px); letter-spacing:.04em; color:var(--c-titanium); }

/* ─── Grids ──────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.grid-auto-sm { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }

@media(max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .app-main { padding:24px 16px; }
}
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* ─── Reveal animation (matches production) ─────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ─── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--c-steel-800); border-radius:99px; }

/* ─── Beta-specific: Pillar result panel ─────────────────────────── */
.pillar-panel {
  background:var(--c-graphite); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:14px;
}
.pillar-panel .pillar-name {
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px;
}
.pillar-panel .complexity {
  font-family:var(--font-mono); font-size:10px; border-radius:var(--r-sm);
  padding:2px 6px; margin-bottom:6px; display:inline-block;
}
.complexity-low    { background:rgba(34,197,94,.12); color:#22c55e; }
.complexity-medium { background:rgba(245,158,11,.12); color:#f59e0b; }
.complexity-high   { background:rgba(239,68,68,.12);  color:#ef4444; }
.pillar-panel ul { list-style:none; }
.pillar-panel ul li { font-size:12.5px; color:var(--c-steel-500); padding:2px 0; display:flex; gap:6px; }
.pillar-panel ul li::before { content:'→'; color:var(--c-brand); flex-shrink:0; }

/* ─── Pulse animation ────────────────────────────────────────────── */
.pulse-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--c-live); animation:pulse-anim 1.5s infinite; }
@keyframes pulse-anim { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4);} 50%{opacity:.7;} 70%{box-shadow:0 0 0 6px rgba(34,197,94,0);} }