web/settings: add "erase all settings" button

web/src/routes/+layout.svelte

@@ -60,8 +60,10 @@
 
         --white: #ffffff;
         --gray: #75757e;
-        --blue: #2f8af9;
+        --red: #f92f2f;
+        --dark-red: #df0707;
         --green: #51cf5e;
+        --blue: #2f8af9;
 
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
@@ -111,6 +113,13 @@
             rgba(0, 0, 0, 0) 96%,
             rgba(0, 0, 0, 0.9) 100%
         );
+
+        --skeleton-gradient: linear-gradient(
+            90deg,
+            var(--button),
+            var(--button-hover),
+            var(--button)
+        );
     }
 
     :global([data-theme="dark"]) {

web/src/routes/settings/advanced/+page.svelte

@@ -3,6 +3,7 @@
 
     import SettingsCategory from "$components/settings/SettingsCategory.svelte";
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import ResetSettingsButton from "$components/buttons/ResetSettingsButton.svelte";
 </script>
 
 <SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
@@ -13,3 +14,7 @@
         description={$t("settings.advanced.debug.description")}
     />
 </SettingsCategory>
+
+<SettingsCategory sectionId="settings" title={$t("tabs.settings")}>
+    <ResetSettingsButton />
+</SettingsCategory>