body {
    background-color: #121212; /* Fondo oscuro específico */
}

#counterDisplay {
    font-size: 6rem; /* Número bien grande */
    font-weight: bold;
    color: var(--bs-light);
    line-height: 1;
}

.btn-counter {
    width: 80px;      /* Tamaño fijo */
    height: 80px;     /* Tamaño fijo */
    border-radius: 50%; /* Botones redondos */
    font-size: 2rem;  /* Icono grande */
    display: inline-flex; /* Para centrar icono */
    align-items: center;
    justify-content: center;
    padding: 0; /* Quitar padding extra */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra suave */
    transition: transform 0.1s ease-out; /* Feedback táctil */
}

.btn-counter:active {
    transform: scale(0.95); /* Efecto de presionar */
}

#resetBtn {
    /* Estilo más pequeño para el reset */
}

.editable-title-container h1 {
    /* Ajustar si es necesario */
}

.editable-title-container button {
    vertical-align: middle; /* Alinear botón con el título */
}

/* Responsive */
@media (max-width: 576px) {
    #counterDisplay {
        font-size: 5rem;
    }
    .btn-counter {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}