/* ==========================================================================
   Vespera 2.6 — evening / dusk theme (vesper = evening star)
   Night canvas · amber sunset copper · moonlight teal · soft sticky chrome
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Outfit:wght@400;500;600;700&display=swap");

:root {
	/* Light text on dusk surfaces — evening star (less mint, more indigo + sunset) */
	--vs-ink: #e6edf7;
	--vs-ink-soft: #c4d0de;
	--vs-teal: #6a9eb0;          /* moonlight lagoon (blue-teal, not mint) */
	--vs-teal-deep: #3d6f7e;
	--vs-teal-soft: #8bb4c4;
	--vs-copper: #d4a06a;         /* sunset amber */
	--vs-copper-hot: #e8bc84;
	--vs-stone: #1b2433;
	--vs-paper: #0b1018;
	--vs-surface: #141c28;
	--vs-row-alt: #111824;
	--vs-line: rgba(230, 237, 247, 0.10);
	--vs-muted: #8e9aab;
	--vs-text: #d5deea;
	--vs-radius: 16px;
	--vs-radius-sm: 10px;
	--vs-radius-pill: 999px;
	--vs-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
	--vs-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.32);
	--vs-elev-1: 0 2px 10px rgba(0, 0, 0, 0.32);
	--vs-elev-2: 0 10px 28px rgba(0, 0, 0, 0.45);
	--vs-accent-grad: linear-gradient(135deg, var(--vs-teal) 0%, color-mix(in srgb, var(--vs-teal) 70%, var(--vs-teal-deep)) 55%, var(--vs-teal-deep) 100%);
	--vs-accent-bar: linear-gradient(90deg, var(--vs-teal) 0%, var(--vs-copper) 52%, transparent 100%);
	--vs-copper-grad: linear-gradient(135deg, var(--vs-copper-hot), var(--vs-copper));
	/* Category strip — indigo night → soft dusk lagoon */
	--vs-cat-grad: linear-gradient(118deg, #080c14 0%, #1a2034 46%, color-mix(in srgb, var(--vs-teal-deep) 42%, #12182a) 100%);
	--vs-teal-a04: color-mix(in srgb, var(--vs-teal) 4%, transparent);
	--vs-teal-a07: color-mix(in srgb, var(--vs-teal) 7%, transparent);
	--vs-teal-a08: color-mix(in srgb, var(--vs-teal) 8%, transparent);
	--vs-teal-a10: color-mix(in srgb, var(--vs-teal) 10%, transparent);
	--vs-teal-a12: color-mix(in srgb, var(--vs-teal) 12%, transparent);
	--vs-teal-a16: color-mix(in srgb, var(--vs-teal) 16%, transparent);
	--vs-teal-a18: color-mix(in srgb, var(--vs-teal) 18%, transparent);
	--vs-teal-a22: color-mix(in srgb, var(--vs-teal) 22%, transparent);
	--vs-teal-a28: color-mix(in srgb, var(--vs-teal) 28%, transparent);
	--vs-teal-glow: color-mix(in srgb, var(--vs-teal) 30%, transparent);
	--vs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vs-dur: 0.18s;
	--vs-font: "Outfit", "Segoe UI", sans-serif;
	--vs-display: "Fraunces", Georgia, serif;
}

/* ---- Dusk base fills (token-driven surfaces / text) ---- */
html,
body,
.wrap,
.panel-container .panel,
.navigation .active-subsection a,
.navigation a:hover,
.cp-mini,
.codebox,
blockquote,
blockquote blockquote blockquote,
.panel blockquote blockquote,
.attachbox,
.message-box textarea,
.phpbb_alert,
select,
.minitabs a:hover,
.minitabs .activetab > a,
.minitabs .activetab > a:hover,
.cp-main .pm,
.bg3 .topicreview .bg2,
.bg3 .topicreview .bg1,
.headerbar,
.forabg,
.forumbg,
li.row,
.bg1,
.bg2,
.bg3,
.tabs .activetab > a,
.tabs a:hover,
ul.cplist,
.panel,
blockquote blockquote,
.panel blockquote,
.panel blockquote blockquote blockquote,
.panel .codebox,
.dropdown .dropdown-contents,
.jumpbox-cat-link,
.jumpbox-sub-link,
.jumpbox-forum-link,
.cp-main .message-box textarea,
fieldset.quick-login input.inputbox {
	background: var(--vs-surface) !important;
	background-color: var(--vs-surface) !important;
	background-image: none !important;
}

h2,
.panel-container h2,
.forumbg .header a,
.forabg .header a,
th a,
.tabs .activetab > a,
.tabs .activetab > a:hover,
.tabs .tab a:hover,
.navigation .active-subsection a,
.navigation .active-subsection a:hover,
.navigation a:hover,
.panel-container .panel li.header dd,
.panel-container .panel li.header dt,
label:hover,
fieldset dl:hover dt label,
dl.faq dt,
h3,
.content h2,
.panel h2,
fieldset.polls dl.voted,
.button .icon,
.inputbox,
textarea,
.message-box textarea,
.panel-container table.table1 thead th,
a.button1,
input.button1,
input.button3,
a.button2,
input.button2,
a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
input.button3:hover,
.postbody .content,
.pagination li a,
select,
.button .icon,
.button-secondary,
.dropdown-extended .header,
.dropdown-extended .footer,
.pagination li.ellipsis span,
.icon.icon-black,
a:hover .icon.icon-black,
.minitabs a:hover,
.minitabs .activetab > a,
.minitabs .activetab > a:hover,
html,
body,
.headerbar p,
.copyright,
ul.topiclist li,
.panel,
label,
dd label,
.signature,
.postprofile,
.postprofile strong,
dl.details dd,
dl.details dt,
.content,
.postbody,
fieldset.polls dl,
dl.file dd,
table.table1 td,
.dropdown-extended ul li:hover,
.button {
	color: var(--vs-text) !important;
}

.forumbg,
.forabg,
.navbar,
.headerbar,
.post,
.bg3,
.panel blockquote,
.panel .codebox,
li.row,
ul.linklist li,
h3,
ul.linklist,
ul.topiclist dd,
.postprofile,
.signature,
.tabs .activetab > a,
.tabs .activetab > a:hover,
.panel-container h3,
.panel-container .panel li.row,
.panel-container hr,
.cp-menu hr,
table.table1 tbody tr,
table.table1 tbody td,
hr,
.panel h2,
.content h2,
.codebox,
.codebox p,
fieldset.polls dl,
.attach-image img,
.attachbox,
.attachbox dd,
.inputbox,
.phpbb_alert,
a.button1,
input.button1,
input.button3,
a.button2,
input.button2,
.dropdown li.separator,
select,
.dropdown li,
.dropdown-extended .header,
.dropdown-extended .footer,
.caret,
.pm .postprofile {
	border-color: var(--vs-line) !important;
}

/* Canvas — dusk sky wash (indigo + amber horizon, muted lagoon) */
html {
	background:
		radial-gradient(1000px 480px at 10% -8%, color-mix(in srgb, var(--vs-teal) 14%, transparent), transparent 60%),
		radial-gradient(880px 440px at 94% 2%, color-mix(in srgb, var(--vs-copper) 18%, transparent), transparent 56%),
		radial-gradient(720px 400px at 48% 105%, color-mix(in srgb, #3a2458 32%, transparent), transparent 62%),
		linear-gradient(180deg, #060910 0%, #0e1520 42%, #0a0f16 100%) !important;
	min-height: 100%;
	color: var(--vs-text) !important;
}

body {
	background: transparent !important;
	color: var(--vs-text) !important;
	font-family: var(--vs-font) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	padding: 14px 18px 24px !important;
	-webkit-font-smoothing: antialiased;
}

.wrap {
	max-width: calc(1140px + 2cm);
	width: 100%;
	margin: 0 auto;
	background: var(--vs-paper) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 24px !important;
	box-shadow: var(--vs-shadow) !important;
	overflow: visible;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Soft page inset without breaking Board3 float math on #portal-body */
#portal-page-body {
	box-sizing: border-box !important;
	max-width: 100%;
	padding-left: 14px !important;
	padding-right: 14px !important;
}

.portal-body-wrapper {
	box-sizing: border-box !important;
	max-width: 100%;
}

/* Keep Board3 portal float layout (#page-body must float:left) */
#page-body,
.page-body {
	box-sizing: border-box !important;
	float: left !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	padding: 8px 0 16px !important;
}

#portal-left,
#portal-right {
	box-sizing: border-box !important;
	overflow: visible !important;
	position: relative !important;
	/* Keep below navbar dropdowns (was covering Hızlı bağlantılar) */
	z-index: 0;
}

#portal-left ul.topiclist dt,
#portal-right ul.topiclist dt,
#portal-left ul.topiclist dt .list-inner,
#portal-right ul.topiclist dt .list-inner {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
}

#portal-left li.header dt .list-inner,
#portal-right li.header dt .list-inner {
	padding-left: 10px !important;
	padding-right: 8px !important;
}

#portal-left ul.topiclist dd,
#portal-right ul.topiclist dd,
#portal-left .portal-side-wrapper,
#portal-right .portal-side-wrapper {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#portal-center-wrapper {
	position: relative;
	z-index: 0;
}

/* Navbar / quick-links dropdowns must paint above portal columns */
.navbar,
#nav-main,
.dropdown-container {
	position: relative;
	z-index: 40;
}

.navbar .dropdown,
ul.linklist .dropdown,
.dropdown-container .dropdown,
.quick-links .dropdown {
	z-index: 100 !important;
}

.navbar .dropdown .dropdown-contents,
ul.linklist .dropdown .dropdown-contents,
.quick-links .dropdown-contents {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: var(--vs-radius-sm) !important;
	box-shadow: var(--vs-elev-2) !important;
	overflow: auto;
	max-height: min(70vh, 420px);
}

.navbar .dropdown .dropdown-contents a,
.quick-links .dropdown-contents a {
	color: var(--vs-teal) !important;
}

.navbar .dropdown .dropdown-contents a:hover,
.quick-links .dropdown-contents a:hover {
	background: var(--vs-teal-a08) !important;
	color: var(--vs-copper) !important;
}

#portal-left .forabg,
#portal-right .forabg {
	overflow: hidden !important;
	box-shadow: var(--vs-elev-1) !important;
}

/* Header — soft evening wash (copper sunrise + muted lagoon) */
.headerbar {
	background:
		radial-gradient(640px 170px at 10% 0%, color-mix(in srgb, var(--vs-teal) 12%, transparent), transparent 62%),
		radial-gradient(520px 160px at 90% 18%, color-mix(in srgb, var(--vs-copper) 16%, transparent), transparent 58%),
		linear-gradient(180deg, #171f2c 0%, #101722 100%) !important;
	border-bottom: 1px solid var(--vs-line) !important;
	padding: 18px 28px 16px !important;
	margin: 0 !important;
	min-height: 0 !important;
	border-radius: 24px 24px 0 0 !important;
	position: relative;
	overflow: visible;
	color: var(--vs-ink) !important;
}

.headerbar::after {
	content: "";
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--vs-accent-bar);
	opacity: 0.95;
	transition: opacity var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
	transform-origin: left center;
}

.headerbar:hover::after {
	opacity: 1;
	transform: scaleX(1.01);
}

.headerbar,
.headerbar a,
.headerbar p {
	color: var(--vs-ink) !important;
	text-shadow: none !important;
}

.site-description {
	float: none !important;
	width: auto !important;
	display: grid !important;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	justify-items: start;
}

.site-description h1 {
	font-family: var(--vs-display) !important;
	font-size: clamp(1.4rem, 2.3vw, 1.9rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: var(--vs-ink) !important;
	margin: 0 !important;
	line-height: 1.12 !important;
	grid-column: 2;
	grid-row: 1;
}

.site-description p {
	font-family: var(--vs-font) !important;
	font-size: 0.875rem !important;
	color: var(--vs-muted) !important;
	font-weight: 500 !important;
	margin: 2px 0 0 !important;
	grid-column: 2;
	grid-row: 2;
}

.site-description p.skiplink {
	position: absolute !important;
	left: -9999px !important;
}

.logo {
	display: inline-flex !important;
	margin: 0 !important;
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
}

.site_logo,
.site_logo--svg {
	display: block !important;
	width: 76px !important;
	height: 76px !important;
	border-radius: 18px !important;
	box-shadow: var(--vs-elev-1);
	transition: filter var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

/* PNG fallback (if any span.site_logo remains) */
span.site_logo {
	background: url("./images/gameryegen-logo.png") center / contain no-repeat !important;
}

.site_logo--svg {
	background: none !important;
	overflow: visible;
}

.logo:hover .site_logo--svg {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--vs-teal) 22%, transparent),
		0 10px 22px color-mix(in srgb, var(--vs-teal) 22%, rgba(21, 32, 43, 0.12));
}

.search-header .inputbox {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: var(--vs-radius-pill) !important;
	color: var(--vs-text) !important;
	padding: 9px 16px !important;
	box-shadow: var(--vs-elev-1);
	transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

.search-header .inputbox:hover {
	transform: none;
	border-color: color-mix(in srgb, var(--vs-teal) 45%, transparent) !important;
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--vs-teal) 22%, transparent),
		0 10px 22px color-mix(in srgb, var(--vs-teal) 22%, rgba(21, 32, 43, 0.12)) !important;
}

.search-header .inputbox:focus {
	transform: none;
	border-color: color-mix(in srgb, var(--vs-teal) 45%, transparent) !important;
	box-shadow: 0 0 0 3px var(--vs-teal-a16), var(--vs-elev-1) !important;
}

.search-header .button,
.button-search,
.button-search-end,
.button-icon-only {
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 6px 10px !important;
	height: auto !important;
	overflow: hidden !important;
}

.search-header .button,
.button-search,
.button-search-end,
.search-box .button-search,
.search-box .button-search-end,
.search-header .button-search-end {
	border-radius: var(--vs-radius-pill) !important;
	background: var(--vs-accent-grad) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 4px 12px var(--vs-teal-a28) !important;
	transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), filter var(--vs-dur) var(--vs-ease) !important;
}

.search-header .button:hover,
.button-search:hover,
.button-search-end:hover,
.search-box .button-search:hover,
.search-box .button-search-end:hover,
.search-header .button-search-end:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px var(--vs-teal-glow) !important;
	filter: brightness(1.04);
	color: #fff !important;
}

.button-search .icon,
.button-search i,
.button-search:hover .icon,
.button-search:hover i,
.button-search-end .icon,
.button-search-end i,
.button-search-end:hover .icon,
.button-search-end:hover i,
.search-box .button-search .icon,
.search-box .button-search i,
.search-box .button-search-end .icon,
.search-box .button-search-end i,
.search-header .button-search .icon,
.search-header .button-search i,
.search-header .button-search:hover .icon,
.search-header .button-search:hover i,
.search-header .button-search-end .icon,
.search-header .button-search-end i,
.search-header .button-search-end:hover .icon,
.search-header .button-search-end:hover i {
	color: #ffffff !important;
}

.search-header {
	float: none !important;
	margin: 0 !important;
}

/* Navbar / breadcrumbs — light Vespera (reverted; no dark top bar) */
#page-header > .navbar,
.headerbar + .navbar {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

#page-header > .navbar > .inner {
	padding: 6px 18px !important;
}

#page-header #nav-main {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

#page-header #nav-main > li > a,
#page-header #nav-main > li > a:link,
#page-header #nav-main > li > a:visited,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title:link,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title:visited,
#page-header #nav-main > li#username_logged_in .header-avatar,
#page-header #nav-main > li#username_logged_in .header-avatar:link,
#page-header #nav-main > li#username_logged_in .header-avatar:visited {
	color: var(--vs-ink-soft) !important;
	font-family: var(--vs-font) !important;
	font-weight: 600 !important;
	font-size: 0.8rem !important;
	border-radius: var(--vs-radius-pill);
	padding: 7px 12px !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none !important;
	text-decoration: none !important;
	transition: background var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
}

#page-header #nav-main > li > a:hover,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title:hover,
#page-header #nav-main > li.mchat-nav.dropdown-visible .mchat-nav-link-title,
#page-header #nav-main > li.mchat-nav .dropdown-container.dropdown-visible .mchat-nav-link-title {
	color: var(--vs-teal) !important;
	background: var(--vs-teal-a10) !important;
	box-shadow: var(--vs-elev-1) !important;
}

/* Username trigger: same pill motion, keep group colour on the name */
#page-header #nav-main > li#username_logged_in .header-avatar:hover,
#page-header #nav-main > li#username_logged_in .header-profile.dropdown-visible .header-avatar,
#page-header #nav-main > li#username_logged_in.dropdown-visible .header-avatar {
	background: var(--vs-teal-a10) !important;
	box-shadow: var(--vs-elev-1) !important;
}

#page-header #nav-main .icon,
#page-header #nav-main > li > a > i,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title .icon,
#page-header #nav-main > li.mchat-nav .mchat-nav-link-title > i {
	color: var(--vs-teal) !important;
}

/* mChat / profile wrap trigger in an extra div — keep inline like other nav items */
#page-header #nav-main > li.mchat-nav,
#page-header #nav-main > li.mchat-nav .mchat-nav-container,
#page-header #nav-main > li#username_logged_in,
#page-header #nav-main > li#username_logged_in .header-profile {
	display: inline-block !important;
	vertical-align: middle;
}

#page-header #nav-main > li.mchat-nav .mchat-nav-link,
#page-header #nav-main > li.mchat-nav .mchat-nav-caret {
	margin: 0 0 0 4px !important;
	text-decoration: none !important;
	border: 0 !important;
	color: inherit !important;
}

/* Keep group colour on username text, but still allow pill hover on the trigger */
#page-header #nav-main > li#username_logged_in .header-avatar .username-coloured,
#page-header #nav-main > li#username_logged_in .header-avatar:hover .username-coloured {
	background: transparent !important;
	/* inline colour from phpBB group settings wins */
}

#page-header #nav-main > li#username_logged_in .header-avatar img,
#page-header #nav-main > li#username_logged_in .header-avatar .avatar {
	vertical-align: middle;
	margin-right: 4px;
	border-radius: 6px;
}

#page-header #nav-main a.username-coloured,
#page-header #nav-main a.username-coloured:link,
#page-header #nav-main a.username-coloured:visited,
#page-header #nav-main a.username-coloured:hover {
	background: transparent !important;
}

/* Top breadcrumbs — match footer Portal / Forum ana sayfa strip */
#page-header ul#nav-breadcrumbs {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px 10px;
	background:
		linear-gradient(135deg, var(--vs-teal-a07) 0%, transparent 55%),
		linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-paper) 100%) !important;
	background-color: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 14px !important;
	margin: 8px 18px 10px !important;
	padding: 8px 14px !important;
	font-size: 0.78rem !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
	clear: both;
	min-height: 0 !important;
}

#page-header ul#nav-breadcrumbs > li.breadcrumbs {
	flex: 1 1 auto;
	float: none !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-size: 0.78rem !important;
	line-height: 1.35 !important;
	color: var(--vs-muted) !important;
}

#page-header ul#nav-breadcrumbs .crumb {
	float: none !important;
	display: inline-flex !important;
	align-items: center;
}

#page-header ul#nav-breadcrumbs .crumb + .crumb::before {
	content: "\203A";
	display: inline-block;
	margin: 0 6px 0 2px;
	color: var(--vs-muted);
	font-weight: 400;
}

#page-header ul#nav-breadcrumbs a,
#page-header ul#nav-breadcrumbs .crumb a,
#page-header ul#nav-breadcrumbs .crumb a:link,
#page-header ul#nav-breadcrumbs .crumb a:visited,
#page-header ul#nav-breadcrumbs span {
	color: var(--vs-ink-soft) !important;
	font-family: var(--vs-font) !important;
	font-weight: 600 !important;
	font-size: 0.78rem !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	text-shadow: none !important;
}

#page-header ul#nav-breadcrumbs a:hover,
#page-header ul#nav-breadcrumbs .crumb a:hover {
	color: var(--vs-teal) !important;
	background: transparent !important;
}

#page-header ul#nav-breadcrumbs .icon,
#page-header ul#nav-breadcrumbs i {
	color: var(--vs-teal) !important;
}

#page-header .navbar .dropdown .dropdown-contents a,
#page-header .quick-links .dropdown-contents a {
	color: var(--vs-teal) !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

#page-header .navbar .dropdown .dropdown-contents a:hover,
#page-header .quick-links .dropdown-contents a:hover {
	background: var(--vs-teal-a08) !important;
	color: var(--vs-copper) !important;
}

.icon.icon-blue {
	color: var(--vs-teal) !important;
}


/* Category blocks — accent strip + lift */
.forabg,
.forumbg {
	background: var(--vs-cat-grad) !important;
	border: 0 !important;
	border-radius: var(--vs-radius) !important;
	margin: 12px 0 !important;
	padding: 0 !important;
	box-shadow: var(--vs-elev-2) !important;
	overflow: hidden;
	transition: box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease), background var(--vs-dur) var(--vs-ease);
}

.forabg:hover,
.forumbg:hover {
	box-shadow: 0 12px 32px rgba(21, 32, 43, 0.14) !important;
}

.forabg > .inner,
.forumbg > .inner {
	background: transparent !important;
	border: 0 !important;
}

li.header {
	background: transparent !important;
	border: 0 !important;
	padding: 8px 6px !important;
}

li.header dt,
li.header dd,
li.header a,
li.header .list-inner,
li.header dd strong,
.forabg li.header dd,
.forumbg li.header dd,
ul.topiclist li.header dd,
ul.topiclist li.header dd strong {
	color: var(--vs-teal) !important;
	font-family: var(--vs-font) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-shadow: none !important;
}

li.header dt .list-inner {
	font-family: var(--vs-display) !important;
	font-size: 1rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding-left: 16px !important;
}

/* Rows */
ul.topiclist.forums,
ul.topiclist.topics {
	background: var(--vs-surface) !important;
}

li.row {
	background: var(--vs-surface) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--vs-line) !important;
	padding: 6px 0 !important;
	position: relative;
	transition: background var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

li.row:nth-child(even),
li.row.bg2 {
	background: var(--vs-row-alt) !important;
}

li.row:hover {
	background: var(--vs-teal-a07) !important;
	box-shadow: inset 3px 0 0 var(--vs-teal);
	transform: none;
	z-index: 1;
}

li.row:last-child {
	border-bottom: 0 !important;
}

/* Unread left accent */
li.row:has(.forum_unread),
li.row:has(.topic_unread),
li.row:has(.sticky_unread),
li.row:has(.announce_unread),
li.row:has(.global_unread),
li.row:has(.pm_unread) {
	box-shadow: inset 3px 0 0 var(--vs-teal-soft);
}

a.forumtitle,
a.topictitle {
	color: var(--vs-ink) !important;
	font-family: var(--vs-font) !important;
	font-size: 0.92rem !important;
	font-weight: 700 !important;
	transition: color var(--vs-dur) var(--vs-ease);
}

a.forumtitle:hover,
a.topictitle:hover {
	color: var(--vs-teal) !important;
}

li.row .list-inner,
.forum-description,
ul.topiclist li.row dd,
ul.topiclist li.row dd strong {
	color: var(--vs-muted) !important;
	font-size: 0.78rem !important;
}

.forabg li.header dd,
.forumbg li.header dd,
ul.topiclist li.header dd,
ul.topiclist li.header dd *,
.forabg li.header dt,
.forumbg li.header dt,
.forabg li.header a,
.forumbg li.header a,
.forabg li.header a:link,
.forumbg li.header a:link,
.forabg li.header a:visited,
.forumbg li.header a:visited,
.forabg li.header a:hover,
.forumbg li.header a:hover,
.forabg li.header .list-inner,
.forumbg li.header .list-inner {
	color: var(--vs-teal) !important;
}

a:link:not(.username-coloured):not(.forumtitle):not(.topictitle),
a:visited:not(.username-coloured):not(.forumtitle):not(.topictitle),
a:active:not(.username-coloured):not(.forumtitle):not(.topictitle),
.postlink,
.postlink:visited,
.arrow-left:hover,
.arrow-right:hover,
.icon.icon-blue,
dd.lastpost a:not(.username-coloured),
dd.lastpost a:link:not(.username-coloured),
dd.lastpost a:visited:not(.username-coloured),
ul.topiclist li.row dd.lastpost a:not(.username-coloured),
ul.topiclist li.row a:not(.username-coloured):not(.forumtitle):not(.topictitle),
.portal-navigation a:not(.username-coloured),
.portal-side a:not(.username-coloured),
.stat-block a:not(.username-coloured),
.copyright a:not(.username-coloured) {
	color: var(--vs-teal) !important;
}

a:hover:not(.username-coloured):not(.forumtitle):not(.topictitle),
a:active:hover:not(.username-coloured):not(.forumtitle):not(.topictitle),
.postlink:hover,
dd.lastpost a:hover:not(.username-coloured),
ul.topiclist li.row dd.lastpost a:hover:not(.username-coloured),
.portal-navigation a:hover:not(.username-coloured),
.portal-side a:hover:not(.username-coloured) {
	color: var(--vs-copper) !important;
}

/* ===== Forum/topic status icons — original FA glyphs + preset glow plate ===== */

ul.topiclist.forums > li.row > dl.row-item,
ul.topiclist.topics > li > dl.row-item,
ul.topiclist.pmlist > li > dl.row-item,
ul.cplist > li > dl.row-item {
	min-height: 50px;
	position: relative;
	background-image: none !important;
}

ul.topiclist.forums > li.row > dl.row-item dt .list-inner {
	padding-left: 70px !important;
}

ul.topiclist.topics > li > dl.row-item dt .list-inner {
	padding-left: 72px !important;
}

.forums .row-item:before,
.topics .row-item:before,
.pmlist .row-item:before,
.cplist .row-item:before {
	font-family: FontAwesome !important;
	text-align: center !important;
	position: absolute !important;
	left: 8px !important;
	top: 50% !important;
	margin-top: 0 !important;
	width: 56px !important;
	height: 56px !important;
	line-height: 56px !important;
	font-size: 37px !important;
	border-radius: 0 !important;
	transform: translateY(calc(-50% + 2px));
	background: transparent !important;
	background-image: none !important;
	color: var(--vs-teal-soft) !important;
	box-shadow: none !important;
	text-shadow:
		0 0 10px color-mix(in srgb, var(--vs-teal) 42%, transparent),
		0 0 18px color-mix(in srgb, var(--vs-teal) 28%, transparent);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vs-teal) 35%, transparent));
	transition: transform var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease), text-shadow var(--vs-dur) var(--vs-ease), filter var(--vs-dur) var(--vs-ease);
	animation: none !important;
	padding: 0 !important;
	text-indent: 0 !important;
	z-index: 1;
}

li.row:hover .row-item:before {
	transform: translateY(calc(-50% + 1px)) scale(1.06);
	color: var(--vs-teal) !important;
	box-shadow: none !important;
	text-shadow:
		0 0 12px color-mix(in srgb, var(--vs-teal) 55%, transparent),
		0 0 22px color-mix(in srgb, var(--vs-teal) 38%, transparent);
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vs-teal) 50%, transparent));
}

/* Restore dark.css FA glyphs (override any emptied content) */
.global_read:before, .global_read_mine:before, .global_read_locked:before, .global_read_locked_mine:before,
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before,
.announce_read:before, .announce_read_mine:before, .announce_read_locked:before, .announce_read_locked_mine:before,
.announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before {
	content: "\f0a1" !important; /* megaphone */
}
.forum_link:before { content: "\f08e" !important; } /* external link */

/* Forums — CSS-mask marks (follow --vs-teal / --vs-copper presets); glow ring only unread + important */
.forums .forum_read:before, .forums .forum_read_subforum:before,
.forums .forum_unread:before, .forums .forum_unread_subforum:before,
.forums .forum_important:before, .forums .forum_important_unread:before,
ul.topiclist.forums .forum_read:before, ul.topiclist.forums .forum_read_subforum:before,
ul.topiclist.forums .forum_unread:before, ul.topiclist.forums .forum_unread_subforum:before,
ul.topiclist.forums .forum_important:before, ul.topiclist.forums .forum_important_unread:before {
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	width: 50px !important;
	height: 50px !important;
	line-height: 50px !important;
	left: 9px !important;
	top: 50% !important;
	margin-top: 0 !important;
	color: transparent !important;
	text-shadow: none !important;
	background-image: none !important;
	background-color: var(--vs-teal-soft) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: auto !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	-webkit-mask-size: 44px 44px !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	mask-size: 44px 44px !important;
	mask-repeat: no-repeat !important;
	mask-position: center !important;
	transform: translateY(-50%) !important;
	transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease), background-color var(--vs-dur) var(--vs-ease) !important;
	z-index: 1;
	opacity: 1;
	animation: none !important;
}

.forums .forum_read:before,
.forums .forum_read_subforum:before,
ul.topiclist.forums .forum_read:before,
ul.topiclist.forums .forum_read_subforum:before {
	filter: none !important;
}

.forums .forum_unread:before, .forums .forum_unread_subforum:before,
ul.topiclist.forums .forum_unread:before, ul.topiclist.forums .forum_unread_subforum:before {
	background-color: #f2fbfd !important;
	background-image: none !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	-webkit-mask-composite: source-over;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	mask-composite: add;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-teal) 70%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-teal) 45%, transparent)) !important;
	animation: vs-forum-ring-pulse 0.9s ease-in-out infinite !important;
}

.forums .forum_important:before,
ul.topiclist.forums .forum_important:before {
	background-color: #f0b070 !important;
	background-image: none !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	-webkit-mask-composite: source-over;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	mask-composite: add;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 80%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-copper-hot) 50%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 1.15s ease-in-out infinite !important;
}

.forums .forum_important_unread:before,
ul.topiclist.forums .forum_important_unread:before {
	background-color: #ffc48a !important;
	background-image: none !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	-webkit-mask-composite: source-over;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	mask-composite: add;
	filter:
		drop-shadow(0 0 10px color-mix(in srgb, var(--vs-copper-hot) 90%, #fff))
		drop-shadow(0 0 22px color-mix(in srgb, var(--vs-copper) 60%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 0.75s ease-in-out infinite !important;
}

li.row:hover .forum_read:before,
li.row:hover .forum_read_subforum:before,
ul.topiclist.forums > li.row:hover .forum_read:before,
ul.topiclist.forums > li.row:hover .forum_read_subforum:before {
	background-color: var(--vs-teal) !important;
	background-image: none !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	-webkit-mask-size: 44px 44px !important;
	mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	mask-size: 44px 44px !important;
	transform: translateY(-50%) scale(1.06) !important;
	filter: none !important;
	animation: none !important;
}

li.row:hover .forum_unread:before,
li.row:hover .forum_unread_subforum:before,
ul.topiclist.forums > li.row:hover .forum_unread:before,
ul.topiclist.forums > li.row:hover .forum_unread_subforum:before {
	background-color: color-mix(in srgb, #ffffff 58%, var(--vs-teal)) !important;
	transform: translateY(-50%) scale(1.1) !important;
	opacity: 1;
}

li.row:hover .forum_important:before,
li.row:hover .forum_important_unread:before,
ul.topiclist.forums > li.row:hover .forum_important:before,
ul.topiclist.forums > li.row:hover .forum_important_unread:before {
	transform: translateY(-50%) scale(1.1) !important;
	opacity: 1;
}

/* No separate :after ring */
.forums .forum_read:after, .forums .forum_read_subforum:after,
.forums .forum_unread:after, .forums .forum_unread_subforum:after,
.forums .forum_important:after, .forums .forum_important_unread:after,
ul.topiclist.forums .forum_read:after, ul.topiclist.forums .forum_read_subforum:after,
ul.topiclist.forums .forum_unread:after, ul.topiclist.forums .forum_unread_subforum:after,
ul.topiclist.forums .forum_important:after, ul.topiclist.forums .forum_important_unread:after {
	content: none !important;
	display: none !important;
	animation: none !important;
}

.sticky_read:before, .sticky_read_mine:before, .sticky_read_locked:before, .sticky_read_locked_mine:before,
.sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before {
	content: "\f08d" !important; /* pin */
}
.topic_moved:before { content: "\f061" !important; }
.pm_read:before, .pm_unread:before { content: "\f0e0" !important; }

/* Topic mark — circle + 45° square (mask SVG) */
.topics .topic_read:before, .topics .topic_read_mine:before,
.topics .topic_read_hot:before, .topics .topic_read_hot_mine:before,
.topics .topic_unread:before, .topics .topic_unread_mine:before,
.topics .topic_unread_hot:before, .topics .topic_unread_hot_mine:before,
ul.topiclist .topic_read:before, ul.topiclist .topic_read_mine:before,
ul.topiclist .topic_read_hot:before, ul.topiclist .topic_read_hot_mine:before,
ul.topiclist .topic_unread:before, ul.topiclist .topic_unread_mine:before,
ul.topiclist .topic_unread_hot:before, ul.topiclist .topic_unread_hot_mine:before {
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	width: 44px !important;
	height: 44px !important;
	line-height: 44px !important;
	left: 12px !important;
	color: transparent !important;
	text-shadow: none !important;
	background: var(--vs-teal-soft) !important;
	background-image: none !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=341") !important;
	-webkit-mask-size: contain !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-image: url("./images/vs-topic-mark.svg?v=341") !important;
	mask-size: contain !important;
	mask-repeat: no-repeat !important;
	mask-position: center !important;
	filter:
		drop-shadow(0 0 4px color-mix(in srgb, var(--vs-teal) 70%, transparent))
		drop-shadow(0 0 12px color-mix(in srgb, var(--vs-teal) 45%, transparent))
		drop-shadow(0 0 22px color-mix(in srgb, var(--vs-teal) 28%, transparent));
	transition: transform var(--vs-dur) var(--vs-ease), filter var(--vs-dur) var(--vs-ease), background-color var(--vs-dur) var(--vs-ease) !important;
}

.topics .topic_read_hot:before, .topics .topic_read_hot_mine:before,
.topics .topic_unread_hot:before, .topics .topic_unread_hot_mine:before,
ul.topiclist .topic_read_hot:before, ul.topiclist .topic_read_hot_mine:before,
ul.topiclist .topic_unread_hot:before, ul.topiclist .topic_unread_hot_mine:before {
	background: color-mix(in srgb, var(--vs-copper-hot) 72%, var(--vs-teal-soft)) !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 45%, transparent));
}

li.row:hover .topic_read:before,
li.row:hover .topic_read_mine:before,
li.row:hover .topic_read_hot:before,
li.row:hover .topic_read_hot_mine:before,
li.row:hover .topic_unread:before,
li.row:hover .topic_unread_mine:before,
li.row:hover .topic_unread_hot:before,
li.row:hover .topic_unread_hot_mine:before {
	background: var(--vs-teal) !important;
	transform: translateY(calc(-50% + 1px)) scale(1.08) !important;
	filter:
		drop-shadow(0 0 6px color-mix(in srgb, var(--vs-teal) 80%, transparent))
		drop-shadow(0 0 16px color-mix(in srgb, var(--vs-teal) 55%, transparent))
		drop-shadow(0 0 28px color-mix(in srgb, var(--vs-teal) 35%, transparent)) !important;
}

.topics .topic_unread:before, .topics .topic_unread_mine:before,
.topics .topic_unread_hot:before, .topics .topic_unread_hot_mine:before,
ul.topiclist .topic_unread:before, ul.topiclist .topic_unread_mine:before,
ul.topiclist .topic_unread_hot:before, ul.topiclist .topic_unread_hot_mine:before {
	background: #f0f7fa !important;
	color: transparent !important;
	animation: vs-unread-pulse 1.45s ease-out infinite !important;
}

.forum_read_locked:before, .forum_unread_locked:before,
.topic_read_locked:before, .topic_read_locked_mine:before,
.topic_unread_locked:before, .topic_unread_locked_mine:before {
	content: "\f023" !important; /* lock */
}

/* Unread pulse — glow on glyph (no plate) */
.global_unread:before, .global_unread_mine:before, .global_unread_locked:before, .global_unread_locked_mine:before,
.announce_unread:before, .announce_unread_mine:before, .announce_unread_locked:before, .announce_unread_locked_mine:before,
.forum_unread_locked:before,
.sticky_unread:before, .sticky_unread_mine:before, .sticky_unread_locked:before, .sticky_unread_locked_mine:before,
.pm_unread:before,
.topic_unread_locked:before, .topic_unread_locked_mine:before {
	background: transparent !important;
	color: #fff !important;
	animation: vs-unread-pulse 1.45s ease-out infinite !important;
}

/* Forum unread / important — keep CSS masks (preset colors) */
.forums .forum_unread:before, .forums .forum_unread_subforum:before,
ul.topiclist.forums .forum_unread:before, ul.topiclist.forums .forum_unread_subforum:before {
	background-image: none !important;
	background-color: #f2fbfd !important;
	color: transparent !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-teal) 70%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-teal) 45%, transparent)) !important;
	animation: vs-forum-ring-pulse 0.9s ease-in-out infinite !important;
}

.forums .forum_important:before,
ul.topiclist.forums .forum_important:before,
.forums .forum_important_unread:before,
ul.topiclist.forums .forum_important_unread:before {
	background-image: none !important;
	background-color: #f0b070 !important;
	color: transparent !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 80%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-copper-hot) 50%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 1.15s ease-in-out infinite !important;
}

.forums .forum_important_unread:before,
ul.topiclist.forums .forum_important_unread:before {
	background-color: #ffc48a !important;
	filter:
		drop-shadow(0 0 10px color-mix(in srgb, var(--vs-copper-hot) 90%, #fff))
		drop-shadow(0 0 22px color-mix(in srgb, var(--vs-copper) 60%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 0.75s ease-in-out infinite !important;
}

.topics .topic_unread:before, .topics .topic_unread_mine:before,
.topics .topic_unread_hot:before, .topics .topic_unread_hot_mine:before,
ul.topiclist .topic_unread:before, ul.topiclist .topic_unread_mine:before,
ul.topiclist .topic_unread_hot:before, ul.topiclist .topic_unread_hot_mine:before {
	background: #f0f7fa !important;
	background-image: none !important;
	color: transparent !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=341") !important;
	-webkit-mask-size: contain !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-image: url("./images/vs-topic-mark.svg?v=341") !important;
	mask-size: contain !important;
	mask-repeat: no-repeat !important;
	mask-position: center !important;
	animation: vs-unread-pulse 1.45s ease-out infinite !important;
}

.global_unread_locked:before, .global_unread_locked_mine:before,
.announce_unread_locked:before, .announce_unread_locked_mine:before,
.forum_unread_locked:before,
.sticky_unread_locked:before, .sticky_unread_locked_mine:before,
.topic_unread_locked:before, .topic_unread_locked_mine:before {
	background: transparent !important;
	color: var(--vs-copper-hot) !important;
	animation: vs-locked-pulse 1.45s ease-out infinite !important;
}

.forum_read_locked:before,
.topic_read_locked:before, .topic_read_locked_mine:before,
.sticky_read_locked:before, .sticky_read_locked_mine:before,
.announce_read_locked:before, .announce_read_locked_mine:before,
.global_read_locked:before, .global_read_locked_mine:before {
	background: transparent !important;
	color: var(--vs-copper-hot) !important;
	text-shadow:
		0 0 10px color-mix(in srgb, var(--vs-copper) 45%, transparent),
		0 0 18px color-mix(in srgb, var(--vs-copper) 28%, transparent);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vs-copper) 40%, transparent));
}

/* Mine marker — 45° square (diamond) inside the icon circle */
.global_read_mine:after, .global_read_locked_mine:after, .global_unread_mine:after, .global_unread_locked_mine:after,
.announce_read_mine:after, .announce_read_locked_mine:after, .announce_unread_mine:after, .announce_unread_locked_mine:after,
.sticky_read_mine:after, .sticky_read_locked_mine:after, .sticky_unread_mine:after, .sticky_unread_locked_mine:after,
.topic_read_mine:after, .topic_read_hot_mine:after, .topic_unread_mine:after, .topic_unread_hot_mine:after,
.topic_read_locked_mine:after, .topic_unread_locked_mine:after {
	content: "" !important;
	font-family: inherit !important;
	font-size: 0 !important;
	width: 9px !important;
	height: 9px !important;
	border-radius: 1.5px !important;
	left: 29px !important;
	top: 50% !important;
	margin-top: 0 !important;
	transform: translateY(-18px) rotate(45deg) !important;
	background: var(--vs-copper-hot) !important;
	background-color: var(--vs-copper-hot) !important;
	background-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	color: transparent !important;
	text-shadow: none !important;
	box-shadow:
		0 0 8px color-mix(in srgb, var(--vs-copper) 55%, transparent),
		0 0 0 1px color-mix(in srgb, var(--vs-copper-hot) 35%, transparent) !important;
	z-index: 2;
}

/* Topic circle — diamond sits in upper-right inside the ring */
.topics .topic_read_mine:after, .topics .topic_read_hot_mine:after,
.topics .topic_unread_mine:after, .topics .topic_unread_hot_mine:after,
.topics .topic_read_locked_mine:after, .topics .topic_unread_locked_mine:after,
ul.topiclist .topic_read_mine:after, ul.topiclist .topic_read_hot_mine:after,
ul.topiclist .topic_unread_mine:after, ul.topiclist .topic_unread_hot_mine:after,
ul.topiclist .topic_read_locked_mine:after, ul.topiclist .topic_unread_locked_mine:after {
	width: 8px !important;
	height: 8px !important;
	left: 30px !important;
	transform: translateY(-14px) rotate(45deg) !important;
	background: var(--vs-copper-hot) !important;
}

/* ===== Topic icons (ACP) — Vespera glow instead of old GIFs ===== */
img[src*="/images/icons/"],
img[src*="images/icons/"] {
	display: inline-block !important;
	width: 22px !important;
	height: 0 !important;
	padding: 22px 0 0 0 !important;
	margin: 0 8px 0 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	vertical-align: -6px !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	filter: drop-shadow(0 0 7px color-mix(in srgb, var(--vs-teal) 50%, transparent));
}

img[src*="icons/misc/star.gif"] {
	background-image: url("./images/topic-icons/star-color.svg") !important;
}

img[src*="icons/misc/fire.gif"] {
	background-image: url("./images/topic-icons/fire-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 58%, transparent));
}

img[src*="icons/misc/heart.gif"] {
	background-image: url("./images/topic-icons/heart-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, #e08a9a 52%, transparent));
}

img[src*="icons/misc/radioactive.gif"] {
	background-image: url("./images/topic-icons/radioactive-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, #c6d46a 48%, transparent));
}

img[src*="icons/misc/thinking.gif"] {
	background-image: url("./images/topic-icons/thinking-color.svg") !important;
}

img[src*="icons/smile/info.gif"] {
	background-image: url("./images/topic-icons/info-color.svg") !important;
}

img[src*="icons/smile/alert.gif"] {
	background-image: url("./images/topic-icons/alert-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 55%, transparent));
}

img[src*="icons/smile/question.gif"] {
	background-image: url("./images/topic-icons/question-color.svg") !important;
}

img[src*="icons/smile/mrgreen.gif"] {
	background-image: url("./images/topic-icons/mrgreen-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, #7cb87a 48%, transparent));
}

img[src*="icons/smile/redface.gif"] {
	background-image: url("./images/topic-icons/redface-color.svg") !important;
	filter: drop-shadow(0 0 8px color-mix(in srgb, #e08a6a 48%, transparent));
}

/* Viewforum topic-icon strip on dt */
ul.topiclist.topics dt[style*="icons/misc/star.gif"],
ul.topiclist.topics dt[style*="icons/misc/fire.gif"],
ul.topiclist.topics dt[style*="icons/misc/heart.gif"],
ul.topiclist.topics dt[style*="icons/misc/radioactive.gif"],
ul.topiclist.topics dt[style*="icons/misc/thinking.gif"],
ul.topiclist.topics dt[style*="icons/smile/info.gif"],
ul.topiclist.topics dt[style*="icons/smile/alert.gif"],
ul.topiclist.topics dt[style*="icons/smile/question.gif"],
ul.topiclist.topics dt[style*="icons/smile/mrgreen.gif"],
ul.topiclist.topics dt[style*="icons/smile/redface.gif"] {
	background-size: 16px 16px !important;
	background-repeat: no-repeat !important;
	background-position: 8px 12px !important;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vs-teal) 35%, transparent));
}

ul.topiclist.topics dt[style*="icons/misc/star.gif"] {
	background-image: url("./images/topic-icons/star-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/misc/fire.gif"] {
	background-image: url("./images/topic-icons/fire-color.svg") !important;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vs-copper) 45%, transparent));
}
ul.topiclist.topics dt[style*="icons/misc/heart.gif"] {
	background-image: url("./images/topic-icons/heart-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/misc/radioactive.gif"] {
	background-image: url("./images/topic-icons/radioactive-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/misc/thinking.gif"] {
	background-image: url("./images/topic-icons/thinking-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/smile/info.gif"] {
	background-image: url("./images/topic-icons/info-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/smile/alert.gif"] {
	background-image: url("./images/topic-icons/alert-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/smile/question.gif"] {
	background-image: url("./images/topic-icons/question-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/smile/mrgreen.gif"] {
	background-image: url("./images/topic-icons/mrgreen-color.svg") !important;
}
ul.topiclist.topics dt[style*="icons/smile/redface.gif"] {
	background-image: url("./images/topic-icons/redface-color.svg") !important;
}

/* Panels / posts — Material cards */
.panel,
.post,
.bg1 {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: var(--vs-radius) !important;
	color: var(--vs-text) !important;
	box-shadow: var(--vs-elev-1);
}

.bg2,
.bg3 {
	background: var(--vs-row-alt) !important;
}

.post {
	margin-bottom: 12px !important;
	overflow: hidden;
}

.postprofile {
	border-right: 1px solid var(--vs-line) !important;
	padding-right: 14px !important;
}

.postbody h3,
.postbody h3 a {
	font-family: var(--vs-display) !important;
	color: var(--vs-ink) !important;
	font-size: 1.05rem !important;
}

.postbody .content,
.content {
	font-family: var(--vs-font) !important;
	font-size: 13px !important;
	color: var(--vs-text) !important;
	line-height: 1.55 !important;
}

/* Buttons — motion */
.button,
a.button1,
input.button1,
a.button2,
input.button2,
input.button3,
.pagination li a {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	color: var(--vs-ink) !important;
	border-radius: var(--vs-radius-pill) !important;
	font-family: var(--vs-font) !important;
	font-weight: 600 !important;
	font-size: 0.78rem !important;
	line-height: 1.35 !important;
	padding: 8px 16px !important;
	width: auto !important;
	height: auto !important;
	min-height: 34px !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	overflow: visible !important;
	box-shadow: var(--vs-elev-1) !important;
	text-shadow: none !important;
	transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), background var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease) !important;
}

.button:hover,
a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
.pagination li a:hover {
	background: var(--vs-teal-a10) !important;
	border-color: color-mix(in srgb, var(--vs-teal) 35%, transparent) !important;
	color: var(--vs-teal) !important;
	transform: translateY(-1px);
	box-shadow: var(--vs-elev-2) !important;
}

a.button1,
input.button1,
.button-search {
	background: var(--vs-accent-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 14px var(--vs-teal-a28) !important;
}

a.button1:hover,
input.button1:hover,
.button-search:hover {
	background: var(--vs-copper-grad) !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(196, 122, 58, 0.32) !important;
}

/* Icon / post toolbar buttons must stay compact (override .button min-height) */
.button-icon-only,
.post-buttons .button,
.format-buttons .button,
.search-header .button,
.button-search,
.button-search-end {
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 6px 10px !important;
	height: auto !important;
	width: auto !important;
	white-space: nowrap !important;
}

.pagination li.active span {
	background: var(--vs-accent-grad) !important;
	color: #fff !important;
	border-radius: var(--vs-radius-pill) !important;
	border: 0 !important;
	box-shadow: 0 3px 10px color-mix(in srgb, var(--vs-teal) 25%, transparent);
}

.badge {
	background: var(--vs-copper) !important;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(196, 122, 58, 0.35);
}

.inputbox,
select,
textarea {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	color: var(--vs-text) !important;
	font-family: var(--vs-font) !important;
	border-radius: var(--vs-radius-sm) !important;
	transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
}

.inputbox:focus,
textarea:focus,
select:focus {
	border-color: var(--vs-teal) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--vs-teal-a18);
}

blockquote,
.codebox,
.attachbox {
	background: color-mix(in srgb, var(--vs-teal) 6%, var(--vs-paper)) !important;
	border: 1px solid var(--vs-line) !important;
	border-left: 3px solid var(--vs-teal) !important;
	border-radius: var(--vs-radius-sm) !important;
	color: var(--vs-text) !important;
	box-shadow: var(--vs-elev-1);
}

.tabs .activetab > a,
.navigation .active-subsection a {
	background: var(--vs-teal-a12) !important;
	color: var(--vs-teal-deep) !important;
	border-color: transparent !important;
	border-radius: var(--vs-radius-sm) !important;
	box-shadow: var(--vs-elev-1);
}

.stat-block,
.stat-block.online-list,
.stat-block.birthday-list,
.stat-block.statistics {
	clear: both !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0.35em 0 0.4em !important;
	box-sizing: border-box !important;
}

.stat-block p,
.stat-block.online-list p,
.portal-whois-online-content,
.portal-whois-online-content p,
.portal-whois-online-content td,
dd.portal-whois-online-content {
	font-size: 11px !important;
	line-height: 1.45 !important;
	color: var(--vs-text) !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Portal widget titles only — do not shrink page / UCP h2 */
#portal-left h2,
#portal-right h2,
#portal-center h2,
#portal-top h2,
#portal-bottom h2,
.stat-block h2,
.stat-block h3,
.stat-block h3 a {
	font-family: var(--vs-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--vs-ink) !important;
	background: transparent !important;
	border: 0 !important;
}

#portal-left .portal-side,
#portal-right .portal-side,
#portal-left .portal-side-wrapper,
#portal-right .portal-side-wrapper {
	padding: 4px 6px !important;
	color: var(--vs-text) !important;
	text-align: left !important;
	overflow-wrap: anywhere;
}

/* Left rail: keep all widget copy flush left */
#portal-left,
#portal-left .forabg,
#portal-left .forabg .inner,
#portal-left li.header,
#portal-left li.header dt,
#portal-left li.header dd,
#portal-left li.header .list-inner,
#portal-left .portal-side,
#portal-left .portal-side-wrapper,
#portal-left .portal-navigation,
#portal-left .portal-navigation .menutitle,
#portal-left .portal-navigation ul,
#portal-left .portal-navigation ul li,
#portal-left .portal-navigation ul li a,
#portal-left .portal-user-span,
#portal-left .portal-text-span,
#portal-left .portal-title-span,
#portal-left .gensmall,
#portal-left .portal-module-content,
#portal-left .portal-centered-content {
	text-align: left !important;
}

#portal-left .portal-navigation ul li a {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	padding: 3px 2px !important;
	margin: 0 !important;
}

#portal-left .portal-user-annotation,
#portal-left .portal-data-span {
	text-align: right !important;
}

#portal-left .forabg,
#portal-right .forabg {
	margin-bottom: 4px !important;
	border-radius: var(--vs-radius-sm) !important;
}

#portal-body,
#portal-left .portal-side,
#portal-right .portal-side,
#portal-left .portal-module-content,
#portal-right .portal-module-content,
#portal-left .portal-navigation,
#portal-right .portal-navigation,
#portal-left .portal-navigation a,
#portal-right .portal-navigation a,
#portal-left .gensmall,
#portal-right .gensmall {
	font-size: 11px !important;
	line-height: 1.15 !important;
	color: var(--vs-text) !important;
}

.copyright {
	text-align: center;
	padding: 20px 24px 30px;
	color: var(--vs-muted);
	font-size: 0.72rem;
	letter-spacing: 0.01em;
}

.copyright a {
	color: var(--vs-teal) !important;
}

.footer-row {
	margin: 0.35em 0;
}

.vs-theme-credit {
	margin: 0.55em 0 0.25em !important;
}

.vs-theme-credit__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none !important;
	color: var(--vs-muted) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: color var(--vs-dur) var(--vs-ease);
}

.vs-theme-credit__name {
	font-family: var(--vs-display) !important;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--vs-teal) !important;
	letter-spacing: 0.01em;
}

.vs-theme-credit__sep {
	opacity: 0.55;
}

.vs-theme-credit__by {
	font-size: 0.72rem;
	text-transform: none;
	letter-spacing: 0.04em;
}

.vs-theme-credit__link:hover {
	color: var(--vs-teal) !important;
}

.vs-theme-credit__link:hover .vs-theme-credit__by {
	color: var(--vs-copper) !important;
}

/* Footer nav bar — rounded strip in Vespera colours */
#page-footer {
	padding: 0 16px 8px;
	box-sizing: border-box;
}

#page-footer .navbar {
	background:
		linear-gradient(135deg, var(--vs-teal-a07) 0%, transparent 55%),
		linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-paper) 100%) !important;
	background-color: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 14px !important;
	margin: 10px 0 4px !important;
	padding: 0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
	overflow: hidden;
}

#page-footer .navbar > .inner {
	padding: 8px 14px !important;
}

#page-footer .navbar ul.linklist,
#page-footer #nav-footer {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
}

#page-footer #nav-footer > li {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 0.78rem !important;
	line-height: 1.35 !important;
	color: var(--vs-muted) !important;
}

#page-footer #nav-footer > li.breadcrumbs {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 4px;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

#page-footer #nav-footer > li.rightside {
	flex: 0 0 auto;
	margin-left: 4px !important;
}

#page-footer #nav-footer a,
#page-footer #nav-footer a:link,
#page-footer #nav-footer a:visited,
#page-footer #nav-footer .crumb a,
#page-footer #nav-footer span {
	color: var(--vs-ink-soft) !important;
	font-family: var(--vs-font) !important;
	font-weight: 600 !important;
	text-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

#page-footer #nav-footer a:hover,
#page-footer #nav-footer .crumb a:hover {
	color: var(--vs-teal) !important;
}

#page-footer #nav-footer .icon,
#page-footer #nav-footer i,
#page-footer #nav-footer .opt-in-cookie-icon {
	color: var(--vs-teal) !important;
}

#page-footer #nav-footer .crumb + .crumb::before {
	content: "\203A";
	display: inline-block;
	margin: 0 6px 0 2px;
	color: var(--vs-muted);
	font-weight: 400;
}

#page-footer #nav-footer .breadcrumbs .crumb {
	float: none !important;
	display: inline-flex;
	align-items: center;
}

.dropdown .pointer,
.jumpbox .dropdown .pointer {
	border-color: color-mix(in srgb, var(--vs-teal) 28%, var(--vs-line)) transparent !important;
}

.dropdown .pointer-inner,
.jumpbox .dropdown .pointer-inner {
	border-color: var(--vs-surface) transparent !important;
}

.inputbox,
.button,
a.button1,
input.button1,
input.button3,
a.button2,
input.button2,
.pagination li a {
	background-image: none !important;
}

a.button1,
input.button1,
.button-search,
.button-search-end,
.search-box .button-search,
.search-box .button-search-end,
.search-header .button-search,
.search-header .button-search-end {
	background-image: none !important;
	background: var(--vs-accent-grad) !important;
	border: 0 !important;
	color: #fff !important;
}

a.button1:hover,
input.button1:hover,
.button-search:hover,
.button-search-end:hover,
.search-box .button-search:hover,
.search-box .button-search-end:hover,
.search-header .button-search:hover,
.search-header .button-search-end:hover {
	background-image: none !important;
	background: var(--vs-copper-grad) !important;
	color: #fff !important;
}

.button-search .icon,
.button-search i,
.button-search:hover .icon,
.button-search:hover i,
.button-search-end .icon,
.button-search-end i,
.button-search-end:hover .icon,
.button-search-end:hover i,
.search-box .button-search .icon,
.search-box .button-search i,
.search-box .button-search-end .icon,
.search-box .button-search-end i,
.search-header .button-search .icon,
.search-header .button-search i,
.search-header .button-search:hover .icon,
.search-header .button-search:hover i,
.search-header .button-search-end .icon,
.search-header .button-search-end i,
.search-header .button-search-end:hover .icon,
.search-header .button-search-end:hover i {
	color: #ffffff !important;
}

input#keywords::-webkit-input-placeholder,
input#search_keywords::-webkit-input-placeholder { color: var(--vs-muted); }
input#keywords::-moz-placeholder,
input#search_keywords::-moz-placeholder { color: var(--vs-muted); }
input#keywords:-ms-input-placeholder,
input#search_keywords:-ms-input-placeholder { color: var(--vs-muted); }

@media only screen and (max-width: 920px) {
	body { padding: 8px !important; }
	.wrap { border-radius: 14px !important; }
	.headerbar { border-radius: 14px 14px 0 0 !important; padding: 14px 16px 12px !important; }
	.headerbar::after { left: 16px; right: 16px; }
	#portal-page-body,
	#portal-body,
	.portal-body-wrapper {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media only screen and (max-width: 700px) {
	body { padding: 0 !important; }
	.wrap { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
	.headerbar { border-radius: 0 !important; }
	.site_logo { width: 58px !important; height: 58px !important; }
	li.row:hover { transform: none; }
	.vs-scroll-top { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* ===== Vespera 2.2 polish (cards · motion · chrome) ===== */

/* Soft sticky header — keep above portal columns */
.wrap > #page-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: linear-gradient(180deg, var(--vs-paper) 0%, color-mix(in srgb, var(--vs-paper) 92%, var(--vs-surface)) 100%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Round avatars */
.avatar,
img.avatar,
.header-avatar img,
.postprofile .avatar,
.postprofile img.avatar,
.online-list .avatar,
.stat-block .avatar {
	border-radius: 50% !important;
	box-shadow: 0 0 0 2px var(--vs-teal-a12);
}

/* Stat / online blocks as soft cards */
.stat-block,
.stat-block.online-list,
.stat-block.birthday-list,
.stat-block.statistics {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	box-shadow: var(--vs-elev-1) !important;
}

.stat-block h3,
.stat-block h3 a {
	color: var(--vs-teal) !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.72rem !important;
	margin: 0 0 8px !important;
	padding-bottom: 6px !important;
	border-bottom: 1px solid var(--vs-line) !important;
}

/* Portal side widgets — compact cards */
#portal-left .forabg,
#portal-right .forabg {
	box-shadow: var(--vs-elev-1) !important;
	border: 1px solid var(--vs-line) !important;
	overflow: hidden;
	transition: box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

#portal-left .forabg:hover,
#portal-right .forabg:hover {
	box-shadow: var(--vs-elev-2) !important;
}

#portal-left .portal-navigation ul li a:hover {
	background: var(--vs-teal-a08) !important;
	color: var(--vs-teal) !important;
	border-radius: 6px;
	box-shadow: none;
}

/* Form focus rings */
.inputbox:focus,
textarea.inputbox:focus,
select:focus,
input.inputbox:focus {
	border-color: var(--vs-teal) !important;
	box-shadow: 0 0 0 3px var(--vs-teal-a16) !important;
	outline: none !important;
}

/* Pagination active pill */
.pagination li.active span {
	background: var(--vs-accent-grad) !important;
	color: #fff !important;
	border-radius: var(--vs-radius-pill) !important;
	border: 0 !important;
	box-shadow: var(--vs-elev-1);
}

/* Scroll to top */
.vs-scroll-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 400;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vs-accent-grad) !important;
	color: #fff !important;
	box-shadow: var(--vs-elev-2);
	text-decoration: none !important;
	opacity: 0.92;
	transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
}

.vs-scroll-top:hover {
	opacity: 1;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px var(--vs-teal-a28);
	color: #fff !important;
}

.vs-scroll-top .icon {
	color: #fff !important;
	font-size: 1rem;
}

/* ===== Vespera dusk — portal left rail (night glass, not light cards) ===== */
#portal-left {
	--vs-rail-pad: 8px;
}

#portal-left .forabg {
	background:
		linear-gradient(165deg, color-mix(in srgb, var(--vs-teal) 6%, var(--vs-surface)) 0%, var(--vs-surface) 100%) !important;
	background-color: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 18px !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 10px 28px rgba(0, 0, 0, 0.35) !important;
	margin: 0 0 4px !important;
	overflow: hidden;
}

#portal-left .forabg > .inner {
	background: transparent !important;
}

#portal-left li.header {
	background: var(--vs-paper) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--vs-line) !important;
	padding: 4px 7px 4px 8px !important;
	position: relative;
}

#portal-left li.header::before {
	content: none;
}

#portal-left li.header dt,
#portal-left li.header dd,
#portal-left li.header a,
#portal-left li.header a:link,
#portal-left li.header a:visited,
#portal-left li.header a:hover,
#portal-left li.header .list-inner,
#portal-left li.header .list-inner *,
#portal-left li.header dt * {
	color: var(--vs-ink) !important;
	font-family: var(--vs-font) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	text-shadow: none !important;
}

#portal-left li.header img {
	filter: none;
	opacity: 0.9;
	vertical-align: -2px;
	margin-right: 4px;
	max-height: 14px;
	width: auto;
}

#portal-left ul.topiclist.forums {
	background: transparent !important;
	padding: 1px 0 !important;
}

#portal-left .portal-side,
#portal-left .portal-side-wrapper {
	padding: 2px 5px 3px !important;
	text-align: left !important;
}

#portal-left .portal-navigation ul {
	padding: 0 2px 2px !important;
	margin: 0 !important;
}

#portal-left .portal-navigation ul li {
	margin: 0 !important;
	padding-bottom: 0 !important;
}

#portal-left .portal-navigation ul li a {
	display: flex !important;
	align-items: center;
	gap: 5px;
	width: 100%;
	box-sizing: border-box;
	padding: 2px 7px !important;
	border-radius: 999px !important;
	font-size: 0.74rem !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: var(--vs-ink-soft) !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
	transform: none !important;
	transition: background var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

#portal-left .portal-navigation ul li a:hover {
	color: var(--vs-teal-soft) !important;
	background: var(--vs-teal-a10) !important;
	border-color: var(--vs-teal-a16) !important;
	box-shadow: none !important;
	transform: translateX(2px);
}

#portal-left .portal-navigation ul li a .icon,
#portal-left .portal-navigation ul li a i {
	color: var(--vs-teal) !important;
	width: 1.1em;
	text-align: center;
}

#portal-left .portal-navigation .menutitle {
	padding: 3px 8px 0 !important;
	font-size: 0.62rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--vs-muted) !important;
	text-align: left !important;
}

#portal-left .portal-user-span,
#portal-left .portal-text-span,
#portal-left .portal-side,
#portal-left .gensmall {
	font-size: 0.78rem !important;
	color: var(--vs-text) !important;
	text-align: left !important;
}

#portal-left .portal-user-annotation,
#portal-left .portal-data-span {
	text-align: right !important;
	font-size: 0.72rem !important;
	color: var(--vs-muted) !important;
}

#portal-left .portal-clock-wrapper {
	text-align: center !important;
	margin: 4px 4% !important;
}

/* ===== Portal final polish — match index language ===== */

#portal-page-body {
	padding: 12px 16px 24px !important;
}

#portal-body {
	padding-top: 4px !important;
}

/* Right rail — dusk cards */
#portal-right .forabg {
	background: var(--vs-surface) !important;
	border: 1px solid color-mix(in srgb, var(--vs-teal) 14%, var(--vs-line)) !important;
	border-radius: 18px !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 12px 30px rgba(0, 0, 0, 0.35) !important;
	margin: 0 0 4px !important;
	overflow: hidden;
	padding: 0 !important;
	transition: box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease);
}

#portal-right .forabg:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 36px color-mix(in srgb, var(--vs-teal) 12%, rgba(0, 0, 0, 0.4)) !important;
	border-color: color-mix(in srgb, var(--vs-teal) 28%, var(--vs-line)) !important;
}

#portal-right .forabg > .inner {
	background: transparent !important;
	padding: 0 !important;
}

/* fancy_panel title strip */
#portal-right li.header {
	background: linear-gradient(180deg, var(--vs-paper) 0%, var(--vs-surface) 100%) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--vs-line) !important;
	padding: 5px 10px 4px !important;
	position: relative;
}

#portal-right li.header::before {
	content: none;
}

#portal-right li.header::after {
	content: none;
}

#portal-right li.header dt,
#portal-right li.header dd,
#portal-right li.header a,
#portal-right li.header a:link,
#portal-right li.header a:visited,
#portal-right li.header a:hover,
#portal-right li.header .list-inner,
#portal-right li.header .list-inner *,
#portal-right li.header dt * {
	color: var(--vs-ink) !important;
	font-family: var(--vs-font) !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	text-shadow: none !important;
}

/* Glow + slow spin — ONLY right-rail module title icons (not forum list icons) */
#portal-right li.header dt > img,
#portal-right li.header dt > .b3p-icon,
#portal-right li.header dt > .fa,
#portal-right li.header dt > i.icon {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 6px;
	max-height: 16px;
	width: auto;
	color: var(--vs-teal) !important;
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--vs-teal) 55%, transparent));
	animation: vs-icon-orbit 6.5s var(--vs-ease) infinite;
	transform-origin: 50% 50%;
}

#portal-right .forabg:hover li.header dt > img,
#portal-right .forabg:hover li.header dt > .b3p-icon,
#portal-right .forabg:hover li.header dt > .fa,
#portal-right .forabg:hover li.header dt > i.icon {
	animation-duration: 2.8s;
	filter: drop-shadow(0 0 8px color-mix(in srgb, var(--vs-teal) 75%, transparent))
		drop-shadow(0 0 14px color-mix(in srgb, var(--vs-copper) 35%, transparent));
}

/* Forum/topic status glyphs — no portal orbit; glow via text-shadow/filter above */

@keyframes vs-icon-orbit {
	0% { transform: rotate(0deg) scale(1); }
	25% { transform: rotate(8deg) scale(1.06); }
	50% { transform: rotate(0deg) scale(1); }
	75% { transform: rotate(-8deg) scale(1.06); }
	100% { transform: rotate(0deg) scale(1); }
}

#portal-right ul.topiclist.forums {
	background: transparent !important;
	padding: 8px 4px 10px !important;
}

#portal-right .portal-side,
#portal-right .portal-side-wrapper {
	padding: 4px 8px 5px !important;
	text-align: left !important;
	font-size: 0.78rem !important;
	color: var(--vs-text) !important;
}

#portal-right .portal-navigation ul li {
	margin: 0 !important;
	padding-bottom: 0 !important;
}

#portal-right .portal-navigation ul li a {
	display: block !important;
	padding: 2px 8px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	color: var(--vs-ink-soft) !important;
	border: 1px solid transparent !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: background var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease), border-color var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
}

#portal-right .portal-navigation ul li a:hover {
	background: color-mix(in srgb, var(--vs-teal) 10%, transparent) !important;
	color: var(--vs-teal-deep) !important;
	border-color: color-mix(in srgb, var(--vs-teal) 16%, transparent) !important;
	transform: translateX(2px);
}

#portal-right .portal-navigation ul li a .icon,
#portal-right .portal-navigation ul li a i {
	color: var(--vs-teal) !important;
	margin-right: 4px;
}

#portal-right .portal-user-span,
#portal-right .portal-text-span,
#portal-right .gensmall {
	font-size: 0.78rem !important;
	text-align: left !important;
}

#portal-right .portal-user-annotation,
#portal-right .portal-data-span {
	text-align: right !important;
	font-size: 0.72rem !important;
	color: var(--vs-muted) !important;
}

#portal-right #portal-login-box,
#portal-right .panel {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}

#portal-right input.inputbox {
	border-radius: 12px !important;
	border-color: color-mix(in srgb, var(--vs-teal) 22%, var(--vs-line)) !important;
}

#portal-right .button,
#portal-right input.button1,
#portal-right input.button2 {
	border-radius: 999px !important;
}


/* Center column — index-grade module cards */
#portal-center .forabg,
#portal-top .forabg,
#portal-bottom .forabg {
	margin: 0 0 6px !important;
	border-radius: 18px !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 12px 32px rgba(0, 0, 0, 0.35) !important;
	overflow: hidden;
}

#portal-center .forabg:hover,
#portal-top .forabg:hover,
#portal-bottom .forabg:hover {
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 14px 36px rgba(0, 0, 0, 0.4) !important;
}

#portal-center li.header,
#portal-top li.header,
#portal-bottom li.header {
	padding: 11px 12px 10px !important;
	background:
		linear-gradient(105deg, var(--vs-teal-a22) 0%, transparent 42%),
		transparent !important;
}

#portal-center li.header dt,
#portal-center li.header dt *,
#portal-center li.header a,
#portal-center li.header a:link,
#portal-center li.header a:visited,
#portal-top li.header dt,
#portal-top li.header dt *,
#portal-bottom li.header dt,
#portal-bottom li.header dt * {
	font-family: var(--vs-display) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--vs-ink) !important;
	text-shadow: none !important;
}

#portal-center li.header img,
#portal-top li.header img,
#portal-bottom li.header img {
	filter: brightness(1.15);
	vertical-align: -3px;
	margin-right: 6px;
}

/* Center body panels sit flush under module headers */
#portal-center .panel,
#portal-center .post,
#portal-center .portal-no-margin,
#portal-top .panel,
#portal-bottom .panel {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	background: var(--vs-surface) !important;
}

#portal-center .forabg .panel,
#portal-center .forabg .post,
#portal-center .forabg ul.topiclist.bg1,
#portal-center .forabg .portal-module-postbody {
	border-radius: 0 0 16px 16px !important;
}

#portal-center .portal-whois-online-content,
#portal-center dd.portal-whois-online-content,
#portal-center .portal-module-content,
#portal-center .portal-navigation {
	padding: 12px 16px !important;
	font-size: 0.84rem !important;
	line-height: 1.3 !important;
	color: var(--vs-text) !important;
	text-align: left !important;
}

/* Compact portal list rows (menus + Recent links) */
#portal-center .portal-recent-column a,
#portal-center .portal-module-postbody .gensmall > a,
#portal-center .portal-navigation .gensmall > a {
	display: block !important;
	padding: 2px 0 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}

#portal-center .portal-navigation ul,
#portal-left .portal-navigation ul,
#portal-right .portal-navigation ul {
	margin-bottom: 2px !important;
}

#portal-left > .portal-clear,
#portal-right > .portal-clear,
#portal-center > .portal-clear,
#portal-body > .portal-clear {
	display: block !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	clear: both;
}

#portal-center .portal-whois-online-content strong,
#portal-center .portal-module-content strong {
	color: var(--vs-ink) !important;
}

#portal-center .menutitle,
#portal-center .menutitle td,
#portal-center .menutitle strong {
	font-family: var(--vs-font) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--vs-teal) !important;
	text-decoration: none !important;
	padding: 4px 0 !important;
}

#portal-center .portal-module-postbody a:not(.username-coloured),
#portal-center .portal-whois-online-content a:not(.username-coloured) {
	font-weight: 600 !important;
}

/* Welcome / announcement post bodies */
#portal-center .postbody,
#portal-center .content {
	font-size: 0.88rem !important;
	line-height: 1.55 !important;
	color: var(--vs-text) !important;
}

#portal-center .b3p-post {
	padding: 4px 8px 10px !important;
}

@media only screen and (max-width: 920px) {
	#portal-center .forabg:hover,
	#portal-top .forabg:hover,
	#portal-bottom .forabg:hover {
		transform: none;
	}
}

/* ===== Index / forumlist beautify (index.php focus) ===== */

/* Side padding for forum pages — not Board3 portal (often section-index as start) */
body:not(.section-portal) #page-body {
	padding: 10px 20px 28px !important;
	box-sizing: border-box !important;
}

#page-body:has(#portal-center),
#page-body:has(#portal-body),
.section-portal #page-body {
	padding: 8px 0 16px !important;
}

/* Category cards — clearer strip + body */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forabg,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forumbg {
	margin: 0 0 18px !important;
	border-radius: 18px !important;
	border-top-left-radius: 18px !important;
	border-top-right-radius: 18px !important;
	border-bottom-left-radius: 18px !important;
	border-bottom-right-radius: 18px !important;
	background: var(--vs-surface) !important;
	border: 1px solid color-mix(in srgb, var(--vs-teal) 12%, var(--vs-line)) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 12px 32px rgba(21, 32, 43, 0.12) !important;
	overflow: hidden !important;
	isolation: isolate;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forabg > .inner,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forumbg > .inner {
	border-radius: inherit !important;
	overflow: hidden !important;
	background: transparent !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forabg:hover,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forumbg:hover {
	transform: translateY(-2px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 16px 40px rgba(21, 32, 43, 0.16) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header {
	padding: 8px 12px 7px !important;
	border-radius: 18px 18px 0 0 !important;
	background:
		linear-gradient(105deg, var(--vs-teal-a22) 0%, transparent 42%),
		var(--vs-surface) !important;
}

/* Header list + body list both inherit card rounding (fixes square left edge) */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forabg > .inner > ul.topiclist:first-child {
	background: var(--vs-surface) !important;
	border-radius: 18px 18px 0 0 !important;
	overflow: hidden !important;
}

/* Category name — display type, soft white for hierarchy */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt.list-inner,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner a,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner a:link,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner a:visited,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner a:hover {
	font-family: var(--vs-display) !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--vs-ink) !important;
	padding-left: 10px !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt .list-inner .fa,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dt.list-inner .fa {
	color: var(--vs-copper-hot) !important;
	margin-right: 6px;
}

/* Column labels (Başlıklar / Mesajlar / Son mesaj) */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dd,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dd *,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dd strong {
	color: rgba(244, 250, 249, 0.58) !important;
	font-family: var(--vs-font) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums {
	background: var(--vs-surface) !important;
	padding: 4px 0 2px !important;
	border-radius: 0 0 18px 18px !important;
	overflow: hidden;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row {
	padding: 10px 6px 10px 10px !important;
	margin: 0 4px !important;
	border-radius: 12px !important;
	border-bottom: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:first-child {
	padding-top: 12px !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:nth-child(even),
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row.bg2 {
	background: var(--vs-teal-a04) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:hover {
	background: var(--vs-teal-a08) !important;
	box-shadow: inset 3px 0 0 var(--vs-teal);
	transform: none;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row > dl.row-item {
	min-height: 60px;
	align-items: center;
	position: relative;
	overflow: visible !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) a.forumtitle {
	font-size: 0.98rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	color: var(--vs-ink) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) a.forumtitle:hover {
	color: var(--vs-teal) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forum-description,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.row .list-inner {
	color: var(--vs-muted) !important;
	font-size: 0.8rem !important;
	line-height: 1.4 !important;
}

/* Topic / post counts as soft chips */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.topics,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.posts {
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var(--vs-ink-soft) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.topics *,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.posts * {
	color: inherit !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.lastpost {
	font-size: 0.76rem !important;
	line-height: 1.45 !important;
	color: var(--vs-muted) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row dd.lastpost a:not(.username-coloured) {
	color: var(--vs-teal) !important;
	font-weight: 600 !important;
}

/* Forum status icons — CSS masks follow presets; effect on unread + important */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .row-item:before {
	width: 50px !important;
	height: 50px !important;
	line-height: 50px !important;
	left: 9px !important;
	top: 50% !important;
	margin-top: 0 !important;
	font-size: 0 !important;
	font-family: inherit !important;
	background-image: none !important;
	background-color: var(--vs-teal-soft) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: transparent !important;
	text-shadow: none !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	-webkit-mask-size: 44px 44px !important;
	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	mask-size: 44px 44px !important;
	mask-repeat: no-repeat !important;
	mask-position: center !important;
	filter: none !important;
	transform: translateY(-50%) !important;
	animation: none !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row > dl.row-item {
	background-image: none !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_read:before,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_read_subforum:before {
	background-image: none !important;
	background-color: var(--vs-teal-soft) !important;
	-webkit-mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	-webkit-mask-size: 44px 44px !important;
	mask-image: url("./images/vs-topic-mark.svg?v=354") !important;
	mask-size: 44px 44px !important;
	filter: none !important;
	animation: none !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:hover .forum_read:before,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:hover .forum_read_subforum:before {
	transform: translateY(-50%) scale(1.06) !important;
	background-image: none !important;
	background-color: var(--vs-teal) !important;
	filter: none !important;
	animation: none !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:hover .forum_unread:before,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row:hover .forum_unread_subforum:before {
	transform: translateY(-50%) scale(1.1) !important;
	background-color: color-mix(in srgb, #ffffff 58%, var(--vs-teal)) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_unread:before,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_unread_subforum:before {
	background-image: none !important;
	background-color: #f2fbfd !important;
	color: transparent !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-teal) 70%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-teal) 45%, transparent)) !important;
	animation: vs-forum-ring-pulse 0.9s ease-in-out infinite !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_important:before {
	background-image: none !important;
	background-color: #f0b070 !important;
	color: transparent !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	filter:
		drop-shadow(0 0 8px color-mix(in srgb, var(--vs-copper) 80%, transparent))
		drop-shadow(0 0 18px color-mix(in srgb, var(--vs-copper-hot) 50%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 1.15s ease-in-out infinite !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_important_unread:before {
	background-image: none !important;
	background-color: #ffc48a !important;
	color: transparent !important;
	-webkit-mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	-webkit-mask-size: 42px 42px, 54px 54px !important;
	-webkit-mask-repeat: no-repeat, no-repeat !important;
	-webkit-mask-position: center, center !important;
	mask-image:
		url("./images/vs-topic-mark.svg?v=354"),
		url("./images/vs-forum-ring.svg?v=366") !important;
	mask-size: 42px 42px, 54px 54px !important;
	mask-repeat: no-repeat, no-repeat !important;
	mask-position: center, center !important;
	filter:
		drop-shadow(0 0 10px color-mix(in srgb, var(--vs-copper-hot) 90%, #fff))
		drop-shadow(0 0 22px color-mix(in srgb, var(--vs-copper) 60%, transparent)) !important;
	animation: vs-forum-ring-pulse-copper 0.75s ease-in-out infinite !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_unread_locked:before {
	content: "\f023" !important;
	font-family: FontAwesome !important;
	font-size: 22px !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	color: var(--vs-copper-hot) !important;
	animation: vs-locked-pulse 1.45s ease-out infinite !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_read_locked:before {
	content: "\f023" !important;
	font-family: FontAwesome !important;
	font-size: 22px !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	color: var(--vs-copper-hot) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_link:before {
	content: "\f08e" !important;
	font-family: FontAwesome !important;
	font-size: 20px !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	color: var(--vs-teal-soft) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_unread_locked:after,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_read_locked:after,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forums .forum_link:after {
	content: none !important;
	display: none !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.row > dl.row-item dt .list-inner {
	padding-left: 70px !important;
	padding-right: 8px !important;
}

/* Action bar + mark read */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .action-bar {
	margin: 4px 0 14px !important;
	padding: 8px 12px !important;
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 12px !important;
	box-shadow: var(--vs-elev-1);
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .action-bar a,
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) a.mark {
	font-weight: 600 !important;
	font-size: 0.78rem !important;
}

/* Collapse affordance */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .collapse-btn {
	color: rgba(244, 250, 249, 0.7) !important;
	opacity: 0.85;
	transition: opacity var(--vs-dur) var(--vs-ease), color var(--vs-dur) var(--vs-ease);
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .collapse-btn:hover {
	color: var(--vs-copper-hot) !important;
	opacity: 1;
}

/* Welcome / custom category rows without standard forum layout */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.icon {
	background: var(--vs-surface) !important;
	padding: 16px 18px !important;
	color: var(--vs-text) !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) ul.topiclist.forums > li.icon dl {
	color: var(--vs-ink-soft) !important;
}

/* Bottom stats already carded — tighten index stack */
#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .stat-block {
	margin: 12px 0 0 !important;
}

#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .stat-block + .stat-block {
	margin-top: 10px !important;
}

@media only screen and (max-width: 700px) {
	#page-body:not(:has(#portal-center)):not(:has(#portal-body)) {
		padding: 8px 10px 20px !important;
	}

	#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dd.topics,
	#page-body:not(:has(#portal-center)):not(:has(#portal-body)) li.header dd.posts {
		display: none !important;
	}

	#page-body:not(:has(#portal-center)):not(:has(#portal-body)) .forabg:hover {
		transform: none;
	}
}

/* ===== One-click colour presets ===== */
.vs-color-presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 16px 4px;
	padding: 10px 12px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--vs-teal) 8%, transparent), transparent 55%),
		var(--vs-surface);
	border: 1px solid var(--vs-line);
	border-radius: 14px;
	box-shadow: var(--vs-elev-1);
}

.vs-color-presets__label {
	width: 100%;
	text-align: center;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vs-muted);
	margin-bottom: 2px;
}

.vs-color-presets__btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--vs-surface);
	box-shadow: 0 0 0 1px var(--vs-line), 0 4px 10px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	padding: 0;
	background: var(--vs-swatch, var(--vs-teal));
	transition: transform var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease);
	animation: vs-icon-orbit 7s var(--vs-ease) infinite;
}

.vs-color-presets__btn:hover,
.vs-color-presets__btn.is-active {
	transform: scale(1.12);
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--vs-swatch, var(--vs-teal)) 50%, #fff),
		0 0 14px color-mix(in srgb, var(--vs-swatch, var(--vs-teal)) 55%, transparent);
	animation-duration: 2.4s;
}

/* Dusk-tuned presets — accents stay readable on night surfaces */
html[data-vs-preset="teal"] {
	--vs-teal: #6a9eb0;
	--vs-teal-deep: #3d6f7e;
	--vs-teal-soft: #8bb4c4;
	--vs-copper: #d4a06a;
	--vs-copper-hot: #e8bc84;
}
/* Classic FI SubIce — ice blue + silver */
html[data-vs-preset="subice"] {
	--vs-teal: #7a9ab8;
	--vs-teal-deep: #4a6580;
	--vs-teal-soft: #a4bdd4;
	--vs-copper: #b8c4ce;
	--vs-copper-hot: #d2dbe3;
}
html[data-vs-preset="violet"] {
	--vs-teal: #9b8cff;
	--vs-teal-deep: #6b5ce0;
	--vs-teal-soft: #c4bbff;
	--vs-copper: #f0a0c0;
	--vs-copper-hot: #ffc0e0;
}
html[data-vs-preset="rose"] {
	--vs-teal: #d47890;
	--vs-teal-deep: #a84e66;
	--vs-teal-soft: #e8a0b4;
	--vs-copper: #e8b078;
	--vs-copper-hot: #f0c898;
}
html[data-vs-preset="forest"] {
	--vs-teal: #5fa88a;
	--vs-teal-deep: #3d7a60;
	--vs-teal-soft: #8ec4a8;
	--vs-copper: #d4a878;
	--vs-copper-hot: #e8c090;
}
html[data-vs-preset="ocean"] {
	--vs-teal: #4a9ec8;
	--vs-teal-deep: #2a6a90;
	--vs-teal-soft: #78c0e0;
	--vs-copper: #e0a878;
	--vs-copper-hot: #f0c090;
}
html[data-vs-preset="ember"] {
	--vs-teal: #e88850;
	--vs-teal-deep: #c05828;
	--vs-teal-soft: #f0a878;
	--vs-copper: #f0c090;
	--vs-copper-hot: #f8d8b0;
}
html[data-vs-preset="slate"] {
	--vs-teal: #8a96a4;
	--vs-teal-deep: #5c6674;
	--vs-teal-soft: #b0bac6;
	--vs-copper: #c4b090;
	--vs-copper-hot: #d8c8a8;
}

html[data-vs-preset] {
	--vs-accent-grad: linear-gradient(135deg, var(--vs-teal) 0%, color-mix(in srgb, var(--vs-teal) 70%, var(--vs-teal-deep)) 55%, var(--vs-teal-deep) 100%);
	--vs-accent-bar: linear-gradient(90deg, var(--vs-teal) 0%, var(--vs-copper) 52%, transparent 100%);
	--vs-copper-grad: linear-gradient(135deg, var(--vs-copper-hot), var(--vs-copper));
	/* Keep category strips night-dark; never derive from light ink */
	--vs-cat-grad: linear-gradient(118deg, #080c14 0%, #1a2034 46%, color-mix(in srgb, var(--vs-teal-deep) 42%, #12182a) 100%);
}

@media (prefers-reduced-motion: reduce) {
	#portal-right li.header img,
	#portal-right li.header .fa,
	#portal-right li.header .icon,
	#portal-right li.header i,
	.vs-color-presets__btn {
		animation: none !important;
	}
}

/* ===== Vespera 2.5 — command palette (Ctrl/Cmd+K) =====
   Discourse-style quick jump
*/
/* Header tools: under logo (left) · Ara opposite (right), same baseline */
.vs-header-tools {
	float: none;
	clear: both;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 12px 0 0;
	box-sizing: border-box;
}

.vs-header-tools .search-header {
	float: none !important;
	margin: 0 0 0 auto !important;
	display: flex !important;
	align-items: center;
}

.vs-cmd-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius-pill);
	background: var(--vs-surface) !important;
	color: var(--vs-text) !important;
	box-shadow: var(--vs-elev-1);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform var(--vs-dur) var(--vs-ease);
	flex: 0 0 auto;
	white-space: nowrap;
	line-height: 1;
}

.vs-cmd-trigger .icon {
	color: var(--vs-teal) !important;
	font-size: 0.9rem;
}

.vs-cmd-trigger kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 4px;
	border-radius: 6px;
	border: 1px solid var(--vs-line);
	background: var(--vs-paper);
	color: var(--vs-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.65rem;
	font-weight: 700;
}

.vs-cmd-trigger:hover,
.vs-cmd-trigger:focus {
	transform: translateY(-1px);
	border-color: color-mix(in srgb, var(--vs-teal) 45%, transparent) !important;
	box-shadow:
		0 0 0 2px color-mix(in srgb, var(--vs-teal) 22%, transparent),
		0 10px 22px color-mix(in srgb, var(--vs-teal) 22%, rgba(21, 32, 43, 0.12)) !important;
	outline: 0;
}

html.vs-cmd-open {
	overflow: hidden;
}

.vs-cmd[hidden] {
	display: none !important;
}

.vs-cmd {
	position: fixed;
	inset: 0;
	z-index: 5000;
	display: grid;
	place-items: start center;
	padding: 12vh 16px 24px;
}

.vs-cmd__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--vs-ink) 48%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.vs-cmd__panel {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	max-height: min(70vh, 640px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--vs-teal) 28%, var(--vs-line));
	background:
		radial-gradient(900px 220px at 12% -20%, color-mix(in srgb, var(--vs-teal) 14%, transparent), transparent 55%),
		linear-gradient(180deg, var(--vs-surface) 0%, var(--vs-paper) 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 28px 64px rgba(0, 0, 0, 0.55);
	animation: vs-cmd-in 0.18s var(--vs-ease);
}

@keyframes vs-cmd-in {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.vs-cmd__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--vs-line);
}

.vs-cmd__search > .icon {
	color: var(--vs-teal) !important;
	font-size: 1.05rem;
}

.vs-cmd__input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--vs-ink);
	font: inherit;
	font-size: 1.02rem;
	font-weight: 550;
}

.vs-cmd__input::placeholder {
	color: var(--vs-muted);
	font-weight: 450;
}

.vs-cmd__kbd {
	padding: 2px 7px;
	border-radius: 7px;
	border: 1px solid var(--vs-line);
	background: var(--vs-surface);
	color: var(--vs-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 700;
}

.vs-cmd__hint {
	padding: 8px 16px 0;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vs-muted);
}

.vs-cmd__list {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow: auto;
	flex: 1;
}

.vs-cmd__group {
	padding: 10px 10px 4px;
	font-size: 0.68rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vs-muted);
}

.vs-cmd__item {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	cursor: pointer;
	color: var(--vs-ink);
	transition: background 0.12s var(--vs-ease), transform 0.12s var(--vs-ease);
}

.vs-cmd__item .icon {
	color: var(--vs-teal) !important;
}

.vs-cmd__item.is-active,
.vs-cmd__item:hover {
	background: color-mix(in srgb, var(--vs-teal) 12%, transparent);
	transform: translateX(2px);
}

.vs-cmd__label {
	font-size: 0.92rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vs-cmd__tag {
	font-size: 0.68rem;
	font-weight: 650;
	color: var(--vs-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.vs-cmd__empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--vs-muted);
	font-size: 0.9rem;
}

.vs-cmd__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	padding: 10px 14px 12px;
	border-top: 1px solid var(--vs-line);
	font-size: 0.7rem;
	font-weight: 650;
	color: var(--vs-muted);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.vs-cmd-trigger__label {
		display: none;
	}
	.vs-cmd {
		padding: 8vh 10px 16px;
	}
	.vs-cmd__panel {
		max-height: 78vh;
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vs-cmd__panel {
		animation: none;
	}
	.vs-cmd__item.is-active,
	.vs-cmd__item:hover {
		transform: none;
	}
	.global_unread:before,
	.global_unread_mine:before,
	.global_unread_locked:before,
	.global_unread_locked_mine:before,
	.announce_unread:before,
	.announce_unread_mine:before,
	.announce_unread_locked:before,
	.announce_unread_locked_mine:before,
	.forum_unread:before,
	.forum_unread_locked:before,
	.forum_unread_subforum:before,
	.sticky_unread:before,
	.sticky_unread_mine:before,
	.sticky_unread_locked:before,
	.sticky_unread_locked_mine:before,
	.pm_unread:before,
	.topic_unread:before,
	.topic_unread_mine:before,
	.topic_unread_hot:before,
	.topic_unread_hot_mine:before,
	.topic_unread_locked:before,
	.topic_unread_locked_mine:before,
	#page-body .forums .forum_unread:before,
	#page-body .forums .forum_unread_subforum:before,
	#page-body .forums .forum_unread_locked:before,
	.forums .forum_read:before,
	.forums .forum_read_subforum:before,
	.forums .forum_unread:before,
	.forums .forum_unread_subforum:before,
	.forums .forum_important:before,
	.forums .forum_important_unread:before,
	ul.topiclist.forums .forum_read:before,
	ul.topiclist.forums .forum_read_subforum:before,
	ul.topiclist.forums .forum_unread:before,
	ul.topiclist.forums .forum_unread_subforum:before,
	ul.topiclist.forums .forum_important:before,
	ul.topiclist.forums .forum_important_unread:before {
		animation: none !important;
		opacity: 0.96 !important;
	}
}

/* Unread / locked pulse — glyph halo (no square plate) */
@keyframes vs-unread-pulse {
	0%, 100% { opacity: 0.82; }
	70% { opacity: 1; }
}

@keyframes vs-locked-pulse {
	0%, 100% { opacity: 0.84; }
	70% { opacity: 1; }
}

@keyframes vs-forum-ring-pulse {
	0%, 100% {
		opacity: 0.42;
		transform: translateY(-50%) scale(0.9);
		filter: drop-shadow(0 0 0 transparent);
	}
	50% {
		opacity: 1;
		transform: translateY(-50%) scale(1.14);
		filter:
			drop-shadow(0 0 6px color-mix(in srgb, var(--vs-teal) 95%, #fff))
			drop-shadow(0 0 16px color-mix(in srgb, var(--vs-teal) 70%, transparent))
			drop-shadow(0 0 28px color-mix(in srgb, var(--vs-teal) 45%, transparent));
	}
}

@keyframes vs-forum-ring-pulse-copper {
	0%, 100% {
		opacity: 0.48;
		transform: translateY(-50%) scale(0.9);
		filter: drop-shadow(0 0 0 transparent);
	}
	50% {
		opacity: 1;
		transform: translateY(-50%) scale(1.16);
		filter:
			drop-shadow(0 0 6px color-mix(in srgb, var(--vs-copper-hot) 95%, #fff))
			drop-shadow(0 0 16px color-mix(in srgb, var(--vs-copper) 75%, transparent))
			drop-shadow(0 0 28px color-mix(in srgb, var(--vs-copper) 50%, transparent));
	}
}

/* ===== UCP polish (zip-safe) — tested, layout-first ===== */

/* Page / UCP titles — readable again */
h2.login-title,
h2.ucp-title,
h2.sitename-title,
.cp-main > h2,
#cp-main > h2,
.panel-container > h2,
#page-body .panel .content > h2,
#page-body .panel .content > h3 {
	font-family: var(--vs-font) !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var(--vs-ink) !important;
	clear: none !important;
	float: none !important;
	margin: 0 0 12px !important;
	padding: 0 0 8px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--vs-line) !important;
	line-height: 1.3 !important;
}

/* Two-column UCP/MCP: flex so content never covers the menu */
.panel.bg3 > .inner > div[style*="width"] {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

#cp-menu.cp-menu {
	float: none !important;
	flex: 0 0 210px !important;
	width: 210px !important;
	max-width: 100% !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
}

#cp-main.cp-main {
	float: none !important;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 1 !important;
	box-sizing: border-box !important;
}

.cp-menu .navigation {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 12px !important;
	padding: 6px !important;
	box-sizing: border-box !important;
}

.cp-menu .navigation a {
	display: block !important;
	padding: 8px 10px !important;
	border-radius: 8px !important;
	color: var(--vs-ink-soft) !important;
	background: transparent !important;
}

.cp-menu .navigation .active-subsection a,
.cp-menu .navigation a:hover {
	background: var(--vs-teal-a10) !important;
	color: var(--vs-teal-deep) !important;
}

/* Group headers (Üyelikler) — dusk surface, not light wash */
#cp-main li.header,
.cp-main li.header,
.panel-container li.header {
	background: color-mix(in srgb, var(--vs-teal) 10%, var(--vs-surface)) !important;
	background-image: none !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 10px !important;
	padding: 8px 12px !important;
	margin: 0 0 6px !important;
}

#cp-main li.header dt,
#cp-main li.header dd,
#cp-main li.header a,
#cp-main li.header .list-inner,
#cp-main li.header dt .list-inner,
#cp-main li.header dt .list-inner a,
#cp-main li.header dt .list-inner a:link,
#cp-main li.header dt .list-inner a:visited,
#cp-main li.header dt .list-inner a:hover,
#cp-main li.header dd *,
.cp-main li.header dt,
.cp-main li.header dd,
.cp-main li.header .list-inner,
.cp-main li.header dt .list-inner,
.panel-container li.header dt,
.panel-container li.header dd,
.panel-container li.header .list-inner {
	color: var(--vs-ink) !important;
	text-shadow: none !important;
	text-transform: none !important;
	font-family: var(--vs-font) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
}

#cp-main li.header dd,
#cp-main li.header dd *,
.cp-main li.header dd,
.cp-main li.header dd * {
	color: var(--vs-muted) !important;
	font-size: 0.7rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* UCP list rows — keep light, no hover lift overlap */
#cp-main li.row,
.cp-main li.row,
.panel-container li.row {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 10px !important;
	margin: 0 0 6px !important;
	padding: 8px 10px !important;
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

#cp-main li.row.bg2,
.cp-main li.row.bg2 {
	background: color-mix(in srgb, var(--vs-teal) 5%, var(--vs-surface)) !important;
}

#cp-main li.row:hover,
.cp-main li.row:hover {
	background: color-mix(in srgb, var(--vs-teal) 8%, var(--vs-surface)) !important;
	transform: none !important;
	box-shadow: none !important;
}

#cp-main li.row .list-inner,
#cp-main li.row dd,
#cp-main dd.mark {
	background: transparent !important;
	box-shadow: none !important;
}

/* PM / action buttons (Yeni ÖM) stay readable pills — not primary button1 */
#cp-main .action-bar .button:not(.button1),
#cp-main a.button:not(.button1) {
	padding: 8px 14px !important;
	min-height: 34px !important;
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	color: var(--vs-ink) !important;
}

#cp-main .action-bar .button:not(.button1):hover,
#cp-main a.button:not(.button1):hover {
	background: var(--vs-teal-a10) !important;
	color: var(--vs-teal-deep) !important;
}

/* Form buttons — sized pills; only button1 is primary sitewide */
#page-body input.button1,
#page-body a.button1,
#page-body input.button2,
#page-body a.button2 {
	display: inline-block !important;
	width: auto !important;
	min-width: 5.5em !important;
	padding: 9px 18px !important;
}

#page-body input.button1,
#page-body a.button1 {
	background: var(--vs-accent-grad) !important;
	background-color: var(--vs-teal) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--vs-teal) 28%, transparent) !important;
}

#page-body input.button1:hover,
#page-body a.button1:hover {
	background: var(--vs-copper-grad) !important;
	background-color: var(--vs-copper) !important;
	color: #fff !important;
}

#page-body input.button2,
#page-body a.button2 {
	background: var(--vs-surface) !important;
	border: 1px solid var(--vs-line) !important;
	color: var(--vs-ink) !important;
	box-shadow: var(--vs-elev-1) !important;
}

#page-body input.button2:hover,
#page-body a.button2:hover {
	background: var(--vs-teal-a10) !important;
	border-color: color-mix(in srgb, var(--vs-teal) 35%, var(--vs-line)) !important;
	color: var(--vs-teal-deep) !important;
}

/* UCP submits (e.g. Varsayılan grubu değiştir) stay teal CTAs */
#cp-main input.button2,
#cp-main a.button2 {
	background: var(--vs-accent-grad) !important;
	background-color: var(--vs-teal) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--vs-teal) 28%, transparent) !important;
}

#cp-main input.button2:hover,
#cp-main a.button2:hover {
	background: var(--vs-copper-grad) !important;
	background-color: var(--vs-copper) !important;
	color: #fff !important;
}

/* Keep floated submit boxes inside UCP shell */
#cp-main fieldset,
.cp-main fieldset {
	display: block !important;
	width: 100% !important;
	clear: both !important;
	margin: 12px 0 4px !important;
	padding: 4px 0 8px !important;
	border: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

#cp-main fieldset::after,
.cp-main fieldset::after {
	content: "";
	display: table;
	clear: both;
}

#cp-main .left-box,
#cp-main .right-box {
	margin: 4px 0 8px !important;
	background: transparent !important;
	border: 0 !important;
}

@media only screen and (max-width: 900px) {
	.panel.bg3 > .inner > div[style*="width"] {
		flex-direction: column !important;
	}
	#cp-menu.cp-menu,
	#cp-main.cp-main {
		flex: 1 1 auto !important;
		width: 100% !important;
	}
}

/* ===== Vespera dusk polish — evening star pass ===== */
.navbar,
.breadcrumbs,
.vs-color-presets,
.dropdown-contents,
.dropdown,
.cp-menu .navigation,
#cp-main li.row,
.panel-container li.row {
	background-color: var(--vs-surface) !important;
}

.inputbox,
select,
textarea,
.message-box textarea {
	background: color-mix(in srgb, var(--vs-paper) 70%, var(--vs-surface)) !important;
	color: var(--vs-text) !important;
	border-color: var(--vs-line) !important;
}

a.button2,
input.button2,
#page-body input.button2,
#page-body a.button2 {
	background: color-mix(in srgb, var(--vs-surface) 88%, #000) !important;
	color: var(--vs-ink) !important;
	border-color: var(--vs-line) !important;
}

.search-header .button-search-end,
.button-search-end,
.search-box .button-search-end,
#page-header .button-search-end,
#page-body .button-search-end,
.action-bar .button-search-end {
	background: var(--vs-accent-grad) !important;
	background-color: var(--vs-teal) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 4px 12px var(--vs-teal-a28) !important;
}

.button-search .icon,
.button-search i,
.button-search-end .icon,
.button-search-end i,
.search-box .button-search .icon,
.search-box .button-search i,
.search-box .button-search-end .icon,
.search-box .button-search-end i,
.search-header .button-search .icon,
.search-header .button-search i,
.search-header .button-search-end .icon,
.search-header .button-search-end i,
#page-header .button-search .icon,
#page-header .button-search i,
#page-header .button-search-end .icon,
#page-header .button-search-end i,
#page-body .button-search .icon,
#page-body .button-search i,
#page-body .button-search-end .icon,
#page-body .button-search-end i {
	color: #ffffff !important;
}

/* Soft near-surface wash instead of pure white panels */
.panel,
.panel .inner,
.bg1,
.bg2,
.bg3 {
	background-image: none !important;
}

#cp-main li.header,
.cp-main li.header,
.panel-container li.header {
	background: color-mix(in srgb, var(--vs-teal) 12%, var(--vs-surface)) !important;
}

#cp-main li.header dt,
#cp-main li.header .list-inner,
.cp-main li.header .list-inner {
	color: var(--vs-ink) !important;
}

/* Portal: keep module bodies night-surface (no light leaks) */
#portal-left .portal-side,
#portal-right .portal-side,
#portal-left .portal-side-wrapper,
#portal-right .portal-side-wrapper,
#portal-center .portal-side,
#portal-center .portal-module-content,
#portal-left .portal-navigation,
#portal-right .portal-navigation,
#portal-left ul.topiclist.forums > li,
#portal-right ul.topiclist.forums > li {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--vs-text) !important;
}

/* Inline BBCode / calendar dark text → readable on dusk */
#page-body [style*="color:#000"],
#page-body [style*="color: #000"],
#page-body [style*="color:#000000"],
#page-body [style*="color: #000000"],
#portal-body [style*="color:#000"],
#portal-body [style*="color: #000"],
#portal-body [style*="color:#000000"],
#portal-body [style*="color: #000000"],
.content [style*="color:#000"],
.content [style*="color: #000"],
.content [style*="color:#000000"],
.content [style*="color: #000000"] {
	color: var(--vs-ink) !important;
}

/* Soften harsh announcement purple on dark canvas */
#page-body [style*="color:#8000FF"],
#page-body [style*="color: #8000FF"],
#page-body [style*="color:#8000ff"],
#page-body [style*="color: #8000ff"],
#portal-body [style*="color:#8000FF"],
#portal-body [style*="color: #8000FF"],
#portal-body [style*="color:#8000ff"],
#portal-body [style*="color: #8000ff"],
.content [style*="color:#8000FF"],
.content [style*="color: #8000FF"],
.content [style*="color:#8000ff"],
.content [style*="color: #8000ff"] {
	color: #c9b0ff !important;
}

/* Soften admin-red usernames slightly for dusk (keep identity) */
a.username-coloured[style*="#AA0000"],
a.username-coloured[style*="#aa0000"],
a.username-coloured[style*="#BF0000"],
a.username-coloured[style*="#bf0000"] {
	color: #e07070 !important;
}

/* Footer social / icon tiles — no bright white boxes */
#page-footer .icon,
.copyright .icon,
.footer-row .icon,
a[href*="instagram"] .icon,
a[href*="youtube"] .icon,
a[href*="wordpress"] .icon {
	background: color-mix(in srgb, var(--vs-teal) 10%, var(--vs-surface)) !important;
	border: 1px solid var(--vs-line) !important;
	border-radius: 8px !important;
	color: var(--vs-ink-soft) !important;
	box-shadow: none !important;
}

/* Cookie consent — dusk chrome */
.cc-window {
	background: var(--vs-surface) !important;
	color: var(--vs-text) !important;
	border: 1px solid var(--vs-line) !important;
	box-shadow: var(--vs-elev-2) !important;
}
.cc-btn.cc-dismiss,
.cc-btn.cc-allow {
	background: var(--vs-accent-grad) !important;
	color: #fff !important;
	border-radius: var(--vs-radius-pill) !important;
}