.stn-locked-block { border: 1px solid #e2d9f3; border-radius: 8px; padding: 1em; margin: 1.5em 0; background: #faf8fd; }
.stn-locked-loading { color: #888; font-style: italic; }

/* Video player placeholder (see STN_Video::append_episode_furniture()) —
   same cache-safe pattern as .stn-locked-block: identical markup for every
   visitor until the AJAX call resolves it into either the real player or
   the pricing block. */
.stn-video-block {
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0 auto;
	background: transparent;
	min-height: 0;
	width: 100%;
	max-width: 420px;
}
.stn-video-block.stn-teaser {
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 1em;
	background: #141018;
	max-width: 420px;
}
.stn-video-loading {
	color: rgba(255, 255, 255, 0.55);
	font-style: normal;
	margin: 0;
	text-align: center;
	padding: 4rem 1rem;
}
.stn-video-player { display: block; border-radius: 8px; background: #000; }
.stn-video-unavailable {
	color: #ccc;
	text-align: center;
	padding: 2rem 1rem;
	margin: 0;
}

/* ---- Immersive mini-drama player (sample 03-mini-drama-player) ---- */
.stn-drama-player { width: 100%; }
.stn-drama-card {
	position: relative;
	width: 100%;
	border-radius: 22px;
	overflow: hidden;
	background: #0a0a0c;
	box-shadow:
		0 0 0 1px rgba(180, 80, 255, 0.18),
		0 20px 60px rgba(0, 0, 0, 0.55),
		0 0 40px rgba(180, 60, 255, 0.12);
}
.stn-drama-card-loading {
	aspect-ratio: 9 / 16;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	background: #120e16;
	border: 1px solid rgba(180, 80, 255, 0.15);
}
.stn-drama-media {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: #000;
	overflow: hidden;
}
.stn-drama-video,
.stn-drama-iframe-wrap,
.stn-drama-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
}
.stn-drama-iframe-tiktok {
	/* TikTok embed already includes chrome; fill the 9:16 stage. */
	background: #000;
}
.stn-drama-iframe-tiktok .stn-drama-iframe {
	/* Slight crop of TikTok outer padding for a fuller card. */
	transform: scale(1.02);
	transform-origin: center center;
}
/* When TikTok iframe is the media, hide custom scrubber (embed has its own). */
.stn-drama-player:has(.stn-drama-iframe-tiktok) .stn-drama-scrub {
	display: none;
}
.stn-drama-player:has(.stn-drama-iframe-tiktok) .stn-drama-rail {
	/* Keep rail above TikTok UI where possible. */
	z-index: 5;
}
.stn-drama-video { cursor: pointer; }
.stn-drama-video::-webkit-media-controls { display: none !important; }
.stn-drama-video::-webkit-media-controls-enclosure { display: none !important; }
.stn-drama-gradient {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 28%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
	pointer-events: none;
	z-index: 1;
}

/* Glass side rail: like / comment / share */
.stn-drama-rail {
	position: absolute;
	right: 10px;
	bottom: 18%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 10px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(60, 30, 90, 0.55), rgba(20, 12, 40, 0.72));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.stn-drama-action {
	appearance: none;
	border: 0;
	background: transparent;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 2px;
	cursor: pointer;
	min-width: 44px;
	font: inherit;
}
.stn-drama-action:disabled { opacity: 0.85; cursor: default; }
.stn-drama-action-icon {
	font-size: 1.35rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.stn-drama-like .stn-drama-action-icon {
	color: #ff4d8d;
	font-size: 1.55rem;
}
.stn-drama-like[aria-pressed="true"] .stn-drama-action-icon {
	color: #ff2d78;
	transform: scale(1.08);
}
.stn-drama-action-count,
.stn-drama-action-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Neon scrubber under the card */
.stn-drama-scrub {
	padding: 10px 14px 12px;
	background: linear-gradient(180deg, #0e0b12, #0a0810);
}
.stn-drama-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #5b8cff 0%, #c44bff 45%, #ff4db8 100%);
	outline: none;
	cursor: pointer;
	box-shadow: 0 0 12px rgba(180, 80, 255, 0.45);
}
.stn-drama-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(196, 75, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
.stn-drama-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(196, 75, 255, 0.45);
	cursor: pointer;
}
.stn-drama-time {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 6px;
	font-size: 0.78rem;
	font-weight: 650;
	color: rgba(255, 255, 255, 0.72);
	font-variant-numeric: tabular-nums;
}
.stn-drama-time-sep { opacity: 0.5; }

/* Cache-safe pricing placeholder (see STN_Shortcodes::render_pricing()) —
   same loading state as a locked-content block until the AJAX call resolves it. */
.stn-pricing-block-placeholder { min-height: 2em; }

/* Logged-in "active 7-Day Pass" state (STN_Shortcodes::weekly_pass_active_html()). */
.stn-pricing-active-pass {
	border: 2px solid #ff4757;
	border-radius: 15px;
	padding: 20px;
	text-align: center;
	background: #fffafb;
	margin: 1.5em 0;
}
.stn-pricing-countdown { font-weight: bold; color: #444; margin: 0 0 15px; }
.stn-pricing-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0; }
.stn-pricing-links .stn-pricing-button { flex: 1 1 200px; max-width: 260px; }

/* Character rename box (registry + legacy tokens). */
.stn-char-name-box {
	margin-bottom: 24px;
	padding: 16px 18px;
	border: 1px solid #e2d9f3;
	border-radius: 12px;
	background: linear-gradient(180deg, #faf8fd 0%, #fff 100%);
	box-shadow: 0 2px 8px rgba(80, 50, 120, 0.04);
}
.stn-char-name-box-title {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 1.05em;
	color: #2d2438;
}
.stn-char-name-box-hint {
	margin: 0 0 14px;
	font-size: 0.88em;
	color: #6b6280;
	line-height: 1.4;
}
.stn-char-name-field {
	margin: 0 0 12px;
	display: grid;
	gap: 4px;
}
.stn-char-name-field:last-child { margin-bottom: 0; }
.stn-char-name-field label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.9em;
	color: #444;
}
.stn-char-slot-label {
	font-weight: 700;
	color: #5b4b7a;
}
.stn-char-default-label {
	color: #888;
	font-weight: 500;
}
.stn-char-default-label::before {
	content: '(';
}
.stn-char-default-label::after {
	content: ')';
}
.stn-char-name-input {
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	border: 1px solid #d4cce8;
	border-radius: 8px;
	font-size: 1em;
	background: #fff;
	color: #222;
	box-sizing: border-box;
}
.stn-char-name-input:focus {
	outline: none;
	border-color: #8b6cc9;
	box-shadow: 0 0 0 3px rgba(139, 108, 201, 0.15);
}
.stn-char-variants-hint {
	font-size: 0.8em;
	color: #8a8499;
}
/* Highlight renamed spans slightly so readers notice the feature. */
.stn-char {
	border-bottom: 1px dotted rgba(139, 108, 201, 0.45);
	cursor: default;
}

.stn-chapter-nav {
	margin: 2em 0;
	padding: 1em 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}
.stn-chapter-nav-position { margin: 0; font-weight: bold; color: #666; flex: 1 1 100%; }
.stn-chapter-jump { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; flex: 1 1 auto; max-width: 260px; }
.stn-chapter-nav-links { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; width: 100%; justify-content: space-between; }
.stn-chapter-nav-back { color: #888; text-decoration: underline; }

.stn-story-info { margin: 1.5em 0; }
.stn-story-excerpt { font-size: 1.1em; line-height: 1.6; color: #333; margin-bottom: 1em; }
.stn-story-characters, .stn-story-warnings { color: #555; margin: 0.5em 0; }
.stn-story-chapters-heading { margin: 1em 0 0.5em; }
.stn-story-chapter-list { padding-left: 1.2em; }
.stn-story-chapter-list li { margin-bottom: 6px; }
.stn-chapter-lock-icon { font-size: 0.85em; opacity: 0.7; }

.stn-pricing-wrap {
	border: 2px solid #f0f0f0;
	padding: 25px;
	text-align: center;
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	margin: 1.5em 0;
}
.stn-pricing-heading { color: #333; margin: 0 0 5px; }
.stn-pricing-subheading { color: #666; margin: 0 0 25px; }
.stn-pricing-footnote { margin-top: 20px; font-size: 0.8em; color: #aaa; }

.stn-pricing-block { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.stn-pricing-plan {
	flex: 1 1 180px;
	max-width: 260px;
	min-width: 180px;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	position: relative;
}
.stn-pricing-plan.stn-pricing-highlight { border: 2px solid #ff4757; background: #fffafb; box-shadow: none; }
.stn-pricing-badge {
	background: #ff4757;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 3px 10px;
	border-radius: 10px;
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}
.stn-pricing-plan h4 { display: block; margin: 0 0 10px; font-size: 1.1em; color: #444; }
.stn-blurb { color: #888; font-size: 0.8em; margin: 10px 0; }
.stn-price { color: #ff4757; font-weight: bold; font-size: 1.2em; margin: 10px 0; }
.stn-usd { color: #777; font-weight: normal; font-size: 0.7em; }
.stn-pricing-button {
	background: #444;
	color: #fff;
	padding: 10px;
	text-decoration: none;
	border-radius: 5px;
	display: block;
	font-weight: bold;
	margin-top: 10px;
}
.stn-pricing-plan.stn-pricing-highlight .stn-pricing-button { background: #ff4757; }
.stn-pricing-button:hover { opacity: 0.9; }

.stn-trakteer-instructions {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 20px;
	margin: 1.5em 0;
	background: #fffafb;
}
.stn-trakteer-instructions h2 { margin-top: 0; color: #333; }
.stn-trakteer-instructions .button { display: inline-block; background: #444; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; font: inherit; }
.stn-trakteer-instructions .button:hover { opacity: 0.9; }
#stn-trakteer-order-code { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 4px 8px; font-size: 1.1em; margin: 0 8px; }
.stn-trakteer-open-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #ff4757;
	color: #fff;
	padding: 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	margin-top: 15px;
	box-shadow: 0 4px 10px rgba(255,71,87,0.3);
}
.stn-trakteer-open-button:hover { opacity: 0.9; color: #fff; }

/* Crypto payment (STN_Crypto_Gateway) — checkout radio options + thank-you instructions. */
.stn-crypto-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.stn-crypto-option { display: block; padding: 8px 10px; border: 1px solid #eee; border-radius: 6px; cursor: pointer; font-size: 0.9em; }
.stn-crypto-option input { margin-right: 8px; }
.stn-crypto-note { font-size: 0.8em; color: #888; }
.stn-crypto-instructions { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin: 1.5em 0; background: #fafafa; }
.stn-crypto-instructions h2 { margin-top: 0; color: #333; }
.stn-crypto-instructions code { display: inline-block; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 6px 10px; font-size: 0.95em; word-break: break-all; }
.stn-crypto-admin-meta { font-size: 0.9em; line-height: 1.6; }

/* Repeat weekly-pass renter upgrade nudge (STN_Upgrade_Offer). */
.stn-pricing-upgrade-offer { background: #fff4f6; border: 1px dashed #ff4757; border-radius: 8px; padding: 10px 14px; color: #a83246; font-size: 0.85em; margin: 0 0 15px; }

/* Continue Reading (STN_Reading_Progress). */
.stn-continue-reading { margin: 1.5em 0; }
.stn-continue-heading { margin: 0 0 0.6em; }
.stn-continue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.stn-continue-item a {
	display: block;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px 16px;
	text-decoration: none;
	background: #faf8fd;
}
.stn-continue-title { display: block; font-weight: bold; color: #333; font-size: 0.95em; }
.stn-continue-chapter { display: block; color: #ff4757; font-size: 0.8em; margin-top: 2px; }

/* Follow story (STN_Follow). */
.stn-follow-placeholder { margin: 1em 0; min-height: 1.5em; }
.stn-follow-btn {
	background: #fff;
	border: 1px solid #ff4757;
	color: #ff4757;
	padding: 8px 20px;
	border-radius: 20px;
	font-weight: bold;
	cursor: pointer;
	font-size: 0.9em;
}
.stn-follow-btn.stn-following { background: #ff4757; color: #fff; }
.stn-follow-btn:disabled { opacity: 0.6; cursor: default; }
.stn-follow-prompt { color: #888; font-size: 0.9em; }

/* Account auth notices (STN_Email_Confirmation, STN_Account_Auth). */
.stn-auth-notice { border-radius: 10px; padding: 14px 16px; margin: 0 0 1.5em; line-height: 1.5; }
.stn-auth-notice-warning { background: #fff8e6; border: 1px solid #f0d78c; color: #6b4f00; }
.stn-auth-notice-success { background: #edf9f0; border: 1px solid #b8e0c1; color: #1f5c33; }
.stn-email-confirm-banner-title { font-weight: bold; margin: 0 0 6px; }
.stn-email-confirm-banner-meta { font-size: 0.9em; color: #7a6528; margin: 0 0 10px; }
.stn-email-resend-btn {
	background: #fff;
	border: 1px solid #c9a227;
	color: #6b4f00;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: bold;
	cursor: pointer;
	font-size: 0.9em;
}
.stn-email-resend-btn:disabled { opacity: 0.6; cursor: default; }
.stn-email-resend-result { display: inline-block; margin-left: 10px; font-size: 0.85em; color: #555; }
.stn-auth-hint { color: #666; margin: 0 0 1em; }

/* My Account plan status + gift-code redemption (STN_Account_Dashboard, STN_Gift_Codes). */
.stn-account-plan-status { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px solid #eee; }
.stn-account-plan-active { color: #2a8a4a; font-weight: bold; }
.stn-account-plan-none { color: #888; }
.stn-gift-redeem { margin: 1.5em 0; }
.stn-gift-redeem-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stn-gift-code-input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; font-family: monospace; text-transform: uppercase; }
.stn-gift-redeem-result { font-size: 0.85em; color: #666; }

/* AO3-style story archive filters (STN_Story_Filters). */
.stn-filter-form { border: 1px solid #eee; border-radius: 10px; padding: 10px 14px; margin: 0 0 2em; background: #faf8fd; }
.stn-filter-facets { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stn-filter-facet { border: none; padding: 0; margin: 0; }
/* Each facet is a <details> styled as a compact dropdown button; the
   checkbox panel is absolutely positioned so opening it overlays the
   grid instead of pushing it down. Zero JS — native <details> toggle. */
.stn-filter-dd { position: relative; }
.stn-filter-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ddd; border-radius: 999px; padding: 6px 16px; background: #fff; cursor: pointer; font-weight: bold; color: #444; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; user-select: none; white-space: nowrap; }
.stn-filter-dd > summary::-webkit-details-marker { display: none; }
.stn-filter-dd > summary::after { content: "\25BE"; color: #999; font-size: 0.9em; }
.stn-filter-dd[open] > summary { border-color: #bbb; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.stn-filter-dd[open] > summary::after { content: "\25B4"; }
.stn-filter-badge { background: #7a5ba6; color: #fff; border-radius: 999px; font-size: 0.75em; line-height: 1; padding: 3px 7px; font-weight: bold; }
.stn-filter-dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 9990; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 10px 14px; min-width: 230px; max-width: min(320px, calc(100vw - 40px)); max-height: 280px; overflow-y: auto; }
.stn-filter-option { display: block; font-size: 0.9em; color: #555; margin: 4px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-filter-option input { margin-right: 6px; }
.stn-filter-count { color: #aaa; font-size: 0.85em; }
.stn-filter-apply { display: inline-block; margin: 0; padding: 7px 22px; }
.stn-filter-clear { color: #888; font-size: 0.85em; text-decoration: underline; }
@media (max-width: 600px) {
	.stn-filter-dd-panel { min-width: 200px; max-width: calc(100vw - 60px); }
}

/* Numbered pagination on the story archive (STN_Story_Filters::
   render_numbered_pagination, via the gallerywp_posts_navigation override).
   Styles WordPress core's paginate_links() list output. Pill look matches
   the filter dropdown buttons above. */
.stn-story-pagination { clear: both; margin: 2em 0; }
.stn-story-pagination ul.page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; padding: 0; }
.stn-story-pagination ul.page-numbers li { margin: 0; }
.stn-story-pagination .page-numbers { display: inline-block; min-width: 38px; text-align: center; border: 1px solid #ddd; border-radius: 999px; padding: 6px 12px; background: #fff; color: #444; font-weight: bold; font-size: 0.9em; text-decoration: none; line-height: 1.4; }
.stn-story-pagination a.page-numbers:hover { border-color: #7a5ba6; color: #7a5ba6; }
.stn-story-pagination .page-numbers.current { background: #7a5ba6; border-color: #7a5ba6; color: #fff; }
.stn-story-pagination .page-numbers.dots { border: none; background: none; }

/* Sidebar tag-cloud widget: collapsed behind a native <details> (see
   STN_Story_Filters::collapse_tag_cloud) so it takes one line, not a
   full screen of links. */
.stn-tagcloud-collapse > summary { cursor: pointer; font-size: 0.85em; color: #666; text-decoration: underline; }
.stn-tagcloud-collapse[open] > summary { margin-bottom: 8px; }
.stn-tagcloud-body { max-height: 260px; overflow-y: auto; }

/* Story archive/homepage grid on mobile: the parent theme (gallerywp)
   collapses its 3-col grid to a SINGLE column under 520px
   (.gallerywp-grid-post.gallerywp-3-col{width:100%} in style.css) — this
   overrides just that one breakpoint to 2 columns instead, matching the
   pattern the theme already uses for its 521-800px tier. Lives here
   rather than in the theme file itself so a theme update can't silently
   drop it (see this plugin's whole reason for existing). !important
   matches the specificity the theme's own mobile rule already uses. */
@media only screen and (max-width: 520px) {
	/* #gallerywp-posts-wrapper prefix is deliberate, not decorative: the
	   theme's own mobile rule (.gallerywp-grid-post.gallerywp-3-col,
	   unprefixed, two classes) sets `clear: both !important` on EVERY
	   item unconditionally. Both !important + equal specificity ties are
	   broken by source order in LiteSpeed's combined/minified CSS output,
	   and the theme's rule happened to land AFTER this plugin's — so the
	   first version of this override (also unprefixed, same specificity)
	   silently lost that fight for the "clear" property on every second
	   (even) item, which forced every single item onto its own row
	   despite the width/float rules being correctly applied. Confirmed via
	   direct inspection of the actual combined CSS bytes, not a guess.
	   Adding the wrapper ID here raises specificity above the theme's
	   plain 2-class selector regardless of !important or combiner order,
	   so this can't silently regress again the same way. */
	#gallerywp-posts-wrapper .gallerywp-grid-post.gallerywp-3-col {
		float: left !important;
		width: 48% !important;
		margin-right: 4% !important;
		clear: none !important;
	}
	#gallerywp-posts-wrapper .gallerywp-grid-post.gallerywp-3-col:nth-of-type(2n+2) {
		margin-right: 0 !important;
		clear: none !important;
	}
	#gallerywp-posts-wrapper .gallerywp-grid-post.gallerywp-3-col:nth-of-type(2n+1) {
		clear: both !important;
	}
	#gallerywp-posts-wrapper .gallerywp-grid-post .gallerywp-grid-post-title { font-size: 15px; }
}

/* Comics (legacy stacked) */
.stn-comic-pages { display: flex; flex-direction: column; gap: 10px; margin: 1em 0; }
.stn-comic-page-figure { margin: 0; }
.stn-comic-page-img { display: block; width: 100%; height: auto; border-radius: 6px; }
.stn-comic-index { margin-top: 1.5em; }
.stn-comic-index-list { line-height: 1.7; }

/* Ebook comic slider */
.stn-ebook {
	width: 100%;
	max-width: 520px;
	margin: 0 auto 1.25rem;
	user-select: none;
	-webkit-user-select: none;
}
.stn-ebook-frame {
	position: relative;
	display: flex;
	align-items: center;
}
.stn-ebook-viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
	border-radius: 16px;
	background: #0c0c10;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.35);
	aspect-ratio: 2 / 3;
	touch-action: pan-y;
}
.stn-ebook-track {
	display: flex;
	height: 100%;
	width: 100%;
	transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
	will-change: transform;
}
.stn-ebook-slide {
	flex: 0 0 100%;
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
}
.stn-ebook-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #111;
	pointer-events: none;
}
.stn-ebook-nav {
	appearance: none;
	border: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(30, 20, 40, 0.75);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: background 0.15s, transform 0.15s;
	z-index: 2;
}
.stn-ebook-nav:hover { background: rgba(80, 40, 120, 0.9); transform: scale(1.05); }
.stn-ebook-nav:disabled { opacity: 0.35; cursor: default; transform: none; }
.stn-ebook-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	padding: 0 8px;
	font-size: 0.88rem;
	font-weight: 700;
	color: #444;
}
.stn-ebook-counter { font-variant-numeric: tabular-nums; }
.stn-ebook-sep { opacity: 0.5; margin: 0 2px; }
.stn-ebook-issue { color: #777; font-weight: 600; }
.stn-ebook-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.stn-ebook-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ccc;
	opacity: 0.7;
}
.stn-ebook-dot.is-active {
	background: #8b5cf6;
	opacity: 1;
	transform: scale(1.2);
}
body.single-stn_comic_page .stn-ebook-bar { color: rgba(255, 255, 255, 0.85); }
body.single-stn_comic_page .stn-ebook-issue { color: rgba(255, 255, 255, 0.55); }
body.single-stn_comic_page .stn-ebook-dot { background: rgba(255, 255, 255, 0.25); }
body.single-stn_comic_page .stn-ebook-dot.is-active { background: #c084fc; }

/* ---- Trial library + premium archive badges (0.7.0) ---- */
.stn-pricing-trial-link { text-align: center; margin: 0 0 16px; font-size: 0.95em; }
.stn-pricing-trial-link a { color: #ff4757; font-weight: bold; }

.stn-account-trial-banner {
	background: #fff4f6;
	border: 1px dashed #ff4757;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 18px;
}
.stn-account-trial-banner p { margin: 0 0 8px; }
.stn-account-trial-banner p:last-child { margin: 0; }

.stn-trial-library { margin: 1em 0 2em; }
.stn-trial-library-header { margin-bottom: 1.5em; }
.stn-trial-library-countdown { color: #555; }
.stn-trial-library-section { margin: 1.75em 0; }
.stn-trial-library-section h3 { margin: 0 0 0.75em; color: #333; }
.stn-trial-library-empty { color: #888; font-style: italic; }
.stn-trial-library-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
}
.stn-trial-library-card a {
	display: block;
	text-decoration: none;
	color: #333;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.15s ease;
}
.stn-trial-library-card a:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.stn-trial-library-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: #f0eaf8;
}
.stn-trial-library-thumb-placeholder { min-height: 180px; }
.stn-trial-library-title {
	display: block;
	padding: 8px 10px;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 1.3;
}

.stn-thumb-badge-wrap { position: relative; display: inline-block; max-width: 100%; }
.stn-thumb-badge-wrap img { display: block; max-width: 100%; height: auto; }
.stn-premium-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: rgba(30, 20, 40, 0.82);
	color: #fff;
	font-size: 0.7em;
	font-weight: bold;
	letter-spacing: 0.02em;
	padding: 4px 8px;
	border-radius: 999px;
	line-height: 1.2;
	pointer-events: none;
}
.stn-trial-eligible-card .stn-premium-badge {
	background: rgba(255, 71, 87, 0.92);
}