body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f4f6fb;
            margin: 0;
            padding: 0 0 20px 0;
        }

        .header {
            background: white;
            padding: 15px;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tabs-container {
            display: flex;
            background: #1e293b;
            padding: 10px 15px 0 15px;
            overflow-x: auto;
            gap: 5px;
        }

        .tab {
            padding: 10px 20px;
            background: #334155;
            color: #cbd5e1;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            font-weight: bold;
            transition: 0.3s;
            white-space: nowrap;
        }

        .tab:hover {
            background: #475569;
        }

        .tab.active {
            background: #f4f6fb;
            color: #1e293b;
        }

        .tab.geral {
            background: #f59e0b;
            color: white;
        }

        .tab.geral.active {
            background: #f4f6fb;
            color: #d97706;
        }

        .race { margin: 15px; background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
        
        .track { 
            position: relative; 
            min-height: 220px; 
            background: #94a3b8; 
            border-radius: 12px; 
            overflow: hidden; 
            border: 4px solid #475569; 
            box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2); 
        }

        .finish-line { 
            position: absolute; 
            right: 20px; 
            top: 0; 
            bottom: 0; 
            width: 35px; 
            background: repeating-conic-gradient(#1e293b 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; 
            z-index: 5; 
            border-left: 4px solid #ef4444; 
        }

        .lane-line { position: absolute; left: 0; width: 100%; height: 4px; background-image: repeating-linear-gradient(to right, #e2e8f0, #e2e8f0 30px, transparent 30px, transparent 60px); opacity: 0.5; z-index: 1; }
        
        .car { 
            position: absolute; 
            transition: left 0.9s cubic-bezier(0.25, 1, 0.5, 1); 
            animation: float 2.8s ease-in-out infinite; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            width: 90px; 
            z-index: 10; 
        }

        .car-emoji { font-size: 55px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
        .car-name { font-size: 11px; font-weight: 800; background: rgba(255, 255, 255, 0.95); padding: 2px 8px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); margin-top: -5px; white-space: nowrap; border: 2px solid; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-4px); }
        }

        .leader { transform: scale(1.15); z-index: 20; }
        .leader .car-emoji { filter: drop-shadow(0 0 15px #fde047) scaleX(-1); }
        
        .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 15px; }
        .kpi { background: white; padding: 12px; border-radius: 10px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
        .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; padding: 0 15px; }
        .card { background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-bottom: 15px; }
        canvas { max-height: 350px; width: 100% !important; }
        .totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
        .total-card { background: linear-gradient(135deg, #ffffff, #f1f5f9); padding: 12px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); font-weight: bold; display: flex; flex-direction: column; justify-content: center; }
        .total-card-geral { background: linear-gradient(135deg, #1e293b, #334155); color: white; grid-column: 1 / -1; font-size: 16px; margin-bottom: 5px; }
        
        #mesTotal { margin-top: 15px; font-size: 14px; color: #334155; text-align: center; line-height: 1.6; }
        footer { text-align: center; padding: 15px; font-size: 13px; color: #64748b; }

        .ranking-list { list-style: none; padding: 0; margin: 0; }
        .ranking-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #e2e8f0; font-weight: bold; }
        .ranking-item:nth-child(1) { background: #fef08a; border-radius: 8px; }
        .ranking-pos { width: 30px; font-size: 18px; color: #475569; }
        .ranking-info { flex-grow: 1; display: flex; justify-content: space-between; }

        @media (max-width: 768px) {
            .grid { grid-template-columns: 1fr; }
            .header { flex-direction: column; text-align: center; gap: 10px; }
            .car-emoji { font-size: 40px; }
            .car { width: 70px; }
            .track { min-height: 300px; }
        }

        footer {
    text-align: center;
    padding: 20px 0;
    margin-top: auto;
    width: 100%;
    font-size: 0.85rem;
    color: #64748b;
    background: rgba(255,255,255,0.05);
    border-top: 1px solid #e2e8f0;
}

footer a {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: none !important;
}

footer a:hover {
    color: #1d4ed8 !important;
    text-shadow: 0 0 4px rgba(59,130,246,0.3);
    transform: translateY(-1px);
}

footer a:active,
footer a:focus {
    outline: none !important;
    box-shadow: none !important;
}