/* header.css */
.site-header {
  position: sticky; top: 0; z-index: 200; height: var(--header-h);
  background: rgba(255,255,255,.95); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .site-header { background: rgba(13,15,16,.95); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:100%; gap:var(--space-md); }

/* Logo */
.logo { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--color-text); text-decoration:none; letter-spacing:-.02em; flex-shrink:0; }
.logo-icon { width:30px; height:30px; background:var(--brand-primary); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.logo span { color:var(--brand-primary); }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }

/* Nav dropdown */
.nav-dropdown { position:relative; }
.nav-drop-btn {
  display:flex; align-items:center; gap:5px;
  font-size:.82rem; font-weight:600; color:var(--color-muted);
  background:none; border:none; cursor:pointer; padding:8px 12px;
  border-radius:var(--radius-sm); transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-drop-btn:hover, .nav-dropdown:hover .nav-drop-btn { color:var(--color-text); background:var(--color-surface-2); }
.nav-drop-btn svg { transition:transform .2s; }
.nav-dropdown.open .nav-drop-btn svg { transform:rotate(180deg); }

/* Abrir/fechar depende só da classe .open (clique, via JS em components.js).
   De propósito sem :hover: o painel fechando ao menor desvio de mouse no
   caminho até a opção já causou problema real pro usuário, então o menu
   agora só abre/fecha por clique — imune a posição ou velocidade do mouse. */
.nav-drop-panel {
  display:none; position:absolute; top:100%; left:0;
  padding-top:8px; min-width:210px; z-index:300;
}
.nav-dropdown.open .nav-drop-panel { display:block; }

.nav-drop-panel-inner {
  display:flex; flex-direction:column;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:6px; animation:fadeDown .15s ease;
}

.nav-drop-panel a {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:var(--radius-sm); font-size:.83rem; color:var(--color-text);
  text-decoration:none; transition:background .12s;
}
.nav-drop-panel a:hover { background:var(--color-bg); color:var(--brand-primary); }

.nav-icon { width:18px; height:18px; flex-shrink:0; display:block; }

/* Wide (duas colunas) */
.nav-drop-wide { flex-direction:row !important; gap:0; min-width:380px; }
.drop-col { flex:1; display:flex; flex-direction:column; padding:4px; }
.drop-col-title { font-size:.72rem; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; padding:6px 12px 4px; }
.drop-divider { width:1px; background:var(--color-border); margin:6px 0; }

/* Link simples no nav */
.nav-links > li > a {
  display:block; font-size:.82rem; font-weight:600; color:var(--color-muted);
  padding:8px 12px; border-radius:var(--radius-sm); text-decoration:none;
  transition:color .15s, background .15s; white-space:nowrap;
}
.nav-links > li > a:hover { color:var(--color-text); background:var(--color-surface-2); }
.nav-links > li > a.active { color:var(--brand-primary); }

/* Ações */
.nav-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Tema */
.theme-toggle { width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--color-muted); background:none; border:1px solid var(--color-border); transition:all .15s; cursor:pointer; }
.theme-toggle:hover { color:var(--color-text); background:var(--color-surface-2); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { width:15px; height:15px; }

/* Lang btn */
.lang-btn { font-size:.78rem; font-weight:600; color:var(--color-muted); background:none; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.lang-btn:hover { color:var(--color-text); background:var(--color-surface-2); }
.lang-drop-panel { min-width:170px; right:0; left:auto; }
.nav-drop-panel-inner button.lang-option {
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 12px;
  border:none; background:none; border-radius:var(--radius-sm); font-size:.83rem;
  color:var(--color-text); cursor:pointer; text-align:left; transition:background .12s; font-family:inherit;
}
.nav-drop-panel-inner button.lang-option:hover { background:var(--color-bg); color:var(--brand-primary); }
.nav-drop-panel-inner button.lang-option.active { color:var(--brand-primary); font-weight:700; }

/* Btn sizes */
.btn-sm { padding:7px 14px; font-size:.8rem; }

/* User menu (usuário logado) */
.user-menu { position:relative; display:flex; align-items:center; gap:8px; }

.pro-badge {
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; color:#fff;
  background:linear-gradient(135deg, var(--brand-primary), #1C4D93);
  padding:4px 10px; border-radius:var(--radius-full);
}

.user-menu-btn {
  display:flex; align-items:center; gap:7px;
  padding:4px 10px 4px 4px; border:1px solid var(--color-border);
  border-radius:var(--radius-full); background:var(--color-surface);
  cursor:pointer; color:var(--color-text); transition:background .15s, border-color .15s;
}
.user-menu-btn:hover { background:var(--color-surface-2); border-color:var(--color-muted); }
.user-menu-btn svg { color:var(--color-muted); transition:transform .2s; flex-shrink:0; }
.user-menu.open .user-menu-btn svg { transform:rotate(180deg); }
.user-menu.open .user-menu-btn { background:var(--color-surface-2); border-color:var(--color-muted); }

.user-avatar {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-primary); color:#fff;
  font-size:.72rem; font-weight:700; line-height:1;
}
.user-avatar-lg { width:36px; height:36px; font-size:.95rem; }

.user-name {
  font-size:.83rem; font-weight:600; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.user-menu-panel {
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  min-width:230px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;
  z-index:300; animation:fadeDown .15s ease;
}
.user-menu.open .user-menu-panel { display:block; }

.user-menu-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--color-border); }
.user-menu-info { min-width:0; }
.user-menu-email {
  font-size:.85rem; font-weight:700; color:var(--color-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.user-menu-plan { font-size:.75rem; color:var(--color-muted); margin-top:2px; }
.user-menu-plan.is-pro { color:var(--brand-primary); font-weight:600; }

.user-menu-body { padding:6px; }
.user-menu-item {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 10px; border-radius:var(--radius-sm); border:none; background:none;
  font-size:.83rem; font-weight:500; color:var(--color-text); text-decoration:none;
  cursor:pointer; text-align:left; transition:background .12s; font-family:inherit;
}
.user-menu-item:hover { background:var(--color-bg); color:var(--brand-primary); }
.user-menu-item-danger:hover { color:#e0483e; }

@media (max-width:900px) {
  .user-name { max-width:80px; }
}

@media (max-width:480px) {
  .user-name { display:none; }
  .user-menu-btn { padding:4px; }
  .pro-badge { padding:4px 7px; }
  .user-menu-panel { right:-8px; }
}

/* Hamburger */
.menu-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:none; cursor:pointer; width:34px; height:34px; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.menu-toggle span { display:block; width:18px; height:2px; background:var(--color-text); border-radius:2px; transition:transform .2s, opacity .2s; transform-origin:center; }
.menu-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@keyframes fadeDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* Mobile */
@media (max-width: 900px) {
  .nav-links { display:none; }
  .menu-toggle { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed;
    top:var(--header-h); left:0; right:0; background:var(--color-surface);
    padding:var(--space-md); border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-lg); gap:4px; z-index:199;
  }
  .nav-drop-btn, .nav-links.open > li > a { padding:12px 16px; font-size:.95rem; }
  .nav-drop-panel { position:static; padding-top:0; }
  .nav-drop-panel-inner { box-shadow:none; border:none; background:var(--color-bg); margin:4px 0; padding:4px 8px; }
  .nav-drop-wide { flex-direction:column !important; min-width:unset; }
}