/**
 * AUTO DASHBOARD v2.6 - GOLD SHOWROOM
 * Charcoal spotlight, floating depth, and gold accents.
 */
:root { 
    --accent: #C5A059;       /* Default Gold - Overwritten by JSON */
    --bg-light: #2c2c2c;     /* Studio Charcoal Spotlight */
    --bg-dark: #0a0a0a;      /* Deep Carbon edges */
    --white: #ffffff;
    --shimmer: rgba(255, 255, 255, 0.4);
}

body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; min-height: 100vh;
    display: flex; justify-content: center;
    background: var(--bg-dark);
    /* THE CONTRAST FIX: Lighter center makes black shadows visible */
    background-image: radial-gradient(circle at center, var(--bg-light) 0%, var(--bg-dark) 100%);
    background-size: 400% 400%;
    animation: meshGradient 15s ease infinite;
    overflow-x: hidden;
}

@keyframes meshGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container { 
    width: 95%; max-width: 420px; padding: 40px 20px; 
    animation: floatIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes floatIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* THE FLOATING CARD: Carbon-glass with Gold outline */
.card { 
    background: rgba(20, 20, 20, 0.9); 
    border-radius: 12px; padding: 40px 30px; 
    /* DEEP SHADOW: Physical lift off the page */
    box-shadow: 0 50px 100px rgba(0,0,0,0.9); 
    border: 1px solid rgba(197, 160, 89, 0.2); 
    backdrop-filter: blur(20px); text-align: center;
    position: relative; overflow: hidden;
}

/* THE MAGIC SHIMMER SWEEP */
.card::after {
    content: ""; position: absolute; top: -150%; left: -150%;
    width: 300%; height: 300%;
    background: linear-gradient(45deg, transparent 45%, var(--shimmer) 50%, transparent 55%);
    animation: shimmerSweep 8s infinite;
    pointer-events: none;
}

@keyframes shimmerSweep {
    0% { transform: translate(-30%, -30%); }
    20% { transform: translate(30%, 30%); }
    100% { transform: translate(30%, 30%); }
}

/* THE FLOATING CAR IMAGE */
.hero-img { 
    width: 100%; border: 1px solid var(--accent); margin-bottom: 30px; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.7);
    transform: translateY(-8px); border-radius: 2px;
}

.name { 
    font-family: 'DM Serif Display', serif; font-size: 2.4rem; 
    margin-bottom: 25px; color: var(--white); letter-spacing: 0.02em;
}

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }

/* SECONDARY BUTTONS: Gold Outlines */
.btn { 
    padding: 18px; border: 1px solid var(--accent); 
    background: transparent; color: var(--accent); 
    font-weight: 700; text-transform: uppercase; border-radius: 4px;
    letter-spacing: 0.1em; font-size: 0.85rem; cursor: pointer;
}

/* VIEW FULL GALLERY: Full width Gold border */
.btn-full { 
    grid-column: span 2; margin-bottom: 15px; 
}

/* THE PRIMARY "BUY" BUTTON: Solid Gold Action */
.buy-btn { 
    display: block; width: 100%; background: var(--accent); 
    color: #000; padding: 22px; border-radius: 4px; 
    font-weight: 900; text-transform: uppercase; border: none;
    letter-spacing: 0.2em; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    cursor: pointer; text-decoration: none; text-align: center;
}