Add basic support for registering custom icons that override icons provided by the system/modules

styles/apps/StatusEffectIconConfig.css

@@ -0,0 +1,34 @@
+.oft.StatusEffectIconConfig {
+	.effect-list {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.effect {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: center;
+		margin: 0;
+
+		.preview {
+			--size: 30px;
+			width: var(--size);
+			height: var(--size);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		h2 {
+			margin: 0;
+			font-size: 1rem;
+			font-family: var(--font-body);
+			flex-grow: 1;
+		}
+	}
+}

styles/main.css

@@ -1,9 +1,12 @@
-@import url("./chatSidebarBackground.css");
-@import url("./hotbarButtonGap.css");
-@import url("./hotbarButtonSize.css");
-@import url("./repositionHotbar.css");
+@layer resets, elements, tweaks, apps;
 
-@import url("./apps.css");
+@import url("./chatSidebarBackground.css") layer(tweaks);
+@import url("./hotbarButtonGap.css") layer(tweaks);
+@import url("./hotbarButtonSize.css") layer(tweaks);
+@import url("./repositionHotbar.css") layer(tweaks);
+
+@import url("./apps/common.css") layer(apps);
+@import url("./apps/StatusEffectIconConfig.css") layer(apps);
 
 /* Make the chat sidebar the same width as all the other tabs */
 .chat-sidebar:not(.sidebar-popout) { width: var(--sidebar-width); }