@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Audiowide&family=Chakra+Petch:ital,wght@0,400;0,600;0,700;1,700&family=Cinzel:wght@600;700;900&family=Orbitron:wght@500;700;900&family=Press+Start+2P&family=Rajdhani:wght@500;600;700&family=Russo+One&family=Share+Tech+Mono&family=VT323&display=swap');

/* ==========================================================================
   TS3MusicBot Modern Design & UI Polish (custom.css)
   ========================================================================== */

/* 1. Global Typography & Core Reset */
:root {
	--brand-primary: #3b82f6;
	--brand-primary-hover: #2563eb;
	--brand-primary-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
	--surface-bg-darker: #090d16;
	--surface-bg-dark: #0f172a;
	--surface-bg-card: #1e293b;
	--surface-bg-sidebar: #0b1120;
	--surface-border: rgba(255, 255, 255, 0.08);
	--surface-border-hover: rgba(59, 130, 246, 0.4);
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--text-dimmed: #64748b;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-radius-pill: 9999px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
	--skin-accent-glow: 0 0 16px rgba(59, 130, 246, 0.35);
}

body, html {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	background-color: var(--surface-bg-darker) !important;
	color: var(--text-main);
	-webkit-font-smoothing: antialiased;
}

/* 2. Top Header Polish */
#header {
	background: #0b1120 !important;
	border-bottom: 1px solid var(--surface-border) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
	height: 70px !important;
	position: relative;
	z-index: 100;
}

#header #title {
	position: static !important;
}

/* Brand block, matching the mockup's proportions: a 34px rounded tile
   holding the logo, a 14.5px title and an 11px subtitle beneath it. The
   product logo is kept (the mockup used a generic note glyph as a stand-in
   because it was drawn outside the app). */
#header #title h1 {
	position: absolute !important;
	left: 18px !important;
	top: 15px !important;
	margin: 0 !important;
	padding: 0 0 0 45px !important;
	height: 34px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	letter-spacing: -0.2px !important;
	color: var(--text-main) !important;
	background: url("/images/logo.gif") no-repeat 0 center !important;
	background-size: 34px 34px !important;
	border-radius: 0 !important;
	display: flex !important;
	align-items: flex-start !important;
	line-height: 17px !important;
	text-shadow: none !important;
}

#header #webinterface-switcher {
	position: absolute !important;
	left: 64px !important;
	top: 36px !important;
	padding: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--text-dimmed, #94a3b8) !important;
	z-index: 10 !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	cursor: pointer !important;
	transition: color 0.2s ease;
}
#header #webinterface-switcher:hover {
	color: var(--brand-primary) !important;
}

/* ==========================================================================
   Header Status Rail
   Connection mode / query state / client name / player-client dots / storage
   sit in one bordered rail split by hairlines, so they read as a single
   object; the user chip sits beside it. They used to be five independent
   position:absolute divs with hand-tuned px offsets drifting against each
   other. The JS side (ensureHeaderStatusCluster in TS3MusicBot.js) fills
   fixed .hslot slots so the order can't shuffle between loads; empty slots
   collapse here and the dividers are drawn off whichever slots are filled.
   ========================================================================== */
#header-status-cluster {
	position: absolute !important;
	right: 20px !important;
	top: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	max-width: 66% !important;
	padding: 6px 0 !important;
	box-sizing: border-box !important;
}

#header-status-rail {
	display: flex;
	align-items: stretch;
	height: 34px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--surface-border);
	border-radius: 10px;
	overflow: hidden;
	min-width: 0;
}
#header-status-rail:empty {
	display: none;
}

.hslot {
	display: flex;
	align-items: center;
	min-width: 0;
}
.hslot:empty {
	display: none;
}
/* Hairline between rail items: any filled slot that follows another filled
   slot. DOM order == visual order here, so no :first-child guesswork. */
#header-status-rail > .hslot:not(:empty) ~ .hslot:not(:empty) {
	border-left: 1px solid var(--surface-border);
}
#header-status-rail > .hslot {
	padding: 0 13px;
	gap: 7px;
}

.header-status-item {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: var(--text-muted) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	white-space: nowrap !important;
	min-width: 0;
}
.header-status-item i {
	font-size: 12px !important;
	opacity: 0.85 !important;
}
.header-mode-label i.bi-discord {
	color: #818cf8 !important;
	opacity: 1 !important;
}

/* Player / client indicators, rebuilt as dots by renderHeaderInfo() in
   TS3MusicBot.js - the raw endpoint returns right-floated knob images on
   two lines. */
#header-info,
#header-status-rail #header-info,
.header-query-label {
	font-size: 11.5px !important;
	line-height: 1.4 !important;
	color: var(--text-muted) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 11px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
#header-info .hstat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
#header-info .hdot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
#header-info .hdot.on {
	background: #22c55e;
	box-shadow: 0 0 7px rgba(34, 197, 94, 0.7);
}
#header-info .hdot.off {
	background: #ef4444;
	box-shadow: 0 0 7px rgba(239, 68, 68, 0.6);
}
/* connecting, or a player that stopped answering (the "Message" knob) */
#header-info .hdot.warn {
	background: #f59e0b;
	box-shadow: 0 0 7px rgba(245, 158, 11, 0.6);
}

#header-client-name {
	font-weight: 600 !important;
	color: var(--text-main) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: block !important;
	max-width: 150px !important;
}

/* User chip: outside the rail, its own pill. */
.header-userlevel {
	gap: 8px !important;
	height: 34px !important;
	padding: 0 11px 0 5px !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 10px !important;
	box-sizing: border-box !important;
}
.header-userlevel-avatar {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--brand-primary-gradient) !important;
	color: #ffffff !important;
	font-size: 12px !important;
}
.header-userlevel-avatar i {
	opacity: 1 !important;
	font-size: 12px !important;
}
.header-userlevel-avatar--user {
	background: rgba(255, 255, 255, 0.12) !important;
	color: var(--text-muted) !important;
}
.header-userlevel-badge {
	font-size: 10.5px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--text-muted) !important;
}

/* Storage:
   - When limited: slim meter (#storageSpaceBar) with fill progress + label.
   - Without limit: only disk space with HDD icon, without a bar. */
.header-storage-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 11.5px !important;
	color: var(--text-muted) !important;
	white-space: nowrap !important;
}
.header-storage-item i.bi-hdd {
	font-size: 12px !important;
	opacity: 0.85 !important;
}
#header #header-status-rail #storageSpaceBar,
#storageSpaceBar {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	flex-shrink: 0 !important;
	width: 46px !important;
	height: 5px !important;
	border-radius: 3px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border: none !important;
	overflow: hidden !important;
	display: block !important;
}
#header #header-status-rail #storageSpaceBar div,
#storageSpaceBar div {
	background: var(--brand-primary-gradient) !important;
	height: 5px !important;
	border-radius: 3px !important;
	font-size: 0 !important;
	transition: width 0.4s ease !important;
}
.storage-label {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: var(--text-muted) !important;
	white-space: nowrap !important;
	flex-shrink: 0;
}
.storage-label b {
	color: var(--text-main) !important;
	font-weight: 600 !important;
}

[data-bs-theme="light"] #header-status-rail,
[data-bs-theme="light"] .header-userlevel {
	background: rgba(15, 23, 42, 0.03) !important;
}
/* Single source of truth - this used to also be declared further down
   (in the old per-widget light-theme block) with a different value
   (0.12 vs the 0.06 here), which silently won since it came later in the
   cascade; consolidated here instead of leaving a dead duplicate behind. */
[data-bs-theme="light"] #storageSpaceBar {
	background: rgba(15, 23, 42, 0.06) !important;
	border-color: var(--surface-border) !important;
}

/* 3. Left Navigation Sidebar Polish */
#leftPanel {
	background: var(--surface-bg-sidebar) !important;
	border-right: 1px solid var(--surface-border) !important;
	padding: 12px 6px !important;
}

/* A <li> shrinks to its content's natural width by default instead of
   stretching to fill its <ul> - harmless at the full 240px desktop width
   where everything fits anyway, but between 880px and 1100px #leftPanel
   narrows to a 200px "medium" rail (style.css) while nav-link padding,
   the language <select>, and the WebStream/SoundStream promo card text
   are all still sized for the full-width rail. The <li> then grows past
   200px to fit that content and #leftPanel's overflow:hidden clips
   whatever sticks out - the toggle switch, the flag+language code, and
   the promo card subtitles all got cut off at the panel edge. Constraining
   <li> to 100% here (not just inside the <=880px icon-collapse query)
   lets each row's own flex/ellipsis rules (already in place lower down)
   actually do their job instead of being bypassed by an oversized parent. */
#leftPanel .nav-pills > li {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

#leftPanel .nav-pills .nav-link {
	border-radius: 8px !important;
	margin: 2px 6px !important;
	padding: 8px 12px !important;
	color: var(--text-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	display: flex !important;
	align-items: center !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover never fills the whole row (that's reserved for the active state,
   so it stays meaningful) - instead just the icon gets a small rounded
   "hint" badge, a faint preview of where the active pill would sit. */
#leftPanel .nav-pills .nav-link:hover {
	background: transparent !important;
	color: #ffffff !important;
}
#leftPanel .nav-pills .nav-link:hover .bi {
	background: rgba(59, 130, 246, 0.16) !important;
	color: var(--brand-primary) !important;
}

#leftPanel .nav-pills .nav-link.active {
	background: var(--brand-primary-gradient) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}
#leftPanel .nav-pills .nav-link.active .bi {
	background: transparent !important;
}

#leftPanel .nav-link .bi {
	font-size: 15px !important;
	width: 26px !important;
	height: 26px !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-right: 8px !important;
	border-radius: 7px !important;
	background: transparent !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

#leftPanel .count {
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	margin-left: auto !important;
	transform: none !important;
	background: var(--brand-primary, #3b82f6) !important;
	color: #ffffff !important;
	font-size: 10.5px !important;
	padding: 2px 7px !important;
	font-weight: 600 !important;
	box-shadow: 0 0 10px rgba(59, 130, 246, 0.4) !important;
}
#leftPanel .count:empty {
	display: none !important;
}

/* Dark Mode Switch & Language Select */
#leftPanel #dark-mode-menu-switch {
	margin-top: 10px !important;
	border-top: 1px solid var(--surface-border);
	padding-top: 10px;
}

#leftPanel #dark-mode-menu-switch .nav-link {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 8px 10px !important;
}

#leftPanel #dark-mode-menu-switch .dark-mode-menu-switch {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding-left: 0 !important;
	margin: 0 !important;
}

#leftPanel #dark-mode-menu-switch .form-check-input {
	margin-left: auto !important;
	float: none !important;
	cursor: pointer !important;
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
}
#leftPanel #dark-mode-menu-switch .form-check-input:checked {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

#leftPanel #language {
	width: 76px !important;
	height: 28px !important;
	background-color: #0b1120 !important;
	color: #ffffff !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 6px !important;
	margin-left: auto !important;
	float: none !important;
	font-size: 11.5px !important;
	padding: 2px 6px 2px 32px !important;
	cursor: pointer;
}

/* Promo Cards (WebStream & SoundStream): real markup now (icon + title +
   subtitle), replacing two fixed-resolution PNGs that had the text baked
   into the image and went blurry/tiny at sidebar width. */
#leftPanel .sidebar-promo-card {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 12px !important;
	margin: 6px 8px !important;
	padding: 10px 12px !important;
	transition: all 0.25s ease !important;
	text-decoration: none !important;
}
#leftPanel .sidebar-promo-card:hover {
	background: rgba(37, 99, 235, 0.1) !important;
	border-color: var(--surface-border-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
#leftPanel .sidebar-promo-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	font-size: 16px;
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
}
#leftPanel .soundStreamButton .sidebar-promo-icon {
	background: rgba(168, 85, 247, 0.15);
	color: #c084fc;
}
#leftPanel .sidebar-promo-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: left;
}
#leftPanel .sidebar-promo-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#leftPanel .sidebar-promo-subtitle {
	font-size: 10.5px;
	color: var(--text-dimmed);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#leftPanel .sidebar-promo-arrow {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--text-dimmed);
	opacity: 0;
	transform: translateX(-4px);
	transition: all 0.2s ease;
}
#leftPanel .sidebar-promo-card:hover .sidebar-promo-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--brand-primary);
}

/* ==========================================================================
   4. Right Player Deck - "Now-playing hero"
   ---------------------------------------------------------------------
   Rebuilt from the mockup: square cover with the mode toggles floating on
   a scrim, track title beneath it, full-width scrub with the times under
   the bar, a centred transport row, and an always-visible inline volume
   row. Everything is normal flow in a flex column, so no row can overlap
   another - the old deck positioned every child absolutely against
   hand-measured 2012 coordinates for a fixed 225x240 box, which is what
   produced the dead gap on the right, the timeline sitting on top of the
   transport buttons, and the stacked volume +/- controls.
   Note the many !important flags: style.css targets these same elements
   with 2-3 ID selectors (#rightPanel #player #cover etc.) which outrank a
   plain #cover here on specificity alone.
   ========================================================================== */
#rightPanel {
	background: var(--surface-bg-sidebar) !important;
	border-left: 1px solid var(--surface-border) !important;
	padding: 10px 8px !important;
}

/* No card chrome of its own: in the approved mockup the player, the
   play-link block and the downloads block all share one surface. Giving
   the player its own border here produced a card sitting on a card. */
#rightPanel #player {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	margin-bottom: 2px;
	box-shadow: none;
	padding: 0 3px;
	box-sizing: border-box;
}

/* --- Cover ------------------------------------------------------------ */
#cover {
	order: 1;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: var(--surface-bg-dark);
}
#cover img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.35s ease;
}
#cover:hover img {
	transform: scale(1.03);
}

/* Mode toggles (play all / shuffle / repeat / random radio) float on the
   cover over a scrim so they stay legible against any artwork. */
#topcontrols-bg {
	position: absolute !important;
	top: 0 !important;
	left: 3px !important;
	right: 3px !important;
	width: auto !important;
	height: 46px !important;
	border-radius: 12px 12px 0 0 !important;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent) !important;
	opacity: 1 !important;
	z-index: 2 !important;
	pointer-events: none !important;
}
#rightPanel #player #topcontrols,
#topcontrols {
	position: absolute !important;
	top: 0 !important;
	left: 3px !important;
	right: 3px !important;
	width: auto !important;
	height: 42px !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 0 !important;
	z-index: 3 !important;
}
#rightPanel #player #topcontrols > div,
#topcontrols > div {
	position: static !important;
	top: 0 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 25px !important;
	height: 25px !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.88) !important;
	background: rgba(0, 0, 0, 0.35) !important;
	cursor: pointer;
	transition: all 0.2s ease;
}
#rightPanel #player #topcontrols > div:hover,
#topcontrols > div:hover {
	color: #ffffff !important;
	background: var(--brand-primary) !important;
	transform: scale(1.08);
}
#rightPanel #player #topcontrols > div i,
#rightPanel #player #topcontrols > div .bi,
#topcontrols > div i,
#topcontrols > div .bi {
	width: 12px !important;
	height: 12px !important;
	font-size: 12px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
}
#topcontrols > div:active,
#controls > div:active {
	outline: none !important;
}

/* --- Track title (Mockup Panel 1: No track playing / Queue is empty) --- */
.nowPlaying {
	order: 2;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 11px 4px 2px !important;
	text-align: center;
	box-sizing: border-box;
}
.nowPlaying .ttitle {
	position: relative !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	color: var(--text-main) !important;
	width: 100% !important;
}
.nowPlaying .text {
	display: inline-block !important;
	padding-left: 0 !important;
	animation: none !important;
	white-space: nowrap !important;
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	color: var(--text-main) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	will-change: transform;
}
/* Only slide when title is too long and actually gets cut off */
.nowPlaying .text.is-overflowing {
	max-width: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	padding-left: 0 !important;
	animation: nowPlayingMarquee 12s ease-in-out infinite !important;
}
.nowPlaying:hover .text.is-overflowing {
	animation-play-state: paused !important;
}
@keyframes nowPlayingMarquee {
	0%, 20% {
		transform: translateX(0);
	}
	50%, 65% {
		transform: translateX(var(--marquee-distance, -40%));
	}
	90%, 100% {
		transform: translateX(0);
	}
}
.nowPlaying .tsub {
	font-size: 11px !important;
	color: var(--text-dimmed) !important;
	margin-top: 2px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* .audio-wave-equalizer (TS3MusicBot.js, "Ambient Audio Equalizer" in
   style.css): a live-playback indicator appended as a sibling of
   .ttitle/.tsub. It used to render as a visible third row under the
   subtitle at all times - including idle, where its bars sit at
   scaleY(0.2) with no .playing class, which just reads as an unexplained
   row of flat dashes since there's nothing animating to identify it as an
   equalizer. Hidden entirely until something is actually playing, and
   positioned as a small corner badge rather than a block-level row so it
   can never push .ttitle/.tsub around or fight the marquee logic for
   space. Green is intentional, not off-brand: it's the same "live/active"
   color used for status dots elsewhere (header player/client dots, radio
   directory "Live" badges), not a random leftover. .nowPlaying is already
   position:relative (see its base rule above), which is what anchors this. */
.audio-wave-equalizer {
	display: none !important;
	position: absolute !important;
	top: 2px !important;
	right: 4px !important;
	margin-left: 0 !important;
	height: 12px !important;
	gap: 2px !important;
}
.audio-wave-equalizer .wave-bar {
	width: 2px !important;
	background-color: #22c55e !important;
}
.nowPlaying:has(.audio-wave-equalizer.playing) {
	padding-right: 22px !important;
}
.audio-wave-equalizer.playing {
	display: inline-flex !important;
}

/* --- Scrub bar -------------------------------------------------------- */
/* flex-wrap puts the bar on its own line and lets the two timestamps drop
   underneath it, matching the mockup, without touching the markup order. */
#timeline-container {
	order: 3;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	z-index: auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	justify-content: space-between;
	padding: 12px 2px 0 2px;
	box-sizing: border-box;
	flex-shrink: 0;
}
#timeline {
	order: -1;
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 5px !important;
	margin-bottom: 7px;
	border-radius: 3px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	cursor: pointer;
	position: relative !important;
}
#timeline #behind {
	background: var(--brand-primary-gradient) !important;
	height: 100% !important;
	border-radius: 3px !important;
}
#timeline #slider {
	width: 11px !important;
	height: 11px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	box-shadow: 0 0 8px rgba(59, 130, 246, 0.85) !important;
	/* centred on its point: left is a percentage of the bar (TS3MusicBot.js
	   timelinePercent), whatever the bar's width and the skin's dot size */
	position: absolute !important;
	top: 50% !important;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	cursor: grab;
	transition: transform 0.15s ease;
}
#timeline #slider:hover {
	transform: translate(-50%, -50%) scale(1.3);
}
#starttime, #endtime {
	position: static !important;
	top: auto !important;
	right: auto !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	font-variant-numeric: tabular-nums;
	color: var(--text-dimmed) !important;
	background: transparent !important;
	backdrop-filter: none !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* The 2012 translucent strip that used to sit behind the transport row
   when it was overlaid on the artwork - the row has its own space now. */
#controls-bg {
	display: none !important;
}

/* --- Transport (5 buttons: prev, stop, pause, next, more) ------------- */
#rightPanel #player #controls,
#controls {
	order: 4;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 0 4px 0 !important;
	box-sizing: border-box;
	flex-shrink: 0;
}
#rightPanel #player #controls > div,
#controls > div {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s ease;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	flex-shrink: 0;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	background: transparent;
}
#rightPanel #player #controls > div:hover,
#controls > div:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}
#rightPanel #player #controls > div a,
#controls > div a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
}
#rightPanel #player #controls > div i,
#rightPanel #player #controls > div .bi,
#controls > div i,
#controls > div .bi,
#rightPanel #player #controls > div img,
#controls > div img {
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}
#rightPanel #player #controls > div i::before,
#rightPanel #player #controls > div .bi::before,
#controls > div i::before,
#controls > div .bi::before {
	display: inline-block !important;
	line-height: 1 !important;
	vertical-align: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#controls #prev  { order: 1; font-size: 14px; }
#controls #stop  { order: 2; font-size: 14px; }
#rightPanel #player #controls #pause,
#controls #pause {
	order: 3;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	margin: 0 !important;
	background: var(--brand-primary-gradient) !important;
	color: #ffffff !important;
	box-shadow: 0 5px 16px rgba(37, 99, 235, 0.45) !important;
	font-size: 19px !important;
}
#rightPanel #player #controls #pause:hover,
#controls #pause:hover {
	transform: scale(1.06) !important;
	box-shadow: 0 7px 20px rgba(37, 99, 235, 0.6) !important;
}
#rightPanel #player #controls #pause .bi-play-fill,
#controls #pause .bi-play-fill {
	transform: translateX(1.5px) !important;
}
#controls #next  { order: 4; font-size: 14px; }
#controls #player-more,
#controls #more  { order: 5; font-size: 14px; }

/* --- Volume row ------------------------------------------------------- */
/* [mute] [-------- slider --------] [30%] [-] [+]
   Built in TS3MusicBot.js by moving #volumemute/#volume-slider/
   #volume-value/#volumedown/#volumeup into one container. The slider is a
   horizontal jQuery UI slider that is always visible - it used to be a
   vertical popup that faded in on hover and flickered because it overlapped
   the transport buttons next to it. */
#volume-row {
	order: 5;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 4px 2px 8px 2px;
	box-sizing: border-box;
}
#volume-row #volumemute {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 24px;
	height: 24px;
	min-width: 24px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	font-size: 15px;
	color: var(--text-muted);
	background: transparent !important;
	border-radius: 50% !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
}
#volume-row #volumemute:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1) !important;
}
#volume-row #volumemute i,
#volume-row #volumemute .bi {
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
#volume-row #volumemute i::before,
#volume-row #volumemute .bi::before {
	line-height: 1 !important;
	vertical-align: 0 !important;
}
/* Visual Mute States */
#volume-row #volumemute.is-muted,
#volumemute.is-muted {
	color: #ef4444 !important;
	background: rgba(239, 68, 68, 0.16) !important;
}
#volume-row #volumemute.is-muted:hover,
#volumemute.is-muted:hover {
	color: #f87171 !important;
	background: rgba(239, 68, 68, 0.28) !important;
}
#volume-row.is-muted #volume-slider {
	opacity: 0.35 !important;
	filter: grayscale(80%) !important;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
#volume-row.is-muted #volume-value {
	color: #ef4444 !important;
	text-decoration: line-through !important;
	transition: color 0.2s ease;
}
#rightPanel #player #volume-row #volume-slider {
	display: block !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	flex: 1 1 auto !important;
	width: auto !important;
	height: 4px !important;
	min-width: 0 !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: none !important;
	border-radius: 2px !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	z-index: auto !important;
	cursor: pointer;
}
#rightPanel #player #volume-row #volume-slider .ui-slider-range {
	background: var(--text-muted) !important;
	border-radius: 2px !important;
	height: 100% !important;
	top: 0 !important;
	left: 0 !important;
	width: auto !important;
	position: absolute !important;
}
#rightPanel #player #volume-row #volume-slider .ui-slider-handle {
	width: 11px !important;
	height: 11px !important;
	top: 50% !important;
	margin-top: -5.5px !important;
	margin-left: -5.5px !important;
	background: #ffffff !important;
	background-image: none !important;
	border: none !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
	outline: none !important;
	cursor: grab;
	transition: transform 0.15s ease;
}
#rightPanel #player #volume-row #volume-slider:hover .ui-slider-range {
	background: var(--brand-primary) !important;
}
#rightPanel #player #volume-row #volume-slider .ui-slider-handle:hover {
	transform: scale(1.2);
}
#volume-row #volume-value {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	width: 30px;
	flex-shrink: 0;
	text-align: right !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	color: var(--text-dimmed) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	z-index: auto !important;
}
/* Dragging the slider replaced +/- as the visible way to adjust volume, so
   these are hidden rather than styled as buttons. They stay in the DOM and
   keep working: ArrowUp/ArrowDown still call $('#volumeup'/'#volumedown').
   click() for keyboard fine-tuning (see the keydown handler further down),
   which needs the elements to exist and remain bound, just not be shown. */
#volume-row #volumeup,
#volume-row #volumedown {
	display: none !important;
}

[data-bs-theme="light"] #timeline,
[data-bs-theme="light"] #rightPanel #player #volume-row #volume-slider {
	background: rgba(15, 23, 42, 0.12) !important;
}
[data-bs-theme="light"] #rightPanel #player #volume-row #volume-slider .ui-slider-handle {
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Quick Play & TTS
   Input on its own line with the enter-hint as an inline affordance, then
   the four actions as one equal row - play is the only tinted one so it
   reads as primary, instead of four identical blue buttons competing in a
   2x2 grid. The buttons are icon-only by design: their tkey drives the
   tooltip, not a visible label. */
.youtubeBox {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 12px 4px 12px !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}
/* Input group: the field plus the primary action, which buildQuickPlayRow()
   moves inside it as a small gradient send button. */
.youtubeBox .form-group {
	flex: 1 1 100% !important;
	margin: 0 !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: var(--surface-bg-dark) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 10px !important;
	height: 36px !important;
	padding: 0 5px 0 11px !important;
	box-sizing: border-box !important;
}
.youtubeBox .form-group:focus-within {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
.youtubeBox .form-control {
	background: transparent !important;
	border: none !important;
	color: var(--text-main) !important;
	border-radius: 0 !important;
	font-size: 12px !important;
	height: 100% !important;
	padding: 0 !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}
.youtubeBox .form-control:focus {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
/* The enter-hint glyph is redundant once the send button sits in the field. */
.playlinkInputSubmitIcon {
	display: none !important;
}
.youtubeBox .form-group #playyoutube {
	position: static !important;
	flex: 0 0 auto !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	border-radius: 7px !important;
	font-size: 12px !important;
}
/* Icon above label rather than beside it. The mockup put them side by side,
   but that only worked with the short placeholder words it used; the real
   translated strings ("Warteschlange", "Text vorlesen", even "Download")
   are wider than the ~41px a side-by-side layout leaves in a 229px sidebar,
   so every button truncated. Stacking gives the label the button's full
   width and all three languages fit. */
.youtubeBox .btn-player-action {
	/* 1 1 auto, not 1 1 0: equal thirds would still clip the longest label
	   ("Warteschlange"), whereas sizing to content first and sharing the
	   leftover space fits all three and still fills the row. */
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 5px !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	font-size: 12px !important;
	line-height: 1.1 !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--surface-border) !important;
	color: var(--text-muted) !important;
	box-shadow: none !important;
	background-image: none !important;
	overflow: hidden !important;
}
.youtubeBox .btn-player-action i {
	flex-shrink: 0;
	font-size: 13px !important;
}
.qact-label {
	display: block;
	max-width: 100%;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
/* The send button inside the field stays a plain icon square. */
.youtubeBox .form-group #playyoutube {
	flex-direction: row !important;
	height: 26px !important;
	padding: 0 !important;
	gap: 0 !important;
}
.youtubeBox .btn-player-action:hover {
	background: rgba(255, 255, 255, 0.11) !important;
	color: var(--text-main) !important;
	border-color: var(--surface-border-hover) !important;
	transform: none !important;
}
.youtubeBox #playyoutube {
	background: var(--brand-primary-gradient) !important;
	border-color: transparent !important;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32) !important;
}
.youtubeBox #playyoutube:hover {
	background: var(--brand-primary-gradient) !important;
	color: #ffffff !important;
	box-shadow: 0 5px 14px rgba(37, 99, 235, 0.45) !important;
}
.youtubeBox #sayLanguage {
	flex: 1 1 100% !important;
	width: 100% !important;
	margin: 4px 0 0 0 !important;
	background-color: rgba(15, 23, 42, 0.6) !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 10px 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: var(--text-dimmed, #94a3b8) !important;
	border-radius: 8px !important;
	font-size: 11.5px !important;
	height: 32px !important;
	padding: 0 28px 0 10px !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: all 0.2s ease !important;
}
.youtubeBox #sayLanguage:hover,
.youtubeBox #sayLanguage:focus {
	border-color: var(--brand-primary, #3b82f6) !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
/* .form-control (the #playlink text input) is NOT included here: its
   base/dark rule (above, line ~1140) keeps it background:transparent so
   it blends into .youtubeBox .form-group's own pill background - giving
   it a solid card-tier fill here (like #sayLanguage, a real standalone
   select that needs one) instead broke that seamlessness, showing up as
   a visibly different-colored patch inside the pill in light mode only. */
[data-bs-theme="light"] .youtubeBox #sayLanguage {
	background: var(--surface-bg-card) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .youtubeBox .btn-player-action {
	background: rgba(15, 23, 42, 0.04) !important;
	color: #475569 !important;
}
[data-bs-theme="light"] .youtubeBox .btn-player-action:hover {
	background: rgba(15, 23, 42, 0.09) !important;
	color: #0f172a !important;
}

/* The JS injects .download-widget (already a bordered card) into
   .download-status, which style.css also gives a background, border and
   radius - so the widget rendered as a box inside a box. The outer one is
   now just a positioning wrapper; the widget is the only visible surface. */
.download-status {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 12px !important;
	min-height: 0 !important;
}
.download-status .download-info {
	color: var(--text-muted) !important;
	min-height: 0 !important;
}
/* .download-widget's full styling (background/border/radius/padding) lives
   further down under "DOWNLOAD MANAGER WIDGET" - margin-top:0 is
   merged into that block now. This used to duplicate border-radius with a
   different value (10px) that never actually applied, since the later,
   more specific block won on that property regardless. */

/* Download manager: collapse to a single idle line instead of showing an
   empty progress bar and a grid of zeroes when nothing is downloading.
   :has() lets the widget react to its own status badge; where it isn't
   supported the widget just stays in its full form. The badge row itself
   stays in the flow because the "queue" button lives in it. */
.download-widget:has(.dl-status-idle) {
	padding: 9px 11px !important;
}
.download-widget:has(.dl-status-idle) .dl-status-row,
.download-widget:has(.dl-status-idle) .dl-status-badge,
.download-widget:has(.dl-status-idle) .dl-progress-track,
.download-widget:has(.dl-status-idle) .dl-metrics-grid,
.download-widget:has(.dl-status-idle) .dl-footer-bar {
	display: none !important;
}
.download-widget:has(.dl-status-idle) .dl-current-track {
	margin: 0 !important;
	font-size: 11.5px !important;
}
/* Idle line: green tick, label, chevron pushed to the far right. It's a
   disclosure toggle (see applyDownloadWidgetExpandedState in
   TS3MusicBot.js), not just a status readout - clicking it reveals the
   same detail sections a real download shows, all reading zero. */
.dl-idle-line {
	display: flex !important;
	align-items: center !important;
	width: 100%;
	cursor: pointer;
	margin: -4px -3px !important;
	padding: 4px 3px !important;
	border-radius: 6px;
	transition: background 0.15s ease;
}
.dl-idle-line:hover {
	background: rgba(255, 255, 255, 0.05);
}
.dl-idle-line .bi-check-circle-fill {
	color: #22c55e !important;
	font-size: 13px !important;
	flex-shrink: 0;
}
.dl-idle-chev {
	margin-left: auto !important;
	color: var(--text-dimmed) !important;
	font-size: 12px !important;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.download-widget.dl-expanded .dl-idle-chev {
	transform: rotate(90deg);
}

/* Expanded while idle: same sections a live download uses, restored to
   their normal (non-idle) display values since "display: none" from the
   collapse rules above would otherwise still win. */
.download-widget.dl-expanded .dl-status-row {
	display: flex !important;
	margin-top: 8px !important;
}
.download-widget.dl-expanded .dl-status-badge {
	display: inline-block !important;
}
.download-widget.dl-expanded .dl-progress-track {
	display: block !important;
}
.download-widget.dl-expanded .dl-metrics-grid {
	display: grid !important;
}
.download-widget.dl-expanded .dl-footer-bar {
	display: flex !important;
}

/* Feedback Buttons - base .feedbackBox rule (display/gap/padding) is
   declared again, identically, further down; final padding value actually
   used comes from a third, later "Zero Truncation" block still further
   down (search that heading) that intentionally overrides it. */
.feedbackBox .customButton {
	flex: 1;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 6px 8px !important;
	border-radius: 8px !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.feedbackBox .bugReportButton {
	background: rgba(239, 68, 68, 0.15) !important;
	border: 1px solid rgba(239, 68, 68, 0.35) !important;
	color: #fca5a5 !important;
}
.feedbackBox .bugReportButton:hover {
	background: rgba(239, 68, 68, 0.25) !important;
	border-color: #ef4444 !important;
	color: #ffffff !important;
}
.feedbackBox .featureRequestButton {
	background: rgba(245, 158, 11, 0.15) !important;
	border: 1px solid rgba(245, 158, 11, 0.35) !important;
	color: #fde68a !important;
}
.feedbackBox .featureRequestButton:hover {
	background: rgba(245, 158, 11, 0.25) !important;
	border-color: #f59e0b !important;
	color: #ffffff !important;
}

/* 5. Middle Content Area & Search Box Fix */
#content {
	background: var(--surface-bg-dark) !important;
}

/* The .dataTables_filter input search-box styling used to be defined here
   too (background/border/padding/focus), fully redundant with the
   canonical version under "10. Unified Search Input Polish" further down
   - same selector, and that later block always won any tied property
   regardless, so this was dead weight duplicating a subset of it. */

/* Top Navigation Bar */
.topNavigationBar {
	background: rgba(255, 255, 255, 0.02) !important;
	border-bottom: 1px solid var(--surface-border) !important;
	padding: 10px 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}
.topNavigationBar .button {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--surface-border) !important;
	color: var(--text-main) !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	display: inline-flex;
	align-items: center !important;
	gap: 6px !important;
	transition: all 0.2s ease !important;
}
.topNavigationBar .button[style*="display: none"],
.topNavigationBar .button[style*="display:none"] {
	display: none !important;
}
.topNavigationBar .button:hover {
	background: rgba(37, 99, 235, 0.2) !important;
	border-color: var(--surface-border-hover) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* 6. Empty States Enhancement */
.empty-state-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px;
	color: var(--text-muted);
}
.empty-state-card .empty-icon {
	font-size: 52px;
	color: var(--brand-primary);
	opacity: 0.7;
	margin-bottom: 14px;
}
.empty-state-card .empty-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-main);
	margin-bottom: 6px;
}
.empty-state-card .empty-subtitle {
	font-size: 13px;
	color: var(--text-dimmed);
	max-width: 400px;
	line-height: 1.5;
	margin-bottom: 16px;
}
/* DataTables renders the empty row inside a "nowrap" table, so without this
   the subtitle stayed on one 460px line - on phones it widened the table
   past the viewport and pushed the whole card off-center. */
.empty-state-card {
	white-space: normal;
}
.dataTables_empty {
	white-space: normal !important;
}
[data-bs-theme="light"] .media-tag-chip.text-light {
	color: var(--text-main) !important;
	background: rgba(15, 23, 42, 0.06) !important;
	border-color: var(--surface-border) !important;
}

/* 7. Settings Page Polish */
.content-settings .card {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 14px !important;
	padding: 24px 18px !important;
	text-align: center;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.content-settings .card:hover {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: var(--surface-border-hover) !important;
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 15px rgba(59, 130, 246, 0.2);
}
.content-settings .card i,
.content-settings .card svg {
	font-size: 38px !important;
	color: var(--brand-primary) !important;
	margin-bottom: 12px;
	transition: transform 0.25s ease;
	/* Bootstrap Icons use line-height 1.5 and the Font Awesome Discord glyph
	   uses 1, so the Discord card's title sat ~20px higher than its row. */
	line-height: 1 !important;
}
.content-settings .card:hover i,
.content-settings .card:hover svg {
	transform: scale(1.1);
}
.content-settings .card .card-title,
.content-settings .card span {
	color: #f8fafc !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

/* Scroll-collapsed ".min" card (settings.css turns the open card into a
   fixed 140x80px badge once you scroll its section past y:190): the rules
   above apply !important to padding/icon-size/title-size on every
   .content-settings .card unconditionally, which out-ranks settings.css's
   .min-specific compact sizing since that one has no !important of its
   own. The full-size 24px/18px padding and 38px icon never actually
   shrank, so they overflowed and overlapped inside the 80px-tall badge -
   this restores the compact sizing settings.css already intended. */
.content-settings .card.formTitle.min {
	padding: 8px 10px !important;
}
.content-settings .card.formTitle.min i,
.content-settings .card.formTitle.min svg {
	font-size: 20px !important;
	margin-bottom: 0 !important;
}
.content-settings .card.formTitle.min .card-title,
.content-settings .card.formTitle.min span {
	font-size: 12px !important;
}

/* Settings Inner Description Box Polish */
.fields .description {
	background: rgba(37, 99, 235, 0.08) !important;
	border: 1px solid rgba(59, 130, 246, 0.3) !important;
	border-radius: 12px !important;
	color: #cbd5e1 !important;
	font-weight: normal !important;
	padding: 14px 18px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
}

/* Settings Tables & Inputs
   Broadened from ".fields table" to ".content-settings table" - every
   ".fields" table lives inside ".content-settings" anyway (settings.htm,
   advanced.htm), so this is a strict superset that also reaches the one
   plain-Bootstrap table on logs.htm (#debug_settings_row) that sat
   outside any ".fields" wrapper and was getting none of this modern
   treatment - just the hard-cornered legacy box border from
   v2/settings.css's ".content-settings table" rule below. */
/* Replaces v2/settings.css's ".content-settings table { border: 1px solid
   rgba(0,0,0,.125); }" - a flat, hard-cornered Bootstrap-4-era box border
   that reads as an out-of-place 90-degree rectangle against every other
   panel on the page (cards, the logs header, search containers) using a
   12-14px soft radius. The legacy attribute-scoped dark-mode version of
   the same rule (v2/style.css's "[data-theme=dark] .content-settings
   table") forces a flat #000000 border and outranks a bare
   ".content-settings table" by specificity, so it needs its own override
   here too rather than relying on source order alone. */
.content-settings table,
[data-theme="dark"] .content-settings table {
	border: 1px solid var(--surface-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
	margin-bottom: 2rem !important;
}
.content-settings table {
	/* "separate" + zero spacing, NOT "collapse" - border-collapse:collapse
	   makes the table's own border-radius/overflow:hidden (the rounded
	   outer border above) stop clipping/rendering correctly in most
	   browsers, since collapsed cell borders bypass the table element's
	   own border box. "separate" with border-spacing:0 gives the same
	   flush-row look without breaking the rounded container. */
	border-collapse: separate !important;
	border-spacing: 0 !important;
	padding: 0 !important;
}
.content-settings table tr {
	background: rgba(255, 255, 255, 0.02);
}
.content-settings table td {
	padding: 10px 14px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	vertical-align: middle !important;
}
.content-settings table tr:last-child td {
	border-bottom: none !important;
}
.content-settings table td:first-child {
	font-weight: 600 !important;
	color: #f8fafc !important;
}
.fields input[type="text"],
.fields input[type="password"],
.fields textarea,
.fields select {
	background: #0b1120 !important;
	border: 1px solid var(--surface-border) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 13px !important;
	outline: none !important;
}
.fields input[type="text"]:focus,
.fields input[type="password"]:focus,
.fields textarea:focus,
.fields select:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* 8. Command List Polish */
/* The table's .row had both a 30px margin and a near-full width, so its
   right edge (and the table's rounded border) ran 11px past the content
   area and got clipped. */
.content-commands .row {
	width: auto !important;
}
.content-commands .commandlistTable {
	border-collapse: separate !important;
	border-spacing: 0 4px !important;
}
.content-commands .commandlistTable tr {
	background: rgba(255, 255, 255, 0.02) !important;
	transition: background 0.15s ease;
}
.content-commands .commandlistTable tr:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}
.content-commands .commandlistTable td {
	padding: 8px 14px !important;
	border: none !important;
	vertical-align: middle !important;
}
.content-commands .commandlistTable td:first-child {
	border-radius: 8px 0 0 8px !important;
	width: 300px !important;
}
.content-commands .commandlistTable td:last-child {
	border-radius: 0 8px 8px 0 !important;
}
.content-commands code {
	background: rgba(37, 99, 235, 0.15) !important;
	border: 1px solid rgba(59, 130, 246, 0.3) !important;
	color: #93c5fd !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
	font-size: 12px !important;
}
.content-commands .copy-cmd-btn {
	opacity: 0.45 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	transition: all 0.15s ease !important;
	font-size: 11.5px !important;
	padding: 2px 7px !important;
	border-radius: 5px !important;
}
.content-commands .commandlistTable tr:hover .copy-cmd-btn {
	opacity: 0.9 !important;
}
.content-commands .copy-cmd-btn:hover {
	opacity: 1 !important;
	background: var(--brand-primary, #3b82f6) !important;
	border-color: var(--brand-primary, #3b82f6) !important;
	color: #ffffff !important;
}
/* Inline links inside descriptions (e.g. "supported links -> click here")
   inherited the plain body text color and didn't read as links at all. */
.content-commands .commandlistTable td a {
	color: #93c5fd !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
[data-bs-theme="light"] .content-commands .commandlistTable td a {
	color: #1e40af !important;
}
/* Phones: the 300px command column plus the long, unbreakable commands
   ("!addyt/!addyoutube/!addlink/!addurl http...") pushed the description
   column entirely off-screen. Stack each row: command on top, description
   under it. */
@media (max-width: 576px) {
	.content-commands .row {
		margin: 0 10px !important;
		width: auto !important;
	}
	.content-commands .commandlistTable thead {
		display: none !important;
	}
	.content-commands .commandlistTable,
	.content-commands .commandlistTable tbody,
	.content-commands .commandlistTable tr,
	.content-commands .commandlistTable td {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.content-commands .commandlistTable tr {
		border-radius: 10px !important;
		margin-bottom: 6px !important;
	}
	.content-commands .commandlistTable td:first-child,
	.content-commands .commandlistTable td:last-child {
		border-radius: 0 !important;
	}
	.content-commands .commandlistTable td:first-child {
		padding: 10px 12px 6px !important;
	}
	.content-commands .commandlistTable td:last-child {
		padding: 0 12px 10px !important;
		font-size: 12.5px;
	}
	.content-commands code {
		white-space: normal !important;
		word-break: break-all !important;
	}
	.content-commands .copy-cmd-btn {
		opacity: 0.8 !important;
	}
}


/* 9. Empty States & Alerts Modernization */
.alert-primary, .alert-info {
	background: rgba(30, 41, 59, 0.4) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 14px !important;
	color: var(--text-muted) !important;
	padding: 36px 20px !important;
	text-align: center !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.content-queue .alert-primary::before {
	content: "\F28C";
	font-family: "bootstrap-icons" !important;
	display: block;
	font-size: 46px;
	margin-bottom: 12px;
	color: var(--brand-primary);
	opacity: 0.8;
}

.content-history .alert-primary::before {
	content: "\F293";
	font-family: "bootstrap-icons" !important;
	display: block;
	font-size: 46px;
	margin-bottom: 12px;
	color: var(--brand-primary);
	opacity: 0.8;
}

.content-channelswitch .alert::before {
	content: "\f40d";
	font-family: "bootstrap-icons" !important;
	display: block;
	font-size: 46px;
	margin-bottom: 12px;
	color: #ef4444;
	opacity: 0.8;
}

.dataTables_empty {
	text-align: center !important;
	padding: 90px 20px !important;
	color: var(--text-muted) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	background: transparent !important;
}
.dataTables_empty::before {
	content: "\F4A5";
	font-family: "bootstrap-icons" !important;
	display: block;
	font-size: 48px;
	margin-bottom: 12px;
	color: var(--brand-primary);
	opacity: 0.7;
}

/* 10. Unified Search Input Polish
   #search_input and #channelswitch-search never matched anything (the
   real ids are #commandListSearch and #channelSwitchSearch, camelCase) -
   dead selectors sitting here for who knows how long. Replaced with the
   ids that actually exist, and added #channelSwitchPw and
   #commandListSearch's clear-button sibling to the same family: these,
   plus #historyLiveSearch, share one markup pattern (icon + input +
   optional clear button, in a dark-glass toolbar div) and were getting
   NO css at all before this - not even the base rule, so they had zero
   focus indicator (the inline style="outline:none; box-shadow:none;" in
   their markup went completely uncontested). */
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input,
#historyLiveSearch,
#commandListSearch,
#channelSwitchSearch,
#channelSwitchPw {
	background-color: #0b1120 !important;
	border: 1px solid var(--surface-border) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	font-size: 12.5px !important;
	outline: none !important;
	transition: all 0.2s ease !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_filter input:focus,
#historyLiveSearch:focus,
#commandListSearch:focus,
#channelSwitchSearch:focus,
#channelSwitchPw:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* 11. Channel Chat Widget: full styling lives further down under "Modern
   CHANNEL CHAT WIDGET MODERNIZATION" - this was the original minimal pass,
   fully superseded (radius, shadow, position, sizing, theme awareness) by
   that later block. */

/* 12. Settings Table Headers */
.content-settings table th {
	color: var(--brand-primary) !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-bottom: 2px solid var(--surface-border) !important;
	padding: 12px 14px !important;
}


/* ==========================================================================
   UI POLISH ENGINE: FULL-SPECTRUM REFINEMENT
   ========================================================================== */

/* 1. Login Page Modern Glassmorphism */
body.text-center {
	background: radial-gradient(circle at 50% 20%, #1e293b 0%, #070a12 100%) !important;
	min-height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

body.text-center .form-signin {
	max-width: 400px !important;
	width: 92% !important;
	background: rgba(15, 23, 42, 0.75) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 20px !important;
	padding: 40px 32px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.15) !important;
	margin: 0 auto !important;
}

body.text-center .form-signin h1 {
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -0.3px !important;
	color: #f8fafc !important;
	margin-bottom: 24px !important;
}

body.text-center .form-floating {
	margin-bottom: 8px !important;
}

body.text-center .form-floating > .form-control {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	color: #ffffff !important;
	font-size: 15px !important;
	padding: 14px 16px !important;
	height: 54px !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.text-center .form-floating > .form-control:focus {
	border-color: #3b82f6 !important;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25) !important;
}

body.text-center .form-floating > label {
	color: #94a3b8 !important;
	font-size: 14px !important;
	padding: 14px 16px !important;
}

body.text-center #togglePasswordBtn {
	color: #94a3b8 !important;
	transition: color 0.2s ease !important;
}
body.text-center #togglePasswordBtn:hover {
	color: #ffffff !important;
}

body.text-center button[type="submit"] {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
	border: none !important;
	border-radius: 12px !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 14px !important;
	margin-top: 18px !important;
	box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.text-center button[type="submit"]:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important;
}

body.text-center .text-muted {
	color: #64748b !important;
	font-size: 12px !important;
}

/* 2. Media Browser Top Bar & Results Refinement
   Matches the plain .topNavigationBar pattern used everywhere else (e.g.
   index.htm's Bearbeiten/Wiedergabeliste/... bar): one flex row that wraps
   onto as many lines as it needs, natural-width buttons, no horizontal
   scroll. .media-tabs-wrapper is only a markup grouping for the source
   buttons - display:contents takes it out of the box model so those
   buttons and the search box all wrap together in one flat flex context,
   identical to how the standard toolbar buttons wrap. */
.media-browser-navbar,
.media-browser-navbar.topNavigationBarFixed {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 10px 14px !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px !important;
}

.media-browser-navbar .media-tabs-wrapper {
	display: contents !important;
}

.media-browser-navbar .button {
	cursor: pointer !important;
	float: none !important;
	width: fit-content !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 20px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #cbd5e1 !important;
	transition: all 0.2s ease !important;
}

.media-browser-navbar .button:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--surface-border-hover) !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

.media-browser-navbar .button.active,
.media-browser-navbar .button:has(> span[style*="underline"]) {
	background: rgba(37, 99, 235, 0.2) !important;
	border-color: rgba(59, 130, 246, 0.5) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px rgba(59, 130, 246, 0.3) !important;
}
/* TS3MusicBot.js marks the selected source by setting an inline
   text-decoration: underline on its label (~20 call sites) and never adds
   .active - so the only cue was an underlined word inside an otherwise
   identical pill. The :has() rule above turns that marker into the real
   active pill; drop the underline itself. */
.media-browser-navbar .button > span[style*="underline"] {
	text-decoration: none !important;
}

.media-browser-navbar .media-search-box {
	position: static !important;
	flex: 0 0 220px !important;
	width: 220px !important;
	max-width: 100% !important;
	margin-left: auto !important;
	display: block !important;
}

.media-browser-navbar .media-search-box input {
	width: 100% !important;
	min-width: 0 !important;
	background: #0b1120 !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 20px !important;
	padding: 6px 14px !important;
	font-size: 12.5px !important;
	color: #ffffff !important;
	outline: none !important;
	transition: all 0.2s ease !important;
}

.media-browser-navbar .media-search-box input:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Video Results Grid */
#video-results {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 16px !important;
	padding: 16px 8px !important;
}

.media-browser-card {
	float: none !important;
	margin: 0 !important;
	width: 100% !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.media-browser-card:hover {
	transform: translateY(-4px) !important;
	border-color: var(--surface-border-hover) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(59, 130, 246, 0.15) !important;
}

.media-browser-card img.card-img-top {
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	transition: opacity 0.2s ease !important;
}

.media-browser-card .duration {
	background: rgba(0, 0, 0, 0.82) !important;
	backdrop-filter: blur(4px) !important;
	border-radius: 6px !important;
	padding: 2px 6px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #f8fafc !important;
	bottom: 6px !important;
	right: 6px !important;
}

.media-browser-card .card-body {
	padding: 12px 14px !important;
}

.media-browser-card .card-title {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	max-height: 38px !important;
	overflow: hidden !important;
	color: #f8fafc !important;
	margin-bottom: 6px !important;
}

.media-browser-card .card-text {
	color: #94a3b8 !important;
	font-size: 11.5px !important;
	margin-bottom: 12px !important;
}

.media-browser-card .card-text a {
	color: #60a5fa !important;
	word-break: break-all;
}

.media-browser-card button {
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 6px 12px !important;
}

/* 3. Settings Restart & Control Buttons Polish */
.settings-restart-buttons {
	position: fixed !important;
	top: 76px !important;
	right: 285px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	z-index: 10 !important;
}

.settings-restart-buttons div {
	width: auto !important;
	min-width: 60px !important;
	height: auto !important;
	padding: 5px 10px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	white-space: nowrap !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer !important;
}

.settings-restart-buttons div:hover {
	transform: translateY(-2px) !important;
}

.settings-restart-buttons div i {
	font-size: 13px !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.settings-restart-buttons div span {
	font-size: 10px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	line-height: 1.2 !important;
}

#settings_player_restart,
#settings_client_restart,
#settings_reload_restart {
	background: rgba(37, 99, 235, 0.2) !important;
	border: 1px solid rgba(59, 130, 246, 0.4) !important;
	color: #93c5fd !important;
}
#settings_player_restart:hover,
#settings_client_restart:hover,
#settings_reload_restart:hover {
	background: rgba(37, 99, 235, 0.35) !important;
	border-color: #3b82f6 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

#settings_bot_restart {
	background: rgba(245, 158, 11, 0.2) !important;
	border: 1px solid rgba(245, 158, 11, 0.4) !important;
	color: #fde68a !important;
}
#settings_bot_restart:hover {
	background: rgba(245, 158, 11, 0.35) !important;
	border-color: #f59e0b !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

#settings_bot_shutdown {
	background: rgba(239, 68, 68, 0.2) !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
	color: #fca5a5 !important;
}
#settings_bot_shutdown:hover {
	background: rgba(239, 68, 68, 0.35) !important;
	border-color: #ef4444 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.save-all-settings {
	position: fixed !important;
	top: 76px !important;
	left: 255px !important;
	z-index: 10 !important;
	border-radius: 8px !important;
	padding: 6px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
	transition: all 0.2s ease !important;
}
.save-all-settings:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5) !important;
}

/* #backArrow's real definition lives further down (search "Settings Back
   Button"); this used to be an earlier, different design (gradient circle
   floating outside the card's top-left corner) that the later block fully
   superseded property-for-property once specificity/order made it win -
   removed rather than left as dead weight. */

/* Logs page header bar: replaces a hand-rolled inline-styled translucent
   bar (background: rgba(...,0.7) + backdrop-filter: blur) and a generic
   Bootstrap .badge with the app's actual card treatment. The blur let the
   sticky Logs/DEBUG tab bar above it show through and collide visually
   once the page scrolled - a solid surface background reads as a proper
   section header instead of a translucent strip fighting the nav above
   it. Markup: logs.htm's #logs_row, class .logs-header. */
.logs-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	background: var(--surface-bg-card) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 14px !important;
	padding: 14px 18px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.logs-header-title {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--text-main) !important;
}
.logs-header-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px !important;
	background: rgba(59, 130, 246, 0.15) !important;
	color: #60a5fa !important;
	font-size: 16px !important;
	flex-shrink: 0 !important;
}

/* The skin and cover art browsers (43 miniatures of the whole web interface, about 95
   cover arts): the browser skips drawing the cards that are off screen, and any animation
   in them stays paused (.is-offscreen, set by watchOnScreen() in TS3MusicBot.js). */
#settingsModalBody .skin-mini {
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}
#settingsModalBody .cover-art-card-item {
	content-visibility: auto;
	contain-intrinsic-size: auto 570px;
}
.skin-mini.is-offscreen *,
.skin-mini.is-offscreen *::before,
.skin-mini.is-offscreen *::after,
.cover-art-card-item.is-offscreen *,
.cover-art-card-item.is-offscreen *::before,
.cover-art-card-item.is-offscreen *::after {
	animation-play-state: paused !important;
}

/* The bot's diagnosis (Logs page, tab "Diagnosis", js/diagnose.js): findings
   as tinted rows (danger / warning / info, the skin's surface below), the
   details as a two-column table, then the report for the support. */
#diagnose_row .diag-intro {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0 0 14px;
}
.diag-message,
.diag-finding {
	--diag-tone: var(--text-muted, #94a3b8);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid color-mix(in srgb, var(--diag-tone) 45%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--diag-tone) 12%, var(--surface-bg-card, transparent));
	color: var(--text-main);
	margin-bottom: 10px;
}
.diag-message > i,
.diag-finding > i {
	color: var(--diag-tone);
	font-size: 18px;
	line-height: 1.3;
	flex-shrink: 0;
}
.diag-message--ok { --diag-tone: color-mix(in srgb, #4ade80 78%, var(--sk-a1, var(--brand-primary, #4ade80))); }
.diag-message--danger,
.diag-finding--danger { --diag-tone: color-mix(in srgb, #f87171 82%, var(--sk-a1, var(--brand-primary, #f87171))); }
.diag-message--warning,
.diag-finding--warning { --diag-tone: color-mix(in srgb, #fbbf24 82%, var(--sk-a1, var(--brand-primary, #fbbf24))); }
.diag-finding--info { --diag-tone: color-mix(in srgb, #60a5fa 82%, var(--sk-a1, var(--brand-primary, #60a5fa))); }
.diag-findings {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
}
.diag-finding-body {
	min-width: 0;
}
.diag-finding-title {
	font-weight: 700;
	margin-bottom: 2px;
}
.diag-finding-body p {
	margin: 0;
	font-size: 14px;
	overflow-wrap: anywhere;
}
.diag-details {
	background: var(--surface-bg-card);
	border: 1px solid var(--surface-border);
	border-radius: 14px;
	padding: 12px 16px 4px;
	margin: 8px 0 18px;
	overflow-x: auto;
}
.diag-details-title {
	font-weight: 700;
	color: var(--text-main);
	margin-bottom: 6px;
}
.diag-table {
	margin-bottom: 8px;
	font-size: 14px;
}
.diag-table th {
	width: 38%;
	font-weight: 600;
	color: var(--text-muted);
}
.diag-table td {
	overflow-wrap: anywhere;
}
.diag-support p {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 8px;
}
.diag-report {
	margin-top: 10px;
}
.diag-report summary {
	cursor: pointer;
	color: var(--text-muted);
	font-size: 13px;
}
.diag-report pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 12px;
	margin: 8px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-dark, rgba(0, 0, 0, 0.2));
	color: var(--text-main);
}
@media (max-width: 576px) {
	.diag-table th {
		width: 45%;
	}
}

/* 4. Terminal & Log Viewer Console */
.fileboxTitle {
	background: rgba(30, 41, 59, 0.5) !important;
	border: 1px solid var(--surface-border) !important;
	border-bottom: none !important;
	border-radius: 12px 12px 0 0 !important;
	padding: 10px 16px !important;
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #94a3b8 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
}
.fileboxTitle:hover {
	background: rgba(30, 41, 59, 0.75) !important;
	border-color: var(--surface-border-hover) !important;
}
.fileboxTitle::before {
	content: "\f38b" !important;
	font-family: "bootstrap-icons" !important;
	color: #60a5fa !important;
	font-size: 14px !important;
	margin-right: 10px !important;
}

.fileboxTitle .copylog,
.fileboxTitle .removelog {
	font-size: 16px !important;
	opacity: 0.75 !important;
	transition: opacity 0.2s ease, color 0.2s ease !important;
}
.fileboxTitle .copylog:hover {
	opacity: 1 !important;
	color: #3b82f6 !important;
}
.fileboxTitle .removelog:hover {
	opacity: 1 !important;
	color: #ef4444 !important;
}

.logfilebox {
	background: #070a12 !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 0 0 12px 12px !important;
	padding: 14px 18px !important;
	font-family: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace !important;
	font-size: 12px !important;
	line-height: 1.65 !important;
	color: #e2e8f0 !important;
	max-height: 400px !important;
	overflow-y: auto !important;
	white-space: pre-wrap !important;
	word-break: break-all !important;
	box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7) !important;
	margin-bottom: 24px !important;
}

/* 5. Update Release Manager Polish
   #updates_row is a separate, higher-specificity (ID) rule set from the
   generic ".content-settings table" family below, styling update.htm's
   package tables specifically - it never got the same row-gap-to-divider
   fix, so it kept the old border-spacing gap (exposing the page bg
   between rows, right up against the outer rounded border) even after
   ".content-settings table" was fixed. Same treatment applied here: flush
   rows, thin divider between them instead of a gap. */
#updates_row table {
	/* "separate", not "collapse" - see the same note on
	   ".content-settings table" above; collapse breaks this table's
	   rounded outer border too. */
	border-collapse: separate !important;
	border-spacing: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

#updates_row table tr {
	background: rgba(255, 255, 255, 0.02) !important;
	transition: background 0.2s ease !important;
}
#updates_row table tr:hover {
	background: rgba(255, 255, 255, 0.05) !important;
}

#updates_row table td,
#updates_row table th {
	padding: 12px 16px !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #e2e8f0 !important;
	vertical-align: middle !important;
}
#updates_row table tr:last-child td {
	border-bottom: none !important;
}

#updates_row table th {
	color: var(--brand-primary) !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* The Java backend marks the installed-version cell ".text-danger" (it's
   outdated) and the latest-version cell ".text-success" - the generic
   "#updates_row table td { color: #e2e8f0 !important; }" above has higher
   specificity than plain ".text-danger"/".text-success" (ID beats class,
   both !important), so it was silently flattening both to the same grey
   and hiding the red/green outdated-vs-latest signal entirely. */
#updates_row table td.text-danger {
	color: #ef4444 !important;
}
#updates_row table td.text-success {
	color: #22c55e !important;
}

#updates_row .alert {
	border-radius: 12px !important;
	background: rgba(245, 158, 11, 0.12) !important;
	border: 1px solid rgba(245, 158, 11, 0.35) !important;
	color: #fde68a !important;
	padding: 14px 20px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-align: center !important;
	margin-bottom: 20px !important;
}

.show-version-history-button,
.do-update-button {
	border-radius: 10px !important;
	font-weight: 600 !important;
	padding: 10px 24px !important;
	margin: 8px auto !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
	transition: all 0.2s ease !important;
}

#leftPanel .nav-link.active[href="update.htm"] {
	color: #ffffff !important;
}
/* The icon/span case for this same link is covered by the grouped
   "Left Panel Active Link Contrast" selector further down (identical
   color value; was declared twice). */

/* 7. Volume + timeline styling now lives in section 4 (the hero deck).
   This block used to define the vertical hover popup and its floating
   percentage badge; both were replaced by the always-visible inline
   #volume-row, so the rules here were dead and only risked re-entering
   the specificity fight. */

/* 8. Modern Feedback Buttons (No Truncation) */
.feedbackBox {
	display: flex !important;
	gap: 6px !important;
	padding: 0 4px 10px 4px !important;
}

.feedbackBox .customButton {
	flex: 1 1 50% !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 6px 4px !important;
	border-radius: 8px !important;
	text-align: center !important;
	white-space: nowrap !important;
	letter-spacing: -0.2px !important;
}

/* Clean Empty State Without Slicing Border */
table.dataTable.no-footer {
	border-bottom: none !important;
}
.dataTables_empty {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   PINPOINT REFINEMENTS
   ========================================================================== */

/* 1. Login Page Floating Label Fix */
body.text-center .form-floating > label,
body.text-center .form-floating > label::after {
	background-color: transparent !important;
	background: transparent !important;
	color: #94a3b8 !important;
}
body.text-center .form-floating > .form-control:focus ~ label,
body.text-center .form-floating > .form-control:not(:placeholder-shown) ~ label {
	color: #60a5fa !important;
	background-color: transparent !important;
	background: transparent !important;
	transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem) !important;
}

/* 2. Settings Spacing & Zero Overlap */
#settingsLiveSearchContainer {
	margin-top: 56px !important;
	margin-bottom: 0 !important;
	/* Same 18px gutter as the category card grid below it, instead of
	   running edge to edge into both side panels. */
	margin-left: 18px !important;
	margin-right: 18px !important;
	position: relative !important;
	z-index: 5 !important;
}

.save-all-settings {
	position: fixed !important;
	top: 76px !important;
	left: 255px !important;
	z-index: 15 !important;
	height: 38px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	line-height: 1 !important;
}

/* 3. Log Box Header Layout & Float Fix */
.fileboxTitle {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	clear: both !important;
	margin-top: 18px !important;
	position: relative !important;
}
.fileboxTitle .copylog,
.fileboxTitle .removelog {
	float: none !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	margin-left: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
}
.fileboxTitle .copylog {
	margin-left: auto !important;
}

/* 4. Top Action Toolbar & Table Clean-Up */
.topNavigationBar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	padding: 10px 14px !important;
	min-height: 52px !important;
}

.topNavigationBar .dataTables_filter {
	position: static !important;
	margin-left: auto !important;
	float: none !important;
}

/* Eliminate horizontal slicing line across empty tables */
table.dataTable,
table.dataTable.no-footer,
table.filebox,
.dataTables_wrapper {
	border-bottom: none !important;
	border-top: none !important;
	box-shadow: none !important;
}
table.dataTable thead,
table.dataTable thead th {
	border-bottom: none !important;
}
table.dataTable tbody tr,
table.dataTable tbody td {
	border: none !important;
}

/* 5. Left Panel Active Link Contrast */
#leftPanel .nav-link.active .updateAvailable,
#leftPanel .nav-link.active[href="update.htm"] span,
#leftPanel .nav-link.active[href="update.htm"] i {
	color: #ffffff !important;
}


/* -------------------------------------------------------------
   Comprehensive UI Polish & Bug Fixes
   ------------------------------------------------------------- */

/* Fix Channel Switch Double Icon Bug: Suppress pseudo-element when empty card is used */
.content-channelswitch .alert.enhanced-empty-state::before,
.content-channelswitch .empty-state-card::before,
.content-channel_switch .alert.enhanced-empty-state::before,
.content-channel_switch .empty-state-card::before {
	display: none !important;
}

/* Eliminate horizontal border lines slicing through empty states */
[data-theme="dark"] table.dataTable.no-footer,
[data-theme="dark"] table.dataTable,
table.dataTable.no-footer,
table.dataTable,
table.filebox {
	border-bottom: none !important;
	border-top: none !important;
}

.dataTables_empty::before {
	display: none !important;
}

.dataTables_empty {
	padding: 60px 20px !important;
	border: none !important;
	background: transparent !important;
}
/* The <td> above was already transparent, but its parent <tr> still got
   the .odd/.even zebra-striping treatment (a lone empty-state row is
   always "odd") - a solid card-tier box showing straight through it. A
   "no results" placeholder isn't tabular data and shouldn't stripe at
   all; higher specificity than the plain .odd/.even rules (tag + class +
   :has, not just class) so this wins regardless of theme. */
tr.odd:has(> .dataTables_empty),
tr.even:has(> .dataTables_empty) {
	background: transparent !important;
}

/* Top Navigation Bar: Smooth flex layout without awkward button wrap */
.topNavigationBar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	min-height: 48px !important;
}

.topNavigationBar .button {
	padding: 5px 11px !important;
	font-size: 11.5px !important;
	gap: 5px !important;
	border-radius: 7px !important;
	white-space: nowrap !important;
}

.dataTables_wrapper .dataTables_filter,
.topNavigationBar .dataTables_filter {
	position: relative !important;
	margin-left: auto !important;
	float: right !important;
	display: flex !important;
	align-items: center !important;
	margin-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_filter label,
.topNavigationBar .dataTables_filter label {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	margin-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_filter label::before,
.topNavigationBar .dataTables_filter label::before {
	content: "\F52A";
	font-family: "bootstrap-icons" !important;
	position: absolute !important;
	left: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 13px !important;
	color: #64748b !important;
	pointer-events: none !important;
	z-index: 2 !important;
}
.dataTables_wrapper .dataTables_filter input,
.topNavigationBar .dataTables_filter input {
	width: 220px !important;
	min-width: 180px !important;
	padding-left: 32px !important;
	height: 33px !important;
	background-color: rgba(15, 23, 42, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-size: 12.5px !important;
	transition: all 0.2s ease !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.topNavigationBar .dataTables_filter input:focus {
	border-color: var(--brand-primary, #3b82f6) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
	/* No background override here anymore: this used to hardcode a dark
	   navy fill (rgba(15,23,42,0.9)) unconditionally on focus, with no
	   light-theme counterpart - fine on the dark theme this was written
	   for (barely different from the base fill), but in light mode it
	   replaced the light input background with a near-black one the
	   instant you clicked in, which is the "gets dark on focus" bug.
	   The base background (themed separately below) already persists
	   through :focus with nothing here to override it. */
}

/* Right Panel Feedback Buttons: Zero Truncation */
.feedbackBox {
	display: flex !important;
	gap: 6px !important;
	padding: 6px 10px !important;
	height: auto !important;
	min-height: 38px !important;
}

.feedbackBox .bugReportButton,
.feedbackBox .featureRequestButton {
	flex: 1 1 50% !important;
	width: auto !important;
	min-width: 0 !important;
	font-size: 10px !important;
	padding: 6px 4px !important;
	line-height: 1.15 !important;
	white-space: normal !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Logs Page: Keep Remove All Log Files cleanly inside toolbar header */
#removeAllLogFiles {
	position: static !important;
	top: auto !important;
	right: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
}

.logfilebox {
	overflow-wrap: anywhere !important;
	word-break: break-all !important;
}

.logfilebox a.log-link {
	color: #38bdf8 !important;
	text-decoration: underline !important;
	word-break: break-all !important;
}

/* Settings Back Button: Integrated into Card Header
   font-size and overflow used to be unset here, so a leftover style.css/v2
   rule's font-size:50px (meant for the old, much bigger floating-circle
   version of this button) kept applying underneath - a 50px glyph forced
   into a 34px circle with nothing clipping the overflow. That old rule has
   been removed; this now sets its own icon size explicitly rather than
   depending on whatever happened to be left uncontested. */
#backArrow {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	font-size: 16px !important;
	line-height: 1 !important;
	overflow: hidden !important;
	background: rgba(37, 99, 235, 0.2) !important;
	border: 1px solid rgba(59, 130, 246, 0.4) !important;
	border-radius: 50% !important;
	color: #93c5fd !important;
	cursor: pointer !important;
	box-shadow: 0 0 12px rgba(59, 130, 246, 0.25) !important;
	transition: all 0.2s ease !important;
	z-index: 10 !important;
}

#backArrow:hover {
	background: rgba(37, 99, 235, 0.4) !important;
	color: #ffffff !important;
	transform: scale(1.08) !important;
	box-shadow: 0 0 16px rgba(59, 130, 246, 0.5) !important;
}


/* Extension Store Badges and Download Cards */
.store-badge-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--surface-border);
	border-radius: 12px;
	padding: 8px 18px;
	transition: all 0.25s ease;
	text-decoration: none;
}

.store-badge-card:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--brand-primary);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.store-badge-img {
	height: 48px;
	border-radius: 6px;
	transition: transform 0.2s;
}

#video-results {
	margin-top: 15px !important;
}

/* ==========================================================================
   LIGHT THEME: Token Overrides & Component Fixes
   Applies whenever data-bs-theme="light" (dark-mode switch is off).
   Keeps the terminal/log console and floating overlays intentionally dark
   for contrast, mirrors every other surface into a soft, legible theme -
   originally an almost-pure-white palette (#ffffff cards/sidebar on
   #eef2f7/#f8fafc), which read as glaring rather than "light and airy."
   Every tier here is now an off-white/soft-gray instead of stark white,
   the same layered-surface approach as the dark theme just shifted up in
   lightness instead of collapsing the whole UI onto one flat white. */
[data-bs-theme="light"] {
	/* First pass here (#e4e7ec/#edf0f4/#f7f8fa/#f2f4f7) was still 93-97%
	   lightness - technically not literal #ffffff, but close enough to
	   read as flat white on a real monitor, which is exactly what this
	   was supposed to fix. Rebuilt as an actual lighter version of the
	   dark theme instead: same blue-slate hue as --surface-bg-darker
	   #090d16 / --surface-bg-card #1e293b above, mirrored to high
	   lightness with real, visible saturation rather than "white plus a
	   whisper of tint." Second pass: still read as "gray" more than
	   "blue" and a touch too bright (~82-92% lightness, ~22-26%
	   saturation) - pushed both further this time, same 217deg hue as
	   --brand-primary, saturation up around 28-32% and lightness down
	   roughly 10 points across every tier, so the blue is actually
	   legible instead of reading as a hue only a color picker would
	   confirm is there. */
	--surface-bg-darker: #a1b2ce;
	--surface-bg-dark: #b3c0d6;
	--surface-bg-card: #cbd4e2;
	--surface-bg-sidebar: #acbbd2;
	--surface-border: rgba(15, 23, 42, 0.18);
	--surface-border-hover: rgba(37, 99, 235, 0.5);
	--text-main: #0f172a;
	--text-muted: #3f4c5f;
	--text-dimmed: #5b6b81;
}

/* 1b. Table/DataTables row striping - v2/style.css's row-color rules
   (.odd/.even, the --bs-table-* variables, #content table td borders) are
   all scoped to the legacy [data-theme="dark"] attribute (not
   [data-bs-theme], the toggle this app actually uses - see the compose
   footer/chat fix earlier for the same attribute-mismatch trap) with no
   light-mode equivalent at all. #content's own background already picks
   up the theme correctly; every DataTables-rendered list (the music
   library, playlists, history, queue...) sits on top of it in a plain
   <table>, and without an override here that table falls back to
   DataTables' own bundled default row color (~#f9f9f9) - a stark white
   slab in the middle of the now-blue page precisely because it was never
   themed at all, dark or light, by anything of ours. */
[data-bs-theme="light"] #content {
	/* Matches --surface-bg-sidebar (the same tone #header/#leftPanel/
	   #rightPanel use below), not the --surface-bg-dark it first tried:
	   dark mode's #content background actually resolves to --color-bg-card
	   via an old, higher-specificity [data-theme="dark"] rule further down
	   in v2/style.css (attribute selector + ID out-specifies this file's
	   bare #content, so it wins even though custom.css loads later) -
	   meaning content sits on a visibly DIFFERENT, lighter tier than the
	   chrome around it even in dark mode. That gap is real but reads as
	   "seamless" there purely because it's dark; the same or even a
	   smaller gap is much more perceptible at these lightness levels
	   (contrast sensitivity scales with relative, not absolute,
	   luminance). Matching content to the chrome tone exactly removes the
	   seam instead of chasing a "correct enough" gap size; elevated cards
	   still stand out against it via --surface-bg-card, a full tier up. */
	background-color: var(--surface-bg-sidebar) !important;
}
[data-bs-theme="light"] .odd {
	background-color: var(--surface-bg-card) !important;
}
[data-bs-theme="light"] .even {
	background-color: var(--surface-bg-dark) !important;
}
[data-bs-theme="light"] table {
	--bs-table-bg: var(--surface-bg-dark);
	--bs-table-striped-bg: var(--surface-bg-card);
	--bs-table-striped-color: var(--text-main);
	--bs-table-hover-bg: var(--surface-bg-card);
	--bs-table-hover-color: var(--text-main);
	color: var(--text-main) !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] #content table td,
[data-bs-theme="light"] table td {
	border-color: var(--surface-border) !important;
}

/* 2. Header */
[data-bs-theme="light"] #header {
	/* Matches #leftPanel/#rightPanel/#content's shared --surface-bg-sidebar
	   tone (see the #content comment above) instead of the brighter
	   --surface-bg-card - mirrors dark mode, where the header is
	   hardcoded to the exact same #0b1120 the side panels use. */
	background: var(--surface-bg-sidebar) !important;
	border-bottom: 1px solid var(--surface-border) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-bs-theme="light"] #header #title h1 {
	color: #0f172a !important;
	text-shadow: none !important;
}
[data-bs-theme="light"] #header #webinterface-switcher {
	color: var(--text-muted) !important;
}
/* #header #userlevel and #header-client-name used to be independent boxed
   pills before the status-rail redesign, each with their own light-mode
   background/border override here. #userlevel's box is now `.header-userlevel`
   (styled once, near its base rule, via a CSS var token so it doesn't need a
   theme-specific override at all) and #header-client-name is deliberately
   plain text in the rail (its color already comes from `var(--text-main)`,
   which flips correctly with the theme on its own). Leaving these two-ID
   selectors in place after the redesign meant they outranked the new
   `.header-userlevel` class rule on specificity alone and silently
   reintroduced a boxed pill around the client name in light mode only -
   removed. */
[data-bs-theme="light"] #header-info,
[data-bs-theme="light"] #header-status-rail #header-info,
[data-bs-theme="light"] .header-query-label {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	color: var(--text-muted) !important;
}

/* 3. Left Navigation Sidebar */
[data-bs-theme="light"] #leftPanel .nav-pills .nav-link:hover {
	background: transparent !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] #leftPanel .nav-pills .nav-link:hover .bi {
	background: rgba(37, 99, 235, 0.1) !important;
	color: var(--brand-primary) !important;
}
[data-bs-theme="light"] #leftPanel #language {
	background-color: var(--surface-bg-card) !important;
	color: #0f172a !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] #leftPanel #dark-mode-menu-switch .form-check-input {
	background-color: rgba(15, 23, 42, 0.15);
	border-color: rgba(15, 23, 42, 0.2);
}
[data-bs-theme="light"] #leftPanel .webStreamButton,
[data-bs-theme="light"] #leftPanel .soundStreamButton {
	background: rgba(15, 23, 42, 0.02) !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
[data-bs-theme="light"] #leftPanel .webStreamButton:hover,
[data-bs-theme="light"] #leftPanel .soundStreamButton:hover {
	background: rgba(37, 99, 235, 0.06) !important;
}

/* 4. Right Player Deck */
[data-bs-theme="light"] #rightPanel #player {
	background: rgba(15, 23, 42, 0.02);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
[data-bs-theme="light"] #cover {
	background: var(--surface-bg-dark);
}
[data-bs-theme="light"] #timeline {
	background: rgba(15, 23, 42, 0.1) !important;
}
[data-bs-theme="light"] #topcontrols > div:hover {
	color: #0f172a;
	background: rgba(15, 23, 42, 0.06);
}
/* Transparent at rest in both themes for the same reason as the left-nav
   icons (see "Hover never fills the whole row" above) - only #pause (the
   gradient button) should have a visible fill when idle. This used to give
   light mode a resting 0.05 tint the whole time while dark mode stayed
   fully transparent, an inconsistency between themes with no intentional
   reason behind it. */
[data-bs-theme="light"] #controls > div:hover {
	color: #0f172a;
	background: rgba(15, 23, 42, 0.1);
}
/* Volume popup and time badges stay dark-glass in both themes, like the
   tooltips and terminal - a floating overlay reads fine regardless of page
   theme and it keeps the player deck visually consistent either way. */

[data-bs-theme="light"] .nowPlaying {
	background: rgba(15, 23, 42, 0.03);
}
[data-bs-theme="light"] .youtubeBox {
	background: rgba(15, 23, 42, 0.02) !important;
}
/* Same reasoning as the first .form-control/#sayLanguage split above:
   this was the actual rule winning the cascade (later in the file, same
   selector/specificity), so this is the one that was really giving
   #playlink its own solid patch of color inside the .form-group pill. */
[data-bs-theme="light"] .youtubeBox #sayLanguage {
	background: var(--surface-bg-card) !important;
	border: 1px solid var(--surface-border) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .feedbackBox .bugReportButton {
	background: rgba(239, 68, 68, 0.08) !important;
	color: #991b1b !important;
}
[data-bs-theme="light"] .feedbackBox .bugReportButton:hover {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #ffffff !important;
}
[data-bs-theme="light"] .feedbackBox .featureRequestButton {
	background: rgba(217, 119, 6, 0.1) !important;
	color: #92400e !important;
}
[data-bs-theme="light"] .feedbackBox .featureRequestButton:hover {
	background: rgba(217, 119, 6, 0.2) !important;
	color: #ffffff !important;
}

/* 5. Middle Content Area & Search Inputs */
[data-bs-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-bs-theme="light"] .dataTables_filter input,
[data-bs-theme="light"] #historyLiveSearch,
[data-bs-theme="light"] #commandListSearch,
[data-bs-theme="light"] #channelSwitchSearch,
[data-bs-theme="light"] #channelSwitchPw {
	background-color: var(--surface-bg-card) !important;
	border: 1px solid var(--surface-border) !important;
	color: #0f172a !important;
}
/* The dark-glass toolbar these inputs sit in (history/commandlist/
   channelswitch pages - inline style="background: rgba(33,37,41,0.7);
   backdrop-filter: blur(8px); ...") had no light-theme override anywhere
   at all, on any of the three pages, so it stayed a permanently dark
   charcoal panel regardless of theme - a dark glass box floating on an
   otherwise light page, with the (now correctly light) input awkwardly
   sitting inside it. Same bug class as the search-input :focus fix
   earlier, just on the container instead of the input. */
[data-bs-theme="light"] .history-search-container,
[data-bs-theme="light"] .commandlist-search-container,
[data-bs-theme="light"] .channelswitch-toolbar {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
[data-bs-theme="light"] .history-search-container .text-white,
[data-bs-theme="light"] .commandlist-search-container .text-white,
[data-bs-theme="light"] .channelswitch-toolbar .text-white {
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .history-search-container .text-white-50,
[data-bs-theme="light"] .commandlist-search-container .text-white-50,
[data-bs-theme="light"] .channelswitch-toolbar .text-white-50 {
	color: var(--text-dimmed) !important;
}
[data-bs-theme="light"] .topNavigationBar {
	background: rgba(15, 23, 42, 0.02) !important;
	border-bottom-color: var(--surface-border) !important;
}
[data-bs-theme="light"] .topNavigationBar .button {
	background: rgba(15, 23, 42, 0.04) !important;
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .topNavigationBar .button:hover {
	background: rgba(37, 99, 235, 0.12) !important;
	color: #1e40af !important;
}

/* 6. Settings Page */
[data-bs-theme="light"] .content-settings .card {
	background: var(--surface-bg-card) !important;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
[data-bs-theme="light"] .content-settings .card:hover {
	background: var(--surface-bg-card) !important;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.15);
}
[data-bs-theme="light"] .content-settings .card .card-title,
[data-bs-theme="light"] .content-settings .card span {
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .fields .description {
	background: rgba(37, 99, 235, 0.06) !important;
	color: #334155 !important;
}
[data-bs-theme="light"] .content-settings table tr {
	background: rgba(15, 23, 42, 0.02);
}
[data-bs-theme="light"] .content-settings table td {
	border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}
[data-bs-theme="light"] .content-settings table td:first-child {
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .fields input[type="text"],
[data-bs-theme="light"] .fields input[type="password"],
[data-bs-theme="light"] .fields textarea,
[data-bs-theme="light"] .fields select {
	background: var(--surface-bg-card) !important;
	color: #0f172a !important;
}

/* 7. Command List */
[data-bs-theme="light"] .content-commands .commandlistTable tr {
	background: rgba(15, 23, 42, 0.02) !important;
}
[data-bs-theme="light"] .content-commands .commandlistTable tr:hover {
	background: rgba(15, 23, 42, 0.05) !important;
}
[data-bs-theme="light"] .content-commands code {
	background: rgba(37, 99, 235, 0.08) !important;
	color: #1e40af !important;
}

/* 8. Alerts & Empty States */
[data-bs-theme="light"] .alert-primary,
[data-bs-theme="light"] .alert-info {
	background: rgba(15, 23, 42, 0.03) !important;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
}

/* 9. Media Browser */
[data-bs-theme="light"] .media-browser-navbar .button {
	background: rgba(15, 23, 42, 0.04) !important;
	color: #334155 !important;
}
[data-bs-theme="light"] .media-browser-navbar .button:hover {
	background: rgba(15, 23, 42, 0.08) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .media-browser-navbar .button.active,
[data-bs-theme="light"] .media-browser-navbar .button:has(> span[style*="underline"]) {
	color: #1e40af !important;
	background: rgba(37, 99, 235, 0.14) !important;
	box-shadow: none !important;
}
[data-bs-theme="light"] .media-browser-navbar .media-search-box input {
	background: var(--surface-bg-card) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .media-browser-card {
	background: var(--surface-bg-card) !important;
	box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
[data-bs-theme="light"] .media-browser-card:hover {
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.15) !important;
}
[data-bs-theme="light"] .media-browser-card .card-title {
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .media-browser-card .card-text {
	color: var(--text-muted) !important;
}
[data-bs-theme="light"] .media-browser-card .card-text a {
	color: #1e40af !important;
}

/* 10. Settings Restart Buttons */
[data-bs-theme="light"] #settings_player_restart,
[data-bs-theme="light"] #settings_client_restart,
[data-bs-theme="light"] #settings_reload_restart {
	background: rgba(37, 99, 235, 0.08) !important;
	color: #1e40af !important;
}
[data-bs-theme="light"] #settings_bot_restart {
	background: rgba(217, 119, 6, 0.1) !important;
	color: #92400e !important;
}
[data-bs-theme="light"] #settings_bot_shutdown {
	background: rgba(239, 68, 68, 0.1) !important;
	color: #991b1b !important;
}

/* 11. Update Release Manager */
[data-bs-theme="light"] #updates_row table tr {
	background: rgba(15, 23, 42, 0.02) !important;
}
[data-bs-theme="light"] #updates_row table tr:hover {
	background: rgba(15, 23, 42, 0.05) !important;
}
[data-bs-theme="light"] #updates_row table td,
[data-bs-theme="light"] #updates_row table th {
	border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}
[data-bs-theme="light"] #updates_row table td,
[data-bs-theme="light"] #updates_row table th {
	color: #334155 !important;
}
[data-bs-theme="light"] #updates_row table td.text-danger {
	color: #991b1b !important;
}
[data-bs-theme="light"] #updates_row table td.text-success {
	color: #166534 !important;
}
[data-bs-theme="light"] #updates_row .alert {
	background: rgba(217, 119, 6, 0.08) !important;
	color: #92400e !important;
}

/* 12. Countdown & Store Badges */
[data-bs-theme="light"] .store-badge-card {
	background: rgba(15, 23, 42, 0.03);
}
[data-bs-theme="light"] .store-badge-card:hover {
	background: rgba(15, 23, 42, 0.06);
}

/* 13. Terminal / Log Console stays intentionally dark for contrast & familiarity */
[data-bs-theme="light"] .fileboxTitle {
	background: rgba(15, 23, 42, 0.85) !important;
	color: #cbd5e1 !important;
}

/* 14. Right Panel Section Headers
   Originally a fixed-size 2012 PNG (menutitle_right.png) with the label
   baked into the image, so it ignored theming entirely. Now a flat
   uppercase label with a hairline rule running out to the edge, matching
   the "now-playing hero" panel - a boxed pill on top of the boxed content
   below it read as box-inside-box. */
.menutitle-right {
	background: none !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	font-size: 9.5px !important;
	font-weight: 800 !important;
	letter-spacing: 1.1px !important;
	text-transform: uppercase !important;
	text-align: left !important;
	color: var(--text-dimmed) !important;
	line-height: 1.5 !important;
	margin: 18px 12px 9px 12px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
.menutitle-right::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--surface-border);
}
[data-bs-theme="light"] .menutitle-right {
	color: #64748b !important;
}

/* ==========================================================================
   MODAL & DIALOG WINDOW MODERNIZATION
   Frosted glass panels, gradient actions, unified form styling.
   ========================================================================== */

.modal-backdrop.show {
	opacity: 0.7 !important;
}

.modal-content {
	background: rgba(15, 23, 42, 0.85) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 18px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(59, 130, 246, 0.08) !important;
	color: var(--text-main) !important;
}

.modal-header {
	border-bottom: 1px solid var(--surface-border) !important;
	padding: 18px 22px !important;
	gap: 8px !important;
}

.modal-title {
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: -0.2px !important;
	color: var(--text-main) !important;
}

.modal-body {
	padding: 20px 22px !important;
}

.modal-footer {
	border-top: 1px solid var(--surface-border) !important;
	padding: 14px 22px !important;
	gap: 8px !important;
}

.modal-body .form-label {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--text-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body input[type="text"],
.modal-body textarea {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--surface-border) !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	padding: 9px 14px !important;
	font-size: 13.5px !important;
	transition: all 0.2s ease !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

.modal-body .form-text {
	color: var(--text-dimmed) !important;
	font-size: 12px !important;
	margin-top: 6px !important;
}

.modal-body .input-group-text {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--surface-border) !important;
	color: var(--text-muted) !important;
}

.modal-body .input-group .form-control,
.modal-body .input-group .input-group-text,
.modal-body .input-group .btn {
	border-radius: 0 !important;
}
.modal-body .input-group > :first-child {
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}
.modal-body .input-group > :last-child {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.modal-header .btn-close {
	box-sizing: border-box !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	opacity: 0.75 !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}
.modal-header .btn-close i {
	color: var(--text-main) !important;
	font-size: 15px !important;
}
.modal-header .btn-close:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	opacity: 1 !important;
	transform: rotate(90deg) !important;
}
.modal-header .btn-close.modalMinimize:hover {
	transform: scale(1.1) !important;
}

.modal-footer .btn-primary,
.modal-body .btn-primary {
	background: var(--brand-primary-gradient) !important;
	border: none !important;
	border-radius: 9px !important;
	font-weight: 600 !important;
	padding: 8px 20px !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
	transition: all 0.2s ease !important;
}
.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45) !important;
}

.modal-footer .btn-secondary {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid var(--surface-border) !important;
	color: var(--text-muted) !important;
	border-radius: 9px !important;
	font-weight: 600 !important;
	padding: 8px 18px !important;
	transition: all 0.2s ease !important;
}
.modal-footer .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

/* Light theme modal variants */
[data-bs-theme="light"] .modal-backdrop.show {
	opacity: 0.3 !important;
}
[data-bs-theme="light"] .modal-content {
	background: rgba(247, 248, 250, 0.94) !important;
	border: 1px solid rgba(15, 23, 42, 0.08) !important;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 40px rgba(59, 130, 246, 0.06) !important;
}
[data-bs-theme="light"] .modal-body .form-control,
[data-bs-theme="light"] .modal-body .form-select,
[data-bs-theme="light"] .modal-body input[type="text"],
[data-bs-theme="light"] .modal-body textarea,
[data-bs-theme="light"] .modal-body .input-group-text {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .modal-body .form-control:focus,
[data-bs-theme="light"] .modal-body .form-select:focus {
	background: var(--surface-bg-card) !important;
}
[data-bs-theme="light"] .modal-header .btn-close:hover {
	background: rgba(15, 23, 42, 0.06) !important;
}
[data-bs-theme="light"] .modal-footer .btn-secondary {
	background: rgba(15, 23, 42, 0.04) !important;
	color: #334155 !important;
}
[data-bs-theme="light"] .modal-footer .btn-secondary:hover {
	background: rgba(15, 23, 42, 0.08) !important;
	color: #0f172a !important;
}

/* ==========================================================================
   CHANNEL CHAT WIDGET MODERNIZATION
   Repositioned clear of the right player deck, raised above panel content,
   dark/light aware via design tokens.
   ========================================================================== */

.chatbox {
	right: 300px !important;
	z-index: 500 !important;
	width: 320px !important;
	max-width: calc(100vw - 20px) !important;
	border-radius: 16px 16px 0 0 !important;
	overflow: hidden !important;
	box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.4) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	/* Nothing set this before, leaving it transparent: harmless while
	   .chatbox__body and the two inputs filled the whole box edge to
	   edge, but the compose footer now insets them with margin so the
	   gaps around them need a real background instead of showing
	   whatever sits behind the widget through. */
	background: var(--surface-bg-darker) !important;
}
.chatbox--tray {
	width: 220px !important;
	bottom: -358px !important;
}
.chatbox--empty.chatbox--tray {
	bottom: -216px !important;
}

.chatbox__title {
	background: var(--brand-primary-gradient) !important;
	height: 42px !important;
	padding: 0 6px 0 14px !important;
	border-radius: 16px 16px 0 0 !important;
	box-shadow: none !important;
}
.chatbox__title h5 {
	height: auto !important;
	line-height: normal !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding-left: 18px !important;
}
.chatbox__title h5:before {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	box-shadow: 0 0 6px rgba(76, 175, 80, 0.8) !important;
}
.chatbox__title__tray,
.chatbox__title__close,
.chatbox__title__mute {
	border-radius: 50% !important;
	transition: background 0.2s ease, opacity 0.2s ease !important;
}
.chatbox__title__tray:hover,
.chatbox__title__close:hover,
.chatbox__title__mute:hover {
	background: rgba(255, 255, 255, 0.18) !important;
}

.chatbox__body {
	background: var(--surface-bg-card) !important;
	border-left: 1px solid var(--surface-border) !important;
	border-right: 1px solid var(--surface-border) !important;
	padding: 14px !important;
}

.chatbox__body__message p {
	background: rgba(127, 140, 160, 0.14) !important;
	color: var(--text-main) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	padding: 26px 14px 12px 14px !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}
.chatbox__body__message--right p {
	background: var(--brand-primary-gradient) !important;
	color: #ffffff !important;
}
.chatbox__body__message img {
	border-radius: 50% !important;
	border-color: var(--surface-bg-card) !important;
}
.chatbox__body__message__sender__name {
	font-size: 11px !important;
	font-weight: 700 !important;
	/* No !important on color: the inline style="color:..." set per sender
	   (stringToColour() in TS3MusicBot.js, giving each chat participant a
	   consistent distinct color) needs to win here - an !important on an
	   external rule beats even an inline style, which was silently
	   flattening every sender's name to the same muted gray. */
	color: var(--text-muted);
}
.chatbox__body__message--right .chatbox__body__message__sender__name {
	/* Own messages sit on the brand gradient, where a participant's
	   assigned inline color could easily be illegible - always white
	   here. Needs !important same as the inline style itself does: a
	   plain external rule never beats an inline style regardless of how
	   much more specific its selector is, only !important does. */
	color: rgba(255, 255, 255, 0.85) !important;
}
.chatbox__body__message__time {
	font-size: 10px !important;
	color: var(--text-dimmed) !important;
}
.chatbox__body__message--right .chatbox__body__message__time {
	/* Same reasoning as the sender name right above: own messages sit on
	   the solid brand gradient, where the default muted gray (tuned for
	   the light "other people's messages" bubble) is nearly invisible -
	   the timestamp was actually rendering the whole time, just as an
	   unreadable dark smudge on a blue background. */
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Compose footer: the name field and message box used to be two bare,
   square-cornered, barely-bordered inputs butted together with
   border-bottom:none (a leftover of the old design's stacked-border
   look). Restyled to match the webinterface switcher's "add bookmark"
   input-group exactly - same translucent pill background, same 1px
   border, same brand-glow focus-within ring, same dimmed leading icon.
   The name field gets a real .chatbox__field wrapper + icon element
   (ensureChatComposeFields() in TS3MusicBot.js - <input> is a replaced
   element and won't render a ::before icon in any browser). The message
   field doesn't need a wrapper: OverlayScrollbars already wraps that
   <textarea> in its own host <div class="chatbox__message">, a real div
   that takes a ::before icon directly, so the exact same look is applied
   straight to it without adding another nested box around OS's own
   structure. */
.chatbox__field,
.chatbox__message {
	position: relative !important;
	margin: 10px 10px 0 10px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
/* .chatbox__message is not a class this session invented - v2/chat.css's
   old dark-mode block already keyed off it directly, on BOTH the message
   textarea and (unlike .chatbox__field, which is new and unclaimed) this
   same class name, at higher specificity than the rule above. That old
   block looked dead when it was first read (it's gated on
   [data-theme="dark"], while the toggle everywhere else in this app is
   [data-bs-theme="dark"]) - but dark-mode-switch.js actually sets BOTH
   attributes on <body>, so it was live the whole time. Left alone (it's
   still base-styling other legacy chat parts), just out-specified here so
   the translucent pill background actually wins instead of only "winning"
   while :focus-within/:focus themselves added enough specificity to tie
   and take the source-order win - which is exactly why this only looked
   fixed while focused and reverted to a flat solid dark box at rest. */
.chatbox .chatbox__message {
	background: rgba(255, 255, 255, 0.04) !important;
}
.chatbox__field {
	margin-bottom: 8px !important;
}
.chatbox__message {
	margin-bottom: 10px !important;
}
.chatbox__field:focus-within,
.chatbox__message:focus-within {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
.chatbox__field-icon,
.chatbox__message::before {
	position: absolute !important;
	left: 10px !important;
	font-size: 12px !important;
	color: var(--text-dimmed) !important;
	pointer-events: none !important;
}
.chatbox__field--name .chatbox__field-icon {
	top: 50% !important;
	transform: translateY(-50%) !important;
}
.chatbox__message::before {
	content: "\f252" !important;
	font-family: "bootstrap-icons" !important;
	top: 10px !important;
	z-index: 1 !important;
}
.chatbox__field .chatBoxName {
	background: transparent !important;
	color: var(--text-main) !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 7px 10px 7px 32px !important;
	font-size: 12px !important;
	width: 100% !important;
	margin: 0 !important;
	transition: none !important;
}
/* .chatBoxName also carries the Bootstrap .form-control class, which the
   same old v2/chat.css dark-mode block (see the .chatbox__message comment
   above) targets via `.chatbox .form-control` at higher specificity than
   the rule above - background:transparent only actually won while
   :focus's extra specificity tied and the source-order tiebreak favored
   this later stylesheet. At rest it lost outright, so clicking into the
   field visibly changed its background from that rule's solid dark fill
   to transparent purely as a side effect of focus adding specificity,
   not because anything here was meant to be focus-dependent. */
.chatbox .chatbox__field .chatBoxName {
	background: transparent !important;
}
.chatbox__message textarea {
	background: transparent !important;
	color: var(--text-main) !important;
	border: none !important;
	box-shadow: none !important;
	padding-left: 32px !important;
	font-size: 12px !important;
}
.chatbox .chatbox__message textarea {
	background: transparent !important;
}
.chatbox__field .chatBoxName::placeholder,
.chatbox__message textarea::placeholder {
	color: #64748b !important;
}
.chatbox__field .chatBoxName:focus,
.chatbox__message textarea:focus {
	outline: none !important;
	background: transparent !important;
}
/* Chrome/Safari recognize a text input named/placeholder'd "Name" as an
   autofill candidate and paint their own yellow/blue tint behind it via
   :-webkit-autofill the moment it's focused (or a saved value is picked),
   ignoring background:transparent entirely - it's a UA style, not
   something page CSS normally touches. The only reliable override is an
   inset box-shadow the size of the field standing in for a background,
   plus forcing the text color since autofill also overrides that. */
.chatbox__field .chatBoxName:-webkit-autofill,
.chatbox__field .chatBoxName:-webkit-autofill:hover,
.chatbox__field .chatBoxName:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text-main) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--surface-bg-darker) inset !important;
	box-shadow: 0 0 0 1000px var(--surface-bg-darker) inset !important;
	transition: background-color 9999s ease-in-out 0s !important;
}

[data-bs-theme="light"] .chatbox__field,
[data-bs-theme="light"] .chatbox__message {
	background: rgba(0, 0, 0, 0.02) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-bs-theme="light"] .chatbox__field .chatBoxName,
[data-bs-theme="light"] .chatbox__message textarea {
	color: #0f172a !important;
}
/* Same specificity as the base rule above (1 attribute + 1 class either
   way) and it comes later in this file, so without repeating it here the
   focus-within border-color from earlier would lose the tie and the
   brand-blue focus ring would never show its matching border in light
   theme - only the box-shadow (a different property, unaffected) would
   still appear. */
[data-bs-theme="light"] .chatbox__field:focus-within,
[data-bs-theme="light"] .chatbox__message:focus-within {
	border-color: var(--brand-primary) !important;
}

/* Collapse the widget clear of the right panel once it is hidden below 640px.
   Order matters here: both queries match any viewport <=640px, and with
   identical selector/specificity the one that's LATER in the file wins
   regardless of which max-width is smaller - the two blocks used to be in
   the opposite order, so every viewport <=640px actually got the wider
   1100px rule's right:260px instead of right:10px, anchoring the widget
   260px from the right edge (as if there were still a right panel to
   clear) instead of pinning it close to a screen that no longer has one.
   Room enough left of that meant a 320px-wide expanded box calculated
   its left edge at negative x below ~586px, overflowing off-screen. The
   narrower/more restrictive query goes last so it's the one that wins. */
@media (max-width: 1100px) {
	.chatbox {
		right: 260px !important;
	}
}
@media (max-width: 640px) {
	.chatbox {
		right: 10px !important;
	}
}

/* ==========================================================================
   RESPONSIVE BREAKPOINT REFINEMENTS (1200 / 992 / 768)
   ========================================================================== */

/* Fix: an unconditional, higher-specificity rule (#leftPanel .nav-pills .nav-link)
   was overriding style.css's collapsed-rail padding at <=880px, leaving nav-links
   wider than the 64px rail and clipping icons against #leftPanel's overflow:hidden.
   The <li> width constraint itself now lives unconditionally above (line
   ~317) since the 200px "medium" rail between 880-1100px needed it too;
   this query only still needs the icon-centering / label-hiding part for
   the <=880px icon-only collapse tiers (64px at <=880px, 54px at <=640px,
   per style.css). */
@media (max-width: 880px) {
	#leftPanel .nav-pills .nav-link {
		width: calc(100% - 8px) !important;
		max-width: calc(100% - 8px) !important;
		padding: 10px 0 !important;
		margin: 3px 4px !important;
		justify-content: center !important;
	}

	/* The main nav icons were sitting ~4-5px left of true rail-center: the
	   #leftPanel .nav-link .bi rule above (line ~350) sets a fixed 8px
	   margin-right unconditionally, meant to space the icon from its text
	   label in the EXPANDED rail. custom.css loads after style.css, so that
	   unconditional rule was winning the specificity tie against style.css's
	   own @media(880px) reset for the exact same selector - the media query
	   doesn't add specificity, only source order decided, and custom.css's
	   rule came later regardless of which one was actually meant to apply
	   at this width. Resetting it here, later still within custom.css
	   itself, finally lets the collapse-mode version win. */
	#leftPanel .nav-link .bi {
		margin-right: 0 !important;
		font-size: 18px !important;
	}

	/* Dark mode switch: the label span already hides (style.css), but its
	   own unconditional rules above still keep the row and the switch's own
	   wrapper at justify-content:space-between (icon pinned left, toggle
	   pinned right) - the same unconditional-rule-wins-the-tie problem as
	   the icon fix above. Hide the icon and center the toggle by itself;
	   the switch remains fully usable without it. */
	#leftPanel #dark-mode-menu-switch .nav-link {
		justify-content: center !important;
		padding: 8px 0 !important;
	}
	#leftPanel #dark-mode-menu-switch .nav-link > .bi {
		display: none !important;
	}
	#leftPanel #dark-mode-menu-switch .dark-mode-menu-switch {
		justify-content: center !important;
		width: auto !important;
	}
	#leftPanel #dark-mode-menu-switch .form-check-input {
		margin-left: 0 !important;
	}

	/* Language select: style.css's collapse rule targets #selectLang, an ID
	   that doesn't exist in the current markup (the live element is
	   #language, built in TS3MusicBot.js) - so it has never actually
	   applied. Hide the redundant translate icon (the flag on the select
	   itself already signals "language") and shrink the select to an
	   icon-sized flag swatch instead of the 70-76px desktop width. */
	#leftPanel .nav-link:has(> #language) {
		justify-content: center !important;
		padding: 8px 4px !important;
	}
	#leftPanel .nav-link:has(> #language) > .bi {
		display: none !important;
	}
	#leftPanel #language {
		width: 34px !important;
		min-width: 34px !important;
		margin: 0 !important;
		padding: 2px 2px 2px 26px !important;
		background-size: 18px 12px !important;
		background-position: 4px 4px !important;
		font-size: 9px !important;
	}

	/* WebStream/SoundStream promo cards: rebuilt as icon+title+subtitle
	   real markup a while back (see "Promo Cards" above, line ~430), so
	   style.css's collapse rule - written for the old <img> version - no
	   longer matches anything. Hide the text/arrow and center the icon
	   the same way the main nav links collapse. */
	#leftPanel .sidebar-promo-card {
		justify-content: center !important;
		padding: 8px 0 !important;
		margin: 6px 4px !important;
		gap: 0 !important;
	}
	#leftPanel .sidebar-promo-text,
	#leftPanel .sidebar-promo-arrow {
		display: none !important;
	}
}

/* Fix: the settings page's fixed-position save/restart toolbars use hardcoded
   left/right offsets tuned for the full-width desktop sidebar and right panel.
   Below 1100px their combined natural width no longer fits between the
   (still fixed) offsets, so drop them into normal flow as a wrapping toolbar
   instead of chasing pixel offsets per breakpoint. */
@media (max-width: 1100px) {
	.save-all-settings,
	.settings-restart-buttons {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		z-index: auto !important;
	}
	.save-all-settings {
		display: inline-flex !important;
		margin: 14px 0 0 14px !important;
	}
	.settings-restart-buttons {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin: 10px 14px 64px 14px !important;
	}
	/* The 56px top margin only exists to clear the fixed toolbar above,
	   which sits in normal flow at the bottom of the page from here on. */
	#settingsLiveSearchContainer {
		margin-top: 16px !important;
	}
}

/* Settings/advanced category cards: v2/settings.css floats fixed 15rem
   cards with a 30px left margin only, so every row ended in a ragged gap on
   the right (~120px at 1440px wide) and phones got a single off-center
   column. The cards live in several sibling containers (#settingsForm,
   #cookies_settings, #skinSettings...) that only flow together as floats,
   so keep the floats and size them fluidly instead: 3 per row with equal
   gutters on both sides, 2 per row on phones. The scroll-collapsed .min
   badge keeps its own fixed geometry. */
.content-settings .card.formTitle:not(.min) {
	width: calc(33.333% - 24px) !important;
	margin: 24px 0 0 18px !important;
}
/* The click "bounce" (jQuery UI) temporarily wraps the card in a
   .ui-effects-wrapper that already copies its size and margins - the
   percentage width would otherwise resolve against that wrapper and squash
   the card to a third of itself for the length of the animation. */
.content-settings .ui-effects-wrapper > .card.formTitle:not(.min) {
	width: 100% !important;
	margin: 0 !important;
}
/* Below ~1200px both side panels leave the content column too narrow for
   three cards ("Nutzer Berechtigungen" broke mid-word) - two per row. */
@media (max-width: 1200px) {
	.content-settings .card.formTitle:not(.min) {
		width: calc(50% - 27px) !important;
	}
}
@media (max-width: 576px) {
	.content-settings .card.formTitle:not(.min) {
		width: calc(50% - 18px) !important;
		height: 128px !important;
		margin: 12px 0 0 12px !important;
		padding: 16px 6px !important;
	}
	.content-settings .card.formTitle:not(.min) .card-body {
		padding: 0 !important;
	}
	.content-settings .card.formTitle:not(.min) i,
	.content-settings .card.formTitle:not(.min) svg {
		font-size: 30px !important;
		margin-bottom: 8px !important;
	}
	.content-settings .card.formTitle:not(.min) .card-title,
	.content-settings .card.formTitle:not(.min) span {
		font-size: 12.5px !important;
	}
	.settings-restart-buttons div {
		flex: 1 1 28% !important;
	}
	#settingsLiveSearchContainer {
		margin-left: 12px !important;
		margin-right: 12px !important;
	}
	/* The title h1 is a flex box (for the logo), and text-overflow never
	   applies to a flex container's anonymous text - on phones the title
	   was hard-clipped mid-letter ("TS3MusicBot Webi"). Block + a right
	   bound in front of the account chip gives it a real ellipsis. */
	#header #title h1 {
		display: block !important;
		right: 110px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		padding-top: 1px !important;
	}
}

/* Fix: the quick-play action row (Queue/Download/TTS) uses flex: 1 1 auto
   so all 3 buttons share one row at full desktop width, but once the right
   panel narrows (<=1100px, and worse yet below the <=640px point where it's
   just above being hidden entirely) the translated labels - "Warteschlange"
   in particular - no longer fit 3-across. The 3rd button would wrap onto
   its own line, flex-basis:auto, and stretch to fill the full row width
   alone: two squarish buttons on row 1 followed by one much wider button on
   row 2 reads as broken rather than intentional. Forcing a clean 2-up grid
   in this range means the wrap is deliberate instead of an overflow
   artifact - two even buttons per row, with the 3rd/odd one centered at
   half width on its own row rather than stretched edge to edge. */
@media (max-width: 1100px) {
	.youtubeBox {
		justify-content: center !important;
	}
	.youtubeBox .btn-player-action {
		flex: 0 1 calc(50% - 3px) !important;
	}
}

/* Account popover: the user chip is a click target at every width (not
   just narrow ones), via ensureMobileHeaderStatusToggle() in
   TS3MusicBot.js - it always opens #header-status-rail as a popover
   containing at least Logout (moved here from the left nav). Below 860px
   the rail can't fit beside the title either, so the SAME popover also
   repaints the rest of the rail's content (connection mode, client name,
   player/client dots, storage) instead of just Logout - no content is
   duplicated, so it stays wired to whatever already updates it on desktop.
   These three rules work at any width; the width-specific popover framing
   is further down. */
.header-status-backdrop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1035 !important;
	background: rgba(0, 0, 0, 0.45) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	display: none !important;
}
.header-status-backdrop.show {
	display: block !important;
}
.header-userlevel {
	cursor: pointer !important;
}
/* #header establishes its own stacking context (position:relative +
   z-index:100), and #header-status-rail never leaves that DOM subtree even
   when it's position:fixed for the popover - position:fixed only escapes
   normal LAYOUT, not the ancestor's stacking context. So no z-index on the
   rail (or the logout slot alone, at >860px) can out-rank the body-level
   backdrop (1035): the whole #header box paints as one unit at rank 100,
   capped below it, and the backdrop covers the popover exactly the way it
   once covered the webinterface switcher's dropdown for the same reason.
   Bumping #header itself above the backdrop while the popover is open
   fixes it without re-parenting the rail - which would also break
   headerStatusSlot()'s `#header-status-cluster .hslot[...]` lookup used to
   fill it. */
body.header-status-open #header {
	z-index: 1041 !important;
}

/* Logout: hidden in the normal inline rail at any width (it's a menu
   action, not status info - showing it inline among the connection pills
   on desktop would look out of place). Both popover variants below force
   it visible again. */
#header-status-rail > .hslot[data-slot="logout"] {
	display: none;
}
#header-status-rail .hslot[data-slot="logout"] #logout {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	width: 100% !important;
	padding: 8px 0 !important;
	border-radius: 8px !important;
	color: #f87171 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
}
#header-status-rail .hslot[data-slot="logout"] #logout:hover {
	background: rgba(239, 68, 68, 0.12) !important;
}
#header-status-rail .hslot[data-slot="logout"] #logout .bi {
	font-size: 14px !important;
	opacity: 0.9 !important;
}

/* Wider than 860px: the rest of the rail already shows inline as normal
   (untouched), so the popover only needs to carry the logout slot. It
   still lives inside #header-status-rail, so instead of moving the whole
   (inline, in-place) rail, only this one child gets independently
   position:fixed - each element's fixed position resolves against the
   viewport on its own regardless of where its parent sits. */
@media (min-width: 861px) {
	#header-status-rail.mobile-open > .hslot[data-slot="logout"] {
		display: flex !important;
		position: fixed !important;
		top: 64px !important;
		right: 20px !important;
		width: 170px !important;
		background: rgba(15, 23, 42, 0.96) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-radius: 14px !important;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
		z-index: 1040 !important;
		padding: 6px !important;
	}
}

/* Narrow viewports: the status rail can't fit beside the title. This used
   to drop slots progressively (storage+query <=820px, conn <=860px, the
   whole rail <=700px) with the popover only kicking in at that last,
   narrowest tier - which left a dead zone between 700-860px where
   storage/conn had already been dropped from the inline rail but the
   popover wasn't available yet to get them back: those two pieces of
   status info were just gone, not "hidden but reachable." Hiding the
   WHOLE rail (instead of individual slots) as soon as ANYTHING would
   need to drop, and enabling the popover at that same width, means
   there's no width where part of the rail is inline and part is
   unreachable - it's either fully inline or fully one tap away. */
@media (max-width: 860px) {
	#header-status-rail {
		display: none;
	}
	#header-status-cluster {
		max-width: 46% !important;
	}

	#header-status-rail.mobile-open {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		height: auto !important;
		position: fixed !important;
		top: 64px !important;
		right: 12px !important;
		left: auto !important;
		width: 230px !important;
		max-width: calc(100vw - 24px) !important;
		background: rgba(15, 23, 42, 0.96) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
		border-radius: 14px !important;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
		z-index: 1040 !important;
		padding: 6px !important;
	}
	/* :not(:empty) here matters: the earlier version of this rule applied
	   to every .hslot unconditionally, which beat the base
	   ".hslot:empty { display: none }" collapse rule on specificity and
	   forced even a genuinely-unused slot (e.g. "query", when there's no
	   active query) to render as a blank padded row - an unexplained gap
	   between Discord and Stage-MusicBot that was a big part of what read
	   as "weirdly spaced" here. */
	#header-status-rail.mobile-open > .hslot:not(:empty) {
		display: flex !important;
		width: 100% !important;
		padding: 10px 12px !important;
	}
	#header-status-rail.mobile-open > .hslot:not(:empty) ~ .hslot:not(:empty) {
		border-left: none !important;
		border-top: 1px solid var(--surface-border) !important;
	}
	/* Every other row leads with an icon (.header-status-item's 7px gap
	   after a ~12px glyph puts label text at a consistent x-offset) or,
	   for the connection dots below, a smaller 7px dot. The client name
	   has no leading glyph at all and was sitting flush against the
	   row's edge, out of step with every row above and below it -
	   padding it to match where those labels start reads as one aligned
	   column instead of a ragged left edge. */
	#header-status-rail.mobile-open #header-client-name {
		padding-left: 19px !important;
	}
	#header-status-rail.mobile-open #header-info {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}
	#header-status-rail.mobile-open #header-info .hstat {
		gap: 12px !important;
	}

	/* Switcher: was fully hidden at this width, losing the only way to
	   jump to another webinterface or manage bookmarks on mobile.
	   Truncate instead, the same treatment the title itself gets just
	   below this breakpoint. */
	#header #webinterface-switcher {
		display: inline-flex !important;
		max-width: 150px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}
}
@media (max-width: 576px) {
	#header #title h1 {
		max-width: 170px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   MOBILE RIGHT PANEL ACCESS
   Below 640px the 3-column layout has no room for #rightPanel (player deck,
   quick-play row, download manager), so the base stylesheet hides it with
   display:none and nothing brings it back. A floating toggle turns it into
   a slide-in drawer instead: same markup, same JS bindings, just repainted
   as a fixed overlay so none of that functionality is actually lost on
   mobile. Built by ensureMobileRightPanelToggle() in TS3MusicBot.js.
   ========================================================================== */
.mobile-rightpanel-toggle {
	display: none;
}
.rightpanel-mobile-close {
	display: none;
}
body.rightpanel-open-lock {
	overflow: hidden !important;
}

@media (max-width: 640px) {
	/* filelist.css caps the fixed toolbar at calc(100% - 450px) to clear
	   both desktop side panels - on a phone that goes negative, so the logs
	   page's Logs/DEBUG bar collapsed to its 28px padding and the buttons
	   spilled down over the header card. Put it back in normal flow. */
	.topNavigationBarFixed:not(.media-browser-navbar) {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* ...and drop the 70px style.css reserves under that bar for it. */
	#logs_row,
	#debug_settings_row {
		margin-top: 14px !important;
	}
	/* Long log file names ran underneath the copy/delete icons. The name is
	   an anonymous flex item (no ellipsis possible), so let it break. */
	.fileboxTitle {
		font-size: 12.5px !important;
		word-break: break-all;
	}
	/* The player FAB sits in the bottom-left corner, on top of the icon
	   rail - leave room so the last rail items can scroll out from under
	   it instead of being permanently covered. */
	#leftPanel {
		padding-bottom: 84px !important;
	}
}

@media (max-width: 640px) {
	/* Left, not right: the channel chat widget also anchors to the right
	   edge at this width (right:10px, see the chatbox rules) and, expanded,
	   reaches from near the top all the way to the bottom of the screen -
	   a right-anchored FAB here sat squarely on top of its compose fields
	   with no width left to dodge into. The left corner is unclaimed. */
	.mobile-rightpanel-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: fixed !important;
		left: 18px !important;
		bottom: 18px !important;
		width: 52px !important;
		height: 52px !important;
		border-radius: 50% !important;
		border: 1px solid rgba(255, 255, 255, 0.12) !important;
		background: var(--brand-primary-gradient) !important;
		color: #ffffff !important;
		font-size: 20px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
		z-index: 1015 !important;
		cursor: pointer !important;
	}
	.mobile-rightpanel-toggle.is-open {
		display: none !important;
	}
	/* Even moved to the opposite corner, an expanded (not tray) chat widget
	   still spans nearly the full width at these sizes and reaches the
	   bottom of the screen, leaving nowhere left to place the FAB without
	   sitting on top of its compose fields. Collapsed/tray chat is just a
	   slim title bar and doesn't reach this corner, so this only hides the
	   FAB for the specific case that actually overlaps it. */
	body:has(.chatbox:not(.chatbox--tray)) .mobile-rightpanel-toggle {
		display: none !important;
	}

	.rightpanel-backdrop {
		position: fixed !important;
		inset: 0 !important;
		z-index: 1010 !important;
		background: rgba(0, 0, 0, 0.45) !important;
		backdrop-filter: blur(2px) !important;
		-webkit-backdrop-filter: blur(2px) !important;
		display: none !important;
	}
	.rightpanel-backdrop.show {
		display: block !important;
	}

	#rightPanel {
		display: flex !important;
		flex-direction: column !important;
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		height: 100vh !important;
		width: min(340px, 86vw) !important;
		max-width: 86vw !important;
		z-index: 1020 !important;
		transform: translateX(100%) !important;
		transition: transform 0.3s ease !important;
		box-shadow: -12px 0 34px rgba(0, 0, 0, 0.5) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	#rightPanel.mobile-open {
		transform: translateX(0) !important;
	}

	.rightpanel-mobile-close {
		display: none;
		align-items: center !important;
		justify-content: center !important;
		position: fixed !important;
		/* #rightPanel is flush with the viewport's right edge while open, so
		   this only needs to sit inset from that shared edge - no need to
		   track the drawer's own width. */
		top: 14px !important;
		right: 14px !important;
		width: 32px !important;
		height: 32px !important;
		border-radius: 50% !important;
		border: 1px solid rgba(255, 255, 255, 0.16) !important;
		background: rgba(15, 23, 42, 0.75) !important;
		color: #ffffff !important;
		font-size: 14px !important;
		z-index: 1021 !important;
		cursor: pointer !important;
	}
	.rightpanel-mobile-close.show {
		display: flex !important;
	}
	.rightpanel-mobile-close:hover {
		background: rgba(15, 23, 42, 0.92) !important;
	}
}

/* ==========================================================================
   TOOLTIP & TOAST POLISH
   ========================================================================== */
.tooltip .tooltip-inner {
	background: rgba(15, 23, 42, 0.95) !important;
	color: #f8fafc !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 6px 10px !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
	backdrop-filter: blur(8px) !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
	border-top-color: rgba(15, 23, 42, 0.95) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
	border-bottom-color: rgba(15, 23, 42, 0.95) !important;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
	border-left-color: rgba(15, 23, 42, 0.95) !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	border-right-color: rgba(15, 23, 42, 0.95) !important;
}

/* Fix: showcase page secondary download button hardcodes text-white, which
   disappears against the light theme's page background (transparent outline
   button + white text = invisible). */
[data-bs-theme="light"] .btn-outline-secondary.text-white {
	color: #334155 !important;
	border-color: rgba(15, 23, 42, 0.25) !important;
}
[data-bs-theme="light"] .btn-outline-secondary.text-white:hover {
	color: #0f172a !important;
	background: rgba(15, 23, 42, 0.05) !important;
	border-color: rgba(15, 23, 42, 0.35) !important;
}

/* ==========================================================================
   STATUS PAGES
   stopped, restarting, updating, updateinprogress, norights and the
   cookie/identity import results share one centered card: tone-colored
   icon, title, text, optional redirect progress and action. These used to
   be a bare <center> line of (English-only) text - norights.htm was even
   completely empty - styled through "#content center", which also leaked
   110px of padding onto the YouTube browser's "Show more" button.
   ========================================================================== */
.status-page {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px;
}
.status-card {
	--status-tone: var(--brand-primary);
	--status-tone-rgb: 59, 130, 246;
	width: 100%;
	max-width: 440px;
	text-align: center;
	background: var(--surface-bg-card);
	border: 1px solid var(--surface-border);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	padding: 36px 32px 32px;
}
.status-card--success { --status-tone: #22c55e; --status-tone-rgb: 34, 197, 94; }
.status-card--warning { --status-tone: #f59e0b; --status-tone-rgb: 245, 158, 11; }
.status-card--danger  { --status-tone: #ef4444; --status-tone-rgb: 239, 68, 68; }
.status-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: var(--status-tone);
	background: rgba(var(--status-tone-rgb), 0.12);
	border: 1px solid rgba(var(--status-tone-rgb), 0.3);
}
.status-icon.is-spinning i {
	display: inline-block;
	animation: statusSpin 1.6s linear infinite;
}
@keyframes statusSpin {
	to { transform: rotate(360deg); }
}
/* #content prefix: v2/style.css's "#content h2 { color: #fff }" would
   otherwise win, leaving the title white on the light theme's card. */
#content .status-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--text-main);
	margin: 0 0 8px;
}
.status-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 auto;
	max-width: 360px;
}
.status-progress {
	height: 4px;
	margin: 22px auto 10px;
	border-radius: 4px;
	background: rgba(var(--status-tone-rgb), 0.15);
	overflow: hidden;
}
.status-progress span {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: var(--status-tone);
	transform-origin: left center;
	animation: statusProgress var(--status-duration, 30s) linear forwards;
}
@keyframes statusProgress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}
.status-countdown {
	font-size: 12px;
	color: var(--text-dimmed);
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.status-action {
	margin-top: 24px;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.status-icon.is-spinning i,
	.status-progress span {
		animation: none;
	}
}
[data-bs-theme="light"] .status-card {
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
[data-bs-theme="light"] .status-countdown {
	color: var(--text-muted);
}
[data-bs-theme="light"] .status-card--success { --status-tone: #15803d; }
[data-bs-theme="light"] .status-card--warning { --status-tone: #b45309; }
[data-bs-theme="light"] .status-card--danger  { --status-tone: #b91c1c; }

/* ==========================================================================
   UNIFIED BUTTON SYSTEM
   One consistent geometry/color scale for every plain Bootstrap .btn across
   the app. Context-specific buttons (icon-stacked restart controls, the
   circular transport buttons, badges) already carry more specific selectors
   and keep winning over this base by specificity, so this only normalizes
   the many plain .btn / .btn-primary / .btn-secondary instances that never
   had a bespoke style (modal footers, cards, download widget, queue modal).
   ========================================================================== */
.btn {
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.1px !important;
	padding: 8px 16px !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.btn-sm {
	font-size: 12px !important;
	padding: 5px 12px !important;
	border-radius: 8px !important;
}
.btn-primary {
	background: var(--brand-primary-gradient) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
}
.btn-primary:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 5px 14px rgba(37, 99, 235, 0.4) !important;
}
.btn-secondary,
.btn-outline-secondary {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid var(--surface-border) !important;
	color: var(--text-muted) !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
	border-color: var(--surface-border-hover) !important;
}
.btn-danger,
.btn-outline-danger {
	background: rgba(239, 68, 68, 0.12) !important;
	border: 1px solid rgba(239, 68, 68, 0.35) !important;
	color: #fca5a5 !important;
}
.btn-danger:hover,
.btn-outline-danger:hover {
	background: rgba(239, 68, 68, 0.22) !important;
	border-color: #ef4444 !important;
	color: #ffffff !important;
}
[data-bs-theme="light"] .btn-secondary,
[data-bs-theme="light"] .btn-outline-secondary {
	background: rgba(15, 23, 42, 0.04) !important;
	color: #334155 !important;
}
[data-bs-theme="light"] .btn-secondary:hover,
[data-bs-theme="light"] .btn-outline-secondary:hover {
	background: rgba(15, 23, 42, 0.08) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .btn-danger,
[data-bs-theme="light"] .btn-outline-danger {
	background: rgba(239, 68, 68, 0.08) !important;
	color: #991b1b !important;
}
[data-bs-theme="light"] .btn-danger:hover,
[data-bs-theme="light"] .btn-outline-danger:hover {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   DOWNLOAD MANAGER WIDGET
   Re-themed to the app's own tokens instead of the plain --color-* fallbacks
   it shipped with, so it reads as part of the same design system.
   ========================================================================== */
.download-widget {
	margin-top: 0 !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
.dl-status-badge {
	border-radius: 20px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
}
.dl-status-idle {
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--text-muted) !important;
	border-color: var(--surface-border) !important;
}
.dl-current-track {
	color: var(--text-main) !important;
}
.dl-progress-track {
	background: rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px !important;
}
.dl-progress-bar {
	background: var(--brand-primary-gradient) !important;
}
.dl-metrics-grid {
	color: var(--text-dimmed) !important;
}
.dl-metric-item i.text-info,
.dl-metric-item i.text-warning,
.dl-metric-item i.text-danger,
.dl-metric-item i.text-secondary {
	color: var(--brand-primary) !important;
	opacity: 0.85 !important;
}
.dl-footer-bar {
	border-top-color: var(--surface-border) !important;
	color: var(--text-dimmed) !important;
}
[data-bs-theme="light"] .download-widget {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
}
/* v2/style.css has its own [data-bs-theme="light"] overrides for each of
   these, still hardcoded to literal #ffffff/#dee2e6 from before this
   pass - out-ranked here since custom.css loads after it, same pattern as
   every other light-theme fix in this file. */
[data-bs-theme="light"] #downloadQueueModal .modal-content {
	background: var(--surface-bg-card) !important;
}
[data-bs-theme="light"] .settings-search-container {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
}
/* v2/style.css defines this container's :focus-within ring using
   Bootstrap's own default blue (--bs-primary, #0d6efd) at 0.25rem (4px),
   not the site's --brand-primary (#3b82f6) at 3px used everywhere else -
   the only search box on the site with a visibly different focus-ring
   color. Applies in both themes (not [data-bs-theme="light"]-scoped)
   since the mismatch isn't theme-specific. */
.settings-search-container:focus-within {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
[data-bs-theme="light"] .queue-header-bar {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] .genre-pill {
	background: var(--surface-bg-dark) !important;
	color: var(--text-muted) !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] .radio-station-card:hover {
	background: var(--surface-bg-dark) !important;
	border-color: var(--brand-primary) !important;
}
[data-bs-theme="light"] .dl-status-idle {
	background: rgba(15, 23, 42, 0.05) !important;
}
[data-bs-theme="light"] .dl-progress-track {
	background: rgba(15, 23, 42, 0.08) !important;
}


/* ==========================================================================
   RADIO DIRECTORY & STATIONS MANAGEMENT POLISH
   ========================================================================== */

/* 1. Content Container Scroll Fix */
.content-radio {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 16px 22px !important;
	scroll-behavior: smooth;
}

/* 2. Top Header & Segmented Tab Switcher */
.radio-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--surface-border);
}
.radio-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.radio-header-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(37, 99, 235, 0.08));
	border: 1px solid rgba(59, 130, 246, 0.35);
	color: var(--brand-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
	flex-shrink: 0;
}
.radio-header-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.3px;
}
.radio-header-subtitle {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 2px;
}
.radio-tab-nav {
	display: inline-flex;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--surface-border);
	border-radius: 10px;
	padding: 4px;
	gap: 4px;
}
/* Phones: the segmented tabs and the 5-button source group were each
   ~370px of fixed-width content in a ~300px column and ran off the right
   edge. Split the tabs evenly across the full width and let the source
   buttons wrap as individual pills (a wrapped btn-group would keep only
   the outer corners rounded). */
@media (max-width: 576px) {
	#content.content-radio,
	.content-radio {
		padding: 14px 12px !important;
	}
	.radio-tab-nav {
		display: flex;
		width: 100%;
	}
	.radio-tab-btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 8px 6px;
		font-size: 12px;
		line-height: 1.25;
		text-align: center;
	}
	.radio-tab-btn .badge-tab-count {
		display: none;
	}
}
/* With both side panels open (up to ~1280px) the source group is also
   wider than its row and its labels wrapped inside the buttons ("Alle /
   Quellen"); from here down it becomes a wrapping row of pills. */
@media (max-width: 1280px) {
	div:has(> .radio-source-group) {
		flex-wrap: wrap;
	}
	.radio-source-group {
		width: 100%;
		flex-wrap: wrap;
		gap: 6px;
	}
	.radio-source-group > .btn {
		flex: 0 0 auto;
		white-space: nowrap;
		margin-left: 0 !important;
		border-radius: 8px !important;
	}
}
.radio-tab-btn {
	background: transparent;
	border: none;
	color: var(--text-muted);
	padding: 8px 15px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}
.radio-tab-btn:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.07);
}
.radio-tab-btn.active {
	background: var(--brand-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}
.badge-tab-count {
	font-size: 10.5px;
	padding: 2px 7px;
	border-radius: 10px;
	margin-left: 8px;
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	font-weight: 700;
}
.radio-tab-btn.active .badge-tab-count {
	background: rgba(255, 255, 255, 0.28);
}

/* 3. Search Box & Controls */
.radio-search-box {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--surface-border);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.radio-search-input-group .input-group-text {
	background: #0b1120 !important;
	border: 1px solid var(--surface-border) !important;
	border-right: none !important;
	color: var(--text-muted) !important;
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
	padding: 0 14px !important;
}
.radio-search-input-group input.form-control {
	background: #0b1120 !important;
	border: 1px solid var(--surface-border) !important;
	border-left: none !important;
	border-right: none !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	padding: 9px 12px !important;
}
.radio-search-input-group input.form-control:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: none !important;
}
/* box-shadow:none above is intentional - the input is the middle segment
   of a 3-piece input-group (icon | input | button), so a ring drawn on
   just the input alone would look disconnected from the rounded icon/
   button ends either side of it. But nothing then put the ring anywhere
   else either, leaving the site's single most prominent search box (75k+
   radio stations) with no visible focus feedback at all beyond a subtle
   border color shift. This wraps the ring around the whole group instead,
   matching the same :focus-within pattern already used for the youtube
   quick-play bar and the webinterface-switcher bookmark field. */
.radio-search-input-group:focus-within {
	border-radius: 10px !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
.btn-clear-search {
	border-top: 1px solid var(--surface-border) !important;
	border-bottom: 1px solid var(--surface-border) !important;
	border-left: none !important;
	border-right: none !important;
	background: #0b1120 !important;
	color: var(--text-muted) !important;
	padding: 0 12px !important;
}
.btn-clear-search:hover {
	color: #ffffff !important;
	background: #111a2e !important;
}
.radio-search-input-group .btn-primary {
	border-top-right-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	font-weight: 600 !important;
}

/* 4. Genre Filter Pills */
.genre-pill {
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.09) !important;
	color: var(--text-muted) !important;
	padding: 5px 11px !important;
	border-radius: 20px !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	transition: all 0.18s ease !important;
	user-select: none;
}
.genre-pill:hover {
	background: rgba(59, 130, 246, 0.18) !important;
	border-color: rgba(59, 130, 246, 0.4) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}
.genre-pill.active {
	background: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4) !important;
}

/* 5. Source Buttons Group */
.radio-source-group .source-btn {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	padding: 4px 11px !important;
	border-color: var(--surface-border) !important;
	color: var(--text-muted) !important;
	transition: all 0.2s ease !important;
}
.radio-source-group .source-btn:hover {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}
.btn-check:checked + .source-all {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
}
.btn-check:checked + .source-radiobrowser {
	background: rgba(6, 182, 212, 0.2) !important;
	border-color: #06b6d4 !important;
	color: #06b6d4 !important;
}
.btn-check:checked + .source-radionet {
	background: rgba(16, 185, 129, 0.2) !important;
	border-color: #10b981 !important;
	color: #10b981 !important;
}
.btn-check:checked + .source-shoutcast {
	background: rgba(245, 158, 11, 0.2) !important;
	border-color: #f59e0b !important;
	color: #f59e0b !important;
}
.btn-check:checked + .source-somafm {
	background: rgba(139, 92, 246, 0.2) !important;
	border-color: #8b5cf6 !important;
	color: #a78bfa !important;
}

/* 6. Initial Discovery Welcome State */
.radio-discovery-welcome {
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed var(--surface-border);
	border-radius: 14px;
	padding: 46px 20px;
	text-align: center;
	color: var(--text-muted);
}
.welcome-icon {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: rgba(59, 130, 246, 0.12);
	border: 1px solid rgba(59, 130, 246, 0.25);
	color: var(--brand-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin-bottom: 14px;
}
.welcome-title {
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 8px;
}
.welcome-text {
	font-size: 13px;
	max-width: 520px;
	margin: 0 auto;
	color: var(--text-muted);
	line-height: 1.5;
}
.btn-quick-genre {
	border-radius: 20px !important;
	font-size: 12px !important;
	padding: 5px 14px !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}
.btn-quick-genre:hover {
	transform: translateY(-1px);
}

/* 7. Station Cards & Results */
.radio-station-card {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid var(--surface-border) !important;
	border-radius: 12px !important;
	padding: 12px 16px !important;
	margin-bottom: 10px !important;
	transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative;
	overflow: hidden;
}
.radio-station-card:hover {
	background: rgba(255, 255, 255, 0.055) !important;
	border-color: var(--surface-border-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.radio-station-card.is-playing {
	border-color: #10b981 !important;
	background: rgba(16, 185, 129, 0.08) !important;
	box-shadow: 0 0 18px rgba(16, 185, 129, 0.25) !important;
}
.radio-station-card.is-playing::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background: #10b981;
}
.radio-station-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: -0.2px;
	white-space: normal !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
	line-height: 1.35 !important;
}
.now-playing-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(16, 185, 129, 0.2);
	border: 1px solid rgba(16, 185, 129, 0.4);
	color: #34d399;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	animation: pulsePlaying 2s infinite;
}
@keyframes pulsePlaying {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.65; transform: scale(0.98); }
}

/* 8. My Radio Stations / Local Library */
.radio-library-banner {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--surface-border);
}
.library-banner-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.28);
	color: #f59e0b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
#myRadioStationsPane .topNavigationBar {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
	margin-top: 0 !important;
	border-radius: 10px 10px 0 0 !important;
	background: rgba(18, 24, 38, 0.95) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
[data-bs-theme="light"] #myRadioStationsPane .topNavigationBar {
	background: rgba(247, 248, 250, 0.95) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
#myRadioStationsPane .topNavigationBar .dataTables_filter {
	position: relative !important;
	margin-left: auto !important;
	margin-bottom: 0 !important;
	float: none !important;
}

/* Light Theme Overrides */
[data-bs-theme="light"] .radio-search-box {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
[data-bs-theme="light"] .radio-search-input-group .input-group-text,
[data-bs-theme="light"] .radio-search-input-group input.form-control,
[data-bs-theme="light"] .btn-clear-search {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
	color: #0f172a !important;
}
[data-bs-theme="light"] .radio-header-title {
	color: #0f172a !important;
}
[data-bs-theme="light"] .radio-tab-nav {
	background: var(--surface-bg-dark) !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] .radio-tab-btn {
	color: var(--text-muted) !important;
}
[data-bs-theme="light"] .radio-tab-btn:hover {
	color: var(--text-main) !important;
	background: rgba(15, 23, 42, 0.06) !important;
}
[data-bs-theme="light"] .radio-tab-btn.active {
	background: var(--brand-primary) !important;
	color: #ffffff !important;
}
/* The count badge was white-on-white-16% - fine on the dark tab bar and
   on the active (brand) tab, invisible on an inactive tab in light mode. */
[data-bs-theme="light"] .radio-tab-btn:not(.active) .badge-tab-count {
	background: rgba(15, 23, 42, 0.1);
	color: var(--text-main);
}
[data-bs-theme="light"] .radio-source-group .source-btn:hover {
	color: var(--text-main) !important;
	border-color: rgba(15, 23, 42, 0.25) !important;
}
[data-bs-theme="light"] .btn-check:checked + .source-all {
	background: var(--text-main) !important;
	border-color: var(--text-main) !important;
	color: #ffffff !important;
}
[data-bs-theme="light"] .btn-check:checked + .source-radiobrowser { color: #0e7490 !important; }
[data-bs-theme="light"] .btn-check:checked + .source-radionet { color: #047857 !important; }
[data-bs-theme="light"] .btn-check:checked + .source-shoutcast { color: #92400e !important; }
[data-bs-theme="light"] .btn-check:checked + .source-somafm { color: #6d28d9 !important; }
[data-bs-theme="light"] .genre-pill:hover {
	color: var(--text-main) !important;
}
[data-bs-theme="light"] .radio-discovery-welcome {
	background: rgba(255, 255, 255, 0.18);
}
[data-bs-theme="light"] .welcome-title {
	color: var(--text-main);
}
/* Quick-genre chips use raw Bootstrap outline colors (warning/info/light),
   which are tuned for dark backgrounds - #ffc107 and #0dcaf0 measured ~1:1
   on the light surface. Give each one a deep tone of the same hue. */
[data-bs-theme="light"] .btn-quick-genre.btn-outline-primary { --bs-btn-color: #1d4ed8; --bs-btn-border-color: #1d4ed8; }
[data-bs-theme="light"] .btn-quick-genre.btn-outline-success { --bs-btn-color: #047857; --bs-btn-border-color: #047857; }
[data-bs-theme="light"] .btn-quick-genre.btn-outline-warning { --bs-btn-color: #92400e; --bs-btn-border-color: #b45309; }
[data-bs-theme="light"] .btn-quick-genre.btn-outline-info { --bs-btn-color: #0e7490; --bs-btn-border-color: #0e7490; }
[data-bs-theme="light"] .btn-quick-genre.btn-outline-light { --bs-btn-color: #1e293b; --bs-btn-border-color: #334155; --bs-btn-hover-bg: #1e293b; --bs-btn-hover-color: #fff; }
[data-bs-theme="light"] .radio-station-card {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
}
[data-bs-theme="light"] .radio-station-title {
	color: #0f172a !important;
}
[data-bs-theme="light"] .radio-library-banner {
	background: var(--surface-bg-card) !important;
	border-color: var(--surface-border) !important;
}

/* ==========================================================================
   Modern Webinterface Switcher & Bookmarks Dropdown
   ========================================================================== */
.switcher-chevron {
	font-size: 9px !important;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: inline-block !important;
	margin-left: 2px !important;
}
#header #webinterface-switcher.is-open .switcher-chevron {
	transform: rotate(180deg) !important;
	color: var(--brand-primary) !important;
}

.switcher-backdrop {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1030 !important;
	background: rgba(0, 0, 0, 0.25) !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
	display: none !important;
}
.switcher-backdrop.show {
	display: block !important;
}

#webinterface-switcher-results.webif-switcher-dropdown {
	position: fixed !important;
	left: 63px !important;
	top: 56px !important;
	width: 320px !important;
	max-width: calc(100vw - 80px) !important;
	max-height: 400px !important;
	background: rgba(15, 23, 42, 0.96) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
	z-index: 1040 !important;
	padding: 8px !important;
	box-sizing: border-box !important;
	display: none !important;
	flex-direction: column !important;
	cursor: default !important;
}
#webinterface-switcher-results.webif-switcher-dropdown.show {
	display: flex !important;
}

.switcher-header {
	display: flex !important;
	align-items: center !important;
	padding: 6px 10px 8px 10px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--text-dimmed, #94a3b8) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	margin-bottom: 4px !important;
}

.switcher-list {
	max-height: 220px !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	padding: 2px 0 !important;
}

.switcher-entry {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 7px 10px !important;
	border-radius: 8px !important;
	transition: background 0.15s ease !important;
	background: transparent !important;
}
.switcher-entry:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}
.switcher-entry.is-current {
	background: rgba(59, 130, 246, 0.1) !important;
}

.switcher-link {
	display: flex !important;
	align-items: center !important;
	color: #f8fafc !important;
	text-decoration: none !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	flex: 1 !important;
	min-width: 0 !important;
}
.switcher-entry:hover .switcher-link {
	color: #ffffff !important;
}
.switcher-host {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.deleteSwitcherURL {
	opacity: 0.5 !important;
	transition: opacity 0.15s ease, color 0.15s ease !important;
	cursor: pointer !important;
	border: none !important;
	background: transparent !important;
	font-size: 13px !important;
	color: var(--text-dimmed, #94a3b8) !important;
}
.deleteSwitcherURL:hover {
	opacity: 1 !important;
	color: #ef4444 !important;
}

.switcher-footer {
	padding-top: 8px !important;
	margin-top: 4px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.switcher-footer .input-group {
	background: rgba(255, 255, 255, 0.04) !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	overflow: hidden !important;
	transition: border-color 0.15s ease !important;
}
.switcher-footer .input-group:focus-within {
	border-color: var(--brand-primary, #3b82f6) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}
.switcher-footer .input-group-text {
	font-size: 12px !important;
	padding: 0 8px !important;
	background: transparent !important;
	border: none !important;
	color: var(--text-dimmed, #94a3b8) !important;
}
.switcher-footer input.form-control {
	font-size: 12px !important;
	color: #ffffff !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 5px 6px !important;
}
.switcher-footer input.form-control::placeholder {
	color: #64748b !important;
}
.switcher-footer button.btn {
	border-radius: 0 7px 7px 0 !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	height: 31px !important;
}

/* Light theme overrides for switcher */
[data-bs-theme="light"] #webinterface-switcher-results.webif-switcher-dropdown {
	background: rgba(247, 248, 250, 0.98) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
[data-bs-theme="light"] .switcher-header {
	color: #475569 !important;
	border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-bs-theme="light"] .switcher-entry:hover {
	background: rgba(0, 0, 0, 0.04) !important;
}
[data-bs-theme="light"] .switcher-link {
	color: #0f172a !important;
}
[data-bs-theme="light"] .switcher-footer {
	border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-bs-theme="light"] .switcher-footer .input-group {
	background: rgba(0, 0, 0, 0.02) !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-bs-theme="light"] .switcher-footer input.form-control {
	color: #0f172a !important;
}
[data-bs-theme="light"] .switcher-backdrop {
	background: rgba(0, 0, 0, 0.1) !important;
}

/* Fix double icon on enhanced empty states */
.content-queue .alert.enhanced-empty-state::before,
.content-history .alert.enhanced-empty-state::before,
.content-channelswitch .alert.enhanced-empty-state::before,
.content-channel_switch .alert.enhanced-empty-state::before {
	display: none !important;
}

/* Semantic Log Badges */
.log-badge {
	display: inline-block !important;
	padding: 1px 6px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	letter-spacing: 0.5px !important;
	line-height: 1.3 !important;
	margin: 0 4px !important;
	text-transform: uppercase !important;
}
.log-badge.log-info {
	background: rgba(14, 165, 233, 0.15) !important;
	color: #38bdf8 !important;
	border: 1px solid rgba(56, 189, 248, 0.3) !important;
}
.log-badge.log-error {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #f87171 !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
}
.log-badge.log-warn {
	background: rgba(245, 158, 11, 0.15) !important;
	color: #fbbf24 !important;
	border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.log-badge.log-debug {
	background: rgba(148, 163, 184, 0.15) !important;
	color: #94a3b8 !important;
	border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
.log-badge.log-success {
	background: rgba(34, 197, 94, 0.15) !important;
	color: #4ade80 !important;
	border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.log-badge.log-manager {
	background: rgba(168, 85, 247, 0.15) !important;
	color: #c084fc !important;
	border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
.log-badge.log-mod {
	background: rgba(34, 197, 94, 0.15) !important;
	color: #4ade80 !important;
	border: 1px solid rgba(34, 197, 94, 0.3) !important;
}
.log-badge.log-shutdown {
	background: rgba(244, 63, 94, 0.18) !important;
	color: #fb7185 !important;
	border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

/* ==========================================================================
   Section 13: 5 Modern Skin Templates (Dark & Light Theme Variations)
   Reacts to the sidebar Dark Mode toggle: data-bs-theme="dark" / "light"
   ========================================================================== */

/* Template 1: default (Modern Slate & Precision Navy) */
:root[data-skin-template="default"],
body[data-skin-template="default"],
.skin-mini[data-skin="default"] {
	--brand-primary: #3b82f6;
	--brand-primary-hover: #2563eb;
	--brand-primary-gradient: linear-gradient(135deg, #3b82f6, #1d4ed8);
	--surface-bg-darker: #090d16;
	--surface-bg-dark: #0f172a;
	--surface-bg-card: #1e293b;
	--surface-bg-sidebar: #0b1120;
	--surface-border: rgba(255, 255, 255, 0.08);
	--surface-border-hover: rgba(59, 130, 246, 0.4);
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--text-dimmed: #64748b;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
	--skin-accent-glow: 0 0 16px rgba(59, 130, 246, 0.35);
}
[data-skin-template="default"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="default"],
.skin-mini.is-light[data-skin="default"] {
	--brand-primary: #2563eb;
	--brand-primary-hover: #1d4ed8;
	--brand-primary-gradient: linear-gradient(135deg, #2563eb, #1e40af);
	--surface-bg-darker: #a1b2ce;
	--surface-bg-dark: #b3c0d6;
	--surface-bg-card: #cbd4e2;
	--surface-bg-sidebar: #acbbd2;
	--surface-border: rgba(15, 23, 42, 0.18);
	--surface-border-hover: rgba(37, 99, 235, 0.5);
	--text-main: #0f172a;
	--text-muted: #3f4c5f;
	--text-dimmed: #5b6b81;
}

/* Template 2: neon_cyber (Synthwave Matrix & Neon HUD) */
:root[data-skin-template="neon_cyber"],
body[data-skin-template="neon_cyber"],
.skin-mini[data-skin="neon_cyber"] {
	--brand-primary: #06b6d4;
	--brand-primary-hover: #0891b2;
	--brand-primary-gradient: linear-gradient(135deg, #06b6d4, #a855f7);
	--surface-bg-darker: #02040a;
	--surface-bg-dark: #060913;
	--surface-bg-card: #0b1120;
	--surface-bg-sidebar: #030712;
	--surface-border: rgba(6, 182, 212, 0.25);
	--surface-border-hover: rgba(236, 72, 153, 0.7);
	--text-main: #ecfeff;
	--text-muted: #67e8f9;
	--text-dimmed: #475569;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 0 20px rgba(6, 182, 212, 0.15), 0 4px 16px rgba(0, 0, 0, 0.6);
	--skin-accent-glow: 0 0 18px rgba(6, 182, 212, 0.6);
}
[data-skin-template="neon_cyber"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="neon_cyber"],
.skin-mini.is-light[data-skin="neon_cyber"] {
	--brand-primary: #0891b2;
	--brand-primary-hover: #0e7490;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #c026d3);
	--surface-bg-darker: #dde5ed;
	--surface-bg-dark: #e8eef5;
	--surface-bg-card: #f4f7fa;
	--surface-bg-sidebar: #e1e9f2;
	--surface-border: rgba(8, 145, 178, 0.3);
	--surface-border-hover: rgba(192, 38, 211, 0.65);
	--text-main: #082f49;
	--text-muted: #0284c7;
	--text-dimmed: #64748b;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 14px rgba(8, 145, 178, 0.15);
	--skin-accent-glow: 0 0 14px rgba(8, 145, 178, 0.4);
}

/* Template 3: nordic_frost (Minimalist Scandinavian Monochrome) */
:root[data-skin-template="nordic_frost"],
body[data-skin-template="nordic_frost"],
.skin-mini[data-skin="nordic_frost"] {
	--brand-primary: #38bdf8;
	--brand-primary-hover: #0ea5e9;
	--brand-primary-gradient: linear-gradient(135deg, #38bdf8, #0284c7);
	--surface-bg-darker: #0c1017;
	--surface-bg-dark: #121824;
	--surface-bg-card: #182232;
	--surface-bg-sidebar: #0f141d;
	--surface-border: rgba(148, 163, 184, 0.14);
	--surface-border-hover: rgba(56, 189, 248, 0.4);
	--text-main: #f1f5f9;
	--text-muted: #94a3b8;
	--text-dimmed: #64748b;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
	--skin-accent-glow: 0 0 12px rgba(56, 189, 248, 0.28);
}
[data-skin-template="nordic_frost"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="nordic_frost"],
.skin-mini.is-light[data-skin="nordic_frost"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #075985);
	--surface-bg-darker: #e8ecf2;
	--surface-bg-dark: #f0f3f7;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e5ebf1;
	--surface-border: rgba(148, 163, 184, 0.22);
	--surface-border-hover: rgba(2, 132, 199, 0.45);
	--text-main: #0f172a;
	--text-muted: #475569;
	--text-dimmed: #94a3b8;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.05);
	--skin-accent-glow: 0 0 10px rgba(2, 132, 199, 0.25);
}

/* Template 4: aero_glass (VisionOS Glassmorphism & Depth) */
:root[data-skin-template="aero_glass"],
body[data-skin-template="aero_glass"],
.skin-mini[data-skin="aero_glass"] {
	--brand-primary: #10b981;
	--brand-primary-hover: #059669;
	--brand-primary-gradient: linear-gradient(135deg, #10b981, #6366f1);
	--surface-bg-darker: #050811;
	--surface-bg-dark: #0a0f1d;
	--surface-bg-card: rgba(20, 30, 55, 0.65);
	--surface-bg-sidebar: rgba(8, 13, 26, 0.85);
	--surface-border: rgba(255, 255, 255, 0.14);
	--surface-border-hover: rgba(16, 185, 129, 0.5);
	--text-main: #ffffff;
	--text-muted: #a5b4fc;
	--text-dimmed: #6366f1;
	--skin-radius-card: 20px;
	--skin-radius-sm: 12px;
	--skin-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	--skin-accent-glow: 0 0 24px rgba(16, 185, 129, 0.4);
}
[data-skin-template="aero_glass"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="aero_glass"],
.skin-mini.is-light[data-skin="aero_glass"] {
	--brand-primary: #059669;
	--brand-primary-hover: #047857;
	--brand-primary-gradient: linear-gradient(135deg, #059669, #4f46e5);
	--surface-bg-darker: #c2cde0;
	--surface-bg-dark: #ccd6e6;
	--surface-bg-card: rgba(255, 255, 255, 0.75);
	--surface-bg-sidebar: rgba(215, 224, 237, 0.88);
	--surface-border: rgba(255, 255, 255, 0.65);
	--surface-border-hover: rgba(5, 150, 105, 0.5);
	--text-main: #0f172a;
	--text-muted: #334155;
	--text-dimmed: #64748b;
	--skin-radius-card: 20px;
	--skin-radius-sm: 12px;
	--skin-shadow-card: 0 16px 36px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
	--skin-accent-glow: 0 0 18px rgba(5, 150, 105, 0.3);
}

/* Template 5: studio_pro (DAW Console & Darkroom Amber) */
:root[data-skin-template="studio_pro"],
body[data-skin-template="studio_pro"],
.skin-mini[data-skin="studio_pro"] {
	--brand-primary: #f59e0b;
	--brand-primary-hover: #d97706;
	--brand-primary-gradient: linear-gradient(135deg, #f59e0b, #d97706);
	--surface-bg-darker: #101012;
	--surface-bg-dark: #151518;
	--surface-bg-card: #1c1c20;
	--surface-bg-sidebar: #131315;
	--surface-border: rgba(255, 255, 255, 0.09);
	--surface-border-hover: rgba(245, 158, 11, 0.55);
	--text-main: #f4f4f5;
	--text-muted: #fbbf24;
	--text-dimmed: #71717a;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 6px 20px rgba(0, 0, 0, 0.45);
	--skin-accent-glow: 0 0 16px rgba(245, 158, 11, 0.4);
}
[data-skin-template="studio_pro"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="studio_pro"],
.skin-mini.is-light[data-skin="studio_pro"] {
	--brand-primary: #d97706;
	--brand-primary-hover: #b45309;
	--brand-primary-gradient: linear-gradient(135deg, #d97706, #92400e);
	--surface-bg-darker: #c9cdd4;
	--surface-bg-dark: #d3d7de;
	--surface-bg-card: #e3e6ec;
	--surface-bg-sidebar: #cbd0d8;
	--surface-border: rgba(24, 24, 27, 0.16);
	--surface-border-hover: rgba(217, 119, 6, 0.5);
	--text-main: #18181b;
	--text-muted: #78350f;
	--text-dimmed: #52525b;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(24, 24, 27, 0.08);
	--skin-accent-glow: 0 0 12px rgba(217, 119, 6, 0.3);
}

/* Card, panel and element radius binding to active skin template */
.card,
.content-settings .card,
.media-browser-card,
.radio-station-card,
.queue-header-bar,
.history-search-container,
.commandlist-search-container,
.channelswitch-toolbar,
.settings-search-container {
	border-radius: var(--skin-radius-card) !important;
}

/* Glassmorphism treatment for aero_glass */
[data-skin-template="aero_glass"] .card,
[data-skin-template="aero_glass"] #header,
[data-skin-template="aero_glass"] #leftPanel,
[data-skin-template="aero_glass"] #rightPanel,
[data-skin-template="aero_glass"] #player,
[data-skin-template="aero_glass"] .modal-content {
	backdrop-filter: blur(18px) saturate(190%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(190%) !important;
}

/* Neon Cyber border glow and tech font accent */
[data-skin-template="neon_cyber"] .card,
[data-skin-template="neon_cyber"] .media-browser-card,
[data-skin-template="neon_cyber"] .radio-station-card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="neon_cyber"] .badge,
[data-skin-template="neon_cyber"] .text-muted.small,
[data-skin-template="neon_cyber"] #header-info {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
	letter-spacing: 0.5px;
}

/* Studio Pro industrial knurling & VU indicator feel */
[data-skin-template="studio_pro"] .btn-primary {
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}
[data-skin-template="studio_pro"] .badge.bg-success {
	background-color: #22c55e !important;
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.6) !important;
}

/* Nordic Frost clean lines */
[data-skin-template="nordic_frost"] .card {
	border: 1px solid var(--surface-border) !important;
	box-shadow: var(--skin-shadow-card) !important;
}



/* Template 6: crimson_valkyrie (Blood Moon & Ruby Stealth / Imperial Rose) */
:root[data-skin-template="crimson_valkyrie"],
body[data-skin-template="crimson_valkyrie"],
.skin-mini[data-skin="crimson_valkyrie"] {
	--brand-primary: #f43f5e;
	--brand-primary-hover: #e11d48;
	--brand-primary-gradient: linear-gradient(135deg, #f43f5e, #be123c);
	--surface-bg-darker: #0a0507;
	--surface-bg-dark: #12090e;
	--surface-bg-card: #1c0e15;
	--surface-bg-sidebar: #0f070b;
	--surface-border: rgba(244, 63, 94, 0.22);
	--surface-border-hover: rgba(244, 63, 94, 0.6);
	--text-main: #fff1f2;
	--text-muted: #fda4af;
	--text-dimmed: #9f1239;
	--skin-radius-card: 8px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(244, 63, 94, 0.15);
	--skin-accent-glow: 0 0 20px rgba(244, 63, 94, 0.45);
}
[data-skin-template="crimson_valkyrie"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="crimson_valkyrie"],
.skin-mini.is-light[data-skin="crimson_valkyrie"] {
	--brand-primary: #e11d48;
	--brand-primary-hover: #be123c;
	--brand-primary-gradient: linear-gradient(135deg, #e11d48, #9f1239);
	--surface-bg-darker: #f5e4e8;
	--surface-bg-dark: #faeef0;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #faedf0;
	--surface-border: rgba(225, 29, 72, 0.2);
	--surface-border-hover: rgba(225, 29, 72, 0.55);
	--text-main: #4c0519;
	--text-muted: #881337;
	--text-dimmed: #be123c;
	--skin-radius-card: 8px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 3px 12px rgba(225, 29, 72, 0.08);
	--skin-accent-glow: 0 0 14px rgba(225, 29, 72, 0.3);
}

/* Template 7: emerald_matrix (Terminal Phosphor & Deep Jade / Jade Blossom) */
:root[data-skin-template="emerald_matrix"],
body[data-skin-template="emerald_matrix"],
.skin-mini[data-skin="emerald_matrix"] {
	--brand-primary: #10b981;
	--brand-primary-hover: #059669;
	--brand-primary-gradient: linear-gradient(135deg, #10b981, #047857);
	--surface-bg-darker: #020904;
	--surface-bg-dark: #051409;
	--surface-bg-card: #091f0e;
	--surface-bg-sidebar: #040e06;
	--surface-border: rgba(16, 185, 129, 0.24);
	--surface-border-hover: rgba(16, 185, 129, 0.65);
	--text-main: #ecfdf5;
	--text-muted: #6ee7b7;
	--text-dimmed: #065f46;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(16, 185, 129, 0.16);
	--skin-accent-glow: 0 0 18px rgba(16, 185, 129, 0.5);
}
[data-skin-template="emerald_matrix"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="emerald_matrix"],
.skin-mini.is-light[data-skin="emerald_matrix"] {
	--brand-primary: #059669;
	--brand-primary-hover: #047857;
	--brand-primary-gradient: linear-gradient(135deg, #059669, #065f46);
	--surface-bg-darker: #dcf2e5;
	--surface-bg-dark: #e8f7ee;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e0f4e8;
	--surface-border: rgba(5, 150, 105, 0.22);
	--surface-border-hover: rgba(5, 150, 105, 0.55);
	--text-main: #052e16;
	--text-muted: #065f46;
	--text-dimmed: #059669;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(5, 150, 105, 0.08);
	--skin-accent-glow: 0 0 12px rgba(5, 150, 105, 0.25);
}

/* Template 8: solar_gold (Royal Obsidian & Champagne Gold / Champagne Executive) */
:root[data-skin-template="solar_gold"],
body[data-skin-template="solar_gold"],
.skin-mini[data-skin="solar_gold"] {
	--brand-primary: #eab308;
	--brand-primary-hover: #ca8a04;
	--brand-primary-gradient: linear-gradient(135deg, #f59e0b, #ca8a04);
	--surface-bg-darker: #0c0c0e;
	--surface-bg-dark: #121215;
	--surface-bg-card: #1a191e;
	--surface-bg-sidebar: #0f0f11;
	--surface-border: rgba(234, 179, 8, 0.24);
	--surface-border-hover: rgba(234, 179, 8, 0.65);
	--text-main: #fefce8;
	--text-muted: #fde047;
	--text-dimmed: #854d0e;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.55), 0 0 16px rgba(234, 179, 8, 0.12);
	--skin-accent-glow: 0 0 18px rgba(234, 179, 8, 0.45);
}
[data-skin-template="solar_gold"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="solar_gold"],
.skin-mini.is-light[data-skin="solar_gold"] {
	--brand-primary: #b45309;
	--brand-primary-hover: #92400e;
	--brand-primary-gradient: linear-gradient(135deg, #d97706, #b45309);
	--surface-bg-darker: #f4eee2;
	--surface-bg-dark: #faf5ec;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #f5eedf;
	--surface-border: rgba(180, 83, 9, 0.2);
	--surface-border-hover: rgba(180, 83, 9, 0.55);
	--text-main: #1c1917;
	--text-muted: #78350f;
	--text-dimmed: #92400e;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 2px 10px rgba(180, 83, 9, 0.08);
	--skin-accent-glow: 0 0 12px rgba(180, 83, 9, 0.25);
}

/* Template 9: synthwave_sunset (Outrun 80s & Retro Neon / Miami Daylight) */
:root[data-skin-template="synthwave_sunset"],
body[data-skin-template="synthwave_sunset"],
.skin-mini[data-skin="synthwave_sunset"] {
	--brand-primary: #ff007f;
	--brand-primary-hover: #e00070;
	--brand-primary-gradient: linear-gradient(135deg, #ff007f, #7928ca);
	--surface-bg-darker: #0b0618;
	--surface-bg-dark: #120926;
	--surface-bg-card: #1c103a;
	--surface-bg-sidebar: #0e0720;
	--surface-border: rgba(255, 0, 127, 0.26);
	--surface-border-hover: rgba(121, 40, 202, 0.7);
	--text-main: #fff0f9;
	--text-muted: #f472b6;
	--text-dimmed: #831843;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 0, 127, 0.16);
	--skin-accent-glow: 0 0 20px rgba(255, 0, 127, 0.5);
}
[data-skin-template="synthwave_sunset"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="synthwave_sunset"],
.skin-mini.is-light[data-skin="synthwave_sunset"] {
	--brand-primary: #c026d3;
	--brand-primary-hover: #a21caf;
	--brand-primary-gradient: linear-gradient(135deg, #c026d3, #7e22ce);
	--surface-bg-darker: #ede3f5;
	--surface-bg-dark: #f6ecfc;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #eee4f7;
	--surface-border: rgba(192, 38, 211, 0.22);
	--surface-border-hover: rgba(192, 38, 211, 0.55);
	--text-main: #3b0764;
	--text-muted: #701a75;
	--text-dimmed: #a21caf;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 2px 12px rgba(192, 38, 211, 0.08);
	--skin-accent-glow: 0 0 12px rgba(192, 38, 211, 0.28);
}

/* Template 10: carbon_stealth (Aerospace F-22 Stealth & Monochromatic Graphite / Platinum Titanium) */
:root[data-skin-template="carbon_stealth"],
body[data-skin-template="carbon_stealth"],
.skin-mini[data-skin="carbon_stealth"] {
	--brand-primary: #94a3b8;
	--brand-primary-hover: #cbd5e1;
	--brand-primary-gradient: linear-gradient(135deg, #94a3b8, #475569);
	--surface-bg-darker: #080808;
	--surface-bg-dark: #0f0f0f;
	--surface-bg-card: #171717;
	--surface-bg-sidebar: #0b0b0b;
	--surface-border: rgba(255, 255, 255, 0.1);
	--surface-border-hover: rgba(148, 163, 184, 0.5);
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--text-dimmed: #475569;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.6);
	--skin-accent-glow: 0 0 12px rgba(148, 163, 184, 0.3);
}
[data-skin-template="carbon_stealth"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="carbon_stealth"],
.skin-mini.is-light[data-skin="carbon_stealth"] {
	--brand-primary: #334155;
	--brand-primary-hover: #1e293b;
	--brand-primary-gradient: linear-gradient(135deg, #475569, #1e293b);
	--surface-bg-darker: #dcdfe4;
	--surface-bg-dark: #e8ebf0;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e1e4ea;
	--surface-border: rgba(15, 23, 42, 0.16);
	--surface-border-hover: rgba(51, 65, 85, 0.5);
	--text-main: #0f172a;
	--text-muted: #334155;
	--text-dimmed: #64748b;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
	--skin-accent-glow: 0 0 8px rgba(51, 65, 85, 0.2);
}

/* Embellishments for new templates */
[data-skin-template="crimson_valkyrie"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="emerald_matrix"] .badge,
[data-skin-template="emerald_matrix"] .text-muted.small {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
[data-skin-template="solar_gold"] .btn-primary {
	box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35) !important;
}
[data-skin-template="synthwave_sunset"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="carbon_stealth"] .btn,
[data-skin-template="carbon_stealth"] .card {
	border-radius: var(--skin-radius-card) !important;
}


/* Template 11: amethyst_haze (Mystic Royalty & Lavender Quartz / Lilac Blossom) */
:root[data-skin-template="amethyst_haze"],
body[data-skin-template="amethyst_haze"],
.skin-mini[data-skin="amethyst_haze"] {
	--brand-primary: #a855f7;
	--brand-primary-hover: #9333ea;
	--brand-primary-gradient: linear-gradient(135deg, #a855f7, #6366f1);
	--surface-bg-darker: #090514;
	--surface-bg-dark: #0f0921;
	--surface-bg-card: #180f33;
	--surface-bg-sidebar: #0c071a;
	--surface-border: rgba(168, 85, 247, 0.22);
	--surface-border-hover: rgba(168, 85, 247, 0.65);
	--text-main: #faf5ff;
	--text-muted: #d8b4fe;
	--text-dimmed: #6b21a8;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.5), 0 0 16px rgba(168, 85, 247, 0.16);
	--skin-accent-glow: 0 0 20px rgba(168, 85, 247, 0.45);
}
[data-skin-template="amethyst_haze"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="amethyst_haze"],
.skin-mini.is-light[data-skin="amethyst_haze"] {
	--brand-primary: #7e22ce;
	--brand-primary-hover: #6b21a8;
	--brand-primary-gradient: linear-gradient(135deg, #7e22ce, #4f46e5);
	--surface-bg-darker: #ede5f8;
	--surface-bg-dark: #f5edfc;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #efe6f8;
	--surface-border: rgba(126, 34, 206, 0.2);
	--surface-border-hover: rgba(126, 34, 206, 0.55);
	--text-main: #3b0764;
	--text-muted: #6b21a8;
	--text-dimmed: #9333ea;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 2px 10px rgba(126, 34, 206, 0.08);
	--skin-accent-glow: 0 0 12px rgba(126, 34, 206, 0.25);
}

/* Template 12: deep_abyss (Mariana Trench & Bioluminescent Aqua / Coastal Lagoon) */
:root[data-skin-template="deep_abyss"],
body[data-skin-template="deep_abyss"],
.skin-mini[data-skin="deep_abyss"] {
	--brand-primary: #00f2fe;
	--brand-primary-hover: #00c6ff;
	--brand-primary-gradient: linear-gradient(135deg, #00f2fe, #4facfe);
	--surface-bg-darker: #020b14;
	--surface-bg-dark: #041424;
	--surface-bg-card: #08213a;
	--surface-bg-sidebar: #030e1a;
	--surface-border: rgba(0, 242, 254, 0.22);
	--surface-border-hover: rgba(79, 172, 254, 0.65);
	--text-main: #f0fdfa;
	--text-muted: #5eead4;
	--text-dimmed: #0e7490;
	--skin-radius-card: 16px;
	--skin-radius-sm: 10px;
	--skin-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 242, 254, 0.15);
	--skin-accent-glow: 0 0 22px rgba(0, 242, 254, 0.45);
}
[data-skin-template="deep_abyss"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="deep_abyss"],
.skin-mini.is-light[data-skin="deep_abyss"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #0891b2);
	--surface-bg-darker: #d5ecf8;
	--surface-bg-dark: #e4f4fc;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #d9effa;
	--surface-border: rgba(2, 132, 199, 0.22);
	--surface-border-hover: rgba(2, 132, 199, 0.55);
	--text-main: #082f49;
	--text-muted: #0369a1;
	--text-dimmed: #0284c7;
	--skin-radius-card: 16px;
	--skin-radius-sm: 10px;
	--skin-shadow-card: 0 2px 10px rgba(2, 132, 199, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Template 13: tokyo_drift (Neo-Tokyo Midnight & Electric Lime / Akihabara Daylight) */
:root[data-skin-template="tokyo_drift"],
body[data-skin-template="tokyo_drift"],
.skin-mini[data-skin="tokyo_drift"] {
	--brand-primary: #a3e635;
	--brand-primary-hover: #84cc16;
	--brand-primary-gradient: linear-gradient(135deg, #a3e635, #22c55e);
	--surface-bg-darker: #070708;
	--surface-bg-dark: #0e0e11;
	--surface-bg-card: #15161b;
	--surface-bg-sidebar: #0a0a0c;
	--surface-border: rgba(163, 230, 53, 0.22);
	--surface-border-hover: rgba(34, 197, 94, 0.7);
	--text-main: #f7fee7;
	--text-muted: #bef264;
	--text-dimmed: #4d7c0f;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(163, 230, 53, 0.16);
	--skin-accent-glow: 0 0 18px rgba(163, 230, 53, 0.5);
}
[data-skin-template="tokyo_drift"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="tokyo_drift"],
.skin-mini.is-light[data-skin="tokyo_drift"] {
	--brand-primary: #65a30d;
	--brand-primary-hover: #4d7c0f;
	--brand-primary-gradient: linear-gradient(135deg, #65a30d, #16a34a);
	--surface-bg-darker: #e4e6ea;
	--surface-bg-dark: #f0f2f5;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e8ebef;
	--surface-border: rgba(101, 163, 13, 0.24);
	--surface-border-hover: rgba(101, 163, 13, 0.6);
	--text-main: #09090b;
	--text-muted: #3f6212;
	--text-dimmed: #65a30d;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(101, 163, 13, 0.08);
	--skin-accent-glow: 0 0 12px rgba(101, 163, 13, 0.25);
}

/* Template 14: copper_forge (Steampunk Foundry & Molten Bronze / Antique Brass) */
:root[data-skin-template="copper_forge"],
body[data-skin-template="copper_forge"],
.skin-mini[data-skin="copper_forge"] {
	--brand-primary: #fb923c;
	--brand-primary-hover: #f97316;
	--brand-primary-gradient: linear-gradient(135deg, #fb923c, #ea580c);
	--surface-bg-darker: #0e0907;
	--surface-bg-dark: #160f0b;
	--surface-bg-card: #201712;
	--surface-bg-sidebar: #120b08;
	--surface-border: rgba(251, 146, 60, 0.24);
	--surface-border-hover: rgba(251, 146, 60, 0.65);
	--text-main: #fff7ed;
	--text-muted: #fdba74;
	--text-dimmed: #9a3412;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.55), 0 0 16px rgba(251, 146, 60, 0.14);
	--skin-accent-glow: 0 0 18px rgba(251, 146, 60, 0.45);
}
[data-skin-template="copper_forge"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="copper_forge"],
.skin-mini.is-light[data-skin="copper_forge"] {
	--brand-primary: #c2410c;
	--brand-primary-hover: #9a3412;
	--brand-primary-gradient: linear-gradient(135deg, #ea580c, #c2410c);
	--surface-bg-darker: #f5e8db;
	--surface-bg-dark: #faefe4;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #f7ebe0;
	--surface-border: rgba(194, 65, 12, 0.2);
	--surface-border-hover: rgba(194, 65, 12, 0.55);
	--text-main: #431407;
	--text-muted: #7c2d12;
	--text-dimmed: #c2410c;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(194, 65, 12, 0.08);
	--skin-accent-glow: 0 0 12px rgba(194, 65, 12, 0.25);
}

/* Template 15: cherry_blossom (Sakura Garden & Japanese Minimalist / Spring Petal) */
:root[data-skin-template="cherry_blossom"],
body[data-skin-template="cherry_blossom"],
.skin-mini[data-skin="cherry_blossom"] {
	--brand-primary: #f472b6;
	--brand-primary-hover: #ec4899;
	--brand-primary-gradient: linear-gradient(135deg, #f472b6, #fb7185);
	--surface-bg-darker: #0f050b;
	--surface-bg-dark: #170912;
	--surface-bg-card: #22101b;
	--surface-bg-sidebar: #13070f;
	--surface-border: rgba(244, 114, 182, 0.22);
	--surface-border-hover: rgba(251, 113, 133, 0.65);
	--text-main: #fdf2f8;
	--text-muted: #fbcfe8;
	--text-dimmed: #9d174d;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.5), 0 0 16px rgba(244, 114, 182, 0.15);
	--skin-accent-glow: 0 0 18px rgba(244, 114, 182, 0.45);
}
[data-skin-template="cherry_blossom"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="cherry_blossom"],
.skin-mini.is-light[data-skin="cherry_blossom"] {
	--brand-primary: #db2777;
	--brand-primary-hover: #be185d;
	--brand-primary-gradient: linear-gradient(135deg, #db2777, #e11d48);
	--surface-bg-darker: #f7e3ef;
	--surface-bg-dark: #fcedf6;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #f8e7f1;
	--surface-border: rgba(219, 39, 119, 0.2);
	--surface-border-hover: rgba(219, 39, 119, 0.55);
	--text-main: #701a75;
	--text-muted: #86198f;
	--text-dimmed: #db2777;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 2px 10px rgba(219, 39, 119, 0.08);
	--skin-accent-glow: 0 0 12px rgba(219, 39, 119, 0.25);
}

/* Embellishments for templates 11-15 */
[data-skin-template="amethyst_haze"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="deep_abyss"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="tokyo_drift"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}
[data-skin-template="copper_forge"] .btn-primary {
	box-shadow: 0 2px 10px rgba(251, 146, 60, 0.35) !important;
}
[data-skin-template="cherry_blossom"] .card {
	box-shadow: var(--skin-shadow-card) !important;
}


/* Template 16: cyberpunk_2077 (Night City HUD / Arasaka Tech) */
:root[data-skin-template="cyberpunk_2077"],
body[data-skin-template="cyberpunk_2077"],
.skin-mini[data-skin="cyberpunk_2077"] {
	--brand-primary: #fcee0a;
	--brand-primary-hover: #e5d800;
	--brand-primary-gradient: linear-gradient(135deg, #fcee0a, #00f0ff);
	--surface-bg-darker: #070709;
	--surface-bg-dark: #0d0d12;
	--surface-bg-card: #14141c;
	--surface-bg-sidebar: #09090d;
	--surface-border: rgba(252, 238, 10, 0.35);
	--surface-border-hover: rgba(0, 240, 255, 0.8);
	--text-main: #fdffea;
	--text-muted: #fef08a;
	--text-dimmed: #854d0e;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(252, 238, 10, 0.2);
	--skin-accent-glow: 0 0 20px rgba(252, 238, 10, 0.55);
}
[data-skin-template="cyberpunk_2077"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="cyberpunk_2077"],
.skin-mini.is-light[data-skin="cyberpunk_2077"] {
	--brand-primary: #ff003c;
	--brand-primary-hover: #d00030;
	--brand-primary-gradient: linear-gradient(135deg, #ff003c, #0099ff);
	--surface-bg-darker: #e3e4e9;
	--surface-bg-dark: #edf0f5;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e6e8ee;
	--surface-border: rgba(255, 0, 60, 0.28);
	--surface-border-hover: rgba(0, 153, 255, 0.65);
	--text-main: #0a0a0f;
	--text-muted: #881337;
	--text-dimmed: #0284c7;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 2px 10px rgba(255, 0, 60, 0.1);
	--skin-accent-glow: 0 0 12px rgba(255, 0, 60, 0.3);
}

/* Template 17: eva_unit01 (Evangelion NERV Terminal) */
:root[data-skin-template="eva_unit01"],
body[data-skin-template="eva_unit01"],
.skin-mini[data-skin="eva_unit01"] {
	--brand-primary: #39ff14;
	--brand-primary-hover: #22c55e;
	--brand-primary-gradient: linear-gradient(135deg, #39ff14, #a855f7);
	--surface-bg-darker: #080210;
	--surface-bg-dark: #100420;
	--surface-bg-card: #1a0833;
	--surface-bg-sidebar: #0c0318;
	--surface-border: rgba(57, 255, 20, 0.32);
	--surface-border-hover: rgba(168, 85, 247, 0.7);
	--text-main: #f0fdf4;
	--text-muted: #86efac;
	--text-dimmed: #7e22ce;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.65), 0 0 16px rgba(57, 255, 20, 0.22);
	--skin-accent-glow: 0 0 22px rgba(57, 255, 20, 0.55);
}
[data-skin-template="eva_unit01"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="eva_unit01"],
.skin-mini.is-light[data-skin="eva_unit01"] {
	--brand-primary: #15803d;
	--brand-primary-hover: #166534;
	--brand-primary-gradient: linear-gradient(135deg, #16a34a, #7c3aed);
	--surface-bg-darker: #e8e3f0;
	--surface-bg-dark: #f2edf8;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #ebe5f3;
	--surface-border: rgba(22, 163, 74, 0.26);
	--surface-border-hover: rgba(124, 58, 237, 0.55);
	--text-main: #1e1035;
	--text-muted: #15803d;
	--text-dimmed: #6b21a8;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 2px 10px rgba(22, 163, 74, 0.08);
	--skin-accent-glow: 0 0 12px rgba(22, 163, 74, 0.25);
}

/* Template 18: blade_runner (Tyrell 2049 / Los Angeles 2049 Rain) */
:root[data-skin-template="blade_runner"],
body[data-skin-template="blade_runner"],
.skin-mini[data-skin="blade_runner"] {
	--brand-primary: #ff8c00;
	--brand-primary-hover: #ea580c;
	--brand-primary-gradient: linear-gradient(135deg, #ff8c00, #00e5ff);
	--surface-bg-darker: #060608;
	--surface-bg-dark: #0b0c10;
	--surface-bg-card: #13151b;
	--surface-bg-sidebar: #08090c;
	--surface-border: rgba(255, 140, 0, 0.28);
	--surface-border-hover: rgba(0, 229, 255, 0.65);
	--text-main: #fff7ed;
	--text-muted: #fdba74;
	--text-dimmed: #0891b2;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 140, 0, 0.18);
	--skin-accent-glow: 0 0 20px rgba(255, 140, 0, 0.5);
}
[data-skin-template="blade_runner"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="blade_runner"],
.skin-mini.is-light[data-skin="blade_runner"] {
	--brand-primary: #c2410c;
	--brand-primary-hover: #9a3412;
	--brand-primary-gradient: linear-gradient(135deg, #ea580c, #0284c7);
	--surface-bg-darker: #ebe1d4;
	--surface-bg-dark: #f7ede0;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #ede2d3;
	--surface-border: rgba(194, 65, 12, 0.24);
	--surface-border-hover: rgba(2, 132, 199, 0.55);
	--text-main: #2a1506;
	--text-muted: #9a3412;
	--text-dimmed: #0369a1;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(194, 65, 12, 0.08);
	--skin-accent-glow: 0 0 12px rgba(194, 65, 12, 0.25);
}

/* Template 19: spotify_emerald (Spotify Stream / Pitch Obsidian) */
:root[data-skin-template="spotify_emerald"],
body[data-skin-template="spotify_emerald"],
.skin-mini[data-skin="spotify_emerald"] {
	--brand-primary: #1ed760;
	--brand-primary-hover: #1db954;
	--brand-primary-gradient: linear-gradient(135deg, #1ed760, #1db954);
	--surface-bg-darker: #121212;
	--surface-bg-dark: #181818;
	--surface-bg-card: #242424;
	--surface-bg-sidebar: #000000;
	--surface-border: rgba(255, 255, 255, 0.08);
	--surface-border-hover: rgba(30, 215, 96, 0.55);
	--text-main: #ffffff;
	--text-muted: #b3b3b3;
	--text-dimmed: #6a6a6a;
	--skin-radius-card: 16px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
	--skin-accent-glow: 0 0 16px rgba(30, 215, 96, 0.4);
}
[data-skin-template="spotify_emerald"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="spotify_emerald"],
.skin-mini.is-light[data-skin="spotify_emerald"] {
	--brand-primary: #15803d;
	--brand-primary-hover: #166534;
	--brand-primary-gradient: linear-gradient(135deg, #16a34a, #15803d);
	--surface-bg-darker: #e2e8f0;
	--surface-bg-dark: #edf2f7;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e5ebf2;
	--surface-border: rgba(15, 23, 42, 0.12);
	--surface-border-hover: rgba(22, 163, 74, 0.5);
	--text-main: #121212;
	--text-muted: #4b5563;
	--text-dimmed: #15803d;
	--skin-radius-card: 16px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 2px 10px rgba(15, 23, 42, 0.06);
	--skin-accent-glow: 0 0 10px rgba(22, 163, 74, 0.25);
}

/* Template 20: elden_ring (Tarnished Grace / Golden Erdtree) */
:root[data-skin-template="elden_ring"],
body[data-skin-template="elden_ring"],
.skin-mini[data-skin="elden_ring"] {
	--brand-primary: #ffd700;
	--brand-primary-hover: #d4af37;
	--brand-primary-gradient: linear-gradient(135deg, #ffd700, #b8860b);
	--surface-bg-darker: #0a0908;
	--surface-bg-dark: #12100d;
	--surface-bg-card: #1c1813;
	--surface-bg-sidebar: #0e0c0a;
	--surface-border: rgba(212, 175, 55, 0.32);
	--surface-border-hover: rgba(255, 215, 0, 0.7);
	--text-main: #fef9e7;
	--text-muted: #e2c974;
	--text-dimmed: #92400e;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.65), 0 0 16px rgba(212, 175, 55, 0.22);
	--skin-accent-glow: 0 0 20px rgba(255, 215, 0, 0.5);
}
[data-skin-template="elden_ring"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="elden_ring"],
.skin-mini.is-light[data-skin="elden_ring"] {
	--brand-primary: #b45309;
	--brand-primary-hover: #92400e;
	--brand-primary-gradient: linear-gradient(135deg, #d97706, #92400e);
	--surface-bg-darker: #f0e9d8;
	--surface-bg-dark: #f8f3e7;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #f2ebd9;
	--surface-border: rgba(180, 83, 9, 0.24);
	--surface-border-hover: rgba(217, 119, 6, 0.6);
	--text-main: #271a06;
	--text-muted: #78350f;
	--text-dimmed: #b45309;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 2px 10px rgba(180, 83, 9, 0.08);
	--skin-accent-glow: 0 0 12px rgba(180, 83, 9, 0.25);
}

/* Template 21: stranger_synth (Hawkins 1983 / The Upside Down) */
:root[data-skin-template="stranger_synth"],
body[data-skin-template="stranger_synth"],
.skin-mini[data-skin="stranger_synth"] {
	--brand-primary: #ff1133;
	--brand-primary-hover: #dc2626;
	--brand-primary-gradient: linear-gradient(135deg, #ff1133, #7f1d1d);
	--surface-bg-darker: #06080d;
	--surface-bg-dark: #0c1017;
	--surface-bg-card: #141b26;
	--surface-bg-sidebar: #080a11;
	--surface-border: rgba(255, 17, 51, 0.32);
	--surface-border-hover: rgba(255, 17, 51, 0.75);
	--text-main: #fff1f2;
	--text-muted: #fda4af;
	--text-dimmed: #991b1b;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 17, 51, 0.28);
	--skin-accent-glow: 0 0 22px rgba(255, 17, 51, 0.6);
}
[data-skin-template="stranger_synth"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="stranger_synth"],
.skin-mini.is-light[data-skin="stranger_synth"] {
	--brand-primary: #b91c1c;
	--brand-primary-hover: #991b1b;
	--brand-primary-gradient: linear-gradient(135deg, #dc2626, #1e3a8a);
	--surface-bg-darker: #f5ebe0;
	--surface-bg-dark: #faf3ec;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #f7ede2;
	--surface-border: rgba(185, 28, 28, 0.22);
	--surface-border-hover: rgba(30, 58, 138, 0.6);
	--text-main: #450a0a;
	--text-muted: #991b1b;
	--text-dimmed: #1e3a8a;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(185, 28, 28, 0.08);
	--skin-accent-glow: 0 0 12px rgba(185, 28, 28, 0.25);
}

/* Template 22: demon_slayer (Nichirin Water Breathing) */
:root[data-skin-template="demon_slayer"],
body[data-skin-template="demon_slayer"],
.skin-mini[data-skin="demon_slayer"] {
	--brand-primary: #00f2fe;
	--brand-primary-hover: #0ea5e9;
	--brand-primary-gradient: linear-gradient(135deg, #00f2fe, #ff416c);
	--surface-bg-darker: #060b08;
	--surface-bg-dark: #0b140f;
	--surface-bg-card: #122119;
	--surface-bg-sidebar: #08100c;
	--surface-border: rgba(0, 242, 254, 0.28);
	--surface-border-hover: rgba(255, 65, 108, 0.7);
	--text-main: #f0fdfa;
	--text-muted: #67e8f9;
	--text-dimmed: #e11d48;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 242, 254, 0.22);
	--skin-accent-glow: 0 0 20px rgba(0, 242, 254, 0.5);
}
[data-skin-template="demon_slayer"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="demon_slayer"],
.skin-mini.is-light[data-skin="demon_slayer"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #e11d48);
	--surface-bg-darker: #daf0e6;
	--surface-bg-dark: #eaf6ef;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #def2e8;
	--surface-border: rgba(2, 132, 199, 0.24);
	--surface-border-hover: rgba(225, 29, 72, 0.55);
	--text-main: #042f2e;
	--text-muted: #0f766e;
	--text-dimmed: #be123c;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 2px 10px rgba(2, 132, 199, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Template 23: discord_blurple (Gamer Lounge & Nitro) */
:root[data-skin-template="discord_blurple"],
body[data-skin-template="discord_blurple"],
.skin-mini[data-skin="discord_blurple"] {
	--brand-primary: #5865f2;
	--brand-primary-hover: #4752c4;
	--brand-primary-gradient: linear-gradient(135deg, #5865f2, #eb459e);
	--surface-bg-darker: #1e1f22;
	--surface-bg-dark: #2b2d31;
	--surface-bg-card: #313338;
	--surface-bg-sidebar: #1e1f22;
	--surface-border: rgba(255, 255, 255, 0.08);
	--surface-border-hover: rgba(88, 101, 242, 0.6);
	--text-main: #f2f3f5;
	--text-muted: #949ba4;
	--text-dimmed: #5865f2;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.35);
	--skin-accent-glow: 0 0 16px rgba(88, 101, 242, 0.4);
}
[data-skin-template="discord_blurple"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="discord_blurple"],
.skin-mini.is-light[data-skin="discord_blurple"] {
	--brand-primary: #4752c4;
	--brand-primary-hover: #3c45a5;
	--brand-primary-gradient: linear-gradient(135deg, #5865f2, #eb459e);
	--surface-bg-darker: #e3e5e8;
	--surface-bg-dark: #ebedef;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e3e5e8;
	--surface-border: rgba(6, 6, 7, 0.12);
	--surface-border-hover: rgba(88, 101, 242, 0.5);
	--text-main: #060607;
	--text-muted: #4e5058;
	--text-dimmed: #5865f2;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 2px 10px rgba(6, 6, 7, 0.06);
	--skin-accent-glow: 0 0 12px rgba(88, 101, 242, 0.25);
}

/* Skin 24: arcane_hextech */
:root[data-skin-template="arcane_hextech"],
body[data-skin-template="arcane_hextech"],
.skin-mini[data-skin="arcane_hextech"] {
	--brand-primary: #00f5d4;
	--brand-primary-hover: #00d2b5;
	--brand-primary-gradient: linear-gradient(135deg, #00f5d4 0%, #7928ca 50%, #ff007f 100%);
	--surface-bg-darker: #090814;
	--surface-bg-dark: #100d22;
	--surface-bg-card: #181432;
	--surface-bg-sidebar: #0e0b1d;
	--surface-border: rgba(201, 162, 77, 0.28);
	--surface-border-hover: rgba(0, 245, 212, 0.7);
	--text-main: #f3f0ff;
	--text-muted: #a79fc7;
	--text-dimmed: #c9a24d;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.65), 0 0 15px rgba(121, 40, 202, 0.2);
	--skin-accent-glow: 0 0 16px rgba(0, 245, 212, 0.35);
}
[data-skin-template="arcane_hextech"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="arcane_hextech"],
.skin-mini.is-light[data-skin="arcane_hextech"] {
	--brand-primary: #0077b6;
	--brand-primary-hover: #023e8a;
	--brand-primary-gradient: linear-gradient(135deg, #c59b27, #0077b6);
	--surface-bg-darker: #ecebf0;
	--surface-bg-dark: #f4f3f7;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #ecebf0;
	--surface-border: rgba(197, 155, 39, 0.35);
	--surface-border-hover: #0077b6;
	--text-main: #14121e;
	--text-muted: #5e5973;
	--text-dimmed: #b8860b;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 16px rgba(20, 18, 30, 0.08);
	--skin-accent-glow: 0 0 12px rgba(197, 155, 39, 0.3);
}

/* Skin 25: zelda_sheikah */
:root[data-skin-template="zelda_sheikah"],
body[data-skin-template="zelda_sheikah"],
.skin-mini[data-skin="zelda_sheikah"] {
	--brand-primary: #14b8a6;
	--brand-primary-hover: #0d9488;
	--brand-primary-gradient: linear-gradient(135deg, #14b8a6, #eab308);
	--surface-bg-darker: #070d0c;
	--surface-bg-dark: #0b1513;
	--surface-bg-card: #111f1c;
	--surface-bg-sidebar: #08110f;
	--surface-border: rgba(20, 184, 166, 0.25);
	--surface-border-hover: rgba(234, 179, 8, 0.6);
	--text-main: #e6f7f5;
	--text-muted: #82a8a2;
	--text-dimmed: #14b8a6;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.6);
	--skin-accent-glow: 0 0 16px rgba(20, 184, 166, 0.35);
}
[data-skin-template="zelda_sheikah"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="zelda_sheikah"],
.skin-mini.is-light[data-skin="zelda_sheikah"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #0d9488);
	--surface-bg-darker: #f0ede4;
	--surface-bg-dark: #f8f6f0;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #eae6db;
	--surface-border: rgba(180, 150, 100, 0.3);
	--surface-border-hover: #0284c7;
	--text-main: #1c1a17;
	--text-muted: #6b645b;
	--text-dimmed: #b45309;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 3px 12px rgba(80, 70, 50, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Skin 26: portal_aperture */
:root[data-skin-template="portal_aperture"],
body[data-skin-template="portal_aperture"],
.skin-mini[data-skin="portal_aperture"] {
	--brand-primary: #0084ff;
	--brand-primary-hover: #0066cc;
	--brand-primary-gradient: linear-gradient(135deg, #0084ff, #ff6600);
	--surface-bg-darker: #0d0e11;
	--surface-bg-dark: #14161a;
	--surface-bg-card: #1b1e24;
	--surface-bg-sidebar: #101216;
	--surface-border: rgba(255, 102, 0, 0.3);
	--surface-border-hover: #0084ff;
	--text-main: #f0f4f8;
	--text-muted: #8893a2;
	--text-dimmed: #ff6600;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.55);
	--skin-accent-glow: 0 0 14px rgba(0, 132, 255, 0.35);
}
[data-skin-template="portal_aperture"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="portal_aperture"],
.skin-mini.is-light[data-skin="portal_aperture"] {
	--brand-primary: #0070e0;
	--brand-primary-hover: #0056b3;
	--brand-primary-gradient: linear-gradient(135deg, #0070e0, #f97316);
	--surface-bg-darker: #e9ecf0;
	--surface-bg-dark: #f1f4f8;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e4e8ee;
	--surface-border: rgba(0, 0, 0, 0.12);
	--surface-border-hover: #f97316;
	--text-main: #111418;
	--text-muted: #535d6c;
	--text-dimmed: #f97316;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
	--skin-accent-glow: 0 0 10px rgba(0, 112, 224, 0.25);
}

/* Skin 27: fallout_pipboy */
:root[data-skin-template="fallout_pipboy"],
body[data-skin-template="fallout_pipboy"],
.skin-mini[data-skin="fallout_pipboy"] {
	--brand-primary: #10b981;
	--brand-primary-hover: #059669;
	--brand-primary-gradient: linear-gradient(135deg, #10b981, #34d399);
	--surface-bg-darker: #020a05;
	--surface-bg-dark: #05140a;
	--surface-bg-card: #092011;
	--surface-bg-sidebar: #040e07;
	--surface-border: rgba(16, 185, 129, 0.35);
	--surface-border-hover: #10b981;
	--text-main: #34d399;
	--text-muted: #10b981;
	--text-dimmed: #6ee7b7;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 0 16px rgba(16, 185, 129, 0.15);
	--skin-accent-glow: 0 0 18px rgba(16, 185, 129, 0.4);
}
[data-skin-template="fallout_pipboy"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="fallout_pipboy"],
.skin-mini.is-light[data-skin="fallout_pipboy"] {
	--brand-primary: #1d4ed8;
	--brand-primary-hover: #1e40af;
	--brand-primary-gradient: linear-gradient(135deg, #1d4ed8, #eab308);
	--surface-bg-darker: #e8ecf4;
	--surface-bg-dark: #f0f4fb;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e1e7f2;
	--surface-border: rgba(29, 78, 216, 0.2);
	--surface-border-hover: #eab308;
	--text-main: #0f172a;
	--text-muted: #475569;
	--text-dimmed: #ca8a04;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(29, 78, 216, 0.08);
	--skin-accent-glow: 0 0 12px rgba(234, 179, 8, 0.3);
}

/* Skin 28: halo_unsc */
:root[data-skin-template="halo_unsc"],
body[data-skin-template="halo_unsc"],
.skin-mini[data-skin="halo_unsc"] {
	--brand-primary: #f59e0b;
	--brand-primary-hover: #d97706;
	--brand-primary-gradient: linear-gradient(135deg, #f59e0b, #06b6d4);
	--surface-bg-darker: #090c09;
	--surface-bg-dark: #101610;
	--surface-bg-card: #182018;
	--surface-bg-sidebar: #0c120c;
	--surface-border: rgba(245, 158, 11, 0.3);
	--surface-border-hover: #06b6d4;
	--text-main: #e8ede8;
	--text-muted: #8c9b8c;
	--text-dimmed: #f59e0b;
	--skin-radius-card: 6px;
	--skin-radius-sm: 3px;
	--skin-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.6);
	--skin-accent-glow: 0 0 15px rgba(245, 158, 11, 0.35);
}
[data-skin-template="halo_unsc"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="halo_unsc"],
.skin-mini.is-light[data-skin="halo_unsc"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #f59e0b);
	--surface-bg-darker: #e5e9ee;
	--surface-bg-dark: #edf1f6;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dee3ea;
	--surface-border: rgba(30, 41, 59, 0.18);
	--surface-border-hover: #0284c7;
	--text-main: #0f172a;
	--text-muted: #475569;
	--text-dimmed: #d97706;
	--skin-radius-card: 6px;
	--skin-radius-sm: 3px;
	--skin-shadow-card: 0 3px 12px rgba(0, 0, 0, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Skin 29: witcher_medallion */
:root[data-skin-template="witcher_medallion"],
body[data-skin-template="witcher_medallion"],
.skin-mini[data-skin="witcher_medallion"] {
	--brand-primary: #f97316;
	--brand-primary-hover: #ea580c;
	--brand-primary-gradient: linear-gradient(135deg, #f97316, #b91c1c);
	--surface-bg-darker: #0c0a09;
	--surface-bg-dark: #141210;
	--surface-bg-card: #1c1917;
	--surface-bg-sidebar: #100e0c;
	--surface-border: rgba(249, 115, 22, 0.3);
	--surface-border-hover: #f97316;
	--text-main: #f5f5f4;
	--text-muted: #a8a29e;
	--text-dimmed: #fb923c;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.7);
	--skin-accent-glow: 0 0 16px rgba(249, 115, 22, 0.35);
}
[data-skin-template="witcher_medallion"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="witcher_medallion"],
.skin-mini.is-light[data-skin="witcher_medallion"] {
	--brand-primary: #991b1b;
	--brand-primary-hover: #7f1d1d;
	--brand-primary-gradient: linear-gradient(135deg, #991b1b, #c2410c);
	--surface-bg-darker: #ede9dc;
	--surface-bg-dark: #f5f2e8;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e5e0d1;
	--surface-border: rgba(120, 53, 15, 0.25);
	--surface-border-hover: #991b1b;
	--text-main: #1c1917;
	--text-muted: #57534e;
	--text-dimmed: #c2410c;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(80, 50, 30, 0.08);
	--skin-accent-glow: 0 0 12px rgba(153, 27, 27, 0.25);
}

/* Skin 30: akatsuki_blood */
:root[data-skin-template="akatsuki_blood"],
body[data-skin-template="akatsuki_blood"],
.skin-mini[data-skin="akatsuki_blood"] {
	--brand-primary: #dc2626;
	--brand-primary-hover: #b91c1c;
	--brand-primary-gradient: linear-gradient(135deg, #dc2626, #7f1d1d);
	--surface-bg-darker: #070708;
	--surface-bg-dark: #0e0e11;
	--surface-bg-card: #15151a;
	--surface-bg-sidebar: #09090b;
	--surface-border: rgba(220, 38, 38, 0.35);
	--surface-border-hover: #dc2626;
	--text-main: #f4f4f5;
	--text-muted: #a1a1aa;
	--text-dimmed: #ef4444;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.75), 0 0 10px rgba(220, 38, 38, 0.2);
	--skin-accent-glow: 0 0 18px rgba(220, 38, 38, 0.45);
}
[data-skin-template="akatsuki_blood"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="akatsuki_blood"],
.skin-mini.is-light[data-skin="akatsuki_blood"] {
	--brand-primary: #b91c1c;
	--brand-primary-hover: #991b1b;
	--brand-primary-gradient: linear-gradient(135deg, #b91c1c, #dc2626);
	--surface-bg-darker: #ebecef;
	--surface-bg-dark: #f3f4f6;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e4e5e9;
	--surface-border: rgba(220, 38, 38, 0.25);
	--surface-border-hover: #b91c1c;
	--text-main: #09090b;
	--text-muted: #52525b;
	--text-dimmed: #dc2626;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 3px 14px rgba(0, 0, 0, 0.08);
	--skin-accent-glow: 0 0 12px rgba(185, 28, 28, 0.25);
}

/* Skin 31: dragonball_saiyan */
:root[data-skin-template="dragonball_saiyan"],
body[data-skin-template="dragonball_saiyan"],
.skin-mini[data-skin="dragonball_saiyan"] {
	--brand-primary: #fbbf24;
	--brand-primary-hover: #f59e0b;
	--brand-primary-gradient: linear-gradient(135deg, #fbbf24 0%, #f97316 60%, #38bdf8 100%);
	--surface-bg-darker: #06070e;
	--surface-bg-dark: #0c0e1a;
	--surface-bg-card: #13172a;
	--surface-bg-sidebar: #080a13;
	--surface-border: rgba(251, 191, 36, 0.35);
	--surface-border-hover: #38bdf8;
	--text-main: #fffbeb;
	--text-muted: #94a3b8;
	--text-dimmed: #fbbf24;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.65);
	--skin-accent-glow: 0 0 20px rgba(251, 191, 36, 0.45);
}
[data-skin-template="dragonball_saiyan"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="dragonball_saiyan"],
.skin-mini.is-light[data-skin="dragonball_saiyan"] {
	--brand-primary: #ea580c;
	--brand-primary-hover: #c2410c;
	--brand-primary-gradient: linear-gradient(135deg, #ea580c, #1d4ed8);
	--surface-bg-darker: #fceddf;
	--surface-bg-dark: #fff7ed;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #fae4d2;
	--surface-border: rgba(234, 88, 12, 0.3);
	--surface-border-hover: #1d4ed8;
	--text-main: #1c1917;
	--text-muted: #64748b;
	--text-dimmed: #ea580c;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 3px 12px rgba(234, 88, 12, 0.1);
	--skin-accent-glow: 0 0 12px rgba(234, 88, 12, 0.3);
}

/* Skin 32: attack_on_titan */
:root[data-skin-template="attack_on_titan"],
body[data-skin-template="attack_on_titan"],
.skin-mini[data-skin="attack_on_titan"] {
	--brand-primary: #15803d;
	--brand-primary-hover: #166534;
	--brand-primary-gradient: linear-gradient(135deg, #15803d, #d97706);
	--surface-bg-darker: #0d0f0c;
	--surface-bg-dark: #131712;
	--surface-bg-card: #1b2119;
	--surface-bg-sidebar: #0f120e;
	--surface-border: rgba(21, 128, 61, 0.3);
	--surface-border-hover: #d97706;
	--text-main: #f0f4ee;
	--text-muted: #95a392;
	--text-dimmed: #d97706;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.65);
	--skin-accent-glow: 0 0 15px rgba(21, 128, 61, 0.35);
}
[data-skin-template="attack_on_titan"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="attack_on_titan"],
.skin-mini.is-light[data-skin="attack_on_titan"] {
	--brand-primary: #166534;
	--brand-primary-hover: #14532d;
	--brand-primary-gradient: linear-gradient(135deg, #166534, #b45309);
	--surface-bg-darker: #ebebe8;
	--surface-bg-dark: #f5f5f2;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e2e2dd;
	--surface-border: rgba(68, 64, 60, 0.2);
	--surface-border-hover: #166534;
	--text-main: #1c1917;
	--text-muted: #57534e;
	--text-dimmed: #b45309;
	--skin-radius-card: 6px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(0, 0, 0, 0.08);
	--skin-accent-glow: 0 0 12px rgba(22, 101, 52, 0.25);
}

/* Skin 33: jujutsu_kaisen */
:root[data-skin-template="jujutsu_kaisen"],
body[data-skin-template="jujutsu_kaisen"],
.skin-mini[data-skin="jujutsu_kaisen"] {
	--brand-primary: #00f5ff;
	--brand-primary-hover: #00c8d1;
	--brand-primary-gradient: linear-gradient(135deg, #00f5ff, #a855f7);
	--surface-bg-darker: #06050e;
	--surface-bg-dark: #0c0919;
	--surface-bg-card: #131026;
	--surface-bg-sidebar: #080612;
	--surface-border: rgba(0, 245, 255, 0.3);
	--surface-border-hover: #a855f7;
	--text-main: #f5f3ff;
	--text-muted: #a59fc4;
	--text-dimmed: #00f5ff;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.7), 0 0 12px rgba(168, 85, 247, 0.25);
	--skin-accent-glow: 0 0 18px rgba(0, 245, 255, 0.4);
}
[data-skin-template="jujutsu_kaisen"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="jujutsu_kaisen"],
.skin-mini.is-light[data-skin="jujutsu_kaisen"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #7c3aed);
	--surface-bg-darker: #eceaf4;
	--surface-bg-dark: #f5f4fb;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e3e0ef;
	--surface-border: rgba(124, 58, 237, 0.2);
	--surface-border-hover: #0284c7;
	--text-main: #0f172a;
	--text-muted: #64748b;
	--text-dimmed: #7c3aed;
	--skin-radius-card: 12px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 3px 12px rgba(124, 58, 237, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Skin 34: tron_legacy */
:root[data-skin-template="tron_legacy"],
body[data-skin-template="tron_legacy"],
.skin-mini[data-skin="tron_legacy"] {
	--brand-primary: #00e5ff;
	--brand-primary-hover: #00b4cc;
	--brand-primary-gradient: linear-gradient(135deg, #00e5ff, #ff6600);
	--surface-bg-darker: #000000;
	--surface-bg-dark: #050608;
	--surface-bg-card: #0a0d12;
	--surface-bg-sidebar: #020304;
	--surface-border: rgba(0, 229, 255, 0.4);
	--surface-border-hover: #ff6600;
	--text-main: #e0f7fa;
	--text-muted: #648294;
	--text-dimmed: #00e5ff;
	--skin-radius-card: 2px;
	--skin-radius-sm: 1px;
	--skin-shadow-card: 0 0 20px rgba(0, 229, 255, 0.2);
	--skin-accent-glow: 0 0 22px rgba(0, 229, 255, 0.6);
}
[data-skin-template="tron_legacy"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="tron_legacy"],
.skin-mini.is-light[data-skin="tron_legacy"] {
	--brand-primary: #0099cc;
	--brand-primary-hover: #007799;
	--brand-primary-gradient: linear-gradient(135deg, #0099cc, #ff6600);
	--surface-bg-darker: #eaf0f6;
	--surface-bg-dark: #f4f8fb;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dfe8f1;
	--surface-border: rgba(0, 0, 0, 0.2);
	--surface-border-hover: #0099cc;
	--text-main: #0a0d12;
	--text-muted: #536474;
	--text-dimmed: #ff6600;
	--skin-radius-card: 2px;
	--skin-radius-sm: 1px;
	--skin-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08);
	--skin-accent-glow: 0 0 12px rgba(0, 153, 204, 0.35);
}

/* Skin 35: matrix_resurrections */
:root[data-skin-template="matrix_resurrections"],
body[data-skin-template="matrix_resurrections"],
.skin-mini[data-skin="matrix_resurrections"] {
	--brand-primary: #00ff41;
	--brand-primary-hover: #00cc33;
	--brand-primary-gradient: linear-gradient(135deg, #00ff41, #008f11);
	--surface-bg-darker: #010402;
	--surface-bg-dark: #030a04;
	--surface-bg-card: #061307;
	--surface-bg-sidebar: #020603;
	--surface-border: rgba(0, 255, 65, 0.35);
	--surface-border-hover: #00ff41;
	--text-main: #d1ffdb;
	--text-muted: #00b32c;
	--text-dimmed: #00ff41;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 0 16px rgba(0, 255, 65, 0.15);
	--skin-accent-glow: 0 0 20px rgba(0, 255, 65, 0.45);
}
[data-skin-template="matrix_resurrections"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="matrix_resurrections"],
.skin-mini.is-light[data-skin="matrix_resurrections"] {
	--brand-primary: #059669;
	--brand-primary-hover: #047857;
	--brand-primary-gradient: linear-gradient(135deg, #059669, #10b981);
	--surface-bg-darker: #e8ede9;
	--surface-bg-dark: #f2f6f3;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dfe6e1;
	--surface-border: rgba(5, 150, 105, 0.25);
	--surface-border-hover: #059669;
	--text-main: #061f0d;
	--text-muted: #4a6351;
	--text-dimmed: #059669;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 3px 10px rgba(5, 150, 105, 0.08);
	--skin-accent-glow: 0 0 12px rgba(5, 150, 105, 0.25);
}

/* Skin 36: dune_arrakis */
:root[data-skin-template="dune_arrakis"],
body[data-skin-template="dune_arrakis"],
.skin-mini[data-skin="dune_arrakis"] {
	--brand-primary: #0091ff;
	--brand-primary-hover: #0070cc;
	--brand-primary-gradient: linear-gradient(135deg, #0091ff, #d97706);
	--surface-bg-darker: #0d0a08;
	--surface-bg-dark: #15110d;
	--surface-bg-card: #1e1914;
	--surface-bg-sidebar: #0f0c0a;
	--surface-border: rgba(217, 119, 6, 0.3);
	--surface-border-hover: #0091ff;
	--text-main: #f5f0eb;
	--text-muted: #9c8e80;
	--text-dimmed: #d97706;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.65);
	--skin-accent-glow: 0 0 16px rgba(0, 145, 255, 0.35);
}
[data-skin-template="dune_arrakis"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="dune_arrakis"],
.skin-mini.is-light[data-skin="dune_arrakis"] {
	--brand-primary: #b45309;
	--brand-primary-hover: #92400e;
	--brand-primary-gradient: linear-gradient(135deg, #b45309, #0284c7);
	--surface-bg-darker: #f0eae0;
	--surface-bg-dark: #faf5ed;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e8e0d4;
	--surface-border: rgba(180, 83, 9, 0.25);
	--surface-border-hover: #0284c7;
	--text-main: #1f160e;
	--text-muted: #6b5c4f;
	--text-dimmed: #b45309;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(100, 60, 20, 0.08);
	--skin-accent-glow: 0 0 12px rgba(180, 83, 9, 0.25);
}

/* Skin 37: batman_gotham */
:root[data-skin-template="batman_gotham"],
body[data-skin-template="batman_gotham"],
.skin-mini[data-skin="batman_gotham"] {
	--brand-primary: #ff0033;
	--brand-primary-hover: #cc0029;
	--brand-primary-gradient: linear-gradient(135deg, #ff0033, #660014);
	--surface-bg-darker: #050506;
	--surface-bg-dark: #0a0a0c;
	--surface-bg-card: #111114;
	--surface-bg-sidebar: #070708;
	--surface-border: rgba(255, 0, 51, 0.3);
	--surface-border-hover: #ff0033;
	--text-main: #f0f0f2;
	--text-muted: #84848f;
	--text-dimmed: #ff0033;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 4px 22px rgba(0, 0, 0, 0.8);
	--skin-accent-glow: 0 0 18px rgba(255, 0, 51, 0.4);
}
[data-skin-template="batman_gotham"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="batman_gotham"],
.skin-mini.is-light[data-skin="batman_gotham"] {
	--brand-primary: #b91c1c;
	--brand-primary-hover: #991b1b;
	--brand-primary-gradient: linear-gradient(135deg, #b91c1c, #1e293b);
	--surface-bg-darker: #e8e9ec;
	--surface-bg-dark: #f2f3f5;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dfdfe4;
	--surface-border: rgba(15, 23, 42, 0.2);
	--surface-border-hover: #b91c1c;
	--text-main: #09090b;
	--text-muted: #4b5563;
	--text-dimmed: #b91c1c;
	--skin-radius-card: 4px;
	--skin-radius-sm: 2px;
	--skin-shadow-card: 0 3px 12px rgba(0, 0, 0, 0.1);
	--skin-accent-glow: 0 0 12px rgba(185, 28, 28, 0.25);
}

/* Skin 38: star_wars_mandalorian */
:root[data-skin-template="star_wars_mandalorian"],
body[data-skin-template="star_wars_mandalorian"],
.skin-mini[data-skin="star_wars_mandalorian"] {
	--brand-primary: #e2e8f0;
	--brand-primary-hover: #cbd5e1;
	--brand-primary-gradient: linear-gradient(135deg, #f59e0b, #e2e8f0);
	--surface-bg-darker: #090a0d;
	--surface-bg-dark: #101217;
	--surface-bg-card: #181c24;
	--surface-bg-sidebar: #0c0e12;
	--surface-border: rgba(226, 232, 240, 0.25);
	--surface-border-hover: #f59e0b;
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--text-dimmed: #f59e0b;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.65);
	--skin-accent-glow: 0 0 16px rgba(226, 232, 240, 0.3);
}
[data-skin-template="star_wars_mandalorian"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="star_wars_mandalorian"],
.skin-mini.is-light[data-skin="star_wars_mandalorian"] {
	--brand-primary: #b45309;
	--brand-primary-hover: #92400e;
	--brand-primary-gradient: linear-gradient(135deg, #b45309, #64748b);
	--surface-bg-darker: #ece7db;
	--surface-bg-dark: #f7f4ec;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e4ddcf;
	--surface-border: rgba(100, 116, 139, 0.25);
	--surface-border-hover: #b45309;
	--text-main: #1e1b18;
	--text-muted: #645e57;
	--text-dimmed: #b45309;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(80, 70, 50, 0.08);
	--skin-accent-glow: 0 0 12px rgba(180, 83, 9, 0.25);
}

/* Skin 39: razer_chroma */
:root[data-skin-template="razer_chroma"],
body[data-skin-template="razer_chroma"],
.skin-mini[data-skin="razer_chroma"] {
	--brand-primary: #00ff00;
	--brand-primary-hover: #00cc00;
	--brand-primary-gradient: linear-gradient(135deg, #00ff00, #00f5ff);
	--surface-bg-darker: #050605;
	--surface-bg-dark: #0a0d0a;
	--surface-bg-card: #101510;
	--surface-bg-sidebar: #070907;
	--surface-border: rgba(0, 255, 0, 0.3);
	--surface-border-hover: #00ff00;
	--text-main: #f0fff0;
	--text-muted: #82a882;
	--text-dimmed: #00ff00;
	--skin-radius-card: 6px;
	--skin-radius-sm: 3px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.7);
	--skin-accent-glow: 0 0 20px rgba(0, 255, 0, 0.45);
}
[data-skin-template="razer_chroma"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="razer_chroma"],
.skin-mini.is-light[data-skin="razer_chroma"] {
	--brand-primary: #16a34a;
	--brand-primary-hover: #15803d;
	--brand-primary-gradient: linear-gradient(135deg, #16a34a, #06b6d4);
	--surface-bg-darker: #e9edf0;
	--surface-bg-dark: #f3f6f8;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e1e6ea;
	--surface-border: rgba(22, 163, 74, 0.25);
	--surface-border-hover: #16a34a;
	--text-main: #0f172a;
	--text-muted: #475569;
	--text-dimmed: #16a34a;
	--skin-radius-card: 6px;
	--skin-radius-sm: 3px;
	--skin-shadow-card: 0 3px 12px rgba(22, 163, 74, 0.08);
	--skin-accent-glow: 0 0 12px rgba(22, 163, 74, 0.25);
}

/* Skin 40: steam_deck */
:root[data-skin-template="steam_deck"],
body[data-skin-template="steam_deck"],
.skin-mini[data-skin="steam_deck"] {
	--brand-primary: #66c0f4;
	--brand-primary-hover: #4ba6dd;
	--brand-primary-gradient: linear-gradient(135deg, #66c0f4, #ff6000);
	--surface-bg-darker: #0d121a;
	--surface-bg-dark: #171a21;
	--surface-bg-card: #1b2838;
	--surface-bg-sidebar: #101520;
	--surface-border: rgba(102, 192, 244, 0.25);
	--surface-border-hover: #ff6000;
	--text-main: #f0f5fa;
	--text-muted: #8f98a0;
	--text-dimmed: #66c0f4;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.65);
	--skin-accent-glow: 0 0 16px rgba(102, 192, 244, 0.35);
}
[data-skin-template="steam_deck"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="steam_deck"],
.skin-mini.is-light[data-skin="steam_deck"] {
	--brand-primary: #0284c7;
	--brand-primary-hover: #0369a1;
	--brand-primary-gradient: linear-gradient(135deg, #0284c7, #ea580c);
	--surface-bg-darker: #e6ebf2;
	--surface-bg-dark: #f0f4f9;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dee4ee;
	--surface-border: rgba(2, 132, 199, 0.2);
	--surface-border-hover: #ea580c;
	--text-main: #0f172a;
	--text-muted: #475569;
	--text-dimmed: #ea580c;
	--skin-radius-card: 14px;
	--skin-radius-sm: 8px;
	--skin-shadow-card: 0 3px 12px rgba(2, 132, 199, 0.08);
	--skin-accent-glow: 0 0 12px rgba(2, 132, 199, 0.25);
}

/* Skin 41: redbull_racing */
:root[data-skin-template="redbull_racing"],
body[data-skin-template="redbull_racing"],
.skin-mini[data-skin="redbull_racing"] {
	--brand-primary: #ffd100;
	--brand-primary-hover: #e6bd00;
	--brand-primary-gradient: linear-gradient(135deg, #ffd100, #e10600);
	--surface-bg-darker: #030a14;
	--surface-bg-dark: #061426;
	--surface-bg-card: #0c2038;
	--surface-bg-sidebar: #040e1b;
	--surface-border: rgba(255, 209, 0, 0.3);
	--surface-border-hover: #e10600;
	--text-main: #f8fafc;
	--text-muted: #94a3b8;
	--text-dimmed: #ffd100;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.7);
	--skin-accent-glow: 0 0 16px rgba(255, 209, 0, 0.35);
}
[data-skin-template="redbull_racing"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="redbull_racing"],
.skin-mini.is-light[data-skin="redbull_racing"] {
	--brand-primary: #dc2626;
	--brand-primary-hover: #b91c1c;
	--brand-primary-gradient: linear-gradient(135deg, #dc2626, #ca8a04);
	--surface-bg-darker: #e5ebf2;
	--surface-bg-dark: #f0f5fa;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #dbe3ed;
	--surface-border: rgba(220, 38, 38, 0.2);
	--surface-border-hover: #ca8a04;
	--text-main: #061426;
	--text-muted: #475569;
	--text-dimmed: #dc2626;
	--skin-radius-card: 8px;
	--skin-radius-sm: 4px;
	--skin-shadow-card: 0 3px 12px rgba(220, 38, 38, 0.08);
	--skin-accent-glow: 0 0 12px rgba(220, 38, 38, 0.25);
}

/* Skin 42: apple_cupertino */
:root[data-skin-template="apple_cupertino"],
body[data-skin-template="apple_cupertino"],
.skin-mini[data-skin="apple_cupertino"] {
	--brand-primary: #0a84ff;
	--brand-primary-hover: #0071e3;
	--brand-primary-gradient: linear-gradient(135deg, #0a84ff, #5e5ce6);
	--surface-bg-darker: #050505;
	--surface-bg-dark: #0f0f10;
	--surface-bg-card: #1c1c1e;
	--surface-bg-sidebar: #121214;
	--surface-border: rgba(255, 255, 255, 0.1);
	--surface-border-hover: rgba(10, 132, 255, 0.6);
	--text-main: #f5f5f7;
	--text-muted: #86868b;
	--text-dimmed: #0a84ff;
	--skin-radius-card: 18px;
	--skin-radius-sm: 10px;
	--skin-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
	--skin-accent-glow: 0 0 16px rgba(10, 132, 255, 0.3);
}
[data-skin-template="apple_cupertino"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="apple_cupertino"],
.skin-mini.is-light[data-skin="apple_cupertino"] {
	--brand-primary: #0071e3;
	--brand-primary-hover: #005bb5;
	--brand-primary-gradient: linear-gradient(135deg, #0071e3, #5e5ce6);
	--surface-bg-darker: #f0f0f2;
	--surface-bg-dark: #f5f5f7;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e8e8ed;
	--surface-border: rgba(0, 0, 0, 0.08);
	--surface-border-hover: #0071e3;
	--text-main: #1d1d1f;
	--text-muted: #6e6e73;
	--text-dimmed: #0071e3;
	--skin-radius-card: 18px;
	--skin-radius-sm: 10px;
	--skin-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06);
	--skin-accent-glow: 0 0 12px rgba(0, 113, 227, 0.2);
}

/* Skin 43: twitch_streamer */
:root[data-skin-template="twitch_streamer"],
body[data-skin-template="twitch_streamer"],
.skin-mini[data-skin="twitch_streamer"] {
	--brand-primary: #9146ff;
	--brand-primary-hover: #772ce8;
	--brand-primary-gradient: linear-gradient(135deg, #9146ff, #bf94ff);
	--surface-bg-darker: #09090b;
	--surface-bg-dark: #0e0e10;
	--surface-bg-card: #18181b;
	--surface-bg-sidebar: #0f0f12;
	--surface-border: rgba(145, 70, 255, 0.25);
	--surface-border-hover: #9146ff;
	--text-main: #efeff1;
	--text-muted: #adadb8;
	--text-dimmed: #bf94ff;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 4px 18px rgba(0, 0, 0, 0.6);
	--skin-accent-glow: 0 0 18px rgba(145, 70, 255, 0.4);
}
[data-skin-template="twitch_streamer"][data-bs-theme="light"],
[data-bs-theme="light"] [data-skin-template="twitch_streamer"],
.skin-mini.is-light[data-skin="twitch_streamer"] {
	--brand-primary: #772ce8;
	--brand-primary-hover: #5c16c5;
	--brand-primary-gradient: linear-gradient(135deg, #772ce8, #9146ff);
	--surface-bg-darker: #ececf0;
	--surface-bg-dark: #f7f7f8;
	--surface-bg-card: #ffffff;
	--surface-bg-sidebar: #e5e5ea;
	--surface-border: rgba(119, 44, 232, 0.2);
	--surface-border-hover: #772ce8;
	--text-main: #0e0e10;
	--text-muted: #53535f;
	--text-dimmed: #772ce8;
	--skin-radius-card: 10px;
	--skin-radius-sm: 6px;
	--skin-shadow-card: 0 3px 12px rgba(119, 44, 232, 0.08);
	--skin-accent-glow: 0 0 12px rgba(119, 44, 232, 0.25);
}

/* ==========================================================================
   TS3MusicBot: Deep Thematic Skin Polish, Animations & Micro-Interactions
   Every skin is an entirely unique, playful, high-immersion world.
   ========================================================================== */

/* --- Universal GPU-Accelerated Animation Library --------------------- */
@keyframes chromaBorderCycle {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(360deg); }
}

@keyframes crtPhosphorFlicker {
	0% { opacity: 0.97; }
	50% { opacity: 1; }
	100% { opacity: 0.98; }
}

@keyframes cyberGlitch {
	0% { transform: translate(0); }
	20% { transform: translate(-2px, 2px); }
	40% { transform: translate(-2px, -2px); }
	60% { transform: translate(2px, 2px); }
	80% { transform: translate(2px, -2px); }
	100% { transform: translate(0); }
}

@keyframes erdtreeEmberFloat {
	0% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.2); }
	50% { box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.45); }
	100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.2); }
}

@keyframes hextechPulse {
	0% { box-shadow: 0 0 12px rgba(0, 245, 212, 0.3); }
	50% { box-shadow: 0 0 25px rgba(0, 245, 212, 0.7), 0 0 40px rgba(157, 78, 221, 0.4); }
	100% { box-shadow: 0 0 12px rgba(0, 245, 212, 0.3); }
}

/* --------------------------------------------------------------------------
   Skin 1: default (Modern Slate)
   -------------------------------------------------------------------------- */
[data-skin-template="default"] body {
	font-family: 'Inter', sans-serif !important;
	background: #090d16 !important;
	color: #f8fafc !important;
}

[data-skin-template="default"] #header {
	background: #0b1120 !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

[data-skin-template="default"] #leftPanel,
[data-skin-template="default"] .sidebar {
	background: #0b1120 !important;
	border-right: 1px solid rgba(255,255,255,0.08) !important;
}

[data-skin-template="default"] .nav-link.active,
[data-skin-template="default"] .sidebar .nav-link.active {
	background: #2563eb !important;
	color: #ffffff !important;
	border: 1px solid #3b82f6 !important;
	box-shadow: 0 4px 15px rgba(59,130,246,0.35) !important;
}

[data-skin-template="default"] .card {
	background: #1e293b !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

[data-skin-template="default"] #player {
	background: #0f172a !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

[data-skin-template="default"] #cover img {
	border: 2px solid #3b82f6 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 18px rgba(59,130,246,0.35) !important;
}

[data-skin-template="default"] #pause {
	background: #3b82f6 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 16px rgba(59,130,246,0.45) !important;
	border-radius: 50% !important;
}

[data-skin-template="default"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 25px rgba(59,130,246,0.7);
}

[data-skin-template="default"] #timeline {
	background: #1e293b !important;
	border-radius: 4px !important;
	border: none !important;
}

[data-skin-template="default"] #slider {
	background: #3b82f6 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 10px rgba(59,130,246,0.5) !important;
}

[data-skin-template="default"] .btn-primary {
	background: #3b82f6 !important;
	border: 1px solid #2563eb !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 10px rgba(59,130,246,0.3) !important;
}

[data-skin-template="default"] .btn-primary:hover {
	background: #2563eb !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="default"] .card,
body.light-mode[data-skin-template="default"] .card,
[data-bs-theme="light"] [data-skin-template="default"] .card {
	background: #ffffff !important;
	border-color: rgba(0,0,0,0.1) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

[data-bs-theme="light"][data-skin-template="default"] #player,
body.light-mode[data-skin-template="default"] #player,
[data-bs-theme="light"] [data-skin-template="default"] #player {
	background: #f8fafc !important;
	border-color: rgba(0,0,0,0.1) !important;
}

/* --- Login Screen for default --- */
[data-skin-template="default"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #090d16 !important;
	color: #f8fafc !important;
}

[data-skin-template="default"] body.text-center .form-signin {
	background: #1e293b !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

[data-skin-template="default"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #f8fafc !important;
}

[data-skin-template="default"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #3b82f6) !important;
}

[data-skin-template="default"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f8fafc !important;
	border-radius: 14px !important;
}

[data-skin-template="default"] body.text-center .form-floating > .form-control:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 14px #3b82f6 !important;
}

[data-skin-template="default"] body.text-center .form-signin .btn-primary {
	background: #3b82f6 !important;
	border: 1px solid #2563eb !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 10px rgba(59,130,246,0.3) !important;
}

[data-skin-template="default"] body.text-center .form-signin .btn-primary:hover {
	background: #2563eb !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 2: neon_cyber (Neon Cyber)
   -------------------------------------------------------------------------- */
[data-skin-template="neon_cyber"] body {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #080b12 !important;
	color: #f0f6fc !important;
	text-shadow: 0 0 8px rgba(0,245,255,0.25);
}

[data-skin-template="neon_cyber"] #header {
	background: #0c101c !important;
	border-bottom: 1px solid #00f5ff !important;
}

[data-skin-template="neon_cyber"] #leftPanel,
[data-skin-template="neon_cyber"] .sidebar {
	background: #090d16 !important;
	border-right: 1px solid rgba(0,245,255,0.2) !important;
}

[data-skin-template="neon_cyber"] .nav-link.active,
[data-skin-template="neon_cyber"] .sidebar .nav-link.active {
	background: linear-gradient(135deg, #00f5ff, #ff007f) !important;
	color: #ffffff !important;
	border: 1px solid #00f5ff !important;
	box-shadow: 0 0 18px rgba(0,245,255,0.5) !important;
}

[data-skin-template="neon_cyber"] .card {
	background: #0f1524 !important;
	border: 1px solid #00f5ff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 20px rgba(0,245,255,0.2), border-right: 3px solid #ff007f !important;
	border-right: 3px solid #ff007f !important;
}

[data-skin-template="neon_cyber"] #player {
	background: #0c101c !important;
	border: 1px solid #00f5ff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 25px rgba(0,245,255,0.25) !important;
	border-left: 3px solid #ff007f !important;
}

[data-skin-template="neon_cyber"] #cover img {
	border: 2px solid #00f5ff !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(0,245,255,0.5), 0 0 35px rgba(255,0,127,0.3) !important;
}

[data-skin-template="neon_cyber"] #pause {
	background: linear-gradient(135deg, #00f5ff, #ff007f) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(0,245,255,0.65) !important;
	border-radius: 8px !important;
}

[data-skin-template="neon_cyber"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 30px rgba(0,245,255,0.9);
}

[data-skin-template="neon_cyber"] #timeline {
	background: #070b14 !important;
	border-radius: 3px !important;
	border: 1px solid rgba(0,245,255,0.3) !important;
}

[data-skin-template="neon_cyber"] #slider {
	background: linear-gradient(90deg, #00f5ff, #ff007f) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #00f5ff !important;
}

[data-skin-template="neon_cyber"] .btn-primary {
	background: linear-gradient(135deg, #00f5ff, #0284c7) !important;
	border: 1px solid #00f5ff !important;
	color: #000000 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 15px rgba(0,245,255,0.4) !important;
}

[data-skin-template="neon_cyber"] .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 22px rgba(0,245,255,0.7);
}

[data-bs-theme="light"][data-skin-template="neon_cyber"] .card,
body.light-mode[data-skin-template="neon_cyber"] .card,
[data-bs-theme="light"] [data-skin-template="neon_cyber"] .card {
	background: #ffffff !important;
	border-color: #00f5ff !important;
	box-shadow: 0 4px 20px rgba(0,245,255,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="neon_cyber"] #player,
body.light-mode[data-skin-template="neon_cyber"] #player,
[data-bs-theme="light"] [data-skin-template="neon_cyber"] #player {
	background: #f0fdf4 !important;
	border-color: #00f5ff !important;
}

/* --- Login Screen for neon_cyber --- */
[data-skin-template="neon_cyber"] body.text-center {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #080b12 !important;
	color: #f0f6fc !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-signin {
	background: #0f1524 !important;
	border: 1px solid #00f5ff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 20px rgba(0,245,255,0.2), border-right: 3px solid #ff007f !important;
	border-right: 3px solid #ff007f !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-signin h1 {
	font-family: 'Chakra Petch', sans-serif !important;
	color: #f0f6fc !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00f5ff) !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f0f6fc !important;
	border-radius: 6px !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-floating > .form-control:focus {
	border-color: linear-gradient(135deg, #00f5ff, #ff007f) !important;
	box-shadow: 0 0 14px linear-gradient(135deg, #00f5ff, #ff007f) !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-signin .btn-primary {
	background: linear-gradient(135deg, #00f5ff, #0284c7) !important;
	border: 1px solid #00f5ff !important;
	color: #000000 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 15px rgba(0,245,255,0.4) !important;
}

[data-skin-template="neon_cyber"] body.text-center .form-signin .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 22px rgba(0,245,255,0.7);
}

/* --------------------------------------------------------------------------
   Skin 3: nordic_frost (Nordic Frost)
   -------------------------------------------------------------------------- */
[data-skin-template="nordic_frost"] body {
	font-family: 'Inter', sans-serif !important;
	background: #050c14 !important;
	color: #f0f9ff !important;
}

[data-skin-template="nordic_frost"] #header {
	background: rgba(8, 20, 32, 0.9) !important;
	border-bottom: 1px solid rgba(56, 189, 248, 0.3) !important;
}

[data-skin-template="nordic_frost"] #leftPanel,
[data-skin-template="nordic_frost"] .sidebar {
	background: rgba(8, 20, 32, 0.9) !important;
	border-right: 1px solid rgba(56, 189, 248, 0.2) !important;
}

[data-skin-template="nordic_frost"] .nav-link.active,
[data-skin-template="nordic_frost"] .sidebar .nav-link.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 16px rgba(56,189,248,0.4) !important;
}

[data-skin-template="nordic_frost"] .card {
	background: rgba(8, 20, 32, 0.85) !important;
	border: 1px solid rgba(56, 189, 248, 0.35) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 18px rgba(56,189,248,0.15) !important;
	backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
}

[data-skin-template="nordic_frost"] #player {
	background: rgba(6, 18, 30, 0.9) !important;
	border: 1px solid rgba(56, 189, 248, 0.4) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 20px rgba(56,189,248,0.2) !important;
	backdrop-filter: blur(20px) !important;
}

[data-skin-template="nordic_frost"] #cover img {
	border: 2px solid #38bdf8 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(56,189,248,0.4) !important;
}

[data-skin-template="nordic_frost"] #pause {
	background: #38bdf8 !important;
	border: none !important;
	color: #030712 !important;
	box-shadow: 0 0 20px rgba(56,189,248,0.6) !important;
	border-radius: 50% !important;
}

[data-skin-template="nordic_frost"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(56,189,248,0.85);
}

[data-skin-template="nordic_frost"] #timeline {
	background: #03080e !important;
	border-radius: 4px !important;
	border: 1px solid rgba(56,189,248,0.2) !important;
}

[data-skin-template="nordic_frost"] #slider {
	background: #38bdf8 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #38bdf8 !important;
}

[data-skin-template="nordic_frost"] .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #38bdf8 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(56,189,248,0.3) !important;
}

[data-skin-template="nordic_frost"] .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="nordic_frost"] .card,
body.light-mode[data-skin-template="nordic_frost"] .card,
[data-bs-theme="light"] [data-skin-template="nordic_frost"] .card {
	background: #f0f9ff !important;
	border-color: rgba(56,189,248,0.3) !important;
	box-shadow: 0 4px 16px rgba(56,189,248,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="nordic_frost"] #player,
body.light-mode[data-skin-template="nordic_frost"] #player,
[data-bs-theme="light"] [data-skin-template="nordic_frost"] #player {
	background: #e0f2fe !important;
	border-color: rgba(56,189,248,0.35) !important;
}

/* --- Login Screen for nordic_frost --- */
[data-skin-template="nordic_frost"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #050c14 !important;
	color: #f0f9ff !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-signin {
	background: rgba(8, 20, 32, 0.85) !important;
	border: 1px solid rgba(56, 189, 248, 0.35) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 18px rgba(56,189,248,0.15) !important;
	backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #f0f9ff !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #38bdf8) !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f0f9ff !important;
	border-radius: 12px !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-floating > .form-control:focus {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 14px #38bdf8 !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-signin .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #38bdf8 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(56,189,248,0.3) !important;
}

[data-skin-template="nordic_frost"] body.text-center .form-signin .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 4: aero_glass (Aero Glass)
   -------------------------------------------------------------------------- */
[data-skin-template="aero_glass"] body {
	font-family: 'Inter', sans-serif !important;
	background: #071526 !important;
	color: #ffffff !important;
	background-attachment: fixed !important;
}

[data-skin-template="aero_glass"] #header {
	background: rgba(14, 34, 61, 0.75) !important;
	border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}

[data-skin-template="aero_glass"] #leftPanel,
[data-skin-template="aero_glass"] .sidebar {
	background: rgba(14, 34, 61, 0.75) !important;
	border-right: 1px solid rgba(255,255,255,0.2) !important;
}

[data-skin-template="aero_glass"] .nav-link.active,
[data-skin-template="aero_glass"] .sidebar .nav-link.active {
	background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(2,132,199,0.8) 100%) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	box-shadow: 0 4px 15px rgba(2,132,199,0.4) !important;
}

[data-skin-template="aero_glass"] .card {
	background: rgba(14, 34, 61, 0.75) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4) !important;
	backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important;
}

[data-skin-template="aero_glass"] #player {
	background: rgba(10, 28, 52, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 35px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4) !important;
	backdrop-filter: blur(25px) !important;
}

[data-skin-template="aero_glass"] #cover img {
	border: 2px solid rgba(255,255,255,0.35) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
}

[data-skin-template="aero_glass"] #pause {
	background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(2,132,199,0.9) 100%) !important;
	border: 1px solid rgba(255,255,255,0.5) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(2,132,199,0.5), inset 0 1px 0 #ffffff !important;
	border-radius: 50px !important;
}

[data-skin-template="aero_glass"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 8px 25px rgba(2,132,199,0.7);
}

[data-skin-template="aero_glass"] #timeline {
	background: rgba(0, 0, 0, 0.35) !important;
	border-radius: 50px !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
}

[data-skin-template="aero_glass"] #slider {
	background: linear-gradient(180deg, #38bdf8, #0284c7) !important;
	border-radius: 50px !important;
	box-shadow: 0 0 10px rgba(56,189,248,0.5) !important;
}

[data-skin-template="aero_glass"] .btn-primary {
	background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, #0284c7 100%) !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(2,132,199,0.35), inset 0 1px 0 #ffffff !important;
}

[data-skin-template="aero_glass"] .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2,132,199,0.5);
}

[data-bs-theme="light"][data-skin-template="aero_glass"] .card,
body.light-mode[data-skin-template="aero_glass"] .card,
[data-bs-theme="light"] [data-skin-template="aero_glass"] .card {
	background: rgba(255, 255, 255, 0.8) !important;
	border-color: rgba(2,132,199,0.3) !important;
	box-shadow: 0 6px 20px rgba(2,132,199,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="aero_glass"] #player,
body.light-mode[data-skin-template="aero_glass"] #player,
[data-bs-theme="light"] [data-skin-template="aero_glass"] #player {
	background: rgba(240, 249, 255, 0.85) !important;
	border-color: rgba(2,132,199,0.35) !important;
}

/* --- Login Screen for aero_glass --- */
[data-skin-template="aero_glass"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #071526 !important;
	color: #ffffff !important;
}

[data-skin-template="aero_glass"] body.text-center .form-signin {
	background: rgba(14, 34, 61, 0.75) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.4) !important;
	backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important;
}

[data-skin-template="aero_glass"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #ffffff !important;
}

[data-skin-template="aero_glass"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px rgba(255,255,255,0.4)) !important;
}

[data-skin-template="aero_glass"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border-radius: 16px !important;
}

[data-skin-template="aero_glass"] body.text-center .form-floating > .form-control:focus {
	border-color: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(2,132,199,0.9) 100%) !important;
	box-shadow: 0 0 14px linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(2,132,199,0.9) 100%) !important;
}

[data-skin-template="aero_glass"] body.text-center .form-signin .btn-primary {
	background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, #0284c7 100%) !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(2,132,199,0.35), inset 0 1px 0 #ffffff !important;
}

[data-skin-template="aero_glass"] body.text-center .form-signin .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 6px 20px rgba(2,132,199,0.5);
}

/* --------------------------------------------------------------------------
   Skin 5: studio_pro (Studio Pro)
   -------------------------------------------------------------------------- */
[data-skin-template="studio_pro"] body {
	font-family: 'Share Tech Mono', monospace !important;
	background: #0b0d10 !important;
	color: #e2e8f0 !important;
}

[data-skin-template="studio_pro"] #header {
	background: #14171a !important;
	border-bottom: 2px solid #334155 !important;
}

[data-skin-template="studio_pro"] #leftPanel,
[data-skin-template="studio_pro"] .sidebar {
	background: #101316 !important;
	border-right: 2px solid #334155 !important;
}

[data-skin-template="studio_pro"] .nav-link.active,
[data-skin-template="studio_pro"] .sidebar .nav-link.active {
	background: #f59e0b !important;
	color: #000000 !important;
	border: 1px solid #fbbf24 !important;
	box-shadow: 0 0 14px rgba(245,158,11,0.5) !important;
}

[data-skin-template="studio_pro"] .card {
	background: #14171a !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.8) !important;
	border-top: 3px solid #f59e0b !important;
}

[data-skin-template="studio_pro"] #player {
	background: #101316 !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.85) !important;
	border-left: 3px solid #f59e0b !important;
}

[data-skin-template="studio_pro"] #cover img {
	border: 2px solid #f59e0b !important;
	border-radius: 4px !important;
	box-shadow: 0 0 18px rgba(245,158,11,0.35) !important;
}

[data-skin-template="studio_pro"] #pause {
	background: #f59e0b !important;
	border: 2px solid #fbbf24 !important;
	color: #000000 !important;
	box-shadow: 0 0 18px rgba(245,158,11,0.5) !important;
	border-radius: 4px !important;
}

[data-skin-template="studio_pro"] #pause:hover {
	transform: scale(1.05); box-shadow: 0 0 25px rgba(245,158,11,0.8);
}

[data-skin-template="studio_pro"] #timeline {
	background: #090b0d !important;
	border-radius: 2px !important;
	border: 1px solid #334155 !important;
}

[data-skin-template="studio_pro"] #slider {
	background: repeating-linear-gradient(90deg, #10b981 0px, #10b981 12px, #f59e0b 12px, #f59e0b 20px, #ef4444 20px, #ef4444 28px) !important;
	border-radius: 2px !important;
	box-shadow: 0 0 8px rgba(245,158,11,0.4) !important;
}

[data-skin-template="studio_pro"] .btn-primary {
	background: #334155 !important;
	border: 1px solid #f59e0b !important;
	color: #f59e0b !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

[data-skin-template="studio_pro"] .btn-primary:hover {
	background: #f59e0b !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="studio_pro"] .card,
body.light-mode[data-skin-template="studio_pro"] .card,
[data-bs-theme="light"] [data-skin-template="studio_pro"] .card {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="studio_pro"] #player,
body.light-mode[data-skin-template="studio_pro"] #player,
[data-bs-theme="light"] [data-skin-template="studio_pro"] #player {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
}

/* --- Login Screen for studio_pro --- */
[data-skin-template="studio_pro"] body.text-center {
	font-family: 'Share Tech Mono', monospace !important;
	background: #0b0d10 !important;
	color: #e2e8f0 !important;
}

[data-skin-template="studio_pro"] body.text-center .form-signin {
	background: #14171a !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.8) !important;
	border-top: 3px solid #f59e0b !important;
}

[data-skin-template="studio_pro"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', monospace !important;
	color: #e2e8f0 !important;
}

[data-skin-template="studio_pro"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #f59e0b) !important;
}

[data-skin-template="studio_pro"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e2e8f0 !important;
	border-radius: 4px !important;
}

[data-skin-template="studio_pro"] body.text-center .form-floating > .form-control:focus {
	border-color: #f59e0b !important;
	box-shadow: 0 0 14px #f59e0b !important;
}

[data-skin-template="studio_pro"] body.text-center .form-signin .btn-primary {
	background: #334155 !important;
	border: 1px solid #f59e0b !important;
	color: #f59e0b !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}

[data-skin-template="studio_pro"] body.text-center .form-signin .btn-primary:hover {
	background: #f59e0b !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 6: crimson_valkyrie (Crimson Valkyrie)
   -------------------------------------------------------------------------- */
[data-skin-template="crimson_valkyrie"] body {
	font-family: 'Rajdhani', 'Russo One', sans-serif !important;
	background: #0d0507 !important;
	color: #fef2f2 !important;
	text-shadow: 0 0 6px rgba(239,68,68,0.3);
}

[data-skin-template="crimson_valkyrie"] #header {
	background: #15070a !important;
	border-bottom: 1px solid #ef4444 !important;
}

[data-skin-template="crimson_valkyrie"] #leftPanel,
[data-skin-template="crimson_valkyrie"] .sidebar {
	background: #120608 !important;
	border-right: 1px solid rgba(239,68,68,0.25) !important;
}

[data-skin-template="crimson_valkyrie"] .nav-link.active,
[data-skin-template="crimson_valkyrie"] .sidebar .nav-link.active {
	background: #ef4444 !important;
	color: #ffffff !important;
	border: 1px solid #f87171 !important;
	box-shadow: 0 0 18px rgba(239,68,68,0.6) !important;
}

[data-skin-template="crimson_valkyrie"] .card {
	background: #180a0e !important;
	border: 1px solid #ef4444 !important;
	border-radius: 2px !important;
	box-shadow: 0 6px 25px rgba(239,68,68,0.25) !important;
	border-left: 4px solid #ef4444 !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important;
}

[data-skin-template="crimson_valkyrie"] #player {
	background: #13070a !important;
	border: 1px solid #ef4444 !important;
	border-radius: 2px !important;
	box-shadow: 0 8px 30px rgba(239,68,68,0.3) !important;
	border-top: 3px solid #ef4444 !important;
}

[data-skin-template="crimson_valkyrie"] #cover img {
	border: 2px solid #ef4444 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(239,68,68,0.6) !important;
}

[data-skin-template="crimson_valkyrie"] #pause {
	background: #ef4444 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(239,68,68,0.75) !important;
	border-radius: 4px !important;
}

[data-skin-template="crimson_valkyrie"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(239,68,68,1);
}

[data-skin-template="crimson_valkyrie"] #timeline {
	background: #0a0305 !important;
	border-radius: 2px !important;
	border: 1px solid rgba(239,68,68,0.3) !important;
}

[data-skin-template="crimson_valkyrie"] #slider {
	background: #ef4444 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 14px #ef4444 !important;
}

[data-skin-template="crimson_valkyrie"] .btn-primary {
	background: #ef4444 !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	box-shadow: 0 0 14px rgba(239,68,68,0.4) !important;
}

[data-skin-template="crimson_valkyrie"] .btn-primary:hover {
	background: #dc2626 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="crimson_valkyrie"] .card,
body.light-mode[data-skin-template="crimson_valkyrie"] .card,
[data-bs-theme="light"] [data-skin-template="crimson_valkyrie"] .card {
	background: #fff5f5 !important;
	border-color: #ef4444 !important;
	box-shadow: 0 4px 16px rgba(239,68,68,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="crimson_valkyrie"] #player,
body.light-mode[data-skin-template="crimson_valkyrie"] #player,
[data-bs-theme="light"] [data-skin-template="crimson_valkyrie"] #player {
	background: #fee2e2 !important;
	border-color: #ef4444 !important;
}

/* --- Login Screen for crimson_valkyrie --- */
[data-skin-template="crimson_valkyrie"] body.text-center {
	font-family: 'Rajdhani', 'Russo One', sans-serif !important;
	background: #0d0507 !important;
	color: #fef2f2 !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-signin {
	background: #180a0e !important;
	border: 1px solid #ef4444 !important;
	border-radius: 2px !important;
	box-shadow: 0 6px 25px rgba(239,68,68,0.25) !important;
	border-left: 4px solid #ef4444 !important; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%) !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-signin h1 {
	font-family: 'Rajdhani', 'Russo One', sans-serif !important;
	color: #fef2f2 !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #ef4444) !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef2f2 !important;
	border-radius: 2px !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-floating > .form-control:focus {
	border-color: #ef4444 !important;
	box-shadow: 0 0 14px #ef4444 !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-signin .btn-primary {
	background: #ef4444 !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 3px !important;
	box-shadow: 0 0 14px rgba(239,68,68,0.4) !important;
}

[data-skin-template="crimson_valkyrie"] body.text-center .form-signin .btn-primary:hover {
	background: #dc2626 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 7: emerald_matrix (Emerald Matrix)
   -------------------------------------------------------------------------- */
[data-skin-template="emerald_matrix"] body {
	font-family: 'Cinzel', serif !important;
	background: #030a06 !important;
	color: #ecfdf5 !important;
}

[data-skin-template="emerald_matrix"] #header {
	background: #06150b !important;
	border-bottom: 1px solid #10b981 !important;
}

[data-skin-template="emerald_matrix"] #leftPanel,
[data-skin-template="emerald_matrix"] .sidebar {
	background: #051109 !important;
	border-right: 1px solid rgba(16,185,129,0.2) !important;
}

[data-skin-template="emerald_matrix"] .nav-link.active,
[data-skin-template="emerald_matrix"] .sidebar .nav-link.active {
	background: #10b981 !important;
	color: #022c22 !important;
	border: 1px solid #34d399 !important;
	box-shadow: 0 0 16px rgba(16,185,129,0.5) !important;
}

[data-skin-template="emerald_matrix"] .card {
	background: #07190e !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(16,185,129,0.2) !important;
	border-left: 3px solid #34d399 !important;
}

[data-skin-template="emerald_matrix"] #player {
	background: #05140b !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 30px rgba(16,185,129,0.25) !important;
	border-top: 3px solid #34d399 !important;
}

[data-skin-template="emerald_matrix"] #cover img {
	border: 2px solid #10b981 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(16,185,129,0.4) !important;
}

[data-skin-template="emerald_matrix"] #pause {
	background: #10b981 !important;
	border: none !important;
	color: #022c22 !important;
	box-shadow: 0 0 20px rgba(16,185,129,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="emerald_matrix"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(16,185,129,0.9);
}

[data-skin-template="emerald_matrix"] #timeline {
	background: #020704 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(16,185,129,0.2) !important;
}

[data-skin-template="emerald_matrix"] #slider {
	background: #10b981 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #10b981 !important;
}

[data-skin-template="emerald_matrix"] .btn-primary {
	background: #10b981 !important;
	border: 1px solid #059669 !important;
	color: #022c22 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(16,185,129,0.35) !important;
}

[data-skin-template="emerald_matrix"] .btn-primary:hover {
	background: #059669 !important; color: #ffffff !important;
}

[data-bs-theme="light"][data-skin-template="emerald_matrix"] .card,
body.light-mode[data-skin-template="emerald_matrix"] .card,
[data-bs-theme="light"] [data-skin-template="emerald_matrix"] .card {
	background: #f0fdf4 !important;
	border-color: #86efac !important;
	box-shadow: 0 4px 16px rgba(16,185,129,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="emerald_matrix"] #player,
body.light-mode[data-skin-template="emerald_matrix"] #player,
[data-bs-theme="light"] [data-skin-template="emerald_matrix"] #player {
	background: #dcfce7 !important;
	border-color: #86efac !important;
}

/* --- Login Screen for emerald_matrix --- */
[data-skin-template="emerald_matrix"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #030a06 !important;
	color: #ecfdf5 !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-signin {
	background: #07190e !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(16,185,129,0.2) !important;
	border-left: 3px solid #34d399 !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #ecfdf5 !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #10b981) !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ecfdf5 !important;
	border-radius: 8px !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-floating > .form-control:focus {
	border-color: #10b981 !important;
	box-shadow: 0 0 14px #10b981 !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-signin .btn-primary {
	background: #10b981 !important;
	border: 1px solid #059669 !important;
	color: #022c22 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(16,185,129,0.35) !important;
}

[data-skin-template="emerald_matrix"] body.text-center .form-signin .btn-primary:hover {
	background: #059669 !important; color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Skin 8: solar_gold (Solar Gold)
   -------------------------------------------------------------------------- */
[data-skin-template="solar_gold"] body {
	font-family: 'Cinzel', serif !important;
	background: #080703 !important;
	color: #fefce8 !important;
	text-shadow: 0 0 6px rgba(234,179,8,0.25);
}

[data-skin-template="solar_gold"] #header {
	background: #120e04 !important;
	border-bottom: 1px solid #eab308 !important;
}

[data-skin-template="solar_gold"] #leftPanel,
[data-skin-template="solar_gold"] .sidebar {
	background: #0e0b03 !important;
	border-right: 1px solid rgba(234,179,8,0.2) !important;
}

[data-skin-template="solar_gold"] .nav-link.active,
[data-skin-template="solar_gold"] .sidebar .nav-link.active {
	background: #eab308 !important;
	color: #000000 !important;
	border: 1px solid #fde047 !important;
	box-shadow: 0 0 18px rgba(234,179,8,0.6) !important;
}

[data-skin-template="solar_gold"] .card {
	background: #141005 !important;
	border: 1px solid #eab308 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(234,179,8,0.25) !important;
}

[data-skin-template="solar_gold"] #player {
	background: #100d04 !important;
	border: 1px solid #eab308 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 30px rgba(234,179,8,0.3) !important;
	border-top: 3px solid #fde047 !important;
}

[data-skin-template="solar_gold"] #cover img {
	border: 2px solid #eab308 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(234,179,8,0.45) !important;
}

[data-skin-template="solar_gold"] #pause {
	background: #eab308 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(234,179,8,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="solar_gold"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(234,179,8,0.95);
}

[data-skin-template="solar_gold"] #timeline {
	background: #070502 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(234,179,8,0.25) !important;
}

[data-skin-template="solar_gold"] #slider {
	background: #eab308 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #eab308 !important;
}

[data-skin-template="solar_gold"] .btn-primary {
	background: #eab308 !important;
	border: 1px solid #ca8a04 !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 15px rgba(234,179,8,0.35) !important;
}

[data-skin-template="solar_gold"] .btn-primary:hover {
	background: #ca8a04 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="solar_gold"] .card,
body.light-mode[data-skin-template="solar_gold"] .card,
[data-bs-theme="light"] [data-skin-template="solar_gold"] .card {
	background: #fefce8 !important;
	border-color: #fde047 !important;
	box-shadow: 0 4px 16px rgba(234,179,8,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="solar_gold"] #player,
body.light-mode[data-skin-template="solar_gold"] #player,
[data-bs-theme="light"] [data-skin-template="solar_gold"] #player {
	background: #fef9c3 !important;
	border-color: #fde047 !important;
}

/* --- Login Screen for solar_gold --- */
[data-skin-template="solar_gold"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #080703 !important;
	color: #fefce8 !important;
}

[data-skin-template="solar_gold"] body.text-center .form-signin {
	background: #141005 !important;
	border: 1px solid #eab308 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(234,179,8,0.25) !important;
}

[data-skin-template="solar_gold"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #fefce8 !important;
}

[data-skin-template="solar_gold"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #eab308) !important;
}

[data-skin-template="solar_gold"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fefce8 !important;
	border-radius: 8px !important;
}

[data-skin-template="solar_gold"] body.text-center .form-floating > .form-control:focus {
	border-color: #eab308 !important;
	box-shadow: 0 0 14px #eab308 !important;
}

[data-skin-template="solar_gold"] body.text-center .form-signin .btn-primary {
	background: #eab308 !important;
	border: 1px solid #ca8a04 !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 15px rgba(234,179,8,0.35) !important;
}

[data-skin-template="solar_gold"] body.text-center .form-signin .btn-primary:hover {
	background: #ca8a04 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 9: synthwave_sunset (Synthwave Sunset)
   -------------------------------------------------------------------------- */
[data-skin-template="synthwave_sunset"] body {
	font-family: 'Audiowide', sans-serif !important;
	background: #0b0416 !important;
	color: #fae8ff !important;
	text-shadow: 0 0 8px rgba(217,70,239,0.3);
}

[data-skin-template="synthwave_sunset"] #header {
	background: #140625 !important;
	border-bottom: 1px solid #d946ef !important;
}

[data-skin-template="synthwave_sunset"] #leftPanel,
[data-skin-template="synthwave_sunset"] .sidebar {
	background: #10051e !important;
	border-right: 1px solid rgba(217,70,239,0.25) !important;
}

[data-skin-template="synthwave_sunset"] .nav-link.active,
[data-skin-template="synthwave_sunset"] .sidebar .nav-link.active {
	background: linear-gradient(135deg, #d946ef, #06b6d4) !important;
	color: #ffffff !important;
	border: 1px solid #d946ef !important;
	box-shadow: 0 0 20px rgba(217,70,239,0.6) !important;
}

[data-skin-template="synthwave_sunset"] .card {
	background: #160829 !important;
	border: 1px solid #d946ef !important;
	border-radius: 8px !important;
	box-shadow: 0 0 22px rgba(217,70,239,0.25) !important;
	border-bottom: 3px solid #06b6d4 !important;
}

[data-skin-template="synthwave_sunset"] #player {
	background: #110521 !important;
	border: 1px solid #d946ef !important;
	border-radius: 8px !important;
	box-shadow: 0 0 25px rgba(217,70,239,0.3) !important;
	border-top: 3px solid #06b6d4 !important;
}

[data-skin-template="synthwave_sunset"] #cover img {
	border: 2px solid #d946ef !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(217,70,239,0.5), 0 0 35px rgba(6,182,212,0.35) !important;
}

[data-skin-template="synthwave_sunset"] #pause {
	background: linear-gradient(135deg, #d946ef, #06b6d4) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(217,70,239,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="synthwave_sunset"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 32px rgba(217,70,239,0.95);
}

[data-skin-template="synthwave_sunset"] #timeline {
	background: #080210 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(217,70,239,0.3) !important;
}

[data-skin-template="synthwave_sunset"] #slider {
	background: linear-gradient(90deg, #d946ef, #06b6d4) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #d946ef !important;
}

[data-skin-template="synthwave_sunset"] .btn-primary {
	background: linear-gradient(135deg, #d946ef, #9333ea) !important;
	border: 1px solid #d946ef !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(217,70,239,0.4) !important;
}

[data-skin-template="synthwave_sunset"] .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 24px rgba(217,70,239,0.7);
}

[data-bs-theme="light"][data-skin-template="synthwave_sunset"] .card,
body.light-mode[data-skin-template="synthwave_sunset"] .card,
[data-bs-theme="light"] [data-skin-template="synthwave_sunset"] .card {
	background: #fdf4ff !important;
	border-color: #f0abfc !important;
	box-shadow: 0 4px 18px rgba(217,70,239,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="synthwave_sunset"] #player,
body.light-mode[data-skin-template="synthwave_sunset"] #player,
[data-bs-theme="light"] [data-skin-template="synthwave_sunset"] #player {
	background: #fae8ff !important;
	border-color: #f0abfc !important;
}

/* --- Login Screen for synthwave_sunset --- */
[data-skin-template="synthwave_sunset"] body.text-center {
	font-family: 'Audiowide', sans-serif !important;
	background: #0b0416 !important;
	color: #fae8ff !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-signin {
	background: #160829 !important;
	border: 1px solid #d946ef !important;
	border-radius: 8px !important;
	box-shadow: 0 0 22px rgba(217,70,239,0.25) !important;
	border-bottom: 3px solid #06b6d4 !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-signin h1 {
	font-family: 'Audiowide', sans-serif !important;
	color: #fae8ff !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #d946ef) !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fae8ff !important;
	border-radius: 8px !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-floating > .form-control:focus {
	border-color: linear-gradient(135deg, #d946ef, #06b6d4) !important;
	box-shadow: 0 0 14px linear-gradient(135deg, #d946ef, #06b6d4) !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-signin .btn-primary {
	background: linear-gradient(135deg, #d946ef, #9333ea) !important;
	border: 1px solid #d946ef !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(217,70,239,0.4) !important;
}

[data-skin-template="synthwave_sunset"] body.text-center .form-signin .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 24px rgba(217,70,239,0.7);
}

/* --------------------------------------------------------------------------
   Skin 10: carbon_stealth (Carbon Stealth)
   -------------------------------------------------------------------------- */
[data-skin-template="carbon_stealth"] body {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #050505 !important;
	color: #e2e8f0 !important;
}

[data-skin-template="carbon_stealth"] #header {
	background: #0a0a0a !important;
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

[data-skin-template="carbon_stealth"] #leftPanel,
[data-skin-template="carbon_stealth"] .sidebar {
	background: #080808 !important;
	border-right: 1px solid rgba(255,255,255,0.1) !important;
}

[data-skin-template="carbon_stealth"] .nav-link.active,
[data-skin-template="carbon_stealth"] .sidebar .nav-link.active {
	background: #f97316 !important;
	color: #000000 !important;
	border: 1px solid #fb923c !important;
	box-shadow: 0 0 15px rgba(249,115,22,0.5) !important;
}

[data-skin-template="carbon_stealth"] .card {
	background: #0a0a0a !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 0px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.9) !important;
	border-left: 3px solid #f97316 !important;
}

[data-skin-template="carbon_stealth"] #player {
	background: #080808 !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 0px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.95) !important;
	border-top: 2px solid #f97316 !important;
}

[data-skin-template="carbon_stealth"] #cover img {
	border: 1px solid #f97316 !important;
	border-radius: 0px !important;
	box-shadow: 0 0 16px rgba(249,115,22,0.35) !important;
}

[data-skin-template="carbon_stealth"] #pause {
	background: #f97316 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 18px rgba(249,115,22,0.6) !important;
	border-radius: 0px !important;
}

[data-skin-template="carbon_stealth"] #pause:hover {
	transform: scale(1.05); box-shadow: 0 0 25px rgba(249,115,22,0.85);
}

[data-skin-template="carbon_stealth"] #timeline {
	background: #020202 !important;
	border-radius: 0px !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
}

[data-skin-template="carbon_stealth"] #slider {
	background: #f97316 !important;
	border-radius: 0px !important;
	box-shadow: 0 0 10px #f97316 !important;
}

[data-skin-template="carbon_stealth"] .btn-primary {
	background: #1c1917 !important;
	border: 1px solid #f97316 !important;
	color: #f97316 !important;
	border-radius: 0px !important;
	box-shadow: 0 0 12px rgba(249,115,22,0.25) !important;
}

[data-skin-template="carbon_stealth"] .btn-primary:hover {
	background: #f97316 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="carbon_stealth"] .card,
body.light-mode[data-skin-template="carbon_stealth"] .card,
[data-bs-theme="light"] [data-skin-template="carbon_stealth"] .card {
	background: #ffffff !important;
	border-color: #d4d4d4 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="carbon_stealth"] #player,
body.light-mode[data-skin-template="carbon_stealth"] #player,
[data-bs-theme="light"] [data-skin-template="carbon_stealth"] #player {
	background: #f5f5f5 !important;
	border-color: #a3a3a3 !important;
}

/* --- Login Screen for carbon_stealth --- */
[data-skin-template="carbon_stealth"] body.text-center {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #050505 !important;
	color: #e2e8f0 !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-signin {
	background: #0a0a0a !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
	border-radius: 0px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.9) !important;
	border-left: 3px solid #f97316 !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', sans-serif !important;
	color: #e2e8f0 !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #f97316) !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e2e8f0 !important;
	border-radius: 0px !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-floating > .form-control:focus {
	border-color: #f97316 !important;
	box-shadow: 0 0 14px #f97316 !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-signin .btn-primary {
	background: #1c1917 !important;
	border: 1px solid #f97316 !important;
	color: #f97316 !important;
	border-radius: 0px !important;
	box-shadow: 0 0 12px rgba(249,115,22,0.25) !important;
}

[data-skin-template="carbon_stealth"] body.text-center .form-signin .btn-primary:hover {
	background: #f97316 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 11: amethyst_haze (Amethyst Haze)
   -------------------------------------------------------------------------- */
[data-skin-template="amethyst_haze"] body {
	font-family: 'Inter', sans-serif !important;
	background: #080410 !important;
	color: #f3e8ff !important;
	text-shadow: 0 0 6px rgba(168,85,247,0.25);
}

[data-skin-template="amethyst_haze"] #header {
	background: #120822 !important;
	border-bottom: 1px solid #a855f7 !important;
}

[data-skin-template="amethyst_haze"] #leftPanel,
[data-skin-template="amethyst_haze"] .sidebar {
	background: #0e061a !important;
	border-right: 1px solid rgba(168,85,247,0.2) !important;
}

[data-skin-template="amethyst_haze"] .nav-link.active,
[data-skin-template="amethyst_haze"] .sidebar .nav-link.active {
	background: #a855f7 !important;
	color: #ffffff !important;
	border: 1px solid #c084fc !important;
	box-shadow: 0 0 16px rgba(168,85,247,0.5) !important;
}

[data-skin-template="amethyst_haze"] .card {
	background: #130a24 !important;
	border: 1px solid #a855f7 !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 25px rgba(168,85,247,0.25) !important;
}

[data-skin-template="amethyst_haze"] #player {
	background: #0f071d !important;
	border: 1px solid #a855f7 !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 30px rgba(168,85,247,0.3) !important;
	border-top: 3px solid #c084fc !important;
}

[data-skin-template="amethyst_haze"] #cover img {
	border: 2px solid #a855f7 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(168,85,247,0.45) !important;
}

[data-skin-template="amethyst_haze"] #pause {
	background: #a855f7 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(168,85,247,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="amethyst_haze"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(168,85,247,0.9);
}

[data-skin-template="amethyst_haze"] #timeline {
	background: #06020c !important;
	border-radius: 4px !important;
	border: 1px solid rgba(168,85,247,0.25) !important;
}

[data-skin-template="amethyst_haze"] #slider {
	background: #a855f7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #a855f7 !important;
}

[data-skin-template="amethyst_haze"] .btn-primary {
	background: #a855f7 !important;
	border: 1px solid #9333ea !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(168,85,247,0.35) !important;
}

[data-skin-template="amethyst_haze"] .btn-primary:hover {
	background: #9333ea !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="amethyst_haze"] .card,
body.light-mode[data-skin-template="amethyst_haze"] .card,
[data-bs-theme="light"] [data-skin-template="amethyst_haze"] .card {
	background: #faf5ff !important;
	border-color: #d8b4fe !important;
	box-shadow: 0 4px 16px rgba(168,85,247,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="amethyst_haze"] #player,
body.light-mode[data-skin-template="amethyst_haze"] #player,
[data-bs-theme="light"] [data-skin-template="amethyst_haze"] #player {
	background: #f3e8ff !important;
	border-color: #d8b4fe !important;
}

/* --- Login Screen for amethyst_haze --- */
[data-skin-template="amethyst_haze"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #080410 !important;
	color: #f3e8ff !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-signin {
	background: #130a24 !important;
	border: 1px solid #a855f7 !important;
	border-radius: 14px !important;
	box-shadow: 0 6px 25px rgba(168,85,247,0.25) !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #f3e8ff !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #a855f7) !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f3e8ff !important;
	border-radius: 14px !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-floating > .form-control:focus {
	border-color: #a855f7 !important;
	box-shadow: 0 0 14px #a855f7 !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-signin .btn-primary {
	background: #a855f7 !important;
	border: 1px solid #9333ea !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(168,85,247,0.35) !important;
}

[data-skin-template="amethyst_haze"] body.text-center .form-signin .btn-primary:hover {
	background: #9333ea !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 12: deep_abyss (Deep Abyss)
   -------------------------------------------------------------------------- */
[data-skin-template="deep_abyss"] body {
	font-family: 'Inter', sans-serif !important;
	background: #02060d !important;
	color: #e0f2fe !important;
	text-shadow: 0 0 6px rgba(0,245,255,0.2);
}

[data-skin-template="deep_abyss"] #header {
	background: #040e1c !important;
	border-bottom: 1px solid #0284c7 !important;
}

[data-skin-template="deep_abyss"] #leftPanel,
[data-skin-template="deep_abyss"] .sidebar {
	background: #030a14 !important;
	border-right: 1px solid rgba(0,245,255,0.15) !important;
}

[data-skin-template="deep_abyss"] .nav-link.active,
[data-skin-template="deep_abyss"] .sidebar .nav-link.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border: 1px solid #00f5ff !important;
	box-shadow: 0 0 16px rgba(0,245,255,0.45) !important;
}

[data-skin-template="deep_abyss"] .card {
	background: #05101f !important;
	border: 1px solid #0284c7 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 25px rgba(0,245,255,0.2) !important;
	border-left: 3px solid #00f5ff !important;
}

[data-skin-template="deep_abyss"] #player {
	background: #030c18 !important;
	border: 1px solid #00f5ff !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 30px rgba(0,245,255,0.25) !important;
	border-top: 3px solid #0284c7 !important;
}

[data-skin-template="deep_abyss"] #cover img {
	border: 2px solid #00f5ff !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(0,245,255,0.45) !important;
}

[data-skin-template="deep_abyss"] #pause {
	background: #00f5ff !important;
	border: none !important;
	color: #02060d !important;
	box-shadow: 0 0 22px rgba(0,245,255,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="deep_abyss"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(0,245,255,0.95);
}

[data-skin-template="deep_abyss"] #timeline {
	background: #010408 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(0,245,255,0.2) !important;
}

[data-skin-template="deep_abyss"] #slider {
	background: #00f5ff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #00f5ff !important;
}

[data-skin-template="deep_abyss"] .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #00f5ff !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(0,245,255,0.3) !important;
}

[data-skin-template="deep_abyss"] .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="deep_abyss"] .card,
body.light-mode[data-skin-template="deep_abyss"] .card,
[data-bs-theme="light"] [data-skin-template="deep_abyss"] .card {
	background: #f0fdf4 !important;
	border-color: #7dd3fc !important;
	box-shadow: 0 4px 16px rgba(0,245,255,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="deep_abyss"] #player,
body.light-mode[data-skin-template="deep_abyss"] #player,
[data-bs-theme="light"] [data-skin-template="deep_abyss"] #player {
	background: #e0f2fe !important;
	border-color: #7dd3fc !important;
}

/* --- Login Screen for deep_abyss --- */
[data-skin-template="deep_abyss"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #02060d !important;
	color: #e0f2fe !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-signin {
	background: #05101f !important;
	border: 1px solid #0284c7 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 25px rgba(0,245,255,0.2) !important;
	border-left: 3px solid #00f5ff !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #e0f2fe !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00f5ff) !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e0f2fe !important;
	border-radius: 10px !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-floating > .form-control:focus {
	border-color: #00f5ff !important;
	box-shadow: 0 0 14px #00f5ff !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-signin .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #00f5ff !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(0,245,255,0.3) !important;
}

[data-skin-template="deep_abyss"] body.text-center .form-signin .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 13: tokyo_drift (Tokyo Drift)
   -------------------------------------------------------------------------- */
[data-skin-template="tokyo_drift"] body {
	font-family: 'Russo One', sans-serif !important;
	background: #080c08 !important;
	color: #f0fdf4 !important;
	text-shadow: 0 0 6px rgba(0,255,102,0.3);
}

[data-skin-template="tokyo_drift"] #header {
	background: #0d160f !important;
	border-bottom: 1px solid #00ff66 !important;
}

[data-skin-template="tokyo_drift"] #leftPanel,
[data-skin-template="tokyo_drift"] .sidebar {
	background: #0a120c !important;
	border-right: 1px solid rgba(0,255,102,0.2) !important;
}

[data-skin-template="tokyo_drift"] .nav-link.active,
[data-skin-template="tokyo_drift"] .sidebar .nav-link.active {
	background: #00ff66 !important;
	color: #000000 !important;
	border: 1px solid #4ade80 !important;
	box-shadow: 0 0 18px rgba(0,255,102,0.6) !important;
}

[data-skin-template="tokyo_drift"] .card {
	background: #0f1812 !important;
	border: 1px solid #22c55e !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 25px rgba(0,255,102,0.2) !important;
	border-bottom: 3px solid #00ff66 !important;
}

[data-skin-template="tokyo_drift"] #player {
	background: #0a120d !important;
	border: 1px solid #00ff66 !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(0,255,102,0.25) !important;
	border-top: 3px solid #22c55e !important;
}

[data-skin-template="tokyo_drift"] #cover img {
	border: 2px solid #00ff66 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(0,255,102,0.5) !important;
}

[data-skin-template="tokyo_drift"] #pause {
	background: #00ff66 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(0,255,102,0.75) !important;
	border-radius: 6px !important;
}

[data-skin-template="tokyo_drift"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 32px rgba(0,255,102,1);
}

[data-skin-template="tokyo_drift"] #timeline {
	background: #040704 !important;
	border-radius: 3px !important;
	border: 1px solid rgba(0,255,102,0.25) !important;
}

[data-skin-template="tokyo_drift"] #slider {
	background: linear-gradient(90deg, #22c55e 0%, #00ff66 70%, #ef4444 100%) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #00ff66 !important;
}

[data-skin-template="tokyo_drift"] .btn-primary {
	background: #15803d !important;
	border: 1px solid #00ff66 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(0,255,102,0.35) !important;
}

[data-skin-template="tokyo_drift"] .btn-primary:hover {
	background: #16a34a !important; color: #000000 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="tokyo_drift"] .card,
body.light-mode[data-skin-template="tokyo_drift"] .card,
[data-bs-theme="light"] [data-skin-template="tokyo_drift"] .card {
	background: #f0fdf4 !important;
	border-color: #86efac !important;
	box-shadow: 0 4px 16px rgba(0,255,102,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="tokyo_drift"] #player,
body.light-mode[data-skin-template="tokyo_drift"] #player,
[data-bs-theme="light"] [data-skin-template="tokyo_drift"] #player {
	background: #dcfce7 !important;
	border-color: #86efac !important;
}

/* --- Login Screen for tokyo_drift --- */
[data-skin-template="tokyo_drift"] body.text-center {
	font-family: 'Russo One', sans-serif !important;
	background: #080c08 !important;
	color: #f0fdf4 !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-signin {
	background: #0f1812 !important;
	border: 1px solid #22c55e !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 25px rgba(0,255,102,0.2) !important;
	border-bottom: 3px solid #00ff66 !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-signin h1 {
	font-family: 'Russo One', sans-serif !important;
	color: #f0fdf4 !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00ff66) !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f0fdf4 !important;
	border-radius: 6px !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-floating > .form-control:focus {
	border-color: #00ff66 !important;
	box-shadow: 0 0 14px #00ff66 !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-signin .btn-primary {
	background: #15803d !important;
	border: 1px solid #00ff66 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(0,255,102,0.35) !important;
}

[data-skin-template="tokyo_drift"] body.text-center .form-signin .btn-primary:hover {
	background: #16a34a !important; color: #000000 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 14: copper_forge (Copper Forge)
   -------------------------------------------------------------------------- */
[data-skin-template="copper_forge"] body {
	font-family: 'Share Tech Mono', serif !important;
	background: #0d0805 !important;
	color: #fef3c7 !important;
}

[data-skin-template="copper_forge"] #header {
	background: #150d07 !important;
	border-bottom: 1px solid #b45309 !important;
}

[data-skin-template="copper_forge"] #leftPanel,
[data-skin-template="copper_forge"] .sidebar {
	background: #110a05 !important;
	border-right: 1px solid rgba(180,83,9,0.25) !important;
}

[data-skin-template="copper_forge"] .nav-link.active,
[data-skin-template="copper_forge"] .sidebar .nav-link.active {
	background: #b45309 !important;
	color: #ffffff !important;
	border: 1px solid #d97706 !important;
	box-shadow: 0 0 14px rgba(180,83,9,0.5) !important;
}

[data-skin-template="copper_forge"] .card {
	background: #180f08 !important;
	border: 1px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(180,83,9,0.25) !important;
	border-top: 3px solid #14b8a6 !important;
}

[data-skin-template="copper_forge"] #player {
	background: #130b06 !important;
	border: 1px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(180,83,9,0.3) !important;
	border-left: 3px solid #14b8a6 !important;
}

[data-skin-template="copper_forge"] #cover img {
	border: 2px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 18px rgba(180,83,9,0.35) !important;
}

[data-skin-template="copper_forge"] #pause {
	background: #b45309 !important;
	border: 2px solid #d97706 !important;
	color: #ffffff !important;
	box-shadow: 0 0 18px rgba(180,83,9,0.5) !important;
	border-radius: 4px !important;
}

[data-skin-template="copper_forge"] #pause:hover {
	transform: scale(1.05); box-shadow: 0 0 25px rgba(180,83,9,0.8);
}

[data-skin-template="copper_forge"] #timeline {
	background: #080402 !important;
	border-radius: 2px !important;
	border: 1px solid rgba(180,83,9,0.2) !important;
}

[data-skin-template="copper_forge"] #slider {
	background: #b45309 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 10px #b45309 !important;
}

[data-skin-template="copper_forge"] .btn-primary {
	background: #78350f !important;
	border: 1px solid #b45309 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(180,83,9,0.25) !important;
}

[data-skin-template="copper_forge"] .btn-primary:hover {
	background: #b45309 !important; color: #ffffff !important;
}

[data-bs-theme="light"][data-skin-template="copper_forge"] .card,
body.light-mode[data-skin-template="copper_forge"] .card,
[data-bs-theme="light"] [data-skin-template="copper_forge"] .card {
	background: #fffbeb !important;
	border-color: #fde68a !important;
	box-shadow: 0 4px 16px rgba(180,83,9,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="copper_forge"] #player,
body.light-mode[data-skin-template="copper_forge"] #player,
[data-bs-theme="light"] [data-skin-template="copper_forge"] #player {
	background: #fef3c7 !important;
	border-color: #fde68a !important;
}

/* --- Login Screen for copper_forge --- */
[data-skin-template="copper_forge"] body.text-center {
	font-family: 'Share Tech Mono', serif !important;
	background: #0d0805 !important;
	color: #fef3c7 !important;
}

[data-skin-template="copper_forge"] body.text-center .form-signin {
	background: #180f08 !important;
	border: 1px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(180,83,9,0.25) !important;
	border-top: 3px solid #14b8a6 !important;
}

[data-skin-template="copper_forge"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', serif !important;
	color: #fef3c7 !important;
}

[data-skin-template="copper_forge"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #b45309) !important;
}

[data-skin-template="copper_forge"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
}

[data-skin-template="copper_forge"] body.text-center .form-floating > .form-control:focus {
	border-color: #b45309 !important;
	box-shadow: 0 0 14px #b45309 !important;
}

[data-skin-template="copper_forge"] body.text-center .form-signin .btn-primary {
	background: #78350f !important;
	border: 1px solid #b45309 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(180,83,9,0.25) !important;
}

[data-skin-template="copper_forge"] body.text-center .form-signin .btn-primary:hover {
	background: #b45309 !important; color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Skin 15: cherry_blossom (Cherry Blossom)
   -------------------------------------------------------------------------- */
[data-skin-template="cherry_blossom"] body {
	font-family: 'Inter', sans-serif !important;
	background: #0e070c !important;
	color: #fdf2f8 !important;
}

[data-skin-template="cherry_blossom"] #header {
	background: #170a13 !important;
	border-bottom: 1px solid rgba(244,114,182,0.3) !important;
}

[data-skin-template="cherry_blossom"] #leftPanel,
[data-skin-template="cherry_blossom"] .sidebar {
	background: #12070f !important;
	border-right: 1px solid rgba(244,114,182,0.2) !important;
}

[data-skin-template="cherry_blossom"] .nav-link.active,
[data-skin-template="cherry_blossom"] .sidebar .nav-link.active {
	background: #f472b6 !important;
	color: #000000 !important;
	border: 1px solid #fbcfe8 !important;
	box-shadow: 0 0 15px rgba(244,114,182,0.45) !important;
}

[data-skin-template="cherry_blossom"] .card {
	background: #1a0c16 !important;
	border: 1px solid rgba(244,114,182,0.3) !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 20px rgba(244,114,182,0.15) !important;
}

[data-skin-template="cherry_blossom"] #player {
	background: #140911 !important;
	border: 1px solid rgba(244,114,182,0.3) !important;
	border-radius: 18px !important;
	box-shadow: 0 8px 25px rgba(244,114,182,0.2) !important;
}

[data-skin-template="cherry_blossom"] #cover img {
	border: 2px solid #f472b6 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 18px rgba(244,114,182,0.35) !important;
}

[data-skin-template="cherry_blossom"] #pause {
	background: #f472b6 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 18px rgba(244,114,182,0.6) !important;
	border-radius: 50% !important;
}

[data-skin-template="cherry_blossom"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 25px rgba(244,114,182,0.85);
}

[data-skin-template="cherry_blossom"] #timeline {
	background: #090307 !important;
	border-radius: 50px !important;
	border: 1px solid rgba(244,114,182,0.2) !important;
}

[data-skin-template="cherry_blossom"] #slider {
	background: #f472b6 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 10px #f472b6 !important;
}

[data-skin-template="cherry_blossom"] .btn-primary {
	background: #f472b6 !important;
	border: 1px solid #ec4899 !important;
	color: #000000 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 14px rgba(244,114,182,0.3) !important;
}

[data-skin-template="cherry_blossom"] .btn-primary:hover {
	background: #ec4899 !important; color: #ffffff !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="cherry_blossom"] .card,
body.light-mode[data-skin-template="cherry_blossom"] .card,
[data-bs-theme="light"] [data-skin-template="cherry_blossom"] .card {
	background: #fdf2f8 !important;
	border-color: #fbcfe8 !important;
	box-shadow: 0 4px 16px rgba(244,114,182,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="cherry_blossom"] #player,
body.light-mode[data-skin-template="cherry_blossom"] #player,
[data-bs-theme="light"] [data-skin-template="cherry_blossom"] #player {
	background: #fce7f3 !important;
	border-color: #fbcfe8 !important;
}

/* --- Login Screen for cherry_blossom --- */
[data-skin-template="cherry_blossom"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #0e070c !important;
	color: #fdf2f8 !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-signin {
	background: #1a0c16 !important;
	border: 1px solid rgba(244,114,182,0.3) !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 20px rgba(244,114,182,0.15) !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #fdf2f8 !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #f472b6) !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fdf2f8 !important;
	border-radius: 18px !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-floating > .form-control:focus {
	border-color: #f472b6 !important;
	box-shadow: 0 0 14px #f472b6 !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-signin .btn-primary {
	background: #f472b6 !important;
	border: 1px solid #ec4899 !important;
	color: #000000 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 14px rgba(244,114,182,0.3) !important;
}

[data-skin-template="cherry_blossom"] body.text-center .form-signin .btn-primary:hover {
	background: #ec4899 !important; color: #ffffff !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 16: cyberpunk_2077 (Cyberpunk 2077)
   -------------------------------------------------------------------------- */
[data-skin-template="cyberpunk_2077"] body {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #0d0d12 !important;
	color: #fcee0a !important;
	text-shadow: 0 0 8px rgba(252,238,10,0.35);
}

[data-skin-template="cyberpunk_2077"] #header {
	background: #12131c !important;
	border-bottom: 2px solid #fcee0a !important;
}

[data-skin-template="cyberpunk_2077"] #leftPanel,
[data-skin-template="cyberpunk_2077"] .sidebar {
	background: #0e0f17 !important;
	border-right: 1px solid rgba(252,238,10,0.3) !important;
}

[data-skin-template="cyberpunk_2077"] .nav-link.active,
[data-skin-template="cyberpunk_2077"] .sidebar .nav-link.active {
	background: #fcee0a !important;
	color: #000000 !important;
	border: 1px solid #00f0ff !important;
	box-shadow: 0 0 20px rgba(252,238,10,0.7) !important;
}

[data-skin-template="cyberpunk_2077"] .card {
	background: #13141f !important;
	border: 1px solid #fcee0a !important;
	border-radius: 2px !important;
	box-shadow: 0 0 25px rgba(252,238,10,0.25) !important;
	border-left: 4px solid #00f0ff !important; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
}

[data-skin-template="cyberpunk_2077"] #player {
	background: #0f1018 !important;
	border: 1px solid #fcee0a !important;
	border-radius: 2px !important;
	box-shadow: 0 0 30px rgba(252,238,10,0.3) !important;
	border-top: 3px solid #00f0ff !important;
}

[data-skin-template="cyberpunk_2077"] #cover img {
	border: 2px solid #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 22px rgba(0,240,255,0.6) !important;
}

[data-skin-template="cyberpunk_2077"] #pause {
	background: #fcee0a !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 25px rgba(252,238,10,0.85) !important;
	border-radius: 2px !important;
}

[data-skin-template="cyberpunk_2077"] #pause:hover {
	animation: cyberGlitch 0.3s infinite ease-in-out; box-shadow: 0 0 35px rgba(252,238,10,1);
}

[data-skin-template="cyberpunk_2077"] #timeline {
	background: #08080c !important;
	border-radius: 0px !important;
	border: 1px solid rgba(0,240,255,0.3) !important;
}

[data-skin-template="cyberpunk_2077"] #slider {
	background: linear-gradient(90deg, #00f0ff, #fcee0a) !important;
	border-radius: 0px !important;
	box-shadow: 0 0 14px #fcee0a !important;
}

[data-skin-template="cyberpunk_2077"] .btn-primary {
	background: #fcee0a !important;
	border: 1px solid #00f0ff !important;
	color: #000000 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 16px rgba(252,238,10,0.4) !important;
}

[data-skin-template="cyberpunk_2077"] .btn-primary:hover {
	background: #00f0ff !important; color: #000000 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="cyberpunk_2077"] .card,
body.light-mode[data-skin-template="cyberpunk_2077"] .card,
[data-bs-theme="light"] [data-skin-template="cyberpunk_2077"] .card {
	background: #fefce8 !important;
	border-color: #facc15 !important;
	box-shadow: 0 4px 18px rgba(250,204,21,0.2) !important;
}

[data-bs-theme="light"][data-skin-template="cyberpunk_2077"] #player,
body.light-mode[data-skin-template="cyberpunk_2077"] #player,
[data-bs-theme="light"] [data-skin-template="cyberpunk_2077"] #player {
	background: #fef08a !important;
	border-color: #00f0ff !important;
}

/* --- Login Screen for cyberpunk_2077 --- */
[data-skin-template="cyberpunk_2077"] body.text-center {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #0d0d12 !important;
	color: #fcee0a !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-signin {
	background: #13141f !important;
	border: 1px solid #fcee0a !important;
	border-radius: 2px !important;
	box-shadow: 0 0 25px rgba(252,238,10,0.25) !important;
	border-left: 4px solid #00f0ff !important; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-signin h1 {
	font-family: 'Chakra Petch', sans-serif !important;
	color: #fcee0a !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #fcee0a) !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fcee0a !important;
	border-radius: 2px !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-floating > .form-control:focus {
	border-color: #fcee0a !important;
	box-shadow: 0 0 14px #fcee0a !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-signin .btn-primary {
	background: #fcee0a !important;
	border: 1px solid #00f0ff !important;
	color: #000000 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 16px rgba(252,238,10,0.4) !important;
}

[data-skin-template="cyberpunk_2077"] body.text-center .form-signin .btn-primary:hover {
	background: #00f0ff !important; color: #000000 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 17: eva_unit01 (Evangelion EVA-01)
   -------------------------------------------------------------------------- */
[data-skin-template="eva_unit01"] body {
	font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
	background: #07040d !important;
	color: #e9d5ff !important;
	text-shadow: 0 0 6px rgba(34,197,94,0.3);
}

[data-skin-template="eva_unit01"] #header {
	background: #10071c !important;
	border-bottom: 2px solid #22c55e !important;
}

[data-skin-template="eva_unit01"] #leftPanel,
[data-skin-template="eva_unit01"] .sidebar {
	background: #0c0516 !important;
	border-right: 1px solid rgba(147,51,234,0.3) !important;
}

[data-skin-template="eva_unit01"] .nav-link.active,
[data-skin-template="eva_unit01"] .sidebar .nav-link.active {
	background: #22c55e !important;
	color: #000000 !important;
	border: 1px solid #4ade80 !important;
	box-shadow: 0 0 18px rgba(34,197,94,0.6) !important;
}

[data-skin-template="eva_unit01"] .card {
	background: #110a1f !important;
	border: 1px solid #9333ea !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(147,51,234,0.3) !important;
	border-left: 4px solid #22c55e !important;
}

[data-skin-template="eva_unit01"] #player {
	background: #0d0718 !important;
	border: 1px solid #22c55e !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(34,197,94,0.3) !important;
	border-top: 3px solid #9333ea !important;
}

[data-skin-template="eva_unit01"] #cover img {
	border: 2px solid #22c55e !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(34,197,94,0.5) !important;
}

[data-skin-template="eva_unit01"] #pause {
	background: #22c55e !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(34,197,94,0.7) !important;
	border-radius: 4px !important;
}

[data-skin-template="eva_unit01"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(34,197,94,0.95);
}

[data-skin-template="eva_unit01"] #timeline {
	background: #05020a !important;
	border-radius: 2px !important;
	border: 1px solid rgba(34,197,94,0.3) !important;
}

[data-skin-template="eva_unit01"] #slider {
	background: linear-gradient(90deg, #9333ea, #22c55e) !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #22c55e !important;
}

[data-skin-template="eva_unit01"] .btn-primary {
	background: #9333ea !important;
	border: 1px solid #22c55e !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(147,51,234,0.4) !important;
}

[data-skin-template="eva_unit01"] .btn-primary:hover {
	background: #7e22ce !important; color: #22c55e !important;
}

[data-bs-theme="light"][data-skin-template="eva_unit01"] .card,
body.light-mode[data-skin-template="eva_unit01"] .card,
[data-bs-theme="light"] [data-skin-template="eva_unit01"] .card {
	background: #faf5ff !important;
	border-color: #c084fc !important;
	box-shadow: 0 4px 16px rgba(147,51,234,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="eva_unit01"] #player,
body.light-mode[data-skin-template="eva_unit01"] #player,
[data-bs-theme="light"] [data-skin-template="eva_unit01"] #player {
	background: #f3e8ff !important;
	border-color: #22c55e !important;
}

/* --- Login Screen for eva_unit01 --- */
[data-skin-template="eva_unit01"] body.text-center {
	font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
	background: #07040d !important;
	color: #e9d5ff !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-signin {
	background: #110a1f !important;
	border: 1px solid #9333ea !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(147,51,234,0.3) !important;
	border-left: 4px solid #22c55e !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', 'Share Tech Mono', sans-serif !important;
	color: #e9d5ff !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #22c55e) !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e9d5ff !important;
	border-radius: 4px !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-floating > .form-control:focus {
	border-color: #22c55e !important;
	box-shadow: 0 0 14px #22c55e !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-signin .btn-primary {
	background: #9333ea !important;
	border: 1px solid #22c55e !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(147,51,234,0.4) !important;
}

[data-skin-template="eva_unit01"] body.text-center .form-signin .btn-primary:hover {
	background: #7e22ce !important; color: #22c55e !important;
}

/* --------------------------------------------------------------------------
   Skin 18: blade_runner (Blade Runner 2049)
   -------------------------------------------------------------------------- */
[data-skin-template="blade_runner"] body {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #0a0808 !important;
	color: #fdf2f8 !important;
	text-shadow: 0 0 6px rgba(236,72,153,0.3);
}

[data-skin-template="blade_runner"] #header {
	background: #140e0d !important;
	border-bottom: 1px solid #ec4899 !important;
}

[data-skin-template="blade_runner"] #leftPanel,
[data-skin-template="blade_runner"] .sidebar {
	background: #0f0b0a !important;
	border-right: 1px solid rgba(180,83,9,0.3) !important;
}

[data-skin-template="blade_runner"] .nav-link.active,
[data-skin-template="blade_runner"] .sidebar .nav-link.active {
	background: #ec4899 !important;
	color: #000000 !important;
	border: 1px solid #f472b6 !important;
	box-shadow: 0 0 16px rgba(236,72,153,0.5) !important;
}

[data-skin-template="blade_runner"] .card {
	background: #16110f !important;
	border: 1px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(236,72,153,0.2) !important;
	border-top: 3px solid #ec4899 !important;
}

[data-skin-template="blade_runner"] #player {
	background: #110c0b !important;
	border: 1px solid #ec4899 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(236,72,153,0.25) !important;
	border-left: 3px solid #b45309 !important;
}

[data-skin-template="blade_runner"] #cover img {
	border: 2px solid #ec4899 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 20px rgba(236,72,153,0.45) !important;
}

[data-skin-template="blade_runner"] #pause {
	background: #ec4899 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 20px rgba(236,72,153,0.65) !important;
	border-radius: 4px !important;
}

[data-skin-template="blade_runner"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(236,72,153,0.9);
}

[data-skin-template="blade_runner"] #timeline {
	background: #070505 !important;
	border-radius: 2px !important;
	border: 1px solid rgba(180,83,9,0.3) !important;
}

[data-skin-template="blade_runner"] #slider {
	background: linear-gradient(90deg, #b45309, #ec4899) !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #ec4899 !important;
}

[data-skin-template="blade_runner"] .btn-primary {
	background: #b45309 !important;
	border: 1px solid #ec4899 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(180,83,9,0.35) !important;
}

[data-skin-template="blade_runner"] .btn-primary:hover {
	background: #92400e !important; color: #ec4899 !important;
}

[data-bs-theme="light"][data-skin-template="blade_runner"] .card,
body.light-mode[data-skin-template="blade_runner"] .card,
[data-bs-theme="light"] [data-skin-template="blade_runner"] .card {
	background: #fff7ed !important;
	border-color: #fed7aa !important;
	box-shadow: 0 4px 16px rgba(236,72,153,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="blade_runner"] #player,
body.light-mode[data-skin-template="blade_runner"] #player,
[data-bs-theme="light"] [data-skin-template="blade_runner"] #player {
	background: #ffedd5 !important;
	border-color: #ec4899 !important;
}

/* --- Login Screen for blade_runner --- */
[data-skin-template="blade_runner"] body.text-center {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #0a0808 !important;
	color: #fdf2f8 !important;
}

[data-skin-template="blade_runner"] body.text-center .form-signin {
	background: #16110f !important;
	border: 1px solid #b45309 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(236,72,153,0.2) !important;
	border-top: 3px solid #ec4899 !important;
}

[data-skin-template="blade_runner"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', sans-serif !important;
	color: #fdf2f8 !important;
}

[data-skin-template="blade_runner"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #ec4899) !important;
}

[data-skin-template="blade_runner"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fdf2f8 !important;
	border-radius: 4px !important;
}

[data-skin-template="blade_runner"] body.text-center .form-floating > .form-control:focus {
	border-color: #ec4899 !important;
	box-shadow: 0 0 14px #ec4899 !important;
}

[data-skin-template="blade_runner"] body.text-center .form-signin .btn-primary {
	background: #b45309 !important;
	border: 1px solid #ec4899 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(180,83,9,0.35) !important;
}

[data-skin-template="blade_runner"] body.text-center .form-signin .btn-primary:hover {
	background: #92400e !important; color: #ec4899 !important;
}

/* --------------------------------------------------------------------------
   Skin 19: spotify_emerald (Spotify Stream)
   -------------------------------------------------------------------------- */
[data-skin-template="spotify_emerald"] body {
	font-family: 'Inter', -apple-system, sans-serif !important;
	background: #121212 !important;
	color: #ffffff !important;
}

[data-skin-template="spotify_emerald"] #header {
	background: #181818 !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

[data-skin-template="spotify_emerald"] #leftPanel,
[data-skin-template="spotify_emerald"] .sidebar {
	background: #121212 !important;
	border-right: 1px solid rgba(255,255,255,0.06) !important;
}

[data-skin-template="spotify_emerald"] .nav-link.active,
[data-skin-template="spotify_emerald"] .sidebar .nav-link.active {
	background: #1ed760 !important;
	color: #000000 !important;
	border: 1px solid #1ed760 !important;
	box-shadow: 0 4px 16px rgba(30,215,96,0.35) !important;
}

[data-skin-template="spotify_emerald"] .card {
	background: #181818 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

[data-skin-template="spotify_emerald"] #player {
	background: #161616 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
}

[data-skin-template="spotify_emerald"] #cover img {
	border: none !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
}

[data-skin-template="spotify_emerald"] #pause {
	background: #1ed760 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 20px rgba(30,215,96,0.55) !important;
	border-radius: 50% !important;
}

[data-skin-template="spotify_emerald"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(30,215,96,0.85);
}

[data-skin-template="spotify_emerald"] #timeline {
	background: #0e0e0e !important;
	border-radius: 50px !important;
	border: none !important;
}

[data-skin-template="spotify_emerald"] #slider {
	background: #1ed760 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 10px rgba(30,215,96,0.6) !important;
}

[data-skin-template="spotify_emerald"] .btn-primary {
	background: #1ed760 !important;
	border: none !important;
	color: #000000 !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 14px rgba(30,215,96,0.3) !important;
}

[data-skin-template="spotify_emerald"] .btn-primary:hover {
	transform: scale(1.04); background: #1fdf64 !important;
}

[data-bs-theme="light"][data-skin-template="spotify_emerald"] .card,
body.light-mode[data-skin-template="spotify_emerald"] .card,
[data-bs-theme="light"] [data-skin-template="spotify_emerald"] .card {
	background: #ffffff !important;
	border-color: #e5e7eb !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

[data-bs-theme="light"][data-skin-template="spotify_emerald"] #player,
body.light-mode[data-skin-template="spotify_emerald"] #player,
[data-bs-theme="light"] [data-skin-template="spotify_emerald"] #player {
	background: #f9fafb !important;
	border-color: #e5e7eb !important;
}

/* --- Login Screen for spotify_emerald --- */
[data-skin-template="spotify_emerald"] body.text-center {
	font-family: 'Inter', -apple-system, sans-serif !important;
	background: #121212 !important;
	color: #ffffff !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-signin {
	background: #181818 !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-signin h1 {
	font-family: 'Inter', -apple-system, sans-serif !important;
	color: #ffffff !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #1ed760) !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border-radius: 12px !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-floating > .form-control:focus {
	border-color: #1ed760 !important;
	box-shadow: 0 0 14px #1ed760 !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-signin .btn-primary {
	background: #1ed760 !important;
	border: none !important;
	color: #000000 !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 14px rgba(30,215,96,0.3) !important;
}

[data-skin-template="spotify_emerald"] body.text-center .form-signin .btn-primary:hover {
	transform: scale(1.04); background: #1fdf64 !important;
}

/* --------------------------------------------------------------------------
   Skin 20: elden_ring (Elden Ring)
   -------------------------------------------------------------------------- */
[data-skin-template="elden_ring"] body {
	font-family: 'Cinzel', serif !important;
	background: #0c0a08 !important;
	color: #fef3c7 !important;
	text-shadow: 0 0 6px rgba(212,175,55,0.25);
}

[data-skin-template="elden_ring"] #header {
	background: #14100b !important;
	border-bottom: 1px solid #d4af37 !important;
}

[data-skin-template="elden_ring"] #leftPanel,
[data-skin-template="elden_ring"] .sidebar {
	background: #100d09 !important;
	border-right: 1px solid rgba(212,175,55,0.25) !important;
}

[data-skin-template="elden_ring"] .nav-link.active,
[data-skin-template="elden_ring"] .sidebar .nav-link.active {
	background: #d4af37 !important;
	color: #000000 !important;
	border: 1px solid #fef08a !important;
	box-shadow: 0 0 18px rgba(212,175,55,0.6) !important;
}

[data-skin-template="elden_ring"] .card {
	background: #15120e !important;
	border: 1px solid #d4af37 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(212,175,55,0.25) !important;
	outline: 1px solid rgba(212,175,55,0.3); outline-offset: -4px;
}

[data-skin-template="elden_ring"] #player {
	background: #120e0a !important;
	border: 1px solid #d4af37 !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(212,175,55,0.3) !important;
	border-top: 3px solid #d4af37 !important;
}

[data-skin-template="elden_ring"] #cover img {
	border: 2px solid #d4af37 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(212,175,55,0.5) !important;
}

[data-skin-template="elden_ring"] #pause {
	background: #d4af37 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(212,175,55,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="elden_ring"] #pause:hover {
	animation: erdtreeEmberFloat 2s infinite ease-in-out; transform: scale(1.08);
}

[data-skin-template="elden_ring"] #timeline {
	background: #080605 !important;
	border-radius: 3px !important;
	border: 1px solid rgba(212,175,55,0.25) !important;
}

[data-skin-template="elden_ring"] #slider {
	background: #d4af37 !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #d4af37 !important;
}

[data-skin-template="elden_ring"] .btn-primary {
	background: #b45309 !important;
	border: 1px solid #d4af37 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(212,175,55,0.35) !important;
}

[data-skin-template="elden_ring"] .btn-primary:hover {
	background: #d4af37 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="elden_ring"] .card,
body.light-mode[data-skin-template="elden_ring"] .card,
[data-bs-theme="light"] [data-skin-template="elden_ring"] .card {
	background: #fefce8 !important;
	border-color: #fef08a !important;
	box-shadow: 0 4px 16px rgba(212,175,55,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="elden_ring"] #player,
body.light-mode[data-skin-template="elden_ring"] #player,
[data-bs-theme="light"] [data-skin-template="elden_ring"] #player {
	background: #fef9c3 !important;
	border-color: #fde047 !important;
}

/* --- Login Screen for elden_ring --- */
[data-skin-template="elden_ring"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #0c0a08 !important;
	color: #fef3c7 !important;
}

[data-skin-template="elden_ring"] body.text-center .form-signin {
	background: #15120e !important;
	border: 1px solid #d4af37 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(212,175,55,0.25) !important;
	outline: 1px solid rgba(212,175,55,0.3); outline-offset: -4px;
}

[data-skin-template="elden_ring"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #fef3c7 !important;
}

[data-skin-template="elden_ring"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #d4af37) !important;
}

[data-skin-template="elden_ring"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef3c7 !important;
	border-radius: 6px !important;
}

[data-skin-template="elden_ring"] body.text-center .form-floating > .form-control:focus {
	border-color: #d4af37 !important;
	box-shadow: 0 0 14px #d4af37 !important;
}

[data-skin-template="elden_ring"] body.text-center .form-signin .btn-primary {
	background: #b45309 !important;
	border: 1px solid #d4af37 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(212,175,55,0.35) !important;
}

[data-skin-template="elden_ring"] body.text-center .form-signin .btn-primary:hover {
	background: #d4af37 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 21: stranger_synth (Stranger Synth)
   -------------------------------------------------------------------------- */
[data-skin-template="stranger_synth"] body {
	font-family: 'Audiowide', sans-serif !important;
	background: #0c0406 !important;
	color: #fee2e2 !important;
	text-shadow: 0 0 8px rgba(239,68,68,0.35);
}

[data-skin-template="stranger_synth"] #header {
	background: #150508 !important;
	border-bottom: 2px solid #ef4444 !important;
}

[data-skin-template="stranger_synth"] #leftPanel,
[data-skin-template="stranger_synth"] .sidebar {
	background: #100406 !important;
	border-right: 1px solid rgba(239,68,68,0.25) !important;
}

[data-skin-template="stranger_synth"] .nav-link.active,
[data-skin-template="stranger_synth"] .sidebar .nav-link.active {
	background: #ef4444 !important;
	color: #ffffff !important;
	border: 1px solid #f87171 !important;
	box-shadow: 0 0 20px rgba(239,68,68,0.7) !important;
}

[data-skin-template="stranger_synth"] .card {
	background: #1a080c !important;
	border: 2px solid #ef4444 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 25px rgba(239,68,68,0.35) !important;
}

[data-skin-template="stranger_synth"] #player {
	background: #140508 !important;
	border: 2px solid #ef4444 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 30px rgba(239,68,68,0.4) !important;
	border-top: 3px solid #ef4444 !important;
}

[data-skin-template="stranger_synth"] #cover img {
	border: 2px solid #ef4444 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(239,68,68,0.6) !important;
}

[data-skin-template="stranger_synth"] #pause {
	background: #ef4444 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(239,68,68,0.8) !important;
	border-radius: 4px !important;
}

[data-skin-template="stranger_synth"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 35px rgba(239,68,68,1);
}

[data-skin-template="stranger_synth"] #timeline {
	background: #080204 !important;
	border-radius: 2px !important;
	border: 1px solid rgba(239,68,68,0.3) !important;
}

[data-skin-template="stranger_synth"] #slider {
	background: #ef4444 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 14px #ef4444 !important;
}

[data-skin-template="stranger_synth"] .btn-primary {
	background: #ef4444 !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 16px rgba(239,68,68,0.4) !important;
}

[data-skin-template="stranger_synth"] .btn-primary:hover {
	background: #dc2626 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="stranger_synth"] .card,
body.light-mode[data-skin-template="stranger_synth"] .card,
[data-bs-theme="light"] [data-skin-template="stranger_synth"] .card {
	background: #fff5f5 !important;
	border-color: #fca5a5 !important;
	box-shadow: 0 4px 18px rgba(239,68,68,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="stranger_synth"] #player,
body.light-mode[data-skin-template="stranger_synth"] #player,
[data-bs-theme="light"] [data-skin-template="stranger_synth"] #player {
	background: #fee2e2 !important;
	border-color: #fca5a5 !important;
}

/* --- Login Screen for stranger_synth --- */
[data-skin-template="stranger_synth"] body.text-center {
	font-family: 'Audiowide', sans-serif !important;
	background: #0c0406 !important;
	color: #fee2e2 !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-signin {
	background: #1a080c !important;
	border: 2px solid #ef4444 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 25px rgba(239,68,68,0.35) !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-signin h1 {
	font-family: 'Audiowide', sans-serif !important;
	color: #fee2e2 !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #ef4444) !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fee2e2 !important;
	border-radius: 8px !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-floating > .form-control:focus {
	border-color: #ef4444 !important;
	box-shadow: 0 0 14px #ef4444 !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-signin .btn-primary {
	background: #ef4444 !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 16px rgba(239,68,68,0.4) !important;
}

[data-skin-template="stranger_synth"] body.text-center .form-signin .btn-primary:hover {
	background: #dc2626 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 22: demon_slayer (Demon Slayer)
   -------------------------------------------------------------------------- */
[data-skin-template="demon_slayer"] body {
	font-family: 'Cinzel', serif !important;
	background: #040a08 !important;
	color: #ecfdf5 !important;
}

[data-skin-template="demon_slayer"] #header {
	background: #071410 !important;
	border-bottom: 1px solid #0284c7 !important;
}

[data-skin-template="demon_slayer"] #leftPanel,
[data-skin-template="demon_slayer"] .sidebar {
	background: #05100c !important;
	border-right: 1px solid rgba(16,185,129,0.2) !important;
}

[data-skin-template="demon_slayer"] .nav-link.active,
[data-skin-template="demon_slayer"] .sidebar .nav-link.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 16px rgba(2,132,199,0.5) !important;
}

[data-skin-template="demon_slayer"] .card {
	background: #081612 !important;
	border: 1px solid #10b981 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(2,132,199,0.25) !important;
	border-left: 4px solid #0284c7 !important;
}

[data-skin-template="demon_slayer"] #player {
	background: #06110e !important;
	border: 1px solid #0284c7 !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(2,132,199,0.3) !important;
	border-top: 3px solid #10b981 !important;
}

[data-skin-template="demon_slayer"] #cover img {
	border: 2px solid #0284c7 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(2,132,199,0.45) !important;
}

[data-skin-template="demon_slayer"] #pause {
	background: #0284c7 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(2,132,199,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="demon_slayer"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(2,132,199,0.9);
}

[data-skin-template="demon_slayer"] #timeline {
	background: #030806 !important;
	border-radius: 3px !important;
	border: 1px solid rgba(2,132,199,0.2) !important;
}

[data-skin-template="demon_slayer"] #slider {
	background: linear-gradient(90deg, #10b981, #0284c7) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #0284c7 !important;
}

[data-skin-template="demon_slayer"] .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #0284c7 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(2,132,199,0.35) !important;
}

[data-skin-template="demon_slayer"] .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="demon_slayer"] .card,
body.light-mode[data-skin-template="demon_slayer"] .card,
[data-bs-theme="light"] [data-skin-template="demon_slayer"] .card {
	background: #f0fdf4 !important;
	border-color: #7dd3fc !important;
	box-shadow: 0 4px 16px rgba(2,132,199,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="demon_slayer"] #player,
body.light-mode[data-skin-template="demon_slayer"] #player,
[data-bs-theme="light"] [data-skin-template="demon_slayer"] #player {
	background: #e0f2fe !important;
	border-color: #7dd3fc !important;
}

/* --- Login Screen for demon_slayer --- */
[data-skin-template="demon_slayer"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #040a08 !important;
	color: #ecfdf5 !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-signin {
	background: #081612 !important;
	border: 1px solid #10b981 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(2,132,199,0.25) !important;
	border-left: 4px solid #0284c7 !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #ecfdf5 !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #0284c7) !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ecfdf5 !important;
	border-radius: 6px !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-floating > .form-control:focus {
	border-color: #0284c7 !important;
	box-shadow: 0 0 14px #0284c7 !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-signin .btn-primary {
	background: #0284c7 !important;
	border: 1px solid #0284c7 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(2,132,199,0.35) !important;
}

[data-skin-template="demon_slayer"] body.text-center .form-signin .btn-primary:hover {
	background: #0369a1 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 23: discord_blurple (Discord Blurple)
   -------------------------------------------------------------------------- */
[data-skin-template="discord_blurple"] body {
	font-family: 'Inter', sans-serif !important;
	background: #1e1f22 !important;
	color: #dbdee1 !important;
}

[data-skin-template="discord_blurple"] #header {
	background: #2b2d31 !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

[data-skin-template="discord_blurple"] #leftPanel,
[data-skin-template="discord_blurple"] .sidebar {
	background: #1e1f22 !important;
	border-right: 1px solid rgba(255,255,255,0.05) !important;
}

[data-skin-template="discord_blurple"] .nav-link.active,
[data-skin-template="discord_blurple"] .sidebar .nav-link.active {
	background: #5865f2 !important;
	color: #ffffff !important;
	border: 1px solid #7983f5 !important;
	box-shadow: 0 4px 15px rgba(88,101,242,0.4) !important;
}

[data-skin-template="discord_blurple"] .card {
	background: #2b2d31 !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

[data-skin-template="discord_blurple"] #player {
	background: #232428 !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
}

[data-skin-template="discord_blurple"] #cover img {
	border: 2px solid #5865f2 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 18px rgba(88,101,242,0.35) !important;
}

[data-skin-template="discord_blurple"] #pause {
	background: #5865f2 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 18px rgba(88,101,242,0.55) !important;
	border-radius: 50% !important;
}

[data-skin-template="discord_blurple"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 25px rgba(88,101,242,0.8);
}

[data-skin-template="discord_blurple"] #timeline {
	background: #18191c !important;
	border-radius: 50px !important;
	border: none !important;
}

[data-skin-template="discord_blurple"] #slider {
	background: #5865f2 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 10px rgba(88,101,242,0.5) !important;
}

[data-skin-template="discord_blurple"] .btn-primary {
	background: #5865f2 !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(88,101,242,0.3) !important;
}

[data-skin-template="discord_blurple"] .btn-primary:hover {
	background: #4752c4 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="discord_blurple"] .card,
body.light-mode[data-skin-template="discord_blurple"] .card,
[data-bs-theme="light"] [data-skin-template="discord_blurple"] .card {
	background: #ffffff !important;
	border-color: #e3e5e8 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

[data-bs-theme="light"][data-skin-template="discord_blurple"] #player,
body.light-mode[data-skin-template="discord_blurple"] #player,
[data-bs-theme="light"] [data-skin-template="discord_blurple"] #player {
	background: #f2f3f5 !important;
	border-color: #e3e5e8 !important;
}

/* --- Login Screen for discord_blurple --- */
[data-skin-template="discord_blurple"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #1e1f22 !important;
	color: #dbdee1 !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-signin {
	background: #2b2d31 !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-radius: 16px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #dbdee1 !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #5865f2) !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #dbdee1 !important;
	border-radius: 16px !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-floating > .form-control:focus {
	border-color: #5865f2 !important;
	box-shadow: 0 0 14px #5865f2 !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-signin .btn-primary {
	background: #5865f2 !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 12px rgba(88,101,242,0.3) !important;
}

[data-skin-template="discord_blurple"] body.text-center .form-signin .btn-primary:hover {
	background: #4752c4 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 24: arcane_hextech (Arcane Hextech)
   -------------------------------------------------------------------------- */
[data-skin-template="arcane_hextech"] body {
	font-family: 'Orbitron', 'Cinzel', sans-serif !important;
	background: #080b18 !important;
	color: #e0f2fe !important;
	text-shadow: 0 0 8px rgba(0,245,212,0.3);
}

[data-skin-template="arcane_hextech"] #header {
	background: #0d1326 !important;
	border-bottom: 1px solid #00f5d4 !important;
}

[data-skin-template="arcane_hextech"] #leftPanel,
[data-skin-template="arcane_hextech"] .sidebar {
	background: #0a0e1c !important;
	border-right: 1px solid rgba(0,245,212,0.2) !important;
}

[data-skin-template="arcane_hextech"] .nav-link.active,
[data-skin-template="arcane_hextech"] .sidebar .nav-link.active {
	background: #00f5d4 !important;
	color: #000000 !important;
	border: 1px solid #9d4edd !important;
	box-shadow: 0 0 18px rgba(0,245,212,0.6) !important;
}

[data-skin-template="arcane_hextech"] .card {
	background: #0e1428 !important;
	border: 1px solid #00f5d4 !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 30px rgba(0,245,212,0.25) !important;
	border-top: 3px solid #9d4edd !important;
}

[data-skin-template="arcane_hextech"] #player {
	background: #0a0f1e !important;
	border: 1px solid #00f5d4 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 35px rgba(0,245,212,0.3) !important;
	border-left: 3px solid #9d4edd !important;
}

[data-skin-template="arcane_hextech"] #cover img {
	border: 2px solid #00f5d4 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 25px rgba(0,245,212,0.5), 0 0 35px rgba(157,78,221,0.35) !important;
}

[data-skin-template="arcane_hextech"] #pause {
	background: #00f5d4 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 25px rgba(0,245,212,0.75) !important;
	border-radius: 50% !important;
}

[data-skin-template="arcane_hextech"] #pause:hover {
	animation: hextechPulse 1.5s infinite ease-in-out; transform: scale(1.1);
}

[data-skin-template="arcane_hextech"] #timeline {
	background: #050710 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(0,245,212,0.25) !important;
}

[data-skin-template="arcane_hextech"] #slider {
	background: linear-gradient(90deg, #9d4edd, #00f5d4) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px #00f5d4 !important;
}

[data-skin-template="arcane_hextech"] .btn-primary {
	background: linear-gradient(135deg, #00f5d4, #0284c7) !important;
	border: 1px solid #00f5d4 !important;
	color: #000000 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 16px rgba(0,245,212,0.4) !important;
}

[data-skin-template="arcane_hextech"] .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 25px rgba(0,245,212,0.75);
}

[data-bs-theme="light"][data-skin-template="arcane_hextech"] .card,
body.light-mode[data-skin-template="arcane_hextech"] .card,
[data-bs-theme="light"] [data-skin-template="arcane_hextech"] .card {
	background: #f0fdf4 !important;
	border-color: #6ee7b7 !important;
	box-shadow: 0 4px 18px rgba(0,245,212,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="arcane_hextech"] #player,
body.light-mode[data-skin-template="arcane_hextech"] #player,
[data-bs-theme="light"] [data-skin-template="arcane_hextech"] #player {
	background: #dcfce7 !important;
	border-color: #6ee7b7 !important;
}

/* --- Login Screen for arcane_hextech --- */
[data-skin-template="arcane_hextech"] body.text-center {
	font-family: 'Orbitron', 'Cinzel', sans-serif !important;
	background: #080b18 !important;
	color: #e0f2fe !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-signin {
	background: #0e1428 !important;
	border: 1px solid #00f5d4 !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 30px rgba(0,245,212,0.25) !important;
	border-top: 3px solid #9d4edd !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', 'Cinzel', sans-serif !important;
	color: #e0f2fe !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00f5d4) !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e0f2fe !important;
	border-radius: 12px !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-floating > .form-control:focus {
	border-color: #00f5d4 !important;
	box-shadow: 0 0 14px #00f5d4 !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-signin .btn-primary {
	background: linear-gradient(135deg, #00f5d4, #0284c7) !important;
	border: 1px solid #00f5d4 !important;
	color: #000000 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 16px rgba(0,245,212,0.4) !important;
}

[data-skin-template="arcane_hextech"] body.text-center .form-signin .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 25px rgba(0,245,212,0.75);
}

/* --------------------------------------------------------------------------
   Skin 25: zelda_sheikah (Zelda Tears of the Kingdom)
   -------------------------------------------------------------------------- */
[data-skin-template="zelda_sheikah"] body {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #061210 !important;
	color: #ecfdf5 !important;
	text-shadow: 0 0 6px rgba(16,185,129,0.3);
}

[data-skin-template="zelda_sheikah"] #header {
	background: #0a1f1b !important;
	border-bottom: 1px solid #10b981 !important;
}

[data-skin-template="zelda_sheikah"] #leftPanel,
[data-skin-template="zelda_sheikah"] .sidebar {
	background: #071714 !important;
	border-right: 1px solid rgba(16,185,129,0.2) !important;
}

[data-skin-template="zelda_sheikah"] .nav-link.active,
[data-skin-template="zelda_sheikah"] .sidebar .nav-link.active {
	background: #10b981 !important;
	color: #022c22 !important;
	border: 1px solid #06b6d4 !important;
	box-shadow: 0 0 18px rgba(16,185,129,0.55) !important;
}

[data-skin-template="zelda_sheikah"] .card {
	background: #0b1e1b !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(16,185,129,0.25) !important;
	border-left: 3px solid #06b6d4 !important;
}

[data-skin-template="zelda_sheikah"] #player {
	background: #081715 !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 30px rgba(16,185,129,0.3) !important;
	border-top: 3px solid #06b6d4 !important;
}

[data-skin-template="zelda_sheikah"] #cover img {
	border: 2px solid #10b981 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(16,185,129,0.45) !important;
}

[data-skin-template="zelda_sheikah"] #pause {
	background: #10b981 !important;
	border: none !important;
	color: #022c22 !important;
	box-shadow: 0 0 22px rgba(16,185,129,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="zelda_sheikah"] #pause:hover {
	transform: scale(1.1);
}

[data-skin-template="zelda_sheikah"] #timeline {
	background: #040b0a !important;
	border-radius: 4px !important;
	border: 1px solid rgba(16,185,129,0.25) !important;
}

[data-skin-template="zelda_sheikah"] #slider {
	background: linear-gradient(90deg, #06b6d4, #10b981) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #10b981 !important;
}

[data-skin-template="zelda_sheikah"] .btn-primary {
	background: #10b981 !important;
	border: 1px solid #06b6d4 !important;
	color: #022c22 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(16,185,129,0.35) !important;
}

[data-skin-template="zelda_sheikah"] .btn-primary:hover {
	background: #059669 !important; color: #ffffff !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="zelda_sheikah"] .card,
body.light-mode[data-skin-template="zelda_sheikah"] .card,
[data-bs-theme="light"] [data-skin-template="zelda_sheikah"] .card {
	background: #f0fdf4 !important;
	border-color: #6ee7b7 !important;
	box-shadow: 0 4px 16px rgba(16,185,129,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="zelda_sheikah"] #player,
body.light-mode[data-skin-template="zelda_sheikah"] #player,
[data-bs-theme="light"] [data-skin-template="zelda_sheikah"] #player {
	background: #dcfce7 !important;
	border-color: #6ee7b7 !important;
}

/* --- Login Screen for zelda_sheikah --- */
[data-skin-template="zelda_sheikah"] body.text-center {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #061210 !important;
	color: #ecfdf5 !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-signin {
	background: #0b1e1b !important;
	border: 1px solid #10b981 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(16,185,129,0.25) !important;
	border-left: 3px solid #06b6d4 !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-signin h1 {
	font-family: 'Chakra Petch', sans-serif !important;
	color: #ecfdf5 !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #10b981) !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ecfdf5 !important;
	border-radius: 8px !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-floating > .form-control:focus {
	border-color: #10b981 !important;
	box-shadow: 0 0 14px #10b981 !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-signin .btn-primary {
	background: #10b981 !important;
	border: 1px solid #06b6d4 !important;
	color: #022c22 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(16,185,129,0.35) !important;
}

[data-skin-template="zelda_sheikah"] body.text-center .form-signin .btn-primary:hover {
	background: #059669 !important; color: #ffffff !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 26: portal_aperture (Portal Aperture)
   -------------------------------------------------------------------------- */
[data-skin-template="portal_aperture"] body {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #111317 !important;
	color: #f8fafc !important;
}

[data-skin-template="portal_aperture"] #header {
	background: #181b22 !important;
	border-bottom: 1px solid #334155 !important;
}

[data-skin-template="portal_aperture"] #leftPanel,
[data-skin-template="portal_aperture"] .sidebar {
	background: #14161c !important;
	border-right: 1px solid #334155 !important;
}

[data-skin-template="portal_aperture"] .nav-link.active,
[data-skin-template="portal_aperture"] .sidebar .nav-link.active {
	background: #0074d9 !important;
	color: #ffffff !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 16px rgba(0,116,217,0.5) !important;
}

[data-skin-template="portal_aperture"] .card {
	background: #1a1d24 !important;
	border: 1px solid #334155 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.6) !important;
	border-left: 3px solid #0074d9 !important; border-right: 3px solid #ff851b !important;
}

[data-skin-template="portal_aperture"] #player {
	background: #15181e !important;
	border: 1px solid #334155 !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.65) !important;
	border-left: 3px solid #0074d9 !important; border-right: 3px solid #ff851b !important;
}

[data-skin-template="portal_aperture"] #cover img {
	border: 2px solid #0074d9 !important;
	border-radius: 50% !important;
	box-shadow: -4px 0 14px rgba(0,116,217,0.6), 4px 0 14px rgba(255,133,27,0.6) !important;
}

[data-skin-template="portal_aperture"] #pause {
	background: linear-gradient(135deg, #0074d9, #ff851b) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(0,116,217,0.6) !important;
	border-radius: 50px !important;
}

[data-skin-template="portal_aperture"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(255,133,27,0.8);
}

[data-skin-template="portal_aperture"] #timeline {
	background: #0c0e11 !important;
	border-radius: 3px !important;
	border: 1px solid #334155 !important;
}

[data-skin-template="portal_aperture"] #slider {
	background: linear-gradient(90deg, #0074d9, #ff851b) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #ff851b !important;
}

[data-skin-template="portal_aperture"] .btn-primary {
	background: #0074d9 !important;
	border: 1px solid #ff851b !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(0,116,217,0.35) !important;
}

[data-skin-template="portal_aperture"] .btn-primary:hover {
	background: #ff851b !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="portal_aperture"] .card,
body.light-mode[data-skin-template="portal_aperture"] .card,
[data-bs-theme="light"] [data-skin-template="portal_aperture"] .card {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="portal_aperture"] #player,
body.light-mode[data-skin-template="portal_aperture"] #player,
[data-bs-theme="light"] [data-skin-template="portal_aperture"] #player {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
}

/* --- Login Screen for portal_aperture --- */
[data-skin-template="portal_aperture"] body.text-center {
	font-family: 'Share Tech Mono', sans-serif !important;
	background: #111317 !important;
	color: #f8fafc !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-signin {
	background: #1a1d24 !important;
	border: 1px solid #334155 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.6) !important;
	border-left: 3px solid #0074d9 !important; border-right: 3px solid #ff851b !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', sans-serif !important;
	color: #f8fafc !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #ff851b) !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f8fafc !important;
	border-radius: 6px !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-floating > .form-control:focus {
	border-color: linear-gradient(135deg, #0074d9, #ff851b) !important;
	box-shadow: 0 0 14px linear-gradient(135deg, #0074d9, #ff851b) !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-signin .btn-primary {
	background: #0074d9 !important;
	border: 1px solid #ff851b !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(0,116,217,0.35) !important;
}

[data-skin-template="portal_aperture"] body.text-center .form-signin .btn-primary:hover {
	background: #ff851b !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 27: fallout_pipboy (Fallout Pip-Boy 3000)
   -------------------------------------------------------------------------- */
[data-skin-template="fallout_pipboy"] body {
	font-family: 'Share Tech Mono', 'VT323', monospace !important;
	background: #040a05 !important;
	color: #10b981 !important;
	text-shadow: 0 0 6px rgba(16,185,129,0.5);
}

[data-skin-template="fallout_pipboy"] #header {
	background: #061408 !important;
	border-bottom: 2px solid #10b981 !important;
}

[data-skin-template="fallout_pipboy"] #leftPanel,
[data-skin-template="fallout_pipboy"] .sidebar {
	background: #051107 !important;
	border-right: 2px solid #10b981 !important;
}

[data-skin-template="fallout_pipboy"] .nav-link.active,
[data-skin-template="fallout_pipboy"] .sidebar .nav-link.active {
	background: #10b981 !important;
	color: #000000 !important;
	border: 2px solid #34d399 !important;
	box-shadow: 0 0 18px rgba(16,185,129,0.7) !important;
}

[data-skin-template="fallout_pipboy"] .card {
	background: #081a0b !important;
	border: 2px solid #10b981 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 25px rgba(16,185,129,0.3) !important;
}

[data-skin-template="fallout_pipboy"] #player {
	background: #061408 !important;
	border: 2px solid #10b981 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 30px rgba(16,185,129,0.35) !important;
}

[data-skin-template="fallout_pipboy"] #cover img {
	border: 2px solid #10b981 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 20px rgba(16,185,129,0.5) !important;
	filter: sepia(100%) hue-rotate(90deg) saturate(300%) contrast(120%) !important;
}

[data-skin-template="fallout_pipboy"] #pause {
	background: #10b981 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(16,185,129,0.8) !important;
	border-radius: 2px !important;
}

[data-skin-template="fallout_pipboy"] #pause:hover {
	animation: crtPhosphorFlicker 0.4s infinite; transform: scale(1.06);
}

[data-skin-template="fallout_pipboy"] #timeline {
	background: #030704 !important;
	border-radius: 2px !important;
	border: 1px solid #10b981 !important;
}

[data-skin-template="fallout_pipboy"] #slider {
	background: #10b981 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #10b981 !important;
}

[data-skin-template="fallout_pipboy"] .btn-primary {
	background: #064e3b !important;
	border: 1px solid #10b981 !important;
	color: #10b981 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px rgba(16,185,129,0.3) !important;
}

[data-skin-template="fallout_pipboy"] .btn-primary:hover {
	background: #10b981 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="fallout_pipboy"] .card,
body.light-mode[data-skin-template="fallout_pipboy"] .card,
[data-bs-theme="light"] [data-skin-template="fallout_pipboy"] .card {
	background: #f0fdf4 !important;
	border-color: #10b981 !important;
	box-shadow: 0 4px 16px rgba(16,185,129,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="fallout_pipboy"] #player,
body.light-mode[data-skin-template="fallout_pipboy"] #player,
[data-bs-theme="light"] [data-skin-template="fallout_pipboy"] #player {
	background: #dcfce7 !important;
	border-color: #10b981 !important;
}

/* --- Login Screen for fallout_pipboy --- */
[data-skin-template="fallout_pipboy"] body.text-center {
	font-family: 'Share Tech Mono', 'VT323', monospace !important;
	background: #040a05 !important;
	color: #10b981 !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-signin {
	background: #081a0b !important;
	border: 2px solid #10b981 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 25px rgba(16,185,129,0.3) !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-signin h1 {
	font-family: 'Share Tech Mono', 'VT323', monospace !important;
	color: #10b981 !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #10b981) !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #10b981 !important;
	border-radius: 4px !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-floating > .form-control:focus {
	border-color: #10b981 !important;
	box-shadow: 0 0 14px #10b981 !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-signin .btn-primary {
	background: #064e3b !important;
	border: 1px solid #10b981 !important;
	color: #10b981 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px rgba(16,185,129,0.3) !important;
}

[data-skin-template="fallout_pipboy"] body.text-center .form-signin .btn-primary:hover {
	background: #10b981 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 28: halo_unsc (Halo UNSC Spartan)
   -------------------------------------------------------------------------- */
[data-skin-template="halo_unsc"] body {
	font-family: 'Orbitron', sans-serif !important;
	background: #0a0e0a !important;
	color: #fef9c3 !important;
}

[data-skin-template="halo_unsc"] #header {
	background: #101610 !important;
	border-bottom: 2px solid #334155 !important;
}

[data-skin-template="halo_unsc"] #leftPanel,
[data-skin-template="halo_unsc"] .sidebar {
	background: #0d120d !important;
	border-right: 1px solid #334155 !important;
}

[data-skin-template="halo_unsc"] .nav-link.active,
[data-skin-template="halo_unsc"] .sidebar .nav-link.active {
	background: #eab308 !important;
	color: #000000 !important;
	border: 1px solid #fde047 !important;
	box-shadow: 0 0 18px rgba(234,179,8,0.6) !important;
}

[data-skin-template="halo_unsc"] .card {
	background: #121a14 !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.6) !important;
	border-top: 3px solid #eab308 !important; clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}

[data-skin-template="halo_unsc"] #player {
	background: #0e1510 !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
	border-left: 3px solid #06b6d4 !important;
}

[data-skin-template="halo_unsc"] #cover img {
	border: 2px solid #eab308 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(234,179,8,0.5) !important;
}

[data-skin-template="halo_unsc"] #pause {
	background: #eab308 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(234,179,8,0.75) !important;
	border-radius: 4px !important;
}

[data-skin-template="halo_unsc"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(234,179,8,1);
}

[data-skin-template="halo_unsc"] #timeline {
	background: #060906 !important;
	border-radius: 2px !important;
	border: 1px solid #334155 !important;
}

[data-skin-template="halo_unsc"] #slider {
	background: #06b6d4 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #06b6d4 !important;
}

[data-skin-template="halo_unsc"] .btn-primary {
	background: #1e293b !important;
	border: 1px solid #eab308 !important;
	color: #eab308 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(234,179,8,0.3) !important;
}

[data-skin-template="halo_unsc"] .btn-primary:hover {
	background: #eab308 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="halo_unsc"] .card,
body.light-mode[data-skin-template="halo_unsc"] .card,
[data-bs-theme="light"] [data-skin-template="halo_unsc"] .card {
	background: #fefce8 !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="halo_unsc"] #player,
body.light-mode[data-skin-template="halo_unsc"] #player,
[data-bs-theme="light"] [data-skin-template="halo_unsc"] #player {
	background: #fef9c3 !important;
	border-color: #94a3b8 !important;
}

/* --- Login Screen for halo_unsc --- */
[data-skin-template="halo_unsc"] body.text-center {
	font-family: 'Orbitron', sans-serif !important;
	background: #0a0e0a !important;
	color: #fef9c3 !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-signin {
	background: #121a14 !important;
	border: 2px solid #334155 !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.6) !important;
	border-top: 3px solid #eab308 !important; clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', sans-serif !important;
	color: #fef9c3 !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #eab308) !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef9c3 !important;
	border-radius: 4px !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-floating > .form-control:focus {
	border-color: #eab308 !important;
	box-shadow: 0 0 14px #eab308 !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-signin .btn-primary {
	background: #1e293b !important;
	border: 1px solid #eab308 !important;
	color: #eab308 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(234,179,8,0.3) !important;
}

[data-skin-template="halo_unsc"] body.text-center .form-signin .btn-primary:hover {
	background: #eab308 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 29: witcher_medallion (The Witcher)
   -------------------------------------------------------------------------- */
[data-skin-template="witcher_medallion"] body {
	font-family: 'Cinzel', serif !important;
	background: #0d0b09 !important;
	color: #fef3c7 !important;
}

[data-skin-template="witcher_medallion"] #header {
	background: #15110d !important;
	border-bottom: 1px solid #78350f !important;
}

[data-skin-template="witcher_medallion"] #leftPanel,
[data-skin-template="witcher_medallion"] .sidebar {
	background: #110e0a !important;
	border-right: 1px solid rgba(120,53,15,0.3) !important;
}

[data-skin-template="witcher_medallion"] .nav-link.active,
[data-skin-template="witcher_medallion"] .sidebar .nav-link.active {
	background: #d97706 !important;
	color: #000000 !important;
	border: 1px solid #fbbf24 !important;
	box-shadow: 0 0 16px rgba(217,119,6,0.5) !important;
}

[data-skin-template="witcher_medallion"] .card {
	background: #17130e !important;
	border: 1px solid #78350f !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(217,119,6,0.2) !important;
	border-top: 3px solid #d97706 !important;
}

[data-skin-template="witcher_medallion"] #player {
	background: #130f0a !important;
	border: 1px solid #78350f !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.75) !important;
	border-left: 3px solid #d97706 !important;
}

[data-skin-template="witcher_medallion"] #cover img {
	border: 2px solid #94a3b8 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(217,119,6,0.45) !important;
}

[data-skin-template="witcher_medallion"] #pause {
	background: #d97706 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(217,119,6,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="witcher_medallion"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(217,119,6,0.9);
}

[data-skin-template="witcher_medallion"] #timeline {
	background: #080604 !important;
	border-radius: 2px !important;
	border: 1px solid rgba(120,53,15,0.3) !important;
}

[data-skin-template="witcher_medallion"] #slider {
	background: #d97706 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 10px #d97706 !important;
}

[data-skin-template="witcher_medallion"] .btn-primary {
	background: #78350f !important;
	border: 1px solid #d97706 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(217,119,6,0.3) !important;
}

[data-skin-template="witcher_medallion"] .btn-primary:hover {
	background: #d97706 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="witcher_medallion"] .card,
body.light-mode[data-skin-template="witcher_medallion"] .card,
[data-bs-theme="light"] [data-skin-template="witcher_medallion"] .card {
	background: #fffbeb !important;
	border-color: #fed7aa !important;
	box-shadow: 0 4px 16px rgba(217,119,6,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="witcher_medallion"] #player,
body.light-mode[data-skin-template="witcher_medallion"] #player,
[data-bs-theme="light"] [data-skin-template="witcher_medallion"] #player {
	background: #fef3c7 !important;
	border-color: #fed7aa !important;
}

/* --- Login Screen for witcher_medallion --- */
[data-skin-template="witcher_medallion"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #0d0b09 !important;
	color: #fef3c7 !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-signin {
	background: #17130e !important;
	border: 1px solid #78350f !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(217,119,6,0.2) !important;
	border-top: 3px solid #d97706 !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #fef3c7 !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #d97706) !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-floating > .form-control:focus {
	border-color: #d97706 !important;
	box-shadow: 0 0 14px #d97706 !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-signin .btn-primary {
	background: #78350f !important;
	border: 1px solid #d97706 !important;
	color: #fef3c7 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(217,119,6,0.3) !important;
}

[data-skin-template="witcher_medallion"] body.text-center .form-signin .btn-primary:hover {
	background: #d97706 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 30: akatsuki_blood (Akatsuki Blood Clouds)
   -------------------------------------------------------------------------- */
[data-skin-template="akatsuki_blood"] body {
	font-family: 'Cinzel', serif !important;
	background: #070203 !important;
	color: #fee2e2 !important;
	text-shadow: 0 0 8px rgba(220,38,38,0.35);
}

[data-skin-template="akatsuki_blood"] #header {
	background: #120406 !important;
	border-bottom: 2px solid #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] #leftPanel,
[data-skin-template="akatsuki_blood"] .sidebar {
	background: #0e0305 !important;
	border-right: 1px solid rgba(220,38,38,0.3) !important;
}

[data-skin-template="akatsuki_blood"] .nav-link.active,
[data-skin-template="akatsuki_blood"] .sidebar .nav-link.active {
	background: #dc2626 !important;
	color: #ffffff !important;
	border: 1px solid #ef4444 !important;
	box-shadow: 0 0 18px rgba(220,38,38,0.7) !important;
}

[data-skin-template="akatsuki_blood"] .card {
	background: #130608 !important;
	border: 1px solid #dc2626 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(220,38,38,0.3) !important;
	border-top: 3px solid #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] #player {
	background: #100406 !important;
	border: 1px solid #dc2626 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 30px rgba(220,38,38,0.4) !important;
	border-left: 3px solid #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] #cover img {
	border: 2px solid #dc2626 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 25px rgba(220,38,38,0.6) !important;
}

[data-skin-template="akatsuki_blood"] #pause {
	background: #dc2626 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 25px rgba(220,38,38,0.85) !important;
	border-radius: 50% !important;
}

[data-skin-template="akatsuki_blood"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 35px rgba(220,38,38,1);
}

[data-skin-template="akatsuki_blood"] #timeline {
	background: #080203 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(220,38,38,0.3) !important;
}

[data-skin-template="akatsuki_blood"] #slider {
	background: #dc2626 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] .btn-primary {
	background: #dc2626 !important;
	border: 1px solid #b91c1c !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(220,38,38,0.4) !important;
}

[data-skin-template="akatsuki_blood"] .btn-primary:hover {
	background: #b91c1c !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="akatsuki_blood"] .card,
body.light-mode[data-skin-template="akatsuki_blood"] .card,
[data-bs-theme="light"] [data-skin-template="akatsuki_blood"] .card {
	background: #fff5f5 !important;
	border-color: #fca5a5 !important;
	box-shadow: 0 4px 18px rgba(220,38,38,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="akatsuki_blood"] #player,
body.light-mode[data-skin-template="akatsuki_blood"] #player,
[data-bs-theme="light"] [data-skin-template="akatsuki_blood"] #player {
	background: #fee2e2 !important;
	border-color: #fca5a5 !important;
}

/* --- Login Screen for akatsuki_blood --- */
[data-skin-template="akatsuki_blood"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #070203 !important;
	color: #fee2e2 !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-signin {
	background: #130608 !important;
	border: 1px solid #dc2626 !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 25px rgba(220,38,38,0.3) !important;
	border-top: 3px solid #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #fee2e2 !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #dc2626) !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fee2e2 !important;
	border-radius: 8px !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-floating > .form-control:focus {
	border-color: #dc2626 !important;
	box-shadow: 0 0 14px #dc2626 !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-signin .btn-primary {
	background: #dc2626 !important;
	border: 1px solid #b91c1c !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(220,38,38,0.4) !important;
}

[data-skin-template="akatsuki_blood"] body.text-center .form-signin .btn-primary:hover {
	background: #b91c1c !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 31: dragonball_saiyan (Dragon Ball Super Saiyan)
   -------------------------------------------------------------------------- */
[data-skin-template="dragonball_saiyan"] body {
	font-family: 'Russo One', sans-serif !important;
	background: #090714 !important;
	color: #fef08a !important;
	text-shadow: 0 0 8px rgba(250,204,21,0.4);
}

[data-skin-template="dragonball_saiyan"] #header {
	background: #120e24 !important;
	border-bottom: 2px solid #facc15 !important;
}

[data-skin-template="dragonball_saiyan"] #leftPanel,
[data-skin-template="dragonball_saiyan"] .sidebar {
	background: #0e0a1e !important;
	border-right: 1px solid rgba(250,204,21,0.3) !important;
}

[data-skin-template="dragonball_saiyan"] .nav-link.active,
[data-skin-template="dragonball_saiyan"] .sidebar .nav-link.active {
	background: #facc15 !important;
	color: #000000 !important;
	border: 1px solid #fef08a !important;
	box-shadow: 0 0 20px rgba(250,204,21,0.8) !important;
}

[data-skin-template="dragonball_saiyan"] .card {
	background: #140e2b !important;
	border: 2px solid #facc15 !important;
	border-radius: 10px !important;
	box-shadow: 0 0 25px rgba(250,204,21,0.4) !important;
}

[data-skin-template="dragonball_saiyan"] #player {
	background: #100a23 !important;
	border: 2px solid #facc15 !important;
	border-radius: 10px !important;
	box-shadow: 0 0 30px rgba(250,204,21,0.5) !important;
	border-top: 3px solid #06b6d4 !important;
}

[data-skin-template="dragonball_saiyan"] #cover img {
	border: 2px solid #facc15 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 25px rgba(250,204,21,0.7), 0 0 40px rgba(6,182,212,0.4) !important;
}

[data-skin-template="dragonball_saiyan"] #pause {
	background: #facc15 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 25px rgba(250,204,21,0.9) !important;
	border-radius: 50% !important;
}

[data-skin-template="dragonball_saiyan"] #pause:hover {
	transform: scale(1.12); box-shadow: 0 0 35px rgba(250,204,21,1);
}

[data-skin-template="dragonball_saiyan"] #timeline {
	background: #070410 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(250,204,21,0.3) !important;
}

[data-skin-template="dragonball_saiyan"] #slider {
	background: #06b6d4 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px #06b6d4 !important;
}

[data-skin-template="dragonball_saiyan"] .btn-primary {
	background: #facc15 !important;
	border: 1px solid #eab308 !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(250,204,21,0.5) !important;
}

[data-skin-template="dragonball_saiyan"] .btn-primary:hover {
	background: #eab308 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="dragonball_saiyan"] .card,
body.light-mode[data-skin-template="dragonball_saiyan"] .card,
[data-bs-theme="light"] [data-skin-template="dragonball_saiyan"] .card {
	background: #fefce8 !important;
	border-color: #fde047 !important;
	box-shadow: 0 4px 18px rgba(250,204,21,0.2) !important;
}

[data-bs-theme="light"][data-skin-template="dragonball_saiyan"] #player,
body.light-mode[data-skin-template="dragonball_saiyan"] #player,
[data-bs-theme="light"] [data-skin-template="dragonball_saiyan"] #player {
	background: #fef9c3 !important;
	border-color: #facc15 !important;
}

/* --- Login Screen for dragonball_saiyan --- */
[data-skin-template="dragonball_saiyan"] body.text-center {
	font-family: 'Russo One', sans-serif !important;
	background: #090714 !important;
	color: #fef08a !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-signin {
	background: #140e2b !important;
	border: 2px solid #facc15 !important;
	border-radius: 10px !important;
	box-shadow: 0 0 25px rgba(250,204,21,0.4) !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-signin h1 {
	font-family: 'Russo One', sans-serif !important;
	color: #fef08a !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #facc15) !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef08a !important;
	border-radius: 10px !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-floating > .form-control:focus {
	border-color: #facc15 !important;
	box-shadow: 0 0 14px #facc15 !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-signin .btn-primary {
	background: #facc15 !important;
	border: 1px solid #eab308 !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(250,204,21,0.5) !important;
}

[data-skin-template="dragonball_saiyan"] body.text-center .form-signin .btn-primary:hover {
	background: #eab308 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 32: attack_on_titan (Attack on Titan)
   -------------------------------------------------------------------------- */
[data-skin-template="attack_on_titan"] body {
	font-family: 'Cinzel', serif !important;
	background: #090b08 !important;
	color: #f0fdf4 !important;
}

[data-skin-template="attack_on_titan"] #header {
	background: #11150e !important;
	border-bottom: 1px solid #15803d !important;
}

[data-skin-template="attack_on_titan"] #leftPanel,
[data-skin-template="attack_on_titan"] .sidebar {
	background: #0e110b !important;
	border-right: 1px solid rgba(21,128,61,0.25) !important;
}

[data-skin-template="attack_on_titan"] .nav-link.active,
[data-skin-template="attack_on_titan"] .sidebar .nav-link.active {
	background: #15803d !important;
	color: #ffffff !important;
	border: 1px solid #4ade80 !important;
	box-shadow: 0 0 16px rgba(21,128,61,0.5) !important;
}

[data-skin-template="attack_on_titan"] .card {
	background: #131710 !important;
	border: 1px solid #15803d !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(21,128,61,0.25) !important;
	border-top: 3px solid #78716c !important;
}

[data-skin-template="attack_on_titan"] #player {
	background: #0f120c !important;
	border: 1px solid #15803d !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.75) !important;
	border-left: 3px solid #78716c !important;
}

[data-skin-template="attack_on_titan"] #cover img {
	border: 2px solid #15803d !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(21,128,61,0.45) !important;
}

[data-skin-template="attack_on_titan"] #pause {
	background: #15803d !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 20px rgba(21,128,61,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="attack_on_titan"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(21,128,61,0.9);
}

[data-skin-template="attack_on_titan"] #timeline {
	background: #070906 !important;
	border-radius: 3px !important;
	border: 1px solid rgba(21,128,61,0.25) !important;
}

[data-skin-template="attack_on_titan"] #slider {
	background: #15803d !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #15803d !important;
}

[data-skin-template="attack_on_titan"] .btn-primary {
	background: #15803d !important;
	border: 1px solid #166534 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(21,128,61,0.35) !important;
}

[data-skin-template="attack_on_titan"] .btn-primary:hover {
	background: #166534 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="attack_on_titan"] .card,
body.light-mode[data-skin-template="attack_on_titan"] .card,
[data-bs-theme="light"] [data-skin-template="attack_on_titan"] .card {
	background: #f0fdf4 !important;
	border-color: #86efac !important;
	box-shadow: 0 4px 16px rgba(21,128,61,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="attack_on_titan"] #player,
body.light-mode[data-skin-template="attack_on_titan"] #player,
[data-bs-theme="light"] [data-skin-template="attack_on_titan"] #player {
	background: #dcfce7 !important;
	border-color: #86efac !important;
}

/* --- Login Screen for attack_on_titan --- */
[data-skin-template="attack_on_titan"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #090b08 !important;
	color: #f0fdf4 !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-signin {
	background: #131710 !important;
	border: 1px solid #15803d !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(21,128,61,0.25) !important;
	border-top: 3px solid #78716c !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #f0fdf4 !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #15803d) !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f0fdf4 !important;
	border-radius: 6px !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-floating > .form-control:focus {
	border-color: #15803d !important;
	box-shadow: 0 0 14px #15803d !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-signin .btn-primary {
	background: #15803d !important;
	border: 1px solid #166534 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(21,128,61,0.35) !important;
}

[data-skin-template="attack_on_titan"] body.text-center .form-signin .btn-primary:hover {
	background: #166534 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 33: jujutsu_kaisen (Jujutsu Kaisen)
   -------------------------------------------------------------------------- */
[data-skin-template="jujutsu_kaisen"] body {
	font-family: 'Orbitron', sans-serif !important;
	background: #06040e !important;
	color: #e0e7ff !important;
	text-shadow: 0 0 6px rgba(99,102,241,0.35);
}

[data-skin-template="jujutsu_kaisen"] #header {
	background: #0d091e !important;
	border-bottom: 1px solid #6366f1 !important;
}

[data-skin-template="jujutsu_kaisen"] #leftPanel,
[data-skin-template="jujutsu_kaisen"] .sidebar {
	background: #0a0717 !important;
	border-right: 1px solid rgba(99,102,241,0.25) !important;
}

[data-skin-template="jujutsu_kaisen"] .nav-link.active,
[data-skin-template="jujutsu_kaisen"] .sidebar .nav-link.active {
	background: #6366f1 !important;
	color: #ffffff !important;
	border: 1px solid #a5b4fc !important;
	box-shadow: 0 0 18px rgba(99,102,241,0.6) !important;
}

[data-skin-template="jujutsu_kaisen"] .card {
	background: #0e0920 !important;
	border: 1px solid #6366f1 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 25px rgba(99,102,241,0.3) !important;
	border-left: 4px solid #dc2626 !important;
}

[data-skin-template="jujutsu_kaisen"] #player {
	background: #0a0618 !important;
	border: 1px solid #6366f1 !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 30px rgba(99,102,241,0.35) !important;
	border-top: 3px solid #dc2626 !important;
}

[data-skin-template="jujutsu_kaisen"] #cover img {
	border: 2px solid #6366f1 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 25px rgba(99,102,241,0.5), 0 0 35px rgba(220,38,38,0.35) !important;
}

[data-skin-template="jujutsu_kaisen"] #pause {
	background: #6366f1 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(99,102,241,0.75) !important;
	border-radius: 50% !important;
}

[data-skin-template="jujutsu_kaisen"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 32px rgba(99,102,241,1);
}

[data-skin-template="jujutsu_kaisen"] #timeline {
	background: #05030b !important;
	border-radius: 4px !important;
	border: 1px solid rgba(99,102,241,0.25) !important;
}

[data-skin-template="jujutsu_kaisen"] #slider {
	background: linear-gradient(90deg, #6366f1, #dc2626) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px #6366f1 !important;
}

[data-skin-template="jujutsu_kaisen"] .btn-primary {
	background: #6366f1 !important;
	border: 1px solid #4f46e5 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(99,102,241,0.4) !important;
}

[data-skin-template="jujutsu_kaisen"] .btn-primary:hover {
	background: #4f46e5 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="jujutsu_kaisen"] .card,
body.light-mode[data-skin-template="jujutsu_kaisen"] .card,
[data-bs-theme="light"] [data-skin-template="jujutsu_kaisen"] .card {
	background: #eef2ff !important;
	border-color: #c7d2fe !important;
	box-shadow: 0 4px 18px rgba(99,102,241,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="jujutsu_kaisen"] #player,
body.light-mode[data-skin-template="jujutsu_kaisen"] #player,
[data-bs-theme="light"] [data-skin-template="jujutsu_kaisen"] #player {
	background: #e0e7ff !important;
	border-color: #c7d2fe !important;
}

/* --- Login Screen for jujutsu_kaisen --- */
[data-skin-template="jujutsu_kaisen"] body.text-center {
	font-family: 'Orbitron', sans-serif !important;
	background: #06040e !important;
	color: #e0e7ff !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-signin {
	background: #0e0920 !important;
	border: 1px solid #6366f1 !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 25px rgba(99,102,241,0.3) !important;
	border-left: 4px solid #dc2626 !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', sans-serif !important;
	color: #e0e7ff !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #6366f1) !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e0e7ff !important;
	border-radius: 10px !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-floating > .form-control:focus {
	border-color: #6366f1 !important;
	box-shadow: 0 0 14px #6366f1 !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-signin .btn-primary {
	background: #6366f1 !important;
	border: 1px solid #4f46e5 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 16px rgba(99,102,241,0.4) !important;
}

[data-skin-template="jujutsu_kaisen"] body.text-center .form-signin .btn-primary:hover {
	background: #4f46e5 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 34: tron_legacy (Tron: Legacy The Grid)
   -------------------------------------------------------------------------- */
[data-skin-template="tron_legacy"] body {
	font-family: 'Orbitron', sans-serif !important;
	background: #000000 !important;
	color: #00f0ff !important;
	text-shadow: 0 0 8px rgba(0,240,255,0.4);
}

[data-skin-template="tron_legacy"] #header {
	background: #02060b !important;
	border-bottom: 1px solid #00f0ff !important;
}

[data-skin-template="tron_legacy"] #leftPanel,
[data-skin-template="tron_legacy"] .sidebar {
	background: #010408 !important;
	border-right: 1px solid rgba(0,240,255,0.3) !important;
}

[data-skin-template="tron_legacy"] .nav-link.active,
[data-skin-template="tron_legacy"] .sidebar .nav-link.active {
	background: #00f0ff !important;
	color: #000000 !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 20px rgba(0,240,255,0.8) !important;
}

[data-skin-template="tron_legacy"] .card {
	background: #02060b !important;
	border: 1px solid #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 25px rgba(0,240,255,0.35) !important;
}

[data-skin-template="tron_legacy"] #player {
	background: #010408 !important;
	border: 1px solid #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 30px rgba(0,240,255,0.4) !important;
}

[data-skin-template="tron_legacy"] #cover img {
	border: 2px solid #00f0ff !important;
	border-radius: 50% !important;
	box-shadow: 0 0 30px #00f0ff !important;
}

[data-skin-template="tron_legacy"] #pause {
	background: #00f0ff !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 25px #00f0ff !important;
	border-radius: 50% !important;
}

[data-skin-template="tron_legacy"] #pause:hover {
	transform: scale(1.12); box-shadow: 0 0 40px #00f0ff;
}

[data-skin-template="tron_legacy"] #timeline {
	background: #000000 !important;
	border-radius: 0px !important;
	border: 1px solid rgba(0,240,255,0.4) !important;
}

[data-skin-template="tron_legacy"] #slider {
	background: #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 16px #00f0ff !important;
}

[data-skin-template="tron_legacy"] .btn-primary {
	background: #02060b !important;
	border: 1px solid #00f0ff !important;
	color: #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 16px rgba(0,240,255,0.4) !important;
}

[data-skin-template="tron_legacy"] .btn-primary:hover {
	background: #00f0ff !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="tron_legacy"] .card,
body.light-mode[data-skin-template="tron_legacy"] .card,
[data-bs-theme="light"] [data-skin-template="tron_legacy"] .card {
	background: #f0fdf4 !important;
	border-color: #00f0ff !important;
	box-shadow: 0 4px 18px rgba(0,240,255,0.2) !important;
}

[data-bs-theme="light"][data-skin-template="tron_legacy"] #player,
body.light-mode[data-skin-template="tron_legacy"] #player,
[data-bs-theme="light"] [data-skin-template="tron_legacy"] #player {
	background: #e0f2fe !important;
	border-color: #00f0ff !important;
}

/* --- Login Screen for tron_legacy --- */
[data-skin-template="tron_legacy"] body.text-center {
	font-family: 'Orbitron', sans-serif !important;
	background: #000000 !important;
	color: #00f0ff !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-signin {
	background: #02060b !important;
	border: 1px solid #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 25px rgba(0,240,255,0.35) !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', sans-serif !important;
	color: #00f0ff !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00f0ff) !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #00f0ff !important;
	border-radius: 0px !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-floating > .form-control:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 14px #00f0ff !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-signin .btn-primary {
	background: #02060b !important;
	border: 1px solid #00f0ff !important;
	color: #00f0ff !important;
	border-radius: 0px !important;
	box-shadow: 0 0 16px rgba(0,240,255,0.4) !important;
}

[data-skin-template="tron_legacy"] body.text-center .form-signin .btn-primary:hover {
	background: #00f0ff !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 35: matrix_resurrections (The Matrix Digital Rain)
   -------------------------------------------------------------------------- */
[data-skin-template="matrix_resurrections"] body {
	font-family: 'VT323', 'Share Tech Mono', monospace !important;
	background: #020803 !important;
	color: #22c55e !important;
	text-shadow: 0 0 6px rgba(34,197,94,0.5);
}

[data-skin-template="matrix_resurrections"] #header {
	background: #041206 !important;
	border-bottom: 1px solid #22c55e !important;
}

[data-skin-template="matrix_resurrections"] #leftPanel,
[data-skin-template="matrix_resurrections"] .sidebar {
	background: #030e05 !important;
	border-right: 1px solid rgba(34,197,94,0.3) !important;
}

[data-skin-template="matrix_resurrections"] .nav-link.active,
[data-skin-template="matrix_resurrections"] .sidebar .nav-link.active {
	background: #22c55e !important;
	color: #000000 !important;
	border: 1px solid #4ade80 !important;
	box-shadow: 0 0 18px rgba(34,197,94,0.7) !important;
}

[data-skin-template="matrix_resurrections"] .card {
	background: #041206 !important;
	border: 1px solid #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 20px rgba(34,197,94,0.3) !important;
}

[data-skin-template="matrix_resurrections"] #player {
	background: #030e05 !important;
	border: 1px solid #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 25px rgba(34,197,94,0.35) !important;
}

[data-skin-template="matrix_resurrections"] #cover img {
	border: 2px solid #22c55e !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(34,197,94,0.6) !important;
}

[data-skin-template="matrix_resurrections"] #pause {
	background: #22c55e !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(34,197,94,0.8) !important;
	border-radius: 2px !important;
}

[data-skin-template="matrix_resurrections"] #pause:hover {
	animation: crtPhosphorFlicker 0.3s infinite; transform: scale(1.06);
}

[data-skin-template="matrix_resurrections"] #timeline {
	background: #010502 !important;
	border-radius: 2px !important;
	border: 1px solid #22c55e !important;
}

[data-skin-template="matrix_resurrections"] #slider {
	background: #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #22c55e !important;
}

[data-skin-template="matrix_resurrections"] .btn-primary {
	background: #052e16 !important;
	border: 1px solid #22c55e !important;
	color: #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px rgba(34,197,94,0.3) !important;
}

[data-skin-template="matrix_resurrections"] .btn-primary:hover {
	background: #22c55e !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="matrix_resurrections"] .card,
body.light-mode[data-skin-template="matrix_resurrections"] .card,
[data-bs-theme="light"] [data-skin-template="matrix_resurrections"] .card {
	background: #f0fdf4 !important;
	border-color: #22c55e !important;
	box-shadow: 0 4px 16px rgba(34,197,94,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="matrix_resurrections"] #player,
body.light-mode[data-skin-template="matrix_resurrections"] #player,
[data-bs-theme="light"] [data-skin-template="matrix_resurrections"] #player {
	background: #dcfce7 !important;
	border-color: #22c55e !important;
}

/* --- Login Screen for matrix_resurrections --- */
[data-skin-template="matrix_resurrections"] body.text-center {
	font-family: 'VT323', 'Share Tech Mono', monospace !important;
	background: #020803 !important;
	color: #22c55e !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-signin {
	background: #041206 !important;
	border: 1px solid #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 20px rgba(34,197,94,0.3) !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-signin h1 {
	font-family: 'VT323', 'Share Tech Mono', monospace !important;
	color: #22c55e !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #22c55e) !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #22c55e !important;
	border-radius: 2px !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-floating > .form-control:focus {
	border-color: #22c55e !important;
	box-shadow: 0 0 14px #22c55e !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-signin .btn-primary {
	background: #052e16 !important;
	border: 1px solid #22c55e !important;
	color: #22c55e !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px rgba(34,197,94,0.3) !important;
}

[data-skin-template="matrix_resurrections"] body.text-center .form-signin .btn-primary:hover {
	background: #22c55e !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 36: dune_arrakis (Dune Melange Spice)
   -------------------------------------------------------------------------- */
[data-skin-template="dune_arrakis"] body {
	font-family: 'Cinzel', serif !important;
	background: #0d0905 !important;
	color: #fef3c7 !important;
	text-shadow: 0 0 6px rgba(217,119,6,0.25);
}

[data-skin-template="dune_arrakis"] #header {
	background: #160e06 !important;
	border-bottom: 1px solid #d97706 !important;
}

[data-skin-template="dune_arrakis"] #leftPanel,
[data-skin-template="dune_arrakis"] .sidebar {
	background: #120b05 !important;
	border-right: 1px solid rgba(217,119,6,0.25) !important;
}

[data-skin-template="dune_arrakis"] .nav-link.active,
[data-skin-template="dune_arrakis"] .sidebar .nav-link.active {
	background: #0284c7 !important;
	color: #ffffff !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 18px rgba(2,132,199,0.6) !important;
}

[data-skin-template="dune_arrakis"] .card {
	background: #1a1208 !important;
	border: 1px solid #d97706 !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 25px rgba(217,119,6,0.25) !important;
	border-left: 3px solid #0284c7 !important;
}

[data-skin-template="dune_arrakis"] #player {
	background: #140e06 !important;
	border: 1px solid #d97706 !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.75) !important;
	border-top: 3px solid #0284c7 !important;
}

[data-skin-template="dune_arrakis"] #cover img {
	border: 2px solid #d97706 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(2,132,199,0.5) !important;
}

[data-skin-template="dune_arrakis"] #pause {
	background: #0284c7 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(2,132,199,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="dune_arrakis"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(2,132,199,0.95);
}

[data-skin-template="dune_arrakis"] #timeline {
	background: #080502 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(217,119,6,0.25) !important;
}

[data-skin-template="dune_arrakis"] #slider {
	background: linear-gradient(90deg, #d97706, #0284c7) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #0284c7 !important;
}

[data-skin-template="dune_arrakis"] .btn-primary {
	background: #b45309 !important;
	border: 1px solid #0284c7 !important;
	color: #fef3c7 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(2,132,199,0.35) !important;
}

[data-skin-template="dune_arrakis"] .btn-primary:hover {
	background: #0284c7 !important; color: #ffffff !important;
}

[data-bs-theme="light"][data-skin-template="dune_arrakis"] .card,
body.light-mode[data-skin-template="dune_arrakis"] .card,
[data-bs-theme="light"] [data-skin-template="dune_arrakis"] .card {
	background: #fffbeb !important;
	border-color: #fed7aa !important;
	box-shadow: 0 4px 16px rgba(217,119,6,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="dune_arrakis"] #player,
body.light-mode[data-skin-template="dune_arrakis"] #player,
[data-bs-theme="light"] [data-skin-template="dune_arrakis"] #player {
	background: #fef3c7 !important;
	border-color: #fed7aa !important;
}

/* --- Login Screen for dune_arrakis --- */
[data-skin-template="dune_arrakis"] body.text-center {
	font-family: 'Cinzel', serif !important;
	background: #0d0905 !important;
	color: #fef3c7 !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-signin {
	background: #1a1208 !important;
	border: 1px solid #d97706 !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 25px rgba(217,119,6,0.25) !important;
	border-left: 3px solid #0284c7 !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-signin h1 {
	font-family: 'Cinzel', serif !important;
	color: #fef3c7 !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #0284c7) !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #fef3c7 !important;
	border-radius: 12px !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-floating > .form-control:focus {
	border-color: #0284c7 !important;
	box-shadow: 0 0 14px #0284c7 !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-signin .btn-primary {
	background: #b45309 !important;
	border: 1px solid #0284c7 !important;
	color: #fef3c7 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(2,132,199,0.35) !important;
}

[data-skin-template="dune_arrakis"] body.text-center .form-signin .btn-primary:hover {
	background: #0284c7 !important; color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Skin 37: batman_gotham (The Batman: Gotham Knight)
   -------------------------------------------------------------------------- */
[data-skin-template="batman_gotham"] body {
	font-family: 'Russo One', sans-serif !important;
	background: #06070a !important;
	color: #e2e8f0 !important;
}

[data-skin-template="batman_gotham"] #header {
	background: #0c0e14 !important;
	border-bottom: 1px solid #1e293b !important;
}

[data-skin-template="batman_gotham"] #leftPanel,
[data-skin-template="batman_gotham"] .sidebar {
	background: #090a0f !important;
	border-right: 1px solid #1e293b !important;
}

[data-skin-template="batman_gotham"] .nav-link.active,
[data-skin-template="batman_gotham"] .sidebar .nav-link.active {
	background: #dc2626 !important;
	color: #ffffff !important;
	border: 1px solid #ef4444 !important;
	box-shadow: 0 0 18px rgba(220,38,38,0.7) !important;
}

[data-skin-template="batman_gotham"] .card {
	background: #0f1118 !important;
	border: 1px solid #1e293b !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.85) !important;
	border-top: 3px solid #dc2626 !important;
}

[data-skin-template="batman_gotham"] #player {
	background: #0a0c12 !important;
	border: 1px solid #dc2626 !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.9) !important;
	border-left: 3px solid #dc2626 !important;
}

[data-skin-template="batman_gotham"] #cover img {
	border: 2px solid #dc2626 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 22px rgba(220,38,38,0.5) !important;
}

[data-skin-template="batman_gotham"] #pause {
	background: #dc2626 !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(220,38,38,0.75) !important;
	border-radius: 50% !important;
}

[data-skin-template="batman_gotham"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 32px rgba(220,38,38,1);
}

[data-skin-template="batman_gotham"] #timeline {
	background: #040507 !important;
	border-radius: 2px !important;
	border: 1px solid #1e293b !important;
}

[data-skin-template="batman_gotham"] #slider {
	background: #dc2626 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 12px #dc2626 !important;
}

[data-skin-template="batman_gotham"] .btn-primary {
	background: #1e293b !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(220,38,38,0.3) !important;
}

[data-skin-template="batman_gotham"] .btn-primary:hover {
	background: #dc2626 !important; color: #ffffff !important;
}

[data-bs-theme="light"][data-skin-template="batman_gotham"] .card,
body.light-mode[data-skin-template="batman_gotham"] .card,
[data-bs-theme="light"] [data-skin-template="batman_gotham"] .card {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="batman_gotham"] #player,
body.light-mode[data-skin-template="batman_gotham"] #player,
[data-bs-theme="light"] [data-skin-template="batman_gotham"] #player {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
}

/* --- Login Screen for batman_gotham --- */
[data-skin-template="batman_gotham"] body.text-center {
	font-family: 'Russo One', sans-serif !important;
	background: #06070a !important;
	color: #e2e8f0 !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-signin {
	background: #0f1118 !important;
	border: 1px solid #1e293b !important;
	border-radius: 4px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.85) !important;
	border-top: 3px solid #dc2626 !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-signin h1 {
	font-family: 'Russo One', sans-serif !important;
	color: #e2e8f0 !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #dc2626) !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #e2e8f0 !important;
	border-radius: 4px !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-floating > .form-control:focus {
	border-color: #dc2626 !important;
	box-shadow: 0 0 14px #dc2626 !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-signin .btn-primary {
	background: #1e293b !important;
	border: 1px solid #dc2626 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px rgba(220,38,38,0.3) !important;
}

[data-skin-template="batman_gotham"] body.text-center .form-signin .btn-primary:hover {
	background: #dc2626 !important; color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Skin 38: star_wars_mandalorian (Star Wars: The Mandalorian)
   -------------------------------------------------------------------------- */
[data-skin-template="star_wars_mandalorian"] body {
	font-family: 'Orbitron', sans-serif !important;
	background: #0a0c0e !important;
	color: #f1f5f9 !important;
}

[data-skin-template="star_wars_mandalorian"] #header {
	background: #111518 !important;
	border-bottom: 1px solid #64748b !important;
}

[data-skin-template="star_wars_mandalorian"] #leftPanel,
[data-skin-template="star_wars_mandalorian"] .sidebar {
	background: #0d1013 !important;
	border-right: 1px solid rgba(100,116,139,0.3) !important;
}

[data-skin-template="star_wars_mandalorian"] .nav-link.active,
[data-skin-template="star_wars_mandalorian"] .sidebar .nav-link.active {
	background: #38bdf8 !important;
	color: #000000 !important;
	border: 1px solid #7dd3fc !important;
	box-shadow: 0 0 18px rgba(56,189,248,0.6) !important;
}

[data-skin-template="star_wars_mandalorian"] .card {
	background: #14181c !important;
	border: 1px solid #64748b !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(56,189,248,0.2) !important;
	border-left: 3px solid #38bdf8 !important;
}

[data-skin-template="star_wars_mandalorian"] #player {
	background: #0f1316 !important;
	border: 1px solid #64748b !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.75) !important;
	border-top: 3px solid #38bdf8 !important;
}

[data-skin-template="star_wars_mandalorian"] #cover img {
	border: 2px solid #94a3b8 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(56,189,248,0.45) !important;
}

[data-skin-template="star_wars_mandalorian"] #pause {
	background: #38bdf8 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(56,189,248,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="star_wars_mandalorian"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(56,189,248,0.95);
}

[data-skin-template="star_wars_mandalorian"] #timeline {
	background: #07090b !important;
	border-radius: 3px !important;
	border: 1px solid rgba(100,116,139,0.3) !important;
}

[data-skin-template="star_wars_mandalorian"] #slider {
	background: #38bdf8 !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #38bdf8 !important;
}

[data-skin-template="star_wars_mandalorian"] .btn-primary {
	background: #334155 !important;
	border: 1px solid #38bdf8 !important;
	color: #f1f5f9 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(56,189,248,0.35) !important;
}

[data-skin-template="star_wars_mandalorian"] .btn-primary:hover {
	background: #38bdf8 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="star_wars_mandalorian"] .card,
body.light-mode[data-skin-template="star_wars_mandalorian"] .card,
[data-bs-theme="light"] [data-skin-template="star_wars_mandalorian"] .card {
	background: #f8fafc !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 16px rgba(56,189,248,0.1) !important;
}

[data-bs-theme="light"][data-skin-template="star_wars_mandalorian"] #player,
body.light-mode[data-skin-template="star_wars_mandalorian"] #player,
[data-bs-theme="light"] [data-skin-template="star_wars_mandalorian"] #player {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
}

/* --- Login Screen for star_wars_mandalorian --- */
[data-skin-template="star_wars_mandalorian"] body.text-center {
	font-family: 'Orbitron', sans-serif !important;
	background: #0a0c0e !important;
	color: #f1f5f9 !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-signin {
	background: #14181c !important;
	border: 1px solid #64748b !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(56,189,248,0.2) !important;
	border-left: 3px solid #38bdf8 !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-signin h1 {
	font-family: 'Orbitron', sans-serif !important;
	color: #f1f5f9 !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #38bdf8) !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f1f5f9 !important;
	border-radius: 6px !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-floating > .form-control:focus {
	border-color: #38bdf8 !important;
	box-shadow: 0 0 14px #38bdf8 !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-signin .btn-primary {
	background: #334155 !important;
	border: 1px solid #38bdf8 !important;
	color: #f1f5f9 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(56,189,248,0.35) !important;
}

[data-skin-template="star_wars_mandalorian"] body.text-center .form-signin .btn-primary:hover {
	background: #38bdf8 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 39: razer_chroma (Razer Chroma RGB)
   -------------------------------------------------------------------------- */
[data-skin-template="razer_chroma"] body {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #050505 !important;
	color: #f0fdf4 !important;
}

[data-skin-template="razer_chroma"] #header {
	background: #0a0a0a !important;
	border-bottom: 1px solid rgba(0,255,0,0.4) !important;
}

[data-skin-template="razer_chroma"] #leftPanel,
[data-skin-template="razer_chroma"] .sidebar {
	background: #080808 !important;
	border-right: 1px solid rgba(0,255,0,0.3) !important;
}

[data-skin-template="razer_chroma"] .nav-link.active,
[data-skin-template="razer_chroma"] .sidebar .nav-link.active {
	background: #00ff00 !important;
	color: #000000 !important;
	border: 1px solid #4ade80 !important;
	box-shadow: 0 0 20px rgba(0,255,0,0.8) !important;
}

[data-skin-template="razer_chroma"] .card {
	background: #0c0c0c !important;
	border: 1px solid rgba(0,255,0,0.3) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 25px rgba(0,255,0,0.25) !important;
}

[data-skin-template="razer_chroma"] #player {
	background: #090909 !important;
	border: 1px solid rgba(0,255,0,0.4) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 30px rgba(0,255,0,0.3) !important;
}

[data-skin-template="razer_chroma"] #cover img {
	border: 2px solid #00ff00 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 25px rgba(0,255,0,0.6) !important;
}

[data-skin-template="razer_chroma"] #pause {
	background: #00ff00 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 25px #00ff00 !important;
	border-radius: 50% !important;
}

[data-skin-template="razer_chroma"] #pause:hover {
	transform: scale(1.12); box-shadow: 0 0 35px #00ff00;
}

[data-skin-template="razer_chroma"] #timeline {
	background: #030303 !important;
	border-radius: 4px !important;
	border: 1px solid rgba(0,255,0,0.3) !important;
}

[data-skin-template="razer_chroma"] #slider {
	background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px #00ff00 !important;
}

[data-skin-template="razer_chroma"] .btn-primary {
	background: #00ff00 !important;
	border: none !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 18px rgba(0,255,0,0.5) !important;
}

[data-skin-template="razer_chroma"] .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 25px rgba(0,255,0,0.8);
}

[data-bs-theme="light"][data-skin-template="razer_chroma"] .card,
body.light-mode[data-skin-template="razer_chroma"] .card,
[data-bs-theme="light"] [data-skin-template="razer_chroma"] .card {
	background: #ffffff !important;
	border-color: #00ff00 !important;
	box-shadow: 0 4px 18px rgba(0,255,0,0.15) !important;
}

[data-bs-theme="light"][data-skin-template="razer_chroma"] #player,
body.light-mode[data-skin-template="razer_chroma"] #player,
[data-bs-theme="light"] [data-skin-template="razer_chroma"] #player {
	background: #f0fdf4 !important;
	border-color: #00ff00 !important;
}

/* --- Login Screen for razer_chroma --- */
[data-skin-template="razer_chroma"] body.text-center {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #050505 !important;
	color: #f0fdf4 !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-signin {
	background: #0c0c0c !important;
	border: 1px solid rgba(0,255,0,0.3) !important;
	border-radius: 10px !important;
	box-shadow: 0 0 25px rgba(0,255,0,0.25) !important;
	animation: chromaBorderCycle 12s linear infinite;
}

[data-skin-template="razer_chroma"] body.text-center .form-signin h1 {
	font-family: 'Chakra Petch', sans-serif !important;
	color: #f0fdf4 !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #00ff00) !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f0fdf4 !important;
	border-radius: 10px !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-floating > .form-control:focus {
	border-color: #00ff00 !important;
	box-shadow: 0 0 14px #00ff00 !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-signin .btn-primary {
	background: #00ff00 !important;
	border: none !important;
	color: #000000 !important;
	border-radius: 6px !important;
	box-shadow: 0 0 18px rgba(0,255,0,0.5) !important;
}

[data-skin-template="razer_chroma"] body.text-center .form-signin .btn-primary:hover {
	transform: translateY(-1px); box-shadow: 0 0 25px rgba(0,255,0,0.8);
}

/* --------------------------------------------------------------------------
   Skin 40: steam_deck (Valve Steam Deck)
   -------------------------------------------------------------------------- */
[data-skin-template="steam_deck"] body {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #0e141b !important;
	color: #c6d4df !important;
}

[data-skin-template="steam_deck"] #header {
	background: #141d27 !important;
	border-bottom: 1px solid rgba(102,192,244,0.3) !important;
}

[data-skin-template="steam_deck"] #leftPanel,
[data-skin-template="steam_deck"] .sidebar {
	background: #101821 !important;
	border-right: 1px solid rgba(102,192,244,0.2) !important;
}

[data-skin-template="steam_deck"] .nav-link.active,
[data-skin-template="steam_deck"] .sidebar .nav-link.active {
	background: #66c0f4 !important;
	color: #000000 !important;
	border: 1px solid #38bdf8 !important;
	box-shadow: 0 0 18px rgba(102,192,244,0.6) !important;
}

[data-skin-template="steam_deck"] .card {
	background: #1a2430 !important;
	border: 1px solid rgba(102,192,244,0.25) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

[data-skin-template="steam_deck"] #player {
	background: #131b24 !important;
	border: 1px solid rgba(102,192,244,0.3) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
	border-top: 3px solid #ff7b00 !important;
}

[data-skin-template="steam_deck"] #cover img {
	border: 2px solid #66c0f4 !important;
	border-radius: 12px !important;
	box-shadow: 0 0 20px rgba(102,192,244,0.4) !important;
}

[data-skin-template="steam_deck"] #pause {
	background: #66c0f4 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 20px rgba(102,192,244,0.65) !important;
	border-radius: 50% !important;
}

[data-skin-template="steam_deck"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 28px rgba(102,192,244,0.9);
}

[data-skin-template="steam_deck"] #timeline {
	background: #090d12 !important;
	border-radius: 50px !important;
	border: 1px solid rgba(102,192,244,0.2) !important;
}

[data-skin-template="steam_deck"] #slider {
	background: #66c0f4 !important;
	border-radius: 50px !important;
	box-shadow: 0 0 12px #66c0f4 !important;
}

[data-skin-template="steam_deck"] .btn-primary {
	background: #1b2838 !important;
	border: 1px solid #66c0f4 !important;
	color: #66c0f4 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(102,192,244,0.3) !important;
}

[data-skin-template="steam_deck"] .btn-primary:hover {
	background: #66c0f4 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="steam_deck"] .card,
body.light-mode[data-skin-template="steam_deck"] .card,
[data-bs-theme="light"] [data-skin-template="steam_deck"] .card {
	background: #f0f9ff !important;
	border-color: #bae6fd !important;
	box-shadow: 0 4px 16px rgba(102,192,244,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="steam_deck"] #player,
body.light-mode[data-skin-template="steam_deck"] #player,
[data-bs-theme="light"] [data-skin-template="steam_deck"] #player {
	background: #e0f2fe !important;
	border-color: #bae6fd !important;
}

/* --- Login Screen for steam_deck --- */
[data-skin-template="steam_deck"] body.text-center {
	font-family: 'Chakra Petch', sans-serif !important;
	background: #0e141b !important;
	color: #c6d4df !important;
}

[data-skin-template="steam_deck"] body.text-center .form-signin {
	background: #1a2430 !important;
	border: 1px solid rgba(102,192,244,0.25) !important;
	border-radius: 14px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

[data-skin-template="steam_deck"] body.text-center .form-signin h1 {
	font-family: 'Chakra Petch', sans-serif !important;
	color: #c6d4df !important;
}

[data-skin-template="steam_deck"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #66c0f4) !important;
}

[data-skin-template="steam_deck"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #c6d4df !important;
	border-radius: 14px !important;
}

[data-skin-template="steam_deck"] body.text-center .form-floating > .form-control:focus {
	border-color: #66c0f4 !important;
	box-shadow: 0 0 14px #66c0f4 !important;
}

[data-skin-template="steam_deck"] body.text-center .form-signin .btn-primary {
	background: #1b2838 !important;
	border: 1px solid #66c0f4 !important;
	color: #66c0f4 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 14px rgba(102,192,244,0.3) !important;
}

[data-skin-template="steam_deck"] body.text-center .form-signin .btn-primary:hover {
	background: #66c0f4 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 41: redbull_racing (Red Bull Racing F1)
   -------------------------------------------------------------------------- */
[data-skin-template="redbull_racing"] body {
	font-family: 'Russo One', sans-serif !important;
	background: #050a14 !important;
	color: #ffffff !important;
}

[data-skin-template="redbull_racing"] #header {
	background: #0a1224 !important;
	border-bottom: 2px solid #eab308 !important;
}

[data-skin-template="redbull_racing"] #leftPanel,
[data-skin-template="redbull_racing"] .sidebar {
	background: #080e1c !important;
	border-right: 1px solid #1d4ed8 !important;
}

[data-skin-template="redbull_racing"] .nav-link.active,
[data-skin-template="redbull_racing"] .sidebar .nav-link.active {
	background: #eab308 !important;
	color: #000000 !important;
	border: 1px solid #fde047 !important;
	box-shadow: 0 0 18px rgba(234,179,8,0.7) !important;
}

[data-skin-template="redbull_racing"] .card {
	background: #0b1424 !important;
	border: 1px solid #1d4ed8 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.7) !important;
	border-top: 3px solid #eab308 !important;
}

[data-skin-template="redbull_racing"] #player {
	background: #080f1c !important;
	border: 1px solid #eab308 !important;
	border-radius: 6px !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.8) !important;
	border-left: 3px solid #dc2626 !important;
}

[data-skin-template="redbull_racing"] #cover img {
	border: 2px solid #eab308 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(234,179,8,0.5) !important;
}

[data-skin-template="redbull_racing"] #pause {
	background: #eab308 !important;
	border: none !important;
	color: #000000 !important;
	box-shadow: 0 0 22px rgba(234,179,8,0.8) !important;
	border-radius: 50% !important;
}

[data-skin-template="redbull_racing"] #pause:hover {
	transform: scale(1.1); box-shadow: 0 0 30px rgba(234,179,8,1);
}

[data-skin-template="redbull_racing"] #timeline {
	background: #03060c !important;
	border-radius: 3px !important;
	border: 1px solid #1d4ed8 !important;
}

[data-skin-template="redbull_racing"] #slider {
	background: linear-gradient(90deg, #22c55e, #eab308, #ef4444) !important;
	border-radius: 3px !important;
	box-shadow: 0 0 12px #eab308 !important;
}

[data-skin-template="redbull_racing"] .btn-primary {
	background: #1d4ed8 !important;
	border: 1px solid #eab308 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(29,78,216,0.4) !important;
}

[data-skin-template="redbull_racing"] .btn-primary:hover {
	background: #eab308 !important; color: #000000 !important;
}

[data-bs-theme="light"][data-skin-template="redbull_racing"] .card,
body.light-mode[data-skin-template="redbull_racing"] .card,
[data-bs-theme="light"] [data-skin-template="redbull_racing"] .card {
	background: #f8fafc !important;
	border-color: #93c5fd !important;
	box-shadow: 0 4px 16px rgba(29,78,216,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="redbull_racing"] #player,
body.light-mode[data-skin-template="redbull_racing"] #player,
[data-bs-theme="light"] [data-skin-template="redbull_racing"] #player {
	background: #eff6ff !important;
	border-color: #93c5fd !important;
}

/* --- Login Screen for redbull_racing --- */
[data-skin-template="redbull_racing"] body.text-center {
	font-family: 'Russo One', sans-serif !important;
	background: #050a14 !important;
	color: #ffffff !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-signin {
	background: #0b1424 !important;
	border: 1px solid #1d4ed8 !important;
	border-radius: 6px !important;
	box-shadow: 0 6px 25px rgba(0,0,0,0.7) !important;
	border-top: 3px solid #eab308 !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-signin h1 {
	font-family: 'Russo One', sans-serif !important;
	color: #ffffff !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #eab308) !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border-radius: 6px !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-floating > .form-control:focus {
	border-color: #eab308 !important;
	box-shadow: 0 0 14px #eab308 !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-signin .btn-primary {
	background: #1d4ed8 !important;
	border: 1px solid #eab308 !important;
	color: #ffffff !important;
	border-radius: 4px !important;
	box-shadow: 0 0 14px rgba(29,78,216,0.4) !important;
}

[data-skin-template="redbull_racing"] body.text-center .form-signin .btn-primary:hover {
	background: #eab308 !important; color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Skin 42: apple_cupertino (Apple Cupertino Glass)
   -------------------------------------------------------------------------- */
[data-skin-template="apple_cupertino"] body {
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
	background: #0a0e1a !important;
	color: #f8fafc !important;
	background-attachment: fixed !important;
}

[data-skin-template="apple_cupertino"] #header {
	background: rgba(255, 255, 255, 0.06) !important;
	border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

[data-skin-template="apple_cupertino"] #leftPanel,
[data-skin-template="apple_cupertino"] .sidebar {
	background: rgba(255, 255, 255, 0.05) !important;
	border-right: 1px solid rgba(255,255,255,0.1) !important;
}

[data-skin-template="apple_cupertino"] .nav-link.active,
[data-skin-template="apple_cupertino"] .sidebar .nav-link.active {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
}

[data-skin-template="apple_cupertino"] .card {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 22px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	backdrop-filter: blur(40px) saturate(210%) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important;
}

[data-skin-template="apple_cupertino"] #player {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 22px !important;
	box-shadow: 0 12px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	backdrop-filter: blur(40px) saturate(210%) !important;
}

[data-skin-template="apple_cupertino"] #cover img {
	border: 1px solid rgba(255,255,255,0.2) !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

[data-skin-template="apple_cupertino"] #pause {
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 25px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4) !important;
	border-radius: 50% !important;
	backdrop-filter: blur(20px) !important;
}

[data-skin-template="apple_cupertino"] #pause:hover {
	transform: scale(1.08); background: rgba(255,255,255,0.3) !important;
}

[data-skin-template="apple_cupertino"] #timeline {
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 50px !important;
	border: none !important;
}

[data-skin-template="apple_cupertino"] #slider {
	background: rgba(255, 255, 255, 0.85) !important;
	border-radius: 50px !important;
	box-shadow: 0 0 12px rgba(255,255,255,0.5) !important;
}

[data-skin-template="apple_cupertino"] .btn-primary {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

[data-skin-template="apple_cupertino"] .btn-primary:hover {
	background: rgba(255,255,255,0.25) !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="apple_cupertino"] .card,
body.light-mode[data-skin-template="apple_cupertino"] .card,
[data-bs-theme="light"] [data-skin-template="apple_cupertino"] .card {
	background: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(0,0,0,0.08) !important;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
}

[data-bs-theme="light"][data-skin-template="apple_cupertino"] #player,
body.light-mode[data-skin-template="apple_cupertino"] #player,
[data-bs-theme="light"] [data-skin-template="apple_cupertino"] #player {
	background: rgba(255, 255, 255, 0.9) !important;
	border-color: rgba(0,0,0,0.08) !important;
}

/* --- Login Screen for apple_cupertino --- */
[data-skin-template="apple_cupertino"] body.text-center {
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
	background: #0a0e1a !important;
	color: #f8fafc !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-signin {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 22px !important;
	box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	backdrop-filter: blur(40px) saturate(210%) !important; -webkit-backdrop-filter: blur(40px) saturate(210%) !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-signin h1 {
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif !important;
	color: #f8fafc !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px rgba(255,255,255,0.25)) !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #f8fafc !important;
	border-radius: 22px !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-floating > .form-control:focus {
	border-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: 0 0 14px rgba(255, 255, 255, 0.2) !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-signin .btn-primary {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	color: #ffffff !important;
	border-radius: 50px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

[data-skin-template="apple_cupertino"] body.text-center .form-signin .btn-primary:hover {
	background: rgba(255,255,255,0.25) !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Skin 43: twitch_streamer (Twitch Streamer)
   -------------------------------------------------------------------------- */
[data-skin-template="twitch_streamer"] body {
	font-family: 'Inter', sans-serif !important;
	background: #0e0e10 !important;
	color: #efeff1 !important;
}

[data-skin-template="twitch_streamer"] #header {
	background: #18181b !important;
	border-bottom: 1px solid rgba(145,70,255,0.3) !important;
}

[data-skin-template="twitch_streamer"] #leftPanel,
[data-skin-template="twitch_streamer"] .sidebar {
	background: #121214 !important;
	border-right: 1px solid rgba(145,70,255,0.2) !important;
}

[data-skin-template="twitch_streamer"] .nav-link.active,
[data-skin-template="twitch_streamer"] .sidebar .nav-link.active {
	background: #9146ff !important;
	color: #ffffff !important;
	border: 1px solid #a970ff !important;
	box-shadow: 0 4px 16px rgba(145,70,255,0.45) !important;
}

[data-skin-template="twitch_streamer"] .card {
	background: #18181b !important;
	border: 1px solid rgba(145,70,255,0.25) !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 20px rgba(145,70,255,0.2) !important;
	border-top: 3px solid #9146ff !important;
}

[data-skin-template="twitch_streamer"] #player {
	background: #131315 !important;
	border: 1px solid #9146ff !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 25px rgba(145,70,255,0.25) !important;
}

[data-skin-template="twitch_streamer"] #cover img {
	border: 2px solid #9146ff !important;
	border-radius: 50% !important;
	box-shadow: 0 0 20px rgba(145,70,255,0.45) !important;
}

[data-skin-template="twitch_streamer"] #pause {
	background: #9146ff !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 0 22px rgba(145,70,255,0.7) !important;
	border-radius: 50% !important;
}

[data-skin-template="twitch_streamer"] #pause:hover {
	transform: scale(1.08); box-shadow: 0 0 30px rgba(145,70,255,0.95);
}

[data-skin-template="twitch_streamer"] #timeline {
	background: #0a0a0c !important;
	border-radius: 4px !important;
	border: 1px solid rgba(145,70,255,0.25) !important;
}

[data-skin-template="twitch_streamer"] #slider {
	background: linear-gradient(90deg, #9146ff, #bf94ff) !important;
	border-radius: 4px !important;
	box-shadow: 0 0 12px #9146ff !important;
}

[data-skin-template="twitch_streamer"] .btn-primary {
	background: #9146ff !important;
	border: 1px solid #772ce8 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(145,70,255,0.35) !important;
}

[data-skin-template="twitch_streamer"] .btn-primary:hover {
	background: #772ce8 !important; transform: translateY(-1px);
}

[data-bs-theme="light"][data-skin-template="twitch_streamer"] .card,
body.light-mode[data-skin-template="twitch_streamer"] .card,
[data-bs-theme="light"] [data-skin-template="twitch_streamer"] .card {
	background: #faf5ff !important;
	border-color: #d8b4fe !important;
	box-shadow: 0 4px 16px rgba(145,70,255,0.12) !important;
}

[data-bs-theme="light"][data-skin-template="twitch_streamer"] #player,
body.light-mode[data-skin-template="twitch_streamer"] #player,
[data-bs-theme="light"] [data-skin-template="twitch_streamer"] #player {
	background: #f3e8ff !important;
	border-color: #d8b4fe !important;
}

/* --- Login Screen for twitch_streamer --- */
[data-skin-template="twitch_streamer"] body.text-center {
	font-family: 'Inter', sans-serif !important;
	background: #0e0e10 !important;
	color: #efeff1 !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-signin {
	background: #18181b !important;
	border: 1px solid rgba(145,70,255,0.25) !important;
	border-radius: 8px !important;
	box-shadow: 0 6px 20px rgba(145,70,255,0.2) !important;
	border-top: 3px solid #9146ff !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-signin h1 {
	font-family: 'Inter', sans-serif !important;
	color: #efeff1 !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-signin img {
	filter: drop-shadow(0 0 14px #9146ff) !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-floating > .form-control {
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #efeff1 !important;
	border-radius: 8px !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-floating > .form-control:focus {
	border-color: #9146ff !important;
	box-shadow: 0 0 14px #9146ff !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-signin .btn-primary {
	background: #9146ff !important;
	border: 1px solid #772ce8 !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	box-shadow: 0 0 14px rgba(145,70,255,0.35) !important;
}

[data-skin-template="twitch_streamer"] body.text-center .form-signin .btn-primary:hover {
	background: #772ce8 !important; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Light mode guard for every skin
   Each skin's chassis block above hardcodes its dark palette on body,
   #header, #leftPanel and #timeline, and only adapts .card/#player for
   light mode - so with the Dark Mode switch off the chrome stayed near-black
   while the text inside it flipped to the light theme's dark tokens,
   leaving the whole sidebar and header unreadable. Route the chrome back
   through the skin's own light tokens (Section 13) instead. The extra
   :root[data-skin-template] out-specifies the per-skin rules regardless of
   order. The login page (body.text-center) is a self-contained dark card
   and is left alone.
   -------------------------------------------------------------------------- */
:root[data-bs-theme="light"][data-skin-template] body:not(.text-center) {
	background: var(--surface-bg-sidebar) !important;
	color: var(--text-main) !important;
	text-shadow: none !important;
}
:root[data-bs-theme="light"][data-skin-template] #header {
	background: var(--surface-bg-sidebar) !important;
	border-bottom: 1px solid var(--surface-border) !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
:root[data-bs-theme="light"][data-skin-template] #leftPanel,
:root[data-bs-theme="light"][data-skin-template] .sidebar,
:root[data-bs-theme="light"][data-skin-template] #rightPanel {
	background: var(--surface-bg-sidebar) !important;
	border-color: var(--surface-border) !important;
}
:root[data-bs-theme="light"][data-skin-template] #timeline {
	background: rgba(15, 23, 42, 0.1) !important;
}

/* Light mode legibility: the light surfaces are deliberately mid-tone
   (#a1b2ce-#cbd4e2), so --text-dimmed and the dark theme's pastel accents
   measured 1.3-2.8:1 on them - section labels, promo subtitles, empty-state
   hints, the footer and the green "update available" nav item were barely
   visible. Step each one up to a tone that clears ~4.5:1. */
[data-bs-theme="light"] .menutitle-right,
[data-bs-theme="light"] #leftPanel .sidebar-promo-subtitle,
[data-bs-theme="light"] .empty-state-card .empty-subtitle,
[data-bs-theme="light"] #footer,
[data-bs-theme="light"] #footer p {
	color: var(--text-muted) !important;
}
[data-bs-theme="light"] #footer a {
	color: var(--text-main) !important;
	font-weight: 600;
}
[data-bs-theme="light"] #leftPanel .nav-link:not(.active) .updateAvailable {
	color: #065f46 !important;
	font-weight: 600;
}
[data-bs-theme="light"] .feedbackBox .bugReportButton {
	color: #7f1d1d !important;
}
[data-bs-theme="light"] .feedbackBox .featureRequestButton {
	color: #78350f !important;
}


/* >>> SKIN SIGNATURE LAYER >>> */
/* ==========================================================================
   SKIN SIGNATURE LAYER
   Sits on top of each skin's chassis block and gives every skin its own
   atmosphere and motion, driven by per-skin custom properties:
     --sk-a1 / --sk-a2   accent pair (motif tint, header line, rings)
     --sk-display        display face for titles; body text stays legible
     --sk-deco           static colour layers behind the middle column
                         (glows, rings, skylines) - #content::before
     --sk-motif          tiling pattern as an alpha MASK over the accent
                         gradient, so one SVG serves dark and light mode -
                         #content::after, optionally drifting by one tile
   The pause ring, player overlay and active-nav effect are picked per
   skin from a small vocabulary (see "Signature effect vocabulary").
   Their motion only runs while a track is actually playing (the cover-art
   overlay's .is-playing flag); the slow ambient drift always runs, and
   all of it stops under prefers-reduced-motion.
   Generated by scripts/build-skin-signatures.py - edit that, not this.
   ========================================================================== */

@property --sk-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes sk-drift {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--sk-dx, 0px), var(--sk-dy, 0px), 0); }
}
@keyframes sk-breathe {
	0%, 100% { opacity: var(--sk-deco-o, 1); }
	50% { opacity: calc(var(--sk-deco-o, 1) * 0.62); }
}
@keyframes sk-flicker {
	0%, 100% { opacity: var(--sk-deco-o, 1); }
	8% { opacity: calc(var(--sk-deco-o, 1) * 0.7); }
	9% { opacity: var(--sk-deco-o, 1); }
	46% { opacity: var(--sk-deco-o, 1); }
	47% { opacity: calc(var(--sk-deco-o, 1) * 0.55); }
	49% { opacity: calc(var(--sk-deco-o, 1) * 1.15); }
	51% { opacity: var(--sk-deco-o, 1); }
}
@keyframes sk-lightning {
	0%, 91%, 100% { opacity: var(--sk-deco-o, 1); }
	92% { opacity: calc(var(--sk-deco-o, 1) * 1.9); }
	93% { opacity: calc(var(--sk-deco-o, 1) * 0.8); }
	95% { opacity: calc(var(--sk-deco-o, 1) * 1.6); }
	97% { opacity: var(--sk-deco-o, 1); }
}
@keyframes sk-hue {
	to { filter: hue-rotate(360deg); }
}
@keyframes sk-line {
	from { background-position: 0% 0; }
	to { background-position: -200% 0; }
}
@keyframes sk-sheen {
	0%, 62% { transform: translateX(-160%) skewX(-18deg); }
	100% { transform: translateX(360%) skewX(-18deg); }
}
@keyframes sk-sweep {
	0%, 55% { background-position: -150% 0; }
	100% { background-position: 250% 0; }
}
@keyframes sk-scan {
	from { background-position: 0 -80px, 0 0; }
	to { background-position: 0 calc(100% + 80px), 0 0; }
}
@keyframes sk-spin {
	to { transform: rotate(360deg); }
}
@keyframes sk-angle {
	to { --sk-angle: 360deg; }
}
@keyframes sk-ping {
	0% { transform: scale(0.92); opacity: 0.9; }
	80%, 100% { transform: scale(1.55); opacity: 0; }
}
@keyframes sk-halo {
	0%, 100% { transform: scale(0.96); opacity: 0.55; }
	50% { transform: scale(1.14); opacity: 1; }
}
@keyframes sk-blink {
	0%, 100% { opacity: 1; }
	6% { opacity: 0.25; }
	8% { opacity: 1; }
	52% { opacity: 1; }
	54% { opacity: 0.4; }
	55% { opacity: 1; }
}
@keyframes sk-corners {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}
@keyframes sk-glitch {
	0%, 88%, 100% { text-shadow: none; transform: none; }
	89% { text-shadow: -2px 0 var(--sk-a2), 2px 0 var(--sk-a1); transform: translateX(1px); }
	91% { text-shadow: 2px 0 var(--sk-a2), -2px 0 var(--sk-a1); transform: translateX(-1px); }
	93% { text-shadow: none; transform: none; }
}

/* 1. Legacy palette bridge. v2/style.css paints #content, zebra rows,
   tables and modals in dark mode through its own --color-bg-* tokens with
   [data-theme="dark"] !important rules that out-rank the skin tokens, so
   the whole middle column stayed Modern-Slate grey on every skin. Point
   those legacy tokens at the active skin's surfaces instead. */
body[data-theme="dark"][data-skin-template] {
	--color-bg-darker: var(--surface-bg-darker);
	--color-bg-dark: var(--surface-bg-darker);
	--color-bg-card: var(--surface-bg-dark);
	--color-bg-panel: var(--surface-bg-dark);
	--color-bg-sidebar: var(--surface-bg-sidebar);
	--color-bg-hover: var(--surface-bg-card);
	--color-bg-light: var(--surface-bg-card);
	--color-bg-active: color-mix(in srgb, var(--brand-primary) 22%, var(--surface-bg-card));
	--color-primary: var(--brand-primary);
	--color-primary-hover: var(--brand-primary-hover);
	--color-text-primary: var(--text-main);
	--color-text-muted: var(--text-muted);
}
body[data-theme="dark"][data-skin-template] #content {
	background: var(--surface-bg-dark) !important;
	border-left-color: var(--surface-border) !important;
	border-right-color: var(--surface-border) !important;
}

/* 2. Atmosphere behind the middle column. Both layers sit at z-index 0
   inside #content, under OverlayScrollbars' .os-padding (z-index 1), so
   they never scroll and never catch clicks. */
body[data-skin-template] #content {
	overflow: hidden !important;
}
body[data-skin-template] #content::before,
body[data-skin-template] #content::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
body[data-skin-template] #content::before {
	inset: 0;
	background: var(--sk-deco, none);
	opacity: var(--sk-deco-o, 1);
	animation: var(--sk-deco-anim, none);
}
body[data-skin-template] #content::after {
	inset: calc(var(--sk-tile, 0px) * -1);
	background: var(--sk-ink, linear-gradient(135deg, var(--sk-a1), var(--sk-a2)));
	-webkit-mask: var(--sk-motif, none);
	mask: var(--sk-motif, none);
	opacity: var(--sk-motif-o, 0);
	animation: sk-drift var(--sk-drift, 0s) linear infinite;
	will-change: transform;
}

/* Content surfaces let the atmosphere glow through. */
body[data-skin-template] #content .alert-primary,
body[data-skin-template] #content .alert-info,
body[data-skin-template] #content .enhanced-empty-state {
	background: color-mix(in srgb, var(--surface-bg-card) 72%, transparent) !important;
	border: 1px solid var(--surface-border) !important;
	-webkit-backdrop-filter: blur(6px) saturate(130%);
	backdrop-filter: blur(6px) saturate(130%);
	box-shadow: var(--skin-shadow-card, none), inset 0 1px 0 color-mix(in srgb, var(--sk-a1) 22%, transparent) !important;
}
body[data-skin-template] #content .enhanced-empty-state .bi,
body[data-skin-template] #content .empty-state-card .empty-icon {
	color: var(--sk-a1) !important;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sk-a1) 45%, transparent));
}
body[data-skin-template] #content .empty-state-card h4,
body[data-skin-template] #content .empty-state-card .empty-title {
	font-family: var(--sk-display) !important;
}
body[data-skin-template] #content .card {
	background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-a1) 7%, transparent), transparent 160px) !important;
}

/* 3. Header: display face on the product title and a flowing accent line
   along the bottom edge. */
body[data-skin-template] #header #title h1 {
	font-family: var(--sk-display) !important;
	letter-spacing: var(--sk-display-track, -0.2px) !important;
}
body[data-skin-template] #header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, var(--sk-a1) 18%, var(--sk-a2) 50%, var(--sk-a1) 82%, transparent 100%);
	background-size: 200% 100%;
	opacity: 0.8;
	animation: sk-line 14s linear infinite;
}

/* 4. Sidebar navigation: tinted hover with an accent rail, and a
   signature effect on the active entry. */
body[data-skin-template] #leftPanel .nav-link {
	position: relative;
	overflow: hidden;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}
body[data-skin-template] #leftPanel .nav-link:not(.active):hover {
	background: color-mix(in srgb, var(--sk-a1) 12%, transparent) !important;
	box-shadow: inset 3px 0 0 var(--sk-a1) !important;
}
body[data-skin-template] #leftPanel .nav-link:not(.active):hover > .bi {
	color: var(--sk-a1) !important;
	transform: translateX(2px);
}
body[data-skin-template] #leftPanel .nav-link > .bi {
	display: inline-block;
	transition: transform 0.2s ease, color 0.2s ease;
}
body[data-skin-template] #leftPanel .nav-link.active::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: translateX(-160%) skewX(-18deg);
	animation: sk-sheen 7s ease-in-out infinite;
}

/* 5. Player deck: signature overlay over the whole deck. */
body[data-skin-template] #player {
	position: relative;
}
body[data-skin-template] #player::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	pointer-events: none;
	animation-play-state: paused !important;
}
body[data-skin-template] #player:has(#coverArtOverlay.is-playing)::after,
body[data-skin-template] #player:not(:has(#coverArtOverlay))::after {
	animation-play-state: running !important;
}

/* 6. Play/pause: a hollow signature ring outside the button. It rests as
   a faint static ring and comes alive while a track plays. */
body[data-skin-template] #rightPanel #player #controls > #pause {
	position: relative !important;
	inset: auto !important;
	isolation: isolate;
}
body[data-skin-template] #pause::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.35;
	animation-play-state: paused !important;
}
body[data-skin-template] #player:has(#coverArtOverlay.is-playing) #pause::before,
body[data-skin-template] #player:not(:has(#coverArtOverlay)) #pause::before {
	opacity: 1;
	animation-play-state: running !important;
}

/* 7. Form controls, selection, scrollbars, dropdowns and modals follow
   the skin accent. */
body[data-skin-template] .form-control:focus,
body[data-skin-template] .form-select:focus {
	border-color: var(--sk-a1) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-a1) 26%, transparent) !important;
}
body[data-skin-template] .form-control::placeholder {
	color: color-mix(in srgb, var(--text-muted) 85%, transparent) !important;
}
body[data-skin-template] .form-check-input:checked {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
body[data-skin-template] ::selection {
	background: color-mix(in srgb, var(--sk-a1) 38%, transparent);
	color: inherit;
}
html[data-skin-template] {
	scrollbar-color: color-mix(in srgb, var(--sk-a1) 45%, transparent) transparent;
}
body[data-skin-template] .os-scrollbar .os-scrollbar-handle {
	background: color-mix(in srgb, var(--sk-a1) 40%, transparent) !important;
}
body[data-skin-template] .os-scrollbar .os-scrollbar-handle:hover,
body[data-skin-template] .os-scrollbar .os-scrollbar-handle.active {
	background: color-mix(in srgb, var(--sk-a1) 70%, transparent) !important;
}
body[data-skin-template] .dropdown-menu {
	background: var(--surface-bg-card) !important;
	border: 1px solid var(--surface-border) !important;
	box-shadow: var(--skin-shadow-card, 0 12px 30px rgba(0, 0, 0, 0.35)) !important;
}
body[data-skin-template] .dropdown-item:hover,
body[data-skin-template] .dropdown-item:focus {
	background: color-mix(in srgb, var(--sk-a1) 14%, transparent) !important;
	color: var(--text-main) !important;
}
body[data-skin-template] .dropdown-item.active,
body[data-skin-template] .dropdown-item:active {
	background: var(--brand-primary) !important;
}
body[data-skin-template] .modal-content {
	border: 1px solid var(--surface-border);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--sk-a1) 12%, transparent);
}
body[data-skin-template] .modal-header {
	border-bottom-color: var(--surface-border) !important;
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--sk-a1) 10%, transparent), transparent 65%);
}
body[data-skin-template] .modal-title {
	font-family: var(--sk-display);
}
body[data-skin-template] .tooltip-inner {
	background: var(--surface-bg-card);
	color: var(--text-main);
	border: 1px solid var(--surface-border);
}

/* 8. Track title in the deck uses the display face. */
body[data-skin-template] #player .nowPlaying .text,
body[data-skin-template] #player .ttitle {
	font-family: var(--sk-display) !important;
}

/* 9. Login page: same atmosphere, fixed behind the sign-in card. */
body.text-center[data-skin-template]::before,
body.text-center[data-skin-template]::after {
	content: "";
	position: fixed;
	pointer-events: none;
	z-index: 0;
}
body.text-center[data-skin-template]::before {
	inset: 0;
	background: var(--sk-deco, none);
	opacity: var(--sk-deco-o, 1);
}
body.text-center[data-skin-template]::after {
	inset: calc(var(--sk-tile, 0px) * -1);
	background: var(--sk-ink, linear-gradient(135deg, var(--sk-a1), var(--sk-a2)));
	-webkit-mask: var(--sk-motif, none);
	mask: var(--sk-motif, none);
	opacity: var(--sk-motif-o, 0);
	animation: sk-drift var(--sk-drift, 0s) linear infinite;
}
body.text-center[data-skin-template] > * {
	position: relative;
	z-index: 1;
}

/* ---- Signature effect vocabulary --------------------------------------- */

/* Pause rings */
body[data-skin-template="default"] #pause::before,
body[data-skin-template="studio_pro"] #pause::before,
body[data-skin-template="deep_abyss"] #pause::before,
body[data-skin-template="eva_unit01"] #pause::before,
body[data-skin-template="spotify_emerald"] #pause::before,
body[data-skin-template="discord_blurple"] #pause::before,
body[data-skin-template="attack_on_titan"] #pause::before,
body[data-skin-template="batman_gotham"] #pause::before,
body[data-skin-template="steam_deck"] #pause::before,
body[data-skin-template="redbull_racing"] #pause::before,
body[data-skin-template="twitch_streamer"] #pause::before {
	border: 2px solid var(--sk-a1);
	animation: sk-ping 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
body[data-skin-template="neon_cyber"] #pause::before,
body[data-skin-template="solar_gold"] #pause::before,
body[data-skin-template="synthwave_sunset"] #pause::before,
body[data-skin-template="tokyo_drift"] #pause::before,
body[data-skin-template="cyberpunk_2077"] #pause::before,
body[data-skin-template="elden_ring"] #pause::before,
body[data-skin-template="arcane_hextech"] #pause::before,
body[data-skin-template="portal_aperture"] #pause::before,
body[data-skin-template="jujutsu_kaisen"] #pause::before,
body[data-skin-template="tron_legacy"] #pause::before,
body[data-skin-template="razer_chroma"] #pause::before,
body[data-skin-template="akatsuki_blood"] #pause::before {
	inset: -5px;
	background: conic-gradient(from 0deg, var(--sk-a1), transparent 30%, var(--sk-a2) 50%, transparent 80%, var(--sk-a1));
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	animation: sk-spin 3.2s linear infinite;
}
body[data-skin-template="razer_chroma"] #pause::before {
	background: conic-gradient(#ff0040, #ffb300, #39ff14, #00e5ff, #7c3aed, #ff0040);
	animation: sk-spin 2.4s linear infinite;
}
body[data-skin-template="akatsuki_blood"] #pause::before {
	inset: -7px;
	background: repeating-conic-gradient(from 0deg, var(--sk-a1) 0 22deg, transparent 22deg 120deg);
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
	mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
	animation: sk-spin 1.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
body[data-skin-template="nordic_frost"] #pause::before,
body[data-skin-template="aero_glass"] #pause::before,
body[data-skin-template="crimson_valkyrie"] #pause::before,
body[data-skin-template="carbon_stealth"] #pause::before,
body[data-skin-template="amethyst_haze"] #pause::before,
body[data-skin-template="copper_forge"] #pause::before,
body[data-skin-template="cherry_blossom"] #pause::before,
body[data-skin-template="blade_runner"] #pause::before,
body[data-skin-template="demon_slayer"] #pause::before,
body[data-skin-template="witcher_medallion"] #pause::before,
body[data-skin-template="dragonball_saiyan"] #pause::before,
body[data-skin-template="dune_arrakis"] #pause::before,
body[data-skin-template="star_wars_mandalorian"] #pause::before,
body[data-skin-template="apple_cupertino"] #pause::before {
	inset: -8px;
	background: radial-gradient(closest-side, transparent 68%, color-mix(in srgb, var(--sk-a1) 55%, transparent) 78%, transparent 100%);
	animation: sk-halo 3.4s ease-in-out infinite;
}
body[data-skin-template="stranger_synth"] #pause::before,
body[data-skin-template="fallout_pipboy"] #pause::before,
body[data-skin-template="matrix_resurrections"] #pause::before {
	border: 1.5px solid var(--sk-a1);
	box-shadow: 0 0 10px var(--sk-a1), inset 0 0 8px color-mix(in srgb, var(--sk-a1) 50%, transparent);
	animation: sk-blink 3.8s steps(1, end) infinite;
}
body[data-skin-template="emerald_matrix"] #pause::before,
body[data-skin-template="zelda_sheikah"] #pause::before,
body[data-skin-template="halo_unsc"] #pause::before {
	inset: -7px;
	background: conic-gradient(from 0deg, color-mix(in srgb, var(--sk-a1) 70%, transparent), transparent 25%);
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
	mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
	animation: sk-spin 2s linear infinite;
}

/* Player overlays */
body[data-skin-template="default"] #player::after,
body[data-skin-template="nordic_frost"] #player::after,
body[data-skin-template="aero_glass"] #player::after,
body[data-skin-template="studio_pro"] #player::after,
body[data-skin-template="crimson_valkyrie"] #player::after,
body[data-skin-template="solar_gold"] #player::after,
body[data-skin-template="carbon_stealth"] #player::after,
body[data-skin-template="amethyst_haze"] #player::after,
body[data-skin-template="deep_abyss"] #player::after,
body[data-skin-template="tokyo_drift"] #player::after,
body[data-skin-template="copper_forge"] #player::after,
body[data-skin-template="cherry_blossom"] #player::after,
body[data-skin-template="spotify_emerald"] #player::after,
body[data-skin-template="elden_ring"] #player::after,
body[data-skin-template="demon_slayer"] #player::after,
body[data-skin-template="discord_blurple"] #player::after,
body[data-skin-template="portal_aperture"] #player::after,
body[data-skin-template="witcher_medallion"] #player::after,
body[data-skin-template="akatsuki_blood"] #player::after,
body[data-skin-template="attack_on_titan"] #player::after,
body[data-skin-template="dune_arrakis"] #player::after,
body[data-skin-template="batman_gotham"] #player::after,
body[data-skin-template="star_wars_mandalorian"] #player::after,
body[data-skin-template="steam_deck"] #player::after,
body[data-skin-template="redbull_racing"] #player::after,
body[data-skin-template="apple_cupertino"] #player::after {
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.11) 50%, transparent 60%) no-repeat;
	background-size: 60% 100%;
	background-position: -150% 0;
	animation: sk-sweep 9s ease-in-out infinite;
}
body[data-skin-template="emerald_matrix"] #player::after,
body[data-skin-template="blade_runner"] #player::after,
body[data-skin-template="stranger_synth"] #player::after,
body[data-skin-template="fallout_pipboy"] #player::after,
body[data-skin-template="matrix_resurrections"] #player::after {
	background:
		linear-gradient(180deg, transparent, color-mix(in srgb, var(--sk-a1) 16%, transparent) 50%, transparent) no-repeat,
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
	background-size: 100% 80px, 100% 100%;
	animation: sk-scan 5s linear infinite;
}
body[data-skin-template="cyberpunk_2077"] #player::after,
body[data-skin-template="eva_unit01"] #player::after,
body[data-skin-template="zelda_sheikah"] #player::after,
body[data-skin-template="halo_unsc"] #player::after {
	inset: -4px;
	--c: var(--sk-a1);
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 18px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 0 / 2px 18px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 18px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 2px 18px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 18px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 2px 18px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 18px 2px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 2px 18px no-repeat;
	filter: drop-shadow(0 0 4px var(--sk-a1));
	animation: sk-corners 2.6s ease-in-out infinite;
}
body[data-skin-template="neon_cyber"] #player::after,
body[data-skin-template="synthwave_sunset"] #player::after,
body[data-skin-template="arcane_hextech"] #player::after,
body[data-skin-template="dragonball_saiyan"] #player::after,
body[data-skin-template="jujutsu_kaisen"] #player::after,
body[data-skin-template="tron_legacy"] #player::after,
body[data-skin-template="twitch_streamer"] #player::after,
body[data-skin-template="razer_chroma"] #player::after {
	inset: -1px;
	padding: 1.5px;
	background: conic-gradient(from var(--sk-angle), var(--sk-a1), transparent 25%, var(--sk-a2) 50%, transparent 75%, var(--sk-a1));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: sk-angle 6s linear infinite;
}
body[data-skin-template="razer_chroma"] #player::after {
	background: conic-gradient(from var(--sk-angle), #ff0040, #ffb300, #39ff14, #00e5ff, #7c3aed, #ff0040);
	animation: sk-angle 4s linear infinite;
}

/* Ambient deco animation modes */
body[data-skin-template="default"],
body[data-skin-template="nordic_frost"],
body[data-skin-template="aero_glass"],
body[data-skin-template="crimson_valkyrie"],
body[data-skin-template="solar_gold"],
body[data-skin-template="synthwave_sunset"],
body[data-skin-template="amethyst_haze"],
body[data-skin-template="deep_abyss"],
body[data-skin-template="cherry_blossom"],
body[data-skin-template="blade_runner"],
body[data-skin-template="spotify_emerald"],
body[data-skin-template="elden_ring"],
body[data-skin-template="demon_slayer"],
body[data-skin-template="arcane_hextech"],
body[data-skin-template="zelda_sheikah"],
body[data-skin-template="dragonball_saiyan"],
body[data-skin-template="jujutsu_kaisen"],
body[data-skin-template="tron_legacy"],
body[data-skin-template="dune_arrakis"],
body[data-skin-template="apple_cupertino"] {
	--sk-deco-anim: sk-breathe 9s ease-in-out infinite;
}
body[data-skin-template="copper_forge"],
body[data-skin-template="cyberpunk_2077"],
body[data-skin-template="fallout_pipboy"],
body[data-skin-template="witcher_medallion"] {
	--sk-deco-anim: sk-flicker 6s linear infinite;
}
body[data-skin-template="stranger_synth"],
body[data-skin-template="batman_gotham"] {
	--sk-deco-anim: sk-lightning 11s linear infinite;
}
body[data-skin-template="razer_chroma"] {
	--sk-deco-anim: sk-hue 18s linear infinite;
}

/* Active nav variants */
body[data-skin-template="cyberpunk_2077"] #leftPanel .nav-link.active > span,
body[data-skin-template="matrix_resurrections"] #leftPanel .nav-link.active > span {
	display: inline-block;
	animation: sk-glitch 5s steps(1, end) infinite;
}
body[data-skin-template="studio_pro"] #leftPanel .nav-link.active,
body[data-skin-template="emerald_matrix"] #leftPanel .nav-link.active,
body[data-skin-template="carbon_stealth"] #leftPanel .nav-link.active,
body[data-skin-template="eva_unit01"] #leftPanel .nav-link.active,
body[data-skin-template="portal_aperture"] #leftPanel .nav-link.active,
body[data-skin-template="fallout_pipboy"] #leftPanel .nav-link.active,
body[data-skin-template="halo_unsc"] #leftPanel .nav-link.active,
body[data-skin-template="attack_on_titan"] #leftPanel .nav-link.active,
body[data-skin-template="tron_legacy"] #leftPanel .nav-link.active,
body[data-skin-template="star_wars_mandalorian"] #leftPanel .nav-link.active {
	box-shadow: inset 3px 0 0 var(--sk-a2), 0 0 18px color-mix(in srgb, var(--sk-a1) 30%, transparent) !important;
}
body[data-skin-template="studio_pro"] #leftPanel .nav-link.active::after,
body[data-skin-template="emerald_matrix"] #leftPanel .nav-link.active::after,
body[data-skin-template="carbon_stealth"] #leftPanel .nav-link.active::after,
body[data-skin-template="eva_unit01"] #leftPanel .nav-link.active::after,
body[data-skin-template="portal_aperture"] #leftPanel .nav-link.active::after,
body[data-skin-template="fallout_pipboy"] #leftPanel .nav-link.active::after,
body[data-skin-template="halo_unsc"] #leftPanel .nav-link.active::after,
body[data-skin-template="attack_on_titan"] #leftPanel .nav-link.active::after,
body[data-skin-template="tron_legacy"] #leftPanel .nav-link.active::after,
body[data-skin-template="star_wars_mandalorian"] #leftPanel .nav-link.active::after {
	display: none;
}

/* Light mode: the atmosphere steps back so text keeps its contrast. */
[data-bs-theme="light"] body[data-skin-template] #content::before {
	opacity: calc(var(--sk-deco-o, 1) * 0.6);
}
[data-bs-theme="light"] body[data-skin-template] #content::after {
	opacity: calc(var(--sk-motif-o, 0) * 0.75);
}
[data-bs-theme="light"] body[data-skin-template] #header::after {
	opacity: 0.6;
}
[data-bs-theme="light"] body[data-skin-template] #player::after {
	mix-blend-mode: multiply;
}
[data-bs-theme="light"] body[data-skin-template="default"] #player::after,
[data-bs-theme="light"] body[data-skin-template="nordic_frost"] #player::after,
[data-bs-theme="light"] body[data-skin-template="aero_glass"] #player::after,
[data-bs-theme="light"] body[data-skin-template="studio_pro"] #player::after,
[data-bs-theme="light"] body[data-skin-template="crimson_valkyrie"] #player::after,
[data-bs-theme="light"] body[data-skin-template="solar_gold"] #player::after,
[data-bs-theme="light"] body[data-skin-template="carbon_stealth"] #player::after,
[data-bs-theme="light"] body[data-skin-template="amethyst_haze"] #player::after,
[data-bs-theme="light"] body[data-skin-template="deep_abyss"] #player::after,
[data-bs-theme="light"] body[data-skin-template="tokyo_drift"] #player::after,
[data-bs-theme="light"] body[data-skin-template="copper_forge"] #player::after,
[data-bs-theme="light"] body[data-skin-template="cherry_blossom"] #player::after,
[data-bs-theme="light"] body[data-skin-template="spotify_emerald"] #player::after,
[data-bs-theme="light"] body[data-skin-template="elden_ring"] #player::after,
[data-bs-theme="light"] body[data-skin-template="demon_slayer"] #player::after,
[data-bs-theme="light"] body[data-skin-template="discord_blurple"] #player::after,
[data-bs-theme="light"] body[data-skin-template="portal_aperture"] #player::after,
[data-bs-theme="light"] body[data-skin-template="witcher_medallion"] #player::after,
[data-bs-theme="light"] body[data-skin-template="akatsuki_blood"] #player::after,
[data-bs-theme="light"] body[data-skin-template="attack_on_titan"] #player::after,
[data-bs-theme="light"] body[data-skin-template="dune_arrakis"] #player::after,
[data-bs-theme="light"] body[data-skin-template="batman_gotham"] #player::after,
[data-bs-theme="light"] body[data-skin-template="star_wars_mandalorian"] #player::after,
[data-bs-theme="light"] body[data-skin-template="steam_deck"] #player::after,
[data-bs-theme="light"] body[data-skin-template="redbull_racing"] #player::after,
[data-bs-theme="light"] body[data-skin-template="apple_cupertino"] #player::after,
[data-bs-theme="light"] body[data-skin-template="emerald_matrix"] #player::after,
[data-bs-theme="light"] body[data-skin-template="blade_runner"] #player::after,
[data-bs-theme="light"] body[data-skin-template="stranger_synth"] #player::after,
[data-bs-theme="light"] body[data-skin-template="fallout_pipboy"] #player::after,
[data-bs-theme="light"] body[data-skin-template="matrix_resurrections"] #player::after {
	mix-blend-mode: normal;
	opacity: 0.6;
}

/* ---- 10. Skin Browser live miniatures -------------------------------------
   Every Skin Browser card renders a 640x400 replica of the app in that
   skin (header, sidebar, middle column, deck with the skin's own signature
   cover art), scaled down by --mini-scale (set from JS). It reads the very
   same tokens and --sk-* variables as the real UI: the token blocks and the
   per-skin blocks above also target .skin-mini[data-skin="<id>"] (and
   .skin-mini.is-light for the daylight tokens), so a preview can never drift
   from the skin it shows. Motion only runs while a card is hovered. */
.skin-mini {
	--sk-ink: initial;
	--sk-motif: none;
	--sk-motif-o: 0;
	--sk-deco: none;
	--sk-deco-o: 1;
	--sk-tile: 0px;
	--sk-dx: 0px;
	--sk-dy: 0px;
	--sk-drift: 0s;
	--sk-display-track: -0.2px;
}
.skin-live-preview {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-bg-darker);
	border-bottom: 1px solid var(--surface-border);
	isolation: isolate;
}
.mini-canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 640px;
	height: 400px;
	transform-origin: 0 0;
	transform: scale(var(--mini-scale, 0.43));
	font-family: var(--sk-body, 'Inter', sans-serif);
	color: var(--text-main);
	background: var(--surface-bg-darker);
	pointer-events: none;
	user-select: none;
}
.mini-header {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: var(--surface-bg-sidebar);
	border-bottom: 1px solid var(--surface-border);
}
.mini-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sk-a1) 20%, var(--sk-a2) 50%, var(--sk-a1) 80%, transparent);
	background-size: 200% 100%;
	opacity: 0.85;
}
.mini-logo {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brand-primary-gradient);
	box-shadow: var(--skin-accent-glow);
	flex-shrink: 0;
}
.mini-title {
	font-family: var(--sk-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: var(--sk-display-track);
	white-space: nowrap;
}
.mini-chip {
	margin-left: auto;
	width: 70px;
	height: 22px;
	border-radius: 11px;
	border: 1px solid var(--surface-border);
	background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
}
.mini-body {
	display: flex;
	height: 360px;
}
.mini-nav {
	width: 132px;
	flex-shrink: 0;
	padding: 12px 9px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--surface-bg-sidebar);
	border-right: 1px solid var(--surface-border);
}
.mini-nav-item {
	height: 30px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 9px;
	border-radius: var(--skin-radius-sm);
	color: var(--text-muted);
	font-size: 14px;
}
.mini-nav-item > span {
	flex: 1;
	max-width: 58px;
	height: 6px;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.4;
}
.mini-nav-item.is-active {
	background: var(--brand-primary-gradient);
	color: var(--sk-on-brand, #ffffff);
	box-shadow: var(--skin-accent-glow);
}
.mini-nav-item.is-active > span {
	opacity: 0.85;
}
.mini-main {
	position: relative;
	flex: 1;
	overflow: hidden;
	padding: 20px;
	background: var(--surface-bg-dark);
}
.mini-main::before,
.mini-main::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.mini-main::before {
	inset: 0;
	background: var(--sk-deco, none);
	opacity: var(--sk-deco-o, 1);
}
.mini-main::after {
	inset: calc(var(--sk-tile, 0px) * -1);
	background: var(--sk-ink, linear-gradient(135deg, var(--sk-a1), var(--sk-a2)));
	-webkit-mask: var(--sk-motif, none);
	mask: var(--sk-motif, none);
	opacity: var(--sk-motif-o, 0);
	animation: sk-drift var(--sk-drift, 0s) linear infinite paused;
}
.mini-card {
	position: relative;
	z-index: 1;
	padding: 16px;
	background: color-mix(in srgb, var(--surface-bg-card) 82%, transparent);
	border: 1px solid var(--surface-border);
	border-radius: var(--skin-radius-card);
	box-shadow: var(--skin-shadow-card);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.mini-card-title {
	font-family: var(--sk-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: var(--sk-display-track);
	margin-bottom: 10px;
}
.mini-row {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	border-bottom: 1px solid var(--surface-border);
}
.mini-thumb {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: var(--skin-radius-sm);
	background: linear-gradient(135deg, color-mix(in srgb, var(--sk-a1) 55%, transparent), color-mix(in srgb, var(--sk-a2) 35%, transparent));
}
.mini-line {
	flex: 1;
	height: 7px;
	border-radius: 4px;
	background: var(--text-main);
	opacity: 0.55;
}
.mini-line.is-short {
	flex: 0 0 22%;
	background: var(--text-muted);
	opacity: 0.45;
}
.mini-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 18px;
	border-radius: var(--skin-radius-sm);
	background: var(--brand-primary-gradient);
	color: var(--sk-on-brand, #ffffff);
	font-size: 12px;
	font-weight: 700;
	box-shadow: var(--skin-accent-glow);
}
.mini-deck {
	width: 176px;
	flex-shrink: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: var(--surface-bg-darker);
	border-left: 1px solid var(--surface-border);
}
.mini-cover {
	position: relative;
	width: 152px;
	height: 152px;
	overflow: hidden;
	border-radius: min(var(--skin-radius-card), 16px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	box-shadow: var(--skin-shadow-card);
}
.mini-cover > svg {
	display: block;
	width: 100%;
	height: 100%;
}
.mini-track,
.mini-artist {
	height: 8px;
	border-radius: 4px;
	background: var(--text-main);
	opacity: 0.85;
	width: 78%;
}
.mini-artist {
	height: 6px;
	width: 52%;
	background: var(--sk-a1);
	opacity: 0.7;
}
.mini-progress {
	width: 100%;
	height: 5px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--text-muted) 28%, transparent);
	overflow: hidden;
}
.mini-progress > span {
	display: block;
	width: 42%;
	height: 100%;
	background: linear-gradient(90deg, var(--sk-a1), var(--sk-a2));
	box-shadow: 0 0 8px var(--sk-a1);
}
.mini-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--text-muted);
	font-size: 15px;
}
.mini-pause {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 20px;
	background: var(--brand-primary-gradient);
	color: var(--sk-on-brand, #ffffff);
	box-shadow: var(--skin-accent-glow);
}
.mini-pause::before {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--sk-a1), transparent 30%, var(--sk-a2) 50%, transparent 80%, var(--sk-a1));
	-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
	opacity: 0.45;
	animation: sk-spin 3.2s linear infinite paused;
}
.skin-mini:hover .mini-main::after,
.skin-mini:focus-within .mini-main::after,
.skin-mini:hover .mini-pause::before,
.skin-mini:focus-within .mini-pause::before {
	animation-play-state: running;
}
.skin-mini:hover .mini-pause::before,
.skin-mini:focus-within .mini-pause::before {
	opacity: 1;
}
.skin-mini:hover .mini-header::after {
	animation: sk-line 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.skin-mini .mini-main::after,
	.skin-mini .mini-pause::before,
	.skin-mini .mini-header::after {
		animation: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body[data-skin-template] #content::before,
	body[data-skin-template] #content::after,
	body[data-skin-template] #header::after,
	body[data-skin-template] #leftPanel .nav-link.active::after,
	body[data-skin-template] #leftPanel .nav-link.active > span,
	body[data-skin-template] #player::after,
	body[data-skin-template] #pause::before,
	body.text-center[data-skin-template]::after {
		animation: none !important;
	}
}

/* ---- Per-skin signature specs --------------------------------------- */

/* default */
body[data-skin-template="default"],
.skin-mini[data-skin="default"] {
	--sk-a1: #3b82f6;
	--sk-a2: #8b5cf6;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(55% 60% at 12% 0%, rgba(59,130,246,0.16), transparent 70%), radial-gradient(50% 55% at 100% 100%, rgba(139,92,246,0.12), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12.0' cy='12.0' r='1.1' fill-opacity='1'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat;
	--sk-motif-o: 0.22;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="default"],
.skin-mini.is-light[data-skin="default"] {
	--sk-a1: #2563eb;
	--sk-a2: #7c3aed;
	--sk-deco: radial-gradient(55% 60% at 12% 0%, rgba(37,99,235,0.12), transparent 70%), radial-gradient(50% 55% at 100% 100%, rgba(124,58,237,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* neon_cyber */
body[data-skin-template="neon_cyber"],
.skin-mini[data-skin="neon_cyber"] {
	--sk-a1: #06b6d4;
	--sk-a2: #a855f7;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: radial-gradient(55% 60% at 0% 0%, rgba(6,182,212,0.2), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(168,85,247,0.18), transparent 70%), linear-gradient(180deg, transparent 70%, rgba(168,85,247,0.1));
	--sk-display-track: 0.5px;
	--sk-motif: linear-gradient(rgba(0,0,0,0.55) 1px, transparent 1px) 0 0 / 40px 40px repeat, linear-gradient(90deg, rgba(0,0,0,0.55) 1px, transparent 1px) 0 0 / 40px 40px repeat, linear-gradient(rgba(0,0,0,1) 1px, transparent 1px) 0 0 / 160px 160px repeat, linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px) 0 0 / 160px 160px repeat;
	--sk-motif-o: 0.16;
	--sk-tile: 40px;
	--sk-dx: 40px;
	--sk-dy: 40px;
	--sk-drift: 8s;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="neon_cyber"],
.skin-mini.is-light[data-skin="neon_cyber"] {
	--sk-a1: #0891b2;
	--sk-a2: #9333ea;
	--sk-deco: radial-gradient(55% 60% at 0% 0%, rgba(8,145,178,0.2), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(147,51,234,0.18), transparent 70%), linear-gradient(180deg, transparent 70%, rgba(147,51,234,0.1));
	--sk-on-brand: #ffffff;
}

/* nordic_frost */
body[data-skin-template="nordic_frost"],
.skin-mini[data-skin="nordic_frost"] {
	--sk-a1: #38bdf8;
	--sk-a2: #e0f2fe;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(70% 45% at 15% -10%, rgba(52,211,153,0.1), transparent 70%), radial-gradient(60% 50% at 85% 0%, rgba(56,189,248,0.16), transparent 70%), radial-gradient(80% 40% at 50% 110%, rgba(167,139,250,0.08), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg transform='translate(108.57,134.35)' stroke='%23000' stroke-opacity='0.68' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='6.7' y2='0'/%3E%3Cline x1='0' y1='0' x2='3.35' y2='5.8'/%3E%3Cline x1='0' y1='0' x2='-3.35' y2='5.8'/%3E%3Cline x1='0' y1='0' x2='-6.7' y2='0'/%3E%3Cline x1='0' y1='0' x2='-3.35' y2='-5.8'/%3E%3Cline x1='0' y1='0' x2='3.35' y2='-5.8'/%3E%3C/g%3E%3Cg transform='translate(121.88,140.97)' stroke='%23000' stroke-opacity='0.71' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='3.74' y2='0'/%3E%3Cline x1='0' y1='0' x2='1.87' y2='3.24'/%3E%3Cline x1='0' y1='0' x2='-1.87' y2='3.24'/%3E%3Cline x1='0' y1='0' x2='-3.74' y2='0'/%3E%3Cline x1='0' y1='0' x2='-1.87' y2='-3.24'/%3E%3Cline x1='0' y1='0' x2='1.87' y2='-3.24'/%3E%3C/g%3E%3Cg transform='translate(151.17,190.31)' stroke='%23000' stroke-opacity='0.58' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='3.38' y2='0'/%3E%3Cline x1='0' y1='0' x2='1.69' y2='2.92'/%3E%3Cline x1='0' y1='0' x2='-1.69' y2='2.92'/%3E%3Cline x1='0' y1='0' x2='-3.38' y2='0'/%3E%3Cline x1='0' y1='0' x2='-1.69' y2='-2.92'/%3E%3Cline x1='0' y1='0' x2='1.69' y2='-2.92'/%3E%3C/g%3E%3Cg transform='translate(21.76,194.31)' stroke='%23000' stroke-opacity='0.43' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.77' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.89' y2='5'/%3E%3Cline x1='0' y1='0' x2='-2.89' y2='5'/%3E%3Cline x1='0' y1='0' x2='-5.77' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.89' y2='-5'/%3E%3Cline x1='0' y1='0' x2='2.89' y2='-5'/%3E%3C/g%3E%3Cg transform='translate(-4.27,231.54)' stroke='%23000' stroke-opacity='0.77' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.62' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.81' y2='4.86'/%3E%3Cline x1='0' y1='0' x2='-2.81' y2='4.86'/%3E%3Cline x1='0' y1='0' x2='-5.62' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.81' y2='-4.86'/%3E%3Cline x1='0' y1='0' x2='2.81' y2='-4.86'/%3E%3C/g%3E%3Cg transform='translate(235.73,231.54)' stroke='%23000' stroke-opacity='0.77' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.62' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.81' y2='4.86'/%3E%3Cline x1='0' y1='0' x2='-2.81' y2='4.86'/%3E%3Cline x1='0' y1='0' x2='-5.62' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.81' y2='-4.86'/%3E%3Cline x1='0' y1='0' x2='2.81' y2='-4.86'/%3E%3C/g%3E%3Cg transform='translate(37.8,3.6)' stroke='%23000' stroke-opacity='0.44' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.11' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.56' y2='4.43'/%3E%3Cline x1='0' y1='0' x2='-2.56' y2='4.43'/%3E%3Cline x1='0' y1='0' x2='-5.11' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.56' y2='-4.43'/%3E%3Cline x1='0' y1='0' x2='2.56' y2='-4.43'/%3E%3C/g%3E%3Cg transform='translate(37.8,243.6)' stroke='%23000' stroke-opacity='0.44' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.11' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.56' y2='4.43'/%3E%3Cline x1='0' y1='0' x2='-2.56' y2='4.43'/%3E%3Cline x1='0' y1='0' x2='-5.11' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.56' y2='-4.43'/%3E%3Cline x1='0' y1='0' x2='2.56' y2='-4.43'/%3E%3C/g%3E%3Cg transform='translate(45.65,58.07)' stroke='%23000' stroke-opacity='0.68' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='3.12' y2='0'/%3E%3Cline x1='0' y1='0' x2='1.56' y2='2.7'/%3E%3Cline x1='0' y1='0' x2='-1.56' y2='2.7'/%3E%3Cline x1='0' y1='0' x2='-3.12' y2='0'/%3E%3Cline x1='0' y1='0' x2='-1.56' y2='-2.7'/%3E%3Cline x1='0' y1='0' x2='1.56' y2='-2.7'/%3E%3C/g%3E%3Cg transform='translate(105.73,202.18)' stroke='%23000' stroke-opacity='0.78' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='5.08' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.54' y2='4.4'/%3E%3Cline x1='0' y1='0' x2='-2.54' y2='4.4'/%3E%3Cline x1='0' y1='0' x2='-5.08' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.54' y2='-4.4'/%3E%3Cline x1='0' y1='0' x2='2.54' y2='-4.4'/%3E%3C/g%3E%3Cg transform='translate(119.95,158.99)' stroke='%23000' stroke-opacity='0.57' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='0' y1='0' x2='4.83' y2='0'/%3E%3Cline x1='0' y1='0' x2='2.41' y2='4.18'/%3E%3Cline x1='0' y1='0' x2='-2.41' y2='4.18'/%3E%3Cline x1='0' y1='0' x2='-4.83' y2='0'/%3E%3Cline x1='0' y1='0' x2='-2.41' y2='-4.18'/%3E%3Cline x1='0' y1='0' x2='2.41' y2='-4.18'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 240px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='113.9' cy='157.79' r='1.03' fill-opacity='0.36'/%3E%3Ccircle cx='2.61' cy='89.94' r='0.72' fill-opacity='0.86'/%3E%3Ccircle cx='165.74' cy='144.35' r='0.95' fill-opacity='0.75'/%3E%3Ccircle cx='34.87' cy='105.61' r='0.63' fill-opacity='0.93'/%3E%3Ccircle cx='14.12' cy='196.52' r='0.56' fill-opacity='0.77'/%3E%3Ccircle cx='80.88' cy='97.11' r='1.17' fill-opacity='0.26'/%3E%3Ccircle cx='14.59' cy='219.61' r='0.91' fill-opacity='0.32'/%3E%3Ccircle cx='236.91' cy='227.21' r='0.59' fill-opacity='0.57'/%3E%3Ccircle cx='32.42' cy='75.01' r='1' fill-opacity='0.37'/%3E%3Ccircle cx='167.24' cy='12.32' r='0.64' fill-opacity='0.86'/%3E%3Ccircle cx='96.12' cy='100.52' r='0.98' fill-opacity='0.61'/%3E%3Ccircle cx='92.3' cy='7.32' r='1.08' fill-opacity='0.98'/%3E%3Ccircle cx='234.31' cy='159.26' r='0.79' fill-opacity='0.52'/%3E%3Ccircle cx='165.63' cy='161.71' r='0.59' fill-opacity='0.43'/%3E%3Ccircle cx='87.2' cy='122.72' r='1.15' fill-opacity='0.63'/%3E%3Ccircle cx='6.75' cy='197.42' r='0.84' fill-opacity='0.64'/%3E%3Ccircle cx='53.32' cy='102.54' r='0.81' fill-opacity='0.83'/%3E%3Ccircle cx='24.63' cy='131.99' r='0.64' fill-opacity='0.77'/%3E%3Ccircle cx='8.84' cy='66.37' r='0.78' fill-opacity='0.73'/%3E%3Ccircle cx='12.49' cy='110.22' r='0.67' fill-opacity='0.46'/%3E%3Ccircle cx='114.3' cy='230.1' r='0.88' fill-opacity='0.97'/%3E%3Ccircle cx='40.22' cy='221.82' r='0.79' fill-opacity='0.39'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
	--sk-motif-o: 0.2;
	--sk-ink: linear-gradient(180deg, #e0f2fe, #7dd3fc);
	--sk-tile: 240px;
	--sk-dx: 0px;
	--sk-dy: 240px;
	--sk-drift: 38s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="nordic_frost"],
.skin-mini.is-light[data-skin="nordic_frost"] {
	--sk-a1: #0284c7;
	--sk-a2: #0369a1;
	--sk-deco: radial-gradient(70% 45% at 15% -10%, rgba(52,211,153,0.1), transparent 70%), radial-gradient(60% 50% at 85% 0%, rgba(2,132,199,0.16), transparent 70%), radial-gradient(80% 40% at 50% 110%, rgba(167,139,250,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #0284c7, #0369a1);
}

/* aero_glass */
body[data-skin-template="aero_glass"],
.skin-mini[data-skin="aero_glass"] {
	--sk-a1: #10b981;
	--sk-a2: #6366f1;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(65% 60% at 0% 100%, rgba(16,185,129,0.18), transparent 70%), radial-gradient(60% 55% at 100% 0%, rgba(99,102,241,0.16), transparent 70%), radial-gradient(40% 40% at 60% 40%, rgba(56,189,248,0.1), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='101.86' cy='82.13' r='2.83' fill='none' stroke='%23000' stroke-opacity='0.91' stroke-width='1'/%3E%3Ccircle cx='100.87' cy='81.14' r='0.62' fill-opacity='0.91'/%3E%3Ccircle cx='1.42' cy='110.61' r='7.39' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1'/%3E%3Ccircle cx='-1.17' cy='108.03' r='1.63' fill-opacity='0.4'/%3E%3Ccircle cx='221.42' cy='110.61' r='7.39' fill='none' stroke='%23000' stroke-opacity='0.4' stroke-width='1'/%3E%3Ccircle cx='218.83' cy='108.03' r='1.63' fill-opacity='0.4'/%3E%3Ccircle cx='121.94' cy='135.66' r='2.25' fill='none' stroke='%23000' stroke-opacity='0.6' stroke-width='1'/%3E%3Ccircle cx='121.15' cy='134.88' r='0.49' fill-opacity='0.6'/%3E%3Ccircle cx='154.77' cy='99.44' r='6.35' fill='none' stroke='%23000' stroke-opacity='0.45' stroke-width='1'/%3E%3Ccircle cx='152.54' cy='97.22' r='1.4' fill-opacity='0.45'/%3E%3Ccircle cx='52.36' cy='24.41' r='5.04' fill='none' stroke='%23000' stroke-opacity='0.95' stroke-width='1'/%3E%3Ccircle cx='50.6' cy='22.65' r='1.11' fill-opacity='0.95'/%3E%3Ccircle cx='129.89' cy='170.33' r='4.3' fill='none' stroke='%23000' stroke-opacity='0.83' stroke-width='1'/%3E%3Ccircle cx='128.39' cy='168.82' r='0.95' fill-opacity='0.83'/%3E%3Ccircle cx='22.37' cy='64.06' r='6.05' fill='none' stroke='%23000' stroke-opacity='0.82' stroke-width='1'/%3E%3Ccircle cx='20.25' cy='61.94' r='1.33' fill-opacity='0.82'/%3E%3Ccircle cx='92.79' cy='19.3' r='3.6' fill='none' stroke='%23000' stroke-opacity='0.49' stroke-width='1'/%3E%3Ccircle cx='91.53' cy='18.04' r='0.79' fill-opacity='0.49'/%3E%3Ccircle cx='61.86' cy='178.09' r='3.2' fill='none' stroke='%23000' stroke-opacity='0.93' stroke-width='1'/%3E%3Ccircle cx='60.74' cy='176.97' r='0.7' fill-opacity='0.93'/%3E%3Ccircle cx='193.46' cy='12.05' r='4.27' fill='none' stroke='%23000' stroke-opacity='0.67' stroke-width='1'/%3E%3Ccircle cx='191.97' cy='10.56' r='0.94' fill-opacity='0.67'/%3E%3Ccircle cx='5.17' cy='93.44' r='7.44' fill='none' stroke='%23000' stroke-opacity='0.42' stroke-width='1'/%3E%3Ccircle cx='2.56' cy='90.84' r='1.64' fill-opacity='0.42'/%3E%3Ccircle cx='225.17' cy='93.44' r='7.44' fill='none' stroke='%23000' stroke-opacity='0.42' stroke-width='1'/%3E%3Ccircle cx='222.56' cy='90.84' r='1.64' fill-opacity='0.42'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
	--sk-motif-o: 0.2;
	--sk-tile: 220px;
	--sk-dx: 0px;
	--sk-dy: -220px;
	--sk-drift: 55s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="aero_glass"],
.skin-mini.is-light[data-skin="aero_glass"] {
	--sk-a1: #059669;
	--sk-a2: #4f46e5;
	--sk-deco: radial-gradient(65% 60% at 0% 100%, rgba(5,150,105,0.18), transparent 70%), radial-gradient(60% 55% at 100% 0%, rgba(79,70,229,0.16), transparent 70%), radial-gradient(40% 40% at 60% 40%, rgba(56,189,248,0.1), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* studio_pro */
body[data-skin-template="studio_pro"],
.skin-mini[data-skin="studio_pro"] {
	--sk-a1: #f59e0b;
	--sk-a2: #22c55e;
	--sk-display: 'Share Tech Mono', monospace;
	--sk-deco: radial-gradient(70% 45% at 50% -20%, rgba(245,158,11,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.35) 100%);
	--sk-motif: conic-gradient(from 45deg, rgba(0,0,0,.95) 0 25%, rgba(0,0,0,.35) 0 50%, rgba(0,0,0,.7) 0 75%, rgba(0,0,0,.15) 0) 0 0 / 48px 48px repeat;
	--sk-motif-o: 0.045;
	--sk-ink: linear-gradient(180deg, #ffffff, #d4d4d8);
	--sk-body: 'Share Tech Mono', monospace;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="studio_pro"],
.skin-mini.is-light[data-skin="studio_pro"] {
	--sk-a1: #d97706;
	--sk-a2: #15803d;
	--sk-deco: radial-gradient(70% 45% at 50% -20%, rgba(217,119,6,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.06) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #18181b, #3f3f46);
}

/* crimson_valkyrie */
body[data-skin-template="crimson_valkyrie"],
.skin-mini[data-skin="crimson_valkyrie"] {
	--sk-a1: #f43f5e;
	--sk-a2: #fbbf24;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(244,63,94,0.2), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(251,191,36,0.08), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.3) 100%);
	--sk-display-track: 0.5px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0,-26 C8,-14 8,10 0,26 C-8,10 -8,-14 0,-26 Z M0,-26 L0,30' fill='none' stroke='%23000' stroke-width='1.1' stroke-opacity='0.63' transform='translate(131.55,83) rotate(234.49) scale(0.68)'/%3E%3Cpath d='M0,-26 C8,-14 8,10 0,26 C-8,10 -8,-14 0,-26 Z M0,-26 L0,30' fill='none' stroke='%23000' stroke-width='1.1' stroke-opacity='0.59' transform='translate(82.52,99.72) rotate(247.39) scale(0.6)'/%3E%3Cpath d='M0,-26 C8,-14 8,10 0,26 C-8,10 -8,-14 0,-26 Z M0,-26 L0,30' fill='none' stroke='%23000' stroke-width='1.1' stroke-opacity='0.68' transform='translate(53.95,83.9) rotate(249.87) scale(0.7)'/%3E%3Cpath d='M0,-26 C8,-14 8,10 0,26 C-8,10 -8,-14 0,-26 Z M0,-26 L0,30' fill='none' stroke='%23000' stroke-width='1.1' stroke-opacity='0.59' transform='translate(100.71,175.31) rotate(194.72) scale(0.63)'/%3E%3Cpath d='M0,-26 C8,-14 8,10 0,26 C-8,10 -8,-14 0,-26 Z M0,-26 L0,30' fill='none' stroke='%23000' stroke-width='1.1' stroke-opacity='0.72' transform='translate(97.93,190.25) rotate(206.26) scale(0.64)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
	--sk-motif-o: 0.16;
	--sk-tile: 240px;
	--sk-dx: 0px;
	--sk-dy: 240px;
	--sk-drift: 110s;
	--sk-body: 'Rajdhani', 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="crimson_valkyrie"],
.skin-mini.is-light[data-skin="crimson_valkyrie"] {
	--sk-a1: #e11d48;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(225,29,72,0.2), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(180,83,9,0.08), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.04) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="crimson_valkyrie"]:not(.text-center),
body[data-skin-template="crimson_valkyrie"] #content,
body[data-skin-template="crimson_valkyrie"] .modal {
	font-family: 'Rajdhani', 'Inter', sans-serif !important;
}

/* emerald_matrix */
body[data-skin-template="emerald_matrix"],
.skin-mini[data-skin="emerald_matrix"] {
	--sk-a1: #10b981;
	--sk-a2: #6ee7b7;
	--sk-display: 'Share Tech Mono', monospace;
	--sk-deco: radial-gradient(60% 50% at 20% 0%, rgba(16,185,129,0.16), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(110,231,183,0.08), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M100,40 H60 H100 H60' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='40' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='40' r='1.6'/%3E%3Cpath d='M10,20 H-20 L-10,30 L-20,40' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='-20' cy='40' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='20' r='1.6'/%3E%3Cg transform='translate(160,0)'%3E%3Cpath d='M10,20 H-20 L-10,30 L-20,40' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='-20' cy='40' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='20' r='1.6'/%3E%3C/g%3E%3Cpath d='M70,10 V-30 H50 V-60 H90' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='90' cy='-60' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='70' cy='10' r='1.6'/%3E%3Cg transform='translate(0,160)'%3E%3Cpath d='M70,10 V-30 H50 V-60 H90' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='90' cy='-60' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='70' cy='10' r='1.6'/%3E%3C/g%3E%3Cpath d='M50,30 L40,40 H10 H-30 L-20,50' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='-20' cy='50' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='30' r='1.6'/%3E%3Cg transform='translate(160,0)'%3E%3Cpath d='M50,30 L40,40 H10 H-30 L-20,50' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='-20' cy='50' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='30' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(0,-160)'%3E%3Cpath d='M100,140 V170 H80 L90,180 V220' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='90' cy='220' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='140' r='1.6'/%3E%3C/g%3E%3Cpath d='M100,140 V170 H80 L90,180 V220' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='90' cy='220' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='140' r='1.6'/%3E%3Cg transform='translate(-160,0)'%3E%3Cpath d='M140,90 H160 V70 V40 H200' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='200' cy='40' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3C/g%3E%3Cpath d='M140,90 H160 V70 V40 H200' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='200' cy='40' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Cpath d='M100,110 L110,120 H130 L120,130 L130,140' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='130' cy='140' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='110' r='1.6'/%3E%3Cpath d='M140,90 L150,100 V120 L140,130 H110' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='110' cy='130' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='140' cy='90' r='1.6'/%3E%3Cpath d='M90,40 V60 H60 V90 V110' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='110' r='2.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='90' cy='40' r='1.6'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
	--sk-motif-o: 0.2;
	--sk-tile: 160px;
	--sk-dx: 160px;
	--sk-dy: 160px;
	--sk-drift: 80s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="emerald_matrix"],
.skin-mini.is-light[data-skin="emerald_matrix"] {
	--sk-a1: #059669;
	--sk-a2: #047857;
	--sk-deco: radial-gradient(60% 50% at 20% 0%, rgba(5,150,105,0.16), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(4,120,87,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="emerald_matrix"]:not(.text-center),
body[data-skin-template="emerald_matrix"] #content,
body[data-skin-template="emerald_matrix"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* solar_gold */
body[data-skin-template="solar_gold"],
.skin-mini[data-skin="solar_gold"] {
	--sk-a1: #eab308;
	--sk-a2: #f97316;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(75% 55% at 50% -15%, rgba(234,179,8,0.24), transparent 70%), radial-gradient(80% 45% at 50% 120%, rgba(249,115,22,0.1), transparent 70%);
	--sk-display-track: 0.6px;
	--sk-motif: repeating-conic-gradient(from 0deg at 50% -15%, rgba(0,0,0,.9) 0 2.4deg, transparent 2.4deg 9deg) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.07;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="solar_gold"],
.skin-mini.is-light[data-skin="solar_gold"] {
	--sk-a1: #b45309;
	--sk-a2: #c2410c;
	--sk-deco: radial-gradient(75% 55% at 50% -15%, rgba(180,83,9,0.24), transparent 70%), radial-gradient(80% 45% at 50% 120%, rgba(194,65,12,0.1), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="solar_gold"]:not(.text-center),
body[data-skin-template="solar_gold"] #content,
body[data-skin-template="solar_gold"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* synthwave_sunset */
body[data-skin-template="synthwave_sunset"],
.skin-mini[data-skin="synthwave_sunset"] {
	--sk-a1: #ff007f;
	--sk-a2: #7928ca;
	--sk-display: 'Audiowide', sans-serif;
	--sk-deco: linear-gradient(180deg, transparent calc(64% - 1px), rgba(255,0,127,0.7) 64%, transparent calc(64% + 2px)) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd36b'/%3E%3Cstop offset='1' stop-color='%23ff007f'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='300' height='150.0' fill='%23fff'/%3E%3Crect x='0' y='63' width='300' height='2' fill='%23000'/%3E%3Crect x='0' y='72.8' width='300' height='3.6' fill='%23000'/%3E%3Crect x='0' y='81.64' width='300' height='5.2' fill='%23000'/%3E%3Crect x='0' y='89.84' width='300' height='6.8' fill='%23000'/%3E%3Crect x='0' y='99.64' width='300' height='8.4' fill='%23000'/%3E%3Crect x='0' y='111.04' width='300' height='10' fill='%23000'/%3E%3Crect x='0' y='124.04' width='300' height='11.6' fill='%23000'/%3E%3Crect x='0' y='138.64' width='300' height='13.2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='150.0' cy='150.0' r='150.0' fill='url(%23s)' fill-opacity='0.9' mask='url(%23m)'/%3E%3C/svg%3E") center bottom 36% / 300px 150px no-repeat, radial-gradient(260px 170px at 50% 64%, rgba(255,95,162,0.32), transparent 70%) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, transparent 30%, rgba(121,40,202,0.16) 64%, rgba(255,0,127,0.1)), radial-gradient(55% 60% at 0% 0%, rgba(121,40,202,0.2), transparent 70%);
	--sk-display-track: 0.5px;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="synthwave_sunset"],
.skin-mini.is-light[data-skin="synthwave_sunset"] {
	--sk-a1: #c026d3;
	--sk-a2: #7c3aed;
	--sk-deco: linear-gradient(180deg, transparent calc(64% - 1px), rgba(192,38,211,0.45) 64%, transparent calc(64% + 2px)) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23c026d3'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='300' height='150.0' fill='%23fff'/%3E%3Crect x='0' y='63' width='300' height='2' fill='%23000'/%3E%3Crect x='0' y='72.8' width='300' height='3.6' fill='%23000'/%3E%3Crect x='0' y='81.64' width='300' height='5.2' fill='%23000'/%3E%3Crect x='0' y='89.84' width='300' height='6.8' fill='%23000'/%3E%3Crect x='0' y='99.64' width='300' height='8.4' fill='%23000'/%3E%3Crect x='0' y='111.04' width='300' height='10' fill='%23000'/%3E%3Crect x='0' y='124.04' width='300' height='11.6' fill='%23000'/%3E%3Crect x='0' y='138.64' width='300' height='13.2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='150.0' cy='150.0' r='150.0' fill='url(%23s)' fill-opacity='0.55' mask='url(%23m)'/%3E%3C/svg%3E") center bottom 36% / 300px 150px no-repeat, radial-gradient(260px 170px at 50% 64%, rgba(255,95,162,0.18), transparent 70%) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, transparent 30%, rgba(124,58,237,0.16) 64%, rgba(192,38,211,0.1)), radial-gradient(55% 60% at 0% 0%, rgba(124,58,237,0.2), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="synthwave_sunset"]:not(.text-center),
body[data-skin-template="synthwave_sunset"] #content,
body[data-skin-template="synthwave_sunset"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* carbon_stealth */
body[data-skin-template="carbon_stealth"],
.skin-mini[data-skin="carbon_stealth"] {
	--sk-a1: #94a3b8;
	--sk-a2: #e2e8f0;
	--sk-display: 'Rajdhani', sans-serif;
	--sk-deco: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 30%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
	--sk-display-track: 0.6px;
	--sk-motif: conic-gradient(rgba(0,0,0,.9) 0 25%, rgba(0,0,0,.25) 0 50%, rgba(0,0,0,.9) 0 75%, rgba(0,0,0,.25) 0) 0 0 / 8px 8px repeat, repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 1px, transparent 1px 4px) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.09;
	--sk-ink: linear-gradient(180deg, #ffffff, #94a3b8);
	--sk-body: 'Share Tech Mono', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="carbon_stealth"],
.skin-mini.is-light[data-skin="carbon_stealth"] {
	--sk-a1: #334155;
	--sk-a2: #475569;
	--sk-deco: linear-gradient(180deg, rgba(255,255,255,0.5), transparent 30%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #0f172a, #334155);
}

/* amethyst_haze */
body[data-skin-template="amethyst_haze"],
.skin-mini[data-skin="amethyst_haze"] {
	--sk-a1: #a855f7;
	--sk-a2: #6366f1;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(65% 55% at 20% 10%, rgba(168,85,247,0.2), transparent 70%), radial-gradient(60% 55% at 90% 80%, rgba(99,102,241,0.16), transparent 70%), radial-gradient(40% 40% at 60% 50%, rgba(236,72,153,0.08), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='77.41' cy='94.64' r='2.36' fill-opacity='0.09'/%3E%3Ccircle cx='77.41' cy='94.64' r='0.91' fill-opacity='0.51'/%3E%3Ccircle cx='112.74' cy='86.33' r='1.4' fill-opacity='0.1'/%3E%3Ccircle cx='112.74' cy='86.33' r='0.54' fill-opacity='0.56'/%3E%3Ccircle cx='5.21' cy='22.54' r='1.92' fill-opacity='0.18'/%3E%3Ccircle cx='5.21' cy='22.54' r='0.74' fill-opacity='0.97'/%3E%3Ccircle cx='105.94' cy='120.27' r='3.45' fill-opacity='0.17'/%3E%3Ccircle cx='105.94' cy='120.27' r='1.33' fill-opacity='0.92'/%3E%3Ccircle cx='124.87' cy='50.61' r='2.52' fill-opacity='0.09'/%3E%3Ccircle cx='124.87' cy='50.61' r='0.97' fill-opacity='0.52'/%3E%3Ccircle cx='210.71' cy='7.32' r='2.18' fill-opacity='0.14'/%3E%3Ccircle cx='210.71' cy='7.32' r='0.84' fill-opacity='0.77'/%3E%3Ccircle cx='132.21' cy='122.71' r='3.08' fill-opacity='0.08'/%3E%3Ccircle cx='132.21' cy='122.71' r='1.19' fill-opacity='0.43'/%3E%3Ccircle cx='184.94' cy='201.29' r='1.38' fill-opacity='0.09'/%3E%3Ccircle cx='184.94' cy='201.29' r='0.53' fill-opacity='0.5'/%3E%3Ccircle cx='79.82' cy='84.39' r='2.56' fill-opacity='0.08'/%3E%3Ccircle cx='79.82' cy='84.39' r='0.99' fill-opacity='0.44'/%3E%3Ccircle cx='142.74' cy='193.84' r='3.47' fill-opacity='0.16'/%3E%3Ccircle cx='142.74' cy='193.84' r='1.33' fill-opacity='0.88'/%3E%3Ccircle cx='48.08' cy='163.72' r='3.11' fill-opacity='0.13'/%3E%3Ccircle cx='48.08' cy='163.72' r='1.2' fill-opacity='0.7'/%3E%3Ccircle cx='148.47' cy='62.99' r='3.11' fill-opacity='0.08'/%3E%3Ccircle cx='148.47' cy='62.99' r='1.2' fill-opacity='0.43'/%3E%3Ccircle cx='122.16' cy='57.55' r='2.55' fill-opacity='0.05'/%3E%3Ccircle cx='122.16' cy='57.55' r='0.98' fill-opacity='0.28'/%3E%3Ccircle cx='68.69' cy='171.53' r='1.91' fill-opacity='0.14'/%3E%3Ccircle cx='68.69' cy='171.53' r='0.73' fill-opacity='0.8'/%3E%3Ccircle cx='175.92' cy='133.4' r='2.77' fill-opacity='0.07'/%3E%3Ccircle cx='175.92' cy='133.4' r='1.06' fill-opacity='0.41'/%3E%3Ccircle cx='106.79' cy='211.72' r='3.61' fill-opacity='0.12'/%3E%3Ccircle cx='106.79' cy='211.72' r='1.39' fill-opacity='0.67'/%3E%3Ccircle cx='97.65' cy='215.85' r='2.58' fill-opacity='0.15'/%3E%3Ccircle cx='97.65' cy='215.85' r='0.99' fill-opacity='0.85'/%3E%3Ccircle cx='18.21' cy='58.46' r='3.2' fill-opacity='0.12'/%3E%3Ccircle cx='18.21' cy='58.46' r='1.23' fill-opacity='0.66'/%3E%3Ccircle cx='172.11' cy='95.83' r='3.45' fill-opacity='0.05'/%3E%3Ccircle cx='172.11' cy='95.83' r='1.33' fill-opacity='0.27'/%3E%3Ccircle cx='58.3' cy='141.74' r='2.51' fill-opacity='0.14'/%3E%3Ccircle cx='58.3' cy='141.74' r='0.97' fill-opacity='0.76'/%3E%3Ccircle cx='103.8' cy='155.8' r='3.17' fill-opacity='0.09'/%3E%3Ccircle cx='103.8' cy='155.8' r='1.22' fill-opacity='0.49'/%3E%3Ccircle cx='4.89' cy='53.46' r='2.11' fill-opacity='0.18'/%3E%3Ccircle cx='4.89' cy='53.46' r='0.81' fill-opacity='1'/%3E%3Ccircle cx='210.79' cy='152.19' r='1.71' fill-opacity='0.17'/%3E%3Ccircle cx='210.79' cy='152.19' r='0.66' fill-opacity='0.94'/%3E%3Ccircle cx='28.13' cy='30.07' r='3.14' fill-opacity='0.09'/%3E%3Ccircle cx='28.13' cy='30.07' r='1.21' fill-opacity='0.51'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
	--sk-motif-o: 0.3;
	--sk-tile: 220px;
	--sk-dx: 220px;
	--sk-dy: 0px;
	--sk-drift: 110s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="amethyst_haze"],
.skin-mini.is-light[data-skin="amethyst_haze"] {
	--sk-a1: #7e22ce;
	--sk-a2: #4f46e5;
	--sk-deco: radial-gradient(65% 55% at 20% 10%, rgba(126,34,206,0.2), transparent 70%), radial-gradient(60% 55% at 90% 80%, rgba(79,70,229,0.16), transparent 70%), radial-gradient(40% 40% at 60% 50%, rgba(236,72,153,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* deep_abyss */
body[data-skin-template="deep_abyss"],
.skin-mini[data-skin="deep_abyss"] {
	--sk-a1: #00f2fe;
	--sk-a2: #4facfe;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: repeating-linear-gradient(100deg, transparent 0 60px, rgba(0,242,254,0.05) 60px 90px, transparent 90px 170px) 0 0 / 100% 55% no-repeat, radial-gradient(80% 45% at 40% -10%, rgba(0,242,254,0.16), transparent 70%), linear-gradient(180deg, transparent 40%, rgba(0,8,20,0.5));
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='148.11' cy='213.63' r='4.74' fill='none' stroke='%23000' stroke-opacity='0.81' stroke-width='1'/%3E%3Ccircle cx='146.46' cy='211.97' r='1.04' fill-opacity='0.81'/%3E%3Ccircle cx='224.88' cy='124.93' r='6.4' fill='none' stroke='%23000' stroke-opacity='0.82' stroke-width='1'/%3E%3Ccircle cx='222.63' cy='122.69' r='1.41' fill-opacity='0.82'/%3E%3Ccircle cx='205.96' cy='8.83' r='3.02' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1'/%3E%3Ccircle cx='204.91' cy='7.77' r='0.66' fill-opacity='1'/%3E%3Ccircle cx='179.23' cy='62.64' r='6.45' fill='none' stroke='%23000' stroke-opacity='0.46' stroke-width='1'/%3E%3Ccircle cx='176.97' cy='60.38' r='1.42' fill-opacity='0.46'/%3E%3Ccircle cx='86.46' cy='105.82' r='3.37' fill='none' stroke='%23000' stroke-opacity='0.44' stroke-width='1'/%3E%3Ccircle cx='85.28' cy='104.64' r='0.74' fill-opacity='0.44'/%3E%3Ccircle cx='121.81' cy='155.29' r='3.91' fill='none' stroke='%23000' stroke-opacity='0.78' stroke-width='1'/%3E%3Ccircle cx='120.44' cy='153.92' r='0.86' fill-opacity='0.78'/%3E%3Ccircle cx='-4.33' cy='13.22' r='3.67' fill='none' stroke='%23000' stroke-opacity='0.41' stroke-width='1'/%3E%3Ccircle cx='-5.61' cy='11.94' r='0.81' fill-opacity='0.41'/%3E%3Ccircle cx='235.67' cy='13.22' r='3.67' fill='none' stroke='%23000' stroke-opacity='0.41' stroke-width='1'/%3E%3Ccircle cx='234.39' cy='11.94' r='0.81' fill-opacity='0.41'/%3E%3Ccircle cx='162.55' cy='99.02' r='4.64' fill='none' stroke='%23000' stroke-opacity='0.51' stroke-width='1'/%3E%3Ccircle cx='160.92' cy='97.4' r='1.02' fill-opacity='0.51'/%3E%3Ccircle cx='186.48' cy='182.14' r='4.68' fill='none' stroke='%23000' stroke-opacity='0.89' stroke-width='1'/%3E%3Ccircle cx='184.85' cy='180.5' r='1.03' fill-opacity='0.89'/%3E%3Ccircle cx='55.48' cy='82.61' r='7.75' fill='none' stroke='%23000' stroke-opacity='0.5' stroke-width='1'/%3E%3Ccircle cx='52.76' cy='79.9' r='1.7' fill-opacity='0.5'/%3E%3Ccircle cx='34.56' cy='7.71' r='6.03' fill='none' stroke='%23000' stroke-opacity='0.88' stroke-width='1'/%3E%3Ccircle cx='32.45' cy='5.6' r='1.33' fill-opacity='0.88'/%3E%3Ccircle cx='12.41' cy='114.77' r='4.38' fill='none' stroke='%23000' stroke-opacity='0.56' stroke-width='1'/%3E%3Ccircle cx='10.88' cy='113.23' r='0.96' fill-opacity='0.56'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
	--sk-motif-o: 0.22;
	--sk-tile: 240px;
	--sk-dx: 0px;
	--sk-dy: -240px;
	--sk-drift: 50s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="deep_abyss"],
.skin-mini.is-light[data-skin="deep_abyss"] {
	--sk-a1: #0284c7;
	--sk-a2: #0369a1;
	--sk-deco: repeating-linear-gradient(100deg, transparent 0 60px, rgba(2,132,199,0.05) 60px 90px, transparent 90px 170px) 0 0 / 100% 55% no-repeat, radial-gradient(80% 45% at 40% -10%, rgba(2,132,199,0.16), transparent 70%), linear-gradient(180deg, transparent 40%, rgba(186,230,253,0.3));
	--sk-on-brand: #ffffff;
}

/* tokyo_drift */
body[data-skin-template="tokyo_drift"],
.skin-mini[data-skin="tokyo_drift"] {
	--sk-a1: #a3e635;
	--sk-a2: #f472b6;
	--sk-display: 'Russo One', sans-serif;
	--sk-deco: radial-gradient(60% 55% at 0% 100%, rgba(163,230,53,0.14), transparent 70%), radial-gradient(55% 50% at 100% 0%, rgba(244,114,182,0.12), transparent 70%);
	--sk-display-track: 0.4px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cline x1='59.38' y1='82.77' x2='146.53' y2='82.77' stroke='%23000' stroke-opacity='0.61' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='77.77' y1='95.12' x2='180.47' y2='95.12' stroke='%23000' stroke-opacity='0.63' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='181.83' y1='28.33' x2='212.12' y2='28.33' stroke='%23000' stroke-opacity='0.53' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='210.73' y1='8.31' x2='312.17' y2='8.31' stroke='%23000' stroke-opacity='0.42' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='83.77' y1='5.08' x2='203.55' y2='5.08' stroke='%23000' stroke-opacity='0.8' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='315.01' y1='73.91' x2='348.08' y2='73.91' stroke='%23000' stroke-opacity='0.5' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='179.12' y1='13.9' x2='294.8' y2='13.9' stroke='%23000' stroke-opacity='0.53' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='55.73' y1='98.1' x2='96.97' y2='98.1' stroke='%23000' stroke-opacity='0.95' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='163.13' y1='66.24' x2='223.99' y2='66.24' stroke='%23000' stroke-opacity='0.61' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='67.29' y1='4.46' x2='175.22' y2='4.46' stroke='%23000' stroke-opacity='0.43' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 360px 120px repeat;
	--sk-motif-o: 0.18;
	--sk-tile: 360px;
	--sk-dx: -360px;
	--sk-dy: 0px;
	--sk-drift: 4s;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="tokyo_drift"],
.skin-mini.is-light[data-skin="tokyo_drift"] {
	--sk-a1: #65a30d;
	--sk-a2: #db2777;
	--sk-deco: radial-gradient(60% 55% at 0% 100%, rgba(101,163,13,0.14), transparent 70%), radial-gradient(55% 50% at 100% 0%, rgba(219,39,119,0.12), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="tokyo_drift"]:not(.text-center),
body[data-skin-template="tokyo_drift"] #content,
body[data-skin-template="tokyo_drift"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* copper_forge */
body[data-skin-template="copper_forge"],
.skin-mini[data-skin="copper_forge"] {
	--sk-a1: #fb923c;
	--sk-a2: #fde047;
	--sk-display: 'Russo One', sans-serif;
	--sk-deco: radial-gradient(85% 55% at 50% 115%, rgba(251,146,60,0.22), transparent 70%), radial-gradient(55% 60% at 0% 0%, rgba(234,88,12,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.35) 100%);
	--sk-display-track: 0.4px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0,0 H64 M0,0 V64' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='.8'/%3E%3Ccircle cx='6' cy='6' r='1.8'/%3E%3Ccircle cx='58' cy='6' r='1.8'/%3E%3Ccircle cx='6' cy='58' r='1.8'/%3E%3Ccircle cx='58' cy='58' r='1.8'/%3E%3C/svg%3E") 0 0 / 64px 64px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='44.84' cy='186.53' r='4.02' fill-opacity='0.05'/%3E%3Ccircle cx='44.84' cy='186.53' r='1.55' fill-opacity='0.27'/%3E%3Ccircle cx='169.38' cy='142.87' r='3.33' fill-opacity='0.05'/%3E%3Ccircle cx='169.38' cy='142.87' r='1.28' fill-opacity='0.26'/%3E%3Ccircle cx='165.66' cy='75.65' r='3.66' fill-opacity='0.12'/%3E%3Ccircle cx='165.66' cy='75.65' r='1.41' fill-opacity='0.65'/%3E%3Ccircle cx='152.26' cy='145.72' r='2.44' fill-opacity='0.14'/%3E%3Ccircle cx='152.26' cy='145.72' r='0.94' fill-opacity='0.75'/%3E%3Ccircle cx='193.8' cy='178.55' r='3.92' fill-opacity='0.06'/%3E%3Ccircle cx='193.8' cy='178.55' r='1.51' fill-opacity='0.33'/%3E%3Ccircle cx='128.13' cy='169.26' r='2.35' fill-opacity='0.05'/%3E%3Ccircle cx='128.13' cy='169.26' r='0.91' fill-opacity='0.28'/%3E%3Ccircle cx='149.66' cy='112.68' r='4.07' fill-opacity='0.08'/%3E%3Ccircle cx='149.66' cy='112.68' r='1.57' fill-opacity='0.44'/%3E%3Ccircle cx='17.78' cy='115.68' r='3.76' fill-opacity='0.13'/%3E%3Ccircle cx='17.78' cy='115.68' r='1.44' fill-opacity='0.74'/%3E%3Ccircle cx='21.18' cy='67.82' r='1.89' fill-opacity='0.1'/%3E%3Ccircle cx='21.18' cy='67.82' r='0.73' fill-opacity='0.55'/%3E%3Ccircle cx='155.68' cy='90.48' r='2.95' fill-opacity='0.08'/%3E%3Ccircle cx='155.68' cy='90.48' r='1.14' fill-opacity='0.42'/%3E%3Ccircle cx='103.5' cy='-2.02' r='2.6' fill-opacity='0.09'/%3E%3Ccircle cx='103.5' cy='-2.02' r='1' fill-opacity='0.48'/%3E%3Ccircle cx='103.5' cy='197.98' r='2.6' fill-opacity='0.09'/%3E%3Ccircle cx='103.5' cy='197.98' r='1' fill-opacity='0.48'/%3E%3Ccircle cx='138.17' cy='177.03' r='1.71' fill-opacity='0.13'/%3E%3Ccircle cx='138.17' cy='177.03' r='0.66' fill-opacity='0.73'/%3E%3Ccircle cx='120.3' cy='121.02' r='2.89' fill-opacity='0.14'/%3E%3Ccircle cx='120.3' cy='121.02' r='1.11' fill-opacity='0.76'/%3E%3Ccircle cx='169.84' cy='50.8' r='1.94' fill-opacity='0.06'/%3E%3Ccircle cx='169.84' cy='50.8' r='0.75' fill-opacity='0.36'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
	--sk-motif-o: 0.13;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="copper_forge"],
.skin-mini.is-light[data-skin="copper_forge"] {
	--sk-a1: #c2410c;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(85% 55% at 50% 115%, rgba(194,65,12,0.22), transparent 70%), radial-gradient(55% 60% at 0% 0%, rgba(234,88,12,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.04) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="copper_forge"]:not(.text-center),
body[data-skin-template="copper_forge"] #content,
body[data-skin-template="copper_forge"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* cherry_blossom */
body[data-skin-template="cherry_blossom"],
.skin-mini[data-skin="cherry_blossom"] {
	--sk-a1: #f472b6;
	--sk-a2: #fda4af;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(244,114,182,0.16), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(253,164,175,0.1), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.79' transform='translate(52.35,119.73) rotate(133.18) scale(1.05)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.58' transform='translate(14.42,2.9) rotate(301.49) scale(0.79)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.58' transform='translate(14.42,222.9) rotate(301.49) scale(0.79)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.8' transform='translate(-0.96,103.46) rotate(301.13) scale(0.96)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.8' transform='translate(219.04,103.46) rotate(301.13) scale(0.96)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.86' transform='translate(33.14,139.67) rotate(312.5) scale(0.99)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.62' transform='translate(147.71,14.09) rotate(272.96) scale(1.04)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.93' transform='translate(6.82,190.42) rotate(170.19) scale(1.14)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.93' transform='translate(226.82,190.42) rotate(170.19) scale(1.14)'/%3E%3Cpath d='M0,-9 C6,-9 9,-2 5,5 C3,8 1,9 0,7 C-1,9 -3,8 -5,5 C-9,-2 -6,-9 0,-9 Z' fill-opacity='0.69' transform='translate(157.11,202.64) rotate(142.19) scale(1.2)'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
	--sk-motif-o: 0.2;
	--sk-tile: 220px;
	--sk-dx: 220px;
	--sk-dy: 220px;
	--sk-drift: 70s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="cherry_blossom"],
.skin-mini.is-light[data-skin="cherry_blossom"] {
	--sk-a1: #db2777;
	--sk-a2: #e11d48;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(219,39,119,0.16), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(225,29,72,0.1), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* cyberpunk_2077 */
body[data-skin-template="cyberpunk_2077"],
.skin-mini[data-skin="cyberpunk_2077"] {
	--sk-a1: #fcee0a;
	--sk-a2: #00f0ff;
	--sk-display: 'Chakra Petch', sans-serif;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(252,238,10,0.14), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(255,0,60,0.1), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(0,240,255,0.08), transparent 70%);
	--sk-display-track: 0.8px;
	--sk-motif: repeating-linear-gradient(135deg, rgba(0,0,0,0.6) 0 2px, transparent 2px 18px) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8.0' cy='8.0' r='0.9' fill-opacity='1'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat;
	--sk-motif-o: 0.07;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="cyberpunk_2077"],
.skin-mini.is-light[data-skin="cyberpunk_2077"] {
	--sk-a1: #ff003c;
	--sk-a2: #0891b2;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(255,0,60,0.14), transparent 70%), radial-gradient(55% 60% at 100% 100%, rgba(255,0,60,0.1), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(8,145,178,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* eva_unit01 */
body[data-skin-template="eva_unit01"],
.skin-mini[data-skin="eva_unit01"] {
	--sk-a1: #39ff14;
	--sk-a2: #a855f7;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: repeating-linear-gradient(-45deg, rgba(255,106,0,0.5) 0 10px, transparent 10px 20px) 0 0 / 100% 6px no-repeat, radial-gradient(60% 55% at 100% 0%, rgba(168,85,247,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(57,255,20,0.1), transparent 70%);
	--sk-display-track: 1px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M0,-20 L17.32,-10 L17.32,10 L0,20 L-17.32,10 L-17.32,-10 Z M34.64,-20 L51.96,-10 L51.96,10 L34.64,20 L17.32,10 L17.32,-10 Z M0,40 L17.32,50 L17.32,70 L0,80 L-17.32,70 L-17.32,50 Z M34.64,40 L51.96,50 L51.96,70 L34.64,80 L17.32,70 L17.32,50 Z M17.32,10 L34.64,20 L34.64,40 L17.32,50 L-0,40 L0,20 Z' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='1'/%3E%3C/svg%3E") 0 0 / 34.64px 60px repeat;
	--sk-motif-o: 0.12;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="eva_unit01"],
.skin-mini.is-light[data-skin="eva_unit01"] {
	--sk-a1: #15803d;
	--sk-a2: #7e22ce;
	--sk-deco: repeating-linear-gradient(-45deg, rgba(255,106,0,0.35) 0 10px, transparent 10px 20px) 0 0 / 100% 6px no-repeat, radial-gradient(60% 55% at 100% 0%, rgba(126,34,206,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(21,128,61,0.1), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="eva_unit01"]:not(.text-center),
body[data-skin-template="eva_unit01"] #content,
body[data-skin-template="eva_unit01"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* blade_runner */
body[data-skin-template="blade_runner"],
.skin-mini[data-skin="blade_runner"] {
	--sk-a1: #ff8c00;
	--sk-a2: #00e5ff;
	--sk-display: 'Share Tech Mono', monospace;
	--sk-deco: radial-gradient(75% 55% at 80% 0%, rgba(255,140,0,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(0,229,255,0.08), transparent 70%), linear-gradient(180deg, rgba(255,140,0,0.06), transparent 50%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cline x1='46.62' y1='123.35' x2='42.85' y2='144.29' stroke='%23000' stroke-opacity='0.89' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='33.43' y1='41.5' x2='31.21' y2='53.86' stroke='%23000' stroke-opacity='0.46' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='132.12' y1='23.44' x2='128.79' y2='41.94' stroke='%23000' stroke-opacity='0.45' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='53.04' y1='77.68' x2='48.83' y2='101.09' stroke='%23000' stroke-opacity='0.73' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='2.6' y1='49.65' x2='0.38' y2='62' stroke='%23000' stroke-opacity='0.91' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='182.6' y1='49.65' x2='180.38' y2='62' stroke='%23000' stroke-opacity='0.91' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='145.75' y1='145.09' x2='141.57' y2='168.31' stroke='%23000' stroke-opacity='0.82' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='170.88' y1='142.88' x2='168.34' y2='156.99' stroke='%23000' stroke-opacity='0.89' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='87.62' y1='135.9' x2='84.2' y2='154.93' stroke='%23000' stroke-opacity='0.6' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='65.56' y1='77.37' x2='62.85' y2='92.39' stroke='%23000' stroke-opacity='0.38' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='147.54' y1='143.69' x2='142.9' y2='169.46' stroke='%23000' stroke-opacity='0.78' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='99.76' y1='134.71' x2='97.57' y2='146.87' stroke='%23000' stroke-opacity='0.77' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='79.81' y1='31.79' x2='77.43' y2='45.04' stroke='%23000' stroke-opacity='0.67' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='45.6' y1='82.7' x2='42.05' y2='102.39' stroke='%23000' stroke-opacity='0.58' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='23.54' y1='88.35' x2='21.06' y2='102.12' stroke='%23000' stroke-opacity='0.46' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='35' y1='65.96' x2='32.99' y2='77.13' stroke='%23000' stroke-opacity='0.76' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='171.66' y1='70.14' x2='167.79' y2='91.65' stroke='%23000' stroke-opacity='0.95' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
	--sk-motif-o: 0.22;
	--sk-ink: linear-gradient(180deg, #fed7aa, #67e8f9);
	--sk-tile: 180px;
	--sk-dx: 0px;
	--sk-dy: 180px;
	--sk-drift: 2.6s;
	--sk-body: 'Share Tech Mono', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="blade_runner"],
.skin-mini.is-light[data-skin="blade_runner"] {
	--sk-a1: #c2410c;
	--sk-a2: #0e7490;
	--sk-deco: radial-gradient(75% 55% at 80% 0%, rgba(194,65,12,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(14,116,144,0.08), transparent 70%), linear-gradient(180deg, rgba(194,65,12,0.06), transparent 50%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #9a3412, #155e75);
}

/* spotify_emerald */
body[data-skin-template="spotify_emerald"],
.skin-mini[data-skin="spotify_emerald"] {
	--sk-a1: #1ed760;
	--sk-a2: #1db954;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(70% 60% at 0% 100%, rgba(30,215,96,0.16), transparent 70%), linear-gradient(180deg, rgba(30,215,96,0.06), transparent 40%);
	--sk-motif: repeating-radial-gradient(circle at 0% 100%, rgba(0,0,0,0.9) 0 1px, transparent 1px 30px) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.07;
	--sk-body: 'Inter', -apple-system, sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="spotify_emerald"],
.skin-mini.is-light[data-skin="spotify_emerald"] {
	--sk-a1: #15803d;
	--sk-a2: #166534;
	--sk-deco: radial-gradient(70% 60% at 0% 100%, rgba(21,128,61,0.16), transparent 70%), linear-gradient(180deg, rgba(21,128,61,0.06), transparent 40%);
	--sk-on-brand: #ffffff;
}

/* elden_ring */
body[data-skin-template="elden_ring"],
.skin-mini[data-skin="elden_ring"] {
	--sk-a1: #ffd700;
	--sk-a2: #f59e0b;
	--sk-display: 'Cinzel', serif;
	--sk-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='rgba(255,215,0,0.5)'%3E%3Ccircle cx='300' cy='300' r='210' stroke-width='2'/%3E%3Ccircle cx='300' cy='300' r='250' stroke='rgba(255,215,0,0.28)' stroke-width='1'/%3E%3Ccircle cx='420' cy='230' r='120' stroke-width='1.2'/%3E%3Ccircle cx='190' cy='360' r='150' stroke='rgba(255,215,0,0.28)' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='150' r='70' stroke-width='1'/%3E%3Cpath d='M300,40 V560 M40,300 H560' stroke='rgba(255,215,0,0.28)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") right -90px top -110px / 600px 600px no-repeat, radial-gradient(60% 55% at 85% 5%, rgba(255,215,0,0.18), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.4) 100%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='118.68' cy='133.61' r='3.67' fill-opacity='0.09'/%3E%3Ccircle cx='118.68' cy='133.61' r='1.41' fill-opacity='0.49'/%3E%3Ccircle cx='77.03' cy='166.36' r='2.82' fill-opacity='0.09'/%3E%3Ccircle cx='77.03' cy='166.36' r='1.09' fill-opacity='0.52'/%3E%3Ccircle cx='97.32' cy='79.15' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='97.32' cy='79.15' r='0.77' fill-opacity='0.72'/%3E%3Ccircle cx='214.51' cy='165.32' r='3.21' fill-opacity='0.09'/%3E%3Ccircle cx='214.51' cy='165.32' r='1.23' fill-opacity='0.5'/%3E%3Ccircle cx='104.04' cy='34.6' r='3.45' fill-opacity='0.09'/%3E%3Ccircle cx='104.04' cy='34.6' r='1.33' fill-opacity='0.47'/%3E%3Ccircle cx='70.02' cy='235.38' r='2.44' fill-opacity='0.18'/%3E%3Ccircle cx='70.02' cy='235.38' r='0.94' fill-opacity='0.98'/%3E%3Ccircle cx='148.31' cy='182.68' r='3.19' fill-opacity='0.07'/%3E%3Ccircle cx='148.31' cy='182.68' r='1.23' fill-opacity='0.38'/%3E%3Ccircle cx='171.09' cy='62.1' r='2.62' fill-opacity='0.06'/%3E%3Ccircle cx='171.09' cy='62.1' r='1.01' fill-opacity='0.35'/%3E%3Ccircle cx='14.02' cy='88.22' r='1.6' fill-opacity='0.1'/%3E%3Ccircle cx='14.02' cy='88.22' r='0.61' fill-opacity='0.54'/%3E%3Ccircle cx='204.03' cy='-0.36' r='2.66' fill-opacity='0.06'/%3E%3Ccircle cx='204.03' cy='-0.36' r='1.02' fill-opacity='0.33'/%3E%3Ccircle cx='204.03' cy='239.64' r='2.66' fill-opacity='0.06'/%3E%3Ccircle cx='204.03' cy='239.64' r='1.02' fill-opacity='0.33'/%3E%3Ccircle cx='83.08' cy='15.3' r='2.13' fill-opacity='0.13'/%3E%3Ccircle cx='83.08' cy='15.3' r='0.82' fill-opacity='0.72'/%3E%3Ccircle cx='148.04' cy='7.53' r='2.83' fill-opacity='0.1'/%3E%3Ccircle cx='148.04' cy='7.53' r='1.09' fill-opacity='0.57'/%3E%3Ccircle cx='95.49' cy='32.4' r='2.58' fill-opacity='0.06'/%3E%3Ccircle cx='95.49' cy='32.4' r='0.99' fill-opacity='0.33'/%3E%3Ccircle cx='164.67' cy='155.87' r='3.19' fill-opacity='0.1'/%3E%3Ccircle cx='164.67' cy='155.87' r='1.23' fill-opacity='0.56'/%3E%3Ccircle cx='229.63' cy='88.5' r='2.09' fill-opacity='0.1'/%3E%3Ccircle cx='229.63' cy='88.5' r='0.8' fill-opacity='0.53'/%3E%3Ccircle cx='219.06' cy='37.88' r='3.55' fill-opacity='0.17'/%3E%3Ccircle cx='219.06' cy='37.88' r='1.36' fill-opacity='0.95'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
	--sk-motif-o: 0.34;
	--sk-tile: 240px;
	--sk-dx: 0px;
	--sk-dy: -240px;
	--sk-drift: 40s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="elden_ring"],
.skin-mini.is-light[data-skin="elden_ring"] {
	--sk-a1: #b45309;
	--sk-a2: #92400e;
	--sk-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='rgba(180,83,9,0.45)'%3E%3Ccircle cx='300' cy='300' r='210' stroke-width='2'/%3E%3Ccircle cx='300' cy='300' r='250' stroke='rgba(180,83,9,0.25)' stroke-width='1'/%3E%3Ccircle cx='420' cy='230' r='120' stroke-width='1.2'/%3E%3Ccircle cx='190' cy='360' r='150' stroke='rgba(180,83,9,0.25)' stroke-width='1.2'/%3E%3Ccircle cx='300' cy='150' r='70' stroke-width='1'/%3E%3Cpath d='M300,40 V560 M40,300 H560' stroke='rgba(180,83,9,0.25)' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") right -90px top -110px / 600px 600px no-repeat, radial-gradient(60% 55% at 85% 5%, rgba(180,83,9,0.18), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.04) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="elden_ring"]:not(.text-center),
body[data-skin-template="elden_ring"] #content,
body[data-skin-template="elden_ring"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* stranger_synth */
body[data-skin-template="stranger_synth"],
.skin-mini[data-skin="stranger_synth"] {
	--sk-a1: #ff1133;
	--sk-a2: #7f1d1d;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(90% 50% at 50% 0%, rgba(255,17,51,0.2), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(30,58,138,0.14), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.5) 100%);
	--sk-display-track: 1px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='16.45' cy='168.52' r='3.57' fill-opacity='0.1'/%3E%3Ccircle cx='16.45' cy='168.52' r='1.37' fill-opacity='0.56'/%3E%3Ccircle cx='207.87' cy='94.48' r='2.75' fill-opacity='0.17'/%3E%3Ccircle cx='207.87' cy='94.48' r='1.06' fill-opacity='0.94'/%3E%3Ccircle cx='44.83' cy='8.74' r='1.71' fill-opacity='0.05'/%3E%3Ccircle cx='44.83' cy='8.74' r='0.66' fill-opacity='0.28'/%3E%3Ccircle cx='96.68' cy='27.06' r='1.52' fill-opacity='0.09'/%3E%3Ccircle cx='96.68' cy='27.06' r='0.59' fill-opacity='0.48'/%3E%3Ccircle cx='88.15' cy='193.96' r='1.33' fill-opacity='0.13'/%3E%3Ccircle cx='88.15' cy='193.96' r='0.51' fill-opacity='0.74'/%3E%3Ccircle cx='199.61' cy='161.37' r='1.68' fill-opacity='0.07'/%3E%3Ccircle cx='199.61' cy='161.37' r='0.64' fill-opacity='0.36'/%3E%3Ccircle cx='81.6' cy='1.44' r='3.57' fill-opacity='0.15'/%3E%3Ccircle cx='81.6' cy='1.44' r='1.37' fill-opacity='0.82'/%3E%3Ccircle cx='81.6' cy='221.44' r='3.57' fill-opacity='0.15'/%3E%3Ccircle cx='81.6' cy='221.44' r='1.37' fill-opacity='0.82'/%3E%3Ccircle cx='177.88' cy='143.17' r='3.61' fill-opacity='0.1'/%3E%3Ccircle cx='177.88' cy='143.17' r='1.39' fill-opacity='0.54'/%3E%3Ccircle cx='8.99' cy='78.76' r='2.32' fill-opacity='0.15'/%3E%3Ccircle cx='8.99' cy='78.76' r='0.89' fill-opacity='0.86'/%3E%3Ccircle cx='0.63' cy='188.32' r='2.12' fill-opacity='0.05'/%3E%3Ccircle cx='0.63' cy='188.32' r='0.81' fill-opacity='0.27'/%3E%3Ccircle cx='220.63' cy='188.32' r='2.12' fill-opacity='0.05'/%3E%3Ccircle cx='220.63' cy='188.32' r='0.81' fill-opacity='0.27'/%3E%3Ccircle cx='133.13' cy='191.91' r='2.72' fill-opacity='0.14'/%3E%3Ccircle cx='133.13' cy='191.91' r='1.05' fill-opacity='0.8'/%3E%3Ccircle cx='96.64' cy='87.13' r='1.36' fill-opacity='0.16'/%3E%3Ccircle cx='96.64' cy='87.13' r='0.52' fill-opacity='0.9'/%3E%3Ccircle cx='126.47' cy='29.43' r='1.75' fill-opacity='0.12'/%3E%3Ccircle cx='126.47' cy='29.43' r='0.67' fill-opacity='0.65'/%3E%3Ccircle cx='152.33' cy='209.2' r='2.3' fill-opacity='0.12'/%3E%3Ccircle cx='152.33' cy='209.2' r='0.88' fill-opacity='0.66'/%3E%3Ccircle cx='153.61' cy='13.85' r='3.55' fill-opacity='0.1'/%3E%3Ccircle cx='153.61' cy='13.85' r='1.36' fill-opacity='0.54'/%3E%3Ccircle cx='-3.2' cy='192.53' r='3.26' fill-opacity='0.06'/%3E%3Ccircle cx='-3.2' cy='192.53' r='1.25' fill-opacity='0.36'/%3E%3Ccircle cx='216.8' cy='192.53' r='3.26' fill-opacity='0.06'/%3E%3Ccircle cx='216.8' cy='192.53' r='1.25' fill-opacity='0.36'/%3E%3Ccircle cx='100.11' cy='106.94' r='2.03' fill-opacity='0.11'/%3E%3Ccircle cx='100.11' cy='106.94' r='0.78' fill-opacity='0.61'/%3E%3Ccircle cx='66.86' cy='128.99' r='2.97' fill-opacity='0.14'/%3E%3Ccircle cx='66.86' cy='128.99' r='1.14' fill-opacity='0.76'/%3E%3Ccircle cx='177.48' cy='174.61' r='2.14' fill-opacity='0.13'/%3E%3Ccircle cx='177.48' cy='174.61' r='0.82' fill-opacity='0.74'/%3E%3Ccircle cx='169.67' cy='16.37' r='2.88' fill-opacity='0.11'/%3E%3Ccircle cx='169.67' cy='16.37' r='1.11' fill-opacity='0.6'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
	--sk-motif-o: 0.26;
	--sk-ink: linear-gradient(180deg, #fecaca, #f87171);
	--sk-tile: 220px;
	--sk-dx: 0px;
	--sk-dy: -220px;
	--sk-drift: 70s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="stranger_synth"],
.skin-mini.is-light[data-skin="stranger_synth"] {
	--sk-a1: #b91c1c;
	--sk-a2: #7f1d1d;
	--sk-deco: radial-gradient(90% 50% at 50% 0%, rgba(185,28,28,0.2), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(30,58,138,0.14), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #7f1d1d, #b91c1c);
}
body[data-skin-template="stranger_synth"]:not(.text-center),
body[data-skin-template="stranger_synth"] #content,
body[data-skin-template="stranger_synth"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* demon_slayer */
body[data-skin-template="demon_slayer"],
.skin-mini[data-skin="demon_slayer"] {
	--sk-a1: #00f2fe;
	--sk-a2: #ff416c;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(0,242,254,0.14), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(255,65,108,0.12), transparent 70%);
	--sk-display-track: 0.6px;
	--sk-motif: repeating-conic-gradient(rgba(0,0,0,1) 0 25%, transparent 0 50%) 0 0 / 40px 40px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0,30 L0,30 L6,32.78 L12,35.29 L18,37.28 L24,38.56 L30,39 L36,38.56 L42,37.28 L48,35.29 L54,32.78 L60,30 L66,27.22 L72,24.71 L78,22.72 L84,21.44 L90,21 L96,21.44 L102,22.72 L108,24.71 L114,27.22 L120,30 L126,32.78 L132,35.29 L138,37.28 L144,38.56 L150,39 L156,38.56 L162,37.28 L168,35.29 L174,32.78 L180,30 L186,27.22 L192,24.71 L198,22.72 L204,21.44 L210,21 L216,21.44 L222,22.72 L228,24.71 L234,27.22 L240,30' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M0,48 L0,53 L6,52.71 L12,51.96 L18,50.82 L24,49.41 L30,47.85 L36,46.32 L42,44.94 L48,43.87 L54,43.2 L60,43 L66,43.29 L72,44.04 L78,45.18 L84,46.59 L90,48.15 L96,49.68 L102,51.06 L108,52.13 L114,52.8 L120,53 L126,52.71 L132,51.96 L138,50.82 L144,49.41 L150,47.85 L156,46.32 L162,44.94 L168,43.87 L174,43.2 L180,43 L186,43.29 L192,44.04 L198,45.18 L204,46.59 L210,48.15 L216,49.68 L222,51.06 L228,52.13 L234,52.8 L240,53' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='.55'/%3E%3C/svg%3E") 0 0 / 240px 60px repeat;
	--sk-motif-o: 0.06;
	--sk-ink: linear-gradient(135deg, #34d399, #22d3ee);
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="demon_slayer"],
.skin-mini.is-light[data-skin="demon_slayer"] {
	--sk-a1: #0284c7;
	--sk-a2: #e11d48;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(2,132,199,0.14), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(225,29,72,0.12), transparent 70%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(135deg, #047857, #0e7490);
}
body[data-skin-template="demon_slayer"]:not(.text-center),
body[data-skin-template="demon_slayer"] #content,
body[data-skin-template="demon_slayer"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* discord_blurple */
body[data-skin-template="discord_blurple"],
.skin-mini[data-skin="discord_blurple"] {
	--sk-a1: #5865f2;
	--sk-a2: #eb459e;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(88,101,242,0.2), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(235,69,158,0.1), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10.0' cy='10.0' r='1.2' fill-opacity='1'/%3E%3C/svg%3E") 0 0 / 20px 20px repeat;
	--sk-motif-o: 0.16;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="discord_blurple"],
.skin-mini.is-light[data-skin="discord_blurple"] {
	--sk-a1: #4752c4;
	--sk-a2: #c026d3;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(71,82,196,0.2), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(192,38,211,0.1), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* arcane_hextech */
body[data-skin-template="arcane_hextech"],
.skin-mini[data-skin="arcane_hextech"] {
	--sk-a1: #00f5d4;
	--sk-a2: #c9a24d;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(0,245,212,0.18), transparent 70%), radial-gradient(60% 55% at 100% 100%, rgba(121,40,202,0.18), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(255,0,127,0.08), transparent 70%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38.11' height='66' viewBox='0 0 38.11 66'%3E%3Cpath d='M0,-22 L19.05,-11 L19.05,11 L0,22 L-19.05,11 L-19.05,-11 Z M38.11,-22 L57.16,-11 L57.16,11 L38.11,22 L19.05,11 L19.05,-11 Z M0,44 L19.05,55 L19.05,77 L0,88 L-19.05,77 L-19.05,55 Z M38.11,44 L57.16,55 L57.16,77 L38.11,88 L19.05,77 L19.05,55 Z M19.05,11 L38.11,22 L38.11,44 L19.05,55 L-0,44 L0,22 Z' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='1'/%3E%3C/svg%3E") 0 0 / 38.11px 66px repeat;
	--sk-motif-o: 0.13;
	--sk-ink: linear-gradient(135deg, #c9a24d, #00f5d4);
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="arcane_hextech"],
.skin-mini.is-light[data-skin="arcane_hextech"] {
	--sk-a1: #0077b6;
	--sk-a2: #b8860b;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(0,119,182,0.18), transparent 70%), radial-gradient(60% 55% at 100% 100%, rgba(121,40,202,0.18), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(255,0,127,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(135deg, #b8860b, #0077b6);
}
body[data-skin-template="arcane_hextech"]:not(.text-center),
body[data-skin-template="arcane_hextech"] #content,
body[data-skin-template="arcane_hextech"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* zelda_sheikah */
body[data-skin-template="zelda_sheikah"],
.skin-mini[data-skin="zelda_sheikah"] {
	--sk-a1: #14b8a6;
	--sk-a2: #eab308;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(75% 50% at 50% 0%, rgba(20,184,166,0.18), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(234,179,8,0.08), transparent 70%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ccircle cx='30' cy='30' r='9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='120' cy='30' r='9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='120' cy='30' r='3'/%3E%3Ccircle cx='75' cy='90' r='9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='75' cy='90' r='3'/%3E%3Ccircle cx='30' cy='150' r='9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='150' r='3'/%3E%3Ccircle cx='150' cy='120' r='9' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='150' cy='120' r='3'/%3E%3Cpath d='M39,30 H111 M120,39 V70 L84,86 M66,90 H40 V141 M39,150 H100 L141,120 M159,120 H180 M0,150 H21 M120,0 V21 M150,111 V60 H180 M0,60 H10' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
	--sk-motif-o: 0.16;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="zelda_sheikah"],
.skin-mini.is-light[data-skin="zelda_sheikah"] {
	--sk-a1: #0284c7;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(75% 50% at 50% 0%, rgba(2,132,199,0.18), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(180,83,9,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="zelda_sheikah"]:not(.text-center),
body[data-skin-template="zelda_sheikah"] #content,
body[data-skin-template="zelda_sheikah"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* portal_aperture */
body[data-skin-template="portal_aperture"],
.skin-mini[data-skin="portal_aperture"] {
	--sk-a1: #0084ff;
	--sk-a2: #ff6600;
	--sk-display: 'Rajdhani', sans-serif;
	--sk-deco: radial-gradient(45% 60% at 0% 50%, rgba(0,132,255,0.2), transparent 70%), radial-gradient(45% 60% at 100% 50%, rgba(255,102,0,0.2), transparent 70%);
	--sk-display-track: 1px;
	--sk-motif: linear-gradient(rgba(0,0,0,0.9) 1px, transparent 1px) 0 0 / 96px 96px repeat, linear-gradient(90deg, rgba(0,0,0,0.9) 1px, transparent 1px) 0 0 / 96px 96px repeat, linear-gradient(rgba(0,0,0,0.25) 1px, transparent 1px) 0 0 / 24px 24px repeat, linear-gradient(90deg, rgba(0,0,0,0.25) 1px, transparent 1px) 0 0 / 24px 24px repeat;
	--sk-motif-o: 0.1;
	--sk-ink: linear-gradient(90deg, #93c5fd, #e2e8f0, #fdba74);
	--sk-body: 'Share Tech Mono', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="portal_aperture"],
.skin-mini.is-light[data-skin="portal_aperture"] {
	--sk-a1: #0070e0;
	--sk-a2: #ea580c;
	--sk-deco: radial-gradient(45% 60% at 0% 50%, rgba(0,112,224,0.2), transparent 70%), radial-gradient(45% 60% at 100% 50%, rgba(234,88,12,0.2), transparent 70%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(90deg, #1d4ed8, #334155, #c2410c);
}

/* fallout_pipboy */
body[data-skin-template="fallout_pipboy"],
.skin-mini[data-skin="fallout_pipboy"] {
	--sk-a1: #34d399;
	--sk-a2: #10b981;
	--sk-display: 'VT323', 'Share Tech Mono', monospace;
	--sk-deco: radial-gradient(85% 80% at 50% 50%, rgba(52,211,153,0.16), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
	--sk-display-track: 1px;
	--sk-motif: repeating-linear-gradient(0deg, rgba(0,0,0,0.9) 0 1px, transparent 1px 3px) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.12;
	--sk-body: 'Share Tech Mono', monospace;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="fallout_pipboy"],
.skin-mini.is-light[data-skin="fallout_pipboy"] {
	--sk-a1: #1d4ed8;
	--sk-a2: #1e40af;
	--sk-deco: radial-gradient(85% 80% at 50% 50%, rgba(29,78,216,0.16), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.06) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="fallout_pipboy"]:not(.text-center),
body[data-skin-template="fallout_pipboy"] #content,
body[data-skin-template="fallout_pipboy"] .modal {
	font-family: 'Share Tech Mono', monospace !important;
}

/* halo_unsc */
body[data-skin-template="halo_unsc"],
.skin-mini[data-skin="halo_unsc"] {
	--sk-a1: #f59e0b;
	--sk-a2: #06b6d4;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(6,182,212,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(245,158,11,0.12), transparent 70%);
	--sk-display-track: 1px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.71' height='48' viewBox='0 0 27.71 48'%3E%3Cpath d='M0,-16 L13.86,-8 L13.86,8 L0,16 L-13.86,8 L-13.86,-8 Z M27.71,-16 L41.57,-8 L41.57,8 L27.71,16 L13.86,8 L13.86,-8 Z M0,32 L13.86,40 L13.86,56 L0,64 L-13.86,56 L-13.86,40 Z M27.71,32 L41.57,40 L41.57,56 L27.71,64 L13.86,56 L13.86,40 Z M13.86,8 L27.71,16 L27.71,32 L13.86,40 L-0,32 L0,16 Z' fill='none' stroke='%23000' stroke-width='0.9' stroke-opacity='1'/%3E%3C/svg%3E") 0 0 / 27.71px 48px repeat, linear-gradient(rgba(0,0,0,0.4) 1px, transparent 1px) 0 0 / 80px 80px repeat, linear-gradient(90deg, rgba(0,0,0,0.4) 1px, transparent 1px) 0 0 / 80px 80px repeat;
	--sk-motif-o: 0.09;
	--sk-body: 'Rajdhani', 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="halo_unsc"],
.skin-mini.is-light[data-skin="halo_unsc"] {
	--sk-a1: #0284c7;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(180,83,9,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(2,132,199,0.12), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="halo_unsc"]:not(.text-center),
body[data-skin-template="halo_unsc"] #content,
body[data-skin-template="halo_unsc"] .modal {
	font-family: 'Rajdhani', 'Inter', sans-serif !important;
}

/* witcher_medallion */
body[data-skin-template="witcher_medallion"],
.skin-mini[data-skin="witcher_medallion"] {
	--sk-a1: #f97316;
	--sk-a2: #dc2626;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(85% 55% at 50% 115%, rgba(249,115,22,0.18), transparent 70%), radial-gradient(50% 50% at 0% 0%, rgba(220,38,38,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Ccircle cx='71.23' cy='136.41' r='1.58' fill-opacity='0.18'/%3E%3Ccircle cx='71.23' cy='136.41' r='0.61' fill-opacity='0.99'/%3E%3Ccircle cx='180.87' cy='-0.22' r='2.24' fill-opacity='0.07'/%3E%3Ccircle cx='180.87' cy='-0.22' r='0.86' fill-opacity='0.4'/%3E%3Ccircle cx='180.87' cy='219.78' r='2.24' fill-opacity='0.07'/%3E%3Ccircle cx='180.87' cy='219.78' r='0.86' fill-opacity='0.4'/%3E%3Ccircle cx='12.04' cy='42.64' r='1.62' fill-opacity='0.14'/%3E%3Ccircle cx='12.04' cy='42.64' r='0.62' fill-opacity='0.77'/%3E%3Ccircle cx='80.45' cy='179.42' r='3.54' fill-opacity='0.09'/%3E%3Ccircle cx='80.45' cy='179.42' r='1.36' fill-opacity='0.51'/%3E%3Ccircle cx='36.7' cy='76.49' r='1.64' fill-opacity='0.13'/%3E%3Ccircle cx='36.7' cy='76.49' r='0.63' fill-opacity='0.74'/%3E%3Ccircle cx='41.75' cy='32.72' r='3.87' fill-opacity='0.1'/%3E%3Ccircle cx='41.75' cy='32.72' r='1.49' fill-opacity='0.58'/%3E%3Ccircle cx='208.13' cy='215.66' r='3.29' fill-opacity='0.08'/%3E%3Ccircle cx='208.13' cy='215.66' r='1.26' fill-opacity='0.44'/%3E%3Ccircle cx='32.5' cy='54.25' r='3.48' fill-opacity='0.11'/%3E%3Ccircle cx='32.5' cy='54.25' r='1.34' fill-opacity='0.63'/%3E%3Ccircle cx='65.54' cy='3.83' r='2.47' fill-opacity='0.1'/%3E%3Ccircle cx='65.54' cy='3.83' r='0.95' fill-opacity='0.54'/%3E%3Ccircle cx='15.25' cy='54.89' r='2.33' fill-opacity='0.1'/%3E%3Ccircle cx='15.25' cy='54.89' r='0.9' fill-opacity='0.56'/%3E%3Ccircle cx='108.66' cy='124.44' r='3.77' fill-opacity='0.08'/%3E%3Ccircle cx='108.66' cy='124.44' r='1.45' fill-opacity='0.47'/%3E%3Ccircle cx='20.88' cy='66.7' r='2.12' fill-opacity='0.12'/%3E%3Ccircle cx='20.88' cy='66.7' r='0.82' fill-opacity='0.68'/%3E%3Ccircle cx='104.77' cy='70.63' r='1.81' fill-opacity='0.15'/%3E%3Ccircle cx='104.77' cy='70.63' r='0.69' fill-opacity='0.81'/%3E%3Ccircle cx='137.28' cy='137.11' r='3.39' fill-opacity='0.16'/%3E%3Ccircle cx='137.28' cy='137.11' r='1.3' fill-opacity='0.89'/%3E%3Ccircle cx='7.72' cy='41.53' r='2.79' fill-opacity='0.14'/%3E%3Ccircle cx='7.72' cy='41.53' r='1.07' fill-opacity='0.78'/%3E%3Ccircle cx='110.92' cy='111.12' r='2.36' fill-opacity='0.08'/%3E%3Ccircle cx='110.92' cy='111.12' r='0.91' fill-opacity='0.43'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat;
	--sk-motif-o: 0.22;
	--sk-tile: 220px;
	--sk-dx: 0px;
	--sk-dy: -220px;
	--sk-drift: 50s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="witcher_medallion"],
.skin-mini.is-light[data-skin="witcher_medallion"] {
	--sk-a1: #991b1b;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(85% 55% at 50% 115%, rgba(153,27,27,0.18), transparent 70%), radial-gradient(50% 50% at 0% 0%, rgba(180,83,9,0.1), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="witcher_medallion"]:not(.text-center),
body[data-skin-template="witcher_medallion"] #content,
body[data-skin-template="witcher_medallion"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* akatsuki_blood */
body[data-skin-template="akatsuki_blood"],
.skin-mini[data-skin="akatsuki_blood"] {
	--sk-a1: #dc2626;
	--sk-a2: #f87171;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(220,38,38,0.2), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(69,10,10,0.35), transparent 70%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg transform='translate(30,40) scale(1.15)'%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill-opacity='.9'/%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-opacity='.35' transform='translate(-3,-3) scale(1.1)'/%3E%3Cpath d='M18,20 C18,15 25,14 26,19 M38,19 C38,14 45,13 46,18' fill='none' stroke='%23000' stroke-width='1.6' stroke-opacity='.2'/%3E%3C/g%3E%3Cg transform='translate(190,150) scale(0.85)'%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill-opacity='.9'/%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-opacity='.35' transform='translate(-3,-3) scale(1.1)'/%3E%3Cpath d='M18,20 C18,15 25,14 26,19 M38,19 C38,14 45,13 46,18' fill='none' stroke='%23000' stroke-width='1.6' stroke-opacity='.2'/%3E%3C/g%3E%3Cg transform='translate(80,230) scale(0.7)'%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill-opacity='.9'/%3E%3Cpath d='M0,22 C-2,12 8,6 16,10 C18,0 34,-2 38,8 C44,0 58,2 58,14 C68,14 70,28 60,30 L4,30 C-2,30 -4,25 0,22 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-opacity='.35' transform='translate(-3,-3) scale(1.1)'/%3E%3Cpath d='M18,20 C18,15 25,14 26,19 M38,19 C38,14 45,13 46,18' fill='none' stroke='%23000' stroke-width='1.6' stroke-opacity='.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px repeat;
	--sk-motif-o: 0.14;
	--sk-tile: 300px;
	--sk-dx: 300px;
	--sk-dy: 0px;
	--sk-drift: 140s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="akatsuki_blood"],
.skin-mini.is-light[data-skin="akatsuki_blood"] {
	--sk-a1: #b91c1c;
	--sk-a2: #7f1d1d;
	--sk-deco: radial-gradient(60% 55% at 100% 0%, rgba(185,28,28,0.2), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(69,10,10,0.06), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="akatsuki_blood"]:not(.text-center),
body[data-skin-template="akatsuki_blood"] #content,
body[data-skin-template="akatsuki_blood"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* dragonball_saiyan */
body[data-skin-template="dragonball_saiyan"],
.skin-mini[data-skin="dragonball_saiyan"] {
	--sk-a1: #fbbf24;
	--sk-a2: #38bdf8;
	--sk-display: 'Russo One', sans-serif;
	--sk-deco: radial-gradient(85% 60% at 50% 110%, rgba(251,191,36,0.22), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(249,115,22,0.12), transparent 70%), radial-gradient(45% 45% at 100% 0%, rgba(56,189,248,0.08), transparent 70%);
	--sk-display-track: 0.4px;
	--sk-motif: repeating-conic-gradient(from 0deg at 50% 120%, rgba(0,0,0,.9) 0 1.6deg, transparent 1.6deg 7.5deg) 0 0 / 100% 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='55.96' cy='100.43' r='3.03' fill-opacity='0.11'/%3E%3Ccircle cx='55.96' cy='100.43' r='1.16' fill-opacity='0.6'/%3E%3Ccircle cx='117.35' cy='97.45' r='2.91' fill-opacity='0.07'/%3E%3Ccircle cx='117.35' cy='97.45' r='1.12' fill-opacity='0.4'/%3E%3Ccircle cx='22.08' cy='51.02' r='3.59' fill-opacity='0.05'/%3E%3Ccircle cx='22.08' cy='51.02' r='1.38' fill-opacity='0.27'/%3E%3Ccircle cx='70.44' cy='84.47' r='3' fill-opacity='0.1'/%3E%3Ccircle cx='70.44' cy='84.47' r='1.15' fill-opacity='0.58'/%3E%3Ccircle cx='171.08' cy='187.46' r='3.04' fill-opacity='0.07'/%3E%3Ccircle cx='171.08' cy='187.46' r='1.17' fill-opacity='0.4'/%3E%3Ccircle cx='175.01' cy='171.13' r='2.77' fill-opacity='0.15'/%3E%3Ccircle cx='175.01' cy='171.13' r='1.06' fill-opacity='0.85'/%3E%3Ccircle cx='176.88' cy='190.18' r='2.16' fill-opacity='0.07'/%3E%3Ccircle cx='176.88' cy='190.18' r='0.83' fill-opacity='0.41'/%3E%3Ccircle cx='160.55' cy='54.18' r='2.27' fill-opacity='0.05'/%3E%3Ccircle cx='160.55' cy='54.18' r='0.87' fill-opacity='0.29'/%3E%3Ccircle cx='152.44' cy='47.38' r='2' fill-opacity='0.13'/%3E%3Ccircle cx='152.44' cy='47.38' r='0.77' fill-opacity='0.71'/%3E%3Ccircle cx='16.86' cy='156.88' r='1.77' fill-opacity='0.18'/%3E%3Ccircle cx='16.86' cy='156.88' r='0.68' fill-opacity='0.98'/%3E%3Ccircle cx='26.38' cy='28.51' r='2.76' fill-opacity='0.15'/%3E%3Ccircle cx='26.38' cy='28.51' r='1.06' fill-opacity='0.82'/%3E%3Ccircle cx='97.42' cy='141.73' r='2.19' fill-opacity='0.16'/%3E%3Ccircle cx='97.42' cy='141.73' r='0.84' fill-opacity='0.89'/%3E%3Ccircle cx='40.58' cy='82.02' r='3.65' fill-opacity='0.1'/%3E%3Ccircle cx='40.58' cy='82.02' r='1.4' fill-opacity='0.54'/%3E%3Ccircle cx='11.8' cy='143.79' r='1.79' fill-opacity='0.1'/%3E%3Ccircle cx='11.8' cy='143.79' r='0.69' fill-opacity='0.56'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
	--sk-motif-o: 0.08;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="dragonball_saiyan"],
.skin-mini.is-light[data-skin="dragonball_saiyan"] {
	--sk-a1: #ea580c;
	--sk-a2: #0284c7;
	--sk-deco: radial-gradient(85% 60% at 50% 110%, rgba(234,88,12,0.22), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(249,115,22,0.12), transparent 70%), radial-gradient(45% 45% at 100% 0%, rgba(2,132,199,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="dragonball_saiyan"]:not(.text-center),
body[data-skin-template="dragonball_saiyan"] #content,
body[data-skin-template="dragonball_saiyan"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* attack_on_titan */
body[data-skin-template="attack_on_titan"],
.skin-mini[data-skin="attack_on_titan"] {
	--sk-a1: #d97706;
	--sk-a2: #15803d;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(80% 45% at 50% -10%, rgba(217,119,6,0.12), transparent 70%), linear-gradient(180deg, transparent 50%, rgba(21,128,61,0.12)), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.4) 100%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='56' viewBox='0 0 120 56'%3E%3Cpath d='M0,0 H120 M0,28 H120 M0,0 V28 M60,28 V56 ' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 120px 56px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px repeat;
	--sk-motif-o: 0.08;
	--sk-ink: linear-gradient(180deg, #e7e5e4, #a8a29e);
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="attack_on_titan"],
.skin-mini.is-light[data-skin="attack_on_titan"] {
	--sk-a1: #166534;
	--sk-a2: #b45309;
	--sk-deco: radial-gradient(80% 45% at 50% -10%, rgba(22,101,52,0.12), transparent 70%), linear-gradient(180deg, transparent 50%, rgba(180,83,9,0.12)), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #44403c, #292524);
}
body[data-skin-template="attack_on_titan"]:not(.text-center),
body[data-skin-template="attack_on_titan"] #content,
body[data-skin-template="attack_on_titan"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* jujutsu_kaisen */
body[data-skin-template="jujutsu_kaisen"],
.skin-mini[data-skin="jujutsu_kaisen"] {
	--sk-a1: #00f5ff;
	--sk-a2: #a855f7;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: radial-gradient(55% 55% at 70% 35%, rgba(168,85,247,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(0,245,255,0.14), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(236,72,153,0.06), transparent 70%);
	--sk-display-track: 0.6px;
	--sk-motif: repeating-conic-gradient(from 0deg at 70% 35%, rgba(0,0,0,.7) 0 1deg, transparent 1deg 6.43deg, rgba(0,0,0,.25) 6.43deg 7.43deg, transparent 7.43deg 12.86deg) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.1;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="jujutsu_kaisen"],
.skin-mini.is-light[data-skin="jujutsu_kaisen"] {
	--sk-a1: #0284c7;
	--sk-a2: #7e22ce;
	--sk-deco: radial-gradient(55% 55% at 70% 35%, rgba(126,34,206,0.22), transparent 70%), radial-gradient(55% 50% at 0% 100%, rgba(2,132,199,0.14), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(236,72,153,0.06), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="jujutsu_kaisen"]:not(.text-center),
body[data-skin-template="jujutsu_kaisen"] #content,
body[data-skin-template="jujutsu_kaisen"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* tron_legacy */
body[data-skin-template="tron_legacy"],
.skin-mini[data-skin="tron_legacy"] {
	--sk-a1: #00e5ff;
	--sk-a2: #ff6600;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: linear-gradient(180deg, transparent calc(66% - 1px), rgba(0,229,255,0.75) 66%, transparent calc(66% + 2px)) 0 0 / 100% 100% no-repeat, radial-gradient(70% 22% at 50% 66%, rgba(0,229,255,0.2), transparent 70%) 0 0 / 100% 100% no-repeat, radial-gradient(40% 40% at 100% 0%, rgba(255,102,0,0.08), transparent 70%);
	--sk-display-track: 1px;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="tron_legacy"],
.skin-mini.is-light[data-skin="tron_legacy"] {
	--sk-a1: #0099cc;
	--sk-a2: #ea580c;
	--sk-deco: linear-gradient(180deg, transparent calc(66% - 1px), rgba(0,153,204,0.5) 66%, transparent calc(66% + 2px)) 0 0 / 100% 100% no-repeat, radial-gradient(70% 22% at 50% 66%, rgba(0,153,204,0.12), transparent 70%) 0 0 / 100% 100% no-repeat, radial-gradient(40% 40% at 100% 0%, rgba(234,88,12,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="tron_legacy"]:not(.text-center),
body[data-skin-template="tron_legacy"] #content,
body[data-skin-template="tron_legacy"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* matrix_resurrections */
body[data-skin-template="matrix_resurrections"],
.skin-mini[data-skin="matrix_resurrections"] {
	--sk-a1: #00ff41;
	--sk-a2: #008f11;
	--sk-display: 'Share Tech Mono', monospace;
	--sk-deco: radial-gradient(80% 50% at 50% 0%, rgba(0,255,65,0.12), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.5) 100%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240' viewBox='0 0 120 240' font-family='monospace' font-size='13'%3E%3Ctext x='4' y='13' fill-opacity='0.33'%3E8%3C/text%3E%3Ctext x='4' y='29' fill-opacity='0.43'%3E%EF%BE%84%3C/text%3E%3Ctext x='4' y='45' fill-opacity='0.52'%3E%EF%BE%88%3C/text%3E%3Ctext x='4' y='61' fill-opacity='0.62'%3E%EF%BE%83%3C/text%3E%3Ctext x='4' y='77' fill-opacity='0.71'%3E%EF%BD%BC%3C/text%3E%3Ctext x='4' y='93' fill-opacity='0.81'%3E6%3C/text%3E%3Ctext x='4' y='109' fill-opacity='0.9'%3E2%3C/text%3E%3Ctext x='4' y='125' fill-opacity='1'%3E2%3C/text%3E%3Ctext x='4' y='141' fill-opacity='0.08'%3E%EF%BE%94%3C/text%3E%3Ctext x='4' y='157' fill-opacity='0.08'%3E%EF%BE%9C%3C/text%3E%3Ctext x='4' y='173' fill-opacity='0.08'%3E%EF%BE%82%3C/text%3E%3Ctext x='4' y='189' fill-opacity='0.08'%3E%EF%BD%B8%3C/text%3E%3Ctext x='4' y='205' fill-opacity='0.08'%3E%EF%BD%B2%3C/text%3E%3Ctext x='4' y='221' fill-opacity='0.14'%3E%EF%BE%80%3C/text%3E%3Ctext x='4' y='237' fill-opacity='0.24'%3E%EF%BE%8A%3C/text%3E%3Ctext x='24' y='13' fill-opacity='0.08'%3E%EF%BE%8C%3C/text%3E%3Ctext x='24' y='29' fill-opacity='0.08'%3E%EF%BE%81%3C/text%3E%3Ctext x='24' y='45' fill-opacity='0.1'%3E%EF%BE%92%3C/text%3E%3Ctext x='24' y='61' fill-opacity='0.2'%3E8%3C/text%3E%3Ctext x='24' y='77' fill-opacity='0.29'%3E%EF%BE%85%3C/text%3E%3Ctext x='24' y='93' fill-opacity='0.39'%3E%EF%BE%9A%3C/text%3E%3Ctext x='24' y='109' fill-opacity='0.48'%3E0%3C/text%3E%3Ctext x='24' y='125' fill-opacity='0.58'%3E3%3C/text%3E%3Ctext x='24' y='141' fill-opacity='0.67'%3E%EF%BE%8B%3C/text%3E%3Ctext x='24' y='157' fill-opacity='0.77'%3E%EF%BD%B9%3C/text%3E%3Ctext x='24' y='173' fill-opacity='0.87'%3E%EF%BE%95%3C/text%3E%3Ctext x='24' y='189' fill-opacity='0.96'%3E%EF%BD%B4%3C/text%3E%3Ctext x='24' y='205' fill-opacity='0.08'%3E%EF%BD%B9%3C/text%3E%3Ctext x='24' y='221' fill-opacity='0.08'%3E9%3C/text%3E%3Ctext x='24' y='237' fill-opacity='0.08'%3E7%3C/text%3E%3Ctext x='44' y='13' fill-opacity='0.08'%3E%EF%BD%BA%3C/text%3E%3Ctext x='44' y='29' fill-opacity='0.08'%3E2%3C/text%3E%3Ctext x='44' y='45' fill-opacity='0.08'%3E%EF%BE%94%3C/text%3E%3Ctext x='44' y='61' fill-opacity='0.11'%3E%EF%BE%95%3C/text%3E%3Ctext x='44' y='77' fill-opacity='0.21'%3E8%3C/text%3E%3Ctext x='44' y='93' fill-opacity='0.3'%3E0%3C/text%3E%3Ctext x='44' y='109' fill-opacity='0.4'%3E%EF%BD%BE%3C/text%3E%3Ctext x='44' y='125' fill-opacity='0.49'%3E%EF%BE%86%3C/text%3E%3Ctext x='44' y='141' fill-opacity='0.59'%3E%EF%BE%94%3C/text%3E%3Ctext x='44' y='157' fill-opacity='0.68'%3E%EF%BD%B8%3C/text%3E%3Ctext x='44' y='173' fill-opacity='0.78'%3E2%3C/text%3E%3Ctext x='44' y='189' fill-opacity='0.87'%3E%EF%BE%9A%3C/text%3E%3Ctext x='44' y='205' fill-opacity='0.97'%3E%EF%BD%B5%3C/text%3E%3Ctext x='44' y='221' fill-opacity='0.08'%3E%EF%BE%84%3C/text%3E%3Ctext x='44' y='237' fill-opacity='0.08'%3E%EF%BE%8C%3C/text%3E%3Ctext x='64' y='13' fill-opacity='0.96'%3E%EF%BE%90%3C/text%3E%3Ctext x='64' y='29' fill-opacity='0.08'%3E%EF%BE%9A%3C/text%3E%3Ctext x='64' y='45' fill-opacity='0.08'%3E%EF%BE%98%3C/text%3E%3Ctext x='64' y='61' fill-opacity='0.08'%3E%EF%BD%BA%3C/text%3E%3Ctext x='64' y='77' fill-opacity='0.08'%3E0%3C/text%3E%3Ctext x='64' y='93' fill-opacity='0.08'%3E8%3C/text%3E%3Ctext x='64' y='109' fill-opacity='0.1'%3E%EF%BE%8C%3C/text%3E%3Ctext x='64' y='125' fill-opacity='0.2'%3E9%3C/text%3E%3Ctext x='64' y='141' fill-opacity='0.29'%3E%EF%BE%92%3C/text%3E%3Ctext x='64' y='157' fill-opacity='0.39'%3E%EF%BE%86%3C/text%3E%3Ctext x='64' y='173' fill-opacity='0.48'%3E%EF%BD%B2%3C/text%3E%3Ctext x='64' y='189' fill-opacity='0.58'%3E%EF%BE%8D%3C/text%3E%3Ctext x='64' y='205' fill-opacity='0.67'%3E%EF%BE%88%3C/text%3E%3Ctext x='64' y='221' fill-opacity='0.77'%3E%EF%BE%96%3C/text%3E%3Ctext x='64' y='237' fill-opacity='0.87'%3E%EF%BD%B4%3C/text%3E%3Ctext x='84' y='13' fill-opacity='0.08'%3E4%3C/text%3E%3Ctext x='84' y='29' fill-opacity='0.08'%3E%EF%BE%87%3C/text%3E%3Ctext x='84' y='45' fill-opacity='0.08'%3E%EF%BD%B4%3C/text%3E%3Ctext x='84' y='61' fill-opacity='0.08'%3E%EF%BE%90%3C/text%3E%3Ctext x='84' y='77' fill-opacity='0.18'%3E%EF%BE%88%3C/text%3E%3Ctext x='84' y='93' fill-opacity='0.27'%3E%EF%BE%97%3C/text%3E%3Ctext x='84' y='109' fill-opacity='0.37'%3E6%3C/text%3E%3Ctext x='84' y='125' fill-opacity='0.46'%3E%EF%BD%B1%3C/text%3E%3Ctext x='84' y='141' fill-opacity='0.56'%3E%EF%BE%8B%3C/text%3E%3Ctext x='84' y='157' fill-opacity='0.65'%3E%EF%BE%80%3C/text%3E%3Ctext x='84' y='173' fill-opacity='0.75'%3E%EF%BD%B8%3C/text%3E%3Ctext x='84' y='189' fill-opacity='0.84'%3E%EF%BE%95%3C/text%3E%3Ctext x='84' y='205' fill-opacity='0.94'%3E%EF%BD%BE%3C/text%3E%3Ctext x='84' y='221' fill-opacity='0.08'%3E%EF%BE%80%3C/text%3E%3Ctext x='84' y='237' fill-opacity='0.08'%3E%EF%BE%93%3C/text%3E%3Ctext x='104' y='13' fill-opacity='0.08'%3E%EF%BD%B4%3C/text%3E%3Ctext x='104' y='29' fill-opacity='0.08'%3E%EF%BE%82%3C/text%3E%3Ctext x='104' y='45' fill-opacity='0.08'%3E%EF%BD%B5%3C/text%3E%3Ctext x='104' y='61' fill-opacity='0.08'%3E7%3C/text%3E%3Ctext x='104' y='77' fill-opacity='0.09'%3E%EF%BE%82%3C/text%3E%3Ctext x='104' y='93' fill-opacity='0.19'%3E%EF%BD%BD%3C/text%3E%3Ctext x='104' y='109' fill-opacity='0.28'%3E4%3C/text%3E%3Ctext x='104' y='125' fill-opacity='0.38'%3E%EF%BE%98%3C/text%3E%3Ctext x='104' y='141' fill-opacity='0.47'%3E%EF%BE%95%3C/text%3E%3Ctext x='104' y='157' fill-opacity='0.57'%3E%EF%BE%94%3C/text%3E%3Ctext x='104' y='173' fill-opacity='0.66'%3E%EF%BE%95%3C/text%3E%3Ctext x='104' y='189' fill-opacity='0.76'%3E%EF%BD%B9%3C/text%3E%3Ctext x='104' y='205' fill-opacity='0.85'%3E%EF%BE%81%3C/text%3E%3Ctext x='104' y='221' fill-opacity='0.95'%3E%EF%BE%9C%3C/text%3E%3Ctext x='104' y='237' fill-opacity='0.08'%3E%EF%BE%84%3C/text%3E%3C/svg%3E") 0 0 / 120px 240px repeat;
	--sk-motif-o: 0.16;
	--sk-tile: 240px;
	--sk-dx: 0px;
	--sk-dy: 240px;
	--sk-drift: 6s;
	--sk-body: 'Share Tech Mono', monospace;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="matrix_resurrections"],
.skin-mini.is-light[data-skin="matrix_resurrections"] {
	--sk-a1: #059669;
	--sk-a2: #047857;
	--sk-deco: radial-gradient(80% 50% at 50% 0%, rgba(5,150,105,0.12), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="matrix_resurrections"]:not(.text-center),
body[data-skin-template="matrix_resurrections"] #content,
body[data-skin-template="matrix_resurrections"] .modal {
	font-family: 'Share Tech Mono', monospace !important;
}

/* dune_arrakis */
body[data-skin-template="dune_arrakis"],
.skin-mini[data-skin="dune_arrakis"] {
	--sk-a1: #d97706;
	--sk-a2: #0091ff;
	--sk-display: 'Cinzel', serif;
	--sk-deco: radial-gradient(80% 50% at 80% -10%, rgba(217,119,6,0.2), transparent 70%), radial-gradient(60% 50% at 20% 100%, rgba(251,191,36,0.08), transparent 70%), radial-gradient(35% 35% at 0% 0%, rgba(0,145,255,0.06), transparent 70%);
	--sk-display-track: 1px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='150' viewBox='0 0 420 150'%3E%3Cpath d='M0,30 L0,30 L10,32.09 L20,34.13 L30,36.07 L40,37.89 L50,39.52 L60,40.95 L70,42.12 L80,43.03 L90,43.65 L100,43.96 L110,43.96 L120,43.65 L130,43.03 L140,42.12 L150,40.95 L160,39.52 L170,37.89 L180,36.07 L190,34.13 L200,32.09 L210,30 L220,27.91 L230,25.87 L240,23.93 L250,22.11 L260,20.48 L270,19.05 L280,17.88 L290,16.97 L300,16.35 L310,16.04 L320,16.04 L330,16.35 L340,16.97 L350,17.88 L360,19.05 L370,20.48 L380,22.11 L390,23.93 L400,25.87 L410,27.91 L420,30' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='1'/%3E%3Cpath d='M0,75 L0,75 L10,77.95 L20,80.63 L30,82.82 L40,84.31 L50,84.97 L60,84.75 L70,83.66 L80,81.8 L90,79.34 L100,76.49 L110,73.51 L120,70.66 L130,68.2 L140,66.34 L150,65.25 L160,65.03 L170,65.69 L180,67.18 L190,69.37 L200,72.05 L210,75 L220,77.95 L230,80.63 L240,82.82 L250,84.31 L260,84.97 L270,84.75 L280,83.66 L290,81.8 L300,79.34 L310,76.49 L320,73.51 L330,70.66 L340,68.2 L350,66.34 L360,65.25 L370,65.03 L380,65.69 L390,67.18 L400,69.37 L410,72.05 L420,75' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.7'/%3E%3Cpath d='M0,120 L0,120 L10,122.38 L20,124.72 L30,126.94 L40,129.01 L50,130.88 L60,132.51 L70,133.86 L80,134.89 L90,135.6 L100,135.96 L110,135.96 L120,135.6 L130,134.89 L140,133.86 L150,132.51 L160,130.88 L170,129.01 L180,126.94 L190,124.72 L200,122.38 L210,120 L220,117.62 L230,115.28 L240,113.06 L250,110.99 L260,109.12 L270,107.49 L280,106.14 L290,105.11 L300,104.4 L310,104.04 L320,104.04 L330,104.4 L340,105.11 L350,106.14 L360,107.49 L370,109.12 L380,110.99 L390,113.06 L400,115.28 L410,117.62 L420,120' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='0.5'/%3E%3C/svg%3E") 0 0 / 420px 150px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 210px 210px repeat;
	--sk-motif-o: 0.12;
	--sk-tile: 420px;
	--sk-dx: -420px;
	--sk-dy: 0px;
	--sk-drift: 150s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="dune_arrakis"],
.skin-mini.is-light[data-skin="dune_arrakis"] {
	--sk-a1: #b45309;
	--sk-a2: #0369a1;
	--sk-deco: radial-gradient(80% 50% at 80% -10%, rgba(180,83,9,0.2), transparent 70%), radial-gradient(60% 50% at 20% 100%, rgba(251,191,36,0.08), transparent 70%), radial-gradient(35% 35% at 0% 0%, rgba(3,105,161,0.06), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="dune_arrakis"]:not(.text-center),
body[data-skin-template="dune_arrakis"] #content,
body[data-skin-template="dune_arrakis"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* batman_gotham */
body[data-skin-template="batman_gotham"],
.skin-mini[data-skin="batman_gotham"] {
	--sk-a1: #ff0033;
	--sk-a2: #94a3b8;
	--sk-display: 'Russo One', sans-serif;
	--sk-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='170' viewBox='0 0 640 170'%3E%3Cg fill='rgba(0,0,0,0.55)'%3E%3Crect x='0' y='70' width='22' height='100'/%3E%3Crect x='10.0' y='56' width='2' height='14'/%3E%3Crect x='24' y='99' width='52' height='71'/%3E%3Crect x='49.0' y='85' width='2' height='14'/%3E%3Crect x='80' y='96' width='22' height='74'/%3E%3Crect x='90.0' y='82' width='2' height='14'/%3E%3Crect x='102' y='113' width='40' height='57'/%3E%3Crect x='146' y='101' width='40' height='69'/%3E%3Crect x='186' y='103' width='28' height='67'/%3E%3Crect x='199.0' y='89' width='2' height='14'/%3E%3Crect x='216' y='92' width='34' height='78'/%3E%3Crect x='254' y='89' width='22' height='81'/%3E%3Crect x='264.0' y='75' width='2' height='14'/%3E%3Crect x='280' y='100' width='34' height='70'/%3E%3Crect x='296.0' y='86' width='2' height='14'/%3E%3Crect x='314' y='71' width='40' height='99'/%3E%3Crect x='333.0' y='57' width='2' height='14'/%3E%3Crect x='358' y='111' width='28' height='59'/%3E%3Crect x='386' y='83' width='40' height='87'/%3E%3Crect x='430' y='97' width='28' height='73'/%3E%3Crect x='462' y='105' width='40' height='65'/%3E%3Crect x='481.0' y='91' width='2' height='14'/%3E%3Crect x='502' y='46' width='52' height='124'/%3E%3Crect x='554' y='44' width='28' height='126'/%3E%3Crect x='567.0' y='30' width='2' height='14'/%3E%3Crect x='584' y='90' width='52' height='80'/%3E%3Crect x='609.0' y='76' width='2' height='14'/%3E%3C/g%3E%3Cg fill='rgba(255,210,122,1)'%3E%3Crect x='11' y='87' width='2.4' height='3'/%3E%3Crect x='4' y='141' width='2.4' height='3'/%3E%3Crect x='11' y='141' width='2.4' height='3'/%3E%3Crect x='42' y='116' width='2.4' height='3'/%3E%3Crect x='63' y='125' width='2.4' height='3'/%3E%3Crect x='70' y='143' width='2.4' height='3'/%3E%3Crect x='56' y='152' width='2.4' height='3'/%3E%3Crect x='91' y='104' width='2.4' height='3'/%3E%3Crect x='91' y='158' width='2.4' height='3'/%3E%3Crect x='127' y='121' width='2.4' height='3'/%3E%3Crect x='127' y='130' width='2.4' height='3'/%3E%3Crect x='171' y='127' width='2.4' height='3'/%3E%3Crect x='150' y='154' width='2.4' height='3'/%3E%3Crect x='204' y='111' width='2.4' height='3'/%3E%3Crect x='190' y='147' width='2.4' height='3'/%3E%3Crect x='241' y='118' width='2.4' height='3'/%3E%3Crect x='241' y='145' width='2.4' height='3'/%3E%3Crect x='241' y='163' width='2.4' height='3'/%3E%3Crect x='265' y='106' width='2.4' height='3'/%3E%3Crect x='265' y='115' width='2.4' height='3'/%3E%3Crect x='258' y='142' width='2.4' height='3'/%3E%3Crect x='284' y='108' width='2.4' height='3'/%3E%3Crect x='298' y='108' width='2.4' height='3'/%3E%3Crect x='305' y='126' width='2.4' height='3'/%3E%3Crect x='346' y='97' width='2.4' height='3'/%3E%3Crect x='346' y='106' width='2.4' height='3'/%3E%3Crect x='318' y='115' width='2.4' height='3'/%3E%3Crect x='332' y='124' width='2.4' height='3'/%3E%3Crect x='346' y='160' width='2.4' height='3'/%3E%3Crect x='390' y='109' width='2.4' height='3'/%3E%3Crect x='390' y='118' width='2.4' height='3'/%3E%3Crect x='390' y='127' width='2.4' height='3'/%3E%3Crect x='411' y='127' width='2.4' height='3'/%3E%3Crect x='397' y='136' width='2.4' height='3'/%3E%3Crect x='390' y='145' width='2.4' height='3'/%3E%3Crect x='397' y='145' width='2.4' height='3'/%3E%3Crect x='434' y='114' width='2.4' height='3'/%3E%3Crect x='480' y='113' width='2.4' height='3'/%3E%3Crect x='487' y='122' width='2.4' height='3'/%3E%3Crect x='473' y='140' width='2.4' height='3'/%3E%3Crect x='548' y='54' width='2.4' height='3'/%3E%3Crect x='513' y='63' width='2.4' height='3'/%3E%3Crect x='527' y='63' width='2.4' height='3'/%3E%3Crect x='534' y='63' width='2.4' height='3'/%3E%3Crect x='527' y='72' width='2.4' height='3'/%3E%3Crect x='534' y='81' width='2.4' height='3'/%3E%3Crect x='548' y='81' width='2.4' height='3'/%3E%3Crect x='520' y='90' width='2.4' height='3'/%3E%3Crect x='527' y='90' width='2.4' height='3'/%3E%3Crect x='548' y='90' width='2.4' height='3'/%3E%3Crect x='506' y='99' width='2.4' height='3'/%3E%3Crect x='534' y='99' width='2.4' height='3'/%3E%3Crect x='541' y='99' width='2.4' height='3'/%3E%3Crect x='541' y='126' width='2.4' height='3'/%3E%3Crect x='548' y='126' width='2.4' height='3'/%3E%3Crect x='527' y='144' width='2.4' height='3'/%3E%3Crect x='506' y='162' width='2.4' height='3'/%3E%3Crect x='527' y='162' width='2.4' height='3'/%3E%3Crect x='548' y='162' width='2.4' height='3'/%3E%3Crect x='558' y='61' width='2.4' height='3'/%3E%3Crect x='558' y='88' width='2.4' height='3'/%3E%3Crect x='565' y='124' width='2.4' height='3'/%3E%3Crect x='595' y='107' width='2.4' height='3'/%3E%3Crect x='602' y='107' width='2.4' height='3'/%3E%3Crect x='616' y='116' width='2.4' height='3'/%3E%3Crect x='595' y='125' width='2.4' height='3'/%3E%3Crect x='609' y='125' width='2.4' height='3'/%3E%3Crect x='616' y='143' width='2.4' height='3'/%3E%3Crect x='602' y='161' width='2.4' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 640px 170px repeat-x, radial-gradient(80% 40% at 50% 100%, rgba(255,0,51,0.14), transparent 70%), radial-gradient(40% 40% at 70% 0%, rgba(148,163,184,0.06), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.45) 100%);
	--sk-display-track: 0.4px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cline x1='29.07' y1='69.9' x2='28.06' y2='82.51' stroke='%23000' stroke-opacity='0.47' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='138.48' y1='31' x2='137.23' y2='46.62' stroke='%23000' stroke-opacity='0.44' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='194.88' y1='98.22' x2='193.69' y2='113.16' stroke='%23000' stroke-opacity='0.59' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='165.61' y1='73.56' x2='163.76' y2='96.65' stroke='%23000' stroke-opacity='0.57' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='51.94' y1='180.61' x2='51.09' y2='191.27' stroke='%23000' stroke-opacity='0.94' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='66.37' y1='148' x2='64.99' y2='165.29' stroke='%23000' stroke-opacity='0.36' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='12.25' y1='19.52' x2='11.3' y2='31.35' stroke='%23000' stroke-opacity='0.43' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='54.25' y1='43.81' x2='52.55' y2='64.99' stroke='%23000' stroke-opacity='0.63' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='35.17' y1='6.59' x2='33.52' y2='27.17' stroke='%23000' stroke-opacity='0.69' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='185.22' y1='29.49' x2='184.16' y2='42.82' stroke='%23000' stroke-opacity='0.96' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='54.54' y1='-14.82' x2='52.46' y2='11.15' stroke='%23000' stroke-opacity='0.67' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='54.54' y1='185.18' x2='52.46' y2='211.15' stroke='%23000' stroke-opacity='0.67' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='143.88' y1='31.57' x2='142.01' y2='54.97' stroke='%23000' stroke-opacity='0.73' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='103.53' y1='4.33' x2='101.85' y2='25.31' stroke='%23000' stroke-opacity='0.68' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='72.49' y1='-16.17' x2='70.44' y2='9.39' stroke='%23000' stroke-opacity='0.83' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='72.49' y1='183.83' x2='70.44' y2='209.39' stroke='%23000' stroke-opacity='0.83' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='24.52' y1='-3.67' x2='23.7' y2='6.51' stroke='%23000' stroke-opacity='0.8' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='24.52' y1='196.33' x2='23.7' y2='206.51' stroke='%23000' stroke-opacity='0.8' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='143.59' y1='80.45' x2='142.23' y2='97.47' stroke='%23000' stroke-opacity='0.46' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='73.52' y1='49.62' x2='71.77' y2='71.45' stroke='%23000' stroke-opacity='0.69' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='149.72' y1='144.79' x2='148.32' y2='162.36' stroke='%23000' stroke-opacity='0.68' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
	--sk-motif-o: 0.16;
	--sk-ink: linear-gradient(180deg, #e2e8f0, #64748b);
	--sk-tile: 200px;
	--sk-dx: 0px;
	--sk-dy: 200px;
	--sk-drift: 2.2s;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="batman_gotham"],
.skin-mini.is-light[data-skin="batman_gotham"] {
	--sk-a1: #b91c1c;
	--sk-a2: #475569;
	--sk-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='170' viewBox='0 0 640 170'%3E%3Cg fill='rgba(30,41,59,0.1)'%3E%3Crect x='0' y='70' width='22' height='100'/%3E%3Crect x='10.0' y='56' width='2' height='14'/%3E%3Crect x='24' y='99' width='52' height='71'/%3E%3Crect x='49.0' y='85' width='2' height='14'/%3E%3Crect x='80' y='96' width='22' height='74'/%3E%3Crect x='90.0' y='82' width='2' height='14'/%3E%3Crect x='102' y='113' width='40' height='57'/%3E%3Crect x='146' y='101' width='40' height='69'/%3E%3Crect x='186' y='103' width='28' height='67'/%3E%3Crect x='199.0' y='89' width='2' height='14'/%3E%3Crect x='216' y='92' width='34' height='78'/%3E%3Crect x='254' y='89' width='22' height='81'/%3E%3Crect x='264.0' y='75' width='2' height='14'/%3E%3Crect x='280' y='100' width='34' height='70'/%3E%3Crect x='296.0' y='86' width='2' height='14'/%3E%3Crect x='314' y='71' width='40' height='99'/%3E%3Crect x='333.0' y='57' width='2' height='14'/%3E%3Crect x='358' y='111' width='28' height='59'/%3E%3Crect x='386' y='83' width='40' height='87'/%3E%3Crect x='430' y='97' width='28' height='73'/%3E%3Crect x='462' y='105' width='40' height='65'/%3E%3Crect x='481.0' y='91' width='2' height='14'/%3E%3Crect x='502' y='46' width='52' height='124'/%3E%3Crect x='554' y='44' width='28' height='126'/%3E%3Crect x='567.0' y='30' width='2' height='14'/%3E%3Crect x='584' y='90' width='52' height='80'/%3E%3Crect x='609.0' y='76' width='2' height='14'/%3E%3C/g%3E%3Cg fill='rgba(255,210,122,0.3)'%3E%3Crect x='11' y='87' width='2.4' height='3'/%3E%3Crect x='4' y='141' width='2.4' height='3'/%3E%3Crect x='11' y='141' width='2.4' height='3'/%3E%3Crect x='42' y='116' width='2.4' height='3'/%3E%3Crect x='63' y='125' width='2.4' height='3'/%3E%3Crect x='70' y='143' width='2.4' height='3'/%3E%3Crect x='56' y='152' width='2.4' height='3'/%3E%3Crect x='91' y='104' width='2.4' height='3'/%3E%3Crect x='91' y='158' width='2.4' height='3'/%3E%3Crect x='127' y='121' width='2.4' height='3'/%3E%3Crect x='127' y='130' width='2.4' height='3'/%3E%3Crect x='171' y='127' width='2.4' height='3'/%3E%3Crect x='150' y='154' width='2.4' height='3'/%3E%3Crect x='204' y='111' width='2.4' height='3'/%3E%3Crect x='190' y='147' width='2.4' height='3'/%3E%3Crect x='241' y='118' width='2.4' height='3'/%3E%3Crect x='241' y='145' width='2.4' height='3'/%3E%3Crect x='241' y='163' width='2.4' height='3'/%3E%3Crect x='265' y='106' width='2.4' height='3'/%3E%3Crect x='265' y='115' width='2.4' height='3'/%3E%3Crect x='258' y='142' width='2.4' height='3'/%3E%3Crect x='284' y='108' width='2.4' height='3'/%3E%3Crect x='298' y='108' width='2.4' height='3'/%3E%3Crect x='305' y='126' width='2.4' height='3'/%3E%3Crect x='346' y='97' width='2.4' height='3'/%3E%3Crect x='346' y='106' width='2.4' height='3'/%3E%3Crect x='318' y='115' width='2.4' height='3'/%3E%3Crect x='332' y='124' width='2.4' height='3'/%3E%3Crect x='346' y='160' width='2.4' height='3'/%3E%3Crect x='390' y='109' width='2.4' height='3'/%3E%3Crect x='390' y='118' width='2.4' height='3'/%3E%3Crect x='390' y='127' width='2.4' height='3'/%3E%3Crect x='411' y='127' width='2.4' height='3'/%3E%3Crect x='397' y='136' width='2.4' height='3'/%3E%3Crect x='390' y='145' width='2.4' height='3'/%3E%3Crect x='397' y='145' width='2.4' height='3'/%3E%3Crect x='434' y='114' width='2.4' height='3'/%3E%3Crect x='480' y='113' width='2.4' height='3'/%3E%3Crect x='487' y='122' width='2.4' height='3'/%3E%3Crect x='473' y='140' width='2.4' height='3'/%3E%3Crect x='548' y='54' width='2.4' height='3'/%3E%3Crect x='513' y='63' width='2.4' height='3'/%3E%3Crect x='527' y='63' width='2.4' height='3'/%3E%3Crect x='534' y='63' width='2.4' height='3'/%3E%3Crect x='527' y='72' width='2.4' height='3'/%3E%3Crect x='534' y='81' width='2.4' height='3'/%3E%3Crect x='548' y='81' width='2.4' height='3'/%3E%3Crect x='520' y='90' width='2.4' height='3'/%3E%3Crect x='527' y='90' width='2.4' height='3'/%3E%3Crect x='548' y='90' width='2.4' height='3'/%3E%3Crect x='506' y='99' width='2.4' height='3'/%3E%3Crect x='534' y='99' width='2.4' height='3'/%3E%3Crect x='541' y='99' width='2.4' height='3'/%3E%3Crect x='541' y='126' width='2.4' height='3'/%3E%3Crect x='548' y='126' width='2.4' height='3'/%3E%3Crect x='527' y='144' width='2.4' height='3'/%3E%3Crect x='506' y='162' width='2.4' height='3'/%3E%3Crect x='527' y='162' width='2.4' height='3'/%3E%3Crect x='548' y='162' width='2.4' height='3'/%3E%3Crect x='558' y='61' width='2.4' height='3'/%3E%3Crect x='558' y='88' width='2.4' height='3'/%3E%3Crect x='565' y='124' width='2.4' height='3'/%3E%3Crect x='595' y='107' width='2.4' height='3'/%3E%3Crect x='602' y='107' width='2.4' height='3'/%3E%3Crect x='616' y='116' width='2.4' height='3'/%3E%3Crect x='595' y='125' width='2.4' height='3'/%3E%3Crect x='609' y='125' width='2.4' height='3'/%3E%3Crect x='616' y='143' width='2.4' height='3'/%3E%3Crect x='602' y='161' width='2.4' height='3'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 640px 170px repeat-x, radial-gradient(80% 40% at 50% 100%, rgba(185,28,28,0.14), transparent 70%), radial-gradient(40% 40% at 70% 0%, rgba(148,163,184,0.06), transparent 70%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.05) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #334155, #0f172a);
}
body[data-skin-template="batman_gotham"]:not(.text-center),
body[data-skin-template="batman_gotham"] #content,
body[data-skin-template="batman_gotham"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* star_wars_mandalorian */
body[data-skin-template="star_wars_mandalorian"],
.skin-mini[data-skin="star_wars_mandalorian"] {
	--sk-a1: #f59e0b;
	--sk-a2: #e2e8f0;
	--sk-display: 'Orbitron', sans-serif;
	--sk-deco: radial-gradient(80% 45% at 50% 110%, rgba(245,158,11,0.12), transparent 70%), linear-gradient(135deg, rgba(226,232,240,0.05), transparent 40%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.4) 100%);
	--sk-display-track: 0.8px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='129' cy='222.76' r='0.46' fill-opacity='0.53'/%3E%3Ccircle cx='12.78' cy='168.95' r='0.53' fill-opacity='0.48'/%3E%3Ccircle cx='212.85' cy='14.2' r='0.51' fill-opacity='0.48'/%3E%3Ccircle cx='211.01' cy='123.61' r='0.84' fill-opacity='0.93'/%3E%3Ccircle cx='59.76' cy='115.92' r='0.52' fill-opacity='0.84'/%3E%3Ccircle cx='5.16' cy='196.79' r='0.64' fill-opacity='0.68'/%3E%3Ccircle cx='48.47' cy='242.26' r='0.62' fill-opacity='0.59'/%3E%3Ccircle cx='243.99' cy='155.04' r='0.63' fill-opacity='0.42'/%3E%3Ccircle cx='236.78' cy='186.57' r='0.84' fill-opacity='0.67'/%3E%3Ccircle cx='239.65' cy='33.15' r='0.66' fill-opacity='0.86'/%3E%3Ccircle cx='170.78' cy='161.34' r='0.86' fill-opacity='0.6'/%3E%3Ccircle cx='145.42' cy='111.59' r='1.06' fill-opacity='0.45'/%3E%3Ccircle cx='66.67' cy='81.78' r='0.51' fill-opacity='0.71'/%3E%3Ccircle cx='150.34' cy='17.78' r='0.58' fill-opacity='0.91'/%3E%3Ccircle cx='70.08' cy='174.25' r='0.69' fill-opacity='0.37'/%3E%3Ccircle cx='252.58' cy='164.67' r='0.57' fill-opacity='0.68'/%3E%3Ccircle cx='77.31' cy='206.04' r='0.42' fill-opacity='0.58'/%3E%3Ccircle cx='164.34' cy='191.23' r='0.47' fill-opacity='0.29'/%3E%3Ccircle cx='118.11' cy='153.48' r='0.72' fill-opacity='0.29'/%3E%3Ccircle cx='69.5' cy='182.92' r='0.77' fill-opacity='0.96'/%3E%3Ccircle cx='13.44' cy='160.21' r='0.81' fill-opacity='0.58'/%3E%3Ccircle cx='16.75' cy='98.24' r='0.62' fill-opacity='0.37'/%3E%3Ccircle cx='217.26' cy='24.18' r='0.43' fill-opacity='0.93'/%3E%3Ccircle cx='247.68' cy='168.06' r='0.76' fill-opacity='0.79'/%3E%3Ccircle cx='13.97' cy='66.45' r='0.74' fill-opacity='0.34'/%3E%3Ccircle cx='230.26' cy='152.93' r='0.56' fill-opacity='0.7'/%3E%3Ccircle cx='218.58' cy='168.44' r='1.02' fill-opacity='0.83'/%3E%3Ccircle cx='142.93' cy='237.46' r='1.02' fill-opacity='0.46'/%3E%3Ccircle cx='55.78' cy='39.91' r='0.9' fill-opacity='0.86'/%3E%3Ccircle cx='139.59' cy='257.11' r='0.64' fill-opacity='0.42'/%3E%3C/svg%3E") 0 0 / 260px 260px repeat, repeating-linear-gradient(90deg, rgba(0,0,0,0.35) 0 1px, transparent 1px 3px) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.2;
	--sk-ink: linear-gradient(180deg, #f8fafc, #cbd5e1);
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="star_wars_mandalorian"],
.skin-mini.is-light[data-skin="star_wars_mandalorian"] {
	--sk-a1: #b45309;
	--sk-a2: #475569;
	--sk-deco: radial-gradient(80% 45% at 50% 110%, rgba(180,83,9,0.12), transparent 70%), linear-gradient(135deg, rgba(226,232,240,0.4), transparent 40%), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.04) 100%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(180deg, #334155, #475569);
}
body[data-skin-template="star_wars_mandalorian"]:not(.text-center),
body[data-skin-template="star_wars_mandalorian"] #content,
body[data-skin-template="star_wars_mandalorian"] .modal {
	font-family: 'Inter', sans-serif !important;
}

/* razer_chroma */
body[data-skin-template="razer_chroma"],
.skin-mini[data-skin="razer_chroma"] {
	--sk-a1: #00ff00;
	--sk-a2: #00f5ff;
	--sk-display: 'Chakra Petch', sans-serif;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(0,255,0,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(124,58,237,0.14), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(255,0,128,0.08), transparent 70%);
	--sk-display-track: 0.6px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.18' height='54' viewBox='0 0 31.18 54'%3E%3Cpath d='M0,-18 L15.59,-9 L15.59,9 L0,18 L-15.59,9 L-15.59,-9 Z M31.18,-18 L46.77,-9 L46.77,9 L31.18,18 L15.59,9 L15.59,-9 Z M0,36 L15.59,45 L15.59,63 L0,72 L-15.59,63 L-15.59,45 Z M31.18,36 L46.77,45 L46.77,63 L31.18,72 L15.59,63 L15.59,45 Z M15.59,9 L31.18,18 L31.18,36 L15.59,45 L-0,36 L0,18 Z' fill='none' stroke='%23000' stroke-width='1' stroke-opacity='1'/%3E%3C/svg%3E") 0 0 / 31.18px 54px repeat;
	--sk-motif-o: 0.12;
	--sk-ink: linear-gradient(135deg, #39ff14, #00e5ff, #7c3aed);
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="razer_chroma"],
.skin-mini.is-light[data-skin="razer_chroma"] {
	--sk-a1: #16a34a;
	--sk-a2: #0891b2;
	--sk-deco: radial-gradient(55% 50% at 0% 0%, rgba(0,255,0,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(124,58,237,0.14), transparent 70%), radial-gradient(40% 40% at 100% 0%, rgba(255,0,128,0.08), transparent 70%);
	--sk-on-brand: #ffffff;
	--sk-ink: linear-gradient(135deg, #16a34a, #0891b2, #7c3aed);
}

/* steam_deck */
body[data-skin-template="steam_deck"],
.skin-mini[data-skin="steam_deck"] {
	--sk-a1: #66c0f4;
	--sk-a2: #ff6000;
	--sk-display: 'Chakra Petch', sans-serif;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(102,192,244,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(26,159,255,0.08), transparent 70%), radial-gradient(35% 35% at 100% 0%, rgba(255,96,0,0.06), transparent 70%);
	--sk-display-track: 0.3px;
	--sk-motif: repeating-linear-gradient(120deg, rgba(0,0,0,0.5) 0 1px, transparent 1px 10px) 0 0 / 100% 100% no-repeat;
	--sk-motif-o: 0.05;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="steam_deck"],
.skin-mini.is-light[data-skin="steam_deck"] {
	--sk-a1: #0284c7;
	--sk-a2: #ea580c;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(2,132,199,0.16), transparent 70%), radial-gradient(55% 50% at 100% 100%, rgba(26,159,255,0.08), transparent 70%), radial-gradient(35% 35% at 100% 0%, rgba(234,88,12,0.06), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* redbull_racing */
body[data-skin-template="redbull_racing"],
.skin-mini[data-skin="redbull_racing"] {
	--sk-a1: #ffd100;
	--sk-a2: #e10600;
	--sk-display: 'Russo One', sans-serif;
	--sk-deco: linear-gradient(115deg, transparent 62%, rgba(225,6,0,0.12) 62% 64.5%, transparent 64.5% 66%, rgba(255,209,0,0.1) 66% 67.2%, transparent 67.2%), radial-gradient(60% 55% at 0% 100%, rgba(30,65,255,0.2), transparent 70%), radial-gradient(50% 50% at 100% 0%, rgba(225,6,0,0.14), transparent 70%);
	--sk-display-track: 0.4px;
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140' viewBox='0 0 420 140'%3E%3Cline x1='34.06' y1='84.95' x2='153.85' y2='84.95' stroke='%23000' stroke-opacity='0.36' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='-62.04' y1='20.94' x2='5.4' y2='20.94' stroke='%23000' stroke-opacity='0.92' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='357.96' y1='20.94' x2='425.4' y2='20.94' stroke='%23000' stroke-opacity='0.92' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='125.87' y1='95.39' x2='162.76' y2='95.39' stroke='%23000' stroke-opacity='0.9' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='196.43' y1='0.51' x2='239.5' y2='0.51' stroke='%23000' stroke-opacity='0.6' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='-90.03' y1='78.18' x2='27.65' y2='78.18' stroke='%23000' stroke-opacity='0.32' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='329.97' y1='78.18' x2='447.65' y2='78.18' stroke='%23000' stroke-opacity='0.32' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='173.21' y1='11.58' x2='278.55' y2='11.58' stroke='%23000' stroke-opacity='0.8' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='-3.68' y1='0.83' x2='105.99' y2='0.83' stroke='%23000' stroke-opacity='0.36' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='416.32' y1='0.83' x2='525.99' y2='0.83' stroke='%23000' stroke-opacity='0.36' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='94.37' y1='13' x2='155.19' y2='13' stroke='%23000' stroke-opacity='0.84' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='146.54' y1='78.7' x2='241.39' y2='78.7' stroke='%23000' stroke-opacity='0.88' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='234.43' y1='75.43' x2='300.28' y2='75.43' stroke='%23000' stroke-opacity='0.81' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='197.81' y1='135.75' x2='311.08' y2='135.75' stroke='%23000' stroke-opacity='0.47' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='-6.33' y1='129.24' x2='73.94' y2='129.24' stroke='%23000' stroke-opacity='0.93' stroke-width='1.2' stroke-linecap='round'/%3E%3Cline x1='413.67' y1='129.24' x2='493.94' y2='129.24' stroke='%23000' stroke-opacity='0.93' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 420px 140px repeat;
	--sk-motif-o: 0.14;
	--sk-tile: 420px;
	--sk-dx: -420px;
	--sk-dy: 0px;
	--sk-drift: 3s;
	--sk-body: 'Chakra Petch', sans-serif;
	--sk-on-brand: #0b0b0f;
}
[data-bs-theme="light"] body[data-skin-template="redbull_racing"],
.skin-mini.is-light[data-skin="redbull_racing"] {
	--sk-a1: #dc2626;
	--sk-a2: #1e40af;
	--sk-deco: linear-gradient(115deg, transparent 62%, rgba(30,64,175,0.12) 62% 64.5%, transparent 64.5% 66%, rgba(220,38,38,0.1) 66% 67.2%, transparent 67.2%), radial-gradient(60% 55% at 0% 100%, rgba(30,65,255,0.2), transparent 70%), radial-gradient(50% 50% at 100% 0%, rgba(30,64,175,0.14), transparent 70%);
	--sk-on-brand: #ffffff;
}
body[data-skin-template="redbull_racing"]:not(.text-center),
body[data-skin-template="redbull_racing"] #content,
body[data-skin-template="redbull_racing"] .modal {
	font-family: 'Chakra Petch', sans-serif !important;
}

/* apple_cupertino */
body[data-skin-template="apple_cupertino"],
.skin-mini[data-skin="apple_cupertino"] {
	--sk-a1: #0a84ff;
	--sk-a2: #bf5af2;
	--sk-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
	--sk-deco: radial-gradient(55% 55% at 10% 0%, rgba(10,132,255,0.22), transparent 70%), radial-gradient(50% 50% at 95% 30%, rgba(191,90,242,0.2), transparent 70%), radial-gradient(55% 45% at 40% 105%, rgba(255,55,95,0.12), transparent 70%), radial-gradient(40% 40% at 85% 100%, rgba(48,209,88,0.08), transparent 70%);
	--sk-display-track: -0.3px;
	--sk-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="apple_cupertino"],
.skin-mini.is-light[data-skin="apple_cupertino"] {
	--sk-a1: #0071e3;
	--sk-a2: #8944ab;
	--sk-deco: radial-gradient(55% 55% at 10% 0%, rgba(0,113,227,0.14), transparent 70%), radial-gradient(50% 50% at 95% 30%, rgba(137,68,171,0.12), transparent 70%), radial-gradient(55% 45% at 40% 105%, rgba(255,55,95,0.08), transparent 70%), radial-gradient(40% 40% at 85% 100%, rgba(48,209,88,0.06), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* twitch_streamer */
body[data-skin-template="twitch_streamer"],
.skin-mini[data-skin="twitch_streamer"] {
	--sk-a1: #9146ff;
	--sk-a2: #bf94ff;
	--sk-display: 'Inter', sans-serif;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(145,70,255,0.22), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(191,148,255,0.1), transparent 70%), radial-gradient(30% 30% at 100% 0%, rgba(235,4,0,0.05), transparent 70%);
	--sk-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Crect x='72' y='20' width='3' height='3' fill-opacity='0.71'/%3E%3Crect x='108' y='96' width='6' height='6' fill-opacity='0.55'/%3E%3Crect x='48' y='68' width='4' height='4' fill-opacity='0.31'/%3E%3Crect x='156' y='116' width='3' height='3' fill-opacity='0.37'/%3E%3Crect x='124' y='104' width='3' height='3' fill-opacity='0.66'/%3E%3Crect x='108' y='88' width='3' height='3' fill-opacity='0.44'/%3E%3Crect x='8' y='148' width='4' height='4' fill-opacity='0.76'/%3E%3Crect x='156' y='52' width='6' height='6' fill-opacity='0.55'/%3E%3Crect x='92' y='144' width='4' height='4' fill-opacity='0.76'/%3E%3Crect x='80' y='144' width='3' height='3' fill-opacity='0.87'/%3E%3Crect x='44' y='120' width='6' height='6' fill-opacity='0.85'/%3E%3Crect x='40' y='44' width='3' height='3' fill-opacity='0.67'/%3E%3Crect x='132' y='48' width='6' height='6' fill-opacity='0.38'/%3E%3Crect x='24' y='108' width='3' height='3' fill-opacity='0.7'/%3E%3C/svg%3E") 0 0 / 160px 160px repeat;
	--sk-motif-o: 0.22;
	--sk-tile: 160px;
	--sk-dx: 0px;
	--sk-dy: -160px;
	--sk-drift: 30s;
	--sk-body: 'Inter', sans-serif;
	--sk-on-brand: #ffffff;
}
[data-bs-theme="light"] body[data-skin-template="twitch_streamer"],
.skin-mini.is-light[data-skin="twitch_streamer"] {
	--sk-a1: #772ce8;
	--sk-a2: #9146ff;
	--sk-deco: radial-gradient(60% 55% at 0% 0%, rgba(119,44,232,0.22), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(145,70,255,0.1), transparent 70%), radial-gradient(30% 30% at 100% 0%, rgba(235,4,0,0.05), transparent 70%);
	--sk-on-brand: #ffffff;
}

/* ---- Effect assignment ------------------------------------------------ */

body[data-skin-template="synthwave_sunset"] #content::after,
body.text-center[data-skin-template="synthwave_sunset"]::after,
.skin-mini[data-skin="synthwave_sunset"] .mini-main::after {
	inset: 64% -60% 0 -60%;
	top: calc(64% - 46px);
	-webkit-mask: linear-gradient(180deg, transparent 46px, #000 30%);
	mask: linear-gradient(180deg, transparent 46px, #000 30%);
	opacity: 0.5;
	background: linear-gradient(rgba(255,0,127,0.9) 1.5px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(255,0,127,0.9) 1.5px, transparent 1.5px) 0 0 / 46px 46px;
	transform-origin: 50% 46px;
	transform: perspective(520px) rotateX(58deg);
	animation: sk-floor-synthwave_sunset 4s linear infinite;
}
[data-bs-theme="light"] body[data-skin-template="synthwave_sunset"] #content::after,
[data-bs-theme="light"] body.text-center[data-skin-template="synthwave_sunset"]::after,
.skin-mini.is-light[data-skin="synthwave_sunset"] .mini-main::after {
	background: linear-gradient(rgba(192,38,211,0.75) 1.5px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(192,38,211,0.75) 1.5px, transparent 1.5px) 0 0 / 46px 46px;
	opacity: 0.35;
}
.skin-mini[data-skin="synthwave_sunset"] .mini-main::after {
	inset: 64% -60% 0 -60%;
	animation-play-state: paused;
}
.skin-mini[data-skin="synthwave_sunset"]:hover .mini-main::after {
	animation-play-state: running;
}
@keyframes sk-floor-synthwave_sunset {
	from { transform: perspective(520px) rotateX(58deg) translateY(0); }
	to { transform: perspective(520px) rotateX(58deg) translateY(46px); }
}


body[data-skin-template="tron_legacy"] #content::after,
body.text-center[data-skin-template="tron_legacy"]::after,
.skin-mini[data-skin="tron_legacy"] .mini-main::after {
	inset: 66% -60% 0 -60%;
	top: calc(66% - 46px);
	-webkit-mask: linear-gradient(180deg, transparent 46px, #000 30%);
	mask: linear-gradient(180deg, transparent 46px, #000 30%);
	opacity: 0.45;
	background: linear-gradient(rgba(0,229,255,0.85) 1.5px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(0,229,255,0.85) 1.5px, transparent 1.5px) 0 0 / 46px 46px;
	transform-origin: 50% 46px;
	transform: perspective(520px) rotateX(58deg);
	animation: sk-floor-tron_legacy 5s linear infinite;
}
[data-bs-theme="light"] body[data-skin-template="tron_legacy"] #content::after,
[data-bs-theme="light"] body.text-center[data-skin-template="tron_legacy"]::after,
.skin-mini.is-light[data-skin="tron_legacy"] .mini-main::after {
	background: linear-gradient(rgba(0,153,204,0.7) 1.5px, transparent 1.5px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(0,153,204,0.7) 1.5px, transparent 1.5px) 0 0 / 46px 46px;
	opacity: 0.3;
}
.skin-mini[data-skin="tron_legacy"] .mini-main::after {
	inset: 66% -60% 0 -60%;
	animation-play-state: paused;
}
.skin-mini[data-skin="tron_legacy"]:hover .mini-main::after {
	animation-play-state: running;
}
@keyframes sk-floor-tron_legacy {
	from { transform: perspective(520px) rotateX(58deg) translateY(0); }
	to { transform: perspective(520px) rotateX(58deg) translateY(46px); }
}
/* <<< SKIN SIGNATURE LAYER <<< */

/* ==========================================================================
   SKIN BROWSER MODAL & INTERACTIVE TEMPLATE GALLERY
   ========================================================================== */

#settingsModal.modal .modal-dialog.modal-xl {
	max-width: 1240px !important;
	width: 95% !important;
	margin: 1.75rem auto !important;
}

#settingsModal.modal .modal-content {
	background: #0b111e !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 20px !important;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(255, 255, 255, 0.08) !important;
	overflow: hidden !important;
}

#settingsModal.modal .modal-header {
	background: rgba(15, 23, 42, 0.85) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding: 1.15rem 1.75rem !important;
}

#settingsModal.modal .modal-title {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #f8fafc !important;
	letter-spacing: -0.02em !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

#settingsModal.modal .modal-body {
	background: #080d1a !important;
	padding: 1.5rem 1.75rem 2rem 1.75rem !important;
	max-height: calc(88vh - 120px) !important;
	overflow-y: auto !important;
}

/* Scrollbar styling for modal body */
#settingsModal.modal .modal-body::-webkit-scrollbar {
	width: 8px;
}
#settingsModal.modal .modal-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
}
#settingsModal.modal .modal-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 4px;
}
#settingsModal.modal .modal-body::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.25);
}

.skin-browser-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.skin-browser-hero {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 1.5rem auto;
}

.skin-browser-hero h4 {
	font-size: 1.4rem;
	font-weight: 800;
	color: #f8fafc;
	letter-spacing: -0.02em;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.skin-browser-hero p {
	font-size: 0.92rem;
	color: #94a3b8;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Category Filter Bar */
.skin-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.skin-filter-pill {
	padding: 0.45rem 1.15rem;
	border-radius: 50px;
	font-size: 0.85rem;
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(18, 24, 38, 0.8);
	color: #94a3b8;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.skin-filter-pill:hover {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(30, 41, 59, 0.9);
	transform: translateY(-1px);
}

.skin-filter-pill.active {
	background: #2563eb !important;
	color: #ffffff !important;
	border-color: #3b82f6 !important;
	box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
}

/* Template Cards Grid */
.skin-browser-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 1.25rem !important;
	width: 100% !important;
}

@media (min-width: 1200px) {
	.skin-browser-grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

@media (max-width: 1199px) and (min-width: 900px) {
	.skin-browser-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 899px) and (min-width: 600px) {
	.skin-browser-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 599px) {
	.skin-browser-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Individual Skin Card */
.skin-card-item {
	display: flex;
	flex-direction: column;
	background: #0f172a;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
	position: relative;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.skin-card-item:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 20px rgba(255, 255, 255, 0.04);
}

.skin-card-item.is-active {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 1px #3b82f6, 0 10px 30px rgba(37, 99, 235, 0.35) !important;
	background: #111c33;
}

.skin-card-item.is-filtered-out {
	display: none !important;
}

/* Visual Mockup Preview in Top of Card */
.skin-card-preview {
	height: 88px;
	background: #070c18;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	overflow: hidden;
}

/* Cover Art Browser: the card IS the live artwork (borrowed straight from
   mockup_preview.htm's own .player-frame), so it needs a square aspect
   ratio instead of .skin-card-preview's short 88px strip. */
.cover-art-card-preview {
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;
	background: #070c18;
}
.cover-art-card-preview svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}
[data-bs-theme="light"] .cover-art-card-preview {
	background: #e2e8f0;
}
.cover-art-card-item .mockup-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border-radius: 20px;
	border: 1px solid rgba(59, 130, 246, 0.3);
	background: rgba(59, 130, 246, 0.15);
	color: var(--brand-primary);
	white-space: nowrap;
}
.cover-art-themed-toggle {
	margin: 6px 0;
}
.cover-art-themed-toggle .form-check-input {
	cursor: pointer;
}
.cover-art-themed-toggle .form-check-label {
	color: var(--text-muted);
	cursor: pointer;
}

/* Card Content / Body */
.skin-card-body {
	padding: 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.65rem;
}

.skin-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.skin-card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #f8fafc;
	margin: 0;
	line-height: 1.3;
}

.skin-card-badge {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.22rem 0.55rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #cbd5e1 !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.skin-card-desc {
	font-size: 0.82rem;
	color: #94a3b8;
	line-height: 1.45;
	margin: 0;
	flex: 1;
	min-height: 2.8em;
}

.skin-card-swatches {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.55rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	margin-top: 0.25rem;
}

.skin-swatch-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}

.skin-swatch-list {
	display: flex;
	align-items: center;
	gap: 5px;
}

.skin-swatch-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	display: inline-block;
}

.skin-card-actions {
	margin-top: auto;
	padding-top: 0.35rem;
}

.skin-btn-apply {
	width: 100%;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.52rem 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	transition: all 0.2s ease;
}

.skin-btn-apply:hover:not(.active) {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.skin-btn-apply.active {
	background: #10b981 !important;
	border-color: #10b981 !important;
	color: #ffffff !important;
	cursor: default;
	pointer-events: none;
}

/* Skin Browser toolbar: search + dark/light preview switch */
.skin-browser-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: -0.75rem 0 1.5rem 0;
}
.skin-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 320px;
	margin: 0;
}
.skin-search .bi {
	position: absolute;
	left: 0.9rem;
	color: #64748b;
	font-size: 0.85rem;
	pointer-events: none;
}
.skin-search input {
	width: 100%;
	padding: 0.45rem 1rem 0.45rem 2.3rem;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(18, 24, 38, 0.8);
	color: #f8fafc;
	font-size: 0.85rem;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.skin-search input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
.skin-mode-toggle {
	display: inline-flex;
	padding: 3px;
	border-radius: 50px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(18, 24, 38, 0.8);
}
.skin-mode-toggle button {
	border: 0;
	background: transparent;
	color: #94a3b8;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.32rem 0.9rem;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.skin-mode-toggle button.active {
	background: #2563eb;
	color: #ffffff;
}
.skin-browser-empty {
	text-align: center;
	color: #94a3b8;
	padding: 2.5rem 0;
	font-size: 0.95rem;
}

/* Live skin cards: the card itself carries the skin's tokens (it is a
   .skin-mini), so its title, hover glow and active ring are in that skin's
   own face and colour. */
.skin-card-item.skin-mini .skin-card-title {
	font-family: var(--sk-display);
	letter-spacing: var(--sk-display-track);
}
.skin-card-item.skin-mini:hover {
	border-color: color-mix(in srgb, var(--brand-primary) 70%, transparent);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 26px color-mix(in srgb, var(--brand-primary) 28%, transparent);
}
.skin-card-item.skin-mini.is-active {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 1px var(--brand-primary), 0 10px 30px color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
}
.skin-card-item.skin-mini .skin-card-desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.skin-active-ribbon {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: none;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 50px;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--brand-primary-gradient);
	color: var(--sk-on-brand, #ffffff);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.skin-card-item.is-active .skin-active-ribbon {
	display: inline-flex;
}

/* Light Mode Overrides for Skin Browser */
[data-bs-theme="light"] #settingsModal.modal .modal-content,
body.light-mode #settingsModal.modal .modal-content {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="light"] #settingsModal.modal .modal-header,
body.light-mode #settingsModal.modal .modal-header {
	background: #f8fafc !important;
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

[data-bs-theme="light"] #settingsModal.modal .modal-title,
body.light-mode #settingsModal.modal .modal-title {
	color: #0f172a !important;
}

[data-bs-theme="light"] #settingsModal.modal .modal-body,
body.light-mode #settingsModal.modal .modal-body {
	background: #f1f5f9 !important;
}

[data-bs-theme="light"] .skin-browser-hero h4,
body.light-mode .skin-browser-hero h4 {
	color: #0f172a;
}

[data-bs-theme="light"] .skin-browser-hero p,
body.light-mode .skin-browser-hero p {
	color: #64748b;
}

[data-bs-theme="light"] .skin-card-item,
body.light-mode .skin-card-item {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="light"] .skin-card-item:hover,
body.light-mode .skin-card-item:hover {
	border-color: rgba(0, 0, 0, 0.18);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="light"] .skin-card-item.is-active,
body.light-mode .skin-card-item.is-active {
	background: #eff6ff;
	border-color: #2563eb !important;
	box-shadow: 0 0 0 1px #2563eb, 0 8px 24px rgba(37, 99, 235, 0.2) !important;
}

[data-bs-theme="light"] .skin-card-preview,
body.light-mode .skin-card-preview {
	background: #e2e8f0;
	border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .skin-card-title,
body.light-mode .skin-card-title {
	color: #0f172a;
}

[data-bs-theme="light"] .skin-card-badge,
body.light-mode .skin-card-badge {
	background: rgba(0, 0, 0, 0.06) !important;
	color: #475569 !important;
	border-color: rgba(0, 0, 0, 0.06);
}

[data-bs-theme="light"] .skin-card-desc,
body.light-mode .skin-card-desc {
	color: #64748b;
}

[data-bs-theme="light"] .skin-card-swatches,
body.light-mode .skin-card-swatches {
	border-top-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .skin-search input,
body.light-mode .skin-search input,
[data-bs-theme="light"] .skin-mode-toggle,
body.light-mode .skin-mode-toggle {
	background: #ffffff;
	border-color: #cbd5e1;
	color: #0f172a;
}

[data-bs-theme="light"] .skin-mode-toggle button:not(.active),
body.light-mode .skin-mode-toggle button:not(.active) {
	color: #475569;
}

[data-bs-theme="light"] .skin-filter-pill,
body.light-mode .skin-filter-pill {
	background: #ffffff;
	border-color: #cbd5e1;
	color: #475569;
}

[data-bs-theme="light"] .skin-filter-pill:hover,
body.light-mode .skin-filter-pill:hover {
	background: #e2e8f0;
	color: #0f172a;
}

/* --- Player loading ----------------------------------------------------
   While a track loads: a soft sheen sweeps over the cover and a short
   light runs along its lower edge, both in the skin's accent (--sk-a1/2,
   the default theme's --color-primary without a skin). Lives inside
   #cover, so it follows the cover's shape on every skin and never hides
   the artwork or the animated cover art. */
#cover > #player_loading_animation {
	--pl-a1: var(--sk-a1, var(--color-primary, #3b82f6));
	--pl-a2: var(--sk-a2, var(--pl-a1));
	position: absolute !important;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	animation: pl-fade-in 0.3s ease-out both;
}
#cover > #player_loading_animation::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		transparent 30%,
		color-mix(in srgb, var(--pl-a1) 35%, rgba(255, 255, 255, 0.4)) 50%,
		transparent 70%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	animation: pl-sheen 1.6s ease-in-out infinite;
}
#cover > #player_loading_animation::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--pl-a1), var(--pl-a2), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 4px var(--pl-a1));
	animation: pl-line 1.2s ease-in-out infinite;
}
@keyframes pl-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes pl-sheen {
	from { background-position: 150% 0; }
	to { background-position: -50% 0; }
}
@keyframes pl-line {
	from { background-position: -70% 0; }
	to { background-position: 170% 0; }
}
@media (prefers-reduced-motion: reduce) {
	#cover > #player_loading_animation::before {
		animation: none;
		background: color-mix(in srgb, var(--pl-a1) 12%, transparent);
	}
	#cover > #player_loading_animation::after {
		animation: pl-fade-in 0.9s ease-in-out infinite alternate;
		background: var(--pl-a1);
	}
}

/* --- Listen-in ----------------------------------------------------------
   The speaker among the cover's mode toggles (TS3MusicBot.js initListenIn).
   On: filled in the skin's accent, with a ring that follows the level of
   what the bot sends (--listen-level 0..1, set per frame). Waiting: the
   browser wants a click on this page before it keeps playing - it pulses. */
#rightPanel #player #topcontrols > #listenin,
#topcontrols > #listenin {
	--li-accent: var(--sk-a1, var(--brand-primary, var(--color-primary, #3b82f6)));
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.08s linear, transform 0.2s ease;
}
#rightPanel #player #topcontrols > #listenin.is-on,
#topcontrols > #listenin.is-on {
	color: #ffffff !important;
	background: var(--li-accent) !important;
	box-shadow:
		0 0 0 calc(1px + var(--listen-level, 0) * 5px) color-mix(in srgb, var(--li-accent) 45%, transparent),
		0 0 calc(4px + var(--listen-level, 0) * 10px) color-mix(in srgb, var(--li-accent) 60%, transparent);
}
#rightPanel #player #topcontrols > #listenin.is-waiting,
#topcontrols > #listenin.is-waiting {
	color: #ffffff !important;
	animation: li-waiting 1.4s ease-in-out infinite;
}
@keyframes li-waiting {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--li-accent) 70%, transparent); }
	50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--li-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
	#topcontrols > #listenin.is-waiting {
		animation: none;
		box-shadow: 0 0 0 2px var(--li-accent);
	}
}

/* --- Toasts (bottom left) ------------------------------------------------
   bootstrap-toaster markup, drawn from the skin's tokens only (surface,
   border, text, radius, shadow, accent), so every skin and its light
   variant gets them in its own look. A stripe, the icon disc and the
   progress line carry the status tone; info follows the skin's accent. */
#toastContainer.toast-container {
	padding: 16px !important;
	width: min(380px, calc(100vw - 16px));
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1090;
}
#toastContainer .toast {
	--tn: var(--sk-a1, var(--brand-primary, #3b82f6));
	position: relative;
	width: 100%;
	margin: 0 !important;
	overflow: hidden;
	color: var(--text-main, #e2e8f0) !important;
	background: color-mix(in srgb, var(--surface-bg-card, #1e293b) 94%, transparent) !important;
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08)) !important;
	border-radius: var(--skin-radius-card, 14px) !important;
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35)) !important;
	font-size: 13px;
	transition: opacity 0.22s ease, transform 0.22s ease;
}
#toastContainer .toast.fade:not(.show) {
	transform: translateX(-14px);
}
#toastContainer .toast::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--tn);
}
#toastContainer .toast.toast-status-success { --tn: color-mix(in srgb, #22c55e 75%, var(--sk-a1, #22c55e)); }
#toastContainer .toast.toast-status-info { --tn: var(--sk-a1, var(--brand-primary, #3b82f6)); }
#toastContainer .toast.toast-status-warning { --tn: #f59e0b; }
#toastContainer .toast.toast-status-danger { --tn: #ef4444; }
#toastContainer .toast-header {
	gap: 10px;
	padding: 12px 10px 4px 16px !important;
	color: var(--text-main, #e2e8f0) !important;
	background: transparent !important;
	border: 0 !important;
}
#toastContainer .toast .status-icon {
	width: 28px;
	height: 28px;
	margin: 0 !important;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 15px;
	color: var(--tn) !important;
	background: color-mix(in srgb, var(--tn) 16%, transparent);
}
#toastContainer .toast-title {
	font-family: var(--sk-display, inherit);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.1px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#toastContainer .toast .timer {
	flex-shrink: 0;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted, #94a3b8);
	background: color-mix(in srgb, var(--text-muted, #94a3b8) 12%, transparent);
}
#toastContainer .toast-header .btn-close {
	width: 26px;
	height: 26px;
	margin: 0 !important;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: none !important;
	opacity: 0.75;
	box-shadow: none !important;
}
#toastContainer .toast-header .btn-close i {
	color: var(--text-muted, #94a3b8) !important;
	font-size: 13px;
}
#toastContainer .toast-header .btn-close:hover {
	opacity: 1;
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 10%, transparent) !important;
}
#toastContainer .toast-header .btn-close:hover i {
	color: var(--text-main, #e2e8f0) !important;
}
#toastContainer .toast-body {
	padding: 2px 16px 14px 54px;
	line-height: 1.45;
	color: var(--text-main, #e2e8f0);
	word-break: break-word;
}
#toastContainer .toast-body b {
	color: var(--tn);
}
#toastContainer .toast-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--tn);
	opacity: 0.7;
	transform: scaleX(0);
	transform-origin: left;
}
#toastContainer .toast.has-progress .toast-progress {
	animation: toast-progress var(--toast-ms, 5000ms) linear forwards;
}
#toastContainer .toast:hover .toast-progress {
	animation-play-state: paused;
}
@keyframes toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* --- Header notices -------------------------------------------------------
   The bot's start errors, warnings and hints (TS3MusicBot.js
   renderHeaderNotices): a chip in the free space between the title and the
   status rail, the same height and radius as the rail, tinted by the most
   urgent message; a panel below it lists them all. */
#headerNoticeSlot {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
#headerNoticeSlot .hn-chip {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	max-width: 100%;
	min-width: 0;
	padding: 0 10px 0 12px;
	border-radius: 10px;
	border: 1px solid color-mix(in srgb, var(--tn) 45%, var(--surface-border, transparent));
	background: color-mix(in srgb, var(--tn) 12%, var(--surface-bg-card, #1e293b));
	color: var(--text-main, #e2e8f0);
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
#headerNoticeSlot .hn-chip:hover,
#headerNoticeSlot .hn-chip.is-open {
	border-color: color-mix(in srgb, var(--tn) 70%, transparent);
	background: color-mix(in srgb, var(--tn) 20%, var(--surface-bg-card, #1e293b));
}
#headerNoticeSlot .hn-chip:focus-visible {
	outline: 2px solid var(--tn);
	outline-offset: 2px;
}
.hn-danger { --tn: #ef4444; }
.hn-warning { --tn: #f59e0b; }
.hn-info { --tn: var(--sk-a1, var(--brand-primary, #3b82f6)); }
#headerNoticeSlot .hn-icon,
#headerNoticePanel .hn-icon {
	flex-shrink: 0;
	font-size: 14px;
	color: var(--tn);
}
#headerNoticeSlot .hn-danger .hn-icon {
	animation: hn-pulse 2.4s ease-in-out infinite;
}
@keyframes hn-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
#headerNoticeSlot .hn-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#headerNoticeSlot .hn-count {
	flex-shrink: 0;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	background: color-mix(in srgb, var(--tn) 28%, transparent);
}
#headerNoticeSlot .hn-chevron {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--text-muted, #94a3b8);
	transition: transform 0.2s ease;
}
#headerNoticeSlot .hn-chip.is-open .hn-chevron {
	transform: rotate(180deg);
}
#headerNoticeSlot.is-compact .hn-text,
#headerNoticeSlot.is-compact .hn-chevron {
	display: none;
}
#headerNoticePanel {
	position: fixed;
	z-index: 1060;
	max-height: 60vh;
	overflow: auto;
	padding: 8px;
	color: var(--text-main, #e2e8f0);
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35)), 0 20px 50px rgba(0, 0, 0, 0.3);
	animation: hn-in 0.16s ease-out;
}
#headerNoticePanel[hidden] {
	display: none;
}
@keyframes hn-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
#headerNoticePanel .hn-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px 8px;
	font-family: var(--sk-display, inherit);
	font-size: 13px;
	font-weight: 700;
}
#headerNoticePanel .hn-dismiss-all {
	border: 0;
	background: none;
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--text-muted, #94a3b8);
}
#headerNoticePanel .hn-dismiss-all:hover {
	color: var(--text-main, #e2e8f0);
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 8%, transparent);
}
#headerNoticePanel .hn-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 6px;
	padding: 10px;
	border-radius: var(--skin-radius-sm, 10px);
	background: color-mix(in srgb, var(--tn) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--tn) 28%, transparent);
}
#headerNoticePanel .hn-item .hn-icon {
	margin-top: 1px;
}
#headerNoticePanel .hn-item-text {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.45;
	word-break: break-word;
}
#headerNoticePanel .hn-item-actions {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}
#headerNoticePanel .hn-action {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--text-muted, #94a3b8);
	text-decoration: none;
}
#headerNoticePanel .hn-action:hover {
	color: var(--text-main, #e2e8f0);
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 10%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	#toastContainer .toast,
	#headerNoticePanel {
		transition: none;
		animation: none;
	}
	#headerNoticeSlot .hn-danger .hn-icon {
		animation: none;
	}
}

/* Channel chat: the unread counter as a pill right after the title (the
   old chat.css pushed it 24px down for a 50px bar, below the 42px bar of
   today). White on the skin gradient, the number in the skin color. */
.chatbox__title h5 a .badge {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 8px;
	padding: 0 6px !important;
	vertical-align: 1px;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px !important;
	color: var(--brand-primary, #3b82f6) !important;
	background: #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.chatbox__title h5 a {
	display: inline-flex !important;
	align-items: center;
	max-width: 230px !important;
}

/* --- Connection guard -----------------------------------------------------
   Bot not reachable / busy (TS3MusicBot.js connection guard): the page
   stays visible, dimmed and blurred, under a card in the skin's tokens. */
#connectionGuard {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: color-mix(in srgb, var(--surface-bg-darker, #090d16) 62%, transparent);
	-webkit-backdrop-filter: blur(6px) saturate(0.9);
	backdrop-filter: blur(6px) saturate(0.9);
	animation: cg-fade 0.25s ease-out;
}
#connectionGuard .cg-card {
	--cg-tone: var(--sk-a1, var(--brand-primary, #3b82f6));
	width: min(420px, 100%);
	padding: 28px 28px 24px;
	text-align: center;
	color: var(--text-main, #e2e8f0);
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 16px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35)), 0 30px 80px rgba(0, 0, 0, 0.35);
	animation: cg-rise 0.3s ease-out;
}
#connectionGuard.cg-offline .cg-card {
	--cg-tone: #f59e0b;
}
#connectionGuard .cg-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 28px;
	color: var(--cg-tone);
	background: color-mix(in srgb, var(--cg-tone) 14%, transparent);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--cg-tone) 6%, transparent);
}
#connectionGuard .cg-title {
	margin: 0 0 8px;
	font-family: var(--sk-display, inherit);
	font-size: 18px;
	font-weight: 700;
}
#connectionGuard .cg-text {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-muted, #94a3b8);
}
#connectionGuard .cg-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 12px;
	color: var(--text-muted, #94a3b8);
}
#connectionGuard .cg-dots {
	display: inline-flex;
	gap: 4px;
}
#connectionGuard .cg-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cg-tone);
	animation: cg-dot 1.2s ease-in-out infinite;
}
#connectionGuard .cg-dots i:nth-child(2) { animation-delay: 0.15s; }
#connectionGuard .cg-dots i:nth-child(3) { animation-delay: 0.3s; }
#connectionGuard .cg-retry {
	min-width: 180px;
}
@keyframes cg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes cg-rise {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
@keyframes cg-dot {
	0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	#connectionGuard,
	#connectionGuard .cg-card,
	#connectionGuard .cg-dots i {
		animation: none;
	}
}

/* Header notices: the explanation of a notice (built-in knowledge base,
   help/notices_<lang>.json), opened with its question mark. */
#headerNoticePanel .hn-action.is-active {
	color: var(--tn);
	background: color-mix(in srgb, var(--tn) 16%, transparent);
}
#headerNoticePanel .hn-details {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--tn) 25%, transparent);
}
#headerNoticePanel .hn-details[hidden] {
	display: none;
}
#headerNoticePanel .hn-d-title {
	margin-bottom: 4px;
	font-family: var(--sk-display, inherit);
	font-size: 13px;
	font-weight: 700;
}
#headerNoticePanel .hn-d-desc {
	margin: 0 0 8px;
	color: var(--text-muted, #94a3b8);
}
#headerNoticePanel .hn-d-todo {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--tn);
}
#headerNoticePanel .hn-d-steps {
	margin: 0 0 4px;
	padding-left: 18px;
}
#headerNoticePanel .hn-d-steps li {
	margin-bottom: 3px;
}
#headerNoticePanel .hn-d-steps li::marker {
	color: var(--tn);
	font-weight: 700;
}
#headerNoticePanel .hn-d-note {
	margin: 8px 0 0;
	padding: 7px 9px;
	border-radius: 8px;
	font-size: 12px;
	color: var(--text-main, #e2e8f0);
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 6%, transparent);
}
#connectionGuard .cg-spin {
	animation: cg-spin 1.6s linear infinite;
}
@keyframes cg-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	#connectionGuard .cg-spin {
		animation: none;
	}
}

/* Floating labels: the placeholder stays invisible, the label carries the
   text (the skin placeholder colour above made both show at once). */
body[data-skin-template] .form-floating > .form-control::placeholder,
.form-floating > .form-control::placeholder {
	color: transparent !important;
}

/* --- Login: which password -------------------------------------------- */
.login-help {
	margin-top: 14px;
	text-align: left;
}
.login-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 13px;
	color: var(--text-muted, #94a3b8);
}
.login-help-toggle:hover,
.login-help-toggle[aria-expanded="true"] {
	color: var(--text-main, #e2e8f0);
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 7%, transparent);
}
.login-help-panel {
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	background: color-mix(in srgb, var(--surface-bg-card, #1e293b) 85%, transparent);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-main, #e2e8f0);
	animation: lh-in 0.18s ease-out;
}
.login-help-panel[hidden] {
	display: none;
}
@keyframes lh-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.login-help-intro {
	margin: 0 0 10px;
	color: var(--text-muted, #94a3b8);
}
.login-help-case {
	padding: 9px 10px;
	border-radius: var(--skin-radius-sm, 10px);
	border: 1px solid transparent;
}
.login-help-case + .login-help-case {
	margin-top: 6px;
}
.login-help-case p {
	margin: 4px 0 0 24px;
	color: var(--text-muted, #94a3b8);
	word-break: break-word;
}
.login-help-case .lhc-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}
.login-help-case .lhc-head .bi {
	width: 16px;
	color: var(--sk-a1, var(--brand-primary, #3b82f6));
}
.login-help-case .lhc-this {
	display: none;
	margin-left: auto;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--sk-on-brand, #ffffff);
	background: var(--sk-a1, var(--brand-primary, #3b82f6));
}
.login-help-case.is-this {
	border-color: color-mix(in srgb, var(--sk-a1, var(--brand-primary, #3b82f6)) 40%, transparent);
	background: color-mix(in srgb, var(--sk-a1, var(--brand-primary, #3b82f6)) 9%, transparent);
}
.login-help-case.is-this .lhc-this {
	display: inline-block;
}
.login-help-case.is-this p {
	color: var(--text-main, #e2e8f0);
}

/* --- Settings export / import (beside the save button) ---------------- */
.settings-backup {
	display: inline-flex;
	gap: 6px;
	margin: 14px 14px 0 0;
	vertical-align: top;
}
.settings-backup.is-fixed {
	position: fixed;
	z-index: 15;
	margin: 0;
}
.settings-backup .btn {
	height: 38px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
#settingsImportModal .modal-content {
	color: var(--text-main, #e2e8f0);
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
}
#settingsImportModal .modal-header,
#settingsImportModal .modal-footer {
	border-color: var(--surface-border, rgba(255, 255, 255, 0.08));
}
#settingsImportModal .form-check {
	margin-bottom: 6px;
}
.settings-import-meta {
	margin-bottom: 12px;
	font-size: 12.5px;
	color: var(--text-muted, #94a3b8);
}
.settings-import-note,
.settings-import-warn {
	margin: 12px 0 0;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12.5px;
	background: color-mix(in srgb, var(--text-main, #e2e8f0) 6%, transparent);
}
.settings-import-warn {
	color: #f59e0b;
	background: color-mix(in srgb, #f59e0b 12%, transparent);
}
.settings-import-warn[hidden] {
	display: none;
}
@media (max-width: 1100px) {
	.settings-backup.is-fixed {
		position: static;
	}
	/* same left edge as the save button when it wraps below it */
	.settings-backup {
		margin: 14px 14px 0 14px;
	}
}
/* layoutSettingsBar(): the fixed save bar and the fixed restart group would
   meet (their widths follow the language). First export/import go icon-only
   (title / aria-label keep the names), then the restart group takes a second
   row and the search box below moves down by that row. */
body.settings-bar-compact .settings-backup .btn {
	gap: 0;
	padding: 0 11px;
}
body.settings-bar-compact .settings-backup .btn span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
body.settings-bar-wrap .settings-restart-buttons {
	top: 122px !important;
}
body.settings-bar-wrap #settingsLiveSearchContainer {
	margin-top: 102px !important;
}

/* Source badge on the cover art (web browser, WebStream, SoundStream: no
   cover of their own, the skin cover art stands in). */
#cover > #coverSourceBadge {
	position: absolute !important;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 20px);
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--sk-a1, var(--brand-primary, #3b82f6)) 45%, var(--surface-border, transparent));
	background: color-mix(in srgb, var(--surface-bg-card, #1e293b) 78%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--text-main, #e2e8f0);
	font-family: var(--sk-display, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
#cover > #coverSourceBadge .bi {
	font-size: 14px;
	color: var(--sk-a1, var(--brand-primary, #3b82f6));
}
#cover > #coverSourceBadge span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Web browser (media browser, js/webbrowser.js) ------------------------
   Toolbar, favorites bar and the live view of the bot's browser, from the
   skin's tokens only. The view keeps the page's 16:9 (1280x720), so a click
   maps straight to the page. States (off / start / starting) are cards
   drawn here, no images. */
.wb {
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--text-main, #e2e8f0);
}
.wb:fullscreen {
	padding: 12px;
	background: var(--surface-bg-dark, #0b1120);
	justify-content: center;
}
.wb-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.25));
}
.wb-nav, .wb-meta {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}
.wb-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--skin-radius-sm, 10px);
	background: transparent;
	color: var(--text-muted, #94a3b8);
	font-size: 17px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.wb-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 14%, transparent);
	color: var(--text-main, #e2e8f0);
}
.wb-btn:disabled {
	opacity: 0.35;
	cursor: default;
}
.wb-address {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 6px 0 14px;
	margin: 0;
	background: var(--surface-bg-darker, rgba(0, 0, 0, 0.25));
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: 999px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wb-address:focus-within {
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 70%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-a1, #3b82f6) 18%, transparent);
}
.wb-address-icon {
	color: var(--text-dimmed, #64748b);
	font-size: 14px;
}
.wb-address-icon.wb-secure {
	color: color-mix(in srgb, #22c55e 70%, var(--text-muted, #94a3b8));
}
.wb-url {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--text-main, #e2e8f0);
	font-size: 14px;
}
.wb-url::placeholder {
	color: var(--text-dimmed, #64748b);
}
.wb-star {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--text-muted, #94a3b8);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.wb-star[hidden] {
	display: none;
}
.wb-star:hover {
	background: color-mix(in srgb, #f5b301 14%, transparent);
}
.wb-star:hover, .wb-star--on {
	color: #f5b301;
}
.wb-stats {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	height: 30px;
	margin-right: 4px;
	border-radius: 999px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted, #94a3b8);
	background: var(--surface-bg-darker, rgba(0, 0, 0, 0.2));
	white-space: nowrap;
}
.wb-stats[hidden] {
	display: none;
}
.wb-stats .bi:not(:first-child) {
	margin-left: 6px;
}
.wb-stats--high {
	color: #f59e0b;
}
.wb-power-wrap {
	position: relative;
}
.wb-power:hover:not(:disabled) {
	color: #ef4444;
	background: color-mix(in srgb, #ef4444 14%, transparent);
}
.wb-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	min-width: 280px;
	padding: 6px;
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35));
}
.wb-menu[hidden] {
	display: none;
}
.wb-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--skin-radius-sm, 10px);
	background: transparent;
	color: var(--text-main, #e2e8f0);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}
.wb-menu-item:hover {
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 12%, transparent);
}
.wb-menu-item.wb-clear:hover {
	background: color-mix(in srgb, #ef4444 14%, transparent);
}
.wb-favs {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.wb-favs[hidden] {
	display: none;
}
/* only what fits: the rest is listed under the double chevron */
.wb-favs-list {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 6px;
	overflow: hidden;
	padding: 1px;
}
.wb-fav[hidden] {
	display: none;
}
.wb-favs-more-wrap {
	position: relative;
	flex: none;
}
.wb-favs-more-wrap[hidden] {
	display: none;
}
.wb-favs-more, .wb-favs-edit {
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: 50%;
	background: var(--surface-bg-card, #1e293b);
	color: var(--text-muted, #94a3b8);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.wb-favs-more:hover, .wb-favs-edit:hover {
	color: var(--text-main, #e2e8f0);
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 55%, transparent);
}
.wb-favs-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 31;
	width: 280px;
	max-height: min(60vh, 440px);
	overflow-y: auto;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35));
	scrollbar-width: thin;
}
.wb-favs-menu[hidden] {
	display: none;
}
.wb-fav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 7px 10px;
	border: 0;
	border-radius: var(--skin-radius-sm, 10px);
	background: transparent;
	color: var(--text-main, #e2e8f0);
	text-align: left;
	cursor: pointer;
}
.wb-fav-item:hover {
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 12%, transparent);
}
.wb-fav-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}
.wb-fav-item .wb-fav-title, .wb-fav-host {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wb-fav-item .wb-fav-title {
	font-size: 13px;
}
.wb-fav-host {
	font-size: 11px;
	color: var(--text-dimmed, #64748b);
}
.wb-fav-item .wb-fav-icon {
	flex: none;
}
.wb-fav .wb-fav-title {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* the star's popup (bookmark added / edit) */
.wb-toolbar {
	position: relative;
}
.wb-bm-pop {
	position: absolute;
	top: calc(100% + 8px);
	right: 120px;
	z-index: 32;
	width: 320px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--surface-bg-card, #1e293b);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35));
	animation: wb-pop 0.14s ease-out;
}
@keyframes wb-pop {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
.wb-bm-head {
	font-weight: 600;
	font-size: 14px;
}
.wb-bm-head .bi {
	color: #f5b301;
}
.wb-bm-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--text-muted, #94a3b8);
	margin: 0;
}
.wb-bm-url {
	font-size: 11.5px;
	color: var(--text-dimmed, #64748b);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wb-bm-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.wb-fav {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px 0 6px;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	border-radius: 999px;
	background: var(--surface-bg-card, #1e293b);
	color: var(--text-main, #e2e8f0);
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.wb-fav:hover {
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 55%, transparent);
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 10%, var(--surface-bg-card, #1e293b));
	transform: translateY(-1px);
}
.wb-fav-icon {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6));
	overflow: hidden;
}
.wb-fav-icon::after {
	content: attr(data-letter);
	font-size: 11px;
	font-weight: 700;
	color: var(--sk-on-brand, #fff);
}
.wb-fav-icon img {
	position: absolute;
	inset: 3px;
	width: 16px;
	height: 16px;
	z-index: 1;
}
.wb-fav-icon:has(img) {
	background: #fff;
}
.wb-stage {
	position: relative;
	width: 100%;
	max-width: max(480px, calc((100vh - 250px) * 16 / 9));
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	outline: 0;
	border-radius: var(--skin-radius-card, 14px);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	background:
		radial-gradient(60% 70% at 20% 0%, color-mix(in srgb, var(--sk-a1, #3b82f6) 20%, transparent), transparent 70%),
		radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--sk-a2, #8b5cf6) 16%, transparent), transparent 70%),
		var(--surface-bg-darker, #0b1120);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35));
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wb:fullscreen .wb-stage {
	max-width: calc((100vh - 130px) * 16 / 9);
}
.wb-focused .wb-stage {
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 65%, transparent);
	box-shadow: var(--skin-shadow-card, 0 12px 32px rgba(0, 0, 0, 0.35)), 0 0 0 3px color-mix(in srgb, var(--sk-a1, #3b82f6) 16%, transparent);
}
.wb-view {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	user-select: none;
	transition: opacity 0.25s;
}
.wb-running.wb-has-frame .wb-view {
	opacity: 1;
}
.wb-focus-hint {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.wb-running.wb-has-frame:not(.wb-focused) .wb-stage:hover .wb-focus-hint {
	opacity: 1;
}
.wb-ripple {
	position: absolute;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border-radius: 50%;
	border: 2px solid var(--sk-a1, #3b82f6);
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 25%, transparent);
	pointer-events: none;
	animation: wb-ripple 0.6s ease-out forwards;
}
@keyframes wb-ripple {
	from { transform: scale(0.3); opacity: 1; }
	to { transform: scale(1.4); opacity: 0; }
}
.wb-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.wb-overlay[hidden] {
	display: none;
}
.wb-card {
	max-width: 520px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.wb-card-icon {
	width: 76px;
	height: 76px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	color: var(--sk-on-brand, #fff);
	background: linear-gradient(135deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6));
	box-shadow: 0 14px 40px color-mix(in srgb, var(--sk-a1, #3b82f6) 40%, transparent);
	margin-bottom: 6px;
}
.wb-card-icon--busy i {
	animation: wb-spin 2.4s linear infinite;
}
.wb-card-icon--off {
	background: var(--surface-bg-card, #1e293b);
	color: var(--text-muted, #94a3b8);
	box-shadow: none;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
}
@keyframes wb-spin {
	to { transform: rotate(360deg); }
}
.wb-card-title {
	font-family: var(--sk-display, inherit);
	font-size: 22px;
	font-weight: 700;
}
.wb-card-text {
	color: var(--text-muted, #94a3b8);
	font-size: 14px;
	line-height: 1.5;
	min-height: 1.5em;
}
.wb-card-sites {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 4px 0 8px;
}
.wb-card-sites span {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	color: var(--text-muted, #94a3b8);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	background: color-mix(in srgb, var(--surface-bg-card, #1e293b) 70%, transparent);
}
.wb-start {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 26px;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	color: var(--sk-on-brand, #fff);
	background: linear-gradient(135deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6));
	box-shadow: 0 10px 28px color-mix(in srgb, var(--sk-a1, #3b82f6) 35%, transparent);
	cursor: pointer;
	transition: transform 0.15s, filter 0.15s;
}
.wb-start:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}
.wb-start:disabled {
	opacity: 0.6;
	transform: none;
}
.wb-progress {
	width: 220px;
	height: 4px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--surface-border, rgba(255, 255, 255, 0.08));
}
.wb-progress span {
	display: block;
	width: 40%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6));
	animation: wb-progress 1.3s ease-in-out infinite;
}
@keyframes wb-progress {
	from { transform: translateX(-100%); }
	to { transform: translateX(250%); }
}
#wbFavModal .wb-fav-help {
	color: var(--text-muted, #94a3b8);
	font-size: 13px;
}
#wbFavModal .wb-fav-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
	max-height: 50vh;
	overflow-y: auto;
}
#wbFavModal .wb-fav-row {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) minmax(0, 2fr) 32px 32px;
	align-items: center;
	gap: 6px;
}
#wbFavModal .wb-fav-row .wb-btn {
	width: 32px;
	height: 32px;
	font-size: 14px;
}
#wbFavModal .wb-fav-row--bad input {
	border-color: #ef4444;
}
#wbFavModal .wb-fav-grip {
	color: var(--text-dimmed, #64748b);
}
#wbFavModal .wb-fav-error {
	color: #ef4444;
	font-size: 13px;
	margin: 8px 0 0;
}
@media (max-width: 720px) {
	.wb-toolbar {
		flex-wrap: wrap;
	}
	.wb-address {
		order: 3;
		flex-basis: 100%;
	}
	.wb-meta {
		margin-left: auto;
	}
	.wb-stats {
		display: none;
	}
	.wb-stage {
		max-width: 100%;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wb-card-icon--busy i, .wb-progress span, .wb-ripple {
		animation: none;
	}
}

/* the address bar replaces the media search while the web browser is shown */
body.media-web-mode .media-browser-navbar .media-search-box {
	display: none !important;
}

/* web browser switches (ad blocker, dark mode): the skin's accent while on */
.wb-toggle.wb-toggle--on {
	color: var(--sk-a1, #3b82f6);
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 12%, transparent);
}
.wb-toggle.wb-toggle--on:hover:not(:disabled) {
	color: var(--sk-a1, #3b82f6);
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 20%, transparent);
}
.wb-stats-sub {
	margin-left: 6px;
	padding-left: 6px;
	border-left: 1px solid var(--surface-border, rgba(255, 255, 255, 0.12));
	font-size: 11px;
	color: var(--text-dimmed, #64748b);
}
/* web browser DRM (Widevine) state */
.wb-drm {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	margin-right: 4px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	cursor: default;
	color: var(--text-muted, #94a3b8);
	background: var(--surface-bg-darker, rgba(0, 0, 0, 0.2));
}
.wb-drm[hidden] {
	display: none;
}
.wb-drm--ready {
	color: #22c55e;
	background: color-mix(in srgb, #22c55e 12%, transparent);
}
.wb-drm--installing {
	color: #f59e0b;
	background: color-mix(in srgb, #f59e0b 12%, transparent);
}
.wb-drm--installing .bi {
	animation: wb-drm-pulse 1.4s ease-in-out infinite;
}
@keyframes wb-drm-pulse {
	50% { opacity: 0.35; }
}
.wb-drm--off, .wb-drm--unavailable {
	color: var(--text-dimmed, #64748b);
	text-decoration: line-through;
}
@media (max-width: 720px) {
	.wb-drm span {
		display: none;
	}
}

/* --- Media browser: sources bar, results, loading ---------------------------
   One look for every source (YouTube, SoundCloud, MixCloud, Twitch, their
   playlists and live pages), from the skin's tokens. The render functions
   still set inline heights and font sizes (textfill, equal heights); the
   !important rules below take them back, cards size themselves in the grid. */

/* source pills: icon and label on one center line (Bootstrap Icons sit
   .125em low by default, the colored separators had their own size) */
.media-browser-navbar .button {
	line-height: 1 !important;
}
.media-browser-navbar .button > .bi {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 14px;
}
.media-browser-navbar .button > .bi::before {
	vertical-align: 0 !important;
}
.media-browser-navbar .button > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}
.media-browser-navbar .button > span > i {
	font-size: 12px !important;
	line-height: 1;
	font-style: normal;
}

/* grid / list switch and search: one group at the right end of the bar,
   wrapping as a whole when the sources take the width */
.media-nav-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 0 1 auto;
}
.media-nav-tools .media-search-box {
	margin-left: 0 !important;
}
.media-view-toggle {
	flex: none;
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border-radius: 999px;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	background: var(--surface-bg-darker, rgba(0, 0, 0, 0.2));
}
.media-browser-navbar .media-view-toggle + .media-search-box {
	margin-left: 0 !important;
}
.media-view-btn {
	width: 32px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--text-muted, #94a3b8) !important;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.media-view-btn:hover {
	color: var(--text-main, #e2e8f0) !important;
}
.media-view-btn.active {
	color: var(--sk-on-brand, #fff) !important;
	background: linear-gradient(135deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6));
}
body.media-web-mode .media-view-toggle {
	display: none;
}

/* results grid */
#video-results {
	top: 0 !important;
	margin-top: 4px !important;
	gap: 18px !important;
	padding: 8px 4px 28px !important;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}

/* cards */
.media-browser-card {
	display: flex !important;
	flex-direction: column;
	background: var(--surface-bg-card, #1e293b) !important;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08)) !important;
	box-shadow: var(--skin-shadow-card, 0 8px 24px rgba(0, 0, 0, 0.3)) !important;
}
.media-browser-card[style*="display: none"] {
	display: none !important;
}
.media-browser-card:hover {
	transform: translateY(-3px) !important;
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 45%, var(--surface-border, transparent)) !important;
	box-shadow: var(--skin-shadow-card, 0 8px 24px rgba(0, 0, 0, 0.3)), 0 0 0 1px color-mix(in srgb, var(--sk-a1, #3b82f6) 22%, transparent) !important;
}
.media-browser-card > div:first-child {
	position: relative;
	overflow: hidden;
	background: var(--surface-bg-darker, #0b1120);
}
.media-browser-card > div:first-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
	pointer-events: none;
}
.media-browser-card img.card-img-top {
	display: block;
	border-radius: 0 !important;
	transition: transform 0.35s ease !important;
}
.media-browser-card:hover img.card-img-top {
	transform: scale(1.04);
}
/* the chips on the picture: views / listeners (left), duration or live (right) */
.media-browser-card > div:first-child > span,
.wide-card .col-md-3 > div > span {
	z-index: 1;
	bottom: 8px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	padding: 3px 9px !important;
	border-radius: 999px !important;
	background: rgba(8, 11, 18, 0.72) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}
.media-browser-card > div:first-child > span:not(.duration),
.wide-card .col-md-3 > div > span:not(.duration) {
	left: 8px !important;
}
.media-browser-card > div:first-child > span.duration,
.wide-card .col-md-3 > div > span.duration {
	right: 8px !important;
}
.media-browser-card .card-body {
	flex: 1;
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	column-gap: 8px;
	padding: 14px !important;
}
.media-browser-card .card-body > * {
	grid-column: 1 / -1;
}
.media-browser-card .card-title,
.wide-card .card-title {
	height: auto !important;
	max-height: none !important;
	margin: 0 0 6px !important;
	line-height: 1.35 !important;
}
.media-browser-card .card-title span,
.wide-card .card-title span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--text-main, #e2e8f0) !important;
	font-family: var(--sk-display, inherit);
}
.media-browser-card p.card-text,
.wide-card p.card-text {
	height: auto !important;
	margin: 0 0 12px !important;
	overflow: hidden;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	color: var(--text-muted, #94a3b8) !important;
}
.media-browser-card p.card-text b,
.wide-card p.card-text b {
	font-weight: 500;
	color: var(--text-muted, #94a3b8);
}
.media-browser-card p.card-text span {
	line-height: 1.45 !important;
}
/* the raw address below the uploader was noise; the card itself is the link */
.media-browser-card p.card-text a {
	display: none !important;
}
/* actions: one row at the bottom, the first (play) in the skin's accent */
.media-browser-card .card-body > button {
	grid-column: span 6;
}
.media-browser-card .card-body:has(> button:nth-of-type(2)) > button {
	grid-column: span 3;
}
.media-browser-card .card-body:has(> button:nth-of-type(3)) > button {
	grid-column: span 2;
}
.media-browser-card .card-body > button.btn,
.wide-card .card-body > button.btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 36px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	border-radius: var(--skin-radius-sm, 10px) !important;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1)) !important;
	background: color-mix(in srgb, var(--surface-bg-darker, #0b1120) 70%, transparent) !important;
	color: var(--text-main, #e2e8f0) !important;
	box-shadow: none !important;
	transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
}
.media-browser-card .card-body > button.btn:hover,
.wide-card .card-body > button.btn:hover {
	border-color: color-mix(in srgb, var(--sk-a1, #3b82f6) 55%, transparent) !important;
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 14%, transparent) !important;
	transform: translateY(-1px);
}
.media-browser-card .card-body > button.btn:first-of-type,
.wide-card .card-body > button.btn:first-of-type {
	border-color: transparent !important;
	background: linear-gradient(135deg, var(--sk-a1, #3b82f6), var(--sk-a2, #8b5cf6)) !important;
	color: var(--sk-on-brand, #fff) !important;
}
.media-browser-card .card-body > button.btn:first-of-type:hover,
.wide-card .card-body > button.btn:first-of-type:hover {
	filter: brightness(1.08);
}

/* list view */
#video-results > .wide-card {
	grid-column: 1 / -1;
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	background: var(--surface-bg-card, #1e293b) !important;
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08)) !important;
	border-radius: var(--skin-radius-card, 14px) !important;
	box-shadow: var(--skin-shadow-card, 0 8px 24px rgba(0, 0, 0, 0.3)) !important;
}
#video-results > .wide-card[style*="display: none"] {
	display: none !important;
}
.wide-card .col-md-3 > div {
	position: relative;
	height: 100%;
	background: var(--surface-bg-darker, #0b1120);
}
.wide-card img.img-fluid {
	display: block;
	width: 100%;
	height: 100% !important;
	min-height: 140px;
	object-fit: cover;
	padding: 0 !important;
	border-radius: 0 !important;
	background: var(--surface-bg-darker, #0b1120) !important;
}
.wide-card .card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 20px !important;
}
.wide-card .card-body > button.btn {
	width: 64px !important;
	margin-right: 8px !important;
	display: inline-flex !important;
}
.wide-card .card-body > p.card-text {
	flex: 1;
}
.wide-card .card-text a {
	color: var(--sk-a1, #60a5fa) !important;
}

/* loading: placeholder cards and a spinner, both in the skin's colors */
.media-skeleton {
	border-radius: var(--skin-radius-card, 14px);
	border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
	background: var(--surface-bg-card, #1e293b);
	overflow: hidden;
	padding-bottom: 14px;
}
.media-skeleton-thumb,
.media-skeleton-line {
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--surface-bg-darker, #0b1120) 80%, transparent) 25%,
		color-mix(in srgb, var(--sk-a1, #3b82f6) 16%, var(--surface-bg-darker, #0b1120)) 50%,
		color-mix(in srgb, var(--surface-bg-darker, #0b1120) 80%, transparent) 75%);
	background-size: 300% 100%;
	animation: media-shimmer 1.4s ease-in-out infinite;
}
.media-skeleton-thumb {
	aspect-ratio: 16 / 9;
	margin-bottom: 14px;
}
.media-skeleton-line {
	height: 12px;
	margin: 0 14px 10px;
	border-radius: 6px;
}
.media-skeleton-line.short {
	width: 55%;
}
@keyframes media-shimmer {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}
.ts3-loading {
	display: flex;
	justify-content: center;
	padding: 60px 0;
	grid-column: 1 / -1;
}
.ts3-loading-ring {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--sk-a1, #3b82f6) 20%, transparent);
	border-top-color: var(--sk-a1, #3b82f6);
	animation: ts3-spin 0.8s linear infinite;
}
@keyframes ts3-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.media-skeleton-thumb, .media-skeleton-line, .ts3-loading-ring {
		animation: none;
	}
}
/* live streams: a red dot in the chip (the label is plain text, it is escaped) */
span.duration[data="live"]::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 2px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
	display: inline-block;
}
span.duration[data="live"] {
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* preview on hover: a glass disc with a play sign in the skin's accent, drawn
   on the picture (the click opens the preview). Pure CSS: the old code added
   and removed an icon element on every mouse move, which flickered. */
.play-preview-icon {
	display: none !important;
}
.media-browser-card > div:first-child,
.wide-card .col-md-3 > div {
	cursor: pointer;
}
.media-browser-card > div:first-child::before,
.wide-card .col-md-3 > div::before {
	content: "\f4f4";   /* bi-play-fill */
	font-family: "bootstrap-icons" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 58px;
	height: 58px;
	margin: -29px 0 0 -29px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	background: color-mix(in srgb, var(--sk-a1, #3b82f6) 78%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 6px color-mix(in srgb, var(--sk-a1, #3b82f6) 22%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}
.media-browser-card > div:first-child:hover::before,
.wide-card .col-md-3 > div:hover::before {
	opacity: 1;
	transform: scale(1);
}
.media-browser-card > div:first-child:hover::after {
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.2));
}
@media (prefers-reduced-motion: reduce) {
	.media-browser-card > div:first-child::before,
	.wide-card .col-md-3 > div::before {
		transition: none;
	}
}

/* ==========================================================================
   Server bridge / hub overview (index page of a bridge or hub bot)
   ========================================================================== */
.bridge-hidden {
	display: none !important;
}
.bridge-view {
	--bridge-talk: #22c55e;
	padding: 28px 28px 40px;
	max-width: 1400px;
}
.bridge-view .ts3-loading {
	margin: 80px auto;
}
.bridge-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.bridge-head-title {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.bridge-head-title .bridge-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--text-main);
	letter-spacing: -0.01em;
}
.bridge-head-title p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--text-muted);
}
.bridge-head-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--skin-radius-card, 14px);
	background: var(--brand-primary-gradient, var(--brand-primary));
	color: var(--sk-on-brand, #fff);
	font-size: 22px;
	box-shadow: var(--skin-accent-glow, none);
}
.bridge-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bridge-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--skin-radius-pill, 9999px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	color: var(--text-muted);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.bridge-badge .bi {
	font-size: 14px;
	line-height: 1;
	color: var(--brand-primary);
}
.bridge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-dimmed);
}
.bridge-status.is-on {
	color: var(--text-main);
}
.bridge-status.is-on .bridge-dot {
	background: var(--bridge-talk);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bridge-talk) 25%, transparent);
}
.bridge-status.is-wait .bridge-dot {
	background: #f59e0b;
	animation: bridge-blink 1.4s ease-in-out infinite;
}
.bridge-status.is-off .bridge-dot {
	background: #ef4444;
}
@keyframes bridge-blink {
	50% { opacity: 0.3; }
}

.bridge-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}
.bridge-grid > .bridge-card:first-child {
	grid-column: 1;
	grid-row: 1 / span 20;
	align-self: start;
}
.bridge-grid > .bridge-card:nth-child(n+3) {
	grid-column: 3;
}
.bridge-grid > .bridge-card:nth-child(n+4) {
	margin-top: 16px;
}
.bridge-grid.is-hub {
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 16px;
}
.bridge-grid.is-hub > .bridge-card:nth-child(n) {
	grid-column: auto;
	grid-row: auto;
	align-self: stretch;
	margin-top: 0;
}
.bridge-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--text-dimmed);
	grid-column: 2;
	grid-row: 1;
	min-height: 260px;
}
.bridge-link span {
	flex: 1;
	width: 2px;
	max-height: 90px;
	background: repeating-linear-gradient(180deg, var(--surface-border) 0 6px, transparent 6px 12px);
}
.bridge-link .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	font-size: 16px;
}
.bridge-link.is-on {
	color: var(--brand-primary);
}
.bridge-link.is-on span {
	background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 70%, transparent) 0 6px, transparent 6px 12px);
	background-size: 2px 24px;
	animation: bridge-flow 1.2s linear infinite;
}
.bridge-link.is-on .bi {
	border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
	box-shadow: var(--skin-accent-glow, none);
}
@keyframes bridge-flow {
	to { background-position: 0 24px; }
}

.bridge-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 260px;
	border-radius: var(--skin-radius-card, 14px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	box-shadow: var(--skin-shadow-card, none);
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.bridge-card.is-local {
	border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--surface-border));
}
.bridge-card.is-talking {
	border-color: color-mix(in srgb, var(--bridge-talk) 55%, transparent);
	box-shadow: var(--skin-shadow-card, none), 0 0 0 1px color-mix(in srgb, var(--bridge-talk) 25%, transparent), 0 0 24px color-mix(in srgb, var(--bridge-talk) 14%, transparent);
}
.bridge-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 76px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--surface-border);
	background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 7%, transparent), transparent);
}
.bridge-platform {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--skin-radius-sm, 8px);
	font-size: 20px;
	line-height: 1;
	color: #fff;
}
.bridge-platform.is-teamspeak {
	background: linear-gradient(135deg, #2580c3, #1b4f8a);
}
.bridge-platform.is-discord {
	background: linear-gradient(135deg, #5865f2, #4149c4);
}
.bridge-card-titles {
	flex: 1;
	min-width: 0;
}
.bridge-server {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bridge-channel {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--text-muted);
	min-width: 0;
}
.bridge-channel .bi {
	flex: none;
	line-height: 1;
}
.bridge-channel span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bridge-card-meta {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
}
.bridge-card-tag,
.bridge-card-format,
.bridge-card-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--skin-radius-pill, 9999px);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.bridge-card-tag {
	background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
	color: var(--brand-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bridge-card-format {
	border: 1px solid var(--surface-border);
	color: var(--text-muted);
}
.bridge-card-count {
	color: var(--text-muted);
	background: var(--surface-bg-darker);
}
.bridge-users {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	max-height: 420px;
}
.bridge-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--skin-radius-sm, 8px);
	transition: background-color 0.2s ease;
}
.bridge-user:hover {
	background: color-mix(in srgb, var(--text-main) 5%, transparent);
}
.bridge-avatar {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--surface-bg-darker);
	border: 1px solid var(--surface-border);
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	transition: box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bridge-user-name {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bridge-wave {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 16px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bridge-wave i {
	width: 3px;
	height: 100%;
	border-radius: 2px;
	background: var(--bridge-talk);
	transform: scaleY(0.3);
}
.bridge-user.is-talking {
	background: color-mix(in srgb, var(--bridge-talk) 9%, transparent);
}
.bridge-user.is-talking .bridge-avatar {
	color: var(--bridge-talk);
	border-color: var(--bridge-talk);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-talk) 35%, transparent);
	animation: bridge-pulse 1.2s ease-out infinite;
}
.bridge-user.is-talking .bridge-wave {
	opacity: 1;
}
.bridge-user.is-talking .bridge-wave i {
	animation: bridge-wave 0.9s ease-in-out infinite;
}
.bridge-user.is-talking .bridge-wave i:nth-child(2) { animation-delay: -0.3s; }
.bridge-user.is-talking .bridge-wave i:nth-child(3) { animation-delay: -0.6s; }
.bridge-user.is-talking .bridge-wave i:nth-child(4) { animation-delay: -0.15s; }
@keyframes bridge-wave {
	0%, 100% { transform: scaleY(0.3); }
	50% { transform: scaleY(1); }
}
@keyframes bridge-pulse {
	0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-talk) 45%, transparent); }
	100% { box-shadow: 0 0 0 7px transparent; }
}
.bridge-empty,
.bridge-placeholder {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 20px;
	text-align: center;
	color: var(--text-dimmed);
	font-size: 13px;
}
.bridge-empty .bi {
	font-size: 22px;
}
.bridge-card.is-placeholder {
	border-style: dashed;
	background: color-mix(in srgb, var(--surface-bg-card) 55%, transparent);
	box-shadow: none;
}
.bridge-placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
	color: var(--brand-primary);
	font-size: 22px;
	margin-bottom: 4px;
}
.bridge-placeholder-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-main);
}
.bridge-placeholder-text {
	max-width: 280px;
	line-height: 1.5;
	color: var(--text-muted);
}
.bridge-card-foot {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 9px 16px;
	border-top: 1px solid var(--surface-border);
	font-size: 11.5px;
	color: var(--text-dimmed);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.bridge-view.is-unreachable .bridge-grid {
	opacity: 0.55;
	filter: grayscale(0.6);
}
@media (max-width: 860px) {
	.bridge-view {
		padding: 18px 16px 32px;
	}
	.bridge-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.bridge-grid > .bridge-card:nth-child(n) {
		grid-column: 1;
		grid-row: auto;
		align-self: stretch;
	}
	.bridge-link {
		grid-column: 1;
		grid-row: auto;
		min-height: 0;
		flex-direction: row;
		height: 48px;
	}
	.bridge-link span {
		height: 2px;
		width: auto;
		max-width: 60px;
		max-height: none;
		background: repeating-linear-gradient(90deg, var(--surface-border) 0 6px, transparent 6px 12px);
	}
	.bridge-link.is-on span {
		animation: none;
		background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 70%, transparent) 0 6px, transparent 6px 12px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.bridge-user.is-talking .bridge-avatar,
	.bridge-user.is-talking .bridge-wave i,
	.bridge-link.is-on span,
	.bridge-status.is-wait .bridge-dot {
		animation: none;
	}
	.bridge-user.is-talking .bridge-wave i {
		transform: scaleY(0.8);
	}
}

/* Bridge / hub bots: hidden from the first paint (html.ts3-bridge-mode, set
   in TS3MusicBot.js from the last visit's mode) instead of after the
   bridgeorhub answer */
html.ts3-bridge-mode #rightPanel,
html.ts3-bridge-mode #storageSpaceBar,
html.ts3-bridge-mode #settings_player_restart,
html.ts3-bridge-mode #cookies_settings,
html.ts3-bridge-mode #teamspeakServerDescription,
html.ts3-bridge-mode #permissionSettings,
html.ts3-bridge-mode #settings_avatar_mode_field,
html.ts3-bridge-mode #settings_avatar_layout_field,
html.ts3-bridge-mode #settings_avatar_frame_field,
html.ts3-bridge-mode #settings_avatar_artwork_field,
html.ts3-bridge-mode #settings_cover_online_search_field,
html.ts3-bridge-mode #settingsForm tr:has(textarea[name="radio_admin_list"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="welcome_sound_say_language"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="youtube_proxy"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="channel_notifications_enable"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="send_radio_infos"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="sendclickablelinks"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="autostart"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="repeat"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="initial_volume"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="idleplay"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="nowplayingdisabled"]),
html.ts3-bridge-mode #settingsForm tr:has(input[name="speaknowplaying"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="index.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="radio.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="playlist.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="youtube.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="queue.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="chat.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="advanced.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="history.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="webstream.htm"]),
html.ts3-bridge-mode #leftPanel li.nav-item:not(.bridge-home-entry):has(> a[href="soundstream.htm"]) {
	display: none !important;
}
html.ts3-bridge-mode #main {
	padding-right: 0 !important;
}

/* server bridge view: controls (admins), users who are not bridged, connection stats */
.bridge-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--surface-border);
	background: color-mix(in srgb, var(--surface-bg-darker) 45%, transparent);
}
.bridge-controls button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--skin-radius-sm, 8px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.bridge-controls button:hover {
	color: var(--text-main);
	border-color: var(--surface-border-hover, var(--brand-primary));
}
.bridge-controls.is-muted .bridge-mute {
	color: #ef4444;
	border-color: color-mix(in srgb, #ef4444 45%, transparent);
	background: color-mix(in srgb, #ef4444 10%, transparent);
}
.bridge-controls .bridge-disconnect:hover {
	color: #ef4444;
	border-color: color-mix(in srgb, #ef4444 45%, transparent);
}
.bridge-volume-label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-dimmed);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.bridge-volume {
	width: 100%;
	accent-color: var(--brand-primary);
	cursor: pointer;
}
.bridge-volume:disabled {
	opacity: 0.4;
	cursor: default;
}
.bridge-volume-value {
	flex: none;
	min-width: 44px;
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}
.bridge-card.is-muted .bridge-users {
	opacity: 0.55;
}
.bridge-user.is-excluded .bridge-user-name {
	color: var(--text-dimmed);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--text-dimmed) 60%, transparent);
}
.bridge-excluded {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-dimmed);
	white-space: nowrap;
}
.bridge-user.is-excluded.is-talking {
	background: color-mix(in srgb, var(--text-dimmed) 10%, transparent);
}
.bridge-user.is-excluded.is-talking .bridge-avatar {
	color: var(--text-muted);
	border-color: var(--text-dimmed);
	box-shadow: none;
	animation: none;
}
.bridge-user.is-excluded .bridge-wave i {
	background: var(--text-dimmed);
}
.bridge-card-foot {
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.bridge-foot-address,
.bridge-foot-stats {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bridge-foot-stats:empty {
	display: none;
}
.bridge-badge-stats span:empty::before {
	content: "\2026";
}

/* server bridge view: listen / talk from the browser */
.bridge-voice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	max-width: 1400px;
	margin: 20px 28px 0;
	padding: 12px 16px;
	border-radius: var(--skin-radius-card, 14px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	box-shadow: var(--skin-shadow-card, none);
}
.bridge-voice button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--skin-radius-pill, 9999px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-darker);
	color: var(--text-main);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bridge-voice button .bi {
	font-size: 15px;
	line-height: 1;
}
.bridge-voice button:hover:not(:disabled) {
	border-color: var(--surface-border-hover, var(--brand-primary));
}
.bridge-voice button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.bridge-voice.is-listening .bridge-voice-listen {
	background: var(--brand-primary-gradient, var(--brand-primary));
	border-color: transparent;
	color: var(--sk-on-brand, #fff);
}
.bridge-voice.is-talking .bridge-voice-talk {
	background: #16a34a;
	border-color: transparent;
	color: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 30%, transparent);
}
.bridge-voice-level {
	width: 70px;
	height: 6px;
	border-radius: 3px;
	background: var(--surface-bg-darker);
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.bridge-voice.is-talking .bridge-voice-level {
	opacity: 1;
}
.bridge-voice-level span {
	display: block;
	height: 100%;
	width: 0;
	background: #22c55e;
	transition: width 0.08s linear;
}
.bridge-voice-volume {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--text-muted);
}
.bridge-voice-volume input {
	width: 110px;
	accent-color: var(--brand-primary);
}
.bridge-voice-status,
.bridge-voice-web {
	font-size: 12.5px;
	color: var(--text-muted);
}
.bridge-voice-web {
	margin-left: auto;
}
@media (max-width: 860px) {
	.bridge-voice {
		margin: 16px 16px 0;
	}
	.bridge-voice-web {
		margin-left: 0;
		flex-basis: 100%;
	}
}
.bridge-platform.is-web {
	background: var(--brand-primary-gradient, var(--brand-primary));
}

/* header of a bridge / hub bot: no music storage; a hub has no voice client (mode, query) or client name either */
html.ts3-bridge-mode #header-status-cluster .hslot[data-slot="storage"],
html.ts3-hub-mode #header-status-cluster .hslot[data-slot="mode"],
html.ts3-hub-mode #header-status-cluster .hslot[data-slot="query"],
html.ts3-hub-mode #header-status-cluster .hslot[data-slot="client"] {
	display: none !important;
}
/* a hub has no channel of its own: no channel switch, no chat commands */
html.ts3-hub-mode #leftPanel li:has(> a[href="channelswitch.htm"]),
html.ts3-hub-mode #leftPanel li:has(> a[href="commandlist.htm"]) {
	display: none !important;
}

/* HTTPS settings: status lines */
.https-status .https-line { margin: 2px 0; line-height: 1.5; }
.https-status .https-line a { word-break: break-all; }
.https-status .spinner-border-sm { vertical-align: -2px; }
.query-health { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--bs-border-color, rgba(128, 128, 128, .35)); border-radius: 6px; }
.query-health .qh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.query-health .qh-explain { margin-bottom: 8px; }
.query-health .qh-table th { width: 30%; font-weight: normal; opacity: .75; }
.query-health .qh-table td, .query-health .qh-table th { background: transparent; word-break: break-word; }

/* DJ mode entry in the menu: "ON" while a DJ has the table */
#leftPanel .dj-entry .dj-entry-on { display: none; margin-left: auto; font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
	padding: 1px 6px; border-radius: 999px; background: #dc2626; color: #fff; box-shadow: 0 0 8px rgba(220, 38, 38, 0.6); }
#leftPanel .dj-entry.is-active .dj-entry-on { display: inline-block; }


/* Advanced page: feature states (advancedsupport.js). The tile above the
   cards sits in the page flow below the search box (whose top margin keeps
   both clear of the fixed save/restart bar) and takes the skin's surface,
   border, radius and text colours instead of Bootstrap's grey alert. The
   state chips are small tinted pills: the state colour blended with the
   skin's accent, on a faint tint of it; bottom-centred inside the card's
   padding (title and icon above stay where they are), hidden on the
   scroll-collapsed .min badge. ".content-settings .card span" sets every
   card span to 14px bold white with !important: the chip outranks it. */
.support-tile {
	margin: 0 18px 8px 18px;
	padding: 14px 18px;
	background: var(--surface-bg-card);
	border: 1px solid var(--surface-border);
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, none);
	color: var(--text-main);
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: break-word;
}
#content .support-tile-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-main);
}
.support-tile .text-muted,
.support-tile .small {
	color: var(--text-muted) !important;
}
/* v2/advanced.css "#content a:link" (fixed #00529b, unreadable on dark skins)
   outranks a plain ".support-tile a". The skin accent pulled 35% towards the
   text colour: lighter on dark skins, darker on light ones, at least 4.6:1 on
   the tile in every skin and mode (the bare accent dropped to 2.5:1). */
#content .support-tile a:link,
#content .support-tile a:visited,
.support-tile a {
	color: var(--brand-primary);
	color: color-mix(in srgb, var(--brand-primary) 65%, var(--text-main));
	text-decoration: underline;
	text-underline-offset: 2px;
}
#content .support-tile a:hover,
.support-tile a:hover {
	color: var(--text-main);
}
.support-tile summary {
	cursor: pointer;
	color: var(--text-muted);
}
.support-tile code {
	color: var(--brand-primary);
	word-break: break-all;
}
.support-tile .support-counts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 6px 0 2px;
}
.support-tile .support-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.support-tile .support-tile-problem {
	color: var(--support-danger, #f87171);
}
.support-tile .support-table-wrap {
	overflow-x: auto;
	margin-top: 4px;
}
.support-tile .support-permissions {
	font-size: 13px;
	margin-bottom: 4px !important;
}
.support-tile .support-permissions th,
.support-tile .support-permissions td {
	overflow-wrap: normal;
	word-break: normal;
}
.support-tile .support-permissions td:nth-child(2) {
	min-width: 180px;
}
.support-badge {
	--support-tone: var(--text-muted);
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 2px 9px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid rgba(148, 163, 184, 0.4);
	border-color: color-mix(in srgb, var(--support-tone) 45%, transparent);
	background: rgba(148, 163, 184, 0.12);
	background: color-mix(in srgb, var(--support-tone) 14%, transparent);
	color: var(--support-tone);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
.support-badge--works { --support-tone: color-mix(in srgb, #4ade80 78%, var(--sk-a1, var(--brand-primary, #4ade80))); }
.support-badge--partial { --support-tone: color-mix(in srgb, #fbbf24 82%, var(--sk-a1, var(--brand-primary, #fbbf24))); }
.support-badge--update { --support-tone: color-mix(in srgb, #f87171 82%, var(--sk-a1, var(--brand-primary, #f87171))); }
.support-badge--unavailable { --support-tone: var(--text-muted, #94a3b8); }
[data-bs-theme="light"] .support-badge--works { --support-tone: color-mix(in srgb, #15803d 82%, var(--sk-a1, var(--brand-primary, #15803d))); }
[data-bs-theme="light"] .support-badge--partial { --support-tone: color-mix(in srgb, #b45309 85%, var(--sk-a1, var(--brand-primary, #b45309))); }
[data-bs-theme="light"] .support-badge--update { --support-tone: color-mix(in srgb, #b91c1c 85%, var(--sk-a1, var(--brand-primary, #b91c1c))); }
[data-bs-theme="light"] .support-tile { --support-danger: #b91c1c; }
.content-settings .card .support-badge-slot {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 9px;
	display: flex;
	justify-content: center;
	pointer-events: auto;
}
.content-settings .card .support-badge-slot .support-badge {
	/* v2/settings.css: ".formTitle span" is a 200x35 table cell */
	display: inline-flex !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: var(--support-tone) !important;
}
.content-settings .card.formTitle.min .support-badge-slot {
	display: none;
}
@media (max-width: 576px) {
	.support-tile {
		margin: 0 12px 8px 12px;
		padding: 12px 14px;
		font-size: 13px;
	}
	.content-settings .card .support-badge-slot {
		bottom: 6px;
		left: 6px;
		right: 6px;
	}
	/* one line in a half-width card; a state too long for it ends in "..." (the chip's tooltip has it in full) */
	.content-settings .card .support-badge-slot .support-badge {
		font-size: 10px !important;
		padding: 1px 6px;
		letter-spacing: 0;
	}
}


/* Channel switcher (channelswitch.htm, js/channelswitch.js). Everything
   takes the skin's tokens (surface, border, text, accent, radius), so it
   follows every skin in dark and light mode. The tree rows are a grid:
   twisty, icon, name/badges/topic, users, action; the depth comes from
   --chsw-depth (indent and the guide lines drawn as a background). State
   tones are the state colour blended with the skin's accent, like the
   advanced page's chips. "#content ul li" (v2/style.css) gives every list
   item a bullet image and padding: the tree resets it. */
.chsw {
	--chsw-step: 20px;
	--chsw-guide: color-mix(in srgb, var(--surface-border, rgba(148, 163, 184, .3)) 85%, transparent);
	--chsw-hover: color-mix(in srgb, var(--brand-primary, #3b82f6) 9%, transparent);
	--chsw-current: color-mix(in srgb, var(--brand-primary, #3b82f6) 16%, transparent);
	--chsw-accent-text: color-mix(in srgb, var(--brand-primary, #3b82f6) 65%, var(--text-main, #fff));
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 24px 32px;
	color: var(--text-main);
	font-size: 14px;
}
#content .chsw ul,
#content .chsw li {
	margin: 0;
	padding: 0;
	width: auto;
	list-style: none;
	background: none;
}
.chsw button {
	font: inherit;
}

/* the header: title, mode, where the bot is */
.chsw-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	padding: 16px 18px;
	margin-bottom: 14px;
	background: var(--surface-bg-card);
	border: 1px solid var(--surface-border);
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, none);
}
.chsw-hero-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--skin-radius-sm, 10px);
	background: var(--brand-primary-gradient, var(--brand-primary));
	color: var(--sk-on-brand, #fff);
	font-size: 22px;
}
.chsw-hero-text {
	flex: 1 1 200px;
	min-width: 0;
}
#content .chsw-title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--text-main);
	font-family: var(--sk-display, inherit);
}
.chsw-mode {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid var(--surface-border);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
}
.chsw-mode[hidden] {
	display: none;
}
.chsw-now {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	min-width: 0;
	max-width: 100%;
}
.chsw-now-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.chsw-now-name {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 5px 12px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, transparent);
	background: var(--chsw-current);
	color: var(--chsw-accent-text);
	font-weight: 700;
	cursor: pointer;
	overflow-wrap: anywhere;
	text-align: left;
}
.chsw-now-name:hover {
	border-color: var(--brand-primary);
}
.chsw-now-name.is-none {
	cursor: default;
	border-color: var(--surface-border);
	background: transparent;
	color: var(--text-muted);
	font-weight: 600;
}
.chsw-now-home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-muted);
	overflow-wrap: anywhere;
}

/* search and tools */
.chsw-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.chsw-search {
	position: relative;
	flex: 1 1 260px;
	min-width: 0;
}
.chsw-search > .bi-search {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
}
#chswSearch {
	width: 100%;
	height: 40px;
	padding: 0 64px 0 38px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	color: var(--text-main);
	font-size: 14px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#chswSearch::placeholder {
	color: var(--text-muted);
	opacity: 1;
}
#chswSearch::-webkit-search-cancel-button {
	display: none;
}
#chswSearch:focus {
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
.chsw-clear {
	position: absolute;
	right: 34px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
}
.chsw-clear:hover {
	color: var(--text-main);
	background: var(--chsw-hover);
}
.chsw-clear[hidden] {
	display: none;
}
.chsw-kbd {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 6px;
	border: 1px solid var(--surface-border);
	border-radius: 5px;
	background: transparent;
	color: var(--text-muted);
	font-size: 11px;
	line-height: 18px;
	box-shadow: none;
}
.chsw-tools {
	display: flex;
	gap: 6px;
}
.chsw-tool {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--skin-radius-sm, 10px);
	border: 1px solid var(--surface-border);
	background: var(--surface-bg-card);
	color: var(--text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.chsw-tool:hover {
	color: var(--text-main);
	border-color: var(--surface-border-hover, var(--brand-primary));
}
.chsw-tool[aria-pressed="true"] {
	color: var(--chsw-accent-text);
	border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
	background: var(--chsw-current);
}
.chsw-tool.is-spinning i {
	animation: chsw-spin .8s linear infinite;
}
@keyframes chsw-spin {
	to { transform: rotate(360deg); }
}

/* notices (refusals, basic list, load errors) */
.chsw-notice {
	--chsw-tone: var(--text-muted);
	margin-bottom: 12px;
	padding: 10px 14px;
	border-radius: var(--skin-radius-sm, 10px);
	border: 1px solid color-mix(in srgb, var(--chsw-tone) 40%, transparent);
	background: color-mix(in srgb, var(--chsw-tone) 10%, transparent);
	color: var(--text-main);
	font-size: 13px;
}
.chsw-notice[hidden] {
	display: none;
}
.chsw-notice--warn {
	--chsw-tone: color-mix(in srgb, #fbbf24 82%, var(--brand-primary, #fbbf24));
}
.chsw-notice-line {
	display: flex;
	gap: 9px;
	align-items: baseline;
}
.chsw-notice-line + .chsw-notice-line {
	margin-top: 4px;
}
.chsw-notice-line > i {
	color: var(--chsw-tone);
}

/* the tree */
#content .chsw-tree {
	padding: 6px;
	background: var(--surface-bg-card);
	border: 1px solid var(--surface-border);
	border-radius: var(--skin-radius-card, 14px);
	box-shadow: var(--skin-shadow-card, none);
	overflow: hidden;
}
.chsw-row,
.chsw-head,
#content .chsw .chsw-users > li,
#content .chsw .chsw-skeleton {
	padding-left: calc(var(--chsw-depth, 0) * var(--chsw-step) + 6px);
	background-image: repeating-linear-gradient(to right, transparent 0, transparent 15px, var(--chsw-guide) 15px, var(--chsw-guide) 16px, transparent 16px, transparent var(--chsw-step));
	background-size: calc(var(--chsw-depth, 0) * var(--chsw-step)) 100%;
	background-position: 6px 0;
	background-repeat: no-repeat;
}
#content .chsw .chsw-users > li {
	padding-left: calc(var(--chsw-depth, 0) * var(--chsw-step) + 34px);
}
.chsw-row {
	position: relative;
	display: grid;
	grid-template-columns: 20px 26px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0 8px;
	min-height: 44px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 8px;
	border-radius: var(--skin-radius-sm, 10px);
	cursor: pointer;
	outline: none;
	transition: background-color .12s ease;
}
.chsw-row:hover {
	background-color: var(--chsw-hover);
}
.chsw-row:focus-visible,
.chsw-head:focus-visible {
	box-shadow: inset 0 0 0 2px var(--brand-primary);
}
.chsw-row.is-current {
	background-color: var(--chsw-current);
}
.chsw-row.is-current::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 3px;
	background: var(--brand-primary);
}
.chsw-row.is-flash {
	animation: chsw-flash 1.2s ease;
}
@keyframes chsw-flash {
	0%, 60% { background-color: color-mix(in srgb, var(--brand-primary) 32%, transparent); }
}
.chsw-twisty {
	display: grid;
	place-items: center;
	width: 20px;
	height: 24px;
	border-radius: 6px;
	color: var(--text-muted);
	font-size: 11px;
	cursor: pointer;
}
.chsw-twisty.is-leaf {
	cursor: inherit;
}
.chsw-twisty i {
	transition: transform .15s ease;
}
[aria-expanded="true"] > .chsw-twisty i {
	transform: rotate(90deg);
}
.chsw-twisty:not(.is-leaf):hover {
	color: var(--text-main);
	background: var(--chsw-hover);
}
.chsw-ico {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	color: var(--text-muted);
	font-size: 15px;
}
.chsw-row.is-current .chsw-ico {
	color: var(--chsw-accent-text);
}
.chsw-row.is-locked .chsw-ico {
	color: color-mix(in srgb, #f59e0b 80%, var(--brand-primary, #f59e0b));
}
.chsw-row.is-full .chsw-ico {
	color: color-mix(in srgb, #f87171 80%, var(--brand-primary, #f87171));
}
.chsw-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.chsw-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	min-width: 0;
}
.chsw-name {
	min-width: 0;
	font-weight: 600;
	color: var(--text-main);
	overflow-wrap: anywhere;
}
.chsw-row.is-current .chsw-name {
	font-weight: 800;
}
.chsw-name em {
	font-style: normal;
	color: var(--text-muted);
}
.chsw-topic {
	font-size: 12px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.chsw mark {
	padding: 0 1px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--brand-primary) 32%, transparent);
	color: inherit;
}
.chsw-node.is-context > .chsw-row .chsw-name,
.chsw-node.is-context > .chsw-head {
	opacity: .62;
}

/* badges */
.chsw-badge {
	--chsw-tone: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid color-mix(in srgb, var(--chsw-tone) 45%, transparent);
	background: color-mix(in srgb, var(--chsw-tone) 13%, transparent);
	color: var(--chsw-tone);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.chsw-badge i {
	font-size: 10px;
}
.chsw-badge--here,
.chsw-badge--self { --chsw-tone: var(--chsw-accent-text); }
.chsw-badge--home { --chsw-tone: color-mix(in srgb, #a78bfa 78%, var(--brand-primary, #a78bfa)); }
.chsw-badge--default { --chsw-tone: color-mix(in srgb, #fbbf24 80%, var(--brand-primary, #fbbf24)); }
.chsw-badge--lock { --chsw-tone: color-mix(in srgb, #f59e0b 82%, var(--brand-primary, #f59e0b)); }
.chsw-badge--full { --chsw-tone: color-mix(in srgb, #f87171 82%, var(--brand-primary, #f87171)); }
.chsw-badge--stage { --chsw-tone: color-mix(in srgb, #60a5fa 78%, var(--brand-primary, #60a5fa)); }
[data-bs-theme="light"] .chsw-badge--home { --chsw-tone: color-mix(in srgb, #6d28d9 85%, var(--brand-primary, #6d28d9)); }
[data-bs-theme="light"] .chsw-badge--default { --chsw-tone: color-mix(in srgb, #a16207 85%, var(--brand-primary, #a16207)); }
[data-bs-theme="light"] .chsw-badge--lock { --chsw-tone: color-mix(in srgb, #b45309 85%, var(--brand-primary, #b45309)); }
[data-bs-theme="light"] .chsw-badge--full { --chsw-tone: color-mix(in srgb, #b91c1c 85%, var(--brand-primary, #b91c1c)); }
[data-bs-theme="light"] .chsw-badge--stage { --chsw-tone: color-mix(in srgb, #1d4ed8 85%, var(--brand-primary, #1d4ed8)); }
[data-bs-theme="light"] .chsw { --chsw-accent-text: color-mix(in srgb, var(--brand-primary, #2563eb) 70%, var(--text-main, #0f172a)); }
.chsw-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	border-radius: var(--skin-radius-pill, 999px);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.chsw-count.has-users {
	color: var(--text-main);
	background: color-mix(in srgb, var(--text-main) 7%, transparent);
}
.chsw-count.is-full {
	color: color-mix(in srgb, #f87171 82%, var(--brand-primary, #f87171));
}
[data-bs-theme="light"] .chsw-count.is-full {
	color: #b91c1c;
}
.chsw-count-max {
	opacity: .7;
}

/* the action: "Move here", the key for a password, the bot's own channel */
.chsw-act {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.chsw-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--skin-radius-pill, 999px);
	border: 1px solid color-mix(in srgb, var(--brand-primary) 50%, transparent);
	background: transparent;
	color: var(--chsw-accent-text);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.chsw-row:hover .chsw-go:not(:disabled),
.chsw-row:focus .chsw-go:not(:disabled),
.chsw-row:focus-within .chsw-go:not(:disabled),
.chsw-row.is-switching .chsw-go,
.chsw-go:hover:not(:disabled) {
	background: var(--brand-primary-gradient, var(--brand-primary));
	border-color: transparent;
	color: var(--sk-on-brand, #fff);
}
.chsw-go:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.chsw-row.is-switching .chsw-go:disabled {
	opacity: 1;
}
.chsw-go .spinner-border-sm {
	width: 13px;
	height: 13px;
	border-width: 2px;
}
.chsw-key {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease;
}
.chsw-row:hover .chsw-key,
.chsw-row:focus .chsw-key,
.chsw-row:focus-within .chsw-key {
	opacity: 1;
}
.chsw-key:hover {
	color: var(--text-main);
	border-color: var(--surface-border);
}
.chsw-here-mark {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	color: var(--chsw-accent-text);
	font-size: 20px;
}
@media (hover: none) {
	.chsw-key {
		opacity: 1;
	}
}

/* the password form below a row */
.chsw-pw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 2px 6px 8px calc(var(--chsw-depth, 0) * var(--chsw-step) + 60px);
	padding: 10px 12px;
	border-radius: var(--skin-radius-sm, 10px);
	border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
	background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
}
.chsw-pw-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-muted);
}
.chsw-pw-input {
	flex: 1 1 160px;
	min-width: 0;
	max-width: 260px;
}
.chsw-pw-cancel {
	color: var(--text-muted);
	background: transparent;
	border: 1px solid var(--surface-border);
}
.chsw-pw-cancel:hover {
	color: var(--text-main);
}
.chsw-pw-error {
	flex-basis: 100%;
	font-size: 12px;
	color: color-mix(in srgb, #f87171 82%, var(--brand-primary, #f87171));
}
[data-bs-theme="light"] .chsw-pw-error {
	color: #b91c1c;
}

/* users in a channel */
.chsw-users > li {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 26px;
	font-size: 13px;
	color: var(--text-muted);
	overflow-wrap: anywhere;
}
.chsw-users > li > i {
	font-size: 12px;
	opacity: .8;
}
.chsw-user.is-self {
	color: var(--chsw-accent-text);
	font-weight: 600;
}
.chsw-user.is-more {
	font-style: italic;
}
.chsw-group[hidden] {
	display: none;
}

/* headers: Discord categories, TeamSpeak spacers */
.chsw-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding-right: 10px;
	border-radius: var(--skin-radius-sm, 10px);
	outline: none;
	cursor: pointer;
	color: var(--text-muted);
	user-select: none;
}
.chsw-head:hover {
	color: var(--text-main);
}
.chsw-node + .chsw-node > .chsw-head {
	margin-top: 8px;
}
.chsw-head-text {
	min-width: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.chsw-head--spacer .chsw-head-text {
	text-transform: none;
	letter-spacing: .02em;
	font-size: 13px;
	color: var(--text-main);
}
.chsw-spacer-line {
	flex: 1 1 auto;
	height: 1px;
	min-width: 12px;
	background: var(--surface-border);
}
.chsw-spacer--left .chsw-spacer-line:first-of-type,
.chsw-spacer--right .chsw-spacer-line:last-of-type {
	flex: 0 0 12px;
}
.chsw-head.is-blank {
	min-height: 22px;
}
.chsw-head--spacer .chsw-twisty.is-leaf {
	display: none;
}

/* loading, empty, footer */
.chsw-skeleton {
	display: flex;
	align-items: center;
	height: 44px;
	padding-right: 12px;
}
.chsw-skeleton span {
	display: block;
	height: 14px;
	width: calc(70% - var(--chsw-depth, 0) * 12%);
	margin-left: 34px;
	border-radius: 7px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--text-main) 7%, transparent) 25%, color-mix(in srgb, var(--text-main) 14%, transparent) 50%, color-mix(in srgb, var(--text-main) 7%, transparent) 75%);
	background-size: 200% 100%;
	animation: chsw-shimmer 1.3s ease-in-out infinite;
}
@keyframes chsw-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}
.chsw-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 20px;
	text-align: center;
	color: var(--text-muted);
}
.chsw-empty > i {
	font-size: 40px;
	color: var(--brand-primary);
	opacity: .75;
}
.chsw-empty--error > i {
	color: color-mix(in srgb, #f87171 82%, var(--brand-primary, #f87171));
}
.chsw-empty-text {
	max-width: 460px;
	color: var(--text-main);
	overflow-wrap: anywhere;
}
.chsw-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 10px;
	padding: 0 4px;
	font-size: 12px;
	color: var(--text-muted);
}
@media (hover: none) {
	.chsw-hint,
	.chsw-kbd {
		display: none;
	}
}
@media (max-width: 767px) {
	.chsw {
		--chsw-step: 14px;
		padding: 14px 12px 24px;
	}
	.chsw-hero {
		padding: 14px;
	}
	.chsw-now {
		align-items: flex-start;
		flex-basis: 100%;
	}
	.chsw-row {
		grid-template-columns: 18px 22px minmax(0, 1fr) auto auto;
		gap: 0 6px;
		padding-right: 4px;
	}
	.chsw-go {
		width: 36px;
		height: 36px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
	}
	.chsw-go-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.chsw-kbd {
		display: none;
	}
	#chswSearch {
		padding-right: 40px;
	}
	.chsw-clear {
		right: 8px;
	}
	.chsw-pw {
		margin-left: 6px;
	}
	.chsw-pw-input {
		max-width: none;
	}
	.chsw-hint {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.chsw *,
	.chsw *::before {
		animation: none !important;
		transition: none !important;
	}
}

/* Web browser idle state (dimmed viewport & floating hint) */
.wb-idle-hint {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: rgba(15, 23, 42, 0.75);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	display: flex;
	align-items: center;
	gap: 6px;
	z-index: 5;
}
.wb-idle .wb-idle-hint {
	opacity: 1;
}
.wb-idle .wb-view {
	opacity: 0.35 !important;
	filter: brightness(0.85);
	transition: opacity 0.4s ease, filter 0.4s ease;
}

/* ==========================================================================
   Update page (update.htm, js/updatepage.js): update status, packages, the
   memory panel (/memorystats), system, Docker, repair and reset.
   Every colour, border, radius and font comes from the skin's tokens
   (--surface-*, --text-*, --brand-primary, --sk-*, --skin-*), the semantic
   ones (ok / warn / bad) tinted toward the skin's accent like .diag-finding.
   All rules sit under #updates_row .upd-page: they win over v2/style.css
   ("#content h2", "a:link", "button:focus") and the old "#updates_row table"
   rules (the page uses no table, .btn, .alert or legend).
   ========================================================================== */
#updates_row.upd-pending > :not(.upd-page) {
	visibility: hidden;
}
#updates_row .upd-page {
	--upd-fg: var(--text-main, #f8fafc);
	/* secondary text, a little toward the main text: some skins' --text-muted is a bright accent
	   (neon_cyber light: a sky blue on near white, 3.8:1) or too faint on tinted boxes */
	--upd-muted: color-mix(in srgb, var(--text-muted, #94a3b8) 72%, var(--upd-fg));
	/* hints stay readable: many skins' --text-dimmed is too faint for 12px text on the card */
	--upd-faint: var(--upd-muted);
	--upd-card: var(--surface-bg-card, #1e293b);
	--upd-panel: var(--surface-bg-dark, var(--upd-card));
	--upd-raise: color-mix(in srgb, var(--upd-fg) 7%, var(--upd-card));
	--upd-line: var(--surface-border, rgba(148, 163, 184, 0.16));
	--upd-accent: var(--brand-primary, #3b82f6);
	--upd-on-accent: var(--sk-on-brand, #ffffff);
	--upd-a1: var(--sk-a1, var(--upd-accent));
	--upd-a2: var(--sk-a2, var(--upd-a1));
	--upd-ok: color-mix(in srgb, #4ade80 78%, var(--upd-a1));
	--upd-warn: color-mix(in srgb, #fbbf24 82%, var(--upd-a1));
	--upd-bad: color-mix(in srgb, #f87171 82%, var(--upd-a1));
	/* the same colours as text: a little toward the main text, readable on the card and on their own tint */
	--upd-ok-text: color-mix(in srgb, var(--upd-ok) 55%, var(--upd-fg));
	--upd-warn-text: color-mix(in srgb, var(--upd-warn) 55%, var(--upd-fg));
	--upd-bad-text: color-mix(in srgb, var(--upd-bad) 55%, var(--upd-fg));
	--upd-accent-text: color-mix(in srgb, var(--upd-accent) 55%, var(--upd-fg));
	--upd-radius: var(--skin-radius-card, 14px);
	--upd-radius-sm: var(--skin-radius-sm, 8px);
	--upd-shadow: var(--skin-shadow-card, none);
	--upd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	/* the parts of the charts: the skin's accents, then hues tinted toward them */
	--upd-c1: var(--upd-accent);
	--upd-c2: var(--upd-a2);
	--upd-c3: color-mix(in srgb, #22d3ee 70%, var(--upd-a1));
	--upd-c4: color-mix(in srgb, #2dd4bf 70%, var(--upd-a1));
	--upd-c5: color-mix(in srgb, #fbbf24 70%, var(--upd-a1));
	--upd-c6: color-mix(in srgb, #f472b6 70%, var(--upd-a1));
	--upd-c7: color-mix(in srgb, #a3e635 70%, var(--upd-a1));
	--upd-c8: color-mix(in srgb, #fb923c 70%, var(--upd-a1));
	--upd-c9: color-mix(in srgb, #818cf8 70%, var(--upd-a1));
	--upd-c10: color-mix(in srgb, #e879f9 70%, var(--upd-a1));
	--upd-rest: color-mix(in srgb, var(--upd-muted) 45%, var(--upd-card));
	container-type: inline-size;
	container-name: upd;
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	min-width: 0;
	padding: 0 0 32px;
	color: var(--upd-fg);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
[data-bs-theme="light"] #updates_row .upd-page {
	--upd-ok: color-mix(in srgb, #15803d 82%, var(--upd-a1));
	--upd-warn: color-mix(in srgb, #b45309 85%, var(--upd-a1));
	--upd-bad: color-mix(in srgb, #b91c1c 85%, var(--upd-a1));
	--upd-c3: color-mix(in srgb, #0891b2 75%, var(--upd-a1));
	--upd-c4: color-mix(in srgb, #0d9488 75%, var(--upd-a1));
	--upd-c5: color-mix(in srgb, #d97706 75%, var(--upd-a1));
	--upd-c6: color-mix(in srgb, #db2777 75%, var(--upd-a1));
	--upd-c7: color-mix(in srgb, #65a30d 75%, var(--upd-a1));
	--upd-c8: color-mix(in srgb, #ea580c 75%, var(--upd-a1));
	--upd-c9: color-mix(in srgb, #4f46e5 75%, var(--upd-a1));
	--upd-c10: color-mix(in srgb, #c026d3 75%, var(--upd-a1));
	--upd-rest: color-mix(in srgb, var(--upd-muted) 40%, var(--upd-card));
}
#updates_row .upd-page *,
#updates_row .upd-page *::before,
#updates_row .upd-page *::after {
	box-sizing: border-box;
}
#updates_row .upd-page :is(button, a, [tabindex]):focus-visible {
	outline: 2px solid var(--upd-accent);
	outline-offset: 2px;
}
#updates_row .upd-num,
#updates_row .upd-page code,
#updates_row .upd-pre {
	font-family: var(--upd-mono);
	font-variant-numeric: tabular-nums;
}
#updates_row .upd-page .upd-box {
	min-width: 0;
	margin: 0;
	padding: 18px 20px;
	background: var(--upd-card);
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius);
	box-shadow: var(--upd-shadow);
	color: var(--upd-fg);
}
#updates_row .upd-page .upd-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 14px;
	margin-bottom: 14px;
}
#updates_row .upd-page .upd-h {
	margin: 0;
	padding: 0;
	color: var(--upd-fg);
	font-family: var(--sk-display, inherit);
	letter-spacing: var(--sk-display-track, normal);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-p {
	margin: 2px 0 0;
	color: var(--upd-muted);
	max-width: 72ch;
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-p b {
	color: var(--upd-fg);
}
#updates_row .upd-page .upd-sub {
	color: var(--upd-muted);
	font-size: 12.5px;
}
#updates_row .upd-page .upd-label {
	color: var(--upd-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
#updates_row .upd-page .upd-foot {
	margin: 10px 0 0;
	color: var(--upd-faint);
	font-size: 12px;
	max-width: 75ch;
}
#updates_row .upd-page .upd-what {
	color: var(--upd-faint);
	font-size: 12px;
}
#updates_row .upd-page .upd-muted {
	color: var(--upd-muted);
}
#updates_row .upd-page .upd-r {
	text-align: right;
	justify-self: end;
}

/* buttons and links that look like buttons */
#updates_row .upd-page .upd-btn,
#updates_row .upd-page a.upd-btn:link,
#updates_row .upd-page a.upd-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 34px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: var(--upd-raise);
	color: var(--upd-fg);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
}
#updates_row .upd-page .upd-btn:hover,
#updates_row .upd-page a.upd-btn:hover {
	border-color: var(--upd-accent);
	color: var(--upd-fg);
	text-decoration: none;
}
#updates_row .upd-page .upd-btn--primary,
#updates_row .upd-page a.upd-btn--primary:link,
#updates_row .upd-page a.upd-btn--primary:visited,
#updates_row .upd-page a.upd-btn--primary:hover {
	background: var(--upd-accent);
	border-color: var(--upd-accent);
	color: var(--upd-on-accent);
}
#updates_row .upd-page .upd-btn--primary:hover {
	background: var(--brand-primary-hover, var(--upd-accent));
}
/* text on the accent: white on dark accents, black on light ones (gold, cyan, mint...),
   where both reach about 4.5:1 (OKLCH lightness ~0.57); older browsers keep --sk-on-brand */
@supports (color: oklch(from red l c h)) {
	#updates_row .upd-page {
		--upd-on-accent: oklch(from var(--upd-accent) clamp(0, (0.57 - l) * 1000, 1) 0 0);
		--upd-on-bad: oklch(from var(--upd-bad) clamp(0, (0.57 - l) * 1000, 1) 0 0);
	}
}
#updates_row .upd-page .upd-btn--danger {
	background: transparent;
	border-color: color-mix(in srgb, var(--upd-bad) 45%, transparent);
	color: var(--upd-bad-text);
}
#updates_row .upd-page .upd-btn--danger:hover {
	background: color-mix(in srgb, var(--upd-bad) 14%, transparent);
	border-color: var(--upd-bad);
	color: var(--upd-bad-text);
}
#updates_row .upd-page .upd-btn--solid-danger,
#updates_row .upd-page .upd-btn--solid-danger:hover {
	background: var(--upd-bad);
	border-color: var(--upd-bad);
	color: var(--upd-on-bad, var(--upd-card));
}
#updates_row .upd-page .upd-btn--sm {
	min-height: 30px;
	padding: 4px 10px;
	font-size: 12.5px;
}
#updates_row .upd-page .upd-btn[disabled],
#updates_row .upd-page .upd-mini[disabled] {
	opacity: 0.5;
	cursor: default;
}
#updates_row .upd-page .upd-mini {
	min-height: 26px;
	margin: 0;
	padding: 2px 9px;
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: transparent;
	color: var(--upd-muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
#updates_row .upd-page .upd-mini:not([disabled]):hover {
	border-color: var(--upd-accent);
	color: var(--upd-fg);
}
#updates_row .upd-page .upd-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
@media (pointer: coarse) {
	#updates_row .upd-page .upd-btn,
	#updates_row .upd-page .upd-btn--sm,
	#updates_row .upd-page .upd-mini,
	#updates_row .upd-page .upd-tabs button {
		min-height: 40px;
	}
}

/* pills */
#updates_row .upd-page .upd-pill {
	--upd-tone-text: color-mix(in srgb, var(--upd-tone) 55%, var(--upd-fg));
	--upd-tone: var(--upd-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: var(--skin-radius-pill, 999px);
	background: color-mix(in srgb, var(--upd-tone) 15%, transparent);
	color: var(--upd-tone-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: 2px;
	white-space: nowrap;
}
#updates_row .upd-page .upd-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
#updates_row .upd-page .upd-pill--ok { --upd-tone: var(--upd-ok); }
#updates_row .upd-page .upd-pill--warn { --upd-tone: var(--upd-warn); }
#updates_row .upd-page .upd-pill--bad { --upd-tone: var(--upd-bad); }
#updates_row .upd-page .upd-pill--idle { --upd-tone: var(--upd-muted); }
#updates_row .upd-page .upd-tr .upd-pill {
	margin-left: 0;
	vertical-align: middle;
}

/* status */
#updates_row .upd-page .upd-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
}
#updates_row .upd-page .upd-status-msg {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
#updates_row .upd-page .upd-status-msg > svg {
	flex-shrink: 0;
}
#updates_row .upd-page .upd-status .upd-h {
	font-size: 16px;
}
#updates_row .upd-page .upd-status.is-ok {
	border-color: color-mix(in srgb, var(--upd-ok) 40%, var(--upd-line));
}
#updates_row .upd-page .upd-status.is-ok svg {
	color: var(--upd-ok-text);
}
#updates_row .upd-page .upd-status.is-new {
	border-color: color-mix(in srgb, var(--upd-accent) 55%, var(--upd-line));
	background: color-mix(in srgb, var(--upd-accent) 10%, var(--upd-card));
}
#updates_row .upd-page .upd-status.is-new svg {
	color: var(--upd-accent-text);
}

/* rows: one grid per list, each row a subgrid, so the columns line up */
#updates_row .upd-page .upd-table {
	display: grid;
	column-gap: 14px;
	min-width: 0;
}
#updates_row .upd-page .upd-tr {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	row-gap: 6px;
	min-width: 0;
	padding: 8px 0;
	border-top: 1px solid var(--upd-line);
}
#updates_row .upd-page .upd-tr:first-child {
	border-top: 0;
}
#updates_row .upd-page .upd-tr > * {
	min-width: 0;
}
#updates_row .upd-page .upd-thead {
	padding-top: 0;
}
#updates_row .upd-page .upd-total {
	font-weight: 600;
}
#updates_row .upd-page .upd-name {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-pkgs { grid-template-columns: minmax(0, 1fr) auto auto; }
#updates_row .upd-page .upd-resets { grid-template-columns: minmax(0, 1fr) auto; }
#updates_row .upd-page .upd-parts { grid-template-columns: minmax(0, 1fr) auto auto auto; }
#updates_row .upd-page .upd-jvm { grid-template-columns: minmax(0, 1fr) auto; }
#updates_row .upd-page .upd-procs { grid-template-columns: minmax(0, 1fr) auto auto auto auto; }
@supports not (grid-template-columns: subgrid) {
	#updates_row .upd-page .upd-pkgs .upd-tr { grid-template-columns: minmax(0, 1fr) 6.5rem 8.5rem; }
	#updates_row .upd-page .upd-resets .upd-tr { grid-template-columns: minmax(0, 1fr) auto; }
	#updates_row .upd-page .upd-parts .upd-tr { grid-template-columns: minmax(0, 1fr) 90px 5.5rem 4.5rem; }
	#updates_row .upd-page .upd-jvm .upd-tr { grid-template-columns: minmax(0, 1fr) 5.5rem; }
	#updates_row .upd-page .upd-procs .upd-tr { grid-template-columns: minmax(0, 1fr) 8rem 5rem 5.5rem 90px; }
}
#updates_row .upd-page .upd-ver-old {
	color: var(--upd-muted);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--upd-muted) 60%, transparent);
}
#updates_row .upd-page .upd-ver-new {
	color: var(--upd-ok-text);
	font-weight: 700;
}
#updates_row .upd-page .upd-act {
	display: flex;
	justify-content: flex-end;
}
#updates_row .upd-page .upd-act.is-asking {
	grid-column: 1 / -1;
}
#updates_row .upd-page .upd-confirm {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	color: var(--upd-muted);
	font-size: 12.5px;
}

/* repair and reset */
#updates_row .upd-page .upd-danger-zone {
	border-color: color-mix(in srgb, var(--upd-bad) 30%, var(--upd-line));
}
#updates_row .upd-page .upd-resets .upd-name {
	display: block;
}
#updates_row .upd-page .upd-hint {
	display: block;
	color: var(--upd-faint);
	font-size: 12px;
}
#updates_row .upd-page .is-severe .upd-reset-name {
	color: var(--upd-bad-text);
	font-weight: 700;
}

/* the memory panel */
#updates_row .upd-page .upd-memory {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
#updates_row .upd-page .upd-memory:empty {
	display: none;
}
#updates_row .upd-page .upd-verdict {
	--upd-tone: var(--upd-ok);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px 18px;
	border-color: color-mix(in srgb, var(--upd-tone) 45%, var(--upd-line));
	background: color-mix(in srgb, var(--upd-tone) 9%, var(--upd-card));
}
#updates_row .upd-page .upd-verdict--warn { --upd-tone: var(--upd-warn); }
#updates_row .upd-page .upd-verdict--bad { --upd-tone: var(--upd-bad); }
#updates_row .upd-page .upd-verdict .upd-h {
	font-size: 16px;
}
#updates_row .upd-page .upd-verdict-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--upd-radius-sm);
	background: color-mix(in srgb, var(--upd-tone) 16%, transparent);
	--upd-tone-text: color-mix(in srgb, var(--upd-tone) 55%, var(--upd-fg));
	color: var(--upd-tone-text);
}
#updates_row .upd-page .upd-figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
#updates_row .upd-page .upd-fig {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 14px 16px;
	background: var(--upd-card);
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius);
	box-shadow: var(--upd-shadow);
}
#updates_row .upd-page .upd-fig--bad {
	border-color: color-mix(in srgb, var(--upd-bad) 45%, var(--upd-line));
}
#updates_row .upd-page .upd-fig-v {
	color: var(--upd-fg);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-fig-v small {
	color: var(--upd-muted);
	font-size: 13px;
	font-weight: 400;
}
#updates_row .upd-page .upd-fig-note {
	color: var(--upd-muted);
	font-size: 12px;
}
#updates_row .upd-page .upd-meter,
#updates_row .upd-page .upd-bar,
#updates_row .upd-page .upd-stack {
	overflow: hidden;
	background: var(--upd-raise);
}
#updates_row .upd-page .upd-meter {
	height: 6px;
	margin-top: 4px;
	border-radius: 3px;
}
#updates_row .upd-page .upd-meter i,
#updates_row .upd-page .upd-bar i,
#updates_row .upd-page .upd-stack i {
	display: block;
	height: 100%;
	transition: width 0.4s ease;
}
#updates_row .upd-page .upd-fill--ok { background: var(--upd-ok); }
#updates_row .upd-page .upd-fill--warn { background: var(--upd-warn); }
#updates_row .upd-page .upd-fill--bad { background: var(--upd-bad); }
#updates_row .upd-page .upd-bar {
	display: inline-block;
	width: 90px;
	height: 6px;
	border-radius: 3px;
	vertical-align: middle;
}
#updates_row .upd-page .upd-stack {
	display: flex;
	height: 18px;
	border-radius: var(--upd-radius-sm);
}
#updates_row .upd-page .upd-stack i + i {
	box-shadow: inset 1px 0 0 var(--upd-card);
}
#updates_row .upd-page .upd-scale {
	display: flex;
	justify-content: space-between;
	margin: 4px 0 6px;
	color: var(--upd-faint);
	font-size: 11px;
}
#updates_row .upd-page .upd-sw {
	display: inline-block;
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 3px;
}
#updates_row .upd-page .upd-c1 { background: var(--upd-c1); }
#updates_row .upd-page .upd-c2 { background: var(--upd-c2); }
#updates_row .upd-page .upd-c3 { background: var(--upd-c3); }
#updates_row .upd-page .upd-c4 { background: var(--upd-c4); }
#updates_row .upd-page .upd-c5 { background: var(--upd-c5); }
#updates_row .upd-page .upd-c6 { background: var(--upd-c6); }
#updates_row .upd-page .upd-c7 { background: var(--upd-c7); }
#updates_row .upd-page .upd-c8 { background: var(--upd-c8); }
#updates_row .upd-page .upd-c9 { background: var(--upd-c9); }
#updates_row .upd-page .upd-c10 { background: var(--upd-c10); }
#updates_row .upd-page .upd-rest { background: var(--upd-rest); }
#updates_row .upd-page .upd-two {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: start;
	gap: 18px;
}
#updates_row .upd-page .upd-two--even {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
#updates_row .upd-page .upd-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
#updates_row .upd-page .upd-gc {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
#updates_row .upd-page .upd-gc > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 12px;
	border-radius: var(--upd-radius-sm);
	background: var(--upd-raise);
}
#updates_row .upd-page .upd-gc b {
	color: var(--upd-fg);
	font-size: 16px;
}

/* the heap over time */
#updates_row .upd-page .upd-chart {
	position: relative;
	min-width: 0;
}
#updates_row .upd-page .upd-svg {
	display: block;
	width: 100%;
	height: auto;
	touch-action: pan-y;
}
#updates_row .upd-page .upd-svg text {
	fill: var(--upd-muted);
	font-family: inherit;
	font-size: 11px;
}
#updates_row .upd-page .upd-grid { stroke: var(--upd-line); stroke-width: 1; }
#updates_row .upd-page .upd-band { fill: var(--upd-bad); fill-opacity: 0.13; }
#updates_row .upd-page .upd-area { fill: var(--upd-c1); fill-opacity: 0.18; stroke: none; }
#updates_row .upd-page .upd-line { fill: none; stroke: var(--upd-c1); stroke-width: 1.6; stroke-linejoin: round; }
#updates_row .upd-page .upd-committed { fill: none; stroke: var(--upd-muted); stroke-width: 1; stroke-dasharray: 3 3; }
#updates_row .upd-page .upd-limit { stroke: var(--upd-bad); stroke-width: 1.4; }
#updates_row .upd-page .upd-tick { stroke: var(--upd-muted); stroke-width: 1.5; }
#updates_row .upd-page .upd-tick-full { stroke: var(--upd-warn); stroke-width: 2.4; }
#updates_row .upd-page .upd-dot { fill: var(--upd-c1); stroke: var(--upd-card); stroke-width: 2; }
#updates_row .upd-page .upd-dot--hover { stroke-width: 0; }
#updates_row .upd-page .upd-cursor { stroke: var(--upd-muted); stroke-width: 1; }
#updates_row .upd-page .upd-tip {
	position: absolute;
	z-index: 5;
	padding: 6px 10px;
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: var(--upd-panel);
	color: var(--upd-fg);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px 18px color-mix(in srgb, #000000 25%, transparent);
}
#updates_row .upd-page .upd-tip span {
	color: var(--upd-muted);
}
#updates_row .upd-page .upd-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px;
	color: var(--upd-muted);
	font-size: 12px;
}
#updates_row .upd-page .upd-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
#updates_row .upd-page .upd-sw--used { background: var(--upd-c1); }
#updates_row .upd-page .upd-sw--line { height: 2px; border-radius: 1px; }
#updates_row .upd-page .upd-sw--committed { background: var(--upd-muted); }
#updates_row .upd-page .upd-sw--limit { background: var(--upd-bad); }
#updates_row .upd-page .upd-sw--tick { width: 3px; background: var(--upd-muted); }
#updates_row .upd-page .upd-sw--full { background: var(--upd-warn); }

/* give it more memory: tabs, code lines */
#updates_row .upd-page .upd-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: var(--upd-radius-sm);
	background: var(--upd-raise);
}
#updates_row .upd-page .upd-tabs button {
	min-height: 32px;
	margin: 0;
	padding: 5px 12px;
	border: 0;
	border-radius: calc(var(--upd-radius-sm) - 2px);
	background: transparent;
	color: var(--upd-muted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
#updates_row .upd-page .upd-tabs button[aria-selected="true"] {
	background: var(--upd-card);
	color: var(--upd-fg);
	font-weight: 600;
	box-shadow: 0 1px 2px color-mix(in srgb, #000000 20%, transparent);
}
#updates_row .upd-page .upd-advice {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 72ch;
	margin-top: 14px;
}
#updates_row .upd-page .upd-advice .upd-p {
	margin: 0;
}
#updates_row .upd-page .upd-code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 8px 8px 12px;
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: var(--upd-panel);
}
#updates_row .upd-page .upd-code code {
	color: var(--upd-fg);
	background: none;
	font-size: 13.5px;
	overflow-wrap: anywhere;
}

/* system, Docker, the old memory text */
#updates_row .upd-page .upd-sys {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#updates_row .upd-page .upd-pre {
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: var(--upd-panel);
	color: var(--upd-fg);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: none;
	box-shadow: none;
}
#updates_row .upd-page .upd-kv {
	display: grid;
	grid-template-columns: minmax(6rem, 34%) minmax(0, 1fr);
	margin: 0;
}
#updates_row .upd-page .upd-kv dt,
#updates_row .upd-page .upd-kv dd {
	margin: 0;
	padding: 7px 0;
	border-top: 1px solid var(--upd-line);
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-kv dt:first-of-type,
#updates_row .upd-page .upd-kv dt:first-of-type + dd {
	border-top: 0;
}
#updates_row .upd-page .upd-kv dt {
	padding-right: 12px;
	color: var(--upd-muted);
	font-weight: 400;
}
#updates_row .upd-page .upd-extra {
	overflow-x: auto;
}

/* feedback after an action */
#updates_row .upd-page .upd-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1080;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	transform: translateX(-50%);
	border: 1px solid var(--upd-line);
	border-radius: var(--upd-radius-sm);
	background: var(--upd-panel);
	color: var(--upd-fg);
	font-size: 13px;
	box-shadow: 0 8px 24px color-mix(in srgb, #000000 30%, transparent);
	overflow-wrap: anywhere;
}
#updates_row .upd-page .upd-toast[hidden] {
	display: none;
}

/* narrower: the page's own width (container), the screen's where that is not known */
@container upd (max-width: 900px) {
	#updates_row .upd-page .upd-two {
		grid-template-columns: minmax(0, 1fr);
	}
}
@container upd (max-width: 720px) {
	#updates_row .upd-page .upd-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#updates_row .upd-page .upd-verdict {
		grid-template-columns: auto minmax(0, 1fr);
	}
	#updates_row .upd-page .upd-verdict .upd-actions {
		grid-column: 1 / -1;
	}
}
@container upd (max-width: 560px) {
	#updates_row .upd-page .upd-box {
		padding: 14px;
	}
	#updates_row .upd-page .upd-hide-narrow {
		display: none;
	}
	#updates_row .upd-page .upd-parts { grid-template-columns: minmax(0, 1fr) auto auto; }
	#updates_row .upd-page .upd-procs { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@container upd (max-width: 400px) {
	#updates_row .upd-page .upd-figures,
	#updates_row .upd-page .upd-gc {
		grid-template-columns: minmax(0, 1fr);
	}
	#updates_row .upd-page .upd-pkgs .upd-what,
	#updates_row .upd-page .upd-parts .upd-what {
		display: block;
	}
}
@media (max-width: 640px) {
	#updates_row .upd-page .upd-two {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	#updates_row .upd-page .upd-meter i,
	#updates_row .upd-page .upd-bar i,
	#updates_row .upd-page .upd-stack i {
		transition: none;
	}
}