/* Accent and font follow the theme where it exposes them (Blocksy variables); fallbacks otherwise. */
#scb-bar, #scb-modal {
	--scb-accent: var(--theme-palette-color-1, #1d2327);
	font: 15px/1.5 var(--theme-font-family, system-ui, sans-serif); color: #1d2327;
}
#scb-bar {
	position: fixed; z-index: 99998; box-sizing: border-box;
	background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}
#scb-bar p { margin: 0; }
.scb-layout-card-right, .scb-layout-card-left {
	bottom: 20px; width: calc(100% - 40px); max-width: 380px; padding: 18px 20px; border-radius: 8px;
	display: flex; flex-direction: column; gap: 14px;
}
.scb-layout-card-right { right: 20px; }
.scb-layout-card-left { left: 20px; }
.scb-layout-bar {
	left: 0; right: 0; bottom: 0; padding: 14px 20px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.scb-layout-bar p { flex: 1 1 360px; }
.scb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.scb-btn {
	cursor: pointer; font: inherit; padding: 8px 18px; border-radius: 4px;
	border: 1px solid var(--scb-accent); background: #fff; color: var(--scb-accent);
}
.scb-primary { background: var(--scb-accent); color: #fff; }
.scb-link { border-color: transparent; background: none; text-decoration: underline; color: var(--scb-accent); }
.scb-btn:focus-visible, .scb-close:focus-visible { outline: 3px solid var(--scb-accent); outline-offset: 2px; }
#scb-modal {
	position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .5); padding: 16px;
}
.scb-box { position: relative; background: #fff; max-width: 520px; width: 100%; max-height: 100%; overflow: auto; padding: 24px; border-radius: 6px; }
.scb-box h2 { margin: 0 0 16px; font-size: 1.25em; }
.scb-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }
.scb-row { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; }
.scb-row input { margin-top: 5px; }
.scb-box .scb-actions { justify-content: flex-end; margin-top: 8px; }

/* Card layouts: settings replace the banner in the same corner, page stays usable. */
#scb-modal.scb-layout-card-right, #scb-modal.scb-layout-card-left {
	inset: auto 20px 20px auto; display: block; width: calc(100% - 40px); max-width: 380px; padding: 0; background: none;
}
#scb-modal.scb-layout-card-left { inset: auto auto 20px 20px; }
.scb-layout-card-right .scb-box, .scb-layout-card-left .scb-box {
	max-width: none; max-height: calc(100vh - 40px); border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}