/* Brand accent (electric blue, matching the hero banner's neon/holographic-diagnostic garage
   scene - reads as premium/technical without red's built-in "danger" association, which matters
   since .btn-danger/error states already use red elsewhere in this app). Bootstrap 5.3's own CSS
   variables cover utility classes (.text-primary/.bg-primary/etc, which read --bs-primary
   directly) but NOT component-local variables like .btn-primary's --bs-btn-bg - those are
   overridden individually further down since we're on the compiled CDN build, not a recompiled
   Sass source. */
:root {
    --brand-accent: #3b82f6;
    --brand-accent-hover: #93c5fd;
    --brand-accent-active: #2563eb;
    --bs-primary: var(--brand-accent);
    --bs-primary-rgb: 59, 130, 246;
    --bs-link-color: var(--brand-accent);
    --bs-link-color-rgb: 59, 130, 246;
    --bs-link-hover-color: var(--brand-accent-hover);
    --bs-link-hover-color-rgb: 147, 197, 253;

    /* Neutral scale - a blue-tinted near-black ladder (not pure gray) replacing the old
       Discord-palette surfaces, which only spanned ~40 brightness points end to end (rgb 32 to
       rgb 74) and read as one flat midtone band. This spans roughly rgb 10 to rgb 66, so
       page/card/hover/border actually look like distinct elevations instead of near-identical
       grays, and the tint ties the whole neutral scale to the blue accent above and the hero
       banner's own cool, dark garage backdrop. */
    --bg-page: #10131a;
    --bg-navbar: #0a0d12;
    --surface-card: #1a1f29;
    --surface-card-alt: #1e2430;
    --surface-input: #1f2531;
    --surface-hover: #262d3c;
    --border-subtle: #2f3849;
}

body {
    margin: 0;
    background-color: var(--bg-page);
    color: #ffffff;
}

/* Display face for headings/brand only - body copy stays on Bootstrap's default system font
   stack for readability at paragraph length. */
h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-primary {
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-bg: var(--brand-accent-active);
    --bs-btn-hover-border-color: var(--brand-accent-active);
    --bs-btn-active-bg: var(--brand-accent-active);
    --bs-btn-active-border-color: var(--brand-accent-active);
    --bs-btn-disabled-bg: var(--brand-accent);
    --bs-btn-disabled-border-color: var(--brand-accent);
    --bs-btn-focus-shadow-rgb: 59, 130, 246;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-bg: var(--brand-accent);
    --bs-btn-hover-border-color: var(--brand-accent);
    --bs-btn-active-bg: var(--brand-accent);
    --bs-btn-active-border-color: var(--brand-accent);
}

/* Bootstrap's default .text-muted (#6c757d) is tuned for light backgrounds and nearly
   disappears against this theme's var(--bg-page)/var(--surface-card) surfaces - lighten it to match the other
   "muted" grays already used around the site (e.g. .user-card-email's #b9bbbe). */
.text-muted {
    color: #b9bbbe !important;
}

/* Set padding to keep content from hitting the edges. Top/bottom padding matters more than it
   used to - the old fixed top navbar left a natural 56px gap above page headings for free, but
   the sidebar layout doesn't reserve any vertical space by default, so headings would otherwise
   sit flush against the very top of the browser viewport. */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 28px;
    padding-bottom: 24px;
}

/* Bootstrap 5 dropped .dl-horizontal entirely (it was a Bootstrap 3 component) - restore its
   classic two-column dt/dd layout since Manage/Index.cshtml, Garages/CarProjectDetails.cshtml,
   Garages/CarProjectDelete.cshtml and Garages/Delete.cshtml all still use it. white-space:normal
   overrides the (also gone) default that used to truncate long terms in the left column. */
.dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    white-space: normal;
    text-align: right;
    padding-right: 10px;
}

.dl-horizontal dd {
    margin-left: 180px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Register's Turnstile widget (fixed 300px) centered on the 280px input column above it. */
.turnstile-row {
    max-width: 280px;
    display: flex;
    justify-content: center;
}

/* Forum post/reply body (Views/Forum/Thread.cshtml, CreateThread.cshtml, EditPost.cshtml) opts
   out of the 280px cap above - it should fill its card, matching the width of the thread's own
   post cards above it, not sit as a narrow box off to one side. */
.forum-body-textarea {
    max-width: none;
    width: 100%;
}

/* Collapsible left sidebar (Views/Shared/_Layout.cshtml) - replaced the old Bootstrap top navbar
   site-wide. #appShell stacks full-width banners/mobile topbar above a row holding the sidebar
   and the page content, so neither needs manual offset math against the other's height (the old
   top-navbar layout needed JS to measure banner height and push the fixed nav down - a plain
   flex column makes that unnecessary). */
.bl-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bl-shell-row {
    display: flex;
    flex: 1;
    min-height: 0;
}

.bl-brand, .bl-h {
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bl-brand {
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
}

.bl-brand:hover {
    color: #ffffff;
    text-decoration: none;
}

.bl-brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    margin: 0 auto;
}

.bl-toggle {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: #d8d9de;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

.bl-toggle:hover {
    border-color: var(--brand-accent);
    color: #ffffff;
}

.bl-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Sidebar itself. 260px expanded / 76px collapsed (toggled via #appShell.bl-collapsed - see the
   inline script in _Layout.cshtml that applies the saved localStorage state before first paint),
   in-flow flex column, full height of its row. */
.bl-sidebar {
    width: 260px;
    /* A flex item's automatic minimum width defaults to its content's min-content size unless
       overflow is non-visible on both axes - without this, the collapsed 76px below would only
       ever be a suggestion, and the sidebar would silently stay content-width wide regardless. */
    min-width: 0;
    overflow-x: hidden;
    flex-shrink: 0;
    background: var(--bg-navbar);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    box-sizing: border-box;
    transition: width 0.15s ease;
    overflow-y: auto;
}

.bl-collapsed .bl-sidebar {
    width: 76px;
}

.bl-when-collapsed {
    display: none;
}

.bl-collapsed .bl-when-expanded {
    display: none !important;
}

.bl-collapsed .bl-when-collapsed {
    display: flex;
}

.bl-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.bl-collapsed .bl-sidebar-header {
    justify-content: center;
    border-bottom: none;
    padding-bottom: 12px;
}

.bl-search-input {
    width: 100%;
    height: 32px;
    background: var(--surface-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: #ffffff;
    padding: 0 10px 0 32px;
    font-size: 13px;
    box-sizing: border-box;
}

.bl-search {
    margin-bottom: 14px;
}

.bl-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bl-item {
    color: #d8d9de;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
}

.bl-collapsed .bl-item {
    justify-content: center;
    padding: 9px;
}

.bl-item:hover {
    background: var(--surface-input);
    color: #ffffff;
    text-decoration: none;
}

/* My Profile's expandable Friends/Messages/Notifications group - see _Layout.cshtml. Defaults
   open (see the sidebar's own inline script) so they're visible without an extra tap, which
   matters most on mobile where the old account-dropdown location was easy to miss. */
.bl-nav-group-row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.bl-nav-group-main {
    flex: 1;
    min-width: 0;
}

.bl-nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #8b8d97;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.bl-nav-group-toggle:hover {
    background: var(--surface-input);
    color: #ffffff;
}

.bl-nav-group-toggle.bl-collapsed-toggle svg {
    transform: rotate(-90deg);
}

.bl-nav-subgroup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.bl-nav-subgroup.bl-subgroup-hidden {
    display: none;
}

.bl-collapsed .bl-nav-subgroup.bl-subgroup-hidden {
    display: flex;
}

.bl-subitem {
    padding-left: 28px;
    font-size: 13px;
}

.bl-collapsed .bl-subitem {
    padding-left: 9px;
}

.bl-nav-badge {
    margin-left: auto;
    font-size: 11px;
    border-radius: 10px;
    padding: 1px 7px;
}

.bl-nav-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 10px 4px;
}

.bl-nav-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7d7e88;
    padding: 4px 12px;
}

/* The account row at the bottom reuses _LoginPartial.cshtml/_NavSummary.cshtml as-is (same
   dropdown, same Friends/Messages/Notifications badges) - Bootstrap's .navbar-nav defaults to a
   column flex outside of an actual .navbar component, which already reads fine stacked here, so
   only spacing/alignment needed overriding, not the dropdown mechanics themselves. */
.bl-sidebar-account {
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    margin-top: 8px;
}

.bl-sidebar-account .navbar-nav {
    width: 100%;
}

.bl-sidebar-account .nav-link {
    color: #d8d9de;
    padding: 8px 12px;
    border-radius: 6px;
}

.bl-sidebar-account .nav-link:hover {
    background: var(--surface-input);
    color: #ffffff;
}

.bl-main {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.bl-mobile-topbar {
    display: none;
    align-items: center;
    gap: 14px;
    height: 52px;
    padding: 0 16px;
    background: var(--bg-navbar);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.bl-sidebar-overlay {
    display: none;
}

.bl-impersonation-banner {
    background-color: #ADD8E6;
    color: #000;
    padding: 10px 15px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Below the sidebar's own collapse breakpoint, the sidebar becomes an off-canvas drawer (hidden
   by translateX until #appShell.bl-mobile-open) instead of a persistent column, since a fixed
   260px (or even 76px collapsed) rail eats too much of a phone's width to stay always-visible. */
@media (max-width: 991.98px) {
    .bl-mobile-topbar {
        display: flex;
    }

    .bl-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1050;
    }

    .bl-collapsed .bl-sidebar {
        width: 260px;
    }

    .bl-mobile-open .bl-sidebar {
        transform: translateX(0);
    }

    .bl-mobile-open .bl-when-expanded {
        display: flex !important;
    }

    .bl-mobile-open .bl-when-collapsed {
        display: none !important;
    }

    .bl-mobile-open .bl-sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }
}

/* Home page hero (Views/Home/Index.cshtml) - a real car photo (with a dark gradient overlay
   for text legibility, darkest on the left where the text sits) instead of a flat gray box.
   The image itself comes in via inline style (Url.Content, so it resolves correctly whether
   the app sits at the site root or a virtual sub-application like /BuildrList) - this class
   only handles layout/sizing. */
.home-hero {
    background-size: cover;
    background-position: center 42%;
    border-radius: 12px;
    min-height: 340px;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    overflow: hidden;
}

.home-hero-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
}

.home-hero-logo {
    width: 280px;
    max-width: 80%;
    margin-bottom: 16px;
}

.home-hero h1 {
    font-size: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.home-hero .lead {
    font-size: 15px;
    color: #e4e6eb;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Bootstrap cards don't set their own text color, so they inherit this page's white body
   text straight onto Bootstrap's white default background - restyle to match the dark
   theme instead of rendering as unreadable white-on-white. Shadow adds real depth instead of
   the flat same-plane look every other unstyled Bootstrap dark theme has. */
.card {
    background-color: var(--surface-card);
    border-color: var(--bg-navbar);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.card-header {
    background-color: var(--surface-card-alt);
    border-color: var(--bg-navbar);
    color: #ffffff;
}

.card-body {
    color: #ffffff;
}

.card-footer {
    background-color: var(--surface-card-alt);
    border-top-color: var(--bg-navbar);
    color: #ffffff;
}

/* Bootstrap 5's table sets its own color/background/border via CSS variables scoped to
   ".table" (falling back to light-mode values) instead of inheriting from body like Bootstrap
   3 did - override those variables directly per Bootstrap's own documented theming pattern
   rather than fighting the component with descendant selectors. */
.table {
    --bs-table-color: #ffffff;
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-subtle);
    --bs-table-striped-color: #ffffff;
    --bs-table-striped-bg: var(--surface-card-alt);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: var(--surface-hover);
}

/* Bootstrap 5's .list-group-item similarly hardcodes a light-mode text color (~#212529)
   instead of inheriting body's white text - used for Garages/Details.cshtml's Car Details
   list and Notifications/Index.cshtml's notification rows. */
.list-group-item {
    color: #ffffff;
    background-color: transparent;
}

/* Bootstrap 5's .form-control/.form-select likewise pin their own light-mode background/text
   color instead of inheriting from body - this project's forms (Account/Admin/Garages/Manage)
   all rely on the page's dark theme showing through inputs and selects. */
.form-control,
.form-select {
    background-color: var(--surface-input);
    color: #ffffff;
    border-color: var(--bg-navbar);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-input);
    color: #ffffff;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.form-control::placeholder {
    color: #8a8d92;
    opacity: 1;
}

/* bootstrap.css's base .form-control is already dark-themed (white text on var(--surface-input)) in this
   project, but the [readonly]/[disabled] variant only overrides the background to a light
   gray (#eeeeee) without touching that inherited white text color - fix the resulting
   white-on-light-gray by keeping readonly/disabled inputs dark too, just visually distinct.
   The background also needs to be visibly lighter than the page itself and paired with an
   explicit border - an empty disabled input with a background too close to the page's own
   dark background (and Bootstrap's default border, which is barely visible here) reads as no
   box at all rather than an inactive one (see Garages/Create.cshtml's budget/completion-date
   toggles, where the disabled field would otherwise appear to vanish entirely). */
.form-control[readonly],
.form-control[disabled] {
    background-color: var(--surface-card-alt);
    color: #9a9da2;
    opacity: 1;
    border-color: var(--border-subtle);
}

/* Bootstrap's .dropdown-menu is white-on-black by default (unlike .panel/.form-control,
   this project never re-themed it) - used by the Friends/notifications bell dropdowns, so it
   needs the same dark-theme treatment or it clashes badly against the rest of the navbar.
   BS5 uses a flat .dropdown-item structure (no <li> wrapper) instead of BS3/4's
   ".dropdown-menu > li > a". */
.dropdown-menu {
    background-color: var(--bg-page);
    border-color: var(--bg-navbar);
}

.dropdown-menu .dropdown-item {
    color: #ffffff;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--surface-input);
    color: #ffffff;
}

#notifications-bell > .nav-link > .badge,
#messages-dropdown > .nav-link > .badge {
    position: relative;
    top: -8px;
    left: -2px;
    padding: 2px 6px;
    font-size: 10px;
}

/* Unread conversation rows in the messages dropdown/inbox - bolder text + accent left border,
   so unread is visible at a glance, not just as a number. */
.dropdown-item.unread strong,
.list-group-item.unread strong {
    color: #ffffff;
}

.list-group-item.unread {
    border-left: 3px solid var(--brand-accent);
}

/* "Turbo" like icon (see Views/SharedBuilds/SharedBuild.cshtml) - a flat 3-blade pinwheel that
   sits gray until liked, then turns blue, instead of a jarring red heart/badge. */
.turbo-icon {
    color: #72767d;
    transition: color 0.15s ease, transform 0.15s ease;
    vertical-align: middle;
}

.turbo-icon.liked {
    color: #4aa3ff;
}

.turbo-like-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
}

.turbo-like-btn:hover {
    border-color: #4aa3ff;
}

.turbo-like-btn:hover .turbo-icon {
    color: #4aa3ff;
}

.turbo-like-btn:active .turbo-icon {
    transform: scale(0.88) rotate(25deg);
}

.turbo-like-display {
    display: inline-flex;
    align-items: center;
}

.turbo-count {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    color: #ffffff;
    vertical-align: middle;
}

/* Admin dashboard tiles (see Views/Admin/Index.cshtml) - clickable cards grouped by function.
   Groups sit two-to-a-row (col-md-6) since Reporting was added as a fourth group, so tiles are
   sized to fit comfortably at half-container width rather than the full row they used to get. */
.admin-tile-group {
    margin-bottom: 28px;
}

.admin-tile-group-title {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9aa0a6;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}

.admin-tile-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 92px;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    padding: 10px 8px;
    text-align: center;
}

.admin-tile:hover,
.admin-tile:focus {
    background-color: var(--surface-hover);
    border-color: var(--brand-accent);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.admin-tile:active {
    transform: translateY(0);
}

.admin-tile i {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 8px;
}

.admin-tile span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

/* Home page feature grid (Views/Home/Index.cshtml) - a bigger, descriptive cousin of the admin
   tiles above: each card links to the feature's actual page rather than just labeling it. */
.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 32px 0;
}

.home-feature-card {
    display: block;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    padding: 20px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.home-feature-card:hover,
.home-feature-card:focus {
    background-color: var(--surface-hover);
    border-color: var(--brand-accent);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.home-feature-card i {
    font-size: 26px;
    color: var(--brand-accent);
    margin-bottom: 10px;
}

.home-feature-card h3 {
    font-size: 16px;
    margin: 8px 0 6px;
}

.home-feature-card p {
    font-size: 13px;
    color: #b9bbbe;
    margin-bottom: 0;
}

/* Admin User Management card grid (Views/Admin/UserManagement.cshtml) - auto-fill naturally
   gives 3-4 columns on a normal desktop width and collapses to fewer on narrower screens
   without needing manual breakpoints. */
.user-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.user-card {
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--border-subtle);
    flex: 0 0 auto;
}

.user-card-identity {
    min-width: 0;
}

.user-card-username {
    font-weight: 600;
    /* Selectable plain text (not truncated with ellipsis) so the whole username can be
       copy-pasted straight off the card, per the "easier to manage/copy info" request. */
    word-break: break-word;
}

.user-card-email {
    font-size: 12px;
    color: #b9bbbe;
    word-break: break-word;
}

.user-card-badges {
    margin-bottom: 10px;
}

.user-card-badges .badge {
    margin-right: 4px;
}

.user-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 0 0 10px 0;
}

.user-card-stats dt {
    font-size: 11px;
    text-transform: uppercase;
    color: #9aa0a6;
    font-weight: normal;
}

.user-card-stats dd {
    margin: 0;
    font-size: 13px;
}

.user-card-id {
    font-size: 11px;
    color: #9aa0a6;
    margin-bottom: 10px;
    word-break: break-all;
}

.user-card-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
}

/* My Profile page (Views/Manage/Index.cshtml + EditProfile.cshtml) */
.profile-header {
    display: flex;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

.profile-header-main {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 320px;
}

.profile-header-divider {
    width: 1px;
    background-color: var(--border-subtle);
    align-self: stretch;
}

/* Compact "My Garage" strip to the right of the profile info - roughly half the header's width
   (see .profile-header-main's matching flex-basis), image + basic info only. The full cards with
   budget/parts/sharing live on Garages/Index. */
.profile-garage-preview {
    flex: 1 1 320px;
    min-width: 0;
}

.profile-garage-preview h4 {
    margin-top: 0;
}

.garage-preview-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.garage-preview-item {
    display: flex;
    flex-direction: column;
    width: 84px;
    text-align: center;
    color: inherit;
}

.garage-preview-item:hover,
.garage-preview-item:focus {
    color: var(--brand-accent);
    text-decoration: none;
}

.garage-preview-item img,
.garage-preview-noimage {
    width: 84px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--border-subtle);
    border: 1px solid var(--bg-navbar);
}

.garage-preview-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #8a8d92;
}

.garage-preview-item span {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-avatar-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-navbar);
    background-color: var(--border-subtle);
}

.profile-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--brand-accent);
    color: #ffffff;
    border: 2px solid var(--surface-card);
    cursor: pointer;
}

.profile-avatar-edit-btn:hover {
    background-color: #5c6fc7;
}

.profile-header-info h3 {
    margin-top: 0;
    margin-bottom: 4px;
}

.profile-bio {
    margin: 2px 0 8px;
    font-size: 14px;
    color: #dcddde;
    max-width: 480px;
}

.profile-section {
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.profile-section hr {
    border-color: var(--border-subtle);
    margin-top: 10px;
}

/* Cropper.js's crop box/face are square by default - round them to match the circular avatar. */
.profile-crop-container .cropper-view-box,
.profile-crop-container .cropper-face {
    border-radius: 50%;
}

/* Without a height cap, a large/tall photo (a typical phone photo, easily 3000+ px on a side)
   renders at its full scaled height inside the modal body - on anything but a very tall
   viewport that pushes the modal-footer (Save/Cancel) below the visible screen, with no way to
   reach it, since a plain .modal-dialog doesn't scroll its own content by default. Capping the
   crop area's height and letting IT scroll (Cropper.js sizes its canvas to fit the container)
   keeps the header/footer always on screen regardless of the source image's dimensions. */
.profile-crop-container {
    max-height: 55vh;
    overflow: auto;
}

/* Real phone photos carry an EXIF orientation tag (the sensor shoots landscape and flags "rotate
   90 for display"). Chrome and Safari both auto-rotate <img> elements per that tag by default
   (image-orientation: from-image) - but Cropper.js ALSO reads and corrects for EXIF orientation
   itself (checkOrientation: true, its own default). With both active, Cropper ends up correcting
   an image the browser already corrected, so its internal width/height math is measuring against
   the wrong picture entirely - on real, EXIF-tagged photos this is a well-documented way for
   Cropper's crop box to simply never render (while a synthetic canvas image, which carries no
   EXIF data at all, never triggers this and looks fine in testing). Disabling the browser's own
   auto-rotation here makes Cropper the single source of truth for orientation, matching what its
   checkOrientation option already assumes. */
#profilePicCropImage,
#carImageCropImage {
    image-orientation: none;
}

/* Bootstrap's .modal-content is white-on-white here for the same reason .panel/.dropdown-menu
   were: it never sets its own text color, so it inherits this page's white body text straight
   onto its white default background (used by the profile picture crop modal). */
.modal-content {
    background-color: var(--surface-card);
    color: #ffffff;
    border-color: var(--bg-navbar);
}

.modal-header,
.modal-footer {
    border-color: var(--border-subtle);
}

/* BS5's .btn-close is a background-image X icon (dark by default, no more text glyph to
   recolor) - Views/Manage/Index.cshtml uses the companion .btn-close-white class for visibility
   against this dark modal header, matching Bootstrap's own convention for dark surfaces. */

/* Friends grid (Friends/Index.cshtml, Friends/Profile.cshtml public builds) and the compact
   avatar strip on the main profile page (Manage/Index.cshtml). */
.friend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-height: 600px;
    overflow-y: auto;
    padding-bottom: 4px;
}

.friend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 16px 14px;
    text-decoration: none;
    color: #ffffff;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.friend-card:hover,
.friend-card:focus {
    border-color: var(--brand-accent);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.friend-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    background-color: var(--border-subtle);
}

/* Online activity indicator (ActivityStatusHelper.cs) - a plain box-shadow ring rather than a
   border, so it never changes the avatar's box size/layout regardless of which avatar class this
   is combined with, and it follows whatever border-radius the avatar already has. */
.avatar-online-ring {
    box-shadow: 0 0 0 3px #22c55e;
}

.friend-card-name {
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    word-break: break-word;
}

.friend-card-stats {
    margin-top: 6px;
    font-size: 12px;
    color: #b9bbbe;
    display: flex;
    gap: 10px;
}

/* Last login date - deliberately understated (small, translucent), never framed as a live
   "online now" presence indicator since it's just their last login timestamp. */
.friend-card-lastactive {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 2px;
}

/* Short bio preview (Views/Friends/Index.cshtml) - clamped to 2 lines so one long bio can't
   blow out a card's height relative to its neighbors in the same row. */
.friend-card-bio {
    font-size: 12px;
    color: #b9bbbe;
    text-align: center;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.friend-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.friend-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 70px;
    text-decoration: none;
    color: #ffffff;
}

.friend-strip-item:hover,
.friend-strip-item:focus {
    color: var(--brand-accent);
    text-decoration: none;
}

.friend-strip-item img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--border-subtle);
    margin-bottom: 4px;
}

.friend-strip-item span {
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

/* Friends/Profile.cshtml metrics row */
.friend-metrics-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.friend-metric {
    text-align: center;
}

.friend-metric-value {
    font-size: 24px;
    font-weight: bold;
}

.friend-metric-label {
    font-size: 12px;
    color: #b9bbbe;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Messages/Conversation.cshtml thread */
.message-thread {
    max-height: 500px;
    overflow-y: auto;
    padding: 10px;
    background-color: var(--bg-page);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
}

.message-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 8px;
}

.message-bubble-row.mine {
    justify-content: flex-end;
}

.message-bubble-row.theirs {
    justify-content: flex-start;
}

/* Wraps the bubble plus its reaction row/picker so the timestamp can sit beside the whole
   thing as a flex sibling, rather than wrapping inside the bubble and forcing short messages
   into a needlessly tall, multi-line box. */
.message-bubble-stack {
    display: inline-flex;
    flex-direction: column;
    max-width: 70%;
    min-width: 0;
}

.message-bubble {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    background-color: var(--surface-card);
    word-break: break-word;
}

.message-bubble-row.mine .message-bubble {
    background-color: var(--brand-accent);
    align-self: flex-end;
}

.message-bubble-row.theirs .message-bubble {
    align-self: flex-start;
}

.message-bubble-row.mine .message-reaction-row,
.message-bubble-row.mine .message-reaction-picker {
    align-self: flex-end;
}

.message-bubble-row.theirs .message-reaction-row,
.message-bubble-row.theirs .message-reaction-picker {
    align-self: flex-start;
}

.message-bubble-time-side {
    font-size: 10px;
    color: #8a8d92;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-bottom: 4px;
}

/* Two-column inbox shell shared by Messages/Index.cshtml and Messages/Conversation.cshtml -
   conversation list on the left (via _ConversationList.cshtml), the active thread or an
   empty-state prompt in the main pane to the right. Stacks on narrow screens since there's no
   room for both columns side by side there. */
.messages-shell {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.messages-sidebar {
    flex: 0 0 300px;
    background-color: var(--bg-page);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    overflow: hidden;
}

.messages-sidebar-header {
    padding: 10px;
    border-bottom: 1px solid var(--bg-navbar);
}

.messages-sidebar .list-group {
    max-height: 600px;
    overflow-y: auto;
}

.messages-sidebar-item {
    display: flex;
    align-items: center;
    background-color: var(--bg-page);
    border-color: var(--bg-navbar);
    color: #ffffff;
    gap: 10px;
}

.messages-sidebar-item:hover,
.messages-sidebar-item:focus {
    background-color: var(--surface-card-alt);
    color: #ffffff;
    text-decoration: none;
}

.messages-sidebar-item.active {
    background-color: var(--surface-input);
}

.messages-sidebar-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.messages-sidebar-item-body {
    min-width: 0;
    flex: 1;
}

.messages-sidebar-preview {
    display: block;
    font-size: 12px;
    color: #b9bbbe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-main {
    flex: 1;
    min-width: 0;
}

@media (max-width: 767px) {
    .messages-shell {
        flex-direction: column;
    }

    .messages-sidebar {
        flex-basis: auto;
        width: 100%;
    }
}

/* Message reactions (Messages/Conversation.cshtml) - a small fixed emoji set, one active
   reaction per user per message (see MessagesController.ToggleReaction / MessageReactions). */
.message-reaction-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.message-reaction-pill {
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
    cursor: pointer;
    color: #ffffff;
}

.message-reaction-pill.mine {
    border-color: var(--brand-accent);
    background-color: rgba(114, 137, 218, 0.25);
}

/* Row holding any existing reaction pills plus the small "add reaction" trigger - always
   visible (not hover-revealed), so it doesn't pop in/out as you read down a conversation. */
.message-reaction-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.message-reaction-trigger {
    background: none;
    border: none;
    color: #8a8d92;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

.message-reaction-trigger:hover {
    color: #ffffff;
}

/* The actual emoji picker only opens on click (see toggleReactionPicker in
   Conversation.cshtml), not on hover - closed by default, shown via the .open class. */
.message-reaction-picker {
    display: none;
    gap: 4px;
    margin-top: 4px;
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px 6px;
    width: fit-content;
}

.message-reaction-picker.open {
    display: flex;
}

.message-reaction-picker button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0 3px;
    opacity: 0.7;
}

.message-reaction-picker button:hover {
    opacity: 1;
}

/* Forum post reactions (Views/Forum/Thread.cshtml) - same shape/behavior as the message
   reaction rules above (ForumController.ToggleReaction is a direct copy of
   MessagesController.ToggleReaction against a separate ForumPostReactions table), duplicated
   under new selectors so the DM reaction rules above are never touched by forum changes. */
.forum-reaction-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.forum-reaction-pill {
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
    cursor: pointer;
    color: #ffffff;
}

.forum-reaction-pill.mine {
    border-color: var(--brand-accent);
    background-color: rgba(114, 137, 218, 0.25);
}

.forum-reaction-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.forum-reaction-trigger {
    background: none;
    border: none;
    color: #8a8d92;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

.forum-reaction-trigger:hover {
    color: #ffffff;
}

.forum-reaction-picker {
    display: none;
    gap: 4px;
    margin-top: 4px;
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 4px 6px;
    width: fit-content;
}

.forum-reaction-picker.open {
    display: flex;
}

.forum-reaction-picker button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 0 3px;
    opacity: 0.7;
}

.forum-reaction-picker button:hover {
    opacity: 1;
}

/* @-mention autocomplete dropdown (Views/Forum/Thread.cshtml, CreateThread.cshtml,
   EditPost.cshtml) - a simple absolutely-positioned list under the textarea. */
.forum-mention-dropdown {
    position: relative;
    z-index: 20;
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    max-width: 300px;
    margin-top: 2px;
}

.forum-mention-item {
    padding: 6px 10px;
    cursor: pointer;
    color: #ffffff;
}

.forum-mention-item:hover {
    background-color: var(--surface-input);
}

/* Quoted post (Views/Forum/Thread.cshtml's "Reply with quote" button, rendered server-side by
   ForumHelper.RenderPostBody) - its own bordered container ahead of the replying user's own
   text, which follows immediately after in the normal post-body flow below it. */
.forum-quote {
    border-left: 3px solid var(--border-subtle);
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.forum-quote-author {
    font-size: 12px;
    color: #8a8d92;
    margin-bottom: 4px;
}

.forum-quote-body {
    font-size: 0.95em;
    color: #c7c9cc;
    white-space: pre-wrap;
}

/* "Show original" link inside a .forum-quote-author line (ForumHelper.RenderPostBody) - scrolls
   to and highlights the quoted post in place via scrollToPost() in Thread.cshtml, no navigation. */
.forum-quote-jump {
    font-size: 11px;
    margin-left: 6px;
}

/* Brief highlight applied by scrollToPost() so the post that was scrolled to is easy to spot
   even after the smooth-scroll animation settles - removed again 2s later by that same function. */
.forum-post-highlight {
    outline: 2px solid var(--brand-accent);
}

/* Hover preview card (Scripts/profile-hover.js + Views/Friends/_ProfileHoverCard.cshtml) - a
   single shared floating element, positioned via JS near whichever .profile-hover-trigger is
   currently hovered. Hidden by default; JS toggles .open after the hover delay elapses. */
.profile-hover-trigger {
    cursor: pointer;
}

.profile-hover-card {
    position: fixed;
    z-index: 2000;
    display: none;
    width: 260px;
    background-color: var(--bg-page);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.profile-hover-card.open {
    display: block;
}

.profile-hover-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.profile-hover-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Pricing page (Views/Home/Pricing.cshtml) - vertical stacked cards, one per tier. */
.pricing-header {
    text-align: center;
    margin-bottom: 32px;
}

.pricing-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 230px;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 20px 16px;
    color: #ffffff;
}

/* The recommended plan gets a visibly bigger card (not just a colored border) so it reads as
   the default choice at a glance, not just one option among equals. */
.pricing-card-highlighted {
    width: 280px;
    padding: 24px 20px;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 1px var(--brand-accent);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--brand-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

.pricing-card-name {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.pricing-card-price {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-top: 4px;
}

.pricing-card-tagline {
    font-size: 13px;
    color: #9aa0a6;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 18px;
    min-height: 34px;
}

.pricing-feature-list {
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0;
    flex: 1;
}

.pricing-feature-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}

.pricing-feature-list li:last-child {
    border-bottom: none;
}

.pricing-feature-label {
    color: #d5d7db;
}

.pricing-feature-value {
    font-weight: 600;
    white-space: nowrap;
}

.pricing-feature-yes {
    color: #43b581;
    font-size: 16px;
}

.pricing-feature-no {
    color: #6a6d72;
}

.pricing-feature-text {
    color: #ffffff;
}

.pricing-cta {
    display: block;
    text-align: center;
    width: 100%;
}

/* Pricing interval toggle: each card holds one .pricing-opt per interval; the grid's
   data-interval (set by Scripts/pricing.js, default Monthly) decides which one shows. */
.pricing-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.pricing-test-note {
    text-align: center;
    font-size: 13px;
    margin-bottom: 16px;
}

.pricing-grid .pricing-opt { display: none; }
.pricing-grid:not([data-interval]) .pricing-opt[data-interval="Monthly"],
.pricing-grid[data-interval="Monthly"] .pricing-opt[data-interval="Monthly"],
.pricing-grid[data-interval="Annual"] .pricing-opt[data-interval="Annual"],
.pricing-grid[data-interval="Lifetime"] .pricing-opt[data-interval="Lifetime"] {
    display: block;
}

.pricing-card-per {
    font-size: 14px;
    font-weight: normal;
    color: #9aa0a6;
}

.pricing-card-sub {
    font-size: 13px;
    color: #9aa0a6;
    text-align: center;
    min-height: 20px;
}

.pricing-card-save {
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    color: #43b581;
    border: 1px solid #43b581;
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 6px;
}

.pricing-opt-unavailable {
    font-size: 14px;
    color: #9aa0a6;
    text-align: center;
    padding: 10px 0 6px;
}

/* Featured Builds carousel (Views/Shared/_FeaturedCarousel.cshtml) - shown on the Home page and
   its own Featured Builds tab. Cards are absolutely positioned and repositioned via inline style
   (transform/opacity) in JS on rotation, so the CSS transition below is what makes that smooth -
   the "current" card ends up centered/full-size, neighbors shrink and dim to the sides. */
.featured-carousel {
    margin: 32px 0;
}

.featured-carousel-empty {
    text-align: center;
    padding: 24px;
}

.featured-carousel-title {
    margin-bottom: 16px;
}

.featured-track {
    position: relative;
    height: 290px;
    overflow: hidden;
}

.featured-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}

.featured-card-image-wrap {
    height: 150px;
    background-color: var(--bg-navbar);
}

.featured-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-card-body {
    padding: 10px 14px;
    color: #ffffff;
}

.featured-card-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 4px;
}

.featured-card-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d5d7db;
    text-decoration: none;
    margin-bottom: 6px;
}

.featured-card-owner:hover {
    color: #ffffff;
    text-decoration: underline;
}

.featured-card-owner-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-card-stats {
    display: flex;
    gap: 16px;
    color: #9aa0a6;
    font-size: 13px;
    margin-bottom: 6px;
}

.featured-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.featured-dots {
    display: flex;
    gap: 6px;
}

.featured-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6a6d72;
    cursor: pointer;
    display: inline-block;
}

.featured-dot.active {
    background-color: var(--brand-accent);
}

@media (max-width: 480px) {
    .featured-track {
        height: 330px;
    }

    .featured-card {
        width: 82vw;
    }
}

/* Featured Builds page (Views/SharedBuilds/Featured.cshtml) - stats bar and browsable gallery
   below the carousel. */
.featured-stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    padding: 14px 20px;
    color: #d5d7db;
}

.featured-stats-bar strong {
    color: #ffffff;
}

/* Car Details page summary card (Garages/Details.cshtml) - same figures the old flat
   .featured-stats-bar showed, just laid out as a card with each stat as its own column instead
   of one long row, since a plain full-width bar didn't read as clearly at a glance. */
.car-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.car-summary-item {
    flex: 1 1 160px;
    min-width: 150px;
}

.car-summary-figure {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.car-summary-label {
    color: #d5d7db;
    font-size: 13px;
    margin-bottom: 8px;
}

/* Car photo gallery (Garages/Details.cshtml) - up to 5 thumbnails plus an "Add Photo" tile, each
   thumbnail with a hover-revealed set-cover/delete overlay - same "controls appear on hover"
   language as .profile-avatar-edit-btn, just per-tile instead of a single fixed button. */
/* The car's current cover photo (Garage.CarImagePath), shown large above the Car Photos card on
   Garages/Details.cshtml - the gallery grid below only shows equally-sized thumbnails, so without
   this there was no prominent "this is the cover" preview, just a small badge on one tile. */
.car-cover-photo {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 14px;
}

/* Clickable column headers on the Mod List table (Views/SharedBuilds/SharedBuild.cshtml,
   sortModList) - a plain arrow-less header until sorted, then an arrow shows direction so it
   doesn't fight the table-striped/hover Bootstrap styling already on that table. */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-th:hover {
    color: var(--brand-accent-hover);
}

.sortable-th.sort-asc::after {
    content: " \25B2";
    color: var(--brand-accent);
}

.sortable-th.sort-desc::after {
    content: " \25BC";
    color: var(--brand-accent);
}

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

.car-gallery-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--border-subtle);
}

/* Marks whichever thumbnail is currently shown as the main photo on the shared/public build page
   (see setMainCarPhoto in Views/SharedBuilds/SharedBuild.cshtml) - the owner's own gallery grid on
   Garages/Details.cshtml has no "main photo" concept, so this class is never applied there. */
.car-gallery-tile.active-thumb {
    outline: 2px solid var(--brand-accent);
    outline-offset: -2px;
}

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

.car-gallery-cover-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
}

/* My Garage card's photo-corner maintenance warning (Views/Garages/Index.cshtml,
   GarageCardViewModel.MaintenanceAlertStatus) - a small dark circle so the icon stays readable
   against any photo, colored per status via an inline style (overdue red vs. due-soon orange). */
.garage-card-photo-wrap {
    position: relative;
}

/* Wraps one badge per active alert (overdue, due-soon) so both can show at once, stacked -
   individual badges no longer position themselves, the wrapper does. */
.garage-card-maintenance-badges {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.garage-card-maintenance-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.car-gallery-tile-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.car-gallery-tile:hover .car-gallery-tile-actions {
    opacity: 1;
}

.car-gallery-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    border: none;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-gallery-action-btn:hover {
    background-color: var(--brand-accent);
}

.car-gallery-add-tile {
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.car-gallery-add-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed var(--border-subtle);
    border-radius: 6px;
    color: #9a9ea6;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
}

.car-gallery-add-label:hover {
    border-color: var(--brand-accent);
    color: #ffffff;
}

.car-gallery-add-label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scheduled-maintenance reminder banner (Garages/Details.cshtml, between the stats bar and the
   tabs) - deliberately subtle (muted tint, thin border) rather than a loud Bootstrap alert, since
   it can show on every visit to the car's page for as long as something stays due. */
.maintenance-reminder-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.maintenance-reminder-banner.overdue {
    background-color: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #f2a3ab;
}

.maintenance-reminder-banner.due-soon {
    background-color: rgba(255, 159, 28, 0.12);
    border: 1px solid rgba(255, 159, 28, 0.35);
    color: #f5c377;
}

.maintenance-reminder-banner i {
    flex-shrink: 0;
}

.maintenance-reminder-banner span {
    flex: 1;
}

.maintenance-reminder-banner strong {
    color: inherit;
}

.maintenance-reminder-link {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
    flex-shrink: 0;
}

.maintenance-reminder-link:hover {
    color: inherit;
    opacity: 0.8;
}

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

.featured-gallery-card {
    display: block;
    background-color: var(--surface-card);
    border: 1px solid var(--bg-navbar);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.featured-gallery-card:hover,
.featured-gallery-card:focus {
    color: #ffffff;
    text-decoration: none;
    border-color: var(--brand-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.featured-gallery-image-wrap {
    height: 130px;
    background-color: var(--bg-navbar);
}

/* Activity Feed tiles (Views/Feed/Index.cshtml) - wider min column than the Featured Builds
   gallery above since a feed card carries a comment thread, not just a car preview.
   align-items: start keeps a short card from stretching to match a taller neighbor in the same row. */
.feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: start;
}

.featured-gallery-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-gallery-body {
    padding: 10px 12px;
}

.featured-gallery-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.featured-gallery-owner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #b9bbbe;
    margin-bottom: 8px;
}

.featured-gallery-owner img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-gallery-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #9aa0a6;
}

.featured-gallery-date {
    margin-left: auto;
}

/* Bootstrap ships text-bg-primary/success/info/warning/danger/secondary but no purple - used for
   the "Scheduled" status badge on banners and global notifications in Admin > Broadcast, distinct
   from Active (green), Expired (orange), Retired/Revoked (grey). */
.badge-purple {
    background-color: #7c4dbb;
}

/* Site-wide banners (Views/Shared/_SiteBanner.cshtml) - admin-authored via Admin > Community &
   Sharing > Broadcast, rendered at the very top of every page for every visitor. Up to 3 stack
   vertically in Priority order (1 on top, 3 on bottom - see AdminController.CreateBanner). Colors
   come from each banner record itself (inline style); size only controls padding/font-size here.
   A normal-flow sticky element (a #appShell column-flex child above the sidebar/content row) -
   with the old fixed top navbar gone, there's no other fixed element it needs to out-rank or
   stay measured against, so this no longer needs the height-measuring JS the old layout did. */
.site-banner-stack {
    position: sticky;
    top: 0;
    z-index: 1045; /* above .bl-mobile-topbar's 1030 and the mobile drawer overlay's 1040 */
    display: flex;
    flex-direction: column;
}

.site-banner {
    position: relative;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.site-banner-small {
    padding: 6px 36px 6px 12px;
    font-size: 12px;
}

.site-banner-normal {
    padding: 12px 40px 12px 16px;
    font-size: 14px;
}

.site-banner-large {
    padding: 20px 48px 20px 20px;
    font-size: 18px;
}

.site-banner-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}

.site-banner-close:hover {
    opacity: 1;
}

/* ===== Notifications page (Views/Notifications/Index.cshtml) =====
   Avatar of whoever did the thing with a small colored type badge, bold name, optional
   comment/reply preview, relative time, car thumbnail, and an unread dot. The whole row links
   to the thing it's about (NotificationsController.Open). */
.notif-page { max-width: 760px; }
.notif-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.notif-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.notif-filters { display: flex; gap: 6px; margin: 16px 0 8px; }
.notif-filter {
    background: transparent; color: #c9d1dc; border: 1px solid var(--border-subtle);
    border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 600;
}
.notif-filter:hover { background: var(--surface-hover); }
.notif-filter.active { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.notif-section-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8b95a7; margin: 18px 0 8px; }
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-row {
    position: relative; display: flex; align-items: center; gap: 8px;
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px;
    transition: background-color .15s ease, border-color .15s ease;
}
.notif-row:hover { background: var(--surface-hover); }
.notif-row.unread { background: var(--surface-card-alt); border-color: rgba(59, 130, 246, .45); }
.notif-row.unread:hover { background: var(--surface-hover); }
.notif-select-checkbox { margin-left: 12px; flex-shrink: 0; }
.notif-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 12px 14px; color: inherit; text-decoration: none; }
.notif-main:hover { color: inherit; }
.notif-avatar { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.notif-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface-input); }
.notif-icon-circle { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.notif-badge {
    position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff;
    border: 2px solid var(--surface-card);
}
.notif-row.unread .notif-badge { border-color: var(--surface-card-alt); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notif-text { line-height: 1.35; overflow-wrap: anywhere; }
.notif-text strong { color: #fff; }
.notif-preview { color: #aeb7c4; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-meta { font-size: 12px; color: #8b95a7; }
.notif-row.unread .notif-meta { color: var(--brand-accent-hover); font-weight: 600; }
.notif-thumb { width: 52px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); flex-shrink: 0; }
.notif-delete { margin: 0 8px 0 0; opacity: 0; transition: opacity .15s ease; }
.notif-row:hover .notif-delete, .notif-delete:focus-within { opacity: 1; }
.notif-delete .btn { color: #8b95a7; border: none; }
.notif-delete .btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.notif-request-actions { display: flex; gap: 6px; padding-right: 12px; flex-shrink: 0; }
.notif-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--border-subtle); border-radius: 12px; }
.notif-empty i { font-size: 36px; color: #8b95a7; margin-bottom: 10px; }
.notif-empty p { margin: 4px 0; }
/* Touch screens have no hover - keep delete reachable. */
@media (hover: none) { .notif-delete { opacity: 1; } }
@media (max-width: 576px) {
    .notif-thumb { display: none; }
    .notif-main { gap: 10px; padding: 10px; }
    .notif-request-actions { flex-direction: column; }
}

/* Type colors (NotificationsController.Present sets the tone). */
.tone-follow { background: #3b82f6; }
.tone-like { background: #e0245e; }
.tone-friend { background: #8b5cf6; }
.tone-accepted { background: #16a34a; }
.tone-forum { background: #0d9488; }
.tone-mention { background: #d97706; }
.tone-comment { background: #2563eb; }
.tone-support { background: #ea580c; }
.tone-transfer { background: #ca8a04; }
.tone-announce { background: #7c3aed; }
.tone-default { background: #4b5563; }

/* Feed/Post: flash the comment a notification pointed at. */
.feed-comment { border-radius: 6px; transition: background-color 1s ease; }
.notif-target-flash { background-color: rgba(59, 130, 246, .25); }

/* ===== Changelog (Views/Home/Changelog.cshtml) ===== */
.changelog-page { max-width: 760px; }
.changelog .accordion-item { background: var(--surface-card); border-color: var(--border-subtle); color: inherit; }
.changelog .accordion-button { background: var(--surface-card); color: #fff; font-weight: 600; gap: 10px; box-shadow: none; }
.changelog .accordion-button:not(.collapsed) { background: var(--surface-card-alt); color: #fff; }
.changelog .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.changelog-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.changelog-toolbar #changelogSearch { flex: 1 1 260px; min-width: 0; }
.changelog-toolbar #changelogJump { flex: 0 1 220px; }
.changelog .accordion-item[hidden] { display: none; }
.changelog-title-wrap { display: flex; flex-direction: column; min-width: 0; }
.changelog-brief { display: none; font-weight: 400; font-size: 13px; color: #aeb7c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.changelog .accordion-button.collapsed .changelog-brief { display: block; }
.changelog .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .35); }
.changelog-latest { font-size: 11px; }
.changelog-summary { color: #c9d1dc; margin-bottom: 12px; white-space: pre-line; }
.changelog-items li > span:last-child { white-space: pre-line; } /* keeps the line breaks typed in Admin > Changelog */
.changelog-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.changelog-items li { display: flex; gap: 10px; align-items: baseline; line-height: 1.45; }
.changelog-kind {
    flex-shrink: 0; min-width: 88px; text-align: center; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff;
}
/* Tag colours come from Admin > Dropdown Management > Changelog tags (inline style on each .changelog-kind). */
.changelog-highlights { border-left: 4px solid #e5b93a; background: rgba(229, 185, 58, .08); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.changelog-highlights-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e5b93a; margin-bottom: 8px; }
.changelog-items-highlight li { font-size: 1.08rem; font-weight: 600; }
.changelog-star-on { color: #e5b93a !important; }

/* ===== Site footer (Views/Shared/_Layout.cshtml) ===== */
.site-footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px;
    margin-top: 40px; padding: 18px 4px 24px; border-top: 1px solid var(--border-subtle);
    font-size: 14px; color: #8b95a7;
}
.site-footer-brand { display: inline-flex; align-items: center; gap: 8px; color: #e4e6eb; text-decoration: none; font-weight: 600; }
.site-footer-brand:hover { color: #fff; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer-links a {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
    color: #aeb7c4; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.site-footer-links a i { font-size: 13px; opacity: .85; }
.site-footer-links a:hover, .site-footer-links a:focus-visible { background: var(--surface-hover); color: #fff; }
.site-footer-copy { display: inline-flex; align-items: center; gap: 10px; }
.site-footer-version {
    font-size: 12px; font-weight: 600; color: var(--brand-accent-hover); text-decoration: none;
    padding: 2px 8px; border: 1px solid rgba(59, 130, 246, .4); border-radius: 999px;
}
.site-footer-version:hover { background: rgba(59, 130, 246, .15); color: #fff; }
@media (max-width: 768px) {
    .site-footer { flex-direction: column; justify-content: center; text-align: center; }
    .site-footer-links { justify-content: center; }
}

/* ===== Admin sidebar section + "Customize admin links" dialog ===== */
.bl-admin-label { display: flex; align-items: center; justify-content: space-between; }
.bl-admin-customize {
    border: none; background: transparent; color: #7d7e88; padding: 2px 6px; border-radius: 6px; line-height: 1; font-size: 12px;
}
.bl-admin-customize:hover, .bl-admin-customize:focus-visible { color: #fff; background: var(--surface-hover); }
.admin-nav-sort { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-nav-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    background: var(--surface-card-alt); border: 1px solid var(--border-subtle); cursor: grab;
}
.admin-nav-row.dragging { opacity: .45; border-style: dashed; }
.admin-nav-grip { color: #7d7e88; }
.admin-nav-label { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; cursor: pointer; }
.admin-nav-label .form-check-input { margin: 0; }
.admin-nav-move { display: flex; gap: 2px; }
.admin-nav-move .btn { color: #aeb7c4; padding: 2px 8px; border: none; }
.admin-nav-move .btn:hover, .admin-nav-move .btn:focus-visible { color: #fff; background: var(--surface-hover); }

/* ===== Admin > Changelog ===== */
.admin-changelog-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-changelog-row[hidden] { display: none; }
.admin-changelog-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--border-subtle);
}
.admin-changelog-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.changelog-edit-items { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.changelog-edit-row { display: flex; gap: 8px; align-items: flex-start; }
.changelog-edit-row textarea { flex: 1; min-width: 0; resize: vertical; line-height: 1.4; }
.changelog-edit-row select { width: 130px; flex-shrink: 0; }
.changelog-edit-row input[type="text"] { flex: 1; min-width: 0; }
.changelog-edit-buttons { display: flex; gap: 2px; flex-shrink: 0; }
.changelog-edit-buttons .btn { color: #aeb7c4; border: none; padding: 2px 8px; }
.changelog-edit-buttons .btn:hover { color: #fff; background: var(--surface-hover); }

/* Founder badge - founder's lifetime purchasers (BillingService.IsFounder). Copper, so it reads
   apart from the blue verified and gold staff checkmarks. */
.founder-badge {
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
    padding: 2px 8px; border-radius: 999px; margin-left: 4px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1.4;
    color: #fff7ee; background: linear-gradient(135deg, #c8743a, #8f4a1d);
    border: 1px solid rgba(255, 214, 170, .35); white-space: nowrap;
}
.founder-badge i { font-size: 11px; }
.founder-badge-sm { font-size: 10px; padding: 1px 6px; }
.founder-badge-sm i { font-size: 9px; }

/* Profile header buttons (Blocked people, Developer): coloured icons on a normal-contrast outline button, so they don't read as disabled. */
.profile-icon-green { color: #22c55e; }
.profile-icon-red { color: #ef4444; }

/* Reviewer type-ahead (Views/Shared/_AgentPicker.cshtml). The site theme makes .list-group-item transparent, so the floating list needs a solid background. */
.agent-picker { position: relative; min-width: 190px; }
.agent-results { position: absolute; z-index: 30; left: 0; right: 0; max-height: 240px; overflow: auto; background-color: var(--bg-page); border: 1px solid var(--bg-navbar); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.agent-results .list-group-item { background-color: var(--bg-page); }
.agent-results .list-group-item:hover, .agent-results .list-group-item:focus { background-color: var(--surface-input); }