:root{
  --bg:#070818;
  --card: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --txt: rgba(255,255,255,.92);
  --mut: rgba(255,255,255,.70);
  --p1:#ff3d7f;
  --p2:#5e7bff;
  --p3:#33e7b8;
  --r:18px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, Segoe UI, Roboto, Arial;
  color:var(--txt);
  background:
    radial-gradient(900px 380px at 15% 0%, rgba(255,61,127,.18), transparent 60%),
    radial-gradient(900px 380px at 85% 10%, rgba(94,123,255,.18), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(51,231,184,.12), transparent 60%),
    linear-gradient(180deg, #040513, var(--bg));
}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(4,5,18,.65);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.brand{font-weight:950;letter-spacing:-.5px}
.brand span{color:var(--p3)}
.nav{display:flex;gap:10px;align-items:center}
.nav button{
  border:1px solid transparent;
  background: rgba(255,255,255,.06);
  color:var(--txt);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
}
.nav button:hover{border-color:rgba(255,255,255,.16)}
.nav .ghost{background:transparent;border:1px solid rgba(255,255,255,.14)}
.badge{
  margin-left:auto;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--mut);
}
.card{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: 22px;
  padding:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  margin-top:16px;
}
h1,h2,h3{margin:0 0 12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
input{
  flex:1 1 240px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--txt);
  outline:none;
}
input:focus{border-color:rgba(255,61,127,.55);box-shadow:0 0 0 6px rgba(255,61,127,.12)}
button.primary, .primaryBtn{
  border:none; cursor:pointer;
  padding:11px 14px;
  border-radius:999px;
  color:white;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
  text-decoration:none;
  display:inline-block;
}
.err{color:rgba(255,190,190,.95);margin-top:8px;min-height:18px}
.hidden{display:none}
.list{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.item{
  padding:12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;
}
.item .meta{color:var(--mut);font-size:13px}
.pill{
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  font-size:12px;color:var(--mut);
}
.pill.ok{border-color:rgba(51,231,184,.35);background:rgba(51,231,184,.10);color:rgba(220,255,245,.92)}
.members{display:flex;flex-direction:column;gap:10px}
.member{
  padding:10px 12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.member:hover{border-color:rgba(255,255,255,.18)}
.notifBox{
  margin-top:10px;
  border-radius:16px;
  border:1px solid rgba(255,213,74,.28);
  background: rgba(255,213,74,.08);
  padding:10px 12px;
}
select{
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--txt);
  outline:none;
}