:root{
  --y:#f4cd0a;
  --k:#000;
  --a:#1e1e1e;
  --g:#9aa0a6;
  --r:14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--k);
  color:#f5f5f5;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.topbar{
  position:sticky; top:0; z-index:10;
  width:100%;
  max-width:100vw;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:center;
  justify-items:center;
  gap:12px;
  background:rgba(0,0,0,.92);
  border-bottom:1px solid rgba(154,160,166,.25);
  padding:10px 14px;

}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }

.brandHomeLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  min-width:112px;
  min-height:46px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  text-decoration:none;
  transition:opacity .16s ease, transform .16s ease;
}

.brandHomeLink:hover{
  opacity:.88;
  transform:translateY(-1px);
}

.brandHomeLink:focus-visible{
  outline:2px solid var(--y);
  outline-offset:4px;
}

.brandLogo{
  height: 46px;
  width: auto;
  max-width: 112px;  /* ocupa el tamaño del botón anterior sin marco */
  display:block;
  object-fit:contain;
}

.brandSub{
  color:var(--g);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1;
}

.wrap{ max-width:1100px; margin:0 auto; padding:14px 12px 132px; }

/* GRID */
.feed{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.feed.single{
  grid-template-columns:1fr;
}

/* Card */
.card{
  display:block;
  background:var(--a);
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(154,160,166,.18);
  color:#fff;
  text-decoration:none;

  /* PASO 5 */
  position: relative;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}

.card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:56%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.38) 48%, transparent);
}

/* Imagen (layout base) */
.cover{
   backface-visibility: hidden;
  transform: translateZ(0);
  width:100%;
  aspect-ratio:16/9;     /* <- deja esto como ahora (mínimos cambios) */
  object-fit:cover;
  display:block;
  background:#0b0b0b;

  /* PASO 5 */
  opacity:0;
  transition: opacity .22s ease;
}

/* cuando carga */
.card.loaded .cover{ opacity:1; }

/* shimmer */
.ph{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

    transition: opacity .22s ease;

  background-color: var(--a);
  background-image: linear-gradient(
    110deg,
    rgba(255,255,255,.06) 20%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.06) 50%
  );
  background-size:200% 100%;
  animation: shimmer 1.1s linear infinite;
}
.card.loaded .ph{
  opacity:0;
  animation:none;
}
@keyframes shimmer{
  to { background-position-x:-200%; }
}

/* feedback tipo app */
@media (hover:hover){
  .card:hover{
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
}
.card:active{ transform: scale(.985); }

/* retry por imagen */
.retry{
  position:absolute;
  right:10px;
  bottom:10px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:18px;
  opacity:0;
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.card.img-error .retry{
  opacity:1;
  pointer-events:auto;
}
.card.img-error .ph{ opacity:.18; }

/* sentinel */
.sentinel{ height:1px; }

.feedStatus{
  min-height:188px;
  margin:22px 0 18px;
  display:none;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  padding-top:52px;
  font-size:0;
  color:transparent;
}

.feedStatus::before{
  content:"";
  position:absolute;
  top:52px;
  width:min(88vw, 420px);
  height:112px;
  border-radius:24px;
  background:radial-gradient(circle, rgba(244,205,10,.22), rgba(244,205,10,.07) 48%, transparent 74%);
  box-shadow:
    0 0 34px rgba(244,205,10,.18),
    0 18px 44px rgba(0,0,0,.42);
  animation: carid-logo-halo 1.35s ease-in-out infinite;
}

.feedStatus__logo{
  position:relative;
  z-index:1;
  width:min(82vw, 360px);
  max-height:104px;
  height:auto;
  display:block;
  border-radius:18px;
  filter:drop-shadow(0 0 12px rgba(244,205,10,.26));
  animation: carid-logo-loader 1.35s ease-in-out infinite;
}

@keyframes carid-logo-loader{
  0%, 100%{ transform:scale(.965); opacity:.52; filter:drop-shadow(0 0 6px rgba(244,205,10,.12)); }
  50%{ transform:scale(1); opacity:1; filter:drop-shadow(0 0 18px rgba(244,205,10,.42)); }
}

@keyframes carid-logo-halo{
  0%, 100%{ transform:scale(.86); opacity:.24; }
  50%{ transform:scale(1.08); opacity:.7; }
}

/* huérfana ocupa ancho */
#feed .card.span-all{ grid-column:1 / -1; }

#feed .card.card--featured{
  grid-column:1 / -1;
  border-color:rgba(244,205,10,.95);
  border-radius:18px;
  box-shadow:
    0 0 0 1px rgba(244,205,10,.18),
    0 14px 38px rgba(0,0,0,.42);
}

#feed .card.card--featured-gold{
  border-color:#d8a720;
  box-shadow:
    0 0 0 1px rgba(255,231,142,.34),
    0 0 18px rgba(216,167,32,.22),
    0 14px 38px rgba(0,0,0,.44);
}

#feed .card.card--featured-silver{
  border-color:#c7d0d8;
  box-shadow:
    0 0 0 1px rgba(248,251,255,.34),
    0 0 16px rgba(184,196,207,.18),
    0 14px 38px rgba(0,0,0,.44);
}

#feed .card.card--featured-bronze{
  border-color:#bd7134;
  box-shadow:
    0 0 0 1px rgba(255,205,151,.25),
    0 0 16px rgba(189,113,52,.18),
    0 14px 38px rgba(0,0,0,.44);
}

.card--featured::after{
  height:42%;
  background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.48) 44%, rgba(0,0,0,.10) 76%, transparent);
}

.card--featured .cover{
  aspect-ratio:2.45 / 1;
  min-height:128px;
  max-height:360px;
}

.card--featured .retry{
  bottom:64px;
}

.featuredRibbon{
  position:absolute;
  top:0;
  left:14px;
  z-index:4;
  width:28px;
  height:38px;
  display:grid;
  place-items:start center;
  padding-top:7px;
  color:#000;
  font-size:16px;
  font-weight:1000;
  line-height:1;
  text-shadow:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(115deg, #c99a00 0%, #ffe679 18%, #d2a400 35%, #fff0a8 52%, #a97800 72%, #f0c540 100%);
}

.featuredRibbon::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(122deg, transparent 0 18%, rgba(255,255,255,.55) 30%, transparent 42%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,.08) 1px 2px);
  opacity:.48;
  mix-blend-mode:soft-light;
}

.featuredRibbon::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.22), transparent 42%, rgba(0,0,0,.18));
}

.featuredRibbon__icon{
  position:relative;
  z-index:1;
}

.featuredRibbon__star{
  line-height:1;
}

.featuredRibbon__trophy{
  width:17px;
  height:17px;
  fill:rgba(255,235,157,.20);
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.42));
}

.featuredRibbon--gold{
  color:#261500;
  background:linear-gradient(115deg, #9b6a00 0%, #f5c12c 16%, #fff0a6 31%, #c58a00 48%, #6f4200 68%, #e0ac23 84%, #fff2ad 100%);
}

.featuredRibbon--silver{
  color:#101820;
  background:linear-gradient(115deg, #6f7881 0%, #d8dde2 16%, #f8fbff 31%, #9ca5ad 48%, #555f67 68%, #c5ccd2 84%, #ffffff 100%);
}

.featuredRibbon--bronze{
  color:#211006;
  background:linear-gradient(115deg, #6d3513 0%, #bd7134 16%, #f0b274 31%, #8f4318 48%, #4b1f0b 68%, #c47a3f 84%, #ffd09a 100%);
}

.featuredRibbon--yellow{
  color:#000;
  background:linear-gradient(115deg, #c49f00 0%, #ffe359 20%, #f4cd0a 48%, #a98a00 72%, #fff18c 100%);
}

.featuredMeta{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:38px;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  pointer-events:none;
}

.featuredMeta__left{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:84px;
}

.featuredMeta__label{
  color:var(--y);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.66);
}

.featuredMeta__labelRow{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.featuredMeta__rank{
  color:#fff;
  font-size:11px;
  font-weight:950;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.featuredMeta__trend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:auto;
  padding:0;
  border-radius:0;
  font-size:15px;
  font-weight:900;
  line-height:.85;
  letter-spacing:.02em;
  background:transparent;
  border:0;
  text-shadow:0 0 10px rgba(0,0,0,.5);
}

.featuredMeta__trend--up{
  color:#4df28b;
  animation: featured-trend-up 1.45s ease-in-out infinite;
}

.featuredMeta__trend--momentum{
  color:#4df28b;
  animation: featured-trend-up 1.45s ease-in-out infinite;
}

.featuredMeta__trend--down{
  color:#ff6b6b;
  animation: featured-trend-down 1.45s ease-in-out infinite;
}

.featuredMeta__trend--flat{
  color:rgba(255,255,255,.76);
}

.featuredMeta__metric{
  color:#4df28b;
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.66);
}

.featuredMeta__title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  font-weight:900;
  line-height:1.08;
  text-align:right;
  text-shadow:0 2px 14px rgba(0,0,0,.78);
}

.cardMeta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-height:68px;
  padding:0 12px 12px;
  color:#fff;
  pointer-events:none;
}

.cardMeta__text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.cardMeta__title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:950;
  line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.cardMeta__sub{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}

.cardMeta--new .cardMeta__sub{
  color:var(--y);
  font-weight:900;
  text-transform:uppercase;
  font-size:10px;
}

.cardMeta__metric{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.86);
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}

.cardMeta__metricIcon{
  position:relative;
  flex:0 0 auto;
  font-size:15px;
  line-height:.9;
}

.cardMeta__metricIcon--views{
  width:15px;
  height:10px;
  border:1.7px solid currentColor;
  border-radius:50% / 58%;
  transform:translateY(.5px);
}

.cardMeta__metricIcon--views::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%, -50%);
}

@keyframes featured-trend-up{
  0%, 100%{ transform:translate(0, 0); }
  50%{ transform:translate(3px, -4px); }
}

@keyframes featured-trend-down{
  0%, 100%{ transform:translate(0, 0); }
  50%{ transform:translate(3px, 4px); }
}

/* subir arriba */
.toTop{
  position:fixed;
  right:14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:18px;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.toTop.show{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* reintentar Firestore */
.retryFeed{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:0;
  background: rgba(244,205,10,.95);
  color:#000;
  font-weight:800;
}

/* accesibilidad */
.retry:focus-visible,
.toTop:focus-visible{
  outline: 2px solid rgba(244,205,10,.9);
  outline-offset: 2px;
}

/* respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .ph{ animation:none; }
  .card, .cover, .toTop{ transition:none; }
  .featuredMeta__trend--up,
  .featuredMeta__trend--momentum,
  .featuredMeta__trend--down{ animation:none; }
}

@media (max-width: 520px){
  .topbar{
    grid-template-columns:minmax(0, 1fr);
    gap:8px;
    padding:8px 10px;
  }

  .brandHomeLink{
    min-width:94px;
    min-height:40px;
    padding:0;
  }

  .brandLogo{
    height:40px;
    max-width:94px;
  }

  .wrap{
    padding: 12px 8px 128px; /* deja espacio para barra inferior */
  }

  .feed{
    gap: 8px; /* antes 12px */
  }

  .card--featured .cover{
    min-height:118px;
  }

  .featuredMeta{
    left:10px;
    right:10px;
    bottom:10px;
    min-height:34px;
    padding:0;
  }

  .featuredMeta__label{
    font-size:10px;
  }

  .featuredMeta__rank{
    font-size:9px;
  }

  .featuredMeta__trend{
    font-size:13px;
  }

  .featuredMeta__left{
    min-width:62px;
  }

  .featuredMeta__metric{
    font-size:9px;
  }

  .featuredMeta__title{
    font-size:14px;
    max-width:54%;
  }

  .featuredRibbon{
    left:12px;
    width:22px;
    height:32px;
    padding-top:5px;
    font-size:13px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
  }

  .featuredRibbon__trophy{
    width:14px;
    height:14px;
    stroke-width:2.1;
  }

  .cardMeta{
    min-height:58px;
    padding:0 10px 10px;
    gap:8px;
  }

  .cardMeta__title{
    font-size:12px;
  }

  .cardMeta__sub,
  .cardMeta__metric{
    font-size:10px;
  }
}
  .brandSub{ display:none; }


.bottomNav__link:focus-visible,
.lookupFab:focus-visible,
.lookupSheet__close:focus-visible,
.lookupInput:focus-visible,
.lookupSubmit:focus-visible,
.lookupCard:focus-visible{
  outline:2px solid rgba(244,205,10,.9);
  outline-offset:3px;
}

.exploreBottomNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  display:grid;
  grid-template-columns:1fr 86px 1fr;
  align-items:end;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom, transparent 0 17px, rgba(0,0,0,.96) 17px);
  box-shadow:0 -12px 28px rgba(0,0,0,.38);
}

.exploreBottomNav::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:17px;
  height:2px;
  background:var(--y);
  pointer-events:none;
}

.bottomNav__link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:8px;
  color:#f5f5f5;
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  line-height:1;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.bottomNav__link:hover{
  border-color:rgba(244,205,10,.52);
  color:var(--y);
}

.bottomNav__garage{
  min-height:56px;
  gap:8px;
  padding:6px 13px 7px;
  border-radius:16px 16px 10px 10px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(0,0,0,.35)),
    linear-gradient(90deg, rgba(244,205,10,.16), rgba(255,255,255,.04), rgba(244,205,10,.10));
  border:1px solid rgba(244,205,10,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -10px 18px rgba(0,0,0,.28),
    0 12px 26px rgba(0,0,0,.24);
}

.bottomNav__garage:hover{
  border-color:rgba(244,205,10,.68);
  color:#fff;
}

.garageNavIcon{
  flex:0 0 auto;
  width:34px;
  height:26px;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 0 8px rgba(244,205,10,.22));
}

.garageNavIcon__shell{
  fill:rgba(244,205,10,.12);
  stroke:var(--y);
  stroke-width:3;
  stroke-linejoin:round;
}

.garageNavIcon__door{
  fill:rgba(0,0,0,.34);
  stroke:rgba(255,255,255,.72);
  stroke-width:2;
  stroke-linejoin:round;
}

.garageNavIcon__lines{
  fill:none;
  stroke:rgba(255,255,255,.78);
  stroke-width:2;
  stroke-linecap:round;
}

.garageNavLabel{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bottomNav__spacer{
  min-height:44px;
  display:block;
}

.lookupFab{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:84px;
  height:84px;
  margin:0 auto 8px;
  transform:translateY(-31px);
  border:1px solid rgba(255,232,92,.78);
  border-radius:999px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.08) 30%, rgba(0,0,0,.18) 72%, rgba(255,255,255,.12) 100%),
    linear-gradient(90deg, rgba(244,205,10,.94), rgba(255,229,68,.98) 48%, rgba(204,158,0,.96)),
    url("../assets/textures/brushed-metal.jpg") center/cover no-repeat;
  background-blend-mode:overlay, color, normal;
  color:#000;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.58),
    inset 0 -8px 14px rgba(0,0,0,.18),
    0 10px 24px rgba(244,205,10,.22);
  cursor:pointer;
}

.lookupFab::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.08) 1px 2px, transparent 2px 5px),
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.44), transparent 36%);
  mix-blend-mode:soft-light;
  opacity:.9;
}

.lookupFab:hover{
  border-color:rgba(255,244,150,.96);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -8px 14px rgba(0,0,0,.16),
    0 12px 28px rgba(244,205,10,.3);
}

.lookupFab__main{
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  line-height:1;
}

.lookupFab__icon{
  width:30px;
  height:30px;
  display:block;
}

.lookupFab__label{
  position:relative;
  z-index:1;
  max-width:68px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:900;
  line-height:1;
}

.lookupSheetOpen{
  overflow:hidden;
}

.lookupSheet[hidden]{
  display:none;
}

.lookupSheet{
  position:fixed;
  inset:0;
  z-index:120;
}

.lookupSheet__backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(0,0,0,.62);
}

.lookupSheet__panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:620px;
  margin:0 auto;
  padding:10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border:1px solid rgba(244,205,10,.28);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#0f0f0f;
  box-shadow:0 -20px 50px rgba(0,0,0,.48);
  transform:translateY(18px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

.lookupSheet.is-open .lookupSheet__panel{
  transform:translateY(0);
  opacity:1;
}

.lookupSheet__handle{
  width:42px;
  height:4px;
  margin:0 auto 12px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}

.lookupSheet__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.lookupSheet__header h2{
  margin:0;
  font-size:20px;
  line-height:1.12;
}

.lookupSheet__header p{
  margin:6px 0 0;
  color:var(--g);
  font-size:13px;
  line-height:1.35;
}

.lookupSheet__close{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.lookupForm{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
}

.lookupInput{
  min-width:0;
  height:46px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  color:#fff;
  padding:0 12px;
  font-size:16px;
  font-weight:850;
  letter-spacing:0;
  text-transform:uppercase;
}

.lookupInput::placeholder{
  color:rgba(255,255,255,.46);
}

.lookupSubmit{
  height:46px;
  padding:0 14px;
  border-radius:8px;
  border:0;
  background:var(--y);
  color:#000;
  font-size:14px;
  font-weight:900;
}

.lookupSubmit:disabled,
.lookupInput:disabled{
  opacity:.62;
}

.lookupStatus{
  min-height:36px;
  margin-top:10px;
  display:flex;
  align-items:center;
  color:var(--g);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}

.lookupStatus[data-state="invalid"],
.lookupStatus[data-state="not_found"],
.lookupStatus[data-state="error"]{
  color:#ffb4a8;
}

.lookupStatus[data-state="found"]{
  color:var(--y);
}

.lookupResult{
  margin-top:8px;
}

.lookupCard{
  display:grid;
  grid-template-columns:112px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(244,205,10,.3);
  background:#151515;
  color:#fff;
  text-decoration:none;
}

.lookupCard:hover{
  border-color:rgba(244,205,10,.72);
}

.lookupCard__media{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  display:block;
  overflow:hidden;
  border-radius:6px;
  background:#050505;
}

.lookupCard__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.lookupCard__placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  background:var(--y);
  color:#000;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.06em;
}

.lookupCard__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lookupCard__code{
  color:var(--y);
  font-size:12px;
  font-weight:950;
  line-height:1;
}

.lookupCard__title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:16px;
  font-weight:950;
  line-height:1.18;
}

.lookupCard__action{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:750;
  line-height:1.2;
}

.lookupCard__action{
  color:var(--y);
}

.visuallyHidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (min-width: 700px){
  .exploreBottomNav{
    left:50%;
    right:auto;
    width:min(520px, calc(100vw - 32px));
    transform:translateX(-50%);
    border:2px solid var(--y);
    border-top:0;
    border-bottom:0;
    border-radius:14px 14px 0 0;
  }

  .lookupSheet__panel{
    left:50%;
    right:auto;
    top:50%;
    bottom:auto;
    width:min(520px, calc(100vw - 32px));
    border:1px solid rgba(244,205,10,.28);
    border-radius:12px;
    padding:14px 16px 16px;
    transform:translate(-50%, -46%);
  }

  .lookupSheet.is-open .lookupSheet__panel{
    transform:translate(-50%, -50%);
  }
}

@media (max-width: 520px){
  .exploreBottomNav{
    grid-template-columns:1fr 78px 1fr;
    gap:8px;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  }

  .bottomNav__link{
    min-height:42px;
    padding:0 8px;
    font-size:12px;
  }

  .bottomNav__garage{
    min-height:54px;
    padding:5px 9px 6px;
    gap:6px;
    font-size:11px;
  }

  .garageNavIcon{
    width:30px;
    height:24px;
  }

  .bottomNav__spacer{
    min-height:42px;
  }

  .lookupFab{
    width:78px;
    height:78px;
  }

  .lookupSheet__panel{
    padding-left:12px;
    padding-right:12px;
  }

  .lookupForm{
    grid-template-columns:1fr;
  }

  .lookupSubmit{
    width:100%;
  }

  .lookupCard{
    grid-template-columns:96px minmax(0, 1fr);
    gap:10px;
  }

  .lookupCard__title{
    font-size:15px;
  }
}