/* ═══════════════════════════════════════════════════════════════
   QABash Job Sniffer — board.css  v2.0
   Brand tokens: Inter + JetBrains Mono, ink #09090B, volt #1DB954
   Reference: GitHub UI + Linear.app + Stripe Dashboard
   Prefix: .qjs-root (full isolation)
   ═══════════════════════════════════════════════════════════════ */

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

.qjs-root {
  --ink:      #09090B;
  --volt:     #1DB954;
  --zinc-5:   #71717A;
  --border:   #d0d7de;
  --border-l: #e5e7eb;
  --bg-s:     #f6f8fa;
  --bg:       #ffffff;
  --sh1: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh2: 0 4px 14px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
  --sh3: 0 8px 28px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06);
  --font-ui:   'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --r: 6px;
  --r-lg: 8px;
}
.qjs-root { width:100%; max-width:100%; overflow-x:hidden; display:block; font-family:var(--font-ui); color:var(--ink); background:var(--bg); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.qjs-root *, .qjs-root *::before, .qjs-root *::after { box-sizing:border-box; }
.qjs-root a { color:inherit; text-decoration:none; }
.qjs-root button { font-family:var(--font-ui); cursor:pointer; }

/* ── Enter animations ─────────────────────────────────────────── */
.qjs-root .qjsA { opacity:0; transform:translateY(10px); animation:qjsFU .35s ease forwards; }
.qjs-root .qjsA:nth-child(1){animation-delay:.00s}
.qjs-root .qjsA:nth-child(2){animation-delay:.05s}
.qjs-root .qjsA:nth-child(3){animation-delay:.10s}
.qjs-root .qjsA:nth-child(4){animation-delay:.15s}
.qjs-root .qjsA:nth-child(5){animation-delay:.20s}
.qjs-root .qjsA:nth-child(6){animation-delay:.25s}
@keyframes qjsFU { to { opacity:1; transform:translateY(0); } }

/* ── Page wrapper ─────────────────────────────────────────────── */
.qjs-root .qjs-page { max-width:1200px; margin:0 auto; padding:0 24px 56px; }
@media(max-width:720px){ .qjs-root .qjs-page { padding:0 16px 40px; } }

/* ── Header ───────────────────────────────────────────────────── */
.qjs-root .qjs-hd { padding:32px 0 0; }
.qjs-root .qjs-breadcrumb {
  font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--zinc-5);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px;
}
.qjs-root .qjs-breadcrumb .sep { color:var(--border); margin:0 6px; }
.qjs-root .qjs-hd-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--volt);
  background:rgba(29,185,84,.07); border:1px solid rgba(29,185,84,.2);
  border-radius:99px; padding:3px 10px; margin-bottom:10px; letter-spacing:.04em;
}
.qjs-root .qjs-hd-badge::before {
  content:''; width:5px; height:5px; background:var(--volt);
  border-radius:50%; animation:qjsPulse 2.4s ease infinite;
}
@keyframes qjsPulse { 0%,100%{opacity:1}50%{opacity:.3} }
.qjs-root .qjs-h1 {
  font-family:var(--font-ui); font-size:clamp(20px,3vw,26px); font-weight:700;
  color:var(--ink); margin:0 0 6px; letter-spacing:-.015em; line-height:1.2;
}
.qjs-root .qjs-sub { font-size:14px; color:var(--zinc-5); margin:0; max-width:560px; }

/* Tab nav */
.qjs-root .qjs-tabs {
  display:flex; margin-top:20px; border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
}
.qjs-root .qjs-tabs::-webkit-scrollbar { display:none; }
.qjs-root .qjs-tab {
  font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--zinc-5);
  padding:9px 16px; border:none; background:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .15s,border-color .15s; cursor:pointer;
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.qjs-root .qjs-tab:hover { color:var(--ink); }
.qjs-root .qjs-tab.on { color:var(--ink); border-bottom-color:var(--volt); font-weight:600; }
.qjs-root .qjs-tcnt {
  font-family:var(--font-mono); font-size:10px; background:var(--bg-s);
  border:1px solid var(--border); border-radius:99px; padding:1px 6px; color:var(--zinc-5);
}
.qjs-root .qjs-tab.on .qjs-tcnt { background:rgba(29,185,84,.08); border-color:rgba(29,185,84,.2); color:#148a3d; }

/* ── Stats row ────────────────────────────────────────────────── */
.qjs-root .qjs-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; margin:20px 0; box-shadow:var(--sh1);
}
.qjs-root .qjs-sc {
  background:var(--bg); padding:16px 20px; transition:background .15s; min-width:0;
}
.qjs-root .qjs-sc:hover { background:var(--bg-s); }
.qjs-root .qjs-sn {
  font-family:var(--font-mono); font-size:20px; font-weight:600;
  color:var(--ink); display:block; line-height:1; margin-bottom:4px;
}
.qjs-root .qjs-sl {
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  color:var(--zinc-5); text-transform:uppercase; letter-spacing:.07em;
}

/* ── Layout ───────────────────────────────────────────────────── */
.qjs-root .qjs-layout {
  display:grid; grid-template-columns:228px minmax(0,1fr); gap:20px; align-items:start;
}
@media(max-width:720px){
  .qjs-root .qjs-layout { grid-template-columns:minmax(0,1fr); }
  .qjs-root .qjs-sidebar { display:none; }
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.qjs-root .qjs-sidebar {
  position:sticky; top:20px; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh1); overflow:hidden;
}
.qjs-root .qjs-sb-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid var(--border-l); background:var(--bg-s);
}
.qjs-root .qjs-sb-title {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  color:var(--ink); text-transform:uppercase; letter-spacing:.08em;
}
.qjs-root .qjs-sb-clear {
  font-family:var(--font-mono); font-size:10px; color:var(--zinc-5);
  background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.qjs-root .qjs-sb-clear:hover { color:var(--ink); }
.qjs-root .qjs-fs { padding:12px 14px; border-bottom:1px solid var(--border-l); }
.qjs-root .qjs-fs:last-of-type { border-bottom:none; }
.qjs-root .qjs-fl {
  display:block; font-family:var(--font-mono); font-size:10px; font-weight:600;
  color:var(--zinc-5); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px;
}
.qjs-root .qjs-inp, .qjs-root .qjs-sel {
  width:100%; font-family:var(--font-ui); font-size:13px; color:var(--ink);
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:7px 10px; outline:none; transition:border-color .15s, box-shadow .15s; min-width:0;
}
.qjs-root .qjs-inp:focus, .qjs-root .qjs-sel:focus {
  border-color:#8a9baa; box-shadow:0 0 0 3px rgba(0,0,0,.05);
}
.qjs-root .qjs-inp::placeholder { color:#b0b7be; }
.qjs-root .qjs-sel {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:26px;
}
.qjs-root .qjs-exp-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px; }
.qjs-root .qjs-exp-row .qjs-inp { padding:7px 8px; font-size:12px; }

/* Pill group */
.qjs-root .qjs-pill-grp { display:flex; flex-wrap:wrap; gap:4px; }
.qjs-root .qjs-po {
  font-family:var(--font-mono); font-size:10px; font-weight:500; padding:3px 9px;
  border-radius:99px; border:1px solid var(--border); background:var(--bg);
  color:var(--zinc-5); cursor:pointer; transition:all .12s; text-transform:uppercase; letter-spacing:.04em;
}
.qjs-root .qjs-po:hover { border-color:#a0aab4; color:var(--ink); }
.qjs-root .qjs-po.on {
  background:rgba(29,185,84,.08); border-color:rgba(29,185,84,.3); color:#148a3d; font-weight:600;
}
.qjs-root .qjs-btn-go {
  width:100%; margin-top:4px; font-family:var(--font-ui); font-size:13px; font-weight:600;
  color:#fff; background:var(--ink); border:none; border-radius:var(--r); padding:9px;
  cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s; box-shadow:var(--sh1);
}
.qjs-root .qjs-btn-go:hover { background:#1c1c1e; transform:translateY(-1px); box-shadow:var(--sh2); }

/* ── Main area ────────────────────────────────────────────────── */
.qjs-root .qjs-main { min-width:0; }

/* Mobile search */
.qjs-root .qjs-mob-search { display:none; margin-bottom:12px; gap:8px; }
@media(max-width:720px){ .qjs-root .qjs-mob-search { display:flex; } }
.qjs-root .qjs-mob-search .qjs-inp { flex:1; min-width:0; }

/* Section label */
.qjs-root .qjs-sec-lbl {
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px; padding-left:10px; border-left:3px solid var(--volt);
}
.qjs-root .qjs-sec-lbl > span {
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--zinc-5); text-transform:uppercase; letter-spacing:.08em;
}
.qjs-root .qjs-sec-cnt {
  font-family:var(--font-mono); font-size:10px;
  background:var(--bg-s); border:1px solid var(--border);
  color:var(--zinc-5); border-radius:99px; padding:1px 7px;
}

/* Toolbar */
.qjs-root .qjs-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; gap:12px; flex-wrap:wrap;
}
.qjs-root .qjs-rcount {
  font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--zinc-5);
}
.qjs-root .qjs-rcount strong { color:var(--ink); }
.qjs-root .qjs-sort-row {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; color:var(--zinc-5);
}
.qjs-root .qjs-sort-row .qjs-sel { width:auto; font-size:12px; padding:5px 26px 5px 8px; }

/* ── Table ────────────────────────────────────────────────────── */
.qjs-root .qjs-tw {
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh1); overflow-x:auto;
}
.qjs-root .qjs-tbl {
  width:100%; border-collapse:collapse; font-size:13px; min-width:820px;
}
.qjs-root .qjs-tbl thead {
  background:var(--bg-s); border-bottom:1px solid var(--border);
}
.qjs-root .qjs-tbl th {
  font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--zinc-5);
  text-transform:uppercase; letter-spacing:.08em; padding:10px 14px; text-align:left; white-space:nowrap;
}
.qjs-root .qjs-tbl th:first-child { padding-left:16px; }
.qjs-root .qjs-tbl tbody tr {
  border-bottom:1px solid var(--border-l); background:var(--bg); transition:background .12s;
}
.qjs-root .qjs-tbl tbody tr:last-child { border-bottom:none; }
.qjs-root .qjs-tbl tbody tr:hover { background:var(--bg-s); }
.qjs-root .qjs-tbl td { padding:12px 14px; vertical-align:top; min-width:0; }
.qjs-root .qjs-tbl td:first-child { padding-left:16px; }

/* Role cell */
.qjs-root .qjs-rt {
  font-weight:600; color:var(--ink); font-size:13px; line-height:1.3; display:block; margin-bottom:2px;
}
.qjs-root .qjs-rc {
  font-size:12px; color:var(--zinc-5); display:block; margin-bottom:3px;
}
.qjs-root .qjs-ai-sum {
  font-family:var(--font-mono); font-size:10px; color:#148a3d;
  border-left:2px solid rgba(29,185,84,.3); padding-left:6px;
  display:block; margin-top:4px; line-height:1.45;
}

/* Location */
.qjs-root .qjs-loc { font-size:12px; color:var(--ink); display:block; }
.qjs-root .qjs-rem {
  display:inline-block; font-family:var(--font-mono); font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  background:rgba(29,185,84,.08); border:1px solid rgba(29,185,84,.2); color:#148a3d;
  border-radius:4px; padding:2px 6px; margin-top:3px;
}

/* Type badge */
.qjs-root .qjs-tb {
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  padding:3px 7px; border-radius:4px; border:1px solid var(--border);
  color:var(--zinc-5); background:var(--bg-s);
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.qjs-root .qjs-tb.ft { border-color:#bfdbfe; color:#1e40af; background:#eff6ff; }
.qjs-root .qjs-tb.ct { border-color:#fde68a; color:#92400e; background:#fffbeb; }
.qjs-root .qjs-tb.pt { border-color:#e9d5ff; color:#6b21a8; background:#faf5ff; }
.qjs-root .qjs-tb.fl { border-color:#fed7aa; color:#9a3412; background:#fff7ed; }

/* Skills */
.qjs-root .qjs-sk-wrap { display:flex; flex-wrap:wrap; gap:3px; max-width:180px; }
.qjs-root .qjs-sk {
  font-family:var(--font-mono); font-size:10px; padding:2px 6px;
  background:var(--bg-s); border:1px solid var(--border); border-radius:4px; color:var(--zinc-5);
}

/* AI score */
.qjs-root .qjs-scr { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.qjs-root .qjs-sv { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); }
.qjs-root .qjs-sv.hi { color:#148a3d; }
.qjs-root .qjs-sv.md { color:#a16207; }
.qjs-root .qjs-sv.lo { color:var(--zinc-5); }
.qjs-root .qjs-st { width:40px; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.qjs-root .qjs-sf { height:100%; border-radius:2px; background:var(--border); transition:width .4s; }
.qjs-root .qjs-sf.hi { background:var(--volt); }
.qjs-root .qjs-sf.md { background:#eab308; }
.qjs-root .qjs-sf.lo { background:#d1d5db; }

/* Posted / source */
.qjs-root .qjs-pd {
  font-family:var(--font-mono); font-size:11px; color:var(--zinc-5); white-space:nowrap;
}
.qjs-root .qjs-sp {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:9px; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
  background:var(--bg-s); border:1px solid var(--border);
  border-radius:4px; padding:2px 6px; color:var(--zinc-5); margin-top:3px;
}
.qjs-root .qjs-sd { width:5px; height:5px; border-radius:50%; flex-shrink:0; }

/* Apply CTA */
.qjs-root .qjs-apply {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  color:#fff; background:var(--volt); border:none; border-radius:var(--r);
  padding:6px 13px; white-space:nowrap; cursor:pointer;
  transition:background .15s, transform .15s, box-shadow .15s; box-shadow:var(--sh1);
  text-decoration:none;
}
.qjs-root .qjs-apply:hover { background:#17a349; transform:translateY(-1px); box-shadow:var(--sh2); }
.qjs-root .qjs-apply:active { transform:translateY(0); }

/* ── Loading / Empty ─────────────────────────────────────────── */
.qjs-root .qjs-loading { padding:60px 20px; text-align:center; color:var(--zinc-5); }
.qjs-root .qjs-spinner {
  display:inline-block; width:18px; height:18px;
  border:2px solid var(--border); border-top-color:var(--ink);
  border-radius:50%; animation:qjsSpin .7s linear infinite; margin-bottom:10px;
}
@keyframes qjsSpin { to{transform:rotate(360deg)} }
.qjs-root .qjs-loading p { font-family:var(--font-mono); font-size:11px; color:var(--zinc-5); margin:0; }
.qjs-root .qjs-empty { padding:60px 20px; text-align:center; }
.qjs-root .qjs-empty-icon { font-size:28px; margin-bottom:10px; }
.qjs-root .qjs-empty h3 { font-size:14px; font-weight:600; color:var(--ink); margin:0 0 4px; }
.qjs-root .qjs-empty p { font-size:13px; color:var(--zinc-5); margin:0; }

/* ── Pagination ───────────────────────────────────────────────── */
.qjs-root .qjs-pag {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:8px; flex-wrap:wrap;
}
.qjs-root .qjs-pinfo { font-family:var(--font-mono); font-size:11px; color:var(--zinc-5); }
.qjs-root .qjs-pbtns { display:flex; align-items:center; gap:4px; }
.qjs-root .qjs-pb {
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  padding:5px 10px; border:1px solid var(--border); border-radius:var(--r);
  background:var(--bg); color:var(--zinc-5); cursor:pointer; transition:all .12s;
}
.qjs-root .qjs-pb:hover:not(:disabled) {
  border-color:#a0aab4; color:var(--ink); background:var(--bg-s);
  transform:translateY(-1px); box-shadow:var(--sh1);
}
.qjs-root .qjs-pb.on { background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600; }
.qjs-root .qjs-pb:disabled { opacity:.35; cursor:default; }

/* ── CTA Banner ───────────────────────────────────────────────── */
.qjs-root .qjs-cta {
  background:var(--ink); border-radius:var(--r-lg);
  padding:28px 32px; margin-top:28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; position:relative; overflow:hidden; box-shadow:var(--sh2);
}
.qjs-root .qjs-cta::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(29,185,84,.12) 0%, transparent 65%);
  pointer-events:none;
}
.qjs-root .qjs-cta-t { font-size:16px; font-weight:700; color:#fff; margin:0 0 4px; letter-spacing:-.01em; }
.qjs-root .qjs-cta-s { font-size:13px; color:rgba(255,255,255,.5); margin:0; }
.qjs-root .qjs-cta-acts { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qjs-root .qjs-btn-volt {
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:#fff; background:var(--volt);
  border:none; border-radius:var(--r); padding:9px 18px; cursor:pointer;
  transition:background .15s, transform .15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.qjs-root .qjs-btn-volt:hover { background:#17a349; transform:translateY(-1px); }
.qjs-root .qjs-btn-ghost {
  font-family:var(--font-ui); font-size:13px; font-weight:500;
  color:rgba(255,255,255,.6); background:transparent;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r);
  padding:8px 16px; cursor:pointer; transition:all .15s; text-decoration:none;
}
.qjs-root .qjs-btn-ghost:hover { border-color:rgba(255,255,255,.4); color:#fff; }

/* ── Footer ───────────────────────────────────────────────────── */
.qjs-root .qjs-foot {
  text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--zinc-5);
  padding-top:24px; border-top:1px solid var(--border-l); margin-top:8px;
}
.qjs-root .qjs-foot a { color:var(--zinc-5); text-decoration:underline; text-underline-offset:2px; }
.qjs-root .qjs-foot a:hover { color:var(--ink); }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:720px){
  .qjs-root .qjs-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .qjs-root .qjs-bar { flex-direction:column; align-items:flex-start; }
  .qjs-root .qjs-tbl th:nth-child(5),.qjs-root .qjs-tbl td:nth-child(5),
  .qjs-root .qjs-tbl th:nth-child(6),.qjs-root .qjs-tbl td:nth-child(6) { display:none; }
  .qjs-root .qjs-cta { padding:20px; }
}
@media(max-width:360px){
  .qjs-root .qjs-stats { grid-template-columns:minmax(0,1fr); }
}