:root {
  color-scheme: light;
  --backend-bg: #f4f7f6;
  --backend-surface: #ffffff;
  --backend-surface-soft: #eef6f4;
  --backend-ink: #173b3c;
  --backend-muted: #617777;
  --backend-primary: #137f84;
  --backend-primary-dark: #0d6267;
  --backend-accent: #d5eee9;
  --backend-line: #d9e6e3;
  --backend-danger: #a43248;
  --backend-warning: #845e09;
  --backend-success: #176c51;
  --backend-sidebar: 236px;
  --backend-radius-sm: 10px;
  --backend-radius: 15px;
  --backend-shadow: 0 12px 34px rgb(20 59 60 / 7%);
  --backend-focus: 0 0 0 3px rgb(19 127 132 / 24%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--backend-bg); scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--backend-bg); color: var(--backend-ink); }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 0;
  box-shadow: var(--backend-focus);
}

.backend-shell {
  display: grid;
  grid-template-columns: var(--backend-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.backend-sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 16px;
  border-right: 1px solid #17484b;
  background: #113f42;
  color: #f4fbfa;
}

.backend-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  border-bottom: 1px solid rgb(255 255 255 / 13%);
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.backend-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e0f5ef;
  color: #12575b;
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.sidebar-event { padding: 20px 8px 10px; }
.sidebar-event small {
  display: block;
  margin-bottom: 5px;
  color: #a9c9c7;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.sidebar-event strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-event-status {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 99px;
  color: #c6dcda;
  font-size: .7rem;
  font-weight: 750;
}
.sidebar-event-status[data-status="published"] { border-color: #7fcdb8; color: #a9efd7; }
.sidebar-event-status[data-status="archived"] { border-color: #d99aa7; color: #f1bac4; }
.backend-event-switcher { display: block; margin-top: 9px; }
.backend-event-switcher select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 9px;
  background: rgb(255 255 255 / 8%);
  color: white;
  font: inherit;
  font-size: .76rem;
}
.backend-event-switcher option { color: #123f41; background: white; }

.backend-nav { display: grid; gap: 5px; margin-top: 14px; }
.backend-nav a {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #d1e4e2;
  font-size: .86rem;
  font-weight: 680;
  text-decoration: none;
}
.backend-nav a:hover { background: rgb(255 255 255 / 8%); color: white; }
.backend-nav a.is-current {
  background: #e3f5f0;
  color: #123f42;
}
.backend-nav-icon { width: 20px; text-align: center; }
.backend-sidebar-footer { margin-top: auto; padding: 16px 8px 0; color: #9bbdbb; font-size: .72rem; }

.backend-main { min-width: 0; }
.backend-mobile-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: none;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--backend-line);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(14px);
}
.backend-mobile-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-mobile-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.backend-nav-toggle {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--backend-line);
  border-radius: 11px;
  background: white;
  color: var(--backend-ink);
  cursor: pointer;
}
.backend-nav-backdrop { display: none; }

.backend-content {
  width: min(1220px, calc(100% - 40px));
  margin-inline: auto;
  padding: 28px 0 64px;
}

.backend-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.backend-eyebrow {
  margin: 0 0 5px;
  color: var(--backend-primary);
  font-size: .7rem;
  font-weight: 820;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.backend-page-header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -.035em;
}
.backend-muted { color: var(--backend-muted); }
.backend-page-header p.backend-muted { max-width: 740px; margin: 7px 0 0; }

.backend-actions, .button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.backend-button,
.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #bfd3d0;
  border-radius: var(--backend-radius-sm);
  background: white;
  color: var(--backend-ink);
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 730;
  text-decoration: none;
}
.backend-button:hover, .button:hover { border-color: var(--backend-primary); }
.backend-button.primary, .button.primary {
  border-color: var(--backend-primary);
  background: var(--backend-primary);
  color: white;
}
.backend-button.primary:hover, .button.primary:hover { background: var(--backend-primary-dark); }
.backend-button.danger { color: var(--backend-danger); }
.backend-button:disabled { cursor: wait; opacity: .55; }

.backend-panel,
.backend-card,
.backend-state {
  border: 1px solid var(--backend-line);
  border-radius: var(--backend-radius);
  background: var(--backend-surface);
  box-shadow: var(--backend-shadow);
}
.backend-panel { padding: clamp(16px, 2vw, 24px); }
.backend-panel h2, .backend-panel h3 { margin-top: 0; }

.backend-status-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 99px;
  background: #eaf3f1;
  color: #315a5b;
  font-size: .7rem;
  font-weight: 780;
}
.status-badge.attending { background: #e2f5eb; color: var(--backend-success); }
.status-badge.declined, .status-badge.revoked { background: #fbe9ed; color: var(--backend-danger); }
.status-badge.partial { background: #fff1d7; color: var(--backend-warning); }
.status-badge.pending { background: #edf1f5; color: #536474; }

.backend-field { display: grid; gap: 5px; color: #34595a; font-size: .78rem; font-weight: 720; }
.backend-input,
.backend-select,
.backend-field input,
.backend-field select,
.backend-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #c3d5d2;
  border-radius: var(--backend-radius-sm);
  background: white;
  color: var(--backend-ink);
}

.backend-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 15px;
  border: 1px solid #b7ddce;
  border-radius: 12px;
  background: #f0fbf6;
  color: var(--backend-success);
  box-shadow: 0 15px 40px rgb(17 63 66 / 18%);
  font-size: .84rem;
  font-weight: 720;
}
.backend-toast.is-error { border-color: #e8bbc4; background: #fff4f6; color: var(--backend-danger); }

.backend-dialog {
  width: min(440px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  color: var(--backend-ink);
  box-shadow: 0 30px 90px rgb(5 30 31 / 32%);
}
.backend-dialog::backdrop { background: rgb(8 37 39 / 56%); backdrop-filter: blur(2px); }
.dialog-body { padding: 22px; }
.dialog-body h2 { margin: 0 0 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--backend-line); background: #f7faf9; }

.backend-state {
  padding: 34px 22px;
  text-align: center;
}
.backend-state h2 { margin: 0 0 8px; font-family: Georgia, serif; font-weight: 500; }
.backend-state.error { color: var(--backend-danger); }

@media (max-width: 1024px) {
  :root { --backend-sidebar: 210px; }
  .backend-content { width: min(100% - 28px, 1220px); }
}

@media (max-width: 850px) {
  .backend-shell { display: block; }
  .backend-mobile-bar { display: flex; }
  .backend-sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-102%);
    width: min(300px, calc(100vw - 54px));
    transition: transform .2s ease;
  }
  .backend-shell.nav-open .backend-sidebar { transform: translateX(0); }
  .backend-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgb(9 36 38 / 55%);
  }
  .backend-shell.nav-open .backend-nav-backdrop { display: block; }
  .backend-page-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .backend-content { width: min(100% - 20px, 1220px); padding-top: 18px; }
  .backend-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .backend-actions > * { width: 100%; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .backend-mobile-bar { gap: 8px; padding-inline: 10px; }
  .backend-mobile-bar > strong { font-size: .88rem; }
  .backend-mobile-actions .sidebar-event-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}