style.css

:root{
  --bg:#0b0f1a;
  --panel:#0f172a;
  --panel2:#0b1222;
  --border:#1f2a44;
  --text:#e7eefc;
  --muted:#98a6c7;
  --accent:#23f3c7;
  --accent2:#ff2d7a;
}

/* Project item styles (extend Tailwind with a few custom bits) */
.project-item{
  width:100%;
  padding:12px;
  background:#0f1a33;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.project-item.active{ outline:2px solid rgba(244,63,94,0.25); }

/* Pills */
.pill{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
}
.pill.green{ background:rgba(40,199,111,.15); }
.pill.orange{ background:rgba(255,159,67,.15); }
.pill.blue{ background:rgba(54,162,235,.15); }
.pill.purple{ background:rgba(153,102,255,.15); }

/* Chips */
.chip{
  padding:10px 12px;
  border-radius:999px;
  background:#0f1a33;
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
}

/* Toast */
.toast{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,23,42,.92);
  border:1px solid rgba(244,63,94,.35);
  color:#e7eefc;
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
  z-index:9999;
}