/* ==========================================================================
   EXCLUSIVE UNLOCKS — SHARED DESIGN SYSTEM
   Used by index.php, outfits.php and discord.php.
   Page-specific overrides live in a small <style> block on each page.
   ========================================================================== */
/* ==========================================================================
   RESET, VARIABLE SYSTEM & THEMING
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}

:root {
    --font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --gold: #F5C453;
    --gold-light: #FFF0CE;
    --gold-dim: #A67C1E;
    --gold-glow: rgba(245, 196, 83, 0.15);
    --gold-glow-intense: rgba(245, 196, 83, 0.35);
    
    --bg-deep: #070709;
    --bg-card: #111115;
    --bg-layer: #181822;
    --bg-layer-light: #242432;
    
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0AA;
    --text-muted: #52525B;
    
    --border-subtle: rgba(245, 196, 83, 0.06);
    --border-ui: rgba(245, 196, 83, 0.18);
    --border-bright: rgba(245, 196, 83, 0.4);
    
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    
    --shadow-main: 0 10px 40px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 25px var(--gold-glow);
    --ease-fluid: cubic-bezier(0.25, 1, 0.5, 1);
}

html { scroll-behavior: smooth; }

::selection { background: rgba(245, 196, 83, 0.3); color: #FFFFFF; }

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   AMBIENT BACKGROUND GLOW
   Heavily feathered golden circles in several gold shades, inspired by
   cherax.menu landing. Each circle breathes slowly, and assets/site-bg.js
   drives --scroll (0 at top of page, 1 at bottom) so circles cross-fade
   as you scroll. Shades used: champagne #FFF0CE, gold #F5C453,
   amber #E8A44A, deep gold #A67C1E.
   ========================================================================== */
:root { --scroll: 0; }

@keyframes bgBreathe {
    0%, 100% { scale: 1; }
    50% { scale: 1.07; }
}

/* Soft ambient wash across the whole viewport — always on. The first layer
   is a subtle SVG film grain that keeps the flat black from looking empty. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 60% 48% at 50% -10%, rgba(245, 196, 83, 0.13), transparent 72%),
        radial-gradient(ellipse 45% 38% at 90% 110%, rgba(166, 124, 30, 0.08), transparent 68%);
    background-repeat: repeat, no-repeat, no-repeat;
}

/* Circle 1 — big champagne/gold ring, top center. Strongest at the top
   of the page, fades out as you scroll down. */
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    width: 150vmin;
    height: 150vmin;
    left: 50%;
    top: -75vmin;
    margin-left: -75vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 30%,
        rgba(255, 240, 206, 0.02) 46%,
        rgba(245, 196, 83, 0.05) 57%,
        rgba(245, 196, 83, 0.09) 64%,
        rgba(245, 196, 83, 0.05) 71%,
        rgba(255, 240, 206, 0.02) 82%,
        transparent 96%);
    filter: blur(32px);
    opacity: calc(1 - var(--scroll) * 0.85);
    transition: opacity 0.4s ease-out;
    animation: bgBreathe 11s ease-in-out infinite;
}

/* Circle 2 — deep-gold ring drifting off the left edge. Faint at the top,
   fades in as you scroll down. */
html::before {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    width: 95vmin;
    height: 95vmin;
    left: -32vmin;
    top: 28%;
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 28%,
        rgba(166, 124, 30, 0.03) 44%,
        rgba(166, 124, 30, 0.08) 56%,
        rgba(245, 196, 83, 0.05) 67%,
        rgba(166, 124, 30, 0.02) 80%,
        transparent 94%);
    filter: blur(26px);
    opacity: calc(0.15 + var(--scroll) * 0.85);
    transition: opacity 0.4s ease-out;
    animation: bgBreathe 15s ease-in-out 2s infinite;
}

/* Circle 3 — small filled amber orb, bottom right. Gently brightens with
   scroll and breathes on its own rhythm. */
html::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    width: 70vmin;
    height: 70vmin;
    right: -22vmin;
    bottom: -24vmin;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(232, 164, 74, 0.07),
        rgba(232, 164, 74, 0.05) 45%,
        transparent 72%);
    opacity: calc(0.35 + var(--scroll) * 0.55);
    transition: opacity 0.4s ease-out;
    animation: bgBreathe 13s ease-in-out 5s infinite;
}

/* The slow breathing of the circles is intentionally kept even when the OS
   asks for reduced motion — it is a core part of the site's look and is far
   below the threshold that causes discomfort (an 11-15s, 7% scale drift). */

/* Pointer-reactive hex grid (assets/site-bg.js). Sits above the ambient
   glows but below every card, so lit hexes only show in the background gaps
   and never on top of the car tiles. Draws nothing while the pointer is idle. */
.hex-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================================================
   CREATIVE KEYFRAMES & VISUAL ANIMATIONS
   ========================================================================== */
@keyframes sectionEntrance {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px var(--gold-glow); }
    50% { box-shadow: 0 0 25px var(--gold-glow-intense); }
}

@keyframes badgeScale {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    50% { transform: scale(1.1) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ==========================================================================
   HEADER SECTION
   ========================================================================== */
.site-header {
    padding: 4rem 1.5rem 2.5rem;
    text-align: center;
    position: relative;
    background: radial-gradient(circle at top, rgba(245,196,83,0.05) 0%, transparent 70%);
}

.site-header h1 {
    font-size: clamp(2rem, 6.5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #FFFFFF 20%, var(--gold-light) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

.header-sub {
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 4px;
    margin-top: 8px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
}

.gold-line {
    width: 45px;
    height: 3px;
    background: var(--gold);
    margin: 1.5rem auto;
    border-radius: 20px;
    box-shadow: 0 0 12px var(--gold);
}

.header-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.stat {
    background: var(--bg-card);
    padding: 0.6rem 1.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-main);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.stat:hover {
    border-color: var(--border-ui);
    transform: translateY(-2px);
}

.stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 2px;
}

/* ==========================================================================
   STILL GLUING STICKY NAVIGATION TOOLBAR
   ========================================================================== */
.toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 7, 9, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.3s;
}

.search-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.search-wrap input {
    width: 100%;
    background: var(--bg-layer);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 16px 12px 42px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.3s var(--ease-fluid);
}

.search-wrap input:focus {
    border-color: var(--border-bright);
    box-shadow: var(--shadow-glow);
    background: var(--bg-layer-light);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 16px;
}

.toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid var(--border-subtle);
}

.nav-link {
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.nav-link:hover { color: var(--text-primary); }

.nav-link.active {
    background: var(--gold);
    color: #000000;
    box-shadow: 0 4px 12px var(--gold-glow);
}

.view-toggle {
    display: flex;
    background: var(--bg-card);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-subtle);
}

.view-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.view-btn:hover { color: var(--text-secondary); }

.view-btn.active {
    background: var(--bg-layer-light);
    color: var(--gold);
}

.admin-btn {
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-ui);
    background: transparent;
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s var(--ease-fluid);
}

.admin-btn:hover {
    background: var(--gold);
    color: #000000;
    box-shadow: var(--shadow-glow);
}

/* ==========================================================================
   CAR CARDS CONFIGURATIONS (GRID LAYOUT)
   ========================================================================== */
.cars-section {
    padding: 2rem;
    max-width: 1650px;
    margin: 0 auto;
    width: 100%;
}

#carsGrid {
    display: grid;
    gap: 28px;
    animation: sectionEntrance 0.5s var(--ease-fluid) both;
}

/* Grid Responsiveness updates — one fewer column at each tier = larger tiles */
@media (min-width: 1650px) { #carsGrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) and (max-width: 1649px) { #carsGrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) and (max-width: 1079px) { #carsGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { #carsGrid { grid-template-columns: 1fr; } }

/* Shared card bases rules */
.car-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s var(--ease-fluid);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-main);
    position: relative;
}

.car-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.7), var(--shadow-glow);
}

.car-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), var(--shadow-glow);
    animation: pulseGlow 3s infinite ease-in-out;
}

.card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #0d0d11;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    display: block;
    transition: transform 0.7s var(--ease-fluid);
}

.car-card:hover .card-img-wrap img {
    transform: scale(1.08);
    filter: brightness(1.07) saturate(1.06);
}

/* Gold gradient ring that fades in around the card on hover */
.car-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(245, 196, 83, 0.6),
        rgba(245, 196, 83, 0) 35%,
        rgba(245, 196, 83, 0) 65%,
        rgba(166, 124, 30, 0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease-fluid);
    z-index: 3;
}

.car-card:hover::after { opacity: 1; }

/* Diagonal shine that sweeps across the photo once on hover */
.card-img-wrap::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -80%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 240, 206, 0.16), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}

.car-card:hover .card-img-wrap::before {
    left: 140%;
    transition: left 0.9s var(--ease-fluid);
}

.img-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(7, 7, 9, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.65rem;
    color: var(--gold-light);
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.04);
}

.selected-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--gold);
    color: #000000;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2;
}

.car-card.selected .selected-badge {
    display: flex;
    animation: badgeScale 0.4s var(--ease-fluid) both;
}

.card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.card-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.car-card:hover .card-name {
    color: var(--gold-light);
}

.select-btn {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 12px 20px;
    border-radius: 14px;
    background: var(--bg-layer);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    width: 100%;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s var(--ease-fluid);
}

.select-btn:hover {
    background: var(--gold);
    color: #000000;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(245,196,83,0.3);
}

.car-card.selected .select-btn {
    background: var(--gold);
    color: #000000;
    border-color: transparent;
}

/* ==========================================================================
   LIST VIEW: LARGE SHOWCASE TILES
   One tile per car — big cover photo on top, up to 2 more photos below it,
   then a name + select bar. Collage markup is built by buildCarCard(list).
   ========================================================================== */
#carsGrid.list-view {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 880px;
    margin: 0 auto;
}

#carsGrid.list-view .car-card.list-view-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: auto;
}

/* The collage container replaces the single-image wrap */
#carsGrid.list-view .list-view-card .card-img-wrap {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #0d0d11;
}

#carsGrid.list-view .list-view-card .collage-main-wrap {
    overflow: hidden;
    aspect-ratio: 16/9;
}

#carsGrid.list-view .list-view-card .collage-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#carsGrid.list-view .list-view-card .collage-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#carsGrid.list-view .list-view-card .collage-row.single {
    grid-template-columns: 1fr;
}

#carsGrid.list-view .list-view-card .collage-row img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/8;
    object-fit: cover;
    display: block;
}

/* Photos don't zoom in list view (no per-photo clipping in the collage) */
#carsGrid.list-view .car-card:hover .card-img-wrap img {
    transform: none;
    filter: none;
}

#carsGrid.list-view .list-view-card .card-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 1.25rem 1.5rem;
    width: 100%;
}

#carsGrid.list-view .list-view-card .card-name {
    margin-bottom: 0;
    font-size: 1.35rem;
}

#carsGrid.list-view .list-view-card .card-footer {
    width: auto;
    min-width: 200px;
}

#carsGrid.list-view .list-view-card .select-btn {
    padding: 12px 28px;
    font-size: 0.8rem;
}

/* Responsive Overrides Layer for List View on Small Screens */
@media (max-width: 640px) {
    #carsGrid.list-view { gap: 1.75rem; }
    #carsGrid.list-view .list-view-card .card-body {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.25rem 1.25rem;
        gap: 12px;
    }
    #carsGrid.list-view .list-view-card .card-name {
        max-width: 100%;
        white-space: normal;
    }
    #carsGrid.list-view .list-view-card .card-footer {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   SLIDERS, MODALS & REMAINING SITE OBJECTS
   ========================================================================== */
.empty { text-align: center; padding: 5rem 1rem; color: var(--text-muted); }

.cart-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(17, 17, 21, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--border-ui);
    padding: 14px 2rem;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.4s var(--ease-fluid);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
.cart-bar.visible { transform: translateY(0); }

.cart-count {
    background: var(--gold);
    color: #000000;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: 0 2px 8px var(--gold-glow);
}

.cart-names {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.cart-action {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    transition: all 0.2s;
}

.cart-clear {
    border: 1px solid var(--border-ui);
    background: transparent;
    color: var(--text-secondary);
}
.cart-clear:hover { background: rgba(255,255,255,0.04); color: #fff; }

.cart-order {
    background: var(--gold);
    color: #000000;
}
.cart-order:hover { transform: scale(1.02); box-shadow: 0 4px 15px var(--gold-glow-intense); }

/* LIGHTBOX GLASS REDESIGN */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(5, 5, 7, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; pointer-events: none;
    padding: 2rem;
    transition: opacity 0.3s var(--ease-fluid);
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lb-close {
    position: absolute; top: 24px; right: 24px;
    background: var(--bg-layer);
    border: 1px solid var(--border-ui);
    color: var(--gold);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px;
    transition: all 0.2s;
}
.lb-close:hover { transform: scale(1.1); background: var(--bg-layer-light); }

.lb-main-img {
    max-width: 90%; max-height: 65vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-main);
    transform: scale(0.95);
    transition: transform 0.4s var(--ease-fluid);
}
.lightbox.open .lb-main-img { transform: scale(1); }

.lb-title {
    margin-top: 16px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.lb-thumbs {
    display: flex; gap: 10px;
    overflow-x: auto; max-width: 90%;
    margin-top: 20px; padding: 4px;
}
.lb-thumb {
    width: 70px; height: 50px;
    object-fit: cover; border-radius: var(--radius-sm);
    border: 2px solid transparent; cursor: pointer;
    opacity: 0.4; transition: all 0.2s;
}
.lb-thumb.active, .lb-thumb:hover { border-color: var(--gold); opacity: 1; transform: translateY(-2px); }

.lb-nav { display: flex; gap: 16px; margin-top: 20px; }
.lb-nav-btn {
    padding: 8px 24px; border-radius: 30px;
    border: 1px solid var(--border-ui);
    background: var(--bg-card); color: var(--text-secondary);
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    transition: all 0.2s;
}
.lb-nav-btn:hover { border-color: var(--gold); color: #fff; }

/* REUSABLE PREMIUM MODERN MODALS */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(4,4,6,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 600; display: flex;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; padding: 1.5rem;
    transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-ui);
    border-radius: var(--radius-xl);
    padding: 2rem; max-width: 100%; width: 480px;
    box-shadow: var(--shadow-main);
    transform: translateY(20px);
    transition: transform 0.3s var(--ease-fluid);
}
.modal-overlay.open .modal-box { transform: translateY(0); }

.modal-box h3 { font-size: 1.3rem; margin-bottom: 14px; font-weight: 800; }

.order-list {
    background: var(--bg-deep);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem; font-family: monospace;
    font-size: 0.8rem; color: var(--gold-light);
    white-space: pre-wrap; margin-bottom: 1.5rem;
    max-height: 220px; overflow-y: auto;
}

.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
.modal-btn {
    padding: 10px 22px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 700; cursor: pointer; border: none;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.modal-btn-gold { background: var(--gold); color: #000; }
.modal-btn-outline { background: transparent; border: 1px solid var(--border-ui); color: var(--text-secondary); }
.modal-btn-outline:hover { color: #fff; border-color: var(--border-bright); }

/* ==========================================================================
   ADMIN SLIDE-OUT PANEL CONTROL CMS
   ========================================================================== */
.admin-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 400;
    opacity: 0; pointer-events: none; backdrop-filter: blur(4px);
    transition: opacity 0.3s;
}
.admin-overlay.open { opacity: 1; pointer-events: all; }

.admin-panel {
    position: fixed; top: 0; right: -100%;
    width: 100%; max-width: 460px; height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border-ui);
    z-index: 450; transition: right 0.4s var(--ease-fluid);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-main);
}
.admin-panel.open { right: 0; }

.admin-head {
    padding: 1.5rem; border-bottom: 1px solid var(--border-subtle);
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-layer);
}
.admin-head h2 { color: var(--gold); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.admin-head-btns { display: flex; gap: 8px; }

.icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border-ui); background: transparent;
    color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; transition: all 0.2s;
}
.icon-btn:hover { border-color: var(--gold); color: #fff; }

.admin-tabs { display: flex; background: var(--bg-deep); padding: 4px; gap: 4px; }
.admin-tab {
    flex: 1; padding: 10px 4px; background: transparent; border: none;
    color: var(--text-muted); font-size: 0.7rem; font-weight: 700;
    cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: 8px; transition: all 0.2s;
}
.admin-tab.active { color: var(--gold); background: var(--bg-layer); }

.admin-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.admin-section { display: none; }
.admin-section.active { display: block; }

.form-row { margin-bottom: 16px; }
.form-row label { font-size: 0.7rem; color: var(--gold-dim); margin-bottom: 6px; display: block; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; }
.form-row input, .form-row textarea, .form-row select {
    width: 100%; background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 10px 14px; color: var(--text-primary); font-size: 0.8rem;
    outline: none; transition: border-color 0.2s;
}
.form-row input:focus, .form-row select:focus { border-color: var(--border-bright); }

.admin-btn-full {
    width: 100%; padding: 12px; border-radius: 12px;
    font-weight: 700; cursor: pointer; margin-top: 8px; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.5px; border: none; transition: all 0.2s;
}
.abf-gold { background: var(--gold); color: #000; }
.abf-gold:hover { background: var(--gold-light); }
.abf-outline { background: transparent; border: 1px solid var(--border-ui); color: var(--text-secondary); }
.abf-outline:hover { border-color: var(--border-bright); color: #fff; }
.abf-danger { background: #3a1414; border: 1px solid #632020; color: #ff9999; }
.abf-danger:hover { background: #551c1c; }

.admin-car-list { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.admin-car-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: 10px; margin-bottom: 8px;
}
.acr-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.acr-edit { padding: 4px 12px; border-radius: 8px; border: 1px solid var(--border-ui); background: transparent; color: var(--gold); cursor: pointer; font-size: 0.7rem; font-weight: 600; }
.acr-edit:hover { background: var(--gold); color: #000; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; margin-top: 12px; }
.media-item { background: var(--bg-layer); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; }
.media-item img { width: 100%; height: 75px; object-fit: cover; }
.media-item .media-name { font-size: 0.6rem; padding: 6px; text-align: center; word-break: break-all; color: var(--text-secondary); }
.media-item .delete-media { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.8); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; color: #ff6666; }

.upload-area { border: 2px dashed var(--border-ui); border-radius: 16px; padding: 24px; text-align: center; margin-bottom: 16px; cursor: pointer; background: var(--bg-deep); transition: border-color 0.2s; }
.upload-area:hover { border-color: var(--gold); }

/* SYSTEM AUTHORIZATION SCREEN */
.login-overlay {
    position: fixed; inset: 0; background: rgba(4,4,6,0.96); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 700; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.login-overlay.open { opacity: 1; pointer-events: all; }
.login-box { background: var(--bg-card); border: 1px solid var(--border-ui); border-radius: var(--radius-xl); padding: 2.5rem; width: 100%; max-width: 340px; box-shadow: var(--shadow-main); text-align: center; }
.login-box h3 { margin-bottom: 16px; font-weight: 800; letter-spacing: -0.5px; }
.login-box input { width: 100%; background: var(--bg-layer); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; margin-bottom: 10px; color: #fff; outline: none; }
.login-box input:focus { border-color: var(--border-bright); }
.login-btn { width: 100%; padding: 12px; border-radius: 12px; background: var(--gold); color: #000; font-weight: 700; cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 0.5px; }

/* FEEDBACK TOASTS SYSTEM */
.toast {
    position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--bg-layer-light); border: 1px solid var(--border-bright); padding: 8px 24px; border-radius: 30px; color: var(--gold-light); font-size: 0.75rem; font-weight: 600; z-index: 800; opacity: 0; transition: all 0.3s var(--ease-fluid); pointer-events: none; box-shadow: var(--shadow-main);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* REORDERABLE INTERACTION MANAGEMENT */
.image-reorder-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 260px; overflow-y: auto; padding: 4px; }
.reorder-item { display: flex; align-items: center; gap: 12px; background: var(--bg-layer); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 8px; cursor: grab; }
.reorder-item:active { cursor: grabbing; }
.reorder-item.dragging { opacity: 0.3; border-style: dashed; }
.drag-handle { font-size: 16px; color: var(--text-muted); padding: 0 4px; }
.reorder-thumb { width: 55px; height: 40px; object-fit: cover; border-radius: 6px; }
.reorder-filename { flex: 1; font-size: 0.7rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-star { background: transparent; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 4px; transition: transform 0.2s; }
.main-star.active-star { color: var(--gold); filter: drop-shadow(0 0 4px var(--gold)); transform: scale(1.1); }
.remove-img-btn { background: rgba(255,102,102,0.15); border: none; color: #ff6666; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.remove-img-btn:hover { background: rgba(255,102,102,0.3); }

/* MEDIUM AND LARGE DEVICES ADJUSTMENTS */
@media (min-width: 768px) {
    .site-header { padding: 5rem 2rem 3rem; }
    .toolbar { padding: 1.25rem 3rem; gap: 24px; }
    .cars-section { padding: 2.5rem 3rem 7rem; }
}

/* ==========================================================================
   FEATURED SECTION, ADMIN TILE REORDER & LIGHTBOX LOUPE (cars page)
   ========================================================================== */
.section-heading {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-ui), transparent);
}
#featuredGrid { display: grid; gap: 28px; }
@media (min-width: 900px) { #featuredGrid { grid-template-columns: repeat(2, 1fr); } }
.featured-hero { grid-column: 1 / -1; }
@media (min-width: 900px) { .featured-hero .card-img-wrap { aspect-ratio: 21/9; } }
.featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--gold);
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 30px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2;
}

/* admin drag-to-reorder feedback */
.car-card.dragging-card { opacity: 0.35; border-style: dashed; }
.car-card.drag-over { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-glow); }

/* featured star in the admin collection list */
.acr-star {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 15px;
    opacity: 0.3;
    padding: 4px;
    transition: all 0.2s;
    filter: grayscale(1);
}
.acr-star:hover { opacity: 0.7; }
.acr-star.on { opacity: 1; filter: none; }

/* lightbox magnifier loupe */
.lb-img-wrap { position: relative; max-width: 90%; }
.lb-img-wrap .lb-main-img { max-width: 100%; }
@media (hover: hover) and (pointer: fine) { .lb-img-wrap { cursor: crosshair; } }
.lb-loupe {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 12px 35px rgba(0,0,0,0.6);
    pointer-events: none;
    display: none;
    background-repeat: no-repeat;
    background-color: #0d0d11;
    z-index: 5;
}

/* loupe hint + hold-to-magnify support */
.lb-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 8px;
    text-align: center;
}
@media (hover: none), (pointer: coarse) { .lb-hint { display: none; } }
.lb-img-wrap .lb-main-img { user-select: none; -webkit-user-drag: none; }

/* featured layout: 1 large hero on top (height-capped) + 2 smaller tiles below */
@media (min-width: 900px) {
    .featured-hero .card-img-wrap { aspect-ratio: 21/9; max-height: 500px; }
}

/* readable magnifier hint pill + featured drag-to-add drop zone */
.lb-hint {
    font-size: 0.7rem;
    color: var(--gold-light);
    background: rgba(24, 24, 34, 0.9);
    border: 1px solid var(--border-ui);
    border-radius: 30px;
    padding: 7px 18px;
    width: fit-content;
    margin: 12px auto 0;
}
.featured-drop-hint {
    border: 2px dashed var(--border-ui);
    border-radius: var(--radius-xl);
    padding: 48px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
#featuredSection.drop-ready .featured-drop-hint,
#featuredSection.drop-ready #featuredGrid .car-card {
    border-color: var(--gold);
}
#featuredSection.drop-ready .featured-drop-hint { color: var(--gold); }

/* real GTA vehicle name labels (from the Cherax spec JSONs) */
.card-gta {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.acr-sub { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }

/* admin: drag-reorder photos in the lightbox thumbnail strip */
.lb-thumb.is-cover { box-shadow: 0 0 0 2px var(--gold-dim); }
#lbThumbs .lb-thumb.active { border-color: var(--gold); opacity: 1; }
.lb-thumb.lb-drag-ready { cursor: grab; }
.lb-thumb.lb-dragging { opacity: 0.3; }
.lb-thumb.lb-drag-over { border-color: var(--gold); transform: translateY(-4px) scale(1.06); }
.lb-admin-hint { font-size: 0.68rem; color: var(--gold-dim); text-align: center; margin-top: 10px; letter-spacing: 0.5px; }

/* work-in-progress placeholder (outfits page) */
.wip-message {
    text-align: center;
    max-width: 640px;
    margin: 2.5rem auto;
    padding: 4rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-ui);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    box-shadow: var(--shadow-main);
}
.wip-message b { color: var(--gold); font-weight: 800; }

/* ==========================================================================
   DISPLAY TYPOGRAPHY
   Chakra Petch for headings / numbers, Sora for body (loaded from Google
   Fonts in each page head; --font-* vars fall back to system fonts).
   ========================================================================== */
.site-header h1,
.hero-line2,
.section-heading,
.stat-num,
.server-stat-number,
.discord-hero h2,
.modal-box h3,
.cta-banner h2,
.footer-brand {
    font-family: var(--font-display);
}

/* ==========================================================================
   SCROLL REVEAL
   site-bg.js adds .reveal-init to cards/sections, then .reveal-in once they
   enter the viewport; both classes are removed after the transition ends.
   ========================================================================== */
.reveal-init {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s var(--ease-fluid), transform 0.6s var(--ease-fluid);
}
.reveal-init.reveal-in {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   DISCORD CTA BANNER & SITE FOOTER
   ========================================================================== */
.cta-banner {
    max-width: 1000px;
    margin: 3.5rem auto 0;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 100% at 50% -20%, rgba(245, 196, 83, 0.12), transparent 70%),
        var(--bg-card);
    border: 1px solid var(--border-ui);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-main);
}
.cta-banner h2 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #FFFFFF 20%, var(--gold-light) 60%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cta-banner p {
    color: var(--text-secondary);
    margin-top: 10px;
    font-size: 0.95rem;
}
.cta-btn {
    display: inline-block;
    background: var(--gold);
    color: #000;
    font-weight: 800;
    padding: 14px 40px;
    border-radius: 40px;
    margin-top: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 18px var(--gold-glow);
}
.cta-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 30px var(--gold-glow-intense);
}

.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border-subtle);
    padding: 2.5rem 2rem 6rem;
    text-align: center;
}
.footer-brand {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
}
.footer-nav {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 1.2rem 0;
}
.footer-nav a {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--gold); }
.footer-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* ==========================================================================
   GOLD-TINTED SCROLLBAR
   ========================================================================== */
html { scrollbar-color: #4a3d1c var(--bg-deep); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #57471f, #2e2614);
    border-radius: 8px;
    border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ==========================================================================
   ADMIN — TRAFFIC (AWSTATS) TAB
   The admin drawer widens while this tab is open; data comes from
   stats_data.php, which parses the AWStats monthly data file.
   ========================================================================== */
.admin-panel.panel-wide { max-width: 1150px; }

.stats-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.stats-toolbar select {
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: 10px; padding: 8px 12px; color: var(--text-primary);
    font-size: 0.78rem; outline: none; cursor: pointer;
}
.stats-toolbar .stats-meta {
    margin-left: auto; font-size: 0.68rem; color: var(--text-muted);
    text-align: right; line-height: 1.6;
}

/* Headline figures */
.stats-hero {
    display: grid; gap: 12px; margin-bottom: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stats-card {
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 1rem 1.1rem;
}
.stats-card.primary { border-color: var(--border-ui); background: linear-gradient(160deg, rgba(245,196,83,0.07), var(--bg-layer)); }
.stats-card-label {
    font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--gold-dim); font-weight: 700;
}
.stats-card-value {
    font-family: var(--font-display);
    font-size: 1.75rem; font-weight: 700; color: var(--gold);
    line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.stats-card-sub { font-size: 0.66rem; color: var(--text-muted); margin-top: 4px; }

.stats-note {
    font-size: 0.7rem; color: var(--text-secondary); line-height: 1.6;
    background: var(--bg-layer); border-left: 3px solid var(--gold-dim);
    border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 1.5rem;
}
.stats-note b { color: var(--gold); }

/* Section headings inside the tab */
.stats-h {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px;
    font-weight: 800; color: var(--gold); margin: 0 0 10px;
}

/* Daily bar chart */
.stats-chart {
    display: flex; align-items: flex-end; gap: 4px;
    height: 170px; padding: 10px 4px 0;
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); margin-bottom: 1.5rem;
    overflow-x: auto;
}
.stats-bar-wrap {
    flex: 1; min-width: 14px; height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; gap: 5px;
}
.stats-bar {
    width: 100%; min-height: 2px; border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--gold), var(--gold-dim));
    transition: filter 0.2s;
}
.stats-bar-wrap:hover .stats-bar { filter: brightness(1.35); }
.stats-bar-lbl {
    font-size: 0.58rem; color: var(--text-muted); white-space: nowrap;
    font-variant-numeric: tabular-nums; line-height: 1;
}

/* Two-column panel grid */
.stats-grid {
    display: grid; gap: 14px; margin-bottom: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.stats-panel {
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 1rem 1.1rem;
}

/* Data tables */
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.stats-table th {
    text-align: left; font-size: 0.6rem; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-muted); font-weight: 700;
    padding: 0 8px 8px 0; border-bottom: 1px solid var(--border-subtle);
}
.stats-table th.num, .stats-table td.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.stats-table td {
    padding: 8px 8px 8px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-secondary);
}
.stats-table tr:last-child td { border-bottom: none; }
.stats-table td.name { color: var(--text-primary); font-weight: 600; word-break: break-all; }
.stats-table td.num b { color: var(--gold); font-weight: 700; }
.stats-table tr.is-others td { color: var(--text-muted); font-style: italic; }

/* Inline share bar behind the leading column */
.stats-share {
    display: block; height: 3px; border-radius: 3px; margin-top: 5px;
    background: var(--gold-dim); opacity: 0.55;
}

/* Collapsed "less important" blocks */
.stats-details {
    background: var(--bg-layer); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden;
}
.stats-details > summary {
    cursor: pointer; padding: 12px 16px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary);
    list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.stats-details > summary::-webkit-details-marker { display: none; }
.stats-details > summary::after { content: '＋'; color: var(--gold-dim); font-size: 0.9rem; }
.stats-details[open] > summary { color: var(--gold); border-bottom: 1px solid var(--border-subtle); }
.stats-details[open] > summary::after { content: '−'; }
.stats-details > summary:hover { color: var(--gold); }
.stats-details-body { padding: 1rem 1.1rem; }

.stats-empty { font-size: 0.75rem; color: var(--text-muted); padding: 10px 0; }
.stats-error {
    font-size: 0.78rem; color: #ff9999; background: #3a1414;
    border: 1px solid #632020; border-radius: var(--radius-md);
    padding: 14px 16px; line-height: 1.7; word-break: break-all;
}