.community { max-width: 36rem; }
.community h1 { overflow-wrap: anywhere; }
.community #status { min-height: 1.6rem; margin: .75rem 0; }
.community #status[data-error] { color: #f1bca5; }
.card { display: grid; gap: 1rem; padding: clamp(1rem, 4vw, 1.8rem); background: #23272b; border: 1px solid var(--line); border-radius: 18px; }
.card label { display: block; }
.card label span { color: var(--muted); }
.card input:not([type=checkbox]), .card select {
  display: block; width: 100%; margin-top: .4rem; padding: .65rem .75rem; color: inherit; background: #171a1d;
  border: 1px solid #515957; border-radius: 9px; font: inherit; font-size: 1rem;
}
.card .check { display: flex; align-items: center; gap: .45rem; }
.card button, .card .primary {
  width: fit-content; padding: .7rem .95rem; border-radius: 10px; border: 1px solid var(--green);
  background: var(--green); color: #172421; font: inherit; font-weight: 650; cursor: pointer;
}
.card button:disabled { opacity: .55; cursor: default; }
.card .secondary { color: inherit; background: #292f33; border-color: #515957; }
.card :is(input, select, button, a):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.card .actions, .card li { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.invites { display: grid; justify-items: start; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.invites h2 { font-size: 1.2rem; margin: 0; }
.invites ul { width: 100%; list-style: none; margin: 0; padding: 0; }
.invites li { justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.invites li:last-child { border-bottom: 0; }
#invite-output { justify-self: stretch; display: grid; gap: .65rem; }
#invite-output canvas { width: min(190px, 100%); height: auto; image-rendering: pixelated; }