:root{
  --bg:#0f1220; --bg2:#161a2e; --card:#1c2140; --card2:#232a52;
  --accent:#7c5cff; --accent2:#37e0c4; --text:#f2f3ff; --muted:#a6acce;
  --border:#2c335e;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
}
header{
  padding:22px 6vw; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10;
}
.logo{font-weight:800; font-size:1.3rem; display:flex; align-items:center; gap:8px}
.logo span{color:var(--accent2)}
nav a{color:var(--muted); text-decoration:none; margin-left:24px; font-size:.95rem}
nav a:hover{color:var(--text)}
.hero{
  padding:70px 6vw 50px; text-align:center; background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,.25), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(55,224,196,.18), transparent 40%);
}
.hero h1{font-size:2.6rem; margin:0 0 14px; max-width:800px; margin-inline:auto}
.hero h1 em{font-style:normal; color:var(--accent2)}
.hero p{color:var(--muted); max-width:600px; margin:0 auto 30px; font-size:1.05rem}
.badge{
  display:inline-block; background:var(--card2); border:1px solid var(--border);
  padding:6px 14px; border-radius:20px; font-size:.8rem; color:var(--accent2); margin-bottom:18px;
}
.search-box{
  max-width:900px; margin:0 auto; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px;
}
@media (max-width:800px){ .search-box{grid-template-columns:1fr} }
select, input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--card2); color:var(--text); font-size:.95rem;
}
select:focus, input:focus{outline:2px solid var(--accent)}
.btn{
  background:linear-gradient(135deg,var(--accent),#a78bff); color:#fff; border:none;
  padding:12px 22px; border-radius:10px; font-weight:700; cursor:pointer; font-size:.95rem;
}
.btn:hover{opacity:.9}
.btn-outline{
  background:transparent; border:1px solid var(--accent); color:var(--accent);
}
section{padding:50px 6vw}
.section-title{font-size:1.6rem; margin-bottom:6px}
.section-sub{color:var(--muted); margin-bottom:28px; max-width:600px}
.stats{
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:36px;
}
.stat{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px 28px; text-align:center; min-width:140px;
}
.stat b{display:block; font-size:1.7rem; color:var(--accent2)}
.stat span{color:var(--muted); font-size:.85rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px;
  transition:.2s;
}
.card:hover{border-color:var(--accent); transform:translateY(-3px)}
.card h3{margin:0 0 8px; font-size:1.05rem}
.tag{
  display:inline-block; font-size:.72rem; padding:3px 9px; border-radius:20px;
  background:var(--card2); color:var(--muted); margin:2px 4px 2px 0;
}
.tag.uni{color:var(--accent2); border:1px solid var(--accent2)}
.card p{color:var(--muted); font-size:.85rem; margin:10px 0 0}
.empty-note{
  grid-column:1/-1; text-align:center; color:var(--muted); padding:30px; border:1px dashed var(--border);
  border-radius:14px;
}
.cta-split{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
@media (max-width:800px){ .cta-split{grid-template-columns:1fr} }
.panel{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px;
}
.panel h3{margin-top:0}
form{display:flex; flex-direction:column; gap:12px; margin-top:16px}
footer{
  padding:30px 6vw; text-align:center; color:var(--muted); font-size:.85rem;
  border-top:1px solid var(--border);
}
.pill-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.pill{
  background:var(--card2); border:1px solid var(--border); padding:6px 12px; border-radius:20px;
  font-size:.8rem; cursor:pointer;
}
.pill.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--accent2); color:#04231d; padding:12px 22px; border-radius:10px; font-weight:600;
  transition:.3s; z-index:50;
}
.toast.show{transform:translateX(-50%) translateY(0)}