/* =========================================================================
   Banshkhali Blood Bank — Frontend UI Extension (design phase only)
   -------------------------------------------------------------------------
   Additive, page-scoped styles for the new dummy-data sections added to
   the Home Dashboard (Live Statistics, Blood Stock, Top Donors, Recent
   Donations, Emergency Services, Upcoming Blood Camp, Notice Board) and
   the new stand-alone screens (Leaderboard, Achievements, Hospital
   Directory, Doctor Directory). Every rule below is prefixed `.dbx-` so
   nothing here can ever override an existing `.db-*` / `.service-*` /
   `.card` rule already used by the working Homepage, Donors, Requests,
   Chat, Notifications, or Profile screens. Pure presentation — no
   selector here is ever targeted by app.js/dashboard.js business logic,
   only by the new markup that renders the dummy placeholder data.
   ========================================================================= */

.dbx-extra { display: flex; flex-direction: column; }

.dbx-section { margin-bottom: 18px; animation: dbFadeUp .45s ease .1s both; }

/* The last section rendered inside .dbx-extra on the Home Dashboard is
   always Notice Board (see extraDashboardSections() in
   assets/js/views/dashboard.js) — nothing else follows it before
   .app-main's own reserved Bottom Nav clearance begins. Its normal
   18px trailing margin-bottom therefore only added dead blank space
   with nothing below it to space away from. Every other .dbx-section's
   18px margin-bottom (the actual gap BETWEEN sections) is untouched. */
.dbx-extra > .dbx-section:last-child { margin-bottom: 0; }

.dbx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
/* Section-heading typography — rendering system matched to the fix
   applied to the Calendar ("১৪৩৩ বঙ্গাব্দ") and Hero Banner date/time,
   which resolved inconsistent Bengali glyph/digit rendering. Only the
   rendering properties (font-family, weight, line-height, letter-
   spacing, glyph/feature settings) are carried over — font-size is
   NOT part of that fix and stays as-is here, so headings keep their
   current visual size. Living on the shared .dbx-head h2 rule means
   every section heading (current and future, since all go through the
   dbxHead() helper) picks this up automatically. */
.dbx-head h2 {
	font-size: 15.5px;
	font-weight: 800;
	color: var(--text);
	margin: 0;
	font-family: 'Hind Siliguri', var(--font-bn, sans-serif);
	line-height: 1.3;
	letter-spacing: .1px;
	font-variant-numeric: normal;
	font-feature-settings: normal;
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}

/* "Recent Donations" and "Blood Grouping Camp" section titles keep their
   ~2px larger size over the shared 15.5px baseline — everything else
   (rendering, family, weight, line-height, letter-spacing) is inherited
   from .dbx-head h2 above, so it stays identical to every other section
   heading. */
.dbx-recent-donations .dbx-head h2,
.dbx-camp .dbx-head h2 {
	font-size: 17.5px;
}

/* ---------------------------------------------------------------------- */
/* Live Statistics — premium glass tiles (grid auto-wraps per tile count) */
/* ---------------------------------------------------------------------- */
.dbx-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.dbx-stat-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 14px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	transition: transform .16s var(--ease-spring), box-shadow .16s ease;
}
.dbx-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.dbx-stat-tile-icon {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.dbx-stat-tile.db-tone-blue   .dbx-stat-tile-icon { background: rgba(37, 99, 235, .14);  color: #2563eb; }
.dbx-stat-tile.db-tone-red    .dbx-stat-tile-icon { background: rgba(209, 38, 78, .14);  color: var(--accent-strong); }
.dbx-stat-tile.db-tone-green  .dbx-stat-tile-icon { background: rgba(31, 158, 85, .16);  color: #1a7f37; }
.dbx-stat-tile.db-tone-purple .dbx-stat-tile-icon { background: rgba(139, 92, 246, .16); color: #7c3aed; }
.dbx-stat-tile.db-tone-amber  .dbx-stat-tile-icon { background: rgba(217, 119, 6, .16);  color: #b45309; }
.dbx-stat-tile-value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 21px;
	font-weight: 800;
	color: var(--text);
	line-height: 1.1;
}
.dbx-stat-tile-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }

@media (min-width: 900px) {
	.dbx-stats-grid { grid-template-columns: repeat(4, minmax(0, 220px)); }
}

/* ---------------------------------------------------------------------- */
/* Blood Stock — 4-column group chips                                    */
/* ---------------------------------------------------------------------- */
.dbx-stock-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.dbx-stock-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 8px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	text-align: center;
}
.dbx-stock-group {
	font-family: var(--font-mono);
	font-weight: 800;
	font-size: 16px;
	color: var(--accent-strong);
}
.dbx-stock-bags {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(31, 158, 85, .14);
	color: #1a7f37;
}
.dbx-stock-chip.dbx-stock-low .dbx-stock-bags {
	background: rgba(209, 38, 78, .14);
	color: var(--accent-strong);
}

/* ---------------------------------------------------------------------- */
/* Top Donors — horizontal scroll row with medal-ranked avatars          */
/* ---------------------------------------------------------------------- */
.dbx-donors-row {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 4px 2px 8px;
	scrollbar-width: none;
}
.dbx-donors-row::-webkit-scrollbar { display: none; }
.dbx-donor-card {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 84px;
	text-decoration: none;
}
.dbx-donor-avatar-wrap { position: relative; }
.dbx-donor-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--surface-raised);
	box-shadow: var(--shadow-card);
}
.dbx-donor-rank {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	border: 2px solid var(--surface-raised);
}
.dbx-donor-name {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.dbx-donor-count { font-size: 10.5px; color: var(--text-muted); text-align: center; }
.dbx-donor-group {
	font-size: 10px;
	font-weight: 700;
	color: var(--accent-strong);
	background: rgba(209, 38, 78, .1);
	border-radius: 999px;
	padding: 1px 7px;
}
.dbx-donor-rank { background: var(--accent-strong); }

/* Today / Monthly / Yearly / Lifetime period tabs — Automatic Top Donor system */
.dbx-donor-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-bottom: 10px;
}
.dbx-donor-tabs::-webkit-scrollbar { display: none; }
.dbx-donor-tab {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	color: var(--text-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dbx-donor-tab.active {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: #fff;
}
.dbx-donors-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 2px; }
.dbx-donors-row[aria-busy="true"] { opacity: .5; }

/* ---------------------------------------------------------------------- */
/* Recent Donations                                                       */
/* ---------------------------------------------------------------------- */
.dbx-donation-list { display: flex; flex-direction: column; gap: 10px; }
.dbx-donation-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 13px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.dbx-donation-badge {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 11px;
	font-family: var(--font-mono);
}
.dbx-donation-badge.db-tone-red    { background: #FBE3E9; color: var(--accent-strong); }
.dbx-donation-badge.db-tone-blue   { background: #DBEAFE; color: #2563eb; }
.dbx-donation-badge.db-tone-green  { background: #DCFCE7; color: #1a7f37; }
.dbx-donation-badge.db-tone-purple { background: #EDE9FE; color: #7c3aed; }
.dbx-donation-photo {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	flex-shrink: 0;
	object-fit: cover;
	border: 1px solid var(--border);
}
.dbx-donation-badge-mini {
	flex-shrink: 0;
	padding: 2px 7px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 10px;
	font-family: var(--font-mono);
}
.dbx-donation-badge-mini.db-tone-red    { background: #FBE3E9; color: var(--accent-strong); }
.dbx-donation-badge-mini.db-tone-blue   { background: #DBEAFE; color: #2563eb; }
.dbx-donation-badge-mini.db-tone-green  { background: #DCFCE7; color: #1a7f37; }
.dbx-donation-badge-mini.db-tone-purple { background: #EDE9FE; color: #7c3aed; }
.dbx-donation-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dbx-donation-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.dbx-donation-hospital {
	font-size: 12px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dbx-donation-hospital svg { vertical-align: -1px; margin-right: 1px; }
.dbx-donation-time { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Recent Donations — horizontal slider/carousel (Feature 2)             */
/* Mobile: native touch swipe (overflow-x + scroll-snap). Desktop: click-  */
/* and-drag via initDonationSlider() in dashboard.js.                     */
/* ---------------------------------------------------------------------- */
.dbx-donation-slider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px 2px 10px;
	cursor: grab;
	user-select: none;
}
.dbx-donation-slider::-webkit-scrollbar { display: none; }
.dbx-donation-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.dbx-donation-slide {
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 152px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 16px 12px 14px;
	border-radius: var(--radius-lg, 20px);
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	transition: transform .16s var(--ease-spring), box-shadow .16s ease;
	animation: dbFadeUp .4s ease both;
}
.dbx-donation-slide:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

.dbx-donation-slide-photo {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--surface-raised);
	box-shadow: var(--shadow-card);
}
.dbx-donation-slide-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 10px;
	font-family: var(--font-mono);
}
.dbx-donation-slide-badge.db-tone-red    { background: #FBE3E9; color: var(--accent-strong); }
.dbx-donation-slide-badge.db-tone-blue   { background: #DBEAFE; color: #2563eb; }
.dbx-donation-slide-badge.db-tone-green  { background: #DCFCE7; color: #1a7f37; }
.dbx-donation-slide-badge.db-tone-purple { background: #EDE9FE; color: #7c3aed; }

.dbx-donation-slide-name {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.dbx-donation-slide-loc {
	font-size: 11.5px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.dbx-donation-slide-loc svg, .dbx-donation-slide-time svg { vertical-align: -1px; margin-right: 1px; color: var(--accent); }
.dbx-donation-slide-time { font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; word-break: normal; max-width: 100%; display: block; }

.dbx-donation-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 4px;
	padding: 11px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	border: 1px solid var(--border);
	color: var(--accent-strong);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.dbx-donation-viewall:hover { background: rgba(209, 38, 78, .08); transform: translateY(-1px); }
.dbx-donation-viewall svg { width: 14px; height: 14px; }

@media (min-width: 900px) {
	.dbx-donation-slide { width: 168px; }
}

/* ---------------------------------------------------------------------- */
/* Emergency Services grid                                                */
/* ---------------------------------------------------------------------- */
.dbx-emerg-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}
.dbx-emerg-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 6px;
	border-radius: 18px;
	text-decoration: none;
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	transition: transform .15s var(--ease-spring), box-shadow .15s ease;
}
.dbx-emerg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.dbx-emerg-card:active { transform: scale(.96); }
.dbx-emerg-icon {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
}
.dbx-emerg-label { font-size: 11.5px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.3; }

/* ---------------------------------------------------------------------- */
/* Upcoming Blood Camp                                                    */
/* ---------------------------------------------------------------------- */
.dbx-camp-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--bbb-garnet-bright) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
	overflow: hidden;
}
.dbx-camp-date {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--card-inner-bg);
	box-shadow: var(--shadow-card);
}
.dbx-camp-date span { font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--accent-strong); line-height: 1; }
.dbx-camp-date small { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.dbx-camp-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dbx-camp-place { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.dbx-camp-time { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.dbx-camp-place svg, .dbx-camp-time svg { vertical-align: -1px; margin-right: 2px; color: var(--accent); }
.dbx-camp-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--accent-strong);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}
.dbx-camp-drop {
	position: absolute;
	right: -10px;
	bottom: -10px;
	font-size: 90px;
	color: var(--accent);
	opacity: .1;
	pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Notice Board                                                           */
/* ---------------------------------------------------------------------- */
.dbx-notice-list { display: flex; flex-direction: column; gap: 10px; }
.dbx-notice-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.dbx-notice-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(209, 38, 78, .12);
	color: var(--accent-strong);
	font-size: 14px;
}
.dbx-notice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dbx-notice-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.dbx-notice-time { font-size: 11px; color: var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* Bottom CTA banner                                                      */
/* ---------------------------------------------------------------------- */
.dbx-cta-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 16px;
	margin-top: 4px;
	border-radius: var(--radius-lg);
	background: linear-gradient(120deg, var(--bbb-midnight), var(--accent-strong));
	color: #fff;
	text-decoration: none;
	text-align: center;
	box-shadow: var(--shadow-float);
}
.dbx-cta-banner svg, .dbx-cta-banner i { font-size: 20px; flex-shrink: 0; }
.dbx-cta-banner span { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.dbx-cta-banner strong { display: block; color: var(--bbb-gold); font-size: 14.5px; }

@media (min-width: 640px) {
	.dbx-emerg-grid { grid-template-columns: repeat(4, minmax(0, 140px)); justify-content: start; }
	.dbx-stock-grid { grid-template-columns: repeat(4, minmax(0, 140px)); }
}

/* =========================================================================
   Stand-alone screens: Leaderboard, Achievements, Hospital Directory,
   Doctor Directory (assets/js/views/directory.js). Same `.dbx-` prefix.
   ========================================================================= */

.dbx-page { padding-bottom: 24px; }
.dbx-page-head { margin-bottom: 18px; }
.dbx-page-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--text);
	margin: 0 0 4px;
}
.dbx-page-sub { font-size: 13px; color: var(--text-muted); margin: 0; }

/* --- Leaderboard --- */
.dbx-lb-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 20px 10px 0;
}
.dbx-lb-podium-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dbx-lb-podium-item img {
	width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
	border: 3px solid #fff; box-shadow: var(--shadow-card);
}
.dbx-lb-podium-item.rank-1 img { width: 76px; height: 76px; }
.dbx-lb-podium-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.dbx-lb-podium-group {
	font-size: 10px;
	font-weight: 700;
	color: var(--accent-strong);
	background: rgba(209, 38, 78, .1);
	border-radius: 999px;
	padding: 1px 7px;
}
.dbx-lb-podium-count { font-size: 11px; color: var(--text-muted); }
[data-lb-body][aria-busy="true"] { opacity: .5; }
.dbx-lb-podium-bar {
	width: 72px;
	border-radius: 14px 14px 0 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 6px;
	font-family: var(--font-mono);
	font-weight: 800;
	color: #fff;
	font-size: 16px;
}
.rank-1 .dbx-lb-podium-bar { height: 88px; background: linear-gradient(180deg, #F5B93F, #C98A4A); }
.rank-2 .dbx-lb-podium-bar { height: 66px; background: linear-gradient(180deg, #C7CDD6, #9AA3B0); }
.rank-3 .dbx-lb-podium-bar { height: 52px; background: linear-gradient(180deg, #D79A64, #B06A34); }

.dbx-lb-list { display: flex; flex-direction: column; gap: 10px; }
.dbx-lb-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.dbx-lb-rank {
	flex-shrink: 0;
	width: 26px;
	text-align: center;
	font-family: var(--font-mono);
	font-weight: 800;
	color: var(--text-muted);
	font-size: 13px;
}
.dbx-lb-row img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dbx-lb-row-info { flex: 1; min-width: 0; }
.dbx-lb-row-name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.dbx-lb-row-meta { font-size: 11.5px; color: var(--text-muted); }
.dbx-lb-row-count {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-weight: 800;
	font-size: 15px;
	color: var(--accent-strong);
}

/* --- Achievements --- */
.dbx-ach-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.dbx-ach-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px 12px;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.dbx-ach-card.locked { opacity: .48; filter: grayscale(.6); }
.dbx-ach-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	background: linear-gradient(135deg, var(--bbb-gold), #8a6011);
}
.dbx-ach-card.locked .dbx-ach-icon { background: linear-gradient(135deg, #9AA3B0, #6b7280); }
.dbx-ach-title { font-size: 13px; font-weight: 700; color: var(--text); }
.dbx-ach-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* --- Hospital / Doctor Directory --- */
.dbx-dir-list { display: flex; flex-direction: column; gap: 12px; }
.dbx-dir-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}
.dbx-dir-avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	object-fit: cover;
}
.dbx-dir-avatar.round { border-radius: 50%; }
.dbx-dir-info { flex: 1; min-width: 0; }
.dbx-dir-name { font-weight: 800; font-size: 14px; color: var(--text); }
.dbx-dir-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dbx-dir-meta svg, .dbx-dir-meta i { margin-right: 3px; color: var(--accent); }
.dbx-dir-call {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(31, 158, 85, .14);
	color: #1a7f37;
	text-decoration: none;
	font-size: 15px;
}

@media (min-width: 900px) {
	.dbx-lb-list, .dbx-dir-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.dbx-ach-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* /donations — dedicated "Recent Blood Donations" page (Feature 2's     */
/* "সব রক্তদান দেখুন" destination). Paginated/infinite-load list, same   */
/* premium card language as the rest of the app.                         */
/* ---------------------------------------------------------------------- */
.bdh-page { padding-bottom: 8px; }
.bdh-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.bdh-back {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
	border: 1px solid var(--border);
	color: var(--text);
	text-decoration: none;
}
.bdh-header h1 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }

.bdh-list { display: flex; flex-direction: column; gap: 10px; }
.bdh-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 13px;
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	animation: dbFadeUp .35s ease both;
}
.bdh-card-photo {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--border);
}
.bdh-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bdh-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bdh-card-name { font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bdh-card-badge {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 10.5px;
	font-family: var(--font-mono);
}
.bdh-card-badge.db-tone-red    { background: #FBE3E9; color: var(--accent-strong); }
.bdh-card-badge.db-tone-blue   { background: #DBEAFE; color: #2563eb; }
.bdh-card-badge.db-tone-green  { background: #DCFCE7; color: #1a7f37; }
.bdh-card-badge.db-tone-purple { background: #EDE9FE; color: #7c3aed; }
.bdh-card-loc {
	font-size: 12px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bdh-card-loc svg, .bdh-card-time svg { vertical-align: -1px; margin-right: 2px; color: var(--accent); }
.bdh-card-time { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text-muted); white-space: nowrap; }

.bdh-empty { color: var(--text-muted); font-size: 14px; padding: 24px 4px; text-align: center; }
.bdh-status { text-align: center; padding: 14px 0; }
.bdh-loading { font-size: 12.5px; color: var(--text-muted); }

/* ------------------------------------------------------------------ */
/* 🚨 জরুরি রক্তের আবেদন — Emergency Blood Request Form                 */
/* All rules prefixed `.er-` so they cannot override or redesign any   */
/* other screen. See assets/js/views/emergency-request.js.             */
/* ------------------------------------------------------------------ */

.er-section-title {
	font-size: 13px;
	font-weight: 800;
	color: var(--accent-strong, var(--accent));
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 22px 0 12px;
}
.er-section-title:first-child { margin-top: 4px; }

.er-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}
.er-grid-2 .field { min-width: 0; }

.er-urgency-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.er-urgency-pill {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 10px;
	border-radius: 14px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.er-urgency-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.er-urgency-pill.active {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent-strong, var(--accent));
}

.er-consent-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--text);
	margin: 6px 0 18px;
	cursor: pointer;
	line-height: 1.5;
}
.er-consent-label input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--accent);
}

.er-success-card {
	text-align: center;
	padding: 36px 20px;
	max-width: 480px;
	margin: 0 auto;
}
.er-success-icon { font-size: 40px; margin-bottom: 10px; }
.er-success-text {
	font-size: 15px;
	color: var(--text);
	line-height: 1.6;
	margin: 0 0 20px;
}
.er-success-id {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 22px;
	border-radius: 16px;
	background: var(--surface);
	border: 1.5px dashed var(--border);
}
.er-success-id span {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-muted);
}
.er-success-id strong {
	font-size: 17px;
	font-family: var(--font-mono);
	color: var(--accent-strong, var(--accent));
	letter-spacing: .02em;
}

@media (max-width: 420px) {
	.er-grid-2 { grid-template-columns: 1fr; }
}

/* ====================================================================== */
/* Emergency Blood Request — native Android-style form refresh            */
/* Scope: .er-app-page / .er-native-* only. Existing API/validation stays */
/* in assets/js/views/emergency-request.js.                               */
/* ====================================================================== */
.er-app-page{max-width:620px;margin:0 auto;padding:0 0 24px}.er-app-topbar{display:flex;align-items:center;gap:12px;margin:0 -16px 16px;padding:14px 18px 18px;background:linear-gradient(135deg,#9f001e,#c60028 58%,#98001d);color:#fff;border-radius:0 0 24px 24px;box-shadow:0 10px 28px rgba(157,0,31,.18)}.er-app-back{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08)}.er-app-brand{display:flex;align-items:center;gap:10px;min-width:0}.er-app-brand-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#c8002e;font-size:19px;box-shadow:0 6px 18px rgba(0,0,0,.12)}.er-app-brand h1{margin:0!important;color:#fff!important;font-size:19px!important;font-weight:800!important}.er-app-brand p{margin:2px 0 0;font-size:11px;opacity:.9}.er-native-form{padding:0 2px}.er-hero-card{position:relative;overflow:hidden;display:grid;grid-template-columns:118px 1fr;align-items:center;min-height:174px;padding:18px;border-radius:22px;background:linear-gradient(135deg,#ff3150 0%,#ec0038 52%,#c70032 100%);color:#fff;box-shadow:0 14px 32px rgba(218,0,51,.18);margin-bottom:16px;animation:erCardIn .45s cubic-bezier(.2,.8,.2,1) both}.er-hero-card:before,.er-hero-card:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}.er-hero-card:before{width:150px;height:150px;right:-62px;top:-70px}.er-hero-card:after{width:110px;height:110px;left:54px;bottom:-78px}.er-hero-art{position:relative;width:88px;height:112px;margin:auto;border-radius:18px;background:linear-gradient(180deg,#fff,#f7e8e9);display:grid;place-items:center;color:#e00035;font-size:48px;box-shadow:0 10px 22px rgba(120,0,28,.2);animation:erHeroFloat 3.4s ease-in-out infinite}.er-bag-handle{position:absolute;top:-11px;width:38px;height:17px;border:7px solid #fff;border-bottom:0;border-radius:12px 12px 0 0}.er-drop{position:absolute;color:rgba(120,0,26,.22);font-size:28px;transform:rotate(45deg);animation:erDropPulse 2.4s ease-in-out infinite}.er-drop-one{right:-30px;top:20px}.er-drop-two{right:-17px;bottom:10px;animation-delay:.7s}.er-hero-copy{position:relative;z-index:1}.er-hero-copy h2{margin:0 0 7px!important;color:#fff!important;font-size:22px!important;font-weight:900!important}.er-hero-copy p{margin:0 0 15px;font-size:13px;opacity:.92}.er-hero-copy span{display:inline-block;background:#fff;color:#b9002b;border-radius:999px;padding:8px 13px;font-size:11.5px;font-weight:800}.er-native-card{background:var(--surface-raised,#fff);border:1px solid var(--border,#eee);border-radius:20px;padding:17px;margin-bottom:14px;box-shadow:0 8px 24px rgba(40,18,23,.055);animation:erCardIn .45s ease both}.er-native-title{display:flex;align-items:center;gap:10px;margin:0 0 18px!important;font-size:16px!important;font-weight:800!important;color:var(--text)!important}.er-native-title>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffe7ed;color:#e00039;font-size:14px}.er-native-card .field label,.er-blood-label{font-size:12px!important;font-weight:700!important;color:var(--text-muted)!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 7px!important}.er-native-card .field input:not([type=radio]),.er-native-card .field select,.er-native-card .field textarea{min-height:50px;border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,#f3ebe7);border:1px solid var(--border);font-size:14px;padding:12px 14px}.er-blood-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:15px}.er-blood-option{position:relative;display:block!important;margin:0!important}.er-blood-option input{position:absolute;opacity:0;pointer-events:none}.er-blood-option span{height:58px;display:grid;place-items:center;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);font-family:var(--font-mono);font-size:16px;font-weight:800;color:var(--text);transition:.18s ease}.er-blood-option.active span{color:#fff;border-color:#e3003c;background:linear-gradient(145deg,#f40042,#c80034);box-shadow:0 8px 18px rgba(224,0,57,.2);transform:translateY(-1px)}.er-blood-option.active span:after{content:"✓";position:absolute;right:6px;bottom:5px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#df0038;font-size:10px}.er-bag-counter{display:grid;grid-template-columns:58px 1fr 58px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}.er-bag-counter button{border:0;background:transparent;color:var(--text);font-size:25px;min-height:50px}.er-bag-counter input{border:0!important;border-left:1px solid var(--border)!important;border-right:1px solid var(--border)!important;border-radius:0!important;text-align:center;background:transparent!important;min-width:0}.er-location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.er-location-grid .field{margin-bottom:0}.er-location-grid .field select{padding:10px 9px;font-size:12px}.er-urgency-group{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.er-custom-date-wrap{margin-top:12px;padding:12px 13px;border:1px solid var(--border);border-radius:15px;background:var(--surface)}.er-custom-date-wrap[hidden]{display:none!important}.er-custom-date-wrap label{display:block!important;margin:0 0 7px!important;font-size:12px!important;font-weight:700!important;color:var(--text-muted)!important}.er-custom-date-wrap input{width:100%;min-height:50px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,#f3ebe7);padding:12px 14px;font-size:14px;color:var(--text)}
.er-success-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:22px}.er-success-backdrop{position:absolute;inset:0;background:rgba(20,10,14,.42);backdrop-filter:blur(5px)}.er-success-dialog{position:relative;z-index:1;width:min(520px,100%);padding:28px 22px 22px;background:var(--surface-raised,#fff);border:1px solid var(--border,#eee);border-radius:26px;box-shadow:0 24px 70px rgba(45,10,20,.25);text-align:center;animation:erSuccessIn .22s ease both}.er-success-close{position:absolute;right:13px;top:11px;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface,#f7f1ee);color:var(--text);font-size:27px;line-height:1}.er-success-dialog .er-success-icon{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:#76b852;color:#fff;font-size:40px;font-weight:900;box-shadow:0 10px 24px rgba(65,145,45,.2)}.er-success-dialog h2{margin:0 0 10px!important;font-size:22px!important;color:var(--text)!important}.er-success-dialog .er-success-text{margin:0 auto 16px;max-width:420px;font-size:14px;line-height:1.65;color:var(--text-muted)}.er-success-dialog .er-success-id{margin:0 auto;padding:12px 14px;border:1px dashed var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 90%,#efe5df);display:flex;flex-direction:column;gap:4px}.er-success-dialog .er-success-id span{font-size:12px;color:var(--text-muted);font-weight:700}.er-success-dialog .er-success-id strong{font-family:var(--font-mono);font-size:18px;color:var(--accent-strong);letter-spacing:.4px}.er-success-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.er-success-actions .btn{width:auto!important;min-width:145px;padding:12px 18px!important;border-radius:999px!important}.er-success-open{overflow:hidden}@keyframes erSuccessIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.er-urgency-pill{min-height:112px;padding:12px 7px;flex-direction:column;gap:4px;border-radius:15px;background:var(--surface);font-size:12px}.er-urgency-pill i{font-size:24px;color:#e5003d;margin-bottom:3px}.er-urgency-pill strong{font-size:13px}.er-urgency-pill small{font-size:10px;color:var(--text-muted)}.er-urgency-pill:nth-child(2) i{color:#f4a400}.er-urgency-pill:nth-child(3) i{color:#28a9e2}.er-urgency-pill.active{border-color:#e4003c;background:#fff5f7;color:#c50032;box-shadow:0 6px 16px rgba(220,0,55,.09)}.er-textarea-field{position:relative;margin:0!important}.er-textarea-field textarea{min-height:118px!important;resize:vertical;padding-bottom:28px!important}.er-char-count{position:absolute;right:11px;bottom:9px;font-size:10px;color:var(--text-muted)}.er-important{margin:4px 0 14px;padding:15px 16px;border:1px solid #f3cbd4;border-radius:16px;background:linear-gradient(135deg,#fff8fa,#fff1f4);font-size:11.5px;color:var(--text)}.er-important strong{display:block;color:#c50032;margin-bottom:7px;font-size:13px}.er-important ul{margin:0;padding-left:18px;line-height:1.65}.er-consent-label{padding:2px 3px;margin:0 0 14px;font-size:12px}.er-submit-native{min-height:54px;border-radius:999px!important;background:linear-gradient(100deg,#ff3148,#e60039 55%,#c50032)!important;box-shadow:0 12px 26px rgba(222,0,53,.24)!important;font-size:16px!important;gap:10px;position:relative;overflow:hidden}.er-submit-native:after{content:"";position:absolute;top:-50%;left:-40%;width:25%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);animation:erButtonShine 3s ease-in-out infinite}.er-privacy-note{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0 4px;padding:13px;border:1px solid var(--border);border-radius:15px;background:var(--surface-raised);text-align:left}.er-privacy-note>i{color:#e00039;font-size:18px}.er-privacy-note div{display:flex;flex-direction:column}.er-privacy-note strong{font-size:11.5px}.er-privacy-note span{font-size:10px;color:var(--text-muted);margin-top:2px}@keyframes erHeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes erDropPulse{0%,100%{opacity:.25;transform:rotate(45deg) scale(.9)}50%{opacity:.6;transform:rotate(45deg) scale(1.12)}}@keyframes erCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes erButtonShine{0%,60%{left:-40%}85%,100%{left:125%}}@media(max-width:480px){.er-app-page{padding-bottom:18px}.er-app-topbar{margin-left:-12px;margin-right:-12px}.er-hero-card{grid-template-columns:102px 1fr;padding:16px 13px}.er-hero-art{width:75px;height:98px;font-size:40px}.er-hero-copy h2{font-size:19px!important}.er-location-grid{grid-template-columns:1fr}.er-location-grid .field{margin-bottom:10px}.er-blood-grid{gap:7px}.er-blood-option span{height:54px}.er-urgency-group{gap:7px}.er-urgency-pill{min-height:104px;padding:10px 5px}.er-native-card{padding:15px}}@media(prefers-reduced-motion:reduce){.er-hero-card,.er-native-card,.er-hero-art,.er-drop,.er-submit-native:after{animation:none!important}}

/* ======================================================================
   Dashboard Premium Compact v1.20 — presentation only.
   All numbers/content remain sourced from existing real backend/admin data.
   ====================================================================== */
.dbx-extra { gap: 2px; }
.dbx-extra .dbx-section {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(164, 38, 65, .09);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  box-shadow: 0 8px 24px rgba(83, 20, 34, .055);
}
.dbx-extra .dbx-head { margin-bottom: 10px; }
.dbx-extra .dbx-head h2 { font-size: 16.5px; font-weight: 800; }
.dbx-extra .db-see-all { font-size: 11.5px; font-weight: 700; color: var(--accent-strong); }

/* Statistics: compact 4-up with the fifth tile full-width, matching the approved concept. */
.dbx-extra .dbx-stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.dbx-extra .dbx-stat-tile { min-width: 0; padding: 10px 7px; gap: 5px; border-radius: 14px; box-shadow: none; }
.dbx-extra .dbx-stat-tile:nth-child(5) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.dbx-extra .dbx-stat-tile-icon { width: 31px; height: 31px; border-radius: 10px; font-size: 13px; }
.dbx-extra .dbx-stat-tile-value { font-size: 18px; }
.dbx-extra .dbx-stat-tile-label { font-size: 9.5px; line-height: 1.2; }
.dbx-extra .dbx-stat-tile:nth-child(5) .dbx-stat-tile-label { margin-left: 2px; }

/* Availability: clean 4x2 blood group matrix. */
.dbx-extra .dbx-stock-grid { gap: 8px; }
.dbx-extra .dbx-stock-chip { padding: 10px 5px; gap: 3px; border-radius: 13px; box-shadow: none; }
.dbx-extra .dbx-stock-group { font-size: 14px; }
.dbx-extra .dbx-stock-bags { font-size: 10px; padding: 2px 7px; }

/* Top donors: richer horizontal cards while preserving real leaderboard data. */
.dbx-extra .dbx-donor-tabs { margin: -2px 0 10px; gap: 5px; }
.dbx-extra .dbx-donor-tab { padding: 5px 11px; font-size: 10.5px; }
.dbx-extra .dbx-donors-row { gap: 9px; padding: 1px 1px 4px; }
.dbx-extra .dbx-donor-card {
  position: relative; width: 142px; min-height: 106px; align-items: flex-start;
  padding: 10px; gap: 4px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-raised); box-shadow: 0 5px 16px rgba(83,20,34,.05);
}
.dbx-extra .dbx-donor-avatar { width: 48px; height: 48px; }
.dbx-extra .dbx-donor-rank { width: 19px; height: 19px; font-size: 9px; }
.dbx-extra .dbx-donor-name { width: 100%; text-align: left; font-size: 12px; }
.dbx-extra .dbx-donor-group { position: absolute; top: 9px; right: 9px; }
.dbx-extra .dbx-donor-count { font-size: 10px; text-align: left; }

/* Recent donations: compact premium cards. */
.dbx-extra .dbx-recent-donations .dbx-head h2,
.dbx-extra .dbx-camp .dbx-head h2 { font-size: 16.5px; }
.dbx-extra .dbx-donation-slider { gap: 9px; padding-bottom: 6px; }
.dbx-extra .dbx-donation-slide { width: 150px; padding: 10px; border-radius: 15px; box-shadow: none; }
.dbx-extra .dbx-donation-slide-photo { width: 42px; height: 42px; }
.dbx-extra .dbx-donation-viewall { margin-top: 7px; padding: 9px 14px; font-size: 12px; }

/* Camp and notices: retain admin data, only improve visual hierarchy. */
.dbx-extra .dbx-camp-card { padding: 14px; border-radius: 17px; gap: 12px; }
.dbx-extra .dbx-camp-date { width: 54px; height: 54px; border-radius: 14px; }
.dbx-extra .dbx-camp-place { font-size: 12.5px; }
.dbx-extra .dbx-camp-time { font-size: 11px; }
.dbx-extra .dbx-camp-btn { padding: 7px 14px; font-size: 11.5px; }
.dbx-extra .dbx-notice-card { padding: 11px 12px; border-radius: 14px; box-shadow: none; }

@media (max-width: 380px) {
  .dbx-extra .dbx-section { padding: 12px; }
  .dbx-extra .dbx-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dbx-extra .dbx-stat-tile:nth-child(5) { grid-column: 1 / -1; }
  .dbx-extra .dbx-stock-grid { gap: 6px; }
}


/* v1.21.4 recent donation date/time typography fix */
.bdh-card-time { font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap !important; }
.db-page .dbx-donation-slide-time { font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; max-width: 100%; display: block; }