:root {
    --bg: #020617;
    --side: #0f172a;
    --accent: #00ff88;
    --text: #f8fafc;
    --border: #1e293b;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* CORREÇÃO PRINCIPAL: Substituímos height fixo por min-height e permitimos o scroll */
body { 
    background: var(--bg); 
    color: var(--text); 
    display: flex; 
    min-height: 100vh; 
    height: auto; 
    overflow-x: hidden; 
    overflow-y: auto; /* Permite rolar a página inteira */
}

/* Menu Lateral */
.sidebar { 
    width: 280px; 
    background: var(--side); 
    border-right: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    z-index: 10; 
}

.logo-area { padding: 30px; border-bottom: 1px solid var(--border); }
.logo-area h1 { color: var(--accent); font-size: 1.4rem; }

/* Área de itens do menu que cresce */
.menu-content { flex-grow: 1; overflow-y: auto; }

.menu-label { padding: 20px 25px 5px; font-size: 0.9rem; color: var(--accent); font-weight: 800; text-transform: uppercase; }
.menu-item { padding: 12px 25px; color: #94a3b8; text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: 0.2s; }
.menu-item:hover { background: #1e293b; color: var(--accent); }

/* Créditos na base do menu lateral */
.sidebar-footer {
    padding: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
}
.sidebar-footer b { color: var(--accent); }

/* Conteúdo Principal */
.main-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; }
.content-area { flex: 1; display: flex; padding: 30px; gap: 30px; }

.product-display { flex: 3; background: rgba(15, 23, 42, 0.5); border-radius: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
.ads-sidebar { flex: 1; background: var(--side); border-radius: 20px; border: 1px solid var(--border); padding: 25px; }

/* Seletor de Idiomas */
.lang-selector {
    background: #1e293b; 
    color: #00ff88; 
    border: 1px solid #00ff88; 
    padding: 8px 15px; 
    border-radius: 10px; 
    cursor: pointer;
    width: 170px;
    font-weight: 500;
}

/* Ajustes Responsivos (Mobile First) */
@media (max-width: 900px) {
    body { flex-direction: column; } /* Empilha sidebar e conteúdo */
    .sidebar { width: 100%; height: auto; } /* Sidebar ocupa largura total */
    .content-area { flex-direction: column; padding: 15px; gap: 15px; }
    .ads-sidebar { display: block; width: 100%; } /* Agora mostra as ads no mobile também, empilhadas */
    .product-display { padding: 20px; min-height: 300px; }
}