/* RideOvo shared premium surface
   Loaded after each page stylesheet so the visual language stays consistent
   without changing page content or interaction contracts. */

:root {
  --global-accent: #C8FF00;
  --global-bg: #080808;
  --global-bg-2: #0f0f0f;
  --global-bg-3: #141414;
  --global-text: #fff;
  --global-muted: rgba(255,255,255,.42);
  --global-faint: rgba(255,255,255,.15);
  --global-border: rgba(255,255,255,.07);
  --global-accent-border: rgba(200,255,0,.2);
  --global-radius-sm: 8px;
  --global-radius-md: 14px;
  --global-radius-lg: 20px;
  --global-radius-xl: 28px;
  --global-pill: 9999px;
  --global-shadow-sm: 0 4px 16px rgba(0,0,0,.3);
  --global-shadow-md: 0 12px 36px rgba(0,0,0,.38);
  --global-shadow-lg: 0 20px 60px rgba(0,0,0,.5);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scrollbar-color: rgba(200,255,0,.55) var(--global-bg);
  scrollbar-width: thin;
}

html::-webkit-scrollbar { width: 5px; }
html::-webkit-scrollbar-track { background: var(--global-bg); }
html::-webkit-scrollbar-thumb {
  border-radius: var(--global-pill);
  background: rgba(200,255,0,.38);
}
html::-webkit-scrollbar-thumb:hover { background: var(--global-accent); }

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.rideovo-install-banner {
  position: fixed;
  z-index: 999;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(200,255,0,.25);
  border-radius: 18px;
  background: rgba(8,8,8,.94);
  box-shadow: 0 14px 40px rgba(0,0,0,.48);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: rideovo-install-banner-in .35s ease both;
}

.rideovo-install-copy,
.rideovo-install-actions {
  display: flex;
  align-items: center;
}

.rideovo-install-copy { gap: 10px; min-width: 0; }
.rideovo-install-icon { display: inline-flex; color: var(--global-accent); }
.rideovo-install-icon svg,
.nav-install-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rideovo-install-icon svg { width: 25px; height: 25px; }
.nav-install-icon { display: inline-flex; color: currentColor; }
.rideovo-install-copy strong,
.rideovo-install-copy small { display: block; }
.rideovo-install-copy strong {
  color: #fff;
  font: 800 14px/1.1 "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rideovo-install-copy small {
  margin-top: 4px;
  color: rgba(255,255,255,.38);
  font: 9px/1.2 monospace;
  letter-spacing: .4px;
}
.rideovo-install-actions { gap: 8px; flex-shrink: 0; }
.rideovo-install-actions a {
  padding: 9px 14px;
  border-radius: var(--global-pill);
  color: #080808;
  background: var(--global-accent);
  box-shadow: 0 5px 18px rgba(200,255,0,.2);
  font: 800 11px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
}
.rideovo-install-actions button {
  padding: 0 3px;
  border: 0;
  color: rgba(255,255,255,.36);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
@keyframes rideovo-install-banner-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shared injected navbar and legacy page navs */
.navbar,
.rideovo-navbar,
.leaderboard-nav,
.auth-nav,
.public-nav,
.elite-nav {
  border-radius: var(--global-pill) !important;
  background: rgba(8,8,8,.76) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.rideovo-navbar {
  width: min(1260px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
}

.navbar-logo,
.rideovo-navbar-logo,
.leaderboard-logo,
.auth-logo,
.public-nav-logo,
.elite-logo {
  color: var(--global-text);
  text-decoration: none;
}

.navbar-link,
.rideovo-navbar-link,
.leaderboard-nav-link,
.auth-nav-link,
.public-nav-link {
  border-radius: var(--global-pill);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.navbar-link:hover,
.navbar-link.active,
.rideovo-navbar-link:hover,
.rideovo-navbar-link.is-active,
.leaderboard-nav-link:hover,
.leaderboard-nav-link.is-active,
.auth-nav-link:hover,
.public-nav-link:hover {
  color: var(--global-accent) !important;
  background: rgba(200,255,0,.07);
}

.rideovo-navbar-cta,
.nav-register,
.auth-main-button,
.plan-button.is-primary {
  border-radius: var(--global-pill) !important;
  box-shadow: 0 6px 22px rgba(200,255,0,.24), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Shared controls */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.hero-cta,
.section-cta-link,
.final-cta-link,
.price-btn,
.plan-button,
.build-next-button,
.support-submit,
.profile-save-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--global-pill) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.btn-primary,
.hero-cta,
.section-cta-link,
.final-cta-link,
.plan-button.is-primary,
.build-next-button,
.support-submit,
.profile-save-button {
  background: var(--global-accent);
  color: #080808;
  box-shadow: 0 6px 22px rgba(200,255,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-secondary,
.btn-ghost,
.plan-button:not(.is-primary) {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--global-border);
  color: var(--global-muted);
}

.btn-ghost { border-color: var(--global-accent-border); color: var(--global-accent); }

.btn-danger {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  color: #ef4444;
}

.btn-primary::before,
.hero-cta::before,
.section-cta-link::before,
.final-cta-link::before,
.rideovo-navbar-cta::before,
.plan-button.is-primary::before {
  position: absolute;
  inset: 0 auto 0 -110%;
  width: 70%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.3), transparent);
  content: '';
  transition: left .55s ease;
  pointer-events: none;
}

.btn-primary:hover::before,
.hero-cta:hover::before,
.section-cta-link:hover::before,
.final-cta-link:hover::before,
.rideovo-navbar-cta:hover::before,
.plan-button.is-primary:hover::before { left: 125%; }

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover,
.hero-cta:hover,
.section-cta-link:hover,
.final-cta-link:hover,
.price-btn:hover,
.plan-button:hover,
.build-next-button:hover,
.support-submit:hover,
.profile-save-button:hover,
.rideovo-navbar-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(200,255,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Cards, generated cards, and interactive surfaces */
.card,
.glass-card,
.build-card,
.profile-build-card,
.lb-row,
.feat-card,
.plan-card,
.price-card,
.score-card,
.sidebar,
.profile-stat-card,
.garage-stat,
.leaderboard-stat,
.map-stat,
.auth-card,
.support-form,
.garage-modal,
.profile-data-card,
.profile-settings-card {
  position: relative;
  border-radius: var(--global-radius-xl) !important;
  border-color: var(--global-border);
  background: rgba(255,255,255,.025);
  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}

.card,
.build-card,
.lb-row,
.feat-card,
.plan-card,
.price-card,
.profile-build-card,
.profile-stat-card,
.garage-stat,
.leaderboard-stat,
.map-stat {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.card:hover,
.build-card:hover,
.feat-card:hover,
.plan-card:hover,
.price-card:hover,
.profile-build-card:hover,
.profile-stat-card:hover,
.garage-stat:hover,
.leaderboard-stat:hover,
.map-stat:hover {
  border-color: rgba(200,255,0,.2);
  box-shadow: var(--global-shadow-lg), 0 0 0 1px rgba(200,255,0,.05);
  transform: translateY(-6px);
}

.build-card { overflow: hidden; }
.build-card-photo { transition: transform .5s ease; }
.build-card:hover .build-card-photo { transform: scale(1.05); }
.build-card-body { position: relative; padding: 20px; }

.card::after,
.build-card::after,
.feat-card::after,
.plan-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(200,255,0,.1), transparent 70%);
  content: '';
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.card:hover::after,
.build-card:hover::after,
.feat-card:hover::after,
.plan-card:hover::after { opacity: 1; }

.lb-row {
  display: flex;
  align-items: center;
  min-height: 64px;
  margin-bottom: 8px;
  padding: 16px 20px;
  text-decoration: none;
}
.lb-row:hover { transform: translateX(5px); }
.lb-row.rank-1 { border-color: rgba(200,255,0,.3); background: rgba(200,255,0,.04); }
.lb-row.rank-2 { border-color: rgba(192,192,192,.2); }
.lb-row.rank-3 { border-color: rgba(205,127,50,.2); }
.lb-rank { color: var(--global-faint); font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; }
.lb-rank.top { color: var(--global-accent); }

/* Tabs, side navigation, fields and metrics */
.tabs-wrapper,
.garage-tabs,
.brand-filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--global-border);
  border-radius: var(--global-pill) !important;
  background: rgba(255,255,255,.03);
  scrollbar-width: none;
}
.tabs-wrapper::-webkit-scrollbar,
.garage-tabs::-webkit-scrollbar { display: none; }

.tab-btn,
.garage-tab,
.brand-filter {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--global-pill) !important;
  background: transparent;
  color: var(--global-muted);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.tab-btn:hover,
.tab-btn.active,
.garage-tab:hover,
.garage-tab.is-active,
.brand-filter:hover,
.brand-filter.is-active {
  background: var(--global-accent);
  color: #080808;
  box-shadow: 0 2px 14px rgba(200,255,0,.25);
}

.leaderboard-controls .filter-button {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--global-pill) !important;
  padding: 7px 10px;
  background: transparent;
  color: var(--global-muted);
  font-size: 10px;
  letter-spacing: .08em;
}

.leaderboard-controls .brand-filters {
  gap: 8px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
}

.leaderboard-controls .filter-button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}

.leaderboard-controls .filter-button:hover,
.leaderboard-controls .filter-button.is-active {
  border-color: rgba(200,255,0,.45);
  background: var(--global-accent);
  color: #080808;
  box-shadow: 0 2px 14px rgba(200,255,0,.25);
}

/* Garage brand filters stay individual on mobile too; the bar must not
   collapse them into one oversized capsule. */
.garage-brand-bar .brand-filters {
  gap: 8px;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
}

.garage-brand-bar .brand-filter {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--global-pill) !important;
  background: rgba(255,255,255,.035);
}

.garage-brand-bar .brand-filter:hover,
.garage-brand-bar .brand-filter.is-active {
  border-color: rgba(200,255,0,.45);
  background: var(--global-accent);
  color: #080808;
  box-shadow: 0 2px 14px rgba(200,255,0,.25);
}

.sidebar { padding: 14px; }
.sidebar-item,
.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--global-radius-lg) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sidebar-item:hover,
.sidebar-item.active,
.profile-nav-item:hover,
.profile-nav-item.is-active {
  background: rgba(200,255,0,.08);
  color: var(--global-accent);
  transform: translateX(3px);
}

.input-field,
.auth-field input,
.auth-field textarea,
.auth-field select,
.cockpit-input,
.power-input-wrap input,
.support-form input,
.support-form textarea,
.support-form select,
input:not([type='checkbox']):not([type='radio']),
textarea,
select {
  border-radius: var(--global-radius-md) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input-field:focus,
.auth-field input:focus,
.auth-field textarea:focus,
.auth-field select:focus,
.cockpit-input:focus,
.support-form input:focus,
.support-form textarea:focus,
.support-form select:focus {
  border-color: var(--global-accent) !important;
  background: rgba(200,255,0,.03);
  box-shadow: 0 0 0 3px rgba(200,255,0,.08);
  outline: none;
}

.search-bar {
  border-radius: var(--global-pill) !important;
  border: 1px solid var(--global-border);
  background: rgba(255,255,255,.04);
}

.stat-box,
.hero-stat,
.garage-stat,
.leaderboard-stat,
.map-stat,
.profile-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--global-radius-lg) !important;
}

.stat-box::after,
.hero-stat::after,
.garage-stat::after,
.leaderboard-stat::after,
.map-stat::after,
.profile-stat-card::after {
  position: absolute;
  right: 20%;
  bottom: 0;
  left: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--global-accent), transparent);
  content: '';
  opacity: .75;
}

.stat-box-val,
.score-display,
.profile-stat-value,
.hero-stat-val {
  color: var(--global-accent);
  text-shadow: 0 0 24px rgba(200,255,0,.28);
}

/* Landing stats should read as three separate panels, not one connected strip. */
.stats-container {
  width: min(1000px, calc(100% - 32px)) !important;
  gap: 16px !important;
  padding: 0 !important;
  border: 0 !important;
}

.stats-container .stat-item {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--global-radius-xl) !important;
}

.stats-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* The map footer is a technical status strip, not a set of floating cards. */
.map-stats .map-stat {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.map-stats .map-stat::after { display: none; }
.map-stats .map-stat:hover { border-color: transparent; }

.leaderboard-stats .leaderboard-stat::after { display: none; }

.empty-state { border-radius: var(--global-radius-xl); }
.skeleton { border-radius: var(--global-radius-md); }

@keyframes global-fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes global-pulse-lime {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,255,0,.26); }
  50% { box-shadow: 0 0 0 8px rgba(200,255,0,0); }
}

.animate-fadeInUp { animation: global-fade-in-up .5s ease both; }
.pulse-lime { animation: global-pulse-lime 2s ease-in-out infinite; }

@media (max-width: 768px) {
  .rideovo-navbar,
  .navbar {
    width: calc(100% - 24px) !important;
    border-radius: 22px !important;
  }
  .page-wrapper { padding-inline: 16px; }
  .card,
  .build-card,
  .plan-card,
  .price-card { border-radius: var(--global-radius-lg) !important; }
  .stats-container { width: calc(100% - 24px) !important; gap: 10px !important; }
  .stats-cta {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 24px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Premium detail surfaces ------------------------------------------------- */
.public-profile {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.public-profile .profile-hero {
  min-height: min(650px, 76vh);
  margin: 26px 0 18px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

.public-profile .profile-hero::after {
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid rgba(200,255,0,.12);
  border-radius: 24px;
  content: '';
  pointer-events: none;
}

.public-profile .hero-background-placeholder {
  background:
    radial-gradient(circle at 50% 42%, rgba(200,255,0,.14), transparent 24%),
    linear-gradient(145deg, #1b2119, #0c0e0c);
}

.public-profile .hero-background-placeholder .rideovo-icon {
  width: 96px;
  height: 96px;
  color: rgba(200,255,0,.6);
  filter: drop-shadow(0 0 24px rgba(200,255,0,.26));
}

.public-profile .profile-badge,
.public-profile .access-verified-badge,
.public-profile .access-premium-badge,
.public-profile .access-elite-badge,
.public-profile .tier-badge {
  border-radius: var(--global-pill);
}

.public-profile-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid rgba(200,255,0,.62);
  border-radius: 50%;
  background: linear-gradient(135deg, #c8ff00, #719500);
  color: #080808;
  font: 800 27px/1 'Barlow Condensed', sans-serif;
  box-shadow: 0 0 28px rgba(200,255,0,.22), inset 0 1px 0 rgba(255,255,255,.4);
}

.public-profile .score-row {
  width: fit-content;
  margin-top: 22px;
  padding: 15px 20px 13px;
  border: 1px solid rgba(200,255,0,.22);
  border-radius: 22px;
  background: rgba(8,8,8,.58);
  box-shadow: 0 12px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

.public-profile .score-num {
  text-shadow: 0 0 34px rgba(200,255,0,.42);
}

.public-profile .public-follow-section {
  margin-top: 18px;
}

.public-profile .btn-follow,
.public-profile .btn-share,
.public-profile .btn-score {
  border-radius: var(--global-pill);
  box-shadow: 0 7px 22px rgba(0,0,0,.22);
}

.public-profile .photos-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 0;
}

.public-profile .public-photo-gallery {
  height: clamp(240px, 34vw, 390px);
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  background: rgba(255,255,255,.025);
  box-shadow: var(--global-shadow-md);
}

.public-profile .public-photo-item {
  background: #151815;
}

.public-profile .stats-section {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
  margin: 18px 0 28px;
  border: 0;
}

.public-profile .stat-item {
  min-height: 112px;
  padding: 22px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.public-profile .stat-item:last-child {
  border-right: 1px solid rgba(255,255,255,.08);
}

.public-profile .stat-val {
  color: var(--global-accent);
  text-shadow: 0 0 22px rgba(200,255,0,.22);
}

.public-profile .content-section {
  gap: 16px;
}

.public-profile .section-card {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.025);
  box-shadow: var(--global-shadow-sm);
}

.public-profile .mod-tag {
  border-radius: var(--global-pill);
  background: rgba(200,255,0,.08);
}

.public-profile .bottom-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Auth cards -------------------------------------------------------------- */
.auth-page {
  min-height: calc(100vh - 76px);
  padding: 54px 20px 76px;
}

.auth-page .auth-card {
  position: relative;
  width: min(100%, 500px);
  padding: 42px clamp(24px, 5vw, 48px) 38px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(22,25,21,.98), rgba(11,12,11,.98));
  box-shadow: 0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}

.auth-page .auth-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #8fb800, var(--global-accent), #efffb0);
  box-shadow: 0 0 22px rgba(200,255,0,.42);
  content: '';
}

.auth-page .auth-badge {
  border-radius: var(--global-pill);
}

.auth-page .auth-field input,
.auth-page .auth-field select,
.auth-page .auth-field textarea {
  min-height: 54px;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045);
}

.auth-page .auth-main-button {
  border-radius: var(--global-pill) !important;
  box-shadow: 0 8px 26px rgba(200,255,0,.22);
}

.auth-page .auth-divider {
  margin-top: 26px;
}

/* Score result ------------------------------------------------------------ */
.result-phase .score-reveal {
  min-width: min(620px, calc(100vw - 40px));
  padding: 26px 34px 30px;
  border: 1px solid rgba(200,255,0,.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 45%, rgba(200,255,0,.1), transparent 58%),
    rgba(13,16,12,.8);
  box-shadow: 0 0 60px rgba(200,255,0,.13), inset 0 1px 0 rgba(255,255,255,.07);
}

.result-phase .score-tier,
.result-phase .mod-pill {
  border-radius: var(--global-pill);
}

.result-phase .result-photos {
  overflow: hidden;
  border-radius: 20px;
}

.result-phase .result-photos img {
  border-radius: 12px;
}

.result-phase .actions .btn-primary,
.result-phase .actions .btn-secondary {
  border-radius: var(--global-pill);
}

/* Support ----------------------------------------------------------------- */
.support-content .response-card,
.support-content .support-form,
.support-content .tickets-panel,
.support-content .support-notice {
  border-radius: 24px;
  box-shadow: var(--global-shadow-sm);
}

.support-content .response-card {
  background: rgba(212,175,55,.08);
}

.support-content .support-form,
.support-content .tickets-panel {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
}

.support-content .support-form input,
.support-content .support-form textarea,
.support-content .support-form select {
  border-radius: 16px !important;
}

.support-content .support-submit {
  border-radius: var(--global-pill);
}

.support-gate a {
  border-radius: var(--global-pill);
  box-shadow: 0 8px 24px rgba(200,255,0,.22);
}

/* Small status and plan badges use the same rounded language as the landing
   page instead of reverting to the legacy square treatment. */
.ranking-badge,
.elite-build-card-badge,
.showcase-badge,
.build-plan,
.marketplace-badge,
.marketplace-badge-inline,
.profile-rank-badge,
.feat-plan-badge,
.popular-tag {
  border-radius: var(--global-pill) !important;
}

.build-plan,
.showcase-badge,
.ranking-badge {
  box-shadow: 0 4px 14px rgba(200,255,0,.16);
}

/* Garage build detail ---------------------------------------------------- */
.garage-build-main {
  width: min(1200px, calc(100% - 32px));
  max-width: none;
  padding: 34px 0 90px;
}

.garage-build-back {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 22px;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--global-pill);
  background: rgba(255,255,255,.03);
}

.garage-build-back:hover {
  border-color: rgba(200,255,0,.45);
  background: rgba(200,255,0,.07);
}

.garage-build-header {
  position: relative;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 20%, rgba(200,255,0,.08), transparent 27%),
    rgba(255,255,255,.025);
  box-shadow: var(--global-shadow-md), inset 0 1px 0 rgba(255,255,255,.05);
}

.garage-build-header h1 {
  letter-spacing: -.065em;
}

.garage-build-identity {
  border-left-color: rgba(255,255,255,.1);
}

.garage-build-identity small,
.garage-build-identity strong {
  border-radius: var(--global-pill);
}

.garage-build-layout {
  gap: 16px;
  margin-top: 16px;
}

.garage-build-visual,
.garage-build-panel,
.garage-build-engagement,
.garage-build-modifications,
.garage-build-comments {
  border-color: rgba(255,255,255,.1);
  border-radius: 26px;
  box-shadow: var(--global-shadow-sm), inset 0 1px 0 rgba(255,255,255,.035);
}

.garage-build-visual {
  overflow: hidden;
}

.garage-build-image,
.garage-build-image img {
  min-height: 440px;
}

.garage-build-image img {
  object-fit: cover;
}

.garage-build-visual-meta {
  border-top-color: rgba(255,255,255,.1);
}

.garage-build-panel {
  padding: 30px;
  background:
    radial-gradient(circle at 80% 18%, rgba(200,255,0,.07), transparent 34%),
    rgba(255,255,255,.025);
}

.detail-score {
  margin: 15px 0 24px;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(200,255,0,.15);
}

.detail-score strong {
  text-shadow: 0 0 34px rgba(200,255,0,.42);
}

.detail-specs {
  border-top-color: rgba(255,255,255,.1);
}

.detail-specs div {
  border-color: rgba(255,255,255,.1) !important;
}

.garage-build-engagement {
  margin-top: 14px;
  padding: 13px;
  background: rgba(200,255,0,.035);
}

.reaction-button,
.detail-share-button,
.detail-comment-form-footer button {
  border-radius: var(--global-pill);
}

.garage-build-modifications,
.garage-build-comments {
  margin-top: 42px;
  padding: 28px;
  background: rgba(255,255,255,.02);
}

.detail-modification {
  border-radius: 16px;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}

.detail-comment-form textarea,
.comment-owner-badge {
  border-radius: 16px;
}

@media (max-width: 800px) {
  .garage-build-main {
    width: min(100% - 20px, 1200px);
    padding-top: 20px;
  }

  .garage-build-header {
    padding: 26px 22px;
    border-radius: 24px;
  }

  .garage-build-image,
  .garage-build-image img {
    min-height: 300px;
  }

  .garage-build-panel,
  .garage-build-modifications,
  .garage-build-comments {
    padding: 22px;
    border-radius: 22px;
  }
}

@media (max-width: 700px) {
  .public-profile {
    width: min(100% - 20px, 1180px);
  }

  .public-profile .profile-hero {
    min-height: 560px;
    margin-top: 14px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .public-profile .score-row {
    width: 100%;
    gap: 8px;
    padding-inline: 14px;
  }

  .public-profile .score-num {
    font-size: clamp(4.5rem, 23vw, 7rem);
  }

  .public-profile .public-photo-gallery {
    height: 250px;
    border-radius: 20px;
  }

  .public-profile .section-card {
    padding: 20px;
    border-radius: 20px;
  }

  .public-profile .bottom-section {
    align-items: stretch;
    flex-direction: column;
  }

  .result-phase .score-reveal {
    min-width: 0;
    width: 100%;
    padding-inline: 15px;
    border-radius: 24px;
  }

  .auth-page .auth-card {
    padding: 36px 20px 30px;
    border-radius: 24px;
  }
}