/* ===========================================================================
   KnownCars — Design System
   ---------------------------------------------------------------------------
   Dark mode is the default. Light mode is toggled via html.light-mode.
   Tokens → base → components. Bootstrap 5.3 loaded for grid/utilities.
   =========================================================================== */

/* ---------- 0. Self-hosted webfonts ---------------------------------------
   Inter (body) + Space Grotesk (headings). Downloaded by tools/fetch_fonts.py.
   unicode-range lets browsers fetch only the subset they need. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-grotesk-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/space-grotesk-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/space-grotesk-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/space-grotesk-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Design tokens (Dark mode = default) ------------------------- */
:root {
    /* Brand — #185ea3 blue accent (lightened for contrast on dark) + amber secondary */
    --color-primary:        #3b82c4;
    --color-primary-hover:  #185ea3;
    --color-primary-soft:   rgba(24, 94, 163, 0.18);
    --color-accent:         #d99a45;
    --color-accent-hover:   #c47d2b;
    --color-accent-soft:    rgba(217, 154, 69, 0.16);

    /* Status */
    --color-success:        #3fae74;
    --color-success-soft:   rgba(63, 174, 116, 0.15);
    --color-danger:         #e05a5a;
    --color-danger-soft:    rgba(224, 90, 90, 0.15);
    --color-warning:        #d99a45;
    --color-warning-soft:   rgba(217, 154, 69, 0.15);
    --color-info:           #3b82c4;
    --color-info-soft:      rgba(59, 130, 196, 0.15);

    /* Neutrals — dark mode (warm charcoal) */
    --color-bg:             #14161a;
    --color-surface:        #1d2026;
    --color-surface-2:      #242832;
    --color-surface-3:      #2c2f37;
    --color-border:         #2c2f37;
    --color-border-strong:  #3a3e48;
    --color-text:           #ecedf0;
    --color-text-muted:     #9aa0ab;
    --color-text-subtle:    #6b7079;

    /* Navigation */
    --color-nav-bg:         #1d2026;
    --color-nav-text:       #ecedf0;
    --color-nav-text-muted: #9aa0ab;
    --color-nav-border:     #2c2f37;
    --color-nav-hover:      rgba(255, 255, 255, 0.07);
    /* Tile behind brand logos — toned (not pure white) so it isn't jarring on
       the dark surface, but still light enough for dark/monochrome marks. */
    --color-logo-tile:      #c2c6cc;

    /* Type scale */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs:      0.75rem;
    --text-sm:      0.875rem;
    --text-base:    1rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     1.875rem;
    --text-4xl:     2.25rem;
    --text-5xl:     3rem;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Radii */
    --radius-sm:   6px;
    --radius:      10px;
    --radius-md:   14px;
    --radius-lg:   18px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:      0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(24, 94, 163, 0.35);
    --glow-primary: 0 0 20px rgba(24, 94, 163, 0.2);

    /* Motion */
    --transition:      150ms ease;
    --transition-slow: 250ms ease;

    /* Layout */
    --container-max: 1200px;
    --nav-height:    60px;
}

/* ---------- 1b. Light mode overrides --------------------------------------- */
html.light-mode {
    --color-primary:        #185ea3;
    --color-primary-hover:  #134c84;
    --color-primary-soft:   #e8f0f8;
    --color-accent:         #c47d2b;
    --color-accent-hover:   #a7691f;
    --color-accent-soft:    #fbf3e8;
    --color-success:        #2f9e60;
    --color-danger:         #c84545;
    --color-warning:        #c47d2b;
    --color-info:           #185ea3;
    --color-bg:             #f6f6f4;
    --color-surface:        #ffffff;
    --color-surface-2:      #f1f1ee;
    --color-surface-3:      #e5e4df;
    --color-border:         #e5e4df;
    --color-border-strong:  #d3d2cc;
    --color-text:           #1b1d21;
    --color-text-muted:     #5c5f66;
    --color-text-subtle:    #989ba2;
    --color-success-soft:   #ecf6f0;
    --color-danger-soft:    #fbecec;
    --color-warning-soft:   #fbf3e8;
    --color-info-soft:      #e8f0f8;
    --color-nav-bg:         #ffffff;
    --color-nav-text:       #1b1d21;
    --color-nav-text-muted: #5c5f66;
    --color-nav-border:     #e5e4df;
    --color-nav-hover:      rgba(15, 23, 42, 0.05);
    --color-logo-tile:      #ffffff;
    --shadow-focus: 0 0 0 3px rgba(24, 94, 163, 0.25);
    --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow:      0 1px 4px rgba(15, 23, 42, 0.08);
    --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.10);
    --shadow-lg:   0 12px 28px rgba(15, 23, 42, 0.12);
}

/* ---------- 2. Reset & base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4) 0;
    font-family: var(--font-display);
    line-height: var(--leading-tight);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    /* Space Grotesk tops out at 700; don't let the browser fake heavier weights. */
    font-synthesis-weight: none;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4) 0; }

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

/* ---------- 3. Layout ------------------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: var(--space-6) auto;
    padding: var(--space-8);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

.container-fluid {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
}

/* ---------- 4. Navigation -------------------------------------------------- */
.main-nav {
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text);
    border-bottom: 1px solid var(--color-nav-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(140%) blur(12px);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    height: var(--nav-height);
}

.logo a {
    color: var(--color-nav-text);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.logo a svg {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-links li { margin: 0; position: relative; }

.nav-links > li > a {
    color: var(--color-nav-text-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: background-color var(--transition), color var(--transition);
}

.nav-links > li > a:hover {
    color: var(--color-nav-text);
    background-color: var(--color-nav-hover);
}

.nav-links a i { font-size: var(--text-sm); }

/* Nav search */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-icon {
    position: absolute;
    left: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-nav-text-muted);
    pointer-events: none;
}
.nav-search-input {
    width: 170px;
    padding: 6px var(--space-3) 6px calc(var(--space-3) + 18px);
    font-size: var(--text-sm);
    color: var(--color-nav-text);
    background: var(--color-nav-hover);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    margin: 0;
    transition: width var(--transition), border-color var(--transition);
}
.nav-search-input::placeholder { color: var(--color-nav-text-muted); }
.nav-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    width: 220px;
}
@media (max-width: 768px) {
    .nav-search-item { width: 100%; }
    .nav-search { width: 100%; }
    .nav-search-input, .nav-search-input:focus { width: 100%; }
}

/* User dropdown */
.user-menu .dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 100;
    padding: var(--space-2);
    list-style: none;
}

.user-menu:hover .dropdown,
.user-menu:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu .dropdown li { width: 100%; }

.user-menu .dropdown a {
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    transition: background-color var(--transition), color var(--transition);
}

.user-menu .dropdown a:hover {
    background-color: var(--color-surface-2);
    color: var(--color-primary);
}

.user-menu .dropdown a i { width: 16px; text-align: center; color: var(--color-text-muted); }
.user-menu .dropdown a:hover i { color: var(--color-primary); }

/* Settings panel */
.settings-nav-item { position: relative; }

.settings-wrapper { position: relative; }

.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-nav-text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.settings-btn:hover,
.settings-btn[aria-expanded="true"] {
    background-color: var(--color-nav-hover);
    border-color: var(--color-nav-border);
    color: var(--color-nav-text);
}

.settings-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 240px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 200;
    overflow: hidden;
}

.settings-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.settings-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}

.settings-item-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: 500;
}

.settings-item-label i { width: 16px; color: var(--color-text-muted); }

/* Notifications bell */
.notif-nav-item { position: relative; }
.notif-wrapper { position: relative; }

.notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-nav-text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.notif-btn:hover,
.notif-btn[aria-expanded="true"] {
    background-color: var(--color-nav-hover);
    border-color: var(--color-nav-border);
    color: var(--color-nav-text);
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: var(--radius-full);
    background: var(--color-danger, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 200;
    overflow: hidden;
}

.notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.notif-mark-all {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }

.notif-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background-color var(--transition);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.notif-item.unread { background: var(--color-primary-soft); }
.notif-item.unread::before { content: ''; }

.notif-message { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.notif-time { font-size: var(--text-xs); color: var(--color-text-subtle); }

.notif-view-all {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    border-top: 1px solid var(--color-border);
}
.notif-view-all:hover { background: var(--color-surface-2); text-decoration: none; }

.notif-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .notif-dropdown { right: auto; left: 0; }
}

/* Toggle switch */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-surface-3);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-slow);
}

.theme-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: var(--radius-full);
    transition: transform var(--transition-slow);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
    background-color: var(--color-primary);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::before {
    transform: translateX(20px);
}

/* Hamburger menu (mobile) */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

.hamburger-menu span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-nav-text);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.hamburger-menu.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-menu.active span:nth-child(2) { opacity: 0; }
.hamburger-menu.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .hamburger-menu { display: flex; }
    .nav-container { padding: 0 var(--space-4); }

    .nav-links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--color-nav-bg);
        border-bottom: 1px solid var(--color-nav-border);
        padding: var(--space-2);
    }

    .nav-links.active { display: flex; }

    .nav-links > li > a {
        padding: var(--space-3) var(--space-4);
        border-radius: 0;
        width: 100%;
        border-bottom: 1px solid var(--color-nav-border);
        color: var(--color-nav-text-muted);
    }

    .nav-links li:last-child > a { border-bottom: 0; }

    .user-menu .dropdown {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 var(--space-4);
    }

    .user-menu .dropdown a { color: var(--color-nav-text-muted); }
    .user-menu .dropdown a:hover { color: var(--color-nav-text); background: var(--color-nav-hover); }
    .user-menu .dropdown a i { color: var(--color-nav-text-muted); }

    .settings-nav-item { align-self: center; padding: var(--space-2) var(--space-4); }
    .settings-dropdown { right: auto; left: 0; }
}

/* ---------- 5. Buttons ----------------------------------------------------- */
.btn,
.action-button,
.btn-link,
.btn-view-models,
.btn-add-car,
.btn-filter,
.btn-clear,
.btn-primary,
.btn-secondary,
.custom-btn-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.btn:hover,
.action-button:hover,
.btn-link:hover,
.btn-view-models:hover,
.btn-add-car:hover,
.btn-filter:hover,
.btn-clear:hover,
.custom-btn-green:hover { text-decoration: none; }

.btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* Primary */
.btn-primary,
.action-button {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
.action-button:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #ffffff;
    box-shadow: var(--shadow);
}

/* Secondary */
.btn-secondary,
.btn-link {
    background-color: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn-secondary:hover,
.btn-link:hover {
    background-color: var(--color-surface-3);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* Outline-light (hero) */
.btn-outline-light {
    background-color: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    backdrop-filter: blur(4px);
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.16);
    border-color: #ffffff;
    color: #ffffff;
}

/* Success */
.custom-btn-green,
.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
    border-color: var(--color-success);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.custom-btn-green:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #059669;
    color: #ffffff;
}

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, var(--color-danger) 0%, #dc2626 100%);
    border-color: var(--color-danger);
    color: #ffffff;
}
.btn-danger:hover { filter: brightness(1.1); }

/* Outline primary */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Large */
.btn-lg {
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    border-radius: var(--radius);
}

.btn-block { width: 100%; }

/* Filter row */
.btn-filter {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border-color: var(--color-primary);
    color: #ffffff;
}
.btn-filter:hover { filter: brightness(1.1); }

.btn-clear {
    background-color: var(--color-surface-2);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
}
.btn-clear:hover { background-color: var(--color-surface-3); color: var(--color-text); }

/* ---------- 6. Forms ------------------------------------------------------- */
form label,
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

form input,
form textarea,
form select,
.form-control {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-2);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition-slow);
}

form input:focus,
form textarea:focus,
form select:focus,
.form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--shadow-focus);
    background-color: var(--color-surface);
    /* Bootstrap's .form-control:focus resets color to its dark body color,
       which is unreadable on our dark surface. Keep our themed text color. */
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

/* Browser autofill. Chrome/Safari override the field background and text with
   their own (light) styling, which renders as low-contrast grey text on our
   themed surfaces. Force our own colors: the large inset box-shadow paints over
   the autofill background, -webkit-text-fill-color sets the text color, and the
   long transition stops the autofill background from flashing back. Uses theme
   variables so it adapts to both dark and light mode. */
form input:-webkit-autofill,
form textarea:-webkit-autofill,
form select:-webkit-autofill,
.form-control:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:active,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface-2) inset;
    box-shadow: 0 0 0 1000px var(--color-surface-2) inset;
    border: 1px solid var(--color-border-strong);
    transition: background-color 9999s ease-in-out 0s;
}

form input:-webkit-autofill:focus,
form textarea:-webkit-autofill:focus,
form select:-webkit-autofill:focus,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    border-color: var(--color-primary);
}

form input[disabled],
form textarea[disabled],
.form-control[disabled] {
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

textarea, .form-control[rows] { min-height: 120px; resize: vertical; }

.form-group { margin-bottom: var(--space-4); }
.form-text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Range sliders — custom track + thumb so the thumb sits flush at both ends
   (native inputs leave dead space at max). accent-color tints the filled track. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    margin: var(--space-2) 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-3);
    outline: none;
    cursor: pointer;
    accent-color: var(--color-primary);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { background: var(--color-primary-hover); transform: scale(1.08); }
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid var(--color-surface);
    box-shadow: var(--shadow-sm);
}
input[type="range"]:focus-visible { box-shadow: var(--shadow-focus); }
input[type="range"][disabled] { opacity: 0.55; cursor: not-allowed; accent-color: var(--color-text-subtle); }
input[type="range"][disabled]::-webkit-slider-thumb { background: var(--color-text-subtle); }
input[type="range"][disabled]::-moz-range-thumb { background: var(--color-text-subtle); }

/* ---------- 7. Cards ------------------------------------------------------- */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: background-color var(--transition-slow), border-color var(--transition-slow);
}

.card-header {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

.card-header.bg-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
    color: #ffffff !important;
    border-bottom-color: var(--color-primary);
}

.card-body { padding: var(--space-5); }

.card-footer {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.card-footer a { font-weight: 500; }

/* ---------- 8. Alerts ------------------------------------------------------ */
.alert {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

.alert-success { background-color: var(--color-success-soft); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; }
.alert-danger  { background-color: var(--color-danger-soft);  border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; }
.alert-warning { background-color: var(--color-warning-soft); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
.alert-info    { background-color: var(--color-info-soft);    border-color: rgba(6, 182, 212, 0.3); color: #67e8f9; }

html.light-mode .alert-success { color: #065f46; }
html.light-mode .alert-danger  { color: #991b1b; }
html.light-mode .alert-warning { color: #92400e; }
html.light-mode .alert-info    { color: #075985; }

/* ---------- 9. Section headers -------------------------------------------- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-8) 0 var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.section-header h3 { margin: 0; font-size: var(--text-xl); }

/* ---------- 10. Car detail page ------------------------------------------- */
.car-info-card {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.car-info-card h2 {
    margin: 0 0 var(--space-5);
    font-size: var(--text-2xl);
    color: var(--color-text);
}

.car-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.car-info-item {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.car-info-label {
    font-weight: 500;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.car-info-value { font-weight: 600; color: var(--color-text); }

/* ---------- 11. Ranked list (issues/reviews) ------------------------------- */
.ranked-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }

.ranked-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ranked-item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow);
}

.score-box {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-lg);
}

.score-box.positive { background-color: var(--color-success-soft); color: #34d399; }
.score-box.negative { background-color: var(--color-danger-soft); color: #f87171; }
.score-box.neutral  { background-color: var(--color-surface-2); color: var(--color-text-muted); }

html.light-mode .score-box.positive { color: #065f46; }
html.light-mode .score-box.negative { color: #991b1b; }

.content { flex: 1; min-width: 0; }

.item-date {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.item-rating {
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.item-description { margin-bottom: var(--space-3); line-height: var(--leading-relaxed); }

.item-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.item-author { font-weight: 500; }

.item-actions {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Vote buttons */
.vote-btn,
.item-actions button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.vote-btn:hover,
.item-actions button:hover {
    background-color: var(--color-surface-3);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.vote-btn.upvote:hover {
    background-color: var(--color-success-soft);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.vote-btn.downvote:hover {
    background-color: var(--color-danger-soft);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

html.light-mode .vote-btn.upvote:hover { color: #065f46; }
html.light-mode .vote-btn.downvote:hover { color: #991b1b; }

.vote-btn.voted {
    transform: scale(0.92);
    transition: transform 120ms ease;
}

/* The user's current vote (toggle semantics: clicking again retracts). */
.vote-btn.upvote.is-voted {
    background-color: var(--color-success-soft);
    border-color: rgba(16, 185, 129, 0.55);
    color: #34d399;
    font-weight: 700;
}
.vote-btn.downvote.is-voted {
    background-color: var(--color-danger-soft);
    border-color: rgba(239, 68, 68, 0.55);
    color: #f87171;
    font-weight: 700;
}
html.light-mode .vote-btn.upvote.is-voted { color: #065f46; }
html.light-mode .vote-btn.downvote.is-voted { color: #991b1b; }

.vote-btn:disabled {
    opacity: 0.5;
    cursor: progress;
}

.item-actions a {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.item-actions a:hover { background-color: var(--color-primary-soft); }

.rating-label { font-weight: 600; color: var(--color-text-muted); }

.rating-value {
    font-weight: 700;
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}

/* ---------- 12. Manufacturer / model grids --------------------------------- */
.manufacturer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}

.manufacturer-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.manufacturer-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--glow-primary), var(--shadow-md);
    transform: translateY(-2px);
}

.manufacturer-mark {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #ffffff;
    font-weight: 800;
    font-size: var(--text-xl);
    letter-spacing: -0.02em;
    box-shadow: var(--shadow);
}

.manufacturer-logo-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    padding: 9px;
    background: var(--color-logo-tile);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.manufacturer-card:hover .manufacturer-logo-img {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.manufacturer-name {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
}

.manufacturer-card .btn-view-models {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.manufacturer-card:hover .btn-view-models {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border-color: var(--color-primary);
    color: #ffffff;
}

.manufacturer-card .btn-view-models i { transition: transform var(--transition); }
.manufacturer-card:hover .btn-view-models i { transform: translateX(3px); }

/* Models list */
.model-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}

.model-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.model-item:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
    transform: translateY(-1px);
}

.model-item a {
    display: block;
    padding: var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--text-base);
}

.model-item:hover a { color: var(--color-primary); }

/* ---------- 13. Navigation/back links ------------------------------------- */
.navigation-links,
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* ---------- 14. Filter controls ------------------------------------------- */
.filter-controls {
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0 var(--space-6);
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.filter-group label {
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.filter-group select { margin-bottom: 0; }

/* ---------- 15. Posts / issues / reviews cards ---------------------------- */
.posts-container,
.reviews-container,
.issues-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.post-card,
.review-card,
.issue-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.post-card:hover,
.review-card:hover,
.issue-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow);
}

.post-header,
.review-header,
.issue-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}

.post-score,
.review-score,
.issue-score {
    flex: 0 0 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-base);
}

.post-score.positive,
.review-score.positive,
.issue-score.positive { background-color: var(--color-success-soft); color: #34d399; }

.post-score.negative,
.review-score.negative,
.issue-score.negative { background-color: var(--color-danger-soft); color: #f87171; }

.post-score.neutral,
.review-score.neutral,
.issue-score.neutral { background-color: var(--color-surface-3); color: var(--color-text-muted); }

html.light-mode .post-score.positive,
html.light-mode .review-score.positive,
html.light-mode .issue-score.positive { color: #065f46; }

html.light-mode .post-score.negative,
html.light-mode .review-score.negative,
html.light-mode .issue-score.negative { color: #991b1b; }

.post-summary,
.review-summary,
.issue-summary { flex: 1; min-width: 0; }

.post-spec,
.review-spec,
.issue-spec {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.post-model,
.review-model,
.issue-model { font-weight: 600; color: var(--color-text); }

.post-meta,
.review-meta,
.issue-meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.post-author,
.review-author,
.issue-author { font-weight: 500; margin-right: var(--space-2); }

.post-content,
.review-content,
.issue-content { padding: var(--space-4) var(--space-5); }

.post-text,
.review-text,
.issue-text {
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.post-actions,
.review-actions,
.issue-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.vote-form { margin: 0; }

.edit-btn {
    font-size: var(--text-sm);
    color: var(--color-primary);
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
}
.edit-btn:hover { background-color: var(--color-primary-soft); }

/* Moderation actions (delete / report) and edited marker */
.mod-form { display: inline; margin: 0; }
.mod-form .edit-btn {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}
.danger-btn { color: var(--color-danger, #c0392b); }
.danger-btn:hover { background-color: transparent; text-decoration: underline; }
.report-btn { color: var(--color-text-subtle); }
.report-btn:hover { color: var(--color-danger, #c0392b); background-color: transparent; }
.edited-tag { font-size: var(--text-xs); color: var(--color-text-subtle); font-style: italic; }
.post-date .permalink { color: inherit; text-decoration: none; }
.post-date .permalink:hover { color: var(--color-primary); text-decoration: underline; }

/* Star ratings (display) */
.stars { color: var(--color-accent); margin-right: var(--space-1); display: inline-flex; gap: 2px; }
.rating-text { font-weight: 600; color: var(--color-text); }

/* Collapsible details */
.details-summary {
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    background-color: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: background-color var(--transition), color var(--transition);
    list-style: none;
}

.details-summary::-webkit-details-marker { display: none; }
.details-summary::before {
    content: "▸";
    display: inline-block;
    margin-right: var(--space-2);
    transition: transform var(--transition);
}

details[open] .details-summary::before { transform: rotate(90deg); }
.details-summary:hover { background-color: var(--color-surface-3); color: var(--color-text); }

/* Quality dimensions */
.quality-dimensions {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.quality-dimensions h4 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dimension-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.dimension-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.dimension-label { font-weight: 600; color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.dimension-value { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin: 4px 0; }

.dimension-comment {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-surface);
    border-left: 3px solid var(--color-border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Energy efficiency display */
.fuel-economy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    background-color: var(--color-success-soft) !important;
    border-left-color: var(--color-success) !important;
    font-style: normal;
}

.fuel-metric {
    background-color: var(--color-surface);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

html.light-mode .fuel-metric { color: #065f46; }

/* Post type tags */
.post-type-tag,
.response-type-tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.post-type-tag.issue, .response-type-tag.solution {
    background-color: var(--color-danger-soft); color: #f87171; border-color: rgba(239,68,68,0.3);
}
.post-type-tag.question, .response-type-tag.answer {
    background-color: var(--color-info-soft); color: #67e8f9; border-color: rgba(6,182,212,0.3);
}
.post-type-tag.information, .response-type-tag.comment {
    background-color: var(--color-success-soft); color: #34d399; border-color: rgba(16,185,129,0.3);
}

html.light-mode .post-type-tag.issue, html.light-mode .response-type-tag.solution { color: #991b1b; }
html.light-mode .post-type-tag.question, html.light-mode .response-type-tag.answer { color: #075985; }
html.light-mode .post-type-tag.information, html.light-mode .response-type-tag.comment { color: #065f46; }

/* Filter chips */
.post-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.post-type-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
}

.filter-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.filter-option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px var(--space-3);
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--text-sm);
    user-select: none;
    color: var(--color-text-muted);
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.filter-option:hover { background-color: var(--color-surface-3); color: var(--color-text); }
.filter-option.checked {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}
.filter-option input { margin-right: var(--space-1); }

.no-filtered-posts,
.no-responses,
.no-solutions {
    padding: var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    background-color: var(--color-surface-2);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
}

/* Responses / solutions */
.responses-container,
.solutions-container {
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.responses-list,
.solutions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.response-item,
.solution-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.response-score,
.solution-score {
    flex: 0 0 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-sm);
}

.response-score.positive,
.solution-score.positive { background-color: var(--color-success-soft); color: #34d399; }
.response-score.negative,
.solution-score.negative { background-color: var(--color-danger-soft); color: #f87171; }
.response-score.neutral,
.solution-score.neutral  { background-color: var(--color-surface-3); color: var(--color-text-muted); }

html.light-mode .response-score.positive,
html.light-mode .solution-score.positive { color: #065f46; }
html.light-mode .response-score.negative,
html.light-mode .solution-score.negative { color: #991b1b; }

.response-content,
.solution-content { flex: 1; min-width: 0; }

.response-meta,
.solution-meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.response-author,
.solution-author { font-weight: 500; margin-right: var(--space-2); }

.response-description,
.solution-description { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }

.response-actions,
.solution-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.btn-add-response,
.btn-add-solution {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px var(--space-3);
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%);
    border: 1px solid var(--color-success);
    color: #ffffff;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: filter var(--transition);
}
.btn-add-response:hover,
.btn-add-solution:hover {
    filter: brightness(1.1);
    color: #ffffff;
    text-decoration: none;
}

/* ---------- 16. User car lists (profile & index) -------------------------- */
.user-cars-list { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-6); }

.user-car-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.user-car-item a { color: var(--color-text); display: block; }
.user-car-item:hover { background-color: var(--color-primary-soft); }

/* ---------- 17. Footer ---------------------------------------------------- */
.site-footer {
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text-muted);
    margin-top: var(--space-16);
    padding: var(--space-10) 0 var(--space-6);
    border-top: 1px solid var(--color-nav-border);
}

.footer-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-brand h4 {
    color: var(--color-nav-text);
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.footer-brand h4 svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.footer-brand p { font-size: var(--text-sm); color: var(--color-nav-text-muted); margin: 0; max-width: 320px; }

.footer-col h5 {
    color: var(--color-nav-text);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-3);
    font-weight: 700;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
    color: var(--color-nav-text-muted);
    font-size: var(--text-sm);
    transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-nav-text); }

.footer-bottom {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-nav-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.footer-bottom a { color: var(--color-nav-text-muted); }
.footer-bottom a:hover { color: var(--color-nav-text); }

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- 18. Utility --------------------------------------------------- */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.text-muted { color: var(--color-text-muted) !important; }

/* ---------- 19. Responsive ------------------------------------------------ */
@media (max-width: 768px) {
    .container { width: 95%; padding: var(--space-5); margin-top: var(--space-4); }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }

    .ranked-item { flex-direction: column; gap: var(--space-3); }
    .score-box { flex: 0 0 auto; align-self: flex-start; }

    .section-header { flex-direction: column; align-items: flex-start; }

    .car-info-grid { grid-template-columns: 1fr; }

    .post-header,
    .review-header,
    .issue-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-actions,
    .review-actions,
    .issue-actions {
        align-self: stretch;
        justify-content: flex-start;
    }
}

/* ----- Error pages (404/500/etc.) ----- */
.error-page {
    max-width: 540px;
    margin: 4rem auto;
    padding: 2.5rem 1.5rem;
}
.error-page .error-code {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
}
.error-page .error-code .fa-car {
    color: var(--color-accent);
}
.error-page .error-title {
    margin-top: 1rem;
    color: var(--color-text);
}
.error-page .error-message {
    margin: 0.75rem 0 1.75rem;
    color: var(--color-text-muted);
}

/* ----- Pagination ----- */
.pagination-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    margin: var(--space-4) 0 var(--space-6);
}
.pagination-nav .page-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text);
    background: var(--color-surface);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: background 0.15s, border-color 0.15s;
}
.pagination-nav .page-link:hover {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
}
.pagination-nav .page-link.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}
.pagination-nav .page-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.pagination-nav .page-ellipsis {
    color: var(--color-text-muted);
    padding: 0 4px;
}

/* ---------- Bootstrap component overrides for the dark theme --------------- */
/* The profile page and modals use stock Bootstrap components, which ship a
   light theme (white panels, dark/low-contrast text). Re-theme them to match
   the app surfaces. style.css loads after Bootstrap, so these win. */

/* Bootstrap's .card forces a dark body color; keep card text legible. */
.card { color: var(--color-text); }

.list-group { border-radius: var(--radius-sm); overflow: hidden; }
.list-group-item {
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-border);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--color-surface-3);
    color: var(--color-text);
}
.list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.modal-header,
.modal-footer { border-color: var(--color-border); }
/* The default close button is a dark glyph — invert it for dark surfaces. */
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Bootstrap's .text-muted utility (#6c757d-ish) is too dark on our surfaces. */
.text-muted { color: var(--color-text-muted) !important; }

/* Description lists (e.g. Joined / Last login on the profile page). */
dt { color: var(--color-text); }
dd { color: var(--color-text-muted); }

/* ---------- Powertrain badge ----------------------------------------------
   Small pill flagging how a car is propelled. Rendered by the powertrain_badge
   macro (templates/_macros.html) on browse cards, model headers, and feeds.
   Colours reuse status tokens so they stay legible in both themes. */
.pt-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pt-badge i { font-size: 0.85em; }
.pt-badge-electric { color: var(--color-info);    background: var(--color-info-soft);    border-color: var(--color-info); }
.pt-badge-phev     { color: var(--color-accent);  background: var(--color-accent-soft);  border-color: var(--color-accent); }
.pt-badge-hybrid   { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-success); }
.pt-badge-gas      { color: var(--color-text-muted); background: var(--color-surface-2); border-color: var(--color-border-strong); }

/* Compact variant for dense rows (my-cars tiles, activity feed). */
.pt-badge-sm { padding: 1px 7px; font-size: 0.6875rem; }