:root {
    --bg: #030712;
    --card-bg: rgba(17, 24, 39, 0.7);
    --primary: #c5a059;
    --primary-glow: rgba(197, 160, 89, 0.4);
    --secondary: #1e3a8a;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --text: #f9fafb;
    --text-muted: #9ca3af;
    --border: rgba(197, 160, 89, 0.15);
    --glass-border: rgba(255, 255, 255, 0.08);
    --accent-cyan: #06b6d4;
    --gold: #c5a059;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', sans-serif; }

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image: radial-gradient(circle at 10% 20%, rgba(197, 160, 89, 0.04) 0%, transparent 40%);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.tier { display: none !important; opacity: 0; }
.tier.active { display: block !important; opacity: 1; animation: fade-in 0.4s ease forwards; }

@keyframes fade-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Traffic Light Styles */
.traffic-light {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s;
}
.traffic-light.red.active { background: var(--danger); box-shadow: 0 0 20px var(--danger); }
.traffic-light.yellow.active { background: #ffea00; box-shadow: 0 0 20px #ffea00; }
.traffic-light.green.active { background: var(--success); box-shadow: 0 0 20px var(--success); }

/* Auction Card */
.auction-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px);
    transition: 0.3s;
}

#bottom-nav {
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

header h2 {
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
}