:root {
    /* Identidade visual nas cores principais: */
    --primary: #FF7A00;   /* Seu Laranja vibrante */
    --secondary: #00A8E8; /* Seu Azul elétrico */
    
    /* Cores do Modo Escuro (Estilo Spotify): */
    --bg-light: #121212;  /* Fundo super escuro */
    --surface: #181818;   /* Fundo dos cards e da barra lateral */
    --text-main: #FFFFFF; /* Texto branco */
    --text-dim: #A7A7A7;  /* Texto cinza */
    --glass: rgba(18, 18, 18, 0.95); /* Efeito de vidro escuro */
    --border: rgba(255, 255, 255, 0.08); /* Linhas de divisão sutis */
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombras profundas */
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    user-select: none; 
}

/* --- TRAVA LATERAL COM ROLAGEM VERTICAL LIBERADA --- */
html, body {
    width: 100%;
    max-width: 100%;
    /* O SEGREDO: Trava o lado (x), mas libera o topo/fundo (y) */

    
    /* Impede o elástico SÓ nos lados */
    overscroll-behavior-x: none; 
    
    /* Permite que o elástico vertical aconteça naturalmente ou use 'contain' */
    overscroll-behavior-y: none !important; 
    
    position: relative;
}

body { 
    background-color: var(--bg-light); 
    color: var(--text-main); 
    
    /* Importante: min-height em vez de height fixo */
    min-height: 100vh; 
    
    /* Garante que o corpo do app possa crescer conforme as categorias aparecem */
    display: block; 
}

/* Garante que o container das visualizações não trave a descida */
#home-view {
    width: 100%;
    overflow: visible; /* Deixa o conteúdo "vazar" para baixo */
}

/* --- SIDEBAR --- */
aside { background-color: var(--surface); padding: 24px; display: flex; flex-direction: column; border-right: 1px solid var(--border); z-index: 1001; height: 100%; overflow-y: auto; }
.logo { font-size: 1.6rem; font-weight: 900; color: var(--secondary); margin-bottom: 40px; display: flex; align-items: center; gap: 12px; }
.logo span { color: var(--primary); }
/* Container da lista (ajustado para centralizar) */
.nav-links { 
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; /* Mais espaço entre um botão e outro */
    align-items: center; 
}

/* O Botão em si (Agora maior e centralizado) */
.nav-links li { 
    width: 100%;
    padding: 18px 10px; 
    color: var(--text-dim); 
    cursor: pointer; 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; /* Ícone em cima, Texto embaixo */
    align-items: center;    /* Centraliza na horizontal */
    justify-content: center;/* Centraliza na vertical */
    gap: 8px; 
    font-weight: 700;       /* Texto bem visível */
    font-size: 1.1rem;      /* Tamanho maior */
    border-radius: 12px;
    text-align: center;
}

/* Efeito de passar o mouse ou botão selecionado */
.nav-links li.active, .nav-links li:hover { 
    color: var(--primary); 
    background: rgba(255, 122, 0, 0.12); 
}

/* --- CONTEÚDO PRINCIPAL --- */
main { padding: 30px; padding-bottom: 130px; position: relative; background-color: var(--bg-light); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 15px; }
.section-title { font-size: 1.3rem; font-weight: 800; border-left: 5px solid var(--primary); padding-left: 12px; }

/* =========================================
   CARROSSEL ESTILO NETFLIX - VERSÃO FINAL BLINDADA
   ========================================= */

.categoria-section {
    margin-bottom: 35px;
    /* Puxa a fileira para colar nas bordas físicas do celular */
    margin-left: -20px; 
    margin-right: -20px;
}

.categoria-titulo {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 15px;
    padding-left: 20px; /* Devolve o alinhamento só para o texto */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.carousel-container {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* O GRANDE SEGREDO: Trava o "elástico" exatamente na mesma direção do título */
    scroll-padding-left: 20px; 
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 15px; /* Espaço entre as capas */
}

.playlist-card {
    /* 40% da tela para mostrar 2 capas e meia */
    flex: 0 0 40vw; 
    max-width: 160px;
    scroll-snap-align: start;
    cursor: pointer;
}

.playlist-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    margin-bottom: 10px;
    display: block; 
}

.playlist-card p {
    font-size: 0.85rem;
    color: #e0e0e0;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- ESTILOS DA TELA DA PLAYLIST --- */
.btn-back { background: none; border: none; color: var(--text-dim); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; margin-bottom: 30px; transition: 0.2s; }
.btn-back:hover { color: var(--primary); }
.playlist-header-view { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.playlist-info-top { display: flex; align-items: flex-end; gap: 25px; }
.playlist-info-top img { width: 180px; height: 180px; border-radius: 20px; object-fit: cover; box-shadow: var(--shadow); }
.playlist-info-text h1 { font-size: 2.5rem; font-weight: 900; color: var(--text-main); margin-bottom: 10px; line-height: 1.1; }
.playlist-info-text p { color: var(--text-dim); font-weight: 600; }
.btn-download-all { background-color: var(--primary); color: white; border: none; padding: 12px 25px; border-radius: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: 0.2s; box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3); }
.btn-download-all:hover { transform: scale(0.98); opacity: 0.9; }

/* --- LISTA DE MÚSICAS --- */
.track-list { display: flex; flex-direction: column; gap: 4px; }
.track-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: transparent; border-radius: 10px; transition: 0.2s; cursor: pointer; }
.track-item:hover { background: rgba(0, 168, 232, 0.05); }
.track-item.active { background: rgba(255, 122, 0, 0.08); }
.track-left { display: flex; align-items: center; gap: 15px; flex: 1; overflow: hidden; }
.track-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.track-info-text { display: flex; flex-direction: column; overflow: hidden; }
.track-name { font-weight: 600; font-size: 0.95rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-item.active .track-name { color: var(--primary); }
.track-artist { font-size: 0.75rem; color: var(--text-dim); margin-top: 3px; }
.track-actions-in { display: flex; align-items: center; gap: 10px; }
.btn-icon-track { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; transition: 0.2s; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.btn-icon-track:hover { color: var(--primary); background: rgba(255, 122, 0, 0.1); }
.icon-download-discrete { font-size: 0.9rem; opacity: 0.5; }
.track-item:hover .icon-download-discrete { opacity: 1; }

/* --- PLAYER DO RODAPÉ (BLINDADO - GLOBAL) --- */
footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; background: var(--glass); backdrop-filter: blur(15px); border-top: 1px solid var(--border); display: flex; flex-direction: row !important; justify-content: space-between; align-items: center; padding: 0 30px; z-index: 1000; }
.footer-left { display: flex; flex-direction: row; align-items: center; gap: 15px; width: 30%; min-width: 200px; }
#mini-capa { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.footer-left div { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; }
#mini-titulo { font-size: 0.95rem; font-weight: 700; color: var(--text-main); text-overflow: ellipsis; overflow: hidden; }
#mini-artista { font-size: 0.8rem; color: var(--text-dim); text-overflow: ellipsis; overflow: hidden; }

.footer-center { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40%; max-width: 600px; gap: 10px; }
.title-wrapper { display: none !important; } /* Esconde texto duplicado */
.ctrl-btns { display: flex; flex-direction: row !important; align-items: center; justify-content: center; gap: 30px; width: 100%; margin: 0; }
.play-pause-footer { background: var(--primary); color: white; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3); transition: transform 0.2s; flex-shrink: 0; }
.play-pause-footer:hover { transform: scale(1.05); }

/* Animação do botão tocando */
.play-pause-footer.playing { background: linear-gradient(45deg, var(--primary), #ff2a00, #ffc837, var(--primary)); background-size: 300% 300%; animation: degradeAnimado 2.5s ease infinite; box-shadow: 0 0 15px rgba(255, 122, 0, 0.6); }
@keyframes degradeAnimado { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.footer-right { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: 20px; width: 30%; color: var(--text-dim); font-size: 1.2rem; }

.progress-wrapper { width: 100%; display: flex; align-items: center; gap: 15px; }
.time-display { font-size: 0.75rem; color: var(--text-dim); min-width: 40px; font-weight: 600; text-align: center; }
.progress-container { flex: 1; height: 10px; display: flex; align-items: center; cursor: pointer; position: relative; }
.progress-bg { width: 100%; height: 5px; background: #D1E9FF; border-radius: 10px; position: relative; display: flex; align-items: center; }
.progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 10px; position: relative; pointer-events: none; transition: width 0.1s linear; }
.progress-bar::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: var(--surface); border: 3px solid var(--primary); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.2s; }
.progress-container:hover .progress-bar::after, .progress-container:active .progress-bar::after { opacity: 1; }

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 768px) {
    .app-container { grid-template-columns: 1fr; }
    aside { position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; flex-direction: row; padding: 0; background: var(--surface); border-top: 1px solid var(--border); }
    .logo { display: none; }
    .nav-links { flex-direction: row; width: 100%; justify-content: space-around; }
    .nav-links li { flex-direction: column; font-size: 0.6rem; padding: 8px; flex: 1; gap: 5px; }
    main { padding: 15px; padding-bottom: 150px; }
    .music-grid { grid-template-columns: 1fr 1fr; gap: 15px; } /* 2 colunas no celular */
    .playlist-header-view { flex-direction: column; align-items: flex-start; }
    .playlist-info-top { flex-direction: column; align-items: flex-start; gap: 15px; }
    .playlist-info-top img { width: 120px; height: 120px; }
    .playlist-info-text h1 { font-size: 1.8rem; }
    .track-item { padding: 12px 15px; }
    .track-thumb { width: 42px; height: 42px; }
    
/* --- RODAPÉ DO CELULAR COM BARRA ESTICADA E CORRIGIDA --- */
    footer { 
        position: fixed !important; /* ISSO TRAZ O RODAPÉ DE VOLTA! */
        bottom: 70px; 
        left: 0;
        width: 100%;
        height: 75px; 
        padding: 0 15px; 
        justify-content: space-between; 
        gap: 0; 
        flex-direction: row !important; 
        z-index: 1000;
    }
    
    .footer-left { 
        width: auto; 
        display: flex !important; 
        gap: 12px; 
        align-items: center;
        margin-top: -15px; /* Sobe a foto um pouquinho para dar espaço à barra */
    }
    #mini-capa { width: 42px; height: 42px; }
    
    .footer-center { 
        width: auto; 
        flex: 1; 
        align-items: center; 
        justify-content: flex-end; 
        flex-direction: row !important; 
        margin-top: -15px; /* Sobe os botões um pouquinho também */
    }
    .ctrl-btns { gap: 15px; margin: 0; justify-content: flex-end; }
    
    /* A Mágica da Barra Absoluta (Estica da foto até o final) */
    .progress-wrapper { 
        display: flex !important; 
        position: absolute; 
        bottom: 5px; /* Fica cravada na parte de baixo do rodapé */
        left: 68px; /* Começa exatamente do lado direito da foto */
        width: calc(100% - 83px); /* Estica até o final da tela */
        gap: 8px; 
        align-items: center; 
    }
    
    .time-display { font-size: 0.65rem; min-width: 35px; opacity: 0.8; }
    .progress-container { flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; }
    .progress-bg { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 10px; position: relative; display: flex; align-items: center; }
    .progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 10px; position: relative; pointer-events: none; }
    
    .progress-bar::after { 
        content: ''; 
        position: absolute; 
        right: -6px; 
        top: 50%; 
        transform: translateY(-50%); 
        width: 12px; 
        height: 12px; 
        background: var(--surface); 
        border: 3px solid var(--primary); 
        border-radius: 50%; 
        display: block !important; 
        opacity: 1 !important; 
        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    }
    
    .footer-right { display: none !important; }
    .play-pause-footer { width: 38px; height: 38px; font-size: 0.95rem; }
    .fa-step-backward, .fa-step-forward { font-size: 1.15rem; }
}

/* ======================================================== */
/* TELA DE PLAYLIST: FIXA E ROLÁVEL (SEM SUMIR A TELA) */
/* ======================================================== */

/* 1. TELA PRINCIPAL (Deixe o JavaScript controlar se ela aparece ou não) */
#playlist-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-light);
    z-index: 100;
}

/* 2. BOTÃO VOLTAR (Pregado no topo esquerdo) */
#playlist-view .btn-back {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 102;
}

/* 3. FOTO E TÍTULO (Pregados no teto) */
#header-playlist {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* O padding-top de 60px garante que a foto não fique atrás do botão Voltar */
    padding: 60px 15px 15px 15px; 
    background-color: var(--bg-light);
    z-index: 101;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}

/* 4. A LISTA DE MÚSICAS (O ELEVADOR COM TRANSIÇÃO PERFEITA) */
#track-list-container {
    position: absolute;
    
    /* 1. Esticamos a caixa até o teto do celular */
    top: 0; 
    bottom: 0; 
    left: 0;
    width: 100%;
    
    overflow-y: auto; 
    
    /* 2. Empurramos a primeira música para baixo para não ficar atrás da foto ao abrir.
       Como a caixa agora vai até o teto, ao rolar, as músicas vão 
       deslizar e se esconder exatamente por trás do cabeçalho! */
    padding-top: 260px; /* Se a 1ª música ainda ficar escondida, aumente para 280px */
    
    padding-bottom: 150px; 
    box-sizing: border-box;
}

/* ======================================================== */
/* ESTILO DO POP-UP DE DOWNLOAD */
/* ======================================================== */
#download-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro transparente */
    z-index: 9999; /* Fica por cima de absolutamente tudo */
    display: flex; /* O JS vai alternar entre 'none' e 'flex' */
    justify-content: center;
    align-items: center;
}

#download-modal .modal-conteudo {
    background-color: #1e1e1e; /* Cor da caixinha */
    padding: 25px;
    border-radius: 15px;
    width: 85%;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

#download-modal h3 {
    margin-top: 0;
    color: #fff;
    font-size: 1.2rem;
}

#download-modal p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.4;
}

#nome-musica-download {
    color: #1DB954; /* Destaque verde no nome da música */
    font-size: 1.1rem;
}

.modal-botoes {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.modal-botoes button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}

.btn-cancelar {
    background-color: #444;
    color: #fff;
}

.btn-baixar {
    background-color: #1DB954; /* Verde Spotify */
    color: #fff;
}

/* ======================================================== */
/* ESTILO DA BARRA DE PESQUISA                              */
/* ======================================================== */
.container-busca {
    position: relative;
    padding: 15px 20px;
    background-color: var(--bg-dark); /* Fundo da tela inicial */
    z-index: 10;
}

.container-busca input {
    width: 100%;
    padding: 14px 15px 14px 45px; /* Espaço na esquerda para a lupa */
    border-radius: 30px;
    border: none;
    background-color: #2a2a2a; /* Cinza escuro */
    color: #fff;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
    transition: all 0.3s ease;
}

/* Quando o usuário clica para digitar */
.container-busca input:focus {
    background-color: #333;
    box-shadow: 0 0 0 2px #1DB954; /* Borda verde estilo Spotify */
}

.icone-busca {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 1.1rem;
}

/* ======================================================== */
/* ESTILO DA MENSAGEM DE BUSCA                              */
/* ======================================================== */
.mensagem-busca {
    color: #1DB954; /* Verde destaque estilo Spotify */
    text-align: center;
    font-size: 0.95rem;
    margin: 5px 20px 15px 20px;
    font-weight: bold;
    animation: fadeIn 0.3s ease-in-out; /* Dá um efeitinho suave ao aparecer */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ======================================================== */
/* ESTILO DO MENU DE NAVEGAÇÃO (AJUSTE FINO DAS BORDAS)     */
/* ======================================================== */

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0; 
    margin: 0;
    background-color: #121212; 
    height: 75px; 
    width: 100%; /* Garante que ocupe toda a largura */
    overflow: hidden; /* Corta qualquer "rebarba" que sobrar nas pontas */
    border: none; /* Remove qualquer borda fantasma */
}

.nav-links li {
    flex: 1; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888; 
    cursor: pointer;
    transition: all 0.2s ease;
    border: none; /* Remove bordas individuais */
    outline: none; /* Remove contorno de seleção */
    gap: 5px;
}

/* Aumentando ícones e letras para destaque */
.nav-links li i {
    font-size: 1.5rem; 
}

.nav-links li span {
    font-size: 0.9rem;
    font-weight: 400;
}

/* ======================================================== */
/* O BOTÃO SELECIONADO (QUADRADO INTEIRO)                   */
/* ======================================================== */
.nav-links li.active {
    background-color: #242424; 
    color: #ff8c00; 
    /* Se a linha no topo estiver causando a coluna cinza, 
       podemos usar o box-shadow que não ocupa espaço de borda: */
    box-shadow: inset 0 4px 0 0 #ff8c00; 
}

/* Remove qualquer espaço no último e no primeiro item */
.nav-links li:first-child { margin-left: 0; }
.nav-links li:last-child { margin-right: 0; }

/* ======================================================== */
/* REMOVE A COLUNA CINZA DO CONTAINER PRINCIPAL             */
/* ======================================================== */
aside {
    border-right: none !important;
    border-left: none !important;
    border: none !important;
    padding-right: 0 !important;
}

/* Garante que o aplicativo não deixe nenhum fundo vazar */
.app-container {
    overflow-x: hidden;
}

/* ======================================================== */
/* 1. TIRA A LINHA CINZA DO RODAPÉ (SEM TRAVAR O RESTO)     */
/* ======================================================== */
aside {
    overflow: hidden !important;
}

/* ======================================================== */
/* CONTROLE DA LOGO DO TOPO (PLAYPACK)                      */
/* ======================================================== */

.logo-topo {
    display: flex;
    justify-content: center; /* Centraliza a logo no meio da tela */
    padding: 8px 0 10px 0;  /* Espaço em cima e embaixo */
    width: 100%;
}

.logo-topo img {
    width: 150px;           /* <--- DIMINUA ESSE NÚMERO SE AINDA ESTIVER GRANDE */
    height: auto;           /* Mantém a proporção correta */
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); /* Sombra para destacar */
}

/* Ajuste específico para Celular */
@media (max-width: 768px) {
    .logo-topo img {
        width: 120px;       /* Tamanho menor para telas de celular */
    }
}

/* ========================================== */
/* ADAPTAÇÃO PARA COMPUTADOR (MENU LATERAL)   */
/* ========================================== */
@media screen and (min-width: 800px) {
    
    /* 1. Transforma a barra inferior numa barra lateral esquerda */
    aside {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 250px !important;
        height: 100vh !important;
        background: var(--surface, #121212) !important; 
        border-right: 1px solid var(--border, #333) !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        z-index: 100 !important;
    }

    /* 2. Exibe o Logo no topo do menu */
    .logo {
        display: block !important;
        padding: 30px 20px !important;
        font-size: 1.8rem !important;
        text-align: center !important;
        border-bottom: 1px solid var(--border, #333) !important;
    }

    /* 3. Coloca os botões em formato de lista (um abaixo do outro) */
    #menu-principal {
        flex-direction: column !important;
        height: auto !important;
        padding-top: 20px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    /* 4. Alinha os ícones e textos para a esquerda */
    #menu-principal li {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        padding: 15px 30px !important;
        border-radius: 0 !important;
    }

    #menu-principal li i {
        font-size: 1.4rem !important;
        margin-bottom: 0 !important;
        margin-right: 15px !important;
    }

    /* Força o texto dos botões a aparecer no PC (caso esteja oculto no celular) */
    #menu-principal li span {
        display: inline-block !important; 
        font-size: 1.1rem !important;
    }

    /* 5. Empurra o Conteúdo Principal e o Player para não ficarem atrás do menu */
    main {
        margin-left: 250px !important;
        padding-top: 20px !important;
    }

    footer {
        left: 250px !important;
        width: calc(100% - 250px) !important;
    }
    
    /* 6. Centraliza o pop-up de instalação na área visível do PC */
    #banner-instalacao {
        left: calc(50% + 125px) !important;
    }
}