:root {
  /* -- Light, modern, friendly SaaS feel: white background, bold rounded --
     -- display type, a blue/green accent pairing, pill-shaped buttons.  -- */
  --bg: #FFFFFF;
  --bg-soft: #F7F9FC;
  --panel: #FFFFFF;
  --panel-2: #F5F7FA;
  --border: #E4E8EF;
  --text: #14171A;
  --muted: #667085;
  --accent: #2F6FED;        /* blue, brand/links */
  --accent-dim: #1E52C2;
  --accent-2: #E8F0FE;      /* pale blue wash */
  --cta: #16C784;           /* green, primary buttons */
  --cta-dim: #0FA86D;
  --success: #16C784;
  --danger: #E5484D;
  --radius: 10px;
  --radius-pill: 999px;
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }
body.soft-bg {
  background:
    radial-gradient(ellipse 55% 40% at 8% 0%, rgba(22,199,132,0.08), transparent 65%),
    radial-gradient(ellipse 50% 38% at 95% 8%, rgba(47,111,237,0.08), transparent 65%),
    #FFFFFF;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 960px; margin: 0 auto; padding: 24px; }
.container-narrow { max-width: 440px; margin: 0 auto; padding: 24px; }

/* ---- Nav ---- */
.nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; padding: 20px 32px; background: var(--bg); border-bottom: 1px solid var(--border); }
.nav .brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.nav .brand .nexus-mark { width: 30px; height: 21px; flex-shrink: 0; }
.nav .brand .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.nav .brand .wordmark .x { color: var(--accent); }
.nav a.navlink { color: var(--muted); margin-left: 16px; font-size: 14px; font-weight: 500; }
.nav a.navlink:hover { color: var(--text); text-decoration: none; }
.ghost-btn {
  border: 1.5px solid var(--text); color: var(--text); padding: 8px 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; background: transparent; cursor: pointer;
}
.ghost-btn:hover { background: var(--text); color: #fff; text-decoration: none; }

/* ---- Generic layout ---- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(20,23,26,0.04); }
.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.grid-2 > * { flex: 1 1 280px; min-width: 0; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 32px; }
h2 { font-size: 20px; }
p.muted, span.muted, .muted { color: var(--muted); }

label { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%; padding: 11px 14px; background: var(--panel-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 16px; font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
textarea { resize: vertical; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cta); color: #fff; border: none; padding: 11px 22px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-body);
}
.btn:hover { background: var(--cta-dim); text-decoration: none; }
.btn.secondary { background: #fff; border: 1.5px solid var(--text); color: var(--text); }
.btn.secondary:hover { background: var(--text); color: #fff; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.block { width: 100%; justify-content: center; }

.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* ---- Reusable action-bar: a row of buttons next to a page heading.
   Wraps cleanly with real gaps on desktop; on mobile, instead of letting
   several pill buttons wrap unevenly across lines with barely any space
   between them, it becomes one horizontally-swipeable strip. ---- */
.action-bar { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .action-bar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  }
  .action-bar .btn { flex-shrink: 0; white-space: nowrap; }
}
.badge.published { background: rgba(22,199,132,0.12); color: #0FA86D; }
.badge.draft { background: rgba(102,112,133,0.12); color: var(--muted); }
.badge.valid { background: rgba(22,199,132,0.12); color: #0FA86D; }
.badge.used { background: rgba(47,111,237,0.12); color: var(--accent); }
.badge.void, .badge.refunded { background: rgba(229,72,77,0.12); color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.error { background: rgba(229,72,77,0.08); border: 1px solid rgba(229,72,77,0.3); color: #C22429; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* .scan-result styling now lives in the SCANNER section below, alongside
   the overlay/offline-mode rules it's part of. */

/* =========================================================
   HOME PAGE HERO
   Light, airy gradient wash (soft mint / blue / pink blobs)
   instead of a dark backdrop -- bold rounded headline, pill
   CTAs, a bordered highlight card.
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 40% at 10% 5%, rgba(22,199,132,0.12), transparent 65%),
    radial-gradient(ellipse 45% 38% at 92% 10%, rgba(47,111,237,0.11), transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 55%, rgba(255,182,217,0.10), transparent 70%),
    #FFFFFF;
  display: flex;
  flex-direction: column;
}
.beam { display: none; } /* the old dark stage-light beams don't fit a light theme */

.hero-decor {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-decor span {
  position: absolute;
  display: block;
  border-radius: 3px;
}
.hero-decor span.circle { border-radius: 50%; }
.hero-decor span.ring { border-radius: 50%; background: none !important; border: 3px solid; }

.hero-crowd {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  line-height: 0;
}
.hero-crowd img { width: 100%; height: auto; display: block; }
.hero-crowd::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.85) 100%);
}

.hero-center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 210px;
}
.hero-mark { width: 76px; height: 54px; margin-bottom: 22px; }
.hero-center h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.08;
  max-width: 760px;
  color: var(--text);
}
.hero-center h1 .accent-word { color: var(--accent); }
.hero-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 480px;
  margin: 18px 0 30px;
}

/* ---- Bordered highlight card ---- */
.highlight-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  box-shadow: 0 6px 18px rgba(20,23,26,0.05);
  margin-bottom: 26px;
  max-width: 480px;
}
.highlight-strip .highlight-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(47,111,237,0.1);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.hero-ctas .btn { padding: 14px 26px; font-size: 15px; }

.browse-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--accent);
  margin-top: 20px; padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: rgba(47,111,237,0.08);
  border: 1.5px solid rgba(47,111,237,0.25);
}
.browse-cta:hover { background: rgba(47,111,237,0.14); text-decoration: none; }

.ticket-card {
  position: relative;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20,23,26,0.06);
  width: 100%;
  max-width: 460px;
  padding: 30px 36px 26px;
  text-align: left;
  margin-top: 20px;
}
.ticket-head { text-align: center; }
.stub-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 2px; font-size: 12px; color: var(--muted); }
.stub-title { font-weight: 700; font-size: 16px; margin-top: 2px; }
.ticket-tear {
  position: relative;
  border-top: 1.5px dashed var(--border);
  margin: 20px 0;
}
.ticket-tear::before, .ticket-tear::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  top: 50%;
  transform: translateY(-50%);
}
.ticket-tear::before { left: -49px; }
.ticket-tear::after { right: -49px; }
.ticket-actions { display: flex; gap: 10px; }
.ticket-actions .btn { flex: 1; font-size: 13.5px; padding: 11px 14px; white-space: nowrap; justify-content: center; }
.ticket-browse { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }

@media (max-width: 560px) {
  .hero-center h1 { font-size: 36px; }
  .ticket-card { padding: 26px 22px 22px; }
  .ticket-tear::before, .ticket-tear::after { display: none; }
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
/* ---- Home page: upcoming events preview ---- */
.home-preview { padding: 50px 24px 10px; }
.home-preview-head {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 22px;
}
.home-preview-head h2 { font-size: 24px; margin: 0; }
.home-preview-more { font-size: 14px; font-weight: 700; color: var(--accent); }
.home-preview-more:hover { text-decoration: none; }

/* ---- Home page: journey ---- */
.journey {
  position: relative;
  background: var(--bg-soft);
  padding: 50px 24px 70px;
}
.journey-track {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  position: relative;
}
.journey-track::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12%;
  right: 12%;
  border-top: 1.5px dashed var(--border);
}
.journey-step { position: relative; text-align: center; padding: 0 8px; flex: 1; min-width: 0; }
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.journey-step h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--text); }
.journey-step p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

@media (max-width: 700px) {
  .journey-track { flex-direction: column; gap: 34px; }
  .journey-track::before { display: none; }
}

/* ---- Footer ---- */
.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 24px 40px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 13px;
}
.site-footer .footer-mark { width: 20px; height: 14px; }

/* =========================================================
   DASHBOARD / ORGANIZER APP
   ========================================================= */
.section-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(20,23,26,0.04);
}
.section-card h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; margin: 0 0 14px;
  color: var(--text);
}
.section-card h2 .nexus-icon { color: var(--accent); }

.page-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 18px 0 22px;
}
.page-tabs a {
  padding: 9px 4px;
  margin-right: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 7px;
}
.page-tabs a:hover { text-decoration: none; color: var(--text); }
.page-tabs a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; flex: 1; min-width: 140px;
}
.stat-box .stat-value { font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--accent); }
.stat-box .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.link-copy-row {
  display: flex; gap: 8px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px;
}
.link-copy-row input { border: none; background: transparent; padding: 4px; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.link-copy-row .btn { flex-shrink: 0; padding: 6px 14px; font-size: 12px; }

.list-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }

.poster-drop {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  background: var(--panel-2);
}
.poster-drop img { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; margin: 0 auto 12px; }
.poster-drop .muted { font-size: 13px; }

.nexus-icon { display: inline-flex; }

/* ---- Admin: filter bar + sortable headers ---- */
.filter-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.filter-bar input[type="text"], .filter-bar input[type="search"] {
  width: auto; min-width: 220px;
}
.filter-bar select {
  width: auto;
}
.filter-bar .spacer { flex: 1; }

th.sortable a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
th.sortable a:hover { color: var(--text); text-decoration: none; }
th.sortable a.active { color: var(--accent); }

.currency-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.currency-pill {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; font-family: var(--font-display); font-weight: 700; font-size: 18px;
}
.currency-pill span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* =========================================================
   BROWSE EVENTS
   One consistent container width for every section (carousel,
   search, chips, grid) so everything lines up, and only two
   visual zones (a soft gradient header, then plain white for
   results) instead of several clashing full-bleed stripes.
   ========================================================= */

.browse-header {
  background:
    radial-gradient(ellipse 55% 70% at 8% 0%, rgba(22,199,132,0.09), transparent 65%),
    radial-gradient(ellipse 50% 65% at 95% 10%, rgba(47,111,237,0.09), transparent 65%),
    #FFFFFF;
  padding: 32px 0 26px;
}
.browse-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

.browse-header h1 { font-size: 28px; margin: 0 0 18px; }

.browse-carousel {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 22px;
  scroll-snap-type: x proximity;
}
.browse-carousel::-webkit-scrollbar { height: 6px; }
.browse-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.carousel-card {
  position: relative; flex: 0 0 auto; width: 300px; height: 168px;
  border-radius: 14px; overflow: hidden; scroll-snap-align: start;
  background: var(--panel-2); display: block; color: inherit;
  box-shadow: 0 4px 14px rgba(20,23,26,0.08);
}
.carousel-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,12,13,0) 0%, rgba(8,10,11,0.85) 100%);
  color: #fff; padding: 30px 14px 12px; font-size: 14px; font-weight: 700;
}
.carousel-card .cap .d { display: block; font-size: 10px; font-weight: 700; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }

.search-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(20,23,26,0.07);
  padding: 16px 18px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.search-card select, .search-card input[type="text"] {
  background: var(--panel-2); border: 1.5px solid var(--border); padding: 11px 16px; border-radius: var(--radius-pill); font-size: 14px;
}
.search-card select { flex: 0 0 auto; width: auto; }
.search-card input[type="text"] { flex: 1; min-width: 200px; }
.search-card button {
  background: var(--cta); color: #fff; border: none; padding: 11px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.search-card button:hover { background: var(--cta-dim); }

.chip-row { display: flex; gap: 8px; padding: 18px 0 0; flex-wrap: wrap; }
.chip-row a {
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--border); color: var(--muted); background: #fff;
}
.chip-row a:hover { text-decoration: none; border-color: var(--text); color: var(--text); }
.chip-row a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.browse-results { background: var(--bg); padding: 30px 0 70px; }
.event-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.event-card {
  position: relative;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(20,23,26,0.07); transition: box-shadow 0.15s, transform 0.15s;
  display: block; color: inherit;
  height: 320px;
  background: var(--panel-2);
  flex: 1 1 220px; max-width: 260px;
}
.event-card:hover { box-shadow: 0 12px 26px rgba(20,23,26,0.15); transform: translateY(-3px); text-decoration: none; }
.event-card .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card .thumb-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E8F0FE, #E8FBF3); color: var(--accent);
}
.event-card .date-corner {
  position: absolute; top: 10px; left: 10px;
  background: #fff; color: var(--text); font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
}
.event-card .title-strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,12,13,0) 0%, rgba(8,10,11,0.88) 75%);
  color: #fff; padding: 30px 12px 10px; font-size: 13px; font-weight: 700; line-height: 1.3;
}

.empty-state { text-align: center; padding: 60px 24px; color: var(--muted); }

/* =========================================================
   EVENT PURCHASE PAGE
   Two-column layout on wide screens: poster + details on the
   left, a sticky ticket-selection card on the right.
   ========================================================= */
.event-page-wrap { max-width: 1000px; margin: 0 auto; padding: 28px 24px 70px; }
.event-page-grid { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; }
.event-page-main { flex: 1 1 420px; min-width: 280px; }
.event-page-poster { width: 100%; border-radius: 16px; display: block; box-shadow: 0 8px 24px rgba(20,23,26,0.1); }
.event-page-side { flex: 0 0 340px; position: sticky; top: 24px; }
@media (max-width: 760px) { .event-page-side { position: static; flex-basis: 100%; } }

/* ---- Analytics: simple CSS bar chart, no charting library needed ---- */
.bar-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 160px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-chart .bar {
  width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0;
  transition: background 0.15s;
}
.bar-chart .bar:hover { background: var(--accent-dim); }
.bar-chart .bar-label { font-size: 10px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.sell-through-bar { background: var(--panel-2); border-radius: 999px; height: 6px; overflow: hidden; margin-top: 4px; }
.sell-through-bar .fill { background: var(--cta); height: 100%; border-radius: 999px; }

.analytics-callout {
  background: var(--panel-2); border-radius: var(--radius); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}

/* =========================================================
   MOBILE
   One responsive pass covering shared components used across
   the whole app (nav, forms, tables, filter bars, buttons),
   rather than a separate mobile-only design. A future native
   app is a separate project; this keeps the one website usable
   at any width in the meantime.
   ========================================================= */
@media (max-width: 700px) {
  .container, .container-narrow { padding: 16px; }
  .nav { padding: 14px 16px; }

  .list-row { flex-wrap: wrap; gap: 10px; }
  .list-row > div:last-child, .list-row > form { flex-shrink: 0; }

  h1 { font-size: 24px; }
  h2 { font-size: 17px; }

  /* Tables: scroll horizontally rather than squeezing columns unreadably thin */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Search / filter bars: stack instead of forcing a cramped single row */
  .search-card, .search-strip, .filter-bar {
    flex-direction: column; align-items: stretch;
  }
  .search-card select, .search-strip select, .filter-bar select,
  .search-card input, .search-strip input, .filter-bar input,
  .search-card button, .search-strip button, .filter-bar button {
    width: 100%;
  }
  .filter-bar .spacer { display: none; }

  /* Button groups: don't let long labels force horizontal overflow */
  .btn { white-space: normal; }

  /* Event page two-up: already flex-wraps, just tighten the gap */
  .event-page-grid { gap: 20px; }

  /* Carousel cards: slightly narrower so two peek at once on a phone */
  .carousel-card { width: 240px; height: 135px; }

  /* Event cards: the desktop 320px fixed height is disproportionately
     tall on a narrow single-column mobile layout -- a shorter, wider
     ratio needs less scrolling to browse the same number of events. */
  .event-card { height: 220px; }
  .event-card .title-strip { font-size: 13px; padding: 22px 10px 8px; }

  /* Hero sections: less wasted vertical space above the fold on a
     phone-height viewport. */
  .browse-header { padding: 20px 0 16px; }
  .browse-header h1 { font-size: 22px; margin-bottom: 10px; }

  .stat-row { gap: 10px; }
  .stat-box { min-width: 130px; }
}

/* =========================================================
   NAV: mobile hamburger toggle + desktop account dropdown
   The HTML/icons for this were already in place; this is the
   CSS that actually makes the toggle and dropdown work --
   without it, the hamburger button does nothing and the
   account menu (including Logout) never appears.
   ========================================================= */
.nav { position: relative; }

.nav-backdrop {
  display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20,23,26,0.01); border: none; padding: 0; margin: 0; cursor: default; z-index: 55;
}
.nav-backdrop.is-open { display: block; }

.nav-toggle-btn {
  display: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--text);
  background: none; border: none;
}
.nav-toggle-btn .menu-icon-close { display: none; }
.nav-toggle-btn[aria-expanded="true"] .menu-icon-open { display: none; }
.nav-toggle-btn[aria-expanded="true"] .menu-icon-close { display: block; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links .navlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  color: var(--muted); font-size: 14px; font-weight: 500; margin-left: 0;
}
.nav-links .navlink:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav-links .navlink-muted { opacity: 0.65; font-size: 13px; }
.nav-cta { margin-left: 6px; }

.nav-account { position: relative; margin-left: 4px; }
.account-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600; background: #fff;
}
.account-toggle-btn:hover { border-color: var(--text); }
.lang-toggle-btn { padding: 7px 12px; }
.account-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20,23,26,0.16); min-width: 200px; overflow: hidden; padding: 6px;
}
.account-dropdown.is-open { display: block; }
.account-dropdown a, .account-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px;
  border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 500;
  background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body);
}
.account-dropdown a:hover, .account-dropdown button:hover { background: var(--panel-2); text-decoration: none; }
.account-dropdown form { width: 100%; }

@media (max-width: 780px) {
  .nav-toggle-btn { display: flex; align-items: center; justify-content: center; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 10px 16px 16px; box-shadow: 0 16px 28px rgba(20,23,26,0.1);
    z-index: 60;
  }
  .nav-links.is-open { display: flex; }
  .nav-links .navlink { width: 100%; }
  .nav a.navlink { margin-left: 0; }
  .nav-cta { width: 100%; text-align: center; margin-left: 0; margin-top: 6px; }
  .nav-account { width: 100%; margin-left: 0; margin-top: 6px; }
  .account-toggle-btn { width: 100%; justify-content: space-between; }
  .account-name { max-width: none; flex: 1; text-align: left; }
  .account-dropdown { position: static; box-shadow: none; border: none; margin-top: 4px; padding-left: 6px; }
}

/* ---- Reusable pagination controls ---- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
}
.pagination .muted { font-size: 13px; }
.pagination .btn.secondary[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---- Scanner: video + result overlay, so the camera stays visibly
   live underneath the result instead of the result pushing it off
   screen (the earlier UX complaint: "doesn't look like it resumed") ---- */
.scan-stage { position: relative; background: #000; }
.scan-stage video { width: 100%; height: 60vh; max-height: 520px; min-height: 320px; object-fit: cover; display: block; }

.scan-overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.scan-overlay.is-visible { opacity: 1; pointer-events: auto; background: rgba(11,18,32,0.6); }

.scan-result { width: 100%; max-width: 380px; padding: 28px 20px; text-align: center; border-radius: var(--radius); background: #fff; }
.scan-result.ok { border: 3px solid var(--success); }
.scan-result.fail { border: 3px solid var(--danger); }
.scan-result h2 { margin: 4px 0 8px; font-size: 21px; letter-spacing: 0.4px; }
.scan-result.ok h2 { color: var(--success); }
.scan-result.fail h2 { color: var(--danger); }
.scan-name { font-size: 22px; font-weight: 700; margin: 4px 0; color: var(--text); }
.scan-sub { color: var(--muted); margin: 2px 0; }
.scan-time { font-weight: 600; margin-top: 6px; color: var(--text); }
.scan-offline-tag { margin-top: 10px; font-size: 12px; color: var(--accent); font-weight: 600; }
.scan-progress { height: 4px; background: var(--panel-2); border-radius: 999px; margin-top: 18px; overflow: hidden; }
.scan-progress-fill { height: 100%; width: 100%; transition: width linear; }
.scan-result.ok .scan-progress-fill { background: var(--success); }
.scan-result.fail .scan-progress-fill { background: var(--danger); }
.scan-tap-hint { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---- Compact per-row "..." actions dropdown, for tables with several
   per-row actions that would otherwise crowd a cell (e.g. attendees:
   transfer, resend, revoke, refund) ---- */
.row-actions { position: relative; display: inline-block; }
.row-actions-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--border);
  background: #fff; cursor: pointer; font-weight: 700; color: var(--text); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.row-actions-btn:hover { border-color: var(--text); }
.row-actions-menu {
  display: none; position: fixed; top: 0; left: 0; z-index: 100;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20,23,26,0.16); min-width: 160px; overflow: hidden; padding: 6px;
}
.row-actions-menu.is-open { display: block; }
.row-actions-menu a, .row-actions-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  border-radius: 8px; font-size: 13px; font-weight: 600; text-align: left;
  background: none; border: none; cursor: pointer; font-family: var(--font-body); color: var(--text);
}
.row-actions-menu a:hover, .row-actions-menu button:hover { background: var(--panel-2); text-decoration: none; }
.row-actions-menu button.danger-text, .row-actions-menu a.danger-text { color: var(--danger); }
.row-actions-menu form { width: 100%; }

/* ---- Reusable bulk-selection UI: checkbox column + floating action bar ---- */
.bulk-bar {
  position: sticky; top: 8px; z-index: 40;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #14171A; color: #fff;
  border-radius: var(--radius); padding: 12px 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 24px rgba(20,23,26,0.25);
}
.bulk-bar.is-visible { display: flex; }
.bulk-bar .bulk-count { font-weight: 700; font-size: 14px; }
.bulk-bar .bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bulk-bar .btn { padding: 8px 14px; font-size: 13px; }
.bulk-bar .btn.ghost { background: transparent; border: 1.5px solid rgba(255,255,255,0.35); color: #fff; }
.bulk-bar .btn.ghost:hover { border-color: #fff; }
table.bulk-table th.bulk-col, table.bulk-table td.bulk-col { width: 34px; padding-right: 0; }
.bulk-checkbox { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }