*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#5f3afc; --secondary:#0ea5e9; --bg-primary:#0f0f23; --bg-secondary:#1a1a3e;
  --bg-card:#1e1e42; --text-primary:#fff; --text-secondary:#b8b8d1; --accent:#ff6b6b;
  --success:#4ade80; --warning:#fbbf24; --border:#2a2a5e;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:linear-gradient(135deg,var(--bg-primary),var(--bg-secondary));
  color:var(--text-primary); min-height:100vh; position:relative; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 20% 50%, rgba(95,58,252,.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(14,165,233,.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255,107,107,.1) 0%, transparent 50%);
}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
header{background:rgba(30,30,66,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:1rem 0;position:sticky;top:0;z-index:10}
.header-content{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
h1{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-stats{display:flex;gap:1rem;align-items:center}
.job-count,.new-jobs{background:linear-gradient(135deg,var(--primary),var(--secondary));padding:.5rem 1rem;border-radius:2rem;font-size:.875rem;font-weight:600}
.new-jobs{background:linear-gradient(135deg,var(--success),var(--warning))}
.search-filter-section{background:rgba(30,30,66,.6);backdrop-filter:blur(10px);padding:1.5rem;margin:1rem 0 2rem;border-radius:1rem}
.search-bar{position:relative;margin-bottom:1rem}
.search-bar input{width:100%;padding:1rem 3rem 1rem 1rem;background:var(--bg-card);border:2px solid var(--border);border-radius:.75rem;color:var(--text-primary)}
.search-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary)}
.filter-controls{display:flex;flex-direction:column;gap:1rem}
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filter-label{font-size:.875rem;color:var(--text-secondary);min-width:80px}
.filter-btn,.sort-btn{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:2rem;color:var(--text-secondary);font-size:.875rem;cursor:pointer}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.sort-controls{display:flex;gap:.5rem;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.sort-dropdown{padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.5rem;color:#fff}
.active-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0;min-height:2rem}
.active-filter-tag{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:rgba(95,58,252,.2);border:1px solid var(--primary);border-radius:1rem;font-size:.75rem}
.remove-filter{cursor:pointer;color:var(--accent);font-weight:bold}
.clear-all{padding:.375rem .75rem;background:rgba(255,107,107,.2);border:1px solid var(--accent);border-radius:1rem;color:var(--accent);cursor:pointer}
.results-summary{padding:1rem 0;color:var(--text-secondary);font-size:.875rem;text-align:center;margin-bottom:1rem}
.jobs-grid{display:grid;gap:1.5rem}
@media (min-width:768px){.jobs-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}}
.job-card{background:rgba(30,30,66,.8);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:1rem;padding:1.25rem;position:relative}
.new-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,var(--success),var(--warning));padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700}
.job-title{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.job-company{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}
.compensation{display:inline-block;background:linear-gradient(135deg,var(--success),var(--secondary));padding:.25rem .75rem;border-radius:1rem;font-size:.875rem;font-weight:600}
.job-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.meta-tag{display:flex;align-items:center;gap:.25rem;padding:.375rem .75rem;background:rgba(95,58,252,.1);border:1px solid rgba(95,58,252,.3);border-radius:.5rem;font-size:.75rem;color:var(--text-secondary)}
.remote-tag{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:var(--success)}
.location-tag{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.3);color:var(--secondary)}
.job-description{color:var(--text-secondary);line-height:1.6;margin:1rem 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.job-footer{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);gap:.5rem;flex-wrap:wrap}
.post-info{display:flex;gap:1rem;font-size:.75rem;color:var(--text-secondary)}
.apply-btn{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;padding:.5rem 1.25rem;border-radius:.5rem;font-weight:600;cursor:pointer}
.loading{text-align:center;padding:3rem;color:var(--text-secondary)}
.spinner{width:50px;height:50px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-secondary)}
.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}