/*
 * CSS for the Frontend of Tbook Guestbook plugin Add-On.
 */

/* SCEditor toolbar below iframe (mobile-friendly) */
.tbook-sceditor div.sceditor-toolbar {
	order: 2;
	background: #f7f7f7;
	border-bottom: 1px solid #b8b8b8;
	padding: 3px 5px;
}
.tbook-sceditor iframe {
	order: 1;
}
.tbook-sceditor textarea {
	order: 3;
}

/* Fullscreen editor: leave room for the WordPress admin bar so the top lines are not covered */
body.admin-bar .tbook-sceditor.sceditor-maximize {
	top: 32px !important;
	height: calc(100% - 32px) !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .tbook-sceditor.sceditor-maximize {
		top: 46px !important;
		height: calc(100% - 46px) !important;
	}
}

/* In fullscreen only, move the toolbar above the editor */
.tbook-sceditor.sceditor-maximize div.sceditor-toolbar {
	order: -1;
	border-top: 0;
	border-bottom: 1px solid #b8b8b8;
}

/* Give each toolbar group its own distinguishable gray box (matches original SCEditor default theme) */
.tbook-sceditor div.sceditor-group {
	background: #dcdcdc;
	border: 1px solid #b0b0b0;
	border-radius: 4px;
	display: inline-block;
	margin: 1px 6px 1px 0;
	padding: 1px 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tbook-sceditor div.sceditor-group:last-child {
	margin-right: 0;
}

/* Keep the toolbar buttons square and the 16px icons centred, regardless of a
 * theme's global box-sizing / line-height. A border-box rule would shrink each
 * 16px button below its 16px icon and push the icons out of the bottom-right. */
.tbook-sceditor div.sceditor-toolbar .sceditor-button {
	box-sizing: content-box !important;
	width: 16px;
	height: 16px;
	padding: 5px;
	line-height: 0;
	vertical-align: middle;
}
.tbook-sceditor div.sceditor-toolbar .sceditor-button div {
	box-sizing: content-box !important;
	margin: 0 auto;
}

/* Emoji/Element panels */
.tbook-panels-wrap {
	margin: 8px 0;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.tbook-sce-emoji-panel,
.tbook-sce-element-panel {
	padding: 6px 8px;
	max-height: 180px; /* 60% of the previous 300px */
	overflow: hidden;
}

/* Emoji / element grids: 4 rows, scroll HORIZONTALLY (not vertically).
 * NOTE: the emoji anchors live in an inner <div class="tbook_emoji_grid">,
 * while the element anchors are direct children of .tbook-emoji-grid. */
.tbook-sce-emoji-panel .tbook_emoji_grid,
.tbook-sce-element-panel .tbook-emoji-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, 1fr);
	gap: 3px;
	height: 134px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px 0;
	scrollbar-width: thin;
	scrollbar-color: #94a3b8 transparent;
}
/* The emoji grid wrapper should not clip the inner scrolling grid */
.tbook-sce-emoji-panel .tbook-emoji-grid {
	overflow: visible;
}
.tbook-sce-emoji-panel .tbook_emoji_grid::-webkit-scrollbar,
.tbook-sce-element-panel .tbook-emoji-grid::-webkit-scrollbar {
	height: 8px;
}
.tbook-sce-emoji-panel .tbook_emoji_grid::-webkit-scrollbar-track,
.tbook-sce-element-panel .tbook-emoji-grid::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 5px;
}
.tbook-sce-emoji-panel .tbook_emoji_grid::-webkit-scrollbar-thumb,
.tbook-sce-element-panel .tbook-emoji-grid::-webkit-scrollbar-thumb {
	background: #94a3b8;
	border-radius: 5px;
}
.tbook-panel-loading,
.tbook-panel-error,
.tbook-panel-empty {
	text-align: center;
	padding: 20px;
	color: #64748b;
	font-size: 14px;
}
/* Size picker */
.tbook-emoji-size-picker {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	flex-wrap: wrap;
}
/* Emoji size popover - matches v3.7 design */
.tbook-emoji-size-pop {
	position: fixed;
	z-index: 10001;
	background: #ffffff;
	border: 1px solid #d5dde5;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(21,34,48,0.18);
	padding: 10px 12px 12px;
	min-width: 200px;
	max-width: 260px;
	display: none;
}
.tbook-emoji-size-pop.is-open {
	display: block;
}
.tbook-emoji-size-pop-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tbook-emoji-size-pop-title { flex: 1; }
.tbook-emoji-size-pop-val {
	font-variant-numeric: tabular-nums;
	min-width: 2.5em;
	text-align: right;
}
.tbook-emoji-size-pop-close {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.tbook-emoji-size-pop-close:hover { color: #334155; }
.tbook-emoji-size-pop-range {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	accent-color: #0a7dff;
}
.tbook-emoji-size-pop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
}
.tbook-emoji-size-pop-chip {
	appearance: none;
	border: 1px solid #d5dde5;
	border-radius: 6px;
	background: #f8fafc;
	padding: 3px 7px;
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.1s ease, border-color 0.1s ease;
}
.tbook-emoji-size-pop-chip:hover { background: #e2e8f0; }
.tbook-emoji-size-pop-chip.is-active {
	background: #0a7dff;
	border-color: #0a7dff;
	color: #ffffff;
}
.tbook-emoji-size-pop-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tbook-emoji-size-pop-num {
	flex: 1 1 60px;
	min-width: 0;
	border: 1px solid #d5dde5;
	border-radius: 6px;
	padding: 4px 6px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	outline: none;
}
.tbook-emoji-size-pop-num:focus {
	border-color: #0a7dff;
	box-shadow: 0 0 0 1px #0a7dff;
}
.tbook-emoji-size-pop-remove {
	appearance: none;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	background: #fef2f2;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #dc2626;
	cursor: pointer;
	white-space: nowrap;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.1s ease;
}
.tbook-emoji-size-pop-remove:hover { background: #fee2e2; }


div.gb-social-media-share img {
	float: left;
	cursor: pointer;
}


/*
 * Twitter-style gallery for multiple images in an entry.
 */
div.tbook-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}
div.tbook-gallery a.tbook-gallery-item {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 0;
	background: #e8eaed;
}
div.tbook-gallery a.tbook-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}
div.tbook-gallery-1 {
	grid-template-columns: 1fr;
	text-align: center;
}
div.tbook-gallery-1 a.tbook-gallery-item img {
	aspect-ratio: auto;
	height: auto;
	max-height: 480px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
}
/* Reserve the image's box from its intrinsic ratio so lazy-loading never
 * changes the entry height (and the two-column pack never has to move). */
div.tbook-gallery-1 a.tbook-gallery-item img[style*="--tbook-ar"] {
	width: 100%;
	height: auto;
	aspect-ratio: var(--tbook-ar);
	object-fit: contain;
	max-height: 480px;
}

/* WordPress shortcode embed container — isolated from TBook styles */
.tbook-shortcode-embed {
	isolation: isolate;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}
.tbook-shortcode-embed iframe,
.tbook-shortcode-embed video,
.tbook-shortcode-embed audio {
	max-width: 100%;
	height: auto;
}

/* Embed modal */
.tbook-embed-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
	padding: 20px;
}
.tbook-embed-modal-content {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	max-width: 560px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.tbook-embed-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.tbook-embed-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tbook-embed-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #64748b; }
.tbook-embed-modal-body { padding: 20px; overflow-y: auto; }
.tbook-embed-field { margin-bottom: 12px; }
.tbook-embed-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.tbook-embed-field input,
.tbook-embed-field select { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }
.tbook-embed-row { display: flex; gap: 12px; margin-bottom: 12px; }
.tbook-embed-row .tbook-embed-field { flex: 1; margin-bottom: 0; }
.tbook-embed-hint { font-size: 12px; color: #888; margin: 4px 0 0; }
.tbook-btn-iconwrap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tbook-btn-iconwrap .tbook-btn-iconimg { flex: 1 1 200px; min-width: 140px; }
.tbook-btn-iconpreview img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #f1f3f5; padding: 2px; display: block; }
.tbook-embed-modal-footer { padding: 16px 20px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 8px; }

/* Post background picker (shares the embed modal shell) */
.tbook-postbg-preview {
	margin-bottom: 12px;
	min-height: 130px;
	border-radius: 10px;
	overflow: hidden;
	background: #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tbook-postbg-preview img,
.tbook-postbg-preview video { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.tbook-postbg-empty { padding: 40px 10px; color: #94a3b8; font-size: 13px; }
.tbook-postbg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tbook-postbg-row button,
.tbook-postbg-cancel,
.tbook-postbg-remove,
.tbook-postbg-apply {
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #334155;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.tbook-postbg-row button:hover,
.tbook-postbg-cancel:hover,
.tbook-postbg-remove:hover { background: #eef2f6; }
.tbook-postbg-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.tbook-postbg-primary:hover { background: #1d4ed8; }

/* Schedule modal — same pattern as draft modal */
.tbook-schedule-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
	padding: 20px;
}
.tbook-schedule-modal:not([hidden]) {
	display: flex !important;
}
.tbook-schedule-modal-content {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	max-width: 560px;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.tbook-schedule-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.tbook-schedule-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tbook-schedule-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #64748b; padding: 0 4px; line-height: 1; }
.tbook-schedule-modal-body { padding: 20px; }
.tbook-schedule-fields { display: flex; gap: 12px; margin: 10px 0; }
.tbook-schedule-field { flex: 1; }
.tbook-schedule-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.tbook-schedule-field input { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.tbook-schedule-save-btn { margin-top: 8px; }
.tbook-schedule-save-status { margin-left: 10px; font-size: 13px; }
.tbook-schedule-list { margin-top: 16px; }
.tbook-schedule-items { display: flex; flex-direction: column; gap: 8px; }
.tbook-schedule-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f8fafc;
}
.tbook-schedule-item-info { flex: 1; min-width: 0; }
.tbook-schedule-item-date { font-size: 12px; color: #94a3b8; font-weight: 500; display: block; }
.tbook-schedule-item-excerpt { font-size: 13px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbook-schedule-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tbook-schedule-item-actions .button { padding: 5px 14px !important; font-size: 12px !important; border-radius: 6px !important; font-weight: 500; }
.tbook-schedule-edit-btn { background-color: #2271b1 !important; color: #fff !important; border: 0 !important; }
.tbook-schedule-edit-btn:hover { background-color: #135e96 !important; }
.tbook-schedule-cancel-btn { background-color: #fff !important; color: #dc3545 !important; border: 1px solid #dc3545 !important; }
.tbook-schedule-cancel-btn:hover { background-color: #dc3545 !important; color: #fff !important; }
div.tbook-gallery-3 {
	grid-template-columns: 2fr 1fr;
}
div.tbook-gallery-3 a.tbook-gallery-item:first-child {
	grid-row: span 2;
}
@media (max-width: 600px) {
	div.tbook-gallery-3 {
		grid-template-columns: 1fr 1fr;
	}
	div.tbook-gallery-3 a.tbook-gallery-item:first-child {
		grid-row: auto;
	}
}


/*
 * Multiple file upload for the form.
 * The file chooser gets its own full-width row, the discard button sits
 * below it, and the description is a small caption under everything.
 */
div.tbook-gb-addon-upload-container .input.tbook-gb-upload {
	display: block;
}
div.tbook-gb-addon-upload-container .tbook-gb-addon-upload-media {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin-bottom: 8px;
	border: 1px dashed #c9ccd1;
	border-radius: 10px;
	background-color: #fafbfc;
	color: #444444;
	font-size: 14px;
}
div.tbook-gb-addon-upload-container .tbook-gb-addon-upload-media::file-selector-button {
	margin: -10px 12px -10px -12px;
	padding: 12px 22px;
	border: 0;
	border-radius: 9px 0 0 9px;
	background-color: #2271b1;
	background-image: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
div.tbook-gb-addon-upload-container .tbook-gb-addon-upload-media:hover::file-selector-button {
	background-color: #135e96;
}
div.tbook-gb-addon-upload-container .tbook-gb-addon-discard-button {
	display: inline-block;
	white-space: nowrap;
	padding: 12px 22px;
	border: 1px solid #c9ccd1;
	border-radius: 10px;
	background-color: #ffffff;
	background-image: none;
	color: #333333;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
div.tbook-gb-addon-upload-container .tbook-gb-addon-discard-button:hover {
	background-color: #f1f2f4;
	border-color: #b5b9bf;
}
div.tbook-gb-addon-upload-container .label {
	float: none;
	width: 100%;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.5;
	color: #666666;
}
div.tbook-gb-addon-upload-container .label label {
	font-weight: normal;
	font-size: inherit;
}
div.tbook-gb-addon-upload-destination-wrap {
	display: inline-block;
	position: relative;
	margin-bottom: 8px;
	margin-right: 8px;
}
div.tbook-gb-addon-upload-destination-label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: #555;
}
div.tbook-gb-addon-upload-destination-dropdown {
	display: inline-flex;
	align-items: center;
	padding: 10px 36px 10px 14px;
	border: 1px solid #c9ccd1;
	border-radius: 10px;
	background-color: #ffffff;
	color: #333333;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	user-select: none;
	min-width: 160px;
	transition: border-color 0.15s ease;
}
div.tbook-gb-addon-upload-destination-dropdown:hover {
	border-color: #2271b1;
}
div.tbook-gb-addon-upload-destination-dropdown[data-tbook-open="true"] {
	border-color: #2271b1;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
div.tbook-gb-addon-upload-destination-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	color: #666;
	transition: transform 0.2s ease;
	pointer-events: none;
}
div.tbook-gb-addon-upload-destination-dropdown[data-tbook-open="true"] .tbook-gb-addon-upload-destination-arrow {
	transform: translateY(-50%) rotate(180deg);
}
div.tbook-gb-addon-upload-destination-options {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid #2271b1;
	border-top: 1px solid #e0e0e0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index: 100;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
div.tbook-gb-addon-upload-destination-dropdown[data-tbook-open="true"] .tbook-gb-addon-upload-destination-options {
	display: block;
}
div.tbook-gb-addon-upload-destination-option {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	transition: background-color 0.1s ease;
}
div.tbook-gb-addon-upload-destination-option:hover {
	background-color: #f0f6ff;
}
div.tbook-gb-addon-upload-destination-option[data-selected="true"] {
	background-color: #2271b1;
	color: #ffffff;
	font-weight: 600;
}
div.tbook-gb-addon-upload-message {
	margin-top: 8px;
	font-size: 13px;
}
.tbook-gb-addon-media-library-btn,
.tbook-gb form.tbook-gb-write .tbook-gb-addon-media-library-btn {
	display: inline-block !important;
	white-space: nowrap;
	padding: 12px 22px !important;
	border: 1px solid #2271b1 !important;
	border-radius: 10px !important;
	background-color: #2271b1 !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-shadow: none !important;
	cursor: pointer;
	margin: 4px 0 !important;
	vertical-align: middle;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tbook-gb-addon-media-library-btn:hover {
	background-color: #135e96 !important;
	border-color: #135e96 !important;
}


/*
 * HTML5 players for video and audio in an entry.
 */
 video.tbook-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 480px;
	border-radius: 10px;
	margin: 10px 0;
	background: #000000;
}
video.tbook-video::-webkit-media-controls-download-button {
	display: none !important;
}
/* Once Video.js takes over, it owns the sizing — neutralise the fixed-size
 * rules above so the fluid player box wins. */
.video-js.vjs-fluid video.tbook-video,
.video-js video.tbook-video.vjs-tech {
	width: 100% !important;
	height: 100% !important;
	max-height: none;
	aspect-ratio: auto;
	border-radius: 0;
	margin: 0;
	background: transparent;
	cursor: default;
}
/* Keep the player at a sane size inside entries (like the Video.js demo).
 * We drive the box with CSS aspect-ratio (set from the real video dimensions)
 * and neutralise Video.js's padding-based fluid sizing, which can emit a stale
 * pixel height for videos whose dimensions aren't ready at init. */
.video-js.vjs-fluid {
	display: block !important;
	/* Keep the box at the video's aspect ratio and, when a max-height cap is
	 * set, shrink the WIDTH so the cap is met by ratio — never letterboxing
	 * (which made the control bar wider than the video). */
	width: min(100%, calc(var(--tb-cap-h, 100000px) * var(--tbook-vjs-ar, 16 / 9)));
	max-width: 640px;
	margin: 10px auto !important;
	height: auto !important;
	padding-top: 0 !important;
	aspect-ratio: var(--tbook-vjs-ar, 16 / 9);
}
.video-js.vjs-fluid > video.vjs-tech {
	position: absolute;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
}
/* Never stretch the frame: show the full picture (letterbox if the player box
 * aspect differs from the video, e.g. when a max-height cap applies). */
.video-js video.vjs-tech { object-fit: contain; }
/* Centre entry videos automatically, so no manual [center] tag is needed. */
video.tbook-video:not(.video-js) { margin-left: auto; margin-right: auto; }
.tbook-video-wrap { margin-left: auto; margin-right: auto; }
audio.tbook-audio::-webkit-media-controls-download-button {
	display: none !important;
}
audio.tbook-audio {
	display: block;
	width: 100%;
	max-width: 100%;
	/* No vertical margin — the player must not add space of its own. */
	margin: 0 auto;
	border-radius: 10px;
}

/*
 * Emoji panel wrapper - standalone card with its own border.
 */
.tbook_emoji {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	margin-top: 8px;
	overflow: visible;
}

/*
 * Inline emoji grid in the frontend form.
 */
.tbook_emoji .tbook_emoji_grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(4, 36px);
	gap: 4px;
	max-height: 172px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: #94a3b8 transparent;
}
.tbook_emoji .tbook_emoji_grid::-webkit-scrollbar {
	height: 10px;
}
.tbook_emoji .tbook_emoji_grid::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 5px;
}
.tbook_emoji .tbook_emoji_grid::-webkit-scrollbar-thumb {
	background: #94a3b8;
	border-radius: 5px;
}
.tbook_emoji .tbook_emoji_grid::-webkit-scrollbar-thumb:hover {
	background: #64748b;
}
.tbook_emoji .tbook_emoji_grid a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	transition: background-color 0.12s ease, transform 0.12s ease;
}
.tbook_emoji .tbook_emoji_grid a:hover {
	background-color: #eef4fb;
	transform: scale(1.1);
}
.tbook_emoji .tbook_emoji_grid a:active {
	background-color: #d8e7f7;
	transform: scale(0.95);
}
.tbook_emoji .tbook_emoji_grid a img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.tbook-inline-emoji-img {
	vertical-align: middle;
}


/*
 * Emoji/Element controls: search box and folder dropdown.
 */
.tbook-emoji-controls {
	display: flex;
	gap: 8px;
	margin-bottom: 0;
	padding: 8px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.tbook-emoji-search {
	flex: 3;
	min-width: 120px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 18px;
}
.tbook-emoji-search::placeholder {
	font-size: 18px;
}
.tbook-emoji-search:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 1px #0073aa;
}
.tbook-emoji-folder {
	flex: 2;
	max-width: 200px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 13px;
	background: white;
	cursor: pointer;
}
.tbook-emoji-section,
.tbook-element-section {
	border-top: 1px solid #e2e8f0;
	padding-top: 0;
}
.tbook-element-section {
	margin-top: 0;
}
.tbook-element-section .tbook-emoji-grid {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(3, 40px);
	gap: 4px;
	max-height: 140px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: #94a3b8 transparent;
}
.tbook-element-section .tbook-emoji-grid::-webkit-scrollbar {
	height: 10px;
}
.tbook-element-section .tbook-emoji-grid::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 5px;
}
.tbook-element-section .tbook-emoji-grid::-webkit-scrollbar-thumb {
	background: #94a3b8;
	border-radius: 5px;
}
.tbook-element-section .tbook-emoji-grid::-webkit-scrollbar-thumb:hover {
	background: #64748b;
}
.tbook-element-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.12s ease;
}
.tbook-element-item img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	vertical-align: middle;
}
.tbook-element-item:hover {
	background: #f0f0f0;
	border-radius: 4px;
}


/*
 * Caption under a video or audio player in an entry.
 */
p.tbook-media-caption {
	/* No extra space below the player; the author controls spacing. */
	margin: 0;
	padding: 0 2px;
	font-size: 14px;
	line-height: 1.4;
	opacity: 0.85;
}


/*
 * Caption window that asks for an optional caption per uploaded file.
 * Appears after choosing files, before the upload starts.
 */
div.tbook-upload-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	max-width: 560px;
	max-height: 85vh;
	margin: auto;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
div.tbook-upload-modal-header {
	position: relative;
	flex: 0 0 auto;
	padding: 16px 20px 12px;
	border-bottom: 1px solid #e5e7eb;
}
div.tbook-upload-modal-header h3 {
	margin: 0 32px 4px 0;
	font-size: 18px;
	line-height: 1.3;
}
div.tbook-upload-modal-header p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #555555;
}
button.tbook-upload-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f2f4;
	color: #333333;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
button.tbook-upload-modal-close:hover {
	background: #e2e4e8;
}
div.tbook-upload-modal-list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 20px;
}
div.tbook-upload-modal-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f0f1f3;
}
div.tbook-upload-modal-item:last-child {
	border-bottom: 0;
}
span.tbook-upload-modal-preview {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #f1f2f4;
	overflow: hidden;
}
span.tbook-upload-modal-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
div.tbook-upload-modal-file {
	flex: 1 1 auto;
	min-width: 0;
}
span.tbook-upload-modal-name {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
input.tbook-upload-modal-caption {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #c9ccd1;
	border-radius: 6px;
	font-size: 14px;
}
input.tbook-upload-modal-caption:focus {
	border-color: #2271b1;
	outline: none;
}
div.tbook-upload-modal-footer {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid #e5e7eb;
}
button.tbook-upload-modal-upload,
button.tbook-upload-modal-skip {
	padding: 10px 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 14px;
	cursor: pointer;
}
button.tbook-upload-modal-upload {
	background: #2271b1;
	color: #ffffff;
}
button.tbook-upload-modal-upload:hover {
	background: #135e96;
}
button.tbook-upload-modal-skip {
	background: transparent;
	color: #2271b1;
	border-color: #c9ccd1;
}
button.tbook-upload-modal-skip:hover {
	background: #f1f2f4;
}
button.tbook-upload-modal-cancel {
	margin-right: auto; /* keep Cancel on the left, Upload on the right */
	padding: 10px 18px;
	border-radius: 6px;
	border: 1px solid #f0b4b4;
	background: transparent;
	color: #b3261e;
	font-size: 14px;
	cursor: pointer;
}
button.tbook-upload-modal-cancel:hover {
	background: #fff0f0;
}
/* Upload progress bar with a live percentage. */
.tbook-upload-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.tbook-upload-progress__label {
	flex: 1 1 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}
.tbook-upload-progress__track {
	flex: 1 1 auto;
	height: 8px;
	min-width: 120px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .12);
	overflow: hidden;
}
.tbook-upload-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: #2271b1;
	transition: width .15s linear;
}
.tbook-upload-progress__pct {
	flex: 0 0 auto;
	min-width: 40px;
	text-align: right;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
/* Inline Cancel shown next to the "Uploading x of y" progress. */
button.tbook-gb-addon-upload-cancel {
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 6px;
	border: 1px solid #c9ccd1;
	background: transparent;
	color: #2271b1;
	font-size: 13px;
	cursor: pointer;
}
button.tbook-gb-addon-upload-cancel:hover {
	background: #f1f2f4;
}
button.tbook-gb-addon-upload-cancel:disabled {
	opacity: .6;
	cursor: default;
}
@media (max-width: 600px) {
	div.tbook-upload-modal {
		max-width: 95%;
		max-height: 80vh;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: auto;
		margin: 0 auto;
		border-radius: 8px;
	}
}


/*
 * Caption bar inside the PhotoSwipe lightbox.
 * The colors and font size are set with inline CSS from the settings page.
 */
div.tbook-pswp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: none;
	max-width: 100%;
	box-sizing: border-box;
	padding: 16px 72px;
	text-align: center;
	line-height: 1.5;
	pointer-events: none;
}
div.tbook-pswp-caption.is-visible {
	display: block;
}
@media (max-width: 600px) {
	div.tbook-pswp-caption {
		padding: 12px 16px;
	}
}


/*
 * Book filters: a collapsible bar that expands vertically into a menu of
 * filter options, each with an icon.
 */
div.tbook-filters-wrap {
	margin: 0 0 16px;
}
button.tbook-filters-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	background: #f6f7f7;
	color: #1d2327;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
button.tbook-filters-toggle:hover {
	background: #f0f0f1;
}
button.tbook-filters-toggle:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}
span.tbook-filters-toggle-plus {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: #2271b1;
}
div.tbook-filters-menu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}
div.tbook-filters-wrap.is-open div.tbook-filters-menu {
	grid-template-rows: 1fr;
}
div.tbook-filters-menu-inner {
	overflow: hidden;
	min-height: 0;
}
div.tbook-filters-menu-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
	padding: 8px;
	background: #ffffff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
}
button.tbook-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #ffffff;
	color: #1d2327;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
button.tbook-filter:hover {
	background: #f6f7f7;
	border-color: #c3c4c7;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
button.tbook-filter:active {
	transform: translateY(0);
	box-shadow: none;
}
button.tbook-filter:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}
button.tbook-filter[aria-pressed="true"] {
	background: #e5f0fa;
	border-color: #2271b1;
	color: #135e96;
}
/* Icon chip: a rounded, fixed-size container so emoji and Media Library
 * images align identically inside every filter button. */
span.tbook-filter-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.9em;
	height: 1.9em;
	font-size: 20px;
	line-height: 1;
	border-radius: 8px;
	background: var(--tbook-filter-icon-bg, #f0f1f3);
	overflow: hidden;
}
span.tbook-filter-icon img {
	width: 74%;
	height: 74%;
	object-fit: contain;
	display: block;
}
span.tbook-filter-label {
	flex: 1;
	min-width: 0;
}
span.tbook-filter-count {
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #2271b1;
	color: #ffffff;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
/* Collections chevron rotates when its submenu is open. */
button.tbook-filter .tbook-filter-toggle-arrow {
	transition: transform .18s ease;
}
button.tbook-filter[aria-expanded="true"] .tbook-filter-toggle-arrow {
	transform: rotate(180deg);
}


/*
 * Media popup with an Instagram-like grid of all media of the book.
 * The modal element covers the full screen as a dimmed backdrop; the header
 * and the grid body form the white card in the middle.
 */
div.tbook-media-modal {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, var(--tbook-popup-backdrop-opacity, 0.55));
}
div.tbook-media-modal[hidden] {
	display: none;
}
div.tbook-media-modal-header,
div.tbook-media-modal-body {
	width: 100%;
	max-width: 1200px;
	background: var(--tbook-popup-bgcolor, #ffffff);
	box-shadow: var(--tbook-popup-shadow, none);
}
div.tbook-media-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f1;
	border-radius: var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px) 0 0;
}
div.tbook-media-modal-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}
button.tbook-media-modal-close,
button.tbook-media-player-close {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1d2327;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
button.tbook-media-modal-close:hover,
button.tbook-media-player-close:hover {
	background: #f0f0f1;
}
div.tbook-media-modal-body {
	max-height: 72vh;
	overflow-y: auto;
	padding: 12px;
	border-radius: 0 0 var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px);
}
body.tbook-media-modal-open,
body.tbook-slider-modal-open {
	overflow: hidden;
}
/* Nuclear fix: override ALL transforms when any modal is open, except PhotoSwipe. */
body.tbook-media-modal-open *:not(.pswp *),
body.tbook-slider-modal-open *:not(.pswp *) {
	-webkit-transform: none !important;
	-ms-transform: none !important;
	transform: none !important;
	transition: none !important;
}
/* Restore transitions on modals */
body.tbook-media-modal-open .tbook-media-modal,
body.tbook-media-modal-open .tbook-slider-modal,
body.tbook-media-modal-open .tbook-album-modal,
body.tbook-slider-modal .tbook-slider-modal {
	transition: opacity 0.2s ease !important;
}


/*
 * Grid tiles inside the media popup.
 * The number of columns comes from the filters settings, per device width.
 */
div.tbook-gallery.tbook-media-grid {
	grid-template-columns: repeat(var(--tbook-cols-mobile, 2), 1fr);
	gap: var(--tbook-media-gap, 4px);
}
@media (min-width: 768px) {
	div.tbook-gallery.tbook-media-grid {
		grid-template-columns: repeat(var(--tbook-cols-tablet, 3), 1fr);
	}
}
@media (min-width: 1024px) {
	div.tbook-gallery.tbook-media-grid {
		grid-template-columns: repeat(var(--tbook-cols-desktop, 4), 1fr);
	}
}
div.tbook-gallery.tbook-media-grid-cols-desktop-2 { --tbook-cols-desktop: 2; }
div.tbook-gallery.tbook-media-grid-cols-desktop-3 { --tbook-cols-desktop: 3; }
div.tbook-gallery.tbook-media-grid-cols-desktop-4 { --tbook-cols-desktop: 4; }
div.tbook-gallery.tbook-media-grid-cols-desktop-5 { --tbook-cols-desktop: 5; }
div.tbook-gallery.tbook-media-grid-cols-desktop-6 { --tbook-cols-desktop: 6; }
div.tbook-gallery.tbook-media-grid-cols-tablet-2 { --tbook-cols-tablet: 2; }
div.tbook-gallery.tbook-media-grid-cols-tablet-3 { --tbook-cols-tablet: 3; }
div.tbook-gallery.tbook-media-grid-cols-tablet-4 { --tbook-cols-tablet: 4; }
div.tbook-gallery.tbook-media-grid-cols-tablet-5 { --tbook-cols-tablet: 5; }
div.tbook-gallery.tbook-media-grid-cols-tablet-6 { --tbook-cols-tablet: 6; }
div.tbook-gallery.tbook-media-grid-cols-mobile-2 { --tbook-cols-mobile: 2; }
div.tbook-gallery.tbook-media-grid-cols-mobile-3 { --tbook-cols-mobile: 3; }
div.tbook-gallery.tbook-media-grid-cols-mobile-4 { --tbook-cols-mobile: 4; }
div.tbook-gallery.tbook-media-grid-cols-mobile-5 { --tbook-cols-mobile: 5; }
div.tbook-gallery.tbook-media-grid-cols-mobile-6 { --tbook-cols-mobile: 6; }
/* Creative grid: masonry-like, keeps the natural proportions of the images. */
div.tbook-gallery.tbook-media-grid-creative {
	display: block;
	columns: var(--tbook-cols-mobile, 2);
	column-gap: var(--tbook-media-gap, 4px);
}
@media (min-width: 768px) {
	div.tbook-gallery.tbook-media-grid-creative {
		columns: var(--tbook-cols-tablet, 3);
	}
}
@media (min-width: 1024px) {
	div.tbook-gallery.tbook-media-grid-creative {
		columns: var(--tbook-cols-desktop, 4);
	}
}
div.tbook-gallery.tbook-media-grid-creative a.tbook-gallery-item,
div.tbook-gallery.tbook-media-grid-creative button.tbook-media-item {
	display: inline-block;
	width: 100%;
	margin: 0 0 var(--tbook-media-gap, 4px);
	aspect-ratio: auto;
	break-inside: avoid;
}
div.tbook-gallery.tbook-media-grid-creative a.tbook-gallery-item img {
	aspect-ratio: auto;
	height: auto;
}
div.tbook-gallery.tbook-media-grid-creative button.tbook-media-video {
	aspect-ratio: 16 / 9;
}
div.tbook-gallery.tbook-media-grid-creative button.tbook-media-audio {
	aspect-ratio: 1 / 1;
}
/* Load more bar for the batch loading of the media grid. */
div.tbook-media-load-wrap {
	padding: 4px 0;
	text-align: center;
}
button.tbook-media-load-more {
	display: block;
	width: 100%;
	padding: 10px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #f6f7f7;
	color: #50575e;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
button.tbook-media-load-more:hover {
	background: #e8eaed;
}
div.tbook-gallery.tbook-media-grid a.tbook-gallery-item {
	overflow: hidden;
	border-radius: var(--tbook-media-radius, 0);
}
div.tbook-gallery.tbook-media-grid button.tbook-media-item {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	background: #e8eaed;
	border-radius: var(--tbook-media-radius, 0);
}
video.tbook-media-video-poster {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}
span.tbook-media-item-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 26px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	background: rgba(0, 0, 0, 0.22);
}
span.tbook-media-item-audio-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 36px;
	background: linear-gradient(135deg, #7c5cff, #2271b1);
}
div.tbook-media-grid button.tbook-media-item:hover span.tbook-media-item-overlay {
	background: rgba(0, 0, 0, 0.35);
}
/* Tile shadow, from the filters styling settings. */
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-soft a.tbook-gallery-item,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-soft button.tbook-media-item {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-medium a.tbook-gallery-item,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-medium button.tbook-media-item {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
}
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-strong a.tbook-gallery-item,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-shadow-strong button.tbook-media-item {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
/* Hover effect on the tiles, from the filters styling settings. */
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-fade a.tbook-gallery-item,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-fade button.tbook-media-item {
	transition: opacity 0.2s ease;
}
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-fade a.tbook-gallery-item:hover,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-fade button.tbook-media-item:hover {
	opacity: 0.75;
}
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-darken a.tbook-gallery-item::after,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-darken button.tbook-media-item::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0);
	transition: background 0.2s ease;
	pointer-events: none;
}
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-darken a.tbook-gallery-item:hover::after,
div.tbook-gallery.tbook-media-grid.tbook-media-grid-hover-darken button.tbook-media-item:hover::after {
	background: rgba(0, 0, 0, 0.35);
}
span.tbook-media-date {
	position: absolute;
	left: 6px;
	bottom: 6px;
	z-index: 2;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}


/*
 * Player popup for video and audio tiles of the media grid.
 */
div.tbook-media-player {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, var(--tbook-popup-backdrop-opacity, 0.55));
}
div.tbook-media-player-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 1200px;
	background: var(--tbook-popup-bgcolor, #ffffff);
	box-shadow: var(--tbook-popup-shadow, none);
	padding: 12px 16px;
	border-radius: var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px) 0 0;
}
div.tbook-media-player-header h3 {
	margin: 0;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
div.tbook-media-player-body {
	width: 100%;
	max-width: 1200px;
	background: var(--tbook-popup-bgcolor, #ffffff);
	box-shadow: var(--tbook-popup-shadow, none);
	padding: 16px;
	text-align: center;
	border-radius: 0 0 var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px);
}
div.tbook-media-player-body video,
div.tbook-media-player-body audio {
	width: 100%;
	max-height: 60vh;
}
div.tbook-media-player-body audio {
	max-width: 480px;
	margin: 0 auto;
}
p.tbook-media-player-caption {
	margin: 12px 0 0;
	font-size: 14px;
	color: #50575e;
}
body.tbook-media-player-open {
	overflow: hidden;
}

/* Custom video player – no native controls, no download. */
div.tbook-video-player {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	line-height: 0;
}
div.tbook-video-player video {
	display: block;
	width: 100%;
	max-height: 70vh;
}
div.tbook-video-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 24px;
	cursor: pointer;
	line-height: 64px;
	text-align: center;
	transition: background 0.2s;
}
div.tbook-video-overlay:hover {
	background: rgba(0, 0, 0, 0.8);
}
div.tbook-video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 13px;
}
div.tbook-video-controls button {
	background: transparent;
	border: 0;
	color: #ffffff;
	padding: 0;
	margin: 0;
	width: 28px;
	height: 28px;
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
}
div.tbook-video-controls button:hover {
	color: #cccccc;
}
div.tbook-video-progress {
	flex: 1;
	height: 6px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
div.tbook-video-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #ffffff;
	border-radius: 3px;
	width: 0;
	pointer-events: none;
}
div.tbook-video-time {
	white-space: nowrap;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	div.tbook-media-modal,
	div.tbook-media-player {
		padding: 10px;
	}
	div.tbook-media-modal-body {
		max-height: 80vh;
	}
	div.tbook-slider-modal {
		padding: 10px;
	}
}


/*
 * Slider popup of the entries list.
 * The "Slider" button in the filters menu opens a popup that shows all
 * entries of the book one at a time in a horizontal slider, so visitors can
 * swipe or drag to browse them. It mirrors the media popup: a full-screen
 * dimmed backdrop with a card that has a header and a body that holds the
 * slider. The popup has no fixed height: it grows and shrinks to fit the
 * currently visible entry. The vertical list of entries below stays untouched.
 */
div.tbook-slider-modal {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	overflow-y: auto;
	padding: 24px;
	background: rgba(0, 0, 0, var(--tbook-popup-backdrop-opacity, 0.55));
}
div.tbook-slider-modal[hidden] {
	display: none;
}
div.tbook-slider-modal-card {
	/* Pin the top: the slide height changes with each entry, and vertical
	 * centring made the title bar (with the arrows) jump up and down. */
	margin: 0 auto;
	align-self: flex-start;
	width: 100%;
	max-width: 1200px;
	background: var(--tbook-popup-bgcolor, #ffffff);
	border-radius: var(--tbook-popup-radius, 12px);
	box-shadow: var(--tbook-popup-shadow, none);
	overflow: hidden;
}
div.tbook-slider-modal-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f1;
}
div.tbook-slider-modal-header h3 {
	grid-column: 1;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}
/* Arrows live on the title bar, centred between the title and the close button. */
div.tbook-slider-modal-header .tbook-entries-slider-controls {
	grid-column: 2;
	justify-self: center;
	gap: 8px;
	padding: 0;
}
div.tbook-slider-modal-header button.tbook-entries-slider-prev,
div.tbook-slider-modal-header button.tbook-entries-slider-next {
	width: 30px;
	height: 30px;
	font-size: 18px;
}
div.tbook-slider-modal-header .tbook-slider-modal-close {
	grid-column: 3;
	justify-self: end;
}
button.tbook-slider-modal-close {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #1d2327;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
button.tbook-slider-modal-close:hover {
	background: #f0f0f1;
}
div.tbook-slider-modal-body {
	padding: 12px;
}
body.tbook-slider-modal-open {
	overflow: hidden;
}
div.tbook-slider-modal-body .tbook-entries-slider {
	display: flex;
	flex-direction: column;
}
div.tbook-slider-modal-body .tbook-entries-slider-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	touch-action: pan-x pan-y;
	scrollbar-width: none;
	transition: height 0.25s ease;
}
div.tbook-slider-modal-body .tbook-entries-slider-track::-webkit-scrollbar {
	display: none;
}
div.tbook-slider-modal-body .tbook-entries-slider-track > .gb-entry {
	flex: 0 0 calc(100% - 5px);
	width: calc(100% - 5px);
	box-sizing: border-box;
	margin: 0 0 0 5px;
	padding: 10px 20px !important;
	scroll-snap-align: start;
}
div.tbook-entries-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 0 4px;
}
button.tbook-entries-slider-prev,
button.tbook-entries-slider-next {
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid #c3c4c7;
	border-radius: 50%;
	background: #ffffff;
	color: #50575e;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
button.tbook-entries-slider-prev:disabled,
button.tbook-entries-slider-next:disabled {
	opacity: 0.4;
	cursor: default;
}
div.tbook-entries-slider-counter {
	min-width: 60px;
	text-align: center;
	font-size: 13px;
	color: #50575e;
	font-variant-numeric: tabular-nums;
}

div.tbook-media-player-body video::-webkit-media-controls-download-button {
	display: none !important;
}
div.tbook-media-player-body audio::-webkit-media-controls-download-button {
	display: none !important;
}
div.tbook-media-player-body video::-webkit-media-controls-overflow-button {
	display: none !important;
}
div.tbook-media-player-body audio::-webkit-media-controls-overflow-button {
	display: none !important;
}


/* ==================== Albums ==================== */

/* Albums filter wrap */
.tbook-filter-albums-wrap {
	display: flex;
	flex-direction: column;
}

/* Albums toggle button */
button.tbook-filter-albums {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: none;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	color: inherit;
	width: 100%;
	text-align: left;
}
button.tbook-filter-albums:hover {
	background: #f6f7f7;
	border-color: #c3c4c7;
}
.tbook-filter-toggle-arrow {
	margin-left: auto;
	font-size: 12px;
	transition: transform 0.2s;
}

/* Albums sub-menu */
.tbook-albums-submenu {
	display: none;
	padding-left: 20px;
}
.tbook-albums-submenu:first-of-type {
	border-top: 1px solid rgba(0,0,0,0.1);
	margin-top: 4px;
	padding-top: 4px;
}
.tbook-album-submenu-item {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 6px 12px;
	font-size: 13px;
	color: inherit;
	width: 100%;
	text-align: left;
	border-radius: 6px;
}
.tbook-album-submenu-item:hover {
	background: rgba(0,0,0,0.05);
}
.tbook-album-submenu-name {
	flex: 1;
}
.tbook-album-manage-btn {
	font-style: italic;
	color: #666;
}

/* Album grid modal (reuses media modal styles) */
.tbook-album-modal {
	/* Same as .tbook-media-modal */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 160000;
	background: rgba(0,0,0,var(--tbook-popup-backdrop-opacity, 0.55));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tbook-album-modal .tbook-media-modal-header,
.tbook-album-modal[hidden] {
	display: none;
}
.tbook-album-modal:not([hidden]) {
	display: flex;
}
.tbook-album-modal .tbook-media-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--tbook-popup-bgcolor, #fff);
	border-radius: var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px) 0 0;
	box-shadow: var(--tbook-popup-shadow, none);
}
.tbook-album-modal .tbook-media-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: var(--tbook-popup-bgcolor, #fff);
	border-radius: 0 0 var(--tbook-popup-radius, 12px) var(--tbook-popup-radius, 12px);
	box-shadow: var(--tbook-popup-shadow, none);
	max-height: 80vh;
	width: 100%;
	max-width: 900px;
}

/* Album manage modal */
.tbook-album-manage-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 160000;
	background: rgba(0,0,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tbook-album-manage-modal[hidden] {
	display: none;
}
.tbook-album-manage-modal:not([hidden]) {
	display: flex;
}
.tbook-album-manage-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	width: 100%;
	max-width: 800px;
	max-height: 85vh;
	overflow-y: auto;
}
.tbook-album-manage-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}
.tbook-album-manage-header h3 {
	margin: 0;
	font-size: 18px;
}
.tbook-album-manage-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	color: #666;
}
.tbook-album-manage-close:hover {
	color: #000;
}
.tbook-album-manage-body {
	padding: 20px;
}
.tbook-album-manage-section {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #eee;
}
.tbook-album-manage-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.tbook-album-manage-section h4 {
	margin: 0 0 12px;
	font-size: 16px;
}
.tbook-album-manage-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 12px;
}
.tbook-album-manage-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}
.tbook-album-manage-form input[type="text"],
.tbook-album-manage-form select {
	padding: 6px 10px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
}
.tbook-album-manage-form .button {
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
}
.tbook-album-manage-form .button-primary {
	background: #2271b1;
	border: 1px solid #2271b1;
	color: #fff;
	font-weight: 600;
}
.tbook-album-manage-form .button-primary:hover {
	background: #135e96;
	border-color: #135e96;
	color: #fff;
}
.tbook-album-manage-form .button:not(.button-primary) {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	color: #1d2327;
}
.tbook-album-manage-form .button:not(.button-primary):hover {
	background: #f0f0f1;
	border-color: #dcdcde;
}
.tbook-album-manage-status {
	padding: 8px 12px;
	margin-top: 12px;
	border-radius: 4px;
	background: #f0f0f0;
	font-size: 13px;
}

/* Album edit panel */
.tbook-album-edit-panel {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}
.tbook-album-edit-media-list {
	margin-bottom: 16px;
}
.tbook-album-media-list-item {
	display: grid;
	grid-template-columns: 47px 1fr 22px 22px 22px;
	align-items: center;
	gap: 4px;
	padding: 3px 6px;
	margin-bottom: 1px;
}
.tbook-album-media-list-name {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.tbook-album-media-list-thumb {
	width: 47px;
	height: 47px;
	border-radius: 4px;
	object-fit: cover;
	background: #f0f0f1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #1d2327;
	overflow: hidden;
}
.tbook-album-media-list-thumb-video,
.tbook-album-media-list-thumb-audio {
	border: 1px solid #dcdcde;
}
.tbook-album-media-list-actions {
	display: contents;
}
.tbook-album-media-list-actions .button {
	padding: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	cursor: pointer;
	border-radius: 3px;
	background: transparent;
	border: none;
	color: #787c82;
}
.tbook-album-media-list-actions .button:hover:not([disabled]) {
	background: rgba(0,0,0,0.08);
	color: #1d2327;
}
.tbook-album-media-list-actions .button[disabled] {
	opacity: 0.2;
	cursor: default;
}
.tbook-album-media-list-actions .tbook-album-media-remove {
	color: #b32d2e;
}
.tbook-album-media-list-actions .tbook-album-media-remove:hover {
	background: #b32d2e;
	color: #fff;
}
.tbook-album-media-list-empty {
	font-size: 13px;
	color: #666;
	font-style: italic;
}
.tbook-album-edit-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.tbook-album-edit-media {
	margin-top: 16px;
}
.tbook-album-edit-media h5 {
	margin: 12px 0 8px;
	font-size: 14px;
}
.tbook-album-edit-media-count {
	font-weight: normal;
	color: #999;
}

/* Media grid with checkboxes for album selection */
.tbook-album-edit-media-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
@media (max-width: 768px) {
	.tbook-album-edit-media-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 480px) {
	.tbook-album-edit-media-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.tbook-album-media-check-item {
	position: relative;
}
.tbook-album-media-check-label {
	display: block;
	position: relative;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1;
	background: #f5f5f5;
}
.tbook-album-media-check-label img,
.tbook-album-media-check-label video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tbook-album-media-check-label .tbook-media-item-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.5);
	pointer-events: none;
}
.tbook-album-media-check-label .tbook-media-item-audio-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
}
.tbook-album-media-checkbox {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.tbook-album-media-check-label:has(.tbook-album-media-checkbox:checked) {
	box-shadow: inset 0 0 0 3px #0073aa;
}
.tbook-gb .tbook-context-menu {
	position: relative;
	display: inline-block;
	margin-bottom: 8px;
}
.tbook-gb .tbook-context-toggle {
	background: #f1f1f1;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px 10px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.tbook-gb .tbook-context-toggle:hover {
	background: #e0e0e0;
}
.tbook-gb .tbook-context-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 100;
	margin-top: 4px;
}
.tbook-gb .tbook-context-dropdown.show {
	display: block;
}
.tbook-gb .tbook-context-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap;
	border-radius: 0;
}
.tbook-gb .tbook-context-item:hover {
	background: #f0f4ff;
}
.tbook-gb .tbook-context-item .tbook-context-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #0073aa;
	color: #fff;
	border-radius: 50%;
	font-size: 16px;
	flex-shrink: 0;
}

/* Subscribe modal */
.tbook-subscribe-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.tbook-subscribe-modal .tbook-subscribe-box {
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	max-width: 400px;
	width: 90%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tbook-subscribe-modal h3 {
	margin: 0 0 12px;
	font-size: 18px;
}
.tbook-subscribe-modal p {
	margin: 0 0 16px;
	color: #666;
	font-size: 14px;
}
.tbook-subscribe-modal input[type="email"] {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
	margin-bottom: 12px;
}
.tbook-subscribe-modal .tbook-subscribe-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.tbook-subscribe-modal .tbook-subscribe-btn {
	padding: 8px 16px;
	border-radius: 4px;
	border: 1px solid #ccc;
	cursor: pointer;
	font-size: 14px;
}
.tbook-subscribe-modal .tbook-subscribe-btn.primary {
	background: #0073aa;
	color: #fff;
	border-color: #0073aa;
}
.tbook-subscribe-modal .tbook-subscribe-msg {
	margin-top: 8px;
	padding: 8px;
	border-radius: 4px;
	font-size: 13px;
	display: none;
}
.tbook-subscribe-modal .tbook-subscribe-msg.success {
	display: block;
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
.tbook-subscribe-modal .tbook-subscribe-msg.error {
	display: block;
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}


/* Submit button - match the shape of the Draft/Schedule buttons beside it */
.tbook-gb form.tbook-gb-write .tbook_submit input.tbook_submit {
	padding: 12px 22px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
	box-shadow: none;
	height: auto;
	vertical-align: middle;
	margin: 4px 0;
	box-sizing: border-box;
}

/* Draft Button */

.tbook-gb form.tbook-gb-write .tbook_submit .tbook_draft_button,
.tbook-gb form.tbook-gb-write .tbook_submit .tbook_schedule_button {
	padding: 12px 22px;
	border: 1px solid #c9ccd1;
	border-radius: 10px;
	background-color: #ffffff;
	background-image: none;
	color: #333333;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none;
	cursor: pointer;
	margin: 4px 0 4px 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tbook-gb form.tbook-gb-write .tbook_submit .tbook_draft_button:hover,
.tbook-gb form.tbook-gb-write .tbook_submit .tbook_schedule_button:hover {
	background-color: #f1f2f4;
	border-color: #b5b9bf;
}
.tbook-gb form.tbook-gb-write .tbook_submit .tbook_draft_button:active,
.tbook-gb form.tbook-gb-write .tbook_submit .tbook_schedule_button:active {
	transform: translateY(1px);
}

/* Draft Modal */

.tbook-draft-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: rgba(0, 0, 0, 0.6) !important;
	align-items: center;
	justify-content: center;
	z-index: 2147483647 !important;
	padding: 20px;
}
.tbook-draft-modal:not([hidden]) {
	display: flex !important;
}
.tbook-draft-modal-content {
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
	max-width: 560px !important;
	width: 100% !important;
	max-height: 80vh !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	position: relative !important;
	z-index: 2147483647 !important;
}
.tbook-draft-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.tbook-draft-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
}
.tbook-draft-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #64748b;
	padding: 0 4px;
	line-height: 1;
}
.tbook-draft-modal-close:hover {
	color: #1e293b;
}
.tbook-draft-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}
.tbook-draft-modal-body hr {
	margin: 16px 0;
	border: none;
	border-top: 1px solid #e5e7eb;
}
.tbook-draft-modal-body h4 {
	margin: 0 0 12px 0;
	font-size: 15px;
	font-weight: 600;
	color: #334155;
}
.tbook-draft-save p {
	margin: 0 0 10px 0;
	color: #475569;
	font-size: 14px;
}
.tbook-draft-save-btn {
	padding: 10px 22px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: #2271b1 !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.tbook-draft-save-btn:hover {
	background-color: #135e96 !important;
}
.tbook-draft-save-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.tbook-draft-save-status {
	margin-left: 10px;
	font-size: 13px;
}

/* Draft List */

.tbook-draft-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tbook-draft-empty {
	color: #94a3b8;
	font-size: 14px;
	font-style: italic;
	margin: 0;
}
.tbook-draft-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #f8fafc;
	transition: border-color 0.15s ease;
}
.tbook-draft-item:hover {
	border-color: #cbd5e1;
}
.tbook-draft-item-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tbook-draft-item-date {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 500;
}
.tbook-draft-item-excerpt {
	font-size: 13px;
	color: #475569;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tbook-draft-item-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.tbook-draft-item-actions .button {
	padding: 5px 14px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
	font-weight: 500;
}
.tbook-draft-open-btn {
	background-color: #2271b1 !important;
	color: #ffffff !important;
	border: 0 !important;
}
.tbook-draft-open-btn:hover {
	background-color: #135e96 !important;
}
.tbook-draft-delete-btn {
	background-color: #ffffff !important;
	color: #dc3545 !important;
	border: 1px solid #dc3545 !important;
}
.tbook-draft-delete-btn:hover {
	background-color: #dc3545 !important;
	color: #ffffff !important;
}
.tbook-draft-open-btn:disabled,
.tbook-draft-delete-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}


/*
 * Mobile responsive breakpoints for split components.
 */
@media (max-width: 600px) {
	/* Emoji panel: horizontal scroll on mobile */
	.tbook_emoji .tbook_emoji_grid a {
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
	}
	.tbook_emoji .tbook_emoji_grid a img {
		width: 28px;
		height: 28px;
	}
	.tbook-element-item {
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
	}
	.tbook-element-item img {
		width: 28px;
		height: 28px;
	}
	/* Emoji controls stack on mobile */
	.tbook-emoji-controls {
		flex-direction: column;
		gap: 6px;
	}
	.tbook-emoji-folder {
		max-width: 100%;
	}
}

/* ===================================================================
 * SCEditor Integration (v3.8)
 * Minimal overrides - let square.min.css + famfamfam sprite handle icons
 * =================================================================== */

/* Full width, toolbar below iframe (DOM reordered in JS) */
.tbook-gb .tbook-gb-write .sceditor-container,
.tbook-sceditor .sceditor-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border: 1px solid #ccd0d4;
	background: #fff;
	border-radius: 4px;
}

/* Ensure the SCEditor iframe fills the container */
.tbook-sceditor .sceditor-container iframe {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Custom TBook button icons (SVG data-uris for buttons not in famfamfam) */
.sceditor-button-tbook-emoji div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23555' stroke-width='1'/%3E%3Ccircle cx='5.5' cy='6.5' r='0.8' fill='%23555'/%3E%3Ccircle cx='10.5' cy='6.5' r='0.8' fill='%23555'/%3E%3Cpath d='M5 10.5s1 1.2 3 1.2 3-1.2 3-1.2' fill='none' stroke='%23555' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-media div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='14' height='10' rx='1' fill='none' stroke='%23555' stroke-width='1'/%3E%3Ccircle cx='5' cy='7' r='1.5' fill='%23555'/%3E%3Cpath d='M1 11l4-3 3 2 4-4 3 3' fill='none' stroke='%23555' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-embed div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='2' width='12' height='12' rx='1' fill='none' stroke='%23555' stroke-width='1'/%3E%3Cline x1='8' y1='5' x2='8' y2='11' stroke='%23555' stroke-width='1'/%3E%3Cline x1='5' y1='8' x2='11' y2='8' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-iframe div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1.5' fill='none' stroke='%23555' stroke-width='1'/%3E%3Cline x1='1.5' y1='5.2' x2='14.5' y2='5.2' stroke='%23555' stroke-width='0.8'/%3E%3Ccircle cx='3.3' cy='3.85' r='0.45' fill='%23555'/%3E%3Ccircle cx='5' cy='3.85' r='0.45' fill='%23555'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-rtl div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2' y1='4' x2='14' y2='4' stroke='%23555' stroke-width='1'/%3E%3Cline x1='6' y1='8' x2='14' y2='8' stroke='%23555' stroke-width='1'/%3E%3Cline x1='2' y1='12' x2='14' y2='12' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-postbg div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='1.5' width='10' height='9' rx='1' fill='none' stroke='%23555' stroke-width='1'/%3E%3Crect x='1.5' y='4.5' width='10' height='9' rx='1' fill='%23fff' stroke='%23555' stroke-width='1'/%3E%3Cpath d='M2.6 12l2.3-2.3 1.8 1.5 2.4-2.4 1.3 1.3' fill='none' stroke='%23555' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-button div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='5' width='13' height='6' rx='3' fill='none' stroke='%23555' stroke-width='1'/%3E%3Ccircle cx='4.6' cy='8' r='0.7' fill='%23555'/%3E%3Cline x1='7' y1='8' x2='12.5' y2='8' stroke='%23555' stroke-width='0.8'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
/* Rendered round button (from [tbook-button]) + editor preview. */
.tbook-btn { max-width: 100%; box-sizing: border-box; }
.tbook-btn-ico { display: inline-block; line-height: 1; }
.tbook-composer-btn { max-width: 100%; box-sizing: border-box; }

/* Source preview (editable BBCode) */
.tbook-source-preview {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 80px;
	max-height: 250px;
	padding: 8px 10px;
	margin-top: 6px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 12px;
	line-height: 1.4;
	color: #333;
	background: #fafafa;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	resize: vertical;
	outline: none;
	tab-size: 4;
}
.tbook-source-preview:focus {
	border-color: #2271b1;
	box-shadow: 0 0 3px rgba(34,113,177,0.2);
	background: #fff;
}

/* Panels wrapper */
.tbook-panels-wrap { width: 100%; }
.tbook-sce-panel {
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	padding: 10px;
	margin-top: 6px;
	max-height: 320px;
	overflow-y: auto;
	width: 100%;
	box-sizing: border-box;
}
.tbook-sce-emoji-panel { display: flex; flex-direction: column; gap: 6px; }
.tbook-panel-loading,
.tbook-panel-error { text-align: center; padding: 16px; color: #666; font-size: 13px; }

/* Embed modal */
.tbook-embed-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
	padding: 20px;
}
.tbook-embed-modal-content {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	max-width: 500px;
	width: 100%;
}
.tbook-embed-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #ddd;
}
.tbook-embed-modal-header h3 { margin: 0; font-size: 16px; }
.tbook-embed-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; }
.tbook-embed-modal-body { padding: 16px; }
.tbook-embed-field { margin-bottom: 10px; }
.tbook-embed-field label { display: block; font-weight: 600; margin-bottom: 3px; font-size: 13px; }
.tbook-embed-field input,
.tbook-embed-field textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 13px;
	box-sizing: border-box;
}
.tbook-embed-field textarea { resize: vertical; min-height: 60px; }
.tbook-embed-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 12px;
}
.tbook-embed-actions .btn {
	padding: 6px 16px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid #ccc;
	background: #f5f5f5;
	color: #333;
}
.tbook-embed-actions .btn.primary {
	background: #0073aa;
	color: #fff;
	border-color: #005a87;
}
.tbook-embed-actions .btn:hover { background: #eee; }
.tbook-embed-actions .btn.primary:hover { background: #005a87; }

/* Mobile */
@media (max-width: 600px) {
	.tbook-source-preview {
		min-height: 60px;
		font-size: 11px;
	}
	.tbook-sce-panel {
		max-height: 250px;
	}
	.tbook-embed-modal-content {
		max-width: 95%;
		margin: 10px;
	}
	.tbook-gb .tbook-gb-write .sceditor-container,
	.tbook-sceditor .sceditor-container {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Iframe embed (frontend output) */
.tbook-iframe-embed {
	box-sizing: border-box;
	background: #000; /* avoids a white flash while the iframe loads */
}
.tbook-iframe-embed > iframe {
	max-width: 100%;
	margin: 0;
}

/* ===== Filter menu polish (4.8.1): single full-width column ===== */
.tbook-filters-wrap { --tbook-filter-accent: #2271b1; --tbook-filter-accent-soft: #eef4fb; }

/* Toggle mirrors its hover style while the menu is open. */
.tbook-filters-wrap.is-open button.tbook-filters-toggle,
button.tbook-filters-toggle:hover {
	background: #f0f0f1;
	border-color: #c3c4c7;
}
span.tbook-filters-toggle-plus { transition: transform .22s ease; }

/* A touch more breathing room; stays one full-width column. */
div.tbook-filters-menu-content { gap: 8px; padding: 10px; }

/* Buttons: accent rail + gentle lift. */
button.tbook-filter {
	position: relative;
	overflow: hidden;
	padding: 10px 12px 10px 16px;
	border-radius: 10px;
}
button.tbook-filter::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 3px; height: 62%;
	border-radius: 0 3px 3px 0;
	background: var(--tbook-filter-accent);
	transform: translateY(-50%) scaleY(0);
	transition: transform .18s ease;
}
button.tbook-filter:hover::before,
button.tbook-filter[aria-pressed="true"]::before,
button.tbook-filter[aria-expanded="true"]::before { transform: translateY(-50%) scaleY(1); }

/* Bigger icon chip, accent-tinted, subtle ring. */
span.tbook-filter-icon {
	width: 2.2em;
	height: 2.2em;
	font-size: 24px;
	border-radius: 10px;
	background: var(--tbook-filter-accent-soft);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
span.tbook-filter-icon img { width: 78%; height: 78%; }
span.tbook-filter-count { font-weight: 700; }

/* Submenu: guide rail + softer rows. */
.tbook-albums-submenu {
	padding-left: 14px;
	margin-left: 8px;
	border-left: 2px solid #eceff3;
}
.tbook-albums-submenu:first-of-type { border-top: 0; margin-top: 2px; padding-top: 0; }
.tbook-album-submenu-item { padding: 7px 10px; border-radius: 8px; transition: background-color .14s ease; }
.tbook-album-submenu-item:hover { background: var(--tbook-filter-accent-soft); }

/* ===== "New items" bubbles (highlight-style, live) ===== */
span.tbook-filter-new,
span.tbook-filters-new {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e02b2b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.tbook-filters-toggle-label { flex: 1; }
span.tbook-filters-new { margin-left: 8px; margin-right: 4px; }

/* ===== Filter menu v4.8.3: smaller chips, tidier spacing ===== */
span.tbook-filter-icon { width: 40px; height: 40px; font-size: 22px; border-radius: 9px; }
span.tbook-filter-icon img { width: 74%; height: 74%; }
div.tbook-filters-menu-content { gap: 6px; padding: 8px; }
button.tbook-filter { padding: 8px 12px 8px 16px; }

/* Album subcategories: same left accent rail as the filter buttons, still
 * indented under Collections. */
button.tbook-album-submenu-item {
	position: relative;
	overflow: hidden;
	padding: 8px 10px 8px 7px;
	border-radius: 9px;
	transition: background-color .16s ease, color .16s ease;
}
button.tbook-album-submenu-item::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 3px; height: 62%;
	border-radius: 0 3px 3px 0;
	background: var(--tbook-filter-accent, #2271b1);
	transform: translateY(-50%) scaleY(0);
	transition: transform .18s ease;
}
button.tbook-album-submenu-item:hover::before { transform: translateY(-50%) scaleY(1); }
button.tbook-album-submenu-item:hover { background: var(--tbook-filter-accent-soft, #eef4fb); }

/* ===== Filter menu v4.8.4 ===== */

/* Album subcategories: match the left indent + grey guide line on the right. */
.tbook-albums-submenu {
	padding-right: 14px;
	margin-right: 8px;
	border-right: 2px solid #eceff3;
}

/* Collections (and any open filter) keeps the hover colour while it is open,
 * just like the filter buttons keep their pressed colour. */
button.tbook-filter[aria-expanded="true"] {
	background: #f6f7f7;
	border-color: #c3c4c7;
}

/* ===== Filter menu v4.8.5 ===== */

/* +/- sits in a fixed 40px chip on the left of the toggle, matching the icons
 * so switching + / − never changes the size. */
button.tbook-filters-toggle { justify-content: flex-start; gap: 10px; }
span.tbook-filters-toggle-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	background: #f0f1f3;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

/* Subcategory indent (grey guide lines stay). Left is halved because the
 * collection thumbnails now take up some of that space. */
.tbook-albums-submenu {
	padding-left: 14px;
	padding-right: 14px;
	margin-left: 8px;
	margin-right: 8px;
}
.tbook-filters-toggle-label { text-align: left; }
/* Collections dropdown arrow: a fixed 40px box to match the icon chips, so the
 * row height never changes. */
button.tbook-filter .tbook-filter-toggle-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin-left: 0;
	font-size: 14px;
	line-height: 1;
}

/* Combine-multiple-videos toolbar toggle (next to the fullscreen button). */
.sceditor-button-tbook-videolist div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='13' height='8' rx='1' fill='none' stroke='%23555' stroke-width='1'/%3E%3Cpath d='M6.4 3.9l3.2 1.6-3.2 1.6z' fill='%23555'/%3E%3Cline x1='2' y1='12' x2='14' y2='12' stroke='%23555' stroke-width='1'/%3E%3Cline x1='2' y1='14' x2='10' y2='14' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E") !important;
	background-position: 0 0 !important;
	background-repeat: no-repeat !important;
}
.sceditor-button-tbook-videolist.active {
	background-color: #cfe7ff !important;
}
.sceditor-button-tbook-videolist.active div {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='1.5' width='13' height='8' rx='1' fill='%230071a1' stroke='%230071a1' stroke-width='1'/%3E%3Cpath d='M6.4 3.9l3.2 1.6-3.2 1.6z' fill='%23fff'/%3E%3Cline x1='2' y1='12' x2='14' y2='12' stroke='%230071a1' stroke-width='1'/%3E%3Cline x1='2' y1='14' x2='10' y2='14' stroke='%230071a1' stroke-width='1'/%3E%3C/svg%3E") !important;
}

/* Fullscreen: ignore the entry size caps so the video fills the screen. */
.video-js.vjs-fluid.vjs-fullscreen,
.video-js.vjs-fluid:fullscreen {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	aspect-ratio: auto !important;
	padding-top: 0 !important;
}
.video-js.vjs-fluid.vjs-fullscreen > video.vjs-tech,
.video-js.vjs-fluid:fullscreen > video.vjs-tech {
	object-fit: contain;
}
/* Fullscreen: the tech element must fill the player box (Video.js can leave it
 * at an intrinsic height, making the video appear small). */
.video-js.vjs-fullscreen > video.vjs-tech,
.video-js:fullscreen > video.vjs-tech {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
}

/* PWA "Get notified" opt-in button. */
.tbook-notify-btn {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px 10px 14px;
	border: 0;
	border-radius: 999px;
	background: #12121a;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
	opacity: .92;
	transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.tbook-notify-btn::before { content: "\1F514"; font-size: 15px; }
.tbook-notify-btn:hover { transform: translateY(-1px); opacity: 1; }
.tbook-notify-btn.is-on { background: #16a34a; }
.tbook-notify-btn.is-on::before { content: "\2713"; }
@media (prefers-reduced-motion: reduce) { .tbook-notify-btn { transition: none; } }

/* Video hover preview (5.1.4).
 *
 * A separate muted <video> laid over the player. inset:0 makes it exactly the
 * player's size at all times — it can never overflow or force the player to
 * resize. z-index keeps it UNDER the control bar so the controls stay visible
 * and usable while previewing. */
.tbook-video-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.tbook-video-preview.is-active {
	opacity: 1;
}
/* The control bar must paint above the preview. */
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button {
	z-index: 2;
}
/* While the preview is running, the still play button is replaced by it and
 * returns as soon as the preview stops (hover ends, or the video scrolls away
 * on touch). */
.video-js.tbook-previewing .vjs-big-play-button {
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.tbook-video-preview { transition: none; }
}

/* ===== Album covers ===== */
.tbook-album-submenu-item { gap: 8px; background: #f7f7f8; }
.tbook-album-submenu-thumb {
	width: 54px;
	height: 54px;
	flex: 0 0 auto;
	border-radius: 12px;
	overflow: hidden;
	background: #f0f1f3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tbook-album-submenu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbook-album-submenu-thumb__empty { font-weight: 700; color: #8c8f94; font-size: 14px; }

.tbook-album-cover { margin: 16px 0 4px; }
.tbook-album-cover__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tbook-album-cover__label { font-weight: 700; font-size: 13px; color: #1d2327; }
.tbook-album-cover__hint { color: #646970; font-size: 12px; }
.tbook-album-cover__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tbook-album-cover__empty { margin: 0; color: #646970; font-size: 12px; }
.tbook-album-cover__pick {
	width: 76px;
	height: 76px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: #f0f1f3;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tbook-album-cover__pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbook-album-cover__pick:hover { transform: translateY(-1px); border-color: #c3c4c7; }
.tbook-album-cover__pick.is-active {
	border-color: var(--tbook-filter-accent, #2271b1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbook-filter-accent, #2271b1) 20%, transparent);
}

/* Collections list: show ~4 rows, then scroll inside with no visible bar. */
.tbook-albums-submenu {
	max-height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* legacy Edge */
	overscroll-behavior: contain;
}
.tbook-albums-submenu::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Scroll hints: see-through chevrons centred top/bottom of the list, shown
 * only when the list can scroll further that way. */
.tbook-albums-scrollwrap { position: relative; }
.tbook-albums-scrollhint {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .72);
	color: #50575e;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s ease;
	z-index: 2;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.tbook-albums-scrollhint.is-visible { opacity: 1; }
.tbook-albums-scrollhint--top { top: 2px; }
.tbook-albums-scrollhint--bottom { bottom: 2px; }
.tbook-albums-scrollhint::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}
.tbook-albums-scrollhint--top::before { transform: rotate(45deg); margin-top: 3px; }
.tbook-albums-scrollhint--bottom::before { transform: rotate(-135deg); margin-bottom: 3px; }

/* Font picker (5.4.60) */
.tbook-font-picker {
	width: 300px;
	max-width: calc(100vw - 28px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}
.tbook-font-picker-search {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 11px;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	font: inherit;
	font-size: 13px;
	outline: none;
}
.tbook-font-picker-list {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.tbook-font-group {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 8px 11px 4px;
	background: #f8fafc;
	color: #6b7280;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.tbook-font-item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 7px 11px;
	border: 0;
	border-bottom: 1px solid #f1f3f5;
	background: #fff;
	text-align: left;
	cursor: pointer;
}
.tbook-font-item:hover,
.tbook-font-item:focus-visible {
	background: #f3f6f4;
	outline: none;
}
.tbook-font-item-name {
	display: block;
	margin-bottom: 2px;
	color: #6b7280;
	font-size: 10px;
}
.tbook-font-item-preview {
	display: block;
	color: #111827;
	font-size: 17px;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tbook-font-empty {
	padding: 14px;
	color: #6b7280;
	font-size: 12px;
}
@media (max-width: 600px) {
	.tbook-font-picker { width: 280px; }
	.tbook-font-picker-list { max-height: 46vh; }
}

/* Font size number panel (5.4.62) */
.tbook-fontsize-panel {
	width: 210px;
	box-sizing: border-box;
	padding: 10px 12px;
}
.tbook-fontsize-label {
	display: block;
	margin-bottom: 6px;
	color: #6b7280;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.tbook-fontsize-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.tbook-fontsize-input {
	width: 72px;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
	color: #111827;
	background: #fff;
}
.tbook-fontsize-input:focus {
	outline: 2px solid #2563eb;
	outline-offset: 0;
	border-color: #2563eb;
}
.tbook-fontsize-unit {
	color: #6b7280;
	font-size: 12px;
}
.tbook-fontsize-apply {
	display: block;
	width: 100%;
	margin: 8px 0 0;
	padding: 6px 10px;
	border: 0;
	border-radius: 6px;
	background: #2563eb;
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.tbook-fontsize-apply:hover {
	background: #1d4ed8;
}
.tbook-fontsize-hint {
	margin: 8px 0 0;
	color: #9ca3af;
	font-size: 10px;
}

@media (max-width: 600px) {
	.tbook-fontsize-panel {
		width: 172px;
		padding: 8px 10px 10px;
	}
	.tbook-fontsize-panel .tbook-fontsize-label {
		margin: 0 0 6px;
	}
	.tbook-fontsize-row {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.tbook-fontsize-input {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	.tbook-fontsize-panel .tbook-fontsize-apply {
		width: 100%;
		margin: 8px 0 0;
	}
	.tbook-fontsize-panel .tbook-fontsize-hint {
		display: block;
		margin: 8px 0 0;
	}
}

/* Keep the size popover spacing independent of theme content styles. */
.tbook-fontsize-panel { padding: 10px 12px !important; }
.tbook-fontsize-panel .tbook-fontsize-label { margin: 0 0 6px !important; }
.tbook-fontsize-panel .tbook-fontsize-row { margin: 0 !important; padding: 0 !important; }
.tbook-fontsize-panel .tbook-fontsize-apply { margin: 8px 0 0 !important; }
.tbook-fontsize-panel .tbook-fontsize-hint { margin: 8px 0 0 !important; }
@media (max-width: 600px) {
	.tbook-fontsize-panel {
		width: 172px;
		padding: 8px 10px 10px !important;
	}
	.tbook-fontsize-panel .tbook-fontsize-apply {
		width: 100%;
		margin: 8px 0 0 !important;
	}
}

.tbook-fontsize-panel .tbook-fontsize-input { margin: 0 !important; }
.tbook-fontsize-panel .tbook-fontsize-unit { margin: 0 !important; }

/* Slider modal entries live outside .tbook-gb, so restore the author row layout. */
div.tbook-slider-modal-body .gb-entry .gb-author-info {
	display: flex;
	align-items: center;
	gap: 21px;
	padding: 4px 4px 0 0;
	margin-bottom: 0;
	font-size: 15px;
}
div.tbook-slider-modal-body .gb-entry .gb-author-avatar {
	flex: 0 0 auto;
	margin: 0 0 0 -1px;
	line-height: 0;
}
div.tbook-slider-modal-body .gb-entry .gb-author-avatar img,
div.tbook-slider-modal-body .gb-entry .gb-author-avatar .tbook-ring__inner img,
div.tbook-slider-modal-body .gb-entry .gb-author-avatar .tbook-avatar {
	width: 51px;
	height: 51px;
	border-radius: 50%;
	display: block;
}
div.tbook-slider-modal-body .gb-entry .gb-author-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px 12px;
	min-width: 0;
}
div.tbook-slider-modal-body .gb-entry .gb-author-name {
	padding-left: 0;
	margin: 0;
}
div.tbook-slider-modal-body .gb-entry .gb-datetime {
	margin: 0;
	padding-left: 0;
}

/* Desktop two-column entry flow. Kept in the stylesheet as well as the
   generated inline CSS so logged-in pages cannot fall back to one column. */
@media (min-width: 768px) {
	.tbook-gb .tbook-gb-read.tbook-gb-entries-list .tbook-2col-flow {
		column-count: 2;
		column-gap: 20px;
	}
	.tbook-gb .tbook-gb-read.tbook-gb-entries-list .tbook-2col-flow > .gb-entry {
		display: inline-block;
		width: 100%;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* Album/collection modal: keep the toolbar and grid body the same width. */
.tbook-album-modal .tbook-media-modal-header {
	width: 100%;
	max-width: 900px;
}