/* ─── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-light: #eff6ff;
    /* Accent — overridden by color scheme classes */
    --accent:       #2563eb;
    --accent-dark:  #1d4ed8;
    --accent-light: #eff6ff;
    /* Not pure white: less glare, and shadows read as depth
       rather than smudges. Contrast against --text is still
       ~17:1, far above the 4.5:1 AA requirement. */
    --surface: #fdfdfe;
    --bg: #f1f5f9;
    --border: #e2e8f0;
    --text: #0f172a;
    /* #64748b measured 4.34:1 against --bg, just under the 4.5:1 AA
       threshold for normal text. This clears it on both backgrounds. */
    --text-muted: #5b6779;
    --orange: #f97316;
    --orange-light: #fff7ed;
    /* White text on #16a34a was 3.30:1 — a fail for normal text. The
       darker green reads the same and clears AA at 5.02:1. */
    --green: #15803d;
    --red: #dc2626;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 24px rgba(0,0,0,0.1);
    --navbar-h: 64px;
    --font: 'Inter', 'Segoe UI', Arial, sans-serif;
    /* Headings only. Archivo's slightly technical, automotive cut gives the
       titles a voice of their own; Inter keeps the body, tables and spec
       numbers, where its tabular figures line up. Both load from base.html. */
    --font-display: 'Archivo', 'Inter', 'Segoe UI', Arial, sans-serif;

    /* Aliases for a second naming scheme that crept in with the profile and
       garage styles. These were used ~30 times and never defined anywhere, so
       every rule referencing them was silently dropped: the profile "..."
       menu opened with no background at all and read as a dead button.
       Dark mode sets --surface/--bg/--text on html, which is this same
       element, so these follow the theme rather than freezing the light
       values. Prefer the short names in new code. */
    --card-bg:        var(--surface);
    --bg-secondary:   var(--bg);
    --text-primary:   var(--text);
    --text-secondary: var(--text-muted);
    --shadow-sm:      var(--shadow);
}

/* Fonts are linked from base.html. An @import here sat below :root, and a
   browser ignores any @import that is not the first rule in the file, so
   Inter never actually loaded and every page fell back to Segoe UI/Arial. */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); }
input, textarea, select { font-family: var(--font); }

/* ─── Navbar ────────────────────────────────────────────── */
.navbar {
    height: var(--navbar-h);
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}

.hamburger {
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 8px;
    transition: background 0.15s;
    line-height: 1;
}
.hamburger:hover { background: var(--bg); }

.logo {
    color: var(--accent);
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
}

.search-bar {
    flex: 1;
    min-width: 0;   /* lets the field give way instead of pushing the bar wider */
    max-width: 480px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.search-bar:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: #fee2e2; color: var(--red); }
.btn-danger:hover { background: #fecaca; }

/* legacy aliases */
.post-btn { padding: 8px 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.post-btn:hover { background: var(--accent-dark); }
.logout-btn { padding: 8px 18px; background: #fee2e2; color: var(--red); border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; }
.logout-btn:hover { background: #fecaca; }

.user-badge {
    font-weight: 600;
    color: var(--accent);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent-light);
    transition: background 0.15s;
}
.user-badge:hover { background: #dbeafe; text-decoration: none; }

/* ─── Sidebar ───────────────────────────────────────────── */
.left-sidebar {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    width: 240px;
    height: calc(100vh - var(--navbar-h));
    background: var(--surface);
    padding: 16px 12px;
    border-right: 1px solid var(--border);
    z-index: 99;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}
.left-sidebar.hidden { transform: translateX(-110%); }

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s, color 0.15s;
    margin-bottom: 2px;
}
.sidebar-item:hover { background: var(--bg); color: var(--accent); }
.sidebar-item.active { background: var(--accent-light); color: var(--accent); }

/* keep old p selector working */
.left-sidebar .sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s, color 0.15s;
}
.left-sidebar .sb-link:hover { background: var(--bg); color: var(--accent); }
.left-sidebar .sb-link i, .left-sidebar .sb-link [data-lucide] {
    width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted);
}
.left-sidebar .sb-link:hover i, .left-sidebar .sb-link:hover [data-lucide] { color: var(--accent); }

/* Grouped sidebar sections */
.sidebar-group { margin-bottom: 18px; }
.sidebar-group:last-child { margin-bottom: 4px; }
.sidebar-group-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 12px 6px;
    opacity: 0.75;
}

.menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 98;
    backdrop-filter: blur(2px);
}
.menu-overlay.show { display: block; }

/* ─── Layout ────────────────────────────────────────────── */
.home-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    padding: 24px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

/* ─── Right Sidebar ─────────────────────────────────────── */
.right-sidebar {
    background: var(--surface);
    padding: 20px;
    border-radius: var(--radius);
    height: fit-content;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.right-sidebar h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.right-sidebar p {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s;
}
.right-sidebar p:hover { background: var(--bg); color: var(--accent); }

/* ─── Feed ──────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 16px; }

/* ─── Post Card ─────────────────────────────────────────── */
.post-card {
    background: var(--surface);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s;
}
.post-card:hover { box-shadow: var(--shadow-md); }
.post-card.post-focused {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-md);
}

/* Single post page */
.post-detail-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px;
}
.post-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s;
}
.post-back-link:hover { color: var(--text); }
.post-back-link i { width: 16px; height: 16px; }

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.username {
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
}
.username:hover { color: var(--accent); }

.user-car {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.user-car:hover { text-decoration: underline; }

.time {
    color: var(--text-muted);
    font-size: 13px;
    margin-left: auto;
}

.post-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.post-body { color: var(--text); font-size: 15px; line-height: 1.6; }

.post-image {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 300px;
    object-fit: contain;      /* never crop — show the whole image */
    border-radius: 10px;
    margin: 14px auto 0;
    background: var(--bg);
    cursor: zoom-in;
}
.post-image.post-gif { cursor: default; }

/* Image lightbox */
.img-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow: auto;
}
.img-lightbox.open { display: flex; }
.img-lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
}
.img-lightbox-img.zoomed {
    max-width: none;
    max-height: none;
    width: auto;
    transform: scale(1.6);
    cursor: zoom-out;
}
.img-lightbox-close {
    position: fixed;
    top: 18px;
    right: 24px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.15s;
}
.img-lightbox-close:hover { background: rgba(255,255,255,0.25); }

.post-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.post-actions button {
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    color: var(--text-muted);
}
.post-actions button:hover { background: var(--bg); border-color: #cbd5e1; color: var(--text); }
.post-actions .like-btn { color: var(--accent); border-color: #bfdbfe; background: var(--accent-light); }
.post-actions .like-btn:hover { background: #dbeafe; }

/* ─── Comments ──────────────────────────────────────────── */
.comments-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.comment {
    background: var(--bg);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.comment .username { font-size: 13px; margin-bottom: 2px; }
.comments-section input {
    width: 100%;
    padding: 9px 12px;
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.comments-section input:focus { border-color: var(--accent); }
.comments-section button {
    margin-top: 8px;
    padding: 7px 16px;
    border: none;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.comments-section button:hover { background: var(--accent-dark); }

/* ─── Modal ─────────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    justify-content: center;
    align-items: center;
    z-index: 200;
    backdrop-filter: blur(3px);
    padding: 16px;
}
.modal-content {
    background: var(--surface);
    padding: 28px;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-content h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.modal-content input,
.modal-content textarea,
.modal-content select {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.modal-content input:focus,
.modal-content textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.modal-content textarea { resize: vertical; min-height: 100px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions button { flex: 1; padding: 10px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.modal-actions .btn-submit { background: var(--accent); color: #fff; }
.modal-actions .btn-submit:hover { background: var(--accent-dark); }
.modal-actions .btn-cancel { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.modal-actions .btn-cancel:hover { background: #e2e8f0; }

/* ─── Garage ────────────────────────────────────────────── */

.garage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.garage-header h2 { font-size: 24px; font-weight: 700; }
.garage-list { display: flex; flex-direction: column; gap: 20px; }
.garage-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s;
}
.garage-card:hover { box-shadow: var(--shadow-md); }
.garage-image { width: 100%; max-height: 380px; object-fit: cover; }
.garage-info { padding: 20px; }
.garage-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.garage-info p { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; }
.mod-list { margin-top: 16px; }
.mod-item {
    background: var(--bg);
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mod-item p { margin: 0; color: var(--text); }
.total-cost {
    margin-top: 14px;
    font-weight: 700;
    color: var(--accent);
    font-size: 15px;
    padding: 10px 14px;
    background: var(--accent-light);
    border-radius: 8px;
}

/* ─── Auth ──────────────────────────────────────────────── */
.auth-container {
    background: var(--surface);
    padding: 36px;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    margin: 60px auto;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.auth-container h2 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.auth-container form { display: flex; flex-direction: column; gap: 12px; }
.auth-container input {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-container input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.auth-container button {
    padding: 11px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.auth-container button:hover { background: var(--accent-dark); }
.auth-container p { margin-top: 16px; font-size: 14px; color: var(--text-muted); text-align: center; }
.auth-container a { color: var(--accent); font-weight: 500; }
.auth-error {
    background: #fee2e2;
    color: var(--red);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.auth-notice {
    background: var(--accent-light);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}
.auth-container p.auth-sub { margin: -8px 0 16px; text-align: left; }
.auth-container p.auth-forgot { margin-top: 10px; }

/* ─── Compare ───────────────────────────────────────────── */
.compare-page { padding: 28px; max-width: 1100px; margin: 0 auto; }
.compare-page h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; }

.compare-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--surface);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.compare-inputs label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.search-box input:focus { border-color: var(--accent); }
.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
}
.suggestion-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item.active {
    background: var(--accent-light);
    color: var(--accent);
}
.suggestion-item strong { color: var(--accent); font-weight: 700; }

.compare-inputs select {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--surface);
    outline: none;
    cursor: pointer;
}
.compare-btn {
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.compare-btn:hover { background: var(--accent-dark); }

.comparison-layout {
    display: grid;
    /* minmax(0, ...): a bare 1fr won't shrink below its longest word, so a
       long trim name made one card wider and pushed the pair off the screen. */
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 24px;
}
.comparison-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.vehicle-image-box {
    background: #0f172a;
    height: 260px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}
.compare-vehicle-image { width: 100%; height: 100%; object-fit: contain; }
.missing-image { color: #94a3b8; font-size: 15px; }
.comparison-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; text-align: center; }
.or-divider { font-size: 28px; font-weight: 800; align-self: center; text-align: center; color: var(--text-muted); }
.features-box { text-align: left; }
.features-box h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 14px 0 6px; }
.features-box ul { padding-left: 18px; }
.features-box li { margin: 5px 0; font-size: 14px; }

.similarities-box, .winner-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 20px;
    box-shadow: var(--shadow);
}
.similarities-box h2, .winner-box h2 { color: var(--accent); margin-bottom: 10px; font-size: 18px; font-weight: 700; }
.winner-box p { font-size: 15px; line-height: 1.6; }
.winner-box ul { margin-top: 10px; padding-left: 20px; }
.winner-box li { margin-bottom: 6px; font-size: 14px; }
.winner-box strong { color: var(--accent); }
.risk-box {
    background: var(--orange-light);
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 20px;
    color: #1c1917;
}
.risk-box h2 { color: #c2410c; margin-bottom: 10px; font-size: 18px; font-weight: 700; }
.risk-box p  { color: #1c1917; font-weight: 600; margin: 10px 0 4px; }
.risk-box p strong { color: #1c1917; }
.risk-box ul { padding-left: 18px; }
.risk-box li { margin: 5px 0; font-size: 14px; color: #44403c; }

/* ─── Saved ─────────────────────────────────────────────── */

.empty-state { text-align: center; color: var(--text-muted); padding: 60px 20px; font-size: 15px; }

/* ─── Profile ───────────────────────────────────────────── */
.profile-container { padding: 0 0 28px; max-width: 860px; margin: 0 auto; }

.profile-cover {
    width: 100%;
    height: 260px;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
    overflow: hidden;
    /* An uploaded cover sets background-image inline on top of this. */
    background:
        radial-gradient(circle at 85% 0%, rgba(37,99,235,.45), transparent 55%),
        radial-gradient(circle at 10% 120%, rgba(225,29,72,.25), transparent 50%),
        #16202e;
}
.cover-actions {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}
.cover-upload-btn, .cover-remove-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    border: none;
}
.cover-upload-btn:hover, .cover-remove-btn:hover { background: rgba(0,0,0,0.75); }
.cover-upload-btn svg, .cover-remove-btn svg { width: 15px; height: 15px; }

.profile-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 20px 28px 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}
.profile-info { flex: 1; min-width: 0; text-align: left; }

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.profile-name-row h2 {
    margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 90%;
    font-size: 26px; letter-spacing: -.5px;
}

.profile-car-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}
.profile-car-inline svg { width: 13px; height: 13px; }
.profile-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 4px;
}
.profile-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 24px 0 12px;
}

/* ─── Follow ────────────────────────────────────────────── */
.follow-btn {
    padding: 8px 20px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.follow-btn.following { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.follow-btn.follow { background: var(--accent); color: #fff; }
.follow-btn.follow:hover { background: var(--accent-dark); }
.follow-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.follow-stats span { padding: 5px 12px; border-radius: 999px; background: var(--bg-secondary); }
.follow-stats strong { font-family: var(--font-display); font-weight: 800; color: var(--text); margin-right: 2px; }

/* ─── Notifications ─────────────────────────────────────── */
.notif-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background 0.15s;
}
.notif-btn:hover { background: var(--bg); }
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.notif-dropdown {
    position: absolute;
    top: calc(var(--navbar-h) + 4px);
    right: 16px;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 150;
    display: none;
    overflow: hidden;
}
.notif-dropdown.open { display: block; }
/* A long list otherwise runs off the bottom of the screen with no way back. */
.notif-dropdown { max-height: 70vh; overflow-y: auto; }

/* On phones the 320px panel overhangs the edge. Positioning it against the
   viewport rather than an ancestor is what matters here: as `position:
   absolute` it sizes against the nearest positioned parent, so pinning left
   and right collapsed it to a thin bar. `fixed` takes the viewport, which is
   what "full width minus a margin" actually means. */
@media (max-width: 460px) {
    .notif-dropdown {
        position: fixed;
        top: calc(var(--navbar-h) + 4px);
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100vh - var(--navbar-h) - 24px);
    }
}
.notif-header {
    padding: 14px 16px;
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notif-header button { background: none; border: none; font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 500; }
.notif-item {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--accent-light); }
.notif-item .notif-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ─── Search Results ────────────────────────────────────── */
.search-results-page { padding: 28px; max-width: 800px; margin: 0 auto; }
.search-results-page h2 { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
.search-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.search-tab {
    padding: 9px 18px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.search-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.search-result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.search-result-card:hover { box-shadow: var(--shadow-md); }

/* ─── Flash Messages ────────────────────────────────────── */
.flash { padding: 12px 20px; font-size: 14px; font-weight: 500; text-align: center; }
.flash-error { background: #fee2e2; color: var(--red); }
.flash-success { background: #dcfce7; color: var(--green); }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .home-layout { grid-template-columns: 1fr; }
    /* Weekly challenge + news get moved into the nav drawer by JS.
       If JS hasn't run yet, keep them visible below the feed. */
    .right-sidebar {
        display: block;
        width: 100%;
        position: static;
        max-height: none;
        margin-top: 20px;
    }
    .sidebar-widgets .right-sidebar { margin-top: 0; }
    /* Comparison stays side-by-side at every width — that IS the feature */
    .comparison-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .or-divider { display: none; }
}

@media (max-width: 640px) {
    .navbar { padding: 0 12px; gap: 10px; }
    .logo { font-size: 18px; }
    .search-bar { max-width: 160px; font-size: 13px; }
    .home-layout { padding: 12px; }
    .compare-page { padding: 16px; }
    .profile-container { padding: 0 0 16px; }
    .profile-cover { height: 160px; border-radius: 0; }
    .profile-header { padding: 16px; gap: 14px; flex-wrap: wrap; }
    .profile-actions { width: 100%; }
    .profile-info h2 { font-size: 18px; }
    .modal-content { padding: 20px; }
    .auth-container { margin: 20px auto; padding: 24px; }
    .compare-inputs { flex-direction: column; }
    .search-box { min-width: 100%; }
    .post-card { padding: 14px; }
}

/* ─── Builder Page — Tesla Style ────────────────────────────────── */
.builder-page {
    /* bleed only sides + bottom — keep top gap so nav isn't overlapped */
    margin: 0 -28px -28px;
    overflow: hidden;
}

/* Builder Sections — flush list in the right panel */
.builder-section {
    background: var(--surface);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.builder-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    background: var(--surface);
    transition: background 0.12s;
}
.builder-section-header i { width: 16px; height: 16px; margin-right: 6px; color: var(--text-muted); }
.builder-section-header:hover { background: var(--bg); }
.section-toggle { color: var(--text-muted); transition: transform 0.2s; }
.builder-section-body { padding: 16px 20px; }

/* Base Vehicle */
.base-vehicle-inputs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.base-vehicle-inputs input {
    flex: 1;
    min-width: 120px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.base-vehicle-inputs input:focus { border-color: var(--accent); }
.base-vehicle-display {
    margin-top: 14px;
    background: var(--accent-light);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.base-vehicle-name { font-weight: 700; font-size: 15px; color: var(--accent); }
.base-vehicle-price { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Category Grid */
.category-grid { display: flex; flex-direction: column; gap: 0; }

/* Preset Buttons */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.preset-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    gap: 2px;
}
.preset-btn:hover:not(:disabled) { background: var(--accent-light); border-color: #bfdbfe; }
.preset-btn.selected { background: #dcfce7; border-color: #86efac; opacity: 0.7; cursor: default; }
.preset-btn:disabled { cursor: default; }
.preset-name { font-size: 13px; font-weight: 500; color: var(--text); }
.preset-cost { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Custom part row */
.custom-part-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.custom-input {
    flex: 2;
    min-width: 160px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.custom-input:focus { border-color: var(--accent); }
.custom-cost-input {
    flex: 1;
    min-width: 100px;
    max-width: 140px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.custom-cost-input:focus { border-color: var(--accent); }

/* Added parts */
.added-parts { display: flex; flex-direction: column; gap: 6px; }
.added-part {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid var(--border);
}
.added-part-name { flex: 1; font-weight: 500; }
.added-part-cost { font-weight: 700; color: var(--accent); min-width: 70px; text-align: right; }
.remove-part-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
}
.remove-part-btn:hover { background: #fee2e2; color: var(--red); }

/* Build Summary */
.build-summary {
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 24px;
    margin-top: 24px;
    box-shadow: var(--shadow-md);
}
.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.summary-header h3 { font-size: 18px; font-weight: 700; }
.part-count {
    background: var(--accent-light);
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
.summary-list { margin-bottom: 20px; }
.summary-category { margin-bottom: 14px; }
.summary-cat-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.summary-part-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 3px 0 3px 12px;
    color: var(--text);
}
.summary-totals {
    border-top: 2px solid var(--border);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: var(--text-muted);
}
.summary-row span:last-child { font-weight: 600; color: var(--text); }
.total-row {
    font-size: 18px;
    font-weight: 700;
    color: var(--text) !important;
    margin-top: 4px;
}
.total-row span { color: var(--text) !important; }
.total-row span:last-child { color: var(--accent) !important; font-size: 20px; }

/* Saved Builds */
.saved-builds-list { padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.saved-build-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
    gap: 16px;
    flex-wrap: wrap;
}
.saved-build-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.saved-build-vehicle { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.saved-build-stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.saved-build-total { color: var(--accent); font-weight: 700; }
.saved-build-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 640px) {
    .builder-header { flex-direction: column; }
    .build-name-input { width: 100%; }
    .preset-grid { grid-template-columns: 1fr 1fr; }
    .base-vehicle-inputs input { min-width: 100%; }
}

/* ─── Builder: Tesla-style layout ───────────────────────────────── */
.builder-layout {
    display: grid;
    grid-template-columns: 1fr 440px;
    height: calc(100vh - 64px - 28px);
    overflow: hidden;
}

/* LEFT: full-height sticky 3D panel */
.builder-visual-panel {
    position: relative;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.viewer-3d-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #111827;
}

#carCanvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* overlay bars on the canvas */
.build-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.build-name-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color 0.15s;
    min-width: 0;
}
.build-name-input::placeholder { color: var(--text-muted); }
.build-name-input:focus { border-color: var(--accent); }

.viewer-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(168,173,181,0.96) 0%, rgba(168,173,181,0) 100%);
    padding: 60px 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
}

.viewer-paint-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.paint-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #6b7280;
    text-transform: uppercase;
    min-width: 50px;
}
/* ─── Garage: Custom Build Cards ─────────────────────────────────── */

/* Settings accent-color swatches */
.color-scheme-picker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.color-scheme-picker .color-swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.color-scheme-picker .color-swatch:hover  { transform: scale(1.15); }
.color-scheme-picker .color-swatch.active {
    border-color: var(--text);
    transform: scale(1.12);
    box-shadow: 0 0 0 2px var(--surface), 0 1px 6px rgba(0,0,0,0.3);
}

#colorWheel {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    cursor: crosshair;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.paint-lightness-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
#lightSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #000, #808080, #fff);
    outline: none;
    cursor: pointer;
}
#lightSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #333;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.paint-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.paint-preview {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #6e6e6e;
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
}
.paint-hint {
    font-size: 10px;
    color: #4b5057;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.viewer-rotate-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.viewer-ctrl-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    background: rgba(0,0,0,0.06);
    color: #374151;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.viewer-ctrl-btn i { width: 14px; height: 14px; }
.viewer-ctrl-btn:hover { background: rgba(0,0,0,0.12); }

/* RIGHT: scrollable config panel */
.builder-parts-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parts-panel-header {
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.parts-panel-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.parts-panel-header p  { font-size: 13px; color: var(--text-muted); }

@media (max-width: 900px) {
    .builder-layout {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }
    .builder-visual-panel { height: 55vw; min-height: 320px; }
    .builder-parts-panel  { overflow-y: visible; }
}
@media (max-width: 640px) {
    .builder-visual-panel { height: 70vw; }
}

/* ─── Builder: Part Variant Buttons ────────────────────────────── */
.builder-section-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
    padding: 6px 2px 2px;
    margin-top: 4px;
}
.builder-section-group-label i { width: 14px; height: 14px; }

.part-variants-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 6px;
}
.part-variant-btn {
    flex: 1;
    min-width: 80px;
    padding: 8px 10px;
    background: #0f172a;
    border: 1.5px solid #1e293b;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.pv-label { font-size: 12px; font-weight: 600; }
.pv-price { font-size: 10px; font-weight: 500; opacity: 0.65; }
/* Optional per-variant footnote — used where the sticker price needs context,
   e.g. wheels quoted per wheel rather than per set. */
.pv-note {
    font-size: 9.5px; font-weight: 500; opacity: 0.7; line-height: 1.3;
    display: block; max-width: 100%;
}
.part-variant-btn.active .pv-price { opacity: 0.9; }

/* Model match banner */
.model-match-banner {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    z-index: 6;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-match-banner i { width: 14px; height: 14px; flex-shrink: 0; }
.model-match-banner.approx {
    background: rgba(30, 41, 59, 0.85);
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.12);
}
.model-match-banner.exact {
    background: rgba(22, 163, 74, 0.9);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Screen-reader-only label text: present for assistive tech, invisible on
   screen. Must not use display:none, which removes it from the a11y tree. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Body style picker.
   A dropdown rather than a tile grid: the grid pushed the parts list off the
   bottom of a phone screen before the user had picked anything. */
.body-style-select-wrap { display: flex; flex-direction: column; gap: 8px; }
.body-style-select {
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
    /* 44px min target so it's comfortably tappable (WCAG 2.5.5). */
    min-height: 44px;
}
.body-style-select:hover { border-color: var(--accent); }
.body-style-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
}
.body-style-soon-note {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* Builder navbar: the model name and account controls need the width, so the
   secondary nav links are hidden on the builder page only. */
.page-builder .nav-compare,
.page-builder .nav-explore-btn { display: none; }
.part-variant-btn:hover  { border-color: #334155; color: #e2e8f0; background: #1e293b; }
.part-variant-btn.active { border-color: var(--accent); color: #fff; background: rgba(37,99,235,0.12); }

/* ─── Builder: Performance Mods ────────────────────────────────── */
.mod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #1e293b;
    transition: background 0.12s;
}
.mod-row:last-child { border-bottom: none; }
.mod-row.mod-active { background: rgba(37,99,235,0.06); border-radius: 8px; padding: 10px 8px; margin: 0 -8px; }

.mod-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.mod-icon { width: 16px; height: 16px; color: #64748b; flex-shrink: 0; }
.mod-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.mod-sub  { font-size: 11px; color: #22c55e; font-weight: 500; margin-top: 1px; }

.mod-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.mod-cost { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mod-add-btn {
    padding: 5px 12px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mod-add-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.mod-active .mod-add-btn { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ─── Builder: Model Load Overlay ───────────────────────────────── */
#modelLoadOverlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(13,17,23,0.88);
    z-index: 10;
    border-radius: var(--radius);
}
#modelLoadStatus { font-size: 13px; color: #94a3b8; }

/* ─── Builder: Toast ─────────────────────────────────────────────── */
.builder-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    animation: toastIn 0.2s ease, toastOut 0.3s ease 2.5s forwards;
    pointer-events: none;
}
.builder-toast.toast-error { background: #7f1d1d; border-color: #dc2626; color: #fca5a5; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

/* ─── Builder: Saved Build Cards ─────────────────────────────────── */
.saved-build-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #1e293b;
}
.saved-build-card:last-child { border-bottom: none; }
.saved-build-info { display: flex; flex-direction: column; gap: 2px; }
.saved-build-info strong { font-size: 13px; color: #e2e8f0; }
.saved-build-info span   { font-size: 11px; color: #64748b; }
.saved-build-actions { display: flex; gap: 6px; }
/* Scoped to the builder's saved-build list so it doesn't override the
   global solid .btn-danger (was causing red-on-red unreadable buttons) */
.saved-build-actions .btn-danger { background: transparent; color: #ef4444; }
.saved-build-actions .btn-danger:hover { background: rgba(239,68,68,0.12); }

/* ─── Profile Avatar ────────────────────────────────────────────── */
.profile-avatar-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}
.profile-avatar-img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-md);
}
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border);
    box-shadow: var(--shadow-md);
}
.avatar-upload-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    border: 2px solid var(--surface);
    transition: background 0.15s;
    line-height: 1;
}
.avatar-upload-btn:hover { background: var(--accent-dark); }

/* ─── Image Loading & Fallback ──────────────────────────────────── */
.img-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: #64748b;
    font-size: 13px;
}
.img-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #1e293b;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ─── Race Page ──────────────────────────────────────────────────── */
.race-page { padding: 24px; max-width: 1200px; margin: 0 auto; }
.race-header { margin-bottom: 20px; }
.race-header h2 { font-size: 26px; font-weight: 700; }

.race-mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.race-tab {
    padding: 10px 24px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; color: var(--text-muted);
}
.race-tab:hover { background: var(--bg); }
.race-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.race-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }

/* Setup Panel */
.race-setup-panel { display: flex; flex-direction: column; gap: 14px; }
.race-setup-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
.race-setup-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.race-setup-card select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; background: var(--bg);
    outline: none; cursor: pointer; margin-bottom: 10px;
}

.opponent-type-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.opp-tab {
    flex: 1; padding: 7px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--bg); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; color: var(--text-muted);
}
.opp-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Opponent picker: random match + username search */
.opp-random-btn {
    width: 100%; justify-content: center; margin-bottom: 10px;
    font-size: 13px; font-weight: 600;
}
.opp-search-wrap { position: relative; margin-bottom: 10px; }
.opp-search-wrap i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; color: var(--text-muted); pointer-events: none;
}
.opp-search-wrap input {
    width: 100%; padding: 9px 12px 9px 32px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; background: var(--bg);
    outline: none; color: var(--text);
}
.opp-search-wrap input:focus { border-color: var(--accent); }
.opp-hint {
    font-size: 12px; color: var(--text-muted); line-height: 1.4;
    margin: -4px 0 10px;
}
.opp-hint:empty { display: none; }

/* Build Preview */
.build-preview { margin-top: 10px; padding: 12px; background: var(--bg); border-radius: 8px; }
.build-preview-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.build-preview-parts { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

.stat-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.stat-bar-row > span:first-child { width: 60px; color: var(--text-muted); font-weight: 500; }
.stat-bar-row > span:last-child  { width: 28px; text-align: right; font-weight: 700; }
.stat-bar { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
.stat-bar-fill.hp   { background: #ef4444; }
.stat-bar-fill.hand { background: #3b82f6; }
.stat-bar-fill.brk  { background: #f97316; }
.stat-bar-fill.nit  { background: #8b5cf6; }

.race-start-btn {
    width: 100%; padding: 14px; background: var(--accent); color: #fff;
    border: none; border-radius: 10px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background 0.15s, opacity 0.15s;
    letter-spacing: 0.03em;
}
.race-start-btn:hover:not(:disabled) { background: var(--accent-dark); }
.race-start-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Canvas Panel */
.race-canvas-panel { display: flex; flex-direction: column; gap: 16px; }
.race-canvas-wrap {
    position: relative; background: #0a0f1a;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid #1e293b; box-shadow: var(--shadow-lg);
    height: 420px;
}
#raceCanvas { width: 100%; height: 100%; display: block; }

.race-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,15,26,0.85); backdrop-filter: blur(4px);
}
.race-ready-msg { text-align: center; color: #94a3b8; font-size: 16px; }
.race-ready-msg div:first-child { font-size: 56px; margin-bottom: 12px; }

.race-hud {
    position: absolute; top: 12px; right: 12px;
    display: flex; gap: 12px; align-items: center;
}
.hud-item {
    background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 6px 12px; text-align: center;
    backdrop-filter: blur(4px);
}
.hud-label { display: block; font-size: 9px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; }
.hud-value { font-size: 20px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.hud-unit  { font-size: 10px; color: #94a3b8; margin-left: 2px; }

.race-controls-hint {
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.race-controls-hint span {
    background: rgba(0,0,0,0.6); color: #94a3b8;
    font-size: 11px; padding: 4px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
}

/* Results */
.race-results {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-md);
}
.results-banner { text-align: center; margin-bottom: 16px; }
.result-win  { font-size: 32px; font-weight: 800; color: #16a34a; }
.result-lose { font-size: 32px; font-weight: 800; color: var(--red); }
.results-banner p { color: var(--text-muted); margin-top: 4px; }
.results-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; justify-content: center; }
.result-stat {
    background: var(--bg); border-radius: 8px; padding: 12px 20px;
    text-align: center; min-width: 100px;
    border: 1px solid var(--border);
}
.result-stat span  { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.result-stat strong { font-size: 18px; font-weight: 700; }
.results-actions { display: flex; gap: 10px; justify-content: center; }

/* Leaderboard */
.leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.leaderboard-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; font-size: 13px;
}
.leaderboard-row.win  { background: #dcfce7; }
.leaderboard-row.loss { background: #fee2e2; }
.lb-rank   { font-weight: 700; color: var(--text-muted); width: 16px; }
.lb-build  { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-result { font-size: 14px; }
.lb-time   { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }

@media (max-width: 900px) {
    .race-layout { grid-template-columns: 1fr; }
    .race-canvas-wrap { height: 320px; }
}

/* ─── Builder Base Vehicle Dropdowns ────────────────────────────── */
.base-vehicle-dropdowns { display: flex; flex-direction: column; gap: 10px; }
.bv-row { display: flex; flex-direction: column; gap: 4px; }
.bv-row label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bv-row select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; background: var(--bg);
    outline: none; cursor: pointer; transition: border-color 0.15s;
}
.bv-row select:focus { border-color: var(--accent); }
.bv-row select:disabled { opacity: 0.5; cursor: not-allowed; }
.bv-price-row { margin-top: 4px; }
.bv-price-display {
    padding: 10px 14px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 15px; color: var(--text-muted);
    transition: color 0.2s;
}

/* ─── Cost Breakdown Box ─────────────────────────────────────────── */
.cost-breakdown-box {
    margin-top: 20px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.cost-breakdown-box h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.cost-row span  { color: var(--text-muted); }
.cost-row strong { font-weight: 700; color: var(--text); }
.est-price strong { font-size: 18px; color: var(--accent); }
.cost-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}
.cost-total {
    border-top: 2px solid var(--border);
    margin-top: 6px;
    padding-top: 10px;
}
.cost-total strong {
    font-size: 16px;
    color: var(--accent);
}
.cost-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.4;
    font-style: italic;
}
/* "Why that matters" read as plain grey text, the same colour and with no
   underline, so testers thought the link was missing. */
.cost-disclaimer a, .cost-note a {
    color: var(--accent); font-weight: 600; font-style: normal;
    text-decoration: underline; text-underline-offset: 2px;
}

/* ─── Compare Page Rows ──────────────────────────────────────────── */
.compare-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.compare-row-type {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.compare-row-vehicle {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.compare-vehicle-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-light);
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    align-self: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.compare-dropdowns {
    display: flex;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
}

.compare-text-search {
    display: flex;
    flex: 1;
    align-items: flex-end;
}

.compare-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

.compare-field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compare-field select,
.compare-field input {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
    outline: none;
    transition: border-color 0.15s;
    cursor: pointer;
}
.compare-field select:focus,
.compare-field input:focus { border-color: var(--accent); }
.compare-field select:disabled { opacity: 0.5; cursor: not-allowed; }

.compare-field-btn {
    flex-shrink: 0;
}
.compare-field-btn .compare-btn {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .compare-row-type,
    .compare-row-vehicle { flex-direction: column; align-items: stretch; }
    .compare-vehicle-label { align-self: flex-start; margin-right: 0; margin-bottom: 10px; }
    .compare-dropdowns { flex-direction: column; }
    .compare-field { min-width: 100%; }
}

/* ─── 3D Generation Button ───────────────────────────────────────── */
.btn-generate3d {
    width: 100%;
    padding: 11px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    letter-spacing: 0.02em;
}
.btn-generate3d:hover:not(:disabled) { opacity: 0.9; transform: scale(0.99); }
.btn-generate3d:disabled { opacity: 0.5; cursor: not-allowed; }

.generate3d-status {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.generate3d-status.loading  { background: #f1f5f9; color: var(--text-muted); }
.generate3d-status.success  { background: #dcfce7; color: #16a34a; }
.generate3d-status.error    { background: #fee2e2; color: var(--red); }
.generate3d-status.info     { background: var(--accent-light); color: var(--accent); }

/* ─── Settings Page ──────────────────────────────────────────────── */
.settings-page { padding: 24px; max-width: 1100px; margin: 0 auto; }
.settings-page h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; }

.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }

.settings-nav {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow);
}
.settings-nav-item {
    text-align: left; padding: 10px 14px; border-radius: 8px;
    border: none; background: transparent; font-size: 14px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.settings-nav-item:hover { background: var(--bg); color: var(--text); }
.settings-nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.settings-nav-item.danger-nav { color: var(--red); }
.settings-nav-item.danger-nav.active { background: #fee2e2; color: var(--red); }

.settings-content { min-width: 0; }
.settings-section { display: none; }
.settings-section.active { display: block; }
.settings-section h3 { font-size: 16px; font-weight: 700; margin: 20px 0 10px; }
.settings-section h3:first-child { margin-top: 0; }

.settings-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.settings-card label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-muted); margin: 12px 0 6px;
}
.settings-card label:first-child { margin-top: 0; }
.settings-card input[type="text"],
.settings-card input[type="email"],
.settings-card input[type="password"],
.settings-card select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; background: var(--bg);
    outline: none; transition: border-color 0.15s; margin-bottom: 4px;
}
.settings-card input:focus, .settings-card select:focus { border-color: var(--accent); }
.settings-card .btn { margin-top: 14px; }

.settings-msg {
    display: none; margin-top: 10px; padding: 8px 12px;
    border-radius: 8px; font-size: 13px; font-weight: 500;
}
.settings-msg.success { background: #dcfce7; color: #16a34a; display: block; }
.settings-msg.error   { background: #fee2e2; color: var(--red); display: block; }

.settings-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.settings-toggle-row strong { font-size: 14px; display: block; margin-bottom: 2px; }
.settings-toggle-row p { font-size: 13px; color: var(--text-muted); margin: 0; }
.settings-divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute; cursor: pointer; inset: 0;
    background-color: #cbd5e1; border-radius: 999px; transition: 0.2s;
}
.switch .slider:before {
    position: absolute; content: ""; height: 20px; width: 20px;
    left: 3px; bottom: 3px; background-color: #fff; border-radius: 50%;
    transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background-color: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* Danger zone */
/* A card that is a heading, an explanation and one button — not a form.
   Without this the <strong> and <p> stay inline-level while `.settings-card
   .btn` adds a top margin to an inline-flex box. Vertical margins on an
   inline-level box do not grow the line box, so the button rode up over the
   paragraph. Making all three block-level is what stops the overlap. */
.settings-action-card > strong {
    display: block; font-size: 15px; margin-bottom: 4px; color: var(--text);
}
.settings-action-card > p {
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
    margin: 0 0 14px; max-width: 52ch;
}
.settings-action-card > .btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 0; vertical-align: top;
}

.danger-card { border-color: #fecaca; background: #fef2f2; }
.danger-card strong { display: block; font-size: 15px; margin-bottom: 4px; color: #991b1b; }
.danger-card p { font-size: 13px; color: #7f1d1d; margin-bottom: 14px; }

/* The light-pink danger card was hardcoded, so in dark mode it appeared as a
   glaring white-pink block with near-black text on it. Same warning intent,
   dark-appropriate values, contrast still above AA. */
html.dark-mode .danger-card {
    border-color: #7f1d1d;
    background: #2a1215;
}
html.dark-mode .danger-card strong { color: #fca5a5; }
html.dark-mode .danger-card p      { color: #e3b3b3; }
.btn-danger {
    background: var(--red); color: #fff; border: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 600;
    cursor: pointer; transition: opacity 0.15s; font-size: 14px;
}
.btn-danger:hover { opacity: 0.88; }

/* Saved posts */
.saved-posts-list { display: flex; flex-direction: column; gap: 12px; }
.saved-post-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
}
.saved-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.saved-post-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.fit-settings-intro { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.fit-settings-row { display: flex; gap: 10px; }
.fit-settings-row select { flex: 1; }
.fit-settings-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; }
.fit-settings-check {
    display: flex; align-items: center; gap: 8px; min-height: 40px;
    font-weight: 500; cursor: pointer;
}
.fit-settings-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.saved-post-avatar-init {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
}
.unsave-btn {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 15px; opacity: 0.6; transition: opacity 0.15s;
}
.unsave-btn:hover { opacity: 1; }
.saved-post-content { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.saved-post-image { width: 100%; border-radius: 8px; max-height: 280px; object-fit: cover; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.modal-box {
    background: var(--surface); border-radius: var(--radius);
    padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg);
}
.modal-box h3 { font-size: 18px; margin-bottom: 10px; }
.modal-box p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.modal-box label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.modal-box input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 8px; font-size: 14px; margin-bottom: 8px; outline: none;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Dark mode (basic toggle support) */
html.dark-mode body {
    /* Not pure black either — pure black on OLED causes smearing
       on scroll and raises contrast past comfortable. */
    background: #0f172a;
    color: #e2e8f0;
}
html.dark-mode .surface,
html.dark-mode .settings-card,
html.dark-mode .settings-nav {
    background: #1e293b;
    border-color: #334155;
}

@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { flex-direction: row; overflow-x: auto; }
}

/* ─── Flat 2D Icons (Lucide) ─────────────────────────────────────── */
[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    vertical-align: middle;
    flex-shrink: 0;
}

.hamburger [data-lucide] { width: 22px; height: 22px; }
.notif-btn [data-lucide] { width: 20px; height: 20px; }

.left-sidebar .sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
}
.left-sidebar .sb-link [data-lucide] { width: 17px; height: 17px; opacity: 0.75; }

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-nav-item [data-lucide] { width: 16px; height: 16px; }

/* Icon buttons general spacing fix */
.btn [data-lucide] { width: 15px; height: 15px; margin-right: 4px; }

/* ─── Messages Page ──────────────────────────────────────────────── */
.messages-page {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.messages-sidebar {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
}

.messages-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}
.messages-sidebar-header h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.new-msg-btn {
    background: var(--accent-light);
    border: none;
    border-radius: 8px;
    padding: 7px;
    cursor: pointer;
    color: var(--accent);
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.new-msg-btn:hover { background: var(--border); }

.new-msg-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.new-msg-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: var(--bg);
}
.new-msg-search input:focus { border-color: var(--accent); }

.user-search-results { margin-top: 8px; }
.user-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.12s;
}
.user-result-item:hover { background: var(--bg); }
.user-result-avatar {
    width: 28px; height: 28px;
    border-radius: 50%; object-fit: cover;
}
.user-result-empty { font-size: 13px; color: var(--text-muted); padding: 8px; }

.conversations-list { flex: 1; overflow-y: auto; }
.conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.conv-item:hover  { background: var(--bg); }
.conv-item.active { background: var(--accent-light); }
.conv-item.unread .conv-name { font-weight: 700; }

.conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;   /* fixed box so layout holds even when the img is hidden */
}
.conv-avatar {
    width: 38px; height: 38px;
    border-radius: 50%; object-fit: cover;
    position: relative;
    z-index: 1;     /* real avatar covers the placeholder when present */
}
.conv-avatar-placeholder {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
}
.conv-info { flex: 1; min-width: 0; }
.conv-name {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.conv-unread-badge {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}
.conv-preview {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Thread */
.messages-thread {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}
.thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.thread-avatar {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover;
}
.thread-header strong { font-size: 15px; }
.view-profile-link {
    margin-left: auto;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}
.view-profile-link:hover { text-decoration: underline; }

.thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-bubble {
    max-width: 65%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
}
.msg-bubble.mine {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg-bubble.theirs {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.msg-time {
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.65;
    text-align: right;
}

.thread-input {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.thread-input input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    background: var(--bg);
    transition: border-color 0.15s;
}
.thread-input input:focus { border-color: var(--accent); }
.thread-input button {
    background: var(--accent);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: background 0.15s;
}
.thread-input button:hover { background: var(--accent-dark); }

/* ─── Full Dark Mode ─────────────────────────────────────────────── */
/* Neutral greys on true black. These were Tailwind's slate scale, which is
   tinted blue and read as navy rather than dark. */
html.dark-mode {
    --bg:          #000000;
    --surface:     #121212;
    --border:      #2a2a2a;
    --text:        #ededed;
    --text-muted:  #a3a3a3;
    --blue-light:  #1c1c1c;
    --shadow:      0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
}
html.dark-mode body           { background: var(--bg); color: var(--text); }
html.dark-mode .navbar        { background: var(--surface); border-bottom-color: var(--border); }
html.dark-mode .left-sidebar  { background: var(--surface); border-right-color: var(--border); }
html.dark-mode input, html.dark-mode select, html.dark-mode textarea
    { background: var(--bg); color: var(--text); border-color: var(--border); }
html.dark-mode .post-card,
html.dark-mode .comparison-card,
html.dark-mode .race-setup-card,
html.dark-mode .settings-card,
html.dark-mode .builder-section,
html.dark-mode .modal-box,
html.dark-mode .notif-dropdown { background: var(--surface); border-color: var(--border); }
html.dark-mode .builder-panel  { background: var(--surface); }
html.dark-mode .part-card      { background: var(--bg); border-color: var(--border); }
html.dark-mode .cost-breakdown-box { background: var(--surface); border-color: var(--border); }
html.dark-mode .leaderboard-row.win  { background: #14532d; }
html.dark-mode .leaderboard-row.loss { background: #7f1d1d; }
html.dark-mode .profile-badge { background: rgba(255,255,255,0.06); }
html.dark-mode .meet-card,
html.dark-mode .story-modal-box,
html.dark-mode .meet-modal-box { background: var(--surface); border-color: var(--border); }
html.dark-mode .meets-filter-btn { background: var(--surface); border-color: var(--border); }
html.dark-mode .stories-strip { background: var(--surface); border-color: var(--border); }

@media (max-width: 768px) {
    .messages-page { grid-template-columns: 1fr; }
    .messages-sidebar { height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
    .messages-thread { height: 60vh; }
    /* No thread open: the list takes the screen instead of sitting above a
       second, empty pane. Opening a thread replaces #threadEmpty. */
    .messages-page:has(#threadEmpty) .messages-thread { display: none; }
    .messages-page:has(#threadEmpty) .messages-sidebar { height: auto; min-height: 60vh; border-bottom: none; }
}

/* ─── Post Composer ──────────────────────────────────────────────── */
.feed-column { display: flex; flex-direction: column; gap: 16px; }

.post-composer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.composer-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.composer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}

.composer-input-wrap {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 10px 16px;
    cursor: text;
    min-height: 42px;
    transition: border-color 0.15s;
}
.composer-input-wrap:hover { border-color: var(--accent); }

.composer-placeholder {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.4;
    display: block;
}

.composer-textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--bg);
    font-size: 15px;
    line-height: 1.6;
    resize: none;
    min-height: 120px;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    color: var(--text);
    font-family: inherit;
    transition: border-color 0.15s;
}
.composer-textarea:focus { border-color: var(--accent); }

.composer-expanded {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.composer-field {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
    outline: none;
    color: var(--text);
    transition: border-color 0.15s;
}
.composer-field:focus { border-color: var(--accent); }

.composer-image-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--accent-light);
    transition: background 0.15s;
    width: fit-content;
}
.composer-image-label:hover { background: var(--border); }
.composer-image-label [data-lucide] { width: 15px; height: 15px; }

.remove-preview-btn {
    display: block;
    margin-top: 6px;
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--red);
    font-size: 12px;
}

.composer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ─── Signup Car Fields ──────────────────────────────────────────── */
.signup-section { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.signup-cars-section {
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}
.signup-cars-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.signup-cars-header [data-lucide] { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.signup-cars-header strong { display: block; font-size: 14px; font-weight: 700; }
.signup-optional { font-size: 12px; color: var(--text-muted); }

/* ─── Profile Car Badges ─────────────────────────────────────────── */
.profile-cars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
    justify-content: center;
}
.profile-car-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
}
.profile-car-badge.secondary {
    background: var(--bg);
    color: var(--text-muted);
}
.profile-car-badge [data-lucide] { width: 13px; height: 13px; }

/* ─── Post/Comment Author Car Label ─────────────────────────────── */
.post-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.post-user-car {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.post-user-car [data-lucide] { width: 11px; height: 11px; }

.comment-author {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 4px;
}

/* ─── Composer bottom row ────────────────────────────────────────── */
.composer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─── Profile Dropdown ───────────────────────────────────────────── */
.profile-dropdown-wrap {
    position: relative;
}
.profile-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}
.profile-dropdown-btn:hover { background: var(--bg); }
.profile-dropdown-btn [data-lucide] {
    width: 14px; height: 14px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.profile-nav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.profile-nav-avatar.lg { width: 42px; height: 42px; font-size: 18px; }
.profile-nav-avatar-img { object-fit: cover; background: none; }

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 500;
    overflow: hidden;
    animation: fadeDropdown 0.15s ease;
}
@keyframes fadeDropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.profile-dropdown-header strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.profile-dropdown-link {
    display: block;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    margin-top: 2px;
}
.profile-dropdown-link:hover { text-decoration: underline; }

.profile-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 0;
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
}
.profile-dropdown-item:hover { background: var(--bg); }
.profile-dropdown-item [data-lucide] { width: 16px; height: 16px; color: var(--text-muted); }
.profile-dropdown-item.danger { color: var(--red); }
.profile-dropdown-item.danger [data-lucide] { color: var(--red); }

/* ─── Like / Dislike Buttons ─────────────────────────────────────── */
.vote-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.vote-buttons .like-btn,
.vote-buttons .dislike-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    transition: background 0.12s, color 0.12s;
}
.vote-buttons .like-btn { border-right: 1px solid var(--border); }
.vote-buttons .like-btn:hover    { background: #dcfce7; color: #16a34a; }
.vote-buttons .dislike-btn:hover { background: #fee2e2; color: var(--red); }
.vote-buttons .like-btn.active    { background: #dcfce7; color: #16a34a; }
.vote-buttons .dislike-btn.active { background: #fee2e2; color: var(--red); }
.vote-buttons [data-lucide] { width: 15px; height: 15px; }

/* ─── Comment Actions & Replies ──────────────────────────────────── */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.reply-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.reply-toggle-btn:hover { background: var(--bg); color: var(--accent); }
.reply-toggle-btn [data-lucide] { width: 13px; height: 13px; }

.replies-section {
    margin-top: 8px;
    margin-left: 20px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.reply { margin-bottom: 10px; }

.reply-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.reply-input-row input {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    background: var(--bg);
    outline: none;
    color: var(--text);
}
.reply-input-row input:focus { border-color: var(--accent); }
.reply-input-row button {
    background: var(--accent);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
}
.reply-input-row button [data-lucide] { width: 14px; height: 14px; }

.comment-body { font-size: 14px; line-height: 1.5; margin: 4px 0; }

/* Make vote buttons smaller for comments */
.comment .vote-buttons .like-btn,
.comment .vote-buttons .dislike-btn,
.reply .vote-buttons .like-btn,
.reply .vote-buttons .dislike-btn {
    padding: 3px 8px;
    font-size: 12px;
}

/* ─── Composer Toolbar & Media ───────────────────────────────────── */
.composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
}
.composer-tools { display: flex; align-items: center; gap: 4px; }

.composer-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    transition: background 0.12s, color 0.12s;
}
.composer-tool-btn:hover { background: var(--bg); color: var(--accent); }
.composer-tool-btn [data-lucide] { width: 18px; height: 18px; }
.gif-tool-btn { letter-spacing: 0.05em; font-size: 12px; font-weight: 800; color: var(--accent); }

.composer-media-preview {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* GIF grid */
.gif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.gif-result {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.12s, transform 0.12s;
}
.gif-result:hover { opacity: 0.85; transform: scale(0.97); }

/* Link embed */
.link-input-row { display: flex; gap: 8px; align-items: center; }
.link-preview-card {
    display: flex;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
    position: relative;
    text-decoration: none;
    color: var(--text);
}
.link-preview-img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}
.link-preview-body { flex: 1; padding: 10px; min-width: 0; }
.link-preview-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.link-preview-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.4; }
.link-preview-url   { font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Post media in feed */
.post-gif {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 260px;
    object-fit: contain;      /* full GIF visible, no cut-off */
    border-radius: 10px;
    margin: 8px auto 0;
    background: var(--bg);
}
.post-video {
    width: 100%;
    max-height: 320px;
    border-radius: 10px;
    background: #000;
    margin-top: 8px;
    display: block;
}
.post-link-card {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    text-decoration: none;
    color: var(--text);
    background: var(--bg);
    transition: border-color 0.15s;
}
.post-link-card:hover { border-color: var(--accent); }
.post-link-img  { width: 120px; height: 90px; object-fit: cover; flex-shrink: 0; }
.post-link-body { flex: 1; padding: 10px 12px; min-width: 0; }
.post-link-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.post-link-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.4; }
.post-link-url   { font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Trending News Sidebar ──────────────────────────────────────── */
.trending-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.trending-header h3 {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.trending-header h3 [data-lucide] { width: 16px; height: 16px; color: var(--accent); }
.trending-refresh {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}
.trending-refresh:hover { color: var(--accent); background: var(--bg); }
.trending-refresh [data-lucide] { width: 14px; height: 14px; }

.trending-list { display: flex; flex-direction: column; gap: 12px; }
.trending-loading {
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
}
.trending-loading [data-lucide] { width: 14px; height: 14px; animation: spin 1s linear infinite; }

.trending-article {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s;
}
.trending-article:hover { border-color: var(--accent); background: var(--bg); }

.trending-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 7px;
}
.trending-article-body { display: flex; flex-direction: column; gap: 4px; }
.trending-article-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trending-article-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ─── Explore Page ───────────────────────────────────────────────── */
.explore-page { padding: 24px; max-width: 1280px; margin: 0 auto; }

.explore-controls {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.explore-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.explore-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 10px 16px;
    transition: border-color 0.15s;
}
.explore-search-wrap:focus-within { border-color: var(--accent); }
.explore-search-wrap [data-lucide] { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.explore-search-wrap input {
    flex: 1; border: none; background: transparent;
    font-size: 15px; outline: none; color: var(--text);
}

.explore-sort { display: flex; gap: 6px; flex-shrink: 0; }
.sort-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg);
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
}
.sort-btn:hover { background: var(--surface); color: var(--text); }
.sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sort-btn [data-lucide] { width: 14px; height: 14px; }

.explore-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg);
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; transition: all 0.12s;
}
.filter-chip [data-lucide] { width: 13px; height: 13px; }
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Layout */
.explore-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.explore-feed { display: flex; flex-direction: column; gap: 16px; }

/* Loading/empty states */
.explore-loading {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: 14px; padding: 24px 0;
    justify-content: center;
}
.explore-loading [data-lucide] { width: 16px; height: 16px; animation: spin 1s linear infinite; }
.explore-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 48px 0; color: var(--text-muted);
}
.explore-empty [data-lucide] { width: 40px; height: 40px; opacity: 0.3; }
.explore-empty-small { font-size: 12px; color: var(--text-muted); padding: 4px 0; }

/* Sidebar cards */
.explore-sidebar { display: flex; flex-direction: column; gap: 16px; }
.explore-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}
.explore-sidebar-card h4 {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.explore-sidebar-card h4 [data-lucide] { width: 14px; height: 14px; }

/* Makes */
.makes-list { display: flex; flex-direction: column; gap: 6px; }
.make-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg);
    font-size: 13px; font-weight: 500; color: var(--text);
    cursor: pointer; text-align: left; width: 100%;
    transition: all 0.12s;
}
.make-chip [data-lucide] { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.make-chip:hover, .make-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.make-chip.active [data-lucide] { color: var(--accent); }

/* Hashtags */
.hashtag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hashtag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg);
    font-size: 13px; font-weight: 600; color: var(--accent);
    cursor: pointer; transition: all 0.12s;
}
.hashtag-chip:hover, .hashtag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-count {
    font-size: 11px; font-weight: 700;
    background: rgba(0,0,0,0.1); border-radius: 999px;
    padding: 1px 5px; margin-left: 2px;
}
.hashtag-highlight {
    color: var(--accent); cursor: pointer; font-weight: 600;
}
.hashtag-highlight:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .explore-layout { grid-template-columns: 1fr; }
    .explore-sidebar { flex-direction: row; flex-wrap: wrap; }
    .explore-sidebar-card { flex: 1; min-width: 260px; }
}

/* ─── Navbar Explore Button ──────────────────────────────────────── */
.nav-explore-btn {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.nav-explore-btn:hover { background: var(--accent); color: #fff; }
.nav-explore-btn [data-lucide] { width: 15px; height: 15px; }
/* Clubs, meets, the shop and the leaderboard are also in the side menu.
   Below this width the bar can't hold them beside the search box and the
   account controls; at 1000px the page scrolled sideways. */
@media (max-width: 1180px) {
    .nav-explore-btn { display: none; }
}

/* ─── Car Clubs ──────────────────────────────────────────────────── */
.clubs-page { padding: 24px; max-width: 1280px; margin: 0 auto; }

.clubs-section { margin-bottom: 28px; }
.clubs-section-title {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px;
}
.clubs-section-title [data-lucide] { width: 15px; height: 15px; }

.clubs-controls {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; flex-wrap: wrap;
}

.clubs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.club-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: var(--shadow);
}
.club-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }

.club-card-banner {
    height: 70px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.club-card-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--surface);
    position: absolute; bottom: -20px; left: 16px;
}
.club-card-avatar-initial {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff; font-weight: 800; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--surface);
    position: absolute; bottom: -20px; left: 16px;
}
.club-card-body { padding: 28px 16px 14px; }
.club-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.club-card-make {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 6px;
}
.club-card-make [data-lucide] { width: 11px; height: 11px; }
.club-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
.club-card-footer {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-muted); flex-wrap: wrap;
}
.club-card-footer [data-lucide] { width: 12px; height: 12px; }
.club-auto-badge {
    background: var(--accent-light); color: var(--accent);
    padding: 2px 7px; border-radius: 999px; font-weight: 700; font-size: 11px;
}
.club-join-status {
    margin-left: auto; font-weight: 600; color: var(--text-muted);
}
.club-join-status.joined { color: var(--accent); }
.clubs-loading {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-muted); font-size: 14px; padding: 20px;
    grid-column: 1/-1;
}
.clubs-loading [data-lucide] { width: 15px; height: 15px; animation: spin 1s linear infinite; }

/* Club detail */
.club-detail-page { max-width: 1000px; margin: 0 auto; padding: 0 24px 40px; }
.club-hero { margin-bottom: 0; }
.club-hero-banner { height: 160px; border-radius: var(--radius) var(--radius) 0 0; }
.club-hero-body {
    background: var(--surface); border: 1px solid var(--border);
    border-top: none; padding: 20px 24px 20px 90px;
    display: flex; align-items: flex-start; gap: 16px;
    border-radius: 0 0 var(--radius) var(--radius);
    position: relative; flex-wrap: wrap;
}
.club-hero-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 4px solid var(--surface);
    position: absolute; top: -36px; left: 20px;
}
.club-hero-info { flex: 1; min-width: 0; }
.club-hero-info h2 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.club-hero-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.club-hero-meta {
    display: flex; align-items: center; gap: 16px;
    font-size: 13px; color: var(--text-muted);
}
.club-hero-meta [data-lucide] { width: 13px; height: 13px; margin-right: 3px; }
.club-hero-actions { margin-left: auto; }

.club-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border);
    margin: 20px 0 20px;
}
.club-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 20px; border: none; background: transparent;
    font-size: 14px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.15s;
}
.club-tab:hover { color: var(--text); }
.club-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.club-tab [data-lucide] { width: 15px; height: 15px; }

.club-content-layout { display: flex; flex-direction: column; gap: 16px; }
.club-tab-content { display: flex; flex-direction: column; gap: 16px; }
.club-posts-list { display: flex; flex-direction: column; gap: 16px; }

.club-members-grid { display: flex; flex-direction: column; gap: 8px; }
.club-member-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border);
}
.club-member-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.club-member-info { display: flex; flex-direction: column; gap: 2px; }
.club-member-name { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--text); }
.club-member-name:hover { color: var(--accent); text-decoration: underline; }
.club-role-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
}
.club-role-badge.admin { background: #fef3c7; color: #92400e; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─── Club Logo Avatars ──────────────────────────────────────────── */
.club-card-avatar-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--surface);
    position: absolute;
    bottom: -22px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.club-card-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.club-fallback-initial {
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ─── theshop ────────────────────────────────────────────────── */
.theshop-page { padding: 24px; max-width: 1280px; margin: 0 auto; }

.my-listings-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--accent-light); border: 1px solid var(--accent);
    border-radius: var(--radius); padding: 10px 16px;
    margin-bottom: 16px; font-size: 14px; font-weight: 600; color: var(--accent);
    gap: 12px;
}
.my-listings-bar [data-lucide] { width: 15px; height: 15px; }

/* Listings grid */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.listing-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.listing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.listing-card.sold { opacity: 0.65; }

.listing-card-img {
    position: relative;
    height: 180px;
    background: var(--bg);
    overflow: hidden;
}
.listing-card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.2s;
}
.listing-card:hover .listing-card-img img { transform: scale(1.03); }

.listing-no-img {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--text-muted); gap: 8px; font-size: 13px;
}
.listing-no-img [data-lucide] { width: 36px; height: 36px; opacity: 0.3; }
.listing-no-img.large { height: 320px; }

.sold-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; font-weight: 900; letter-spacing: 2px;
}
.listing-save-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(255,255,255,0.9); border: none;
    border-radius: 50%; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow);
    transition: background 0.12s;
}
.listing-save-btn:hover, .listing-save-btn.saved { background: var(--accent); color: #fff; }
.listing-save-btn [data-lucide] { width: 15px; height: 15px; }

.listing-card-body { padding: 12px; }
.listing-card-title {
    font-weight: 700; font-size: 14px; line-height: 1.3;
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.listing-card-price { font-size: 18px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.listing-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.listing-cat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-light); color: var(--accent);
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: capitalize;
}
.listing-cat-badge [data-lucide] { width: 11px; height: 11px; }
.listing-cond { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.listing-card-footer {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--text-muted); flex-wrap: wrap;
}
.listing-card-footer [data-lucide] { width: 11px; height: 11px; }
.listing-dist { color: var(--accent); font-weight: 600; }
.listing-loc [data-lucide] { width: 11px; height: 11px; }

/* Listing detail */
.listing-detail-page { padding: 24px; max-width: 1100px; margin: 0 auto; }
.listing-detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }

.listing-gallery { display: flex; flex-direction: column; gap: 10px; }
.listing-main-img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 460px; }
.listing-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-thumb {
    width: 72px; height: 56px; border-radius: 6px; object-fit: cover;
    cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: all 0.12s;
}
.listing-thumb:hover, .listing-thumb.active { border-color: var(--accent); opacity: 1; }

.listing-info-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
    position: sticky; top: 80px;
}
.listing-detail-header { margin-bottom: 12px; }
.listing-detail-header h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.listing-detail-price { font-size: 28px; font-weight: 900; color: var(--accent); }
.sold-badge {
    font-size: 14px; font-weight: 800; background: var(--red);
    color: #fff; padding: 2px 10px; border-radius: 6px; margin-left: 8px;
}
.listing-detail-tags {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.listing-loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.listing-description {
    font-size: 14px; line-height: 1.6; color: var(--text);
    margin-bottom: 16px; border-top: 1px solid var(--border); padding-top: 14px;
}

.listing-seller-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px; margin-bottom: 14px;
}
.listing-seller-info { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.listing-seller-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 16px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.listing-seller-name { font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; }
.listing-seller-name:hover { color: var(--accent); text-decoration: underline; }
.listing-seller-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-seller-actions .btn { flex: 1; justify-content: center; }

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-muted); text-decoration: none;
    transition: color 0.12s;
}
.back-link:hover { color: var(--accent); }
.back-link [data-lucide] { width: 13px; height: 13px; }

/* My listings modal */
.my-listing-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.my-listing-info {
    display: flex; align-items: center; gap: 10px;
    flex: 1; cursor: pointer; min-width: 0;
}
.my-listing-thumb {
    width: 52px; height: 42px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
}
.my-listing-title { font-size: 13px; font-weight: 600; }
.my-listing-price { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }

/* Image preview */
.listing-image-preview-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.listing-preview-thumb {
    width: 72px; height: 56px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--border);
}

@media (max-width: 900px) {
    .listing-detail-layout { grid-template-columns: 1fr; }
    .listing-info-panel { position: static; }
    .listings-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
/* ─── Color Schemes ──────────────────────────────────────────────── */
/* Keep in step with COLOR_SCHEMES in app.py, which lists them for Settings. */
.scheme-blue   { --accent: #2563eb; --accent-dark: #1d4ed8; --accent-light: #eff6ff; }
.scheme-red    { --accent: #dc2626; --accent-dark: #b91c1c; --accent-light: #fef2f2; }
.scheme-green  { --accent: #16a34a; --accent-dark: #15803d; --accent-light: #f0fdf4; }
.scheme-orange { --accent: #ea580c; --accent-dark: #c2410c; --accent-light: #fff7ed; }
.scheme-purple { --accent: #7c3aed; --accent-dark: #6d28d9; --accent-light: #f5f3ff; }
.scheme-teal   { --accent: #0d9488; --accent-dark: #0f766e; --accent-light: #f0fdfa; }
.scheme-cyan   { --accent: #0891b2; --accent-dark: #0e7490; --accent-light: #ecfeff; }
.scheme-indigo { --accent: #4f46e5; --accent-dark: #4338ca; --accent-light: #eef2ff; }
.scheme-pink   { --accent: #db2777; --accent-dark: #be185d; --accent-light: #fdf2f8; }
.scheme-amber  { --accent: #d97706; --accent-dark: #b45309; --accent-light: #fffbeb; }

/* Dark mode keeps the accent but darkens its tint so it doesn't look washed out. */
html.dark-mode.scheme-blue   { --accent-light: #172554; }
html.dark-mode.scheme-red    { --accent-light: #3b0a0a; }
html.dark-mode.scheme-green  { --accent-light: #052e16; }
html.dark-mode.scheme-orange { --accent-light: #431407; }
html.dark-mode.scheme-purple { --accent-light: #2e1065; }
html.dark-mode.scheme-teal   { --accent-light: #042f2e; }
html.dark-mode.scheme-cyan   { --accent-light: #083344; }
html.dark-mode.scheme-indigo { --accent-light: #1e1b4b; }
html.dark-mode.scheme-pink   { --accent-light: #500724; }
html.dark-mode.scheme-amber  { --accent-light: #451a03; }
/* ─── Leaderboard ────────────────────────────────────────────────── */

.lb-rank  {
    min-width: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.lb-loading, .lb-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ─── Stories Strip ──────────────────────────────────────── */
.stories-strip {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}
.stories-strip::-webkit-scrollbar { display: none; }

#storyBubbles {
    display: flex;
    gap: 14px;
}

.story-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.story-bubble {
    position: relative;
    width: 60px;
    height: 60px;
}

.story-avatar-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 3px;
    background: var(--border);
    transition: background 0.2s;
}
.story-avatar-ring.unseen {
    background: linear-gradient(135deg, var(--accent), var(--orange));
}
.story-avatar-ring.seen {
    background: var(--border);
}

.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
}
.composer-avatar-img {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: none;
    flex-shrink: 0;
}
.story-avatar-init {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    border: 2px solid var(--surface);
}

.story-add-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.story-add-badge svg { width: 12px; height: 12px; }

.story-label {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 64px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Story Creator Modal */
.story-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 20px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}
.story-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    font-size: 16px;
}
.story-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.story-modal-close:hover { background: var(--bg); }

/* Story Viewer Overlay */
.story-viewer {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.story-viewer-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 12px 12px 0;
    z-index: 10;
}
.story-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}
.story-progress-fill {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width 0.1s linear;
}
.story-progress-fill.done { width: 100%; }

.story-viewer-header {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 10;
}
.story-viewer-user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.story-viewer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid rgba(255,255,255,0.5);
}
.story-viewer-user strong { color: #fff; font-size: 14px; display: block; }
.story-viewer-user span  { color: rgba(255,255,255,0.7); font-size: 12px; }
.story-viewer-close {
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* A 9:16 frame filling the phone screen; letterboxed on a wide screen. */
.story-viewer-body {
    position: relative;
    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}
.story-viewer-body img,
.story-viewer-body video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.story-viewer-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 48px 20px 28px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
}
.story-text-card { padding: 32px; }
.story-text-card .story-viewer-text { font-size: 26px; margin: 0; }
.story-mute {
    position: absolute;
    right: 14px;
    bottom: 18px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}
.story-viewer-avatar { overflow: hidden; }
.story-viewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .story-viewer-body { border-radius: 14px; } }
@media (max-width: 699px) { .story-viewer-body { width: 100vw; height: 100dvh; } }

.story-viewer-text {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    line-height: 1.4;
    margin-top: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── Car Meets Page ─────────────────────────────────────── */
.meets-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.meets-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.meets-filter-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.meets-filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.meets-filter-btn:hover:not(.active) { background: var(--bg); color: var(--text); }

.meets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.meet-card {
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s;
}
.meet-card:hover { box-shadow: var(--shadow-md); }

.meet-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.meet-card-img-placeholder {
    width: 100%;
    height: 130px;
    background: linear-gradient(135deg, var(--accent-light), var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.meet-card-img-placeholder svg { width: 40px; height: 40px; }

.meet-card-body { padding: 14px 16px 16px; }

.meet-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.meet-date-badge {
    background: var(--accent-light);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}
.meet-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.meet-location svg { width: 12px; height: 12px; }

.meet-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text);
}
.meet-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meet-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.meet-host { font-size: 12px; color: var(--text-muted); }
.meet-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.meet-rsvp-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
}
.meet-rsvp-count svg { width: 14px; height: 14px; }

.meet-rsvp-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.meet-rsvp-btn:hover { background: var(--accent); color: #fff; }
.meet-rsvp-btn.rsvpd { background: var(--accent); color: #fff; }

/* Create Meet Modal */
.meet-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.meet-modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 22px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}
.meet-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 16px;
}

/* ─── Profile Bio ────────────────────────────────────────────── */
.profile-bio {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.6;
    max-width: 480px;
    word-break: break-word;
    text-align: left;
}
.profile-bio-wrap .profile-bio {
    cursor: text;
    transition: color 0.15s;
}
.profile-bio-wrap .profile-bio:hover { color: var(--text-primary); }

.bio-editor {
    width: 100%;
    min-height: 72px;
    max-width: 480px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--accent);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    margin-top: 6px;
}
.bio-edit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.bio-char-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: auto;
}

/* ─── Badges ─────────────────────────────────────────────────── */
.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    border: 1px solid var(--badge-color);
    color: var(--badge-color);
    font-size: 11px;
    font-weight: 600;
    cursor: default;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.profile-badge .badge-icon {
    width: auto; height: auto;
    font-size: 11px; line-height: 1;
    background: none; border: none; border-radius: 0;
    display: inline;
}
.profile-badge:hover { box-shadow: 0 0 0 3px rgba(0,0,0,0.08); }
.profile-badge:hover { transform: translateY(-1px); }
.badge-icon { font-size: 13px; line-height: 1; }
.badge-name { white-space: nowrap; }

/* ─── Weekly Challenge Widget ────────────────────────────────── */
.challenge-widget {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.challenge-widget::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.challenge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.challenge-badge {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}
.challenge-week {
    font-size: 11px;
    opacity: 0.75;
}
.challenge-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}
.challenge-desc {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 12px;
    line-height: 1.5;
}
.challenge-join-btn {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #fff !important;
    font-size: 13px;
    padding: 7px 14px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s;
}
.challenge-join-btn:hover { background: rgba(255,255,255,0.3) !important; }

/* ═══════════════════════════════════════════════════════════
   GARAGE — Grid Cards
═══════════════════════════════════════════════════════════ */

/* Card */

/* Mods section */

/* Mod timeline row */

/* Card footer */

/* Modal */

/* Shop suggestions inside mod modal */
.shop-suggest-header {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
}
.shop-suggest-header i { width: 12px; height: 12px; }
.shop-suggest-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; border-radius: 8px;
    background: var(--bg-secondary); margin-bottom: 4px;
    text-decoration: none; transition: background 0.15s;
}
.shop-suggest-item:hover { background: var(--accent-light); }
.shop-suggest-name { font-size: 13px; color: var(--text-primary); }
.shop-suggest-price { font-size: 12px; font-weight: 700; color: var(--accent); }

/* Dark mode */

.dark .shop-suggest-item { background: rgba(255,255,255,0.05); }

/* ═══════════════════════════════════════════════════════════
   PROFILE TABS
═══════════════════════════════════════════════════════════ */
.profile-tabs {
    display: flex; gap: 4px; align-items: center;
    border-bottom: 2px solid var(--border);
    margin: 24px 0 0;
    padding: 0 4px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 14px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
    border-radius: 0;
}
.profile-tab:hover { color: var(--text-primary); }
.profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Three-dot menu */
.profile-tab-menu-wrap {
    margin-left: auto; position: relative;
    display: flex; align-items: center; padding-bottom: 2px;
}
.profile-tab-dots {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center;
    padding: 6px; border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.profile-tab-dots:hover { background: var(--bg-secondary); color: var(--text-primary); }
.profile-tab-dots svg { width: 18px; height: 18px; }

.profile-tab-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    min-width: 180px; z-index: 200;
    padding: 6px;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.15s, transform 0.15s;
}
.profile-tab-dropdown.open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
}
.ptd-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 12px;
    background: none; border: none; text-decoration: none;
    font-size: 14px; color: var(--text-primary);
    border-radius: 8px; cursor: pointer; text-align: left;
    transition: background 0.12s;
}
.ptd-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
.ptd-item:hover { background: var(--bg-secondary); }
.ptd-danger { color: #e53e3e !important; }
.ptd-danger svg { color: #e53e3e !important; }

.profile-panel { display: none; padding: 20px 0; }
.profile-panel.active { display: block; }

.profile-empty-state {
    color: var(--text-muted); font-size: 14px; text-align: center;
    margin-top: 16px; padding: 32px 16px;
    border: 1.5px dashed var(--border); border-radius: 14px;
}

/* Comments panel */
.profile-comment-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s;
}
.profile-comment-card:hover { box-shadow: var(--shadow-sm); }
.pcc-context {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted); margin-bottom: 8px;
}
.pcc-context svg { width: 13px; height: 13px; flex-shrink: 0; }
.pcc-body { font-size: 14px; color: var(--text-primary); line-height: 1.55; margin: 0 0 8px; }
.pcc-meta {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text-muted);
}
.pcc-meta span { display: flex; align-items: center; gap: 4px; }
.pcc-meta svg { width: 12px; height: 12px; }

/* Garage panel (profile view) */

@media (max-width: 500px) {
    .profile-tab { padding: 8px 10px; font-size: 13px; }
    .profile-tab svg { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PUBLIC GARAGE PAGE
═══════════════════════════════════════════════════════════ */

/* Card */

/* Mods section */

/* Profile garage "view all" link */

/* ─── The Shop ────────────────────────────────────────────────────── */
.theshop-page { padding: 24px; max-width: 1200px; margin: 0 auto; }

/* Search + sort controls */
.explore-controls { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.explore-search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.explore-search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 0 12px; flex: 1; min-width: 200px;
}
.explore-search-wrap [data-lucide] { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.explore-search-wrap input {
    border: none; background: transparent; outline: none; color: var(--text);
    font-size: 14px; padding: 10px 0; width: 100%;
}
.explore-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
    cursor: pointer; transition: all 0.12s;
}
.sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sort-btn [data-lucide] { width: 13px; height: 13px; }

/* Category filters */
.explore-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.filter-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
    cursor: pointer; transition: all 0.12s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-chip [data-lucide] { width: 12px; height: 12px; }

/* Loading / empty states */
.explore-loading {
    grid-column: 1 / -1; text-align: center; padding: 48px;
    color: var(--text-muted); display: flex; align-items: center;
    justify-content: center; gap: 8px; font-size: 14px;
}
.explore-loading [data-lucide] { width: 18px; height: 18px; animation: spin 1s linear infinite; }
.explore-empty {
    grid-column: 1 / -1; text-align: center; padding: 56px 24px;
    color: var(--text-muted); display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
.explore-empty [data-lucide] { width: 40px; height: 40px; opacity: 0.35; }
.explore-empty p { font-size: 15px; }

/* Listing card: no-image placeholder */
.listing-no-img {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    background: var(--bg); color: var(--text-muted); font-size: 12px;
}
.listing-no-img [data-lucide] { width: 28px; height: 28px; opacity: 0.4; }
.listing-no-img.large {
    min-height: 280px; border-radius: var(--radius);
    border: 1px solid var(--border); font-size: 14px;
}
.listing-no-img.large [data-lucide] { width: 48px; height: 48px; }

/* Category + condition badges */
.listing-cat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-light); color: var(--accent);
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; text-transform: capitalize;
}
.listing-cat-badge [data-lucide] { width: 11px; height: 11px; }
.listing-cond {
    display: inline-block; background: var(--surface);
    border: 1px solid var(--border); font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 20px; color: var(--text-muted);
}

@media (max-width: 640px) {
    
    .explore-search-row { flex-direction: column; align-items: stretch; }
    .explore-sort { justify-content: flex-start; }
    .listings-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Compare: card upgrades ──────────────────────────────────────── */
.card-badges {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px;
}
.card-badge {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}

.specs-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 6px;
}
.spec-item {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg); border-radius: 6px; padding: 6px 8px;
    border: 1px solid var(--border);
}
.spec-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.spec-val   { font-size: 13px; font-weight: 700; color: var(--text); }

/* Performance bars inside each card */
.perf-bars { margin: 16px 0 0; padding: 14px; background: var(--bg); border-radius: 10px; border: 1px solid var(--border); }
.perf-bars h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 0 0 10px; }
.perf-bar-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.perf-bar-label{ font-size: 11px; color: var(--text-muted); width: 90px; flex-shrink: 0; }
.perf-bar-track{ flex: 1; height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.perf-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.perf-bar-val  { font-size: 11px; font-weight: 700; color: var(--text); width: 56px; text-align: right; flex-shrink: 0; }

/* Head-to-head VS stats section */
.vs-stats-section {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 24px; margin: 24px 0;
}
.vs-stats-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; gap: 12px;
}
.vs-name-left, .vs-name-right {
    font-size: 13px; font-weight: 700; color: var(--text);
    flex: 1; line-height: 1.3;
}
.vs-name-right { text-align: right; }
.vs-badge {
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    background: var(--accent); color: #fff; padding: 4px 10px;
    border-radius: 20px; white-space: nowrap;
}
.vs-stat-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.vs-val {
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    width: 72px; flex-shrink: 0;
}
.vs-val-left  { text-align: right; }
.vs-val-right { text-align: left; }
.vs-winner { color: var(--accent) !important; }
.vs-bars {
    flex: 1; display: flex; align-items: center; gap: 6px;
}
.vs-bar-left, .vs-bar-right {
    flex: 1; height: 6px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.vs-bar-left  { display: flex; justify-content: flex-end; }
.vs-bar-right { display: flex; justify-content: flex-start; }
/* The fill must contrast with the track it sits in — when both were
   var(--border) the losing side's bar was invisible and the row looked empty. */
.vs-bar-fill-left, .vs-bar-fill-right {
    height: 100%; background: var(--text-muted); opacity: 0.45;
    border-radius: 4px; transition: width 0.5s ease;
}
.vs-fill-win { background: var(--accent) !important; opacity: 1; }
.vs-stat-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap;
    flex-shrink: 0; width: 90px; text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — consolidated overrides
   ══════════════════════════════════════════════════════════════════ */

/* ─── Tablet & below ─────────────────────────────────────────────── */

/* ─── Phones ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* ── Global ── */
    body { -webkit-text-size-adjust: 100%; }
    .navbar { gap: 8px; padding: 0 10px; }
    .search-bar { max-width: none; flex: 1; min-width: 0; }
    .nav-actions { gap: 6px; }

    /* Prevent iOS zoom-on-focus (needs >=16px) */
    input, select, textarea { font-size: 16px !important; }

    /* ── Feed / posts ── */
    .post-card { padding: 14px; }
    .post-title { font-size: 17px; }
    .post-image, .post-gif { max-height: 240px; }
    .post-video { max-height: 240px; }
    .post-actions { flex-wrap: wrap; gap: 6px; }
    .post-actions button { font-size: 12px; padding: 6px 8px; }

    /* ── Composer ── */
    .post-composer { padding: 12px; }
    .composer-toolbar { flex-wrap: wrap; gap: 6px; }
    .composer-textarea { min-height: 100px; }

    /* ── Post detail page ── */
    .post-detail-page { padding: 14px 10px; }

    /* ── Builder ── */
    /* No negative side margins — they pushed panel content off-screen
       and clipped section labels like "BODY STYLE" */
    .builder-page { margin: 0; overflow-x: hidden; }
    .builder-visual-panel { height: auto; display: block; }
    .viewer-3d-wrap { height: 60vw; min-height: 230px; position: relative; }

    /* Paint + rotate controls sit BELOW the canvas so nothing covers the car */
    .viewer-bottom-bar {
        position: static;
        background: var(--surface);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
        gap: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .viewer-paint-row { gap: 9px; flex: 1 1 auto; min-width: 0; }
    #colorWheel { width: 50px; height: 50px; }
    #lightSlider { width: 88px; }
    .paint-lightness-col { gap: 5px; }
    .paint-label { min-width: 0; font-size: 9px; }
    .paint-hint { display: none; }
    .viewer-ctrl-btn { padding: 6px 10px; font-size: 11px; }
    .viewer-rotate-row { gap: 5px; flex-shrink: 0; }

    /* Right panel: keep text inside the viewport */
    .builder-parts-panel { border-left: none; }
    .parts-panel-header { padding: 16px 14px 12px; }
    .builder-section-header { padding: 14px 14px; font-size: 13px; }
    .builder-section-body { padding: 12px 14px; }
    .builder-section-group-label { padding: 6px 14px 2px; font-size: 10px; }
    .build-name-row { flex-wrap: wrap; padding: 12px 14px; }
    .build-name-input { flex: 1 1 100%; }
    .part-variants-row { gap: 6px; }
    .part-variant-btn { min-width: 0; padding: 7px 5px; }
    .pv-label { font-size: 11px; }
    .pv-price { font-size: 9px; }
    .mod-row { gap: 8px; }
    .mod-name { font-size: 12px; }
    .summary-row { font-size: 13px; }
    .model-match-banner { font-size: 10px; padding: 6px 12px; top: 10px; }

    /* ── Garage ── */
    
    
    
    
    

    /* ── Compare ── */
    /* Selection rows stack (easier to fill in), but RESULTS stay side-by-side */
    .compare-row { padding: 12px 14px; }
    .compare-dropdowns { flex-direction: column; align-items: stretch; gap: 10px; }
    .compare-field { width: 100%; }
    .compare-btn { width: 100%; }

    /* Side-by-side comparison is the whole point — never stack these */
    .comparison-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .or-divider { display: none; }
    .comparison-card { padding: 10px; overflow-wrap: anywhere; }
    .comparison-card h3, .card-title { font-size: 14px; line-height: 1.3; }
    .vehicle-image-box { height: 110px !important; }
    .vehicle-image-box img { max-height: 110px; object-fit: contain; }
    .specs-grid { grid-template-columns: 1fr; gap: 4px; }
    .spec-label { font-size: 10px; }
    .spec-val   { font-size: 12px; }
    .card-badges { gap: 4px; }
    .card-badge  { font-size: 9px; padding: 2px 6px; }
    /* Label on its own line above the bar and value: at 46px "Horsepower"
       broke mid-word, the same squeeze as the cost rows. */
    .perf-bar-row   { flex-wrap: wrap; row-gap: 2px; }
    .perf-bar-label { font-size: 10px; width: 100%; overflow-wrap: normal; }
    .perf-bar-val   { font-size: 10px; width: auto; }
    .pros-cons li, .comparison-card li { font-size: 11px; line-height: 1.4; }

    /* What it costs: a half-width card leaves the row about 130px. Side by
       side, the nowrap price took all of it, the label was squeezed to a
       letter wide, and overflow-wrap: anywhere broke it a letter per line
       under the overflowing figure. Stack label over figure instead. */
    .cost-breakdown-box { padding: 10px; margin-top: 14px; }
    .cost-breakdown-box h3 { font-size: 11px; margin-bottom: 8px; }
    .cost-row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0; }
    .cost-row span   { font-size: 11px; overflow-wrap: normal; }
    .cost-row strong { font-size: 13px; }
    .est-price strong { font-size: 15px; }
    .cost-note, .cost-disclaimer { font-size: 10.5px; }

    /* Head-to-head bars stay full width below the cards */
    .vs-stats-section { margin-top: 14px; }
    .vs-stat-label { width: 58px; font-size: 9px; }
    .vs-stats-header { font-size: 11px; }
    .vs-val { font-size: 11px; }

    /* ── Messages ── */
    .messages-page { height: calc(100vh - var(--navbar-h)); }
    .messages-sidebar { height: 38vh; }
    .messages-thread { height: 62vh; }
    .thread-input input { font-size: 16px; }

    /* ── Shop / listings ── */
    .listings-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .explore-search-row { flex-direction: column; gap: 10px; }
    .explore-sort { width: 100%; overflow-x: auto; }

    /* ── Settings ── */
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .settings-nav-item { white-space: nowrap; flex-shrink: 0; }

    /* ── Profile ── */
    .profile-tab  { white-space: nowrap; flex-shrink: 0; }
    .profile-badges { flex-wrap: wrap; gap: 6px; }

    /* ── Leaderboard ── */
    
    

    /* ── Modals ── */
    .modal-content,
.story-modal-box,
.meet-modal-box {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: 88vh;
        overflow-y: auto;
    }

    /* ── Touch targets ── */
    .btn, .viewer-ctrl-btn, .mod-add-btn, .part-variant-btn { min-height: 38px; }
}

/* ─── Small phones ───────────────────────────────────────────────── */
@media (max-width: 400px) {
    .logo { font-size: 16px; }
    .search-bar { font-size: 13px !important; padding: 8px 12px; }
    .listings-grid { grid-template-columns: 1fr !important; }
    .specs-grid { grid-template-columns: 1fr; }
    #colorWheel { width: 46px; height: 46px; }
    #lightSlider { width: 78px; }
    .viewer-bottom-bar { padding: 10px; }
}

/* ─── Saved Comparisons cards ────────────────────────────────────── */

/* ─── Compare: save button + toast ───────────────────────────────── */
.winner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.winner-head h2 { margin: 0; }

.save-comparison-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.save-comparison-btn i { width: 15px; height: 15px; }
.save-comparison-btn:hover:not(:disabled) { background: var(--accent-dark); }
.save-comparison-btn:active:not(:disabled) { transform: scale(0.97); }
.save-comparison-btn.is-saving { opacity: 0.6; cursor: wait; }
.save-comparison-btn.is-saved {
    background: #16a34a;
    cursor: default;
}
.save-comparison-btn:disabled { cursor: default; }

.compare-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    background: #16a34a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    max-width: calc(100vw - 32px);
    animation: compareToastIn 0.22s ease, compareToastOut 0.4s ease 2.8s forwards;
}
.compare-toast i { width: 16px; height: 16px; flex-shrink: 0; }
.compare-toast.toast-error { background: #dc2626; }
@keyframes compareToastIn  { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes compareToastOut { from { opacity: 1; } to { opacity: 0; } }

/* ─── Race Mode: touch controls ──────────────────────────────────── */
/* The two race canvases stack. WebGL underneath, transparent 2D HUD on top. */
#raceCanvas3D {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.race-canvas-wrap #raceCanvas { position: relative; z-index: 1; }

.race-3d-toggle {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 9;
    min-width: 44px; height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(15,23,42,0.72);
    color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.race-3d-toggle.active { background: var(--accent); border-color: var(--accent-dark); }
.race-3d-toggle.note   { width: auto; font-weight: 600; letter-spacing: 0; }

.race-quit-btn {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 9;
    height: 30px; padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(15,23,42,0.72);
    color: #e2e8f0;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.race-quit-btn:hover { background: rgba(127,29,29,0.85); color: #fff; }

/* Landscape gate. Hidden by default and only raised on a touch device held
   in portrait, so it can never block a desktop window that happens to be
   narrow — a laptop at 900px is still perfectly raceable. */
.race-rotate-gate { display: none; }

@media (max-width: 900px) and (orientation: portrait) and (pointer: coarse) {
    .race-rotate-gate {
        display: flex;
        position: absolute; inset: 0; z-index: 20;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; padding: 24px; text-align: center;
        background: rgba(8,12,20,0.94);
        color: #fff;
    }
    .race-rotate-gate i { width: 42px; height: 42px; color: var(--accent); }
    .race-rotate-gate strong { font-size: 17px; }
    .race-rotate-gate span { font-size: 13px; color: #94a3b8; max-width: 30ch; line-height: 1.5; }

    /* No point showing pedals over a screen that says "rotate". */
    .race-touch-controls { display: none !important; }
    .race-start-btn { opacity: .5; pointer-events: none; }
}

/* Forfeits read as their own outcome, amber rather than the plain red of a
   loss — being beaten and bailing out are different things. */
.leaderboard-row.forfeit {
    background: color-mix(in srgb, #f59e0b 12%, var(--surface));
    border-left: 3px solid #f59e0b;
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .leaderboard-row.forfeit { background: var(--surface); }
}
.lb-summary {
    display: flex; gap: 14px; align-items: baseline;
    padding: 6px 2px 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--text-muted);
}
.lb-summary strong { font-size: 15px; color: var(--text); }
.lb-summary .lb-ff strong { color: #f59e0b; }

/* W / L / F. A letter as well as a colour: colour alone is unreadable for
   anyone with red-green colour blindness, and a letter scans faster down a
   column than two similar icons. */
.lb-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    font-size: 12px; font-weight: 800; color: #fff;
}
.lb-W { background: #15803d; }
.lb-L { background: #b91c1c; }
.lb-F { background: #b45309; }
.lb-defended {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    background: var(--bg); color: var(--text-muted);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em;
}

/* Where a spec came from. Sourced and third-party must not look the same —
   the entire argument for curating is that one can be trusted. */
.spec-provenance {
    display: flex; align-items: center; gap: 6px;
    margin: 8px 0 0; font-size: 11px; color: var(--text-muted);
}
.spec-provenance.verified { color: #16a34a; font-weight: 700; }
/* Hand-checked but carried across model years. Deliberately not green: the
   figure is sourced, yet it was not measured for the year on the card, and
   those two things should not look the same. Amber reads as "qualified"
   without reading as "wrong". Wraps, unlike the single-line rows above. */
.spec-provenance.approx {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 2px solid #d97706;
    border-radius: 0 6px 6px 0;
    background: var(--bg);
    color: var(--text-muted);
    line-height: 1.5;
}
.spec-provenance.approx i {
    display: inline-block; vertical-align: -2px; margin-right: 5px;
    color: #d97706;
}
.spec-provenance i { width: 13px; height: 13px; }
.spec-note {
    margin: 8px 0 0; padding: 7px 10px;
    border-left: 2px solid var(--accent);
    background: var(--bg);
    font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}

/* "You are racing a real recorded run" — worth calling out, because it is the
   difference between racing someone's car and racing the person. */
.ghost-badge {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, #22c55e 40%, var(--border));
    background: color-mix(in srgb, #22c55e 12%, var(--surface));
    color: var(--text);
    font-size: 12.5px; font-weight: 600;
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .ghost-badge { background: var(--surface); border-color: var(--border); }
}

/* In normal flow beneath the canvas, not floating over it.
   As an absolutely-positioned overlay these covered the cars, the finish line
   and the rev counter on a phone — you were driving with your thumbs on top
   of the race. Below the canvas costs a strip of page height and gives the
   whole play area back. */
.race-touch-controls {
    display: flex;               /* shown during a race; [hidden] otherwise */
    justify-content: space-between;  /* nitro left, gas+brake right */
    align-items: center;
    gap: 12px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    margin-top: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.rtc-left, .rtc-right { display: flex; gap: 18px; align-items: center; }
/* iOS Safari only honours the prefixed user-select, so rapid taps on SHIFT
   (read as a double-tap) selected the button's label and icons, and a long
   press opened the callout menu. Covers the panel and everything in it. */
.race-touch-controls, .race-touch-controls * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.rtc-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    /* Sat on the dark canvas before, so it was translucent slate with a blur.
       On the panel below it needs to be solid or it washes out. */
    border: 1.5px solid var(--border);
    background: #1e293b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.08s, background 0.12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    user-select: none;
}
.rtc-btn i { width: 26px; height: 26px; }
.rtc-btn.active { transform: scale(0.92); background: rgba(255,255,255,0.28); }

.rtc-gas   { background: rgba(22,163,74,0.72);  border-color: rgba(255,255,255,0.35); width: 68px; height: 68px; }
.rtc-brake { background: rgba(220,38,38,0.62); }
.rtc-nitro { background: rgba(234,88,12,0.72); }
.rtc-gas.active   { background: rgba(22,163,74,0.95); }
.rtc-brake.active { background: rgba(220,38,38,0.95); }
.rtc-nitro.active { background: rgba(234,88,12,0.95); }

/* Shift is pressed more than anything else in a drag race and it is pressed
   against a closing window, so it gets the biggest target on the pad. Labelled
   as well as iconned because it is the one control that is not guessable. */
.rtc-shift {
    width: 78px; height: 78px;
    flex-direction: column; gap: 1px;
    background: rgba(37,99,235,0.75);
    border-color: rgba(255,255,255,0.4);
}
.rtc-shift i { width: 28px; height: 28px; }
.rtc-shift-label {
    font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1;
}
.rtc-shift.active { background: rgba(37,99,235,0.98); transform: scale(0.94); }

/* Hide the keyboard hint where there's no keyboard */
@media (max-width: 900px) and (pointer: coarse) {
    .race-controls-hint { display: none !important; }
}
@media (max-width: 640px) {
    /* Targets stay 58/68px — Apple and Google both put the minimum comfortable
       touch target around 44px, and these are pressed under time pressure. */
    .rtc-left, .rtc-right { gap: 18px; }
    .rtc-btn i { width: 24px; height: 24px; }
    .race-touch-controls { padding: 10px 12px 14px; }
    .race-mode-tabs { overflow-x: auto; }
    .race-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ─── Mobile: news + weekly challenge inside the nav drawer ──────── */
.sidebar-widgets { margin-bottom: 18px; }
.sidebar-widgets .right-sidebar {
    margin: 0 0 4px;
    padding: 14px;
    box-shadow: none;
    background: var(--bg);
}
.sidebar-widgets .trending-list { max-height: 320px; overflow-y: auto; }

/* ─── Builder: landscape on phones/tablets ───────────────────────────
   Rotating the device gives the desktop side-by-side layout so parts
   are reachable without scrolling past the canvas.                    */
@media (max-width: 1000px) and (orientation: landscape) {
    .builder-page { margin: 0; overflow: hidden; }
    .builder-layout {
        grid-template-columns: 1fr minmax(240px, 42%);
        height: calc(100vh - var(--navbar-h));
        overflow: hidden;
    }
    .builder-visual-panel { height: 100%; display: flex; flex-direction: column; }
    .viewer-3d-wrap { flex: 1; height: auto; min-height: 0; }

    /* Overlay the controls again — vertical space is precious here */
    .viewer-bottom-bar {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, rgba(168,173,181,0.96) 0%, rgba(168,173,181,0) 100%);
        border: none;
        padding: 28px 14px 10px;
    }
    .builder-parts-panel { overflow-y: auto; border-left: 1px solid var(--border); }
    .parts-panel-header { padding: 12px 14px 8px; }
    .parts-panel-header h2 { font-size: 16px; }
    .parts-panel-header p  { font-size: 11px; }
    .build-name-row { padding: 10px 14px; }
    #colorWheel { width: 46px; height: 46px; }
    #lightSlider { width: 80px; }
}

/* Nudge users to rotate when the builder is cramped in portrait */
.rotate-hint { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
    .rotate-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 9px 14px;
        background: var(--accent-light);
        color: var(--accent);
        font-size: 11.5px;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
    }
    .rotate-hint i { width: 14px; height: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   BADGES PAGE
   ══════════════════════════════════════════════════════════════════ */
.badges-page { max-width: 900px; margin: 0 auto; padding: 28px 20px; }

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.badge-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
    transition: box-shadow 0.15s, transform 0.12s;
}
.badge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.badge-card.locked { opacity: 0.55; }
/* Scoped to .badge-card so it doesn't clobber the small profile badges */
.badge-card .badge-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; border-radius: 14px;
    background: var(--bg); border: 2px solid var(--border);
}
.badge-card.locked .badge-icon { filter: grayscale(1); }
.badge-body { min-width: 0; }
.badge-card .badge-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; white-space: normal; }
.badge-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.badge-date, .badge-locked-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; margin-top: 7px;
}
.badge-date { color: #16a34a; }
.badge-locked-label { color: var(--text-muted); }
.badge-date i, .badge-locked-label i { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════════
   DRAFTS PAGE
   ══════════════════════════════════════════════════════════════════ */
.drafts-page { max-width: 780px; margin: 0 auto; padding: 28px 20px; }

.drafts-list { display: flex; flex-direction: column; gap: 12px; }

.draft-card {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.draft-main { min-width: 0; flex: 1; }
.draft-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.draft-preview {
    font-size: 13px; color: var(--text-muted); line-height: 1.5;
    margin-bottom: 8px; white-space: pre-wrap;
}
.draft-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.draft-meta span { display: inline-flex; align-items: center; gap: 4px; }
.draft-meta i { width: 12px; height: 12px; }
.draft-actions { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; }
.draft-delete-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--text-muted); border: 1px solid var(--border);
    font-size: 13px; font-weight: 600;
}
.draft-delete-btn :is(i, svg) { width: 14px; height: 14px; }
.draft-delete-btn:hover { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.4); }

.drafts-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 48px 20px; text-align: center; color: var(--text-muted);
}
.drafts-empty i { width: 40px; height: 40px; opacity: 0.35; margin-bottom: 4px; }
.drafts-empty p { font-size: 15px; font-weight: 600; color: var(--text); }
.drafts-empty span { font-size: 13px; }

.composer-draft-btn { display: inline-flex; align-items: center; gap: 6px; }
.composer-draft-btn i { width: 14px; height: 14px; }

/* Count pill in the profile dropdown */
.dropdown-count {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}

/* ══════════════════════════════════════════════════════════════════
   SETTINGS — social links + nav
   ══════════════════════════════════════════════════════════════════ */
.social-input-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.social-input-row input { flex: 1; margin: 0 !important; }
.social-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: #fff;
}
.social-icon i, .social-icon svg { width: 18px; height: 18px; }

/* Brand colors — shared by settings inputs and profile links */
.social-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-tiktok    { background: #010101; }
.social-youtube   { background: #ff0000; }
.social-x         { background: #000; }
.social-reddit    { background: #ff4500; }
.social-facebook  { background: #1877f2; }
.social-website   { background: var(--accent); }

/* Profile social row */
.profile-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.profile-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    color: #fff; text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s;
}
.profile-social-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-social-link svg { width: 17px; height: 17px; }

/* Saved posts in settings */
.saved-post-title { font-size: 14px; font-weight: 700; margin: 6px 0 4px; }
.saved-post-open {
    display: inline-block; margin-top: 8px;
    font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.saved-post-open:hover { text-decoration: underline; }

/* Settings nav: always-visible grid on mobile (no horizontal scrolling) */
@media (max-width: 640px) {
    .settings-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        overflow: visible !important;
        padding-bottom: 0;
        margin-bottom: 16px;
    }
    .settings-nav-item {
        justify-content: flex-start;
        padding: 11px 12px;
        font-size: 12.5px;
        white-space: normal;
        text-align: left;
        border-radius: 10px;
    }
    .settings-nav-item i { flex-shrink: 0; }
    .badges-page, .drafts-page { padding: 20px 14px; }
    .badges-grid { grid-template-columns: 1fr; }
    .draft-card { flex-direction: column; }
    .draft-actions { flex-direction: row; width: 100%; }
    .draft-actions :is(.btn, .draft-delete-btn) { flex: 1; justify-content: center; }
    
}

/* ─── Builder: window tint picker ────────────────────────────────── */
.tint-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.tint-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: #0f172a;
    border: 1.5px solid #1e293b;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tint-btn:hover  { border-color: #334155; background: #1e293b; }
.tint-btn.active { border-color: var(--accent); background: rgba(37,99,235,0.12); }

.tint-swatch {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.25);
    /* checker pattern shows through so opacity is visible */
    background-image:
        linear-gradient(45deg, #667 25%, transparent 25%),
        linear-gradient(-45deg, #667 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #667 75%),
        linear-gradient(-45deg, transparent 75%, #667 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
    position: relative;
    overflow: hidden;
}
.tint-swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tint, transparent);
}
.tint-label { font-size: 10.5px; font-weight: 700; color: #cbd5e1; }
.tint-sub   { font-size: 9px; color: #94a3b8; }
.tint-btn.active .tint-label { color: #fff; }

@media (max-width: 640px) {
    .tint-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .tint-btn { padding: 7px 2px; }
    .tint-label { font-size: 9.5px; }
    .tint-sub   { font-size: 8px; }
    .tint-swatch { width: 20px; height: 14px; }
}

/* Tint film color row */
.tint-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #1e293b;
    flex-wrap: wrap;
}
.tint-color-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
.tint-color-swatches { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.tint-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
    transition: transform 0.12s, border-color 0.12s;
}
.tint-color-swatch:hover  { transform: scale(1.18); }
.tint-color-swatch.active { border-color: #fff; transform: scale(1.12); }
#tintCustomColor {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 0; cursor: pointer; background: none;
}

/* ─── Builder: paint finish picker ───────────────────────────────── */
.finish-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.finish-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: #0f172a;
    border: 1.5px solid #1e293b;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.finish-btn:hover  { border-color: #334155; background: #1e293b; }
.finish-btn.active { border-color: var(--accent); background: rgba(37,99,235,0.12); }

.finish-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}
/* Each swatch previews its own surface character */
.finish-gloss    { background: radial-gradient(circle at 32% 28%, #fff 0%, #9aa3ad 18%, #2c3238 60%, #14171b 100%); }
.finish-metallic { background: radial-gradient(circle at 32% 28%, #fff 0%, #c3ccd6 14%, #6b7480 45%, #23282e 100%); }
.finish-satin    { background: radial-gradient(circle at 35% 30%, #c9d0d8 0%, #7d848c 45%, #2b3036 100%); }
.finish-matte    { background: linear-gradient(150deg, #4a5058 0%, #33383e 100%); }
.finish-chrome   { background: linear-gradient(150deg, #fff 0%, #b9c3ce 22%, #5d6772 48%, #e8eef5 68%, #79838e 100%); }

.finish-label { font-size: 10.5px; font-weight: 700; color: #cbd5e1; }
.finish-sub   { font-size: 9px; color: #94a3b8; }
.finish-btn.active .finish-label { color: #fff; }

@media (max-width: 640px) {
    .finish-row { gap: 4px; }
    .finish-btn { padding: 7px 2px; }
    .finish-swatch { width: 20px; height: 20px; }
    .finish-label { font-size: 9.5px; }
    .finish-sub   { font-size: 8px; }
}

/* ─── Builder: spoiler / body-kit accent finish ──────────────────── */
.accent-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.accent-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: #0f172a;
    border: 1.5px solid #1e293b;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.accent-btn:hover  { border-color: #334155; background: #1e293b; }
.accent-btn.active { border-color: var(--accent); background: rgba(37,99,235,0.12); }
.accent-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22);
}
.accent-label { font-size: 10px; font-weight: 700; color: #cbd5e1; }
.accent-btn.active .accent-label { color: #fff; }

.accent-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #1e293b;
}
.accent-custom-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
#accentCustomColor {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 0; cursor: pointer; background: none;
}

@media (max-width: 640px) {
    .accent-row { gap: 4px; }
    .accent-btn { padding: 7px 2px; }
    .accent-swatch { width: 19px; height: 19px; }
    .accent-label { font-size: 9px; }
}

/* Product link icon on part variant buttons */
.part-variant-btn { position: relative; }
.pv-link {
    position: absolute;
    top: 3px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: #64748b;
    transition: color 0.15s, background 0.15s;
}
.pv-link i { width: 11px; height: 11px; }
.pv-link:hover { color: var(--accent); background: rgba(255,255,255,0.08); }

/* Fitment disclaimer under wheel/brake/tire options */
.fitment-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #1e293b;
    font-size: 10.5px;
    line-height: 1.45;
    color: #7d879a;
}
.fitment-note i { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }

/* ── Legal / support pages ─────────────────────────────────────── */
.legal-page {
    max-width: 780px; margin: 0 auto; padding: 24px 20px 60px;
}
.legal-header { margin-bottom: 24px; }
.legal-header h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 26px; font-weight: 800; margin-bottom: 6px;
}
.legal-updated { font-size: 13px; color: var(--text-muted); }
.legal-body {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow);
    line-height: 1.65; font-size: 15px;
}
.legal-body h3 {
    font-size: 15px; font-weight: 800; margin: 26px 0 8px;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent);
}
.legal-body h3:first-child { margin-top: 0; }
.legal-body p  { margin-bottom: 12px; color: var(--text); }
.legal-body ul { margin: 0 0 14px 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a  { color: var(--accent); text-decoration: none; font-weight: 600; }
.legal-body a:hover { text-decoration: underline; }

.legal-footer-nav {
    display: flex; flex-wrap: wrap; gap: 18px;
    justify-content: center; margin-top: 22px;
}
.legal-footer-nav a {
    font-size: 13px; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
}
.legal-footer-nav a:hover { color: var(--accent); }

/* Sidebar footer links */
.sidebar-footer-links {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 16px 18px 8px; margin-top: 6px;
    border-top: 1px solid var(--border);
}
.sidebar-footer-links a {
    font-size: 11px; color: var(--text-muted); text-decoration: none;
}
.sidebar-footer-links a:hover { color: var(--accent); }

@media (max-width: 700px) {
    .legal-body { padding: 20px 18px; font-size: 14.5px; }
    .legal-header h2 { font-size: 22px; }
}

/* ── Cover photo crop modal ────────────────────────────────────── */
.cover-crop-content { max-width: 720px; width: 94vw; }
.cover-crop-hint {
    font-size: 13px; color: var(--text-muted); margin: -6px 0 14px;
}
.cover-crop-stage {
    width: 100%;
    aspect-ratio: 1720 / 520;      /* matches the banner exactly */
    border-radius: 10px;
    overflow: hidden;
    background: #0b0d10;
    cursor: grab;
    touch-action: none;            /* let us handle the drag, not the browser */
    border: 1px solid var(--border);
}
.cover-crop-stage:active { cursor: grabbing; }
.cover-crop-stage canvas {
    width: 100%; height: 100%; display: block;
    user-select: none; -webkit-user-drag: none;
}
.cover-crop-zoom {
    display: flex; align-items: center; gap: 12px; margin: 16px 0 4px;
}
.cover-crop-zoom i { width: 16px; height: 16px; color: var(--text-muted); }
.cover-crop-zoom input[type="range"] { flex: 1; accent-color: var(--accent); }

/* ── See it in the wild ────────────────────────────────────────── */
.wild-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.wild-head h2 {
    display: flex; align-items: center; gap: 9px;
    font-size: 18px; font-weight: 800; margin-bottom: 2px;
}
.wild-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }

.wild-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wild-tab {
    padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg); font-size: 13px; font-weight: 600;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.wild-tab:hover { border-color: var(--accent); }
.wild-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.wild-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.wild-empty {
    grid-column: 1 / -1; font-size: 13px; color: var(--text-muted);
    padding: 18px 0; text-align: center;
}
.wild-shot {
    margin: 0; border-radius: 10px; overflow: hidden;
    background: var(--bg); border: 1px solid var(--border);
}
.wild-shot img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    display: block; cursor: zoom-in;
}
.wild-shot figcaption {
    padding: 8px 10px; font-size: 12px; color: var(--text-muted); line-height: 1.4;
}
.wild-credit { display: block; margin-top: 3px; font-size: 11px; opacity: 0.75; }

.wild-submit-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 16px; flex-wrap: wrap;
}
.wild-upload-btn { cursor: pointer; font-size: 13px; font-weight: 600; }
.wild-note { font-size: 12px; color: var(--text-muted); }

.wild-lightbox {
    position: fixed; inset: 0; z-index: 9999; cursor: zoom-out;
    background: rgba(0,0,0,0.88);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.wild-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; }

/* ── Admin photo review ────────────────────────────────────────── */
.admin-photos-page { max-width: 980px; }
.review-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.review-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    transition: opacity 0.2s;
}
.review-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.review-body { padding: 12px 14px; }
.review-caption { font-size: 13px; font-style: italic; margin: 4px 0; }
.review-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.review-meta a { color: var(--accent); text-decoration: none; }
.review-actions { display: flex; gap: 8px; }
.review-actions .btn { flex: 1; justify-content: center; font-size: 13px; }

/* Settings link cards */
.settings-link-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
    text-decoration: none; color: var(--text); transition: border-color 0.15s;
}
.settings-link-card:hover { border-color: var(--accent); }
.settings-link-card > i:first-child { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.settings-link-card div { flex: 1; }
.settings-link-card strong { display: block; font-size: 14px; margin-bottom: 2px; }
.settings-link-card p { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.settings-link-arrow { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }

/* First-spotter credit */
.wild-shot { position: relative; }
.wild-first { border-color: var(--accent); }
.wild-first-tag {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.wild-first-tag i { width: 11px; height: 11px; }
.wild-empty i { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }

/* Performance gain on a visual part button */
.pv-hp {
    display: block; font-size: 10.5px; font-weight: 700;
    color: #16a34a; margin-top: 1px;
}

/* Rendered preview on a saved build card */

.section-count {
    font-style: normal; font-size: 12px; font-weight: 700;
    color: var(--accent); margin-left: 4px;
}

/* Brand lockup in the navbar */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { display: block; border-radius: 7px; flex-shrink: 0; }
.logo-accent { color: var(--accent); }
@media (max-width: 600px) {
    .logo span { display: none; }   /* mark only on small screens */
    .logo-mark { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   Fit Guides
   Colour-coded on verdict, not on a raw number, because some cars are
   a bad recommendation for reasons a single measurement misses.
   Uses --green/--orange/--red, which are defined in both themes.
   ═══════════════════════════════════════════════════════════════ */

.guide-page { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
/* Wide enough for the chart and its sidebar side by side; prose keeps a
   readable measure inside it. */
.guide-page .guide-body, .guide-page .guide-pending { max-width: 760px; }

.guide-header h2 {
    display: flex; align-items: center; gap: 10px;
    font-size: 26px; letter-spacing: -0.5px; margin-bottom: 6px;
}

/* ── Index ── */

.for-you-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.for-you-label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin-right: 4px;
}
.for-you-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
    font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none;
}
.for-you-chip:hover { border-color: var(--accent); color: var(--accent); }
.for-you-chip :is(i, svg) { width: 15px; height: 15px; }

.guide-meta i { width: 13px; height: 13px; }

/* ── Detail ── */
.guide-back {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
    font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.guide-back:hover { color: var(--accent); }
.guide-back i { width: 15px; height: 15px; }
.guide-meta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: var(--text-muted); margin-bottom: 26px;
}
.guide-meta span { display: inline-flex; align-items: center; gap: 5px; }

.guide-body { font-size: 16px; line-height: 1.7; }
.guide-body h2 {
    font-size: 21px; margin: 34px 0 12px; letter-spacing: -0.3px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.guide-body p { margin-bottom: 14px; }
.guide-body ol, .guide-body ul { margin: 0 0 16px 22px; }
.guide-body li { margin-bottom: 9px; }
.guide-body strong { font-weight: 700; }
.guide-raw { white-space: pre-wrap; font-family: var(--font); }

/* ── Guide header ── */
.guide-header { margin-bottom: 26px; }
.guide-eyebrow {
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.guide-page .guide-title {
    font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
    font-size: clamp(32px, 5vw, 52px); line-height: 1.03; letter-spacing: -1.2px;
    margin: 0 0 12px;
}
.guide-lede {
    font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.3; font-weight: 600; color: var(--text-muted); margin: 0;
    max-width: 780px;
}

/* ── Ranked bars, with the summary beside them ── */
.guide-rank-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px; align-items: start; margin: 32px 0;
}
.guide-rank-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; margin-bottom: 12px;
}
.guide-rank-head h2 { font-size: 19px; margin: 0; }
.guide-rank-head span { font-size: 12.5px; color: var(--text-muted); }
.fit-bars {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
}
.fit-bar-row {
    display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) 48px 84px;
    /* Fixed tag column: an auto one shortened the track on tagged rows only,
       which put those bars on a different scale from the rest. */
    align-items: center; gap: 12px; margin-bottom: 8px;
}
.fit-bar-label {
    font-size: 13.5px; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two generations of one car share a name; the years tell them apart. */
.fit-bar-years { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
/* Not overflow:hidden: the sunroof tick stands proud of the track. */
.fit-bar-track { position: relative; height: 12px; background: var(--bg); border-radius: 4px; }
.fit-bar-fill { height: 100%; border-radius: 4px; background: var(--text-muted); }
.fit-pick  .fit-bar-fill { background: var(--green); }
.fit-ok    .fit-bar-fill { background: var(--accent); }
.fit-watch .fit-bar-fill { background: var(--orange); }
.fit-avoid .fit-bar-fill { background: var(--red); }
/* A third-party figure is still drawn, but lighter: listed, never equal. */
.is-thirdparty .fit-bar-fill { opacity: .4; }
.fit-bar-roof {
    position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px;
    border-radius: 2px; background: #c2410c;
}
html.dark-mode .fit-bar-roof { background: #fb923c; }
.fit-bar-num {
    text-align: right; font-size: 13.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fit-3p-tag {
    display: inline-block; padding: 1px 6px; border-radius: 5px;
    border: 1px dashed var(--text-muted); color: var(--text-muted);
    font-size: 11px; font-weight: 600; white-space: nowrap; cursor: help;
}
.fit-legend {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted);
}
.fit-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.fit-legend-bar { width: 20px; height: 9px; border-radius: 3px; background: var(--green); }
.fit-legend-roof { width: 3px; height: 15px; border-radius: 2px; background: #c2410c; }
html.dark-mode .fit-legend-roof { background: #fb923c; }
.fit-scale-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

.guide-aside { display: flex; flex-direction: column; gap: 16px; }
.guide-aside h2 { font-size: 18px; margin: 0 0 12px; }
.guide-short {
    background: #16202e; color: #fff; border-radius: 14px; padding: 20px 22px;
}
.guide-short ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-short li { font-size: 14.5px; line-height: 1.45; color: #dfe4ec; }
.guide-short strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #fda4af; margin-bottom: 2px; }
.guide-cta {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
}
.guide-cta p { font-size: 14px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.guide-cta .btn { display: inline-flex; min-height: 44px; align-items: center; }

@media (max-width: 900px) {
    .guide-rank-wrap { grid-template-columns: minmax(0, 1fr); }
    /* Stacked, the summary goes first: after 20-odd rows nobody reaches it. */
    .guide-aside { order: -1; }
}
@media (max-width: 560px) {
    .fit-bar-row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 4px; }
    .fit-bar-label { grid-column: 1 / -1; }
    .fit-bar-tag:empty { display: none; }
    .fit-bar-tag { grid-column: 1 / -1; }
}

/* ── Tier tables ── */
.guide-tier { margin: 34px 0; }
.guide-tier-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.guide-tier-head h3 { font-size: 18px; }
.guide-tier-sub { font-size: 13px; color: var(--text-muted); }
/* Seat-height guide: type filter above the inseam bands. */
.bike-type-filter { margin: 24px 0 8px; }
.bike-type-filter[hidden], .guide-tier[hidden] { display: none; }
.bike-youth-note { margin: 0 0 8px; }

.fit-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow-x: auto;
}
.fit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fit-table th {
    text-align: left; padding: 11px 14px; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.fit-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.fit-table tr:last-child td { border-bottom: none; }
.fit-car { font-weight: 600; }
.fit-car-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fit-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.fit-roof-warn {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 11.5px; font-weight: 600; color: var(--orange);
}
.fit-roof-warn i { width: 12px; height: 12px; }

.fit-pill {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.fit-pill-pick  { background: var(--green);  color: #fff; }
.fit-pill-ok    { background: var(--accent); color: #fff; }
.fit-pill-watch { background: var(--orange); color: #fff; }
.fit-pill-avoid { background: var(--red);    color: #fff; }
.fit-pill-unknown { background: var(--border); color: var(--text-muted); }

/* Note rows hang off the row above, so they lose its top border. */
.fit-note-row td { padding-top: 0; border-bottom: 1px solid var(--border); }
.fit-note { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.fit-community {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
    font-size: 13px; color: var(--accent);
}
.fit-community i { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }

/* ── Pending research ── */
.guide-pending {
    margin: 34px 0; padding: 20px 22px;
    background: var(--surface); border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.guide-pending h3 {
    display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 6px;
}
.guide-pending h3 i { width: 16px; height: 16px; color: var(--text-muted); }
.guide-pending-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }
.guide-pending ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.guide-pending li { font-size: 14px; }
.guide-pending li .fit-car-sub { display: inline; margin-left: 6px; }

/* ── Sources & CTA ── */
.guide-sources {
    margin: 28px 0; padding: 14px 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.guide-sources summary {
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
}
.guide-sources ul { margin: 12px 0 4px 20px; }
.guide-sources li { margin-bottom: 7px; font-size: 13px; }
.guide-sources a { color: var(--accent); text-decoration: none; }
.guide-sources a:hover { text-decoration: underline; }

.guide-cta {
    margin-top: 30px; padding: 22px; text-align: center;
    background: var(--accent-light); border-radius: var(--radius);
}
.guide-cta p { font-size: 14.5px; margin-bottom: 12px; }
.guide-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
}
.guide-cta-btn:hover { background: var(--accent-dark); }
.guide-cta-btn i { width: 16px; height: 16px; }

@media (max-width: 600px) {
    .fit-bar-label { font-size: 12.5px; }
    .fit-table th, .fit-table td { padding: 10px; }
    .guide-body { font-size: 15px; }
}

/* ── Fit block on the comparison page ── */
.fit-compare {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 22px; margin: 20px 0;
    box-shadow: var(--shadow);
}
.fit-compare-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.fit-compare-head h2 {
    display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0;
}
.fit-compare-head h2 i { width: 18px; height: 18px; color: var(--accent); }
.fit-compare-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.fit-compare-link:hover { text-decoration: underline; }
.fit-compare-link i { width: 14px; height: 14px; }

.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fit-col {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; text-align: center;
    /* Verdict colour reads off the top edge so it survives dark mode, where a
       tinted background would fight the surface colour. */
    border-top: 3px solid var(--text-muted);
}
.fit-col.fit-pick  { border-top-color: var(--green); }
.fit-col.fit-ok    { border-top-color: var(--accent); }
.fit-col.fit-watch { border-top-color: var(--orange); }
.fit-col.fit-avoid { border-top-color: var(--red); }
.fit-col-empty { opacity: .6; }
.fit-col-name { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.fit-col-num {
    font-size: 30px; font-weight: 800; letter-spacing: -1px;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.fit-col-cap {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-bottom: 10px;
}
/* inline-flex by default so it can sit beside text in the guide tables. In a
   compare column it needs its own line, or it collides with the verdict pill
   that follows it — which is exactly what it did. */
.fit-col .fit-roof-warn {
    display: flex; justify-content: center; margin-bottom: 8px;
}
.fit-col .fit-car-sub { margin-bottom: 8px; }
.fit-col-none { font-size: 13px; color: var(--text-muted); padding: 14px 0; }

.fit-verdict {
    text-align: center; font-size: 14.5px; margin-top: 16px;
    padding: 12px; background: var(--accent-light); border-radius: 8px;
}
.fit-compare-note {
    font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.5;
}
.fit-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fit-inline-num { font-size: 13px; font-weight: 600; }

@media (max-width: 560px) {
    .fit-cols { grid-template-columns: 1fr; }
    .fit-col-num { font-size: 26px; }
}

/* ── "Who is this car for?" lenses ──
   Same two cars, three questions. The tabs are the only chrome; each pane
   reuses the fit block's own layout so switching lens does not feel like
   switching page. */
.aud-tabs {
    display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}
.aud-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.aud-tab:hover { color: var(--text); border-color: var(--text-muted); }
.aud-tab.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.aud-tab i { width: 14px; height: 14px; }
.aud-pane[hidden] { display: none; }

.aud-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.aud-col {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px; text-align: center;
}
.aud-col-empty { display: flex; flex-direction: column; justify-content: center; }
.aud-col-name { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.aud-col-num { font-size: 32px; font-weight: 800; line-height: 1; }
.aud-col-cap {
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 5px;
}
.aud-none { color: var(--text-muted); font-size: 13px; margin: 0; }

.aud-col-rows { margin-top: 12px; text-align: left; }
.aud-col-rows > div {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 12px; padding: 4px 0;
    border-top: 1px solid var(--border);
}
.aud-col-rows > div > span:first-child { color: var(--text-muted); }
.aud-col-rows > div > span:last-child { font-weight: 600; }

/* A fuel-grade note is a running-cost fact, not a warning — amber, not red. */
.aud-flag {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 11.5px; color: var(--text-muted);
}
.aud-flag i { width: 13px; height: 13px; color: #d97706; }

@media (max-width: 560px) {
    .aud-cols { grid-template-columns: 1fr; }
    .aud-col-num { font-size: 26px; }
    .aud-tab { flex: 1 1 auto; justify-content: center; }
}

/* ── Reported history (NHTSA) on the comparison page ──
   Styled flat and grey on purpose. Complaint counts are not a score and must
   not read like one: no green, no red, no letter grade. The only colour in
   this block is the stop-driving advisory, which is the one thing here that
   genuinely is a warning. */
.hist-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hist-col {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px;
}
.hist-col-empty { display: flex; flex-direction: column; justify-content: center; }
.hist-col-name {
    font-size: 14px; font-weight: 700; text-align: center; margin-bottom: 12px;
}
.hist-none {
    text-align: center; color: var(--text-muted); font-size: 13px; margin: 0;
}
.hist-figures {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 14px;
}
.hist-fig {
    flex: 1; text-align: center; padding: 8px 4px;
    border-radius: 8px; background: var(--surface);
}
.hist-fig-n { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.hist-fig-l { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

.hist-bars-head {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.hist-bar-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
    font-size: 12px;
}
.hist-bar-label {
    flex: 0 0 38%; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-bar-track {
    flex: 1; height: 6px; border-radius: 3px; background: var(--border);
    overflow: hidden;
}
/* Neutral grey, not the accent. A filled bar here means "most reports are
   about this system", not "this is bad". */
.hist-bar-fill {
    display: block; height: 100%; background: var(--text-muted); opacity: .55;
}
.hist-bar-n { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 11.5px; }

.hist-harm {
    margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}

/* The exception to the flat treatment. parkIt / parkOutSide is NHTSA saying
   stop driving the car, and burying that to keep the panel calm would be the
   wrong call. */
.hist-urgent {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 9px 11px; margin-bottom: 12px;
    border-radius: 8px;
    border-left: 3px solid #b91c1c;
    background: color-mix(in srgb, #b91c1c 10%, transparent);
    font-size: 12px; line-height: 1.45;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .hist-urgent { background: rgba(185, 28, 28, .1); }
}
.hist-urgent i { width: 15px; height: 15px; color: #b91c1c; flex: 0 0 auto; margin-top: 1px; }
.hist-urgent-sub {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

/* The recall list, folded under the counts. */
.hist-recalls { margin-top: 12px; font-size: 12.5px; }
.hist-recalls > summary {
    cursor: pointer; font-weight: 700; color: var(--accent); list-style-position: inside;
}
.hist-recalls ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hist-recalls li { border-top: 1px solid var(--border); padding: 7px 0; }
.hist-recalls li summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.hist-rc-comp { font-weight: 600; text-transform: capitalize; }
.hist-rc-meta {
    color: var(--text-muted); font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hist-recalls li p { margin: 6px 0 0; line-height: 1.5; color: var(--text-muted); }
.hist-recalls li .hist-src { margin-top: 6px; }

.hist-src {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
    font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.hist-src:hover { text-decoration: underline; }
.hist-src i { width: 13px; height: 13px; }

@media (max-width: 560px) {
    .hist-grid { grid-template-columns: 1fr; }
}

/* Bike type chip in the seat-height guide. */
.bike-type {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 11.5px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}

/* Offline fallback page (served by the service worker). */
.offline-page {
    max-width: 420px; margin: 60px auto; padding: 40px 24px;
    text-align: center; color: var(--text);
}
.offline-page i[data-lucide] { width: 44px; height: 44px; color: var(--text-muted); }
.offline-page h2 { font-size: 22px; margin: 16px 0 8px; }
.offline-page p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.offline-retry {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
    font-family: var(--font);
}
.offline-retry:hover { background: var(--accent-dark); }
.offline-retry i { width: 16px; height: 16px; }

/* Reports queue */
.report-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.report-tab {
    padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
    text-decoration: none; color: var(--text-muted);
    background: var(--surface); border: 1px solid var(--border);
}
.report-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.report-list { display: flex; flex-direction: column; gap: 14px; }
.report-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.report-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.report-type {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--accent);
    background: var(--accent-light); padding: 3px 9px; border-radius: 20px;
}
.report-when { font-size: 12px; color: var(--text-muted); }
.report-line { font-size: 14.5px; margin-bottom: 8px; }
.report-line a { color: var(--accent); text-decoration: none; }
.report-reason { font-size: 13.5px; color: var(--text-muted); margin-bottom: 10px; }
.report-content {
    margin: 0 0 12px; padding: 10px 14px; font-size: 14px; line-height: 1.55;
    background: var(--bg); border-left: 3px solid var(--border);
    border-radius: 0 6px 6px 0; white-space: pre-wrap; word-break: break-word;
}
.report-meta { font-size: 12.5px; color: var(--text-muted); }

/* Overflow menu on posts and comments (report / block / delete) */
.post-header-right { display: flex; align-items: center; gap: 6px; }
.pmenu { position: relative; display: inline-block; }
.pmenu-btn {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    color: var(--text-muted); border-radius: 6px; line-height: 0;
}
.pmenu-btn:hover { background: var(--bg); color: var(--text); }
.pmenu-btn i { width: 18px; height: 18px; }
.pmenu-drop {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    min-width: 190px; z-index: 50;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.pmenu-drop.open { display: block; }
.pmenu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 11px 14px; font-size: 13.5px; font-weight: 500;
    color: var(--text); font-family: var(--font);
}
.pmenu-item:hover { background: var(--bg); }
.pmenu-item i { width: 15px; height: 15px; flex: 0 0 auto; }
.pmenu-danger { color: var(--red); }
/* Comment menus sit in a row of small buttons, so shrink to match. */
.cmenu .pmenu-btn { padding: 2px 4px; }
.cmenu .pmenu-btn i { width: 15px; height: 15px; }

/* Story action sheet — "view yours" vs "add another". */
.story-sheet-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,.45);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 16px;
}
.story-sheet {
    width: 100%; max-width: 420px;
    background: var(--surface); border-radius: 14px; overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.story-sheet-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; border-bottom: 1px solid var(--border);
    cursor: pointer; text-align: left; padding: 16px 18px;
    font-size: 15px; font-weight: 500; color: var(--text); font-family: var(--font);
}
.story-sheet-item:last-child { border-bottom: none; }
.story-sheet-item:hover { background: var(--bg); }
.story-sheet-item i { width: 18px; height: 18px; }
.story-sheet-cancel { justify-content: center; color: var(--text-muted); font-weight: 600; }

/* Overflow menus must not run off a narrow screen either. */
@media (max-width: 460px) {
    .pmenu-drop { min-width: 170px; max-width: 78vw; }
}

/* Race distance selector */
.race-distance {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 14px 0 4px;
}
.race-distance-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted);
}
.race-distance-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.dist-opt {
    padding: 8px 14px; border-radius: 20px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    font-family: var(--font);
}
.dist-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Blocked accounts list in Settings → Privacy */
.blocked-list { display: flex; flex-direction: column; gap: 4px; }
.blocked-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.blocked-row:last-child { border-bottom: none; }
.blocked-who { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.blocked-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.blocked-avatar-letter {
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
    background: var(--accent); color: #fff;
}
.blocked-empty { color: var(--text-muted); font-size: 14px; padding: 8px 0; }

/* Beats ".left-sidebar .sb-link i" on specificity so the icon stays white. */
.left-sidebar .sb-link.sidebar-hero-item i,
.left-sidebar .sb-link.sidebar-hero-item [data-lucide],
.left-sidebar .sb-link.sidebar-hero-item:hover i {
    color: #fff;
    width: 22px;
    height: 22px;
}
.left-sidebar .sidebar-hero-item strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.2;
}
.left-sidebar .sidebar-hero-item small {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .9;
    margin-top: 3px;
    line-height: 1.3;
}
/* The two supporting links sit quietly beneath it. */
.left-sidebar .sidebar-hero p:not(.sidebar-hero-item) {
    font-size: 13.5px;
    padding: 8px 12px;
}

/* Seat-height caveats: adjustable seats, accessory low seats, laden figures. */
.bike-note { font-style: italic; max-width: 240px; white-space: normal; }

/* FTC affiliate disclosure. Must be legible, not fine print hidden away —
   the requirement is "clear and conspicuous", so this stays at body-adjacent
   size rather than shrinking to 9px. */
.affiliate-disclosure {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 0 0 12px; padding: 9px 11px;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.affiliate-disclosure i { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }

/* Owner reports.
   Visually separated from the spec table on purpose: everything in the table
   is traceable to a manufacturer sheet, and this isn't. Same weight of
   information, different kind of claim — the styling has to say so. */
.fit-owners {
    margin: 10px 0 0; padding: 11px 14px;
    background: var(--accent-light); border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.fit-owners-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent); margin-bottom: 6px;
}
.fit-owners-head i { width: 13px; height: 13px; }
.fit-owner-note { font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; }
.fit-owner-note:last-child { margin-bottom: 0; }
.fit-owner-src { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.fit-seat-note {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
    font-size: 13px; color: var(--text-muted);
}
.fit-seat-note i { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }

.fit-disputed {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
    font-size: 10.5px; font-weight: 700; color: var(--orange);
    white-space: nowrap;
}
.fit-disputed i { width: 11px; height: 11px; }

/* A figure with no manufacturer sheet behind it yet. Muted rather than
   orange: it is a sourcing caveat, not a fit warning. */
.fit-thirdparty {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}
.fit-thirdparty i { width: 11px; height: 11px; }
.fit-thirdparty-mark { margin-left: 1px; color: var(--text-muted); cursor: help; }
.fit-col .fit-thirdparty { display: flex; justify-content: center; margin-bottom: 8px; }

/* ── Navbar: Compare ──────────────────────────────────────────────
   The app's primary action. Labelled rather than an icon, and filled
   rather than outlined, so it reads as the main thing to do — the other
   nav buttons are deliberately quieter icons. */
.nav-compare {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--accent); color: #fff; text-decoration: none;
    padding: 9px 17px; border-radius: 9px; margin-right: 8px;
    font-size: 14.5px; font-weight: 800; letter-spacing: .01em;
    white-space: nowrap;
    /* Raised off the bar and ringed in its own colour so it reads as the
       primary action at rest, without needing to be hovered or clicked to
       look active. Every other nav control is a quiet outlined icon, so this
       is the only filled, labelled, lifted thing in the navbar. */
    border: 1px solid var(--accent-dark);
    box-shadow: 0 1px 2px rgba(0,0,0,.12),
                0 4px 12px color-mix(in srgb, var(--accent) 38%, transparent);
    transition: background .15s, box-shadow .15s, transform .12s;
}
.nav-compare:hover {
    background: var(--accent-dark); color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),
                0 6px 18px color-mix(in srgb, var(--accent) 48%, transparent);
}
.nav-compare:active { transform: translateY(1px); }
.nav-compare:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}
.nav-compare i { width: 18px; height: 18px; }

/* Older engines without color-mix would drop the whole box-shadow, taking the
   lift with it. Give them a plain shadow instead. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .nav-compare { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
}

/* Tablet width: keep the button, drop the word. Losing the label is better
   than losing the button to a hamburger again. */
@media (max-width: 820px) {
    .nav-compare span { display: none; }
    .nav-compare { padding: 8px 11px; }
}

/* Phone width: drop it from the navbar entirely. Compare is the third item
   in the bottom nav at this size, so keeping it up here is the same
   destination twice on one screen — and it was crowding the search field
   and the account controls to do it. Desktop has no bottom nav, so there it
   stays as the primary action. */
@media (max-width: 768px) {
    .nav-compare { display: none; }
}

/* Recommendation count + tallest driver who vouched for a vehicle.
   The height matters more than the count — "6'7\" driver says it fits" is a
   different claim from "three people liked it". */
.fit-recs {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
    padding: 3px 8px; border-radius: 20px;
    background: var(--accent-light); color: var(--accent);
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fit-recs i { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════════
   Mobile bottom navigation
   ══════════════════════════════════════════════════════════════════ */
.bottom-nav { display: none; }

@media (max-width: 768px) {
    .bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 200;
        background: var(--surface);
        border-top: 1px solid var(--border);
        /* Clears the iPhone home indicator. Without this the last few pixels
           of the bar sit under the system gesture area and taps get eaten. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -1px 3px rgba(0,0,0,.06);
    }
    .bnav-item {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 3px;
        padding: 9px 4px 7px;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 10.5px; font-weight: 600;
        /* 56px keeps every target above the 44px minimum even on small phones */
        min-height: 56px;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s, background .15s;
    }
    .bnav-item i, .bnav-item [data-lucide] { width: 21px; height: 21px; }
    .bnav-item.active { color: var(--accent); }
    .bnav-item.active i { color: var(--accent); }
    .bnav-item:active { background: var(--bg); }

    /* The bar floats over the page, so content needs room to scroll clear of
       it — otherwise the last post is permanently half-hidden. */
    body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

    /* The race controls used to be pinned over the canvas and needed lifting
       clear of this bar. They sit in normal flow below the canvas now, so
       body's padding-bottom already handles them and an offset here would
       push them off-target. */
}

/* ══════════════════════════════════════════════════════════════════
   Loading skeletons
   Shape-of-the-content placeholders rather than a spinner: the page stops
   jumping when data lands, and perceived wait is shorter because the layout
   is already there.
   ══════════════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg,
        var(--border) 25%, var(--bg) 37%, var(--border) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.skeleton-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.skeleton-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.skeleton-avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
.skeleton-line { height: 11px; }
.skeleton-line.w-30 { width: 30%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-block { height: 170px; border-radius: 10px; margin-top: 10px; }

/* Respect the OS setting — shimmer is exactly the kind of motion that
   triggers discomfort for people who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--border); }
}

/* ══════════════════════════════════════════════════════════════════
   Tap feedback
   Touch has no hover, so without this a tap feels like nothing happened
   until the next screen loads.
   ══════════════════════════════════════════════════════════════════ */
button, .btn, .part-variant-btn, .nav-compare, .filter-chip,
.sort-btn, .meets-filter-btn, .pmenu-item, .dist-opt {
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s ease, opacity .12s ease, background .15s ease;
}
button:active, .btn:active, .part-variant-btn:active, .nav-compare:active,
.filter-chip:active, .sort-btn:active, .meets-filter-btn:active,
.pmenu-item:active, .dist-opt:active {
    transform: scale(0.97);
}
.post-card:active,
.listing-card:active { transform: scale(0.995); }

@media (prefers-reduced-motion: reduce) {
    button,
.btn,
.post-card { transition: none; }
    button:active, .btn:active { transform: none; opacity: .8; }
}

/* Transient status message. Sits above the mobile bottom nav so it never
   hides behind it. */
.app-toast {
    position: fixed; left: 50%; bottom: 84px;
    transform: translateX(-50%) translateY(12px);
    z-index: 300; max-width: min(420px, calc(100vw - 32px));
    background: var(--text); color: var(--surface);
    padding: 11px 18px; border-radius: 10px;
    font-size: 14px; font-weight: 500; line-height: 1.4;
    box-shadow: var(--shadow-lg);
    opacity: 0; transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast-error { background: var(--red); color: #fff; }
@media (min-width: 769px) { .app-toast { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .app-toast { transition: opacity .2s ease; } }

/* ── 404 / error page ─────────────────────────────────────────────── */
.error-page { max-width: 560px; margin: 0 auto; padding: 48px 20px 40px; text-align: center; }
.error-code {
    font-size: clamp(56px, 16vw, 84px); font-weight: 800; line-height: 1;
    color: var(--border); letter-spacing: -2px; margin-bottom: 6px;
}
.error-page h2 { font-size: clamp(21px, 5vw, 27px); margin-bottom: 10px; }
.error-message { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
/* These were laid out inline and wrapped on top of each other on a phone.
   A column on narrow screens, a row once there's width for one. */
.error-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin: 26px auto 0; max-width: 300px;
}
.error-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; width: 100%; padding: 12px 18px; white-space: nowrap;
}
.error-actions .btn i { width: 16px; height: 16px; }
.error-support { margin-top: 26px; font-size: 13px; color: var(--text-muted); }
.error-support a { color: var(--accent); }
@media (min-width: 560px) {
    .error-actions { flex-direction: row; justify-content: center; max-width: none; }
    .error-actions .btn { width: auto; }
}

/* ── Bottom nav: read as a layer above the page ───────────────────── */
@media (max-width: 768px) {
    .bottom-nav {
        /* The bar is the accent colour itself, not a hint of it. A 10% tint
           was indistinguishable from the page and defeated the point of
           theming it at all.

           Solid rather than translucent: at this saturation a blur drags
           whatever is scrolling underneath into the bar and the colour stops
           being one flat surface. The lifted shadow does the separating
           instead, so the bar still reads as a layer above the page. */
        /* Neutral bar, accent on the selected tab only.
           A fully accent-filled bar was tried and it was too much: the bar's
           background necessarily extends through the home-indicator safe
           area, so on a phone that is ~90px of solid colour. That extension
           is correct — native tab bars do it, and the alternative is a strip
           of page colour under the bar — but it means a saturated fill reads
           as a banner rather than as chrome. Putting the accent on the active
           pill keeps the bar obviously themed while the colour stays a
           highlight. */
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 14px rgba(0,0,0,.10);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .bnav-item,
    .bnav-item i, .bnav-item [data-lucide] { color: var(--text-muted); }

    /* Active tab: solid accent pill, white label. --accent-dark rather than
       --accent because white on plain --accent is 3.30:1 on the green scheme
       and 3.56:1 on orange, both AA failures. The darker shade reads as the
       same colour and clears 4.5:1 on all five schemes (worst case 5.02:1). */
    .bnav-item.active {
        background: var(--accent-dark);
        border-radius: 12px;
        margin: 5px 6px;
        min-height: 46px;
    }
    .bnav-item.active,
    .bnav-item.active i { color: #fff; }
    .bnav-item:active { background: var(--bg); }
    .bnav-item.active:active { background: var(--accent); }
    /* The avatar menu duplicates the Profile tab and Settings now lives in
       the drawer, so it is pure redundancy on a phone. */
    .profile-dropdown-wrap { display: none; }
}
html.dark-mode .bottom-nav { box-shadow: 0 -2px 14px rgba(0,0,0,.45); }

/* Sidebar: the trailing group sits above the mobile bottom nav. */
.sidebar-group-end { margin-top: auto; padding-bottom: 8px; }
@media (max-width: 768px) {
    .left-sidebar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════════════════════════════
   Onboarding (/welcome)
   ══════════════════════════════════════════════════════════════════ */
.onb-page {
    max-width: 680px; margin: 0 auto; padding: 28px 16px 40px;
}
.onb-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 24px;
    box-shadow: var(--shadow);
}
.onb-head h1 { font-size: 24px; margin: 0 0 6px; color: var(--text); }
.onb-head p  { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; line-height: 1.55; }

.onb-step { border: none; padding: 0; margin: 0 0 26px; }
.onb-step legend {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; color: var(--text);
    margin-bottom: 10px; padding: 0;
}
.onb-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.onb-hint { font-size: 12.5px; color: var(--text-muted); margin: 8px 0 0; }
.onb-hint-top { margin: 0 0 10px; }

.onb-input {
    width: 100%; padding: 11px 14px; font-size: 14px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px;
    outline: none; transition: border-color .15s;
}
.onb-input:focus { border-color: var(--accent); }

.onb-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.onb-choices-2 { grid-template-columns: repeat(2, 1fr); }
.onb-choices-3 { grid-template-columns: repeat(3, 1fr); }

/* The native control is hidden from sight but stays in the accessibility tree
   and keeps keyboard focus, so tab and space still work. Not display:none,
   which would remove it from both. */
.onb-choice input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}
.onb-choice { display: block; cursor: pointer; }
.onb-choice-body {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 14px; min-height: 44px;
    background: var(--bg);
    border: 1.5px solid var(--border); border-radius: 11px;
    transition: border-color .15s, background .15s;
}
.onb-choice-body i { width: 19px; height: 19px; color: var(--text-muted); }
.onb-choice-body strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.onb-choice-body em { font-style: normal; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.onb-choice-sm .onb-choice-body { flex-direction: row; align-items: center; gap: 9px; padding: 12px 13px; }

.onb-choice:hover .onb-choice-body { border-color: var(--accent); }
.onb-choice input:checked + .onb-choice-body {
    border-color: var(--accent);
    background: var(--accent-light);
}
.onb-choice input:checked + .onb-choice-body i,
.onb-choice input:checked + .onb-choice-body strong { color: var(--accent-dark); }
/* Keyboard focus has to be visible even though the input itself is not. */
.onb-choice input:focus-visible + .onb-choice-body {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

.onb-actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 4px; padding-top: 18px;
    border-top: 1px solid var(--border);
}
.onb-submit { flex: 1; justify-content: center; font-weight: 700; }
.onb-skip { flex-shrink: 0; }
.onb-foot { font-size: 12px; color: var(--text-muted); text-align: center; margin: 12px 0 0; }

@media (max-width: 560px) {
    .onb-page { padding: 16px 12px 32px; }
    .onb-card { padding: 20px 16px; }
    .onb-head h1 { font-size: 21px; }
    .onb-choices, .onb-choices-2, .onb-choices-3 { grid-template-columns: 1fr; }
    .onb-actions { flex-direction: column-reverse; align-items: stretch; }
    .onb-skip, .onb-submit { width: 100%; justify-content: center; }
}

/* accent-light is a very pale tint designed for white backgrounds; on the dark
   surface it becomes a near-white block with dark text on it. */
html.dark-mode .onb-choice input:checked + .onb-choice-body {
    background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
html.dark-mode .onb-choice input:checked + .onb-choice-body i,
html.dark-mode .onb-choice input:checked + .onb-choice-body strong { color: #fff; }

/* ── Onboarding, one question per screen ──
   .onb-stepped is added by the page script. Without it every step shows as a
   single form and the step controls stay hidden, so nothing depends on JS. */
.onb-top { display: none; margin-bottom: 18px; }
.onb-stepped .onb-top { display: block; }
.onb-progress { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.onb-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.onb-top-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.onb-count { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.onb-skip-link {
    background: none; border: none; padding: 8px 4px; min-height: 44px;
    font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.onb-skip-link:hover { color: var(--accent); }
.onb-stepped .onb-head p { margin-bottom: 18px; }
.onb-head[hidden] { display: none; }
.onb-stepped .onb-step { min-height: 260px; margin-bottom: 18px; }
.onb-stepped .onb-step legend {
    font-family: var(--font-display); font-size: 22px; letter-spacing: -.3px; margin-bottom: 14px;
}
.onb-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.onb-row .onb-hint { flex-basis: 100%; margin: 0; }
.onb-row[hidden] { display: none; }   /* display:flex above would override [hidden] */
.onb-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 140px; }
.onb-field span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.onb-field select { min-height: 44px; }
.onb-check {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; margin: 4px 0 10px;
}
.onb-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.onb-subq { font-size: 15px; font-weight: 700; color: var(--text); margin: 20px 0 10px; }
.onb-back, .onb-next { display: none; }
.onb-stepped .onb-back, .onb-stepped .onb-next { display: inline-flex; justify-content: center; }
.onb-stepped .onb-next, .onb-stepped .onb-submit { flex: 1; font-weight: 700; }
.onb-back { flex-shrink: 0; min-width: 96px; }
.onb-next[hidden], .onb-submit[hidden] { display: none !important; }

/* Focus the flow: no search, no shortcuts to leave through halfway. The logo
   and the profile menu stay, so it never feels like a trap. */
.page-onboarding .search-bar,
.page-onboarding .nav-compare,
.page-onboarding .nav-explore-btn,
.page-onboarding .hamburger,
.page-onboarding .bottom-nav,
.page-onboarding .notif-btn { display: none !important; }

@media (max-width: 560px) {
    .onb-stepped .onb-step { min-height: 0; }
    .onb-stepped .onb-actions { flex-direction: row; }
}

/* ── Compare results: answer first ───────────────────────────────
   Heading, verdict banner, jump links, then the evidence. The banner is
   navy in both themes: it is the one block on the page meant to be read
   before anything else, and it should not change weight with the theme. */
.cmp-head { margin: 30px 0 18px; }
.cmp-eyebrow {
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.compare-page .cmp-title {
    font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
    font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -1px;
    margin: 0;
}
.cmp-vs { color: var(--text-muted); font-weight: 600; }

.cmp-verdict {
    background: #16202e; color: #fff; border-radius: 16px;
    padding: 24px 30px; margin-bottom: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.cmp-verdict[hidden] { display: none; }
.cmp-verdict-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cmp-verdict-eyebrow {
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #fda4af;
}
.cmp-verdict-main {
    margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.25; font-weight: 700; letter-spacing: -.3px;
}
.cmp-verdict-main strong { color: #fff; }
.cmp-verdict-sub { margin: 0; font-size: 14.5px; color: #c3cad6; }
.cmp-verdict-cars { display: flex; gap: 12px; flex-shrink: 0; }
.cmp-verdict-car {
    width: 150px; padding: 13px 15px; border-radius: 12px;
    background: rgba(255,255,255,.07);
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    font-size: 13px; color: #c3cad6;
}

.cmp-jump {
    position: sticky; top: var(--navbar-h); z-index: 5;
    display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.cmp-jump a {
    flex-shrink: 0; padding: 12px 14px; font-size: 14.5px; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.cmp-jump a:hover, .cmp-jump a:focus-visible { color: var(--text); border-bottom-color: var(--accent); }
#audienceSection, #cmpSpecs, #historySection, #cmpPhotos, #cmpRec {
    scroll-margin-top: calc(var(--navbar-h) + 56px);
}

/* ── How they compare / Our pick / Things to consider ── */
.cmp-sim, .cmp-rec, .cmp-risk {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 22px 24px; margin-top: 20px; box-shadow: var(--shadow);
}
.cmp-sim h2, .cmp-risk h2 { font-size: 20px; margin: 0 0 14px; }
.cmp-sim h3, .cmp-rec h3, .cmp-risk h3 {
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 10px;
}
.cmp-muted { color: var(--text-muted); font-size: 14px; margin: 0; }
.cmp-sim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
.cmp-sim-lead { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
    border-radius: 999px; background: var(--bg); border: 1px solid var(--border);
    font-size: 13.5px; font-weight: 600;
}
.cmp-chip :is(i, svg) { width: 15px; height: 15px; color: var(--accent); }
.cmp-diffs { display: flex; flex-direction: column; }
.cmp-diff {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
    font-size: 14px; align-items: center; font-variant-numeric: tabular-nums;
}
.cmp-diff:last-child { border-bottom: none; }
.cmp-diff > span:first-child { color: var(--text-muted); }
.cmp-diff-head { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-top: 0; }
.cmp-diff-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cmp-rec { border-top: 4px solid var(--accent); }
.cmp-rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cmp-rec-head h2 {
    font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-stretch: 88%;
    line-height: 1.1; margin: 4px 0 0;
}
.cmp-rec-lead, .cmp-rec-text { font-size: 15px; line-height: 1.6; margin: 0; }
.cmp-rec-text ul { margin: 8px 0 0 20px; }
.cmp-rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-rec-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.cmp-rec-list :is(i, svg) { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--green); }
.cmp-rec-other { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cmp-rec-other .cmp-rec-list :is(i, svg) { color: var(--text-muted); }
.cmp-rec-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cmp-rec-basis {
    display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0;
    font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.cmp-rec-basis :is(i, svg) { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
/* A "do not drive" recall on either car, set on the pick itself. */
.cmp-rec-warn {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; margin: 0 0 14px;
    border-radius: 8px; border-left: 3px solid #b91c1c;
    background: color-mix(in srgb, #b91c1c 10%, transparent);
}
.cmp-rec-warn p { margin: 0; font-size: 14px; line-height: 1.5; }
.cmp-rec-warn :is(i, svg) { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #b91c1c; }
html.dark-mode .cmp-rec-warn :is(i, svg) { color: #f87171; }

.cmp-risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cmp-risk-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.cmp-risk-card h3 { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); }
.cmp-risk-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmp-risk-card li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.cmp-risk-card li :is(i, svg) { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #c2410c; }
html.dark-mode .cmp-risk-card li :is(i, svg) { color: #fb923c; }
.cmp-risk-card.is-clean li :is(i, svg) { color: var(--green); }
html.dark-mode .cmp-risk-card.is-clean li :is(i, svg) { color: #4ade80; }

@media (max-width: 720px) {
    .cmp-sim-grid, .cmp-rec-split, .cmp-risk-grid { grid-template-columns: minmax(0, 1fr); }
    .cmp-sim, .cmp-rec, .cmp-risk { padding: 18px 16px; }
}

/* "For you": answers the person gave, read against the data. */
.cmp-foryou {
    border: 1px solid var(--border); border-left: 4px solid var(--accent);
    background: var(--surface); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px;
}
.cmp-foryou-head {
    display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px;
    margin-bottom: 8px;
}
.cmp-foryou-head :is(i, svg) { width: 17px; height: 17px; color: var(--accent); }
.cmp-foryou-head span { font-weight: 600; color: var(--text-muted); }
.cmp-foryou-edit { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.cmp-foryou ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cmp-foryou li { font-size: 14px; line-height: 1.5; }
.cmp-foryou-link {
    background: none; border: none; padding: 0; margin-left: 4px; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline;
}

/* Fit cards: the headroom number is the hero of each card. */
.cmp-fit-card {
    background: var(--surface); text-align: left; border-radius: 14px;
    padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.cmp-fit-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cmp-fit-card .fit-col-name {
    font-family: var(--font-display); font-size: 19px; margin: 0;
}
.cmp-fit-body { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cmp-fit-card .fit-col-num {
    font-family: var(--font-display); font-stretch: 88%;
    font-size: 60px; line-height: .95; letter-spacing: -2px;
}
.cmp-fit-card.fit-avoid .fit-col-num { color: var(--red); }
.cmp-fit-card .fit-col-cap { margin: 6px 0 0; }
.cmp-fit-side { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.cmp-roof-chip {
    align-self: flex-start; padding: 5px 10px; border-radius: 8px;
    background: var(--orange-light); color: #9a3412;
    font-size: 13px; font-weight: 600;
}
html.dark-mode .cmp-roof-chip { background: #3b1d0a; color: #fdba74; }
.cmp-source {
    display: flex; align-items: center; gap: 7px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--green);
}
html.dark-mode .cmp-source { color: #4ade80; }
.cmp-source i { width: 15px; height: 15px; }
.cmp-source-3p { color: var(--text-muted); }
html.dark-mode .cmp-source-3p { color: var(--text-muted); }

@media (max-width: 760px) {
    .cmp-verdict { flex-direction: column; align-items: stretch; padding: 18px; gap: 16px; }
    .cmp-verdict-cars { gap: 10px; }
    .cmp-verdict-car { width: auto; flex: 1; }
    .cmp-fit-card .fit-col-num { font-size: 46px; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED PAGE PARTS (ri-*)
   The navy header every hub page opens with, and the empty state they
   share. Navy in both themes, same as the compare verdict banner.
═══════════════════════════════════════════════════════════ */
.ri-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
    margin-bottom: 30px; padding: 28px 30px; border-radius: 18px;
    background: #16202e; color: #fff;
}
.ri-hero::after {
    content: ""; position: absolute; right: -80px; top: -120px;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,.35), transparent 70%);
    pointer-events: none;
}
.ri-hero-text { position: relative; z-index: 1; min-width: 0; }
.ri-eyebrow {
    margin-bottom: 8px; font-size: 12.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: #93c5fd;
}
.ri-title {
    margin: 0; color: #fff;
    font-family: var(--font-display); font-weight: 800; font-stretch: 88%;
    font-size: clamp(30px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -1px;
}
.ri-sub { margin: 10px 0 0; max-width: 46ch; font-size: 14.5px; color: #c3cad6; }
.ri-sub strong { color: #fff; }

.ri-stats {
    position: relative; z-index: 1; margin: 0;
    display: grid; grid-template-columns: repeat(4, minmax(92px, auto)); gap: 10px;
}
.ri-stats.is-three { grid-template-columns: repeat(3, minmax(92px, auto)); }
.ri-stats > div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); }
.ri-stats dt {
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #9aa6b8;
}
.ri-stats dd {
    margin: 4px 0 0; white-space: nowrap; color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.5px;
}

.ri-hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-shrink: 0; }
.ri-hero-actions .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ri-hero-actions .btn :is(i, svg) { width: 16px; height: 16px; }

.ri-hero-icon {
    position: relative; z-index: 1; flex-shrink: 0; align-self: center;
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: #fcd34d;
}
.ri-hero-icon :is(i, svg) { width: 32px; height: 32px; }

.ri-progress {
    max-width: 360px; height: 8px; margin-top: 14px; overflow: hidden;
    border-radius: 99px; background: rgba(255,255,255,.12);
}
.ri-progress > span { display: block; height: 100%; border-radius: inherit; background: #fcd34d; }

.ri-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 44px 20px; text-align: center; color: var(--text-muted); font-size: 14px;
    border: 1.5px dashed var(--border); border-radius: 16px;
}
.ri-empty[hidden] { display: none; }
.ri-empty strong { font-family: var(--font-display); font-size: 18px; color: var(--text-primary); }
.ri-empty p { margin: 0 0 8px; max-width: 40ch; }
.ri-empty .btn { display: inline-flex; align-items: center; gap: 6px; }
.ri-empty .btn :is(i, svg) { width: 16px; height: 16px; }
.ri-empty-icon {
    width: 56px; height: 56px; margin-bottom: 4px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent);
}
.ri-empty-icon :is(i, svg) { width: 26px; height: 26px; }
html.dark-mode .ri-empty-icon { background: rgba(37,99,235,.15); color: #93c5fd; }

@media (max-width: 860px) {
    .ri-hero { flex-direction: column; align-items: stretch; }
    .ri-stats { grid-template-columns: repeat(2, 1fr); }
    .ri-stats.is-three { grid-template-columns: repeat(3, 1fr); }
    .ri-hero-actions { align-self: flex-start; }
    .ri-hero-icon { display: none; }
}
@media (max-width: 560px) {
    .ri-hero { padding: 22px 18px; border-radius: 16px; }
    .ri-stats dd { font-size: 20px; }
}
@media (max-width: 420px) {
    .ri-stats.is-three > div { padding: 10px; }
    .ri-stats.is-three dd { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   GARAGE (gx-*): your garage, public garages, profile garage tab
═══════════════════════════════════════════════════════════ */
.gx-page { max-width: 1160px; margin: 0 auto; padding: 28px 16px; }
.gx-section + .gx-section { margin-top: 34px; }
.gx-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
}
.gx-section-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.gx-section-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.gx-section-head .btn :is(i, svg) { width: 16px; height: 16px; }

.gx-back {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
    font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.gx-back:hover { color: var(--accent); }
.gx-back :is(i, svg) { width: 15px; height: 15px; }

.gx-owner { display: flex; align-items: center; gap: 16px; }
.gx-owner-avatar {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
    border: 3px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 26px;
}

.gx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.gx-grid:empty { display: none; }
.gx-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Card */
.gx-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
    transition: box-shadow .18s, transform .18s;
}
.gx-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gx-card.is-link { color: inherit; text-decoration: none; }

.gx-media {
    position: relative; height: 210px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e3a8a, #16202e);
}
.gx-media.is-build { background: linear-gradient(135deg, var(--paint), #0f172a 85%); }
.gx-card.is-link .gx-media { height: 170px; }
.gx-media-icon { width: 56px; height: 56px; margin-bottom: 40px; color: rgba(255,255,255,.35); }
.gx-media-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.gx-card:hover .gx-media-img { transform: scale(1.04); }
.gx-media-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 45%, rgba(8,12,20,.85) 100%);
}
.gx-media-title { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.gx-kicker {
    display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.gx-name {
    margin: 0; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4);
    font-family: var(--font-display); font-weight: 800; font-stretch: 92%;
    font-size: 23px; line-height: 1.1; letter-spacing: -.4px;
}
.gx-chip {
    position: absolute; left: 12px; top: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(10,15,25,.55); backdrop-filter: blur(6px);
    color: #fff; font-size: 12px; font-weight: 600;
}
.gx-paint {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--paint); border: 1px solid rgba(255,255,255,.6);
}
.gx-icon-btn {
    position: absolute; right: 10px; top: 10px;
    width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,15,25,.55); backdrop-filter: blur(6px); color: #fff;
    opacity: .75; transition: opacity .15s, background .15s;
}
.gx-icon-btn:hover, .gx-icon-btn:focus-visible { opacity: 1; background: #dc2626; }
.gx-icon-btn :is(i, svg) { width: 15px; height: 15px; }

.gx-body { flex: 1; display: flex; flex-direction: column; padding: 16px 18px 18px; }
.gx-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.gx-figures.is-three { grid-template-columns: 1fr 1fr 1.3fr; }
.gx-figures > div {
    display: flex; flex-direction: column; min-width: 0;
    padding: 10px 12px; border-radius: 12px; background: var(--bg-secondary);
}
.gx-fig {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary);
    font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.4px;
}
.gx-fig-cap { font-size: 12px; color: var(--text-muted); }
.gx-notes {
    margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gx-notes.is-padded { margin: 0; padding: 12px 14px 14px; }

/* Mod history as a timeline: a rail down the left joining the dots */
.gx-mods-title {
    display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
.gx-mods-title :is(i, svg) { width: 14px; height: 14px; }
.gx-mods { max-height: 280px; overflow-y: auto; }
.gx-mod { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 7px 0 7px 18px; }
.gx-mod::before {
    content: ""; position: absolute; left: 3px; top: 0; bottom: 0;
    width: 2px; background: var(--border);
}
.gx-mod:first-child::before { top: 13px; }
.gx-mod:last-child::before { bottom: calc(100% - 13px); }
.gx-mod:only-child::before { display: none; }
.gx-mod-dot {
    position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px var(--card-bg);
}
.gx-mod-info { flex: 1; min-width: 0; }
.gx-mod-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.gx-mod-meta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--text-muted); }
.gx-mod-cost { font-size: 13.5px; font-weight: 700; color: var(--accent); }
.gx-mod-btn {
    display: flex; align-items: center; padding: 0; border: none; background: none; cursor: pointer;
    color: var(--text-muted); opacity: .6; transition: opacity .15s, color .15s;
}
.gx-mod-btn:hover { opacity: 1; color: var(--accent); }
.gx-mod-btn.is-danger:hover { color: #dc2626; }
.gx-mod-btn :is(i, svg) { width: 14px; height: 14px; }
.gx-mods-empty {
    margin: 0; padding: 12px; text-align: center; font-size: 13px; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: 10px;
}

.gx-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.gx-actions .btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 12px; font-size: 13px; text-decoration: none;
}
.gx-actions .btn :is(i, svg) { width: 15px; height: 15px; }

/* Modals */
.gx-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.gx-modal[hidden] { display: none; }
.gx-modal-box {
    width: 90%; max-width: 460px; padding: 20px; border-radius: 16px;
    background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.gx-modal-box > .composer-field { display: block; margin-bottom: 8px; box-sizing: border-box; }
.gx-modal-box textarea.composer-field { min-height: 70px; resize: vertical; }
.gx-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gx-modal-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.gx-modal-close {
    display: flex; padding: 4px; border: none; border-radius: 8px; background: none; cursor: pointer;
    color: var(--text-muted);
}
.gx-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.gx-modal-close :is(i, svg) { width: 18px; height: 18px; }
.gx-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.gx-form-row > * { flex: 1; min-width: 0; }
.gx-form-row > .is-wide { flex: 2; }
.gx-photo-btn {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; cursor: pointer;
    padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.gx-photo-btn:hover { border-color: var(--accent); color: var(--accent); }
.gx-photo-btn :is(i, svg) { width: 15px; height: 15px; }
.gx-photo-preview { position: relative; margin-bottom: 12px; }
.gx-photo-preview[hidden] { display: none; }
.gx-photo-preview img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; }
.gx-photo-clear {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(0,0,0,.6); color: #fff;
}
.gx-photo-clear :is(i, svg) { width: 14px; height: 14px; }
.gx-suggest { margin-bottom: 10px; }
.gx-suggest[hidden] { display: none; }
.gx-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 560px) {
    .gx-grid, .gx-grid.is-compact { grid-template-columns: 1fr; }
    .gx-media { height: 190px; }
    .gx-modal-box { width: 100%; max-width: none; margin-top: auto; border-radius: 16px 16px 0 0; }
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD (board-*): podium for the top three, rows after
═══════════════════════════════════════════════════════════ */
.board-page { max-width: 820px; margin: 0 auto; padding: 28px 20px; }

.board-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-bottom: 26px; padding: 5px; border-radius: 14px; background: var(--bg-secondary);
}
.board-tab {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px; border: none; border-radius: 10px; background: none; cursor: pointer;
    white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--text-muted);
    transition: color .15s, background .15s;
}
.board-tab:hover { color: var(--text-primary); }
.board-tab.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow); }
.board-tab :is(i, svg) { width: 15px; height: 15px; }

.board-panel { display: none; }
.board-panel.is-active { display: block; }
.board-note { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 15px; }

.board-avatar {
    width: var(--size); height: var(--size); flex-shrink: 0; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: calc(var(--size) * .4);
}
.board-avatar.is-square { border-radius: 12px; }

.board-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; margin-bottom: 14px; }
.board-podium.is-1 { grid-template-columns: minmax(0, 260px); justify-content: center; }
.board-podium.is-2 { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
.board-step {
    position: relative; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    padding: 26px 12px 16px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
    color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.board-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.board-step.is-place-1 {
    padding: 34px 12px 22px; border-color: rgba(234,179,8,.55);
    background: linear-gradient(180deg, rgba(252,211,77,.16), transparent 70%), var(--surface);
}
.board-place {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #cbd5e1; color: #1f2937; box-shadow: 0 0 0 3px var(--bg);
    font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.is-place-1 .board-place { top: -16px; width: 34px; height: 34px; background: #facc15; }
.is-place-3 .board-place { background: #d97706; color: #fff; }
.board-step .board-avatar { margin-bottom: 6px; }
.board-step-name, .board-step-sub {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-step-name { font-size: 14.5px; font-weight: 700; }
.board-step-sub { font-size: 12.5px; color: var(--text-muted); }
.board-step-val {
    margin-top: 8px; color: var(--accent);
    font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.3px;
}
.is-place-1 .board-step-val { font-size: 24px; }
.board-step-label { font-size: 12px; color: var(--text-muted); }

.board-rows { display: flex; flex-direction: column; gap: 8px; }
.board-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
    color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.board-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.board-rank {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); color: var(--text-muted); font-size: 13px; font-weight: 700;
}
.board-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.board-who strong { font-size: 15px; }
.board-who span, .board-score span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-muted);
}
.board-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.board-score strong { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--accent); }

@media (max-width: 600px) {
    .board-tabs { grid-template-columns: repeat(2, 1fr); }
    .board-podium { gap: 8px; }
    .board-step { padding: 24px 6px 12px; }
    .board-step-sub { display: none; }
    .board-step-val { font-size: 16px; }
    .is-place-1 .board-step-val { font-size: 19px; }
    .board-step-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════
   SAVED COMPARISONS (sv-*): matchup cards
═══════════════════════════════════════════════════════════ */
.sv-page { max-width: 960px; margin: 0 auto; padding: 28px 16px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sv-card {
    display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border); transition: box-shadow .15s;
}
.sv-card:hover { box-shadow: var(--shadow-md); }
.sv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-type {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600;
}
.sv-type :is(i, svg) { width: 13px; height: 13px; }
.sv-intent { font-size: 12px; color: var(--text-muted); }
.sv-matchup {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0;
    font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px;
}
.sv-vs {
    padding: 2px 8px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-muted);
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sv-actions { display: flex; gap: 8px; margin-top: auto; }
.sv-actions .btn { flex: 1; justify-content: center; text-align: center; }
.sv-delete {
    display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
    background: transparent; color: var(--text-muted); border: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
.sv-delete:hover { background: rgba(220,38,38,.1); color: #dc2626; border-color: rgba(220,38,38,.4); }
.sv-delete :is(i, svg) { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════
   MESSAGES: empty states
═══════════════════════════════════════════════════════════ */
.msgs-empty { flex: 1; justify-content: center; margin: auto; max-width: 380px; border: none; }
.msgs-list-empty {
    display: flex; flex-direction: column; gap: 4px; margin: 14px; padding: 20px 14px;
    text-align: center; font-size: 13px; color: var(--text-muted);
    border: 1.5px dashed var(--border); border-radius: 12px;
}
.msgs-list-empty strong { font-size: 14px; color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════
   GUIDE DATA BLOCKS (gd-*): tables built by guide_data.py
═══════════════════════════════════════════════════════════ */
.gd-family { margin: 28px 0 34px; }
.gd-group { margin-bottom: 26px; }
.gd-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gd-group-head h3 { margin: 0; font-size: 18px; }
.gd-group-head span, .gd-group-sub { font-size: 12.5px; color: var(--text-muted); }
.gd-group-sub { margin: 4px 0 0; }
.gd-rank {
    list-style: none; margin: 10px 0 0; padding: 6px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
}
.gd-row {
    display: grid; grid-template-columns: 24px minmax(130px, 230px) minmax(0, 1fr) 92px;
    gap: 12px; align-items: center; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.gd-row:last-child { border-bottom: none; }
.gd-pos { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.gd-car { min-width: 0; line-height: 1.25; }
.gd-car strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.gd-car span { font-size: 11.5px; color: var(--text-muted); }
.gd-bar { position: relative; height: 22px; border-radius: 6px; background: var(--bg-secondary); }
.gd-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: #2563eb; }
.gd-bar b {
    position: relative; display: block; padding: 0 8px;
    font-size: 12.5px; line-height: 22px; color: #fff; font-variant-numeric: tabular-nums;
}
.gd-side { white-space: nowrap; text-align: right; font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gd-side small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.gd-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.gd-cabins { margin: 12px 0 24px; overflow-x: auto; }
.gd-cabins table { margin-bottom: 6px; }
.gd-cabins td span { display: block; font-size: 12px; color: var(--text-muted); }
.gd-shortfit table { min-width: 680px; }
.gd-shortfit td:first-child { min-width: 170px; }
.gd-shortfit td:not(:first-child) { white-space: nowrap; }
.gd-shortfit .gd-fit-car th { text-align: left; padding-top: 14px; }
.gd-shortfit .gd-fit-car span { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.gd-shortfit td.gd-ns { color: var(--text-muted); font-style: italic; }
.gd-shortfit td.gd-no { color: var(--red); }
.gd-safety h3 { margin: 22px 0 8px; font-size: 17px; }
.gd-safety table { min-width: 560px; }
.gd-safety td span.gd-award { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #15803d; }
.gd-safety td.num { white-space: nowrap; }
.gd-safety td.gd-ns { color: var(--text-muted); font-style: italic; }
@media (max-width: 560px) {
    .gd-row { grid-template-columns: 20px minmax(0, 1fr) 84px; }
    .gd-bar { grid-column: 2 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   FIT GUIDES INDEX (gi-*): grouped by who each guide is for
═══════════════════════════════════════════════════════════ */
.gi-page { max-width: 1080px; margin: 0 auto; padding: 28px 16px 60px; }
.gi-section + .gi-section { margin-top: 34px; }
.gi-section-head { margin-bottom: 14px; }
.gi-section-head h2 {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 22px; font-weight: 800; letter-spacing: -.3px;
}
.gi-section-head h2 :is(i, svg) { width: 20px; height: 20px; color: var(--accent); }
.gi-section-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.gi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.gi-card {
    display: flex; flex-direction: column; gap: 8px; padding: 20px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    color: var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.gi-card.is-featured { background: #16202e; border-color: #16202e; color: #fff; }
.gi-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-light); color: var(--accent);
}
.gi-icon :is(i, svg) { width: 21px; height: 21px; }
.is-featured .gi-icon { background: rgba(255,255,255,.1); color: #fcd34d; }
html.dark-mode .gi-icon { background: rgba(37,99,235,.15); color: #93c5fd; }
.gi-card h3 { margin: 4px 0 0; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px; }
.gi-card p { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.is-featured p { color: #c3cad6; }
.gi-meta { font-size: 12.5px; color: var(--text-muted); }
.is-featured .gi-meta { color: #9aa6b8; }
@media (max-width: 560px) { .gi-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   BETA FEEDBACK (fb-*): button on every page, form in a <dialog>
═══════════════════════════════════════════════════════════ */
.fb-button {
    position: fixed; right: 20px; bottom: 20px; z-index: 150;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border: none; border-radius: 999px; cursor: pointer;
    background: #16202e; color: #fff; font-size: 14px; font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.fb-button:hover { background: #22304a; }
.fb-button :is(i, svg) { width: 17px; height: 17px; }
html.dark-mode .fb-button { background: var(--accent); }

.fb-dialog {
    /* The global reset zeroes margin, which is what centres a modal dialog. */
    margin: auto;
    width: min(480px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 18px;
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.fb-dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.fb-form, .fb-done { padding: 22px; }
.fb-form[hidden], .fb-done[hidden], .fb-error[hidden] { display: none; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fb-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.fb-close {
    display: flex; padding: 4px; border: none; border-radius: 8px; background: none; cursor: pointer; color: var(--text-muted);
}
.fb-close:hover { background: var(--bg-secondary); color: var(--text); }
.fb-close :is(i, svg) { width: 18px; height: 18px; }
.fb-sub { margin: 6px 0 16px; font-size: 14px; color: var(--text-muted); }
.fb-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; padding: 0; border: none; }
.fb-kinds legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 700; }
.fb-kind input { position: absolute; opacity: 0; pointer-events: none; }
.fb-kind span {
    display: flex; align-items: center; gap: 7px; padding: 10px 12px; cursor: pointer;
    border: 1.5px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 600;
}
.fb-kind span :is(i, svg) { width: 16px; height: 16px; color: var(--text-muted); }
.fb-kind input:checked + span { border-color: var(--accent); background: var(--accent-light); }
.fb-kind input:checked + span :is(i, svg) { color: var(--accent); }
.fb-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.fb-form textarea {
    display: block; width: 100%; box-sizing: border-box; resize: vertical;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg); color: var(--text); font: inherit; font-size: 14.5px;
}
.fb-form textarea:focus { outline: none; border-color: var(--accent); }
.fb-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.fb-error { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: #dc2626; }
.fb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.fb-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fb-done strong { font-family: var(--font-display); font-size: 19px; }
.fb-done p { margin: 0 0 8px; color: var(--text-muted); }

@media (max-width: 768px) {
    /* Sits above the bottom nav (56px plus the iPhone safe area). */
    .fb-button { right: 14px; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 11px; }
    .fb-button span { display: none; }
    .fb-dialog { margin: auto auto 0; width: 100%; max-width: none; border-radius: 18px 18px 0 0; }
}

/* ═══════════════════════════════════════════════════════════
   BETA DASHBOARD (bt-*): /admin/beta
═══════════════════════════════════════════════════════════ */
.bt-page { max-width: 1080px; margin: 0 auto; padding: 28px 16px 60px; }
.bt-range {
    display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.08); color: #c3cad6; font-size: 13px; font-weight: 600; text-decoration: none;
}
.bt-range.is-on { background: #fff; color: #16202e; }
.bt-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.bt-card {
    margin-bottom: 16px; padding: 20px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border);
}
.bt-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.bt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bt-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.bt-step { display: grid; grid-template-columns: 170px minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 6px 0; }
.bt-step-label { font-size: 14px; font-weight: 600; }
.bt-bar { height: 12px; border-radius: 6px; background: var(--bg-secondary); overflow: hidden; }
.bt-bar span { display: block; height: 100%; background: #2563eb; }
.bt-step-n { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bt-step-n small { font-weight: 600; color: var(--text-muted); }
.bt-list { margin: 12px 0 0; }
.bt-list div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.bt-list div:last-child { border-bottom: none; }
.bt-list dt { font-size: 14px; }
.bt-list dd { margin: 0; font-weight: 800; }
.bt-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.bt-table th, .bt-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.bt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.bt-rank { margin: 10px 0 0; padding-left: 20px; }
.bt-rank li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.bt-rank b { font-variant-numeric: tabular-nums; }
.bt-tabs { display: flex; gap: 6px; }
.bt-tabs a {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
    font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.bt-tabs a.is-on { border-color: var(--accent); color: var(--accent); }
.bt-fb { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); }
.bt-fb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.bt-fb p { margin: 8px 0; white-space: pre-wrap; font-size: 14.5px; }
.bt-fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.bt-kind { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: #64748b; }
.bt-kind.is-bug { background: #dc2626; }
.bt-kind.is-confusing { background: #ea580c; }
.bt-kind.is-idea { background: #2563eb; }
@media (max-width: 560px) { .bt-step { grid-template-columns: 1fr 60px; } .bt-bar { grid-column: 1 / -1; } }


/* ═══════════════════════════════════════════════════════════
   RACE COCKPIT: a phone or tablet in landscape, mid-race
   html.race-cockpit is set by race.js while a race runs on a touch device.
   The race takes the whole screen and the controls sit in rails either
   side of it, under the thumbs and never over the cars. Below the canvas
   they were pushed off a 390px-tall landscape screen by the canvas, the
   site header and the bottom bar, so the shift button could not be seen.
═══════════════════════════════════════════════════════════ */
.race-touch-controls[hidden] { display: none; }

@media (orientation: landscape) and (pointer: coarse) {
    html.race-cockpit, html.race-cockpit body { overflow: hidden; }
    html.race-cockpit .race-canvas-panel {
        position: fixed; inset: 0; z-index: 400;
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0;
        height: 100dvh;
        padding: env(safe-area-inset-top) env(safe-area-inset-right)
                 env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: #0a0f1a;
    }
    html.race-cockpit .race-canvas-wrap {
        grid-column: 2; grid-row: 1; height: 100%;
        border: none; border-radius: 0; box-shadow: none;
    }
    /* The wrapper steps aside so its two halves become the side rails. */
    html.race-cockpit .race-touch-controls { display: contents; }
    html.race-cockpit .rtc-left,
    html.race-cockpit .rtc-right {
        grid-row: 1;
        flex-direction: column; justify-content: center; gap: 16px;
        padding: 12px 14px;
    }
    html.race-cockpit .rtc-left  { grid-column: 1; }
    /* Brake above, gas at the bottom where the right thumb rests. */
    html.race-cockpit .rtc-right { grid-column: 3; }
    html.race-cockpit .rtc-btn { border-color: rgba(255,255,255,.25); }
}

/* Credit on a freely licensed vehicle photo (compare page). */
.photo-credit {
    position: absolute; right: 8px; bottom: 8px;
    padding: 3px 8px; border-radius: 6px;
    background: rgba(0,0,0,.55); color: #e2e8f0;
    font-size: 11px; font-weight: 600; text-decoration: none;
}
.photo-credit:hover { color: #fff; background: rgba(0,0,0,.75); }

/* Where the price when new comes from, under the figure. */
.cost-note { margin: 2px 0 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.cost-row strong.nowrap { white-space: nowrap; }

/* A vehicle with no checked photo: a plain panel, not a drawing. */
.no-photo {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: var(--bg-secondary); color: var(--text-muted);
    font-size: 13px; font-weight: 600;
}
.no-photo :is(i, svg) { width: 44px; height: 44px; stroke-width: 1.5; opacity: .7; }

/* ─── Vehicle picker (static/carPicker.js) ───────────────────────────
   Year, make and model in a row; stacked on a phone, where three selects
   side by side would each be too narrow to read a model name. */
.car-picker-row { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: 8px; }
.car-picker-row:has(> select:nth-child(4)) { grid-template-columns: 1.1fr 0.8fr 1fr 1.2fr; }
.car-picker-row select { width: 100%; min-width: 0; }
.car-picker-select {
    padding: 10px 12px; font-size: 14px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
}
.car-picker-current {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px; font-size: 13px; color: var(--text-muted);
}
.car-picker-current button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent); font-size: 13px; font-weight: 600;
}
@media (max-width: 640px) {
    .car-picker-row,
    .car-picker-row:has(> select:nth-child(4)) { grid-template-columns: 1fr; }
    .car-picker-row select { font-size: 16px; } /* below 16px iOS zooms on focus */
}

/* ─── Messages on a phone ────────────────────────────────────────────
   The list (38vh) and the open thread (62vh) were stacked into a page
   already shorter than the screen by the top bar and the bottom tab bar,
   so the message box at the foot of the thread sat off-screen or behind
   the tab bar in portrait; only landscape's side-by-side layout showed it.
   With a thread open the list now steps aside, the thread fills the space
   between the two bars, and a back arrow returns to the list. */
.thread-back { display: none; }
@media (max-width: 768px) {
    .messages-page {
        height: calc(100dvh - var(--navbar-h) - 62px - env(safe-area-inset-bottom, 0px));
    }
    .messages-page:not(:has(#threadEmpty)) .messages-sidebar { display: none; }
    .messages-page:not(:has(#threadEmpty)) .messages-thread { height: 100%; }
    .thread-back {
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; margin-left: -8px; border-radius: 50%;
        color: var(--text);
    }
    .thread-back:active { background: var(--bg); }
    .thread-input { padding-bottom: 10px; }
}
.trending-retry { margin-left: 6px; background: none; border: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.compare-missing {
    display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;
    padding: 12px 14px; border-radius: 10px; font-size: 14px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.compare-missing i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
html.dark-mode .compare-missing { background: #431407; border-color: #9a3412; color: #fed7aa; }
.auth-container .signup-hint { margin: -4px 0 6px 2px; font-size: 12px; line-height: 1.3; color: var(--text-muted); text-align: left; }

/* The sidebar entries were <p onclick> rows: no keyboard focus, and no link
   for a screen reader to announce. They are links now; these keep them
   looking like the rows they replaced. */
.left-sidebar .sb-link { text-decoration: none; }
.left-sidebar .sb-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The menu toggle is a <button> now; strip the button chrome so it looks as
   the div did. The logo's link carries the heading's layout. */
.hamburger { background: none; border: none; font: inherit; display: inline-flex; }
.logo-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.hamburger:focus-visible, .logo-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-submit { display: flex; justify-content: flex-end; margin: 4px 0 18px; }
.compare-submit .compare-btn { min-width: 220px; padding: 13px 28px; font-size: 15px; }
@media (max-width: 640px) { .compare-submit .compare-btn { width: 100%; } }

/* Type-to-search (static/searchSelect.js): the select stays as the source of
   truth but is hidden; the text box in front of it takes its place. */
.ss-hidden { display: none !important; }
.ss-input { width: 100%; min-width: 0; cursor: text; }
.ss-input:disabled { opacity: 0.5; cursor: not-allowed; }
.car-picker-row .ss-input { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
@media (max-width: 640px) { .car-picker-row .ss-input { font-size: 16px; } }

/* Spec explanations (SPEC_HELP in compare.js) */
.spec-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 3px; padding: 0; vertical-align: -3px;
    border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: 50%;
}
.spec-help i, .spec-help svg { width: 13px; height: 13px; }
.spec-help:hover, .spec-help:focus-visible { color: var(--accent); }
.spec-help:focus-visible { outline: 2px solid var(--accent); }
.spec-help-pop {
    position: absolute; z-index: 400; padding: 10px 12px; border-radius: 10px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(15,23,42,.18); font-size: 13px; line-height: 1.45;
}
.spec-help-pop strong { display: block; margin-bottom: 3px; font-size: 13px; }
.spec-help-pop p { margin: 0; color: var(--text-muted); }

/* How to race (race.html) */
.race-howto {
    margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
}
.race-howto summary {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-weight: 700; font-size: 14px; list-style: none;
}
.race-howto summary::-webkit-details-marker { display: none; }
.race-howto summary::after { content: "▾"; margin-left: auto; color: var(--text-muted); transition: transform .15s; }
.race-howto[open] summary::after { transform: rotate(180deg); }
.race-howto summary i, .race-howto summary svg { width: 17px; height: 17px; color: var(--accent); }
.race-howto ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13px; line-height: 1.45; color: var(--text); }
.race-howto-keys { color: var(--text-muted); }
@media (hover: none) and (pointer: coarse) { .race-howto-keys { display: none; } }

/* Getting started (index.html) */
.getting-started {
    padding: 16px 18px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
}
.getting-started[hidden] { display: none; }
.gs-head { display: flex; align-items: center; justify-content: space-between; }
.gs-head h2 { font-size: 17px; margin: 0; }
.gs-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.gs-close:hover { background: var(--bg); }
.gs-sub { margin: 4px 0 12px; font-size: 13px; color: var(--text-muted); }
.gs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gs-item {
    display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none;
    transition: border-color .15s;
}
.gs-item:hover, .gs-item:focus-visible { border-color: var(--accent); }
.gs-item i, .gs-item svg { width: 20px; height: 20px; color: var(--accent); }
.gs-item strong { font-size: 14px; }
.gs-item span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.gs-done { margin-top: 12px; }
@media (max-width: 420px) { .gs-grid { grid-template-columns: 1fr; } }

/* Crash ratings at the top of each car's history column (compare.js crashBlock). */
.crash-block { margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.crash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.crash-cell { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--bg-secondary, rgba(127,127,127,.08)); }
.crash-n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crash-star { color: #f59e0b; margin-left: 1px; }
.crash-nr { font-size: 11.5px; font-weight: 500; font-style: italic; color: var(--text-muted); }
.crash-l { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.crash-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.crash-award { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #15803d; }
.crash-award svg { width: 15px; height: 15px; }
.crash-award-none { font-weight: 500; color: var(--text-muted); }

/* Short-driver rows on Compare: text either side of the label, no bars. */
.vs-text-row .vs-bars { justify-content: center; }
.vs-text-row .vs-val { font-size: 13px; font-weight: 500; }

/* ── Email verification banner (base.html) ─────────────────────── */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
}
.verify-banner > i { flex-shrink: 0; color: var(--accent); width: 18px; height: 18px; }
.verify-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.verify-banner .btn { flex-shrink: 0; white-space: nowrap; }
html.dark-mode .verify-banner { background: var(--accent-light); color: var(--text); }
.verify-banner-short { display: none; }
@media (max-width: 640px) {
    .verify-banner { padding: 8px 16px; font-size: 13px; }
    .verify-banner-long { display: none; }
    .verify-banner-short { display: inline; }
}

/* ── Password checklist (passwordRules.js) ─────────────────────── */
.pw-rules {
    list-style: none;
    margin: -4px 0 4px;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted);
    display: grid;
    gap: 3px;
    text-align: left;
}
.pw-rules li { display: flex; align-items: center; gap: 7px; }
.pw-rules li::before {
    content: "";
    width: 14px; height: 14px; flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    box-sizing: border-box;
}
.pw-rules li.met { color: var(--green); }
.pw-rules li.met::before {
    border-color: var(--green);
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
html.dark-mode .pw-rules li.met { color: #4ade80; }
html.dark-mode .pw-rules li.met::before { border-color: #4ade80; background-color: #16a34a; }

/* Onboarding "What do you drive?": the type comes from the choice above the
   picker, so the picker's own Car / Motorcycle switch is hidden. */
.onb-picker { margin-top: 14px; }
.onb-picker select[name="main_kind"] { display: none; }
.onb-choice[hidden], .onb-picker[hidden] { display: none; }

/* ── Admin: invite codes (admin_invites.html) ──────────────────── */
.bt-page .bt-card + .bt-card { margin-top: 16px; }
.inv-made { margin-bottom: 16px; border-color: var(--accent); }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.inv-row:first-of-type { border-top: 0; }
.inv-row.is-off { opacity: .55; }
.inv-code { font-size: 16px; font-weight: 800; letter-spacing: .06em; min-width: 104px; }
.inv-link { flex: 1; min-width: 220px; font-size: 13px; }
.inv-meta { flex: 1; min-width: 160px; font-size: 14px; }
.inv-meta small { color: var(--text-muted); }
.inv-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 10px 0; }
.inv-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.inv-form input[type=number] { width: 90px; }
.inv-form .inv-note { flex: 1; min-width: 200px; }


/* ── Story creator (index.html) ────────────────────────────────── */
/* Full screen and 9:16, the shape Instagram and TikTok stories use, so
   what you preview is what people see. */
.story-bg-sunset { background: linear-gradient(160deg, #f97316, #db2777); }
.story-bg-ocean  { background: linear-gradient(160deg, #0ea5e9, #4f46e5); }
.story-bg-forest { background: linear-gradient(160deg, #16a34a, #0f766e); }
.story-bg-night  { background: linear-gradient(160deg, #1f2937, #000); }
.story-bg-rose   { background: linear-gradient(160deg, #fb7185, #9333ea); }

body.sc-open { overflow: hidden; }
.sc {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc[hidden] { display: none; }
/* Text mode takes its colour from a .story-bg-* class instead. */
.sc-stage:not(.sc-text-mode) { background: #111; }
.sc-stage {
    position: relative;
    width: min(100vw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100vw * 16 / 9));
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@media (min-width: 700px) { .sc-stage { border-radius: 16px; } }
/* Phones: the whole screen, edge to edge, like the apps. */
@media (max-width: 699px) { .sc-stage { width: 100vw; height: 100dvh; } }
.sc-icon {
    position: absolute;
    top: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.45);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
}
.sc-close { left: 14px; }

.sc-pick {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 32px 28px;
}
.sc-pick[hidden] { display: none; }
.sc-pick h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; color: #fff; text-align: center; }
.sc-pick-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.sc-pick-btn:hover, .sc-pick-btn:focus-within { background: rgba(255,255,255,.14); }
.sc-pick-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.sc-pick-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.6); text-align: center; }

.sc-media { position: absolute; inset: 0; }
.sc-media:empty { display: none; }
.sc-media img, .sc-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sc-media .story-fill, .story-viewer-body .story-fill { object-fit: cover; }

.sc-text {
    position: absolute;
    left: 24px; right: 24px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 120px;
    max-height: 60%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: #fff;
    font: inherit;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
    z-index: 1;
}
.sc-text::placeholder { color: rgba(255,255,255,.75); }
.sc-text[hidden] { display: none; }

.sc-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 40px 14px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    display: grid;
    gap: 12px;
    z-index: 2;
}
.sc-bottom[hidden] { display: none; }
.sc-caption {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.35);
    color: #fff;
    font: inherit;
    font-size: 15px;
}
.sc-caption::placeholder { color: rgba(255,255,255,.7); }
.sc-caption[hidden] { display: none; }
.sc-bgs { display: flex; justify-content: center; gap: 12px; }
.sc-bgs[hidden] { display: none; }
.sc-bg { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); cursor: pointer; padding: 0; }
.sc-bg.is-on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.sc-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sc-back, .sc-post {
    display: inline-flex; align-items: center; gap: 6px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.sc-back { padding: 10px 14px; background: rgba(0,0,0,.4); color: #fff; }
.sc-post { padding: 11px 18px; background: #fff; color: #111; }
.sc-post:disabled { opacity: .6; }
.sc-back svg, .sc-post svg { width: 18px; height: 18px; }