* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: #1d2733;
  background: #f4f6f8;
}

.status {
  padding: 16px;
  color: #5a6b7d;
}
.status.error { color: #b3261e; }

main { padding: 12px; max-width: 880px; }

.card {
  background: #fff;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

h2 { margin: 0 0 10px; font-size: 15px; }
.muted { color: #8294a5; font-weight: normal; font-size: 13px; }

.row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 140px; }

input, select, button {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid #c6cfd8;
  border-radius: 6px;
  background: #fff;
}
input:focus, select:focus { outline: 2px solid #2f6fed33; border-color: #2f6fed; }

button {
  background: #2f6fed;
  border-color: #2f6fed;
  color: #fff;
  cursor: pointer;
}
button:hover { background: #245cd0; }
button:disabled { opacity: .55; cursor: default; }

#memberFilter { width: 100%; margin-bottom: 10px; }

.member {
  border-top: 1px solid #edf1f4;
  padding: 10px 2px;
}
.member-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.member-name { font-weight: 600; }
.member-email { color: #5a6b7d; }
.member-org { color: #8294a5; font-size: 13px; }
.member-head select { margin-left: auto; }

.badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #eef2f6;
  color: #5a6b7d;
}
.badge.invited { background: #fff4e0; color: #9a6b00; }

.groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid #c6cfd8;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  background: #fff;
}
.group-chip input { display: none; }
.group-chip.checked { background: #e7efff; border-color: #2f6fed; color: #1d4ed8; }
.group-chip.readonly { opacity: .5; cursor: default; }

.toast {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #1d2733;
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
  max-width: 90%;
}
.toast.error { background: #b3261e; }