@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap");


:root {
	--page-bg: #030812;
	--panel-bg: rgba(6, 15, 27, 0.91);
	--panel-bg-deep: rgba(3, 9, 18, 0.97);
	--card-bg: rgba(8, 20, 34, 0.88);
	--card-bg-hover: rgba(12, 30, 50, 0.98);
	--line: rgba(108, 180, 231, 0.22);
	--line-strong: rgba(120, 190, 239, 0.48);
	--gold: #efc96d;
	--gold-bright: #ffe6a4;
	--gold-soft: rgba(239, 201, 109, 0.2);
	--blue: #8bcdf5;
	--blue-bright: #c6edff;
	--blue-soft: rgba(89, 166, 222, 0.18);
	--text: #f4f7fa;
	--text-muted: #cad4dc;
	--text-dim: #a5b2bc;
	--danger: #d98969;
	--shadow: 0 0 34px rgba(52, 132, 194, 0.11), 0 34px 90px rgba(0, 0, 0, 0.72);
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	background: var(--page-bg);
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	color: var(--text);
	font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	background: var(--page-bg);
}

.page-background {
	position: fixed;
	inset: -12px;
	z-index: -2;
	background-image: url("../../images/paladin-background.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(2px) brightness(0.46) saturate(0.88) contrast(1.04);
	transform: scale(1.025);
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body::before {
	background:
		linear-gradient(180deg, rgba(7, 5, 3, 0.25), rgba(4, 4, 4, 0.68)),
		radial-gradient(circle at 50% 14%, rgba(214, 143, 35, 0.13), transparent 34rem);
}

body::after {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.62)),
		radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.64) 100%);
}

a {
	color: inherit;
}

button {
	font: inherit;
}

.site-shell {
	display: flex;
	flex-direction: column;
	width: min(1180px, calc(100% - 48px));
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	padding: 38px 0 24px;
}

.hero {
	max-width: 900px;
	margin: 0 auto 31px;
	text-align: center;
}

.paladin-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 136px;
	height: 136px;
	margin: 0 auto 18px;
	border: 1px solid rgba(255, 232, 177, 0.84);
	border-radius: 50%;
	color: var(--gold-bright);
	background:
		radial-gradient(circle at 50% 42%, rgba(232, 170, 59, 0.12), transparent 54%),
		rgba(10, 9, 7, 0.68);
	box-shadow:
		0 0 0 1px rgba(239, 190, 90, 0.1),
		0 0 22px rgba(239, 181, 69, 0.2),
		0 0 64px rgba(180, 104, 23, 0.14),
		inset 0 0 30px rgba(242, 188, 79, 0.08);
}

.paladin-mark::before,
.paladin-mark::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(139, 200, 242, 0.18);
	border-radius: 50%;
}

.paladin-mark::after {
	inset: -8px;
	border-color: rgba(241, 194, 97, 0.08);
}

.paladin-mark svg {
	width: 74px;
	height: 84px;
	overflow: visible;
	filter: drop-shadow(0 0 8px rgba(255, 218, 126, 0.34));
}

.paladin-mark svg > path:first-child {
	fill: rgba(22, 18, 12, 0.78);
	stroke: currentColor;
	stroke-width: 2;
}

.paladin-mark .shield-cross {
	fill: currentColor;
}

.hero h1 {
	margin: 0;
	font-family: "Cinzel", Georgia, serif;
	font-size: clamp(2.65rem, 7vw, 4.65rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: clamp(0.18rem, 1vw, 0.58rem);
	text-transform: uppercase;
	text-shadow: 0 0 22px rgba(244, 191, 82, 0.22), 0 2px 16px rgba(0, 0, 0, 0.8);
}

.hero-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 16px 0 9px;
	color: #c8c1b3;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.24rem;
	text-transform: uppercase;
}

.hero-kicker span,
.site-footer span {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 8px var(--gold);
}

.accent-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 12px;
	margin: 0 0 10px;
}

.accent-rule::before,
.accent-rule::after {
	content: "";
	width: 30px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
	box-shadow: 0 0 8px var(--gold-soft);
}

.accent-rule::after {
	background: linear-gradient(90deg, var(--gold), transparent);
}

.accent-rule i {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--gold);
	filter: drop-shadow(0 0 5px var(--gold));
}

.hero-description {
	max-width: 780px;
	margin: 0 auto;
	color: var(--text-muted);
	font-size: 0.99rem;
	letter-spacing: 0.02rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.roster-panel {
	position: relative;
	padding: 27px 30px 30px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background:
		linear-gradient(135deg, rgba(208, 144, 31, 0.045), transparent 35%),
		linear-gradient(315deg, rgba(72, 139, 183, 0.035), transparent 36%),
		var(--panel-bg);
	box-shadow: var(--shadow), inset 0 0 38px rgba(219, 156, 42, 0.035);
	backdrop-filter: blur(11px);
}

.roster-panel::before,
.roster-panel::after {
	content: "";
	position: absolute;
	width: 48px;
	height: 48px;
	pointer-events: none;
}

.roster-panel::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid rgba(255, 219, 143, 0.74);
	border-left: 2px solid rgba(255, 219, 143, 0.74);
	border-radius: 10px 0 0 0;
}

.roster-panel::after {
	right: -1px;
	bottom: -1px;
	border-right: 2px solid rgba(142, 202, 242, 0.44);
	border-bottom: 2px solid rgba(142, 202, 242, 0.44);
	border-radius: 0 0 10px 0;
}

.panel-header {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(228, 177, 70, 0.18);
}

.panel-heading-wrap {
	min-width: 0;
}

.section-label {
	margin: 0 0 2px;
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24rem;
	text-transform: uppercase;
}

.panel-heading-wrap h2 {
	margin: 0;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06rem;
	white-space: nowrap;
}

.character-tabs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	min-width: 0;
	overflow-x: auto;
	padding: 3px 1px 5px;
	scrollbar-width: thin;
	scrollbar-color: rgba(241, 194, 97, 0.35) transparent;
}

.character-tab {
	position: relative;
	flex: 0 0 auto;
	min-height: 38px;
	padding: 7px 11px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	outline: none;
	color: #8e8a81;
	background: transparent;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.055rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.character-tab .tab-level {
	display: block;
	margin-top: -2px;
	color: #69665f;
	font-size: 0.64rem;
	letter-spacing: 0.08rem;
}

.character-tab:hover,
.character-tab:focus-visible {
	color: #f3e7c8;
	border-color: rgba(241, 194, 97, 0.2);
	background: rgba(241, 194, 97, 0.04);
}

.character-tab.is-active {
	color: var(--gold-bright);
	border-color: rgba(241, 194, 97, 0.36);
	background: rgba(241, 194, 97, 0.08);
	box-shadow: inset 0 -1px 0 var(--gold), 0 0 12px rgba(241, 194, 97, 0.05);
}

.character-tab.is-active .tab-level {
	color: #b89a5d;
}

.character-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: end;
	padding: 25px 0 20px;
}

.character-eyebrow {
	margin: 0 0 5px;
	color: var(--blue);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
}

.character-hero h3 {
	margin: 0;
	font-family: "Cinzel", Georgia, serif;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: 0.08rem;
}

.character-summary {
	max-width: 820px;
	margin: 11px 0 0;
	color: var(--text-muted);
	font-size: 0.97rem;
}

.level-medallion {
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	border: 1px solid rgba(241, 194, 97, 0.52);
	border-radius: 50%;
	background: rgba(8, 8, 7, 0.72);
	box-shadow: inset 0 0 20px rgba(241, 194, 97, 0.07), 0 0 18px rgba(241, 194, 97, 0.06);
}

.level-medallion span {
	display: block;
	color: #a59b86;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-align: center;
	text-transform: uppercase;
}

.level-medallion strong {
	display: block;
	margin-top: -4px;
	color: var(--gold-bright);
	font-family: "Cinzel", serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
}

.section-tabs {
	display: flex;
	gap: 5px;
	margin: 0 0 22px;
	padding: 5px;
	border: 1px solid rgba(241, 194, 97, 0.15);
	border-radius: 8px;
	background: rgba(4, 5, 5, 0.52);
	overflow-x: auto;
}

.section-tab {
	flex: 1 0 auto;
	min-height: 38px;
	padding: 7px 14px;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: #817d74;
	background: transparent;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.77rem;
	font-weight: 700;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.section-tab:hover,
.section-tab:focus-visible {
	color: #e8dcc0;
	background: rgba(241, 194, 97, 0.045);
}

.section-tab.is-active {
	color: #fff1c8;
	background: rgba(241, 194, 97, 0.1);
	box-shadow: inset 0 -1px 0 var(--gold);
}

.content-view {
	animation: reveal 180ms ease both;
}

@keyframes reveal {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: translateY(0); }
}

.overview-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.stat-card,
.content-card,
.talent-tree,
.profession-card,
.note-card {
	border: 1px solid rgba(213, 165, 67, 0.18);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.035), transparent 42%),
		var(--card-bg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.stat-card {
	min-height: 96px;
	padding: 15px 16px;
}

.card-label {
	display: block;
	margin-bottom: 5px;
	color: #8e887d;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14rem;
	text-transform: uppercase;
}

.stat-card strong {
	display: block;
	color: #f4ead2;
	font-family: "Rajdhani", sans-serif;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
}

.two-column,
.notes-grid,
.profession-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.content-card,
.profession-card,
.note-card {
	padding: 19px 20px;
}

.content-card h4,
.profession-card h4,
.note-card h4,
.talent-tree h4 {
	margin: 0 0 10px;
	color: #f4dfad;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
}

.content-card p,
.profession-card p,
.note-card p {
	margin: 0;
	color: var(--text-muted);
}

.section-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.17rem;
	text-transform: uppercase;
}

.section-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(241, 194, 97, 0.3), transparent);
}

.callout {
	margin-top: 12px;
	padding: 14px 16px;
	border-left: 2px solid var(--gold);
	border-radius: 0 6px 6px 0;
	color: #bdb4a2;
	background: rgba(241, 194, 97, 0.055);
}

.callout strong {
	color: #f0d79f;
}

.callout p {
	margin: 0;
}

.inline-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.inline-tags span {
	padding: 5px 9px 4px;
	border: 1px solid rgba(139, 200, 242, 0.22);
	border-radius: 999px;
	color: #9dc6df;
	background: rgba(78, 147, 191, 0.055);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
}

.talent-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
}

.talent-tree {
	position: relative;
	padding: 18px;
	overflow: hidden;
}

.talent-total {
	position: absolute;
	top: 12px;
	right: 14px;
	color: rgba(241, 194, 97, 0.22);
	font-family: "Cinzel", serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.talent-list,
.compact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.talent-list li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	color: #b8b1a4;
	font-size: 0.88rem;
}

.talent-list li:last-child {
	border-bottom: 0;
}

.talent-list .rank {
	flex: 0 0 auto;
	color: var(--gold);
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
}

.muted {
	color: #716d65;
}

.gear-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gear-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) minmax(170px, 0.75fr);
	gap: 16px;
	align-items: center;
	min-height: 76px;
	padding: 11px 15px 11px 11px;
	border: 1px solid rgba(213, 165, 67, 0.17);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(224, 164, 55, 0.045), transparent 52%),
		var(--card-bg);
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.gear-card:hover {
	transform: translateY(-1px);
	border-color: rgba(241, 194, 97, 0.38);
	background:
		linear-gradient(90deg, rgba(224, 164, 55, 0.08), transparent 56%),
		var(--card-bg-hover);
}

.slot-badge {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(139, 200, 242, 0.32);
	border-radius: 10px;
	color: #a9d2ec;
	background: rgba(6, 11, 14, 0.74);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
}

.gear-primary {
	min-width: 0;
}

.gear-primary strong {
	display: block;
	color: #f0e5cd;
	font-family: "Rajdhani", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
}

.gear-primary span {
	display: block;
	margin-top: 2px;
	color: #7d776e;
	font-size: 0.76rem;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}

.gear-alt {
	color: #918b80;
	font-size: 0.86rem;
}

.gear-alt::before {
	content: "Alternative";
	display: block;
	margin-bottom: 1px;
	color: #706b62;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
}

.compact-list li {
	position: relative;
	padding: 7px 0 7px 17px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	color: #aaa397;
}

.compact-list li:last-child {
	border-bottom: 0;
}

.compact-list li::before {
	content: "";
	position: absolute;
	top: 1.14em;
	left: 1px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 6px var(--gold-soft);
}

.roster-overview {
	padding-top: 24px;
}

.roster-intro {
	max-width: 860px;
	margin: 0 0 20px;
	color: var(--text-muted);
}

.roster-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.roster-card {
	position: relative;
	min-height: 188px;
	padding: 18px;
	border: 1px solid rgba(213, 165, 67, 0.18);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.045), transparent 50%),
		var(--card-bg);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.roster-card:hover,
.roster-card:focus-within {
	transform: translateY(-2px);
	border-color: rgba(241, 194, 97, 0.42);
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.08), transparent 54%),
		var(--card-bg-hover);
}

.roster-card .level-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	color: rgba(241, 194, 97, 0.6);
	font-family: "Cinzel", serif;
	font-size: 1.65rem;
	font-weight: 600;
}

.roster-card h3 {
	margin: 17px 0 6px;
	font-family: "Cinzel", serif;
	font-size: 1.2rem;
	font-weight: 600;
}

.roster-card p {
	margin: 0 0 13px;
	color: #9d968a;
	font-size: 0.87rem;
}

.roster-card button {
	padding: 0;
	border: 0;
	color: var(--gold);
	background: transparent;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	cursor: pointer;
}

.site-footer {
	margin-top: auto;
	padding: 22px 0 0;
	color: rgba(184, 176, 162, 0.62);
	text-align: center;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.71rem;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
}

.site-footer p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.site-footer a {
	color: rgba(225, 210, 177, 0.76);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff4d7;
}

.noscript-message {
	position: fixed;
	inset: auto 20px 20px;
	padding: 14px;
	border: 1px solid var(--line-strong);
	color: var(--text);
	background: var(--panel-bg-deep);
	text-align: center;
}

[hidden] {
	display: none !important;
}

@media (max-width: 980px) {
	.panel-header {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.character-tabs {
		justify-content: flex-start;
	}

	.overview-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.roster-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.site-shell {
		width: min(100% - 28px, 1180px);
		padding-top: 26px;
	}

	.paladin-mark {
		width: 118px;
		height: 118px;
	}

	.paladin-mark svg {
		width: 65px;
		height: 74px;
	}

	.character-hero {
		grid-template-columns: minmax(0, 1fr) 76px;
	}

	.level-medallion {
		width: 74px;
		height: 74px;
	}

	.level-medallion strong {
		font-size: 1.7rem;
	}

	.talent-grid {
		grid-template-columns: 1fr;
	}

	.gear-card {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.gear-alt {
		grid-column: 2;
		padding-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.04);
	}
}

@media (max-width: 580px) {
	.page-background {
		background-position: 59% center;
		filter: blur(1.5px) brightness(0.4) saturate(0.82);
	}

	.site-shell {
		width: min(100% - 18px, 1180px);
		padding-top: 18px;
	}

	.hero {
		margin-bottom: 23px;
	}

	.paladin-mark {
		width: 102px;
		height: 102px;
		margin-bottom: 14px;
	}

	.paladin-mark svg {
		width: 56px;
		height: 64px;
	}

	.hero h1 {
		font-size: clamp(2rem, 11vw, 2.75rem);
		letter-spacing: 0.13rem;
	}

	.hero-kicker {
		gap: 6px;
		font-size: 0.67rem;
		letter-spacing: 0.09rem;
	}

	.hero-description {
		font-size: 0.9rem;
	}

	.roster-panel {
		padding: 21px 14px 17px;
	}

	.character-tab {
		padding-right: 9px;
		padding-left: 9px;
		font-size: 0.7rem;
	}

	.character-hero {
		grid-template-columns: 1fr;
		padding-top: 21px;
	}

	.level-medallion {
		display: none;
	}

	.section-tabs {
		margin-right: -3px;
		margin-left: -3px;
	}

	.section-tab {
		padding-right: 11px;
		padding-left: 11px;
		font-size: 0.71rem;
	}

	.overview-grid,
	.two-column,
	.notes-grid,
	.profession-grid,
	.roster-grid {
		grid-template-columns: 1fr;
	}

	.stat-card {
		min-height: 0;
	}

	.gear-card {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 11px;
		padding: 10px;
	}

	.slot-badge {
		width: 44px;
		height: 44px;
		font-size: 0.64rem;
	}

	.site-footer p {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* V3: compact hero, Wrath-blue palette, paired gear targets, profession totals */
body::before {
	background:
		linear-gradient(180deg, rgba(2, 8, 17, 0.28), rgba(2, 7, 15, 0.72)),
		radial-gradient(circle at 50% 10%, rgba(63, 137, 196, 0.12), transparent 34rem),
		radial-gradient(circle at 56% 26%, rgba(224, 166, 54, 0.06), transparent 26rem);
}

body::after {
	background:
		linear-gradient(90deg, rgba(0, 3, 9, 0.69), transparent 16%, transparent 84%, rgba(0, 3, 9, 0.69)),
		radial-gradient(ellipse at center, transparent 20%, rgba(0, 4, 12, 0.66) 100%);
}

.page-background {
	filter: blur(1.8px) brightness(0.42) saturate(0.8) contrast(1.06) hue-rotate(2deg);
}

.site-shell {
	padding-top: 22px;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: left;
}

.paladin-mark {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	margin: 0;
	border-color: rgba(255, 226, 155, 0.76);
	background:
		radial-gradient(circle at 50% 42%, rgba(232, 170, 59, 0.12), transparent 54%),
		rgba(5, 13, 24, 0.78);
	box-shadow:
		0 0 0 1px rgba(139, 205, 245, 0.12),
		0 0 16px rgba(76, 157, 216, 0.13),
		0 0 28px rgba(226, 165, 53, 0.07),
		inset 0 0 18px rgba(242, 188, 79, 0.05);
}

.paladin-mark::before {
	inset: 7px;
	border-color: rgba(139, 205, 245, 0.24);
}

.paladin-mark::after {
	inset: -5px;
	border-color: rgba(239, 201, 109, 0.08);
}

.paladin-mark svg {
	width: 42px;
	height: 49px;
}

.hero-copy {
	min-width: 0;
}

.hero h1 {
	font-size: clamp(2.05rem, 5vw, 3.25rem);
	line-height: 0.94;
	letter-spacing: clamp(0.14rem, 0.7vw, 0.36rem);
}

.hero-kicker {
	justify-content: flex-start;
	margin: 9px 0 0;
	color: #aebdcc;
	font-size: 0.72rem;
	letter-spacing: 0.17rem;
}

.roster-panel {
	border-color: rgba(117, 191, 241, 0.45);
	background:
		linear-gradient(135deg, rgba(66, 147, 210, 0.07), transparent 34%),
		linear-gradient(315deg, rgba(228, 173, 62, 0.04), transparent 32%),
		var(--panel-bg);
	box-shadow: var(--shadow), inset 0 0 28px rgba(54, 139, 201, 0.03);
}

.roster-panel::before {
	border-top-color: rgba(255, 224, 148, 0.72);
	border-left-color: rgba(255, 224, 148, 0.72);
}

.roster-panel::after {
	border-right-color: rgba(132, 205, 250, 0.62);
	border-bottom-color: rgba(132, 205, 250, 0.62);
}

.panel-header {
	grid-template-columns: 250px minmax(0, 1fr);
	border-bottom-color: rgba(110, 185, 235, 0.18);
}

.character-tab.is-active {
	color: var(--blue-bright);
	border-color: rgba(119, 195, 246, 0.38);
	background: linear-gradient(180deg, rgba(89, 164, 220, 0.12), rgba(237, 196, 98, 0.045));
	box-shadow: inset 0 -1px 0 var(--gold), 0 0 13px rgba(68, 149, 208, 0.08);
}

.character-tab.is-active .tab-level {
	color: #a8c8dd;
}

.section-tabs {
	border-color: rgba(113, 188, 238, 0.2);
	background: rgba(2, 9, 18, 0.64);
}

.section-tab.is-active {
	color: var(--blue-bright);
	background: linear-gradient(180deg, rgba(90, 168, 224, 0.13), rgba(239, 201, 109, 0.05));
	box-shadow: inset 0 -1px 0 var(--gold);
}

.stat-card,
.content-card,
.talent-tree,
.profession-card,
.note-card {
	border-color: rgba(105, 180, 231, 0.2);
	background:
		linear-gradient(135deg, rgba(72, 154, 211, 0.055), transparent 42%),
		var(--card-bg);
}

.section-heading::after {
	background: linear-gradient(90deg, rgba(115, 190, 240, 0.35), rgba(238, 195, 94, 0.15), transparent);
}

.section-intro {
	margin: -5px 0 15px;
	color: var(--text-muted);
	font-size: 0.86rem;
}

.talent-grid {
	align-items: start;
}

.talent-tree {
	padding: 0;
	background: rgba(5, 13, 24, 0.92);
}

.talent-image-wrap {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-bottom: 1px solid rgba(117, 190, 239, 0.2);
	background: #030914;
}

.talent-image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.talent-tree-body {
	position: relative;
	padding: 17px 18px 18px;
}

.talent-total {
	top: 14px;
	right: 17px;
	color: rgba(239, 201, 109, 0.25);
}

.gear-list {
	gap: 12px;
}

.gear-slot-group {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
	border: 1px solid rgba(104, 179, 230, 0.2);
	border-radius: 10px;
	background:
		linear-gradient(90deg, rgba(71, 151, 208, 0.055), transparent 34%),
		rgba(4, 12, 23, 0.8);
}

.gear-slot-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	color: #a9c8dd;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-align: center;
	text-transform: uppercase;
}

.slot-badge {
	border-color: rgba(126, 202, 250, 0.43);
	color: #c6edff;
	background: linear-gradient(145deg, rgba(9, 27, 46, 0.94), rgba(4, 11, 20, 0.96));
	box-shadow: inset 0 0 18px rgba(64, 151, 213, 0.08);
}

.gear-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gear-option {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-height: 94px;
	padding: 12px;
	border: 1px solid rgba(109, 183, 233, 0.16);
	border-radius: 8px;
	background: rgba(9, 20, 34, 0.84);
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.gear-option:hover {
	transform: translateY(-1px);
	border-color: rgba(237, 199, 105, 0.35);
	background: rgba(12, 29, 48, 0.96);
}

.item-icon {
	width: 56px;
	height: 56px;
	padding: 3px;
	border: 1px solid rgba(239, 201, 109, 0.34);
	border-radius: 7px;
	background: #020710;
	box-shadow: 0 0 14px rgba(74, 158, 219, 0.08);
}

.item-icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}

.gear-option-copy {
	min-width: 0;
}

.gear-rank {
	display: block;
	margin-bottom: 3px;
	color: #7faed0;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.gear-name {
	color: #f3e6c6;
	font-family: "Rajdhani", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
}

.item-link {
	color: #f3e0ad;
	text-decoration: none;
	text-underline-offset: 3px;
}

.item-link:hover,
.item-link:focus-visible {
	color: #fff1bd;
	text-decoration: underline;
}

.item-separator {
	color: #70818d;
	font-weight: 400;
}

.generic-gear-name {
	color: #c7d1d8;
}

.gear-source {
	margin: 5px 0 0;
	color: var(--text-muted);
	font-size: 0.75rem;
	line-height: 1.32;
}

.gear-notes {
	margin-top: 16px;
}

.profession-card {
	padding: 20px;
}

.profession-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
}

.profession-heading h4 {
	margin-bottom: 0;
	font-size: 1.05rem;
}

.profession-heading > strong {
	max-width: 52%;
	color: var(--gold-bright);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: right;
}

.profession-cap {
	display: block;
	margin-bottom: 2px;
	color: #8bcdf5;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.profession-card .compact-list {
	margin-top: 13px;
}

.sync-note {
	margin-top: 12px;
	padding: 17px 18px;
	border: 1px solid rgba(111, 185, 235, 0.18);
	border-radius: 8px;
	background: rgba(7, 19, 32, 0.72);
}

.sync-note h4 {
	margin: 0 0 5px;
	color: #bfe8ff;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.sync-note p {
	margin: 0;
	color: #9eaeb9;
}

@media (max-width: 880px) {
	.gear-slot-group {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.gear-options {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.site-shell {
		padding-top: 16px;
	}

	.hero {
		gap: 13px;
		margin-bottom: 14px;
	}

	.paladin-mark {
		width: 64px;
		height: 64px;
	}

	.paladin-mark svg {
		width: 36px;
		height: 42px;
	}

	.talent-image-wrap {
		aspect-ratio: 16 / 8;
	}
}

@media (max-width: 580px) {
	.hero {
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}

	.paladin-mark {
		width: 54px;
		height: 54px;
		margin: 0;
	}

	.paladin-mark svg {
		width: 30px;
		height: 35px;
	}

	.hero h1 {
		font-size: 2rem;
		letter-spacing: 0.16rem;
	}

	.hero-kicker {
		justify-content: flex-start;
		font-size: 0.58rem;
		letter-spacing: 0.065rem;
	}

	.gear-slot-group {
		grid-template-columns: 1fr;
		padding: 10px;
	}

	.gear-slot-heading {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}

	.slot-badge {
		width: 38px;
		height: 38px;
	}

	.gear-option {
		grid-template-columns: 48px minmax(0, 1fr);
		min-height: 0;
	}

	.item-icon {
		width: 48px;
		height: 48px;
	}

	.profession-heading {
		flex-direction: column;
		gap: 7px;
	}

	.profession-heading > strong {
		max-width: none;
		text-align: left;
	}
}

/* Wowhead injects the verified item artwork into direct database links. */
.gear-name .item-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
}

.gear-name .item-link .iconmedium,
.gear-name .item-link .iconsmall,
.gear-name .item-link ins {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* V3.5: simplified gear rows - slot art, then actual item art, then item details. */
.gear-slot-heading {
	gap: 7px;
}

.slot-icon,
.gear-item-art {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 3px;
	border: 1px solid rgba(239, 201, 109, 0.36);
	border-radius: 7px;
	background: #020710;
	box-shadow: 0 0 14px rgba(74, 158, 219, 0.09);
	overflow: hidden;
}

.slot-icon {
	border-color: rgba(126, 202, 250, 0.43);
	box-shadow: inset 0 0 18px rgba(64, 151, 213, 0.08), 0 0 14px rgba(74, 158, 219, 0.08);
}

.slot-icon img,
.gear-item-art > img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}

.gear-art-link {
	position: absolute;
	inset: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	overflow: hidden;
}

.gear-art-link .iconlarge,
.gear-art-link .iconmedium,
.gear-art-link .iconsmall,
.gear-art-link ins {
	display: block !important;
	width: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background-size: cover !important;
}

.gear-item-art:has(.gear-art-link ins) .gear-item-fallback,
.gear-item-art:has(.gear-art-link .iconlarge) .gear-item-fallback,
.gear-item-art:has(.gear-art-link .iconmedium) .gear-item-fallback {
	opacity: 0;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Text links keep tooltips and colors, but no longer inject a second item icon. */
.gear-name .item-link {
	display: inline;
	max-width: none;
}

.gear-name .item-link .iconlarge,
.gear-name .item-link .iconmedium,
.gear-name .item-link .iconsmall,
.gear-name .item-link ins {
	display: none !important;
}

@media (max-width: 580px) {
	.slot-icon,
	.gear-item-art {
		width: 48px;
		height: 48px;
	}

	.gear-art-link .iconlarge,
	.gear-art-link .iconmedium,
	.gear-art-link .iconsmall,
	.gear-art-link ins {
		width: 42px !important;
		height: 42px !important;
	}
}

/* V3.6: keep item artwork and its text block on the same vertical centerline. */
.gear-option {
	align-items: center;
}

.gear-item-art {
	align-self: center;
}

.gear-option-copy {
	display: flex;
	min-height: 56px;
	padding: 0;
	flex-direction: column;
	justify-content: center;
}

.gear-rank {
	margin-bottom: 4px;
	line-height: 1;
}

.gear-name {
	line-height: 1.2;
}

.gear-source {
	margin-top: 4px;
	line-height: 1.25;
}

@media (max-width: 580px) {
	.gear-option-copy {
		min-height: 48px;
	}
}

/* V3.7: remove the remaining inset around item artwork and align the copy to the icon frame. */
.gear-option {
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}

.gear-item-art {
	width: 56px;
	height: 56px;
	padding: 0;
}

.gear-item-art > img {
	border-radius: 6px;
}

.gear-art-link {
	inset: 0;
	border-radius: 6px;
}

.gear-art-link .iconlarge,
.gear-art-link .iconmedium,
.gear-art-link .iconsmall,
.gear-art-link ins {
	width: 54px !important;
	height: 54px !important;
	border-radius: 6px !important;
}

.gear-option-copy {
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	align-self: center;
	min-height: 56px;
	height: 56px;
	padding: 0;
}

.gear-rank {
	align-self: start;
	margin: 0;
	line-height: 1;
}

.gear-name {
	align-self: center;
	line-height: 1.15;
}

.gear-source {
	align-self: end;
	margin: 0;
	line-height: 1.15;
}

@media (max-width: 580px) {
	.gear-option {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.gear-item-art {
		width: 48px;
		height: 48px;
	}

	.gear-art-link .iconlarge,
	.gear-art-link .iconmedium,
	.gear-art-link .iconsmall,
	.gear-art-link ins {
		width: 46px !important;
		height: 46px !important;
	}

	.gear-option-copy {
		min-height: 48px;
		height: 48px;
	}
}

/* V3.8: use a simple flex row so item artwork and copy remain directly adjacent. */
.gear-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.gear-item-art {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	align-self: center;
}

.gear-option-copy {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	height: auto;
	padding: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
}

.gear-rank,
.gear-name,
.gear-source {
	align-self: stretch;
	width: 100%;
	text-align: left;
}

.gear-rank {
	margin: 0 0 4px;
}

.gear-source {
	margin: 4px 0 0;
}

@media (max-width: 580px) {
	.gear-item-art {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.gear-option-copy {
		min-height: 48px;
	}
}

/* V3.9: the linked Wowhead artwork is now the icon frame itself.
   This removes the undersized nested link box that clipped the right and bottom edges. */
.gear-option > .gear-item-art.gear-art-link {
	position: relative;
	display: block;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	min-width: 56px;
	padding: 0;
	border: 1px solid rgba(239, 201, 109, 0.48);
	border-radius: 7px;
	background: #020710;
	box-sizing: border-box;
	overflow: hidden;
	line-height: 0;
	inset: 0 !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
}

.gear-option > .gear-item-art.gear-art-link > .gear-item-fallback {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	object-fit: cover;
}

/* Wowhead's injected icon must fill the link's content box, without its own frame. */
.gear-option > .gear-item-art.gear-art-link ins,
.gear-option > .gear-item-art.gear-art-link .iconlarge,
.gear-option > .gear-item-art.gear-art-link .iconmedium,
.gear-option > .gear-item-art.gear-art-link .iconsmall {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	background-size: cover !important;
	background-position: center !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.gear-option > .gear-item-art.gear-art-link:has(ins) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconlarge) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconmedium) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconsmall) > .gear-item-fallback {
	opacity: 0;
}

@media (max-width: 580px) {
	.gear-option > .gear-item-art.gear-art-link {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
}

/* V3.10: let Wowhead's generated item icon provide the visible frame.
   The link itself previously had a second gold border, which remained visible
   along the top and left edges around the injected icon. */
.gear-option > a.gear-item-art.gear-art-link {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	overflow: visible !important;
}


/* V3.13: isolate Wowhead's generated icon markup, then replace it with one clean image.
   Wowhead injects its own border and highlight layers (including del/a elements).
   Those layers are hidden immediately, so they cannot leave stray top or left lines. */
.gear-option > a.gear-item-art.gear-art-link {
	position: relative !important;
	display: block !important;
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	padding: 0 !important;
	border: 1px solid rgba(239, 201, 109, 0.48) !important;
	border-radius: 7px !important;
	background: #020710 !important;
	box-shadow: none !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

.gear-option > a.gear-item-art.gear-art-link > .gear-clean-icon {
	position: absolute !important;
	inset: 2px !important;
	display: block !important;
	width: calc(100% - 4px) !important;
	height: calc(100% - 4px) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: #020710 !important;
	object-fit: contain !important;
}

/* Hide every layer Wowhead injects while JavaScript extracts the actual icon URL. */
.gear-option > a.gear-item-art.gear-art-link > :not(.gear-clean-icon):not(.visually-hidden),
.gear-option > a.gear-item-art.gear-art-link .iconlarge,
.gear-option > a.gear-item-art.gear-art-link .iconmedium,
.gear-option > a.gear-item-art.gear-art-link .iconsmall,
.gear-option > a.gear-item-art.gear-art-link ins,
.gear-option > a.gear-item-art.gear-art-link del,
.gear-option > a.gear-item-art.gear-art-link .iconlarge > a,
.gear-option > a.gear-item-art.gear-art-link .iconmedium > a,
.gear-option > a.gear-item-art.gear-art-link .iconsmall > a {
	position: absolute !important;
	inset: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

@media (max-width: 580px) {
	.gear-option > a.gear-item-art.gear-art-link {
		flex-basis: 48px !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
	}
}


/* V3.15: every exact item in paired ring/trinket sets receives its own icon, link, and source. */
.gear-option {
	display: block;
	min-width: 0;
	padding: 12px;
}

.gear-option-items {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

.gear-item-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-width: 0;
}

.gear-item-row + .gear-item-row {
	padding-top: 10px;
	border-top: 1px solid rgba(109, 183, 233, 0.12);
}

.gear-item-copy {
	display: flex;
	min-width: 0;
	min-height: 56px;
	flex-direction: column;
	justify-content: center;
}

.gear-item-copy .gear-name,
.gear-item-copy .gear-source {
	width: 100%;
	text-align: left;
}

.gear-item-copy .gear-source {
	margin: 5px 0 0;
}

@media (max-width: 580px) {
	.gear-item-row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 10px;
	}

	.gear-item-copy {
		min-height: 48px;
	}
}

/* V3.16: v3.15 nested each item inside .gear-item-row, so the old direct-child
   icon rules no longer applied. Restore the item icon as a real grid column and
   keep Wowhead's generated artwork contained inside that frame. */
.gear-item-row > a.gear-item-art.gear-art-link {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: block !important;
	align-self: center !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(239, 201, 109, 0.48) !important;
	border-radius: 7px !important;
	background: #020710 !important;
	box-shadow: none !important;
	overflow: hidden !important;
	line-height: 0 !important;
	box-sizing: border-box !important;
}

.gear-item-row > a.gear-item-art.gear-art-link > .gear-item-fallback,
.gear-item-row > a.gear-item-art.gear-art-link > .gear-clean-icon {
	position: absolute !important;
	inset: 2px !important;
	display: block !important;
	width: calc(100% - 4px) !important;
	height: calc(100% - 4px) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: #020710 !important;
	object-fit: cover !important;
}

/* Hide Wowhead's temporary border/highlight layers while roster.js extracts
   the real icon image. The accessible label and clean image remain visible. */
.gear-item-row > a.gear-item-art.gear-art-link > :not(.gear-item-fallback):not(.gear-clean-icon):not(.visually-hidden),
.gear-item-row > a.gear-item-art.gear-art-link .iconlarge,
.gear-item-row > a.gear-item-art.gear-art-link .iconmedium,
.gear-item-row > a.gear-item-art.gear-art-link .iconsmall,
.gear-item-row > a.gear-item-art.gear-art-link ins,
.gear-item-row > a.gear-item-art.gear-art-link del {
	position: absolute !important;
	inset: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

.gear-item-row > a.gear-item-art.gear-art-link[data-icon-cleaned="true"] > .gear-item-fallback {
	display: none !important;
}

@media (max-width: 580px) {
	.gear-item-row > a.gear-item-art.gear-art-link {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}
}

/* V3.19 paladin class icon */
.paladin-mark {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.paladin-mark::before,
.paladin-mark::after {
	display: none;
}

.paladin-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(255, 214, 111, 0.24)) drop-shadow(0 5px 12px rgba(0, 0, 0, 0.65));
}


/* Version 1.4.3: slightly toned-down background fog and shine. */
.hero h1 {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	letter-spacing: clamp(0.09rem, 0.45vw, 0.24rem);
	white-space: nowrap;
}

.hero-kicker {
	color: #c4d0da;
}

.character-tab {
	color: #aeb8c0;
}

.character-tab .tab-level {
	color: #929fa9;
}

.section-tab {
	color: #aab5bd;
}

.card-label {
	color: #aeb9c2;
}

.content-card p,
.profession-card p,
.note-card p,
.character-summary,
.section-intro,
.roster-intro,
.gear-source,
.sync-note p {
	color: var(--text-muted);
}

.compact-list li,
.talent-list li {
	color: #c5ccd2;
}

.callout {
	color: #d0c9ba;
}

.muted {
	color: #a4afb7;
}

.roster-card p {
	color: #bdc6cd;
}

.site-footer {
	color: rgba(205, 211, 215, 0.78);
}

.site-footer a {
	color: rgba(240, 226, 195, 0.9);
}

@media (max-width: 580px) {
	.hero h1 {
		font-size: clamp(1.28rem, 7vw, 1.65rem);
		line-height: 1.05;
		letter-spacing: 0.08rem;
		white-space: normal;
	}
}


/* Version 1.5.1: hidden scrollbars with scrolling preserved. */
html,
body,
.character-tabs,
.section-tabs,
.talent-tree {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.character-tabs::-webkit-scrollbar,
.section-tabs::-webkit-scrollbar,
.talent-tree::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.talent-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

.talent-tree {
	display: grid;
	grid-template-columns: 206px minmax(0, 1fr);
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(105, 180, 231, 0.24);
	border-radius: 9px;
	background: rgba(5, 13, 24, 0.94);
}

.talent-image-wrap {
	width: 206px;
	height: 556px;
	aspect-ratio: auto;
	overflow: hidden;
	border-right: 1px solid rgba(117, 190, 239, 0.24);
	border-bottom: 0;
	background: #030914;
}

.talent-image-wrap img {
	display: block;
	width: 206px;
	height: 556px;
	max-width: none;
	object-fit: none;
	object-position: top left;
}

.talent-tree-body {
	position: relative;
	min-width: 0;
	padding: 14px 14px 12px;
}

.talent-tree-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 29px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.talent-tree-heading h4 {
	margin: 0;
}

.talent-total {
	position: static;
	flex: 0 0 auto;
	color: var(--gold);
	font-size: 1.35rem;
	opacity: 0.8;
}

.talent-list {
	margin-top: 4px;
}

.talent-list li {
	gap: 10px;
	padding: 4px 0;
	font-size: 0.74rem;
	line-height: 1.15;
}

.talent-list li > span:first-child {
	min-width: 0;
}

.talent-empty {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 18px 0 0;
	color: var(--text-muted);
}

.talent-empty strong {
	color: var(--gold);
	font-family: "Cinzel", serif;
	font-size: 1.45rem;
}

.glyph-section {
	margin-top: 20px;
}

.glyph-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.glyph-card {
	padding: 16px 18px;
	border: 1px solid rgba(105, 180, 231, 0.2);
	border-radius: 9px;
	background:
		linear-gradient(135deg, rgba(72, 154, 211, 0.045), transparent 42%),
		var(--card-bg);
}

.glyph-card .card-label {
	display: block;
	margin-bottom: 8px;
}

.gear-notes {
	margin-top: 14px;
}

@media (max-width: 1180px) {
	.talent-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.talent-tree {
		grid-template-columns: 206px minmax(190px, 1fr);
		overflow-x: auto;
	}

	.glyph-grid {
		grid-template-columns: 1fr;
	}
}


/* Version 1.5.2: mobile character selector replaces horizontal character scrolling. */
.mobile-character-nav {
	display: none;
}

@media (max-width: 760px) {
	.character-tabs {
		display: none;
	}

	.mobile-character-nav {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 8px;
		align-items: stretch;
		width: 100%;
	}

	.mobile-character-step,
	.mobile-character-select-wrap {
		min-height: 52px;
		border: 1px solid rgba(113, 188, 238, 0.28);
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(90, 168, 224, 0.09), rgba(5, 13, 24, 0.9));
		box-shadow: inset 0 0 16px rgba(64, 151, 213, 0.045);
	}

	.mobile-character-step {
		padding: 0;
		color: var(--gold-bright);
		font-family: Georgia, serif;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
	}

	.mobile-character-step:focus-visible,
	.mobile-character-select-wrap:focus-within {
		outline: 1px solid rgba(241, 194, 97, 0.72);
		outline-offset: 2px;
	}

	.mobile-character-select-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		padding: 6px 12px 7px;
	}

	.mobile-character-select-wrap > span {
		margin-bottom: 1px;
		color: var(--blue);
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.15rem;
		text-transform: uppercase;
	}

	.mobile-character-select {
		min-width: 0;
	}

	#mobile-character-select {
		width: 100%;
		padding: 0 24px 0 0;
		border: 0;
		outline: 0;
		color: #f0e6ce;
		background: transparent;
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.035rem;
		appearance: auto;
	}

	#mobile-character-select option {
		color: #eef4f8;
		background: #071321;
	}
}


/* Version 1.5.3: stable full-width mobile character pager and overflow fix. */
html,
body {
	overflow-x: hidden;
}

.mobile-character-current {
	display: none;
}

@media (max-width: 760px) {
	.site-shell,
	.roster-panel,
	.panel-header,
	.panel-heading-wrap,
	#app {
		min-width: 0;
		max-width: 100%;
	}

	.panel-header {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 15px;
		align-items: stretch;
	}

	.panel-heading-wrap h2 {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.character-tabs {
		display: none !important;
	}

	.mobile-character-nav {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) 46px;
		gap: 8px;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}

	.mobile-character-step,
	.mobile-character-current {
		min-width: 0;
		min-height: 54px;
		border: 1px solid rgba(113, 188, 238, 0.28);
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(90, 168, 224, 0.09), rgba(5, 13, 24, 0.9));
		box-shadow: inset 0 0 16px rgba(64, 151, 213, 0.045);
	}

	.mobile-character-step {
		display: grid;
		place-items: center;
		padding: 0;
		color: var(--gold-bright);
		font-family: Georgia, serif;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
	}

	.mobile-character-current {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		text-align: center;
	}

	.mobile-character-current > span {
		display: block;
		max-width: 100%;
		overflow: hidden;
		color: #f0e6ce;
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.055rem;
		line-height: 1.1;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.mobile-character-current small {
		display: block;
		margin-top: 2px;
		color: var(--blue);
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 0.67rem;
		font-weight: 700;
		letter-spacing: 0.13rem;
		line-height: 1;
		text-transform: uppercase;
	}

	.mobile-character-step:focus-visible {
		outline: 1px solid rgba(241, 194, 97, 0.72);
		outline-offset: 2px;
	}
}

@media (max-width: 580px) {
	.section-tabs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2px;
		overflow: hidden;
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	.section-tab {
		min-width: 0;
		padding: 8px 2px;
		font-size: 0.6rem;
		letter-spacing: 0.045rem;
		white-space: nowrap;
	}
}

/* ========================================================================== */
/* Paladin Project 2.0 - public live-roster presentation                      */
/* ========================================================================== */

.hero {
	max-width: 980px;
}

.hero-description {
	max-width: 820px;
	margin-top: 12px;
	font-size: 1.02rem;
}

.roster-status {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: -3px 0 24px;
	padding: 12px 15px;
	border: 1px solid rgba(139, 205, 245, 0.18);
	border-radius: 8px;
	background: rgba(4, 12, 22, 0.72);
	box-shadow: inset 0 0 24px rgba(84, 164, 219, 0.035);
}

.roster-status.is-online {
	border-color: rgba(63, 231, 145, 0.36);
	background: linear-gradient(90deg, rgba(21, 88, 59, 0.19), rgba(4, 12, 22, 0.74));
}

.roster-status div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 12px;
}

.roster-status strong {
	color: var(--gold-bright);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.035rem;
}

.roster-status span:not(.presence-dot) {
	color: var(--text-dim);
	font-size: 0.88rem;
}

.presence-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #697682;
	box-shadow: 0 0 0 4px rgba(108, 123, 137, 0.09);
}

.presence-dot.is-online,
.tab-online-dot {
	background: #38e68e;
	box-shadow: 0 0 9px rgba(56, 230, 142, 0.72);
}

.character-tab-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tab-online-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.public-character-hero {
	align-items: stretch;
	gap: 30px;
}

.character-main-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.character-status-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px 12px;
	margin-bottom: 7px;
	color: var(--text-dim);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.045rem;
}

.presence-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 8px;
	border: 1px solid rgba(139, 205, 245, 0.22);
	border-radius: 999px;
	color: var(--text-muted);
	background: rgba(6, 15, 25, 0.7);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
}

.presence-badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6f7d88;
}

.presence-badge.is-online {
	border-color: rgba(56, 230, 142, 0.44);
	color: #8cffbd;
}

.presence-badge.is-online i {
	background: #38e68e;
	box-shadow: 0 0 8px rgba(56, 230, 142, 0.72);
}

.presence-badge.is-unknown {
	text-transform: none;
	letter-spacing: 0.02rem;
}

.level-pair {
	position: relative;
	display: grid;
	grid-template-columns: minmax(94px, 1fr) auto minmax(94px, 1fr);
	align-items: center;
	gap: 12px;
	min-width: 270px;
	padding: 15px 16px 17px;
	border: 1px solid rgba(239, 201, 109, 0.28);
	border-radius: 9px;
	background: rgba(6, 13, 22, 0.78);
	box-shadow: inset 0 0 26px rgba(237, 181, 69, 0.045);
}

.level-pair > div {
	text-align: center;
}

.level-pair span {
	display: block;
	margin-bottom: 3px;
	color: var(--text-dim);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
}

.level-pair strong {
	display: block;
	color: var(--gold-bright);
	font-family: "Cinzel", Georgia, serif;
	font-size: 1.95rem;
	line-height: 1;
}

.level-pair b {
	color: var(--blue);
	font-size: 1.25rem;
	font-weight: 400;
}

.level-pair em {
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 2px 8px;
	border: 1px solid rgba(56, 230, 142, 0.35);
	border-radius: 999px;
	color: #7ff5af;
	background: #081811;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.67rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

.public-overview-grid .stat-card {
	min-height: 112px;
}

.stat-card .small-stat {
	font-size: 0.98rem;
	line-height: 1.35;
}

.overview-columns {
	margin-top: 20px;
}

.target-note {
	margin-top: 15px;
	padding-top: 12px;
	border-top: 1px solid rgba(139, 205, 245, 0.12);
	color: var(--text-muted);
	font-size: 0.88rem;
}

.target-note strong {
	color: var(--gold);
}

.snapshot-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
	padding: 14px 17px;
	border: 1px solid rgba(139, 205, 245, 0.15);
	border-radius: 8px;
	background: rgba(7, 16, 26, 0.63);
}

.snapshot-card div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.snapshot-card strong {
	color: var(--blue-bright);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-weight: 700;
}

.snapshot-card p {
	margin: 0;
	color: var(--text-dim);
	font-size: 0.85rem;
}

.progress-track {
	overflow: hidden;
	width: 100%;
	height: 7px;
	border: 1px solid rgba(139, 205, 245, 0.16);
	border-radius: 999px;
	background: rgba(2, 7, 13, 0.82);
}

.progress-track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(92, 196, 244, 0.78), rgba(239, 201, 109, 0.9));
	box-shadow: 0 0 10px rgba(116, 202, 239, 0.26);
}

.section-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.live-data-label {
	flex: 0 0 auto;
	margin-top: 7px;
	padding: 5px 9px;
	border: 1px solid rgba(56, 230, 142, 0.3);
	border-radius: 999px;
	color: #71f5ae;
	background: rgba(22, 86, 58, 0.12);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07rem;
	text-transform: uppercase;
}

.public-profession-grid {
	align-items: stretch;
}

.public-profession-card {
	display: flex;
	flex-direction: column;
	min-height: 500px;
	padding: 22px 22px 18px;
}

.public-profession-card .profession-heading {
	align-items: flex-start;
}

.public-profession-card .profession-heading h4 {
	margin-bottom: 7px;
	color: var(--gold-bright);
	font-size: 1.2rem;
	letter-spacing: 0.055rem;
}

.live-skill {
	display: block;
	color: #53f69b;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1.62rem;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.05rem;
}

.skill-caption {
	display: block;
	margin-top: 5px;
	color: var(--text-dim);
	font-size: 0.76rem;
}

.profession-target {
	margin: 14px 0 8px;
	color: var(--text-muted);
	font-size: 0.84rem;
}

.profession-target strong {
	color: var(--gold);
}

.profession-why {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 18px 0 10px;
}

.profession-why span {
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
}

.profession-why strong {
	color: var(--text);
	font-size: 0.86rem;
	font-weight: 600;
}

.recipe-empty,
.recipe-list {
	margin-top: auto;
	padding-top: 15px;
	border-top: 1px solid rgba(139, 205, 245, 0.12);
}

.recipe-empty > span,
.recipe-list summary {
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.055rem;
	text-transform: uppercase;
}

.recipe-empty p {
	margin: 6px 0 0;
	color: var(--text-dim);
	font-size: 0.8rem;
}

.recipe-list summary {
	cursor: pointer;
}

.recipe-list ul {
	max-height: 360px;
	overflow: auto;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.recipe-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(139, 205, 245, 0.08);
	font-size: 0.82rem;
}

.recipe-list li a {
	color: var(--blue-bright);
	text-decoration: none;
}

.recipe-list li small {
	color: var(--text-dim);
}

.gear-compare-list {
	display: grid;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.gear-compare-card {
	overflow: hidden;
	border: 1px solid rgba(139, 205, 245, 0.18);
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(7, 19, 31, 0.88), rgba(5, 12, 21, 0.91));
}

.gear-compare-card.is-bis {
	border-color: rgba(239, 201, 109, 0.48);
	box-shadow: inset 0 0 30px rgba(239, 201, 109, 0.04);
}

.gear-compare-card .gear-slot-heading {
	margin: 0;
	padding: 13px 15px;
	border-bottom: 1px solid rgba(139, 205, 245, 0.12);
	background: rgba(2, 8, 14, 0.45);
}

.gear-slot-heading > div span {
	display: block;
	color: var(--text-dim);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.07rem;
	text-transform: uppercase;
}

.gear-slot-heading > div strong {
	color: var(--gold-bright);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.025rem;
}

.bis-banner {
	padding: 7px 15px;
	color: #ffe58e;
	background: rgba(102, 75, 13, 0.21);
	border-bottom: 1px solid rgba(239, 201, 109, 0.16);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07rem;
	text-align: center;
	text-transform: uppercase;
}

.gear-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.gear-compare-grid > section {
	min-width: 0;
	padding: 16px 18px 18px;
}

.gear-compare-grid > section + section {
	border-left: 1px solid rgba(139, 205, 245, 0.12);
}

.target-gear {
	background: rgba(93, 67, 13, 0.055);
}

.gear-compare-grid .gear-rank {
	display: block;
	margin-bottom: 11px;
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.075rem;
	text-transform: uppercase;
}

.public-gear-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}

.public-gear-item + .public-gear-item {
	border-top: 1px solid rgba(139, 205, 245, 0.08);
}

.public-gear-item > div {
	min-width: 0;
}

.public-gear-item strong {
	display: block;
	font-size: 0.93rem;
	font-weight: 600;
}

.public-gear-item small {
	display: block;
	margin-top: 3px;
	color: var(--text-dim);
	font-size: 0.75rem;
}

.gear-empty {
	margin: 5px 0 0;
	color: var(--text-dim);
	font-size: 0.84rem;
}

.mini-badge {
	flex: 0 0 auto;
	padding: 2px 7px;
	border-radius: 999px;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}

.mini-badge.acquired {
	border: 1px solid rgba(56, 230, 142, 0.3);
	color: #77f1ad;
	background: rgba(27, 93, 61, 0.13);
}

.alternate-gear {
	padding: 0 18px 14px;
	border-top: 1px solid rgba(139, 205, 245, 0.09);
}

.alternate-gear summary {
	cursor: pointer;
	padding: 11px 0 2px;
	color: var(--text-muted);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}

.talent-progress-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 24px;
	padding: 14px 18px;
	border: 1px solid rgba(239, 201, 109, 0.22);
	border-radius: 8px;
	background: rgba(7, 14, 24, 0.7);
}

.talent-progress-banner > div {
	text-align: center;
}

.talent-progress-banner span {
	display: block;
	color: var(--text-dim);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.07rem;
}

.talent-progress-banner strong {
	color: var(--gold-bright);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1.1rem;
}

.talent-progress-banner b {
	color: var(--blue);
	font-weight: 400;
}

.talent-progress-banner em {
	padding-left: 17px;
	border-left: 1px solid rgba(139, 205, 245, 0.14);
	color: #72efaa;
	font-size: 0.8rem;
	font-style: normal;
}

.level-progress-card {
	display: grid;
	grid-template-columns: auto minmax(180px, 1fr) auto;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
	padding: 15px 18px;
	border: 1px solid rgba(139, 205, 245, 0.18);
	border-radius: 8px;
	background: rgba(6, 15, 25, 0.72);
}

.level-progress-card > div {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

.level-progress-card span {
	color: var(--text-dim);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
}

.level-progress-card strong {
	color: var(--gold-bright);
	font-family: "Cinzel", Georgia, serif;
	font-size: 1.25rem;
}

.progress-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.progress-summary-card,
.progress-detail-card,
.dungeon-coverage-card {
	border: 1px solid rgba(139, 205, 245, 0.18);
	border-radius: 8px;
	background: rgba(7, 17, 29, 0.79);
}

.progress-summary-card {
	display: flex;
	flex-direction: column;
	min-height: 165px;
	padding: 17px 17px 15px;
	text-align: center;
}

.progress-summary-card > span {
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04rem;
}

.progress-summary-card > strong {
	margin: 13px 0 7px;
	color: var(--gold-bright);
	font-family: "Cinzel", Georgia, serif;
	font-size: 1.55rem;
	font-weight: 600;
}

.progress-summary-card p {
	flex: 1 1 auto;
	margin: 0 0 12px;
	color: var(--text-dim);
	font-size: 0.78rem;
}

.progress-detail-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 14px;
	margin-top: 14px;
}

.progress-detail-card {
	padding: 18px;
}

.progress-detail-card h4,
.dungeon-coverage-card h4 {
	margin: 0 0 15px;
	color: var(--gold-bright);
	font-family: "Cinzel", Georgia, serif;
	font-size: 1rem;
	font-weight: 600;
}

.profession-progress-detail {
	grid-column: 2;
}

.slot-progress-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slot-progress-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(139, 205, 245, 0.08);
	font-size: 0.82rem;
}

.slot-progress-list li span {
	color: var(--text-muted);
}

.slot-progress-list li strong {
	color: var(--text-dim);
	font-size: 0.76rem;
	font-weight: 600;
	text-align: right;
}

.slot-progress-list li strong.good {
	color: #68efaa;
}

.build-splits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.build-splits > div {
	padding: 11px;
	border: 1px solid rgba(139, 205, 245, 0.12);
	border-radius: 6px;
	background: rgba(3, 9, 16, 0.45);
}

.build-splits span,
.detail-progress-row span {
	display: block;
	color: var(--text-dim);
	font-size: 0.7rem;
}

.build-splits strong {
	color: var(--gold-bright);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1rem;
}

.next-goal {
	margin: 14px 0 0;
	color: #70efaa;
	font-size: 0.8rem;
}

.detail-progress-row + .detail-progress-row {
	margin-top: 16px;
}

.detail-progress-row > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 7px;
}

.detail-progress-row strong {
	color: var(--text);
	font-size: 0.84rem;
}

.dungeon-coverage-card {
	max-width: 780px;
	margin: 0 auto;
	padding: 25px 27px 27px;
}

.dungeon-coverage-card > p {
	margin: -5px 0 18px;
	color: var(--text-dim);
	font-size: 0.86rem;
}

.dungeon-coverage-card .compact-list li {
	padding: 9px 0 9px 18px;
	font-size: 0.95rem;
}

@media screen and (max-width: 980px) {
	.progress-summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.progress-detail-grid {
		grid-template-columns: 1fr;
	}

	.profession-progress-detail {
		grid-column: auto;
	}
}

@media screen and (max-width: 760px) {
	.public-character-hero {
		flex-direction: column;
	}

	.level-pair {
		width: 100%;
		min-width: 0;
	}

	.gear-compare-grid {
		grid-template-columns: 1fr;
	}

	.gear-compare-grid > section + section {
		border-top: 1px solid rgba(139, 205, 245, 0.12);
		border-left: 0;
	}

	.section-title-row,
	.snapshot-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.level-progress-card {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.level-progress-card > div:last-child {
		justify-content: flex-end;
	}

	.talent-progress-banner {
		flex-wrap: wrap;
	}

	.talent-progress-banner em {
		width: 100%;
		padding: 9px 0 0;
		border-top: 1px solid rgba(139, 205, 245, 0.14);
		border-left: 0;
		text-align: center;
	}
}

@media screen and (max-width: 520px) {
	.progress-summary-grid {
		grid-template-columns: 1fr;
	}

	.level-pair {
		grid-template-columns: 1fr auto 1fr;
		padding-inline: 10px;
	}

	.level-pair strong {
		font-size: 1.55rem;
	}

	.roster-status {
		align-items: flex-start;
	}

	.roster-status div {
		display: block;
	}

	.roster-status span:not(.presence-dot) {
		display: block;
		margin-top: 2px;
	}
}


/* v2.1.0 public roster refinements */
.character-tabs { align-items: stretch; }
.character-tab { padding-top: 16px; padding-bottom: 14px; min-height: 72px; overflow: visible; }
.character-tab-name { line-height: 1.15; padding-top: 1px; }
.character-tab .tab-level { margin-top: 5px; }
.level-pair.level-single { grid-template-columns: minmax(112px, 1fr); min-width: 150px; }
.level-pair.level-single strong { font-size: 2.15rem; }
.public-overview-grid-three { grid-template-columns: repeat(3, minmax(0,1fr)); }

.gear-sheet { overflow: hidden; margin-top: 22px; border: 1px solid rgba(139,205,245,.2); border-radius: 10px; background: rgba(4,12,21,.74); }
.gear-sheet-head, .gear-sheet-row { display:grid; grid-template-columns: 112px minmax(0,1fr) minmax(0,1fr); }
.gear-sheet-head { background: rgba(8,22,36,.92); border-bottom: 1px solid rgba(139,205,245,.18); }
.gear-sheet-head span { padding: 11px 16px; color: var(--text-dim); font-family:"Rajdhani","Segoe UI",sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.075rem; text-transform:uppercase; }
.gear-sheet-row + .gear-sheet-row { border-top: 1px solid rgba(139,205,245,.1); }
.gear-sheet-row.is-bis { background: linear-gradient(90deg, rgba(29,92,62,.09), rgba(239,201,109,.035)); }
.gear-sheet-slot { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:13px 14px; border-right:1px solid rgba(139,205,245,.1); }
.gear-sheet-slot span { color:var(--gold-bright); font-family:"Rajdhani","Segoe UI",sans-serif; font-weight:700; font-size:.86rem; text-transform:uppercase; }
.gear-sheet-slot strong { color:#70efaa; font-size:.67rem; letter-spacing:.06rem; text-transform:uppercase; }
.gear-sheet-current, .gear-sheet-target { min-width:0; padding:8px 14px; }
.gear-sheet-target { border-left:1px solid rgba(139,205,245,.1); background:rgba(91,65,10,.035); }
.gear-sheet-item { display:flex; align-items:center; gap:11px; min-height:54px; padding:5px 0; }
.gear-sheet-item + .gear-sheet-item { border-top:1px solid rgba(139,205,245,.07); }
.gear-item-icon { flex:0 0 auto; width:40px; height:40px; overflow:hidden; border:1px solid rgba(105,188,235,.42); border-radius:6px; background:#03070d; box-shadow:0 0 12px rgba(56,158,220,.08); }
.gear-item-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.gear-sheet-item > div { min-width:0; }
.gear-sheet-item strong { display:block; font-size:.9rem; font-weight:600; }
.gear-sheet-item small { display:block; margin-top:2px; color:var(--text-dim); font-size:.72rem; white-space:normal; }
.gear-sheet-item.is-empty { opacity:.68; }

.progress-level-simple { display:inline-flex; align-items:baseline; gap:10px; margin-bottom:16px; padding:10px 14px; border:1px solid rgba(239,201,109,.24); border-radius:8px; background:rgba(7,15,25,.72); }
.progress-level-simple span { color:var(--text-dim); font-family:"Rajdhani","Segoe UI",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.07rem; text-transform:uppercase; }
.progress-level-simple strong { color:var(--gold-bright); font-family:"Cinzel",Georgia,serif; font-size:1.45rem; }
.progress-inline-summary { display:flex; flex-wrap:wrap; gap:8px 18px; margin:-2px 0 18px; color:var(--text-dim); font-size:.79rem; }
.progress-inline-summary span + span:before { content:'•'; margin-right:18px; color:rgba(239,201,109,.55); }

.paperdoll-layout { display:grid; grid-template-columns:minmax(250px,1fr) minmax(250px,.85fr) minmax(250px,1fr); gap:14px; align-items:stretch; }
.paperdoll-column { display:flex; flex-direction:column; gap:10px; }
.paper-slot { display:flex; align-items:center; gap:11px; min-height:78px; padding:10px 12px; border:1px solid rgba(139,205,245,.16); border-radius:8px; background:linear-gradient(135deg,rgba(7,18,30,.88),rgba(4,11,19,.88)); }
.paper-slot.is-bis { border-color:rgba(64,226,145,.38); box-shadow:inset 0 0 25px rgba(42,195,119,.035); }
.paper-slot-icon { flex:0 0 auto; width:48px; height:48px; overflow:hidden; border:1px solid rgba(105,188,235,.4); border-radius:7px; background:#02070c; }
.paper-slot-icon img { width:100%; height:100%; object-fit:cover; }
.paper-slot-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.paper-slot-label { color:var(--text-dim); font-family:"Rajdhani","Segoe UI",sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.07rem; text-transform:uppercase; }
.paper-slot-copy strong { min-width:0; color:var(--text); font-size:.83rem; font-weight:600; line-height:1.2; }
.paper-slot-copy small { color:var(--text-dim); font-size:.69rem; line-height:1.25; }
.paper-slot-copy small a { color:var(--blue-bright); }
.paper-slot-copy em { color:#6ff0a8; font-family:"Rajdhani","Segoe UI",sans-serif; font-size:.67rem; font-style:normal; font-weight:700; letter-spacing:.05rem; text-transform:uppercase; }
.paperdoll-bottom { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }

.model-dock { position:relative; display:flex; min-height:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 22px; border:1px solid rgba(239,201,109,.28); border-radius:10px; background:radial-gradient(circle at 50% 35%,rgba(210,161,62,.1),rgba(6,15,25,.82) 52%,rgba(3,9,16,.95)); overflow:hidden; }
.model-dock:before { content:''; position:absolute; inset:12px; border:1px solid rgba(239,201,109,.08); border-radius:7px; pointer-events:none; }
.model-emblem { width:110px; height:110px; margin-bottom:17px; filter:drop-shadow(0 0 18px rgba(239,201,109,.18)); }
.model-emblem img { width:100%; height:100%; object-fit:contain; }
.model-dock h4 { margin:5px 0 8px; color:var(--gold-bright); font-family:"Cinzel",Georgia,serif; font-size:1.35rem; }
.model-dock p { max-width:290px; margin:0 0 18px; color:var(--text-dim); font-size:.8rem; line-height:1.5; }
.model-launch { position:relative; z-index:1; cursor:pointer; min-width:150px; padding:10px 15px; border:1px solid rgba(239,201,109,.55); border-radius:7px; color:#f7d36f; background:rgba(77,54,7,.22); font-family:"Rajdhani","Segoe UI",sans-serif; font-weight:700; letter-spacing:.06rem; text-transform:uppercase; }
.model-launch:hover { background:rgba(115,82,13,.32); }
.model-armory-link { position:relative; z-index:1; margin-top:10px; color:var(--blue-bright); font-size:.72rem; }
body.model-open { overflow:hidden; }
.model-modal { position:fixed; inset:0; z-index:10000; display:none; }
.model-modal.is-open { display:block; }
.model-modal-backdrop { position:absolute; inset:0; background:rgba(0,4,9,.88); backdrop-filter:blur(5px); }
.model-modal-panel { position:absolute; inset:4vh 4vw; display:flex; flex-direction:column; min-height:0; overflow:hidden; border:1px solid rgba(239,201,109,.35); border-radius:12px; background:#07111d; box-shadow:0 24px 90px rgba(0,0,0,.65); }
.model-modal-panel header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid rgba(139,205,245,.16); }
.model-modal-panel h3 { margin:2px 0 0; color:var(--gold-bright); font-family:"Cinzel",Georgia,serif; font-size:1.2rem; }
.model-close { cursor:pointer; border:0; color:var(--text); background:transparent; font-size:2rem; line-height:1; }
.model-modal-help { margin:0; padding:9px 18px; color:var(--text-dim); background:rgba(5,13,23,.92); border-bottom:1px solid rgba(139,205,245,.1); font-size:.78rem; }
.model-modal-panel iframe { flex:1 1 auto; width:100%; min-height:0; border:0; background:#03080e; }
.model-modal-panel footer { padding:9px 18px; border-top:1px solid rgba(139,205,245,.14); text-align:right; }
.model-modal-panel footer a { color:var(--blue-bright); font-size:.78rem; }

@media (max-width: 1000px) {
  .paperdoll-layout { grid-template-columns:1fr 1fr; }
  .model-dock { grid-column:1 / -1; grid-row:1; min-height:280px; }
  .paperdoll-left { grid-column:1; } .paperdoll-right { grid-column:2; }
}
@media (max-width: 720px) {
  .public-overview-grid-three { grid-template-columns:1fr; }
  .gear-sheet-head { display:none; }
  .gear-sheet-row { grid-template-columns:1fr; padding:10px 12px; }
  .gear-sheet-slot { padding:4px 2px 8px; border-right:0; }
  .gear-sheet-current, .gear-sheet-target { padding:8px 0; }
  .gear-sheet-target { border-left:0; border-top:1px solid rgba(139,205,245,.1); }
  .gear-sheet-current:before, .gear-sheet-target:before { display:block; margin-bottom:4px; color:var(--gold); font-family:"Rajdhani","Segoe UI",sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.07rem; text-transform:uppercase; }
  .gear-sheet-current:before { content:'Currently equipped'; } .gear-sheet-target:before { content:'Best in slot / target'; }
  .paperdoll-layout { grid-template-columns:1fr; }
  .model-dock, .paperdoll-left, .paperdoll-right { grid-column:1; }
  .model-dock { grid-row:auto; min-height:250px; }
  .paperdoll-bottom { grid-template-columns:1fr; }
  .model-modal-panel { inset:2vh 2vw; }
  .progress-inline-summary span + span:before { display:none; }
}

/* v2.2.0 — native inline 3D character model */
.model-dock {
  position: relative;
  min-height: 590px;
  padding: 0;
  border: 1px solid rgba(239,201,109,.28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 42%, rgba(54,139,201,.12), transparent 42%),
    radial-gradient(circle at 50% 66%, rgba(210,161,62,.08), transparent 34%),
    linear-gradient(180deg, rgba(7,18,31,.94), rgba(3,10,18,.98));
  overflow: hidden;
}
.model-dock:before {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: 4;
  border: 1px solid rgba(239,201,109,.08);
  border-radius: 7px;
  pointer-events: none;
}
.model-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}
.model-stage > div,
.model-stage canvas {
  width: 100% !important;
  height: 100% !important;
}
.model-loading,
.model-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 42px;
  color: var(--text-dim);
  text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(28,82,119,.11), rgba(3,10,18,.8) 54%);
  pointer-events: none;
}
.model-loading[hidden], .model-fallback[hidden] { display: none; }
.model-loading strong, .model-fallback strong { color: var(--gold-bright); font-family: "Cinzel",Georgia,serif; font-size: 1.05rem; }
.model-loading small, .model-fallback small { max-width: 270px; line-height: 1.5; }
.model-fallback img { width: 90px; height: 90px; object-fit: contain; margin-bottom: 5px; filter: drop-shadow(0 0 18px rgba(239,201,109,.18)); }
.model-spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border: 2px solid rgba(139,205,245,.15);
  border-top-color: var(--gold-bright);
  border-radius: 50%;
  animation: paladin-model-spin .85s linear infinite;
}
@keyframes paladin-model-spin { to { transform: rotate(360deg); } }
.model-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid rgba(139,205,245,.14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(4,12,22,.5), rgba(2,8,15,.9));
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.model-caption strong { color: #edf7ff; font-family: "Cinzel",Georgia,serif; font-size: 1rem; }
.model-caption small { color: var(--text-muted); font-size: .68rem; letter-spacing: .03rem; }
.model-ready .model-caption { opacity: .82; }
@media (max-width: 980px) { .model-dock { min-height: 470px; } }
@media (max-width: 700px) { .model-dock { min-height: 430px; } }


/* v2.2.3 — portrait 3D viewport sizing */
.model-dock { min-height: 640px; }
.model-stage,
.model-stage > *,
.model-stage > * > *,
.model-stage canvas {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
@media (max-width: 980px) { .model-dock { min-height: 540px; } }
@media (max-width: 700px) { .model-dock { min-height: 480px; } }

/* v2.2.4 — default 3D framing: slightly farther back and raised above caption */
.model-stage {
  transform: translateY(-16px);
}