:root {
        --primary: #0f172a;
        --accent: #2563eb;
        --bg-stage: #ffffff;
        --border: #e2e8f0;
        --col-width: 260px;
        --stage-height: 500px;
    }


    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
    body { background: #f1f5f9; padding: 0; }

    /* --- 1. A BARRA DE NAVEGAÇÃO (Nível 1) --- */
    .navbar {
        background: white;
        padding: 0 40px;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        position: relative;
        justify-content: center;
    }

    .menu-root {
        display: flex;
        list-style: none;
        gap: 10px;
        margin-bottom: 0;
    }

    .root-item > a {
        display: block;
        padding: 20px 15px;
        text-decoration: none;
        color: var(--primary);
        font-weight: 600;
        border-bottom: 2px solid transparent;
    }

    .root-item:hover > a, .root-item.active > a {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    /* --- 2. O HTML ANINHADO (Escondido Visualmente) --- */
    /* Engenharia: Mantemos o HTML no DOM para SEO, 
       mas escondemos o submenu "bruto" para o JS gerenciar a exibição no palco.
    */
    .submenu-source {
        display: none; /* O JS vai ler isso, mas o usuário não vê a lista feia */
    }

    /* --- 3. O PALCO (MILLER COLUMNS CONTAINER) --- */
    .miller-stage {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 10px;
        background: var(--bg-stage);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
        
        /* Dimensões fixas para evitar quebra de layout */
        width: 1302px; 
        height: var(--stage-height);
        
        display: flex; /* Colunas lado a lado */
        overflow-x: auto; /* Scroll horizontal se tiver muitos níveis */
        
        opacity: 0; visibility: hidden;
        transform: translateY(10px);
        transition: all 0.2s ease;
        z-index: 100;
    }

    .miller-stage.is-open {
        opacity: 1; visibility: visible;
        transform: translateY(0);
    }

    /* --- 4. AS COLUNAS GERADAS PELO JS --- */
    .column {
        min-width: var(--col-width);
        width: var(--col-width);
        height: 100%;
        border-right: 1px solid var(--border);
        overflow-y: auto;
        animation: slideIn 0.15s ease-out;
    }

    /* Itens dentro da coluna */
    .col-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        text-decoration: none;
        color: #334155;
        font-size: 0.95rem;
        border-bottom: 1px solid #f8fafc;
        transition: background 0.1s;
    }

    .col-link:hover, .col-link.active {
        background: #eff6ff;
        color: var(--accent);
        font-weight: 500;
    }

    .col-link i { font-size: 0.8rem; color: #cbd5e1; }
    .col-link.active i { color: var(--accent); }

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

    /* Loader & Grid */
    .loader-box { padding: 30px; text-align: center; color: #94a3b8; }
    .grid-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; }
    .brand-item { text-align: center; padding: 10px; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
    .brand-item:hover { border-color: var(--accent); color: var(--accent); }

    /* ==============================================================================
   AJUSTES DE RESPONSIVIDADE (Substitua o final do seu CSS por isso)
   ============================================================================== */

/* 🔹 Tablets e Celulares Maiores */
@media (max-width: 640px) {
    .auth-popup-content {
      max-width: 90%;
      padding: 2.5rem 2rem;
    }
  }
  
  /* 🔹 Celulares (Modo Retrato) */
  @media (max-width: 480px) {
    .auth-popup {
      /* Garante que o teclado não cubra o input em alguns browsers mobile */
      align-items: center; 
      padding: 1rem; 
    }
  
    .auth-popup-content {
      padding: 2rem 1.25rem; /* Padding lateral levemente menor */
      width: 100%;
      margin: 0;
      border-radius: 16px;
      
      /* CRÍTICO: Permite rolar se o conteúdo for maior que a tela */
      max-height: 90vh; 
      overflow-y: auto; 
      
      /* Suaviza o scroll no iOS */
      -webkit-overflow-scrolling: touch;
    }
    
    .auth-popup h2 {
      font-size: 1.5rem; /* Fonte um pouco menor para não quebrar linha */
      margin-bottom: 1.5rem;
    }
    
    /* Inputs mais fáceis de tocar */
    .auth-popup input {
      padding: 0.875rem 1rem;
      font-size: 16px; /* Evita zoom automático no iOS ao clicar */
      margin-bottom: 1rem;
    }
    
    /* Labels menores */
    .auth-popup label {
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }
    
    .auth-popup .btn-primary,
    .auth-popup .btn-secondary {
      padding: 1rem 1.25rem;
      font-size: 0.95rem;
      margin-top: 0.75rem;
    }
  
    /* Ajuste no botão de fechar para não sobrepor */
    .auth-popup-content .close-btn {
      top: 1rem;
      right: 1rem;
      width: 2rem;
      height: 2rem;
      font-size: 1rem;
    }
  }
  
  /* 🔹 Celulares (Modo Paisagem / Telas muito curtas) */
  @media (max-height: 600px) {
    .auth-popup {
      align-items: flex-start; /* Alinha no topo para permitir scroll */
      padding-top: 1rem;
      padding-bottom: 1rem;
      overflow-y: auto; /* Scroll no container principal se necessário */
    }
  
    .auth-popup-content {
      margin: 1rem auto;
      padding: 1.5rem;
      transform: none !important; /* Remove transformações que bugam scroll */
    }
  
    .auth-popup h2 {
      margin-bottom: 1rem;
      font-size: 1.4rem;
    }
    
    .auth-popup input {
      margin-bottom: 0.75rem;
      padding: 0.6rem 1rem;
    }
  }
  
  /* 🔹 Acessibilidade (Mantido) */
  @media (prefers-reduced-motion: reduce) {
    .auth-popup,
    .auth-popup-content,
    .close-btn,
    .btn-primary,
    .btn-secondary {
      transition: none;
      animation: none;
    }
  }
  
  .auth-popup *:focus-visible {
    outline: 2px solid rgba(16, 185, 129, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
  }