:root {
  --asphalt: #1d2327; --asphalt-2: #2b343a; --kerb: #f2b705; --lane: #f4f6f7; --teal: #0b5f59; --teal-2: #0f766e;
  --brake: #b3261e; --ink: #1d2327; --muted: #5b666d; --line: #dfe4e7;
  --teal-dark: #084843; --teal-darker: #073d39; --kerb-hover: #ffc61a; --on-kerb: #1d2327; --on-primary: #fff; --r: 8px;
  --bs-primary: #0b5f59; --bs-primary-rgb: 11, 95, 89; --bs-link-color: #0b5f59; --bs-link-hover-color: #084843;
  --bs-body-font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--ink); --bs-body-bg: var(--lane);
  --display: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
body { font-size: 1rem; line-height: 1.55; }
h1, h2, h3, h4, .brand, .price { font-family: var(--display); letter-spacing: -0.01em; }
.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); --bs-btn-active-color: var(--on-primary); --bs-btn-hover-bg: var(--teal-dark); --bs-btn-hover-border-color: var(--teal-dark); --bs-btn-active-bg: var(--teal-darker); --bs-btn-active-border-color: var(--teal-darker); --bs-btn-disabled-bg: var(--teal); --bs-btn-disabled-border-color: var(--teal); }
.btn-kerb { background: var(--kerb); border-color: var(--kerb); color: var(--on-kerb); font-weight: 600; }
.btn-kerb:hover { background: var(--kerb-hover); border-color: var(--kerb-hover); color: var(--on-kerb); }
:focus-visible { outline: 3px solid var(--kerb); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--kerb); color: var(--asphalt); padding: .5rem 1rem; z-index: 2000; }
.skip-link:focus { left: 0; }

/* Navigation */
.site-nav { background: var(--asphalt); border-bottom: 3px solid var(--kerb); }
.site-nav .navbar-brand { color: #fff; font-weight: 700; font-size: 1.35rem; }
.site-nav .navbar-brand .dot { color: var(--kerb); }
.site-nav .nav-link { color: #d5dbde; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; }
.site-nav .nav-link.active { box-shadow: inset 0 -3px 0 var(--kerb); }
.site-nav .navbar-toggler { border-color: #5b666d; }
.site-nav .navbar-toggler-icon { filter: invert(1); }

/* Hero: a road with a centre line */
.hero { background: var(--asphalt); color: #fff; padding: 3.5rem 0 5.5rem; position: relative; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--kerb) 0 38px, transparent 38px 70px); opacity: .9; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; max-width: 18ch; line-height: 1.05; }
.hero p.lead { color: #c3cbcf; max-width: 46ch; }
.search-panel { background: #fff; color: var(--ink); border-radius: var(--r); padding: 1.25rem; margin-top: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.search-panel .form-label { font-size: .85rem; color: var(--muted); margin-bottom: .2rem; }

/* Vehicle cards */
.vcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.vcard:hover { border-color: #aab5bb; }
.vcard .ph { position: relative; aspect-ratio: 4 / 3; background: #e9edef; }
.vcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .badges { position: absolute; left: .5rem; top: .5rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.vcard .body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.vcard h3 { font-size: 1.05rem; margin: 0; }
.vcard h3 a { color: var(--ink); text-decoration: none; }
.vcard h3 a:hover { text-decoration: underline; }
.price { font-size: 1.25rem; font-weight: 700; color: var(--teal); }
.specs { color: var(--muted); font-size: .88rem; }
.plate { display: inline-block; border: 2px solid var(--asphalt); border-radius: 4px; padding: 0 .4rem; font-family: var(--display); font-weight: 600; font-size: .8rem; background: #fff; color: var(--asphalt); }
.vcard .actions { margin-top: auto; display: flex; gap: .4rem; padding-top: .5rem; }
.sold-ribbon { background: var(--asphalt); color: #fff; }

/* Sections */
.section { padding: 2.5rem 0; }
.section-title { font-size: 1.6rem; margin-bottom: 1.25rem; }
.tile { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; color: var(--ink); text-decoration: none; }
.tile:hover { border-color: var(--teal); }
.tile .n { color: var(--muted); font-size: .85rem; }
.benefit { border-left: 4px solid var(--kerb); padding-left: 1rem; }

/* Vehicle detail */
.gallery-main { aspect-ratio: 4 / 3; background: #e9edef; border-radius: var(--r); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; background: #111; }
.thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0; }
.thumbs button { border: 2px solid transparent; padding: 0; background: none; border-radius: .25rem; flex: 0 0 90px; }
.thumbs button.active { border-color: var(--kerb); }
.thumbs img { width: 90px; height: 68px; object-fit: cover; display: block; border-radius: .2rem; }
.spec-table th { width: 40%; color: var(--muted); font-weight: 500; }

/* Dashboards */
.dash { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 140px); }
.dash-side { background: #fff; border-right: 1px solid var(--line); padding: 1.25rem .75rem; }
.dash-side .nav-link { color: var(--ink); border-radius: .35rem; padding: .5rem .75rem; }
.dash-side .nav-link:hover { background: var(--lane); }
.dash-side .nav-link.active { background: var(--asphalt); color: #fff; }
.dash-main { padding: 1.5rem; min-width: 0; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; height: 100%; }
.stat .v { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: .88rem; }
.stat.alert-stat { border-left: 4px solid var(--kerb); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.25rem; }
.chart-box { position: relative; height: 260px; }
.msg { max-width: 80%; padding: .6rem .9rem; border-radius: .6rem; margin-bottom: .6rem; background: #fff; border: 1px solid var(--line); }
.msg.mine { margin-left: auto; background: #e3f1ef; border-color: #b9dcd8; }
.msg small { color: var(--muted); display: block; }
.auth-card { max-width: 480px; margin: 2.5rem auto; }
.auth-card.wide { max-width: 760px; }
footer.site-footer { background: var(--asphalt); color: #b7c0c4; padding: 2.5rem 0 1.5rem; margin-top: 3rem; border-top: 3px solid var(--kerb); }
footer.site-footer a { color: #e5eaec; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.img-edit { border: 1px solid var(--line); border-radius: .4rem; padding: .4rem; background: #fff; }
.img-edit img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: .25rem; }
.htmx-hide { display: none; }
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { border-right: 0; border-bottom: 1px solid var(--line); padding: .5rem; }
  .dash-side .nav { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; }
  .dash-side .nav-link { white-space: nowrap; }
  .msg { max-width: 95%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.brand-logo { height: 34px; width: auto; display: block; }
.announce { background: var(--kerb); color: var(--on-kerb); text-align: center; padding: .45rem 1rem; font-weight: 500; }
.sponsored-tag { position: absolute; right: .5rem; top: .5rem; background: rgba(29,35,39,.9); color: #fff; font-size: .72rem; padding: .1rem .45rem; border-radius: 4px; letter-spacing: .02em; }
.range-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.range-bar > span { display: block; height: 100%; background: var(--teal); }