/* ========================================================================
   GENZO READER OS V2.1 — CORE STYLES (Sprint 1 Final)
   ======================================================================== */

/* --- CSS RESET & VARIABLES --- */
:root {
	--gr-bg: #06070c;
	--gr-bg-raised: #0c0e16;
	--gr-bg-float: #111420;
	--gr-surface: rgba(15, 18, 28, 0.82);
	--gr-surface-solid: #12151f;
	--gr-glass: rgba(15, 18, 28, 0.65);
	--gr-glass-strong: rgba(12, 14, 22, 0.88);
	--gr-border: rgba(255,255,255,0.07);
	--gr-border-strong: rgba(255,255,255,0.13);
	--gr-text: #f0f1f5;
	--gr-text-soft: #c0c7d6;
	--gr-text-muted: #7b839a;
	--gr-accent: #ff7a26;
	--gr-accent-soft: #ffb380;
	--gr-accent-glow: rgba(255,122,38,0.4);
	--gr-accent-bg: rgba(255,122,38,0.1);
	--gr-success: #34d399;
	--gr-warn: #fbbf24;
	--gr-error: #f87171;
	--gr-radius: 16px;
	--gr-radius-sm: 10px;
	--gr-radius-xs: 6px;
	--gr-pill: 999px;
	--gr-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
	--gr-shadow-accent: 0 8px 32px rgba(255,122,38,0.3);
	--gr-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--gr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Reader defaults */
	--gr-font-body: 'Literata', 'Georgia', 'Times New Roman', serif;
	--gr-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
	--gr-font-size: 19px;
	--gr-line-height: 1.85;
	--gr-letter-spacing: 0em;
	--gr-word-spacing: 0em;
	--gr-max-width: 720px;
	--gr-paragraph-spacing: 1.4em;
	--gr-indent: 0px;

	/* Mobile bottom nav height for safe spacing */
	--gr-mobile-nav-h: 0px;
}
@media (max-width: 768px) {
	:root {
		--gr-mobile-nav-h: 60px;
	}
}

/* Theme tokens */
.gr-theme-dark {
	--gr-reader-bg: #0a0b10;
	--gr-reader-text: #d4d4d8;
	--gr-reader-link: var(--gr-accent);
}
.gr-theme-sepia {
	--gr-reader-bg: #f4ecd8;
	--gr-reader-text: #3d2e1f;
	--gr-reader-link: #a0522d;
}
.gr-theme-paper {
	--gr-reader-bg: #fefefe;
	--gr-reader-text: #1a1a1a;
	--gr-reader-link: #0066cc;
}
.gr-theme-moss {
	--gr-reader-bg: #1a2418;
	--gr-reader-text: #c8d4c0;
	--gr-reader-link: #7cba6a;
}
.gr-theme-blood {
	--gr-reader-bg: #17080c;
	--gr-reader-text: #ead6dc;
	--gr-reader-link: #ff4d6d;
}
.gr-theme-lavender {
	--gr-reader-bg: #1b1730;
	--gr-reader-text: #e9ddff;
	--gr-reader-link: #c4a7ff;
}

/* ==========================================================================
   OBJECTIVE 1 — HEADER REMOVAL FINAL (nuclear)
   ========================================================================== */
body.single-gm_chapter #masthead,
body.single-gm_chapter .site-header,
body.single-gm_chapter header.site-header,
body.single-gm_chapter .ast-primary-header-bar,
body.single-gm_chapter .main-header-bar,
body.single-gm_chapter .main-header-bar-wrap,
body.single-gm_chapter .ast-main-header-wrap,
body.single-gm_chapter .ast-desktop-header,
body.single-gm_chapter .ast-mobile-header-wrap,
body.single-gm_chapter .ast-above-header-wrap,
body.single-gm_chapter .ast-below-header-wrap,
body.single-gm_chapter .ast-header-break-point .main-header-bar,
body.single-gm_chapter .ast-header-break-point .ast-mobile-header-wrap,
body.single-gm_chapter .ast-header-break-point .main-header-bar-wrap,
body.single-gm_chapter .ast-header-break-point .ast-above-header-wrap,
body.single-gm_chapter .ast-header-break-point .ast-below-header-wrap,
body.single-gm_chapter .site-header-primary-section-right,
body.single-gm_chapter #ast-header-main-wrap,
body.single-gm_chapter .ast-above-header,
body.single-gm_chapter .ast-below-header,
body.single-gm_chapter .ast-header-sections-navigation,
body.single-gm_chapter .ast-desktop-header-content,
body.single-gm_chapter .ast-mobile-header-content,
body.single-gm_chapter .ast-mobile-popup-drawer,
body.single-gm_chapter .ast-header-account-wrap,
body.single-gm_chapter .entry-header,
body.single-gm_chapter .ast-single-post-order,
body.single-gm_chapter .post-navigation,
body.single-gm_chapter .comments-area,
body.single-gm_chapter .site-footer,
body.single-gm_chapter footer.site-footer,
body.single-gm_chapter .ast-footer-overlay,
body.single-gm_chapter .ast-small-footer,
body.single-gm_chapter .ast-footer-copyright,
body.single-gm_chapter .site-below-footer-wrap,
body.single-gm_chapter .ast-above-footer-wrap {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	left: -9999px !important;
}

body.single-gm_chapter,
body.single-gm_chapter .ast-container,
body.single-gm_chapter #primary,
body.single-gm_chapter .site-content,
body.single-gm_chapter #content {
	background: var(--gr-bg) !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}
body.single-gm_chapter .site-content .ast-container {
	display: block !important;
}

/* Admin bar offset — only when WP admin bar is present */
body.single-gm_chapter.admin-bar .gr-topbar {
	top: 32px;
}
@media (max-width: 782px) {
	body.single-gm_chapter.admin-bar .gr-topbar {
		top: 46px;
	}
}

/* ========================================================================== */

.genzo-reader *, .genzo-reader *::before, .genzo-reader *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.genzo-reader {
	font-family: var(--gr-font-ui);
	color: var(--gr-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-height: 100vh;
	background: var(--gr-bg);
}
.genzo-reader a { color: inherit; text-decoration: none; }
.genzo-reader button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.genzo-reader img { max-width: 100%; display: block; }

/* --- SCROLL PROGRESS --- */
.gr-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: linear-gradient(90deg, var(--gr-accent), var(--gr-accent-soft));
	z-index: 9999;
	transition: width 0.1s linear;
	box-shadow: 0 0 12px var(--gr-accent-glow);
	pointer-events: none;
}
body.single-gm_chapter.admin-bar .gr-scroll-progress {
	top: 32px;
}
@media (max-width: 782px) {
	body.single-gm_chapter.admin-bar .gr-scroll-progress {
		top: 46px;
	}
}

/* ==========================================================================
   OBJECTIVE 2 — TOPBAR FINAL
   Static in flow, never jumps, never hides awkwardly.
   Becomes sticky on scroll via a clean threshold approach.
   ========================================================================== */
.gr-topbar {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	z-index: 900;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	border-bottom: 1px solid var(--gr-border);
	transition: opacity 0.3s ease, transform 0.3s var(--gr-ease-out);
	will-change: transform, opacity;
}
body.single-gm_chapter.admin-bar .gr-topbar {
	top: 32px;
}
@media (max-width: 782px) {
	body.single-gm_chapter.admin-bar .gr-topbar {
		top: 46px;
	}
}

/* Topbar compact hide: slides up gently, never jumps */
.gr-topbar.is-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.gr-topbar-left, .gr-topbar-right {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.gr-topbar-center {
	flex: 1;
	min-width: 0;
	text-align: center;
	padding: 0 12px;
}
.gr-topbar-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--gr-text-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
.gr-topbar-sub {
	font-size: 11px;
	color: var(--gr-text-muted);
	line-height: 1.3;
}
.gr-topbar-btn {
	width: 40px;
	height: 40px;
	border-radius: var(--gr-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--gr-transition), color var(--gr-transition);
	color: var(--gr-text-soft);
	position: relative;
	flex-shrink: 0;
}
.gr-topbar-btn:hover { background: rgba(255,255,255,0.08); color: var(--gr-text); }
.gr-topbar-btn:active { transform: scale(0.93); }
.gr-topbar-btn svg { width: 20px; height: 20px; }
.gr-topbar-btn .gr-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gr-accent);
	color: #000;
	font-size: 9px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   OBJECTIVE 3 — HERO FINAL
   Cinematic: badge → title → read time only.
   ========================================================================== */
.gr-hero {
	position: relative;
	padding: 0;
	overflow: hidden;
	min-height: 420px;
	display: flex;
	align-items: center;
	transform-origin: top center;
	will-change: transform, opacity;
}
.gr-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.gr-hero-bg::before {
	content: '';
	position: absolute;
	inset: -20px;
	background-image: var(--gr-cover-img, none);
	background-size: cover;
	background-position: center;
	filter: blur(8px) saturate(1.2) brightness(0.75);
	transform: scale(1.05);
	opacity: 1;
	will-change: transform, filter, opacity;
	transition: opacity .12s linear;
}

.gr-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(6,7,12,.25) 0%, rgba(6,7,12,.55) 60%, var(--gr-bg) 100%);
}
.gr-hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto;
	padding: 86px 24px 78px;
	text-align: center;
}
.gr-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: var(--gr-pill);
	background: var(--gr-accent-bg);
	border: 1px solid rgba(255,122,38,0.2);
	color: var(--gr-accent-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 24px;
	animation: grFadeUp 0.6s var(--gr-ease-out) both;
}
.gr-hero-badge-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gr-accent);
	box-shadow: 0 0 8px var(--gr-accent);
}
.gr-hero-story-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--gr-text-muted);
	margin-bottom: 14px;
	transition: color var(--gr-transition);
	animation: grFadeUp 0.6s 0.1s var(--gr-ease-out) both;
}
.gr-hero-story-link:hover { color: var(--gr-accent); }
.gr-hero-story-link svg { width: 14px; height: 14px; }
.gr-hero-title {
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
	background: linear-gradient(180deg, #fff 20%, #c8ccd8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: grFadeUp 0.6s 0.15s var(--gr-ease-out) both;
}
.gr-hero-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--gr-text-muted);
	animation: grFadeUp 0.6s 0.2s var(--gr-ease-out) both;
}
.gr-hero-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.gr-hero-meta-item svg { width: 14px; height: 14px; opacity: 0.7; }
@media (max-width: 640px) {
	.gr-hero-content {
		padding: 36px 20px 32px;
	}
	.gr-hero-title {
		font-size: clamp(24px, 6vw, 36px);
	}
	.gr-hero-badge {
		font-size: 10px;
		padding: 4px 12px;
	}
}

/* --- READER BODY --- */
.gr-reader-body {
	background: var(--gr-reader-bg, #0a0b10);
	color: var(--gr-reader-text, #d4d4d8);
	min-height: 60vh;
	transition: background 0.4s ease, color 0.4s ease;
}
.gr-reader-container {
	max-width: var(--gr-max-width);
	margin: 0 auto;
	padding: 48px 24px 80px;
	padding-bottom: calc(80px + var(--gr-mobile-nav-h));
	font-family: var(--gr-font-body);
	font-size: var(--gr-font-size);
	line-height: var(--gr-line-height);
	letter-spacing: var(--gr-letter-spacing);
	word-spacing: var(--gr-word-spacing);
}
@media (max-width: 640px) {
	.gr-reader-container {
		padding: 32px 18px 80px;
		padding-bottom: calc(80px + var(--gr-mobile-nav-h));
	}
}

/* Reader content typography */
.gr-reader-container p {
	margin-bottom: var(--gr-paragraph-spacing);
	text-indent: var(--gr-indent);
	transition: opacity 0.3s ease;
}
.gr-reader-container h1,
.gr-reader-container h2,
.gr-reader-container h3,
.gr-reader-container h4,
.gr-reader-container h5,
.gr-reader-container h6 {
	font-family: var(--gr-font-ui);
	font-weight: 700;
	margin: 2em 0 0.8em;
	line-height: 1.3;
	color: var(--gr-reader-text);
}
.gr-reader-container h2 { font-size: 1.5em; }
.gr-reader-container h3 { font-size: 1.25em; }
.gr-reader-container a { color: var(--gr-reader-link, var(--gr-accent)); text-decoration: underline; text-underline-offset: 3px; }
.gr-reader-container blockquote {
	border-left: 3px solid var(--gr-accent);
	padding: 8px 0 8px 20px;
	margin: 1.5em 0;
	font-style: italic;
	opacity: 0.9;
}
.gr-reader-container img {
	border-radius: var(--gr-radius-sm);
	margin: 1.5em auto;
	cursor: zoom-in;
}
.gr-reader-container pre {
	background: rgba(0,0,0,0.3);
	border-radius: var(--gr-radius-sm);
	padding: 16px 20px;
	overflow-x: auto;
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.85em;
	margin: 1.5em 0;
}
.gr-reader-container code {
	background: rgba(0,0,0,0.2);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}
.gr-reader-container hr {
	border: none;
	text-align: center;
	margin: 2.5em 0;
	color: var(--gr-text-muted);
}
.gr-reader-container hr::before {
	content: '• • •';
	letter-spacing: 0.5em;
	font-size: 14px;
}

/* Paragraph interactions */
.gr-reader-container [data-p] {
	position: relative;
	cursor: text;
	border-radius: 4px;
	padding: 2px 4px;
	margin-left: -4px;
	margin-right: -4px;
	transition: background 0.2s ease;
}
.gr-reader-container [data-p].gr-p-active {
	background: rgba(255,122,38,0.08);
}
.gr-reader-container [data-p].gr-tts-active {
	background: rgba(255,122,38,0.12);
	box-shadow: -4px 0 0 var(--gr-accent);
}

/* Bionic reading (TreeWalker-safe) */
.gr-bionic .gr-bionic-w b {
	font-weight: 700;
	color: var(--gr-reader-text);
}

/* Focus mode */
.gr-focus-mode [data-p]:not(.gr-p-focused) {
	opacity: 0.15;
	transition: opacity 0.4s ease;
}
.gr-focus-mode [data-p].gr-p-focused {
	opacity: 1;
}

/* Typewriter mode — JS handles smooth centering */


/* Sensory safe mode */
.gr-sensory-safe .gr-reader-container {
	max-width: 600px;
	font-size: calc(var(--gr-font-size) * 1.05);
	line-height: 2.1;
	letter-spacing: 0.02em;
	word-spacing: 0.08em;
}

/* Dyslexia mode */
.gr-dyslexia-mode .gr-reader-container {
	font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
	letter-spacing: 0.05em;
	word-spacing: 0.12em;
	line-height: 2;
}

/* WCAG High Contrast */
.gr-high-contrast {
	--gr-reader-bg: #000;
	--gr-reader-text: #fff;
	--gr-reader-link: #ffff00;
}
.gr-high-contrast .gr-reader-container { font-weight: 500; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.genzo-reader *, .genzo-reader *::before, .genzo-reader *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   OBJECTIVE 6 — MOBILE SHELL POLISH — BOTTOM NAV
   ========================================================================== */
.gr-mobile-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 800;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	border-top: 1px solid var(--gr-border);
	padding: 6px 4px;
	padding-bottom: max(6px, env(safe-area-inset-bottom));
	display: none;
	transition: transform 0.3s var(--gr-ease-out);
}
.gr-mobile-nav.is-hidden {
	transform: translateY(100%);
}
@media (max-width: 768px) {
	.gr-mobile-nav { display: flex; justify-content: space-around; align-items: center; }
}
.gr-mobile-nav-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	border-radius: var(--gr-radius-sm);
	transition: background var(--gr-transition), color var(--gr-transition);
	color: var(--gr-text-muted);
	font-size: 10px;
	font-weight: 600;
	min-width: 48px;
	-webkit-tap-highlight-color: transparent;
}
.gr-mobile-nav-btn:active { transform: scale(0.92); }
.gr-mobile-nav-btn.is-active { color: var(--gr-accent); }
.gr-mobile-nav-btn svg { width: 22px; height: 22px; }

/* ==========================================================================
   OBJECTIVE 7 — SETTINGS PANEL STABILITY
   ========================================================================== */
.gr-settings-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}
.gr-settings-overlay.is-open { opacity: 1; visibility: visible; }

.gr-settings-panel {
	position: fixed;
	z-index: 1001;
	left: 50%;
	right: auto;
	bottom: 0;
	top: auto;
	width: 100%;
	max-width: 760px;
	max-height: 78vh;
	border-radius: var(--gr-radius) var(--gr-radius) 0 0;
	transform: translate(-50%, 100%);
	background: var(--gr-surface-solid);
	box-shadow: 0 -20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transition: transform 0.4s var(--gr-ease-out);
}
.gr-settings-panel.is-open {
	transform: translate(-50%, 0);
}
@media (max-width: 768px) {
	.gr-settings-panel {
		max-width: 100%;
		max-height: 84vh;
	}
}

.gr-settings-panel .gr-settings-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: calc(20px + max(20px, env(safe-area-inset-bottom)));
}

/* Floating settings button */
.gr-floating-settings-btn {
	position: fixed;
	right: 28px;
	bottom: 110px;
	z-index: 850;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--gr-accent), #ff9b5a);
	color: #0b0b0b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 24px var(--gr-accent-glow), 0 0 0 1px rgba(255,122,38,0.25);
	transition: transform 0.25s var(--gr-ease-spring), box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.gr-floating-settings-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 10px 36px var(--gr-accent-glow), 0 0 0 1px rgba(255,122,38,0.4);
}
.gr-floating-settings-btn:active {
	transform: scale(0.93);
}
.gr-floating-settings-btn svg {
	width: 24px;
	height: 24px;
}
@media (max-width: 768px) {
	.gr-floating-settings-btn {
		right: 18px;
		bottom: 84px;
		width: 48px;
		height: 48px;
	}
	.gr-floating-settings-btn svg { width: 22px; height: 22px; }
}

/* Desktop: right drawer */

/* Desktop: right drawer */
.gr-comment-drawer {
	left: 50%;
	right: auto;
	bottom: 0;
	top: auto;
	width: 100%;
	max-width: 720px;
	max-height: 72vh;
	border-radius: var(--gr-radius) var(--gr-radius) 0 0;
	transform: translate(-50%, 100%);
	box-shadow: 0 -20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
	display: flex;
	flex-direction: column;
}
.gr-comment-drawer.is-open { transform: translate(-50%, 0); }
@media (max-width: 768px) {
	.gr-comment-drawer {
		max-width: 100%;
		max-height: 82vh;
	}
}

.gr-settings-handle {
	display: block;
	width: 36px;
	height: 4px;
	border-radius: var(--gr-pill);
	background: rgba(255,255,255,0.2);
	margin: 10px auto 6px;
	flex-shrink: 0;
	cursor: grab;
}

.gr-settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gr-border);
	position: sticky;
	top: 0;
	background: var(--gr-surface-solid);
	z-index: 2;
}
.gr-settings-header h3 {
	font-size: 16px;
	font-weight: 700;
}
.gr-settings-close {
	width: 36px;
	height: 36px;
	border-radius: var(--gr-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--gr-transition);
	flex-shrink: 0;
}
.gr-settings-close:hover { background: rgba(255,255,255,0.08); }
.gr-settings-close svg { width: 18px; height: 18px; }

/* Settings tabs */
.gr-settings-tabs {
	display: flex;
	gap: 0;
	padding: 0 16px;
	border-bottom: 1px solid var(--gr-border);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	position: sticky;
	top: 56px; /* below sticky header */
	background: var(--gr-surface-solid);
	z-index: 1;
}
.gr-settings-tabs::-webkit-scrollbar { display: none; }
.gr-settings-tab {
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gr-text-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-settings-tab:hover { color: var(--gr-text-soft); }
.gr-settings-tab.is-active {
	color: var(--gr-accent);
	border-bottom-color: var(--gr-accent);
}

.gr-settings-body {
	padding: 20px;
	padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.gr-settings-section { display: none; }
.gr-settings-section.is-active { display: block; }

.gr-setting-group {
	margin-bottom: 24px;
}
.gr-setting-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--gr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
}
.gr-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.gr-setting-row-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--gr-text-soft);
}
.gr-setting-row-sublabel {
	font-size: 11px;
	color: var(--gr-text-muted);
	margin-top: 2px;
}

/* Toggle switch */
.gr-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	flex-shrink: 0;
}
.gr-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.gr-toggle-track {
	position: absolute;
	inset: 0;
	border-radius: var(--gr-pill);
	background: rgba(255,255,255,0.12);
	transition: background var(--gr-transition);
	cursor: pointer;
}
.gr-toggle input:checked + .gr-toggle-track { background: var(--gr-accent); }
.gr-toggle-thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform var(--gr-transition);
	pointer-events: none;
}
.gr-toggle input:checked ~ .gr-toggle-thumb { transform: translateX(20px); }

/* Slider */
.gr-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: var(--gr-pill);
	background: rgba(255,255,255,0.1);
	outline: none;
}
.gr-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gr-accent);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(255,122,38,0.4);
}
.gr-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gr-accent);
	border: none;
	cursor: pointer;
}

/* Theme selector */
.gr-theme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.gr-theme-option {
	padding: 12px 8px;
	border-radius: var(--gr-radius-sm);
	border: 2px solid var(--gr-border);
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-theme-option:hover { border-color: var(--gr-border-strong); }
.gr-theme-option.is-active { border-color: var(--gr-accent); }
.gr-theme-swatch {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin: 0 auto 6px;
	border: 2px solid rgba(255,255,255,0.1);
}

/* Font selector */
.gr-font-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.gr-font-option {
	padding: 14px 10px;
	border-radius: var(--gr-radius-sm);
	border: 2px solid var(--gr-border);
	text-align: center;
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-font-option:hover { border-color: var(--gr-border-strong); }
.gr-font-option.is-active { border-color: var(--gr-accent); }
.gr-font-preview {
	font-size: 18px;
	margin-bottom: 4px;
	line-height: 1.3;
}
.gr-font-name {
	font-size: 10px;
	font-family: var(--gr-font-ui);
	color: var(--gr-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- CHAPTER DRAWER --- */
.gr-chapter-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gr-chapter-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.gr-chapter-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 340px;
	max-width: 85vw;
	z-index: 1001;
	background: var(--gr-surface-solid);
	border-right: 1px solid var(--gr-border);
	transform: translateX(-100%);
	transition: transform 0.4s var(--gr-ease-out);
	box-shadow: 20px 0 60px rgba(0,0,0,0.4);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.gr-chapter-drawer.is-open { transform: translateX(0); }

.gr-drawer-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gr-border);
	flex-shrink: 0;
}
.gr-drawer-cover {
	width: 42px;
	height: 56px;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	background-color: var(--gr-bg-float);
	flex-shrink: 0;
}
.gr-drawer-info { min-width: 0; flex: 1; }
.gr-drawer-story-title {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.gr-drawer-chapter-count {
	font-size: 12px;
	color: var(--gr-text-muted);
}
.gr-drawer-close {
	width: 36px;
	height: 36px;
	border-radius: var(--gr-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--gr-transition);
}
.gr-drawer-close:hover { background: rgba(255,255,255,0.08); }
.gr-drawer-close svg { width: 18px; height: 18px; }

.gr-drawer-list {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px 0;
}
.gr-drawer-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	font-size: 14px;
	color: var(--gr-text-soft);
	transition: background var(--gr-transition), color var(--gr-transition);
	text-decoration: none;
}
.gr-drawer-item:hover { background: rgba(255,255,255,0.05); color: var(--gr-text); }
.gr-drawer-item.is-current {
	background: var(--gr-accent-bg);
	color: var(--gr-accent);
	font-weight: 600;
}
.gr-drawer-item-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
}
.gr-drawer-item.is-current .gr-drawer-item-num {
	background: var(--gr-accent);
	color: #000;
}
.gr-drawer-item-title {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- TTS MINI PLAYER --- */
.gr-tts-player {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(120px);
	z-index: 850;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--gr-shadow);
	width: min(360px, calc(100vw - 32px));
	transition: transform 0.4s var(--gr-ease-out), opacity 0.3s ease;
	opacity: 0;
}
.gr-tts-player.is-active {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}
@media (max-width: 768px) {
	.gr-tts-player {
		bottom: calc(var(--gr-mobile-nav-h) + 16px);
	}
}
.gr-tts-play-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gr-accent);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--gr-transition), box-shadow var(--gr-transition);
}
.gr-tts-play-btn:hover { transform: scale(1.08); box-shadow: 0 4px 16px var(--gr-accent-glow); }
.gr-tts-play-btn:active { transform: scale(0.95); }
.gr-tts-play-btn svg { width: 18px; height: 18px; }
.gr-tts-info { flex: 1; min-width: 0; }
.gr-tts-label { font-size: 12px; font-weight: 600; color: var(--gr-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-tts-progress-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: var(--gr-pill); margin-top: 6px; overflow: hidden; }
.gr-tts-progress-fill { height: 100%; background: var(--gr-accent); border-radius: var(--gr-pill); width: 0%; transition: width 0.3s linear; }
.gr-tts-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gr-tts-ctrl-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-muted);
	transition: color var(--gr-transition), background var(--gr-transition);
}
.gr-tts-ctrl-btn:hover { color: var(--gr-text); background: rgba(255,255,255,0.08); }
.gr-tts-ctrl-btn svg { width: 16px; height: 16px; }

/* --- AMBIENT MIXER --- */
.gr-ambient-mixer {
	padding: 16px;
	border-radius: var(--gr-radius);
	background: rgba(0,0,0,0.2);
	border: 1px solid var(--gr-border);
}
.gr-ambient-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.gr-ambient-item:last-child { margin-bottom: 0; }
.gr-ambient-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--gr-radius-sm);
	background: rgba(255,255,255,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.gr-ambient-name {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--gr-text-soft);
}
.gr-ambient-slider {
	width: 80px;
}

/* --- COMMENT SYSTEM (Wattpad-style) --- */
.gr-comment-markers { position: absolute; right: -40px; top: 0; }
.gr-comment-marker {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gr-accent-bg);
	border: 1px solid rgba(255,122,38,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--gr-accent);
	cursor: pointer;
	transition: all var(--gr-transition);
}
.gr-comment-marker:hover { background: var(--gr-accent); color: #000; transform: scale(1.1); }

/* Comment drawer */
.gr-comment-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gr-comment-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.gr-comment-drawer {
	position: fixed;
	z-index: 1001;
	background: var(--gr-surface-solid);
	overflow: hidden;
	transition: transform 0.4s var(--gr-ease-out);
	left: 50%;
	right: auto;
	bottom: 0;
	top: auto;
	width: 100%;
	max-width: 720px;
	max-height: 72vh;
	border-radius: var(--gr-radius) var(--gr-radius) 0 0;
	transform: translate(-50%, 100%);
	box-shadow: 0 -20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
	display: flex;
	flex-direction: column;
}
.gr-comment-drawer.is-open { transform: translate(-50%, 0); }
@media (max-width: 768px) {
	.gr-comment-drawer {
		max-width: 100%;
		max-height: 85vh;
		border-radius: var(--gr-radius) var(--gr-radius) 0 0;
	}
}

.gr-comment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gr-border);
	position: sticky;
	top: 0;
	background: var(--gr-surface-solid);
	z-index: 2;
	gap: 12px;
}
.gr-comment-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.gr-comment-back-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--gr-radius-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-soft);
	transition: background var(--gr-transition), color var(--gr-transition);
	flex-shrink: 0;
}
.gr-comment-back-btn:hover { background: rgba(255,255,255,0.08); color: var(--gr-text); }
.gr-comment-back-btn svg { width: 18px; height: 18px; }
.gr-comment-header h3 { font-size: 16px; font-weight: 700; white-space: nowrap; }
.gr-comment-context-label {
	font-size: 11px;
	color: var(--gr-text-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
	display: none;
}
.gr-comment-context-label.is-visible { display: block; }
.gr-comment-drawer-handle {
	width: 36px;
	height: 4px;
	border-radius: var(--gr-pill);
	background: rgba(255,255,255,0.2);
	margin: 10px auto 0;
	flex-shrink: 0;
	cursor: grab;
}
.gr-comment-body {
	padding: 16px 20px;
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}
.gr-comment-header {
	flex-shrink: 0;
}
.gr-comment-quick-reactions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 0 8px;
}
.gr-comment-quick-reaction {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--gr-border);
	background: rgba(255,255,255,0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}
.gr-comment-quick-reaction:hover {
	background: rgba(255,255,255,0.08);
	border-color: var(--gr-border-strong);
	transform: scale(1.12);
}
.gr-comment-quick-reaction:active { transform: scale(0.92); }
.gr-comment-quick-reaction.is-selected {
	border-color: var(--gr-accent);
	background: var(--gr-accent-bg);
	box-shadow: 0 0 12px var(--gr-accent-glow);
}
.gr-comment-empty {
	color: var(--gr-text-muted);
	font-size: 14px;
	text-align: center;
	padding: 40px 0;
}

.gr-comment-item {
	padding: 14px 0;
	border-bottom: 1px solid var(--gr-border);
}
.gr-comment-item:last-child { border-bottom: none; }
.gr-comment-author-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.gr-comment-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--gr-bg-float);
	background-size: cover;
	flex-shrink: 0;
}
.gr-comment-author-name { font-size: 13px; font-weight: 700; }
.gr-comment-time { font-size: 11px; color: var(--gr-text-muted); }
.gr-comment-text { font-size: 14px; line-height: 1.6; color: var(--gr-text-soft); }
.gr-comment-text.is-spoiler { filter: blur(5px); cursor: pointer; transition: filter 0.3s ease; }
.gr-comment-text.is-spoiler:hover { filter: blur(2px); }
.gr-comment-text.is-spoiler.is-revealed { filter: none; }

.gr-comment-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.gr-comment-action-btn {
	font-size: 12px;
	color: var(--gr-text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color var(--gr-transition);
}
.gr-comment-action-btn:hover { color: var(--gr-text-soft); }
.gr-comment-action-btn svg { width: 14px; height: 14px; }

.gr-comment-input-area {
	padding: 12px 20px 16px;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--gr-border);
	background: var(--gr-surface-solid);
}
.gr-comment-quote-preview {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 12px;
	margin-bottom: 10px;
	background: rgba(255,122,38,0.06);
	border-left: 3px solid var(--gr-accent);
	border-radius: 0 var(--gr-radius-xs) var(--gr-radius-xs) 0;
	font-size: 12px;
	color: var(--gr-text-soft);
	line-height: 1.5;
	font-style: italic;
}
.gr-comment-quote-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.gr-comment-quote-clear {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-muted);
	flex-shrink: 0;
	transition: color var(--gr-transition);
}
.gr-comment-quote-clear:hover { color: var(--gr-text); }
.gr-comment-quote-clear svg { width: 14px; height: 14px; }
.gr-comment-input-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.gr-comment-spoiler-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--gr-text-muted);
	cursor: pointer;
	padding: 4px 10px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	transition: all var(--gr-transition);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.gr-comment-spoiler-toggle svg { width: 14px; height: 14px; }
.gr-comment-spoiler-toggle input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.gr-comment-spoiler-toggle:has(input:checked) {
	background: rgba(255,122,38,0.12);
	border-color: var(--gr-accent);
	color: var(--gr-accent);
}
.gr-comment-input-wrap {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}
.gr-comment-input {
	flex: 1;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius-sm);
	padding: 10px 14px;
	font-size: 14px;
	color: var(--gr-text);
	resize: none;
	min-height: 40px;
	max-height: 120px;
	outline: none;
	font-family: var(--gr-font-ui);
	transition: border-color var(--gr-transition);
}
.gr-comment-input:focus { border-color: var(--gr-accent); }
.gr-comment-input::placeholder { color: var(--gr-text-muted); }
.gr-comment-send-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gr-accent);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform var(--gr-transition);
}
.gr-comment-send-btn:hover { transform: scale(1.05); }
.gr-comment-send-btn svg { width: 18px; height: 18px; }

/* --- TEXT SELECTION POPUP --- */
.gr-selection-popup {
	position: fixed;
	z-index: 500;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius-sm);
	padding: 6px;
	display: flex;
	align-items: center;
	gap: 2px;
	box-shadow: var(--gr-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all 0.2s var(--gr-ease-out);
	pointer-events: none;
}
.gr-selection-popup.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: all;
}
.gr-sel-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--gr-radius-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-soft);
	transition: all var(--gr-transition);
}
.gr-sel-btn:hover { background: rgba(255,255,255,0.1); color: var(--gr-text); }
.gr-sel-btn svg { width: 16px; height: 16px; }
.gr-sel-divider {
	width: 1px;
	height: 24px;
	background: var(--gr-border);
	margin: 0 2px;
}

/* Highlight colors */
.gr-hl-yellow { background: rgba(250,204,21,0.3); }
.gr-hl-green { background: rgba(52,211,153,0.3); }
.gr-hl-blue { background: rgba(96,165,250,0.3); }
.gr-hl-pink { background: rgba(244,114,182,0.3); }
.gr-hl-orange { background: rgba(255,122,38,0.3); }

/* ==========================================================================
   OBJECTIVE 5 — END CARD CLEANUP
   No word count. CTA-driven only.
   ========================================================================== */
.gr-chapter-end {
	max-width: 600px;
	margin: 0 auto;
	padding: 60px 24px 48px;
	text-align: center;
}
.gr-end-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 40px;
	color: var(--gr-text-muted);
}
.gr-end-divider-line {
	width: 60px;
	height: 1px;
	background: var(--gr-border);
}
.gr-end-divider svg { width: 20px; height: 20px; opacity: 0.5; }

.gr-end-card {
	background: var(--gr-bg-raised);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius);
	padding: 40px 32px;
	box-shadow: var(--gr-shadow);
}
.gr-end-check {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gr-accent), var(--gr-accent-soft));
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	box-shadow: 0 8px 32px var(--gr-accent-glow);
}
.gr-end-check svg { width: 28px; height: 28px; color: #000; }
.gr-end-title {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 8px;
}
.gr-end-subtitle {
	font-size: 14px;
	color: var(--gr-text-muted);
	margin-bottom: 24px;
}

.gr-end-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 28px;
}
.gr-end-stat {
	padding: 14px 8px;
	background: rgba(255,255,255,0.03);
	border-radius: var(--gr-radius-sm);
	border: 1px solid var(--gr-border);
}
.gr-end-stat-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--gr-accent);
}
.gr-end-stat-label {
	font-size: 11px;
	color: var(--gr-text-muted);
	margin-top: 2px;
}

.gr-end-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.gr-end-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--gr-pill);
	font-size: 14px;
	font-weight: 700;
	transition: all var(--gr-transition);
	white-space: nowrap;
}
.gr-end-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.gr-end-btn--primary {
	background: linear-gradient(135deg, var(--gr-accent), #ff9b5a);
	color: #0b0b0b;
	box-shadow: var(--gr-shadow-accent);
}
.gr-end-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px var(--gr-accent-glow); }
.gr-end-btn--ghost {
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--gr-border-strong);
	color: var(--gr-text-soft);
}
.gr-end-btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--gr-text); }

.gr-end-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 24px;
}
.gr-end-link {
	font-size: 13px;
	color: var(--gr-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: color var(--gr-transition);
}
.gr-end-link:hover { color: var(--gr-accent); }
.gr-end-link svg { width: 14px; height: 14px; }

/* --- LIGHTBOX --- */
.gr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(0,0,0,0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	cursor: zoom-out;
}
.gr-lightbox.is-open { opacity: 1; visibility: visible; }
.gr-lightbox img {
	max-width: 95vw;
	max-height: 95vh;
	object-fit: contain;
	border-radius: var(--gr-radius-sm);
}
.gr-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 2;
}
.gr-lightbox-close svg { width: 22px; height: 22px; }

/* --- QUOTE CARD / SHARE --- */
.gr-quote-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 5000;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gr-quote-modal-overlay.is-open { opacity: 1; visibility: visible; }
.gr-quote-card {
	width: 400px;
	max-width: 100%;
	background: linear-gradient(160deg, #1a1520, #0f0c18);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius);
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
}
.gr-quote-card::before {
	content: '\201C';
	position: absolute;
	top: -10px;
	left: 16px;
	font-size: 120px;
	font-weight: 800;
	color: var(--gr-accent);
	opacity: 0.12;
	line-height: 1;
	font-family: Georgia, serif;
}
.gr-quote-text {
	font-family: var(--gr-font-body);
	font-size: 18px;
	line-height: 1.7;
	font-style: italic;
	color: var(--gr-text);
	position: relative;
	z-index: 1;
	margin-bottom: 20px;
}
.gr-quote-source {
	font-size: 13px;
	color: var(--gr-text-muted);
}
.gr-quote-source strong { color: var(--gr-accent-soft); }
.gr-quote-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.gr-quote-action-btn {
	padding: 8px 16px;
	border-radius: var(--gr-pill);
	font-size: 13px;
	font-weight: 600;
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--gr-border);
	transition: all var(--gr-transition);
}
.gr-quote-action-btn:hover { background: rgba(255,255,255,0.14); border-color: var(--gr-border-strong); }

/* --- BOOKMARK INLINE --- */
.gr-bookmark-indicator {
	position: absolute;
	right: -8px;
	top: 0;
	width: 4px;
	height: 100%;
	background: var(--gr-accent);
	border-radius: var(--gr-pill);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.gr-bookmarked .gr-bookmark-indicator { opacity: 1; }

/* --- ANIMATIONS --- */
@keyframes grFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes grFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes grSlideUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes grPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
@keyframes grSpin {
	to { transform: rotate(360deg); }
}

/* --- AUTO SCROLL INDICATOR --- */
.gr-auto-scroll-indicator {
	position: fixed;
	top: 64px;
	right: 16px;
	z-index: 800;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(16px);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-pill);
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gr-accent);
	display: none;
	align-items: center;
	gap: 8px;
	box-shadow: var(--gr-shadow);
}
.gr-auto-scroll-indicator.is-active { display: inline-flex; }
.gr-auto-scroll-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gr-accent);
	animation: grPulse 1.5s ease-in-out infinite;
}

/* ==========================================================================
   OBJECTIVE 8 — ONBOARDING TOOLTIP (updated design)
   ========================================================================== */
.gr-onboarding {
	position: fixed;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 750;
	background: var(--gr-glass-strong);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius);
	padding: 16px 20px;
	max-width: 340px;
	width: calc(100% - 32px);
	box-shadow: var(--gr-shadow);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s var(--gr-ease-out);
}
@media (max-width: 768px) {
	.gr-onboarding {
		bottom: calc(var(--gr-mobile-nav-h) + 24px);
	}
}
.gr-onboarding.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.gr-onboarding-text {
	font-size: 13px;
	color: var(--gr-text-soft);
	line-height: 1.5;
	margin-bottom: 12px;
}
.gr-onboarding-text strong { color: var(--gr-accent); }
.gr-onboarding-dismiss {
	font-size: 12px;
	font-weight: 700;
	color: var(--gr-accent);
	padding: 6px 14px;
	border-radius: var(--gr-pill);
	background: var(--gr-accent-bg);
	transition: background var(--gr-transition);
}
.gr-onboarding-dismiss:hover { background: rgba(255,122,38,0.2); }

/* --- 20-20-20 REMINDER --- */
.gr-eye-reminder {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	z-index: 8000;
	background: var(--gr-surface-solid);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius);
	padding: 40px 32px;
	text-align: center;
	max-width: 360px;
	box-shadow: 0 40px 100px rgba(0,0,0,0.6);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s var(--gr-ease-out);
}
.gr-eye-reminder.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.gr-eye-reminder-icon { font-size: 48px; margin-bottom: 16px; }
.gr-eye-reminder-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.gr-eye-reminder-text { font-size: 14px; color: var(--gr-text-muted); margin-bottom: 20px; line-height: 1.6; }

/* --- PRINT FRIENDLY --- */
@media print {
	.gr-topbar, .gr-mobile-nav, .gr-settings-panel, .gr-settings-overlay,
	.gr-tts-player, .gr-selection-popup, .gr-chapter-drawer, .gr-chapter-drawer-overlay,
	.gr-comment-drawer, .gr-comment-drawer-overlay, .gr-scroll-progress,
	.gr-onboarding, .gr-auto-scroll-indicator, .gr-hero { display: none !important; }
	.gr-reader-body { background: #fff !important; color: #000 !important; }
	.gr-reader-container { max-width: 100% !important; padding: 0 !important; font-size: 12pt !important; }
}

/* ========================================================================
   SPRINT 2 — PARAGRAPH INLINE COMMENT ICONS
   ======================================================================== */
.gr-reader-container [data-p] {
	position: relative;
}
.gr-p-comment-btn {
	position: absolute;
	right: -44px;
	top: 4px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent;
	border: 1.5px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-muted);
	opacity: 0.45;
	transform: scale(1);
	transition: opacity 0.2s ease, transform 0.2s var(--gr-ease-spring), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
}
.gr-p-comment-btn svg { width: 15px; height: 15px; pointer-events: none; }
.gr-p-comment-btn .gr-p-comment-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--gr-accent);
	color: #000;
	font-size: 9px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
	pointer-events: none;
}
/* Show on paragraph hover (desktop) */
.gr-reader-container [data-p]:hover .gr-p-comment-btn,
.gr-p-comment-btn:focus-visible {
	opacity: 1;
	transform: scale(1.05);
}
/* Always show if has comments */
.gr-p-comment-btn.has-comments {
	opacity: 1;
	transform: scale(1);
	border-color: rgba(255,122,38,0.35);
	background: rgba(255,122,38,0.06);
	color: var(--gr-accent);
}
.gr-p-comment-btn.has-comments:hover {
	opacity: 1;
	background: var(--gr-accent-bg);
	border-color: var(--gr-accent);
	color: var(--gr-accent);
	transform: scale(1.1);
}
/* Mobile */
@media (max-width: 768px) {
	.gr-p-comment-btn {
		right: -6px;
		top: -2px;
		width: 26px;
		height: 26px;
		opacity: 0.7;
	}
	.gr-reader-container [data-p]:hover .gr-p-comment-btn { opacity: 0.85; }
	.gr-p-comment-btn.has-comments { opacity: 1; right: -6px; color: var(--gr-accent); }
}
/* Active paragraph comment indicator line */
.gr-reader-container [data-p].gr-has-p-comments::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 0;
	bottom: 0;
	width: 3px;
	border-radius: var(--gr-pill);
	background: var(--gr-accent);
	opacity: 0.3;
}
@media (max-width: 768px) {
	.gr-reader-container [data-p].gr-has-p-comments::after { right: -4px; width: 2px; }
}

/* ========================================================================
   SPRINT 2 — COMMENT REACTIONS
   ======================================================================== */
.gr-comment-reactions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.gr-comment-reaction-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	font-size: 12px;
	color: var(--gr-text-muted);
	transition: all var(--gr-transition);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.gr-comment-reaction-btn:hover { border-color: var(--gr-border-strong); color: var(--gr-text-soft); background: rgba(255,255,255,0.04); }
.gr-comment-reaction-btn.is-reacted { border-color: var(--gr-accent); color: var(--gr-accent); background: rgba(255,122,38,0.08); }
.gr-comment-reaction-btn .gr-reaction-emoji { font-size: 13px; line-height: 1; }
.gr-comment-reaction-btn .gr-reaction-count { font-weight: 700; font-size: 11px; }
.gr-comment-reaction-add {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px dashed var(--gr-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--gr-text-muted);
	cursor: pointer;
	transition: all var(--gr-transition);
}
.gr-comment-reaction-add:hover { border-color: var(--gr-border-strong); color: var(--gr-text-soft); }
.gr-comment-reply-indicator {
	font-size: 11px;
	color: var(--gr-text-muted);
	padding: 6px 0 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.gr-comment-reply-indicator svg { width: 12px; height: 12px; }

/* ========================================================================
   SPRINT 2 — BOTTOM CHAPTER COMMENTS SECTION
   ======================================================================== */
.gr-bottom-comments {
	background: var(--gr-bg-raised);
	border-top: 1px solid var(--gr-border);
	padding: 0 0 calc(40px + var(--gr-mobile-nav-h));
}
.gr-bottom-comments-inner {
	max-width: var(--gr-max-width);
	margin: 0 auto;
	padding: 48px 24px;
}
@media (max-width: 640px) {
	.gr-bottom-comments-inner { padding: 36px 18px; }
}
.gr-bottom-comments-header {
	margin-bottom: 28px;
}
.gr-bottom-comments-title {
	font-family: var(--gr-font-ui);
	font-size: 20px;
	font-weight: 800;
	color: var(--gr-text);
	display: flex;
	align-items: center;
	gap: 10px;
}
.gr-bottom-comments-title svg { color: var(--gr-accent); flex-shrink: 0; }
.gr-bottom-comments-count {
	font-size: 14px;
	font-weight: 500;
	color: var(--gr-text-muted);
}
/* Bottom comment form */
.gr-bottom-comment-form {
	margin-bottom: 32px;
}
.gr-bottom-comment-form-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.gr-bottom-comment-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--gr-bg-float);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.gr-bottom-comment-form-body { flex: 1; min-width: 0; }
.gr-bottom-comment-textarea {
	width: 100%;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
	color: var(--gr-text);
	resize: vertical;
	min-height: 80px;
	max-height: 240px;
	outline: none;
	font-family: var(--gr-font-ui);
	transition: border-color var(--gr-transition);
	line-height: 1.6;
}
.gr-bottom-comment-textarea:focus { border-color: var(--gr-accent); }
.gr-bottom-comment-textarea::placeholder { color: var(--gr-text-muted); }
.gr-bottom-comment-form-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	gap: 10px;
}
.gr-bottom-comment-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: var(--gr-pill);
	background: var(--gr-accent);
	color: #0b0b0b;
	font-size: 13px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-bottom-comment-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--gr-accent-glow); }
.gr-bottom-comment-submit:active { transform: scale(0.97); }
.gr-bottom-comment-submit svg { width: 15px; height: 15px; }
.gr-bottom-comment-login {
	padding: 24px;
	text-align: center;
	border: 1px dashed var(--gr-border);
	border-radius: var(--gr-radius);
	margin-bottom: 28px;
}
.gr-bottom-comment-login p { font-size: 14px; color: var(--gr-text-muted); }
.gr-bottom-comment-login a { color: var(--gr-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Bottom comment list */
.gr-bottom-comment-list { }
.gr-bottom-comment-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 0;
	font-size: 13px;
	color: var(--gr-text-muted);
}
.gr-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--gr-border);
	border-top-color: var(--gr-accent);
	border-radius: 50%;
	animation: grSpin 0.7s linear infinite;
}
.gr-bottom-comment-card {
	padding: 20px 0;
	border-bottom: 1px solid var(--gr-border);
}
.gr-bottom-comment-card:last-child { border-bottom: none; }
.gr-bottom-comment-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.gr-bottom-comment-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--gr-bg-float);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
}
.gr-bottom-comment-author { font-size: 14px; font-weight: 700; color: var(--gr-text); }
.gr-bottom-comment-date { font-size: 11px; color: var(--gr-text-muted); }
.gr-bottom-comment-content {
	font-size: 14px;
	line-height: 1.7;
	color: var(--gr-text-soft);
	font-family: var(--gr-font-ui);
}
.gr-bottom-comment-content.is-spoiler {
	filter: blur(6px);
	cursor: pointer;
	transition: filter 0.3s ease;
	user-select: none;
}
.gr-bottom-comment-content.is-spoiler:hover { filter: blur(3px); }
.gr-bottom-comment-content.is-spoiler.is-revealed { filter: none; user-select: text; }
.gr-bottom-comment-spoiler-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	color: var(--gr-warn);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}
.gr-bottom-comment-spoiler-badge svg { width: 12px; height: 12px; }
.gr-bottom-comment-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
.gr-bottom-comment-action {
	font-size: 12px;
	color: var(--gr-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	transition: color var(--gr-transition);
	border: none;
	background: none;
	font-family: var(--gr-font-ui);
	-webkit-tap-highlight-color: transparent;
}
.gr-bottom-comment-action:hover { color: var(--gr-text-soft); }
.gr-bottom-comment-action svg { width: 14px; height: 14px; }
.gr-bottom-comment-action.is-liked { color: var(--gr-accent); }
.gr-bottom-comment-quoted-text {
	padding: 6px 12px;
	margin-bottom: 8px;
	border-left: 3px solid var(--gr-accent);
	border-radius: 0 var(--gr-radius-xs) var(--gr-radius-xs) 0;
	background: rgba(255,122,38,0.05);
	font-size: 12px;
	font-style: italic;
	color: var(--gr-text-muted);
	line-height: 1.5;
}

body.single-gm_chapter .gr-comment-drawer {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

body.single-gm_chapter .gr-comment-drawer-handle {
	flex: 0 0 auto;
}

body.single-gm_chapter .gr-comment-header {
	flex: 0 0 auto !important;
}

body.single-gm_chapter .gr-comment-body {
	flex: 1 1 auto !important;
	min-height: 80px !important;
	max-height: none !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	-webkit-overflow-scrolling: touch !important;
}

body.single-gm_chapter .gr-comment-input-area {
	display: block !important;
	flex: 0 0 auto !important;
	position: relative !important;
	z-index: 5 !important;
	background: var(--gr-surface-solid, #12151f) !important;
	border-top: 1px solid rgba(255,255,255,.1) !important;
	box-shadow: 0 -8px 24px rgba(0,0,0,.3) !important;
	padding: 12px 20px 16px !important;
	padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* ========================================================================
   SPRINT 2 — TEXTAREA & COMPOSER POLISH
   ======================================================================== */

/* --- Drawer textarea premium dark --- */
.gr-comment-input {
	background: rgba(255,255,255,0.04) !important;
	border: 1.5px solid var(--gr-border) !important;
	border-radius: 16px !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	color: var(--gr-text) !important;
	resize: none !important;
	min-height: 44px !important;
	max-height: 120px !important;
	outline: none !important;
	font-family: var(--gr-font-ui) !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.gr-comment-input::-webkit-scrollbar { width: 4px; }
.gr-comment-input::-webkit-scrollbar-track { background: transparent; }
.gr-comment-input::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.12);
	border-radius: 4px;
}
.gr-comment-input:focus {
	border-color: var(--gr-accent) !important;
	box-shadow: 0 0 0 3px rgba(255,122,38,0.15), 0 0 20px rgba(255,122,38,0.08) !important;
	background: rgba(255,255,255,0.06) !important;
}
.gr-comment-input::placeholder {
	color: var(--gr-text-muted) !important;
	font-style: italic;
}

/* --- Send button vertical alignment + hover polish --- */
.gr-comment-input-wrap {
	display: flex !important;
	gap: 10px !important;
	align-items: flex-end !important;
}
.gr-comment-send-btn {
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: var(--gr-accent) !important;
	color: #0b0b0b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	transition: transform 0.2s var(--gr-ease-spring), box-shadow 0.25s ease, opacity 0.2s ease !important;
	margin-bottom: 1px;
}
.gr-comment-send-btn:hover:not(:disabled) {
	transform: scale(1.08) !important;
	box-shadow: 0 4px 16px var(--gr-accent-glow) !important;
}
.gr-comment-send-btn:active:not(:disabled) {
	transform: scale(0.92) !important;
}
.gr-comment-send-btn:disabled {
	cursor: not-allowed !important;
}

/* --- Spacing between quick reactions and toolbar/textarea --- */
.gr-comment-quick-reactions {
	padding: 4px 0 10px !important;
	gap: 8px !important;
}
.gr-comment-input-toolbar {
	margin-bottom: 10px !important;
}

/* --- Bottom comment textarea match --- */
.gr-bottom-comment-textarea {
	background: rgba(255,255,255,0.04) !important;
	border: 1.5px solid var(--gr-border) !important;
	border-radius: 16px !important;
	padding: 14px 18px !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.gr-bottom-comment-textarea::-webkit-scrollbar { width: 4px; }
.gr-bottom-comment-textarea::-webkit-scrollbar-track { background: transparent; }
.gr-bottom-comment-textarea::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.12);
	border-radius: 4px;
}
.gr-bottom-comment-textarea:focus {
	border-color: var(--gr-accent) !important;
	box-shadow: 0 0 0 3px rgba(255,122,38,0.15), 0 0 20px rgba(255,122,38,0.08) !important;
	background: rgba(255,255,255,0.06) !important;
}

/* Reader OS — Bottom Sheet Polish + Dark Scrollbars */
body.single-gm_chapter .gr-settings-panel {
	max-width: min(1080px, calc(100vw - 64px)) !important;
	width: min(1080px, calc(100vw - 64px)) !important;
	max-height: 88vh !important;
	border-radius: 24px 24px 0 0 !important;
	background: rgba(18, 21, 31, .96) !important;
}

body.single-gm_chapter .gr-settings-body {
	padding: 28px 34px 34px !important;
}

body.single-gm_chapter .gr-theme-grid {
	grid-template-columns: repeat(6, minmax(86px, 1fr)) !important;
	gap: 18px !important;
}

body.single-gm_chapter .gr-font-grid {
	grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
	gap: 16px !important;
}

/* Comment sheet width balance */
body.single-gm_chapter .gr-comment-drawer {
	max-width: min(920px, calc(100vw - 64px)) !important;
	width: min(920px, calc(100vw - 64px)) !important;
	max-height: 82vh !important;
	border-radius: 24px 24px 0 0 !important;
}

/* Premium dark scrollbars */
body.single-gm_chapter .gr-settings-panel,
body.single-gm_chapter .gr-settings-body,
body.single-gm_chapter .gr-comment-drawer,
body.single-gm_chapter .gr-comment-body,
body.single-gm_chapter .gr-drawer-list {
	scrollbar-width: thin;
	scrollbar-color: rgba(255,122,38,.65) rgba(255,255,255,.06);
}

body.single-gm_chapter .gr-settings-panel::-webkit-scrollbar,
body.single-gm_chapter .gr-settings-body::-webkit-scrollbar,
body.single-gm_chapter .gr-comment-drawer::-webkit-scrollbar,
body.single-gm_chapter .gr-comment-body::-webkit-scrollbar,
body.single-gm_chapter .gr-drawer-list::-webkit-scrollbar {
	width: 9px;
}

body.single-gm_chapter .gr-settings-panel::-webkit-scrollbar-track,
body.single-gm_chapter .gr-settings-body::-webkit-scrollbar-track,
body.single-gm_chapter .gr-comment-drawer::-webkit-scrollbar-track,
body.single-gm_chapter .gr-comment-body::-webkit-scrollbar-track,
body.single-gm_chapter .gr-drawer-list::-webkit-scrollbar-track {
	background: rgba(255,255,255,.04);
	border-radius: 999px;
}

body.single-gm_chapter .gr-settings-panel::-webkit-scrollbar-thumb,
body.single-gm_chapter .gr-settings-body::-webkit-scrollbar-thumb,
body.single-gm_chapter .gr-comment-drawer::-webkit-scrollbar-thumb,
body.single-gm_chapter .gr-comment-body::-webkit-scrollbar-thumb,
body.single-gm_chapter .gr-drawer-list::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(255,122,38,.9), rgba(255,122,38,.45));
	border-radius: 999px;
	border: 2px solid rgba(18,21,31,.9);
}

body.single-gm_chapter .gr-settings-panel::-webkit-scrollbar-thumb:hover,
body.single-gm_chapter .gr-settings-body::-webkit-scrollbar-thumb:hover,
body.single-gm_chapter .gr-comment-drawer::-webkit-scrollbar-thumb:hover,
body.single-gm_chapter .gr-comment-body::-webkit-scrollbar-thumb:hover,
body.single-gm_chapter .gr-drawer-list::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ff9b5a, #ff7a26);
}

@media (max-width: 768px) {
	body.single-gm_chapter .gr-settings-panel,
	body.single-gm_chapter .gr-comment-drawer {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 86vh !important;
		border-radius: 22px 22px 0 0 !important;
	}

	body.single-gm_chapter .gr-settings-body {
		padding: 22px 18px 28px !important;
	}

	body.single-gm_chapter .gr-theme-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 12px !important;
	}

	body.single-gm_chapter .gr-font-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
}

/* ========================================================================
   READING MODES — IMMERSIVE / RULER / SINGLE-KEY
   ======================================================================== */

/* Immersive fullscreen */
.gr-immersive .gr-topbar {
	transform: translateY(-100%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: transform 0.4s var(--gr-ease-out), opacity 0.3s ease !important;
}
.gr-immersive .gr-mobile-nav {
	transform: translateY(100%) !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.gr-immersive .gr-floating-settings-btn,
.gr-immersive .gr-onboarding,
.gr-immersive .gr-auto-scroll-indicator {
	display: none !important;
}
body.single-gm_chapter.gr-immersive-body #wpadminbar {
	display: none !important;
}
body.single-gm_chapter.gr-immersive-body .gr-scroll-progress {
	top: 0 !important;
}
/* Hover edge zones to briefly reveal controls */
.gr-immersive .gr-topbar-reveal-zone {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 24px;
	z-index: 899;
}
.gr-immersive .gr-topbar-reveal-zone:hover ~ .gr-topbar,
.gr-immersive .gr-topbar:hover {
	transform: translateY(0) !important;
	opacity: 1 !important;
	pointer-events: all !important;
}

/* Reading Ruler */
.gr-reading-ruler {
	position: fixed;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 700;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, top 0.05s linear;
	background: linear-gradient(90deg, transparent 5%, var(--gr-accent) 25%, var(--gr-accent) 75%, transparent 95%);
	box-shadow: 0 0 10px var(--gr-accent-glow), 0 0 2px var(--gr-accent);
}
.gr-reading-ruler.is-active {
	opacity: 0.4;
	visibility: visible;
}
/* Fade ruler more on light themes */
.gr-theme-sepia .gr-reading-ruler.is-active,
.gr-theme-paper .gr-reading-ruler.is-active {
	opacity: 0.25;
}

/* Immersive exit hint */
.gr-immersive-hint {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9000;
	padding: 12px 24px;
	border-radius: var(--gr-pill);
	background: var(--gr-glass-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--gr-border-strong);
	color: var(--gr-text-soft);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--gr-font-ui);
	opacity: 0;
	animation: grImmersiveHint 3s ease forwards;
	pointer-events: none;
}
@keyframes grImmersiveHint {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
	15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* Reader OS — Immersive + Reading Ruler Fix */
body.single-gm_chapter.gr-immersive-body #masthead,
body.single-gm_chapter.gr-immersive-body .site-header,
body.single-gm_chapter.gr-immersive-body header,
body.single-gm_chapter.gr-immersive-body footer,
body.single-gm_chapter.gr-immersive-body .site-footer,
body.single-gm_chapter.gr-immersive-body #wpadminbar {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

body.single-gm_chapter.gr-immersive-body {
	background: var(--gr-reader-bg, #0a0b10) !important;
}

body.single-gm_chapter.gr-immersive-body .gr-hero,
body.single-gm_chapter.gr-immersive-body .gr-bottom-comments,
body.single-gm_chapter.gr-immersive-body .gr-chapter-end,
body.single-gm_chapter.gr-immersive-body .gr-floating-settings-btn,
body.single-gm_chapter.gr-immersive-body .gr-mobile-nav {
	display: none !important;
}

body.single-gm_chapter.gr-immersive-body .gr-topbar {
	display: none !important;
}

body.single-gm_chapter.gr-immersive-body .gr-reader-container {
	padding-top: 48px !important;
	min-height: 100vh !important;
}

.gr-reading-ruler {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	top: 50vh;
	height: 3px !important;
	z-index: 9998 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	background: linear-gradient(90deg, transparent 4%, rgba(255,122,38,.9) 50%, transparent 96%) !important;
	box-shadow: 0 0 18px rgba(255,122,38,.55) !important;
}

.gr-reading-ruler.is-active {
	opacity: .55 !important;
	visibility: visible !important;
}

/* ========================================================================
   TTS SETTINGS PLAYER
   ======================================================================== */
.gr-tts-settings-player {
	background: rgba(0,0,0,0.25);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius);
	padding: 20px 16px;
	text-align: center;
}
.gr-tts-settings-status {
	font-size: 13px;
	font-weight: 700;
	color: var(--gr-text-muted);
	margin-bottom: 4px;
	letter-spacing: 0.03em;
}
.gr-tts-settings-status.is-playing {
	color: var(--gr-accent);
}
.gr-tts-settings-status.is-paused {
	color: var(--gr-warn);
}
.gr-tts-settings-progress {
	font-size: 11px;
	color: var(--gr-text-muted);
	margin-bottom: 14px;
	min-height: 16px;
}
.gr-tts-settings-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.gr-tts-settings-btn {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: transform 0.2s var(--gr-ease-spring), background 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.gr-tts-settings-btn svg { pointer-events: none; }
.gr-tts-settings-btn--sm {
	width: 40px;
	height: 40px;
	background: rgba(255,255,255,0.06);
	color: var(--gr-text-soft);
}
.gr-tts-settings-btn--sm svg { width: 18px; height: 18px; }
.gr-tts-settings-btn--sm:hover { background: rgba(255,255,255,0.12); color: var(--gr-text); }
.gr-tts-settings-btn--sm:active { transform: scale(0.9); }
.gr-tts-settings-btn--stop { color: var(--gr-text-muted); }
.gr-tts-settings-btn--play {
	width: 56px;
	height: 56px;
	background: var(--gr-accent);
	color: #0b0b0b;
	box-shadow: 0 4px 20px var(--gr-accent-glow);
}
.gr-tts-settings-btn--play svg { width: 24px; height: 24px; }
.gr-tts-settings-btn--play:hover { transform: scale(1.08); box-shadow: 0 8px 28px var(--gr-accent-glow); }
.gr-tts-settings-btn--play:active { transform: scale(0.93); }

/* Voice Select — dark themed */
.gr-tts-voice-wrap {
	position: relative;
}
.gr-tts-voice-select {
	width: 100%;
	padding: 10px 36px 10px 14px;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius-sm);
	color: var(--gr-text);
	font-size: 14px;
	font-family: var(--gr-font-ui);
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color-scheme: dark;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237b839a' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	transition: border-color var(--gr-transition);
}
.gr-tts-voice-select:focus { border-color: var(--gr-accent); }
.gr-tts-voice-select option {
	background: #1a1d2a;
	color: #e0e0e0;
}
.gr-tts-no-voice {
	font-size: 12px;
	color: var(--gr-text-muted);
	margin-top: 8px;
	font-style: italic;
}
.gr-tts-try-voice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 7px 16px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	background: rgba(255,255,255,0.04);
	color: var(--gr-text-soft);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--gr-font-ui);
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-tts-try-voice:hover { background: rgba(255,255,255,0.1); border-color: var(--gr-accent); color: var(--gr-accent); }
.gr-tts-try-voice:active { transform: scale(0.95); }

/* ========================================================================
   AMBIENT PRESETS & ENHANCED MIXER
   ======================================================================== */
.gr-ambient-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gr-ambient-preset {
	padding: 8px 14px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	background: rgba(255,255,255,0.03);
	color: var(--gr-text-soft);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--gr-font-ui);
	cursor: pointer;
	transition: all var(--gr-transition);
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.gr-ambient-preset:hover { background: rgba(255,255,255,0.08); border-color: var(--gr-border-strong); }
.gr-ambient-preset.is-active {
	border-color: var(--gr-accent);
	background: var(--gr-accent-bg);
	color: var(--gr-accent);
	box-shadow: 0 0 12px var(--gr-accent-glow);
}
.gr-ambient-preset:active { transform: scale(0.95); }

.gr-ambient-pct {
	font-size: 11px;
	font-weight: 700;
	color: var(--gr-text-muted);
	min-width: 32px;
	text-align: right;
	font-family: var(--gr-font-ui);
	font-variant-numeric: tabular-nums;
}
.gr-ambient-item .gr-ambient-pct.is-active {
	color: var(--gr-accent);
}

.gr-ambient-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	background: rgba(255,255,255,0.04);
	color: var(--gr-text-muted);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--gr-font-ui);
	cursor: pointer;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-ambient-reset-btn:hover { background: rgba(255,255,255,0.1); color: var(--gr-text-soft); border-color: var(--gr-border-strong); }
.gr-ambient-reset-btn:active { transform: scale(0.95); }

/* Ambient mixer enhanced row */
.gr-ambient-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.gr-ambient-item .gr-ambient-slider {
	flex: 1;
	min-width: 0;
}
@media (max-width: 640px) {
	.gr-ambient-presets { gap: 6px; }
	.gr-ambient-preset { font-size: 11px; padding: 6px 12px; }
}

@media (max-width: 768px) {
	body.single-gm_chapter .gr-floating-settings-btn {
		display: none !important;
	}
}

/* ========================================================================
   TTS WORD/SENTENCE HIGHLIGHT
   ======================================================================== */
.gr-tts-w {
	transition: background 0.1s ease, box-shadow 0.1s ease;
	border-radius: 2px;
	padding: 0 1px;
}
.gr-tts-w-active {
	background: rgba(255,122,38,0.25);
	box-shadow: 0 0 8px rgba(255,122,38,0.2);
	color: var(--gr-reader-text);
}
.gr-tts-sent {
	transition: background 0.15s ease;
	border-radius: 2px;
}
.gr-tts-sent-active {
	background: rgba(255,122,38,0.15);
}
/* Light themes: softer highlight */
.gr-theme-sepia .gr-tts-w-active,
.gr-theme-paper .gr-tts-w-active {
	background: rgba(255,122,38,0.2);
	box-shadow: 0 0 6px rgba(255,122,38,0.15);
}

/* ========================================================================
   NOTE MODAL (POST-IT)
   ======================================================================== */
.gr-note-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 5500;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gr-note-modal-overlay.is-open { opacity: 1; visibility: visible; }
.gr-note-card {
	width: 420px;
	max-width: 100%;
	background: var(--gr-surface-solid);
	border: 1px solid var(--gr-border-strong);
	border-radius: var(--gr-radius);
	padding: 0;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,0.5);
	animation: grSlideUp 0.3s var(--gr-ease-out) both;
}
.gr-note-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--gr-border);
}
.gr-note-card-icon { font-size: 20px; }
.gr-note-card-header h4 {
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--gr-font-ui);
	color: var(--gr-text);
}
.gr-note-card-close {
	width: 32px;
	height: 32px;
	border-radius: var(--gr-radius-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-muted);
	transition: background var(--gr-transition);
}
.gr-note-card-close:hover { background: rgba(255,255,255,0.08); }
.gr-note-card-quote {
	margin: 16px 20px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--gr-accent);
	border-radius: 0 var(--gr-radius-xs) var(--gr-radius-xs) 0;
	background: rgba(255,122,38,0.06);
	font-size: 12px;
	color: var(--gr-text-soft);
	font-style: italic;
	line-height: 1.5;
	max-height: 80px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.gr-note-card-textarea {
	width: calc(100% - 40px);
	margin: 14px 20px;
	background: rgba(255,255,255,0.04);
	border: 1.5px solid var(--gr-border);
	border-radius: var(--gr-radius-sm);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--gr-text);
	font-family: var(--gr-font-ui);
	resize: vertical;
	min-height: 80px;
	max-height: 200px;
	outline: none;
	transition: border-color var(--gr-transition);
	color-scheme: dark;
}
.gr-note-card-textarea:focus { border-color: var(--gr-accent); }
.gr-note-card-textarea::placeholder { color: var(--gr-text-muted); }
.gr-note-card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 20px 16px;
}
.gr-note-card-cancel {
	padding: 8px 16px;
	border-radius: var(--gr-pill);
	font-size: 13px;
	font-weight: 600;
	color: var(--gr-text-muted);
	transition: color var(--gr-transition);
	font-family: var(--gr-font-ui);
}
.gr-note-card-cancel:hover { color: var(--gr-text-soft); }
.gr-note-card-save {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--gr-pill);
	background: var(--gr-accent);
	color: #0b0b0b;
	font-size: 13px;
	font-weight: 700;
	font-family: var(--gr-font-ui);
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-note-card-save:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--gr-accent-glow); }
.gr-note-card-save:active { transform: scale(0.96); }

/* Note marker on text */
.gr-hl-note {
	background: rgba(255,122,38,0.12);
	border-bottom: 1.5px dashed rgba(255,122,38,0.5);
	cursor: help;
}

/* ========================================================================
   OKUMA DEFTERİM — READER LIBRARY PANEL
   ======================================================================== */
.gr-library-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gr-library-overlay.is-open { opacity: 1; visibility: visible; }

.gr-library-panel {
	position: fixed;
	z-index: 1001;
	left: 50%;
	bottom: 0;
	width: 100%;
	max-width: min(860px, calc(100vw - 64px));
	max-height: 82vh;
	border-radius: 24px 24px 0 0;
	transform: translate(-50%, 100%);
	background: rgba(18, 21, 31, .96);
	box-shadow: 0 -20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.4s var(--gr-ease-out);
}
.gr-library-panel.is-open { transform: translate(-50%, 0); }
@media (max-width: 768px) {
	.gr-library-panel {
		max-width: 100%;
		max-height: 86vh;
		border-radius: 22px 22px 0 0;
	}
}

.gr-library-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--gr-border);
	flex-shrink: 0;
}
.gr-library-header h3 {
	font-size: 16px;
	font-weight: 700;
}

.gr-library-tabs {
	display: flex;
	gap: 0;
	padding: 0 16px;
	border-bottom: 1px solid var(--gr-border);
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
}
.gr-library-tabs::-webkit-scrollbar { display: none; }
.gr-library-tab {
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--gr-text-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: all var(--gr-transition);
	-webkit-tap-highlight-color: transparent;
}
.gr-library-tab:hover { color: var(--gr-text-soft); }
.gr-library-tab.is-active {
	color: var(--gr-accent);
	border-bottom-color: var(--gr-accent);
}

.gr-library-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 16px 20px;
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	scrollbar-width: thin;
	scrollbar-color: rgba(255,122,38,.65) rgba(255,255,255,.06);
}
.gr-library-section { display: none; }
.gr-library-section.is-active { display: block; }

.gr-lib-card {
	padding: 16px;
	margin-bottom: 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--gr-border);
	border-radius: var(--gr-radius-sm);
	transition: border-color var(--gr-transition);
}
.gr-lib-card:hover { border-color: var(--gr-border-strong); }
.gr-lib-card-meta {
	font-size: 11px;
	color: var(--gr-text-muted);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.gr-lib-card-meta strong {
	color: var(--gr-text-soft);
	font-weight: 600;
}
.gr-lib-card-text {
	font-size: 13px;
	color: var(--gr-text-soft);
	line-height: 1.6;
	font-style: italic;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding-left: 10px;
	border-left: 2px solid var(--gr-accent);
}
.gr-lib-card-note {
	font-size: 13px;
	color: var(--gr-text);
	line-height: 1.5;
	margin-bottom: 8px;
	padding: 8px 12px;
	background: rgba(255,122,38,0.06);
	border-radius: var(--gr-radius-xs);
}
.gr-lib-card-color {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 6px;
	border: 1px solid rgba(255,255,255,0.15);
}
.gr-lib-card-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
}
.gr-lib-card-btn {
	font-size: 11px;
	font-weight: 600;
	color: var(--gr-text-muted);
	padding: 5px 12px;
	border-radius: var(--gr-pill);
	border: 1px solid var(--gr-border);
	background: none;
	transition: all var(--gr-transition);
	font-family: var(--gr-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.gr-lib-card-btn:hover { color: var(--gr-text-soft); border-color: var(--gr-border-strong); }
.gr-lib-card-btn--del:hover { color: var(--gr-error); border-color: var(--gr-error); }
.gr-lib-card-btn svg { width: 12px; height: 12px; }

/* Writer Studio Blocks — Reader'da birebir görünüm */
.gr-reader-container .gm-author-note,
.gr-reader-container .gm-writer-note,
.gr-reader-container [data-block-type="author-note"],
.gr-reader-container [data-type="author-note"],
.gr-reader-container [data-gm-block="author-note"] {
	display: none !important;
}

/* Genel gm-block */
.gr-reader-container .gm-block {
	width: 100%;
	margin: 2.2em 0;
	box-sizing: border-box;
}

/* Zaman atlaması / geçiş / ayraç: editördeki gibi çizgili chip */
.gr-reader-container .gm-block[data-block-type="time-jump"],
.gr-reader-container .gm-block[data-block-type="scene-separator"],
.gr-reader-container .gm-block[data-block-type="separator"],
.gr-reader-container .gm-block[data-block-type="transition"] {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 2.4em 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--gr-font-ui);
	text-align: center;
}

.gr-reader-container .gm-block[data-block-type="time-jump"]::before,
.gr-reader-container .gm-block[data-block-type="time-jump"]::after,
.gr-reader-container .gm-block[data-block-type="scene-separator"]::before,
.gr-reader-container .gm-block[data-block-type="scene-separator"]::after,
.gr-reader-container .gm-block[data-block-type="separator"]::before,
.gr-reader-container .gm-block[data-block-type="separator"]::after,
.gr-reader-container .gm-block[data-block-type="transition"]::before,
.gr-reader-container .gm-block[data-block-type="transition"]::after {
	content: "";
	height: 1px;
	flex: 1;
	background: rgba(255,255,255,.16);
}

.gr-reader-container .gm-time-label,
.gr-reader-container .gm-block-label,
.gr-reader-container .gm-separator-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255,122,38,.42);
	background: rgba(255,122,38,.11);
	color: var(--gr-accent-soft);
	font-family: var(--gr-font-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	white-space: nowrap;
}

/* Alıntı: Writer Studio’daki kutu hissi */
.gr-reader-container .gm-block[data-block-type="quote"],
.gr-reader-container .gm-block[data-block-type="blockquote"] {
	position: relative;
	padding: 22px 26px;
	border-radius: 16px;
	border: 1px solid rgba(255,122,38,.32);
	border-left: 4px solid var(--gr-accent);
	background: rgba(255,255,255,.055);
	box-shadow: none;
	font-style: italic;
}

.gr-reader-container .gm-block[data-block-type="quote"]::before,
.gr-reader-container .gm-block[data-block-type="blockquote"]::before {
	content: "“";
	position: absolute;
	top: 8px;
	left: 18px;
	font-size: 52px;
	line-height: 1;
	color: rgba(255,122,38,.28);
	font-family: Georgia, serif;
	pointer-events: none;
}

.gr-reader-container .gm-block[data-block-type="quote"] > *,
.gr-reader-container .gm-block[data-block-type="blockquote"] > * {
	position: relative;
	z-index: 1;
}

/* İç ses */
.gr-reader-container .gm-block[data-block-type="inner-voice"] {
	padding: 20px 24px;
	border-radius: 16px;
	border: 1px solid rgba(180,160,255,.28);
	background: rgba(180,160,255,.055);
	font-style: italic;
}

/* Flashback */
.gr-reader-container .gm-block[data-block-type="flashback"] {
	padding: 22px 24px;
	border-radius: 16px;
	border: 1px solid rgba(148,163,184,.25);
	background: rgba(148,163,184,.055);
	opacity: .96;
}

/* Etiket yazıları okuyucuda çıkmasın */
.gr-reader-container .gm-block-type-label {
	display: none !important;
}

@media (max-width: 640px) {
	.gr-reader-container .gm-block[data-block-type="quote"],
	.gr-reader-container .gm-block[data-block-type="blockquote"],
	.gr-reader-container .gm-block[data-block-type="inner-voice"],
	.gr-reader-container .gm-block[data-block-type="flashback"] {
		padding: 18px;
		border-radius: 14px;
	}

	.gr-reader-container .gm-time-label,
	.gr-reader-container .gm-block-label,
	.gr-reader-container .gm-separator-label {
		font-size: 11px;
		padding: 7px 14px;
	}
}

/* Reader Wiki Mentions */
.gr-wiki-mention {
	display: inline;
	color: var(--gr-reader-text);
	text-decoration: underline;
	text-decoration-color: rgba(255,122,38,.7);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	cursor: pointer;
	font-weight: 700;
	transition: color .2s ease, text-decoration-color .2s ease, text-shadow .2s ease;
}

.gr-wiki-mention:hover {
	color: var(--gr-accent-soft);
	text-decoration-color: var(--gr-accent);
	text-shadow: 0 0 18px rgba(255,122,38,.22);
}

.gr-wiki-card-overlay {
	position: fixed;
	inset: 0;
	z-index: 5600;
	background: rgba(0,0,0,.56);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.gr-wiki-card-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.gr-wiki-card {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 5601;
	width: min(620px, calc(100vw - 32px));
	transform: translate(-50%, 110%);
	border-radius: 24px 24px 0 0;
	background: rgba(18,21,31,.98);
	border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 -24px 80px rgba(0,0,0,.65);
	overflow: hidden;
	transition: transform .35s var(--gr-ease-out);
}

.gr-wiki-card.is-open {
	transform: translate(-50%, 0);
}

.gr-wiki-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.gr-wiki-card__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gr-accent-soft);
	margin-bottom: 3px;
}

.gr-wiki-card__title {
	font-size: 20px;
	font-weight: 900;
	color: var(--gr-text);
}

.gr-wiki-card__close {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gr-text-muted);
	background: rgba(255,255,255,.04);
}

.gr-wiki-card__body {
	padding: 20px;
	color: var(--gr-text-soft);
	font-size: 14px;
	line-height: 1.7;
}

.gr-wiki-card__empty {
	border: 1px dashed rgba(255,122,38,.28);
	border-radius: 16px;
	padding: 14px 16px;
	background: rgba(255,122,38,.06);
	color: var(--gr-text-muted);
}