/*
 * Midnight theme overlay. Loaded after the parent (Black/prosilver) stylesheet
 * and restyles it. When overriding parent rules the selector must match or
 * beat the parent's specificity — ties are only won because this file loads
 * later, so keep selector shapes intact when editing.
 *
 * Layout of this file:
 *   1. Tokens
 *   2. Base & global chrome
 *   3. Header bar & brand
 *   4. Navigation
 *   5. Shared panels & cards
 *   6. Forum category / list headers
 *   7. Forum rows
 *   8. Standalone row cards (row kinds A-D)
 *   9. Topics / Posts / Last Post columns
 *  10. Subforum chips
 *  11. Topic lists & status icons
 *  12. Page heading panel
 *  13. Icon maps (every forum-id / forum-name mapping lives here or in §8)
 *  14. Posts, panels, forms, misc UI
 *  15. Animations
 *  16. Responsive & reduced motion
 */

/* =========================================================================
   1. Tokens
   ========================================================================= */

:root {
	--midnight-bg: #080a0f;
	--midnight-panel: #121620;
	--midnight-card: #171b26;
	--midnight-border: rgba(255, 255, 255, 0.09);
	--midnight-text: #f3f4f6;
	--midnight-soft: #cbd5e1;
	--midnight-muted: #9ca3af;
	--midnight-dim: #687084;
	--midnight-accent-2: #ff7a2e;
	--midnight-blue: #3b82f6;
	--midnight-green: #22c55e;
	--midnight-red: #ef4444;
	--midnight-fast: 160ms ease;
	color-scheme: dark;
}

/* =========================================================================
   2. Base & global chrome
   ========================================================================= */

html,
body,
html.simple,
body.simple {
	background: var(--midnight-bg);
	color: var(--midnight-soft);
}

body {
	min-height: 100vh;
	padding: 0;
	font-family: "Montserrat", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	background:
		radial-gradient(circle at 18% 15%, rgba(175, 70, 25, 0.22), transparent 28vw),
		radial-gradient(circle at 82% 20%, rgba(35, 90, 170, 0.2), transparent 32vw),
		radial-gradient(ellipse at center, rgba(255, 255, 255, 0.035), transparent 44vw),
		linear-gradient(180deg, #101827 0%, #06090f 100%);
}

body:before {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(ellipse at 50% 34%, rgba(255, 255, 255, 0.036), transparent 46%),
		radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.46), transparent 54%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.34));
}

#body-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 100vh;
	overflow: visible;
	border: 0;
	background: transparent;
}

a {
	color: var(--midnight-accent-2);
	transition:
		color 150ms ease,
		text-shadow 150ms ease,
		background-color 150ms ease,
		background 150ms ease,
		border-color 150ms ease,
		transform var(--midnight-fast),
		filter var(--midnight-fast);
}

a:hover {
	color: #ffffff;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
	text-decoration: none !important;
}

h1,
p.sitename,
h3,
h4 {
	letter-spacing: 0;
}

h1,
p.sitename {
	margin: 0;
	padding: 0;
	color: var(--midnight-text);
	font-family: inherit;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.08;
}

h1 + p,
p.sitename + p {
	margin: 5px 0 0;
	color: var(--midnight-muted);
	font-size: 13px;
	line-height: 1.45;
	opacity: 1;
}

h2 {
	color: var(--midnight-text);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.2px;
	text-shadow:
		0 1px 1px #000000,
		0 0 10px rgba(255, 130, 45, 0.18);
}

h3 {
	color: var(--midnight-soft);
	font-weight: 800;
}

hr,
table.table1 tbody tr,
table.table1 tbody td,
table.table1 tbody th,
ul.navlinks {
	border-color: rgba(255, 255, 255, 0.08);
}

.page-width {
	width: min(1280px, calc(100% - 40px));
	max-width: 1280px;
	min-width: 0;
	margin-right: auto;
	margin-left: auto;
}

.page-width .page-width {
	width: auto;
	max-width: none;
	margin: 0;
}

#wrap {
	position: relative;
	min-height: 0;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.045);
	border-radius: 24px;
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 48%),
		linear-gradient(180deg, rgba(8, 12, 20, 0.16), rgba(4, 6, 11, 0.08));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#page-body,
.page-body {
	position: relative;
	min-height: 0;
	padding: 0;
	margin: 0;
	clear: none;
}

#page-body > :last-child,
.page-body > :last-child,
#page-body > .forabg:last-of-type,
#page-body > .forumbg:last-of-type,
#page-body > .panel:last-of-type,
#page-body > .action-bar:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   3. Header bar & brand
   ========================================================================= */

.headerbar {
	position: relative;
	margin: 0 0 12px;
	overflow: hidden;
	color: var(--midnight-text);
	border: 1px solid rgba(255, 145, 60, 0.25);
	border-radius: 18px;
	background:
		radial-gradient(circle at 15% 18%, rgba(255, 110, 35, 0.28), transparent 32%),
		radial-gradient(circle at 85% 20%, rgba(60, 140, 255, 0.22), transparent 36%),
		radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045), transparent 56%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.18)),
		linear-gradient(90deg, #32170f 0%, #171824 42%, #0d1a2f 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 190, 0.13),
		inset 0 -1px 0 rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(255, 255, 255, 0.045),
		0 18px 42px rgba(0, 0, 0, 0.5);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.section-index .headerbar {
	margin-bottom: 0;
}

.headerbar:before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 78% 18%, rgba(59, 130, 246, 0.14), transparent 34%),
		linear-gradient(90deg, rgba(255, 88, 11, 0.14), transparent 46%, rgba(59, 130, 246, 0.12)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.34));
	opacity: 0.92;
}

.headerbar:after {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background: linear-gradient(110deg, transparent 0%, transparent 36%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 142, 54, 0.12) 53%, rgba(64, 145, 255, 0.1) 58%, transparent 70%, transparent 100%);
	opacity: 0;
	transform: translate3d(-120%, 0, 0);
	animation: mdps-headerbar-shine 5s ease-in-out infinite;
}

.headerbar > .inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 134px;
	padding: 12px 26px;
}

.headerbar:hover {
	border-color: rgba(255, 170, 85, 0.36);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 190, 0.16),
		inset 0 -1px 0 rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(90, 155, 255, 0.06),
		0 20px 46px rgba(0, 0, 0, 0.52),
		0 0 22px rgba(255, 112, 36, 0.07);
}

.site-description {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	float: none;
	width: min(820px, 100%);
	text-align: left;
}

.logo {
	position: relative;
	display: grid;
	flex: 0 0 128px;
	place-items: center;
	width: 128px;
	height: 128px;
	margin: 0 24px 0 0;
	padding: 0;
	float: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.logo:before,
.logo:after {
	position: absolute;
	inset: 8px;
	z-index: 0;
	pointer-events: none;
	content: "";
	border-radius: 50%;
	border: 1px solid rgba(255, 132, 48, 0.34);
	background: radial-gradient(circle, rgba(255, 122, 36, 0.16), transparent 62%);
	box-shadow:
		0 0 14px rgba(255, 122, 36, 0.16),
		inset 0 0 14px rgba(255, 122, 36, 0.08);
	opacity: 0;
	transform: scale(0.78);
	animation: mdps-logo-wave 4.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.logo:after {
	inset: 4px;
	border-color: rgba(63, 143, 255, 0.28);
	background: radial-gradient(circle, rgba(63, 143, 255, 0.12), transparent 64%);
	box-shadow:
		0 0 16px rgba(63, 143, 255, 0.14),
		inset 0 0 14px rgba(63, 143, 255, 0.07);
	animation-delay: 1.55s;
}

.logo img {
	position: relative;
	z-index: 1;
	width: 128px;
	height: 128px;
	object-fit: contain;
	filter:
		drop-shadow(0 14px 26px rgba(0, 0, 0, 0.38))
		drop-shadow(0 0 14px rgba(255, 88, 11, 0.28));
	transition: filter 180ms ease, transform 220ms ease;
}

.logo:hover img {
	filter:
		drop-shadow(0 16px 28px rgba(0, 0, 0, 0.42))
		drop-shadow(0 0 18px rgba(255, 122, 36, 0.36));
}

.midnight-brand-copy {
	min-width: 0;
}

.site-description .sitename {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 0.3px;
	color: #f5f7ff;
	line-height: 1.06;
	text-shadow:
		0 2px 2px rgba(0, 0, 0, 0.85),
		0 0 16px rgba(255, 130, 45, 0.24),
		0 0 26px rgba(70, 140, 255, 0.13);
}

.site-description .skiplink {
	position: absolute;
	left: -999px;
}

.midnight-header-actions {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	max-width: min(420px, calc(100% - 32px));
}

.midnight-header-auth-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 6px;
	min-height: 32px;
	max-width: 230px;
	padding: 0 10px;
	border: 1px solid rgba(255, 145, 60, 0.28);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--midnight-soft);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.3);
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.midnight-header-auth-link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.midnight-header-auth-link .icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	margin: 0;
	color: var(--midnight-accent-2);
	line-height: 1;
}

.midnight-header-auth-link:hover,
.midnight-header-auth-link:focus {
	color: #ffffff;
	border-color: rgba(255, 145, 60, 0.6);
	background:
		radial-gradient(circle at top, rgba(255, 88, 11, 0.28), transparent 62%),
		rgba(255, 255, 255, 0.08);
	text-decoration: none;
	transform: translateY(-2px);
	outline: none;
}

.midnight-header-auth-primary {
	border-color: rgba(96, 165, 250, 0.4);
	background: rgba(34, 77, 130, 0.28);
}

.midnight-header-auth-icon {
	position: relative;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
}

.midnight-header-auth-icon .icon {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	line-height: 1;
	text-align: center;
	transform: none;
}

.midnight-header-auth-icon .icon:before {
	display: block;
	width: auto;
	margin: 0;
	line-height: 1;
	text-align: center;
}

.midnight-header-user-link,
.midnight-feed-user-link {
	gap: 0;
	text-align: center;
}

.midnight-header-user-link {
	padding-right: 11px;
	padding-left: 11px;
}

.midnight-header-user-link > span,
.midnight-feed-user-link > span,
.midnight-header-user-link .username,
.midnight-feed-user-link .username {
	display: block;
	width: 100%;
	text-align: center;
}

.midnight-header-auth-link.has-unread {
	border-color: rgba(255, 145, 60, 0.62);
	color: #ffffff;
}

.header-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 145, 60, 0.28);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--midnight-soft);
	font-size: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.3);
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.header-action-icon:hover,
.header-action-icon:focus {
	color: #ffffff;
	border-color: rgba(255, 145, 60, 0.6);
	background:
		radial-gradient(circle at top, rgba(255, 88, 11, 0.28), transparent 62%),
		rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
	outline: none;
}

/* Index activity feed */

.midnight-activity-hub {
	display: grid;
	gap: 10px;
	margin: 12px 0;
	padding: 10px;
	border: 1px solid var(--midnight-border);
	border-radius: 10px;
	background:
		radial-gradient(circle at 12% 0%, rgba(255, 145, 60, 0.14), transparent 26%),
		radial-gradient(circle at 88% 12%, rgba(70, 140, 255, 0.12), transparent 30%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
		linear-gradient(180deg, rgba(25, 31, 45, 0.95), rgba(12, 16, 26, 0.98));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		0 12px 28px rgba(0, 0, 0, 0.36);
}

.midnight-activity-hub.page-width {
	width: min(1244px, calc(100% - 76px));
	max-width: 1244px;
	margin-top: 18px;
	margin-right: auto;
	margin-bottom: 18px;
	margin-left: auto;
}

#wrap .midnight-activity-hub.page-width {
	width: auto;
	max-width: none;
	margin: 2px 0 16px;
}

.midnight-feed-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}

.midnight-feed-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-left: auto;
}

.midnight-feed-tab,
.midnight-feed-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 32px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.midnight-feed-tab {
	position: relative;
	gap: 6px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	appearance: none;
	background: rgba(255, 255, 255, 0.045);
	color: var(--midnight-soft);
	cursor: pointer;
	font-family: inherit;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.midnight-feed-tab .icon {
	width: 1em;
	margin: 0;
	color: var(--midnight-accent-2);
}

.midnight-feed-auth .icon {
	color: #ffb066;
}

.midnight-feed-home {
	flex: 0 0 32px;
	width: 32px;
	padding: 0;
}

.midnight-feed-icon-only {
	flex: 0 0 32px;
	width: 32px;
	padding: 0;
}

.midnight-feed-user-link {
	padding-right: 11px;
	padding-left: 11px;
}

.midnight-feed-home .icon {
	color: #ffb066;
}

.midnight-feed-tab.is-active,
.midnight-feed-tab:hover,
.midnight-feed-tab:focus {
	border-color: rgba(255, 145, 60, 0.48);
	background: rgba(255, 88, 11, 0.13);
	color: #ffffff;
	transform: translateY(-1px);
	outline: none;
}

.midnight-latest-feed {
	display: grid;
	gap: 8px;
}

.midnight-feed-item {
	position: relative;
	display: grid;
	gap: 5px;
	overflow: hidden;
	padding: 11px 12px 11px 15px;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 10px;
	background:
		linear-gradient(90deg, rgba(var(--feed-accent-rgb, 255, 145, 60), 0.09), transparent 34%),
		rgba(13, 18, 30, 0.82);
	box-shadow: inset 3px 0 0 rgba(var(--feed-accent-rgb, 255, 145, 60), 0.72);
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.midnight-feed-item:nth-of-type(6n + 1) {
	--feed-accent-rgb: 255, 88, 11;
}

.midnight-feed-item:nth-of-type(6n + 2) {
	--feed-accent-rgb: 70, 140, 255;
}

.midnight-feed-item:nth-of-type(6n + 3) {
	--feed-accent-rgb: 34, 197, 94;
}

.midnight-feed-item:nth-of-type(6n + 4) {
	--feed-accent-rgb: 168, 85, 247;
}

.midnight-feed-item:nth-of-type(6n + 5) {
	--feed-accent-rgb: 245, 158, 11;
}

.midnight-feed-item:nth-of-type(6n) {
	--feed-accent-rgb: 20, 184, 166;
}

.midnight-feed-item:hover,
.midnight-feed-item:focus-within {
	border-color: rgba(var(--feed-accent-rgb, 255, 145, 60), 0.42);
	background:
		linear-gradient(90deg, rgba(var(--feed-accent-rgb, 255, 145, 60), 0.16), transparent 42%),
		rgba(18, 25, 40, 0.92);
	box-shadow:
		inset 3px 0 0 rgba(var(--feed-accent-rgb, 255, 145, 60), 0.95),
		0 10px 24px rgba(0, 0, 0, 0.28);
	transform: translateY(-1px);
}

.midnight-feed-title {
	color: #ffffff;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.25;
	text-decoration: none;
}

.midnight-feed-title:hover,
.midnight-feed-title:focus {
	color: #ffb066;
	text-decoration: none;
}

.midnight-feed-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	color: rgba(221, 227, 239, 0.68);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
}

.midnight-feed-meta a {
	color: rgba(255, 176, 102, 0.92);
	text-decoration: none;
}

.midnight-feed-item p,
.midnight-feed-empty {
	margin: 0;
	color: rgba(221, 227, 239, 0.82);
	font-size: 12px;
	line-height: 1.45;
}

.midnight-feed-more {
	justify-self: center;
	width: auto;
	padding: 0 12px;
}

.midnight-feed-sentinel {
	width: 100%;
	height: 1px;
}

/* Index class rail (static markup in index_body.html) */

.midnight-class-rail.is-temporarily-hidden {
	display: none;
}

.midnight-class-rail {
	display: grid;
	grid-template-columns: repeat(13, minmax(0, 1fr));
	gap: 6px;
	margin: 2px 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--midnight-border);
	border-radius: 14px;
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 145, 60, 0.1), transparent 32%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
		linear-gradient(180deg, rgba(25, 31, 45, 0.95), rgba(12, 16, 26, 0.98));
	box-shadow:
		inset 0 0 20px rgba(255, 255, 255, 0.025),
		0 10px 26px rgba(0, 0, 0, 0.35);
}

.midnight-class-rail a {
	display: block;
	aspect-ratio: 1;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
	transition: transform 180ms ease, filter 180ms ease;
}

.midnight-class-rail a:hover,
.midnight-class-rail a:focus {
	transform: translateY(-3px) scale(1.08);
	outline: none;
	filter:
		drop-shadow(0 0 8px rgba(255, 150, 60, 0.55))
		drop-shadow(0 3px 5px rgba(0, 0, 0, 0.7));
}

/* =========================================================================
   4. Navigation
   ========================================================================= */

.navbar {
	background: transparent;
}

.navbar.tabbed,
.navbar.secondary,
.page-body .navbar {
	margin-bottom: 12px;
}

.navbar .nav-tabs,
.navbar.secondary {
	border: 1px solid var(--midnight-border);
	border-radius: 16px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
		rgba(18, 22, 32, 0.88);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.navbar .nav-tabs .tab {
	color: var(--midnight-soft);
	background: transparent;
}

.navbar .nav-tabs .tab .nav-link,
.navbar.secondary a {
	color: inherit;
	font-weight: 700;
}

.navbar .nav-tabs .tab.selected,
.navbar .nav-tabs .tab:hover,
.navbar .nav-tabs .tab.dropdown-visible,
.navbar.secondary > ul > li:hover,
.navbar.secondary > ul > li.dropdown-visible {
	color: #ffffff;
	background:
		radial-gradient(circle at top, rgba(255, 88, 11, 0.18), transparent 62%),
		rgba(255, 255, 255, 0.045);
}

.navbar .nav-tabs .tab.selected {
	color: var(--midnight-accent-2);
}

.navbar .nav-tabs .tab > strong {
	color: #ffffff;
	background: linear-gradient(180deg, #ff6a1f, #d9480f);
	box-shadow: 0 8px 18px rgba(255, 88, 11, 0.28);
}

.navbar .nav-tabs .tab > strong .arrow {
	border-top-color: #d9480f;
}

.breadcrumbs .crumb:before {
	color: var(--midnight-dim);
}

#nav-breadcrumbs,
.nav-breadcrumbs {
	display: none;
}

/* =========================================================================
   5. Shared panels & cards
   ========================================================================= */

.forabg,
.forumbg,
.panel,
.stat-block,
.post,
.dropdown .dropdown-contents,
.dropdown-extended .dropdown-contents,
.phpbb_alert {
	border: 1px solid var(--midnight-border);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(31, 36, 50, 0.98), rgba(14, 18, 29, 0.98)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
		var(--midnight-panel);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 12px 28px rgba(0, 0, 0, 0.35);
	color: var(--midnight-soft);
}

.forabg,
.forumbg {
	margin: 0 0 18px;
	padding: 0;
	overflow: hidden;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.forabg:hover,
.forumbg:hover {
	border-color: rgba(255, 145, 60, 0.22);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		0 14px 34px rgba(0, 0, 0, 0.42),
		0 0 18px rgba(255, 105, 35, 0.045);
}

/* =========================================================================
   6. Forum category / list headers
   ========================================================================= */

.forabg > .inner,
.forumbg > .inner {
	padding: 0;
}

.forabg ul.topiclist li.header {
	position: relative;
	min-height: 72px;
	overflow: hidden;
	border: 0;
	border-bottom: 1px solid rgba(255, 145, 65, 0.28);
	background:
		radial-gradient(circle at 34px 50%, rgba(var(--class-rgb), 0.38), transparent 108px),
		radial-gradient(circle at 82% 0%, rgba(80, 145, 255, 0.13), transparent 42%),
		linear-gradient(90deg, rgba(var(--class-rgb), 0.42), rgba(70, 50, 65, 0.42) 45%, rgba(26, 32, 46, 0.92)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
		rgba(255, 88, 11, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.65),
		inset 0 0 24px rgba(0, 0, 0, 0.2);
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.forabg ul.topiclist li.header:before {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 1px;
	z-index: 2;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(255, 140, 55, 0.75), rgba(80, 145, 255, 0.45), transparent);
	opacity: 0.78;
	transition: opacity 160ms ease;
}

.forabg ul.topiclist li.header:after {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	content: "";
	background: linear-gradient(110deg, transparent 0%, transparent 34%, rgba(255, 255, 255, 0.09) 48%, rgba(var(--class-rgb), 0.16) 53%, transparent 66%, transparent 100%);
	opacity: 0;
	transform: translateX(-120%);
}

.forabg:hover ul.topiclist li.header:before {
	opacity: 1;
}

.forabg:hover ul.topiclist li.header:after {
	animation: mdps-header-shine-hover 0.9s ease-out 1;
}

.forabg ul.topiclist li.header dt,
.forabg ul.topiclist li.header dd,
.forabg ul.topiclist li.header a {
	color: var(--midnight-text);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.forabg ul.topiclist li.header dl.row-item {
	min-height: 72px;
	position: relative;
	z-index: 3;
}

.forabg ul.topiclist li.header dt .list-inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 72px;
	padding-left: 88px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.2px;
	line-height: 1.1;
	text-transform: none;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(255, 145, 60, 0.22);
}

.forabg ul.topiclist li.header dt .list-inner:before {
	position: absolute;
	left: -6px;
	top: 50%;
	width: 78px;
	height: 78px;
	content: "";
	transform: translateY(-50%);
	background: var(--class-icon) center / contain no-repeat;
	filter:
		drop-shadow(0 10px 18px rgba(0, 0, 0, 0.38))
		drop-shadow(0 0 10px rgba(var(--class-rgb), 0.22));
	transition: filter 160ms ease, transform 160ms ease;
}

.forabg ul.topiclist li.header dt .list-inner a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.2px;
	line-height: 1.1;
	text-transform: none;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.9),
		0 0 10px rgba(255, 145, 60, 0.22);
}

.forabg ul.topiclist li.header dt .list-inner a:hover {
	color: var(--midnight-accent-2);
	text-shadow: none;
	filter: none;
}

.forabg ul.topiclist li.header:has(dt .list-inner a:hover) {
	border-color: rgba(var(--class-rgb), 0.42);
	background:
		radial-gradient(circle at 34px 50%, rgba(var(--class-rgb), 0.5), transparent 116px),
		linear-gradient(90deg, rgba(var(--class-rgb), 0.52), rgba(70, 50, 65, 0.42) 45%, rgba(26, 32, 46, 0.92)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
		rgba(255, 88, 11, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.62),
		0 0 18px rgba(var(--class-rgb), 0.1);
}

.forabg ul.topiclist li.header:has(dt .list-inner a:hover) dt .list-inner:before {
	transform: translateY(-50%) scale(1.03);
	filter:
		drop-shadow(0 12px 20px rgba(0, 0, 0, 0.42))
		drop-shadow(0 0 16px rgba(var(--class-rgb), 0.48));
}

.forabg ul.topiclist li.header dd {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 72px;
	border-left: 0;
	background: transparent;
	box-shadow: none;
	color: rgba(255, 244, 230, 0.9);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.72),
		0 0 8px rgba(255, 145, 60, 0.2);
}

.forabg ul.topiclist li.header dd.lastpost:before {
	position: absolute;
	left: 6px;
	top: 50%;
	width: 1px;
	height: 40px;
	content: "";
	transform: translateY(-50%);
	background: linear-gradient(180deg, transparent, rgba(255, 190, 130, 0.62), transparent);
	box-shadow: 0 0 10px rgba(255, 145, 60, 0.2);
}

/* NOTE: `.forumbg ul.topiclist li.header` is hidden outright in section 15
   ("Hidden chrome"), so it and every descendant render nothing. Rules that
   only ever matched that subtree used to live here and were removed. */

.forabg ul.topiclist li.header dd span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: transparent;
	text-align: center;
}

/* =========================================================================
   7. Forum rows
   ========================================================================= */

ul.topiclist li {
	color: var(--midnight-muted);
}

.bg1,
.bg2,
table.zebra-list tr:nth-child(odd) td,
table.zebra-list tr:nth-child(even) td,
ul.zebra-list li:nth-child(odd),
ul.zebra-list li:nth-child(even) {
	background: transparent;
}

.forabg ul.topiclist li.row,
.forumbg ul.topiclist li.row,
li.row {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 55%),
		rgba(13, 18, 30, 0.82);
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.forabg ul.topiclist li.row:hover,
.forumbg ul.topiclist li.row:hover,
li.row:hover {
	border-color: rgba(255, 88, 11, 0.32);
	background:
		linear-gradient(90deg, rgba(255, 120, 45, 0.1), rgba(35, 80, 140, 0.08)),
		rgba(17, 24, 38, 0.95);
	box-shadow: inset 3px 0 0 rgba(255, 125, 45, 0.65);
}

/* =========================================================================
   8. Standalone row cards
   Every forum row this board renders is one of four kinds:
     A - class "Midnight" rows (by forum id, one per class);
     B - class "Previous Expansions" rows (by forum name);
     C - spec rows (by forum id; icons in §13);
     D - expansion rows (by forum name so future per-class archives are
         covered automatically; forum-266 by id because its name "Midnight"
         collides with kind A).
   Kind blocks only set custom properties; the shared rules below consume
   them. Defaults equal the kind C/D geometry.
   ========================================================================= */

/* Kind A */
.forabg ul.topiclist.forums li:is(
	.forum-4, .forum-23, .forum-42, .forum-65, .forum-84, .forum-103, .forum-122,
	.forum-141, .forum-160, .forum-179, .forum-198, .forum-217, .forum-236
) {
	--row-accent: rgba(75, 145, 255, 0.65);
	--row-accent-hover: rgba(255, 135, 45, 0.75);
	--row-min-height: 78px;
	--row-dl-margin: 0;
	--row-icon: url("./images/expansion-midnight-logo.png");
	--row-icon-width: 58px;
	--row-icon-height: 58px;
	--row-icon-offset: 6px;
	--row-icon-gap: 16px;
	--row-icon-filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(80, 145, 255, 0.18));
}

/* Kind B — the two archive rows. "Previous patches" (older patches of the
   current expansion, one per class under Midnight) reads as the same kind of
   thing as "Previous Expansions" and shares its icon and geometry. */
.forabg ul.topiclist.forums li[data-forum-name="Previous Expansions"],
.forabg ul.topiclist.forums li[data-forum-name="Previous patches"] {
	--row-accent: rgba(120, 140, 160, 0.28);
	--row-accent-hover: rgba(255, 135, 45, 0.75);
	--row-min-height: 78px;
	--row-dl-margin: 0;
	--row-icon: url("./images/previous-expansions-icon.png");
	--row-icon-width: 58px;
	--row-icon-height: 58px;
	--row-icon-offset: 6px;
	--row-icon-gap: 16px;
	--row-icon-filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 10px rgba(90, 150, 255, 0.2));
}

.forabg ul.topiclist.forums li[data-forum-name="Previous Expansions"] .subforums-list,
.forabg ul.topiclist.forums li[data-forum-name="Previous patches"] .subforums-list {
	display: none;
}

/* Kind E — подфорумы Community.
   Своего рода у них не было, и они брали значения по умолчанию: иконка 48px
   против 58px у классовых строк, из-за чего выглядели мельче соседних
   категорий. Геометрия здесь та же, что у родов A и B.

   Ключ — категория, а не имя раздела: имя «General» носят ещё ~90
   подфорумов внутри классовых веток (по одному на дополнение), и они должны
   остаться в общем ряду со своими спек-соседями. */
.forabg[data-forum-name="Community"] ul.topiclist.forums li.row {
	--row-min-height: 78px;
	--row-dl-margin: 0;
	--row-icon-width: 58px;
	--row-icon-height: 58px;
	--row-icon-offset: 6px;
	--row-icon-gap: 16px;
	--row-icon-filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
}

/* Kind C */
.forabg ul.topiclist.forums li:is(
	.forum-5, .forum-6, .forum-7, .forum-24, .forum-25, .forum-26, .forum-43, .forum-44, .forum-45, .forum-46,
	.forum-66, .forum-67, .forum-68, .forum-85, .forum-86, .forum-87, .forum-104, .forum-105, .forum-106,
	.forum-123, .forum-124, .forum-125, .forum-142, .forum-143, .forum-144, .forum-161, .forum-162, .forum-163,
	.forum-180, .forum-181, .forum-182, .forum-199, .forum-200, .forum-201, .forum-218, .forum-219, .forum-220,
	.forum-237, .forum-238, .forum-239
) {
	--row-icon-filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.32));
	--row-dd-color: #b7c3d5;
	--row-dd-border: rgba(255, 255, 255, 0.035);
	--row-stat-color: #b7c3d5;
	--row-stat-shadow: none;
}

/* Kind D */
.forabg ul.topiclist.forums li:is(
	[data-forum-name="Vanilla"],
	[data-forum-name="The Burning Crusade"],
	[data-forum-name="Wrath of the Lich King"],
	[data-forum-name="Cataclysm"],
	[data-forum-name="Mists of Pandaria"],
	[data-forum-name="Warlords of Draenor"],
	[data-forum-name="Legion"],
	[data-forum-name="Battle for Azeroth"],
	[data-forum-name="Shadowlands"],
	[data-forum-name="Dragonflight"],
	[data-forum-name="The War Within"],
	[data-forum-name="Season of Discovery"],
	.forum-266
) {
	--row-icon-filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 9px rgba(255, 210, 122, 0.18));
	--row-dd-color: #b7c3d5;
	--row-dd-border: rgba(255, 255, 255, 0.035);
	--row-stat-color: #b7c3d5;
	--row-stat-shadow: none;
}

/* Expansion rows may themselves contain spec/patch subforums now; keep the
   Previous Expansions list compact by hiding phpBB's inline subforum-chip
   preview here too (same reasoning as the Previous Expansions row itself). */
.forabg ul.topiclist.forums li:is(
	[data-forum-name="Vanilla"],
	[data-forum-name="The Burning Crusade"],
	[data-forum-name="Wrath of the Lich King"],
	[data-forum-name="Cataclysm"],
	[data-forum-name="Mists of Pandaria"],
	[data-forum-name="Warlords of Draenor"],
	[data-forum-name="Legion"],
	[data-forum-name="Battle for Azeroth"],
	[data-forum-name="Shadowlands"],
	[data-forum-name="Dragonflight"],
	[data-forum-name="The War Within"],
	[data-forum-name="Season of Discovery"],
	.forum-266
) .subforums-list {
	display: none;
}

/* Shared card & layout rules (must stay after the §7 hover rules: equal
   specificity, later source order keeps hover background/border static) */

.forabg ul.topiclist.forums li.row {
	margin: 4px 0 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 10px;
	background: rgba(13, 18, 30, 0.82);
	box-shadow: inset 3px 0 0 var(--row-accent, transparent);
}

.forabg ul.topiclist.forums li.row:hover {
	box-shadow: inset 3px 0 0 var(--row-accent-hover, rgba(255, 125, 45, 0.65));
}

.forabg ul.topiclist.forums li.row dl.row-item {
	display: flex;
	align-items: stretch;
	min-height: var(--row-min-height, 68px);
	margin: var(--row-dl-margin, 2px 0);
	background-image: none !important;
}

.forabg ul.topiclist.forums li.row dl.row-item dt {
	position: relative;
	z-index: 1;
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: var(--row-min-height, 68px);
	margin-right: 0;
	background-image: none !important;
}

.forabg ul.topiclist.forums li.row dl.row-item dt:before {
	position: absolute;
	left: var(--row-icon-offset, 10px);
	top: 50%;
	z-index: 1;
	width: var(--row-icon-width, 48px);
	height: var(--row-icon-height, 48px);
	content: "";
	transform: translateY(-50%);
	border-radius: var(--row-icon-radius, 0);
	background: var(--row-icon, url("./images/expansion-midnight-logo.png")) center / var(--row-icon-fit, contain) no-repeat;
	box-shadow: var(--row-icon-shadow, none);
	filter: var(--row-icon-filter, none);
	pointer-events: none;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .list-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--row-min-height, 68px);
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: calc(var(--row-icon-offset, 10px) + var(--row-icon-width, 48px) + var(--row-icon-gap, 14px));
}

.forabg ul.topiclist.forums li.row dl.row-item dd {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	min-height: var(--row-min-height, 68px);
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	/* Kind A/B separators keep the parent stylesheet's ul.topiclist dd
	   border colour; kinds C/D override via --row-dd-border. */
	border-left: 1px solid var(--row-dd-border, #1f1f1f);
	background: transparent;
	box-shadow: none;
	/* Kind A/B text falls back to the muted tone `ul.topiclist dd` gave it
	   before this block existed; kinds C/D override via --row-dd-color. */
	color: var(--row-dd-color, var(--midnight-muted));
	line-height: 1.25;
	pointer-events: auto;
}

.forabg ul.topiclist.forums li.row dl.row-item dd.topics,
.forabg ul.topiclist.forums li.row dl.row-item dd.posts {
	flex: 0 0 95px;
	width: 95px;
	color: var(--row-stat-color, var(--midnight-muted));
	text-shadow: var(--row-stat-shadow, 0 0 8px rgba(90, 150, 255, 0.25));
}

.forabg ul.topiclist.forums li.row dl.row-item dd.lastpost {
	flex: 0 0 250px;
	justify-content: flex-start;
	width: 250px;
	text-align: left;
}

.forabg ul.topiclist.forums li.row dl.row-item dd.lastpost > span {
	display: block;
	padding-left: 8px;
	line-height: 1.32;
}

.forabg ul.topiclist.forums li.row dl.row-item dd.lastpost a {
	position: relative;
	z-index: 4;
}

/* A block that contains standalone rows drops its own card chrome; the
   section header becomes its own card instead. */

.forabg:has(ul.topiclist.forums li.row) {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.forabg:has(ul.topiclist.forums li.row):hover {
	border-color: transparent;
	box-shadow: none;
}

.forabg:has(ul.topiclist.forums li.row) > .inner,
.forabg:has(ul.topiclist.forums li.row) ul.topiclist.forums {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.forabg:has(ul.topiclist.forums li.row) > .inner > ul.topiclist:not(.forums) > li.header {
	border: 1px solid rgba(255, 145, 65, 0.28);
	border-radius: 14px;
}

/* On class pages the block holding spec rows gets a slightly smaller,
   nudged header icon. */

.forabg:has(ul.topiclist.forums li:is(
	.forum-5, .forum-6, .forum-7, .forum-24, .forum-25, .forum-26, .forum-43, .forum-44, .forum-45, .forum-46,
	.forum-66, .forum-67, .forum-68, .forum-85, .forum-86, .forum-87, .forum-104, .forum-105, .forum-106,
	.forum-123, .forum-124, .forum-125, .forum-142, .forum-143, .forum-144, .forum-161, .forum-162, .forum-163,
	.forum-180, .forum-181, .forum-182, .forum-199, .forum-200, .forum-201, .forum-218, .forum-219, .forum-220,
	.forum-237, .forum-238, .forum-239
)) > .inner > ul.topiclist:not(.forums) > li.header dt .list-inner {
	padding-left: 78px;
}

.forabg:has(ul.topiclist.forums li:is(
	.forum-5, .forum-6, .forum-7, .forum-24, .forum-25, .forum-26, .forum-43, .forum-44, .forum-45, .forum-46,
	.forum-66, .forum-67, .forum-68, .forum-85, .forum-86, .forum-87, .forum-104, .forum-105, .forum-106,
	.forum-123, .forum-124, .forum-125, .forum-142, .forum-143, .forum-144, .forum-161, .forum-162, .forum-163,
	.forum-180, .forum-181, .forum-182, .forum-199, .forum-200, .forum-201, .forum-218, .forum-219, .forum-220,
	.forum-237, .forum-238, .forum-239
)) > .inner > ul.topiclist:not(.forums) > li.header dt .list-inner:before {
	left: 2px;
	width: 68px;
	height: 68px;
}

/* =========================================================================
   9. Topics / Posts / Last Post columns (shared text & colours)
   ========================================================================= */

ul.topiclist dt,
ul.topiclist dd {
	color: var(--midnight-muted);
}

dl.row-item dt a,
a.forumtitle,
a.topictitle,
.postbody h3 a {
	color: var(--midnight-text);
	font-weight: 800;
}

dl.row-item dt a:hover,
a.forumtitle:hover,
a.topictitle:hover,
.postbody h3 a:hover {
	color: var(--midnight-accent-2);
}

.forum_unread .forumtitle,
.forum_unread_subforum .forumtitle,
.forum_unread_locked .forumtitle,
.global_unread .topictitle,
.global_unread_mine .topictitle,
.global_unread_locked .topictitle,
.global_unread_locked_mine .topictitle,
.announce_unread .topictitle,
.announce_unread_mine .topictitle,
.announce_unread_locked .topictitle,
.announce_unread_locked_mine .topictitle,
.sticky_unread .topictitle,
.sticky_unread_mine .topictitle,
.sticky_unread_locked .topictitle,
.sticky_unread_locked_mine .topictitle,
.topic_unread .topictitle,
.topic_unread_mine .topictitle,
.topic_unread_locked .topictitle,
.topic_unread_locked_mine .topictitle,
.topic_unread_hot .topictitle,
.topic_unread_hot_mine .topictitle,
.pm_unread .topictitle {
	color: #ff8a4c;
}

.forum-description,
.topic-poster,
.forum-lastpost,
.forum-statistics,
dd.lastpost,
dd.views {
	color: #b7c3d5;
}

.forabg ul.topiclist li.row:hover .forum-description,
.forabg ul.topiclist li.row:hover .list-inner,
.forumbg ul.topiclist li.row:hover .list-inner {
	color: #d4deee;
}

dd.topics,
dd.posts {
	color: #dce8ff;
	text-shadow: 0 0 8px rgba(90, 150, 255, 0.25);
}

dd.topics dfn,
dd.posts dfn {
	color: rgba(255, 255, 255, 0.65);
}

dd.topics,
dd.posts,
dd.lastpost {
	background: rgba(0, 0, 0, 0.08);
}

dd.lastpost a {
	color: #ff9a36;
	font-weight: 700;
	text-shadow: 0 0 8px rgba(255, 105, 30, 0.25);
}

dd.lastpost a:hover {
	color: #ffd38a;
	text-shadow: 0 0 10px rgba(255, 150, 60, 0.55);
}

.forum-statistics .value,
li.row strong,
.forum-lastpost strong,
.forum-lastpost a.lastsubject {
	color: var(--midnight-soft);
}

/* =========================================================================
   10. Subforum chips (spec links under class "Midnight" rows)
   High-specificity selectors are required to beat the parent stylesheet's
   `li.row .subforums-list ...` rules.
   ========================================================================= */

.subforums-list {
	color: #aebbd0;
	font-size: 12px;
}

/* Kept at low specificity on purpose: the per-spec map in §13 must win. */
.subforums-list a {
	--subforum-color: #f0f4ff;
	--subforum-icon: none;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list > strong {
	display: none !important;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list ul {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: 0;
	vertical-align: middle;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list li {
	display: inline-flex;
	align-items: center;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list li span {
	display: none !important;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list a.subforum {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--subforum-color) !important;
	font-weight: 900;
	line-height: 1.4;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.68);
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list a.subforum .icon {
	display: none;
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list a.subforum:before {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	content: "";
	background: var(--subforum-icon) center / contain no-repeat;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.66));
}

.forabg ul.topiclist.forums li.row dl.row-item dt .subforums-list a.subforum:hover {
	color: var(--midnight-accent-2) !important;
	background: transparent;
	text-shadow: none;
}

/* =========================================================================
   11. Topic lists & status icons (.forumbg)
   ========================================================================= */

/* Strip the wrapping .forumbg panel and turn each topic into a standalone
   rounded row-card, mirroring the forum-list treatment in §8 so viewforum's
   topic list reads the same as its forum list (no outer box). */
.forumbg:has(ul.topiclist.topics li.row) {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.forumbg:has(ul.topiclist.topics li.row):hover {
	border-color: transparent;
	box-shadow: none;
}

.forumbg:has(ul.topiclist.topics li.row) > .inner {
	margin: 0;
	padding: 0;
}

.forumbg ul.topiclist.topics li.row {
	margin: 4px 0 0;
	min-height: 68px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 10px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 55%),
		rgba(13, 18, 30, 0.82);
	box-shadow: inset 3px 0 0 transparent;
}

.forumbg ul.topiclist.topics li.row:hover {
	border-color: rgba(255, 88, 11, 0.32);
	background:
		linear-gradient(90deg, rgba(255, 120, 45, 0.1), rgba(35, 80, 140, 0.08)),
		rgba(17, 24, 38, 0.95);
	box-shadow: inset 3px 0 0 rgba(255, 125, 45, 0.65);
}

.forumbg ul.topiclist.topics dl.row-item {
	display: flex;
	align-items: stretch;
	position: relative;
	min-height: 68px;
	background-position: 12px 50%;
	background-repeat: no-repeat;
	background-size: 28px;
}

.forumbg ul.topiclist.topics dl.row-item dt {
	display: flex;
	align-items: center;
	float: none;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	min-height: 68px;
}

.forumbg ul.topiclist.topics dl.row-item dt .list-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 68px;
	padding-top: 0;
	padding-bottom: 0;
}

.forumbg ul.topiclist.topics .topic-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
}

.forumbg ul.topiclist.topics .topic-title-line {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	line-height: 1.18;
}

.forumbg ul.topiclist.topics .topic-title-line .topictitle {
	min-width: 0;
}

.forumbg ul.topiclist.topics .topic-poster {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
}

.forumbg ul.topiclist.topics .topic-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 20px;
	max-width: 100%;
	padding: 0 7px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(221, 227, 239, 0.78);
	white-space: nowrap;
}

.forumbg ul.topiclist.topics .topic-meta-chip .icon {
	margin: 0;
	color: rgba(255, 154, 54, 0.92);
	font-size: 11px;
}

.forumbg ul.topiclist.topics .topic-meta-author {
	border-color: rgba(255, 145, 60, 0.18);
	background: rgba(255, 120, 45, 0.08);
}

.forumbg ul.topiclist.topics .topic-meta-chip time,
.forumbg ul.topiclist.topics .topic-meta-chip a {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 800;
}

.forumbg ul.topiclist.topics .topic-meta-chip > span {
	color: rgba(221, 227, 239, 0.58);
}

.forumbg ul.topiclist.topics dl.topic_moved {
	background-image: url("./images/topic_moved.png");
}

.forumbg ul.topiclist.topics dl.topic_read,
.forumbg ul.topiclist.topics dl.pm_read {
	background-image: url("./images/topic_read.png");
}

.forumbg ul.topiclist.topics dl.topic_read_mine {
	background-image: url("./images/topic_read_mine.png");
}

.forumbg ul.topiclist.topics dl.topic_read_hot {
	background-image: url("./images/topic_read_hot.png");
}

.forumbg ul.topiclist.topics dl.topic_read_hot_mine {
	background-image: url("./images/topic_read_hot_mine.png");
}

.forumbg ul.topiclist.topics dl.topic_read_locked {
	background-image: url("./images/topic_read_locked.png");
}

.forumbg ul.topiclist.topics dl.topic_read_locked_mine {
	background-image: url("./images/topic_read_locked_mine.png");
}

.forumbg ul.topiclist.topics dl.topic_unread,
.forumbg ul.topiclist.topics dl.pm_unread {
	background-image: url("./images/topic_unread.png");
}

.forumbg ul.topiclist.topics dl.topic_unread_mine {
	background-image: url("./images/topic_unread_mine.png");
}

.forumbg ul.topiclist.topics dl.topic_unread_hot {
	background-image: url("./images/topic_unread_hot.png");
}

.forumbg ul.topiclist.topics dl.topic_unread_hot_mine {
	background-image: url("./images/topic_unread_hot_mine.png");
}

.forumbg ul.topiclist.topics dl.topic_unread_locked {
	background-image: url("./images/topic_unread_locked.png");
}

.forumbg ul.topiclist.topics dl.topic_unread_locked_mine {
	background-image: url("./images/topic_unread_locked_mine.png");
}

/* =========================================================================
   12. Page heading panel (viewforum)
   ========================================================================= */

.midnight-forum-heading {
	--class-rgb: 255, 88, 11;
	--spec-icon: url("./images/expansion-midnight-logo.png");
	--heading-icon-left: 0px;
	--heading-icon-width: 110px;
	--heading-icon-height: 110px;
	--heading-icon-fit: contain;
	--heading-icon-radius: 0;
	--heading-icon-shadow: none;
	--heading-icon-filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 14px rgba(255, 88, 11, 0.18));
	position: relative;
	display: grid;
	gap: 10px;
	margin: 0 0 12px;
	padding: 18px 20px 18px calc(var(--heading-icon-left) + var(--heading-icon-width) + 18px);
	overflow: hidden;
	border: 1px solid rgba(var(--class-rgb), 0.32);
	border-radius: 18px;
	background:
		radial-gradient(circle at 38px 50%, rgba(var(--class-rgb), 0.34), transparent 96px),
		linear-gradient(90deg, rgba(var(--class-rgb), 0.16), transparent 62%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
		var(--midnight-panel);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

/* Same class/expansion tint as the .forabg header bar below it (§13),
   keyed by the same data-forum-name attribute, so the two blocks read as
   one coherent color instead of a neutral heading over a tinted card. */
.midnight-forum-heading[data-forum-name="Death Knight"] { --class-rgb: 196, 30, 58; }
.midnight-forum-heading[data-forum-name="Demon Hunter"] { --class-rgb: 163, 48, 201; }
.midnight-forum-heading[data-forum-name="Druid"] { --class-rgb: 255, 124, 10; }
.midnight-forum-heading[data-forum-name="Evoker"] { --class-rgb: 51, 147, 127; }
.midnight-forum-heading[data-forum-name="Hunter"] { --class-rgb: 170, 211, 114; }
.midnight-forum-heading[data-forum-name="Mage"] { --class-rgb: 63, 199, 235; }
.midnight-forum-heading[data-forum-name="Monk"] { --class-rgb: 0, 255, 152; }
.midnight-forum-heading[data-forum-name="Paladin"] { --class-rgb: 244, 140, 186; }
.midnight-forum-heading[data-forum-name="Priest"] { --class-rgb: 255, 255, 255; }
.midnight-forum-heading[data-forum-name="Rogue"] { --class-rgb: 255, 244, 104; }
.midnight-forum-heading[data-forum-name="Shaman"] { --class-rgb: 0, 112, 221; }
.midnight-forum-heading[data-forum-name="Warlock"] { --class-rgb: 135, 136, 238; }
.midnight-forum-heading[data-forum-name="Warrior"] { --class-rgb: 198, 155, 109; }
.midnight-forum-heading[data-forum-name="Previous Expansions"],
.midnight-forum-heading[data-forum-name="Previous patches"] { --class-rgb: 90, 150, 255; }

.midnight-forum-heading:before {
	position: absolute;
	left: var(--heading-icon-left);
	top: 50%;
	width: var(--heading-icon-width);
	height: var(--heading-icon-height);
	content: "";
	transform: translateY(-50%);
	border-radius: var(--heading-icon-radius);
	background: var(--spec-icon) center / var(--heading-icon-fit) no-repeat;
	box-shadow: var(--heading-icon-shadow);
	filter: var(--heading-icon-filter);
	transition: filter 160ms ease, transform 160ms ease;
}

.forum-title {
	margin: 0;
}

.forum-title a {
	color: var(--midnight-text);
	font-size: 30px;
	line-height: 1.05;
	font-weight: 900;
}

.forum-title a:hover {
	color: var(--midnight-accent-2);
	text-shadow: none;
}

/* Topic pages reuse this heading card (.midnight-topic-heading): the card
   shows the parent forum's icon/tint + breadcrumb trail, and its title is the
   topic name instead of a forum name. Match the forum-title typography. */
.midnight-topic-heading .topic-title {
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 0;
}

/* Название — всегда одна строка, как и путь под ним. Длинный заголовок
   иначе разгонял блок на две-три строки, и высота шапки темы плавала от
   темы к теме. min-width: 0 на родителе обязателен: без него grid-элемент
   не сжимается ниже своего содержимого и обрезка не включается. */
.midnight-topic-heading .topic-title a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--midnight-text);
	font-size: 28px;
	line-height: 1.1;
	font-weight: 900;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.midnight-topic-heading .topic-title a:hover {
	color: var(--midnight-accent-2);
	text-shadow: none;
}

.midnight-forum-heading:has(.forum-title a:hover):before,
.midnight-forum-heading:has(.topic-title a:hover):before {
	transform: translateY(-50%) scale(1.03);
	filter:
		drop-shadow(0 14px 24px rgba(0, 0, 0, 0.46))
		drop-shadow(0 0 16px rgba(255, 122, 46, 0.38));
}

/* Путь всегда одной строкой. Перенос давал ступеньку из пилюль и рвал
   высоту заголовка на средних ширинах, а сжатие пилюль (flex-shrink по
   умолчанию) обрезало текст внутри рамки — «Previous Expansions» в 49px
   читается не лучше пустого места. Поэтому: не переносим, не сжимаем, а
   лишние звенья прячет topic-enhancements.js, ставя вместо них «…». */
.midnight-forum-trail {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	min-width: 0;
	min-height: 24px;
	overflow: hidden;
	color: var(--midnight-dim);
	font-size: 13px;
	font-weight: 800;
}

.midnight-forum-trail a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--midnight-soft);
	white-space: nowrap;
}

/* Заглушка вместо спрятанных промежуточных звеньев. Не ссылка: раскрывать
   по клику нечего — каждое звено и так доступно со страницы форума. */
.midnight-forum-trail .midnight-trail-gap {
	flex: 0 0 auto;
	color: var(--midnight-dim);
	letter-spacing: 1px;
}

/* Атрибут hidden сам по себе тут бессилен: UA-правило [hidden] весит
   (0,1,0) и проигрывает любому правилу, задающему звеньям display, —
   начиная с `.midnight-forum-trail a` (0,1,1) и заканчивая оформлением
   копии пути в липкой полосе (0,3,1). Гонку весов проще прекратить, чем
   выигрывать заново при каждом новом правиле: «спрятано» здесь означает
   спрятано. */
.midnight-forum-trail [hidden] {
	display: none !important;
}

.midnight-forum-trail .midnight-trail-home {
	width: 32px;
	padding: 0;
}

.midnight-forum-trail .icon {
	margin: 0;
}

.midnight-forum-trail a:hover {
	border-color: rgba(255, 88, 11, 0.45);
	background: rgba(255, 88, 11, 0.12);
	color: #ffffff;
}

.midnight-forum-trail span {
	color: rgba(255, 255, 255, 0.28);
}

/* =========================================================================
   13. Icon maps
   Forum ids come from tools/create_wow_forum_structure.php. Expansion rows
   are matched by forum name (see §8 kind D note about forum-266).
   ========================================================================= */

/* Category blocks: class tint + header icon. Matched by data-forum-name
   (added in forumlist_body.html) instead of forum id, so every class and
   every "current forum" card (an expansion, Previous Expansions/patches,
   etc.) resolves the right icon regardless of how many instances of that
   name exist across the tree — no per-id entry needed as history grows. */
.forabg { --class-rgb: 255, 88, 11; --class-icon: url("./images/expansion-midnight-logo.png"); }
.forumbg { --class-rgb: 255, 88, 11; }
.forabg[data-forum-name="Death Knight"] { --class-rgb: 196, 30, 58; --class-icon: url("./images/class-art-death-knight.png"); }
.forabg[data-forum-name="Demon Hunter"] { --class-rgb: 163, 48, 201; --class-icon: url("./images/class-art-demon-hunter.png"); }
.forabg[data-forum-name="Druid"] { --class-rgb: 255, 124, 10; --class-icon: url("./images/class-art-druid.png"); }
.forabg[data-forum-name="Evoker"] { --class-rgb: 51, 147, 127; --class-icon: url("./images/class-art-evoker.png"); }
.forabg[data-forum-name="Hunter"] { --class-rgb: 170, 211, 114; --class-icon: url("./images/class-art-hunter.png"); }
.forabg[data-forum-name="Mage"] { --class-rgb: 63, 199, 235; --class-icon: url("./images/class-art-mage.png"); }
.forabg[data-forum-name="Monk"] { --class-rgb: 0, 255, 152; --class-icon: url("./images/class-art-monk.png"); }
.forabg[data-forum-name="Paladin"] { --class-rgb: 244, 140, 186; --class-icon: url("./images/class-art-paladin.png"); }
.forabg[data-forum-name="Priest"] { --class-rgb: 255, 255, 255; --class-icon: url("./images/class-art-priest.png"); }
.forabg[data-forum-name="Rogue"] { --class-rgb: 255, 244, 104; --class-icon: url("./images/class-art-rogue.png"); }
.forabg[data-forum-name="Shaman"] { --class-rgb: 0, 112, 221; --class-icon: url("./images/class-art-shaman.png"); }
.forabg[data-forum-name="Warlock"] { --class-rgb: 135, 136, 238; --class-icon: url("./images/class-art-warlock.png"); }
.forabg[data-forum-name="Warrior"] { --class-rgb: 198, 155, 109; --class-icon: url("./images/class-art-warrior.png"); }

.forabg[data-forum-name="Previous Expansions"],
.forabg[data-forum-name="Previous patches"] {
	--class-rgb: 90, 150, 255;
	--class-icon: url("./images/previous-expansions-icon.png");
}

/* Expansion accent colors are curated to match each icon's theme (there is
   no automatic "dominant color of the image" in CSS) — tweak these hex-ish
   rgb triplets directly if one doesn't read well. */
.forabg[data-forum-name="Vanilla"] { --class-rgb: 201, 162, 57; --class-icon: url("./images/expansion-classic.png"); }
.forabg[data-forum-name="Season of Discovery"] { --class-rgb: 224, 178, 56; --class-icon: url("./images/expansion-season-discovery.png"); }
.forabg[data-forum-name="The Burning Crusade"] { --class-rgb: 106, 154, 63; --class-icon: url("./images/expansion-burning-crusade.png"); }
.forabg[data-forum-name="Wrath of the Lich King"] { --class-rgb: 93, 196, 224; --class-icon: url("./images/expansion-wrath-lich-king.png"); }
.forabg[data-forum-name="Cataclysm"] { --class-rgb: 224, 86, 45; --class-icon: url("./images/expansion-cataclysm.png"); }
.forabg[data-forum-name="Mists of Pandaria"] { --class-rgb: 76, 175, 125; --class-icon: url("./images/expansion-mists-pandaria.png"); }
.forabg[data-forum-name="Warlords of Draenor"] { --class-rgb: 201, 117, 47; --class-icon: url("./images/expansion-warlords-draenor.png"); }
.forabg[data-forum-name="Legion"] { --class-rgb: 124, 191, 63; --class-icon: url("./images/expansion-legion.png"); }
.forabg[data-forum-name="Battle for Azeroth"] { --class-rgb: 61, 158, 151; --class-icon: url("./images/expansion-battle-for-azeroth.png"); }
.forabg[data-forum-name="Shadowlands"] { --class-rgb: 139, 127, 209; --class-icon: url("./images/expansion-shadowlands.png"); }
.forabg[data-forum-name="Dragonflight"] { --class-rgb: 63, 174, 143; --class-icon: url("./images/expansion-dragonflight.png"); }
.forabg[data-forum-name="The War Within"] { --class-rgb: 201, 151, 63; --class-icon: url("./images/expansion-the-war-within.png"); }

/* Page heading icons by name — fallback for every class/expansion/wrapper
   page, so newly-created forum ids (patches, per-class expansion history,
   Previous patches) resolve the right icon without a per-id rule. The four
   spec names shared across two classes (Frost/Restoration/Protection/Holy)
   are excluded here and resolved via [data-forum-icon="..."] instead — that
   attribute is computed server-side by the maxdps/forummeta extension, so no
   forum-id lists need maintaining as the tree grows (see the collision note
   above §13 spec row icons). */
.midnight-forum-heading[data-forum-name="Death Knight"] { --spec-icon: url("./images/class-art-death-knight.png"); }
.midnight-forum-heading[data-forum-name="Demon Hunter"] { --spec-icon: url("./images/class-art-demon-hunter.png"); }
.midnight-forum-heading[data-forum-name="Druid"] { --spec-icon: url("./images/class-art-druid.png"); }
.midnight-forum-heading[data-forum-name="Evoker"] { --spec-icon: url("./images/class-art-evoker.png"); }
.midnight-forum-heading[data-forum-name="Hunter"] { --spec-icon: url("./images/class-art-hunter.png"); }
.midnight-forum-heading[data-forum-name="Mage"] { --spec-icon: url("./images/class-art-mage.png"); }
.midnight-forum-heading[data-forum-name="Monk"] { --spec-icon: url("./images/class-art-monk.png"); }
.midnight-forum-heading[data-forum-name="Paladin"] { --spec-icon: url("./images/class-art-paladin.png"); }
.midnight-forum-heading[data-forum-name="Priest"] { --spec-icon: url("./images/class-art-priest.png"); }
.midnight-forum-heading[data-forum-name="Rogue"] { --spec-icon: url("./images/class-art-rogue.png"); }
.midnight-forum-heading[data-forum-name="Shaman"] { --spec-icon: url("./images/class-art-shaman.png"); }
.midnight-forum-heading[data-forum-name="Warlock"] { --spec-icon: url("./images/class-art-warlock.png"); }
.midnight-forum-heading[data-forum-name="Warrior"] { --spec-icon: url("./images/class-art-warrior.png"); }
.midnight-forum-heading[data-forum-name="Previous Expansions"],
.midnight-forum-heading[data-forum-name="Previous patches"] { --spec-icon: url("./images/previous-expansions-icon.png"); }
.midnight-forum-heading[data-forum-name="Vanilla"] { --class-rgb: 201, 162, 57; --spec-icon: url("./images/expansion-classic.png"); }
.midnight-forum-heading[data-forum-name="Season of Discovery"] { --class-rgb: 224, 178, 56; --spec-icon: url("./images/expansion-season-discovery.png"); }
.midnight-forum-heading[data-forum-name="The Burning Crusade"] { --class-rgb: 106, 154, 63; --spec-icon: url("./images/expansion-burning-crusade.png"); }
.midnight-forum-heading[data-forum-name="Wrath of the Lich King"] { --class-rgb: 93, 196, 224; --spec-icon: url("./images/expansion-wrath-lich-king.png"); }
.midnight-forum-heading[data-forum-name="Cataclysm"] { --class-rgb: 224, 86, 45; --spec-icon: url("./images/expansion-cataclysm.png"); }
.midnight-forum-heading[data-forum-name="Mists of Pandaria"] { --class-rgb: 76, 175, 125; --spec-icon: url("./images/expansion-mists-pandaria.png"); }
.midnight-forum-heading[data-forum-name="Warlords of Draenor"] { --class-rgb: 201, 117, 47; --spec-icon: url("./images/expansion-warlords-draenor.png"); }
.midnight-forum-heading[data-forum-name="Legion"] { --class-rgb: 124, 191, 63; --spec-icon: url("./images/expansion-legion.png"); }
.midnight-forum-heading[data-forum-name="Battle for Azeroth"] { --class-rgb: 61, 158, 151; --spec-icon: url("./images/expansion-battle-for-azeroth.png"); }
.midnight-forum-heading[data-forum-name="Shadowlands"] { --class-rgb: 139, 127, 209; --spec-icon: url("./images/expansion-shadowlands.png"); }
.midnight-forum-heading[data-forum-name="Dragonflight"] { --class-rgb: 63, 174, 143; --spec-icon: url("./images/expansion-dragonflight.png"); }
.midnight-forum-heading[data-forum-name="The War Within"] { --class-rgb: 201, 151, 63; --spec-icon: url("./images/expansion-the-war-within.png"); }

/* Spec accent colors are lifted straight from each spec's own --subforum-color
   chip (§13 subforum chips) so the palette stays one source of truth — no
   separate curation needed here. */
.midnight-forum-heading[data-forum-name="Blood"] { --class-rgb: 196, 30, 58; --spec-icon: url("./images/spec-blood.png"); }
.midnight-forum-heading[data-forum-name="Unholy"] { --class-rgb: 53, 198, 90; --spec-icon: url("./images/spec-unholy.png"); }
.midnight-forum-heading[data-forum-name="Devourer"] { --class-rgb: 163, 48, 201; --spec-icon: url("./images/spec-devourer.png"); }
.midnight-forum-heading[data-forum-name="Havoc"] { --class-rgb: 163, 48, 201; --spec-icon: url("./images/spec-havoc.png"); }
.midnight-forum-heading[data-forum-name="Vengeance"] { --class-rgb: 141, 82, 217; --spec-icon: url("./images/spec-vengeance.png"); }
.midnight-forum-heading[data-forum-name="Balance"] { --class-rgb: 255, 124, 10; --spec-icon: url("./images/spec-balance.png"); }
.midnight-forum-heading[data-forum-name="Feral"] { --class-rgb: 255, 124, 10; --spec-icon: url("./images/spec-feral.png"); }
.midnight-forum-heading[data-forum-name="Guardian"] { --class-rgb: 200, 117, 51; --spec-icon: url("./images/spec-guardian.png"); }
.midnight-forum-heading[data-forum-name="Augmentation"] { --class-rgb: 51, 147, 127; --spec-icon: url("./images/spec-augmentation.png"); }
.midnight-forum-heading[data-forum-name="Devastation"] { --class-rgb: 217, 74, 66; --spec-icon: url("./images/spec-devastation.png"); }
.midnight-forum-heading[data-forum-name="Preservation"] { --class-rgb: 100, 199, 166; --spec-icon: url("./images/spec-preservation.png"); }
.midnight-forum-heading[data-forum-name="Beast Mastery"] { --class-rgb: 170, 211, 114; --spec-icon: url("./images/spec-beast-mastery.png"); }
.midnight-forum-heading[data-forum-name="Marksmanship"] { --class-rgb: 170, 211, 114; --spec-icon: url("./images/spec-marksmanship.png"); }
.midnight-forum-heading[data-forum-name="Survival"] { --class-rgb: 170, 211, 114; --spec-icon: url("./images/spec-survival.png"); }
.midnight-forum-heading[data-forum-name="Arcane"] { --class-rgb: 63, 199, 235; --spec-icon: url("./images/spec-arcane.png"); }
.midnight-forum-heading[data-forum-name="Fire"] { --class-rgb: 255, 107, 53; --spec-icon: url("./images/spec-fire.png"); }
.midnight-forum-heading[data-forum-name="Brewmaster"] { --class-rgb: 0, 255, 152; --spec-icon: url("./images/spec-brewmaster.png"); }
.midnight-forum-heading[data-forum-name="Mistweaver"] { --class-rgb: 110, 231, 183; --spec-icon: url("./images/spec-mistweaver.png"); }
.midnight-forum-heading[data-forum-name="Windwalker"] { --class-rgb: 0, 255, 152; --spec-icon: url("./images/spec-windwalker.png"); }
.midnight-forum-heading[data-forum-name="Retribution"] { --class-rgb: 244, 140, 186; --spec-icon: url("./images/spec-retribution.png"); }
.midnight-forum-heading[data-forum-name="Discipline"] { --class-rgb: 255, 255, 255; --spec-icon: url("./images/spec-discipline.png"); }
.midnight-forum-heading[data-forum-name="Shadow"] { --class-rgb: 140, 108, 255; --spec-icon: url("./images/spec-shadow.png"); }
.midnight-forum-heading[data-forum-name="Assassination"] { --class-rgb: 255, 244, 104; --spec-icon: url("./images/spec-assassination.png"); }
.midnight-forum-heading[data-forum-name="Outlaw"] { --class-rgb: 255, 244, 104; --spec-icon: url("./images/spec-outlaw.png"); }
.midnight-forum-heading[data-forum-name="Subtlety"] { --class-rgb: 255, 244, 104; --spec-icon: url("./images/spec-subtlety.png"); }
.midnight-forum-heading[data-forum-name="Elemental"] { --class-rgb: 59, 130, 246; --spec-icon: url("./images/spec-elemental.png"); }
.midnight-forum-heading[data-forum-name="Enhancement"] { --class-rgb: 0, 112, 221; --spec-icon: url("./images/spec-enhancement.png"); }
.midnight-forum-heading[data-forum-name="Affliction"] { --class-rgb: 135, 136, 238; --spec-icon: url("./images/spec-affliction.png"); }
.midnight-forum-heading[data-forum-name="Demonology"] { --class-rgb: 135, 136, 238; --spec-icon: url("./images/spec-demonology.png"); }
.midnight-forum-heading[data-forum-name="Destruction"] { --class-rgb: 135, 136, 238; --spec-icon: url("./images/spec-destruction.png"); }
.midnight-forum-heading[data-forum-name="Arms"] { --class-rgb: 198, 155, 109; --spec-icon: url("./images/spec-arms.png"); }
.midnight-forum-heading[data-forum-name="Fury"] { --class-rgb: 198, 155, 109; --spec-icon: url("./images/spec-fury.png"); }
.midnight-forum-heading[data-forum-name^="Patch "] { --class-rgb: 90, 150, 255; --spec-icon: url("./images/previous-expansions-icon.png"); }

/* Page heading icons: class pages */
.midnight-forum-heading.forum-id-3 { --spec-icon: url("./images/class-art-death-knight.png"); }
.midnight-forum-heading.forum-id-22 { --spec-icon: url("./images/class-art-demon-hunter.png"); }
.midnight-forum-heading.forum-id-41 { --spec-icon: url("./images/class-art-druid.png"); }
.midnight-forum-heading.forum-id-64 { --spec-icon: url("./images/class-art-evoker.png"); }
.midnight-forum-heading.forum-id-83 { --spec-icon: url("./images/class-art-hunter.png"); }
.midnight-forum-heading.forum-id-102 { --spec-icon: url("./images/class-art-mage.png"); }
.midnight-forum-heading.forum-id-121 { --spec-icon: url("./images/class-art-monk.png"); }
.midnight-forum-heading.forum-id-140 { --spec-icon: url("./images/class-art-paladin.png"); }
.midnight-forum-heading.forum-id-159 { --spec-icon: url("./images/class-art-priest.png"); }
.midnight-forum-heading.forum-id-178 { --spec-icon: url("./images/class-art-rogue.png"); }
.midnight-forum-heading.forum-id-197 { --spec-icon: url("./images/class-art-shaman.png"); }
.midnight-forum-heading.forum-id-216 { --spec-icon: url("./images/class-art-warlock.png"); }
.midnight-forum-heading.forum-id-235 { --spec-icon: url("./images/class-art-warrior.png"); }

/* Page heading icons: per-class "Previous Expansions" pages */
.midnight-forum-heading:is(
	.forum-id-8, .forum-id-27, .forum-id-47, .forum-id-69, .forum-id-88, .forum-id-107, .forum-id-126,
	.forum-id-145, .forum-id-164, .forum-id-183, .forum-id-202, .forum-id-221, .forum-id-240
) {
	--spec-icon: url("./images/previous-expansions-icon.png");
}

/* Page heading icons: expansion pages */
.midnight-forum-heading.forum-id-254 { --spec-icon: url("./images/expansion-burning-crusade.png"); }
.midnight-forum-heading.forum-id-255 { --spec-icon: url("./images/expansion-classic.png"); }
.midnight-forum-heading.forum-id-256 { --spec-icon: url("./images/expansion-season-discovery.png"); }
.midnight-forum-heading.forum-id-257 { --spec-icon: url("./images/expansion-mists-pandaria.png"); }
.midnight-forum-heading.forum-id-258 { --spec-icon: url("./images/expansion-wrath-lich-king.png"); }
.midnight-forum-heading.forum-id-259 { --spec-icon: url("./images/expansion-cataclysm.png"); }
.midnight-forum-heading.forum-id-260 { --spec-icon: url("./images/expansion-warlords-draenor.png"); }
.midnight-forum-heading.forum-id-261 { --spec-icon: url("./images/expansion-legion.png"); }
.midnight-forum-heading.forum-id-262 { --spec-icon: url("./images/expansion-battle-for-azeroth.png"); }
.midnight-forum-heading.forum-id-263 { --spec-icon: url("./images/expansion-shadowlands.png"); }
.midnight-forum-heading.forum-id-264 { --spec-icon: url("./images/expansion-dragonflight.png"); }
.midnight-forum-heading.forum-id-265 { --spec-icon: url("./images/expansion-the-war-within.png"); }
.midnight-forum-heading.forum-id-266 { --spec-icon: url("./images/expansion-midnight-forum.png"); }

/* Page heading icons: spec pages */
.midnight-forum-heading.forum-id-5 { --spec-icon: url("./images/spec-blood.png"); }
.midnight-forum-heading[data-forum-icon="frost-dk"] { --class-rgb: 63, 199, 235; --spec-icon: url("./images/spec-frost-dk.png"); }
.midnight-forum-heading.forum-id-7 { --spec-icon: url("./images/spec-unholy.png"); }
.midnight-forum-heading.forum-id-24 { --spec-icon: url("./images/spec-devourer.png"); }
.midnight-forum-heading.forum-id-25 { --spec-icon: url("./images/spec-havoc.png"); }
.midnight-forum-heading.forum-id-26 { --spec-icon: url("./images/spec-vengeance.png"); }
.midnight-forum-heading.forum-id-43 { --spec-icon: url("./images/spec-balance.png"); }
.midnight-forum-heading.forum-id-44 { --spec-icon: url("./images/spec-feral.png"); }
.midnight-forum-heading.forum-id-45 { --spec-icon: url("./images/spec-guardian.png"); }
.midnight-forum-heading[data-forum-icon="restoration-druid"] { --class-rgb: 78, 226, 125; --spec-icon: url("./images/spec-restoration-druid.png"); }
.midnight-forum-heading.forum-id-66 { --spec-icon: url("./images/spec-augmentation.png"); }
.midnight-forum-heading.forum-id-67 { --spec-icon: url("./images/spec-devastation.png"); }
.midnight-forum-heading.forum-id-68 { --spec-icon: url("./images/spec-preservation.png"); }
.midnight-forum-heading.forum-id-85 { --spec-icon: url("./images/spec-beast-mastery.png"); }
.midnight-forum-heading.forum-id-86 { --spec-icon: url("./images/spec-marksmanship.png"); }
.midnight-forum-heading.forum-id-87 { --spec-icon: url("./images/spec-survival.png"); }
.midnight-forum-heading.forum-id-104 { --spec-icon: url("./images/spec-arcane.png"); }
.midnight-forum-heading.forum-id-105 { --spec-icon: url("./images/spec-fire.png"); }
.midnight-forum-heading[data-forum-icon="frost-mage"] { --class-rgb: 143, 215, 255; --spec-icon: url("./images/spec-frost-mage.png"); }
.midnight-forum-heading.forum-id-123 { --spec-icon: url("./images/spec-brewmaster.png"); }
.midnight-forum-heading.forum-id-124 { --spec-icon: url("./images/spec-mistweaver.png"); }
.midnight-forum-heading.forum-id-125 { --spec-icon: url("./images/spec-windwalker.png"); }
.midnight-forum-heading[data-forum-icon="holy"] { --class-rgb: 244, 140, 186; --spec-icon: url("./images/spec-holy.png"); }
.midnight-forum-heading[data-forum-icon="protection-paladin"] { --class-rgb: 244, 140, 186; --spec-icon: url("./images/spec-protection-paladin.png"); }
.midnight-forum-heading.forum-id-144 { --spec-icon: url("./images/spec-retribution.png"); }
.midnight-forum-heading.forum-id-161 { --spec-icon: url("./images/spec-discipline.png"); }
.midnight-forum-heading[data-forum-icon="holy-priest"] { --class-rgb: 255, 240, 200; --spec-icon: url("./images/spec-holy-priest.png"); }
.midnight-forum-heading.forum-id-163 { --spec-icon: url("./images/spec-shadow.png"); }
.midnight-forum-heading.forum-id-180 { --spec-icon: url("./images/spec-assassination.png"); }
.midnight-forum-heading.forum-id-181 { --spec-icon: url("./images/spec-outlaw.png"); }
.midnight-forum-heading.forum-id-182 { --spec-icon: url("./images/spec-subtlety.png"); }
.midnight-forum-heading.forum-id-199 { --spec-icon: url("./images/spec-elemental.png"); }
.midnight-forum-heading.forum-id-200 { --spec-icon: url("./images/spec-enhancement.png"); }
.midnight-forum-heading[data-forum-icon="restoration-shaman"] { --class-rgb: 74, 163, 255; --spec-icon: url("./images/spec-restoration-shaman.png"); }
.midnight-forum-heading.forum-id-218 { --spec-icon: url("./images/spec-affliction.png"); }
.midnight-forum-heading.forum-id-219 { --spec-icon: url("./images/spec-demonology.png"); }
.midnight-forum-heading.forum-id-220 { --spec-icon: url("./images/spec-destruction.png"); }
.midnight-forum-heading.forum-id-237 { --spec-icon: url("./images/spec-arms.png"); }
.midnight-forum-heading.forum-id-238 { --spec-icon: url("./images/spec-fury.png"); }
.midnight-forum-heading[data-forum-icon="protection-warrior"] { --class-rgb: 198, 155, 109; --spec-icon: url("./images/spec-protection-warrior.png"); }

/* Spec row icons by name — covers every historical instance of a spec
   forum (one per expansion/patch, each with its own forum id) without a
   per-id rule. Left out on purpose: Frost, Restoration, Protection, Holy —
   these names are shared by two classes with different icons each, and a
   bare name selector can't tell the classes apart. Those are keyed off
   [data-forum-icon="..."] instead (see the disambiguated slug rules below);
   the slug is computed server-side by the maxdps/forummeta extension. */
.forabg ul.topiclist.forums li[data-forum-name="Blood"] { --row-icon: url("./images/spec-blood.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Unholy"] { --row-icon: url("./images/spec-unholy.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Devourer"] { --row-icon: url("./images/spec-devourer.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Havoc"] { --row-icon: url("./images/spec-havoc.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Vengeance"] { --row-icon: url("./images/spec-vengeance.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Balance"] { --row-icon: url("./images/spec-balance.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Feral"] { --row-icon: url("./images/spec-feral.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Guardian"] { --row-icon: url("./images/spec-guardian.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Augmentation"] { --row-icon: url("./images/spec-augmentation.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Devastation"] { --row-icon: url("./images/spec-devastation.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Preservation"] { --row-icon: url("./images/spec-preservation.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Beast Mastery"] { --row-icon: url("./images/spec-beast-mastery.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Marksmanship"] { --row-icon: url("./images/spec-marksmanship.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Survival"] { --row-icon: url("./images/spec-survival.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Arcane"] { --row-icon: url("./images/spec-arcane.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Fire"] { --row-icon: url("./images/spec-fire.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Brewmaster"] { --row-icon: url("./images/spec-brewmaster.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Mistweaver"] { --row-icon: url("./images/spec-mistweaver.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Windwalker"] { --row-icon: url("./images/spec-windwalker.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Retribution"] { --row-icon: url("./images/spec-retribution.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Discipline"] { --row-icon: url("./images/spec-discipline.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Shadow"] { --row-icon: url("./images/spec-shadow.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Assassination"] { --row-icon: url("./images/spec-assassination.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Outlaw"] { --row-icon: url("./images/spec-outlaw.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Subtlety"] { --row-icon: url("./images/spec-subtlety.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Elemental"] { --row-icon: url("./images/spec-elemental.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Enhancement"] { --row-icon: url("./images/spec-enhancement.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Affliction"] { --row-icon: url("./images/spec-affliction.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Demonology"] { --row-icon: url("./images/spec-demonology.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Destruction"] { --row-icon: url("./images/spec-destruction.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Arms"] { --row-icon: url("./images/spec-arms.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Fury"] { --row-icon: url("./images/spec-fury.png"); }

/* Individual patch forums ("Patch 4.3.4", "Patch 12.1.0", ...) reuse the
   Previous Expansions/patches clock icon — no dedicated patch icon asset
   exists yet. */
.forabg ul.topiclist.forums li[data-forum-name^="Patch "] { --row-icon: url("./images/previous-expansions-icon.png"); }

/* Spec row icons (kind C rows on class pages) */
.forabg ul.topiclist.forums li.forum-5 { --row-icon: url("./images/spec-blood.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="frost-dk"] { --row-icon: url("./images/spec-frost-dk.png"); }
.forabg ul.topiclist.forums li.forum-7 { --row-icon: url("./images/spec-unholy.png"); }
.forabg ul.topiclist.forums li.forum-24 { --row-icon: url("./images/spec-devourer.png"); }
.forabg ul.topiclist.forums li.forum-25 { --row-icon: url("./images/spec-havoc.png"); }
.forabg ul.topiclist.forums li.forum-26 { --row-icon: url("./images/spec-vengeance.png"); }
.forabg ul.topiclist.forums li.forum-43 { --row-icon: url("./images/spec-balance.png"); }
.forabg ul.topiclist.forums li.forum-44 { --row-icon: url("./images/spec-feral.png"); }
.forabg ul.topiclist.forums li.forum-45 { --row-icon: url("./images/spec-guardian.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="restoration-druid"] { --row-icon: url("./images/spec-restoration-druid.png"); }
.forabg ul.topiclist.forums li.forum-66 { --row-icon: url("./images/spec-augmentation.png"); }
.forabg ul.topiclist.forums li.forum-67 { --row-icon: url("./images/spec-devastation.png"); }
.forabg ul.topiclist.forums li.forum-68 { --row-icon: url("./images/spec-preservation.png"); }
.forabg ul.topiclist.forums li.forum-85 { --row-icon: url("./images/spec-beast-mastery.png"); }
.forabg ul.topiclist.forums li.forum-86 { --row-icon: url("./images/spec-marksmanship.png"); }
.forabg ul.topiclist.forums li.forum-87 { --row-icon: url("./images/spec-survival.png"); }
.forabg ul.topiclist.forums li.forum-104 { --row-icon: url("./images/spec-arcane.png"); }
.forabg ul.topiclist.forums li.forum-105 { --row-icon: url("./images/spec-fire.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="frost-mage"] { --row-icon: url("./images/spec-frost-mage.png"); }
.forabg ul.topiclist.forums li.forum-123 { --row-icon: url("./images/spec-brewmaster.png"); }
.forabg ul.topiclist.forums li.forum-124 { --row-icon: url("./images/spec-mistweaver.png"); }
.forabg ul.topiclist.forums li.forum-125 { --row-icon: url("./images/spec-windwalker.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="holy"] { --row-icon: url("./images/spec-holy.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="protection-paladin"] { --row-icon: url("./images/spec-protection-paladin.png"); }
.forabg ul.topiclist.forums li.forum-144 { --row-icon: url("./images/spec-retribution.png"); }
.forabg ul.topiclist.forums li.forum-161 { --row-icon: url("./images/spec-discipline.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="holy-priest"] { --row-icon: url("./images/spec-holy-priest.png"); }
.forabg ul.topiclist.forums li.forum-163 { --row-icon: url("./images/spec-shadow.png"); }
.forabg ul.topiclist.forums li.forum-180 { --row-icon: url("./images/spec-assassination.png"); }
.forabg ul.topiclist.forums li.forum-181 { --row-icon: url("./images/spec-outlaw.png"); }
.forabg ul.topiclist.forums li.forum-182 { --row-icon: url("./images/spec-subtlety.png"); }
.forabg ul.topiclist.forums li.forum-199 { --row-icon: url("./images/spec-elemental.png"); }
.forabg ul.topiclist.forums li.forum-200 { --row-icon: url("./images/spec-enhancement.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="restoration-shaman"] { --row-icon: url("./images/spec-restoration-shaman.png"); }
.forabg ul.topiclist.forums li.forum-218 { --row-icon: url("./images/spec-affliction.png"); }
.forabg ul.topiclist.forums li.forum-219 { --row-icon: url("./images/spec-demonology.png"); }
.forabg ul.topiclist.forums li.forum-220 { --row-icon: url("./images/spec-destruction.png"); }
.forabg ul.topiclist.forums li.forum-237 { --row-icon: url("./images/spec-arms.png"); }
.forabg ul.topiclist.forums li.forum-238 { --row-icon: url("./images/spec-fury.png"); }
.forabg ul.topiclist.forums li[data-forum-icon="protection-warrior"] { --row-icon: url("./images/spec-protection-warrior.png"); }

/* Expansion row icons (kind D rows, matched by name) */
.forabg ul.topiclist.forums li[data-forum-name="Vanilla"] { --row-icon: url("./images/expansion-classic.png"); }
.forabg ul.topiclist.forums li[data-forum-name="The Burning Crusade"] { --row-icon: url("./images/expansion-burning-crusade.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Wrath of the Lich King"] { --row-icon: url("./images/expansion-wrath-lich-king.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Cataclysm"] { --row-icon: url("./images/expansion-cataclysm.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Mists of Pandaria"] { --row-icon: url("./images/expansion-mists-pandaria.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Warlords of Draenor"] { --row-icon: url("./images/expansion-warlords-draenor.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Legion"] { --row-icon: url("./images/expansion-legion.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Battle for Azeroth"] { --row-icon: url("./images/expansion-battle-for-azeroth.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Shadowlands"] { --row-icon: url("./images/expansion-shadowlands.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Dragonflight"] { --row-icon: url("./images/expansion-dragonflight.png"); }
.forabg ul.topiclist.forums li[data-forum-name="The War Within"] { --row-icon: url("./images/expansion-the-war-within.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Season of Discovery"] { --row-icon: url("./images/expansion-season-discovery.png"); }
.forabg ul.topiclist.forums li.forum-266 { --row-icon: url("./images/expansion-midnight-forum.png"); }

/* Community section: собственная графика вместо общей заглушки
   expansion-midnight-logo.png, на которую эти разделы попадали за
   неимением своего правила.

   По имени, а не по id: «General» существует ~90 раз (по одному на каждое
   дополнение внутри классовых веток), и все они до сих пор показывали ту же
   заглушку — им этот значок подходит ровно так же, как разделу Community.
   Остальные четыре имени уникальны. */
.forabg[data-forum-name="Community"] { --class-icon: url("./images/forum-art-community.png"); }
.midnight-forum-heading[data-forum-name="Community"] { --spec-icon: url("./images/forum-art-community.png"); }

.forabg ul.topiclist.forums li[data-forum-name="General"] { --row-icon: url("./images/forum-art-general.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Announcements"] { --row-icon: url("./images/forum-art-announcements.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Bug Reports"] { --row-icon: url("./images/forum-art-bug-reports.png"); }
.forabg ul.topiclist.forums li[data-forum-name="Off-Topic"] { --row-icon: url("./images/forum-art-off-topic.png"); }

.midnight-forum-heading[data-forum-name="General"] { --spec-icon: url("./images/forum-art-general.png"); }
.midnight-forum-heading[data-forum-name="Announcements"] { --spec-icon: url("./images/forum-art-announcements.png"); }
.midnight-forum-heading[data-forum-name="Bug Reports"] { --spec-icon: url("./images/forum-art-bug-reports.png"); }
.midnight-forum-heading[data-forum-name="Off-Topic"] { --spec-icon: url("./images/forum-art-off-topic.png"); }

/* Subforum spec chips: colour + icon, keyed by parent class row id + name */
.forum-4 .subforum[data-subforum-name="Blood"] { --subforum-color: #c41e3a; --subforum-icon: url("./images/spec-blood.png"); }
.forum-4 .subforum[data-subforum-name="Frost"] { --subforum-color: #3fc7eb; --subforum-icon: url("./images/spec-frost-dk.png"); }
.forum-4 .subforum[data-subforum-name="Unholy"] { --subforum-color: #35c65a; --subforum-icon: url("./images/spec-unholy.png"); }
.forum-23 .subforum[data-subforum-name="Devourer"] { --subforum-color: #a330c9; --subforum-icon: url("./images/spec-devourer.png"); }
.forum-23 .subforum[data-subforum-name="Havoc"] { --subforum-color: #a330c9; --subforum-icon: url("./images/spec-havoc.png"); }
.forum-23 .subforum[data-subforum-name="Vengeance"] { --subforum-color: #8d52d9; --subforum-icon: url("./images/spec-vengeance.png"); }
.forum-42 .subforum[data-subforum-name="Balance"] { --subforum-color: #ff7c0a; --subforum-icon: url("./images/spec-balance.png"); }
.forum-42 .subforum[data-subforum-name="Feral"] { --subforum-color: #ff7c0a; --subforum-icon: url("./images/spec-feral.png"); }
.forum-42 .subforum[data-subforum-name="Guardian"] { --subforum-color: #c87533; --subforum-icon: url("./images/spec-guardian.png"); }
.forum-42 .subforum[data-subforum-name="Restoration"] { --subforum-color: #4ee27d; --subforum-icon: url("./images/spec-restoration-druid.png"); }
.forum-65 .subforum[data-subforum-name="Augmentation"] { --subforum-color: #33937f; --subforum-icon: url("./images/spec-augmentation.png"); }
.forum-65 .subforum[data-subforum-name="Devastation"] { --subforum-color: #d94a42; --subforum-icon: url("./images/spec-devastation.png"); }
.forum-65 .subforum[data-subforum-name="Preservation"] { --subforum-color: #64c7a6; --subforum-icon: url("./images/spec-preservation.png"); }
.forum-84 .subforum[data-subforum-name="Beast Mastery"] { --subforum-color: #aad372; --subforum-icon: url("./images/spec-beast-mastery.png"); }
.forum-84 .subforum[data-subforum-name="Marksmanship"] { --subforum-color: #aad372; --subforum-icon: url("./images/spec-marksmanship.png"); }
.forum-84 .subforum[data-subforum-name="Survival"] { --subforum-color: #aad372; --subforum-icon: url("./images/spec-survival.png"); }
.forum-103 .subforum[data-subforum-name="Arcane"] { --subforum-color: #3fc7eb; --subforum-icon: url("./images/spec-arcane.png"); }
.forum-103 .subforum[data-subforum-name="Fire"] { --subforum-color: #ff6b35; --subforum-icon: url("./images/spec-fire.png"); }
.forum-103 .subforum[data-subforum-name="Frost"] { --subforum-color: #8fd7ff; --subforum-icon: url("./images/spec-frost-mage.png"); }
.forum-122 .subforum[data-subforum-name="Brewmaster"] { --subforum-color: #00ff98; --subforum-icon: url("./images/spec-brewmaster.png"); }
.forum-122 .subforum[data-subforum-name="Mistweaver"] { --subforum-color: #6ee7b7; --subforum-icon: url("./images/spec-mistweaver.png"); }
.forum-122 .subforum[data-subforum-name="Windwalker"] { --subforum-color: #00ff98; --subforum-icon: url("./images/spec-windwalker.png"); }
.forum-141 .subforum[data-subforum-name="Holy"] { --subforum-color: #f48cba; --subforum-icon: url("./images/spec-holy.png"); }
.forum-141 .subforum[data-subforum-name="Protection"] { --subforum-color: #f48cba; --subforum-icon: url("./images/spec-protection-paladin.png"); }
.forum-141 .subforum[data-subforum-name="Retribution"] { --subforum-color: #f48cba; --subforum-icon: url("./images/spec-retribution.png"); }
.forum-160 .subforum[data-subforum-name="Discipline"] { --subforum-color: #ffffff; --subforum-icon: url("./images/spec-discipline.png"); }
.forum-160 .subforum[data-subforum-name="Holy"] { --subforum-color: #fff0c8; --subforum-icon: url("./images/spec-holy-priest.png"); }
.forum-160 .subforum[data-subforum-name="Shadow"] { --subforum-color: #8c6cff; --subforum-icon: url("./images/spec-shadow.png"); }
.forum-179 .subforum[data-subforum-name="Assassination"] { --subforum-color: #fff468; --subforum-icon: url("./images/spec-assassination.png"); }
.forum-179 .subforum[data-subforum-name="Outlaw"] { --subforum-color: #fff468; --subforum-icon: url("./images/spec-outlaw.png"); }
.forum-179 .subforum[data-subforum-name="Subtlety"] { --subforum-color: #fff468; --subforum-icon: url("./images/spec-subtlety.png"); }
.forum-198 .subforum[data-subforum-name="Elemental"] { --subforum-color: #3b82f6; --subforum-icon: url("./images/spec-elemental.png"); }
.forum-198 .subforum[data-subforum-name="Enhancement"] { --subforum-color: #0070dd; --subforum-icon: url("./images/spec-enhancement.png"); }
.forum-198 .subforum[data-subforum-name="Restoration"] { --subforum-color: #4aa3ff; --subforum-icon: url("./images/spec-restoration-shaman.png"); }
.forum-217 .subforum[data-subforum-name="Affliction"] { --subforum-color: #8788ee; --subforum-icon: url("./images/spec-affliction.png"); }
.forum-217 .subforum[data-subforum-name="Demonology"] { --subforum-color: #8788ee; --subforum-icon: url("./images/spec-demonology.png"); }
.forum-217 .subforum[data-subforum-name="Destruction"] { --subforum-color: #8788ee; --subforum-icon: url("./images/spec-destruction.png"); }
.forum-236 .subforum[data-subforum-name="Arms"] { --subforum-color: #c69b6d; --subforum-icon: url("./images/spec-arms.png"); }
.forum-236 .subforum[data-subforum-name="Fury"] { --subforum-color: #c69b6d; --subforum-icon: url("./images/spec-fury.png"); }
.forum-236 .subforum[data-subforum-name="Protection"] { --subforum-color: #c69b6d; --subforum-icon: url("./images/spec-protection-warrior.png"); }

/* =========================================================================
   14. Posts, panels, forms, misc UI
   ========================================================================= */

.forum-description.toggle {
	color: #ffffff;
	border-radius: 12px;
	background: rgba(255, 88, 11, 0.18);
}

.post {
	margin: 0 0 16px;
	padding: 0;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
		var(--midnight-card);
}

.post > .inner {
	padding: 18px;
}

.post h3 {
	color: var(--midnight-text);
	font-size: 17px;
}

.postprofile {
	color: var(--midnight-muted);
	border-color: rgba(255, 255, 255, 0.08);
}

.postprofile strong,
.postprofile a,
.postprofile dt.author a {
	color: var(--midnight-text);
}

.postprofile a:hover,
.postprofile dt.author a:hover {
	color: var(--midnight-accent-2);
}

/* Centered author column: avatar, nick, role and stats all centered. */
.postprofile {
	text-align: center;
}

.postprofile dt,
.postprofile dd {
	margin-right: 0;
}

.postprofile .avatar-container {
	margin: 0 auto 8px;
	float: none;
	overflow: visible;
}

.postprofile .avatar {
	display: inline-block;
	float: none;
}

.postprofile .avatar img {
	margin: 0 auto;
}

.postbody {
	color: var(--midnight-soft);
}

.postbody .content {
	color: var(--midnight-soft);
	font-size: 13px;
	line-height: 1.72;
}

.postbody .content::-webkit-scrollbar,
#topicreview::-webkit-scrollbar,
#post_details::-webkit-scrollbar,
.codebox code::-webkit-scrollbar,
.attachbox dd::-webkit-scrollbar,
.attach-image::-webkit-scrollbar,
.dropdown-extended ul::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 0.035);
}

.postbody .content::-webkit-scrollbar-thumb,
#topicreview::-webkit-scrollbar-thumb,
#post_details::-webkit-scrollbar-thumb,
.codebox code::-webkit-scrollbar-thumb,
.attachbox dd::-webkit-scrollbar-thumb,
.attach-image::-webkit-scrollbar-thumb,
.dropdown-extended ul::-webkit-scrollbar-thumb {
	border: 2px solid rgba(8, 10, 15, 0.9);
	border-radius: 999px;
	background: rgba(255, 88, 11, 0.55);
}

.panel,
.stat-block {
	padding: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
		var(--midnight-card);
}

.inline-image-attachment {
	clear: both;
	margin: 8px 0;
	padding: 0;
	font: inherit;
}

.inline-image-attachment dt {
	margin: 0;
	padding: 0;
	font: inherit;
}

.inline-image-attachment .attach-image {
	margin: 0;
	overflow: visible;
}

.inline-image-attachment .postimage {
	display: block;
	max-width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
}

.sceditor-message-box {
	float: none !important;
	clear: both;
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
}

.sceditor-container {
	box-sizing: border-box !important;
	width: 100% !important;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.11) !important;
	border-radius: 7px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
		var(--midnight-panel) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.055),
		0 12px 28px rgba(0, 0, 0, 0.28);
	color: var(--midnight-soft);
	font-family: inherit;
}

div.sceditor-grip {
	right: 0 !important;
	bottom: 0 !important;
	width: 20px !important;
	height: 20px !important;
	border: 0;
	border-radius: 0 0 6px 0;
	background:
		linear-gradient(135deg, transparent 0 52%, rgba(255, 190, 130, 0.76) 52% 58%, transparent 58%),
		linear-gradient(135deg, transparent 0 66%, rgba(255, 190, 130, 0.56) 66% 72%, transparent 72%),
		linear-gradient(135deg, transparent 0 80%, rgba(255, 190, 130, 0.38) 80% 86%, transparent 86%) !important;
	opacity: 0.72;
	transition: opacity 160ms ease, filter 160ms ease;
}

div.sceditor-grip:hover,
div.sceditor-grip:focus {
	opacity: 1;
	filter: brightness(1.15);
}

.sceditor-container *,
.sceditor-container *:before,
.sceditor-container *:after {
	box-sizing: border-box !important;
}

.sceditor-container iframe,
.sceditor-container textarea {
	width: 100% !important;
	margin: 0 !important;
	background: #10141f !important;
	color: var(--midnight-soft) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
}

.sceditor-container textarea {
	padding: 12px !important;
	border: 0 !important;
}

.sceditor-toolbar {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 3px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
		#171b26 !important;
	line-height: 1 !important;
}

div.sceditor-group {
	display: inline-flex !important;
	align-items: center;
	gap: 1px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, 0.045) !important;
}

.sceditor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 3px !important;
	background: transparent !important;
	line-height: 1 !important;
	overflow: visible !important;
}

.sceditor-button:hover,
.sceditor-button:focus,
.sceditor-button.active {
	border-color: rgba(255, 145, 60, 0.45) !important;
	background: rgba(255, 122, 46, 0.14) !important;
}

.sceditor-button.disabled,
.sceditor-button.disabled:hover {
	opacity: 0.38;
	border-color: transparent !important;
	background: transparent !important;
}

.sceditor-button div {
	display: block !important;
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	opacity: 0.9;
	filter: invert(1) brightness(1.55) saturate(0.55);
}

.sceditor-button svg {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sceditor-button:hover div,
.sceditor-button:focus div,
.sceditor-button.active div {
	opacity: 1;
	filter: invert(1) brightness(1.95) sepia(0.25) saturate(1.35);
}

.midnight-posting-heading {
	display: grid;
	gap: 6px;
	margin: 0 0 12px;
}

.midnight-posting-heading .posting-title {
	margin: 0;
}

.midnight-posting-trail {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
}

h3.review {
	margin-bottom: 7px;
}

#topicreview.midnight-topicreview {
	margin-bottom: 4px;
	padding-bottom: 0;
}

#topicreview.midnight-topicreview .post:last-child {
	margin-bottom: 4px;
}

div.sceditor-dropdown {
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 7px !important;
	background: #171b26 !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
	color: var(--midnight-soft) !important;
}

div.sceditor-dropdown label,
div.sceditor-dropdown a,
div.sceditor-dropdown div {
	color: var(--midnight-soft) !important;
	font-family: inherit !important;
}

div.sceditor-dropdown a:hover,
div.sceditor-dropdown a:focus {
	background: rgba(255, 122, 46, 0.15) !important;
	color: #ffffff !important;
}

div.sceditor-dropdown input[type="text"] {
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 5px;
	background: #10141f;
	color: var(--midnight-text);
}

div.sceditor-dropdown input.button {
	border-color: rgba(255, 145, 60, 0.4);
	background:
		linear-gradient(180deg, rgba(255, 176, 102, 0.2), rgba(255, 122, 46, 0.12)),
		#1b1f2c;
	color: #ffe2bf;
	font-family: inherit;
	font-weight: 800;
}

.midnight-paste-preview-zone {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 8px;
	margin: 8px 0 0;
}

.midnight-paste-preview-zone[hidden] {
	display: none;
}

.midnight-paste-preview {
	position: relative;
	overflow: hidden;
	min-height: 82px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.035);
}

.midnight-paste-preview img {
	display: block;
	width: 100%;
	height: 118px;
	object-fit: contain;
	background: rgba(0, 0, 0, 0.22);
}

.midnight-paste-preview-caption {
	position: absolute;
	right: 6px;
	bottom: 6px;
	padding: 3px 6px;
	border-radius: 4px;
	background: rgba(5, 8, 14, 0.82);
	color: rgba(255, 255, 255, 0.86);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.midnight-paste-preview.is-ready .midnight-paste-preview-caption {
	color: #b8ffd0;
}

.midnight-paste-preview.is-failed .midnight-paste-preview-caption {
	color: #ffb8b8;
}

.panel h2,
.stat-block h2,
.panel h3,
.stat-block h3,
.content h2 {
	color: var(--midnight-text);
}

.panel p,
.stat-block p,
.content {
	color: var(--midnight-soft);
}

.bg3.panel,
.bg3.stat-block,
.section-posting .bg3.panel,
.section-posting .bg3.stat-block {
	border-color: var(--midnight-border);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
		var(--midnight-card);
}

.bg3.panel:before,
.bg3.stat-block:before,
.bg3.panel:after,
.bg3.stat-block:after {
	background: transparent;
}

.midnight-access-panel > .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.midnight-access-panel p {
	margin: 8px auto 0;
	max-width: 780px;
	color: var(--midnight-soft);
	line-height: 1.5;
}

/* Forms */

.search-box .inputbox,
.search-box .inputbox:hover,
input.inputbox,
textarea.inputbox,
select {
	color: var(--midnight-text);
	border-color: rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.045);
}

.search-box .inputbox:focus,
input.inputbox:focus,
textarea.inputbox:focus,
select:focus {
	border-color: rgba(255, 88, 11, 0.55);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(255, 88, 11, 0.12);
}

/* Buttons */

.button,
.buttons > .button,
a.button1,
input.button1,
a.button2,
input.button2,
input.button3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 32px;
	padding: 0 13px;
	border: 1px solid rgba(198, 155, 109, 0.5);
	border-radius: 7px;
	background:
		linear-gradient(180deg, rgba(46, 53, 69, 0.96), rgba(18, 23, 35, 0.98)),
		var(--midnight-panel);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 6px 16px rgba(0, 0, 0, 0.42);
	color: #ecc9a0;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.button:hover,
.buttons > .button:hover,
a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
input.button3:hover,
.dropdown-visible .dropdown-select,
.nojs .dropdown-container:hover .dropdown-select {
	border-color: rgba(230, 178, 120, 0.85);
	background:
		linear-gradient(180deg, rgba(58, 52, 45, 0.98), rgba(30, 22, 18, 0.98)),
		var(--midnight-panel);
	color: #ffdfb0;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 20px rgba(0, 0, 0, 0.5),
		0 0 14px rgba(214, 140, 70, 0.28);
	filter: none;
	transform: translateY(-1px);
}

/* Drop the quick topic-tools split button (wrench + caret) next to
   Post Reply — not wanted on this board. */
.action-bar .topic-tools {
	display: none;
}

.button-search,
.button-search-end {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.button-search:hover,
.button-search-end:hover {
	border-color: rgba(255, 88, 11, 0.42);
	background: rgba(255, 88, 11, 0.16);
}

.action-bar.bar-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 14px 0 0;
}

/* Не `.bar-bottom`, а любой ряд действий: верхний возвращается на страницу
   темы (см. body.topic-controls-top в topic-enhancements.css), и кнопки
   пагинации в нём должны выглядеть ровно так же, как внизу. Разметка у обоих
   рядов и так общая — расходились они только из-за этих стилей. */
.action-bar .button {
	height: 32px;
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.action-bar .button .icon,
.button .icon {
	margin-left: 7px;
}

/* Icon-only buttons (post quote/edit/report/... and the like) carry just an
   icon + an sr-only label — the 7px icon gap above would knock the glyph
   off-centre, so reset it and use symmetric padding. */
.button.button-icon-only {
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	border-radius: 7px;
}

.button.button-icon-only .icon {
	margin-left: 0;
}

/* Pagination */

.pagination li a,
.pagination li span,
.row .pagination li a,
.row .pagination li span {
	border-color: rgba(255, 255, 255, 0.1);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.045);
	color: var(--midnight-soft);
}

.pagination li a:hover,
.pagination li.active span,
.row .pagination li a:hover,
.row .pagination li.active span {
	border-color: rgba(255, 88, 11, 0.5);
	background: rgba(255, 88, 11, 0.18);
	color: #ffffff;
}

/* Единая сетка ряда пагинации.

   prosilver задаёт размер номеров страниц одними горизонтальными
   отступами, поэтому «1» выходила 17px шириной при высоте 32 — прямоугольник
   вместо квадрата, а ряд получался из плиток разной ширины. Активная
   страница вдобавок размечена простым <span> без .button и выпадала из ряда
   по высоте (24px против 32). min-width выравнивает однознаковые номера в
   квадрат, а многознаковые растит по содержимому. */
.pagination li a.button,
.pagination li span.button,
.pagination li.active span {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0 6px;
	line-height: 1;

	/* Типографику номеров задаёт `.action-bar .button`, а текущая страница
	   размечена простым <span> без этого класса — и уезжала на прosilver'овский
	   Open Sans 400 против Montserrat 800 у соседей. При переходе по страницам
	   это читалось как смена шрифта в выбранной ячейке. Здесь только шрифт:
	   цвет и фон активной ячейки остаются своими (см. правило выше). */
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

/* Иконочные кнопки ряда (страницы «назад»/«вперёд» и вызов окна перехода):
   строго квадрат, без внутренних отступов, которые смещали бы глиф от
   центра. Общий размер иконки — иначе значок вызова окна (fa-level-down,
   21px против 14px у стрелок) сидел выше и крупнее соседей. */
.pagination li .button.button-icon-only {
	width: 32px;
	min-width: 32px;
	padding: 0;
}

.pagination li .button.button-icon-only .icon {
	margin: 0;
	font-size: 14px;
	line-height: 1;
}

/* Окно «перейти к странице».

   Общий дропдаун prosilver рассчитан на списки ссылок: `.dropdown-contents
   > li` держит min-width: 180px и padding-right: 15px. Для формы из поля и
   кнопки это давало ~90px пустоты справа. Здесь ширину диктует содержимое.

   Поле было 50×13px при box-sizing: content-box — нативные стрелки счётчика
   в такую высоту не помещаются и торчали за рамкой; на их фоне кнопка GO
   (32px) выглядела вдвое крупнее поля. Приводим оба к одной высоте. */
.dropdown-page-jump .dropdown-contents > li {
	min-width: 0;
	padding-right: 0;
}

.dropdown-page-jump .page-jump-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.dropdown-page-jump input.inputbox.tiny {
	box-sizing: border-box;
	width: 78px;
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0 8px;
	font-size: 13px;
}

.dropdown-page-jump input.button2 {
	height: 32px;
	min-height: 32px;
	margin: 0;
	padding: 0 14px;
	font-size: 13px;
}

/* Dropdowns */

.dropdown .dropdown-contents,
.dropdown-extended .dropdown-contents {
	background: #151924;
}

.dropdown li,
#wrap .dropdown li,
.dropdown.wrap li {
	border-color: rgba(255, 255, 255, 0.07);
}

.dropdown li:hover,
.dropdown-extended li:hover,
.notification_list li.dropdown-notification:hover,
.panel-container .notification_list li.dropdown-notification:hover {
	background: rgba(255, 88, 11, 0.12);
}

.dropdown .pointer-inner {
	border-color: #151924 transparent;
}

/* Tables */

table.table1 thead th,
table.table1 tbody th,
table.info tbody th,
dl.details dt {
	color: var(--midnight-text);
	background: rgba(255, 255, 255, 0.035);
}

table.table1 td,
table.table1 tbody td,
dl.details dd {
	color: var(--midnight-soft);
}

table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
	background: rgba(255, 88, 11, 0.08);
	color: #ffffff;
}

/* Content misc */

.postlink,
.postlink:visited {
	border-bottom-color: rgba(255, 88, 11, 0.55);
	color: var(--midnight-accent-2);
}

.postlink:hover {
	background: rgba(255, 88, 11, 0.12);
	color: #ffffff;
}

blockquote,
.codebox {
	border-color: rgba(255, 255, 255, 0.09);
	border-radius: 14px;
	background: rgba(8, 10, 15, 0.58);
}

blockquote cite,
.uncited,
.codebox p {
	color: var(--midnight-text);
}

.rules {
	border: 1px solid rgba(255, 88, 11, 0.32);
	border-radius: 16px;
	background: rgba(255, 88, 11, 0.09);
	color: var(--midnight-soft);
}

/* Footer */

.copyright,
.copyright a,
.footer-row,
.footer-link {
	color: var(--midnight-muted);
}

.copyright a:hover,
.footer-link:hover {
	color: #ffffff;
}

#page-footer,
.page-footer {
	position: relative;
	margin-top: auto;
	padding-top: 22px;
	color: #9faabd;
}

#page-footer:before,
.page-footer:before {
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	content: "";
	background: linear-gradient(90deg, transparent, rgba(255, 120, 45, 0.45), rgba(80, 140, 255, 0.35), transparent);
}

.midnight-footer-strip {
	height: 1px;
	margin: 14px 0 18px;
	background: linear-gradient(90deg, transparent, rgba(255, 88, 11, 0.55), rgba(59, 130, 246, 0.25), transparent);
}

/* Hidden chrome */

.collapse-btn,
a.collapse-btn,
.collapsible,
.forabg ul.topiclist li.header .forum-toggle {
	display: none !important;
}

/* The synthetic header phpBB emits for the currently-viewed forum itself
   (when its direct children are plain forums, not categories — e.g.
   Cataclysm's own bar above Blood/Frost/Unholy, or Previous Expansions'
   own bar above Vanilla/TBC/...) just repeats the page heading above it
   and isn't a link. Genuine sub-category headers (Previous patches,
   Midnight, Previous Expansions when listed under a class) always wrap
   their name in a link, so :has(a) tells the two apart. */
.forabg ul.topiclist li.header:not(:has(dt .list-inner a)) {
	display: none;
}

/* Same idea for a leaf forum's own topic list (e.g. Blood): its "TOPICS /
   REPLIES / VIEWS / LAST POST" caption bar sits directly under the page
   heading with nothing distinguishing it, so it reads as another redundant
   title rather than a column caption. Always a plain label (never a link),
   so this one is unconditional. */
.forumbg ul.topiclist li.header {
	display: none;
}

.action-bar.bar-top,
.actions-jump,
.online-list,
.permissions {
	display: none;
}

/* Icon colours */

.icon.icon-blue,
a:hover .icon.icon-blue {
	color: var(--midnight-blue);
}

.icon.icon-green,
a:hover .icon.icon-green {
	color: var(--midnight-green);
}

.icon.icon-red,
a:hover .icon.icon-red {
	color: var(--midnight-red);
}

.icon.icon-orange,
a:hover .icon.icon-orange {
	color: var(--midnight-accent-2);
}

/* Jumpbox */

.jumpbox-cat-link {
	background: linear-gradient(180deg, #ff6a1f, #d9480f);
	color: #ffffff;
}

.jumpbox-forum-link,
.jumpbox-sub-link {
	background: var(--midnight-card);
	color: var(--midnight-soft);
}

.jumpbox-forum-link:hover,
.jumpbox-sub-link:hover,
.jumpbox-cat-link:hover {
	background: rgba(255, 88, 11, 0.18);
	color: #ffffff;
}

.notification_list li.bg3,
.panel-container .notification_list li.bg3 {
	background: rgba(255, 255, 255, 0.035);
}

/* =========================================================================
   15. Animations
   ========================================================================= */

@keyframes mdps-logo-wave {
	0% {
		opacity: 0;
		transform: scale(0.78);
	}

	18% {
		opacity: 0.82;
	}

	62% {
		opacity: 0.16;
	}

	100% {
		opacity: 0;
		transform: scale(1.18);
	}
}

@keyframes mdps-headerbar-shine {
	0%,
	58% {
		opacity: 0;
		transform: translate3d(-120%, 0, 0);
	}

	70% {
		opacity: 0.9;
	}

	86% {
		opacity: 0.9;
		transform: translate3d(120%, 0, 0);
	}

	100% {
		opacity: 0;
		transform: translate3d(120%, 0, 0);
	}
}

@keyframes mdps-header-shine-hover {
	0% {
		opacity: 0;
		transform: translateX(-120%);
	}

	28% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translateX(120%);
	}
}

/* =========================================================================
   16. Responsive & reduced motion
   ========================================================================= */

@media (max-width: 920px) {
	.headerbar > .inner {
		align-items: center;
		flex-direction: row;
	}

	.midnight-class-rail {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.midnight-activity-hub {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 12px;
	}

	.page-width {
		width: min(100% - 20px, 1280px);
	}

	.midnight-activity-hub {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 8px;
	}

	.midnight-activity-hub.page-width {
		width: min(100% - 40px, 1280px);
	}

	.midnight-feed-tab {
		flex: 1 1 150px;
	}

	.midnight-feed-home {
		flex: 0 0 32px;
	}

	.midnight-feed-actions {
		width: 100%;
		margin-left: 0;
	}

	.midnight-feed-actions .midnight-feed-tab {
		flex: 1 1 150px;
	}

	.midnight-feed-item {
		padding: 10px 10px 10px 14px;
	}

	#wrap {
		padding: 10px;
		border-radius: 16px;
	}

	.headerbar,
	.forabg,
	.forumbg,
	.panel,
	.stat-block,
	.post,
	.navbar .nav-tabs,
	.navbar.secondary {
		border-radius: 14px;
	}

	.headerbar > .inner {
		flex-direction: column;
		min-height: 96px;
		padding: 14px 16px;
	}

	.midnight-header-actions {
		position: static;
		width: 100%;
		max-width: 100%;
		margin-top: 4px;
		justify-content: center;
		gap: 6px;
	}

	.midnight-header-auth-link {
		max-width: min(220px, 100%);
	}

	.headerbar:before {
		background:
			radial-gradient(circle at 78% 18%, rgba(59, 130, 246, 0.12), transparent 34%),
			linear-gradient(90deg, rgba(255, 88, 11, 0.11), transparent 46%, rgba(59, 130, 246, 0.1)),
			linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.34));
		opacity: 0.58;
	}

	.site-description {
		align-items: center;
	}

	.site-description .sitename {
		display: block !important;
		margin: 0;
		overflow: visible;
		text-align: left;
		text-overflow: clip;
	}

	.logo {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
		margin-right: 12px;
	}

	.logo:before,
	.logo:after {
		inset: 8px;
	}

	.logo:after {
		inset: 5px;
	}

	.logo img {
		width: 64px;
		height: 64px;
	}

	p.sitename {
		font-size: 21px;
	}

	#site-description.site-description .midnight-brand-copy,
	#site-description.site-description .midnight-brand-copy .sitename {
		display: block !important;
	}

	/* overflow / font-size / line-height / text-overflow for this selector are
	   set further down in this same breakpoint, so only the properties that
	   survive that later rule are declared here. */
	#site-description.site-description .midnight-brand-copy .sitename {
		margin: 0;
		color: #f4f7ff;
		text-align: left;
	}

	.midnight-class-rail {
		display: none;
	}

	.post > .inner {
		padding: 14px;
	}

	.midnight-forum-heading {
		margin-top: 0;
		padding: 14px 14px 14px 70px;
		border-radius: 14px;
	}

	.midnight-forum-heading:before {
		left: 14px;
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}

	.forum-title a {
		font-size: 22px;
	}

	.midnight-forum-trail {
		gap: 6px;
		font-size: 12px;
	}

	.forabg ul.topiclist li.header,
	.forabg ul.topiclist li.header dl.row-item,
	.forabg ul.topiclist li.header dt .list-inner,
	.forabg ul.topiclist li.header dd {
		min-height: 48px;
	}

	.forabg ul.topiclist li.header dt .list-inner {
		padding-left: 58px;
	}

	.forabg ul.topiclist li.header dt .list-inner:before {
		left: 10px;
		width: 40px;
		height: 40px;
	}

	.forabg ul.topiclist li.header dt .list-inner a {
		font-size: 17px;
	}

	.forabg ul.topiclist.forums li.row dl.row-item dd.topics,
	.forabg ul.topiclist.forums li.row dl.row-item dd.posts,
	.forabg ul.topiclist.forums li.row dl.row-item dd.lastpost,
	.forabg ul.topiclist li.header dd.topics,
	.forabg ul.topiclist li.header dd.posts,
	.forabg ul.topiclist li.header dd.lastpost {
		display: none !important;
	}

	.forabg ul.topiclist.forums li.row .forum-lastpost {
		display: none !important;
	}

	.forabg ul.topiclist.forums li.row dl.row-item dt {
		margin-right: 0;
	}

	.forabg ul.topiclist.forums li.row dl.row-item dt .list-inner {
		margin-right: 0;
	}

	#site-description.site-description .midnight-brand-copy {
		min-width: 0;
		max-width: calc(100vw - 116px);
	}

	#site-description.site-description .midnight-brand-copy .sitename {
		display: block !important;
		max-width: 100%;
		overflow: hidden;
		font-size: clamp(13px, 4.2vw, 21px);
		line-height: 1.05;
		white-space: nowrap;
		text-overflow: clip;
	}

	a.forumtitle {
		display: block;
		max-width: 100%;
		overflow: hidden;
		font-size: clamp(13px, 4.1vw, 18px);
		line-height: 1.12;
		white-space: nowrap;
		text-overflow: clip;
	}

	.midnight-forum-heading .forum-title {
		min-width: 0;
	}

	.midnight-forum-heading .forum-title a,
	.midnight-topic-heading .topic-title a {
		display: block;
		max-width: 100%;
		overflow: hidden;
		font-size: clamp(15px, 4.7vw, 22px);
		line-height: 1.08;
		white-space: nowrap;
		text-overflow: clip;
	}
}

@media (prefers-reduced-motion: reduce) {
	.headerbar,
	.logo,
	.logo:before,
	.logo:after,
	.logo img,
	.forabg,
	.forumbg,
	.forabg ul.topiclist li.header,
	.forabg ul.topiclist li.header:after,
	.forabg ul.topiclist li.header dt .list-inner:before {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================================
   20. MaxDPS SSO sign-in pages (choose-method + email-taken)
   ========================================================================= */

.maxdps-sso-page {
	max-width: 480px;
	margin: 0 auto;
}

.maxdps-sso-primary {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 18px 18px;
}

.maxdps-sso-primary:before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 122, 46, 0.12), transparent 62%);
}

.maxdps-sso-primary .inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.maxdps-sso-primary h2,
.maxdps-sso-primary p,
.maxdps-sso-primary .maxdps-sso-cta {
	margin: 0;
}

.maxdps-sso-primary p {
	color: var(--midnight-muted);
}

.maxdps-sso-cta {
	display: inline-flex;
	padding: 0 26px;
	min-height: 48px;
	border-color: rgba(255, 145, 60, 0.65);
	background:
		linear-gradient(180deg, rgba(255, 145, 60, 0.24), rgba(255, 88, 11, 0.14)),
		var(--midnight-panel);
	color: #ffdfb0;
	font-size: 14px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 6px 14px rgba(255, 88, 11, 0.14);
}

.maxdps-sso-cta:hover {
	border-color: rgba(255, 178, 110, 0.9);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 8px 18px rgba(255, 88, 11, 0.2);
}

.maxdps-sso-cta .icon {
	margin-left: 9px;
	font-size: 16px;
}

.maxdps-sso-primary p.small {
	font-size: 11px;
	color: var(--midnight-dim);
}

.maxdps-sso-divider {
	display: flex;
	align-items: center;
	margin: 18px 0;
	color: var(--midnight-dim);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.maxdps-sso-divider:before,
.maxdps-sso-divider:after {
	flex: 1 1 auto;
	height: 1px;
	content: "";
	background: linear-gradient(90deg, transparent, var(--midnight-border), var(--midnight-border), transparent);
}

.maxdps-sso-divider span {
	padding: 0 12px;
}

.maxdps-sso-secondary {
	opacity: 0.92;
	text-align: center;
}

.maxdps-sso-secondary .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* No gap here: it would reserve space after the toggle even while the
	   collapse below is closed (and some engines count the whitespace text
	   nodes around a lone button as extra flex items, padding it further).
	   Vertical spacing for the expanded state lives on .maxdps-sso-collapse-inner
	   instead, where it only exists once there is something to space from. */
}

/* Specificity note: `.panel p` (0,1,1) otherwise outranks a bare class
   selector (0,1,0) and reintroduces its own margin-bottom: 1em. */
.maxdps-sso-secondary .maxdps-sso-secondary-cta {
	margin: 0;
	width: 100%;
}

.maxdps-sso-toggle {
	width: 100%;
	justify-content: center;
}

.maxdps-sso-collapse {
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	width: 100%;
	overflow: hidden;
	transition: grid-template-rows 260ms ease;
}

.maxdps-sso-collapse.is-expanded {
	grid-template-rows: minmax(0, 1fr);
}

.maxdps-sso-collapse-inner {
	min-height: 0;
	padding-top: 16px;
}

/* Specificity note: stylesheet.css's `fieldset.fields1 dt/dd` (0,1,2) and
   `fieldset dt` (0,0,2) otherwise outrank a plain class selector here, so
   this is scoped through the form's id to win outright rather than restate
   every property those rules touch. */
#maxdps-sso-login-form {
	width: 100%;
}

#maxdps-sso-login-form fieldset {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

#maxdps-sso-login-form dl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	max-width: 260px;
	padding: 0;
	margin: 0;
}

#maxdps-sso-login-form dt,
#maxdps-sso-login-form dd {
	float: none;
	width: auto;
	max-width: 100%;
	margin: 0;
	text-align: center;
}

#maxdps-sso-login-form .inputbox.autowidth {
	box-sizing: border-box;
	width: 100%;
}

#maxdps-sso-login-form .button1 {
	width: 100%;
	margin: 0;
}

.maxdps-sso-forgot a {
	font-size: 11px;
}

.maxdps-sso-notice {
	margin-bottom: 18px;
}

.maxdps-sso-notice .inner {
	padding: 20px 24px;
}

.maxdps-sso-notice strong {
	display: block;
	margin-bottom: 4px;
	color: #ffdfb0;
}

.midnight-access-panel .maxdps-buy-access {
	margin-top: 6px;
	padding: 0 22px;
	min-height: 40px;
	border-color: rgba(255, 145, 60, 0.65);
	background:
		linear-gradient(180deg, rgba(255, 145, 60, 0.24), rgba(255, 88, 11, 0.14)),
		var(--midnight-panel);
	color: #ffdfb0;
}

.midnight-access-panel .maxdps-buy-access:hover {
	border-color: rgba(255, 178, 110, 0.9);
}

.midnight-access-panel .maxdps-buy-access .icon {
	margin-right: 8px;
}