:root {
	/* ==========================================================================
 CUSTOM THEME VEBA COLOR SYSTEM — BLACK & ORANGE EDITION
 ========================================================================== */

	/* Brand Accent Colors */
	--custom-theme-veba-primary: #f97316;
	/* Vivid Orange */
	--custom-theme-veba-primary-hover: #ea6c0a;
	/* Deep Orange */

	/* Background Elements */
	--custom-theme-veba-bg-deep: #0a0a0a;
	/* Deep dark midnight bg */
	--custom-theme-veba-bg-card: #141414;
	/* Dark Box / Input bg */
	--custom-theme-veba-bg-card-secondary: #1c1c1c;
	/* Secondary Card / Badge bg */
	--custom-theme-veba-bg-hover: #2a2a2a;
	/* Hover state for buttons/toggles */

	/* Typography Colors */
	--custom-theme-veba-text-light: #ffffff;
	/* High-contrast white */
	--custom-theme-veba-text-secondary: #e5e7eb;
	/* Light gray body */
	--custom-theme-veba-text-muted: #9ca3af;
	/* Secondary details/icons */

	/* Borders and Dividers */
	--custom-theme-veba-border-muted: rgba(255, 255, 255, 0.05);
	/* Thin separators */
	--custom-theme-veba-border-accent: rgba(255, 255, 255, 0.08);
	/* Input/card highlights */

	/* Smart Primary Alpha Colors (Automatic opacities for glows and shadows) */
	--custom-theme-veba-primary-alpha-05: rgba(249, 115, 22, 0.05);
	--custom-theme-veba-primary-alpha-15: rgba(249, 115, 22, 0.15);
	--custom-theme-veba-primary-alpha-20: rgba(249, 115, 22, 0.2);
	--custom-theme-veba-primary-alpha-30: rgba(249, 115, 22, 0.3);
	--custom-theme-veba-primary-alpha-40: rgba(249, 115, 22, 0.4);
	--custom-theme-veba-primary-alpha-50: rgba(249, 115, 22, 0.5);
	/* ==========================================================================
 VEBA EXTENDED DESIGN TOKENS (v2) — Safe aliases & new semantic tokens
 These ADD to the existing system without touching any existing values.
 Edit the --custom-theme-veba-* values above to change the whole theme.
 ========================================================================== */

	/* ── Extended Accent Tokens ── */
	--veba-primary: var(--custom-theme-veba-primary);
	--veba-primary-hover: var(--custom-theme-veba-primary-hover);
	--veba-primary-active: #c2550a;
	--veba-primary-light: #f472b6;

	/* Dynamic Brand Alphas (alias) */
	--veba-primary-alpha-05: var(--custom-theme-veba-primary-alpha-05);
	--veba-primary-alpha-10: rgba(249, 115, 22, 0.10);
	--veba-primary-alpha-15: var(--custom-theme-veba-primary-alpha-15);
	--veba-primary-alpha-20: var(--custom-theme-veba-primary-alpha-20);
	--veba-primary-alpha-30: var(--custom-theme-veba-primary-alpha-30);
	--veba-primary-alpha-40: var(--custom-theme-veba-primary-alpha-40);
	--veba-primary-alpha-50: var(--custom-theme-veba-primary-alpha-50);
	--veba-primary-alpha-70: rgba(249, 115, 22, 0.70);

	/* ── Accent Palette ── */
	--veba-secondary: #4261fa;
	--veba-secondary-rgb: 66, 97, 250;
	--veba-secondary-hover: #3651d4;

	--veba-accent-gold: #fbbf24;
	--veba-accent-gold-rgb: 251, 191, 36;
	--veba-accent-gold-hover: #f59e0b;
	--veba-accent-gold-shadow: 0 0 12px rgba(251, 191, 36, 0.75);
	--veba-accent-gold-glow-color: rgba(251, 191, 36, 0.85);

	--veba-accent-green: #10b981;
	--veba-accent-green-rgb: 16, 185, 129;
	--veba-accent-green-hover: #059669;

	--veba-accent-red: #ef4444;
	--veba-accent-red-rgb: 239, 68, 68;
	--veba-accent-red-hover: #dc2626;

	--veba-accent-blue: #3b82f6;
	--veba-accent-orange: #f59e0b;
	--veba-accent-purple: #8b5cf6;

	/* ── Background Aliases ── */
	--veba-bg-main: var(--custom-theme-veba-bg-deep);
	--veba-bg-surface: var(--custom-theme-veba-bg-deep);
	--veba-bg-card: var(--custom-theme-veba-bg-card);
	--veba-bg-card-secondary: var(--custom-theme-veba-bg-card-secondary);
	--veba-bg-card-elevated: #1e293b;
	--veba-bg-hover: var(--custom-theme-veba-bg-hover);
	--veba-bg-active: #334155;
	--veba-bg-input: #111111;
	--veba-bg-modal: #0f172a;
	--veba-bg-backdrop: rgba(3, 7, 18, 0.85);
	--veba-bg-reader: #080808;
	--veba-bg-reader-bar: #111111;

	/* ── Typography Aliases ── */
	--veba-text-white: var(--custom-theme-veba-text-light);
	--veba-text-primary: #f8fafc;
	--veba-text-secondary: var(--custom-theme-veba-text-secondary);
	--veba-text-muted: var(--custom-theme-veba-text-muted);
	--veba-text-subtle: #64748b;
	--veba-text-disabled: #475569;

	/* ── Border Aliases ── */
	--veba-border-subtle: var(--custom-theme-veba-border-muted);
	--veba-border-default: var(--custom-theme-veba-border-accent);
	--veba-border-accent: rgba(255, 255, 255, 0.14);
	--veba-border-hover: var(--custom-theme-veba-primary-alpha-40);
	--veba-border-focus: var(--custom-theme-veba-primary);

	/* ── Button Tokens ── */
	--veba-btn-primary-bg: var(--custom-theme-veba-primary);
	--veba-btn-primary-text: #ffffff;
	--veba-btn-primary-hover-bg: var(--custom-theme-veba-primary-hover);
	--veba-btn-secondary-bg: var(--custom-theme-veba-bg-card-secondary);
	--veba-btn-secondary-border: var(--custom-theme-veba-border-accent);
	--veba-btn-secondary-text: var(--custom-theme-veba-text-secondary);
	--veba-btn-secondary-hover-bg: var(--custom-theme-veba-bg-hover);
	--veba-btn-secondary-hover-border: var(--custom-theme-veba-primary-alpha-40);
	--veba-btn-secondary-hover-text: #ffffff;

	/* ── Pill/Badge Tokens ── */
	--veba-pill-bg: var(--custom-theme-veba-bg-card-secondary);
	--veba-pill-border: var(--custom-theme-veba-border-accent);
	--veba-pill-text: var(--custom-theme-veba-text-secondary);
	--veba-pill-hover-bg: var(--custom-theme-veba-bg-hover);
	--veba-pill-hover-border: var(--custom-theme-veba-primary-alpha-40);
	--veba-pill-hover-text: #ffffff;
	--veba-pill-count-text: var(--custom-theme-veba-text-muted);

	/* ── Rating Tokens ── */
	--veba-star-filled: #fbbf24;
	--veba-star-empty: #475569;
	--veba-star-hover: #fbbf24;

}

/* 100% Robust Light Mode Support (Theme body.text-ui-dark / light contrast) */
body.text-ui-dark,
.text-ui-dark,
html.light {
	/* Background Elements */
	--custom-theme-veba-bg-deep: #f8fafc !important;
	--custom-theme-veba-bg-card: #ffffff !important;
	--custom-theme-veba-bg-card-secondary: #f1f5f9 !important;
	--custom-theme-veba-bg-hover: #e2e8f0 !important;

	/* Typography Colors */
	--custom-theme-veba-text-light: #0f172a !important;
	--custom-theme-veba-text-secondary: #334155 !important;
	--custom-theme-veba-text-muted: #64748b !important;

	/* Borders and Dividers */
	--custom-theme-veba-border-muted: rgba(0, 0, 0, 0.06) !important;
	--custom-theme-veba-border-accent: rgba(0, 0, 0, 0.08) !important;
}

/* 100% Robust Dark Mode Support (Theme body.text-ui-light / dark contrast) */
body.text-ui-light,
.text-ui-light,
html.dark {
	/* Background Elements */
	--custom-theme-veba-bg-deep: #0a0a0a !important;
	--custom-theme-veba-bg-card: #141414 !important;
	--custom-theme-veba-bg-card-secondary: #1c1c1c !important;
	--custom-theme-veba-bg-hover: #2a2a2a !important;

	/* Typography Colors */
	--custom-theme-veba-text-light: #ffffff !important;
	--custom-theme-veba-text-secondary: #e5e7eb !important;
	--custom-theme-veba-text-muted: #9ca3af !important;

	/* Borders and Dividers */
	--custom-theme-veba-border-muted: rgba(255, 255, 255, 0.05) !important;
	--custom-theme-veba-border-accent: rgba(255, 255, 255, 0.08) !important;
}

img:is([sizes=auto i], [sizes^="auto," i]) {
	contain-intrinsic-size: 3000px 1500px
}

:root {
	--swiper-theme-color: #007aff
}

.swiper {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
	display: block
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-wrapper {
	transform: translate3d(0, 0, 0)
}

.swiper-horizontal {
	touch-action: pan-y
}

.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
	display: block
}

.swiper-lazy-preloader {
	width: 42px;
	height: 42px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -21px;
	margin-top: -21px;
	z-index: 10;
	transform-origin: 50%;
	box-sizing: border-box;
	border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
	border-radius: 50%;
	border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
	animation: 1s linear infinite swiper-preloader-spin
}

@keyframes swiper-preloader-spin {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

:root {
	--swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
	position: absolute;
	top: var(--swiper-navigation-top-offset, 50%);
	width: calc(var(--swiper-navigation-size)/ 44 * 27);
	height: var(--swiper-navigation-size);
	margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity: .35;
	cursor: auto;
	pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
	opacity: 0;
	cursor: auto;
	pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
	display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform-origin: center
}

.swiper-button-prev {
	left: var(--swiper-navigation-sides-offset, 10px);
	right: auto
}

.swiper-button-lock {
	display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-family: swiper-icons;
	font-size: var(--swiper-navigation-size);
	text-transform: none !important;
	letter-spacing: 0;
	font-variant: initial;
	line-height: 1
}

.swiper-button-prev:after {
	content: 'prev'
}

.swiper-button-next {
	right: var(--swiper-navigation-sides-offset, 10px);
	left: auto
}

.swiper-button-next:after {
	content: 'next'
}

.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10
}

.swiper-scrollbar {
	border-radius: var(--swiper-scrollbar-border-radius, 10px);
	position: relative;
	touch-action: none;
	background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
	display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
	position: absolute;
	left: var(--swiper-scrollbar-sides-offset, 1%);
	bottom: var(--swiper-scrollbar-bottom, 4px);
	top: var(--swiper-scrollbar-top, auto);
	z-index: 50;
	height: var(--swiper-scrollbar-size, 4px);
	width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical {
	position: absolute;
	left: var(--swiper-scrollbar-left, auto);
	right: var(--swiper-scrollbar-right, 4px);
	top: var(--swiper-scrollbar-sides-offset, 1%);
	z-index: 50;
	width: var(--swiper-scrollbar-size, 4px);
	height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
	border-radius: var(--swiper-scrollbar-border-radius, 10px);
	left: 0;
	top: 0
}

.swiper-scrollbar-lock {
	display: none
}

.swiper-zoom-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain
}

.swiper-slide-zoomed {
	cursor: move;
	touch-action: none
}

.swiper .swiper-notification {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0;
	z-index: -1000
}

img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -.1em !important;
	background: 0 0 !important;
	padding: 0 !important
}

:root {
	--wp--preset--aspect-ratio--square: 1;
	--wp--preset--aspect-ratio--4-3: 4/3;
	--wp--preset--aspect-ratio--3-4: 3/4;
	--wp--preset--aspect-ratio--3-2: 3/2;
	--wp--preset--aspect-ratio--2-3: 2/3;
	--wp--preset--aspect-ratio--16-9: 16/9;
	--wp--preset--aspect-ratio--9-16: 9/16;
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
	--wp--preset--color--luminous-vivid-orange: #ff6900;
	--wp--preset--color--luminous-vivid-amber: #fcb900;
	--wp--preset--color--light-green-cyan: #7bdcb5;
	--wp--preset--color--vivid-green-cyan: #00d084;
	--wp--preset--color--pale-cyan-blue: #8ed1fc;
	--wp--preset--color--vivid-cyan-blue: #0693e3;
	--wp--preset--color--vivid-purple: #9b51e0;
	--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%);
	--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
	--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
	--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgb(255, 105, 0) 0%, rgb(207, 46, 46) 100%);
	--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
	--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
	--wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
	--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
	--wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
	--wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
	--wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
	--wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
	--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, .2);
	--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, .4);
	--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, .2);
	--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
	--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0)
}

:where(.is-layout-flex) {
	gap: .5em
}

:where(.is-layout-grid) {
	gap: .5em
}

:where(.wp-block-columns.is-layout-flex) {
	gap: 2em
}

:where(.wp-block-columns.is-layout-grid) {
	gap: 2em
}

:where(.wp-block-post-template.is-layout-flex) {
	gap: 1.25em
}

:where(.wp-block-post-template.is-layout-grid) {
	gap: 1.25em
}

div:where(.swal2-container) {
	display: grid;
	position: fixed;
	z-index: 1060;
	inset: 0;
	box-sizing: border-box;
	grid-template-areas: "top-start top top-end" "center-start center center-end" "bottom-start bottom-center bottom-end";
	grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
	height: 100%;
	padding: .625em;
	overflow-x: hidden;
	transition: background-color .1s;
	-webkit-overflow-scrolling: touch
}

div:where(.swal2-container).swal2-backdrop-show,
div:where(.swal2-container).swal2-noanimation {
	background: rgba(0, 0, 0, .4)
}

div:where(.swal2-container).swal2-backdrop-hide {
	background: rgba(0, 0, 0, 0) !important
}

div:where(.swal2-container) div:where(.swal2-popup) {
	display: none;
	position: relative;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 100%);
	width: 32em;
	max-width: 100%;
	padding: 0 0 1.25em;
	border: none;
	border-radius: 5px;
	background: #fff;
	color: #545454;
	font-family: inherit;
	font-size: 1rem
}

div:where(.swal2-container) div:where(.swal2-popup):focus {
	outline: 0
}

div:where(.swal2-container) h2:where(.swal2-title) {
	position: relative;
	max-width: 100%;
	margin: 0;
	padding: .8em 1em 0;
	color: inherit;
	font-size: 1.875em;
	font-weight: 600;
	text-align: center;
	text-transform: none;
	word-wrap: break-word
}

div:where(.swal2-container) div:where(.swal2-actions) {
	display: flex;
	z-index: 1;
	box-sizing: border-box;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: auto;
	margin: 1.25em auto 0;
	padding: 0
}

div:where(.swal2-container) div:where(.swal2-loader) {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	margin: 0 1.875em;
	animation: 1.5s linear infinite swal2-rotate-loading;
	border-width: .25em;
	border-style: solid;
	border-radius: 100%;
	border-color: #2778c4 transparent
}

div:where(.swal2-container) button:where(.swal2-styled) {
	margin: .3125em;
	padding: .625em 1.1em;
	transition: box-shadow .1s;
	box-shadow: 0 0 0 3px transparent;
	font-weight: 500
}

div:where(.swal2-container) button:where(.swal2-styled):not([disabled]) {
	cursor: pointer
}

div:where(.swal2-container) button:where(.swal2-styled):focus {
	outline: 0
}

div:where(.swal2-container) button:where(.swal2-styled)::-moz-focus-inner {
	border: 0
}

div:where(.swal2-container) div:where(.swal2-footer) {
	margin: 1em 0 0;
	padding: 1em 1em 0;
	border-top: 1px solid #eee;
	color: inherit;
	font-size: 1em;
	text-align: center
}

div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
	width: 100%;
	height: .25em;
	background: rgba(0, 0, 0, .2)
}

div:where(.swal2-container) img:where(.swal2-image) {
	max-width: 100%;
	margin: 2em auto 1em
}

div:where(.swal2-container) button:where(.swal2-close) {
	z-index: 2;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: -1.2em;
	padding: 0;
	overflow: hidden;
	transition: color .1s, box-shadow .1s;
	border: none;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0);
	color: #ccc;
	font-family: monospace;
	font-size: 2.5em;
	cursor: pointer;
	justify-self: end
}

div:where(.swal2-container) button:where(.swal2-close):hover {
	transform: none;
	background: rgba(0, 0, 0, 0);
	color: #f27474
}

div:where(.swal2-container) button:where(.swal2-close):focus {
	outline: 0;
	box-shadow: inset 0 0 0 3px rgba(100, 150, 200, .5)
}

div:where(.swal2-container) button:where(.swal2-close)::-moz-focus-inner {
	border: 0
}

div:where(.swal2-container) div:where(.swal2-radio),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) label:where(.swal2-checkbox),
div:where(.swal2-container) select:where(.swal2-select),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
	margin: 1em 2em 3px
}

div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
	box-sizing: border-box;
	width: auto;
	transition: border-color .1s, box-shadow .1s;
	border: 1px solid #d9d9d9;
	border-radius: .1875em;
	background: rgba(0, 0, 0, 0);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px transparent;
	color: inherit;
	font-size: 1.125em
}

div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
	border: 1px solid #b4dbed;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 3px rgba(100, 150, 200, .5)
}

div:where(.swal2-container) input:where(.swal2-file)::placeholder,
div:where(.swal2-container) input:where(.swal2-input)::placeholder,
div:where(.swal2-container) textarea:where(.swal2-textarea)::placeholder {
	color: #ccc
}

div:where(.swal2-container) label:where(.swal2-input-label) {
	display: flex;
	justify-content: center;
	margin: 1em auto 0
}

div:where(.swal2-container) div:where(.swal2-validation-message) {
	align-items: center;
	justify-content: center;
	margin: 1em 0 0;
	padding: .625em;
	overflow: hidden;
	background: #f0f0f0;
	color: #666;
	font-size: 1em;
	font-weight: 300
}

div:where(.swal2-container) div:where(.swal2-validation-message)::before {
	content: "!";
	display: inline-block;
	width: 1.5em;
	min-width: 1.5em;
	height: 1.5em;
	margin: 0 .625em;
	border-radius: 50%;
	background-color: #f27474;
	color: #fff;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center
}

div:where(.swal2-icon) {
	position: relative;
	box-sizing: content-box;
	justify-content: center;
	width: 5em;
	height: 5em;
	margin: 2.5em auto .6em;
	border: .25em solid transparent;
	border-radius: 50%;
	border-color: #000;
	font-family: inherit;
	line-height: 5em;
	cursor: default;
	user-select: none
}

[class^=swal2] {
	-webkit-tap-highlight-color: transparent
}

.swal2-show {
	animation: .3s swal2-show
}

.swal2-hide {
	animation: .15s forwards swal2-hide
}

.swal2-noanimation {
	transition: none
}

@keyframes swal2-show {
	0% {
		transform: scale(.7)
	}

	45% {
		transform: scale(1.05)
	}

	80% {
		transform: scale(.95)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes swal2-hide {
	0% {
		transform: scale(1);
		opacity: 1
	}

	100% {
		transform: scale(.5);
		opacity: 0
	}
}

@keyframes swal2-rotate-loading {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.wp-pagenavi {
	clear: both
}

.wp-pagenavi a,
.wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #bfbfbf;
	padding: 3px 5px;
	margin: 2px
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
	border-color: #000
}

.wp-pagenavi span.current {
	font-weight: 700
}

@font-face {
	font-family: Poppins;
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v24/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
	--fa-style-family-classic: "Font Awesome 6 Free";
	--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
}

@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.ttf) format("truetype")
}

.fa-regular,
.far {
	font-weight: 400
}

:root {
	--fa-style-family-classic: "Font Awesome 6 Free";
	--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
}

@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf) format("truetype")
}

.fa-solid,
.fas {
	font-weight: 900
}

:root {
	--fa-style-family-brands: "Font Awesome 6 Brands";
	--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
}

.fa-regular,
.fa-solid,
.far,
.fas {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: var(--fa-display, inline-block);
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto
}

.fa-regular,
.fa-solid,
.far,
.fas {
	font-family: "Font Awesome 6 Free"
}

.fa-calendar-days:before {
	content: "\f073"
}

.fa-person:before {
	content: "\f183"
}

.fa-star-and-crescent:before {
	content: "\f699"
}

.fa-circle-exclamation:before {
	content: "\f06a"
}

.fa-arrow-right-from-bracket:before {
	content: "\f08b"
}

.fa-list:before {
	content: "\f03a"
}

.fa-paintbrush:before {
	content: "\f1fc"
}

.fa-eye-slash:before {
	content: "\f070"
}

.fa-umbrella-beach:before {
	content: "\f5ca"
}

.fa-user:before {
	content: "\f007"
}

.fa-star:before {
	content: "\f005"
}

.fa-shuffle:before {
	content: "\f074"
}

.fa-arrow-right-to-bracket:before {
	content: "\f090"
}

.fa-eye-low-vision:before {
	content: "\f2a8"
}

.fa-glass-martini-alt:before {
	content: "\f57b"
}

.fa-circle-check:before {
	content: "\f058"
}

.fa-arrow-right-to-file:before {
	content: "\f56f"
}

.fa-address-card:before {
	content: "\f2bb"
}

.fa-layer-group:before {
	content: "\f5fd"
}

.fa-glass-martini:before {
	content: "\f000"
}

.fa-star-half-alt:before,
.fa-star-half-stroke:before {
	content: "\f5c0"
}

.fa-arrow-right:before {
	content: "\f061"
}

.fa-circle:before {
	content: "\f111"
}

.fa-tags:before {
	content: "\f02c"
}

.fa-eye:before {
	content: "\f06e"
}

.fa-arrow-right-rotate:before {
	content: "\f01e"
}

.fa-user-secret:before {
	content: "\f21b"
}

.fa-tag:before {
	content: "\f02b"
}

.fa-arrow-right-to-city:before {
	content: "\e4b3"
}

.fa-star-of-david:before {
	content: "\f69a"
}

.fa-images:before {
	content: "\f302"
}

.fa-eye-dropper-empty:before,
.fa-eye-dropper:before,
.fa-eyedropper:before {
	content: "\f1fb"
}

.fa-house:before {
	content: "\f015"
}

.fa-arrow-right-arrow-left:before {
	content: "\f0ec"
}

.fa-bolt:before {
	content: "\f0e7"
}

.fa-sun:before {
	content: "\f185"
}

.fa-arrow-right-long:before {
	content: "\f178"
}

.fa-star-of-life:before {
	content: "\f621"
}

.fa-star-half:before {
	content: "\f089"
}

.fa-ranking-star:before {
	content: "\e561"
}

.fa-copy:before {
	content: "\f0c5"
}

.fa-grip:before {
	content: "\f58d"
}

.fa-xmark:before {
	content: "\f00d"
}

.fa-copyright:before {
	content: "\f1f9"
}

.fa-store:before {
	content: "\f54e"
}

.fa-chevron-left:before {
	content: "\f053"
}

.fa-hand-lizard:before {
	content: "\f258"
}

.fa-chevron-right:before {
	content: "\f054"
}

.fa-trophy:before {
	content: "\f091"
}

.fa-arrow-right-from-file:before {
	content: "\f56e"
}

.fa-fire-flame-curved:before {
	content: "\f7e4"
}

.fa-circle-xmark:before {
	content: "\f057"
}

.fa-umbrella:before {
	content: "\f0e9"
}

::-webkit-scrollbar {
	width: 7px
}

::-webkit-scrollbar-track {
	background-color: #3f3f3f
}

::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
	background: #555
}

.manga-item__tags::-webkit-scrollbar {
	width: 1px
}

.manga-item__tags::-webkit-scrollbar-track {
	border-radius: 5px;
	background: #00000000;
	background-color: #d8d8d8
}

.manga-item__tags::-webkit-scrollbar-thumb {
	background: #00000000;
	border-radius: 10px
}

.manga-item__tags:hover::-webkit-scrollbar-thumb {
	background: #888
}

.manga-item__tags::-webkit-scrollbar-thumb:hover {
	background: #555
}

.scaling-squares-spinner,
.scaling-squares-spinner * {
	box-sizing: border-box
}

.scaling-squares-spinner {
	height: 65px;
	width: 65px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	animation: 1.25s scaling-squares-animation;
	animation-iteration-count: infinite;
	transform: rotate(0)
}

.scaling-squares-spinner .square {
	height: 12.5px;
	width: 12.5px;
	margin-right: auto;
	margin-left: auto;
	border: 2px solid #4261fa;
	position: absolute;
	animation-duration: 1.25s;
	animation-iteration-count: infinite
}

.scaling-squares-spinner .square:first-child {
	animation-name: scaling-squares-spinner-animation-child-1
}

.scaling-squares-spinner .square:nth-child(2) {
	animation-name: scaling-squares-spinner-animation-child-2
}

.scaling-squares-spinner .square:nth-child(3) {
	animation-name: scaling-squares-spinner-animation-child-3
}

.scaling-squares-spinner .square:nth-child(4) {
	animation-name: scaling-squares-spinner-animation-child-4
}

@keyframes scaling-squares-animation {
	50% {
		transform: rotate(90deg)
	}

	to {
		transform: rotate(180deg)
	}
}

@keyframes scaling-squares-spinner-animation-child-1 {
	50% {
		transform: translate(150%, 150%) scale(2)
	}
}

@keyframes scaling-squares-spinner-animation-child-2 {
	50% {
		transform: translate(-150%, 150%) scale(2)
	}
}

@keyframes scaling-squares-spinner-animation-child-3 {
	50% {
		transform: translate(-150%, -150%) scale(2)
	}
}

@keyframes scaling-squares-spinner-animation-child-4 {
	50% {
		transform: translate(150%, -150%) scale(2)
	}
}

.wp-pagenavi a,
.wp-pagenavi span {
	border-width: 0;
	padding: .625rem 1rem;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(var(--gray-200)/var(--tw-text-opacity, 1))
}

.wp-pagenavi a:hover {
	color: rgba(239, 38, 241, .8)
}

.wp-pagenavi span.current {
	border-top-width: 2px;
	--tw-border-opacity: 1;
	border-color: rgb(239 38 241/var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(239 38 241/var(--tw-text-opacity, 1))
}

.wp-pagenavi span {
	cursor: pointer
}

.wp-pagenavi .pages {
	font-weight: 400;
	--tw-text-opacity: 1;
	color: rgb(var(--gray-400)/var(--tw-text-opacity, 1))
}

.wp-pagenavi .extend:not(:last-of-type) {
	cursor: pointer
}

div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
	background: hsla(0, 0%, 40%, .2)
}

.manga-item__cat-link:before {
	--tw-content: attr(data-short);
	content: var(--tw-content)
}

.manga-grid .manga-item.blacklisted .manga-item__mid:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../images/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
	background-origin: content-box;
	transform: rotate(-18deg);
	padding: 1em
}

.manga-grid .manga-item.blacklisted .manga-item__mid:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000000c7;
	z-index: 2
}

#popupReadNowBtn {
	--glow-color: #d9b0ff;
	--glow-spread-color: rgba(191, 123, 255, .781);
	--enhanced-glow-color: #e7ceff;
	--btn-color: #643d88;
	border: .25em solid var(--glow-color);
	padding: 1em 3em;
	color: var(--glow-color);
	font-size: 15px;
	font-weight: 700;
	background-color: var(--btn-color);
	border-radius: 1em;
	outline: 0;
	box-shadow: 0 0 1em .25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 .75em .25em var(--glow-color);
	text-shadow: 0 0 .5em var(--glow-color);
	position: relative;
	transition: all .3s
}

#popupReadNowBtn:after {
	pointer-events: none;
	content: "";
	position: absolute;
	top: 120%;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--glow-spread-color);
	filter: blur(2em);
	opacity: .7;
	transform: perspective(1.5em) rotateX(35deg) scaleY(.6)
}

#popupReadNowBtn:hover {
	color: var(--btn-color);
	background-color: var(--glow-color);
	box-shadow: 0 0 1em .25em var(--glow-color), 0 0 4em 2em var(--glow-spread-color), inset 0 0 .75em .25em var(--glow-color)
}

#popupReadNowBtn:active {
	box-shadow: 0 0 .6em .25em var(--glow-color), 0 0 2.5em 2em var(--glow-spread-color), inset 0 0 .5em .25em var(--glow-color)
}

*,
:after,
:before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
	--tw-contain-size: ;
	--tw-contain-layout: ;
	--tw-contain-paint: ;
	--tw-contain-style:
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
	--tw-contain-size: ;
	--tw-contain-layout: ;
	--tw-contain-paint: ;
	--tw-contain-style:
}

*,
:after,
:before {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: rgb(var(--gray-200)/1)
}

:after,
:before {
	--tw-content: ""
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: Poppins;
	font-feature-settings: normal;
	font-variation-settings: normal;
	-webkit-tap-highlight-color: transparent
}

body {
	margin: 0;
	line-height: inherit
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

h1,
h2,
h3 {
	font-size: inherit;
	font-weight: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
	font-feature-settings: normal;
	font-variation-settings: normal;
	font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}

button,
select {
	text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

dl,
h1,
h2,
h3,
hr {
	margin: 0
}

ul {
	list-style: none;
	margin: 0;
	padding: 0
}

dialog {
	padding: 0
}

textarea {
	resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	opacity: 1;
	color: rgb(var(--gray-400)/1)
}

input::placeholder,
textarea::placeholder {
	opacity: 1;
	color: rgb(var(--gray-400)/1)
}

[role=button],
button {
	cursor: pointer
}

audio,
canvas,
iframe,
img,
object,
svg {
	display: block;
	vertical-align: middle
}

img {
	max-width: 100%;
	height: auto
}

[hidden]:where(:not([hidden=until-found])) {
	display: none
}

:root {
	--gray-950: 249 250 251;
	--gray-900: 243 244 246;
	--gray-800: 229 231 235;
	--gray-700: 209 213 219;
	--gray-600: 156 163 175;
	--gray-500: 107 114 128;
	--gray-400: 75 85 99;
	--gray-300: 55 65 81;
	--gray-200: 31 41 55;
	--gray-100: 17 24 39;
	--gray-50: 3 7 18;
	--body: 249 250 251;
	--swiper-navigation-top-offset: 45%;
	--swiper-navigation-size: 44px;
	--primary-color: var(--custom-theme-veba-primary);
	--secondary-color: #4261fa
}

:root.dark {
	--gray-50: 249 250 251;
	--gray-100: 243 244 246;
	--gray-200: 229 231 235;
	--gray-300: 209 213 219;
	--gray-400: 156 163 175;
	--gray-500: 107 114 128;
	--gray-600: 75 85 99;
	--gray-700: 55 65 81;
	--gray-800: 31 41 55;
	--gray-900: 17 24 39;
	--gray-950: 3 7 18;
	--body: 10 13 22
}

* {
	touch-action: manipulation
}

html {
	scroll-behavior: smooth
}

i {
	display: inline-block
}

a,
button,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

input[type=email],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
select,
textarea {
	border-radius: .75rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(var(--gray-900)/var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-900)/var(--tw-bg-opacity, 1));
	padding: .75rem 1rem;
	--tw-text-opacity: 1;
	color: rgb(var(--gray-200)/var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

input[type=email]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-500)/var(--tw-text-opacity, 1))
}

input[type=email]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
select::placeholder,
textarea::placeholder {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-500)/var(--tw-text-opacity, 1))
}

input[type=email]:-webkit-autofill,
input[type=password]:-webkit-autofill,
input[type=search]:-webkit-autofill,
input[type=tel]:-webkit-autofill,
input[type=text]:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-900)/var(--tw-bg-opacity, 1))
}

input[type=email]:autofill,
input[type=password]:autofill,
input[type=search]:autofill,
input[type=tel]:autofill,
input[type=text]:autofill,
select:autofill,
textarea:autofill {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-900)/var(--tw-bg-opacity, 1))
}

input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
select:focus,
textarea:focus {
	--tw-border-opacity: 1;
	border-color: rgb(99 102 241/var(--tw-border-opacity, 1));
	background-color: transparent;
	outline: transparent solid 2px;
	outline-offset: 2px
}

select {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right .75rem center;
	background-repeat: no-repeat;
	background-size: .75em .75em;
	padding-right: 2.5rem;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact
}

input[type=search]::-webkit-search-cancel-button {
	height: 1.5rem;
	width: 1.5rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PG1hc2sgaWQ9ImEiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMiIgeD0iMSIgeT0iMSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgc3R5bGU9Im1hc2stdHlwZTpsdW1pbmFuY2UiPjxnIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiI+PHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBkPSJNMTIuNSAyMmM1LjUyMyAwIDEwLTQuNDc3IDEwLTEwcy00LjQ3Ny0xMC0xMC0xMC0xMCA0LjQ3Ny0xMCAxMCA0LjQ3NyAxMCAxMCAxMFoiLz48cGF0aCBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTE1LjMyOSA5LjE3MS01LjY1NyA1LjY1N20wLTUuNjU3IDUuNjU3IDUuNjU3Ii8+PC9nPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjQkRCREJEIiBkPSJNLjUgMGgyNHYyNEguNXoiLz48L2c+PC9zdmc+);
	background-size: 1.5rem;
	opacity: .7;
	-webkit-transition-property: opacity;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

input[type=search]::-webkit-search-cancel-button:hover {
	opacity: 1
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-50)/var(--tw-text-opacity, 1));
	-webkit-text-fill-color: rgb(var(--gray-50)/var(--tw-text-opacity));
	-webkit-background-clip: text;
	-webkit-transition: background-color 5000s ease-in-out;
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: unset
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto
}

@media (min-width:375px) {
	.manga-item__cat-link:before {
		content: var(--tw-content);
		display: none
	}

	.manga-item__cat-link>span {
		display: inline
	}

	.container {
		max-width: 375px
	}
}

@media (min-width:640px) {
	.container {
		max-width: 640px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 768px
	}
}

@media (min-width:1024px) {
	.container {
		max-width: 1024px
	}

	.main-container {
		margin: auto
	}

	.group\/html:not(.sidebar-none) .main-container {
		max-width: calc(100vw - 307px)
	}
}

@media (min-width:1280px) {
	.container {
		max-width: 1280px
	}
}

@media (min-width:1536px) {
	.container {
		max-width: 1536px
	}
}

@media (min-width:2048px) {
	.container {
		max-width: 2048px
	}
}

.container {
	margin: auto;
	width: auto;
	max-width: 100%;
	padding-left: 1rem;
	padding-right: 1rem
}

@media (min-width:1536px) {
	.container {
		max-width: 1920px
	}
}

.flex-col,
.flex-row {
	display: flex
}

.flex-center-center {
	display: flex;
	align-items: center;
	justify-content: center
}

.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.absolute-full {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0
}

[data-collapse] {
	cursor: pointer
}

.collapsed {
	height: 0;
	overflow: hidden
}

.collapsable {
	overflow: hidden;
	transition-property: height, padding;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .5s
}

.btn--solid {
	--tw-bg-opacity: 1;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.btn--solid {
	border-radius: .5rem;
	padding: .5rem 1.25rem;
	font-size: .875rem;
	line-height: 1.25rem
}

.btn--rounded {
	display: flex;
	align-items: center;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1));
	padding: .5rem 1.25rem;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.btn--rounded:hover {
	background-color: rgba(66, 97, 250, .8)
}

.btn--rounded:disabled {
	background-color: rgba(66, 97, 250, .6)
}

.modal {
	position: relative;
	z-index: 99998
}

.modal.closed {
	visibility: hidden
}

.modal.showing {
	visibility: visible
}

.modal-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgb(2 6 23/var(--tw-bg-opacity, 1));
	--tw-bg-opacity: 0.8;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.group\/modal.closed .modal-backdrop {
	opacity: 0
}

.group\/modal.showing .modal-backdrop {
	opacity: 1;
	transition-duration: .3s
}

.group\/modal.closed .modal-backdrop {
	transition-duration: .2s
}

.group\/modal.showing .modal-backdrop {
	transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.group\/modal.closed .modal-backdrop {
	transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.modal-content {
	position: relative;
	z-index: 10;
	margin: auto;
	width: 380px;
	max-width: 100%;
	overflow: hidden;
	border-radius: .75rem;
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-900)/var(--tw-bg-opacity, 1));
	padding: .75rem 1.5rem 1.25rem;
	text-align: left;
	--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.group\/modal.closed .modal-content {
	--tw-translate-y: 1rem
}

.group\/modal.closed .modal-content,
.group\/modal.showing .modal-content {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group\/modal.showing .modal-content {
	--tw-translate-y: 0px
}

.group\/modal.closed .modal-content {
	opacity: 0
}

.group\/modal.showing .modal-content {
	opacity: 1
}

.group\/modal.closed .modal-content {
	transition-duration: .2s
}

.group\/modal.showing .modal-content {
	transition-duration: .3s
}

.group\/modal.closed .modal-content {
	transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.group\/modal.showing .modal-content {
	transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

@media (min-width:640px) {
	.modal-content {
		margin-top: 2rem;
		margin-bottom: 2rem
	}

	.group\/modal.closed .modal-content {
		--tw-translate-y: 0px;
		--tw-scale-x: .95;
		--tw-scale-y: .95
	}

	.group\/modal.closed .modal-content,
	.group\/modal.showing .modal-content {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
	}

	.group\/modal.showing .modal-content {
		--tw-scale-x: 1;
		--tw-scale-y: 1
	}
}

.modal .select,
.modal input[type=email],
.modal input[type=password],
.modal input[type=search],
.modal input[type=tel],
.modal input[type=text],
.modal select,
.modal textarea {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-800)/var(--tw-bg-opacity, 1))
}

.modal .select:-webkit-autofill,
.modal input[type=email]:-webkit-autofill,
.modal input[type=password]:-webkit-autofill,
.modal input[type=search]:-webkit-autofill,
.modal input[type=tel]:-webkit-autofill,
.modal input[type=text]:-webkit-autofill,
.modal select:-webkit-autofill,
.modal textarea:-webkit-autofill {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-800)/var(--tw-bg-opacity, 1))
}

.modal .select:autofill,
.modal input[type=email]:autofill,
.modal input[type=password]:autofill,
.modal input[type=search]:autofill,
.modal input[type=tel]:autofill,
.modal input[type=text]:autofill,
.modal select:autofill,
.modal textarea:autofill {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-800)/var(--tw-bg-opacity, 1))
}

.checkbox {
	display: inline-block;
	height: 1rem;
	width: 1rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: .125rem;
	border-width: 2px;
	border-color: rgb(var(--gray-500)/var(--tw-border-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: 75ms
}

.checkbox,
.checkbox:checked {
	--tw-border-opacity: 1
}

.checkbox:checked {
	border-color: rgb(66 97 250/var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1));
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
}

.tag-result {
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-600)/var(--tw-bg-opacity, 1));
	padding: .375rem .75rem;
	font-size: .875rem;
	line-height: 1.25rem;
	--tw-text-opacity: 1;
	color: rgb(var(--gray-300)/var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.tag-result:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1))
}

.badge-unc {
	--tw-bg-opacity: 1;
	background-color: rgb(64 64 64/var(--tw-bg-opacity, 1))
}

.badge-cen:before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 9999px;
	background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBAUEBAYFBQUGBgYHCQ4JCQgICRINDQoOFRIWFhUSFBQXGiEcFxgfGRQUHScdHyIjJSUlFhwpLCgkKyEkJST/2wBDAQYGBgkICREJCREkGBQYJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCT/wgARCAA7ADwDAREAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAABQYHBAMCCP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAALKMAdFAYDqYjwfOxYhLKIR0poxgY4CUFCpGcVAoHDWAiPhAbw4HQkJYxEvNoih0cTcbRGGgOAYGhYKk5NI+GUDmsAAEFlAG8XxdGIShEP/EAD8QAAEDAwEDBQoNBQAAAAAAAAECAwQABREGEiFREzEyQWEHFCIkNVNxkrHREBUjMzRCVHJzkZOy0hYXdIHB/9oACAEBAAE/ACRg7xTWOST90eyoigI7e8dEVe/Ksn7w/aK04oJtTYJA8Jf7jU4gvA9gp34FvHYX8qrmP1zw9NQ896MdL5tHWeAq5urFykjlFj5VW7bV760phWnYJPmzvO89I13WpJa1xJSH1t+LsnAdKBzHqBAruEOF7RLpKy74+/vKyutUbpDH4Z7OutrtP50IUX7Kxz+aT7qkSHkvupS86lIWoABZAAye2oyErYbUoJUVJBJIyT/utKNNnT0LwE9A9Q4mrpb4T01anIcZa8AbS2kk/mRV+JgzktRCY7ZbCihklCScnfhOBntrSa1SYsgvqLpS4AC4SsgbPbXItebR6ooW6F9lY9QUuxWouKJtsMkk5+STxrUUyVFv1xYYfdaZbkLQhCCQlCRjAA6hVt1FemYLKG7rNSlI3JS6QBvNWK5zZVtQ7ImPuuEqBWtZJODuqHHYmNFyS02+sEpClgKOOFWaHGaadDbDSAVAnZSB1V3uz5tFG83HB8aXzcB7qabQptCyAVFIJPE1e7Nb3bzOWqI2VqfWSTneagWO296NeJNc3A8a1jf7tYb+7Btc1yJFQ2hYaQlJSCoZJ3g85rRWpr1Ls63JFweWvllpyoJHDgKtV7uJbczLc6Q6hw9FfHVy+1ufkPdQtkUkAtnBOOc1J1zfo8h5luU0ENrUhI5FJwASBUC1RLlCYnSmit99tLjigSkFRG84HNUPT9uEZsBlXrnjV37mWlbvOXLm21Tr5ABXy6xuA4A07pKz2BQiW6KWWCNspLileEec5NWG0w3GHipsnCx9Y8K+JYPmj6xo6+vHCH+kf5V/TsGSOXc5badG2rC8DKt5xu7atcFlm3RW0bWENJSMnqxUq9S4UhyO0G9hBwNpOTzZ41N1dcmpCkgR8ADnbPvq3Om+MGVL+cSotjY8EYHZWsNV3HR0qNGtgjlD7anF8ugrO0FADGCMDBr+7Wo+Fu/QP86PQV6DUb6M19xPsqB9CY/DTV18ov8ApHsFXH6Wv0D2VpXyav8AFV/yu615Tt3+Ov8AePg//8QAFBEBAAAAAAAAAAAAAAAAAAAAYP/aAAgBAgEBPwAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAYP/aAAgBAwEBPwAB/9k=);
	background-size: cover;
	content: var(--tw-content);
	--tw-brightness: brightness(.5)
}

.badge-cen:before,
.badge-ranking {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.badge-ranking {
	position: relative;
	height: 2.5rem;
	width: 2.5rem;
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1));
	--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, .07)) drop-shadow(0 2px 2px rgba(0, 0, 0, .06))
}

.badge-ranking__top {
	margin: auto;
	height: 2rem;
	width: 2rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(245 158 11/var(--tw-bg-opacity, 1));
	text-align: center;
	line-height: 2rem
}

.badge-ranking__bottom {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 2.5rem;
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-radius: .125rem;
	--tw-bg-opacity: 1;
	background-color: rgb(185 28 28/var(--tw-bg-opacity, 1));
	text-align: center;
	font-size: 10px
}

.manga-grid.grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .375rem
}

.manga-swiper .swiper-wrapper {
	gap: 0
}

.manga-swiper .swiper-wrapper>* {
	width: 100%
}

@media (min-width:375px) {
	.manga-swiper .swiper-wrapper>* {
		width: 50%
	}
}

@media (min-width:640px) {
	.manga-grid.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.manga-swiper .swiper-wrapper>* {
		width: 33.333333%
	}
}

@media (min-width:768px) {
	.manga-grid.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr))
	}

	.manga-swiper .swiper-wrapper>* {
		width: 25%
	}
}

@media (min-width:1280px) {
	.manga-grid.grid {
		grid-template-columns: repeat(5, minmax(0, 1fr))
	}

	.manga-swiper .swiper-wrapper>* {
		width: 20%
	}
}

@media (min-width:1536px) {
	.manga-grid.grid {
		grid-template-columns: repeat(6, minmax(0, 1fr))
	}

	.manga-swiper .swiper-wrapper>* {
		width: 16.666667%
	}
}

.manga-swiper .swiper-wrapper:not(.swiper-wrapper-initialized) {
	margin-left: -.1875rem;
	margin-right: -.1875rem;
	display: flex;
	width: auto;
	flex-wrap: nowrap;
	overflow-x: hidden
}

.manga-swiper .swiper-wrapper:not(.swiper-wrapper-initialized)>* {
	flex-shrink: 0;
	padding-left: .1875rem;
	padding-right: .1875rem
}

.manga-item__img {
	overflow: hidden
}

.manga-item__img:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-duration: .3s;
	content: var(--tw-content);
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.manga-item__img:hover:before {
	background-color: rgb(2 6 23/var(--tw-bg-opacity, 1));
	--tw-bg-opacity: 0.4;
	content: var(--tw-content);
	opacity: 1
}

.manga-item__img img {
	position: absolute;
	top: 50%;
	left: 50%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	width: 100%;
	max-width: 110%;
	transition-property: width;
	transition-duration: .3s;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.manga-item__img:hover img {
	width: 110%
}

.manga-item__img {
	position: relative;
	width: 100%;
	padding-top: 133.33%
}

.group\/manga-item:hover .manga-item__img-inner {
	width: 110%
}

.manga-item__link:visited {
	color: rgb(var(--gray-400))
}

.manga-item .btn-read {
	border-radius: .5rem;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1));
	padding: .5rem 1.25rem;
	font-size: .875rem;
	line-height: 1.25rem;
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1));
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(239 38 241/var(--tw-bg-opacity, 1))
}

.manga-item .btn-read:hover {
	padding-left: 1.5rem;
	padding-right: 2.5rem
}

@media (min-width:640px) {
	.manga-item .btn-read {
		padding: .5rem 2.5rem
	}

	.manga-item .btn-read:hover {
		padding-left: 2rem;
		padding-right: 3rem
	}

	.manga-item .btn-read .btn-icon {
		right: .75rem
	}
}

.manga-item .btn-read:hover .btn-icon {
	opacity: 1
}

.visible {
	visibility: visible
}

.invisible {
	visibility: hidden
}

.fixed {
	position: fixed
}

.absolute {
	position: absolute
}

.relative {
	position: relative
}

.inset-0 {
	inset: 0
}

.bottom-0 {
	bottom: 0
}

.bottom-20 {
	bottom: 5rem
}

.bottom-full {
	bottom: 100%
}

.left-0 {
	left: 0
}

.left-1\/2 {
	left: 50%
}

.left-1\/4 {
	left: 25%
}

.left-2 {
	left: .5rem
}

.left-3 {
	left: .75rem
}

.left-4 {
	left: 1rem
}

.left-6 {
	left: 1.5rem
}

.right-0 {
	right: 0
}

.right-1 {
	right: .25rem
}

.right-10 {
	right: 2.5rem
}

.right-2 {
	right: .5rem
}

.right-3 {
	right: .75rem
}

.right-5 {
	right: 1.25rem
}

.top-0 {
	top: 0
}

.top-1\/2 {
	top: 50%
}

.top-2 {
	top: .5rem
}

.top-3 {
	top: .75rem
}

.top-3\/4 {
	top: 75%
}

.top-\[30vh\] {
	top: 30vh
}

.top-full {
	top: 100%
}

.-z-10 {
	z-index: -10
}

.z-10 {
	z-index: 10
}

.z-40 {
	z-index: 40
}

.z-max {
	z-index: 99998
}

.m-0 {
	margin: 0
}

.m-auto {
	margin: auto
}

.mx-auto {
	margin-left: auto;
	margin-right: auto
}

.my-1 {
	margin-top: .25rem;
	margin-bottom: .25rem
}

.my-10 {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem
}

.my-12 {
	margin-top: 3rem;
	margin-bottom: 3rem
}

.my-2 {
	margin-top: .5rem;
	margin-bottom: .5rem
}

.my-4 {
	margin-top: 1rem;
	margin-bottom: 1rem
}

.my-5 {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem
}

.my-8 {
	margin-top: 2rem;
	margin-bottom: 2rem
}

.mb-1 {
	margin-bottom: .25rem
}

.mb-10 {
	margin-bottom: 2.5rem
}

.mb-2 {
	margin-bottom: .5rem
}

.mb-3 {
	margin-bottom: .75rem
}

.mb-5 {
	margin-bottom: 1.25rem
}

.ml-0\.5 {
	margin-left: .125rem
}

.ml-1 {
	margin-left: .25rem
}

.ml-2 {
	margin-left: .5rem
}

.ml-auto {
	margin-left: auto
}

.mr-1 {
	margin-right: .25rem
}

.mr-4 {
	margin-right: 1rem
}

.mr-auto {
	margin-right: auto
}

.mt-3 {
	margin-top: .75rem
}

.mt-4 {
	margin-top: 1rem
}

.mt-auto {
	margin-top: auto
}

.line-clamp-1 {
	-webkit-line-clamp: 1
}

.line-clamp-1,
.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical
}

.line-clamp-2 {
	-webkit-line-clamp: 2
}

.line-clamp-\[33\] {
	-webkit-line-clamp: 33
}

.line-clamp-\[33\],
.line-clamp-\[var\(--line-clamp-variable\)\] {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical
}

.line-clamp-\[var\(--line-clamp-variable\)\] {
	-webkit-line-clamp: var(--line-clamp-variable)
}

.line-clamp-none {
	overflow: visible;
	display: block;
	-webkit-box-orient: horizontal;
	-webkit-line-clamp: none
}

.block {
	display: block
}

.inline-block {
	display: inline-block
}

.inline {
	display: inline
}

.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}

.table-cell {
	display: table-cell
}

.grid {
	display: grid
}

.hidden {
	display: none
}

.h-0 {
	height: 0
}

.h-10 {
	height: 2.5rem
}

.h-12 {
	height: 3rem
}

.h-14 {
	height: 3.5rem
}

.h-2 {
	height: .5rem
}

.h-3 {
	height: .75rem
}

.h-5 {
	height: 1.25rem
}

.h-6 {
	height: 1.5rem
}

.h-7 {
	height: 1.75rem
}

.h-8 {
	height: 2rem
}

.h-\[100vh\] {
	height: 100vh
}

.h-\[120px\] {
	height: 120px
}

.h-\[1px\] {
	height: 1px
}

.h-\[30px\] {
	height: 30px
}

.h-\[40px\] {
	height: 40px
}

.h-\[50px\] {
	height: 50px
}

.h-\[60px\] {
	height: 60px
}

.h-\[65px\] {
	height: 65px
}

.h-auto {
	height: auto
}

.h-full {
	height: 100%
}

.h-screen {
	height: 100vh
}

.max-h-\[4\.3rem\] {
	max-height: 4.3rem
}

.max-h-\[70vh\] {
	max-height: 70vh
}

.min-h-full {
	min-height: 100%
}

.min-h-screen {
	min-height: 100vh
}

.w-0 {
	width: 0
}

.w-1 {
	width: .25rem
}

.w-10 {
	width: 2.5rem
}

.w-12 {
	width: 3rem
}

.w-14 {
	width: 3.5rem
}

.w-24 {
	width: 6rem
}

.w-3 {
	width: .75rem
}

.w-4\/12 {
	width: 33.333333%
}

.w-40 {
	width: 10rem
}

.w-48 {
	width: 12rem
}

.w-5 {
	width: 1.25rem
}

.w-5\/12 {
	width: 41.666667%
}

.w-6 {
	width: 1.5rem
}

.w-7 {
	width: 1.75rem
}

.w-8 {
	width: 2rem
}

.w-96 {
	width: 24rem
}

.w-\[120px\] {
	width: 120px
}

.w-\[1280px\] {
	width: 1280px
}

.w-\[190px\] {
	width: 190px
}

.w-\[256px\] {
	width: 256px
}

.w-\[40px\] {
	width: 40px
}

.w-\[50px\] {
	width: 50px
}

.w-\[60px\] {
	width: 60px
}

.w-auto {
	width: auto
}

.w-full {
	width: 100%
}

.w-screen {
	width: 100vw
}

.max-w-\[190px\] {
	max-width: 190px
}

.max-w-\[80vw\] {
	max-width: 80vw
}

.flex-auto {
	flex: 1 1 auto
}

.flex-initial {
	flex: 0 1 auto
}

.flex-none {
	flex: none
}

.flex-shrink,
.shrink {
	flex-shrink: 1
}

.shrink-0 {
	flex-shrink: 0
}

.flex-grow,
.grow {
	flex-grow: 1
}

.-translate-x-1\/2 {
	--tw-translate-x: -50%
}

.-translate-x-1\/2,
.-translate-x-full {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-full {
	--tw-translate-x: -100%
}

.-translate-y-1\/2 {
	--tw-translate-y: -50%
}

.-translate-y-1\/2 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-full {
	--tw-translate-y: -100%
}

.-translate-y-full,
.translate-x-0 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-0 {
	--tw-translate-x: 0px
}

.translate-x-5 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-5 {
	--tw-translate-x: 1.25rem
}

.translate-y-0 {
	--tw-translate-y: 0px
}

.translate-y-0 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-180 {
	--tw-rotate: 180deg
}

.rotate-180 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes ping {

	75%,
	to {
		transform: scale(2);
		opacity: 0
	}
}

.animate-ping {
	animation: 1s cubic-bezier(0, 0, .2, 1) infinite ping
}

@keyframes spin {
	to {
		transform: rotate(1turn)
	}
}

.animate-spin {
	animation: 1s linear infinite spin
}

.resize {
	resize: both
}

.list-inside {
	list-style-position: inside
}

.list-disc {
	list-style-type: disc
}

.flex-row {
	flex-direction: row
}

.flex-row-reverse {
	flex-direction: row-reverse
}

.flex-col {
	flex-direction: column
}

.flex-col-reverse {
	flex-direction: column-reverse
}

.flex-wrap {
	flex-wrap: wrap
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse
}

.flex-nowrap {
	flex-wrap: nowrap
}

.items-start {
	align-items: flex-start
}

.items-end {
	align-items: flex-end
}

.items-center {
	align-items: center
}

.items-baseline {
	align-items: baseline
}

.items-stretch {
	align-items: stretch
}

.justify-normal {
	justify-content: normal
}

.justify-start {
	justify-content: flex-start
}

.justify-end {
	justify-content: flex-end
}

.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}

.justify-around {
	justify-content: space-around
}

.justify-evenly {
	justify-content: space-evenly
}

.justify-stretch {
	justify-content: stretch
}

.justify-items-start {
	justify-items: start
}

.justify-items-end {
	justify-items: end
}

.justify-items-center {
	justify-items: center
}

.justify-items-stretch {
	justify-items: stretch
}

.gap-0 {
	gap: 0
}

.gap-1 {
	gap: .25rem
}

.gap-1\.5 {
	gap: .375rem
}

.gap-10 {
	gap: 2.5rem
}

.gap-12 {
	gap: 3rem
}

.gap-2 {
	gap: .5rem
}

.gap-3 {
	gap: .75rem
}

.gap-4 {
	gap: 1rem
}

.gap-5 {
	gap: 1.25rem
}

.gap-7 {
	gap: 1.75rem
}

.gap-8 {
	gap: 2rem
}

.gap-x-4 {
	-moz-column-gap: 1rem;
	column-gap: 1rem
}

.gap-y-2 {
	row-gap: .5rem
}

.gap-y-4 {
	row-gap: 1rem
}

.gap-y-7 {
	row-gap: 1.75rem
}

.justify-self-auto {
	justify-self: auto
}

.justify-self-start {
	justify-self: start
}

.justify-self-end {
	justify-self: end
}

.justify-self-center {
	justify-self: center
}

.justify-self-stretch {
	justify-self: stretch
}

.overflow-hidden {
	overflow: hidden
}

.overflow-y-auto {
	overflow-y: auto
}

.text-ellipsis {
	text-overflow: ellipsis
}

.text-clip {
	text-overflow: clip
}

.text-wrap {
	text-wrap: wrap
}

.text-nowrap {
	text-wrap: nowrap
}

.text-balance {
	text-wrap: balance
}

.text-pretty {
	text-wrap: pretty
}

.rounded {
	border-radius: .25rem
}

.rounded-full {
	border-radius: 9999px
}

.rounded-lg {
	border-radius: .5rem
}

.rounded-md {
	border-radius: .375rem
}

.rounded-xl {
	border-radius: .75rem
}

.rounded-b {
	border-bottom-right-radius: .25rem;
	border-bottom-left-radius: .25rem
}

.rounded-b-none {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0
}

.rounded-b-xl {
	border-bottom-right-radius: .75rem;
	border-bottom-left-radius: .75rem
}

.rounded-e {
	border-start-end-radius: .25rem;
	border-end-end-radius: .25rem
}

.rounded-e-none {
	border-start-end-radius: 0;
	border-end-end-radius: 0
}

.rounded-l {
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem
}

.rounded-r {
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem
}

.rounded-s {
	border-start-start-radius: .25rem;
	border-end-start-radius: .25rem
}

.rounded-t {
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem
}

.rounded-t-lg {
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem
}

.rounded-bl {
	border-bottom-left-radius: .25rem
}

.rounded-br {
	border-bottom-right-radius: .25rem
}

.rounded-ee {
	border-end-end-radius: .25rem
}

.rounded-es {
	border-end-start-radius: .25rem
}

.rounded-se {
	border-start-end-radius: .25rem
}

.rounded-ss {
	border-start-start-radius: .25rem
}

.rounded-tl {
	border-top-left-radius: .25rem
}

.rounded-tr {
	border-top-right-radius: .25rem
}

.border {
	border-width: 1px
}

.border-2 {
	border-width: 2px
}

.border-b {
	border-bottom-width: 1px
}

.border-gray-300 {
	--tw-border-opacity: 1;
	border-color: rgb(var(--gray-300)/var(--tw-border-opacity, 1))
}

.border-gray-500 {
	--tw-border-opacity: 1;
	border-color: rgb(var(--gray-500)/var(--tw-border-opacity, 1))
}

.border-gray-700 {
	--tw-border-opacity: 1;
	border-color: rgb(var(--gray-700)/var(--tw-border-opacity, 1))
}

.border-slate-100 {
	--tw-border-opacity: 1;
	border-color: rgb(241 245 249/var(--tw-border-opacity, 1))
}

.border-surface-primary {
	--tw-border-opacity: 1;
	border-color: rgb(99 102 241/var(--tw-border-opacity, 1))
}

.border-b-gray-800 {
	--tw-border-opacity: 1;
	border-bottom-color: rgb(var(--gray-800)/var(--tw-border-opacity, 1))
}

.bg-body {
	background-color: rgb(var(--body)/var(--tw-bg-opacity, 1))
}

.bg-body,
.bg-cat-cg {
	--tw-bg-opacity: 1
}

.bg-cat-cg {
	background-color: rgb(201 146 58/var(--tw-bg-opacity, 1))
}

.bg-cat-doujinshi {
	--tw-bg-opacity: 1;
	background-color: rgb(146 49 39/var(--tw-bg-opacity, 1))
}

.bg-cat-manga {
	--tw-bg-opacity: 1;
	background-color: rgb(206 113 56/var(--tw-bg-opacity, 1))
}

.bg-cat-western {
	--tw-bg-opacity: 1;
	background-color: rgb(10 123 18/var(--tw-bg-opacity, 1))
}

.bg-gray-100 {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-100)/var(--tw-bg-opacity, 1))
}

.bg-gray-700 {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-700)/var(--tw-bg-opacity, 1))
}

.bg-gray-800 {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-800)/var(--tw-bg-opacity, 1))
}

.bg-gray-800\/50 {
	background-color: rgb(var(--gray-800)/.5)
}

.bg-gray-900 {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-900)/var(--tw-bg-opacity, 1))
}

.bg-gray-950 {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-950)/var(--tw-bg-opacity, 1))
}

.bg-primary {
	--tw-bg-opacity: 1;
	background-color: rgb(239 38 241/var(--tw-bg-opacity, 1))
}

.bg-primary\/90 {
	background-color: rgba(239, 38, 241, .9)
}

.bg-secondary {
	--tw-bg-opacity: 1;
	background-color: rgb(66 97 250/var(--tw-bg-opacity, 1))
}

.bg-slate-900 {
	--tw-bg-opacity: 1;
	background-color: rgb(15 23 42/var(--tw-bg-opacity, 1))
}

.bg-slate-950 {
	--tw-bg-opacity: 1;
	background-color: rgb(2 6 23/var(--tw-bg-opacity, 1))
}

.bg-surface-primary {
	--tw-bg-opacity: 1;
	background-color: rgb(99 102 241/var(--tw-bg-opacity, 1))
}

.bg-opacity-20 {
	--tw-bg-opacity: 0.2
}

.bg-opacity-30 {
	--tw-bg-opacity: 0.3
}

.bg-opacity-50 {
	--tw-bg-opacity: 0.5
}

.bg-opacity-60 {
	--tw-bg-opacity: 0.6
}

.bg-opacity-70 {
	--tw-bg-opacity: 0.7
}

.bg-opacity-80 {
	--tw-bg-opacity: 0.8
}

.bg-bw {
	background-image: linear-gradient(to right bottom, #262626 40%, #fafafa)
}

.bg-full-color {
	background-image: linear-gradient(164deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82)
}

.fill-gray-300 {
	fill: rgb(var(--gray-300)/1)
}

.p-0 {
	padding: 0
}

.p-1 {
	padding: .25rem
}

.p-10 {
	padding: 2.5rem
}

.p-16 {
	padding: 4rem
}

.p-2 {
	padding: .5rem
}

.p-2\.5 {
	padding: .625rem
}

.p-3 {
	padding: .75rem
}

.p-4 {
	padding: 1rem
}

.p-5 {
	padding: 1.25rem
}

.px-1\.5 {
	padding-left: .375rem;
	padding-right: .375rem
}

.px-10 {
	padding-left: 2.5rem;
	padding-right: 2.5rem
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}

.px-3 {
	padding-left: .75rem;
	padding-right: .75rem
}

.px-3\.5 {
	padding-left: .875rem;
	padding-right: .875rem
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem
}

.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem
}

.py-0\.5 {
	padding-top: .125rem;
	padding-bottom: .125rem
}

.py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem
}

.py-1\.5 {
	padding-top: .375rem;
	padding-bottom: .375rem
}

.py-10 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem
}

.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem
}

.py-2\.5 {
	padding-top: .625rem;
	padding-bottom: .625rem
}

.py-3 {
	padding-top: .75rem;
	padding-bottom: .75rem
}

.py-3\.5 {
	padding-top: .875rem;
	padding-bottom: .875rem
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem
}

.py-5 {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem
}

.py-6 {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem
}

.py-8 {
	padding-top: 2rem;
	padding-bottom: 2rem
}

.\!pl-14 {
	padding-left: 3.5rem !important
}

.\!pr-6 {
	padding-right: 1.5rem !important
}

.pb-1 {
	padding-bottom: .25rem
}

.pb-10 {
	padding-bottom: 2.5rem
}

.pb-2 {
	padding-bottom: .5rem
}

.pb-3 {
	padding-bottom: .75rem
}

.pb-5 {
	padding-bottom: 1.25rem
}

.pl-0 {
	padding-left: 0
}

.pl-1 {
	padding-left: .25rem
}

.pl-2 {
	padding-left: .5rem
}

.pl-3 {
	padding-left: .75rem
}

.pl-4 {
	padding-left: 1rem
}

.pl-6 {
	padding-left: 1.5rem
}

.pl-8 {
	padding-left: 2rem
}

.pr-1 {
	padding-right: .25rem
}

.pr-1\.5 {
	padding-right: .375rem
}

.pr-14 {
	padding-right: 3.5rem
}

.pr-2 {
	padding-right: .5rem
}

.pr-3 {
	padding-right: .75rem
}

.pr-4 {
	padding-right: 1rem
}

.pr-5 {
	padding-right: 1.25rem
}

.pr-8 {
	padding-right: 2rem
}

.pr-\[10vw\] {
	padding-right: 10vw
}

.pt-0\.5 {
	padding-top: .125rem
}

.pt-10 {
	padding-top: 2.5rem
}

.pt-28 {
	padding-top: 7rem
}

.pt-8 {
	padding-top: 2rem
}

.pt-\[2px\] {
	padding-top: 2px
}

.text-left {
	text-align: left
}

.text-center {
	text-align: center
}

.text-right {
	text-align: right
}

.text-justify {
	text-align: justify
}

.text-start {
	text-align: start
}

.text-end {
	text-align: end
}

.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem
}

.text-\[\.5rem\] {
	font-size: .5rem
}

.text-\[10px\] {
	font-size: 10px
}

.text-\[50px\] {
	font-size: 50px
}

.text-\[9px\] {
	font-size: 9px
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem
}

.text-md {
	font-size: 15px
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem
}

.text-xs {
	font-size: .75rem;
	line-height: 1rem
}

.text-xsm {
	font-size: 13px
}

.font-bold {
	font-weight: 700
}

.font-medium {
	font-weight: 500
}

.font-semibold {
	font-weight: 600
}

.leading-5 {
	line-height: 1.25rem
}

.leading-6 {
	line-height: 1.5rem
}

.leading-8 {
	line-height: 2rem
}

.leading-tight {
	line-height: 1.25
}

.text-error {
	--tw-text-opacity: 1;
	color: rgb(255 109 100/var(--tw-text-opacity, 1))
}

.text-gray-100 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-100)/var(--tw-text-opacity, 1))
}

.text-gray-200 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-200)/var(--tw-text-opacity, 1))
}

.text-gray-300 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-300)/var(--tw-text-opacity, 1))
}

.text-gray-400 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-400)/var(--tw-text-opacity, 1))
}

.text-gray-50 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-50)/var(--tw-text-opacity, 1))
}

.text-gray-500 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-500)/var(--tw-text-opacity, 1))
}

.text-gray-600 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-600)/var(--tw-text-opacity, 1))
}

.text-gray-700 {
	--tw-text-opacity: 1;
	color: rgb(var(--gray-700)/var(--tw-text-opacity, 1))
}

.text-green-500 {
	--tw-text-opacity: 1;
	color: rgb(34 197 94/var(--tw-text-opacity, 1))
}

.text-neutral-100 {
	--tw-text-opacity: 1;
	color: rgb(245 245 245/var(--tw-text-opacity, 1))
}

.text-orange-500 {
	--tw-text-opacity: 1;
	color: rgb(249 115 22/var(--tw-text-opacity, 1))
}

.text-primary {
	--tw-text-opacity: 1;
	color: rgb(239 38 241/var(--tw-text-opacity, 1))
}

.text-red-400 {
	--tw-text-opacity: 1;
	color: rgb(248 113 113/var(--tw-text-opacity, 1))
}

.text-secondary {
	--tw-text-opacity: 1;
	color: rgb(66 97 250/var(--tw-text-opacity, 1))
}

.text-slate-100 {
	--tw-text-opacity: 1;
	color: rgb(241 245 249/var(--tw-text-opacity, 1))
}

.text-success {
	--tw-text-opacity: 1;
	color: rgb(46 201 116/var(--tw-text-opacity, 1))
}

.text-surface-primary {
	--tw-text-opacity: 1;
	color: rgb(99 102 241/var(--tw-text-opacity, 1))
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.opacity-0 {
	opacity: 0
}

.opacity-100 {
	opacity: 1
}

.shadow-2xl {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color)
}

.blur {
	--tw-blur: blur(8px)
}

.blur {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-xs {
	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-xs {
	--tw-backdrop-blur: blur(1px)
}

.\!transition-\[width\] {
	transition-property: width !important;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
	transition-duration: .15s !important
}

.transition {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[height\] {
	transition-property: height;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[left\2c transform\] {
	transition-property: left, transform;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[padding-left\] {
	transition-property: padding-left;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[padding\] {
	transition-property: padding;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[top\2c opacity\] {
	transition-property: top, opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-\[width\] {
	transition-property: width;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.duration-100 {
	transition-duration: .1s
}

.duration-200 {
	transition-duration: .2s
}

.duration-300 {
	transition-duration: .3s
}

.duration-500 {
	transition-duration: .5s
}

.duration-700 {
	transition-duration: .7s
}

.ease-in {
	transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.ease-in-out {
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.will-change-transform {
	will-change: transform
}

button:disabled {
	opacity: .5
}

.group\/html.sidebar-minimized .group-\[\.sidebar-minimized\]\/html\:flex-col {
	display: flex
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:flex-center-center {
	display: flex;
	align-items: center;
	justify-content: center
}

.dark\:prose:where(.dark, .dark *) {
	color: var(--tw-prose-body);
	max-width: 65ch
}

.dark\:prose:where(.dark, .dark *) :where(p):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 1.25em;
	margin-bottom: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where([class~=lead]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-lead);
	font-size: 1.25em;
	line-height: 1.6;
	margin-top: 1.2em;
	margin-bottom: 1.2em
}

.dark\:prose:where(.dark, .dark *) :where(a):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-links);
	text-decoration: underline;
	font-weight: 500
}

.dark\:prose:where(.dark, .dark *) :where(strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-bold);
	font-weight: 600
}

.dark\:prose:where(.dark, .dark *) :where(a strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(blockquote strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(thead th strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: decimal;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	padding-left: 1.625em
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=A]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: upper-alpha
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=a]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: lower-alpha
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=A s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: upper-alpha
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=a s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: lower-alpha
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=I]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: upper-roman
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=i]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: lower-roman
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=I s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: upper-roman
}

.dark\:prose:where(.dark, .dark *) :where(ol[type=i s]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: lower-roman
}

.dark\:prose:where(.dark, .dark *) :where(ol[type="1"]):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: decimal
}

.dark\:prose:where(.dark, .dark *) :where(ul):not(:where([class~=not-prose], [class~=not-prose] *)) {
	list-style-type: disc;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	padding-left: 1.625em
}

.dark\:prose:where(.dark, .dark *) :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
	font-weight: 400;
	color: var(--tw-prose-counters)
}

.dark\:prose:where(.dark, .dark *) :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *))::marker {
	color: var(--tw-prose-bullets)
}

.dark\:prose:where(.dark, .dark *) :where(dt):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 600;
	margin-top: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(hr):not(:where([class~=not-prose], [class~=not-prose] *)) {
	border-color: var(--tw-prose-hr);
	border-top-width: 1px;
	margin-top: 3em;
	margin-bottom: 3em
}

.dark\:prose:where(.dark, .dark *) :where(blockquote):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 500;
	font-style: italic;
	color: var(--tw-prose-quotes);
	border-left-width: .25rem;
	border-left-color: var(--tw-prose-quote-borders);
	quotes: "\201C" "\201D" "\2018" "\2019";
	margin-top: 1.6em;
	margin-bottom: 1.6em;
	padding-left: 1em
}

.dark\:prose:where(.dark, .dark *) :where(blockquote p:first-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):before {
	content: open-quote
}

.dark\:prose:where(.dark, .dark *) :where(blockquote p:last-of-type):not(:where([class~=not-prose], [class~=not-prose] *)):after {
	content: close-quote
}

.dark\:prose:where(.dark, .dark *) :where(h1):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 800;
	font-size: 2.25em;
	margin-top: 0;
	margin-bottom: .8888889em;
	line-height: 1.1111111
}

.dark\:prose:where(.dark, .dark *) :where(h1 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 900;
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 700;
	font-size: 1.5em;
	margin-top: 2em;
	margin-bottom: 1em;
	line-height: 1.3333333
}

.dark\:prose:where(.dark, .dark *) :where(h2 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 800;
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 600;
	font-size: 1.25em;
	margin-top: 1.6em;
	margin-bottom: .6em;
	line-height: 1.6
}

.dark\:prose:where(.dark, .dark *) :where(h3 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 700;
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(h4):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 600;
	margin-top: 1.5em;
	margin-bottom: .5em;
	line-height: 1.5
}

.dark\:prose:where(.dark, .dark *) :where(h4 strong):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 700;
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(img):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 2em;
	margin-bottom: 2em
}

.dark\:prose:where(.dark, .dark *) :where(picture):not(:where([class~=not-prose], [class~=not-prose] *)) {
	display: block;
	margin-top: 2em;
	margin-bottom: 2em
}

.dark\:prose:where(.dark, .dark *) :where(kbd):not(:where([class~=not-prose], [class~=not-prose] *)) {
	font-weight: 500;
	font-family: inherit;
	color: var(--tw-prose-kbd);
	box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows)/10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows)/10%);
	font-size: .875em;
	border-radius: .3125rem;
	padding: .1875em .375em
}

.dark\:prose:where(.dark, .dark *) :where(code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-code);
	font-weight: 600;
	font-size: .875em
}

.dark\:prose:where(.dark, .dark *) :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):before {
	content: "`"
}

.dark\:prose:where(.dark, .dark *) :where(code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
	content: "`"
}

.dark\:prose:where(.dark, .dark *) :where(a code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(h1 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(h2 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit;
	font-size: .875em
}

.dark\:prose:where(.dark, .dark *) :where(h3 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit;
	font-size: .9em
}

.dark\:prose:where(.dark, .dark *) :where(h4 code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(blockquote code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(thead th code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: inherit
}

.dark\:prose:where(.dark, .dark *) :where(pre):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-pre-code);
	background-color: var(--tw-prose-pre-bg);
	overflow-x: auto;
	font-weight: 400;
	font-size: .875em;
	line-height: 1.7142857;
	margin-top: 1.7142857em;
	margin-bottom: 1.7142857em;
	border-radius: .375rem;
	padding: .8571429em 1.1428571em
}

.dark\:prose:where(.dark, .dark *) :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)) {
	background-color: transparent;
	border-width: 0;
	border-radius: 0;
	padding: 0;
	font-weight: inherit;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit
}

.dark\:prose:where(.dark, .dark *) :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):before {
	content: none
}

.dark\:prose:where(.dark, .dark *) :where(pre code):not(:where([class~=not-prose], [class~=not-prose] *)):after {
	content: none
}

.dark\:prose:where(.dark, .dark *) :where(table):not(:where([class~=not-prose], [class~=not-prose] *)) {
	width: 100%;
	table-layout: auto;
	text-align: left;
	margin-top: 2em;
	margin-bottom: 2em;
	font-size: .875em;
	line-height: 1.7142857
}

.dark\:prose:where(.dark, .dark *) :where(thead):not(:where([class~=not-prose], [class~=not-prose] *)) {
	border-bottom-width: 1px;
	border-bottom-color: var(--tw-prose-th-borders)
}

.dark\:prose:where(.dark, .dark *) :where(thead th):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-headings);
	font-weight: 600;
	vertical-align: bottom;
	padding-right: .5714286em;
	padding-bottom: .5714286em;
	padding-left: .5714286em
}

.dark\:prose:where(.dark, .dark *) :where(tbody tr):not(:where([class~=not-prose], [class~=not-prose] *)) {
	border-bottom-width: 1px;
	border-bottom-color: var(--tw-prose-td-borders)
}

.dark\:prose:where(.dark, .dark *) :where(tbody tr:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	border-bottom-width: 0
}

.dark\:prose:where(.dark, .dark *) :where(tbody td):not(:where([class~=not-prose], [class~=not-prose] *)) {
	vertical-align: baseline
}

.dark\:prose:where(.dark, .dark *) :where(tfoot):not(:where([class~=not-prose], [class~=not-prose] *)) {
	border-top-width: 1px;
	border-top-color: var(--tw-prose-th-borders)
}

.dark\:prose:where(.dark, .dark *) :where(tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
	vertical-align: top
}

.dark\:prose:where(.dark, .dark *) :where(figure>*):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0;
	margin-bottom: 0
}

.dark\:prose:where(.dark, .dark *) :where(figcaption):not(:where([class~=not-prose], [class~=not-prose] *)) {
	color: var(--tw-prose-captions);
	font-size: .875em;
	line-height: 1.4285714;
	margin-top: .8571429em
}

.dark\:prose:where(.dark, .dark *) {
	--tw-prose-body: oklch(37.3% 0.034 259.733);
	--tw-prose-headings: oklch(21% 0.034 264.665);
	--tw-prose-lead: oklch(44.6% 0.03 256.802);
	--tw-prose-links: oklch(21% 0.034 264.665);
	--tw-prose-bold: oklch(21% 0.034 264.665);
	--tw-prose-counters: oklch(55.1% 0.027 264.364);
	--tw-prose-bullets: oklch(87.2% 0.01 258.338);
	--tw-prose-hr: oklch(92.8% 0.006 264.531);
	--tw-prose-quotes: oklch(21% 0.034 264.665);
	--tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
	--tw-prose-captions: oklch(55.1% 0.027 264.364);
	--tw-prose-kbd: oklch(21% 0.034 264.665);
	--tw-prose-kbd-shadows: NaN NaN NaN;
	--tw-prose-code: oklch(21% 0.034 264.665);
	--tw-prose-pre-code: oklch(92.8% 0.006 264.531);
	--tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
	--tw-prose-th-borders: oklch(87.2% 0.01 258.338);
	--tw-prose-td-borders: oklch(92.8% 0.006 264.531);
	--tw-prose-invert-body: oklch(87.2% 0.01 258.338);
	--tw-prose-invert-headings: #fff;
	--tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
	--tw-prose-invert-links: #fff;
	--tw-prose-invert-bold: #fff;
	--tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
	--tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
	--tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
	--tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
	--tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
	--tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
	--tw-prose-invert-kbd: #fff;
	--tw-prose-invert-kbd-shadows: 255 255 255;
	--tw-prose-invert-code: #fff;
	--tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
	--tw-prose-invert-pre-bg: rgba(0, 0, 0, .5);
	--tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
	--tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
	font-size: 1rem;
	line-height: 1.75
}

.dark\:prose:where(.dark, .dark *) :where(picture>img):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0;
	margin-bottom: 0
}

.dark\:prose:where(.dark, .dark *) :where(video):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 2em;
	margin-bottom: 2em
}

.dark\:prose:where(.dark, .dark *) :where(li):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: .5em;
	margin-bottom: .5em
}

.dark\:prose:where(.dark, .dark *) :where(ol>li):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-left: .375em
}

.dark\:prose:where(.dark, .dark *) :where(ul>li):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-left: .375em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>ul>li p):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: .75em;
	margin-bottom: .75em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>ul>li>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>ul>li>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-bottom: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>ol>li>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>ol>li>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-bottom: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: .75em;
	margin-bottom: .75em
}

.dark\:prose:where(.dark, .dark *) :where(dl):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 1.25em;
	margin-bottom: 1.25em
}

.dark\:prose:where(.dark, .dark *) :where(dd):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: .5em;
	padding-left: 1.625em
}

.dark\:prose:where(.dark, .dark *) :where(hr+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0
}

.dark\:prose:where(.dark, .dark *) :where(h2+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0
}

.dark\:prose:where(.dark, .dark *) :where(h3+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0
}

.dark\:prose:where(.dark, .dark *) :where(h4+*):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0
}

.dark\:prose:where(.dark, .dark *) :where(thead th:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-left: 0
}

.dark\:prose:where(.dark, .dark *) :where(thead th:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-right: 0
}

.dark\:prose:where(.dark, .dark *) :where(tbody td, tfoot td):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding: .5714286em
}

.dark\:prose:where(.dark, .dark *) :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-left: 0
}

.dark\:prose:where(.dark, .dark *) :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	padding-right: 0
}

.dark\:prose:where(.dark, .dark *) :where(figure):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 2em;
	margin-bottom: 2em
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>:first-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-top: 0
}

.dark\:prose:where(.dark, .dark *) :where(.dark\:prose:where(.dark, .dark *)>:last-child):not(:where([class~=not-prose], [class~=not-prose] *)) {
	margin-bottom: 0
}

.dark\:prose-invert:where(.dark, .dark *) {
	--tw-prose-body: var(--tw-prose-invert-body);
	--tw-prose-headings: var(--tw-prose-invert-headings);
	--tw-prose-lead: var(--tw-prose-invert-lead);
	--tw-prose-links: var(--tw-prose-invert-links);
	--tw-prose-bold: var(--tw-prose-invert-bold);
	--tw-prose-counters: var(--tw-prose-invert-counters);
	--tw-prose-bullets: var(--tw-prose-invert-bullets);
	--tw-prose-hr: var(--tw-prose-invert-hr);
	--tw-prose-quotes: var(--tw-prose-invert-quotes);
	--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
	--tw-prose-captions: var(--tw-prose-invert-captions);
	--tw-prose-kbd: var(--tw-prose-invert-kbd);
	--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
	--tw-prose-code: var(--tw-prose-invert-code);
	--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
	--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
	--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
	--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}

.\*\:h-full>* {
	height: 100%
}

.\*\:w-full>* {
	width: 100%
}

.\*\:fill-gray-300>* {
	fill: rgb(var(--gray-300)/1)
}

.\*\:fill-gray-400>* {
	fill: rgb(var(--gray-400)/1)
}

.\*\:fill-gray-500>* {
	fill: rgb(var(--gray-500)/1)
}

.marker\:mr-2 ::marker {
	margin-right: .5rem
}

.marker\:mr-2::marker {
	margin-right: .5rem
}

.after\:content-none:after {
	--tw-content: none;
	content: var(--tw-content)
}

.hover\:bg-\[\#00000017\]:hover {
	background-color: #00000017
}

.hover\:bg-gray-800:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-800)/var(--tw-bg-opacity, 1))
}

.hover\:bg-secondary\/90:hover {
	background-color: rgba(66, 97, 250, .9)
}

.focus\:border-surface-primary:focus {
	--tw-border-opacity: 1;
	border-color: rgb(99 102 241/var(--tw-border-opacity, 1))
}

.focus\:bg-transparent:focus {
	background-color: transparent
}

.focus\:outline-0:focus {
	outline-width: 0
}

.focus\:ring-0:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.focus\:ring-0:focus,
.focus\:ring-2:focus {
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-2:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.group\/manga-item:hover .group-hover\/manga-item\:visible {
	visibility: visible
}

.group\/manga-item:hover .group-hover\/manga-item\:opacity-100 {
	opacity: 1
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:visible,
.group\/quick-search-form.focusing .group-\[\.focusing\]\/quick-search-form\:visible {
	visibility: visible
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:top-full {
	top: 100%
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:block,
.group\/body.searching .group-\[\.searching\]\/body\:block,
.group\/html.dark .group-\[\.dark\]\/html\:block,
.group\/html.sidebar-expanded .group-\[\.sidebar-expanded\]\/html\:block,
.group\/results.has-mangas .group-\[\.has-mangas\]\/results\:block,
.group\/results.has-tags .group-\[\.has-tags\]\/results\:block,
.group\/results.no-results .group-\[\.no-results\]\/results\:block {
	display: block
}

.group\/body.searching .group-\[\.searching\]\/body\:inline-block {
	display: inline-block
}

.group\/modal.loading .group-\[\&\.loading\]\/modal\:flex,
.group\/modal.success .group-\[\&\.success\]\/modal\:flex,
.group\/password.text-mode .group-\[\&\.text-mode\]\/password\:flex {
	display: flex
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:hidden,
.group\/body.searching .group-\[\.searching\]\/body\:hidden,
.group\/html.dark .group-\[\.dark\]\/html\:hidden,
.group\/html.sidebar-minimized .group-\[\.sidebar-minimized\]\/html\:hidden,
.group\/modal.loading .group-\[\&\.loading\]\/modal\:hidden,
.group\/modal.success .group-\[\&\.success\]\/modal\:hidden,
.group\/password.text-mode .group-\[\&\.text-mode\]\/password\:hidden {
	display: none
}

.group\/reading-images.fit-height .group-\[\&\.fit-height\]\/reading-images\:h-full {
	height: 100%
}

.group\/reading-images.fit-height .group-\[\&\.fit-height\]\/reading-images\:max-h-screen {
	max-height: 100vh
}

.group\/reading-images.fit-height .group-\[\&\.fit-height\]\/reading-images\:w-full {
	width: 100%
}

.group\/reading-images.fit-height .group-\[\&\.fit-height\]\/reading-images\:max-w-full {
	max-width: 100%
}

.group\/html.sidebar-expanded .group-\[\.sidebar-expanded\]\/html\:translate-x-0 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group\/html.sidebar-expanded .group-\[\.sidebar-expanded\]\/html\:translate-x-0 {
	--tw-translate-x: 0px
}

.group\/html.sidebar-minimized .group-\[\.sidebar-minimized\]\/html\:translate-x-1 {
	--tw-translate-x: 0.25rem;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group\/html.sidebar-minimized .group-\[\.sidebar-minimized\]\/html\:flex-col {
	flex-direction: column
}

.group\/manga-item.current .group-\[\&\.current\]\/manga-item\:bg-primary {
	--tw-bg-opacity: 1;
	background-color: rgb(239 38 241/var(--tw-bg-opacity, 1))
}

.group\/reading-images.fit-height .group-\[\&\.fit-height\]\/reading-images\:object-contain {
	-o-object-fit: contain;
	object-fit: contain
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:pt-\[120px\] {
	padding-top: 120px
}

.group\/html:not(.sidebar-none) .group-\[\:not\(\.sidebar-none\)\]\/html\:pt-\[68px\] {
	padding-top: 68px
}

.group\/body.quick-search-active .group-\[\.quick-search-active\]\/body\:opacity-100,
.group\/quick-search-form.focusing .group-\[\.focusing\]\/quick-search-form\:opacity-100 {
	opacity: 1
}

.group\/parent-menu[data-collapse=yes] .group-data-\[collapse\=yes\]\/parent-menu\:rotate-0 {
	--tw-rotate: 0deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width:375px) {
	.xs\:h-12 {
		height: 3rem
	}

	.xs\:w-12 {
		width: 3rem
	}
}

@media (min-width:640px) {
	.sm\:inline {
		display: inline
	}

	.sm\:h-11 {
		height: 2.75rem
	}

	.sm\:max-h-\[3\.55rem\] {
		max-height: 3.55rem
	}

	.sm\:w-11 {
		width: 2.75rem
	}

	.sm\:items-center {
		align-items: center
	}

	.sm\:p-0 {
		padding: 0
	}

	.sm\:px-1\.5 {
		padding-left: .375rem;
		padding-right: .375rem
	}

	.sm\:py-0 {
		padding-top: 0;
		padding-bottom: 0
	}
}

@media (min-width:768px) {
	.md\:block {
		display: block
	}

	.md\:inline-block {
		display: inline-block
	}

	.md\:w-auto {
		width: auto
	}

	.md\:px-5 {
		padding-left: 1.25rem;
		padding-right: 1.25rem
	}

	.md\:pt-10 {
		padding-top: 2.5rem
	}
}

@media (min-width:1024px) {
	.lg\:visible {
		visibility: visible
	}

	.lg\:static {
		position: static
	}

	.lg\:left-\[300px\] {
		left: 300px
	}

	.lg\:z-0 {
		z-index: 0
	}

	.lg\:z-40 {
		z-index: 40
	}

	.lg\:mr-10 {
		margin-right: 2.5rem
	}

	.lg\:block {
		display: block
	}

	.lg\:flex {
		display: flex
	}

	.lg\:hidden {
		display: none
	}

	.lg\:w-\[300px\] {
		width: 300px
	}

	.lg\:w-\[350px\] {
		width: 350px
	}

	.lg\:max-w-\[350px\] {
		max-width: 350px
	}

	.lg\:max-w-\[430px\] {
		max-width: 430px
	}

	.lg\:grow-0 {
		flex-grow: 0
	}

	.lg\:translate-x-0 {
		--tw-translate-x: 0px;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
	}

	.lg\:transform-none {
		transform: none
	}

	.lg\:gap-3 {
		gap: .75rem
	}

	.lg\:p-0 {
		padding: 0
	}

	.lg\:px-5 {
		padding-left: 1.25rem;
		padding-right: 1.25rem
	}

	.lg\:py-5 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem
	}

	.lg\:opacity-100 {
		opacity: 1
	}

	.lg\:transition-\[width\] {
		transition-property: width;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .15s
	}

	.lg\:duration-300 {
		transition-duration: .3s
	}

	.lg\:duration-500 {
		transition-duration: .5s
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:left-\[88px\] {
		left: 88px
	}

	.group\/html.sidebar-expanded .lg\:group-\[\.sidebar-expanded\]\/html\:hidden {
		display: none
	}

	.group\/body.quick-search-active .lg\:group-\[\.quick-search-active\]\/body\:w-\[430px\],
	.group\/quick-search-form.focusing .lg\:group-\[\.focusing\]\/quick-search-form\:w-\[430px\] {
		width: 430px
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:w-0 {
		width: 0
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:w-\[88px\] {
		width: 88px
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:-translate-x-\[170\%\] {
		--tw-translate-x: -170%
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:-translate-x-\[170\%\],
	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:translate-x-\[170\%\] {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:translate-x-\[170\%\] {
		--tw-translate-x: 170%
	}

	.group\/body.quick-search-active .lg\:group-\[\.quick-search-active\]\/body\:transform-none {
		transform: none
	}

	.group\/html.sidebar-minimized .lg\:group-\[\.sidebar-minimized\]\/html\:pl-\[88px\] {
		padding-left: 88px
	}

	.group\/html:not(.sidebar-none):not(.sidebar-minimized) .lg\:group-\[\:not\(\.sidebar-none\)\:not\(\.sidebar-minimized\)\]\/html\:pl-\[300px\] {
		padding-left: 300px
	}

	.group\/html:not(.sidebar-none) .lg\:group-\[\:not\(\.sidebar-none\)\]\/html\:pt-\[90px\] {
		padding-top: 90px
	}
}

@media (min-width:1280px) {
	.xl\:max-h-\[4\.3rem\] {
		max-height: 4.3rem
	}

	.xl\:gap-2 {
		gap: .5rem
	}

	.xl\:px-2 {
		padding-left: .5rem;
		padding-right: .5rem
	}

	.xl\:py-0\.5 {
		padding-top: .125rem;
		padding-bottom: .125rem
	}
}

@media (min-width:1536px) {
	.\32xl\:h-10 {
		height: 2.5rem
	}

	.\32xl\:w-10 {
		width: 2.5rem
	}

	.\32xl\:text-3xl {
		font-size: 1.875rem;
		line-height: 2.25rem
	}

	.\32xl\:leading-10 {
		line-height: 2.5rem
	}
}

@media (min-width:2048px) {
	.\33xl\:-translate-x-\[170\%\] {
		--tw-translate-x: -170%
	}

	.\33xl\:-translate-x-\[170\%\],
	.\33xl\:translate-x-\[170\%\] {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
	}

	.\33xl\:translate-x-\[170\%\] {
		--tw-translate-x: 170%
	}
}

.dark\:border-gray-600:where(.dark, .dark *) {
	--tw-border-opacity: 1;
	border-color: rgb(var(--gray-600)/var(--tw-border-opacity, 1))
}

.dark\:bg-gray-700:where(.dark, .dark *) {
	--tw-bg-opacity: 1;
	background-color: rgb(var(--gray-700)/var(--tw-bg-opacity, 1))
}

.dark\:ring-offset-gray-800:where(.dark, .dark *) {
	--tw-ring-offset-color: rgb(var(--gray-800)/1)
}

.dark\:hover\:bg-gray-950\/30:hover:where(.dark, .dark *) {
	background-color: rgb(var(--gray-950)/.3)
}

.\[\&\.swiper-button-disabled\]\:bg-gray-900\/90.swiper-button-disabled {
	background-color: rgb(var(--gray-900)/.9)
}

#menu-item-250287>a>i:before {
	content: '';
	width: 24px;
	height: 24px;
	background-image: url(../images/logo.png);
	background-size: cover
}


/* Manga Card & Hover Effects */
.manga-item {
	position: relative;
}

/* Card Wrapper */
.manga-item__wrapper {
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	/* bg-gray-800 */
	border-radius: 0.375rem !important;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Top Bar Separator */
.manga-item__top>div {
	background-color: var(--custom-theme-veba-bg-card) !important;
	/* bg-gray-900 */
	padding: 0.5rem 0.75rem !important;
}

/* Cover Image Container & Scale Zoom (Centered translation preserved!) */
.manga-item__img {
	overflow: hidden;
	position: relative;
	width: 100%;
	padding-top: 133.33%;
	border-radius: 0 !important;
}

.manga-item__img img,
.manga-item__img-inner {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 100% !important;
	max-width: 110% !important;
	transform: translate(-50%, -50%) scale(1) !important;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform;
}

.manga-item:hover .manga-item__img-inner,
.group\/manga-item:hover .manga-item__img-inner {
	width: 100% !important;
	transform: translate(-50%, -50%) scale(1.06) !important;
}

/* Hover Detail Card Glassmorphism Overlay */
.manga-item__detail {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	inset: 0 !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
	z-index: 20 !important;
	padding: 1rem !important;
	text-align: center;
}

.manga-item:hover .manga-item__detail {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Alternative & Dynamic Titles inside Hover Overlay */
.manga-item__detail>div:nth-child(1) {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin-bottom: 0.25rem !important;
	text-transform: capitalize;
}

.manga-item__detail>div:nth-child(2),
.manga-item__detail>div:nth-child(3) {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--custom-theme-veba-text-muted) !important;
}

/* Tags inside Hover */
.manga-item__tags {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 0.375rem !important;
	max-h: 4.5rem !important;
	overflow-y: auto !important;
	margin: 0.5rem 0 !important;
}

.manga-item__tags span {
	font-size: 9px !important;
	background-color: #4261fa !important;
	color: #fff !important;
	padding: 0.15rem 0.5rem !important;
	border-radius: 9999px !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease !important;
}

.manga-item__tags span:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	/* Tag changes to active pink on hover! */
}

/* Custom Read Button inside Hover */
.manga-item .btn-read {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 9999px !important;
	background-color: var(--custom-theme-veba-primary) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	padding: 0.5rem 2rem !important;
	position: relative !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	overflow: hidden !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.manga-item .btn-read:hover {
	padding-left: 1.5rem !important;
	padding-right: 3rem !important;
	background-color: var(--custom-theme-veba-primary-hover) !important;
}

.manga-item .btn-read .btn-icon {
	position: absolute !important;
	right: 0.75rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(0, 0, 0, 0.4) !important;
	border-radius: 50% !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	opacity: 0 !important;
	transform: translateX(10px) !important;
	transition: opacity 0.3s, transform 0.3s !important;
}

.manga-item .btn-read .btn-icon i {
	font-size: 10px !important;
	color: #fff !important;
}

.manga-item .btn-read:hover .btn-icon {
	opacity: 1 !important;
	transform: translateX(0) !important;
}

/* Category Badge Hover Effect */
.manga-item__cat-link {
	transition: all 0.2s ease !important;
}

.manga-item__cat-link:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.15) !important;
}

/* Black & White Badge Clean Styling */
.manga-item .bg-bw {
	background: linear-gradient(135deg, #4b5563, var(--custom-theme-veba-bg-card-secondary)) !important;
}

/* Title Dynamic Hover Link Pink Transition */
.manga-item__link {
	transition: color 0.2s ease !important;
}

.manga-item:hover .manga-item__link {
	color: var(--custom-theme-veba-primary) !important;
}

/* Colored Metadata Icons */
.manga-item .fa-eye {
	color: var(--custom-theme-veba-text-muted) !important;
	/* Soft steel gray */
}

.manga-item .fa-star {
	color: #fbbf24 !important;
	/* Gold/Amber Star */
}

.manga-item .fa-images {
	color: #60a5fa !important;
	/* Soft Blue Pages */
}

/* Responsive Grid Gap & Air Layout Overrides */
.manga-grid.grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1rem !important;
	padding: 0.5rem 0 !important;
}

@media (min-width: 640px) {
	.manga-grid.grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

@media (min-width: 768px) {
	.manga-grid.grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 1.5rem !important;
	}
}

@media (min-width: 1280px) {
	.manga-grid.grid {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: 1.75rem !important;
	}
}

@media (min-width: 1536px) {
	.manga-grid.grid {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		gap: 2rem !important;
	}
}

/* Swiper Slider Slide Padding to Prevent Elevate/Transform Clipping */
.manga-swiper {
	overflow: visible !important;
}

.manga-swiper .swiper {
	overflow: visible !important;
}

.manga-swiper .swiper-slide {
	padding: 12px 8px 18px 8px !important;
	overflow: visible !important;
}

.manga-swiper .swiper-wrapper {
	overflow: visible !important;
}

/* ==========================================================================
 Veba Custom Theme Responsive Header, Sidebar & Desktop Left Layout Shifting
 ========================================================================== */

/* Shifting the main content container and header on Desktop screens */
@media (min-width: 1024px) {
	.wrap {
		padding-left: 300px !important;
		padding-top: 80px !important;
		transition: padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.3s ease !important;
	}

	.veba-custom-theme-header {
		left: 300px !important;
		width: calc(100% - 300px) !important;
	}

	/* When Sidebar is Minimized */
	html.sidebar-minimized .wrap {
		padding-left: 88px !important;
	}

	html.sidebar-minimized .veba-custom-theme-header {
		left: 88px !important;
		width: calc(100% - 88px) !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar {
		width: 88px !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar #logo {
		padding-left: 0 !important;
		transform: none !important;
		justify-content: center !important;
	}

	html.sidebar-minimized .veba-custom-theme-logo-suffix {
		width: 0 !important;
		opacity: 0 !important;
		margin-left: 0 !important;
		display: none !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar-footer,
	html.sidebar-minimized .veba-custom-theme-sidebar nav span,
	html.sidebar-minimized .veba-custom-theme-sidebar nav .ml-auto {
		display: none !important;
		opacity: 0 !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar nav ul.menu li a {
		justify-content: center !important;
		padding: 0.75rem 0 !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar nav ul.menu li a svg {
		margin-right: 0 !important;
	}

	html.sidebar-minimized .veba-custom-theme-sidebar nav ul.veba-custom-theme-submenu {
		display: none !important;
	}
}

/* Smooth Sidebar Dropdown Transitions */
.veba-custom-theme-submenu {
	transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.veba-custom-theme-arrow {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Header Bar Styling */
.veba-custom-theme-header {
	height: 80px !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
	/* Background */
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
	z-index: 50 !important;
	display: flex !important;
	align-items: center !important;
}

/* Sidebar Navigation Styling */
aside.veba-custom-theme-sidebar {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	border-right: 1px solid var(--custom-theme-veba-border-muted) !important;
	box-shadow: 4px 0 25px rgba(0, 0, 0, 0.3) !important;
	z-index: 100 !important;
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease !important;
	will-change: transform, width !important;
}

/* Smooth Desktop Minimizing Transition for Layout Wrappers */
.wrap,
.veba-custom-theme-header {
	transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
	will-change: padding-left, left, width !important;
}

/* Sidebar Links Reset and Custom Styling */
.veba-custom-theme-sidebar nav ul.menu li a {
	background-color: transparent !important;
	color: var(--custom-theme-veba-text-muted) !important;
	/* gray-400 */
	display: flex !important;
	align-items: center !important;
	padding: 0.75rem 1.25rem !important;
	border-radius: 0.5rem !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	border: none !important;
}

.veba-custom-theme-sidebar nav ul.menu li a svg {
	color: var(--custom-theme-veba-text-muted) !important;
	transition: color 0.2s ease !important;
}

/* Sidebar Hover State */
.veba-custom-theme-sidebar nav ul.menu li a:hover {
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	/* gray-800 */
	color: #ffffff !important;
}

.veba-custom-theme-sidebar nav ul.menu li a:hover svg {
	color: #ffffff !important;
}

/* Sidebar Active/Current State */
.veba-custom-theme-sidebar nav ul.menu li a.bg-gray-800,
.veba-custom-theme-sidebar nav ul.menu li a.text-primary,
.veba-custom-theme-sidebar nav ul.menu li.current-menu-item>a,
.veba-custom-theme-sidebar nav ul.menu li.active>a {
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	color: var(--custom-theme-veba-primary) !important;
	/* Active Pink */
}

.veba-custom-theme-sidebar nav ul.menu li a.bg-gray-800 svg,
.veba-custom-theme-sidebar nav ul.menu li a.text-primary svg,
.veba-custom-theme-sidebar nav ul.menu li.current-menu-item>a svg,
.veba-custom-theme-sidebar nav ul.menu li.active>a svg {
	color: var(--custom-theme-veba-primary) !important;
}

/* Header Button Reset and Spacing */
.veba-custom-theme-header button {
	background: none !important;
	border: none !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer !important;
}

#quickSearchToggleBtn,
#darkLightToggleBtn {
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	/* Force dark gray-800 bg */
	color: var(--custom-theme-veba-text-muted) !important;
	transition: all 0.2s ease !important;
	border-radius: 9999px !important;
}

#quickSearchToggleBtn:hover,
#darkLightToggleBtn:hover {
	color: #ffffff !important;
	background-color: var(--custom-theme-veba-bg-hover) !important;
	/* gray-700 hover */
}

/* Scrollbar Customization for Sidebar Navigation */
.veba-custom-theme-sidebar::-webkit-scrollbar {
	width: 4px;
}

.veba-custom-theme-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.veba-custom-theme-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 99px;
}

.veba-custom-theme-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Mobile & Tablet Specific Layout Adjustments */
@media (max-width: 1023px) {
	.wrap {
		padding-top: 68px !important;
		transition: padding-top 0.3s ease !important;
	}

	.veba-custom-theme-header {
		height: 68px !important;
	}

	.veba-custom-theme-sidebar {
		transform: translateX(-100%) !important;
		box-shadow: none !important;
		width: 256px !important;
	}

	html.sidebar-expanded .veba-custom-theme-sidebar {
		transform: translateX(0) !important;
		box-shadow: 10px 0 45px rgba(0, 0, 0, 0.6) !important;
	}

	#menuBackdrop {
		display: block !important;
		width: 100% !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity 0.4s ease, backdrop-filter 0.4s ease !important;
		backdrop-filter: blur(0px) !important;
	}

	html.sidebar-expanded #menuBackdrop {
		opacity: 1 !important;
		pointer-events: auto !important;
		backdrop-filter: blur(4px) !important;
	}
}

/* ==========================================================================
 Header Search Bar Styling (Desktop & Mobile)
 ========================================================================== */

/* Mobile Search Overlay */
@media (max-width: 1023px) {
	.veba-custom-theme-search-container {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		padding: 7rem 1.5rem 3rem 1.5rem !important;
		/* Elegant vertical positioning */
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		opacity: 0 !important;
		visibility: hidden !important;
		z-index: 99999 !important;
		/* Overlays absolutely everything, even the site header */
		transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
		pointer-events: none !important;
	}

	/* Dark mode fullscreen search backdrop */
	html.dark .veba-custom-theme-search-container {
		background-color: rgba(11, 15, 25, 0.82) !important;
		/* Transparent dark navy */
		backdrop-filter: blur(18px) saturate(190%) !important;
		-webkit-backdrop-filter: blur(18px) saturate(190%) !important;
	}

	/* Light mode fullscreen search backdrop */
	html:not(.dark) .veba-custom-theme-search-container {
		background-color: rgba(248, 250, 252, 0.82) !important;
		/* Elegant light slate/white glassmorphism */
		backdrop-filter: blur(18px) saturate(190%) !important;
		-webkit-backdrop-filter: blur(18px) saturate(190%) !important;
	}

	body.quick-search-active .veba-custom-theme-search-container {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* Search form in mobile overlay (with beautiful entry animation) */
	.veba-custom-theme-search-container #formQuickSearch {
		width: 100% !important;
		max-width: 520px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		transform: scale(0.95) translateY(-20px) !important;
		transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	}

	body.quick-search-active .veba-custom-theme-search-container #formQuickSearch {
		transform: scale(1) translateY(0) !important;
	}

	.veba-custom-theme-search-container #formQuickSearch label {
		width: 100% !important;
		display: block !important;
		width: 100% !important;
		position: relative !important;
	}

	/* Focus state for mobile input container */
	.veba-custom-theme-search-container #formQuickSearch input[type="search"] {
		width: 100% !important;
		height: 52px !important;
		font-size: 1rem !important;
		padding-left: 3.5rem !important;
		padding-right: 6.5rem !important;
		/* Space for the nested Advanced search button */
		border-radius: 9999px !important;
		border: 1px solid var(--custom-theme-veba-border-accent) !important;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	html.dark .veba-custom-theme-search-container #formQuickSearch input[type="search"] {
		background-color: rgba(255, 255, 255, 0.06) !important;
		color: #ffffff !important;
	}

	html.dark .veba-custom-theme-search-container #formQuickSearch input[type="search"]:focus {
		background-color: rgba(255, 255, 255, 0.09) !important;
		border-color: var(--custom-theme-veba-primary) !important;
		box-shadow: 0 0 20px var(--custom-theme-veba-primary-alpha-15) !important;
	}

	html:not(.dark) .veba-custom-theme-search-container #formQuickSearch input[type="search"] {
		background-color: rgba(0, 0, 0, 0.04) !important;
		color: #0f172a !important;
		border-color: rgba(0, 0, 0, 0.06) !important;
	}

	html:not(.dark) .veba-custom-theme-search-container #formQuickSearch input[type="search"]:focus {
		background-color: #ffffff !important;
		border-color: var(--custom-theme-veba-primary) !important;
		box-shadow: 0 0 20px rgba(249, 115, 22, 0.1) !important;
	}

	/* Quick suggestions positioning on mobile */
	.veba-custom-theme-search-container #quickSearchSuggestions {
		position: relative !important;
		width: 100% !important;
		max-width: 520px !important;
		margin-top: 1rem !important;
		border-radius: 1.25rem !important;
		border: 1px solid var(--custom-theme-veba-border-accent) !important;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
		max-height: 50vh !important;
	}
}

/* Desktop Search Bar Panel (Always Visible, Sleek & Compact) */
@media (min-width: 1024px) {
	.veba-custom-theme-search-container {
		display: flex !important;
		opacity: 1 !important;
		visibility: visible !important;
		position: static !important;
		width: auto !important;
		z-index: 10 !important;
		background: transparent !important;
		margin-right: 1.5rem !important;
		flex-grow: 1 !important;
		justify-content: flex-end !important;
		padding: 0 !important;
	}

	.veba-custom-theme-search-container #formQuickSearch {
		display: flex !important;
		align-items: center !important;
		gap: 0.75rem !important;
		width: auto !important;
	}
}

/* ==========================================================================
 Hamburger Toggle Button (toggleSidebarBtn) Styling
 ========================================================================== */
#toggleSidebarBtn,
#toggleSidebarBtn:focus,
#toggleSidebarBtn:hover,
#toggleSidebarBtn:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	/* Perfect circular hover effect */
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Light Mode for Toggle Button */
html:not(.dark) #toggleSidebarBtn {
	color: #64748b !important;
}

html:not(.dark) #toggleSidebarBtn:hover {
	color: var(--custom-theme-veba-primary) !important;
	background-color: rgba(249, 115, 22, 0.08) !important;
}

/* Dark Mode for Toggle Button */
html.dark #toggleSidebarBtn {
	color: #94a3b8 !important;
}

html.dark #toggleSidebarBtn:hover {
	color: var(--custom-theme-veba-primary) !important;
	background-color: var(--custom-theme-veba-primary-alpha-15) !important;
}

/* Parent container for quick search input */
.veba-custom-theme-search-container label {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Absolute Position for the Nested Advanced Button inside the Quick Search pill */
.veba-custom-theme-search-container label .search-form-adv-btn {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 10 !important;
}

/* Common input styling for Quick Search Bar */
#inputQuickSearch {
	height: 44px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 9999px !important;
	/* Pill style */
	padding: 0 6.5rem 0 3.25rem !important;
	/* Room for left icon and right nested advanced button */
	font-size: 0.875rem !important;
	outline: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Light Mode - inputQuickSearch */
html:not(.dark) #inputQuickSearch {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #inputQuickSearch::placeholder {
	color: #64748b !important;
}

/* Dark Mode - inputQuickSearch */
html.dark #inputQuickSearch {
	background-color: #141414 !important;
	border: 1px solid #222222 !important;
	color: #f8fafc !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark #inputQuickSearch::placeholder {
	color: #94a3b8 !important;
}

@media (min-width: 1024px) {
	#inputQuickSearch {
		width: 280px !important;
		/* Clean default width on desktop */
	}

	#inputQuickSearch:focus {
		width: 380px !important;
		/* Elegant expansion on focus! */
	}
}

#inputQuickSearch:focus {
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 0 3px var(--custom-theme-veba-primary-alpha-20) !important;
}

/* Align search icon perfectly inside the input */
.veba-custom-theme-search-container label .absolute {
	left: 1.25rem !important;
}

/* Hide legacy outer btnGoAdvanced button since it is now beautifully nested inside the pill */
#btnGoAdvanced {
	display: none !important;
}

/* ==========================================================================
 Modals & Interaction Design Overrides
 ========================================================================== */

/* Glassmorphism Backdrop Overlay */
.veba-custom-theme-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 200000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.veba-custom-theme-modal.closed {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.veba-custom-theme-modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.85) !important;
	/* Deep dark overlay */
	backdrop-filter: blur(12px) !important;
	/* Overlay blur */
	-webkit-backdrop-filter: blur(12px) !important;
	transition: opacity 0.3s ease !important;
}

.veba-custom-theme-modal-wrapper {
	position: relative !important;
	z-index: 10 !important;
	width: 100% !important;
	max-width: 440px !important;
	/* Elegant compact width */
	padding: 1.5rem !important;
	transform: scale(0.9) !important;
	opacity: 0 !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}

.veba-custom-theme-modal:not(.closed) .veba-custom-theme-modal-wrapper {
	transform: scale(1) !important;
	opacity: 1 !important;
}

.veba-custom-theme-modal-content {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	/* Veba Custom Theme dark navy */
	border: 1px solid var(--custom-theme-veba-border-accent) !important;
	border-radius: 1.25rem !important;
	/* Elegant rounded corners */
	padding: 2.5rem 2.25rem !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 40px var(--custom-theme-veba-primary-alpha-05) !important;
	/* Subtle pink glow */
	position: relative !important;
}

.veba-custom-theme-modal-close {
	position: absolute !important;
	top: 1.25rem !important;
	right: 1.25rem !important;
	background: var(--custom-theme-veba-border-muted) !important;
	border: none !important;
	color: var(--custom-theme-veba-text-muted) !important;
	/* gray-400 */
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 9999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	z-index: 5 !important;
}

.veba-custom-theme-modal-close:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

/* Inputs, Buttons and Form Details inside Modals */
.veba-custom-theme-modal input[type="text"],
.veba-custom-theme-modal input[type="password"],
.veba-custom-theme-modal input[type="email"] {
	width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 0.75rem !important;
	padding: 0.875rem 1rem !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	/* Deep input dark background */
	border: 1px solid var(--custom-theme-veba-border-accent) !important;
	color: #ffffff !important;
	font-size: 0.875rem !important;
	transition: all 0.2s ease !important;
	outline: none !important;
}

.veba-custom-theme-modal input[type="text"]:focus,
.veba-custom-theme-modal input[type="password"]:focus,
.veba-custom-theme-modal input[type="email"]:focus {
	border-color: var(--custom-theme-veba-primary) !important;
	background-color: rgba(255, 255, 255, 0.01) !important;
	box-shadow: 0 0 0 3px var(--custom-theme-veba-primary-alpha-15) !important;
	/* Pink glow focus */
}

/* Text elements inside modals */
.veba-custom-theme-modal h2 {
	font-size: 1.75rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.25 !important;
}

.veba-custom-theme-modal .text-secondary {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-custom-theme-modal .text-gray-500 {
	color: var(--custom-theme-veba-text-muted) !important;
}

.veba-custom-theme-modal span.absolute {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	/* Perfect blend with modal background */
	color: #6b7280 !important;
	/* gray-500 */
	padding: 0 0.75rem !important;
}

.veba-custom-theme-modal a.text-secondary:hover {
	color: #f97316 !important;
	text-decoration: underline !important;
}

/* Modal Submit Button */
.veba-custom-theme-modal .btn-read {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	font-size: 0.875rem !important;
	padding: 0.875rem 2rem !important;
	border-radius: 9999px !important;
	border: none !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.veba-custom-theme-modal .btn-read:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	box-shadow: 0 6px 16px rgba(249, 115, 22, 0.45) !important;
	transform: translateY(-1px) !important;
}

/* Secondary Button (Toggle Modals Trigger) */
.veba-custom-theme-modal button.open-modal-trigger {
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.875rem 2rem !important;
	border-radius: 9999px !important;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: var(--custom-theme-veba-text-secondary) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.veba-custom-theme-modal button.open-modal-trigger:hover {
	background-color: rgba(255, 255, 255, 0.03) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
}

/* Remember me custom checkbox style */
.veba-custom-theme-modal input[type="checkbox"] {
	accent-color: var(--custom-theme-veba-primary) !important;
	cursor: pointer !important;
}

/* Custom separator utility to prevent Bootstrap my-5 (48px) override */
.hr-modal-separator {
	margin-top: 1.25rem !important;
	margin-bottom: 1.25rem !important;
	text-align: center !important;
	position: relative !important;
}

.hr-modal-separator::before {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: 0 !important;
	height: 1px !important;
	background: var(--custom-theme-veba-border-accent) !important;
	z-index: 1 !important;
}

.hr-modal-separator span {
	position: relative !important;
	z-index: 2 !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
	padding: 0 0.85rem !important;
}

/* Auth Input with Icons */
.vr-input-icon-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
}

.vr-input-svg {
	position: absolute !important;
	left: 1rem !important;
	color: var(--custom-theme-veba-text-muted, #94a3b8) !important;
	pointer-events: none !important;
	transition: color 0.2s ease !important;
}

.vr-auth-input {
	padding-left: 2.75rem !important;
}

.vr-input-icon-wrap:focus-within .vr-input-svg {
	color: var(--custom-theme-veba-primary, #ff2a7a) !important;
}

/* Auth Msg Box */
.hr-auth-msg-box {
	padding: 0.75rem 1rem !important;
	border-radius: 0.75rem !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	margin-bottom: 1rem !important;
	text-align: left !important;
	line-height: 1.4 !important;
	transition: all 0.25s ease !important;
}

.hr-auth-msg-box.hidden {
	display: none !important;
}

.hr-auth-msg-box.hr-auth-loading {
	background: rgba(59, 130, 246, 0.12) !important;
	border: 1px solid rgba(59, 130, 246, 0.3) !important;
	color: #60a5fa !important;
}

.hr-auth-msg-box.hr-auth-success {
	background: rgba(16, 185, 129, 0.12) !important;
	border: 1px solid rgba(16, 185, 129, 0.3) !important;
	color: #34d399 !important;
}

.hr-auth-msg-box.hr-auth-error {
	background: rgba(239, 68, 68, 0.12) !important;
	border: 1px solid rgba(239, 68, 68, 0.3) !important;
	color: #f87171 !important;
}

.vr-auth-btn {
	cursor: pointer !important;
}

.vr-secondary-auth-btn {
	width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0.875rem 2rem !important;
	border-radius: 9999px !important;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: var(--custom-theme-veba-text-secondary, #cbd5e1) !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.vr-secondary-auth-btn:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	color: #ffffff !important;
}



/* Accordion Arrow Transition */
.veba-custom-theme-arrow {
	transition: transform 0.3s ease !important;
}

/* Mobile Search Toggle Active States */
body.quick-search-active #quickSearchToggleBtn .search-icon {
	display: none !important;
}

body.quick-search-active #quickSearchToggleBtn .close-icon {
	display: block !important;
	width: 100% !important;
}

body:not(.quick-search-active) #quickSearchToggleBtn .search-icon {
	display: block !important;
	width: 100% !important;
}

body:not(.quick-search-active) #quickSearchToggleBtn .close-icon {
	display: none !important;
}

/* Dark Theme Toggle SVG States */
html.dark #darkLightToggleBtn .moon-icon,
html.dark #hrThemeToggle .moon-icon,
html.dark #hrThemeToggleMobile .moon-icon {
	display: none !important;
}

html.dark #darkLightToggleBtn .sun-icon,
html.dark #hrThemeToggle .sun-icon,
html.dark #hrThemeToggleMobile .sun-icon {
	display: block !important;
}

html:not(.dark) #darkLightToggleBtn .moon-icon,
html:not(.dark) #hrThemeToggle .moon-icon,
html:not(.dark) #hrThemeToggleMobile .moon-icon {
	display: block !important;
}

html:not(.dark) #darkLightToggleBtn .sun-icon,
html:not(.dark) #hrThemeToggle .sun-icon,
html:not(.dark) #hrThemeToggleMobile .sun-icon {
	display: none !important;
}

/* ==========================================================================
 Archive, Genres, Breadcrumb, Sort Dropdown & User Avatar Styles
 ========================================================================== */

/* --- ROUND AVATAR IMAGES --- */
.avatar,
.user-avatar,
.profile-avatar,
.veba-custom-theme-sidebar .avatar,
.veba-custom-theme-header .avatar,
.comment-avatar img,
img.avatar,
.c-user-profile .avatar img,
.profile-pic img {
	border-radius: 50% !important;
	object-fit: cover !important;
}

/* --- HIDE WP ADMIN BAR FRONT-END --- */
#wpadminbar {
	display: none !important;
}

html {
	margin-top: 0px !important;
}

* html body {
	margin-top: 0px !important;
}

@media screen and (max-width: 782px) {
	html {
		margin-top: 0px !important;
	}
}

/* --- BREADCRUMB WRAPPER OVERRIDE --- */
.c-breadcrumb-wrapper {
	background: #080808 !important;
	/* Override default background patterns and set to deep slate-950 */
	background-image: none !important;
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
	padding: 1.5rem 0 !important;
	box-shadow: none !important;
}

/* Breadcrumb List */
.c-breadcrumb ol.breadcrumb {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.c-breadcrumb ol.breadcrumb li {
	display: inline-flex !important;
	align-items: center !important;
	color: var(--custom-theme-veba-text-muted) !important;
	/* gray-400 */
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
}

.c-breadcrumb ol.breadcrumb li a {
	color: var(--custom-theme-veba-text-muted) !important;
	transition: color 0.2s ease !important;
}

.c-breadcrumb ol.breadcrumb li a:hover {
	color: var(--custom-theme-veba-primary) !important;
	/* Pink accent */
}

/* Breadcrumb item separator */
.c-breadcrumb ol.breadcrumb li+li:before {
	content: "/" !important;
	padding: 0 0.5rem !important;
	color: #4b5563 !important;
	/* gray-600 */
	font-size: 0.75rem !important;
}

.c-breadcrumb ol.breadcrumb li.active {
	color: #ffffff !important;
	font-weight: 600 !important;
}

/* Collapsible Genres Block */
.c-genres-block.archive-page {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	/* Background */
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	border-radius: 0.75rem !important;
	padding: 1.25rem 1.5rem !important;
	margin-top: 1.5rem !important;
	margin-bottom: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

.c-genres-block.archive-page .genres_wrap {
	position: relative !important;
}

/* Genres Header Title */
.c-genres-block.archive-page .c-blog__heading.style-3 {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-block !important;
}

.c-genres-block.archive-page .c-blog__heading.style-3:before,
.c-genres-block.archive-page .c-blog__heading.style-3:after,
.genres_wrap .c-blog__heading.style-3:before,
.genres_wrap .c-blog__heading.style-3:after {
	content: none !important;
	display: none !important;
}

.c-genres-block.archive-page .c-blog__heading.style-3 h5 {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	background: linear-gradient(135deg, var(--custom-theme-veba-primary), #c2550a) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: var(--custom-theme-veba-primary) !important;
	margin: 0 !important;
}

/* Toggle Arrow Button */
.c-genres-block.archive-page .btn.btn-genres {
	background: var(--custom-theme-veba-bg-card-secondary) !important;
	/* gray-800 */
	color: var(--custom-theme-veba-text-muted) !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 9999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: right !important;
	transition: all 0.2s ease !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

.c-genres-block.archive-page .btn.btn-genres:hover {
	background-color: var(--custom-theme-veba-bg-hover) !important;
	/* gray-700 */
	color: #ffffff !important;
}

/* Icon rotation when active/expanded */
.c-genres-block.archive-page .btn.btn-genres.active .genres-arrow-svg {
	transform: rotate(180deg) !important;
}

/* The actual list section container */
.c-genres-block.archive-page .genres__collapse {
	border-top: 1px solid var(--custom-theme-veba-border-muted) !important;
	margin-top: 1rem !important;
	padding-top: 1rem !important;
}

.c-genres-block.archive-page .genres ul {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0.75rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (min-width: 640px) {
	.c-genres-block.archive-page .genres ul {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1024px) {
	.c-genres-block.archive-page .genres ul {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

.c-genres-block.archive-page .genres ul li {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}

/* Individual Genre Item Link styling */
.c-genres-block.archive-page .genres ul li a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	/* gray-800 */
	color: #d1d5db !important;
	/* gray-300 */
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.375rem !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	border: 1px solid transparent !important;
}

.c-genres-block.archive-page .genres ul li a:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	/* Background hover */
	color: #ffffff !important;
	border-color: var(--custom-theme-veba-primary) !important;
	transform: translateY(-1px) !important;
}

/* Genre Item Post Count Badge */
.c-genres-block.archive-page .genres ul li a span.count {
	font-size: 0.75rem !important;
	color: var(--custom-theme-veba-text-muted) !important;
	font-weight: 600 !important;
	background-color: rgba(0, 0, 0, 0.25) !important;
	padding: 0.1rem 0.4rem !important;
	border-radius: 9999px !important;
	transition: all 0.2s ease !important;
}

.c-genres-block.archive-page .genres ul li a:hover span.count {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Sort Dropdown */
#mangaSortDropdown.opened .dropdown-content {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translate(-50%, 0) scale(1) !important;
}

@media (max-width: 767px) {
	#mangaSortDropdown.opened .dropdown-content {
		transform: scale(1) !important;
		left: 0 !important;
	}
}

.dropdown-content a {
	display: flex !important;
	align-items: center !important;
	color: var(--custom-theme-veba-text-muted) !important;
	/* gray-400 */
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.dropdown-content a:hover,
.dropdown-content a.selected {
	background-color: var(--custom-theme-veba-border-muted) !important;
	color: var(--custom-theme-veba-primary) !important;
	/* Pink accent */
}

/* Sort By and Order controls */
#sortbyBar {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.main-content .bg-gray-950 {
	background-color: #030712 !important;
	/* Deep Slate-950 */
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
}

/* ==========================================================================
 Archive Page Styling (hr- prefixes)
 ========================================================================== */

.hr-archive-header {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	/* Deep slate-900 / dark navy */
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
	padding-top: 2rem !important;
	position: relative !important;
}

.hr-archive-heading-wrap {
	display: flex !important;
	align-items: center !important;
	padding-bottom: 1rem !important;
}

.hr-archive-title {
	font-size: 1.875rem !important;
	/* text-3xl */
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	letter-spacing: -0.02em !important;
}

.hr-sort-bar {
	width: 100% !important;
	margin-top: 1rem !important;
}

.hr-sort-bar-inner {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	position: relative !important;
}

/* Sort group dropdown style */
.hr-sort-group {
	display: flex !important;
	align-items: center !important;
	position: relative !important;
}

.hr-sort-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 1.25rem 0.5rem !important;
	font-weight: 600 !important;
	color: var(--custom-theme-veba-primary) !important;
	/* Pink active */
	border-bottom: 3px solid var(--custom-theme-veba-primary) !important;
	/* Pink active underline */
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	min-width: 120px !important;
	user-select: none !important;
}

.hr-sort-trigger:hover {
	color: #f97316 !important;
}

.hr-sort-active-label {
	display: inline-flex !important;
	align-items: center !important;
}

.hr-sort-chevron {
	width: 0.875rem !important;
	height: 0.875rem !important;
	margin-left: 0.5rem !important;
	transition: transform 0.2s ease !important;
}

#mangaSortDropdown.opened .hr-sort-chevron {
	transform: rotate(180deg) !important;
}

/* The actual sort options dropdown panel */
.hr-sort-dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	margin-top: 0.5rem !important;
	width: 14rem !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
	border: 1px solid var(--custom-theme-veba-border-accent) !important;
	border-radius: 0.75rem !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(-10px) scale(0.95) !important;
	transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 1000 !important;
	padding: 0.5rem !important;
	overflow: hidden !important;
}

#mangaSortDropdown.opened .hr-sort-dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) scale(1) !important;
}

.hr-sort-option {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0.625rem 0.875rem !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--custom-theme-veba-text-muted) !important;
	/* Gray-400 */
	border-radius: 0.5rem !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

.hr-sort-option:hover {
	background-color: rgba(255, 255, 255, 0.04) !important;
	color: #ffffff !important;
}

.hr-sort-option.hr-sort-selected {
	background-color: rgba(249, 115, 22, 0.08) !important;
	color: var(--custom-theme-veba-primary) !important;
	font-weight: 600 !important;
}

/* Order Group styles */
.hr-order-group {
	margin-left: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.hr-order-label {
	display: none !important;
	/* Hide label on mobile/desktop to match screenshot */
}

@media (min-width: 768px) {
	.hr-order-label {
		display: block !important;
		width: 100% !important;
		font-size: 0.875rem !important;
		font-weight: 600 !important;
		color: #4b5563 !important;
		/* Gray-600 */
		margin-right: 0.5rem !important;
	}
}

.hr-order-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.25rem 0.5rem !important;
	color: var(--custom-theme-veba-text-muted) !important;
	border-bottom: 3px solid transparent !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.hr-order-btn:hover {
	color: #ffffff !important;
}

.hr-order-btn.hr-order-active {
	color: var(--custom-theme-veba-primary) !important;
	border-bottom: 3px solid var(--custom-theme-veba-primary) !important;
}

/* Main content archive grid dark theme reinforcement */
body,
.site-content,
.main-content,
.page-content-listing {
	background-color: var(--bg-body) !important;
	/* Explicit deep dark slate */
}

/* ==========================================================================
 Card Hover & Layout Styles
 ========================================================================== */

.manga-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1rem !important;
}

@media (min-width: 640px) {
	.manga-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

@media (min-width: 1024px) {
	.manga-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1280px) {
	.manga-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	}
}

.manga-item__img {
	position: relative !important;
	width: 100% !important;
	padding-top: 133.33% !important;
	/* 3:4 Aspect Ratio */
	overflow: hidden !important;
	border-radius: 0.375rem !important;
}

.manga-item__img-inner {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.group\/manga-item:hover .manga-item__img-inner {
	transform: translate(-50%, -50%) scale(1.08) !important;
	/* Elegant zoom on hover */
}

.manga-item__img:before {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	z-index: 5 !important;
	opacity: 0 !important;
	background-color: rgba(2, 6, 23, 0.4) !important;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	content: "" !important;
}

.group\/manga-item:hover .manga-item__img:before {
	opacity: 1 !important;
}

/* Category & Censor badge custom styling */
.manga-item__cat-link {
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.bg-cat-manga {
	background-color: #3b82f6 !important;
	/* Nice blue */
}

.bg-cat-doujinshi {
	background-color: var(--custom-theme-veba-primary) !important;
	/* Veba Custom Theme pink */
}

.bg-cat-western {
	background-color: #10b981 !important;
	/* Green */
}

.bg-cat-cg {
	background-color: #f59e0b !important;
	/* Yellow */
}

.badge-cen {
	background-color: rgba(239, 68, 68, 0.2) !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
	color: #ef4444 !important;
}

.badge-unc {
	background-color: rgba(16, 185, 129, 0.2) !important;
	border: 1px solid rgba(16, 185, 129, 0.4) !important;
	color: #10b981 !important;
}

.bg-bw {
	background-color: #4b5563 !important;
}

.bg-full-color {
	background: linear-gradient(135deg, #f97316, var(--custom-theme-veba-primary)) !important;
}

/* Hover read button */
.manga-item .btn-read {
	border-radius: 9999px !important;
	background-color: var(--custom-theme-veba-primary) !important;
	padding: 0.5rem 1.75rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30) !important;
}

.manga-item .btn-read:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	transform: translateY(-1px) !important;
}

/* Sub-tags inside hover card scrollbar */
.manga-item__tags::-webkit-scrollbar {
	width: 3px !important;
}

.manga-item__tags::-webkit-scrollbar-track {
	background: transparent !important;
}

.manga-item__tags::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
}

.manga-item__tags:hover::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3) !important;
}


/* ==========================================================================
 HIGH-FIDELITY DARK & LIGHT MODE TRANSITION SYSTEM
 ========================================================================== */

/* Global Smooth Color & Background Transition Framework */
body,
.site-content,
.main-content,
.page-content-listing,
.wrap,
.body-wrap,
.veba-custom-theme-header,
.manga-item__wrapper,
.manga-item__top>div,
.manga-item__title a,
.manga-item__tags span,
.hr-archive-header,
.genres-block-inner,
.hr-genre-btn,
.dropdown-btn,
.dropdown-content,
.hr-archive-title,
.c-breadcrumb-wrapper,
.c-breadcrumb ol.breadcrumb li a,
.veba-custom-theme-sidebar nav a,
.veba-custom-theme-header button,
.veba-custom-theme-sidebar button {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ==========================================================================
 1. DARK THEME DEFINITION (Default State and .dark class)
 ========================================================================== */
html:not(.light),
html.dark {
	/* Backgrounds */
	--bg-body: #080808;
	--bg-panel: var(--custom-theme-veba-bg-deep);
	--bg-box: var(--custom-theme-veba-bg-card);
	--bg-card: var(--custom-theme-veba-bg-deep);

	/* Borders */
	--border-light: var(--custom-theme-veba-border-muted);
	--border-mid: var(--custom-theme-veba-border-accent);

	/* Text Colors */
	--color-title: #ffffff;
	--color-text: var(--custom-theme-veba-text-secondary);
	--color-muted: var(--custom-theme-veba-text-muted);

	/* Button backgrounds */
	--bg-button: var(--custom-theme-veba-bg-card);
	--bg-button-hover: var(--custom-theme-veba-bg-card-secondary);
}

/* ==========================================================================
 2. LIGHT THEME DEFINITION (.light class)
 ========================================================================== */
html.light {
	/* Backgrounds */
	--bg-body: #f3f4f6;
	/* Light gray */
	--bg-panel: #ffffff;
	/* Crisp white for header/sidebar panels */
	--bg-box: #f9fafb;
	--bg-card: #ffffff;
	/* Crisp white for cards */

	/* Borders */
	--border-light: rgba(0, 0, 0, 0.06);
	--border-mid: rgba(0, 0, 0, 0.1);

	/* Text Colors */
	--color-title: var(--custom-theme-veba-bg-card);
	/* Dark slate-900 */
	--color-text: var(--custom-theme-veba-bg-hover);
	/* Dark gray-700 */
	--color-muted: #6b7280;
	/* Neutral gray-500 */

	/* Button backgrounds */
	--bg-button: #f3f4f6;
	--bg-button-hover: var(--custom-theme-veba-text-secondary);
}

/* ==========================================================================
 3. STYLES APPLICATION BASED ON VARIABLES
 ========================================================================== */

/* Main Containers & Backgrounds */
body,
.site-content,
.main-content,
.page-content-listing,
.wrap,
.body-wrap {
	background-color: var(--bg-body) !important;
	color: var(--color-text) !important;
}

/* Panels (Header & Sidebar) */
.veba-custom-theme-header,
.veba-custom-theme-sidebar {
	background-color: var(--bg-panel) !important;
	border-color: var(--border-mid) !important;
}

/* Header & Sidebar Action Buttons */
.veba-custom-theme-header button,
.veba-custom-theme-sidebar button,
#quickSearchToggleBtn,
#darkLightToggleBtn {
	background-color: var(--bg-button) !important;
	color: var(--color-muted) !important;
}

.veba-custom-theme-header button:hover,
.veba-custom-theme-sidebar button:hover,
#quickSearchToggleBtn:hover,
#darkLightToggleBtn:hover {
	background-color: var(--bg-button-hover) !important;
	color: var(--color-title) !important;
}

/* Navigation Links inside Sidebar */
.veba-custom-theme-sidebar nav a {
	color: var(--color-muted) !important;
}

.veba-custom-theme-sidebar nav a:hover {
	color: var(--color-title) !important;
	background-color: var(--border-light) !important;
}

.veba-custom-theme-sidebar nav li.active>a {
	color: var(--custom-theme-veba-primary) !important;
	background-color: rgba(249, 115, 22, 0.06) !important;
}

/* Manga Item Cards */
.manga-item__wrapper {
	background-color: var(--bg-card) !important;
	border: 1px solid var(--border-light) !important;
}

.manga-item__top>div {
	background-color: var(--bg-box) !important;
}

.manga-item__title a {
	color: var(--color-title) !important;
}

.manga-item__tags span {
	background-color: var(--bg-button) !important;
	color: var(--color-muted) !important;
}

/* Archive Heading, Filters, & Dropdowns */
.hr-archive-header {
	background-color: var(--bg-panel) !important;
	border-color: var(--border-light) !important;
}

.genres-block-inner {
	background-color: var(--bg-panel) !important;
}

.hr-archive-title {
	color: var(--color-title) !important;
}

.hr-genre-btn {
	background-color: var(--bg-box) !important;
	color: var(--color-muted) !important;
	border-color: var(--border-light) !important;
}

.hr-genre-btn:hover {
	color: var(--color-title) !important;
	border-color: var(--custom-theme-veba-primary) !important;
}

/* View Mode and Sorting Bars */
.hr-view-mode-btn,
.hr-order-btn {
	color: var(--color-muted) !important;
}

.hr-view-mode-btn.hr-view-active,
.hr-order-btn.hr-order-active {
	color: var(--custom-theme-veba-primary) !important;
}

/* Sort / Order Dropdowns */
.dropdown-btn {
	background-color: var(--bg-box) !important;
	color: var(--color-text) !important;
	border-color: var(--border-mid) !important;
}

.dropdown-content {
	background-color: var(--bg-panel) !important;
	border-color: var(--border-mid) !important;
}

.dropdown-content a {
	color: var(--color-muted) !important;
}

.dropdown-content a:hover {
	background-color: var(--border-light) !important;
	color: var(--color-title) !important;
}

.dropdown-content a.selected {
	color: var(--custom-theme-veba-primary) !important;
}

/* Breadcrumbs section */
.c-breadcrumb-wrapper {
	background-color: var(--bg-body) !important;
	border-bottom-color: var(--border-light) !important;
}

.c-breadcrumb ol.breadcrumb li a {
	color: var(--color-muted) !important;
}

.c-breadcrumb ol.breadcrumb li a:hover {
	color: var(--color-title) !important;
}

/* ==========================================================================
 4. LIGHT MODE SPECIFIC LOGO CONTRAST POLISH
 ========================================================================== */
html.light #logo img,
html.light .block img {
	filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
}

/* ==========================================================================
 Advanced Search Styling
 ========================================================================== */

/* 1. Global Search Header Container Override */
.c-search-header__wrapper {
	background-image: none !important;
	/* Completely remove the cheap floating patterns! */
	background-color: transparent !important;
	/* Seamless flow with body background */
	border-bottom: none !important;
	/* Seamless header integration */
	padding: 3rem 0 1rem 0 !important;
	margin-bottom: 0 !important;
}

/* 2. Main Search Bar & Form Styling */
.c-search-header__wrapper .search-content {
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 0 1rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1rem !important;
}

/* Flexbox Layout for Search Input + Advanced Button */
.c-search-header__wrapper .search-content .search-form {
	display: flex !important;
	align-items: center !important;
	border-radius: 9999px !important;
	/* Perfect Pill Shape */
	padding: 0.375rem 0.5rem 0.375rem 1.5rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	flex-grow: 1 !important;
	width: auto !important;
	margin: 0 !important;
}

/* Light Mode Form Background & Borders */
html:not(.dark) .c-search-header__wrapper .search-content .search-form {
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Dark Mode Form Background & Borders */
html.dark .c-search-header__wrapper .search-content .search-form {
	background-color: #141414 !important;
	border: 1px solid #222222 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.c-search-header__wrapper .search-content .search-form:focus-within {
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 20px rgba(239, 38, 241, 0.25) !important;
}

/* Input Field inside Pill - Force transparent backgrounds at all times */
.c-search-header__wrapper .search-content .search-form .search-field,
.c-search-header__wrapper .search-content .search-form .search-field:focus,
.c-search-header__wrapper .search-content .search-form .search-field:hover,
.c-search-header__wrapper .search-content .search-form .search-field:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
	padding: 0.5rem 1rem 0.5rem 0 !important;
	width: 100% !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Text Colors */
html:not(.dark) .c-search-header__wrapper .search-content .search-form .search-field {
	color: #0f172a !important;
	/* Dark Slate in Light Mode */
}

html.dark .c-search-header__wrapper .search-content .search-form .search-field {
	color: #f8fafc !important;
	/* Pure White in Dark Mode */
}

/* Placeholder Colors */
html:not(.dark) .c-search-header__wrapper .search-content .search-form .search-field::placeholder {
	color: #64748b !important;
	opacity: 0.8 !important;
}

html.dark .c-search-header__wrapper .search-content .search-form .search-field::placeholder {
	color: #94a3b8 !important;
	opacity: 0.8 !important;
}

/* Hide default absolute magnifier icon or trailing characters from theme styling */
.c-search-header__wrapper .search-content .search-form i.icon,
.c-search-header__wrapper .search-content .search-form label:after {
	display: none !important;
}

/* 3. The Perfect Circular Search Submit Button */
.c-search-header__wrapper .search-content .search-form .search-submit {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	/* Perfect circle */
	background-color: var(--custom-theme-veba-primary) !important;
	/* Iconic pink background */
	border: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: 0.5rem !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30) !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
}

.c-search-header__wrapper .search-content .search-form .search-submit:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	transform: scale(1.05) !important;
	box-shadow: 0 6px 16px rgba(249, 115, 22, 0.45) !important;
}

.c-search-header__wrapper .search-content .search-form .search-submit:active {
	transform: scale(0.95) !important;
}

/* Style the nested search SVG icon */
.c-search-header__wrapper .search-content .search-form .search-submit svg {
	width: 18px !important;
	height: 18px !important;
	color: #ffffff !important;
	stroke: #ffffff !important;
	fill: none !important;
	display: block !important;
	width: 100% !important;
	pointer-events: none !important;
}

/* 4. Advanced Toggle Button Styling */
.c-search-header__wrapper .search-content .btn-search-adv,
body.mobile .c-search-header__wrapper .search-content .btn-search-adv,
.mobile .c-search-header__wrapper .search-content .btn-search-adv {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	height: 48px !important;
	min-width: 160px !important;
	/* Perfect stable size, prevents shrinking! */
	max-width: 160px !important;
	padding: 0 1.25rem !important;
	border-radius: 9999px !important;
	/* Pill style */
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	cursor: pointer !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
	text-decoration: none !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	text-indent: 0 !important;
	overflow: visible !important;
}

/* Collapsed State Style */
.c-search-header__wrapper .search-content .btn-search-adv.collapsed {
	background-color: rgb(var(--gray-900)) !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	color: rgb(var(--gray-100)) !important;
	font-size: 0.85rem !important;
	text-indent: 0 !important;
	overflow: visible !important;
}

.c-search-header__wrapper .search-content .btn-search-adv.collapsed:hover {
	background-color: rgb(var(--gray-800)) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	color: var(--custom-theme-veba-primary) !important;
}

/* Active / Expanded State Style */
.c-search-header__wrapper .search-content .btn-search-adv:not(.collapsed) {
	background-color: var(--custom-theme-veba-primary) !important;
	border: 1px solid var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px var(--custom-theme-veba-primary-alpha-40) !important;
	font-size: 0.85rem !important;
	text-indent: 0 !important;
	overflow: visible !important;
}

.c-search-header__wrapper .search-content .btn-search-adv:not(.collapsed):hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	border-color: var(--custom-theme-veba-primary-hover) !important;
}

/* Custom Chevron for Advanced Toggle */
.c-search-header__wrapper .search-content .btn-search-adv span.icon-search-adv {
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-left: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	transform: rotate(-45deg) translateY(-1px) !important;
	transition: transform 0.3s ease !important;
	margin-left: 4px !important;
}

.c-search-header__wrapper .search-content .btn-search-adv span.icon-search-adv::before,
.c-search-header__wrapper .search-content .btn-search-adv span.icon-search-adv::after {
	display: none !important;
	/* Hide original icon content */
}

.c-search-header__wrapper .search-content .btn-search-adv:not(.collapsed) span.icon-search-adv {
	transform: rotate(135deg) translateY(-1px) !important;
}

/* 5. Expanded Advanced Search Panel Dashboard */
#search-advanced {
	background-color: rgb(var(--gray-900)) !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	border-radius: 16px !important;
	margin-top: 1.5rem !important;
	padding: 2rem !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

#search-advanced .search-advanced-form {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1.5rem !important;
}

@media (min-width: 768px) {
	#search-advanced .search-advanced-form {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	#search-advanced .search-advanced-form .form-group.checkbox-group {
		grid-column: span 2 !important;
	}

	#search-advanced .search-advanced-form .form-group.group-btn {
		grid-column: span 2 !important;
	}
}

/* Individual Form Group Styling */
#search-advanced .form-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	margin-bottom: 0 !important;
}

#search-advanced .form-group span {
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: rgb(var(--gray-100)) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

/* Input & Select Styling */
#search-advanced .form-control {
	background-color: rgb(var(--gray-950)) !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	border-radius: 8px !important;
	color: rgb(var(--gray-100)) !important;
	height: 44px !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	outline: none !important;
	width: 100% !important;
	box-shadow: none !important;
}

#search-advanced .form-control:focus {
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 10px var(--custom-theme-veba-primary-alpha-20) !important;
}

/* Custom Styled Select dropdown chevron */
#search-advanced select.form-control {
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 16px !important;
	padding-right: 2.5rem !important;
}

/* 6. Genre Checkboxes Styling */
#search-advanced .form-group.checkbox-group {
	background-color: rgb(var(--gray-950)) !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	border-radius: 12px !important;
	padding: 1.25rem !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
}

/* Hide native checkbox, build beautiful custom tag button */
#search-advanced .checkbox-group .checkbox,
#search-advanced .checkbox-inline {
	width: auto !important;
	height: auto !important;
	border: none !important;
	background: transparent !important;
	appearance: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
}

#search-advanced .checkbox input[type="checkbox"],
#search-advanced .checkbox-inline input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

#search-advanced .checkbox label::before,
#search-advanced .checkbox label::after,
#search-advanced .checkbox-inline label::before,
#search-advanced .checkbox-inline label::after {
	display: none !important;
	content: none !important;
}

#search-advanced .checkbox label,
#search-advanced .checkbox-inline label {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: rgb(var(--gray-900)) !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	color: rgb(var(--gray-200)) !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: 9999px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	user-select: none !important;
	margin: 0 !important;
	width: auto !important;
	line-height: 1.2 !important;
}

#search-advanced .checkbox label:hover,
#search-advanced .checkbox-inline label:hover {
	border-color: var(--custom-theme-veba-primary) !important;
	color: var(--custom-theme-veba-primary) !important;
	background-color: var(--custom-theme-veba-primary-alpha-05) !important;
	transform: translateY(-1px) !important;
}

/* Checked State for Genre Pill tags */
#search-advanced .checkbox input[type="checkbox"]:checked+label,
#search-advanced .checkbox-inline input[type="checkbox"]:checked+label {
	background-color: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30) !important;
}

/* 7. Status Checkboxes Layout - Horizontal Pill Flexbox! */
#search-advanced .form-group:has(.checkbox-inline) {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

#search-advanced .form-group:has(.checkbox-inline) span {
	width: 100% !important;
	/* Force status title label to take full width */
	margin-bottom: 0.25rem !important;
}

/* 8. Advanced Submit & Reset Actions Buttons */
#search-advanced .form-group.group-btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 1rem !important;
	margin-top: 1rem !important;
}

#search-advanced .group-btn button {
	height: 44px !important;
	padding: 0 1.75rem !important;
	border-radius: 9999px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	transition: all 0.25s ease !important;
	cursor: pointer !important;
}

#search-advanced .group-btn button.search-adv-submit {
	background-color: var(--custom-theme-veba-primary) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35) !important;
}

#search-advanced .group-btn button.search-adv-submit:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px var(--custom-theme-veba-primary-alpha-50) !important;
}

#search-advanced .group-btn button.search-adv-reset {
	background-color: transparent !important;
	border: 1px solid rgb(var(--gray-800)) !important;
	color: rgb(var(--gray-300)) !important;
}

#search-advanced .group-btn button.search-adv-reset:hover {
	background-color: rgb(var(--gray-800)) !important;
	border-color: rgb(var(--gray-400)) !important;
	color: rgb(var(--gray-100)) !important;
}

/* ==========================================================================
 Advanced Search Trigger Button
 ========================================================================== */

.search-form-adv-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--custom-theme-veba-primary) !important;
	border: 1px solid var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	padding: 0 0.75rem !important;
	margin: 0 0.5rem 0 0 !important;
	height: 32px !important;
	border-radius: 9999px !important;
	cursor: pointer !important;
	opacity: 0.95 !important;
	width: auto !important;
	min-width: 85px !important;
	max-width: 90px !important;
	overflow: hidden !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	pointer-events: auto !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
	box-shadow: 0 2px 8px var(--custom-theme-veba-primary-alpha-20) !important;
}

.search-form-adv-btn:hover {
	opacity: 1 !important;
	background-color: var(--custom-theme-veba-primary-hover) !important;
	border-color: var(--custom-theme-veba-primary-hover) !important;
	color: #ffffff !important;
	transform: scale(1.05) !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-40) !important;
}

/* Force the "Advanced" text label to be visible on mobile views and style it perfectly */
body.mobile .c-search-header__wrapper .search-content .btn-search-adv .label,
.mobile .c-search-header__wrapper .search-content .btn-search-adv .label {
	display: inline-block !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: inherit !important;
}

body.mobile .c-search-header__wrapper .search-content .btn-search-adv,
.mobile .c-search-header__wrapper .search-content .btn-search-adv {
	min-width: 140px !important;
	max-width: 160px !important;
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 1rem !important;
	height: 40px !important;
}

/* Ensure the main Advanced button next to the search bar is responsive and hides/adapts gracefully */
@media (max-width: 767px) {
	.c-search-header__wrapper .search-content {
		flex-direction: column !important;
		gap: 0.75rem !important;
	}

	.c-search-header__wrapper .search-content .search-form {
		width: 100% !important;
	}

	.c-search-header__wrapper .search-content .btn-search-adv {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
}


/* ==========================================================================
 Header Guest Buttons & Logged-In User Profile Pill Styling
 ========================================================================== */

/* Guest Login and Signup Buttons */
.header-login-btn,
.header-signup-btn {
	height: 42px !important;
	border-radius: 9999px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	/* Elegant icon gap */
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-sizing: border-box !important;
	border: none !important;
	padding: 0 1.25rem !important;
	/* Padding */
	text-decoration: none !important;
}

/* Light Mode Guest Buttons styling */
html:not(.dark) .header-login-btn {
	background-color: rgba(249, 115, 22, 0.08) !important;
	color: var(--custom-theme-veba-primary) !important;
}

html:not(.dark) .header-login-btn:hover {
	background-color: var(--custom-theme-veba-primary-alpha-15) !important;
	transform: translateY(-1px) !important;
}

html:not(.dark) .header-signup-btn {
	background-color: #0f172a !important;
	color: #ffffff !important;
}

html:not(.dark) .header-signup-btn:hover {
	background-color: #1e293b !important;
	transform: translateY(-1px) !important;
}

/* Dark Mode Guest Buttons styling */
html.dark .header-login-btn {
	background-color: rgba(249, 115, 22, 0.12) !important;
	color: var(--custom-theme-veba-primary) !important;
}

html.dark .header-login-btn:hover {
	background-color: rgba(239, 38, 241, 0.22) !important;
	transform: translateY(-1px) !important;
}

html.dark .header-signup-btn {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-20) !important;
}

html.dark .header-signup-btn:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35) !important;
	transform: translateY(-1px) !important;
}

/* Logged-In User Profile Pill with perfect alignment */
.user-profile-pill {
	height: 42px !important;
	border-radius: 9999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.625rem !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-sizing: border-box !important;
	border: none !important;
	padding: 6px !important;
	/* Perfect circular padding on mobile when name is hidden */
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-20) !important;
}

@media (min-width: 768px) {
	.user-profile-pill {
		padding: 4px 1.25rem 4px 6px !important;
		/* Optical balance on desktop when name is visible */
	}
}

.user-profile-pill:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35) !important;
	transform: translateY(-1px) !important;
}

/* Perfect alignment overrides for avatar inside user pill */
.user-profile-pill img.avatar {
	width: 30px !important;
	height: 30px !important;
	float: none !important;
	position: static !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	object-fit: cover !important;
	display: block !important;
	flex-shrink: 0 !important;
}

/* Spacing and visual comfort improvements for login/signup modals */
.hr-modal-separator {
	margin-top: 1.75rem !important;
	margin-bottom: 1.75rem !important;
	opacity: 0.85 !important;
}

.veba-custom-theme-modal-content form {
	margin-bottom: 0.5rem !important;
}

.veba-custom-theme-modal-content form .flex-col {
	gap: 0.5rem !important;
	/* Airy feel for labels and inputs */
}

/* Mobile Search Close Button inside Fullscreen Overlay - Mobile Only */
@media (max-width: 1023px) {
	#mobileSearchCloseBtn {
		position: absolute !important;
		top: 20px !important;
		right: 20px !important;
		width: 44px !important;
		height: 44px !important;
		border-radius: 50% !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 999999 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		cursor: pointer !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
		transition: all 0.2s ease !important;
	}

	#mobileSearchCloseBtn svg {
		width: 24px !important;
		height: 24px !important;
		display: block !important;
		width: 100% !important;
	}
}

@media (min-width: 1024px) {
	#mobileSearchCloseBtn {
		display: none !important;
	}
}

html.dark #mobileSearchCloseBtn {
	background-color: var(--custom-theme-veba-border-accent) !important;
	color: var(--custom-theme-veba-text-muted) !important;
}

html.dark #mobileSearchCloseBtn:hover {
	background-color: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

html:not(.dark) #mobileSearchCloseBtn {
	background-color: rgba(0, 0, 0, 0.06) !important;
	color: #4b5563 !important;
}

html:not(.dark) #mobileSearchCloseBtn:hover {
	background-color: rgba(0, 0, 0, 0.12) !important;
	color: var(--custom-theme-veba-bg-card) !important;
}

/* Mobile Search Direct Filter Parameters & Pills Style */
.mobile-search-filters {
	backdrop-filter: blur(10px) !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	border-radius: 16px !important;
	padding: 1.25rem !important;
	margin-top: 1.5rem !important;
}

html:not(.dark) .mobile-search-filters {
	background: rgba(0, 0, 0, 0.01) !important;
	border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

@media (min-width: 1024px) {
	.mobile-search-filters {
		display: none !important;
	}
}

.filter-group {
	width: 100% !important;
}

.filter-pill-btn {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--custom-theme-veba-text-muted) !important;
	border: 1px solid var(--custom-theme-veba-border-accent) !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	border-radius: 9999px !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	user-select: none !important;
	outline: none !important;
}

html:not(.dark) .filter-pill-btn {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #4b5563 !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.filter-pill-btn:hover {
	background: var(--custom-theme-veba-border-accent) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	transform: translateY(-1px) !important;
}

html:not(.dark) .filter-pill-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	color: var(--custom-theme-veba-bg-card) !important;
	border-color: rgba(0, 0, 0, 0.16) !important;
}

/* Active Pill - Beautiful Veba Custom Theme Accent Gradient & Glowing Drop Shadow */
.filter-pill-btn.active {
	background: linear-gradient(135deg, #f97316 0%, #dc5a0a 100%) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
	transform: translateY(-1px) scale(1.02) !important;
	font-weight: 600 !important;
}

/* Custom Scrollbar for genre scroll area */
.filter-group div::-webkit-scrollbar {
	width: 5px !important;
	height: 5px !important;
}

.filter-group div::-webkit-scrollbar-track {
	background: transparent !important;
}

.filter-group div::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 99px !important;
}

html:not(.dark) .filter-group div::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1) !important;
}

/* Dedicated Mobile Search Button Style */
.search-form-submit-btn {
	background: linear-gradient(135deg, #f97316 0%, #dc5a0a 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 0 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	height: 44px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	margin-left: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	z-index: 10 !important;
}

.search-form-submit-btn:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(236, 72, 153, 0.45) !important;
}

.search-form-submit-btn:active {
	transform: translateY(1px) !important;
}

/* Force hide the Advanced button inside the quick search input on mobile */
@media (max-width: 1023px) {

	.veba-custom-theme-search-container #formQuickSearch,
	#formQuickSearch {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: 100% !important;
		gap: 8px !important;
	}

	#formQuickSearch .search-form-adv-btn {
		display: none !important;
	}

	.veba-custom-theme-search-container #formQuickSearch label,
	#formQuickSearch label {
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
		width: 100% !important;
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		min-width: 0 !important;
		width: auto !important;
	}

	#formQuickSearch input#inputQuickSearch {
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		width: 100% !important;
	}
}

/* Guarantee high-specificity styling for the submission button against theme overrides - Mobile Only */
@media (max-width: 1023px) {

	.veba-custom-theme-header button.search-form-submit-btn,
	button.search-form-submit-btn {
		background: linear-gradient(135deg, #f97316 0%, #dc5a0a 100%) !important;
		color: #ffffff !important;
		border: none !important;
		border-radius: 9999px !important;
		padding: 0 20px !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		height: 44px !important;
		cursor: pointer !important;
		box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
		margin-left: 10px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
		z-index: 10 !important;
	}
}

@media (min-width: 1024px) {

	.veba-custom-theme-header button.search-form-submit-btn,
	button.search-form-submit-btn {
		display: none !important;
	}
}

/* Hide redundant nested Advanced button inside the Search results page form */
.manga-search-form .search-form-adv-btn {
	display: none !important;
}

.manga-search-form .manga-search-field {
	padding-right: 3.5rem !important;
}

/* ==========================================
 Chapter Reader Styles
 ========================================== */

/* Dark Mode Reader Backdrop & Cleanups */
body.reading-manga {
	background-color: #080808 !important;
	color: #cbd5e1 !important;
	font-family: 'Poppins', sans-serif !important;
}

/* Light Mode Support */
html.light body.reading-manga {
	background-color: #f1f5f9 !important;
	color: #1e293b !important;
}

/* Hide sidebars on reading page */
body.reading-manga .sidebar-col {
	display: none !important;
}

body.reading-manga .main-col {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* Breadcrumb Styling on Reader Page */
body.reading-manga .c-breadcrumb-wrapper {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
}

body.reading-manga .c-breadcrumb ol.breadcrumb {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem !important;
}

body.reading-manga .c-breadcrumb ol.breadcrumb li a {
	color: var(--custom-theme-veba-text-muted) !important;
	transition: color 0.2s ease;
}

body.reading-manga .c-breadcrumb ol.breadcrumb li a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

body.reading-manga .c-breadcrumb ol.breadcrumb li.active {
	color: var(--custom-theme-veba-primary) !important;
	font-weight: 500;
}

body.reading-manga .c-breadcrumb ol.breadcrumb li+li:before {
	color: #4b5563 !important;
	content: "/" !important;
	padding: 0 8px !important;
}

/* Chapter Heading */
body.reading-manga h1#chapter-heading {
	color: #ffffff !important;
	font-size: 1.875rem !important;
	font-weight: 700 !important;
	text-align: center !important;
	margin: 20px 0 10px 0 !important;
	letter-spacing: -0.025em !important;
}

html.light body.reading-manga h1#chapter-heading {
	color: #0f172a !important;
}

/* Navigation Top & Bottom Bars */
body.reading-manga .entry-header.header,
body.reading-manga .entry-header.footer {
	background-color: rgba(9, 13, 22, 0.95) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid var(--custom-theme-veba-border-accent) !important;
	border-radius: 12px !important;
	padding: 15px 20px !important;
	margin: 20px auto !important;
	max-width: 1200px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html.light body.reading-manga .entry-header.header,
html.light body.reading-manga .entry-header.footer {
	background-color: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Madara Default Navigation Elements Cleanup */
body.reading-manga .wp-manga-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 15px !important;
	width: 100% !important;
}

/* Hide redundant elements if any */
body.reading-manga .entry-header_wrap {
	width: 100% !important;
}

/* Navigation Select Options (Dropdowns) styling */
body.reading-manga select.selectpicker,
body.reading-manga select.c-select-box,
body.reading-manga select.host-select,
body.reading-manga select.volume-select,
body.reading-manga select.chapter-select,
body.reading-manga select.style-select,
body.reading-manga select.page-select {
	display: inline-block !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	color: var(--custom-theme-veba-text-secondary) !important;
	border: 1px solid var(--custom-theme-veba-bg-card-secondary) !important;
	border-radius: 8px !important;
	padding: 8px 36px 8px 12px !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	min-width: 120px !important;
	cursor: pointer !important;
	transition: all 0.2s ease-in-out !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px 16px !important;
}

body.reading-manga select.selectpicker:hover,
body.reading-manga select.c-select-box:hover,
body.reading-manga select.host-select:hover,
body.reading-manga select.chapter-select:hover,
body.reading-manga select.page-select:hover {
	border-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
}

html.light body.reading-manga select.selectpicker,
html.light body.reading-manga select.c-select-box,
html.light body.reading-manga select.host-select,
html.light body.reading-manga select.chapter-select,
html.light body.reading-manga select.page-select {
	background-color: #ffffff !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
}

/* Prev and Next Action Buttons */
body.reading-manga .nav-links {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

body.reading-manga .nav-links a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	color: var(--custom-theme-veba-text-secondary) !important;
	border: 1px solid var(--custom-theme-veba-bg-card-secondary) !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease-in-out !important;
	cursor: pointer !important;
}

body.reading-manga .nav-links a:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 15px var(--custom-theme-veba-primary-alpha-40) !important;
}

html.light body.reading-manga .nav-links a {
	background-color: #ffffff !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
}

html.light body.reading-manga .nav-links a:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	border-color: var(--custom-theme-veba-primary) !important;
}

/* Image Read Container */
body.reading-manga .read-container {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 30px auto !important;
	max-width: 1000px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.reading-manga .reading-content {
	width: 100% !important;
	max-width: 100% !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Chapter Image Rendering */
body.reading-manga .reading-content img.wp-manga-chapter-img,
body.reading-manga #hrReadingImages img.wp-manga-chapter-img,
body.reading-manga #hrReadingImages .page-break {
	display: block !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	line-height: 0 !important;
}

body.reading-manga .reading-content img.wp-manga-chapter-img:hover,
body.reading-manga #hrReadingImages img.wp-manga-chapter-img:hover {
	transform: none !important;
}

html.light body.reading-manga .reading-content img.wp-manga-chapter-img,
html.light body.reading-manga #hrReadingImages img.wp-manga-chapter-img {
	border: none !important;
	box-shadow: none !important;
}

/* Remove default Madara container backgrounds on reading page */
body.reading-manga .c-page-content,
body.reading-manga .c-page-content .content-area,
body.reading-manga .c-page-content .container,
body.reading-manga .main-col-inner,
body.reading-manga .c-blog-post,
body.reading-manga .entry-content,
body.reading-manga .entry-content_wrap {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Full Size Image Link button */
body.reading-manga #btn_view_full_image {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	color: var(--custom-theme-veba-text-secondary) !important;
	border: 1px solid var(--custom-theme-veba-bg-card-secondary) !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	margin: 15px auto !important;
	transition: all 0.2s ease-in-out !important;
}

body.reading-manga #btn_view_full_image:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 15px var(--custom-theme-veba-primary-alpha-40) !important;
}

/* Responsive Overrides */
@media (max-width: 767px) {

	body.reading-manga .entry-header.header,
	body.reading-manga .entry-header.footer {
		padding: 10px 12px !important;
		margin: 10px 5px !important;
		border-radius: 8px !important;
	}

	body.reading-manga .wp-manga-nav {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	body.reading-manga select.selectpicker,
	body.reading-manga select.c-select-box,
	body.reading-manga select.host-select,
	body.reading-manga select.chapter-select,
	body.reading-manga select.page-select {
		width: 100% !important;
	}

	body.reading-manga .nav-links {
		justify-content: space-between !important;
		width: 100% !important;
	}

	body.reading-manga .nav-links a {
		flex: 1 !important;
		text-align: center !important;
	}
}

/* ==================================================================
 Full-Screen Reader
 ================================================================== */

/* ---- FULL-SCREEN READER RESET ---- */
/* Hide ALL Madara chrome on reading page */
body.reading-manga,
body.reading-manga html,
body.reading-manga .wrap,
body.reading-manga .body-wrap,
body.reading-manga .site-content,
body.reading-manga .c-page-content {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	box-shadow: none !important;
	border: none !important;
}

/* Force hide all theme site elements to create absolute fullscreen */
body.reading-manga .site-header,
body.reading-manga .c-sub-header-nav,
body.reading-manga .sidebar-col,
body.reading-manga .c-breadcrumb-wrapper,
body.reading-manga #chapter-heading,
body.reading-manga .site-footer,
body.reading-manga .footer-widgets,
body.reading-manga .veba-custom-theme-header,
body.reading-manga .veba-custom-theme-sidebar,
body.reading-manga .veba-custom-theme-sidebar-overlay,
body.reading-manga .go-to-top,
body.reading-manga #btn_view_full_image {
	display: none !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	visibility: hidden !important;
}

body.reading-manga .go-to-top.is-enabled {
	display: flex !important;
	height: 40px !important;
	width: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: fixed !important;
	bottom: 70px !important;
	right: 20px !important;
	z-index: 99998 !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: var(--custom-theme-veba-primary, #f97316) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.reading-manga {
	background-color: var(--custom-theme-veba-bg-card) !important;
	/* Theme background */
	color: #d1d5db !important;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow-x: hidden !important;
}

html.light body.reading-manga {
	background-color: #f3f4f6 !important;
	color: var(--custom-theme-veba-bg-card-secondary) !important;
}

body.reading-manga .main-col {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.page-break {
	width: 100%;
}

/* Remove ALL container/wrapper backgrounds and paddings */
body.reading-manga .body-wrap,
body.reading-manga .c-page,
body.reading-manga .site-content,
body.reading-manga .c-page-content,
body.reading-manga .c-page-content .content-area,
body.reading-manga .c-page-content .container,
body.reading-manga .main-col-inner,
body.reading-manga .c-blog-post,
body.reading-manga .entry-content,
body.reading-manga .entry-content_wrap,
body.reading-manga .read-container,
body.reading-manga .reading-content {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* ---- HR READER WRAPPER ---- */
.hr-reader {
	position: relative;
	min-height: 100vh;
	background-color: var(--custom-theme-veba-bg-card);
}

html.light .hr-reader {
	background-color: #f3f4f6;
}

/* ---- NAVIGATION BARS (Top + Bottom) ---- */
.hr-nav {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99999;
	background-color: var(--veba-bg-reader-bar, #0c1322);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	font-family: 'Poppins', sans-serif;
}

html.light .hr-nav {
	background-color: #ffffff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Top nav */
.hr-nav--top {
	top: 0;
	transform: translateY(-100%);
}

body.show-reading-bar .hr-nav--top {
	transform: translateY(0);
}

/* Bottom nav */
.hr-nav--bottom {
	bottom: 0;
	transform: translateY(100%);
}

body.show-reading-bar .hr-nav--bottom {
	transform: translateY(0);
}

/* ---- Nav Container ---- */
.hr-nav__container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---- Top Nav Inner ---- */
.hr-nav__inner {
	display: flex;
	align-items: center;
	min-height: 56px;
}

/* ---- Back Button ---- */
.hr-nav__back {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px 20px 0;
	color: #d1d5db;
	font-size: 1.1rem;
	text-decoration: none;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.hr-nav__back:hover {
	color: var(--custom-theme-veba-primary);
}

html.light .hr-nav__back {
	color: var(--custom-theme-veba-bg-hover);
}

/* ---- Title & Chapter Switcher Wrap ---- */
.hr-nav__title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.hr-nav__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 320px;
}

@media (min-width: 768px) {
	.hr-nav__title {
		font-size: 1rem;
		line-height: 1.25rem;
		max-width: 450px;
	}
}

.hr-nav__title-link {
	color: #d1d5db;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hr-nav__title-link:hover {
	color: var(--custom-theme-veba-primary);
}

html.light .hr-nav__title-link {
	color: var(--custom-theme-veba-bg-card-secondary);
}

/* Chapter Switcher Dropdown Button */
.hr-nav__chapter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.hr-nav__chapter-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--custom-theme-veba-primary);
	color: #ffffff;
}

.hr-nav__chapter-btn svg {
	color: #94a3b8;
	transition: transform 0.2s ease;
}

#hrChapterDropdown .hr-dropdown__panel.is-open~.hr-nav__chapter-btn svg,
#hrChapterDropdown.is-open .hr-nav__chapter-btn svg {
	transform: rotate(180deg);
}

html.light .hr-nav__chapter-btn {
	background: rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.1);
	color: #1e293b;
}

html.light .hr-nav__chapter-btn:hover {
	background: rgba(0, 0, 0, 0.1);
}

/* Chapter Dropdown Panel */
.hr-chapter-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 320px;
	max-width: 90vw;
	background-color: var(--veba-bg-reader-bar, #0c1322);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hr-chapter-dropdown__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(6px);
}

.hr-chapter-dropdown__header {
	padding: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hr-chapter-dropdown__search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.hr-chapter-dropdown__search-wrap svg {
	position: absolute;
	left: 10px;
	color: #64748b;
	pointer-events: none;
}

.hr-chapter-search-input {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	padding: 6px 10px 6px 32px;
	font-size: 0.82rem;
	color: #f8fafc;
	outline: none;
	transition: all 0.2s ease;
}

.hr-chapter-search-input:focus {
	border-color: var(--custom-theme-veba-primary);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

.hr-chapter-dropdown__list {
	max-height: 280px;
	overflow-y: auto;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hr-chapter-dropdown__list::-webkit-scrollbar {
	width: 5px;
}

.hr-chapter-dropdown__list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.hr-chapter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: 6px;
	color: #cbd5e1;
	text-decoration: none;
	font-size: 0.83rem;
	transition: all 0.15s ease;
}

.hr-chapter-item:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.hr-chapter-item.is-current {
	background: rgba(249, 115, 22, 0.15);
	color: #f472b6;
	font-weight: 600;
	border-left: 3px solid var(--custom-theme-veba-primary);
}

.hr-chapter-item__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hr-chapter-item__badge {
	font-size: 0.7rem;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--custom-theme-veba-primary);
	color: #ffffff;
	font-weight: 600;
	margin-left: 6px;
	flex-shrink: 0;
}

.hr-chapter-item--empty {
	padding: 16px;
	text-align: center;
	color: #64748b;
	font-size: 0.85rem;
}

html.light .hr-chapter-dropdown__panel {
	background-color: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

html.light .hr-chapter-dropdown__header {
	border-color: rgba(0, 0, 0, 0.06);
}

html.light .hr-chapter-search-input {
	background: #f1f5f9;
	border-color: #e2e8f0;
	color: #0f172a;
}

html.light .hr-chapter-item {
	color: #475569;
}

html.light .hr-chapter-item:hover {
	background: #f8fafc;
	color: #0f172a;
}

/* ---- Nav Actions (right side of top bar) ---- */
.hr-nav__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.hr-nav__actions {
		gap: 8px;
	}
}

/* ---- Action Buttons ---- */
.hr-nav__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 8px;
	border: none;
	background-color: rgba(31, 41, 55, 0.6);
	color: #d1d5db;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.hr-nav__btn:hover {
	background-color: var(--custom-theme-veba-bg-card-secondary);
}

html.light .hr-nav__btn {
	background-color: rgba(0, 0, 0, 0.05);
	color: #4b5563;
}

html.light .hr-nav__btn:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.hr-nav__btn i {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Settings Dropdown ---- */
.hr-dropdown {
	position: relative;
}

.hr-dropdown__panel {
	position: absolute;
	right: 0;
	top: 100%;
	transform: translateY(12px);
	width: 384px;
	max-width: 90vw;
	z-index: 100000;
	background-color: var(--veba-bg-reader-bar, #0c1322);
	border: 1px solid var(--custom-theme-veba-border-muted, rgba(255, 255, 255, 0.12));
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hr-dropdown__panel.is-open {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: translateY(6px);
}

html.light .hr-dropdown__panel {
	background-color: #ffffff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ---- Settings ---- */
.hr-settings {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hr-settings__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hr-settings__quick-actions-wrap {
	display: none;
}

.hr-settings__label {
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	color: #d1d5db;
	margin-bottom: 4px;
}

html.light .hr-settings__label {
	color: var(--custom-theme-veba-bg-hover);
}

.hr-settings__options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 6px;
	overflow: hidden;
}

.hr-settings__options--3col {
	grid-template-columns: 1fr 1fr 1fr;
}

.hr-settings__options--4col {
	grid-template-columns: repeat(4, 1fr);
}

.hr-settings__item {
	position: relative;
}

.hr-settings__item input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.hr-settings__item label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 16px;
	cursor: pointer;
	background-color: rgba(31, 41, 55, 0.7);
	/* bg-gray-800/70 */
	color: var(--custom-theme-veba-text-muted);
	transition: all 0.2s ease;
	font-size: 0.875rem;
	font-weight: 400;
}

.hr-settings__item label i {
	font-size: 1.5rem;
}

.hr-settings__item label:hover {
	background-color: rgba(17, 24, 39, 0.4);
	/* bg-gray-900/40 */
}

/* Checked state — matches Veba Custom Theme's bg-surface-primary */
.hr-settings__item input[type="radio"]:checked+label {
	background-color: var(--custom-theme-veba-primary);
	color: #ffffff;
}

html.light .hr-settings__item label {
	background-color: var(--custom-theme-veba-text-secondary);
	color: #6b7280;
}

html.light .hr-settings__item input[type="radio"]:checked+label {
	background-color: var(--custom-theme-veba-primary);
	color: #ffffff;
}

/* ---- READING CONTENT AREA ---- */
.hr-reading-content {
	user-select: none;
	-webkit-user-select: none;
	min-height: 100vh;
	padding: 64px 0;
	/* py-16 */
	display: flex;
	justify-content: center;
	width: 100%;
}

.hr-reading-content__container {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.hr-reading-content__wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* ---- Reading Wrapper ---- */
.hr-reading-wrapper {
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
}

/* ---- Click Zones ---- */
.hr-click-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 33.333%;
	z-index: 10;
	cursor: pointer;
}

.hr-click-zone--left {
	left: 0;
}

.hr-click-zone--right {
	right: 0;
}

/* ---- Reading Images ---- */
.hr-reading-images {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	z-index: 0;
	width: 100%;
}

/* Chapter Images */
.hr-reading-images img,
.hr-reading-images img.wp-manga-chapter-img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* Fit Width mode */
body.reading-manga #hrReadingImages.fit-width .reading-content img.wp-manga-chapter-img,
body.reading-manga #hrReadingImages.fit-width img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Fit Height mode */
body.reading-manga #hrReadingImages.fit-height .reading-content img.wp-manga-chapter-img,
body.reading-manga #hrReadingImages.fit-height img {
	max-height: 100vh !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Remove borders/shadows from images — clean like Veba Custom Theme */
.hr-reading-images img {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Side-by-Side (Double Page Spreads) */
body.side-by-side .hr-reading-images,
.hr-reading-images.is-side-by-side {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 0 !important;
}

body.side-by-side.reading-direction-rtl .hr-reading-images,
.direction-rtl.is-side-by-side .hr-reading-images,
.direction-rtl .hr-reading-images.is-side-by-side {
	flex-direction: row-reverse !important;
}

body.side-by-side #hrReadingImages img,
body.side-by-side #hrReadingImages .wp-manga-chapter-img,
#hrReadingImages.is-side-by-side img,
#hrReadingImages.is-side-by-side .wp-manga-chapter-img {
	max-width: 50% !important;
	max-height: 95vh !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

@media (max-width: 768px) {

	body.side-by-side #hrReadingImages img,
	body.side-by-side #hrReadingImages .wp-manga-chapter-img,
	#hrReadingImages.is-side-by-side img,
	#hrReadingImages.is-side-by-side .wp-manga-chapter-img {
		max-width: 100% !important;
	}
}

/* ---- BOTTOM NAV ---- */
.hr-bottom-nav {
	display: flex;
	align-items: center;
	min-height: 56px;
}

.hr-bottom-nav__spacer {
	width: 120px;
	flex-shrink: 1;
}

.hr-bottom-nav__center {
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Bottom nav buttons */
.hr-bottom-nav__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 20px;
	color: #d1d5db;
	font-size: 0.875rem;
	text-decoration: none;
	border: none;
	background: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.hr-bottom-nav__btn:hover {
	background-color: rgba(31, 41, 55, 0.6);
	color: #ffffff;
}

.hr-bottom-nav__btn.is-hidden {
	visibility: hidden;
}

html.light .hr-bottom-nav__btn {
	color: var(--custom-theme-veba-bg-hover);
}

html.light .hr-bottom-nav__btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.hr-bottom-nav__btn-text {
	display: none;
}

@media (min-width: 768px) {
	.hr-bottom-nav__btn-text {
		display: inline-block;
	}
}

/* ---- Page Counter ---- */
.hr-page-counter {
	position: relative;
	min-width: 90px;
	width: auto;
	flex-shrink: 0;
}

.hr-page-counter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: auto;
	min-width: 86px;
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: #e2e8f0;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.hr-page-counter__btn:hover {
	background: rgba(249, 115, 22, 0.12);
	border-color: var(--custom-theme-veba-primary);
	color: #ffffff;
	box-shadow: 0 0 14px rgba(249, 115, 22, 0.35);
}

/* Double-Page Spread Glowing Indicator */
.hr-page-counter__btn.is-double-mode {
	background: rgba(249, 115, 22, 0.1);
	border-color: rgba(249, 115, 22, 0.4);
	box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
}

.hr-page-counter__btn.is-double-mode #hrCurrentPage {
	color: var(--custom-theme-veba-primary);
	text-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
	font-weight: 700;
}

html.light .hr-page-counter__btn {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.1);
	color: var(--custom-theme-veba-bg-hover);
}

html.light .hr-page-counter__btn:hover {
	background: rgba(249, 115, 22, 0.08);
	border-color: var(--custom-theme-veba-primary);
	color: var(--custom-theme-veba-primary);
}

html.light .hr-page-counter__btn.is-double-mode {
	background: rgba(249, 115, 22, 0.08);
	border-color: var(--custom-theme-veba-primary);
}

.hr-page-counter__sep {
	color: #64748b;
	margin: 0 1px;
}

/* ---- Page Dropdown ---- */
.hr-page-dropdown {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-10px) scale(0.95);
	width: 140px;
	min-width: 130px;
	background-color: var(--veba-bg-reader-bar, #0c1322);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100000;
	overflow: hidden;
}

.hr-page-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(-10px) scale(1);
}

html.light .hr-page-dropdown {
	background-color: #ffffff;
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.hr-page-dropdown__list {
	max-height: 45vh;
	overflow-y: auto;
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hr-page-dropdown__list::-webkit-scrollbar {
	width: 5px;
}

.hr-page-dropdown__list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.hr-page-dropdown__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--custom-theme-veba-text-muted);
	border: 1.5px solid transparent;
	transition: all 0.18s ease;
	text-align: center;
	font-size: 0.84rem;
	font-weight: 500;
	white-space: nowrap;
}

.hr-page-dropdown__item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(249, 115, 22, 0.4);
	color: #ffffff;
}

.hr-page-dropdown__item.is-current {
	background: rgba(239, 38, 241, 0.18) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	font-weight: 700;
	box-shadow: 0 0 12px rgba(249, 115, 22, 0.35);
}

.hr-page-dropdown__item.is-double-spread {
	font-size: 0.8rem;
}

html.light .hr-page-dropdown__item {
	color: #64748b;
}

html.light .hr-page-dropdown__item:hover {
	background: #f8fafc;
	color: #0f172a;
}

html.light .hr-page-dropdown__item.is-current {
	background: rgba(249, 115, 22, 0.1) !important;
	color: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
}

/* ---- PROGRESS BAR ---- */
.hr-progress {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999999;
}

.hr-progress__bar {
	height: 8px;
	width: 0;
	background-color: var(--custom-theme-veba-primary);
	transition: width 0.3s ease-out;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 767px) {
	.hr-nav__container {
		padding: 0 12px;
	}

	.hr-nav__inner {
		min-height: 50px;
	}

	.hr-nav__title {
		display: none !important;
	}

	.hr-nav__action--desktop-only {
		display: none !important;
	}

	.hr-settings__quick-actions-wrap {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		margin-bottom: 8px !important;
	}

	.hr-settings__quick-actions {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 8px !important;
	}

	.hr-btn--mobile-quick {
		width: 100% !important;
		height: 42px !important;
		border-radius: 8px !important;
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255, 255, 255, 0.12) !important;
		color: #e2e8f0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: all 0.2s ease !important;
	}

	.hr-btn--mobile-quick:hover,
	.hr-btn--mobile-quick.is-active {
		background: var(--custom-theme-veba-primary-alpha-20, rgba(249, 115, 22, 0.2)) !important;
		border-color: var(--custom-theme-veba-primary, #f97316) !important;
		color: #ffffff !important;
	}

	.hr-nav__title-wrap {
		flex: 1 !important;
		min-width: 0 !important;
		max-width: calc(100vw - 110px) !important;
	}

	.hr-nav__chapter-btn {
		width: 100% !important;
		max-width: 100% !important;
		justify-content: space-between !important;
	}

	.hr-nav__chapter-name {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		flex: 1 !important;
		text-align: left !important;
	}

	.hr-nav__actions {
		gap: 4px;
	}

	.hr-nav__btn {
		width: 40px;
		height: 40px;
		font-size: 0.95rem;
	}

	.hr-dropdown__panel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: 60px;
		width: auto;
		max-width: none;
		transform: translateY(12px);
		z-index: 100001 !important;
	}

	.hr-dropdown__panel.is-open {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0);
	}

	.hr-bottom-nav__spacer {
		display: none;
	}

	.hr-bottom-nav {
		justify-content: center;
	}

	.hr-bottom-nav__center {
		gap: 6px;
	}

	.hr-bottom-nav__btn {
		padding: 6px 12px;
		font-size: 0.8rem;
	}

	.hr-page-counter {
		min-width: 80px;
	}

	.hr-page-counter__btn {
		min-width: 78px;
		padding: 6px 10px;
		font-size: 0.8rem;
	}

	.hr-page-dropdown {
		width: 130px;
	}
}

@media (max-width: 480px) {
	.hr-nav__back {
		padding: 16px 8px 16px 0;
	}

	.hr-nav__btn {
		width: 32px;
		height: 32px;
	}

	.hr-nav__chapter-btn {
		padding: 4px 8px;
		font-size: 0.75rem;
	}

	.hr-page-counter__btn {
		min-width: 70px;
		padding: 5px 8px;
		font-size: 0.78rem;
	}
}

/* ==================================================================
 Chapter List Styles
 ================================================================== */
.hr-chapter-section {
	margin-top: 32px;
	margin-bottom: 32px;
	background-color: transparent;
	border: none;
	border-radius: 0;
	font-family: 'Inter', sans-serif;
}

.hr-chapter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: transparent;
	padding: 0 0 16px 0;
	border-bottom: none;
}

.hr-chapter-title {
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.hr-chapter-title svg {
	width: 20px;
	height: 20px;
	color: var(--custom-theme-veba-primary);
}

.hr-chapter-reverse {
	color: var(--custom-theme-veba-primary) !important;
	padding: 6px 14px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background-color: rgba(249, 115, 22, 0.1) !important;
	border: 1px solid var(--custom-theme-veba-primary-alpha-30) !important;
	transition: all 0.2s ease;
	text-decoration: none !important;
}

.hr-chapter-reverse:hover {
	background-color: var(--custom-theme-veba-primary-alpha-15) !important;
	box-shadow: 0 0 12px var(--custom-theme-veba-primary-alpha-20);
}

.hr-chapter-reverse svg {
	width: 14px;
	height: 14px;
	transition: transform 0.3s ease;
}

.hr-chapter-reverse.is-reversed svg {
	transform: rotate(180deg);
}

.hr-chapter-body {
	padding: 0;
	background-color: transparent;
}

/* Volume Styles */
.hr-volume-wrapper {
	margin-bottom: 16px;
	list-style: none !important;
	border-bottom: none;
}

.hr-volume-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(15, 23, 42, 0.6);
	padding: 12px 20px;
	border-radius: 6px;
	color: #f3f4f6;
	font-weight: 600;
	font-size: 0.95rem;
	transition: all 0.2s ease;
	text-decoration: none !important;
	border-left: 3px solid transparent;
}

.hr-volume-header:hover {
	background-color: rgba(15, 23, 42, 0.9);
	color: #ffffff;
	border-left: 3px solid var(--custom-theme-veba-primary-alpha-50);
}

.hr-volume-toggle {
	width: 18px;
	height: 18px;
	color: var(--custom-theme-veba-text-muted);
	transition: transform 0.2s ease;
}

.hr-volume-header:hover .hr-volume-toggle {
	color: var(--custom-theme-veba-primary);
}

.hr-volume-wrapper.active .hr-volume-toggle {
	transform: rotate(180deg);
}

.hr-volume-list {
	padding: 0 !important;
	margin: 12px 0 0 0 !important;
	list-style: none !important;
	border-top: none;
}

/* Chapter List / Item Styles */
.hr-chapter-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* modular gap */
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.hr-chapter-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background-color: var(--custom-theme-veba-bg-card, rgba(15, 23, 42, 0.4)) !important;
	padding: 14px 20px !important;
	border-radius: 8px !important;
	border: 1px solid var(--custom-theme-veba-border-muted, rgba(255, 255, 255, 0.08)) !important;
	transition: all 0.2s ease !important;
	margin-bottom: 0 !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Eliminate unwanted default lines from theme :after/:before on chapter items */
.hr-chapter-item::after,
.hr-chapter-item::before,
li.wp-manga-chapter::after,
li.wp-manga-chapter::before,
.hr-chapter-list>li::after,
.hr-chapter-list>li::before,
.hr-chapter-list li::after,
.hr-chapter-list li::before,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li::after,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li::before,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap .sub-chap>li::before,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap .sub-chap>li::after,
body.manga-page.text-ui-light .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li::after,
body.manga-page.text-ui-light .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li::before,
.shortcode-manga-chapters .listing-chapters_wrap>ul.main.version-chap li::after,
.shortcode-manga-chapters .listing-chapters_wrap>ul.main.version-chap li::before {
	content: none !important;
	display: none !important;
	height: 0 !important;
	width: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	border: none !important;
	background: none !important;
}

.hr-chapter-list.is-sub-list .hr-chapter-item {
	background-color: var(--custom-theme-veba-bg-card-secondary, rgba(15, 23, 42, 0.2)) !important;
	margin-left: 16px !important;
	/* indent sub-items */
}

.hr-chapter-item:hover {
	background-color: var(--custom-theme-veba-bg-hover, rgba(15, 23, 42, 0.8)) !important;
	border-color: var(--custom-theme-veba-primary-alpha-30, rgba(249, 115, 22, 0.3)) !important;
}

.hr-chapter-item.is-reading {
	background-color: var(--custom-theme-veba-primary-alpha-10, rgba(249, 115, 22, 0.1)) !important;
	border-color: var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4)) !important;
}

.hr-chapter-item.is-unread .hr-chapter-name {
	font-weight: 600 !important;
	color: var(--custom-theme-veba-text-light, #ffffff) !important;
}

/* Remove default ugly strikethrough and style Read chapters gracefully */
.hr-chapter-item.is-read,
.hr-chapter-item.chapter-read,
.hr-chapter-item.read,
.hr-chapter-item.is-read *,
.hr-chapter-item.chapter-read *,
.hr-chapter-item.read *,
.hr-chapter-item[class*="read"] a {
	text-decoration: none !important;
}

.hr-chapter-item.is-read,
.hr-chapter-item.chapter-read,
.hr-chapter-item.read {
	opacity: 0.75 !important;
	background-color: var(--custom-theme-veba-bg-card-secondary, rgba(15, 23, 42, 0.2)) !important;
}

.hr-chapter-item.is-read .hr-chapter-link::before,
.hr-chapter-item.chapter-read .hr-chapter-link::before,
.hr-chapter-item.read .hr-chapter-link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

.hr-chapter-link {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	color: var(--custom-theme-veba-text-muted, #cbd5e1) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	flex: 1;
	min-width: 0;
	position: static !important;
	z-index: 1 !important;
}

/* Make entire row clickable safely without blocking meta links/action buttons */
.hr-chapter-link::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: auto;
}

.hr-chapter-link::before {
	content: '';
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: filter 0.2s ease;
}

.hr-chapter-item:hover .hr-chapter-link::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

.hr-chapter-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
	position: relative;
	z-index: 2;
}

.hr-chapter-item:hover .hr-chapter-name {
	color: var(--custom-theme-veba-text-light, #ffffff) !important;
}

/* Ensure meta items, action links, and buttons stay above the full-row click overlay */
.hr-chapter-meta,
.hr-chapter-item>a:not(.hr-chapter-link),
.hr-chapter-item>button,
.hr-chapter-item>div:not(.hr-chapter-link),
.hr-chapter-action-btn {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-left: 16px !important;
	position: relative !important;
	z-index: 5 !important;
	pointer-events: auto !important;
	white-space: nowrap !important;
}

.hr-chapter-views {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	color: #38bdf8 !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	background: rgba(56, 189, 248, 0.08) !important;
	border: 1px solid rgba(56, 189, 248, 0.18) !important;
	padding: 2px 7px !important;
	border-radius: 4px !important;
	transition: all 0.2s ease !important;
	line-height: 1.3 !important;
	pointer-events: auto !important;
	position: relative !important;
	z-index: 5 !important;
}

.hr-chapter-views svg {
	color: #38bdf8 !important;
}

.hr-chapter-item:hover .hr-chapter-views {
	background: rgba(56, 189, 248, 0.18) !important;
	border-color: rgba(56, 189, 248, 0.35) !important;
	color: #7dd3fc !important;
}

.hr-chapter-time {
	display: flex !important;
	align-items: center !important;
	color: var(--custom-theme-veba-text-muted, #64748b) !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	white-space: nowrap !important;
	position: relative !important;
	z-index: 5 !important;
	pointer-events: auto !important;
	transition: color 0.2s ease;
}

.hr-chapter-time i {
	font-style: normal !important;
}

.hr-chapter-time::before {
	display: none;
}

.hr-chapter-item:hover .hr-chapter-time {
	color: var(--custom-theme-veba-text-secondary, #94a3b8) !important;
}

.hr-chapter-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px 20px;
	background-color: rgba(15, 23, 42, 0.4);
	border-radius: 6px;
	color: #64748b;
	font-size: 0.9rem;
	text-align: center;
}

.hr-chapter-empty svg {
	width: 32px;
	height: 32px;
	opacity: 0.5;
	stroke-width: 1.5;
}

.hr-chapter-readmore {
	padding: 24px 0 0 0;
	text-align: center;
	border-top: none;
}

.hr-btn-readmore {
	display: inline-block;
	background-color: transparent;
	color: var(--custom-theme-veba-primary) !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	padding: 10px 32px !important;
	border-radius: 9999px !important;
	border: 1px solid var(--custom-theme-veba-primary-alpha-50) !important;
	cursor: pointer;
	transition: all 0.3s ease;
}

.hr-btn-readmore:hover {
	background-color: rgba(249, 115, 22, 0.1);
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 15px var(--custom-theme-veba-primary-alpha-15);
	transform: translateY(-1px);
}

/* Light Mode Overrides for Chapter List */
html.light .hr-chapter-item {
	background-color: rgba(255, 255, 255, 0.8) !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html.light .hr-chapter-item:hover {
	background-color: #f1f5f9 !important;
}

html.light .hr-chapter-list.is-sub-list .hr-chapter-item {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

html.light .hr-chapter-item.is-read,
html.light .hr-chapter-item.chapter-read,
html.light .hr-chapter-item.read {
	background-color: rgba(241, 245, 249, 0.6) !important;
}

html.light .hr-chapter-link {
	color: #334155 !important;
}

html.light .hr-chapter-item.is-unread .hr-chapter-name {
	color: #0f172a !important;
}

html.light .hr-chapter-time {
	color: #64748b !important;
}

html.light .hr-chapter-title {
	color: #0f172a !important;
}

html.light .hr-chapter-empty {
	background-color: rgba(255, 255, 255, 0.8);
	color: #64748b;
}

html.light .hr-volume-header {
	background-color: #ffffff;
	color: #334155;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

html.light .hr-volume-header:hover {
	background-color: #f8fafc;
}


@media (max-width: 640px) {
	.hr-chapter-item {
		padding: 12px 16px !important;
	}

	.hr-chapter-list.is-sub-list .hr-chapter-item {
		margin-left: 8px !important;
	}

	.hr-chapter-link {
		font-size: 0.85rem !important;
	}

	.hr-chapter-time {
		font-size: 0.75rem !important;
	}
}

@media (max-width: 1023px) {
	.header-signup-btn {
		display: none !important;
	}
}

/* ==========================================================================
 Footer Styling
 ========================================================================== */
.site-footer {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	border-top: 1px solid var(--custom-theme-veba-border-muted) !important;
	padding: 48px 0 32px 0 !important;
	font-family: 'Inter', sans-serif !important;
	color: var(--custom-theme-veba-text-muted) !important;
}

/* Sidebar widget area in footer */
.c-footer-sidebar {
	padding-bottom: 32px !important;
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
	margin-bottom: 32px !important;
}

.c-footer-sidebar .widget-title {
	color: var(--custom-theme-veba-text-light) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.5px !important;
	margin-bottom: 20px !important;
	border-left: 3px solid var(--custom-theme-veba-primary) !important;
	padding-left: 10px !important;
}

.c-footer-sidebar a {
	color: var(--custom-theme-veba-text-muted) !important;
	transition: color 0.2s ease !important;
	text-decoration: none !important;
}

.c-footer-sidebar a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

/* Bottom Footer (Copyright & Menus) */
.bottom-footer {
	background-color: transparent !important;
	padding: 0 !important;
	text-align: center !important;
}

.nav-footer {
	margin-bottom: 16px !important;
}

.nav-footer ul {
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	list-style: none !important;
}

.nav-footer ul li a {
	color: var(--custom-theme-veba-text-secondary) !important;
	font-weight: 500 !important;
	font-size: 0.9rem !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.nav-footer ul li a:hover {
	color: var(--custom-theme-veba-primary) !important;
	text-shadow: 0 0 8px var(--custom-theme-veba-primary-alpha-30) !important;
}

/* Copyright block styling */
.site-footer .copyright {
	color: var(--custom-theme-veba-text-muted) !important;
	font-size: 0.85rem !important;
	letter-spacing: 0.3px !important;
	margin-top: 12px !important;
}

.site-footer .copyright p {
	margin: 0 !important;
}

/* Footer Copyright Link */
.site-footer .copyright a {
	color: var(--custom-theme-veba-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.site-footer .copyright a:hover {
	color: var(--custom-theme-veba-primary-hover) !important;
	text-shadow: 0 0 10px var(--custom-theme-veba-primary-alpha-50) !important;
}

/* Social links in top-footer */
.wrap_social_account a {
	color: var(--custom-theme-veba-text-muted) !important;
	background-color: var(--custom-theme-veba-bg-card) !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 6px !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wrap_social_account a:hover {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 12px var(--custom-theme-veba-primary-alpha-40) !important;
	transform: translateY(-2px) !important;
}

@keyframes hrGhostFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes hrShadowScale {

	0%,
	100% {
		transform: scale(1);
		opacity: 0.15;
	}

	50% {
		transform: scale(0.85);
		opacity: 0.08;
	}
}

body.error404 {
	overflow: hidden !important;
	height: 100vh !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
}

body.error404 .site-header,
body.error404 .site-footer,
body.error404 .veba-custom-theme-sidebar,
body.error404 .c-sub-header-nav,
body.error404 .sidebar-col,
body.error404 .go-to-top {
	display: none !important;
}

.hr-svg-404 {
	display: block !important;
	width: 100% !important;
	width: 200px !important;
	height: 200px !important;
	margin: 0 auto 24px auto !important;
}

.hr-svg-404 .hr-ghost-body,
.hr-svg-404 .hr-ghost-eye,
.hr-svg-404 .hr-ghost-cheek,
.hr-svg-404 .hr-ghost-mouth {
	animation: hrGhostFloat 3s ease-in-out infinite !important;
	transform-box: fill-box !important;
	transform-origin: center !important;
}

.hr-svg-404 .hr-ghost-shadow {
	animation: hrShadowScale 3s ease-in-out infinite !important;
	transform-box: fill-box !important;
	transform-origin: center !important;
}

.c-page-404 {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.error-404_content {
	width: 100% !important;
	max-width: 500px !important;
	margin: 0 auto !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.error-404_content .entry-title h3 {
	color: var(--custom-theme-veba-text-light) !important;
	font-size: 1.8rem !important;
	font-weight: 700 !important;
	margin: 20px 0 16px 0 !important;
}

.error-404_content .entry-content {
	color: var(--custom-theme-veba-text-muted) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	margin-bottom: 24px !important;
}

.error-404_content .entry-footer .c-btn {
	background-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 12px 36px !important;
	border-radius: 9999px !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 0 15px var(--custom-theme-veba-primary-alpha-20) !important;
	text-decoration: none !important;
	display: inline-block !important;
}

.error-404_content .entry-footer .c-btn:hover {
	background-color: var(--custom-theme-veba-primary-hover) !important;
	box-shadow: 0 0 25px var(--custom-theme-veba-primary-alpha-40) !important;
	transform: translateY(-2px) !important;
}

/* ---- Rating Panel Styles ---- */
.hr-rating-panel-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
}

.hr-rating-title {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

html.light .hr-rating-title {
	color: #0c1322;
}

/* ---- Rating Panel ─ Star Row (Reading Page Override) ---- */
/* In the reading panel, JS drives hover/active — use row (left→right) direction */
#hrRatingStars.vr-rate-stars {
	flex-direction: row !important;
	/* override the row-reverse from vr-* default */
	justify-content: center;
	gap: 6px;
}

/* Reading panel star labels inherit vr-star-label base styles,
   but we bump size slightly and keep transition */
#hrRatingStars .vr-star-label {
	font-size: 1.9rem;
	color: #475569;
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease, filter 0.18s ease;
	line-height: 1;
}

/* Hover/active color */
#hrRatingStars .vr-star-label:hover {
	transform: scale(1.22);
}

.hr-rating-info {
	font-size: 0.85rem;
	color: #9ca3af;
	text-align: center;
}

.hr-rating-status {
	font-size: 0.85rem;
	font-weight: 500;
	text-align: center;
	min-height: 20px;
	transition: opacity 0.3s ease;
}

.hr-rating-status.success {
	color: #fbbf24;
	font-weight: 600;
	filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.hr-rating-status.error {
	color: #ef4444;
}


/* ---- Report Modal Custom Form Styles ---- */
.hr-report-group {
	margin-bottom: 16px;
}

.hr-report-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: #9ca3af;
	margin-bottom: 6px;
}

.hr-report-select,
.hr-report-textarea {
	width: 100%;
	background-color: #1e293b;
	border: 1px solid #334155;
	border-radius: 6px;
	padding: 10px 12px;
	color: #fff;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.2s ease;
}

html.light .hr-report-select,
html.light .hr-report-textarea {
	background-color: #f1f5f9;
	border: 1px solid #cbd5e1;
	color: #0f172a;
}

.hr-report-select:focus,
.hr-report-textarea:focus {
	border-color: var(--custom-theme-veba-primary);
}

.hr-report-textarea {
	height: 100px;
	resize: vertical;
}

.hr-report-submit-btn {
	width: 100%;
	background-color: var(--custom-theme-veba-primary);
	color: #000;
	font-weight: 700;
	padding: 12px;
	border-radius: 6px;
	cursor: pointer;
	border: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.hr-report-submit-btn:hover {
	transform: translateY(-1px);
	opacity: 0.95;
}

.hr-report-feedback {
	margin-top: 12px;
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	min-height: 20px;
}

.hr-report-feedback.success {
	color: var(--custom-theme-veba-primary);
}

.hr-report-feedback.error {
	color: #ef4444;
}

/* ---- Active State for Action Buttons ---- */
.hr-nav__btn.is-active {
	color: var(--custom-theme-veba-primary) !important;
	background-color: var(--custom-theme-veba-primary-alpha-20) !important;
}

.hr-nav__btn.is-active svg {
	fill: var(--custom-theme-veba-primary) !important;
	stroke: var(--custom-theme-veba-primary) !important;
}

/* ---- Toast Notification System ---- */
#hrToastContainer {
	position: fixed;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9999999;
	pointer-events: none;
	max-width: 360px;
	width: calc(100% - 48px);
}

@media (max-width: 576px) {
	#hrToastContainer {
		top: auto;
		bottom: 24px;
		right: 24px;
		left: 24px;
		max-width: none;
		width: calc(100% - 48px);
	}
}

.hr-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: rgba(15, 23, 42, 0.9);
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	color: #f3f4f6;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-20px) scale(0.95);
	transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 576px) {
	.hr-toast {
		transform: translateY(20px) scale(0.95);
	}
}

.hr-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

html.light .hr-toast {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.05);
	color: #1f2937;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.hr-toast--success {
	border-left: 4px solid #10b981;
}

.hr-toast--error {
	border-left: 4px solid #ef4444;
}

.hr-toast--warning {
	border-left: 4px solid #f59e0b;
}

.hr-toast--info {
	border-left: 4px solid var(--custom-theme-veba-primary);
}

.hr-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.hr-toast__icon svg {
	width: 100%;
	height: 100%;
}

.hr-toast--success .hr-toast__icon {
	color: #10b981;
}

.hr-toast--error .hr-toast__icon {
	color: #ef4444;
}

.hr-toast--warning .hr-toast__icon {
	color: #f59e0b;
}

.hr-toast--info .hr-toast__icon {
	color: var(--custom-theme-veba-primary);
}

.hr-toast__message {
	flex-grow: 1;
	line-height: 1.4;
}

/* ==========================================================================
   CSS SHIELDING & ISOLATION FOR LAYOUT ELEMENTS
   ========================================================================== */

/* Protect top and bottom navigation bars from external box-sizing & alignment overrides */
.hr-nav,
.hr-nav__container,
.hr-nav__inner,
.hr-nav__back,
.hr-nav__title,
.hr-nav__actions,
.hr-nav__btn,
.hr-nav__btn svg {
	box-sizing: border-box !important;
}

.hr-nav {
	background-color: #111111 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

html.light .hr-nav {
	background-color: #ffffff !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Modal Stacking Context & Backdrop Blur Isolation */
.veba-custom-theme-modal {
	z-index: 250000 !important;
	/* Extremely high stack priority to sit on top of everything */
}

.veba-custom-theme-modal-backdrop {
	background: rgba(0, 0, 0, 0.85) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
}

/* Ensure toast notifications sit correctly on top of all layers */
#hrToastContainer {
	z-index: 300000 !important;
}

/* ==========================================================================
   VEBA CUSTOM PREMIUM USER SETTINGS & DASHBOARD SYSTEM
   ========================================================================== */

/* Scoped Dashboard Variables supporting dynamic dark/light theme switching */
:root {
	--db-text-base: #94a3b8;
	--db-text-active: #ffffff;
	--db-border-color: rgba(255, 255, 255, 0.08);
	--db-input-bg: rgba(15, 23, 42, 0.3);
	--db-active-pill: rgba(236, 72, 153, 0.08);
	--db-card-bg: rgba(255, 255, 255, 0.015);
	--db-icon-color: #64748b;
}

/* 100% Robust Light Mode Support (Theme body.text-ui-dark) */
body.text-ui-dark,
.text-ui-dark :root,
body.text-ui-dark :root {
	--db-text-base: #475569 !important;
	--db-text-active: #0f172a !important;
	--db-border-color: rgba(0, 0, 0, 0.08) !important;
	--db-input-bg: rgba(0, 0, 0, 0.03) !important;
	--db-active-pill: rgba(236, 72, 153, 0.06) !important;
	--db-card-bg: rgba(0, 0, 0, 0.01) !important;
	--db-icon-color: #475569 !important;
}

/* 100% Robust Dark Mode Support (Theme body.text-ui-light) */
body.text-ui-light,
.text-ui-light :root,
body.text-ui-light :root {
	--db-text-base: #94a3b8 !important;
	--db-text-active: #ffffff !important;
	--db-border-color: rgba(255, 255, 255, 0.08) !important;
	--db-input-bg: rgba(15, 23, 42, 0.3) !important;
	--db-active-pill: rgba(236, 72, 153, 0.08) !important;
	--db-card-bg: rgba(255, 255, 255, 0.015) !important;
	--db-icon-color: #64748b !important;
}

.veba-user-dashboard {
	margin-top: 30px;
	margin-bottom: 50px;
	font-family: 'Outfit', 'Inter', sans-serif !important;
	color: var(--db-text-base);
}

/* Global Font Awesome Font Family Safety Override */
.veba-user-dashboard .fa,
.veba-user-dashboard .fas,
.veba-user-dashboard .far,
.veba-user-dashboard .fab,
.veba-user-dashboard .fa-solid,
.veba-user-dashboard .fa-regular {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
	font-weight: 900 !important;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
}

/* 1. Sidebar & Nav - Clean, Seamless Integrated Structure */
.veba-dashboard-sidebar {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-align: left;
	margin-bottom: 30px;
}

.veba-user-profile-header {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--db-border-color);
}

.veba-avatar-wrapper {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 2px;
	background: linear-gradient(135deg, var(--custom-theme-veba-primary), #8b5cf6);
	flex-shrink: 0;
}

.veba-user-avatar {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	object-fit: cover;
	border: 2px solid #0f172a !important;
}

html.light .veba-user-avatar {
	border-color: #ffffff !important;
}

.veba-avatar-glow {
	display: none !important;
}

/* Profile info text container — stacks name + role vertically beside avatar */
.veba-user-profile-header .veba-user-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.veba-user-name {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--db-text-active);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.veba-user-role {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--custom-theme-veba-primary);
	background: rgba(236, 72, 153, 0.08);
	padding: 2px 8px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid rgba(236, 72, 153, 0.15);
	align-self: flex-start;
}

/* Nav Menu - 100% Bulletproof to eliminate list bullet circles */
.veba-dashboard-tabs,
.veba-dashboard-tabs li,
.veba-dashboard-tab-item {
	list-style: none !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.veba-dashboard-tabs li::before,
.veba-dashboard-tabs li::after,
.veba-dashboard-tab-item::before,
.veba-dashboard-tab-item::after {
	content: none !important;
	display: none !important;
}

.veba-dashboard-tabs {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.veba-dashboard-tab-item {
	display: block !important;
	width: 100% !important;
}

.veba-dashboard-link {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	color: var(--db-text-base) !important;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: left;
	transition: all 0.2s ease !important;
	background: transparent;
	border: 1px solid transparent;
}

.veba-dashboard-link:hover {
	color: var(--db-text-active) !important;
	background: var(--db-card-bg) !important;
	border-color: var(--db-border-color) !important;
}

.veba-dashboard-tab-item.active .veba-dashboard-link {
	color: var(--db-text-active) !important;
	background: var(--db-active-pill) !important;
	border-color: rgba(236, 72, 153, 0.15) !important;
}

.veba-tab-icon {
	font-size: 1rem;
	width: 18px;
	text-align: center;
	color: var(--db-icon-color);
	transition: color 0.2s ease;
}

.veba-dashboard-tab-item.active .veba-tab-icon,
.veba-dashboard-link:hover .veba-tab-icon {
	color: var(--custom-theme-veba-primary) !important;
}

/* 2. Main Content Card - Completely Integrated flat-layout */
.veba-dashboard-content-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: auto;
}

.veba-dashboard-content-header {
	position: relative;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border-color);
}

.veba-content-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--db-text-active);
	margin: 0;
	letter-spacing: -0.02em;
}

.veba-title-glow-bar {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50px;
	height: 2px;
	border-radius: 9999px;
	background: var(--custom-theme-veba-primary);
}

/* 3. Settings Forms UI */
.veba-settings-group-card {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--db-border-color) !important;
	border-radius: 0 !important;
	padding: 0 0 32px 0 !important;
	margin-bottom: 32px !important;
}

.veba-settings-group-card:last-of-type {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.veba-group-card-title {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--db-text-active) !important;
	margin: 0 0 18px 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.veba-group-card-title i {
	color: var(--custom-theme-veba-primary) !important;
	font-size: 0.95rem !important;
}

.veba-form-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	margin-bottom: 20px !important;
}

@media (max-width: 768px) {
	.veba-form-row {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
}

.veba-form-col,
.veba-form-field {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.veba-form-stack {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.veba-form-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--db-text-base);
}

.veba-value-badge {
	background: var(--db-input-bg);
	border: 1px solid var(--db-border-color);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.9rem;
	color: var(--db-text-active);
	display: inline-block;
	word-break: break-all;
}

.veba-form-input {
	background: var(--db-input-bg) !important;
	border: 1px solid var(--db-border-color) !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 0.9rem !important;
	color: var(--db-text-active) !important;
	outline: none !important;
	transition: border-color 0.2s ease !important;
}

.veba-form-input:focus {
	border-color: var(--custom-theme-veba-primary) !important;
	background: var(--db-input-bg) !important;
}

.veba-glow-submit-btn {
	background: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-weight: 700 !important;
	font-size: 0.85rem !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: none !important;
}

.veba-glow-submit-btn:hover {
	opacity: 0.9;
	transform: none !important;
}

.veba-submit-wrapper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

/* Avatar layout adjustments */
.veba-avatar-flex-layout {
	display: flex;
	align-items: center;
	gap: 20px;
}

@media (max-width: 600px) {
	.veba-avatar-flex-layout {
		flex-direction: column;
		text-align: center;
	}
}

.veba-avatar-upload-zone {
	flex-grow: 1;
}

.veba-avatar-hint {
	font-size: 0.75rem;
	color: var(--db-icon-color);
	margin-bottom: 8px;
	display: block;
}

.veba-custom-file-upload {
	display: flex !important;
	align-items: center;
	gap: 8px;
	background: var(--db-input-bg);
	border: 1px dashed var(--db-border-color);
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: 10px;
}

.veba-custom-file-upload:hover {
	border-color: var(--custom-theme-veba-primary);
}

.veba-file-btn {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--db-text-active);
	background: rgba(255, 255, 255, 0.05);
	padding: 4px 8px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.veba-uploaded-file-name {
	font-size: 0.8rem;
	color: var(--db-text-base);
}

.veba-avatar-submit-btn {
	background: var(--db-input-bg);
	border: 1px solid var(--db-border-color);
	color: var(--db-text-active);
	padding: 8px 16px;
	font-size: 0.8rem;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.veba-avatar-submit-btn:hover {
	background: var(--custom-theme-veba-primary);
	color: #ffffff;
	border-color: var(--custom-theme-veba-primary);
}

/* Alerts */
.veba-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.85rem;
	margin-bottom: 20px;
}

.veba-alert--success {
	background: rgba(16, 185, 129, 0.08);
	border: 1px solid rgba(16, 185, 129, 0.15);
	color: #34d399;
}

.veba-alert--danger {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.15);
	color: #f87171;
}

/* 4. Bookmarks Grid Redesign - Borderless Integrated Cards */
.veba-bookmark-actions-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--db-border-color);
	padding: 0 0 16px 0;
	margin-bottom: 24px;
}

@media (max-width: 600px) {
	.veba-bookmark-actions-bar {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}

.veba-bookmark-count-label {
	font-size: 0.9rem;
	color: var(--db-text-base);
}

.veba-bookmark-count-label strong {
	color: var(--db-text-active);
}

.veba-bookmark-bulk-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.veba-checkbox-container {
	display: inline-flex;
	align-items: center;
	position: relative;
	cursor: pointer;
	user-select: none;
	gap: 8px;
}

.veba-checkbox-input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.veba-checkbox-checkmark {
	position: relative;
	height: 16px;
	width: 16px;
	background-color: var(--db-input-bg);
	border: 1px solid var(--db-border-color);
	border-radius: 4px;
	transition: all 0.2s ease;
	display: inline-block;
	flex-shrink: 0;
}

.veba-checkbox-container:hover .veba-checkbox-input~.veba-checkbox-checkmark {
	border-color: var(--custom-theme-veba-primary);
}

.veba-checkbox-container .veba-checkbox-input:checked~.veba-checkbox-checkmark {
	background-color: var(--custom-theme-veba-primary);
	border-color: var(--custom-theme-veba-primary);
}

.veba-checkbox-checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.veba-checkbox-container .veba-checkbox-input:checked~.veba-checkbox-checkmark:after {
	display: block;
}

.veba-checkbox-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--db-text-base);
}

.veba-bulk-delete-btn {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.15);
	color: #ef4444;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.veba-bulk-delete-btn:hover {
	background: #ef4444;
	color: #ffffff;
}

/* Cover cards grid layout - Clean Flat Aesthetics */
.veba-bookmark-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}

@media (max-width: 480px) {
	.veba-bookmark-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.veba-bookmark-card-wrapper {
	position: relative;
}

.veba-bookmark-card {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
}

/* Checkbox & Delete Floating Actions Bar */
.veba-card-floating-actions {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	right: 8px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	z-index: 15 !important;
	opacity: 0 !important;
	transform: translateY(-4px) !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.veba-bookmark-card-wrapper:hover .veba-card-floating-actions,
.veba-bookmark-card-wrapper.is-selected .veba-card-floating-actions,
.veba-bookmark-card-wrapper:has(.bookmark-checkbox:checked) .veba-card-floating-actions {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Usability First: Always visible on mobile devices/touch screens */
@media (max-width: 768px) {
	.veba-card-floating-actions {
		opacity: 0.95 !important;
		transform: none !important;
	}
}

/* Circular glassmorphic checkbox container */
.veba-card-checkbox-container {
	position: relative !important;
	cursor: pointer !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.veba-card-checkbox {
	position: absolute !important;
	opacity: 0 !important;
	cursor: pointer !important;
	height: 0 !important;
	width: 0 !important;
	margin: 0 !important;
}

.veba-card-checkmark {
	position: relative !important;
	height: 22px !important;
	width: 22px !important;
	background-color: rgba(15, 23, 42, 0.75) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 50% !important;
	backdrop-filter: blur(4px) !important;
	display: block !important;
	width: 100% !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.veba-card-checkbox-container:hover .veba-card-checkmark {
	border-color: var(--custom-theme-veba-primary) !important;
	transform: scale(1.05) !important;
}

.veba-card-checkbox-container .veba-card-checkbox:checked~.veba-card-checkmark {
	background-color: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 0 12px rgba(236, 72, 153, 0.4) !important;
}

.veba-card-checkmark:after {
	content: "" !important;
	position: absolute !important;
	display: none !important;
	left: 7px !important;
	top: 3px !important;
	width: 5px !important;
	height: 9px !important;
	border: solid white !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

.veba-card-checkbox-container .veba-card-checkbox:checked~.veba-card-checkmark:after {
	display: block !important;
	width: 100% !important;
}

/* Floating Delete Close Button */
.veba-card-delete-trigger {
	width: 26px !important;
	height: 26px !important;
	background: #ef4444 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #ffffff !important;
	font-size: 0.85rem !important;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	cursor: pointer !important;
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
}

.veba-card-delete-trigger:hover {
	background: #dc2626 !important;
	box-shadow: 0 4px 16px rgba(220, 38, 38, 0.5) !important;
	transform: scale(1.1) !important;
}

.veba-card-delete-trigger i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Card Cover Image */
.veba-card-cover-container {
	position: relative !important;
	aspect-ratio: 160 / 230 !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	background: var(--db-input-bg) !important;
	border: 1px solid var(--db-border-color) !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Smooth scale/translate cover on card wrapper hover */
.veba-bookmark-card-wrapper:hover .veba-card-cover-container {
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
	transform: translateY(-3px) !important;
}

.veba-card-cover-container img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: all 0.4s ease !important;
}

.veba-bookmark-card-wrapper:hover .veba-card-cover-container img {
	transform: scale(1.04) !important;
}

.veba-card-notification-badge {
	position: absolute !important;
	bottom: 8px !important;
	right: 8px !important;
	background: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	font-size: 0.7rem !important;
	font-weight: 800 !important;
	min-width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 4px !important;
	box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4) !important;
	z-index: 5 !important;
}

/* Details and Typography */
.veba-card-details {
	padding: 12px 8px 8px 8px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	flex-grow: 1 !important;
}

.veba-card-title {
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: var(--db-text-active) !important;
	margin: 0 !important;
	line-height: 1.35 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	height: 2.7em !important;
	transition: color 0.2s ease !important;
}

.veba-card-title a {
	color: inherit !important;
	text-decoration: none !important;
}

.veba-card-title a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-card-meta-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.veba-card-chapter-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 8px !important;
}

.veba-card-chapter-row .label {
	font-size: 0.72rem !important;
	color: var(--db-icon-color) !important;
	font-weight: 500 !important;
}

.veba-card-chapter-row .value {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: var(--db-text-active) !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	max-width: 70% !important;
	text-decoration: none !important;
}

.veba-card-chapter-row a.value:hover {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-card-date-row {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 0.72rem !important;
	color: var(--db-icon-color) !important;
	margin-top: 2px !important;
}

.veba-card-date-row i {
	font-size: 0.75rem !important;
}

/* Empty State visual tweaks */
.veba-empty-bookmarks-state,
.veba-empty-history-state {
	text-align: center;
	padding: 50px 24px !important;
	background: var(--custom-theme-veba-bg-card) !important;
	border: 1px dashed var(--custom-theme-veba-border-accent) !important;
	border-radius: 16px !important;
	max-width: 500px;
	margin: 40px auto !important;
}

.veba-empty-icon {
	font-size: 3rem !important;
	color: var(--custom-theme-veba-primary) !important;
	margin-bottom: 16px !important;
	opacity: 0.8;
}

.veba-empty-title {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--custom-theme-veba-text-light) !important;
	margin-bottom: 10px !important;
}

.veba-empty-desc {
	font-size: 0.85rem !important;
	color: var(--custom-theme-veba-text-muted) !important;
	margin-bottom: 20px !important;
	line-height: 1.5;
}

.veba-explore-btn {
	background: var(--custom-theme-veba-primary) !important;
	border: 1px solid var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	padding: 8px 24px !important;
	border-radius: 30px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	display: inline-block;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-20) !important;
}

.veba-explore-btn:hover {
	background: var(--custom-theme-veba-primary-hover) !important;
	border-color: var(--custom-theme-veba-primary-hover) !important;
	box-shadow: 0 6px 20px var(--custom-theme-veba-primary-alpha-40) !important;
	transform: translateY(-1.5px);
}

/* 5. Reading History Dashboard - Flat Lists Grid */
.veba-history-actions-bar {
	background: var(--custom-theme-veba-bg-card) !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	margin-bottom: 24px !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.veba-history-count-label {
	font-size: 0.85rem !important;
	color: var(--custom-theme-veba-text-secondary) !important;
}

.veba-history-count-label strong {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

@media (max-width: 600px) {
	.veba-history-grid {
		grid-template-columns: 1fr;
	}
}

.veba-history-card-wrapper {
	position: relative;
}

.veba-history-card {
	background: var(--custom-theme-veba-bg-card) !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	border-radius: 12px !important;
	display: flex;
	gap: 16px;
	padding: 14px !important;
	height: 100%;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.veba-history-card:hover {
	transform: translateY(-4px) !important;
	border-color: var(--custom-theme-veba-primary-alpha-40) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 12px var(--custom-theme-veba-primary-alpha-15) !important;
}

.veba-history-floating-actions {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	z-index: 20 !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease, transform 0.25s ease !important;
	transform: scale(0.8) !important;
}

.veba-history-card:hover .veba-history-floating-actions {
	opacity: 1 !important;
	transform: scale(1) !important;
}

.veba-history-delete-trigger {
	width: 24px !important;
	height: 24px !important;
	background: rgba(15, 23, 42, 0.8) !important;
	backdrop-filter: blur(4px) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #9ca3af !important;
	font-size: 0.75rem !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.veba-history-delete-trigger:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
	border-color: #ef4444 !important;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45) !important;
	transform: scale(1.08) !important;
}

.veba-history-delete-trigger i {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Cover image */
.veba-history-cover-container {
	width: 80px !important;
	height: 112px !important;
	border-radius: 8px !important;
	position: relative !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	background: var(--custom-theme-veba-bg-card-secondary) !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.veba-history-cover-container img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform 0.4s ease !important;
}

.veba-history-card:hover .veba-history-cover-container img {
	transform: scale(1.06) !important;
}

/* Details */
.veba-history-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
	padding-right: 0 !important;
}

.veba-history-title {
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var(--custom-theme-veba-text-light) !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.35 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.veba-history-title a {
	color: inherit !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.veba-history-title a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-history-meta-info {
	display: flex;
	flex-direction: column;
	gap: 6px !important;
	margin: 4px 0 10px 0 !important;
}

.veba-history-chapter-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px !important;
	font-size: 0.75rem !important;
}

.veba-history-chapter-row .label {
	color: var(--custom-theme-veba-text-muted) !important;
	font-weight: 500;
	width: 75px !important;
	flex-shrink: 0 !important;
}

.veba-history-chapter-row .value {
	font-weight: 600;
	color: var(--custom-theme-veba-text-secondary) !important;
	background: var(--custom-theme-veba-bg-card-secondary) !important;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	border: 1px solid var(--custom-theme-veba-border-muted) !important;
	font-size: 0.72rem !important;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 140px;
	transition: all 0.2s ease;
}

.veba-history-chapter-row a.value:hover {
	color: #ffffff !important;
	background: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
}

.veba-history-time-row {
	display: flex;
	align-items: center;
	gap: 8px !important;
	font-size: 0.72rem !important;
	color: var(--custom-theme-veba-text-muted) !important;
	margin-left: 83px !important;
	margin-top: 4px !important;
}

.veba-history-clock-svg {
	stroke: var(--custom-theme-veba-primary) !important;
	flex-shrink: 0 !important;
}

.veba-history-play-svg {
	fill: currentColor !important;
	margin-right: 2px !important;
	flex-shrink: 0 !important;
}

.veba-history-time-row span {
	color: var(--custom-theme-veba-text-muted) !important;
	display: inline-block !important;
}

@media (max-width: 360px) {
	.veba-history-chapter-row .label {
		width: auto !important;
	}

	.veba-history-time-row {
		margin-left: 0 !important;
	}
}

.veba-history-resume-btn {
	background: var(--custom-theme-veba-primary-alpha-10) !important;
	border: 1px solid var(--custom-theme-veba-primary-alpha-20) !important;
	color: var(--custom-theme-veba-primary) !important;
	padding: 5px 12px !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	border-radius: 20px !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	cursor: pointer;
	transition: all 0.25s ease !important;
	box-shadow: none !important;
}

.veba-history-resume-btn:hover {
	background: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30) !important;
	transform: translateY(-1px);
}

/* 6. Visual Options Settings Segment Redesign */
.veba-visual-grid-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.veba-visual-grid-options.grid-cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
}

@media (max-width: 768px) {
	.veba-visual-grid-options {
		grid-template-columns: 1fr !important;
	}

	.veba-visual-grid-options.grid-cols-5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.veba-visual-option-card {
	display: block !important;
	width: 100% !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	position: relative !important;
}

/* Ensure no bullet circles appear on visual options cards */
.veba-visual-option-card::before,
.veba-visual-option-card::after,
.veba-visual-grid-options li::before,
.veba-visual-grid-options li::after {
	content: none !important;
	display: none !important;
}

/* Absolutely hide legacy visual radio dots but keep them clickable inside labels */
.veba-hidden-radio,
.veba-visual-option-card input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	pointer-events: none !important;
}

.veba-visual-option-inner {
	background: var(--db-input-bg) !important;
	border: 1.5px solid var(--db-border-color) !important;
	border-radius: 8px !important;
	padding: 14px !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	text-align: center !important;
}

.veba-visual-option-inner:hover {
	border-color: var(--custom-theme-veba-primary) !important;
}

.veba-hidden-radio:checked~.veba-visual-option-inner {
	border-color: var(--custom-theme-veba-primary) !important;
	background: var(--db-active-pill) !important;
	box-shadow: 0 0 0 1px var(--custom-theme-veba-primary) !important;
}

.veba-visual-preview {
	width: 56px !important;
	height: 36px !important;
	border-radius: 6px !important;
	border: 1px solid var(--db-border-color) !important;
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	padding: 4px !important;
	gap: 3px !important;
	transition: all 0.2s ease !important;
}

/* Mini Layout Mockup: Sidebar */
.veba-visual-preview::before {
	content: "" !important;
	width: 12px !important;
	height: 100% !important;
	border-radius: 3px !important;
	display: block !important;
	width: 100% !important;
	transition: all 0.2s ease !important;
}

/* Mini Layout Mockup: Content area */
.veba-visual-preview::after {
	content: "" !important;
	flex-grow: 1 !important;
	height: 100% !important;
	border-radius: 3px !important;
	display: block !important;
	width: 100% !important;
	transition: all 0.2s ease !important;
}

/* 1. System Default mockup style */
.veba-visual-preview.default-schema {
	background: #111827 !important;
}

.veba-visual-preview.default-schema::before {
	background: #1f2937 !important;
}

.veba-visual-preview.default-schema::after {
	background: #0f172a !important;
	box-shadow: inset 0 0 0 1px var(--custom-theme-veba-primary) !important;
}

/* 2. Premium Dark mockup style */
.veba-visual-preview.dark-schema {
	background: #0b0f19 !important;
}

.veba-visual-preview.dark-schema::before {
	background: #111827 !important;
}

.veba-visual-preview.dark-schema::after {
	background: #1f2937 !important;
}

/* 3. Classic Light mockup style */
.veba-visual-preview.light-schema {
	background: #f8fafc !important;
}

.veba-visual-preview.light-schema::before {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.veba-visual-preview.light-schema::after {
	background: #f1f5f9 !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Visual accent dots */
.veba-visual-preview .dot {
	position: absolute !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	bottom: 4px !important;
	display: block !important;
	width: 100% !important;
}

.veba-visual-preview .dot.primary {
	background: var(--custom-theme-veba-primary) !important;
	right: 12px !important;
}

.veba-visual-preview .dot.secondary {
	background: var(--custom-theme-veba-primary-hover) !important;
	right: 4px !important;
}

.veba-option-visual-icon {
	font-size: 1.25rem !important;
	color: var(--db-icon-color) !important;
}

.veba-hidden-radio:checked~.veba-visual-option-inner .veba-option-visual-icon {
	color: var(--custom-theme-veba-primary) !important;
}

.veba-option-label {
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: var(--db-text-base) !important;
}

.veba-hidden-radio:checked~.veba-visual-option-inner .veba-option-label {
	color: var(--db-text-active) !important;
}

.veba-option-number-label {
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	color: var(--db-text-active) !important;
}

/* 7. Redesigning "My Uploaded Mangas" Layout to match modern style */
.manga_content .c-blog__inner,
.manga_content .c-blog-listing {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.page-content-listing.item-simple {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.page-content-listing.item-simple .page-listing-item {
	border-bottom: 1px solid var(--db-border-color);
	padding-bottom: 16px;
}

.page-content-listing.item-simple .page-listing-item:last-child {
	border-bottom: none;
}

.page-content-listing.item-simple .page-item-detail {
	display: flex;
	gap: 14px;
	align-items: center;
}

.page-content-listing.item-simple .item-thumb {
	width: 50px;
	height: 70px;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--db-border-color);
	flex-shrink: 0;
	margin: 0 !important;
}

.page-content-listing.item-simple .item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-content-listing.item-simple .item-summary {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.page-content-listing.item-simple .post-title {
	margin: 0 !important;
}

.page-content-listing.item-simple .post-title h5 {
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	color: var(--db-text-active) !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

.page-content-listing.item-simple .post-title h5 a {
	color: inherit !important;
}

.page-content-listing.item-simple .post-title h5 a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

.page-content-listing.item-simple .meta-item.rating {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
}

.page-content-listing.item-simple .list-chapter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.75rem;
}

/* Pagination Overwrite to match style */
.madara-pagination,
.navigation-ajax {
	margin-top: 30px !important;
}

.madara-pagination a,
.navigation-ajax a {
	background: var(--db-input-bg) !important;
	border: 1px solid var(--db-border-color) !important;
	color: var(--db-text-active) !important;
	border-radius: 6px !important;
	padding: 8px 14px !important;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	transition: background-color 0.2s ease !important;
}

.madara-pagination a:hover,
.navigation-ajax a:hover {
	background: var(--custom-theme-veba-primary) !important;
	border-color: var(--custom-theme-veba-primary) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   ROBUST MOBILE RESPONSIVENESS AND TABS TO SCROLLBAR NAVIGATION
   ========================================================================== */
@media (max-width: 768px) {

	/* Convert vertical nav sidebar into a horizontal touch swipable bar */
	.veba-dashboard-sidebar {
		border-bottom: 1px solid var(--db-border-color) !important;
		padding-bottom: 16px !important;
		margin-bottom: 24px !important;
	}

	.veba-user-profile-header {
		border-bottom: none !important;
		margin-bottom: 14px !important;
		padding-bottom: 0 !important;
		justify-content: center;
	}

	.veba-dashboard-nav {
		background: var(--db-input-bg) !important;
		border: 1px solid var(--db-border-color) !important;
		border-radius: 12px !important;
		padding: 4px !important;
		margin-bottom: 20px !important;
		overflow: hidden !important;
	}

	.veba-dashboard-tabs {
		flex-direction: row !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		flex-wrap: nowrap !important;
		-webkit-overflow-scrolling: touch !important;
		padding: 0 !important;
		gap: 4px !important;
		scrollbar-width: none !important;
	}

	.veba-dashboard-tabs::-webkit-scrollbar {
		display: none !important;
	}

	.veba-dashboard-tab-item {
		flex: 1 0 auto !important;
		text-align: center !important;
	}

	.veba-dashboard-link {
		padding: 10px 16px !important;
		font-size: 0.8rem !important;
		font-weight: 700 !important;
		gap: 6px !important;
		border-radius: 8px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: var(--db-text-base) !important;
		background: transparent !important;
		border: none !important;
		transition: all 0.2s ease !important;
	}

	.veba-dashboard-tab-item.active .veba-dashboard-link {
		background: var(--db-card-bg) !important;
		color: var(--custom-theme-veba-primary) !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	}

	.veba-tab-icon {
		font-size: 0.95rem !important;
	}
}

/* ==========================================================================
   THEME style.css OVERRIDE NEUTRALIZATION FOR .settings-page
   These rules override conflicting legacy styles from the parent theme
   ========================================================================== */

/* Kill legacy nav-tabs-wrap entirely since we use .veba-dashboard-tabs */
.settings-page .nav-tabs-wrap {
	display: none !important;
}

/* Completely hide the redundant User Settings h1 heading to achieve the sleek integrated look */
.settings-page h1.item-title,
.settings-page .item-title,
.settings-page h1.item-title.h2,
h1.item-title.h2 {
	display: none !important;
}

/* Remove the border and padding of the entry-title/entry-header exclusively on the User Settings page */
body:has(.veba-user-dashboard) .entry-title,
body:has(.settings-page) .entry-title,
body:has(.veba-user-dashboard) .entry-header,
body:has(.settings-page) .entry-header {
	border-bottom: none !important;
	border: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	box-shadow: none !important;
}

/* Prevent theme from constraining our custom inputs */
.settings-page .veba-form-input,
.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"],
.settings-page input[type="search"],
.settings-page textarea {
	max-width: 100% !important;
}

/* Override legacy label styling */
.settings-page .veba-form-label,
.settings-page label {
	font-weight: 700 !important;
	color: var(--db-text-base) !important;
}

/* Override legacy h3 size and color from theme (.settings-title h3 etc.) */
.settings-page .veba-group-card-title,
.settings-page .veba-content-title,
.settings-page .settings-title h3 {
	font-size: inherit !important;
	margin-bottom: inherit !important;
	color: var(--db-text-active) !important;
}

/* Override legacy tabs-content-wrap padding */
.settings-page .tabs-content-wrap,
.settings-page .veba-dashboard-tab-body {
	padding-bottom: 0 !important;
}

/* Override legacy choose-avatar sizing from theme */
.settings-page .choose-avatar {
	width: auto !important;
	height: auto !important;
	float: none !important;
	border: none !important;
	margin-right: 0 !important;
	overflow: visible !important;
	position: relative !important;
}

.settings-page .choose-avatar img {
	position: static !important;
	transform: none !important;
}

/* Override legacy submit button styling */
.settings-page .veba-glow-submit-btn,
.settings-page input[type="submit"] {
	width: auto !important;
	padding: 10px 20px !important;
}

/* Override legacy tab-item borders from theme */
.settings-page .tab-group-item .tab-item {
	padding: 0 !important;
	border-bottom: none !important;
}

/* Override legacy .show font-weight */
.settings-page .show {
	font-weight: inherit !important;
	color: inherit !important;
}

/* Override legacy history-content from theme */
.settings-page .history-content {
	padding: 0 !important;
}

.settings-page .history-content .item-thumb {
	float: none !important;
	width: auto !important;
}

/* Fix file input visibility inside our custom uploader */
.veba-file-input,
.settings-page .veba-custom-file-upload input[type="file"] {
	display: none !important;
}

/* ==========================================================================
   ROBUST DYNAMIC HEADER AND FOOTER ACCENT BINDINGS
   Forces main site header & footer to follow custom theme variables on switch
   ========================================================================== */

/* Header and navigation background transitions */
.site-header,
.site-header .c-header__top,
.site-header .c-sub-header-nav,
.veba-custom-theme-header,
.c-sub-header-nav {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	border-bottom: 1px solid var(--custom-theme-veba-border-muted) !important;
	transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Header main menu navigation colors */
.main-navigation .main-menu ul.main-navbar>li>a {
	color: var(--custom-theme-veba-text-secondary) !important;
	transition: color 0.2s ease !important;
}

.main-navigation .main-menu ul.main-navbar>li:hover>a,
.main-navigation .main-menu ul.main-navbar>li.active>a {
	color: var(--custom-theme-veba-primary) !important;
}

/* Header search dropdown menu styling */
.site-header .search-main-menu,
.site-header .search-main-menu form,
.site-header .search-main-menu form input[type="text"] {
	background-color: var(--custom-theme-veba-bg-card) !important;
	color: var(--custom-theme-veba-text-light) !important;
	border-color: var(--custom-theme-veba-border-muted) !important;
}

/* Footer layout color transitions */
.site-footer {
	background-color: var(--custom-theme-veba-bg-deep) !important;
	border-top: 1px solid var(--custom-theme-veba-border-muted) !important;
	transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.c-footer-sidebar {
	border-bottom-color: var(--custom-theme-veba-border-muted) !important;
}

.c-footer-sidebar .widget-title {
	color: var(--custom-theme-veba-text-light) !important;
}

.c-footer-sidebar a,
.nav-footer ul li a {
	color: var(--custom-theme-veba-text-secondary) !important;
	transition: color 0.2s ease !important;
}

.c-footer-sidebar a:hover,
.nav-footer ul li a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

.site-footer .copyright {
	color: var(--custom-theme-veba-text-muted) !important;
}

/* ==========================================================================
   MASTER SETTINGS PAGE LIGHT/DARK CONTRAST HARMONIZATION
   Guarantees all inputs, select options, badges, lists, and forms inside 
   the dashboard switch perfectly with full contrast in both color modes.
   ========================================================================== */

/* Settings main container text reset */
.veba-user-dashboard,
.settings-page,
.settings-page * {
	font-family: 'Outfit', 'Inter', sans-serif !important;
}

/* Force text base color on general texts */
.settings-page p,
.settings-page span,
.settings-page td,
.settings-page li,
.settings-page label,
.veba-avatar-hint,
.veba-form-label,
.veba-checkbox-label {
	color: var(--db-text-base) !important;
}

/* Force text active color on strong tags, names, headings, active values */
.settings-page h1,
.settings-page h2,
.settings-page h3,
.settings-page h4,
.settings-page strong,
.settings-page b,
.veba-user-name,
.veba-content-title,
.veba-value-badge,
.veba-option-number-label {
	color: var(--db-text-active) !important;
}

/* Make sure all inputs are perfectly themed */
.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"],
.settings-page input[type="search"],
.settings-page textarea,
.settings-page select,
.veba-form-input {
	background-color: var(--db-input-bg) !important;
	color: var(--db-text-active) !important;
	border: 1px solid var(--db-border-color) !important;
	border-radius: 8px !important;
	transition: all 0.2s ease !important;
}

.settings-page input:focus,
.settings-page textarea:focus,
.settings-page select:focus,
.veba-form-input:focus {
	border-color: var(--custom-theme-veba-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 1px var(--custom-theme-veba-primary) !important;
}

/* Style default select dropdown options to ensure light/dark readability */
.settings-page select option {
	background-color: var(--custom-theme-veba-bg-card) !important;
	color: var(--db-text-active) !important;
}

/* Custom upload zones and dash outlines */
.veba-custom-file-upload {
	background: var(--db-input-bg) !important;
	border: 1px dashed var(--db-border-color) !important;
	color: var(--db-text-base) !important;
}

.veba-custom-file-upload:hover {
	border-color: var(--custom-theme-veba-primary) !important;
	color: var(--db-text-active) !important;
}

/* Role pill custom background to look beautiful under light/dark modes */
.veba-user-role {
	background: var(--db-active-pill) !important;
	border: 1px solid rgba(236, 72, 153, 0.2) !important;
	color: var(--custom-theme-veba-primary) !important;
}

/* Bookmark & history lists item backgrounds */
.veba-bookmark-card,
.veba-history-card,
.item-mymanga-card,
.page-content-listing.item-simple {
	background-color: var(--db-card-bg) !important;
	border: 1px solid var(--db-border-color) !important;
	border-radius: 8px !important;
}

/* Visual Settings Grid Option Card active glow and contrast fixes */
.veba-visual-option-inner {
	background: var(--db-input-bg) !important;
	border: 1.5px solid var(--db-border-color) !important;
}

.veba-hidden-radio:checked~.veba-visual-option-inner {
	border-color: var(--custom-theme-veba-primary) !important;
	background: var(--db-active-pill) !important;
	box-shadow: 0 0 0 1px var(--custom-theme-veba-primary) !important;
}

/* ==========================================================================
   Sticky Footer & Layout Spacing Corrections (Prevents floating footers & white margins)
   ========================================================================== */
.wrap {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100vh !important;
	width: 100% !important;
	align-items: stretch !important;
}

.body-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 0 auto !important;
	width: 100% !important;
	align-items: stretch !important;
}

.site-content {
	flex: 1 0 auto !important;
	width: 100% !important;
	align-self: stretch !important;
}

.site-footer {
	flex-shrink: 0 !important;
	padding: 12px 0 !important;
	/* Super compact vertical padding */
	width: 100% !important;
	align-self: stretch !important;
}

.c-footer-sidebar {
	padding-bottom: 8px !important;
	margin-bottom: 8px !important;
}

.c-footer-sidebar .widget-title {
	margin-bottom: 6px !important;
}

.nav-footer {
	margin-bottom: 4px !important;
}

.site-footer .copyright {
	margin-top: 4px !important;
	margin-bottom: 0 !important;
}

body,
html {
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

body.text-ui-light {
	background-color: var(--custom-theme-veba-bg-deep) !important;
}

body.text-ui-light .site-footer {
	border-bottom: none !important;
	box-shadow: none !important;
	background-color: var(--custom-theme-veba-bg-deep) !important;
	margin-bottom: 0 !important;
}

body.text-ui-dark .site-footer {
	border-bottom: none !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   TOP HENTAI PAGE – Pagination integration with theme paginate_links()
   ========================================================================== */
.top-hentai-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.6rem;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid var(--custom-theme-veba-border-accent);
	background: var(--custom-theme-veba-bg-card-secondary);
	color: var(--custom-theme-veba-text-muted);
	transition: all 0.2s ease;
	margin: 0 2px;
}

.top-hentai-pagination .page-numbers:hover {
	background: var(--custom-theme-veba-bg-hover);
	color: var(--custom-theme-veba-text-secondary);
	border-color: var(--custom-theme-veba-border-accent);
}

.top-hentai-pagination .page-numbers.current {
	background: var(--custom-theme-veba-primary) !important;
	color: #fff !important;
	border-color: var(--custom-theme-veba-primary) !important;
	box-shadow: 0 4px 12px var(--custom-theme-veba-primary-alpha-30);
}

.top-hentai-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.top-hentai-pagination ul.page-numbers li {
	list-style: none;
}

/* Top-hentai card grid spacing fix */
.top-hentai-grid .page-listing-item,
.top-hentai-grid .manga-grid {
	display: contents !important;
}

.top-hentai-grid .manga-item {
	display: flex;
	flex-direction: column;
}

.top-hentai-grid .manga-item__wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Force no gap in settings options for segmented control look */
.hr-settings__options {
	gap: 0 !important;
}

/* Reset Page Break Gaps */
body.reading-manga .reading-content .page-break {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	display: block !important;
	width: 100% !important;
}

/* Extracted from templates */
/* Transparent Premium Breadcrumbs for Manga Single Page */
.profile-manga-wrapper .c-breadcrumb-wrapper {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: 0.5rem !important;
}

.profile-manga-wrapper .c-breadcrumb {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.profile-manga-wrapper .breadcrumb {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 1.5rem 0 !important;
	font-size: 0.875rem !important;
}

.profile-manga-wrapper .breadcrumb li {
	display: inline-flex;
	align-items: center;
}

.profile-manga-wrapper .breadcrumb a {
	color: #9ca3af !important;
	/* text-gray-400 */
	transition: color 0.2s ease-in-out;
}

.profile-manga-wrapper .breadcrumb a:hover {
	color: #ffffff !important;
}

.profile-manga-wrapper .breadcrumb li+li:before {
	color: #4b5563 !important;
	/* text-gray-600 */
	content: "/" !important;
	padding: 0 0.5rem !important;
}

/* Adaptive Light & Dark Mode Background for Blurred Cover Backdrop */
.profile-manga-wrapper {
	background-color: #080808 !important;
	transition: background-color 0.3s ease !important;
}

.profile-manga-wrapper .profile-manga-banner-gradient {
	background: linear-gradient(to bottom, transparent 65%, rgba(6, 8, 15, 0.55) 82%, rgba(6, 8, 15, 0.88) 93%, rgb(6, 8, 15) 100%) !important;
	transition: background 0.3s ease !important;
}

/* Light Mode Overrides */
html.light .profile-manga-wrapper {
	background-color: #f1f5f9 !important;
	/* Soft premium light gray */
}

html.light .profile-manga-wrapper .profile-manga-banner-gradient {
	background: linear-gradient(to bottom, transparent 65%, rgba(241, 245, 249, 0.55) 82%, rgba(241, 245, 249, 0.88) 93%, rgb(241, 245, 249) 100%) !important;
}

/* Pill Backgrounds & Borders */
html.light .manga-summary .bg-gray-900 {
	background-color: #e2e8f0 !important;
}

html.light .manga-summary a.bg-gray-900:hover {
	background-color: #cbd5e1 !important;
}

html.light .manga-summary .border-r-gray-600 {
	border-right-color: #94a3b8 !important;
}

/* Text Colors */
html.light .manga-summary .text-gray-100,
html.light .manga-summary h1.text-gray-100 {
	color: #0f172a !important;
	/* slate-900 */
}

html.light .manga-summary .text-gray-200 {
	color: #1e293b !important;
	/* slate-800 */
}

html.light .manga-summary .text-gray-300,
html.light .manga-summary .text-gray-400 {
	color: #475569 !important;
	/* slate-600 */
}

html.light .manga-summary .text-gray-500 {
	color: #64748b !important;
	/* slate-500 */
}

/* Cover Image Overlay */
html.light .manga-summary .group\/cover .absolute.inset-0 {
	background: linear-gradient(to top, rgba(241, 245, 249, 0.8), transparent 50%) !important;
}

/* Summary Headings */
html.light .manga-summary .post-content_item .summary-heading h5 {
	color: #334155 !important;
}

/* Custom Buttons */
html.light .manga-summary .btn:not(#bookmarkBtn) {
	background-color: #ffffff !important;
	color: #334155 !important;
	border-color: #cbd5e1 !important;
}

html.light .manga-summary .btn:not(#bookmarkBtn):hover {
	background-color: #f8fafc !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}

/* Breadcrumbs */
html.light .profile-manga-wrapper .breadcrumb a {
	color: #475569 !important;
}

html.light .profile-manga-wrapper .breadcrumb a:hover {
	color: var(--custom-theme-veba-primary) !important;
}

html.light .profile-manga-wrapper .breadcrumb li+li:before {
	color: #94a3b8 !important;
}

/* Metadata Labels Neon Pink Overrides */
.manga-summary .text-primary {
	color: var(--custom-theme-veba-primary) !important;
	/* Vivid Orange */
}

/* Scoped Veba Custom Theme Grid & Responsive Styles for Single Series Page */
.manga-summary {
	display: block;
	width: 100%;
}

.manga-summary .flex {
	display: flex;
}

.manga-summary .flex-col {
	flex-direction: column;
}

.manga-summary .flex-wrap {
	flex-wrap: wrap;
}

.manga-summary .items-center {
	align-items: center;
}

.manga-summary .items-start {
	align-items: flex-start;
}

.manga-summary .justify-center {
	justify-content: center;
}

.manga-summary .-mx-4 {
	margin-left: -1rem;
	margin-right: -1rem;
}

.manga-summary .px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.manga-summary .gap-10 {
	gap: 2.5rem;
}

.manga-summary .gap-7 {
	gap: 1.75rem;
}

.manga-summary .gap-4 {
	gap: 1rem;
}

.manga-summary .gap-3 {
	gap: 0.75rem;
}

.manga-summary .gap-2 {
	gap: 0.5rem;
}

.manga-summary .gap-1\.5 {
	gap: 0.375rem;
}

.manga-summary .mt-4 {
	margin-top: 1rem;
}

.manga-summary .mt-6 {
	margin-top: 1.5rem;
}

.manga-summary .my-4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.manga-summary .border-t {
	border-top-width: 1px;
}

.manga-summary .pt-4 {
	padding-top: 1rem;
}

.manga-summary .pt-5 {
	padding-top: 1.25rem;
}

.manga-summary .aspect-3\/4,
.manga-summary .aspect-\[3\/4\] {
	aspect-ratio: 3 / 4;
}

.manga-summary .shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.manga-summary .rounded-lg {
	border-radius: 0.5rem;
}

.manga-summary .max-w-\[280px\] {
	max-width: 280px;
}

.manga-summary .grid-cols-\[auto_1fr\] {
	display: grid;
	grid-template-columns: auto 1fr;
}

.manga-summary .w-full {
	width: 100%;
}

@media (min-width: 640px) {
	.manga-summary .sm\:flex-row {
		flex-direction: row;
	}

	.manga-summary .sm\:max-w-\[320px\] {
		max-width: 320px;
	}

	.manga-summary .sm\:max-w-sm {
		max-width: 24rem;
	}
}

@media (min-width: 1024px) {
	.manga-summary .lg\:flex-row {
		flex-direction: row;
	}

	.manga-summary .lg\:w-5\/12 {
		width: 41.666667%;
	}

	.manga-summary .lg\:w-7\/12 {
		width: 58.333333%;
	}

	.manga-summary .lg\:gap-0 {
		gap: 0;
	}

	.manga-summary .lg\:max-w-none {
		max-width: none;
	}
}

/* Scoped Premium Button Overrides to Bypass Bootstrap */
.manga-summary .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--custom-theme-veba-bg-card) !important;
	/* bg-gray-900 */
	color: #e5e7eb !important;
	/* text-gray-200 */
	border: 1px solid var(--custom-theme-veba-bg-card-secondary) !important;
	/* border-gray-800 */
	border-radius: 0.5rem !important;
	transition: all 0.2s ease-in-out !important;
	cursor: pointer !important;
}

.manga-summary .btn:hover {
	background-color: var(--custom-theme-veba-bg-card-secondary) !important;
	/* bg-gray-800 */
	color: #ffffff !important;
	/* text-white */
	border-color: #374151 !important;
	/* border-gray-700 */
}

.manga-summary .btn i {
	color: #9ca3af !important;
	/* text-gray-400 */
}

.manga-summary .btn:hover i {
	color: #ffffff !important;
}

/* Scoped Primary Rating Stars & Bookmark Buttons */
.manga-summary #bookmarkBtn {
	background-color: rgba(236, 72, 153, 0.6) !important;
	/* pink-500 with opacity */
	color: #ffffff !important;
	border: none !important;
}

.manga-summary #bookmarkBtn:hover {
	background-color: rgb(236, 72, 153) !important;
	/* solid pink-500 */
}

.manga-summary #bookmarkBtn i {
	color: #ffffff !important;
}

/* Premium Interactive Star Rating Hover & Active Selection System */
.rating__icon {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* Active (Checked) State stars fill-in */
.rating__icon input:checked+label .fa-solid,
.rating__icon input:checked~label .fa-solid {
	opacity: 1 !important;
}

.rating__icon input:checked+label .fa-regular,
.rating__icon input:checked~label .fa-regular {
	opacity: 0 !important;
}

/* Hover State stars fill-in (takes precedence over checked state) */
.rating__icon label:hover .fa-solid,
.rating__icon label:hover~label .fa-solid {
	opacity: 1 !important;
}

.rating__icon label:hover .fa-regular,
.rating__icon label:hover~label .fa-regular {
	opacity: 0 !important;
}

/* ── Veba Rating Widget ─────────────────────────── */
#mangaRating.vr-rating-widget {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem;
	width: 100%;
	margin-top: 20px;
	background-color: rgba(15, 23, 42, 0.55);
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	cursor: default;
	min-height: 74px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#mangaRating.vr-rating-widget:hover {
	border-color: rgba(251, 191, 36, 0.4);
	box-shadow: 0 4px 24px rgba(251, 191, 36, 0.15), 0 4px 18px rgba(0, 0, 0, 0.3);
}

/* avg panel */
.vr-avg-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}

.vr-stars-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.vr-star-filled {
	color: #fbbf24 !important;
	font-size: 1.45rem;
	filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.45));
	transition: transform 0.2s ease, filter 0.2s ease;
}

.vr-star-empty {
	color: #334155 !important;
	font-size: 1.45rem;
	transition: color 0.2s ease;
}

.vr-score {
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
	margin-left: 8px;
	letter-spacing: 0.02em;
}

.vr-vote-row {
	font-size: 0.82rem;
	color: #9ca3af;
}

.rating__count {
	font-weight: 700;
	color: #f1f5f9;
}

.vr-hint {
	opacity: 0.75;
}

/* rate panel */
.vr-rate-panel {
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.vr-rate-stars {
	display: flex;
	flex-direction: row-reverse;
	/* enables CSS sibling trick */
	gap: 6px;
}

.vr-star-label {
	font-size: 1.85rem;
	color: #475569;
	cursor: pointer;
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s ease, filter 0.18s ease;
	line-height: 1;
}

/* Hover: fill hovered star AND all lower (= all following siblings in row-reverse) */
.vr-star-label:hover,
.vr-star-label:hover~.vr-star-label {
	color: #fbbf24 !important;
	transform: scale(1.22);
	filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.95)) drop-shadow(0 0 16px rgba(245, 158, 11, 0.65));
}

.vr-star-label:hover i,
.vr-star-label:hover~.vr-star-label i,
.vr-star-label.selected i,
.vr-star-label.selected~.vr-star-label i {
	font-weight: 900 !important;
	/* Forces solid star in FontAwesome */
}

/* Selected state */
.vr-star-label.selected,
.vr-star-label.selected~.vr-star-label {
	color: #fbbf24 !important;
	filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.85));
}

.vr-rate-hint {
	font-size: 0.85rem;
	font-weight: 500;
	color: #cbd5e1;
	pointer-events: none;
}

/* spinner */
.vr-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.vr-spin {
	fill: #fbbf24;
	animation: vrSpin 0.8s linear infinite;
}

@keyframes vrSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes vrRateSuccessPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	}

	50% {
		transform: scale(1.03);
		box-shadow: 0 0 25px rgba(251, 191, 36, 0.45);
		border-color: rgba(251, 191, 36, 0.7);
	}

	100% {
		transform: scale(1);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	}
}

.vr-rating-success {
	animation: vrRateSuccessPulse 0.6s ease-in-out;
}

/* ── Modern Series Action Bar & Root-Theme Buttons ── */
.vr-action-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 10px 0 16px 0;
}

/* Primary Read Now Button */
.vr-btn-read-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 22px;
	height: 44px;
	border-radius: 9999px;
	background-color: var(--custom-theme-veba-primary, #f97316) !important;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 18px var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4));
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.vr-btn-read-now:hover {
	background-color: var(--custom-theme-veba-primary-hover, #ea6c0a) !important;
	box-shadow: 0 8px 25px var(--custom-theme-veba-primary-alpha-50, rgba(249, 115, 22, 0.55));
	transform: translateY(-2px);
	color: #ffffff !important;
}

.vr-btn-read-now i,
.vr-btn-read-now svg {
	font-size: 1.05rem;
	transition: transform 0.25s ease;
}

.vr-btn-read-now:hover i,
.vr-btn-read-now:hover svg {
	transform: scale(1.15) rotate(-3deg);
}

/* Secondary Action Buttons (Bookmark, Chapters, Share, Comments, Report) */
.vr-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	height: 44px;
	border-radius: 9999px;
	background-color: var(--custom-theme-veba-bg-card-secondary, #1f2937) !important;
	color: var(--custom-theme-veba-text-secondary, #e5e7eb) !important;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	border: 1px solid var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.08));
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.vr-btn-secondary:hover {
	background-color: var(--custom-theme-veba-bg-hover, #374151) !important;
	border-color: var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4)) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.vr-btn-secondary i,
.vr-btn-secondary svg {
	font-size: 0.95rem;
	color: var(--custom-theme-veba-primary, #f97316);
	transition: transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}

.vr-btn-secondary:hover i,
.vr-btn-secondary:hover svg {
	transform: scale(1.18);
	filter: drop-shadow(0 0 6px var(--custom-theme-veba-primary-alpha-50, rgba(249, 115, 22, 0.5)));
}

/* Specific Bookmark / Favorite States */
#bookmarkBtn.wp-manga-action-button,
#bookmarkBtn[data-action="bookmark"] {
	background-color: var(--custom-theme-veba-bg-card-secondary, #1f2937) !important;
	color: var(--custom-theme-veba-text-secondary, #e5e7eb) !important;
}

#bookmarkBtn.wp-manga-action-button:hover,
#bookmarkBtn[data-action="bookmark"]:hover {
	background-color: var(--custom-theme-veba-bg-hover, #374151) !important;
	border-color: var(--custom-theme-veba-primary-alpha-50, rgba(249, 115, 22, 0.5)) !important;
}

#bookmarkBtn.wp-manga-action-button .bookmark-icon i,
#bookmarkBtn[data-action="bookmark"] .bookmark-icon i {
	color: var(--custom-theme-veba-primary, #f97316);
}

/* Favorited / Active State */
#bookmarkBtn.wp-manga-delete-bookmark,
#bookmarkBtn[data-action="delete-bookmark"] {
	background: linear-gradient(135deg, var(--custom-theme-veba-primary, #f97316) 0%, #c2550a 100%) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 4px 18px var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4));
}

#bookmarkBtn.wp-manga-delete-bookmark:hover,
#bookmarkBtn[data-action="delete-bookmark"]:hover {
	background: linear-gradient(135deg, #f43f5e 0%, #c2550a 100%) !important;
	box-shadow: 0 6px 25px rgba(244, 63, 94, 0.55);
	transform: translateY(-2px);
}

#bookmarkBtn.wp-manga-delete-bookmark .bookmark-icon i,
#bookmarkBtn[data-action="delete-bookmark"] .bookmark-icon i {
	color: #ffffff !important;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
	animation: vebaHeartBeat 1.4s ease-in-out infinite;
}

/* Entry ID Badge */
.vr-btn-id {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	height: 44px;
	border-radius: 9999px;
	background-color: rgba(0, 0, 0, 0.25);
	color: var(--custom-theme-veba-text-muted, #9ca3af) !important;
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.05em;
	border: 1px solid var(--custom-theme-veba-border-muted, rgba(255, 255, 255, 0.05));
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none !important;
	margin-left: auto;
}

.vr-btn-id:hover {
	color: var(--custom-theme-veba-primary, #f97316) !important;
	border-color: var(--custom-theme-veba-primary-alpha-30, rgba(249, 115, 22, 0.3));
	background-color: var(--custom-theme-veba-bg-card-secondary, #1f2937);
	transform: translateY(-1px);
}

@keyframes vebaHeartBeat {

	0%,
	100% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.15);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.15);
	}

	70% {
		transform: scale(1);
	}
}

@keyframes vebaHeartPop {
	0% {
		transform: scale(0.8);
	}

	50% {
		transform: scale(1.35);
	}

	100% {
		transform: scale(1);
	}
}

.veba-heart-pop {
	animation: vebaHeartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mobile Responsiveness for Series Action Bar */
@media (max-width: 640px) {
	.vr-action-bar {
		gap: 8px;
		margin: 8px 0 14px 0;
	}

	.vr-btn-read-now {
		flex: 1 1 100%;
		height: 42px;
		font-size: 0.92rem;
		padding: 8px 16px;
		order: 1;
	}

	.vr-btn-secondary {
		flex: 1 1 calc(50% - 6px);
		height: 40px;
		font-size: 0.84rem;
		padding: 6px 12px;
		order: 2;
	}

	.vr-btn-id {
		flex: 1 1 100%;
		height: 36px;
		font-size: 0.82rem;
		margin-left: 0;
		order: 3;
	}
}

/* Veba Summary Card (Synopsis) Restored Styles */
.veba-summary-card {
	background-color: rgba(15, 23, 42, 0.4) !important;
	border-radius: 6px !important;
	padding: 14px 20px !important;
	position: relative;
	border: none !important;
}

html.light .veba-summary-card {
	background-color: rgba(255, 255, 255, 0.8) !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.veba-summary-card .summary__content {
	color: #cbd5e1 !important;
	/* matches chapter list text */
	font-size: 0.9rem !important;
	line-height: 1.8 !important;
	font-family: 'Outfit', 'Inter', sans-serif !important;
	font-weight: 500 !important;
}

.veba-summary-card .summary__content p {
	margin-bottom: 1.25rem !important;
}

.veba-summary-card .summary__content p:last-child {
	margin-bottom: 0 !important;
}

html.light .veba-summary-card .summary__content {
	color: #334155 !important;
}

/* FIX: The gradient overlay for text fade (separates bg and text elegantly) */
.veba-summary-card .summary__content.show-more::after {
	display: none !important;
}

html.light .veba-summary-card .summary__content.show-more::after {
	display: none !important;
}

.veba-readmore-wrapper {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: transparent;
	display: flex;
	justify-content: center;
	padding-bottom: 15px;
	pointer-events: none;
	z-index: 2 !important;
	/* Above the gradient */
}




.veba-readmore-btn {
	pointer-events: auto;
	background: transparent !important;
	color: var(--custom-theme-veba-primary) !important;
	border: none;
	padding: 0.5rem 0;
	font-size: 0.95rem;
	font-weight: 600;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none !important;
}

.veba-readmore-btn:hover {
	transform: translateY(-2px);
	background: transparent !important;
	color: var(--custom-theme-veba-primary-hover) !important;
	text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════
   Modern Series Information Card & Stats Widgets
   ══════════════════════════════════════════════════════════════════ */

/* Left Column Stat Cards (Views & Pages) */
.vr-stats-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	width: 100%;
	margin-top: 10px;
}

.vr-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	background-color: var(--custom-theme-veba-bg-card-secondary, #1a2234);
	border: 1px solid var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	text-align: center;
}

.vr-stat-card:hover {
	border-color: var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4));
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.vr-stat-svg {
	width: 20px;
	height: 20px;
	stroke: var(--custom-theme-veba-primary, #f97316);
	margin-bottom: 4px;
	transition: transform 0.25s ease, filter 0.25s ease;
	display: block;
}

.vr-stat-card:hover .vr-stat-svg {
	transform: scale(1.18);
	filter: drop-shadow(0 0 6px var(--custom-theme-veba-primary-alpha-50, rgba(249, 115, 22, 0.5)));
}

.vr-stat-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--custom-theme-veba-text-muted, #9ca3af);
	line-height: 1.2;
	margin-bottom: 3px;
}

.vr-stat-value {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--custom-theme-veba-text-light, #ffffff);
	letter-spacing: 0.02em;
	line-height: 1.2;
}

/* Modern Series Information Card Container */
.vr-info-card {
	background-color: var(--custom-theme-veba-bg-card, #111827);
	border: 1px solid var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.08));
	border-radius: 16px;
	padding: 20px 22px;
	width: 100%;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	margin-top: 14px;
	transition: border-color 0.2s ease;
}

.vr-info-card:hover {
	border-color: var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.14));
}

.vr-info-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--custom-theme-veba-text-light, #ffffff);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--custom-theme-veba-border-muted, rgba(255, 255, 255, 0.06));
	margin-bottom: 16px;
}

.vr-header-svg {
	width: 19px;
	height: 19px;
	stroke: var(--custom-theme-veba-primary, #f97316);
	display: block;
	flex-shrink: 0;
}

.vr-info-card-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Individual Row inside Information Card */
.vr-info-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.vr-info-icon-badge {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 9999px;
	background-color: var(--custom-theme-veba-bg-card-secondary, #1a2234);
	border: 1px solid var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.08));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	flex-shrink: 0;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vr-info-svg {
	width: 17px;
	height: 17px;
	stroke: var(--custom-theme-veba-primary, #f97316);
	transition: transform 0.25s ease, stroke 0.25s ease;
	display: block;
}

.vr-info-row:hover .vr-info-icon-badge {
	border-color: var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4));
	background-color: var(--custom-theme-veba-bg-hover, #26334d);
	transform: scale(1.08);
	box-shadow: 0 0 12px var(--custom-theme-veba-primary-alpha-20, rgba(249, 115, 22, 0.2));
}

.vr-info-row:hover .vr-info-svg {
	transform: scale(1.12);
	stroke: var(--custom-theme-veba-primary-hover, #ea6c0a);
}

.vr-info-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
	min-width: 0;
}

.vr-info-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--custom-theme-veba-text-muted, #9ca3af);
	line-height: 1;
}

.vr-info-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

/* Metadata Pill Tags */
.vr-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	background-color: var(--custom-theme-veba-bg-card-secondary, #1a2234);
	border: 1px solid var(--custom-theme-veba-border-accent, rgba(255, 255, 255, 0.08));
	color: var(--custom-theme-veba-text-secondary, #e5e7eb) !important;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
}

.vr-meta-pill:hover {
	background-color: var(--custom-theme-veba-bg-hover, #26334d) !important;
	border-color: var(--custom-theme-veba-primary-alpha-40, rgba(249, 115, 22, 0.4)) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.vr-meta-name {
	color: inherit;
}

.vr-meta-count {
	font-size: 0.75rem;
	color: var(--custom-theme-veba-text-muted, #9ca3af);
	font-weight: 600;
	padding-left: 5px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	line-height: 1;
}

.vr-meta-pill:hover .vr-meta-count {
	color: var(--custom-theme-veba-primary, #f97316);
}

.vr-meta-pill-empty {
	opacity: 0.65;
	background-color: rgba(255, 255, 255, 0.03);
	border-color: transparent;
	cursor: default;
}

.vr-meta-pill-empty:hover {
	background-color: rgba(255, 255, 255, 0.03) !important;
	border-color: transparent !important;
	color: var(--custom-theme-veba-text-secondary, #e5e7eb) !important;
	transform: none;
	box-shadow: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.vr-info-card {
		padding: 16px 14px;
		margin-top: 10px;
		border-radius: 12px;
	}

	.vr-info-row {
		gap: 10px;
	}

	.vr-info-icon-badge {
		width: 32px;
		height: 32px;
		min-width: 32px;
	}

	.vr-info-svg {
		width: 15px;
		height: 15px;
	}

	.vr-meta-pill {
		padding: 3px 10px;
		font-size: 0.78rem;
	}

	.vr-stat-value {
		font-size: 1.1rem;
	}

	.vr-stat-card {
		padding: 10px 8px;
		border-radius: 12px;
	}

	.vr-stat-svg {
		width: 18px;
		height: 18px;
	}
}