/* ==========================================================================
   5etools Modern Design System (modern-theme.css)
   Unifies the sleek glassmorphic layout, generous typography, responsive cards,
   modern controls, and dual-language styling across all 5etools modules.
   ========================================================================== */

/* --- 1. Modern Slim Scrollbars --- */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

:root.ve-night-mode ::-webkit-scrollbar-thumb {
	background: rgba(148, 163, 184, 0.25);
	border-radius: 4px;
}

:root.ve-night-mode ::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.5);
}

:root:not(.ve-night-mode) ::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, 0.3);
	border-radius: 4px;
}

:root:not(.ve-night-mode) ::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.6);
}

/* --- 2. Page Header & Typography --- */
.page__header {
	padding: 10px 0 6px;
}

.page__title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.3px;
	background: linear-gradient(135deg, #3b82f6, #06b6d4);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
}

.page__title span[class*="-title__en"],
.page__title span[class$="-title__en"] {
	font-size: 0.52em;
	font-weight: 500;
	letter-spacing: 0;
	margin-left: 8px;
	background: none;
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;
	color: #94a3b8;
}

:root:not(.ve-night-mode) .page__title span[class*="-title__en"],
:root:not(.ve-night-mode) .page__title span[class$="-title__en"] {
	color: #64748b;
}

.page__subtitle {
	font-size: 13px;
	color: #888;
	margin-top: 2px;
}

:root.ve-night-mode .page__subtitle {
	color: #94a3b8;
}

/* Navigation Spacing & Sleek Pills */
#navigation {
	margin-bottom: 12px;
}

.page__nav-inner.nav-pills > li > a {
	border-radius: 6px;
	font-weight: 600;
	font-size: 12.5px;
	padding: 5px 11px;
	transition: all 0.15s ease;
}

:root.ve-night-mode .page__nav-inner.nav-pills > li > a {
	color: #cbd5e1;
}

:root.ve-night-mode .page__nav-inner.nav-pills > li > a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

:root.ve-night-mode .page__nav-inner.nav-pills > li.active > a,
:root.ve-night-mode .page__nav-inner.nav-pills > li.active > a:hover,
:root.ve-night-mode .page__nav-inner.nav-pills > li.active > a:focus {
	background: #2563eb;
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

:root:not(.ve-night-mode) .page__nav-inner.nav-pills > li > a {
	color: #334155;
}

:root:not(.ve-night-mode) .page__nav-inner.nav-pills > li > a:hover {
	background: #f1f5f9;
	color: #0284c7;
}

:root:not(.ve-night-mode) .page__nav-inner.nav-pills > li.active > a,
:root:not(.ve-night-mode) .page__nav-inner.nav-pills > li.active > a:hover,
:root:not(.ve-night-mode) .page__nav-inner.nav-pills > li.active > a:focus {
	background: #0284c7;
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(2, 132, 199, 0.3);
}

/* Dropdown Menus */
:root.ve-night-mode .dropdown-menu {
	background: #181c24;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
	border-radius: 10px;
	padding: 6px;
}

:root.ve-night-mode .dropdown-menu > li > a {
	color: #cbd5e1;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13.5px;
	transition: all 0.15s ease;
}

:root.ve-night-mode .dropdown-menu > li > a:hover,
:root.ve-night-mode .dropdown-menu > li > a:focus {
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
}

:root:not(.ve-night-mode) .dropdown-menu {
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	padding: 6px;
}

:root:not(.ve-night-mode) .dropdown-menu > li > a {
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13.5px;
	transition: all 0.15s ease;
}

:root:not(.ve-night-mode) .dropdown-menu > li > a:hover,
:root:not(.ve-night-mode) .dropdown-menu > li > a:focus {
	background: #f1f5f9;
	color: #0284c7;
}

/* --- 3. Glassmorphic Card Containers --- */
.view-col-wrapper {
	gap: 14px;
	padding-bottom: 20px;
}

/* Universal Desktop Master-Detail Layout Protection */
@media screen and (min-width: 769px) {
	.view-col-wrapper {
		display: flex !important;
		flex-direction: row !important;
		gap: 14px !important;
		max-height: 100% !important;
		height: 100% !important;
	}

	.view-col-wrapper > #listcontainer,
	#listcontainer.view-col {
		display: flex !important;
		flex-direction: column !important;
		min-width: 0 !important;
		flex: 6 1 0% !important;
		max-width: 65% !important;
	}

	.view-col-wrapper > #contentwrapper,
	#contentwrapper.view-col {
		display: flex !important;
		flex-direction: column !important;
		min-width: 340px !important;
		flex: 5 1 0% !important;
		width: auto !important;
	}

	/* Never allow mobile-mode classes or collapsed states to hide desktop columns */
	body.mobile-mode--list .view-col-wrapper > #listcontainer,
	body.mobile-mode--detail .view-col-wrapper > #listcontainer,
	body.mobile-mode--list #listcontainer.view-col,
	body.mobile-mode--detail #listcontainer.view-col {
		display: flex !important;
		min-width: 0 !important;
		flex: 6 1 0% !important;
		max-width: 65% !important;
		width: auto !important;
	}

	body.mobile-mode--list .view-col-wrapper > #contentwrapper,
	body.mobile-mode--detail .view-col-wrapper > #contentwrapper,
	body.mobile-mode--list #contentwrapper.view-col,
	body.mobile-mode--detail #contentwrapper.view-col {
		display: flex !important;
		min-width: 340px !important;
		flex: 5 1 0% !important;
		width: auto !important;
	}
}

/* Left List Card Container */
#listcontainer,
.ve-window--list {
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:root.ve-night-mode #listcontainer,
:root.ve-night-mode .ve-window--list {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

:root:not(.ve-night-mode) #listcontainer,
:root:not(.ve-night-mode) .ve-window--list {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Right Content / Statblock Card Container */
#contentwrapper {
	padding-left: 4px;
}

#wrp-pagecontent,
#classtable {
	border-radius: 10px;
	padding: 12px 16px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:root.ve-night-mode #wrp-pagecontent,
:root.ve-night-mode #classtable {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

:root:not(.ve-night-mode) #wrp-pagecontent,
:root:not(.ve-night-mode) #classtable {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Sublist Container */
#sublistcontainer {
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
}

:root.ve-night-mode #sublistcontainer {
	border: 1px solid rgba(255, 255, 255, 0.08);
}

:root:not(.ve-night-mode) #sublistcontainer {
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- 4. Search Bar & Controls (Compactos & Eficientes) --- */
#filter-search-group,
.ve-lst__form-top {
	margin-bottom: 6px !important;
	gap: 4px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

#filter-search-group > *,
.ve-lst__form-top > * {
	margin-bottom: 2px !important;
}

#lst__search,
#search,
input[type="search"].search,
.ve-lst__search {
	border-radius: 6px !important;
	padding: 4px 10px 4px 30px !important;
	font-size: 13px !important;
	height: 32px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#lst__search:focus,
#search:focus,
input[type="search"].search:focus,
.ve-lst__search:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.25) !important;
	outline: none;
}

#lst__search-glass,
.ve-lst__wrp-search-glass {
	color: #94a3b8;
	padding-left: 10px;
	font-size: 13px;
}

#reset {
	border-radius: 6px !important;
	font-weight: 600;
	font-size: 12px !important;
	padding: 4px 12px !important;
	height: 32px !important;
	transition: all 0.15s ease;
}

#reset:hover {
	transform: translateY(-1px);
	border-color: #3b82f6 !important;
	color: #3b82f6 !important;
}

/* Mini Pills Container - Spacing & Modern Look */
.ve-fltr__mini-view {
	margin-top: 2px !important;
	margin-bottom: 8px !important;
	padding: 4px 6px !important;
	border-radius: 6px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	gap: 2px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	background: rgba(255, 255, 255, 0.02) !important;
}

:root:not(.ve-night-mode) .ve-fltr__mini-view {
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	background: #f8fafc !important;
}

.ve-fltr__mini-pill {
	margin: 1px !important;
	padding: 1px 5px !important;
	border-radius: 3px !important;
	font-size: 9.5px !important;
	line-height: 1.25 !important;
}

/* Guaranteed Dedicated Box for [+] Button - Site-Wide */
.ve-lst__btn-collapse-all-previews,
.ve-lst__btn-toggle-expand {
	flex: 0 0 20px !important;
	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	height: 20px !important;
	line-height: 20px !important;
	padding: 0 !important;
	margin: 0 6px 0 2px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	font-weight: 700 !important;
	font-size: 11px !important;
}

/* --- 5. Sort Filter Bar (#filtertools) --- */
#filtertools,
[id^="filtertools"] {
	border-radius: 8px !important;
	overflow: hidden !important;
	margin-bottom: 6px !important;
	padding: 2px 6px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: rgba(255, 255, 255, 0.03) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

:root:not(.ve-night-mode) #filtertools,
:root:not(.ve-night-mode) [id^="filtertools"] {
	background: #f8fafc !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
}

#filtertools .sort,
#filtertools > button,
[id^="filtertools"] .sort,
[id^="filtertools"] > button {
	font-weight: 700 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: normal !important;
	color: #94a3b8;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 6px 3px !important;
	border-radius: 5px !important;
	transition: all 0.15s ease;
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

:root:not(.ve-night-mode) #filtertools .sort,
:root:not(.ve-night-mode) #filtertools > button,
:root:not(.ve-night-mode) [id^="filtertools"] .sort,
:root:not(.ve-night-mode) [id^="filtertools"] > button {
	color: #64748b;
}

#filtertools .sort:hover,
#filtertools > button:hover,
[id^="filtertools"] .sort:hover,
[id^="filtertools"] > button:hover {
	background: rgba(59, 130, 246, 0.12) !important;
	color: #3b82f6 !important;
}

@media screen and (max-width: 768px) {
	#filtertools,
	[id^="filtertools"] {
		padding: 2px 3px !important;
		gap: 1px !important;
	}

	#filtertools .sort,
	#filtertools > button,
	[id^="filtertools"] .sort,
	[id^="filtertools"] > button {
		font-size: 10px !important;
		padding: 5px 2px !important;
	}
}

/* --- 6. List Rows & Hover/Selected States (Compacto & Elegante) --- */
#list.list--stats,
.list.list--stats,
.list--stats {
	border-radius: 6px;
}

#list .ve-lst__row,
.list .ve-lst__row,
.ve-lst__row {
	border-radius: 5px;
	margin-bottom: 2px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	transition: all 0.12s ease;
}

:root:not(.ve-night-mode) #list .ve-lst__row,
:root:not(.ve-night-mode) .list .ve-lst__row,
:root:not(.ve-night-mode) .ve-lst__row {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

#list .ve-lst__row:hover,
.list .ve-lst__row:hover,
.ve-lst__row:hover {
	background: rgba(59, 130, 246, 0.08) !important;
	border-color: rgba(59, 130, 246, 0.3) !important;
	transform: translateX(2px);
	cursor: pointer;
}

:root:not(.ve-night-mode) #list .ve-lst__row:hover,
:root:not(.ve-night-mode) .list .ve-lst__row:hover,
:root:not(.ve-night-mode) .ve-lst__row:hover {
	background: rgba(239, 246, 255, 0.8) !important;
	border-color: rgba(59, 130, 246, 0.35) !important;
}

/* Selected Row Accent */
#list .ve-lst__row.list-multi-selected,
#list .ve-lst__row--selected,
.list .ve-lst__row.list-multi-selected,
.list .ve-lst__row--selected,
.ve-lst__row.list-multi-selected,
.ve-lst__row--selected {
	background: rgba(59, 130, 246, 0.14) !important;
	border-color: #3b82f6 !important;
	border-left: 3px solid #3b82f6 !important;
}

#list .ve-lst__row-inner,
.list .ve-lst__row-inner,
.ve-lst__row-inner {
	display: flex !important;
	align-items: center !important;
	min-height: 32px !important;
	padding: 3px 6px !important;
	gap: 2px !important;
	text-decoration: none !important;
	color: inherit !important;
	border: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

#list .ve-lst__row-inner > *,
.list .ve-lst__row-inner > * {
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	box-sizing: border-box !important;
}

.ve-lst__row-border {
	border-bottom: none !important;
}

/* --- 7. Action Buttons & Toolbar Controls --- */
.view-col button.ve-btn:not(.home__btn-page),
button.ve-btn:not(.home__btn-page) {
	border-radius: 6px;
	transition: all 0.12s ease;
}

.ve-btn-group > .ve-btn:first-child {
	border-top-left-radius: 6px !important;
	border-bottom-left-radius: 6px !important;
}

.ve-btn-group > .ve-btn:last-child {
	border-top-right-radius: 6px !important;
	border-bottom-right-radius: 6px !important;
}

/* --- 8. Universal Dual-Language Typography --- */
[class*="-name-container"],
[class$="-name-container"],
[class*="-list-name"],
.race-list-name {
	display: inline-flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-width: 0 !important;
	max-width: 100% !important;
	line-height: 1.2 !important;
	padding-right: 2px !important;
	vertical-align: middle !important;
	overflow: hidden !important;
}

/* Nome em Português na Lista */
[class*="-name-pt"],
[class*="-name__pt"],
[class$="-name-pt"],
[class$="-name__pt"],
[class*="__pt"],
.race-list-name__pt,
.bg-list-name__pt,
.feat-list-name__pt,
.action-list-name__pt,
.condition-list-name__pt {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

:root.ve-night-mode [class*="-name-pt"],
:root.ve-night-mode [class*="-name__pt"],
:root.ve-night-mode [class$="-name-pt"],
:root.ve-night-mode [class$="-name__pt"],
:root.ve-night-mode [class*="__pt"],
:root.ve-night-mode .race-list-name__pt,
:root.ve-night-mode .bg-list-name__pt,
:root.ve-night-mode .feat-list-name__pt,
:root.ve-night-mode .action-list-name__pt,
:root.ve-night-mode .condition-list-name__pt {
	color: #f1f5f9;
}

:root:not(.ve-night-mode) [class*="-name-pt"],
:root:not(.ve-night-mode) [class*="-name__pt"],
:root:not(.ve-night-mode) [class$="-name-pt"],
:root:not(.ve-night-mode) [class$="-name__pt"],
:root:not(.ve-night-mode) [class*="__pt"],
:root:not(.ve-night-mode) .race-list-name__pt,
:root:not(.ve-night-mode) .bg-list-name__pt,
:root:not(.ve-night-mode) .feat-list-name__pt,
:root:not(.ve-night-mode) .action-list-name__pt,
:root:not(.ve-night-mode) .condition-list-name__pt {
	color: #0f172a;
}

/* Nome em Inglês na Lista (Subtítulo abaixo do Português) */
[class*="-name-en"],
[class*="-name__en"],
[class$="-name-en"],
[class$="-name__en"],
[class*="__en"],
.race-list-name__en,
.bg-list-name__en,
.feat-list-name__en,
.action-list-name__en,
.condition-list-name__en {
	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	margin-top: 1px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-style: italic !important;
}

:root.ve-night-mode [class*="-name-en"],
:root.ve-night-mode [class*="-name__en"],
:root.ve-night-mode [class$="-name-en"],
:root.ve-night-mode [class$="-name__en"],
:root.ve-night-mode [class*="__en"],
:root.ve-night-mode .race-list-name__en,
:root.ve-night-mode .bg-list-name__en,
:root.ve-night-mode .feat-list-name__en,
:root.ve-night-mode .action-list-name__en,
:root.ve-night-mode .condition-list-name__en {
	color: #94a3b8 !important;
}

:root:not(.ve-night-mode) [class*="-name-en"],
:root:not(.ve-night-mode) [class*="-name__en"],
:root:not(.ve-night-mode) [class$="-name-en"],
:root:not(.ve-night-mode) [class$="-name__en"],
:root:not(.ve-night-mode) [class*="__en"],
:root:not(.ve-night-mode) .race-list-name__en,
:root:not(.ve-night-mode) .bg-list-name__en,
:root:not(.ve-night-mode) .feat-list-name__en,
:root:not(.ve-night-mode) .action-list-name__en,
:root:not(.ve-night-mode) .condition-list-name__en {
	color: #64748b !important;
}

/* --- 9. Títulos de Fichas / Modais (Português no Topo, Inglês Abaixo) --- */
[class*="-title__pt"],
[class$="-title__pt"],
.stat-title__pt {
	display: block !important;
	font-size: 1.18em !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

:root.ve-night-mode [class*="-title__pt"],
:root.ve-night-mode [class$="-title__pt"],
:root.ve-night-mode .stat-title__pt {
	color: #f8fafc;
}

:root:not(.ve-night-mode) [class*="-title__pt"],
:root:not(.ve-night-mode) [class$="-title__pt"],
:root:not(.ve-night-mode) .stat-title__pt {
	color: #0f172a;
}

[class*="-title__en"],
[class$="-title__en"],
.stat-title__en {
	display: block !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	margin-left: 0 !important;
	margin-top: 2px !important;
	font-style: normal !important;
	letter-spacing: 0.01em;
}

:root.ve-night-mode [class*="-title__en"],
:root.ve-night-mode [class$="-title__en"],
:root.ve-night-mode .stat-title__en {
	color: #94a3b8 !important;
}

:root:not(.ve-night-mode) [class*="-title__en"],
:root:not(.ve-night-mode) [class$="-title__en"],
:root:not(.ve-night-mode) .stat-title__en {
	color: #64748b !important;
}

/* Regras aplicadas explicitamente dentro de fichas, tabelas e modais */
.ve-stats [class*="-title__pt"],
.ve-stats [class$="-title__pt"],
.ve-stats .stat-title__pt,
.stats [class*="-title__pt"],
.stats [class$="-title__pt"],
.stats .stat-title__pt,
#pagecontent [class*="-title__pt"],
#pagecontent [class$="-title__pt"],
#pagecontent .stat-title__pt,
.cls__stats [class*="-title__pt"],
.cls__stats [class$="-title__pt"],
.cls__stats .stat-title__pt,
.ve-hwin [class*="-title__pt"],
.ve-hwin [class$="-title__pt"],
.ve-hwin .stat-title__pt,
.ve-ui-modal__inner [class*="-title__pt"],
.ve-ui-modal__inner [class$="-title__pt"],
.ve-ui-modal__inner .stat-title__pt {
	display: block !important;
}

.ve-stats [class*="-title__en"],
.ve-stats [class$="-title__en"],
.ve-stats .stat-title__en,
.stats [class*="-title__en"],
.stats [class$="-title__en"],
.stats .stat-title__en,
#pagecontent [class*="-title__en"],
#pagecontent [class$="-title__en"],
#pagecontent .stat-title__en,
.cls__stats [class*="-title__en"],
.cls__stats [class$="-title__en"],
.cls__stats .stat-title__en,
.ve-hwin [class*="-title__en"],
.ve-hwin [class$="-title__en"],
.ve-hwin .stat-title__en,
.ve-ui-modal__inner [class*="-title__en"],
.ve-ui-modal__inner [class$="-title__en"],
.ve-ui-modal__inner .stat-title__en {
	display: block !important;
	margin-left: 0 !important;
	margin-top: 2px !important;
}

/* Corpo das Fichas e Textos de Leitura (Denso & Preciso) */
.ve-stats,
.stats {
	font-size: 12px;
	line-height: 1.45;
}

/* --- 10. Modais de Visualização e Janelas Flutuantes (ve-hwin) --- */
.ve-hwin {
	border-radius: 8px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
	overflow: hidden;
}

:root.ve-night-mode .ve-hwin {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background: #181c24 !important;
}

:root:not(.ve-night-mode) .ve-hwin {
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	background: #ffffff !important;
}

.ve-hoverborder--top {
	min-height: 26px !important;
	padding: 3px 8px !important;
	display: flex !important;
	align-items: center !important;
}

:root.ve-night-mode .ve-hoverborder--top {
	background: rgba(15, 23, 42, 0.95) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root:not(.ve-night-mode) .ve-hoverborder--top {
	background: #f1f5f9 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ve-window-title {
	font-size: 12px !important;
	font-family: inherit !important;
	font-variant: normal !important;
	text-transform: none !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: baseline !important;
}

.ve-window-title .ve-hwin-title__pt {
	color: #38bdf8 !important;
	font-weight: 700 !important;
}

.ve-window-title .ve-hwin-title__en {
	color: #94a3b8 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	margin-left: 5px !important;
}

:root:not(.ve-night-mode) .ve-window-title .ve-hwin-title__pt {
	color: #0284c7 !important;
}

:root:not(.ve-night-mode) .ve-window-title .ve-hwin-title__en {
	color: #64748b !important;
}

/* Modais Centrais */
:root.ve-night-mode .ve-ui-modal__inner,
:root.ve-night-mode .modal-content {
	background: #181c24 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
	border-radius: 10px !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

:root:not(.ve-night-mode) .ve-ui-modal__inner,
:root:not(.ve-night-mode) .modal-content {
	border-radius: 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Statblock Borders & Shadow */
:root.ve-night-mode #pagecontent.stats,
:root.ve-night-mode #pagecontent.cls__stats,
:root.ve-night-mode table#pagecontent,
:root.ve-night-mode table.ve-stats {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

:root:not(.ve-night-mode) #pagecontent.stats,
:root:not(.ve-night-mode) #pagecontent.cls__stats,
:root:not(.ve-night-mode) table#pagecontent,
:root:not(.ve-night-mode) table.ve-stats {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- 11. Preservação Exclusiva do Botão do Index --- */
.home__btn-page {
	position: relative !important;
	width: 132px !important;
	height: 114px !important;
	min-height: 114px !important;
	max-height: 114px !important;
	border-radius: 12px !important;
	padding: 10px 6px !important;
	display: flex;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.home__btn-page .home__icn-page {
	font-size: 38px !important;
	height: 42px !important;
	line-height: 42px !important;
	margin-bottom: 6px !important;
}

.home__btn-page .home__lbl-page {
	font-size: 13px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Desktop (> 507px): NEVER display narrow-visible buttons on desktop */
@media screen and (min-width: 508px) {
	.home__narrow-visible,
	.home__btn-page.home__narrow-visible,
	a.home__narrow-visible {
		display: none !important;
	}
	.home__narrow-hidden,
	.home__btn-page.home__narrow-hidden,
	div.home__narrow-hidden {
		display: flex !important;
	}
}

/* Narrow Mobile (<= 507px): hide narrow-hidden and display narrow-visible */
@media screen and (max-width: 507px) {
	.home__narrow-hidden,
	.home__btn-page.home__narrow-hidden,
	div.home__narrow-hidden {
		display: none !important;
	}
	.home__narrow-visible.home__btn-page,
	a.home__narrow-visible.home__btn-page {
		display: flex !important;
	}
}

/* --- 12. Botões Gerais (Compactos & Proporcionais) --- */
.ve-btn-xs,
.btn-xs {
	min-height: 22px !important;
	padding: 1px 6px !important;
	font-size: 11px !important;
	border-radius: 4px !important;
	line-height: 1.4 !important;
}

.ve-btn-sm,
.btn-sm {
	min-height: 26px !important;
	padding: 2px 8px !important;
	font-size: 12px !important;
	border-radius: 5px !important;
	line-height: 1.4 !important;
}

.ve-btn:not(.ve-btn-xs):not(.ve-btn-sm):not(.ve-btn-lg):not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.home__btn-page),
.btn:not(.ve-btn-xs):not(.ve-btn-sm):not(.ve-btn-lg):not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.home__btn-page) {
	min-height: 28px;
	padding: 3px 10px;
	font-size: 12.5px;
	border-radius: 5px;
}

.ve-btn-primary,
.btn-primary {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

.ve-btn-primary:hover,
.btn-primary:hover {
	background: #1d4ed8 !important;
	border-color: #1d4ed8 !important;
	color: #ffffff !important;
}

:root.ve-night-mode .ve-btn-default:not(.home__btn-page),
:root.ve-night-mode .btn-default:not(.home__btn-page) {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #e2e8f0 !important;
}

:root.ve-night-mode .ve-btn-default:not(.home__btn-page):hover,
:root.ve-night-mode .btn-default:not(.home__btn-page):hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
}

:root:not(.ve-night-mode) .ve-btn-default:not(.home__btn-page),
:root:not(.ve-night-mode) .btn-default:not(.home__btn-page) {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	color: #1e293b !important;
}

:root:not(.ve-night-mode) .ve-btn-default:not(.home__btn-page):hover,
:root:not(.ve-night-mode) .btn-default:not(.home__btn-page):hover {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	color: #0284c7 !important;
}

/* --- 13. Entradas & Controles Compactos --- */
input[type="text"]:not(.panel-content-textarea),
input[type="number"],
.ve-form-control,
.form-control {
	border-radius: 5px;
	line-height: 1.35;
	font-size: 12.5px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:root.ve-night-mode input[type="text"]:not(.panel-content-textarea),
:root.ve-night-mode input[type="number"],
:root.ve-night-mode .ve-form-control,
:root.ve-night-mode .form-control {
	background: #181c24;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f1f5f9;
}

:root:not(.ve-night-mode) input[type="text"]:not(.panel-content-textarea),
:root:not(.ve-night-mode) input[type="number"],
:root:not(.ve-night-mode) .ve-form-control,
:root:not(.ve-night-mode) .form-control {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.14);
	color: #0f172a;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.ve-form-control:focus,
.form-control:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
	outline: none !important;
}

/* Checkboxes & Radios proporcionais */
input[type="checkbox"],
input[type="radio"] {
	width: 15px !important;
	height: 15px !important;
	accent-color: #2563eb !important;
	cursor: pointer;
	vertical-align: middle;
	margin-right: 4px;
}

/* --- 14. Ferramentas (Statgen, Encounter, CRCalc) --- */
.ve-statgen .ve-statgen-shared__ipt {
	width: 44px !important;
	height: 28px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	border-radius: 5px !important;
	text-align: center !important;
}

.ve-statgen .ve-statgen-shared__ipt--sel {
	width: 68px !important;
	height: 28px !important;
	border-radius: 5px !important;
	font-size: 12px !important;
}

#crcalc input[type="number"] {
	height: 26px !important;
	font-size: 12px !important;
	border-radius: 4px !important;
	padding: 2px 6px !important;
}

#croutput {
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 4px 12px !important;
	border-radius: 6px !important;
	display: inline-block !important;
}

:root.ve-night-mode #croutput {
	background: rgba(37, 99, 235, 0.25) !important;
	border: 1px solid rgba(59, 130, 246, 0.35) !important;
	color: #60a5fa !important;
}

:root:not(.ve-night-mode) #croutput {
	background: rgba(37, 99, 235, 0.1) !important;
	border: 1px solid rgba(2, 132, 199, 0.3) !important;
	color: #0284c7 !important;
}

/* Insígnias e Badges */
.ve-badge,
.badge,
[class*="-badge--"] {
	border-radius: 4px;
	font-weight: 600;
	font-size: 11px;
	padding: 2px 6px;
}

/* ==========================================================================
   15. MOBILE-FIRST RESPONSIVE DESIGN (SEM SCROLL & ZERO OVERFLOW)
   ========================================================================== */

/* Universal Overflow Prevention & Mobile Constraints */
@media screen and (max-width: 768px) {
	html, body {
		max-width: 100vw !important;
		overflow-x: hidden !important;
		-webkit-text-size-adjust: 100%;
	}

	.viewport-wrapper,
	.view-col-group--cancer,
	.view-col-wrapper {
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
		margin: 0 !important;
	}

	.view-col {
		margin: 2px 0 8px !important;
		padding: 6px 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Search bar and tools */
	#filter-search-group,
	.ve-lst__form-top {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 4px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	#filter-search-group > .ve-relative,
	.ve-lst__form-top > .ve-relative {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	#filter-search-group #reset,
	.ve-lst__form-top #reset {
		flex: 0 0 auto !important;
		padding: 3px 8px !important;
		font-size: 11.5px !important;
	}

	/* Mini pills row */
	.ve-fltr__mini-view {
		max-width: 100% !important;
		overflow-x: auto !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		padding: 3px 4px !important;
	}

	/* Home / Index page on mobile */
	.home__split {
		width: 100% !important;
		max-width: 100vw !important;
		box-sizing: border-box !important;
	}

	/* --- Master-Detail View Switching on Mobile --- */
	body.mobile-mode--list #listcontainer {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		min-height: calc(100vh - 120px) !important;
	}

	body.mobile-mode--list #contentwrapper,
	body.mobile-mode--list #classtable {
		display: none !important;
	}

	body.mobile-mode--detail #listcontainer {
		display: none !important;
	}

	body.mobile-mode--detail #contentwrapper,
	body.mobile-mode--detail #classtable {
		display: block !important;
		width: 100% !important;
		min-height: calc(100vh - 120px) !important;
		padding-bottom: 75px !important; /* Space for bottom floating pill */
	}

	/* Eliminate the 40vh nested scroll trap in mobile list mode! */
	body.mobile-mode--list #list,
	body.mobile-mode--list .list,
	body.mobile-mode--list .list--stats,
	body.mobile-mode--list .cls__list {
		max-height: calc(100vh - 165px) !important;
		height: auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 65px !important; /* Space for bottom floating pill */
	}

	/* Statblock on mobile: no inner scroll trap, natural reading flow */
	body.mobile-mode--detail #wrp-pagecontent,
	body.mobile-mode--detail .wrp-stats-table {
		max-height: none !important;
		overflow: visible !important;
		padding: 8px 10px !important;
	}

	/* Mobile Floating Switcher Bar */
	.mobile-view-switcher {
		position: fixed !important;
		bottom: 12px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		z-index: 9999 !important;
		display: flex !important;
		background: rgba(15, 23, 42, 0.92) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 28px !important;
		padding: 3px 4px !important;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
		gap: 3px !important;
	}

	:root:not(.ve-night-mode) .mobile-view-switcher {
		background: rgba(255, 255, 255, 0.95) !important;
		border: 1px solid rgba(0, 0, 0, 0.14) !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
	}

	.mobile-view-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		padding: 7px 18px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		border-radius: 22px !important;
		border: none !important;
		cursor: pointer !important;
		transition: all 0.15s ease !important;
		color: #94a3b8 !important;
		background: transparent !important;
		user-select: none !important;
	}

	:root:not(.ve-night-mode) .mobile-view-btn {
		color: #64748b !important;
	}

	.mobile-view-btn.active {
		background: #2563eb !important;
		color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(37, 99, 235, 0.45) !important;
	}

	:root:not(.ve-night-mode) .mobile-view-btn.active {
		background: #0284c7 !important;
		color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35) !important;
	}

	/* Back to List banner at top of statblock */
	.mobile-back-banner {
		margin-bottom: 10px !important;
	}

	.mobile-back-to-list {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		width: 100% !important;
		padding: 7px 14px !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
		border-radius: 6px !important;
		background: rgba(37, 99, 235, 0.15) !important;
		border: 1px solid rgba(59, 130, 246, 0.35) !important;
		color: #60a5fa !important;
		cursor: pointer !important;
		transition: all 0.12s ease !important;
	}

	:root:not(.ve-night-mode) .mobile-back-to-list {
		background: rgba(37, 99, 235, 0.08) !important;
		border-color: rgba(2, 132, 199, 0.25) !important;
		color: #0284c7 !important;
	}

	.mobile-back-to-list:hover,
	.mobile-back-to-list:active {
		background: #2563eb !important;
		color: #ffffff !important;
	}
}

/* --- Mobile List Rows & Compressed Columns (Max-Width <= 640px) --- */
@media screen and (max-width: 640px) {
	/* Hide non-essential secondary columns on phones so row never overflows horizontally */
	#filtertools .ve-col-2-8,
	#filtertools .ve-col-2-6,
	#filtertools .ve-col-2-5,
	#filtertools .ve-col-2:not([data-sort="source"]),
	#filtertools [data-sort="ability"],
	#filtertools [data-sort="size"],
	#filtertools [data-sort="category"],
	#filtertools [data-sort="prerequisite"],
	#filtertools [data-sort="type"],
	#filtertools [data-sort="time"],
	#filtertools [data-sort="school"],
	#filtertools [data-sort="concentration"],
	#filtertools [data-sort="range"],
	#filtertools [data-sort="cost"],
	#filtertools [data-sort="weight"],
	#filtertools [data-sort="skills"],
	[id^="filtertools"] .ve-col-2-8,
	[id^="filtertools"] .ve-col-2-6,
	[id^="filtertools"] .ve-col-2-5,
	[id^="filtertools"] .ve-col-2:not([data-sort="source"]),
	[id^="filtertools"] [data-sort="ability"],
	[id^="filtertools"] [data-sort="size"],
	[id^="filtertools"] [data-sort="category"],
	[id^="filtertools"] [data-sort="prerequisite"],
	[id^="filtertools"] [data-sort="type"],
	[id^="filtertools"] [data-sort="time"],
	[id^="filtertools"] [data-sort="school"],
	[id^="filtertools"] [data-sort="concentration"],
	[id^="filtertools"] [data-sort="range"],
	[id^="filtertools"] [data-sort="cost"],
	[id^="filtertools"] [data-sort="weight"],
	[id^="filtertools"] [data-sort="skills"],
	.ve-lst__row-inner .ve-col-2-8,
	.ve-lst__row-inner .ve-col-2-6,
	.ve-lst__row-inner .ve-col-2-5,
	.ve-lst__row-inner .ve-col-2:not([class*="source"]):not([title*="Player's Handbook"]):not([title*="Monster Manual"]):not([title*="Dungeon Master"]):not([title*="Fonte"]),
	.ve-lst__row-inner [class*="col-ability"],
	.ve-lst__row-inner [class*="col-size"],
	.ve-lst__row-inner [class*="col-category"],
	.ve-lst__row-inner [class*="col-prerequisite"],
	.ve-lst__row-inner [class*="col-type"],
	.ve-lst__row-inner [class*="spell-list-col--time"],
	.ve-lst__row-inner [class*="spell-list-col--range"],
	.ve-lst__row-inner [class*="spell-badge--school"],
	.ve-lst__row-inner [class*="spell-badge--conc"] {
		display: none !important;
	}

	/* Row Name: takes all flexible space */
	#filtertools .sort[data-sort="name"],
	[id^="filtertools"] .sort[data-sort="name"],
	.ve-lst__row-inner .ve-col-4,
	.ve-lst__row-inner .ve-col-3-5,
	.ve-lst__row-inner .ve-col-3-2,
	.ve-lst__row-inner .ve-col-3,
	.ve-lst__row-inner [class*="-list-name"],
	.ve-lst__row-inner .race-list-name,
	.ve-lst__row-inner .feat-list-name,
	.ve-lst__row-inner [class*="-name-container"] {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		text-align: left !important;
	}

	/* Row Source Badge: neat and right-aligned */
	#filtertools .sort[data-sort="source"],
	[id^="filtertools"] .sort[data-sort="source"],
	.ve-lst__row-inner .ve-grow,
	.ve-lst__row-inner [class*="source"],
	.ve-lst__row-inner .ve-col-2[class*="source"] {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 48px !important;
		max-width: 75px !important;
		text-align: right !important;
		margin-left: auto !important;
	}

	.ve-lst__row-inner {
		padding: 4px 6px !important;
		gap: 4px !important;
	}
}

/* Tablet & Desktop: Hide mobile switcher bar & back banner */
@media screen and (min-width: 769px) {
	.mobile-view-switcher,
	.mobile-back-banner {
		display: none !important;
	}
}