: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: var(--bg);
  color: var(--text);
  font: 16px/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 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, .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

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

/* Right-align header nav consistently */
.pill { margin-left: auto; display: flex; gap: 4px }
/* 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: 120px;                   /* was 112px */
  --brand-wordmark-scale: 1.1;             /* slightly larger wordmark */
  --brand-wordmark-h: calc(var(--brand-icon-h) * var(--brand-wordmark-scale));
  --brand-gap: 10px;                       /* 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: 6px;
  padding: 2px 8px;        /* tighter */
  font-size: 13px;         /* less bulky */
  line-height: 1.2;
}
/* Slightly smaller corner radius for header tabs */
header .pill .btn { border-radius: 10px }
/* Reduce icon size inside header tabs to match text */
header .pill .btn .icon,
header .pill .btn svg.icon { width:14px; height:14px }
header .pill .btn.btn-sm,
header .pill button.btn-sm{
  padding: 3px 8px;
  font-size: 14px;        /* per request */
}

/* Active state styling for nav */
header .pill .btn.is-active{ border-color:#0a3b47; box-shadow:0 0 0 2px rgba(24,225,255,0.18) inset; color: var(--teal) }

/* 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 */
@media (max-width: 640px){
  .logo { --brand-icon-h: 72px; --brand-wordmark-scale: 1; --brand-gap: 8px }
  header .pill { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
  header .pill::-webkit-scrollbar { display: none }
  header .pill a.btn, header .pill button.btn { font-size: 12px; padding: 2px 6px; gap: 5px }
  header .pill .btn .icon, header .pill .btn svg.icon { width:13px; height:13px }
  header .pill .btn.btn-sm, header .pill button.btn-sm { font-size: 11px; padding: 2px 6px }
  /* Small screens already stacked; keep compact */
  .pill .auth-stack{ flex-direction:column }
  header .pill #navAuthStack{ flex-direction:column; align-items:stretch }
  header .pill #navAuthStack .btn{ width:100% }
}

/* 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: 200 }
.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 }
  header .bar{ padding: 6px 8px 0 8px; gap:8px }
  .pill{ gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .pill::-webkit-scrollbar{ display:none }
  header .pill .btn{ padding: 4px 10px; font-size: 12px }
  .logo{ --brand-icon-h: 48px; --brand-wordmark-scale: 1; --brand-gap: 8px; --wordmark-shift-x: -6px }
  .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;
}

/* ---------- 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:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0e141a;
  color:var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.field textarea{ resize: vertical }
.field input::placeholder,
.field textarea::placeholder{ color:#6e8496 }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#0a3b47;
  box-shadow: 0 0 0 3px rgba(24,225,255,0.15);
}

/* 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 }
.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 }
@media(min-width:720px){ .card.hero { grid-template-columns:1fr 1fr; align-items:center } .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:1fr; gap:6px; padding:8px }
/* Mobile-only for now; keep single column at all sizes */
.feed-item{ background:#0e141a; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease }
.feed-item:hover{ transform: translateY(-1px); border-color:#143845; box-shadow:0 4px 14px rgba(0,0,0,.3) }
.feed-item:active{ transform: translateY(0) }
.feed-item:focus-visible{ outline:2px solid #0a5d72; outline-offset:2px }
.feed-item .thumb{ height:96px; background:#0b0f12 }
.feed-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.feed-item .body{ padding:8px }
.feed-item .body h4{ margin:0 0 2px 0; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.feed-item .body .meta{ font-size:12px; line-height:1.3 }

/* ---------- 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 ---------- */
.page-home .hero .scan{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; align-items:center; justify-items:center; margin-top:12px }
.page-home .hero .scan .btn{ width:min(280px,100%); font-size:18px; padding:12px 16px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; line-height:1.2 }
.page-home .hero .scan #scanBtn{ font-weight:700 }
.page-home .hero .scan .btn.teal{ grid-column:auto }

/* 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 6s 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 }

/* 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 }