:root {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #243d35;
  background: #faf8f2;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(ellipse at top, #eaf0e7, transparent 65%);
}
.envelope {
  width: min(100%, 29rem);
  padding: clamp(24px, 7vw, 46px);
  border: 1px solid #dddeda;
  border-radius: 24px;
  background: #fffefa;
  box-shadow: 0 16px 48px #243d3510;
}
.mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #285346;
  color: #fffefa;
}
.mark svg { width: 26px; height: 26px; }
.eyebrow { margin: 20px 0 6px; color: #496653; font-size: 13px; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.35; font-weight: 650; }
.lede { margin: 10px 0 26px; color: #526258; }
label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 650; }
input, button { font: inherit; }
input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid #849387;
  border-radius: 10px;
  color: inherit;
  background: #fffefa;
}
input:focus-visible, button:focus-visible { outline: 3px solid #a25a1c; outline-offset: 3px; }
.message { margin: 8px 0 0; font-size: 13px; color: #526258; }
.error { color: #8d3528; }
.ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 8px;
  padding: 2px 12px;
  border-radius: 10px;
  background: #eaf0e7;
  font-size: 14px;
}
button { cursor: pointer; }
.text-button {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #285346;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  min-height: 48px;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: #285346;
  color: #fff;
  font-weight: 650;
}
.primary:hover { background: #1f4338; }
.primary:disabled { cursor: default; opacity: .56; }
.footer {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #dddeda;
  color: #526258;
  font-size: 13px;
}
.invite-admin { width: min(100%, 38rem); }
.invite-admin h2 { font-size: 1.125rem; margin: 0 0 12px; }
.invite-admin form { border-top: 1px solid #dddeda; margin-top: 20px; padding-top: 16px; }
.invite-admin fieldset { border: 0; margin: 12px 0 0; padding: 0; }
.admin-levels { display: flex; gap: 16px; flex-wrap: wrap; }
.admin-levels label { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; }
.admin-levels input { width: 18px; min-height: 18px; }
.invite-admin .invitation-list { margin-top: 28px; }
.invite-admin .invitation-row { margin-top: 14px; }
.invitation-row h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.admin-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.issued-invitation textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #849387;
  border-radius: 10px;
  background: #fffefa;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.issued-invitation textarea:focus-visible { outline: 3px solid #a25a1c; outline-offset: 3px; }
.revoked-invitations { margin-top: 16px; }
.revoked-invitations summary { cursor: pointer; padding: 8px 0; font-weight: 650; }