:root {
  --bg: #0b0f12;
  --panel: #11161c;
  --line: #1b2330;
  --text: #e9f3f6;
  --muted: #9db2bf;
  --teal: #18e1ff;
  --accent: #ff6a20;
  --good: #41d79e;
}

/* Import a condensed, street-race style font for the brand */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: #0b0f12;
  background-image: radial-gradient(circle at 50% 0%, #1a2025 0%, #0b0f12 60%), linear-gradient(180deg, #0b0f12 0%, #06090f 100%);
  color: var(--text);
  font: 16px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Carry the home-page gradient across the rest of the site */
body:not(.page-home) {
  background-attachment: fixed;
}

@media (max-width: 640px) {
  body {
    background-attachment: scroll;
  }
}

/* Dark glass cards on non-home pages to match the hero aesthetic */
body:not(.page-home) .card {
  background: linear-gradient(150deg, rgba(18, 25, 33, 0.95) 0%, rgba(10, 14, 20, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

/* Unified typography */
h1 { font-size: 22px; margin: 8px 0; }
.meta { font-size: 13px; color: var(--muted); }

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
}

/* Reduce top padding for main content to tighten space under header */
main.wrap { padding-top: 4px; }
/* Ensure first content block doesn’t add extra gap via margin-collapsing */
main.wrap > *:first-child { margin-top: 0; }

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 15, 18, .85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 0 12px;
}

/* Nav pill layout - controlled by unified.css, but keep fallback */
.pill { display: flex; gap: 8px }
/* Stack Create + Sign In vertically (desktop too), shrink to keep header tight */
.pill .auth-stack{ display:flex; flex-direction:column; align-items:stretch; gap:4px }

.logo { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.4px; line-height:1; 
  /* Control brand sizing via variables */
  /* Slightly larger logo as requested */
  --brand-icon-h: 133px;                   /* Matched to footer size */
  --brand-wordmark-scale: 1.25;            /* Results in ~166px wordmark */
  --brand-wordmark-h: calc(var(--brand-icon-h) * var(--brand-wordmark-scale));
  --brand-gap: 12px;                       /* visual breathing */
  --wordmark-shift-x: -12px;
}
.logo a { display:flex; align-items:center; gap: var(--brand-gap); color:inherit; text-decoration:none }
.logo img { display:block; height: var(--brand-icon-h); width:auto }
.brand-text { font-weight:400; font-family: 'Bebas Neue', 'Russo One', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:24px; letter-spacing:1px; text-transform:uppercase; -webkit-font-smoothing: antialiased; margin-left:8px; vertical-align:middle }
/* Wordmark image used in place of brand text; sized relative to icon */
.logo img.brand-wordmark { height: var(--brand-wordmark-h); width:auto; margin-left: var(--wordmark-shift-x) }

.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* (deduped) .logo img defined above for consistency */

.btn,
button {
  background: #16202b;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}
/* Button icons */
.btn .icon, button .icon{ width:16px; height:16px; display:inline-block; vertical-align:middle }
.btn svg.icon, button svg.icon{ width:16px; height:16px }

/* Normalize header nav tab sizing across pages */
header .pill a.btn,
header .pill button.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center label horizontally */
  text-align: center;
  gap: 8px;
  padding: 8px 16px;       /* Increased size */
  font-size: 15px;         /* Increased size */
  line-height: 1.4;
  font-weight: 500;
  transition: all 0.2s ease;
}
/* Pill shape for header tabs */
header .pill .btn { border-radius: 99px }
/* Icon size inside header tabs */
header .pill .btn .icon,
header .pill .btn svg.icon { width:18px; height:18px }
header .pill .btn.btn-sm,
header .pill button.btn-sm{
  padding: 6px 12px;
  font-size: 14px;
}

/* Active state styling for nav */
header .pill .btn.is-active{ 
  background: rgba(24, 225, 255, 0.1);
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 0 12px rgba(24, 225, 255, 0.15);
}

/* Auth stack: make buttons align nicely and reduce Create Account slightly */
header .pill #navAuthStack{ display:flex; flex-direction:column; gap:4px; align-items:stretch }
header .pill #navAuthStack .btn{ width:100%; font-size:12px; padding:2px 8px; line-height:1.2 }
/* Keep Create Account same compact size in the stack */
header .pill #navCreate{ font-size: 12px; padding-top: 2px; padding-bottom: 2px }
/* Keep the count pill from changing header height */
header .pill .badge--count{ line-height: 16px; height: 18px }

/* Keep things sensible on smaller screens - unified.css controls main header styling */
@media (max-width: 640px){
  header { padding: 4px 0; }
  .logo { --brand-icon-h: 133px; --brand-wordmark-scale: 1.25; --brand-gap: 12px }
  .logo img { max-height: 133px; }
  .pill .auth-stack{ flex-direction:row; gap:6px }
  header .pill #navAuthStack{ flex-direction:row; align-items:stretch; gap:6px }
  header .pill #navAuthStack .btn{ width:auto; padding-inline:10px; }
  .bar { justify-content: space-between; }
  .site-header .mobile-menu-btn { 
    width: 42px; 
    height: 42px; 
    margin-left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* Explore dropdown menu */
.dropdown{ position:relative; display: flex; }
.dropdown > .btn { flex-grow: 1; }
.menu{ display:none; position:absolute; top:100%; right:0; background: var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px; min-width: 160px; box-shadow: 0 10px 24px rgba(0,0,0,0.35); z-index: 1000 }
.menu.open{ display:block }
.menu .menu-item{ display:block; padding:8px 10px; border-radius:8px; color:inherit; text-decoration:none; white-space:nowrap }
.menu .menu-item:hover{ background:#0e141a }
.menu .menu-item.is-active{ color: var(--teal); border-color:#0a3b47 }
.menu .menu-sep{ border:0; height:1px; background: var(--line); margin:6px }
.menu .menu-item.is-hidden{ display:none }

/* Badge on My Garage link */
nav.pill a[href$="garage.html"]{ position:relative }
.badge--count{ position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:10px; background:#10303b; border:1px solid #0a3b47; color:#9be6f5; font-size:10px; line-height:14px; text-align:center }

/* Chips (generic) */
.chips{ display:flex; gap:8px; flex-wrap:wrap }
.chip, .chip-toggle{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#0f161d; font-size:14px }
.chip.teal, .chip-toggle.is-active{ color:var(--teal); border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.12) inset }

/* Mobile layout tuning */
@media (max-width: 480px){
  .wrap{ padding: 10px }
  .logo{ --brand-icon-h: 133px; --brand-wordmark-scale: 1.25; --brand-gap: 12px; --wordmark-shift-x: -12px }
  .card{ margin: 8px 0 }
}
@media (max-width: 380px){
  /* .logo img.brand-wordmark{ display:none } */
}

/* Extra-small devices: save space in header */
@media (max-width: 420px){
  /* .logo img.brand-wordmark { display:none } */
  /* Hide nav labels to keep icons visible; Sign in text remains since it is not in a span */
  header .pill a.btn span { display:none }
}

/* Tweak hero image height on small phones */
@media (max-width: 480px){
  .hero img { height: 180px }
}

/* Make sponsor logos a bit smaller on mobile */
@media (max-width: 640px){
  .sponsor img{ height: 32px }
}

.btn.teal {
  background: linear-gradient(0deg, #0e2a33, #0e2a33);
  border-color: #143845;
}

.btn.teal:hover {
  outline: 2px solid #0a5d72;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.card h3 {
  margin: 0;
  font-size: 16px;
  padding: 12px 12px 0;
}

.card p {
  margin: 0;
  padding: 8px 12px;
  color: var(--muted);
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0e141a;
  color: var(--text);
}

footer {
  color: var(--muted);
  text-align: center;
  padding: 20px;
}

/* Structured footer + view preference toggle */
.site-footer {
  margin-top: 48px;
  padding: 32px 0 20px;
  background: linear-gradient(180deg, rgba(11, 15, 18, 0.94), #080c11);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: initial;
}

.site-footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 20px;
  align-items: center;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-links {
  text-align: left;
  min-height: 180px; /* Ensures all columns are same height for alignment */
  display: flex;
  flex-direction: column;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--text);
  text-decoration: none;
}

.footer-logo-icon {
  height: 133px;
  width: auto;
}

.footer-logo-text {
  height: 166px;
  width: auto;
}

.footer-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  margin: 8px 0 0;
  max-width: 100%;
  text-transform: uppercase;
  background: linear-gradient(90deg, #18e1ff 0%, #fff 25%, #18e1ff 50%, #fff 75%, #18e1ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 12s linear infinite;
}

@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.footer-links h4 {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--text);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover {
  color: var(--teal);
  transform: translateX(2px);
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  transition: all 0.2s ease;
}

.footer-social a:hover {
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 1px rgba(24, 225, 255, 0.18);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.footer-bottom p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 100%;
  margin-top: 24px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.newsletter-content {
  display: flex;
  align-items: center;
  gap: 16px;
  /* flex: 1 1 auto; removed to allow centering */
}

.newsletter-content h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.newsletter-content p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.newsletter-form {
  /* flex: 1; removed to allow centering */
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .footer-newsletter {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px 16px;
  }
  .newsletter-content {
    flex-direction: column;
    gap: 8px;
  }
  .newsletter-form {
    width: 100%;
    justify-content: center;
  }
  .newsletter-form input {
    width: 100%;
  }
  .newsletter-form button {
    width: 100%;
  }
}

.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e141a;
  color: var(--text);
}

.newsletter-form input::placeholder {
  color: var(--muted);
}

.newsletter-form button {
  padding: 12px 16px;
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: span 2;
    text-align: center;
  }

  .footer-brand .footer-logo {
    justify-content: center;
  }

  .footer-logo-icon {
    height: 60px;
  }

  .footer-logo-text {
    height: 75px;
  }

  .footer-tagline {
    margin: 4px auto 0;
  }

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

.view-preference {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: fit-content;
}

.footer-bottom .view-preference {
  margin-left: auto;
}

.view-preference__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.view-preference__controls {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
}

.view-preference__controls .view-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e9f3f6;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-preference__controls .view-chip:hover {
  border-color: rgba(24, 225, 255, 0.35);
  color: var(--teal);
}

.view-preference__controls .view-chip.is-active {
  background: rgba(24, 225, 255, 0.15);
  border-color: rgba(24, 225, 255, 0.4);
  color: #0ad8ff;
  box-shadow: 0 4px 14px rgba(24, 225, 255, 0.15);
}

.view-preference__controls .view-chip:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.view-preference__note {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .view-preference {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 10px;
  }

  .view-preference__controls {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .view-preference__controls .view-chip {
    text-align: center;
    width: 100%;
  }
}

/* ---------- Polished form styles ---------- */
.nice-form{ display:grid; gap:12px }
.field{ display:grid; gap:6px; font-size:14px }
.field .hint{ color:var(--muted); font-size:12px }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255, 255, 255, 0.1);
  background:rgba(0, 0, 0, 0.3);
  color:#fff;
  outline: none;
  transition: all 0.2s ease;
}
.field textarea{ resize: vertical }
.field input::placeholder,
.field textarea::placeholder{ color:#6e8496 }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--teal);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(24, 225, 255, 0.1);
}

/* Custom select arrow to match theme */
.field select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;
}

/* Card lift for forms */
.card.form-card{ box-shadow: 0 8px 30px rgba(0,0,0,.35); }

/* Score pill (replaces rarity pill) */
.score-pill{ display:inline-flex; align-items:center; gap:8px }
.score-pill .chip{ border-color:#2a3a4b; color:#9db2bf }

/* Button glow for primary action */
.btn.teal{
  background: linear-gradient(180deg, #10303b, #0e2a33);
  border-color: #143845;
}
.btn.teal:hover{
  outline: 2px solid #0a5d72;
  box-shadow: 0 6px 18px rgba(24,225,255,.08);
  transform: translateY(-1px);
}
.btn[disabled]{ opacity:.6; cursor:not-allowed }

/* Chevron on buttons */
.btn.has-chevron{ display:inline-flex; align-items:center; gap:8px }
.btn.has-chevron .chev{ width:14px; height:14px; display:inline-block; transition: transform .15s ease; background-repeat:no-repeat; background-size:14px 14px; background-position:center; filter:contrast(1.1) brightness(.95);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") }
.btn.has-chevron.is-open .chev{ transform: rotate(180deg) }

/* Floating labels */
.field.float{ position:relative }
.field.float input,
.field.float textarea{ padding-top:18px }
.field.float label{ position:absolute; top:10px; left:14px; color:var(--muted); font-size:13px; pointer-events:none; transition: all .15s ease }
.field.float input:focus + label,
.field.float input:not(:placeholder-shown) + label,
.field.float textarea:focus + label,
.field.float textarea:not(:placeholder-shown) + label{ top:6px; font-size:11px; color:var(--teal) }
/* Support floating labels for inputs like type=date that don't support :placeholder-shown */
.field.float input.has-value + label{ top:6px; font-size:11px; color:var(--teal) }

/* Input icons */
.field .with-icon{ background-repeat:no-repeat; background-position:12px center; background-size:18px 18px; padding-left:42px }
.ico-location{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") }
.ico-calendar{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") }
.ico-title{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M8 6v12'/%3E%3C/svg%3E") }
.ico-image{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") }
.ico-owner{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") }
.ico-desc{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H7l-4-4V5a2 2 0 0 1 2-2h5'/%3E%3Cpath d='M17 2v6h6'/%3E%3C/svg%3E") }
/* Browse: search/sort icons */
.ico-search{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") }
.ico-sort{ --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16'/%3E%3Cpath d='M3 16l4 4 4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='M21 8l-4-4-4 4'/%3E%3C/svg%3E") }
/* Browse: make/model/year icons */
.ico-make{ --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41L12 22 2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/svg%3E") }
.ico-model{ --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") }
.ico-year{ --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") }
/* Compose left icon + right arrow for selects with icons */
.field select.with-icon{
  background-image: var(--icon-url), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 12px center, right 12px center;
  background-size: 18px 18px, 18px 18px;
  padding-left: 42px;
  padding-right: 40px;
}

/* Icon for radius select */
.ico-radius{ --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") }

/* Section divider label inside forms */
.form-section{ margin:4px 0 -4px; padding:8px 12px; color:var(--muted); font-size:12px; border-top:1px dashed var(--line) }

/* Inline validation */
.field .error{ color: var(--accent); font-size:12px }
.field.invalid input,
.field.invalid textarea,
.field.invalid select{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,32,0.12) }

/* Rarity themed borders removed */

.section-title{ font-size:14px; color:var(--muted); padding:12px }

@media (min-width: 720px) {
  .wrap {
    padding: 32px;
  }
}

/* Browse page */
.filters { display:flex; flex-direction:column; gap:12px }
.filters-row { display:grid; grid-template-columns: 2fr repeat(5, 1fr); gap:12px }
.filters-actions { display:flex; gap:8px; justify-content:flex-end }

/* Events: organized, responsive filter layout */
#eventsPage .filters-row{ grid-template-columns: repeat(12, 1fr); align-items:end }
#eventsPage .filters-row .field input,
#eventsPage .filters-row .field select{ min-height:44px }
#eventsPage .filter-search{ grid-column: span 7 }
#eventsPage .filter-radius{ grid-column: span 2 }
#eventsPage .filter-location{ grid-column: span 6 }
#eventsPage .chip-toggle.filter-featured{ grid-column: span 3; align-self:end }
#eventsPage #useLocationBtn{ grid-column: span 3; align-self:end; position:relative; padding-left:32px }
#eventsPage #useLocationBtn::before{ content:""; position:absolute; left:10px; width:16px; height:16px; filter:contrast(1.1) brightness(.95); background-repeat:no-repeat; background-size:16px 16px; background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") }
#eventsPage .filters-actions{ grid-column: 10 / -1; align-self:end }
/* Chip toggle reflects checked state (modern browsers) */
#eventsPage .chip-toggle:has(input:checked){ border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.18) inset; color:var(--teal) }

@media (max-width: 900px){
  #eventsPage .filters-row{ grid-template-columns: repeat(8, 1fr) }
  #eventsPage .filter-search{ grid-column: span 8 }
  #eventsPage .filter-radius{ grid-column: span 4 }
  #eventsPage .filter-location{ grid-column: span 8 }
  #eventsPage .chip-toggle.filter-featured{ grid-column: span 4 }
  #eventsPage #useLocationBtn{ grid-column: span 4 }
  #eventsPage .filters-actions{ grid-column: span 8 }
}
@media (max-width: 640px){
  #eventsPage .filters-row{ grid-template-columns: 1fr }
  #eventsPage .filter-search,
  #eventsPage .filter-radius,
  #eventsPage .filter-location,
  #eventsPage .chip-toggle.filter-featured,
  #eventsPage #useLocationBtn,
  #eventsPage .filters-actions{ grid-column: 1 / -1 }
}

.results-bar { display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px }

.car-grid { display:grid; gap:12px; grid-template-columns: 1fr; }
@media(min-width:640px){ .car-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:980px){ .car-grid { grid-template-columns: 1fr 1fr 1fr; } }

.car-card .thumb { position:relative; }
.car-card img { width:100%; height:160px; object-fit:cover; display:block; border-bottom:1px solid var(--line) }
.car-card .badge { position:absolute; left:10px; bottom:10px; padding:4px 8px; border-radius:999px; font-size:12px; background:#0e141a; border:1px solid var(--line); }
.car-card .badge.legendary{ color:#ffd166; border-color:#6b4c00 }
.car-card .badge.rare{ color:#79f2c0; border-color:#124632 }
.car-card .badge.common{ color:#9db2bf; border-color:#2a3a4b }
.car-card .body { padding:10px 12px 12px }
.car-card .meta { color: var(--muted); font-size: 13px; margin: 6px 0 10px }
.car-card .actions { display:flex; gap:8px }
.btn-sm { padding: 6px 10px; border-radius: 10px; font-size: 14px }

/* Car details */
.hero { position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#0e141a }
.hero img { width:100%; height:260px; object-fit:cover; display:block }
/* Optional video hero */
.hero video { width:100%; height:260px; object-fit:cover; display:none }
.hero.has-video video{ display:block }
.hero.has-video img{ display:none }
.hero .badge { position:absolute; left:10px; bottom:10px; padding:6px 10px; border-radius:999px; font-size:12px; background:#0e141a; border:1px solid var(--line) }
.gallery { display:grid; grid-template-columns:1fr; gap:8px }
@media(min-width:720px){ .gallery { grid-template-columns: 2fr 1fr } }
.gallery .thumbs { display:grid; gap:8px }
.specs { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.specs .tag { background:#0e141a; border:1px solid var(--line); padding:6px 8px; border-radius:8px; color:var(--muted); font-size:13px }
.owner-card { display:flex; gap:12px; align-items:center; padding:8px; border-radius:12px; border:1px solid var(--line); background:#0d1418 }
.owner-card img { width:64px; height:64px; object-fit:cover; border-radius:8px }
.similar-grid { display:grid; gap:8px; grid-template-columns:1fr 1fr }

/* Toast */
.gp-toast { position:fixed; right:20px; bottom:20px; background:#0e141a; border:1px solid var(--line); color:var(--text); padding:12px 16px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.6); z-index:9999 }
.gp-toast.success { border-color:var(--good) }
.gp-toast.info { border-color:var(--teal) }

/* Reusable grids and sections */
.grid { display:grid; gap:12px }
.grid.duo { grid-template-columns:1fr; }
@media(min-width:720px){ .grid.duo{ grid-template-columns:1fr 1fr } }
.grid.trio { grid-template-columns:1fr; }
@media(min-width:720px){ .grid.trio{ grid-template-columns:1fr 1fr 1fr } }
.g-gap-12{ gap:12px }
.g-pad-12{ padding:12px }
.mt-12{ margin-top:12px }
.mb-12{ margin-bottom:12px }
.my-16{ margin-top:16px; margin-bottom:16px }
.g-gap-8{ gap:8px }
.g-pad-16{ padding:16px }
.flex{ display:flex }
.center{ display:flex; justify-content:center }
.flex-end{ display:flex; justify-content:flex-end }
.cols-2{ grid-template-columns:1fr 1fr }

.scan { display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; width:100%; order:2 }
.scan button { font-size:16px; font-weight:700; border-radius:16px; background:#0f2c36; border:1px solid #0a3b47 }
.card.hero { display:grid; gap:12px; padding:16px; grid-template-columns: 1fr; text-align:center }
.hero-content { order:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center }
@media(min-width:720px){ .card.hero { grid-template-columns:1fr; } .card.hero .scan { grid-column:1 / -1 } }

/* Center the tip under the Scan QR row */
.scan + small { display:block; text-align:center; color:var(--muted); margin-top:6px }

.hero .tagline{
  font-family: 'Bebas Neue', 'Russo One', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(28px, 6vw, 56px);
  line-height: .95;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 6px 0 4px;
}

.list { padding:8px 12px 14px; display:grid; gap:10px }
.row { display:flex; justify-content:space-between; gap:12px }
.date { font-variant-numeric: tabular-nums; color: var(--teal) }

.ad{ background:#0d1217; border-top:1px dashed #1e2a36; border-bottom:1px dashed #1e2a36; padding:12px; text-align:center; color:var(--muted) }
.sponsor{ display:flex; gap:10px; overflow:auto; padding:12px }
.chip{ white-space:nowrap; border:1px solid var(--line); padding:8px 12px; border-radius:999px; background:#0e141a }
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chip-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#0e141a; color:var(--text); cursor:pointer; user-select:none }
.chip-toggle input{ position:absolute; opacity:0; pointer-events:none }
.chip-toggle.active{ border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.18) inset; color:var(--teal) }
/* Allow JS-driven active state without inputs */
.chip-toggle.is-active{ border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.18) inset; color:var(--teal) }

/* Garage page specific helpers */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:12px }
.stat{ background:#0e141a; border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center }
.stat .num{ font-size:20px; font-weight:700; color:var(--teal) }
.car{ display:flex; gap:12px; padding:12px }
.car img{ width:112px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
.car-title{ margin:0; font-size:16px }
.car-desc{ margin-top:6px }
.actions{ display:flex; gap:8px; margin-top:8px }

/* Login form */
#loginForm{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; gap:16px; min-width:260px }
#loginForm label{ display:grid; gap:6px; font-size:14px }
#loginForm input{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#0e141a; color:var(--text) }
#loginForm button[type="submit"]{ font-size:16px; font-weight:700; border-radius:16px; background:#0f2c36; border:1px solid #0a3b47 }

/* Signup form (mirror login form styles) */
#signupForm{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; display:grid; gap:16px; min-width:280px }
#signupForm label{ display:grid; gap:6px; font-size:14px }
#signupForm input{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#0e141a; color:var(--text) }
#signupForm button[type="submit"]{ font-size:16px; font-weight:700; border-radius:16px; background:#0f2c36; border:1px solid #0a3b47 }

/* Auth helpers */
.auth-social{ display:grid; gap:8px }
.auth-divider{ text-align:center; color:var(--muted); font-size:13px }

/* Nav badge for Garage count */
.badge--count{ background:#0f2c36; border:1px solid #0a3b47; color:var(--teal); margin-left:6px; padding:0 6px; border-radius:999px; font-size:12px; line-height:18px; display:inline-flex; align-items:center; justify-content:center }

/* ---------- Dropdown menu + collapse helpers ---------- */
.is-hidden{ display:none !important }
.dropdown{ position:relative }
.menu{ position:absolute; right:0; top:calc(100% + 8px); background:#0e141a; border:1px solid var(--line); border-radius:12px; min-width:180px; box-shadow:0 10px 24px rgba(0,0,0,.4); padding:6px; z-index:999; opacity:0; transform: translateY(4px) scale(.98); pointer-events:none; visibility:hidden; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s }
.menu.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; visibility:visible; transition: opacity .16s ease, transform .16s ease, visibility 0s }
.menu .menu-item{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px; color:var(--text); background:transparent; border:none; cursor:pointer }
.menu .menu-item:hover{ background:#121a21 }

/* Allow specific cards to overflow (so dropdowns can escape) */
.card.allow-overflow{ overflow: visible }

/* --------- Small utility helpers (moved from inline) --------- */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.pt-0{ padding-top:0 !important }
.center-form{ display:flex; justify-content:center; padding:40px 16px }

/* ---------- Modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; transform:scale(1.02); transition: opacity .16s ease, transform .16s ease }
.modal-backdrop.open{ opacity:1; transform:scale(1) }
.modal-card{ background:#0e141a; border:1px solid var(--line); border-radius:16px; width:min(560px, 92vw); max-height:86vh; overflow:auto; box-shadow:0 14px 40px rgba(0,0,0,.5) }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line) }
.modal-body{ padding:16px; display:grid; gap:12px }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--line) }

/* Invalid shake animation for form */
@keyframes gp-shake{ 10%, 90% { transform: translateX(-1px) } 20%, 80% { transform: translateX(2px) } 30%, 50%, 70% { transform: translateX(-4px) } 40%, 60% { transform: translateX(4px) } }
.shake{ animation: gp-shake .4s ease both }

/* Scan overlay hint */
.scan-hint{ position:absolute; bottom:12px; left:0; right:0; text-align:center; color:var(--muted); font-size:12px }

/* ---------- Suggestion dropdown (search autocomplete) ---------- */
.suggest-wrap{ position:relative }
.suggest{ position:absolute; left:0; right:0; top:calc(100% + 4px); background:#0e141a; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.4); padding:6px; z-index:999; display:none; max-height:260px; overflow:auto }
.suggest.open{ display:block }
.suggest ul{ list-style:none; padding:0; margin:0 }
.suggest li{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--text) }
.suggest li:hover, .suggest li.active{ background:#121a21 }
.suggest .meta{ color: var(--muted); margin-left:auto; font-size: 12px }
.btn.is-active{ outline:2px solid #0a5d72 }

/* ---------- Live Feed grid ---------- */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  padding: 8px;
}

.feed-item {
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex; /* Side-by-side layout */
  align-items: center;
  padding: 8px;
  gap: 12px;
}

.feed-item:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 4px 20px rgba(24, 225, 255, 0.15);
}

.feed-item:active { transform: translateY(0); }
.feed-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.feed-item .thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f12;
}

.feed-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.feed-item:hover .thumb img {
  transform: scale(1.1);
}

.feed-item .body {
  padding: 0;
  flex: 1;
  min-width: 0; /* Text truncation fix */
}

.feed-item .body h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.feed-item .body .meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Scan page tweaks ---------- */
.scan{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; align-items:stretch; margin-top:8px }
.scan .btn{ width:100%; font-size:16px; padding:12px 14px; border-radius:14px }
/* Make the primary action span both columns when enough space */
.scan .btn.teal{ grid-column: 1 / -1 }
/* Mobile-first: single column for tighter phones */
@media (max-width:520px){
  .scan{ grid-template-columns: 1fr }
}

.quick-tip{
  margin-top:10px;
  padding:10px 12px;
  background:#0f1921;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.quick-tip strong{ color: var(--text); font-weight:600; margin-right:6px }

/* Scan page centering */
.page-scan .card.hero{ text-align:center }
.page-scan .card.hero h1{ margin:8px 0 }
.page-scan .card.hero{ grid-template-columns: 1fr }
@media(min-width:720px){ .page-scan .card.hero{ grid-template-columns: 1fr } }
.page-scan .scan{ grid-template-columns: 1fr; justify-items:center }
.page-scan .scan .btn{ width: min(360px, 100%) }
.page-scan .quick-tip{ max-width:520px; margin-left:auto; margin-right:auto }

/* Center helper text in hero */
.card.hero .meta{ text-align:center }

/* ---------- Home: hero action buttons ---------- */
/* Button hierarchy handled by enhanced-ui.css - .btn-primary, .btn-secondary, .btn-tertiary */
.page-home .hero .scan .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.2 }

/* Hero polish: subtle animated border + image zoom */
.card.hero{ position:relative; overflow:hidden }
.card.hero::before{ content:""; position:absolute; inset: -2px; border-radius:18px; background: conic-gradient(from 180deg at 50% 50%, rgba(24,225,255,.22), rgba(255,106,32,.18), rgba(24,225,255,.22)); filter: blur(14px); z-index:0; animation: gpGlow 10s linear infinite; opacity:.35 }
.card.hero > *{ position:relative; z-index:1 }
.hero img{ animation: gpZoom 18s ease-in-out infinite; transform-origin:center center }
@keyframes gpGlow{ 0%{ transform: rotate(0deg) } 100%{ transform: rotate(360deg) } }
@keyframes gpZoom{ 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }

/* ---------- Home: Featured/Nearby events list sizing ---------- */
/* Scoped to homepage so Events page lists keep their defaults */
.page-home .list{ display:block; padding:6px 6px 10px }
.page-home .list .row{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px; padding:8px 10px; border-top:1px solid var(--line) }
.page-home .list .row:first-child{ border-top:0 }
.page-home .list .row > div:first-child{ font-size:15px; line-height:1.3 }
.page-home .list .row > div:first-child .meta{ font-size:12px; color:var(--muted); margin-top:2px }
.page-home .list .row .date{ font-size:14px; font-weight:600; white-space:nowrap; color:var(--text); background:#0e141a; border:1px solid var(--line); border-radius:999px; padding:4px 10px }

/* Event tag chips */
.chip.tag{ border-color:#223244; color:#b8c7d3 }
.chip.tag.tag--meet{ border-color:#194c36; color:#79f2c0 }
.chip.tag.tag--show{ border-color:#3e2a00; color:#ffd166 }
.chip.tag.tag--cruise,.chip.tag.tag--cruise-in{ border-color:#1e3a5f; color:#8bd3e6 }
.chip.tag.tag--track{ border-color:#2a3646; color:#9bb8ff }
.chip.tag.tag--swap{ border-color:#4a2a1e; color:#ffb88f }
.chip.tag.tag--auction{ border-color:#4a1e36; color:#f79ad3 }

@media (max-width: 480px){
  .page-home .list .row{ padding:8px 8px }
  .page-home .list .row > div:first-child{ font-size:14px }
  .page-home .list .row .date{ font-size:13px }
}
@media (max-width:640px){
  .page-home .hero .scan{ grid-template-columns: 1fr }
  .page-home .hero .scan .btn{ width:100% }
}

/* Sticky quick filters beneath header */
.sticky-filters{
  position: sticky;
  top: calc(var(--header-h, 60px) + 8px);
  z-index: 5;
  background: rgba(11, 15, 18, .8);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Dropdown active styles + header active tab */
.menu .menu-item.is-active{ background:#121a21; color:var(--teal) }
header .pill .btn.is-active{ outline:2px solid #0a5d72 }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .28s ease, transform .28s ease }
.reveal.is-visible{ opacity:1; transform: none }

/* Subtle hover for event rows on Home */
.page-home .list .row{ transition: background .14s ease, border-color .14s ease, transform .14s ease }
.page-home .list .row:hover{ background:#0f151b; border-color:#143845 }
/* Location pin before metadata */
.page-home .list .row > div:first-child .meta{ position:relative; padding-left:18px }
.page-home .list .row > div:first-child .meta::before{ content:""; position:absolute; left:0; top:2px; width:14px; height:14px; background-repeat:no-repeat; background-size:14px 14px; opacity:.9; filter:contrast(1.1) brightness(.95); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239db2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") }

/* Banner ad placeholder */
.banner-ad{ position:relative }
.banner-ad__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:90px; border:2px dashed #1e2a36; border-radius:12px; padding:12px; background:#0d1217 }
.banner-ad__label{ font-size:14px; color:var(--muted) }
.banner-ad__cta{ font-size:13px; color:var(--teal) }
@media(min-width:980px){ .banner-ad__inner{ min-height: 160px } }

/* Hide header nav during scanning on small screens */
@media (max-width: 640px){
  body.is-scanning header .pill{ display:none }
}

/* Utility spacing/text helpers */
.pb-0{ padding-bottom:0 !important }
.p-20{ padding:20px !important }
.m-0{ margin:0 !important }
.mt-8{ margin-top:8px !important }
.h-40{ height:40px !important }
.text-warn{ color:#ffb4a7 !important }

/* --- Featured chip + hover for car tiles --- */
.car-card .thumb { position:relative; }
.car-card .badge { position:absolute; left:10px; bottom:10px; padding:4px 8px; border-radius:999px; font-size:12px; background:#0e141a; border:1px solid var(--line); }
.car-card .badge.featured{ color: var(--teal); border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.18) inset }
.car-card{ transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.car-card:hover{ transform: translateY(-1px); border-color:#143845; box-shadow:0 4px 14px rgba(0,0,0,.3) }

/* --- Compact browse filters --- */
.page-browse .filters .field label{ font-size:12px }
.page-browse .filters .field input,
.page-browse .filters .field select{ padding:6px 10px; font-size:14px }
.page-browse .filters-actions .btn{ padding:6px 10px; font-size:14px }

/* === MOBILE-FIRST ENHANCEMENTS === */

/* Mobile Device Detection Classes */
.device-mobile .wrap {
  padding: 8px;
  max-width: 100%;
}

.device-mobile header .bar {
  padding: 8px 12px;
}

.device-mobile .btn {
  min-height: 44px; /* iOS recommended touch target */
  padding: 12px 16px;
}

.device-mobile .btn-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* Mobile navigation improvements */
.device-mobile .pill {
  gap: 4px;
}

.device-mobile .pill .btn span {
  font-size: 14px;
}

/* Mobile form improvements */
.device-mobile input,
.device-mobile select,
.device-mobile textarea {
  font-size: 16px; /* Prevent iOS zoom on focus */
  min-height: 44px;
}

/* Mobile card improvements */
.device-mobile .car-card {
  border-radius: 12px;
  margin-bottom: 16px;
}

.device-mobile .car-card .thumb {
  border-radius: 8px;
}

/* iOS-specific improvements */
.is-ios {
  -webkit-overflow-scrolling: touch;
}

.is-ios input,
.is-ios select,
.is-ios textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
}

/* Android-specific improvements */
.is-android .btn {
  -webkit-tap-highlight-color: rgba(24, 225, 255, 0.2);
}

/* Desktop-only elements (hide on mobile) */
.device-mobile .desktop-only {
  display: none !important;
}

/* Mobile-only elements (hide on desktop) */
.device-desktop .mobile-only {
  display: none !important;
}

/* Keep mobile nav/layout even when phones are wide (landscape) */
.device-mobile .logo {
  --brand-icon-h: 72px;
  --brand-wordmark-scale: 1;
  --brand-gap: 8px;
  --wordmark-shift-x: -6px;
}
.device-mobile header .pill {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.device-mobile header .pill::-webkit-scrollbar { display: none; }
.device-mobile header .pill a.btn,
.device-mobile header .pill button.btn {
  font-size: 12px;
  padding: 2px 6px;
  gap: 5px;
}
.device-mobile header .pill .btn .icon,
.device-mobile header .pill .btn svg.icon { width:13px; height:13px; }
.device-mobile header .pill .btn.btn-sm,
.device-mobile header .pill button.btn-sm { font-size: 11px; padding: 2px 6px; }

/* Bottom-sheet Explore menu on mobile regardless of orientation */
.device-mobile .menu {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 10001;
  border-bottom: 0;
  padding: 8px 8px max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
  display: block !important;
  background: var(--panel);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.device-mobile .menu::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.device-mobile .menu .menu-item {
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.device-mobile .menu:not(.open) {
  transform: translateY(100%);
  pointer-events: none;
}
.device-mobile .menu.open {
  transform: translateY(0);
  pointer-events: auto;
}
.device-mobile .menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.device-mobile .menu-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* Keep single-column sections on phones even when wide */
.device-mobile .grid.duo { grid-template-columns:1fr !important; }
.device-mobile .page-home .hero .scan {
  grid-template-columns: 1fr;
}
.device-mobile .page-home .hero .scan .btn {
  width: 100%;
}

/* Poll Styles */
.poll {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--panel);
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.poll-loading {
  opacity: 0.7;
  pointer-events: none;
}

.poll-header {
  margin-bottom: 16px;
}

.poll-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text);
}

.poll-description {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.poll-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}

.poll-votes {
  font-weight: 600;
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.poll-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.poll-option:not(.voted):hover {
  border-color: var(--teal);
  background: rgba(24, 225, 255, 0.05);
}

.poll-option:not(.voted):focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(24, 225, 255, 0.2);
}

.poll-option.voted {
  cursor: default;
}

.poll-option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.poll-option-text {
  font-weight: 500;
}

.poll-option-votes {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.poll-option-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  background: rgba(24, 225, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
}

.poll-option-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(24, 225, 255, 0.2), rgba(24, 225, 255, 0.1));
  transition: width 0.8s ease;
  border-radius: 8px;
}

.poll-footer {
  margin-top: 16px;
  text-align: center;
}

.poll-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

/* Mobile optimizations for polls */
@media (max-width: 640px) {
  .poll {
    padding: 12px;
  }
  
  .poll-option {
    padding: 10px;
  }
  
  .poll-option-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .poll-option-votes {
    align-self: flex-end;
  }
}

/* Profile Page Styles */
.avatar {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--line);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--muted);
}

.qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-display {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 8px;
}

.qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid {
  display: grid;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-secondary {
  color: var(--muted);
}

.text-red-500 {
  color: #ef4444;
}

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

.pt-6 {
  padding-top: 1.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.max-w-screen-lg {
  max-width: 1024px;
}

.max-w-screen-sm {
  max-width: 640px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.pb-24 {
  padding-bottom: 6rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

/* Spinner for loading states */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-danger {
  background: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

.btn-danger:hover {
  background: #dc2626;
}

/* Mobile Menu Fixes (moved to end to override desktop styles) */
@media (max-width: 640px) {
  /* Fix dropdown clipping on mobile by using fixed positioning (bottom sheet style) */
  .menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 10001;
    border-bottom: 0;
    padding: 8px 8px max(24px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
    display: block !important; /* Override display:none */
    background: var(--panel);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Bottom sheet handle indicator */
  .menu::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 12px;
  }

  /* Larger touch targets on mobile */
  .menu .menu-item {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Hide when not open by transforming out */
  .menu:not(.open) {
    transform: translateY(100%);
    pointer-events: none;
  }
  .menu.open {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Backdrop overlay for bottom sheet */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .menu-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }
}

/* Hide mobile bottom nav by default (it will be shown by mobile.css on mobile pages) */
.mobile-bottom-nav {
  display: none;
}