/*
	My Reading Manga — the whole front end.

	Madara's Bootstrap, slick, AOS, lightbox and 328KB stylesheet are dequeued in
	functions.php, so every rule below stands on its own. Font Awesome is the one
	outside dependency and it ships with Madara Core.
*/

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Ink, not black: a navy base keeps covers from looking washed out the way
	   a pure #000 page does, and gives the jade accent something to sit on. */
	--mrm-bg: #080b14;
	--mrm-bg-soft: #0d1220;
	--mrm-panel: #121829;
	--mrm-raise: #1b2338;
	--mrm-line: #26314b;
	--mrm-line-soft: #1a2236;

	--mrm-brand: #0c1220;
	--mrm-accent: #10b981;
	--mrm-accent-hi: #34d399;
	--mrm-accent-deep: #059669;
	--mrm-cyan: #06b6d4;
	--mrm-amber: #f59e0b;
	--mrm-gold: #fbbf24;

	--mrm-text: #e9eef8;
	--mrm-text-dim: #b5c2d6;
	--mrm-muted: #8494ac;

	--mrm-radius: 10px;
	--mrm-radius-lg: 16px;
	--mrm-gap: 16px;
	--mrm-container: 1320px;

	--mrm-font: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* One gradient, reused everywhere something needs to feel like the brand
	   rather than just another green box. */
	--mrm-grad: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
	--mrm-grad-soft: linear-gradient(135deg, rgba(16, 185, 129, .16) 0%, rgba(6, 182, 212, .16) 100%);

	--mrm-shadow: 0 12px 34px rgba(0, 0, 0, .5);
	--mrm-shadow-lift: 0 18px 44px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.as {
	margin: 0;
	background: var(--mrm-bg);
	color: var(--mrm-text);
	font-family: var(--mrm-font);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--mrm-text);
	text-decoration: none;
	transition: color .15s ease;
}

a:hover,
a:focus {
	color: var(--mrm-accent-hi);
}

h1, h2, h3, h4, h5 {
	margin: 0 0 .6em;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -.01em;
}

p {
	margin: 0 0 1em;
}

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

button {
	font: inherit;
	cursor: pointer;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid var(--mrm-accent-hi);
	outline-offset: 2px;
}

.mrm-container {
	width: 100%;
	max-width: var(--mrm-container);
	margin: 0 auto;
	padding: 0 18px;
}

.mrm-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mrm-main {
	flex: 1 0 auto;
	padding-bottom: 48px;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */

.mrm-header {
	background: var(--mrm-brand);
	position: sticky;
	top: 0;
	z-index: 60;
}

.mrm-header__inner {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 62px;
}

.mrm-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto;
}

.mrm-logo__mark {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	flex: 0 0 auto;
}

.mrm-logo__text {
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -.02em;
	color: #fff;
	white-space: nowrap;
}

.mrm-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mrm-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .92);
}

.mrm-nav a:hover,
.mrm-nav .is-current > a,
.mrm-nav .current-menu-item > a {
	background: rgba(0, 0, 0, .22);
	color: #fff;
}

.mrm-header__tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.mrm-search {
	position: relative;
	width: 260px;
}

.mrm-search__field {
	width: 100%;
	height: 40px;
	padding: 0 66px 0 38px;
	background: rgba(10, 6, 20, .55);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
}

.mrm-search__field::placeholder {
	color: rgba(255, 255, 255, .6);
}

.mrm-search__field:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .5);
	background: rgba(10, 6, 20, .8);
}

.mrm-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	pointer-events: none;
}

.mrm-search__hint {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 2px 7px;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .12);
	border-radius: 5px;
	pointer-events: none;
}

.mrm-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(10, 6, 20, .45);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.mrm-hero {
	position: relative;
	padding: 26px 0 34px;
	overflow: hidden;
	background: var(--mrm-bg-soft);
	border-bottom: 1px solid var(--mrm-line-soft);
}

/* The featured cover, blown up and blurred, is the only light in the room. */
.mrm-hero__glow {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 150%;
	background-size: cover;
	background-position: center 20%;
	filter: blur(60px) saturate(150%);
	opacity: .32;
	transform: scale(1.1);
	transition: background-image .4s ease;
	pointer-events: none;
}

.mrm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 10, 23, .45) 0%, rgba(14, 10, 23, .1) 40%, var(--mrm-bg-soft) 100%);
	pointer-events: none;
}

.mrm-hero__track {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 14px 0 10px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mrm-hero__track::-webkit-scrollbar {
	display: none;
}

.mrm-hero__item {
	position: relative;
	flex: 0 0 auto;
	width: 158px;
	scroll-snap-align: center;
	border-radius: var(--mrm-radius);
	overflow: hidden;
	opacity: .55;
	transform: scale(.93);
	transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}

.mrm-hero__item img {
	width: 100%;
	aspect-ratio: 5 / 7;
	object-fit: cover;
}

.mrm-hero__item.is-active {
	opacity: 1;
	transform: scale(1.14);
	z-index: 3;
	box-shadow: var(--mrm-shadow), 0 0 0 2px rgba(168, 85, 247, .55);
}

.mrm-hero__item:hover {
	opacity: .95;
}

.mrm-hero__score {
	position: absolute;
	top: 7px;
	left: 7px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(10, 6, 20, .82);
	border-radius: 999px;
	opacity: 0;
	transition: opacity .3s ease;
}

.mrm-hero__score i {
	color: var(--mrm-gold);
	font-size: 11px;
}

.mrm-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 10px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(8, 5, 14, .92));
	opacity: 0;
	transition: opacity .3s ease;
}

.mrm-hero__item.is-active .mrm-hero__score,
.mrm-hero__item.is-active .mrm-hero__caption {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.mrm-home {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 22px;
	align-items: start;
	padding-top: 26px;
}

.mrm-home__wide {
	grid-column: 1 / -1;
}

.mrm-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   6. Panels
   -------------------------------------------------------------------------- */

.mrm-panel {
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line-soft);
	border-radius: var(--mrm-radius-lg);
	overflow: hidden;
}

.mrm-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px 12px;
}

.mrm-panel__title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
}

.mrm-panel__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(168, 85, 247, .16);
	color: var(--mrm-accent-hi);
	font-size: 14px;
}

.mrm-tag {
	padding: 2px 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1a1200;
	background: var(--mrm-amber);
	border-radius: 5px;
}

.mrm-panel__action {
	margin-left: auto;
}

.mrm-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	background: var(--mrm-accent);
	border: 0;
	border-radius: 8px;
}

.mrm-pill:hover {
	background: var(--mrm-accent-hi);
	color: #fff;
}

.mrm-pill--amber {
	background: var(--mrm-amber);
	color: #1a1200;
}

.mrm-pill--amber:hover {
	background: var(--mrm-gold);
	color: #1a1200;
}

.mrm-panel__body {
	padding: 4px 18px 18px;
}

.mrm-panel__body--flush {
	padding: 0 18px 8px;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.mrm-row {
	position: relative;
}

.mrm-row__track {
	display: flex;
	gap: var(--mrm-gap);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.mrm-row__track::-webkit-scrollbar {
	display: none;
}

.mrm-row__track > * {
	flex: 0 0 168px;
	scroll-snap-align: start;
}

.mrm-row__nav {
	position: absolute;
	top: 32%;
	right: -8px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(27, 21, 38, .95);
	border: 1px solid var(--mrm-line);
	color: #fff;
	box-shadow: var(--mrm-shadow);
	z-index: 4;
}

.mrm-row__nav--prev {
	left: -8px;
	right: auto;
}

.mrm-row__nav:hover {
	background: var(--mrm-accent);
	border-color: var(--mrm-accent);
}

.mrm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--mrm-gap);
}

.mrm-card {
	min-width: 0;
}

.mrm-card__cover {
	position: relative;
	display: block;
	aspect-ratio: 5 / 7;
	border-radius: var(--mrm-radius);
	overflow: hidden;
	background: #100c1b;
}

.mrm-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.mrm-card:hover .mrm-card__cover img {
	transform: scale(1.06);
}

.mrm-card__type {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(139, 63, 251, .92);
	border-radius: 5px;
}

.mrm-card__title {
	display: block;
	margin: 10px 0 3px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mrm-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-card__chapter {
	display: block;
	font-size: 13px;
	color: var(--mrm-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-card__chapter:hover {
	color: var(--mrm-accent-hi);
}

/* Rating readout: gold stars, numeric score alongside. */
.mrm-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 5px;
	color: var(--mrm-gold);
	font-size: 11px;
}

.mrm-stars__value {
	margin-left: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrm-text-dim);
}

/* --------------------------------------------------------------------------
   8. Popular sidebar
   -------------------------------------------------------------------------- */

.mrm-tabs {
	display: inline-flex;
	gap: 4px;
	margin-left: auto;
	padding: 4px;
	background: var(--mrm-raise);
	border-radius: 999px;
}

.mrm-tabs button {
	padding: 5px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrm-muted);
	background: transparent;
	border: 0;
	border-radius: 999px;
}

.mrm-tabs button:hover {
	color: #fff;
}

.mrm-tabs button.is-active {
	color: #fff;
	background: var(--mrm-accent);
}

.mrm-rank {
	display: none;
	flex-direction: column;
}

.mrm-rank.is-active {
	display: flex;
}

.mrm-rank__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--mrm-line-soft);
}

.mrm-rank__item:last-child {
	border-bottom: 0;
}

.mrm-rank__num {
	flex: 0 0 26px;
	height: 26px;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--mrm-raise);
	border-radius: 50%;
}

.mrm-rank__item:nth-child(1) .mrm-rank__num {
	background: var(--mrm-accent);
}

.mrm-rank__item:nth-child(2) .mrm-rank__num,
.mrm-rank__item:nth-child(3) .mrm-rank__num {
	background: rgba(168, 85, 247, .55);
}

.mrm-rank__cover {
	flex: 0 0 48px;
	width: 48px;
	aspect-ratio: 5 / 7;
	border-radius: 6px;
	overflow: hidden;
	background: #100c1b;
}

.mrm-rank__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrm-rank__body {
	min-width: 0;
	flex: 1;
}

.mrm-rank__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mrm-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-rank__genres {
	display: block;
	font-size: 12px;
	color: var(--mrm-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-rank__genres b {
	font-weight: 500;
	color: var(--mrm-accent-hi);
}

/* --------------------------------------------------------------------------
   9. Update list
   -------------------------------------------------------------------------- */

.mrm-updates__item {
	display: flex;
	gap: 13px;
	padding: 13px 0;
	border-bottom: 1px solid var(--mrm-line-soft);
}

.mrm-updates__item:last-child {
	border-bottom: 0;
}

.mrm-updates__cover {
	flex: 0 0 58px;
	width: 58px;
	aspect-ratio: 5 / 7;
	border-radius: 6px;
	overflow: hidden;
	background: #100c1b;
}

.mrm-updates__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrm-updates__body {
	min-width: 0;
	flex: 1;
}

.mrm-updates__title {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-updates__chapters {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mrm-updates__chapter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.mrm-updates__chapter a {
	color: var(--mrm-text-dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrm-updates__chapter a:hover {
	color: var(--mrm-accent-hi);
}

.mrm-updates__time {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--mrm-muted);
}

/* --------------------------------------------------------------------------
   10. Series page
   -------------------------------------------------------------------------- */

.mrm-series {
	position: relative;
	border-radius: var(--mrm-radius-lg);
	overflow: hidden;
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line-soft);
	margin-bottom: 22px;
}

.mrm-series__backdrop {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 25%;
	filter: blur(40px) saturate(140%);
	opacity: .22;
}

.mrm-series__inner {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	background: linear-gradient(180deg, rgba(27, 21, 38, .72), var(--mrm-panel));
}

.mrm-series__cover {
	border-radius: var(--mrm-radius);
	overflow: hidden;
	aspect-ratio: 5 / 7;
	background: #100c1b;
	box-shadow: var(--mrm-shadow);
}

.mrm-series__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrm-series__title {
	margin: 0 0 6px;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
}

.mrm-series__alt {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--mrm-muted);
}

.mrm-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 10px 20px;
	margin: 0 0 16px;
	font-size: 14px;
}

.mrm-fact {
	display: flex;
	gap: 8px;
}

.mrm-fact__label {
	color: var(--mrm-muted);
	flex: 0 0 auto;
}

.mrm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 18px;
}

.mrm-chip {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12.5px;
	color: var(--mrm-text-dim);
	background: var(--mrm-raise);
	border: 1px solid var(--mrm-line);
	border-radius: 999px;
}

.mrm-chip:hover {
	color: #fff;
	border-color: var(--mrm-accent);
}

.mrm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mrm-summary {
	color: var(--mrm-text-dim);
	font-size: 14.5px;
}

.mrm-chapters {
	max-height: 640px;
	overflow-y: auto;
}

.mrm-chapters__item {
	border-bottom: 1px solid var(--mrm-line-soft);
}

.mrm-chapters__item:last-child {
	border-bottom: 0;
}

.mrm-chapters__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 18px;
	font-size: 14.5px;
	color: var(--mrm-text-dim);
}

.mrm-chapters__link:hover {
	background: var(--mrm-raise);
	color: #fff;
}

.mrm-chapters__date {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--mrm-muted);
}

/* --------------------------------------------------------------------------
   11. Reader
   -------------------------------------------------------------------------- */

.mrm-reader__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 13px 16px;
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line-soft);
	border-radius: var(--mrm-radius-lg);
	margin: 18px 0;
}

.mrm-reader__title {
	margin: 0;
	font-size: 17px;
	color: #fff;
	flex: 1 1 auto;
	min-width: 0;
}

.mrm-reader__title small {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--mrm-muted);
}

.mrm-reader__select {
	height: 38px;
	max-width: 280px;
	padding: 0 12px;
	background: var(--mrm-raise);
	border: 1px solid var(--mrm-line);
	border-radius: 8px;
	color: var(--mrm-text);
}

.mrm-reader__pages {
	background: #08060e;
	border-radius: var(--mrm-radius-lg);
	overflow: hidden;
}

.mrm-reader__pages img {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	display: block;
}

.mrm-reader__empty {
	padding: 44px 16px;
	text-align: center;
	color: var(--mrm-muted);
}

/* --------------------------------------------------------------------------
   12. Filters, pagination, buttons
   -------------------------------------------------------------------------- */

.mrm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0 18px 14px;
}

.mrm-filters__label {
	font-size: 13px;
	color: var(--mrm-muted);
	margin-right: 4px;
}

.mrm-filters__link {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mrm-text-dim);
	background: var(--mrm-raise);
	border: 1px solid var(--mrm-line);
	border-radius: 999px;
}

.mrm-filters__link.is-active,
.mrm-filters__link:hover {
	color: #fff;
	background: var(--mrm-accent);
	border-color: var(--mrm-accent);
}

.mrm-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 6px 0 20px;
}

.mrm-pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	padding: 0 12px;
	font-size: 14px;
	color: var(--mrm-text-dim);
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line-soft);
	border-radius: 8px;
}

.mrm-pagination .page-numbers:hover,
.mrm-pagination .page-numbers.current {
	color: #fff;
	background: var(--mrm-accent);
	border-color: var(--mrm-accent);
}

.mrm-empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--mrm-muted);
}

.mrm-prose {
	padding: 24px;
}

.mrm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--mrm-accent);
	border: 1px solid transparent;
	border-radius: 8px;
}

.mrm-btn:hover {
	background: var(--mrm-accent-hi);
	color: #fff;
}

.mrm-btn--ghost {
	background: transparent;
	border-color: var(--mrm-line);
	color: var(--mrm-text-dim);
}

.mrm-btn--ghost:hover {
	background: var(--mrm-raise);
	color: #fff;
}

/* --------------------------------------------------------------------------
   13. Homepage introduction
   -------------------------------------------------------------------------- */

.mrm-intro {
	padding: 24px 26px 28px;
	max-width: 940px;
	color: var(--mrm-text-dim);
	font-size: 15px;
	line-height: 1.75;
}

.mrm-intro h1 {
	margin: 0 0 14px;
	font-size: 27px;
	font-weight: 700;
	color: #fff;
}

.mrm-intro h2 {
	margin: 26px 0 8px;
	font-size: 18px;
	color: #fff;
}

.mrm-intro p {
	margin: 0 0 12px;
}

.mrm-intro a {
	color: var(--mrm-accent-hi);
}

.mrm-intro a:hover {
	text-decoration: underline;
}

.mrm-intro__links {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--mrm-line-soft);
	font-size: 14px;
}

.mrm-intro__links strong {
	color: var(--mrm-text);
	margin-right: 4px;
}

/* --------------------------------------------------------------------------
   13b. WhatsApp channel

   Kept in WhatsApp's own green rather than the site's jade accent. The two are
   close, so the glyph and the slightly warmer green are what make the button
   read as "that app I already have open" rather than one more site control.
   -------------------------------------------------------------------------- */

.mrm-wa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: #25d366;
	border-radius: 999px;
	white-space: nowrap;
	transition: background .15s ease, transform .15s ease;
}

.mrm-wa-btn i {
	font-size: 18px;
}

.mrm-wa-btn:hover {
	background: #1ebe5b;
	color: #fff;
	transform: translateY(-1px);
}

.mrm-wa-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 22px 0;
	padding: 18px 20px;
	background: linear-gradient(135deg, rgba(37, 211, 102, .15), rgba(37, 211, 102, .04));
	border: 1px solid rgba(37, 211, 102, .38);
	border-radius: var(--mrm-radius-lg);
}

.mrm-wa-cta__mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	font-size: 27px;
	color: #fff;
	background: #25d366;
	border-radius: 50%;
}

.mrm-wa-cta__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var(--mrm-text-dim);
	line-height: 1.55;
}

.mrm-wa-cta__text strong {
	display: block;
	margin-bottom: 3px;
	font-size: 16.5px;
	font-weight: 600;
	color: #fff;
}

.mrm-wa-cta__go {
	flex: 0 0 auto;
	padding: 12px 24px;
	font-size: 14.5px;
	font-weight: 700;
	color: #fff;
	background: #25d366;
	border-radius: var(--mrm-radius);
	white-space: nowrap;
	transition: background .15s ease;
}

.mrm-wa-cta__go:hover {
	background: #1ebe5b;
	color: #fff;
}

@media (max-width: 900px) {
	.mrm-wa-btn span {
		display: none;
	}

	.mrm-wa-btn {
		padding: 0 13px;
	}
}

@media (max-width: 640px) {
	.mrm-wa-cta {
		flex-wrap: wrap;
		gap: 12px;
		padding: 16px;
	}

	.mrm-wa-cta__go {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrm-wa-btn:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   14. Comments
   -------------------------------------------------------------------------- */

.mrm-comments {
	padding: 4px 0;
}

.mrm-comments__list .children {
	margin-left: 22px;
	border-left: 1px solid var(--mrm-line-soft);
	padding-left: 14px;
}

.mrm-comments .comment-body {
	padding: 12px 0;
	border-bottom: 1px solid var(--mrm-line-soft);
	font-size: 14.5px;
	color: var(--mrm-text-dim);
}

.mrm-comments .comment-author img {
	display: inline-block;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

.mrm-comments .comment-author .fn {
	color: #fff;
	font-style: normal;
	font-weight: 600;
}

.mrm-comments .comment-metadata,
.mrm-comments .comment-metadata a {
	font-size: 12.5px;
	color: var(--mrm-muted);
}

.mrm-comments .comment-reply-link {
	font-size: 13px;
	color: var(--mrm-accent-hi);
}

.mrm-comments .comment-reply-title {
	font-size: 16px;
	color: #fff;
	margin: 18px 0 10px;
}

.mrm-comments input[type="text"],
.mrm-comments input[type="email"],
.mrm-comments input[type="url"],
.mrm-comments textarea {
	width: 100%;
	max-width: 520px;
	padding: 10px 12px;
	margin-bottom: 10px;
	background: var(--mrm-raise);
	border: 1px solid var(--mrm-line);
	border-radius: 8px;
	color: var(--mrm-text);
}

.mrm-comments textarea {
	max-width: 100%;
	min-height: 110px;
}

.mrm-comments .submit {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--mrm-accent);
	border: 0;
	border-radius: 8px;
}

.mrm-comments .submit:hover {
	background: var(--mrm-accent-hi);
}

/* --------------------------------------------------------------------------
   15. Widgets and footer
   -------------------------------------------------------------------------- */

.mrm-sidebar {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.mrm-widget {
	background: var(--mrm-panel);
	border: 1px solid var(--mrm-line-soft);
	border-radius: var(--mrm-radius-lg);
	padding: 16px 18px;
}

.mrm-widget__title {
	margin: 0 0 12px;
	font-size: 16px;
	color: #fff;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--mrm-line-soft);
}

.mrm-widget li + li {
	margin-top: 8px;
}

.mrm-footer {
	background: var(--mrm-bg-soft);
	border-top: 1px solid var(--mrm-line-soft);
	margin-top: auto;
}

.mrm-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	padding-top: 28px;
	padding-bottom: 28px;
}

.mrm-footer__brand {
	max-width: 470px;
}

.mrm-footer__note {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--mrm-muted);
}

.mrm-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
}

.mrm-footer__bar {
	background: #0a0713;
	padding: 13px 0;
	font-size: 13px;
	color: var(--mrm-muted);
}

.mrm-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	color: #fff;
	background: var(--mrm-accent);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--mrm-shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
	z-index: 40;
}

.mrm-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.mrm-home {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrm-search {
		width: 200px;
	}
}

@media (max-width: 900px) {
	.mrm-header__inner {
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.mrm-nav {
		order: 4;
		width: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding-bottom: 6px;
	}

	.mrm-header.is-open .mrm-nav {
		display: flex;
	}

	.mrm-nav-toggle {
		display: grid;
		place-items: center;
	}

	.mrm-header__tools {
		gap: 8px;
	}

	.mrm-search {
		width: 100%;
		order: 5;
	}

	.mrm-series__inner {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 18px;
		padding: 18px;
	}

	.mrm-series__title {
		font-size: 22px;
	}
}

@media (max-width: 640px) {
	.mrm-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 11px;
	}

	.mrm-row__track > * {
		flex-basis: 132px;
	}

	.mrm-hero__item {
		width: 118px;
	}

	.mrm-panel__title {
		font-size: 17px;
	}

	.mrm-intro {
		padding: 18px 16px 22px;
	}

	.mrm-intro h1 {
		font-size: 21px;
	}
}

@media (max-width: 420px) {
	.mrm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mrm-series__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mrm-series__cover {
		max-width: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.mrm-hero__item,
	.mrm-card__cover img,
	.mrm-to-top,
	.mrm-row__track,
	.mrm-hero__track {
		transition: none;
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   16. Brand layer

   Everything above is the shared manga layout. This last section is what makes
   the site look like itself: a glass header instead of a solid colour bar, one
   gradient reused across every call to action, and covers that lift out of the
   grid on hover rather than just zooming inside a fixed frame.
   -------------------------------------------------------------------------- */

::selection {
	background: rgba(16, 185, 129, .3);
	color: #fff;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--mrm-line) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-thumb {
	background: var(--mrm-line);
	border-radius: 999px;
	border: 3px solid var(--mrm-bg);
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--mrm-accent-deep);
}

/* A flat brand-coloured bar reads as a template. Glass over the page, with the
   gradient reduced to a single hairline, reads as a product. */
.mrm-header {
	background: rgba(12, 18, 32, .82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mrm-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--mrm-grad);
	opacity: .85;
}

.mrm-header {
	position: sticky;
}

.mrm-logo__mark {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 18px rgba(6, 182, 212, .28);
}

.mrm-logo__text {
	background: linear-gradient(135deg, #ffffff 0%, #9beedd 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mrm-nav a:hover,
.mrm-nav .current-menu-item > a,
.mrm-nav a[aria-current="page"] {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

/* One gradient for every primary action. */
.mrm-btn,
.mrm-pill {
	background: var(--mrm-grad);
	border: 0;
	color: #04231a;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(6, 182, 212, .22);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.mrm-btn:hover,
.mrm-pill:hover {
	background: var(--mrm-grad);
	color: #04231a;
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(6, 182, 212, .3);
}

.mrm-btn--ghost {
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--mrm-line);
	color: var(--mrm-text-dim);
	box-shadow: none;
}

.mrm-btn--ghost:hover {
	background: var(--mrm-raise);
	border-color: var(--mrm-accent-deep);
	color: #fff;
	filter: none;
}

.mrm-pill--amber {
	background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
	color: #1f1400;
	box-shadow: 0 6px 18px rgba(245, 158, 11, .22);
}

.mrm-pill--amber:hover {
	background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
	color: #1f1400;
}

/* Covers lift clear of the grid, with the gradient showing as a ring rather
   than a border, so the whole card reads as one object being picked up. */
.mrm-card__cover {
	background: #0a1020;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
	transition: transform .28s ease, box-shadow .28s ease;
}

.mrm-card:hover .mrm-card__cover {
	transform: translateY(-6px);
	box-shadow: var(--mrm-shadow-lift), 0 0 0 2px rgba(16, 185, 129, .55);
}

.mrm-card__title {
	transition: color .15s ease;
}

.mrm-card:hover .mrm-card__title {
	color: var(--mrm-accent-hi);
}

.mrm-card__type {
	background: var(--mrm-grad);
	color: #04231a;
	font-weight: 700;
	letter-spacing: .04em;
}

.mrm-panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 120px), var(--mrm-panel);
	border-color: var(--mrm-line-soft);
}

.mrm-panel__icon {
	background: var(--mrm-grad-soft);
	border: 1px solid rgba(16, 185, 129, .22);
	color: var(--mrm-accent-hi);
}

/* A short gradient rule under the section name, instead of the heading sitting
   on its own with nothing tying it to the brand. */
.mrm-panel__title {
	position: relative;
	padding-bottom: 6px;
}

.mrm-panel__title::after {
	content: "";
	position: absolute;
	left: 40px;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: var(--mrm-grad);
}

.mrm-chip {
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.mrm-chip:hover {
	background: var(--mrm-grad-soft);
	border-color: rgba(16, 185, 129, .4);
	color: var(--mrm-accent-hi);
}

.mrm-series__cover {
	box-shadow: var(--mrm-shadow), 0 0 0 1px rgba(255, 255, 255, .06);
}

.mrm-chapters__link:hover {
	background: linear-gradient(90deg, rgba(16, 185, 129, .1) 0%, transparent 70%);
	color: #fff;
}

.mrm-to-top {
	background: var(--mrm-grad);
	color: #04231a;
	border: 0;
	box-shadow: 0 10px 26px rgba(6, 182, 212, .3);
}

.mrm-search__field:focus {
	border-color: rgba(16, 185, 129, .55);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}

:focus-visible {
	outline-color: var(--mrm-accent-hi);
}

@media (prefers-reduced-motion: reduce) {
	.mrm-card:hover .mrm-card__cover,
	.mrm-btn:hover,
	.mrm-pill:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   17. Ad slots
   -------------------------------------------------------------------------- */

/* Height is reserved before the network answers. Without it a unit that fills
   a second late shoves everything below it down the page — which is exactly
   what Core Web Vitals measures as layout shift, and on the reader it moves
   the panel out from under the reader's thumb mid-scroll. */
.mrm-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px 0;
	overflow: hidden;
}

.mrm-ad iframe {
	display: block;
	border: 0;
	max-width: 100%;
}

/* The native unit sizes itself, so it gets room rather than a fixed height. */
.mrm-ad--native {
	display: block;
	min-height: 260px;
}

/* In the reading strip the slot sits on the same near-black as the pages, so
   it reads as a break in the chapter rather than a hole in it. */
.mrm-ad--strip {
	margin: 0;
	padding: 22px 0;
	background: #08060e;
}

/* Above the fold on the homepage: tighter, so the hero still leads. */
.mrm-ad--lead {
	margin: 0 0 20px;
}

.mrm-ad--sidebar {
	margin-top: 18px;
}

@media (max-width: 640px) {
	.mrm-ad {
		margin: 16px 0;
	}

	.mrm-ad--strip {
		padding: 16px 0;
	}
}