* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-dark: #07110f;
  --bg-dark-2: #0b1720;
  --bg-panel: rgba(15, 23, 42, 0.78);
  --bg-panel-strong: rgba(15, 23, 42, 0.92);
  --bg-card: rgba(255, 255, 255, 0.075);
  --bg-card-hover: rgba(255, 255, 255, 0.115);
  --accent-green: #22c55e;
  --accent-green-strong: #16a34a;
  --accent-green-soft: rgba(34, 197, 94, 0.16);
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;
  --border-soft: rgba(148, 163, 184, 0.22);
  --border-green: rgba(134, 239, 172, 0.36);
  --shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.22);
  --radius-lg: 24px;
  --radius-md: 16px;
  --transition-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-med: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.22);
  --toast-bg: rgba(15, 23, 42, 0.94);
  --hover-lift: translateY(-2px);
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 22px;
  --space-xl: 28px;
  --line-height-tight: 1.15;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.65;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --space-2xs: 4px;
  --space-2xl: 36px;
  --shadow-focus: 0 0 0 3px rgba(34, 197, 94, 0.24);
  --status-open: #22c55e;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;
  --status-info: #38bdf8;
  --priority-a: #4ade80;
  --priority-b: #38bdf8;
  --priority-c: #a78bfa;
  --button-primary-bg: linear-gradient(135deg, #22c55e, #16a34a);
  --button-secondary-bg: rgba(15, 23, 42, 0.78);
  --button-danger-bg: rgba(239, 68, 68, 0.16);
}

html,
body {
  height: 100%;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

body.legal-page {

  min-height: 100%;

  overflow: auto;

  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 34%),
    #f9fafb;

  color: #111827;

}

#app {

  display: flex;

  width: 100%;

  height: calc(100vh - 120px);

  margin-top: 120px;

  overflow: hidden;

}
/* SIDEBAR */

#sidebar {

  width: 380px;

  min-width: 380px;

  background: white;

  border-right: 1px solid #e5e7eb;

  display: flex;

  flex-direction: column;

  height: 100%;

  transition: transform 0.3s ease;

  z-index: 1000;

}

/* TITLE */

.logo {
  font-size: 28px;
  margin-bottom: 20px;
}

/* SEARCH */

.search-container {
  margin-bottom: 20px;
}

#searchInput {
  width: 100%;

  padding: 14px 18px;

  border: 1px solid #d1d5db;

  border-radius: 14px;

  background: #f9fafb;

  color: #111;

  font-size: 15px;

  outline: none;
}

#searchInput:focus {
  border-color: #22c55e;
}

#searchInput::placeholder {
  color: #9ca3af;
}

/* FILTERS */

#filters {
  display: flex;
  gap: 10px;

  margin-bottom: 20px;

  flex-wrap: wrap;
}

.filter-chip {

  border: none;

  padding: 11px 16px;

  border-radius: 999px;

  background: #f3f4f6;

  color: #374151;

  cursor: pointer;

  transition: all 0.2s ease;

  font-size: 14px;

  font-weight: 500;

}

.filter-chip:hover {

  background: #e5e7eb;

}
.filter-chip.active {

  background: #ef4444;

  color: white;

}

/* EVENT CARD */

.event-card {
  background: white;

  border-radius: 18px;

  padding: 16px;

  margin-bottom: 14px;

  cursor: pointer;

  transition: 0.25s;

  border: 1px solid #e5e7eb;
}

.event-card:hover {

  transform:
    translateY(-4px)
    scale(1.01);

  border-color: #22c55e;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.08);

}

.event-title {
  font-size: 17px;
  font-weight: bold;

  margin-bottom: 8px;
}

.event-meta {
  font-size: 13px;

  color: #6b7280;

  margin-bottom: 8px;
}

.event-distance {
  display: inline-block;

  padding: 6px 10px;

  border-radius: 999px;

  background: #dcfce7;

  color: #166534;

  font-size: 12px;
  font-weight: bold;
}

.event-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.event-status-badge.confirmed {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.event-status-badge.registration-open {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.event-status-badge.registration-not-open {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

.event-status-badge.date-expected {
  background: #fef3c7;
  border-color: #facc15;
  color: #92400e;
}

.event-status-badge.sold-out,
.event-status-badge.cancelled {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.event-status-badge.unclear {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

/* MAP */

#map {

  flex: 1;

  width: 100%;

  height: 100%;

  z-index: 1;

}
.event-card.active {
  border: 2px solid #22c55e;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(34,197,94,0.15);
}

#sidebar-header {

  padding: 20px;

  border-bottom: 1px solid #f3f4f6;

  background: white;

}

#eventList {
  flex: 1;

  overflow-y: auto;

  padding: 20px;
}

#eventListToolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 14px 20px 0;

  background: white;

}

#eventListSummary {

  color: #6b7280;

  font-size: 13px;

  font-weight: 800;

}

#toggleEventListFullscreen,
#eventListPagination button {

  min-height: 36px;

  padding: 0 14px;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-size: 13px;

  font-weight: 800;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;

}

#toggleEventListFullscreen:hover,
#eventListPagination button:hover:not(:disabled) {

  border-color: #22c55e;

  background: white;

  color: #166534;

  transform:
    translateY(-1px);

}

#eventListPagination {

  display: none;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 0 20px 18px;

  background: white;

}

#eventListPagination button:disabled {

  cursor: not-allowed;

  opacity: 0.45;

}

.event-list-page-info {

  color: #374151;

  font-size: 13px;

  font-weight: 800;

}

body.event-list-fullscreen #app {

  display: block;

}

body.event-list-fullscreen #sidebar {

  width: 100%;

  min-width: 0;

  height: 100%;

  border-right: none;

}

body.event-list-fullscreen #sidebar.closed {

  margin-left: 0;

}

body.event-list-fullscreen #map,
body.event-list-fullscreen #floatingActions {

  display: none;

}

body.event-list-fullscreen #eventDrawer {

  position: fixed;

  top: 92px;

  right: 0;

  bottom: 0;

  z-index: 3500;

  display: block;

  box-shadow:
    -18px
    0
    40px
    rgba(15, 23, 42, 0.16);

}

body.event-list-fullscreen #eventDrawer.open {

  width:
    min(420px, 100vw);

}

body.event-list-fullscreen #sidebar-header {

  display: grid;

  grid-template-columns:
    minmax(180px, 220px)
    minmax(180px, 220px)
    minmax(360px, 460px);

  gap: 10px;

  align-items: stretch;

  padding:
    14px
    20px;

}

body.event-list-fullscreen #sortSelect,
body.event-list-fullscreen #dateFilter {

  width: 100%;

  height: 44px;

  margin-bottom: 0;

  padding:
    0
    14px;

}

body.event-list-fullscreen #dateRangeFilter {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: stretch;

  gap: 8px;

  max-width: 460px;

  margin-bottom: 0;

  padding: 10px;

  border-radius: 14px;

}

body.event-list-fullscreen .date-range-title {

  grid-column:
    1 / -1;

  align-self: start;

  padding: 0;

  white-space: nowrap;

}

body.event-list-fullscreen #dateRangeFilter label {

  gap: 4px;

}

body.event-list-fullscreen #dateRangeFilter input {

  height: 34px;

  padding:
    0
    9px;

  border-radius: 10px;

}

body.event-list-fullscreen .date-range-actions {

  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;

}

body.event-list-fullscreen .date-range-actions button {

  min-height: 34px;

  padding:
    0
    12px;

  border-radius: 10px;

  white-space: nowrap;

}

body.event-list-fullscreen #filters {

  grid-column:
    1 / -1;

  align-self: center;

  justify-content: flex-start;

  margin-bottom: 0;

  gap: 8px;

}

body.event-list-fullscreen .filter-chip {

  padding:
    9px
    13px;

}

@media (max-width: 980px) {

  body.event-list-fullscreen #sidebar-header {

    grid-template-columns:
      repeat(2, minmax(180px, 1fr));

  }

  body.event-list-fullscreen #dateRangeFilter,
  body.event-list-fullscreen #filters {

    grid-column:
      1 / -1;

  }

}


#topbar {

  justify-content: center;

}

#topbar-left {

  position: absolute;

  left: 24px;

  width: 64px;

}

#topbar-center {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: min(520px, 44vw);

  min-width: 320px;

}

#topbar-search {

  width: 100%;

}

#topbar-right {

  position: absolute;

  right: 24px;

  width: min(360px, 30vw);

}

#legalLinks {

  left: auto;

  right: 18px;

  bottom: 18px;

  gap: 6px;

  padding: 5px 8px;

  background: rgba(255, 255, 255, 0.78);

  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.06);

}

#legalLinks a {

  font-size: 10px;

  font-weight: 750;

}

@media (max-width: 980px) {

  #topbar {

    height: 130px;

    min-height: 130px;

  }

  #topbar-left {

    left: 16px;

  }

  #topbar-center {

    width: min(360px, calc(100vw - 220px));

    min-width: 240px;

  }

  #topbar-right {

    right: 16px;

    width: 180px;

  }

  #authArea {

    gap: 6px;

  }

  #authArea button,
  #topbar-right button {

    padding: 9px 11px;

    font-size: 12px;

  }

}

body.event-list-fullscreen #eventListToolbar {

  padding-top: 18px;

}

body.event-list-fullscreen #eventList {

  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));

  gap: 14px;

  align-content: start;

}

body.event-list-fullscreen.fullscreen-drawer-open #eventList {

  padding-right:
    min(440px, 38vw);

}

body.event-list-fullscreen .event-card {

  margin-bottom: 0;

}

body.event-list-fullscreen #eventListPagination {

  display: flex;

}

.event-top {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;
}

.event-sport {
  margin-top: 12px;

  font-size: 13px;

  color: #22c55e;

  font-weight: 600;
}

.event-card.active {

  border: 2px solid #22c55e;

  box-shadow: 0 8px 24px rgba(34,197,94,0.15);

}


#topbar {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 120px;

  background: white;

  border-bottom: 1px solid #e5e7eb;

  display: flex;

  align-items: center;

  padding: 0 24px;

  z-index: 3000;

}

#topbar-left {

  width: 80px;

  display: flex;

  align-items: center;

}

#topbar-right {

  width: 120px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

}

#topbar-center {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 14px;

}

#toggleSidebar {

  width: 44px;
  height: 44px;

  border: none;

  border-radius: 12px;

  background: #f3f4f6;

  cursor: pointer;

  font-size: 20px;

  transition: 0.2s;

}

#toggleSidebar:hover {

  background: #e5e7eb;

}

#sidebar {

  transition: transform 0.3s ease;

}

#sidebar.closed {

  margin-left: -380px;

}

.popup-card {

  min-width: 220px;

}

.popup-title {

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 10px;

}

.popup-meta {

  font-size: 14px;

  color: #6b7280;

  margin-bottom: 8px;

}

.popup-distance {

  display: inline-block;

  margin-top: 10px;

  margin-bottom: 14px;

  padding: 6px 10px;

  border-radius: 999px;

  background: #dcfce7;

  color: #166534;

  font-size: 12px;

  font-weight: 700;

}

.popup-button {

  display: inline-block;

  padding: 10px 14px;

  background: #22c55e;

  color: white;

  text-decoration: none;

  border-radius: 10px;

  font-size: 14px;

}

@media (max-width: 768px) {

  #sidebar {

    position: fixed;

    left: 0;
    top: 70px;
    bottom: 0;

    z-index: 2500;

    background: white;

  }

}

/* Final overrides kept at the end so older duplicate rules cannot win. */

#legalLinks {

  position: fixed;

  right: 14px;

  bottom: 14px;

  left: auto;

  width: auto;

  max-width: max-content;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 4px 6px;

  border: 1px solid rgba(229, 231, 235, 0.78);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.05);

}

#legalLinks a {

  color: #6b7280;

  font-size: 9px;

  font-weight: 750;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

}

#legalLinks a:hover {

  color: #166534;

}

body.event-list-fullscreen #legalLinks {

  display: none;

}

body.event-list-fullscreen #sidebar {

  display: flex;

  flex-direction: column;

  height: calc(100vh - 130px);

  min-height: 0;

}

body.event-list-fullscreen #eventList {

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding-bottom: 16px;

}

body.event-list-fullscreen #eventListPagination {

  position: sticky;

  bottom: 0;

  z-index: 20;

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  padding: 12px 20px 18px;

  border-top: 1px solid #f3f4f6;

  background: white;

}

body.event-list-fullscreen #eventListPagination button {

  min-width: 92px;

  min-height: 38px;

  padding: 0 14px;

  border: 1px solid #111827;

  border-radius: 12px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-size: 13px;

  font-weight: 850;

  opacity: 1;

}

body.event-list-fullscreen #eventListPagination button:disabled {

  border-color: #e5e7eb;

  background: #f9fafb;

  color: #9ca3af;

  cursor: not-allowed;

  opacity: 1;

  box-shadow: none;

}

body.event-list-fullscreen #eventListPagination button:hover:not(:disabled) {

  border-color: #22c55e;

  background: white;

  color: #166534;

  transform: translateY(-1px);

}

body.event-list-fullscreen .event-list-page-info {

  min-width: 88px;

  color: #374151;

  font-size: 13px;

  font-weight: 850;

  text-align: center;

}

/* Final compact legal links and fullscreen pagination fixes */

#legalLinks {

  position: fixed;

  right: 16px;

  bottom: 16px;

  left: auto;

  width: auto;

  max-width: max-content;

  display: inline-flex;

  align-items: center;

  justify-content: flex-end;

  gap: 5px;

  padding: 4px 7px;

  border: 1px solid rgba(229, 231, 235, 0.9);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.76);

  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.06);

}

#legalLinks a {

  display: inline-flex;

  color: #6b7280;

  font-size: 10px;

  font-weight: 750;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

}

#legalLinks a:hover {

  color: #166534;

}

body.event-list-fullscreen #eventListPagination {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 12px 20px 18px;

  border-top: 1px solid #f3f4f6;

  background: white;

}

body.event-list-fullscreen #sidebar {

  display: flex;

  flex-direction: column;

  height: calc(100vh - 130px);

  min-height: 0;

}

body.event-list-fullscreen #eventList {

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding-bottom: 16px;

}

body.event-list-fullscreen #eventListPagination {

  position: sticky;

  bottom: 0;

  z-index: 20;

  flex: 0 0 auto;

  width: 100%;

}

body.event-list-fullscreen #eventListPagination button {

  min-width: 92px;

  min-height: 38px;

  padding: 0 14px;

  border: 1px solid #111827;

  border-radius: 12px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-size: 13px;

  font-weight: 850;

  opacity: 1;

}

body.event-list-fullscreen #eventListPagination button:hover:not(:disabled) {

  border-color: #22c55e;

  background: white;

  color: #166534;

  transform: translateY(-1px);

}

body.event-list-fullscreen #eventListPagination button:disabled {

  border-color: #e5e7eb;

  background: #f9fafb;

  color: #9ca3af;

  cursor: not-allowed;

  opacity: 1;

  box-shadow: none;

}

body.event-list-fullscreen .event-list-page-info {

  min-width: 88px;

  color: #374151;

  font-size: 13px;

  font-weight: 850;

  text-align: center;

}

/* Cohesive UI polish */

#topbar {

  justify-content: space-between;

}

#topbar-left {

  width: 64px;

  flex: 0 0 64px;

}

#topbar-center {

  min-width: 280px;

}

#topbar-right {

  width: min(460px, 42vw);

  flex: 0 1 460px;

}

#authArea {

  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;

}

#authArea button,
#topbar-right button {

  padding: 10px 14px;

  font-size: 13px;

  font-weight: 800;

}

.event-card {

  border-radius: 16px;

  padding: 15px;

  margin-bottom: 12px;

}

.event-top {

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 10px;

}

.event-date {

  margin-bottom: 5px;

  color: #166534;

  font-size: 12px;

  font-weight: 850;

}

.event-title {

  color: #111827;

  font-size: 16px;

  font-weight: 850;

  line-height: 1.25;

  margin-bottom: 0;

}

.event-meta {

  margin-bottom: 12px;

}

.event-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  flex-wrap: wrap;

}

.event-sport {

  display: inline-flex;

  align-items: center;

  min-height: 28px;

  margin-top: 0;

  padding: 6px 10px;

  border: 1px solid #e5e7eb;

  border-radius: 999px;

  background: #f9fafb;

  color: #374151;

  font-size: 12px;

  font-weight: 850;

}

#floatingActions {

  gap: 10px;

}

.floating-actions-label {

  align-self: flex-end;

  padding: 7px 10px;

  border: 1px solid #e5e7eb;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.94);

  color: #4b5563;

  font-size: 11px;

  font-weight: 850;

  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.08);

}

#floatingActions button {

  width: 54px;

  height: 54px;

  font-size: 23px;

}

#legalLinks {

  left: 18px;

  right: auto;

  gap: 8px;

  padding: 6px 9px;

  background: rgba(255, 255, 255, 0.82);

}

#legalLinks a {

  font-size: 11px;

}

#adminStats {

  grid-template-columns:
    repeat(6, minmax(110px, 1fr));

  gap: 10px;

  margin: 18px 0 14px;

}

.admin-stat-card {

  padding: 13px 14px;

  border-radius: 12px;

}

.admin-stat-card span {

  margin-bottom: 7px;

  font-size: 11px;

}

.admin-stat-card strong {

  font-size: 26px;

}

.admin-table-section {

  margin: 14px 0 0;

  padding: 16px;

}

@media (max-width: 980px) {

  #topbar {

    height: auto;

    min-height: 120px;

    gap: 12px;

    padding:
      14px
      16px;

  }

  #app {

    height: calc(100vh - 130px);

    margin-top: 130px;

  }

  #sidebar,
  #eventDrawer.open {

    top: 130px;

  }

  #topbar-right {

    width: 240px;

    flex-basis: 240px;

  }

  #adminStats {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

  }

}

#eventDrawer {

  width: 0;

  min-width: 0;

  background: white;

  border-left: 1px solid #e5e7eb;

  overflow: hidden;

  transition:
    width 0.35s ease;

}

#eventDrawer.open {

  width: 420px;

}

#drawerContent {

  position: relative;

  padding: 24px;

  height: 100%;

  overflow-y: auto;

}

.drawer-placeholder {

  color: #9ca3af;

  margin-top: 40px;

  text-align: center;

  font-size: 15px;

}

.drawer-header h2 {

  font-size: 28px;

  margin-bottom: 24px;

}

.drawer-section {

  margin-bottom: 24px;

}

.drawer-label {

  font-size: 13px;

  color: #9ca3af;

  margin-bottom: 8px;

  text-transform: uppercase;

  letter-spacing: 1px;

}

.drawer-text {

  font-size: 16px;

  line-height: 1.6;

  color: #111827;

}

.drawer-button {

  display: inline-block;

  margin-top: 20px;

  padding: 14px 20px;

  background: #22c55e;

  color: white;

  text-decoration: none;

  border-radius: 12px;

  font-weight: 600;

}

#closeDrawer {

  position: absolute;

  top: 20px;
  right: 20px;

  width: 36px;
  height: 36px;

  border: none;

  border-radius: 999px;

  background: #f3f4f6;

  cursor: pointer;

  font-size: 18px;

}

.drawer-hero {

  height: 220px;

  margin: -24px -24px 24px -24px;

  background:
    linear-gradient(
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.35)
    ),
    url("https://images.unsplash.com/photo-1552674605-db6ffd4facb5?q=80&w=1200&auto=format&fit=crop");

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: end;

}

.drawer-overlay {

  width: 100%;

  padding: 24px;

}

.drawer-overlay h2,
.drawer-header h2 {

  color: white;

  font-size: 32px;

  line-height: 1.2;

  text-shadow:
    0 3px 14px rgba(0,0,0,0.38);

}

#topbar-search {

  width: 100%;

  display: flex;

  justify-content: center;

}

#topbar-search input {

  width: 500px;

  max-width: 90%;

  padding: 16px 22px;

  border-radius: 16px;

  border: 1px solid #d1d5db;

  font-size: 16px;

  background: #f9fafb;

  outline: none;

}

#topbar-search input:focus {

  border-color: #22c55e;

}

#sortSelect,
#dateFilter {

  width: 100%;

  padding: 14px 16px;

  margin-bottom: 12px;

  border-radius: 14px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  font-size: 14px;

  outline: none;

  cursor: pointer;

}

#dateRangeFilter {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 16px;

  padding: 14px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: #f9fafb;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

}

#dateRangeFilter.active {

  border-color: #22c55e;

  background: white;

  box-shadow:
    0 10px 26px rgba(34,197,94,0.12);

}

.date-range-title {

  grid-column: 1 / -1;

  color: #111827;

  font-size: 14px;

  font-weight: 800;

}

#dateRangeFilter label {

  display: flex;

  flex-direction: column;

  gap: 6px;

  color: #6b7280;

  font-size: 12px;

  font-weight: 700;

}

#dateRangeFilter input {

  width: 100%;

  min-width: 0;

  padding: 12px 10px;

  border-radius: 14px;

  border: 1px solid #e5e7eb;

  background: white;

  color: #111827;

  font-size: 13px;

  outline: none;

}

.date-range-actions {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(0, 1fr);

  gap: 10px;

}

.date-range-actions button {

  min-height: 40px;

  border-radius: 12px;

  border: 1px solid #e5e7eb;

  background: white;

  color: #111827;

  cursor: pointer;

  font-size: 13px;

  font-weight: 700;

}

#applyDateRangeFilter {

  background: #111827;

  color: white;

  border-color: #111827;

}

.date-range-actions button:hover,
#applyDateRangeFilter:hover {

  border-color: #22c55e;

  background: white;

  color: #111827;

  transform:
    translateY(-2px);

}

#dateRangeFilter input:hover,
#dateRangeFilter input:focus {

  border-color: #22c55e;

  background: white;

}

.favorite-btn {

  margin-left: auto;

  cursor: pointer;

  font-size: 18px;

  color: #9ca3af;

}

.custom-marker {

  background: transparent;

}

.marker-pin {

  width: 18px;
  height: 18px;

  background: #ef4444;

  border-radius: 999px;

  border: 3px solid white;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.25);

}

#floatingActions {

  position: fixed;

  right: 24px;

  bottom: 88px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  z-index: 5000;

}

#floatingActions button {

  width: 58px;
  height: 58px;

  border: none;

  border-radius: 999px;

  background: white;

  cursor: pointer;

  font-size: 24px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15);

  transition: all 0.2s ease;

}

#floatingActions button[title] {

  position: relative;

}

#floatingActions button[title]::after {

  content: attr(title);

  position: absolute;

  right: 72px;

  top: 50%;

  transform:
    translateY(-50%)
    translateX(6px);

  opacity: 0;

  pointer-events: none;

  padding:
    7px
    10px;

  border-radius: 999px;

  background: #111827;

  color: white;

  font-size: 12px;

  font-weight: 800;

  white-space: nowrap;

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.16);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

}

#floatingActions button[title]:hover::after,
#floatingActions button[title]:focus-visible::after {

  opacity: 1;

  transform:
    translateY(-50%)
    translateX(0);

}

#floatingActions button:hover {

  transform:
    scale(1.08)
    translateY(-2px);

}

#favoritesBtn {

  color: #ef4444;

}

#favoritesBtn.active {

  color: #ef4444;

  background: #fff1f2;

  border-color: #fecaca;

}

#favoritesBtn.active:hover {

  border-color: #22c55e;

}

@media (max-width: 768px) {

  #eventDrawer.open {

    position: fixed;

    top: 120px;
    right: 0;
    bottom: 0;

    width: 100%;

    z-index: 4000;

  }

  #sidebar {

    position: fixed;

    z-index: 3500;

    top: 120px;
    bottom: 0;

    background: white;

  }

  #topbar-search input {

    width: 90%;

  }

}

#authArea {

  display: flex;

  gap: 10px;

  align-items: center;

}

#authArea button,
#topbar-right button {

  border: none;

  padding: 10px 16px;

  border-radius: 12px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-size: 14px;

  transition: 0.2s;

}

#authArea button:hover,
#topbar-right button:hover {

  opacity: 0.9;

}

/* AUTH / PROFILE / MESSAGE MODALS */

#authModal,
#profileModal,
#seasonPlannerModal,
#appMessageModal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.45);

  backdrop-filter: blur(8px);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 99999;

}

#authModal.open,
#profileModal.open,
#seasonPlannerModal.open,
#appMessageModal.open {

  display: flex;

}

.auth-card,
.profile-card,
.season-planner-card,
.app-message-card {

  width: 400px;

  max-width: 92%;

  background: white;

  border-radius: 28px;

  padding: 32px;

  position: relative;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.25);

  animation: authPop 0.25s ease;

}

@keyframes authPop {

  from {

    opacity: 0;

    transform:
      translateY(10px)
      scale(0.96);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}

.auth-card h2,
.profile-card h2,
.app-message-card h2 {

  font-size: 30px;

  margin-bottom: 24px;

}

.auth-card input,
.profile-card input {

  width: 100%;

  padding: 16px 18px;

  margin-bottom: 14px;

  border-radius: 16px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

  font-size: 15px;

  outline: none;

}

.auth-card label,
.event-modal-card label,
.profile-card label {

  display: block;

  margin-bottom: 12px;

  color: #374151;

  font-size: 13px;

  font-weight: 700;

}

.auth-card label input,
.event-modal-card label input,
.profile-card label input {

  margin-top: 6px;

  margin-bottom: 0;

}

.auth-card input:focus,
.profile-card input:focus {

  border-color: #22c55e;

}

#authSubmitBtn,
#profilePasswordBtn,
#appMessageOk {

  width: 100%;

  border: none;

  padding: 16px;

  border-radius: 16px;

  background: #111827;

  color: white;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.2s;

}

#authSubmitBtn:hover,
#profilePasswordBtn:hover,
#appMessageOk:hover {

  transform: translateY(-1px);

  opacity: 0.95;

}

.auth-secondary-btn {

  width: 100%;

  margin-top: 10px;

  border: 1px solid #e5e7eb;

  padding: 13px;

  border-radius: 14px;

  background: white;

  color: #374151;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

}

.auth-secondary-btn:hover {

  border-color: #22c55e;

  color: #166534;

}

.event-honeypot {

  position: absolute;

  left: -9999px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}

#legalLinks {

  position: fixed;

  right: 18px;

  bottom: 18px;

  z-index: 3200;

  display: flex;

  gap: 10px;

  padding:
    8px
    10px;

  border: 1px solid #e5e7eb;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.92);

  box-shadow:
    0
    10px
    28px
    rgba(15, 23, 42, 0.08);

}

#legalLinks a {

  color: #4b5563;

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;

}

#legalLinks a:hover {

  color: #166534;

}

.legal-page-content {

  width:
    min(760px, calc(100% - 32px));

  margin:
    48px
    auto;

  padding: 32px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: white;

  box-shadow:
    0
    18px
    45px
    rgba(15, 23, 42, 0.08);

}

.legal-page-content a {

  color: #166534;

  font-weight: 800;

  overflow-wrap: anywhere;

}

.legal-page-content h1 {

  margin-bottom: 18px;

  color: #111827;

}

.legal-page-content h2 {

  margin:
    26px
    0
    10px;

  color: #111827;

  font-size: 18px;

}

.legal-page-content p {

  margin-bottom: 12px;

  color: #4b5563;

  line-height: 1.65;

}

.legal-page-footer {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap:
    10px
    18px;

  width:
    min(760px, calc(100% - 32px));

  margin:
    0
    auto
    42px;

  padding:
    14px
    18px;

  border: 1px solid #e5e7eb;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.86);

  color: #6b7280;

  box-shadow:
    0
    12px
    30px
    rgba(15, 23, 42, 0.07);

}

.legal-page-footer a {

  color: #166534;

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;

}

.legal-page-footer span {

  color: #6b7280;

  font-size: 12px;

}

.legal-page-content ul {

  margin:
    0
    0
    14px
    20px;

  color: #4b5563;

  line-height: 1.65;

}

.legal-back-link {

  display: inline-block;

  margin-bottom: 20px;

  color: #166534;

  font-weight: 800;

  text-decoration: none;

}

#legalLinks button {

  border: 0;

  background: transparent;

  color: var(--text-muted);

  cursor: pointer;

  font: inherit;

  font-size: 12px;

  font-weight: 700;

}

#legalLinks button:hover,
#legalLinks button:focus-visible {

  color: #bbf7d0;

}

#legalLinks span {

  color: var(--text-subtle);

  font-size: 11px;

  white-space: nowrap;

}

@media (prefers-color-scheme: dark) {

  body.legal-page {

    background:
      radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 36%),
      linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));

    color: var(--text-main);

  }

  .legal-page-content {

    border-color: var(--border-soft);

    background: rgba(15, 23, 42, 0.9);

    color: var(--text-main);

    box-shadow: var(--shadow-soft);

  }

  .legal-page-content h1,
  .legal-page-content h2 {

    color: var(--text-main);

  }

  .legal-page-content p,
  .legal-page-content ul {

    color: var(--text-muted);

  }

  .legal-page-content a,
  .legal-back-link {

    color: #86efac;

  }

  .legal-page-footer {

    border-color: var(--border-soft);

    background: rgba(15, 23, 42, 0.78);

    color: var(--text-muted);

  }

  .legal-page-footer a {

    color: #bbf7d0;

  }

  .legal-page-footer span {

    color: var(--text-subtle);

  }

}

@media (max-width: 640px) {

  .legal-page-content {

    width: calc(100% - 24px);

    margin:
      18px
      auto;

    padding:
      22px
      18px;

    border-radius: 16px;

  }

  .legal-page-content h1 {

    font-size: 28px;

    line-height: 1.15;

  }

  .legal-page-content h2 {

    font-size: 16px;

    line-height: 1.3;

  }

  .legal-page-content p,
  .legal-page-content li {

    font-size: 14px;

    line-height: 1.65;

  }

  .legal-page-footer {

    width: calc(100% - 24px);

    align-items: stretch;

    border-radius: 18px;

  }

  .legal-page-footer a {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
      0
      8px;

  }

  .legal-page-footer span {

    width: 100%;

    text-align: center;

    line-height: 1.45;

  }

  #legalLinks {

    max-width: calc(100vw - 24px);

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px 12px;

  }

  #legalLinks a,
  #legalLinks button {

    min-height: 36px;

    display: inline-flex;

    align-items: center;

  }

  #legalLinks span {

    width: 100%;

    text-align: center;

  }

}

#closeAuthModal,
#closeProfileModal,
#closeAppMessage {

  position: absolute;

  top: 18px;

  right: 18px;

  width: 38px;

  height: 38px;

  border: none;

  border-radius: 999px;

  background: #f3f4f6;

  cursor: pointer;

  font-size: 18px;

}

.profile-card {

  width: min(720px, calc(100vw - 28px));

  max-height: calc(100vh - 28px);

  overflow-y: auto;

}

.profile-header {

  margin-bottom: 18px;

  padding-right: 42px;

}

.profile-header span {

  color: #16a34a;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}

.profile-header h2 {

  margin:
    6px
    0;

  color: #0f172a;

  font-size: 30px;

  line-height: 1.1;

}

.profile-header p {

  max-width: 560px;

  color: #64748b;

  font-size: 14px;

  font-weight: 750;

  line-height: 1.45;

}

.profile-summary {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 22px;

}

.profile-summary div {

  padding: 14px;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  background: #f8fafc;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

}

.profile-summary div:hover {

  border-color: #22c55e;

  box-shadow: 0 12px 26px rgba(34, 197, 94, 0.1);

  transform: translateY(-1px);

}

.profile-summary span,
.profile-favorite-empty {

  display: block;

  color: #6b7280;

  font-size: 12px;

  font-weight: 800;

}

.profile-summary strong {

  display: block;

  margin-top: 6px;

  color: #111827;

  font-size: 15px;

  overflow-wrap: anywhere;

}

.profile-section {

  padding:
    16px;

  margin-top: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: #ffffff;

}

.profile-section-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;

}

.profile-section h3 {

  margin-bottom: 0;

  font-size: 15px;

}

.profile-section-heading span {

  color: #64748b;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}

.profile-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-settings-grid div {
  padding: 14px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #f8fafc;
}

.profile-settings-grid span,
.profile-settings-grid strong {
  display: block;
}

.profile-settings-grid span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-settings-grid strong {
  margin-top: 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.profile-language-select {
  width: 100%;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.profile-language-select:focus {
  border-color: #22c55e;
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.profile-favorite-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 13px 0;

  border-bottom: 1px solid #f3f4f6;

}

.profile-favorite-list {

  display: grid;

  gap: 8px;

}

.profile-favorite-list .profile-favorite-item {

  padding: 12px;

  border: 1px solid #eef2f7;

  border-radius: 14px;

  background: #f8fafc;

}

.profile-favorite-list .profile-favorite-item:hover {

  border-color: #bbf7d0;

  background: #f0fdf4;

}

.profile-card #profilePasswordBtn {

  margin-top: 4px;

}

.profile-card #profilePasswordBtn:hover {

  border-color: #16a34a;

  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.18);

}

.profile-card label {

  margin-top: 12px;

}

.profile-settings-hint,
.profile-favorite-subtitle {

  margin:
    10px
    0
    0;

  color: #64748b;

  font-size: 12px;

  font-weight: 800;

}

.profile-favorite-subtitle {

  margin:
    14px
    0
    6px;

  color: #6b7280;

  font-size: 12px;

  font-weight: 900;

  text-transform: uppercase;

}

.profile-favorite-item strong,
.profile-favorite-item span {

  display: block;

}

.profile-favorite-item em {

  flex: 0 0 auto;

  padding: 5px 8px;

  border: 1px solid #bbf7d0;

  border-radius: 999px;

  background: #ecfdf5;

  color: #166534;

  font-size: 10px;

  font-style: normal;

  font-weight: 900;

  white-space: nowrap;

}

.profile-favorite-item span {

  margin-top: 4px;

  color: #6b7280;

  font-size: 13px;

}

@media (max-width: 760px) {

  .profile-summary {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .profile-summary div:first-child {

    grid-column: 1 / -1;

  }

  .profile-favorite-item {

    align-items: flex-start;

    flex-direction: column;

  }

  .profile-settings-grid {
    grid-template-columns: 1fr;
  }

}

.season-planner-card {
  width: min(1180px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 26px;
  border-radius: 22px;
}

.season-planner-header {
  margin-bottom: 18px;
}

.season-planner-header span,
.season-section-title {
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-planner-header h2 {
  margin: 6px 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.1;
}

.season-planner-header p {
  max-width: 560px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.season-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.season-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
  gap: 14px;
  margin-bottom: 14px;
}

.season-kpi-grid div,
.season-next-card,
.season-empty {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #f8fafc;
}

.season-kpi-grid div {
  padding: 14px;
}

.season-kpi-grid span,
.season-next-card span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-kpi-grid strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
}

.season-next-card {
  margin-bottom: 0;
  padding: 18px 20px;
  border-color: #bbf7d0;
  background:
    linear-gradient(135deg, #dcfce7 0%, #ffffff 72%);
}

.season-next-card strong {
  display: block;
  margin-top: 10px;
  color: #166534;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.05;
}

.season-next-card em {
  display: block;
  margin-top: 5px;
  color: #475569;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.season-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.season-overview-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 132px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
}

.season-plan-summary-card {
  grid-column: span 2;
}

.season-overview-card > span {
  color: #16a34a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#seasonOverviewARaces,
#seasonOverviewWarnings,
#seasonOverviewSummary,
#seasonOverviewSportMix {
  display: grid;
  gap: 8px;
}

#seasonOverviewARaces p,
#seasonOverviewWarnings p,
#seasonOverviewSportMix p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.season-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.season-summary-grid div {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.season-summary-grid span,
.season-summary-empty span,
.season-sport-mix-row span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-summary-grid strong,
.season-summary-empty strong,
.season-sport-mix-row strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.season-summary-empty {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.season-sport-mix-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.season-sport-mix-row strong {
  margin-top: 0;
  color: #166534;
  font-size: 16px;
}

.season-overview-mini-event {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  cursor: pointer;
  text-align: left;
}

.season-overview-mini-event:hover,
.season-overview-mini-event:focus-visible {
  border-color: #22c55e;
  background: #ffffff;
  outline: none;
}

.season-overview-mini-event span {
  color: #16a34a;
  font-size: 11px;
  font-weight: 950;
}

.season-overview-mini-event strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.season-overview-mini-event em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.season-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.season-tab {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.season-tab.active,
.season-tab:hover {
  border-color: #22c55e;
  background: #ecfdf5;
  color: #166534;
}

.season-tab-panel {
  display: none;
}

.season-tab-panel.active {
  display: block;
}

.season-actions {
  display: flex;
  justify-content: flex-end;
  margin:
    -4px
    0
    16px;
}

.season-export-card {
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.season-export-card span,
.season-export-card strong,
.season-export-card p {
  display: block;
}

.season-export-card span {
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-export-card strong {
  margin-top: 8px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.season-export-card p {
  max-width: 560px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.season-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.season-export-actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #16a34a;
  border-radius: 12px;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.season-export-actions button:nth-child(2) {
  background: #ffffff;
  color: #166534;
}

.season-export-actions button:hover,
.season-export-actions button:focus-visible {
  background: #ffffff;
  color: #166534;
  outline: none;
  transform: translateY(-1px);
}

.season-export-actions button:nth-child(2):hover,
.season-export-actions button:nth-child(2):focus-visible {
  background: #16a34a;
  color: #ffffff;
}

.season-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #16a34a;
  border-radius: 12px;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.season-actions button:hover,
.season-actions button:focus-visible {
  background: #ffffff;
  color: #166534;
  outline: none;
  transform: translateY(-1px);
}

.season-insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  margin-bottom: 18px;
}

.season-insight-card {
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
}

.season-insight-card > span {
  display: block;
  margin-bottom: 10px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#seasonSportBreakdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#seasonSportBreakdown div {
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

#seasonSportBreakdown strong,
#seasonSportBreakdown span {
  display: block;
}

#seasonSportBreakdown strong {
  color: #0f172a;
  font-size: 19px;
  font-weight: 950;
}

#seasonSportBreakdown span,
.season-warning-item span,
#seasonScheduleWarnings p {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

#seasonScheduleWarnings {
  display: grid;
  gap: 8px;
}

.season-warning-item {
  padding: 10px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
}

.season-warning-item strong,
.season-warning-item span {
  display: block;
}

.season-warning-item strong {
  color: #92400e;
  font-size: 12px;
  font-weight: 950;
}

#seasonTimeline {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}

#seasonPriorityList {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.season-month-group {
  display: grid;
  gap: 8px;
}

.season-month-title {
  position: sticky;
  top: -1px;
  z-index: 2;
  padding: 7px 2px;
  background: #ffffff;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-event-row {
  width: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 120px 150px 78px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  transition: 0.18s ease;
}

.season-priority-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 170px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
}

.season-priority-row:hover {
  border-color: #22c55e;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.1);
}

.season-priority-badge {
  justify-self: stretch;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.season-event-row:hover {
  border-color: #22c55e;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.12);
  transform: translateY(-1px);
}

.season-event-a-race {
  border-color: #22c55e;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
  box-shadow: inset 4px 0 0 #22c55e;
}

.season-event-a-race .season-event-main strong::after {
  content: "A Race";
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 10px;
  font-weight: 950;
  vertical-align: middle;
}

.season-event-close-warning {
  box-shadow:
    inset 4px 0 0 #f59e0b,
    0 0 0 1px rgba(245, 158, 11, 0.16);
}

.season-event-date {
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}

.season-event-main strong,
.season-event-main em {
  display: block;
}

.season-event-main strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}

.season-event-main em,
.season-event-place {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.season-event-place {
  justify-self: end;
}

.season-priority-control {
  display: grid;
  gap: 4px;
}

.season-distance-control,
.season-priority-control {
  display: grid;
  gap: 4px;
}

.season-distance-control span,
.season-priority-control span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-distance-control select,
.season-priority-control select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 850;
}

.season-open-event {
  min-height: 34px;
  border: 1px solid #16a34a;
  border-radius: 10px;
  background: #16a34a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.season-open-event:hover {
  background: #ffffff;
  color: #166534;
}

.season-empty {
  padding: 18px;
}

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

.season-empty strong {
  color: #0f172a;
}

.season-empty span {
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
}

#closeSeasonPlanner {
  position: fixed;
  top: 24px;
  right: 28px;
  float: right;
  z-index: 100000;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  font-weight: 900;
}

.app-message-card {

  max-width: 440px;

}

.app-message-card p {

  margin-bottom: 20px;

  color: #4b5563;

  line-height: 1.6;

}

#addEventBtn {

  border: none;

  padding: 10px 18px;

  border-radius: 14px;

  background: #22c55e;

  color: white;

  cursor: pointer;

  font-size: 14px;

  font-weight: 600;

  transition: 0.2s;

}

#addEventBtn:hover {

  transform: translateY(-1px);

}

#eventModal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.45);

  backdrop-filter: blur(8px);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 99999;

}

#eventModal.open {

  display: flex;

}

.event-modal-card {

  width: 500px;

  max-width: 92%;

  background: white;

  border-radius: 28px;

  padding: 32px;

  position: relative;

}

.event-modal-card input {

  width: 100%;

  padding: 15px 16px;

  margin-bottom: 12px;

  border-radius: 14px;

  border: 1px solid #e5e7eb;

  background: #f9fafb;

}

.event-modal-card h2 {

  margin-bottom: 22px;

}

#submitEventBtn {

  width: 100%;

  border: none;

  padding: 16px;

  border-radius: 16px;

  background: #22c55e;

  color: white;

  font-weight: 600;

  cursor: pointer;

}

#adminBtn {

  border: none;

  padding: 10px 18px;

  border-radius: 14px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-size: 14px;

  font-weight: 600;

}

#adminModal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.45);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 99999;

}

#adminModal.open {

  display: flex;

}

.admin-card {

  width: 980px;

  max-width: 95%;

  max-height: 80vh;

  overflow-y: auto;

  background: white;

  border-radius: 28px;

  padding: 32px;

  position: relative;

}

.admin-card h2,
.auth-card h2,
.event-modal-card h2 {

  color: #111827;

  font-weight: 850;

  letter-spacing: 0;

}

.admin-tabs {

  display: inline-flex;

  gap: 8px;

  padding: 6px;

  margin-top: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  background: #f9fafb;

}

.admin-tab {

  min-height: 38px;

  padding: 0 16px;

  border: 1px solid transparent;

  border-radius: 12px;

  background: transparent;

  color: #374151;

  cursor: pointer;

  font-size: 14px;

  font-weight: 800;

}

.admin-tab:hover {

  background: white;

  border-color: #22c55e;

  transform:
    translateY(-1px);

}

.admin-tab.active {

  background: #111827;

  color: white;

  border-color: #111827;

  box-shadow:
    0 10px 22px rgba(17,24,39,0.14);

}

.admin-tab-panel {

  display: none;

}

.admin-tab-panel.active {

  display: block;

}

#adminStats {

  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  gap: 12px;

  margin: 20px 0;

}

.admin-stat-card {

  padding: 16px;

  border: 1px solid #e5e7eb;

  border-radius: 14px;

  background: #f9fafb;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;

}

.admin-stat-card:hover {

  border-color: #22c55e;

  box-shadow:
    0 12px 28px rgba(34,197,94,0.12);

  transform:
    translateY(-2px);

}

.admin-stat-card span {

  display: block;

  margin-bottom: 8px;

  color: #6b7280;

  font-size: 12px;

  font-weight: 700;

}

.admin-stat-card strong {

  color: #111827;

  font-size: 30px;

  line-height: 1;

}

.admin-stat-card strong.admin-stat-positive {

  color: #16a34a;

}

.admin-stat-card strong.admin-stat-negative {

  color: #dc2626;

}

.admin-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-quality-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.admin-quality-grid h4 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.admin-quality-item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid #e5e7eb;
}

.admin-quality-item strong,
.admin-quality-item span,
.admin-quality-item a,
.admin-quality-empty {
  font-size: 12px;
}

.admin-quality-item strong {
  color: #111827;
  font-weight: 950;
}

.admin-quality-item span,
.admin-quality-empty {
  color: #64748b;
  font-weight: 800;
}

.admin-quality-item a {
  width: fit-content;
  color: #166534;
  font-weight: 900;
  text-decoration: none;
}

.admin-quality-item a:hover {
  text-decoration: underline;
}

#adminTasks,
.admin-table-section {

  margin: 18px 0;

  padding: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: white;

}

#adminTasks h3,
.admin-table-section h3 {

  margin-bottom: 12px;

  color: #111827;

}

#adminTasks ul {

  display: grid;

  gap: 9px;

  padding-left: 18px;

  color: #374151;

  font-size: 14px;

}

.pending-item {

  padding: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  margin-bottom: 14px;

}

.pending-item button {

  margin-top: 12px;

  border: none;

  padding: 10px 14px;

  border-radius: 12px;

  background: #22c55e;

  color: white;

  cursor: pointer;

}

.pending-item-header {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 12px;

}

.pending-item-header h3 {

  margin-bottom: 6px;

}

.pending-item-header p,
.pending-item-meta {

  color: #6b7280;

  font-size: 13px;

}

.pending-item-header span {

  height: fit-content;

  padding: 6px 10px;

  border-radius: 999px;

  background: #dcfce7;

  color: #166534;

  font-size: 12px;

  font-weight: 700;

}

.pending-item-meta {

  display: grid;

  gap: 6px;

  margin-bottom: 14px;

}

.pending-item-actions {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  align-items: center;

}

.pending-item-actions button {

  margin-top: 0;

  min-height: 38px;

  padding: 9px 12px;

  border: 1px solid transparent;

  border-radius: 12px;

  cursor: pointer;

  font-size: 13px;

  font-weight: 800;

  line-height: 1;

  box-shadow:
    0 8px 18px rgba(0,0,0,0.06);

}

.pending-item-actions .approve-event-btn {

  background: #16a34a;

  color: white;

  border-color: #16a34a;

}

.pending-item-actions .reject-event-btn {

  background: white;

  color: #b91c1c;

  border-color: #fecaca;

}

.pending-item-actions .approve-event-btn:hover {

  background: white;

  border-color: #22c55e;

  color: #166534;

  transform:
    translateY(-2px);

}

.pending-item-actions .reject-event-btn:hover {

  background: #fff1f2;

  border-color: #22c55e;

  color: #991b1b;

  transform:
    translateY(-2px);

}

.pending-item-actions button:disabled {

  cursor: wait;

  opacity: 0.62;

  transform: none;

  box-shadow: none;

}

.admin-pending-grid {

  display: grid;

  gap: 14px;

}

.pending-card {

  padding: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: white;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.04);

}

.pending-card.needs-coordinates {

  border-color: #fde68a;

  background: #fffbeb;

}

.pending-card-header {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 14px;

}

.pending-card-header h4 {

  margin-bottom: 6px;

  color: #111827;

  font-size: 17px;

}

.pending-card-header p {

  color: #6b7280;

  font-size: 13px;

}

.pending-card-header span {

  height: fit-content;

  padding: 6px 10px;

  border-radius: 999px;

  background: #dcfce7;

  color: #166534;

  font-size: 12px;

  font-weight: 800;

}

.pending-card-details {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 10px;

  margin-bottom: 14px;

}

.pending-card-description {

  padding: 10px;

  margin-bottom: 14px;

  border-radius: 12px;

  background: #f9fafb;

}

.pending-card-description span {

  display: block;

  margin-bottom: 5px;

  color: #6b7280;

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

}

.pending-card-description p {

  color: #111827;

  font-size: 13px;

  line-height: 1.5;

}

.pending-card-details div {

  padding: 10px;

  border-radius: 12px;

  background: #f9fafb;

}

.pending-card-details span {

  display: block;

  margin-bottom: 5px;

  color: #6b7280;

  font-size: 11px;

  font-weight: 800;

  text-transform: uppercase;

}

.pending-card-details strong {

  color: #111827;

  font-size: 13px;

}

.pending-card-link {

  display: inline-block;

  margin-bottom: 14px;

  color: #166534;

  font-size: 13px;

  font-weight: 800;

  text-decoration: none;

}

.pending-card-link:hover {

  text-decoration: underline;

}

.admin-events-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

}

.admin-events-table th,
.admin-events-table td {

  padding: 13px 10px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  vertical-align: top;

}

.admin-events-table th {

  color: #6b7280;

  font-size: 12px;

  font-weight: 800;

  text-transform: uppercase;

}

.admin-events-table td strong,
.admin-events-table td span {

  display: block;

}

.admin-events-table td span {

  margin-top: 4px;

  color: #6b7280;

  font-size: 12px;

}

.admin-events-table tr.needs-coordinates {

  background: #fffbeb;

}

.admin-events-table .pending-item-actions {

  min-width: 190px;

}

@media (max-width: 900px) {

  #adminStats {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

  }

  .admin-events-table {

    display: block;

    overflow-x: auto;

    white-space: nowrap;

  }

}

.admin-import-panel {

  margin: 22px 0;

  padding: 18px;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  background: #f9fafb;

}

.admin-import-panel h3 {

  margin-bottom: 14px;

  font-size: 18px;

  color: #111827;

}

.admin-import-fields {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 14px;

}

.admin-import-fields label {

  display: flex;

  flex-direction: column;

  gap: 6px;

  color: #6b7280;

  font-size: 13px;

  font-weight: 600;

}

.admin-import-fields input {

  width: 100%;

  padding: 12px 14px;

  border-radius: 12px;

  border: 1px solid #e5e7eb;

  background: white;

  outline: none;

}

.admin-import-fields input:hover,
.admin-import-fields input:focus {

  border-color: #22c55e;

}

.admin-import-actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.admin-import-actions button {

  min-height: 40px;

  border: 1px solid #111827;

  padding: 11px 15px;

  border-radius: 12px;

  background: #111827;

  color: white;

  cursor: pointer;

  font-weight: 600;

}

.admin-import-actions button:first-child {

  background: white;

  color: #111827;

  border-color: #e5e7eb;

}

.admin-import-actions button:last-child {

  background: #16a34a;

  border-color: #16a34a;

}

.admin-import-actions button:hover {

  background: white;

  color: #111827;

  border-color: #22c55e;

  transform:
    translateY(-2px);

}

.admin-import-actions button:disabled {

  cursor: wait;

  opacity: 0.65;

  transform: none;

}

.admin-import-status {

  margin-top: 14px;

  color: #6b7280;

  font-size: 13px;

  font-weight: 600;

}

.admin-import-status.success {

  color: #166534;

}

.admin-import-status.error {

  color: #b91c1c;

}

#worldTriathlonPreviewList {

  margin-top: 14px;

  display: grid;

  gap: 10px;

}

.admin-import-preview-item {

  padding: 12px;

  border: 1px solid #e5e7eb;

  border-radius: 14px;

  background: white;

}

.admin-import-preview-item strong {

  display: block;

  margin-bottom: 5px;

  color: #111827;

}

.admin-import-preview-item span,
.admin-import-empty {

  color: #6b7280;

  font-size: 13px;

}


/* MODERN UI POLISH */

#topbar-center h1 {

  color: #111827;

  font-size: 34px;

  font-weight: 850;

  line-height: 1;

  letter-spacing: 0;

  position: relative;

}

#topbar-center h1::after {

  content: "";

  display: block;

  width: 88px;

  height: 3px;

  margin: 10px auto 0 auto;

  border-radius: 999px;

  background: #22c55e;

}

button,
.drawer-button {

  border: 1px solid transparent;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;

}

button:hover,
.drawer-button:hover {

  border-color: #22c55e;

  box-shadow:
    0 12px 28px rgba(34,197,94,0.16);

}

#authArea button,
#topbar-right button,
#adminBtn,
#authSubmitBtn {

  background: #111827;

  color: white;

  border-color: #111827;

}

#authArea button:hover,
#topbar-right button:hover,
#adminBtn:hover,
#authSubmitBtn:hover {

  background: white;

  color: #111827;

  transform:
    translateY(-2px);

}

#addEventBtn,
#submitEventBtn,
.drawer-button {

  background: #22c55e;

  color: white;

  border-color: #22c55e;

}

#addEventBtn:hover,
#submitEventBtn:hover,
.drawer-button:hover {

  background: white;

  color: #166534;

  transform:
    translateY(-2px);

}

#toggleSidebar,
#closeDrawer,
#closeAuthModal,
#closeProfileModal,
#closeAppMessage,
#closeEventModal,
#closeAdminModal {

  background: #f9fafb;

  color: #111827;

  border-color: #e5e7eb;

}

#toggleSidebar:hover,
#closeDrawer:hover,
#closeAuthModal:hover,
#closeEventModal:hover,
#closeAdminModal:hover {

  background: white;

  transform:
    translateY(-2px);

}

.filter-chip {

  border: 1px solid transparent;

}

.filter-chip:hover {

  background: white;

  border-color: #22c55e;

  color: #166534;

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 24px rgba(34,197,94,0.12);

}

.filter-chip.active {

  border-color: #ef4444;

}

.filter-chip.active:hover {

  color: white;

  border-color: #22c55e;

}

.favorite-btn {

  width: 34px;

  height: 34px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background: #f9fafb;

  border: 1px solid #e5e7eb;

}

.favorite-btn:hover {

  color: #ef4444;

  background: white;

  border-color: #22c55e;

  transform:
    translateY(-2px);

}

.favorite-btn.active {

  color: #ef4444;

  background: #fff1f2;

  border-color: #fecaca;

}

#floatingActions button {

  border: 1px solid #e5e7eb;

}

#floatingActions button:hover {

  border-color: #22c55e;

  background: white;

  box-shadow:
    0 16px 36px rgba(34,197,94,0.18);

}

#topbar-search input:hover,
#sortSelect:hover,
#dateFilter:hover,
#dateRangeFilter input:hover {

  border-color: #22c55e;

}

@media (max-width: 768px) {

  #topbar-center h1 {

    font-size: 24px;

  }

  #topbar-center h1::after {

    width: 56px;

    margin-top: 8px;

  }

}

/* Final Netlify-ready overrides */

#legalLinks {
  position: fixed;
  right: 14px;
  bottom: 14px;
  left: auto;
  width: auto;
  max-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(229, 231, 235, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

#legalLinks a {
  color: #6b7280;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

#legalLinks a:hover {
  color: #166534;
}

body.event-list-fullscreen #legalLinks {
  display: none;
}

body.event-list-fullscreen #sidebar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  min-height: 0;
}

body.event-list-fullscreen #eventList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

body.event-list-fullscreen #eventListPagination {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px 18px;
  border-top: 1px solid #f3f4f6;
  background: white;
}

body.event-list-fullscreen #eventListPagination button {
  min-width: 92px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #111827;
  border-radius: 12px;
  background: #111827;
  color: white;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  opacity: 1;
}

body.event-list-fullscreen #eventListPagination button:disabled {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

body.event-list-fullscreen #eventListPagination button:hover:not(:disabled) {
  border-color: #22c55e;
  background: white;
  color: #166534;
  transform: translateY(-1px);
}

body.event-list-fullscreen .event-list-page-info {
  min-width: 88px;
  color: #374151;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

/* Mobile layout fixes */

@media (max-width: 768px) {

  html,
  body {

    overflow: hidden;

  }

  #topbar {

    height: 176px;

    min-height: 176px;

    padding:
      12px
      14px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: 10px;

  }

  #topbar-left {

    position: absolute;

    top: 14px;

    left: 14px;

    width: 44px;

    z-index: 2;

  }

  #topbar-center {

    position: static;

    transform: none;

    width: 100%;

    min-width: 0;

    padding:
      0
      54px;

    gap: 8px;

  }

  #topbar-center h1 {

    font-size: 24px;

    line-height: 1.05;

  }

  #topbar-search {

    width: 100%;

  }

  #topbar-search input,
  #searchInput {

    width: 100%;

    height: 42px;

    padding:
      0
      13px;

    border-radius: 12px;

    font-size: 14px;

  }

  #topbar-right {

    position: static;

    width: 100%;

    flex: 0 0 auto;

  }

  #authArea {

    justify-content: center;

    gap: 7px;

  }

  #authArea button,
  #topbar-right button {

    min-height: 34px;

    padding:
      0
      10px;

    border-radius: 10px;

    font-size: 12px;

  }

  #app {

    height: calc(100vh - 176px);

    margin-top: 176px;

  }

  #sidebar {

    position: fixed;

    top: 176px;

    left: 0;

    bottom: 0;

    height: auto;

    width: min(92vw, 380px);

    min-width: 0;

    z-index: 3500;

  }

  #sidebar.closed {

    margin-left: calc(-1 * min(92vw, 380px));

  }

  #sidebar-header {

    padding: 12px;

  }

  #sortSelect,
  #dateFilter {

    height: 40px;

    margin-bottom: 8px;

  }

  #dateRangeFilter {

    padding: 10px;

    border-radius: 12px;

  }

  .date-range-actions {

    grid-template-columns: 1fr;

  }

  #filters {

    gap: 7px;

    margin-bottom: 8px;

  }

  .filter-chip {

    padding:
      8px
      10px;

    font-size: 12px;

  }

  #eventListToolbar {

    padding:
      10px
      12px
      0;

  }

  #eventList {

    padding: 12px;

  }

  .event-card {

    padding: 13px;

    margin-bottom: 10px;

    border-radius: 14px;

  }

  #eventDrawer.open {

    top: 176px;

    width: 100%;

  }

  #floatingActions {

    right: 14px;

    bottom: 68px;

    gap: 8px;

  }

  .floating-actions-label {

    display: none;

  }

  #floatingActions button {

    width: 46px;

    height: 46px;

    font-size: 20px;

  }

  #legalLinks {

    display: none;

  }

  body.event-list-fullscreen #app {

    height: calc(100vh - 176px);

    margin-top: 176px;

  }

  body.event-list-fullscreen #sidebar {

    top: 176px;

    width: 100%;

    height: calc(100vh - 176px);

  }

  body.event-list-fullscreen #sidebar-header {

    display: grid;

    grid-template-columns: 1fr;

    gap: 8px;

  }

  body.event-list-fullscreen #dateRangeFilter,
  body.event-list-fullscreen #filters {

    grid-column: auto;

  }

  body.event-list-fullscreen #eventList {

    grid-template-columns: 1fr;

  }

  body.event-list-fullscreen #floatingActions {

    display: none;

  }

  body.event-list-fullscreen #eventListPagination {

    padding:
      10px
      10px
      14px;

  }

  body.event-list-fullscreen #eventListPagination button {

    min-width: 78px;

    min-height: 36px;

    font-size: 12px;

  }

  body.event-list-fullscreen .event-list-page-info {

    min-width: 72px;

    font-size: 12px;

  }

}

/* Final override layer */
#mapStyleSelect,
#sortSelect,
#dateFilter {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-weight: 750;
  outline: none;
}

#mapStyleSelect:hover,
#sortSelect:hover,
#dateFilter:hover,
#mapStyleSelect:focus,
#sortSelect:focus,
#dateFilter:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

#activeFilterSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

#activeFilterSummary span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 11px;
  font-weight: 850;
}

#resetFiltersBtn {
  width: 100%;
  min-height: 38px;
  border: 1px solid #111827;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-weight: 850;
  cursor: pointer;
}

#resetFiltersBtn:hover {
  border-color: #22c55e;
  color: #166534;
  transform: translateY(-1px);
}

.event-list-empty {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 28px;
  border: 1px dashed #d1d5db;
  border-radius: 14px;
  background: #f9fafb;
  text-align: center;
}

.event-list-empty strong {
  color: #111827;
  font-size: 16px;
}

.event-list-empty span {
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
}

.favorite-btn.active {
  color: #dc2626;
}

#legalLinks {
  right: 14px;
  bottom: 12px;
  left: auto;
  width: auto;
  max-width: max-content;
  padding: 5px 7px;
  border-radius: 999px;
  gap: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

#legalLinks a {
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

#floatingActions {
  right: 18px;
  bottom: 72px;
  gap: 8px;
}

.floating-actions-label {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
}

#floatingActions button {
  width: 48px;
  height: 48px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  font-size: 20px;
}

#floatingActions button:hover {
  border-color: #22c55e;
  color: #166534;
}

#mapToolsToggle {
  display: inline-grid;
  place-items: center;
}

#mapToolsMenu {
  position: absolute;
  right: 0;
  bottom: 56px;
  display: grid;
  gap: 8px;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#floatingActions.open #mapToolsMenu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#mapStyleSelect {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#favoritesBtn,
#favoritesBtn:hover,
#favoritesBtn:focus-visible,
#favoritesBtn.active {
  color: #dc2626;
}

.pending-card.needs-coordinates {
  border-color: #f59e0b;
}

.pending-card.needs-coordinates .pending-card-header::after {
  content: "Needs coordinates";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 850;
}

body.event-list-fullscreen #sidebar-header {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: start;
  gap: 10px;
}

body.event-list-fullscreen #dateRangeFilter {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 7px;
  padding: 10px;
}

body.event-list-fullscreen .date-range-title,
body.event-list-fullscreen .date-range-actions,
body.event-list-fullscreen #filters,
body.event-list-fullscreen #activeFilterSummary,
body.event-list-fullscreen #resetFiltersBtn {
  grid-column: auto;
}

body.event-list-fullscreen .date-range-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.event-list-fullscreen #filters,
body.event-list-fullscreen #activeFilterSummary {
  align-content: start;
  margin: 0;
}

body.event-list-fullscreen #resetFiltersBtn {
  align-self: start;
}

body.event-list-fullscreen #floatingActions,
body.event-list-fullscreen #legalLinks {
  display: none;
}

body.event-list-fullscreen #eventListPagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.96);
}

body.event-list-fullscreen #eventListPagination button {
  min-width: 94px;
  min-height: 38px;
  border: 1px solid #111827;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-weight: 850;
}

body.event-list-fullscreen #eventListPagination button:hover:not(:disabled) {
  border-color: #22c55e;
  color: #166534;
}

body.event-list-fullscreen #eventListPagination button:disabled {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
}

body.event-list-fullscreen .event-list-page-info {
  min-width: 92px;
  color: #374151;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

@media (max-width: 980px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  body.event-list-fullscreen #dateRangeFilter,
  body.event-list-fullscreen #filters,
  body.event-list-fullscreen #activeFilterSummary,
  body.event-list-fullscreen #resetFiltersBtn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  #topbar {
    padding: 10px 12px;
  }

  #topbar-center {
    min-width: 0;
  }

  #topbar-center h1 {
    font-size: 22px;
    text-align: center;
  }

  #searchInput {
    min-height: 42px;
  }

  #authArea {
    flex-wrap: wrap;
  }

  #app {
    height: calc(100vh - 170px);
    margin-top: 170px;
  }

  #sidebar {
    top: 170px;
    width: min(92vw, 380px);
  }

  #sidebar-header {
    padding: 10px;
  }

  #mapStyleSelect,
  #sortSelect,
  #dateFilter,
  #resetFiltersBtn {
    min-height: 40px;
  }

  #dateRangeFilter {
    gap: 8px;
  }

  .date-range-actions {
    grid-template-columns: 1fr;
  }

  .event-card {
    padding: 13px;
  }

  #floatingActions {
    right: 12px;
    bottom: 62px;
  }

  #floatingActions.open {
    display: flex;
  }

  #floatingActions button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .floating-actions-label,
  #legalLinks {
    display: none;
  }

  body.event-list-fullscreen #app {
    height: calc(100vh - 170px);
    margin-top: 170px;
  }

  body.event-list-fullscreen #sidebar {
    top: 170px;
    width: 100%;
    height: calc(100vh - 170px);
  }

  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
  }

  body.event-list-fullscreen #eventList {
    grid-template-columns: 1fr;
  }

  body.event-list-fullscreen #eventDrawer.open {
    top: 170px;
    width: 100%;
  }

  body.event-list-fullscreen #eventListPagination {
    gap: 8px;
  }

  body.event-list-fullscreen #eventListPagination button {
    min-width: 76px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* Professional app header polish */
:root {
  --header-height: 128px;
}

#topbar {
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 16px 28px 18px;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  backdrop-filter: blur(14px);
}

#topbar::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  opacity: 0.55;
}

#topbar-left {
  position: absolute;
  left: 28px;
  top: 50%;
  width: auto;
  transform: translateY(-50%);
  z-index: 2;
}

#toggleSidebar {
  width: 46px;
  height: 46px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#toggleSidebar:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
  transform: translateY(-1px);
}

#topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 48vw);
  min-width: 360px;
  display: grid;
  justify-items: center;
  gap: 13px;
}

#topbar-center h1,
#topbar-center .app-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #0f172a;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

#topbar-center h1::after {
  display: none;
}

.app-logo-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 25%, #f0fdf4, #86efac);
  color: #064e3b;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.16);
}

#topbar-search {
  position: relative;
  width: 100%;
  display: block;
}

#topbar-search::before {
  content: "?";
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 20px;
  font-weight: 900;
  pointer-events: none;
}

#topbar-search input,
#searchInput {
  width: 100%;
  height: 48px;
  max-width: none;
  padding: 0 20px 0 48px;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.075), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

#topbar-search input:hover,
#searchInput:hover {
  border-color: #86efac;
}

#topbar-search input:focus,
#searchInput:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 10px 26px rgba(15, 23, 42, 0.09);
}

#topbar-right {
  position: absolute;
  right: 28px;
  top: 50%;
  width: min(430px, 31vw);
  transform: translateY(-50%);
  z-index: 2;
}

#authArea {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#authArea button,
#topbar-right button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #111827;
  border-radius: 13px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

#authArea button:hover,
#topbar-right button:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
  opacity: 1;
  transform: translateY(-1px);
}

#addEventBtn {
  background: #166534 !important;
  border-color: #166534 !important;
}

#addEventBtn:hover {
  background: #ffffff !important;
  border-color: #22c55e !important;
  color: #166534 !important;
}

#app {
  height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
}

#sidebar,
#eventDrawer.open {
  top: var(--header-height);
}

@media (max-width: 1080px) {
  #topbar-center {
    width: min(520px, calc(100vw - 360px));
    min-width: 300px;
  }

  #topbar-right {
    width: 250px;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 172px;
  }

  #topbar {
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 12px 14px 14px;
    flex-direction: column;
    justify-content: flex-start;
  }

  #topbar-left {
    left: 14px;
    top: 14px;
    transform: none;
  }

  #topbar-center {
    position: static;
    width: 100%;
    min-width: 0;
    transform: none;
    padding: 0 54px;
    gap: 10px;
  }

  #topbar-center h1,
  #topbar-center .app-title {
    font-size: 23px;
  }

  .app-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    font-size: 18px;
  }

  #topbar-search input,
  #searchInput {
    height: 44px;
    padding-left: 44px;
    font-size: 14px;
  }

  #topbar-right {
    position: static;
    width: 100%;
    transform: none;
  }

  #authArea {
    justify-content: center;
    gap: 7px;
  }

  #authArea button,
  #topbar-right button {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  #app {
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
  }

  #sidebar,
  #eventDrawer.open {
    top: var(--header-height);
  }

  body.event-list-fullscreen #app {
    height: calc(100vh - var(--header-height));
    margin-top: var(--header-height);
  }

  body.event-list-fullscreen #sidebar,
  body.event-list-fullscreen #eventDrawer.open {
    top: var(--header-height);
  }
}

/* Full app polish layer */
.app-logo-mark {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.14);
}

#topbar-search::before {
  content: "\1F50D";
  font-size: 16px;
  color: #64748b;
  font-weight: 700;
}

#sidebar-header {
  background: #ffffff;
}

#sortSelect,
#dateFilter,
#mapStyleSelect,
#dateRangeFilter input {
  height: 40px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
}

#dateRangeFilter {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.date-range-title,
#dateRangeFilter label {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.filter-chip {
  min-height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  font-weight: 850;
}

.filter-chip:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

.filter-chip.active {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #166534;
}

.event-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 15px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.event-card:hover,
.event-card.active {
  border-color: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(34, 197, 94, 0.13);
}

.event-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.event-date {
  margin-bottom: 6px;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.event-title {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.event-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.event-facts-grid div {
  min-width: 0;
  padding: 9px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.event-facts-grid span,
.event-facts-grid strong {
  display: block;
}

.event-facts-grid span {
  margin-bottom: 5px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-facts-grid strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.event-meta {
  margin-bottom: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.event-distance,
.event-sport {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.event-distance {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e5e7eb;
}

.event-sport {
  margin-top: 0;
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.favorite-btn {
  flex: 0 0 auto;
  color: #dc2626;
}

.event-list-loading {
  border-style: solid;
}

#eventDrawer {
  border-left: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: -18px 0 40px rgba(15, 23, 42, 0.12);
}

#drawerContent {
  padding: 22px;
}

.drawer-hero {
  height: 210px;
  margin: -22px -22px 20px -22px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #14532d;
  background-size: cover;
  background-position: center;
}

.drawer-overlay {
  padding: 22px;
}

.drawer-overlay h2,
.drawer-header h2 {
  max-width: 92%;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: 0;
}

.drawer-section {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.drawer-label {
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.drawer-text {
  color: #111827;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.drawer-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-weight: 900;
  text-decoration: none;
}

.leaflet-popup-content-wrapper {
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

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

.popup-card {
  min-width: 230px;
  padding: 14px;
}

.popup-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 10px;
  font-weight: 900;
}

.popup-title {
  margin-bottom: 8px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.popup-meta-grid {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.popup-distance {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e5e7eb;
  font-size: 11px;
  font-weight: 900;
}

.popup-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  border: 1px solid #16a34a;
  border-radius: 11px;
  background: #16a34a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.popup-link:visited,
.popup-link:active {
  color: #ffffff;
}

.popup-link:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

#adminStats {
  gap: 12px;
}

.admin-stat-card,
.pending-card {
  border-radius: 14px;
  border-color: #e5e7eb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
}

.admin-stat-card:hover,
.pending-card:hover {
  border-color: #22c55e;
  box-shadow: 0 14px 30px rgba(34, 197, 94, 0.12);
}

.admin-stat-card span,
.pending-card-details span,
.pending-card-description span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .event-card {
    padding: 13px;
  }

  .event-title {
    font-size: 14px;
  }

  .event-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .drawer-hero {
    height: 170px;
  }

  .drawer-overlay h2,
  .drawer-header h2 {
    font-size: 22px;
  }
}

/* Event stats polish */
.event-stats-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 14px;
}

.event-modal-card select,
.event-modal-card textarea,
.event-modal-card input {
  width: 100%;
}

.event-modal-card select {
  margin-top: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font-weight: 750;
}

.event-modal-card select:hover,
.event-modal-card select:focus {
  border-color: #22c55e;
  outline: none;
}

.event-stats-list {
  display: grid;
  gap: 9px;
}

.event-stat-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.event-stat-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: #ecfdf5;
  color: #166534;
  font-size: 17px;
}

.event-stat-row strong {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-stat-row p {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.event-stats-empty {
  padding: 10px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 620px) {
  .event-stats-fields {
    grid-template-columns: 1fr;
  }
}

/* Professional consistency pass */
.filter-group-label {
  margin: 10px 0 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#sidebar-header .filter-group-label:first-child {
  margin-top: 0;
}

#resetFiltersBtn,
#toggleEventListFullscreen,
#eventListPagination button,
.date-range-actions button {
  border: 1px solid #111827;
  background: #ffffff;
  color: #111827;
  font-weight: 850;
}

#resetFiltersBtn:hover,
#toggleEventListFullscreen:hover,
#eventListPagination button:hover:not(:disabled),
.date-range-actions button:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

#applyDateRangeFilter,
#submitEventBtn,
.drawer-button,
.approve-event-btn {
  border-color: #16a34a;
  background: #16a34a;
  color: #ffffff;
}

#applyDateRangeFilter:hover,
#submitEventBtn:hover,
.drawer-button:hover,
.approve-event-btn:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

.reject-event-btn {
  border-color: #fecaca;
  background: #ffffff;
  color: #b91c1c;
}

.reject-event-btn:hover {
  border-color: #b91c1c;
  background: #fff1f2;
  color: #991b1b;
}

.drawer-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.drawer-overview-grid div {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.drawer-overview-grid span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.drawer-overview-grid strong {
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.drawer-button {
  position: sticky;
  bottom: 14px;
  z-index: 3;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.18);
}

.popup-card {
  min-width: 210px;
  padding: 12px;
}

.popup-chip {
  min-height: 20px;
  margin-bottom: 7px;
  font-size: 9px;
}

.popup-title {
  margin-bottom: 7px;
  font-size: 14px;
}

.popup-meta-grid {
  gap: 4px;
  margin-bottom: 9px;
  font-size: 11px;
}

.popup-distance {
  min-height: 22px;
  font-size: 10px;
}

.popup-link {
  min-height: 32px;
  margin-top: 10px;
  font-size: 11px;
}

.admin-stat-card {
  padding: 13px 14px;
}

.admin-stat-card strong {
  font-size: 24px;
}

.pending-card {
  padding: 15px;
}

.pending-card-details {
  gap: 8px;
}

.pending-card-details div,
.pending-card-description {
  padding: 9px;
  border-radius: 11px;
}

@media (max-width: 720px) {
  .drawer-overview-grid {
    grid-template-columns: 1fr;
  }

  .filter-group-label {
    margin-top: 8px;
  }
}

/* Targeted layout fixes */
.popup-link,
.popup-link:link,
.popup-link:visited,
.popup-link:active {
  color: #ffffff !important;
}

.popup-link:hover,
.popup-link:focus-visible {
  color: #166534 !important;
}

#sortSelect,
#dateFilter,
#mapStyleSelect {
  height: 42px;
  min-height: 42px;
  padding: 0 14px;
  line-height: 42px;
  font-size: 13px;
  box-sizing: border-box;
}

.filter-group-label {
  display: flex;
  align-items: center;
  min-height: 14px;
  line-height: 1.1;
  margin: 12px 0 6px;
}

/* Drawer title without photo background */
.drawer-titlebar {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  margin: -22px -22px 18px -22px;
  padding: 24px 58px 22px 22px;
  background:
    linear-gradient(
      135deg,
      #f0fdf4 0%,
      #ffffff 56%,
      #ecfdf5 100%
    );
  border-bottom: 1px solid #bbf7d0;
}

.drawer-favorite-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #ffffff;
  color: #9ca3af;
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.1);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.drawer-favorite-btn:hover,
.drawer-favorite-btn:focus-visible {
  border-color: #22c55e;
  color: #ef4444;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(22, 163, 74, 0.16);
}

.drawer-favorite-btn.active {
  border-color: #fecaca;
  background: #fff7f7;
  color: #ef4444;
}

.drawer-title-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 26px;
}

.drawer-title-copy {
  min-width: 0;
}

.drawer-title-kicker {
  margin-bottom: 5px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer-titlebar h2 {
  margin: 0;
  max-width: 100%;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: none;
}

.drawer-title-meta {
  margin-top: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#closeDrawer {
  z-index: 5;
}

/* Compact sidebar filters */
body:not(.event-list-fullscreen) #sidebar-header {
  max-height: none;
  overflow: visible;
  padding-bottom: 10px;
}

body:not(.event-list-fullscreen) .filter-accordion {
  margin-bottom: 6px;
  border-radius: 12px;
}

body:not(.event-list-fullscreen) .filter-accordion-toggle {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
}

body:not(.event-list-fullscreen) .filter-accordion-toggle::after {
  width: 19px;
  height: 19px;
  font-size: 13px;
}

body:not(.event-list-fullscreen) .filter-accordion-content {
  padding: 0 8px 8px;
}

body:not(.event-list-fullscreen) .filter-sport-card .filter-accordion-content {
  padding-top: 6px;
}

body:not(.event-list-fullscreen) #sortSelect,
body:not(.event-list-fullscreen) #dateFilter {
  height: 34px;
  min-height: 34px;
  line-height: 34px;
  font-size: 12px;
}

body:not(.event-list-fullscreen) #filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body:not(.event-list-fullscreen) .filter-chip {
  min-height: 29px;
  padding: 5px 7px;
  font-size: 11px;
}

body:not(.event-list-fullscreen) #dateRangeFilter:not(.active) {
  display: none;
}

body:not(.event-list-fullscreen) #dateRangeFilter.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
  padding: 8px;
}

body:not(.event-list-fullscreen) #dateRangeFilter .date-range-title,
body:not(.event-list-fullscreen) #dateRangeFilter .date-range-actions {
  grid-column: 1 / -1;
}

body:not(.event-list-fullscreen) #dateRangeFilter input {
  height: 32px;
  min-height: 32px;
}

body:not(.event-list-fullscreen) .filter-dropdown {
  position: relative;
  overflow: visible;
  z-index: 20;
}

body:not(.event-list-fullscreen) .filter-dropdown .filter-accordion-content {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  padding: 10px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

body:not(.event-list-fullscreen) #distanceFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  gap: 6px;
  margin: 0;
  padding: 0;
}

body:not(.event-list-fullscreen) .distance-filter-chip {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 10.5px;
}

#distanceFilterCount {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 10px;
  font-weight: 900;
}

.filter-actions-row {
  display: flex;
  align-items: center;
  margin: 6px 0;
}

.filter-actions-row #resetFiltersBtn {
  width: 100%;
  min-height: 34px;
}

.active-filter-label {
  margin-top: 8px;
}

body:not(.event-list-fullscreen) #activeFilterSummary {
  min-height: 0;
  max-height: 48px;
  overflow: hidden;
}

body.event-list-fullscreen .filter-actions-row {
  grid-area: reset;
  align-self: end;
  margin: 0;
}

body.event-list-fullscreen .filter-actions-row #resetFiltersBtn {
  min-height: 42px;
}

body.event-list-fullscreen #dateRangeFilter:not(.active) {
  display: none;
}

body.event-list-fullscreen #dateRangeFilter.active {
  display: grid;
}

@media (max-width: 760px) {
  body:not(.event-list-fullscreen) #filters {
    grid-template-columns: 1fr 1fr;
  }

  body:not(.event-list-fullscreen) .filter-dropdown .filter-accordion-content {
    position: static;
    margin-top: 0;
    box-shadow: none;
  }
}

body:not(.event-list-fullscreen) #sidebar-header {
  display: block;
  flex: 0 0 auto;
  max-height: min(50vh, 430px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #bbf7d0 transparent;
}

body.event-list-fullscreen #sidebar-header {
  display: grid;
  grid-template-columns: 180px 220px minmax(320px, 1fr) minmax(220px, 280px) 140px;
  grid-template-areas:
    "sortLabel dateLabel dateRange sportLabel activeLabel"
    "sortSelect dateSelect dateRange filters reset"
    "summary summary summary summary summary";
  align-items: end;
  gap: 6px 12px;
  padding: 14px 18px;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(1) {
  grid-area: sortLabel;
}

body.event-list-fullscreen #sortSelect {
  grid-area: sortSelect;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(2) {
  grid-area: dateLabel;
}

body.event-list-fullscreen #dateFilter {
  grid-area: dateSelect;
}

body.event-list-fullscreen #dateRangeFilter {
  grid-area: dateRange;
  align-self: stretch;
  margin: 0;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(3) {
  grid-area: sportLabel;
}

body.event-list-fullscreen #filters {
  grid-area: filters;
  align-self: end;
  margin: 0;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(4) {
  grid-area: activeLabel;
}

body.event-list-fullscreen #resetFiltersBtn {
  grid-area: reset;
  align-self: end;
  min-height: 42px;
}

body.event-list-fullscreen #activeFilterSummary {
  grid-area: summary;
  margin: 2px 0 0;
}

body.event-list-fullscreen .filter-group-label {
  margin: 0;
}

body.event-list-fullscreen #dateRangeFilter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 9px;
}

body.event-list-fullscreen .date-range-title {
  grid-column: 1 / -1;
  min-height: 12px;
  line-height: 1;
}

body.event-list-fullscreen #dateRangeFilter input {
  height: 34px;
  min-height: 34px;
  line-height: 34px;
}

body.event-list-fullscreen .date-range-actions button {
  min-height: 34px;
}

@media (max-width: 1100px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "sortLabel dateLabel"
      "sortSelect dateSelect"
      "dateRange dateRange"
      "sportLabel activeLabel"
      "filters reset"
      "summary summary";
  }
}

@media (max-width: 720px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sortLabel"
      "sortSelect"
      "dateLabel"
      "dateSelect"
      "dateRange"
      "sportLabel"
      "filters"
      "activeLabel"
      "summary"
      "reset";
  }
}

/* Upload preview and admin data-quality polish */
#eventSubmitPreview {
  display: grid;
  gap: 6px;
  margin: 6px 0 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

#eventSubmitPreview strong {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

#eventSubmitPreview span,
#eventSubmitPreview li {
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

#eventSubmitPreview ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.event-modal-card select {
  width: 100%;
  min-height: 46px;
}

#adminStats {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Event submit modal sizing fix */
#eventModal.open {
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}

.event-modal-card {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 18px;
}

#closeEventModal {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5;
  margin: -8px -8px 4px 8px;
}

.event-modal-card h2 {
  margin-bottom: 14px;
}

.event-modal-card label {
  display: block;
  margin-bottom: 10px;
}

.event-modal-card input,
.event-modal-card select {
  min-height: 42px;
  padding: 0 13px;
}

.event-stats-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#eventSubmitPreview {
  margin-bottom: 12px;
}

#submitEventBtn {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  box-shadow: 0 -10px 22px rgba(255, 255, 255, 0.92);
}

@media (max-width: 640px) {
  #eventModal.open {
    align-items: stretch;
    padding: 10px;
  }

  .event-modal-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 18px;
  }

  .event-stats-fields {
    grid-template-columns: 1fr;
  }

  .season-kpi-grid,
  .season-insights-grid,
  .season-event-row {
    grid-template-columns: 1fr;
  }

  #seasonSportBreakdown {
    grid-template-columns: 1fr;
  }

  .season-event-place {
    justify-self: start;
  }
}

/* Admin data workflow links */
.admin-data-workflow-panel p {
  margin: -4px 0 16px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.admin-data-workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.admin-data-workflow-grid a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 1px solid #d1fae5;
  border-radius: 12px;
  background: white;
  color: #166534;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.2s ease;
}

.admin-data-workflow-grid a:hover {
  border-color: #22c55e;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.12);
  transform: translateY(-1px);
}

/* Distance filter chips */
#distanceFilters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
  max-height: 112px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: #bbf7d0 transparent;
}

.distance-filter-chip {
  min-height: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.distance-filter-chip:hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

.distance-filter-chip.active {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #166534;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.12);
}

.filter-accordion {
  margin-bottom: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-accordion:hover,
.filter-accordion.open {
  border-color: #bbf7d0;
}

.filter-accordion.open {
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.08);
}

.filter-accordion-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: #ffffff;
  color: #111827;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.filter-accordion-toggle::after {
  content: "+";
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1fae5;
  border-radius: 50%;
  color: #166534;
  font-size: 15px;
  line-height: 1;
  transition: 0.2s ease;
}

.filter-accordion.open .filter-accordion-toggle::after {
  content: "−";
  background: #f0fdf4;
  border-color: #22c55e;
}

.filter-accordion-content {
  display: none;
  padding: 0 10px 10px;
}

.filter-accordion.open .filter-accordion-content {
  display: block;
}

.filter-accordion-content #sortSelect,
.filter-accordion-content #dateFilter {
  width: 100%;
}

body.event-list-fullscreen #sidebar-header {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) 140px;
  grid-template-areas:
    "sortGroup dateGroup sportGroup distanceGroup reset"
    "activeLabel summary summary summary summary";
  align-items: start;
}

body.event-list-fullscreen .filter-accordion:nth-of-type(1) {
  grid-area: sortGroup;
}

body.event-list-fullscreen .filter-accordion:nth-of-type(2) {
  grid-area: dateGroup;
}

body.event-list-fullscreen .filter-accordion:nth-of-type(3) {
  grid-area: sportGroup;
}

body.event-list-fullscreen .filter-accordion:nth-of-type(4) {
  grid-area: distanceGroup;
}

body.event-list-fullscreen .filter-accordion {
  margin: 0;
  align-self: start;
}

body.event-list-fullscreen #distanceFilters {
  display: flex;
  flex-wrap: nowrap;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 3px;
}

body.event-list-fullscreen .distance-filter-chip {
  flex: 0 0 auto;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label {
  grid-area: activeLabel;
  align-self: center;
}

@media (max-width: 1280px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 140px;
    grid-template-areas:
      "sortGroup dateGroup reset"
      "sportGroup distanceGroup distanceGroup"
      "activeLabel summary summary";
  }
}

@media (max-width: 760px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sortGroup"
      "dateGroup"
      "sportGroup"
      "distanceGroup"
      "activeLabel"
      "summary"
      "reset";
  }
}

.event-top .event-status-badge {
  margin: 0 0 7px;
}

.popup-card .event-status-badge {
  margin: 0 0 8px 6px;
  vertical-align: top;
}

.drawer-title-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.drawer-title-kicker .event-status-badge {
  text-transform: none;
}

.drawer-source-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.drawer-source-box div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.drawer-source-box span,
.drawer-source-box small {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.drawer-source-box a {
  color: #166534;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.drawer-source-box a:hover {
  color: #16a34a;
  text-decoration: underline;
}

.drawer-source-box p {
  margin: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
}

.drawer-source-box small {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
}

#seasonPlannerModal.open {
  align-items: stretch;
  justify-content: center;
  padding: 14px;
}

#seasonPlannerModal.open .season-planner-card {
  flex: 1 1 auto;
}

.drawer-titlebar .event-status-badge {
  margin-top: 2px;
  transform: scale(0.92);
  transform-origin: left center;
}

.event-card .event-status-badge,
.popup-card .event-status-badge {
  min-height: 20px;
  padding: 3px 7px;
  font-size: 10px;
}

.event-facts-grid .event-status-badge {
  width: fit-content;
}

@media (max-width: 900px) {
  .season-event-row,
  .season-priority-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .season-event-place,
  .season-priority-control,
  .season-priority-badge,
  .season-open-event {
    grid-column: 2;
    justify-self: stretch;
  }
}

/* Final accordion fullscreen overrides */
body.event-list-fullscreen #sortSelect,
body.event-list-fullscreen #dateFilter,
body.event-list-fullscreen #dateRangeFilter,
body.event-list-fullscreen #filters,
body.event-list-fullscreen #distanceFilters {
  grid-area: auto;
}

body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(1),
body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(2),
body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(3),
body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(4),
body.event-list-fullscreen #sidebar-header > .filter-group-label:nth-of-type(5) {
  grid-area: activeLabel;
}

@media (max-width: 980px) {
  .admin-quality-grid {
    grid-template-columns: 1fr;
  }
}

body.event-list-fullscreen .filter-accordion-content #dateRangeFilter {
  display: grid;
  margin-top: 8px;
}

/* Mobile-first production pass */
@media (max-width: 768px) {
  :root {
    --header-height: 146px;
  }

  html,
  body {
    min-height: 100dvh;
    overflow: hidden;
  }

  #topbar {
    height: var(--header-height);
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "menu title"
      "search search"
      "actions actions";
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  #topbar-left {
    grid-area: menu;
    position: static;
    width: auto;
    transform: none;
  }

  #toggleSidebar {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
  }

  #topbar-center {
    grid-area: title;
    display: contents;
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
  }

  #topbar-center h1,
  #topbar-center .app-title {
    grid-area: title;
    justify-content: center;
    gap: 8px;
    font-size: 21px;
    line-height: 1.1;
    min-width: 0;
  }

  .app-logo-mark {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  #topbar-search {
    grid-area: search;
    width: 100%;
  }

  #topbar-search input,
  #searchInput {
    height: 42px;
    min-height: 42px;
    padding-left: 42px;
    font-size: 14px;
  }

  #topbar-search::before {
    left: 15px;
  }

  #topbar-right {
    grid-area: actions;
    position: static;
    width: 100%;
    transform: none;
  }

  #authArea {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  #authArea::-webkit-scrollbar {
    display: none;
  }

  #topbar-right button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }

  #app {
    height: calc(100dvh - var(--header-height));
    margin-top: var(--header-height);
  }

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

  #sidebar {
    top: var(--header-height);
    width: min(88vw, 360px);
    height: calc(100dvh - var(--header-height));
    margin-left: 0;
    transform: translateX(0);
    z-index: 900;
    border-right: 1px solid #e5e7eb;
    box-shadow: 18px 0 34px rgba(15, 23, 42, 0.16);
  }

  #sidebar.closed {
    margin-left: 0;
    transform: translateX(-105%);
  }

  #sidebar-header {
    padding: 10px;
    max-height: min(46dvh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .filter-accordion {
    margin-bottom: 7px;
    border-radius: 12px;
  }

  .filter-accordion-toggle {
    min-height: 36px;
  }

  .filter-accordion-content {
    padding: 0 9px 9px;
  }

  #distanceFilters {
    max-height: 96px;
  }

  #eventListToolbar {
    padding: 10px;
  }

  #eventList {
    padding: 10px;
    padding-bottom: 84px;
  }

  .event-card {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 12px;
  }

  #floatingActions {
    right: 12px;
    bottom: 74px;
    z-index: 860;
  }

  #floatingActions button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  body.event-list-fullscreen #floatingActions {
    display: none;
  }

  #eventDrawer.open,
  body.event-list-fullscreen #eventDrawer.open {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: min(76dvh, 650px);
    border-left: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 18px 18px 0 0;
    z-index: 1100;
    box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.18);
  }

  #drawerContent {
    height: 100%;
    overflow-y: auto;
    padding: 16px;
  }

  .drawer-hero {
    height: 152px;
    margin: -16px -16px 14px;
  }

  .drawer-overlay {
    padding: 16px;
  }

  .drawer-overlay h2,
  .drawer-header h2 {
    font-size: 20px;
    line-height: 1.15;
  }

  #closeDrawer {
    top: 10px;
    right: 10px;
  }

  .drawer-overview-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .drawer-section {
    padding: 10px;
  }

  .drawer-button {
    bottom: 10px;
  }

  body.event-list-fullscreen #app {
    height: calc(100dvh - var(--header-height));
    margin-top: var(--header-height);
  }

  body.event-list-fullscreen #sidebar {
    top: var(--header-height);
    width: 100%;
    height: calc(100dvh - var(--header-height));
    transform: none;
    box-shadow: none;
  }

  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sortGroup"
      "dateGroup"
      "sportGroup"
      "distanceGroup"
      "activeLabel"
      "summary"
      "reset";
    gap: 8px;
    max-height: min(42dvh, 380px);
    overflow-y: auto;
  }

  body.event-list-fullscreen .filter-accordion {
    margin: 0;
  }

  body.event-list-fullscreen #eventList {
    grid-template-columns: 1fr;
    padding: 10px;
    padding-bottom: 76px;
  }

  body.event-list-fullscreen #eventListPagination {
    gap: 7px;
    padding: 8px 10px;
  }

  body.event-list-fullscreen #eventListPagination button {
    min-width: 72px;
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
  }

  .event-list-page-info {
    min-width: 72px;
    font-size: 12px;
  }

  #legalLinks {
    left: 10px;
    right: auto;
    bottom: 10px;
    max-width: calc(100vw - 96px);
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  :root {
    --header-height: 140px;
  }

  #topbar-center h1,
  #topbar-center .app-title {
    font-size: 19px;
  }

  #topbar-right button {
    min-height: 30px;
    padding: 0 9px;
  }

  .drawer-overview-grid {
    grid-template-columns: 1fr;
  }
}

/* Final select-style filter layout */
.filter-select-card {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select-card:hover,
.filter-select-card:focus-within {
  border-color: #bbf7d0;
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.08);
}

.filter-select-card label {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.filter-select-card select,
#sortSelect,
#dateFilter {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #111827;
  font-size: 12px;
  font-weight: 850;
  line-height: 36px;
  cursor: pointer;
}

.filter-select-card select:hover,
.filter-select-card select:focus {
  border-color: #22c55e;
  outline: none;
}

body:not(.event-list-fullscreen) .filter-select-card {
  padding: 8px;
}

body:not(.event-list-fullscreen) .filter-sort-card {
  margin-bottom: 6px;
}

body:not(.event-list-fullscreen) .filter-date-card {
  margin-bottom: 6px;
}

body.event-list-fullscreen #sidebar-header {
  grid-template-columns: 180px 220px minmax(260px, 1fr) minmax(220px, 280px) 140px;
  grid-template-areas:
    "sortGroup dateGroup sportGroup distanceGroup reset"
    "activeLabel summary summary summary summary";
}

body.event-list-fullscreen .filter-sort-card {
  grid-area: sortGroup;
}

body.event-list-fullscreen .filter-date-card {
  grid-area: dateGroup;
}

body.event-list-fullscreen .filter-sport-card {
  grid-area: sportGroup;
}

body.event-list-fullscreen .filter-distance-card {
  grid-area: distanceGroup;
}

body.event-list-fullscreen .filter-select-card,
body.event-list-fullscreen .filter-accordion {
  align-self: start;
  margin: 0;
}

body.event-list-fullscreen #dateRangeFilter.active {
  margin-top: 8px;
}

/* Final event card layout based on full readable race data */
.event-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.event-top {
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 13px;
  border-bottom: 1px solid #bbf7d0;
  background:
    linear-gradient(135deg, #f0fdf4 0%, #ffffff 72%);
}

.event-top > div {
  min-width: 0;
}

.event-title {
  margin: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.favorite-btn {
  flex: 0 0 auto;
}

.event-facts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
  padding: 12px 13px 10px;
}

.event-facts-grid div {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.event-facts-grid .event-location-fact {
  grid-column: 1 / -1;
}

.event-facts-grid span {
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-facts-grid strong {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.event-card .event-status-badge,
.popup-card .event-status-badge,
.drawer-titlebar .event-status-badge {
  max-width: 100%;
}

.event-facts-grid .event-status-badge {
  width: 100%;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 6px;
}

.event-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 13px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.event-status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.event-status-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-status-bar.confirmed {
  background: #f0fdf4;
  color: #166534;
}

.event-status-bar.confirmed .event-status-dot {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.event-status-bar.registration-open {
  background: #eff6ff;
  color: #1d4ed8;
}

.event-status-bar.registration-open .event-status-dot {
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.event-status-bar.date-expected {
  background: #fffbeb;
  color: #92400e;
}

.event-status-bar.date-expected .event-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.event-status-bar.sold-out,
.event-status-bar.cancelled {
  background: #fef2f2;
  color: #b91c1c;
}

.event-status-bar.sold-out .event-status-dot,
.event-status-bar.cancelled .event-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

.event-status-bar.unclear {
  background: #f8fafc;
  color: #475569;
}

body.event-list-fullscreen #eventList {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  padding: 14px 18px 18px;
}

body.event-list-fullscreen .event-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.event-list-fullscreen .event-card:hover,
body.event-list-fullscreen .event-card.active {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(34, 197, 94, 0.11);
}

body.event-list-fullscreen .event-top {
  align-items: center;
  margin-bottom: 0;
}

body.event-list-fullscreen .event-title {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.3;
}

body.event-list-fullscreen .favorite-btn {
  flex: 0 0 auto;
}

body.event-list-fullscreen .event-facts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 0;
  padding: 12px 13px;
}

body.event-list-fullscreen .event-facts-grid div {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

body.event-list-fullscreen .event-facts-grid span {
  margin-bottom: 4px;
  font-size: 10px;
}

body.event-list-fullscreen .event-facts-grid strong {
  font-size: 13px;
  line-height: 1.35;
}

body.event-list-fullscreen .event-facts-grid div:nth-child(3) strong {
  display: block;
  overflow: visible;
}

@media (max-width: 1280px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 140px;
    grid-template-areas:
      "sortGroup dateGroup reset"
      "sportGroup distanceGroup distanceGroup"
      "activeLabel summary summary";
  }
}

@media (max-width: 760px) {
  body.event-list-fullscreen #eventList {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  body.event-list-fullscreen .event-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sortGroup"
      "dateGroup"
      "sportGroup"
      "distanceGroup"
      "activeLabel"
      "summary"
      "reset";
  }
}

/* Final fullscreen event list layout fix */
body.event-list-fullscreen {
  overflow: hidden;
}

body.event-list-fullscreen #app {
  display: flex;
  height: calc(100vh - 120px);
  margin-top: 120px;
  overflow: hidden;
}

body.event-list-fullscreen #sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.event-list-fullscreen #sidebar-header {
  flex: 0 0 auto;
}

body.event-list-fullscreen #eventListToolbar {
  flex: 0 0 auto;
  padding: 14px 20px 10px;
}

body.event-list-fullscreen #eventList {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  align-content: start;
  overflow-y: auto;
  padding: 14px 20px 24px;
  scrollbar-gutter: stable;
}

body.event-list-fullscreen #eventList::after {
  content: "";
  display: block;
  height: 6px;
}

body.event-list-fullscreen #eventListPagination {
  position: relative;
  bottom: auto;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 10px 20px 14px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.04);
}

body.event-list-fullscreen .event-card {
  width: 100%;
  height: max-content;
  align-self: start;
}

body.event-list-fullscreen.fullscreen-drawer-open #eventList {
  padding-right: min(460px, 40vw);
}

@media (min-width: 1200px) {
  body.event-list-fullscreen #eventList {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }
}

@media (min-width: 1680px) {
  body.event-list-fullscreen #eventList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.event-list-fullscreen #app {
    height: calc(100dvh - 130px);
    margin-top: 130px;
  }

  body.event-list-fullscreen #eventList {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  body.event-list-fullscreen.fullscreen-drawer-open #eventList {
    padding-right: 12px;
  }

  body.event-list-fullscreen #eventListPagination {
    min-height: 58px;
    padding: 9px 10px 12px;
  }
}

/* Final fullscreen custom date range fix */
body.event-list-fullscreen .filter-date-card {
  position: relative;
  z-index: 5;
  overflow: visible;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter {
  position: static;
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  pointer-events: auto;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter:not(.active) {
  display: none;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter.active {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter .date-range-title,
body.event-list-fullscreen .filter-date-card #dateRangeFilter .date-range-actions {
  grid-column: 1 / -1;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter label {
  min-width: 0;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter input {
  width: 100%;
  min-width: 0;
}

body.event-list-fullscreen .filter-date-card .date-range-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.event-list-fullscreen .filter-date-card .date-range-actions button {
  width: 100%;
  min-width: 0;
}

/* Final filter usability polish */
.date-range-actions button,
#applyDateRangeFilter,
#clearDateRangeFilter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

#distanceFilters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.distance-filter-group {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.distance-filter-group-title {
  color: #64748b;
  font-size: 9.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.distance-filter-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.distance-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 0;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.distance-filter-chip:hover,
.distance-filter-chip:focus-visible {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
  outline: none;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.1);
  transform: translateY(-1px);
}

.distance-filter-chip.active {
  border-color: #22c55e;
  background: #f0fdf4;
  color: #166534;
  box-shadow:
    inset 0 0 0 1px rgba(34, 197, 94, 0.14),
    0 8px 18px rgba(34, 197, 94, 0.08);
}

body.event-list-fullscreen .filter-distance-card {
  overflow: visible;
}

body.event-list-fullscreen #distanceFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

body.event-list-fullscreen .distance-filter-group {
  align-content: start;
  padding: 8px;
}

body.event-list-fullscreen .distance-filter-options {
  grid-template-columns: repeat(2, minmax(112px, 1fr));
}

body.event-list-fullscreen .distance-filter-chip {
  flex: initial;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 11.5px;
}

body.event-list-fullscreen .filter-date-card .date-range-actions button {
  min-height: 38px;
  padding: 0 10px;
  font-size: 11.5px;
}

@media (max-width: 1280px) {
  body.event-list-fullscreen #distanceFilters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  body.event-list-fullscreen .filter-date-card #dateRangeFilter.active {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  body.event-list-fullscreen .filter-date-card #dateRangeFilter.active,
  body.event-list-fullscreen .filter-date-card .date-range-actions {
    grid-template-columns: 1fr;
  }
}

#toggleEventCardDensity {
  display: none;
}

body.event-list-fullscreen #toggleEventCardDensity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #166534;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

body.event-list-fullscreen #toggleEventCardDensity:hover,
body.event-list-fullscreen #toggleEventCardDensity:focus-visible {
  border-color: #22c55e;
  background: #ffffff;
  outline: none;
}

body.event-list-fullscreen:not(.event-card-detail-mode) #eventList {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-card {
  border-radius: 12px;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-top {
  padding: 9px 10px;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-title {
  font-size: 14px;
  line-height: 1.25;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-facts-grid {
  gap: 7px 10px;
  padding: 9px 10px 8px;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-facts-grid span {
  margin-bottom: 3px;
  font-size: 9px;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-facts-grid strong {
  font-size: 12px;
  line-height: 1.25;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-status-bar {
  min-height: 29px;
  padding: 6px 10px;
  font-size: 11px;
}

body.event-list-fullscreen:not(.event-card-detail-mode) .event-status-dot {
  width: 8px;
  height: 8px;
}

body.event-list-fullscreen.event-card-detail-mode #eventList {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Search suggestions */
#topbar-search {
  position: relative;
}

#searchSuggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 4500;
  display: none;
  width: min(520px, 92vw);
  max-height: min(420px, calc(100vh - 170px));
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  transform: translateX(-50%);
}

#searchSuggestions.open {
  display: grid;
  gap: 7px;
}

.search-suggestion-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-template-areas:
    "type title"
    "type meta";
  gap: 3px 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.search-suggestion-item:hover,
.search-suggestion-item:focus-visible {
  border-color: #22c55e;
  background: #f0fdf4;
  outline: none;
  transform: translateY(-1px);
}

.search-suggestion-item span {
  grid-area: type;
  align-self: center;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f8fafc;
  color: #166534;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.search-suggestion-item strong {
  grid-area: title;
  min-width: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.search-suggestion-item em {
  grid-area: meta;
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #searchSuggestions {
    top: calc(100% + 6px);
    width: min(100%, calc(100vw - 24px));
    max-height: min(360px, calc(100dvh - 190px));
  }

  .search-suggestion-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "type"
      "title"
      "meta";
  }
}

@media (max-width: 980px) {
  .season-overview-grid {
    grid-template-columns: 1fr;
  }

  .season-overview-hero {
    grid-template-columns: 1fr;
  }

  .season-plan-summary-card {
    grid-column: auto;
  }

  .season-summary-grid {
    grid-template-columns: 1fr;
  }

  .season-next-card strong {
    font-size: 24px;
  }
}

/* Product readiness polish */
.drawer-titlebar {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  padding-right: 68px;
}

.drawer-status-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: help;
}

.drawer-status-pill .event-status-dot {
  width: 12px;
  height: 12px;
}

.drawer-status-pill::after {
  content: attr(data-status-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  min-width: max-content;
  max-width: 180px;
  padding: 7px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.drawer-status-pill:hover::after,
.drawer-status-pill:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.drawer-status-pill.confirmed {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
  box-shadow:
    0 0 0 4px rgba(22, 163, 74, 0.13),
    0 12px 24px rgba(22, 163, 74, 0.18);
}

.drawer-status-pill.registration-open {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12),
    0 12px 24px rgba(37, 99, 235, 0.16);
}

.drawer-status-pill.registration-not-open {
  border-color: #7dd3fc;
  background: #e0f2fe;
  color: #0369a1;
  box-shadow:
    0 0 0 4px rgba(14, 165, 233, 0.12),
    0 12px 24px rgba(14, 165, 233, 0.16);
}

.drawer-status-pill.date-expected {
  border-color: #facc15;
  background: #fef3c7;
  color: #92400e;
  box-shadow:
    0 0 0 4px rgba(245, 158, 11, 0.14),
    0 12px 24px rgba(245, 158, 11, 0.16);
}

.drawer-status-pill.sold-out,
.drawer-status-pill.cancelled {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.13),
    0 12px 24px rgba(239, 68, 68, 0.16);
}

.drawer-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 10px;
  margin: -4px 0 16px;
}

.drawer-season-btn,
.drawer-copy-btn {
  min-height: 42px;
  border: 1px solid #16a34a;
  border-radius: 13px;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

.drawer-copy-btn {
  border-color: #bbf7d0;
  background: #ffffff;
  color: #166534;
}

.drawer-season-btn:hover,
.drawer-copy-btn:hover,
.drawer-season-btn:focus-visible,
.drawer-copy-btn:focus-visible {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
  outline: none;
}

.drawer-season-btn.active {
  border-color: #fecaca;
  background: #fff7f7;
  color: #ef4444;
}

.drawer-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 14px;
  font-size: 14px;
}

.admin-quality-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-quality-grid h4 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-quality-grid h4::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.season-event-row {
  grid-template-columns: 96px minmax(0, 1fr) 120px 132px 72px 82px;
}

.season-google-event {
  min-height: 34px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #ffffff;
  color: #166534;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.season-google-event:hover,
.season-google-event:focus-visible {
  border-color: #22c55e;
  outline: none;
}

#mobileFilterBtn,
#mobileFilterBackdrop {
  display: none;
}

@media (max-width: 768px) {
  #mobileFilterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #ffffff;
    color: #166534;
    font-size: 12px;
    font-weight: 950;
  }

  #mobileFilterBackdrop {
    position: fixed;
    inset: 0;
    z-index: 3200;
    background: rgba(15, 23, 42, 0.3);
  }

  body.mobile-filter-open #mobileFilterBackdrop {
    display: block;
  }

  body.mobile-filter-open #sidebar-header {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3300;
    display: block;
    max-height: min(72dvh, 620px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  }

  body:not(.mobile-filter-open):not(.event-list-fullscreen) #sidebar-header {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border: 0;
  }

  .drawer-titlebar {
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    padding-right: 54px;
  }

  .drawer-status-pill {
    top: 12px;
    left: 12px;
    grid-column: auto;
    justify-self: auto;
  }

  .drawer-action-row {
    grid-template-columns: 1fr;
  }

  .admin-quality-grid {
    grid-template-columns: 1fr;
  }

  .season-event-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .season-priority-badge,
  .season-open-event,
  .season-google-event {
    grid-column: 2;
    justify-self: stretch;
  }
}

/* Final professional filter card sizing */
.filter-select-card,
.filter-accordion {
  border-radius: 13px;
}

.filter-select-card {
  gap: 7px;
  padding: 10px;
}

.filter-select-card label,
.filter-accordion-toggle span,
.distance-filter-group-title,
.date-range-title,
#dateRangeFilter label {
  color: #64748b;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: uppercase;
}

.filter-select-card select,
#sortSelect,
#dateFilter {
  height: 38px;
  min-height: 38px;
  padding: 0 34px 0 12px;
  font-size: 12.5px;
  font-weight: 850;
  line-height: 38px;
}

.filter-accordion-toggle {
  min-height: 38px;
  padding: 0 11px;
  gap: 8px;
}

.filter-accordion-toggle strong,
#distanceFilterCount {
  font-size: 10px;
  font-weight: 950;
}

.filter-chip {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.15;
}

.distance-filter-group {
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
}

.distance-filter-options {
  gap: 7px;
}

.distance-filter-chip {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.15;
}

#dateRangeFilter {
  gap: 8px;
  padding: 10px;
}

#dateRangeFilter input {
  height: 36px;
  min-height: 36px;
  font-size: 12px;
  font-weight: 800;
}

.date-range-actions button,
#applyDateRangeFilter,
#clearDateRangeFilter {
  min-height: 38px;
  font-size: 11.5px;
  font-weight: 900;
}

body:not(.event-list-fullscreen) .filter-select-card {
  padding: 9px;
}

body:not(.event-list-fullscreen) .filter-accordion-toggle {
  min-height: 36px;
}

body:not(.event-list-fullscreen) #sortSelect,
body:not(.event-list-fullscreen) #dateFilter {
  height: 36px;
  min-height: 36px;
  line-height: 36px;
}

body.event-list-fullscreen .filter-select-card,
body.event-list-fullscreen .filter-accordion {
  min-height: 0;
}

@media (max-width: 768px) {
  .filter-select-card label,
  .filter-accordion-toggle span,
  .distance-filter-group-title,
  .date-range-title,
  #dateRangeFilter label {
    font-size: 10px;
  }

  .filter-chip,
  .distance-filter-chip {
    font-size: 11px;
  }
}

/* Final distance filter button polish */
.distance-filter-options {
  grid-template-columns: 1fr;
  gap: 7px;
}

.distance-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #dbe3ea;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
  overflow: visible;
  word-break: normal;
}

.distance-filter-chip:hover,
.distance-filter-chip:focus-visible {
  border-color: #22c55e;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #166534;
}

.distance-filter-chip.active {
  border-color: #22c55e;
  background: linear-gradient(180deg, #ecfdf5 0%, #dcfce7 100%);
  color: #14532d;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body.event-list-fullscreen .distance-filter-options {
  grid-template-columns: repeat(2, minmax(118px, 1fr));
}

body.event-list-fullscreen .distance-filter-chip {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 11.5px;
}

/* Final fullscreen distance filter stability */
body.event-list-fullscreen #sidebar-header {
  grid-template-columns:
    minmax(160px, 190px)
    minmax(190px, 230px)
    minmax(260px, 1fr)
    minmax(120px, 150px);
  grid-template-areas:
    "sortGroup dateGroup sportGroup reset"
    "distanceGroup distanceGroup distanceGroup distanceGroup"
    "activeLabel summary summary summary";
  align-items: start;
  overflow: visible;
}

body.event-list-fullscreen .filter-distance-card {
  grid-area: distanceGroup;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

body.event-list-fullscreen .filter-distance-card .filter-accordion-content {
  position: static;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0 0 13px 13px;
  background: transparent;
  box-shadow: none;
}

body.event-list-fullscreen .filter-distance-card.open .filter-accordion-content {
  display: block;
}

body.event-list-fullscreen #distanceFilters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-height: none;
  gap: 10px;
  overflow: visible;
  padding: 0;
}

body.event-list-fullscreen .distance-filter-group {
  min-width: 0;
  align-content: start;
}

body.event-list-fullscreen .distance-filter-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  width: 100%;
  min-width: 0;
  gap: 7px;
}

.distance-filter-chip {
  box-sizing: border-box;
  min-width: 0;
}

body.event-list-fullscreen .distance-filter-chip {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1280px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(120px, 150px);
    grid-template-areas:
      "sortGroup dateGroup reset"
      "sportGroup sportGroup sportGroup"
      "distanceGroup distanceGroup distanceGroup"
      "activeLabel summary summary";
  }

  body.event-list-fullscreen #distanceFilters {
    grid-template-columns: 1fr;
  }

  body.event-list-fullscreen .distance-filter-options {
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  }
}

@media (max-width: 760px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "sortGroup"
      "dateGroup"
      "sportGroup"
      "distanceGroup"
      "activeLabel"
      "summary"
      "reset";
  }

  body.event-list-fullscreen .distance-filter-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  body.event-list-fullscreen .distance-filter-options {
    grid-template-columns: 1fr;
  }
}

/* Final topbar action grouping */
@media (min-width: 769px) {
  #topbar {
    display: grid;
    grid-template-columns: minmax(260px, auto) minmax(360px, 1fr) minmax(230px, auto);
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
  }

  #topbar-left,
  #topbar-center,
  #topbar-right {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
  }

  #topbar-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  #topbarProductActions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  #topbar-center {
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  #topbar-search {
    width: min(520px, 100%);
  }

  #topbar-right {
    display: flex;
    justify-content: flex-end;
  }

  #authArea {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
  }

  #topbarProductActions button,
  #authArea button,
  #topbar-right button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  #logoutBtn,
  #profileBtn,
  #adminBtn {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  #topbarProductActions {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #topbarProductActions::-webkit-scrollbar {
    display: none;
  }

  #topbarProductActions button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }
}

/* Season Planner planning dashboard polish */
.season-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.season-dashboard-tile {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 86px;
  border-color: #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.season-dashboard-tile-accent {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 80%);
}

.season-dashboard-tile em {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.season-distance-mix {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.season-distance-mix span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}

.season-distance-mix strong {
  color: #166534;
  font-size: 12px;
}

.season-load-badge {
  justify-self: stretch;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 10.5px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.season-load-low {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.season-load-medium {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.season-load-high {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.season-load-very-high {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.season-warning-item.high {
  border-color: #fecaca;
  background: #fef2f2;
}

.season-warning-item.high strong {
  color: #b91c1c;
}

.season-event-row {
  grid-template-columns:
    88px
    minmax(0, 1fr)
    minmax(84px, 110px)
    minmax(84px, 104px)
    minmax(104px, 128px)
    74px
    78px;
}

.season-priority-row {
  grid-template-columns:
    88px
    minmax(0, 1fr)
    minmax(92px, 116px)
    minmax(150px, 190px)
    minmax(150px, 180px);
}

.season-priority-row .season-load-badge {
  justify-self: stretch;
}

@media (max-width: 1080px) {
  .season-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-event-row,
  .season-priority-row {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .season-event-place,
  .season-load-badge,
  .season-priority-badge,
  .season-open-event,
  .season-google-event,
  .season-distance-control,
  .season-priority-control {
    grid-column: 2;
    justify-self: stretch;
  }
}

@media (max-width: 620px) {
  .season-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Season Planner column headers */
.season-timeline-header-row,
.season-priority-header-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 12px 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.season-timeline-header-row {
  grid-template-columns:
    88px
    minmax(0, 1fr)
    minmax(84px, 110px)
    minmax(84px, 104px)
    minmax(104px, 128px)
    74px
    78px;
}

.season-priority-header-row {
  grid-template-columns:
    88px
    minmax(0, 1fr)
    minmax(92px, 116px)
    minmax(150px, 190px)
    minmax(150px, 180px);
  padding-top: 4px;
}

.season-event-row .season-load-badge,
.season-event-row .season-priority-badge,
.season-event-row .season-open-event,
.season-event-row .season-google-event {
  min-height: 34px;
  line-height: 1;
}

@media (max-width: 1080px) {
  .season-timeline-header-row,
  .season-priority-header-row {
    display: none;
  }
}

/* Header season CTA */
#seasonPlannerBtn {
  border-color: #16a34a !important;
  background:
    linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 22px rgba(34, 197, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#seasonPlannerBtn:hover,
#seasonPlannerBtn:focus-visible {
  border-color: #22c55e !important;
  background: #ffffff !important;
  color: #166534 !important;
  box-shadow:
    0 12px 26px rgba(34, 197, 94, 0.18),
    0 0 0 3px rgba(34, 197, 94, 0.1);
  outline: none;
  transform: translateY(-1px);
}

/* Season Planner visual metrics */
.season-visual-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.season-chart-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.season-chart-card > span,
.season-horizontal-bars > span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.season-load-chart-card,
.season-month-chart-card {
  min-height: 188px;
}

.season-load-gauge {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  margin: 12px auto 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #ffffff 0 58%, transparent 59%),
    conic-gradient(
      var(--load-color, #22c55e) 0 var(--load-percent),
      #e5e7eb var(--load-percent) 100%
    );
  box-shadow:
    inset 0 0 0 1px #e5e7eb,
    0 12px 28px color-mix(in srgb, var(--load-color, #22c55e) 26%, transparent);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease;
}

.season-load-chart-card:hover .season-load-gauge {
  transform: translateY(-1px) scale(1.03);
}

.season-load-gauge strong,
.season-load-gauge em {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
}

.season-load-gauge strong {
  max-width: 74px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.season-load-gauge em {
  margin-top: 42px;
  color: var(--load-color, #16a34a);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.season-load-chart-card p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.season-load-breakdown {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.season-load-breakdown span {
  position: relative;
  min-height: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  overflow: hidden;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f7;
}

.season-load-breakdown span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: max(8%, min(100%, var(--bar-width, 0%)));
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bar-color, #22c55e) 74%, #ffffff),
    var(--bar-color, #22c55e)
  );
  opacity: 0.72;
}

.season-load-breakdown em,
.season-load-breakdown strong {
  position: relative;
  z-index: 1;
  color: #0f172a;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.season-load-breakdown em {
  color: #334155;
}

.season-bar-chart {
  height: 130px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: 7px;
  align-items: end;
  margin-top: 14px;
}

.season-bar-item {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
}

.season-bar-track {
  width: 100%;
  height: 78px;
  display: flex;
  align-items: end;
  padding: 3px;
  border-radius: 9px;
  background: #eef2f7;
}

.season-bar-track span {
  width: 100%;
  display: block;
  border-radius: 7px;
  background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
}

.season-bar-item strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
}

.season-bar-item em {
  color: #64748b;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.season-metric-visuals {
  display: grid;
  gap: 12px;
}

.season-donut-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.season-donut {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #ffffff 0 56%, transparent 57%),
    conic-gradient(var(--sport-gradient));
}

.season-donut strong,
.season-donut em {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
}

.season-donut strong {
  color: #0f172a;
  font-size: 24px;
  font-weight: 950;
}

.season-donut em {
  margin-top: 34px;
  color: #64748b;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.season-donut-legend {
  display: grid;
  gap: 8px;
}

.season-donut-legend span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.season-donut-legend span::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #94a3b8;
}

.season-donut-legend .season-legend-running::before {
  background: #22c55e;
}

.season-donut-legend .season-legend-triathlon::before {
  background: #38bdf8;
}

.season-donut-legend .season-legend-ultra::before {
  background: #8b5cf6;
}

.season-donut-legend strong {
  margin-left: auto;
  color: #0f172a;
}

.season-horizontal-bars {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.season-hbar-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
}

.season-hbar-row em {
  color: #334155;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.season-hbar-row div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}

.season-hbar-row div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e 0%, #86efac 100%);
}

.season-priority-bars .season-hbar-row div span {
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%);
}

.season-hbar-row strong {
  color: #0f172a;
  font-size: 11px;
  font-weight: 950;
  text-align: right;
}

.season-risk-active {
  border-color: #fecaca;
  background: #fef2f2;
}

@media (max-width: 980px) {
  .season-visual-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-donut-card {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media (max-width: 620px) {
  .season-visual-dashboard {
    grid-template-columns: 1fr;
  }
}

/* Landing page */
.landing-page {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: none;
  overflow-y: auto;
  padding: 24px;
  background: #f8fafc;
  color: #0f172a;
}

body.landing-open {
  overflow: hidden;
}

body.landing-open .landing-page {
  display: block;
}

body.landing-open #topbar,
body.landing-open #map,
body.landing-open #sidebar,
body.landing-open #eventDrawer,
body.landing-open .map-tools {
  transform: scale(0.985);
  opacity: 0.68;
  filter: blur(2px);
}

body.landing-revealing-app #topbar,
body.landing-revealing-app #map,
body.landing-revealing-app #sidebar,
body.landing-revealing-app #eventDrawer,
body.landing-revealing-app .map-tools {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 0.52s ease,
    filter 0.52s ease,
    transform 0.52s ease;
}

body.landing-exiting .landing-page {
  pointer-events: none;
  animation: landingExit 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.landing-exiting .landing-hero-main,
body.landing-exiting .landing-brand {
  animation: landingContentExit 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes landingExit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes landingContentExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-18px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-exiting .landing-page,
  body.landing-exiting .landing-hero-main,
  body.landing-exiting .landing-brand {
    animation-duration: 0.01ms;
  }

  body.landing-open #topbar,
  body.landing-open #map,
  body.landing-open #sidebar,
  body.landing-open #eventDrawer,
  body.landing-open .map-tools,
  body.landing-revealing-app #topbar,
  body.landing-revealing-app #map,
  body.landing-revealing-app #sidebar,
  body.landing-revealing-app #eventDrawer,
  body.landing-revealing-app .map-tools {
    transition: none;
    transform: none;
    filter: none;
  }
}

/* Admin operations workspace */
#adminModal .admin-card {
  padding: 26px;
  scrollbar-gutter: stable;
}

#adminModal .admin-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-right: 52px;
}

#adminModal .admin-dashboard-header h2 {
  margin: 3px 0 7px;
}

#adminModal .admin-dashboard-header p,
#adminModal .admin-section-heading p,
#adminModal .admin-feedback-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

#adminModal .admin-eyebrow {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#adminModal .admin-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

#adminModal .admin-header-actions > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

#adminModal .admin-system-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 4px;
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

#adminModal .admin-system-status.is-ready {
  border-color: rgba(134, 239, 172, 0.32);
  background: rgba(34, 197, 94, 0.09);
}

#adminModal .admin-system-status.has-warning {
  border-color: rgba(251, 191, 36, 0.36);
  background: rgba(245, 158, 11, 0.09);
}

#adminModal .admin-system-heading {
  display: grid;
  gap: 2px;
  min-width: 180px;
}

#adminModal .admin-system-heading strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

#adminModal .admin-system-heading span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

#adminModal .admin-system-chips {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

#adminModal .admin-system-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(2, 6, 23, 0.34);
  font-size: 10px;
  font-weight: 850;
}

#adminModal .admin-system-chip strong {
  color: #ffffff;
  font-size: 10px;
}

#adminModal .admin-system-chip.is-ready::before,
#adminModal .admin-system-chip.has-warning::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
}

#adminModal .admin-system-chip.is-ready::before {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12);
}

#adminModal .admin-system-chip.has-warning::before {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

#adminModal .admin-tabs {
  position: sticky;
  top: -1px;
  z-index: 15;
  width: 100%;
  margin: 14px 0 4px;
  padding: 7px;
  border-radius: 16px;
  background: rgba(8, 18, 26, 0.96) !important;
  backdrop-filter: blur(12px);
}

#adminModal .admin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: max-content;
}

#adminModal .admin-tab-count {
  min-width: 21px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.17);
  color: inherit;
  font-size: 10px;
  line-height: 1.4;
}

#adminModal .admin-tab.active .admin-tab-count {
  background: rgba(134, 239, 172, 0.18);
  color: #bbf7d0;
}

#adminModal .admin-tab-panel {
  padding-top: 3px;
}

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

#adminModal .admin-section-heading h3,
#adminModal .admin-feedback-heading h4 {
  margin: 0 0 4px;
}

#adminModal .admin-review-toolbar,
#adminModal .admin-feedback-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(170px, 0.8fr));
  gap: 10px;
  margin-bottom: 15px;
}

#adminModal .admin-review-toolbar label,
#adminModal .admin-feedback-filters label,
#adminModal .admin-feedback-review-controls label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

#adminModal .admin-review-toolbar input,
#adminModal .admin-review-toolbar select,
#adminModal .admin-feedback-filters select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
}

#adminModal .admin-pending-grid {
  display: grid;
  gap: 13px;
}

#adminModal .pending-card {
  display: grid;
  gap: 14px;
  padding: 17px;
  border-radius: 18px;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

#adminModal .pending-card.is-ready {
  border-left: 3px solid #4ade80 !important;
}

#adminModal .pending-card.needs-attention {
  border-left: 3px solid #fbbf24 !important;
}

#adminModal .pending-card.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

#adminModal .pending-card.is-resolved {
  opacity: 0;
  transform: translateY(-6px);
}

#adminModal .pending-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#adminModal .pending-card-select {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
}

#adminModal .pending-card-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#adminModal .pending-card-select span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 2px rgba(7, 22, 24, 0.72);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

#adminModal .pending-card-select input:checked + span {
  border-color: rgba(91, 214, 138, 0.92);
  background: var(--accent-green);
  transform: scale(1.04);
}

#adminModal .pending-card-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
}

#adminModal .pending-card-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

#adminModal .pending-card-title-line h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

#adminModal .pending-readiness,
#adminModal .pending-sport-label,
#adminModal .pending-issues span,
#adminModal .admin-feedback-card-state > span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.42);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

#adminModal .pending-readiness.is-ready {
  border-color: rgba(74, 222, 128, 0.36);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}

#adminModal .pending-readiness.has-issues,
#adminModal .pending-issues span {
  border-color: rgba(251, 191, 36, 0.34);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.105);
}

#adminModal .pending-issues {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

#adminModal .pending-card-description {
  padding: 0 !important;
  overflow: hidden;
}

#adminModal .pending-card-description summary {
  padding: 11px 13px;
  color: #dbeafe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

#adminModal .pending-card-description p {
  margin: 0;
  padding: 0 13px 13px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

#adminModal .pending-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

#adminModal .pending-card-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 9px 12px;
  border: 1px solid rgba(134, 239, 172, 0.32);
  border-radius: 12px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

#adminModal .pending-card-link.is-disabled {
  border-color: rgba(248, 113, 113, 0.26);
  color: #fca5a5 !important;
  cursor: not-allowed;
}

#adminModal .pending-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

#adminModal .pending-item-actions button {
  min-width: 104px;
  min-height: 42px;
}

#adminModal .admin-quality-summary,
#adminModal .admin-feedback-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 15px;
}

#adminModal .admin-quality-summary > div,
#adminModal .admin-feedback-summary > div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

#adminModal .admin-quality-summary span,
#adminModal .admin-feedback-summary span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 850;
}

#adminModal .admin-quality-summary strong,
#adminModal .admin-feedback-summary strong {
  color: #ffffff;
  font-size: 23px;
  line-height: 1;
}

#adminModal .admin-section-status {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

#adminModal .admin-empty-state,
#adminModal .admin-error-state {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 22px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

#adminModal .admin-empty-state strong,
#adminModal .admin-error-state strong {
  color: #ffffff;
  font-size: 14px;
}

#adminModal .admin-empty-state span,
#adminModal .admin-error-state span {
  color: var(--text-muted);
  font-size: 12px;
}

#adminModal .admin-error-state {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(239, 68, 68, 0.07);
}

#adminModal .admin-list-skeleton {
  display: grid;
  gap: 10px;
}

#adminModal .admin-list-skeleton span {
  height: 86px;
  border-radius: 16px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.045)
    );
  background-size: 200% 100%;
  animation: adminSkeleton 1.25s ease-in-out infinite;
}

@keyframes adminSkeleton {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

#adminModal .admin-feedback-card-state {
  display: grid;
  justify-items: end;
  gap: 5px;
  flex: 0 0 auto;
}

#adminModal .admin-feedback-card[data-feedback-state="new"] .admin-feedback-card-state > span {
  border-color: rgba(96, 165, 250, 0.38);
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.12);
}

#adminModal .admin-feedback-card[data-feedback-state="planned"] .admin-feedback-card-state > span {
  border-color: rgba(251, 191, 36, 0.38);
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
}

#adminModal .admin-feedback-card[data-feedback-state="resolved"] .admin-feedback-card-state > span {
  border-color: rgba(74, 222, 128, 0.38);
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
}

@media (max-width: 900px) {
  #adminModal .admin-dashboard-header,
  #adminModal .admin-system-status {
    align-items: stretch;
    flex-direction: column;
  }

  #adminModal .admin-header-actions,
  #adminModal .admin-system-chips {
    justify-content: flex-start;
  }

  #adminModal .admin-review-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  #adminModal .admin-review-toolbar label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  #adminModal .admin-card {
    padding: 16px !important;
  }

  #adminModal .admin-dashboard-header {
    padding-right: 42px;
  }

  #adminModal .admin-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #adminModal .admin-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #adminModal .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  #adminModal .admin-review-toolbar,
  #adminModal .admin-feedback-filters,
  #adminModal .admin-quality-summary,
  #adminModal .admin-feedback-summary {
    grid-template-columns: 1fr;
  }

  #adminModal .admin-review-toolbar label:first-child {
    grid-column: auto;
  }

  #adminModal .admin-section-heading,
  #adminModal .admin-feedback-heading,
  #adminModal .pending-card-header,
  #adminModal .pending-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  #adminModal .pending-item-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #adminModal .pending-item-actions button,
  #adminModal .pending-card-link {
    width: 100%;
  }

  #adminModal .pending-card-details {
    grid-template-columns: 1fr;
  }

  #adminModal .admin-feedback-card-state {
    justify-items: start;
  }
}

/* Closed-beta security, feedback and mobile hardening */
html,
body {
  max-width: 100%;
}

.feedback-card {
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.feedback-card input,
.feedback-card textarea,
.feedback-card select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(2, 6, 23, 0.62);
  color: var(--text-main);
  font: inherit;
  line-height: var(--line-height-normal);
}

.feedback-card textarea {
  min-height: 108px;
  resize: vertical;
}

.feedback-card input:focus,
.feedback-card textarea:focus,
.feedback-card select:focus {
  border-color: rgba(34, 197, 94, 0.66);
  outline: none;
  box-shadow: var(--focus-ring);
}

.feedback-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.welcome-actions {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(180px, 1fr);
  gap: var(--space-sm);
}

.welcome-actions button {
  min-height: 46px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 950;
}

#skipWelcomeBtn {
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
}

#skipWelcomeBtn:hover {
  border-color: rgba(134, 239, 172, 0.48);
  background: rgba(34, 197, 94, 0.12);
}

.beta-banner .beta-guide-btn {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.07);
}

#adminModal .admin-quality-priority {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}

#adminModal .admin-quality-priority h4,
#adminModal .admin-feedback-heading h4 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 15px;
}

#adminModal .admin-quality-priority p,
#adminModal .admin-feedback-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: var(--line-height-normal);
}

#qualityPriorityReviewList {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

#adminModal .admin-quality-priority-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

#adminModal .admin-quality-priority-item > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(134, 239, 172, 0.34);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
  font-weight: 950;
}

#adminModal .admin-quality-priority-item strong,
#adminModal .admin-quality-priority-item p {
  display: block;
  overflow-wrap: anywhere;
}

#adminModal .admin-quality-priority-item p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: var(--line-height-normal);
}

#adminModal .admin-quality-priority-item a {
  padding: 9px 11px;
  border: 1px solid rgba(134, 239, 172, 0.3);
  border-radius: 12px;
  text-decoration: none;
}

#adminModal .admin-feedback-workspace {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
}

#adminModal .admin-feedback-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

#adminModal .admin-feedback-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

#adminModal .admin-feedback-filters label,
#adminModal .admin-feedback-review-controls label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

#adminFeedbackManagementList {
  display: grid;
  gap: var(--space-md);
}

#adminModal .admin-feedback-card {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
}

#adminModal .admin-feedback-card-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-md);
}

#adminModal .admin-feedback-card-header div {
  min-width: 0;
}

#adminModal .admin-feedback-card-header span,
#adminModal .admin-feedback-card-header time,
#adminModal .admin-feedback-meta {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

#adminModal .admin-feedback-card-header strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 15px;
  overflow-wrap: anywhere;
}

#adminModal .admin-feedback-card > p {
  margin: var(--space-sm) 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#adminModal .admin-feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

#adminModal .admin-feedback-review-controls {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

#adminModal .admin-feedback-review-controls button {
  min-height: 44px;
  padding-inline: 14px;
}

#adminModal .complete-feedback-review-btn {
  border-color: rgba(74, 222, 128, 0.48) !important;
  background: rgba(34, 197, 94, 0.17) !important;
  color: #dcfce7 !important;
}

#adminModal .admin-feedback-card.is-completed {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

button:disabled {
  cursor: wait !important;
  opacity: 0.58;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  #authModal,
  #profileModal,
  #eventModal,
  #seasonPlannerModal,
  #adminModal,
  #feedbackModal,
  #welcomeModal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px;
  }

  .auth-card,
  .profile-card,
  .event-modal-card,
  .season-planner-card,
  .admin-card,
  .feedback-card,
  .welcome-card {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .feedback-form-grid,
  #adminModal .admin-feedback-filters,
  #adminModal .admin-feedback-review-controls {
    grid-template-columns: 1fr;
  }

  #adminModal .admin-feedback-card-header,
  #adminModal .admin-feedback-heading,
  #adminModal .admin-quality-priority {
    align-items: stretch;
    flex-direction: column;
  }

  #adminModal .admin-quality-priority-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  #adminModal .admin-quality-priority-item a {
    grid-column: 1 / -1;
    text-align: center;
  }

  .welcome-actions {
    grid-template-columns: 1fr;
  }

  .beta-banner {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  button,
  select,
  input,
  textarea,
  a.pending-card-link {
    touch-action: manipulation;
  }

  #topbar button,
  #sidebar button,
  .event-modal-card button,
  .auth-card button,
  .profile-card button,
  .season-planner-card button,
  .admin-card button,
  .feedback-card button,
  .welcome-card button {
    min-height: 44px;
  }

  #closeAuthModal,
  #closeProfileModal,
  #closeEventModal,
  #closeSeasonPlanner,
  #closeAdminModal,
  #closeFeedbackModal,
  #closeWelcomeModal {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .feedback-card,
  .welcome-card,
  #adminModal .admin-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  .feedback-rating-options {
    gap: 7px;
  }

  .feedback-rating-options button {
    min-width: 0;
    min-height: 48px;
  }
}

.landing-hero {
  position: relative;
  min-height: min(720px, calc(100vh - 48px));
  display: grid;
  align-items: center;
  padding: clamp(34px, 6vw, 76px);
  overflow: hidden;
  border: 1px solid #bbf7d0;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.46)),
    linear-gradient(135deg, #0f172a 0%, #14532d 62%, #16a34a 100%);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: auto -8% -18% auto;
  width: min(58vw, 720px);
  height: min(58vw, 720px);
  border: 1px solid rgba(187, 247, 208, 0.26);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.45;
}

.landing-hero-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.landing-image-placeholder {
  position: absolute;
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.landing-image-runner {
  top: 42px;
  right: 7%;
  width: min(26vw, 320px);
}

.landing-image-trail {
  right: 20%;
  bottom: 70px;
  width: min(24vw, 300px);
}

.landing-image-triathlon {
  right: 3%;
  bottom: 185px;
  width: min(19vw, 240px);
}

.landing-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  color: #ffffff;
}

.landing-kicker,
.landing-feature span,
.landing-quality-section > span,
.landing-add-event-section span {
  display: block;
  color: #86efac;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-hero h2 {
  margin: 12px 0 14px;
  max-width: 680px;
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 950;
  line-height: 0.98;
}

.landing-hero p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.48;
}

.landing-hero-actions,
.landing-stats,
.landing-popular-searches,
.landing-footer nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.landing-hero-actions {
  margin-top: 26px;
}

.landing-hero-actions button,
.landing-search-box button,
.landing-add-event-section button {
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid #22c55e;
  border-radius: 14px;
  background: #22c55e;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  transition: 0.18s ease;
}

.landing-hero-actions button:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
}

.landing-hero-actions button:hover,
.landing-search-box button:hover,
.landing-add-event-section button:hover {
  transform: translateY(-1px);
  background: #ffffff;
  color: #166534;
}

.landing-stats {
  margin-top: 26px;
}

.landing-stats span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(187, 247, 208, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 900;
}

.landing-stats strong {
  color: #bbf7d0;
}

.landing-search-section,
.landing-benefits,
.landing-feature,
.landing-quality-section,
.landing-add-event-section,
.landing-footer {
  width: min(1180px, 100%);
  margin: 22px auto 0;
}

.landing-search-section {
  padding: 22px;
  border: 1px solid #bbf7d0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.landing-search-section > span,
.landing-popular-searches > span {
  display: block;
  margin-bottom: 10px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.landing-search-box input {
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #dbe3ea;
  border-radius: 16px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.landing-search-box input:focus {
  border-color: #22c55e;
  outline: none;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.landing-popular-searches {
  margin-top: 14px;
}

.landing-popular-searches button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dbe3ea;
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.landing-popular-searches button:hover {
  border-color: #22c55e;
  color: #166534;
}

.landing-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-benefits article,
.landing-feature,
.landing-quality-section,
.landing-add-event-section {
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #ffffff;
}

.landing-benefits article {
  padding: 22px;
}

.landing-benefits article span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: #ecfdf5;
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.landing-benefits h3,
.landing-feature h3,
.landing-quality-section h3,
.landing-add-event-section h3 {
  margin: 12px 0 8px;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.08;
}

.landing-benefits p,
.landing-feature p,
.landing-add-event-section p {
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.landing-feature,
.landing-add-event-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 20px;
  align-items: center;
  padding: 24px;
}

.landing-season-section {
  grid-template-columns: minmax(320px, 1.1fr) minmax(0, 0.9fr);
}

.landing-season-section ul {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.landing-season-section li {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.landing-quality-section {
  padding: 24px;
}

.landing-quality-section div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.landing-quality-section div span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.landing-add-event-section {
  grid-template-columns: minmax(0, 1fr) auto;
}

.landing-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px 32px;
}

.landing-footer div {
  display: grid;
  gap: 3px;
}

.landing-footer strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.landing-footer span,
.landing-footer a {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.landing-footer a:hover {
  color: #166534;
}

#homeBtn {
  border-color: #bbf7d0 !important;
  background: #ffffff !important;
  color: #166534 !important;
}

#homeBtn:hover,
#homeBtn:focus-visible {
  border-color: #22c55e !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.14);
}

@media (max-width: 900px) {
  .landing-page {
    padding: 12px;
  }

  .landing-hero {
    min-height: auto;
    padding: 34px 18px;
  }

  .landing-hero-media {
    display: none;
  }

  .landing-hero h2 {
    font-size: 40px;
  }

  .landing-search-box,
  .landing-benefits,
  .landing-feature,
  .landing-season-section,
  .landing-add-event-section {
    grid-template-columns: 1fr;
  }

  .landing-footer {
    flex-direction: column;
  }
}

/* Fullscreen landing hero */
.landing-page {
  padding: 0;
  background: #0f172a;
}

.landing-hero {
  min-height: 100dvh;
  align-items: start;
  padding: clamp(34px, 5.5vw, 64px) clamp(18px, 7vw, 96px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 43%, rgba(0, 0, 0, 0.12) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.78) 100%);
  box-shadow: none;
}

.landing-hero::after,
.landing-hero-media {
  display: none;
}

.landing-brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  color: #ffffff;
  letter-spacing: 0.22em;
}

.landing-brand-mark {
  width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: transparent;
  font-size: 1px;
  position: relative;
}

.landing-brand-mark::before {
  content: "";
  width: 34px;
  height: 24px;
  display: block;
  background:
    linear-gradient(135deg, transparent 36%, #ffffff 38%, #ffffff 45%, transparent 47%),
    linear-gradient(45deg, transparent 28%, #ffffff 30%, #ffffff 37%, transparent 39%),
    linear-gradient(135deg, transparent 58%, #ffffff 60%, #ffffff 67%, transparent 69%);
}

.landing-brand strong {
  font-size: 24px;
  font-weight: 950;
}

.landing-hero-content {
  margin-top: clamp(52px, 9vh, 96px);
  max-width: min(760px, 62vw);
}

.landing-kicker {
  display: none;
}

.landing-hero h2 {
  margin: 0;
  max-width: 850px;
  color: #ffffff;
  font-family: Impact, "Arial Black", system-ui, sans-serif;
  font-size: clamp(56px, 6.7vw, 112px);
  font-weight: 950;
  line-height: 0.93;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}

.landing-hero h2 span,
.landing-hero h2 strong {
  display: block;
}

.landing-hero h2 strong {
  margin-top: 6px;
  color: #22c55e;
  font-size: 0.62em;
  line-height: 1.02;
}

.landing-hero p {
  max-width: 650px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 650;
  line-height: 1.55;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
}

.landing-hero-actions {
  margin-top: 34px;
  gap: 14px;
}

.landing-hero-actions button {
  min-height: 60px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.landing-hero-actions button:nth-child(1)::before {
  content: "⌕";
  margin-right: 10px;
  font-size: 22px;
  line-height: 1;
}

.landing-hero-actions button:nth-child(2)::before {
  content: "▣";
  margin-right: 10px;
  font-size: 17px;
  line-height: 1;
}

.landing-hero-actions button:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.12);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.landing-hero .landing-search-section {
  position: absolute;
  z-index: 4;
  left: clamp(18px, 12vw, 250px);
  right: clamp(18px, 7vw, 96px);
  bottom: clamp(26px, 5.5vh, 72px);
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-search-box {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.landing-search-box::before {
  content: "⌕";
  position: absolute;
  left: 28px;
  top: 50%;
  color: #334155;
  font-size: 30px;
  transform: translateY(-50%);
}

.landing-search-box input {
  min-height: 62px;
  padding: 0 18px 0 64px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font-size: 18px;
  font-weight: 750;
}

.landing-search-box input:focus {
  box-shadow: none;
}

.landing-search-box button {
  min-height: 52px;
  border-radius: 999px;
}

.landing-popular-searches {
  margin-top: 14px;
  padding-left: 30px;
}

.landing-popular-searches > span {
  display: inline-flex;
  margin: 0 8px 0 0;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
}

.landing-popular-searches button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.62);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.landing-popular-searches button:hover {
  border-color: #22c55e;
  background: rgba(255, 255, 255, 0.92);
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 52px);
  margin-top: 24px;
  padding-left: 30px;
}

.landing-stats span {
  min-height: auto;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
}

.landing-stats span::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.22);
  box-shadow: inset 0 0 0 1px rgba(187, 247, 208, 0.16);
}

.landing-stats strong {
  display: block;
  color: #ffffff;
  font-size: 19px;
  font-weight: 950;
}

.landing-benefits,
.landing-feature,
.landing-quality-section,
.landing-add-event-section,
.landing-footer {
  margin-top: 28px;
}

@media (max-width: 980px) {
  .landing-hero {
    min-height: 100dvh;
    padding: 26px 16px 34px;
  }

  .landing-brand strong {
    font-size: 19px;
  }

  .landing-hero-content {
    max-width: 100%;
    margin-top: 52px;
  }

  .landing-hero h2 {
    font-size: clamp(44px, 12vw, 72px);
  }

  .landing-hero h2 strong {
    font-size: 0.66em;
  }

  .landing-hero p {
    font-size: 15px;
  }

  .landing-hero-actions button {
    min-height: 48px;
    padding: 0 18px;
    font-size: 12px;
  }

  .landing-hero .landing-search-section {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 34px;
  }

  .landing-search-box {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }

  .landing-search-box input {
    min-height: 52px;
    font-size: 15px;
  }

  .landing-search-box button {
    width: 100%;
  }

  .landing-popular-searches,
  .landing-stats {
    padding-left: 0;
  }

  .landing-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Final image-free landing and compact Season Planner overview */
.landing-page {
  background: #f8fafc;
}

.landing-hero {
  min-height: 100dvh;
  align-items: start;
  padding: clamp(30px, 4vw, 52px) clamp(18px, 7vw, 96px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(20, 83, 45, 0.91) 58%, rgba(22, 163, 74, 0.84) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  box-shadow: none;
}

.landing-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: clamp(18px, 8vw, 120px);
  top: clamp(86px, 13vh, 150px);
  width: min(44vw, 560px);
  height: min(44vw, 560px);
  border: 1px solid rgba(187, 247, 208, 0.32);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02));
  background-size: 42px 42px, 42px 42px, auto;
  opacity: 0.34;
  transform: rotate(-5deg);
}

.landing-hero::after,
.landing-hero-media {
  display: none;
}

.landing-brand {
  gap: 12px;
  letter-spacing: 0;
}

.landing-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(187, 247, 208, 0.42);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.22);
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.22);
}

.landing-brand-mark::before {
  display: none;
}

.landing-brand strong {
  font-size: clamp(19px, 2.1vw, 26px);
  letter-spacing: 0;
}

.landing-hero-content {
  z-index: 2;
  max-width: min(830px, 70vw);
  margin-top: clamp(42px, 8vh, 84px);
}

.landing-kicker {
  display: inline-flex;
  width: max-content;
  padding: 7px 12px;
  border: 1px solid rgba(187, 247, 208, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #bbf7d0;
  backdrop-filter: blur(8px);
}

.landing-hero h2 {
  max-width: 910px;
  margin-top: 16px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(44px, 6.1vw, 92px);
  letter-spacing: 0;
  line-height: 0.98;
}

.landing-hero h2 strong {
  color: #86efac;
  font-size: 0.66em;
}

.landing-hero p {
  max-width: 700px;
  font-size: clamp(16px, 1.35vw, 21px);
}

.landing-hero .landing-search-section {
  position: relative;
  z-index: 4;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(1080px, 100%);
  margin: clamp(28px, 5vh, 44px) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-search-box::before {
  content: "⌕";
}

.landing-popular-searches {
  padding-left: 18px;
}

.landing-stats {
  max-width: 1060px;
  padding-left: 0;
}

.landing-benefits,
.landing-feature,
.landing-quality-section,
.landing-add-event-section,
.landing-footer {
  position: relative;
  z-index: 5;
}

.season-planner-card {
  padding: 20px;
}

.season-planner-header {
  margin-bottom: 12px;
}

.season-overview-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 10px;
  margin-bottom: 10px;
}

.season-next-card {
  padding: 14px 16px;
}

.season-next-card strong {
  margin-top: 6px;
  font-size: 24px;
}

.season-next-card em {
  margin-top: 3px;
  font-size: 12px;
}

.season-kpi-grid {
  gap: 8px;
}

.season-kpi-grid div {
  padding: 10px;
}

.season-kpi-grid strong {
  margin-top: 4px;
  font-size: 18px;
}

.season-overview-grid,
.season-insights-grid {
  gap: 10px;
  margin-bottom: 10px;
}

.season-overview-card,
.season-insight-card {
  min-height: 0;
  padding: 12px;
  gap: 8px;
}

.season-visual-dashboard {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.season-chart-card {
  padding: 9px;
  border-radius: 12px;
}

.season-load-chart-card,
.season-month-chart-card {
  min-height: 132px;
}

.season-load-gauge {
  width: 82px;
  height: 82px;
  margin: 8px auto 6px;
}

.season-load-gauge strong {
  max-width: 58px;
  font-size: 10px;
}

.season-load-gauge em {
  margin-top: 31px;
  font-size: 9px;
}

.season-load-chart-card p {
  font-size: 10px;
}

.season-bar-chart {
  height: 88px;
  gap: 5px;
  margin-top: 8px;
}

.season-bar-track {
  height: 50px;
}

.season-dashboard-tile strong {
  font-size: 15px;
}

.season-dashboard-tile em {
  font-size: 10px;
}

.season-metric-visuals {
  gap: 8px;
}

.season-donut-card {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border-radius: 12px;
}

.season-donut {
  width: 76px;
  height: 76px;
}

.season-donut strong {
  font-size: 18px;
}

.season-donut em {
  margin-top: 25px;
  font-size: 8px;
}

.season-donut-legend {
  gap: 5px;
}

.season-donut-legend span,
.season-hbar-row em,
.season-hbar-row strong {
  font-size: 10px;
}

.season-horizontal-bars {
  gap: 6px;
  padding: 9px;
  border-radius: 12px;
}

.season-hbar-row {
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  gap: 6px;
}

@media (max-width: 760px) {
  .landing-hero::before {
    inset: auto 18px 120px auto;
    width: 220px;
    height: 220px;
    opacity: 0.18;
  }

  .landing-hero-content {
    max-width: 100%;
  }

  .landing-hero .landing-search-section {
    margin-top: 24px;
  }

  .landing-stats {
    grid-template-columns: 1fr;
  }

  .season-overview-hero,
  .season-overview-grid,
  .season-insights-grid,
  .season-visual-dashboard {
    grid-template-columns: 1fr;
  }

  .season-plan-summary-card {
    grid-column: auto;
  }
}

/* Polished MVP landing hero */
.landing-page {
  background: #07140f;
}

.landing-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: start;
  overflow: hidden;
  padding: clamp(28px, 4.4vw, 58px) clamp(18px, 6.5vw, 92px);
  background:
    radial-gradient(circle at 78% 24%, rgba(34, 197, 94, 0.24), transparent 34%),
    radial-gradient(circle at 20% 82%, rgba(134, 239, 172, 0.12), transparent 32%),
    linear-gradient(135deg, #07110f 0%, #0b1720 38%, #113721 72%, #14532d 100%);
  color: #ffffff;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
  opacity: 0.55;
  transform: perspective(900px) rotateX(58deg) translateY(18%);
  transform-origin: center bottom;
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 17, 15, 0.95) 0%, rgba(7, 17, 15, 0.55) 44%, rgba(7, 17, 15, 0.18) 100%),
    linear-gradient(180deg, transparent 0%, rgba(7, 17, 15, 0.88) 100%);
  pointer-events: none;
}

.landing-brand,
.landing-hero-main,
.landing-benefits,
.landing-feature,
.landing-quality-section,
.landing-add-event-section,
.landing-footer {
  position: relative;
  z-index: 2;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  color: #ffffff;
  letter-spacing: 0;
}

.landing-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(187, 247, 208, 0.36);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: #ffffff;
  font-size: 21px;
  box-shadow:
    0 18px 42px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.landing-brand-mark::before {
  display: none;
}

.landing-brand strong {
  color: #ffffff;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 950;
  letter-spacing: 0;
}

.landing-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.82fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  min-height: calc(100dvh - 112px);
  padding-top: clamp(28px, 5vh, 64px);
}

.landing-hero-content {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
}

.landing-kicker {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(187, 247, 208, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.landing-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.9);
}

.landing-hero h2 {
  max-width: 820px;
  margin: 18px 0 0;
  color: #ffffff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(52px, 7vw, 112px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.landing-hero h2 span,
.landing-hero h2 strong {
  display: block;
}

.landing-hero h2 strong {
  margin-top: 12px;
  color: #4ade80;
  font-size: 0.52em;
  line-height: 0.96;
  text-shadow: 0 0 34px rgba(34, 197, 94, 0.28);
}

.landing-hero p {
  max-width: 690px;
  margin: 22px 0 0;
  color: rgba(241, 245, 249, 0.9);
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 650;
  line-height: 1.65;
  text-shadow: none;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.landing-hero-actions button {
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-transform: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.landing-hero-actions button:first-child {
  border: 1px solid rgba(134, 239, 172, 0.32);
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(34, 197, 94, 0.32);
}

.landing-hero-actions button:first-child::before,
.landing-hero-actions button:nth-child(2)::before {
  display: none;
}

.landing-hero-actions button:nth-child(2) {
  border: 1px solid rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.landing-hero-actions button:hover,
.landing-search-box button:hover,
.landing-popular-searches button:hover {
  transform: translateY(-1px);
}

.landing-hero-actions button:first-child:hover,
.landing-search-box button:hover {
  background: #ffffff;
  color: #166534;
  box-shadow:
    0 18px 42px rgba(34, 197, 94, 0.3),
    0 0 0 3px rgba(34, 197, 94, 0.12);
}

.landing-hero-actions button:nth-child(2):hover {
  border-color: #86efac;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.landing-hero .landing-search-section {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(920px, 100%);
  margin: clamp(26px, 4vh, 42px) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-search-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.landing-search-box::before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 28px;
  top: 50%;
  border: 3px solid #334155;
  border-radius: 999px;
  transform: translateY(-50%);
}

.landing-search-box::after {
  content: "";
  width: 9px;
  height: 3px;
  position: absolute;
  left: 44px;
  top: calc(50% + 9px);
  border-radius: 999px;
  background: #334155;
  transform: rotate(45deg);
}

.landing-search-box input {
  min-height: 58px;
  min-width: 0;
  padding: 0 18px 0 58px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 800;
}

.landing-search-box input:focus {
  box-shadow: none;
}

.landing-search-box button {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  font-weight: 950;
}

.landing-popular-searches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-left: 0;
}

.landing-popular-searches > span {
  margin: 0 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: none;
}

.landing-popular-searches button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.56);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.landing-popular-searches button:hover {
  border-color: #22c55e;
  background: rgba(255, 255, 255, 0.94);
  color: #166534;
}

.landing-map-visual {
  position: relative;
  min-height: min(58vw, 620px);
}

.landing-map-panel {
  position: absolute;
  inset: 8% 0 5% 7%;
  overflow: hidden;
  border: 1px solid rgba(187, 247, 208, 0.28);
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    radial-gradient(circle at 62% 28%, rgba(34, 197, 94, 0.26), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow:
    0 34px 84px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: perspective(900px) rotateY(-10deg) rotateZ(-4deg);
  transform-origin: center;
  backdrop-filter: blur(6px);
}

.landing-map-panel::before,
.landing-map-panel::after {
  content: "";
  position: absolute;
  inset: auto;
  border: 1px solid rgba(187, 247, 208, 0.2);
  border-radius: 999px;
}

.landing-map-panel::before {
  width: 72%;
  height: 54%;
  left: 13%;
  top: 18%;
  transform: rotate(-18deg);
}

.landing-map-panel::after {
  width: 48%;
  height: 36%;
  right: -7%;
  bottom: 12%;
  transform: rotate(18deg);
}

.landing-map-line {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(134, 239, 172, 0.65), transparent);
}

.landing-map-line.line-one {
  width: 62%;
  left: 16%;
  top: 36%;
  transform: rotate(-16deg);
}

.landing-map-line.line-two {
  width: 70%;
  left: 10%;
  top: 58%;
  transform: rotate(12deg);
}

.landing-map-line.line-three {
  width: 42%;
  right: 12%;
  top: 22%;
  transform: rotate(28deg);
}

.landing-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 0 0 6px rgba(34, 197, 94, 0.18),
    0 0 28px rgba(34, 197, 94, 0.82);
}

.pin-running {
  left: 22%;
  top: 31%;
}

.pin-trail {
  left: 55%;
  top: 22%;
  background: #84cc16;
}

.pin-triathlon {
  left: 68%;
  top: 55%;
  background: #38bdf8;
  box-shadow:
    0 0 0 6px rgba(56, 189, 248, 0.18),
    0 0 28px rgba(56, 189, 248, 0.74);
}

.pin-ultra {
  left: 36%;
  top: 68%;
  background: #a78bfa;
  box-shadow:
    0 0 0 6px rgba(167, 139, 250, 0.18),
    0 0 28px rgba(167, 139, 250, 0.72);
}

.pin-city {
  left: 78%;
  top: 36%;
}

.landing-visual-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: 168px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
}

.landing-visual-card strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.landing-visual-card span {
  color: rgba(226, 232, 240, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.landing-visual-card.events-card {
  top: 9%;
  right: 3%;
}

.landing-visual-card.sports-card {
  left: 0;
  bottom: 18%;
}

.landing-visual-card.planner-card {
  right: 9%;
  bottom: 5%;
}

.landing-stats {
  display: none;
}

@media (max-width: 980px) {
  .landing-hero {
    padding: 24px 16px 34px;
  }

  .landing-hero-main {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 34px;
  }

  .landing-hero-content {
    max-width: 100%;
  }

  .landing-hero h2 {
    font-size: clamp(44px, 13vw, 78px);
  }

  .landing-map-visual {
    min-height: 420px;
  }

  .landing-map-panel {
    inset: 8% 4% 10%;
    transform: rotate(-3deg);
  }

  .landing-visual-card.events-card {
    top: 2%;
    right: 2%;
  }

  .landing-visual-card.sports-card {
    left: 3%;
    bottom: 10%;
  }

  .landing-visual-card.planner-card {
    right: 5%;
    bottom: 1%;
  }
}

@media (max-width: 620px) {
  .landing-brand-mark {
    width: 38px;
    height: 38px;
  }

  .landing-hero-actions,
  .landing-search-box {
    grid-template-columns: 1fr;
  }

  .landing-hero-actions button,
  .landing-search-box button {
    width: 100%;
  }

  .landing-search-box {
    border-radius: 24px;
  }

  .landing-search-box input {
    min-height: 52px;
    padding-right: 14px;
    font-size: 14px;
  }

  .landing-map-visual {
    min-height: 360px;
  }

  .landing-visual-card {
    min-width: 140px;
    padding: 11px 12px;
  }

  .landing-visual-card strong {
    font-size: 14px;
  }
}

/* Landing feature panels without mockup placeholders */
.landing-feature-panel {
  min-height: 280px;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid rgba(187, 247, 208, 0.55);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 18%, rgba(34, 197, 94, 0.18), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 56%, #ecfdf5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.landing-panel-header,
.landing-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.landing-panel-header strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.landing-panel-header span {
  padding: 7px 10px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 11px;
  font-weight: 950;
}

.landing-panel-grid {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.landing-panel-grid span,
.landing-countdown-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-panel-grid strong,
.landing-countdown-card strong {
  color: #0f172a;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 950;
  line-height: 1;
}

.landing-panel-grid em,
.landing-countdown-card em,
.landing-panel-row em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.landing-panel-row {
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
}

.landing-panel-row strong {
  margin-right: auto;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.landing-status-dot,
.landing-warning-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #22c55e;
  box-shadow:
    0 0 0 5px rgba(34, 197, 94, 0.13),
    0 0 18px rgba(34, 197, 94, 0.62);
}

.landing-warning-dot {
  background: #f59e0b;
  box-shadow:
    0 0 0 5px rgba(245, 158, 11, 0.15),
    0 0 18px rgba(245, 158, 11, 0.56);
}

.landing-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-panel-tags span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.landing-countdown-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid #bbf7d0;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(220, 252, 231, 0.95), rgba(255, 255, 255, 0.92));
}

.landing-mini-chart {
  height: 96px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.landing-mini-chart span {
  display: block;
  min-height: 18px;
  border-radius: 999px 999px 7px 7px;
  background: linear-gradient(180deg, #86efac, #22c55e);
}

@media (max-width: 760px) {
  .landing-feature-panel {
    min-height: 0;
  }

  .landing-panel-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Landing page polish: launch metrics, appearance switch and system-aware theme */
.landing-proof-strip {
  width: min(680px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.landing-proof-strip span {
  min-height: 68px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  color: rgba(226, 232, 240, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.16);
}

.landing-proof-strip strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

.landing-footer {
  align-items: center;
}

.landing-appearance-control {
  display: grid;
  gap: 8px;
  min-width: min(100%, 330px);
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.landing-appearance-control > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-appearance-control > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.landing-appearance-control button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.landing-appearance-control button:hover,
.landing-appearance-control button:focus-visible {
  border-color: #22c55e;
  color: #166534;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
  outline: none;
}

.landing-appearance-control button:active {
  transform: scale(0.98);
}

.landing-appearance-control button.active {
  border-color: rgba(34, 197, 94, 0.68);
  background: #22c55e;
  color: #052e16;
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.22);
}

.landing-page {
  color-scheme: dark;
}

body.landing-theme-light .landing-page {
  color-scheme: light;
  background:
    radial-gradient(circle at 15% 8%, rgba(34, 197, 94, 0.18), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(14, 165, 233, 0.12), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #eefdf4 48%, #e8f7ef 100%);
}

body.landing-theme-light .landing-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(34, 197, 94, 0.2), transparent 30%),
    radial-gradient(circle at 86% 70%, rgba(15, 118, 110, 0.14), transparent 32%),
    linear-gradient(135deg, #f8fafc 0%, #effcf5 55%, #dff6e8 100%);
}

body.landing-theme-light .landing-brand,
body.landing-theme-light .landing-hero-content,
body.landing-theme-light .landing-map-visual {
  color: #0f172a;
}

body.landing-theme-light .landing-brand strong,
body.landing-theme-light .landing-hero h2 span,
body.landing-theme-light .landing-visual-card strong {
  color: #0f172a;
  text-shadow: none;
}

body.landing-theme-light .landing-hero h2 strong {
  color: #16a34a;
  text-shadow: none;
}

body.landing-theme-light .landing-hero p,
body.landing-theme-light .landing-popular-searches > span,
body.landing-theme-light .landing-visual-card span,
body.landing-theme-light .landing-proof-strip span {
  color: #475569;
}

body.landing-theme-light .landing-proof-strip span,
body.landing-theme-light .landing-search-box,
body.landing-theme-light .landing-visual-card,
body.landing-theme-light .landing-map-panel {
  border-color: rgba(22, 101, 52, 0.16);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.11);
}

body.landing-theme-light .landing-proof-strip strong {
  color: #14532d;
}

body.landing-theme-light .landing-popular-searches button {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.78);
  color: #334155;
}

body.landing-theme-light .landing-hero-actions button:nth-child(2) {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.68);
  color: #14532d;
}

body.landing-theme-light .landing-hero-actions button:nth-child(2):hover {
  border-color: #22c55e;
  background: #ffffff;
  color: #166534;
}

body.landing-theme-light .landing-map-line {
  background: rgba(22, 101, 52, 0.18);
}

@media (prefers-color-scheme: light) {
  body:not(.landing-theme-dark) .landing-page {
    color-scheme: light;
    background:
      radial-gradient(circle at 15% 8%, rgba(34, 197, 94, 0.18), transparent 28%),
      radial-gradient(circle at 82% 24%, rgba(14, 165, 233, 0.12), transparent 34%),
      linear-gradient(135deg, #f8fafc 0%, #eefdf4 48%, #e8f7ef 100%);
  }

  body:not(.landing-theme-dark) .landing-hero {
    background:
      radial-gradient(circle at 18% 20%, rgba(34, 197, 94, 0.2), transparent 30%),
      radial-gradient(circle at 86% 70%, rgba(15, 118, 110, 0.14), transparent 32%),
      linear-gradient(135deg, #f8fafc 0%, #effcf5 55%, #dff6e8 100%);
  }

  body:not(.landing-theme-dark) .landing-brand,
  body:not(.landing-theme-dark) .landing-hero-content,
  body:not(.landing-theme-dark) .landing-map-visual {
    color: #0f172a;
  }

  body:not(.landing-theme-dark) .landing-brand strong,
  body:not(.landing-theme-dark) .landing-hero h2 span,
  body:not(.landing-theme-dark) .landing-visual-card strong {
    color: #0f172a;
    text-shadow: none;
  }

  body:not(.landing-theme-dark) .landing-hero h2 strong {
    color: #16a34a;
    text-shadow: none;
  }

  body:not(.landing-theme-dark) .landing-hero p,
  body:not(.landing-theme-dark) .landing-popular-searches > span,
  body:not(.landing-theme-dark) .landing-visual-card span,
  body:not(.landing-theme-dark) .landing-proof-strip span {
    color: #475569;
  }

  body:not(.landing-theme-dark) .landing-proof-strip span,
  body:not(.landing-theme-dark) .landing-search-box,
  body:not(.landing-theme-dark) .landing-visual-card,
  body:not(.landing-theme-dark) .landing-map-panel {
    border-color: rgba(22, 101, 52, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.11);
  }

  body:not(.landing-theme-dark) .landing-proof-strip strong {
    color: #14532d;
  }

  body:not(.landing-theme-dark) .landing-popular-searches button {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.78);
    color: #334155;
  }

  body:not(.landing-theme-dark) .landing-hero-actions button:nth-child(2) {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.68);
    color: #14532d;
  }

  body:not(.landing-theme-dark) .landing-hero-actions button:nth-child(2):hover {
    border-color: #22c55e;
    background: #ffffff;
    color: #166534;
  }

  body:not(.landing-theme-dark) .landing-map-line {
    background: rgba(22, 101, 52, 0.18);
  }
}

@media (max-width: 760px) {
  .landing-proof-strip {
    grid-template-columns: 1fr;
  }

  .landing-proof-strip span {
    min-height: 58px;
  }

  .landing-appearance-control {
    width: 100%;
  }
}

/* Interactive Race Load layout */
.season-load-chart-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: center;
}

.season-load-chart-card > span {
  grid-column: 1 / -1;
}

.season-load-chart-card .season-load-gauge {
  margin: 0;
}

.season-load-chart-card .season-load-breakdown {
  margin-top: 0;
}

@media (max-width: 620px) {
  .season-load-chart-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }
}

/* Dark product theme for the Event Map app */
body:not(.legal-page) {
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 197, 94, 0.16), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(20, 83, 45, 0.38), transparent 34%),
    linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 44%, #113721 100%);
  color: var(--text-main);
}

#app {
  padding: 14px;
  gap: 14px;
}

#topbar {
  border: 1px solid var(--border-soft) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.68)) !important;
  color: var(--text-main);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

#topbar-center h1,
#topbar .logo,
#topbar strong {
  color: var(--text-main) !important;
}

#topbar-center h1::after {
  background: linear-gradient(90deg, var(--accent-green), rgba(134, 239, 172, 0.12)) !important;
}

#topbar button,
#topbar-right button,
#topbar-left button,
#topbarProductActions button,
#mobileFilterBtn,
#homeBtn,
#toggleSidebar {
  border: 1px solid var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

#topbar button:hover,
#topbar-right button:hover,
#topbar-left button:hover,
#topbarProductActions button:hover,
#mobileFilterBtn:hover,
#homeBtn:hover,
#toggleSidebar:hover {
  border-color: var(--border-green) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

#seasonPlannerBtn,
#landingDiscoverBtn,
#landingSearchBtn,
.drawer-button,
#submitEventBtn,
#loginBtn,
#registerBtn,
#saveProfileBtn,
.admin-action-approve {
  border-color: rgba(134, 239, 172, 0.46) !important;
  background:
    linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-strong) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(34, 197, 94, 0.24) !important;
}

#seasonPlannerBtn:hover,
.drawer-button:hover,
#submitEventBtn:hover,
#loginBtn:hover,
#registerBtn:hover,
#saveProfileBtn:hover,
.admin-action-approve:hover {
  border-color: var(--accent-green) !important;
  background: #ffffff !important;
  color: #166534 !important;
}

#topbar-search,
.search-container {
  color: var(--text-main);
}

#topbar-search input,
#searchInput {
  border: 1px solid var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

#topbar-search input:focus,
#searchInput:focus {
  border-color: var(--accent-green) !important;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.14),
    0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

#topbar-search input::placeholder,
#searchInput::placeholder {
  color: #64748b !important;
}

#sidebar,
#eventDrawer,
.modal-content,
.profile-panel,
.admin-panel,
body.event-list-fullscreen #sidebar {
  border: 1px solid var(--border-soft) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78)) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

#sidebar {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#sidebar-header,
#eventListToolbar,
#drawerContent,
.drawer-section,
.filter-select-card,
.filter-accordion,
#dateRangeFilter,
.season-planner-card,
.season-overview-card,
.season-insight-card {
  border-color: var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: var(--text-main) !important;
}

#sidebar-header {
  border-bottom: 1px solid var(--border-soft);
}

#eventList,
#drawerContent {
  scrollbar-color: rgba(34, 197, 94, 0.55) rgba(255, 255, 255, 0.06);
}

#eventListSummary,
#eventListSummary strong,
#eventListToolbar,
.filter-group-label,
.active-filter-label,
.drawer-header h2,
.drawer-label,
.drawer-text,
.drawer-section h3,
.modal-content h2 {
  color: var(--text-main) !important;
}

#eventListSummary span,
.event-meta,
.drawer-placeholder,
.drawer-section p,
.drawer-section span,
.drawer-text,
.filter-select-card label,
.filter-accordion-toggle span,
.distance-filter-group-title,
.event-list-page-info {
  color: var(--text-muted) !important;
}

.event-card {
  border: 1px solid var(--border-soft) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.055)) !important;
  color: var(--text-main) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.event-card:hover,
.event-card.active {
  border-color: var(--border-green) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.135), rgba(34, 197, 94, 0.09)) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.event-card:hover {
  transform: translateY(-2px);
}

.event-title,
.event-card h3,
.event-card strong {
  color: var(--text-main) !important;
}

.event-distance,
.event-status-badge,
.event-card .sport-chip,
.event-card .distance-chip {
  border-color: rgba(134, 239, 172, 0.34) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #bbf7d0 !important;
}

.favorite-btn,
.favorite-button,
.event-favorite-button,
.drawer-favorite-btn {
  border-color: var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ef4444 !important;
}

.event-status-strip,
.event-card-status,
.drawer-status-row {
  border-color: rgba(134, 239, 172, 0.24) !important;
  background: rgba(34, 197, 94, 0.09) !important;
}

.filter-chip,
.distance-filter-chip,
.date-preset-btn,
.filter-accordion-toggle,
#resetFiltersBtn,
#applyDateRangeBtn,
#clearDateRangeBtn {
  border: 1px solid var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

.filter-chip:hover,
.distance-filter-chip:hover,
.date-preset-btn:hover,
.filter-accordion-toggle:hover,
#resetFiltersBtn:hover,
#applyDateRangeBtn:hover,
#clearDateRangeBtn:hover {
  border-color: var(--border-green) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.filter-chip.active,
.distance-filter-chip.active,
.date-preset-btn.active,
#applyDateRangeBtn {
  border-color: rgba(134, 239, 172, 0.5) !important;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-strong)) !important;
  color: #ffffff !important;
}

#sortSelect,
#dateFilter,
#dateRangeFilter input,
.filter-select-card select,
.filter-select-card input,
select,
input[type="date"] {
  border: 1px solid var(--border-soft) !important;
  background: rgba(15, 23, 42, 0.84) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

#sortSelect:focus,
#dateFilter:focus,
#dateRangeFilter input:focus,
.filter-select-card select:focus,
.filter-select-card input:focus {
  border-color: var(--accent-green) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important;
}

.distance-filter-group {
  border-color: var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

#map {
  overflow: hidden;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.leaflet-control-zoom a,
.leaflet-control-layers,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-color: var(--border-soft) !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--text-main) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28) !important;
}

.leaflet-popup-content,
.leaflet-popup-content strong {
  color: var(--text-main) !important;
}

.leaflet-popup-content a,
.leaflet-popup-content button {
  color: #ffffff !important;
}

#mapToolsToggle,
#mapToolsMenu button,
#mapStyleBtn,
#mapStyleSelect,
#locationBtn,
#favoritesBtn {
  border: 1px solid var(--border-soft) !important;
  background: rgba(15, 23, 42, 0.86) !important;
  color: var(--text-main) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(14px);
}

#mapToolsToggle:hover,
#mapToolsMenu button:hover,
#mapStyleBtn:hover,
#locationBtn:hover,
#favoritesBtn:hover {
  border-color: var(--border-green) !important;
  background: rgba(34, 197, 94, 0.18) !important;
}

#eventDrawer {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.drawer-header,
.drawer-hero,
.drawer-section {
  border-color: var(--border-soft) !important;
}

.drawer-header {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(255, 255, 255, 0.045)) !important;
}

.drawer-button.secondary,
.drawer-secondary-button,
.drawer-close,
#closeDrawer,
.modal-close,
#eventListFullscreenBtn,
#eventListCloseFullscreenBtn {
  border: 1px solid var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
}

.drawer-button.secondary:hover,
.drawer-secondary-button:hover,
.drawer-close:hover,
#closeDrawer:hover,
.modal-close:hover,
#eventListFullscreenBtn:hover,
#eventListCloseFullscreenBtn:hover {
  border-color: var(--border-green) !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

.drawer-trust-note {

  display: grid;

  gap: 5px;

  margin:
    14px
    0
    16px;

  padding:
    12px
    14px;

  border: 1px solid rgba(134, 239, 172, 0.22);

  border-radius: var(--radius-sm);

  background: rgba(34, 197, 94, 0.09);

  color: var(--text-muted);

  font-size: 12px;

  line-height: 1.45;

}

.drawer-trust-note strong {

  color: var(--text-main);

  font-size: 12px;

  letter-spacing: 0.02em;

}

body.event-list-fullscreen {
  background:
    radial-gradient(circle at 20% 12%, rgba(34, 197, 94, 0.15), transparent 30%),
    linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2) 56%, #113721) !important;
}

body.event-list-fullscreen #eventList {
  background: transparent !important;
}

body.event-list-fullscreen .event-card {
  border-radius: var(--radius-md);
}

#eventListPagination button {
  border: 1px solid var(--border-soft) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
}

#eventListPagination button:hover:not(:disabled),
#eventListPagination button.active {
  border-color: var(--border-green) !important;
  background: rgba(34, 197, 94, 0.18) !important;
}

#eventListPagination button:disabled {
  opacity: 0.45;
}

#legalLinks {
  border-color: var(--border-soft) !important;
  background: rgba(15, 23, 42, 0.68) !important;
  color: var(--text-muted) !important;
  backdrop-filter: blur(10px);
}

#legalLinks a {
  color: var(--text-muted) !important;
}

#legalLinks a:hover {
  color: #bbf7d0 !important;
}

@media (max-width: 768px) {
  #app {
    padding: 10px;
    gap: 10px;
  }

  #topbar,
  #sidebar,
  #eventDrawer.open,
  #map {
    border-radius: var(--radius-md);
  }

  #topbar {
    backdrop-filter: blur(14px);
  }

  #sidebar {
    background: var(--bg-panel-strong) !important;
  }
}

/* Readability fixes for dark Season Planner and event status cards */
#seasonPlannerModal {
  background: rgba(2, 6, 23, 0.72) !important;
  backdrop-filter: blur(16px);
}

#seasonPlannerModal .season-planner-card {
  border: 1px solid rgba(134, 239, 172, 0.24) !important;
  background:
    linear-gradient(180deg, #0f172a 0%, #111827 62%, #0b1720 100%) !important;
  color: var(--text-main) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.44);
}

#seasonPlannerModal .season-planner-header h2,
#seasonPlannerModal .season-section-title,
#seasonPlannerModal .season-next-card strong,
#seasonPlannerModal .season-kpi-grid strong,
#seasonPlannerModal .season-overview-card strong,
#seasonPlannerModal .season-insight-card strong,
#seasonPlannerModal .season-dashboard-tile strong,
#seasonPlannerModal .season-event-row strong,
#seasonPlannerModal .season-priority-row strong,
#seasonPlannerModal .season-chart-card strong,
#seasonPlannerModal .season-hbar-row strong,
#seasonPlannerModal .season-donut strong {
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-planner-header p,
#seasonPlannerModal .season-kpi-grid span,
#seasonPlannerModal .season-next-card span,
#seasonPlannerModal .season-next-card em,
#seasonPlannerModal .season-overview-card > span,
#seasonPlannerModal .season-insight-card > span,
#seasonPlannerModal .season-dashboard-tile em,
#seasonPlannerModal .season-event-row span,
#seasonPlannerModal .season-priority-row span,
#seasonPlannerModal .season-chart-card > span,
#seasonPlannerModal .season-load-chart-card p,
#seasonPlannerModal .season-hbar-row em,
#seasonPlannerModal .season-donut em,
#seasonPlannerModal .season-donut-legend span {
  color: var(--text-muted) !important;
}

#seasonPlannerModal .season-next-card,
#seasonPlannerModal .season-kpi-grid div,
#seasonPlannerModal .season-overview-card,
#seasonPlannerModal .season-insight-card,
#seasonPlannerModal .season-chart-card,
#seasonPlannerModal .season-donut-card,
#seasonPlannerModal .season-horizontal-bars,
#seasonPlannerModal .season-event-row,
#seasonPlannerModal .season-priority-row,
#seasonPlannerModal .season-empty,
#seasonPlannerModal .season-summary-grid div,
#seasonPlannerModal .season-summary-empty {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-next-card {
  border-color: rgba(134, 239, 172, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(255, 255, 255, 0.075)) !important;
}

#seasonPlannerModal .season-tab-button,
#seasonPlannerModal .season-priority-control,
#seasonPlannerModal .season-distance-control,
#seasonPlannerModal select,
#seasonPlannerModal button {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-tab-button.active,
#seasonPlannerModal button:hover {
  border-color: rgba(134, 239, 172, 0.44) !important;
  background: rgba(34, 197, 94, 0.18) !important;
}

#seasonPlannerModal .season-load-gauge {
  background:
    radial-gradient(circle at center, #0f172a 0 58%, transparent 59%),
    conic-gradient(
      var(--load-color, #22c55e) 0 var(--load-percent),
      rgba(255, 255, 255, 0.14) var(--load-percent) 100%
    ) !important;
}

#seasonPlannerModal .season-load-breakdown span,
#seasonPlannerModal .season-bar-track,
#seasonPlannerModal .season-hbar-row div {
  background: rgba(255, 255, 255, 0.11) !important;
}

.event-card .event-top,
.popup-card .event-top {
  padding: 2px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.035));
}

.event-card .event-title,
.event-card .event-top .event-title,
body.event-list-fullscreen .event-title {
  color: #ffffff !important;
  text-shadow: none;
}

.event-card .event-facts-grid,
.popup-card .event-facts-grid {
  border-color: rgba(148, 163, 184, 0.2) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.event-card .event-facts-grid span,
.popup-card .event-facts-grid span {
  color: var(--text-subtle) !important;
}

.event-card .event-facts-grid strong,
.popup-card .event-facts-grid strong {
  color: var(--text-main) !important;
}

.event-status-bar {
  border-top: 1px solid rgba(148, 163, 184, 0.2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-main) !important;
}

.event-status-bar.confirmed {
  border-top-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #bbf7d0 !important;
}

.event-status-bar.registration-open {
  border-top-color: rgba(56, 189, 248, 0.42) !important;
  background: rgba(56, 189, 248, 0.14) !important;
  color: #bae6fd !important;
}

.event-status-bar.registration-not-open {
  border-top-color: rgba(14, 165, 233, 0.46) !important;
  background: rgba(14, 165, 233, 0.14) !important;
  color: #bae6fd !important;
}

.event-status-bar.date-expected {
  border-top-color: rgba(245, 158, 11, 0.48) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}

.event-status-bar.sold-out,
.event-status-bar.cancelled {
  border-top-color: rgba(239, 68, 68, 0.52) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fecaca !important;
}

.event-status-bar.unclear {
  border-top-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: #cbd5e1 !important;
}

.event-status-dot {
  width: 10px;
  height: 10px;
}

.event-status-bar.confirmed .event-status-dot {
  background: #22c55e !important;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.18),
    0 0 18px rgba(34, 197, 94, 0.74) !important;
}

.event-status-bar.registration-open .event-status-dot {
  background: #38bdf8 !important;
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.18),
    0 0 18px rgba(56, 189, 248, 0.7) !important;
}

.event-status-bar.registration-not-open .event-status-dot {
  background: #0ea5e9 !important;
  box-shadow:
    0 0 0 4px rgba(14, 165, 233, 0.18),
    0 0 18px rgba(14, 165, 233, 0.68) !important;
}

.event-status-bar.date-expected .event-status-dot {
  background: #f59e0b !important;
  box-shadow:
    0 0 0 4px rgba(245, 158, 11, 0.2),
    0 0 18px rgba(245, 158, 11, 0.7) !important;
}

.event-status-bar.sold-out .event-status-dot,
.event-status-bar.cancelled .event-status-dot {
  background: #ef4444 !important;
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, 0.2),
    0 0 18px rgba(239, 68, 68, 0.7) !important;
}

.event-status-text {
  color: inherit !important;
}

/* Final dark readability pass for drawer, cards, popups and search */
#topbar-search input,
#searchInput {
  border-color: rgba(34, 197, 94, 0.62) !important;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

#topbar-search {
  border-radius: 999px;
}

.drawer-titlebar {
  border-bottom: 1px solid rgba(134, 239, 172, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(255, 255, 255, 0.055)) !important;
  color: var(--text-main) !important;
}

.drawer-titlebar h2,
.drawer-titlebar .drawer-title-copy h2,
.drawer-titlebar .drawer-title-copy strong {
  color: #ffffff !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

.drawer-title-kicker,
.drawer-title-meta {
  color: var(--text-muted) !important;
}

.drawer-title-icon {
  border-color: rgba(134, 239, 172, 0.34) !important;
  background: rgba(34, 197, 94, 0.15) !important;
  color: #bbf7d0 !important;
  box-shadow: none !important;
}

.drawer-favorite-btn {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #ef4444 !important;
  box-shadow: none !important;
}

#closeDrawer {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ffffff !important;
}

.event-card {
  overflow: hidden;
}

.event-card .event-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px 10px 9px !important;
}

.event-card .event-top > div,
.event-card .event-title,
.event-title {
  min-width: 0;
}

.event-card .event-title,
body.event-list-fullscreen .event-title {
  display: block;
  max-width: 100%;
  overflow: visible;
  color: #ffffff !important;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.event-card .event-meta {
  max-width: 100%;
  color: var(--text-muted) !important;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.event-card .favorite-btn,
.event-card .favorite-button,
.event-card .event-favorite-button {
  flex: 0 0 auto;
  min-width: 34px;
}

.event-card .event-facts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.event-card .event-facts-grid div,
.event-card .event-facts-grid strong,
.event-card .event-facts-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-card .event-facts-grid strong {
  font-size: 12px;
  line-height: 1.25;
}

.leaflet-popup-content-wrapper {
  border: 1px solid rgba(134, 239, 172, 0.3) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)) !important;
  color: var(--text-main) !important;
}

.leaflet-popup-content {
  width: min(260px, 72vw) !important;
  margin: 0 !important;
  color: var(--text-main) !important;
}

.popup-card {
  width: 100%;
  min-width: 0;
  padding: 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-main) !important;
}

.popup-chip {
  border-color: rgba(134, 239, 172, 0.32) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #bbf7d0 !important;
}

.popup-title {
  color: #ffffff !important;
  line-height: 1.22;
  white-space: normal;
  overflow-wrap: anywhere;
}

.popup-meta,
.popup-meta-grid,
.popup-meta-grid span {
  color: var(--text-muted) !important;
}

.popup-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.popup-meta-grid div,
.popup-distance {
  min-width: 0;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: var(--text-main) !important;
  overflow-wrap: anywhere;
}

.popup-distance {
  display: inline-flex;
  max-width: 100%;
  white-space: normal;
}

.popup-link,
.popup-button {
  width: 100%;
  border: 1px solid rgba(134, 239, 172, 0.42) !important;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-strong)) !important;
  color: #ffffff !important;
  text-align: center;
}

/* Final Season Planner color pass */
#seasonPlannerModal .season-tabs {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#seasonPlannerModal .season-tab {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-muted) !important;
}

#seasonPlannerModal .season-tab.active,
#seasonPlannerModal .season-tab:hover {
  border-color: rgba(134, 239, 172, 0.32) !important;
  background: rgba(34, 197, 94, 0.16) !important;
  color: #ffffff !important;
}

#seasonPlannerModal #seasonSportBreakdown div,
#seasonPlannerModal .season-summary-grid div,
#seasonPlannerModal .season-summary-empty,
#seasonPlannerModal .season-overview-mini-event {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.075) !important;
}

#seasonPlannerModal #seasonSportBreakdown strong,
#seasonPlannerModal .season-summary-grid strong,
#seasonPlannerModal .season-summary-empty strong,
#seasonPlannerModal .season-overview-mini-event strong {
  color: #ffffff !important;
}

#seasonPlannerModal #seasonSportBreakdown span,
#seasonPlannerModal .season-summary-grid span,
#seasonPlannerModal .season-summary-empty span,
#seasonPlannerModal .season-overview-mini-event span,
#seasonPlannerModal .season-overview-mini-event em {
  color: var(--text-muted) !important;
}

#seasonPlannerModal .season-warning-item {
  position: relative;
  overflow: hidden;
  border-color: rgba(245, 158, 11, 0.42) !important;
  background: rgba(245, 158, 11, 0.13) !important;
  color: #fde68a !important;
  box-shadow: inset 4px 0 0 #f59e0b;
}

#seasonPlannerModal .season-warning-item.high {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fecaca !important;
  box-shadow: inset 4px 0 0 #ef4444;
}

#seasonPlannerModal .season-warning-item strong,
#seasonPlannerModal .season-warning-item.high strong {
  color: inherit !important;
}

#seasonPlannerModal .season-warning-item span,
#seasonPlannerModal #seasonScheduleWarnings p {
  color: var(--text-muted) !important;
}

#seasonPlannerModal .season-month-title {
  border-bottom: 1px solid rgba(134, 239, 172, 0.18);
  background: #0f172a !important;
  color: #bbf7d0 !important;
}

#seasonPlannerModal .season-event-row,
#seasonPlannerModal .season-priority-row {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-event-row:hover,
#seasonPlannerModal .season-priority-row:hover {
  border-color: rgba(134, 239, 172, 0.38) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

#seasonPlannerModal .season-event-a-race {
  border-color: rgba(34, 197, 94, 0.5) !important;
  background: rgba(34, 197, 94, 0.13) !important;
  box-shadow: inset 4px 0 0 #22c55e !important;
}

#seasonPlannerModal .season-event-close-warning {
  border-color: rgba(245, 158, 11, 0.42) !important;
  box-shadow:
    inset 4px 0 0 #f59e0b,
    0 0 0 1px rgba(245, 158, 11, 0.16) !important;
}

#seasonPlannerModal .season-event-date {
  color: #86efac !important;
}

#seasonPlannerModal .season-event-main strong,
#seasonPlannerModal .season-event-main em,
#seasonPlannerModal .season-event-place {
  overflow-wrap: anywhere;
}

#seasonPlannerModal .season-event-main em,
#seasonPlannerModal .season-event-place {
  color: var(--text-muted) !important;
}

#seasonPlannerModal .season-priority-badge,
#seasonPlannerModal .season-load-badge {
  border-color: rgba(134, 239, 172, 0.26) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-load-low {
  border-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  color: #bbf7d0 !important;
}

#seasonPlannerModal .season-load-medium {
  border-color: rgba(56, 189, 248, 0.42) !important;
  background: rgba(56, 189, 248, 0.14) !important;
  color: #bae6fd !important;
}

#seasonPlannerModal .season-load-high {
  border-color: rgba(245, 158, 11, 0.48) !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}

#seasonPlannerModal .season-load-very-high {
  border-color: rgba(239, 68, 68, 0.52) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fecaca !important;
}

#seasonPlannerModal .season-priority-control span,
#seasonPlannerModal .season-priority-header-row,
#seasonPlannerModal .season-timeline-header-row {
  color: var(--text-subtle) !important;
}

#seasonPlannerModal .season-priority-control select,
#seasonPlannerModal .season-distance-control select {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(2, 6, 23, 0.7) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-chart-card,
#seasonPlannerModal .season-donut-card,
#seasonPlannerModal .season-horizontal-bars {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.055)) !important;
}

#seasonPlannerModal .season-load-gauge,
#seasonPlannerModal .season-donut {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

#seasonPlannerModal .season-donut {
  background:
    radial-gradient(circle at center, #0f172a 0 56%, transparent 57%),
    conic-gradient(var(--sport-gradient)) !important;
}

#seasonPlannerModal .season-bar-track,
#seasonPlannerModal .season-hbar-row div,
#seasonPlannerModal .season-load-breakdown span {
  background: rgba(255, 255, 255, 0.105) !important;
}

#seasonPlannerModal .season-bar-track span {
  background: linear-gradient(180deg, #86efac 0%, #22c55e 100%) !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.22);
}

#seasonPlannerModal .season-hbar-row div span {
  background: linear-gradient(90deg, #22c55e 0%, #86efac 100%) !important;
}

#seasonPlannerModal .season-priority-bars .season-hbar-row div span {
  background: linear-gradient(90deg, #38bdf8 0%, #22c55e 100%) !important;
}

#seasonPlannerModal .season-risk-active {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.14) !important;
}

#seasonPlannerModal .season-dashboard-tile-accent {
  border-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.13) !important;
}

#seasonPlannerModal .season-export-card,
#seasonPlannerModal .season-export-actions,
#seasonPlannerModal .season-calendar-export {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-export-actions button,
#seasonPlannerModal .season-open-event,
#seasonPlannerModal .season-google-event {
  border-color: rgba(134, 239, 172, 0.32) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

#seasonPlannerModal .season-export-actions button:hover,
#seasonPlannerModal .season-open-event:hover,
#seasonPlannerModal .season-google-event:hover {
  border-color: rgba(134, 239, 172, 0.5) !important;
  background: rgba(34, 197, 94, 0.18) !important;
}

/* Final fullscreen pagination and drawer detail readability */
body.event-list-fullscreen #eventListPagination {
  border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.86)) !important;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

body.event-list-fullscreen #eventListPagination button {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

body.event-list-fullscreen #eventListPagination button:hover:not(:disabled) {
  border-color: rgba(134, 239, 172, 0.48) !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #ffffff !important;
}

body.event-list-fullscreen #eventListPagination button:disabled {
  border-color: rgba(148, 163, 184, 0.14) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(203, 213, 225, 0.44) !important;
}

body.event-list-fullscreen .event-list-page-info {
  color: var(--text-muted) !important;
}

#eventDrawer .drawer-section {
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.055) !important;
}

#eventDrawer .drawer-label {
  color: #86efac !important;
}

#eventDrawer .drawer-overview-grid {
  gap: 10px;
}

#eventDrawer .drawer-overview-grid div,
#eventDrawer .event-stats-list div,
#eventDrawer .event-stat-item {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.052)) !important;
  color: var(--text-main) !important;
}

#eventDrawer .drawer-overview-grid span,
#eventDrawer .event-stats-list span,
#eventDrawer .event-stat-item span {
  color: var(--text-subtle) !important;
}

#eventDrawer .drawer-overview-grid strong,
#eventDrawer .event-stats-list strong,
#eventDrawer .event-stat-item strong {
  color: #ffffff !important;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

#eventDrawer .drawer-action-row {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#eventDrawer .drawer-season-btn,
#eventDrawer .drawer-copy-btn {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

#eventDrawer .drawer-season-btn.active,
#eventDrawer .drawer-season-btn:hover,
#eventDrawer .drawer-copy-btn:hover {
  border-color: rgba(134, 239, 172, 0.48) !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #ffffff !important;
}

#eventDrawer .drawer-status-pill {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

#eventDrawer .drawer-status-pill.confirmed {
  border-color: rgba(34, 197, 94, 0.42) !important;
  background: rgba(34, 197, 94, 0.14) !important;
}

#eventDrawer .drawer-status-pill.registration-open {
  border-color: rgba(56, 189, 248, 0.42) !important;
  background: rgba(56, 189, 248, 0.14) !important;
}

#eventDrawer .drawer-status-pill.registration-not-open {
  border-color: rgba(14, 165, 233, 0.46) !important;
  background: rgba(14, 165, 233, 0.14) !important;
}

#eventDrawer .drawer-status-pill.date-expected {
  border-color: rgba(245, 158, 11, 0.48) !important;
  background: rgba(245, 158, 11, 0.15) !important;
}

#eventDrawer .drawer-status-pill.sold-out,
#eventDrawer .drawer-status-pill.cancelled {
  border-color: rgba(239, 68, 68, 0.52) !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

/* MVP feedback and analytics */
#feedbackModal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(14px);
}

#feedbackModal.open {
  display: flex;
}

.feedback-card {
  position: relative;
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(134, 239, 172, 0.26);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
}

.feedback-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: 26px;
}

.feedback-card p,
.feedback-card label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.feedback-card label {
  display: grid;
  gap: 7px;
}

.feedback-card textarea,
.feedback-card select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.62);
  color: var(--text-main);
  font: inherit;
  padding: 12px;
}

.feedback-card textarea:focus,
.feedback-card select:focus {
  border-color: rgba(34, 197, 94, 0.62);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

#closeFeedbackModal {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

#submitFeedbackBtn {
  min-height: 44px;
  border: 1px solid rgba(134, 239, 172, 0.44);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-strong));
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
}

.analytics-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.analytics-card,
.analytics-list-item {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
}

.analytics-card span,
.analytics-card em,
.analytics-list-item span {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.analytics-card strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
}

.analytics-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.analytics-table-grid h4 {
  margin-bottom: 8px;
  color: #86efac;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.analytics-list-item {
  margin-bottom: 8px;
}

.analytics-list-item strong {
  color: #ffffff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .analytics-table-grid {
    grid-template-columns: 1fr;
  }
}

/* Final Admin Dashboard readability pass */
#adminModal {
  background: rgba(2, 6, 23, 0.78) !important;
  backdrop-filter: blur(16px);
}

#adminModal .admin-card {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  border: 1px solid rgba(134, 239, 172, 0.26) !important;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96) 62%, rgba(8, 18, 26, 0.98)) !important;
  color: var(--text-main) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}

#adminModal .admin-card h2,
#adminModal .admin-table-section h3,
#adminModal .admin-quality-grid h4,
#adminModal .admin-import-panel h3,
#adminModal .analytics-table-grid h4 {
  color: #ffffff !important;
}

#adminModal .admin-card h2 {
  margin-bottom: 12px;
  font-size: clamp(26px, 3vw, 36px);
}

#adminModal #closeAdminModal {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#adminModal #closeAdminModal:hover {
  border-color: rgba(134, 239, 172, 0.5) !important;
  background: rgba(34, 197, 94, 0.18) !important;
}

#adminModal .admin-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

#adminModal .admin-tab {
  min-height: 40px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-muted) !important;
}

#adminModal .admin-tab.active,
#adminModal .admin-tab:hover {
  border-color: rgba(134, 239, 172, 0.38) !important;
  background: rgba(34, 197, 94, 0.16) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#adminModal #adminStats,
#adminModal .analytics-dashboard-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

#adminModal .admin-stat-card,
#adminModal .analytics-card,
#adminModal .analytics-list-item,
#adminModal .admin-table-section,
#adminModal .admin-quality-grid > div,
#adminModal .admin-import-panel,
#adminModal .pending-card,
#adminModal .pending-card-details div,
#adminModal .pending-card-description,
#adminModal .admin-quality-item {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.055)) !important;
  color: var(--text-main) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

#adminModal .admin-stat-card:hover,
#adminModal .analytics-card:hover,
#adminModal .pending-card:hover,
#adminModal .admin-quality-item:hover {
  border-color: rgba(134, 239, 172, 0.42) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  transform: translateY(-1px);
}

#adminModal .admin-stat-card span,
#adminModal .analytics-card span,
#adminModal .analytics-card em,
#adminModal .analytics-list-item span,
#adminModal .pending-card span,
#adminModal .pending-card-details span,
#adminModal .pending-card-description span,
#adminModal .admin-quality-item span,
#adminModal .admin-quality-empty,
#adminModal .admin-import-panel p,
#adminModal .admin-import-empty {
  color: var(--text-muted) !important;
}

#adminModal .admin-stat-card strong,
#adminModal .analytics-card strong,
#adminModal .analytics-list-item strong,
#adminModal .pending-card strong,
#adminModal .pending-card h4,
#adminModal .pending-card-details strong,
#adminModal .pending-card-description strong,
#adminModal .admin-quality-item strong {
  color: #ffffff !important;
  overflow-wrap: anywhere;
}

#adminModal .admin-stat-card strong {
  font-size: clamp(24px, 3vw, 34px);
}

#adminModal .analytics-ratio-card strong {
  color: #86efac !important;
}

#adminModal .admin-stat-positive {
  color: #86efac !important;
}

#adminModal .admin-stat-negative {
  color: #fca5a5 !important;
}

#adminModal .analytics-insight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

#adminModal .analytics-insight-strip div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(134, 239, 172, 0.22);
  border-radius: 18px;
  background: rgba(34, 197, 94, 0.105);
}

#adminModal .analytics-insight-strip strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

#adminModal .analytics-insight-strip span {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#adminModal .admin-quality-grid,
#adminModal .analytics-table-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#adminModal input,
#adminModal select,
#adminModal textarea {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(2, 6, 23, 0.62) !important;
  color: var(--text-main) !important;
}

#adminModal input:focus,
#adminModal select:focus,
#adminModal textarea:focus {
  border-color: rgba(34, 197, 94, 0.62) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

#adminModal button:not(.admin-tab):not(#closeAdminModal),
#adminModal .admin-data-workflow-grid a {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

#adminModal button:not(.admin-tab):not(#closeAdminModal):hover,
#adminModal .admin-data-workflow-grid a:hover {
  border-color: rgba(134, 239, 172, 0.5) !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #ffffff !important;
}

#adminModal .approve-event-btn,
#adminModal .admin-action-approve,
#adminModal #saveWorldTriathlonBtn {
  border-color: rgba(134, 239, 172, 0.46) !important;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-strong)) !important;
  color: #ffffff !important;
}

#adminModal .reject-event-btn,
#adminModal .admin-action-reject {
  border-color: rgba(248, 113, 113, 0.42) !important;
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fecaca !important;
}

#adminModal a {
  color: #86efac !important;
}

#adminModal .pending-card-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  #adminModal {
    align-items: stretch;
    padding: 10px;
  }

  #adminModal .admin-card {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 20px);
    padding: 20px;
    border-radius: 22px;
  }

  #adminModal .analytics-insight-strip,
  #adminModal .admin-quality-grid,
  #adminModal .analytics-table-grid {
    grid-template-columns: 1fr;
  }
}

/* Closed beta readiness */
.beta-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 10500;
  width: min(780px, calc(100vw - 28px));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(134, 239, 172, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(20, 83, 45, 0.82));
  color: var(--text-main);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

body.sidebar-collapsed:not(.landing-open):not(.event-list-fullscreen):not(.mobile-filter-open) .beta-banner {
  display: flex;
}

body:not(.event-list-fullscreen) #sidebar.closed {
  margin-left: -394px !important;
  visibility: hidden;
  pointer-events: none;
}

body.sidebar-collapsed:not(.event-list-fullscreen) #app {
  box-sizing: border-box;
}

body.sidebar-collapsed:not(.event-list-fullscreen) #map {
  border-radius: var(--radius-lg) !important;
  clip-path: inset(0 round var(--radius-lg));
}

/* Final sidebar distance filter readability */
body:not(.event-list-fullscreen) .filter-distance-card {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body:not(.event-list-fullscreen) .filter-distance-card .filter-accordion-toggle {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #ffffff !important;
}

body:not(.event-list-fullscreen) .filter-distance-card .filter-accordion-toggle span {
  color: #bbf7d0 !important;
}

body:not(.event-list-fullscreen) .filter-distance-card #distanceFilterCount {
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(34, 197, 94, 0.14);
  color: #ffffff !important;
}

body:not(.event-list-fullscreen) .filter-distance-card .filter-accordion-content {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body:not(.event-list-fullscreen) #distanceFilters {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
}

body:not(.event-list-fullscreen) .distance-filter-group {
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.54)) !important;
}

body:not(.event-list-fullscreen) .distance-filter-group-title {
  color: #86efac !important;
}

body:not(.event-list-fullscreen) .distance-filter-chip {
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

body:not(.event-list-fullscreen) .distance-filter-chip:hover,
body:not(.event-list-fullscreen) .distance-filter-chip:focus-visible {
  border-color: rgba(134, 239, 172, 0.52) !important;
  background: rgba(34, 197, 94, 0.16) !important;
  color: #ffffff !important;
}

body:not(.event-list-fullscreen) .distance-filter-chip.active {
  border-color: rgba(134, 239, 172, 0.62) !important;
  background:
    linear-gradient(135deg, var(--accent-green), var(--accent-green-strong)) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.2) !important;
}

.beta-banner div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.beta-banner strong {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.beta-banner span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.beta-banner button,
.event-empty-reset-btn,
.drawer-share-btn {
  min-height: 38px;
  border: 1px solid rgba(134, 239, 172, 0.4);
  border-radius: 13px;
  background: rgba(34, 197, 94, 0.16);
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  white-space: nowrap;
}

.beta-banner button {
  padding: 0 14px;
}

.beta-banner button:hover,
.event-empty-reset-btn:hover,
.drawer-share-btn:hover {
  border-color: rgba(134, 239, 172, 0.62);
  background: rgba(34, 197, 94, 0.25);
}

#welcomeModal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(16px);
}

#welcomeModal.open {
  display: flex;
}

.welcome-card {
  position: relative;
  width: min(500px, 100%);
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid rgba(134, 239, 172, 0.28);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 18, 26, 0.98));
  color: var(--text-main);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.welcome-card > span {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.welcome-card h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.05;
}

.welcome-copy {
  margin: -2px 0 2px;
  color: rgba(226, 232, 240, 0.84);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.welcome-card ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-muted);
  font-weight: 850;
  line-height: 1.45;
}

.welcome-card li::marker {
  color: #4ade80;
  font-weight: 950;
}

#startWelcomeBtn {
  min-height: 46px;
  border: 1px solid rgba(134, 239, 172, 0.48);
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-strong));
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
  box-shadow: 0 14px 32px rgba(34, 197, 94, 0.22);
}

#closeWelcomeModal {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

#closeWelcomeModal:hover {
  border-color: rgba(134, 239, 172, 0.45);
  background: rgba(34, 197, 94, 0.14);
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .welcome-card {
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    border-radius: 22px;
  }

  .welcome-card h2 {
    font-size: 29px;
  }
}

.feedback-rating-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.feedback-rating-options button {
  min-height: 52px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  cursor: pointer;
  font-size: 24px;
}

.feedback-rating-options button:hover,
.feedback-rating-options button.active {
  border-color: rgba(134, 239, 172, 0.56);
  background: rgba(34, 197, 94, 0.18);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.event-list-empty {
  gap: 12px;
}

.event-empty-reset-btn {
  width: fit-content;
  padding: 0 14px;
}

.drawer-action-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drawer-share-btn {
  padding: 0 12px;
}

@media (max-width: 760px) {
  .beta-banner {
    align-items: stretch;
    flex-direction: column;
    bottom: 12px;
  }

  .beta-banner button {
    width: 100%;
  }

  .drawer-action-row {
    grid-template-columns: 1fr;
  }
}

/* MVP micro-interactions */
#app,
#map,
#sidebar,
#eventList,
#eventDrawer,
#drawerContent,
#eventListToolbar,
#eventListPagination,
.landing-page,
.season-planner-card,
.profile-card,
.admin-card,
.feedback-card,
.event-card,
.filter-chip,
.distance-filter-chip,
button,
a {
  transition:
    transform var(--transition-fast),
    opacity var(--transition-med),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
}

button:active,
.event-card button:active,
.drawer-action-row button:active,
#topbar button:active,
#eventListPagination button:active:not(:disabled) {
  transform: scale(0.98);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.event-card:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

button:disabled,
#eventListPagination button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none !important;
}

.beta-banner {
  display: flex !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px);
  visibility: hidden;
  transition:
    opacity 260ms var(--ease-smooth),
    transform 260ms var(--ease-smooth),
    visibility 0ms linear 260ms;
}

body.sidebar-collapsed:not(.landing-open):not(.event-list-fullscreen):not(.mobile-filter-open) .beta-banner {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition:
    opacity 260ms var(--ease-smooth),
    transform 260ms var(--ease-smooth),
    visibility 0ms;
}

body.event-list-fullscreen #app,
body:not(.event-list-fullscreen) #app {
  transition:
    padding var(--transition-med),
    gap var(--transition-med),
    background-color var(--transition-med);
}

body.event-list-fullscreen #sidebar,
body.event-list-fullscreen #eventList,
body.event-list-fullscreen #eventListToolbar,
body.event-list-fullscreen #eventListPagination {
  animation: panelFadeIn 240ms var(--ease-smooth);
}

#toggleEventListFullscreen {
  position: relative;
  overflow: hidden;
}

#toggleEventListFullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(134, 239, 172, 0.16);
  opacity: 0;
  transform: scaleX(0.82);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

#toggleEventListFullscreen:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

#toggleEventListFullscreen span,
#toggleEventListFullscreen {
  z-index: 1;
}

#eventDrawer {
  opacity: 0;
  transform: translateX(22px);
  transition:
    width 320ms var(--ease-smooth),
    opacity 240ms var(--ease-smooth),
    transform 320ms var(--ease-smooth),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  will-change: width, transform, opacity;
}

#eventDrawer.open {
  opacity: 1;
  transform: translateX(0);
}

#drawerContent {
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 180ms ease-out,
    transform 220ms var(--ease-smooth);
}

#eventDrawer.open #drawerContent {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  #eventDrawer {
    opacity: 0;
    transform: translateY(24px);
  }

  #eventDrawer.open {
    opacity: 1;
    transform: translateY(0);
    border-radius: 22px 22px 0 0;
  }
}

.event-card {
  will-change: transform;
}

.event-card:hover,
.event-card:focus-visible {
  transform: var(--hover-lift);
  border-color: rgba(134, 239, 172, 0.54) !important;
  background: rgba(255, 255, 255, 0.105) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(134, 239, 172, 0.12) !important;
}

.favorite-btn,
.drawer-favorite-btn {
  transform-origin: center;
}

.favorite-btn.favorite-pulse,
.drawer-favorite-btn.favorite-pulse {
  animation: favoritePulse 280ms var(--ease-smooth);
}

.filter-chip.active,
.distance-filter-chip.active {
  transform: translateY(-1px);
}

#topbar-search input,
#searchInput {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

#searchSuggestions {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

#searchSuggestions.open {
  opacity: 1;
  transform: translateY(0);
}

/* Keep smart search suggestions visually like before, but correctly centered below the search input. */
#topbar-search #searchSuggestions {
  top: calc(100% + 10px);
  left: 50%;
  right: auto;
  width: min(520px, 92vw);
  max-width: none;
  transform: translateX(-50%) translateY(8px);
}

#topbar-search #searchSuggestions.open {
  transform: translateX(-50%) translateY(0);
}

.filter-accordion-content,
.filter-dropdown .filter-accordion-content {
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.filter-accordion.open .filter-accordion-content {
  animation: panelFadeIn 180ms var(--ease-smooth);
}

.event-list-empty,
.event-list-loading {
  animation: panelFadeIn 220ms var(--ease-smooth);
}

.event-list-loading {
  position: relative;
  overflow: hidden;
}

.event-list-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.08) 40%, transparent 70%);
  transform: translateX(-100%);
  animation: skeletonSweep 1100ms ease-in-out infinite;
}

.app-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 13000;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.app-toast {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid rgba(134, 239, 172, 0.3);
  border-left: 4px solid var(--accent-green);
  border-radius: 16px;
  background: var(--toast-bg);
  color: var(--text-main);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 220ms var(--ease-smooth),
    transform 220ms var(--ease-smooth);
  backdrop-filter: blur(12px);
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-toast.is-hiding {
  opacity: 0;
  transform: translateY(-8px);
}

.app-toast strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.app-toast span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

#authModal,
#profileModal,
#seasonPlannerModal,
#adminModal,
#feedbackModal,
#welcomeModal {
  transition:
    opacity var(--transition-med),
    background-color var(--transition-med);
}

#authModal.open .auth-card,
#profileModal.open .profile-card,
#seasonPlannerModal.open .season-planner-card,
#adminModal.open .admin-card,
#feedbackModal.open .feedback-card,
#welcomeModal.open .welcome-card {
  animation: panelRise 240ms var(--ease-smooth);
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes favoritePulse {
  0% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.16);
  }

  100% {
    transform: scale(1);
  }
}

/* Season Planner high-value decision metrics */
.season-decision-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.season-decision-card,
.season-recommendation-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.045));
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.18);
}

.season-decision-card > span,
.season-recommendation-section .season-section-title {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.season-score-value,
.season-decision-value,
.season-decision-empty {
  display: grid;
  gap: 4px;
}

.season-score-value strong,
.season-decision-value strong,
.season-decision-empty strong {
  color: #ffffff;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 950;
  line-height: 1;
}

.season-score-value em,
.season-decision-value em,
.season-decision-empty em {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(134, 239, 172, 0.26);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.season-score-value em::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.8);
}

.season-score-good em {
  border-color: rgba(250, 204, 21, 0.36);
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
}

.season-score-good em::before {
  background: #facc15;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.78);
}

.season-score-busy em {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

.season-score-busy em::before {
  background: #f97316;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.76);
}

.season-score-overloaded em {
  border-color: rgba(239, 68, 68, 0.46);
  background: rgba(239, 68, 68, 0.14);
  color: #fecaca;
}

.season-score-overloaded em::before {
  background: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.78);
}

.season-decision-card p,
.season-decision-card span:not(:first-child),
.season-recommendation-section small {
  display: block;
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.season-decision-link {
  width: 100%;
  margin-top: 10px;
}

.season-recommendation-section {
  margin-top: 12px;
}

.season-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.season-recommendation-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.07);
}

.season-recommendation-card span {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
}

.season-recommendation-card strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.season-recommendation-card em,
.season-recommendation-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.3;
}

.season-recommendation-card button {
  min-height: 36px;
  margin-top: 4px;
  border: 1px solid rgba(134, 239, 172, 0.42) !important;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.16) !important;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 950;
}

.season-recommendation-card button:hover,
.season-recommendation-card button:focus-visible {
  background: rgba(34, 197, 94, 0.26) !important;
  outline: none;
}

@media (max-width: 980px) {
  .season-decision-grid,
  .season-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

/* Season Planner cockpit layout */
#seasonPlannerModal .season-planner-card {
  width: min(1280px, calc(100vw - 28px));
}

#seasonPlannerModal .season-overview-hero {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.78fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
}

#seasonPlannerModal .season-next-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 24px;
  border-color: rgba(134, 239, 172, 0.42) !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(34, 197, 94, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(7, 26, 23, 0.96), rgba(15, 23, 42, 0.9)) !important;
}

#seasonPlannerModal .season-next-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  pointer-events: none;
}

#seasonPlannerModal .season-next-card > span {
  color: #86efac !important;
}

#seasonPlannerModal .season-next-card #seasonCountdown {
  max-width: 720px;
  margin-top: 14px;
  color: #ffffff !important;
  font-size: clamp(44px, 7vw, 82px);
  letter-spacing: -0.03em;
}

#seasonPlannerModal .season-next-card #seasonNextEventName {
  max-width: 680px;
  margin-top: 10px;
  color: #bbf7d0 !important;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 950;
  line-height: 1.12;
}

#seasonPlannerModal .season-next-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

#seasonPlannerModal .season-next-meta > div,
#seasonPlannerModal .season-kpi-grid > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.075) !important;
}

#seasonPlannerModal .season-next-meta strong {
  margin-top: 6px;
  color: #ffffff !important;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#seasonPlannerModal .season-kpi-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

#seasonPlannerModal .season-kpi-grid strong {
  color: #ffffff !important;
  font-size: clamp(22px, 3vw, 32px);
}

#seasonPlannerModal .season-score-kpi .season-score-value strong {
  font-size: clamp(22px, 3vw, 30px);
}

#seasonPlannerModal .season-score-kpi #seasonScoreMetric p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

#seasonPlannerModal .season-health-card,
#seasonPlannerModal .season-focus-card,
#seasonPlannerModal .season-training-card,
#seasonPlannerModal .season-calendar-section,
#seasonPlannerModal .season-recommendation-section {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.052));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.18);
}

#seasonPlannerModal .season-health-summary-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#seasonPlannerModal .season-health-summary-list div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.34);
}

#seasonPlannerModal .season-health-summary-list div.season-health-risk {
  border-color: rgba(249, 115, 22, 0.44);
  background: rgba(249, 115, 22, 0.13);
}

#seasonPlannerModal .season-health-summary-list span,
#seasonPlannerModal .season-subtitle {
  display: block;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

#seasonPlannerModal .season-health-summary-list strong {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

#seasonPlannerModal .season-health-summary-list em {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

#seasonPlannerModal .season-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 14px;
  align-items: start;
}

#seasonPlannerModal .season-focus-card {
  min-height: 420px;
}

#seasonPlannerModal .season-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  margin-top: 12px;
}

#seasonPlannerModal .season-focus-layout > div,
#seasonPlannerModal .season-priority-planner,
#seasonPlannerModal .season-training-opportunity {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.28);
}

#seasonPlannerModal .season-priority-planner,
#seasonPlannerModal .season-training-opportunity {
  margin-top: 12px;
}

#seasonPlannerModal #seasonOverviewARaces,
#seasonPlannerModal #seasonOverviewSportMix,
#seasonPlannerModal #seasonPriorityList,
#seasonPlannerModal #seasonTrainingBlock,
#seasonPlannerModal #seasonTrainingOpportunity {
  margin-top: 10px;
}

#seasonPlannerModal .season-priority-row {
  grid-template-columns: 82px minmax(180px, 1fr) 92px minmax(150px, 0.8fr) minmax(120px, 0.72fr);
  gap: 10px;
  align-items: end;
}

#seasonPlannerModal .season-priority-header-row {
  grid-template-columns: 82px minmax(180px, 1fr) 92px minmax(150px, 0.8fr) minmax(120px, 0.72fr);
}

#seasonPlannerModal .season-calendar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

#seasonPlannerModal .season-calendar-header p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 750;
}

#seasonPlannerModal .season-calendar-view-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.42);
}

#seasonPlannerModal .season-calendar-view-toggle button {
  min-height: 32px;
  padding: 0 13px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 12px;
  font-weight: 950;
}

#seasonPlannerModal .season-calendar-view-toggle button.active,
#seasonPlannerModal .season-calendar-view-toggle button:hover {
  background: rgba(34, 197, 94, 0.22) !important;
  color: #ffffff !important;
}

#seasonPlannerModal .season-calendar-view {
  display: grid;
  gap: 12px;
}

#seasonPlannerModal .season-calendar-view-month {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

#seasonPlannerModal .season-calendar-view-list {
  grid-template-columns: 1fr;
}

#seasonPlannerModal .season-calendar-month {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.27);
  animation: seasonPanelIn 0.22s ease-out both;
}

#seasonPlannerModal .season-month-title {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: transparent !important;
}

#seasonPlannerModal .season-month-title span {
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 950;
}

#seasonPlannerModal .season-month-title em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

#seasonPlannerModal .season-calendar-events {
  display: grid;
  gap: 9px;
  margin-top: 11px;
}

#seasonPlannerModal .season-calendar-race-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "day main priority remove"
    "day place load remove"
    "gap gap calendar remove";
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.065);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

#seasonPlannerModal .season-calendar-race-card:hover,
#seasonPlannerModal .season-calendar-race-card:focus-visible {
  border-color: rgba(134, 239, 172, 0.46);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  outline: none;
  transform: translateY(-1px);
}

#seasonPlannerModal .season-calendar-day {
  grid-area: day;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(134, 239, 172, 0.32);
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.16);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

#seasonPlannerModal .season-gap-badge {
  grid-area: gap;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#seasonPlannerModal .season-calendar-view-list .season-calendar-race-card {
  grid-template-areas:
    "day main place load priority gap calendar remove";
  grid-template-columns: 58px minmax(0, 1.7fr) minmax(120px, 0.8fr) 120px 120px 120px 94px 38px;
}

#seasonPlannerModal .season-calendar-race-card .season-event-main {
  grid-area: main;
}

#seasonPlannerModal .season-calendar-race-card .season-event-place {
  grid-area: place;
}

#seasonPlannerModal .season-calendar-race-card .season-load-badge {
  grid-area: load;
}

#seasonPlannerModal .season-calendar-race-card .season-priority-badge {
  grid-area: priority;
}

#seasonPlannerModal .season-calendar-race-card .season-google-event {
  grid-area: calendar;
}

#seasonPlannerModal .season-calendar-race-card .season-remove-event {
  grid-area: remove;
  align-self: stretch;
  justify-self: end;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.34) !important;
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.18) !important;
  color: #fecaca !important;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

#seasonPlannerModal .season-calendar-race-card .season-remove-event:hover,
#seasonPlannerModal .season-calendar-race-card .season-remove-event:focus-visible {
  border-color: rgba(248, 113, 113, 0.68) !important;
  background: rgba(239, 68, 68, 0.24) !important;
  color: #ffffff !important;
  outline: none;
  transform: translateY(-1px);
}

#seasonPlannerModal .season-legacy-hidden {
  display: none;
}

@keyframes seasonPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  #seasonPlannerModal .season-overview-hero,
  #seasonPlannerModal .season-cockpit-grid,
  #seasonPlannerModal .season-focus-layout,
  #seasonPlannerModal .season-calendar-view-month {
    grid-template-columns: 1fr;
  }

  #seasonPlannerModal .season-health-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #seasonPlannerModal .season-calendar-race-card,
  #seasonPlannerModal .season-calendar-view-list .season-calendar-race-card,
  #seasonPlannerModal .season-priority-row,
  #seasonPlannerModal .season-priority-header-row {
    grid-template-columns: 1fr;
  }

  #seasonPlannerModal .season-calendar-race-card,
  #seasonPlannerModal .season-calendar-view-list .season-calendar-race-card {
    grid-template-areas:
      "day"
      "main"
      "place"
      "load"
      "priority"
      "gap"
      "calendar"
      "remove";
  }
}

@media (max-width: 700px) {
  #seasonPlannerModal .season-planner-card {
    width: min(calc(100vw - 14px), 1280px);
    max-width: calc(100vw - 14px);
    padding: 16px;
  }

  #seasonPlannerModal .season-next-card {
    min-height: 0;
    padding: 18px;
  }

  #seasonPlannerModal .season-next-meta,
  #seasonPlannerModal .season-health-summary-list {
    grid-template-columns: 1fr;
  }

  #seasonPlannerModal .season-calendar-header {
    flex-direction: column;
  }
}

/* Shared language control */
.app-language-select {
  min-width: 62px;
  min-height: 38px;
  padding: 7px 28px 7px 11px;
  border: 1px solid rgba(134, 239, 172, 0.34);
  border-radius: 12px;
  background-color: rgba(8, 18, 26, 0.82);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.app-language-select:hover,
.app-language-select:focus-visible {
  border-color: var(--accent-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13);
}

.landing-brand .app-language-select {
  margin-left: auto;
  background-color: rgba(2, 6, 23, 0.42);
}

@media (max-width: 700px) {
  #topbar-right .app-language-select {
    min-width: 56px;
    padding-inline: 9px 24px;
  }
}

/* Season Planner readability and spacing polish */
#seasonPlannerModal .season-planner-card {
  padding: var(--space-xl);
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-planner-header {
  margin-bottom: var(--space-lg);
}

#seasonPlannerModal .season-planner-header h2 {
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-planner-header p {
  color: #d1d9e6;
  line-height: var(--line-height-relaxed);
}

#seasonPlannerModal .season-section-title {
  margin-bottom: var(--space-md);
  color: #86efac !important;
  font-size: 12px;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-tabs {
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

#seasonPlannerModal .season-overview-hero {
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

#seasonPlannerModal .season-next-card {
  min-height: 285px;
  padding: var(--space-xl);
}

#seasonPlannerModal .season-next-card #seasonCountdown {
  margin-top: var(--space-md);
  line-height: 1.02;
}

#seasonPlannerModal .season-next-card #seasonNextEventName {
  margin-top: var(--space-md);
  color: #dcfce7 !important;
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-next-meta {
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

#seasonPlannerModal .season-next-meta > div,
#seasonPlannerModal .season-kpi-grid > div {
  padding: var(--space-md);
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(255, 255, 255, 0.085) !important;
}

#seasonPlannerModal .season-next-meta span,
#seasonPlannerModal .season-kpi-grid span {
  color: #aebbd0 !important;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-next-meta strong,
#seasonPlannerModal .season-kpi-grid strong {
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-kpi-grid {
  gap: var(--space-md);
}

#seasonPlannerModal .season-health-card,
#seasonPlannerModal .season-focus-card,
#seasonPlannerModal .season-training-card,
#seasonPlannerModal .season-calendar-section,
#seasonPlannerModal .season-recommendation-section {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border-radius: 24px;
}

#seasonPlannerModal .season-health-summary-list {
  gap: var(--space-md);
  margin-top: var(--space-md);
}

#seasonPlannerModal .season-health-summary-list div {
  padding: var(--space-md);
  border-radius: 18px;
}

#seasonPlannerModal .season-health-summary-list span,
#seasonPlannerModal .season-subtitle {
  color: #aebbd0;
  font-size: 11px;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-health-summary-list strong {
  margin-top: var(--space-sm);
  color: #ffffff;
  font-size: 18px;
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-health-summary-list em {
  margin-top: var(--space-xs);
  color: #cbd5e1;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-cockpit-grid {
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

#seasonPlannerModal .season-focus-card,
#seasonPlannerModal .season-training-card {
  min-height: unset;
}

#seasonPlannerModal .season-focus-layout {
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

#seasonPlannerModal .season-focus-layout > div,
#seasonPlannerModal .season-priority-planner,
#seasonPlannerModal .season-training-opportunity {
  padding: var(--space-lg);
  border-radius: 20px;
}

#seasonPlannerModal .season-priority-planner,
#seasonPlannerModal .season-training-opportunity {
  margin-top: var(--space-lg);
}

#seasonPlannerModal #seasonOverviewARaces,
#seasonPlannerModal #seasonOverviewSportMix,
#seasonPlannerModal #seasonPriorityList,
#seasonPlannerModal #seasonTrainingBlock,
#seasonPlannerModal #seasonTrainingOpportunity {
  gap: var(--space-md);
  margin-top: var(--space-md);
}

#seasonPlannerModal .season-overview-mini-event {
  gap: var(--space-xs);
  padding: var(--space-md);
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-overview-mini-event strong,
#seasonPlannerModal .season-priority-row strong,
#seasonPlannerModal .season-calendar-race-card .season-event-main strong {
  color: #ffffff !important;
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-overview-mini-event span,
#seasonPlannerModal .season-overview-mini-event em,
#seasonPlannerModal .season-priority-row em,
#seasonPlannerModal .season-calendar-race-card .season-event-main em,
#seasonPlannerModal .season-calendar-race-card .season-event-place {
  color: #cbd5e1 !important;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-priority-row {
  gap: var(--space-md);
  padding: var(--space-md);
  align-items: center;
}

#seasonPlannerModal .season-priority-header-row {
  gap: var(--space-md);
  padding: 0 var(--space-md) var(--space-xs);
}

#seasonPlannerModal .season-priority-control,
#seasonPlannerModal .season-distance-control {
  gap: var(--space-xs);
}

#seasonPlannerModal .season-priority-control select,
#seasonPlannerModal .season-distance-control select {
  min-height: 40px;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-warning-item {
  padding: var(--space-md);
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-warning-item strong {
  color: #fde68a !important;
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-warning-item span,
#seasonPlannerModal #seasonScheduleWarnings p,
#seasonPlannerModal #seasonOverviewWarnings p {
  color: #e2e8f0 !important;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-calendar-section {
  margin-top: var(--space-xl);
}

#seasonPlannerModal .season-calendar-header {
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

#seasonPlannerModal .season-calendar-header p {
  color: #cbd5e1;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-calendar-view {
  gap: var(--space-lg);
}

#seasonPlannerModal .season-calendar-month {
  padding: var(--space-lg);
  border-radius: 22px;
}

#seasonPlannerModal .season-month-title {
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}

#seasonPlannerModal .season-month-title span {
  font-size: 14px;
  line-height: var(--line-height-tight);
}

#seasonPlannerModal .season-month-title em {
  color: #cbd5e1;
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-calendar-events {
  gap: var(--space-md);
  margin-top: var(--space-md);
}

#seasonPlannerModal .season-calendar-race-card {
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border-radius: 18px;
}

#seasonPlannerModal .season-calendar-day {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

#seasonPlannerModal .season-priority-badge,
#seasonPlannerModal .season-load-badge,
#seasonPlannerModal .season-gap-badge {
  min-height: 30px;
  padding: 0 var(--space-sm);
  line-height: var(--line-height-normal);
}

#seasonPlannerModal .season-calendar-race-card .season-google-event {
  min-height: 36px;
}

#seasonPlannerModal .season-calendar-race-card .season-remove-event {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}

#seasonPlannerModal .season-recommendation-section {
  margin-top: var(--space-xl);
}

#seasonPlannerModal .season-recommendation-grid {
  gap: var(--space-md);
}

#seasonPlannerModal .season-recommendation-card {
  padding: var(--space-md);
  line-height: var(--line-height-normal);
}

@media (max-width: 1120px) {
  #seasonPlannerModal .season-overview-hero,
  #seasonPlannerModal .season-cockpit-grid,
  #seasonPlannerModal .season-focus-layout,
  #seasonPlannerModal .season-calendar-view-month {
    gap: var(--space-lg);
  }

  #seasonPlannerModal .season-health-summary-list {
    gap: var(--space-md);
  }
}

@media (max-width: 700px) {
  #seasonPlannerModal .season-planner-card {
    padding: var(--space-md);
  }

  #seasonPlannerModal .season-next-card,
  #seasonPlannerModal .season-health-card,
  #seasonPlannerModal .season-focus-card,
  #seasonPlannerModal .season-training-card,
  #seasonPlannerModal .season-calendar-section,
  #seasonPlannerModal .season-recommendation-section {
    padding: var(--space-md);
  }

  #seasonPlannerModal .season-overview-hero,
  #seasonPlannerModal .season-cockpit-grid,
  #seasonPlannerModal .season-calendar-view,
  #seasonPlannerModal .season-calendar-events {
    gap: 14px;
  }

  #seasonPlannerModal .season-calendar-month,
  #seasonPlannerModal .season-calendar-race-card,
  #seasonPlannerModal .season-focus-layout > div,
  #seasonPlannerModal .season-priority-planner,
  #seasonPlannerModal .season-training-opportunity {
    padding: 14px;
  }
}

/* Season Planner detail polish: training block, warnings and race load visual */
#seasonPlannerModal .season-training-card {
  background:
    radial-gradient(circle at 18% 10%, rgba(34, 197, 94, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05)) !important;
}

#seasonPlannerModal #seasonTrainingBlock {
  display: grid;
  gap: var(--space-md);
}

#seasonPlannerModal #seasonTrainingBlock .season-decision-value {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: var(--space-lg);
  border: 1px solid rgba(134, 239, 172, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(15, 23, 42, 0.18));
}

#seasonPlannerModal #seasonTrainingBlock .season-decision-value::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(134, 239, 172, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.78) 0 46%, transparent 47%),
    conic-gradient(from 210deg, rgba(34, 197, 94, 0.75), rgba(56, 189, 248, 0.35), rgba(34, 197, 94, 0.12));
  opacity: 0.72;
  pointer-events: none;
}

#seasonPlannerModal #seasonTrainingBlock .season-decision-value strong {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

#seasonPlannerModal #seasonTrainingBlock .season-decision-value em {
  position: relative;
  z-index: 1;
  margin-top: var(--space-sm);
  border-color: rgba(134, 239, 172, 0.35);
  background: rgba(2, 6, 23, 0.32);
  color: #bbf7d0;
  font-size: 11px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

#seasonPlannerModal #seasonTrainingBlock > p {
  margin: 0;
  padding: var(--space-md);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.3);
  color: #f8fafc;
  font-size: 14px;
  font-weight: 850;
  line-height: var(--line-height-relaxed);
}

#seasonPlannerModal #seasonTrainingBlock > p span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin: 0 var(--space-xs);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  font-weight: 950;
}

#seasonPlannerModal #seasonTrainingBlock > span {
  display: block;
  margin: 0;
  padding: 0 var(--space-xs);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 780;
  line-height: var(--line-height-relaxed);
}

#seasonPlannerModal .season-health-card #seasonOverviewWarnings {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

#seasonPlannerModal .season-health-card #seasonOverviewWarnings:empty {
  display: none;
}

#seasonPlannerModal .season-health-card .season-warning-item {
  width: 100%;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-color: rgba(245, 158, 11, 0.34) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(2, 6, 23, 0.22)) !important;
}

#seasonPlannerModal .season-health-card .season-warning-item.high {
  border-color: rgba(248, 113, 113, 0.38) !important;
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(2, 6, 23, 0.24)) !important;
}

#seasonPlannerModal .season-health-summary-list > div:first-child {
  position: relative;
  overflow: hidden;
  padding-right: min(96px, 28%);
  border-color: rgba(34, 197, 94, 0.36);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(2, 6, 23, 0.34));
}

#seasonPlannerModal .season-health-summary-list > div:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-md);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(15, 23, 42, 0.96) 0 46%, transparent 47%),
    conic-gradient(#22c55e 0 58%, #38bdf8 58% 76%, rgba(255, 255, 255, 0.12) 76% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 24px rgba(34, 197, 94, 0.18);
  transform: translateY(-50%);
}

#seasonPlannerModal .season-health-summary-list > div:first-child::before {
  content: "";
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #22c55e 0 52%, #38bdf8 52% 72%, rgba(255, 255, 255, 0.14) 72%);
}

#seasonPlannerModal .season-health-summary-list > div:first-child em {
  padding-bottom: var(--space-sm);
}

@media (max-width: 700px) {
  #seasonPlannerModal .season-health-summary-list > div:first-child {
    padding-right: var(--space-md);
    padding-bottom: 44px;
  }

  #seasonPlannerModal .season-health-summary-list > div:first-child::after {
    top: auto;
    right: var(--space-md);
    bottom: var(--space-md);
    width: 40px;
    height: 40px;
    transform: none;
  }

  #seasonPlannerModal #seasonTrainingBlock .season-decision-value {
    min-height: 116px;
  }
}

@keyframes skeletonSweep {
  to {
    transform: translateX(100%);
  }
}

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

  .event-list-loading::after {
    display: none;
  }
}

/* Final admin editor and workflow controls */
#adminModal .pending-card-editor {
  padding: 14px;
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.46);
}

#adminModal .pending-card-editor[hidden] {
  display: none;
}

#adminModal .pending-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

#adminModal .pending-editor-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

#adminModal .pending-editor-grid input,
#adminModal .pending-editor-grid select,
#adminModal .pending-editor-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}

#adminModal .pending-editor-wide {
  grid-column: 1 / -1;
}

#adminModal .pending-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 12px;
}

#adminModal .save-pending-edit-btn {
  border-color: rgba(134, 239, 172, 0.46) !important;
  background: rgba(34, 197, 94, 0.17) !important;
  color: #dcfce7 !important;
}

#adminModal .edit-pending-event-btn {
  border-color: rgba(96, 165, 250, 0.36) !important;
  color: #dbeafe !important;
}

#adminModal .pending-card.is-editing {
  border-color: rgba(134, 239, 172, 0.46) !important;
}

/* Admin quality operations */
#adminModal .admin-quality-progress {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.72);
  display: grid;
  gap: 12px;
}

#adminModal .admin-quality-progress span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}

#adminModal .admin-quality-progress strong {
  color: #ffffff;
  font-size: 14px;
}

#adminModal .admin-quality-progress em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

#adminModal .admin-quality-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

#adminModal .admin-quality-progress-track span {
  display: block;
  width: var(--quality-goal-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.36);
  transition: width var(--transition-med, 220ms) var(--ease-smooth, ease);
}

#adminModal .admin-quality-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}

#adminModal .admin-quality-breakdown section {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.68);
}

#adminModal .admin-quality-breakdown h4 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 14px;
}

#adminModal .admin-quality-breakdown-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

#adminModal .admin-quality-breakdown-row:last-child {
  border-bottom: 0;
}

#adminModal .admin-quality-breakdown-row span {
  color: #e5e7eb !important;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminModal .admin-quality-breakdown-row strong {
  color: #86efac !important;
  font-size: 12px;
}

#adminModal .admin-quality-breakdown-row i {
  grid-column: 1 / -1;
  display: block;
  width: var(--quality-width, 0%);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  opacity: 0.9;
}

#adminModal .admin-quality-priority-item.is-low-risk .admin-quality-select span {
  background: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
}

#adminModal .admin-quality-priority-item.is-medium-risk .admin-quality-select span {
  background: rgba(245, 158, 11, 0.2);
  color: #fde68a;
}

#adminModal .admin-quality-priority-item.is-high-risk .admin-quality-select span {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}

#adminModal .admin-quality-priority-item > .admin-quality-select {
  display: grid;
  gap: 8px;
  justify-items: center;
}

#adminModal .admin-quality-select input {
  width: 18px;
  height: 18px;
  accent-color: #22c55e;
}

#adminModal .admin-quality-select span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

#adminModal .admin-quality-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(134, 239, 172, 0.22);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.72);
}

#adminModal .admin-quality-bulkbar span {
  color: #d1fae5;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#adminModal .admin-quality-bulkbar select {
  min-width: 210px;
}

#adminModal .admin-quality-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

#adminModal .admin-quality-review-actions a,
#adminModal .admin-quality-review-actions button,
#adminModal .admin-quality-review-actions span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

#adminModal .admin-quality-review-actions span {
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

#adminModal .admin-quality-review-actions a:hover,
#adminModal .admin-quality-review-actions button:hover {
  border-color: rgba(134, 239, 172, 0.52);
  background: rgba(34, 197, 94, 0.16);
  color: #ffffff;
}

#adminModal .admin-quality-date-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.44);
}

#adminModal .admin-quality-date-form[hidden] {
  display: none;
}

#adminModal .admin-quality-date-form label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 850;
}

#adminModal .admin-quality-note-field,
#adminModal .admin-quality-date-form > div {
  grid-column: 1 / -1;
}

#adminModal .admin-quality-date-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#adminModal .admin-quality-date-form input,
#adminModal .admin-quality-date-form select,
#adminModal .admin-quality-date-form textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  font-weight: 800;
}

#adminModal .pending-admin-notes {
  margin: 10px 13px 13px;
  padding: 10px;
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
}

#adminModal .pending-admin-notes strong,
#adminModal .pending-admin-notes span,
#adminModal .pending-admin-notes p {
  display: block;
}

#adminModal .pending-admin-notes strong {
  color: #ffffff;
  font-size: 12px;
}

#adminModal .pending-admin-notes span {
  margin-top: 5px;
  color: #86efac !important;
  font-size: 11px;
  font-weight: 900;
}

#adminModal .pending-admin-notes p {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
}

#adminModal .admin-quality-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

#adminModal .admin-quality-reasons em {
  padding: 5px 8px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  color: #d1fae5;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

#adminModal .admin-quality-item small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 750;
}

#adminModal .admin-duplicate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

#adminModal .admin-duplicate-actions button {
  min-height: 32px !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  background: rgba(15, 23, 42, 0.8) !important;
}

#adminModal .admin-staging-panel p {
  margin: -2px 0 14px;
  color: var(--text-muted);
  font-weight: 750;
  line-height: 1.55;
}

#adminModal .admin-staging-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

#adminModal .admin-staging-steps span {
  padding: 11px 12px;
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.08);
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 760px) {
  #adminModal .admin-quality-breakdown {
    grid-template-columns: 1fr;
  }

  #adminModal .admin-quality-bulkbar,
  #adminModal .admin-quality-progress span {
    align-items: flex-start;
    flex-direction: column;
  }

  #adminModal .admin-quality-bulkbar select,
  #adminModal .admin-quality-bulkbar button {
    width: 100%;
  }

  #adminModal .admin-quality-date-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  #adminModal .pending-editor-grid {
    grid-template-columns: 1fr;
  }

  #adminModal .pending-editor-wide {
    grid-column: auto;
  }

  #adminModal .pending-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #adminModal .pending-item-actions .edit-pending-event-btn {
    grid-column: 1 / -1;
  }
}

/* Admin analytics workspace */
#adminModal .admin-analytics-workspace {
  display: grid;
  gap: 22px;
}

#adminModal .admin-analytics-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

#adminModal .admin-analytics-header h3 {
  margin: 3px 0 6px;
}

#adminModal .admin-analytics-header p,
#adminModal .analytics-section-heading p,
#adminModal .analytics-panel-heading p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

#adminModal .admin-analytics-controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

#adminModal .admin-analytics-controls label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

#adminModal .admin-analytics-controls select {
  min-width: 150px;
  min-height: 42px;
}

#adminModal .admin-analytics-controls button {
  min-height: 42px;
}

#adminModal .analytics-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 -10px;
  padding-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.13);
}

#adminModal .analytics-section-heading h4,
#adminModal .analytics-panel-heading h4 {
  margin: 14px 0 3px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

#adminModal .analytics-primary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#adminModal .analytics-action-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#adminModal .analytics-funnel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#adminModal .analytics-card {
  position: relative;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
}

#adminModal .analytics-card-primary {
  min-height: 132px;
  border-color: rgba(134, 239, 172, 0.24) !important;
}

#adminModal .analytics-card-primary::after {
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 78px;
  height: 78px;
  border: 16px solid rgba(34, 197, 94, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#adminModal .analytics-card strong {
  display: block;
  margin: 10px 0 7px;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
}

#adminModal .analytics-ratio-card {
  min-height: 126px;
  background:
    linear-gradient(
      145deg,
      rgba(34, 197, 94, 0.14),
      rgba(255, 255, 255, 0.045)
    ) !important;
}

#adminModal .analytics-detail-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

#adminModal .analytics-detail-panel {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.04)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

#adminModal .analytics-panel-heading {
  margin-bottom: 14px;
}

#adminModal .analytics-panel-heading h4 {
  margin-top: 0;
}

#adminModal #analyticsActivityBreakdown,
#adminModal #analyticsTopEvents,
#adminModal #analyticsTopPlannedEvents {
  display: grid;
  gap: 11px;
}

#adminModal .analytics-activity-row {
  display: grid;
  gap: 6px;
}

#adminModal .analytics-activity-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#adminModal .analytics-activity-row span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

#adminModal .analytics-activity-row strong {
  color: #ffffff;
  font-size: 12px;
}

#adminModal .analytics-activity-track,
#adminModal .analytics-ranking-track {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.13);
}

#adminModal .analytics-activity-fill,
#adminModal .analytics-ranking-track > span {
  display: block;
  width: var(--analytics-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #86efac);
  transition: width var(--transition-med) var(--ease-smooth);
}

#adminModal .analytics-activity-event_opened {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}

#adminModal .analytics-activity-favorite_added {
  background: linear-gradient(90deg, #dc2626, #fb7185);
}

#adminModal .analytics-activity-season_distance_selected {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}

#adminModal .analytics-activity-calendar_exported {
  background: linear-gradient(90deg, #7c3aed, #c084fc);
}

#adminModal .analytics-activity-event_submitted {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

#adminModal .analytics-ranking-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 13px;
  background: rgba(2, 6, 23, 0.24);
}

#adminModal .analytics-ranking-position {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(34, 197, 94, 0.13);
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 950;
}

#adminModal .analytics-ranking-content {
  display: grid;
  min-width: 0;
  gap: 7px;
}

#adminModal .analytics-ranking-content > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

#adminModal .analytics-ranking-content strong {
  min-width: 0;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#adminModal .analytics-ranking-content span {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 850;
}

@media (max-width: 1100px) {
  #adminModal .analytics-primary-grid,
  #adminModal .analytics-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #adminModal .analytics-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #adminModal .analytics-activity-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  #adminModal .admin-analytics-header,
  #adminModal .admin-analytics-controls {
    align-items: stretch;
    flex-direction: column;
  }

  #adminModal .admin-analytics-controls select,
  #adminModal .admin-analytics-controls button {
    width: 100%;
  }

  #adminModal .analytics-primary-grid,
  #adminModal .analytics-action-grid,
  #adminModal .analytics-funnel-grid,
  #adminModal .analytics-detail-grid {
    grid-template-columns: 1fr;
  }

  #adminModal .analytics-activity-panel {
    grid-column: auto;
  }
}

/* Admin staging and batch approval workspace */
#adminModal .admin-review-bulkbar,
#adminModal .admin-local-import-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid rgba(91, 214, 138, 0.2);
  border-radius: var(--radius-md);
  background: rgba(9, 27, 29, 0.76);
}

#adminModal .admin-review-bulkbar span {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-right: auto;
}

#adminModal .admin-review-bulkbar button,
#adminModal .admin-local-import-controls button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(91, 214, 138, 0.32);
  background: rgba(91, 214, 138, 0.11);
  color: var(--text-main);
  font-weight: 850;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

#adminModal .admin-review-bulkbar button:hover,
#adminModal .admin-local-import-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(91, 214, 138, 0.72);
  background: rgba(91, 214, 138, 0.18);
}

#adminModal .admin-local-import-controls label {
  display: grid;
  gap: 6px;
  min-width: min(100%, 320px);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#adminModal .admin-local-import-controls input[type="file"] {
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  padding: 9px;
}

#adminModal .admin-staging-preview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

#adminModal .admin-staging-preview-summary div,
#adminModal .admin-staging-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.055);
  padding: 12px;
}

#adminModal .admin-staging-preview-summary span,
#adminModal .admin-staging-preview-card span,
#adminModal .admin-staging-preview-card p,
#adminModal .admin-staging-preview-card em {
  color: var(--text-muted);
}

#adminModal .admin-staging-preview-summary strong {
  display: block;
  color: var(--text-main);
  font-size: 1.35rem;
  margin-top: 4px;
}

#adminModal .admin-staging-preview-list {
  display: grid;
  gap: 10px;
}

#adminModal .admin-staging-preview-card {
  display: grid;
  gap: 8px;
  border-left: 4px solid rgba(245, 158, 11, 0.75);
}

#adminModal .admin-staging-preview-card.is-ready {
  border-left-color: rgba(91, 214, 138, 0.85);
}

#adminModal .admin-staging-preview-card strong {
  color: var(--text-main);
}

#adminModal .admin-staging-preview-card p,
#adminModal .admin-staging-preview-card em {
  margin: 0;
  font-style: normal;
  font-size: 0.84rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  #adminModal .admin-staging-preview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #adminModal .admin-review-bulkbar button,
  #adminModal .admin-local-import-controls button {
    width: 100%;
  }
}

/* Final landing theme overrides */
body:not(.landing-theme-light) .landing-appearance-control {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(2, 6, 23, 0.38);
}

body:not(.landing-theme-light) .landing-appearance-control > span {
  color: rgba(226, 232, 240, 0.72);
}

body:not(.landing-theme-light) .landing-appearance-control button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(226, 232, 240, 0.86);
}

body:not(.landing-theme-light) .landing-appearance-control button.active {
  border-color: rgba(134, 239, 172, 0.72);
  background: #22c55e;
  color: #052e16;
}

@media (prefers-color-scheme: light) {
  body:not(.landing-theme-dark) .landing-appearance-control {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.72);
  }

  body:not(.landing-theme-dark) .landing-appearance-control > span {
    color: #64748b;
  }

  body:not(.landing-theme-dark) .landing-appearance-control button {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.78);
    color: #475569;
  }

  body:not(.landing-theme-dark) .landing-appearance-control button.active {
    border-color: rgba(34, 197, 94, 0.68);
    background: #22c55e;
    color: #052e16;
  }
}

/* Premium beta polish: modals and Season Planner */
#welcomeModal,
#feedbackModal,
#appMessageModal {
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.16), transparent 34%),
    rgba(2, 6, 23, 0.82);
}

.welcome-card,
.feedback-card,
.app-message-card {
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  border: 1px solid rgba(134, 239, 172, 0.24) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(6, 18, 26, 0.98)) !important;
  color: var(--text-main) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.welcome-card h2,
.feedback-card h2,
.app-message-card h2 {
  color: #ffffff !important;
  letter-spacing: 0;
  line-height: 1.08;
}

.welcome-card ol,
.feedback-card p,
.feedback-card label,
.app-message-card p {
  color: rgba(226, 232, 240, 0.78) !important;
  line-height: 1.6;
}

#closeWelcomeModal,
#closeFeedbackModal,
#closeAuthModal,
#closeProfileModal,
#appMessageOk,
#startWelcomeBtn,
#submitFeedbackBtn {
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

#closeWelcomeModal:hover,
#closeFeedbackModal:hover,
#closeAuthModal:hover,
#closeProfileModal:hover {
  border-color: rgba(134, 239, 172, 0.48) !important;
  background: rgba(34, 197, 94, 0.14) !important;
  transform: translateY(-1px);
}

.feedback-card input,
.feedback-card textarea,
.feedback-card select {
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: #ffffff !important;
}

.feedback-card input::placeholder,
.feedback-card textarea::placeholder {
  color: rgba(226, 232, 240, 0.48);
}

.season-planner-card {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 20, 28, 0.98)) !important;
  border: 1px solid rgba(134, 239, 172, 0.18);
  color: var(--text-main);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.season-planner-header h2,
.season-next-card strong,
.season-kpi-grid strong,
.season-event-main strong,
.season-summary-grid strong,
.season-summary-empty strong,
.season-sport-mix-row strong,
.season-overview-mini-event strong,
.season-empty strong {
  color: #ffffff !important;
}

.season-planner-header p,
.season-event-main em,
.season-event-place,
.season-empty span,
.season-summary-grid span,
.season-summary-empty span,
.season-sport-mix-row span,
#seasonOverviewARaces p,
#seasonOverviewWarnings p,
#seasonOverviewSportMix p {
  color: rgba(226, 232, 240, 0.68) !important;
}

.season-tabs {
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.34);
}

.season-tab {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(226, 232, 240, 0.72) !important;
}

.season-tab.active,
.season-tab:hover {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #ffffff !important;
}

.season-overview-hero {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.82fr);
  gap: 18px;
}

.season-next-card,
.season-kpi-grid div,
.season-health-card,
.season-focus-card,
.season-training-card,
.season-calendar-section,
.season-recommendation-section,
.season-overview-card,
.season-summary-grid div,
.season-summary-empty,
.season-sport-mix-row,
.season-overview-mini-event,
.season-priority-row,
.season-event-row,
.season-calendar-race-card,
.season-export-card,
.season-empty,
.season-insight-card {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.52)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.season-next-card {
  padding: 22px 24px;
  border-color: rgba(134, 239, 172, 0.32) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 197, 94, 0.22), transparent 36%),
    linear-gradient(135deg, rgba(20, 83, 45, 0.68), rgba(15, 23, 42, 0.74)) !important;
}

.season-next-card strong {
  font-size: clamp(28px, 4vw, 44px);
}

.season-next-card em,
.season-next-meta strong {
  color: rgba(226, 232, 240, 0.84) !important;
}

.season-health-card,
.season-focus-card,
.season-training-card,
.season-calendar-section,
.season-recommendation-section {
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
}

.season-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
  gap: 18px;
  margin: 18px 0;
}

.season-focus-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
  gap: 16px;
}

#seasonPriorityList {
  max-height: min(460px, 48vh);
  overflow-y: auto;
  padding-right: 4px;
}

.season-priority-row {
  grid-template-columns: 86px minmax(0, 1fr) 94px minmax(150px, 0.62fr) minmax(140px, 0.58fr);
}

.season-priority-header-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 94px minmax(150px, 0.62fr) minmax(140px, 0.58fr);
  gap: 12px;
  padding: 0 12px 2px;
  color: rgba(134, 239, 172, 0.86);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-distance-control select,
.season-priority-control select {
  border-color: rgba(148, 163, 184, 0.26) !important;
  background: rgba(2, 6, 23, 0.58) !important;
  color: #ffffff !important;
}

.season-health-overview {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
}

.season-load-compact {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.36);
}

.season-load-meter {
  --load-percent: 0%;
  --load-color: #22c55e;
  display: grid;
  gap: 9px;
}

.season-load-meter > span {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.season-load-meter > span::before {
  content: "";
  display: block;
  width: var(--load-percent);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, var(--load-color));
  box-shadow: 0 0 18px color-mix(in srgb, var(--load-color) 46%, transparent);
}

.season-load-meter strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
}

.season-load-meter em,
.season-load-compact p {
  margin: 0;
  color: rgba(226, 232, 240, 0.68);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.season-health-summary-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.season-health-summary-list div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.season-health-summary-list span,
.season-load-compact > span {
  display: block;
  color: rgba(134, 239, 172, 0.84);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-health-summary-list strong {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
}

.season-health-summary-list em {
  display: block;
  margin-top: 4px;
  color: rgba(226, 232, 240, 0.58);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.season-health-risk {
  border-color: rgba(248, 113, 113, 0.34) !important;
  background: rgba(127, 29, 29, 0.2) !important;
}

.season-calendar-race-card,
.season-priority-row,
.season-overview-mini-event,
.season-recommendation-card {
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.season-calendar-race-card:hover,
.season-priority-row:hover,
.season-overview-mini-event:hover,
.season-recommendation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(134, 239, 172, 0.46) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.season-month-title {
  background: rgba(8, 20, 28, 0.95) !important;
  color: #86efac !important;
}

.season-training-card .season-decision-value strong,
.season-training-card .season-decision-empty strong {
  color: #ffffff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 950;
  line-height: 1;
}

.season-training-card .season-decision-value em,
.season-training-card .season-decision-empty em,
.season-training-card p,
.season-training-card span {
  color: rgba(226, 232, 240, 0.72);
}

@media (max-width: 980px) {
  .season-overview-hero,
  .season-cockpit-grid,
  .season-focus-layout,
  .season-health-overview {
    grid-template-columns: 1fr;
  }

  .season-health-summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-priority-header-row {
    display: none;
  }

  .season-priority-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .season-planner-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 18px;
    border-radius: 20px;
  }

  .season-health-summary-list {
    grid-template-columns: 1fr;
  }

  .welcome-card,
  .feedback-card,
  .app-message-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }
}

/* Season Planner calendar-grid refinement */
#seasonPlannerModal .season-calendar-view-month {
  grid-template-columns: 1fr;
}

#seasonPlannerModal .season-calendar-month-grid {
  padding: 14px;
  border-color: rgba(134, 239, 172, 0.22);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(8, 18, 26, 0.88));
}

#seasonPlannerModal .season-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 7px;
}

#seasonPlannerModal .season-calendar-weekdays span {
  color: rgba(187, 247, 208, 0.78);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

#seasonPlannerModal .season-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#seasonPlannerModal .season-calendar-month-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.54));
}

#seasonPlannerModal .season-calendar-month-toolbar div {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: center;
}

#seasonPlannerModal .season-calendar-month-toolbar span {
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#seasonPlannerModal .season-calendar-month-toolbar em {
  color: rgba(226, 232, 240, 0.62);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

#seasonPlannerModal .season-calendar-month-toolbar button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid rgba(134, 239, 172, 0.28) !important;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #ffffff !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

#seasonPlannerModal .season-calendar-month-toolbar button:hover:not(:disabled),
#seasonPlannerModal .season-calendar-month-toolbar button:focus-visible:not(:disabled) {
  border-color: rgba(134, 239, 172, 0.56) !important;
  background: rgba(34, 197, 94, 0.2) !important;
  outline: none;
  transform: translateY(-1px);
}

#seasonPlannerModal .season-calendar-month-toolbar button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

#seasonPlannerModal .season-calendar-cell {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  overflow: hidden;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

#seasonPlannerModal .season-calendar-cell.has-race {
  border-color: rgba(34, 197, 94, 0.34);
  background:
    linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(255, 255, 255, 0.045));
}

#seasonPlannerModal .season-calendar-cell.is-outside-month {
  opacity: 0.22;
  background: rgba(255, 255, 255, 0.025);
}

#seasonPlannerModal .season-calendar-cell-date {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #e5e7eb;
  font-size: 11px;
  font-weight: 950;
}

#seasonPlannerModal .season-calendar-cell.has-race .season-calendar-cell-date {
  background: rgba(34, 197, 94, 0.2);
  color: #ffffff;
}

#seasonPlannerModal .season-calendar-cell-events {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#seasonPlannerModal .season-calendar-event-pill {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas:
    "priority name";
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border: 1px solid rgba(134, 239, 172, 0.3);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

#seasonPlannerModal .season-calendar-event-pill:hover,
#seasonPlannerModal .season-calendar-event-pill:focus-visible {
  border-color: rgba(134, 239, 172, 0.58);
  background: rgba(34, 197, 94, 0.22);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
  outline: none;
  transform: translateY(-1px);
}

#seasonPlannerModal .season-calendar-event-pill span {
  grid-area: priority;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #bbf7d0;
  font-size: 10px;
  font-weight: 950;
}

#seasonPlannerModal .season-calendar-event-pill strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#seasonPlannerModal .season-calendar-event-pill em {
  display: none;
}

#seasonPlannerModal .season-calendar-more {
  min-width: 0;
  overflow: hidden;
  color: rgba(187, 247, 208, 0.78);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#seasonPlannerModal .season-calendar-event-pill.season-event-a-race {
  border-color: rgba(74, 222, 128, 0.58);
  background: rgba(34, 197, 94, 0.23);
}

#seasonPlannerModal .season-calendar-event-pill.season-event-close-warning {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(249, 115, 22, 0.17);
}

#seasonPlannerModal #seasonOverviewSportMix .season-metric-visuals,
#seasonPlannerModal #seasonRecommendedEvents .season-recommendation-grid {
  animation: seasonPanelIn 0.22s ease-out both;
}

#seasonPlannerModal #seasonTrainingBlock .season-decision-empty,
#seasonPlannerModal #seasonTrainingOpportunity .season-decision-empty,
#seasonPlannerModal #seasonRecommendedEvents .season-empty {
  min-height: 110px;
  display: grid;
  align-content: center;
  gap: 6px;
  border-style: dashed;
}

@media (max-width: 900px) {
  #seasonPlannerModal .season-calendar-grid,
  #seasonPlannerModal .season-calendar-weekdays {
    gap: 6px;
  }

  #seasonPlannerModal .season-calendar-cell {
    min-height: 72px;
    padding: 6px;
    border-radius: 12px;
  }

  #seasonPlannerModal .season-calendar-event-pill {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "load";
    padding: 5px;
  }

  #seasonPlannerModal .season-calendar-event-pill span {
    display: none;
  }
}

@media (max-width: 640px) {
  #seasonPlannerModal .season-calendar-month-toolbar {
    grid-template-columns: 1fr;
  }

  #seasonPlannerModal .season-calendar-month-toolbar button {
    width: 100%;
  }

  #seasonPlannerModal .season-calendar-weekdays span {
    font-size: 9px;
  }

  #seasonPlannerModal .season-calendar-cell {
    min-height: 64px;
    gap: 4px;
  }

  #seasonPlannerModal .season-calendar-cell-date {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  #seasonPlannerModal .season-calendar-event-pill strong {
    font-size: 10px;
  }

  #seasonPlannerModal .season-calendar-event-pill {
    min-height: 26px;
  }
}

/* Launch-ready product polish layer */
.landing-proof-strip strong,
.landing-visual-card strong {
  color: #ffffff;
}

.landing-return-section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 44px;
  padding: 28px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 197, 94, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(8, 18, 26, 0.74));
  box-shadow: var(--shadow-card);
}

.landing-return-section > span {
  color: #86efac;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-return-section h3 {
  max-width: 720px;
  margin: 10px 0 20px;
  color: #ffffff;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.05;
}

.landing-return-section > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.landing-return-section article {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.landing-return-section article strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
}

.landing-return-section article p {
  color: rgba(226, 232, 240, 0.72);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

#loginBtn,
#logoutBtn {
  border-color: rgba(134, 239, 172, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(52, 211, 153, 0.94), rgba(22, 163, 74, 0.94)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(34, 197, 94, 0.18);
}

#logoutBtn {
  background:
    linear-gradient(135deg, rgba(20, 83, 45, 0.9), rgba(15, 23, 42, 0.9)) !important;
}

#loginBtn:hover,
#logoutBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(34, 197, 94, 0.24);
}

.season-countdown-section {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.52));
}

.season-countdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.season-countdown-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(134, 239, 172, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.065);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.season-countdown-card:hover,
.season-countdown-card:focus-visible {
  border-color: rgba(134, 239, 172, 0.52);
  outline: none;
  transform: translateY(-2px);
}

.season-countdown-card span {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.season-countdown-card strong {
  color: #ffffff;
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.season-countdown-card em,
.season-countdown-card small {
  min-width: 0;
  overflow: hidden;
  color: rgba(226, 232, 240, 0.76);
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.season-note-control {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.28);
}

.season-note-control summary {
  padding: 10px 12px;
  color: rgba(187, 247, 208, 0.84);
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
}

.season-note-control textarea {
  width: calc(100% - 20px);
  min-height: 68px;
  margin: 0 10px 10px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  padding: 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.season-training-block-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.season-training-block-item {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-left: 3px solid var(--status-info);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.season-training-block-good {
  border-left-color: var(--status-open);
}

.season-training-block-short {
  border-left-color: var(--status-warning);
}

.season-training-block-critical {
  border-left-color: var(--status-danger);
}

.season-training-block-long {
  border-left-color: var(--status-info);
}

.season-training-block-item strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.season-training-block-item span {
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.season-training-block-item em,
.season-training-block-item p {
  color: rgba(226, 232, 240, 0.68);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.season-recommendation-card small {
  display: block;
  color: rgba(187, 247, 208, 0.76);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.feedback-prompt-list {
  padding: 14px;
  border: 1px solid rgba(134, 239, 172, 0.2);
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.08);
}

.feedback-prompt-list span {
  color: #86efac;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feedback-prompt-list ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0 18px;
  color: rgba(226, 232, 240, 0.76);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .landing-return-section > div,
  .season-countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .landing-return-section {
    width: min(100% - 22px, 1180px);
    padding: 20px;
  }

  .landing-return-section > div,
  .season-countdown-grid {
    grid-template-columns: 1fr;
  }
}

/* Final theme consistency: keep landing sections readable in every appearance mode. */
body.landing-theme-dark .landing-page {
  color-scheme: dark;
  background:
    radial-gradient(circle at 14% 8%, rgba(34, 197, 94, 0.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07140f 44%, #0f172a 100%) !important;
}

body.landing-theme-dark .landing-benefits article,
body.landing-theme-dark .landing-feature,
body.landing-theme-dark .landing-quality-section,
body.landing-theme-dark .landing-add-event-section,
body.landing-theme-dark .landing-return-section,
body.landing-theme-dark .landing-feature-panel,
body.landing-theme-dark .landing-metric-card,
body.landing-theme-dark .landing-info-card,
body.landing-theme-dark .landing-footer {
  border-color: rgba(134, 239, 172, 0.18) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.72)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28) !important;
}

body.landing-theme-dark .landing-benefits h3,
body.landing-theme-dark .landing-feature h3,
body.landing-theme-dark .landing-quality-section h3,
body.landing-theme-dark .landing-add-event-section h3,
body.landing-theme-dark .landing-footer strong,
body.landing-theme-dark .landing-panel-header strong,
body.landing-theme-dark .landing-info-card strong,
body.landing-theme-dark .landing-metric-card strong,
body.landing-theme-dark .landing-return-section h3,
body.landing-theme-dark .landing-return-section article strong {
  color: #f8fafc !important;
}

body.landing-theme-dark .landing-benefits p,
body.landing-theme-dark .landing-feature p,
body.landing-theme-dark .landing-add-event-section p,
body.landing-theme-dark .landing-footer span,
body.landing-theme-dark .landing-footer a,
body.landing-theme-dark .landing-panel-header span,
body.landing-theme-dark .landing-info-card p,
body.landing-theme-dark .landing-metric-card span,
body.landing-theme-dark .landing-return-section article p {
  color: rgba(226, 232, 240, 0.74) !important;
}

body.landing-theme-dark .landing-benefits article span,
body.landing-theme-dark .landing-quality-section div span,
body.landing-theme-dark .landing-season-section li {
  border-color: rgba(134, 239, 172, 0.24) !important;
  background: rgba(34, 197, 94, 0.1) !important;
  color: #bbf7d0 !important;
}

body.landing-theme-dark .landing-search-box,
body.landing-theme-dark .landing-popular-searches button,
body.landing-theme-dark .landing-proof-strip span,
body.landing-theme-dark .landing-visual-card,
body.landing-theme-dark .landing-map-panel {
  border-color: rgba(134, 239, 172, 0.2) !important;
  background: rgba(2, 6, 23, 0.62) !important;
  color: #f8fafc !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26) !important;
}

body.landing-theme-dark .landing-search-box input {
  color: #f8fafc !important;
}

body.landing-theme-dark .landing-search-box input::placeholder {
  color: rgba(203, 213, 225, 0.72) !important;
}

body.landing-theme-light .landing-benefits article,
body.landing-theme-light .landing-feature,
body.landing-theme-light .landing-quality-section,
body.landing-theme-light .landing-add-event-section,
body.landing-theme-light .landing-return-section,
body.landing-theme-light .landing-feature-panel,
body.landing-theme-light .landing-metric-card,
body.landing-theme-light .landing-info-card,
body.landing-theme-light .landing-footer {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.1) !important;
}

body.landing-theme-light .landing-return-section h3,
body.landing-theme-light .landing-return-section article strong,
body.landing-theme-light .landing-feature h3,
body.landing-theme-light .landing-quality-section h3,
body.landing-theme-light .landing-add-event-section h3,
body.landing-theme-light .landing-benefits h3,
body.landing-theme-light .landing-footer strong {
  color: #0f172a !important;
}

body.landing-theme-light .landing-return-section article p,
body.landing-theme-light .landing-feature p,
body.landing-theme-light .landing-add-event-section p,
body.landing-theme-light .landing-benefits p,
body.landing-theme-light .landing-footer span,
body.landing-theme-light .landing-footer a {
  color: #475569 !important;
}

#logoutBtn {
  border-color: rgba(134, 239, 172, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(52, 211, 153, 0.98), rgba(22, 163, 74, 0.98)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(34, 197, 94, 0.24) !important;
}

#logoutBtn:hover {
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 1), rgba(21, 128, 61, 1)) !important;
}

/* Stable product theme layer: resolved by app.js, then applied consistently. */
body[data-landing-resolved-theme="dark"] .landing-page {
  color-scheme: dark;
  background:
    radial-gradient(circle at 14% 8%, rgba(34, 197, 94, 0.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07140f 44%, #0f172a 100%) !important;
}

body[data-landing-resolved-theme="dark"] .landing-benefits article,
body[data-landing-resolved-theme="dark"] .landing-feature,
body[data-landing-resolved-theme="dark"] .landing-quality-section,
body[data-landing-resolved-theme="dark"] .landing-add-event-section,
body[data-landing-resolved-theme="dark"] .landing-return-section,
body[data-landing-resolved-theme="dark"] .landing-feature-panel,
body[data-landing-resolved-theme="dark"] .landing-metric-card,
body[data-landing-resolved-theme="dark"] .landing-info-card,
body[data-landing-resolved-theme="dark"] .landing-footer,
body[data-landing-resolved-theme="dark"] .landing-search-box,
body[data-landing-resolved-theme="dark"] .landing-visual-card,
body[data-landing-resolved-theme="dark"] .landing-map-panel,
body[data-landing-resolved-theme="dark"] .landing-proof-strip span,
body[data-landing-resolved-theme="dark"] .landing-popular-searches button {
  border-color: rgba(134, 239, 172, 0.2) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(34, 197, 94, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.76)) !important;
  color: #f8fafc !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28) !important;
}

body[data-landing-resolved-theme="dark"] .landing-benefits h3,
body[data-landing-resolved-theme="dark"] .landing-feature h3,
body[data-landing-resolved-theme="dark"] .landing-quality-section h3,
body[data-landing-resolved-theme="dark"] .landing-add-event-section h3,
body[data-landing-resolved-theme="dark"] .landing-footer strong,
body[data-landing-resolved-theme="dark"] .landing-panel-header strong,
body[data-landing-resolved-theme="dark"] .landing-info-card strong,
body[data-landing-resolved-theme="dark"] .landing-metric-card strong,
body[data-landing-resolved-theme="dark"] .landing-return-section h3,
body[data-landing-resolved-theme="dark"] .landing-return-section article strong,
body[data-landing-resolved-theme="dark"] .landing-search-box input {
  color: #f8fafc !important;
}

body[data-landing-resolved-theme="dark"] .landing-benefits p,
body[data-landing-resolved-theme="dark"] .landing-feature p,
body[data-landing-resolved-theme="dark"] .landing-add-event-section p,
body[data-landing-resolved-theme="dark"] .landing-footer span,
body[data-landing-resolved-theme="dark"] .landing-footer a,
body[data-landing-resolved-theme="dark"] .landing-panel-header span,
body[data-landing-resolved-theme="dark"] .landing-info-card p,
body[data-landing-resolved-theme="dark"] .landing-metric-card span,
body[data-landing-resolved-theme="dark"] .landing-return-section article p,
body[data-landing-resolved-theme="dark"] .landing-search-box input::placeholder {
  color: rgba(226, 232, 240, 0.74) !important;
}

body[data-landing-resolved-theme="dark"] .landing-benefits article span,
body[data-landing-resolved-theme="dark"] .landing-quality-section div span,
body[data-landing-resolved-theme="dark"] .landing-season-section li {
  border-color: rgba(134, 239, 172, 0.26) !important;
  background: rgba(34, 197, 94, 0.11) !important;
  color: #bbf7d0 !important;
}

body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-countdown-card,
body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-panel-row {
  border-color: rgba(134, 239, 172, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.72)) !important;
  color: #f8fafc !important;
}

body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-countdown-card span,
body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-panel-row em {
  color: rgba(226, 232, 240, 0.7) !important;
}

body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-countdown-card strong,
body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-panel-row strong {
  color: #f8fafc !important;
}

body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-mini-chart {
  border: 1px solid rgba(134, 239, 172, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.7), rgba(2, 6, 23, 0.5));
  padding: 12px;
}

body[data-landing-resolved-theme="dark"] .landing-planner-panel .landing-mini-chart span {
  background: linear-gradient(180deg, #86efac, #16a34a) !important;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.16);
}

body[data-landing-resolved-theme="light"] .landing-benefits article,
body[data-landing-resolved-theme="light"] .landing-feature,
body[data-landing-resolved-theme="light"] .landing-quality-section,
body[data-landing-resolved-theme="light"] .landing-add-event-section,
body[data-landing-resolved-theme="light"] .landing-return-section,
body[data-landing-resolved-theme="light"] .landing-feature-panel,
body[data-landing-resolved-theme="light"] .landing-metric-card,
body[data-landing-resolved-theme="light"] .landing-info-card,
body[data-landing-resolved-theme="light"] .landing-footer {
  border-color: rgba(15, 23, 42, 0.1) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.1) !important;
}

body[data-landing-resolved-theme="light"] .landing-return-section h3,
body[data-landing-resolved-theme="light"] .landing-return-section article strong,
body[data-landing-resolved-theme="light"] .landing-feature h3,
body[data-landing-resolved-theme="light"] .landing-quality-section h3,
body[data-landing-resolved-theme="light"] .landing-add-event-section h3,
body[data-landing-resolved-theme="light"] .landing-benefits h3,
body[data-landing-resolved-theme="light"] .landing-footer strong {
  color: #0f172a !important;
}

body[data-landing-resolved-theme="light"] .landing-return-section article p,
body[data-landing-resolved-theme="light"] .landing-feature p,
body[data-landing-resolved-theme="light"] .landing-add-event-section p,
body[data-landing-resolved-theme="light"] .landing-benefits p,
body[data-landing-resolved-theme="light"] .landing-footer span,
body[data-landing-resolved-theme="light"] .landing-footer a {
  color: #475569 !important;
}

#loginBtn,
#logoutBtn {
  border-color: rgba(134, 239, 172, 0.62) !important;
  background:
    linear-gradient(135deg, rgba(52, 211, 153, 0.98), rgba(22, 163, 74, 0.98)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(34, 197, 94, 0.24) !important;
}

#loginBtn:hover,
#logoutBtn:hover {
  background:
    linear-gradient(135deg, rgba(74, 222, 128, 1), rgba(21, 128, 61, 1)) !important;
  transform: translateY(-1px);
}

body #topbar #authArea #loginBtn {
  border: 1px solid rgba(134, 239, 172, 0.72) !important;
  background:
    linear-gradient(135deg, #34d399 0%, #22c55e 48%, #15803d 100%) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  box-shadow:
    0 12px 26px rgba(34, 197, 94, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body #topbar #authArea #loginBtn:hover,
body #topbar #authArea #loginBtn:focus-visible {
  border-color: rgba(187, 247, 208, 0.92) !important;
  background:
    linear-gradient(135deg, #4ade80 0%, #22c55e 48%, #166534 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(34, 197, 94, 0.34),
    0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

body #topbar #authArea #logoutBtn {
  border: 1px solid rgba(252, 165, 165, 0.62) !important;
  background:
    linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  box-shadow:
    0 12px 26px rgba(239, 68, 68, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body #topbar #authArea #logoutBtn:hover,
body #topbar #authArea #logoutBtn:focus-visible {
  border-color: rgba(254, 202, 202, 0.9) !important;
  background:
    linear-gradient(135deg, #f87171 0%, #ef4444 48%, #7f1d1d 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(239, 68, 68, 0.32),
    0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

body #topbar #authArea #registerBtn,
body #topbar #authArea #feedbackBtn {
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: rgba(226, 232, 240, 0.88) !important;
  box-shadow: none !important;
}

body #topbar #authArea #registerBtn:hover,
body #topbar #authArea #feedbackBtn:hover {
  border-color: rgba(134, 239, 172, 0.42) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #ffffff !important;
}

#seasonPlannerModal .season-overview-hero {
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

#seasonPlannerModal .season-next-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(220px, 0.8fr) !important;
  grid-template-areas:
    "label name meta"
    "count name meta" !important;
  align-items: center !important;
  gap: 12px 18px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}

#seasonPlannerModal .season-next-card > span {
  grid-area: label;
  margin: 0 !important;
}

#seasonPlannerModal .season-next-card #seasonCountdown {
  grid-area: count;
  margin: 0 !important;
  font-size: clamp(23px, 2.8vw, 36px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#seasonPlannerModal .season-next-card #seasonNextEventName {
  grid-area: name;
  margin: 0 !important;
  max-width: none !important;
  font-size: clamp(18px, 2.2vw, 28px) !important;
  line-height: 1.12 !important;
}

#seasonPlannerModal .season-next-meta {
  grid-area: meta;
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#seasonPlannerModal .season-next-meta > div {
  padding: 10px !important;
  border-radius: 13px !important;
}

#seasonPlannerModal .season-next-meta strong {
  font-size: 13px !important;
}

#seasonPlannerModal .season-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
  gap: 10px !important;
}

#seasonPlannerModal .season-kpi-grid > div {
  min-height: 86px !important;
  padding: 13px !important;
}

#seasonPlannerModal .season-kpi-grid strong {
  font-size: clamp(18px, 2.2vw, 26px) !important;
}

#seasonPlannerModal .season-countdown-section {
  margin: 14px 0 18px !important;
  padding: 16px !important;
}

#seasonPlannerModal .season-countdown-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
}

#seasonPlannerModal .season-countdown-card {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 6px !important;
  border-radius: 15px !important;
}

#seasonPlannerModal .season-countdown-card strong {
  font-size: 25px !important;
}

#seasonPlannerModal .season-countdown-card em,
#seasonPlannerModal .season-countdown-card small {
  font-size: 11px !important;
}

@media (max-width: 900px) {
  #seasonPlannerModal .season-overview-hero {
    grid-template-columns: 1fr !important;
  }

  #seasonPlannerModal .season-next-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "label"
      "count"
      "name"
      "meta" !important;
  }
}

/* Beta analytics dashboard v2 */
#adminModal .analytics-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

#adminModal .analytics-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

#adminModal .analytics-section-grid .analytics-detail-panel {
  min-width: 0;
}

#adminModal .analytics-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}

#adminModal .analytics-mini-grid > div {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

#adminModal .analytics-mini-grid span {
  display: block;
  color: rgba(226, 239, 233, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#adminModal .analytics-mini-grid strong {
  display: block;
  margin-top: 6px;
  color: #f7fff9;
  font-size: 1.2rem;
  font-weight: 900;
}

#adminModal .analytics-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#adminModal .analytics-detail-panel h5 {
  margin: 0 0 10px;
  color: rgba(244, 255, 249, 0.88);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#adminModal .analytics-table-list {
  display: grid;
  gap: 8px;
}

#adminModal .analytics-table-row,
#adminModal .analytics-feedback-row {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(7, 22, 24, 0.72);
}

#adminModal .analytics-table-row em {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(63, 214, 126, 0.9) var(--analytics-width, 0%),
    rgba(255, 255, 255, 0.08) var(--analytics-width, 0%)
  );
}

#adminModal .analytics-table-row span,
#adminModal .analytics-feedback-row span {
  min-width: 0;
  overflow: hidden;
  color: rgba(235, 246, 241, 0.82);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminModal .analytics-table-row strong {
  color: #7cffad;
  font-size: 0.9rem;
  font-weight: 900;
}

#adminModal .analytics-feedback-row {
  grid-template-columns: 1fr;
  align-items: start;
}

#adminModal .analytics-feedback-row strong {
  color: #f7fff9;
  font-size: 0.9rem;
  font-weight: 900;
}

.feedback-email-note {
  border: 1px solid rgba(67, 214, 127, 0.2);
  border-radius: 14px;
  background: rgba(67, 214, 127, 0.08);
  padding: 12px 14px;
}

.feedback-email-note a {
  color: #7cffad;
  font-weight: 900;
  text-decoration: none;
}

.feedback-email-note a:hover {
  text-decoration: underline;
}

@media (max-width: 920px) {
  #adminModal .analytics-section-grid,
  #adminModal .analytics-two-column {
    grid-template-columns: 1fr;
  }
}

/* Landing appearance control: compact icon segmented switch */
.landing-appearance-control {
  display: inline-flex !important;
  align-items: center;
  padding: 4px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 999px !important;
  background: rgba(239, 239, 232, 0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.landing-appearance-control > div {
  display: grid !important;
  grid-template-columns: repeat(3, 42px);
  gap: 2px;
  align-items: center;
}

.landing-appearance-control button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(42, 45, 40, 0.62) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 160ms ease,
    box-shadow 180ms ease !important;
}

.landing-appearance-control button:hover {
  color: rgba(20, 23, 20, 0.86) !important;
  transform: translateY(-1px);
}

.landing-appearance-control button:active {
  transform: scale(0.97);
}

.landing-appearance-control button.active {
  background: rgba(216, 218, 207, 0.95) !important;
  color: #20241f !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 5px 14px rgba(15, 23, 42, 0.08) !important;
}

.landing-appearance-control button:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.9);
  outline-offset: 3px;
}

.theme-icon {
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.theme-icon-device {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
}

.theme-icon-sun {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
}

.theme-icon-moon {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.99 13.37A8 8 0 1 1 10.63 3.01 6.5 6.5 0 0 0 20.99 13.37Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.99 13.37A8 8 0 1 1 10.63 3.01 6.5 6.5 0 0 0 20.99 13.37Z'/%3E%3C/svg%3E");
}

body[data-landing-resolved-theme="dark"] .landing-appearance-control {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(16, 28, 29, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 30px rgba(0, 0, 0, 0.26) !important;
}

body[data-landing-resolved-theme="dark"] .landing-appearance-control button {
  color: rgba(229, 239, 232, 0.62) !important;
}

body[data-landing-resolved-theme="dark"] .landing-appearance-control button:hover {
  color: rgba(247, 255, 249, 0.9) !important;
}

body[data-landing-resolved-theme="dark"] .landing-appearance-control button.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f7fff9 !important;
}

@media (max-width: 640px) {
  .landing-appearance-control > div {
    grid-template-columns: repeat(3, 38px);
  }

  .landing-appearance-control button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .theme-icon {
    width: 19px;
    height: 19px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Final compact appearance switch and stable pin logo icons */
.landing-footer .landing-appearance-control {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  justify-self: start !important;
  align-self: center !important;
}

.landing-footer .landing-appearance-control > div {
  width: auto !important;
  min-width: 0 !important;
  grid-template-columns: repeat(3, 40px) !important;
}

.landing-footer .landing-appearance-control button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

.landing-brand-mark,
.app-logo-mark {
  font-size: 0 !important;
}

.landing-brand-mark::before,
.app-logo-mark::before {
  content: "" !important;
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s7-5.35 7-12a7 7 0 1 0-14 0c0 6.65 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='10' r='2.7' fill='white'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s7-5.35 7-12a7 7 0 1 0-14 0c0 6.65 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='10' r='2.7' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.app-logo-mark::before {
  width: 22px;
  height: 22px;
}

@media (max-width: 640px) {
  .landing-footer .landing-appearance-control > div {
    grid-template-columns: repeat(3, 36px) !important;
  }

  .landing-footer .landing-appearance-control button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Final icon and dark-mode hardening: no fragile emoji/question-mark fallbacks */
.landing-brand-mark,
.app-logo-mark {
  color: #ef4444 !important;
}

.landing-brand-mark::before,
.app-logo-mark::before {
  background: currentColor !important;
}

.app-logo-mark {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#toggleSidebar {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
}

#toggleSidebar::before {
  content: "" !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 14px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#111827, #111827) 0 0 / 20px 2px no-repeat,
    linear-gradient(#111827, #111827) 0 6px / 20px 2px no-repeat,
    linear-gradient(#111827, #111827) 0 12px / 20px 2px no-repeat;
  border-radius: 2px;
}

#toggleSidebar:hover::before,
#toggleSidebar:focus-visible::before {
  background:
    linear-gradient(#166534, #166534) 0 0 / 20px 2px no-repeat,
    linear-gradient(#166534, #166534) 0 6px / 20px 2px no-repeat,
    linear-gradient(#166534, #166534) 0 12px / 20px 2px no-repeat;
}

#topbar-search::before {
  content: "" !important;
  width: 15px;
  height: 15px;
  border: 2px solid #64748b;
  border-radius: 999px;
  background: transparent !important;
}

#topbar-search::after {
  content: "";
  position: absolute;
  left: 31px;
  top: calc(50% + 6px);
  z-index: 1;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: #64748b;
  transform: rotate(45deg);
  pointer-events: none;
}

body[data-landing-resolved-theme="dark"] .landing-discovery-panel,
body[data-landing-resolved-theme="dark"] .landing-planner-panel,
body[data-landing-resolved-theme="dark"] .landing-panel-grid,
body[data-landing-resolved-theme="dark"] .landing-panel-row,
body[data-landing-resolved-theme="dark"] .landing-countdown-card,
body[data-landing-resolved-theme="dark"] .landing-mini-chart,
body[data-landing-resolved-theme="dark"] .landing-return-section article,
body[data-landing-resolved-theme="dark"] .landing-panel-tags span {
  border-color: rgba(134, 239, 172, 0.22) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(34, 197, 94, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.78)) !important;
  color: #f8fafc !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-grid span,
body[data-landing-resolved-theme="dark"] .landing-panel-grid em,
body[data-landing-resolved-theme="dark"] .landing-panel-row em,
body[data-landing-resolved-theme="dark"] .landing-countdown-card span,
body[data-landing-resolved-theme="dark"] .landing-countdown-card em,
body[data-landing-resolved-theme="dark"] .landing-return-section article p {
  color: rgba(226, 232, 240, 0.74) !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-grid strong,
body[data-landing-resolved-theme="dark"] .landing-panel-row strong,
body[data-landing-resolved-theme="dark"] .landing-countdown-card strong,
body[data-landing-resolved-theme="dark"] .landing-return-section article strong {
  color: #f8fafc !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-tags span,
body[data-landing-resolved-theme="dark"] .landing-quality-section div span,
body[data-landing-resolved-theme="dark"] .landing-benefits article > span,
body[data-landing-resolved-theme="dark"] .landing-season-section li {
  border-color: rgba(134, 239, 172, 0.28) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #bbf7d0 !important;
  box-shadow: none !important;
}

#mapToolsToggle,
#locateBtn,
#favoritesBtn,
#mapStyleBtn {
  position: relative;
  color: #0f172a;
  font-size: 0 !important;
}

#mapToolsToggle::before,
#locateBtn::before,
#favoritesBtn::before,
#mapStyleBtn::before {
  content: "" !important;
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

#mapToolsToggle::before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E");
}

#locateBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3'/%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M2 12h3'/%3E%3Cpath d='M19 12h3'/%3E%3C/svg%3E");
}

#favoritesBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s-7.2-4.35-9.6-8.65C.2 8.4 2.7 4 6.9 4c2.05 0 3.45 1.06 4.1 2.05C11.65 5.06 13.05 4 15.1 4c4.2 0 6.7 4.4 4.5 8.35C19.2 16.65 12 21 12 21Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21s-7.2-4.35-9.6-8.65C.2 8.4 2.7 4 6.9 4c2.05 0 3.45 1.06 4.1 2.05C11.65 5.06 13.05 4 15.1 4c4.2 0 6.7 4.4 4.5 8.35C19.2 16.65 12 21 12 21Z'/%3E%3C/svg%3E");
  color: #ef4444;
}

#mapStyleBtn::before {
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E");
}

#mapToolsToggle:hover,
#locateBtn:hover,
#mapStyleBtn:hover {
  color: #166534;
}

/* Stable visible symbols for brand and map tools.
   HTML entities avoid the encoding glitches that previously rendered as "?". */
.landing-brand-mark,
.app-logo-mark {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ef4444 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.landing-brand-mark::before,
.app-logo-mark::before {
  content: none !important;
  display: none !important;
}

.app-logo-mark {
  font-size: 25px !important;
}

#mapToolsToggle,
#locateBtn,
#favoritesBtn,
#mapStyleBtn {
  color: var(--text-main) !important;
  font-size: 20px !important;
}

#mapToolsToggle::before,
#locateBtn::before,
#favoritesBtn::before,
#mapStyleBtn::before {
  content: none !important;
  display: none !important;
}

.map-tool-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  font-size: 20px;
  line-height: 1;
  filter: none;
}

#mapToolsToggle .map-tool-symbol {
  font-size: 21px;
}

#locateBtn .map-tool-symbol {
  color: #ef4444;
}

#favoritesBtn .map-tool-symbol {
  color: #ef4444;
}

#mapStyleBtn .map-tool-symbol {
  color: #22c55e;
}

#mapToolsToggle:hover .map-tool-symbol,
#locateBtn:hover .map-tool-symbol,
#mapStyleBtn:hover .map-tool-symbol {
  color: #86efac;
}

#favoritesBtn:hover .map-tool-symbol,
#favoritesBtn.active .map-tool-symbol {
  color: #ef4444;
}

/* Final visibility fixes for the sidebar toggle and dark landing panel headers. */
#toggleSidebar::before {
  background:
    linear-gradient(#f8fafc, #f8fafc) 0 0 / 20px 2px no-repeat,
    linear-gradient(#f8fafc, #f8fafc) 0 6px / 20px 2px no-repeat,
    linear-gradient(#f8fafc, #f8fafc) 0 12px / 20px 2px no-repeat !important;
  opacity: 0.98;
}

#toggleSidebar:hover::before,
#toggleSidebar:focus-visible::before {
  background:
    linear-gradient(#86efac, #86efac) 0 0 / 20px 2px no-repeat,
    linear-gradient(#86efac, #86efac) 0 6px / 20px 2px no-repeat,
    linear-gradient(#86efac, #86efac) 0 12px / 20px 2px no-repeat !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-header strong,
body.landing-theme-dark .landing-panel-header strong {
  color: #f8fafc !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-header span,
body.landing-theme-dark .landing-panel-header span {
  color: #86efac !important;
}

/* Light-mode brand readability: keep the top title legible on bright hero gradients. */
body[data-landing-resolved-theme="light"] .landing-brand,
body.landing-theme-light .landing-brand {
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: #0f172a !important;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body[data-landing-resolved-theme="light"] .landing-brand strong,
body.landing-theme-light .landing-brand strong {
  color: #0f172a !important;
  text-shadow: none !important;
}

body[data-landing-resolved-theme="light"] .landing-brand .app-language-select,
body.landing-theme-light .landing-brand .app-language-select {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background-color: rgba(248, 250, 252, 0.9) !important;
  color: #0f172a !important;
}

@media (prefers-color-scheme: light) {
  body:not(.landing-theme-dark) .landing-brand {
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: #0f172a !important;
    box-shadow:
      0 14px 34px rgba(15, 23, 42, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }

  body:not(.landing-theme-dark) .landing-brand strong {
    color: #0f172a !important;
    text-shadow: none !important;
  }
}

/* Corrected landing contrast pass:
   keep the top brand unboxed, but make the real kicker/badges readable. */
body[data-landing-resolved-theme="light"] .landing-brand,
body.landing-theme-light .landing-brand {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-landing-resolved-theme="light"] .landing-brand .app-language-select,
body.landing-theme-light .landing-brand .app-language-select {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: #0f172a !important;
}

body[data-landing-resolved-theme="light"] .landing-kicker,
body.landing-theme-light .landing-kicker {
  border-color: rgba(22, 101, 52, 0.18) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  color: #14532d !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

body[data-landing-resolved-theme="light"] .landing-kicker::before,
body.landing-theme-light .landing-kicker::before {
  background: #16a34a !important;
  box-shadow: 0 0 18px rgba(22, 163, 74, 0.48) !important;
}

body[data-landing-resolved-theme="dark"] .landing-panel-header span,
body.landing-theme-dark .landing-panel-header span {
  border-color: rgba(134, 239, 172, 0.28) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #bbf7d0 !important;
  box-shadow: none !important;
}

@media (prefers-color-scheme: light) {
  body:not(.landing-theme-dark) .landing-brand {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body:not(.landing-theme-dark) .landing-kicker {
    border-color: rgba(22, 101, 52, 0.18) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: #14532d !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
  }
}

/* Final date range filter layout: keep native date inputs fully visible. */
#dateRangeFilter {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr !important;
  align-items: stretch;
  gap: 12px !important;
  padding: 14px !important;
  overflow: visible;
}

#dateRangeFilter label {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

#dateRangeFilter input[type="date"] {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  height: 44px !important;
  padding: 0 12px !important;
  line-height: 44px;
  font-size: 14px !important;
  overflow: visible;
}

.date-range-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: stretch;
}

.date-range-actions button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 42px !important;
  padding: 0 10px !important;
  white-space: normal;
  line-height: 1.15;
}

body.event-list-fullscreen #dateRangeFilter {
  grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
  gap: 12px !important;
}

body.event-list-fullscreen .date-range-title,
body.event-list-fullscreen .date-range-actions {
  grid-column: 1 / -1;
}

body.event-list-fullscreen #dateRangeFilter input[type="date"] {
  height: 42px !important;
  line-height: 42px;
}

@media (max-width: 720px) {
  body.event-list-fullscreen #dateRangeFilter {
    grid-template-columns: 1fr !important;
  }
}

/* Final fullscreen filter flow: date range gets its own row, so it cannot overlap sport filters. */
body.event-list-fullscreen #sidebar-header {
  display: grid !important;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(132px, 160px) !important;
  grid-template-areas:
    "sortGroup spacer reset"
    "dateGroup dateGroup dateGroup"
    "sportGroup sportGroup sportGroup"
    "distanceGroup distanceGroup distanceGroup"
    "activeLabel summary summary" !important;
  align-items: start !important;
  gap: 14px !important;
  overflow: visible !important;
}

body.event-list-fullscreen .filter-sort-card {
  grid-area: sortGroup !important;
}

body.event-list-fullscreen .filter-date-card {
  grid-area: dateGroup !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

body.event-list-fullscreen .filter-sport-card {
  grid-area: sportGroup !important;
  min-width: 0 !important;
  position: relative;
  z-index: 1;
}

body.event-list-fullscreen .filter-distance-card {
  grid-area: distanceGroup !important;
  min-width: 0 !important;
}

body.event-list-fullscreen .filter-actions-row {
  grid-area: reset !important;
  min-width: 0 !important;
}

body.event-list-fullscreen .active-filter-label {
  grid-area: activeLabel !important;
}

body.event-list-fullscreen #activeFilterSummary {
  grid-area: summary !important;
  min-width: 0 !important;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter {
  grid-area: auto !important;
  position: static !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter.active {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
  gap: 12px !important;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter .date-range-title,
body.event-list-fullscreen .filter-date-card #dateRangeFilter .date-range-actions {
  grid-column: 1 / -1 !important;
}

body.event-list-fullscreen .filter-date-card #dateRangeFilter input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 980px) {
  body.event-list-fullscreen #sidebar-header {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "sortGroup"
      "dateGroup"
      "sportGroup"
      "distanceGroup"
      "activeLabel"
      "summary"
      "reset" !important;
  }

  body.event-list-fullscreen .filter-date-card #dateRangeFilter.active {
    grid-template-columns: 1fr !important;
  }
}

/* Launch legal/footer final overrides */
body.legal-page .legal-page-content,
body.legal-page .legal-page-footer {
  overflow-wrap: anywhere;
}

#legalLinks a[href="imprint.html"],
#legalLinks a[href="privacy.html"],
#legalLinks a[href^="mailto:"] {
  white-space: nowrap;
}

@media (max-width: 640px) {
  #legalLinks {
    right: 12px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 12px !important;
    padding: 10px 12px !important;
  }

  #legalLinks span {
    flex-basis: 100%;
    text-align: center;
    white-space: normal !important;
  }
}

/* Mobile final pass: scoped to phones/tablets only. Desktop layout is intentionally untouched. */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body {
    background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
  }

  body:not(.landing-open) {
    padding: 0;
  }

  #topbar {
    position: fixed !important;
    inset: 8px 8px auto 8px !important;
    width: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "left center right"
      "search search search" !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 18px !important;
    z-index: 2800 !important;
  }

  #topbar-left,
  #topbar-center,
  #topbar-right {
    min-width: 0 !important;
  }

  #topbar-left {
    grid-area: left !important;
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #topbar-center {
    grid-area: center !important;
    display: grid !important;
    gap: 8px !important;
    justify-items: center !important;
  }

  #topbar-right {
    grid-area: right !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  #topbar-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #topbar-search input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }

  #topbar-center h1,
  #topbar-center .app-title {
    max-width: 44vw !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #topbar-center h1::after,
  #topbar-center .app-title::after {
    display: none !important;
  }

  #topbar button,
  #topbar select,
  #mobileFilterBtn {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  #topbarProductActions {
    display: flex !important;
    gap: 7px !important;
    max-width: 42vw !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  #topbarProductActions::-webkit-scrollbar,
  #authArea::-webkit-scrollbar {
    display: none;
  }

  #authArea {
    display: flex !important;
    gap: 7px !important;
    max-width: 38vw !important;
    overflow-x: auto !important;
    align-items: center !important;
    scrollbar-width: none;
  }

  #authArea .app-language-select {
    width: 58px !important;
    flex: 0 0 auto !important;
  }

  #app {
    position: fixed !important;
    inset: 132px 8px 8px 8px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  #map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
  }

  #sidebar {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: min(92vw, 380px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 20px 0 0 20px !important;
    transform: translateX(0) !important;
    transition: transform 220ms var(--ease-smooth) !important;
    z-index: 2100 !important;
  }

  #sidebar.closed {
    transform: translateX(calc(-100% - 12px)) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:not(.event-list-fullscreen) #sidebar.closed {
    margin-left: 0 !important;
  }

  #eventList {
    padding-bottom: 86px !important;
  }

  #eventDrawer {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: min(78dvh, 680px) !important;
    border-radius: 22px !important;
    transform: translateY(calc(100% + 18px)) !important;
    opacity: 0 !important;
    z-index: 3600 !important;
  }

  #eventDrawer.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .beta-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    top: 118px !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    transform: none !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
    z-index: 2700 !important;
  }

  body.sidebar-collapsed:not(.landing-open):not(.event-list-fullscreen):not(.mobile-filter-open) .beta-banner {
    display: grid !important;
  }

  .beta-banner div {
    gap: 2px !important;
  }

  .beta-banner strong {
    font-size: 10px !important;
  }

  .beta-banner span {
    display: -webkit-box;
    max-height: 32px;
    overflow: hidden;
    font-size: 11px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .beta-banner button {
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }

  .beta-banner .beta-guide-btn {
    display: none !important;
  }

  body.mobile-filter-open .beta-banner,
  body.event-list-fullscreen .beta-banner,
  body.landing-open .beta-banner {
    display: none !important;
  }

  #floatingActions,
  .map-tools {
    right: 16px !important;
    bottom: 22px !important;
    z-index: 2500 !important;
  }

  body.sidebar-collapsed:not(.event-list-fullscreen) #app,
  body.sidebar-collapsed:not(.event-list-fullscreen) #map {
    width: auto !important;
  }

  body.event-list-fullscreen #app {
    position: fixed !important;
    inset: 8px !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 22px !important;
  }

  body.event-list-fullscreen #sidebar {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border-radius: 22px !important;
  }

  body.event-list-fullscreen #sidebar-header {
    max-height: 46dvh !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }

  body.event-list-fullscreen #eventList {
    padding:
      12px
      12px
      82px !important;
  }

  #legalLinks {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #topbar {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding: 9px !important;
  }

  #topbar-center h1,
  #topbar-center .app-title {
    max-width: 38vw !important;
    font-size: 15px !important;
  }

  #topbarProductActions {
    max-width: 36vw !important;
  }

  #authArea {
    max-width: 34vw !important;
  }

  #app {
    inset: 128px 6px 6px 6px !important;
  }

  .beta-banner {
    top: 112px !important;
    left: 8px !important;
    right: 8px !important;
  }
}