:root{
  --bg-dark:#070a12;
  --bg-deeper:#0c0f1a;
  --magenta:#E72354;
  --purple:#4C2A6A;
  --portal:#22C55E;

  --card: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  --radius: 18px;
  --shadow: 0 22px 70px rgba(0,0,0,.6);
  --max: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(231,35,84,.18), transparent 60%),
    radial-gradient(1000px 600px at 80% 20%, rgba(76,42,106,.28), transparent 60%),
    linear-gradient(180deg, var(--bg-dark), var(--bg-deeper));
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.22;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,18,.55);
}

.topbar__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color: var(--text);
}

.brand__mark{
  width:40px;height:40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight:900;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(231,35,84,.55), rgba(76,42,106,.55));
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.brand__title{ font-weight:900; letter-spacing: .2px; }
.brand__sub{ color: var(--muted); font-size: 12px; margin-top:2px; }

.nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav__link{
  color: var(--text);
  text-decoration:none;
  font-weight:700;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.nav__link:hover{ background: rgba(255,255,255,.08); }
.nav__primary{
  border:none;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 18px 40px;
  position:relative;
  z-index:1;
}

.card{
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(14px);
}

h1,h2,h3{ margin:0 0 10px; }
.muted{ color: var(--muted); }

.row{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{ background: rgba(255,255,255,.10); }

.btn--primary{
  border:none;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
}

.field{ display:grid; gap:7px; }
label{ font-size: 12px; color: var(--muted); font-weight: 800; letter-spacing:.2px; }

input[type="text"], textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: var(--text);
  outline:none;
}
textarea{ min-height: 170px; resize: vertical; }

input[type="text"]:focus, textarea:focus{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 0 0 6px rgba(231,35,84,.12);
}

/* Filters layout (STACKED like your screenshot) */
.filters{ margin-top:14px; }

.filters__grid{
  display:grid;
  gap:12px;
  align-items:end;
  grid-template-columns: 1fr;          /* always stacked */
  grid-template-areas:
    "search"
    "status"
    "label"
    "actions";
}

.filters__search{ grid-area: search; }
.filters__status{ grid-area: status; }
.filters__label{  grid-area: label; }
.filters__actions{
  grid-area: actions;
  justify-self:start;                  /* buttons sit under, left */
  align-self:end;
  display:flex;
  gap:10px;
}

/* Pills */
.pillset{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pillbtn{
  -webkit-appearance:none;
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 7px 10px;           /* slightly tighter */
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height: 1;
}

.pillbtn:hover{ background: rgba(255,255,255,.10); }

.pillbtn:focus{
  outline:none;
  box-shadow: 0 0 0 6px rgba(231,35,84,.14);
}

.pillbtn--on{
  border-color: rgba(255,255,255,.28);
  background: rgba(231,35,84,.18);
}

.pillbtn__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

/* Keep STATUS pills on one line (optional) */
.filters__status .pillset{
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

/* Table */
.tablewrap{ margin-top:14px; overflow-x:auto; }

.table{
  width:100%;
  min-width: 740px;
  border-collapse:separate;
  border-spacing:0;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
}
.table th, .table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.table th{
  text-align:left;
  font-size: 12px;
  letter-spacing:.3px;
  color: var(--muted);
  background: rgba(0,0,0,.12);
}
.table tr:last-child td{ border-bottom:none; }
.table a{ color: var(--text); text-decoration:none; }
.table a:hover{ text-decoration:underline; }

/* Label tags on rows */
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  font-size: 12px;
  color: var(--text);
}
.tag__swatch{
  width:10px; height:10px; border-radius: 999px;
  background: #999;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.status__dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
}