/* data pages shared styles */

.data-select {
	padding: 8px 32px 8px 12px;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(85, 57, 35, 0.5);
	border-radius: 4px;
	color: var(--text-color-normal, #c0aa87);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
}

.data-select:hover,
.data-select:focus {
	outline: none;
	border-color: #553923;
}

.data-select option {
	background: #1a1410;
	color: var(--text-color-normal, #c0aa87);
}

.page-header {
	margin-bottom: 2rem;
}

.page-header h1 {
	margin: 0 0 0.5rem 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.breadcrumb-link {
	color: var(--text-muted, #888);
	text-decoration: none;
	font-weight: normal;
}

.breadcrumb-link:hover {
	color: var(--link-color, #4fc3f7);
	text-decoration: underline;
}

.page-breadcrumb {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
	color: var(--text-muted, #888);
	margin-bottom: 1rem;
}

@media (max-width: 1260px) {
	.page-breadcrumb {
		overflow-x: scroll;
  		scrollbar-width: none;
	}
	.page-breadcrumb span {
		white-space: nowrap;
	}
}

@media (max-width: 640px) {
	.page-breadcrumb {
		flex-wrap: wrap;
		row-gap: 0.25rem;
		overflow-x: visible;
	}
}

.breadcrumb-expand {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	font: inherit;
	line-height: 1;
	color: var(--text-muted, #888);
	cursor: pointer;
}

.breadcrumb-expand:hover {
	color: var(--link-color, #4fc3f7);
}

.breadcrumb-sep-icon {
	height: 0.7em;
	width: auto;
	margin: 0 0.4rem;
}

.page-header-icon {
	height: 1.1em;
	width: auto;
	border-radius: 3px;
	margin-right: 0.4em;
}

.header-icon {
	display: flex;
	gap: 0.25em;
	margin-right: 0.4em;
}

.header-icon .data-icon {
	height: 1.1em;
	width: auto;
}

.page-description {
	color: var(--text-color-normal, #c0aa87);
	margin: 0;
	line-height: 1.6;
}

.node-subpage-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.node-subpage-link {
	color: var(--text-muted, #888);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.node-subpage-link:hover {
	color: var(--text-color, #fff);
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

.class-link-matrix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.5rem;
	margin: 1.25rem 0;
}

.class-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color-normal, #c0aa87);
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.class-link:hover {
	background: rgba(0, 0, 0, 0.5);
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
	color: var(--text-color, #fff);
	text-decoration: none;
}

.class-link-icon {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	flex-shrink: 0;
}

.class-link-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
}

.page-description p {
	margin: 0 0 0.75rem 0;
}

.page-description p:last-child {
	margin-bottom: 0;
}

.page-description h1,
.page-description h2,
.page-description h3,
.page-description h4,
.page-description h5,
.page-description h6 {
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
	margin: 0.5em 0;
}

.page-description h1:first-child,
.page-description h2:first-child,
.page-description h3:first-child,
.page-description h4:first-child,
.page-description h5:first-child,
.page-description h6:first-child {
	margin-top: 0;
}

.page-description h1 { font-size: 1.8em; }
.page-description h2 { font-size: 1.5em; }
.page-description h3 { font-size: 1.3em; }
.page-description h4 { font-size: 1.1em; }
.page-description h5 { font-size: 1em; }
.page-description h6 { font-size: 0.9em; }

.page-description strong {
	color: var(--text-color, #fff);
}

.page-description em {
	font-style: italic;
}

.page-description hr {
	border: none;
	border-top: 1px solid var(--text-color-normal, #c0aa87);
	margin: 1.25rem 0;
}

.page-description a {
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
}

.page-description a:hover {
	text-decoration: underline;
}

.page-description ul,
.page-description ol {
	margin: 0.5rem 0;
	padding-left: 1.5rem;
}

.page-description li {
	margin: 0.25rem 0;
}

.page-description code {
	background: var(--bg-tertiary, rgba(0, 0, 0, 0.4));
	padding: 0.15rem 0.35rem;
	border-radius: 3px;
	font-family: monospace;
	font-size: 0.9em;
}

.page-description pre {
	background: var(--bg-tertiary, rgba(0, 0, 0, 0.4));
	padding: 0.75rem 1rem;
	border-radius: 4px;
	overflow-x: auto;
	margin: 0.75rem 0;
}

.page-description pre code {
	background: none;
	padding: 0;
}

.page-description .editorial-image {
	margin: 1rem 0;
}

.page-description .editorial-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.page-description .editorial-image figcaption {
	margin-top: 0.4rem;
	font-size: 0.9em;
	color: var(--text-muted, #888);
	font-style: italic;
}

/* tag chip styles now in shared tag-chips.css */

.data-loading,
.data-error {
	padding: 2rem;
	text-align: center;
	color: var(--text-muted, #888);
}

.data-error {
	color: var(--error-color, #e74c3c);
}

/* data table */
.data-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.data-table thead {
	background: var(--bg-tertiary, rgba(0, 0, 0, 0.4));
}

.data-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.data-table th.sortable-col {
	cursor: pointer;
	user-select: none;
	transition: color 0.15s ease;
}

.data-table th.sortable-col:hover {
	color: var(--primary-color, #4fc3f7);
}

.data-table th.sorted-col {
	color: var(--primary-color, #4fc3f7);
}

.data-table th .sort-arrow {
	margin-left: 0.35rem;
	font-size: 0.8em;
	color: var(--text-muted, #888);
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.data-table th.sortable-col:hover .sort-arrow,
.data-table th.sorted-col .sort-arrow {
	color: inherit;
	opacity: 1;
}

.data-table td {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.data-table tbody tr:last-child td {
	border-bottom: none;
}

.data-table tbody tr.clickable {
	cursor: pointer;
	transition: background 0.15s ease;
}

.data-table tbody tr.clickable:hover {
	background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.data-table a {
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
}

.data-table a:hover {
	text-decoration: underline;
}

.data-table .track-player {
	height: 32px;
	max-width: 260px;
	vertical-align: middle;
}

/* mobile: collapse rows into cards (icon + title header, fields stacked below) */
@media (max-width: 900px) {
	.data-table {
		background: none;
		border-radius: 0;
		overflow: visible;
	}

	.data-table thead {
		display: none;
	}

	.data-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 0.75rem;
		padding: 0.75rem 1rem;
		margin-bottom: 0.75rem;
		background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
		border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
		border-radius: 4px;
	}

	.data-table tbody tr:last-child td,
	.data-table td {
		border-bottom: none;
	}

	.data-table td {
		display: block;
		padding: 0;
	}

	.data-table td:empty {
		display: none;
	}

	/* header row: icon left, title fills remaining width */
	.data-table td.card-icon,
	.data-table td.select-col {
		flex: 0 0 auto;
		width: auto;
		white-space: normal;
	}

	.data-table td.card-title {
		flex: 1 1 0;
		min-width: 0;
		font-size: 1.05rem;
		font-weight: 600;
		word-break: break-word;
	}

	/* remaining fields stack full-width as label : value pairs */
	.data-table td:not(.card-icon):not(.card-title):not(.select-col) {
		flex: 1 0 100%;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		min-width: 0;
	}

	.data-table td:not(.card-icon):not(.card-title):not(.select-col)::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--text-muted, #888);
		font-size: 0.85rem;
		font-weight: 600;
	}
}

/* icons in tables */
.data-icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	vertical-align: middle;
	border-radius: 4px;
}

/* icon quality glow */
.data-icon-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.data-icon-wrap > .data-icon {
	display: block;
}

.data-icon-wrap[data-quality]::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/interface/icon-quality-overlay.webp');
	background-size: 100% 700%;
	background-repeat: no-repeat;
	pointer-events: none;
	border-radius: 4px;
	mix-blend-mode: screen;
}

.data-icon-wrap[data-quality="1"]::after { background-position-y: 0%; }
.data-icon-wrap[data-quality="2"]::after { background-position-y: 16.6667%; }
.data-icon-wrap[data-quality="3"]::after { background-position-y: 33.3333%; }
.data-icon-wrap[data-quality="4"]::after { background-position-y: 50%; }
.data-icon-wrap[data-quality="5"]::after { background-position-y: 66.6667%; }
.data-icon-wrap[data-quality="6"]::after { background-position-y: 83.3333%; }
.data-icon-wrap[data-quality="7"]::after { background-position-y: 100%; }

.icon-link {
	display: inline-block;
}

.data-icon-group {
	display: inline-flex;
	gap: 2px;
}

/* pagination */
.pagination {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0;
	flex-wrap: wrap;
}

.pagination-btn {
	padding: 0.5rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	min-width: 2.5rem;
	text-align: center;
}

.pagination-btn:hover:not(:disabled):not(.active) {
	background: var(--bg-hover, rgba(255, 255, 255, 0.05));
	border-color: var(--border-hover, rgba(85, 57, 35, 0.8));
}

.pagination-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination-btn.active {
	background: var(--bg-highlight, rgba(85, 57, 35, 0.3));
	border-color: var(--primary-color, #4fc3f7);
	color: var(--text-color, #fff);
}

.pagination-ellipsis {
	padding: 0.5rem;
	color: var(--text-muted, #888);
}

.pagination-info {
	margin-left: auto;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

/* node thumbnail */
.node-thumbnail {
	margin-bottom: 2rem;
	max-width: 400px;
	background-image: url(/static/images/interface/decor-bg.webp?v=1a2a049);
	background-size: cover;
	background-position: center;
	border-radius: 4px;
}

.node-thumbnail-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

/* zone map */
.zone-map-outer {
	position: relative;
	max-width: 900px;
	margin-inline: auto;
	margin-bottom: 2rem;
}

.zone-map-wrapper {
	position: relative;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.zone-poi-layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	overflow: hidden;
}

.zone-flight-routes {
	width: 100%;
	height: 100%;
}

.zone-flight-routes line {
	stroke: #000;
	stroke-width: 3px;
	vector-effect: non-scaling-stroke;
}

.zone-map-canvas {
	display: block;
	width: 100%;
	height: auto;
}

.zone-highlight-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	mix-blend-mode: plus-lighter;
}

.zone-overlay-label {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 0.875rem;
	border-radius: 4px;
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

.zone-map-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted, #888);
	font-size: 1rem;
	z-index: 1;
	pointer-events: none;
}

.zone-map-pin-layer {
	position: absolute;
	inset: 0;
	z-index: 3;
	cursor: crosshair;
}

.zone-map-coords {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #ffd100;
	font-size: 0.75rem;
	font-family: 'Friz Quadrata', Arial, sans-serif;
	border-radius: 3px;
	pointer-events: none;
	z-index: 4;
	white-space: nowrap;
}

.zone-map-pin {
	position: absolute;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
	background-image: url('../images/interface/objecticons.webp');
	background-size: 192px 192px;
	background-position: -48px 0px;
	cursor: pointer;
	z-index: 4;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
	transition: transform 0.1s ease;
}

.zone-map-pin:hover {
	transform: translate(-50%, -50%) scale(1.25);
}

.wcdb-tooltip.zone-map-pin-tooltip {
	position: fixed;
	z-index: 99999;
	pointer-events: none;
	padding: 4px 8px;
	min-width: auto;
	max-width: none;
	white-space: nowrap;
	color: #ffd100;
	font-size: 13px;
}

.zone-map-outer:has(+ .zone-map-controls) {
	margin-bottom: 0;
}

.zone-map-controls {
	display: flex;
	gap: 1rem;
	max-width: 900px;
	margin: 0.5rem auto 2rem;
}

.zone-map-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	cursor: pointer;
	color: var(--text-muted, #888);
	font-size: 0.8125rem;
	user-select: none;
}

.zone-map-toggle input {
	accent-color: var(--accent, #5b9bd5);
}

/* zone map POI pins */
.zone-poi-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 5;
	pointer-events: auto;
	cursor: default;
}

.zone-poi-icon {
	display: block;
	background-image: url(/static/images/interface/map-poi-atlas.webp?v=9ef28f3);
	background-size: 1024px 1024px;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
	transform: scale(0.75);
	transition: transform 0.1s ease;
}

.zone-poi-pin:hover .zone-poi-icon {
	transform: scale(1);
}

/* POI filter icon preview in dropdown */
.zone-poi-filter-icon {
	display: inline-block;
	background-image: url(/static/images/interface/map-poi-atlas.webp?v=9ef28f3);
	background-size: 1024px 1024px;
	flex-shrink: 0;
	image-rendering: pixelated;
}

.zone-poi-filter-menu {
	min-width: 200px;
}

/* difficulty selector */
.instance-difficulty-container {
	padding: 15px;
}

.item-difficulty-container {
	margin-bottom: 1rem;
}

/* instance dungeon/raid map */
.instance-map {
	margin-bottom: 2rem;
}

.instance-map-floor-select {
	margin-bottom: 0.5rem;
}

.instance-map-container {
	position: relative;
	container-type: inline-size;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.instance-map-canvas {
	display: block;
	width: 100%;
	height: auto;
}

.instance-map-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted, #888);
	font-size: 1rem;
	z-index: 1;
	pointer-events: none;
}

.instance-map-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	text-decoration: none;
}

.instance-map-pin-icon {
	display: block;
	width: clamp(16px, 2.4cqw, 32px);
	height: clamp(16px, 2.4cqw, 32px);
	border-radius: 50%;
	border: 2px solid rgba(255, 215, 0, 0.8);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.instance-map-pin:hover .instance-map-pin-icon {
	transform: scale(1.2);
	border-color: #ffd700;
}

/* quest objective map */
.quest-map {
	margin-bottom: 2rem;
}

.quest-map h2 {
	margin-bottom: 0.5rem;
}

.quest-poi-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.quest-map-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	cursor: default;
}

.quest-map-pin-icon {
	display: block;
	width: 24px;
	height: 30px;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
	transition: transform 0.15s ease;
}

.quest-map-pin:hover .quest-map-pin-icon {
	transform: scale(1.3);
}

/* start marker uses objecticons atlas (192px display, 24px cells): row 1, col 1 */
.quest-map-start-icon {
	width: 24px;
	height: 24px;
	background-image: url('../images/interface/objecticons.webp');
	background-size: 192px 192px;
	background-position: -24px -24px;
}

/* drop-source / objective spawn markers, synced with the quest item drops table */
.quest-map-marker {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.7);
	background: var(--primary-color, #4fc3f7);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	transition: transform 0.15s ease, background 0.15s ease;
}

.quest-map-marker.is-objective {
	background: #ffd700;
}

.quest-map-pin:hover .quest-map-marker,
.quest-map-marker.is-highlight {
	transform: scale(1.6);
	background: #ffffff;
}

.quest-map-pin:has(.quest-map-marker.is-highlight) {
	z-index: 3;
}

.quest-item-drops {
	margin-bottom: 2rem;
}

.quest-item-drops .data-table tbody tr:hover {
	background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

/* npc spawn marker: objecticons atlas row 0, col 8 */
.npc-map-spawn-icon {
	width: 24px;
	height: 24px;
	background-image: url('../images/interface/objecticons.webp');
	background-size: 192px 192px;
	background-position: -168px 0px;
}

/* encounter model viewer */
.encounter-model-viewer {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.encounter-model-info {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.encounter-model-viewer {
		flex-direction: column;
	}
}

.encounter-model-container {
	position: relative;
	flex-shrink: 0;
	width: 394px;
	max-width: 100%;
	aspect-ratio: 394 / 425;
	border-radius: 8px;
	border: 1px solid #3a3028;
	background-color: rgba(0, 0, 0, 0.4);
	background-image: url(/static/images/interface/collection-model-bg.webp?v=5e82888);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.encounter-model-container.encounter-bg {
	background-size: 180%;
	background-position: -60px -60px;
}

.encounter-model-container::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 0;
}

.encounter-model-container > * {
	position: relative;
	z-index: 1;
}

.encounter-model-select {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}


.encounter-model-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	cursor: grab;
	touch-action: none;
}

.encounter-model-canvas:active {
	cursor: grabbing;
}

.encounter-model-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}

.encounter-model-spinner {
	width: 48px;
	height: 48px;
	animation: encounter-spinner-rotate 1s linear infinite;
}

@keyframes encounter-spinner-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.encounter-model-name {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 1.1rem;
	color: #fff;
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}

/* node lore section */
.node-lore-section {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.node-lore-image {
	flex-shrink: 0;
	align-self: flex-start;
	width: 323px;
	max-width: 100%;
	aspect-ratio: 323 / 248;
	background-size: calc(512 / 323 * 100%) calc(512 / 248 * 100%);
	background-position: calc(35 / 189 * 100%) calc(47 / 264 * 100%);
	background-repeat: no-repeat;
	border-radius: 4px;
}

.node-lore-description {
	flex: 1;
	min-width: 0;
}

@media (max-width: 600px) {
	.node-lore-section {
		flex-direction: column;
	}
}

/* reputation bar */
.reputation-bar-container {
	margin-bottom: 2rem;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.reputation-bar-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.reputation-bar {
	width: 120px;
	height: 20px;
	border-radius: 4px;
	border: 1px solid rgba(85, 57, 35, 0.5);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 60%);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.reputation-bar-label {
	font-size: 13px;
	color: var(--text-color, #e7d9c0);
	white-space: nowrap;
	font-weight: 600;
}

.reputation-bar-value {
	font-weight: 400;
	color: var(--text-color-muted, #887860);
}

/* node text fields */
.node-text-fields {
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.node-field {
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	padding: 1rem;
}

.node-field-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

/* node info table */
.node-info-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 2rem;
}

.node-info-table th {
	padding: 0.6rem 1rem;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	width: 1%;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.node-info-table td {
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.node-info-table tr:last-child th,
.node-info-table tr:last-child td {
	border-bottom: none;
}

.node-field-value {
	font-size: 1rem;
}

/* signal clickable values in info tables */
.node-info-table td a,
.node-field a {
	text-decoration: underline dotted;
	text-underline-offset: 0.2em;
}

.node-info-table td a:hover,
.node-field a:hover {
	text-decoration: underline solid;
}

/* difficulty bands: quest level thresholds, tradeskill skill thresholds */
.difficulty-band {
	margin-right: 0.6rem;
}

.difficulty-band:last-child {
	margin-right: 0;
}

.difficulty-band-red {
	color: #ff2020;
}

.difficulty-band-orange {
	color: #ff8040;
}

.difficulty-band-yellow {
	color: #ffff00;
}

.difficulty-band-green {
	color: #40c040;
}

.difficulty-band-grey {
	color: #9d9d9d;
}

/* npc faction reaction: one entry per player side */
.npc-reaction {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-right: 0.8rem;
}

.npc-reaction:last-child {
	margin-right: 0;
}

.npc-reaction-icon {
	width: 16px;
	height: 16px;
}

.npc-reaction-friendly {
	color: #40c040;
}

.npc-reaction-neutral {
	color: #ffff00;
}

.npc-reaction-hostile {
	color: #ff2020;
}

/* mobile: stack key/value pairs vertically */
@media (max-width: 900px) {
	.node-info-table,
	.node-info-table tr,
	.node-info-table th,
	.node-info-table td {
		display: block;
		width: auto;
	}

	.node-info-table th {
		white-space: normal;
		padding-bottom: 0.2rem;
		border-bottom: none;
	}

	.node-info-table td {
		padding-top: 0;
		border-bottom: none;
	}

	.node-info-table tr:not(:last-child) {
		border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
	}
}

/* achievement series */
.achievement-series {
	margin-bottom: 2rem;
}

.achievement-series h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.series-list {
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.series-entry {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: var(--link-color, #4fc3f7);
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
	transition: background 0.15s ease;
	cursor: pointer;
}

.series-entry:last-child {
	border-bottom: none;
}

.series-entry:hover {
	background: var(--bg-hover, rgba(255, 255, 255, 0.05));
	text-decoration: none;
}

.series-entry.series-current {
	background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

/* quest storyline */
.quest-storyline {
	margin-bottom: 2rem;
}

.quest-storyline h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

/* tabs */
.node-tabs {
	margin-top: 2rem;
}

.tab-headers {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
	margin-bottom: 1rem;
}

.tab-header {
	flex: 0 0 auto;
	max-width: 100%;
	padding: 0.75rem 1.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: var(--text-muted, #888);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	font-size: 1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tab-header:hover {
	color: var(--text-color, #fff);
}

.tab-header.active {
	color: var(--primary-color, #4fc3f7);
	border-bottom-color: var(--primary-color, #4fc3f7);
}

.tab-content {
	padding: 1rem 0;
}

@media (max-width: 640px) {
	.tab-header {
		padding: 0.6rem 0.9rem;
		font-size: 0.9rem;
	}

	.encounter-section-tab {
		padding: 0.5rem 0.8rem;
		font-size: 0.9rem;
	}
}

.tab-filter-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

/* reagent list */
.reagent-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.reagent-item {
	position: relative;
	display: inline-block;
}

.reagent-icon {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}

.reagent-quantity {
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 0.75rem;
	padding: 0 0.25rem;
	border-radius: 2px;
}

/* vendor cost (extended cost tokens alongside gold price) */
.vendor-cost {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.vendor-cost-token {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vendor-cost-icon {
	width: 24px;
	height: 24px;
	border-radius: 4px;
}

.vendor-cost-qty {
	font-variant-numeric: tabular-nums;
}

/* edit link in page header */
.page-header {
	position: relative;
}

.page-header-actions {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.report-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.25rem;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.report-btn:hover {
	opacity: 1;
}

.report-btn svg {
	width: 18px;
	height: 18px;
	color: #e88;
}

.edit-link {
	color: var(--text-muted, #888);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.edit-link:hover {
	color: var(--text-color, #fff);
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

button.edit-link {
	background: none;
	font-family: inherit;
	cursor: pointer;
}

/* edit content page */
.edit-form .form-group {
	margin-bottom: 1.5rem;
}

.edit-form label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

.edit-form textarea {
	width: 100%;
	padding: 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	font-family: monospace;
	font-size: 0.95rem;
	line-height: 1.5;
	resize: vertical;
}

.edit-form textarea:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.form-actions {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.btn {
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-primary {
	background: var(--primary-color, #4fc3f7);
	color: #000;
}

.btn-primary:hover:not(:disabled) {
	background: var(--primary-hover, #81d4fa);
}

.btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-secondary {
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	color: var(--text-color, #fff);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.btn-secondary:hover {
	background: var(--bg-hover, rgba(255, 255, 255, 0.1));
}

.form-error {
	color: var(--error-color, #e74c3c);
	margin-top: 1rem;
}

.form-success {
	color: var(--success-color, #2ecc71);
	margin-top: 1rem;
}

.audit-trail {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

.audit-trail p {
	margin: 0;
}

.audit-trail strong {
	color: var(--text-color, #fff);
}

.audit-trail h3 {
	margin: 0 0 0.75rem 0;
	font-size: 1rem;
	color: var(--text-muted, #888);
}

.recent-revisions {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recent-revisions li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
	font-size: 0.9rem;
}

.recent-revisions li:last-child {
	border-bottom: none;
}

.recent-revisions a {
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
}

.recent-revisions a:hover {
	text-decoration: underline;
}

.revision-summary {
	color: var(--text-muted, #888);
	font-style: italic;
}

.view-full-history {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
	font-size: 0.9rem;
}

.view-full-history:hover {
	text-decoration: underline;
}

/* text input styling */
.edit-form input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	font-size: 0.95rem;
}

.edit-form input[type="text"]:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

/* revision history page */
.revision-compare-form {
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.compare-hint {
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

.revision-table input[type="checkbox"] {
	cursor: pointer;
}

.action-link {
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
	margin-right: 0.75rem;
}

.action-link:hover {
	text-decoration: underline;
}

.data-empty {
	padding: 2rem;
	text-align: center;
	color: var(--text-muted, #888);
}

/* diff view */
.diff-meta {
	display: flex;
	gap: 2rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.diff-meta-item {
	flex: 1;
	min-width: 250px;
	padding: 1rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
}

.diff-meta-item strong {
	display: block;
	margin-bottom: 0.5rem;
}

.diff-meta-item span {
	display: block;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

.diff-summary {
	margin-top: 0.5rem;
	font-style: italic;
}

.diff-view {
	font-family: monospace;
	font-size: 0.9rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow-x: auto;
}

.diff-line {
	display: flex;
	padding: 0.125rem 0.5rem;
	white-space: pre-wrap;
	word-break: break-all;
}

.diff-line-added {
	background: rgba(46, 204, 113, 0.2);
}

.diff-line-removed {
	background: rgba(231, 76, 60, 0.2);
}

.diff-line-unchanged {
	color: var(--text-muted, #888);
}

.diff-prefix {
	width: 1.5em;
	flex-shrink: 0;
	user-select: none;
	color: var(--text-muted, #888);
}

.diff-line-added .diff-prefix {
	color: var(--success-color, #2ecc71);
}

.diff-line-removed .diff-prefix {
	color: var(--error-color, #e74c3c);
}

.diff-content {
	flex: 1;
}

.diff-empty {
	padding: 2rem;
	text-align: center;
	color: var(--text-muted, #888);
}

/* revision view page */
.revision-meta {
	margin-bottom: 1.5rem;
	padding: 1rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
}

.revision-meta p {
	margin: 0;
	line-height: 1.6;
}

.revision-content {
	margin-bottom: 1.5rem;
}

.revision-content pre {
	padding: 1rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}

/* list search */
.list-search {
	position: relative;
	margin-bottom: 1rem;
	max-width: 320px;
}

.list-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 2rem 0.6rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	font-size: 0.95rem;
}

.list-search-input::placeholder {
	color: var(--text-muted, #888);
}

.list-search-input:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.list-search-clear {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--text-muted, #888);
	font-size: 1.2rem;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
	line-height: 1;
}

.list-search-clear:hover {
	color: var(--text-color, #fff);
}

/* list filters */
.list-filters {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.filter-dropdown {
	position: relative;
}

.filter-dropdown-toggle {
	padding: 0.5rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.filter-dropdown-toggle:hover {
	color: var(--text-color, #fff);
	border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

.filter-dropdown-toggle.active {
	border-color: var(--primary-color, #4fc3f7);
	color: var(--text-color, #fff);
}

.filter-dropdown-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 180px;
	max-height: 280px;
	overflow-y: auto;
	background: rgba(20, 18, 15, 0.97);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	z-index: 100;
	padding: 0.25rem 0;
}

.filter-dropdown-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
	transition: background 0.1s ease;
	font-size: 0.9rem;
}

.filter-dropdown-option:hover {
	background: rgba(255, 255, 255, 0.05);
}

.filter-dropdown-option input[type="checkbox"] {
	cursor: pointer;
	flex-shrink: 0;
}

.filter-option-label {
	font-weight: 500;
}

.filter-range {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.5rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
	white-space: nowrap;
}

.filter-range.active {
	border-color: var(--primary-color, #4fc3f7);
	color: var(--text-color, #fff);
}

.filter-range-input {
	width: 4.5rem;
	padding: 0.25rem 0.35rem;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 3px;
	color: var(--text-color, #fff);
	font-size: 0.85rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.filter-range-input:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.filter-range-input::-webkit-outer-spin-button,
.filter-range-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.filter-range-sep {
	color: var(--text-muted, #888);
}

/* the query builder owns a full row inside the wrapping flex container */
.filter-advanced {
	flex-basis: 100%;
	order: 1;
}

.filter-advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.5rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
	cursor: pointer;
}

.filter-advanced-toggle.active {
	border-color: var(--primary-color, #4fc3f7);
	color: var(--text-color, #fff);
}

.filter-advanced-count {
	padding: 0 0.35rem;
	background: var(--primary-color, #4fc3f7);
	border-radius: 8px;
	color: #000;
	font-size: 0.75rem;
	font-weight: 600;
}

.filter-advanced-caret {
	font-size: 0.6rem;
}

.filter-advanced-rows {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.filter-advanced-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.filter-advanced-field {
	min-width: 12rem;
}

.filter-advanced-op {
	min-width: 9rem;
}

.filter-advanced-value {
	min-width: 12rem;
	padding: 0.25rem 0.35rem;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 3px;
	color: var(--text-color, #fff);
	font-size: 0.85rem;
}

.filter-advanced-value:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.filter-advanced-remove {
	width: 1.6rem;
	height: 1.6rem;
	background: transparent;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 3px;
	color: var(--text-muted, #888);
	cursor: pointer;
	line-height: 1;
}

.filter-advanced-remove:hover:not(:disabled) {
	border-color: var(--primary-color, #4fc3f7);
	color: var(--text-color, #fff);
}

.filter-advanced-remove:disabled {
	opacity: 0.35;
	cursor: default;
}

.filter-clear-btn {
	padding: 0.5rem 0.75rem;
	background: none;
	border: none;
	color: var(--text-muted, #888);
	font-size: 0.85rem;
	cursor: pointer;
	transition: color 0.15s ease;
}

.filter-clear-btn:hover {
	color: var(--text-color, #fff);
}

/* list staff controls (blacklist features) */
.list-staff-controls {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	flex-wrap: wrap;
}

.staff-toggle {
	display: flex;
	align-items: center;
}

.toggle-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
	user-select: none;
}

.toggle-label:hover {
	color: var(--text-color, #fff);
}

.toggle-label input[type="checkbox"] {
	cursor: pointer;
}

.list-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.action-label {
	color: var(--text-muted, #888);
	font-size: 0.9rem;
	margin-right: 0.25rem;
}

.action-btn {
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.action-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.action-blacklist {
	background: rgba(231, 76, 60, 0.2);
	color: var(--error-color, #e74c3c);
	border-color: rgba(231, 76, 60, 0.3);
}

.action-blacklist:hover:not(:disabled) {
	background: rgba(231, 76, 60, 0.3);
	border-color: rgba(231, 76, 60, 0.5);
}

.action-whitelist {
	background: rgba(46, 204, 113, 0.2);
	color: var(--success-color, #2ecc71);
	border-color: rgba(46, 204, 113, 0.3);
}

.action-whitelist:hover:not(:disabled) {
	background: rgba(46, 204, 113, 0.3);
	border-color: rgba(46, 204, 113, 0.5);
}

.action-clear {
	background: var(--bg-tertiary, rgba(0, 0, 0, 0.4));
	color: var(--text-muted, #888);
}

.action-clear:hover:not(:disabled) {
	background: var(--bg-hover, rgba(255, 255, 255, 0.1));
	color: var(--text-color, #fff);
}

/* icon column shrinks to content width */
.data-table .icon-col {
	width: 1px;
	white-space: nowrap;
}

/* selection column */
.data-table .select-col {
	width: 40px;
	text-align: center;
	padding: 0.5rem;
}

.data-table .select-col input[type="checkbox"] {
	cursor: pointer;
	width: 16px;
	height: 16px;
}

/* blacklisted row styling */
/* qualifier appended to a link renderer cell */
.data-link-note {
	margin-left: 0.4em;
	font-size: 0.8em;
	color: var(--text-muted);
	white-space: nowrap;
}

/* styled text renderer */
.styled-text {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.styled-text-icon {
	width: 1em;
	height: 1em;
}

.role-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url(/static/images/interface/role-icons.webp?v=e96a4eb);
	background-repeat: no-repeat;
	background-size: 3em 1em;
	vertical-align: middle;
}

.role-icon-0 { background-position: 0 0; }
.role-icon-1 { background-position: -1em 0; }
.role-icon-2 { background-position: -2em 0; }

.data-table tbody tr.blacklisted {
	background: rgba(231, 76, 60, 0.1);
}

.data-table tbody tr.blacklisted:hover {
	background: rgba(231, 76, 60, 0.15);
}

/* item quality styling */
.item-quality {
	font-weight: 500;
}

/* filter tree dropdown */
.filter-tree-menu {
	max-height: none;
	overflow: visible;
	min-width: 200px;
}

.filter-tree-row {
	position: relative;
}

.filter-tree-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	cursor: pointer;
	transition: background 0.1s ease;
	font-size: 0.9rem;
}

.filter-tree-group:hover {
	background: rgba(255, 255, 255, 0.05);
}

.filter-tree-group input[type="checkbox"] {
	cursor: pointer;
	flex-shrink: 0;
}

.filter-tree-icon {
	width: 18px;
	height: 18px;
	border-radius: 3px;
	object-fit: cover;
	flex-shrink: 0;
}

.filter-tree-arrow {
	margin-left: auto;
	color: var(--text-muted, #888);
	font-size: 1.1em;
}

.filter-tree-submenu {
	position: absolute;
	top: 0;
	left: calc(100% - 2px);
	min-width: 160px;
	background: rgba(20, 18, 15, 0.97);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	padding: 0.25rem 0;
	z-index: 101;
}

/* pet stats calculator */
.pet-matchup-section {
	margin-bottom: 2rem;
}

.pet-matchup-section h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.pet-matchup-rows {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.pet-matchup-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 1.5rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	min-width: 100px;
}

.pet-matchup-label {
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.pet-matchup-value {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-color-header, #fff);
}

.pet-matchup-badge {
	width: 32px;
	height: 32px;
}

.pet-matchup-icon {
	width: 32px;
	height: 32px;
}

.pet-stats-section {
	margin-bottom: 2rem;
}

.pet-stats-section h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.pet-stats-controls {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	align-items: flex-end;
}

.pet-stats-control {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pet-stats-control label {
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}


.pet-stats-control input[type="range"] {
	width: 160px;
	cursor: pointer;
	accent-color: #553923;
}

.pet-stats-values {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.pet-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 1.5rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	min-width: 100px;
}

.pet-stat-label {
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.pet-stat-value {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--text-color-header, #fff);
}

.pet-stat-icon {
	width: 30px;
	height: 30px;
}

/* dictionary table */

.dictionary-section {
	margin-bottom: 2rem;
}

.dictionary-section h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.dictionary-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.dictionary-table thead {
	background: var(--bg-tertiary, rgba(0, 0, 0, 0.4));
}

.dictionary-table th {
	padding: 0.6rem 1rem;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.dictionary-table td {
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.dictionary-table tbody tr:last-child td {
	border-bottom: none;
}

.dictionary-length {
	white-space: nowrap;
	width: 1%;
	font-weight: 600;
	color: var(--text-color-header, #fff);
}

.dictionary-words {
	color: var(--text-color-normal, #c0aa87);
}

/* translator */

.translator-section {
	margin-bottom: 2rem;
}

.translator-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.translator-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.translator-header-content {
	flex: 1;
}

.translator-header-content h2 {
	margin: 0 0 0.5rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}


.translator-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.translator-column {
	display: flex;
	flex-direction: column;
}

.translator-label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.translator-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	font-size: 0.95rem;
	font-family: inherit;
	line-height: 1.5;
	resize: none;
	flex: 1;
}

.translator-input:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.translator-output {
	padding: 0.6rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color-normal, #c0aa87);
	font-size: 0.95rem;
	line-height: 1.5;
	flex: 1;
	white-space: pre-wrap;
	word-break: break-word;
}

@media (max-width: 600px) {
	.translator-body {
		grid-template-columns: 1fr;
	}
}

/* wow token prices */

.wow-token-section {
	margin-bottom: 2rem;
}

.wow-token-section h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.wow-token-prices {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.wow-token-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 1.5rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	min-width: 100px;
}

.wow-token-region {
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.wow-token-gold {
	font-size: 1.5rem;
	font-weight: 700;
}

.wow-token-coin {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 2px;
}

/* line graph */

.line-graph {
	position: relative;
}

.line-graph-legend {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}

.line-graph-legend-btn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 4px 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(85, 57, 35, 0.5);
	border-radius: 4px;
	color: var(--text-color-normal, #c0aa87);
	font-size: 13px;
	cursor: pointer;
	transition: opacity 0.15s;
}

.line-graph-legend-btn:hover {
	border-color: rgba(85, 57, 35, 0.8);
}

.line-graph-legend-btn.is-hidden {
	opacity: 0.5;
}

.line-graph-legend-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1.5px solid;
	transition: background 0.15s;
}

.line-graph-legend-tick {
	font-size: 10px;
	line-height: 1;
	color: #000;
	font-weight: 700;
}

.line-graph-canvas-wrap {
	position: relative;
}

.line-graph-canvas-wrap canvas {
	display: block;
	width: 100%;
	cursor: crosshair;
}

.line-graph-tooltip {
	position: absolute;
	top: 8px;
	transform: translateX(-50%);
	background: rgba(15, 10, 5, 0.95);
	border: 1px solid #553923;
	border-radius: 4px;
	padding: 8px 12px;
	pointer-events: none;
	white-space: nowrap;
	z-index: 10;
	font-size: 13px;
}

.line-graph-tooltip-date {
	color: var(--text-muted, #888);
	font-size: 12px;
	margin-bottom: 4px;
}

.line-graph-tooltip-color {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

.line-graph-tooltip-row {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-color-normal, #c0aa87);
}

.line-graph-tooltip-val {
	margin-left: auto;
	font-weight: 600;
	color: #ffd100;
}

/* money price display */

.price-display {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.price-gold,
.price-silver,
.price-copper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.price-gold::after,
.price-silver::after,
.price-copper::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.price-bonus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	opacity: 0.7;
}

.price-suffix {
	margin-left: 2px;
	opacity: 0.7;
}

.bool-tick {
	color: #4caf50;
}

.bool-cross {
	color: #d34e4e;
}

/* quest objectives */

.quest-provided-item {
	margin-bottom: 2rem;
}

.quest-provided-item-title {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--text-muted, #888);
	margin-bottom: 0.75rem;
}

.quest-objectives {
	margin-bottom: 2rem;
}

.quest-objectives-title {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--text-muted, #888);
	margin-bottom: 0.75rem;
}

.quest-objectives-list {
	margin: 0;
	padding-left: 1.25rem;
}

.quest-objectives-list li {
	margin-bottom: 0.25rem;
}

.quest-objective-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
}

.quest-objective-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	box-sizing: border-box;
	border: 3px solid transparent;
	border-image-source: url('../images/interface/tooltip-icon.webp');
	border-image-slice: 4;
	image-rendering: pixelated;
}

/* quest rewards */

.quest-rewards {
	margin-bottom: 2rem;
}

.quest-rewards-title {
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--text-muted, #888);
	margin-bottom: 0.75rem;
}

.quest-reward-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	max-width: 600px;
	margin-bottom: 0.75rem;
}

.quest-reward-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	padding: 0.25rem;
	border-radius: 4px;
}

.quest-reward-item:hover {
	background: var(--color-bg-secondary, rgba(255, 255, 255, 0.05));
}

.quest-reward-item-name {
	font-size: 0.95rem;
}

.quest-reward-choice {
	margin-bottom: 0.75rem;
}

.quest-reward-choice-label {
	display: block;
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	margin-bottom: 0.5rem;
	font-style: italic;
}

.quest-reward-choice-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* class/spec-filtered rewards carry adornment icons; give them the full row so the audience reads cleanly */
.quest-reward-choice-row:has(.quest-reward-specs) {
	grid-column: 1 / -1;
}

.quest-reward-specs {
	display: inline-flex;
	gap: 4px;
}

.quest-reward-spec-icon {
	display: inline-flex;
	border: 2px solid #fff468;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}

.quest-reward-spec-icon .data-icon {
	width: 28px;
	height: 28px;
	border-radius: 0;
}

.quest-reward-money {
	margin-top: 0.25rem;
}

.quest-reward-xp {
	margin-top: 0.25rem;
	color: #555295;
}

.quest-reward-reputation {
	margin-top: 0.25rem;
}

.quest-reward-reputation-entry,
.quest-reward-reputation-entry a {
	color: #7d7ac6;
}

.price-gold::after {
	background-image: url('/static/images/interface/money-gold.webp');
}

.price-silver::after {
	background-image: url('/static/images/interface/money-silver.webp');
}

.price-copper::after {
	background-image: url('/static/images/interface/money-copper.webp');
}

/* report modal */
.report-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.report-modal {
	background: var(--bg-primary, #1a1410);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 8px;
	max-width: 480px;
	width: 90%;
}

.report-modal-header {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.report-modal-header h3 {
	margin: 0;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
	font-size: 1.1rem;
}

.report-modal-body {
	padding: 1.25rem;
}

.report-field {
	margin-bottom: 1rem;
}

.report-field:last-child {
	margin-bottom: 0;
}

.report-field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--text-muted, #888);
	font-size: 0.9rem;
}

.report-input,
.report-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	border-radius: 4px;
	color: var(--text-color, #fff);
	font-size: 0.95rem;
}

.report-input:focus,
.report-textarea:focus {
	outline: none;
	border-color: var(--primary-color, #4fc3f7);
}

.report-input[readonly] {
	opacity: 0.6;
	cursor: default;
}

.report-textarea {
	resize: vertical;
	font-family: inherit;
	line-height: 1.5;
}

.report-error {
	color: var(--error-color, #e74c3c);
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

.report-success {
	color: var(--success-color, #2ecc71);
	font-size: 0.9rem;
	margin-top: 0.75rem;
}

.report-modal-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* icon modal */

.icon-modal {
	max-width: 400px;
}

.icon-modal-body {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.icon-modal-preview {
	width: 64px;
	height: 64px;
	border-radius: 4px;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	flex-shrink: 0;
}

.icon-modal-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.icon-modal-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	background: none;
	border: none;
	padding: 0.2rem 0;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--text-color, #fff);
	cursor: pointer;
	text-align: left;
}

.icon-modal-label {
	color: var(--text-muted, #888);
	font-size: 0.85rem;
	width: 3rem;
	flex-shrink: 0;
}

.icon-modal-value {
	word-break: break-all;
}

.icon-modal-row:hover .icon-modal-value {
	color: var(--primary-color, #4fc3f7);
}

.icon-modal-download {
	margin-top: 0.5rem;
	align-self: flex-start;
	text-decoration: none;
}

.icon-modal-field {
	margin-top: 0.25rem;
}

.icon-modal-field label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--text-muted, #888);
	font-size: 0.85rem;
}

/* encounter journal sections */

.encounter-sections {
	margin-bottom: 2rem;
}

.encounter-section-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
	margin-bottom: 1rem;
}

.encounter-section-tab {
	flex: 0 0 auto;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0.6rem 1.25rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	color: var(--text-muted, #888);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	font-size: 1rem;
}

.encounter-section-tab:hover {
	color: var(--text-color, #fff);
}

.encounter-section-tab.active {
	color: var(--primary-color, #4fc3f7);
	border-bottom-color: var(--primary-color, #4fc3f7);
}

.encounter-section-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ej-section {
	border-radius: 4px;
	overflow: hidden;
}

.ej-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.75rem;
	background: var(--bg-highlight);
	border: 1px solid var(--border-color);
	border-radius: 4px;
	gap: 0.5rem;
}

.ej-section-header-left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.ej-section-icon {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
}

.ej-section-title {
	font-weight: 600;
	color: var(--text-color-header, #fff);
	font-size: 0.95rem;
}

.ej-section-badges {
	display: flex;
	gap: 0.25rem;
	flex-shrink: 0;
}

.ej-section-badge {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url(/static/images/interface/ui-ej-icons.webp?v=1bc448f);
	background-repeat: no-repeat;
	background-size: 192px 48px;
	font-size: 0;
}

.ej-badge-tank { background-position: 0 0; }
.ej-badge-damage { background-position: -24px 0; }
.ej-badge-healer { background-position: -48px 0; }
.ej-badge-heroic { background-position: -72px 0; }
.ej-badge-deadly { background-position: -96px 0; }
.ej-badge-important { background-position: -120px 0; }
.ej-badge-interruptible { background-position: -144px 0; }
.ej-badge-magic { background-position: -168px 0; }
.ej-badge-curse { background-position: 0 -24px; }
.ej-badge-poison { background-position: -24px -24px; }
.ej-badge-disease { background-position: -48px -24px; }
.ej-badge-enrage { background-position: -72px -24px; }
.ej-badge-mythic { background-position: -96px -24px; }
.ej-badge-bleed { background-position: -120px -24px; }

.ej-section-body {
	padding: 0.5rem 0.75rem;
	color: var(--text-color-normal, #c0aa87);
	line-height: 1.6;
	font-size: 0.95rem;
	white-space: pre-line;
}

.ej-section-body:empty {
	display: none;
}

.ej-section-children {
	padding-left: 1.5rem;
	margin-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ej-section-children .ej-section-header {
	background: rgba(85, 57, 35, 0.2);
}

/* tooltip markup inside section descriptions */
.ej-section-body tt-inline-icon {
	width: 16px;
	height: 16px;
	margin: 0 5px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: -28%;
}

.ej-section-body tt-inline-color {
	display: inline;
}

.ej-section-body tt-inline-link {
	color: #ffd100;
	cursor: pointer;
}

.ej-section-body tt-bullet {
	display: block;
	padding: 5px 0 5px 10px;
}

.ej-section-body tt-bullet::before {
	content: "- ";
}

.ej-section-body tt-spell-name {
	color: #ffd100;
}

.ej-section-body tt-difficulty {
	display: inline;
}

/* spell stat panel */
.spell-stats-section,
.spell-effects-section {
	margin-bottom: 2rem;
}

.spell-stats-section h2,
.spell-effects-section h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.3rem;
	font-family: var(--font-display);
	color: var(--text-color-header, #fff);
}

.spell-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--border-color, rgba(255, 255, 255, 0.05));
	border-radius: 4px;
	overflow: hidden;
}

.spell-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.6rem 1rem;
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
}

.spell-stat-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.spell-stat-value {
	font-size: 1rem;
}

.spell-effect-list {
	background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
	border-radius: 4px;
	overflow: hidden;
}

.spell-effect {
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}

.spell-effect:last-child {
	border-bottom: none;
}

.spell-effect-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.spell-effect-index {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted, #888);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.spell-effect-value {
	color: var(--text-muted, #888);
}

.spell-effect-aura {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--text-muted, #888);
}

.spell-effect-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.4rem;
}

.spell-effect-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--link-color, #4fc3f7);
	text-decoration: none;
}

.spell-effect-link:hover {
	text-decoration: underline;
}

.spell-effect-icon {
	width: 24px;
	height: 24px;
	border-radius: 3px;
}

@media (max-width: 700px) {
	.spell-stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}