/*
 * TBook Profiles: story rings + profile modal.
 *
 * @since 4.0.0
 */

/* ============================ RING ============================ */
/* The ring is a ring-shaped (masked) element sized as a % of the avatar, so it
 * keeps its proportions at ANY avatar size (including one set by theme CSS). */
.tbook-ring {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	--tb-ring-outer: 17%;   /* how far OUTSIDE the photo the ring sits */
	--tb-ring-speed: 2.2s;
	--tb-ring-ry: 1;        /* roundness: 1 = circle, < 1 = oval */
	/* Use the standalone `scale` property: a visual-editor rule here sets
	 * "transform: ... !important", which would override a transform-based
	 * scale. `scale` is a separate property, so it always applies. */
	/* NB: the oval (scale) is applied to the ring/pattern/flash layers, not here,
	 * so the profile photo stays round. */
}
.tbook-ring::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--tb-ring-outer));
	border-radius: 50%;
	background: transparent;
	scale: var(--tb-ring-rx, 1) var(--tb-ring-ry, 1);   /* oval the ring/flash (not the photo) */
	-webkit-mask: radial-gradient(closest-side, transparent 0 84%, #000 84% 100%);
	mask: radial-gradient(closest-side, transparent 0 84%, #000 84% 100%);
}
/* Seen = static ring (Around / Inside). New = the ring + a flashing red glow.
 * The "Flash" position has no ring at all: only the red flash, and nothing once seen. */
.tbook-ring--has::before {
	background: var(--tb-ring-bg, #d7dbe1);
}
.tbook-ring--new::before {
	background: var(--tb-ring-bg, #d7dbe1);
	animation: tbook-ring-spin var(--tb-ring-speed, 2.2s) linear infinite;
}
/* Position: Flash — the chosen style's ring, throbbing in that style's colour.
 * Once seen the whole thing fades away (display:none on the base state). */
.tbook-ring--pos-flash::before { display: none; }
.tbook-ring--pos-flash.tbook-ring--new::before {
	display: block;
	background: var(--tb-ring-bg, #ef4444);
	box-shadow: 0 0 0 0 transparent;
	animation: tbook-ring-flash 1.1s ease-in-out infinite;
}
@keyframes tbook-ring-flash {
	0%, 100% { opacity: .28; box-shadow: 0 0 0 0 transparent; }
	50% { opacity: 1; box-shadow: 0 0 0 2px var(--tb-flash-color, #ef4444), 0 0 26px 11px var(--tb-flash-color, #ef4444); }
}

/* Position: Inside & around — the SAME ring as Around, plus an inner pattern
 * that matches the ring's style, covering the inside of the photo. */
.tbook-ring--pos-inside::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	z-index: 0;          /* behind the profile image */
	pointer-events: none;
	opacity: var(--tb-pattern-opacity, 0.8);
	scale: var(--tb-ring-rx, 1) var(--tb-ring-ry, 1);   /* oval the pattern (not the photo) */
	background: var(--tb-ring-bg, #d7dbe1);
}
.tbook-ring--new.tbook-ring--pos-inside::after {
	animation: tbook-ring-spin var(--tb-ring-speed, 2.2s) linear infinite;
}

/* Inner patterns, harmonious with each ring style. */
.tbook-ring--pos-inside.tbook-ring--style-classic::after     { background: repeating-conic-gradient(from 0deg, #f09433 0deg 18deg, #dc2743 18deg 36deg); }
.tbook-ring--pos-inside.tbook-ring--style-sunset::after      { background: repeating-conic-gradient(from 0deg, #ff9a00 0deg 20deg, #ff2d95 20deg 40deg); }
.tbook-ring--pos-inside.tbook-ring--style-ocean::after       { background: repeating-radial-gradient(circle at 50% 130%, #00c6ff 0 12px, #0072ff 12px 24px); }
.tbook-ring--pos-inside.tbook-ring--style-forest::after      { background: radial-gradient(#a8e063 24%, transparent 25%) 0 0/16px 16px, radial-gradient(#a8e063 24%, transparent 25%) 8px 8px/16px 16px, #134e5e; }
.tbook-ring--pos-inside.tbook-ring--style-fire::after        { background: repeating-conic-gradient(from 0deg, #f12711 0deg 16deg, #f5af19 16deg 32deg); }
.tbook-ring--pos-inside.tbook-ring--style-candy::after       { background: radial-gradient(#fbc2eb 26%, transparent 27%) 0 0/18px 18px, radial-gradient(#fbc2eb 26%, transparent 27%) 9px 9px/18px 18px, #ff9a9e; }
.tbook-ring--pos-inside.tbook-ring--style-neon::after        { background: linear-gradient(#00f260 1px, transparent 1px) 0 0/14px 14px, linear-gradient(90deg, #00f260 1px, transparent 1px) 0 0/14px 14px, #0575e6; }
.tbook-ring--pos-inside.tbook-ring--style-gold::after        { background: repeating-conic-gradient(from 0deg, #f7971e 0deg 18deg, #bf953f 18deg 36deg); }
.tbook-ring--pos-inside.tbook-ring--style-aurora::after      { background: repeating-radial-gradient(circle at 50% 130%, #00c9a7 0 12px, #7c4dff 12px 24px); }
.tbook-ring--pos-inside.tbook-ring--style-midnight::after    { background: radial-gradient(#e2e8f0 18%, transparent 19%) 0 0/22px 22px, #0f2027; }
.tbook-ring--pos-inside.tbook-ring--style-rainbowline::after { background: repeating-linear-gradient(45deg, #ff0000 0 8px, #ff8c00 8px 16px, #ffd700 16px 24px, #00c853 24px 32px, #2979ff 32px 40px, #8e24aa 40px 48px); }
.tbook-ring--pos-inside.tbook-ring--style-beam::after        { background: repeating-conic-gradient(from 0deg, #ffd166 0deg 15deg, #fff8e1 15deg 30deg); }
.tbook-ring--pos-inside.tbook-ring--style-dots::after        { background: radial-gradient(#c7d2fe 26%, transparent 27%) 0 0/16px 16px, radial-gradient(#c7d2fe 26%, transparent 27%) 8px 8px/16px 16px, #6366f1; }
.tbook-ring--pos-inside.tbook-ring--style-dual::after        { background: repeating-conic-gradient(#7c3aed 0% 25%, #22d3ee 0% 50%) 0 0/26px 26px; }
.tbook-ring--pos-inside.tbook-ring--style-glow::after        { background: radial-gradient(circle, #2dd4bf 0 40%, #14b8a6 41% 100%); }
.tbook-ring--pos-inside.tbook-ring--style-pulse::after       { background: repeating-conic-gradient(from 0deg, #f43f5e 0deg 18deg, #8b5cf6 18deg 36deg); }

/* ---- structural ring styles (defined after the base rules so they win) ---- */
/* Rainbow Line: a thin rainbow going around */
.tbook-ring--style-rainbowline::before {
	background: conic-gradient(from 0deg,#ff0000,#ff8c00,#ffd700,#00c853,#2979ff,#8e24aa,#ff0000);
}
/* Beam: a bright arc chasing around like a comet */
.tbook-ring--style-beam::before {
	background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 285deg, #ffd166 320deg, #ffffff 356deg, rgba(255,255,255,0) 360deg);
}
/* Dots: dashed segments */
.tbook-ring--style-dots::before {
	background: repeating-conic-gradient(from 0deg, #6366f1 0deg 10deg, transparent 10deg 20deg);
}
/* Dual: two alternating colours (indigo / cyan) */
.tbook-ring--style-dual::before {
	background: repeating-conic-gradient(from 0deg, #7c3aed 0deg 90deg, #22d3ee 90deg 180deg, #7c3aed 180deg 270deg, #22d3ee 270deg 360deg);
}
/* Glow: solid teal with a soft pulse */
.tbook-ring--style-glow::before { background: #14b8a6; }
.tbook-ring--new.tbook-ring--style-glow::before { animation: tbook-ring-pulse 1.6s ease-in-out infinite; }
/* Pulse: colours that breathe */
.tbook-ring--style-pulse::before { background: conic-gradient(from 0deg,#f43f5e,#8b5cf6,#f43f5e); }
.tbook-ring--new.tbook-ring--style-pulse::before { animation: tbook-ring-pulse2 1.8s ease-in-out infinite; }

/* ---- Flash position always wins: the ring pulses in THAT style's flash colour,
 * overriding each style's own ring background + animation above.
 * Gradient styles keep their gradient ring; structural styles use the flash colour.
 * Each style then gets its OWN flash rhythm (keyframes below). ---- */
.tbook-ring--pos-flash.tbook-ring--new::before {
	background: var(--tb-ring-bg, var(--tb-flash-color, #ef4444));
	animation: tbook-ring-flash 1.1s ease-in-out infinite;
}
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-classic::before     { animation: tbook-flash-classic 1.1s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-sunset::before      { animation: tbook-flash-sunset 2.2s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-ocean::before       { animation: tbook-flash-ocean 2s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-forest::before      { animation: tbook-flash-forest 2.6s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-fire::before        { animation: tbook-flash-fire .7s linear infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-candy::before       { animation: tbook-flash-candy 1.4s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-neon::before        { animation: tbook-flash-neon .6s steps(1, end) infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-gold::before        { animation: tbook-flash-gold 1.8s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-aurora::before      { animation: tbook-flash-aurora 2.4s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-midnight::before    { animation: tbook-flash-midnight 2.8s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-rainbowline::before { animation: tbook-flash-rainbowline 2.5s linear infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-beam::before        { animation: tbook-flash-beam 2s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-dots::before        { animation: tbook-flash-dots 1.2s steps(1, end) infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-dual::before        { animation: tbook-flash-dual 2s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-glow::before        { animation: tbook-flash-glow 2s ease-in-out infinite; }
.tbook-ring--pos-flash.tbook-ring--new.tbook-ring--style-pulse::before       { animation: tbook-flash-pulse 1.6s ease-in-out infinite; }

/* classic — smooth single throb */
@keyframes tbook-flash-classic {
	0%, 100% { opacity: .25; box-shadow: 0 0 0 0 transparent; }
	50%      { opacity: 1;   box-shadow: 0 0 26px 10px var(--tb-flash-color, #ef4444); }
}
/* sunset — slow lazy swell */
@keyframes tbook-flash-sunset {
	0%, 100% { opacity: .18; box-shadow: 0 0 0 0 transparent; }
	60%      { opacity: 1;   box-shadow: 0 0 36px 16px var(--tb-flash-color, #ef4444); }
}
/* ocean — two crests then a calm */
@keyframes tbook-flash-ocean {
	0%, 100% { opacity: .2;  box-shadow: 0 0 0 0 transparent; }
	12%      { opacity: 1;   box-shadow: 0 0 22px 9px var(--tb-flash-color, #ef4444); }
	30%      { opacity: .28; box-shadow: 0 0 6px 2px var(--tb-flash-color, #ef4444); }
	46%      { opacity: 1;   box-shadow: 0 0 22px 9px var(--tb-flash-color, #ef4444); }
	72%      { opacity: .2;  box-shadow: 0 0 0 0 transparent; }
}
/* forest — gentle breathing */
@keyframes tbook-flash-forest {
	0%, 100% { opacity: .35; box-shadow: 0 0 10px 3px var(--tb-flash-color, #ef4444); }
	50%      { opacity: .95; box-shadow: 0 0 26px 12px var(--tb-flash-color, #ef4444); }
}
/* fire — flicker */
@keyframes tbook-flash-fire {
	0%, 100% { opacity: .38; box-shadow: 0 0 12px 4px var(--tb-flash-color, #ef4444); }
	10%      { opacity: 1;   box-shadow: 0 0 30px 13px var(--tb-flash-color, #ef4444); }
	22%      { opacity: .45; box-shadow: 0 0 10px 3px var(--tb-flash-color, #ef4444); }
	34%      { opacity: 1;   box-shadow: 0 0 34px 15px var(--tb-flash-color, #ef4444); }
	48%      { opacity: .3;  box-shadow: 0 0 8px 2px var(--tb-flash-color, #ef4444); }
	62%      { opacity: .95; box-shadow: 0 0 26px 11px var(--tb-flash-color, #ef4444); }
	80%      { opacity: .5;  box-shadow: 0 0 14px 5px var(--tb-flash-color, #ef4444); }
}
/* candy — bouncy double throb */
@keyframes tbook-flash-candy {
	0%, 100% { opacity: .28; box-shadow: 0 0 0 0 transparent; }
	35%      { opacity: 1;   box-shadow: 0 0 30px 14px var(--tb-flash-color, #ef4444); }
	55%      { opacity: .55; box-shadow: 0 0 14px 6px var(--tb-flash-color, #ef4444); }
	78%      { opacity: 1;   box-shadow: 0 0 30px 14px var(--tb-flash-color, #ef4444); }
}
/* neon — hard strobe */
@keyframes tbook-flash-neon {
	0%   { opacity: .12; box-shadow: 0 0 0 0 transparent; }
	50%  { opacity: 1;   box-shadow: 0 0 0 2px var(--tb-flash-color, #ef4444), 0 0 30px 12px var(--tb-flash-color, #ef4444); }
	100% { opacity: .12; box-shadow: 0 0 0 0 transparent; }
}
/* gold — slow shimmer with a bright thin ring */
@keyframes tbook-flash-gold {
	0%, 100% { opacity: .3; box-shadow: 0 0 0 0 transparent; }
	50%      { opacity: 1;  box-shadow: 0 0 0 2px var(--tb-flash-color, #ef4444), 0 0 38px 17px var(--tb-flash-color, #ef4444); }
}
/* aurora — flowing swell */
@keyframes tbook-flash-aurora {
	0%, 100% { opacity: .22; box-shadow: 0 0 16px 6px var(--tb-flash-color, #ef4444); }
	45%      { opacity: 1;   box-shadow: 0 0 36px 17px var(--tb-flash-color, #ef4444); }
	70%      { opacity: .5;  box-shadow: 0 0 20px 8px var(--tb-flash-color, #ef4444); }
}
/* midnight — deep slow pulse */
@keyframes tbook-flash-midnight {
	0%, 100% { opacity: .18; box-shadow: 0 0 6px 2px var(--tb-flash-color, #ef4444); }
	55%      { opacity: .85; box-shadow: 0 0 24px 10px var(--tb-flash-color, #ef4444); }
}
/* rainbow line — pulse while the ring spins */
@keyframes tbook-flash-rainbowline {
	0%   { opacity: .3; transform: rotate(0deg);   box-shadow: 0 0 10px 4px var(--tb-flash-color, #ef4444); }
	50%  { opacity: 1;  transform: rotate(180deg); box-shadow: 0 0 30px 13px var(--tb-flash-color, #ef4444); }
	100% { opacity: .3; transform: rotate(360deg); box-shadow: 0 0 10px 4px var(--tb-flash-color, #ef4444); }
}
/* beam — a bright sweep */
@keyframes tbook-flash-beam {
	0%   { opacity: .18; box-shadow: 0 0 0 0 transparent; }
	38%  { opacity: 1;   box-shadow: 0 0 32px 14px var(--tb-flash-color, #ef4444); }
	58%  { opacity: 1;   box-shadow: 0 0 32px 14px var(--tb-flash-color, #ef4444); }
	100% { opacity: .18; box-shadow: 0 0 0 0 transparent; }
}
/* dots — on / off blink */
@keyframes tbook-flash-dots {
	0%   { opacity: .12; box-shadow: 0 0 0 0 transparent; }
	50%  { opacity: 1;   box-shadow: 0 0 22px 10px var(--tb-flash-color, #ef4444); }
	100% { opacity: .12; box-shadow: 0 0 0 0 transparent; }
}
/* dual — alternating strong / soft */
@keyframes tbook-flash-dual {
	0%, 100% { opacity: .28; box-shadow: 0 0 8px 3px var(--tb-flash-color, #ef4444); }
	25%      { opacity: 1;   box-shadow: 0 0 30px 13px var(--tb-flash-color, #ef4444); }
	50%      { opacity: .28; box-shadow: 0 0 8px 3px var(--tb-flash-color, #ef4444); }
	75%      { opacity: 1;   box-shadow: 0 0 30px 13px var(--tb-flash-color, #ef4444); }
}
/* glow — long soft breathing halo */
@keyframes tbook-flash-glow {
	0%, 100% { opacity: .32; box-shadow: 0 0 12px 5px var(--tb-flash-color, #ef4444); }
	50%      { opacity: 1;   box-shadow: 0 0 42px 19px var(--tb-flash-color, #ef4444); }
}
/* pulse — heartbeat (lub-dub) */
@keyframes tbook-flash-pulse {
	0%, 100% { opacity: .28; box-shadow: 0 0 0 0 transparent; }
	15%      { opacity: 1;   box-shadow: 0 0 30px 13px var(--tb-flash-color, #ef4444); }
	30%      { opacity: .4;  box-shadow: 0 0 10px 4px var(--tb-flash-color, #ef4444); }
	45%      { opacity: 1;   box-shadow: 0 0 24px 11px var(--tb-flash-color, #ef4444); }
	72%      { opacity: .28; box-shadow: 0 0 0 0 transparent; }
}

@keyframes tbook-ring-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,.55); }
	50% { box-shadow: 0 0 0 8px rgba(20,184,166,0); }
}
@keyframes tbook-ring-pulse2 {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}
.tbook-ring__inner {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 50%;
	line-height: 0;
}

.tbook-ring__inner img {
	display: block;
	border-radius: 50%;
	/* A theme/guestbook rule adds margin-left to entry images, which made the
	 * wrapper non-square (so the ring rendered as an ellipse). Neutralise it. */
	margin: 0 !important;
	padding: 0 !important;
}
.tbook-ring:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}
.tbook-ring--new.tbook-ring--static::before { animation: none; }
@keyframes tbook-ring-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.tbook-ring--new,
	.tbook-ring--new::before { animation: none; }
}

/* ============================ MODAL ============================ */
.tbook-profile-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, .62);
}
.tbook-profile-modal[hidden] { display: none; }
.tbook-profile-modal__content {
	position: relative;
	width: 100%;
	max-width: 760px;
	min-height: 0;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.tbook-profile-modal__close {
	position: absolute;
	top: 10px; right: 12px;
	z-index: 3;
	width: 34px; height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #334155;
}

/* Header */
.tbook-profile-head {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 22px 22px 16px;
}
.tbook-profile-head__avatar { flex: 0 0 auto; }
.tbook-profile-head__avatar img {
	display: block;
	width: auto;
	height: auto;
	max-width: 96px;
	max-height: 96px;
	border-radius: 0;
}
.tbook-profile-head__meta { min-width: 0; }
.tbook-profile-head__name {
	margin: 0 0 2px;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
}
.tbook-profile-head__sub { font-size: 13px; color: #64748b; }
.tbook-profile-head__badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: #eef2ff;
	color: #4338ca;
}
.tbook-profile-head__actions { margin-left: auto; display: flex; gap: 8px; }
.tbook-profile-btn {
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #334155;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}
.tbook-profile-btn:hover { background: #eef2f6; }

/* Tabs */
.tbook-profile-tabs {
	display: flex;
	gap: 4px;
	padding: 0 22px;
	border-bottom: 1px solid #e5e7eb;
}
.tbook-profile-tab {
	appearance: none;
	border: 0;
	background: none;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.tbook-profile-tab.is-active { color: #0f172a; border-bottom-color: #0f172a; }

/* Body */
.tbook-profile-body {
	padding: 18px 22px 24px;
	overflow-y: auto;
}
.tbook-profile-panel[hidden] { display: none; }

/* Highlights */
.tbook-highlights {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 14px;
}
.tbook-highlight-tile {
	display: block;
	width: 100%;
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: center;
}
.tbook-highlight-tile__ring {
	display: block;
	position: relative;
	width: 100%;
	padding-top: 100%;
	border-radius: 50%;
	background: #e2e5ea;
	/* The image is clipped by its own border-radius, so badges (count / new)
	 * may overflow without being cut into a crescent. */
	overflow: visible;
}
.tbook-highlight-tile__ring img,
.tbook-highlight-tile__ring video {
	position: absolute;
	inset: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	object-fit: cover;
	border-radius: 50%;
}
.tbook-highlight-tile__name {
	display: block;
	margin-top: 7px;
	font-size: 14px;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tbook-highlights__empty { color: #64748b; font-size: 14px; }

/* About */
.tbook-about p { margin: 0 0 12px; color: #334155; line-height: 1.5; }
.tbook-about__links a { display: block; color: #2563eb; text-decoration: none; margin-bottom: 6px; word-break: break-all; }
.tbook-about__links a:hover { text-decoration: underline; }

/* ====================== STORY VIEWER ====================== */
.tbook-story {
	position: fixed;
	inset: 0;
	z-index: 2147483601;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}
.tbook-story[hidden] { display: none; }
.tbook-story__stage {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 460px;
	max-height: 100%;
	display: flex;
	flex-direction: column;
}
.tbook-story__bars {
	position: absolute;
	top: 10px; left: 10px; right: 10px;
	z-index: 3;
	display: flex;
	gap: 4px;
}
.tbook-story__bar {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255,255,255,.35);
	overflow: hidden;
}
.tbook-story__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: #fff;
}
.tbook-story__bar.is-done span { width: 100%; }
.tbook-story.is-paused .tbook-story__bar.is-active > span { background: #cbd5e1; }
.tbook-story__head {
	position: absolute;
	top: 24px; left: 12px; right: 44px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 600;
}
.tbook-story__head img { width: 32px; height: 32px; border-radius: 50%; }
.tbook-story__close {
	position: absolute;
	top: 28px; right: 10px;
	z-index: 4;
	width: 34px; height: 34px;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.18);
	color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
/* Center third of the story is a transparent, always-clickable pause/resume
 * button, so a tap/click reliably toggles (left/right thirds still navigate).
 * Playing shows a faint pause hint on hover; paused shows a clear play glyph. */
.tbook-story__pause {
	position: absolute;
	top: 0; bottom: 0;
	left: 33.333%; width: 33.334%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.tbook-story__pause::before { /* pause bars (hint while playing) */
	content: "";
	position: absolute;
	width: 32px; height: 38px;
	background:
		linear-gradient(#fff, #fff) left 0 top 0 / 10px 38px no-repeat,
		linear-gradient(#fff, #fff) right 0 top 0 / 10px 38px no-repeat;
	filter: drop-shadow(0 1px 8px rgba(0,0,0,.55));
	opacity: 0;
	transition: opacity .18s ease;
}
.tbook-story__pause-glyph { /* play triangle (shown while paused) */
	width: 34px; height: 38px;
	background: rgba(255,255,255,.95);
	clip-path: polygon(6px 0, 34px 19px, 6px 38px);
	filter: drop-shadow(0 1px 8px rgba(0,0,0,.55));
	opacity: 0;
	transition: opacity .18s ease;
}
@media (hover: hover) {
	.tbook-story__pause:hover::before { opacity: .55; }
}
.tbook-story.is-paused .tbook-story__pause::before { opacity: 0; }
.tbook-story.is-paused .tbook-story__pause-glyph { opacity: .95; }
.tbook-story__media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0b0b0b;
}
.tbook-story__media img,
.tbook-story__media video {
	max-width: 100%;
	max-height: 100%;
	display: block;
}
.tbook-story__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 3;
	padding: 40px 16px 20px;
	color: #fff;
	font-size: 14px;
	background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
/* Date stamp on each slide, lower-right (toggle: Profiles tab). */
.tbook-story__stamp {
	position: absolute;
	right: 12px;
	bottom: 22px;
	z-index: 4;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(0,0,0,.55);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
}
.tbook-story__nav {
	position: absolute;
	top: 0; bottom: 0;
	width: 35%;
	z-index: 2;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.tbook-story__nav--prev { left: 0; }
.tbook-story__nav--next { right: 0; }

@media (max-width: 560px) {
	.tbook-profile-head { padding: 18px 16px 12px; }
	.tbook-profile-tabs { padding: 0 16px; }
	.tbook-profile-body { padding: 16px; }
}

/* ==================== PROFILE EDITOR / RING PICKER ==================== */
.tbook-profile-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	margin: 14px 0 5px;
	color: #334155;
}
.tbook-profile-form textarea,
.tbook-profile-form input[type="text"],
.tbook-profile-form input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
}
.tbook-ring-styles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
	gap: 10px;
}
.tbook-ring-style {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}
.tbook-ring-style__dot {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e2e8f0;
}
.tbook-ring-style.is-active .tbook-ring-style__dot {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2563eb;
}

/* Text-only highlight tile (post collections) */
.tbook-highlight-tile__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	color: #64748b;
}
/* Rich-text post slide in the story viewer */
.tbook-story__post {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	padding: 74px 18px 28px;
	color: #e5e7eb;
	background: #111827;
	font-size: 15px;
	line-height: 1.65;
	text-align: left;
}
.tbook-story__post img { max-width: 100%; height: auto; border-radius: 8px; }
.tbook-story__post a { color: #7dd3fc; }

/* Whole-post background: the post text sits on an image or a video. */
.tbook-story__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #0b0b0b;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.tbook-story__bg video { width: 100%; height: 100%; object-fit: contain; display: block; }
.tbook-story__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5));
}
.tbook-story__post.has-bg {
	background: transparent;
	color: #fff;
	text-shadow: 0 1px 14px rgba(0,0,0,.6);
}
.tbook-story__post.has-bg a { color: #fff; text-decoration: underline; }

/* Ring picker: names + structural swatch previews */
.tbook-ring-style__name {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	color: #475569;
}
.tbook-ring-style__dot.style-rainbowline { background: conic-gradient(from 0deg,#ff0000,#ff8c00,#ffd700,#00c853,#2979ff,#8e24aa,#ff0000); }
.tbook-ring-style__dot.style-beam { background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 285deg, #ffd166 320deg, #fff 356deg, rgba(255,255,255,0) 360deg); }
.tbook-ring-style__dot.style-dots { background: repeating-conic-gradient(from 0deg,#6366f1 0 10deg,transparent 10deg 20deg); }
.tbook-ring-style__dot.style-dual { background: repeating-conic-gradient(from 0deg,#7c3aed 0 90deg,#22d3ee 90deg 180deg,#7c3aed 180deg 270deg,#22d3ee 270deg 360deg); }
.tbook-ring-style__dot.style-glow { background: #14b8a6; }
.tbook-ring-style__dot.style-pulse { background: conic-gradient(from 0deg,#f43f5e,#8b5cf6,#f43f5e); }

/* Collection editor */
.tbook-highlight-tile-wrap { position: relative; }
.tbook-highlight-tile__edit {
	position: absolute;
	top: -4px; left: -4px;
	width: 30px; height: 30px;
	border: 0; border-radius: 50%;
	background: #0f172a; color: #fff;
	font-size: 15px; line-height: 1; cursor: pointer;
	opacity: .9;
}
.tbook-ce-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 10px 0 16px;
}
.tbook-ce-item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: #f1f5f9;
}
.tbook-ce-item img,
.tbook-ce-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbook-ce-item__label {
	display: flex; align-items: center; justify-content: center;
	height: 100%; font-weight: 600; color: #64748b;
}
.tbook-ce-del {
	position: absolute; top: 4px; right: 4px;
	width: 22px; height: 22px; border: 0; border-radius: 50%;
	background: rgba(15,23,42,.75); color: #fff;
	font-size: 14px; line-height: 1; cursor: pointer;
}
.tbook-ce-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tbook-ce-upload .tb-files { font-size: 13px; }
.tb-upload-status { font-size: 13px; color: #64748b; }

/* Collection editor item controls */
.tbook-ce-controls {
	position: absolute;
	left: 4px; right: 4px; bottom: 4px;
	display: flex;
	gap: 3px;
}
.tbook-ce-btn {
	flex: 1;
	border: 0;
	border-radius: 6px;
	background: rgba(15,23,42,.72);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 4px 0;
	cursor: pointer;
}
.tbook-ce-btn:hover { background: rgba(15,23,42,.9); }
.tbook-ce-btn.ce-edit { background: rgba(37,99,235,.85); }
.tbook-ce-btn.ce-edit:hover { background: rgba(37,99,235,1); }
.tbook-ce-btn.ce-cover { background: rgba(245,158,11,.85); }
.tbook-ce-btn.ce-cover:hover { background: rgba(245,158,11,1); }
.tbook-ce-item.is-cover { outline: 2px solid #f59e0b; outline-offset: -2px; }
.tbook-ce-item.is-cover::after {
	content: "Cover";
	position: absolute;
	left: 4px;
	top: 4px;
	padding: 1px 6px;
	border-radius: 6px;
	background: #f59e0b;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.tbook-ce-hint {
	margin: 0 0 4px;
	font-size: 12px;
	color: #94a3b8;
}

/* ---- Collection editor: buttons + layout ---- */
.tbook-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #334155;
	border-radius: 10px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.tbook-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.tbook-btn:active { transform: translateY(1px); }
.tbook-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.tbook-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.tbook-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.tbook-btn--soft { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.tbook-btn--soft:hover { background: #e0e7ff; border-color: #a5b4fc; }
.tbook-btn--danger { background: #fff; border-color: #fecaca; color: #dc2626; }
.tbook-btn--danger:hover { background: #fef2f2; border-color: #fca5a5; }

.tbook-ce-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748b;
}
.tbook-ce-name {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	font: inherit;
}
.tbook-ce-name:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.tbook-ce-add {
	margin-top: 16px;
	padding: 12px;
	border: 1px dashed #cbd5e1;
	border-radius: 14px;
	background: #f8fafc;
}
.tbook-ce-add__title {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #64748b;
}
.tbook-ce-add__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tbook-ce-add__group { margin-bottom: 12px; }
.tbook-ce-add__group:last-of-type { margin-bottom: 0; }
.tbook-ce-add__label {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}
.tbook-ce-add__row .tb-dest {
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.tbook-ce-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
}
.tbook-ce-actions__spacer { flex: 1; }

/* ---- "Add content" chooser ---- */
.tbook-choose-title { margin: 0 0 2px; font-size: 18px; }
.tbook-choose-lead { margin: 0 0 16px; font-size: 13px; color: #64748b; }
.tbook-choose-heading {
	margin: 20px 0 10px; font-size: 12px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: #64748b;
}
.tbook-choose-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.tbook-choose-card {
	display: flex; align-items: center; gap: 12px;
	width: 100%; padding: 10px; text-align: left;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
	cursor: pointer; font: inherit; color: inherit;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
.tbook-choose-card:hover {
	border-color: #93c5fd; box-shadow: 0 6px 18px rgba(37,99,235,.12); transform: translateY(-1px);
}
.tbook-choose-card__thumb {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
	overflow: hidden; background: #f1f5f9;
	display: flex; align-items: center; justify-content: center;
}
.tbook-choose-card__thumb img,
.tbook-choose-card__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbook-choose-card__thumb--icon {
	background: linear-gradient(135deg,#6366f1,#2563eb); color: #fff;
	font-size: 22px; line-height: 1; font-weight: 700;
}
.tbook-choose-card__letter { font-size: 20px; font-weight: 700; color: #64748b; }
.tbook-choose-card__text { display: flex; flex-direction: column; min-width: 0; }
.tbook-choose-card__title { font-weight: 600; font-size: 14px; color: #0f172a; }
.tbook-choose-card__sub {
	font-size: 12px; color: #64748b; margin-top: 1px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Caption editor */
.tbook-caption-input {
	width: 100%; box-sizing: border-box; min-height: 90px;
	padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px;
	font: inherit; resize: vertical;
}

.tbook-profile-form .tbook-ring-inset-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-weight: 500;
	cursor: pointer;
}
.tbook-profile-form .tbook-ring-inset-toggle input { width: auto; }

/* Ring position segmented control */
.tbook-ring-pos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tbook-pos-btn {
	appearance: none;
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #334155;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
}
.tbook-pos-btn.is-active {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
	font-weight: 600;
}

/* Editor range sliders — distinct track background */
.tbook-op-range,
.tbook-size-range,
.tbook-w-range,
.tbook-h-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: #c7d2fe;   /* indigo track */
	outline: none;
	margin: 8px 0 2px;
}
.tbook-op-range::-webkit-slider-thumb,
.tbook-size-range::-webkit-slider-thumb,
.tbook-w-range::-webkit-slider-thumb,
.tbook-h-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2563eb;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
	cursor: pointer;
}
.tbook-op-range::-moz-range-thumb,
.tbook-size-range::-moz-range-thumb,
.tbook-w-range::-moz-range-thumb,
.tbook-h-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2563eb;
	border: 2px solid #fff;
	cursor: pointer;
}

/* Drag-to-reorder feedback */
.tbook-highlight-tile-wrap[draggable="true"],
.tbook-ce-item[draggable="true"] { cursor: grab; }
.tbook-highlight-tile-wrap.is-dragging,
.tbook-ce-item.is-dragging { opacity: .4; }
.tbook-highlight-tile-wrap.is-over,
.tbook-ce-item.is-over { outline: 2px dashed #2563eb; outline-offset: 2px; border-radius: 12px; }

/* ==================== HIGHLIGHTS POLISH ==================== */
/* Tiles: lift on hover, count badge */
.tbook-highlight-tile__ring {
	transition: transform .18s ease, box-shadow .18s ease;
}
.tbook-highlight-tile-wrap:hover .tbook-highlight-tile__ring {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(15,23,42,.18);
}
.tbook-highlight-tile__count {
	position: absolute;
	right: -2px;
	bottom: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #0f172a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
/* Unseen items in a collection: an "N new" badge (the item count stays neutral). */
.tbook-highlight-tile__newdot {
	position: absolute;
	top: -5px;
	right: -5px;
	z-index: 5;
	pointer-events: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
	transform-origin: center;
	animation: tbook-new-pulse 1.4s ease-in-out infinite;
}
@keyframes tbook-new-pulse {
	0%, 100% { transform: scale(1); }
	15%      { transform: scale(1.3); }
	30%      { transform: scale(1); }
	48%      { transform: scale(1.2); }
	64%      { transform: scale(1); }
}

/* "New" chip on an unseen item in the story viewer. */
.tbook-story__new {
	position: absolute;
	top: 44px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(37,99,235,.95);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.tbook-highlights__empty-box {
	grid-column: 1 / -1;
	text-align: center;
	padding: 30px 10px;
	color: #64748b;
}
.tbook-highlights__empty-box p { margin: 0 0 14px; }

/* Push the drop target clearly while dragging a file over the editor grid */
.tbook-ce-grid.is-drop {
	outline: 2px dashed #2563eb;
	outline-offset: 5px;
	border-radius: 14px;
	background: #eff6ff;
}

/* Viewer: fade between slides + item counter */
@keyframes tbook-story-fade { from { opacity: 0; } to { opacity: 1; } }
.tbook-story__media > img,
.tbook-story__media > video { animation: tbook-story-fade .28s ease; }
.tbook-story__count { margin-left: auto; margin-right: 10px; font-weight: 600; font-size: 13px; opacity: .85; }

/* Editor layout: preview + side-by-side controllers */
.tbook-row {
	display: flex;
	gap: 16px;
	margin-top: 12px;
}
.tbook-row > div { flex: 1 1 0; min-width: 0; }
.tbook-hint { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.tbook-editor-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 0 10px;
	min-height: 140px;
	background: #f8fafc;
	border-radius: 12px;
	margin-top: 12px;
}
.tbook-editor-preview .tbook-ring { --tb-ring-speed: 4s; }
.tbook-editor-preview .tbook-ring__inner img { width: 96px; height: 96px; }

/* Center the profile name (and subtitle) in the highlights / profile modal head. */
.tbook-profile-head__meta { flex: 1 1 auto; text-align: center; }
.tbook-profile-head__name,
.tbook-profile-head__sub { text-align: center; }

/* Keep the profile action buttons (e.g. Edit profile) clear of the modal
 * close button, which sits absolutely in the top-right corner. */
.tbook-profile-head__actions { margin-top: 30px; }

/* Highlights banner: image behind the profile head (name area) in the modal. */
.tbook-profile-head--has-banner {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.tbook-profile-head--has-banner .tbook-profile-head__name,
.tbook-profile-head--has-banner .tbook-profile-head__sub,
.tbook-profile-head--has-banner .tbook-profile-head__actions { text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* Banner picker in the profile editor (under the About field). */
.tbook-banner-pick { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.tbook-banner-preview {
	display: inline-block;
	width: 72px;
	height: 40px;
	border-radius: 6px;
	border: 1px solid #dcdcde;
	background: #f0f1f3 center/cover no-repeat;
}

/* Banner colour control in the profile editor. */
.tbook-banner-color { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.tbook-banner-color input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid #dcdcde; border-radius: 6px; background: none; cursor: pointer; }

/* Banner opacity slider — same track/thumb as the other editor sliders. */
.tb-banner-op {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: #c7d2fe;
	outline: none;
	margin: 8px 0 2px;
}
.tb-banner-op::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; height: 18px; border-radius: 50%;
	background: #2563eb; border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.tb-banner-op::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%;
	background: #2563eb; border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}

/* Banner fit / zoom controls (under the image selection). */
.tbook-banner-fit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.tbook-banner-fit select { border: 1px solid #dcdcde; border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 13px; }
.tb-banner-zoom {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 8px; border-radius: 4px;
	background: #c7d2fe; outline: none; margin: 8px 0 2px;
}
.tb-banner-zoom::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 18px; height: 18px; border-radius: 50%;
	background: #2563eb; border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.tb-banner-zoom::-moz-range-thumb {
	width: 18px; height: 18px; border-radius: 50%;
	background: #2563eb; border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}

/* Contemporary modal loader (avatar / highlights / viewer popups). */
.tbook-modal-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 44px 0;
}
.tbook-loader-ring {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: conic-gradient( from 0deg, #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1 );
	-webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px) );
	mask: radial-gradient( farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px) );
	animation: tbook-spin .9s linear infinite;
}
@keyframes tbook-spin { to { transform: rotate(360deg); } }
.tbook-loader-lines { display: flex; flex-direction: column; gap: 8px; width: 260px; max-width: 72%; }
.tbook-loader-lines i {
	height: 12px;
	border-radius: 6px;
	background: linear-gradient( 90deg, #e5e7eb 25%, #f5f6f8 37%, #e5e7eb 63% );
	background-size: 400% 100%;
	animation: tbook-shimmer 1.4s ease infinite;
}
.tbook-loader-lines i:nth-child(2) { width: 82%; }
.tbook-loader-lines i:nth-child(3) { width: 58%; }
@keyframes tbook-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media ( prefers-reduced-motion: reduce ) {
	.tbook-loader-ring, .tbook-loader-lines i { animation: none; }
}

.tbook-loader-text {
	font-size: 13px;
	letter-spacing: .03em;
	color: #8a8f98;
	animation: tbook-loader-fade 1.6s ease-in-out infinite;
}
@keyframes tbook-loader-fade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media ( prefers-reduced-motion: reduce ) { .tbook-loader-text { animation: none; } }