.invitation-page {
  --invitation-paper: #f8f8f3;
  --invitation-ink: #273d33;
  --invitation-forest: #2d543f;
  --invitation-line: #dce2d6;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 34px 20px 28px;
  color: var(--invitation-ink);
  background: radial-gradient(ellipse at 12% 6%, #e8eddf 0, transparent 48%),
    radial-gradient(ellipse at 94% 94%, #f0e5d7 0, transparent 46%), var(--invitation-paper);
  font-family: var(--body, "DM Sans", sans-serif);
  overflow-wrap: anywhere;
}
.invitation-page *,
.invitation-page *::before,
.invitation-page *::after { box-sizing: border-box; }
.invitation-page .invitation-brand {
  max-width: 620px;
  margin: 0 auto 28px;
  font-family: var(--display, "Manrope", sans-serif);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -1.5px;
}
.invitation-brand span { color: #aa815c; }
.invitation-page .invitation-card {
  display: block;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--invitation-line);
  border-radius: 22px;
  background: #fffefb;
  box-shadow: 0 18px 64px #273d3309;
}
.invitation-page h1,
.invitation-page h2 { font-family: var(--display, "Manrope", sans-serif); }
.invitation-page h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.2;
  letter-spacing: -1.2px;
}
.invitation-page h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.invitation-page p { margin: 0 0 18px; line-height: 1.65; }
.invitation-page .invitation-kicker {
  color: #67735c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  margin-bottom: 14px;
}
.invitation-page .invitation-contact {
  display: grid;
  gap: 6px;
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--invitation-line);
  border-radius: 12px;
  background: #f4f6ee;
}
.invitation-contact span,
.invitation-page .invitation-help { color: #626c60; font-size: 13px; }
.invitation-page form { display: grid; gap: 10px; margin-top: 24px; }
.invitation-page label { display: block; font-size: 14px; font-weight: 600; }
.invitation-page input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid #aebca6;
  border-radius: 9px;
  background: #fff;
  color: var(--invitation-ink);
  font: inherit;
  font-size: 16px;
}
.invitation-page #invitation-code { font-size: 22px; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.invitation-page button {
  min-width: 0;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid #b8c5b0;
  border-radius: 10px;
  color: var(--invitation-forest);
  background: #fffefb;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
}
.invitation-page button:hover:not(:disabled) { background: #eef2e8; }
.invitation-page button.invitation-primary { background: var(--invitation-forest); color: #fff; }
.invitation-page button.invitation-primary:hover:not(:disabled) { background: #1d3f2d; }
.invitation-page button:disabled { opacity: .55; cursor: wait; }
.invitation-page :is(button, input):focus-visible { outline: 3px solid #69835c; outline-offset: 3px; }
.invitation-page .invitation-details { margin: 24px 0; padding: 0; }
.invitation-details > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--invitation-line); }
.invitation-details dt { color: #626c60; font-size: 13px; }
.invitation-details dd { margin: 0; font-weight: 600; }
.invitation-details dd span { font-size: 12px; font-weight: 400; }
.invitation-page .invitation-note { padding: 14px 16px; border-radius: 10px; background: #f0f3e9; font-size: 13px; }
.invitation-page .invitation-responses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.invitation-page button.invitation-selected { background: #dfe9d5; border: 2px solid var(--invitation-forest); }
.invitation-page .invitation-account { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--invitation-line); }
.invitation-page .invitation-poll-options { display: grid; gap: 16px; margin: 24px 0; }
.invitation-page .invitation-poll-option { min-width: 0; padding: 18px; border: 1px solid var(--invitation-line); border-radius: 12px; background: #f8faf3; }
.invitation-page .invitation-poll-option h2 { font-size: 18px; }
.invitation-page .invitation-poll-option .invitation-current { font-size: 13px; }
.invitation-page .invitation-proposal { padding: 24px 0; border-top: 1px solid var(--invitation-line); }
.invitation-page .invitation-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.invitation-page .invitation-time-fields > div { min-width: 0; }
.invitation-page .invitation-time-fields label { margin-bottom: 8px; }
.invitation-page .invitation-error { margin: 22px 0 0; padding: 14px 16px; border-radius: 10px; color: #783b2c; background: #faede6; }
.invitation-page .invitation-status { margin: 20px 0 0; color: #3b6246; font-size: 14px; }
.invitation-page .invitation-status:empty { display: none; }
.invitation-page .invitation-footer { display: block; max-width: 620px; margin: 24px auto 0; padding: 0; border: 0; color: #626c60; text-align: center; font-size: 12px; line-height: 1.7; }
.invitation-page [hidden] { display: none !important; }
.guest-invitation-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  margin: 20px 0;
  min-width: 0;
}
.guest-invitation-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line, #dce2d6);
  border-radius: 14px;
  background: #f8faf3;
  color: var(--ink, #273d33);
  overflow-wrap: anywhere;
}
.guest-invitation-card > strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display, "Manrope", sans-serif);
  font-size: 17px;
}
.guest-invitation-card > p { margin: 0 0 12px; line-height: 1.5; }
.guest-invitation-card > .pill { display: inline-block; margin-bottom: 12px; }
.guest-invitation-card > .muted { color: #626c60; font-size: 12px; }
.guest-invitation-card .response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.guest-invitation-card button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.guest-invitation-card button:focus-visible {
  outline: 3px solid #69835c;
  outline-offset: 3px;
}
.guest-invitation-card button:disabled { cursor: default; opacity: .55; }
@media (max-width: 480px) {
  .invitation-page { padding: 22px 12px; }
  .invitation-page .invitation-brand { margin-bottom: 18px; padding-left: 10px; }
  .invitation-page .invitation-card { padding: 24px 20px; border-radius: 16px; }
  .invitation-details > div { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .invitation-page .invitation-responses { gap: 8px; }
  .invitation-page .invitation-responses button { padding-inline: 8px; }
  .guest-invitation-card { padding: 16px; }
  .guest-invitation-card .response-actions button { flex: 1 1 130px; }
}