/**
 * BWD Tools Suite design system.
 *
 * Built on the theme's brand orange (#f97d0a) and ink. Three surface levels:
 * base (page), raised (cards and inputs) and floating (menus, toasts).
 * Logical properties throughout, so Arabic pages mirror correctly.
 * Motion is limited to transform and opacity and switched off for people
 * who ask for reduced motion.
 */

.bsx-app,
.bsx-dir,
.bsx-stage,
.bsx-panel,
.bsx-reviewed,
.bsx-doc {
	--bsx-brand: #f97d0a;
	--bsx-brand-ink: #b4530a;
	--bsx-brand-soft: #fff4e8;
	--bsx-ink: #10151f;
	--bsx-ink-2: #3a4352;
	--bsx-muted: #5b6575;
	--bsx-line: #e3e7ee;
	--bsx-line-2: #cfd6e1;
	--bsx-base: #f7f8fa;
	--bsx-raised: #ffffff;
	--bsx-sunken: #f1f3f7;
	--bsx-pass: #13753d;
	--bsx-pass-bg: #e8f6ee;
	--bsx-warn: #8a5300;
	--bsx-warn-bg: #fff5e0;
	--bsx-fail: #a3231b;
	--bsx-fail-bg: #fdeceb;
	--bsx-info: #1f4f8f;
	--bsx-info-bg: #eaf1fb;
	--bsx-radius: 14px;
	--bsx-radius-sm: 10px;
	--bsx-gap: 16px;
	--bsx-shadow-1: 0 1px 2px rgb(16 21 31 / 5%), 0 2px 6px rgb(180 83 10 / 4%);
	--bsx-shadow-2: 0 1px 2px rgb(16 21 31 / 5%), 0 10px 28px -6px rgb(16 21 31 / 10%), 0 18px 40px -18px rgb(249 125 10 / 18%);
	--bsx-shadow-3: 0 4px 10px rgb(16 21 31 / 8%), 0 24px 60px -12px rgb(16 21 31 / 22%);
	--bsx-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bsx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
	.bsx-app,
	.bsx-dir,
	.bsx-stage,
	.bsx-panel,
	.bsx-reviewed,
	.bsx-doc {
		--bsx-brand: #ff9a3d;
		--bsx-brand-ink: #ffb672;
		--bsx-brand-soft: #2a1d10;
		--bsx-ink: #eef1f6;
		--bsx-ink-2: #cfd5df;
		--bsx-muted: #a6afbd;
		--bsx-line: #2a3241;
		--bsx-line-2: #394355;
		--bsx-base: #0e131b;
		--bsx-raised: #151b26;
		--bsx-sunken: #10151e;
		--bsx-pass: #5fd08f;
		--bsx-pass-bg: #0f2a1b;
		--bsx-warn: #f3c26b;
		--bsx-warn-bg: #2e2210;
		--bsx-fail: #ff8f86;
		--bsx-fail-bg: #2f1414;
		--bsx-info: #8fb8f2;
		--bsx-info-bg: #122036;
		--bsx-shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
		--bsx-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 32px -10px rgb(0 0 0 / 55%);
		--bsx-shadow-3: 0 6px 16px rgb(0 0 0 / 45%), 0 28px 64px -12px rgb(0 0 0 / 60%);
	}
}

/* ------------------------------------------------------------ app frame */

.bsx-intro { margin-block-end: 20px; max-width: 62ch; }

.bsx-app {
	display: grid;
	gap: 20px;
	color: var(--bsx-ink);
	min-height: 120px;
}

.bsx-app__boot {
	margin: 0;
	padding: 28px;
	border: 1px dashed var(--bsx-line-2);
	border-radius: var(--bsx-radius);
	color: var(--bsx-muted);
	text-align: center;
}

.bsx-app *:focus-visible,
.bsx-dir *:focus-visible {
	outline: 2px solid var(--bsx-brand);
	outline-offset: 2px;
}

.bsx-card {
	position: relative;
	display: grid;
	gap: 18px;
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius);
	background: var(--bsx-raised);
	box-shadow: var(--bsx-shadow-2);
	color: var(--bsx-ink);
	text-decoration: none;
}

a.bsx-card { transition: transform 220ms var(--bsx-ease), box-shadow 220ms var(--bsx-ease); }
a.bsx-card:hover { transform: translateY(-2px); box-shadow: var(--bsx-shadow-3); }
a.bsx-card:active { transform: translateY(0); }
a.bsx-card:focus-visible { outline: 2px solid var(--bsx-brand); outline-offset: 3px; }
.bsx-card__title { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.bsx-card__text { color: var(--bsx-muted); line-height: 1.6; }

.bsx-form::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 22px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--bsx-brand), #ffc27a);
	opacity: 0.9;
}

.bsx-fields {
	display: grid;
	gap: var(--bsx-gap);
}

@media (min-width: 760px) {
	.bsx-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsx-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsx-field--wide { grid-column: 1 / -1; }
}

.bsx-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.bsx-field__label { font-size: 0.875rem; font-weight: 650; color: var(--bsx-ink); }
.bsx-field__hint { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--bsx-muted); }
.bsx-field__error { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--bsx-fail); }
.bsx-field__error::before { content: "✕ "; }
.bsx-field__row { display: flex; align-items: flex-start; gap: 10px; }
.bsx-field__row .bsx-field__label { font-weight: 500; line-height: 1.5; }
.bsx-req { color: var(--bsx-fail); }

.bsx-input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--bsx-line-2);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-sunken);
	color: var(--bsx-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 160ms var(--bsx-ease), background-color 160ms var(--bsx-ease);
}

.bsx-input::placeholder { color: var(--bsx-muted); opacity: 0.8; }
.bsx-input:hover { border-color: var(--bsx-muted); }
.bsx-input:focus-visible { outline: 2px solid var(--bsx-brand); outline-offset: 1px; background: var(--bsx-raised); }
.bsx-input[aria-invalid="true"] { border-color: var(--bsx-fail); background: var(--bsx-fail-bg); }
.bsx-input--area { min-height: 140px; font-family: var(--bsx-mono); font-size: 13.5px; line-height: 1.6; resize: vertical; }
.bsx-input[type="color"] { padding: 4px; min-height: 46px; cursor: pointer; }
.bsx-input[type="file"] { padding: 9px; cursor: pointer; }
select.bsx-input { cursor: pointer; }

.bsx-check {
	flex: none;
	width: 20px;
	height: 20px;
	margin-block-start: 2px;
	accent-color: var(--bsx-brand);
	cursor: pointer;
}

.bsx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bsx-actions--end { justify-content: flex-end; }
.bsx-actions__spacer { flex: 1; }

/* ------------------------------------------------------------ buttons */

.bsx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: transform 180ms var(--bsx-ease), opacity 180ms var(--bsx-ease);
	-webkit-tap-highlight-color: transparent;
}

.bsx-btn:hover { transform: translateY(-1px); }
.bsx-btn:active { transform: translateY(0) scale(0.98); opacity: 0.9; }
.bsx-btn:focus-visible { outline: 2px solid var(--bsx-ink); outline-offset: 2px; }
.bsx-btn[disabled] { cursor: not-allowed; opacity: 0.55; transform: none; }
.bsx-btn.is-busy { cursor: progress; }
.bsx-btn.is-busy::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid currentcolor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: bsx-spin 800ms linear infinite;
}

.bsx-btn--primary { background: var(--bsx-brand); border-color: var(--bsx-brand); color: #1b0f02; box-shadow: 0 6px 16px -6px rgb(249 125 10 / 55%); }
.bsx-btn--quiet { background: var(--bsx-raised); border-color: var(--bsx-line-2); color: var(--bsx-ink); }
.bsx-btn--ghost { background: transparent; border-color: transparent; color: var(--bsx-brand-ink); padding-inline: 12px; }
.bsx-btn--danger { background: var(--bsx-fail-bg); border-color: var(--bsx-fail); color: var(--bsx-fail); }
.bsx-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }

@keyframes bsx-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ status and notices */

.bsx-status { margin: 0; min-height: 1.4em; font-size: 0.875rem; color: var(--bsx-muted); }
.bsx-status.is-fail { color: var(--bsx-fail); font-weight: 600; }
.bsx-status.is-pass { color: var(--bsx-pass); font-weight: 600; }

.bsx-notice {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid;
	border-inline-start-width: 4px;
	border-radius: var(--bsx-radius-sm);
	line-height: 1.6;
}

.bsx-notice p { margin: 0; }
.bsx-notice p + p { margin-block-start: 6px; }
.bsx-notice__title { font-weight: 700; }
.bsx-notice--info { background: var(--bsx-info-bg); border-color: var(--bsx-info); color: var(--bsx-ink); }
.bsx-notice--warn { background: var(--bsx-warn-bg); border-color: var(--bsx-warn); color: var(--bsx-ink); }
.bsx-notice--fail { background: var(--bsx-fail-bg); border-color: var(--bsx-fail); color: var(--bsx-ink); }
.bsx-notice--pass { background: var(--bsx-pass-bg); border-color: var(--bsx-pass); color: var(--bsx-ink); }

.bsx-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.bsx-badge__sym {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	font-size: 10px;
	color: #fff;
}

.bsx-badge--pass { background: var(--bsx-pass-bg); border-color: color-mix(in srgb, var(--bsx-pass) 40%, transparent); color: var(--bsx-pass); }
.bsx-badge--pass .bsx-badge__sym { background: var(--bsx-pass); }
.bsx-badge--warn { background: var(--bsx-warn-bg); border-color: color-mix(in srgb, var(--bsx-warn) 40%, transparent); color: var(--bsx-warn); }
.bsx-badge--warn .bsx-badge__sym { background: var(--bsx-warn); }
.bsx-badge--fail { background: var(--bsx-fail-bg); border-color: color-mix(in srgb, var(--bsx-fail) 40%, transparent); color: var(--bsx-fail); }
.bsx-badge--fail .bsx-badge__sym { background: var(--bsx-fail); }
.bsx-badge--info { background: var(--bsx-info-bg); border-color: color-mix(in srgb, var(--bsx-info) 40%, transparent); color: var(--bsx-info); }
.bsx-badge--info .bsx-badge__sym { background: var(--bsx-info); }
.bsx-badge--neutral { background: var(--bsx-sunken); border-color: var(--bsx-line-2); color: var(--bsx-ink-2); }
.bsx-badge--neutral .bsx-badge__sym { background: var(--bsx-muted); }

@media (prefers-color-scheme: dark) {
	.bsx-badge__sym { color: #0e131b; }
}

/* ------------------------------------------------------------ results */

.bsx-results { display: grid; gap: 20px; min-width: 0; }
.bsx-results:empty { display: none; }
.bsx-results:focus { outline: none; }

.bsx-section {
	display: grid;
	gap: 14px;
	min-width: 0;
	padding: clamp(16px, 2.6vw, 24px);
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius);
	background: var(--bsx-raised);
	box-shadow: var(--bsx-shadow-1);
}

.bsx-section__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; color: var(--bsx-ink); }
.bsx-section__lead { margin: -6px 0 0; color: var(--bsx-muted); line-height: 1.6; font-size: 0.9rem; }

.bsx-summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bsx-stat {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-sunken);
}

.bsx-stat__value { font-size: 1.5rem; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--bsx-ink); line-height: 1.1; }
.bsx-stat__label { font-size: 0.8125rem; color: var(--bsx-muted); }

.bsx-kv { display: grid; gap: 0; margin: 0; }
.bsx-kv__row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--bsx-line); }
.bsx-kv__row:last-child { border-block-end: 0; }
.bsx-kv dt { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--bsx-muted); }
.bsx-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 560px) {
	.bsx-kv__row { grid-template-columns: 1fr; gap: 2px; }
}

.bsx-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.bsx-finding {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid var(--bsx-line);
	border-inline-start: 3px solid var(--bsx-line-2);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-raised);
}

.bsx-finding--fail { border-inline-start-color: var(--bsx-fail); }
.bsx-finding--warn { border-inline-start-color: var(--bsx-warn); }
.bsx-finding--pass { border-inline-start-color: var(--bsx-pass); }
.bsx-finding--info { border-inline-start-color: var(--bsx-info); }
.bsx-finding__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 650; }
.bsx-finding__body { margin: 0; color: var(--bsx-ink-2); line-height: 1.6; font-size: 0.9rem; }
.bsx-finding__fix { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--bsx-ink-2); }
.bsx-finding__fix strong { color: var(--bsx-ink); }

.bsx-mono, .bsx-finding code, .bsx-kv code, .bsx-table code {
	font-family: var(--bsx-mono);
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

.bsx-codewrap {
	min-width: 0;
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-sunken);
	overflow: hidden;
}

.bsx-codewrap__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px 8px 14px;
	border-block-end: 1px solid var(--bsx-line);
	background: var(--bsx-raised);
}

.bsx-codewrap__title { font-size: 0.8125rem; font-weight: 650; color: var(--bsx-muted); }
.bsx-codewrap__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.bsx-code {
	margin: 0;
	max-height: 520px;
	padding: 14px 16px;
	overflow: auto;
	font-family: var(--bsx-mono);
	font-size: 13px;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	direction: ltr;
	text-align: left;
	color: var(--bsx-ink);
}

/* ------------------------------------------------------------ tables */

.bsx-table { display: grid; gap: 10px; min-width: 0; }
.bsx-table__tools .bsx-field { max-width: 320px; }
.bsx-table__scroll { overflow-x: auto; border: 1px solid var(--bsx-line); border-radius: var(--bsx-radius-sm); background: var(--bsx-raised); }
.bsx-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.bsx-table th, .bsx-table td { padding: 10px 12px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--bsx-line); }
.bsx-table td { overflow-wrap: anywhere; min-width: 90px; line-height: 1.5; }
.bsx-table th { position: sticky; top: 0; z-index: 1; background: var(--bsx-sunken); font-weight: 650; white-space: nowrap; color: var(--bsx-ink-2); }
.bsx-table tbody tr:last-child td { border-block-end: 0; }
.bsx-table tbody tr:hover td { background: color-mix(in srgb, var(--bsx-brand) 4%, transparent); }
.bsx-table__sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; border-radius: 4px; }
.bsx-table__sort:focus-visible { outline: 2px solid var(--bsx-brand); outline-offset: 2px; }
.bsx-table__sort:hover { color: var(--bsx-brand-ink); }
.bsx-table__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bsx-table__status { margin: 0; font-size: 0.8125rem; color: var(--bsx-muted); }
.bsx-table__nav { display: flex; align-items: center; gap: 8px; }
.bsx-table__page { font-size: 0.8125rem; color: var(--bsx-muted); }
.bsx-nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ tabs */

.bsx-tabs { display: grid; gap: 14px; min-width: 0; }
.bsx-tabs__list { display: flex; gap: 4px; padding: 4px; overflow-x: auto; border: 1px solid var(--bsx-line); border-radius: 999px; background: var(--bsx-sunken); width: max-content; max-width: 100%; }
.bsx-tabs__tab {
	flex: none;
	min-height: 38px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--bsx-muted);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 650;
	cursor: pointer;
	transition: opacity 160ms var(--bsx-ease);
}
.bsx-tabs__tab:hover { color: var(--bsx-ink); }
.bsx-tabs__tab:active { opacity: 0.8; }
.bsx-tabs__tab[aria-selected="true"] { background: var(--bsx-raised); color: var(--bsx-ink); box-shadow: var(--bsx-shadow-1); }
.bsx-tabs__panel { min-width: 0; }
.bsx-tabs__panel:focus-visible { outline: 2px solid var(--bsx-brand); outline-offset: 4px; border-radius: 6px; }

/* ------------------------------------------------------------ progress */

.bsx-progress-wrap { display: flex; align-items: center; gap: 12px; }
.bsx-progress { flex: 1; height: 8px; border: 0; border-radius: 999px; background: var(--bsx-sunken); overflow: hidden; accent-color: var(--bsx-brand); }
.bsx-progress::-webkit-progress-bar { background: var(--bsx-sunken); }
.bsx-progress::-webkit-progress-value { background: var(--bsx-brand); border-radius: 999px; }
.bsx-progress::-moz-progress-bar { background: var(--bsx-brand); border-radius: 999px; }
.bsx-progress__text { font-size: 0.8125rem; color: var(--bsx-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ comparison */

.bsx-compare { display: grid; gap: 14px; }

@media (min-width: 860px) {
	.bsx-compare--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bsx-diff-same { color: var(--bsx-muted); }
.bsx-diff-changed { background: var(--bsx-warn-bg); }

/* ------------------------------------------------------------ SERP preview */

.bsx-serp {
	padding: 18px 20px;
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius);
	background: #fff;
	color: #202124;
	font-family: Arial, Helvetica, sans-serif;
	box-shadow: var(--bsx-shadow-1);
	direction: ltr;
	text-align: left;
}

.bsx-serp--mobile { max-width: 412px; border-radius: 18px; }
.bsx-serp__site { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; }
.bsx-serp__fav { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dadce0; border-radius: 50%; background: #f1f3f4; font-size: 12px; font-weight: 700; color: #5f6368; }
.bsx-serp__name { font-size: 14px; color: #202124; line-height: 20px; }
.bsx-serp__crumb { font-size: 12px; color: #4d5156; line-height: 18px; }
.bsx-serp__title { margin: 0 0 3px; font-size: 20px; line-height: 26px; color: #1a0dab; font-weight: 400; overflow-wrap: anywhere; }
.bsx-serp--mobile .bsx-serp__title { font-size: 18px; line-height: 24px; color: #1558d6; }
.bsx-serp__desc { margin: 0; font-size: 14px; line-height: 22px; color: #474747; overflow-wrap: anywhere; }
.bsx-serp__date { color: #70757a; }
.bsx-serp mark { background: transparent; color: inherit; font-weight: 700; }

.bsx-meter { display: grid; gap: 6px; }
.bsx-meter__track { position: relative; height: 8px; border-radius: 999px; background: var(--bsx-sunken); overflow: hidden; }
.bsx-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: var(--bsx-pass); transform-origin: left; transition: transform 200ms var(--bsx-ease); width: 100%; }
.bsx-meter__fill.is-warn { background: var(--bsx-warn); }
.bsx-meter__fill.is-fail { background: var(--bsx-fail); }
.bsx-meter__label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8125rem; color: var(--bsx-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ QR, signature, share */

.bsx-qr { display: grid; gap: 20px; }

@media (min-width: 900px) {
	.bsx-qr { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); align-items: start; }
	.bsx-qr__preview { position: sticky; top: 96px; }
}

.bsx-qr__canvas {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 18px;
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius);
	background:
		linear-gradient(45deg, var(--bsx-sunken) 25%, transparent 25%) 0 0 / 16px 16px,
		linear-gradient(-45deg, var(--bsx-sunken) 25%, transparent 25%) 0 8px / 16px 16px,
		var(--bsx-raised);
}

.bsx-qr__canvas img, .bsx-qr__canvas canvas, .bsx-qr__canvas svg { width: 100%; height: auto; max-width: 340px; image-rendering: pixelated; border-radius: 6px; }

.bsx-pad {
	position: relative;
	border: 1px solid var(--bsx-line-2);
	border-radius: var(--bsx-radius-sm);
	background: #fff;
	touch-action: none;
	overflow: hidden;
}

.bsx-pad canvas { display: block; width: 100%; height: 200px; cursor: crosshair; }
.bsx-pad__line { position: absolute; inset-inline: 24px; inset-block-end: 44px; border-block-end: 1px dashed #9aa3b2; pointer-events: none; }
.bsx-pad__hint { position: absolute; inset-inline-start: 24px; inset-block-end: 16px; font-size: 12px; color: #6b7280; pointer-events: none; }

.bsx-pdf {
	width: 100%;
	height: min(78vh, 900px);
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-sunken);
}

.bsx-steps-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: bsxstep; }
.bsx-steps-bar li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--bsx-line); border-radius: 999px; font-size: 0.8125rem; color: var(--bsx-muted); counter-increment: bsxstep; }
.bsx-steps-bar li::before { content: counter(bsxstep); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bsx-sunken); font-weight: 700; font-size: 11px; }
.bsx-steps-bar li[aria-current="step"] { border-color: var(--bsx-brand); color: var(--bsx-ink); background: var(--bsx-brand-soft); }
.bsx-steps-bar li[aria-current="step"]::before { background: var(--bsx-brand); color: #1b0f02; }
.bsx-steps-bar li.is-done::before { content: "✓"; background: var(--bsx-pass); color: #fff; }

.bsx-linkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border: 1px dashed var(--bsx-brand);
	border-radius: var(--bsx-radius-sm);
	background: var(--bsx-brand-soft);
}

.bsx-linkbox input { flex: 1 1 260px; font-family: var(--bsx-mono); font-size: 13px; direction: ltr; }

.bsx-share-stage { min-height: 60vh; }
.bsx-narrow { max-width: 820px; }

/* ------------------------------------------------------------ page sections (server-rendered) */

.bsx-privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 18px 0 0;
	max-width: 80ch;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--bsx-muted, #5b6575);
}

.bsx-privacy svg { flex: none; margin-block-start: 3px; color: var(--bsx-brand, #f97d0a); }

.bsx-two { display: grid; gap: 32px; }

@media (min-width: 900px) {
	.bsx-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

.bsx-ticks, .bsx-steps, .bsx-dashes, .bsx-links { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; line-height: 1.65; }
.bsx-ticks li, .bsx-dashes li { position: relative; padding-inline-start: 26px; }
.bsx-ticks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--bsx-brand, #f97d0a); font-weight: 800; }
.bsx-dashes li::before { content: "—"; position: absolute; inset-inline-start: 0; top: 0; color: var(--bsx-muted, #5b6575); }
.bsx-steps { counter-reset: bsxs; }
.bsx-steps li { position: relative; padding-inline-start: 36px; counter-increment: bsxs; }
.bsx-steps li::before { content: counter(bsxs); position: absolute; inset-inline-start: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bsx-brand, #f97d0a); color: #1b0f02; font-size: 12px; font-weight: 800; }

@media (min-width: 760px) {
	.bsx-ticks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
	.bsx-links--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

.bsx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }

.bsx-panel {
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--bsx-line);
	border-radius: var(--bsx-radius);
	background: var(--bsx-raised);
	box-shadow: var(--bsx-shadow-1);
	color: var(--bsx-ink);
}

.bsx-provider { margin: 14px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--bsx-ink-2); }

.bsx-reviewed {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 18px 0 32px;
	font-size: 0.8125rem;
	color: var(--bsx-muted);
}

.bsx-prose h2 { letter-spacing: -0.02em; }
.bsx-prose pre, .bsx-prose code { direction: ltr; }
.bsx-prose pre { overflow-x: auto; }

.bsx-doc { display: grid; gap: 40px; }

@media (min-width: 1000px) {
	.bsx-doc { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
	.bsx-doc__aside { position: sticky; top: 100px; }
}

.bsx-doc__aside { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--bsx-line); border-radius: var(--bsx-radius); background: var(--bsx-raised); color: var(--bsx-ink); }
.bsx-doc__aside .bsx-links { margin-block-end: 14px; }
.bsx-doc__all { margin: 0; }

/* ------------------------------------------------------------ directory */

.bsx-dir { display: grid; gap: 56px; }
.bsx-dir__bar { display: grid; gap: 14px; position: relative; }
.bsx-dir__search { position: relative; display: block; max-width: 460px; }
.bsx-dir__search svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--bsx-muted); pointer-events: none; }
.bsx-dir__search .bsx-input { padding-inline-start: 42px; border-radius: 999px; background: var(--bsx-raised); box-shadow: var(--bsx-shadow-1); }
.bsx-dir__cats ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bsx-count { margin-inline-start: 4px; font-size: 0.75em; opacity: 0.65; font-variant-numeric: tabular-nums; }
.bsx-dir__status, .bsx-dir__empty { margin: 0; color: var(--bsx-muted); font-size: 0.9rem; }
.bsx-group { scroll-margin-top: 110px; }
.bsx-group[hidden], [data-bsx-card][hidden] { display: none !important; }
[data-bsx-card] { display: contents; }

/* ------------------------------------------------------------ utility */

.bsx-offscreen { position: fixed; inset-inline-start: -9999px; top: 0; opacity: 0; }
.bsx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bsx-grow { flex: 1 1 auto; min-width: 0; }
.bsx-muted { color: var(--bsx-muted); }
.bsx-small { font-size: 0.8125rem; }
.bsx-ltr { direction: ltr; unicode-bidi: isolate; }
.bsx-hr { height: 1px; border: 0; background: var(--bsx-line); margin: 4px 0; }
.bsx-thumb { max-width: 100%; height: auto; border: 1px solid var(--bsx-line); border-radius: var(--bsx-radius-sm); box-shadow: var(--bsx-shadow-1); }

@media (prefers-reduced-motion: reduce) {
	.bsx-app *, .bsx-dir *, a.bsx-card { transition: none !important; animation: none !important; }
	.bsx-btn:hover, a.bsx-card:hover { transform: none; }
}

@media print {
	.bsx-form, .bsx-actions, .bsx-codewrap__actions, .bsx-table__tools, .bsx-table__nav, .bwd-page-hero, header, footer, .bsx-noprint { display: none !important; }
	.bsx-section, .bsx-card { box-shadow: none; break-inside: avoid; }
}