/*
Theme Name: MX Portal Theme
Theme URI: https://slave.mx
Description: Official companion theme for the MX Control Portal plugin. Features a responsive off-canvas sidebar.
Version: 1.4.1
Author: slave.mx
License: GPL-2.0+
Text Domain: mx-portal-theme
*/

:root {
	--bg-primary: #0a0a0a;
	--bg-sidebar: rgba(18, 18, 18, 0.95);
	--bg-sidebar-solid: #121212;
	--bg-card: rgba(22, 22, 22, 0.5);
	--border-color: rgba(255, 255, 255, 0.08);
	--accent-primary: #dd0404;
	--accent-secondary: #38bdf8;
	--text-primary: #ffffff;
	--text-secondary: #e2e8f0;
	--text-muted: #94a3b8;
	
	/* Glassmorphism */
	--glass-blur: blur(16px);
	--glass-border: 1px solid rgba(255, 255, 255, 0.05);
	--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

	--sidebar-width: 280px;
	--mobile-header-height: 60px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg-primary);
	background-image: radial-gradient(circle at 15% 50%, rgba(56, 189, 248, 0.025), transparent 25%),
					  radial-gradient(circle at 85% 30%, rgba(221, 4, 4, 0.025), transparent 25%);
	background-attachment: fixed;
	color: var(--text-secondary);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2 {
	font-family: 'Montserrat', 'Arial Black', Impact, sans-serif;
	font-weight: 900;
	margin-bottom: 1.5rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.85);
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

a {
	color: var(--accent-secondary);
	text-decoration: none;
	transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
	opacity: 0.8;
}

/* ═══════════ LAYOUT ═══════════ */
.mxcp-layout {
	display: flex;
	min-height: 100vh;
	width: 100%;
}

/* ═══════════ SIDEBAR ═══════════ */
.mxcp-sidebar {
	width: var(--sidebar-width);
	background-color: var(--bg-sidebar);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-right: var(--glass-border);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1000;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mxcp-sidebar-header {
	padding: 1.5rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: var(--glass-border);
	background: transparent;
	box-shadow: none;
}

.mxcp-sidebar-header .site-title {
	margin-bottom: 0;
}

.mxcp-sidebar-header .site-title a {
	display: block;
	position: relative;
	font-family: 'Montserrat', 'Arial Black', Impact, sans-serif;
	font-size: clamp(1.4rem, 4vw, 1.8rem);
	font-weight: 900;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1.2;
	word-break: break-word;
	
	/* Hollow Outline Text */
	color: transparent;
	-webkit-text-stroke: 1.5px var(--accent-primary);
	text-shadow: none; /* no glow (1.3.1) */

	transition: all 0.3s ease;
}

.mxcp-sidebar-header .site-title a:hover {
	opacity: 0.8;
}

.mxcp-sidebar-nav-wrap {
	flex: 1;
	overflow-y: auto;
	padding: 0 0 2rem;
}
/* The space above the menu sits inside the scrolling list (not as padding on it), so the search box can stick
   right at the top edge: nothing shows above it or through it while the menu scrolls underneath. */
.mxcp-sidebar-nav { padding-top: 2rem; }

.mxcp-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.mxcp-nav-list li {
	width: 100%;
}

.mxcp-nav-list a {
	display: block;
	padding: 12px 2rem;
	color: var(--text-secondary);
	font-weight: 500;
	font-size: 1.05rem;
	border-left: 3px solid transparent;
	transition: all 0.2s ease;
}

.mxcp-nav-list a:hover,
.mxcp-nav-list .current-menu-item > a {
	background: rgba(255, 255, 255, 0.04);
	color: #ffffff;
	border-left-color: var(--accent-secondary);
}

.mxcp-nav-icon { display: inline-block; width: 1.4em; text-align: center; margin-right: 2px; }

/* ═══════════ SIDEBAR NAV: search, home, favourites, collapsible sections ═══════════ */
/* Built from MXCP_Nav::render_sidebar_nav() — see header.php. Rendered fresh from the
   same catalog the Dashboard uses, so it stays a manageable, grouped list instead of
   one long flat scroll of every page in the plugin. */
.mxcp-sidenav { display: flex; flex-direction: column; }

.mxcp-sidenav-search {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--bg-sidebar-solid);
	padding: 0.75rem 1.5rem 0.85rem;
	margin-top: -0.75rem;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Once the menu has scrolled under it (set by the menu script): a line and a soft shadow to show where it ends. */
.mxcp-sidebar-nav-wrap.is-scrolled .mxcp-sidenav-search {
	border-bottom-color: var(--border-color);
	box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.6);
}

.mxcp-sidenav-search-input {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 9px 12px;
	color: var(--text-primary);
	font-size: 0.9rem;
	font-family: inherit;
}

.mxcp-sidenav-search-input::placeholder { color: var(--text-secondary); opacity: 0.75; }

.mxcp-sidenav-search-input:focus {
	outline: none;
	border-color: var(--accent-secondary);
	background: rgba(255, 255, 255, 0.08);
}

.mxcp-sidenav-home { margin-bottom: 0.4rem; }

.mxcp-sidenav-label {
	margin: 0;
	padding: 10px 2rem 6px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-secondary);
	opacity: 0.75;
}

.mxcp-sidenav-pins {
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mxcp-sidenav-group { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mxcp-sidenav-group:first-of-type { border-top: none; }

.mxcp-sidenav-group-summary {
	cursor: pointer;
	list-style: none;
	padding: 12px 2rem;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-secondary);
	opacity: 0.8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	user-select: none;
}

.mxcp-sidenav-group-summary::-webkit-details-marker { display: none; }

.mxcp-sidenav-group-summary::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.mxcp-sidenav-group[open] > .mxcp-sidenav-group-summary::after { transform: rotate(-135deg); }
.mxcp-sidenav-group-summary:hover { color: #ffffff; opacity: 1; }

.mxcp-sidenav-empty {
	padding: 14px 2rem;
	margin: 0;
	font-size: 0.85rem;
	color: var(--text-secondary);
	opacity: 0.75;
}

.mxcp-sidenav-guest-link {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #f8fafc;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.mxcp-sidenav-guest-link:hover {
	background: rgba(221, 4, 4, 0.15);
	color: #ff4d4d;
	border-color: rgba(221, 4, 4, 0.5);
}

.mxcp-sidebar-footer {
	padding: 1.25rem 1.25rem;
	border-top: var(--glass-border);
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.role-badge {
	flex: 1;
	font-size: 0.82rem;
	padding: 7px 12px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--text-primary);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mxcp-btn-login {
	flex: 1;
	background: transparent;
	color: var(--text-primary);
	border: 1px solid var(--text-primary);
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	width: 100%;
	transition: all 0.2s ease;
}

.mxcp-btn-login:hover {
	background: var(--text-primary);
	color: var(--bg-primary);
}

/* ═══════════ MOBILE HEADER ═══════════ */
.mxcp-mobile-header {
	display: none; /* Hidden on desktop */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--mobile-header-height);
	background-color: var(--bg-sidebar);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom: var(--glass-border);
	z-index: 900;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
}

.mxcp-mobile-branding a {
	display: block;
	position: relative;
	font-family: 'Montserrat', 'Arial Black', Impact, sans-serif;
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: 2px;
	text-transform: uppercase;
	
	/* Hollow Outline Text */
	color: transparent;
	-webkit-text-stroke: 1.5px var(--accent-primary);
	text-shadow: none; /* no glow (1.3.1) */

	transition: all 0.3s ease;
}

.mxcp-mobile-toggle {
	background: transparent;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mxcp-hamburger {
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	position: relative;
}

.mxcp-hamburger::before,
.mxcp-hamburger::after {
	content: '';
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	left: 0;
}

.mxcp-hamburger::before { top: -8px; }
.mxcp-hamburger::after { bottom: -8px; }

/* Mobile Backdrop */
.mxcp-sidebar-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(4px);
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* ═══════════ MAIN CONTENT ═══════════ */
.mxcp-main-wrapper {
	flex: 1;
	margin-left: var(--sidebar-width);
	padding: 3rem 2rem;
	min-height: calc(100vh - 60px);
}

.page-content {
	background-color: var(--bg-card);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: var(--glass-border);
	border-radius: 12px;
	padding: 2.5rem;
	box-shadow: var(--glass-shadow);
	margin: 0 auto;
	max-width: 1200px;
}

.portal-page-title,
h1.portal-page-title {
	font-family: 'Montserrat', 'Arial Black', Impact, sans-serif;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 1.75rem;
	padding-bottom: 0.85rem;
	border-bottom: var(--glass-border);
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.35), 0 0 20px rgba(255, 255, 255, 0.15);
}

/* ═══════════ FOOTER ═══════════ */
.site-footer {
	margin-left: var(--sidebar-width);
	padding: 2rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--text-muted);
}

/* ═══════════ WP ADMIN BAR SUPPORT ═══════════ */
body.admin-bar .mxcp-sidebar {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .mxcp-sidebar {
		top: 46px;
	}
	body.admin-bar .mxcp-mobile-header {
		top: 46px;
	}
}

/* ═══════════ RESPONSIVE (MOBILE) ═══════════ */
@media (max-width: 768px) {
	/* Show Mobile Header */
	.mxcp-mobile-header {
		display: flex;
	}

	/* Adjust Main Wrapper & Footer to compensate for missing sidebar and new top bar */
	.mxcp-main-wrapper {
		margin-left: 0;
		padding: calc(var(--mobile-header-height) + 2rem) 1rem 2rem;
	}

	.site-footer {
		margin-left: 0;
	}

	/* Hide Sidebar Off-Canvas */
	.mxcp-sidebar {
		transform: translateX(-100%);
	}

	/* Slide In Sidebar */
	.mxcp-sidebar.open {
		transform: translateX(0);
	}

	/* Show Backdrop */
	.mxcp-sidebar-backdrop {
		display: block;
		visibility: hidden;
	}

	.mxcp-sidebar-backdrop.active {
		visibility: visible;
		opacity: 1;
	}

	.page-content {
		padding: 1.5rem;
	}
}

/* ═══════════ NOTIFICATION BELL ═══════════ */
.mxcp-notif-bell-btn {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #f8fafc;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 16px;
	flex-shrink: 0;
	padding: 0;
}
.mxcp-notif-bell-btn:hover {
	background: rgba(221, 4, 4, 0.15);
	color: #ff4d4d;
	border-color: rgba(221, 4, 4, 0.5);
	box-shadow: 0 0 10px rgba(221, 4, 4, 0.3);
}
.mxcp-notif-bell-btn .mxcp-bell-svg {
	display: block;
	fill: currentColor;
	width: 18px;
	height: 18px;
}
.mxcp-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #dc2626;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 10px;
	border: 2px solid #111;
	box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
	pointer-events: none;
}
.mxcp-mobile-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION DRAWER & OVERLAY (OFF-CANVAS FEED)
═══════════════════════════════════════════════════════════ */
.mxcp-notif-drawer {
	position: fixed;
	top: 0;
	right: -440px;
	width: 380px;
	max-width: 90vw;
	height: 100vh;
	background: #111116;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: -10px 0 35px rgba(0, 0, 0, 0.75);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mxcp-notif-drawer.open {
	right: 0 !important;
}

.mxcp-notif-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 99998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.mxcp-notif-overlay.active {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.mxcp-notif-header {
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #16161f;
}

.mxcp-notif-header-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
}

.mxcp-notif-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mxcp-notif-close-btn {
	background: transparent;
	border: none;
	color: #94a3b8;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 6px;
	transition: color 0.2s;
}

.mxcp-notif-close-btn:hover {
	color: #ff4d4d;
}

.mxcp-notif-body-list {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mxcp-notif-loading,
.mxcp-notif-empty {
	padding: 50px 20px;
	text-align: center;
	color: #94a3b8;
	font-size: 14px;
}

.mxcp-notif-item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 12px 14px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	position: relative;
	transition: all 0.2s;
}

.mxcp-notif-item:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
}

.mxcp-notif-item.mxcp-notif-unread {
	border-left: 3px solid #d4af37;
	background: rgba(212, 175, 55, 0.06);
}

.mxcp-notif-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.08);
	color: #cbd5e1;
}

.mxcp-notif-icon.mxcp-notif-type-summon {
	background: rgba(220, 38, 38, 0.2);
	color: #ff4d4d;
}

.mxcp-notif-icon.mxcp-notif-type-reward,
.mxcp-notif-icon.mxcp-notif-type-points {
	background: rgba(212, 175, 55, 0.2);
	color: #d4af37;
}

.mxcp-notif-icon.mxcp-notif-type-punishment,
.mxcp-notif-icon.mxcp-notif-type-infraction {
	background: rgba(239, 68, 68, 0.2);
	color: #ef4444;
}

.mxcp-notif-content {
	flex: 1;
	min-width: 0;
}

.mxcp-notif-title {
	font-size: 13px;
	color: #ffffff;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mxcp-notif-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d4af37;
	display: inline-block;
	box-shadow: 0 0 6px rgba(212, 175, 55, 0.8);
}

.mxcp-notif-body {
	font-size: 12px;
	color: #cbd5e1;
	line-height: 1.45;
	margin-bottom: 6px;
	word-break: break-word;
}

.mxcp-notif-time {
	font-size: 11px;
	color: #64748b;
}

.mxcp-notif-mark-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #94a3b8;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s;
}

.mxcp-notif-mark-btn:hover {
	border-color: #22c55e;
	color: #22c55e;
	background: rgba(34, 197, 94, 0.1);
}

.mxcp-notif-tabs-bar {
	display: flex;
	background: rgba(255, 255, 255, 0.03);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 8px 14px;
	gap: 8px;
}

.mxcp-notif-tab-btn {
	background: transparent;
	border: none;
	color: #94a3b8;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s;
}

.mxcp-notif-tab-btn:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
}

.mxcp-notif-tab-btn.active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

.mxcp-notif-actions-item {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.mxcp-notif-del-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #94a3b8;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s;
}

.mxcp-notif-del-btn:hover {
	border-color: #ef4444;
	color: #ef4444;
	background: rgba(239, 68, 68, 0.15);
}


/* ═══════════ GUEST VIEW: no side menu, so the content uses the full width ═══════════ */
body.mxcp-guest-view .mxcp-main-wrapper { margin-left: 0; }
body.mxcp-guest-view .site-footer { margin-left: 0; }
body.mxcp-guest-view .mxcp-sidebar,
body.mxcp-guest-view .mxcp-mobile-header,
body.mxcp-guest-view .mxcp-sidebar-backdrop { display: none !important; }
@media (max-width: 768px) {
	body.mxcp-guest-view .mxcp-main-wrapper { padding: 1.5rem 1rem 2rem; }
}

/* Guest portal title: site name, same outline style as the other portal titles, but in red. */
.mxcp-guest-portal-title {
	-webkit-text-stroke: 1.2px var(--accent-primary) !important;
	text-shadow: 0 0 10px rgba(221, 4, 4, 0.4), 0 0 20px rgba(221, 4, 4, 0.15) !important;
}

/* Guest footer login link */
.mxcp-footer-login { color: var(--accent-primary); text-decoration: underline; }
.mxcp-footer-login:hover { color: #ff2d2d; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE (4.11.0): <html data-mxcp-mode="light"> is set by the Mx Control Portal plugin.
   White cards on a very light grey page, dark text, the same red and gold accents.
   ═══════════════════════════════════════════════════════════════ */
html[data-mxcp-mode="light"] {
	color-scheme: light;
	--bg-primary: #f4f5f7;
	--bg-sidebar: rgba(255, 255, 255, 0.97);
	--bg-sidebar-solid: #ffffff;
	--bg-card: #ffffff;
	--border-color: rgba(15, 23, 42, 0.10);
	--text-primary: #111827;
	--text-secondary: #374151;
	--text-muted: #6b7280;
	--accent-secondary: #0369a1;
	--glass-border: 1px solid rgba(15, 23, 42, 0.08);
	--glass-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.06);
}
html[data-mxcp-mode="light"] body { background-image: none; }
/* light:generated:start */
:where(html[data-mxcp-mode="light"]) h1,
:where(html[data-mxcp-mode="light"]) h2 { -webkit-text-stroke: 1px #111827; text-shadow: none; }
:where(html[data-mxcp-mode="light"]) .mxcp-nav-list a:hover,
:where(html[data-mxcp-mode="light"]) .mxcp-nav-list .current-menu-item > a { background: rgba(15, 23, 42, 0.052); color: var(--text); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidebar-nav-wrap.is-scrolled .mxcp-sidenav-search { box-shadow: 0 6px 12px -8px rgba(15, 23, 42, 0.18); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-search-input { background: rgba(15, 23, 42, 0.065); border: 1px solid rgba(15, 23, 42, 0.195); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-search-input:focus { background: rgba(15, 23, 42, 0.104); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-pins { border-bottom: 1px solid rgba(15, 23, 42, 0.104); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-group { border-top: 1px solid rgba(15, 23, 42, 0.078); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-group-summary:hover { color: var(--text); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-guest-link { background: rgba(15, 23, 42, 0.078); border: 1px solid rgba(15, 23, 42, 0.234); color: var(--text2); }
:where(html[data-mxcp-mode="light"]) .mxcp-sidenav-guest-link:hover { color: #b91c1c; }
:where(html[data-mxcp-mode="light"]) .role-badge { border: 1px solid rgba(15, 23, 42, 0.234); background: rgba(15, 23, 42, 0.052); }
:where(html[data-mxcp-mode="light"]) .portal-page-title,
:where(html[data-mxcp-mode="light"]) h1.portal-page-title { -webkit-text-stroke: 1.2px #111827; text-shadow: none; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-bell-btn { background: rgba(15, 23, 42, 0.078); border: 1px solid rgba(15, 23, 42, 0.234); color: var(--text2); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-bell-btn:hover { color: #b91c1c; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-badge { border: 2px solid rgba(15, 23, 42, 0.12); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-drawer { background: var(--surface); border-left: 1px solid rgba(15, 23, 42, 0.156); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-header { border-bottom: 1px solid rgba(15, 23, 42, 0.13); background: var(--surface); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-header-title { color: var(--text); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-close-btn { color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-close-btn:hover { color: #b91c1c; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-loading,
:where(html[data-mxcp-mode="light"]) .mxcp-notif-empty { color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-item { background: rgba(15, 23, 42, 0.039); border: 1px solid rgba(15, 23, 42, 0.104); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-item:hover { border-color: rgba(15, 23, 42, 0.26); background: rgba(15, 23, 42, 0.078); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon { background: rgba(15, 23, 42, 0.104); color: var(--text2); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon.mxcp-notif-type-summon { color: #b91c1c; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon.mxcp-notif-type-reward,
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon.mxcp-notif-type-points { color: #b45309; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon.mxcp-notif-type-punishment,
:where(html[data-mxcp-mode="light"]) .mxcp-notif-icon.mxcp-notif-type-infraction { color: #b91c1c; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-title { color: var(--text); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-body { color: var(--text2); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-time { color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-mark-btn { border: 1px solid rgba(15, 23, 42, 0.195); color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-mark-btn:hover { color: #047857; }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-tabs-bar { background: rgba(15, 23, 42, 0.039); border-bottom: 1px solid rgba(15, 23, 42, 0.104); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-tab-btn { color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-tab-btn:hover { color: var(--text); background: rgba(15, 23, 42, 0.078); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-tab-btn.active { color: var(--text); background: rgba(15, 23, 42, 0.156); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-del-btn { border: 1px solid rgba(15, 23, 42, 0.195); color: var(--text3); }
:where(html[data-mxcp-mode="light"]) .mxcp-notif-del-btn:hover { color: #b91c1c; }
/* light:generated:end */