diff --git a/source/packages/com_mokosuitebackup/media/css/runbackup.css b/source/packages/com_mokosuitebackup/media/css/runbackup.css
index 54810052..217c99c9 100644
--- a/source/packages/com_mokosuitebackup/media/css/runbackup.css
+++ b/source/packages/com_mokosuitebackup/media/css/runbackup.css
@@ -28,10 +28,10 @@ body {
 }
 
 /* overflow:hidden clips the full-bleed bar to the card's rounded corners.
-   The card is a gray panel on the black backdrop. */
-.msb-runbackup > .card {
+   The card's gray background comes from a Bootstrap utility class on the
+   element itself (see the template), not a rule here. */
+.msb-runbackup .card {
 	overflow: hidden;
-	background-color: var(--bs-gray-400, #ced4da);
 }
 
 .msb-rb-progress {
diff --git a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
index 929d2cc9..b3c7c9ae 100644
--- a/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
+++ b/source/packages/com_mokosuitebackup/tmpl/runbackup/default.php
@@ -100,7 +100,7 @@ $this->getDocument()->getWebAssetManager()->useStyle('com_mokosuitebackup.runbac
 $this->getDocument()->addStyleSheet(Uri::root(true) . '/media/com_mokosuitebackup/css/runbackup.css');
 ?>
 <div class="msb-runbackup">
-	<div class="card shadow-sm">
+	<div class="card shadow-sm bg-body-secondary">
 		<div class="card-body p-4 pb-3">
 			<h1 class="h4 mb-1" id="msb-rb-title">
 				<span class="icon-archive" aria-hidden="true"></span>