body {
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #1e1e1e;
	color: #cccccc;
	margin: 0;
	padding: 0; /* Removido padding do body para o menu ocupar a largura toda */
}

/* ====== MENU DE NAVEGAÇÃO (NOVO) ====== */
.top-nav {
	background-color: rgba(10, 10, 10, 0.8);
	border-bottom: 1px solid #333;
	text-align: center;
	padding: 15px 0;
	margin-bottom: 20px; /* Espaço entre o menu e o conteúdo */
}
.top-nav a {
	color: #f4c700; /* Dourado L2Age */
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	margin: 0 20px;
	transition: color 0.2s;
}
.top-nav a:hover {
	color: #ffffff;
}

.wrapper {
	display: flex;
	gap: 20px;
	max-width: 1200px;
	margin: auto;
	padding: 0 20px; /* Adicionado padding lateral ao wrapper */
}

.sidebar {
	flex: 0 0 350px;
}

.main-content {
	flex-grow: 1;
}

/* Estilo das caixas de conteúdo */
.search-container,
#details-view,
#search-results-list {
	background: rgba(30, 30, 30, 0.85);
	padding: 20px;
	border: 1px solid #333;
	border-radius: 3px;
	margin-bottom: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#search-box {
	width: 100%;
	padding: 10px;
	font-size: 14px;
	box-sizing: border-box;
	background-color: #111;
	border: 1px solid #444;
	color: #ccc;
	border-radius: 3px;
	margin-bottom: 15px;
}

.search-options label {
	margin-right: 15px;
	cursor: pointer;
	color: #aaa;
	font-size: 13px;
}

#search-results-list { max-height: 70vh; overflow-y: auto; padding: 5px; }
.list-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #3a3a3a; transition: background-color 0.2s; }
.list-item:hover { background-color: rgba(244, 199, 0, 0.1); }
.list-item:last-child { border-bottom: none; }
.list-item small { color: #888; }

#details-view .header {
	color: #f4c700; /* Dourado */
	border-bottom: 1px solid #f4c700;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
#details-view .header h2 { margin: 0; font-size: 22px; }
#details-view h3 { color: #eee; border-bottom: 1px solid #444; padding-bottom: 8px; margin-top: 30px; font-size: 18px; }
#details-view h4 { color: #ccc; font-size: 16px; margin-top: 25px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 20px; }
.stat { background: #111; padding: 10px; border-radius: 3px; font-size: 13px; border-left: 3px solid #f4c700; }
.stat strong { color: #aaa; }

.drop-group { border: 1px solid #3a3a3a; border-radius: 4px; margin-bottom: 15px; background-color: #252525; }
.group-header { background: #333; padding: 10px; font-weight: bold; text-transform: capitalize; border-bottom: 1px solid #3a3a3a; }
.group-header .chance { float: right; color: #87cefa; }

.drop-table { width: 100%; border-collapse: collapse; }
.drop-table td, .drop-table th { padding: 10px; text-align: left; border-bottom: 1px solid #3a3a3a; font-size: 14px; }
.drop-table tr:last-child td { border-bottom: none; }

.clickable-item:hover, .clickable-npc:hover { background-color: rgba(244, 199, 0, 0.1); cursor: pointer; }

.npc-main-info { display: flex; gap: 20px; align-items: flex-start; }
.npc-image-container { flex: 0 0 150px; text-align: center; }
.npc-image-container img { max-width: 100%; height: auto; border-radius: 4px; background-color: #111; padding: 5px; border: 1px solid #444; }
.stats-container { flex-grow: 1; }
.stats-container h3 { margin-top: 0; }