:root {
	--bg: #0d0f14;
	--panel: #151922;
	--panel-2: #1b2030;
	--border: #2a3142;
	--text: #e6e1d3;
	--muted: #8f96a8;
	--accent: #e0b44c;
	--link: #7fb2ff;
	--tt-bg: #070c21f2;
	--tt-border: #8d8d8d;
	--radius: 6px;
	--font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: var(--bg);
	color: var(--text);
	font: 15px/1.5 var(--font);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; color: var(--accent); }
h3 { font-size: 1rem; }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--muted); }

/* header */
.top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 16px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 10;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 22px; height: 22px; border-radius: 4px; }
.nav { display: flex; gap: 14px; font-size: .95rem; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--text); text-decoration: none; }
.search { flex: 1; max-width: 420px; margin-left: auto; }
.search input {
	width: 100%;
	padding: 7px 10px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--text);
	font: inherit;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; flex: 1; }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 16px; border-top: 1px solid var(--border); }

.card, .cat {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.intro { margin-bottom: 16px; }
.crumbs { font-size: .9rem; margin-bottom: 6px; color: var(--muted); }

/* browse */
.cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; }
.cat > h2 { grid-column: 1 / -1; margin: 0; }
.table h3 a { color: var(--text); }

/* item lists */
.loot { list-style: none; margin: 0; padding: 0; }
.loot li { padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.loot li.sub { color: var(--accent); font-weight: 600; margin-top: 8px; }
.loot li.custom { background: var(--panel-2); border-radius: 4px; padding: 2px 4px; }
.loot li.reworked { background: var(--panel-2); border-radius: 4px; padding: 2px 4px; }
.loot.cols { columns: 260px; column-gap: 20px; }
.loot.cols li { break-inside: avoid; }
.table.wide { grid-column: 1 / -1; }
.tag { font-size: .7rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px; line-height: 1.4; flex: none; }
.item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.item span { overflow: hidden; text-overflow: ellipsis; }
.icon-s { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #000; flex: none; }
.ext-note { font-size: .75rem; }

/* item page */
.item-page { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px 24px; align-items: start; }
.item-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.item-head h1 { margin: 0; }
.icon-l { width: 56px; height: 56px; border-radius: 6px; border: 2px solid #000; box-shadow: 0 0 0 1px var(--border); }
.sources { margin: 0; padding-left: 18px; }
.small { font-size: .82rem; margin: 8px 0 0; }
.obs { grid-column: 2; }
.obs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.obs-table th, .obs-table td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--border); }
.obs-table th:first-child, .obs-table td:first-child { text-align: left; padding-left: 0; }
.obs-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.rate { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 8px; font-size: .9rem; }

/* WoW tooltip */
.tooltip, #hover-tt {
	background: var(--tt-bg);
	border: 1px solid var(--tt-border);
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.35;
	color: #fff;
	max-width: 360px;
}
.tt-name { font-size: 15px; margin-bottom: 2px; }
.tt-white { color: #ffffff; }
.tt-green { color: #1eff00; }
.tt-grey { color: #9d9d9d; }
.tt-flavor { color: #ffd100; }
.tt-new { background: #1eff0022; box-shadow: inset 3px 0 0 #1eff00; padding-left: 6px; margin-left: -6px; }
.tt-old { background: #ff4d4d22; box-shadow: inset 3px 0 0 #ff4d4d; padding-left: 6px; margin-left: -6px; text-decoration: line-through; text-decoration-color: #ff4d4d99; }
.changes { grid-column: 1 / -1; }
.changes + .card { grid-column: 1; }
.changes ~ .obs { grid-column: 2; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.compare h3 { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
#hover-tt { position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 4px 16px #0009; }

@media (max-width: 640px) {
	.top { flex-wrap: wrap; }
	.search { max-width: none; flex-basis: 100%; }
	.nav { margin-left: auto; }
	.item-page { grid-template-columns: 1fr; }
	.obs { grid-column: auto; }
	h1 { font-size: 1.35rem; }
}