/* ==========================================================================
   ফটোকার্ড জেনারেটর — বরিশাল হোস্ট

   ভাবনা : চারপাশের সব কিছু নিরপেক্ষ ধূসর, যাতে পর্দায় একমাত্র
   রঙিন জিনিস হয় ক্লায়েন্টের নিজের কার্ড। ছবির ল্যাবের দেয়াল
   ধূসর রাখার মতো — তাহলেই আসল রঙ ঠিকঠাক বোঝা যায়।
   ========================================================================== */

:root {
	--ink:    #0E1116;
	--panel:  #161A21;
	--raise:  #1D222B;
	--edge:   #2A313C;
	--edge-2: #39424F;
	--tx:     #E6EAF0;
	--dim:    #8B95A5;
	--faint:  #5C6674;

	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;

	--gut: 20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.bhpc-body {
	margin: 0;
	min-height: 100vh;
	background: var(--ink);
	color: var(--tx);
	font-family: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   উপরের বার
   -------------------------------------------------------------------------- */

.bhpc-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 var(--gut);
	height: 52px;
	border-bottom: 1px solid var(--edge);
	background: var(--panel);
	position: sticky;
	top: 0;
	z-index: 20;
}

.bhpc-bar__mark {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--brand);
	flex: none;
}

.bhpc-bar__name {
	font-weight: 600;
	letter-spacing: .01em;
}

.bhpc-bar__back {
	margin-left: auto;
	color: var(--dim);
	text-decoration: none;
	font-size: 14px;
	padding: 6px 12px;
	border: 1px solid var(--edge);
	border-radius: 100px;
	transition: color .15s, border-color .15s;
}

.bhpc-bar__back:hover,
.bhpc-bar__back:focus-visible {
	color: var(--tx);
	border-color: var(--edge-2);
}

/* --------------------------------------------------------------------------
   মঞ্চ
   -------------------------------------------------------------------------- */

.bhpc-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 28px;
	align-items: start;
	max-width: 1060px;
	margin: 0 auto;
	padding: 32px var(--gut) 64px;
}

.bhpc-preview {
	position: sticky;
	top: 84px;
}

.bhpc-canvas {
	display: flex;
	justify-content: center;
	padding: 24px;
	background:
		linear-gradient(var(--panel), var(--panel)) padding-box,
		repeating-conic-gradient(#1A1F27 0 25%, #151A21 0 50%) 0 0 / 16px 16px;
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   কার্ড — সব ডিজাইনের সাধারণ অংশ
   -------------------------------------------------------------------------- */

.bhpc-card {
	position: relative;
	width: 480px;
	height: 480px;
	overflow: hidden;
	background: var(--brand);
	color: var(--card-text);
	font-family: "Noto Serif Bengali", serif;
	display: flex;
	flex-direction: column;
	flex: none;
	user-select: none;
}

.bhpc-card__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bhpc-card__top,
.bhpc-card__media,
.bhpc-card__title,
.bhpc-card__foot {
	position: relative;
	z-index: 2;
}

.bhpc-card__top {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 19px 0;
	flex: none;
}

.bhpc-card__logo {
	height: 35px;
	width: auto;
	max-width: 173px;
	object-fit: contain;
	display: block;
}

.bhpc-card__word {
	white-space: nowrap;
	font-weight: 800;
	font-size: 23px;
	line-height: 1.4;
	letter-spacing: -.01em;
}

.bhpc-card__meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 11px;
	/* Hind Siliguri ছোট মাপে বাংলা সংখ্যা ঘোলা দেখায় — শিরোনামের
	   ফন্টটাই এখানে পরিষ্কার আসে */
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 15px;
	line-height: 1.6;
}

.bhpc-card__cat:not(:empty) {
	font-weight: 600;
	padding: 3px 13px 5px;
	border-radius: 100px;
	background: var(--accent);
	color: #fff;
	line-height: 1.6;
}

.bhpc-card__date {
	opacity: .92;
	font-weight: 600;
	line-height: 1.6;
	/* উপরে-নিচে একটু ফাঁকা, নইলে মাত্রা আর কার কাটা পড়ে */
	padding: 2px 0 3px;
	white-space: nowrap;
}

.bhpc-card__media {
	margin: 0;
	flex: none;
}

.bhpc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bhpc-card__title {
	display: flex;
	align-items: flex-start;
	margin: 0;
	font-weight: 700;
	overflow: hidden;
	flex: 1 1 auto;
	min-height: 0;
}

.bhpc-card__words {
	display: block;
	width: 100%;
}

.bhpc-card__words span {
	cursor: pointer;
	border-radius: 2px;
	transition: color .12s;
}

.bhpc-card__words span:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.bhpc-card__words span.is-hi {
	color: var(--hi, var(--accent));
}

.bhpc-card__badge,
.bhpc-card__qr {
	display: none;
}

.bhpc-card__foot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	padding: 9px 19px 11px;
	background: rgba(0, 0, 0, .35);
}

.bhpc-card__note { opacity: .8; }
.bhpc-card__url  { letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   ডিজাইন ১ — সিগন্যাল
   ছবি উপরে, শিরোনাম নিচে। বাঁ দিকে হাইলাইট রঙের দাগ।
   -------------------------------------------------------------------------- */

.bhpc-card--signal .bhpc-card__wash {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 42%),
		linear-gradient(0deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0) 55%);
}

.bhpc-card--signal .bhpc-card__media {
	height: 211px;
	margin: 13px 19px 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	border-left: 3px solid var(--accent);
}

.bhpc-card--signal .bhpc-card__title {
	padding: 16px 19px 11px;
}

/* --------------------------------------------------------------------------
   ডিজাইন ২ — ব্রেকিং
   গাঢ় ব্যাকগ্রাউন্ড, ছবির কোণায় ব্র‍্যাকেট।
   -------------------------------------------------------------------------- */

.bhpc-card--breaking {
	background: #0B0D10;
}

.bhpc-card--breaking .bhpc-card__wash {
	background:
		radial-gradient(120% 85% at 50% 8%, var(--brand) 0%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .5));
	opacity: .9;
}

.bhpc-card--breaking .bhpc-card__media {
	position: relative;
	height: 200px;
	margin: 16px 24px 0;
}

.bhpc-card--breaking .bhpc-card__media::before,
.bhpc-card--breaking .bhpc-card__media::after {
	content: "";
	position: absolute;
	width: 35px;
	height: 35px;
	border: 4px solid var(--accent);
	z-index: 3;
}

.bhpc-card--breaking .bhpc-card__media::before {
	top: -8px;
	left: -8px;
	border-right: 0;
	border-bottom: 0;
	border-top-left-radius: 4px;
}

.bhpc-card--breaking .bhpc-card__media::after {
	bottom: -8px;
	right: -8px;
	border-left: 0;
	border-top: 0;
	border-bottom-right-radius: 4px;
}

.bhpc-card--breaking .bhpc-card__title {
	padding: 19px 24px 11px;
}

.bhpc-card--breaking .bhpc-card__foot {
	background: var(--brand);
}

/* --------------------------------------------------------------------------
   ডিজাইন ৩ — ফ্রেম
   ছবি পুরো কার্ড জুড়ে, শিরোনাম তার উপরে।
   -------------------------------------------------------------------------- */

.bhpc-card--frame .bhpc-card__media {
	position: absolute;
	inset: 0;
	height: auto;
	z-index: 0;
}

.bhpc-card--frame .bhpc-card__wash {
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .92) 0%,
		rgba(0, 0, 0, .60) 34%,
		rgba(0, 0, 0, .05) 64%,
		rgba(0, 0, 0, .45) 100%
	);
}

.bhpc-card--frame .bhpc-card__title {
	align-items: flex-end;
	padding: 0 21px 13px;
}

.bhpc-card--frame .bhpc-card__foot {
	background: var(--brand);
}

/* --------------------------------------------------------------------------
   ডিজাইন ৪ — উদ্ধৃতি
   ছবি ছোট গোল, শিরোনাম বড় ও মাঝ বরাবর।
   -------------------------------------------------------------------------- */

.bhpc-card--quote .bhpc-card__wash {
	background:
		radial-gradient(80% 60% at 82% 12%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%),
		linear-gradient(200deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .38));
}

.bhpc-card--quote .bhpc-card__media {
	width: 99px;
	height: 99px;
	margin: 19px auto 0;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid var(--accent);
}

.bhpc-card--quote .bhpc-card__title {
	align-items: center;
	padding: 13px 29px;
}

.bhpc-card--quote .bhpc-card__title::before {
	content: "";
	position: absolute;
	top: 128px;
	left: 50%;
	transform: translateX(-50%);
	width: 35px;
	height: 3px;
	background: var(--accent);
}

/* --------------------------------------------------------------------------
   ডিজাইন ৫ — লেটেস্ট কার্ড

   বড় ছবি উপরে, নিচে গাঢ় প্যানেল। তারিখের ব্যাজটা ঠিক দুইয়ের
   সংযোগস্থলে বসে — এটাই এই ডিজাইনের চেনা চিহ্ন।

   প্যানেলের রঙ ব্র‍্যান্ড রঙ থেকেই আসে, উপরে কালো আস্তরণ দিয়ে গাঢ়
   করা হয়। ফলে ব্যাজটা প্যানেলের চেয়ে উজ্জ্বল দেখায় আর চোখে পড়ে।
   -------------------------------------------------------------------------- */

.bhpc-card--latest {
	background: var(--card-panel, #0E2A5C);
}

/* ছবি — উপরের ৫৮% */
.bhpc-card--latest .bhpc-card__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 58%;
	z-index: 1;
}

/* ছবির উপরে হালকা ছায়া, নইলে সাদা লোগো হারিয়ে যায় */
.bhpc-card--latest .bhpc-card__media::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* আস্তরণ শুধু নিচের প্যানেলে — হালকা গভীরতা দিতে */
.bhpc-card--latest .bhpc-card__wash {
	top: 58%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .18));
	z-index: 2;
}

/* লোগো ছবির উপরে ভাসবে */
.bhpc-card--latest .bhpc-card__top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 14px 18px 0;
}

.bhpc-card--latest .bhpc-card__logo {
	height: 40px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}

.bhpc-card--latest .bhpc-card__word {
	text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.bhpc-card--latest .bhpc-card__meta {
	align-items: flex-start;
}

/* উপরের কোণে তারিখ নয় — নিচের ব্যাজেই দেখাবে */
.bhpc-card--latest .bhpc-card__date {
	display: none;
}

/* তারিখের ব্যাজ — ছবি আর প্যানেলের সংযোগস্থলে */
.bhpc-card--latest .bhpc-card__badge {
	display: block;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
	padding: 9px 28px 11px;
	background: var(--card-panel, #0E2A5C);
	color: #fff;
	font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
	font-size: 16px;
	font-weight: 600;
	/* বাংলার মাত্রা আর কার যেন কাটা না পড়ে */
	line-height: 1.7;
	white-space: nowrap;
	border-radius: 3px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

/* শিরোনাম — প্যানেলের মাঝ বরাবর */
.bhpc-card--latest .bhpc-card__title {
	position: absolute;
	top: 58%;
	left: 0;
	right: 0;
	bottom: 44px;
	z-index: 4;
	align-items: center;
	padding: 30px 24px 8px;
}

.bhpc-card--latest .bhpc-card__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	background: rgba(0, 0, 0, .3);
}

/* ঠিকানা বাঁ কোণে, লেখা ডান কোণে */
.bhpc-card--latest .bhpc-card__url {
	order: -1;
}

/* QR থাকলে লেখাটা তার নিচে ঢুকে যেত */
.bhpc-card--latest.has-qr .bhpc-card__note {
	margin-right: 74px;
}

/* QR — নিচের বারের ঠিক উপরে, ডান কোণে */
.bhpc-card--latest .bhpc-card__qr {
	display: block;
	position: absolute;
	right: 16px;
	bottom: 52px;
	z-index: 6;
	width: 58px;
	height: 58px;
	padding: 4px;
	background: #fff;
	border-radius: 4px;
	object-fit: contain;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* QR থাকলে শিরোনাম তার উপরে থামবে — লেখা আর ঢাকা পড়বে না */
.bhpc-card--latest.has-qr .bhpc-card__title {
	padding-bottom: 64px;
}

/* --------------------------------------------------------------------------
   ডিজাইন বদলানোর চিপ
   -------------------------------------------------------------------------- */

.bhpc-designs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	justify-content: center;
}

.bhpc-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 100px;
	color: var(--dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}

.bhpc-chip:hover { color: var(--tx); border-color: var(--edge-2); }

.bhpc-chip.is-on {
	color: var(--tx);
	border-color: var(--accent);
	background: var(--raise);
}

.bhpc-chip__art {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: var(--brand);
	overflow: hidden;
	flex: none;
}

.bhpc-chip__art i,
.bhpc-chip__art b {
	position: absolute;
	display: block;
	background: rgba(255, 255, 255, .82);
}

/* প্রতিটা চিপের ভিতরের ছোট নকশা — কোন ডিজাইন সেটা বোঝায় */
.bhpc-art--signal i { inset: 3px 3px auto 3px; height: 8px; }
.bhpc-art--signal b { inset: auto 3px 3px 3px; height: 5px; opacity: .55; }

.bhpc-art--breaking { background: #0B0D10; }
.bhpc-art--breaking i { inset: 4px; border: 1.5px solid var(--accent); background: none; }
.bhpc-art--breaking b { inset: auto 0 0 0; height: 5px; background: var(--brand); }

.bhpc-art--frame i { inset: 0; background: rgba(255, 255, 255, .3); }
.bhpc-art--frame b { inset: auto 3px 3px 3px; height: 7px; }

.bhpc-art--latest { background: #0E2A5C; }
.bhpc-art--latest i { inset: 0 0 auto 0; height: 12px; background: rgba(255, 255, 255, .55); }
.bhpc-art--latest b {
	inset: 9px auto auto 50%;
	transform: translateX(-50%);
	width: 13px;
	height: 5px;
	border-radius: 1px;
	background: var(--brand);
}

.bhpc-art--quote i {
	inset: 3px auto auto 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.bhpc-art--quote b { inset: auto 4px 5px 4px; height: 4px; opacity: .7; }

/* --------------------------------------------------------------------------
   কন্ট্রোল প্যানেল
   -------------------------------------------------------------------------- */

.bhpc-panel {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
	padding: 20px;
}

.bhpc-group + .bhpc-group { margin-top: 18px; }

.bhpc-group--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.bhpc-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--dim);
	margin-bottom: 6px;
	letter-spacing: .01em;
}

.bhpc-input {
	width: 100%;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	color: var(--tx);
	font: inherit;
	padding: 9px 11px;
	transition: border-color .15s;
}

.bhpc-input:focus {
	outline: none;
	border-color: var(--accent);
}

.bhpc-input--area {
	resize: vertical;
	min-height: 74px;
	font-family: "Noto Serif Bengali", serif;
	line-height: 1.6;
}

.bhpc-tip {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--faint);
	line-height: 1.45;
}

.bhpc-tip__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
	margin-top: 6px;
}

/* স্লাইডার */

.bhpc-slider__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.bhpc-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--tx);
	background: var(--raise);
	border-radius: 4px;
	padding: 1px 6px;
	margin-bottom: 6px;
}

input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 22px;
	background: none;
	cursor: pointer;
	margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	background: var(--edge-2);
	border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 15px;
	height: 15px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--tx);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--edge-2);
}

input[type="range"]::-moz-range-track {
	height: 3px;
	background: var(--edge-2);
	border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tx);
	border: 3px solid var(--panel);
	box-shadow: 0 0 0 1px var(--edge-2);
}

input[type="range"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* রঙ */

.bhpc-swatch input[type="color"] {
	width: 100%;
	height: 38px;
	padding: 3px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	cursor: pointer;
}

.bhpc-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.bhpc-swatch input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }

/* ফাইল */

.bhpc-file {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	border: 1px dashed var(--edge-2);
	border-radius: var(--r-sm);
	padding: 8px 8px 8px 12px;
	cursor: pointer;
	transition: border-color .15s;
}

.bhpc-file:hover { border-color: var(--accent); }

.bhpc-file__text {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--dim);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bhpc-file__btn {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--tx);
	background: var(--raise);
	border-radius: 4px;
	padding: 5px 12px;
}

/* ডাউনলোড */

.bhpc-go {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: 22px;
	padding: 13px 16px;
	background: var(--accent);
	border: none;
	border-radius: var(--r-md);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	overflow: hidden;
	transition: filter .15s;
}

.bhpc-go:hover { filter: brightness(1.08); }

.bhpc-go:disabled {
	cursor: progress;
	filter: saturate(.4) brightness(.8);
}

.bhpc-go__size {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	opacity: .7;
}

/* কাজ চলার সময় উপরে সরু আলো — সম্প্রচারের ট্যালি লাইটের মতো */
.bhpc-go.is-busy::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 2px;
	width: 40%;
	background: #fff;
	animation: bhpc-sweep 1s linear infinite;
}

@keyframes bhpc-sweep {
	from { transform: translateX(-100%); }
	to   { transform: translateX(350%); }
}

.bhpc-credit {
	margin: 16px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--faint);
}

.bhpc-credit a {
	color: var(--dim);
	text-decoration: none;
}

.bhpc-credit a:hover { color: var(--tx); }

/* --------------------------------------------------------------------------
   খালি অবস্থা
   -------------------------------------------------------------------------- */

.bhpc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 70vh;
	padding: var(--gut);
	text-align: center;
}

.bhpc-empty__msg { margin: 0; color: var(--dim); }

.bhpc-empty__link {
	color: var(--tx);
	text-decoration: none;
	border: 1px solid var(--edge);
	border-radius: 100px;
	padding: 8px 18px;
	font-size: 14px;
}

.bhpc-empty__link:hover { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   ছোট পর্দা
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bhpc-stage {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-top: 20px;
	}

	.bhpc-preview { position: static; }

	.bhpc-canvas { padding: 16px; }
}

/*
   কার্ডের আসল মাপ সবসময় ৪৮০px — ডাউনলোডের ছবি যেন সব যন্ত্রে এক হয়।
   ছোট পর্দায় শুধু দেখতে ছোট করা হয়, ভিতরের কিছু বদলায় না।
*/
@media (max-width: 560px) {
	.bhpc-canvas {
		padding: 12px;
		display: block;
	}

	.bhpc-fit {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.bhpc-card {
		transform: scale(var(--fit, 1));
		transform-origin: top center;
	}
}

@media (max-width: 420px) {
	.bhpc-panel { padding: 16px; }
	.bhpc-group--pair { grid-template-columns: 1fr; gap: 14px; }
}

/* --------------------------------------------------------------------------
   কম নড়াচড়ার পছন্দ
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   লেখার অবস্থান
   -------------------------------------------------------------------------- */

.bhpc-align--left   { text-align: left; }
.bhpc-align--center { text-align: center; }
.bhpc-align--right  { text-align: right; }

/* তিন বোতামের দল */

.bhpc-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--ink);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
}

.bhpc-seg__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 6px;
	background: none;
	border: none;
	border-radius: 4px;
	color: var(--dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: color .15s, background .15s;
}

.bhpc-seg__btn:hover { color: var(--tx); }

.bhpc-seg__btn.is-on {
	color: var(--tx);
	background: var(--raise);
}

.bhpc-seg__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* বোতামের ভিতরের ছোট দাগ — কোন দিকে বোঝায় */

.bhpc-seg__art {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 13px;
	flex: none;
}

.bhpc-seg__art i {
	display: block;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.bhpc-seg__art i:nth-child(1) { width: 100%; }
.bhpc-seg__art i:nth-child(2) { width: 62%; }
.bhpc-seg__art i:nth-child(3) { width: 85%; }

.bhpc-seg__art--center { align-items: center; }
.bhpc-seg__art--right  { align-items: flex-end; }

@media (max-width: 420px) {
	.bhpc-seg__btn span:last-child { display: none; }
}