:root {
	--reader-bg: #ede9e3;
	--reader-panel: #fffdfb;
	--reader-panel-soft: #f7f1ed;
	--reader-text: #352a2f;
	--reader-muted: #75666d;
	--reader-magenta: #8b145d;
	--reader-magenta-dark: #681044;
	--reader-gold: #c9962d;
	--reader-gold-light: #f0c85e;
	--reader-line: rgba(83, 52, 61, 0.16);
	--reader-shadow: 0 18px 46px rgba(45, 31, 37, 0.16);
}

html {
	min-height: 100%;
	overflow-x: clip;
}

body.nsb-reader-body {
	height: auto;
	min-height: 100%;
	margin: 0;
	overflow-x: clip;
	overflow-y: visible;
}

body.nsb-reader-body {
	background: var(--reader-bg);
	color: var(--reader-text);
	font-family: "Noto Naskh Arabic", serif;
	font-size: 16px;
}

body.nsb-reader-body *,
body.nsb-reader-body *::before,
body.nsb-reader-body *::after { box-sizing: border-box; }

body.nsb-reader-body button,
body.nsb-reader-body input,
body.nsb-reader-body select { font: inherit; }

body.nsb-reader-body.nsb-reader-overlay-open { overflow: hidden !important; }

.nsb-reader-app {
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	max-height: 100vh;
	max-height: 100dvh;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	overflow: hidden;
}

.nsb-reader-app--pdf {
	grid-template-rows: auto minmax(0, 1fr);
}

.nsb-reader-header {
	position: relative;
	z-index: 100;
	display: grid;
	grid-template-columns: auto minmax(220px, 1fr) auto;
	align-items: center;
	gap: 16px;
	min-height: 78px;
	padding: 10px clamp(14px, 2vw, 30px);
	border-bottom: 1px solid var(--reader-line);
	background: rgba(255, 253, 251, 0.94);
	box-shadow: 0 8px 24px rgba(47, 29, 39, 0.08);
	backdrop-filter: blur(18px);
}

.nsb-reader-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid rgba(139, 20, 93, 0.2);
	border-radius: 999px;
	background: #fff;
	color: var(--reader-magenta);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.nsb-reader-back:hover { background: #fbf0f6; transform: translateY(-1px); }

.nsb-reader-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-width: 0;
	padding-inline: 4px;
}

.nsb-reader-title strong {
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 0.2em 0.35em;
	overflow: visible;
	color: var(--reader-magenta-dark);
	font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
	font-size: clamp(19px, 2vw, 27px);
	line-height: 1.9;
	text-overflow: clip;
	white-space: normal;
	overflow-wrap: anywhere;
}

.nsb-reader-page-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 5px 12px;
	border: 1px solid rgba(201, 150, 45, 0.28);
	border-radius: 999px;
	background: #fff9ec;
	color: #76561d;
	font-size: 13px;
}

.nsb-reader-page-status b {
	direction: ltr;
	font-family: Arial, sans-serif;
	font-variant-numeric: tabular-nums;
}

.nsb-reader-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.nsb-reader-header-button,
.nsb-reader-quick-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 8px 13px;
	border-radius: 10px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.nsb-reader-header-button {
	border: 1px solid var(--reader-line);
	background: #fff;
	color: var(--reader-magenta);
}

.nsb-reader-quick-share { color: #fff; }
.nsb-reader-quick-share--page {
	border: 1px solid var(--reader-magenta);
	background: var(--reader-magenta);
	box-shadow: 0 8px 18px rgba(139, 20, 93, 0.18);
}

.nsb-reader-quick-share--book {
	border: 1px solid #b9841e;
	background: linear-gradient(135deg, #d6a43b, #b87d14);
	box-shadow: 0 8px 18px rgba(185, 125, 20, 0.18);
}

.nsb-reader-header-button:hover,
.nsb-reader-quick-share:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(54, 31, 43, 0.16);
}

.nsb-reader-header-button[aria-pressed="true"] {
	border-color: var(--reader-gold);
	background: #fff4d8;
	color: var(--reader-magenta-dark);
}

.nsb-reader-stage {
	position: relative;
	display: flex;
	align-items: safe center;
	justify-content: safe center;
	min-width: 0;
	min-height: 0;
	max-height: 100%;
	padding: clamp(12px, 1.5vw, 22px);
	overflow: hidden;
	overflow: clip;
	-webkit-overflow-scrolling: touch;
	background:
		radial-gradient(circle at 16% 10%, rgba(201, 150, 45, 0.09), transparent 27%),
		radial-gradient(circle at 86% 22%, rgba(139, 20, 93, 0.08), transparent 30%),
		linear-gradient(180deg, var(--reader-bg), #e7e2dc);
}

.nsb-reader-stage.nsb-reader-stage--zoomed {
	align-items: flex-start;
	justify-content: flex-start;
	overflow: auto;
	overscroll-behavior: contain;
}

.nsb-reader-stage--pdf {
	padding: 0;
	overflow: hidden;
	background: #e7e2dc;
}

.nsb-reader-pdf-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: 0;
	background: #fff;
}

.nsb-reader-page-wrap {
	--reader-zoom: 1;
	position: relative;
	z-index: 1;
	width: min(900px, calc(100vw - 64px));
	max-width: none;
	flex: 0 0 auto;
	transition: width 0.18s ease;
}

.nsb-reader-page {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(51, 38, 44, 0.08);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 24px 58px rgba(38, 28, 33, 0.2);
	user-select: none;
}

.nsb-reader-watermark {
	position: absolute;
	z-index: 2;
	color: #7a5e45;
	opacity: var(--wm-opacity);
	font: 700 clamp(22px, 4vw, 54px)/1.2 sans-serif;
	white-space: nowrap;
	pointer-events: none;
}

.nsb-reader-watermark--center { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); }
.nsb-reader-watermark--bottom-right { right: 4%; bottom: 4%; font-size: 24px; }
.nsb-reader-watermark--repeat {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-24deg);
	text-shadow: -320px -220px 0 currentColor, 320px -220px 0 currentColor, -320px 220px 0 currentColor, 320px 220px 0 currentColor, 0 -440px 0 currentColor, 0 440px 0 currentColor;
}

.nsb-reader-toolbar {
	position: relative;
	z-index: 100;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	padding: 10px clamp(12px, 2vw, 26px);
	border-top: 1px solid var(--reader-line);
	background: rgba(255, 253, 251, 0.96);
	box-shadow: 0 -8px 26px rgba(47, 29, 39, 0.09);
	backdrop-filter: blur(18px);
}

.nsb-reader-toolbar-center,
.nsb-reader-zoom,
.nsb-reader-themes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.nsb-reader-toolbar-center { gap: 12px; min-width: 0; }

.nsb-reader-zoom,
.nsb-reader-themes {
	min-height: 46px;
	padding: 4px;
	border: 1px solid var(--reader-line);
	border-radius: 12px;
	background: var(--reader-panel-soft);
}

.nsb-reader-toolbar button,
.nsb-reader-drawer button,
.nsb-reader-share-head button {
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var(--reader-line);
	border-radius: 9px;
	background: #fff;
	color: var(--reader-magenta);
	cursor: pointer;
}

.nsb-reader-toolbar button:hover,
.nsb-reader-drawer button:hover,
.nsb-reader-share-head button:hover { background: #fbf0f6; }

.nsb-reader-nav-button {
	min-width: 112px !important;
	padding: 0 18px;
	border-color: rgba(139, 20, 93, 0.28) !important;
	font-weight: 700;
}

.nsb-reader-nav-button:disabled { opacity: 0.4; cursor: not-allowed; }

.nsb-reader-zoom span {
	min-width: 54px;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.nsb-reader-zoom [data-reader-fit] { padding-inline: 13px; }

.nsb-reader-drawer {
	position: fixed;
	z-index: 220;
	inset: 0 0 0 auto;
	width: min(420px, 94vw);
	padding: 22px;
	overflow: auto;
	border-inline-start: 3px solid var(--reader-gold);
	background: var(--reader-panel);
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.24);
}

.nsb-reader-drawer[hidden],
.nsb-reader-share-modal[hidden],
[data-share-panel][hidden] { display: none !important; }

.nsb-reader-drawer__head,
.nsb-reader-share-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.nsb-reader-drawer h2,
.nsb-reader-share-head h2 {
	margin: 0;
	color: var(--reader-magenta-dark);
	font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
	line-height: 1.55;
}

.nsb-reader-drawer nav { margin-top: 18px; }
.nsb-reader-drawer nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 8px;
	border-bottom: 1px solid var(--reader-line);
	color: var(--reader-text);
	text-decoration: none;
}

.nsb-reader-drawer nav a:hover { color: var(--reader-magenta); }

.nsb-reader-share-modal {
	position: fixed;
	z-index: 300;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 18px;
	overflow-y: auto;
	background: rgba(23, 16, 19, 0.7);
	backdrop-filter: blur(8px);
	overscroll-behavior: contain;
}

.nsb-reader-share-dialog {
	direction: rtl;
	width: min(590px, 100%);
	max-height: calc(100vh - 36px);
	padding: clamp(20px, 3vw, 28px);
	overflow: auto;
	border: 1px solid rgba(240, 200, 94, 0.45);
	border-radius: 22px;
	background: var(--reader-panel);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}

.nsb-reader-share-head h2 { font-size: clamp(26px, 4vw, 36px); }
.nsb-reader-share-head [data-reader-share-close] { flex: 0 0 42px; font-size: 22px; }

.nsb-reader-share-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin: 18px 0;
}

.nsb-reader-share-tabs > * {
	min-width: 0;
	min-height: 46px;
	padding: 9px 12px;
	border: 1px solid rgba(139, 20, 93, 0.22);
	border-radius: 10px;
	background: #fff;
	color: var(--reader-magenta);
	font-weight: 700;
	cursor: pointer;
}

.nsb-reader-share-tabs .is-active {
	border-color: var(--reader-magenta);
	background: var(--reader-magenta);
	color: #fff;
}

.nsb-reader-share-dialog .nsb-share-options {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
	direction: ltr !important;
}

.nsb-reader-share-dialog .nsb-share-option {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 0 !important;
	min-height: 45px !important;
	padding: 9px 10px !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: 0 8px 18px rgba(37, 27, 31, 0.12);
	color: #fff !important;
	font: 700 14px/1.2 Arial, sans-serif !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.nsb-reader-share-dialog .nsb-share-option:hover { filter: brightness(0.92); transform: translateY(-1px); }
.nsb-reader-share-dialog .nsb-share-option--whatsapp { background: #159454 !important; }
.nsb-reader-share-dialog .nsb-share-option--email { background: #b28524 !important; }
.nsb-reader-share-dialog .nsb-share-option--facebook { background: #3767b2 !important; }
.nsb-reader-share-dialog .nsb-share-option--x { background: #161616 !important; }
.nsb-reader-share-dialog .nsb-share-option--linkedin { background: #0a6fa8 !important; }
.nsb-reader-share-dialog .nsb-share-option--copy { background: #7b5a66 !important; }

.nsb-reader-empty {
	align-self: center;
	width: min(620px, 100%);
	padding: 54px 24px;
	border: 1px solid var(--reader-line);
	border-radius: 18px;
	background: var(--reader-panel);
	text-align: center;
}

.nsb-reader-empty a { color: var(--reader-magenta); font-weight: 700; }

.nsb-reader-theme-sepia {
	--reader-bg: #e3d3b6;
	--reader-panel: #fff8e8;
	--reader-panel-soft: #f2e4c9;
}

.nsb-reader-theme-dark {
	--reader-bg: #19171a;
	--reader-panel: #29262c;
	--reader-panel-soft: #343038;
	--reader-text: #f3edf1;
	--reader-muted: #c5b9c0;
	--reader-line: rgba(255, 255, 255, 0.14);
}

.nsb-reader-theme-dark .nsb-reader-header,
.nsb-reader-theme-dark .nsb-reader-toolbar { background: rgba(35, 32, 38, 0.96); }
.nsb-reader-theme-dark .nsb-reader-header-button,
.nsb-reader-theme-dark .nsb-reader-back,
.nsb-reader-theme-dark .nsb-reader-toolbar button,
.nsb-reader-theme-dark .nsb-reader-share-tabs > *,
.nsb-reader-theme-dark .nsb-reader-drawer button,
.nsb-reader-theme-dark .nsb-reader-share-head button { background: #353139; color: #f2dca7; }
.nsb-reader-theme-dark .nsb-reader-title strong,
.nsb-reader-theme-dark .nsb-reader-drawer h2,
.nsb-reader-theme-dark .nsb-reader-share-head h2 { color: #f0c85e; }
.nsb-reader-theme-dark .nsb-reader-stage { background: linear-gradient(180deg, #19171a, #121114); }

.nsb-reader-header button:focus-visible,
.nsb-reader-header a:focus-visible,
.nsb-reader-toolbar button:focus-visible,
.nsb-reader-share-dialog button:focus-visible,
.nsb-reader-share-dialog a:focus-visible,
.nsb-reader-drawer button:focus-visible,
.nsb-reader-drawer a:focus-visible {
	outline: 3px solid var(--reader-gold-light);
	outline-offset: 2px;
}

@media (max-width: 1180px) {
	.nsb-reader-header { grid-template-columns: auto minmax(0, 1fr); }
	.nsb-reader-header-actions {
		grid-column: 1 / -1;
		justify-content: center;
		padding-top: 8px;
		border-top: 1px solid var(--reader-line);
	}
	.nsb-reader-page-wrap { width: min(860px, calc(100vw - 42px)); }
}

@media (max-width: 760px) {
	.nsb-reader-header { gap: 9px; padding: 8px 10px; }
	.nsb-reader-back { min-width: 44px; padding-inline: 10px; }
	.nsb-reader-back__label { display: none; }
	.nsb-reader-title { gap: 8px; }
	.nsb-reader-title strong { font-size: 18px; line-height: 1.85; }
	.nsb-reader-page-status { padding-inline: 9px; }
	.nsb-reader-page-status > span { display: none; }
	.nsb-reader-header-actions {
		display: grid;
		grid-template-columns: 44px 44px minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		gap: 6px;
	}
	.nsb-reader-header-button { min-width: 44px; padding: 6px; }
	.nsb-reader-header-button > span:last-child { display: none; }
	.nsb-reader-quick-share { min-width: 0; padding: 7px 8px; font-size: 12px; white-space: normal; }
	.nsb-reader-stage { padding: 18px 10px 34px; }
	.nsb-reader-page-wrap { width: calc(100vw - 20px); }
	.nsb-reader-toolbar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 8px 10px;
	}
	.nsb-reader-toolbar-center { grid-column: 1 / -1; order: 1; flex-wrap: wrap; }
	.nsb-reader-nav-button { order: 2; width: 100%; min-width: 0 !important; }
	.nsb-reader-zoom,
	.nsb-reader-themes { flex: 1 1 auto; }
	.nsb-reader-share-modal { padding: 10px; }
	.nsb-reader-share-dialog { max-height: calc(100vh - 20px); padding: 17px; border-radius: 17px; }
	.nsb-reader-share-head h2 { font-size: 25px; }
	.nsb-reader-share-dialog .nsb-share-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 480px) {
	.nsb-reader-title strong { max-width: none; }
	.nsb-reader-quick-share { font-size: 11px; }
	.nsb-reader-zoom [data-reader-fit] { display: none; }
	.nsb-reader-zoom span { min-width: 46px; }
	.nsb-reader-themes button { min-width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.nsb-reader-page-wrap,
	.nsb-reader-back,
	.nsb-reader-header-button,
	.nsb-reader-quick-share,
	.nsb-reader-share-option { transition: none !important; }
}

@media print {
	body.nsb-reader-body { display: none !important; }
}