    /* Estilos Base e Utilitários (sem alterações) */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
    input[type="color"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 40px; padding: 0; border: none; border-radius: 0.5rem; cursor: pointer; background-color: transparent; }
    input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
    input[type="color"]::-webkit-color-swatch { border: 1px solid #e5e7eb; border-radius: 0.5rem; }
    .dark input[type="color"]::-webkit-color-swatch { border-color: #4b5563; }
    input[type="color"]::-moz-color-swatch { border: 1px solid #e5e7eb; border-radius: 0.5rem; }

    /* --- LAYOUT RESPONSIVO --- */
    
    /* Layout principal: Flex para mobile (comportamento padrão mantido) */
    #main-content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
    }

    /* Layout para Desktop (com a correção principal) */
    @media (min-width: 1024px) {
        #main-content {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 2rem;
            padding: 2rem 1.5rem;
            /* Garante que o grid não cresça mais que a altura da tela */
            height: calc(100vh - 120px); /* Ajuste a altura conforme o tamanho do seu header/footer */
            align-items: start;
        }

        /* ===== PONTO DA CORREÇÃO ===== */
        /* Faz com que APENAS o menu lateral tenha rolagem interna */
        #side-menu {
            overflow-y: auto; /* Adiciona a barra de rolagem vertical quando necessário */
            height: 100%;     /* Ocupa toda a altura da célula do grid */
        }
        /* ============================ */
    }

    /* Container da Roleta */
    #roulette-container {
        width: calc(100vw - 4rem);
        height: calc(100vw - 4rem);
        max-width: 500px;
        max-height: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Ponteiro da Roleta */
    #roulette-pointer {
        right: -1.5rem;
    }

     /* Ajustes para telas de tablet e celular */
    @media (max-width: 768px) {
        #roulette-pointer {
            right: -1.25rem;
        }
        #roulette-pointer .material-icons {
            font-size: 3rem;
        }
    }

    /* Ajustes finos para celulares pequenos */
    @media (max-width: 480px) {
        #roulette-pointer {
            right: -1rem;
        }
        #roulette-pointer .material-icons {
            font-size: 2rem;
        }
    }

    /* --- ESTILOS DE TELA CHEIA (Fullscreen) (sem alterações) --- */
    :fullscreen #app-body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; overflow: hidden; background-color: var(--app-bg-light); }
    :fullscreen.dark #app-body { background-color: var(--app-bg-dark); }
    :fullscreen #main-content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0; margin: 0; }
    :fullscreen #header, :fullscreen #side-menu, :fullscreen #guia-uso, :fullscreen footer { display: none !important; }
    :fullscreen #roulette-container-wrapper { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    :fullscreen #roulette-container { width: 90vmin; height: 90vmin; max-width: 100vh; max-height: 100vw; }
    :fullscreen #wheel { border-width: 10px; }
    :fullscreen #roulette-pointer { right: -4vmin; }
    :fullscreen #roulette-pointer .material-icons { font-size: clamp(42px, 9vmin, 70px);}

    /* --- AJUSTES RESPONSIVOS PARA O RODAPÉ (sem alterações) --- */
    @media (max-width: 415px) {
        footer nav {
            flex-direction: column;
            gap: 0.5rem;
        }
        footer nav span {
            display: none;
        }
        #copyright-text {
            flex-wrap: wrap;
            gap: 0.25rem 0.5rem;
        }
    }
