/* =====================================================================
   PISTON MARKETPLACE — SHARED STYLES
   This file is loaded on every page. Colors and fonts are defined once
   at the top as variables, so changing the look later means editing
   one line here instead of hunting through every page.
   ===================================================================== */

:root {
  /* Colors */
  --bg: #F2F1EE;           /* page background — neutral, won't clash with listing photos */
  --bg-alt: #E8E6E0;       /* slightly darker, for alternating sections */
  --surface: #FFFFFF;      /* card / panel background */
  --text: #201F1D;         /* main text, near-black */
  --text-muted: #6E6A64;   /* secondary text */
  --line: #D8D4CC;         /* hairline borders */
  --line-strong: #C7C1B4;  /* more visible border — listing cards, needs clearer framing than a hairline */
  --accent: #0E7C4F;       /* emerald green — primary buttons, links, active states */
  --accent-dark: #0B5F3D;  /* accent hover/pressed state */
  --new-glow: #3FAE7D;     /* brighter/lighter green for the "New" listing badge+glow, distinct from --accent */
  --tag-featured: var(--accent); /* Featured badge — was a hardcoded duplicate of the accent hex, now tracks it */
  /* Listing lifecycle status colors — Active reuses --tag-featured's
     green (see LISTING_STATUS_BADGE_CLASS in js/listing-cards.js). */
  --tag-sold: #57534E;     /* Sold — neutral grey */
  --tag-pending: #B45309;  /* Pending payment — amber, needs a payment/promo step to go live */
  --tag-expired: #57534E;  /* Expired — same neutral grey as Sold */
  --tag-removed: #9F1D1D;  /* Removed — dark red, an admin took this down */
  --success: #1B8A3D;      /* Saturated green — wizard "step complete", needs to read at a glance */

  /* Type */
  --font-display: 'Big Shoulders Stencil Display', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;
  --radius-lg: 8px;        /* listing cards — a touch more modern than the site's usual small radius */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-dark); }

/* Visible keyboard focus everywhere — accessibility baseline */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.25s ease;
}
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--accent);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 14px rgba(32, 31, 29, 0.12);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Data-plate treatment: thin border + 4 corner "rivets". The rivets are
   drawn as background radial-gradients (not extra markup) so they hold
   their corner position no matter how wide the wordmark renders. */
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.5px;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 7px 16px;
  background-repeat: no-repeat;
  background-size: 4px 4px;
  background-image:
    radial-gradient(circle, var(--text-muted) 100%, transparent 100%),
    radial-gradient(circle, var(--text-muted) 100%, transparent 100%),
    radial-gradient(circle, var(--text-muted) 100%, transparent 100%),
    radial-gradient(circle, var(--text-muted) 100%, transparent 100%);
  background-position:
    5px 5px,
    calc(100% - 5px) 5px,
    5px calc(100% - 5px),
    calc(100% - 5px) calc(100% - 5px);
}
.logo span { color: var(--accent); }

/* Logo + admin badge — always visible (mobile and desktop top bar
   alike), unlike .nav-links which collapses into the hamburger menu. */
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Elevated-permission indicator, deliberately not emerald — a metallic
   gold/amber so it reads as a distinct system badge, not just another
   nav link. Shown only to accounts with profiles.is_admin (see
   js/auth-nav.js). */
.nav-admin-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #5c3d00;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, #fdf2c4 0%, #e8c65a 30%, #b8860b 55%, #e8c65a 80%, #fdf2c4 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  border: 1px solid #b8860b;
  box-shadow: 0 1px 3px rgba(120, 90, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background-position 0.4s ease;
}
.nav-admin-link:hover {
  background-position: 100% 50%;
  color: #5c3d00;
}
/* The badge ships with the `hidden` attribute and auth-nav.js only ever
   removes it, for admins. `display: inline-flex` above outranks the
   browser's own [hidden] rule, so without this every visitor saw the
   gold Admin badge. */
.nav-admin-link[hidden] {
  display: none;
}

.nav-links {
  display: none; /* hidden on mobile, shown at desktop breakpoint below */
  gap: 28px;
  align-items: center;
}

.nav-links a {
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
}

.nav-links a:not(.btn-sell):not(.nav-user-link) {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.nav-links a:not(.btn-sell):not(.nav-user-link)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}
.nav-links a:not(.btn-sell):not(.nav-user-link):hover::after { width: 100%; }

.nav-links a:hover { color: var(--accent); }

/* The signed-in member's name (or "Sign in" logged out) — a pill so it
   reads as an account control leading to the dashboard, not just
   another page link. Used in both the desktop nav and mobile menu. */
.nav-user-link {
  background: var(--bg-alt);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-user-link:hover { background: var(--line); color: var(--accent); }

/* Same metallic-shine treatment as .nav-admin-link (diagonal gradient
   sweep on hover), in emerald instead of gold — this is the site's
   primary CTA, not an elevated-permission indicator, so it stays on
   the accent color rather than borrowing the admin badge's gold. */
.btn-sell {
  display: inline-flex;
  align-items: center;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  white-space: nowrap;
  background: linear-gradient(135deg, #3FAE7D 0%, #0E7C4F 30%, #0B5F3D 55%, #0E7C4F 80%, #3FAE7D 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  border: 1px solid var(--accent-dark);
  box-shadow: 0 1px 3px rgba(11, 95, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background-position 0.4s ease;
}
.btn-sell:hover {
  background-position: 100% 50%;
  color: #fff !important;
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px 20px;
  gap: 14px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero {
  padding: 48px 0 40px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.hero-bg-icon {
  position: absolute;
  top: -4px;
  right: -90px;
  width: 900px;
  max-width: none;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .hero-bg-icon {
    width: 450px;
    top: 162px;
    right: -75px;
  }
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.05;
  margin: 0 0 12px;
}

.hero p {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 480px;
  margin: 0 0 28px;
}

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: var(--font-body);
  background: var(--surface);
}

.search-bar button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.search-bar button:hover { background: var(--accent-dark); }

.quick-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-categories a {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.quick-categories a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------- */
.section {
  padding: 40px 0;
}
.section-alt { background: var(--bg-alt); }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-header h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 26px;
  margin: 0;
}

.section-header a {
  font-size: 14px;
  font-weight: 600;
}

/* Thin rule between homepage sections, with small rust corner-brackets
   at each end — echoes the logo's data-plate rivets without repeating
   them literally. */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0;
}
.section-divider-line {
  position: relative;
  width: 72px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.section-divider-line::before,
.section-divider-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
.section-divider-line::before { left: -16px; }
.section-divider-line::after { right: -16px; }

/* Scroll-triggered fade-in-up, applied via IntersectionObserver in
   js/scroll-effects.js. Skipped entirely for prefers-reduced-motion. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   LISTING CARDS
   --------------------------------------------------------------------- */
.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ---------------------------------------------------------------------
   BROWSE PAGE — sidebar filters (desktop) / bottom-sheet filters (mobile)
   --------------------------------------------------------------------- */
.browse-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 16px 0 48px;
}
@media (min-width: 1024px) {
  .browse-layout {
    grid-template-columns: 25fr 75fr;
    column-gap: 32px;
    align-items: start;
  }
}

/* Compound selector so this reliably wins over .listing-grid's desktop
   breakpoint rules below — same specificity as a single class, so
   without this the two were tying and whichever came later in the
   file (the media queries) was silently winning at desktop widths,
   overriding this rule entirely. Auto-fill below the sidebar's own
   1024px breakpoint (browse's results column is narrower once the
   sidebar sits beside it), then a flat 4 columns once there's room. */
.listing-grid.browse-results-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
@media (min-width: 1024px) {
  .listing-grid.browse-results-grid { grid-template-columns: repeat(3, 1fr); }
}

.browse-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
@media (min-width: 1024px) {
  .browse-filters-toggle { display: none; }
}

.browse-filters-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 31, 29, 0.45);
  z-index: 90;
}
@media (min-width: 1024px) {
  .browse-filters-backdrop { display: none !important; }
}

.browse-filters-panel-header { display: none; }

.browse-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pill-button group, not a form radio list — the emerald fill on
   .selected IS the "you're here" state, so there's no separate radio
   dot to look at. */
.browse-category-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.browse-category-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.browse-category-pill:hover { border-color: var(--accent); color: var(--accent); }
.browse-category-pill.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.browse-category-pill.selected:hover { color: #fff; }

@media (max-width: 1023px) {
  .browse-filters-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    padding: 18px;
    transform: translateY(105%);
    transition: transform 0.25s ease;
    z-index: 91;
    box-shadow: 0 -8px 24px rgba(32, 31, 29, 0.18);
  }
  .browse-filters-panel.open { transform: translateY(0); }
  .browse-filters-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .browse-filters-panel-header h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    margin: 0;
  }
  .browse-filters-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
  }
  .browse-filters-panel .form-card {
    border: none;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .browse-filters-panel { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .browse-filters-panel { transition: none; }
}

.listing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Column flex so the Save row can be pushed to the bottom with
     margin-top:auto -- cards in a grid row stretch to equal height, so
     without it the buttons sit at whatever height each card's text
     happens to end at. */
  display: flex;
  flex-direction: column;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(32, 31, 29, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.listing-card:hover {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(32, 31, 29, 0.14);
}

/* The card is a wrapper div now, with the link as a child, so the Save
   button can be a sibling of the link instead of nested inside it.
   These two rules carry what the anchor used to get from .listing-card
   itself. */
.listing-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.listing-card-link:hover {
  color: inherit;
}

/* Footer row for the Save button. Deliberately in normal flow rather
   than overlaid on the photo: Premium's badge already owns the card's
   top-right and the NEW badge owns the top-left, so an overlay would
   need different offsets per tier. */
.listing-card-actions {
  padding: 0;
  margin-top: auto;
}
/* Only takes up room once a page has actually turned the button on;
   pages that never load js/watchlist.js leave no dead space. */
.listing-card-actions:has(.watchlist-btn:not([hidden])) {
  padding: 0 18px 18px;
}
.watchlist-btn-card {
  margin-top: 0;
  padding: 8px 12px;
  font-size: 14px;
}

/* The card's white background shows through as a "mat" around the
   photo instead of the image bleeding to the card's edges — the photo
   itself then gets its own thin border, like a print in a frame. */
.listing-photo-frame {
  position: relative;
  padding: 9px;
  border-bottom: 1px solid var(--line-strong);
}

.listing-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.listing-photo-dots {
  position: absolute;
  bottom: 17px;
  left: 9px;
  right: 9px;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}
.listing-photo-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.listing-photo-dot.active {
  background: #fff;
}

.listing-body {
  padding: 18px;
}

/* Price first, biggest and boldest; title secondary; the year/location
   detail row quietest — the hierarchy a buyer actually scans in. Same
   margin on all three for a consistent vertical rhythm, rather than
   whatever gap each line happened to need. */
.listing-price {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.2px;
  margin: 0 0 6px;
}

.listing-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* Year + location, e.g. "1977 · Sterling Heights, MI" — kept off the
   title line so identity (make/model) and facts (year, place) don't
   run together. */
.listing-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* "New" treatment — a glow fading from the top edge toward the photo's
   midpoint, plus an unambiguous text pill (the glow alone would be too
   subtle/decorative to rely on). --new-glow is a brighter, slightly
   lighter green than --accent so it reads as a distinct "fresh" signal
   rather than just restating the brand color. */
.listing-new-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(63, 174, 125, 0.4), rgba(63, 174, 125, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.listing-new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--new-glow);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(14, 124, 79, 0.4);
}

/* Premium — emerald (the site's main accent), not gold; gold stays
   reserved for the admin badge elsewhere. The border is a gradient
   (solid at the top, fading to transparent by the bottom) via the
   standard two-background trick: one layer clipped to padding-box for
   the card's actual white fill, one clipped to border-box carrying the
   gradient, with the real `border` set to transparent so only that
   gradient shows through the border's own thickness. */
.listing-card-premium {
  border: 4px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(to bottom, var(--accent) 0%, rgba(14, 124, 79, 0) 100%) border-box;
}

/* Structural header row above the photo — not an overlay, so it can
   never collide with the NEW badge (which still overlays the photo
   itself) and reads as part of the card's actual layout, not a sticker
   on top of the image. */
.listing-premium-header {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
}
.listing-premium-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(14, 124, 79, 0.35);
}

/* Featured's tier badge — deep slate/charcoal, deliberately NOT the
   shared .badge-featured/--tag-featured (emerald) used for the
   unrelated "Active" status badge elsewhere, and deliberately not
   emerald now that Premium owns that color. */
.listing-featured-badge {
  background: #44403A;
}

.listing-premium-specs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.listing-premium-specs-divider {
  color: var(--text-muted);
  font-weight: 400;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  margin-bottom: 8px;
}
.badge-featured { background: var(--tag-featured); }
.badge-sold { background: var(--tag-sold); }
.badge-pending { background: var(--tag-pending); }
.badge-expired { background: var(--tag-expired); }
.badge-removed { background: var(--tag-removed); }

/* ---------------------------------------------------------------------
   CATEGORY CARDS — used on the homepage and the sell.html Plan step.
   Large near-square tile, icon dominant, name below. On sell.html the
   card is also a selectable radio (see .category-card.selectable).
   --------------------------------------------------------------------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  /* The sell wizard's own column can't fit four 180px icons across;
     2x2 keeps the fixed icon size without overflowing the card. */
  .sell-wizard-area .category-grid { grid-template-columns: repeat(2, 1fr); }
}

.category-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
  color: var(--text);
  text-align: center;
}
.category-card:hover { border-color: var(--accent); }

.category-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-card-icon img {
  width: 108px;
  height: 108px;
  object-fit: contain;
}
@media (min-width: 768px) {
  .category-card-icon img {
    width: 180px;
    height: 180px;
  }
}

.category-card-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

/* Selectable variant (sell.html Plan step) — native radio hidden, the
   whole card is the clickable control. */
.category-card.selectable { cursor: pointer; }
.category-card.selectable input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.category-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: rgba(14, 124, 79, 0.07);
}

.category-card-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.category-card.selected .category-card-check { display: flex; }
.category-card.locked { opacity: 0.55; cursor: not-allowed; }
.category-card.locked:hover { border-color: var(--line); }

@media (min-width: 768px) {
  .category-card-name { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
}
.empty-state a { font-weight: 600; }

/* ---------------------------------------------------------------------
   AUTH FORMS (Sign up / Log in)
   --------------------------------------------------------------------- */
.auth-section {
  padding: 48px 0;
  display: flex;
  justify-content: center;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 24px;
  width: 100%;
  max-width: 420px;
}

.auth-card h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  margin: 0 0 6px;
}

.auth-card > p {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 24px;
}

.form-row {
  display: flex;
  gap: 12px;
}
.form-row .form-group { flex: 1; }

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

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
}

.form-group textarea { resize: vertical; }

.form-group input:disabled {
  background: var(--bg-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.auth-card-wide { max-width: 560px; }
.label-optional { font-weight: 400; color: var(--text-muted); }
.char-count { text-align: right; }
.char-count.over { color: var(--accent-dark); font-weight: 600; }

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.form-message {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.form-message-error {
  background: #FBE9E5;
  color: var(--accent-dark);
  border: 1px solid #E3B7A8;
}
.form-message-success {
  background: #E9EFE9;
  color: var(--tag-sold);
  border: 1px solid #BFD1C0;
}
/* Neutral variant — for telling someone something rather than
   reporting success or failure. */
.form-message-note {
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.auth-switch {
  margin: 20px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   POSTING FORM (List your aircraft)
   --------------------------------------------------------------------- */
.sell-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "wizard"
    "preview";
  gap: 24px;
  padding: 24px 0 48px;
}
.sell-wizard-area { grid-area: wizard; min-width: 0; }

/* The preview only exists in the flow at all on mobile while the
   Review step is active (see .at-review-step, toggled in sell.js) —
   at every other step and on every other tab it stays out of the way.
   Desktop always shows it, regardless of step. */
.sell-preview-panel {
  grid-area: preview;
  display: none;
  min-width: 0;
}
.sell-layout.at-review-step .sell-preview-panel { display: block; }

.sell-preview-header {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  .sell-layout {
    grid-template-columns: 55fr 45fr;
    column-gap: 32px;
    grid-template-areas: "wizard preview";
    align-items: start;
  }
  .sell-preview-panel {
    display: block;
    position: sticky;
    top: 89px; /* site-header height (65px) + breathing room */
    max-height: calc(100vh - 89px - 24px);
    overflow-y: auto;
    align-self: start;
  }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
}

.form-card h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 6px;
}

.form-card h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}

.form-card > p {
  color: var(--text-muted);
  font-size: 15px;
  margin: 0 0 24px;
}

.form-section-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.form-section-title:first-child {
  border-top: none;
  padding-top: 0;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.radio-option {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  flex: 1 1 200px;
}
.radio-option.selected { border-color: var(--accent); }
.radio-option input { margin-top: 3px; }
.radio-option strong { display: block; font-size: 14px; }
.radio-option-icon { height: 26px; width: auto; max-width: 70px; flex-shrink: 0; }
.radio-option .radio-desc { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.yn-group {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}
.yn-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}

.repeat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.repeat-row .form-group { margin-bottom: 0; }
.repeat-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  grid-column: 1 / -1;
  justify-self: start;
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

@media (min-width: 768px) {
  .repeat-row { grid-template-columns: repeat(2, 1fr); }
}

.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.photo-preview-item {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  cursor: grab;
}
.photo-preview-item.dragging { opacity: 0.4; }
.photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.photo-preview-cover {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.photo-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(32, 31, 29, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.link-button {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: var(--font-body);
}
.link-button:hover { color: var(--accent-dark); }

/* ---------------------------------------------------------------------
   TIER COMPARISON CARDS (Plan step)
   --------------------------------------------------------------------- */
.tier-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.tier-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  background: var(--surface);
}
.tier-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier-card.locked { opacity: 0.55; cursor: not-allowed; }
.tier-card input { position: absolute; opacity: 0; pointer-events: none; }

.tier-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.tier-card-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.tier-card-price {
  font-size: 24px;
  font-weight: 800;
}
.tier-card-price span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.tier-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.tier-card-features li {
  padding: 3px 0 3px 22px;
  position: relative;
}
.tier-card-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (min-width: 768px) {
  .tier-cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   WIZARD TABS (List your aircraft)
   --------------------------------------------------------------------- */
.wizard-tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 65px; /* exact rendered height of .site-header (64px + 1px border) */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  margin: 0 -22px 24px;
  padding: 0 6px;
}

.wizard-tab-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.wizard-tab-list::-webkit-scrollbar { display: none; }

.wizard-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.wizard-tab:hover { color: var(--text); }

/* Complete (not currently active) — saturated green text + checkmark,
   distinct enough to read at a glance next to muted-grey and accent. */
.wizard-tab.valid { color: var(--success); font-weight: 700; }

/* Active always wins on color, even for a step that's also complete —
   "you are here" needs to read clearly; the checkmark below still shows
   green so completion isn't lost. */
.wizard-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.wizard-tab.valid::before {
  content: "\2713";
  color: var(--success);
  font-weight: 700;
}

.required-marker {
  color: var(--accent);
  margin-left: 2px;
  font-weight: 700;
}

.wizard-arrow {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
}
.wizard-arrow:hover:not(:disabled) { color: var(--accent); }
.wizard-arrow:disabled { color: var(--line); cursor: not-allowed; }

/* ---------------------------------------------------------------------
   CHECKBOXES
   --------------------------------------------------------------------- */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.form-group-checkbox {
  display: flex;
  align-items: flex-end;
  padding-bottom: 12px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
}

.char-counter {
  text-align: right;
  margin-top: 4px;
}

/* ---------------------------------------------------------------------
   MAKE / MODEL COMBOBOX
   --------------------------------------------------------------------- */
.combobox { position: relative; }
.combobox-clear:not([hidden]) {
  display: block;
  margin-top: 6px;
}
.combobox-input:disabled {
  background: var(--bg-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}
.combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(32, 31, 29, 0.14);
  z-index: 30;
}
.combobox-option {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}
.combobox-option:hover { background: var(--bg-alt); }
.combobox-option-popular { font-weight: 700; }
.combobox-divider { border-top: 1px solid var(--line); margin: 4px 0; }
.combobox-option-other {
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.combobox-empty {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 32px 0;
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------
   DESKTOP BREAKPOINT
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }

  .hero h1 { font-size: 56px; }

  .listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .listing-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   LISTING DETAIL PAGE
   --------------------------------------------------------------------- */
/* container-type (not a viewport media query) so this layout responds
   to how wide its own box is — the real page is ~1200px and goes
   two-column, but sell.html's live preview panel renders the exact
   same markup at ~500px and correctly gets the stacked mobile layout,
   with no preview-specific CSS needed. */
.listing-layout {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "gallery"
    "sidebar"
    "specs"
    "description";
  gap: 20px;
  padding: 24px 0 48px;
}
.listing-gallery-area { grid-area: gallery; }
.listing-sidebar { grid-area: sidebar; }
.listing-specs-area { grid-area: specs; }
.listing-description-area { grid-area: description; }

@container (min-width: 1024px) {
  .listing-layout {
    grid-template-columns: 65fr 35fr;
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
    grid-template-areas:
      "gallery     sidebar"
      "specs       sidebar"
      "description sidebar";
  }
  .listing-sidebar {
    position: sticky;
    top: 89px; /* site-header height (65px) + breathing room */
    align-self: start;
  }
}

.listing-price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.sold-banner {
  background: var(--tag-sold);
  color: #fff;
  text-align: center;
  padding: 10px;
  font-weight: 700;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

.gallery-hero {
  position: relative;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 10px;
  touch-action: pan-y;
}
.gallery-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gallery-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(32, 31, 29, 0.55);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gallery-arrow:hover { background: rgba(32, 31, 29, 0.78); }
.gallery-arrow-prev { left: 10px; }
.gallery-arrow-next { right: 10px; }

.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 24px;
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.gallery-thumbs img:hover { opacity: 1; border-color: var(--accent); }
.gallery-thumbs img.active { opacity: 1; border-color: var(--accent); }

.listing-header { margin-bottom: 20px; }
.listing-header h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  margin: 6px 0 6px;
}
.listing-detail-price {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}
.listing-detail-price .price-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 8px;
}

/* Save / favorite toggle. Outline until it's saved, then it fills in
   emerald -- the same "this is yours now" cue the active nav item uses.
   Lives in the price card on listing.html and in the top-right corner
   of a listing card in the grid. */
.watchlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.watchlist-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.watchlist-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.watchlist-heart {
  font-size: 16px;
  line-height: 1;
  color: var(--line-strong);
  transition: color 0.15s ease;
}
.watchlist-btn:hover:not(:disabled) .watchlist-heart {
  color: var(--accent);
}
.watchlist-btn.saved {
  border-color: var(--accent);
  background: #EAF4EE;
  color: var(--accent);
}
.watchlist-btn.saved .watchlist-heart {
  color: var(--accent);
}
/* Same trap as .nav-admin-link: `display: inline-flex` above outranks
   the browser's own [hidden] rule, and this button ships hidden so the
   sell preview and admin view never show it. */
.watchlist-btn[hidden] {
  display: none;
}

#videoSection video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
}

.spec-description {
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.6;
}

.spec-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.spec-section:last-child { margin-bottom: 0; }
.spec-section h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
}
.spec-section h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  margin: 14px 0 6px;
}
.spec-section h3:first-of-type { margin-top: 0; }

.spec-row {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--line);
}
.spec-row:last-child { border-bottom: none; }
.spec-row-label { color: var(--text-muted); min-width: 160px; flex-shrink: 0; }
.spec-row-value { color: var(--text); }

.spec-tag {
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  margin: 0 6px 6px 0;
}

.seller-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 24px;
}
.seller-panel h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
}
.seller-panel .badge-verified {
  background: var(--tag-sold);
  color: #fff;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
}

@media (min-width: 768px) {
  .gallery-hero img { aspect-ratio: 16 / 9; }
  .gallery-placeholder { aspect-ratio: 16 / 9; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   ADMIN PANEL
   --------------------------------------------------------------------- */
.admin-section-gap { margin-top: 40px; }

.admin-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.admin-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.admin-status-badge { margin-left: 8px; text-transform: capitalize; }

.admin-item-date {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.admin-item-message {
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  margin: 8px 0;
}

.admin-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-tab:hover { border-color: var(--accent); color: var(--accent); }
.admin-tab.active { border-color: var(--accent); color: var(--accent); background: var(--bg-alt); }

.admin-listing-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-status-select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
}

/* Testing/account-management tools (tier override, expiry extension) —
   tinted background so they read as a distinct "admin overrides" zone,
   not another moderation action alongside Take Down/Approve. */
.admin-override-controls {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.admin-override-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.admin-override-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 8px;
}
.admin-override-row:last-child { margin-bottom: 0; }
.admin-tier-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
}
.admin-extend-days {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-body);
}

/* ---------------------------------------------------------------------
   SELLER DASHBOARD (dashboard.html) — reuses the .admin-item family
   above for card/action-row layout, adds a thumbnail + info row.
   --------------------------------------------------------------------- */
.dashboard-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.dashboard-page-header h1 { margin: 0; }

/* Account page — sidebar nav with two labeled groups, content pane on
   the right; same 25/75 split browse.html uses, stacking to a single
   column below the same breakpoint. */
.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .account-layout {
    grid-template-columns: 25fr 75fr;
    column-gap: 32px;
    align-items: start;
  }
}

.account-nav-group { margin-bottom: 22px; }
.account-nav-group:last-child { margin-bottom: 0; }

.account-nav-heading {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 8px;
  padding: 0 12px;
}

.account-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.account-nav-item:hover {
  background: var(--bg-alt);
  color: var(--accent);
}
.account-nav-item.active {
  background: var(--bg-alt);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
/* Plain links out of the page (Add New Listing, Help/Support) — never
   "active", since they navigate rather than switch panels. Colour is
   set explicitly so these match the panel buttons beside them rather
   than inheriting the site's link colour. */
.account-nav-link {
  text-decoration: none;
  color: var(--text);
}
.account-nav-link:hover { color: var(--accent); }

/* Account deletion — deliberately set apart from the listing actions
   above it, in the removed-listing red rather than the site's emerald,
   so it never reads as just another dashboard button. */
.danger-zone {
  margin-top: 40px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--tag-removed);
  border-radius: var(--radius);
}
.danger-zone h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--tag-removed);
  margin: 0 0 8px;
}
.danger-zone p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
  max-width: 60ch;
}
.danger-zone-confirm {
  margin-bottom: 14px;
}
.danger-zone-confirm label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.danger-zone-confirm input {
  width: 100%;
  max-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
}

.btn-danger {
  background: var(--tag-removed);
  color: #fff;
  border: 1px solid var(--tag-removed);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background: #871919; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.dashboard-listing-row {
  display: flex;
  gap: 16px;
}

.dashboard-listing-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--bg-alt);
  object-fit: cover;
}

.dashboard-listing-info {
  flex: 1;
  min-width: 0;
}

.dashboard-listing-info .listing-price {
  margin: 0 0 6px;
}

.dashboard-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.dashboard-stat {
  font-size: 13px;
  color: var(--text-muted);
}
.dashboard-stat strong {
  color: var(--text);
}

.views-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
  margin: 12px 0;
  border-bottom: 1px solid var(--line);
}
.views-chart-bar {
  flex: 1;
  min-height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}