/*  phpBB3 Style Sheet — POOFA
    --------------------------------------------------------------
    Style name:    POOFA
    Built by:      The POOFA, 2026
    --------------------------------------------------------------
    Original style for Pennsylvania Owners Of Firearms & Anglers.
    Self-contained: phpBB's asset pipeline doesn't reliably honor
    @import directives, so all rules live in this single file.
*/

/*  POOFA — CSS Variables
    --------------------------------------------------------------
    The full color palette for both dark (default) and light themes.
    All other CSS files reference these variables exclusively.
    -------------------------------------------------------------- */

:root,
[data-theme="dark"] {
	--bg-deep:           #131316;
	--bg-base:           #1c1c1f;
	--bg-surface:        #28282c;
	--bg-elevated:       #34343a;
	--bg-row-alt:        #232327;
	--border-subtle:     #3a3a40;
	--border-strong:     #4a4a52;
	--text-primary:      #e8e6e1;
	--text-secondary:    #a8a6a0;
	--text-muted:        #6e6c66;
	--text-link:         #d4a04a;
	--text-link-hover:   #e8b85a;
	--accent-red:        #a82828;
	--accent-red-bright: #c93434;
	--accent-red-dark:   #6b1a1a;
	--accent-amber:      #b88c3a;
	--strip-bg:          #000;
	--strip-border:      #3a3a3c;
	--strip-text:        #6e6c66;
	--strip-text-strong: #a8a6a0;
	--pa-mark:           #c93434;
	--pa-mark-stroke:    #6b1a1a;
	--dropdown-bg:       #1f1f20;
	--dropdown-hover:    #262627;
	--shadow:            0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
	--bg-deep:           #c8ccd2;
	--bg-base:           #d4d7dc;
	--bg-surface:        #fbfcfd;
	--bg-elevated:       #ffffff;
	--bg-row-alt:        #f0f2f5;
	--border-subtle:     #a8aeb6;
	--border-strong:     #7c828a;
	--text-primary:      #1f2429;
	--text-secondary:    #4a5159;
	--text-muted:        #7c828a;
	--text-link:         #8a6420;
	--text-link-hover:   #5e4615;
	--accent-red:        #8f2424;
	--accent-red-bright: #a82828;
	--accent-red-dark:   #5e1414;
	--accent-amber:      #8a6420;
	--strip-bg:          #1a1d22;
	--strip-border:      #0e1014;
	--strip-text:        #9098a3;
	--strip-text-strong: #c8ced6;
	--pa-mark:           #8f2424;
	--pa-mark-stroke:    #5e1414;
	--dropdown-bg:       #fbfcfd;
	--dropdown-hover:    #f0f2f5;
	--shadow:            0 4px 16px rgba(0, 0, 0, 0.15);
}

html, body {
	background: var(--bg-deep) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	-webkit-font-smoothing: antialiased;
	transition: background-color 0.3s ease, color 0.3s ease;
}

body {
	background:
		radial-gradient(ellipse 1200px 400px at 50% 0%, rgba(168, 40, 40, 0.05) 0%, transparent 60%),
		var(--bg-deep) !important;
}

[data-theme="light"] body {
	background:
		radial-gradient(ellipse 1200px 400px at 50% 0%, rgba(143, 36, 36, 0.04) 0%, transparent 60%),
		var(--bg-deep) !important;
}

/*  POOFA — Header styles
    --------------------------------------------------------------
    Top strip, site header (POOFA wordmark + main site nav),
    forum bar (phpBB quick-links + profile + notifications),
    and the search box.
    -------------------------------------------------------------- */

/* === TOP STRIP ============================================================ */
.poofa-top-strip {
	background: var(--strip-bg);
	border-bottom: 1px solid var(--strip-border);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--strip-text);
}
.poofa-top-strip-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 28px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.poofa-est { color: var(--strip-text-strong); }
.poofa-strip-right { display: flex; gap: 18px; align-items: center; }
.poofa-top-strip a {
	color: var(--strip-text);
	text-decoration: none;
	transition: color 0.15s;
}
.poofa-top-strip a:hover { color: var(--accent-red-bright); }
.poofa-strip-divider {
	width: 1px;
	height: 14px;
	background: var(--strip-border);
}

.poofa-theme-toggle {
	background: transparent;
	border: 1px solid var(--strip-border);
	color: var(--strip-text-strong);
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 10px;
	cursor: pointer;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s;
	border-radius: 0;
}
.poofa-theme-toggle:hover {
	border-color: var(--accent-red-bright);
	color: var(--accent-red-bright);
}

/* === FONT SIZE TOGGLE (A A A buttons) ===
   Three small buttons with progressively larger "A" glyphs. Active state
   uses the accent-red treatment matching the theme toggle hover. */
.poofa-fontsize-toggle {
	display: inline-flex;
	gap: 2px;
	align-items: center;
}
.poofa-fs-btn {
	background: transparent;
	border: 1px solid var(--strip-border);
	color: var(--strip-text-strong);
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	border-radius: 0;
	line-height: 1;
}
.poofa-fs-btn:hover {
	border-color: var(--accent-red-bright);
	color: var(--accent-red-bright);
}
.poofa-fs-btn.active {
	border-color: var(--accent-red-bright);
	color: var(--accent-red-bright);
	background: rgba(229, 62, 62, 0.08);
}
.poofa-fs-a {
	display: inline-block;
	line-height: 1;
}
.poofa-fs-a-sm { font-size: 9px; }
.poofa-fs-a-md { font-size: 11px; }
.poofa-fs-a-lg { font-size: 14px; }

/* === FONT SCALE VARIABLE ===
   Used by content-area rules to scale reading text. Chrome (header, nav,
   footer, strip) intentionally NOT scaled — only content the user is
   reading. Default is 1; small is 0.9; large is 1.18. The actual font-size
   declarations live with their original rules, using calc(BASE * scale). */
:root {
	--font-scale: 1;
}
html[data-fontsize="sm"] {
	--font-scale: 0.9;
}
html[data-fontsize="lg"] {
	--font-scale: 1.18;
}

/* === SITE HEADER (wordmark + main site nav) =============================== */
.poofa-site-header {
	background: var(--bg-base);
	border-bottom: 1px solid var(--border-strong);
	position: relative;
}
.poofa-site-header::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent-red-dark);
}
.poofa-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 76px;
}

.poofa-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	flex-shrink: 0;
	color: inherit;
}
.poofa-brand:hover { text-decoration: none; }
.poofa-brand-mark {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.poofa-brand-text { display: flex; flex-direction: column; gap: 1px; }
.poofa-brand-wordmark {
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--text-primary);
	line-height: 1;
}
.poofa-brand-wordmark .accent { color: var(--accent-red-bright); }
.poofa-brand-tagline {
	font-family: 'Oswald', sans-serif;
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 500;
}

.poofa-primary-nav ul {
	display: flex;
	list-style: none;
	gap: 0;
	margin: 0;
	padding: 0;
}
.poofa-primary-nav li {
	background: transparent !important;
}
.poofa-primary-nav li a {
	display: block;
	padding: 28px 18px;
	color: var(--text-secondary) !important;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.2s;
}
.poofa-primary-nav li a:hover,
.poofa-primary-nav li a.active {
	color: var(--text-primary) !important;
	border-bottom-color: var(--accent-red-bright);
	background: transparent !important;
	text-decoration: none;
}

/* === FORUM BAR (phpBB quick-links + profile + notifications) ============== */
.poofa-forum-bar {
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border-subtle);
	position: relative;
	z-index: 5;
}
.poofa-forum-bar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px;
}

/* Reset the nav-main list to fit our layout */
.poofa-forum-bar #nav-main {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 44px;
	align-items: center;
	background: transparent !important;
	border: none !important;
	flex-wrap: wrap;
}
.poofa-forum-bar #nav-main > li {
	position: relative;
	background: transparent !important;
}
.poofa-forum-bar #nav-main > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	color: var(--text-secondary) !important;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 0.15s;
	background: transparent !important;
}
.poofa-forum-bar #nav-main > li > a:hover {
	color: var(--text-primary) !important;
	border-bottom-color: var(--accent-red-bright);
	background: rgba(168, 40, 40, 0.05) !important;
	text-decoration: none;
}
.poofa-forum-bar #nav-main > li > a .icon {
	color: var(--accent-amber);
	font-size: 13px;
}

/* Right-side items pushed right. The selector targets the first .rightside
   sibling — it's the one that gets margin-left:auto to push it (and all
   following items) to the right edge of the flex container. */
.poofa-forum-bar #nav-main > li.rightside:first-of-type,
.poofa-forum-bar #nav-main > li:not(.rightside) + li.rightside {
	margin-left: auto;
}
.poofa-forum-bar #nav-main > li.rightside {
	background: transparent !important;
}

/* Avatar in header */
.poofa-forum-bar .header-avatar img,
.poofa-forum-bar .header-avatar .avatar {
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 6px;
}

/* Badge / notification count pill */
.poofa-forum-bar .badge {
	background: var(--accent-red);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 10px;
	margin-left: 4px;
	line-height: 1.2;
}
.poofa-forum-bar .badge.hidden { display: none; }

/* === DROPDOWNS ============================================================
   phpBB 3.3 dropdown behavior:
   - All .dropdown elements start hidden (display: none)
   - phpBB's forum_fn.js adds .dropdown-visible class to the CONTAINER
     when the trigger is clicked
   - The CSS rule .dropdown-container.dropdown-visible .dropdown reveals it
   - We use !important to override Prosilver's parent rules cleanly
   -------------------------------------------------------------------------- */

/* Hide ALL dropdowns by default, not just inside forum-bar — covers
   notification_dropdown, search dropdown, jumpbox, and any future dropdown */
.dropdown-container .dropdown,
.dropdown {
	display: none !important;
}

/* Reveal only when phpBB JS adds the .dropdown-visible class to container.
   Default: left-anchored under the trigger. Right-anchored only for
   containers explicitly marked .dropdown-right (notifications, etc). */
.dropdown-container.dropdown-visible > .dropdown,
.dropdown-container.dropdown-visible .dropdown {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	min-width: 220px;
	background: var(--dropdown-bg);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	box-shadow: var(--shadow);
	z-index: 9999;
	margin-top: 1px;
}

/* Right-anchored dropdowns (notifications, profile menu on the right side) */
.dropdown-container.dropdown-right.dropdown-visible > .dropdown,
.dropdown-container.dropdown-right.dropdown-visible .dropdown {
	left: auto;
	right: 0;
}

/* Quick Links specifically: phpBB's JS sets inline left/right styles on
   this dropdown when toggled. We use ID + !important to win against
   the inline styles JS sets after click. */
#quick-links.dropdown-visible > .dropdown,
#quick-links .dropdown {
	left: 0 !important;
	right: auto !important;
}
#quick-links .dropdown .pointer {
	left: 16px !important;
	right: auto !important;
}

/* Action-bar Tools dropdown (wrench icon → Subscribe/Bookmark/Email/Print).
   Same problem as username dropdown back in v48: phpBB's dropdowns.js
   injects an inline margin-right that pushes the dropdown into next zip code.
   Force it back under its trigger with !important on margins and position. */
.action-bar .dropdown-container.dropdown-button-control,
.action-bar .dropdown-container {
	position: relative;
}
.action-bar .dropdown-container .dropdown,
.action-bar .dropdown-container.dropdown-visible > .dropdown,
.action-bar .dropdown-container.dropdown-visible .dropdown {
	left: 0 !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	top: 100% !important;
}
/* If the dropdown-container is marked .dropdown-container-right
   (phpBB does this in some places), right-anchor it instead. */
.action-bar .dropdown-container-right .dropdown,
.action-bar .dropdown-container.dropdown-container-right.dropdown-visible > .dropdown,
.action-bar .dropdown-container.dropdown-container-right.dropdown-visible .dropdown {
	left: auto !important;
	right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* If the dropdown is marked .dropdown-up (open upward) — for jumpbox at
   bottom of page — anchor above the trigger instead of below */
.action-bar .dropdown-up .dropdown,
.action-bar .dropdown-container.dropdown-up.dropdown-visible > .dropdown,
.action-bar .dropdown-container.dropdown-up.dropdown-visible .dropdown {
	top: auto !important;
	bottom: 100% !important;
	margin-bottom: 1px !important;
}
.action-bar .dropdown .pointer {
	left: 16px !important;
	right: auto !important;
}
.action-bar .dropdown-container-right .dropdown .pointer {
	left: auto !important;
	right: 16px !important;
}

/* Notifications dropdown: right-anchored. The dropdown has id="notification_list"
   and lives inside <li class="dropdown-container dropdown-right rightside">.
   Extensions (webpushnotifications) may also style this — override aggressively.
   IMPORTANT: phpBB unfortunately reuses the class name `notification_list` BOTH
   for this dropdown wrapper AND for the wrapper around the cplist on the
   Manage Notifications page. We MUST scope this width-clamp to dropdown
   context only, otherwise we squash the full-page list to 360px wide. */
#notification_list,
div#notification_list.dropdown,
div#notification_list.dropdown.dropdown-extended,
.dropdown-container.dropdown-right #notification_list,
.dropdown-container.dropdown-right > #notification_list,
.dropdown .notification_list {
	left: auto !important;
	right: 0 !important;
	width: 360px !important;
	max-width: 360px !important;
	min-width: 360px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	transform: none !important;
}
#notification_list .pointer,
.dropdown .notification_list .pointer {
	left: auto !important;
	right: 16px !important;
}

/* Profile/username dropdown (right side): right-anchored.
   Lives inside <li id="username_logged_in"> > <div class="header-profile dropdown-container dropdown-right">.
   The dropdown anchors to the immediate dropdown-container (.header-profile).
   phpBB's dropdowns.js sets inline left/right styles when opening — we need
   ID + multiple class chain selectors + !important to win against those. */
li#username_logged_in .header-profile.dropdown-container {
	position: relative !important;
	display: inline-block !important;
}
li#username_logged_in {
	position: relative !important;
}
/* Force the dropdown to anchor under the username, not to viewport right.
   phpBB's dropdowns.js applies inline `margin-right: -NNNpx` as a "smart"
   positioning trick that doesn't work right with our flex layout. The
   !important on margin-left/right overrides those JS-set inline styles. */
li#username_logged_in .header-profile.dropdown-container .dropdown,
li#username_logged_in .header-profile.dropdown-container.dropdown-visible .dropdown,
li#username_logged_in .dropdown {
	left: auto !important;
	right: 0 !important;
	top: 100% !important;
	min-width: 200px !important;
	max-width: 280px !important;
	margin-top: 1px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
li#username_logged_in .dropdown .pointer {
	left: auto !important;
	right: 16px !important;
}

/* Notifications dropdown container (other right-anchored dropdown) */
li.dropdown-container.dropdown-right {
	position: relative !important;
}

/* Dropdown pointer (the little arrow on top of the dropdown).
   Default position is on the left to align with left-anchored dropdowns. */
.dropdown-container.dropdown-visible .dropdown .pointer {
	position: absolute;
	top: -8px;
	left: 16px;
	right: auto;
	width: 14px;
	height: 8px;
	overflow: hidden;
}
.dropdown-container.dropdown-right.dropdown-visible .dropdown .pointer {
	left: auto;
	right: 16px;
}
.dropdown-container.dropdown-visible .dropdown .pointer-inner {
	position: absolute;
	top: 4px;
	left: 1px;
	width: 12px;
	height: 12px;
	background: var(--dropdown-bg);
	border: 1px solid var(--border-strong);
	transform: rotate(45deg);
}

/* Dropdown contents list */
.dropdown-contents {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 480px;
	overflow-y: auto;
}
.dropdown-contents li {
	background: transparent !important;
}
.dropdown-contents li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	text-decoration: none;
	border: none;
	transition: background 0.12s;
	background: transparent !important;
}
.dropdown-contents li a:hover {
	background: var(--dropdown-hover) !important;
	color: var(--text-primary) !important;
}
.dropdown-contents li a .icon {
	color: var(--accent-amber);
	font-size: 13px;
}
.dropdown-contents li.separator {
	height: 1px;
	background: var(--border-subtle);
	margin: 6px 0;
	padding: 0;
}

/* Notification dropdown specifically — scoped to dropdown context only.
   phpBB reuses .notification_list as both the dropdown wrapper AND the
   wrapper on the Manage Notifications page, so we explicitly require
   either the ID or the parent .dropdown to bind these dropdown-only
   styles. */
#notification_list,
.dropdown .notification_list,
.dropdown-extended {
	background: var(--dropdown-bg) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 0 !important;
}
#notification_list .header,
.dropdown .notification_list .header,
.dropdown-extended .header {
	background: var(--bg-base) !important;
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-strong) !important;
	padding: 10px 12px !important;
}

/* Drop alignment */
.dropdown-container.dropdown-right .dropdown {
	right: 0;
	left: auto;
}
.dropdown-container.dropdown-left .dropdown {
	left: 0;
	right: auto;
}

/* === SEARCH + BREADCRUMBS WRAP ============================================ */
.poofa-content-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 28px 0;
}

#search-box {
	float: right;
	margin: 0 0 0 16px;
	width: 320px;
	max-width: 100%;
}
#search-box fieldset {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
#search-box input.inputbox.search {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	padding: 6px 10px !important;
	border-radius: 0 !important;
	height: 32px;
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
}
#search-box input.inputbox.search:focus {
	border-color: var(--accent-red) !important;
	outline: none;
	box-shadow: none !important;
}
#search-box .button-search,
#search-box .button-search-end {
	background: var(--bg-elevated) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	height: 32px;
	width: 32px;
	padding: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: all 0.15s;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
}
#search-box .button-search:hover,
#search-box .button-search-end:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
#search-box .button-search i.icon,
#search-box .button-search-end i.icon {
	font-size: 13px;
	line-height: 1;
	display: inline-block;
	width: auto;
	margin: 0;
}

/* Breadcrumbs */
#nav-breadcrumbs,
.nav-breadcrumbs {
	background: transparent !important;
	border: none !important;
	padding: 12px 0 !important;
	margin: 0 0 16px !important;
	list-style: none;
	font-size: 12px;
	color: var(--text-secondary);
}
#nav-breadcrumbs li,
.nav-breadcrumbs li {
	background: transparent !important;
}
.breadcrumbs .crumb {
	color: var(--text-secondary);
}
.breadcrumbs .crumb a {
	color: var(--text-secondary) !important;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	letter-spacing: 0.02em;
}
.breadcrumbs .crumb a:hover {
	color: var(--accent-red-bright) !important;
}
.breadcrumbs .crumb:before {
	content: '\203A'; /* › single right-pointing angle quotation */
	color: var(--text-muted);
	margin: 0 8px;
	font-weight: 600;
}
.breadcrumbs .crumb:first-child:before {
	display: none;
	content: none;
}
.breadcrumbs .crumb a .icon {
	color: var(--accent-amber);
	margin-right: 4px;
}

/* === RESPONSIVE ============================================================ */
@media (max-width: 1080px) {
	.poofa-primary-nav li a { padding: 28px 12px; font-size: 12px; }
	.poofa-header-inner { gap: 20px; }
}

@media (max-width: 960px) {
	.poofa-header-inner {
		flex-wrap: wrap;
		padding: 16px 24px;
		min-height: auto;
	}
	.poofa-primary-nav {
		order: 3;
		width: 100%;
		border-top: 1px solid var(--border-subtle);
		margin-top: 12px;
	}
	.poofa-primary-nav ul { justify-content: center; flex-wrap: wrap; }
	.poofa-primary-nav li a { padding: 14px 14px; }
	.poofa-top-strip-inner { font-size: 10px; padding: 8px 20px; }
	.poofa-strip-right { gap: 10px; }
	.poofa-content-wrap { padding: 12px 16px 0; }
}

@media (max-width: 600px) {
	.poofa-brand-wordmark { font-size: 20px; }
	.poofa-brand-tagline { font-size: 8px; letter-spacing: 0.18em; }
	.poofa-brand-mark { width: 30px; height: 30px; }
	.poofa-brand-mark svg { width: 30px; height: 30px; }
	.poofa-primary-nav li a { padding: 12px 10px; font-size: 11px; letter-spacing: 0.08em; }
	.poofa-forum-bar #nav-main > li > a { padding: 10px 10px; font-size: 11px; }
	#search-box { float: none; width: 100%; }
}

/*  POOFA — Content styles
    --------------------------------------------------------------
    Forum index tables, topic lists, post layout, panels.
    -------------------------------------------------------------- */

/* Wrap and main content area — forum gets more horizontal room since
   it has multiple data columns. Cap at 1600px to keep it readable on
   ultra-wide monitors but otherwise fill the viewport. */
#page-body {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 28px 32px;
}

/* Also widen the search/breadcrumb wrapper to match */
.poofa-content-wrap {
	max-width: 1600px;
}

#wrap {
	background: transparent !important;
	max-width: none !important;
	padding: 0 !important;
}

/* === FORUM INDEX & TOPIC LIST BLOCKS ====================================== */
.forabg,
.forumbg,
.panel {
	background: var(--bg-surface) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: 0 !important;
	margin-bottom: 16px;
	padding: 0;
	position: relative;
	box-shadow: none !important;
}

.forabg::before,
.forumbg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--accent-red);
	z-index: 1;
}

.forabg .inner,
.forumbg .inner,
.panel .inner {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	padding: 0 !important;
}

/* === FORUM HEADER ROWS ==================================================== */
/* These are the "TOPICS / POSTS / LAST POST" column labels above the rows.
   Same rule: do NOT override layout properties, only colors and typography. */
ul.topiclist li.header dt,
ul.topiclist li.header dd {
	background: transparent !important;
	background-image: none !important;
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--border-strong);
	text-shadow: none !important;
}
ul.topiclist li.header dt .list-inner {
	padding-top: 6px;
	padding-bottom: 6px;
}

ul.topiclist li.header dt a,
ul.topiclist li.header dd a {
	color: var(--text-muted) !important;
}

/* === TOPICLIST LAYOUT — CSS TABLE APPROACH =================================
   phpBB's default Prosilver layout uses floats + negative margins to fake
   table behavior with <dl><dt><dd>. That approach is fragile and breaks
   in countless subtle ways. We replace it entirely with CSS tables —
   the modern, predictable approach. Each row is display:table-row, each
   column is display:table-cell, vertically aligned to top. Done.
   -------------------------------------------------------------------------- */

ul.topiclist {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.topiclist li {
	display: block;
	list-style-type: none;
	margin: 0;
}

/* Each row's <dl> is a table */
ul.topiclist li.row dl,
ul.topiclist li.header dl {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* dt = forum title/description cell, takes all remaining width */
ul.topiclist dt {
	display: table-cell;
	vertical-align: top;
	padding: 8px 10px 8px 22px;
	width: auto;
}


/* dd = stat columns, fixed widths */
ul.topiclist dd {
	display: table-cell;
	vertical-align: top;
	padding: 8px 8px;
	border-left: 1px solid transparent;
	white-space: nowrap;
	box-sizing: border-box;
}

ul.topiclist dd.topics,
ul.topiclist dd.posts,
ul.topiclist dd.views {
	width: 80px;
	text-align: center;
	font-size: 14px;
	color: var(--text-secondary);
}

ul.topiclist dd.lastpost {
	width: 240px;
	font-size: 11px;
	line-height: 1.4;
	overflow: hidden;
}

/* The list-inner div inside dt — no extra margin needed in table layout */
ul.topiclist dt .list-inner {
	padding: 0;
	margin: 0;
	line-height: 1.4;
}

/* dfn (screen reader labels) hidden off-screen */
ul.topiclist dfn {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Last-post block: lastsubject on top, then "by Author", then time.
   With table-cell + vertical-align: top, content sits at top naturally.
   The <br /> tags create the line breaks. */
ul.topiclist dd.lastpost > span {
	display: block;
	line-height: 1.4;
}
ul.topiclist dd.lastpost .lastsubject {
	color: var(--text-primary) !important;
	font-weight: 500;
	font-size: 12px;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}
ul.topiclist dd.lastpost a {
	color: var(--accent-amber);
}
ul.topiclist dd.lastpost a:hover {
	color: var(--accent-red-bright);
}
ul.topiclist dd.lastpost time {
	font-size: 10px;
	color: var(--text-muted);
}
ul.topiclist dd.lastpost .icon-md {
	font-size: 10px;
	margin-left: 4px;
	color: var(--text-muted) !important;
}

/* Container divs that wrap the forum lists */
.forabg, .forumbg {
	clear: both;
	padding: 0;
	margin-bottom: 16px;
}

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

/* Disable Prosilver clearfix overflow on dl since we're not floating anymore */
.clearfix, fieldset dl, ul.topiclist dl, dl.polls {
	overflow: visible;
}

ul.forums {
	background: none;
}

/* === END LAYOUT RULES ====================================================== */

/* Forum row visual styling (colors, borders) on top of layout */
ul.topiclist li.row {
	background: var(--bg-surface) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	transition: background 0.15s;
	position: relative;
}
ul.topiclist li.row:hover {
	background: var(--bg-elevated) !important;
}
ul.topiclist li.row:nth-child(even) {
	background: var(--bg-row-alt) !important;
}
ul.topiclist li.row:nth-child(even):hover {
	background: var(--bg-elevated) !important;
}

ul.topiclist li.row dd {
	border-left-color: var(--border-subtle) !important;
}

/* === FORUM ICONS — Font Awesome circles in the dt left padding =============
   The dt has padding-left: 40px reserved for the icon. We position the icon
   absolutely inside the dt via ::before on the dl.row-item. */
li.row dl.row-item {
	position: relative;
}
li.row dl.row-item::before {
	font-family: 'FontAwesome';
	position: absolute;
	z-index: 2;
}
li.row dl.row-item.forum_read::before,
li.row dl.row-item.forum_read_subforum::before {
	content: '\f111'; /* circle */
	color: var(--text-muted);
	font-size: 8px;
	top: 14px;
	left: 8px;
}
li.row dl.row-item.forum_unread::before,
li.row dl.row-item.forum_unread_subforum::before {
	content: '\f111';
	color: var(--accent-red-bright);
	font-size: 8px;
	top: 14px;
	left: 8px;
}
li.row dl.row-item.forum_read_locked::before,
li.row dl.row-item.forum_unread_locked::before {
	content: '\f023'; /* lock */
	color: var(--text-muted);
	font-size: 12px;
	top: 11px;
	left: 6px;
}

/* Forum/topic titles */
a.forumtitle,
a.topictitle {
	font-family: 'Source Serif 4', Georgia, serif !important;
	font-size: calc(15px * var(--font-scale)) !important;
	font-weight: 600;
	color: var(--text-primary) !important;
	letter-spacing: 0.005em;
	text-decoration: none;
	line-height: 1.3;
}
a.forumtitle:hover,
a.topictitle:hover {
	color: var(--accent-red-bright) !important;
	text-decoration: none;
}

/* Forum descriptions and meta — small, tight beneath title */
.topic-poster,
.responsive-show {
	color: var(--text-muted) !important;
	font-size: 11px;
	line-height: 1.4;
}
.forum-description,
.row .list-inner > br + * {
	color: var(--text-muted) !important;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 2px;
}

/* Subforum links beneath description */
.forabg dl.row-item dt .list-inner em,
.subforum a {
	font-size: 11px;
}

/* Restore stat columns coloring */
ul.topiclist dd.posts,
ul.topiclist dd.topics,
ul.topiclist dd.views {
	color: var(--text-secondary);
}

/* === POSTS (viewtopic) ====================================================
   Structure from page source:
   .post.has-profile.bg1/bg2 (outer wrapper, alternating stripes)
     .inner
       dl.postprofile          (left column: avatar, username, rank, stats)
       .postbody               (right column: content, buttons, sig, quotes)
         ul.post-buttons       (top-right: quote/thanks buttons)
         p.author.post-number  (post #)
         p.author              (username + timestamp)
         .content              (the actual post)
         .notice (#list_thanks) (thanks-given list)
         .signature            (user sig)
       .back2top               (back-to-top arrow, bottom-right) */

.post {
	background: var(--bg-surface) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: 0 !important;
	margin-bottom: 12px;
	padding: 0;
	position: relative;
	box-shadow: none !important;
	/* display: flow-root creates a block formatting context that contains
	   the floated .postprofile sidebar WITHOUT clipping descendants —
	   unlike overflow:hidden which would clip the post-actions dropdown
	   when it extends below the post. */
	display: flow-root;
}

.post > .inner {
	padding: 0;
	position: relative;
	display: flow-root;
}

/* Keep post content from blowing out the layout (long URLs etc.) without
   clipping the parent — important because the post-actions dropdown
   needs to extend OUT of .post when collapsed-and-open. */
.post .content {
	overflow-wrap: anywhere;
	word-wrap: break-word;
	min-width: 0;
}

/* When a post's responsive-menu dropdown is open, lift the entire post
   above its siblings so the dropdown can paint over the post below.
   phpBB sets aria-expanded="true" on the dropdown trigger when open, so
   we can target the post containing one. */
.post:has(.js-responsive-menu-link[aria-expanded="true"]) {
	z-index: 10;
}
/* Fallback for browsers without :has() — harmless equal z-index. */
@supports not selector(:has(*)) {
	.post { z-index: 1; }
}

.post.bg2 {
	background: var(--bg-row-alt) !important;
}

.post:hover {
	border-color: var(--border-strong) !important;
}

/* ===== Left column: author profile ===== */
dl.postprofile {
	float: left !important;
	width: 180px !important;
	background: var(--bg-base) !important;
	border-right: 1px solid var(--border-subtle) !important;
	color: var(--text-secondary);
	padding: 18px 14px !important;
	margin: 0 !important;
	min-height: 200px;
	font-size: 12px;
	box-sizing: border-box;
	overflow: hidden;
}

/* Avatar container */
dl.postprofile .avatar-container {
	text-align: center;
	margin-bottom: 10px;
	min-height: 0;
}
dl.postprofile .avatar-container img,
dl.postprofile .avatar img {
	max-width: 100% !important;
	height: auto !important;
	border: 1px solid var(--border-subtle);
	background: var(--bg-surface);
	padding: 2px;
}
dl.postprofile dt.no-avatar .avatar-container {
	display: none;
}

/* Username at top */
dl.postprofile dt {
	text-align: center;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle);
}
dl.postprofile dt a.username,
dl.postprofile dt a.username-coloured {
	font-family: 'Oswald', sans-serif !important;
	font-size: 15px !important;
	letter-spacing: 0.04em;
	color: var(--text-primary) !important;
	font-weight: 500;
	display: inline-block;
}

/* Rank label */
dl.postprofile dd.profile-rank {
	color: var(--accent-amber) !important;
	font-size: 10px !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-align: center;
	margin: 0 0 10px 0 !important;
	font-weight: 500;
}

/* Profile stat lines (Posts, Joined, Location, etc.) */
dl.postprofile dd {
	color: var(--text-muted) !important;
	font-size: 11px !important;
	margin: 3px 0 !important;
	padding: 0 !important;
	line-height: 1.5;
	word-wrap: break-word;
}
dl.postprofile dd strong {
	color: var(--text-secondary);
	font-weight: 600;
}
dl.postprofile dd a {
	color: var(--text-link);
}

/* Contact dd: keep "Contact:" label and the icon on the same line.
   phpBB renders this as <dd><strong>Contact:</strong><a><i class="icon"/></a></dd>
   sometimes with line breaks in the markup that turn into rendered breaks. */
dl.postprofile dd.profile-contact {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}
dl.postprofile dd.profile-contact strong {
	flex: 0 0 auto;
}
dl.postprofile dd.profile-contact a {
	display: inline-flex;
	align-items: center;
}
dl.postprofile dd.profile-contact i.icon,
dl.postprofile dd.profile-contact .icon {
	font-size: 14px;
	line-height: 1;
}

/* Verified badge */
.verifiedprofiles__verified {
	display: inline-block;
	background: var(--accent-red);
	color: #fff !important;
	font-size: 9px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 6px;
	margin: 4px 0;
}

/* Online indicator */
.lftsdpstprfls-icon.user-online {
	color: #44cc44 !important;
}

/* ===== Right column: post body ===== */
.postbody {
	margin-left: 180px !important;
	padding: 12px 20px 16px 20px !important;
	color: var(--text-primary);
	position: relative;
	width: auto !important;
	float: none !important;
	display: block !important;
	box-sizing: border-box;
}
/* Force the inner #post_content wrapper to not narrow things */
div[id^="post_content"] {
	width: auto !important;
	float: none !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Post title (h3) — usually hidden in middle of thread, shown only on first post.
   Padding-right to leave space for the absolutely-positioned post-buttons. */
.postbody h3.first a,
.postbody h3 a {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--text-primary) !important;
	font-weight: 500;
	text-decoration: none;
}
.postbody h3.first a:hover,
.postbody h3 a:hover {
	color: var(--accent-red-bright) !important;
}
.postbody > div > h3 {
	margin: 0 0 8px 0;
	padding: 0 280px 0 0;
}

/* Post button bar (Quote/Thanks/Report) — top-right of postbody.
   Absolutely positioned so it doesn't interfere with content text flow.

   Overflow handling is done by phpBB's NATIVE responsive-menu JS. When
   the inline button row is too wide, phpBB hides overflowing buttons
   and marks the synthetic "..." trigger (li.responsive-menu) with the
   class "visible". We hide the trigger when "visible" is absent. */

/* The "..." trigger li is ALWAYS in the DOM but phpBB adds .visible only
   when overflow is detected. Hide unless visible. */
.postbody ul.post-buttons > li.responsive-menu {
	display: none !important;
}
.postbody ul.post-buttons > li.responsive-menu.visible {
	display: inline-flex !important;
}

/* "..." overflow trigger phpBB injects. It's an <a> styled as a button. */
.postbody ul.post-buttons a.js-responsive-menu-link {
	background: var(--bg-base) !important;
	border: 1px solid var(--border-subtle) !important;
	color: var(--text-secondary) !important;
	padding: 5px 8px !important;
	min-width: 28px;
	height: 28px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 0 !important;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.15s;
}
.postbody ul.post-buttons a.js-responsive-menu-link:hover,
.postbody ul.post-buttons li.responsive-menu.visible a.js-responsive-menu-link {
	background: var(--bg-elevated) !important;
	border-color: var(--border-strong) !important;
	color: var(--text-primary) !important;
}

/* The dropdown phpBB opens from the "..." trigger.
   phpBB's dropdowns.js sets a wild negative `margin: -NNNNpx` inline-style
   when positioning the dropdown — same bug we've fixed for the username
   and Tools dropdowns. Force sane positioning. */
.postbody ul.post-buttons li.responsive-menu > .dropdown {
	left: auto !important;
	right: 0 !important;
	margin: 0 !important;
	top: calc(100% + 4px) !important;
	min-width: 200px;
	background: var(--bg-elevated);
	border: 1px solid var(--border-strong);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	z-index: 1000;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown .pointer {
	display: none !important;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	padding: 4px 0;
	margin: 0;
	list-style: none;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	color: var(--text-primary) !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 8px 16px !important;
	height: auto;
	min-width: 0;
	gap: 14px;
	box-sizing: border-box;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li:last-child a {
	border-bottom: none !important;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a:hover {
	background: var(--bg-base) !important;
	color: var(--accent-red-bright) !important;
}
/* The icon in the dropdown row sits on the right. phpBB may render either
   <i class="icon"> or <span class="sr-only"> with the icon — make sure
   icons stay visible and labels read naturally. */
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a > i.icon {
	font-size: 14px;
	flex: 0 0 auto;
	order: 2;
	margin-left: auto;
	color: var(--text-secondary);
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a:hover > i.icon {
	color: var(--accent-red-bright);
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a .sr-only {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clip: auto !important;
	overflow: visible !important;
	white-space: nowrap;
	color: inherit;
	order: 1;
	flex: 1 1 auto;
	text-align: left;
}
/* Multi-quote button: phpBB labels both regular Quote and the Multiquote
   button with sr-only text "Quote". Override for clarity in dropdown. */
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a.multiquote .sr-only {
	font-size: 0;
}
.postbody ul.post-buttons li.responsive-menu > .dropdown ul.dropdown-contents li a.multiquote .sr-only::before {
	content: 'Multi-quote';
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-block;
}

/* Only the MAIN action bar (direct child of #post_content_NNN) gets
   absolute positioning at top-right. The gfksx/thanksforposts "Clear
   Thanks List" admin button lives in a separate ul.post-buttons inside
   #list_thanks_* and has its own inline-style positioning (float: left;
   position: static) that we must not override. */
.postbody div[id^="post_content"] > ul.post-buttons {
	position: absolute !important;
	top: 12px;
	right: 16px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px;
	z-index: 3;
	max-width: calc(100% - 32px);
}
/* The nested clear-thanks UL gets reset back to inline flow. */
.postbody [id^="list_thanks"] ul.post-buttons {
	position: static !important;
	top: auto !important;
	right: auto !important;
	max-width: none !important;
	display: inline-block !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
}
.postbody ul.post-buttons li {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none !important;
}
.postbody ul.post-buttons li::before,
.postbody ul.post-buttons li::marker {
	display: none !important;
	content: none !important;
}
.postbody ul.post-buttons li a.button {
	background: var(--bg-base) !important;
	border: 1px solid var(--border-subtle) !important;
	color: var(--text-secondary) !important;
	padding: 5px 8px !important;
	min-width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 !important;
	font-size: 12px;
	transition: all 0.15s;
}
.postbody ul.post-buttons li a.button:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}

/* Post number (#16 etc.) — absolutely positioned below the buttons */
.postbody p.post-number,
.postbody p.author.post-number {
	position: absolute;
	top: 50px;
	right: 20px;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	color: var(--text-muted);
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	letter-spacing: 0.05em;
	z-index: 2;
}
.postbody p.post-number a {
	color: var(--text-muted);
	text-decoration: none;
}
.postbody p.post-number a:hover {
	color: var(--accent-red-bright);
}

/* Author line (by username » date) */
.postbody p.author {
	color: var(--text-muted);
	font-size: 12px;
	padding: 0 60px 10px 0 !important;
	margin: 0 0 14px 0 !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	display: block !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
}
.postbody p.author a {
	color: var(--text-link);
}
.postbody p.author a:hover {
	color: var(--text-link-hover);
}
.postbody p.author strong {
	color: var(--text-primary);
}
.postbody p.author time {
	color: var(--text-muted);
}
.postbody p.author .responsive-hide {
	font-weight: 400;
}

/* The actual content */
.postbody .content {
	font-size: calc(14px * var(--font-scale)) !important;
	line-height: 1.7 !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif;
	word-wrap: break-word;
	display: block !important;
	float: none !important;
	clear: none !important;
	width: auto !important;
}
/* Hide phpBB's hidden postdetails span which can interfere with layout if .hide rule missing */
.postbody .hide,
span.hide.postdetails {
	display: none !important;
}
.postbody .content br {
	line-height: 1.7;
}

/* Inline images in posts */
.postbody .content img.postimage {
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border: 1px solid var(--border-subtle);
}

/* Blockquotes (quoted replies) — slightly LIGHTER than the post, with a
   visible red accent stripe. The lighter shade makes quoted content read
   as "raised" out of the post, easier to scan than uniform dark-on-dark. */
.postbody blockquote {
	background: var(--bg-elevated) !important;
	border-left: 3px solid var(--accent-red) !important;
	border-top: 1px solid var(--border-subtle) !important;
	border-right: 1px solid var(--border-subtle) !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	margin: 8px 0 14px 0 !important;
	padding: 12px 16px !important;
	color: var(--text-secondary);
	font-size: calc(13px * var(--font-scale));
	border-radius: 0 !important;
	box-shadow: none !important;
}
.postbody blockquote cite {
	display: block;
	font-style: normal;
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-subtle);
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.04em;
}
.postbody blockquote cite a {
	color: var(--text-link);
}
.postbody blockquote cite .responsive-hide {
	color: var(--text-muted);
	margin-left: 6px;
}
.postbody blockquote blockquote {
	background: var(--bg-deep) !important;
	border-left-color: var(--border-strong) !important;
}

/* Code blocks */
.postbody .codebox {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 0 !important;
	padding: 12px !important;
	margin: 8px 0;
}
.postbody .codebox code,
.postbody .codebox pre {
	color: var(--text-primary);
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 12px;
}

/* Signature */
.signature {
	border-top: 1px solid var(--border-subtle) !important;
	color: var(--text-muted) !important;
	font-size: calc(11px * var(--font-scale)) !important;
	padding-top: 10px !important;
	margin-top: 16px !important;
	font-style: italic;
	line-height: 1.5;
	clear: both;
}
.signature a {
	color: var(--text-link);
}

/* Thanks-given notice (#list_thanksXXXX .notice) */
.postbody .notice {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	padding: 8px 12px;
	margin: 12px 0;
	font-size: 11px;
	color: var(--text-muted);
	clear: both;
}
.postbody .notice dl {
	margin: 0;
	padding: 0;
}
.postbody .notice dt {
	font-weight: 500;
	color: var(--text-secondary);
	margin-bottom: 4px;
}
.postbody .notice dd {
	margin: 0;
	padding: 0;
}
.postbody .notice dd a.username {
	color: var(--text-link);
}

/* Rating bar (thanks-for-posts extension reput stars) */
.postbody .notice dt.small {
	font-size: 11px;
}

/* Attachments */
.postbody dl.attachbox {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	padding: 10px;
	margin: 12px 0;
	clear: both;
}
.postbody dl.attachbox > dt {
	color: var(--text-muted);
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.postbody dl.attachbox dl.file {
	margin: 0;
}
.postbody dl.attachbox dl.file dt.attach-image img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--border-subtle);
	display: block;
	margin-bottom: 4px;
}
.postbody dl.attachbox dl.file dd {
	color: var(--text-muted);
	font-size: 11px;
	margin: 0;
}

/* Mention links */
.postbody .mention,
.postbody a.mention {
	color: var(--accent-red-bright) !important;
	font-weight: 500;
}

/* ===== Back-to-top arrow (bottom-right of each post) ===== */
/* phpBB places <div class="back2top"><a class="top">↑</a></div> inside each
   post — without styling, the up arrows form a vertical column down the page */
.back2top {
	position: absolute;
	bottom: 8px;
	right: 12px;
	margin: 0;
	padding: 0;
}
.back2top a.top {
	color: var(--text-muted);
	font-size: 14px;
	opacity: 0.5;
	transition: opacity 0.2s, color 0.2s;
	text-decoration: none;
}
.back2top a.top:hover {
	color: var(--accent-red-bright);
	opacity: 1;
}

/* ===== Topic title heading ===== */
h2.topic-title {
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	letter-spacing: 0.03em;
	color: var(--accent-amber);
	margin: 0 0 16px 0;
	padding: 0;
}
h2.topic-title a {
	color: var(--accent-amber);
	text-decoration: none;
}
h2.topic-title a:hover {
	color: var(--accent-red-bright);
}

/* ===== Quick reply box at bottom ===== */
#qr_postform {
	margin: 20px 0 12px 0;
}
#qr_postform .panel {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle);
}
h2.quickreply-title {
	background: var(--bg-base) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-subtle);
}
#qr_postform fieldset {
	border: none;
	padding: 12px 16px;
	margin: 0;
}
#qr_postform input[type="text"],
#qr_postform textarea,
#qr_postform .inputbox {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	padding: 6px 10px !important;
	border-radius: 0 !important;
	font-family: 'Inter', sans-serif;
	width: 100%;
	box-sizing: border-box;
}
#qr_postform textarea {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 13px;
	line-height: 1.5;
	min-height: 120px;
}
#qr_postform input[type="submit"],
#qr_postform .button1,
#qr_postform .button2 {
	background: var(--bg-base) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	padding: 8px 16px !important;
	border-radius: 0 !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
}
#qr_postform input[type="submit"]:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
#qr_postform .button1 {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
#qr_postform .button1:hover {
	background: var(--accent-red-bright) !important;
}

/* The "Display quick reply" wrapper */
#reprap {
	text-align: center;
	padding: 12px;
	margin: 16px 0;
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
}
#reprap input[type="submit"] {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	padding: 8px 16px !important;
	border-radius: 0 !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
#reprap input[type="submit"]:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}

/* ===== Who is online (bottom of viewtopic) ===== */
.stat-block.online-list {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	padding: 12px 16px;
	margin: 16px 0;
}
.stat-block.online-list h3 {
	margin: 0 0 8px 0;
	padding: 0;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	background: transparent !important;
	border: none !important;
}
.stat-block.online-list h3 a {
	color: var(--text-muted);
	text-decoration: none;
}
.stat-block.online-list p {
	color: var(--text-secondary);
	font-size: 12px;
	margin: 0;
	line-height: 1.6;
}

/* Old .author block (general — overridden above for .postbody p.author) */
.author {
	color: var(--text-muted);
	font-size: 12px;
	padding-bottom: 8px;
	margin-bottom: 12px;
}
.author a {
	color: var(--text-link);
}
.author a:hover {
	color: var(--text-link-hover);
}

/* === ACTION BAR / JUMP BOX / PAGINATION =================================== */
.action-bar {
	background: var(--bg-base) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle) !important;
	padding: 10px 14px !important;
	margin: 12px 0 !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.action-bar > .pagination {
	margin-left: auto !important;
}
.action-bar > form {
	display: inline-flex;
	align-items: center;
	margin: 0;
}
.action-bar .search-box {
	margin: 0;
}

#jumpbox { margin: 16px 0; }
#jumpbox select { min-width: 260px; }

/* ALL pagination, anywhere on the page, is horizontal flex.
   This must win over any inherited block/list styling. */
ul.pagination,
.pagination {
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	color: var(--text-secondary);
	list-style: none !important;
	margin: 8px 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 2px !important;
}
ul.pagination li,
.pagination li {
	display: inline-block !important;
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	float: none !important;
}
ul.pagination li::before,
ul.pagination li::marker,
.pagination li::before,
.pagination li::marker {
	display: none !important;
	content: none !important;
}
.pagination li a,
.pagination li span,
ul.pagination li a,
ul.pagination li span {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
	color: var(--text-secondary) !important;
	border-radius: 0 !important;
	padding: 4px 10px;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	text-shadow: none !important;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2;
}
.pagination li a:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
.pagination li.active span {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
.pagination li.ellipsis span {
	background: transparent !important;
	border: none !important;
	color: var(--text-muted) !important;
}

/* Topic-row pagination (small "Goto page" pills inside each topic row) */
ul.topiclist .pagination,
.row .pagination {
	display: inline-flex !important;
	margin: 4px 0 0 0 !important;
	font-size: 11px;
}
ul.topiclist .pagination li a,
ul.topiclist .pagination li span {
	padding: 1px 6px !important;
	font-size: 10px;
}

/* === QUOTES / CODE BLOCKS ================================================= */
blockquote {
	background: var(--bg-base) !important;
	background-image: none !important;
	border-left: 3px solid var(--accent-red) !important;
	color: var(--text-secondary);
	padding: 12px 16px !important;
	margin: 12px 0;
	font-family: 'Source Serif 4', serif;
	font-style: italic;
	border-radius: 0 !important;
}

blockquote cite {
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent-amber);
	font-style: normal;
	display: block;
	margin-bottom: 8px;
}

.codebox {
	background: #050505 !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
[data-theme="light"] .codebox {
	background: #f0ece1 !important;
}
.codebox p {
	background: var(--bg-base) !important;
	border-bottom: 1px solid var(--border-strong) !important;
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase;
	padding: 6px 12px !important;
}
.codebox code,
.codebox pre {
	color: var(--text-primary) !important;
	font-family: 'Menlo', 'Consolas', monospace !important;
	font-size: 13px !important;
	padding: 12px;
	display: block;
}

/* === RULES PANELS ========================================================= */
div.rules,
.rules {
	background: var(--bg-base) !important;
	border: 1px solid var(--border-subtle) !important;
	border-left: 3px solid var(--accent-amber) !important;
	color: var(--text-secondary);
	padding: 12px 16px !important;
	border-radius: 0 !important;
}

/* === TABS ================================================================= */
.tabs {
	border-bottom: 1px solid var(--border-strong) !important;
}
.tabs li a {
	background: var(--bg-base) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle) !important;
	border-bottom: none !important;
	color: var(--text-secondary) !important;
	border-radius: 0 !important;
	padding: 8px 16px;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.tabs li a:hover {
	color: var(--text-primary) !important;
	background: var(--bg-surface) !important;
}
.tabs li.activetab a {
	background: var(--bg-surface) !important;
	color: var(--accent-red-bright) !important;
	border-color: var(--border-strong) !important;
}

/* === TABLES =============================================================== */
.table1,
table.table1 {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
	color: var(--text-primary);
}
.table1 th,
table.table1 thead th {
	background: var(--bg-base) !important;
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--border-strong);
	padding: 10px 12px;
	text-align: left;
}
.table1 td {
	border-bottom: 1px solid var(--border-subtle);
	padding: 10px 12px;
	color: var(--text-primary);
}
.table1 tbody tr:hover {
	background: var(--bg-elevated) !important;
}

/* === GENERAL LINKS ======================================================== */
a, a:link, a:visited {
	color: var(--text-link);
	text-decoration: none;
	transition: color 0.15s;
}
a:hover, a:active {
	color: var(--text-link-hover);
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	color: var(--text-primary) !important;
	background: transparent !important;
	border-color: var(--border-subtle) !important;
}

/* === ICONS / READ INDICATORS ============================================== */
.online {
	color: var(--accent-amber) !important;
}

/* Tint default phpBB read/unread PNG icons toward the theme.
   Not perfect but works without replacing the image files. */

/* Unread topic glow — apply the drop-shadow ONLY to the file/page icon
   inside an unread row, NOT to the whole row. Putting `filter` on the
   row applied the glow to ALL descendants including rating stars and
   text, making them look fuzzy on light-background (unread) rows. */
.forum_unread > a > .icon, .forum_unread_subforum > a > .icon, .forum_unread_locked > a > .icon,
.topic_unread > a > .icon, .topic_unread_mine > a > .icon, .topic_unread_hot > a > .icon,
.topic_unread_hot_mine > a > .icon, .topic_unread_locked > a > .icon, .topic_unread_locked_mine > a > .icon,
.global_unread > a > .icon, .global_unread_mine > a > .icon, .global_unread_locked > a > .icon,
.global_unread_locked_mine > a > .icon, .announce_unread > a > .icon, .announce_unread_mine > a > .icon,
.announce_unread_locked > a > .icon, .announce_unread_locked_mine > a > .icon,
.sticky_unread > a > .icon, .sticky_unread_mine > a > .icon, .sticky_unread_locked > a > .icon,
.sticky_unread_locked_mine > a > .icon,
li.row.topic_unread a.unread > .icon, li.row.topic_unread_mine a.unread > .icon,
li.row.topic_unread_hot a.unread > .icon, li.row.topic_unread_hot_mine a.unread > .icon,
li.row.topic_unread_locked a.unread > .icon, li.row.topic_unread_locked_mine a.unread > .icon {
	filter: hue-rotate(180deg) brightness(1.25) saturate(1.2)
		drop-shadow(0 0 4px rgba(229, 62, 62, 0.5));
}
[data-theme="light"] .forum_unread > a > .icon, [data-theme="light"] .forum_unread_subforum > a > .icon, [data-theme="light"] .forum_unread_locked > a > .icon,
[data-theme="light"] .topic_unread > a > .icon, [data-theme="light"] .topic_unread_mine > a > .icon, [data-theme="light"] .topic_unread_hot > a > .icon,
[data-theme="light"] .topic_unread_hot_mine > a > .icon, [data-theme="light"] .topic_unread_locked > a > .icon, [data-theme="light"] .topic_unread_locked_mine > a > .icon,
[data-theme="light"] li.row.topic_unread a.unread > .icon, [data-theme="light"] li.row.topic_unread_mine a.unread > .icon,
[data-theme="light"] li.row.topic_unread_hot a.unread > .icon, [data-theme="light"] li.row.topic_unread_hot_mine a.unread > .icon {
	filter: drop-shadow(0 0 3px rgba(180, 30, 30, 0.45));
}

/* === STRONG UNREAD INDICATORS ============================================
   The default phpBB unread icon is too subtle. Multi-signal treatment:
   1) colored left border accent on the row
   2) bolder topic title
   3) slightly elevated row background
   The phpBB convention: any list item carrying a *_unread* class on a
   .topiclist row is unread. We target the LIs directly. */

/* The row container — phpBB wraps each topic in <li class="row [unread_class]"> */
ul.topiclist.topics > li.row {
	border-left: 3px solid transparent;
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Unread state — colored left border + lift the bg slightly */
ul.topiclist.topics > li.row:has(.topic_unread),
ul.topiclist.topics > li.row:has(.topic_unread_mine),
ul.topiclist.topics > li.row:has(.topic_unread_hot),
ul.topiclist.topics > li.row:has(.topic_unread_hot_mine),
ul.topiclist.topics > li.row:has(.topic_unread_locked),
ul.topiclist.topics > li.row:has(.topic_unread_locked_mine),
ul.topiclist.topics > li.row:has(.global_unread),
ul.topiclist.topics > li.row:has(.global_unread_mine),
ul.topiclist.topics > li.row:has(.announce_unread),
ul.topiclist.topics > li.row:has(.announce_unread_mine),
ul.topiclist.topics > li.row:has(.sticky_unread),
ul.topiclist.topics > li.row:has(.sticky_unread_mine) {
	border-left-color: var(--accent-red);
	background: var(--bg-elevated) !important;
}

/* Bolder topic title when unread */
ul.topiclist.topics > li.row:has(.topic_unread) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_unread_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_unread_hot) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_unread_hot_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_unread_locked) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_unread_locked_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.global_unread) a.topictitle,
ul.topiclist.topics > li.row:has(.global_unread_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.announce_unread) a.topictitle,
ul.topiclist.topics > li.row:has(.announce_unread_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.sticky_unread) a.topictitle,
ul.topiclist.topics > li.row:has(.sticky_unread_mine) a.topictitle {
	font-weight: 600;
	color: var(--text-primary) !important;
}

/* Read topics — muted title color so contrast against unread is obvious */
ul.topiclist.topics > li.row:has(.topic_read) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_read_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_read_hot) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_read_hot_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_read_locked) a.topictitle,
ul.topiclist.topics > li.row:has(.topic_read_locked_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.global_read) a.topictitle,
ul.topiclist.topics > li.row:has(.global_read_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.announce_read) a.topictitle,
ul.topiclist.topics > li.row:has(.announce_read_mine) a.topictitle,
ul.topiclist.topics > li.row:has(.sticky_read) a.topictitle,
ul.topiclist.topics > li.row:has(.sticky_read_mine) a.topictitle {
	font-weight: 400;
	color: var(--text-secondary);
}

/* Same treatment for forum rows on the board index (forum_unread classes) */
ul.topiclist.forums > li.row {
	border-left: 3px solid transparent;
}
ul.topiclist.forums > li.row:has(.forum_unread),
ul.topiclist.forums > li.row:has(.forum_unread_subforum),
ul.topiclist.forums > li.row:has(.forum_unread_locked) {
	border-left-color: var(--accent-red);
}
ul.topiclist.forums > li.row:has(.forum_unread) a.forumtitle,
ul.topiclist.forums > li.row:has(.forum_unread_subforum) a.forumtitle,
ul.topiclist.forums > li.row:has(.forum_unread_locked) a.forumtitle {
	font-weight: 600;
}

/*  POOFA — Forms & Buttons
    --------------------------------------------------------------
    Inputs, textareas, selects, buttons, BBCode editor.
    -------------------------------------------------------------- */

/* === BUTTONS ============================================================== */
.button,
input.button1,
input.button2,
input.button3,
button.button1,
button.button2,
a.button1,
a.button2 {
	background: var(--bg-elevated) !important;
	background-image: none !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-strong) !important;
	border-radius: 0 !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 12px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	padding: 8px 18px !important;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
	text-shadow: none !important;
	box-shadow: none !important;
}

.button:hover,
input.button1:hover,
input.button2:hover,
a.button1:hover,
a.button2:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}

/* Primary action buttons */
.button.button-primary,
.button.default-submit-action {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
	color: #fff !important;
}
.button.button-primary:hover,
.button.default-submit-action:hover {
	background: var(--accent-red-bright) !important;
	border-color: var(--accent-red-bright) !important;
}

/* Font Awesome icon class — phpBB uses 'icon' class instead of 'fa'.
   We must explicitly set the font here since parent icons.css isn't loaded. */
i.icon,
.icon,
button .icon,
a .icon,
.button > i.icon,
.button > .icon {
	font-family: 'FontAwesome' !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: inline-block;
}

.button > i.icon {
	color: inherit;
}

/* === INPUTS =============================================================== */
input.inputbox,
textarea.inputbox,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
textarea {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	padding: 8px 10px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

input.inputbox:focus,
textarea.inputbox:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--accent-red) !important;
	outline: none;
	box-shadow: 0 0 0 1px var(--accent-red) !important;
}

select {
	cursor: pointer;
	padding-right: 24px !important;
}

/* === POSTING / BBCODE EDITOR ============================================== */
#postingbox,
#message-box {
	background: var(--bg-surface);
}

#message-box textarea {
	background: var(--bg-deep) !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif !important;
	min-height: 240px;
	line-height: 1.6;
	width: 100% !important;
	box-sizing: border-box;
}

.format-buttons {
	background: var(--bg-elevated) !important;
	background-image: none !important;
	border: 1px solid var(--border-strong) !important;
	border-bottom: none !important;
	padding: 6px !important;
}

.format-buttons button,
.format-buttons input {
	background: var(--bg-base) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle) !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
	cursor: pointer;
}
.format-buttons button:hover,
.format-buttons input:hover {
	background: var(--accent-red) !important;
	border-color: var(--accent-red) !important;
}

/* === COLOR PALETTE PICKER (BBCode) ======================================== */
#colour_palette {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
}

/* === POSTING LAYOUT — smilies sidebar to the right of textarea ============
   Actual DOM: <fieldset class="fields1"> contains (in order):
     <dl> post icon
     <dl> subject
     <div id="colour_palette">
     <div id="format-buttons">    <- toolbar
     <div id="smiley-box">         <- smilies + bbcode status + topic review link
     <div id="message-box">        <- the textarea
   We float #smiley-box right at fixed width and let #message-box flow with
   margin-right to make room. At ≤900px, they stack vertically. */

/* The format buttons span full width above the textarea+smilies row */
#postform #format-buttons {
	clear: both;
	margin-bottom: 0;
}

/* Smiley sidebar — floats right with fixed width */
#postform #smiley-box,
#postform .smiley-box {
	float: right;
	width: 280px;
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
	padding: 12px !important;
	margin: 0 0 12px 12px !important;
	box-sizing: border-box;
	max-height: 520px;
	overflow-y: auto;
}

#postform #smiley-box strong {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 10px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle);
	font-weight: 500;
}

/* The .smiley-scroll inner div — let it flow naturally */
#postform .smiley-scroll {
	line-height: 1.8;
}

#postform #smiley-box a {
	display: inline-block;
	margin: 1px 2px;
	vertical-align: middle;
}

#postform #smiley-box img {
	vertical-align: middle;
	cursor: pointer;
}

/* The "View more smilies" link, BBCode is ON/OFF status, Topic review link */
#postform #smiley-box .bbcode-status {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--border-subtle);
	font-size: 11px;
	color: var(--text-muted);
	line-height: 1.6;
}
#postform #smiley-box .bbcode-status hr {
	display: none;
}
#postform #smiley-box > strong:last-child,
#postform #smiley-box > hr + strong {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-subtle);
	display: block;
}

/* Message box (textarea container) — takes remaining width via margin-right
   matching the smiley sidebar width + gap. */
#postform #message-box {
	margin-right: 304px;
	background: var(--bg-surface);
}

#postform #message-box textarea {
	background: var(--bg-deep) !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif !important;
	min-height: 320px;
	line-height: 1.6;
	width: 100% !important;
	box-sizing: border-box;
	resize: vertical;
}

/* Clear floats at the end of the fieldset so the page-flow continues
   below both the message-box and smiley-box. */
#postform fieldset.fields1::after {
	content: "";
	display: table;
	clear: both;
}

/* On narrow viewports (mobile/tablet portrait), stack vertically:
   smiley-box drops below the textarea (because source order has it first,
   but we use a different approach — un-float and full width). */
@media (max-width: 900px) {
	#postform #smiley-box,
	#postform .smiley-box {
		float: none;
		width: 100%;
		max-height: 240px;
		margin: 0 0 12px 0 !important;
	}
	#postform #message-box {
		margin-right: 0;
	}
}

/* === SMILEYS BLOCK (legacy fallback if :has() not supported) ============== */
.smiley-box {
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-subtle) !important;
}

/* === ERROR / NOTICE COLORS ================================================ */
.error { color: #f08585 !important; }
.warning { color: var(--accent-amber) !important; }
.success { color: #7fc77f !important; }
.notice { color: var(--text-secondary) !important; }

/*  POOFA — Final overrides
    --------------------------------------------------------------
    Footer, site-description hiding, anything else that needs
    to override late in the cascade.
    -------------------------------------------------------------- */

/* Hide the old phpBB site description / headerbar — we use our own header */
#site-description,
#page-header .headerbar {
	display: none !important;
}

/* === FOOTER =============================================================== */
.poofa-site-footer {
	background: var(--strip-bg);
	border-top: 1px solid var(--strip-border);
	margin-top: 32px;
	padding: 0;
	position: relative;
	background-image: none !important;
}
.poofa-site-footer::before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent-red-dark);
}

.poofa-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 28px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.poofa-footer-brand {
	font-family: 'Oswald', sans-serif;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--strip-text-strong);
}
.poofa-footer-brand .accent { color: var(--accent-red-bright); }

.poofa-footer-meta {
	font-size: 12px;
	color: var(--strip-text);
	letter-spacing: 0.05em;
	text-align: right;
}
.poofa-footer-meta a {
	color: var(--strip-text-strong);
}

.poofa-footer-links {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 28px 24px;
	text-align: center;
	font-size: 11px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.poofa-footer-links a.footer-link {
	color: var(--strip-text);
	text-decoration: none;
	padding: 0 6px;
}
.poofa-footer-links a.footer-link:hover {
	color: var(--accent-red-bright);
}
.poofa-footer-divider {
	color: var(--strip-border);
	margin: 0 4px;
}

.poofa-footer-debug {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 28px 16px;
	font-size: 10px;
	color: var(--strip-text);
	text-align: center;
	font-family: 'Menlo', 'Consolas', monospace;
}

/* === phpBB COPYRIGHT footer integration ==================================
   phpBB's CREDIT_LINE prints HTML; let it inherit our footer colors */
.poofa-footer-meta a,
.poofa-footer-meta strong {
	color: var(--strip-text-strong);
}

/* === phpBB FOOTER NAVBAR (Board index / Members / Team / Contact / etc.) ==
   phpBB inserts a <div class="navbar"><ul id="nav-footer"> block above our
   POOFA footer brand area. Style it as a horizontal nav strip. */
.poofa-site-footer .navbar {
	background: transparent;
	border-bottom: 1px solid var(--strip-border);
	margin: 0;
	padding: 0;
}
.poofa-site-footer .navbar .inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 14px 28px;
}
.poofa-site-footer #nav-footer,
.poofa-site-footer .nav-footer {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.poofa-site-footer #nav-footer li,
.poofa-site-footer .nav-footer li {
	display: inline-flex !important;
	align-items: center;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	float: none !important;
}
.poofa-site-footer #nav-footer li::before,
.poofa-site-footer #nav-footer li::marker,
.poofa-site-footer .nav-footer li::before {
	display: none !important;
	content: none !important;
}
.poofa-site-footer #nav-footer li.rightside {
	margin-left: auto !important;
}
.poofa-site-footer #nav-footer li.rightside ~ li.rightside {
	margin-left: 0 !important;
}
.poofa-site-footer #nav-footer li a,
.poofa-site-footer .nav-footer li a {
	color: var(--strip-text) !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s;
}
.poofa-site-footer #nav-footer li a:hover,
.poofa-site-footer .nav-footer li a:hover {
	color: var(--accent-red-bright) !important;
}
.poofa-site-footer #nav-footer li.breadcrumbs .crumb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.poofa-site-footer #nav-footer .icon {
	font-size: 12px;
}

/* === PHPBB ALERT / CONFIRM DIALOGS ======================================== */
/* These are JS-controlled modals — hidden by default, shown by core.js when
   an AJAX action needs confirmation. Without the parent style loaded, they
   render as empty boxes at the bottom of every page. */
#phpbb_alert,
#phpbb_confirm,
.phpbb_alert {
	display: none;
	background: var(--bg-surface) !important;
	border: 1px solid var(--border-strong) !important;
	box-shadow: var(--shadow) !important;
	color: var(--text-primary) !important;
	border-radius: 0 !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	min-width: 300px;
	max-width: 90vw;
	padding: 20px;
}
.phpbb_alert .alert_title {
	color: var(--text-primary) !important;
	font-family: 'Oswald', sans-serif !important;
	letter-spacing: 0.04em;
}

/* Darken overlay — also hidden by default */
#darkenwrapper {
	display: none;
}
.darken {
	background-color: rgba(0, 0, 0, 0.75) !important;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

/* === NOTIFICATION DROPDOWN (bell icon)  ====================================
   Bell-dropdown markup (different from Manage Notifications page):
     <li class="bg2">
       <a class="notification-block" href="...">
         <img [class="avatar"] src=... [data-src=...]>
         <div class="notification_text">
           <p class="notification-title">User <strong>has thanked</strong> ...</p>
           <p class="notification-reference">"Post title"</p>
           <p class="notification-time">timestamp</p>
         </div>
       </a>
       <a class="mark_read icon-mark">…</a>
     </li>
*/
#notification_list ul li,
.dropdown .notification_list ul li {
	background: var(--bg-surface) !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	color: var(--text-primary) !important;
	display: flex !important;
	align-items: stretch;
}
#notification_list ul li:hover,
.dropdown .notification_list ul li:hover {
	background: var(--bg-elevated) !important;
}
#notification_list ul li a,
.dropdown .notification_list ul li a {
	color: var(--text-primary) !important;
}

/* Notification-block (main content row) takes the remaining width. */
#notification_list ul li > a.notification-block,
.dropdown .notification_list ul li > a.notification-block {
	flex: 1 1 auto;
	min-width: 0;
}

/* Standalone mark_read pill — fixed-width column on the right. */
#notification_list ul li > a.mark_read,
.dropdown .notification_list ul li > a.mark_read {
	flex: 0 0 36px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--text-muted) !important;
	border-left: 1px solid var(--border-subtle);
}
#notification_list ul li > a.mark_read:hover,
.dropdown .notification_list ul li > a.mark_read:hover {
	background: var(--bg-base);
	color: var(--accent-red-bright, #c93434) !important;
}

/* Header strip — "Notifications • Settings • Mark all read" */
#notification_list .header,
.dropdown .notification_list .header {
	background: var(--bg-base) !important;
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase;
	font-weight: 500 !important;
	border-bottom: 1px solid var(--border-strong) !important;
}

/* Notification-block: avatar + text + mark-read pill in a row. */
.notification_list .notification-block {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px !important;
}
.notification_list .notification-block > img.avatar {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--border-subtle);
	background: var(--bg-deep);
	margin: 0;
}
.notification_list .notification-block > img:not(.avatar) {
	width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px;
	visibility: hidden;
	margin: 0;
}
.notification_list .notification_text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Title line — "User has thanked you for this post:" */
.notification_list .notification-title {
	margin: 0 0 2px 0 !important;
	font-size: 12px !important;
	color: var(--text-primary) !important;
	font-weight: 400 !important;
	line-height: 1.4;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-family: inherit !important;
	background: transparent !important;
}
.notification_list .notification-title strong {
	font-weight: 600;
	color: var(--text-secondary);
}
.notification_list .notification-title .username {
	color: var(--accent-red-bright, #c93434);
	font-weight: 500;
}

/* Reference line — the actual post title in quotes */
.notification_list .notification-reference {
	margin: 0 0 4px 0 !important;
	font-size: 12px !important;
	color: var(--text-primary) !important;
	font-weight: 500;
	line-height: 1.4;
	font-style: italic;
	background: transparent !important;
}

/* Timestamp */
.notification_list .notification-time {
	margin: 0 !important;
	font-size: 10px !important;
	color: var(--text-muted) !important;
	letter-spacing: 0.02em;
	background: transparent !important;
}

/* Make sure dropdown-extended (notifications) inherits dropdown styling */
.dropdown-extended {
	background: var(--dropdown-bg) !important;
	border: 1px solid var(--border-strong) !important;
}

/* === FORUM ROW ICONS column alignment ===================================== */
li.row dl.icon {
	background-position: 8px 50% !important;
}

/* === USER CONTROL PANEL (UCP) ============================================= */
/* Actual phpBB structure (verified from page source):
   .panel.bg3 > .inner > div
     #cp-menu          (left sidebar, contains nav + legend)
       #navigation     (menu items)
       .cp-mini        (message colors legend with dl.mini > dt + dd.pm-legend)
     #cp-main          (right-side content) */

/* Left sidebar container — float left, fixed width */
#cp-menu {
	float: left;
	width: 220px;
	margin: 0 24px 16px 0;
}

/* The right-side main content */
#cp-main {
	overflow: hidden;  /* prevents content wrapping under floated sidebar */
}

/* Navigation menu (Compose / Drafts / Inbox / Outbox / etc.) */
#navigation {
	margin: 0 0 12px 0;
	padding: 0;
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
}
#navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#navigation hr {
	border: none;
	border-top: 1px solid var(--border-strong);
	margin: 0;
}
#navigation li {
	display: block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-bottom: 1px solid var(--border-subtle);
}
#navigation li::before,
#navigation li::marker {
	display: none !important;
	content: none !important;
}
#navigation li:last-child {
	border-bottom: none;
}
#navigation li a {
	display: block !important;
	padding: 10px 16px !important;
	color: var(--text-secondary) !important;
	text-decoration: none;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px;
	background: transparent !important;
	transition: background 0.12s, color 0.12s;
}
#navigation li a:hover {
	background: var(--bg-elevated) !important;
	color: var(--text-primary) !important;
}
#navigation li.active-subsection a,
#navigation li#active-subsection a {
	background: var(--accent-red) !important;
	color: #fff !important;
	font-weight: 500;
}
#navigation li.active-subsection a strong,
#navigation li#active-subsection a strong {
	color: #fff !important;
	font-weight: 600;
}

/* Message colors legend — sits below the nav menu inside #cp-menu */
.cp-mini {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	padding: 0;
	margin: 0;
}
.cp-mini .inner {
	padding: 10px 12px;
}
.cp-mini dl.mini {
	margin: 0;
	padding: 0;
}
.cp-mini dl.mini dt {
	display: block;
	color: var(--text-muted);
	font-family: 'Oswald', sans-serif;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-subtle);
}
.cp-mini dl.mini dd {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 4px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--text-secondary) !important;
	font-size: 11px !important;
	font-family: 'Inter', sans-serif !important;
}
.cp-mini dl.mini dd::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid var(--border-strong);
	background: var(--text-muted);
	flex-shrink: 0;
}
/* The colored swatches — replaces the broken imageset span */
.cp-mini dl.mini dd .imageset {
	display: none !important;
}
.cp-mini dd.pm_message_reported_colour::before { background: #BC2A4D; }
.cp-mini dd.pm_marked_colour::before { background: #FF6600; }
.cp-mini dd.pm_replied_colour::before { background: #A9B8C2; }
.cp-mini dd.pm_friend_colour::before { background: #5D8FBD; }
.cp-mini dd.pm_foe_colour::before { background: #000000; }

/* UCP page title */
h2.ucp-title {
	color: var(--text-primary);
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	letter-spacing: 0.04em;
	margin: 0 0 16px 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* Tab bar (Overview / Profile / Private messages / etc.) */
#tabs,
.tabs {
	clear: both;
	margin: 0 0 16px 0;
	padding: 0;
	border-bottom: 1px solid var(--border-strong);
	background: transparent !important;
	min-height: auto;
	height: auto;
}
#tabs ul,
.tabs ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 2px;
	background: transparent !important;
}
#tabs li,
.tabs li {
	display: inline-block !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	float: none !important;
}
#tabs li::before,
.tabs li::before {
	display: none !important;
	content: none !important;
}
#tabs li a,
.tabs li a {
	display: inline-block !important;
	padding: 10px 18px !important;
	background: var(--bg-base) !important;
	border: 1px solid var(--border-subtle) !important;
	border-bottom: none !important;
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 12px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	margin-bottom: -1px !important;
	transition: all 0.15s;
}
#tabs li a:hover,
.tabs li a:hover {
	background: var(--bg-elevated) !important;
	color: var(--text-primary) !important;
}
#tabs li.activetab a,
.tabs li.activetab a {
	background: var(--bg-surface) !important;
	color: var(--accent-red-bright) !important;
	border-bottom: 1px solid var(--bg-surface) !important;
	font-weight: 600;
}

/* The outer wrapper .panel.bg3 in UCP should be invisible — just a container */
.section-ucp #page-body > .panel.bg3 {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.section-ucp #page-body > .panel.bg3 > .inner {
	padding: 0 !important;
}

/* Inner panels inside #cp-main (e.g. the message list panel) */
#cp-main h2 {
	background: var(--bg-base) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 14px;
	letter-spacing: 0.08em;
	border: 1px solid var(--border-subtle);
	border-bottom: none;
}
#cp-main .panel {
	background: var(--bg-surface) !important;
	background-image: none !important;
	border: 1px solid var(--border-subtle);
	margin: 0 0 12px 0;
	padding: 0;
}
#cp-main .panel .inner {
	padding: 14px 18px;
}

/* Message list table inside UCP */
#cp-main .topiclist.cplist,
#cp-main .topiclist.pmlist {
	background: var(--bg-surface);
	border-top: 1px solid var(--border-subtle);
}
#cp-main .topiclist.cplist li.row,
#cp-main .topiclist.pmlist li.row {
	background: var(--bg-surface) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--border-subtle);
}
#cp-main .topiclist.cplist li.row:hover {
	background: var(--bg-elevated) !important;
}
#cp-main .topiclist > li.header dl {
	background: var(--bg-base) !important;
}
#cp-main .topiclist > li.header dt,
#cp-main .topiclist > li.header dd {
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
}
#cp-main .topiclist.two-columns > li.header dl,
#cp-main .topiclist.two-columns li.row dl {
	display: table;
	width: 100%;
}
#cp-main .topiclist.two-columns dt {
	display: table-cell;
	vertical-align: top;
	padding: 10px 14px;
}
#cp-main .topiclist.two-columns dd.mark {
	display: table-cell;
	vertical-align: middle;
	width: 60px;
	text-align: center;
}

/* === PRIVATE MESSAGE LIST (ucp_pm_viewfolder) ============================
   Actual row structure:
     <li class="row"><dl class="row-item"><dt>
       <div class="list-inner">
         <a class="topictitle">Re: interviews</a>
         <br />
         by <a class="username">Machine3</a> &raquo; <date text>
       </div>
     </dt><dd class="mark">checkbox</dd></dl></li>
   The "by ... » date" is bare text directly in .list-inner (no wrapper),
   separated by a literal <br>. We make the whole .list-inner a block,
   put the subject on its own line, and style the trailing author/date
   text as a muted line. */

#cp-main .topiclist.pmlist .list-inner {
	display: block;
	padding: 8px 0;
	line-height: 1.5;
	font-size: 12px;
	color: var(--text-muted);
}
/* Subject link on its own line. */
#cp-main .topiclist.pmlist .list-inner > a.topictitle {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 2px 0;
	text-decoration: none;
	line-height: 1.3;
}
#cp-main .topiclist.pmlist .list-inner > a.topictitle:hover {
	color: var(--accent-red-bright);
}
/* The <br> after the subject is redundant now that the subject is block;
   collapse it so it doesn't add an extra empty line. */
#cp-main .topiclist.pmlist .list-inner > br {
	display: none;
}
/* Author link in the trailing "by X » date" text. Inherit the muted
   line's size; just color the name. */
#cp-main .topiclist.pmlist .list-inner a.username,
#cp-main .topiclist.pmlist .list-inner a.username-coloured {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
}
#cp-main .topiclist.pmlist .list-inner a.username:hover,
#cp-main .topiclist.pmlist .list-inner a.username-coloured:hover {
	color: var(--accent-red-bright);
}

/* === MANAGE NOTIFICATIONS PAGE ============================================
   The ucp_notifications page renders each row as:
     <li class="row bg1|bg2|bg3">
       <dl><dt><div class="list-inner">
         <img [class="avatar"] src=... [data-src=...]>   ← user avatar
         <div class="notifications">
           <a><p class="notifications_title">
             [<span class="username">User</span>...]
             <strong>has thanked|Quoted|Reply|Private Message</strong>
             you for this post: "Post Title"
           </p></a>
           <p class="notifications_time">...</p>
         </div>
       </div></dt><dd class="mark">checkbox</dd></dl>
     </li>

   Goals: (1) Constrain avatar to a fixed small square so 150x150 source
   images don't blow up row height. (2) Color-code the action verb so
   thanks reads as background noise, Quoted/Reply read as more important,
   and Private Message stands out. (3) Tighten vertical rhythm. */

#cp-main .topiclist.cplist .list-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 4px 0;
}

/* Avatar / no-avatar handling.
   - When the user HAS an avatar: <img class="avatar" src="no_avatar.gif"
     data-src="actual_url"> — JS in overall_footer.html swaps src←data-src.
     We constrain to fixed 40x40.
   - When the user has NO avatar: <img src="no_avatar.gif" alt=""> with no
     class. Rather than showing the placeholder silhouette, hide it
     entirely and replace with a small empty spacer so column alignment
     stays consistent. */
#cp-main .topiclist.cplist .list-inner > img.avatar {
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 40px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid var(--border-subtle);
	background: var(--bg-deep);
	margin: 0;
}

/* No-avatar placeholder — hide the broken/silhouette image entirely
   but preserve the column space so text aligns with avatar rows. */
#cp-main .topiclist.cplist .list-inner > img:not(.avatar) {
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 40px;
	visibility: hidden;
	margin: 0;
}

#cp-main .topiclist.cplist .notifications {
	flex: 1 1 auto;
	min-width: 0;
}

#cp-main .topiclist.cplist .notifications a {
	color: var(--text-primary) !important;
	text-decoration: none;
}
#cp-main .topiclist.cplist .notifications a:hover .notifications_title {
	color: var(--accent-red-bright, #c93434);
}

#cp-main .topiclist.cplist .notifications_title {
	margin: 0 0 4px 0;
	color: var(--text-primary);
	font-size: 14px;
	line-height: 1.45;
	background: transparent !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	font-weight: 400 !important;
}

/* Action verb — the <strong> tag. Muted by default; specific keywords
   are recolored below. */
#cp-main .topiclist.cplist .notifications_title strong {
	font-weight: 600;
	color: var(--text-secondary);
}

/* Username chip — POOFA-red so the eye lands on WHO did the thing. */
#cp-main .topiclist.cplist .notifications_title .username {
	color: var(--accent-red-bright, #c93434);
	font-weight: 500;
}

/* Timestamp — small, muted, on its own line. */
#cp-main .topiclist.cplist .notifications_time {
	margin: 0;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
	background: transparent !important;
}

/* Read row dimming: when checkbox is disabled="disabled" the row is
   already read. Use :has() (modern browsers) to drop opacity on those. */
#cp-main .topiclist.cplist li.row:has(input[type="checkbox"][disabled]) .notifications_title,
#cp-main .topiclist.cplist li.row:has(input[type="checkbox"][disabled]) .notifications_time {
	opacity: 0.6;
}
#cp-main .topiclist.cplist li.row:has(input[type="checkbox"][disabled]) .list-inner > img {
	opacity: 0.4;
}

/* Mark-read checkbox column — slightly more breathing room. */
#cp-main .topiclist.cplist dd.mark {
	width: 80px !important;
}
#cp-main .topiclist.cplist dd.mark input[type="checkbox"] {
	margin: 0 6px 0 0;
	cursor: pointer;
}
#cp-main .topiclist.cplist dd.mark dfn {
	display: none; /* "Mark read" label is in the column header already */
}

/* Action bar (export, mark options) */
#cp-main fieldset.display-actions {
	background: var(--bg-base);
	border: 1px solid var(--border-subtle);
	padding: 12px 18px;
	margin: 12px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
#cp-main fieldset.display-actions select,
#cp-main fieldset.display-actions input[type="submit"] {
	background: var(--bg-deep) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-strong) !important;
	padding: 6px 10px !important;
	border-radius: 0 !important;
}

/* Forms inside UCP */
#cp-main select,
#cp-main input[type="text"],
#cp-main input[type="email"],
#cp-main input[type="password"],
#cp-main textarea {
	background: var(--bg-deep) !important;
	border: 1px solid var(--border-strong) !important;
	color: var(--text-primary) !important;
	font-family: 'Inter', sans-serif !important;
	padding: 6px 10px !important;
	border-radius: 0 !important;
}

/* === END UCP ============================================================== */

/* === MEMBERLIST / TEAM PAGE =============================================== */
/* The Team page uses .forabg/.topiclist structure with username + rank
   stacked in the first column. Without proper spacing, they concatenate. */

.section-memberlist .forabg,
.section-memberlist .forumbg {
	margin-bottom: 16px;
}

/* The team page header bar shows the group name */
.section-memberlist ul.topiclist > li.header dl.row-item dt,
.section-memberlist ul.topiclist > li.header dt {
	color: var(--accent-amber) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	font-weight: 600;
}

/* User rows on team page — separate rank from username.
   phpBB outputs the rank label and user's name in the same cell with
   no visible separator. We force a line break by making the username
   anchor block-level inside the dt, so rank appears above on its own line. */
.section-memberlist .row dl.row-item dt {
	padding: 10px 14px !important;
}
.section-memberlist .row dl.row-item dt .list-inner {
	padding: 0;
	line-height: 1.5;
}
/* The username anchor — give it its own line below the rank */
.section-memberlist .row dl.row-item dt a.username,
.section-memberlist .row dl.row-item dt a.username-coloured {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-top: 2px;
}
/* Any rank labels/spans in the dt — small amber Oswald above the username */
.section-memberlist .row dl.row-item dt .rank,
.section-memberlist .row dl.row-item dt span.rank,
.section-memberlist .row dl.row-item dt strong.rank {
	display: block;
	color: var(--accent-amber);
	font-family: 'Oswald', sans-serif;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
}

/* Fallback: if rank is just plain text inside dt with no semantic wrapper,
   insert a visible space between adjacent inline children. */
.section-memberlist .row dl.row-item dt > * + a.username,
.section-memberlist .row dl.row-item dt > * + a.username-coloured {
	margin-left: 8px;
}
.section-memberlist .row dl.row-item dt .list-inner > a.username::before,
.section-memberlist .row dl.row-item dt .list-inner > a.username-coloured::before {
	content: " — ";
	color: var(--text-muted);
	font-weight: normal;
	margin: 0 4px;
}

/* Right-side columns (Primary group, Moderator forums) */
.section-memberlist .row dl.row-item dd {
	padding: 10px 14px !important;
	vertical-align: middle;
	color: var(--text-secondary);
	font-size: 13px;
}
.section-memberlist ul.topiclist > li.header dd {
	color: var(--text-muted) !important;
	font-family: 'Oswald', sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
}

/* === MEMBER PROFILE PAGE (memberlist.php?mode=viewprofile) ================
   DOM:
     <form id="viewprofile">
       <div class="panel bg1"><div class="inner">
         <dl class="left-box">                          <- avatar block
           <dt class="profile-avatar"><img class="avatar"></dt>
           <dd>Member</dd>
         </dl>
         <dl class="left-box details profile-details">  <- username/age/groups/loc/zebra
           <dt>Username:</dt><dd>...</dd>
           ...
         </dl>
       </div></div>
       <div class="panel bg2"><div class="inner">
         <div class="column1">Contact <dl class="details">...</dl></div>
         <div class="column2">User statistics <dl class="details">...</dl></div>
       </div></div>
     </form>
     <div class="panel bg1"><div class="inner">    <- Thanks list
       <h3>Thanks list</h3>
       <div class="column1">...</div><div class="column2">...</div>
     </div></div>
*/

/* Page title */
.memberlist-title {
	font-family: 'Oswald', sans-serif;
	font-size: 22px;
	font-weight: 500;
	color: var(--text-primary);
	margin: 0 0 16px 0;
	padding: 0;
	border: none;
	background: none;
}

/* The top panel: avatar block left, details block flowing next to it */
#viewprofile > .panel > .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	padding: 18px 22px !important;
}
#viewprofile dl.left-box {
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto;
	min-width: 0;
}
/* Avatar block (first dl.left-box, with profile-avatar class on dt) */
#viewprofile dl.left-box:first-child {
	flex: 0 0 140px;
	text-align: center;
}
#viewprofile dl.left-box .profile-avatar img.avatar {
	max-width: 120px;
	max-height: 120px;
	border: 1px solid var(--border-subtle);
	padding: 4px;
	background: var(--bg-deep);
}
#viewprofile dl.left-box dd {
	color: var(--text-muted);
	font-size: 12px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 8px;
	text-align: center !important;
}

/* Details block (Username, Age, Groups, Location, zebra) — flex to fill */
#viewprofile dl.left-box.details.profile-details,
#viewprofile dl.profile-details {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 18px;
	align-items: baseline;
}
#viewprofile dl.profile-details dt {
	color: var(--text-muted);
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
	padding: 0;
	text-align: right;
}
#viewprofile dl.profile-details dd {
	color: var(--text-primary);
	font-size: 14px;
	margin: 0;
	padding: 0;
	text-align: left !important;
}
#viewprofile dl.profile-details dd.zebra {
	text-align: left !important;
}
#viewprofile dl.profile-details dd.zebra a {
	color: var(--text-link);
}
#viewprofile dl.profile-details dt:has(+ dd.zebra),
#viewprofile dl.profile-details dd.zebra + dt {
	/* Hide the &nbsp; dt placeholders before Add friend/foe rows */
}
#viewprofile dl.profile-details select,
#viewprofile dl.profile-details input.button2 {
	background: var(--bg-deep) !important;
	color: var(--text-primary) !important;
	border: 1px solid var(--border-strong) !important;
	padding: 4px 8px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	cursor: pointer;
}
#viewprofile dl.profile-details input.button2 {
	background: var(--bg-elevated) !important;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 14px;
}

/* The two-column panel: Contact + User Statistics */
#viewprofile .panel.bg2 > .inner,
.panel:has(> .inner > .column1) > .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 18px 22px !important;
}
#viewprofile .column1,
#viewprofile .column2,
.panel > .inner > .column1,
.panel > .inner > .column2 {
	flex: 1 1 calc(50% - 14px);
	min-width: 0;
	float: none !important;
	width: auto !important;
}
#viewprofile .column1 h3,
#viewprofile .column2 h3,
.panel .column1 > h3,
.panel .column2 > h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 12px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle);
}

/* Column dl: 30/70 split — label right-aligned in narrow column, value
   left-aligned in wider column. Each row reads as a labeled field. */
#viewprofile .column1 dl.details,
#viewprofile .column2 dl.details {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 10px 18px;
	align-items: baseline;
}
#viewprofile .column1 dl.details dt,
#viewprofile .column2 dl.details dt {
	color: var(--text-muted);
	font-family: 'Oswald', sans-serif;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: 400;
}
#viewprofile .column1 dl.details dd,
#viewprofile .column2 dl.details dd {
	color: var(--text-primary);
	font-size: 13px;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
#viewprofile .column1 dl.details dd a,
#viewprofile .column2 dl.details dd a {
	color: var(--text-link);
}

/* Thanks list panel (separate, after the form) */
.section-memberlist #page-body > .panel > .inner > h3,
.panel:has(> .inner > h3 + .column1) > .inner > h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 16px 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border-subtle);
}
/* Force 50/50 columns side-by-side, not stacking. We use grid here for
   stricter behavior than flex — grid won't let columns wrap to a new row.
   The :has() selector ensures we only target panels that actually contain
   column1/column2 (Thanks list), not signature panels. */
.section-memberlist #page-body > .panel:has(> .inner > .column1) > .inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
	padding: 18px 22px !important;
}
.section-memberlist #page-body > .panel:has(> .inner > .column1) > .inner > h3 {
	grid-column: 1 / -1;
}
/* Signature panel (no .column1) gets normal padding only */
.section-memberlist #page-body > .panel:not(:has(> .inner > .column1)) > .inner {
	padding: 18px 22px !important;
}
.section-memberlist #page-body > .panel > .inner > h3.first,
.section-memberlist #page-body > .panel > .inner > h3 {
	margin-top: 0;
}
/* Signature postbody styling */
.section-memberlist #page-body > .panel > .inner > .postbody {
	margin-top: 4px;
}
.section-memberlist #page-body > .panel > .inner > .postbody .signature {
	color: var(--text-secondary);
	font-style: italic;
	font-size: 13px;
	line-height: 1.5;
	border-left: 2px solid var(--border-subtle);
	padding-left: 12px;
	margin: 0;
}
.section-memberlist #page-body > .panel > .inner > .column1,
.section-memberlist #page-body > .panel > .inner > .column2 {
	float: none !important;
	width: auto !important;
	min-width: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	align-items: start;
}
/* The dl inside — single-row layout: X-button-cell + dl-cell */
.section-memberlist #page-body > .panel > .inner > .column1 > dl,
.section-memberlist #page-body > .panel > .inner > .column2 > dl {
	margin: 0;
	padding: 0;
	grid-column: 2;
	min-width: 0;
}
/* When no X button (regular users), the dl spans both cells */
.section-memberlist #page-body > .panel > .inner > .column1 > dl:first-child,
.section-memberlist #page-body > .panel > .inner > .column2 > dl:first-child {
	grid-column: 1 / -1;
}
.section-memberlist #page-body > .panel > .inner > .column1 dt,
.section-memberlist #page-body > .panel > .inner > .column2 dt {
	color: var(--text-secondary);
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 4px 0;
	padding: 0;
}
.section-memberlist #page-body > .panel > .inner > .column1 dd,
.section-memberlist #page-body > .panel > .inner > .column2 dd {
	margin: 0;
	padding: 0;
}
.section-memberlist #page-body > .panel > .inner > .column1 dd > a,
.section-memberlist #page-body > .panel > .inner > .column2 dd > a {
	color: var(--text-link);
	font-size: 12px;
}

/* The "Clear Thanks List" X button — admin-only, sits in first grid cell */
.section-memberlist .panel ul.post-buttons {
	float: none !important;
	display: inline-flex;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	grid-column: 1;
	align-self: start;
}
.section-memberlist .panel ul.post-buttons li {
	display: inline-block;
	list-style: none;
}
.section-memberlist .panel ul.post-buttons li a {
	float: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	color: var(--accent-red) !important;
}
.section-memberlist .panel ul.post-buttons li a:hover {
	background: var(--accent-red);
	border-color: var(--accent-red);
	color: #fff !important;
}

/* Hide the expanded thanks list (the long username dump) — it's normally
   collapsed via JS but if it's open and contains messy float:left spans,
   contain it within the column so it doesn't blow out the layout. */
.section-memberlist #page-body > .panel #show_thanks,
.section-memberlist #page-body > .panel #show_thanked {
	max-width: 100%;
	overflow: hidden;
	margin-top: 8px;
}
.section-memberlist #page-body > .panel #show_thanks > span,
.section-memberlist #page-body > .panel #show_thanked > span {
	float: none !important;
	display: block !important;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.6;
}

/* === MOBILE: stack the profile columns vertically =========================
   The mobile @media block at the end of file will pick this up — but we
   need profile-specific overrides for the flex/grid layouts.  Add these
   to the existing mobile block via the section-memberlist scope. */

/* phpBB's .hide utility — fully hides elements that shouldn't render */
.hide {
	display: none !important;
}
/* Screen-reader-only text — visually hidden but still accessible */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.sep {
	color: var(--text-muted) !important;
}

.text-strong { color: var(--text-primary) !important; }

/* Ensure phpBB's stylesheet.css selectors that rely on background colors
   don't fight ours — kill background images on common containers */
#page-header,
#page-header .headerbar,
.navbar {
	background-image: none !important;
}

/* === MOBILE LAYOUT — hide stat columns, keep just title+description =======
   Parent Prosilver CSS isn't loaded reliably, so we have to provide our own
   mobile breakpoints. At ≤700px, we hide stat columns entirely rather than
   trying to reflow them — gives a clean single-column list. */
@media (max-width: 800px) {
	/* Hide the Topics / Posts / Views / Last Post stat columns entirely on mobile.
	   The forum list collapses to just the title + description + icon column. */
	ul.topiclist dd.topics,
	ul.topiclist dd.posts,
	ul.topiclist dd.views,
	ul.topiclist dd.lastpost,
	ul.topiclist dd.mark,
	ul.topiclist dd.info,
	ul.topiclist dd.redirect {
		display: none !important;
	}
	/* Hide the column header row (FORUM / TOPICS / POSTS / LAST POST) */
	ul.topiclist li.header {
		display: none !important;
	}
	/* Force the row's <dl> back to block so the dt takes full width */
	ul.topiclist li.row dl {
		display: block !important;
		width: 100% !important;
	}
	ul.topiclist dt {
		display: block !important;
		width: auto !important;
		padding: 10px 12px 10px 38px !important;
	}
	/* Forum icons (left dot) keep their absolute position but adjusted */
	ul.topiclist li.row dl > dt::before,
	ul.topiclist li.row dl.icon::before {
		left: 12px !important;
		top: 14px !important;
	}

	/* Posts (viewtopic): stack postprofile above postbody */
	.post > .inner {
		display: block;
	}
	dl.postprofile {
		float: none !important;
		width: 100% !important;
		min-height: 0 !important;
		border-right: none !important;
		border-bottom: 1px solid var(--border-subtle) !important;
		padding: 10px 14px !important;
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		align-items: center;
	}
	dl.postprofile .avatar-container {
		flex: 0 0 auto;
		margin: 0 !important;
		text-align: left;
	}
	dl.postprofile .avatar-container img,
	dl.postprofile .avatar img {
		max-width: 40px !important;
		max-height: 40px !important;
	}
	dl.postprofile dt {
		text-align: left !important;
		border-bottom: none !important;
		padding-bottom: 0 !important;
		margin: 0 !important;
		flex: 1 1 auto;
	}
	dl.postprofile dd {
		font-size: 10px !important;
		margin: 0 !important;
	}
	dl.postprofile dd.profile-rank {
		text-align: left !important;
		font-size: 9px !important;
		margin: 0 !important;
	}
	/* Hide secondary stats on mobile to save vertical space */
	dl.postprofile dd.profile-joined,
	dl.postprofile dd.profile-custom-field,
	dl.postprofile dd[data-user-give-id],
	dl.postprofile dd[data-user-receive-id] {
		display: none;
	}
	.postbody {
		margin-left: 0 !important;
		padding: 12px 14px !important;
	}
	/* Mobile: main post-buttons switch from absolute top-right to a static
	   row that flows below the title. Wraps to multiple lines if needed.
	   Clear-thanks UL keeps its own inline-styled placement. */
	.postbody div[id^="post_content"] > ul.post-buttons {
		position: static !important;
		top: auto !important;
		right: auto !important;
		max-width: 100%;
		margin: 4px 0 8px 0 !important;
		justify-content: flex-start;
	}
	.postbody p.post-number,
	.postbody p.author.post-number {
		position: static !important;
		top: auto !important;
		right: auto !important;
		margin: 0 0 4px 0 !important;
	}
	.postbody > div > h3 {
		padding-right: 0;
	}

	/* UCP: stack sidebar above content */
	#cp-menu {
		float: none !important;
		width: 100% !important;
		margin: 0 0 16px 0 !important;
	}
	.section-ucp #page-body .panel,
	.section-ucp #page-body > h2,
	.section-ucp #page-body > h3 {
		margin-left: 0 !important;
	}
	.pm-legend,
	.cp-mini {
		margin: 0 0 12px 0 !important;
	}

	/* Tab bar wraps */
	#tabs li a,
	.tabs li a {
		padding: 8px 12px !important;
		font-size: 11px !important;
	}

	/* Action bar — wrap buttons on tight rows */
	.action-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.action-bar > .pagination {
		margin-left: 0 !important;
	}

	/* Pagination buttons smaller on mobile */
	.pagination li a,
	.pagination li span {
		padding: 4px 8px;
		font-size: 11px;
	}

	/* Page body padding tighter */
	#page-body {
		padding: 0 12px 24px !important;
	}
	.poofa-content-wrap {
		padding: 8px 12px 0;
	}

	/* Forum bar items tighter — hide labels, keep icons + badges */
	.poofa-forum-bar-inner {
		padding: 0 12px;
	}
	.poofa-forum-bar #nav-main > li > a > span:not(.sr-only):not(.badge) {
		display: none;
	}
	.poofa-forum-bar #nav-main > li > a .badge {
		display: inline-block;
	}
	.poofa-forum-bar #username_logged_in > .header-profile > a span.username {
		display: inline !important;
	}

	/* Member profile page — stack columns on mobile */
	#viewprofile > .panel > .inner {
		flex-direction: column;
	}
	#viewprofile dl.left-box:first-child {
		flex: 1 1 100%;
		text-align: center;
		width: 100%;
	}
	#viewprofile dl.left-box.details.profile-details,
	#viewprofile dl.profile-details {
		grid-template-columns: max-content 1fr;
		gap: 6px 14px;
		width: 100%;
	}
	#viewprofile .panel.bg2 > .inner {
		flex-direction: column;
	}
	#viewprofile .column1,
	#viewprofile .column2 {
		flex: 1 1 100%;
	}
	/* Thanks list: stack columns vertically on mobile */
	.section-memberlist #page-body > .panel:has(> .inner > .column1) > .inner {
		grid-template-columns: 1fr;
	}
}