/* novel-page.css — diekstrak dari inline <style> header-novel.php (2026-07-01).
   PERF: dipindah ke file eksternal agar di-cache browser lintas request (dulu ~60KB inline tiap page load).
   URL aset PHP-interpolasi diresolusi ke path relatif (../images, ../../menu.svg).
   Catatan: var(--dn-*) didefinisikan di dn-design.css (di-enqueue global). */

		html {
			font: 400 .9375rem Open Sans, sans-serif;
			line-height: 1.5
		}

		body {
			padding: 0;
			margin: 0;
			background: #f2f3f4
		}

		header a {
			color: #fff
		}

		.head-container {
			width: 100%;
			max-width: 1300px;
			margin: 0 auto;
			position: relative
		}

		a {
			text-decoration: none
		}

		.clear {
			clear: both
		}

		.m-title h2 {
			color: #fff
		}

		.head-r {
			width: calc(100% - 161px);
			box-sizing: border-box;
			padding: 0 15px;
			float: right
		}

		.s {
			display: inline-block;
			width: 20px;
			height: 30px;
			background: url("../images/s.svg") 0 6px no-repeat;
			background-size: 20px;
			position: absolute;
			top: 50%
		}

		.fire {
			display: inline-block;
			width: 16px;
			height: 16px;
			background: url("../images/fire.svg") 0 0 no-repeat;
			background-size: 18px
		}

		#s-form {
			position: relative
		}

		.s-input:active {
			border: none
		}

		input:focus {
			outline: none
		}

		svg {
			width: 16px;
			height: 16px;
			fill: currentColor
		}
		.top-ava svg {
			width: 36px;
			height: 36px;
			
		}

		.nav {
			text-align: right
		}

		::placeholder {
			color: #fff
		}

		:-ms-input-placeholder {
			color: #fff
		}

		::-ms-input-placeholder {
			color: #fff
		}

		.container-alt {
			display: none
		}

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

		button.hamburger,
		button.s-alt {
			align-self: center;
			border: 0;
			cursor: pointer;
			display: block;
			height: 36px;
			margin: 2px 10px 0 0;
			padding: 0;
			width: 36px;
			background-size: 32px;
			z-index: 30;
			margin-right: 12px 10px 0 0;
			border-radius: 18px;
			overflow: hidden
		}

		button.hamburger {
			float: left;
			margin-left: 6px
		}

		button.s-alt {
			background: url("../images/s.svg") no-repeat center/30px 30px transparent;
			float: right;
			margin-left: 10px
		}

		a.m-title {
			display: block;
			width: calc(100% - 80px);
			padding-left: 10px
		}

		a.m-title h2 {
			margin: 0;
			line-height: 40px
		}

		.site-

		.no-padding--important {
			padding: 0
		}

		.site-footer .container {
			padding: 1.5em
		}

		.container {
			max-width: 1090px
		}

		.container {
			max-width: 1020px;
			margin: 0 auto
		}

		a {
			color: var(--dn-brand);
			text-decoration: none;
			-webkit-transition: all .35s ease;
			-o-transition: all .35s ease;
			transition: all .35s ease
		}

		[class*=" col--"],
		[class^=col--] {
			float: left;
			margin-bottom: 0;
			margin-left: 3%
		}

		.copyright a {
			color: #333;
			padding: 0 5px
		}

		main.container {
			margin: 96px auto 16px;
			min-height: 300px;
			width: 100%;
			max-width: 1112px;
			box-sizing: border-box
		}

		article {
			width: 100%;
			max-width: 760px;
			box-sizing: border-box;
			float: left;
			margin-right: 18px
		}

		.sidebar-container {
			width: 100%;
			max-width: 332px;
			float: right;
			box-sizing: border-box
		}

		/* .m-card base -> dn-design.css (Fase 2/3, dark-aware). Varian inline expanded
		   yang lolos migrasi (spasi sebelum '{') dihapus agar token external menang. */

		.crumbs {
			font-size: 12px;
			margin-bottom: 8px;
			padding-bottom: 8px;
			border-bottom: 1px solid #dfdfdf
		}

		.stars{background:url("../images/star.svg") repeat-x;background-size:20%;height:15px;width:75px;clear:both;direction:ltr;position:relative;display:inline-block;margin-right:5px}.stars span.score{display:block;background:url("../images/stars.svg") repeat-x;height:15px}

		.w-0 {
			width: 0%
		}

		.w-5 {
			width: 5%
		}

		.w-10 {
			width: 10%
		}

		.w-15 {
			width: 15%
		}

		.w-20 {
			width: 20%
		}

		.w-25 {
			width: 25%
		}

		.w-30 {
			width: 30%
		}

		.w-35 {
			width: 35%
		}

		.w-40 {
			width: 40%
		}

		.w-45 {
			width: 45%
		}

		.w-50 {
			width: 50%
		}

		.w-55 {
			width: 55%
		}

		.w-60 {
			width: 60%
		}

		.w-65 {
			width: 65%
		}

		.w-70 {
			width: 70%
		}

		.w-75 {
			width: 75%
		}

		.w-80 {
			width: 80%
		}

		.w-85 {
			width: 85%
		}

		.w-90 {
			width: 90%
		}

		.w-95 {
			width: 95%
		}

		.w-100 {
			width: 100%
		}

		article.post {
			position: relative
		}

		.main-tmb {
			margin: 16px auto;
			display: block;
			width: 170px;
			height: auto;
			box-shadow: 0 5px 15px -5px #000;
			border-radius: 5px
		}

		.post-content {
			color: #333;
			font-size: 16px;
			line-height: 26px;
			clear: both;
			position: relative
		}

		.post-content .caption {
			line-height: 1.5
		}

		ul.info {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-flow: row wrap;
			border-bottom: 1px solid #dfdfdf;
			padding: 0 0 15px 0
		}

		ul.info li {
			width: 33%;
			list-style-type: none;
			box-sizing: border-box
		}

		amp-selector[role=tablist].tabs-with-flex {
			display: flex;
			flex-wrap: wrap
		}

		amp-selector[role=tablist].tabs-with-flex [role=tab] {
			flex-grow: 1;
			text-align: center;
			padding: 4px 4px 8px 4px;
			color: #666;
			border-bottom: 1px solid #eaeaea;
			height: 36px;
			font-size: 16px;
			width: 33%;
			box-sizing: border-box
		}

		amp-selector[role=tablist].tabs-with-flex [role=tab][selected] {
			outline: none;
			color: var(--dn-brand);
			border-bottom: 2px solid var(--dn-brand);
			border-radius: 8px 8px 0 0
		}

		amp-selector[role=tablist].tabs-with-flex [role=tabpanel] {
			display: none;
			width: 100%;
			order: 1;
			padding-top: 3px
		}

		amp-selector[role=tablist].tabs-with-flex [role=tab][selected]+[role=tabpanel] {
			display: block
		}

		.sharer {
			width: 100%;
			border-top: 1px solid #eaeaea;
			height: 25px;
			padding-top: 10px;
			text-align: right;
			margin-top: 10px
		}

		span.desc {
			display: block;
			padding-left: 90px
		}

		amp-sidebar .close-button {
			background: url("../images/c.svg") no-repeat center/18px;
			border: 0;
			height: 58px;
			position: absolute;
			right: 13px;
			top: 0;
			width: 68px;
			cursor: pointer
		}

		.ava {
			display: block;
			width: 80px;
			height: 80px;
			border-radius: 80px;
			overflow: hidden
		}

		.cp {
			padding: 8px 0 12px;
			border-bottom: 1px solid #dfdfdf
		}

		.cp b {
			float: left;
			font-size: 15px;
			font-weight: normal;
			line-height: 1.5
		}

		.cp a {
			float: right;
			text-transform: none
		}

		#search {
			position: fixed;
			top: 0;
			overflow: hidden;
			height: auto;
			width: 100%;
			box-sizing: border-box;
			/*background: var(--dn-brand);*/
			background: var(--dn-accent-2) !important;
			
			z-index: 26;
			padding: 5px 0;
			transition: all .8s ease;
			color: #fff
		}

		input.sf-alt {
			width: calc(100% - 60px);
			height: 36px;
			/*background: var(--dn-brand);*/
			background: var(--dn-accent-2) !important;
			outline: none;
			color: #fff;
			border: 1px solid #fff;
			padding: 0 10px;
			box-sizing: border-box;
			border-radius: 3px;
			margin-top: 3px;
			font-size: 1.1em
		}

		.back {
			/*background: var(--dn-brand);*/
			background: var(--dn-accent-2) !important;
			border: 0;
			color: #fff;
			display: block;
			float: left;
			margin: 6px 8px 0
		}

		.back svg {
			width: 24px;
			height: 24px
		}

		h1.entry-title {
			margin: 10px 0
		}

		.main-title,
		#reply-title {
			margin: 0 0 10px;
			border-bottom: 1px solid #dfdfdf;
			padding-bottom: 5px
		}

		/* .but / span.but -> dn-design.css (brand themeable via var). Leftover
		   expanded inline (var(--dn-brand) hardcode) dihapus agar Customizer brand jalan. */

		.nov-head {
			text-align: center;
			padding-bottom: 10px
		}

		span.add2rltext {
			display: inline-block;
			font-size: 9px;
			width: 60px;
			height: 24px;
			line-height: 11px;
			text-align: left
		}

		.info-wrap {
			width: 100%;
			padding: 10px 0;
			background: #f4f4f4;
			border-radius: 8px;
			display: flex;
			margin-top: 12px
		}

		.i {
			width: 33%;
			text-align: center;
			font-size: 18px;
			font-weight: 700;
			line-height: 18px
		}

		.i small {
			width: 100%;
			display: block;
			font-size: 12px;
			font-weight: 300
		}

		fieldset.rating {
			width: 100%;
			text-align: center;
			border:none;
		}

		.rating-info {
			display: inline-block;
			wordwrap: nowrap
		}

		/*.rating {
			--star-size: 3;
			padding: 0;
			border: none;
			unicode-bidi: bidi-override;
			direction: rtl;
			text-align: left;
			user-select: none;
			font-size: 3em;
			font-size: calc(var(--star-size) * 1em);
			cursor: pointer;
			-webkit-tap-highlight-color: transparent
		}

		.rating>label {
			display: inline-block;
			position: relative;
			width: 1.1em;
			width: calc(var(--star-size) / 3 * 1.1em)
		}

		.rating:not(:hover)>input:checked~label,
		.rating>:hover,
		.rating>:hover~label {
			color: transparent;
			cursor: inherit
		}

		.rating:not(:hover)>input:checked~label:before,
		.rating>:hover:before,
		.rating>:hover~label:before {
			content: "★";
			position: absolute;
			left: 0;
			color: gold
		}

		.rating>input {
			position: relative;
			transform: scale(var(--star-size));
			top: -.5em;
			top: calc(var(--star-size) / 6 * -1em);
			margin-left: -2.5em;
			margin-left: calc(var(--star-size) / 6 * -5em);
			z-index: 2;
			opacity: 0;
			font-size: initial
		}
		*/
		form.amp-form-submit-error [submit-error] {
			color: red
		}

		.rating {
			display: inline-block;
			/*margin-right: 15px*/
		}

		amp-selector h2 {
			margin: 10px 0;
			font-size: 16px
		}

		amp-selector h3 {
			margin: 10px;
			font-size: 14px;
			font-weight: 500
		}

		textarea.review-text {
			width: 100%
		}

		label.review-label {
			margin-top: 8px;
			display: block;
			font-size: 14px
		}

		table.info {
			border-spacing: 0px;
			margin-top: 10px
		}

		table.info td {
			vertical-align: top;
			padding: 5px 10px
		}

		td.tbl-lbl {
			width: 104px
		}

		tr.odd,
		li.odd,
		p.odd,
		a.odd {
			background: #fafafa
		}

		textarea#comment {
			width: 100%;
			box-sizing: border-box
		}

		#commentform label {
			width: 100px;
			display: inline-block
		}

		/* .box base + .box:hover -> dn-design.css (Fase 2/3, dark-aware, borderless).
		   Blok inline expanded yang lolos migrasi (spasi sebelum '{') dihapus. */

		.rank-box {
			width: calc(100% - 10px);
			max-width: 900px;
			text-align: left;
			height: auto
		}

		.rank-box amp-img.list-img {
			width: 48px;
			height: 64px;
			float: left;
			margin-right: 10px
		}

		.rank-box a.list-title {
			white-space: nowrap;
			text-overflow: ellipsis
		}

		amp-img.list-img {
			height: 152px;
			display: block;
			margin: 0 auto 8px;
			max-width: 120px
		}

		amp-img.list-img img {
			transition: transform .4s
		}

		amp-img.list-img img:hover {
			transform: scale(1.1)
		}

		a.list-title,
		strong.list-title {
			max-height: 40px;
			display: block;
			overflow: hidden;
			color: #333;
			font-size: 14px;
			font-weight: 700
		}

		strong.list-title {
			margin-bottom: 5px;
			height: 40px
		}

		.center {
			text-align: center
		}

		.en-on p.en {
			display: block
		}

		#lang-btn,
		#m-lang-btn {
			border: 1px solid #fff;
			border-radius: 3px;
			cursor: pointer
		}

		span#m-lang-btn {
			float: right;
			padding: 4px 4px 4px 22px;
			margin-top: 6px;
			background-position: 4px -38px
		}

		.dashboard-icon {
			background: url("../images/dashboard.svg") 0 0 no-repeat
		}

		.plus-thick-icon {
			background: url("../images/plus-thick.svg") 0 0 no-repeat
		}

		.icon {
			padding-left: 44px;
			background-size: 24px;
			height: 28px;
			display: block
		}

		.pma-icon {
			background: url("../images/pma.svg") -14px 0 no-repeat;
			background-size: 40px
		}

		.top-ava .ava {
			width: 36px;
			height: 36px
		}

		.nav .top-ava {
			position: relative;
			margin-left: 32px;
			cursor: pointer;
			display: inline
		}

		.nav .top-ava:hover {
			background: var(--dn-brand)
		}

		.top-ava .ava {
			position: absolute;
			top: -10px;
			right: -5px
		}

		.caption {
			color: #888
		}

		.no-top-border {
			padding-top: 0;
			margin-top: 0;
			border-top: none
		}

		.hidden {
			display: none
		}

		a.cancel,
		span.cancel {
			color: #a00;
			padding-left: 0;
			margin-left: 20px;
			cursor: pointer
		}

		.cancel:hover {
			text-decoration: underline
		}

		input.rev-submit {
			font-size: 16px
		}

		.cat-accordion h2,
		.cat-accordion h3 {
			font-size: 18px;
			padding: 10px 15px;
			font-weight: 700
		}

		amp-accordion section[expanded] h2,
		amp-accordion section[expanded] h3 {
			background: #f9f9f9 url("../images/chevron-up.svg") 2px 9px no-repeat;
			background-position: calc(100% - 10px)
		}

		amp-accordion section:not([expanded]) h2,
		amp-accordion section:not([expanded]) h3 {
			background: #f9f9f9 url("../images/chevron-down.svg") 2px 9px no-repeat;
			background-position: calc(100% - 10px)
		}

		ul.lang-list {
			padding: 6px 0 6px 10px
		}

		ul.lang-list li {
			list-style-type: none;
			padding: 10px 0 10px 24px
		}

		.lang-icon {
			padding-left: 28px;
			background: url("../images/flags.png");
			background-repeat: no-repeat;
			background-size: 14px;
			display: inline-block;
			height: 18px
		}

		.es {
			background-position: 0 0
		}

		.fr {
			background-position: 0 -63px
		}

		.id,#m-lang-btn.id {
			/*background-position: 0 -21px*/
			background-position:3px -19px;
		}

		.en {
			background-position: 0 -41px
		}

		.loading:after {
			content: ".";
			animation: dots 1s steps(5, end) infinite
		}

		.loading {
			background: url("../images/spinner.svg") 0px -8px no-repeat;
			padding-left: 36px;
			display: inline-block;
			font-size: 18px;
			margin: 15px 0
		}

		.nov-head .stars {
			width: 120px;
			height: 24px
		}

		.nov-head span.score {
			background-size: 24px;
			height: 24px
		}

		.nov-head span.rating-info strong {
			font-size: 24px
		}

		.ratings {
			margin-bottom: 8px
		}

		.rev-wrap {
			padding: 10px;
			border: 1px solid #eaeaea;
			background: #fcfcfc;
			border-radius: 4px;
			margin-bottom: 15px
		}

		.rev-tmb {
			display: block;
			float: left;
			margin-right: 15px;
			width: 32px;
			height: 32px;
			border-radius: 16px;
			overflow: hidden
		}

		.rev-wrap strong {
			line-height: 32px;
			color: #000
		}

		.rev-wrap p {
			margin-top: 0
		}

		form#rating {
			margin-bottom: 15px
		}

		@keyframes placeholder {
			0% {
				background-position: -468px 0
			}
			to {
				background-position: 468px 0
			}
		}

		.plc {
			content: " ";
			display: block;
			animation-duration: 1s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeholder;
			animation-timing-function: linear;
			background: #f6f7f8;
			background: -webkit-linear-gradient(left, #eee 8%, #e4e4e4 18%, #eee 33%);
			background: -o-linear-gradient(left, #eee 8%, #e4e4e4 18%, #eee 33%);
			background: linear-gradient(90deg, #eee 8%, #e4e4e4 18%, #eee 33%);
			background-size: 800px 104px;
			color: transparent
		}

		span.plc,
		p.plc {
			height: 16px
		}

		small.plc {
			height: 13px
		}

		p.descr {
			display: block;
			width: 100%;
			text-align: right;
			color: #666;
			margin-top: 8px;
			font-size: smaller
		}

		.completed ,.complete{
			color: #fab8b4;
			border: 1px solid #f00
		}

		a.genre,
		.caption em {
			color: #888;
			font-size: 13px
		}

		.caption em {
			padding-left: 20px;
			background: url("../images/history.svg") 0 0 no-repeat;
			background-size: 16px
		}

		a.genre:hover {
			text-decoration: underline
		}

		.label {
			width: 100%;
			max-width: 120px;
			display: block;
			position: relative;
			margin: -30px auto 36px auto
		}

		a.ch-link,
		div.ch-link {
			color: #333;
			display: inline-block;
			width: 32%;
			overflow: hidden;
			height: 50px;
			line-height: 30px;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 8px;
			box-sizing: border-box;
			border-bottom: 1px solid #eaeaea
		}

		.ch-list {
			border-top: 1px solid #eaeaea;
			margin-top: 10px
		}

		a.view-all {
			float: right;
			color: #999;
			font-size: 14px;
			margin-top: 12px
		}

		.desc h2 {
			text-align: left;
			font-size: 20px;
			margin: 10px 0 0;
			text-decoration: underline
		}

		.desc h3 {
			margin: 10px 0 0;
			font-weight: 700;
			font-size: 16px
		}

		.desc table {
			border-collapse: collapse;
			border: none
		}

		.desc table td {
			padding: 8px;
			text-align: left
		}

		.desc table tr {
			border-bottom: 1px solid #dadada
		}

		.desc table p {
			margin: 0
		}

		.nav span.lang-icon.en {
			height: auto;
			background-position: 5px -51px;
			background-size: 18px;
			cursor: pointer;
			padding-left: 28px
		}

		.nav span.lang-icon.en:hover {
			background: #fff url("../images/flags.png") 5px -51px no-repeat;
			background-size: 18px
		}

		#lang-list {
			position: fixed;
			top: 0;
			overflow: hidden;
			padding-top: 50px;
			background: #fff;
			right: 54px;
			z-index: 20;
			-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
			box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
			border-radius: 3px
		}

		.lang-list {
			display: block;
			width: 200px;
			padding: 16px 16px 0;
			z-index: 30
		}

		#lang-list a,
		#lang-list strong {
			color: #333;
			margin: 20px 0;
			width: 100%;
			display: block
		}

		#lang-list strong,
		#lang-list a:hover {
			color: var(--dn-brand)
		}

		svg.chev-up {
			display: none
		}

		.active svg.chev-up {
			display: inline-block
		}

		.active svg.chev-down {
			display: none
		}

		.sug-list {
			clear: both
		}

		.sug-list a {
			display: block;
			width: 100%;
			padding: 3px 5px;
			height: 48px;
			color: #999
		}

		.sug-list a strong {
			color: #333
		}

		.sug-tmb {
			float: left;
			padding-right: 5px
		}

		.sug-list a span {
			display: block;
			height: 26px;
			overflow: hidden;
			color: #000;
			font-size: 1.2em
		}

		#as-box {
			position: fixed;
			top: 0;
			overflow: hidden;
			padding: 72px 5px 5px;
			width: 100%
		}

		.wrap {
			width: 100%;
			max-width: 1300px;
			display: block;
			padding-left: 160px;
			margin: 0 auto;
			box-sizing: border-box
		}

		.m-hamburger {
			background: url("../../menu.svg")
		}

		amp-img.img-logo {
			display: inline-block;
			width: 28px;
			margin-right: 4px;
			margin-bottom: -6px
		}

		#panelchapterlist p a {
			width: 100%;
			display: block;
			margin: 4px 0;
			padding: 8px 16px;
			color: #333;
			box-sizing: border-box
		}

		#panelchapterlist p a small {
			float: right
		}

		#toolbar {
			display: inline-block
		}

		

		amp-sidebar ul svg {
			margin-right: 16px;
			width: 24px;
			height: 24px;
			margin-bottom: -3px
		}

		amp-sidebar ul svg.nl {
			width: 28px;
			height: 28px;
			margin-left: -3px
		}

		span.rank {
			background-color: #2c3e50;
			padding: 4px 9px 4px;
			border-radius: 8px;
			font-weight: 700;
			line-height: 1;
			color: #fff;
			position: relative
		}

		.readers:hover {
			cursor: help
		}

		.post-content amp-selector svg {
			width: 22px;
			height: 22px;
			margin-bottom: -4px
		}

		.ads {
			text-align: center;
			font-style: italic;
			color: #aaa;
			margin: 30px auto;
			width: 100%;
			box-sizing: border-box
		}

		.ads small {
			margin-bottom: 8px;
			display: inline-block;
			width: 100%
		}

		.inarticle-ads {
			max-width: 728px;
			display: block;
			width: 100%;
			box-sizing: border-box;
			height: 320px
		}

		.sticky-ads {
			max-width: 728px;
			display: block;
			width: 100%;
			box-sizing: border-box;
			height: 100px;
			margin: 0 auto
		}

		:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .inarticle-ads {
			margin-left: 0px
		}

		body.nightmode-on {
			background: black
		}

		body.nightmode-on .m-card,
		body.nightmode-on footer {
			background: #1f2129
		}

		body.nightmode-on .post-content,
		body.nightmode-on .copyright,
		body.nightmode-on .crumbs {
			color: #999
		}

		body.nightmode-on main a,
		body.nightmode-on footer a {
			color: #aaa
		}

		body.nightmode-on h1,
		body.nightmode-on h2,
		body.nightmode-on h3,
		body.nightmode-on header a,
		body.nightmode-on a.logo,
		body.nightmode-on .s-input {
			color: #ccc
		}

		body.nightmode-on header {
			background: #1f2129
		}

		body.nightmode-on header,
		body.nightmode-on .main-title,
		body.nightmode-on .crumbs {
			border-bottom: 1px solid #5f6169
		}

		body.nightmode-on .sharer {
			border-top: 1px solid #5f6169
		}

		.req {
			display: block;
			width: calc(100% - 34px);
			box-sizing: border-box;
			color: #666;
			text-align: center;
			border: 1px solid #eaeaea;
			margin: 16px;
			padding: 12px;
			border-radius: 4px
		}

		span.views {
			padding: 0 8px 0 18px;
			background: url("../images/eye.svg") 0 0 no-repeat;
			color: #888;
			font-size: 13px;
			background-size: 15px;
			white-space: nowrap
		}

		.comment-metadata a {
			font-size: 12px;
			color: #999
		}

		.comment-metadata a:hover {
			text-decoration: underline
		}

		#comments ol li {
			list-style-type: none
		}

		amp-img.avatar {
			border-radius: 16px;
			display: block;
			float: left;
			margin-right: 10px
		}

		/* Cleanup 2026-07-08: a.comment-reply-link DIHAPUS (reply.svg tak ada +
		   better_commets pindah ke .nid-replybtn modal). */

		article.comment-body {
			padding: 4px 4px 4px 8px;
			margin-bottom: 4px
		}

		.comment-content p {
			margin: 8px 0 4px
		}

		.comment-author.vcard {
			line-height: 32px
		}

		ol.comment-list {
			padding-left: 0
		}

		.desc details {
			padding: 5px 12px
		}

		#comments details,
		.warning {
			padding: 5px 12px;
			background: #f5eeb2;
			border: 1px solid #b7ad53
		}

		summary {
			cursor: pointer;
			text-decoration-line: underline;
			text-decoration-style: dotted
		}

		.warning {
			border-radius: 5px
		}

		.edit-rev {
			cursor: pointer
		}

		.inarticle-ads.sidebar-ad {
			height: 600px
		}

		.inarticle-ads.matched {
			height: 400px;
			margin-top: 10px
		}

		.orange {
			color: #fa8b15
		}

		.prev-btn,
		.pageinfo,
		.next-btn {
			display: inline-block;
			margin: 8px 3px
		}

		.prev-btn {
			text-align: right;
			width: 75px
		}

		.next-btn {
			text-align: left;
			width: 75px
		}

		a.prev,
		a.next {
			border: 1px solid var(--dn-brand);
			padding: 2px 6px;
			margin: 1px
		}

		.star-container {
			width: 100%;
			max-width: 512px;
			box-sizing: border-box;
			display: block;
			margin: 4px auto 0
		}

		.star-avg {
			width: 120px;
			text-align: center;
			float: left;
			padding-top: 32px
		}

		.star-avg strong {
			font-size: 56px
		}

		.star-avg .ratings {
			margin-bottom: -8px
		}

		.star-bar {
			width: calc(100% - 120px);
			display: block;
			float: right
		}
		.star-bar .rate-row{display:flex;align-items:center;gap:6px;margin:3px 0;line-height:1}
		.star-bar .rate-n{width:10px;text-align:right;flex:none}
		.star-bar .rate-track{flex:1;height:10px;background:#e0e0e0;border-radius:5px;overflow:hidden}
		.star-bar .rate-fill{display:block;height:100%;background:#f5a623}

		progress {
			width: calc(100% - 20px)
		}

		/* a.small-btn -> dn-design.css (brand themeable). Leftover dihapus. */

		#panelchapterlist a:visited {
			color: #bbb
		}

		@media only screen and (max-width:1112px) {
			.inarticle-ads.sidebar-ad {
				height: 300px
			}
			#lang-list {
				right: 0;
				padding-top: 26px
			}
			article,
			.sidebar-container {
				float: none;
				margin: 0 auto
			}
			.sidebar-container {
				max-width: 760px
			}
			header {
				height: 50px;
				box-sizing: border-box;
				position: fixed;
				top: 0;
				z-index: 25;
				padding: 5px 0
			}
			.head-container {
				display: none
			}
			.wrap {
				padding-left: 0
			}
			.container-alt {
				display: block
			}
			#as-box {
				padding: 50px 0 5px
			}
			button.hamburger {
				display: inline-block
			}
			main.container {
				margin-top: 60px
			}
		}

		@media only screen and (max-width:760px) {
			.inarticle-ads.matched {
				height: 600px
			}
			.m-card {
				margin-top: 10px
			}
			.post-content {
				padding: 0 10px
			}
			.ads,
			.inarticle-ads {
				width: 100%
			}
			.ads {
				margin-left: 0
			}
		}

		@media only screen and (max-width:690px) {
			.sticky-ads {
				height: 80px
			}
		}

		@media only screen and (max-width:640px) {
			a.ch-link,
			div.ch-link {
				width: 49%
			}
			#panelchapterlist p a small {
				float: none;
				width: 100%;
				color: #999;
				font-size: 12px;
				display: block
			}
		}

		@media only screen and (max-width:612px) {
			.desc table {
				font-size: 14px
			}
		}

		@media only screen and (max-width:548px) {
			.taboola-ads {
				height: 600px
			}
			ul.info li {
				width: 49%
			}
			span.desc {
				padding-left: 0;
				font-size: 14px
			}
			ul.info {
				font-size: 13px
			}
		}

		@media only screen and (max-width:464px) {
			.desc table {
				font-size: 12px
			}
			a.ch-link,
			div.ch-link {
				width: 100%
			}
			amp-selector[role=tablist].tabs-with-flex [role=tab] {
				font-size: 14px
			}
			.m-card {
				padding: 10px
			}
			.ads {
				margin-left: 0
			}
		}

		@media only screen and (max-width:400px) {
			.desc table {
				font-size: 10px
			}
		}

		@media only screen and (max-width:350px) {
			
		}

		.no-top-margin {
			margin-top: -8px
		}

		#mgid-inarticle {
			height: 260px
		}

		#mgid-under {
			height: 320px
		}

		.beaver-under {
			display: block;
			margin: 0 auto;
			width: 500px;
			height: 300px;
			overflow: hidden
		}

		@media only screen and (max-width:760px) {
			#mgid-inarticle {
				height: 280px
			}
		}

		@media only screen and (max-width:646px) {
			#mgid-inarticle {
				height: 300px
			}
		}

		@media only screen and (max-width:622px) {
			#mgid-inarticle {
				height: 330px
			}
		}

		@media only screen and (max-width:532px) {
			#mgid-inarticle {
				height: 400px
			}
			#mgid-under {
				height: 1170px
			}
			.beaver-under {
				width: 333px
			}
		}

		@media only screen and (max-width:412px) {
			#mgid-inarticle {
				height: 410px
			}
			#mgid-under {
				height: 1010px
			}
		}

		@media only screen and (max-width:385px) {
			#mgid-inarticle {
				height: 450px
			}
			#mgid-under {
				height: 970px
			}
			.beaver-under {
				width: 166px
			}
		}

		@media only screen and (max-width:344px) {
			#mgid-inarticle {
				height: 470px
			}
			#mgid-under {
				height: 890px
			}
		}

		@media only screen and (max-width:312px) {
			#mgid-inarticle {
				height: 500px
			}
			#mgid-under {
				height: 850px
			}
		}
		
		svg.mbuh {
		  width: 80px;
		  height: 80px;
		}

.material-icons {vertical-align:-14%;font-size: 18px;}

/* =====================================================================
 * NOVEL PAGE REDESIGN — "Book Jacket" (2026-07-01)
 * Token-only (var(--dn-*)), dark-aware, responsif, reduced-motion.
 * Hanya menata blok baru/diubah di loader-novel.php; tab bar tetap
 * dikelola dn-design.css. Tanpa font/ukuran literal di template.
 * ===================================================================== */

/* border-box utk semua elemen nv-* (dn-design hanya set utk dn-*). Cegah
   width:100% + padding meluap (mis. tombol CTA full-width di mobile). */
:where([class^="nv-"], [class*=" nv-"]) { box-sizing: border-box; }

/* ---- Hero shell + backplate brand-tint ---- */
.nv-hero { position: relative; overflow: hidden; }
.nv-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 220px;
  background: linear-gradient(180deg, var(--dn-brand-tint), transparent 90%);
  pointer-events: none; z-index: 0;
}
.nv-hero > * { position: relative; z-index: 1; }

/* breadcrumb (override .crumbs lama: buang border, pakai token) */
.nv-hero .crumbs {
  border: 0; padding: 0; margin: 0 0 var(--dn-space-lg);
  font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); color: var(--dn-text-faint);
  display: flex; align-items: center; min-width: 0; white-space: nowrap;
}
/* item terakhir (judul aktif) dipotong ellipsis — judul panjang tidak boleh
   melipat breadcrumb jadi 2 baris. */
.nv-hero .crumbs__cur { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nv-hero .crumbs__sep { flex: none; }
/* Tombol Report novel — minimalis, nempel kanan baris breadcrumb */
.nv-hero .nv-report-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  margin-left: auto; padding: 3px 10px;
  font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text-faint); background: transparent;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  text-decoration: none; transition: var(--dn-transition);
}
.nv-hero .nv-report-btn:hover { color: var(--dn-danger); border-color: var(--dn-danger); background: var(--dn-danger-tint); }
.nv-hero .nv-report-btn svg { flex: none; }
.nv-hero .crumbs a { color: var(--dn-text-muted); }
.nv-hero .crumbs a:hover { color: var(--dn-brand-ink); }

/* ---- Share novel: tombol pill + popover kurasi (native share di HP) ---- */
.nv-hero .crumbs .nv-share { position: relative; flex: none; margin-left: auto; }
.nv-hero .crumbs .nv-share + .nv-report-btn { margin-left: var(--dn-space-xs); } /* batalkan margin-left:auto report → keduanya mengelompok kanan */
.nv-share__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); font-weight: var(--dn-fw-semibold);
  color: var(--dn-text-faint); background: transparent; cursor: pointer;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  transition: var(--dn-transition);
}
.nv-share__btn svg { flex: none; width: 15px; height: 15px; }
.nv-share__btn:hover { color: var(--dn-brand-ink); border-color: var(--dn-brand); background: var(--dn-brand-tint); }
.nv-share__btn:focus-visible { outline: none; box-shadow: var(--dn-ring); }

.nv-share__pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; gap: 6px; padding: var(--dn-space-sm);
  background: var(--dn-surface); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-hover);
}
.nv-share:not(.is-open) .nv-share__pop { display: none; }
.nv-share__pop { transform-origin: top right; animation: nvShareIn .14s ease; }
@keyframes nvShareIn { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .nv-share__pop { animation: none; } }

.nv-share__it {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  color: var(--dn-text-muted); background: var(--dn-surface-2);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  transition: color var(--dn-transition), background var(--dn-transition), border-color var(--dn-transition), transform var(--dn-transition);
}
.nv-share__it svg { width: 18px; height: 18px; }
.nv-share__it:hover { transform: translateY(-1px); color: #fff; }
.nv-share__it:focus-visible { outline: none; box-shadow: var(--dn-ring); }
/* Warna resmi tiap jaringan saat hover (netral saat diam → tak jadi tembok warna). */
.nv-share__it[data-net="x"]:hover      { background: #000000; border-color: #000000; }
.nv-share__it[data-net="fb"]:hover     { background: #1877F2; border-color: #1877F2; }
.nv-share__it[data-net="wa"]:hover     { background: #25D366; border-color: #25D366; }
.nv-share__it[data-net="tg"]:hover     { background: #229ED9; border-color: #229ED9; }
.nv-share__it[data-net="reddit"]:hover { background: #FF4500; border-color: #FF4500; }
.nv-share__it[data-net="link"]:hover   { background: var(--dn-brand); border-color: var(--dn-brand); }
/* Copy link → tanda centang saat sukses (JS .is-done, 1.6s). */
.nv-share__done { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: inherit; background: var(--dn-brand); color: #fff; }
.nv-share__copy.is-done .nv-share__done { display: inline-flex; }
[data-theme="dark"] .nv-share__pop { background: var(--dn-surface-2); }
@media (max-width: 480px) { .nv-share__btn span { display: none; } .nv-share__btn { padding: 4px 8px; } }
.nv-hero .crumbs__sep { margin: 0 .45em; color: var(--dn-text-faint); }

/* ---- Layout: cover | body ---- */
/* minmax(0,1fr): izinkan kolom menyusut di bawah min-content → cegah overflow
   horizontal (baris stats nowrap kalau tidak memaksa lebar). */
.nv-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--dn-space-xl); align-items: start; }
.nv-hero__body { min-width: 0; }

/* ---- Cover as a book object (signature) ---- */
.nv-cover { position: relative; width: 200px; margin: 0; flex: none; }
.nv-cover .main-tmb {
  width: 200px; height: auto; margin: 0; display: block;
  border-radius: var(--dn-radius-card);
  box-shadow: var(--dn-shadow-card), var(--dn-shadow-hover);
}
/* spine: bayangan jilid + highlight tepi kiri */
.nv-cover::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9px;
  border-radius: var(--dn-radius-card) 0 0 var(--dn-radius-card);
  background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(255,255,255,.16) 55%, rgba(0,0,0,.06));
  pointer-events: none;
}

/* ---- Eyebrow (Type · Country) ---- */
.nv-hero__eyebrow { margin: 0 0 var(--dn-space-sm); }
.nv-hero__eyebrow a { color: inherit; }
.nv-hero__eyebrow a:hover { color: var(--dn-brand-strong); }
.nv-hero__eyebrow .nv-dot { margin: 0 .5em; opacity: .55; }

/* ---- Title + author ---- */
.nv-hero__title {
  font-family: var(--dn-font-display); font-size: var(--dn-fs-display);
  line-height: var(--dn-leading-tight); letter-spacing: var(--dn-tracking-display);
  font-weight: var(--dn-fw-semibold); margin: 0 0 var(--dn-space-xs); color: var(--dn-text);
  text-wrap: balance;
}
/* Judul adaptif (kelas dari loader-novel.php berdasar panjang judul):
   >42 huruf turun ke h1, >75 huruf turun ke h2 — hero tetap proporsional. */
.nv-hero__title--long  { font-size: var(--dn-fs-h1); }
.nv-hero__title--xlong { font-size: var(--dn-fs-h2); }
.nv-hero__author {
  font-family: var(--dn-font-head); font-size: var(--dn-fs-base);
  color: var(--dn-text-muted); margin: 0 0 var(--dn-space-lg);
}
.nv-hero__author a { color: var(--dn-brand-ink); font-weight: var(--dn-fw-medium); }
.nv-hero__author a:hover { color: var(--dn-brand-strong); }

/* ---- Rating cluster ---- */
.nv-hero__rating {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--dn-space-sm) var(--dn-space-md); margin: 0 0 var(--dn-space-lg);
}
.nv-hero__rating .stars { margin: 0; }
.nv-hero__rating .mr-star-rating { line-height: 1; }
.nv-hero__rating .mr-star-rating i { font-size: 17px; }
.star-avg .ratings-stars .mr-star-rating i { font-size: 15px; }
.nv-hero__score { font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); font-weight: var(--dn-fw-bold); color: var(--dn-text); }
.nv-hero__votes { font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); color: var(--dn-text-faint); }
.nv-hero__status { margin-left: var(--dn-space-xs); }

/* ---- Stats (Views / Chapters / Readers) ---- */
.nv-stats {
  list-style: none; margin: 0 0 var(--dn-space-lg); padding: 0;
  display: flex; gap: var(--dn-space-sm);
}
.nv-stats li {
  flex: 1; min-width: 0; text-align: center;
  background: var(--dn-surface-2); border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card); padding: var(--dn-space-md) var(--dn-space-sm);
}
/* Dark: statistik ikut tingkat "Permukaan dalam" Customizer (--dn-surface),
   bukan kotak .box — permintaan owner 2026-07-04. Light tetap surface-2. */
body.nightmode-on .nv-stats li,
[data-theme="dark"] .nv-stats li { background: var(--dn-surface); }
.nv-stats__n { display: block; font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); font-weight: var(--dn-fw-bold); color: var(--dn-text); line-height: 1.15; }
.nv-stats__l { display: block; font-family: var(--dn-font-head); font-size: var(--dn-fs-xs); letter-spacing: var(--dn-tracking-wide); text-transform: uppercase; color: var(--dn-text-faint); margin-top: var(--dn-space-xs); }

/* ---- Genre chips in hero ---- */
.nv-hero__genres { display: flex; flex-wrap: wrap; gap: var(--dn-space-xs); margin: 0 0 var(--dn-space-lg); }

/* ---- CTA ---- */
.nv-hero__cta { display: flex; flex-wrap: wrap; gap: var(--dn-space-sm); align-items: center; }
.nv-hero__cta .but { margin: 0; }
.nv-hero__cta .nv-cta-primary {
  display: inline-flex; align-items: center; gap: var(--dn-space-xs);
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-base);
  padding: var(--dn-space-md) var(--dn-space-xl); border-radius: var(--dn-btn-radius);
  background: var(--dn-btn-bg); color: var(--dn-btn-text); border: 0;
  box-shadow: var(--dn-shadow-sm); transition: var(--dn-transition);
}
.nv-hero__cta .nv-cta-primary:hover { background: var(--dn-btn-bg-hover); box-shadow: var(--dn-shadow-hover); transform: translateY(-1px); }
/* Ikon dalam tombol CTA — ukuran relatif teks, warna ikut currentColor. */
.nv-hero__cta .nid-but-ico { width: 1.3em; height: 1.3em; flex: none; fill: currentColor; }
/* Tombol Add/In Library + Save to List (inactive): outline (bg transparan + border).
   !important melawan legacy `a.but{background:...!important}` di style.css. */
.nv-hero__cta a.nv-cta-lib {
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-sm);
  padding: var(--dn-space-md) var(--dn-space-lg); border-radius: var(--dn-btn-radius);
  background: transparent !important; color: var(--dn-brand-ink) !important; border: 1.5px solid var(--dn-brand);
  box-shadow: none;
  display: inline-flex; align-items: center; gap: var(--dn-space-xs); transition: var(--dn-transition);
}
.nv-hero__cta a.nv-cta-lib:hover { border-color: var(--dn-brand); color: var(--dn-brand-strong) !important; background: var(--dn-brand-tint) !important; }
.nv-hero__cta .nv-cta-lib .add2rltext { font-size: inherit; width: auto; height: auto; line-height: inherit; text-align: center; }
/* State AKTIF (sudah di Library / sudah di List): bg brand-tint + teks brand-strong +
   ikon terisi. Bahasa visual sama untuk kedua toggle; ikon beda → tak tertukar. */
.nv-hero__cta a.nv-cta-lib.list-but-in,
.nv-hero__cta a.nv-cta-savelist.is-saved { background: var(--dn-brand-tint) !important; color: var(--dn-brand-strong) !important; border-color: var(--dn-brand); }
/* Save to List — tukar ikon plus (belum) ↔ check (sudah) lewat kelas .is-saved. */
.nv-hero__cta .nv-cta-savelist .ico-saved { display: none; }
.nv-hero__cta .nv-cta-savelist.is-saved .ico-add { display: none; }
.nv-hero__cta .nv-cta-savelist.is-saved .ico-saved { display: inline-flex; }

/* ---- Info tab: Summary — font −1 tingkat (deskripsi 16→14, heading 20→17) ---- */
#panelnovelinfo .desc { font-size: 14px; }
#panelnovelinfo .desc h2 { font-family: var(--dn-font-head); font-size: 17px; }
#panelnovelinfo .descr { color: var(--dn-text-faint); }

/* ---- Info tab: Details (table.info → hairline meta list) ---- */
#panelnovelinfo table.info { width: 100%; border-spacing: 0; margin-top: var(--dn-space-md); }
#panelnovelinfo table.info tr { background: none; }
#panelnovelinfo table.info td {
  padding: var(--dn-space-md) var(--dn-space-sm); border-bottom: 1px solid var(--dn-border);
  vertical-align: top; font-size: var(--dn-fs-sm); color: var(--dn-text);   /* isi Details −1 tingkat (base→sm) */
}
#panelnovelinfo table.info td:first-child {
  width: 26%; white-space: nowrap; color: var(--dn-text-muted);
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold);
}
#panelnovelinfo table.info td:first-child a { color: var(--dn-text-muted); }
#panelnovelinfo table.info td:first-child a:hover { color: var(--dn-brand-ink); }
#panelnovelinfo table.info td:nth-child(2) { display: none; }   /* kolom ":" */
/* baris CTA glossary (colspan) — kembalikan ke normal */
#panelnovelinfo table.info td[colspan] { width: auto; white-space: normal; text-align: center; font-family: var(--dn-font-body); font-weight: var(--dn-fw-normal); color: var(--dn-text); }
/* Inline edit status (admin) — modal popup */
.nid-status-none { color: var(--dn-text-faint); }
.nid-status-edit { font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); }
.nid-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--dn-space-lg); }
.nid-modal[hidden] { display: none; }
.nid-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.nid-modal__dialog {
	position: relative; z-index: 1; width: 100%; max-width: 380px;
	background: var(--dn-surface); border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius-card); box-shadow: var(--dn-shadow-pop);
	padding: var(--dn-space-xl); animation: nidModalIn .18s ease both;
}
@keyframes nidModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.nid-modal__title { margin: 0 0 var(--dn-space-xs); font-family: var(--dn-font-head); font-size: var(--dn-fs-h3); }
.nid-modal__sub { margin: 0 0 var(--dn-space-lg); color: var(--dn-text-muted); font-size: var(--dn-fs-sm); }
.nid-modal .dn-select { width: 100%; }
.nid-modal__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--dn-space-sm); margin-top: var(--dn-space-xl); }
.nid-modal__cancel {
	border: 0; background: none; padding: 8px; cursor: pointer;
	font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-sm);
	color: var(--dn-text-muted);
}
.nid-modal__cancel:hover { color: var(--dn-text); }
.nid-modal__save {
	margin: 0; padding: 8px 18px; cursor: pointer; border: 0;
	font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-sm);
	background: var(--dn-btn-bg); color: var(--dn-btn-text);
	border-radius: var(--dn-btn-radius); transition: var(--dn-transition);
}
.nid-modal__save:hover { background: var(--dn-btn-bg-hover); }
.nid-modal__save:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .nid-modal__dialog { animation: none; } }

/* rank pill → token brand */
#panelnovelinfo .rank {
  background: var(--dn-brand-tint); color: var(--dn-brand-ink);
  padding: 2px 10px; border-radius: var(--dn-radius-pill);
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-bold); font-size: var(--dn-fs-sm);
}

/* ---- Chapters tab: recent list ---- */
#panelchapterlist h2 { text-align: left; font-family: var(--dn-font-head); font-size: 17px; margin: var(--dn-space-md) 0; }
#panelchapterlist p { margin: 0 0 var(--dn-space-lg); }
#panelchapterlist p a {
  display: flex; align-items: center; gap: var(--dn-space-sm);
  padding: var(--dn-space-md) var(--dn-space-lg); margin: 0 0 var(--dn-space-sm);
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control);
  background: var(--dn-surface); color: var(--dn-text); font-size: var(--dn-fs-sm);   /* −1 tingkat (base→sm) */
  transition: var(--dn-transition);
}
#panelchapterlist p a:hover { border-color: var(--dn-brand); background: var(--dn-brand-tint); color: var(--dn-brand-strong); }
#panelchapterlist p a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#panelchapterlist p a small { margin-left: auto; width: auto; display: inline-block; float: none; color: var(--dn-text-faint); white-space: nowrap; font-size: var(--dn-fs-xs); }   /* width/display override rule mobile lawas (width:100%) → tanggal rata KANAN via margin-left:auto */

/* ---- Chapters tab: all-chapters accordion ---- */
.ch-acc .ch-acc-sec { border: 1px solid var(--dn-border); border-radius: var(--dn-radius-control); margin-bottom: var(--dn-space-sm); overflow: hidden; }
.ch-acc .ch-acc-h {
  padding: var(--dn-space-md) var(--dn-space-lg); cursor: pointer;
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-base);
  background: var(--dn-surface-2); color: var(--dn-text); list-style: none;
  text-decoration: none;
}
.ch-acc .ch-acc-sec[open] .ch-acc-h { color: var(--dn-brand-ink); }
.ch-acc a.ch-link { color: var(--dn-text); font-size: var(--dn-fs-sm); transition: var(--dn-transition); }   /* isi accordion −1 tingkat, seragam dgn recent chapters */
.ch-acc a.ch-link:hover { background: var(--dn-brand-tint); color: var(--dn-brand-strong); }
#panelchapterlist a.view-all { color: var(--dn-text-faint); font-family: var(--dn-font-head); font-size: var(--dn-fs-sm); }
#panelchapterlist a.view-all:hover { color: var(--dn-brand-ink); }

/* ---- Reviews tab: cards token-aware ---- */
#panelmtlstats .rev-wrap, .review-list .rev-wrap {
  border: 1px solid var(--dn-border); background: var(--dn-surface-2);
  border-radius: var(--dn-radius-card); padding: var(--dn-space-lg);
}
#panelmtlstats .rev-wrap strong, .review-list .rev-wrap strong { color: var(--dn-text); }
#panelmtlstats h2 { font-family: var(--dn-font-head); }

/* ---- Reviews pagination (redesign) ---- */
.review-list .rev-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--dn-space-md); margin-top: var(--dn-space-xl);
}
.review-list .prev-btn, .review-list .next-btn { width: auto; margin: 0; text-align: center; }
.review-list .pageinfo {
  margin: 0; font-family: var(--dn-font-head); font-size: var(--dn-fs-sm);
  font-weight: var(--dn-fw-semibold); color: var(--dn-text-muted); letter-spacing: var(--dn-tracking-tight);
}
.review-list a.prev, .review-list a.next {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--dn-border); border-radius: var(--dn-radius-pill);
  padding: 3px 10px; margin: 0;
  font-family: var(--dn-font-head); font-weight: var(--dn-fw-semibold); font-size: var(--dn-fs-xs);
  color: var(--dn-brand-ink); background: var(--dn-surface); cursor: pointer;
  transition: var(--dn-transition);
}
.review-list a.prev:hover, .review-list a.next:hover {
  border-color: var(--dn-brand); background: var(--dn-brand-tint); color: var(--dn-brand-strong);
}
.review-list a.prev:focus-visible, .review-list a.next:focus-visible { outline: none; box-shadow: var(--dn-ring); }
/* .hidden harus tetap menang atas display:inline-flex di atas (spesifisitas lebih tinggi) */
.review-list a.prev.hidden, .review-list a.next.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .review-list a.prev, .review-list a.next { transition: none; } }

/* Loading saat Next/Prev (JS set aria-busy) → dim isi + spinner brand */
.review-list { position: relative; }
.review-list[aria-busy="true"] { min-height: 140px; }
.review-list[aria-busy="true"] > * { opacity: .3; pointer-events: none; transition: opacity var(--dn-transition); }
.review-list[aria-busy="true"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: var(--dn-radius-pill);
  border: 3px solid var(--dn-border); border-top-color: var(--dn-brand);
  animation: nidRevSpin .7s linear infinite;
}
@keyframes nidRevSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .review-list[aria-busy="true"]::after { animation: none; } }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  /* 1 kolom; JANGAN justify-items:center (bikin body menyusut ke max-content → overflow).
     Body tetap full-width, isi dipusatkan via text-align + justify-content per baris. */
  .nv-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--dn-space-lg); text-align: center; }
  .nv-cover { width: 168px; margin-inline: auto; justify-self: center; }
  .nv-cover .main-tmb { width: 168px; }
  .nv-hero__body { width: 100%; min-width: 0; }
  .nv-hero__rating, .nv-hero__genres, .nv-hero__cta { justify-content: center; }
  .nv-hero__cta { flex-direction: column; align-items: stretch; }
  .nv-hero__cta .but { width: 100%; justify-content: center; text-align: center; }
  #panelnovelinfo table.info td:first-child { width: 42%; white-space: normal; }
}
@media (max-width: 420px) {
  /* tetap 3 kolom (flex-basis 0 → bagi rata, muat di 320px+); padding lebih rapat */
  .nv-stats { gap: var(--dn-space-xs); }
  .nv-stats li { padding: var(--dn-space-sm) var(--dn-space-xs); }
  .nv-stats__l { letter-spacing: var(--dn-tracking-normal); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .nv-hero__cta .nv-cta-primary:hover, #panelchapterlist p a:hover { transform: none; }
}