body.vvide3-preview {
	--vvide-bg-top: #fff7ef;
	--vvide-bg-bottom: #f4ebe1;
	--vvide-header-bg: rgba(108, 111, 118, 0.94);
	--vvide-footer-bg: var(--vvide-header-bg);
	--vvide-header-line: rgba(255, 255, 255, 0.16);
	--vvide-header-text: rgba(255, 255, 255, 0.96);
	--vvide-surface: #ffffff;
	--vvide-surface-strong: #ffffff;
	--vvide-surface-soft: #ffffff;
	--vvide-text: #2f2018;
	--vvide-muted: #765846;
	--vvide-line: rgba(89, 58, 39, 0.12);
	--vvide-line-strong: rgba(89, 58, 39, 0.2);
	--vvide-accent: #ff6700;
	--vvide-accent-strong: #d94f00;
	--vvide-accent-soft: rgba(255, 103, 0, 0.12);
	--vvide-shadow: 0 20px 48px rgba(47, 32, 24, 0.12);
	--vvide-shadow-soft: 0 12px 28px rgba(47, 32, 24, 0.08);
	--vvide-radius-xl: 28px;
	--vvide-radius-lg: 22px;
	--vvide-radius-md: 18px;
	--vvide-radius-sm: 14px;
	--vvide-font-body: "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue", sans-serif;
	--vvide-font-display: "oswaldregular", "Avenir Next Condensed", "Arial Narrow", sans-serif;
	background:
		radial-gradient(circle at top left, rgba(255, 103, 0, 0.22), transparent 30%),
		radial-gradient(circle at top right, rgba(255, 184, 124, 0.2), transparent 26%),
		linear-gradient(180deg, var(--vvide-bg-top) 0%, var(--vvide-bg-bottom) 100%);
	color: var(--vvide-text);
	font-family: var(--vvide-font-body);
	line-height: 1.6;
}

body.vvide3-preview,
body.vvide3-preview td,
body.vvide3-preview th,
body.vvide3-preview tr {
	color: var(--vvide-text);
}

body.vvide3-preview a {
	color: var(--vvide-accent-strong);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body.vvide3-preview a:hover,
body.vvide3-preview a:focus {
	color: var(--vvide-accent);
	text-decoration: none;
}

body.vvide3-preview .wrapper {
	background: transparent;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: visible;
}

body.vvide3-preview .main-header {
	position: sticky;
	top: 0;
	max-height: none;
	width: 100%;
	z-index: 1030;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

body.vvide3-preview .main-header .navbar {
	background: var(--vvide-header-bg);
	border: 0;
	box-shadow: 0 18px 40px rgba(47, 32, 24, 0.18);
	margin: 0;
	min-height: 0;
}

body.vvide3-preview .vvide3-navbar-inner {
	align-items: center;
	display: flex;
	gap: 24px;
	margin: 0 auto;
	max-width: 1440px;
	padding: 18px 28px;
	width: 100%;
}

body.vvide3-preview .vvide3-brand-wrap {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	min-width: 0;
}

body.vvide3-preview .vvide3-brand {
	align-items: center;
	display: inline-flex;
	gap: 14px;
	max-width: 100%;
}

body.vvide3-preview .vvide3-brand-mark,
body.vvide3-preview .vvide3-brand-wordmark {
	align-items: center;
	display: inline-flex;
}

body.vvide3-preview .vvide3-brand-mark {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	height: 52px;
	justify-content: center;
	padding: 0 12px;
	width: 52px;
}

body.vvide3-preview .vvide3-brand-mark img {
	display: block;
	height: 28px;
	width: 28px;
}

body.vvide3-preview .vvide3-brand-wordmark img {
	display: block;
	height: 30px;
	max-width: 100%;
	object-fit: contain;
}

body.vvide3-preview .vvide3-nav-toggle {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid var(--vvide-header-line);
	border-radius: 16px;
	display: none;
	gap: 0;
	height: 48px;
	margin: 0 0 0 14px;
	padding: 0;
	width: 48px;
}

body.vvide3-preview .vvide3-nav-toggle:hover,
body.vvide3-preview .vvide3-nav-toggle:focus {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.28);
}

body.vvide3-preview .vvide3-nav-toggle-icon {
	color: #fff;
	font-size: 20px;
	line-height: 1;
	/* Some mobile browsers don't reliably bubble a tap on a plain, non-
	   interactive child (this <i> glyph) up to its clickable parent button -
	   taps land on the icon glyph itself and go nowhere. Route every tap
	   inside the button straight to the <button> instead. */
	pointer-events: none;
}

body.vvide3-preview .vvide3-main-nav {
	align-items: center;
	display: flex !important;
	flex: 1 1 auto;
	gap: 24px;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

body.vvide3-preview .vvide3-primary-nav {
	flex: 1 1 auto;
	min-width: 0;
}

/* Desktop only: search sits between the primary nav and Messages/Yousef
   (DOM order is search, primary-nav, header-tools - purely for the mobile
   drawer, where search needs to appear first), so reorder just the flex
   painting order here to put it immediately left of Messages instead of
   next to the logo. */
@media (min-width: 992px) {
	body.vvide3-preview .vvide3-primary-nav {
		order: 1;
	}

	body.vvide3-preview .vvide3-header-search {
		order: 2;
	}

	body.vvide3-preview .vvide3-header-tools {
		order: 3;
	}
}

/* "Menu"/"Account" section labels only make sense in the mobile drawer
   (where the two groups needed a visual divider) - shown again inside the
   max-width:991px block below. */
body.vvide3-preview .vvide3-menu-section-label {
	display: none;
}

body.vvide3-preview .vvide3-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vvide3-preview .vvide3-menu-item {
	position: relative;
}

body.vvide3-preview .vvide3-menu-link {
	align-items: center;
	background: transparent;
	border-radius: 999px;
	color: var(--vvide-header-text);
	display: inline-flex;
	gap: 6px;
	min-height: 48px;
	padding-bottom: 11px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 11px;
}

body.vvide3-preview .vvide3-menu-link:hover,
body.vvide3-preview .vvide3-menu-link:focus {
	background: var(--vvide-accent-soft);
	box-shadow: inset 0 0 0 1px rgba(255, 103, 0, 0.18);
	color: #ff6700;
}

body.vvide3-preview .vvide3-menu-item.active > .vvide3-menu-link {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: inset 0 0 0 1px #fff;
	color: #ff6700;
}

body.vvide3-preview .vvide3-menu-icon {
	font-size: 16px;
	text-align: center;
	width: 18px;
}

body.vvide3-preview .vvide3-menu-text {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

body.vvide3-preview .vvide3-menu-badge {
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff8a3b 100%);
	border-radius: 999px;
	box-shadow: 0 10px 18px rgba(255, 103, 0, 0.24);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 8px;
}

body.vvide3-preview .vvide3-submenu {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid var(--vvide-line);
	border-radius: 18px;
	box-shadow: var(--vvide-shadow);
	margin-top: 12px;
	min-width: 240px;
	padding: 10px;
}

body.vvide3-preview .vvide3-submenu li {
	position: relative;
}

body.vvide3-preview .vvide3-submenu > li > a,
body.vvide3-preview .vvide3-submenu .dropdown-submenu > a {
	align-items: center;
	border-radius: 12px;
	color: var(--vvide-text);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	justify-content: space-between;
	padding: 10px 12px;
	white-space: normal;
}

body.vvide3-preview .vvide3-submenu > li > a:hover,
body.vvide3-preview .vvide3-submenu > li > a:focus,
body.vvide3-preview .vvide3-submenu .dropdown-submenu > a:hover,
body.vvide3-preview .vvide3-submenu .dropdown-submenu > a:focus {
	background: var(--vvide-accent-soft);
	color: #ff6700;
}

body.vvide3-preview .dropdown-submenu > .dropdown-menu {
	left: calc(100% + 8px);
	margin-top: -10px;
	top: 0;
}

body.vvide3-preview .vvide3-header-search {
	flex: 0 0 auto;
}

body.vvide3-preview .vvide3-header-tools {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
}

body.vvide3-preview .vvide3-search {
	position: relative;
	width: min(280px, 100%);
}

body.vvide3-preview .vvide3-search-input,
body.vvide3-preview .vvide3-search input[type="text"] {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
	color: var(--vvide-text);
	font-family: var(--vvide-font-body);
	font-size: 14px;
	height: 48px;
	padding: 0 50px 0 16px;
	width: 100%;
}

body.vvide3-preview .vvide3-search-input:focus {
	border-color: rgba(255, 103, 0, 0.28);
	box-shadow: 0 0 0 4px rgba(255, 103, 0, 0.12);
	outline: none;
}

body.vvide3-preview .vvide3-search-shortcut {
	align-items: center;
	background: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	box-shadow: var(--vvide-shadow-soft);
	color: var(--vvide-text);
	display: none;
	height: 48px;
	justify-content: center;
	width: 48px;
}

body.vvide3-preview .vvide3-search-shortcut:hover,
body.vvide3-preview .vvide3-search-shortcut:focus {
	background: var(--vvide-accent-soft);
	border-color: rgba(255, 103, 0, 0.18);
	box-shadow: none;
	color: #ff6700;
}

body.vvide3-preview .vvide3-search-submit {
	align-items: center;
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff8b3d 100%);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 22px rgba(255, 103, 0, 0.2);
	color: #fff;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 4px;
	top: 4px;
	width: 40px;
}

body.vvide3-preview .vvide3-search-submit:hover,
body.vvide3-preview .vvide3-search-submit:focus {
	background: linear-gradient(135deg, #ff7d28 0%, var(--vvide-accent-strong) 100%);
}

body.vvide3-preview .vvide3-user-tools {
	align-items: center;
	display: flex;
	gap: 10px;
}

body.vvide3-preview .vvide3-icon-button,
body.vvide3-preview .vvide3-text-button,
body.vvide3-preview .vvide3-solid-button,
body.vvide3-preview .vvide3-user-trigger {
	align-items: center;
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 10px;
	min-height: 48px;
	padding: 11px 16px;
}

body.vvide3-preview .vvide3-icon-button,
body.vvide3-preview .vvide3-text-button,
body.vvide3-preview .vvide3-user-trigger {
	background: #fff;
	border: 1px solid var(--vvide-line);
	box-shadow: var(--vvide-shadow-soft);
	color: var(--vvide-text);
}

body.vvide3-preview .vvide3-icon-button strong {
	background: var(--vvide-accent-soft);
	border-radius: 999px;
	color: var(--vvide-accent-strong);
	font-size: 11px;
	line-height: 1;
	padding: 6px 8px;
}

body.vvide3-preview .vvide3-solid-button {
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff8b3d 100%);
	border: 0;
	box-shadow: 0 14px 26px rgba(255, 103, 0, 0.22);
	color: #fff;
}

body.vvide3-preview .vvide3-icon-button:hover,
body.vvide3-preview .vvide3-text-button:hover,
body.vvide3-preview .vvide3-user-trigger:hover,
body.vvide3-preview .vvide3-icon-button:focus,
body.vvide3-preview .vvide3-text-button:focus,
body.vvide3-preview .vvide3-user-trigger:focus {
	background: var(--vvide-accent-soft);
	border-color: rgba(255, 103, 0, 0.18);
	box-shadow: none;
	color: #ff6700;
	transform: translateY(-1px);
}

body.vvide3-preview .vvide3-solid-button:hover,
body.vvide3-preview .vvide3-solid-button:focus {
	color: #fff;
	transform: translateY(-1px);
}

body.vvide3-preview .vvide3-user-avatar {
	border-radius: 50%;
	height: 32px;
	object-fit: cover;
	width: 32px;
}

body.vvide3-preview .vvide3-user-name {
	max-width: 14ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.vvide3-preview .vvide3-user-dropdown {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid var(--vvide-line);
	border-radius: 18px;
	box-shadow: var(--vvide-shadow);
	margin-top: 12px;
	min-width: 260px;
	overflow: visible;
	padding: 10px;
}

body.vvide3-preview .vvide3-user-dropdown .dropdown-header {
	color: var(--vvide-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 8px 12px 4px;
	text-transform: uppercase;
}

body.vvide3-preview .vvide3-user-dropdown > li > a {
	border-radius: 12px;
	color: var(--vvide-text);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
}

body.vvide3-preview .vvide3-user-dropdown li,
body.vvide3-preview .vvide3-messages-dropdown li {
	position: relative;
}

body.vvide3-preview .vvide3-user-dropdown > li > a,
body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu > a {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: flex-start;
}

body.vvide3-preview .vvide3-messages-dropdown > li > a,
body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu > a {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

body.vvide3-preview .vvide3-dropdown-label {
	align-items: center;
	display: inline-flex;
	gap: 10px;
	min-width: 0;
}

body.vvide3-preview .vvide3-dropdown-icon {
	color: #111;
	flex: 0 0 auto;
	font-size: 14px;
	text-align: center;
	width: 16px;
}

body.vvide3-preview .vvide3-dropdown-root-link {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}

body.vvide3-preview .vvide3-dropdown-parent-link {
	cursor: default;
}

body.vvide3-preview .vvide3-user-dropdown strong,
body.vvide3-preview .vvide3-user-dropdown .vvide3-dropdown-arrow,
body.vvide3-preview .vvide3-messages-dropdown strong,
body.vvide3-preview .vvide3-messages-dropdown .vvide3-dropdown-arrow {
	margin-left: auto;
}

body.vvide3-preview .vvide3-user-dropdown > li > a:hover,
body.vvide3-preview .vvide3-user-dropdown > li > a:focus {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 103, 0, 0.16);
	color: #ff6700;
}

body.vvide3-preview .vvide3-user-dropdown > li > a:hover .vvide3-dropdown-icon,
body.vvide3-preview .vvide3-user-dropdown > li > a:focus .vvide3-dropdown-icon,
body.vvide3-preview .vvide3-user-dropdown > li > a.vvide3-dropdown-current .vvide3-dropdown-icon {
	color: #ff6700;
}

body.vvide3-preview .vvide3-user-dropdown > li > a.vvide3-dropdown-current,
body.vvide3-preview .vvide3-messages-dropdown > li > a.vvide3-dropdown-current {
	background: rgba(255, 103, 0, 0.1);
	color: #ff6700;
}

body.vvide3-preview .vvide3-user-dropdown > li.divider {
	margin: 8px 0;
}

body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu > .dropdown-menu,
body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu > .dropdown-menu {
	display: none;
}

body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu:hover > .dropdown-menu,
body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu:focus-within > .dropdown-menu,
body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu:hover > .dropdown-menu,
body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu:focus-within > .dropdown-menu,
body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu.open > .dropdown-menu,
body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu.open > .dropdown-menu {
	display: block;
}

/* Desktop only: the flyout submenu (e.g. Show Posts > Messages/Topics/...)
   sits a few pixels away from its trigger (`left: calc(100% + 8px)` below),
   and with plain display:none/block toggling on :hover, drifting off the
   trigger for even a moment while crossing that gap closes it instantly -
   "disappears very soon". Swap to opacity/visibility with a short closing
   delay so it stays up long enough to actually reach it, while still
   closing instantly on open (transition-delay: 0s there). */
@media (min-width: 992px) {
	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu > .dropdown-menu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu > .dropdown-menu {
		display: block;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.12s ease, visibility 0s linear 0.25s;
		visibility: hidden;
	}

	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu:hover > .dropdown-menu,
	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu:focus-within > .dropdown-menu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu:hover > .dropdown-menu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu:focus-within > .dropdown-menu,
	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu.open > .dropdown-menu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu.open > .dropdown-menu {
		opacity: 1;
		pointer-events: auto;
		transition-delay: 0s;
		visibility: visible;
	}
}

body.vvide3-preview .vvide3-user-submenu {
	min-width: 250px;
	z-index: 1060;
}

body.vvide3-preview .vvide3-user-menu .vvide3-user-dropdown .dropdown-submenu > .dropdown-menu,
body.vvide3-preview .vvide3-messages-menu .vvide3-messages-dropdown .dropdown-submenu > .dropdown-menu {
	left: auto;
	margin-top: -10px;
	right: calc(100% + 8px);
	top: 0;
}

body.vvide3-preview .vvide3-dropdown-arrow {
	color: var(--vvide-muted);
	flex: 0 0 auto;
	font-size: 13px;
}

body.vvide3-preview .vvide3-page-title-wrap {
	margin: 0 auto 24px;
	max-width: 1240px;
	padding: 8px 18px 0;
}

body.vvide3-preview .vvide3-page-title {
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff974e 100%);
	border-radius: calc(var(--vvide-radius-xl) - 8px);
	box-shadow: 0 14px 26px rgba(255, 103, 0, 0.16);
	color: #fff;
	display: table;
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin: 0 auto;
	padding: 16px 28px;
	text-align: center;
	text-transform: uppercase;
}

body.vvide3-preview .content-wrapper,
body.vvide3-preview .right-side,
body.vvide3-preview .main-footer {
	background: #fff;
	flex: 1 0 auto;
	margin-left: 0;
	min-height: 0;
}

body.vvide3-preview .content {
	margin: 0 auto;
	max-width: 1440px;
	padding: 32px 28px 40px;
	width: 100%;
}

body.vvide3-preview .content > * {
	animation: vvideFadeUp 0.32s ease both;
}

/* Recent/Display/MessageIndex all render a "User actions" mark-as-read
   popup (#mobile_action) plus its ".mobile_act" trigger button, meant to be
   hidden and only shown on narrow screens where the inline action pills
   don't fit (base responsive.css only hides the equivalent pattern for
   #main_menu/#genericmenu/#adm_submenus - #mobile_action was never
   included, so it rendered inline, always visible, at the top of the page).
   Our pill rows already wrap responsively on their own, so this popup/
   trigger pair is pure redundancy - hide both outright. */
body.vvide3-preview #mobile_action,
body.vvide3-preview .mobile_act {
	display: none !important;
}

body.vvide3-preview .tborder,
body.vvide3-preview .windowbg,
body.vvide3-preview .windowbg2,
body.vvide3-preview .approvebg,
body.vvide3-preview .information,
body.vvide3-preview .noticebox,
body.vvide3-preview .errorbox,
body.vvide3-preview .roundframe,
body.vvide3-preview .descbox,
body.vvide3-preview .generic_list_wrapper,
body.vvide3-preview .table_frame,
body.vvide3-preview .navigate_section,
body.vvide3-preview #index_common_stats,
body.vvide3-preview #newsfader,
body.vvide3-preview #poll,
body.vvide3-preview .linked_events,
body.vvide3-preview .childboards,
body.vvide3-preview #messageindex,
body.vvide3-preview #forumposts {
	background: var(--vvide-surface);
	border: 0 solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	box-shadow: none;
	margin-bottom: 7px;
}

body.vvide3-preview .noticebox,
body.vvide3-preview .errorbox,
body.vvide3-preview .infobox {
	box-shadow: none;
	margin: 5px 0;
	padding: 18px 20px;
}

body.vvide3-preview .noticebox {
	background: #fff4bf;
	border: 0;
	color: #8a5a00;
}

body.vvide3-preview .errorbox {
	background: #ffe0e0;
	border: 0;
	color: #962d2d;
}

body.vvide3-preview .noticebox .main_icons,
body.vvide3-preview .errorbox .main_icons,
body.vvide3-preview .noticebox img,
body.vvide3-preview .errorbox img {
	display: none !important;
}

body.vvide3-preview .noticebox::before,
body.vvide3-preview .errorbox::before {
	content: none !important;
}

body.vvide3-preview .infobox {
	background: #eef7ff;
	border: 1px solid #8ab7e0;
	border-left-width: 4px;
	border-radius: var(--vvide-radius-lg);
	color: #27567b;
	margin-bottom: 16px;
	padding: 18px 20px;
}

body.vvide3-preview .tborder,
body.vvide3-preview .table_frame,
body.vvide3-preview #messageindex,
body.vvide3-preview #forumposts,
body.vvide3-preview #poll,
body.vvide3-preview .linked_events,
body.vvide3-preview .childboards,
body.vvide3-preview #newsfader,
body.vvide3-preview #index_common_stats {
	margin-bottom: 7px;
	overflow: hidden;
}

body.vvide3-preview .windowbg2,
body.vvide3-preview #forumposts div.windowbg2 {
	box-shadow: none;
}

body.vvide3-preview span.topslice,
body.vvide3-preview span.botslice {
	display: none;
}

body.vvide3-preview .cat_bar,
body.vvide3-preview .title_bar,
body.vvide3-preview .title_barIC,
body.vvide3-preview #topic_header,
body.vvide3-preview #display_head {
	background: transparent;
	border-left: 0 !important;
	height: auto;
	margin: 0;
	overflow: visible;
	padding: 8px 0;
}

body.vvide3-preview .cat_bar,
body.vvide3-preview .title_barIC {
	margin-bottom: 14px;
}

/* Board Index category header sits directly above its board rows (with an
   extra .vvide3-category-gap spacer row in between) - scope this reduction
   to #boardindex_table only so other pages sharing .cat_bar (Topic Display,
   PM, Profile) keep their own spacing. */
body.vvide3-preview #boardindex_table .cat_bar {
	margin-bottom: 4px;
}

/* #forumposts .cat_bar in index.css is ID-scoped, so it beats the
   class-only override above and was collapsing the gap between the
   orange AUTHOR/TOPIC header bar and the post card below it to 2px. */
body.vvide3-preview #forumposts .cat_bar {
	margin: 0 0 24px;
}

body.vvide3-preview .catbg,
body.vvide3-preview .titlebg {
	align-items: center;
	align-content: center;
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff974e 100%);
	border-left: 0 !important;
	border-radius: calc(var(--vvide-radius-xl) - 8px);
	box-shadow: none;
	color: #fff;
	display: flex;
	flex-wrap: nowrap;
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	gap: 12px;
	letter-spacing: 0.03em;
	line-height: 1.2;
	margin: 0;
	min-height: 68px;
	padding: 16px 20px;
	position: relative;
	text-transform: uppercase;
	width: 100%;
	z-index: 1;
}

body.vvide3-preview .catbg .floatleft,
body.vvide3-preview .catbg .floatright,
body.vvide3-preview .titlebg .floatleft,
body.vvide3-preview .titlebg .floatright {
	float: none;
}

body.vvide3-preview .catbg .ie6_header,
body.vvide3-preview .titlebg .ie6_header {
	align-items: center;
	display: inline-flex;
	gap: 12px;
	min-height: 32px;
}

body.vvide3-preview .catbg .capacity_bar {
	flex: 1 1 180px;
}

body.vvide3-preview .catbg .ie6_header > a,
body.vvide3-preview .titlebg .ie6_header > a {
	align-items: center;
	display: inline-flex;
}

body.vvide3-preview .catbg .icon,
body.vvide3-preview .titlebg .icon {
	align-self: center;
	display: block;
	margin: 0;
}

body.vvide3-preview .catbg a,
body.vvide3-preview .titlebg a,
body.vvide3-preview .catbg span,
body.vvide3-preview .titlebg span {
	color: inherit;
}

body.vvide3-preview .vvide3-toggle-control,
body.vvide3-preview .catbg .unreadlink {
	align-items: center;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-family: var(--vvide-font-body);
	font-size: 13px;
	font-weight: 700;
	justify-content: center;
	margin: 0;
	min-height: 40px;
	padding: 0 14px;
}

body.vvide3-preview .vvide3-toggle-control {
	cursor: pointer;
	min-width: 40px;
	padding: 0 12px;
}

body.vvide3-preview .vvide3-toggle-control:hover,
body.vvide3-preview .vvide3-toggle-control:focus,
body.vvide3-preview .catbg .unreadlink:hover {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

body.vvide3-preview .vvide3-toggle-control.toggle_up::before,
body.vvide3-preview .vvide3-toggle-control.toggle_down::before {
	background: none;
	border: 0;
	box-shadow: none;
	content: "\f078";
	display: inline-flex;
	font-family: FontAwesome;
	font-size: 14px;
	height: auto;
	line-height: 1;
	margin: 0;
	text-rendering: auto;
	width: auto;
	-webkit-font-smoothing: antialiased;
}

body.vvide3-preview .vvide3-toggle-control.toggle_down::before {
	content: "\f077";
}

body.vvide3-preview .table_list,
body.vvide3-preview .table_grid,
body.vvide3-preview .generic_list_wrapper table,
body.vvide3-preview .table_frame table {
	background: transparent;
	border-bottom: 0 solid var(--vvide-line);
	border-left: 0 solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	border-collapse: collapse;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

/* The homepage board list is one continuous <table> shared by every
   category (many <tbody> pairs, one per category). Under
   border-collapse:collapse a cell only renders rounded corners if it sits at
   the true edge of the whole table - not just the edge of its own category's
   tbody - so every category's rounding broke except the very last one on the
   page. Reverting to separate here restores per-category rounding (this
   table already rounds each row directly rather than relying on the
   collapsed single-line border look, so nothing else depends on collapse
   mode for #boardindex_table). */
body.vvide3-preview #boardindex_table .table_list,
body.vvide3-preview #boardindex_table.table_list {
	border-collapse: separate;
}

body.vvide3-preview .table_list td,
body.vvide3-preview .table_list th,
body.vvide3-preview .table_grid td,
body.vvide3-preview .table_grid th,
body.vvide3-preview .generic_list_wrapper table td,
body.vvide3-preview .generic_list_wrapper table th,
body.vvide3-preview .table_frame table td,
body.vvide3-preview .table_frame table th {
	border-bottom: 0 solid var(--vvide-line);
	border-right: 0 solid var(--vvide-line);
	border-top: 0 solid var(--vvide-line);
	padding: 18px 16px;
	vertical-align: top;
}

/* Base index.css's bare `.poster { float:left; width:15em; position:relative }`
   is meant for the post-author sidebar (#forumposts/#personal_messages .poster,
   both overridden separately below with higher-specificity selectors), but
   also collides with any generic-list table column literally classed
   "poster" (e.g. Track IP's message list) - reset it back to a normal cell. */
body.vvide3-preview .table_grid td.poster,
body.vvide3-preview .table_grid th.poster,
body.vvide3-preview .table_list td.poster,
body.vvide3-preview .table_list th.poster {
	float: none;
	position: static;
	width: auto;
}

body.vvide3-preview .generic_list_wrapper,
body.vvide3-preview .table_frame,
body.vvide3-preview .table_grid,
body.vvide3-preview .table_list,
body.vvide3-preview #alerts,
body.vvide3-preview #mlist,
body.vvide3-preview #edit_buddies > .table_grid,
body.vvide3-preview #detailedinfo > .windowbg,
body.vvide3-preview #detailedinfo > .windowbg2,
body.vvide3-preview #detailedinfo > .information,
body.vvide3-preview #detailedinfo > .descbox,
body.vvide3-preview #detailedinfo > .roundframe,
body.vvide3-preview #detailedinfo > .table_grid,
body.vvide3-preview #detailedinfo > .generic_list_wrapper,
body.vvide3-preview #detailedinfo > form > .information,
body.vvide3-preview #detailedinfo > form > .windowbg,
body.vvide3-preview #detailedinfo > form > .windowbg2,
body.vvide3-preview #detailedinfo > form > .descbox,
body.vvide3-preview #detailedinfo > form > .table_grid,
body.vvide3-preview #detailedinfo > form > .generic_list_wrapper {
	border-bottom: 1px solid var(--vvide-line);
	border-left: 1px solid var(--vvide-line);
}

body.vvide3-preview .table_list {
	border-bottom: 0;
	border-left: 0;
}

body.vvide3-preview .table_list tbody tr:last-child td,
body.vvide3-preview .table_grid tbody tr:last-child td,
body.vvide3-preview .generic_list_wrapper table tbody tr:last-child td,
body.vvide3-preview .table_frame table tbody tr:last-child td {
	border-bottom: 0;
}

/* With border-collapse:collapse, overflow:hidden + border-radius on the
   wrapping .table_frame/.table_list no longer reliably clips the table's own
   bottom corner in every browser, so the last row's outer cells are rounded
   directly instead of depending on that clip. Safe to apply to every table
   here since the bottom of the table is always the true bottom regardless of
   whether a <thead> sits above it. */
body.vvide3-preview .table_list tbody tr:last-child td:first-child,
body.vvide3-preview .table_grid tbody tr:last-child td:first-child,
body.vvide3-preview .generic_list_wrapper table tbody tr:last-child td:first-child,
body.vvide3-preview .table_frame table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--vvide-radius-xl);
}

body.vvide3-preview .table_list tbody tr:last-child td:last-child,
body.vvide3-preview .table_grid tbody tr:last-child td:last-child,
body.vvide3-preview .generic_list_wrapper table tbody tr:last-child td:last-child,
body.vvide3-preview .table_frame table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--vvide-radius-xl);
}

/* Tables with no <thead> of their own (the sub-boards list) also need their
   very first row's top corners rounded directly for the same reason. Scoped
   away from #boardindex_table/#messageindex, which round their own top edge
   via their thead rules instead - applying this generically there would hit
   the first row of tbody.content too and double up with those. */
body.vvide3-preview .childboards .table_list tbody tr:first-child td:first-child {
	border-top-left-radius: var(--vvide-radius-xl);
}

body.vvide3-preview .childboards .table_list tbody tr:first-child td:last-child {
	border-top-right-radius: var(--vvide-radius-xl);
}

body.vvide3-preview .table_grid thead th,
body.vvide3-preview .table_list thead th,
body.vvide3-preview .generic_list_wrapper table thead th,
body.vvide3-preview .table_frame table thead th {
	background: rgba(255, 103, 0, 0.06);
	color: var(--vvide-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* The topics-table header is a real <tr class="catbg"><th>...</th></tr>, not a
   div/h3 wrapper. The shared .catbg/.titlebg rule (further up) sets
   display:flex, which rips a <tr> out of table layout entirely and renders
   each <th> as an independent box - that's what produced the disconnected
   solid-color header segments instead of one continuous gradient bar. Force
   it back to a normal table row. A gradient background doesn't paint as one
   continuous image across a table-row under border-collapse:separate - each
   cell re-renders its own slice of the gradient independently, producing
   visible banding at every column boundary - so this uses a flat color
   instead, which is immune to that per-cell repaint issue. */
body.vvide3-preview .table_grid thead tr.catbg,
body.vvide3-preview .table_grid thead tr.titlebg,
body.vvide3-preview .table_list thead tr.catbg,
body.vvide3-preview .table_list thead tr.titlebg {
	background: var(--vvide-accent);
	border-radius: var(--vvide-radius-xl) var(--vvide-radius-xl) 0 0;
	box-shadow: none;
	display: table-row;
}

body.vvide3-preview .table_grid thead tr.catbg th,
body.vvide3-preview .table_grid thead tr.titlebg th,
body.vvide3-preview .table_list thead tr.catbg th,
body.vvide3-preview .table_list thead tr.titlebg th {
	background: transparent;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 18px 16px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Belt-and-suspenders: border-radius on <tr>/<th> backgrounds doesn't clip
   consistently everywhere, so also round the actual first/last header cells
   directly to guarantee no square corner ever peeks past the container. */
body.vvide3-preview .table_grid thead tr.catbg th:first-child,
body.vvide3-preview .table_grid thead tr.titlebg th:first-child,
body.vvide3-preview .table_list thead tr.catbg th:first-child,
body.vvide3-preview .table_list thead tr.titlebg th:first-child {
	border-top-left-radius: var(--vvide-radius-xl);
}

body.vvide3-preview .table_grid thead tr.catbg th:last-child,
body.vvide3-preview .table_grid thead tr.titlebg th:last-child,
body.vvide3-preview .table_list thead tr.catbg th:last-child,
body.vvide3-preview .table_list thead tr.titlebg th:last-child {
	border-top-right-radius: var(--vvide-radius-xl);
}

/* The quick-mod action row (select-to-move / Go button) also carries class
   "titlebg" but lives in <tbody>, not <thead> - it must NOT pick up the
   header's gradient/shadow/flex treatment from the shared .catbg/.titlebg
   rule further up, which was leaking through and rendering it as a floating
   white pill with a shadow halo. */
body.vvide3-preview #messageindex tbody tr.titlebg {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	display: table-row;
	min-height: auto;
	padding: 0;
}

body.vvide3-preview.vvide3-action-profile .table_grid thead th.first_th,
body.vvide3-preview.vvide3-action-profile .table_grid thead th.last_th,
body.vvide3-preview.vvide3-action-profile .table_list thead th.first_th,
body.vvide3-preview.vvide3-action-profile .table_list thead th.last_th,
body.vvide3-preview.vvide3-action-profile tr.titlebg th.first_th,
body.vvide3-preview.vvide3-action-profile tr.titlebg th.last_th,
body.vvide3-preview.vvide3-action-profile tr.catbg th.first_th,
body.vvide3-preview.vvide3-action-profile tr.catbg th.last_th {
	background: rgba(255, 103, 0, 0.06);
}

body.vvide3-preview.vvide3-action-profile .generic_list_wrapper thead th,
body.vvide3-preview.vvide3-action-profile .table_grid thead th,
body.vvide3-preview.vvide3-action-profile .table_list thead th,
body.vvide3-preview.vvide3-action-profile tr.title_bar th,
body.vvide3-preview.vvide3-action-profile tr.titlebg th,
body.vvide3-preview.vvide3-action-profile tr.catbg th {
	background: rgba(255, 103, 0, 0.06);
}

body.vvide3-preview.vvide3-action-profile #topic_notification_list thead tr,
body.vvide3-preview.vvide3-action-profile #topic_notification_list thead th,
body.vvide3-preview.vvide3-action-profile #board_notification_list thead tr,
body.vvide3-preview.vvide3-action-profile #board_notification_list thead th {
	background: rgba(255, 103, 0, 0.06) !important;
}

body.vvide3-preview #boardindex_table .header td,
body.vvide3-preview .childboards .cat_bar,
body.vvide3-preview #messageindex thead tr {
	border: 0;
}

body.vvide3-preview #boardindex_table td.info,
body.vvide3-preview #boardindex_table td.lastpost.hidden-xs.hidden-sm {
	background: #fff;
	background-clip: padding-box;
	border-radius: var(--vvide-radius-md);
}

body.vvide3-preview .table_list tbody.content td.info a.subject {
	font-size: 140%;
}

body.vvide3-preview #boardindex_table .icon,
body.vvide3-preview .childboards .icon,
body.vvide3-preview #messageindex .icon {
	width: 72px;
}

/* `.subject` is only meant for the big board-name heading link in
   BoardIndex/MessageIndex (`td.info > a.subject`) - it's a generic class name
   also reused elsewhere (generic-list table headers/cells, the header's PM
   dropdown preview) for completely different, small inline text, so this
   must stay scoped to `td.info` rather than matching bare `.subject`. */
body.vvide3-preview td.info > .subject {
	color: var(--vvide-text);
	display: inline-block;
	font-family: var(--vvide-font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin-bottom: 6px;
	text-transform: uppercase;
}

body.vvide3-preview td.info > .subject:hover,
body.vvide3-preview td.info > .subject:focus {
	color: var(--vvide-accent-strong);
}

body.vvide3-preview .hslice a {
	color: var(--vvide-text);
}

body.vvide3-preview .hslice a:hover,
body.vvide3-preview .hslice a:focus {
	color: var(--vvide-accent-strong);
}

body.vvide3-preview #recent_posts_content a {
	color: #ff6700;
}

body.vvide3-preview #recent_posts_content a:hover,
body.vvide3-preview #recent_posts_content a:focus {
	color: var(--vvide-accent-strong);
}

body.vvide3-preview .moderators,
body.vvide3-preview .smalltext,
body.vvide3-preview .board_stats,
body.vvide3-preview .lastpost,
body.vvide3-preview .children,
body.vvide3-preview .description_board {
	color: var(--vvide-muted);
}

body.vvide3-preview .lastpost img.avatar,
/* .avatar is used both on the <li> wrapper and the <img> inside it (same
   SMF markup convention), so this was bordering/rounding both, producing a
   visible double box around the picture. Scope to the image only. */
body.vvide3-preview .poster img.avatar {
	border: 2px solid rgba(255, 103, 0, 0.12);
	border-radius: 16px;
	box-shadow: var(--vvide-shadow-soft);
}

body.vvide3-preview .poster li.avatar {
	border: 0;
	box-shadow: none;
}

body.vvide3-preview .navigate_section {
	margin-bottom: 24px;
	padding: 14px 18px 14px 0;
}

body.vvide3-preview .navigate_section ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vvide3-preview .navigate_section li {
	color: var(--vvide-muted);
	font-size: 14px;
}

body.vvide3-preview .navigate_section li a {
	background: var(--vvide-accent-soft);
	border-radius: 999px;
	color: var(--vvide-accent-strong);
	display: inline-flex;
	margin-right: 6px;
	padding: 7px 12px;
}

body.vvide3-preview .board_moderators {
	margin-left: 6px;
}

body.vvide3-preview .pagesection {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin: 0 0 18px;
	padding: 0;
}

body.vvide3-preview .pagelinks,
body.vvide3-preview .nextlinks {
	align-items: center;
	color: var(--vvide-muted);
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* An empty .nextlinks/.nextlinks_bottom div (no prev/next topic) still
   counts as a flex item in .pagesection, so "justify-content: space-between"
   splits the gap between 3 items instead of 2 - pushing .buttonlist away
   from the left edge into the middle, and .pagelinks away from the right
   edge, instead of each sitting flush against its side. Drop it from the
   layout entirely when it has nothing in it. */
body.vvide3-preview .pagesection .nextlinks:empty,
body.vvide3-preview .pagesection .nextlinks_bottom:empty {
	display: none;
}

body.vvide3-preview .pagelinks .pages {
	color: var(--vvide-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-right: 4px;
	text-transform: uppercase;
}

body.vvide3-preview .pagelinks .nav_page,
body.vvide3-preview .pagelinks .current_page,
body.vvide3-preview .pagelinks .expand_pages {
	align-items: center;
	background: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	box-shadow: none;
	color: var(--vvide-text);
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	min-height: 42px;
	min-width: 42px;
	padding: 0 14px;
}

body.vvide3-preview .pagelinks .main_icons.previous_page,
body.vvide3-preview .pagelinks .main_icons.next_page {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-width: 14px;
}

body.vvide3-preview .pagelinks .main_icons.previous_page::before,
body.vvide3-preview .pagelinks .main_icons.next_page::before {
	background: none;
	content: "\f053";
	font-family: FontAwesome;
	font-size: 13px;
	height: auto;
	line-height: 1;
	margin: 0;
	width: auto;
}

body.vvide3-preview .pagelinks .main_icons.next_page::before {
	content: "\f054";
}

body.vvide3-preview .pagelinks .nav_page:hover,
body.vvide3-preview .pagelinks .nav_page:focus,
body.vvide3-preview .pagelinks .expand_pages:hover,
body.vvide3-preview .pagelinks .expand_pages:focus {
	background: var(--vvide-accent-soft);
	border-color: rgba(255, 103, 0, 0.18);
	color: #ff6700;
}

body.vvide3-preview .pagelinks .current_page {
	background: var(--vvide-accent-soft);
	border-color: rgba(255, 103, 0, 0.18);
	color: #ff6700;
}

body.vvide3-preview .buttonlist,
body.vvide3-preview .buttonlist .nav,
body.vvide3-preview .buttonlist .nav-pills {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* Bootstrap's `.nav:before, .nav:after { content:" "; display:table }`
   clearfix (meant for the old float-based nav-pills) becomes a real,
   space-taking flex item once .nav is flex here - it sat before the first
   button as an invisible item, reserving one `gap` of empty space and
   shifting "New Topic"/etc. to the right instead of sitting flush left. */
body.vvide3-preview .buttonlist .nav::before,
body.vvide3-preview .buttonlist .nav::after,
body.vvide3-preview .buttonlist .nav-pills::before,
body.vvide3-preview .buttonlist .nav-pills::after {
	content: none;
	display: none;
}

body.vvide3-preview .buttonlist li {
	list-style: none;
}

body.vvide3-preview .buttonlist a,
body.vvide3-preview .button_submit,
body.vvide3-preview .button_reset,
body.vvide3-preview .button,
body.vvide3-preview a.button,
body.vvide3-preview input[type="submit"],
body.vvide3-preview input[type="button"],
body.vvide3-preview button {
	align-items: center;
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff944b 100%);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	color: #fff;
	display: inline-flex;
	font-family: var(--vvide-font-body);
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	max-width: 100%;
	padding: 12px 18px;
	text-align: center;
	text-transform: none;
	white-space: normal;
}

body.vvide3-preview .buttonlist a:hover,
body.vvide3-preview .button_submit:hover,
body.vvide3-preview .button_reset:hover,
body.vvide3-preview .button:hover,
body.vvide3-preview a.button:hover,
body.vvide3-preview input[type="submit"]:hover,
body.vvide3-preview input[type="button"]:hover,
body.vvide3-preview button:hover,
body.vvide3-preview .buttonlist a:focus,
body.vvide3-preview .button_submit:focus,
body.vvide3-preview .button_reset:focus,
body.vvide3-preview .button:focus,
body.vvide3-preview a.button:focus {
	color: #fff;
	filter: saturate(1.05);
	transform: translateY(-1px);
}

body.vvide3-preview input,
body.vvide3-preview select,
body.vvide3-preview textarea {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--vvide-line-strong);
	border-radius: var(--vvide-radius-sm);
	box-shadow: none;
	color: var(--vvide-text);
	font-family: var(--vvide-font-body);
	font-size: 15px;
	padding: 12px 14px;
}

/* Legacy base-theme rule (index.css `select:hover`) flips the border from
   1px to 2px and the background to solid orange on hover, which nudges the
   box's rendered size on hover and can visibly shift/wrap the row it's in
   (e.g. the "Jump to:" select shifting the Go button next to it). Neutralize
   it so hovering a select doesn't change its box model at all. */
body.vvide3-preview select:hover {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--vvide-line-strong);
	color: var(--vvide-text);
}

body.vvide3-preview input[type="text"],
body.vvide3-preview input[type="search"],
body.vvide3-preview input[type="email"],
body.vvide3-preview input[type="password"],
body.vvide3-preview input[type="number"],
body.vvide3-preview select:not([multiple]):not([size]) {
	min-height: 48px;
}

body.vvide3-preview select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23765846' d='M1.41.59 6 5.17 10.59.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	padding-right: 42px;
}

body.vvide3-preview select:not([multiple]):not([size])::-ms-expand {
	display: none;
}

/* `appearance: none` above (to draw our own arrow) makes some browsers
   render the native options popup at a UA default size instead of the
   select's own font-size - this was already worked around for the 4
   jump-to selects individually; apply the same fix to every themed select
   (e.g. the Message icon picker) instead of only those four. */
body.vvide3-preview select option {
	font-family: var(--vvide-font-body);
	font-size: 15px;
}

body.vvide3-preview input[type="checkbox"],
body.vvide3-preview input[type="radio"],
body.vvide3-preview .input_check {
	-webkit-appearance: none;
	appearance: none;
	background: #fff;
	border: 1px solid rgba(255, 103, 0, 0.28);
	border-radius: 4px;
	box-shadow: none !important;
	cursor: pointer;
	display: inline-grid;
	flex: 0 0 19px;
	height: 19px;
	margin-right: 3px !important;
	padding: 0;
	place-content: center;
	position: relative;
	top: -3px;
	vertical-align: middle;
	width: 19px;
}

body.vvide3-preview input[type="radio"] {
	border-radius: 999px;
}

body.vvide3-preview input[type="checkbox"]::before,
body.vvide3-preview input[type="radio"]::before,
body.vvide3-preview .input_check::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23ffffff' d='M4.2 9.4.4 5.6 1.8 4.2l2.4 2.4L10.2.6 11.6 2z'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	content: "";
	height: 14px;
	transform: scale(0);
	transition: transform 0.14s ease;
	width: 14px;
}

body.vvide3-preview input[type="radio"]::before {
	background: #fff;
	background-image: none;
	border-radius: 999px;
	height: 6px;
	width: 6px;
}

body.vvide3-preview input[type="checkbox"]:checked,
body.vvide3-preview input[type="radio"]:checked,
body.vvide3-preview .input_check:checked {
	background: #ff6700;
	border-color: #ff6700;
	box-shadow: none !important;
}

body.vvide3-preview input[type="checkbox"]:checked::before,
body.vvide3-preview input[type="radio"]:checked::before,
body.vvide3-preview .input_check:checked::before {
	transform: scale(1);
}

/* The "select all" checkbox in the orange header row needs the opposite
   palette - a solid orange-on-orange check (the default checked state) would
   be invisible against the gradient background it sits on. */
body.vvide3-preview .table_grid thead tr.catbg th input[type="checkbox"],
body.vvide3-preview .table_grid thead tr.titlebg th input[type="checkbox"],
body.vvide3-preview .table_list thead tr.catbg th input[type="checkbox"],
body.vvide3-preview .table_list thead tr.titlebg th input[type="checkbox"] {
	background: #fff;
	border-color: #fff;
}

body.vvide3-preview .table_grid thead tr.catbg th input[type="checkbox"]:checked,
body.vvide3-preview .table_grid thead tr.titlebg th input[type="checkbox"]:checked,
body.vvide3-preview .table_list thead tr.catbg th input[type="checkbox"]:checked,
body.vvide3-preview .table_list thead tr.titlebg th input[type="checkbox"]:checked {
	background: #fff;
	border-color: #fff;
}

body.vvide3-preview .table_grid thead tr.catbg th input[type="checkbox"]:checked::before,
body.vvide3-preview .table_grid thead tr.titlebg th input[type="checkbox"]:checked::before,
body.vvide3-preview .table_list thead tr.catbg th input[type="checkbox"]:checked::before,
body.vvide3-preview .table_list thead tr.titlebg th input[type="checkbox"]:checked::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath fill='%23ff6700' d='M4.2 9.4.4 5.6 1.8 4.2l2.4 2.4L10.2.6 11.6 2z'/%3E%3C/svg%3E");
}

body.vvide3-preview label:has(input[type="checkbox"]),
body.vvide3-preview label:has(input[type="radio"]),
body.vvide3-preview label:has(.input_check) {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	position: relative;
	top: 3px;
}

body.vvide3-preview input[type="radio"] + label,
body.vvide3-preview input[type="checkbox"] + label {
	display: inline-block;
	margin-left: 3px;
	vertical-align: middle;
}

body.vvide3-preview input:focus,
body.vvide3-preview select:focus,
body.vvide3-preview textarea:focus {
	border-color: rgba(255, 103, 0, 0.28);
	box-shadow: 0 0 0 4px rgba(255, 103, 0, 0.12);
	outline: none;
}

body.vvide3-preview input[type="checkbox"]:focus,
body.vvide3-preview input[type="radio"]:focus,
body.vvide3-preview .input_check:focus {
	box-shadow: none !important;
}

body.vvide3-preview hr,
body.vvide3-preview .hrcolor {
	background-color: var(--vvide-line);
	color: var(--vvide-line);
}

body.vvide3-preview #forumposts {
	background: transparent;
	border: 0;
	box-shadow: none;
}

body.vvide3-preview #forumposts div.windowbg,
body.vvide3-preview #forumposts div.windowbg2,
body.vvide3-preview #forumposts div.approvebg {
	background: var(--vvide-surface);
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	box-shadow: none;
	margin-bottom: 22px;
	overflow: hidden;
}

body.vvide3-preview.vvide3-action-display #forumposts div.windowbg,
body.vvide3-preview.vvide3-action-display #forumposts div.windowbg2,
body.vvide3-preview.vvide3-action-display #forumposts div.approvebg {
	background: #fff;
	border: 1px solid #e6e6e6;
}

body.vvide3-preview #forumposts .post_wrapper {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
}

body.vvide3-preview #forumposts .poster {
	background: #fff;
	border-right: 1px solid #e6e6e6;
	flex: 0 0 280px;
	float: none;
	padding: 24px 22px;
}

body.vvide3-preview #forumposts .poster h4 {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--vvide-font-display);
	font-size: 24px;
	font-weight: 400;
	gap: 8px;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

/* Base theme's responsive.css sets `display: block !important` on this
   exact selector below 991px, which silently killed the flex-based
   name/dot reordering below (order only has an effect on flex/grid
   items) - the online-status dot fell back to plain source order,
   landing before the name again on mobile despite the desktop fix. */
@media (max-width: 991px) {
	body.vvide3-preview #forumposts .poster h4 {
		display: flex !important;
	}

	/* Base index.css's own mobile block gives this h4 a grey fill, a bottom
	   rule, and left/right padding sized for its absolutely-positioned
	   avatar (which this theme doesn't render here) - strip all of that
	   back to a plain flush-left name row. */
	body.vvide3-preview #forumposts .poster h4 {
		background: #fff !important;
		border-bottom: 0 !important;
		padding: 0 8px 8px 0 !important;
	}

	body.vvide3-preview #forumposts .poster ul {
		padding-left: 0 !important;
	}

	/* Same base-theme grey fill/divider/avatar-padding bug as #forumposts
	   above, applied to the PM message view's poster block. */
	body.vvide3-preview #personal_messages .poster h4 {
		background: #fff !important;
		border-bottom: 0 !important;
		padding: 0 8px 8px 0 !important;
	}

	body.vvide3-preview #personal_messages .poster ul {
		padding-left: 0 !important;
	}

	/* Drop the subject/date divider on mobile - it's redundant once the
	   poster card stacks above the message body instead of sitting beside it. */
	body.vvide3-preview #personal_messages .keyinfo {
		border-bottom: 0 !important;
		margin-bottom: 12px !important;
		padding-bottom: 0 !important;
	}

	/* Free the moderation checkbox from the quickbuttons row and pin it to
	   the top-right corner of the post card instead. */
	body.vvide3-preview #forumposts .windowbg2 {
		position: relative;
	}

	body.vvide3-preview #forumposts .quickbuttons li.inline_mod_check {
		position: absolute;
		right: 16px;
		top: 16px;
		margin: 0;
	}

	body.vvide3-preview #forumposts .quickbuttons > li > a,
	body.vvide3-preview #personal_messages .quickbuttons > li > a {
		font-size: 12px;
		min-height: 34px;
		padding: 6px 12px;
	}
}

body.vvide3-preview #forumposts .poster h4 > a:first-child {
	order: 2;
}

body.vvide3-preview #forumposts .poster h4 > a:last-child {
	order: 1;
}

body.vvide3-preview #forumposts .poster h4 img {
	height: 14px;
	vertical-align: middle;
	width: auto;
}

/* Replace the useron/useroff.gif online-status icon with a small colored
   dot, matching the style used on the Messages (PM) page. Site-wide
   convention: the dot sits after the member's name, not before it. */
body.vvide3-preview #forumposts .poster h4 > a:first-child {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

body.vvide3-preview #forumposts .poster h4 > a:first-child img {
	display: none;
}

body.vvide3-preview #forumposts .poster h4 > a:first-child::after {
	background: #bbb;
	border-radius: 999px;
	content: "";
	display: inline-block;
	height: 10px;
	width: 10px;
}

body.vvide3-preview #forumposts .poster h4 > a:first-child:has(img[alt="Online"])::after {
	background: #3bbf5e;
}

/* Guests never get a PM-shortcut link (only logged-in members with PM
   rights do), so SMF doesn't wrap the useron/useroff icon in an <a> for
   them at all - it's a bare <img> sibling right before the profile-name
   link. That breaks the rules above two ways: the raw icon is never
   hidden (nothing targets a bare `h4 > img`), and the dot's online/offline
   color check (`a:has(img...)`) can't see an img that isn't its own
   descendant, so it always fell back to the grey/offline color. */
body.vvide3-preview #forumposts .poster h4 > img {
	display: none;
}

body.vvide3-preview #forumposts .poster h4 > img[alt="Online"] + a::after {
	background: #3bbf5e !important;
}

body.vvide3-preview #forumposts .poster ul {
	margin: 0;
	padding: 0;
}

body.vvide3-preview #forumposts .poster ul li.stars {
	margin-bottom: 6px;
}

body.vvide3-preview #forumposts .postarea {
	flex: 1 1 0%;
	float: none;
	margin: 0;
	min-width: 0;
	padding: 30px 32px 34px;
	width: auto;
}

/* .moderatorbar (last-edit info + "Report to moderator") sits as a third
   flex item in .post_wrapper alongside .poster and .postarea, so it was
   rendering as its own narrow, full-height column squeezed to the right
   instead of a normal line at the end of the post. Force it onto its own
   full-width row at the bottom, right-aligned. */
body.vvide3-preview #forumposts .moderatorbar {
	align-items: center;
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	float: none;
	gap: 6px 16px;
	justify-content: space-between;
	margin: 0;
	order: 3;
	padding: 14px 32px;
	text-align: right;
	width: auto;
}

body.vvide3-preview #forumposts .moderatorbar .modified {
	border-top: 0;
	margin-top: 0;
	text-align: left;
}

/* Topic page: keep upper nav-pills aligned left. */
body.vvide3-preview.vvide3-action-display .pagesection:first-of-type .buttonlist,
body.vvide3-preview.vvide3-action-display .pagesection:first-of-type .buttonlist .nav,
body.vvide3-preview.vvide3-action-display .pagesection:first-of-type .buttonlist .nav-pills {
	justify-content: flex-start;
}

body.vvide3-preview.vvide3-action-display .pagesection:first-of-type .buttonlist.floatright {
	float: none;
}

/* Topic page desktop: give post body more width by narrowing poster column. */
@media (min-width: 992px) {
	body.vvide3-preview.vvide3-action-display #forumposts .poster {
		flex: 0 0 216px;
	}

	body.vvide3-preview.vvide3-action-display #forumposts .postarea {
		padding: 28px 28px 32px;
	}
}

body.vvide3-preview #forumposts .flow_hidden {
	align-items: flex-start;
	border-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	margin-bottom: 8px;
	padding-bottom: 0;
}

body.vvide3-preview #forumposts .keyinfo {
	align-items: center;
	display: flex;
	flex: 1 1 260px;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: flex-start;
}

body.vvide3-preview #forumposts .quickbuttons {
	flex: 0 0 auto;
	margin: 0;
	min-height: 0;
	order: 2;
	width: auto;
}

body.vvide3-preview #forumposts .keyinfo h5,
body.vvide3-preview #forumposts .keyinfo h5 a {
	color: var(--vvide-text);
	font-family: var(--vvide-font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

body.vvide3-preview #forumposts .keyinfo h5 {
	flex: 1 1 260px;
	min-width: 0;
}

/* The "« on: <date> »" timestamp must never be squeezed by the flexible
   title next to it - that's what was orphaning the trailing "»" onto its own
   line. Keep it at its natural width and let it wrap to a new row instead of
   shrinking below its content. */
body.vvide3-preview #forumposts .keyinfo .smalltext {
	flex: 0 0 100%;
	text-align: left;
	white-space: normal;
}

body.vvide3-preview #quickModForm {
	background: transparent;
	border: 0;
	border-radius: var(--vvide-radius-md);
	box-shadow: none;
}

/* #quickModForm's id is reused by SMF for several unrelated quick-mod forms
   (the MessageIndex topic table, the Unread/UnreadReplies topic list, PM
   management, etc.) - scope this table-row-striping reset to the MessageIndex
   table specifically, since it was also zeroing out the Unread page's topic
   cards (which rely on the shared .windowbg card background elsewhere). */
body.vvide3-preview #messageindex table,
body.vvide3-preview #messageindex td,
body.vvide3-preview #messageindex th,
body.vvide3-preview #messageindex .windowbg,
body.vvide3-preview #messageindex .windowbg2,
body.vvide3-preview #messageindex .approvebg {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Scoped to the topic-list table specifically (legacy sort-arrow/quick-mod
   gif icons there) - #quickModForm also wraps the whole topic-view page on
   Display.template.php, and hiding every img in that broader scope was also
   hiding real post content images and the online/offline status icon. */
body.vvide3-preview #messageindex img {
	display: none !important;
}

body.vvide3-preview #forumposts .post {
	font-size: 16px;
	line-height: 1.7;
}

body.vvide3-preview #forumposts blockquote.bbc_standard_quote,
body.vvide3-preview #forumposts blockquote.bbc_alternate_quote,
body.vvide3-preview #personal_messages blockquote.bbc_standard_quote,
body.vvide3-preview #personal_messages blockquote.bbc_alternate_quote,
body.vvide3-preview.vvide3-action-profile .post blockquote.bbc_standard_quote,
body.vvide3-preview.vvide3-action-profile .post blockquote.bbc_alternate_quote {
	background: #f7f5f3;
	background-image: none;
	border: 1px solid var(--vvide-line);
	border-left: 4px solid var(--vvide-accent);
	border-radius: var(--vvide-radius-md);
	color: var(--vvide-text);
	font-size: 15px;
	line-height: 1.6;
	margin: 4px 0 16px;
	padding: 16px 18px;
}

body.vvide3-preview #forumposts blockquote.bbc_alternate_quote,
body.vvide3-preview #personal_messages blockquote.bbc_alternate_quote,
body.vvide3-preview.vvide3-action-profile .post blockquote.bbc_alternate_quote {
	background: #efece8;
}

body.vvide3-preview #forumposts .quoteheader,
body.vvide3-preview #personal_messages .quoteheader,
body.vvide3-preview.vvide3-action-profile .post .quoteheader {
	color: var(--vvide-accent-strong);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	margin-bottom: 8px;
	padding: 0;
}

body.vvide3-preview #forumposts .quoteheader a,
body.vvide3-preview #personal_messages .quoteheader a,
body.vvide3-preview.vvide3-action-profile .post .quoteheader a {
	color: inherit;
}

body.vvide3-preview #forumposts .attachments img[id^="thumb_"] {
	display: block;
	margin: 10px 0;
}

body.vvide3-preview #forumposts .attachments a:not([id^="link_"]) {
	display: inline-block;
	margin: 6px 0 16px;
}

body.vvide3-preview #forumposts .signature,
body.vvide3-preview #forumposts .modified {
	border-top: 1px solid var(--vvide-line);
	color: var(--vvide-muted);
	margin-top: 18px;
	padding-top: 16px;
}

body.vvide3-preview .quickbuttons {
	display: flex;
	align-items: center;
	clear: both;
	flex-wrap: wrap;
	float: none;
	gap: 8px;
	list-style: none;
	margin: 16px 0 0;
	min-height: 48px;
	padding: 0;
	width: 100%;
}

body.vvide3-preview .quickbuttons > li {
	background: none;
	float: none;
	margin: 0;
}

body.vvide3-preview .quickbuttons > li > a {
	background: rgba(255, 103, 0, 0.08);
	border: 1px solid rgba(255, 103, 0, 0.08);
	border-radius: 999px;
	color: var(--vvide-accent-strong);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	min-height: 42px;
	padding: 10px 14px;
	align-items: center;
}

body.vvide3-preview .quickbuttons > li > a:hover,
body.vvide3-preview .quickbuttons > li > a:focus {
	background: rgba(255, 103, 0, 0.14);
}

body.vvide3-preview .reply_button > a .main_icons,
body.vvide3-preview .quote_button > a .main_icons {
	display: none;
}

body.vvide3-preview .reply_button > a::before {
	content: none;
}

body.vvide3-preview .quote_button > a::before {
	color: inherit;
	content: "\f10d";
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 1;
	margin-right: 8px;
}

body.vvide3-preview .quickbuttons.quickbuttons_pm,
body.vvide3-preview .quickbuttons.quickbuttons_recent {
	margin-top: 20px;
}

body.vvide3-preview.vvide3-action-profile #forumposts .quickbuttons {
	justify-content: flex-end;
}

body.vvide3-preview.vvide3-action-profile .topic_details {
	padding: 28px 32px 0;
}

body.vvide3-preview.vvide3-action-profile .topic_details h5 {
	margin: 0 0 8px;
}

body.vvide3-preview.vvide3-action-profile .topic_details .smalltext {
	display: block;
	padding-bottom: 8px;
}

body.vvide3-preview.vvide3-action-profile .topic_details + .noticebox {
	margin-left: 32px;
	margin-right: 32px;
}

body.vvide3-preview.vvide3-action-profile .topic_details + .noticebox + .post,
body.vvide3-preview.vvide3-action-profile .topic_details + .post {
	padding: 0 32px;
}

body.vvide3-preview.vvide3-action-profile .post > .inner {
	padding: 8px 0 0;
}

body.vvide3-preview.vvide3-action-profile .quickbuttons.quickbuttons_profile_showposts {
	justify-content: flex-end;
	margin-top: 18px;
	padding: 0 32px 28px;
}

body.vvide3-preview.vvide3-action-profile #attachments {
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	box-shadow: none;
	overflow: hidden;
}

body.vvide3-preview.vvide3-action-profile #attachments table {
	width: 100%;
}

body.vvide3-preview.vvide3-action-profile #attachments thead th {
	background: rgba(255, 103, 0, 0.06);
	padding: 14px 16px;
	vertical-align: middle;
}

body.vvide3-preview.vvide3-action-profile #attachments tbody td,
body.vvide3-preview.vvide3-action-profile #attachments tbody th {
	padding: 16px;
	vertical-align: middle;
}

body.vvide3-preview.vvide3-action-profile #attachments td.subject,
body.vvide3-preview.vvide3-action-profile #attachments th.subject,
body.vvide3-preview.vvide3-action-profile #attachments .subject {
	font-size: 15px;
}

body.vvide3-preview.vvide3-action-profile #attachments td.subject a,
body.vvide3-preview.vvide3-action-profile #attachments td.subject strong,
body.vvide3-preview.vvide3-action-profile #attachments td.subject .smalltext,
body.vvide3-preview.vvide3-action-profile #attachments td.subject div {
	font-size: 15px;
	line-height: 1.5;
}

body.vvide3-preview.vvide3-action-profile #attachments td.subject .smalltext,
body.vvide3-preview.vvide3-action-profile #attachments td.subject div {
	color: var(--vvide-muted);
}

/* Keep the Attachments "Message" column aligned with table typography. */
body.vvide3-preview.vvide3-action-profile #attachments td.subject,
body.vvide3-preview.vvide3-action-profile #attachments td.subject .subject,
body.vvide3-preview.vvide3-action-profile #attachments td.subject a.subject {
	font-family: var(--vvide-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

body.vvide3-preview.vvide3-action-profile #attachments td.subject .subject,
body.vvide3-preview.vvide3-action-profile #attachments td.subject a.subject {
	display: inline;
}

body.vvide3-preview.vvide3-action-profile #attachments td.subject .smalltext {
	font-size: 13px;
	font-weight: 400;
}

body.vvide3-preview #recent .quickbuttons {
	justify-content: flex-end;
}

body.vvide3-preview #recent.main_section,
body.vvide3-preview div#personal_messages {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1240px;
	padding-left: 18px;
	padding-right: 18px;
	width: 100%;
}

body.vvide3-preview #recent.main_section > #display_head.information {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin-bottom: 24px;
	padding: 0;
}

body.vvide3-preview #recent.main_section > #display_head .display_title,
body.vvide3-preview #recent.main_content > #display_head .display_title {
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff974e 100%);
	border-left: 0 !important;
	border-radius: calc(var(--vvide-radius-xl) - 8px);
	box-shadow: 0 14px 26px rgba(255, 103, 0, 0.16);
	color: #fff;
	display: table;
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin: 8px auto 0;
	padding: 16px 28px;
	text-align: center;
	text-transform: uppercase;
}

body.vvide3-preview #recent.main_section > #display_head .display_title span,
body.vvide3-preview #recent.main_content > #display_head .display_title span {
	color: inherit;
}

body.vvide3-preview.vvide3-action-unread .cat_bar:first-of-type,
body.vvide3-preview.vvide3-action-unreadreplies .cat_bar:first-of-type,
body.vvide3-preview.vvide3-action-unread .title_bar:first-of-type,
body.vvide3-preview.vvide3-action-unreadreplies .title_bar:first-of-type,
body.vvide3-preview.vvide3-action-unread .main_section > .cat_bar,
body.vvide3-preview.vvide3-action-unreadreplies .main_section > .cat_bar,
body.vvide3-preview.vvide3-action-unread .main_section > .title_bar,
body.vvide3-preview.vvide3-action-unreadreplies .main_section > .title_bar {
	background: transparent;
	border: 0;
	box-shadow: none;
	margin-bottom: 24px;
	padding: 0;
}

body.vvide3-preview.vvide3-action-unread .cat_bar:first-of-type .catbg,
body.vvide3-preview.vvide3-action-unreadreplies .cat_bar:first-of-type .catbg,
body.vvide3-preview.vvide3-action-unread .title_bar:first-of-type .titlebg,
body.vvide3-preview.vvide3-action-unreadreplies .title_bar:first-of-type .titlebg,
body.vvide3-preview.vvide3-action-unread .main_section > .cat_bar > .catbg,
body.vvide3-preview.vvide3-action-unreadreplies .main_section > .cat_bar > .catbg,
body.vvide3-preview.vvide3-action-unread .main_section > .title_bar > .titlebg,
body.vvide3-preview.vvide3-action-unreadreplies .main_section > .title_bar > .titlebg {
	background: linear-gradient(135deg, var(--vvide-accent) 0%, #ff974e 100%);
	border-left: 0 !important;
	border-radius: calc(var(--vvide-radius-xl) - 8px);
	box-shadow: 0 14px 26px rgba(255, 103, 0, 0.16);
	color: #fff;
	display: table;
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	margin: 8px auto 0;
	min-height: 0;
	padding: 16px 28px;
	text-align: center;
	text-transform: uppercase;
}

body.vvide3-preview #recent > .windowbg,
body.vvide3-preview #recent > .windowbg2,
body.vvide3-preview #recent > .approvebg {
	border: 1px solid var(--vvide-line);
	padding: 24px 28px 28px;
}

/* Post Reply's "Topic Summary" (quoted previous posts) header: "Posted by X"
   is a floated <h5> with the date in a sibling <span> that sits crammed on
   the same line. Put the date on its own line underneath instead. */
body.vvide3-preview #recent .windowbg h5.floatleft,
body.vvide3-preview #recent .windowbg2 h5.floatleft {
	float: none;
	margin: 0 0 2px;
}

body.vvide3-preview #recent .windowbg h5.floatleft + span.smalltext,
body.vvide3-preview #recent .windowbg2 h5.floatleft + span.smalltext {
	color: var(--vvide-muted);
	display: block;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > .windowbg,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > .windowbg2,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > .approvebg,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > .windowbg,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > .windowbg2,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > .approvebg {
	padding: 20px 24px;
}

/* The "Go Down / Pages / Mark ALL.../All Unread Topics" pill row above the
   topic list duplicates the identical row already sitting directly below
   the list (Go Up instead of Go Down) - remove just the top one. */
body.vvide3-preview.vvide3-action-unread .pagesection:first-of-type,
body.vvide3-preview.vvide3-action-unreadreplies .pagesection:first-of-type {
	display: none;
}

/* Give the Subject/Replies/Last post header the same card border/radius as
   the topic rows below it instead of a bare bottom rule. */
body.vvide3-preview.vvide3-action-unread #topic_header.title_bar,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header.title_bar {
	border: 1px solid var(--vvide-line);
	border-radius: 28px;
	padding: 16px 24px;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container .board_icon,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container .board_icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-width: 42px;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container .board_icon > img,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container .board_icon > img,
body.vvide3-preview.vvide3-action-unread #unread #topic_container .board_icon .main_icons,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container .board_icon .main_icons {
	display: none !important;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container .board_icon::before,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container .board_icon::before {
	align-items: center;
	background: var(--vvide-accent-soft);
	border-radius: 999px;
	color: var(--vvide-accent-strong);
	content: "\f27a";
	display: inline-flex;
	font-family: FontAwesome;
	font-size: 15px;
	height: 30px;
	justify-content: center;
	line-height: 1;
	width: 30px;
}

/* Recent.template.php (no vVide3 override exists for it, so this falls back to
   the default theme's markup) lays each topic row out as a flat run of
   sibling divs (.board_icon/.info/.board_stats/.lastpost/.moderation) with no
   flex/grid of its own - they were rendering as stacked blocks. */
body.vvide3-preview.vvide3-action-unread #topic_header,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > div,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div {
	align-items: center;
	display: flex;
	gap: 16px;
}

body.vvide3-preview.vvide3-action-unread #topic_header,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header {
	border-bottom: 1px solid var(--vvide-line);
	color: var(--vvide-muted);
	font-family: var(--vvide-font-display);
	font-size: 14px;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
	padding-bottom: 12px;
	text-transform: uppercase;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div {
	border: 1px solid var(--vvide-line);
}

body.vvide3-preview.vvide3-action-unread #topic_header a,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header a {
	color: inherit;
}

body.vvide3-preview.vvide3-action-unread #topic_header .board_icon,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header .board_icon {
	min-width: 0;
	width: 42px;
}

body.vvide3-preview.vvide3-action-unread #topic_header .info,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .info,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header .info,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .info {
	flex: 1 1 auto;
	min-width: 0;
}

body.vvide3-preview.vvide3-action-unread #topic_header .board_stats,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .board_stats,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header .board_stats,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .board_stats {
	flex: 0 0 110px;
	text-align: center;
}

body.vvide3-preview.vvide3-action-unread #topic_header .lastpost,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .lastpost,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header .lastpost,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .lastpost {
	flex: 0 0 230px;
}

body.vvide3-preview.vvide3-action-unread #topic_header .moderation,
body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .moderation,
body.vvide3-preview.vvide3-action-unreadreplies #topic_header .moderation,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .moderation {
	flex: 0 0 24px;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .board_stats p,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .board_stats p {
	color: var(--vvide-muted);
	font-size: 13px;
	margin: 0;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .lastpost,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .lastpost {
	color: var(--vvide-muted);
	font-size: 13px;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .info .recent_title,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .info .recent_title {
	font-size: 15px;
	font-weight: 600;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .info p,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .info p {
	color: var(--vvide-muted);
	font-size: 13px;
	margin: 4px 0 0;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .moderation input,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .moderation input {
	margin: 0;
}

body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .info .topic_pages,
body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .info .topic_pages {
	margin-left: 6px;
}

/* The topic legend (#topic_icons, at the bottom of Unread/Recent/MessageIndex
   pages) uses bare `<span class="main_icons X">` icons with no text content -
   vVide3's index.css never defines a base `.main_icons` sprite rule (it was
   replaced sitewide with per-context FontAwesome pseudo-elements instead), so
   these legend icons rendered with zero size and were invisible. */
body.vvide3-preview #topic_icons {
	margin-top: 18px;
}

body.vvide3-preview #topic_icons .main_icons {
	color: var(--vvide-accent-strong);
	display: inline-flex;
	font-family: FontAwesome;
	font-size: 13px;
	justify-content: center;
	margin-right: 6px;
	width: 16px;
}

body.vvide3-preview #topic_icons .main_icons.profile_sm::before {
	content: "\f007";
}

body.vvide3-preview #topic_icons .main_icons.poll::before {
	content: "\f080";
}

body.vvide3-preview #topic_icons .main_icons.move::before {
	content: "\f0b2";
}

body.vvide3-preview #topic_icons .main_icons.lock::before {
	content: "\f023";
}

body.vvide3-preview #topic_icons .main_icons.sticky::before {
	content: "\f08d";
}

body.vvide3-preview #topic_icons .main_icons.watch::before {
	content: "\f06e";
}

@media (max-width: 900px) {
	body.vvide3-preview.vvide3-action-unread #topic_header,
	body.vvide3-preview.vvide3-action-unreadreplies #topic_header {
		display: none;
	}

	body.vvide3-preview.vvide3-action-unread #unread #topic_container > div,
	body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div {
		flex-wrap: wrap;
	}

	/* Base theme's responsive.css sets a bare `.board_stats { display: none }`
	   for its own BoardIndex layout at this width, which also matched the
	   Unread page's replies/views count (same class, different page) -
	   silently dropping that info instead of just reflowing it. */
	body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .board_stats,
	body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .board_stats,
	body.vvide3-preview.vvide3-action-unread #unread #topic_container > div .lastpost,
	body.vvide3-preview.vvide3-action-unreadreplies #unreadreplies #topic_container > div .lastpost {
		display: block !important;
		flex: 1 1 auto;
		text-align: left;
	}
}

body.vvide3-preview #recent .list_posts {
	border-top: 1px solid #eee;
}

body.vvide3-preview #recent .windowbg a,
body.vvide3-preview #recent .windowbg2 a,
body.vvide3-preview #recent .approvebg a {
	color: #ff6700;
}

body.vvide3-preview #recent .windowbg a:hover,
body.vvide3-preview #recent .windowbg a:focus,
body.vvide3-preview #recent .windowbg2 a:hover,
body.vvide3-preview #recent .windowbg2 a:focus,
body.vvide3-preview #recent .approvebg a:hover,
body.vvide3-preview #recent .approvebg a:focus {
	color: var(--vvide-accent-strong);
}

/* PM message cards reuse the flat white/grey card + poster/postarea layout
   built for the topic Display page this session. .windowbg is normally
   bordered via the shared card rule, but that rule's border was zeroed out
   site-wide, so PM messages need their own explicit card border here (same
   pattern as #forumposts div.windowbg on the Display page).
   Scoped to div only - .windowbg/.windowbg2 are also used on the inbox
   table's <tr> rows, and this rule's overflow:hidden was clipping the
   quick-mod checkbox inside those rows (border was rendering on only 3
   sides). */
body.vvide3-preview #personal_messages div.windowbg,
body.vvide3-preview #personal_messages div.windowbg2,
body.vvide3-preview #personal_messages div.approvebg {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: var(--vvide-radius-xl);
	box-shadow: none;
	margin-bottom: 22px;
	overflow: hidden;
}

body.vvide3-preview #personal_messages .post_wrapper {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
}

body.vvide3-preview #personal_messages .poster {
	background: #fff;
	border-right: 1px solid #e6e6e6;
	flex: 0 0 250px;
	float: none;
	padding: 24px 22px;
}

body.vvide3-preview #personal_messages .poster h4 {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--vvide-font-display);
	font-size: 24px;
	font-weight: 400;
	gap: 8px;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

body.vvide3-preview #personal_messages .poster h4 .off,
body.vvide3-preview #personal_messages .poster h4 .on {
	background: #bbb;
	border-radius: 999px;
	display: inline-block;
	flex: 0 0 auto;
	height: 10px;
	order: 2;
	width: 10px;
}

body.vvide3-preview #personal_messages .poster h4 .on {
	background: #3bbf5e;
}

body.vvide3-preview #personal_messages .poster .user_info {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vvide3-preview #personal_messages .poster .user_info li {
	margin-bottom: 8px;
}

body.vvide3-preview #personal_messages .poster .user_info li:last-child {
	margin-bottom: 0;
}

body.vvide3-preview #personal_messages .poster .avatar img {
	border: 2px solid rgba(255, 103, 0, 0.12);
	border-radius: 16px;
	box-shadow: none;
}

/* The raw membericons/icon(admin|gmod|mod).png badge is the same legacy
   sprite normalized to profile_sm.gif for member rank icons on the topic
   page - reuse that same asset here for visual consistency. */
body.vvide3-preview #personal_messages .poster li.icons img {
	display: none;
}

body.vvide3-preview #personal_messages .poster li.icons::before {
	background-image: url("../images/profile_sm.gif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	height: 16px;
	width: 16px;
}

/* The base theme's .keyinfo { float: left; width: 50%; } (never overridden
   for PMs, unlike the Display page's own .keyinfo rule) was pulling the
   subject/date column to the left at half width and letting the message
   body wrap up beside it instead of stacking below - that's what caused the
   subject/date and message text to render side-by-side. */
/* Legacy .postarea, .moderatorbar { margin: 0 0 0 16em; } (index.css) was
   built for the old float-based layout and left a huge left margin here,
   which combined with our flexbox conversion squeezed the message body into
   a narrow column with big gaps on both sides. */
body.vvide3-preview #personal_messages .postarea {
	flex: 1 1 0%;
	margin-left: 0;
	min-width: 0;
	padding: 28px 32px 32px;
}

body.vvide3-preview #personal_messages .moderatorbar {
	margin-left: 0;
}

body.vvide3-preview #personal_messages .keyinfo {
	border-bottom: 1px solid #e6e6e6;
	float: none;
	margin-bottom: 18px;
	padding-bottom: 18px;
	width: auto;
}

body.vvide3-preview #personal_messages .subject_title h5 {
	color: var(--vvide-text);
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

body.vvide3-preview #personal_messages .postinfo {
	color: var(--vvide-muted);
	font-size: 13px;
}

body.vvide3-preview #personal_messages .post {
	font-size: 16px;
	line-height: 1.7;
}

body.vvide3-preview #personal_messages .inner {
	border-top: 0;
	margin: 0;
	overflow-wrap: break-word;
	padding: 0;
}

body.vvide3-preview #personal_messages .post_wrapper,
body.vvide3-preview #personal_messages .postarea {
	min-width: 0;
}

body.vvide3-preview #personal_messages .under_message {
	margin-top: 18px;
}

body.vvide3-preview #personal_messages .under_message .quickbuttons .main_icons {
	display: none;
}

body.vvide3-preview #personal_messages .moderatorbar:empty {
	display: none;
}

/* Two-pane layout on desktop/tablet: inbox list on the left, the currently
   open message on the right - like a normal email client - instead of the
   message stacked above the full-width list. Grid placement doesn't depend
   on DOM order, so the sibling divs/table/pagesection can be repositioned
   without touching the PHP template. */
@media (min-width: 900px) {
	body.vvide3-preview #pmFolder {
		align-items: start;
		display: grid;
		gap: 40px;
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	}

	body.vvide3-preview #pmFolder > div.windowbg,
	body.vvide3-preview #pmFolder > div.windowbg2,
	body.vvide3-preview #pmFolder > div.approvebg {
		grid-column: 2;
		grid-row: 1 / span 4;
		margin-bottom: 0;
		min-width: 0;
	}

	body.vvide3-preview #pmFolder > .cat_bar {
		grid-column: 1;
		grid-row: 1;
	}

	body.vvide3-preview #pmFolder > table.table_grid {
		grid-column: 1;
		grid-row: 2;
		min-width: 0;
		table-layout: fixed;
		width: 100%;
	}

	body.vvide3-preview #pmFolder > table.table_grid td:not(:last-child),
	body.vvide3-preview #pmFolder > table.table_grid th:not(.centercol) {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* This column just holds the row-select checkbox (19px incl. border),
	   but the general cell rule's 14px/16px padding left almost no content
	   box in a 32px-wide column - the checkbox overflowed its own td by
	   ~2.5px, which the table's card-style overflow:hidden then clipped,
	   shaving the border off one side. Give it real room and minimal
	   padding instead. */
	body.vvide3-preview #pmFolder > table.table_grid th.centercol,
	body.vvide3-preview #pmFolder > table.table_grid td:last-child {
		overflow: visible;
		padding-left: 6px;
		padding-right: 6px;
		width: 44px;
	}


	body.vvide3-preview #pmFolder > .pagesection {
		grid-column: 1;
		grid-row: 3;
	}

	body.vvide3-preview #pmFolder > br {
		display: none;
	}
}

/* The Inbox list table had no theme styling at all - just the base index.css
   default (2px #f0f0f0 top/right only, no bottom/left, no outer card). Give
   it the same flat white card treatment used elsewhere this session. */
body.vvide3-preview #personal_messages table.table_grid {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	border-radius: var(--vvide-radius-xl);
	overflow: hidden;
	width: 100%;
}

body.vvide3-preview #personal_messages table.table_grid thead th {
	background: transparent;
	border: 0;
	border-bottom: 1px solid #e6e6e6;
	color: var(--vvide-muted);
	padding: 14px 16px;
}

body.vvide3-preview #personal_messages table.table_grid tbody tr > td {
	background: #fff;
	border: 0;
	border-bottom: 1px solid #e6e6e6;
	padding: 14px 16px;
	vertical-align: middle;
}

body.vvide3-preview #personal_messages table.table_grid tbody tr:last-child > td {
	border-bottom: 0;
}

body.vvide3-preview #personal_messages .pm_icon .main_icons {
	align-items: center;
	color: var(--vvide-accent-strong);
	display: inline-flex !important;
	font-size: 14px;
	height: 16px;
	justify-content: center;
	line-height: 1;
	min-width: 16px;
}

body.vvide3-preview #personal_messages .pm_icon .main_icons.replied::before {
	content: "\f112";
	font-family: FontAwesome;
}

body.vvide3-preview #personal_messages .pm_icon .main_icons.im_off::before {
	content: "\f0e0";
	font-family: FontAwesome;
}

body.vvide3-preview #personal_messages .pm_icon .main_icons.switch::before {
	content: "\f0ec";
	font-family: FontAwesome;
}

body.vvide3-preview #personal_messages .pm_subject .pm_inline_time .main_icons {
	align-items: center;
	color: var(--vvide-muted);
	display: inline-flex !important;
	font-size: 13px;
	height: 14px;
	justify-content: center;
	line-height: 1;
	min-width: 14px;
}

body.vvide3-preview #personal_messages .pm_subject .pm_inline_time .main_icons.members::before {
	content: "\f007";
	font-family: FontAwesome;
}

body.vvide3-preview #personal_messages .pm_subject .pm_inline_time .main_icons.people::before {
	content: "\f0c0";
	font-family: FontAwesome;
}

body.vvide3-preview #personal_messages .pm_subject .pm_inline_time .main_icons.time_online::before {
	content: "\f017";
	font-family: FontAwesome;
}

/* Both the author name and the date/time here duplicate the list's own
   From and Date columns - but that's only true on wider screens where
   those columns are actually visible. Base responsive.css hides the From/
   Date columns below 720px and reveals this inline block as the only
   remaining place that info appears; our old unconditional `!important`
   hide killed it there too, leaving the mobile subject list with no sender
   or date at all. Scope the hide to the same breakpoint where the columns
   are actually shown. */
@media screen and (min-width: 721px) {
	body.vvide3-preview #personal_messages .pm_subject .pm_inline_time {
		display: none !important;
	}
}

body.vvide3-preview #personal_messages #postmodify .roundframe {
	padding: 24px 28px 28px;
}

body.vvide3-preview #personal_messages #postmodify #post_header {
	margin: 0 0 18px;
}

body.vvide3-preview #personal_messages #postmodify #post_header dd {
	padding-bottom: 10px;
}

body.vvide3-preview #personal_messages #postmodify #post_confirm_buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 14px;
	padding: 14px 0 6px;
}

body.vvide3-preview #personal_messages #postmodify #post_confirm_buttons .button,
body.vvide3-preview #personal_messages #postmodify #post_confirm_buttons input[type="submit"],
body.vvide3-preview #personal_messages #postmodify #post_confirm_buttons button {
	float: none;
	margin: 0;
}

body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=prune"],
body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=removeall2"] {
	margin: 0;
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=prune"] p,
body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=removeall2"] p {
	margin: 0 0 14px;
}

body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=manlabels"] .block.righttext {
	margin-top: 10px;
}

body.vvide3-preview.vvide3-action-pm #personal_messages form[action*="sa=manlabels"] .cat_bar + .windowbg {
	padding-bottom: 20px;
}

body.vvide3-preview.vvide3-action-pm #personal_messages > form > input.button.floatright,
body.vvide3-preview.vvide3-action-pm #personal_messages > form > input[type="submit"].floatright,
body.vvide3-preview.vvide3-action-pm #personal_messages > form > button.floatright {
	clear: both;
	display: inline-flex;
	float: none;
	margin: 16px 0 0;
	position: static;
}

/* Post Reply / New Topic editor (board & topic posting, #post_area - distinct
   from the PM composer above which already has its own #personal_messages-
   scoped treatment). Base index.css's `form#postmodify .roundframe { padding:
   0 12% }` produces a huge empty side gutter with zero vertical breathing
   room, and the plain 0-border/0-shadow .roundframe has no visible edge -
   unlike every other themed card (board rows, topic posts) which draw a 1px
   line - so the whole editor reads as unstyled floating form controls. */
body.vvide3-preview #post_area.roundframe,
body.vvide3-preview #post_area > .roundframe {
	border: 1px solid var(--vvide-line);
	padding: 24px 28px 28px;
}

body.vvide3-preview #post_area #post_header {
	margin: 0 0 18px;
}

body.vvide3-preview #post_area #post_header dd {
	padding-bottom: 10px;
}

/* Attachments is a second nested .roundframe inside the outer card (also
   matched by the base padding:0 12% rule above) - demote it from its own
   floating white/rounded box to a plain subsection of the same card,
   separated by a divider instead. */
body.vvide3-preview #post_attachments_area.roundframe {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--vvide-line);
	margin: 20px 0 0;
	padding: 20px 0 0;
}

body.vvide3-preview #postAttachment .padding > div {
	margin-bottom: 8px;
}

body.vvide3-preview #postAttachment .smalltext {
	color: var(--vvide-muted);
	margin-bottom: 4px;
}

body.vvide3-preview #attachment_upload #drop_zone_ui {
	background: rgba(255, 103, 0, 0.04);
	border: 1px dashed var(--vvide-line-strong);
	border-radius: var(--vvide-radius-md);
	margin: 16px 0;
	padding: 20px;
}

body.vvide3-preview .attached_BBC_width_height {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 12px 0;
}

body.vvide3-preview .attached_BBC_width,
body.vvide3-preview .attached_BBC_height {
	display: flex;
	align-items: center;
	gap: 8px;
}

body.vvide3-preview #post_confirm_buttons {
	align-items: center;
	border-top: 1px solid var(--vvide-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	padding: 16px 0 0;
}

@media (max-width: 767px) {
	body.vvide3-preview #post_area.roundframe,
	body.vvide3-preview #post_area > .roundframe {
		padding: 18px 16px 20px;
	}
}

/* Add Poll (#edit_poll) shares the same form#postmodify .roundframe with its
   0 12% side-padding and invisible 0-border, so it gets the same unifying-
   card treatment as the post editor above. Its fieldsets also render with
   square corners and a plain browser-default grey border, clashing with the
   rounded, --vvide-line-bordered cards used everywhere else in the theme. */
body.vvide3-preview #edit_poll .roundframe {
	border: 1px solid var(--vvide-line);
	padding: 24px 28px 28px;
}

body.vvide3-preview #edit_poll fieldset {
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-lg);
	margin: 0;
	padding: 18px 20px;
}

body.vvide3-preview #edit_poll fieldset + fieldset {
	margin-top: 20px;
}

body.vvide3-preview #edit_poll legend {
	color: var(--vvide-accent);
	font-family: var(--vvide-font-display);
	font-size: 18px;
	font-weight: 400;
	padding: 0 8px;
}

body.vvide3-preview #edit_poll input.button {
	margin-top: 20px;
}

@media (max-width: 767px) {
	body.vvide3-preview #edit_poll .roundframe {
		padding: 18px 16px 20px;
	}
}

body.vvide3-preview .sceditor-container {
	border: 0 solid #d9d9d9;
}

body.vvide3-preview div.sceditor-toolbar {
	background: #f7f7f7;
	background-clip: padding-box;
	border-bottom: 0 solid #c0c0c0;
	border-radius: 14px 14px 14px 14px;
	flex-shrink: 0;
	line-height: 0;
	margin: 0 0 5px;
	overflow: hidden;
	padding: 3px 5px 2px;
	text-align: left;
	user-select: none;
}

/* Replace legacy selected.png marker in PM list with a text-color bullet marker. */
body.vvide3-preview #personal_messages td.pm_subject img[src*="selected.png"] {
	display: none;
}

body.vvide3-preview #personal_messages td.pm_subject img[src*="selected.png"] + a::before {
	color: currentColor;
	content: "\2022";
	display: inline-block;
	font-size: 1em;
	line-height: 1;
	margin-right: 8px;
	vertical-align: middle;
}

body.vvide3-preview.vvide3-action-unread #messageindex,
body.vvide3-preview.vvide3-action-unreadreplies #messageindex,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .generic_list_wrapper,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .windowbg,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .windowbg2,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .information,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .descbox,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .table_grid,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .windowbg,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .windowbg2,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .information,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .descbox,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .table_grid,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > .generic_list_wrapper {
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-profile #notify_options > .vvide3-notify-general {
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-profile #notify_options > .vvide3-notify-general .settings {
	margin: 0;
	padding: 0;
}

body.vvide3-preview.vvide3-profile-area-deleteaccount #detailedinfo > form > .vvide3-delete-account-content {
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-profile #tracking {
	padding: 28px 32px 32px;
}

body.vvide3-preview.vvide3-action-profile #tracking dl.settings {
	margin-bottom: 0;
	padding: 0;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=tracking;sa=ip"] {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=tracking;sa=ip"] dl.settings {
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=tracking;sa=ip"] input[type="text"] {
	max-width: 100%;
	width: min(420px, 100%);
}

body.vvide3-preview.vvide3-action-profile form[action*="area=tracking;sa=ip"] input[type="submit"] {
	margin: 0;
	position: static;
}

body.vvide3-preview.vvide3-action-profile .vvide3-trackip-input {
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-profile .vvide3-trackip-whois {
	padding: 20px 28px 24px;
}

body.vvide3-preview.vvide3-action-profile .vvide3-trackip-whois a {
	display: inline-block;
	margin-bottom: 6px;
}

body.vvide3-preview.vvide3-action-profile #track_message_list td.subject a,
body.vvide3-preview.vvide3-action-profile #track_message_list td.subject {
	font-family: var(--vvide-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

body.vvide3-preview.vvide3-action-profile #track_message_list td.subject .smalltext,
body.vvide3-preview.vvide3-action-profile #track_message_list td.info .smalltext {
	color: var(--vvide-muted);
	font-size: 13px;
	font-weight: 400;
}

body.vvide3-preview.vvide3-action-profile #topic_notification_list td.subject,
body.vvide3-preview.vvide3-action-profile #topic_notification_list td.subject a {
	font-family: var(--vvide-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
	text-transform: none;
}

body.vvide3-preview.vvide3-action-profile #topic_notification_list tbody td:nth-child(2),
body.vvide3-preview.vvide3-action-profile #topic_notification_list tbody td:nth-child(2) a,
body.vvide3-preview.vvide3-action-profile #topic_notification_list tbody td:nth-child(2) span,
body.vvide3-preview.vvide3-action-profile #topic_notification_list tbody td:nth-child(2) label {
	font-family: var(--vvide-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.45;
	text-transform: none;
}

body.vvide3-preview.vvide3-profile-area-notification #detailedinfo .righttext {
	align-items: center;
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 14px;
}

body.vvide3-preview.vvide3-profile-area-notification #detailedinfo .righttext .button,
body.vvide3-preview.vvide3-profile-area-notification #detailedinfo .righttext input[type="submit"],
body.vvide3-preview.vvide3-profile-area-notification #detailedinfo .righttext input[type="button"],
body.vvide3-preview.vvide3-profile-area-notification #detailedinfo .righttext a.button {
	float: none;
	margin: 0;
	max-width: 100%;
	position: static;
}

body.vvide3-preview.vvide3-action-profile .windowbg > form[action*="area=tracking;sa=ip"] + *,
body.vvide3-preview.vvide3-action-profile .windowbg.description,
body.vvide3-preview.vvide3-action-profile .windowbg > a {
	line-height: 1.7;
}

body.vvide3-preview.vvide3-action-profile #detailedinfo > form .righttext,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .righttext,
body.vvide3-preview.vvide3-action-profile #tracking .righttext,
body.vvide3-preview.vvide3-action-profile #creator .righttext {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

body.vvide3-preview.vvide3-action-profile #detailedinfo > form .righttext .button,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form .righttext input[type="submit"],
body.vvide3-preview.vvide3-action-profile #detailedinfo > .righttext .button,
body.vvide3-preview.vvide3-action-profile #detailedinfo > .righttext input[type="submit"],
body.vvide3-preview.vvide3-action-profile #tracking .righttext .button,
body.vvide3-preview.vvide3-action-profile #tracking .righttext input[type="submit"],
body.vvide3-preview.vvide3-action-profile #creator .righttext .button,
body.vvide3-preview.vvide3-action-profile #creator .righttext input[type="submit"] {
	float: none;
	margin: 0;
	position: static;
}

body.vvide3-preview.vvide3-action-profile #creator > .roundframe > input[type="submit"][name="save"] {
	display: block;
	float: none;
	margin-left: auto;
	margin-right: 0;
	margin-top: 18px;
	position: static;
}

body.vvide3-preview #statistics {
	padding: 0 0 24px;
}

body.vvide3-preview #statistics > .cat_bar:first-child {
	margin-bottom: 28px;
}

body.vvide3-preview #statistics > .roundframe {
	padding: 28px 32px 32px;
}

body.vvide3-preview #statistics .half_content {
	display: inline-block;
	margin: 0 0 28px;
	padding: 0;
	vertical-align: top;
	width: 50%;
}

body.vvide3-preview #statistics .half_content:nth-of-type(odd) {
	padding-right: 14px;
}

body.vvide3-preview #statistics .half_content:nth-of-type(even) {
	padding-left: 14px;
}

body.vvide3-preview #statistics .title_bar {
	margin: 0 0 18px;
}

body.vvide3-preview #statistics .titlebg {
	font-size: 18px;
	font-weight: 500;
	justify-content: flex-start;
	letter-spacing: 0.02em;
	min-height: 62px;
	text-transform: none;
	width: 100%;
}

body.vvide3-preview #statistics dl.stats {
	clear: both;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

body.vvide3-preview #statistics dl.stats dt,
body.vvide3-preview #statistics dl.stats dd {
	border-bottom: 1px solid var(--vvide-line);
	line-height: 1.55;
	margin: 0;
	min-height: 50px;
	padding: 12px 0;
}

body.vvide3-preview #statistics dl.stats dt {
	clear: both;
	color: var(--vvide-text);
	float: left;
	font-size: 15px;
	font-weight: 500;
	width: 48%;
}

body.vvide3-preview #statistics dl.stats dd {
	color: var(--vvide-muted);
	float: right;
	font-size: 15px;
	font-weight: 400;
	text-align: right;
	width: 52%;
}

body.vvide3-preview #statistics dl.stats dt a,
body.vvide3-preview #statistics dl.stats dd a {
	color: #ff6700;
}

body.vvide3-preview #statistics dl.stats dt a:hover,
body.vvide3-preview #statistics dl.stats dt a:focus,
body.vvide3-preview #statistics dl.stats dd a:hover,
body.vvide3-preview #statistics dl.stats dd a:focus {
	color: var(--vvide-accent-strong);
}

body.vvide3-preview #statistics .statsbar.generic_bar {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	padding: 12px 0;
}

body.vvide3-preview #statistics .statsbar .bar {
	background: #ffe0c7;
	border-radius: 999px;
	box-shadow: none;
	display: block;
	flex: 1 1 auto;
	height: 10px;
	margin: 0;
	max-width: 220px;
	min-width: 36px;
}

body.vvide3-preview #statistics .statsbar .bar.empty {
	background: #f3ede7;
}

body.vvide3-preview #statistics .statsbar span {
	color: var(--vvide-text);
	flex: 0 0 auto;
	font-weight: 600;
	min-width: 3ch;
}

body.vvide3-preview #statistics .clear {
	clear: both;
}

body.vvide3-preview #stats {
	margin-top: 0;
	width: 100%;
}

body.vvide3-preview #stats thead tr.title_bar {
	background: transparent;
}

body.vvide3-preview #stats thead th {
	background: #f5f2ed;
	border-bottom: 1px solid var(--vvide-line);
	color: var(--vvide-text);
	font-family: var(--vvide-font-display);
	font-size: 15px;
	font-weight: 500;
	padding: 16px 14px;
	text-transform: none;
}

body.vvide3-preview #stats tbody th,
body.vvide3-preview #stats tbody td {
	border-bottom: 1px solid var(--vvide-line);
	padding: 14px;
	vertical-align: middle;
}

body.vvide3-preview #stats tbody th {
	color: var(--vvide-text);
	font-weight: 500;
	text-align: left;
}

body.vvide3-preview #stats tbody td {
	color: var(--vvide-muted);
	text-align: center;
}

body.vvide3-preview #stats th.stats_month,
body.vvide3-preview #stats td.stats_day {
	padding-left: 28px;
	text-align: left;
}

body.vvide3-preview #stats img[id^="year_img_"],
body.vvide3-preview #stats img[id^="img_"] {
	height: 16px;
	margin-right: 8px;
	vertical-align: middle;
	width: 16px;
}

body.vvide3-preview.vvide3-action-profile #detailedinfo dl.settings dd input[type="submit"],
body.vvide3-preview.vvide3-action-profile #detailedinfo dl.settings dd .button {
	margin-top: 12px;
}

body.vvide3-preview.vvide3-action-profile #detailedinfo > form > input.button.floatright,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > input[type="submit"].floatright,
body.vvide3-preview.vvide3-action-profile #detailedinfo > form > button.floatright {
	float: none;
	margin-left: auto;
	margin-right: 0;
	margin-top: 18px;
}

body.vvide3-preview .vvide3-footer {
	margin: 0 auto;
	max-width: 1440px;
	padding: 0 28px 28px;
	width: 100%;
}

body.vvide3-preview .vvide3-footer-inner {
	align-items: center;
	background: var(--vvide-footer-bg);
	border-radius: var(--vvide-radius-xl);
	color: rgba(255, 250, 245, 0.84);
	display: flex;
	gap: 16px;
	justify-content: center;
	padding: 22px 24px;
}

body.vvide3-preview .vvide3-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.vvide3-preview .vvide3-footer-brand strong {
	color: #fff;
	font-family: var(--vvide-font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body.vvide3-preview .vvide3-footer-brand span,
body.vvide3-preview .vvide3-footer-meta,
body.vvide3-preview .vvide3-load-time {
	color: rgba(255, 250, 245, 0.72);
	font-size: 13px;
	text-align: center;
}

body.vvide3-preview .vvide3-load-time {
	padding: 10px 8px 0;
}

body.vvide3-preview .wrapper,
body.vvide3-preview .content-wrapper,
body.vvide3-preview .content-wrapper > .content {
	background: #fff !important;
}

body.vvide3-preview .vvide3-brand {
	gap: 10px;
	transform: translateY(-5px);
}

body.vvide3-preview .vvide3-brand-mark {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	height: 33px;
	padding: 0;
	width: auto;
}

body.vvide3-preview .vvide3-brand-mark img {
	height: 33px;
	width: auto;
}

body.vvide3-preview .vvide3-brand-wordmark img {
	height: 33px;
	width: auto;
}

body.vvide3-preview .vvide3-messages-menu > .dropdown-toggle {
	padding-right: 14px;
}

body.vvide3-preview .vvide3-messages-dropdown .dropdown-header {
	color: var(--vvide-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 8px 12px 4px;
	text-transform: uppercase;
}

body.vvide3-preview .vvide3-messages-dropdown > li > a {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

body.vvide3-preview .vvide3-messages-dropdown > li > a:hover,
body.vvide3-preview .vvide3-messages-dropdown > li > a:focus {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 103, 0, 0.16);
	color: #ff6700;
}

body.vvide3-preview .vvide3-messages-dropdown > li > a strong {
	background: var(--vvide-accent-soft);
	border-radius: 999px;
	color: var(--vvide-accent-strong);
	font-size: 11px;
	line-height: 1;
	padding: 6px 8px;
}

body.vvide3-preview .vvide3-messages-dropdown > li > a.vvide3-dropdown-current {
	background: rgba(255, 103, 0, 0.1);
	color: #ff6700;
}

body.vvide3-preview #index_common_stats {
	display: none !important;
}

body.vvide3-preview .cat_bar,
body.vvide3-preview .title_bar {
	margin-bottom: 38px;
}

body.vvide3-preview .title_barIC {
	margin-bottom: 12px;
}

/* Show Posts (Messages/Topics/Unwatched/Attachments tabs): the generic
   .cat_bar 38px margin-bottom plus the small .information intro text made
   the gap under the "Show Posts" heading feel mostly empty, and each post
   entry (.windowbg) had no border - only the shared 0-width one everything
   gets by default - so entries ran together with just a faint margin
   between them instead of reading as individual cards. */
body.vvide3-preview.vvide3-profile-area-showposts .cat_bar:first-of-type {
	margin-bottom: 16px;
}

body.vvide3-preview.vvide3-profile-area-showposts .information {
	font-size: 16px;
}

/* .windowbg has zero padding of its own - once we added the border above,
   its content (including the floated "#1"/"#2" post-number) sat flush
   against it, with the number basically overlapping the top-right corner.
   Give the card real breathing room on all sides. */
body.vvide3-preview.vvide3-profile-area-showposts .windowbg {
	border: 1px solid var(--vvide-line);
	padding: 16px 20px;
}

body.vvide3-preview .catbg,
body.vvide3-preview .titlebg {
	align-items: center !important;
	gap: 14px;
	justify-content: flex-start;
	min-height: 72px;
	padding: 18px 24px;
	text-align: left;
}

body.vvide3-preview .catbg > *,
body.vvide3-preview .titlebg > * {
	align-self: center;
}

body.vvide3-preview .catbg .ie6_header,
body.vvide3-preview .titlebg .ie6_header,
body.vvide3-preview .catbg .ie6_header.floatleft,
body.vvide3-preview .titlebg .ie6_header.floatleft {
	align-items: center !important;
	display: inline-flex !important;
	float: none !important;
	justify-content: flex-start;
	min-height: 36px;
	max-width: 100%;
	text-align: left;
	width: auto;
}

body.vvide3-preview .catbg .ie6_header,
body.vvide3-preview .catbg .ie6_header.floatleft {
	flex: 1 1 auto;
}

body.vvide3-preview .catbg .icon,
body.vvide3-preview .titlebg .icon,
body.vvide3-preview .catbg img.icon,
body.vvide3-preview .titlebg img.icon {
	align-self: center;
	display: block;
	margin: 0 !important;
	vertical-align: middle;
}

body.vvide3-preview .vvide3-catbg-title {
	align-items: center;
	display: inline-flex;
	flex: 0 1 auto;
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	gap: 10px;
	letter-spacing: 0.03em;
	min-width: 0;
	text-transform: uppercase;
}

body.vvide3-preview .vvide3-catbg-title a:hover,
body.vvide3-preview .vvide3-catbg-title a:focus {
	color: #fff !important;
}

/* The legacy base theme (index.css) still ships a
   "h3.catbg a:hover { color: #747474 }" rule (a leftover from the classic
   Curve theme this was forked from), which was winning out over the above
   and turning category-title links grey on hover instead of staying white. */
body.vvide3-preview h3.catbg a:hover,
body.vvide3-preview h3.catbg a:focus,
body.vvide3-preview h4.catbg a:hover,
body.vvide3-preview h4.catbg a:focus {
	color: #fff !important;
}

/* The profile page's "PROFILE INFO / FORUM PROFILE / ACTIONS" tab dropdowns
   are structurally nested inside this same h3.catbg heading (they float
   below it visually via absolute positioning, but are still DOM
   descendants) - the !important white-on-hover rule above was bleeding into
   their menu items too, making the text invisible against the dropdown's
   white background. */
body.vvide3-preview h3.catbg .dropdown-menu a:hover,
body.vvide3-preview h3.catbg .dropdown-menu a:focus,
body.vvide3-preview h4.catbg .dropdown-menu a:hover,
body.vvide3-preview h4.catbg .dropdown-menu a:focus {
	color: #ff6700 !important;
}

body.vvide3-preview .vvide3-catbg-actions {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
	margin: 0;
}

body.vvide3-preview.vvide3-action-home .vvide3-catbg-actions {
	display: none;
}

body.vvide3-preview .titlebg > a {
	align-items: center;
	display: inline-flex;
	min-height: 36px;
}

body.vvide3-preview .vvide3-title-toggle {
	flex: 0 0 auto;
}

body.vvide3-preview #upshrink_ic {
	margin-left: 0;
}

body.vvide3-preview .titlebg,
body.vvide3-preview .titlebg .ie6_header,
body.vvide3-preview .titlebg .ie6_header a {
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body.vvide3-preview .catbg .collapse,
body.vvide3-preview .catbg .unreadlink {
	margin: 0;
}

body.vvide3-preview .catbg .collapse img {
	display: block;
	filter: brightness(0) invert(1);
	height: 14px;
	width: auto;
}

body.vvide3-preview .catbg .collapse .fa {
	font-size: 18px;
	line-height: 1;
}

body.vvide3-preview #boardindex_table .vvide3-category-gap td {
	background: transparent;
	border: 0 !important;
	height: 6px;
	padding: 0;
}

/* The top spacer's 6px combines with the category header's own 4px
   margin-bottom for a 10px total gap above the first board row. Tables
   don't support margin between row groups, so there's nothing to close
   the same 10px gap below the last board row before the next category's
   header - this dedicated bottom spacer (echoed once per category, right
   before its tbody.content closes) makes the two match. */
body.vvide3-preview #boardindex_table .vvide3-category-gap-bottom td {
	height: 10px;
}

/* Between each category's tbody and the next sits an unclassed <tbody><tr><td>
   spacer (reserved for the "ads between categories" hook in the template,
   currently disabled). It inherits the generic .table_list td padding
   (18px 16px), which alone renders as a 36px-tall empty row - the biggest
   visible gap on the board index. Shrink it directly. */
body.vvide3-preview #boardindex_table table > tbody:not(.header):not(.content) > tr > td {
	height: 0;
	padding: 6px 16px;
}

body.vvide3-preview #boardindex_table tr.windowbg2,
body.vvide3-preview #boardindex_table tr.windowbg2 > td,
body.vvide3-preview #boardindex_table td.icon.windowbg,
body.vvide3-preview #boardindex_table td.info,
body.vvide3-preview #boardindex_table td.stats.windowbg,
body.vvide3-preview #boardindex_table td.lastpost.hidden-xs.hidden-sm,
body.vvide3-preview #boardindex_table td.children.windowbg {
	box-shadow: none !important;
}

/* border-collapse:separate means each cell has its own independent border, so
   two cells that touch (stacked rows, or neighboring columns in the same
   row) each draw a full border and the shared seam shows as a doubled/
   thicker line. Give every cell only its bottom/right border by default, and
   add the top border back in just for the first row of each category (see
   below), plus the left border back in just for the first column (icon) -
   that way each seam is drawn once, by exactly one side, never twice. */
body.vvide3-preview #boardindex_table td.icon.windowbg,
body.vvide3-preview #boardindex_table td.info,
body.vvide3-preview #boardindex_table td.stats.windowbg,
body.vvide3-preview #boardindex_table td.lastpost.hidden-xs.hidden-sm,
body.vvide3-preview #boardindex_table td.children.windowbg {
	background: #fff;
	background-clip: padding-box;
	border: 1px solid #e6e6e6 !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-radius: 0;
}

body.vvide3-preview #boardindex_table td.icon.windowbg {
	border-left: 1px solid #e6e6e6 !important;
}

body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.icon.windowbg,
body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.info,
body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.stats.windowbg,
body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.lastpost.hidden-xs.hidden-sm {
	border-top: 1px solid #e6e6e6 !important;
}

/* Under border-collapse:collapse, adjacent rows share merged borders, and a
   per-cell border-radius on a shared/merged edge simply doesn't render (this
   is a real browser limitation, not a specificity issue) - so every row can
   no longer look like its own rounded pill. Instead each category's board
   list now reads as one flush block, rounded only at its own outer edges:
   top corners on the first board row, bottom corners on the last. */

/* First board row right after the category-gap spacer. */
body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.icon.windowbg {
	border-top-left-radius: var(--vvide-radius-md);
}

@media (max-width: 991px) {
	body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.info {
		border-top-right-radius: var(--vvide-radius-md);
	}
}

@media (min-width: 992px) {
	body.vvide3-preview #boardindex_table tr.vvide3-category-gap + tr.windowbg2 td.lastpost.hidden-xs.hidden-sm {
		border-top-right-radius: var(--vvide-radius-md);
	}
}

/* Last row of each category's board list (tbody.content) - could be a plain
   board row or, if the last board has sub-boards, its "children" row.
   :has(+ .vvide3-category-gap-bottom) instead of :last-child - the trailing
   gap-spacer row (added to match the top gap) is now the true last-child,
   so :last-child no longer finds the real last board row. */
body.vvide3-preview #boardindex_table tbody.content tr.windowbg2:has(+ .vvide3-category-gap-bottom) td.icon.windowbg {
	border-bottom-left-radius: var(--vvide-radius-md);
}

@media (max-width: 991px) {
	body.vvide3-preview #boardindex_table tbody.content tr.windowbg2:has(+ .vvide3-category-gap-bottom) td.info {
		border-bottom-right-radius: var(--vvide-radius-md);
	}
}

@media (min-width: 992px) {
	body.vvide3-preview #boardindex_table tbody.content tr.windowbg2:has(+ .vvide3-category-gap-bottom) td.lastpost.hidden-xs.hidden-sm {
		border-bottom-right-radius: var(--vvide-radius-md);
	}
}

body.vvide3-preview #boardindex_table tbody.content tr[id$="_children"]:has(+ .vvide3-category-gap-bottom) td.children.windowbg {
	border-bottom-right-radius: var(--vvide-radius-md);
}

body.vvide3-preview #boardindex_table td.icon.windowbg img {
	display: block;
	height: 34px;
	margin: 0 auto;
	object-fit: contain;
	width: 34px;
}

body.vvide3-preview .childboards,
body.vvide3-preview #messageindex,
body.vvide3-preview #forumposts {
	border: 0 solid var(--vvide-line);
}

/* Board page: make sub-boards table follow homepage board card style. */
body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td {
	background: #fff;
	border: 1px solid #e6e6e6 !important;
	border-radius: 0;
	box-shadow: none !important;
}

/* The .table_frame now draws its own single outer border/radius around the
   whole card (see below), so the cells' own perimeter borders on the
   outermost edge are redundant and were showing as a thin doubled line just
   inside the frame's border. Also, under border-collapse: separate every
   cell's own border-bottom sits directly against the next row's
   border-top, doubling every internal row divider too - so no row should
   ever draw border-top; only border-bottom carries the divider line, and
   the last row drops that too since the frame's bottom edge covers it. */
body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td {
	border-top: 0 !important;
}

body.vvide3-preview .childboards .table_list tbody tr.windowbg2:last-child > td {
	border-bottom: 0 !important;
}

body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td:first-child {
	border-left: 0 !important;
}

body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td:last-child {
	border-right: 0 !important;
}

body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td.icon.windowbg {
	border-radius: var(--vvide-radius-md) 0 0 var(--vvide-radius-md);
}

/* Below 992px, stats/lastpost are hidden, so .info becomes the last visible column. */
@media (max-width: 991px) {
	body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td.info {
		border-radius: 0 var(--vvide-radius-md) var(--vvide-radius-md) 0;
	}
}

/* At 992px+, .lastpost (the actual last cell) is the last visible column instead. */
@media (min-width: 992px) {
	body.vvide3-preview .childboards .table_list tbody tr.windowbg2 > td:last-child {
		border-radius: 0 var(--vvide-radius-md) var(--vvide-radius-md) 0;
	}
}

/* Sub-boards with their own children get a row underneath, so the main row's
   right-hand cell is no longer the bottom of the card. */
body.vvide3-preview .childboards .table_list tbody tr.windowbg2.has_children > td.info,
body.vvide3-preview .childboards .table_list tbody tr.windowbg2.has_children > td.stats.windowbg,
body.vvide3-preview .childboards .table_list tbody tr.windowbg2.has_children > td.lastpost.hidden-xs.hidden-sm {
	border-bottom-right-radius: 0;
}

body.vvide3-preview .childboards .table_list tbody tr[id$="_children"] > td.children.windowbg {
	border-radius: 0 0 var(--vvide-radius-md) 0;
}

body.vvide3-preview .childboards .catbg {
	box-shadow: none;
}

/* The internal cell borders draw the row/column grid lines fine, but the
   card wrapper itself had no outer border, so the whole sub-boards table
   had no visible left/right/top/bottom edge and blended into the page
   background. Give the frame (which already clips to the card radius) a
   real outer border. */
body.vvide3-preview .childboards .table_frame {
	background: transparent;
	border: 1px solid var(--vvide-line);
	box-shadow: none;
	padding: 0;
}

body.vvide3-preview .childboards .table_list {
	border: 0;
	box-shadow: none;
}

/* Board page: normalize topic table structure/typography. */
/* border-collapse: collapse silently prevents border-radius (and
   border-spacing) from painting in Chromium, which is why individual topic
   rows here had no visible rounding, left/right border, or gap between rows
   despite every cell computing the correct values. Use separate so the
   per-row "card" look and the row gaps actually render. */
body.vvide3-preview #messageindex .table_grid {
	background: transparent;
	border-collapse: separate;
	border-spacing: 0 10px;
}

body.vvide3-preview #messageindex .table_grid thead tr.catbg,
body.vvide3-preview #messageindex .table_grid thead tr.titlebg {
	display: table-row !important;
}

body.vvide3-preview #messageindex .table_grid thead tr.catbg th,
body.vvide3-preview #messageindex .table_grid thead tr.titlebg th {
	background: transparent;
	color: #fff;
	vertical-align: middle;
}

body.vvide3-preview #messageindex .table_grid thead tr.catbg th a,
body.vvide3-preview #messageindex .table_grid thead tr.titlebg th a {
	color: #fff;
}

body.vvide3-preview #messageindex .table_grid tbody tr > td {
	background: #fff;
	border-bottom: 1px solid #e6e6e6;
	border-top: 1px solid #e6e6e6;
	vertical-align: middle;
}

body.vvide3-preview #messageindex td.icon1,
body.vvide3-preview #messageindex td.icon2,
body.vvide3-preview #messageindex td.subject,
body.vvide3-preview #messageindex td.stats,
body.vvide3-preview #messageindex td.lastpost,
body.vvide3-preview #messageindex td.moderation {
	background: #fff !important;
	border-bottom-color: #e6e6e6;
	border-top-color: #e6e6e6;
}

body.vvide3-preview #messageindex td.icon1,
body.vvide3-preview #messageindex td.icon2 {
	text-align: center;
	width: 46px;
}

body.vvide3-preview #messageindex td.icon1 img,
body.vvide3-preview #messageindex td.icon2 img {
	display: inline-block !important;
	height: 22px;
	object-fit: contain;
	width: 22px;
}

/* Give every column an explicit width so the browser's auto table-layout
   doesn't invent its own (wildly uneven) distribution for unconstrained
   columns - this is what was ballooning icon1 to ~292px while starving
   icon2 below its own 46px spec. */
body.vvide3-preview #messageindex td.stats {
	width: 15%;
}

body.vvide3-preview #messageindex td.lastpost {
	width: 24%;
}

body.vvide3-preview #messageindex td.moderation {
	width: 40px;
}

/* Only the outer edges of the topic "card" should be rounded - same reasoning
   as the boardindex/sub-boards fix: middle cells stay square so two rounded
   corners never pinch together into a false notch. */
body.vvide3-preview #messageindex td.icon2,
body.vvide3-preview #messageindex td.subject,
body.vvide3-preview #messageindex td.stats,
body.vvide3-preview #messageindex td.lastpost {
	border-radius: 0;
}

/* Note: .childboards is deliberately excluded here - it now has a single
   outer frame border/radius around the whole card (see table_frame rule),
   so its rows must not re-add their own per-row left/right border or
   rounding, or it doubles the frame's edge again. */
body.vvide3-preview #messageindex .table_grid tbody tr > td.icon1:first-child {
	border-left: 1px solid #e6e6e6 !important;
	border-radius: var(--vvide-radius-md) 0 0 var(--vvide-radius-md);
}

/* Whichever column actually ends up last (moderation for logged-in users
   with quick-mod rights, lastpost/stats for everyone else - guests never
   get the moderation checkbox column at all) needs the same right-edge
   treatment, so this can't be tied to a specific column class.
   :not(.vvide3-ad-row) - see the first-child:last-child rule below for why. */
body.vvide3-preview #messageindex .table_grid tbody tr:not(.vvide3-ad-row) > td:last-child {
	border-radius: 0 var(--vvide-radius-md) var(--vvide-radius-md) 0;
	border-right: 1px solid #e6e6e6 !important;
}

/* The "X Members and Y Guests are viewing this board" row is a single
   colspan cell - both first-child and last-child at once, so the two rules
   above (each a full border-radius shorthand) would otherwise fight and
   only the last one applied wins, rounding just one side. Needs its own,
   higher-specificity rule to round all four corners.
   :not(.vvide3-ad-row) excludes the in-feed ad row lower down the page -
   that one's also a single colspan cell, but it already carries its own
   border/radius via .vvide3-ad-slot; this rule's higher specificity would
   otherwise win over that row's own `border: 0` reset and double up. */
body.vvide3-preview #messageindex .table_grid tbody tr:not(.vvide3-ad-row) > td:first-child:last-child {
	border-left: 1px solid #e6e6e6 !important;
	border-right: 1px solid #e6e6e6 !important;
	border-radius: var(--vvide-radius-md);
}


body.vvide3-preview #messageindex td.subject {
	color: var(--vvide-text);
	display: table-cell;
	font-family: var(--vvide-font-body);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.5;
	margin: 0;
	text-transform: none;
}

body.vvide3-preview #messageindex td.subject p {
	margin: 6px 0 0;
}

body.vvide3-preview #messageindex td.subject .new_posts {
	display: inline-flex;
}

/* Quick moderation action row (qaction area) and the "N members viewing"
   row - give them the same rounded-card border treatment as topic rows
   instead of the plain full-bleed hairline separators. */
body.vvide3-preview #messageindex tr.titlebg td.text-right,
body.vvide3-preview #messageindex td.smalltext {
	background: #fff;
	border: 1px solid #e6e6e6 !important;
	border-radius: var(--vvide-radius-md);
	box-shadow: none;
	padding: 14px 16px;
}

body.vvide3-preview #messageindex tr.titlebg td.text-right {
	text-align: right;
}

body.vvide3-preview #messageindex select.qaction,
body.vvide3-preview #messageindex input.button_submit.qaction {
	margin-left: 10px;
	min-height: 40px;
	vertical-align: middle;
}

body.vvide3-preview #messageindex select.qaction {
	background-color: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	padding: 8px 34px 8px 12px;
}

body.vvide3-preview #messageindex input.button_submit.qaction {
	align-items: center;
	background: var(--vvide-accent);
	border: 1px solid var(--vvide-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	padding: 8px 16px;
}

body.vvide3-preview #posting_icons {
	align-items: center;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: var(--vvide-radius-lg);
	display: inline-flex;
	margin-bottom: 24px;
	margin-top: 20px;
	padding: 12px 16px;
}

/* Base index.css gives .mark_read a `margin-top: -10px`, pulling it up
   above #posting_icons's own 20px top margin instead of sitting level with
   it (both are floats on the same row). */
body.vvide3-preview .mark_read {
	margin-top: 20px;
}

body.vvide3-preview #posting_icons ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}

body.vvide3-preview #posting_icons li {
	align-items: center;
	display: inline-flex;
	float: none;
	gap: 10px;
	list-style: none;
	margin: 0;
}

body.vvide3-preview #posting_icons img {
	display: block;
	height: 28px;
	object-fit: contain;
	width: 28px;
}

body.vvide3-preview #recent_posts_content,
body.vvide3-preview #recent_posts_content a {
	color: #ff6700;
}

body.vvide3-preview #recent_posts_content .vvide3-recent-meta,
body.vvide3-preview #recent_posts_content .vvide3-recent-meta a {
	color: #a6a6a6;
	font-weight: 400;
}

body.vvide3-preview #recent_posts_content dt strong a {
	color: #ff6700;
	font-weight: 600;
}

/* The base theme lays each post out as `dt{float:left}` + `dd{text-align:
   right}` with no clear - fine on a wide desktop line where both fit
   side-by-side, but once dt's title text wraps to 2-3 lines (common on
   narrow screens), dd has no room left beside the float and drops down,
   landing next to/above the FOLLOWING dt instead of its own - the dates
   visually attach to the wrong post. Use grid so each dt/dd pair stays
   correctly paired regardless of how much either one wraps. */
body.vvide3-preview #ic_recentposts {
	column-gap: 14px;
	display: grid;
	grid-template-columns: 1fr auto;
	row-gap: 2px;
}

body.vvide3-preview #ic_recentposts dt,
body.vvide3-preview #ic_recentposts dd {
	float: none;
	margin: 0;
}

body.vvide3-preview #ic_recentposts dd {
	text-align: right;
	white-space: nowrap;
}

body.vvide3-preview #ic_recentposts dt {
	padding-bottom: 10px;
}

@media (max-width: 767px) {
	body.vvide3-preview #ic_recentposts {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	/* "by X - board" reads better on its own line under the title on
	   narrow screens rather than wrapping inline right after it. */
	body.vvide3-preview #ic_recentposts .vvide3-recent-meta {
		display: block;
		margin-top: 4px;
	}

	/* dt and dd are separate grid rows (not a shared wrapper element), but
	   giving dt a top+side border and dd a bottom+side border with no
	   border between them makes the pair read as one bordered card. */
	body.vvide3-preview #ic_recentposts dt {
		border: 1px solid var(--vvide-line);
		border-bottom: 0;
		border-radius: var(--vvide-radius-md) var(--vvide-radius-md) 0 0;
		padding: 12px 14px 6px;
	}

	body.vvide3-preview #ic_recentposts dd {
		border: 1px solid var(--vvide-line);
		border-top: 0;
		border-radius: 0 0 var(--vvide-radius-md) var(--vvide-radius-md);
		color: var(--vvide-muted);
		font-size: 13px;
		margin-bottom: 8px;
		padding: 0 14px 12px;
		text-align: left;
		white-space: normal;
	}
}

body.vvide3-preview #recent.main_section .pagesection {
	justify-content: center;
}

body.vvide3-preview #recent.main_section .pagesection .pagelinks {
	justify-content: center;
}

body.vvide3-preview.vvide3-action-search .cat_bar,
body.vvide3-preview.vvide3-action-search .title_bar,
body.vvide3-preview.vvide3-action-search2 .cat_bar,
body.vvide3-preview.vvide3-action-search2 .title_bar {
	margin-bottom: 50px;
}

body.vvide3-preview #advanced_search dl#search_options {
	align-items: center;
	display: grid;
	gap: 12px 18px;
	grid-template-columns: 180px minmax(0, 1fr);
	max-width: min(100%, 700px);
	width: 100%;
}

body.vvide3-preview #advanced_search dt,
body.vvide3-preview #advanced_search dd {
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}

body.vvide3-preview #advanced_search dt {
	justify-self: end;
	text-align: right;
}

body.vvide3-preview #advanced_search dd {
	min-width: 0;
	text-align: left;
}

/* Base theme's `dl.settings dd { float: right; overflow: auto; }` (meant
   for admin settings forms) also matches this search options list, and the
   float's auto-computed height came out a couple px short of the two
   checkbox lines - triggering a pointless internal scrollbar. */
body.vvide3-preview #advanced_search dd.options {
	display: grid;
	float: none;
	gap: 6px;
	overflow: visible;
	width: auto;
}

body.vvide3-preview #advanced_panel_link,
body.vvide3-preview #advanced_panel_link strong {
	font-family: var(--vvide-font-display);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body.vvide3-preview .vvide3-new-marker {
	align-items: center;
	background: rgba(255, 103, 0, 0.08);
	border: 1px solid rgba(255, 103, 0, 0.14);
	border-radius: 999px;
	color: #ff6700 !important;
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.06em;
	margin-left: 6px;
	margin-right: 2px;
	padding: 4px 8px;
	text-transform: uppercase;
	vertical-align: middle;
}

body.vvide3-preview .vvide3-new-marker .fa {
	font-size: 10px;
}

/* Sub-boards (BoardIndex "Sub-Boards: X, Y" line) - match the parent board
   title's orange rather than the generic link color, and shrink the "new"
   marker down to just the bolt icon (no pill/label) since the line is
   already dense with comma-separated links. */
body.vvide3-preview #boardindex_table td.children a {
	color: var(--vvide-accent);
}

body.vvide3-preview #boardindex_table td.children a:hover,
body.vvide3-preview #boardindex_table td.children a:focus {
	color: var(--vvide-accent-strong);
}

body.vvide3-preview #boardindex_table td.children .vvide3-new-marker {
	background: transparent;
	border: 0;
	margin-left: 4px;
	margin-right: 0;
	padding: 0;
	vertical-align: baseline;
}

body.vvide3-preview #boardindex_table td.children .vvide3-new-marker span {
	display: none;
}

body.vvide3-preview #memberlist #advanced_search {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 auto;
	max-width: 840px;
	padding: 24px 28px 28px;
}

body.vvide3-preview #memberlist > .cat_bar {
	margin: 0 auto 20px;
	max-width: 840px;
}

body.vvide3-preview.vvide3-action-mlist #memberlist > .cat_bar,
body.vvide3-preview.vvide3-action-mlist #memberlist #advanced_search {
	max-width: none;
	width: 100%;
}

body.vvide3-preview.vvide3-action-mlist #memberlist > .cat_bar {
	margin-bottom: 48px;
}

body.vvide3-preview #memberlist #mlist_search {
	align-items: center;
	display: grid;
	gap: 12px 18px;
	grid-template-columns: 180px minmax(0, 1fr);
	max-width: none;
}

body.vvide3-preview #memberlist #mlist_search dt,
body.vvide3-preview #memberlist #mlist_search dd {
	float: none;
	margin: 0;
	padding: 0;
	width: auto;
}

body.vvide3-preview #memberlist #mlist_search dt {
	justify-self: end;
	text-align: right;
}

body.vvide3-preview #memberlist #mlist_search dt label strong {
	color: var(--vvide-text);
	font-family: var(--vvide-font-display);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.vvide3-preview #memberlist #mlist_search dd {
	min-width: 0;
	text-align: left;
}

body.vvide3-preview #memberlist #mlist_search input[type="text"] {
	width: 100%;
}

body.vvide3-preview #memberlist #mlist_search ul {
	display: grid;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.vvide3-preview #memberlist #mlist_search li::marker {
	content: "";
}

body.vvide3-preview #memberlist #advanced_search input[type="submit"] {
	align-self: flex-end;
	float: none;
	margin: 0;
}

body.vvide3-preview #mlist {
	background: var(--vvide-surface);
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	margin-bottom: 7px;
	overflow: hidden;
}

body.vvide3-preview #mlist .is_online {
	width: 72px;
}

body.vvide3-preview #mlist .is_online a,
body.vvide3-preview #mlist .is_online span {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

body.vvide3-preview #mlist .is_online .on,
body.vvide3-preview #mlist .is_online .off {
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	height: 18px;
	position: relative;
	width: 18px;
}

body.vvide3-preview #mlist .is_online .on::before,
body.vvide3-preview #mlist .is_online .off::before {
	border-radius: 999px;
	content: "";
	height: 8px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
}

body.vvide3-preview #mlist .is_online .on::before {
	background: #ff6700;
}

body.vvide3-preview #mlist .is_online .off::before {
	background: #c8c8c8;
}

body.vvide3-preview #basicinfo h4 {
	font-size: 190%;
	font-weight: 500;
	margin: 0 0 8px;
	white-space: normal;
}

body.vvide3-preview #basicinfo img.avatar {
	margin-bottom: 0;
	margin-top: 4px;
	max-width: 90px;
	width: 100%;
}

body.vvide3-preview #basicinfo ul {
	margin: 6px 0 10px;
}

body.vvide3-preview #basicinfo .infolinks {
	display: block;
	margin-top: 6px;
}

body.vvide3-preview #profileview {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.vvide3-preview #basicinfo {
	display: flex;
	flex-direction: column;
	flex: 0 0 220px;
	gap: 6px;
	max-width: 220px;
	width: 220px;
}

body.vvide3-preview #basicinfo,
body.vvide3-preview #detailedinfo {
	float: none;
}

body.vvide3-preview #detailedinfo {
	flex: 1 1 0;
	max-width: calc(100% - 244px);
	min-width: 0;
	width: auto;
}

body.vvide3-preview #generalstats,
body.vvide3-preview #activitytime,
body.vvide3-preview #activity_topics,
body.vvide3-preview #activity_boards,
body.vvide3-preview #top_posters,
body.vvide3-preview #top_topics,
body.vvide3-preview #top_boards {
	background: var(--vvide-surface);
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	box-shadow: none;
	margin-bottom: 18px;
	overflow: hidden;
	padding: 24px 28px 28px;
}

body.vvide3-preview #generalstats {
	flex: 0 0 320px;
}

body.vvide3-preview #generalstats .stats {
	display: grid;
	gap: 10px 18px;
	grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
	margin: 0;
}

body.vvide3-preview #generalstats .stats dt,
body.vvide3-preview #generalstats .stats dd {
	margin: 0;
}

body.vvide3-preview #generalstats .stats dt {
	color: var(--vvide-muted);
	font-family: var(--vvide-font-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.vvide3-preview #generalstats .stats dd {
	font-size: 16px;
	font-weight: 500;
}

body.vvide3-preview #activitytime {
	flex: 1 1 420px;
}

body.vvide3-preview #profileview .bar {
	border-radius: 999px;
	overflow: hidden;
}

body.vvide3-preview #profileview .title_bar {
	margin-bottom: 18px;
}

body.vvide3-preview.vvide3-profile-area-statistics #profileview {
	display: block;
	gap: 0;
	padding: 28px 32px 32px;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats,
body.vvide3-preview.vvide3-profile-area-statistics #activitytime,
body.vvide3-preview.vvide3-profile-area-statistics .half_content {
	margin-bottom: 28px;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(160px, 320px) minmax(0, 1fr);
	margin: 0;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dt,
body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dd {
	border-bottom: 1px solid var(--vvide-line);
	margin: 0;
	padding: 12px 0;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dt {
	color: var(--vvide-muted);
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dd {
	color: var(--vvide-text);
	font-weight: 500;
	text-align: right;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dt:last-of-type,
body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dd:last-of-type {
	border-bottom: 0;
}

body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats a,
body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dt a {
	color: var(--vvide-accent);
}

body.vvide3-preview.vvide3-profile-area-statistics #activitytime {
	margin-top: 6px;
}

/* Old vVide3 index.css only styles `.activity_stats li div.bar div`, but the
   template's bar markup is `.generic_bar.vertical > .bar > span` - there's no
   nested div, so the base sheet's height/background never applied and the
   chart rendered as a flat 0-height row. */
body.vvide3-preview.vvide3-profile-area-statistics .activity_stats {
	align-items: flex-end;
	display: flex;
	gap: 2px;
	height: 120px;
	margin: 18px 0 10px;
	padding: 0;
}

body.vvide3-preview.vvide3-profile-area-statistics .activity_stats li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	float: none;
	height: 100%;
	justify-content: flex-end;
	width: auto;
}

body.vvide3-preview.vvide3-profile-area-statistics .activity_stats .generic_bar.vertical {
	background: #f3ede7;
	border-radius: 4px;
	display: block;
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}

body.vvide3-preview.vvide3-profile-area-statistics .activity_stats .generic_bar.vertical .bar {
	background: linear-gradient(180deg, var(--vvide-accent) 0%, var(--vvide-accent-strong) 100%);
	border-radius: 4px;
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
}

body.vvide3-preview.vvide3-profile-area-statistics .activity_stats .generic_bar.vertical .bar span {
	left: -1000em;
	position: absolute;
	top: -1000em;
}

body.vvide3-preview.vvide3-profile-area-statistics .activity_stats .stats_hour {
	color: var(--vvide-muted);
	display: block;
	font-size: 11px;
	margin-top: 6px;
	text-align: center;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content {
	display: inline-block;
	padding: 0;
	vertical-align: top;
	width: 50%;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content:first-of-type {
	padding-right: 14px;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content:last-of-type {
	padding-left: 14px;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats {
	margin: 0;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dt,
body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dd {
	border-bottom: 1px solid var(--vvide-line);
	margin: 0;
	padding: 10px 0;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dt {
	color: var(--vvide-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dd {
	align-items: center;
	color: var(--vvide-muted);
	display: flex;
	font-size: 13px;
	font-weight: 500;
	gap: 8px;
	justify-content: flex-end;
}

body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dt:last-of-type,
body.vvide3-preview.vvide3-profile-area-statistics .half_content .stats dd:last-of-type {
	border-bottom: 0;
}

/* .profile_pie's sprintf text is only offscreen on its first line
   (text-indent:-1000em only affects the first line of a block) - the 20px-wide
   box has no white-space/overflow control, so the long sentence wraps and its
   later lines render as garbled overlapping text. Clip it to a single hidden
   line and keep just the decorative pie icon. */
body.vvide3-preview.vvide3-profile-area-statistics .profile_pie {
	flex: 0 0 auto;
	font-size: 0;
	margin: 0;
	overflow: hidden;
	text-indent: 0;
	white-space: nowrap;
}

body.vvide3-preview.vvide3-profile-area-statistics #profileview .bar {
	border-radius: 0;
	overflow: visible;
}

body.vvide3-preview.vvide3-profile-area-statistics #profileview .title_bar {
	margin-bottom: 18px;
}

body.vvide3-preview #basicinfo > * {
	margin-bottom: 0;
}

body.vvide3-preview #basicinfo .username,
body.vvide3-preview #basicinfo .custom_fields_above_name,
body.vvide3-preview #basicinfo .custom_fields_below_avatar,
body.vvide3-preview #basicinfo .custom_fields_bottom,
body.vvide3-preview #basicinfo #userstatus {
	margin: 0;
}

body.vvide3-preview #basicinfo #userstatus {
	align-items: center;
	color: var(--vvide-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.vvide3-preview #basicinfo #userstatus a {
	align-items: center;
	display: inline-flex;
}

body.vvide3-preview #basicinfo #userstatus br {
	flex-basis: 100%;
	height: 0;
}

body.vvide3-preview #basicinfo #userstatus .on,
body.vvide3-preview #basicinfo #userstatus .off {
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	display: inline-block;
	height: 18px;
	position: relative;
	vertical-align: middle;
	width: 18px;
}

body.vvide3-preview #basicinfo #userstatus .on::before,
body.vvide3-preview #basicinfo #userstatus .off::before {
	border-radius: 999px;
	content: "";
	height: 8px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
}

body.vvide3-preview #basicinfo #userstatus .on::before {
	background: #ff6700;
}

body.vvide3-preview #basicinfo #userstatus .off::before {
	background: #c8c8c8;
}

body.vvide3-preview #basicinfo #userstatus .smalltext {
	color: var(--vvide-muted);
	font-size: 14px;
	font-weight: 500;
}

body.vvide3-preview #basicinfo #userstatus .vvide3-buddy-action {
	display: block;
	flex-basis: 100%;
	margin-top: 4px;
	width: 100%;
}

body.vvide3-preview #basicinfo #userstatus .vvide3-buddy-action a {
	display: inline-flex;
}

body.vvide3-preview .vvide3-summary-header .catbg {
	justify-content: space-between;
	height: auto;
	line-height: normal;
	overflow: visible;
	position: relative;
	z-index: 5;
}

body.vvide3-preview .vvide3-summary-header-actions {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
	margin-left: auto;
}

body.vvide3-preview .vvide3-summary-menu {
	position: relative;
}

body.vvide3-preview .vvide3-summary-menu-trigger {
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 999px;
	color: #fff !important;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	min-height: 38px;
	padding: 8px 14px;
	text-decoration: none;
}

body.vvide3-preview .vvide3-summary-menu-trigger:hover,
body.vvide3-preview .vvide3-summary-menu-trigger:focus {
	background: rgba(255, 255, 255, 0.2);
	color: #fff !important;
	text-decoration: none;
}

body.vvide3-preview .vvide3-summary-menu-list {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid var(--vvide-line);
	border-radius: 16px;
	box-shadow: var(--vvide-shadow);
	margin-top: 10px;
	min-width: 220px;
	padding: 10px;
}

body.vvide3-preview .vvide3-summary-menu-list > li > a {
	border-radius: 10px;
	color: var(--vvide-text);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
}

body.vvide3-preview .vvide3-summary-menu-list > li > a:hover,
body.vvide3-preview .vvide3-summary-menu-list > li > a:focus {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 103, 0, 0.16);
	color: #ff6700;
	text-decoration: none;
}

/* Keep only the summary header that contains Profile Info / Forum Profile / Actions. */
body.vvide3-preview.vvide3-action-profile.vvide3-profile-area-summary .cat_bar:not(.vvide3-summary-header) {
	display: none;
}

body.vvide3-preview.vvide3-action-profile.vvide3-profile-area-summary .cat_bar:has(> .profile_hd):not(:has(.vvide3-summary-header-actions)),
body.vvide3-preview.vvide3-action-profile.vvide3-profile-area-summary .title_bar:has(> .profile_hd):not(:has(.vvide3-summary-header-actions)) {
	display: none;
}

body.vvide3-preview #basicinfo .icon_fields {
	margin: 2px 0 0;
}

body.vvide3-preview #basicinfo .icon_fields::after,
body.vvide3-preview #basicinfo .custom_fields_above_name ul::after,
body.vvide3-preview #basicinfo .custom_fields_below_avatar ul::after {
	clear: both;
	content: "";
	display: block;
}

body.vvide3-preview .edit_avatar_img {
	margin-bottom: 20px;
}

body.vvide3-preview #avatar_upload {
	background: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-lg);
	margin-top: 10px;
	padding: 18px 20px;
}

body.vvide3-preview #avatar_upload_box,
body.vvide3-preview #avatar_external input[type="text"],
body.vvide3-preview #avatar_gravatar input[type="text"] {
	background: linear-gradient(180deg, #fff 0%, #fff7f2 100%);
	border: 1px solid rgba(255, 103, 0, 0.18);
	border-radius: var(--vvide-radius-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
	padding: 14px 16px;
}

body.vvide3-preview #avatar_upload .smalltext,
body.vvide3-preview #avatar_external .smalltext,
body.vvide3-preview #avatar_gravatar .smalltext {
	color: var(--vvide-muted);
	margin-bottom: 8px;
}

body.vvide3-preview #avatar_upload_box + .smalltext {
	margin-left: 5px;
}

body.vvide3-preview #creator label[for="avatar_choice_none"],
body.vvide3-preview #creator label[for="avatar_choice_server_stored"],
body.vvide3-preview #creator label[for="avatar_choice_external"],
body.vvide3-preview #creator label[for="avatar_choice_upload"],
body.vvide3-preview #creator label[for="avatar_choice_gravatar"] {
	font-weight: 400;
}

body.vvide3-preview.vvide3-profile-area-forumprofile #creator fieldset {
	background: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-lg);
	margin-top: 10px;
	padding: 18px 20px;
}

body.vvide3-preview.vvide3-profile-area-forumprofile #creator fieldset legend {
	color: var(--vvide-text);
	font-family: var(--vvide-font-display);
	font-size: 18px;
	font-weight: 400;
	margin: 0 0 10px;
	padding: 0 6px;
}

body.vvide3-preview .vvide3-birthdate-fields {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.vvide3-preview .vvide3-birthdate-fields input[name="bday3"] {
	width: 110px;
}

body.vvide3-preview .vvide3-birthdate-fields input[name="bday1"],
body.vvide3-preview .vvide3-birthdate-fields input[name="bday2"] {
	width: 82px;
}

body.vvide3-preview #edit_buddies .information .settings dt,
body.vvide3-preview #edit_buddies .information .settings dd {
	align-self: center;
}

body.vvide3-preview.vvide3-profile-area-lists form[action*="area=lists;sa=buddies"] .information,
body.vvide3-preview.vvide3-profile-area-lists form[action*="area=lists;sa=ignore"] .information {
	padding: 20px 24px;
}

body.vvide3-preview.vvide3-profile-area-lists form[action*="area=lists;sa=buddies"] .information .settings,
body.vvide3-preview.vvide3-profile-area-lists form[action*="area=lists;sa=ignore"] .information .settings {
	margin: 0;
	padding: 0;
}

body.vvide3-preview.vvide3-action-profile .title_bar {
	margin-bottom: 18px;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .title_bar:last-of-type {
	margin-bottom: 40px;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .title_bar + .windowbg.noup {
	padding: 24px 28px 28px;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .title_bar + .windowbg.noup .settings {
	margin: 0;
	padding: 0;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 16px;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext #export_begin,
body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext #export_restart {
	max-width: 100%;
}

body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext #export_begin .button,
body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext #export_restart .button,
body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext > .button,
body.vvide3-preview.vvide3-action-profile form[action*="area=getprofiledata"] .windowbg.noup .righttext > input[type="submit"] {
	float: none;
	margin: 0;
	position: static;
}

body.vvide3-preview.vvide3-action-profile #genericmenu,
body.vvide3-preview.vvide3-action-profile #adm_submenus,
body.vvide3-preview.vvide3-action-profile a[class^="mobile_generic_menu_"] {
	display: none !important;
}

body.vvide3-preview #advanced_search input[name="minage"],
body.vvide3-preview #advanced_search input[name="maxage"] {
	display: inline-block;
	max-width: 7ch;
	min-width: 7ch;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
	vertical-align: middle;
}

body.vvide3-preview.vvide3-action-pm #searchform input[name="minage"],
body.vvide3-preview.vvide3-action-pm #searchform input[name="maxage"] {
	max-width: 8.05ch;
	min-width: 8.05ch;
}

body.vvide3-preview.vvide3-action-pm #advanced_search #search_options > dt.options {
	order: 99;
}

body.vvide3-preview.vvide3-action-pm #advanced_search #search_options > dd.options {
	display: flex;
	flex-direction: column;
	gap: 4px;
	order: 100;
}

body.vvide3-preview.vvide3-action-pm #advanced_search #search_options > dd.options br {
	display: none;
}

body.vvide3-preview.vvide3-action-pm #advanced_search #search_options > dd.options label {
	align-items: center;
	display: inline-flex;
	gap: 6px;
	line-height: 1.25;
	margin: 0;
}

body.vvide3-preview #display_jump_to,
body.vvide3-preview #message_index_jump_to,
body.vvide3-preview #search_jump_to,
body.vvide3-preview #quick_mod_jump_to {
	align-items: center;
	display: flex;
	float: none;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin: 16px 0 0;
	padding: 0;
}

/* Align "Jump to:" onto the same row as the Move/Remove/Lock/Sticky/Merge
   mod-button pills below the topic, instead of its own row underneath. The
   theme already clears this float pair with a <br class="clear"> right
   after #display_jump_to in the markup. */
body.vvide3-preview #moderationbuttons {
	float: left;
	margin: 20px 0 0;
}

body.vvide3-preview #display_jump_to {
	flex-wrap: nowrap;
	float: right;
	margin: 20px 0 0;
	width: 320px;
}

/* The jump-to select sits at the very bottom of the page; once its board
   list lazy-loads to ~120 options, Chrome auto-scrolls the page down to make
   room to open the native popup because there's no space below it. Give it
   breathing room so opening the dropdown doesn't shift the page. */
body.vvide3-preview.vvide3-action-display section.content {
	padding-bottom: 48px;
}

/* On mobile the jump-to select opens as a native full-screen picker rather
   than an inline dropdown pushing the page layout, so it doesn't need the
   desktop buffer above - and that buffer was winning (by specificity) over
   the site's normal mobile .content padding-bottom, leaving a big gap above
   the footer on the Topic Display and Post Reply pages. */
@media (max-width: 767px) {
	body.vvide3-preview.vvide3-action-display section.content {
		padding-bottom: 16px;
	}
}

body.vvide3-preview #display_jump_to label,
body.vvide3-preview #message_index_jump_to label,
body.vvide3-preview #search_jump_to label,
body.vvide3-preview #quick_mod_jump_to label {
	color: var(--vvide-muted);
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

body.vvide3-preview #display_jump_to_select,
body.vvide3-preview #message_index_jump_to_select,
body.vvide3-preview #search_jump_to_select,
body.vvide3-preview #quick_mod_jump_to_select {
	background: #fff;
	border: 1px solid var(--vvide-line);
	border-radius: 999px;
	box-shadow: none;
	color: var(--vvide-text);
	font-family: var(--vvide-font-body);
	height: 44px;
	max-width: min(100%, 29ch);
	min-width: 0;
	overflow: hidden;
	padding: 0 42px 0 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: min(100%, 29ch);
}

/* #display_jump_to is a float with an explicit width, so this resolves to a
   fixed 220px regardless of how long the lazy-loaded board-list options are -
   nothing here can grow the box once the list populates on hover. */
body.vvide3-preview #display_jump_to_select {
	width: 220px;
}

body.vvide3-preview #display_jump_to_select:hover,
body.vvide3-preview #message_index_jump_to_select:hover,
body.vvide3-preview #search_jump_to_select:hover,
body.vvide3-preview #quick_mod_jump_to_select:hover {
	background: #fff;
	border: 1px solid var(--vvide-line);
	color: var(--vvide-text);
}

body.vvide3-preview #display_jump_to_select option,
body.vvide3-preview #message_index_jump_to_select option,
body.vvide3-preview #search_jump_to_select option,
body.vvide3-preview #quick_mod_jump_to_select option {
	background: #fff;
	color: var(--vvide-text);
	font-family: var(--vvide-font-body);
}

body.vvide3-preview.vvide3-action-pm #genericmenu,
body.vvide3-preview.vvide3-action-pm #adm_submenus,
body.vvide3-preview.vvide3-action-pm a[class^="mobile_generic_menu_"] {
	display: none !important;
}

body.vvide3-preview.vvide3-action-pm #admin_content {
	clear: none;
	padding-top: 0;
}

@keyframes vvideFadeUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (min-width: 992px) {
	body.vvide3-preview .vvide3-search {
		width: 48px;
	}

	body.vvide3-preview .vvide3-search-input,
	body.vvide3-preview .vvide3-search input[type="text"],
	body.vvide3-preview .vvide3-search-submit {
		display: none;
	}

	body.vvide3-preview .vvide3-search-shortcut {
		display: inline-flex;
	}
}

@media (max-width: 1199px) {
	body.vvide3-preview .vvide3-navbar-inner,
	body.vvide3-preview .content,
	body.vvide3-preview .vvide3-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 991px) {
	/* Bootstrap inserts a full-viewport, fixed-position `.dropdown-backdrop`
	   behind every opened dropdown (its touch-device "tap outside to close"
	   target). We force the Messages/Profile dropdown-menus to `position:
	   static` below so they lay out inline in the collapsed mobile menu -
	   but that also takes them out of any stacking context, so the fixed
	   (and therefore always-on-top-of-static-content) backdrop ends up
	   covering the now-static menu items too. Every tap on Inbox/Profile
	   Info/etc. was landing on the invisible backdrop instead, which just
	   closes the menu - the link underneath never received the click. */
	body.vvide3-preview .dropdown-backdrop {
		display: none;
	}

	body.vvide3-preview .vvide3-navbar-inner {
		align-items: stretch;
		flex-wrap: wrap;
		gap: 14px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	body.vvide3-preview .vvide3-brand-wrap {
		flex: 1 1 100%;
	}

	body.vvide3-preview .vvide3-brand-wordmark img {
		height: 29px;
		max-width: calc(100vw - 116px);
	}

	body.vvide3-preview .vvide3-nav-toggle {
		display: inline-flex;
	}

	/* Full-screen overlay drawer. Bootstrap's `.collapse`/`.collapse.in`
	   height-transition can't produce a fixed, full-viewport panel, so
	   theme.js drives this via a plain `body.vvide3-nav-open` class instead
	   of the collapse plugin (data-toggle="collapse" was removed from the
	   toggle button in index.template.php). */
	body.vvide3-preview .vvide3-main-nav.collapse {
		display: none !important;
	}

	body.vvide3-preview.vvide3-nav-open .vvide3-main-nav.collapse {
		display: flex !important;
	}

	/* Lock the page underneath from scrolling while the drawer is open. */
	body.vvide3-preview.vvide3-nav-open {
		overflow: hidden;
	}

	body.vvide3-preview .vvide3-main-nav {
		background: #585b62;
		border-top: 0;
		bottom: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		left: 0;
		margin: 0;
		overflow-y: auto;
		padding: 20px 20px 40px;
		position: fixed;
		right: 0;
		width: auto;
		z-index: 1200;
		-webkit-overflow-scrolling: touch;
		/* `top` is set inline by theme.js to the header's actual rendered
		   height, so the drawer starts directly under it rather than
		   covering the logo/close button with a hardcoded offset. */
	}

	body.vvide3-preview .vvide3-header-search,
	body.vvide3-preview .vvide3-primary-nav,
	body.vvide3-preview .vvide3-header-tools,
	body.vvide3-preview .vvide3-user-tools {
		width: 100%;
	}

	body.vvide3-preview .vvide3-header-search {
		margin-bottom: 4px;
	}

	body.vvide3-preview .vvide3-user-menu {
		width: 100%;
	}

	body.vvide3-preview .vvide3-menu {
		align-items: stretch;
		flex-direction: column;
		gap: 4px;
	}

	/* Section labels ("Menu" above Home/Recent/Admin/Moderate/Members,
	   "Account" above Messages/Yousef) - the two groups previously blended
	   together with no visual separation, and each used a different pill
	   style making the panel feel like three unrelated widgets stacked up. */
	body.vvide3-preview .vvide3-menu-section-label {
		color: rgba(255, 255, 255, 0.56);
		display: block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		margin: 20px 4px 8px;
		text-transform: uppercase;
	}

	body.vvide3-preview .vvide3-header-search + .vvide3-menu-section-label,
	body.vvide3-preview .vvide3-header-tools .vvide3-menu-section-label:first-child {
		margin-top: 8px;
	}

	/* Pin Account (Messages/Yousef) to the bottom of the drawer instead of
	   directly trailing the primary nav - on short menus (logged-out guests
	   see only 2-3 links) that left a lot of dead space between the two
	   groups and no space at all above the footer-like account row. */
	body.vvide3-preview .vvide3-header-tools {
		margin-top: auto;
		padding-top: 4px;
	}

	/* Unify every top-level row (Home, Recent, Admin, Moderate, Members,
	   Messages, Yousef) to the same shape/height/background instead of the
	   previous three different treatments (a solid-white "active" pill,
	   plain unstyled text, and a separate grey pill component) so the whole
	   panel reads as one consistent list rather than mismatched pieces. */
	body.vvide3-preview .vvide3-menu-link,
	body.vvide3-preview .vvide3-icon-button,
	body.vvide3-preview .vvide3-text-button,
	body.vvide3-preview .vvide3-solid-button,
	body.vvide3-preview .vvide3-user-trigger {
		background: rgba(255, 255, 255, 0.08);
		border: 0;
		border-radius: 14px;
		box-shadow: none;
		color: #fff;
		display: flex;
		justify-content: flex-start;
		min-height: 52px;
		width: 100%;
	}

	body.vvide3-preview .vvide3-user-name {
		color: #fff;
	}

	body.vvide3-preview .vvide3-menu-link:hover,
	body.vvide3-preview .vvide3-menu-link:focus {
		background: rgba(255, 255, 255, 0.14);
	}

	body.vvide3-preview .vvide3-menu-item.active > .vvide3-menu-link {
		background: rgba(255, 255, 255, 0.96);
		box-shadow: none;
		color: #ff6700;
	}

	body.vvide3-preview .vvide3-menu-item.active > .vvide3-menu-link .vvide3-menu-icon {
		color: #ff6700;
	}

	body.vvide3-preview .vvide3-solid-button {
		background: #ff6700;
	}

	/* Admin/Moderate/Members keep their caret on the far right; Home/Recent
	   (no caret) just left-align icon+label like every other row now does. */
	body.vvide3-preview .vvide3-menu-link .caret {
		margin-left: auto;
	}

	body.vvide3-preview .vvide3-header-tools,
	body.vvide3-preview .vvide3-user-tools {
		align-items: stretch;
		flex-direction: column;
		gap: 4px;
	}

	body.vvide3-preview .vvide3-search {
		width: 100%;
	}

	body.vvide3-preview .vvide3-search-input,
	body.vvide3-preview .vvide3-search input[type="text"] {
		display: block;
	}

	body.vvide3-preview .vvide3-search-submit {
		display: inline-flex;
	}

	body.vvide3-preview .vvide3-search-shortcut {
		display: none;
	}

	body.vvide3-preview .vvide3-submenu,
	body.vvide3-preview .dropdown-submenu > .dropdown-menu {
		box-shadow: none;
		left: auto;
		margin-top: 4px;
		position: static;
		width: 100%;
	}

	/* Bootstrap's `.navbar-nav .open .dropdown-menu { background-color:
	   transparent; margin-top: 0 }` (3 classes) beats our plain
	   `.vvide3-submenu` override (1 class) on specificity once the navbar
	   collapses to mobile, so the submenu lost its white card background
	   (near-illegible dark text against the grey navbar) and the margin-top
	   gap we set above was silently zeroed back out. Match the 4px gap the
	   `.vvide3-menu`'s flex `gap` already puts below the submenu, before the
	   next nav row. */
	body.vvide3-preview .navbar-nav .open .dropdown-menu.vvide3-submenu {
		background-color: rgba(255, 255, 255, 0.98);
		margin-top: 4px;
	}

	body.vvide3-preview .vvide3-user-dropdown {
		box-shadow: none;
		margin-top: 4px;
		position: static;
		width: 100%;
	}

	/* This nested submenu (e.g. Profile Info > Show Posts > Messages/Topics/
	   Attachments) inherited the same white/bordered/shadowed card look as
	   its parent dropdown, which - now that both are laid out inline in the
	   mobile drawer rather than floating side by side like on desktop -
	   reads as a redundant box nested inside an identical box. Flatten it
	   to a plain indented list instead, using a left rule for hierarchy. */
	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu > .dropdown-menu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu > .dropdown-menu {
		background: transparent;
		border: 0;
		border-left: 2px solid var(--vvide-line);
		border-radius: 0;
		box-shadow: none;
		display: block;
		float: none;
		margin: 2px 0 6px 28px;
		padding: 2px 0 2px 12px;
		width: auto;
	}

	/* Bootstrap's base `.dropdown-menu` is `float: left` (for desktop
	   flyouts) - `position: static` alone doesn't clear that, so this nested
	   list kept rendering as a floated box that never counted toward its
	   parent <li>'s height. The next sibling row (e.g. "Settings") then
	   started immediately after the collapsed-height parent and silently
	   overlapped this whole submenu on top of it - it looked fine (the
	   floated content still painted in the right spot) but every tap landed
	   on the overlapping sibling instead, so none of these links worked. */
	body.vvide3-preview .vvide3-user-dropdown .dropdown-submenu,
	body.vvide3-preview .vvide3-messages-dropdown .dropdown-submenu {
		overflow: hidden;
	}

	body.vvide3-preview #profileview {
		display: block;
	}

	body.vvide3-preview #basicinfo,
	body.vvide3-preview #detailedinfo {
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
	}

	body.vvide3-preview .content {
		padding-top: 24px;
	}

	body.vvide3-preview #forumposts .post_wrapper {
		display: block;
	}

	body.vvide3-preview #forumposts .poster {
		border-bottom: 1px solid var(--vvide-line);
		border-right: 0;
		flex: none;
	}

	body.vvide3-preview #personal_messages .post_wrapper {
		display: block;
	}

	body.vvide3-preview #personal_messages .poster {
		border-bottom: 1px solid var(--vvide-line);
		border-right: 0;
		flex: none;
	}

	body.vvide3-preview .pagesection {
		align-items: stretch;
		flex-direction: column;
		margin-bottom: 8px;
	}

	body.vvide3-preview .buttonlist,
	body.vvide3-preview .buttonlist .nav,
	body.vvide3-preview .buttonlist .nav-pills {
		width: 100%;
	}

	body.vvide3-preview #posting_icons {
		margin-top: 32px;
	}

	body.vvide3-preview .mark_read {
		float: none;
	}

	body.vvide3-preview .mark_read .buttonlist.floatright {
		float: none;
	}

	body.vvide3-preview .mark_read .buttonlist .nav-pills {
		justify-content: center;
	}

	body.vvide3-preview #statistics .half_content {
		display: block;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	body.vvide3-preview #statistics dl.stats dt,
	body.vvide3-preview #statistics dl.stats dd {
		float: none;
		text-align: left;
		width: 100%;
	}

	body.vvide3-preview #statistics dl.stats dd {
		border-top: 0;
		min-height: 0;
		padding-top: 0;
	}

	body.vvide3-preview #statistics .statsbar.generic_bar {
		justify-content: flex-start;
	}

	body.vvide3-preview.vvide3-profile-area-statistics .half_content {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
}

@media (max-width: 767px) {
	body.vvide3-preview .content,
	body.vvide3-preview .vvide3-footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.vvide3-preview .content {
		padding-bottom: 16px;
	}

	body.vvide3-preview .navigate_section {
		margin-bottom: 12px;
	}

	/* #forumposts .quickbuttons is `flex: 0 0 auto` for desktop, where it
	   sits as a fixed-size item beside the post date - flex-shrink:0 means
	   it can never wrap or shrink, so its buttons (Quote/Modify/Remove/
	   Split Topic/...) just overflowed off the right edge of the screen on
	   mobile instead of wrapping to a second line. */
	body.vvide3-preview #forumposts .quickbuttons {
		flex: 1 1 100%;
		width: 100%;
	}

	/* This header's "Author" label exists to match the 2-column post table
	   below it (Author sidebar | post content) - on mobile those columns
	   stack instead of sitting side by side, so the label no longer refers
	   to anything and just squeezed "Topic: ... (Read N times)" over into
	   a cramped, oddly-wrapped area on the right instead of using the full
	   row. Drop the label and let the topic title use the whole width. */
	body.vvide3-preview #forumposts .cat_bar h3.catbg #author {
		display: none;
	}

	body.vvide3-preview #forumposts .cat_bar h3.catbg {
		justify-content: flex-start;
	}

	/* Category/board header (h3.catbg) is a flex row of: collapse arrow,
	   title, then unread-posts actions. On mobile the collapse arrow should
	   sit on the right of the title instead of the left. */
	body.vvide3-preview .vvide3-toggle-control {
		order: 2;
	}

	body.vvide3-preview .vvide3-catbg-title {
		order: 1;
	}

	body.vvide3-preview .vvide3-catbg-actions {
		order: 3;
	}

	/* The generic .catbg/.titlebg rule above sets flex-wrap: wrap so long
	   plain-text headers (e.g. the Search page's "Choose boards..." link)
	   can wrap to a 2nd line. But for h3.catbg specifically, once the title
	   text itself wrapped to 2 lines, it claimed the full row width and
	   pushed the collapse arrow onto its own row below instead of staying
	   beside it. Keep the arrow pinned to the row; let the title text still
	   wrap internally since flex-wrap only affects item placement, not text. */
	body.vvide3-preview h3.catbg {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	/* Base theme's `h4.titlebg`/`h3.catbg` rule in index.css sets a fixed
	   `height: 50px; overflow: hidden`, which this rule never touches. Once
	   flex-wrap lets long header text (e.g. "Choose boards to search in, or
	   search all") wrap to a second line on mobile, that second line was
	   silently clipped off with no visual indication anything was missing. */
	body.vvide3-preview .catbg,
	body.vvide3-preview .titlebg {
		flex-wrap: wrap;
		font-size: 18px;
		height: auto;
		min-height: 56px;
		overflow: visible;
		padding: 14px 16px;
	}

	/* Profile summary header: title + the Profile Info/Forum Profile/
	   Actions/User Settings tab-group both live in one h3.catbg row. The
	   `flex-wrap: nowrap` above (needed so the board-index collapse arrow
	   stays beside its title) also caught this header, so the tab group -
	   which never shrinks (flex: 0 0 auto) - just ran off the right edge of
	   the screen instead of wrapping under the title, causing the whole
	   page to scroll horizontally. */
	body.vvide3-preview .vvide3-summary-header .catbg {
		flex-wrap: wrap;
	}

	/* .vvide3-catbg-title gets `order: 1` above (board-index arrow
	   repositioning), which also matches this title span since it shares the
	   same class - with the actions group left at its default order (0), the
	   title was rendering AFTER the Profile Info/Forum Profile/Actions pills
	   instead of as the heading above them. */
	body.vvide3-preview .vvide3-summary-header .vvide3-catbg-title {
		order: -1;
	}

	/* Plain profile-area title bars (Summary/Forum Profile/etc. when opened
	   without an explicit `area=` on the URL) render as h3.catbg containing
	   just a decorative icon span (0-width, no image loaded) plus a bare
	   text node - no toggle arrow, unlike board-index category headers. With
	   `justify-content: space-between` that pushes the 0-width icon to the
	   left edge and the title text all the way to the right. Center it. */
	body.vvide3-preview.vvide3-action-profile h3.catbg:has(> .profile_hd) {
		justify-content: center;
	}

	body.vvide3-preview .vvide3-summary-header-actions {
		flex: 1 1 100%;
		margin-left: 0;
		margin-top: 10px;
	}

	body.vvide3-preview .vvide3-summary-menu {
		flex: 1 1 auto;
	}

	body.vvide3-preview .vvide3-summary-menu-trigger {
		justify-content: center;
		width: 100%;
	}

	/* Bootstrap's `.hidden-xs` hides the text label on these quickmod/button
	   strip buttons below 768px, leaving only a custom icon font glyph
	   (fa-quick_mod_markread, fa-unread_topics_all, etc.) - those glyphs were
	   never defined in this theme's icon font, so the buttons rendered as
	   completely blank orange pills with no discernible label or purpose. */
	body.vvide3-preview .buttonlist .hidden-xs,
	body.vvide3-preview .pagesection .hidden-xs {
		display: inline !important;
	}

	/* Smaller pagination pills (both the topic-list "Pages" row and the
	   post-view pager use the same .pagelinks markup) - the desktop 42px
	   pills felt oversized on a 390px-wide screen. */
	body.vvide3-preview .pagelinks .nav_page,
	body.vvide3-preview .pagelinks .current_page,
	body.vvide3-preview .pagelinks .expand_pages {
		font-size: 13px;
		min-height: 32px;
		min-width: 32px;
		padding: 0 10px;
	}

	/* Breadcrumb trail pills - shrink text/padding to match the rest of the
	   tightened-up mobile chrome. */
	body.vvide3-preview .navigate_section {
		padding: 10px 12px 10px 0;
	}

	body.vvide3-preview .navigate_section li {
		font-size: 11px;
	}

	body.vvide3-preview .navigate_section li a {
		padding: 4px 8px;
	}

	/* Every card-style data table (Alerts, Attachments, Tracking IP, generic
	   admin/profile lists, etc.) shares a base rule that sets `overflow:
	   hidden` directly on the <table> so its rounded corners clip cleanly.
	   On narrow viewports, tables wider than the screen just silently lost
	   their overflow columns entirely (no scrollbar, no way to reach them) -
	   e.g. the Attachments table's Message/Posted columns were completely
	   inaccessible on mobile. Let the table scroll horizontally instead. */
	body.vvide3-preview .table_list,
	body.vvide3-preview .table_grid,
	body.vvide3-preview .generic_list_wrapper table,
	body.vvide3-preview .table_frame table,
	body.vvide3-preview #attachments,
	body.vvide3-preview.vvide3-action-profile #attachments {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	/* The native table column-width algorithm (auto or fixed) kept reserving
	   space for td.stats/td.lastpost/td.moderation even after they're hidden
	   (display:none doesn't reliably exclude a column from width
	   distribution in every engine/mode here), so td.subject was stuck at
	   its old narrow share instead of absorbing the freed-up space, leaving
	   every topic "card" visibly narrower than the full-width row. Bypass
	   the table layout algorithm entirely for these rows: flex correctly
	   ignores display:none children with no quirks. */
	body.vvide3-preview #messageindex .table_grid,
	body.vvide3-preview #messageindex .table_grid tbody {
		display: block;
		width: 100%;
	}

	/* The base .table_grid rule sets overflow:hidden + border-radius on the
	   <table> itself to round its OUTER corners as one continuous block -
	   redundant now that every row rounds and borders itself individually,
	   and this overflow:hidden was clipping the bottom edge of the last row
	   in some browsers (particularly Safari) once its own margin/border
	   pushed slightly past the table's calculated content height. */
	body.vvide3-preview #messageindex .table_grid {
		overflow: visible;
	}

	/* The OUTER #messageindex wrapper div (not just the inner .table_grid
	   table) has its own separate overflow:hidden + border-radius for
	   rounding the whole widget as one block - same redundant-and-clipping
	   issue as the inner table, just one level up. This is what was still
	   cutting off the last row's bottom edge (the board-jump select/Go
	   row) even after fixing the inner table's overflow. */
	body.vvide3-preview #messageindex {
		overflow: visible;
	}

	body.vvide3-preview #messageindex .table_grid tbody tr {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}

	/* Rows sat flush against each other with zero gap - besides looking
	   cramped, the LAST topic card's bottom border/rounded corner had
	   nothing to visually separate it from the "jump to board" dropdown
	   row directly beneath it, making that bottom edge look like it had
	   vanished entirely. */
	body.vvide3-preview #messageindex .table_grid tbody tr:has(> td.subject) {
		margin-bottom: 6px;
	}

	/* flex: 1 1 auto lets some WebKit/Safari versions fall back to the
	   cell's table-cell-derived content width instead of actually growing
	   to fill the row (a known cross-browser quirk with flex-basis: auto
	   on elements that still carry table-cell sizing hints) - flex-basis:
	   0 forces genuine flex-grow distribution regardless of content. */
	/* .windowbg/.windowbg2 are reused here purely for background-tinting
	   (icon1/icon2/moderation carry .windowbg, subject carries .windowbg2),
	   but a generic card-spacing rule elsewhere also targets those same
	   class names with `margin-bottom: 7px` for unrelated standalone
	   containers - that stray margin made these cells 7px shorter than the
	   row, so each card's icon/checkbox columns looked shorter than the
	   text column instead of lining up flush at the bottom. */
	body.vvide3-preview #messageindex .table_grid tbody tr > td {
		flex-basis: 0;
		flex-grow: 1;
		flex-shrink: 1;
		margin-bottom: 0;
		min-width: 0;
	}

	body.vvide3-preview #messageindex .table_grid tbody tr > td.icon1,
	body.vvide3-preview #messageindex .table_grid tbody tr > td.icon2 {
		flex: 0 0 46px;
	}

	/* Base theme's responsive.css force-hides td.moderation (the per-topic
	   select checkbox) below 768px with !important, which silently removed
	   the ability to select topics at all on mobile - including for the
	   "Mark selected read"/quick-moderation buttons that depend on it. */
	body.vvide3-preview #messageindex .table_grid tbody tr > td.moderation {
		align-items: center;
		display: flex !important;
		flex: 0 0 40px;
		justify-content: center;
		margin-bottom: 0;
	}

	/* The Statistics tab's label/value grid used a fixed minmax(160px, 320px)
	   label column, which left almost no room for the value column on narrow
	   viewports (e.g. 320px label vs ~330px total card width) - values like
	   "1,262 posts" were squeezed into a handful of px and clipped/wrapped
	   into a broken vertical stack. Drop to a single stacked column instead. */
	body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats {
		grid-template-columns: 1fr;
	}

	body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dt {
		border-bottom: 0;
		padding-bottom: 2px;
	}

	body.vvide3-preview.vvide3-profile-area-statistics #generalstats .stats dd {
		padding-top: 0;
		text-align: left;
	}

	body.vvide3-preview #recent.main_section,
	body.vvide3-preview div#personal_messages {
		padding-left: 10px;
		padding-right: 10px;
	}

	body.vvide3-preview #recent.main_section > #display_head .display_title {
		display: block;
		font-size: 18px;
		padding: 14px 16px;
	}

	body.vvide3-preview .vvide3-page-title-wrap {
		padding-left: 10px;
		padding-right: 10px;
	}

	body.vvide3-preview .vvide3-page-title {
		display: block;
		font-size: 18px;
		padding: 14px 16px;
	}

	body.vvide3-preview #recent > .windowbg,
	body.vvide3-preview #recent > .windowbg2,
	body.vvide3-preview #recent > .approvebg,
	body.vvide3-preview #personal_messages .postarea {
		padding-left: 16px;
		padding-right: 16px;
	}

	body.vvide3-preview #personal_messages .inner {
		border-top: 0;
		margin: 0 1em 0 0;
		padding: 1em 1em 2px 0;
	}

	body.vvide3-preview #personal_messages #postmodify #post_confirm_buttons {
		justify-content: flex-start;
	}

	body.vvide3-preview .table_list td,
	body.vvide3-preview .table_list th,
	body.vvide3-preview .table_grid td,
	body.vvide3-preview .table_grid th {
		padding: 14px 12px;
	}

	body.vvide3-preview .subject,
	body.vvide3-preview #forumposts .poster h4,
	body.vvide3-preview #forumposts .keyinfo h5,
	body.vvide3-preview #forumposts .keyinfo h5 a {
		font-size: 20px;
	}

	body.vvide3-preview .vvide3-footer-inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* AdSense placements: MessageIndex (above/below topic list), Display (every
   4th post) and the site footer all share this card treatment. The
   min-height reserves space before the ad script paints so the surrounding
   layout doesn't jump (CLS) once it loads. */
body.vvide3-preview .vvide3-ad-slot {
	background: var(--vvide-surface);
	border: 1px solid var(--vvide-line);
	border-radius: var(--vvide-radius-xl);
	margin: 20px 0;
	min-height: 100px;
	overflow: hidden;
	padding: 16px;
	text-align: center;
}

/* Applied by theme.js once AdSense reports data-ad-status="unfilled" on the
   slot's <ins> - removes the card (border, padding, reserved height)
   entirely instead of leaving an empty bordered box on the page. */
body.vvide3-preview .vvide3-ad-slot.vvide3-ad-collapsed {
	display: none;
}

body.vvide3-preview .vvide3-ad-slot-display-inline {
	margin: 20px 0;
}

/* The shared ad-spacer rule (`#boardindex_table table > tbody:not(.header):
   not(.content) > tr > td { padding: 6px 16px }`) would otherwise inset this
   td by 16px on each side, narrower than the full-width category bars above
   and below it - zero it out and let the card's own padding create the
   visual inset instead, matching .cat_bar's own 0-padding parent td. */
body.vvide3-preview #boardindex_table table > tbody.vvide3-ad-tbody > tr > td {
	height: auto !important;
	padding: 0 !important;
}

/* The footer ad sits directly in .content-wrapper, outside both `.content`
   and `.vvide3-footer` - neither of which it inherits from - so without its
   own matching max-width/gutter it stretches edge-to-edge on viewports
   wider than 1440px while the footer bar above/below it stays capped and
   centered, making the two look misaligned. */
/* Match .vvide3-footer-inner's own box exactly: the footer bar gets its
   28px-each-side inset from .vvide3-footer's padding (its border is
   invisible, so padding alone works there); ours is visible, so the same
   28px has to come from width/max-width math instead, or the border just
   draws at the outer, unpadded edge. */
body.vvide3-preview .vvide3-ad-slot-footer {
	box-sizing: border-box;
	margin: 0 auto 20px;
	max-width: 1384px;
	padding: 20px 24px;
	width: calc(100% - 56px);
}

body.vvide3-preview .vvide3-ad-slot-boardindex-between {
	margin: 14px 0;
	width: 100%;
}

/* On narrow viewports the ad creative Google serves into this cell can
   report a preferred width wider than the viewport before it settles into
   its final responsive size. Since this row lives in an auto-layout table
   (table-layout: auto), that oversized preferred width bubbles up and
   stretches the WHOLE table (and every other row with it) past the
   viewport, causing sitewide horizontal scroll on Board Index. overflow:
   hidden on .vvide3-ad-slot only clips paint, not the auto-layout sizing
   pass, so the cap has to live on the table cell itself, in viewport units
   (not %) so it can't inherit the same runaway growth. */
@media (max-width: 991px) {
	body.vvide3-preview #boardindex_table table > tbody.vvide3-ad-tbody > tr > td {
		max-width: calc(100vw - 32px);
	}

	body.vvide3-preview .vvide3-ad-slot {
		max-width: 100%;
		padding: 20px 16px;
	}

	body.vvide3-preview .vvide3-ad-slot ins.adsbygoogle {
		max-width: 100% !important;
	}

	body.vvide3-preview .vvide3-ad-slot-display-inline,
	body.vvide3-preview .vvide3-ad-slot-boardindex-bottom {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* The footer ad's desktop gutter (44px, tuned to match the 1440px page
	   container) is oversized on mobile where there's no such container to
	   match - fall back to the same 20px/16px card treatment every other
	   ad slot uses. */
	/* Padding alone (the desktop fix) can't create this gutter on mobile:
	   padding sits *inside* this element's own visible border, so it only
	   pads the ad content, not the card itself away from the screen edge.
	   .content/.vvide3-footer get their edge inset from their own 28px
	   padding because THEIR borders are invisible - ours is visible, so the
	   inset has to come from margin instead, matching their 28px gutter. */
	body.vvide3-preview .vvide3-ad-slot-footer {
		margin: 0 28px 20px;
		max-width: none;
		padding: 20px 16px;
		width: auto;
	}
}

/* Base index.css ships `span.upperframe { display: block; }` commented out,
   leaving it a plain inline span - so the `.clear { clear: both; }` rule
   applied to it (via class="clear upperframe" right before the Info Center
   card) has no effect, since `clear` only does anything on a block box.
   With the clearfix inert, `.roundframe` (a later sibling of the floated
   #posting_icons/.mark_read row, both direct children of .content) starts
   as soon as the last NON-floated content ends, overlapping the still-
   present float underneath it. Every direct child of .content also carries
   a permanent non-"none" `transform` from the `vvideFadeUp` load animation
   (transform: translateY(0) even after the animation finishes with
   fill-mode: both), which forces each child into its own stacking context -
   so instead of the usual "floats paint above subsequent in-flow content"
   rule, .roundframe's stacking context simply paints after (on top of)
   #posting_icons's, hiding it completely wherever the boxes overlap. */
body.vvide3-preview span.upperframe {
	clear: both;
	display: block;
}

/* Message Index in-feed ad row: reset the table_grid's cell padding/border
   for this one row (it isn't a real topic row) and let the card carry its
   own spacing instead. #messageindex .table_grid tbody tr > td
   (2 ids + 2 classes) outranks a plain class selector, so this needs
   !important to actually win regardless of source order. */
body.vvide3-preview .table_grid tr.vvide3-ad-row > td {
	border: 0 !important;
	padding: 0 !important;
}

body.vvide3-preview .vvide3-ad-slot-infeed {
	border-radius: 28px;
	margin: 0 0 14px;
	overflow: hidden;
}

/* Google issues separate in-feed ad units per breakpoint (the layout key
   is tuned to a specific container width), so both render server-side and
   CSS picks the right one - matches the 991px cutoff used for the other
   Board Index ad placements. */
@media (min-width: 992px) {
	body.vvide3-preview .vvide3-ad-slot-infeed-mobile {
		display: none;
	}
}

@media (max-width: 991px) {
	body.vvide3-preview .vvide3-ad-slot-infeed-desktop {
		display: none;
	}
}

/* Login / Register: neither page was ever themed - they're plain default-
   theme markup (base index.css's `.login`/`dl.register_form` rules), so
   this brings them in line with the rest of the site's card look. */

/* Sitewide, .main_icons.<name> icons are drawn via a themed ::before glyph
   added per-context (see the comment near #topic_icons) - "login" never
   got one, so the empty span has no intrinsic size and was stretching to
   fill the flex row (a "LOG IN" title h3 with a huge invisible icon on one
   side, wrapping the text to the far right). Simplest fix: this one's
   purely decorative, so just drop it rather than adding a whole new glyph. */
body.vvide3-preview .main_icons.login {
	display: none;
}

/* .login wraps every one of these cat_bar+roundframe auth forms - not just
   the main Login page, but Forgot Password (Reminder.template.php), 2FA,
   admin re-login, "kick guest", and maintenance-mode, all sharing the same
   base-theme markup pattern. Scoping to .login directly (rather than to
   individual vvide3-action-* classes) catches all of them at once instead
   of needing a new rule for each. */
body.vvide3-preview .login {
	margin: 0 auto;
	max-width: 540px;
	width: 100%;
}

body.vvide3-preview .login .roundframe,
body.vvide3-preview.vvide3-action-signup .roundframe {
	background: var(--vvide-surface);
	border: 1px solid var(--vvide-line);
	border-radius: 0 0 var(--vvide-radius-lg) var(--vvide-radius-lg);
	border-top: 0;
	box-shadow: var(--vvide-shadow-soft);
	padding: 24px 28px;
}

/* .cat_bar above already has the sitewide rounded-pill treatment; square
   off just its bottom edge so it reads as one continuous card with the
   roundframe immediately below it instead of two separate pills. */
body.vvide3-preview .login .cat_bar,
body.vvide3-preview.vvide3-action-signup .cat_bar,
body.vvide3-preview.vvide3-action-signup .title_bar {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-bottom: 0;
}

body.vvide3-preview .login dt,
body.vvide3-preview .login dd,
body.vvide3-preview.vvide3-action-signup dl.register_form dt,
body.vvide3-preview.vvide3-action-signup dl.register_form dd {
	box-sizing: border-box;
}

body.vvide3-preview .login #confirm_buttons,
body.vvide3-preview.vvide3-action-signup #confirm_buttons {
	margin-top: 16px;
	text-align: center;
}

body.vvide3-preview.vvide3-action-signup #registration {
	display: block;
	margin: 0 auto;
	max-width: 720px;
}

@media (max-width: 767px) {
	/* The base theme's 44/54% (login) and 50/49% (register) side-by-side
	   dt/dd columns get too cramped for real input fields under ~400px -
	   stack label above field like every other mobile form on the site. */
	body.vvide3-preview .login dt,
	body.vvide3-preview .login dd,
	body.vvide3-preview.vvide3-action-signup dl.register_form dt,
	body.vvide3-preview.vvide3-action-signup dl.register_form dd {
		float: none;
		text-align: left;
		width: 100%;
	}

	body.vvide3-preview .login dd,
	body.vvide3-preview.vvide3-action-signup dl.register_form dd {
		margin-bottom: 12px;
	}

	body.vvide3-preview .login .roundframe,
	body.vvide3-preview.vvide3-action-signup .roundframe {
		padding: 20px 16px;
	}

	body.vvide3-preview.vvide3-action-signup #registration {
		max-width: 100%;
	}
}