@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Private admin sandbox: a deliberate saffron signal that cannot be confused
   with the public product chrome. */
.ghost-mode-bar {
  position: fixed; z-index: 1200; inset: 0 0 auto; min-height: 58px;
  display: flex; align-items: center; gap: 14px; padding: 9px 24px;
  color: #211b0e; background: #e6b85c; border-bottom: 1px solid #f0d38d;
  box-shadow: 0 10px 28px rgba(0,0,0,.24); animation: ghostBarIn .28s ease both;
}
.ghost-mode-bar[hidden], .ghost-reset-confirm[hidden] { display:none !important; }

.ghost-writes-paused {
  position:fixed;
  z-index:1004;
  left:50%;
  bottom:20px;
  width:min(560px, calc(100% - 28px));
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  flex-direction:column;
  padding:13px 16px;
  border:1px solid rgba(113, 72, 18, .28);
  border-radius:14px;
  background:#fff7e5;
  color:#49300f;
  box-shadow:0 12px 32px rgba(40, 29, 13, .2);
}

.ghost-writes-paused[hidden] { display:none !important; }
.ghost-writes-paused span { font-size:.86rem; line-height:1.35; }
@keyframes ghostBarIn { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:none } }
.ghost-mode-status { display:flex; align-items:center; gap:9px; flex:none }
.ghost-mode-status div { display:grid; gap:2px }
.ghost-mode-status strong { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase }
.ghost-mode-status span:not(.ghost-mode-pulse) { font-size:12px; font-weight:600 }
.ghost-mode-pulse { width:9px; height:9px; border-radius:50%; background:#7d4d13; box-shadow:0 0 0 5px rgba(125,77,19,.14) }
.ghost-mode-note { margin:0 auto 0 0; font-size:12px; opacity:.8 }
.ghost-mode-actions { display:flex; gap:5px; flex-wrap:wrap }
.ghost-mode-actions button, .ghost-reset-confirm button {
  min-height:32px; padding:0 10px; border:1px solid rgba(33,27,14,.25); border-radius:8px;
  background:rgba(255,248,224,.35); color:#211b0e; font-size:11px; font-weight:700; cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.ghost-mode-actions button:hover, .ghost-reset-confirm button:hover { background:#f8e5ae; transform:translateY(-1px) }
.ghost-mode-actions button[aria-pressed="true"] { background:#211b0e; color:#f8e5ae; }
.ghost-mode-utility { margin-left:auto }
.ghost-mode-utility button:last-child { background:#8f3f2f; border-color:#8f3f2f; color:#fff2df }
.ghost-reset-confirm { display:flex; align-items:center; gap:7px; font-size:11px; white-space:nowrap }
.ghost-reset-confirm button:first-of-type { background:#8f3f2f; color:#fff2df }
.ghost-entry-modal, .ghost-profile-modal { max-width:520px; padding:34px; border:1px solid rgba(230,184,92,.4); border-radius:22px; background:#17171d; color:var(--fog-white); box-shadow:0 24px 80px rgba(0,0,0,.5) }
.ghost-entry-modal::backdrop, .ghost-profile-modal::backdrop { background:rgba(4,5,8,.76); backdrop-filter:blur(5px) }
.ghost-entry-modal h2, .ghost-profile-modal h2 { margin:8px 0 10px; font-family:var(--font-display); letter-spacing:-.04em }
.ghost-profile-details { display:grid; gap:9px; margin:18px 0 }
.ghost-profile-details div { display:grid; grid-template-columns:minmax(112px,.65fr) 1.35fr; gap:12px; padding-top:9px; border-top:1px solid rgba(255,255,255,.12) }
.ghost-profile-details dt { color:var(--fog-dim); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase }
.ghost-profile-details dd { margin:0; font-weight:700 }
.ghost-entry-modal p { color:var(--fog-dim); line-height:1.6 }
.ghost-guarantees { display:grid; gap:6px; margin:20px 0; padding:14px; border-left:3px solid #e6b85c; background:rgba(230,184,92,.08); color:var(--fog-dim); font-size:12px; line-height:1.5 }
.ghost-guarantees strong { color:#f2c96e; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase }
.ghost-private-label { color:#e6b85c !important; font:10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase }
#ghostProfileCard { margin-top:20px; padding:20px; border:1px solid rgba(230,184,92,.3); border-radius:16px; background:rgba(255,255,255,.04) }
#ghostProfileCard h3 { margin:0 0 8px; font-family:var(--font-display); font-size:24px }
#ghostProfileCard p { margin:8px 0; color:var(--fog-dim); line-height:1.55 }
body.ghost-mode-active { padding-top:58px }
body.ghost-mode-active .member-dashboard { top:58px }
@media (max-width:800px) {
  .ghost-mode-bar { align-items:flex-start; flex-wrap:wrap; padding:9px 14px }
  .ghost-mode-note { order:3; flex-basis:100%; margin:0 }
  .ghost-mode-utility { margin-left:0 }
  body.ghost-mode-active { padding-top:112px }
  body.ghost-mode-active .member-dashboard { top:112px }
}
@media (max-width:520px) {
  .ghost-mode-bar { gap:8px }
  .ghost-mode-actions button { min-height:36px }
  .ghost-entry-modal, .ghost-profile-modal { width:calc(100% - 24px); padding:25px 20px }
}

/* Member dashboard — the signed-in home (Mission Control layout). */
.member-dashboard {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow-y: auto;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(123, 97, 255, 0.14), transparent 60%),
    radial-gradient(900px 480px at 90% 0%, rgba(232, 98, 58, 0.1), transparent 55%),
    var(--void);
  color: var(--fog-white);
}
.member-dashboard[hidden] { display: none !important; }
body.member-dash-open { overflow: hidden; }
.member-dash-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 72px;
  animation: dashRise 0.55s var(--ease) both;
}
@keyframes dashRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.dash-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 239, 245, 0.4);
}
.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dash-header-id { display: flex; align-items: center; gap: 16px; }
.dash-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--signal-orange);
  font-size: 20px;
}
.dash-header-id h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 29px);
  letter-spacing: -0.04em;
}
.dash-header-side { display: flex; align-items: center; gap: 12px; }
.dash-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass);
}
.dash-identity-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--pulse-cyan);
  color: #11131a;
  font-weight: 700;
  font-size: 12px;
}
.dash-identity strong { display: block; font-size: 14px; }
.dash-identity span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 239, 245, 0.4);
}
.dash-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: rgba(237, 239, 245, 0.65);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dash-close:hover { background: var(--glass-strong); color: var(--fog-white); }
.dash-glance { display: flex; align-items: flex-end; justify-content: space-between; margin: 34px 0 12px; gap: 14px; }
.dash-glance p { margin: 4px 0 0; font-size: 14px; color: rgba(237, 239, 245, 0.55); }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-stat {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--graphite);
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}
.dash-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 239, 245, 0.4);
}
.dash-stat-value {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.03em;
}
.dash-stat-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(237, 239, 245, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-stat.tone-cyan .dash-stat-value { color: var(--pulse-cyan); }
.dash-stat.tone-orange .dash-stat-value { color: var(--signal-orange); }
.dash-stat.tone-violet .dash-stat-value { color: var(--pulse-violet); }
.dash-stat.tone-gold .dash-stat-value { color: #f3b45f; }
.dash-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; margin-top: 14px; }
.dash-panel {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--graphite);
  padding: 20px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
  min-width: 0;
}
.dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash-panel-head h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.03em;
}
.dash-panel-action {
  border: none;
  background: none;
  color: rgba(237, 239, 245, 0.45);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}
.dash-panel-action:hover { color: var(--fog-white); }
.dash-panel-copy { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: rgba(237, 239, 245, 0.55); }
.dash-empty { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: rgba(237, 239, 245, 0.45); }
.dash-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; }
.dash-day {
  min-height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-day.is-today { border-color: rgba(77, 232, 255, 0.4); }
.dash-day.has-open { border-color: rgba(232, 98, 58, 0.7); background: rgba(232, 98, 58, 0.1); }
.dash-day-dow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(237, 239, 245, 0.4);
}
.dash-day-num { margin-top: 2px; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.dash-day-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 10px 0 8px; }
.dash-day-kind {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dash-day-kind.tone-orange { color: var(--signal-orange); }
.dash-day-kind.tone-cyan { color: var(--pulse-cyan); }
.dash-day strong {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dash-day-note { margin-top: 3px; font-size: 10px; color: rgba(237, 239, 245, 0.45); }
.dash-day-more { margin-top: auto; font-size: 10px; color: rgba(237, 239, 245, 0.4); }
.dash-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(232, 98, 58, 0.25);
  border-radius: 14px;
  background: rgba(232, 98, 58, 0.06);
}
.dash-banner p { margin: 0; flex: 1; font-size: 13px; }
.dash-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-orange); flex: none; }
.dash-banner button {
  border: none;
  background: none;
  color: var(--signal-orange);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dash-list { margin-top: 14px; display: flex; flex-direction: column; }
.dash-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  min-width: 0;
}
.dash-list-row:first-child { border-top: none; }
.dash-row-spark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--pulse-violet);
  font-size: 13px;
}
.dash-list-row > div { flex: 1; min-width: 0; }
.dash-list-row strong { display: block; font-size: 13.5px; }
.dash-list-row > div span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(237, 239, 245, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-row-button {
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--signal-orange);
  color: #11131a;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: none;
  transition: transform 0.2s var(--spring);
}
.dash-row-button:hover { transform: translateY(-1px); }
.dash-chip {
  flex: none;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dash-chip.tone-cyan { color: var(--pulse-cyan); background: rgba(77, 232, 255, 0.09); border: 1px solid rgba(77, 232, 255, 0.2); }
.dash-chip.tone-dim { color: rgba(237, 239, 245, 0.5); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.dash-block-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fog-white);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.dash-block-button:hover { background: var(--glass-strong); }
.dash-profile-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.dash-profile-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: rgba(77, 232, 255, 0.09);
  color: var(--pulse-cyan);
  font-weight: 700;
}
.dash-profile-row > div { flex: 1; }
.dash-profile-row strong { font-size: 13px; }
.dash-progress {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.dash-progress span { display: block; height: 100%; border-radius: 999px; background: var(--pulse-cyan); }
.dash-menu-preview {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  object-position: top;
  margin-top: 14px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
}
.dash-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--graphite);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16);
}
.dash-quick-row p { margin: 4px 0 0; font-size: 13px; color: rgba(237, 239, 245, 0.55); }
.dash-quick-group { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-quick {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(237, 239, 245, 0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--spring), background 0.2s var(--ease);
}
.dash-quick:hover { transform: translateY(-2px); background: var(--glass-strong); }
.dash-quick.primary { border: none; background: var(--signal-orange); color: #101217; }
.dash-panel-wide { min-width: 0; }
.calendar-sync-card { grid-column: 1 / -1; }
.calendar-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 6px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: rgba(237, 239, 245, 0.62);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-sync-state span { width: 7px; height: 7px; border-radius: 50%; background: rgba(237, 239, 245, 0.35); }
.calendar-sync-state.is-connected span { background: var(--pulse-cyan); box-shadow: 0 0 9px rgba(77, 232, 255, 0.55); }
.calendar-sync-state.is-syncing span { background: #f3b45f; animation: calendarSyncPulse 1.1s ease-in-out infinite; }
.calendar-sync-state.is-needs-attention { color: #f0805a; border-color: rgba(232, 98, 58, 0.35); }
.calendar-sync-state.is-needs-attention span { background: var(--signal-orange); }
@keyframes calendarSyncPulse { 50% { opacity: 0.35; transform: scale(0.8); } }
.calendar-sync-permissions,
.calendar-sync-private { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: rgba(237, 239, 245, 0.58); }
.calendar-sync-private {
  margin-top: 7px;
  padding: 10px 12px;
  border-left: 2px solid var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.045);
}
.calendar-sync-notice,
.calendar-sync-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(77, 232, 255, 0.2);
  border-radius: 10px;
  background: rgba(77, 232, 255, 0.06);
  color: rgba(237, 239, 245, 0.78);
  font-size: 12px;
  line-height: 1.5;
}
.calendar-sync-notice.is-error,
.calendar-sync-error { border-color: rgba(232, 98, 58, 0.3); background: rgba(232, 98, 58, 0.07); }
.calendar-sync-picker { margin-top: 16px; }
.calendar-sync-picker label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.calendar-sync-picker select {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: #191b25;
  color: var(--fog-white);
}
.calendar-sync-or { display: block; margin: 10px 0 -6px; color: rgba(237, 239, 245, 0.35); font-size: 11px; text-align: center; }
.calendar-sync-onboarding {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(77, 232, 255, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(77, 232, 255, 0.09), rgba(77, 232, 255, 0.025));
}
.calendar-sync-onboarding h4 { margin: 7px 0 0; font-size: 16px; }
.calendar-sync-onboarding p { margin: 8px 0 0; color: rgba(237, 239, 245, 0.66); font-size: 13px; line-height: 1.5; }
.calendar-sync-onboarding .dash-block-button { margin-top: 14px; border-color: rgba(77, 232, 255, 0.45); }
.calendar-sync-health { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.calendar-sync-health div { padding: 11px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
.calendar-sync-health span { display: block; color: rgba(237, 239, 245, 0.4); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.calendar-sync-health strong { display: block; margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
.calendar-sync-conflicts { margin-top: 12px; padding: 12px; border: 1px solid rgba(232, 98, 58, 0.24); border-radius: 12px; background: rgba(232, 98, 58, 0.045); }
.calendar-sync-conflicts h4 { margin: 0; color: #f3b45f; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.calendar-sync-conflicts ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.calendar-sync-conflicts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.calendar-sync-conflicts li:first-child { padding-top: 0; border-top: 0; }
.calendar-sync-conflicts strong { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.calendar-sync-conflicts span { grid-column: 1; color: rgba(237, 239, 245, 0.58); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-sync-conflicts time { grid-column: 2; grid-row: 1 / span 2; color: rgba(237, 239, 245, 0.42); font-family: var(--font-mono); font-size: 9px; text-align: right; white-space: nowrap; }
.calendar-conflict-compare {
  grid-column: 1 / -1;
  display: grid;
  gap: 1px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
}
.calendar-conflict-compare > div {
  display: grid;
  grid-template-columns: minmax(70px, 0.55fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.calendar-conflict-compare .calendar-conflict-heading { background: rgba(255, 255, 255, 0.06); }
.calendar-sync-conflicts .calendar-conflict-compare strong,
.calendar-sync-conflicts .calendar-conflict-compare span { grid-column: auto; font-size: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.calendar-conflict-heading span { color: rgba(237, 239, 245, 0.72); font-weight: 700; }
.calendar-conflict-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.calendar-conflict-actions button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 8px;
  color: var(--fog-white);
  background: rgba(232, 98, 58, 0.09);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.calendar-conflict-recovery { grid-column: 1 / -1; margin: 8px 0 0; color: #f3b45f; font-size: 11px; line-height: 1.4; }
.calendar-sync-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.calendar-sync-actions .dash-block-button { width: auto; min-width: 150px; margin-top: 0; }
.calendar-sync-disconnect-link,
.calendar-sync-cancel {
  border: 0;
  background: none;
  color: rgba(237, 239, 245, 0.52);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.calendar-sync-confirm { margin-top: 12px; padding: 12px; border: 1px solid rgba(232, 98, 58, 0.3); border-radius: 10px; background: rgba(232, 98, 58, 0.07); }
.calendar-sync-confirm[hidden] { display: none !important; }
.calendar-sync-confirm p { margin: 0; font-size: 12px; line-height: 1.5; }
.calendar-sync-confirm > div { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.calendar-sync-danger { padding: 9px 12px; border: 0; border-radius: 9px; background: var(--signal-orange); color: #101217; font-size: 11px; font-weight: 700; cursor: pointer; }
.calendar-source-import {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(77, 232, 255, 0.2);
  border-radius: 12px;
  background: rgba(77, 232, 255, 0.035);
}
.calendar-source-import.is-open { display: block; }
.calendar-source-import h4 { margin: 0; font-size: 14px; }
.calendar-source-import p { margin: 5px 0 0; color: rgba(237, 239, 245, 0.6); font-size: 12px; line-height: 1.5; }
.calendar-source-import > .dash-block-button { width: auto; min-width: 190px; margin: 0; }
.calendar-source-import-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.calendar-source-fields {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(135px, 1fr) minmax(135px, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.calendar-source-fields label { color: rgba(237, 239, 245, 0.62); font-size: 11px; }
.calendar-source-fields select,
.calendar-source-fields input {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: #191b25;
  color: var(--fog-white);
  color-scheme: dark;
}
.calendar-source-fields .dash-block-button { grid-column: 1 / -1; margin-top: 0; }
.calendar-source-events { display: grid; gap: 8px; margin: 14px 0; padding: 0; border: 0; }
.calendar-source-events legend { margin-bottom: 8px; color: rgba(237, 239, 245, 0.72); font-size: 12px; font-weight: 700; }
.calendar-source-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}
.calendar-source-event input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--signal-orange); }
.calendar-source-event span,
.calendar-source-event strong,
.calendar-source-event small,
.calendar-source-event em { display: block; min-width: 0; }
.calendar-source-event strong { font-size: 13px; overflow-wrap: anywhere; }
.calendar-source-event small { margin-top: 4px; color: rgba(237, 239, 245, 0.58); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.calendar-source-event em { margin-top: 6px; color: var(--pulse-cyan); font-size: 10px; font-style: normal; }
.calendar-sync-card button:disabled,
.calendar-sync-card select:disabled { opacity: 0.52; cursor: wait; }
@media (max-width: 980px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-week { grid-template-columns: repeat(7, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .dash-quick-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .member-dash-shell { padding: 24px 16px 56px; }
  .dash-stats { grid-template-columns: 1fr; }
  .dash-header { flex-direction: column; }
  .dash-header-side { width: 100%; justify-content: space-between; }
  .calendar-sync-card .dash-panel-head { align-items: flex-start; }
  .calendar-sync-health { grid-template-columns: 1fr 1fr; }
  .calendar-sync-conflicts li { grid-template-columns: 1fr; }
  .calendar-sync-conflicts time { grid-column: 1; grid-row: auto; text-align: left; white-space: normal; }
  .calendar-sync-actions { align-items: stretch; flex-direction: column; }
  .calendar-sync-actions .dash-block-button { width: 100%; }
  .calendar-source-import { align-items: stretch; flex-direction: column; }
  .calendar-source-import > .dash-block-button { width: 100%; }
  .calendar-source-import-head { flex-direction: column; }
  .calendar-source-fields { grid-template-columns: 1fr; }
  .calendar-source-fields .dash-block-button { grid-column: 1; }
  .calendar-sync-confirm > div { align-items: stretch; flex-direction: column; }
  .calendar-sync-danger, .calendar-sync-cancel { min-height: 44px; }
}

/* Topbar dashboard entry — hidden until signed in. */
.dashboard-entry-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
  color: var(--fog-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--spring);
}
.dashboard-entry-button:hover { background: var(--glass-strong); transform: translateY(-1px); }
.dashboard-entry-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--pulse-cyan);
  stroke-width: 1.8;
}
.dashboard-entry-button[hidden] { display: none !important; }

/* Admin Center → Members: read-only plan badge. */
.admin-plan-badge { color: #f3b45f; border-color: rgba(243, 180, 95, 0.35); background: rgba(243, 180, 95, 0.08); }
.admin-member-card { grid-template-columns: 1fr; }

:root {
  /* Cinematic dark system */
  --void: #0a0b10;
  --graphite: #14161f;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --signal-orange: #e8623a;
  --pulse-violet: #7b61ff;
  --pulse-cyan: #4de8ff;
  --fog-white: #edeff5;
  --fog-dim: rgba(237, 239, 245, 0.6);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --role-accent: #4de8ff;
  --role-accent-soft: #8ff3ff;
  --b1: #7b61ff;
  --b2: #4de8ff;
  --b3: #e8623a;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Legacy token remap — flips the existing rules to the dark system */
  --ink: #edeff5;
  --ink-soft: rgba(237, 239, 245, 0.62);
  --cream: #0a0b10;
  --paper: #14161f;
  --green: #e8623a;
  --green-2: #f0805a;
  --lime: rgba(77, 232, 255, 0.16);
  --coral: #e8623a;
  --yellow: #e8b44d;
  --truck-purple: #8f7bff;
  --blue: #4de8ff;
  --line: rgba(255, 255, 255, 0.12);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --muted: rgba(237, 239, 245, 0.6);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--fog-white);
  background: var(--void);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body.intro-active {
  overflow: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.booked-custom-cursor,
body.booked-custom-cursor * {
  cursor: none !important;
}

.site-cursor {
  --cursor-x: -100px;
  --cursor-y: -100px;
  width: 0;
  height: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
  transition: opacity 0.16s ease;
  will-change: transform;
}

.site-cursor.is-visible {
  opacity: 1;
}

.site-cursor-ring {
  width: 14px;
  height: 14px;
  position: absolute;
  left: -7px;
  top: -7px;
  border: 1px solid rgba(82, 168, 255, 0.32);
  border-radius: 50%;
  background: rgba(82, 168, 255, 0.1);
  box-shadow:
    0 0 8px rgba(82, 168, 255, 0.48),
    0 0 18px rgba(33, 123, 222, 0.2);
  transition:
    width 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    left 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.16s ease,
    transform 0.12s ease;
}

.site-cursor-arrow {
  width: 23px;
  height: 27px;
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  overflow: visible;
  filter:
    drop-shadow(0 1px 1px rgba(4, 24, 40, 0.34))
    drop-shadow(0 0 4px rgba(66, 153, 225, 0.55));
  transform-origin: 3px 3px;
  transition: transform 0.15s ease, opacity 0.12s ease;
}

.site-cursor-arrow path:first-child {
  fill: #ffffff;
  stroke: #061a2a;
  stroke-width: 2;
}

.site-cursor-arrow path:last-child {
  stroke: #2f8de4;
  stroke-width: 2;
}

.site-cursor-hand {
  width: 28px;
  height: 28px;
  position: absolute;
  left: -12px;
  top: -12px;
  opacity: 0;
  filter:
    drop-shadow(0 1px 1px rgba(4, 24, 40, 0.3))
    drop-shadow(0 0 5px rgba(66, 153, 225, 0.5));
  transform: scale(0.78) rotate(3deg);
  transition: transform 0.15s ease, opacity 0.12s ease;
}

.site-cursor-hand path {
  fill: #ffffff;
  stroke: #061a2a;
  stroke-width: 1.9;
}

.site-cursor-beam {
  width: 2px;
  height: 23px;
  position: absolute;
  left: -1px;
  top: -11.5px;
  opacity: 0;
  border-radius: 2px;
  background: #ffffff;
  border: 1px solid #061a2a;
  box-shadow:
    0 0 5px rgba(66, 153, 225, 0.68),
    0 0 11px rgba(33, 123, 222, 0.28);
  transition: opacity 0.12s ease;
}

.site-cursor.is-interactive .site-cursor-ring,
.site-cursor.is-grab .site-cursor-ring {
  width: 23px;
  height: 23px;
  left: -11.5px;
  top: -11.5px;
  border-color: rgba(82, 168, 255, 0.42);
  background: rgba(82, 168, 255, 0.12);
  box-shadow:
    0 0 9px rgba(82, 168, 255, 0.54),
    0 0 20px rgba(33, 123, 222, 0.22);
}

.site-cursor.is-interactive .site-cursor-arrow {
  transform: scale(0.94);
}

.site-cursor.is-grab .site-cursor-arrow,
.site-cursor.is-text .site-cursor-arrow {
  opacity: 0;
}

.site-cursor.is-grab .site-cursor-hand {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.site-cursor.is-text .site-cursor-ring {
  width: 13px;
  height: 29px;
  left: -6.5px;
  top: -14.5px;
  border-color: rgba(82, 168, 255, 0.32);
  background: rgba(82, 168, 255, 0.08);
}

.site-cursor.is-text .site-cursor-beam {
  opacity: 1;
}

.site-cursor.is-pressed .site-cursor-ring {
  transform: scale(0.72);
  border-color: rgba(48, 142, 230, 0.7);
  background: rgba(82, 168, 255, 0.22);
}

.site-cursor.is-grabbing .site-cursor-hand {
  transform: scale(0.9) rotate(-7deg);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .site-cursor {
    display: none;
  }

  body.booked-custom-cursor,
  body.booked-custom-cursor * {
    cursor: revert !important;
  }
}

body.booked-custom-cursor:has(dialog[open]),
body.booked-custom-cursor:has(dialog[open]) * {
  cursor: revert !important;
}

body.booked-custom-cursor:has(dialog[open]) .site-cursor {
  opacity: 0;
}

.app-shell {
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* ---------- Ambient gradient mesh + noise ---------- */
.mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  transition: background-color 1.1s var(--ease);
  animation: blobDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}

.blob.b1 {
  width: 520px;
  height: 520px;
  background: var(--b1);
  top: -120px;
  left: -100px;
}

.blob.b2 {
  width: 460px;
  height: 460px;
  background: var(--b2);
  top: 20%;
  right: -140px;
  animation-duration: 38s;
  animation-delay: -12s;
}

.blob.b3 {
  width: 400px;
  height: 400px;
  background: var(--b3);
  bottom: -140px;
  left: 30%;
  animation-duration: 34s;
  animation-delay: -22s;
}

@keyframes blobDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(48px, 34px, 0) scale(1.09); }
  100% { transform: translate3d(-36px, 52px, 0) scale(0.96); }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
  }
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--fog-white);
  background: var(--void);
  clip-path: circle(150% at 50% 50%);
  will-change: clip-path;
  transition:
    clip-path 1.05s var(--ease),
    opacity 0.4s ease 0.65s;
}

.brand-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black, transparent 76%);
}

.brand-intro.is-revealing {
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  pointer-events: none;
}

.brand-intro.is-gone {
  display: none;
}

.boot-scene {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  text-align: center;
}

/* Ping rings emanate from the logo's orange map-pin (logo top margin 26px
   + ~13% of the badge height puts the pin center near 66px on desktop). */
.boot-rings {
  width: 1px;
  height: 1px;
  position: absolute;
  top: 66px;
  left: 50%;
}

.boot-ring {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--signal-orange);
  border-radius: 50%;
  opacity: 0;
  animation: ringPing 2.4s ease-out infinite;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

.boot-ring.r2 {
  border-color: var(--pulse-violet);
  animation-delay: 0.55s;
}

.boot-ring.r3 {
  border-color: var(--pulse-cyan);
  animation-delay: 1.1s;
}

/* The Booked Local Events badge is a transparent PNG — no card crop or
   rounded frame; it floats over the void with a soft brand glow. */
.boot-logo-wrap {
  width: min(320px, 68vw);
  aspect-ratio: 650 / 644;
  position: relative;
  margin-top: 26px;
  opacity: 0;
  transform: scale(0.86);
  filter: blur(12px);
  will-change: transform, opacity, filter;
  animation: logoIn 0.9s var(--ease) 0.45s forwards;
}

.boot-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 34px rgba(232, 98, 58, 0.22));
}

.boot-logo-wrap::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 98, 58, 0.26), rgba(124, 92, 255, 0.14) 45%, transparent 70%);
  opacity: 0;
  animation: logoGlow 1.6s ease-out 1s forwards;
  pointer-events: none;
}

.boot-rule {
  width: 0;
  height: 1px;
  margin: 22px 0 14px;
  background: linear-gradient(90deg, transparent, var(--fog-dim), transparent);
  animation: ruleGrow 0.7s var(--ease) 1.3s forwards;
}

.boot-tagline {
  color: var(--fog-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: rise 0.6s var(--ease) 1.45s forwards;
}

.boot-domain {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(92deg, var(--fog-white) 20%, var(--signal-orange) 60%, var(--pulse-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s var(--ease) 1.7s forwards;
}

.boot-domain span {
  font-weight: 500;
  opacity: 0.85;
}

.boot-progress {
  width: min(230px, 56vw);
  height: 2px;
  margin-top: 26px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  animation: rise 0.5s var(--ease) 1.9s forwards;
}

.boot-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--signal-orange), var(--pulse-violet));
  box-shadow: 0 0 12px rgba(232, 98, 58, 0.6);
  animation: progressFill 1.45s var(--ease) 1.95s forwards;
}

.brand-intro.is-revealing .boot-scene {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes ringPing {
  0% { width: 8px; height: 8px; margin: -4px 0 0 -4px; opacity: 0.7; }
  100% { width: 170px; height: 170px; margin: -85px 0 0 -85px; opacity: 0; }
}

@keyframes logoIn {
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes logoGlow {
  to { opacity: 1; }
}

@keyframes progressFill {
  to { width: 100%; }
}

@keyframes ruleGrow {
  to { width: 130px; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1,
  .hero-copy p,
  .hero .search-bar {
    opacity: 0;
    /* Invisible pre-intro hero content must not be clickable. Interactivity
       comes back via the heroRise keyframes below (forwards fill), so each
       element stays inert through its own animation delay while it is still
       fully transparent — not the instant body.entered lands. */
    pointer-events: none;
  }

  /* Like `rise`, but also restores pointer-events: discrete properties flip
     at 50% of the animation (element already ~half faded in), and the
     forwards fill keeps them interactive afterwards. During the animation
     DELAY no keyframe applies, so the base pointer-events: none above keeps
     the still-invisible control inert. */
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(14px); pointer-events: none; }
    to { opacity: 1; transform: translateY(0); pointer-events: auto; }
  }

  body.entered .hero .eyebrow {
    animation: heroRise 0.7s var(--ease) 0.05s forwards;
  }

  body.entered .hero h1 {
    animation: heroRise 0.7s var(--ease) 0.12s forwards;
  }

  body.entered .hero-copy p {
    animation: heroRise 0.7s var(--ease) 0.18s forwards;
  }

  body.entered .hero .search-bar {
    animation: heroRise 0.7s var(--ease) 0.3s forwards;
  }
}

.topbar {
  height: 78px;
  padding: 0 clamp(22px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(10, 11, 16, 0.72);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  text-decoration: none;
  width: max-content;
}

/* Compact lockup: emblem cropped from the Booked Local Events badge,
   paired with the text wordmark for legibility at header size. */
.brand-mark {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* One-line domain wordmark: mirrors the intro splash's boot-domain gradient
   so the header reinforces the exact web address. Never wraps. */
.brand-wordmark {
  white-space: nowrap;
  line-height: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(92deg, var(--fog-white) 20%, var(--signal-orange) 60%, var(--pulse-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-tld {
  font-weight: 500;
  /* The gradient's violet tail sinks into the dark header; paint ".com" a
     solid lighter violet so the domain suffix stays legible. */
  -webkit-text-fill-color: #a89bff;
  color: #a89bff;
}

.role-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  position: relative;
}

.role-switcher {
  position: relative;
  align-self: center;
  display: grid;
  justify-items: center;
}

.role-switcher-explainer {
  max-width: 430px;
  margin: 6px 8px 0;
  color: var(--fog-dim);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.role-cue {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--graphite);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--fog-white);
  font-size: 11px;
  white-space: nowrap;
}

.role-cue[hidden] {
  display: none;
}

.role-cue::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-bottom-color: var(--glass-border);
  transform: translateX(-50%);
}

.role-cue button {
  border: 0;
  border-radius: 100px;
  padding: 4px 7px;
  background: var(--glass-strong);
  color: var(--fog-white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.role-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--role-accent), var(--role-accent-soft));
  box-shadow: 0 4px 20px -4px rgba(77, 232, 255, 0.6);
  transition:
    transform 0.42s var(--ease),
    width 0.42s var(--ease),
    background 0.42s var(--ease),
    box-shadow 0.42s var(--ease);
  will-change: transform, width;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

.role-nav:not(.indicator-ready) .role-indicator {
  opacity: 0;
}

/* Decorative highlight pill — never a click target (it sits under the role
   buttons and would otherwise swallow clicks while faded out). */
.role-indicator {
  pointer-events: none;
}

.role-button {
  border: 0;
  background: transparent;
  padding: 9px 15px;
  border-radius: 100px;
  color: var(--fog-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.3s var(--ease);
}

.role-button:hover {
  color: var(--ink);
}

.role-button:focus-visible {
  outline: 2px solid var(--role-accent);
  outline-offset: 2px;
  color: var(--fog-white);
}

.role-button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .role-button::after {
    content: attr(data-help);
    position: absolute;
    z-index: 15;
    top: calc(100% + 12px);
    left: 50%;
    width: max-content;
    max-width: 230px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--graphite);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: var(--fog-white);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  .role-button:hover::after,
  .role-button:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.role-button.active {
  color: var(--void);
}

.role-nav:not(.indicator-ready) .role-button.active {
  color: var(--fog-white);
  background: var(--glass-strong);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-entry-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 100px;
  color: var(--signal-orange);
  background: rgba(232, 98, 58, 0.08);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.admin-entry-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-pill,
.icon-button,
.avatar {
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

.location-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.location-pill svg {
  width: 14px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--pulse-cyan);
  box-shadow: 0 0 0 4px rgba(77, 232, 255, 0.16);
}

.icon-button,
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}

.icon-button svg {
  width: 18px;
}

.notification-dot {
  width: 7px;
  height: 7px;
  position: absolute;
  right: 6px;
  top: 4px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--coral);
}

.avatar {
  border: none;
  color: #0a0b10;
  background: linear-gradient(135deg, var(--pulse-cyan), var(--pulse-violet));
  font-size: 11px;
  font-weight: 700;
}

.account-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: var(--glass);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.account-button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.account-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #0a0b10;
  background: linear-gradient(135deg, var(--pulse-cyan), var(--pulse-violet));
  font-size: 10px;
  font-weight: 800;
}

.account-button > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.account-button small {
  color: var(--fog-dim);
  font-size: 7px;
  font-weight: 600;
}

.account-button strong {
  max-width: 90px;
  overflow: hidden;
  margin-top: 3px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero {
  min-height: 500px;
  padding: 76px clamp(22px, 8vw, 120px) 70px;
  color: var(--fog-white);
  background:
    radial-gradient(circle at 78% 18%, rgba(123, 97, 255, 0.14), transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(77, 232, 255, 0.09), transparent 34%);
  position: relative;
}

.hero::after {
  content: "";
  width: 440px;
  height: 440px;
  position: absolute;
  right: -135px;
  top: -210px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255, 255, 255, 0.025), 0 0 0 145px rgba(255, 255, 255, 0.018);
}

.hero > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--role-accent, var(--pulse-cyan));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.eyebrow span {
  width: 28px;
  height: 1px;
  background: currentColor;
}

.hero-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.hero-copy > div:first-child {
  min-width: 0;
  flex: 1;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -2.5px;
}

h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -2px;
  background: linear-gradient(90deg, var(--b2), var(--b1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-copy p {
  max-width: 610px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.7;
}

.live-note {
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  margin-bottom: 36px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}

.live-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 7px rgba(232, 98, 58, 0.15);
  position: relative;
}

.live-orb::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  background: white;
}

.live-note strong,
.live-note small {
  display: block;
}

.live-note strong {
  font-size: 13px;
}

.live-note small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
}

.search-bar {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(250px, 1.6fr) 1px minmax(180px, 0.8fr) auto;
  align-items: center;
  padding: 10px 10px 10px 25px;
  color: var(--ink);
  border: 1px solid var(--glass-border);
  background: rgba(20, 22, 31, 0.72);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.search-chip-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* Collapsed chips must not be clickable, even mid-fade — pointer-events
     flips instantly with the class while opacity/max-height transition. */
  pointer-events: none;
  transition:
    max-height 0.5s var(--ease),
    opacity 0.4s var(--ease),
    margin-top 0.5s var(--ease);
}

.search-bar.expanded .search-chip-panel {
  max-height: 130px;
  opacity: 1;
  pointer-events: auto;
  margin-top: 8px;
  padding: 2px 2px 8px;
}

.search-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: var(--glass);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s var(--spring);
}

.search-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.24);
}

.search-chip small {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.search-chip strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--fog-white);
  white-space: nowrap;
}

.search-chip.selected {
  border-color: var(--role-accent, var(--pulse-cyan));
  background: rgba(77, 232, 255, 0.08);
}

.search-chip.selected strong {
  color: var(--role-accent, var(--pulse-cyan));
}

.search-chip.chip-pulse {
  animation: chipPulse 0.55s var(--ease);
}

@keyframes chipPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(77, 232, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(77, 232, 255, 0);
  }
}

.section-heading h2.count-flash {
  animation: countFlash 0.8s var(--ease);
}

@keyframes countFlash {
  0% {
    color: var(--role-accent, var(--pulse-cyan));
  }
  100% {
    color: inherit;
  }
}

.search-field {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.search-field > svg {
  width: 22px;
  flex: 0 0 auto;
  color: var(--green-2);
}

.search-field > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.search-field small {
  margin-bottom: 3px;
  color: var(--fog-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.search-field input[type="search"] {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.search-field input::placeholder {
  color: rgba(237, 239, 245, 0.4);
  opacity: 1;
}

/* === Search bar: modern typing state === */

/* Hide the browser's native search-cancel (blue ×) and webkit decoration */
#searchInput::-webkit-search-cancel-button,
#searchInput::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Coral caret so typing feels deliberate */
#searchInput {
  caret-color: var(--coral);
}

/* Themed text selection — coral tint instead of pale blue */
#searchInput::selection {
  background: rgba(232, 98, 58, 0.28);
  color: var(--ink);
}

/* Autofill: stay dark — never flash white or yellow */
#searchInput:-webkit-autofill,
#searchInput:-webkit-autofill:hover,
#searchInput:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #15171f inset;
  box-shadow: 0 0 0 1000px #15171f inset;
  caret-color: var(--coral);
}

/* Soft typing well: rounded surface gently brightens on focus */
.search-field:not(.compact) {
  border-radius: 11px;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.search-field:not(.compact):focus-within {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 1.5px rgba(232, 98, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Custom themed clear button — pill chip style, matches the filter chips */
.search-input-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  color: var(--fog-dim);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--spring);
}
.search-input-clear svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.search-input-clear:hover {
  background: rgba(232, 98, 58, 0.28);
  color: var(--ink);
  transform: scale(1.12);
}
.search-input-clear[hidden] { display: none; }

.search-field strong {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.search-divider {
  width: 1px;
  height: 34px;
  background: var(--line);
}

.distance-field {
  display: grid;
  grid-template-columns: auto 1fr;
}

.distance-field input {
  grid-column: 1 / -1;
  width: 100%;
  height: 2px;
  margin-top: 6px;
  accent-color: var(--green);
}

.search-submit,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  color: white;
  background: var(--coral);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.search-submit {
  align-self: stretch;
  padding: 0 25px;
  border-radius: 13px;
}

.search-submit svg,
.primary-button svg {
  width: 17px;
}

.search-submit:hover,
.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(232, 98, 58, 0.35);
}

.content-section,
.calendar-section {
  padding: 72px clamp(22px, 6vw, 92px);
}

.section-heading,
.calendar-heading {
  max-width: 1280px;
  margin: 0 auto 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.section-heading {
  min-height: 147px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.section-heading > div:first-child {
  min-width: 0;
}

.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--green-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-heading h2,
.calendar-heading h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -1.6px;
}

.data-trust {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 10px;
  padding: 0;
  border: 0;
  color: var(--fog-dim);
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.data-trust i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-cyan);
  box-shadow: 0 0 0 3px rgba(77, 232, 255, 0.14);
}

.data-trust:hover {
  color: var(--green);
}

.data-trust.is-offline i {
  background: #d9a544;
  box-shadow: 0 0 0 3px rgba(217, 165, 68, 0.14);
}

.date-filter {
  width: max-content;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-self: end;
  gap: 7px;
}

.discovery-control {
  flex: 0 0 auto;
  position: relative;
}

.date-filter[hidden] {
  display: none;
}

.date-chip,
.filter-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.date-chip.active {
  color: #0a0b10;
  border-color: var(--fog-white);
  background: var(--fog-white);
}

.date-picker {
  width: 112px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.date-picker.active {
  color: white;
  border-color: var(--green);
  background: var(--green);
}

.date-picker[aria-expanded="true"],
.filter-button[aria-expanded="true"] {
  border-color: rgba(232, 98, 58, 0.55);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.12);
}

.date-picker svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-picker .control-chevron {
  width: 13px;
  margin-left: 1px;
  transition: transform 0.18s ease;
}

.date-picker[aria-expanded="true"] .control-chevron {
  transform: rotate(180deg);
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 6px;
  background: var(--paper);
}

#filterButton {
  width: 116px;
}

.filter-button svg {
  width: 15px;
}

.filter-count {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 1px;
  border-radius: 50%;
  color: white;
  background: var(--green);
  font-size: 9px;
  font-weight: 800;
}

.filter-count[hidden] {
  display: none;
}

.discovery-popover {
  width: min(370px, calc(100vw - 32px));
  padding: 18px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(20, 22, 31, 0.97);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  animation: popover-in 0.18s ease both;
}

.discovery-popover[hidden] {
  display: none;
}

.date-popover {
  width: min(330px, calc(100vw - 32px));
}

.popover-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.popover-heading > div {
  display: grid;
  gap: 4px;
}

.popover-heading strong {
  color: var(--ink);
  font-size: 15px;
}

.popover-heading span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.popover-close {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--glass-strong);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.filter-grid {
  display: grid;
  gap: 12px;
}

.popover-field {
  display: grid;
  gap: 7px;
}

.popover-field > span {
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.popover-field input,
.popover-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.popover-field input:focus,
.popover-field select:focus {
  border-color: rgba(232, 98, 58, 0.6);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.12);
}

.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 17px;
}

.popover-primary,
.popover-secondary {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.popover-primary {
  border: 1px solid var(--green);
  color: white;
  background: var(--green);
}

.popover-secondary {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--glass);
}

@keyframes popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.submit-listing-button {
  width: 118px;
  flex: 0 0 auto;
  color: var(--green);
  border-color: rgba(232, 98, 58, 0.35);
}

.musician-discovery-menu {
  max-width: 1280px;
  margin: -6px auto 24px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.musician-discovery-menu[hidden] {
  display: none;
}

.musician-menu-tabs {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.musician-menu-tabs button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  color: var(--fog-dim);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.musician-menu-tabs button span {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 100px;
  color: var(--green);
  background: rgba(232, 98, 58, 0.12);
  font-size: 8px;
  text-align: center;
}

.musician-menu-tabs button.active {
  color: white;
  background: var(--green);
}

.musician-menu-tabs button.active span {
  color: white;
  background: rgba(255, 255, 255, 0.22);
}

.musician-menu-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(190px, 0.9fr);
  gap: 10px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.musician-menu-filters > label:not(.availability-toggle) {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #1b1e2b;
}

.musician-menu-filters label > span:first-child {
  margin-bottom: 3px;
  color: var(--fog-dim);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.musician-menu-filters select {
  width: 100%;
  padding: 0 20px 0 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.availability-toggle {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(77, 232, 255, 0.25);
  border-radius: 11px;
  background: rgba(77, 232, 255, 0.08);
  cursor: pointer;
}

.availability-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.availability-toggle > span {
  display: flex;
  flex-direction: column;
}

.availability-toggle strong {
  font-size: 9px;
}

.availability-toggle small {
  margin-top: 2px;
  color: var(--fog-dim);
  font-size: 7px;
}

.discovery-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 24px;
}

.map-card {
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--graphite);
  box-shadow: var(--shadow);
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .map-card {
    transition:
      opacity 0.85s var(--ease),
      transform 0.85s var(--ease),
      filter 0.85s var(--ease);
  }

  .map-card.map-veiled {
    opacity: 0;
    transform: perspective(1200px) rotateX(7deg) translateY(34px) scale(0.98);
    filter: blur(7px);
    /* Invisible map must not capture clicks/drags before it reveals. */
    pointer-events: none;
  }
}

.map-top {
  height: 56px;
  padding: 0 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(10, 11, 16, 0.7);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 4;
}

.map-top > span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}

.map-control {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}

.map-control svg {
  width: 16px;
}

.map-surface {
  height: 478px;
  overflow: hidden;
  background: #10131c;
  position: relative;
}

#liveMap {
  width: 100%;
  height: 100%;
}

.leaflet-container {
  color: var(--ink);
  background: #10131c;
  font-family: var(--font-body);
}

/* Dark map tiles without changing the tile provider */
.leaflet-tile-pane {
  filter: invert(100%) hue-rotate(200deg) saturate(0.5) brightness(0.92) contrast(0.92);
}

.leaflet-control-zoom {
  overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 24px rgba(0, 0, 0, 0.4) !important;
}

.leaflet-control-zoom a {
  color: var(--ink) !important;
  border-color: var(--glass-border) !important;
  background: rgba(20, 22, 31, 0.94) !important;
}

.leaflet-control-attribution {
  padding: 3px 6px !important;
  color: rgba(237, 239, 245, 0.55) !important;
  background: rgba(10, 11, 16, 0.8) !important;
  font-size: 8px !important;
}

.leaflet-control-attribution a {
  color: rgba(237, 239, 245, 0.75) !important;
}

.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: #10131c;
  color: var(--ink);
}

.map-fallback:not([hidden]) {
  display: flex;
}

.map-fallback span {
  color: var(--fog-dim);
  font-size: 10px;
}

.event-map-marker {
  border: 0;
  background: transparent;
}

.event-map-marker-inner {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 3px solid var(--graphite);
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transform: rotate(-45deg);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.event-map-marker-inner svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(45deg);
}

.event-map-marker.music .event-map-marker-inner {
  color: white;
  background: var(--green);
}

.event-map-marker.food .event-map-marker-inner {
  color: white;
  background: var(--truck-purple);
}

.event-map-marker.venue .event-map-marker-inner {
  color: white;
  background: var(--coral);
}

.event-map-marker.other .event-map-marker-inner {
  color: white;
  background: #d9a441;
}

.event-map-marker.is-selected .event-map-marker-inner {
  box-shadow: 0 0 0 5px rgba(232, 98, 58, 0.3), 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: rotate(-45deg) scale(1.15);
}

.event-map-marker.is-hot .event-map-marker-inner {
  box-shadow: 0 0 0 5px rgba(77, 232, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: rotate(-45deg) scale(1.12);
}

/* Cluster bubbles: numbered groups of overlapping pins that split apart on
   zoom. Styled to match the teardrop pins (graphite ring, brand fill). */
.map-cluster-pin {
  border: 0;
  background: transparent;
}

.map-cluster-pin .map-cluster-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  border: 3px solid var(--graphite);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(232, 98, 58, 0.22), 0 8px 18px rgba(0, 0, 0, 0.45);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.map-cluster-pin.medium .map-cluster-inner {
  font-size: 14.5px;
}

.map-cluster-pin.large .map-cluster-inner {
  font-size: 16px;
}

.map-cluster-pin:hover .map-cluster-inner,
.map-cluster-pin.is-hot .map-cluster-inner {
  box-shadow: 0 0 0 5px rgba(77, 232, 255, 0.28), 0 12px 26px rgba(0, 0, 0, 0.55);
  transform: scale(1.1);
}

.map-cluster-pin.is-selected .map-cluster-inner {
  box-shadow: 0 0 0 5px rgba(232, 98, 58, 0.3), 0 12px 26px rgba(0, 0, 0, 0.55);
  transform: scale(1.12);
}

/* Per-pin name labels — permanent tooltips, revealed from street-ish zoom
   inward via the .map-labels-visible class on the map container. */
.map-pin-label {
  display: none;
  background: rgba(20, 22, 31, 0.92);
  color: var(--ink);
  border: 1px solid rgba(237, 239, 245, 0.18);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: nowrap;
}

.map-pin-label::before {
  display: none;
}

.map-labels-visible .map-pin-label {
  display: block;
}

.leaflet-popup-content-wrapper {
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--fog-white);
  background: #171a26;
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-tip {
  background: #171a26;
}

.leaflet-popup-content {
  margin: 0;
}

.leaflet-event-popup {
  min-width: 205px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 14px 11px 11px;
}

.leaflet-event-popup .popup-art {
  width: 40px;
  height: 40px;
}

.leaflet-event-popup small,
.leaflet-event-popup strong,
.leaflet-event-popup span {
  display: block;
}

.leaflet-event-popup small {
  color: var(--coral);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.leaflet-event-popup strong {
  margin: 2px 0;
  font-size: 11px;
}

.leaflet-event-popup span {
  color: var(--fog-dim);
  font-size: 8px;
}

.map-lines {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.map-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

.map-lines path:nth-child(3) {
  stroke: rgba(77, 232, 255, 0.28);
  stroke-width: 8;
}

.map-label {
  position: absolute;
  color: rgba(237, 239, 245, 0.35);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.label-river { top: 38%; left: 58%; color: rgba(77, 232, 255, 0.5); transform: rotate(72deg); }
.label-downtown { top: 23%; left: 68%; }
.label-arts { top: 56%; left: 44%; }
.label-west { top: 74%; left: 14%; }

.map-pin {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  transform: translate(-50%, -50%);
  border: 3px solid var(--graphite);
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: 0.2s ease;
}

.map-pin:hover,
.map-pin.selected {
  transform: translate(-50%, -55%) scale(1.12);
}

.map-pin svg {
  width: 19px;
}

.band-pin { color: white; background: var(--green); }
.truck-pin { color: white; background: var(--truck-purple); }
.venue-pin { color: white; background: var(--coral); }

.map-popup {
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: absolute;
  left: var(--popup-x, 62%);
  top: var(--popup-y, 19%);
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 10px;
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  transition:
    left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.2s ease;
}

.map-popup::after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  left: var(--pointer-x, 50%);
  bottom: -6px;
  background: var(--paper);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%) rotate(45deg);
}

.map-popup.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -42%) scale(0.94);
}

.popup-art {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  font: 700 11px var(--font-display);
}

.map-popup > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.map-popup small,
.map-popup strong,
.map-popup span {
  display: block;
}

.map-popup small {
  color: var(--coral);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.map-popup strong {
  margin: 2px 0;
  font-size: 11px;
}

.map-popup span {
  color: var(--fog-dim);
  font-size: 9px;
}

.map-popup > button {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--fog-dim);
}

.map-footer {
  min-height: 86px;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--glass-border);
  background: var(--paper);
}

.map-legend {
  display: flex;
  align-items: center;
  gap: 18px;
}

.map-legend span,
.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fog-dim);
  font-size: 9px;
  font-weight: 600;
}

.map-legend i,
.calendar-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.band-key,
.music-dot { background: var(--green); }
.truck-key,
.food-dot { background: var(--truck-purple); }
.venue-key { background: var(--coral); }
.community-key,
.other-dot { background: #d9a441; }
.saved-dot { background: var(--blue); }

.event-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-color: rgba(232, 98, 58, 0.4) transparent;
  scrollbar-width: thin;
}

/* Off-map section break in the rail: real listings in this market that have
   no verified pin yet ("In this area, not on the map yet"). */
.list-divider {
  margin: 7px 2px 2px;
  padding-top: 9px;
  border-top: 1px dashed rgba(237, 239, 245, 0.22);
  color: var(--fog-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.event-list::-webkit-scrollbar {
  width: 5px;
}

.event-list::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(232, 98, 58, 0.35);
}

.results-load-more {
  min-height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 14px;
  color: var(--green);
  background: var(--glass);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.results-load-more:hover {
  border-color: var(--green-2);
  background: rgba(232, 98, 58, 0.1);
}

.map-result-limit {
  color: var(--fog-dim);
  font-size: 8px;
  font-weight: 600;
}

.empty-events {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 35px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
}

.empty-events strong,
.empty-events span {
  display: block;
}

.empty-events strong {
  font: 700 18px var(--font-display);
}

.empty-events span {
  max-width: 270px;
  margin-top: 7px;
  color: var(--ink-soft);
  font-size: 11px;
}

.event-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 106px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 12px 15px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.45s var(--spring),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.4s var(--ease);
}

.event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 20%),
    rgba(255, 255, 255, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: 1;
}

.event-card:hover::after {
  opacity: 1;
}

.event-card .event-art {
  transform: translateY(calc(var(--depth, 0) * -5px));
}

.event-card.reflow-in,
.event-card.pre-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  /* Not-yet-revealed cards are invisible — they must not be clickable. */
  pointer-events: none;
}

.event-card:hover,
.event-card.active,
.event-card.map-hot {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.event-card.map-hot {
  border-color: rgba(77, 232, 255, 0.4);
}

.listing-card {
  min-height: 144px;
  grid-template-columns: 112px 1fr auto;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.card-focus-modal {
  width: min(560px, calc(100vw - 36px));
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 0;
  background: rgba(20, 22, 31, 0.92);
  color: var(--ink);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}

.card-focus-modal::backdrop {
  background: rgba(10, 11, 16, 0.62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.card-focus-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.card-focus-art {
  height: 168px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.card-focus-art::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -40px;
  top: -40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.05), 0 0 0 48px rgba(255, 255, 255, 0.03);
}

.card-focus-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 22, 31, 0.85));
}

.card-focus-initials {
  color: white;
  font: 800 34px var(--font-display);
  letter-spacing: -1.5px;
  position: relative;
  z-index: 1;
}

.card-focus-body {
  padding: 20px 24px 24px;
}

.card-focus-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--role-accent, var(--pulse-cyan));
  margin-bottom: 6px;
}

.card-focus-body h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.6px;
  color: var(--fog-white);
}

.card-focus-place {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 13px;
}

.card-focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.card-focus-tags span {
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: var(--glass);
  font-size: 11px;
  color: var(--ink-soft);
}

.card-focus-tags .verified-tag {
  color: var(--pulse-cyan);
  border-color: rgba(77, 232, 255, 0.35);
  background: rgba(77, 232, 255, 0.08);
}

.card-focus-actions {
  display: flex;
  gap: 10px;
}

.card-focus-follow {
  padding: 11px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  background: var(--glass);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.card-focus-follow.saved {
  color: var(--signal-orange);
  border-color: rgba(232, 98, 58, 0.45);
  background: rgba(232, 98, 58, 0.1);
}

.card-focus-cta {
  flex: 1;
  padding: 11px 16px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--role-accent), var(--role-accent-soft));
  color: var(--void);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s var(--spring), box-shadow 0.3s ease;
}

.card-focus-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(77, 232, 255, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
  .card-focus-modal[open] {
    animation: cardFocusIn 0.45s var(--spring);
  }

  @keyframes cardFocusIn {
    from {
      opacity: 0;
      transform: translateY(22px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.event-art {
  height: 106px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 12px;
  position: relative;
}

.event-art::before,
.event-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.event-art::before {
  width: 86px;
  height: 86px;
  right: -25px;
  top: -25px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 15px rgba(255,255,255,.05), 0 0 0 30px rgba(255,255,255,.03);
}

.listing-card .event-art {
  height: 112px;
}

.event-art-initials {
  color: white;
  font: 800 20px var(--font-display);
  letter-spacing: -1px;
  position: relative;
  z-index: 1;
}

.event-type-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border: 2px solid rgba(20, 22, 31, 0.94);
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  transform: rotate(-45deg);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.event-type-icon svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(45deg);
}

.event-type-icon.music {
  color: white;
  background: var(--green);
}

.event-type-icon.food {
  color: white;
  background: var(--truck-purple);
}

.event-type-icon.venue {
  color: white;
  background: var(--coral);
}

.event-type-icon.other {
  color: white;
  background: #d9a441;
}

.listing-card:hover .event-type-icon,
.listing-card.active .event-type-icon {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.14),
    0 7px 16px rgba(0, 0, 0, 0.45);
  transform: rotate(-45deg) scale(1.08);
}

.art-pines { background: linear-gradient(145deg, #243e36, #648773); }
.art-root { background: linear-gradient(145deg, #d98a47, #6d382f); }
.art-blue { background: linear-gradient(145deg, #6087a1, #253e52); }
.art-owls { background: linear-gradient(145deg, #a16677, #4f354d); }
.art-coral { background: linear-gradient(145deg, #df7059, #713e35); }
.art-gold { background: linear-gradient(145deg, #d7a34c, #74572c); }

.event-meta {
  min-width: 0;
}

.event-meta > small {
  color: var(--coral);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.event-meta h3 {
  margin: 6px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: -0.4px;
}

.listing-card .event-meta h3 {
  display: -webkit-box;
  margin: 7px 0 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.7px;
  text-overflow: initial;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.listing-card.active .event-meta h3 {
  color: var(--green);
}

.event-meta p {
  margin: 0 0 8px;
  overflow: hidden;
  color: var(--fog-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-card .event-meta p {
  margin-bottom: 9px;
  color: var(--fog-dim);
  font-size: 10.5px;
  font-weight: 600;
}

.event-tags {
  display: flex;
  gap: 5px;
}

.event-tags span {
  padding: 4px 7px;
  border-radius: 100px;
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.07);
  font-size: 8px;
  font-weight: 600;
}

.event-tags .verified-tag {
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.12);
}

.event-source {
  display: inline-block;
  margin-top: 7px;
  color: var(--green-2);
  font-size: 8px;
  font-weight: 700;
  text-decoration: none;
}

.event-source:hover {
  text-decoration: underline;
}

/* Truck-facing pricing line on host-venue cards in the food-truck rail —
   present only when the venue owner chose what trucks should see. */
.event-truck-pricing {
  margin: -4px 0 8px;
  overflow: hidden;
  color: var(--green-2);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-booking-rate {
  margin: -4px 0 8px;
  overflow: hidden;
  color: var(--green-2);
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-actions {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
}

.heart-button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.heart-button svg {
  width: 14px;
}

.heart-button.saved {
  color: white;
  border-color: var(--coral);
  background: var(--coral);
}

.card-cta {
  padding: 6px 0;
  border: 0;
  color: var(--green-2);
  background: transparent;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.venue-card {
  min-height: 0;
  flex: 0 0 auto;
  display: block;
  padding: 16px;
  cursor: default;
}

.venue-card-top {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 11px;
  align-items: center;
}

.venue-card-mark,
.venue-modal-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px 14px 14px 5px;
  color: white;
  font: 800 13px var(--font-display);
}

.venue-card-title {
  min-width: 0;
}

.venue-card-title > div {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--pulse-cyan);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.venue-ownership-badge {
  display: inline-flex;
  width: max-content;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 100px;
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.08);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.venue-ownership-badge.claimed {
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.12);
}

.venue-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-cyan);
  box-shadow: 0 0 0 3px rgba(77, 232, 255, 0.14);
}

.venue-card-title h3 {
  margin: 4px 0 3px;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: -0.4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-card-title p {
  margin: 0;
  color: var(--fog-dim);
  font-size: 8px;
}

.venue-card-description {
  margin: 12px 0;
  color: var(--fog-dim);
  font-size: 9px;
  line-height: 1.55;
}

.venue-card-facts {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.venue-card-facts > div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.venue-card-facts > div:nth-child(2n) {
  border-right: 0;
}

.venue-card-facts > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.venue-card-facts span,
.venue-card-facts strong {
  display: block;
}

.venue-card-facts span {
  margin-bottom: 3px;
  color: var(--fog-dim);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.venue-card-facts strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-card-facts > div:first-child strong {
  color: var(--green-2);
  font-size: 10px;
}

.venue-card-fit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.venue-card-fit > span {
  margin-right: 2px;
  color: var(--fog-dim);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.venue-card-fit i {
  padding: 4px 7px;
  border-radius: 100px;
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.07);
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.venue-card-next {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 11px;
  border-left: 3px solid var(--green-2);
  border-radius: 0 9px 9px 0;
  background: rgba(232, 98, 58, 0.09);
}

.venue-card-next span,
.venue-card-next strong {
  display: block;
}

.venue-card-next span {
  margin-bottom: 3px;
  color: var(--fog-dim);
  font-size: 6px;
  font-weight: 800;
  text-transform: uppercase;
}

.venue-card-next strong {
  font-size: 8px;
}

.venue-card-next small {
  flex: 0 0 auto;
  color: var(--fog-dim);
  font-size: 7px;
}

.venue-card-actions {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 8px;
}

.venue-card-actions button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.venue-calendar-button {
  border: 1px solid rgba(232, 98, 58, 0.35);
  color: var(--green);
  background: var(--glass);
}

.venue-calendar-button svg {
  width: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.venue-pitch-button {
  border: 0;
  color: white;
  background: var(--green);
}

.venue-pitch-button span {
  color: rgba(255, 255, 255, 0.75);
}

.pitch-card {
  flex: 0 0 auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.pitch-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--yellow);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.pitch-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5ad47;
}

.pitch-card h3 {
  margin: 10px 0 4px;
  font-size: 17px;
}

.pitch-card p {
  color: var(--fog-dim);
  font-size: 10px;
}

.pitch-card > div:nth-of-type(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 8px;
}

.pitch-card > small {
  display: block;
  margin-top: 9px;
  color: var(--fog-dim);
  font-size: 7px;
}

.musician-pitch-empty button {
  margin-top: 14px;
  padding: 10px 14px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--green);
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.calendar-section {
  background: var(--paper);
}

.calendar-heading p {
  max-width: 500px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.primary-button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
}

.calendar-card {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

.calendar-toolbar {
  min-height: 68px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.calendar-toolbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-toolbar h3 {
  margin: 0 0 0 10px;
  font-size: 15px;
}

.calendar-arrow {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.calendar-legend {
  display: flex;
  gap: 15px !important;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays span {
  padding: 12px 14px;
  color: var(--fog-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar-grid {
  border-top: 1px solid var(--line);
}

.calendar-day {
  min-height: 108px;
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.muted {
  color: rgba(237, 239, 245, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.day-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.calendar-day.today .day-number {
  color: white;
  background: var(--coral);
}

.calendar-event {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  padding: 5px 6px;
  border-left: 2px solid var(--green);
  border-radius: 4px;
  color: #f2a98d;
  background: rgba(232, 98, 58, 0.12);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.calendar-event.food {
  color: #c9befc;
  border-color: var(--truck-purple);
  background: rgba(143, 123, 255, 0.14);
}

.calendar-event.saved {
  color: #9be0f2;
  border-color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.1);
}

.calendar-event.other {
  color: #f0d49a;
  border-color: #d9a441;
  background: rgba(217, 164, 65, 0.14);
}

/* Overflow marker for phone calendars — hidden on desktop where every
   event pill renders in full. */
.calendar-day-more {
  display: none;
}

/* Failed month loads surface here instead of a silently empty grid. */
.calendar-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(232, 98, 58, 0.4);
  background: rgba(232, 98, 58, 0.1);
  font-size: 0.86rem;
  line-height: 1.45;
}

.calendar-load-error[hidden] {
  display: none;
}

.calendar-load-error button {
  padding: 7px 14px;
  border: 1px solid rgba(232, 98, 58, 0.55);
  border-radius: 999px;
  color: inherit;
  background: rgba(232, 98, 58, 0.18);
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.calendar-load-error button:hover {
  background: rgba(232, 98, 58, 0.3);
}

/* Phone day sheet: lists one day's events, tap-through to full details. */
.calendar-day-modal {
  width: min(94vw, 420px);
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px 22px;
  border: 0;
  border-radius: 20px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.6);
}

.calendar-day-modal h3 {
  margin: 4px 0 14px;
  font-size: 22px;
}

.calendar-day-list {
  display: grid;
  gap: 8px;
}

.calendar-day-item {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 12px;
  background: rgba(232, 98, 58, 0.07);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-day-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.calendar-day-item strong {
  font-size: 14px;
}

.calendar-day-item span {
  font-size: 12px;
  opacity: 0.75;
}

.calendar-day-item.food {
  border-left-color: var(--truck-purple);
  background: rgba(143, 123, 255, 0.09);
}

.calendar-day-item.saved {
  border-left-color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.07);
}

.calendar-day-item.other {
  border-left-color: #d9a441;
  background: rgba(217, 164, 65, 0.09);
}

.calendar-detail-modal {
  width: min(94vw, 720px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.6);
}

.calendar-detail-modal .modal-close {
  z-index: 2;
  color: rgba(255, 255, 255, 0.75);
}

.calendar-detail-hero {
  min-height: 190px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 19px;
  align-items: center;
  padding: 34px 58px 30px 32px;
  color: white;
  background:
    radial-gradient(circle at 86% 18%, rgba(123, 97, 255, 0.3), transparent 28%),
    linear-gradient(135deg, #2b2350, #16112a);
  position: relative;
}

.calendar-detail-modal.is-food .calendar-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(232, 180, 77, 0.22), transparent 28%),
    linear-gradient(135deg, #59401c, #2b1e0e);
}

.calendar-detail-modal.is-saved .calendar-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(77, 232, 255, 0.2), transparent 28%),
    linear-gradient(135deg, #1d4a5c, #10222f);
}

.calendar-detail-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px 22px 22px 7px;
  color: #0a0b10;
  background: linear-gradient(135deg, var(--pulse-cyan), var(--pulse-violet));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  font: 800 25px Georgia, serif;
}

.calendar-detail-modal.is-food .calendar-detail-icon {
  background: var(--yellow);
}

.calendar-detail-modal.is-saved .calendar-detail-icon {
  background: #cce3f0;
}

.calendar-detail-status {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  color: var(--pulse-cyan);
  background: rgba(255, 255, 255, 0.08);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.calendar-detail-hero .section-kicker {
  margin: 10px 0 3px;
  color: rgba(255, 255, 255, 0.55);
}

.calendar-detail-hero h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -1.2px;
}

.calendar-detail-hero p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
}

.calendar-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.calendar-detail-facts > div {
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.calendar-detail-facts > div:last-child {
  border-right: 0;
}

.calendar-detail-facts span,
.calendar-detail-facts strong {
  display: block;
}

.calendar-detail-facts span {
  margin-bottom: 5px;
  color: var(--fog-dim);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.calendar-detail-facts strong {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.calendar-detail-body {
  padding: 25px 30px 18px;
}

.calendar-detail-body > p {
  margin: 0;
  color: var(--fog-dim);
  font-size: 11px;
  line-height: 1.65;
}

.calendar-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.calendar-detail-tags span {
  padding: 5px 8px;
  border-radius: 100px;
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.07);
  font-size: 8px;
  font-weight: 700;
}

.calendar-detail-trust {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  margin-top: 17px;
  padding: 10px;
  border: 1px solid rgba(77, 232, 255, 0.25);
  border-radius: 11px;
  background: rgba(77, 232, 255, 0.08);
}

.calendar-detail-trust:not([hidden]) {
  display: grid;
}

.calendar-detail-trust[hidden],
.calendar-source-button[hidden] {
  display: none;
}

.calendar-detail-trust > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0a0b10;
  background: var(--pulse-cyan);
  font-size: 10px;
  font-weight: 900;
}

.calendar-detail-trust strong,
.calendar-detail-trust small {
  display: block;
}

.calendar-detail-trust strong {
  font-size: 9px;
}

.calendar-detail-trust small {
  margin-top: 2px;
  color: var(--fog-dim);
  font-size: 7px;
}

.calendar-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 16px 30px 24px;
}

.calendar-source-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-right: auto;
  padding: 0 15px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 11px;
  color: var(--green);
  background: var(--glass);
  font-size: 9px;
  font-weight: 800;
  text-decoration: none;
}

.calendar-detail-actions .secondary-button {
  min-width: 86px;
  padding: 0 15px;
}

.toast {
  min-width: 270px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: white;
  background: #171a26;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
  transition: 0.25s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0a0b10;
  background: var(--pulse-cyan);
  font-weight: 800;
}

.toast-action {
  margin-left: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(77, 232, 255, 0.35);
  border-radius: 9px;
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.08);
  font: 700 9px var(--font-display);
  cursor: pointer;
  white-space: nowrap;
}

.toast strong,
.toast small {
  display: block;
}

.toast strong {
  font-size: 12px;
}

.toast small {
  margin-top: 2px;
  color: rgba(255,255,255,.6);
  font-size: 9px;
}

.app-modal {
  width: min(92vw, 480px);
  padding: 34px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.app-modal::backdrop,
.calendar-detail-modal::backdrop,
.venue-calendar-modal::backdrop,
.venue-claim-modal::backdrop,
.location-modal::backdrop,
.account-modal::backdrop,
.profile-modal::backdrop,
.data-modal::backdrop,
.admin-center-modal::backdrop,
.admin-password-modal::backdrop,
.listing-submit-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
  backdrop-filter: blur(5px);
}

@media (prefers-reduced-motion: no-preference) {
  .app-modal[open],
  .calendar-detail-modal[open],
  .venue-calendar-modal[open],
  .venue-claim-modal[open],
  .location-modal[open],
  .account-modal[open],
  .profile-modal[open],
  .data-modal[open],
  .admin-center-modal[open],
  .admin-password-modal[open],
  .listing-submit-modal[open],
  .performer-modal[open],
  .alerts-modal[open] {
    animation: modalIn 0.45s var(--ease);
  }

  @keyframes modalIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 15px;
  border: 0;
  background: transparent;
  color: var(--fog-dim);
  font-size: 25px;
  cursor: pointer;
}

.modal-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 16px 16px 16px 5px;
  color: white;
  background: var(--green);
  font: 700 20px Georgia, serif;
}

.app-modal h2 {
  margin-bottom: 10px;
  font-size: 28px;
  letter-spacing: -1.2px;
}

.app-modal > p {
  margin-bottom: 24px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
}

.app-modal form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-modal label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
}

.app-modal input,
.app-modal textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--ink);
  background: #1b1e2b;
}

.app-modal input:focus,
.app-modal textarea:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

.venue-calendar-modal {
  width: min(94vw, 900px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.venue-modal-heading {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 16px;
  align-items: center;
  padding-right: 42px;
}

.venue-modal-mark {
  width: 68px;
  height: 68px;
  border-radius: 18px 18px 18px 6px;
  font-size: 17px;
}

.venue-hiring-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 100px;
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.12);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.venue-hiring-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pulse-cyan);
}

.venue-modal-heading h2 {
  margin: 6px 0 3px;
  font-size: 28px;
  letter-spacing: -1.1px;
}

.venue-modal-heading p {
  margin: 0;
  color: var(--fog-dim);
  font-size: 9px;
}

.venue-modal-facts {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1fr 1.4fr;
  margin: 22px 0 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.venue-modal-facts > div {
  min-width: 0;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.venue-modal-facts > div:last-child {
  border-right: 0;
}

.venue-modal-facts span,
.venue-modal-facts strong {
  display: block;
}

.venue-modal-facts span {
  margin-bottom: 4px;
  color: var(--fog-dim);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.venue-modal-facts strong {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.venue-modal-facts > div:first-child strong {
  color: var(--green-2);
  font-size: 13px;
}

/* The display rules below would otherwise beat the [hidden] attribute the
   modal script toggles — inside this dialog, hidden must always win. */
#venueCalendarModal [hidden] {
  display: none !important;
}

.venue-modal-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.venue-modal-copy .section-kicker {
  margin-bottom: 4px;
}

.venue-modal-copy h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.5px;
}

.venue-calendar-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fog-dim);
  font-size: 8px;
  font-weight: 700;
}

.venue-calendar-legend i {
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--pulse-cyan);
}

.venue-calendar-legend i:nth-of-type(2) {
  background: #e8b44d;
}

.venue-schedule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.venue-slot {
  min-height: 103px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
}

.venue-slot.open {
  border-color: rgba(77, 232, 255, 0.3);
  background: rgba(77, 232, 255, 0.07);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.venue-slot.open:hover,
.venue-slot.open.selected {
  transform: translateY(-2px);
  border-color: var(--green-2);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.venue-slot.open.selected {
  outline: 2px solid var(--green-2);
  outline-offset: 2px;
}

.venue-slot.booked {
  position: relative;
  overflow: hidden;
  color: rgba(237, 239, 245, 0.72);
  border-color: rgba(232, 180, 77, 0.45);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(232, 180, 77, 0.07) 0,
      rgba(232, 180, 77, 0.07) 6px,
      rgba(232, 180, 77, 0.015) 6px,
      rgba(232, 180, 77, 0.015) 12px
    ),
    rgba(232, 180, 77, 0.05);
}

.venue-slot.booked::after {
  content: 'BOOKED';
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 3px 6px;
  border: 1px solid rgba(232, 180, 77, 0.55);
  border-radius: 4px;
  color: var(--gold, #e8b44d);
  background: rgba(232, 180, 77, 0.12);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
}

.venue-slot.booked > strong {
  color: rgba(237, 239, 245, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 180, 77, 0.6);
  text-decoration-thickness: 1px;
}

.venue-slot > span,
.venue-slot > strong,
.venue-slot > small {
  display: block;
}

.venue-slot > span {
  color: var(--fog-dim);
  font-size: 8px;
  font-weight: 700;
}

.venue-slot > strong {
  margin: 8px 0 12px;
  font-size: 11px;
}

.venue-slot > small {
  overflow: hidden;
  color: var(--pulse-cyan);
  font-size: 7px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-slot.booked > small {
  color: #e8b44d;
}

.venue-slot small i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--pulse-cyan);
}

.venue-slot.booked small i {
  background: #e8b44d;
}

.slot-request-form {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(250px, 1.2fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(77, 232, 255, 0.35);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.slot-request-summary {
  align-self: center;
}

.slot-request-summary strong,
.slot-request-summary span {
  display: block;
}

.slot-request-summary strong {
  color: var(--pulse-cyan);
  font-size: 11px;
}

.slot-request-summary span {
  margin-top: 4px;
  color: rgba(237, 239, 245, 0.7);
  font-size: 8px;
  line-height: 1.4;
}

.slot-request-form label > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(77, 232, 255, 0.85);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.slot-request-form textarea {
  width: 100%;
  min-height: 66px;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid rgba(77, 232, 255, 0.28);
  border-radius: 9px;
  outline: 0;
  color: white;
  background: rgba(255, 255, 255, 0.05);
  font: inherit;
  font-size: 9px;
}

.slot-request-form .primary-button {
  width: auto;
  min-width: 165px;
  margin-bottom: 1px;
}

.slot-request-form .primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

.venue-demo-note {
  margin: 12px 0 0;
  color: var(--fog-dim);
  font-size: 7px;
  text-align: center;
}

.claim-listing-link {
  width: 100%;
  margin-top: 12px;
  padding: 9px;
  border: 0;
  color: var(--green-2);
  background: transparent;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.claim-listing-link span:first-child {
  color: var(--fog-dim);
  font-weight: 600;
}

.wide {
  width: 100%;
  justify-content: space-between;
  padding: 0 16px;
}

.location-modal {
  width: min(92vw, 460px);
  padding: 34px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.location-modal-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 16px 16px 16px 5px;
  color: white;
  background: var(--green);
}

.location-modal-icon svg {
  width: 23px;
}

.location-modal h2 {
  margin-bottom: 9px;
  font-size: 28px;
  letter-spacing: -1.2px;
}

.location-modal > p:not(.location-note) {
  margin-bottom: 22px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.geo-button {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  background: #1b1e2b;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.geo-button:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 98, 58, 0.4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.geo-button > span:first-child {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--green);
  background: rgba(232, 98, 58, 0.12);
}

.geo-button svg {
  width: 20px;
}

.geo-button strong,
.geo-button small {
  display: block;
}

.geo-button strong {
  font-size: 12px;
}

.geo-button small {
  margin-top: 3px;
  color: var(--fog-dim);
  font-size: 9px;
}

.geo-arrow {
  color: var(--green-2);
  font-weight: 700;
}

.option-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--fog-dim);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.option-divider::before,
.option-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

#zipForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zip-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
}

.zip-field > div {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #1b1e2b;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zip-field > div:focus-within {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

.zip-field.invalid > div {
  border-color: var(--coral);
}

.zip-field svg {
  width: 18px;
  color: var(--green-2);
}

.zip-field input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.field-error {
  display: none;
  margin-top: -4px;
  color: var(--coral);
  font-size: 9px;
  font-weight: 600;
}

.field-error.visible {
  display: block;
}

.location-note {
  margin: 15px 0 0;
  text-align: center;
  color: var(--fog-dim);
  font-size: 9px;
}

.data-modal,
.listing-submit-modal {
  max-height: min(90vh, 860px);
  overflow-y: auto;
  padding: 36px;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.data-modal {
  width: min(94vw, 680px);
}

.listing-submit-modal {
  width: min(94vw, 720px);
}

.data-modal-mark,
.submission-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 16px 16px 16px 5px;
  color: white;
  background: var(--green);
  box-shadow: 0 8px 20px rgba(232, 98, 58, 0.25);
  font-size: 20px;
  font-weight: 900;
}

.submission-mark {
  color: var(--coral);
  background: rgba(232, 98, 58, 0.14);
  box-shadow: none;
}

.data-modal h2,
.listing-submit-modal h2 {
  margin-bottom: 10px;
  font-size: 29px;
  letter-spacing: -1.3px;
}

.data-modal > p,
.listing-submit-modal > p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.data-health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 22px 0;
}

.data-health-grid > div {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #1b1e2b;
}

.data-health-grid span,
.data-health-grid strong {
  display: block;
}

.data-health-grid span {
  margin-bottom: 5px;
  color: var(--fog-dim);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.data-health-grid strong {
  font-size: 13px;
}

.data-trust-explainer {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
}

.data-trust-explainer > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

.data-trust-explainer i {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border-radius: 50%;
}

.data-trust-explainer i.verified {
  background: var(--pulse-cyan);
}

.data-trust-explainer i.preloaded {
  background: var(--yellow);
}

.data-trust-explainer i.pending {
  background: rgba(237, 239, 245, 0.35);
}

.data-modal-actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.admin-review-panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.admin-review-panel h3 {
  margin: 4px 0 5px;
  font-size: 20px;
}

.admin-review-panel p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.admin-token-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 9px;
  margin-top: 14px;
}

.admin-token-form label span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.submission-grid label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 700;
}

.admin-token-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 15px;
}

.submission-grid input,
.submission-grid select,
.submission-grid textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 11px;
}

.admin-token-form input:focus,
.submission-grid input:focus,
.submission-grid select:focus,
.submission-grid textarea:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

.admin-review-queue {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-review-empty {
  padding: 18px;
  border: 1px dashed rgba(232, 98, 58, 0.3);
  border-radius: 13px;
  color: var(--green);
  text-align: center;
  background: rgba(232, 98, 58, 0.07);
  font-size: 14px;
  font-weight: 700;
}

.admin-review-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #1b1e2b;
}

.admin-review-card small,
.admin-review-card strong,
.admin-review-card span {
  display: block;
}

.admin-review-card small {
  color: var(--fog-dim);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-review-card strong {
  margin: 4px 0;
  font-size: 15px;
}

.admin-review-card span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.admin-review-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.admin-review-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: #1b1e2b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.admin-review-actions button[data-action="approve"] {
  color: white;
  border-color: var(--green);
  background: var(--green);
}

.admin-review-actions button[data-action="reject"] {
  color: #f08b72;
}

.submission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 20px 0 12px;
}

.submission-grid .full-field {
  grid-column: 1 / -1;
}

.listing-age {
  color: var(--fog-dim);
  font-size: 8px;
  font-weight: 600;
}

.admin-center-modal {
  width: min(96vw, 1040px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 25px;
  color: var(--ink);
  background: #10131c;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.65);
}

/* All bare links inside the Admin Center get a readable cyan on the dark
   background.  The public site's link styles don't apply here, so without
   this rule every <a> inherits the browser UA dark-blue — nearly invisible
   on #10131c.  hover slightly brightens toward --role-accent-soft. */
.admin-center-modal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(77, 232, 255, 0.45);
}

.admin-center-modal a:hover {
  color: var(--role-accent-soft);
  text-decoration-color: rgba(143, 243, 255, 0.7);
}

.admin-center-modal > .modal-close {
  z-index: 3;
}

.admin-login-view {
  width: min(100%, 500px);
  margin: 0 auto;
  padding: 46px 42px;
}

.admin-shield {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 17px 17px 17px 6px;
  color: white;
  background: var(--green);
  box-shadow: 0 10px 25px rgba(232, 98, 58, 0.25);
  font-size: 17px;
  font-weight: 900;
}

.admin-login-view h2,
.admin-center-header h2 {
  margin: 4px 0 8px;
  font-size: 30px;
  letter-spacing: -1.3px;
}

.admin-login-view > p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.admin-login-view form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.admin-login-view label > span,
.admin-user-form label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
}

.admin-login-view input,
.admin-user-form input,
.admin-user-form select,
.admin-toolbar select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 15px;
}

.admin-login-view input:focus,
.admin-user-form input:focus,
.admin-user-form select:focus,
.admin-toolbar select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

.admin-security-note {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(77, 232, 255, 0.08);
  color: rgba(237, 239, 245, 0.7) !important;
  font-size: 12px !important;
  line-height: 1.5;
}

.admin-app-view {
  min-height: 680px;
}

.admin-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 38px 22px;
  color: white;
  background: linear-gradient(125deg, #16112a, #2b2350);
}

.admin-center-modal .section-kicker {
  font-size: 12px;
  letter-spacing: 2px;
}

.admin-center-header .section-kicker {
  color: var(--pulse-cyan);
}

.admin-center-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.admin-center-header .secondary-button {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.admin-header-actions {
  display: flex;
  gap: 8px;
}

.admin-password-modal {
  width: min(92vw, 480px);
  padding: 36px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.admin-password-modal h2 {
  margin: 4px 0 8px;
  font-size: 26px;
  letter-spacing: -1.1px;
}

.admin-password-modal > p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.admin-password-modal form {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.admin-password-modal label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
}

.admin-password-modal input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 15px;
}

.admin-password-modal input:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

/* Admin Center → Overview landing. */
.admin-ov-title {
  margin: 26px 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-ov-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #1b1e2b;
  color: var(--ink);
  text-align: left;
  min-width: 0;
}
.admin-ov-card.is-link {
  cursor: pointer;
  transition: transform 0.2s var(--spring), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.admin-ov-card.is-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.28);
  background: #202433;
}
.admin-ov-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-ov-value {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.03em;
  margin-top: 6px;
}
.admin-ov-value.tone-hot { color: var(--signal-orange); }
.admin-ov-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 100%;
}
.admin-ov-calendar {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171a26;
}
.admin-ov-calendar .admin-ov-title { margin: 0; }
.admin-ov-calendar-note { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.admin-ov-calendar-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.admin-ov-calendar-counts span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11px;
}
.admin-ov-calendar-counts strong { color: var(--ink); font-family: var(--font-mono); }
.admin-ov-calendar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.admin-ov-calendar-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
.admin-ov-calendar-row span, .admin-ov-calendar-row small { color: var(--muted); font-size: 11px; }
.admin-ov-calendar-flags { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
@media (max-width: 640px) {
  .admin-ov-calendar-row { align-items: flex-start; flex-direction: column; }
  .admin-ov-calendar-flags { justify-content: flex-start; }
}
.admin-ov-audit {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171a26;
  padding: 16px 18px 8px;
}
.admin-ov-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-ov-audit-head .admin-ov-title { margin: 0; }
.admin-ov-audit-link {
  border: none;
  background: none;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.admin-ov-audit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.admin-ov-audit-row strong { flex: none; font-size: 12.5px; }
.admin-ov-audit-row span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.admin-ov-audit-row time { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.admin-ov-email-failures {
  margin-top: 26px;
  border: 1px solid rgba(255, 107, 107, 0.45);
  border-radius: 14px;
  background: rgba(255, 107, 107, 0.07);
  padding: 16px 18px 12px;
}
.admin-ov-email-note {
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.admin-ov-email-row {
  padding: 10px 0 8px;
  border-top: 1px solid var(--line);
}
.admin-ov-email-row-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.admin-ov-email-row-main strong { flex: none; font-size: 12.5px; }
.admin-ov-email-row-main span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.admin-ov-email-row-main time { flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.admin-ov-email-error {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ff9d9d;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .admin-ov-email-row-main { flex-wrap: wrap; }
  .admin-ov-email-row-main span { flex-basis: 100%; white-space: normal; }
}
@media (max-width: 860px) { .admin-ov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .admin-ov-grid { grid-template-columns: 1fr; } }

.admin-center-nav {
  display: flex;
  gap: 5px;
  padding: 12px 26px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #171a26;
}

.admin-center-nav button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  white-space: nowrap;
  border: 0;
  border-radius: 9px;
  color: var(--fog-dim);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.admin-center-nav button.active {
  color: var(--green);
  background: rgba(232, 98, 58, 0.12);
}

.admin-center-nav button span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 100px;
  color: white;
  background: var(--coral);
  font-size: 11px;
  text-align: center;
}

.admin-center-nav button[hidden] {
  display: none;
}

.admin-center-error {
  display: block;
  padding: 0 32px;
}

.admin-center-content {
  padding: 26px 32px 34px;
}

.admin-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.admin-stat-card {
  min-height: 108px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #1b1e2b;
}

.admin-stat-card span,
.admin-stat-card strong,
.admin-stat-card small {
  display: block;
}

.admin-spend-card {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(41, 72, 57, .18);
  border-radius: 16px;
  background: #f7fbf8;
  color: #17261f;
}
.admin-spend-near_limit { background: #fff9ea; border-color: #d9a92f; }
.admin-spend-stopped { background: #fff1ee; border-color: #c85643; }
.admin-spend-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.admin-spend-card .section-kicker { color: #8f3f24; }
.admin-spend-heading h4 { margin: .2rem 0 0; font-size: 1.65rem; color: #13251d; }
.admin-spend-heading > strong { font-size: .95rem; color: #29483a; }
.admin-spend-meter { width: 100%; height: 10px; overflow: hidden; margin: .8rem 0; border: 0; border-radius: 999px; background: rgba(41, 72, 57, .12); accent-color: #28764e; }
.admin-spend-near_limit .admin-spend-meter { accent-color: #c28a12; }
.admin-spend-stopped .admin-spend-meter { accent-color: #b94736; }
.admin-spend-card p { margin: .5rem 0; color: #29483a; }
.admin-spend-history { display: flex; gap: .55rem; overflow-x: auto; margin: .8rem 0; }
.admin-spend-history span { min-width: 82px; padding: .5rem; border: 1px solid rgba(41, 72, 57, .13); border-radius: 10px; background: #fff; }
.admin-spend-history small, .admin-spend-history strong { display: block; }
.admin-spend-history small { color: #50675c; }
.admin-spend-history strong { color: #17261f; }
.admin-spend-card > small { color: #50675c; }
@media (max-width: 600px) {
  .admin-spend-card { min-width: 0; }
  .admin-spend-heading { align-items: flex-start; flex-direction: column; }
  .admin-spend-card small, .admin-spend-card p { overflow-wrap: anywhere; }
}

.admin-stat-card.has-backlog {
  border-color: rgba(232, 180, 77, 0.45);
}

.admin-stat-card.has-backlog strong {
  color: var(--yellow);
}

.admin-stat-card span {
  color: var(--fog-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.admin-stat-card strong {
  margin: 9px 0 4px;
  font-size: 27px;
  letter-spacing: -1px;
}

.admin-stat-card small {
  color: var(--ink-soft);
  font-size: 12px;
}

.admin-section-heading,
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}

.admin-section-heading h3,
.admin-toolbar h3 {
  margin: 0;
  font-size: 20px;
}

.admin-section-heading p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.admin-activity-list,
.admin-record-list {
  display: grid;
  gap: 9px;
}

.admin-activity-list {
  margin-top: 22px;
}

.admin-activity-item,
.admin-record-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #1b1e2b;
}

.admin-activity-item strong,
.admin-record-card.is-selectable {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.admin-bulk-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.admin-bulk-pick input {
  width: 14px;
  height: 14px;
  accent-color: var(--pulse-cyan);
  cursor: pointer;
}

.admin-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(77, 232, 255, 0.28);
  border-radius: 13px;
  background: rgba(77, 232, 255, 0.06);
}

.admin-bulk-count {
  margin-right: auto;
  color: var(--pulse-cyan);
  font-size: 9px;
  font-weight: 800;
}

.admin-bulk-bar button {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: white;
  background: #232636;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.admin-bulk-bar button.primary {
  border-color: transparent;
  background: var(--green);
}

.admin-bulk-bar button.danger {
  border-color: rgba(255, 96, 96, 0.4);
  color: #ff9c9c;
  background: rgba(255, 96, 96, 0.08);
}

.admin-bulk-bar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-record-card strong {
  display: block;
  font-size: 15px;
}

.admin-activity-item span,
.admin-record-card p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.admin-activity-item time,
.admin-record-card time {
  color: var(--fog-dim);
  font-size: 12px;
}

.admin-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-status.verified,
.admin-status.published,
.admin-status.approved,
.admin-status.active {
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.12);
}

.admin-status.pending {
  color: #e9cd90;
  background: rgba(232, 180, 77, 0.14);
}

.admin-status.rejected,
.admin-status.expired,
.admin-status.revoked,
.admin-status.inactive {
  color: #f08b72;
  background: rgba(232, 98, 58, 0.14);
}

.admin-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-record-actions button {
  min-height: 35px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: #1b1e2b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.admin-record-actions button.primary {
  color: white;
  border-color: var(--green);
  background: var(--green);
}

.admin-record-actions button.danger {
  color: #f08b72;
}

.admin-password-reset-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.admin-password-reset-form[hidden] {
  display: none;
}

.admin-password-reset-form label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 12px;
}

.admin-password-reset-form input {
  width: 100%;
}

.admin-password-reset-form > div {
  display: flex;
  gap: 8px;
}

.admin-inline-error {
  grid-column: 1 / -1;
  color: #ff9c9c;
  font-size: 12px;
  font-weight: 700;
}

.admin-inline-error[hidden] {
  display: none;
}

.admin-schedule-summary {
  color: #e9cd90 !important;
}

.admin-schedule-venue-pick {
  display: grid;
  gap: 6px;
  max-width: 520px;
  margin-top: 10px;
  color: var(--fog-dim);
  font-size: 11px;
  font-weight: 800;
}

.admin-schedule-venue-pick select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #151824;
  font: inherit;
}

.admin-user-form {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr 1fr;
  align-items: end;
  gap: 9px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid rgba(232, 98, 58, 0.22);
  border-radius: 15px;
  background: rgba(232, 98, 58, 0.06);
}

/* Admin forms that toggle open/closed (digest settings, seed suppression)
   rely on the hidden attribute; the grid rule above would otherwise win. */
.admin-user-form[hidden] {
  display: none !important;
}

.admin-user-form .full-row {
  grid-column: 1 / -1;
}

.admin-permission-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.admin-permission-guide div {
  padding: 12px 14px;
  border-radius: 11px;
  background: #1b1e2b;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

.admin-permission-guide strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 14px;
}

.admin-empty-state {
  padding: 30px;
  border: 1px dashed rgba(232, 98, 58, 0.3);
  border-radius: 15px;
  color: var(--green);
  text-align: center;
  background: rgba(232, 98, 58, 0.07);
  font-size: 14px;
  font-weight: 800;
}

.admin-cron-warning {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 165, 0, 0.45);
  border-left: 4px solid var(--signal-orange, #f97316);
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.08);
}

.admin-cron-warning strong {
  font-size: 14px;
  color: #fbbf24;
}

.admin-cron-warning span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.admin-cron-warning code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.admin-setting-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #1b1e2b;
}

.admin-setting-card strong,
.admin-setting-card span {
  display: block;
}

.admin-setting-card strong {
  font-size: 15px;
}

.admin-setting-card span {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.admin-switch {
  width: 52px;
  height: 29px;
  position: relative;
  flex: 0 0 auto;
}

.admin-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-switch i {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: #262a38;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.admin-switch i::after {
  content: "";
  width: 23px;
  height: 23px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.admin-switch input:checked + i {
  background: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.18);
}

.admin-switch input:checked + i::after {
  transform: translateX(23px);
}

.admin-switch input:focus-visible + i {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

.account-modal,
.profile-modal,
.venue-claim-modal {
  max-height: min(90vh, 820px);
  overflow-y: auto;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.account-modal {
  width: min(92vw, 530px);
  padding: 36px;
}

.profile-modal {
  width: min(94vw, 720px);
  padding: 36px;
}

.venue-claim-modal {
  width: min(92vw, 590px);
  padding: 36px;
}

.account-modal h2,
.profile-modal h2,
.venue-claim-modal h2 {
  margin-bottom: 10px;
  font-size: 29px;
  letter-spacing: -1.3px;
}

.account-modal p,
.profile-modal > p,
.venue-claim-modal > p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.account-mark,
.account-profile-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 17px 17px 17px 6px;
  color: white;
  background: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.guest-choice {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 22px 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  text-align: left;
  color: var(--ink);
  background: #1b1e2b;
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.guest-choice:hover {
  border-color: rgba(232, 98, 58, 0.45);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.account-choice-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  background: rgba(232, 98, 58, 0.12);
  font-weight: 800;
}

.guest-choice strong,
.guest-choice small {
  display: block;
}

.guest-choice strong {
  font-size: 12px;
}

.guest-choice small {
  margin-top: 4px;
  color: var(--fog-dim);
  font-size: 9px;
}

.account-start-button {
  min-height: 50px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 22px 0 17px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  color: var(--fog-dim);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.auth-tabs button.active {
  color: var(--green);
  background: #1b1e2b;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

#authForm,
#profileForm,
#venueClaimForm {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* The flex rule above would otherwise beat the hidden attribute. */
#profileForm[hidden],
#venueClaimForm[hidden] {
  display: none !important;
}

#authForm label > span,
#profileForm label > span,
#venueClaimForm label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.2px;
}

#authForm input,
#authForm select,
#profileForm input,
#profileForm select,
#profileForm textarea,
#venueClaimForm input,
#venueClaimForm select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 11px;
}

#authForm input:focus,
#authForm select:focus,
#profileForm input:focus,
#profileForm select:focus,
#profileForm textarea:focus,
#venueClaimForm input:focus,
#venueClaimForm select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(232, 98, 58, 0.15);
}

.account-error {
  min-height: 14px;
  color: var(--coral);
  font-size: 9px;
  font-weight: 700;
}

.text-button {
  display: block;
  margin: 15px auto 0;
  padding: 6px;
  border: 0;
  color: var(--green-2);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

/* One-click "re-create this account" action rendered inside the auth error
   note when a sign-in fails for a pre-server-era, browser-only username. */
.auth-recreate-button {
  margin: 8px auto 0;
  text-decoration: underline;
}

.prototype-note {
  margin: 14px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  font-size: 8px !important;
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 22px;
}

.secondary-button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.account-actions .secondary-button.danger,
.account-delete-actions .secondary-button.danger {
  border-color: rgba(255, 96, 96, 0.4);
  color: #ff9c9c;
  background: rgba(255, 96, 96, 0.08);
}

.account-delete-confirm {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 96, 96, 0.35);
  border-radius: 12px;
  background: rgba(255, 96, 96, 0.06);
  text-align: left;
}

.account-delete-confirm[hidden] {
  display: none;
}

.account-delete-confirm h3 {
  margin: 0 0 8px;
  font-size: 12px;
}

.account-delete-confirm p {
  margin: 0 0 10px;
  font-size: 10px;
  color: var(--muted);
}

.account-delete-confirm .account-delete-note a {
  color: inherit;
  text-decoration: underline;
}

.account-delete-actions {
  display: flex;
  gap: 9px;
  margin-top: 10px;
}

.account-delete-actions .secondary-button {
  flex: 1;
}

.venue-ownership-panel {
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(77, 232, 255, 0.22);
  border-radius: 12px;
  background: rgba(77, 232, 255, 0.06);
}

.venue-ownership-panel[hidden] {
  display: none;
}

.venue-ownership-panel > span {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 100px;
  color: #e9cd90;
  background: rgba(232, 180, 77, 0.14);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.venue-ownership-panel.approved > span {
  color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.12);
}

.venue-ownership-panel strong,
.venue-ownership-panel small {
  display: block;
}

.venue-ownership-panel strong {
  margin-top: 7px;
  font-size: 11px;
}

.venue-ownership-panel small {
  margin-top: 4px;
  color: var(--fog-dim);
  font-size: 8px;
  line-height: 1.45;
}

.claim-shield {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 16px 16px 16px 5px;
  color: white;
  background: var(--green);
  box-shadow: 0 8px 20px rgba(232, 98, 58, 0.25);
  font-weight: 900;
}

.claim-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.claim-review-note {
  padding: 12px;
  border-left: 3px solid var(--yellow);
  border-radius: 0 10px 10px 0;
  background: rgba(232, 180, 77, 0.1);
}

.claim-review-note strong,
.claim-review-note span {
  display: block;
}

.claim-review-note strong {
  font-size: 9px;
}

.claim-review-note span {
  margin-top: 4px;
  color: var(--fog-dim);
  font-size: 8px;
  line-height: 1.5;
}

.claim-new-listing {
  margin-top: 12px;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.profile-form-grid .full-field {
  grid-column: 1 / -1;
}

#profileForm .profile-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

#profileForm .profile-check input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent, #e8623a);
}

#profileForm .profile-check span {
  display: inline;
  margin-bottom: 0;
  font-size: 10.5px;
  font-weight: 600;
}

.profile-form-grid textarea {
  min-height: 100px;
  resize: vertical;
}

/* Restored-draft notice: appears only when the profile builder reopens with
   auto-saved work-in-progress; discarding returns to the last saved profile.
   Flex container, so it needs the [hidden] override or the display rule
   would defeat the attribute. */
.profile-draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 8px 8px 12px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 10px;
  background: rgba(232, 98, 58, 0.08);
}

.profile-draft-notice[hidden] {
  display: none;
}

.profile-draft-notice span {
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
}

.profile-draft-notice button {
  flex-shrink: 0;
  padding: 7px 10px;
  border: 1px solid rgba(232, 98, 58, 0.4);
  border-radius: 8px;
  color: var(--coral);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

/* Audience-labeled pricing groups on the venue profile form: one for
   musicians, one for food trucks — min/max fields plus the "show the range
   vs discuss privately" choice, boxed so each audience reads as a unit. */
.pricing-audience-field {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.pricing-audience-field > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
}

.pricing-audience-field > p {
  margin: 4px 0 12px;
  color: var(--fog-dim);
  font-size: 8px;
}

.pricing-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pricing-audience-grid .pricing-mode-field {
  grid-column: 1 / -1;
}

.venue-availability-field {
  padding: 14px;
  border: 1px solid rgba(232, 98, 58, 0.25);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.venue-availability-field > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
}

.venue-availability-field > p {
  margin: 4px 0 12px;
  color: var(--fog-dim);
  font-size: 8px;
}

.venue-availability-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venue-availability-row {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 0.75fr 1fr 1.35fr auto;
  gap: 7px;
  align-items: end;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1b1e2b;
}

.venue-availability-row label > span {
  margin-bottom: 4px !important;
  color: var(--fog-dim);
  font-size: 6px !important;
  text-transform: uppercase;
}

.venue-availability-row input,
.venue-availability-row select {
  padding: 8px !important;
  font-size: 8px !important;
}

.availability-add-button {
  margin-top: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 9px;
  color: var(--green);
  background: #1b1e2b;
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.availability-remove-button {
  width: 29px;
  height: 34px;
  border: 1px solid rgba(232, 98, 58, 0.3);
  border-radius: 8px;
  color: var(--coral);
  background: rgba(232, 98, 58, 0.08);
  font-size: 16px;
  cursor: pointer;
}

.availability-empty {
  padding: 16px;
  border: 1px dashed rgba(232, 98, 58, 0.3);
  border-radius: 9px;
  color: var(--fog-dim);
  background: #1b1e2b;
  font-size: 8px;
  text-align: center;
}

.venue-offerings-field {
  padding: 14px;
  border: 1px solid rgba(232, 98, 58, 0.25);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.venue-offerings-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.venue-offerings-editor-head > div > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
}

.venue-offerings-editor-head p {
  margin: 4px 0 12px;
  color: var(--fog-dim);
  font-size: 8px;
}

.venue-offerings-editor-head small {
  flex: none;
  color: var(--green-2);
  font-size: 8px;
  font-weight: 800;
}

.venue-offerings-rows {
  display: grid;
  gap: 8px;
}

.venue-offering-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1b1e2b;
}

.venue-offering-row-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

.venue-offering-row label > span {
  margin-bottom: 4px !important;
  color: var(--fog-dim);
  font-size: 7px !important;
  text-transform: uppercase;
}

.venue-offering-row label > span i {
  font-style: normal;
  text-transform: none;
}

.venue-offering-row input,
.venue-offering-row textarea {
  min-height: 0;
  padding: 8px !important;
  font-size: 9px !important;
}

.venue-offering-row textarea {
  resize: vertical;
}

.venue-offering-price {
  width: min(220px, 100%);
}

.venue-offerings-field .availability-add-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.menu-upload {
  padding: 13px;
  border: 1px dashed rgba(232, 98, 58, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.menu-upload input {
  padding: 7px !important;
  background: transparent !important;
}

.menu-file-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--fog-dim);
  font-size: 8px;
}

.menu-file-status a {
  color: var(--green-2);
  font-weight: 800;
}

.menu-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.menu-remove-button {
  border: 1px solid rgba(255, 120, 120, 0.45);
  background: transparent;
  color: #ff9c9c;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.menu-remove-button:hover {
  background: rgba(255, 120, 120, 0.12);
}

.menu-preview {
  width: 100%;
  max-height: 190px;
  display: none;
  margin-top: 10px;
  object-fit: contain;
  border-radius: 9px;
  background: #1b1e2b;
}

.menu-preview.visible {
  display: block;
}

@media (max-width: 1150px) {
  .section-heading {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .date-filter {
    margin-top: 20px;
    justify-self: start;
  }
}

@media (max-width: 1050px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }

  .role-nav {
    order: 3;
    grid-column: 1 / -1;
    justify-self: center;
    transform: translateY(16px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    /* Floating half below the header: the usual translucent glass would show
       the header/hero seam through it as a two-tone split, so layer the same
       glass tint over an opaque base to keep one even color. */
    background: linear-gradient(var(--glass), var(--glass)), var(--graphite);
  }

  .role-switcher {
    order: 3;
    grid-column: 1 / -1;
    transform: translateY(16px);
  }

  .role-switcher .role-nav {
    order: initial;
    grid-column: auto;
    transform: none;
  }

  .role-switcher-explainer {
    margin-top: 5px;
  }

  .hero {
    padding-top: 95px;
  }

  .search-bar {
    grid-template-columns: 1fr 1px 0.8fr auto;
  }

  .discovery-grid {
    grid-template-columns: 1fr;
  }

  .event-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .musician-menu-filters {
    grid-template-columns: repeat(2, 1fr);
  }

  .venue-modal-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .venue-modal-facts > div:nth-child(2) {
    border-right: 0;
  }

  .venue-modal-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .slot-request-form {
    grid-template-columns: 1fr 1.4fr;
  }

  .slot-request-form .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .admin-entry-button {
    width: 38px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    /* The hidden "Admin" text is still a flex item; without zeroing the gap
       it reserves 6px and nudges the shield icon off-center. */
    gap: 0;
  }

  .topbar {
    height: 66px;
    padding: 0 16px;
  }

  .brand {
    min-width: 74px;
    gap: 7px;
  }

  .brand-mark {
    height: 32px;
  }

  .brand-wordmark {
    font-size: 13px;
    letter-spacing: 0.01em;
  }
}

/* Very narrow phones (320-420px): the one-line domain plus emblem can't
   share the header with the Admin/ZIP/bell/account controls. Drop the
   decorative emblem and tighten the wordmark so everything stays usable. */
@media (max-width: 430px) {
  .brand {
    min-width: 0;
  }

  .brand-mark {
    display: none;
  }

  .brand-wordmark {
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

/* 320px-class phones: squeeze header padding and the wordmark a touch more
   so the account button never falls off the right edge. */
@media (max-width: 360px) {
  .topbar {
    padding: 0 10px;
  }

  .brand-wordmark {
    font-size: 10px;
  }

  /* The action cluster (admin, ZIP, bell, account) is ~205px at its ≤760px
     sizing; on a 320px screen that leaves too little room for the wordmark.
     Tighten gaps and pill padding so both columns fit without overflow. */
  .topbar-actions {
    gap: 4px;
  }

  .location-pill {
    padding: 7px 7px;
    font-size: 11px;
  }

  .admin-entry-button,
  .icon-button {
    width: 32px;
    min-height: 32px;
    height: 32px;
  }

  .account-button {
    padding: 0;
  }
}

@media (max-width: 760px) {
  .location-pill {
    display: flex;
    padding: 8px 10px;
  }

  .location-pill .pulse-dot {
    display: none;
  }

  .location-pill svg {
    display: none;
  }

  /* The bell (the only icon button) is the sole way into fill-in alerts and
     the venue pitch inbox — it must stay reachable on phones. */

  .account-button {
    min-height: 38px;
    padding: 3px;
    border: 0;
    background: transparent;
  }

  .account-button > span:last-child {
    display: none;
  }

  .account-avatar {
    width: 36px;
    height: 36px;
  }

  .role-nav {
    width: calc(100vw - 32px);
    overflow-x: auto;
    justify-content: flex-start;
    /* Hide the internal horizontal scrollbar strip; the tabs stay swipeable. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .role-nav::-webkit-scrollbar {
    display: none;
  }

  .role-button {
    flex: 1 0 auto;
  }

  .hero {
    min-height: 620px;
    padding: 90px 20px 42px;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  h1 {
    margin-top: 12px;
    font-size: 48px;
    letter-spacing: -3px;
  }

  .search-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px;
  }

  .search-field {
    min-height: 68px;
    padding: 0 15px;
  }

  .search-divider {
    width: calc(100% - 30px);
    height: 1px;
    margin: 0 auto;
  }

  .search-submit {
    min-height: 52px;
  }

  .content-section,
  .calendar-section {
    padding: 55px 16px;
  }

  .section-heading,
  .calendar-heading {
    display: block;
  }

  .date-filter {
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 5px;
  }

  .date-chip,
  .date-picker,
  .filter-button {
    flex: 0 0 auto;
  }

  .discovery-popover {
    right: auto;
    left: 0;
  }

  .filter-popover {
    left: auto;
    right: 0;
  }

  .musician-discovery-menu {
    margin-top: 0;
  }

  .musician-menu-tabs {
    overflow-x: auto;
  }

  .musician-menu-tabs button {
    flex: 0 0 auto;
  }

  .musician-menu-filters {
    grid-template-columns: 1fr;
  }

  .map-card {
    min-height: 540px;
  }

  .map-surface {
    height: 365px;
  }

  .map-footer {
    min-height: 116px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .map-legend {
    justify-content: center;
  }

  .event-list {
    display: flex;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .event-card {
    grid-template-columns: 90px 1fr auto;
  }

  .event-art {
    height: 92px;
  }

  .listing-card {
    min-height: 132px;
    grid-template-columns: 92px 1fr auto;
  }

  .listing-card .event-art {
    height: 96px;
  }

  .listing-card .event-meta h3 {
    font-size: 18px;
  }

  .calendar-heading .primary-button {
    margin-top: 20px;
  }

  /* The calendar fits the phone screen instead of sideways-scrolling:
     event pills become slim color bars, tapping a day opens the day
     sheet, and the color legend stays visible. */
  .calendar-toolbar {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .calendar-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .calendar-weekdays span {
    padding: 8px 2px;
    font-size: 8px;
  }

  .calendar-day {
    min-height: 58px;
    padding: 5px 4px;
  }

  .calendar-day.has-events {
    cursor: pointer;
  }

  .day-number {
    width: 19px;
    height: 19px;
    font-size: 9px;
  }

  .calendar-event {
    height: 9px;
    margin-top: 4px;
    padding: 0;
    border-left-width: 3px;
    font-size: 0;
    pointer-events: none;
  }

  .calendar-event-overflow {
    display: none;
  }

  .calendar-day-more {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    font-weight: 700;
    color: var(--fog-dim);
  }

  .app-modal {
    padding: 28px 22px;
  }

  .calendar-detail-modal {
    border-radius: 20px;
  }

  .calendar-detail-hero {
    min-height: 170px;
    grid-template-columns: 55px 1fr;
    gap: 13px;
    padding: 28px 42px 24px 20px;
  }

  .calendar-detail-icon {
    width: 55px;
    height: 55px;
    border-radius: 17px 17px 17px 6px;
  }

  .calendar-detail-hero h2 {
    font-size: 23px;
  }

  .calendar-detail-facts {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-detail-facts > div:nth-child(2) {
    border-right: 0;
  }

  .calendar-detail-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .calendar-detail-body {
    padding: 21px 20px 14px;
  }

  .calendar-detail-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 20px 22px;
  }

  .calendar-source-button,
  .calendar-detail-actions .primary-button,
  .calendar-detail-actions .secondary-button {
    width: 100%;
  }

  .venue-calendar-modal {
    padding: 25px 18px;
    border-radius: 20px;
  }

  .venue-modal-heading {
    grid-template-columns: 54px 1fr;
    gap: 12px;
  }

  .venue-modal-mark {
    width: 54px;
    height: 54px;
  }

  .venue-modal-heading h2 {
    font-size: 22px;
  }

  .venue-modal-facts {
    grid-template-columns: 1fr 1fr;
  }

  .venue-modal-copy {
    align-items: flex-start;
    flex-direction: column;
  }

  .venue-schedule {
    grid-template-columns: 1fr 1fr;
  }

  .slot-request-form {
    grid-template-columns: 1fr;
  }

  .slot-request-form .primary-button {
    grid-column: auto;
  }

  .location-modal,
  .account-modal,
  .profile-modal,
  .venue-claim-modal,
  .data-modal,
  .listing-submit-modal,
  .admin-password-modal {
    padding: 28px 22px;
  }

  .admin-center-modal {
    width: 96vw;
    max-height: 94vh;
  }

  .admin-login-view {
    padding: 38px 24px;
  }

  .admin-center-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px 24px 20px;
  }

  .admin-center-content {
    padding: 22px 18px 28px;
  }

  .admin-overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-record-card,
  .admin-activity-item {
    grid-template-columns: 1fr;
  }

  .admin-record-actions {
    justify-content: flex-start;
  }

  .admin-user-form,
  .admin-permission-guide {
    grid-template-columns: 1fr;
  }

  .claim-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .data-health-grid,
  .submission-grid {
    grid-template-columns: 1fr 1fr;
  }

  .data-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-token-form {
    grid-template-columns: 1fr;
  }

  .profile-form-grid .full-field {
    grid-column: auto;
  }

  .pricing-audience-grid {
    grid-template-columns: 1fr;
  }

  /* Phone layout for the availability builder: rows stack one field per
     line instead of the cramped two-column grid, and the add/remove/close
     controls climb to comfortable 44px touch targets. Desktop keeps the
     dense grid above. */
  .venue-availability-row {
    position: relative;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .venue-availability-row label:first-child {
    /* Keep the date field clear of the corner remove button. */
    padding-right: 48px;
  }

  .venue-availability-row label > span {
    font-size: 8px !important;
  }

  .venue-availability-row input,
  .venue-availability-row select {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 10px !important;
  }

  .availability-remove-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 18px;
  }

  .availability-add-button {
    width: 100%;
    min-height: 44px;
    font-size: 9px;
  }

  .profile-modal .modal-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    right: 6px;
    top: 4px;
  }

  .profile-draft-notice button {
    min-height: 44px;
    padding: 7px 14px;
  }

  .boot-logo-wrap {
    width: min(250px, 66vw);
  }

  .boot-rings {
    top: 58px;
  }

  .boot-domain {
    font-size: 15px;
  }
}

.venue-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.venue-slot.open > small {
  color: var(--pulse-cyan);
}

.slot-pitch-cue {
  margin-top: auto;
  padding-top: 8px;
  color: var(--green-2);
  font-size: 8px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.venue-slot.open:hover .slot-pitch-cue,
.venue-slot.open.selected .slot-pitch-cue {
  color: var(--green);
}

.slot-performer-link {
  max-width: 100%;
  overflow: hidden;
  margin-top: auto;
  padding: 4px 0 0;
  border: 0;
  color: var(--green-2);
  background: transparent;
  font-size: 8px;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.slot-performer-link:hover {
  color: var(--green);
  text-decoration: underline;
}

.venue-network {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.venue-network > div:first-child strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.venue-network-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.network-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  background: #1b1e2b;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.network-chip:hover {
  transform: translateY(-1px);
  border-color: var(--green-2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.network-chip i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0a0b10;
  background: linear-gradient(145deg, var(--pulse-cyan), #2ba8c9);
  font-size: 7px;
  font-weight: 800;
  font-style: normal;
}

.claim-spotlight {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(232, 98, 58, 0.3);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(232, 98, 58, 0.09), rgba(255, 255, 255, 0.03));
}

/* Venues promoted from the registry before they've joined: the modal swaps
   the booking calendar + pitch form for this call-to-pitch panel. */
.venue-unjoined-pitch {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(123, 97, 255, 0.35);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(123, 97, 255, 0.1), rgba(255, 255, 255, 0.03));
}

.venue-unjoined-pitch h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.venue-unjoined-pitch p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fog-dim);
}

.venue-unjoined-pitch .primary-button {
  text-decoration: none;
  margin-top: 4px;
}

.venue-unjoined-nophone {
  border-top: 1px dashed var(--glass-border);
  padding-top: 10px;
}

.claim-spotlight-copy strong {
  display: block;
  margin: 5px 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.4px;
}

.claim-spotlight-copy p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 10px;
}

.claim-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.claim-share-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 100px;
  color: var(--green);
  background: #1b1e2b;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.claim-share-button:hover {
  border-color: var(--green-2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.claim-share-button svg {
  width: 13px;
  height: 13px;
}

.claim-spotlight-qr {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.claim-spotlight-qr img {
  width: 108px;
  height: 108px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #edeff5;
}

.claim-spotlight-qr small {
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 700;
}

.performer-modal {
  width: min(94vw, 560px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.performer-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
  backdrop-filter: blur(3px);
}

.performer-hero {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 15px;
  align-items: center;
  padding-right: 42px;
}

.performer-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px 18px 18px 6px;
  color: white;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

.performer-hero h2 {
  margin: 5px 0 3px;
  font-size: 24px;
  letter-spacing: -0.9px;
}

.performer-hero p {
  margin: 0;
  color: var(--fog-dim);
  font-size: 9px;
}

.performer-mark.has-photo {
  overflow: hidden;
  padding: 0;
  background: #1b1e2b;
}

.performer-mark.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.performer-verified-badge[hidden],
.performer-claim-pending[hidden],
#performerClaimLinkButton[hidden],
#performerEditButton[hidden],
#performerDemoNote[hidden] {
  display: none;
}

.performer-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(77, 232, 255, 0.1);
  border: 1px solid rgba(77, 232, 255, 0.3);
  color: var(--pulse-cyan);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.performer-claim-pending {
  margin: 14px 0 4px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(232, 180, 77, 0.12);
  border: 1px solid rgba(232, 180, 77, 0.3);
  color: #e9cd90;
  font-size: 10px;
  line-height: 1.55;
}

.performer-claim-pending span {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 8px;
  margin-bottom: 3px;
}

.performer-modal #performerEditButton {
  margin-top: 14px;
}

.performer-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.performer-genres i {
  padding: 5px 10px;
  border: 1px solid rgba(232, 98, 58, 0.3);
  border-radius: 100px;
  color: var(--green);
  background: rgba(232, 98, 58, 0.1);
  font-size: 8px;
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.performer-bio {
  margin: 14px 0 20px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.65;
}

.performer-section {
  margin-bottom: 18px;
}

.performer-dates {
  display: grid;
  gap: 8px;
  margin-top: 9px;
}

.performer-date {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  background: rgba(77, 232, 255, 0.06);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.performer-date:hover {
  transform: translateY(-1px);
  border-color: var(--green-2);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Cited gig rows (citation-only unclaimed popups) are facts, not buttons —
   no hover affordance; each carries its own source link. */
.performer-date.is-cited {
  cursor: default;
}

.performer-date.is-cited:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}

.performer-date .event-source {
  display: inline-block;
  margin-top: 5px;
}

/* Citation-only popups blank the bio/genre/meta elements; explicit display
   rules would beat [hidden], so give each the override (house pattern). */
.performer-genres[hidden],
.performer-bio[hidden],
#performerMeta[hidden] {
  display: none;
}

.performer-date strong {
  display: block;
  font-size: 11px;
}

.performer-date span {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 9px;
}

.performer-section .venue-network-chips {
  margin-top: 9px;
}

@media (max-width: 640px) {
  .venue-network {
    flex-direction: column;
    align-items: flex-start;
  }

  .claim-spotlight {
    grid-template-columns: 1fr;
  }

  .claim-spotlight-qr {
    justify-items: start;
  }

  .claim-spotlight-actions .primary-button,
  .claim-share-button {
    width: 100%;
    justify-content: center;
  }

  .performer-modal {
    padding: 26px 18px;
    border-radius: 20px;
  }

  .performer-hero {
    grid-template-columns: 52px 1fr;
    gap: 12px;
  }

  .performer-mark {
    width: 52px;
    height: 52px;
    font-size: 14px;
  }

  .performer-hero h2 {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  body.intro-active {
    overflow: auto;
  }

  .brand-intro {
    display: none;
  }
}

/* Performer verification */
.performer-verify-entry {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.performer-verify-entry strong {
  display: block;
  font-size: 0.92rem;
}

.performer-verify-entry span {
  display: block;
  font-size: 0.82rem;
  opacity: 0.75;
}

.performer-verify-entry button {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: #262a38;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.form-error {
  min-height: 1.1em;
  margin: 10px 0 0;
  color: #f08b72;
  font-size: 0.85rem;
}

.admin-record-link {
  font-size: 0.8rem;
  text-decoration: underline;
  color: inherit;
  opacity: 0.85;
}

#performerVerifiedTag {
  vertical-align: middle;
  margin-left: 6px;
}

.venue-slot-month {
  grid-column: 1 / -1;
  margin: 6px 0 -2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.venue-schedule-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.venue-schedule-nav .calendar-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.venue-month-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.venue-month-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.venue-month-chip i {
  font-style: normal;
  font-weight: 700;
  opacity: 0.7;
}

.venue-month-chip.active {
  background: var(--green);
  color: #fff;
  border-color: transparent;
}

.venue-schedule-nav[hidden] {
  display: none;
}

.fan-lineup-card {
  cursor: default;
}

.fan-lineup-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.fan-lineup-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.fan-lineup-list li strong {
  color: var(--ink);
  font-weight: 600;
}

.fan-lineup-performer {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.fan-lineup-list li .fan-lineup-performer span {
  color: var(--pulse-cyan);
  font-size: 11px;
  white-space: nowrap;
}

.fan-lineup-performer:hover,
.fan-lineup-performer:focus-visible {
  color: var(--pulse-cyan);
  text-decoration: underline;
}

.fan-lineup-list li span {
  color: var(--ink-soft);
  white-space: nowrap;
}

.fan-lineup-empty {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.fan-lineup-artists {
  margin-top: 10px;
}

.fan-lineup-artists small {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.fan-lineup-artists .event-tags button.fan-lineup-artist {
  border: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}

.fan-lineup-artists .event-tags button.fan-lineup-artist:hover,
.fan-lineup-artists .event-tags button.fan-lineup-artist:focus-visible {
  border-color: var(--pulse-cyan);
  color: var(--pulse-cyan);
}

/* Venue search results: the whole card opens the venue lineup modal. */
.fan-lineup-card {
  cursor: pointer;
}

.fan-lineup-card:focus-visible {
  outline: 2px solid var(--pulse-cyan);
  outline-offset: 2px;
}

.venue-result-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pulse-cyan);
  color: var(--pulse-cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}

.fan-lineup-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--pulse-cyan);
  font-size: 13px;
  font-weight: 600;
}

.fan-lineup-open span {
  transition: transform 0.15s ease;
}

.fan-lineup-card:hover .fan-lineup-open span,
.fan-lineup-card:focus-visible .fan-lineup-open span {
  transform: translateX(3px);
}

/* Venue lineup modal — a fan's answer to "what's happening at this spot?" */
.venue-lineup-modal {
  width: min(560px, calc(100vw - 32px));
}

#venueLineupMeta {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.venue-lineup-body {
  margin-top: 14px;
}

.venue-modal-offerings[hidden] {
  display: none;
}

.venue-extra-offerings {
  margin: 14px 0;
}

.venue-extra-offerings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.venue-extra-offerings-head h3 {
  margin: 0;
  color: var(--green-2);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.venue-extra-offerings-head > span {
  color: var(--ink-soft);
  font-size: 10px;
  text-align: right;
}

.venue-offering-cards {
  display: grid;
  gap: 9px;
}

.venue-offering-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.venue-offering-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(232, 98, 58, 0.35);
  border-radius: 11px;
  color: var(--green-2);
  background: rgba(232, 98, 58, 0.12);
}

.venue-offering-icon svg {
  width: 19px;
  height: 19px;
}

.venue-offering-copy {
  flex: 1;
  min-width: 0;
}

.venue-offering-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.venue-offering-title h4 {
  margin: 1px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14px;
}

.venue-offering-title > span {
  flex: none;
  padding: 3px 8px;
  border: 1px solid rgba(232, 180, 77, 0.3);
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(232, 180, 77, 0.12);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.venue-offering-copy p {
  margin: 5px 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.venue-offering-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green-2);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.venue-offering-action.is-note {
  border-style: dashed;
  color: var(--ink-soft);
}

.venue-lineup-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.venue-lineup-empty,
.venue-lineup-error {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.venue-lineup-empty strong,
.venue-lineup-error strong {
  color: var(--ink);
  font-size: 14px;
}

.venue-lineup-empty span,
.venue-lineup-error span {
  color: var(--ink-soft);
  font-size: 13px;
}

.venue-lineup-error .empty-broaden {
  justify-self: start;
  margin-top: 6px;
}

.venue-lineup-count {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.venue-lineup-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: grid;
  gap: 8px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
}

.venue-lineup-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.venue-lineup-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.venue-lineup-icon.music {
  color: var(--pulse-cyan);
}

.venue-lineup-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.venue-lineup-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.venue-lineup-text strong {
  color: var(--ink);
  font-size: 14px;
}

.venue-lineup-text .fan-lineup-performer {
  font-size: 14px;
}

.venue-lineup-text > span {
  color: var(--ink-soft);
  font-size: 13px;
}

.venue-lineup-text .event-source {
  font-size: 12px;
}

.venue-lineup-kind {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.venue-lineup-entry.kind-open {
  border-style: dashed;
}

.venue-lineup-entry.kind-open strong {
  color: var(--ink-soft);
  font-weight: 600;
}

@media (max-width: 480px) {
  .venue-extra-offerings-head,
  .venue-offering-title {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Narrow screens: the kind chip squeezed the text column into hard wraps,
     so switch to a two-column grid — icon | text on the first row, the chip
     tucked under the text on its own row. */
  .venue-lineup-entry {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: start;
  }

  .venue-lineup-kind {
    grid-column: 2;
    justify-self: start;
  }
}

.empty-cta-note {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink);
}

.empty-get-listed {
  margin-top: 12px;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font: 700 12px var(--font-display);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.empty-get-listed:hover,
.empty-get-listed:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.new-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--coral);
}

.notification-dot {
  display: none;
}

.notification-dot.is-active {
  display: block;
}

.alerts-modal {
  width: min(480px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 26px 24px 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.alerts-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
}

.alerts-modal h2 {
  margin: 6px 0 4px;
}

.alerts-intro {
  margin: 0 0 14px;
  color: var(--ink-soft, #667);
  font-size: 0.88rem;
}

.alerts-empty {
  margin: 0;
  padding: 18px 14px;
  border: 1px dashed var(--line, #ddd);
  border-radius: 12px;
  color: var(--ink-soft, #667);
  font-size: 0.9rem;
}

.alerts-fresh-note {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--coral);
}

.alerts-fresh-note.quiet {
  color: var(--ink-soft, #889);
  font-weight: 500;
}

.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border: 1px solid var(--line, #e5e5ea);
  border-radius: 12px;
  margin-bottom: 8px;
}

.alert-row.fresh {
  border-color: var(--coral);
  box-shadow: 0 0 0 1px var(--coral) inset;
}

.alert-row.quiet {
  opacity: 0.72;
}

.alert-row .event-art {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.alert-row > div:not(.event-art) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.alert-row strong {
  font-size: 0.92rem;
}

.alert-row span {
  font-size: 0.78rem;
  color: var(--ink-soft, #667);
}

.alert-row .new-tag {
  margin-left: auto;
}

.ai-populate-button[hidden] {
  display: none;
}

.ai-populate-button.working {
  opacity: 0.6;
  pointer-events: none;
}

.password-input-wrap {
  position: relative;
  display: block;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
}

.password-input-wrap input {
  padding-right: 46px !important;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fog-dim);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: rgba(232, 98, 58, 0.12);
  color: var(--green-2);
  outline: 0;
}

.password-toggle svg {
  width: 19px;
  height: 19px;
}

.password-toggle .eye-off-line {
  display: none;
}

.password-toggle.is-visible .eye-off-line {
  display: block;
}

.admin-forgot-link {
  justify-self: center;
  font-size: 13px;
  font-weight: 700;
}

.admin-forgot-steps {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.admin-forgot-steps > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1b1e2b;
}

.admin-forgot-steps strong {
  font-size: 13.5px;
}

.admin-forgot-steps span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fog-dim);
}

/* Admin Center · market & source registry (superuser) */
.admin-registry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
}

.admin-registry-toolbar select {
  flex: 1 1 240px;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(31, 41, 51, 0.18);
  font: inherit;
  background: #fff;
}

.admin-registry-card {
  align-items: flex-start;
}

.admin-registry-meta {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

/* Each kind of info (place, health, notes) reads as its own line.
   .admin-setting-card span would turn every nested span into a block, so
   the short facts re-declare inline and stay unbreakable — narrow screens
   then wrap phrase-by-phrase instead of one word per line. */
.admin-registry-meta .registry-line {
  display: block;
  margin-top: 3px;
}

.admin-registry-meta .registry-line:first-child {
  margin-top: 0;
}

.admin-registry-meta .registry-bit {
  display: inline;
  white-space: nowrap;
}

.admin-registry-meta .registry-line-notes {
  font-style: italic;
  opacity: 0.85;
}

/* "What reached fans / what is waiting / what to do next" — the one line
   that answers why a successful fetch shows nothing publicly. It carries
   sentences, so it wraps freely (no nowrap bits) with a hairline above. */
.admin-registry-meta .registry-line-publication {
  padding-top: 4px;
  margin-top: 5px;
  border-top: 1px dashed rgba(127, 140, 160, 0.35);
}

.admin-registry-meta .registry-line-publication .registry-bit {
  white-space: normal;
}

.admin-registry-meta .registry-next-step {
  display: inline;
}

.seed-source-scope {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #9d8cff;
  border-radius: 6px;
  background: rgba(157, 140, 255, 0.1);
  font-size: 0.86rem;
}

.seed-hold-reasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.seed-badge.seed-badge-hold { background: #fff4e0; color: #8a5a00; border: 1px solid rgba(138, 90, 0, 0.25); }

.admin-registry-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-url-editor {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

/* display:flex above would defeat the hidden attribute without this. */
.admin-url-editor[hidden] {
  display: none;
}

.admin-url-editor input {
  flex: 1 1 260px;
  min-width: 0;
}

.admin-url-editor-status {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--pulse-cyan);
}

.admin-trusted-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(77, 232, 255, 0.28);
  border-radius: 100px;
  color: var(--pulse-cyan);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.admin-trusted-toggle input {
  width: 12px;
  height: 12px;
  accent-color: var(--pulse-cyan);
  cursor: pointer;
}

.admin-registry-controls select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(31, 41, 51, 0.18);
  font: inherit;
  background: #fff;
}

.admin-registry-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  background: rgba(214, 158, 46, 0.16);
  color: #9a6b12;
}

/* Phones and small tablets: side-by-side, the controls column squeezes the
   text into a one-word-per-line sliver — stack it below the info block and
   let the controls wrap left-aligned at full card width. Applies to EVERY
   .admin-setting-card view (registry, seeding queue, reports, audit,
   settings), not just the Sources cards where the bug first showed. */
@media (max-width: 760px) {
  .admin-setting-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .admin-setting-card .admin-registry-controls,
  .admin-setting-card .seed-audit-actions {
    justify-content: flex-start;
  }

  /* The market card's ingestion switch sits in what was the right-hand
     column; once stacked, keep it flush left instead of stretched. */
  .admin-setting-card > .admin-switch {
    justify-self: start;
  }
}

.admin-user-form .admin-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* The form's generic `input { width: 100% }` rule stretches the checkbox
   across the row and shoves its label text to the far edge. */
.admin-user-form .admin-check input {
  width: auto;
  flex: 0 0 auto;
}

.admin-user-form .admin-check > span {
  margin-bottom: 0;
}

/* --- Seeded-listing attribution + public report ---------------------------- */

.calendar-detail-attribution {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
}

.booking-detail-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.booking-detail-actions .ghost-button {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.booking-detail-actions .ghost-button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.booking-detail-actions [data-booking-cancel] {
  border-color: rgba(178, 34, 34, 0.45);
  color: #a02020;
}

.calendar-detail-attribution .attribution-line {
  margin: 0;
  font-size: 0.85rem;
  color: var(--fog-white);
}

.calendar-detail-attribution .attribution-line a {
  color: var(--pulse-cyan);
  text-decoration: none;
}

.calendar-detail-attribution .attribution-line a:hover {
  text-decoration: underline;
}

.calendar-detail-attribution small {
  color: var(--fog-dim);
  font-size: 0.72rem;
}

.event-report-link {
  justify-self: start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fog-dim);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.event-report-link:hover {
  color: var(--signal-orange);
}

.event-report-modal {
  width: min(92vw, 520px);
  padding: 34px;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.event-report-modal::backdrop {
  background: rgba(6, 7, 12, 0.72);
  backdrop-filter: blur(6px);
}

.event-report-heading h2 {
  margin: 4px 0 6px;
  font-size: 26px;
  letter-spacing: -1px;
}

.event-report-heading p {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.event-report-modal form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.event-report-modal form label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.event-report-modal form input,
.event-report-modal form select,
.event-report-modal form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #171a26;
  font: inherit;
  font-size: 0.9rem;
}

.event-report-modal form textarea {
  resize: vertical;
}

.event-report-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(77, 232, 255, 0.08);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.event-report-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Superuser seeding view ------------------------------------------------ */

.seed-paste-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #171a26;
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

.seed-paste-form .seed-paste-text {
  grid-column: 1 / -1;
}

.seed-paste-form input[type="file"] {
  padding: 9px 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.seed-candidate-card {
  display: grid;
  /* Beat the 2-column template inherited from .admin-setting-card — these
     cards stack their topline, fields, source line, and actions vertically. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.seed-candidate-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.seed-queue-filters,
.seed-cleanup-panel {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.seed-queue-filters label,
.seed-cleanup-panel label {
  display: grid;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.seed-queue-filters input,
.seed-queue-filters select,
.seed-cleanup-panel input,
.seed-cleanup-panel select {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: #171a26;
  font: inherit;
}

.seed-cleanup-panel > div:first-child {
  display: grid;
  gap: 4px;
  margin-right: auto;
}

.seed-cleanup-preview {
  flex-basis: 100%;
  padding: 12px;
  border-left: 3px solid #f0b44d;
  background: rgba(240, 180, 77, 0.08);
}

.seed-cleanup-preview p {
  margin: 6px 0;
  line-height: 1.45;
}

.seed-cleanup-preview form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.seed-cleanup-preview form input {
  flex: 1 1 260px;
}

.admin-inline-link {
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.seed-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.seed-candidate-grid label {
  display: grid;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  /* Prevent datetime inputs (intrinsic ~200px) from overflowing the card.
     min-width:0 lets the grid column compress below the input's natural size;
     width:100% on the input then fills the constrained cell. */
  min-width: 0;
}

.seed-candidate-grid input,
.seed-candidate-grid select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: #171a26;
  font: inherit;
  font-size: 0.84rem;
}

.seed-duplicate-flag {
  padding: 10px 12px;
  border: 1px solid rgba(232, 98, 58, 0.4);
  border-radius: 10px;
  background: rgba(232, 98, 58, 0.1);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

.seed-candidate-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seed-run-summary .admin-registry-meta {
  line-height: 1.6;
}

.seed-preview-table,
.seed-runs-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.seed-preview-table th,
.seed-runs-table th {
  padding: 7px 9px;
  text-align: left;
  color: var(--ink-soft);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.seed-preview-table td,
.seed-runs-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.seed-runs-table-wrap {
  overflow-x: auto;
}

.seed-run-capped,
.seed-run-failed {
  color: #f08b72;
  font-weight: 600;
}

.seed-run-completed {
  color: #7ce0a3;
  font-weight: 600;
}

.seed-suppress-form {
  margin-top: 6px;
}

/* --- Feed ingestion & precedence review (task: feeds + dedup + scheduling) --- */
.seed-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(31, 41, 51, 0.18);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(31, 41, 51, 0.72);
  vertical-align: middle;
  white-space: nowrap;
}
.seed-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
/* Doubled class selectors on purpose: .admin-setting-card span (dark theme)
   otherwise outranks these and paints light text onto the light pills. */
.seed-badge.seed-badge-cancel { background: #fdecea; color: #b3261e; }
.seed-badge.seed-badge-conflict { background: #fef3dc; color: #8a5a00; }
.seed-badge.seed-badge-superseded { background: #eceff1; color: #5b6770; }
.seed-badge.seed-badge-dateonly { background: #e8f0fe; color: #1a4fa0; }
.seed-badge.seed-badge-origin { border: 1px solid currentColor; }
.seed-badge.seed-badge-origin-automatic { background: #e6f4ea; color: #1e6f3e; }
.seed-badge.seed-badge-origin-admin_import { background: #e8f0fe; color: #1a4fa0; }
.seed-badge.seed-badge-origin-member { background: #f4e8ff; color: #70409a; }
.admin-setting-card .seed-badge {
  display: inline-block;
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.5;
}
.seed-accuracy-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.seed-accuracy-step {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef3dc;
  color: #8a5a00;
  font-size: 0.8rem;
  white-space: nowrap;
}
.seed-accuracy-step.seed-accuracy-clean { background: #e6f4ea; color: #1e6f3e; }
.seed-accuracy-arrow { color: #9aa3ab; font-size: 0.8rem; }
.seed-candidate-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.seed-candidate-superseded { opacity: 0.62; }
.seed-candidate-superseded input,
.seed-candidate-superseded select { background: transparent; }
.seed-health-bad { color: #b3261e; font-weight: 600; }

/* Embedded previews block window.confirm/prompt, so review decisions use
   explicit inline confirmation and note rows. Errors stay beside the action
   instead of appearing only in the Admin Center banner. */
.seed-note-form,
.seed-confirm-form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* display:flex above would defeat the hidden attribute without this. */
.seed-note-form[hidden],
.seed-confirm-form[hidden] {
  display: none;
}

.seed-note-form input {
  flex: 1 1 260px;
  min-width: 0;
}

.admin-setting-card .seed-confirm-form > span {
  display: inline;
  flex: 1 1 260px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.seed-card-error {
  grid-column: 1 / -1;
  display: block;
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b3261e;
}

.seed-card-error[hidden] {
  display: none;
}

.seed-field-error {
  border-color: #b3261e !important;
  box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.18);
}

#adminCenterContent [data-armed="true"] {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}
.seed-health-ok { color: #4caf7d; font-weight: 600; }
.seed-health-warn { color: #b07d00; font-weight: 600; }
.seed-health-silent { color: #e8a13c; font-weight: 600; }
.seed-needs-url { color: #f2b35b; font-weight: 600; }
.seed-manual-note { color: var(--pulse-cyan); font-weight: 600; }
/* Standing-entertainment sources: violet = "healthy, nothing to fetch", so it
   never reads as the amber "needs schedule URL" action state. The quarterly
   recheck reminder uses the sweep-due amber, not the needs-url amber. */
.seed-chip-standing { background: rgba(124, 108, 255, 0.16); border-color: rgba(157, 140, 255, 0.5); color: #b6a8ff; }
.seed-standing-note { color: #9d8cff; font-weight: 600; }
.seed-standing-due { color: #e8a13c; font-weight: 600; }

/* .admin-setting-card turns strong/span into blocks; chips and inline health
   highlights inside registry cards must flow with the surrounding text. */
.admin-registry-card .seed-chip {
  display: inline-block;
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ink-soft);
}

.admin-registry-meta strong {
  display: inline;
  font-size: inherit;
}
.seed-sweep-card.seed-sweep-due { border-left: 3px solid #e8a13c; }
#seedQueueFilter, #adminRegistrySortSelect {
  align-self: flex-start;
  flex-shrink: 0;
}

/* One Inbox admin redesign */
.admin-type-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--cyan, #4de8ff);
  background: rgba(77, 232, 255, 0.12);
  border: 1px solid rgba(77, 232, 255, 0.25);
}

.admin-type-badge.kind-venue {
  color: #e8b44d;
  background: rgba(232, 180, 77, 0.12);
  border-color: rgba(232, 180, 77, 0.25);
}

.admin-type-badge.kind-food_truck {
  color: var(--coral, #e8623a);
  background: rgba(232, 98, 58, 0.12);
  border-color: rgba(232, 98, 58, 0.25);
}

.admin-type-badge.kind-musician {
  color: #a894ff;
  background: rgba(123, 97, 255, 0.14);
  border-color: rgba(123, 97, 255, 0.3);
}

.admin-type-badge.kind-claim,
.admin-type-badge.kind-performer {
  color: #a894ff;
  background: rgba(123, 97, 255, 0.14);
  border-color: rgba(123, 97, 255, 0.3);
}

.admin-origin {
  margin: 4px 0 0;
  color: var(--fog-dim);
  font-size: 13px;
  line-height: 1.5;
}

.admin-origin-place {
  color: var(--fog);
}

.admin-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.admin-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--fog-dim);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-chip span {
  padding: 1px 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}

.admin-chip.active {
  color: #0a0b10;
  background: var(--cyan, #4de8ff);
  border-color: var(--cyan, #4de8ff);
}

.admin-chip.active span {
  background: rgba(10, 11, 16, 0.2);
}

.admin-subnav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.admin-subnav button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--fog-dim);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.admin-subnav button.active {
  color: var(--green);
  background: rgba(232, 98, 58, 0.12);
  border-color: transparent;
}

.admin-seed-note {
  margin: 10px 0 0;
  color: #e8b44d;
  font-size: 13px;
  font-weight: 700;
}

.admin-edit-note {
  margin: 6px 0 0;
  color: #e8b44d;
  font-size: 13px;
  font-weight: 600;
}

.admin-seed-note-link {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}

/* "What's waiting" banner at the top of Feed & seeding */
.seed-summary {
  margin: 4px 0 18px;
  padding: 18px;
  border: 1px solid rgba(232, 180, 77, 0.35);
  border-radius: 14px;
  background: rgba(232, 180, 77, 0.07);
  display: grid;
  gap: 14px;
}

.seed-summary-clear {
  border-color: var(--line);
  background: var(--glass);
}

.seed-summary-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.seed-summary-count {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #e8b44d;
}

.seed-summary-clear .seed-summary-count {
  color: var(--fog-dim);
}

.seed-summary-copy {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 180px;
}

.seed-summary-copy strong {
  font-size: 15px;
}

.seed-summary-copy span {
  color: var(--fog-dim);
  font-size: 13px;
}

.seed-summary-copy .seed-summary-ai-queue {
  color: #d99a2b;
}

.seed-summary-jump {
  min-height: 40px;
}

.seed-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  counter-reset: seedflow;
}

.seed-flow li {
  counter-increment: seedflow;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 11, 16, 0.35);
  font-size: 12px;
  color: var(--fog-dim);
}

.seed-flow li::before {
  content: counter(seedflow);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(232, 180, 77, 0.18);
  color: #e8b44d;
  font-weight: 800;
  font-size: 11px;
}

.seed-flow li strong {
  color: var(--ink);
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .seed-flow {
    grid-template-columns: 1fr;
  }

  .seed-summary-jump {
    width: 100%;
  }

  /* Side-by-side heading + control squeezes the text into a skinny column
     on phones — stack them instead. The toolbar (All listings, Ownership
     claims, Performer verifications) squeezes the same way. */
  .admin-section-heading,
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-section-heading select,
  .admin-section-heading .secondary-button,
  .admin-toolbar select,
  .admin-toolbar .secondary-button {
    width: 100%;
  }
}

/* Role explainers + broaden-search empty state */
.role-explainer {
  margin: 6px 0 10px;
  font-size: 0.92rem;
  color: rgba(235, 240, 255, 0.62);
  max-width: 52ch;
  line-height: 1.45;
}

.empty-events .empty-broaden {
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid rgba(77, 232, 255, 0.45);
  border-radius: 999px;
  background: rgba(77, 232, 255, 0.1);
  color: #4de8ff;
  font: 600 0.9rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.empty-events .empty-broaden:hover {
  background: rgba(77, 232, 255, 0.2);
  transform: translateY(-1px);
}

/* --- Last-minute fill-in alerts -------------------------------------------- */

.calendar-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fillin-post-button {
  padding: 10px 16px;
  border: 1px solid rgba(232, 180, 77, 0.5);
  border-radius: 999px;
  background: rgba(232, 180, 77, 0.12);
  color: #e8b44d;
  font: 600 0.9rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fillin-post-button:hover {
  background: rgba(232, 180, 77, 0.22);
  transform: translateY(-1px);
}

.opening-modal {
  width: min(560px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 26px 24px 22px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.opening-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
}

.opening-modal h2 {
  margin: 6px 0 4px;
}

.opening-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.opening-modal form label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

.opening-modal form label span {
  font-weight: 600;
}

.opening-modal form input,
.opening-modal form select,
.opening-modal form textarea {
  padding: 9px 12px;
  border: 1px solid var(--line, #ddd);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.opening-modal .full-field {
  margin-bottom: 12px;
}

.opening-modal .form-error {
  min-height: 1.1em;
  margin: 0 0 10px;
  color: #e8623a;
  font-size: 0.85rem;
}

.venue-openings {
  margin-top: 20px;
  border-top: 1px solid var(--line, #ddd);
  padding-top: 14px;
}

.venue-openings h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.venue-opening-row {
  padding: 12px 14px;
  border: 1px solid var(--line, #ddd);
  border-radius: 12px;
  margin-bottom: 10px;
}

.venue-opening-row.status-filled { opacity: 0.75; }
.venue-opening-row.status-expired { opacity: 0.55; }

.venue-opening-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.opening-status {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4de8ff;
}

.venue-opening-row.status-filled .opening-status { color: #7be87b; }
.venue-opening-row.status-expired .opening-status { color: var(--ink-soft, #667); }

.opening-responders {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.opening-responders li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
}

.opening-fill-button {
  padding: 6px 12px;
  border: 1px solid rgba(123, 232, 123, 0.5);
  border-radius: 999px;
  background: rgba(123, 232, 123, 0.1);
  color: #7be87b;
  font: 600 0.8rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
}

.opening-fill-button.quiet {
  margin-top: 10px;
  border-color: var(--line, #ddd);
  background: transparent;
  color: var(--ink-soft, #667);
}

.opening-no-replies {
  margin: 8px 0 0;
  color: var(--ink-soft, #667);
  font-size: 0.85rem;
}

.fillin-alerts-section {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #ddd);
}

.fillin-alerts-section h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.fillin-alerts-section .ghost-button,
.fillin-alerts-section #fillinOptinCta {
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(77, 232, 255, 0.45);
  border-radius: 999px;
  background: rgba(77, 232, 255, 0.1);
  color: #4de8ff;
  font: 600 0.85rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
}

.fillin-respond-button {
  align-self: center;
  padding: 7px 13px;
  border: 1px solid rgba(232, 180, 77, 0.55);
  border-radius: 999px;
  background: rgba(232, 180, 77, 0.12);
  color: #e8b44d;
  font: 600 0.8rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.new-tag.responded {
  background: rgba(123, 232, 123, 0.15);
  color: #7be87b;
}

.new-tag.cancelled-tag {
  background: rgba(232, 123, 123, 0.15);
  color: #e87b7b;
}

.fillin-cancelled-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  align-self: center;
}

.fillin-dismiss-button {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 0.75rem/1 'Space Grotesk', 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.fillin-row.cancelled {
  opacity: 0.85;
}

.fillin-cancelled-note {
  display: block;
  color: #e87b7b !important;
  font-weight: 600;
}

.fillin-optin-block {
  border: 1px solid var(--line, #ddd);
  border-radius: 12px;
  padding: 12px 14px;
}

.fillin-optin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

/* Your submissions (listing submit modal) */
.my-submissions {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.my-submissions h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.my-submissions-note {
  margin: 0;
  color: var(--fog-dim);
  font-size: 12px;
}

.my-submission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.my-submission-row:last-child {
  border-bottom: 0;
}

.my-submission-row strong {
  display: block;
  font-size: 13px;
}

.my-submission-row small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--fog-dim);
}

.my-submission-row.status-published small {
  color: var(--pulse-cyan);
}

.my-submission-row.status-pending small {
  color: #e8b44d;
}

.claim-code-value {
  display: inline-block;
  padding: 8px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.claim-code-form {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.claim-code-form label {
  flex: 1 1 200px;
  display: grid;
  gap: 5px;
}

.claim-code-form label span {
  font-size: 11px;
  color: var(--fog-dim);
}

.claim-code-form input {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-family: 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.claim-code-form .account-error {
  flex-basis: 100%;
}

.submission-remove-button {
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1px solid rgba(232, 98, 58, 0.5);
  border-radius: 8px;
  background: rgba(232, 98, 58, 0.1);
  color: #e8623a;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.submission-remove-button:hover {
  background: rgba(232, 98, 58, 0.2);
}

/* --- Accuracy audit (admin seeding "Check accuracy" mode) --- */
.seed-audit-summary strong {
  color: var(--gold, #e8b44d);
}

.seed-audit-bucket {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.seed-audit-bucket::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
}

.seed-audit-bucket-matched::before { background: #4de8ff; }
.seed-audit-bucket-missing::before { background: #e8b44d; }
.seed-audit-bucket-conflict::before { background: #e8623a; }

.seed-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.seed-audit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(77, 232, 255, 0.18);
  border-radius: 10px;
  background: rgba(77, 232, 255, 0.05);
  font-size: 0.9rem;
}

.seed-audit-row span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}

.seed-audit-card {
  border-left: 3px solid #e8b44d;
}

.seed-audit-card.seed-audit-conflict {
  border-left-color: #e8623a;
}

.seed-audit-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.seed-audit-done {
  color: #4de8ff;
  font-size: 0.85rem;
  white-space: nowrap;
}

.seed-audit-done.seed-audit-dismissed {
  color: rgba(255, 255, 255, 0.55);
}

/* --- Venue owner tracking: real calendar, bookings, pitch inbox ------------ */

.venue-calendar-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(196, 149, 71, 0.35);
  background: rgba(196, 149, 71, 0.12);
  font-size: 0.86rem;
  line-height: 1.45;
}

.venue-calendar-notice strong {
  font-size: 0.9rem;
}

.venue-calendar-notice span {
  flex: 1 1 240px;
  opacity: 0.85;
}

.venue-calendar-notice .ghost-button {
  flex: 0 0 auto;
}

.pitch-status.booked i {
  background: #2e9e63;
}

.pitch-status.passed {
  opacity: 0.72;
}

.pitch-status.passed i {
  background: #9a9a9a;
}

.pitch-note {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.045);
  font-size: 0.83rem;
  line-height: 1.45;
  opacity: 0.9;
}

.venue-pitch-section h3 {
  margin: 6px 0 10px;
}

.venue-pitch-row {
  align-items: flex-start;
}

.venue-pitch-note {
  font-style: italic;
  opacity: 0.85;
}

.venue-pitch-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.venue-pitch-actions .ghost-button {
  padding: 8px 14px;
  font-size: 0.8rem;
}

/* Task #294 venue inbox: private lanes + tier badges + the pitch bar. */
.venue-pitch-lane-title {
  margin: 14px 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.pitch-tier-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  vertical-align: 2px;
}

.venue-pitch-min-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.82rem;
  opacity: 0.9;
}

.venue-pitch-min-tier select {
  flex: 0 1 auto;
  padding: 6px 10px;
  border-radius: 10px;
}

.venue-pitch-privacy-note {
  margin: 12px 0 0;
  font-size: 0.75rem;
  opacity: 0.6;
}

.signup-credibility-note {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  line-height: 1.45;
  opacity: 0.65;
}

/* Task #296: silent reliability badge (venue inbox only) + admin board. */
.pitch-reliable-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #052e16;
  background: linear-gradient(120deg, #4ade80, #22c55e);
  vertical-align: middle;
}

.admin-reliability-actions-log {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-reliability-actions-log p {
  margin: 4px 0 0;
  font-size: 0.74rem;
  opacity: 0.75;
}

.pitch-endorsed-tag {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
  white-space: nowrap;
}

/* Task #295 evidence tiers: corner ribbon + numeric receipts (chosen combo).
   The ribbon folds across the popup's top-right corner; color deepens with
   the tier. Receipts are plain counts — no stars, no review text. */
.performer-tier-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.performer-tier-ribbon span {
  position: absolute;
  top: 34px;
  right: -44px;
  transform: rotate(45deg);
  display: block;
  width: 190px;
  padding: 6px 0;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, #6b7280, #4b5563);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.performer-tier-ribbon.tier-established span {
  background: linear-gradient(120deg, #2563eb, #1d4ed8);
}

.performer-tier-ribbon.tier-endorsed span {
  background: linear-gradient(120deg, #b45309, #d97706);
}

.performer-receipts[hidden] {
  display: none !important;
}

.performer-receipts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 4px;
}

.performer-receipts .receipt {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
}

.performer-receipts .receipt strong {
  display: block;
  font-size: 1.3rem;
  line-height: 1.2;
}

.performer-receipts .receipt span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 2px;
}

.performer-receipts .receipts-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.72rem;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .venue-calendar-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .venue-pitch-row {
    flex-wrap: wrap;
  }

  .venue-pitch-actions {
    flex-direction: row;
    width: 100%;
  }

  .venue-pitch-actions .fillin-respond-button,
  .venue-pitch-actions .ghost-button {
    flex: 1 1 auto;
  }
}

/* ----- Address lookup rows (admin listing editor + public submission) ----- */
.address-lookup-row {
  display: flex;
  gap: 8px;
}

.address-lookup-row input {
  flex: 1;
  min-width: 0;
}

.address-lookup-row .secondary-button {
  white-space: nowrap;
}

.address-lookup-status {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fog-dim);
}

.address-lookup-status.is-ok {
  color: var(--pulse-cyan);
}

.address-lookup-status.is-error {
  color: var(--signal-orange);
}

/* Public menu link on the listing focus modal (food trucks) */
.card-focus-menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent, #2f6f4f);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  width: fit-content;
}
.card-focus-menu:hover { opacity: 0.8; }
.card-focus-menu[hidden] { display: none; }

/* Happy-hours button on the listing focus modal */
.card-focus-happy-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-left: 12px;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent, #2f6f4f);
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  width: fit-content;
  transition: opacity 0.15s;
}
.card-focus-happy-hours:hover { opacity: 0.8; }
.card-focus-happy-hours[hidden] { display: none; }

/* Truck-facing venue pricing line on the listing focus modal (host venues
   on the food-truck rail): the range the owner chose to show, or the
   "Discuss privately" label — rendered only when the venue set it. */
.card-focus-truck-pricing {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-2);
  width: fit-content;
}
.card-focus-truck-pricing[hidden] { display: none; }

.card-focus-booking-rate,
.performer-booking-rate {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-2);
  width: fit-content;
}
.card-focus-booking-rate[hidden],
.performer-booking-rate[hidden] { display: none; }

/* Happy-hours display modal (fan view) */
.happy-hours-modal {
  width: min(94vw, 480px);
  border: 0;
  border-radius: 24px;
  padding: 32px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.happy-hours-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
  backdrop-filter: blur(5px);
}
.happy-hours-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.happy-hours-list li {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Happy-hours editor modal (venue owner) */
.happy-hours-editor-modal {
  width: min(94vw, 560px);
  border: 0;
  border-radius: 24px;
  padding: 32px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.happy-hours-editor-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
  backdrop-filter: blur(5px);
}

/* ----- Calendar-file import (upload → review → confirm) ----- */

.calendar-import-modal {
  width: min(94vw, 640px);
  max-height: min(90vh, 820px);
  overflow-y: auto;
  border: 0;
  border-radius: 24px;
  padding: 32px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.calendar-import-modal::backdrop {
  background: rgba(4, 5, 9, 0.7);
  backdrop-filter: blur(5px);
}

.calendar-import-modal h2 {
  margin: 6px 0 10px;
  font-size: 29px;
  letter-spacing: -1.3px;
}

.calendar-import-modal > p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.calendar-import-picker {
  position: relative;
  display: block;
  cursor: pointer;
}

.calendar-import-picker input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.calendar-import-picker-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed var(--glass-border);
  border-radius: 16px;
  background: var(--glass);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.calendar-import-picker:hover .calendar-import-picker-face,
.calendar-import-picker:focus-within .calendar-import-picker-face {
  border-color: var(--pulse-cyan);
  background: rgba(77, 232, 255, 0.06);
}

.calendar-import-picker-face strong {
  font-size: 15px;
}

.calendar-import-picker-face small {
  color: var(--ink-soft);
  font-size: 11px;
}

.calendar-import-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  color: var(--signal-orange);
  font-size: 12px;
}

.calendar-import-review {
  margin-top: 14px;
}

.calendar-import-review[hidden] {
  display: none;
}

.calendar-import-summary {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.calendar-import-summary strong {
  color: var(--ink);
}

.calendar-import-issues {
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(232, 98, 58, 0.4);
  border-radius: 10px;
  background: rgba(232, 98, 58, 0.08);
  font-size: 11.5px;
  color: var(--ink-soft);
}

.calendar-import-issues[hidden] {
  display: none;
}

.calendar-import-issues p {
  margin: 3px 0;
}

.calendar-import-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 44vh;
  overflow-y: auto;
  padding-right: 4px;
}

.cal-import-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass);
}

.cal-import-row.is-flagged {
  border-color: rgba(232, 98, 58, 0.45);
}

.cal-import-row.has-error {
  border-color: var(--signal-orange);
  box-shadow: 0 0 0 1px var(--signal-orange);
}

.cal-import-check {
  display: flex;
  align-items: center;
  padding-top: 9px;
  cursor: pointer;
}

.cal-import-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--pulse-cyan);
  cursor: pointer;
}

.cal-import-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cal-import-fields input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  color-scheme: dark;
}

.cal-import-fields input:focus {
  outline: 2px solid var(--pulse-cyan);
  outline-offset: 1px;
  border-color: transparent;
}

.cal-import-when {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
}

.cal-import-context {
  color: var(--ink-soft);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.cal-import-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cal-import-chip {
  padding: 3px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.cal-import-chip.warn {
  border-color: rgba(232, 98, 58, 0.5);
  background: rgba(232, 98, 58, 0.12);
  color: #f2a68c;
}

.cal-import-chip.info {
  border-color: rgba(77, 232, 255, 0.4);
  background: rgba(77, 232, 255, 0.08);
  color: var(--pulse-cyan);
}

.calendar-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Public card: booked dates from the member's own calendar upload */
.card-focus-dates {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

.card-focus-dates[hidden] {
  display: none;
}

.card-focus-dates-title {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-focus-dates ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.card-focus-dates li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.4;
}

.card-focus-dates li strong {
  color: var(--ink);
}

.card-focus-dates li em {
  font-style: normal;
  color: var(--ink-soft);
}

.card-focus-dates li span {
  color: var(--ink-soft);
  font-size: 11.5px;
}

@media (max-width: 560px) {
  .calendar-import-modal {
    padding: 22px 16px;
  }

  .cal-import-when {
    grid-template-columns: 1fr;
  }

  .calendar-import-actions {
    flex-direction: column-reverse;
  }

  .calendar-import-actions button {
    width: 100%;
  }
}

/* Account email + password reset (emailed single-use links). */
.auth-forgot-button { margin-top: 2px; }
.account-email-block {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass);
  text-align: left;
}
.account-email-status {
  font-size: 12.5px;
  color: var(--fog-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}
.account-email-status strong { color: var(--fog-white); }
.account-email-status .email-confirmed { color: #7ddf9a; font-weight: 600; }
.account-email-status .email-pending { color: #f3b45f; font-weight: 600; }
#accountEmailForm { display: flex; flex-direction: column; gap: 10px; }
#accountEmailForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--fog-dim);
  text-align: left;
}
#accountEmailForm input {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fog-white);
  padding: 11px 12px;
}
#accountEmailForm input:focus { outline: none; border-color: var(--pulse-cyan); }
#accountDeleteForm { display: flex; flex-direction: column; gap: 10px; }
#accountDeleteForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--fog-dim);
  text-align: left;
}
#accountDeleteForm input {
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--fog-white);
  padding: 11px 12px;
}
#accountDeleteForm input:focus { outline: none; border-color: rgba(255, 96, 96, 0.6); }
.reset-request-done {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(125, 223, 154, 0.35);
  border-radius: 12px;
  background: rgba(125, 223, 154, 0.08);
  color: #bfe9cb;
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Legal pages (/privacy, /terms) — static documents, no JS required ---- */
.legal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(123, 97, 255, 0.14), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(77, 232, 255, 0.1), transparent 55%),
    var(--void);
}
.legal-topbar {
  padding: 22px clamp(20px, 5vw, 48px);
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fog-white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.legal-brand:hover {
  color: var(--pulse-cyan);
}
.legal-wrap {
  width: min(760px, 100% - 40px);
  margin: 0 auto;
  padding: 12px 0 72px;
  flex: 1;
}
.legal-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--signal-orange);
  margin: 0 0 10px;
}
.legal-wrap h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 44px);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.legal-updated {
  color: var(--fog-dim);
  font-size: 14px;
  margin: 0 0 34px;
}
.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 21px;
  margin: 38px 0 10px;
  letter-spacing: -0.01em;
}
.legal-wrap p,
.legal-wrap li {
  color: rgba(237, 239, 245, 0.78);
  font-size: 15.5px;
  line-height: 1.65;
}
.legal-wrap p {
  margin: 0 0 14px;
}
.legal-wrap ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-wrap li {
  margin-bottom: 8px;
}
.legal-wrap li::marker {
  color: var(--signal-orange);
}
.legal-wrap a {
  color: var(--pulse-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-wrap a:hover {
  color: var(--role-accent-soft);
}
.legal-wrap strong {
  color: var(--fog-white);
}
.legal-callout {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.legal-callout p:last-child,
.legal-callout ul:last-child {
  margin-bottom: 0;
}
.legal-footer {
  border-top: 1px solid var(--glass-border);
  padding: 20px clamp(20px, 5vw, 48px) 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  color: var(--fog-dim);
  font-size: 13.5px;
}
.legal-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.legal-footer a {
  color: var(--fog-dim);
  text-decoration: none;
}
.legal-footer a:hover {
  color: var(--fog-white);
}

/* ---- Site footer on the main app shell ---- */
.site-footer {
  margin-top: 46px;
  padding: 22px 4px 10px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  color: var(--fog-dim);
  font-size: 13px;
}
.site-footer nav {
  display: flex;
  gap: 16px;
}
.site-footer a {
  color: var(--fog-dim);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--fog-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- "Install the app" footer button + instruction card ---- */
.install-app-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--fog-white);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--spring);
}
.install-app-button:hover {
  background: var(--glass-strong);
  transform: translateY(-1px);
}
.install-app-button svg {
  width: 15px;
  height: 15px;
  stroke: var(--pulse-cyan);
}
.install-app-button[hidden] {
  display: none !important;
}

.install-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--fog-white);
  font-size: 14px;
  line-height: 1.55;
}
.install-steps strong {
  color: var(--pulse-cyan);
}
.install-share-glyph {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  background: var(--glass);
  font-size: 13px;
  vertical-align: -5px;
}
.install-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  color: var(--fog-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.install-note[hidden] {
  display: none !important;
}

/* ---- Legal links inside the account dialogs ---- */
.auth-legal-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fog-dim);
}
.auth-legal-note a {
  color: var(--pulse-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Fan search: full-window notice + venue "this week" view (Task #189) ---- */
.search-scope-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(77, 232, 255, 0.25);
  border-radius: 14px;
  background: rgba(77, 232, 255, 0.07);
  font-size: 13px;
}
.search-scope-note svg { width: 16px; height: 16px; flex: none; stroke: var(--pulse-cyan); }
.search-scope-note span { flex: 1; line-height: 1.45; color: rgba(237, 239, 245, 0.75); }
.search-scope-note strong { color: var(--fog-white); }
.search-scope-clear {
  flex: none;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(77, 232, 255, 0.14);
  color: var(--pulse-cyan);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease);
}
.search-scope-clear:hover { background: rgba(77, 232, 255, 0.22); }
.venue-week-title {
  margin: 16px 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 239, 245, 0.45);
}
.venue-week-day { margin-bottom: 10px; }
.venue-week-day h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pulse-cyan);
}
.venue-week-day h4 .venue-week-date { font-size: 11px; font-weight: 500; color: rgba(237, 239, 245, 0.45); }
.venue-week-day.is-today h4 { color: var(--signal-orange); }
.venue-week-none { margin: 12px 0 4px; font-size: 12.5px; line-height: 1.5; color: rgba(237, 239, 245, 0.5); }

/* ============================================================
   Calendar color system — one meaning per color.
   Music violet, Food amber, Community teal; Saved keeps its
   category color plus a constant neutral ring; private schedule
   items (rehearsals, prep, open dates) go dim neutral; today is
   a neutral outline so coral stays reserved for the main action.
   These rules intentionally override the legacy category colors
   defined earlier in this file (same selectors, later cascade).
   ============================================================ */
:root {
  --cat-music: #8b6ff0;
  --cat-music-soft: rgba(139, 111, 240, 0.14);
  --cat-food: #e8963c;
  --cat-food-soft: rgba(232, 150, 60, 0.14);
  --cat-community: #4fd1a5;
  --cat-community-soft: rgba(79, 209, 165, 0.13);
  --cat-private: rgba(237, 239, 245, 0.38);
  --cat-private-soft: rgba(237, 239, 245, 0.05);
  --saved-ring: rgba(237, 239, 245, 0.92);
  --today-ring: rgba(237, 239, 245, 0.72);
  --calendar-line: rgba(255, 255, 255, 0.18);
}

/* Legend dots — the calendar and map keys share these classes. */
.band-key,
.music-dot { background: var(--cat-music); }
.truck-key,
.food-dot { background: var(--cat-food); }
.community-key,
.other-dot { background: var(--cat-community); }
.saved-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--saved-ring);
}

/* Map pins follow the same three category hues (venue pin keeps coral). */
.event-map-marker.music .event-map-marker-inner { background: var(--cat-music); }
.event-map-marker.food .event-map-marker-inner { background: var(--cat-food); }
.event-map-marker.other .event-map-marker-inner { background: var(--cat-community); }

/* Calendar grid lines get a touch more contrast (calendar-scoped var so
   the global --line consumers stay untouched). */
.calendar-grid { border-top-color: var(--calendar-line); }
.calendar-day {
  border-right-color: var(--calendar-line);
  border-bottom-color: var(--calendar-line);
}

/* Today is a neutral ring, never a coral fill — coral means "act here". */
.calendar-day.today .day-number {
  color: var(--fog-white);
  background: transparent;
  border: 1.5px solid var(--today-ring);
}

/* Desktop event pills — one hue family per category. */
.calendar-event {
  border-left: 2px solid var(--cat-music);
  color: #cbbdf7;
  background: var(--cat-music-soft);
}
.calendar-event.food {
  border-left-color: var(--cat-food);
  color: #f4c78e;
  background: var(--cat-food-soft);
}
.calendar-event.other {
  border-left-color: var(--cat-community);
  color: #a7e9d2;
  background: var(--cat-community-soft);
}
.calendar-event.private {
  border-left-color: var(--cat-private);
  color: rgba(237, 239, 245, 0.6);
  background: var(--cat-private-soft);
}
/* Saved = the member's own layer: neutral ring over the category color. */
.calendar-event.is-saved { box-shadow: inset 0 0 0 1.5px var(--saved-ring); }

/* Day-sheet rows use the same language. */
.calendar-day-item { border-left-color: var(--cat-music); background: var(--cat-music-soft); }
.calendar-day-item.food { border-left-color: var(--cat-food); background: var(--cat-food-soft); }
.calendar-day-item.other { border-left-color: var(--cat-community); background: var(--cat-community-soft); }
.calendar-day-item.private { border-left-color: var(--cat-private); background: var(--cat-private-soft); }
.calendar-day-item.is-saved { box-shadow: inset 0 0 0 1.5px var(--saved-ring); }

/* Detail modal: community gets its own teal hero, private goes neutral
   (the old cyan "saved" hero retires with the flat cyan), and a saved
   entry marks the icon with the same neutral ring. */
.calendar-detail-modal .calendar-detail-icon { background: var(--cat-music); }
.calendar-detail-modal.is-food .calendar-detail-icon { background: var(--cat-food); }
.calendar-detail-modal.is-other .calendar-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(79, 209, 165, 0.22), transparent 34%),
    linear-gradient(135deg, #17453a, #0d231e);
}
.calendar-detail-modal.is-other .calendar-detail-icon { background: var(--cat-community); }
.calendar-detail-modal.is-private .calendar-detail-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(237, 239, 245, 0.12), transparent 34%),
    linear-gradient(135deg, #2a2d38, #14161f);
}
.calendar-detail-modal.is-private .calendar-detail-icon { background: #aab1c4; color: #14161f; }
.calendar-detail-modal.has-saved-ring .calendar-detail-icon {
  box-shadow: 0 0 0 2.5px var(--saved-ring);
}

/* One filled action per screen: when a venue owner's "Add a booking" is
   visible it stays the filled primary, and this ghost variant demotes the
   generic calendar action to a same-size outline. */
.primary-button.ghost {
  background: transparent;
  border: 1px solid rgba(237, 239, 245, 0.32);
  color: var(--fog-white);
  box-shadow: none;
}
.primary-button.ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Phone: event bars become solid round dots that match the legend keys
   one-for-one; saved dots keep the neutral ring (drawn with a gap so it
   reads at 7px); private dots go dim neutral. */
@media (max-width: 760px) {
  .calendar-event {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 4px 3px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    vertical-align: top;
    background: var(--cat-music);
  }
  .calendar-event.food { background: var(--cat-food); }
  .calendar-event.other { background: var(--cat-community); }
  .calendar-event.private { background: var(--cat-private); }
  .calendar-event.is-saved {
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--saved-ring);
  }
}

/* Keep the max-three rule on phones: the dot override above is later in
   the cascade than the original overflow rule, so re-assert the hide here. */
@media (max-width: 760px) {
  .calendar-event.calendar-event-overflow { display: none; }
}

/* The primary-button display rule would otherwise beat the [hidden]
   attribute (same fix the venue modal uses), which left a dead
   "Add a booking" button visible to fans and role previews. */
.calendar-heading-actions [hidden] { display: none !important; }

/* ----- hidden-attribute audit fixes -----
   The hidden attribute silently loses to any author display rule, so every
   component that both (a) receives hidden from app.js/index.html and (b)
   declares its own display needs an explicit [hidden] override. These were
   found visible-while-hidden by the audit that tests/hidden-visibility.test.js
   now pins. Deliberate decision: the .primary-button and .text-button rules
   are GLOBAL because those shared button classes set display everywhere and
   no button anywhere should render while carrying hidden. */
.primary-button[hidden] { display: none !important; }
.text-button[hidden] { display: none !important; }
.venue-calendar-notice[hidden] { display: none !important; }
.calendar-detail-attribution[hidden] { display: none !important; }
.claim-code-form[hidden] { display: none !important; }

/* ── Owner's outreach list (Task #240) ──────────────────────────────────── */
.outreach-heading {
  align-items: flex-end;
  gap: 12px;
}

.outreach-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--fog-dim);
  margin-left: 8px;
}

.outreach-sort {
  display: flex;
  gap: 6px;
}

.outreach-sort button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--fog-dim);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.outreach-sort button.active {
  color: var(--fog-white);
  background: var(--glass-strong);
  border-color: transparent;
}

.outreach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}

.outreach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass);
}

.outreach-row.joined {
  opacity: 0.62;
}

.outreach-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 220px;
  flex: 1 1 240px;
}

.outreach-row-info strong {
  font-size: 14px;
  color: var(--fog-white);
}

.outreach-meta,
.outreach-contacts {
  font-size: 12px;
  color: var(--fog-dim);
}

.outreach-contacts a {
  color: var(--pulse-cyan);
}

.outreach-row-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 320px;
  justify-content: flex-end;
}

.outreach-row-controls select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--graphite);
  color: var(--fog-white);
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
}

.outreach-row-controls input[type="text"] {
  flex: 1 1 160px;
  min-width: 140px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--fog-white);
  font-size: 12px;
  padding: 0 10px;
}

.outreach-row-controls .ghost-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--fog-dim);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.outreach-row-controls .ghost-button:hover {
  color: var(--fog-white);
  border-color: var(--glass-border);
}

.outreach-joined-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(94, 201, 128, 0.14);
  color: #7ddf9c;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.outreach-changed {
  font-size: 11px;
  color: var(--fog-dim);
  white-space: nowrap;
}

.outreach-msg {
  font-size: 12px;
  color: #7ddf9c;
  min-width: 70px;
}

.outreach-msg.error {
  color: #ff8a7a;
}

@media (max-width: 720px) {
  .outreach-row-controls {
    justify-content: flex-start;
  }
}

/* Tiered claim verification (owner spec §12): tier/result line and flagged
   identity chip on admin claim cards. */
.admin-claim-verification {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--fog-dim);
}

.admin-claim-verification strong {
  font-weight: 800;
}

.admin-flag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  color: #f08b72;
  background: rgba(232, 98, 58, 0.14);
}

.admin-attempt-list {
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}

.admin-attempt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
  color: var(--fog-dim);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 10px;
}

/* ---- Admin Center → Listings → Lifecycle -------------------------------- */
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 96, 96, 0.5);
  border-radius: 12px;
  color: #ffb3b3;
  background: rgba(255, 96, 96, 0.14);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.danger-button:disabled,
.lifecycle-filters button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lifecycle-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin: 0 0 12px;
}

.lifecycle-filters select,
.lifecycle-filters input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: #1b1e2b;
  font: inherit;
  font-size: 12px;
}

.lifecycle-filters input[type="search"] {
  flex: 1 1 220px;
}

.lifecycle-filters label {
  display: grid;
  gap: 3px;
  color: var(--fog-dim);
  font-size: 10px;
  font-weight: 700;
}

.lifecycle-filters .secondary-button {
  min-height: 38px;
  padding: 0 14px;
}

.lifecycle-summary {
  margin: 0 0 12px;
  color: var(--fog-dim);
  font-size: 12px;
}

.lifecycle-summary strong {
  color: var(--ink);
}

.lifecycle-bulk-bar .admin-bulk-pick + .admin-bulk-pick {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.lifecycle-card .admin-record-meta {
  margin-top: 8px;
}

.lifecycle-type {
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.08);
}

.lifecycle-origin-human {
  color: #c9a6ff;
  background: rgba(150, 100, 255, 0.16);
  border-color: rgba(150, 100, 255, 0.45);
}

.lifecycle-origin-automated {
  color: #7fd3a1;
  background: rgba(60, 170, 110, 0.14);
  border-color: rgba(60, 170, 110, 0.45);
}

.lifecycle-origin-unknown {
  color: var(--fog-dim);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.lifecycle-venue {
  margin: 2px 0 0;
  color: var(--fog);
  font-size: 12px;
}

.lifecycle-source {
  margin-top: 4px;
}

.lifecycle-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lifecycle-warning {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.lifecycle-warning-info {
  color: #9ecbff;
  background: rgba(90, 160, 255, 0.14);
}

.lifecycle-warning-warn {
  color: #f0c060;
  background: rgba(240, 180, 77, 0.16);
}

.lifecycle-warning-danger {
  color: #ff9c9c;
  background: rgba(255, 96, 96, 0.16);
}

.lifecycle-retention,
.lifecycle-purge-note,
.lifecycle-receipt-reason {
  margin: 8px 0 0;
  color: var(--fog-dim);
  font-size: 11px;
  line-height: 1.45;
}

.lifecycle-retention.is-queued {
  color: #f0c060;
}

.lifecycle-receipt-reason {
  font-style: italic;
}

.lifecycle-preview {
  border-left-color: #ff7b7b;
  background: rgba(255, 96, 96, 0.07);
}

.lifecycle-preview-warning {
  color: #f0c060;
  font-weight: 700;
}

.lifecycle-preview-samples {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
}

.lifecycle-preview small {
  display: block;
  margin-top: 8px;
  color: var(--fog-dim);
}

.lifecycle-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--fog-dim);
  font-size: 12px;
}

.lifecycle-pager .secondary-button {
  min-height: 36px;
  padding: 0 14px;
}

.lifecycle-settings {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 24px;
}

.lifecycle-settings .admin-section-heading {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .lifecycle-settings {
    grid-template-columns: 1fr;
  }
}