style.css

/* Estilos Gerais */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

/* Mapa */
.map-container {
    height: 300px;
    width: 100%;
    background: #f8f9fa;
}

/* Estatísticas */
.stats-container {
    background: #fff;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #212529;
    margin: 0.25rem 0;
}

.stat-unit {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Botões */
.btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}

.btn-lg {
    font-size: 1.125rem;
}

/* Histórico de Corridas */
#run-history .card {
    transition: transform 0.2s;
}

#run-history .card:hover {
    transform: translateY(-2px);
}

/* Responsividade */
@media (min-width: 768px) {
    .container {
        max-width: 540px;
    }
}