/**
 * Dream Template - WebEngine Module Stylesheet Overrides
 * Fixes layout and sizes for UserCP, Rankings, Downloads, and Server Info
 */

/* Page titles */
.page-title {
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-left: 4px solid #f59e0b !important;
	padding-left: 12px !important;
	margin: 0 0 20px 0 !important;
}

/* UserCP Menu Grid */
.usercp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 15px;
}
.usercp-card, .ucp-item {
	background: rgba(10, 14, 24, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	text-decoration: none !important;
	color: #cbd5e1 !important;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.usercp-card:hover, .ucp-item:hover {
	border-color: #f59e0b;
	background: rgba(245, 158, 11, 0.08);
	transform: translateY(-2px);
	color: #fbbf24 !important;
}
.usercp-card img, .ucp-item img {
	width: 64px !important;
	height: 64px !important;
	max-width: 64px !important;
	max-height: 64px !important;
	border-radius: 8px;
	margin-bottom: 10px;
	object-fit: cover;
}

/* UserCP MyAccount Character Cards */
.myaccount-character-block {
	width: 90px;
	height: 90px;
	margin: 0 auto 8px auto;
	border-radius: 50%;
	overflow: hidden;
	background: #090c14;
	border: 2px solid rgba(245, 158, 11, 0.4);
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}
.myaccount-character-block img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
}
.myaccount-character-name {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 6px;
}
.myaccount-character-name a {
	color: #fbbf24 !important;
	text-decoration: none;
}
.myaccount-character-block-location {
	font-size: 11px;
	color: #64748b;
	margin-top: 4px;
}
.myaccount-character-block-level {
	display: inline-block;
	background: rgba(47, 107, 255, 0.15);
	border: 1px solid rgba(47, 107, 255, 0.35);
	color: #38bdf8;
	font-weight: 800;
	font-size: 12px;
	padding: 2px 10px;
	border-radius: 12px;
	margin-top: 5px;
}

/* MyAccount Table */
.myaccount-table {
	background: rgba(10, 14, 24, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	margin-bottom: 24px !important;
}
.myaccount-table td {
	padding: 12px 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	color: #cbd5e1 !important;
	font-size: 13px !important;
}
.myaccount-table td:first-child {
	color: #94a3b8 !important;
	font-weight: 600 !important;
	width: 25% !important;
}

/* Global Dark Table Overrides for Module Compatibility (Bootstrap 5 & WebEngine) */
:root, [data-bs-theme="dark"], body {
	--bs-body-bg: #07090e;
	--bs-body-color: #cbd5e1;
	--bs-emphasis-color: #f8fafc;
	--bs-secondary-color: #94a3b8;
	--bs-border-color: rgba(255, 255, 255, 0.08);
	--bs-table-bg: #0e1422 !important;
	--bs-table-color: #cbd5e1 !important;
	--bs-table-striped-bg: #111827 !important;
	--bs-table-striped-color: #cbd5e1 !important;
	--bs-table-active-bg: #1a2336 !important;
	--bs-table-active-color: #f8fafc !important;
	--bs-table-hover-bg: #1a2336 !important;
	--bs-table-hover-color: #f8fafc !important;
	--bs-table-border-color: rgba(255, 255, 255, 0.06) !important;
}

.dream-content-card table, 
.dream-content-card .table, 
.dream-content-card .general-table-ui,
.table-standings,
.rankings-table,
.table {
	background: #0e1422 !important;
	background-color: #0e1422 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #cbd5e1 !important;
	border-radius: 8px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

/* Force dark background on every single cell in all tables (kills Bootstrap 5 white cells) */
.dream-content-card table > :not(caption) > * > *,
.dream-content-card .table > :not(caption) > * > *,
.table > :not(caption) > * > *,
.table-standings > :not(caption) > * > *,
.rankings-table > :not(caption) > * > *,
.dream-content-card table td,
.dream-content-card table th,
.table td,
.table th,
.table-standings td,
.table-standings th,
.rankings-table td,
.rankings-table th {
	background-color: #0e1422 !important;
	background: #0e1422 !important;
	color: #cbd5e1 !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
}

/* Table Header Row */
.table-standings thead tr,
.table thead tr,
.rankings-table tr:first-child,
.dream-content-card table thead tr,
.dream-content-card table tr:first-child {
	background: #141c2c !important;
	background-color: #141c2c !important;
}

.table-standings thead th,
.table thead th,
.rankings-table tr:first-child td,
.rankings-table tr:first-child th,
.dream-content-card table thead th,
.dream-content-card table tr:first-child th,
.dream-content-card table tr:first-child td {
	background: #141c2c !important;
	background-color: #141c2c !important;
	color: #fbbf24 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 13px 14px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: none !important;
	vertical-align: middle !important;
}

/* Table Body Rows */
.table-standings tbody td,
.rankings-table tr:not(:first-child) td,
.dream-content-card table tbody td,
.table tbody td {
	padding: 12px 14px !important;
	vertical-align: middle !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	color: #cbd5e1 !important;
	font-size: 13px !important;
	background-color: #0e1422 !important;
	background: #0e1422 !important;
	box-shadow: none !important;
}

/* Zebra Striping */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(odd) td,
.table-standings tbody tr:nth-child(even) td,
.rankings-table tr:nth-child(even):not(:first-child) td {
	background-color: #111827 !important;
	background: #111827 !important;
	box-shadow: none !important;
}

/* Hover Rows */
.table-hover > tbody > tr:hover > *,
.table-hover > tbody > tr:hover td,
.table-standings tbody tr:hover td,
.rankings-table tr:hover:not(:first-child) td,
.dream-content-card table tbody tr:hover td {
	background-color: #1a2336 !important;
	background: #1a2336 !important;
	color: #f8fafc !important;
	box-shadow: none !important;
}

/* Rankings Links */
.table-standings td a, 
.rankings-table td a,
.dream-content-card table td a {
	color: #38bdf8 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.table-standings td a:hover, 
.rankings-table td a:hover,
.dream-content-card table td a:hover {
	color: #7dd3fc !important;
	text-decoration: underline !important;
}

/* Rankings Avatars */
.table-standings .rankings-class-image, 
.rankings-table .rankings-class-image {
	width: 36px !important;
	height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	background: #111317 !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Rankings Standings & Class Filter */
.rankings-class-filter {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	list-style: none !important;
	padding: 15px 0 25px 0 !important;
	margin: 0 auto !important;
}
.rankings-class-filter li {
	display: inline-block !important;
	margin: 0 !important;
	text-align: center !important;
}
.rankings-class-filter-selection,
.rankings-class-filter a,
.rankings-class-filter li a {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	color: #9a9da0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	width: 72px !important;
	user-select: none !important;
}
.rankings-class-filter-selection img,
.rankings-class-filter-image {
	width: 52px !important;
	height: 52px !important;
	max-width: 52px !important;
	max-height: 52px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	background: #1e2229 !important;
	border: 2px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
	margin-bottom: 7px !important;
	transition: all 0.2s ease !important;
}
.rankings-class-filter-grayscale {
	filter: grayscale(100%) !important;
	opacity: 0.45 !important;
}
.rankings-class-filter-selection:hover,
.rankings-class-filter-grayscale:hover {
	filter: grayscale(0%) !important;
	opacity: 1 !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
}
.rankings-class-filter-selection:hover img {
	border-color: #f59e0b !important;
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
}
.rankings-class-filter-selection.active,
.rankings-class-filter-selection:not(.rankings-class-filter-grayscale) {
	filter: grayscale(0%) !important;
	opacity: 1 !important;
	color: #ffffff !important;
}
.rankings-class-filter-selection.active img,
.rankings-class-filter-selection:not(.rankings-class-filter-grayscale) img {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
}
.rankings-update-time {
	color: #64748b !important;
	font-size: 12px !important;
	text-align: right !important;
	margin-top: 8px !important;
}

/* Rankings Sub-navigation Pills */
.rankings_menu, .rankings-menu {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin-bottom: 25px !important;
	background: rgba(10, 16, 26, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 8px !important;
	border-radius: 10px !important;
}
.rankings_menu a, .rankings_menu li a, .rankings-menu a, .rankings-menu li a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #94a3b8 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	padding: 8px 18px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out !important;
	background: transparent !important;
	border: 1px solid transparent !important;
}
.rankings_menu a:hover, .rankings-menu a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}
.rankings_menu a.active, .rankings-menu a.active, .rankings_menu li.active a, .rankings-menu li.active a {
	background: linear-gradient(135deg, #2f6bff 0%, #1d4ed8 100%) !important;
	color: #fff !important;
	border-color: #2f6bff !important;
	box-shadow: 0 4px 14px rgba(47, 107, 255, 0.35) !important;
}

/* Downloads Module Overhaul (ApexMU Style) */
.dc-container {
	background-color: #101a27;
	color: #c7d4e4;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #1d2a3c;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.dc-main-header {
	padding: 1.5rem 2rem;
	background: linear-gradient(135deg, rgba(16,26,39,0.98) 0%, rgba(6,9,15,0.99) 100%);
	border-bottom: 1px solid #1d2a3c;
}
.dc-main-title {
	font-size: 1.6rem;
	font-weight: 900;
	color: #fff;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}
.dc-main-desc {
	font-size: 0.88rem;
	color: #8b9cb3;
	margin: 0;
}
.dl-main-client-row {
	background: linear-gradient(135deg, rgba(14, 22, 34, 0.95) 0%, rgba(10, 16, 24, 0.98) 100%);
	border: 1px solid rgba(47, 107, 255, 0.25);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.15rem;
	margin-bottom: 12px;
	transition: all 0.2s ease;
}
.dl-main-client-row:hover {
	border-color: #2f6bff;
	background: linear-gradient(135deg, rgba(20, 32, 50, 0.95) 0%, rgba(12, 20, 32, 0.98) 100%);
	box-shadow: 0 6px 20px rgba(47, 107, 255, 0.2);
}
.dl-main-client-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(47, 107, 255, 0.15);
	border: 1px solid rgba(47, 107, 255, 0.35);
	color: #2f6bff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}
.dl-main-client-title {
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	margin: 0;
}
.dl-main-client-desc {
	color: #8b9cb3;
	font-size: 0.8rem;
	margin: 0;
}
.dl-size-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #e6edf7;
	background: rgba(255, 255, 255, 0.05);
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	border: 1px solid #1d2a3c;
}

/* System Requirements & Tables */
.dl-soft-table {
	width: 100%;
	border-collapse: collapse;
	background: #0e1622;
	border-radius: 8px;
	overflow: hidden;
	margin-top: 10px;
}
.dl-soft-table th {
	background: #0a1018;
	color: #8b9cb3;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 0.8rem 1.1rem;
	border-bottom: 1px solid #1d2a3c;
}
.dl-soft-table td {
	padding: 0.85rem 1.1rem;
	border-bottom: 1px solid #1d2a3c;
	color: #c7d4e4;
	font-size: 0.85rem;
}

/* ==========================================================================
   Hero Banner & Stats Widget Alignment Fix (ApexMU Style)
   ========================================================================== */
.ax-hero {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 34px 38px !important;
	gap: 32px !important;
	position: relative !important;
	overflow: hidden !important;
	border-radius: 16px !important;
	background: linear-gradient(135deg, rgba(13, 18, 28, 0.96) 0%, rgba(7, 9, 14, 0.98) 100%) !important;
	border: 1px solid rgba(245, 158, 11, 0.25) !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
	margin-bottom: 24px !important;
}

.ax-hero-art {
	position: absolute !important;
	inset: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	z-index: 1 !important;
}

.ax-hero-art img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 85% 30% !important;
	opacity: 0.35 !important;
	display: block !important;
}

.ax-hero-content {
	flex: 1 1 auto !important;
	max-width: 620px !important;
	padding: 0 !important;
	position: relative !important;
	z-index: 2 !important;
}

.ax-hero-stats {
	flex: 0 0 auto !important;
	width: 240px !important;
	margin: 0 !important;
	margin-left: auto !important;
	position: relative !important;
	z-index: 3 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: rgba(8, 13, 22, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	display: block !important;
}

.ax-hstat {
	display: flex !important;
	align-items: center !important;
	gap: 13px !important;
	padding: 13px 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ax-hstat:last-child {
	border-bottom: none !important;
}

.ax-hstat-ic {
	width: 38px !important;
	height: 38px !important;
	border-radius: 9px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
	flex-shrink: 0 !important;
}

.ax-hstat-body {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

.ax-hstat-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #64748b !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	display: block !important;
	line-height: 1.2 !important;
}

.ax-hstat-value {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #f8fafc !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
	margin-top: 2px !important;
}

.ax-hstat-value a {
	color: #fbbf24 !important;
	text-decoration: none !important;
}

.ax-hstat-value a:hover {
	color: #fde68a !important;
	text-decoration: underline !important;
}

@media (max-width: 991px) {
	.ax-hero {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 24px !important;
		gap: 20px !important;
	}
	.ax-hero-stats {
		width: 100% !important;
		margin-left: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.ax-hstat {
		border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
		border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
	}
}

/* ==========================================================================
   ApexMU Account Panel & Quick Actions (UserCP Overhaul)
   ========================================================================== */
.ax-ucp-header-card {
	background: #090e18;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	flex-wrap: wrap;
	gap: 18px;
}

.ax-ucp-user-meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ax-ucp-avatar {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #121927;
	border: 2px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #7c8ba0;
	flex-shrink: 0;
}

.ax-ucp-username {
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	margin: 0;
	letter-spacing: 0.3px;
	line-height: 1.2;
}

.ax-ucp-email {
	font-size: 13.5px;
	color: #64748b;
	margin: 3px 0 8px 0;
}

.ax-ucp-badges {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ax-ucp-badge-item {
	font-size: 12px;
	color: #64748b;
}

.ax-ucp-badge-item strong {
	color: #f8fafc;
	font-weight: 800;
	margin-right: 4px;
}

.ax-ucp-logout-btn {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #ef4444 !important;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.ax-ucp-logout-btn:hover {
	background: #ef4444;
	color: #fff !important;
	border-color: #ef4444;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.ax-ucp-section-title {
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin: 0 0 16px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ax-ucp-section-title i {
	color: #fbbf24;
}

.ax-ucp-quick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 12px;
}

.ax-ucp-quick-card {
	background: #090e18;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.ax-ucp-quick-card:hover {
	border-color: #f59e0b;
	background: #0e1524;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.ax-ucp-quick-icon {
	font-size: 22px;
	width: 28px;
	text-align: center;
	flex-shrink: 0;
}

.ax-ucp-quick-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ax-ucp-quick-name {
	font-size: 14px;
	font-weight: 800;
	color: #f8fafc;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ax-ucp-quick-card:hover .ax-ucp-quick-name {
	color: #fbbf24;
}

.ax-ucp-quick-desc {
	font-size: 12px;
	color: #64748b;
	margin-top: 3px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* UserCP Character Cards */
.ax-ucp-chars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
}

.ax-ucp-char-card {
	background: #090e18;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 18px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 0.2s ease;
}

.ax-ucp-char-card:hover {
	border-color: #38bdf8;
	transform: translateY(-2px);
	background: #0e1524;
}

.ax-ucp-char-av-wrap {
	position: relative;
	width: 64px;
	height: 64px;
	margin-bottom: 10px;
}

.ax-ucp-char-av {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.12);
	background: #111317;
}

.ax-ucp-char-status {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid #090e18;
}

.ax-ucp-char-status.online {
	background: #10b981;
	box-shadow: 0 0 8px #10b981;
}

.ax-ucp-char-status.offline {
	background: #64748b;
}

.ax-ucp-char-name {
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 2px;
}

.ax-ucp-char-name a {
	color: #f8fafc;
	text-decoration: none;
}

.ax-ucp-char-name a:hover {
	color: #38bdf8;
}

.ax-ucp-char-class {
	font-size: 11.5px;
	color: #64748b;
	margin-bottom: 8px;
}

.ax-ucp-char-stats {
	display: flex;
	gap: 8px;
	font-size: 11px;
	color: #94a3b8;
	background: rgba(255, 255, 255, 0.04);
	padding: 4px 10px;
	border-radius: 6px;
}

.ax-ucp-char-stats strong {
	color: #fbbf24;
}

/* ==========================================================================
   UserCP Sub-Navigation Tabs (Pills)
   ========================================================================== */
.ax-ucp-subnav {
	display: flex !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	margin-bottom: 25px !important;
	background: rgba(10, 16, 26, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 8px !important;
	border-radius: 10px !important;
}

.ax-ucp-subnav-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	color: #94a3b8 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	background: transparent !important;
	border: 1px solid transparent !important;
}

.ax-ucp-subnav-link:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.ax-ucp-subnav-link.active {
	background: linear-gradient(135deg, #2f6bff 0%, #1d4ed8 100%) !important;
	color: #fff !important;
	border-color: #2f6bff !important;
	box-shadow: 0 4px 14px rgba(47, 107, 255, 0.35) !important;
}

/* ==========================================================================
   Bootstrap 3 Grid Compatibility for WebEngine Modules in Bootstrap 5
   ========================================================================== */
.col-xs-1 { flex: 0 0 8.333333% !important; max-width: 8.333333% !important; }
.col-xs-2 { flex: 0 0 16.666667% !important; max-width: 16.666667% !important; }
.col-xs-3 { flex: 0 0 25% !important; max-width: 25% !important; }
.col-xs-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
.col-xs-5 { flex: 0 0 41.666667% !important; max-width: 41.666667% !important; }
.col-xs-6 { flex: 0 0 50% !important; max-width: 50% !important; }
.col-xs-7 { flex: 0 0 58.333333% !important; max-width: 58.333333% !important; }
.col-xs-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
.col-xs-9 { flex: 0 0 75% !important; max-width: 75% !important; }
.col-xs-10 { flex: 0 0 83.333333% !important; max-width: 83.333333% !important; }
.col-xs-11 { flex: 0 0 91.666667% !important; max-width: 91.666667% !important; }
.col-xs-12 { flex: 0 0 100% !important; max-width: 100% !important; }
.col-xs-offset-2 { margin-left: 16.666667% !important; }
.col-xs-offset-3 { margin-left: 25% !important; }
.nopadding { padding: 0 !important; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* ==========================================================================
   UserCP General Tables (Unstick, Reset, Clear PK, Reset Stats, Skill Tree)
   ========================================================================== */
.general-table-ui,
table.general-table-ui {
	max-width: 780px !important;
	width: 100% !important;
	margin: 0 auto 25px auto !important;
	background: #090e18 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.general-table-ui tr:first-child td,
.general-table-ui thead th {
	background: #121824 !important;
	color: #fbbf24 !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	padding: 14px 18px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.general-table-ui tr:not(:first-child) td {
	background: #090e18 !important;
	color: #cbd5e1 !important;
	padding: 12px 18px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
	vertical-align: middle !important;
	text-align: center !important;
	font-size: 13.5px !important;
}

.general-table-ui tr:not(:first-child):hover td {
	background: #0e1524 !important;
}

.general-table-ui tr td:first-child {
	width: 65px !important;
	text-align: center !important;
	padding-left: 18px !important;
}

.general-table-ui tr td:nth-child(2) {
	font-weight: 800 !important;
	color: #f8fafc !important;
	text-align: left !important;
	padding-left: 10px !important;
}

.general-table-ui tr td:last-child {
	width: 140px !important;
	text-align: right !important;
	padding-right: 18px !important;
}

/* Character class avatar size constraint in all tables */
.general-table-ui img,
.general-table-ui .tables-character-class-img,
.tables-character-class-img,
.character-avatar img {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(255, 255, 255, 0.12) !important;
	background: #111317 !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* ==========================================================================
   UserCP Add Stats Panel & Forms
   ========================================================================== */
.panel-addstats,
.panel-general,
.panel {
	max-width: 780px !important;
	margin: 0 auto 20px auto !important;
	background: #090e18 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 22px 26px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.panel-addstats .panel-body {
	display: flex !important;
	align-items: flex-start !important;
	gap: 24px !important;
	flex-wrap: nowrap !important;
}

.panel-addstats .character-avatar {
	flex: 0 0 76px !important;
	width: 76px !important;
	max-width: 76px !important;
	text-align: center !important;
}

.panel-addstats .character-avatar img,
.panel-addstats .character-avatar .tables-character-class-img {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid rgba(245, 158, 11, 0.4) !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

.panel-addstats .character-name {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #fbbf24 !important;
	margin-bottom: 14px !important;
	letter-spacing: 0.5px !important;
}

.panel-addstats .col-xs-9 {
	flex: 1 1 auto !important;
	width: auto !important;
}

.form-horizontal .form-group {
	display: flex !important;
	align-items: center !important;
	margin-bottom: 12px !important;
	flex-wrap: wrap !important;
}

.form-horizontal .control-label {
	flex: 0 0 160px !important;
	max-width: 160px !important;
	color: #94a3b8 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: right !important;
	padding-right: 14px !important;
	margin: 0 !important;
}

.form-horizontal .col-sm-7,
.form-horizontal .col-sm-8 {
	flex: 1 1 auto !important;
}

.form-control,
.form-horizontal .form-control {
	max-width: 280px !important;
	height: 38px !important;
	background: #06090e !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #f8fafc !important;
	border-radius: 7px !important;
	padding: 6px 12px !important;
	font-size: 13.5px !important;
	transition: all 0.2s ease !important;
}

.form-control:focus,
.form-horizontal .form-control:focus {
	border-color: #f59e0b !important;
	box-shadow: 0 0 12px rgba(245, 158, 11, 0.25) !important;
	outline: none !important;
	color: #fff !important;
}

select.form-control,
.form-horizontal select.form-control {
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}

/* Action Buttons */
.general-table-ui .btn,
.panel .btn,
.dream-content-card .btn-primary,
.dream-content-card button[name="submit"] {
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
	border: 1px solid rgba(37, 99, 235, 0.5) !important;
	color: #fff !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	padding: 7px 18px !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	display: inline-block !important;
}

.general-table-ui .btn:hover,
.panel .btn:hover,
.dream-content-card .btn-primary:hover,
.dream-content-card button[name="submit"]:hover {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45) !important;
}

/* Requirements box */
.module-requirements {
	max-width: 780px !important;
	margin: 20px auto 0 auto !important;
	background: rgba(10, 15, 24, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 8px !important;
	padding: 14px 20px !important;
	color: #94a3b8 !important;
	font-size: 13px !important;
}

.module-requirements p {
	margin-bottom: 4px !important;
}
.module-requirements p:last-child {
	margin-bottom: 0 !important;
}

/* Password & Email Forms in UserCP */
.dream-content-card .col-xs-8.col-xs-offset-2 {
	max-width: 540px !important;
	margin: 20px auto !important;
	float: none !important;
	background: #090e18 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 24px 28px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}