:root {
  --ink: #17342d;
  --muted: #5d716b;
  --green: #286950;
  --green-dark: #164435;
  --paper: #f6f5ef;
  --card: #ffffff;
  --soft: #e7f0e9;
  --line: #d5dfd8;
  --danger: #982f2f;
  --shadow: 0 18px 45px rgba(20, 55, 44, 0.11);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top right, #deede2, transparent 34rem), var(--paper); color: var(--ink); font: 16px/1.5 Arial, sans-serif; }
a { color: inherit; }
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.25rem, 6vw, 4.75rem); }
h2 { font-size: clamp(1.65rem, 4vw, 2.5rem); }
h3 { font-size: 1.35rem; }
.muted { color: var(--muted); }
.eyebrow { color: var(--green); font-size: .74rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 .55rem; text-transform: uppercase; }

.login-shell { display: grid; min-height: 100vh; padding: 1.25rem; place-items: center; }
.login-card, .panel, .event-card, .summary-card { background: rgba(255, 255, 255, .94); border: 1px solid var(--line); box-shadow: var(--shadow); }
.login-card { border-radius: 1.5rem; padding: clamp(1.4rem, 5vw, 2.6rem); width: min(100%, 30rem); }
.login-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; font-weight: 700; gap: .4rem; }
input { border: 1px solid var(--line); border-radius: .7rem; font: inherit; padding: .8rem .9rem; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(40, 105, 80, .15); outline: 0; }

.button { align-items: center; background: var(--green); border: 0; border-radius: .7rem; color: #fff; display: inline-flex; font: 700 .9rem/1 Arial, sans-serif; gap: .45rem; justify-content: center; padding: .85rem 1rem; text-decoration: none; }
button.button, button { cursor: pointer; }
.button:hover { background: var(--green-dark); }
.button-quiet { background: transparent; border: 1px solid rgba(255, 255, 255, .6); white-space: nowrap; }

.topbar { align-items: flex-start; background: var(--green); color: #fff; display: flex; gap: 1rem; justify-content: space-between; padding: clamp(1.25rem, 4vw, 3rem) max(1.25rem, calc((100vw - 72rem) / 2)); }
.topbar .eyebrow, .topbar .muted, .back-link { color: rgba(255, 255, 255, .8); }
.back-link { display: inline-block; font-weight: 700; margin-bottom: 1rem; text-decoration: none; }
.admin-shell { display: grid; gap: 1.5rem; margin: 0 auto; max-width: 72rem; padding: clamp(1rem, 4vw, 2.5rem); }

.summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.summary-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-card { border-radius: 1rem; padding: 1.1rem; }
.summary-card span { color: var(--muted); display: block; font-size: .82rem; font-weight: 700; }
.summary-card strong { color: var(--green-dark); display: block; font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.05; margin-top: .35rem; }
.section-heading { margin-top: 1rem; }

.event-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-card { border-radius: 1.2rem; display: grid; gap: 1.2rem; padding: 1.25rem; }
.event-card-heading, .event-card-footer, .table-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.event-card-heading .status { flex: 0 0 auto; }
.event-slug { color: var(--muted); font: .8rem/1.3 monospace; margin: .45rem 0 0; overflow-wrap: anywhere; }
.event-metrics { display: grid; gap: .6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.event-metrics div { background: var(--soft); border-radius: .7rem; padding: .7rem; }
.event-metrics dt { color: var(--muted); font-size: .68rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.event-metrics dd { font-size: 1.25rem; font-weight: 800; margin: .25rem 0 0; }
.team-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.team-status { display: block; font-size: .76rem; margin-top: .2rem; }
.event-card-footer { align-items: center; }
.event-card-footer strong { color: var(--green-dark); }

.panel { border-radius: 1.2rem; padding: clamp(1rem, 3vw, 1.8rem); }
.table-heading { align-items: center; }
.table-wrap { margin-top: 1rem; overflow-x: auto; }
table { border-collapse: collapse; min-width: 43rem; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: .85rem .7rem; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
code { font-size: .82rem; overflow-wrap: anywhere; }
.pill, .status { border-radius: 999px; display: inline-block; font-size: .76rem; font-weight: 800; padding: .35rem .6rem; }
.pill, .status.active, .status.paid, .status.captured { background: var(--soft); color: var(--green-dark); }
.status.reserved, .status.pending { background: #fff0c9; color: #765300; }
.status.failed, .status.expired, .status.cancelled, .status.canceled { background: #fae3e0; color: var(--danger); }
.notice { border-radius: .75rem; padding: 1rem; }
.notice.error { background: #fae3e0; color: var(--danger); }
.empty-state { color: var(--muted); font-style: italic; }
.admin-tabs { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(7rem, 10rem)); margin-top: 1.25rem; }
.admin-tab { align-items: center; aspect-ratio: 1 / 1; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .55); border-radius: .85rem; color: #fff; display: flex; font-size: .9rem; font-weight: 700; justify-content: center; padding: 1rem; text-align: center; text-decoration: none; }
.admin-tab.active, .admin-tab:hover { background: #fff; color: var(--green-dark); }
.generator-form { display: grid; gap: 1rem; margin-top: 1.5rem; max-width: 42rem; }
.generator-form select, .generator-form textarea, .generated-html { border: 1px solid var(--line); border-radius: .7rem; font: inherit; padding: .8rem .9rem; width: 100%; }
.generator-field { display: grid; font-weight: 700; gap: .4rem; }
.generator-date-control { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; position: relative; }
.generator-date-control > input[type="text"] { min-width: 0; width: 100%; }
.generator-date-button { background: var(--green); border: 0; border-radius: .7rem; color: #fff; font: 700 .9rem/1 Arial, sans-serif; padding: .8rem 1rem; }
.generator-date-button:hover { background: var(--green-dark); }
.generator-native-date-picker { height: 1px; opacity: 0; pointer-events: none; position: absolute; right: 0; top: 100%; width: 1px; }
.generator-form label.inline-check { align-items: center; display: flex; font-weight: 700; gap: .6rem; }
.generator-form label.inline-check input { width: auto; }
.generator-form small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.team-settings-fields { border: 1px solid var(--line); border-radius: .8rem; display: grid; gap: 1rem; padding: 1rem; }
.team-settings-fields legend { color: var(--green-dark); font-weight: 800; padding: 0 .4rem; }
.generated-html { background: #f8fbf8; font: .8rem/1.45 monospace; min-height: 20rem; resize: vertical; }
.generator-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.preview-stage { background: #fff; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; padding: 1rem; }
.nabo-generator-button { align-self: start; background: #f25d30; border: 0; border-radius: 9999px; box-shadow: 0 4px 15px rgba(0, 0, 0, .1); color: #fff; cursor: pointer; font: 700 .95rem/1 "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .03em; padding: .8rem 2.5rem; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.nabo-generator-button:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .15); transform: translateY(-2px); }

@media (max-width: 700px) {
  .topbar { padding: 1.25rem; }
  .topbar .button { padding: .7rem; }
  .event-grid, .summary-grid-four { grid-template-columns: 1fr; }
  .event-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-settings { grid-template-columns: 1fr; }
  .event-card-footer, .table-heading { align-items: stretch; flex-direction: column; }
  .event-card-footer .button { width: 100%; }
  .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; min-width: 0; width: 100%; }
  table thead { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
  tr { border: 1px solid var(--line); border-radius: .8rem; margin-bottom: .85rem; padding: .35rem .8rem; }
  td { align-items: baseline; border: 0; display: flex; gap: 1rem; justify-content: space-between; padding: .6rem 0; text-align: right; }
  td::before { color: var(--muted); content: attr(data-label); font-size: .75rem; font-weight: 800; text-align: left; text-transform: uppercase; }
}

@media (max-width: 420px) {
  .topbar { flex-direction: column; }
  .topbar .button { width: 100%; }
  .event-metrics, .summary-grid { grid-template-columns: 1fr; }
}