:root {
  --web-bg: #000000;
  --web-surface: #191919;
  --web-surface-2: #202020;
  --web-card: #050505;
  --web-line: #303030;
  --web-line-hot: rgba(255, 79, 25, 0.45);
  --web-text: #f7f7f7;
  --web-muted: #8e8e93;
  --web-accent: #ff4f19;
  --web-accent-soft: rgba(255, 79, 25, 0.14);
  --web-green: #18d45a;
  --web-radius: 8px;
  --web-radius-sm: 8px;
  --web-max: 520px;
  --web-wide-max: 1520px;

  /* Global Colors for better consistency */
  --web-white: #ffffff;
  --web-black: #000000;
  --web-white-rgb: 255, 255, 255;
  --web-black-rgb: 0, 0, 0;
}

.web-cover-img,
.web-garage-bike-thumb img,
.web-user-avatar img,
.web-hero-avatar-ring img,
.web-profile-edit-avatar img,
.web-profile-avatar img,
.web-admin-avatar img,
.web-admin-avatar-sm img,
.web-admin-avatar-lg img,
.web-gallery-likes-avatar img,
.web-action-logo,
.web-map-member-avatar img,
.web-map-marker-dot img,
.web-map-cluster-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.web-user-avatar img,
.web-hero-avatar-ring img,
.web-profile-edit-avatar img,
.web-profile-avatar img,
.web-admin-avatar img,
.web-admin-avatar-sm img,
.web-admin-avatar-lg img,
.web-gallery-likes-avatar img,
.web-member-card-avatar img,
.web-member-detail-avatar img,
.web-member-profile-avatar img,
.web-map-member-avatar img,
.web-map-marker-dot img,
.web-map-cluster-row-avatar img,
.web-dashboard-avatar-chip img,
.web-ride-detail-org-avatar,
.web-ride-detail-avatar-stack img {
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  object-position: center;
}

/* Garage page */
.web-garage-page {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.web-garage-page *,
.web-garage-page *::before,
.web-garage-page *::after {
  min-width: 0;
}

.web-garage-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.web-garage-top h1 {
  margin: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
}

.web-garage-top p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.web-garage-top-actions {
  display: flex;
  justify-content: flex-end;
}

.web-garage-switcher {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.web-garage-bike-tab {
  flex: 0 0 220px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #f2f2f4;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.web-garage-bike-tab.active {
  border-color: rgba(255, 79, 25, 0.58);
  background: rgba(255, 79, 25, 0.12);
}

.web-garage-bike-tab.is-add {
  grid-template-columns: 22px minmax(0, 1fr);
  flex-basis: 130px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 800;
}

.web-garage-bike-tab strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-garage-bike-tab small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

.web-garage-bike-thumb {
  width: 42px;
  height: 42px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--web-accent);
}

.web-garage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.38fr);
  gap: 14px;
  align-items: start;
}

.web-garage-main,
.web-garage-sidebar {
  display: grid;
  gap: 14px;
}

.web-garage-sidebar {
  position: sticky;
  top: 78px;
}

.web-garage-hero-card {
  position: relative;
  min-height: 288px;
  padding: 0;
  overflow: hidden;
  background: #090a0d;
}

.web-garage-hero-media {
  position: absolute;
  inset: 0;
}

.web-garage-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.web-garage-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 36%, rgba(255, 79, 25, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.62) 48%, rgba(5, 6, 8, 0.2) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent 40%);
}

.web-garage-hero-overlay {
  position: relative;
  z-index: 1;
  min-height: 288px;
  max-width: 640px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 22px;
}

.web-garage-hero-head,
.web-garage-kicker-row,
.web-notification-card-topline,
.web-members-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-garage-hero-actions,
.web-garage-record-actions,
.web-garage-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.web-garage-hero-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  max-width: calc(100% - 36px);
  justify-content: flex-end;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(5, 7, 10, 0.72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.web-garage-hero-actions form {
  margin: 0;
}

.web-garage-hero-actions .web-garage-ghost-button {
  border-color: rgba(255, 143, 92, 0.68);
  background: linear-gradient(135deg, rgba(255, 104, 49, 0.98), rgba(188, 58, 22, 0.94));
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 79, 25, 0.22);
}

.web-garage-hero-actions .web-garage-ghost-button.is-danger {
  border-color: rgba(255, 132, 152, 0.58);
  background: linear-gradient(135deg, rgba(185, 50, 74, 0.98), rgba(122, 33, 51, 0.96));
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 70, 90, 0.18);
}

.web-garage-page .web-garage-kicker {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 79, 25, 0.18);
  color: #ffb088;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.web-garage-hero-card h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 40px;
  line-height: 1.05;
}

.web-garage-hero-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.web-garage-plate {
  color: #fff;
  font-size: 16px;
}

.web-garage-odometer-pill,
.web-garage-ghost-button,
.web-garage-wide-action {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 25, 0.36);
  background: rgba(255, 79, 25, 0.12);
  color: #ffb088;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  font-family: inherit;
}

.web-garage-ghost-button.is-danger {
  border-color: rgba(255, 70, 90, 0.34);
  background: rgba(255, 70, 90, 0.1);
  color: #ff7d91;
}

.web-garage-odometer-pill,
.web-garage-ghost-button,
.web-garage-wide-action {
  cursor: pointer;
}

.web-garage-odometer-pill:hover,
.web-garage-odometer-pill:focus-visible {
  border-color: rgba(255, 79, 25, 0.7);
  background: rgba(255, 79, 25, 0.18);
}

.web-garage-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.web-garage-stat-card {
  min-height: 96px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label";
  align-items: center;
  column-gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
}

.web-garage-stat-card span {
  grid-area: icon;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.web-garage-stat-card strong {
  grid-area: value;
  font-size: 25px;
  line-height: 1;
}

.web-garage-stat-card small {
  grid-area: label;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.web-garage-page .web-garage-grid,
.web-garage-form-grid,
.web-garage-service-category-list,
.web-garage-service-history-list,
.web-gallery-manager-grid,
.web-notification-modal-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.web-garage-section-card,
.web-garage-history-card,
.web-garage-readiness-card,
.web-garage-reminders-card,
.web-garage-actions-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.web-section-head,
.web-garage-service-card-head,
.web-garage-service-history-card > div:first-child,
.web-ride-feed-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.web-section-head h2,
.web-garage-actions-card h2,
.web-garage-modal-panel h3 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.web-section-head button {
  border: 0;
  background: transparent;
  color: var(--web-accent);
  font-size: 12px;
  font-weight: 900;
}

.web-garage-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.web-garage-mini-item {
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.web-garage-mini-item strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}

.web-garage-mini-item small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  line-height: 1.25;
}

.web-garage-mini-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.web-garage-status-pill {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.tone-good,
.web-garage-status-pill.tone-good,
.web-garage-mini-icon.tone-good {
  color: #2bd46d;
}

.web-garage-status-pill.tone-good,
.web-garage-mini-icon.tone-good {
  background: rgba(43, 212, 109, 0.12);
}

.tone-attention,
.web-garage-status-pill.tone-attention,
.web-garage-mini-icon.tone-attention,
.web-garage-mini-icon.tone-muted {
  color: #ffc24d;
}

.tone-orange {
  color: var(--web-accent);
}

.web-garage-status-pill.tone-attention,
.web-garage-mini-icon.tone-attention {
  background: rgba(255, 194, 77, 0.12);
}

.tone-critical,
.web-garage-status-pill.tone-critical,
.web-garage-mini-icon.tone-critical {
  color: #ff6a63;
}

.web-garage-status-pill.tone-critical,
.web-garage-mini-icon.tone-critical {
  background: rgba(255, 106, 99, 0.12);
}

.web-garage-status-pill.tone-muted,
.web-garage-mini-icon.tone-muted {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.56);
}

.web-garage-wide-action {
  width: 100%;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 79, 25, 0.08);
}

.web-garage-history-list,
.web-garage-reminder-list,
.web-garage-actions-card > div,
.web-garage-modal-list,
.web-garage-timeline {
  display: grid;
  gap: 10px;
}

.web-garage-history-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 110px 120px 42px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.web-garage-history-row i {
  color: #2bd46d;
}

.web-garage-history-row strong {
  color: #fff;
  font-size: 13px;
}

.web-garage-history-row span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.web-garage-history-row em {
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(43, 212, 109, 0.12);
  color: #2bd46d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.web-garage-readiness-card > strong {
  color: #fff;
  font-size: 17px;
}

.web-garage-readiness-card > small {
  color: rgba(255, 255, 255, 0.62);
}

.web-garage-score-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.web-garage-score-ring {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #13171a 58%, transparent 60%),
    conic-gradient(#78d65b var(--score), rgba(255, 255, 255, 0.08) 0);
}

.web-garage-score-ring span {
  color: #fff;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
}

.web-garage-score-ring small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.web-garage-score-details {
  display: grid;
  gap: 8px;
}

.web-garage-score-details span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.web-garage-score-details i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.web-garage-next-action,
.web-garage-reminder-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.web-garage-next-action i {
  color: var(--web-accent);
  font-size: 20px;
}

.web-garage-next-action strong,
.web-garage-reminder-item strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.web-garage-next-action span,
.web-garage-reminder-item small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.35;
}

.web-garage-reminder-item > i {
  color: currentColor;
  font-size: 18px;
}

.web-garage-reminder-item.tone-good {
  color: #2bd46d;
}

.web-garage-reminder-item.tone-attention {
  color: #ffc24d;
}

.web-garage-reminder-item.tone-critical {
  color: #ff6a63;
}

.web-garage-actions-card button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

.web-garage-actions-card button i {
  color: var(--web-accent);
}

.web-garage-empty-copy {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
}

.web-garage-form-span {
  grid-column: 1 / -1;
}

.web-garage-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.web-form-modal .ts-wrapper.form-select {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.web-form-modal .ts-wrapper.form-select .ts-control {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff;
  box-shadow: none;
}

.web-form-modal .ts-wrapper.form-select.single.input-active .ts-control,
.web-form-modal .ts-wrapper.form-select.focus .ts-control {
  border-color: rgba(255, 79, 25, 0.72) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 79, 25, 0.18) !important;
}

.web-form-modal .ts-wrapper.form-select .ts-control input {
  flex: 1 1 8px;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #fff !important;
  caret-color: #fff;
}

.web-form-modal .ts-wrapper.form-select .ts-control .item {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}

.web-form-modal .ts-wrapper .ts-control input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.web-form-modal .ts-dropdown {
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #151518;
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.web-form-modal .ts-dropdown .ts-dropdown-content {
  max-height: 248px;
}

.web-form-modal .ts-dropdown [data-selectable] {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
}

.web-form-modal .ts-dropdown [data-value=""] {
  display: none !important;
}

.web-form-modal .ts-dropdown .option,
.web-form-modal .ts-dropdown .no-results {
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.82);
}

.web-form-modal .ts-dropdown .option:hover,
.web-form-modal .ts-dropdown .option.active,
.web-form-modal .ts-dropdown [data-selectable].active {
  background: rgba(255, 79, 25, 0.2);
  color: #fff;
}

.web-form-modal .ts-dropdown .option.selected,
.web-form-modal .ts-dropdown [data-selectable].selected {
  color: rgba(255, 255, 255, 0.68);
}

.web-form-modal .ts-dropdown .active {
  background: var(--web-accent);
  color: #fff;
}

.web-form-modal.web-garage-fullscreen-modal {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
}

.web-form-modal.web-garage-fullscreen-modal .modal-content {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  border-radius: 0;
}

.web-form-modal.web-garage-fullscreen-modal .modal-header {
  flex-shrink: 0;
  padding-inline: 24px;
}

.web-form-modal.web-garage-fullscreen-modal .modal-header p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.58);
}

.web-form-modal.web-garage-fullscreen-modal .modal-body {
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(145deg, rgba(255, 79, 25, 0.07), transparent 36%),
    rgba(6, 6, 8, 0.96);
}

.web-form-modal.web-garage-fullscreen-modal *,
.web-form-modal.web-garage-fullscreen-modal *::before,
.web-form-modal.web-garage-fullscreen-modal *::after {
  min-width: 0;
}

.web-garage-modal-grid {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.web-garage-modal-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.web-garage-service-modal-shell {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.web-garage-service-select,
.web-garage-service-categories,
.web-garage-service-history-shell,
.web-garage-service-add-panel {
  display: grid;
  gap: 14px;
}

.web-garage-service-select h3,
.web-garage-service-section-head h3,
.web-garage-service-add-panel h3,
.web-garage-service-checklist h4 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}

.web-garage-service-bike-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.web-garage-service-bike-chips a {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.web-garage-service-bike-chips a.active {
  border-color: rgba(255, 79, 25, 0.66);
  background: var(--web-accent);
  color: #fff;
}

.web-garage-service-overview {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr);
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.web-garage-service-status {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.web-garage-service-status > span {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}

.web-garage-service-overview.tone-good .web-garage-service-status {
  color: #2bd46d;
}

.web-garage-service-overview.tone-attention .web-garage-service-status {
  color: #ffc24d;
}

.web-garage-service-overview.tone-critical .web-garage-service-status {
  color: #ff6a63;
}

.web-garage-service-status strong {
  display: block;
  color: #fff;
  font-size: 26px;
  line-height: 1.1;
}

.web-garage-service-status small,
.web-garage-service-section-head p,
.web-garage-service-category-card span,
.web-garage-service-history-card span,
.web-garage-service-history-card li,
.web-garage-service-next-step span,
.web-garage-service-odometer span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  line-height: 1.45;
}

.web-garage-service-next-step,
.web-garage-service-odometer,
.web-garage-service-checklist {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.web-garage-service-next-step strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
}

.web-garage-service-counters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.web-garage-service-counters div {
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.web-garage-service-counters strong,
.web-garage-service-odometer strong {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.web-garage-service-counters span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.web-garage-service-odometer {
  display: grid;
  place-items: center;
  align-content: center;
}

.web-garage-service-checklist {
  grid-column: 1 / -1;
}

.web-garage-service-checklist ul,
.web-garage-service-history-card ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.web-garage-service-checklist li {
  display: flex;
  gap: 9px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.45;
}

.web-garage-service-checklist li + li {
  margin-top: 7px;
}

.web-garage-service-checklist li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--web-accent);
}

.web-garage-service-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.web-garage-service-section-head p {
  margin: 4px 0 0;
}

.web-garage-service-section-head > a,
.web-garage-service-category-card a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(255, 79, 25, 0.42);
  border-radius: 999px;
  background: rgba(255, 79, 25, 0.12);
  color: #ff8a5f;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.web-garage-service-category-card,
.web-garage-service-history-card,
.web-garage-service-add-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.web-garage-service-card-head > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.web-garage-service-card-head i {
  color: var(--web-accent);
  font-size: 18px;
}

.web-garage-service-category-card h4 {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
}

.web-garage-service-category-card p,
.web-garage-service-history-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}

.web-garage-service-category-card strong {
  color: #ff9c73;
  font-size: 13px;
  line-height: 1.35;
}

.web-garage-service-category-card a {
  width: fit-content;
}

.web-garage-service-history-card {
  position: relative;
}

.web-garage-service-history-card strong {
  color: #fff;
  font-size: 17px;
}

.web-garage-service-history-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.web-garage-service-history-card li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.web-garage-service-history-card li i {
  color: rgba(255, 255, 255, 0.68);
}

.web-garage-service-history-card form {
  margin-top: 2px;
}

.web-garage-inline-edit {
  min-width: min(100%, 220px);
}

.web-garage-inline-edit summary,
.web-garage-modal-list a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.web-garage-inline-edit[open] summary {
  background: rgba(255, 79, 25, 0.12);
  color: #ff9c73;
}

.web-garage-inline-edit-form {
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.web-garage-inline-edit-form label {
  display: grid;
  gap: 5px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
}

.web-garage-inline-edit-span,
.web-garage-inline-edit-form button {
  grid-column: 1 / -1;
}

.web-garage-service-history-card button,
.web-garage-modal-list button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 70, 62, 0.1);
  color: #ff5d53;
  font-size: 13px;
  font-weight: 900;
}

.web-garage-service-add-panel {
  scroll-margin-top: 18px;
}

.web-garage-service-add-panel .web-form,
#garageDocumentAddForm .web-form {
  grid-template-columns: 1fr;
}

.web-garage-service-add-panel .web-garage-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#garageDocumentAddForm .web-garage-form-grid {
  grid-template-columns: 1fr;
}

.web-garage-service-add-panel .web-button,
#garageDocumentAddForm .web-button {
  width: min(100%, 320px);
  justify-self: start;
}

.web-garage-odometer-dialog {
  width: min(100%, 620px);
}

.web-garage-odometer-dialog .modal-content > form.web-form {
  grid-template-columns: 1fr;
  gap: 0;
}

.web-garage-odometer-dialog .modal-body {
  display: grid;
  gap: 14px;
}

.web-garage-odometer-history {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.web-garage-odometer-history h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
}

.web-garage-odometer-dialog .web-garage-modal-list div {
  grid-template-columns: minmax(0, 1fr) auto;
}

.web-garage-odometer-dialog .modal-footer .web-button {
  flex: 1 1 180px;
  min-width: 0;
}

.web-garage-category-chip-field {
  display: grid;
  gap: 9px;
}

.web-garage-category-chip-field > span {
  color: #ededf1;
  font-size: 14px;
  font-weight: 800;
}

.web-garage-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  align-content: flex-start;
}

.web-garage-category-chips label {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.web-garage-category-chips .btn-check:checked + label {
  border-color: rgba(255, 79, 25, 0.7);
  background: var(--web-accent);
  color: #fff;
}

.web-garage-timeline-group {
  display: grid;
  gap: 10px;
}

.web-garage-timeline-group > span {
  color: var(--web-accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.web-garage-timeline article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.web-garage-timeline article > i {
  color: var(--web-accent);
}

.web-garage-timeline strong,
.web-garage-modal-list strong {
  color: #fff;
  font-size: 14px;
}

.web-garage-timeline small,
.web-garage-modal-list span {
  display: block;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.web-garage-timeline p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.web-garage-timeline em {
  color: #ffc24d;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.web-garage-document-modal-grid,
.web-garage-reminders-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.web-garage-document-modal-grid article {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.web-garage-document-modal-grid article a {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 79, 25, 0.36);
  border-radius: 999px;
  background: rgba(255, 79, 25, 0.1);
  color: #ff8a5f;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

.web-garage-document-modal-grid i {
  color: currentColor;
  font-size: 20px;
}

.web-garage-document-modal-grid strong {
  color: #fff;
}

.web-garage-document-modal-grid span {
  font-size: 12px;
  font-weight: 900;
}

.web-garage-document-modal-grid small {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
}

.web-garage-modal-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1180px) {
  .web-garage-layout,
  .web-garage-modal-grid {
    grid-template-columns: 1fr;
  }

  .web-garage-service-overview,
  .web-garage-service-category-list,
  .web-garage-service-history-list {
    grid-template-columns: 1fr;
  }

  .web-garage-service-add-panel .web-garage-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-garage-sidebar {
    position: static;
  }

  .web-garage-document-modal-grid,
  .web-garage-reminders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .web-form-modal.web-garage-fullscreen-modal .modal-header,
  .web-form-modal.web-garage-fullscreen-modal .modal-body {
    padding-inline: 16px;
  }

  .web-garage-top {
    align-items: stretch;
    flex-direction: column;
  }

  .web-garage-top-actions .web-button {
    width: 100%;
    justify-content: center;
  }

  .web-garage-page .web-garage-grid,
  .web-garage-mini-grid,
  .web-garage-form-grid,
  .web-garage-document-modal-grid,
  .web-garage-reminders-grid {
    grid-template-columns: 1fr;
  }

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

  .web-garage-stat-card {
    min-height: unset;
    padding: 12px;
  }

  .web-garage-bike-tab {
    flex-basis: 190px;
  }

  .web-garage-hero-card,
  .web-garage-hero-overlay {
    min-height: 330px;
  }

  .web-garage-hero-card::after {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, 0.1), rgba(5, 6, 8, 0.95) 72%),
      radial-gradient(circle at 70% 30%, rgba(255, 79, 25, 0.18), transparent 30%);
  }

  .web-garage-hero-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .web-garage-hero-actions {
    top: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
  }

  .web-garage-hero-card h2 {
    font-size: 28px;
  }

  .web-garage-service-overview,
  .web-garage-service-counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-garage-service-status,
  .web-garage-service-next-step,
  .web-garage-service-checklist {
    grid-column: 1 / -1;
  }

  .web-garage-service-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .web-garage-service-category-card,
  .web-garage-service-history-card,
  .web-garage-service-add-panel {
    padding: 16px;
  }

  .web-garage-service-add-panel .web-garage-form-grid {
    grid-template-columns: 1fr;
  }

  .web-garage-category-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .web-garage-modal-list div {
    grid-template-columns: 1fr;
  }

  .web-garage-history-row {
    grid-template-columns: 28px minmax(0, 1fr) 56px;
  }

  .web-garage-history-row span:nth-of-type(2) {
    display: none;
  }

  .web-garage-history-row em {
    display: none;
  }

  .web-garage-score-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .web-garage-timeline article {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .web-garage-timeline em {
    grid-column: 2;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--web-bg);
}

body.web-shell {
  margin: 0;
  min-height: 100dvh;
  color: var(--web-text);
  background: var(--web-bg) url("/static/img/web/home-bkg.png") center top / cover fixed no-repeat;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.web-shell,
body.web-shell .form-control,
body.web-shell .btn,
body.web-shell .alert {
  letter-spacing: 0;
}

a {
  color: inherit;
}

p small{
  color: rgba(var(--web-white-rgb), 0.6);
}

.web-app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.web-topbar {
  min-height: 58px;
  padding: 0;
  background: rgba(3, 5, 8, 0.92);
  border-bottom: 1px solid var(--web-line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.web-navbar-shell {
  min-height: 58px;
  gap: 18px;
  padding-inline: 18px;
}

.web-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
}

.web-brand span:last-child::first-letter {
  color: var(--web-text);
}

.web-brand span:last-child {
  color: var(--web-text);
}

.web-brand span:last-child {
  text-shadow: none;
}

.web-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.web-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.web-primary-nav {
  gap: 14px;
  align-items: center;
}

.web-primary-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 58px;
  padding: 0 2px;
  color: #a4a4aa;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-weight: 800;
  font-size: 13px;
}

.web-primary-nav .nav-link:hover,
.web-primary-nav .nav-link:focus,
.web-primary-nav .nav-link.active {
  color: var(--web-text);
  border-bottom-color: var(--web-accent);
}

.web-primary-nav .nav-link i {
  color: inherit;
  font-size: 16px;
}

.web-primary-nav .nav-link.active,
.web-primary-nav .nav-link.active i {
  color: var(--web-accent);
}

.web-account-nav {
  gap: 22px;
  align-items: center;
  display: flex;
}

.web-account-nav a {
  appearance: none;
  border: 1px solid var(--web-line);
  background: #0b0b0b;
  color: var(--web-text);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
}

.web-navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2);
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.web-navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem rgba(255, 93, 31, 0.22);
}

.web-navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  opacity: 1;
}

.web-notification-link {
  position: relative;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #c8c8cf !important;
  font-size: 20px !important;
}

.web-notification-link i {
  font-size: 19px;
}

.web-notification-link.active,
.web-notification-link:hover {
  color: var(--web-accent) !important;
}

.web-notification-link-text {
  display: none;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.web-notification-link [data-notification-bell-count] {
  position: absolute;
  top: 4px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--web-accent);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.web-notification-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 46px;
  height: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 93, 31, 0.05), rgba(255, 93, 31, 0.95), rgba(255, 93, 31, 0.05));
  box-shadow: 0 0 18px rgba(255, 93, 31, 0.35);
}

.web-user-avatar {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--web-line-hot);
  background: var(--web-accent-soft);
  color: var(--web-accent);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 900;
}

.web-user-menu-trigger {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.24);
  color: var(--web-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 12px 4px 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}

.web-user-menu-copy {
  display: grid;
  justify-items: start;
  line-height: 1.1;
}

.web-user-menu-copy small {
  color: #8a8d97;
  font-size: 11px;
  font-weight: 700;
}

.web-user-menu-trigger:hover,
.web-user-menu-trigger:focus {
  color: var(--web-text);
  border-color: rgba(255, 79, 25, 0.30);
}

.web-user-menu-trigger:focus-visible {
  outline: 2px solid var(--web-accent);
  outline-offset: 2px;
}

.web-user-menu-trigger .fa-chevron-down {
  color: #8e8e93;
  font-size: 12px;
}

.web-user-menu-name {
  display: inline-block;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-user-menu-initials {
  display: none;
  font-weight: 800;
}

.web-dropdown-menu {
  background: #111111;
  border: 1px solid var(--web-line);
  border-radius: 12px;
  padding: 8px;
  min-width: 220px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

.web-dropdown-menu li {
  margin-bottom: 4px;
}

.web-dropdown-menu li:last-child {
  margin-bottom: 0;
}

.web-login-link {
  min-height: 40px;
  padding: 0 14px !important;
  border-radius: 999px;
  border: 1px solid var(--web-line);
  background: #0b0b0b;
}

.web-dropdown-menu .dropdown-item {
  color: var(--web-text);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 15px;
  display: flex;
  align-items: center;
}

.web-dropdown-menu .dropdown-item:hover,
.web-dropdown-menu .dropdown-item:focus,
.web-dropdown-menu .dropdown-item.active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--web-text);
}

.web-dropdown-menu .dropdown-divider {
  margin: 6px 0;
  border-top: 1px solid var(--web-line);
  opacity: 1;
}

.web-nav-icon {
  color: var(--web-accent);
  opacity: 0.75;
}

.web-main {
  width: min(100%, var(--web-max));
  margin: 0 auto;
  padding: 22px 14px 34px;
  flex: 1;
}

.web-home-hero-pro {
  min-height: 320px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--web-line);
  background: #090b0f;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
}

.web-hero-map-layer,
.web-hero-image-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.web-hero-map-layer {
  right: 54%;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.56), rgba(7, 7, 7, 0.20), transparent),
    url("/static/img/web/hero-map.png") left center / auto 100% repeat-y,
    radial-gradient(circle at 34% 52%, rgba(255, 79, 25, 0.36), transparent 37%),
    #090807;
  opacity: 1;
}

.web-hero-image-layer {
  left: 0;
  background:
    linear-gradient(180deg, rgba(9, 11, 15, 0.55) 0%, rgba(9, 11, 15, 0.80) 100%),
    url("/static/img/web/hero-1.png") center center / cover no-repeat
}

.web-hero-avatar-wrap {
  position: relative;
  z-index: 2;
  padding: 26px 26px 0;
  justify-self: center;
  display: block;
  text-decoration: none;
}

.web-hero-avatar-ring {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--web-accent-soft);
  border: 3px solid rgba(255, 79, 25, 0.85);
  box-shadow:
    0 0 0 8px rgba(255, 79, 25, 0.10),
    0 0 44px rgba(255, 79, 25, 0.35);
  color: var(--web-accent);
  font-size: 44px;
  font-weight: 900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.web-hero-avatar-wrap:hover .web-hero-avatar-ring {
  transform: scale(1.04);
  box-shadow:
    0 0 0 10px rgba(255, 79, 25, 0.18),
    0 0 54px rgba(255, 79, 25, 0.50);
}

.web-hero-content {
  position: relative;
  z-index: 2;
  padding: 18px 26px 28px;
  text-align: center;
}

.web-hero-content h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
}

.web-hero-content h1 span {
  color: var(--web-accent);
}

.web-hero-content p {
  margin: 10px 0 0;
  color: #c9c9cf;
}

.web-hero-actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.web-page-title {
  margin: 12px 0 26px;
}

.web-page-title h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}

.web-page-title p {
  margin: 8px 0 0;
  color: var(--web-muted);
  line-height: 1.45;
}

.web-panel {
  background: var(--web-surface);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.web-base-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--web-text);
  border: 1px solid var(--web-line);
  background: var(--web-card);
  border-radius: var(--web-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.web-reveal {
  animation: webReveal 360ms ease both;
  animation-delay: var(--reveal-delay, 0ms);
}

.web-panel,
.web-dashboard-metrics-shell + .web-panel,
.web-profile-hero + .web-panel,
.web-page-title + .web-panel {
  margin-top: 22px;
}

.web-home-hero-pro + .web-dashboard-metrics-shell {
  margin-top: 14px;
}

.web-card {
  background: var(--web-card);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius-sm);
  padding: 16px;
}

.web-card + .web-card {
  margin-top: 14px;
}

.web-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  padding-block: 36px;
  padding-inline: 24px;
}

.web-empty-state > i {
  font-size: 38px;
  color: var(--web-accent);
}

.web-empty-state h2 {
  margin: 0;
  color: #fff;
}

.web-empty-state p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
  max-width: 420px;
}

.web-members-card-grid .web-empty-state {
  grid-column: 1 / -1;
}

.web-rides-card-grid .web-empty-state {
  grid-column: 1 / -1;
  margin-top: 0;
}

.web-garage-empty-state {
  min-height: 360px;
}

.web-section-heading {
  margin-bottom: 14px;
}

.web-section-heading h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.web-section-heading p {
  margin: 5px 0 0;
  color: var(--web-muted);
  font-size: 14px;
}

.web-status-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.web-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border: 1px solid rgba(255, 79, 25, 0.18);
}

.web-form {
  display: grid;
  gap: 18px;
}

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

.web-field label {
  color: var(--web-text);
  font-weight: 750;
  font-size: 14px;
}

.web-field input,
.web-field textarea,
.web-field select {
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  border: 1px solid #333333;
  background: #1c1c1c;
  color: var(--web-text);
  padding: 12px 14px;
  font: inherit;
  outline: none;
}

.web-field .form-control {
  border-color: #333333;
  background-color: #1c1c1c;
  color: var(--web-text);
}

.web-field .form-control::placeholder {
  color: #6f6f76;
}

.web-field .form-control.is-valid {
  border-color: rgba(24, 212, 90, 0.7);
  box-shadow: 0 0 0 3px rgba(24, 212, 90, 0.12);
}

.web-field .form-control.is-invalid {
  border-color: rgba(255, 87, 87, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.14);
}

.web-field textarea {
  min-height: 108px;
  resize: vertical;
}

.web-field input:focus,
.web-field textarea:focus,
.web-field select:focus {
  border-color: var(--web-accent);
  box-shadow: 0 0 0 3px rgba(255, 79, 25, 0.16);
}

.web-error,
.web-form .errorlist,
.web-client-error {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ff7961;
  font-size: 13px;
  line-height: 1.35;
}

.web-help {
  color: var(--web-muted);
  font-size: 13px;
}

.web-button {
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--web-accent);
  color: #ffffff;
  font-weight: 850;
  font-size: 15px;
  padding: 0 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.web-button:hover,
.web-button:focus {
  color: #ffffff;
  background: #ff673b;
}

.web-button.btn-primary,
.web-button.primary {
  background: #f3f3f5;
  border-color: rgba(255, 255, 255, 0.18);
  color: #121214;
}

.web-button.btn-primary:hover,
.web-button.btn-primary:focus,
.web-button.primary:hover,
.web-button.primary:focus {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  color: #121214;
}

.web-button.secondary {
  background: var(--web-accent);
  border-color: rgba(255, 93, 31, 0.5);
  color: #ffffff;
}

.web-button.secondary:hover,
.web-button.secondary:focus {
  background: #ff673b;
  border-color: rgba(255, 103, 59, 0.58);
  color: #ffffff;
}

.web-button.btn-outline-secondary,
.web-button.outline-secondary {
  background: transparent;
  border-color: rgba(255, 93, 31, 0.38);
  color: var(--web-accent);
}

.web-button.btn-outline-secondary:hover,
.web-button.btn-outline-secondary:focus,
.web-button.outline-secondary:hover,
.web-button.outline-secondary:focus {
  background: rgba(255, 93, 31, 0.08);
  border-color: rgba(255, 103, 59, 0.5);
  color: #ff8a67;
}

.web-button.outline-danger {
  background: transparent;
  border-color: rgba(255, 70, 90, 0.46);
  color: #ff5570;
}

.web-button.outline-danger:hover,
.web-button.outline-danger:focus {
  background: rgba(255, 70, 90, 0.08);
  border-color: rgba(255, 96, 114, 0.62);
  color: #ff7d91;
}

.web-button.btn-outline-primary,
.web-button.outline-primary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.33);
  color: #f3f3f5;
}

.web-button.btn-outline-primary:hover,
.web-button.btn-outline-primary:focus,
.web-button.outline-primary:hover,
.web-button.outline-primary:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

.web-button.btn-success,
.web-button.success {
  background: rgba(8, 53, 35, 0.9);
  border-color: rgba(43, 212, 109, 0.36);
  color: #2bd46d;
  box-shadow: inset 0 0 0 1px rgba(43, 212, 109, 0.08);
}

.web-button.btn-success:hover,
.web-button.btn-success:focus,
.web-button.success:hover,
.web-button.success:focus {
  background: rgba(10, 70, 43, 0.96);
  border-color: rgba(43, 212, 109, 0.48);
  color: #45ea82;
}

.web-button,
.web-account-nav a,
.web-card,
.web-metric,
.web-user-avatar {
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.web-button.is-pressed,
.web-account-nav a.is-pressed,
.web-card.is-pressed,
.web-metric.is-pressed,
.web-user-avatar.is-pressed {
  transform: scale(0.98);
}

.web-form.is-submitting,
.needs-validation.is-submitting {
  pointer-events: none;
  opacity: 0.82;
}

.web-actions {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.web-profile-edit-form {
  display: block;
  margin-top: 14px;
}

.web-profile-edit-layout > [class*="col-"] {
  display: flex;
}

.web-profile-edit-hero {
  border-color: rgba(255, 255, 255, 0.10);
}

.web-profile-edit-hero .web-profile-main h1 {
  font-size: 24px;
}

.web-profile-edit-hero .web-chip-row {
  margin-bottom: 10px;
}

.web-profile-edit-avatar {
  width: 96px;
  height: 96px;
  margin: 0;
  font-size: 34px;
}

.web-profile-edit-sidebar,
.web-profile-edit-form-shell,
.web-gallery-upload-card,
.web-gallery-list-card {
  width: 100%;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.web-profile-edit-sidebar-stack {
  display: grid;
  gap: 14px;
}

.web-profile-edit-sidebar,
.web-gallery-upload-card {
  display: grid;
  gap: 14px;
}

.web-profile-edit-sidebar:hover,
.web-profile-edit-form-shell:hover,
.web-gallery-upload-card:hover,
.web-gallery-list-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.web-profile-edit-sidebar .form-label,
.web-profile-edit-form-shell .form-label,
.web-gallery-upload-form .form-label {
  font-weight: 750;
  color: #f3f3f5;
}

.web-profile-edit-public-note {
  position: relative;
  margin: 12px 0 0;
}

.web-profile-edit-public-note input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

.web-profile-upload-trigger {
  min-height: 116px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  cursor: pointer;
}

.web-profile-upload-trigger strong,
.web-profile-upload-trigger small {
  display: block;
}

.web-profile-upload-trigger strong {
  color: #f1f1f4;
  font-size: 13px;
}

.web-profile-upload-trigger small {
  color: var(--web-muted);
  font-size: 12px;
}

.web-profile-upload-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 79, 25, 0.10);
  color: var(--web-accent);
  font-size: 18px;
}

.web-profile-edit-mini-panel {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.web-profile-edit-mini-panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.web-profile-edit-mini-note,
.web-profile-edit-inline-note {
  margin: 0;
  color: #b8b8bf;
  font-size: 12px;
  line-height: 1.45;
}

.web-profile-edit-account-card {
  display: grid;
  gap: 14px;
}

.web-profile-edit-form-shell {
  display: grid;
  gap: 18px;
}

.web-profile-edit-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.web-profile-edit-section-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.web-profile-edit-section-head p {
  margin: 4px 0 0;
  color: #b8b8bf;
  font-size: 13px;
  line-height: 1.45;
}

.web-profile-edit-section-head small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

.web-profile-edit-form-shell .form-text,
.web-profile-edit-sidebar .form-text,
.web-gallery-upload-form .form-text {
  color: rgba(255, 255, 255, 0.56) !important;
}

.web-profile-edit-footer {
  display: grid;
  gap: 14px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.web-profile-edit-footer p {
  margin: 0;
  color: #b8b8bf;
  font-size: 13px;
}

.web-profile-edit-actions {
  margin-top: 0;
}

.web-profile-edit-actions .web-button,
.web-profile-edit-hero-actions .web-button {
  width: 100%;
}

.web-link {
  color: var(--web-accent);
  text-decoration: none;
  font-weight: 800;
}

.web-alert {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 184, 0, 0.13);
  border: 1px solid rgba(255, 184, 0, 0.28);
  color: #ffd37a;
  margin-bottom: 14px;
}

.alert.web-alert {
  --bs-alert-padding-x: 12px;
  --bs-alert-padding-y: 12px;
  --bs-alert-margin-bottom: 14px;
  --bs-alert-border-radius: 12px;
  color: #ffd37a;
  background: rgba(255, 184, 0, 0.13);
  border-color: rgba(255, 184, 0, 0.28);
}

.web-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.web-metric {
  background: var(--web-card);
  border: 1px solid var(--web-line);
  border-radius: 8px;
  min-height: 80px;
  padding: 14px 8px;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 3px;
}

.web-metric strong {
  display: block;
  color: var(--web-accent);
  font-size: 16px;
  line-height: 1.15;
}

.web-metric span {
  display: block;
  color: var(--web-muted);
  font-size: 12px;
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 800;
}

.web-metric small {
  color: #c9c9cf;
  font-size: 12px;
}

.web-metric i {
  display: none;
}

.web-metric-active strong {
  color: var(--web-green);
}

.web-metric-bike strong,
.web-metric-bike i {
  color: #2f7dff;
}

.web-metric-ride strong,
.web-metric-ride i {
  color: var(--web-accent);
}

.web-metric-activity strong {
  color: var(--web-text);
}

.web-profile-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(12, 5, 3, 0.97) 0%, rgba(18, 8, 5, 0.88) 38%, rgba(7, 7, 9, 0.42) 100%),
    #070707;
  border: 1px solid rgba(255, 79, 25, 0.48);
  border-radius: var(--web-radius);
  padding: 26px 16px;
  text-align: center;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
}

.web-profile-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 4, 2, 0.96), rgba(12, 5, 3, 0.78) 36%, rgba(0, 0, 0, 0.20) 72%, rgba(0, 0, 0, 0.80)),
    url("/static/img/web/hero-2.png") right center / cover no-repeat;
  opacity: 0.94;
  pointer-events: none;
}

.web-profile-avatar-wrap,
.web-profile-main,
.web-profile-actions {
  position: relative;
  z-index: 1;
}

.web-profile-avatar-wrap {
  display: inline-grid;
  position: relative;
}

.web-profile-avatar {
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border: 2px solid rgba(255, 79, 25, 0.86);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 42px;
  font-weight: 900;
  box-shadow: 0 0 34px rgba(255, 79, 25, 0.24);
  filter: grayscale(0.15);
}

.web-profile-avatar-badge {
  position: absolute;
  right: 4px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--web-accent);
  color: #fff;
  border: 2px solid #1a0803;
  font-size: 14px;
}

.web-profile-hero h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.web-profile-hero p {
  margin: 6px 0 14px;
  color: var(--web-muted);
}

.web-profile-bio {
  max-width: 620px;
  margin: 14px auto 0 !important;
  color: #d4d4d8 !important;
}

.web-profile-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 16px;
  color: #b8b8bf;
  font-size: 13px;
}

.web-profile-meta span,
.web-benefit-meta-list span,
.web-member-profile-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.web-profile-meta i {
  color: #8e8e93;
  font-size: 15px;
}

.web-profile-actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.web-copy-button.is-copied {
  border-color: rgba(24, 212, 90, 0.62);
  color: var(--web-green);
}

.web-profile-stats-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background:
    linear-gradient(90deg, rgba(255, 79, 25, 0.10), transparent 34%, rgba(255, 255, 255, 0.03)),
    rgba(20, 20, 20, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.web-profile-stat {
  min-height: 82px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.web-profile-stat i {
  width: 40px;
  height: 40px;
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 10px;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  font-size: 23px;
}

.web-profile-stat span {
  color: var(--web-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.web-profile-stat strong {
  color: var(--web-text);
  font-size: 15px;
  line-height: 1.18;
}

.web-profile-stat-success i {
  background: rgba(24, 212, 90, 0.14);
  color: var(--web-green);
}

.web-profile-admin-card {
  margin-top: 14px;
  border-color: rgba(255, 79, 25, 0.25);
  padding: 0;
  overflow: hidden;
}

.web-profile-admin-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--web-line);
}

.web-profile-admin-title {
  font-weight: 700;
  font-size: 15px;
}

.web-profile-admin-title small {
  display: block;
  color: var(--web-muted);
  font-size: 12px;
  font-weight: 400;
}

.web-profile-admin-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.web-profile-admin-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.web-admin-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border: 1px solid rgba(255, 79, 25, 0.18);
}

.web-admin-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--web-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--web-accent);
  overflow: hidden;
  border: 2px solid rgba(255, 79, 25, 0.2);
  flex-shrink: 0;
}

.web-admin-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--web-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--web-accent);
  overflow: hidden;
  flex-shrink: 0;
}

.web-admin-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--web-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--web-accent);
  overflow: hidden;
  border: 2px solid rgba(255, 79, 25, 0.25);
  flex-shrink: 0;
}

.web-profile-admin-copy {
  flex: 1;
  min-width: 0;
}

.web-profile-admin-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.web-profile-admin-copy small {
  display: block;
  color: var(--web-muted);
  font-size: 12px;
}

.web-profile-admin-badge {
  flex-shrink: 0;
  background: var(--web-accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

@media (max-width: 767px) {
  .web-admin-col:not(:last-child) a { border-bottom: 1px solid var(--web-line); }
}

/* Admin dashboard page */
.web-admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--web-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.web-admin-tabs::-webkit-scrollbar { display: none; }

.web-admin-tab-link {
  color: white;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--web-radius);
  background: var(--web-surface);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  opacity: 0.6;
  border: 1px solid transparent;
  transition: background 0.15s ease, opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.web-admin-tab-link:hover {
  opacity: 1;
  background: var(--web-surface-2);
  color: white;
}
.web-admin-tab-link.active {
  opacity: 1;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border-color: rgba(255, 79, 25, 0.3);
}

.web-admin-tab-badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--web-accent);
  color: #000;
  font-weight: 800;
}

.web-admin-empty-state {
  padding: 4rem 2rem;
  text-align: center;
}
.web-admin-empty-state i {
  color: var(--web-accent);
  opacity: 0.2;
}
.web-admin-empty-state h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.custom-check .form-check-input {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}
.custom-check .form-check-input:checked {
  background-color: var(--web-accent);
  border-color: var(--web-accent);
}
.custom-check .form-check-label {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
}

.web-admin-stat { text-align: center; }
.web-admin-stat strong { display: block; font-size: 22px; font-weight: 900; line-height: 1.1; }
.web-admin-stat span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--web-muted);
  margin-top: 4px;
  display: block;
}

.web-admin-section-title { font-size: 22px; margin: 0; font-weight: 700; }
.web-admin-panel-title { font-size: 18px; margin: 0; font-weight: 700; }
.web-admin-item-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.web-admin-accent { color: var(--web-accent); }
.web-admin-meta-label { color: var(--web-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.web-admin-box {
  background: var(--web-surface-2);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
}

.web-admin-divider { border-top: 1px solid var(--web-line); margin: 1.25rem 0; }
.web-admin-border-top { border-top: 1px solid var(--web-line); }
.web-admin-border-bottom { border-bottom: 1px solid var(--web-line); }

.web-admin-switch-wrap {
  background: var(--web-surface-2);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding-left: 3rem !important;
}

.web-admin-icon-xs { font-size: 0.7rem; }

/* Admin member detail page */
.admin-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.admin-section-icon {
  width: 36px;
  height: 36px;
  background: var(--web-accent-soft);
  border-radius: var(--web-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--web-accent);
  flex-shrink: 0;
}
.admin-section-icon.danger {
  background: rgba(220, 53, 69, 0.08);
  color: #ff5570;
}
.admin-section-label strong { display: block; font-size: 0.95rem; font-weight: 700; }
.admin-section-label span { font-size: 0.8rem; color: var(--web-muted); }

.membership-option {
  background: var(--web-surface-2);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.membership-option:hover { border-color: rgba(255, 79, 25, 0.35); }
.membership-option.active { border-color: var(--web-accent); background: var(--web-accent-soft); }
.membership-option strong { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
.membership-option span { font-size: 0.78rem; color: var(--web-muted); }

.admin-info-row {
  background: var(--web-surface-2);
  border-radius: var(--web-radius);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.admin-info-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--web-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  flex-shrink: 0;
}

.mod-type-btn {
  flex: 1;
  background: var(--web-surface-2);
  border: 1px solid var(--web-line);
  color: var(--web-muted);
  padding: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.mod-type-btn:first-child { border-radius: var(--web-radius) 0 0 var(--web-radius); }
.mod-type-btn:last-child { border-radius: 0 var(--web-radius) var(--web-radius) 0; }
.mod-type-btn.active { background: rgba(255, 193, 7, 0.1); color: #ffc107; border-color: rgba(255, 193, 7, 0.4); }

.rest-option {
  background: var(--web-surface-2);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.rest-option strong { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; }
.rest-option span { font-size: 0.78rem; color: var(--web-muted); display: block; }
.rest-option.active { background: rgba(220, 53, 69, 0.06); border-color: rgba(220, 53, 69, 0.5); }
.rest-option.active strong { color: #ff5570; }
.rest-option.active span { color: rgba(255, 85, 112, 0.75); }

.web-admin-form-control {
  background: var(--web-surface-2);
  border-color: var(--web-line);
  color: white;
}
.web-admin-form-control:focus {
  background: var(--web-surface-2);
  border-color: rgba(255, 79, 25, 0.5);
  color: white;
  box-shadow: none;
}
textarea.web-admin-form-control { resize: none; }
.web-admin-form-control.is-danger { border-color: rgba(220, 53, 69, 0.3); }

.web-admin-outline { border: 1px solid var(--web-line); }
.web-danger-text { color: #ff5570; }
.web-panel.is-danger { border-color: rgba(220, 53, 69, 0.22); }

.web-button.warning {
  background: #c9930a;
  border-color: #c9930a;
  color: #000;
}
.web-button.danger {
  background: #c0293b;
  border-color: #c0293b;
  color: white;
}

.web-chip.is-danger {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.12);
  color: #ff5570;
}

@media (min-width: 768px) {
  .web-admin-col:not(:last-child) a { border-right: 1px solid var(--web-line); }
}

.web-profile-preview-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.web-profile-secondary-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.web-profile-preview-card {
  min-height: 182px;
  overflow: hidden;
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background:
    linear-gradient(120deg, rgba(255, 79, 25, 0.08), transparent 46%),
    rgba(20, 20, 20, 0.94);
  padding: 18px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.web-onboarding-card {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.62)),
    url("/static/img/web/hero-map.png") center center / auto 100% repeat-x,
    rgba(20, 20, 20, 0.96);
}

.web-onboarding-card.is-complete {
  border-color: rgba(24, 212, 90, 0.2);
  background:
    linear-gradient(135deg, rgba(11, 43, 24, 0.92), rgba(6, 18, 10, 0.88)),
    url("/static/img/web/hero-map.png") center center / auto 100% repeat-x,
    rgba(10, 24, 14, 0.96);
}

.web-profile-card-heading,
.web-benefits-hero-head,
.web-member-admin-copy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.web-profile-card-heading h2,
.web-profile-card-title-row h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.web-profile-card-heading p,
.web-profile-preview-card p {
  margin: 5px 0 0;
  color: #c9c9cf;
  font-size: 13px;
}

.web-progress-track {
  height: 7px;
  margin: 22px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.web-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--web-accent);
}

.web-onboarding-card.is-complete .web-progress-track {
  background: rgba(24, 212, 90, 0.16);
}

.web-onboarding-card.is-complete .web-progress-track span {
  background: var(--web-green);
}

.web-onboarding-card.is-complete .web-profile-card-heading p,
.web-onboarding-card.is-complete > p {
  color: #dbf5e4;
}

.web-onboarding-card.is-complete > a {
  color: var(--web-green);
}

.web-onboarding-card > a,
.web-profile-card-title-row a {
  color: var(--web-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
}

.web-onboarding-card > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}

.web-profile-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.web-profile-card-title-row a {
  color: #a9a9af;
  white-space: nowrap;
}

.web-badge-preview-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.web-badge-preview {
  min-width: 0;
  text-align: center;
}

.web-badge-preview img {
  width: min(78px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.web-badge-preview.is-locked img {
  filter: grayscale(1) brightness(0.62);
  opacity: 0.72;
}

.web-badge-preview strong,
.web-badge-preview span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-badge-preview strong {
  color: var(--web-accent);
  font-size: 11px;
  text-transform: uppercase;
}

.web-badge-preview.is-locked strong {
  color: #b8b8bf;
}

.web-badge-preview span {
  margin-top: 4px;
  color: var(--web-muted);
  font-size: 11px;
}

.web-badges-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 12px 0 24px;
}

.web-badges-page-actions {
  display: flex;
  justify-content: flex-end;
}

.web-badges-summary-card {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.web-badges-summary-metrics,
.web-benefits-stats-grid,
.web-rides-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.web-badges-summary-metric {
  display: grid;
  gap: 6px;
  padding: 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.web-badges-summary-metric strong {
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}

.web-badges-summary-metric span {
  color: var(--web-muted);
  font-size: 12px;
}

.web-badges-summary-copy strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.web-badges-summary-copy p {
  margin: 0;
  color: var(--web-muted);
  line-height: 1.6;
}

.web-badge-sections {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.web-badge-section-card {
  display: grid;
  gap: 18px;
}

.web-badge-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.web-badge-section-title {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.web-badge-section-title h2 {
  margin: 0;
  font-size: 22px;
}

.web-badge-section-title p {
  margin: 6px 0 0;
  color: var(--web-muted);
  line-height: 1.55;
}

.web-badge-section-progress {
  width: min(240px, 100%);
  display: grid;
  gap: 10px;
}

.web-badge-section-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.web-badge-section-progress-copy strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
}

.web-badge-section-progress-copy span {
  color: var(--web-muted);
  font-size: 12px;
  font-weight: 800;
}

.web-badge-section-progressbar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.web-badge-section-progressbar .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5d1f 0%, #ff8a4e 100%);
}

.web-badge-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.web-badge-catalog-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.web-badge-catalog-card.is-locked {
  background: rgba(255, 255, 255, 0.02);
}

.web-badge-catalog-card.is-under-review {
  border-color: rgba(255, 184, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 0, 0.06);
}

.web-badge-catalog-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}

.web-badge-catalog-card.is-locked .web-badge-catalog-media img {
  filter: grayscale(1) brightness(0.36) contrast(0.92);
  opacity: 0.62;
}

.web-badge-catalog-copy {
  min-width: 0;
}

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

.web-badge-catalog-top h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.web-badge-catalog-card.is-locked .web-badge-catalog-top h3 {
  color: #b8b8bf;
}

.web-badge-catalog-copy p {
  margin: 8px 0 0;
  color: #d4d4d9;
  line-height: 1.55;
}

.web-badge-catalog-card.is-locked .web-badge-catalog-copy p {
  color: #a8a8af;
}

.web-badge-catalog-meta {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.web-badge-catalog-meta span {
  display: inline-flex;
  align-items: start;
  gap: 8px;
  color: var(--web-muted);
  font-size: 13px;
  line-height: 1.45;
}

.web-gallery-preview-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.web-gallery-manage-note {
  margin: -6px 0 14px !important;
  color: var(--web-muted) !important;
  font-size: 12px !important;
}

.web-gallery-preview-list img,
.web-gallery-empty {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #090909;
}

.web-gallery-preview-list img {
  object-fit: cover;
}

.web-gallery-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 106px;
  color: var(--web-muted);
  text-align: center;
}

.web-gallery-empty i {
  color: var(--web-accent);
  font-size: 28px;
}

.web-gallery-note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px !important;
  color: var(--web-muted) !important;
  font-size: 12px !important;
}

.web-gallery-modal {
  max-width: 100%;
}

.web-gallery-modal .modal-content {
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 79, 25, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(17, 7, 4, 0.96), rgba(7, 7, 9, 0.98));
}

.web-gallery-manager-modal .modal-header,
.web-gallery-manager-modal .modal-footer {
  background: rgba(13, 10, 11, 0.88);
}

.web-gallery-modal-head p {
  max-width: 520px;
}

.web-gallery-modal-layout {
  align-items: stretch;
}

.web-gallery-modal-chips {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 0;
}

.web-gallery-upload-card {
  position: sticky;
  top: 0;
}

.web-gallery-upload-card p,
.web-gallery-list-head p {
  color: #b8b8bf;
  font-size: 13px;
  line-height: 1.5;
}

.web-gallery-upload-form {
  display: grid;
  gap: 16px;
}

.web-gallery-upload-form .web-button {
  width: 100%;
}

.web-gallery-selection {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.web-gallery-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.web-gallery-selection-item {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.26);
}

.web-gallery-selection-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.web-gallery-selection-item figcaption {
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

.web-gallery-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.web-gallery-list-head h3,
.web-benefits-sidebar-head h3,
.web-member-admin-copy h2 {
  margin: 0;
  font-size: 18px;
}

.web-gallery-list-head p {
  margin: 4px 0 0;
}

.web-gallery-list-body {
  display: grid;
  gap: 16px;
}

.web-gallery-manager-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.web-gallery-manager-card:hover {
  border-color: rgba(255, 79, 25, 0.22);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.web-gallery-manager-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #090909;
}

.web-gallery-manager-copy {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.web-gallery-manager-copy strong {
  display: block;
  color: #f3f3f6;
  font-size: 14px;
}

.web-gallery-manager-copy span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
}

.web-gallery-manager-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.5;
}

.web-gallery-manager-copy .web-button {
  min-height: 44px;
  width: 100%;
  border-radius: 12px;
  font-weight: 700;
}

.web-gallery-manager-copy form {
  margin: 0;
}

.web-gallery-manager-copy .web-button {
  min-width: 0;
}

/* Gallery card – image wrapper with hidden badge */
.web-gallery-img-wrap {
  position: relative;
  line-height: 0;
}

.web-gallery-manager-card.is-hidden {
  opacity: 0.55;
  border-color: rgba(255, 255, 255, 0.05);
}

.web-gallery-manager-card.is-hidden img {
  filter: grayscale(0.4);
}

.web-gallery-hidden-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: var(--web-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

/* Card meta row (title + likes btn) */
.web-gallery-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* Likes button */
.web-gallery-likes-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 79, 25, 0.28);
  background: rgba(255, 79, 25, 0.10);
  color: var(--web-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.web-gallery-likes-btn:hover {
  background: rgba(255, 79, 25, 0.18);
  border-color: rgba(255, 79, 25, 0.50);
}

.web-gallery-likes-btn i {
  font-size: 11px;
}

/* Caption */
.web-gallery-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.5;
}

/* Card action row (edit + delete) */
.web-gallery-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.web-gallery-card-actions .web-gallery-edit-toggle {
  flex: 1 1 auto;
}

.web-gallery-card-actions .web-gallery-edit-toggle.is-active {
  background: var(--web-accent-soft);
  border-color: rgba(255, 79, 25, 0.40);
  color: var(--web-accent);
}

/* Inline edit form */
.web-gallery-edit-form {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 4px;
  animation: webReveal 200ms ease both;
}

.web-gallery-edit-field {
  display: grid;
  gap: 4px;
}

.web-gallery-edit-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--web-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.web-gallery-edit-field input,
.web-gallery-edit-field select {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--web-line);
  background: rgba(0, 0, 0, 0.30);
  color: var(--web-text);
  font-size: 13px;
  outline: none;
  transition: border-color 160ms ease;
}

.web-gallery-edit-field input:focus,
.web-gallery-edit-field select:focus {
  border-color: rgba(255, 79, 25, 0.45);
}

.web-gallery-edit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.web-gallery-edit-actions {
  display: flex;
  gap: 8px;
}

/* Likes modal list */
.web-gallery-likes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.web-gallery-likes-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.web-gallery-likes-item:last-child {
  border-bottom: none;
}

.web-gallery-likes-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--web-accent-soft);
  display: grid;
  place-items: center;
}

.web-gallery-likes-initial {
  font-size: 16px;
  font-weight: 700;
  color: var(--web-accent);
}

.web-gallery-likes-info {
  display: grid;
  gap: 2px;
}

.web-gallery-likes-info strong {
  font-size: 14px;
  color: var(--web-text);
}

.web-gallery-likes-info small {
  font-size: 12px;
  color: var(--web-muted);
}

.web-profile-info-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.20);
}

.web-profile-info-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.web-profile-info-row:first-child {
  border-top: 0;
}

.web-profile-info-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c9c9cf;
  font-size: 12px;
}

.web-profile-info-label i {
  width: 18px;
  text-align: center;
  color: #9a9aa1;
}

.web-profile-info-value {
  color: var(--web-text);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-garage-card .web-help {
  margin: 0 0 14px;
}

.web-garage-grid {
  display: grid;
  grid-template-columns: clamp(160px, 42%, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.web-garage-media img,
.web-garage-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #090909;
}

.web-garage-media img {
  object-fit: cover;
}

.web-garage-placeholder {
  display: grid;
  place-items: center;
  color: var(--web-accent);
  font-size: 34px;
}

.web-garage-add {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 79, 25, 0.36);
  background: rgba(255, 79, 25, 0.10);
  color: var(--web-accent);
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
}

.web-garage-add:hover,
.web-garage-add:focus {
  color: var(--web-accent);
  border-color: rgba(255, 79, 25, 0.60);
  background: rgba(255, 79, 25, 0.14);
}

.web-garage-kicker {
  display: inline-block;
  color: var(--web-muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 850;
}

.web-garage-panel {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.32);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-width: 0;
}

.web-garage-info {
  flex: 1;
}

.web-garage-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(24, 212, 90, 0.28);
  background: rgba(24, 212, 90, 0.12);
  color: var(--web-green);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.web-garage-title {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-garage-sub {
  margin: 6px 0 0;
  color: #c9c9cf;
  font-size: 13px;
}

.web-garage-docs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
}

.web-garage-docs-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 79, 25, 0.22);
  background: rgba(255, 79, 25, 0.10);
  color: var(--web-accent);
  font-size: 18px;
}

.web-garage-docs strong {
  display: block;
  color: #ffd37a;
  font-size: 13px;
}

.web-garage-docs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--web-accent);
  text-decoration: none;
  font-weight: 850;
  font-size: 13px;
}

.web-garage-actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.web-garage-btn {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #cfcfd6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 850;
  font-size: 13px;
  white-space: nowrap;
  flex: 1 1 140px;
}

.web-garage-btn:hover,
.web-garage-btn:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.web-garage-btn-primary {
  border-color: rgba(255, 79, 25, 0.46);
  background: rgba(255, 79, 25, 0.10);
  color: var(--web-accent);
}

.web-garage-btn-primary:hover,
.web-garage-btn-primary:focus {
  background: rgba(255, 79, 25, 0.14);
  border-color: rgba(255, 79, 25, 0.68);
  color: var(--web-accent);
}

.web-safety-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 14px;
}

.web-safety-pill {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.26);
  border-radius: 8px;
  padding: 10px 10px;
  text-align: center;
}

.web-safety-pill strong {
  display: block;
  font-size: 13px;
  line-height: 1.15;
}

.web-safety-pill span {
  display: block;
  margin-top: 4px;
  color: var(--web-muted);
  font-size: 11px;
}

.web-safety-pill.is-ok strong {
  color: var(--web-green);
}

.web-safety-pill.is-warn strong {
  color: #ffb100;
}

.web-safety-pill.is-bad strong {
  color: #ff4d4d;
}

.web-safety-actions {
  display: grid;
  gap: 12px;
}

.web-safety-action {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  text-decoration: none;
  color: var(--web-text);
}

.web-safety-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
}

.web-safety-action strong,
.web-safety-action small {
  display: block;
}

.web-safety-action small {
  color: var(--web-muted);
  margin-top: 2px;
}

.web-safety-action i.fa-chevron-right {
  color: var(--web-muted);
}

.web-community-bar {
  margin-top: 14px;
  border-radius: var(--web-radius);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(90deg, rgba(255, 79, 25, 0.10), transparent 34%, rgba(255, 255, 255, 0.03)),
    rgba(12, 12, 12, 0.72);
  padding: 16px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.web-community-bar-head h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.2;
}

.web-community-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.web-community-actions::-webkit-scrollbar {
  height: 0;
}

.web-community-action {
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  color: var(--web-text);
  text-decoration: none;
  min-width: 210px;
}

.web-community-action:hover,
.web-community-action:focus {
  color: var(--web-text);
  border-color: rgba(255, 79, 25, 0.35);
  background: rgba(0, 0, 0, 0.28);
}

.web-community-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
  border: 1px solid rgba(255, 79, 25, 0.18);
  font-size: 18px;
}

.web-community-action strong,
.web-community-action small {
  display: block;
}

.web-community-action strong {
  font-size: 13px;
  line-height: 1.2;
}

.web-community-action small {
  margin-top: 2px;
  color: var(--web-muted);
  font-size: 12px;
  line-height: 1.2;
}

.web-community-action i.fa-chevron-right {
  color: var(--web-muted);
  font-size: 12px;
}

.web-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.web-chip {
  border: 1px solid var(--web-line-hot);
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.web-chip.is-neutral {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f6;
}

.web-chip.is-warning {
  border-color: rgba(255, 184, 0, 0.35);
  background: rgba(255, 184, 0, 0.12);
  color: #ffcb47;
}

.web-chip.is-success {
  border-color: rgba(24, 212, 90, 0.28);
  background: rgba(24, 212, 90, 0.12);
  color: #4ae583;
}

.web-detail-list {
  display: grid;
  gap: 14px;
}

.web-detail-list > div {
  background: var(--web-card);
  border: 1px solid var(--web-line);
  border-radius: 12px;
  padding: 12px;
}

.web-detail-list span {
  display: block;
  color: var(--web-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.web-detail-list strong {
  color: var(--web-text);
}

.web-action-list {
  display: grid;
  gap: 12px;
}

.web-dashboard-shortcut-heading {
  margin-bottom: 14px;
}

.web-dashboard-feature-grid {
  display: grid;
  gap: 12px;
}

.web-dashboard-feature-grid > *,
.web-dashboard-feature-side > * {
  min-width: 0;
}

.web-dashboard-feature-side {
  display: grid;
  gap: 12px;
}

.web-dashboard-shortcut-grid {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
  align-items: stretch;
}

.web-dashboard-shortcut-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
}

.web-dashboard-shortcut-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.04) 44%, transparent 100%),
    radial-gradient(circle at 18% 50%, var(--shortcut-glow, rgba(255, 255, 255, 0.08)) 0, transparent 58%);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.web-dashboard-shortcut-card:hover,
.web-dashboard-shortcut-card:focus {
  color: var(--web-text);
  border-color: var(--web-line-hot);
  background: #090909;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.web-dashboard-shortcut-card:hover::before,
.web-dashboard-shortcut-card:focus::before {
  opacity: 1;
}
.web-dashboard-shortcut-card.is-accent:hover .web-dashboard-shortcut-arrow,
.web-dashboard-shortcut-card.is-accent:focus .web-dashboard-shortcut-arrow{
  color: var(--web-white);
}

.web-dashboard-shortcut-card.is-accent {
  border-color: rgba(255, 93, 31, 0.32);
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 79, 25, 0.2), transparent 36%),
    linear-gradient(180deg, #ff5d1f, #ff4f19);
  box-shadow: 0 14px 30px rgba(255, 79, 25, 0.18);
  --shortcut-glow: rgba(255, 79, 25, 0.28);
}

.web-dashboard-shortcut-card.is-accent:hover,
.web-dashboard-shortcut-card.is-accent:focus {
  border-color: rgba(255, 93, 31, 0.42);
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 79, 25, 0.2), transparent 36%),
    linear-gradient(180deg, #ff5d1f, #ff4f19);
  box-shadow: 0 18px 40px rgba(255, 79, 25, 0.28);
}

.web-dashboard-shortcut-card.is-accent .web-dashboard-shortcut-icon {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
}

.web-dashboard-shortcut-card.is-accent .web-dashboard-shortcut-copy small,
.web-dashboard-shortcut-card.is-accent .web-dashboard-shortcut-arrow {
  color: rgba(var(--web-white-rgb), 0.88);
}

.web-icon-base {
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.web-dashboard-shortcut-icon {
  width: 42px;
  height: 42px;
  align-self: flex-start;
}

.web-dashboard-shortcut-card:hover .web-dashboard-shortcut-icon,
.web-dashboard-shortcut-card:focus .web-dashboard-shortcut-icon {
  transform: scale(1.06);
  border-color: var(--web-line-hot);
  box-shadow: 0 0 0 4px rgba(255, 79, 25, 0.08);
}

.web-dashboard-shortcut-card-green .web-dashboard-shortcut-icon {
  color: #29d36a;
  --shortcut-glow: rgba(41, 211, 106, 0.2);
}

.web-dashboard-shortcut-card-orange .web-dashboard-shortcut-icon {
  color: #ff7b35;
  --shortcut-glow: rgba(255, 123, 53, 0.2);
}

.web-dashboard-shortcut-card-red .web-dashboard-shortcut-icon {
  color: #ff5f57;
  --shortcut-glow: rgba(255, 95, 87, 0.2);
}

.web-dashboard-shortcut-card-blue .web-dashboard-shortcut-icon {
  color: #3d8bff;
  --shortcut-glow: rgba(61, 139, 255, 0.2);
}

.web-dashboard-shortcut-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.web-dashboard-shortcut-copy.full-width{
  grid-column: 1 / 4;
}

.web-dashboard-shortcut-copy strong,
.web-dashboard-shortcut-copy small {
  display: block;
  transition: color 180ms ease, transform 180ms ease;
}

.web-dashboard-shortcut-card:hover .web-dashboard-shortcut-copy strong,
.web-dashboard-shortcut-card:focus .web-dashboard-shortcut-copy strong {
  color: #ffffff;
  transform: translateX(1px);
}

.web-dashboard-shortcut-card:hover .web-dashboard-shortcut-copy small,
.web-dashboard-shortcut-card:focus .web-dashboard-shortcut-copy small {
  color: rgba(255, 255, 255, 0.72);
}

.web-dashboard-shortcut-arrow {
  color: #8a8d96;
  justify-self: end;
  align-self: center;
  font-size: 18px;
  transition: transform 180ms ease, color 180ms ease;
}

.web-dashboard-shortcut-card:hover .web-dashboard-shortcut-arrow,
.web-dashboard-shortcut-card:focus .web-dashboard-shortcut-arrow {
  color: var(--web-line-hot);
  transform: translateX(3px);
}

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

  .web-dashboard-social-card,
  .web-dashboard-social-card::before,
  .web-dashboard-social-icon,
  .web-dashboard-social-copy strong,
  .web-dashboard-social-copy small,
  .web-dashboard-social-arrow,
  .web-dashboard-shortcut-card,
  .web-dashboard-shortcut-card::before,
  .web-dashboard-shortcut-icon,
  .web-dashboard-shortcut-copy strong,
  .web-dashboard-shortcut-copy small,
  .web-dashboard-shortcut-arrow {
    transition: none;
  }

  .web-dashboard-social-card:hover,
  .web-dashboard-social-card:focus,
  .web-dashboard-shortcut-card:hover,
  .web-dashboard-shortcut-card:focus {
    transform: none;
  }
}


@media (min-width: 1280px) {
  .web-dashboard-shortcut-col {
    flex: 0 0 auto;
    width: 14.285714%;
  }
}

.web-action-card {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 14px;
  background: var(--web-card);
  border: 1px solid var(--web-line);
  border-radius: 14px;
  color: var(--web-text);
  text-decoration: none;
}

.web-action-card:hover,
.web-action-card:focus {
  color: var(--web-text);
  border-color: var(--web-line-hot);
  background: #090909;
}

.web-action-card-accent {
  border-color: var(--web-line-hot);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 79, 25, 0.16), transparent 36%),
    var(--web-card);
}

.web-action-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  overflow: hidden;
}

.web-action-card strong,
.web-action-card small {
  display: block;
}

.web-action-card small {
  color: var(--web-muted);
  margin-top: 3px;
}

.web-action-arrow {
  color: var(--web-muted);
  font-size: 26px;
  line-height: 1;
}

.web-benefits-shell {
  margin-top: 18px;
}

.web-benefits-hero-card,
.web-benefits-summary-panel,
.web-benefits-results-panel,
.web-benefits-featured-panel {
  overflow: hidden;
}

.web-benefits-hero-card {
  padding: 28px;
  border-color: rgba(255, 99, 51, 0.22);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 93, 31, 0.18) 0, rgba(255, 93, 31, 0.18) 108px, transparent 109px),
    radial-gradient(circle at 10% 100%, rgba(255, 140, 74, 0.10) 0, rgba(255, 140, 74, 0.10) 160px, transparent 161px),
    linear-gradient(180deg, rgba(20, 20, 22, 0.98), rgba(17, 17, 18, 0.98));
}

.web-benefits-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 184, 0, 0.32);
  background: rgba(255, 184, 0, 0.10);
  color: #ffb000;
  font-size: 12px;
  font-weight: 850;
}

.web-benefits-copy h1,
.web-benefits-copy h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.03;
}

.web-benefits-copy p {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--web-muted);
  line-height: 1.65;
}

.web-benefits-search-panel {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(10px);
}

.web-benefits-input-group .input-group-text {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--web-muted);
}

.web-benefits-search-panel .form-control,
.web-benefits-search-panel .form-select {
  min-height: 52px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.web-benefits-search-panel .form-control:focus,
.web-benefits-search-panel .form-select:focus {
  border-color: rgba(255, 93, 31, 0.42);
  box-shadow: 0 0 0 0.18rem rgba(255, 93, 31, 0.12);
}

.web-benefits-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.web-benefits-summary-panel {
  display: grid;
  gap: 18px;
  min-height: 100%;
  padding: 28px;
  background:
    radial-gradient(circle at 84% 0%, rgba(255, 93, 31, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 17, 18, 0.98), rgba(13, 13, 15, 0.98));
}

.web-benefits-stat-card {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 8, 10, 0.9);
  text-align: center;
}

.web-benefits-stat-card strong {
  color: var(--web-text);
  font-size: 30px;
  line-height: 1;
}

.web-benefits-stat-card span {
  color: var(--web-muted);
  font-size: 13px;
  line-height: 1.4;
}

.web-benefits-summary-note {
  margin: 0;
  color: var(--web-muted);
  font-size: 14px;
  line-height: 1.55;
}

.web-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.web-benefit-card,
.web-business-card,
.web-empty-card {
  position: relative;
  background: linear-gradient(180deg, rgba(21, 21, 23, 0.98), rgba(18, 18, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  color: var(--web-text);
  overflow: hidden;
}

.web-benefit-card::before,
.web-business-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--benefit-card-accent, var(--web-accent));
  opacity: 0.9;
}

.web-empty-card {
  padding: 24px;
  min-height: 180px;
}

.web-empty-card strong {
  display: block;
  font-size: 20px;
}

.web-empty-card p {
  margin-top: 10px;
}

.web-benefit-media {
  position: relative;
}

.web-benefit-image {
  height: 220px;
  object-fit: cover;
  background: #0a0a0a;
}

.web-benefit-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.58) 100%);
}

.web-benefit-media-top {
  position: absolute;
  inset: 16px 16px auto 16px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.web-benefit-surface-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7, 7, 9, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.web-benefit-surface-badge.is-hot {
  background: rgba(108, 65, 13, 0.78);
  border-color: rgba(255, 184, 0, 0.2);
  color: #ffcf5d;
}

.web-benefit-value-pill {
  position: absolute;
  inset: auto 16px 16px auto;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(9, 9, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}

.web-benefit-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.web-benefit-card .card-body,
.web-business-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.web-benefit-card-partner,
.web-benefit-partner-summary,
.web-map-member-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.web-benefit-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f4f4f6;
  font-size: 13px;
  font-weight: 800;
}

.web-benefit-card-partner small,
.web-business-heading small {
  display: block;
  margin-top: 4px;
  color: var(--web-muted);
}

.web-benefit-card h3,
.web-business-card h3 {
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
}

.web-benefit-card p,
.web-business-card p {
  margin: 0;
  color: #d1d1d7;
  line-height: 1.58;
}

.web-benefit-partner-tagline {
  color: var(--web-accent);
  font-size: 15px;
  font-weight: 800;
}

.web-benefit-meta-list {
  display: grid;
  gap: 8px;
  color: var(--web-muted);
  font-size: 13px;
}

.web-benefit-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.web-benefit-card-actions .web-button {
  min-height: 42px;
  padding-inline: 14px;
}

.web-benefits-results-panel,
.web-benefits-featured-panel {
  padding: 24px;
}

.web-benefit-pane-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.web-benefit-pane-head h2 {
  margin: 0;
  font-size: 28px;
}

.web-benefit-pane-head p {
  margin: 8px 0 0;
  color: var(--web-muted);
}

.web-benefit-pane-count {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--web-muted);
  font-size: 13px;
  white-space: nowrap;
}

.web-benefit-pane-count strong {
  color: var(--web-text);
  margin-inline: 5px;
}

.web-benefit-filter-row {
  margin-bottom: 18px;
}

.web-benefit-load-more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.web-benefit-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: #0a0a0a;
  border: 1px solid var(--web-line);
}

.web-benefit-tabs .nav-item {
  min-width: 0;
}

.web-benefit-tabs .nav-link {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  color: var(--web-muted);
  font-weight: 850;
  border: 0;
}

.web-benefit-tabs .nav-link.active {
  background: var(--web-accent);
  color: #ffffff;
}

.web-benefit-tab-content .tab-pane {
  animation: webReveal 220ms ease both;
}

.web-business-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.web-benefits-hero-band {
  padding: 28px 30px;
  border-color: rgba(255, 99, 51, 0.24);
  background:
    linear-gradient(90deg, rgba(22, 22, 24, 0.97) 0%, rgba(22, 22, 24, 0.94) 53%, rgba(22, 22, 24, 0.52) 76%, rgba(22, 22, 24, 0.14) 100%),
    url("/static/img/web/hero-2.png") center right / cover no-repeat;
}

.web-benefits-hero-copy {
  display: grid;
  gap: 18px;
}

.web-benefits-hero-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 93, 31, 0.32);
  background: rgba(255, 93, 31, 0.12);
  color: var(--web-accent);
  font-size: 24px;
}

.web-benefits-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 6px;
}

.web-benefits-hero-point {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.web-benefits-hero-point strong {
  display: block;
  margin: 0 0 4px;
  font-size: 17px;
}

.web-benefits-hero-point small {
  color: var(--web-muted);
  font-size: 13px;
  line-height: 1.45;
}

.web-benefits-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  height: 100%;
  align-content: center;
}

.web-benefits-hero-metric {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 10px 12px;
  min-height: 184px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(15, 15, 17, 0.92), rgba(10, 10, 12, 0.94));
  backdrop-filter: blur(4px);
  text-align: center;
}

.web-benefits-hero-metric .web-action-icon {
  grid-column: 1;
  grid-row: 1;
}

.web-benefits-hero-metric strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 44px;
  line-height: 0.95;
}

.web-benefits-hero-metric p {
  grid-column: 1 / -1;
  margin: 0;
  color: #d1d1d7;
  font-size: 16px;
  line-height: 1.5;
  max-width: 200px;
}

.web-benefits-directory-layout {
  margin-top: 22px;
}

.web-benefits-sidebar {
  display: grid;
  gap: 18px;
}

.web-benefits-sidebar-card {
  padding: 20px;
}

.web-benefits-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.web-benefits-sidebar-head a {
  color: var(--web-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.web-benefits-sidebar-list,
.web-benefits-sidebar-stack {
  display: grid;
  gap: 12px;
}

.web-benefits-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  color: #d6d6db;
  text-decoration: none;
}

.web-benefits-sidebar-item strong {
  color: #ffffff;
  font-size: 14px;
}

.web-benefits-sidebar-empty {
  color: var(--web-muted);
  font-size: 14px;
  line-height: 1.5;
}

.web-benefits-mini-card {
  display: grid;
  gap: 10px;
}

.web-benefits-mini-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.web-benefits-mini-head strong {
  display: block;
  font-size: 15px;
}

.web-benefits-mini-head small {
  color: var(--web-muted);
  line-height: 1.45;
}

.web-benefit-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.web-benefit-toolbar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.web-benefit-filter-toggle {
  min-width: 120px;
}

.web-benefit-advanced-filters {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.web-benefit-pane-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--web-muted);
  font-size: 14px;
}

.web-benefit-card h3,
.web-business-card h3 {
  font-size: 22px;
}

.web-benefit-image {
  height: 182px;
}

.web-benefit-card-actions .web-button {
  flex: 1 1 150px;
}

.web-business-card p {
  color: #c8c8cf;
}

.web-business-chips {
  justify-content: flex-start;
  margin-bottom: 0;
}

.web-footer {
  width: 100%;
  margin-top: 28px;
  padding: 28px 14px;
  color: var(--web-text);
  border-top: 1px solid rgba(255, 79, 25, 0.35);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(10, 10, 10, 0.80) 48%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.04)),
    url("/static/img/web/home-bkg.png") left bottom / auto 180px repeat-x,
    #030303;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 -18px 60px rgba(0, 0, 0, 0.38);
}

.web-footer-inner {
  width: min(100% - 28px, var(--web-max));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-footer-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-footer-brand {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 18px;
}

.web-footer-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.web-footer-brand strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.web-footer-brand p {
  margin: 4px 0 0;
  color: #c9c9cf;
  line-height: 1.45;
}

.web-footer-brand p span {
  color: var(--web-accent);
  font-weight: 850;
}

.web-footer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.web-footer-stats div {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 10px;
  text-align: left;
}

.web-footer-stats i {
  color: var(--web-accent);
  font-size: 30px;
  line-height: 1;
}

.web-footer-stats span {
  color: #c9c9cf;
  font-size: 12px;
}

.web-footer-stats strong {
  display: block;
  color: var(--web-text);
  font-size: 22px;
  line-height: 1.05;
}

@media (min-width: 760px) {
  .web-main {
    --web-max: 760px;
  }

  .web-main {
    padding-top: 36px;
  }

  .web-panel {
    padding: 22px;
  }

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

  .web-detail-list {
    grid-template-columns: 1fr 1fr;
  }

  .web-hero-actions {
    grid-template-columns: 180px 180px;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .web-garage-grid {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .web-garage-media img,
  .web-garage-placeholder {
    aspect-ratio: 16 / 9;
  }

  .web-garage-add {
    width: 100%;
    justify-content: center;
  }

  .web-garage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .web-garage-btn {
    flex: initial;
    width: 100%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .web-user-menu-name {
    display: none;
  }

  .web-user-menu-initials {
    display: inline-block;
  }
}

@media (min-width: 1040px) {
  .web-topbar {
    padding-inline: max(18px, calc((100vw - var(--web-wide-max)) / 2));
  }

  .web-main {
    width: min(100% - 48px, var(--web-wide-max));
  }

  .web-footer {
    padding: 30px 24px;
  }

  .web-footer-inner {
    width: min(100% - 48px, var(--web-wide-max));
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .web-footer-left {
    flex: 0 0 auto;
    max-width: 420px;
  }

  .web-footer-stats {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }

  .web-footer-stats div {
    justify-content: center;
    min-height: 74px;
    padding: 12px 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .web-footer-stats div:first-child {
    border-left: none;
  }

  .web-page-title {
    max-width: 720px;
  }

  .web-panel {
    padding: 28px;
  }

  .web-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 20px;
  }

  .web-form .web-error,
  .web-form .web-actions,
  .web-field:has(textarea),
  .web-field:has(input[type="file"]) {
    grid-column: 1 / -1;
  }

  .web-actions {
    grid-template-columns: 220px 220px;
    justify-content: start;
  }

  .web-profile-hero {
    min-height: 220px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 210px;
    align-items: center;
    gap: 28px;
    text-align: left;
    padding: 28px 54px 28px 34px;
  }

  .web-home-hero-pro {
    min-height: 256px;
    grid-template-columns: 250px 1fr;
    border-radius: 8px;
  }

  .web-hero-map-layer {
    right: 68%;
    background-size: auto 100%, auto 100%, auto, auto;
  }

  .web-hero-image-layer {
    left: 22%;
    background:
      linear-gradient(90deg, rgba(9, 11, 15, 0.95), rgba(9, 11, 15, 0.33) 50%, rgba(9, 11, 15, 0.0) 100%),
      url("/static/img/web/hero-1.png") center 48% / cover no-repeat;
  }

  .web-hero-avatar-wrap {
    grid-column: 1;
    padding: 0 0 0 36px;
    justify-self: center;
  }

  .web-hero-avatar-ring {
    width: 138px;
    height: 138px;
  }

  .web-hero-content {
    grid-column: 2;
    max-width: 520px;
    padding: 36px 28px 34px 18px;
    text-align: left;
  }

  .web-hero-content h1 {
    font-size: 40px;
  }

  .web-hero-content .web-chip-row {
    justify-content: flex-start;
  }

  .web-hero-actions {
    justify-content: start;
    grid-template-columns: 164px 164px;
    gap: 16px;
  }

  .web-hero-actions .web-button {
    min-height: 46px;
    border-radius: 8px;
  }

  .web-profile-avatar {
    width: 132px;
    height: 132px;
    margin: 0;
  }

  .web-profile-main {
    grid-column: 2;
    max-width: 720px;
  }

  .web-profile-main p {
    margin-inline: 0;
  }

  .web-profile-main .web-chip-row {
    justify-content: flex-start;
    margin-bottom: 10px;
  }

  .web-profile-bio {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .web-profile-meta {
    justify-content: flex-start;
  }

  .web-profile-actions {
    grid-column: 3;
    align-self: center;
    margin-top: 0;
  }

  .web-profile-actions .web-button {
    min-height: 44px;
    border-radius: 8px;
    justify-content: center;
  }

  .web-profile-edit-hero {
    min-height: 0;
    grid-template-columns: 110px minmax(0, 1fr) 210px;
    gap: 22px;
    padding: 24px 30px 24px 24px;
  }

  .web-profile-edit-hero .web-profile-avatar {
    width: 96px;
    height: 96px;
  }

  .web-profile-edit-hero .web-profile-actions {
    gap: 10px;
  }

  .web-profile-stats-panel {
    grid-template-columns: repeat(6, 1fr);
    margin-top: 16px;
  }

  .web-profile-stat {
    min-height: 86px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .web-profile-stat:first-child {
    border-left: 0;
  }

  .web-profile-preview-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.08fr) minmax(360px, 1.25fr);
    gap: 14px;
    margin-top: 14px;
  }

  .web-profile-secondary-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.08fr) minmax(360px, 1.25fr);
    gap: 14px;
    margin-top: 14px;
  }

  .web-garage-grid {
    grid-template-columns: 220px 1fr;
  }

  .web-detail-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .web-metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .web-dashboard-metrics {
    gap: 10px;
  }

  .web-dashboard-metrics .web-metric {
    min-height: 104px;
    grid-template-columns: 58px 1fr;
    align-items: center;
    align-content: center;
    column-gap: 18px;
    padding: 16px 20px;
    text-align: left;
  }

  .web-dashboard-metrics .web-metric i {
    width: 54px;
    height: 54px;
    display: grid;
    grid-row: 1 / span 3;
    place-items: center;
    border-radius: 12px;
    background: var(--web-accent-soft);
    color: var(--web-accent);
    font-size: 29px;
  }

  .web-dashboard-metrics .web-metric strong {
    font-size: 21px;
  }

  .web-dashboard-metrics .web-metric span {
    font-size: 12px;
  }

  .web-action-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .web-benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .web-benefits-sidebar {
    position: sticky;
    top: 96px;
  }

  .web-badge-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .web-benefits-hero-band {
    background-position: center right;
  }

  .web-benefits-hero-points {
    grid-template-columns: 1fr;
  }

  .web-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-benefits-sidebar {
    position: static;
  }
}

@media (max-width: 991.98px) {
  .web-navbar-shell {
    padding-block: 8px;
  }

  .web-topbar .navbar-collapse {
    width: 100%;
  }

  .web-topbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none;
  }

  .web-topbar .navbar-collapse.show,
  .web-topbar .navbar-collapse.collapsing {
    margin-top: 10px;
    padding: 14px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 14px;
  }

  .web-primary-nav {
    display: grid;
    width: 100%;
    gap: 0;
  }

  .web-primary-nav .nav-link {
    min-height: 44px;
    width: 100%;
    justify-content: flex-start;
    border-bottom: 0;
    padding: 10px 0;
  }

  .web-primary-nav .nav-link.active {
    border-bottom: 0;
  }

  .web-account-nav {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding-top: 10px;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .web-account-nav .dropdown {
    min-width: 0;
  }

  .web-notification-link {
    justify-content: flex-start;
    min-width: 56px;
    min-height: 44px;
    padding-inline: 14px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03) !important;
    font-size: 16px !important;
  }

  .web-notification-link-text {
    display: inline;
  }

  .web-notification-link [data-notification-bell-count] {
    top: 6px;
    right: 8px;
  }

  .web-notification-link.active::after {
    display: none;
  }

  .web-user-menu-trigger {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: space-between;
    padding-right: 14px;
  }

  .web-user-menu-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  .web-user-menu-name {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .web-dropdown-menu {
    min-width: 100%;
    width: 100%;
    margin-top: 8px;
  }

  .web-benefits-hero-band {
    padding: 24px;
    background-position: center right;
  }

  .web-benefits-hero-head {
    align-items: flex-start;
  }

  .web-benefits-hero-metrics {
    grid-template-columns: 1fr;
  }

  .web-benefits-hero-metric {
    min-height: 0;
  }

  .web-benefit-toolbar-head {
    grid-template-columns: 1fr;
  }

  .web-benefit-pane-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .web-badges-page-head,
  .web-badges-summary-card,
  .web-badge-section-head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .web-badges-summary-card {
    gap: 18px;
  }

  .web-badge-catalog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .web-benefits-hero-points,
  .web-benefits-hero-metrics {
    display: none;
  }

  .web-benefits-hero-band {
    background-position: center;
  }

  .web-benefit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .web-account-nav {
    grid-template-columns: 1fr;
  }

  .web-notification-link {
    width: 100%;
  }

  .web-page-copy p {
    font-size: 15px;
  }

  .web-benefits-hero-band,
  .web-benefits-results-panel,
  .web-benefits-sidebar-card {
    padding: 18px;
  }

  .web-benefits-hero-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-benefits-copy h1 {
    font-size: 38px;
  }

  .web-benefit-tabs {
    grid-template-columns: 1fr;
  }

  .web-benefit-filter-row {
    gap: 8px;
  }

  .web-benefit-card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .web-benefit-card-actions .web-button {
    flex: none;
    width: 100%;
    min-height: 48px;
  }

  .web-badges-summary-metrics {
    grid-template-columns: 1fr;
  }

  .web-badge-catalog-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .web-badge-catalog-top {
    flex-direction: column;
    align-items: center;
  }

  .web-badge-catalog-meta span {
    justify-content: center;
  }
}

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

.web-notifications-layout {
  display: block;
}

.web-notifications-main {
  display: grid;
  gap: 18px;
}

.web-notifications-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 26px 24px 24px;
}

.web-notifications-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 14, 8, 0.92) 0%, rgba(18, 18, 18, 0.76) 56%, rgba(18, 18, 18, 0.92) 100%),
    url("/static/img/web/hero-2.png") center right / cover no-repeat;
  opacity: 0.42;
  pointer-events: none;
}

.web-notifications-hero > * {
  position: relative;
  z-index: 1;
}

.web-notifications-hero-main h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.02;
}

.web-notifications-hero-main p {
  margin: 0;
  max-width: 760px;
  color: var(--web-muted);
  font-size: 17px;
}

.web-notifications-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.web-notification-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.web-notification-metric {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(29, 29, 29, 0.88);
}

.web-notification-metric-icon {
  width: 58px;
  height: 58px;
  position: relative;
  display: block;
  border-radius: 18px;
  align-self: center;
  justify-self: center;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
}

.web-notification-metric-icon i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: 22px;
}

.web-notification-metric-icon.is-unread {
  color: var(--web-accent);
  background: rgba(255, 93, 31, 0.12);
}

.web-notification-metric-icon.is-priority {
  color: #ff5f57;
  background: rgba(255, 95, 87, 0.14);
}

.web-notification-metric-icon.is-action {
  color: #5fa8ff;
  background: rgba(74, 132, 255, 0.14);
}

.web-notification-metric-icon.is-read {
  color: #b8bcc7;
  background: rgba(255, 255, 255, 0.05);
}

.web-notification-metric strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.web-notification-metric span {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}

.web-notification-metric small {
  display: block;
  margin-top: 3px;
  color: var(--web-muted);
  font-size: 13px;
}

.web-notifications-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.68fr);
  gap: 14px;
  align-items: start;
}

.web-notifications-feed,
.web-notifications-sidebar {
  display: grid;
  gap: 18px;
}

.web-notification-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.web-filter-chips,
.web-notification-type-filters,
.web-alert-type-chips,
.web-rides-difficulty-filters,
.web-ride-feed-card-pills,
.web-member-profile-actions,
.web-ride-detail-pills,
.web-benefit-detail-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.web-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--web-line);
  background: rgba(255, 255, 255, 0.02);
  color: #d7d7dc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.web-filter-chip:hover,
.web-filter-chip.active {
  color: var(--web-accent);
  border-color: rgba(255, 93, 31, 0.28);
  background: rgba(255, 93, 31, 0.12);
}

.web-notification-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.web-notification-sort-form .form-select {
  min-width: 170px;
  min-height: 42px;
  border-radius: 14px;
  border-color: var(--web-line);
  background-color: rgba(18, 18, 18, 0.92);
  color: #f2f2f4;
}

.web-filter-toggle {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--web-line);
  background: rgba(18, 18, 18, 0.92);
  color: #f2f2f4;
  font-weight: 700;
}

.web-notification-type-filters {
  padding-top: 14px;
}

.web-notification-section {
  display: grid;
  gap: 14px;
}

.web-notification-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: #ff3b30;
  vertical-align: middle;
}

.web-notification-list {
  display: grid;
  gap: 12px;
}

.web-notification-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--web-line);
  background: rgba(29, 29, 29, 0.92);
  cursor: pointer;
}

.web-notification-card.is-unread {
  box-shadow: inset 0 0 0 1px rgba(255, 93, 31, 0.06);
}

.web-notification-card.tone-important {
  border-color: rgba(255, 72, 48, 0.48);
}

.web-notification-card.tone-action {
  border-color: rgba(74, 132, 255, 0.32);
}

.web-notification-card-main {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.web-notification-card-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--web-line);
  color: var(--web-accent);
  font-size: 24px;
  background: rgba(255, 93, 31, 0.08);
}

.web-notification-card.tone-important .web-notification-card-icon {
  color: #ff5f57;
  background: rgba(255, 95, 87, 0.12);
  border-color: rgba(255, 95, 87, 0.28);
}

.web-notification-card.tone-action .web-notification-card-icon {
  color: #5fa8ff;
  background: rgba(74, 132, 255, 0.12);
  border-color: rgba(74, 132, 255, 0.28);
}

.web-notification-card-copy {
  min-width: 0;
}

.web-notification-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.web-notification-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 800;
}

.web-notification-badge.is-info {
  color: #86b6ff;
  border-color: rgba(134, 182, 255, 0.26);
  background: rgba(134, 182, 255, 0.09);
}

.web-notification-badge.is-normal {
  color: #ffc24d;
  border-color: rgba(255, 194, 77, 0.24);
  background: rgba(255, 194, 77, 0.08);
}

.web-notification-badge.is-important {
  color: #ff734f;
  border-color: rgba(255, 115, 79, 0.28);
  background: rgba(255, 115, 79, 0.1);
}

.web-notification-badge.is-action {
  color: #5fa8ff;
  border-color: rgba(95, 168, 255, 0.28);
  background: rgba(95, 168, 255, 0.1);
}

.web-notification-card-copy h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.08;
}

.web-notification-card-copy p {
  margin: 0;
  color: #cbcad0;
  font-size: 14px;
  line-height: 1.5;
}

.web-notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  color: #8d8f99;
  font-size: 13px;
}

.web-notification-card-actions {
  display: grid;
  align-content: center;
  gap: 8px;
  justify-items: end;
  flex-shrink: 0;
}

.web-notification-card-actions form {
  margin: 0;
}

.web-notification-read-indicator {
  color: #8d919b;
  font-size: 18px;
}

.web-notification-read-indicator.is-hidden {
  visibility: hidden;
}


.web-notification-modal {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(28, 21, 19, 0.98), rgba(19, 19, 19, 0.98));
  color: #f3f3f5;
}

.web-notification-modal .modal-header,
.web-notification-modal .modal-footer {
  border-color: rgba(255, 255, 255, 0.08);
  padding: 20px 22px;
}

.web-notification-modal .modal-body {
  padding: 22px;
}

.web-notification-modal-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.web-notification-modal-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--web-accent);
  font-size: 24px;
}

.web-notification-modal-icon.tone-important {
  color: #ff734f;
  background: rgba(255, 115, 79, 0.12);
}

.web-notification-modal-icon.tone-action {
  color: #5fa8ff;
  background: rgba(95, 168, 255, 0.12);
}

.web-notification-modal-message {
  margin: 0 0 18px;
  color: #d8d8dd;
  font-size: 16px;
  line-height: 1.6;
}

.web-notification-modal-meta div {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.web-notification-modal-meta span {
  color: #9c9da6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.web-notification-modal-meta strong {
  font-size: 14px;
  color: #fff;
}


.web-notification-side-card {
  display: grid;
  gap: 16px;
}

.web-notification-summary-list {
  display: grid;
  gap: 10px;
}

.web-notification-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  color: #d6d6db;
}

.web-notification-summary-list strong {
  color: #fff;
}

.web-side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--web-line);
  background: rgba(14, 14, 14, 0.82);
  color: #ececf1;
  text-decoration: none;
  font-weight: 700;
}

.web-side-link:hover {
  border-color: rgba(255, 93, 31, 0.28);
  color: var(--web-accent);
}

.web-quick-links {
  display: grid;
  gap: 10px;
}

@media (max-width: 1180px) {
  .web-notifications-content-grid {
    grid-template-columns: 1fr;
  }

  .web-notifications-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .web-notification-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .web-notifications-hero {
    padding: 22px;
  }

  .web-notification-card {
    flex-direction: column;
    align-items: stretch;
  }

  .web-notification-card-actions {
    justify-items: stretch;
  }

  .web-notification-card-actions .web-button,
  .web-notification-card-actions form .web-button {
    width: 100%;
  }

  .web-notifications-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .web-notification-metrics {
    grid-template-columns: 1fr;
  }

  .web-notification-metric {
    min-height: 104px;
    grid-template-columns: 58px 1fr;
    padding: 16px;
  }

  .web-notification-metric strong {
    font-size: 30px;
  }

  .web-notification-card-main {
    grid-template-columns: 58px 1fr;
    gap: 12px;
  }

  .web-notification-card-icon {
    width: 54px;
    height: 54px;
    font-size: 22px;
  }

  .web-notification-card-copy h3 {
    font-size: 22px;
  }
}

.web-emergency-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 2px 2px 0;
}

.web-emergency-hero {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 0;
}

.web-emergency-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(30, 14, 10, 0.92) 0%, rgba(18, 18, 18, 0.68) 56%, rgba(18, 18, 18, 0.92) 100%),
    url("/static/img/web/hero-2.png") center / cover no-repeat;
  opacity: 0.62;
  pointer-events: none;
}

.web-emergency-hero > * {
  position: relative;
  z-index: 1;
}

.web-emergency-hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
}

.web-emergency-hero-copy p {
  max-width: 520px;
  margin: 0;
  color: var(--web-muted);
  font-size: 15px;
  line-height: 1.55;
}

.web-emergency-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 12px;
}

.web-emergency-modal-dialog {
  max-width: 640px;
}

.web-emergency-modal-dialog .web-form-modal {
  max-width: none;
}

.web-emergency-quickbar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(260px, 0.42fr);
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-color: rgba(255, 93, 31, 0.32);
}

.web-emergency-quickbar-main {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.web-emergency-quickbar-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 59, 48, 0.12);
  color: #ff5f57;
  font-size: 26px;
}

.web-emergency-quickbar-main h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.web-emergency-quickbar-main p,
.web-emergency-quickbar-side p {
  margin: 0;
  color: var(--web-muted);
  line-height: 1.5;
  font-size: 13px;
}

.web-emergency-quickbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.web-emergency-call-button {
  background: linear-gradient(135deg, #ff2345, #ff5b23);
  border-color: rgba(255, 91, 35, 0.6);
}

.web-emergency-quickbar-side {
  display: grid;
  gap: 12px;
  padding-left: 20px;
  border-left: 1px solid var(--web-line);
}

.web-emergency-quickbar-side .web-button {
  justify-self: start;
}

.web-emergency-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  gap: 18px;
  align-items: start;
}

.web-emergency-main-column,
.web-emergency-sidebar {
  display: grid;
  gap: 18px;
}

.web-emergency-main-column {
  grid-template-columns: 1fr;
}

.web-emergency-main-stack {
  display: grid;
  gap: 18px;
}

.web-emergency-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}

.web-emergency-card,
.web-emergency-side-card {
  display: grid;
  gap: 12px;
}

.web-emergency-card-full {
  grid-column: 1 / -1;
}

.web-emergency-useful-list,
.web-emergency-contact-grid {
  display: grid;
  gap: 10px;
}

.web-emergency-contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.web-emergency-useful-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--web-line);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
}

.web-emergency-useful-item strong,
.web-emergency-secondary-card strong,
.web-emergency-primary-card strong {
  display: block;
  font-size: 15px;
}

.web-emergency-useful-item small,
.web-emergency-secondary-card span,
.web-emergency-primary-card span {
  color: var(--web-muted);
}

.web-emergency-useful-item span:last-child {
  color: var(--web-accent);
  font-weight: 800;
}

.web-emergency-primary-card,
.web-emergency-secondary-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 93, 31, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.web-emergency-secondary-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 18px;
}

.web-emergency-contact-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.web-emergency-contact-head.compact {
  grid-template-columns: 48px minmax(0, 1fr);
}

.web-emergency-contact-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 93, 31, 0.18);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.web-emergency-contact-head p {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.05;
}

.web-emergency-contact-head.compact p {
  font-size: 14px;
}

.web-emergency-contact-note {
  margin: 2px 0 0;
  color: #c7c7cd;
  font-size: 13px;
  line-height: 1.55;
}

.web-emergency-contact-actions,
.web-emergency-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.web-emergency-secondary-actions {
  margin-top: 4px;
}

.web-link-danger {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ff4e52;
  font-weight: 700;
}

.web-emergency-mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--web-line);
  background: rgba(255, 255, 255, 0.03);
  color: #f1f1f3;
  text-decoration: none;
  font-weight: 700;
}

.web-emergency-mini-action.is-green {
  color: #38d676;
  border-color: rgba(56, 214, 118, 0.22);
}

.web-emergency-mini-action.is-blue {
  color: #5fa8ff;
  border-color: rgba(95, 168, 255, 0.22);
}

.web-emergency-mini-action.is-danger {
  color: #ff5f57;
  border-color: rgba(255, 95, 87, 0.22);
}

.web-emergency-side-card .web-side-link {
  width: 100%;
}

.web-emergency-side-card button.web-side-link {
  text-align: left;
}

.web-emergency-secondary-card > .web-inline-form:last-child {
  margin-top: auto;
  padding-top: 4px;
}

.web-side-link.is-static {
  justify-content: flex-start;
  pointer-events: none;
}

.web-side-link.is-static strong {
  display: block;
}

.web-side-link.is-static small {
  display: block;
  color: var(--web-muted);
  font-size: 12px;
  line-height: 1.45;
}

.web-emergency-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.web-emergency-steps li {
  color: #e8e8ee;
  font-size: 14px;
}



.web-dashboard-mini-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--web-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  align-content: start;
  height: 100%;
}

.web-dashboard-mini-kicker {
  color: var(--web-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.web-dashboard-mini-kicker.is-muted {
  color: #9fa3ac;
}

.web-dashboard-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.web-dashboard-mini-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 168, 51, 0.14);
  color: #ffbf5d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.web-dashboard-mini-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8ae63e;
  box-shadow: 0 0 0 2px rgba(138, 230, 62, 0.16);
}

.web-dashboard-weather-card{
  justify-content: space-between;
}

.web-dashboard-mini-card strong,
.web-dashboard-weather-card strong {
  font-size: 18px;
  line-height: 1.15;
}

.web-dashboard-mini-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  color: #d7d7dd;
  font-size: 14px;
}

.web-dashboard-mini-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.web-dashboard-mini-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #a4a6af;
  font-size: 12px;
  margin-top: auto;
}

.web-dashboard-health {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.web-dashboard-health.is-good {
  color: #2bd46d;
}

.web-dashboard-health.is-attention {
  color: #ffc24d;
}

.web-dashboard-health.is-critical {
  color: #ff5f57;
}

.web-dashboard-reminder-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 168, 51, 0.08);
  border: 1px solid rgba(255, 168, 51, 0.14);
}

.web-dashboard-reminder-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #ffb13b;
  background: rgba(255, 168, 51, 0.14);
}

.web-dashboard-reminder-row small {
  color: #d2d2d8;
}

.web-dashboard-reminder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #ffae39;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.web-dashboard-reminder-link:hover,
.web-dashboard-reminder-link:focus {
  color: #ffc15d;
}

.web-button-compact {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 14px;
  justify-self: start;
  border-radius: 999px;
}

.web-dashboard-weather-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f4cf4c;
  background: rgba(244, 207, 76, 0.12);
  font-size: 24px;
}

.web-dashboard-weather-summary,
.web-dashboard-benefit-card p,
.web-dashboard-whatsapp-card p,
.web-dashboard-pulse-card p,
.web-dashboard-pulse-card small {
  margin: 0;
}

.web-dashboard-weather-summary {
  color: #d7d7dd;
  font-size: 14px;
  line-height: 1.5;
}

.web-dashboard-weather-tags,
.web-member-card-meta,
.web-ride-detail-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-dashboard-weather-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #b8bac2;
  font-size: 10px;
  font-weight: 700;
}

.web-dashboard-weather-tap-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--web-accent);
  opacity: 0.7;
}

.web-dashboard-weather-tap-hint i {
  font-size: 10px;
}

.web-dashboard-weather-card:hover .web-dashboard-weather-tap-hint,
.web-dashboard-weather-card:focus .web-dashboard-weather-tap-hint {
  opacity: 1;
}

.web-dashboard-benefit-card {
  position: relative;
  overflow: hidden;
}

.web-dashboard-benefit-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 28%, rgba(255, 93, 31, 0.16) 0, rgba(255, 93, 31, 0.16) 56px, transparent 57px),
    radial-gradient(circle at 85% 80%, rgba(255, 154, 52, 0.16) 0, rgba(255, 154, 52, 0.16) 44px, transparent 45px);
  pointer-events: none;
}

.web-dashboard-benefit-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}

.web-dashboard-side-kicker {
  color: #2bd46d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


.web-dashboard-whatsapp-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(43, 212, 109, 0.12) 0, rgba(43, 212, 109, 0.12) 92px, transparent 93px),
    linear-gradient(180deg, rgba(13, 34, 24, 0.98), rgba(11, 24, 18, 0.96));
  border-color: rgba(43, 212, 109, 0.16);
}

.web-dashboard-whatsapp-card .web-button.success{
  min-height: 36px;
  margin-top: 8px;
}

.web-dashboard-chat-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.web-dashboard-chat-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(17, 104, 62, 0.38);
  border: 1px solid rgba(43, 212, 109, 0.24);
  color: #22d366;
  font-size: 24px;
}

.web-dashboard-chat-header h2,
.web-dashboard-social-intro h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.15;
}

.web-dashboard-chat-header p,
.web-dashboard-social-copy small {
  color: #c4c8d0;
}

.web-dashboard-pulse-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 112%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 88px, transparent 89px),
    linear-gradient(180deg, rgba(31, 31, 31, 0.96), rgba(28, 28, 28, 0.96));
}

.web-dashboard-pulse-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.web-dashboard-pulse-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.36);
  font-size: 19px;
}

.web-dashboard-pulse-copy {
  display: grid;
  gap: 4px;
}

.web-dashboard-pulse-copy h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
}

.web-dashboard-pulse-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
}

.web-dashboard-pulse-card small {
  color: rgba(255, 255, 255, 0.40);
  font-size: 13px;
  line-height: 1.5;
}

.web-dashboard-pulse-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.web-dashboard-pulse-score strong {
  color: var(--web-accent);
  font-size: 16px;
  letter-spacing: 0;
}

.web-dashboard-pulse-card .web-button {
  align-self: flex-start;
  min-width: 196px;
  min-height: 52px;
}

.web-dashboard-pulse-card .web-button i {
  opacity: 0.85;
}

/* Dashboard feature row */
.web-dashboard-card-head,
.web-dashboard-benefit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.web-dashboard-card-head h2,
.web-dashboard-benefit-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.15;
}

.web-dashboard-card-head p,
.web-dashboard-benefit-head p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.35;
}

.web-dashboard-card-head-between {
  justify-content: space-between;
}

.web-dashboard-focus-card,
.web-dashboard-weather-card,
.web-dashboard-benefit-card,
.web-dashboard-whatsapp-card,
.web-dashboard-pulse-card {
  height: 100%;
  padding: 16px 18px;
}

.web-dashboard-focus-card {
  gap: 14px;
}

.web-dashboard-focus-split {
  display: grid;
  gap: 14px;
  height: 100%;
}

.web-dashboard-focus-card .web-dashboard-mini-card {
  min-height: 0;
}

.web-dashboard-mini-list-icons i {
  color: var(--web-accent);
}

.web-dashboard-focus-ride-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.web-dashboard-mini-meta-line {
  color: #9ea1aa;
  font-size: 13px;
  line-height: 1.35;
}

.web-dashboard-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.web-dashboard-avatar-chip {
  width: 28px;
  height: 28px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid #242424;
  background: #111;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.web-dashboard-avatar-chip:first-child {
  margin-left: 0;
}

.web-dashboard-avatar-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.web-dashboard-avatar-extra {
  margin-left: 6px;
  color: var(--web-accent);
  font-size: 13px;
  font-weight: 800;
}

.web-dashboard-reminder-copy {
  display: grid;
  gap: 4px;
}

.web-dashboard-reminder-copy strong {
  font-size: 16px;
  line-height: 1.15;
}

.web-dashboard-mini-meta-badge {
  color: #ffb13b;
  font-weight: 800;
}

.web-dashboard-location-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.web-dashboard-location-line i {
  color: #e0a52f;
}

.web-dashboard-live-pill {
  display: inline-flex;
  align-items: center;
  min-width: 85px;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 93, 31, 0.42);
  background: rgba(75, 38, 16, 0.52);
  color: var(--web-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.web-dashboard-weather-overview {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.web-dashboard-weather-copy {
  display: grid;
  gap: 2px;
}

.web-dashboard-weather-copy strong {
  font-size: 34px;
  line-height: 1;
}

.web-dashboard-weather-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.1;
}

.web-dashboard-weather-copy small {
  color: #b8bac2;
  font-size: 13px;
}

.web-dashboard-weather-statuses {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.web-dashboard-weather-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.web-dashboard-weather-badge.is-good {
  background: rgba(19, 118, 67, 0.36);
  color: #2bd46d;
}

.web-dashboard-weather-badge.is-caution {
  background: rgba(122, 86, 11, 0.34);
  color: #ffc24d;
}

.web-dashboard-weather-badge.is-poor {
  background: rgba(123, 29, 29, 0.34);
  color: #ff6a63;
}

.web-dashboard-weather-badge.is-wind {
  background: rgba(97, 74, 16, 0.34);
  color: #e7c266;
}

.web-dashboard-weather-badge.is-rain {
  background: rgba(19, 53, 108, 0.34);
  color: #6eb2ff;
}

.web-dashboard-weather-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #d6d7dd;
  font-size: 13px;
  line-height: 15px;
  margin-bottom: 8px;
}

.web-dashboard-weather-callout i {
  color: #f6cc47;
  font-size: 10px;
}

.web-dashboard-weather-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.web-dashboard-weather-tags span i {
  color: #ff6b3b;
  opacity: 1;
}

.web-dashboard-benefit-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
}

.web-dashboard-benefit-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 93, 31, 0.12);
  border: 1px solid rgba(255, 93, 31, 0.18);
  color: var(--web-accent);
  font-size: 20px;
}

.web-dashboard-benefit-head .web-dashboard-mini-kicker {
  display: block;
  margin-bottom: 6px;
}

.web-dashboard-benefit-actions {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.web-dashboard-benefit-actions a {
  min-height: 24px;
}

.web-dashboard-chat-header p {
  margin-top: 4px;
}

.web-dashboard-pulse-card {
  gap: 14px;
}

.web-dashboard-pulse-copy p {
  color: rgba(255, 255, 255, 0.40);
}

.web-dashboard-pulse-card small {
  display: block;
}

.web-dashboard-social-strip {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
  margin-bottom: 18px;
}

.web-dashboard-social-intro,
.web-dashboard-social-card {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: grid;
  align-items: center;
}

.web-dashboard-social-intro {
  padding-block: 0;
  align-content: center;
}

.web-dashboard-social-card {
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 12px;
  min-width: 0;
  padding: 16px 14px;
}

.web-dashboard-social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.04) 44%, transparent 100%),
    radial-gradient(circle at 18% 50%, var(--social-glow, rgba(255, 255, 255, 0.08)) 0, transparent 58%);
  transition: opacity 180ms ease;
  pointer-events: none;
}

.web-dashboard-social-card:hover,
.web-dashboard-social-card:focus {
  color: var(--web-text);
  border-color: var(--social-border, rgba(255, 255, 255, 0.18));
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.web-dashboard-social-card:hover::before,
.web-dashboard-social-card:focus::before {
  opacity: 1;
}

.web-dashboard-social-icon {
  width: 40px;
  height: 40px;
}

.web-social-instagram {
  --social-glow: rgba(255, 75, 146, 0.14);
  --social-border: rgba(255, 75, 146, 0.26);
  color: #ff4b92;
}

.web-social-tiktok {
  --social-glow: rgba(255, 255, 255, 0.10);
  --social-border: rgba(255, 255, 255, 0.20);
  color: #f5f5f7;
}

.web-social-facebook {
  --social-glow: rgba(59, 130, 246, 0.14);
  --social-border: rgba(59, 130, 246, 0.24);
  color: #3b82f6;
}

.web-social-youtube {
  --social-glow: rgba(255, 44, 44, 0.14);
  --social-border: rgba(255, 44, 44, 0.24);
  color: #ff2c2c;
}

.web-social-whatsapp {
  --social-glow: rgba(17, 104, 62, 0.14);
  --social-border: rgba(43, 212, 109, 0.24);
  color: #22d366;
}

.web-dashboard-social-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.web-dashboard-social-copy strong {
  font-size: 15px;
  line-height: 1.1;
  transition: color 180ms ease, transform 180ms ease;
}

.web-dashboard-social-copy small {
  font-size: 13px;
  transition: color 180ms ease;
}

.web-dashboard-social-arrow {
  color: #868892;
  display: grid;
  place-items: center;
  justify-self: end;
  transition: transform 180ms ease, color 180ms ease;
}

.web-dashboard-social-card:hover .web-dashboard-social-icon,
.web-dashboard-social-card:focus .web-dashboard-social-icon {
  transform: scale(1.06);
  border-color: var(--social-border, rgba(255, 255, 255, 0.18));
  box-shadow: 0 0 0 4px var(--social-glow, rgba(255, 255, 255, 0.08));
}

.web-dashboard-social-card:hover .web-dashboard-social-copy strong,
.web-dashboard-social-card:focus .web-dashboard-social-copy strong {
  color: #ffffff;
  transform: translateX(1px);
}

.web-dashboard-social-card:hover .web-dashboard-social-copy small,
.web-dashboard-social-card:focus .web-dashboard-social-copy small {
  color: rgba(255, 255, 255, 0.72);
}

.web-dashboard-social-card:hover .web-dashboard-social-arrow,
.web-dashboard-social-card:focus .web-dashboard-social-arrow {
  color: var(--social-border, #b8bac2);
  transform: translateX(3px);
}

@media (max-width: 1399.98px) {
  .web-dashboard-weather-overview {
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
  }

  .web-dashboard-weather-statuses {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .web-dashboard-weather-card {
    gap: 12px;
  }

  .web-dashboard-weather-summary {
    line-height: 1.65;
  }

  .web-dashboard-weather-callout {
    min-height: unset;
    padding: 8px 12px;
    line-height: 1.5;
  }
}

@media (min-width: 1200px) {
  .web-dashboard-feature-grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
  }

  .web-dashboard-feature-side {
    grid-template-rows: repeat(3, auto);
  }

  .web-dashboard-focus-split {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .web-dashboard-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .web-dashboard-focus-ride-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}







.web-modal-form-body {
  display: grid;
  gap: 14px;
}

.web-inline-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.web-form-modal {
  max-width: 560px;
  margin-inline: auto;
}

.web-form-modal > form.web-form,
.web-form-modal .modal-content > form.web-form {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 0;
}

.web-form-modal > form.web-form > *,
.web-form-modal .modal-content > form.web-form > * {
  grid-column: 1 / -1;
}

.web-form-modal.web-gallery-modal {
  width: 100vw;
  max-width: none;
  margin: 0;
}

.web-form-modal .modal-content {
  background: var(--web-surface);
  border: none;
}

.web-form-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--web-line);
}

.web-form-modal .modal-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: #f5f5f7;
}

.web-form-modal .btn-close {
  margin: 0;
  padding: 0.35rem;
  flex-shrink: 0;
}

.web-form-modal .modal-body {
  padding: 18px 22px 12px;
}

.web-form-modal.web-gallery-modal .modal-header,
.web-form-modal.web-gallery-modal .modal-footer {
  padding-inline: 24px;
}

.web-form-modal.web-gallery-modal .modal-body {
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 79, 25, 0.08), transparent 32%),
    rgba(6, 6, 8, 0.95);
}

.modal-footer {
  border-top: 1px solid var(--web-line);
}

.web-form-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.web-form-modal .web-button {
  min-width: 172px;
}

.web-form-modal .web-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ededf1;
}

.web-form-modal .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.04);
}

.web-form-modal .form-check-input:checked {
  background-color: var(--web-accent);
  border-color: rgba(255, 93, 31, 0.5);
}

.web-form-modal .form-check-label {
  color: #e8e8ec;
  font-weight: 600;
}

@media (max-width: 640px) {
  .web-form-modal {
    max-width: none;
  }

  .web-form-modal .modal-header,
  .web-form-modal .modal-body,
  .web-form-modal .modal-footer {
    padding-inline: 18px;
  }

  .web-form-modal.web-gallery-modal .modal-body {
    padding: 18px;
  }

  .web-form-modal .modal-title {
    font-size: 21px;
  }

  .web-form-modal .web-button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 980px) {
  .web-gallery-selection-grid,
  .web-gallery-manager-grid {
    grid-template-columns: 1fr;
  }

  .web-form-modal.web-gallery-modal .modal-body {
    padding: 16px;
  }

  .web-form-modal.web-gallery-modal .modal-header,
  .web-form-modal.web-gallery-modal .modal-footer {
    padding-inline: 16px;
  }
}

@media (max-width: 767px) {
  .web-profile-edit-sidebar:hover,
  .web-profile-edit-form-shell:hover,
  .web-gallery-upload-card:hover,
  .web-gallery-list-card:hover {
    transform: none;
  }

  .web-profile-edit-hero,
  .web-profile-edit-hero .web-profile-actions {
    text-align: center;
  }

  .web-profile-edit-footer {
    padding-top: 16px;
  }

  .web-gallery-modal .modal-content {
    min-height: 100dvh;
  }
}

@media (min-width: 1400px) {
  .web-gallery-manager-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .web-gallery-selection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .web-emergency-grid {
    grid-template-columns: 1fr;
  }

  .web-emergency-sidebar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .web-emergency-page-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .web-emergency-quickbar {
    grid-template-columns: 1fr;
  }

  .web-emergency-hero-actions {
    justify-content: flex-start;
  }

  .web-emergency-quickbar-side {
    padding-left: 0;
    border-left: 0;
    padding-top: 14px;
    border-top: 1px solid var(--web-line);
  }

  .web-emergency-sidebar {
    position: static;
    grid-template-columns: 1fr;
  }

  .web-emergency-card-full {
    grid-column: auto;
  }

  .web-emergency-contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .web-emergency-contact-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .web-emergency-contact-head .web-chip {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .web-emergency-contact-head p {
    font-size: 22px;
  }

  .web-emergency-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Rides feed */
.web-page-head {
  display: grid;
  gap: 22px;
  align-items: end;
  margin-bottom: 20px;
  padding: 6px 2px 0;
}

.web-page-copy {
  display: grid;
  gap: 10px;
  align-content: end;
}

.web-page-copy h1 {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.web-page-copy p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.5;
}

.web-rides-page-head {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 600px);
}

.web-rides-hero-main {
  display: grid;
  gap: 18px;
  align-content: end;
}

.web-rides-page-side {
  display: grid;
  gap: 14px;
}

.web-rides-head-action {
  justify-self: end;
  min-width: 224px;
}

.web-rides-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.web-rides-head-action-mobile {
  display: none;
  flex-shrink: 0;
}

.web-rides-overview-panel {
  margin-top: 0;
  display: grid;
  gap: 16px;
  padding: 18px 20px;
}

.web-rides-overview-card {
  display: grid;
  gap: 4px;
  min-height: 98px;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 15, 15, 0.92);
  color: var(--web-text);
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.web-rides-overview-card:hover,
.web-rides-overview-card:focus {
  color: var(--web-text);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(20, 20, 20, 0.96);
}

.web-rides-overview-card.is-active {
  border-color: rgba(255, 79, 25, 0.28);
  background: rgba(255, 79, 25, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 25, 0.08);
}

.web-rides-overview-card strong {
  display: block;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
}

.web-rides-overview-card span {
  color: #f3f3f5;
  font-size: 14px;
  font-weight: 800;
}

.web-rides-overview-card small {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
}

.web-rides-scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 10, 0.76);
}

.web-rides-scope-switch .nav-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 800;
  text-decoration: none;
}

.web-rides-scope-switch .nav-link:hover,
.web-rides-scope-switch .nav-link:focus {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.web-rides-scope-switch .nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(255, 79, 25, 0.96), rgba(255, 110, 61, 0.92));
  box-shadow: 0 12px 22px rgba(255, 79, 25, 0.18);
}

.web-rides-toolbar {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  margin-top: 0;
}

.web-rides-toolbar-form {
  display: grid;
  gap: 12px;
}

.web-rides-search {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.web-rides-search-group .input-group-text,
.web-rides-search-group .form-control,
.web-members-search-group .input-group-text,
.web-members-search-group .form-control,
.web-members-sort .form-select {
  min-height: 52px;
  border-color: rgba(255, 255, 255, 0.09);
  background-color: rgba(13, 13, 13, 0.92);
  color: var(--web-text);
  box-shadow: none;
}

.web-rides-search-group .input-group-text,
.web-members-search-group .input-group-text {
  border-radius: 16px 0 0 16px;
  border-right: 0;
  padding-inline: 16px 12px;
  color: rgba(255, 255, 255, 0.42);
}

.web-rides-search-group .form-control,
.web-members-search-group .form-control {
  border-radius: 0;
  border-left: 0;
  padding-inline: 0 16px;
}

.web-rides-search-group .form-control:focus,
.web-members-search-group .form-control:focus,
.web-members-sort .form-select:focus {
  border-color: rgba(255, 79, 25, 0.28);
  background-color: rgba(13, 13, 13, 0.96);
  color: var(--web-text);
  box-shadow: 0 0 0 0.2rem rgba(255, 79, 25, 0.12);
}

.web-rides-search-group .form-control:focus,
.web-members-search-group .form-control:focus {
  border-left: 0;
}

.web-rides-search-group:focus-within .input-group-text,
.web-members-search-group:focus-within .input-group-text {
  border-color: rgba(255, 79, 25, 0.28);
}

.web-rides-search-button,
.web-members-search-button {
  min-height: 52px;
  border-radius: 0 16px 16px 0;
  border: 1px solid rgba(255, 79, 25, 0.42);
  border-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--web-accent);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.web-rides-search-button:hover,
.web-rides-search-button:focus,
.web-members-search-button:hover,
.web-members-search-button:focus {
  border-color: rgba(255, 79, 25, 0.58);
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
  outline: none;
}

.web-rides-search-button i,
.web-members-search-button i {
  font-size: 15px;
}

.web-rides-search-button {
  padding-inline: 20px;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.web-rides-difficulty-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.78);
  color: #d0d2d8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.web-rides-difficulty-filter:hover,
.web-rides-difficulty-filter:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.web-rides-difficulty-filter.active {
  color: var(--web-accent);
  border-color: rgba(255, 79, 25, 0.28);
  background: rgba(255, 79, 25, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 25, 0.08);
}

.web-rides-difficulty-filter i {
  font-size: 10px;
}

.web-rides-results-copy,
.web-members-results-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.web-rides-results-copy strong,
.web-members-results-copy strong {
  color: var(--web-text);
  font-size: 20px;
}

.web-rides-pagination,
.web-members-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.web-members-load-more {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.web-rides-page-link,
.web-members-page-link,
.web-members-load-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 12, 0.92);
  color: var(--web-text);
  text-decoration: none;
}

.web-rides-page-link.active,
.web-rides-page-link:hover,
.web-rides-page-link:focus,
.web-members-page-link.active,
.web-members-page-link:hover,
.web-members-page-link:focus,
.web-members-load-more-button:hover,
.web-members-load-more-button:focus,
.web-members-load-more-button.is-loading {
  border-color: rgba(255, 79, 25, 0.24);
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
}

.web-members-load-more-button[aria-disabled="true"] {
  pointer-events: none;
}

.web-rides-difficulty-filter.tone-easy i {
  color: var(--web-green);
}

.web-rides-difficulty-filter.tone-medium i {
  color: #ffb100;
}

.web-rides-difficulty-filter.tone-hard i {
  color: #ff5757;
}

.web-rides-results-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
  padding: 0 2px;
}

.web-rides-results-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.45;
}

.web-rides-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.web-ride-feed-card {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 79, 25, 0.18);
  background: #08090b;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.web-ride-feed-card:hover,
.web-ride-feed-card:focus-within {
  border-color: rgba(255, 79, 25, 0.34);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.web-ride-feed-card-hero {
  position: relative;
  min-height: 262px;
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(7, 10, 14, 0.22), rgba(7, 10, 14, 0.54) 34%, rgba(7, 10, 14, 0.9)),
    linear-gradient(90deg, rgba(6, 6, 8, 0.88), rgba(6, 6, 8, 0.32) 58%, rgba(6, 6, 8, 0.7)),
    var(--ride-card-image) center center / cover no-repeat;
}

.web-ride-feed-card-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(255, 79, 25, 0.14), transparent 24%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16));
}

.web-ride-feed-card-hero > * {
  position: relative;
  z-index: 1;
}

.web-ride-feed-card-kind,
.web-ride-feed-card-date,
.web-ride-feed-card-relation,
.web-ride-feed-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 7, 8, 0.68);
  color: #f3f3f5;
  font-size: 13px;
  font-weight: 800;
  width: fit-content;
}

.web-ride-feed-card-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.web-ride-feed-card-date {
  margin-bottom: 12px;
}

.web-ride-feed-card-relation.tone-owner {
  border-color: rgba(255, 157, 66, 0.3);
  background: rgba(255, 157, 66, 0.14);
  color: #ffc37a;
}

.web-ride-feed-card-relation.tone-joined {
  border-color: rgba(24, 212, 90, 0.28);
  background: rgba(24, 212, 90, 0.14);
  color: #7ff0a5;
}

.web-ride-feed-card-content {
  display: grid;
  gap: 10px;
}

.web-ride-feed-card-content h2 {
  margin: 0;
  max-width: 85%;
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.web-ride-feed-card-start {
  margin: 0;
  color: #ff8b64;
  font-size: 16px;
  font-weight: 800;
}

.web-ride-feed-card-organizer {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.web-ride-feed-card-pill.tone-easy {
  border-color: rgba(24, 212, 90, 0.28);
  background: rgba(24, 212, 90, 0.12);
  color: #7ff0a5;
}

.web-ride-feed-card-pill.tone-medium {
  border-color: rgba(255, 177, 0, 0.28);
  background: rgba(255, 177, 0, 0.12);
  color: #ffd36d;
}

.web-ride-feed-card-pill.tone-hard {
  border-color: rgba(255, 87, 87, 0.28);
  background: rgba(255, 87, 87, 0.12);
  color: #ff8d8d;
}

.web-ride-feed-card-pill.tone-pending {
  border-color: rgba(255, 177, 0, 0.28);
  background: rgba(255, 177, 0, 0.12);
  color: #ffd36d;
}

.web-ride-feed-card-pill.tone-rejected,
.web-ride-feed-card-pill.tone-cancelled {
  border-color: rgba(255, 87, 87, 0.28);
  background: rgba(255, 87, 87, 0.12);
  color: #ff8d8d;
}

.web-ride-feed-card-pill.tone-joined {
  border-color: rgba(24, 212, 90, 0.24);
  background: rgba(24, 212, 90, 0.1);
  color: #a7f3bf;
}

.web-ride-feed-card-pill.tone-muted {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.76);
}

.web-ride-feed-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.95), rgba(13, 13, 13, 0.98));
}

.web-ride-feed-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.web-ride-feed-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.web-ride-feed-card-stats i {
  color: var(--web-accent);
}

.web-ride-feed-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--web-accent);
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.web-ride-feed-card-link:hover,
.web-ride-feed-card-link:focus {
  color: #ff7d53;
}

.web-ride-feed-card-link.is-muted {
  color: rgba(255, 255, 255, 0.48);
}


.web-ride-create-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 22px;
  align-items: end;
  margin-bottom: 20px;
  padding: 6px 2px 0;
}

.web-ride-create-page-copy {
  max-width: 760px;
}

.web-ride-create-page-copy h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.web-ride-create-page-copy p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.6;
}

.web-ride-create-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.web-ride-create-page-actions .web-button,
.web-ride-create-mobile-actions .web-button {
  min-width: 196px;
}

.web-ride-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 22px;
  align-items: start;
}

.web-ride-create-main,
.web-ride-create-sidebar {
  display: grid;
  gap: 18px;
}

.web-ride-create-sidebar {
  position: sticky;
  top: 96px;
}

.web-ride-create-section,
.web-ride-create-side-card {
  padding: 20px 22px;
}

.web-ride-create-section-head,
.web-ride-create-side-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.web-ride-create-section-head {
  margin-bottom: 18px;
}

.web-ride-create-section-icon,
.web-ride-create-side-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 79, 25, 0.12);
  border: 1px solid rgba(255, 79, 25, 0.18);
  color: var(--web-accent);
}

.web-ride-create-section-head h2,
.web-ride-create-side-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.22;
}

.web-ride-create-section-head p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.55;
}

.web-ride-create-cover-frame {
  position: relative;
  min-height: 256px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 79, 25, 0.2);
  background: #0d0d0f;
}

.web-ride-create-cover-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top right, rgba(255, 79, 25, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(4, 6, 10, 0.06), rgba(4, 6, 10, 0.84));
}

.web-ride-create-cover-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.web-ride-create-cover-overlay {
  position: relative;
  z-index: 1;
  min-height: 256px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: 24px;
}

.web-ride-create-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.web-ride-create-file-meta {
  display: grid;
  gap: 4px;
  max-width: 520px;
}

.web-ride-create-file-meta strong {
  color: #f5f5f7;
  font-size: 16px;
  line-height: 1.35;
}

.web-ride-create-file-meta span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.5;
}

.web-ride-create-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.web-ride-create-difficulty-option {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f3f3f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.btn-check:focus + .web-ride-create-difficulty-option {
  border-color: var(--web-accent);
  box-shadow: 0 0 0 3px rgba(255, 79, 25, 0.16);
}

.btn-check:checked + .web-ride-create-difficulty-option.tone-easy {
  border-color: rgba(24, 212, 90, 0.34);
  background: rgba(24, 212, 90, 0.12);
  color: #7ff0a5;
}

.btn-check:checked + .web-ride-create-difficulty-option.tone-medium {
  border-color: rgba(255, 177, 0, 0.34);
  background: rgba(255, 177, 0, 0.12);
  color: #ffd36d;
}

.btn-check:checked + .web-ride-create-difficulty-option.tone-hard {
  border-color: rgba(255, 87, 87, 0.34);
  background: rgba(255, 87, 87, 0.12);
  color: #ff9696;
}

.web-ride-create-side-card {
  display: grid;
  gap: 16px;
}

.web-ride-create-side-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.76);
  display: grid;
  gap: 10px;
  line-height: 1.55;
}

.web-ride-create-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.web-ride-create-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.45;
}

.web-ride-create-checklist li.is-required {
  border-color: rgba(255, 79, 25, 0.18);
  background: rgba(255, 79, 25, 0.08);
  color: #f5f5f7;
}

.web-ride-create-checklist i {
  margin-top: 2px;
  color: var(--web-accent);
}

.web-ride-create-tip-list {
  display: grid;
  gap: 12px;
}

.web-ride-create-tip-item {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  line-height: 1.5;
}

.web-ride-create-mobile-actions {
  display: none;
  gap: 12px;
}

.web-rides-create-modal-points {
  display: grid;
  gap: 10px;
}

.web-rides-create-modal-points span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 700;
}

.web-rides-create-modal-points i {
  color: var(--web-accent);
}

.web-form-modal.web-rides-create-modal-shell {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
}

.web-rides-create-modal-content {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.web-form-modal.web-rides-create-modal-shell .modal-content {
  min-height: 100dvh;
  border-radius: 0;
}

.web-rides-create-modal-content > .modal-header,
.web-rides-create-modal-content > form > .modal-footer {
  flex-shrink: 0;
}

.web-rides-create-modal-content > form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.web-form-modal.web-rides-create-modal-shell .modal-header,
.web-form-modal.web-rides-create-modal-shell .modal-footer {
  padding-inline: 28px;
}

.web-form-modal.web-rides-create-modal-shell .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 28px;
  background:
    linear-gradient(145deg, rgba(255, 79, 25, 0.08), transparent 32%),
    rgba(6, 6, 8, 0.95);
}

.web-rides-create-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap: 18px;
}

.web-rides-create-form-grid {
  display: grid;
  gap: 14px;
}

.web-rides-create-side {
  display: grid;
  gap: 14px;
}

.web-rides-create-side-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(145deg, rgba(255, 79, 25, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.03);
}

.web-rides-create-side-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.web-rides-create-side-card p {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

/* Members directory */
.web-members-page-head {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
}

.web-members-page-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 4px;
}

.web-members-page-banner {
  min-height: 136px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(3, 6, 10, 0.14), rgba(3, 6, 10, 0.58)),
    url("/static/img/web/hero-2.png") center center / cover no-repeat;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

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

.web-members-overview-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 116px;
  padding: 20px 22px;
  margin-top: 22px;
}

.web-members-overview-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 22px;
  background: rgba(255, 79, 25, 0.1);
  border: 1px solid rgba(255, 79, 25, 0.18);
  color: var(--web-accent);
}

.web-members-overview-card.tone-online .web-members-overview-icon {
  background: rgba(25, 212, 90, 0.1);
  border-color: rgba(25, 212, 90, 0.18);
  color: var(--web-green);
}

.web-members-overview-card.tone-blue .web-members-overview-icon {
  background: rgba(61, 139, 255, 0.1);
  border-color: rgba(61, 139, 255, 0.18);
  color: #5f9dff;
}

.web-members-overview-card.tone-gold .web-members-overview-icon {
  background: rgba(255, 177, 0, 0.1);
  border-color: rgba(255, 177, 0, 0.18);
  color: #ffb100;
}

.web-members-overview-copy small {
  display: block;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.web-members-overview-copy strong {
  display: block;
  margin: 4px 0 5px;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
}

.web-members-overview-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.4;
}

.web-members-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.web-members-main,
.web-members-sidebar {
  display: grid;
  gap: 18px;
}

.web-members-toolbar {
  display: grid;
  gap: 14px 16px;
  padding: 18px 20px;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "form form"
    "filters results";
}

.web-members-toolbar-form {
  display: grid;
  grid-area: form;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: end;
}

.web-members-search,
.web-members-sort {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.web-members-sort .form-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.web-members-search-button {
  width: 52px;
  min-width: 52px;
  padding: 0;
}

.web-members-primary-filters {
  grid-area: filters;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: center;
}

.web-members-primary-filter {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.78);
  color: #d0d2d8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.web-members-primary-filter:hover,
.web-members-primary-filter:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.web-members-primary-filter.active {
  color: var(--web-accent);
  border-color: rgba(255, 79, 25, 0.28);
  background: rgba(255, 79, 25, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 25, 0.08);
}

.web-members-results-copy {
  grid-area: results;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.web-members-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.web-member-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  margin-top: 22px;
}

.web-member-card-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.web-member-card-avatar,
.web-member-detail-avatar {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 79, 25, 0.28);
  background: rgba(255, 79, 25, 0.08);
  overflow: visible;
  display: grid;
  place-items: center;
  color: var(--web-accent);
  font-size: 28px;
  font-weight: 900;
}

.web-member-detail-avatar {
  width: 112px;
  height: 112px;
  font-size: 42px;
}

.web-member-card-avatar img,
.web-member-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.web-member-card-presence {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(12%, 12%);
  border: 3px solid #141414;
  background: #555;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 1;
}

.web-member-card-presence.is-online {
  background: var(--web-green);
}

.web-member-detail-avatar .web-member-card-presence {
  width: 16px;
  height: 16px;
}

.web-member-card-copy h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.08;
}

.web-member-card-copy p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.web-member-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.web-member-card-bio {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

.web-member-card-bio.is-empty {
  color: rgba(255, 255, 255, 0.46);
}

.web-member-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-membership-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #d6d8df;
  font-size: 12px;
  font-weight: 800;
}

.web-membership-pill.type-entry {
  color: #b6bbc8;
}

.web-membership-pill.type-rider {
  border-color: rgba(69, 144, 255, 0.28);
  background: rgba(69, 144, 255, 0.1);
  color: #7cb6ff;
}

.web-membership-pill.type-vip {
  border-color: rgba(170, 94, 255, 0.28);
  background: rgba(170, 94, 255, 0.1);
  color: #c795ff;
}

.web-members-sidebar-card h2,
.web-member-detail-card h2 {
  margin: 0;
}

.web-members-sidebar-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
}

.web-members-sidebar-subtitle i {
  color: var(--web-accent);
  font-size: 13px;
}

.web-members-sidebar-card {
  display: grid;
  gap: 14px;
}

.web-members-sidebar-badge {
  padding: 0 12px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 79, 25, 0.1);
  border: 1px solid rgba(255, 79, 25, 0.16);
  color: var(--web-accent);
}

.web-members-sidebar-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
}

.web-members-sidebar-stats,
.web-members-quick-list,
.web-members-top-list,
.web-member-detail-info-list,
.web-member-bike-list,
.web-member-badge-list {
  display: grid;
  gap: 10px;
}

.web-members-sidebar-stat,
.web-members-quick-link,
.web-members-top-list li,
.web-member-detail-info-row,
.web-member-bike-item,
.web-member-badge-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.web-members-sidebar-stat{
  background: transparent;
  padding: 0;
  min-height: 20px;
}

.web-members-sidebar-stat span,
.web-member-detail-info-row span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.web-members-sidebar-stat strong,
.web-members-quick-check strong,
.web-members-top-list strong,
.web-member-detail-info-row strong {
  color: var(--web-text);
}

.web-members-quick-form {
  display: grid;
  gap: 12px;
}

.web-members-quick-list {
  gap: 8px;
}

.web-members-quick-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 0;
  padding: 0;
}

.web-members-quick-check .form-check-input {
  float: none;
  margin: 0;
  width: 16px;
  height: 16px;
  border-color: rgba(255, 255, 255, 0.28);
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.web-members-quick-check .form-check-input:checked {
  background-color: var(--web-accent);
  border-color: var(--web-accent);
}

.web-members-quick-check .form-check-input:focus {
  box-shadow: 0 0 0 0.18rem rgba(255, 93, 31, 0.18);
}

.web-members-quick-check .form-check-label {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
}

.web-members-quick-check strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
}

.web-members-quick-check.is-checked .form-check-label,
.web-members-quick-check.is-checked strong {
  color: var(--web-text);
}

.web-members-top-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.web-members-top-list li {
  min-height: 24px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.web-members-top-list li span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.web-members-top-list li span i {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

/* Member detail */
.web-member-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.68);
  font-weight: 700;
}

.web-member-profile-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  border-color: rgba(255, 79, 25, 0.42);
  background:
    linear-gradient(90deg, rgba(13, 5, 3, 0.98), rgba(10, 10, 12, 0.82) 46%, rgba(8, 8, 10, 0.92)),
    #090909;
}

.web-member-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at left center, rgba(255, 79, 25, 0.14), transparent 28%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.web-member-profile-hero > * {
  position: relative;
  z-index: 1;
}

.web-member-profile-hero-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.web-member-profile-avatar-wrap {
  display: grid;
  justify-items: center;
}

.web-member-profile-avatar {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid rgba(255, 79, 25, 0.82);
  background: rgba(255, 79, 25, 0.08);
  overflow: visible;
  display: grid;
  place-items: center;
  color: var(--web-accent);
  font-size: 64px;
  font-weight: 900;
  box-shadow: 0 0 34px rgba(255, 79, 25, 0.22);
}

.web-member-profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.web-member-profile-main {
  display: grid;
  gap: 12px;
  align-content: center;
}

.web-member-profile-main h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.web-member-profile-handle {
  margin: -2px 0 0;
  color: #d8d8dd;
  font-size: 19px;
}

.web-member-profile-bio {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.65;
}

.web-member-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.web-member-profile-meta i {
  color: rgba(255, 255, 255, 0.56);
}

.web-member-profile-banner {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, 0.98) 28%, rgba(4, 6, 10, 0.72) 56%, rgba(4, 6, 10, 0.12) 100%),
    url("/static/img/web/hero-2.png") right center / cover no-repeat;
  pointer-events: none;
}

.web-member-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.web-member-admin-copy p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
}

.web-member-admin-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 79, 25, 0.12);
  border: 1px solid rgba(255, 79, 25, 0.2);
  color: var(--web-accent);
}

.web-member-profile-top-grid,
.web-member-profile-bottom-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.web-member-profile-top-grid {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
}

.web-member-profile-bottom-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.web-member-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.web-member-section-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.web-member-profile-about-card,
.web-member-profile-gallery-card{
  margin-top: 22px;
}

.web-member-profile-about-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.65;
}

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

.web-member-profile-fact {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.web-member-profile-fact span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.web-member-profile-fact span i {
  color: var(--web-accent);
}

.web-member-profile-fact strong {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.25;
}

.web-member-motorcycle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.web-member-motorcycle-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.78);
}

.web-member-motorcycle-media {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.04);
}

.web-member-motorcycle-media img,
.web-member-motorcycle-placeholder {
  width: 100%;
  height: 100%;
}

.web-member-motorcycle-media img {
  display: block;
  object-fit: cover;
}

.web-member-motorcycle-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 32px;
}

.web-member-motorcycle-copy {
  display: grid;
  gap: 6px;
  padding: 14px 14px 16px;
}

.web-member-motorcycle-copy strong {
  color: var(--web-accent);
  font-size: 16px;
  line-height: 1.2;
}

.web-member-motorcycle-copy p,
.web-member-motorcycle-copy span {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.web-member-motorcycle-copy span {
  color: rgba(var(--web-white-rgb), 0.6);
}

.web-member-motorcycle-card .web-membership-pill {
  position: absolute;
  top: 12px;
  right: 12px;
}

.web-member-profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.web-member-profile-gallery-item {
  position: relative;
  min-height: 152px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.web-member-profile-gallery-item.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.web-member-profile-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.web-member-profile-gallery-overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.86));
}

.web-member-profile-gallery-overlay p {
  margin: 0;
  color: #f2f2f5;
  font-size: 13px;
  line-height: 1.35;
}

.web-member-gallery-like-form {
  margin-left: auto;
}

.web-member-gallery-like-button {
  min-width: 54px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 7, 7, 0.62);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
}

.web-member-gallery-like-button.is-liked {
  border-color: rgba(255, 79, 25, 0.32);
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
}

.web-member-profile-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
}

.web-member-profile-badge {
  text-align: center;
}

.web-member-profile-badge img {
  width: min(96px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.web-member-profile-badge strong {
  display: block;
  color: #f3f3f6;
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 1240px) {
  .web-page-head {
    grid-template-columns: 1fr;
  }

  .web-ride-create-page-head,
  .web-ride-create-layout {
    grid-template-columns: 1fr;
  }

  .web-rides-head-action {
    display: none;
  }

  .web-rides-head-action-mobile {
    display: inline-flex;
  }

  .web-ride-create-page-actions {
    justify-content: flex-start;
  }

  .web-rides-card-grid {
    grid-template-columns: 1fr;
  }

  .web-rides-create-modal-grid {
    grid-template-columns: 1fr;
  }

  .web-ride-create-sidebar {
    position: static;
  }

  .web-members-layout {
    grid-template-columns: 1fr;
  }

  .web-members-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .web-member-profile-hero-shell,
  .web-member-profile-top-grid,
  .web-member-profile-bottom-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 980px) {
  .web-rides-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .web-rides-overview-card {
    min-height: unset;
    padding: 12px 8px;
  }

  .web-rides-overview-card strong {
    font-size: 22px;
  }

  .web-rides-overview-card span {
    font-size: 12px;
  }

  .web-rides-overview-card small {
    font-size: 11px;
  }

  .web-ride-create-difficulty-grid {
    grid-template-columns: 1fr;
  }

  .web-members-toolbar-form {
    grid-template-columns: 1fr;
  }

  .web-members-sort-label {
    display: none;
  }

  .web-members-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .web-members-overview-card {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    min-height: unset;
    padding: 12px 12px;
    gap: 4px 10px;
  }

  .web-members-overview-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    border-radius: 12px;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }

  .web-members-overview-copy {
    display: contents;
  }

  .web-members-overview-copy strong {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    font-size: 26px;
    margin: 0;
  }

  .web-members-overview-copy small {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .web-members-overview-copy p {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: 0;
  }

  .web-member-detail-stat-grid,
  .web-member-detail-grid {
    grid-template-columns: 1fr;
  }

  .web-member-admin-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .web-member-motorcycle-grid,
  .web-member-profile-badges-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .web-rides-overview-panel {
    padding: 16px;
  }

  .web-ride-create-page-actions {
    display: none;
  }

  .web-ride-create-mobile-actions {
    display: grid;
  }

  .web-ride-create-section,
  .web-ride-create-side-card {
    padding: 18px;
  }

  .web-ride-create-cover-overlay {
    min-height: 224px;
    padding: 18px;
  }

  .web-form-modal.web-rides-create-modal-shell .modal-header,
  .web-form-modal.web-rides-create-modal-shell .modal-body,
  .web-form-modal.web-rides-create-modal-shell .modal-footer {
    padding-inline: 18px;
  }

  .web-form-modal.web-rides-create-modal-shell .modal-body {
    padding-block: 18px;
  }

  .web-rides-create-side-card {
    padding: 14px;
  }

  .web-rides-scope-switch {
    grid-template-columns: 1fr;
  }

  .web-rides-toolbar {
    padding: 16px;
  }

  .web-rides-difficulty-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .web-rides-difficulty-filters::-webkit-scrollbar {
    height: 0;
  }

  .web-ride-feed-card-content h2 {
    max-width: none;
    font-size: clamp(24px, 7vw, 34px);
  }

  .web-ride-feed-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .web-members-card-grid {
    grid-template-columns: 1fr;
  }

  .web-members-page-banner {
    min-height: 180px;
  }

  .web-members-toolbar {
    padding: 16px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "filters"
      "results";
  }

  .web-members-results-copy {
    justify-self: start;
  }

  .web-members-primary-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
    padding-right: 20px;
  }

  .web-members-primary-filters::-webkit-scrollbar {
    display: none;
  }

  .web-members-primary-filter {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .web-members-page-actions {
    width: 100%;
  }

  .web-members-page-actions .web-button {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    background: var(--web-accent);
    border-color: transparent;
    color: #ffffff;
  }

  .web-members-page-actions .web-button:hover,
  .web-members-page-actions .web-button:focus {
    background: #e0410d;
    color: #ffffff;
  }

  .web-members-sidebar .web-members-sidebar-card:nth-child(n+2) {
    display: none;
  }

  .web-members-overview-grid {
    display: none;
  }

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

  .web-member-profile-avatar {
    width: 148px;
    height: 148px;
    font-size: 52px;
  }

  .web-member-profile-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .web-member-profile-facts,
  .web-member-motorcycle-grid,
  .web-member-profile-badges-grid,
  .web-member-profile-gallery-grid {
    grid-template-columns: 1fr;
  }

  .web-member-profile-gallery-item.is-featured {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ─── Footer links ─────────────────────────────────────────────────────────── */

.web-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
}

.web-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  color: #a0a0a8;
  font-size: 12px;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.web-footer-links a i {
  font-size: 11px;
  color: var(--web-accent);
  opacity: 0.8;
}

.web-footer-links a:hover {
  color: var(--web-text);
  border-color: rgba(255, 79, 25, 0.30);
  background: rgba(255, 79, 25, 0.07);
}

/* ─── Community Rules ──────────────────────────────────────────────────────── */

.web-rules-back-row {
  margin-bottom: 14px;
}

.web-rules-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--web-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--web-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.web-rules-back-btn i {
  font-size: 12px;
}

.web-rules-back-btn:hover {
  color: var(--web-text);
  border-color: rgba(255, 79, 25, 0.35);
  background: rgba(255, 79, 25, 0.07);
}

.web-rules-hero-band {
  position: relative;
  overflow: hidden;
  padding: 30px 28px;
  border-color: rgba(255, 79, 25, 0.22);
  background:
    linear-gradient(105deg, rgba(18, 18, 20, 0.97) 0%, rgba(18, 18, 20, 0.88) 55%, rgba(18, 18, 20, 0.55) 100%),
    url("/static/img/web/hero-2.png") center right / cover no-repeat;
}

.web-rules-hero-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.web-rules-hero-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 79, 25, 0.32);
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
  font-size: 28px;
}

.web-rules-hero-copy h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
}

.web-rules-hero-copy p {
  margin: 0;
  color: var(--web-muted);
  font-size: 14px;
  line-height: 1.5;
}

.web-rules-intro {
  color: var(--web-muted);
  font-size: 15px;
  line-height: 1.7;
  padding: 18px 20px;
  border-left: 3px solid var(--web-accent);
  background: rgba(255, 79, 25, 0.05);
}

.web-rules-intro p {
  margin: 0;
}

.web-rules-sections {
  display: grid;
  gap: 14px;
}

.web-rules-section {
  padding: 0;
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease;
  animation: webReveal 360ms ease both;
}

.web-rules-section:hover {
  border-color: rgba(255, 79, 25, 0.28);
}

.web-rules-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--web-line);
}

.web-rules-section-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--web-accent-soft);
  border: 1px solid rgba(255, 79, 25, 0.28);
  color: var(--web-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.web-rules-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.web-rules-section-desc {
  padding: 12px 20px 0;
  margin: 0;
  color: var(--web-muted);
  font-size: 13px;
  line-height: 1.55;
}

.web-rules-list {
  margin: 0;
  padding: 14px 20px 18px 40px;
  display: grid;
  gap: 10px;
  list-style: none;
}

.web-rules-list li {
  position: relative;
  padding-left: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #d8d8de;
}

.web-rules-list li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--web-accent);
  opacity: 0.6;
}

ol.web-rules-list {
  counter-reset: rules-counter;
}

ol.web-rules-list li {
  counter-increment: rules-counter;
  padding-left: 4px;
}

ol.web-rules-list li::before {
  content: counter(rules-counter);
  left: -26px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--web-accent-soft);
  border: 1px solid rgba(255, 79, 25, 0.25);
  color: var(--web-accent);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  opacity: 1;
}

/* Emergency section – alarming red styling */

.web-rules-section.is-emergency {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.04);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12), 0 8px 28px rgba(220, 38, 38, 0.10);
}

.web-rules-section.is-emergency:hover {
  border-color: rgba(220, 38, 38, 0.65);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.22), 0 12px 36px rgba(220, 38, 38, 0.16);
}

.web-rules-section.is-emergency .web-rules-section-head {
  border-bottom-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.06);
}

.web-rules-section.is-emergency .web-rules-section-num {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.38);
  color: #ef4444;
}

.web-rules-section.is-emergency .web-rules-section-head h2 {
  color: #ef4444;
}

.web-rules-section.is-emergency .web-rules-section-head .web-rules-emergency-icon {
  margin-left: auto;
  color: #ef4444;
  font-size: 18px;
  animation: webRulesEmergencyPulse 1.8s ease-in-out infinite;
}

.web-rules-section.is-emergency .web-rules-list li {
  color: #f0d0d0;
}

.web-rules-section.is-emergency .web-rules-list li::before {
  background: #ef4444;
  opacity: 0.75;
}

.web-rules-section.is-emergency ol.web-rules-list li::before {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.40);
  color: #ef4444;
  opacity: 1;
}

.web-rules-emergency-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 18px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.28);
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.web-rules-emergency-callout i {
  flex-shrink: 0;
  font-size: 16px;
}

.web-rules-updated-at {
  margin: 8px 4px 0;
  font-size: 12px;
  color: var(--web-muted);
  opacity: 0.65;
}


@keyframes webRulesEmergencyPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.88); }
}

@media (max-width: 480px) {
  .web-rules-hero-band {
    padding: 20px 16px;
  }

  .web-rules-hero-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .web-rules-section-head {
    padding: 14px 16px 12px;
  }

  .web-rules-list {
    padding: 12px 16px 16px 36px;
  }

  .web-rules-emergency-callout {
    margin: 0 16px 14px;
  }
}


/* ─── Ride Detail ─────────────────────────────────────────────────────────── */

.web-ride-detail-page {
  width: 100%;
  max-width: 1456px;
  margin-inline: auto;
}

.web-ride-detail-page .web-panel {
  background: rgba(18, 18, 18, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

.web-ride-detail-back {
  margin-bottom: 14px;
}

/* Hero */
.web-ride-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #09090b;
  border-color: rgba(255, 79, 25, 0.22);
}

.web-ride-detail-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 79, 25, 0.16), transparent 26%),
    linear-gradient(90deg, rgba(6, 6, 8, 0.90) 0%, rgba(6, 6, 8, 0.66) 45%, rgba(6, 6, 8, 0.26) 100%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.26) 0%, rgba(6, 6, 8, 0.82) 100%),
    var(--ride-detail-image) center / cover no-repeat;
  pointer-events: none;
}

.web-ride-detail-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 28px;
  flex: 1;
  max-width: 720px;
}

.web-ride-detail-hero-tag {
  width: fit-content;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 79, 25, 0.34);
  border-radius: 6px;
  background: rgba(255, 79, 25, 0.13);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  color: #ff8b64;
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-ride-detail-hero-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-ride-detail-hero-content h1 {
  margin: 0;
  font-size: clamp(24px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.web-ride-detail-hero-desc {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.web-ride-detail-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.web-ride-detail-hero .web-ride-feed-card-date,
.web-ride-detail-hero .web-ride-feed-card-pill {
  min-height: 34px;
  margin-bottom: 0;
  padding-inline: 13px;
}

/* Stats strip */
.web-ride-detail-stats-strip {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.95);
}

.web-ride-detail-stats-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: visible;
}

.web-ride-detail-stats-inner::-webkit-scrollbar {
  display: none;
}

.web-ride-detail-stats-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  min-width: 0;
  min-height: 68px;
  background: rgba(255, 255, 255, 0.018);
}

.web-ride-detail-stats-chip::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
  display: none;
}

.web-ride-detail-stats-chip:last-child::after {
  display: none;
}

.web-ride-detail-stats-chip > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--web-accent);
  font-size: 14px;
  text-align: center;
}

.web-ride-detail-stats-chip > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.web-ride-detail-stats-chip small {
  display: block;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 750;
  color: rgba(255, 255, 255, 0.52);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.web-ride-detail-stats-chip strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 850;
  color: var(--web-text);
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.web-ride-detail-stats-chip.is-meeting,
.web-ride-detail-stats-chip.is-start,
.web-ride-detail-stats-chip.is-end {
  min-width: 0;
}

.web-ride-detail-stats-chip.is-time > i,
.web-ride-detail-stats-chip.is-duration > i,
.web-ride-detail-stats-chip.is-distance > i {
  background: rgba(255, 79, 25, 0.1);
  color: var(--web-accent);
}

.web-ride-detail-stats-chip.is-date > i,
.web-ride-detail-stats-chip.is-meeting > i,
.web-ride-detail-stats-chip.is-start > i,
.web-ride-detail-stats-chip.is-end > i,
.web-ride-detail-stats-chip.is-max > i {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.web-ride-detail-stats-chip.is-registered > i {
  background: rgba(24, 212, 90, 0.1);
  color: var(--web-green);
}

/* Action bar */
.web-ride-detail-action-bar {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
}

.web-ride-detail-action-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--web-text);
}

.web-ride-detail-action-info i {
  color: var(--web-accent);
  margin-right: 5px;
}

.web-ride-detail-spots {
  font-size: 13px;
  font-weight: 600;
  color: var(--web-green);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.web-ride-detail-spots.is-full {
  color: #ff8d8d;
}

.web-ride-detail-action-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.web-ride-detail-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 157, 66, 0.34);
  background: rgba(255, 157, 66, 0.12);
  color: #ffc37a;
  font-size: 14px;
  font-weight: 850;
}

/* Section label (shared) */
.web-ride-detail-section-label {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 850;
  color: #ffffff;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.web-ride-detail-section-label i {
  color: var(--web-accent);
  font-size: 13px;
}

/* Main two-column layout */
.web-ride-detail-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.web-ride-detail-left,
.web-ride-detail-right {
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Generic section panel */
.web-ride-detail-section {
  padding: 20px 22px;
}

.web-ride-detail-section p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #d0d0d8;
}

/* Organizer card */
.web-ride-detail-organizer-card {
  padding: 20px 22px;
  display: grid;
  align-content: start;
}

.web-ride-detail-organizer-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--web-text);
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--web-line);
}

.web-ride-detail-organizer-inner:hover .web-ride-detail-org-meta strong {
  color: var(--web-accent);
}

.web-ride-detail-org-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 79, 25, 0.30);
}

.web-ride-detail-org-initial {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  border: 2px solid rgba(255, 79, 25, 0.30);
  color: var(--web-accent);
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.web-ride-detail-org-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.web-ride-detail-org-meta strong {
  font-size: 15px;
  font-weight: 700;
  transition: color 140ms ease;
}

.web-ride-detail-org-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #ffc37a;
}

.web-ride-detail-org-badge i {
  font-size: 10px;
}

.web-ride-detail-org-city {
  font-size: 12px;
  color: var(--web-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.web-ride-detail-org-about-label {
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--web-muted);
  text-transform: none;
  letter-spacing: 0;
}

.web-ride-detail-org-bio {
  margin: 0;
  font-size: 13px;
  color: #b4b4c0;
  line-height: 1.65;
}

/* Route card */
.web-ride-detail-route-card {
  padding: 20px 22px;
  display: grid;
  align-content: start;
}

.web-ride-detail-route {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.web-ride-detail-route-stop {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.web-ride-detail-route-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
}

.web-ride-detail-route-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid rgba(255, 79, 25, 0.78);
  background: rgba(255, 79, 25, 0.12);
  box-shadow: 0 0 0 4px rgba(255, 79, 25, 0.10);
}

.web-ride-detail-route-dot.is-meeting {
  border-color: rgba(24, 212, 90, 0.78);
  background: rgba(24, 212, 90, 0.13);
  box-shadow: 0 0 0 4px rgba(24, 212, 90, 0.10);
}

.web-ride-detail-route-dot.is-start {
  border-color: rgba(255, 195, 122, 0.82);
  background: rgba(255, 195, 122, 0.14);
  box-shadow: 0 0 0 4px rgba(255, 195, 122, 0.10);
}

.web-ride-detail-route-dot.is-end {
  border-color: rgba(255, 79, 25, 0.82);
}

.web-ride-detail-route-connector {
  flex: 1;
  width: 2px;
  background: var(--web-line);
  margin: 5px 0;
  min-height: 18px;
}

.web-ride-detail-route-info {
  padding-bottom: 20px;
  min-width: 0;
}

.web-ride-detail-route-stop.is-last .web-ride-detail-route-info {
  padding-bottom: 0;
}

.web-ride-detail-route-info small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--web-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 3px;
}

.web-ride-detail-route-info strong {
  display: block;
  font-size: 14px;
  font-weight: 750;
  color: var(--web-text);
  line-height: 1.35;
}

.web-ride-detail-route-note {
  padding: 12px 0 0;
  margin-top: 10px;
  border-top: 1px solid var(--web-line);
}

.web-ride-detail-route-note + .web-ride-detail-route-note {
  padding-top: 10px;
  margin-top: 10px;
}

.web-ride-detail-route-note small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--web-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.web-ride-detail-route-note p {
  margin: 0;
  font-size: 13px;
  color: #c0c0cc;
  line-height: 1.65;
}

/* Participants card */
.web-ride-detail-participants-card {
  padding: 20px 22px;
}

.web-ride-detail-avatar-stack {
  display: flex;
  margin-bottom: 16px;
}

.web-ride-detail-avatar-stack img,
.web-ride-detail-avatar-initial,
.web-ride-detail-avatar-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--web-surface);
  margin-left: -8px;
  flex-shrink: 0;
  object-fit: cover;
}

.web-ride-detail-avatar-stack > *:first-child {
  margin-left: 0;
}

.web-ride-detail-avatar-initial {
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  font-size: 13px;
  font-weight: 700;
}

.web-ride-detail-avatar-more {
  display: grid;
  place-items: center;
  background: #2a2a2a;
  color: var(--web-muted);
  font-size: 11px;
  font-weight: 700;
}

.web-ride-detail-members-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--web-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.web-ride-detail-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--web-line);
  text-decoration: none;
  color: var(--web-text);
  font-size: 13px;
  font-weight: 500;
  transition: background 140ms ease, border-color 140ms ease;
}

.web-ride-detail-member-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.15);
}

.web-ride-detail-member-chip img,
.web-ride-detail-chip-initial {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.web-ride-detail-chip-initial {
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  font-size: 11px;
  font-weight: 700;
}

.web-ride-detail-member-chip.is-organizer {
  border-color: rgba(255, 195, 122, 0.30);
  background: rgba(255, 157, 66, 0.08);
}

.web-ride-detail-member-chip.is-organizer i {
  color: #ffc37a;
  font-size: 11px;
}

/* Requirements */
.web-ride-detail-fullwidth {
  margin-top: 0;
}

.web-ride-detail-requirements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.web-ride-detail-requirements li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #d0d0d8;
  line-height: 1.5;
  flex: 0 1 calc(50% - 5px);
  min-width: 200px;
}

.web-ride-detail-requirements li i {
  color: var(--web-green);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Briefing full-width */
.web-ride-detail-briefing-full {
  padding: 20px 22px;
}

.web-ride-detail-briefing-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.web-ride-detail-briefing-head .web-ride-detail-section-label {
  margin: 0;
}

.web-ride-detail-briefing-full p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #d0d0d8;
}

.web-ride-detail-suitability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.web-ride-detail-suitability.tone-good {
  background: rgba(24, 212, 90, 0.12);
  color: var(--web-green);
  border: 1px solid rgba(24, 212, 90, 0.25);
}

.web-ride-detail-suitability.tone-caution {
  background: rgba(255, 157, 66, 0.12);
  color: #ffc37a;
  border: 1px solid rgba(255, 157, 66, 0.25);
}

.web-ride-detail-suitability.tone-poor {
  background: rgba(255, 80, 80, 0.12);
  color: #ff8d8d;
  border: 1px solid rgba(255, 80, 80, 0.25);
}

/* Full-width bottom spacing */
.web-ride-detail-briefing-full,
.web-ride-detail-section.web-ride-detail-fullwidth {
  margin-top: 14px;
}

/* Responsive */
@media (min-width: 760px) {
  .web-ride-detail-hero {
    min-height: 380px;
  }

  .web-ride-detail-layout {
    grid-template-columns: 300px 1fr;
  }

  .web-ride-detail-requirements li {
    flex: 0 1 calc(33% - 7px);
  }
}

@media (min-width: 1040px) {
  .web-ride-detail-hero {
    min-height: 420px;
  }

  .web-ride-detail-layout {
    grid-template-columns: 320px 1fr;
  }

  .web-ride-detail-hero-body {
    max-width: 720px;
  }
}

/* Ride detail supported web layout */
.web-ride-detail-chrome {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 38px;
  margin: -4px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.web-ride-detail-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.web-ride-detail-titlebar h1 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 900;
}

.web-ride-detail-top-grid {
  display: grid;
  gap: 14px;
  align-items: stretch;
}

.web-ride-detail-top-grid > .web-panel,
.web-ride-detail-left > .web-panel,
.web-ride-detail-right > .web-panel {
  margin-top: 0;
}

.web-ride-detail-hero-content h2 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}

.web-ride-feed-card-pill.tone-approved {
  border-color: rgba(24, 212, 90, 0.24);
  background: rgba(24, 212, 90, 0.1);
  color: #a7f3bf;
}

.web-ride-detail-action-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 0;
  background: rgba(14, 14, 14, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

.web-ride-detail-action-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.web-ride-detail-action-count span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.web-ride-detail-action-count i {
  color: var(--web-accent);
}

.web-ride-detail-action-count strong {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.web-ride-detail-action-stack {
  display: grid;
  gap: 8px;
  padding: 0;
}

.web-ride-detail-action-stack form,
.web-ride-detail-primary-action {
  width: 100%;
}

.web-ride-detail-primary-action[disabled] {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
  cursor: not-allowed;
}

.web-ride-detail-action-panel .web-ride-detail-primary-action:not(.outline-primary):not(.outline-danger) {
  background: linear-gradient(180deg, #ff5530, #ff4f19);
  border-color: rgba(255, 107, 68, 0.58);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(255, 79, 25, 0.20);
}

.web-ride-detail-action-panel .web-ride-detail-primary-action:not(.outline-primary):not(.outline-danger):hover,
.web-ride-detail-action-panel .web-ride-detail-primary-action:not(.outline-primary):not(.outline-danger):focus {
  background: linear-gradient(180deg, #ff6b46, #ff5628);
}

.web-ride-detail-action-panel .web-button.outline-primary {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.84);
}

.web-ride-detail-action-panel .web-button.outline-primary:hover,
.web-ride-detail-action-panel .web-button.outline-primary:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

.web-ride-detail-action-panel .web-button.outline-primary.is-copied {
  border-color: rgba(24, 212, 90, 0.28);
  background: rgba(24, 212, 90, 0.08);
  color: #a7f3bf;
}

.web-ride-detail-action-note {
  display: flex;
  gap: 10px;
  margin: 0;
  min-height: 54px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(255, 79, 25, 0.22);
  border-radius: 8px;
  background: rgba(255, 79, 25, 0.08);
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.web-ride-detail-action-note i {
  color: var(--web-accent);
  margin-top: 2px;
}

.web-ride-detail-briefing-card,
.web-ride-detail-checklist-card,
.web-ride-detail-weather-card,
.web-ride-detail-gallery-card {
  padding: 20px 22px;
}

.web-ride-detail-briefing-grid {
  display: grid;
  gap: 10px;
}

.web-ride-detail-briefing-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.web-ride-detail-briefing-item > i {
  grid-row: span 2;
  color: var(--web-accent);
  margin-top: 1px;
}

.web-ride-detail-briefing-item.tone-good > i {
  color: var(--web-green);
}

.web-ride-detail-briefing-item.tone-caution > i,
.web-ride-detail-briefing-item.tone-medium > i {
  color: #ffc37a;
}

.web-ride-detail-briefing-item.tone-hard > i {
  color: #ff8d8d;
}

.web-ride-detail-briefing-item strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.2;
}

.web-ride-detail-briefing-item p,
.web-ride-detail-briefing-summary {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.55;
}

.web-ride-detail-briefing-summary {
  margin-top: 12px;
}

.web-ride-detail-checklist {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.web-ride-detail-checklist-summary {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

.web-ride-detail-checklist-summary span {
  color: var(--web-accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.web-ride-detail-checklist-summary strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.web-ride-detail-checklist-summary p {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 1.45;
}

.web-ride-detail-checklist-progress {
  height: 5px;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.web-ride-detail-checklist-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--web-accent), #ff8a52);
  transition: width 180ms ease;
}

.web-ride-detail-checklist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.web-ride-detail-checklist li i {
  color: rgba(255, 255, 255, 0.38);
}

.web-ride-detail-checklist li.is-checked i,
.web-ride-detail-checklist li.is-checked small {
  color: var(--web-green);
}

.web-ride-detail-checklist small {
  font-size: 10px;
  font-weight: 900;
}

.web-ride-detail-checklist-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(255, 79, 25, 0.22);
  border-radius: 999px;
  background: rgba(255, 79, 25, 0.08);
  color: #ff9b78;
  font-size: 10px;
  font-weight: 900;
}

.web-ride-detail-checklist-status.is-complete {
  border-color: rgba(24, 212, 90, 0.22);
  background: rgba(24, 212, 90, 0.08);
  color: #8ff0ad;
}

.web-ride-detail-checklist li button {
  appearance: none;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.web-ride-detail-checklist li button:focus-visible {
  outline: 2px solid rgba(255, 79, 25, 0.75);
  outline-offset: 4px;
}

.web-ride-detail-checklist li.is-checked {
  border-color: rgba(24, 212, 90, 0.18);
  background: rgba(24, 212, 90, 0.055);
}

.web-ride-detail-weather-head,
.web-ride-detail-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.web-ride-detail-weather-head .web-ride-detail-section-label,
.web-ride-detail-gallery-head .web-ride-detail-section-label {
  margin: 0;
}

.web-ride-detail-weather-status,
.web-ride-detail-gallery-head span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.web-ride-detail-weather-status.tone-good {
  border: 1px solid rgba(24, 212, 90, 0.24);
  background: rgba(24, 212, 90, 0.1);
  color: #a7f3bf;
}

.web-ride-detail-weather-status.tone-caution {
  border: 1px solid rgba(255, 195, 122, 0.25);
  background: rgba(255, 195, 122, 0.1);
  color: #ffc37a;
}

.web-ride-detail-weather-status.tone-poor {
  border: 1px solid rgba(255, 80, 80, 0.22);
  background: rgba(255, 80, 80, 0.1);
  color: #ff8d8d;
}

.web-ride-detail-weather-current {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.web-ride-detail-weather-current > i {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffc37a;
  font-size: 26px;
}

.web-ride-detail-weather-current strong {
  display: block;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
}

.web-ride-detail-weather-current span,
.web-ride-detail-weather-current small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.web-ride-detail-weather-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.web-ride-detail-weather-metrics span {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 2px 7px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.web-ride-detail-weather-metrics i {
  grid-row: span 2;
  color: var(--web-accent);
  margin-top: 1px;
}

.web-ride-detail-weather-metrics small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.web-ride-detail-weather-metrics strong {
  color: #ffffff;
  font-size: 12px;
}

.web-ride-detail-weather-summary {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

.web-ride-detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.web-ride-detail-gallery-grid img,
.web-ride-detail-gallery-more {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.web-ride-detail-gallery-more {
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.46);
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

@media (min-width: 760px) {
  .web-ride-detail-hero-content h2 {
    font-size: 40px;
  }

  .web-ride-detail-layout {
    grid-template-columns: 1fr;
  }

  .web-ride-detail-briefing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .web-ride-detail-top-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .web-ride-detail-action-panel {
    min-height: 100%;
  }

  .web-ride-detail-layout {
    grid-template-columns: minmax(230px, 0.7fr) minmax(0, 1.12fr) minmax(0, 0.86fr) minmax(300px, 0.98fr);
    grid-auto-rows: auto;
    align-items: stretch;
    gap: 14px;
  }

  .web-ride-detail-left,
  .web-ride-detail-right {
    display: contents;
  }

  .web-ride-detail-organizer-card {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 264px;
  }

  .web-ride-detail-route-card {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
    min-height: 264px;
  }

  .web-ride-detail-participants-card {
    grid-column: 4;
    grid-row: 1;
  }

  .web-ride-detail-weather-card {
    grid-column: 4;
    grid-row: 2;
  }

  .web-ride-detail-briefing-card {
    grid-column: 1 / span 3;
    grid-row: 3;
  }

  .web-ride-detail-checklist-card {
    grid-column: 4;
    grid-row: 3;
  }

  .web-ride-detail-gallery-card {
    grid-column: 4;
    grid-row: 4;
  }

  .web-ride-detail-requirements-card {
    grid-column: 1 / span 2;
    grid-row: 4;
  }

  .web-ride-detail-notes-card {
    grid-column: 3;
    grid-row: 4;
  }

  .web-ride-detail-hero {
    min-height: 242px;
  }

  .web-ride-detail-hero-body {
    max-width: 720px;
    padding: 28px 32px;
  }

  .web-ride-detail-hero-desc {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.55;
  }

  .web-ride-detail-hero-tag {
    font-size: 12px;
  }

  .web-ride-detail-action-panel {
    padding: 0;
  }

  .web-ride-detail-action-panel .web-button {
    min-height: 54px;
    border-radius: 8px;
    font-size: 15px;
  }

  .web-ride-detail-action-note {
    min-height: 54px;
    align-items: center;
  }

  .web-ride-detail-stats-strip {
    margin-top: 8px;
  }

  .web-ride-detail-stats-inner {
    display: flex;
    overflow-x: hidden;
  }

  .web-ride-detail-stats-chip {
    min-height: 76px;
    padding: 12px 16px;
    flex: 1 1 0;
    min-width: 0;
    background: transparent;
  }

  .web-ride-detail-stats-chip::after {
    display: block;
  }

  .web-ride-detail-stats-chip strong {
    font-size: 13px;
  }

  .web-ride-detail-briefing-card,
  .web-ride-detail-checklist-card,
  .web-ride-detail-weather-card,
  .web-ride-detail-gallery-card,
  .web-ride-detail-organizer-card,
  .web-ride-detail-route-card,
  .web-ride-detail-participants-card,
  .web-ride-detail-section {
    padding: 16px;
  }

  .web-ride-detail-briefing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .web-ride-detail-checklist {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    align-items: stretch;
  }

  .web-ride-detail-checklist li {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 12px;
  }
}

@media (min-width: 1280px) {
  .web-ride-detail-layout {
    grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.1fr) minmax(0, 0.78fr) minmax(320px, 0.98fr);
  }

  .web-ride-detail-hero {
    min-height: 252px;
  }

  .web-ride-detail-hero-content h2 {
    font-size: 42px;
  }
}

/* ============================================================
   Benefit detail pages — partner & offer
   ============================================================ */

.web-benefit-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #09090b;
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: var(--benefit-card-accent, var(--web-accent));
}

.web-benefit-detail-cover {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.web-benefit-detail-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.32;
}

.web-benefit-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 6, 8, 0.26) 0%, rgba(6, 6, 8, 0.88) 100%);
}

.web-benefit-detail-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
}

.web-benefit-detail-identity {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.web-benefit-detail-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-benefit-detail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.web-benefit-detail-logo-placeholder {
  font-size: 26px;
  color: var(--benefit-card-accent, var(--web-accent));
}

.web-benefit-detail-identity > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-benefit-detail-identity h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.web-benefit-detail-tagline {
  margin: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
  font-style: italic;
}

.web-benefit-detail-badges {
  flex-wrap: wrap;
}

.web-benefit-detail-partner-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-benefit-detail-partner-link {
  color: var(--benefit-card-accent, var(--web-accent));
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.web-benefit-detail-partner-link:hover {
  color: #fff;
}

.web-benefit-value-pill-hero {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-size: 28px;
  font-weight: 900;
  z-index: 2;
}

/* Layout */

.web-benefit-detail-layout {
  width: 100%;
  max-width: 1456px;
  margin-inline: auto;
  margin-top: 0;
}

.web-benefit-detail-section {
  margin-bottom: 0;
}

.web-benefit-detail-sidebar {
  position: sticky;
  top: 80px;
}

/* Community note */

.web-benefit-detail-community-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 14px;
}

.web-benefit-detail-community-note i {
  color: var(--benefit-card-accent, var(--web-accent));
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.web-benefit-detail-community-note p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
}

/* Locations */

.web-benefit-locations-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.web-benefit-location-card {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-benefit-location-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.web-benefit-location-head .web-action-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.web-benefit-location-head > div,
.web-benefit-partner-summary > div,
.web-map-cluster-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-benefit-location-head strong {
  font-size: 14px;
  color: #f3f3f5;
}

.web-benefit-location-head small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.46);
}

.web-benefit-location-address {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 42px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.web-benefit-location-hours {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-left: 42px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

.web-benefit-location-hours i {
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 12px;
}

.web-benefit-location-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.web-benefit-location-area-notes {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
  padding-left: 42px;
}

.web-benefit-location-actions {
  padding-left: 42px;
  margin-top: 0;
}

/* Contact sidebar */

.web-benefit-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-benefit-contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.web-benefit-contact-list i {
  width: 18px;
  text-align: center;
  color: var(--benefit-card-accent, var(--web-accent));
  flex-shrink: 0;
}

.web-benefit-contact-list a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  word-break: break-all;
}

.web-benefit-contact-list a:hover {
  color: #fff;
}

.web-benefit-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Info list sidebar */

.web-benefit-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.web-benefit-info-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.web-benefit-info-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.web-benefit-info-list span {
  color: rgba(255, 255, 255, 0.46);
}

.web-benefit-info-list strong {
  color: #f3f3f5;
  text-align: right;
}

/* Redemption band */

.web-benefit-redemption-band {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 14px;
}

.web-benefit-redemption-band .web-action-icon {
  flex-shrink: 0;
  background: rgba(var(--web-accent-rgb, 255, 93, 31), 0.12);
  color: var(--benefit-card-accent, var(--web-accent));
}

.web-benefit-redemption-band > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.web-benefit-redemption-band strong {
  font-size: 14px;
  color: #f3f3f5;
}

.web-benefit-redemption-band p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.web-benefit-redemption-band small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.44);
}

/* Promo code */

.web-benefit-promo-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  margin-top: 6px;
  width: fit-content;
}

.web-benefit-promo-code span {
  color: rgba(255, 255, 255, 0.5);
}

.web-benefit-promo-code strong {
  font-family: monospace;
  letter-spacing: 0.06em;
  color: var(--benefit-card-accent, var(--web-accent));
  font-size: 14px;
}

/* Promo code row in card */

.web-benefit-promo-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.web-benefit-promo-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.44);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.web-benefit-promo-value {
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--benefit-card-accent, var(--web-accent));
}

/* Terms & restrictions */

.web-benefit-terms-list {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.web-benefit-terms-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.5;
}

.web-benefit-restrictions {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 70, 90, 0.05);
  border: 1px solid rgba(255, 70, 90, 0.18);
}

.web-benefit-restrictions strong {
  display: block;
  font-size: 13px;
  color: #ff8b9a;
  margin-bottom: 8px;
}

.web-benefit-restrictions ul {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.web-benefit-restrictions li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

/* Partner summary widget */

.web-benefit-partner-summary-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.web-benefit-partner-summary small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.44);
}

/* Chip size variant */

.web-chip-xs {
  font-size: 10px;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 5px;
}

/* Benefits grid reuse inside detail */

.web-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* Responsive */

@media (max-width: 767px) {
  .web-benefit-detail-hero {
    min-height: 260px;
  }

  .web-benefit-detail-hero-body {
    padding: 18px;
  }

  .web-benefit-detail-identity {
    gap: 12px;
  }

  .web-benefit-detail-logo {
    width: 52px;
    height: 52px;
  }

  .web-benefit-detail-sidebar {
    position: static;
  }

  .web-benefit-location-address,
  .web-benefit-location-hours,
  .web-benefit-location-area-notes,
  .web-benefit-location-actions {
    padding-left: 0;
  }

  .web-benefit-value-pill-hero {
    position: static;
    font-size: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MAP PAGE
   ═══════════════════════════════════════════════════════════ */

.web-map-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 32px;
  transition: all 0.3s ease;
}

.web-map-shell.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0a0a0f;
  padding: 16px;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.web-map-shell.is-fullscreen .web-map-control-bar {
  margin-bottom: 12px;
}

.web-map-shell.is-fullscreen #map-canvas {
  height: calc(100dvh - 180px);
  min-height: 400px;
  max-height: none;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .web-map-shell.is-fullscreen #map-canvas {
    height: calc(100dvh - 320px);
  }
}

/* Control bar / Panel */

.web-map-control-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

.web-map-control-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.web-map-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.web-map-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 79, 25, 0.12);
  color: var(--web-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.web-map-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}

.web-map-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* Actions & Sharing */

.web-map-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .web-map-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .web-map-action-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .web-map-action-row #map-refresh-btn {
    grid-column: span 2;
  }

  .web-map-action-row .web-button {
    width: 100%;
    margin: 0;
  }
}

.web-map-sharing-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.web-map-sharing-wrap.is-active {
  border-color: rgba(74, 222, 128, 0.25);
  background: rgba(74, 222, 128, 0.03);
}

.web-map-sharing-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.web-map-sharing-switch .form-check-input {
  width: 44px;
  height: 24px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
  margin: 0;
  flex-shrink: 0;
}

.web-map-sharing-switch .form-check-input:checked {
  background-color: var(--web-accent);
  border-color: var(--web-accent);
  --bs-form-check-input-checked-bg-color: var(--web-accent);
  --bs-form-check-input-checked-border-color: var(--web-accent);
}

.web-map-sharing-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 79, 25, 0.25);
  border-color: var(--web-accent);
}

.web-map-sharing-switch .form-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.web-map-sharing-switch .form-check-label i {
  color: var(--web-accent);
  font-size: 14px;
  width: 14px;
  text-align: center;
}

.web-map-sharing-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.web-map-sharing-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.web-map-sharing-status-dot.is-active {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.web-map-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .web-map-action-row {
    justify-content: flex-start;
  }
  
  .web-map-action-row .web-button {
    flex: 1;
    min-width: 100px;
    justify-content: center;
  }
  
  .web-map-status-text {
    width: 100%;
    margin-top: 4px;
  }
}

.web-map-status-text {
  font-size: 13px;
}

.web-map-status-text.is-muted { color: rgba(255, 255, 255, 0.4); }
.web-map-status-text.is-error { color: #ff8b9a; }

.web-map-last-refresh {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
}

/* Meta row & Legend */

.web-map-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.web-map-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.web-map-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.web-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--web-accent);
}

.web-map-legend-dot.is-admin { background: #f59e0b; }
.web-map-legend-dot.is-self { background: #4ade80; }

.web-map-legend-cluster-sample {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--web-accent);
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.web-map-privacy-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.32);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.web-map-privacy-note i {
  color: var(--web-accent);
  opacity: 0.6;
}

/* Layout */

.web-map-layout {
  margin-top: 4px;
}

/* Canvas panel */

.web-map-canvas-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
}

#map-canvas {
  width: 100%;
  min-height: 620px;
  height: 70vh;
  max-height: 820px;
  display: block;
  background: #0d0d14;
}

.web-map-loading-overlay,
.web-map-optin-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 1100;
  text-align: center;
  padding: 24px;
}

.web-map-loading-overlay {
  background: rgba(10, 10, 16, 0.88);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
}

.web-map-loading-overlay i {
  font-size: 28px;
  color: var(--web-accent);
}

.web-map-optin-overlay {
  background: rgba(10, 10, 16, 0.92);
  backdrop-filter: blur(3px);
}

.web-map-optin-overlay i {
  font-size: 44px;
  color: var(--web-accent);
  opacity: 0.55;
}

.web-map-optin-overlay h3 {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.web-map-optin-overlay p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  max-width: 300px;
  line-height: 1.6;
}

/* Side panel */

.web-map-side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.web-map-side-stats {
  display: flex;
  gap: 10px;
}

.web-map-side-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.web-map-side-stat-icon {
  font-size: 18px;
  color: var(--web-accent);
  opacity: 0.8;
}

.web-map-side-stat strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.web-map-side-stat small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 3px;
}

.web-map-divider {
  margin: 4px 0;
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

/* Side panel hint */

.web-map-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 16px;
  color: rgba(255, 255, 255, 0.3);
}

.web-map-hint i {
  font-size: 26px;
}

.web-map-hint p {
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

/* Opt-in hint (side panel, sharing off) */

.web-map-optin-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 16px;
  color: rgba(255, 255, 255, 0.38);
}

.web-map-optin-hint i {
  font-size: 30px;
  color: var(--web-accent);
  opacity: 0.45;
}

.web-map-optin-hint h3 {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.web-map-optin-hint p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  line-height: 1.6;
}

/* Member card */

.web-map-member-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.web-map-member-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.web-map-member-avatar.is-admin { border-color: #f59e0b; }
.web-map-member-avatar.is-self { border-color: #4ade80; }

.web-map-member-avatar span {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.web-map-member-info {
  flex: 1;
  min-width: 0;
}

.web-map-member-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.web-map-member-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-map-member-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}

.web-map-member-facts i {
  width: 16px;
  text-align: center;
  color: var(--web-accent);
  opacity: 0.8;
  margin-top: 3px;
  flex-shrink: 0;
}

.web-map-member-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Cluster panel */

.web-map-cluster-panel {
  margin-top: 0;
}

.web-map-cluster-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #fff;
}

.web-map-cluster-header i {
  color: var(--web-accent);
}

.web-map-cluster-header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.web-map-cluster-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.web-map-cluster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.web-map-cluster-row-info strong {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-map-cluster-row-info small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}

/* Leaflet: night-mode via CSS invert on the tile pane only.
   Markers, clusters and controls live in separate Leaflet panes and are unaffected. */

.leaflet-container {
  background: #0d0d14;
  font-family: inherit;
}

/* Invert the light Positron tiles → dark background, readable white street labels */
.web-map-canvas-panel .leaflet-tile-pane {
  filter: invert(100%) hue-rotate(180deg) brightness(88%) contrast(88%) saturate(85%);
}

.leaflet-control-zoom a {
  background-color: #1a1a24 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.leaflet-control-zoom a:hover {
  background-color: #252532 !important;
  color: #fff !important;
}

.leaflet-control-attribution {
  background: rgba(10, 10, 18, 0.75) !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

.leaflet-control-attribution a {
  color: rgba(255, 79, 25, 0.65) !important;
}

/* Custom markers */

.web-map-marker {
  background: none !important;
  border: none !important;
}

.web-map-marker-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--web-accent);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 79, 25, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.web-map-marker-dot.is-admin {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.web-map-marker-dot.is-self {
  background: #4ade80;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.web-map-marker-dot span {
  display: block;
  line-height: 1;
}

/* Cluster icon */

.web-map-cluster-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--web-accent);
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 4px rgba(255, 79, 25, 0.25), 0 3px 12px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.web-map-cluster-icon span {
  display: block;
  line-height: 1;
}

.web-map-cluster-icon.is-small {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* Cluster row avatar */
.web-map-cluster-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.web-map-cluster-row-avatar.is-admin { border-color: #f59e0b; }
.web-map-cluster-row-avatar.is-self { border-color: #4ade80; }

.web-map-cluster-row-avatar span {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}


/* Map responsive */

@media (max-width: 1199px) {
  #map-canvas {
    min-height: 480px;
    height: 55vh;
  }
}

@media (max-width: 767px) {
  #map-canvas {
    min-height: 380px;
    height: 50vh;
  }

  .web-footer-stats div {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    min-height: unset;
    padding: 12px 6px;
  }

  .web-footer-stats i {
    font-size: 22px;
  }

  .web-footer-stats span {
    font-size: 11px;
  }

  .web-map-side-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 2px 8px;
    padding: 10px;
  }

  .web-map-side-stat > div {
    display: contents;
  }

  .web-map-side-stat-icon {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    font-size: 15px;
  }

  .web-map-side-stat strong {
    grid-row: 1;
    grid-column: 2;
    font-size: 15px;
    align-self: center;
  }

  .web-map-side-stat small {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* Onboarding Banner */
.web-onboarding-banner {
  background: linear-gradient(135deg, rgba(255, 79, 25, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
  border-left: 4px solid var(--web-accent);
  padding: 1.5rem !important;
}

.web-onboarding-banner-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.web-onboarding-banner-icon {
  width: 50px;
  height: 50px;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.web-onboarding-banner-copy {
  flex-grow: 1;
}

.web-onboarding-banner-copy h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  color: #fff;
}

.web-onboarding-banner-copy p {
  margin-bottom: 0.75rem;
  color: var(--web-muted);
  font-size: 0.95rem;
}

.web-onboarding-banner-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.web-onboarding-banner-progress .web-progress-track {
  width: 150px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.web-onboarding-banner-progress .web-progress-track span {
  display: block;
  height: 100%;
  background: var(--web-accent);
}

.web-onboarding-banner-progress span:last-child {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--web-accent);
}

.web-onboarding-banner-action {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .web-onboarding-banner-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .web-onboarding-banner-action {
    width: 100%;
  }
  .web-onboarding-banner-action .web-button {
    width: 100%;
  }
}