diff --git a/src/joomla.asset.json b/src/joomla.asset.json
index f51468b..b22ffd7 100644
--- a/src/joomla.asset.json
+++ b/src/joomla.asset.json
@@ -34,6 +34,18 @@
 			"uri": "media/templates/site/mokocassiopeia/css/template.min.css",
 			"attributes": {"media": "all"}
 		},
+		{
+			"name": "template.offline",
+			"type": "style",
+			"uri": "media/templates/site/mokocassiopeia/css/offline.css",
+			"attributes": {"media": "all"}
+		},
+		{
+			"name": "template.offline.min",
+			"type": "style",
+			"uri": "media/templates/site/mokocassiopeia/css/offline.min.css",
+			"attributes": {"media": "all"}
+		},
 		{
 			"name": "template.user",
 			"type": "style",
diff --git a/src/offline.php b/src/offline.php
index b11b436..bc260f8 100644
--- a/src/offline.php
+++ b/src/offline.php
@@ -26,56 +26,57 @@ use Joomla\CMS\Uri\Uri;
 
 $app       = Factory::getApplication();
 $doc       = Factory::getDocument();
+$wa        = $doc->getWebAssetManager();
 $params    = $this->params ?: $app->getTemplate(true)->params;
 $direction = $this->direction ?: 'ltr';
 
 /* -----------------------
-   Load CSS + theme palettes
+   Load assets via WebAssetManager (matches index.php pattern)
 ------------------------ */
-$useMin      = !((int) $params->get('development_mode', 0) === 1);
-$assetSuffix = $useMin ? '.min' : '';
-$base        = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/css/';
-$jsBase      = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/js/';
+$params_developmentmode = (bool) $params->get('developmentmode', false) || (bool) $app->get('debug', false);
+$suffix = $params_developmentmode ? '' : '.min';
 
-$doc->addStyleSheet($base . 'template' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-template']);
-$doc->addStyleSheet($base . 'offline' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-offline']);
+// Core template CSS + offline overlay CSS
+$wa->useStyle('template.base' . $suffix);
+$wa->useStyle('template.offline' . $suffix);
 
-/* Load Osaka font for site title */
-$doc->addStyleSheet($base . 'fonts/osaka.css', ['version' => 'auto'], ['id' => 'moko-font-osaka']);
+// Osaka font
+$wa->useStyle('template.font.osaka');
 
-/* Load Font Awesome 7 Free (local) — Kit code not supported on offline page */
-$faBase = rtrim(Uri::root(true), '/') . '/templates/' . $this->template . '/vendor/fa7free/css/';
-$doc->addStyleSheet($faBase . 'all' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-fa7free']);
+// Font Awesome 7 Free
+$wa->useStyle('vendor.fa7free.all' . $suffix);
 
-/* Load theme palettes */
-$doc->addStyleSheet($base . 'theme/light.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-standard']);
-$doc->addStyleSheet($base . 'theme/dark.standard' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-standard']);
+// Theme palettes
+$wa->useStyle('template.light.standard' . $suffix);
+$wa->useStyle('template.dark.standard' . $suffix);
 
-/* Load custom palettes only if selected in template configuration AND files exist */
+// Custom palettes (if selected and files exist)
 $params_LightColorName = (string) $params->get('colorLightName', 'standard');
 $params_DarkColorName = (string) $params->get('colorDarkName', 'standard');
 if ($params_LightColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/light.custom.css'))
 {
-	$doc->addStyleSheet($base . 'theme/light.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-light-custom']);
+	$wa->useStyle('template.light.custom' . $suffix);
 }
 if ($params_DarkColorName === 'custom' && file_exists(JPATH_ROOT . '/media/templates/site/mokocassiopeia/css/theme/dark.custom.css'))
 {
-	$doc->addStyleSheet($base . 'theme/dark.custom' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-dark-custom']);
+	$wa->useStyle('template.dark.custom' . $suffix);
 }
 
-/* Load user assets last */
-$doc->addStyleSheet($base . 'user' . $assetSuffix . '.css', ['version' => 'auto'], ['id' => 'moko-user']);
+// User overrides (loaded last)
+$wa->useStyle('template.user');
 
-/* Bootstrap CSS/JS for accordion */
+// Template JS (theme switcher, var-copy, etc.)
+if ($params_developmentmode) {
+	$wa->useScript('template.js');
+} else {
+	$wa->useScript('template.js.min');
+}
+$wa->useScript('user.js');
+
+// Bootstrap (accordion)
 HTMLHelper::_('bootstrap.loadCss', true, $doc);
 HTMLHelper::_('bootstrap.framework');
 
-/* Load template.js for theme switcher */
-$doc->addScript($jsBase . 'template' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-template-js']);
-
-/* Load user.js last */
-$doc->addScript($jsBase . 'user' . $assetSuffix . '.js', ['version' => 'auto', 'defer' => true], ['id' => 'moko-user-js']);
-
 /* -----------------------
    Title + Meta
 ------------------------ */