/* Reset */
* {
  margin:0; padding:0;
  box-sizing:border-box;
  font-family: "Cantarell", sans-serif;
}

body {
  background:#1e1e1e;
  color:#e0e0e0;
  height:100vh;
  display:flex;
  flex-direction:column;
}

/* ===== NAV SUPERIOR ===== */
.top-nav {
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  background:#000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 1rem;
  z-index:1000;
}

.nav-left { display:flex; align-items:center; }
.user-avatar {
  width:32px; height:32px;
  border-radius:50%;
  background:#444;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

.nav-right {
  display:flex; align-items:center; gap:1rem;
}
.logo { font-weight:bold; font-size:1.1rem; color:#fff; cursor:pointer; }
.hamburger { cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.hamburger div { width:22px; height:3px; background:#fff; border-radius:2px; }

/* ===== MAIN LAYOUT ===== */
.main-wrapper {
  margin-top:66px;
  margin-bottom:66px; /* espaço p/ bottom-nav */
  display:flex;
  justify-content:center;
  width:100%;
  padding:0 0.75rem;
  flex:1;
}

.content {
  flex:1;
  background:#2a2a2a;
  border-radius:12px;
  padding:1rem;
  min-height:calc(100vh - 132px);
  transition:margin-right 0.3s;
}

.menu-panel {
  width:220px;
  background:#2f2f2f;
  border-radius:12px;
  padding:1rem;
  margin-left:1rem;
  height:calc(100vh - 132px);
  position:sticky;
  top:66px;
  display:none;
  flex-direction:column;
  gap:0.5rem;
}

.menu-panel h2 {
  font-size:1rem;
  margin-bottom:0.5rem;
  border-bottom:1px solid #444;
  padding-bottom:0.5rem;
}
.menu-panel a {
  text-decoration:none;
  color:#bbb;
  padding:0.5rem;
  border-radius:6px;
  transition:background 0.3s,color 0.3s;
}
.menu-panel a:hover { background:#3a3a3a; color:#fff; }

/* Mostrar menu quando ativo */
.menu-panel.active { display:flex; }

/* Ajuste desktop: menu ao lado */
@media (min-width:768px) {
  .menu-panel { display:flex; }
  .content.with-menu { margin-right:240px; }
}

/* ===== NAV INFERIOR (sempre visível) ===== */
.bottom-nav {
  position:fixed;
  left:0; right:0; bottom:0;
  height:56px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:1300;
  border-top:1px solid rgba(255,255,255,0.05);
}
.bottom-nav a {
  color:#cfcfcf;
  text-decoration:none;
  font-size:0.9rem;
  transition:color 0.3s;
}
.bottom-nav a:hover { color:#fff; }