/* ==========================================================================
   বংশবৃক্ষ — ফ্রন্টএন্ড নকশা
   ========================================================================== */

/* ---------- থিম ---------- */
.bb-app,
.bb-modal {
	--bb-font: 'BB Hind Siliguri', 'Hind Siliguri', 'Noto Sans Bengali', 'SolaimanLipi', 'Kalpurush', system-ui, sans-serif;
	--bb-serif: 'BB Noto Serif Bengali', 'Noto Serif Bengali', 'BB Hind Siliguri', serif;
	--bb-primary: #0e5a48;
	--bb-primary-d: #08382d;
	--bb-primary-l: #e3f1ec;
	--bb-accent: #c79a3b;
	--bb-accent-l: #f3e3b8;
	--bb-hero-1: #062a22;
	--bb-hero-2: #0d4b3c;
	--bb-paper: #fbf8f1;
	--bb-card: #ffffff;
	--bb-ink: #17241f;
	--bb-muted: #66756f;
	--bb-line: #e5e0d3;
	--bb-line-2: #efebe1;
	--bb-danger: #b42318;
	--bb-ok: #15803d;
	--bb-radius: 18px;
	--bb-shadow: 0 1px 2px rgba(23, 36, 31, .05), 0 8px 24px -8px rgba(23, 36, 31, .14);
	--bb-shadow-lg: 0 30px 80px -20px rgba(4, 22, 17, .45);
	--bb-male: #1f5596;
	--bb-male-bg: #e7eff9;
	--bb-female: #a3245a;
	--bb-female-bg: #fbe8f0;
}
.bb-theme-maroon {
	--bb-primary: #7a1f2b;
	--bb-primary-d: #4d0f18;
	--bb-primary-l: #f7e6e8;
	--bb-accent: #c99a3e;
	--bb-hero-1: #2b070d;
	--bb-hero-2: #5e1622;
	--bb-paper: #fcf7f2;
}
.bb-theme-indigo {
	--bb-primary: #283c86;
	--bb-primary-d: #16224f;
	--bb-primary-l: #e6eaf8;
	--bb-accent: #d1a64a;
	--bb-hero-1: #0b1230;
	--bb-hero-2: #1f2f6b;
	--bb-paper: #f7f8fc;
}
.bb-theme-earth {
	--bb-primary: #7c4a1e;
	--bb-primary-d: #4a2a0f;
	--bb-primary-l: #f5eadf;
	--bb-accent: #b8892f;
	--bb-hero-1: #2b1a0c;
	--bb-hero-2: #5a3816;
	--bb-paper: #fbf6ee;
}

/* প্রজন্মের রং */
.bb-g1 { --gc: #b07a1a; --gcl: #fbf1dc; --gcd: #7a520c; }
.bb-g2 { --gc: #0f766e; --gcl: #ddf3f0; --gcd: #0a524c; }
.bb-g3 { --gc: #6d3fc0; --gcl: #eee7fb; --gcd: #4b2690; }
.bb-g4 { --gc: #c0306a; --gcl: #fbe5ee; --gcd: #8c1d4b; }
.bb-g5 { --gc: #1f63c6; --gcl: #e3edfb; --gcd: #144591; }
.bb-g6 { --gc: #2f8a3c; --gcl: #e3f3e5; --gcd: #1f6029; }
.bb-g7 { --gc: #c8571b; --gcl: #fcebe0; --gcd: #923d10; }
.bb-g8 { --gc: #4f46b8; --gcl: #e9e8fa; --gcd: #352e8a; }

/* ---------- ভিত্তি ও রিসেট ---------- */
.bb-app {
	position: relative;
	font-family: var(--bb-font);
	color: var(--bb-ink);
	background: var(--bb-paper);
	border-radius: calc(var(--bb-radius) + 6px);
	line-height: 1.6;
	font-size: 16px;
	overflow: hidden;
	overflow: clip;
	box-shadow: 0 0 0 1px var(--bb-line-2);
	margin: 0 auto 2em;
	max-width: 100%;
	-webkit-font-smoothing: antialiased;
	container-type: inline-size;
	container-name: bbapp;
}
.bb-app.bb-fullmode {
	container-type: normal;
}
/* থিমের সরু কলাম থেকে বেরিয়ে চওড়া দেখানো */
.bb-app.bb-wide {
	width: min(1320px, calc(100vw - 48px));
	max-width: none;
	margin-left: calc(50% - min(660px, 50vw - 24px)) !important;
	margin-right: 0 !important;
}
.bb-app *,
.bb-modal * {
	box-sizing: border-box;
}
.bb-app svg,
.bb-modal svg {
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	vertical-align: middle;
}
.bb-app button,
.bb-modal button {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	box-shadow: none;
	cursor: pointer;
	background: none;
	border: 0;
	color: inherit;
	padding: 0;
	min-height: 0;
	width: auto;
	border-radius: 0;
	text-decoration: none;
	font-weight: inherit;
}
.bb-app input,
.bb-app select,
.bb-app textarea,
.bb-modal input {
	font-family: inherit;
	font-size: 15px;
	color: var(--bb-ink);
	margin: 0;
	max-width: 100%;
	box-shadow: none;
	line-height: 1.4;
}
.bb-app h2,
.bb-app h3,
.bb-app h4,
.bb-modal h3,
.bb-modal h4 {
	font-family: var(--bb-serif);
	color: inherit;
	margin: 0;
	padding: 0;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.35;
	border: 0;
}
.bb-app p,
.bb-modal p {
	margin: 0;
}
.bb-app [hidden],
.bb-modal[hidden],
.bb-modal [hidden] {
	display: none !important;
}
.bb-app :focus-visible,
.bb-modal :focus-visible {
	outline: 2.5px solid var(--bb-accent);
	outline-offset: 2px;
}

/* ---------- লোডিং ---------- */
.bb-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 90px 20px;
	color: var(--bb-muted);
}
.bb-boot-ring {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid var(--bb-line);
	border-top-color: var(--bb-primary);
	animation: bb-spin 0.9s linear infinite;
}
@keyframes bb-spin {
	to { transform: rotate(360deg); }
}
.bb-error,
.bb-empty {
	text-align: center;
	padding: 70px 24px;
	color: var(--bb-muted);
}
.bb-error svg,
.bb-empty svg {
	width: 54px;
	height: 54px;
	color: var(--bb-accent);
	margin-bottom: 12px;
}
.bb-empty h3 {
	color: var(--bb-ink);
	font-size: 22px;
	margin-bottom: 8px;
}
.bb-empty-sm {
	padding: 40px;
	text-align: center;
	color: var(--bb-muted);
	grid-column: 1 / -1;
}

/* ---------- হিরো ---------- */
.bb-hero {
	position: relative;
	padding: 54px 48px 50px;
	color: #fff;
	background:
		radial-gradient(1200px 400px at 85% -10%, rgba(255, 255, 255, .12), transparent 60%),
		radial-gradient(600px 300px at 0% 110%, rgba(199, 154, 59, .22), transparent 70%),
		linear-gradient(135deg, var(--bb-hero-1), var(--bb-hero-2));
	overflow: hidden;
	isolation: isolate;
}
.bb-hero::after {
	content: '';
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(232, 207, 138, .28);
	border-radius: calc(var(--bb-radius) + 2px);
	pointer-events: none;
}
.bb-hero-pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23e8cf8a' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M44 10l10 24 24 10-24 10-10 24-10-24-24-10 24-10z'/%3E%3Crect x='24' y='24' width='40' height='40'/%3E%3Crect x='24' y='24' width='40' height='40' transform='rotate(45 44 44)'/%3E%3Ccircle cx='44' cy='44' r='7'/%3E%3Ccircle cx='0' cy='0' r='12'/%3E%3Ccircle cx='88' cy='0' r='12'/%3E%3Ccircle cx='0' cy='88' r='12'/%3E%3Ccircle cx='88' cy='88' r='12'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 70%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, .25), #000 70%);
}
.bb-hero-art {
	position: absolute;
	right: 40px;
	bottom: -6px;
	width: 250px;
	opacity: .95;
	z-index: -1;
}
.bb-hero-art svg {
	width: 100%;
	height: auto;
	stroke: none;
}
.bb-hero-art .trunk,
.bb-hero-art .root {
	fill: none;
	stroke: #e8cf8a;
	stroke-width: 5;
	stroke-linecap: round;
	opacity: .85;
}
.bb-hero-art .root {
	stroke-width: 3;
	opacity: .5;
}
.bb-hero-art circle {
	stroke: rgba(255, 255, 255, .2);
	stroke-width: 1;
}
.bb-hero-art .l0 { fill: rgba(232, 207, 138, .5); }
.bb-hero-art .l1 { fill: rgba(255, 255, 255, .16); }
.bb-hero-art .l2 { fill: rgba(232, 207, 138, .28); }
.bb-hero-art .l3 { fill: rgba(126, 210, 180, .25); }
.bb-hero-inner {
	position: relative;
	max-width: 700px;
}
.bb-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	letter-spacing: .02em;
	color: var(--bb-accent-l);
	background: rgba(232, 207, 138, .12);
	border: 1px solid rgba(232, 207, 138, .3);
	padding: 5px 14px 4px;
	border-radius: 99px;
}
.bb-app .bb-hero-title {
	font-size: clamp(30px, 4.6vw, 48px);
	font-weight: 700;
	margin: 16px 0 8px;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.bb-hero-sub {
	font-size: 17px;
	color: rgba(255, 255, 255, .78);
	max-width: 560px;
}
.bb-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.bb-hstat {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	border-radius: 14px;
	padding: 10px 18px 8px;
	min-width: 112px;
}
.bb-hstat b {
	display: block;
	font-family: var(--bb-serif);
	font-size: 28px;
	line-height: 1.15;
	color: var(--bb-accent-l);
}
.bb-hstat span {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .75);
}

/* ---------- ট্যাব ---------- */
.bb-tabs {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	background: rgba(251, 248, 241, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bb-line);
}
.bb-app .bb-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	color: var(--bb-muted);
	transition: background .2s, color .2s, box-shadow .2s;
	white-space: nowrap;
}
.bb-app .bb-tab:hover {
	color: var(--bb-primary);
	background: var(--bb-primary-l);
}
.bb-app .bb-tab.is-active {
	color: #fff;
	background: var(--bb-primary);
	box-shadow: 0 6px 16px -6px var(--bb-primary);
}
.bb-app .bb-tab-cta {
	color: var(--bb-primary-d);
	background: linear-gradient(135deg, #f6e4b0, var(--bb-accent));
	box-shadow: 0 6px 16px -8px var(--bb-accent);
}
.bb-app .bb-tab-cta:hover {
	color: var(--bb-primary-d);
	background: linear-gradient(135deg, #f8eac2, #d6ab4f);
}
.bb-app .bb-tab-cta.is-active {
	background: var(--bb-primary-d);
	color: var(--bb-accent-l);
}
.bb-tabs-search {
	margin-left: auto;
	width: 270px;
	max-width: 100%;
}

/* ---------- পেন ---------- */
.bb-pane {
	display: none;
	padding: 26px;
}
.bb-pane.is-active {
	display: block;
	animation: bb-fade .35s ease;
}
@keyframes bb-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.bb-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.bb-section-head h3 {
	font-size: 26px;
	color: var(--bb-primary-d);
}
.bb-section-head p {
	color: var(--bb-muted);
	font-size: 15px;
}
.bb-section-head p b {
	color: var(--bb-ink);
}

/* ---------- কম্বোবক্স ---------- */
.bbc {
	position: relative;
}
.bbc-field {
	position: relative;
	display: flex;
	align-items: center;
}
.bbc-ico {
	position: absolute;
	left: 13px;
	width: 17px !important;
	height: 17px !important;
	color: var(--bb-muted);
	pointer-events: none;
}
.bb-app .bbc-input,
.bb-modal .bbc-input {
	width: 100%;
	height: 44px;
	padding: 8px 36px 8px 40px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}
.bb-app .bb-f .bbc-input {
	padding-left: 40px;
	padding-right: 36px;
}
.bbc-input:focus {
	border-color: var(--bb-primary) !important;
	box-shadow: 0 0 0 4px var(--bb-primary-l) !important;
}
.bb-app .bbc-clear {
	position: absolute;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 18px;
	color: var(--bb-muted);
	display: grid;
	place-items: center;
}
.bb-app .bbc-clear:hover {
	background: var(--bb-line-2);
}
.bbc-list {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 320px;
	overflow: auto;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	box-shadow: 0 20px 40px -12px rgba(23, 36, 31, .28);
	padding: 6px;
	min-width: 260px;
}
.bbc-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
}
.bbc-opt:hover,
.bbc-opt.is-active {
	background: var(--bb-primary-l);
}
.bbc-av {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bb-primary-l);
	color: var(--bb-primary);
	font-weight: 700;
	flex: none;
	font-size: 14px;
}
.bbc-txt {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.bbc-txt b {
	font-weight: 600;
	font-size: 14.5px;
}
.bbc-txt small {
	color: var(--bb-muted);
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bbc-empty {
	color: var(--bb-muted);
	font-style: italic;
}
.bbc-none {
	padding: 14px;
	color: var(--bb-muted);
	text-align: center;
	font-size: 14px;
}
.is-disabled .bbc-input {
	opacity: .45;
	pointer-events: none;
}

/* ---------- বৃক্ষ ---------- */
.bb-pane[data-pane='tree'] {
	padding: 18px;
}
.bb-treebox {
	background: var(--bb-card);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	border: 1px solid var(--bb-line-2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.bb-treebox.is-full {
	position: fixed;
	inset: 0;
	z-index: 99999;
	border-radius: 0;
}
.bb-treebox:fullscreen {
	border-radius: 0;
}
.bb-tree-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bb-line-2);
	background: linear-gradient(#fff, #fcfbf7);
}
.bb-tree-find {
	flex: 1 1 240px;
	max-width: 340px;
}
.bb-depth {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--bb-muted);
	margin: 0;
}
.bb-app .bb-depth select {
	height: 40px;
	border: 1.5px solid var(--bb-line);
	border-radius: 10px;
	padding: 0 32px 0 12px;
	background-color: #fff;
	font-size: 14px;
	cursor: pointer;
}
.bb-tbtns {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
	background: var(--bb-paper);
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	padding: 3px;
}
.bb-app .bb-tbtn {
	width: 36px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	color: var(--bb-ink);
	transition: background .15s, color .15s;
}
.bb-app .bb-tbtn:hover {
	background: #fff;
	color: var(--bb-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.bb-zoomval {
	font-size: 12.5px;
	color: var(--bb-muted);
	min-width: 44px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.bb-canvas {
	position: relative;
	height: min(72vh, 760px);
	min-height: 420px;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
	background-color: #fdfcf8;
	background-image:
		radial-gradient(circle at 50% 0%, rgba(199, 154, 59, .07), transparent 60%),
		radial-gradient(rgba(23, 36, 31, .09) 1px, transparent 1.4px);
	background-size: 100% 100%, 22px 22px;
}
.bb-treebox.is-full .bb-canvas,
.bb-treebox:fullscreen .bb-canvas {
	height: auto;
	flex: 1;
}
.bb-canvas.is-drag {
	cursor: grabbing;
}
.bb-app .bb-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	stroke: none;
	fill: none;
	display: block;
}
.bb-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%) translateY(6px);
	background: rgba(23, 36, 31, .82);
	color: #fff;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 99px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	white-space: nowrap;
}
.bb-canvas.show-hint .bb-hint {
	opacity: 1;
	transform: translateX(-50%);
}
.bb-hint b {
	color: var(--bb-accent-l);
}

/* নোড */
.bb-node {
	cursor: pointer;
	outline: none;
}
.bb-node .bb-card {
	fill: #fff;
	stroke: var(--gc);
	stroke-opacity: .32;
	stroke-width: 1.2;
	transition: stroke-opacity .2s, stroke-width .2s;
}
.bb-node:hover .bb-card,
.bb-node:focus .bb-card {
	stroke-opacity: 1;
	stroke-width: 2;
}
.bb-node .bb-bar {
	fill: var(--gc);
}
.bb-node .bb-ring {
	fill: none;
	stroke: var(--gc);
	stroke-width: 2;
}
.bb-node .bb-avbg {
	fill: var(--bb-male-bg);
}
.bb-node.is-f .bb-avbg {
	fill: var(--bb-female-bg);
}
.bb-node .bb-ini {
	font-family: var(--bb-font);
	font-weight: 700;
	font-size: 17px;
	fill: var(--bb-male);
}
.bb-node.is-f .bb-ini {
	fill: var(--bb-female);
}
.bb-node .bb-nm {
	font-family: var(--bb-font);
	font-weight: 600;
	font-size: 14.5px;
	fill: var(--bb-ink);
}
.bb-node .bb-sb {
	font-family: var(--bb-font);
	font-size: 12px;
	fill: var(--bb-muted);
}
.bb-node.is-dead .bb-card {
	fill: #f8f6f0;
}
.bb-node.is-dead .bb-ring {
	stroke-dasharray: 3 3.2;
}
.bb-node.is-dead .bb-nm {
	fill: #3d4a45;
}
.bb-node .bb-tog circle {
	fill: var(--gc);
	stroke: #fff;
	stroke-width: 2.5;
	transition: transform .15s;
}
.bb-node .bb-tog text {
	font-family: var(--bb-font);
	font-weight: 700;
	font-size: 12px;
	fill: #fff;
	pointer-events: none;
}
.bb-node.is-closed .bb-tog circle {
	fill: #fff;
	stroke: var(--gc);
	stroke-width: 2;
}
.bb-node.is-closed .bb-tog text {
	fill: var(--gcd);
	font-size: 11px;
}
.bb-node .bb-tog:hover circle {
	transform: scale(1.18);
}
.bb-node.is-path .bb-card {
	stroke: var(--bb-accent);
	stroke-opacity: 1;
	stroke-width: 2.2;
}
.bb-node.is-sel .bb-card {
	stroke: var(--bb-accent);
	stroke-opacity: 1;
	stroke-width: 3.5;
	fill: #fffaf0;
}
.bb-node.is-pulse .bb-card {
	animation: bb-pulse 1.4s ease 2;
}
@keyframes bb-pulse {
	0%, 100% { stroke-width: 3.5; }
	50% { stroke-width: 9; stroke-opacity: .55; }
}
.bb-link {
	fill: none;
	stroke: var(--gc);
	stroke-opacity: .5;
	stroke-width: 2;
}
.bb-link.is-path {
	stroke: var(--bb-accent);
	stroke-opacity: 1;
	stroke-width: 3.5;
}
.bb-canvas.is-far .bb-link {
	stroke-width: 4;
}
.bb-canvas.is-far .bb-sb {
	opacity: 0;
}
/* অনেক দূর থেকে দেখলে নোডগুলো রঙিন ব্লক */
.bb-canvas.is-tiny .bb-node .bb-card {
	fill: var(--gc);
	stroke: none;
	filter: none;
}
.bb-canvas.is-tiny .bb-node > :not(.bb-card) {
	display: none;
}
.bb-canvas.is-tiny .bb-node.is-dead .bb-card {
	fill-opacity: .55;
}
.bb-canvas.is-tiny .bb-node.is-sel .bb-card,
.bb-canvas.is-tiny .bb-node.is-path .bb-card {
	fill: var(--bb-accent);
}
.bb-canvas.is-tiny .bb-link {
	stroke-width: 8;
	stroke-opacity: .6;
}

/* লেজেন্ড */
.bb-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-top: 1px solid var(--bb-line-2);
	background: #fcfbf7;
	font-size: 13px;
}
.bb-legend-t {
	color: var(--bb-muted);
	margin-right: 4px;
}
.bb-app .bb-leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 99px;
	border: 1px solid var(--bb-line);
	background: #fff;
	font-size: 13px;
	color: var(--bb-ink);
	transition: border-color .15s, background .15s;
}
.bb-app .bb-leg:hover {
	border-color: var(--gc);
	background: var(--gcl);
}
.bb-leg i,
.bb-chip i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gc);
	display: inline-block;
}

/* ---------- চিপ ও ফিল্টার ---------- */
.bb-filter-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	min-width: 260px;
}
.bb-filter-search svg {
	position: absolute;
	left: 13px;
	color: var(--bb-muted);
	width: 17px;
	height: 17px;
}
.bb-app .bb-filter-search input {
	width: 100%;
	height: 44px;
	padding: 8px 14px 8px 40px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fff;
	outline: none;
}
.bb-app .bb-filter-search input:focus {
	border-color: var(--bb-primary);
	box-shadow: 0 0 0 4px var(--bb-primary-l);
}
.bb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.bb-app .bb-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 99px;
	background: #fff;
	border: 1.5px solid var(--bb-line);
	font-size: 14px;
	font-weight: 500;
	transition: all .15s;
}
.bb-chip small {
	color: var(--bb-muted);
	font-size: 12px;
}
.bb-app .bb-chip:hover {
	border-color: var(--gc, var(--bb-primary));
}
.bb-app .bb-chip.is-active {
	background: var(--gc, var(--bb-primary));
	border-color: var(--gc, var(--bb-primary));
	color: #fff;
}
.bb-chip.is-active small {
	color: rgba(255, 255, 255, .8);
}
.bb-chip.is-active i {
	background: #fff;
}

/* ---------- অবতার ---------- */
.bb-av {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-weight: 700;
	flex: none;
	overflow: hidden;
	background: var(--bb-male-bg);
	color: var(--bb-male);
	font-size: 16px;
	line-height: 1;
}
.bb-av.is-f {
	background: var(--bb-female-bg);
	color: var(--bb-female);
}
.bb-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bb-av-sm {
	width: 28px;
	height: 28px;
	font-size: 12.5px;
}
.bb-av-lg {
	width: 58px;
	height: 58px;
	font-size: 22px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gc);
}

/* ---------- পরিবার কার্ড ---------- */
.bb-fam-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
	gap: 18px;
}
.bb-fam {
	position: relative;
	background: var(--bb-card);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	border: 1px solid var(--bb-line-2);
	padding: 0 18px 14px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
.bb-fam::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, var(--gc), var(--gcl));
}
.bb-fam::after {
	content: '';
	position: absolute;
	right: -30px;
	top: -30px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--gcl) 0 40%, transparent 41%), radial-gradient(circle, transparent 0 55%, var(--gcl) 56% 58%, transparent 59%);
	opacity: .8;
	pointer-events: none;
}
.bb-fam:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(23, 36, 31, .05), 0 18px 36px -12px rgba(23, 36, 31, .22);
}
.bb-fam.is-flash {
	animation: bb-flash 1.6s ease;
}
@keyframes bb-flash {
	0%, 60% { box-shadow: 0 0 0 4px var(--bb-accent), var(--bb-shadow); }
	100% { box-shadow: var(--bb-shadow); }
}
.bb-fam-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 10px;
	position: relative;
	z-index: 1;
}
.bb-fam-no {
	font-family: var(--bb-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--gcd);
	letter-spacing: .02em;
}
.bb-gen-pill {
	font-size: 12px;
	font-weight: 600;
	color: var(--gcd);
	background: var(--gcl);
	padding: 3px 10px;
	border-radius: 99px;
}
.bb-fam-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	position: relative;
	z-index: 1;
}
.bb-app .bb-fam-av {
	border-radius: 50%;
	padding: 5px;
}
.bb-fam-who {
	min-width: 0;
	flex: 1;
	padding-top: 3px;
}
.bb-app .bb-fam-name {
	font-family: var(--bb-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--bb-ink);
	text-align: left;
	line-height: 1.3;
}
.bb-app .bb-fam-name:hover {
	color: var(--gc);
}
.bb-fam-meta {
	font-size: 13.5px;
	color: var(--bb-muted);
	margin-top: 2px;
}
.bb-fam-sp {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 4px;
}
.bb-sp {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: #6b3a4b;
}
.bb-sp svg {
	width: 14px;
	height: 14px;
	color: #d0507b;
	fill: #f6c5d6;
}
.bb-dec-tag {
	display: inline-block;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: #5b5340;
	background: #ece6d6;
	padding: 1px 8px;
	border-radius: 99px;
	vertical-align: 1px;
}
.bb-fam-kids-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 16px 0 8px;
	padding-top: 12px;
	border-top: 1px dashed var(--bb-line);
	font-size: 14px;
	font-weight: 600;
}
.bb-fam-kids-h small {
	color: var(--bb-muted);
	font-weight: 400;
	font-size: 13px;
}
.bb-fam-kids,
.bb-kids {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bb-app .bb-kid,
.bb-modal .bb-kid {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 3px 11px 3px 3px;
	border-radius: 99px;
	background: var(--bb-paper);
	border: 1px solid var(--bb-line);
	font-size: 13.5px;
	transition: border-color .15s, background .15s;
	max-width: 100%;
	text-align: left;
}
.bb-kid > span:not(.bb-av) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-app .bb-kid:hover,
.bb-modal .bb-kid:hover {
	border-color: var(--gc, var(--bb-primary));
	background: #fff;
}
.bb-kid.is-dead {
	color: #5e655f;
}
.bb-kid.is-dead .bb-av {
	filter: grayscale(.5);
}
.bb-kid-fam {
	display: inline-flex;
	color: var(--bb-accent);
}
.bb-kid-fam svg {
	width: 14px;
	height: 14px;
}
.bb-fam-nokids {
	margin: 16px 0 6px;
	padding-top: 12px;
	border-top: 1px dashed var(--bb-line);
	font-size: 13.5px;
	color: var(--bb-muted);
	font-style: italic;
}
.bb-fam-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}
.bb-app .bb-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--bb-primary);
	font-weight: 600;
	padding: 5px 8px;
	border-radius: 8px;
	text-align: left;
	min-width: 0;
}
.bb-app .bb-link-btn:hover {
	background: var(--bb-primary-l);
}
.bb-root-tag {
	font-size: 12.5px;
	color: var(--bb-accent);
	font-weight: 600;
}
.bb-more-wrap {
	text-align: center;
	margin-top: 24px;
}

/* ---------- বোতাম ---------- */
.bb-app .bb-btn,
.bb-modal .bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 15px;
	transition: background .2s, transform .1s, box-shadow .2s, color .2s;
	text-decoration: none;
	white-space: nowrap;
}
.bb-app .bb-btn:active,
.bb-modal .bb-btn:active {
	transform: translateY(1px);
}
.bb-app .bb-btn-primary,
.bb-modal .bb-btn-primary {
	background: var(--bb-primary);
	color: #fff;
	box-shadow: 0 8px 18px -8px var(--bb-primary);
}
.bb-app .bb-btn-primary:hover,
.bb-modal .bb-btn-primary:hover {
	background: var(--bb-primary-d);
	color: #fff;
}
.bb-modal .bb-btn-primary:disabled {
	background: #b9c4bf;
	box-shadow: none;
	cursor: not-allowed;
}
.bb-app .bb-btn-ghost,
.bb-modal .bb-btn-ghost {
	background: #fff;
	color: var(--bb-ink);
	border: 1.5px solid var(--bb-line);
}
.bb-app .bb-btn-ghost:hover,
.bb-modal .bb-btn-ghost:hover {
	border-color: var(--bb-primary);
	color: var(--bb-primary);
}
.bb-app .bb-btn-lg {
	padding: 14px 26px;
	font-size: 16px;
}
.bb-spin {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	animation: bb-spin .8s linear infinite;
	display: inline-block;
}

/* ---------- প্রজন্ম তালিকা ---------- */
.bb-list-tools {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.bb-switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	cursor: pointer;
	margin: 0;
	user-select: none;
}
.bb-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bb-switch span {
	width: 40px;
	height: 23px;
	border-radius: 99px;
	background: #d6d1c4;
	position: relative;
	transition: background .2s;
}
.bb-switch span::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	transition: transform .2s;
}
.bb-switch input:checked + span {
	background: var(--bb-primary);
}
.bb-switch input:checked + span::after {
	transform: translateX(17px);
}
.bb-switch input:focus-visible + span {
	outline: 2.5px solid var(--bb-accent);
	outline-offset: 2px;
}
.bb-gens {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.bb-gen {
	background: var(--bb-card);
	border-radius: var(--bb-radius);
	border: 1px solid var(--bb-line-2);
	box-shadow: var(--bb-shadow);
	overflow: hidden;
}
.bb-app .bb-gen-h {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	text-align: left;
	transition: background .2s;
}
.bb-app .bb-gen-h:hover {
	background: var(--gcl);
}
.bb-gen-num {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-family: var(--bb-serif);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
	background: linear-gradient(135deg, var(--gc), var(--gcd));
	box-shadow: 0 6px 14px -6px var(--gc);
	flex: none;
}
.bb-gen-t {
	display: flex;
	flex-direction: column;
	flex: 1;
	line-height: 1.35;
}
.bb-gen-t b {
	font-family: var(--bb-serif);
	font-size: 18px;
}
.bb-gen-t small {
	color: var(--bb-muted);
	font-size: 13.5px;
}
.bb-gen-caret {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bb-muted);
	border-bottom: 2px solid var(--bb-muted);
	transform: rotate(45deg);
	transition: transform .25s;
	margin-right: 6px;
}
.bb-gen.is-open .bb-gen-caret {
	transform: rotate(-135deg);
}
.bb-gen-body {
	border-top: 1px solid var(--bb-line-2);
	animation: bb-fade .3s ease;
}
.bb-table {
	width: 100%;
	font-size: 14px;
}
.bb-tr {
	display: grid;
	grid-template-columns: 52px minmax(190px, 1.6fr) minmax(130px, 1.2fr) minmax(130px, 1.2fr) 160px minmax(100px, 1fr) minmax(110px, 1fr);
	gap: 12px;
	align-items: center;
	padding: 9px 18px;
	border-bottom: 1px solid var(--bb-line-2);
	cursor: pointer;
	transition: background .15s;
}
.bb-tr:last-child {
	border-bottom: 0;
}
.bb-tr:not(.bb-th):hover {
	background: var(--gcl);
}
.bb-th {
	cursor: default;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bb-muted);
	background: #fcfbf7;
	padding-top: 8px;
	padding-bottom: 8px;
}
.bb-tr > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-td-no {
	color: var(--bb-muted);
	font-variant-numeric: tabular-nums;
}
.bb-td-name {
	display: flex !important;
	align-items: center;
	gap: 10px;
}
.bb-td-name > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.bb-td-name b {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-td-name small {
	color: var(--bb-muted);
	font-size: 12px;
}
.bb-tr em {
	color: var(--bb-accent);
	font-style: normal;
	font-weight: 600;
}
.bb-tr.is-dead .bb-td-name b {
	color: #3d4a45;
}

/* ---------- মডাল ---------- */
.bb-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: var(--bb-font);
	color: var(--bb-ink);
	line-height: 1.6;
	font-size: 16px;
}
.bb-modal-bg {
	position: absolute;
	inset: 0;
	background: rgba(8, 22, 18, .55);
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity .22s;
}
.bb-modal-panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 40px);
	overflow: auto;
	background: var(--bb-paper);
	border-radius: 24px;
	box-shadow: var(--bb-shadow-lg);
	transform: translateY(20px) scale(.97);
	opacity: 0;
	transition: transform .25s cubic-bezier(.2, .9, .3, 1.2), opacity .2s;
	overscroll-behavior: contain;
}
.bb-modal.is-open .bb-modal-bg {
	opacity: 1;
}
.bb-modal.is-open .bb-modal-panel {
	transform: none;
	opacity: 1;
}
.bb-modal .bb-modal-x {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(4px);
}
.bb-modal .bb-modal-x:hover {
	background: rgba(255, 255, 255, .3);
}
.bb-mh {
	position: relative;
	display: flex;
	gap: 22px;
	align-items: center;
	padding: 34px 30px 28px;
	color: #fff;
	background: linear-gradient(135deg, var(--gcd), var(--gc));
	overflow: hidden;
}
.bb-mh-pattern {
	position: absolute;
	inset: 0;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.16'%3E%3Cpath d='M35 6l8 21 21 8-21 8-8 21-8-21-21-8 21-8z'/%3E%3Ccircle cx='35' cy='35' r='6'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(270deg, #000, transparent 80%);
	mask-image: linear-gradient(270deg, #000, transparent 80%);
}
.bb-mh-av {
	position: relative;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	flex: none;
	padding: 4px;
	background: linear-gradient(135deg, #f8e7b7, var(--bb-accent));
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45);
}
.bb-mh-av img,
.bb-mh-av span {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: grid;
	place-items: center;
	font-size: 40px;
	font-weight: 700;
	background: var(--bb-male-bg);
	color: var(--bb-male);
	border: 3px solid #fff;
}
.bb-mh-av span.is-f {
	background: var(--bb-female-bg);
	color: var(--bb-female);
}
.bb-mh-t {
	position: relative;
	min-width: 0;
}
.bb-modal .bb-mh-t h3 {
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 700;
	color: #fff;
	padding-right: 30px;
}
.bb-mh-nk {
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
}
.bb-mh-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.bb-tag {
	font-size: 12.5px;
	font-weight: 600;
	padding: 3px 11px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .17);
	border: 1px solid rgba(255, 255, 255, .25);
}
.bb-tag.is-alive {
	background: rgba(134, 239, 172, .25);
}
.bb-tag.is-dead {
	background: rgba(0, 0, 0, .22);
}
.bb-mb {
	padding: 6px 30px 10px;
}
.bb-msec {
	padding: 18px 0;
	border-bottom: 1px solid var(--bb-line);
}
.bb-msec:last-child {
	border-bottom: 0;
}
.bb-modal .bb-msec h4 {
	font-size: 15px;
	color: var(--bb-primary-d);
	margin-bottom: 10px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.bb-msec h4 small {
	font-family: var(--bb-font);
	color: var(--bb-muted);
	font-weight: 400;
	font-size: 13px;
}
.bb-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.bb-modal .bb-crumb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	padding: 3px 11px 3px 3px;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 99px;
}
.bb-modal button.bb-crumb:hover {
	border-color: var(--gc);
	background: var(--gcl);
}
.bb-crumb i {
	font-style: normal;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 700;
	color: #fff;
	background: var(--gc);
}
.bb-crumb.is-me {
	font-weight: 700;
	border-color: var(--gc);
	background: var(--gcl);
}
.bb-crumb-sep {
	color: var(--bb-muted);
}
.bb-root-note {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--bb-primary);
	font-weight: 600;
}
.bb-root-note svg {
	width: 26px;
	height: 26px;
	color: var(--bb-accent);
}
.bb-infos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.bb-info {
	display: grid;
	grid-template-columns: 36px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	background: #fff;
	border: 1px solid var(--bb-line-2);
	border-radius: 14px;
	padding: 10px 12px;
	align-items: center;
}
.bb-info-i {
	grid-row: 1 / 3;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--gcl);
	color: var(--gcd);
}
.bb-info-l {
	font-size: 12px;
	color: var(--bb-muted);
	line-height: 1.3;
}
.bb-info-v {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.4;
	word-break: break-word;
}
.bb-info-v a,
.bb-modal .bb-inline-link {
	color: var(--bb-primary);
	text-decoration: none;
	font-weight: 600;
}
.bb-modal .bb-inline-link:hover {
	text-decoration: underline;
}
.bb-bio {
	background: #fff;
	border-left: 4px solid var(--bb-accent);
	padding: 12px 16px;
	border-radius: 0 12px 12px 0;
	font-size: 15px;
}
.bb-mf {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 30px 18px;
	background: linear-gradient(transparent, var(--bb-paper) 30%);
}
html.bb-noscroll {
	overflow: hidden;
}

/* ---------- ফর্ম ---------- */
.bb-form-wrap {
	max-width: 900px;
	margin: 0 auto;
}
.bb-form-intro {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 22px 24px;
	background: linear-gradient(135deg, var(--bb-primary-l), #fff);
	border: 1px solid var(--bb-line-2);
	border-radius: var(--bb-radius);
	margin-bottom: 18px;
}
.bb-form-intro-ic {
	width: 52px;
	height: 52px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 16px;
	color: #fff;
	background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-d));
	box-shadow: 0 10px 20px -10px var(--bb-primary);
}
.bb-form-intro-ic svg {
	width: 26px;
	height: 26px;
	stroke-width: 2.4;
}
.bb-form-intro h3 {
	font-size: 22px;
	color: var(--bb-primary-d);
	margin-bottom: 4px;
}
.bb-form-intro p {
	color: var(--bb-muted);
	font-size: 15px;
}
.bb-app .bb-steps {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	counter-reset: none;
}
.bb-app .bb-steps li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-muted);
	margin: 0;
}
.bb-steps li b {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bb-line-2);
	color: var(--bb-muted);
	font-size: 14px;
	flex: none;
}
.bb-app .bb-steps li:first-child {
	border-color: var(--bb-primary);
	color: var(--bb-primary-d);
}
.bb-steps li:first-child b {
	background: var(--bb-primary);
	color: #fff;
}
.bb-app .bb-steps.is-done li {
	border-color: var(--bb-ok);
	color: var(--bb-ok);
}
.bb-steps.is-done li b {
	background: var(--bb-ok);
	color: #fff;
}
.bb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.bb-app .bb-fs {
	border: 1px solid var(--bb-line-2);
	border-radius: var(--bb-radius);
	background: var(--bb-card);
	box-shadow: var(--bb-shadow);
	padding: 0 24px 22px;
	margin: 0 0 16px;
	min-width: 0;
}
.bb-app .bb-fs legend {
	display: flex;
	align-items: center;
	gap: 12px;
	float: left;
	width: 100%;
	padding: 20px 0 16px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--bb-line-2);
}
.bb-fs legend + * {
	clear: both;
}
.bb-fs-no {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-family: var(--bb-serif);
	font-weight: 700;
	color: var(--bb-primary-d);
	background: linear-gradient(135deg, #f8e9c0, var(--bb-accent));
	flex: none;
}
.bb-fs-t {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.bb-fs-t b {
	font-family: var(--bb-serif);
	font-size: 17px;
	color: var(--bb-ink);
}
.bb-fs-t small {
	font-size: 13px;
	color: var(--bb-muted);
	font-weight: 400;
}
.bb-fgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}
.bb-f {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.bb-f-wide {
	grid-column: 1 / -1;
}
.bb-app .bb-f > label {
	font-size: 14px;
	font-weight: 600;
	color: #2c3a35;
	margin: 0;
}
.bb-f label em {
	color: var(--bb-danger);
	font-style: normal;
}
.bb-app .bb-f input[type='text'],
.bb-app .bb-f input[type='tel'],
.bb-app .bb-f input[type='email'],
.bb-app .bb-f textarea,
.bb-app .bb-nf-box textarea {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fdfcf9;
	transition: border-color .2s, box-shadow .2s, background .2s;
	outline: none;
}
.bb-app .bb-f textarea,
.bb-app .bb-nf-box textarea {
	resize: vertical;
	min-height: 80px;
}
.bb-app .bb-f input:focus,
.bb-app .bb-f textarea:focus,
.bb-app .bb-nf-box textarea:focus {
	border-color: var(--bb-primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--bb-primary-l);
}
.bb-app .bb-f input::placeholder,
.bb-app .bb-f textarea::placeholder {
	color: #a3aca8;
}
.bb-f.has-err input,
.bb-f.has-err textarea,
.bb-f.has-err .bbc-input {
	border-color: var(--bb-danger) !important;
	background: #fff7f6 !important;
}
.bb-err {
	font-size: 13px;
	color: var(--bb-danger);
	font-weight: 500;
}
.bb-err:empty {
	display: none;
}
.bb-seg {
	display: inline-flex;
	padding: 4px;
	background: var(--bb-paper);
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	gap: 4px;
	align-self: flex-start;
}
.bb-app .bb-seg label {
	margin: 0;
	cursor: pointer;
}
.bb-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bb-seg span {
	display: block;
	padding: 7px 18px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--bb-muted);
	transition: all .2s;
}
.bb-seg input:checked + span {
	background: #fff;
	color: var(--bb-primary-d);
	box-shadow: 0 2px 6px rgba(23, 36, 31, .12);
}
.bb-seg input:focus-visible + span {
	outline: 2.5px solid var(--bb-accent);
}
.bb-app .bb-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	cursor: pointer;
	margin: 4px 0 0;
	color: #3d4a45;
}
.bb-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--bb-primary);
	margin-top: 3px !important;
	flex: none;
}
.bb-nf-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.bb-app .bb-nf-box label {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
.bb-par-preview {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--bb-primary-l);
	border-radius: 14px;
	border: 1px solid rgba(14, 90, 72, .12);
	animation: bb-fade .25s ease;
}
.bb-par-preview > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.4;
}
.bb-par-preview small {
	color: #3d4a45;
	font-size: 13px;
}
.bb-par-line {
	color: var(--bb-primary) !important;
}
.bb-drop {
	display: flex !important;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 2px dashed var(--bb-line);
	border-radius: 16px;
	cursor: pointer;
	background: #fdfcf9;
	transition: border-color .2s, background .2s;
	position: relative;
	margin: 0;
}
.bb-drop:hover {
	border-color: var(--bb-primary);
	background: var(--bb-primary-l);
}
.bb-drop input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.bb-drop-prev {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	color: var(--bb-primary);
	border: 1px solid var(--bb-line);
	overflow: hidden;
	flex: none;
}
.bb-drop-prev svg {
	width: 28px;
	height: 28px;
}
.bb-drop-prev img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bb-drop-t {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}
.bb-drop-t small {
	color: var(--bb-muted);
	font-size: 13px;
	font-weight: 400;
}
.bb-app .bb-drop-x {
	margin-left: auto;
	color: var(--bb-danger);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 8px;
}
.bb-app .bb-drop-x:hover {
	background: #fde8e6;
}
.bb-form-msg {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 500;
	margin-bottom: 14px;
}
.bb-form-msg.is-error {
	background: #fdeceb;
	color: var(--bb-danger);
	border: 1px solid #f7cdc9;
}
.bb-form-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 6px;
}
.bb-success {
	text-align: center;
	padding: 50px 24px;
	background: var(--bb-card);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	border: 1px solid var(--bb-line-2);
	animation: bb-fade .4s ease;
}
.bb-success-ic svg {
	width: 92px;
	height: 92px;
	stroke: var(--bb-ok);
	stroke-width: 3;
}
.bb-success-ic circle {
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	animation: bb-draw .6s ease forwards;
	fill: #ecfdf3;
}
.bb-success-ic path {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: bb-draw .4s .5s ease forwards;
}
@keyframes bb-draw {
	to { stroke-dashoffset: 0; }
}
.bb-success h3 {
	font-size: 26px;
	color: var(--bb-ok);
	margin: 14px 0 8px;
}
.bb-success p {
	color: #3d4a45;
	max-width: 520px;
	margin: 0 auto;
}
.bb-success-a {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* কনফার্মেশন */
.bb-confirm-panel {
	max-width: 640px;
}
.bb-confirm-h {
	display: flex;
	gap: 16px;
	padding: 26px 28px 18px;
	border-bottom: 1px solid var(--bb-line);
	background: linear-gradient(135deg, #fff8e6, var(--bb-paper));
}
.bb-confirm-ic {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 14px;
	display: grid;
	place-items: center;
	color: #fff;
	background: linear-gradient(135deg, #e0b552, var(--bb-accent));
}
.bb-confirm-ic svg {
	width: 26px;
	height: 26px;
	stroke-width: 2.2;
}
.bb-modal .bb-confirm-h h3 {
	font-size: 21px;
	color: var(--bb-primary-d);
}
.bb-confirm-h p {
	color: var(--bb-muted);
	font-size: 14.5px;
}
.bb-confirm-b {
	padding: 18px 28px 6px;
}
.bb-confirm-photo {
	float: right;
	margin: 0 0 10px 14px;
}
.bb-confirm-photo img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--bb-accent);
}
.bb-modal .bb-confirm-t {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14.5px;
	margin: 0 0 14px;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	overflow: hidden;
}
.bb-modal .bb-confirm-t th,
.bb-modal .bb-confirm-t td {
	padding: 9px 14px;
	border: 0;
	border-bottom: 1px solid var(--bb-line-2);
	text-align: left;
	vertical-align: top;
	background: none;
}
.bb-modal .bb-confirm-t tr:last-child th,
.bb-modal .bb-confirm-t tr:last-child td {
	border-bottom: 0;
	background: #fcfbf7;
}
.bb-modal .bb-confirm-t th {
	width: 38%;
	color: var(--bb-muted);
	font-weight: 500;
}
.bb-modal .bb-confirm-t td {
	font-weight: 600;
	word-break: break-word;
}
.bb-confirm-ok {
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	margin-bottom: 12px !important;
	display: flex;
	gap: 9px;
	align-items: flex-start;
	cursor: pointer;
	font-size: 14.5px;
}
.bb-confirm-ok input {
	width: 18px;
	height: 18px;
	accent-color: var(--bb-primary);
	margin-top: 3px;
	flex: none;
}

/* ---------- ছোট পর্দা ---------- */
@container bbapp (max-width: 900px) {
	.bb-hero-art {
		width: 170px;
		right: 10px;
		opacity: .5;
	}
	.bb-tabs {
		flex-wrap: wrap;
	}
	.bb-tabs-search {
		width: 100%;
		order: 10;
		margin: 4px 0 0;
	}
	.bb-tr {
		grid-template-columns: 1fr 1fr;
		gap: 4px 14px;
		padding: 12px 16px;
	}
	.bb-th {
		display: none;
	}
	.bb-td-no {
		display: none;
	}
	.bb-td-name {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}
	.bb-tr > span[data-l]::before {
		content: attr(data-l) ': ';
		color: var(--bb-muted);
		font-size: 12px;
	}
}
@container bbapp (max-width: 640px) {
	.bb-hero,
	.bb-tabs,
	.bb-pane {
		font-size: 15px;
	}
	.bb-hero {
		padding: 36px 22px 32px;
	}
	.bb-hero::after {
		inset: 7px;
	}
	.bb-hstat {
		min-width: 0;
		flex: 1 1 40%;
		padding: 8px 12px 6px;
	}
	.bb-hstat b {
		font-size: 22px;
	}
	.bb-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 10px 12px;
		gap: 6px;
	}
	.bb-app .bb-tab {
		padding: 9px 10px;
		font-size: 14px;
		justify-content: center;
	}
	.bb-tabs-search {
		grid-column: 1 / -1;
	}
	.bb-pane {
		padding: 16px 12px;
	}
	.bb-pane[data-pane='tree'] {
		padding: 10px;
	}
	.bb-canvas {
		height: 64vh;
		min-height: 360px;
	}
	.bb-tree-find {
		max-width: none;
		flex-basis: 100%;
	}
	.bb-tbtns {
		margin-left: 0;
		flex-wrap: wrap;
	}
	.bb-filter-search {
		min-width: 0;
		width: 100%;
	}
	.bb-fam-grid {
		grid-template-columns: 1fr;
	}
	.bb-fgrid {
		grid-template-columns: 1fr;
	}
	.bb-app .bb-fs {
		padding: 0 16px 18px;
	}
	.bb-app .bb-steps li {
		flex-direction: column;
		text-align: center;
		font-size: 12.5px;
		padding: 8px 6px;
		gap: 4px;
	}
	.bb-form-intro {
		flex-direction: column;
		padding: 18px;
	}
	.bb-tr {
		grid-template-columns: 1fr;
	}
}


@media (max-width: 640px) {
	.bb-modal {
		padding: 0;
		align-items: flex-end;
	}
	.bb-modal-panel {
		max-height: 92vh;
		border-radius: 22px 22px 0 0;
	}
	.bb-mh {
		flex-direction: column;
		text-align: center;
		padding: 30px 20px 22px;
	}
	.bb-mh-tags {
		justify-content: center;
	}
	.bb-modal .bb-mh-t h3 {
		padding-right: 0;
	}
	.bb-mb {
		padding: 4px 18px 10px;
	}
	.bb-infos {
		grid-template-columns: 1fr;
	}
	.bb-mf {
		padding: 12px 18px 16px;
	}
	.bb-mf .bb-btn {
		flex: 1 1 auto;
	}
	.bb-confirm-h,
	.bb-confirm-b {
		padding-left: 18px;
		padding-right: 18px;
	}
	.bb-confirm-photo {
		float: none;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-app *,
	.bb-modal * {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- প্রিন্ট ---------- */
@media print {
	body.bb-printing * {
		visibility: hidden;
	}
	body.bb-printing .bb-print-target .bb-pane[data-pane='list'],
	body.bb-printing .bb-print-target .bb-pane[data-pane='list'] * {
		visibility: visible;
	}
	body.bb-printing .bb-print-target .bb-pane[data-pane='list'] {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
	.bb-list-tools,
	.bb-gen-caret {
		display: none !important;
	}
	.bb-gen,
	.bb-tr {
		break-inside: avoid;
		box-shadow: none !important;
	}
}

/* ==========================================================================
   v1.1 — পূর্ণ পাতা, স্বয়ংক্রিয় বংশধারা, হোয়াটসঅ্যাপ, মোবাইল
   ========================================================================== */
.bb-app {
	display: flex;
	flex-direction: column;
}
.bb-app > * {
	min-width: 0;
}

/* পূর্ণ পাতা মোড */
body.bb-fullpage-body {
	margin: 0;
	padding: 0;
	background: #fbf8f1;
	min-height: 100vh;
}
.bb-fullpage {
	display: block;
	margin: 0;
	padding: 0;
	max-width: none;
}
.bb-app.bb-full {
	width: 100%;
	max-width: none;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	min-height: 100vh;
	min-height: 100dvh;
}
.bb-full .bb-hero {
	padding-top: 46px;
}
.bb-full .bb-hero::after {
	border-radius: 18px;
}
.bb-full .bb-tabs {
	top: var(--wp-admin--admin-bar--height, 0px);
}
.bb-full .bb-panes {
	flex: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}
.bb-home {
	position: static;
	display: table;
	margin: 0 0 14px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .78) !important;
	text-decoration: none !important;
	padding: 5px 12px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-home:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, .16);
}
.bb-msearch {
	display: none;
}

/* ভাসমান জুম */
.bb-zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	box-shadow: 0 8px 22px -8px rgba(23, 36, 31, .3);
	backdrop-filter: blur(6px);
}
.bb-app .bb-zoom .bb-tbtn {
	width: 40px;
	height: 38px;
}
.bb-zoom .bb-zoomval {
	min-width: 0;
	font-size: 11px;
	padding: 1px 0;
}

/* অসম্পূর্ণ তথ্য */
.bb-node.is-stub .bb-card {
	fill: #fffdf6;
	stroke: #c9a443;
	stroke-opacity: 1;
	stroke-dasharray: 5 4;
}
.bb-node.is-stub .bb-sb {
	fill: #9a7516;
	font-style: italic;
}
.bb-stub-tag {
	display: inline-block;
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: #7a5a00;
	background: #fff4cf;
	border: 1px dashed #d9b44a;
	padding: 0 8px;
	border-radius: 99px;
	vertical-align: 1px;
}
.bb-tag.is-stub {
	background: rgba(255, 220, 120, .3);
	border-style: dashed;
}
.bb-stub-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 18px;
	padding: 12px 14px;
	background: #fffaf0;
	border: 1px dashed #e0c070;
	border-radius: 14px;
	font-size: 14px;
	color: #6b5310;
}
.bb-stub-note svg {
	color: #c99a3e;
	margin-top: 2px;
}
.bb-code {
	font-variant-numeric: tabular-nums;
	color: var(--gcd, var(--bb-primary));
	font-weight: 600;
}

/* ফর্ম — বংশধারা মেলানো */
.bb-help {
	font-size: 12.5px;
	color: var(--bb-muted);
	line-height: 1.45;
}
.bb-f-wa input {
	padding-left: 44px !important;
	background: #fdfcf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2325D366' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2z'/%3E%3Cpath fill='%23fff' d='M16.7 14.4c-.3-.1-1.6-.8-1.8-.9-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2c0 1.3.9 2.5 1 2.7.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.6-.6 1.8-1.3.2-.6.2-1.1.2-1.3-.1 0-.3-.1-.6-.2z'/%3E%3C/svg%3E") no-repeat 14px center / 20px 20px !important;
}
.bb-match {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 16px;
	border: 1.5px solid var(--bb-line);
	background: #fdfcf9;
	animation: bb-fade .25s ease;
}
.bb-match.is-idle {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	color: var(--bb-muted);
	border-style: dashed;
}
.bb-match.is-idle svg {
	width: 26px;
	height: 26px;
	color: var(--bb-accent);
	flex: none;
}
.bb-match.is-idle b {
	display: block;
	color: var(--bb-ink);
	font-size: 14.5px;
}
.bb-match small {
	display: block;
	font-size: 13px;
	line-height: 1.5;
}
.bb-match.is-ok {
	border-color: rgba(21, 128, 61, .35);
	background: linear-gradient(180deg, #f0faf3, #fdfcf9);
}
.bb-match.is-multi {
	border-color: #e7c773;
	background: #fffaf0;
}
.bb-match.is-none {
	border-color: #f0c9a4;
	background: #fff7f0;
}
.bb-match-h {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.bb-match-h > svg {
	width: 24px;
	height: 24px;
	flex: none;
	margin-top: 1px;
}
.bb-match.is-ok .bb-match-h > svg {
	color: var(--bb-ok);
	stroke-width: 2.6;
}
.bb-match.is-multi .bb-match-h > svg {
	color: #b07a1a;
}
.bb-match.is-none .bb-match-h > svg {
	color: #c2410c;
}
.bb-match-h b {
	font-size: 15px;
	color: var(--bb-ink);
}
.bb-match-h small {
	color: #44524c;
}
.bb-app .bb-lineage {
	list-style: none;
	margin: 0;
	padding: 0 0 0 6px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bb-app .bb-lineage li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 0;
}
.bb-lineage li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 13px;
	top: 32px;
	bottom: -6px;
	width: 2px;
	background: var(--gc);
	opacity: .4;
}
.bb-lineage li > i {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	background: var(--gc);
	position: relative;
	z-index: 1;
}
.bb-lineage li > span {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.bb-lineage b {
	font-size: 14.5px;
	font-weight: 600;
}
.bb-lineage small {
	font-size: 12px !important;
	color: var(--bb-muted);
}
.bb-lineage .is-up {
	opacity: .65;
}
.bb-lineage .is-found small {
	color: var(--bb-ok);
}
.bb-lineage .is-stub > i {
	background: #fff;
	color: #9a7516;
	border: 2px dashed #c9a443;
}
.bb-lineage .is-stub small {
	color: #9a7516;
}
.bb-lineage .is-new > i {
	background: linear-gradient(135deg, #f6e4b0, var(--bb-accent));
	color: var(--bb-primary-d);
	box-shadow: 0 0 0 3px #fff3cf;
}
.bb-lineage .is-new b {
	color: var(--bb-primary-d);
}
.bb-lineage .is-new small {
	color: var(--bb-primary);
	font-weight: 600;
}
.bb-cands {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bb-app .bb-cand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #fff;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	text-align: left;
	width: 100%;
	transition: border-color .15s, background .15s;
}
.bb-app .bb-cand:hover {
	border-color: var(--bb-primary);
	background: var(--bb-primary-l);
}
.bb-cand > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}
.bb-cand b {
	font-size: 14.5px;
}
.bb-cand small {
	font-size: 12.5px !important;
	color: var(--bb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-app .bb-match .bb-link-btn,
.bb-app .bb-pick-toggle {
	align-self: flex-start;
	padding-left: 0;
}
.bb-pick {
	margin-top: 4px;
}
.bb-match-wrap {
	gap: 8px;
}

/* কনফার্মেশন ফুটার */
.bb-confirm-f {
	align-items: center;
}
.bb-confirm-f .bb-confirm-ok {
	flex: 1 1 100%;
	margin: 0 !important;
}

/* বটম-শিট হাতল */
@media (max-width: 640px) {
	.bb-modal-panel::before {
		content: '';
		position: sticky;
		top: 0;
		display: block;
		width: 44px;
		height: 5px;
		border-radius: 99px;
		background: rgba(255, 255, 255, .55);
		margin: 8px auto -13px;
		z-index: 4;
	}
	.bb-confirm-panel::before {
		background: #d8d2c4;
	}
	.bb-modal .bb-modal-x {
		top: 16px;
		right: 12px;
		width: 38px;
		height: 38px;
	}
	.bb-mh-av {
		width: 88px;
		height: 88px;
	}
	.bb-confirm-h {
		padding-top: 24px;
	}
	.bb-confirm-h h3 {
		font-size: 19px !important;
	}
	.bb-modal .bb-confirm-t th {
		width: 42%;
		font-size: 13.5px;
	}
	.bb-mf {
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
	}
	.bb-modal input,
	.bb-modal .bbc-input {
		font-size: 16px !important;
	}
}

/* ---------- মোবাইল (অ্যাপের মতো) ---------- */
@container bbapp (max-width: 640px) {
	/* হিরো সংক্ষিপ্ত */
	.bb-hero {
		padding: 26px 18px 20px;
	}
	.bb-full .bb-hero {
		padding-top: 48px;
	}
	.bb-hero-art {
		display: none;
	}
	.bb-hero-kicker {
		font-size: 12px;
		padding: 3px 11px 2px;
	}
	.bb-app .bb-hero-title {
		font-size: 27px;
		margin: 12px 0 4px;
	}
	.bb-hero-sub {
		font-size: 14.5px;
		line-height: 1.5;
	}
	.bb-hero-stats {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		margin-top: 18px;
	}
	.bb-hstat {
		padding: 7px 4px 5px;
		text-align: center;
		border-radius: 12px;
	}
	.bb-hstat b {
		font-size: 19px;
	}
	.bb-hstat span {
		font-size: 11px;
		display: block;
		line-height: 1.3;
	}
	.bb-home {
		top: 14px;
		right: 14px;
		left: 14px;
		right: auto;
		font-size: 12.5px;
	}

	/* খোঁজ */
	.bb-msearch {
		display: block;
		padding: 12px 12px 0;
	}
	.bb-tabs-search {
		display: none;
	}

	/* নিচে স্থির ট্যাব-বার */
	.bb-tabs {
		order: 50;
		position: sticky;
		top: auto;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2px;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--bb-line);
		border-bottom: 0;
		box-shadow: 0 -8px 24px -12px rgba(23, 36, 31, .25);
		z-index: 30;
	}
	.bb-app .bb-tab {
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		padding: 7px 2px 6px;
		font-size: 12px;
		font-weight: 600;
		border-radius: 12px;
		white-space: normal;
		text-align: center;
		line-height: 1.2;
		min-height: 54px;
	}
	.bb-app .bb-tab svg {
		width: 22px;
		height: 22px;
	}
	.bb-app .bb-tab.is-active {
		background: var(--bb-primary-l);
		color: var(--bb-primary-d);
		box-shadow: none;
	}
	.bb-app .bb-tab-cta {
		background: linear-gradient(135deg, #f6e4b0, var(--bb-accent));
		color: var(--bb-primary-d);
		box-shadow: none;
	}
	.bb-app .bb-tab-cta.is-active {
		background: var(--bb-primary);
		color: #fff;
	}
	.bb-panes {
		flex: 1;
	}

	/* বৃক্ষ */
	.bb-pane[data-pane='tree'] {
		padding: 10px 10px 12px;
	}
	.bb-tree-bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px;
		padding: 10px;
	}
	.bb-tree-find {
		grid-column: 1 / -1;
		max-width: none;
	}
	.bb-depth span {
		display: none;
	}
	.bb-app .bb-depth select {
		width: 100%;
		height: 42px;
		font-size: 15px;
	}
	.bb-depth {
		min-width: 0;
	}
	.bb-tbtns {
		margin-left: 0;
		flex-wrap: nowrap;
	}
	.bb-app .bb-tbtns .bb-tbtn {
		width: 40px;
		height: 36px;
	}
	.bb-canvas {
		height: calc(100vh - 250px);
		height: calc(100dvh - 250px);
		min-height: 380px;
	}
	.bb-legend {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.bb-legend::-webkit-scrollbar {
		display: none;
	}
	.bb-app .bb-leg {
		flex: none;
	}
	.bb-hint {
		white-space: normal;
		width: calc(100% - 90px);
		left: 12px;
		transform: translateY(6px);
		text-align: center;
	}
	.bb-canvas.show-hint .bb-hint {
		transform: none;
	}

	/* সেকশন হেড */
	.bb-section-head h3 {
		font-size: 22px;
	}
	.bb-section-head p {
		font-size: 14px;
	}
	.bb-list-tools {
		width: 100%;
		gap: 10px;
	}
	.bb-list-tools .bb-filter-search {
		flex: 1 1 100%;
	}
	.bb-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 -12px 16px;
		padding: 0 12px 4px;
		scrollbar-width: none;
	}
	.bb-chips::-webkit-scrollbar {
		display: none;
	}
	.bb-app .bb-chip {
		flex: none;
	}

	/* পরিবার কার্ড */
	.bb-fam {
		padding: 0 14px 12px;
	}
	.bb-app .bb-kid,
	.bb-app .bb-link-btn {
		min-height: 36px;
	}

	/* তালিকা */
	.bb-app .bb-gen-h {
		padding: 12px 14px;
		gap: 12px;
	}
	.bb-gen-num {
		width: 40px;
		height: 40px;
		font-size: 19px;
	}

	/* ফর্ম */
	.bb-app input,
	.bb-app select,
	.bb-app textarea,
	.bb-app .bbc-input {
		font-size: 16px !important;
	}
	.bb-app .bb-fs legend {
		padding: 16px 0 12px;
		margin-bottom: 12px;
	}
	.bb-fs-t b {
		font-size: 16px;
	}
	.bb-seg {
		align-self: stretch;
	}
	.bb-seg label {
		flex: 1;
	}
	.bb-seg span {
		text-align: center;
		padding: 9px 8px;
	}
	.bb-form-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.bb-form-actions .bb-btn {
		width: 100%;
	}
	.bb-drop {
		gap: 12px;
		padding: 12px;
	}
	.bb-drop-prev {
		width: 56px;
		height: 56px;
	}
	.bbc-list {
		max-height: 50vh;
		min-width: 0;
	}
}
@container bbapp (max-width: 900px) {
	.bb-td-no {
		display: block !important;
		grid-column: 1 / -1;
		font-size: 12px;
		order: -1;
	}
	.bb-td-no::before {
		content: 'ক্রমিক ';
		color: var(--bb-muted);
	}
}
@container bbapp (max-width: 640px) {
	.bb-view-tree .bb-msearch,
	.bb-view-add .bb-msearch {
		display: none;
	}
	.bb-home {
		position: static;
		display: inline-block;
		margin: 0 0 12px;
		max-width: 100%;
	}
	.bb-full .bb-hero {
		padding-top: 22px;
	}
	.bb-hero-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.bb-hero-stats {
		width: 100%;
	}
}

/* ==========================================================================
   v1.2 — স্বয়ংক্রিয় বংশধারা নির্মাতা
   ========================================================================== */
.bb-g0 { --gc: #9aa39f; --gcl: #eef0ee; --gcd: #5f6a65; }
.bb-app .bb-btn-sm {
	padding: 8px 14px;
	font-size: 14px;
	align-self: flex-start;
}
.bb-upd-banner {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 16px;
	margin-bottom: 16px;
	border-radius: 14px;
	background: #f4f7ff;
	border: 1px solid #cdd8fb;
	color: #24357a;
	font-size: 14.5px;
}
.bb-upd-banner svg {
	color: #3b5bdb;
	margin-top: 2px;
}
.bb-sug-wrap {
	position: relative;
}
.bb-sug {
	position: absolute;
	z-index: 60;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	box-shadow: 0 20px 40px -12px rgba(23, 36, 31, .28);
	padding: 6px;
	max-height: 320px;
	overflow: auto;
}
.bb-sug-h {
	font-size: 12px;
	color: var(--bb-muted);
	padding: 4px 8px 6px;
}
.bb-app .bb-sug-o {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	text-align: left;
}
.bb-app .bb-sug-o:hover,
.bb-app .bb-sug-o:focus {
	background: var(--bb-primary-l);
}
.bb-sug-o > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.bb-sug-o b {
	font-weight: 600;
	font-size: 14.5px;
}
.bb-sug-o small {
	font-size: 12.5px;
	color: var(--bb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-lvl-st:empty,
.bb-lvl-chips:empty {
	display: none;
}
.bb-lvl-st span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.bb-lvl-st svg {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}
.bb-lvl-st .is-found {
	color: var(--bb-ok);
}
.bb-lvl-st .is-new {
	color: #9a7516;
}
.bb-lvl-st .is-multi {
	color: #b45309;
}
.bb-lvl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	background: #f6faf8;
	border: 1px dashed #b9dccb;
	border-radius: 12px;
}
.bb-chips-h {
	flex-basis: 100%;
	font-size: 12.5px;
	color: #2f5e4e;
	font-weight: 600;
}
.bb-app .bb-pchip {
	padding: 6px 12px;
	border-radius: 99px;
	background: #fff;
	border: 1.5px solid #cfe5da;
	font-size: 14px;
	font-weight: 500;
	min-height: 34px;
	transition: border-color .15s, background .15s;
}
.bb-app .bb-pchip:hover {
	border-color: var(--bb-primary);
	background: var(--bb-primary-l);
}
.bb-app .bb-pchip.is-stub {
	border-style: dashed;
	border-color: #d9b44a;
}
.bb-anc-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bb-anc {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 14px;
}
.bb-anc:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 16px;
	top: 36px;
	bottom: 0;
	width: 2px;
	background: linear-gradient(var(--bb-line), var(--bb-line));
}
.bb-anc-i {
	width: 34px;
	height: 34px;
	margin-top: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 14px;
	color: var(--bb-primary-d);
	background: linear-gradient(135deg, #f8e9c0, var(--bb-accent));
	position: relative;
	z-index: 1;
}
.bb-anc-b {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.bb-app .bb-anc-b > label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600;
	color: #2c3a35;
	margin: 0;
}
.bb-app .bb-anc-rm {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 18px;
	color: var(--bb-muted);
	display: grid;
	place-items: center;
}
.bb-app .bb-anc-rm:hover {
	background: #fde8e6;
	color: var(--bb-danger);
}
.bb-app .bb-chainf input[type='text'] {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fdfcf9;
	outline: none;
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.bb-app .bb-chainf input[type='text']:focus {
	border-color: var(--bb-primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--bb-primary-l);
}
.bb-app .bb-chainf input.is-auto {
	background: #f2f9f5;
	border-color: #bfe0cf;
	color: #1f5a46;
}
.bb-kid-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bb-kid-list:empty {
	display: none;
}
.bb-kid-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) 96px 36px;
	gap: 8px;
	align-items: center;
	animation: bb-fade .2s ease;
}
.bb-kid-no {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--bb-primary-l);
	color: var(--bb-primary);
	font-weight: 700;
	font-size: 13px;
}
.bb-app .bb-kid-in,
.bb-app .bb-kid-g {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fdfcf9;
	outline: none;
}
.bb-app .bb-kid-in:focus,
.bb-app .bb-kid-g:focus {
	border-color: var(--bb-primary);
	box-shadow: 0 0 0 4px var(--bb-primary-l);
}
.bb-app .bb-kid-rm {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	color: var(--bb-muted);
	display: grid;
	place-items: center;
}
.bb-app .bb-kid-rm:hover {
	background: #fde8e6;
	color: var(--bb-danger);
}
.bb-more-info {
	margin: 0 0 16px;
}
.bb-more-info > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 16px 20px;
	background: var(--bb-card);
	border: 1px solid var(--bb-line-2);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow);
	user-select: none;
}
.bb-more-info > summary::-webkit-details-marker {
	display: none;
}
.bb-more-info > summary::after {
	content: '';
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--bb-muted);
	border-bottom: 2px solid var(--bb-muted);
	transform: rotate(45deg);
	transition: transform .2s;
}
.bb-more-info[open] > summary::after {
	transform: rotate(-135deg);
}
.bb-more-info > summary > svg {
	width: 26px;
	height: 26px;
	color: var(--bb-accent);
}
.bb-more-info > summary span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.bb-more-info > summary b {
	font-family: var(--bb-serif);
	font-size: 16px;
}
.bb-more-info > summary small {
	color: var(--bb-muted);
	font-size: 13px;
}
.bb-more-info[open] > summary {
	border-radius: var(--bb-radius) var(--bb-radius) 0 0;
	border-bottom-color: transparent;
	box-shadow: none;
}
.bb-app .bb-more-info .bb-fs {
	border-radius: 0 0 var(--bb-radius) var(--bb-radius);
	border-top: 0;
}
.bb-lineage .is-gap > i {
	background: none;
	color: var(--bb-muted);
	border: 0;
}
.bb-lineage .is-gap small {
	font-style: italic;
}
.bb-lineage .is-kid {
	margin-left: 18px;
}
.bb-modal .bb-confirm-sub {
	font-family: var(--bb-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-muted);
	margin: 4px 0 8px;
}
.bb-modal .bb-lineage-c {
	list-style: none;
	margin: 0 0 16px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--bb-line);
	border-radius: 14px;
}
.bb-modal .bb-lineage-c li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	margin: 0;
	position: relative;
}
.bb-modal .bb-lineage-c li > i {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: var(--gc);
}
.bb-modal .bb-lineage-c .is-stub > i {
	background: #fff;
	color: #9a7516;
	border: 2px dashed #c9a443;
}
.bb-modal .bb-lineage-c .is-new > i {
	background: linear-gradient(135deg, #f6e4b0, var(--bb-accent));
	color: var(--bb-primary-d);
}
.bb-modal .bb-lineage-c .is-gap > i {
	background: none;
	color: var(--bb-muted);
}
.bb-modal .bb-lineage-c span {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}
.bb-modal .bb-lineage-c b {
	font-size: 14.5px;
}
.bb-modal .bb-lineage-c small {
	font-size: 12px;
	color: var(--bb-muted);
}
.bb-modal .bb-lineage-c .is-found small {
	color: var(--bb-ok);
}
.bb-modal .bb-lineage-c .is-stub small {
	color: #9a7516;
}
.bb-modal .bb-lineage-c .is-kid {
	margin-left: 18px;
}
@container bbapp (max-width: 640px) {
	.bb-kid-row {
		grid-template-columns: 26px minmax(0, 1fr) 84px 32px;
		gap: 6px;
	}
	.bb-anc {
		grid-template-columns: 28px minmax(0, 1fr);
		gap: 10px;
	}
	.bb-anc-i {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
	.bb-anc:not(:last-child)::after {
		left: 13px;
	}
	.bb-more-info > summary {
		padding: 14px 16px;
	}
	.bb-sug {
		max-height: 45vh;
	}
}

/* ==========================================================================
   v1.3 — সংক্ষিপ্ত ফর্ম
   ========================================================================== */
.bb-blood {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bb-app .bb-blood label {
	margin: 0;
	cursor: pointer;
}
.bb-blood input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.bb-blood span {
	display: inline-grid;
	place-items: center;
	min-width: 52px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1.5px solid var(--bb-line);
	background: #fdfcf9;
	font-weight: 700;
	font-size: 15px;
	color: #7a1f2b;
	font-family: system-ui, sans-serif;
	transition: all .15s;
}
.bb-blood label:last-child span {
	font-family: var(--bb-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--bb-muted);
}
.bb-blood input:checked + span {
	background: #b42335;
	border-color: #b42335;
	color: #fff;
	box-shadow: 0 6px 14px -6px #b42335;
}
.bb-blood label:last-child input:checked + span {
	background: #eef0ee;
	border-color: #9aa39f;
	color: #3d4a45;
	box-shadow: none;
}
.bb-blood input:focus-visible + span {
	outline: 2.5px solid var(--bb-accent);
	outline-offset: 2px;
}
.bb-app .bb-gtog {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bb-male);
	background: var(--bb-male-bg);
	border: 1px solid rgba(31, 85, 150, .18);
	vertical-align: 1px;
	min-height: 26px;
}
.bb-app .bb-gtog.is-f {
	color: var(--bb-female);
	background: var(--bb-female-bg);
	border-color: rgba(163, 36, 90, .2);
}
.bb-kid-row .bb-gtog {
	margin: 0;
	justify-content: center;
	min-height: 40px;
	min-width: 64px;
}
.bb-kid-row {
	grid-template-columns: 28px minmax(0, 1fr) auto 36px;
}
.bb-pair {
	display: grid !important;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 6px 14px;
}
.bb-pair > .bb-lvl-st,
.bb-pair > .bb-lvl-chips,
.bb-pair > .bb-err {
	grid-column: 1 / -1;
}
.bb-pair-a,
.bb-pair-b {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.bb-app .bb-pair label {
	font-size: 14px;
	font-weight: 600;
	color: #2c3a35;
	margin: 0;
}
.bb-pair label em {
	color: var(--bb-danger);
	font-style: normal;
}
.bb-app .bb-pair .bb-spouse-in {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--bb-line);
	border-radius: 12px;
	background: #fdfcf9;
	outline: none;
}
.bb-app .bb-pair .bb-spouse-in:focus {
	border-color: var(--bb-primary);
	background: #fff;
	box-shadow: 0 0 0 4px var(--bb-primary-l);
}
.bb-app .bb-pair .bb-spouse-in.is-auto {
	background: #f2f9f5;
	border-color: #bfe0cf;
	color: #1f5a46;
}
.bb-anc-b.has-err input[data-level] {
	border-color: var(--bb-danger) !important;
	background: #fff7f6 !important;
}
.bb-anc-i {
	margin-top: 28px;
}
.bb-lineage .is-broken > i {
	color: #c2410c;
	font-weight: 800;
}
.bb-lineage .is-broken small {
	color: #c2410c;
	font-style: normal;
}
.bb-extra-cta .bb-link-btn {
	padding-left: 0;
}
@container bbapp (max-width: 640px) {
	.bb-pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.bb-blood {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}
	.bb-blood span {
		min-width: 0;
		width: 100%;
		padding: 0 4px;
	}
	.bb-blood label:last-child {
		grid-column: 1 / -1;
	}
	.bb-kid-row {
		grid-template-columns: 26px minmax(0, 1fr) auto 32px;
		gap: 6px;
	}
}

/* v1.4 — অসংযুক্ত শাখা */
.bb-node.is-ulroot .bb-card {
	fill: #fff8f3;
	stroke: #d97736;
	stroke-opacity: 1;
	stroke-width: 1.6;
	stroke-dasharray: 6 4;
}
.bb-node.is-ulroot .bb-sb {
	fill: #c2410c;
	font-weight: 600;
}
.bb-ul-tag {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	color: #9a3412;
	background: #ffedd5;
	border: 1px dashed #f0a46b;
	padding: 0 8px;
	border-radius: 99px;
}
.bb-tag.is-ul {
	background: rgba(255, 180, 120, .3);
	border-style: dashed;
}
.bb-ul-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	background: #fff7ed;
	border: 1px dashed #f0a46b;
	border-radius: 14px;
	color: #7c2d12;
}
.bb-ul-note > svg {
	width: 24px;
	height: 24px;
	color: #c2410c;
	flex: none;
	margin-top: 2px;
}
.bb-ul-note > div {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.bb-ul-note span {
	font-size: 14px;
	line-height: 1.55;
}
.bb-ul-mini {
	background: #fff7ed;
	border-color: #f0a46b;
	color: #7c2d12;
}
.bb-modal .bb-btn-sm {
	padding: 8px 14px;
	font-size: 14px;
}

/* v1.5 — অসংযুক্ত শাখার ফাঁকা দাগের সংযোগ */
.bb-link.is-virtual {
	stroke: #d97736;
	stroke-opacity: .85;
	stroke-width: 2.2;
	stroke-dasharray: 2 7;
	stroke-linecap: round;
}
.bb-canvas.is-tiny .bb-link.is-virtual {
	stroke-width: 7;
	stroke-dasharray: 4 14;
}

/* ==================================================================
 * v1.7 — পরিবার কার্ড (ক্লিন ডিজাইন)
 * ================================================================== */
.bb-fam-shead p {
	font-size: 13.5px;
}
.bb-fam-grid {
	gap: 12px;
}
.bb-app .bb-fam {
	padding: 14px 14px 10px;
	border-radius: 14px;
	border: 1px solid var(--bb-line);
	box-shadow: 0 1px 2px rgba(23, 36, 31, .04);
	background: var(--bb-card);
	overflow: hidden;
}
.bb-app .bb-fam::before {
	inset: 0 auto 0 0;
	width: 3px;
	height: auto;
	background: var(--gc);
}
.bb-app .bb-fam::after {
	display: none;
}
.bb-app .bb-fam:hover {
	transform: none;
	box-shadow: 0 1px 2px rgba(23, 36, 31, .04), 0 6px 18px -10px rgba(23, 36, 31, .25);
}
.bb-app .bb-fam-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.bb-app .bb-fam-av {
	padding: 0;
	border-radius: 50%;
	flex: none;
}
.bb-av-md {
	width: 44px;
	height: 44px;
	font-size: 17px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gc);
}
.bb-app .bb-fam-who {
	flex: 1;
	min-width: 0;
	padding: 0;
}
.bb-app .bb-fam-name {
	font-size: 16.5px;
	line-height: 1.35;
	margin-right: 6px;
	vertical-align: middle;
}
.bb-fam-who > .bb-dec-tag,
.bb-fam-who > .bb-stub-tag {
	vertical-align: middle;
	font-size: 11px;
}
.bb-app .bb-fam-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 6px;
	font-size: 12.5px;
	color: var(--bb-muted);
	margin-top: 3px;
}
.bb-sep {
	opacity: .5;
}
.bb-fam-gen {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--gcd);
	font-weight: 600;
}
.bb-fam-gen i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gc);
}
.bb-app .bb-fam-sp {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-size: 13px;
	color: #6b3a4b;
	min-width: 0;
}
.bb-fam-sp svg {
	width: 13px;
	height: 13px;
	flex: none;
	color: #d0507b;
	fill: #f6c5d6;
}
.bb-fam-sp span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-app .bb-fam-no {
	flex: none;
	font-family: var(--bb-font);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bb-muted);
	background: var(--bb-paper);
	border: 1px solid var(--bb-line);
	border-radius: 99px;
	padding: 1px 8px;
}
.bb-app .bb-fam-kids-h {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 12px 0 6px;
	padding: 10px 0 0;
	border-top: 1px solid var(--bb-line);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bb-muted);
}
.bb-fam-kids-h b {
	color: var(--bb-ink);
}
.bb-fam-kids-h small {
	margin-left: auto;
	font-size: 12px;
}
.bb-app ul.bb-fam-kids {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 2px 8px;
}
.bb-app ul.bb-fam-kids li {
	margin: 0;
	padding: 0;
	min-width: 0;
}
.bb-app .bb-fk {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 34px;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--bb-ink);
	text-align: left;
}
.bb-app .bb-fk:hover,
.bb-app .bb-fk:focus-visible {
	background: var(--bb-paper);
}
.bb-fk-dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--bb-male);
	opacity: .75;
}
.bb-fk.is-f .bb-fk-dot {
	background: var(--bb-female);
}
.bb-fk.is-dead {
	color: var(--bb-muted);
}
.bb-fk.is-dead .bb-fk-dot {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}
.bb-fk-n {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-fk-fam {
	display: inline-flex;
	color: var(--bb-accent);
	flex: none;
}
.bb-fk-fam svg {
	width: 14px;
	height: 14px;
}
.bb-app .bb-fam-nokids {
	margin: 12px 0 2px;
	padding-top: 10px;
	border-top: 1px solid var(--bb-line);
	font-size: 12.5px;
	font-style: normal;
}
.bb-app .bb-fam-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--bb-line);
}
.bb-app .bb-fam-up,
.bb-app .bb-fam-tree {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 32px;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bb-primary);
	min-width: 0;
}
.bb-app .bb-fam-up {
	margin-left: -8px;
	color: var(--bb-muted);
}
.bb-fam-up-n {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-app .bb-fam-tree {
	flex: none;
	background: var(--bb-primary-l);
}
.bb-fam-tree svg {
	width: 14px;
	height: 14px;
}
.bb-app .bb-fam-up:hover {
	background: var(--bb-paper);
	color: var(--bb-ink);
}
.bb-app .bb-fam .bb-root-tag {
	font-size: 12px;
}
.bb-app .bb-chip small {
	font-size: 11px;
	padding: 0 6px;
	border-radius: 99px;
	background: rgba(0, 0, 0, .06);
}
.bb-app .bb-chip.is-active small {
	background: rgba(255, 255, 255, .22);
}

/* ==================================================================
 * v1.7 — ফ্রন্টএন্ড অ্যাডমিন
 * ================================================================== */
.bb-adminbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 24px 0;
	padding: 8px 8px 8px 12px;
	border-radius: 12px;
	background: #fff8e6;
	border: 1px solid #ecd9a3;
	font-size: 13px;
	color: #6b4f12;
}
.bb-adminbar > svg {
	width: 18px;
	height: 18px;
	flex: none;
}
.bb-adminbar-t {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-app .bb-adminbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 4px 6px 4px 12px;
	border-radius: 9px;
	background: var(--bb-primary);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
}
.bb-app .bb-adminbar-btn.is-active {
	background: var(--bb-primary-d);
	box-shadow: inset 0 0 0 2px var(--bb-accent);
}
.bb-pcount {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 99px;
	background: #e5484d;
	color: #fff;
	font-size: 12px;
	text-align: center;
}
.bb-pcount.is-zero {
	background: rgba(255, 255, 255, .25);
}
.bb-app .bb-adminbar-out {
	font-size: 12.5px;
	color: #6b4f12;
	padding: 6px 4px;
	text-decoration: underline;
}
.bb-login-foot {
	text-align: center;
	padding: 22px 0 8px;
}
.bb-app .bb-login-foot a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--bb-muted);
	text-decoration: none;
	opacity: .8;
}
.bb-login-foot svg {
	width: 14px;
	height: 14px;
}
.bb-app.bb-view-admin .bb-msearch {
	display: none;
}
.bb-adm-list {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	align-items: start;
}
.bb-adm-loading {
	padding: 30px;
	text-align: center;
	color: var(--bb-muted);
}
.bb-adm-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 20px;
	background: var(--bb-card);
	border: 1px dashed var(--bb-line);
	border-radius: 14px;
	color: var(--bb-muted);
}
.bb-adm-empty svg {
	width: 40px;
	height: 40px;
	color: var(--bb-ok);
	stroke-width: 2.4;
}
.bb-adm-empty h4 {
	margin: 8px 0 4px;
	color: var(--bb-ink);
	font-size: 17px;
}
.bb-acard {
	background: var(--bb-card);
	border: 1px solid var(--bb-line);
	border-radius: 14px;
	padding: 14px;
	transition: opacity .25s, transform .25s;
}
.bb-acard.is-busy {
	opacity: .55;
	pointer-events: none;
}
.bb-acard.is-gone {
	opacity: 0;
	transform: scale(.97);
}
.bb-acard > header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: flex-start;
}
.bb-acard h4 {
	margin: 0;
	font-family: var(--bb-serif);
	font-size: 17px;
	line-height: 1.35;
	color: var(--bb-ink);
}
.bb-acard h4[data-open] {
	cursor: pointer;
	text-decoration: underline dotted;
}
.bb-ameta {
	display: block;
	font-size: 12px;
	color: var(--bb-muted);
	margin-top: 2px;
}
.bb-app .bb-awa {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 99px;
	background: #e7f8ee;
	color: #137a3d;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.bb-awa svg {
	width: 13px;
	height: 13px;
}
.bb-achain {
	margin: 10px 0 0;
	padding: 7px 10px;
	border-radius: 9px;
	background: var(--bb-paper);
	font-size: 12.5px;
	color: #3d4a45;
	line-height: 1.6;
}
.bb-achain i {
	font-style: normal;
	color: var(--bb-accent);
}
.bb-app ul.bb-aitems {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	border-top: 1px solid var(--bb-line);
}
.bb-app .bb-aitem {
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--bb-line);
}
.bb-aitem-t {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
}
.bb-aitem-t b {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bb-app .bb-aedit {
	margin-left: auto;
	flex: none;
	width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	border-radius: 8px;
	color: var(--bb-primary);
}
.bb-app .bb-aedit:hover {
	background: var(--bb-primary-l);
}
.bb-aedit svg {
	width: 16px;
	height: 16px;
}
.bb-aitem-s {
	font-size: 12.5px;
	color: var(--bb-muted);
	margin-top: 1px;
}
.bb-atag {
	flex: none;
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 99px;
	background: #eef0ee;
	color: #4b5753;
}
.bb-atag.is-new {
	background: #e3f3e5;
	color: #1f6029;
}
.bb-atag.is-stub {
	background: #fff4cf;
	color: #7a5a00;
}
.bb-atag.is-up {
	background: #e3edfb;
	color: #144591;
}
.bb-adiff {
	margin-top: 6px;
	display: grid;
	gap: 3px;
	font-size: 12.5px;
}
.bb-adiff div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: baseline;
}
.bb-adiff span {
	color: var(--bb-muted);
	min-width: 70px;
}
.bb-adiff s {
	color: #b0473c;
}
.bb-adiff b {
	color: #1f6029;
	font-weight: 600;
}
.bb-acard > footer {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.bb-acard > footer .bb-btn-primary {
	flex: 1;
}
.bb-app .bb-btn-danger,
.bb-modal .bb-btn-danger {
	color: var(--bb-danger);
}
.bb-app .bb-btn-danger svg,
.bb-modal .bb-btn-danger svg {
	width: 16px;
	height: 16px;
}
.bb-modal .bb-btn-admin {
	color: #7a5a00;
	border-color: #ecd9a3;
	background: #fff8e6;
}

/* সম্পাদনা ফর্ম */
.bb-aform-h {
	padding: 20px 56px 12px 20px;
	border-bottom: 1px solid var(--bb-line);
}
.bb-aform-h h3 {
	margin: 6px 0 4px;
	font-family: var(--bb-serif);
	font-size: 20px;
	color: var(--bb-ink);
}
.bb-aform-h p {
	margin: 0;
}
.bb-aform-h .bb-hero-kicker {
	color: #7a5a00;
	background: #fff8e6;
	border-color: #ecd9a3;
}
.bb-aform-b {
	padding: 14px 20px 6px;
	display: grid;
	gap: 12px;
}
.bb-aform.is-busy {
	opacity: .6;
	pointer-events: none;
}
.bb-f2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.bb-aform .bb-f > label {
	font-size: 13.5px;
	font-weight: 600;
	color: #2c3a35;
	margin: 0;
}
.bb-aform .bb-f > label i {
	color: var(--bb-danger);
	font-style: normal;
}
.bb-aform .bb-f input[type='text'],
.bb-aform .bb-f input[type='tel'],
.bb-aform .bb-f select,
.bb-aform .bb-f textarea {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 1.5px solid var(--bb-line);
	border-radius: 11px;
	background: #fdfcf9;
	font: inherit;
	font-size: 16px;
	color: var(--bb-ink);
	outline: none;
	box-sizing: border-box;
}
.bb-aform .bb-f textarea {
	min-height: 72px;
	resize: vertical;
}
.bb-aform .bb-f input:focus,
.bb-aform .bb-f select:focus,
.bb-aform .bb-f textarea:focus {
	border-color: var(--bb-primary);
	background: #fff;
	box-shadow: 0 0 0 3px var(--bb-primary-l);
}
.bb-aform .bb-seg {
	align-self: stretch;
	display: flex;
}
.bb-aform .bb-seg label {
	flex: 1;
	margin: 0;
	cursor: pointer;
	text-align: center;
}
.bb-aform .bb-seg span {
	padding: 7px 8px;
	font-size: 14px;
}
.bb-aform .bb-help {
	font-size: 12px;
	margin: 0;
}
.bb-aerr {
	padding: 9px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: var(--bb-danger);
	font-size: 13.5px;
}
.bb-aform-f {
	position: sticky;
	bottom: 0;
	background: var(--bb-card);
	flex-wrap: wrap;
}
.bb-aform-f .bb-btn-primary {
	flex: 1 1 100%;
}
.bb-aform-f .bb-btn-ghost {
	flex: 1;
}

/* বার্তা */
.bb-toast {
	position: fixed;
	left: 50%;
	bottom: calc(86px + env(safe-area-inset-bottom));
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 12px;
	background: #14231e;
	color: #fff;
	font: 500 14px/1.4 'BB Hind Siliguri', 'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
	transform: translate(-50%, 20px);
	opacity: 0;
	transition: all .25s;
}
.bb-toast.is-on {
	transform: translate(-50%, 0);
	opacity: 1;
}
.bb-toast svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: #6ee7a0;
	stroke-width: 2.4;
}
.bb-toast.is-bad svg {
	stroke: #fca5a5;
}
@media (max-width: 560px) {
	.bb-adm-list {
		grid-template-columns: 1fr;
	}
	.bb-f2 {
		grid-template-columns: 1fr;
	}
	.bb-aform-h {
		padding: 18px 52px 10px 16px;
	}
	.bb-aform-b {
		padding: 12px 16px 6px;
	}
}
@container bbapp (max-width: 640px) {
	.bb-adminbar {
		margin: 12px 12px 0;
	}
}
.bb-aform .bb-f input.bbc-input {
	padding: 8px 38px 8px 40px;
}
.bb-modal .bbc-clear {
	position: absolute;
	right: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 18px;
	color: var(--bb-muted);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.bb-modal .bb-btn.bb-btn-danger {
	color: var(--bb-danger);
	border-color: #f1c9c4;
}
.bb-modal .bb-edit-panel .bb-modal-x {
	color: var(--bb-ink);
	background: var(--bb-paper);
	border: 1px solid var(--bb-line);
}

/* v1.7 — অ্যাডমিন ট্যাব ও লগইন পপআপ */
.bb-app .bb-tab-admin {
	position: relative;
	color: #7a5a00;
}
.bb-app .bb-tab-admin.is-active {
	background: #fff4cf;
	color: #6b4f12;
}
.bb-tab-admin .bb-pcount {
	margin-left: 2px;
}
.bb-tab-admin .bb-pcount.is-zero {
	background: #e9e3d1;
	color: #6b4f12;
}
@container bbapp (max-width: 640px) {
	.bb-tabs:has(.bb-tab-admin) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(58px, .8fr);
	}
	.bb-tab-admin .bb-pcount {
		position: absolute;
		top: 3px;
		right: 6px;
		min-width: 18px;
		padding: 0 5px;
		font-size: 10.5px;
		line-height: 17px;
		margin: 0;
	}
}
.bb-modal .bb-login-panel {
	max-width: 420px;
}
.bb-login-h {
	padding: 26px 22px 6px;
	text-align: center;
}
.bb-login-ic {
	display: inline-grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: #fff4cf;
	color: #7a5a00;
}
.bb-login-ic svg {
	width: 28px;
	height: 28px;
}
.bb-login-h h3 {
	margin: 10px 0 4px;
	font-family: var(--bb-serif);
	font-size: 20px;
	color: var(--bb-ink);
}
.bb-login-h p {
	margin: 0;
	font-size: 13.5px;
	color: var(--bb-muted);
}
.bb-login .bb-aform-b {
	padding: 14px 22px 26px;
}
.bb-aform .bb-f input[type='password'] {
	width: 100%;
	min-height: 44px;
	padding: 9px 70px 9px 12px;
	border: 1.5px solid var(--bb-line);
	border-radius: 11px;
	background: #fdfcf9;
	font: inherit;
	font-size: 16px;
	outline: none;
	box-sizing: border-box;
}
.bb-aform .bb-f input[type='password']:focus {
	border-color: var(--bb-primary);
	box-shadow: 0 0 0 3px var(--bb-primary-l);
}
.bb-pwd {
	position: relative;
}
.bb-aform .bb-pwd input[type='text'] {
	padding-right: 70px;
}
.bb-modal .bb-pwd-eye {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-primary);
	cursor: pointer;
}
.bb-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #3d4a45;
}
.bb-remember input {
	width: 18px;
	height: 18px;
	accent-color: var(--bb-primary);
}
.bb-modal .bb-login-btn {
	width: 100%;
	justify-content: center;
	min-height: 48px;
}
.bb-lost {
	text-align: center;
	font-size: 13px;
	color: var(--bb-muted);
}