/* Photobook Designer editor — light, CEWE-inspired workspace.
   Full-bleed width, white panels, red primary action, warm-paper book. */

.pbd-app {
	--pbd-bg: #f2f4f7;        /* workspace */
	--pbd-panel: #ffffff;     /* cards / bars */
	--pbd-line: #dfe3e8;
	--pbd-text: #23282d;
	--pbd-muted: #6b7280;
	--pbd-accent: #d21f2c;    /* CEWE-style red for primary actions */
	--pbd-select: #2f7de1;    /* blue for selection outlines */
	--pbd-paper-a: #fdf9f0;
	--pbd-paper-b: #f3ecdb;

	/* Full-bleed is applied by bleed() in editor.js, which measures where the
	   theme's column actually sits. This used to be
	     width: 100vw; margin-left: calc(50% - 50vw);
	   which only lands correctly when the parent column is centred in the
	   viewport. On a left-aligned column (the theme's prose page template)
	   it dragged the whole editor off the left edge of the screen, and 100vw
	   included the scrollbar on top of that. Until JS runs, sit inside the
	   column: narrower than we want, but never clipped. */
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;

	background: var(--pbd-bg);
	color: var(--pbd-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.pbd-app *, .pbd-app *::before, .pbd-app *::after { box-sizing: border-box; }

/* ------------------------------------------------------------- top bar */

.pbd-topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 20px;
	background: var(--pbd-panel);
	border-bottom: 1px solid var(--pbd-line);
}
.pbd-field { display: flex; align-items: center; gap: 6px; }
.pbd-field span { color: var(--pbd-muted); }
.pbd-app select {
	background: #fff;
	color: var(--pbd-text);
	border: 1px solid var(--pbd-line);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 14px;
}
.pbd-app select:focus { border-color: var(--pbd-select); outline: none; }
.pbd-field input[type="color"] {
	width: 34px;
	height: 30px;
	padding: 2px;
	border: 1px solid var(--pbd-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.pbd-field input[type="number"] {
	border: 1px solid var(--pbd-line);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 14px;
	background: #fff;
	color: var(--pbd-text);
}
.pbd-price-wrap { display: flex; align-items: baseline; gap: 6px; margin-left: auto; }
.pbd-price-label { color: var(--pbd-muted); }
#pbd-price { font-size: 20px; font-weight: 700; }
.pbd-save-indicator { color: var(--pbd-muted); min-width: 60px; font-size: 12px; }
.pbd-save-indicator.is-saving { color: var(--pbd-select); }

.pbd-btn {
	background: #fff;
	color: var(--pbd-text);
	border: 1px solid var(--pbd-line);
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pbd-btn:hover:not(:disabled) { border-color: var(--pbd-select); color: var(--pbd-select); }
.pbd-btn:disabled { opacity: 0.4; cursor: default; }
.pbd-btn--primary {
	background: var(--pbd-accent);
	border-color: var(--pbd-accent);
	color: #fff;
	font-weight: 600;
}
.pbd-btn--primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

/* ---------------------------------------------------------------- body */

.pbd-body { display: flex; min-height: 70vh; }

.pbd-tray {
	width: 240px;
	flex: 0 0 240px;
	padding: 14px;
	background: var(--pbd-panel);
	border-right: 1px solid var(--pbd-line);
	overflow-y: auto;
	max-height: 82vh;
}
.pbd-btn--upload {
	display: block;
	text-align: center;
	margin-bottom: 8px;
	background: var(--pbd-accent);
	border-color: var(--pbd-accent);
	color: #fff;
	font-weight: 600;
}
.pbd-btn--upload:hover { filter: brightness(1.08); color: #fff; border-color: var(--pbd-accent); }
.pbd-tray-hint { color: var(--pbd-muted); font-size: 12px; margin: 0 0 12px; }
.pbd-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pbd-thumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--pbd-line);
	cursor: grab;
	background: #eef1f5;
}
.pbd-thumb:hover { border-color: var(--pbd-select); }
.pbd-thumb.is-selected {
	border-color: var(--pbd-select);
	box-shadow: 0 0 0 1px var(--pbd-select);
}
.pbd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbd-thumb-check {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: 1.5px solid #9aa2ad;
	color: #fff;
	font-size: 13px;
	line-height: 17px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
}
.pbd-thumb-check:hover { border-color: var(--pbd-select); }
.pbd-thumb-check.is-checked {
	background: var(--pbd-select);
	border-color: var(--pbd-select);
	color: #fff;
	font-weight: 700;
}
.pbd-thumb-x {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	border: 1.5px solid #9aa2ad;
	color: var(--pbd-accent);
	font-size: 14px;
	line-height: 16px;
	text-align: center;
	cursor: pointer;
	z-index: 2;
}
.pbd-thumb-x:hover {
	background: var(--pbd-accent);
	border-color: var(--pbd-accent);
	color: #fff;
}
.pbd-btn--danger {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	border-color: var(--pbd-accent);
	color: var(--pbd-accent);
}
.pbd-btn--danger:hover:not(:disabled) {
	background: var(--pbd-accent);
	border-color: var(--pbd-accent);
	color: #fff;
}

/* --------------------------------------------------------------- stage */

.pbd-stagewrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 20px;
	min-width: 0;
}
.pbd-stage-row { display: flex; align-items: center; gap: 8px; flex: 1; }
.pbd-stage {
	flex: 1;
	min-height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.pbd-nav {
	background: var(--pbd-accent);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 16px;
	cursor: pointer;
	flex: 0 0 40px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pbd-nav:hover:not(:disabled) { filter: brightness(1.08); }
.pbd-nav:disabled { opacity: 0.25; cursor: default; box-shadow: none; }
.pbd-spread-label { text-align: center; color: var(--pbd-muted); padding: 8px 0 4px; }
.pbd-error { color: var(--pbd-accent); }

/* Bottom spread-navigation strip (CEWE-style page tiles). */
.pbd-strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 8px 4px 12px;
	justify-content: safe center;
}
.pbd-strip-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
}
.pbd-strip-pages {
	display: block;
	width: 72px;
	height: 44px;
	background:
		linear-gradient(to right, #eaf1fa 49.5%, #d9dee5 49.5%, #d9dee5 50.5%, #eaf1fa 50.5%);
	border: 2px solid var(--pbd-line);
	border-radius: 4px;
}
.pbd-strip-pages--cover {
	background: linear-gradient(125deg, #3d4f66 0%, #31425a 100%);
}
.pbd-strip-item:hover .pbd-strip-pages { border-color: var(--pbd-select); }
.pbd-strip-item.is-active .pbd-strip-pages { border-color: var(--pbd-accent); }
.pbd-strip-label { font-size: 12px; color: var(--pbd-muted); }
.pbd-strip-item.is-active .pbd-strip-label { color: var(--pbd-accent); font-weight: 600; }

/* ------------------------------------------------------ the open book */

.pbd-book {
	display: flex;
	position: relative;
	filter: drop-shadow(0 18px 28px rgba(40, 50, 65, 0.28));
}
/* Panorama frame: spans both pages of the spread. */
.pbd-frame--pano { z-index: 3; }
.pbd-frame--pano:not(.filled) {
	outline: 2px dashed var(--pbd-select);
	outline-offset: -2px;
}
.pbd-page {
	position: relative;
	background: linear-gradient(105deg, var(--pbd-paper-a) 0%, var(--pbd-paper-b) 100%);
	flex: 0 0 auto;
	/* Anything dragged past the page edge is discarded, exactly like in
	   the print export. */
	overflow: hidden;
}
.pbd-page--left {
	border-radius: 5px 0 0 5px;
	box-shadow:
		-2px 2px 0 #ece4d2,
		-4px 4px 0 #e0d7c2,
		-6px 6px 0 #d3c9b1;
}
.pbd-page--right {
	border-radius: 0 5px 5px 0;
	box-shadow:
		2px 2px 0 #ece4d2,
		4px 4px 0 #e0d7c2,
		6px 6px 0 #d3c9b1;
}
.pbd-page--left::after,
.pbd-page--right::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 9%;
	pointer-events: none;
	z-index: 1;
}
.pbd-page--left::after {
	right: 0;
	background: linear-gradient(to left, rgba(74, 54, 28, 0.22), rgba(74, 54, 28, 0.05) 60%, transparent);
}
.pbd-page--right::after {
	left: 0;
	background: linear-gradient(to right, rgba(74, 54, 28, 0.22), rgba(74, 54, 28, 0.05) 60%, transparent);
}

/* ---------------------------------------------------------------- cover */

/* Full wrap-around cover: back + spine + front side by side. */
.pbd-coverwrap {
	display: flex;
	filter: drop-shadow(0 16px 26px rgba(40, 50, 65, 0.35));
}
.pbd-coverwrap .pbd-cover { filter: none; }
.pbd-cover--back { border-radius: 10px 0 0 10px; }
.pbd-cover--front { border-radius: 0 10px 10px 0; }
.pbd-spinepanel {
	position: relative;
	flex: 0 0 auto;
	box-shadow:
		inset 6px 0 8px -6px rgba(0, 0, 0, 0.55),
		inset -6px 0 8px -6px rgba(0, 0, 0, 0.55);
	z-index: 1;
}
.pbd-spine-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	color: #f3ecdd;
	white-space: nowrap;
	max-height: 80%;
	overflow: hidden;
	pointer-events: none;
}
.pbd-spine-logo {
	position: absolute;
	left: 50%;
	bottom: 2.5%;
	transform: translateX(-50%);
	width: 70%;
	max-height: 10%;
	object-fit: contain;
	pointer-events: none;
}
.pbd-qr {
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
	border-radius: 2px;
	pointer-events: none;
	z-index: 2;
}
/* Blurred background photo layer on pages and cover panels. */
.pbd-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}
.pbd-bg img {
	position: absolute;
	left: -3%;
	top: -3%;
	width: 106%;
	height: 106%;
	object-fit: cover;
	max-width: none;
}

/* Cover theme motif overlay (same SVG is rasterized into the export). */
.pbd-theme {
	position: absolute;
	inset: 0;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}

.pbd-cover-color { right: auto; left: 4%; }
.pbd-cover-theme { right: auto; left: 4%; top: calc(3% + 34px); }
.pbd-cover-theme select {
	font-size: 12px;
	padding: 2px 4px;
	border-radius: 4px;
	border: none;
	max-width: 150px;
}
.pbd-cover-color input[type="color"] {
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.pbd-spine-check {
	position: absolute;
	right: 4%;
	top: 3%;
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	background: rgba(0, 0, 0, 0.25);
	padding: 3px 8px;
	border-radius: 999px;
	cursor: pointer;
	z-index: 3;
}

.pbd-cover {
	position: relative;
	border-radius: 4px 10px 10px 4px;
	filter: drop-shadow(0 16px 26px rgba(40, 50, 65, 0.35));
	overflow: hidden;
}
.pbd-cover--hard {
	background-color: #31425a;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 2px, transparent 2px 4px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 4px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 60px rgba(0, 0, 0, 0.25);
}
.pbd-cover--soft {
	background: linear-gradient(125deg, #3d4f66 0%, #31425a 55%, #2b3a50 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.pbd-spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6%;
	min-width: 14px;
	border-radius: 4px 0 0 4px;
	background: linear-gradient(to right,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.15) 45%,
		rgba(255, 255, 255, 0.10) 70%,
		rgba(0, 0, 0, 0.18) 100%);
	pointer-events: none;
	z-index: 1;
}
.pbd-cover-title {
	position: absolute;
	left: 12%;
	right: 8%;
	bottom: 9%;
	text-align: center;
	background: transparent;
	border: none;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
	outline: none;
	color: #f3ecdd;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(14px, 2.2vw, 26px);
	padding: 4px 0;
	z-index: 2;
}
.pbd-cover-title::placeholder { color: rgba(243, 236, 221, 0.45); }
.pbd-cover-title:focus { border-bottom-color: var(--pbd-select); }

/* --------------------------------------------------------------- frames */

.pbd-frame {
	position: absolute;
	overflow: visible; /* transform nodes sit on the edges */
	cursor: move;
	touch-action: none;
	z-index: 2;
}
.pbd-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
.pbd-clip .pbd-caption { pointer-events: auto; }

/* Photoshop-style transform nodes (shown on the selected frame). */
.pbd-node {
	position: absolute;
	width: 12px;
	height: 12px;
	padding: 0;
	background: #fff;
	border: 2px solid var(--pbd-select);
	border-radius: 2px;
	z-index: 6;
	touch-action: none;
}
.pbd-node--nw { top: -6px; left: -6px; cursor: nwse-resize; }
.pbd-node--ne { top: -6px; right: -6px; cursor: nesw-resize; }
.pbd-node--se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.pbd-node--sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.pbd-node--n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ew-resize; }
.pbd-node--s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ew-resize; }
.pbd-node--e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ns-resize; }
.pbd-node--w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ns-resize; }
.pbd-node--rot {
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: var(--pbd-select);
	cursor: grab;
}
/* Empty frames: CEWE-style light blue with a white mountain placeholder. */
.pbd-frame:not(.filled) {
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><path d="M8 52 L34 18 L52 40 L64 26 L92 52" fill="none" stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 55% 45% no-repeat,
		linear-gradient(160deg, #dce9f9 0%, #cfe0f4 100%);
	outline: 1px solid #b9d0ec;
	outline-offset: -1px;
}
.pbd-frame--cover:not(.filled) {
	outline-color: rgba(255, 255, 255, 0.4);
}
.pbd-frame.filled { background: #e8e8e8; cursor: move; }
.pbd-frame.selected { outline: 2px solid var(--pbd-select); outline-offset: -2px; z-index: 3; }
.pbd-frame.dragover { outline: 2px solid #4caf50; outline-offset: -2px; background-color: rgba(76, 175, 80, 0.12); }
.pbd-frame img {
	position: absolute;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	display: block;
}
.pbd-frame .pbd-hint { display: none; }

.pbd-frame-x,
.pbd-frame-menu-btn {
	position: absolute;
	top: 6px;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #9aa2ad;
	color: var(--pbd-text);
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
	z-index: 4;
}
.pbd-frame-x { right: 6px; color: var(--pbd-accent); font-size: 16px; }
.pbd-frame-x:hover { background: var(--pbd-accent); border-color: var(--pbd-accent); color: #fff; }
.pbd-frame-menu-btn { right: 36px; font-size: 12px; }
.pbd-frame-menu-btn:hover { border-color: var(--pbd-select); color: var(--pbd-select); }
.pbd-frame:not(.filled) .pbd-frame-menu-btn { right: 6px; }

/* Dropdown menu — anchored to the stage so frames cannot crop it. */
.pbd-menu {
	position: absolute;
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--pbd-line);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(30, 40, 60, 0.25);
	z-index: 50;
	overflow: hidden;
}
.pbd-menu button {
	display: block;
	width: 100%;
	padding: 9px 14px;
	background: transparent;
	border: none;
	color: var(--pbd-text);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}
.pbd-menu button:hover { background: #f0f4fa; color: var(--pbd-select); }

/* Free-arrange mode: move + resize handles. */
.pbd-frame--free { outline: 1px dashed rgba(47, 125, 225, 0.55); outline-offset: -1px; }
.pbd-frame-move,
.pbd-frame-size {
	position: absolute;
	width: 22px;
	height: 22px;
	padding: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #9aa2ad;
	color: var(--pbd-text);
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	z-index: 4;
	touch-action: none;
}
.pbd-frame-move { top: 6px; left: 6px; cursor: move; }
.pbd-frame-size { bottom: 6px; right: 6px; cursor: nwse-resize; }
.pbd-frame-move:hover,
.pbd-frame-size:hover { border-color: var(--pbd-select); color: var(--pbd-select); }

/* Captions (image + page) — draggable, mirrored 1:1 in the print export.
   Positioned by their center point (left/top set inline as fractions). */
.pbd-caption {
	position: absolute;
	transform: translate(-50%, -50%);
	max-width: 94%;
	padding: 0.3em 0.8em;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.78);
	color: #333;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: move;
	touch-action: none;
	z-index: 3;
}
.pbd-caption:hover { outline: 1px dashed var(--pbd-select); }
.pbd-page-caption {
	position: absolute;
	transform: translate(-50%, -50%);
	max-width: 86%;
	color: #444;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: move;
	touch-action: none;
	z-index: 2;
}
.pbd-page-caption:hover { outline: 1px dashed var(--pbd-select); }

/* -------------------------------------------------------------- toolbar */

.pbd-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px;
	margin-top: 4px;
	background: var(--pbd-panel);
	border: 1px solid var(--pbd-line);
	border-radius: 10px;
}
.pbd-toolbar-label { color: var(--pbd-muted); }
.pbd-layouts { display: flex; gap: 4px; flex-wrap: wrap; }
.pbd-layout-btn { min-width: 40px; }
.pbd-layout-btn.is-active {
	border-color: var(--pbd-accent);
	color: var(--pbd-accent);
	font-weight: 700;
}

/* Floating palettes: photo adjustments + caption toolbar hover next to the
   selected frame/caption (position set by JS, relative to the stage wrap). */
.pbd-stagewrap { position: relative; }
.pbd-adjust,
.pbd-capbar {
	position: absolute;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	width: 210px;
	padding: 12px;
	background: var(--pbd-panel);
	border: 1px solid var(--pbd-line);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(30, 40, 60, 0.22);
}
.pbd-adjust[hidden], .pbd-capbar[hidden] { display: none; }
.pbd-adjust label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pbd-adjust span { color: var(--pbd-muted); font-size: 12px; white-space: nowrap; }
.pbd-adjust input[type="range"] { width: 120px; accent-color: var(--pbd-select); }
.pbd-capbar { width: 240px; }
.pbd-capbar input[type="text"] {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--pbd-line);
	border-radius: 6px;
	font-size: 14px;
}
.pbd-capbar label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pbd-capbar span { color: var(--pbd-muted); font-size: 12px; }
.pbd-capbar input[type="range"] { width: 130px; accent-color: var(--pbd-select); }
.pbd-capbar .pbd-cap-toggle,
.pbd-capbar .pbd-btn--danger { flex: 1; }
.pbd-capbar .pbd-cap-row { display: flex; gap: 6px; }
.pbd-adjust-row { display: flex; gap: 6px; }
.pbd-adjust-row .pbd-btn { flex: 1; padding: 6px 4px; font-size: 13px; }
.pbd-capbar label { display: flex; align-items: center; gap: 6px; }
.pbd-capbar span { color: var(--pbd-muted); font-size: 12px; }
.pbd-capbar input[type="range"] { width: 100px; accent-color: var(--pbd-select); }
.pbd-cap-toggle { min-width: 36px; padding: 6px 0; }
.pbd-cap-toggle.is-active {
	border-color: var(--pbd-select);
	color: var(--pbd-select);
	background: #eef4fc;
}

/* -------------------------------------------------------------- overlay */

.pbd-overlay {
	position: fixed;
	inset: 0;
	background: rgba(25, 30, 40, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.pbd-overlay[hidden] { display: none; }
.pbd-overlay-card {
	background: #fff;
	color: var(--pbd-text);
	border: 1px solid var(--pbd-line);
	border-radius: 12px;
	padding: 24px 28px;
	width: min(420px, 90vw);
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.pbd-overlay-track {
	height: 8px;
	border-radius: 4px;
	background: #eceff3;
	overflow: hidden;
	margin: 14px 0;
}
.pbd-overlay-bar {
	height: 100%;
	width: 0;
	background: var(--pbd-accent);
	border-radius: 4px;
	transition: width 0.2s ease;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.pbd-body { flex-direction: column; }
	.pbd-tray {
		width: auto;
		flex: none;
		border-right: none;
		border-bottom: 1px solid var(--pbd-line);
		max-height: 220px;
	}
	.pbd-thumbs { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
	.pbd-stage { min-height: 380px; }
}