@memberjunction/ng-explorer-core 5.48.0 → 5.49.0

package/dist/lib/profile/profile-dialog.component.js

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RunView } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
 import { UserInfoEngine } from '@memberjunction/core-entities';
 import { MJAuthBase } from '@memberjunction/ng-auth-services';
@@ -223,14 +224,59 @@ function ProfileDialogComponent_Conditional_61_For_2_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.SavingTheme === theme_r8.id ? 7 : theme_r8.id === ctx_r1.ThemePreference ? 8 : -1);
 } }
+function ProfileDialogComponent_Conditional_61_Conditional_3_For_3_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const c_r11 = ctx.$implicit;
+    i0.ɵɵstyleProp("background", c_r11);
+} }
+function ProfileDialogComponent_Conditional_61_Conditional_3_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 67);
+} }
+function ProfileDialogComponent_Conditional_61_Conditional_3_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 70);
+    i0.ɵɵlistener("click", function ProfileDialogComponent_Conditional_61_Conditional_3_For_3_Template_button_click_0_listener() { const t_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ApplyStarredTheme(t_r10)); });
+    i0.ɵɵelementStart(1, "div", 71);
+    i0.ɵɵrepeaterCreate(2, ProfileDialogComponent_Conditional_61_Conditional_3_For_3_For_3_Template, 1, 2, "i", 72, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 63)(5, "div", 64);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, ProfileDialogComponent_Conditional_61_Conditional_3_For_3_Conditional_7_Template, 1, 0, "i", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-profile__theme--active", ctx_r1.IsAppliedBrand(t_r10.id));
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(t_r10.swatches);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(t_r10.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsAppliedBrand(t_r10.id) ? 7 : -1);
+} }
+function ProfileDialogComponent_Conditional_61_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵtext(1, "Brand themes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, ProfileDialogComponent_Conditional_61_Conditional_3_For_3_Template, 8, 4, "button", 69, _forTrack2);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.StarredThemes);
+} }
 function ProfileDialogComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 43);
     i0.ɵɵrepeaterCreate(1, ProfileDialogComponent_Conditional_61_For_2_Template, 9, 12, "button", 60, _forTrack2);
+    i0.ɵɵconditionalCreate(3, ProfileDialogComponent_Conditional_61_Conditional_3_Template, 4, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.ThemeOptions);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.StarredThemes.length ? 3 : -1);
 } }
 /**
  * "Identity Card" profile dialog with slide-in detail panels for editing
@@ -269,6 +315,16 @@ export class ProfileDialogComponent extends BaseAngularComponent {
     ThemeOptions = [];
     ThemePreference = '';
     SavingTheme = null;
+    // Starred brand themes shown inline in the theme list
+    StarredThemes = [];
+    get AppliedBrandId() {
+        return this.themeService.BrandOverlayId;
+    }
+    /** Whether a theme id is the applied brand overlay (case-insensitive GUID compare). */
+    IsAppliedBrand(id) {
+        const active = this.themeService.BrandOverlayId;
+        return !!active && UUIDsEqual(id, active);
+    }
     get PanelTitle() {
         switch (this.ActivePanel) {
             case 'photo': return 'Profile photo';
@@ -309,6 +365,9 @@ export class ProfileDialogComponent extends BaseAngularComponent {
     }
     OpenPanel(panel) {
         this.ActivePanel = panel;
+        if (panel === 'theme') {
+            this.loadStarredThemes();
+        }
     }
     ClosePanel() {
         this.ActivePanel = 'none';
@@ -343,6 +402,64 @@ export class ProfileDialogComponent extends BaseAngularComponent {
             this.cdr.markForCheck();
         }
     }
+    // ========================================
+    // Starred brand themes
+    // ========================================
+    /** Load the user's starred brand themes to show inline in the theme list. */
+    async loadStarredThemes() {
+        this.StarredThemes = [];
+        try {
+            const ids = this.themeService.GetStarredThemeIds();
+            if (ids.length) {
+                const idList = ids.map((id) => `'${id.replace(/'/g, "''")}'`).join(', ');
+                const rv = new RunView();
+                const result = await rv.RunView({
+                    EntityName: 'MJ: Themes',
+                    ExtraFilter: `ID IN (${idList}) AND Status = 'Active'`,
+                    OrderBy: 'Name',
+                    ResultType: 'entity_object',
+                });
+                if (result.Success) {
+                    this.StarredThemes = result.Results.map((t) => ({
+                        id: t.ID,
+                        name: t.Name,
+                        seeds: t.Seeds,
+                        swatches: this.swatchesFor(t.Seeds),
+                        overrides: t.Overrides,
+                        customCss: t.CustomCSS,
+                    }));
+                }
+            }
+        }
+        catch {
+            /* non-fatal: the list just stays light/dark/system */
+        }
+        this.cdr.markForCheck();
+    }
+    /** Apply a starred brand theme to the running app and persist it as the user's choice. */
+    async ApplyStarredTheme(t) {
+        try {
+            this.themeService.RegisterBrandTheme({ id: t.id, name: t.name, seeds: t.seeds, overrides: t.overrides, customCss: t.customCss });
+            await this.themeService.ApplyBrandOverlay(t.id);
+            await this.themeService.SetSelectedBrandTheme(t.id);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : 'Unknown error';
+            this.sharedService.CreateSimpleNotification(`Could not apply theme: ${msg}`, 'error', 3000);
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    swatchesFor(seedsJson) {
+        try {
+            const s = JSON.parse(seedsJson);
+            return [s.primary, s.accent ?? s.primary, s.tertiary ?? s.accent ?? s.primary];
+        }
+        catch {
+            return ['#0076b6', '#38a9d9', '#8b5cf6'];
+        }
+    }
     /**
      * Per-user omnibar opt-in/out. Persists via UserInfoEngine (MJ: User
      * Settings) so the choice follows the user across browsers/devices. The
@@ -528,7 +645,7 @@ export class ProfileDialogComponent extends BaseAngularComponent {
         return preference === 'system' ? `${themeName} · System` : themeName;
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵProfileDialogComponent_BaseFactory; return function ProfileDialogComponent_Factory(__ngFactoryType__) { return (ɵProfileDialogComponent_BaseFactory || (ɵProfileDialogComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ProfileDialogComponent)))(__ngFactoryType__ || ProfileDialogComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileDialogComponent, selectors: [["mj-profile-dialog"]], inputs: { AvatarUrl: "AvatarUrl", AvatarIconClass: "AvatarIconClass" }, outputs: { CloseRequested: "CloseRequested" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 62, vars: 17, consts: [["role", "document", 1, "mj-profile"], ["type", "button", "aria-label", "Close", 1, "mj-profile__close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-profile__main"], [1, "mj-profile__hero"], [1, "mj-profile__hero-title"], [1, "mj-profile__avatar-zone"], ["alt", "", 1, "mj-profile__avatar", "mj-profile__avatar--img", 3, "src"], [1, "mj-profile__avatar", "mj-profile__avatar--icon"], [1, "mj-profile__avatar"], ["type", "button", "title", "Change photo", 1, "mj-profile__avatar-edit", 3, "click"], [1, "fa-solid", "fa-camera"], [1, "mj-profile__identity"], [1, "mj-profile__name"], [1, "mj-profile__email"], [1, "mj-profile__chips"], [1, "mj-profile__field-list"], [1, "mj-profile__field"], [1, "mj-profile__field-icon"], [1, "fa-solid", "fa-id-badge"], [1, "mj-profile__field-body"], [1, "mj-profile__field-label"], [1, "mj-profile__field-value"], [1, "mj-profile__field-muted"], ["type", "button", 1, "mj-profile__field", "mj-profile__field--button", 3, "click"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-chevron-right", "mj-profile__field-chev"], [1, "mj-profile__section"], [1, "mj-profile__section-head"], [1, "mj-profile__unread"], [1, "mj-profile__channels-loading"], [1, "mj-profile__channels"], [1, "mj-profile__footer"], ["type", "button", 1, "mj-profile__btn", "mj-profile__btn--danger", 3, "click"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "mj-profile__spacer"], ["type", "button", 1, "mj-profile__btn", "mj-profile__btn--primary", 3, "click"], [1, "mj-profile__panel"], [1, "mj-profile__panel-header"], ["type", "button", "aria-label", "Back", 1, "mj-profile__panel-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "mj-profile__panel-title"], [1, "mj-profile__panel-body"], [1, "mj-profile__themes"], ["alt", "", 1, "mj-profile__avatar", "mj-profile__avatar--img", 3, "error", "src"], [1, "mj-profile__chip", 3, "class"], [1, "mj-profile__chip"], [3, "class"], ["type", "button", "data-testid", "omnibar-toggle", 1, "mj-profile__channel", 3, "click", "disabled"], [1, "mj-profile__channel-icon"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mj-profile__channel-label"], [1, "mj-profile__channel-hint"], [1, "mj-profile__channel-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "mj-profile__switch", 3, "mj-profile__switch--on"], [1, "mj-profile__switch"], [1, "mj-profile__switch-knob"], ["type", "button", 1, "mj-profile__channel", 3, "mj-profile__channel--on", "disabled"], ["type", "button", 1, "mj-profile__channel", 3, "click", "disabled"], ["type", "button", 1, "mj-profile__theme", 3, "mj-profile__theme--active", "mj-profile__theme--saving", "disabled"], ["type", "button", 1, "mj-profile__theme", 3, "click", "disabled"], [1, "mj-profile__theme-swatch"], [1, "mj-profile__theme-info"], [1, "mj-profile__theme-name"], [1, "mj-profile__theme-desc"], [1, "fa-solid", "fa-spinner", "fa-spin", "mj-profile__theme-check"], [1, "fa-solid", "fa-check", "mj-profile__theme-check"]], template: function ProfileDialogComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProfileDialogComponent, selectors: [["mj-profile-dialog"]], inputs: { AvatarUrl: "AvatarUrl", AvatarIconClass: "AvatarIconClass" }, outputs: { CloseRequested: "CloseRequested" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 62, vars: 17, consts: [["role", "document", 1, "mj-profile"], ["type", "button", "aria-label", "Close", 1, "mj-profile__close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-profile__main"], [1, "mj-profile__hero"], [1, "mj-profile__hero-title"], [1, "mj-profile__avatar-zone"], ["alt", "", 1, "mj-profile__avatar", "mj-profile__avatar--img", 3, "src"], [1, "mj-profile__avatar", "mj-profile__avatar--icon"], [1, "mj-profile__avatar"], ["type", "button", "title", "Change photo", 1, "mj-profile__avatar-edit", 3, "click"], [1, "fa-solid", "fa-camera"], [1, "mj-profile__identity"], [1, "mj-profile__name"], [1, "mj-profile__email"], [1, "mj-profile__chips"], [1, "mj-profile__field-list"], [1, "mj-profile__field"], [1, "mj-profile__field-icon"], [1, "fa-solid", "fa-id-badge"], [1, "mj-profile__field-body"], [1, "mj-profile__field-label"], [1, "mj-profile__field-value"], [1, "mj-profile__field-muted"], ["type", "button", 1, "mj-profile__field", "mj-profile__field--button", 3, "click"], [1, "fa-solid", "fa-palette"], [1, "fa-solid", "fa-chevron-right", "mj-profile__field-chev"], [1, "mj-profile__section"], [1, "mj-profile__section-head"], [1, "mj-profile__unread"], [1, "mj-profile__channels-loading"], [1, "mj-profile__channels"], [1, "mj-profile__footer"], ["type", "button", 1, "mj-profile__btn", "mj-profile__btn--danger", 3, "click"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "mj-profile__spacer"], ["type", "button", 1, "mj-profile__btn", "mj-profile__btn--primary", 3, "click"], [1, "mj-profile__panel"], [1, "mj-profile__panel-header"], ["type", "button", "aria-label", "Back", 1, "mj-profile__panel-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "mj-profile__panel-title"], [1, "mj-profile__panel-body"], [1, "mj-profile__themes"], ["alt", "", 1, "mj-profile__avatar", "mj-profile__avatar--img", 3, "error", "src"], [1, "mj-profile__chip", 3, "class"], [1, "mj-profile__chip"], [3, "class"], ["type", "button", "data-testid", "omnibar-toggle", 1, "mj-profile__channel", 3, "click", "disabled"], [1, "mj-profile__channel-icon"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mj-profile__channel-label"], [1, "mj-profile__channel-hint"], [1, "mj-profile__channel-state"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "mj-profile__switch", 3, "mj-profile__switch--on"], [1, "mj-profile__switch"], [1, "mj-profile__switch-knob"], ["type", "button", 1, "mj-profile__channel", 3, "mj-profile__channel--on", "disabled"], ["type", "button", 1, "mj-profile__channel", 3, "click", "disabled"], ["type", "button", 1, "mj-profile__theme", 3, "mj-profile__theme--active", "mj-profile__theme--saving", "disabled"], ["type", "button", 1, "mj-profile__theme", 3, "click", "disabled"], [1, "mj-profile__theme-swatch"], [1, "mj-profile__theme-info"], [1, "mj-profile__theme-name"], [1, "mj-profile__theme-desc"], [1, "fa-solid", "fa-spinner", "fa-spin", "mj-profile__theme-check"], [1, "fa-solid", "fa-check", "mj-profile__theme-check"], [1, "mj-profile__theme-sep"], ["type", "button", 1, "mj-profile__theme", 3, "mj-profile__theme--active"], ["type", "button", 1, "mj-profile__theme", 3, "click"], [1, "mj-profile__theme-swatch", "mj-profile__brand-swatch"], [3, "background"]], template: function ProfileDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵlistener("click", function ProfileDialogComponent_Template_button_click_1_listener() { return ctx.OnCloseClick(); });
             i0.ɵɵelement(2, "i", 2);
@@ -599,7 +716,7 @@ export class ProfileDialogComponent extends BaseAngularComponent {
             i0.ɵɵtext(58);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(59, "div", 42);
-            i0.ɵɵconditionalCreate(60, ProfileDialogComponent_Conditional_60_Template, 1, 0, "mj-user-profile-settings")(61, ProfileDialogComponent_Conditional_61_Template, 3, 0, "div", 43);
+            i0.ɵɵconditionalCreate(60, ProfileDialogComponent_Conditional_60_Template, 1, 0, "mj-user-profile-settings")(61, ProfileDialogComponent_Conditional_61_Template, 4, 1, "div", 43);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("mj-profile--panel-open", ctx.ActivePanel !== "none");
@@ -629,7 +746,7 @@ export class ProfileDialogComponent extends BaseAngularComponent {
             i0.ɵɵtextInterpolate(ctx.PanelTitle);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.ActivePanel === "photo" ? 60 : ctx.ActivePanel === "theme" ? 61 : -1);
-        } }, dependencies: [CommonModule, ExplorerSettingsModule, i1.UserProfileSettingsComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n.mj-profile[_ngcontent-%COMP%] {\n    display: block;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    height: 100%;\n    min-height: 0;\n    position: relative;\n    font-family: inherit;\n    overflow: hidden;\n}\n.mj-profile__close[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px; right: 12px;\n    width: 36px; height: 36px;\n    border: none; border-radius: 8px;\n    background: rgba(255, 255, 255, 0.18);\n    backdrop-filter: blur(8px);\n    color: #fff;\n    cursor: pointer;\n    font-size: 16px;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.15s, opacity 0.2s;\n    z-index: 4;\n}\n.mj-profile__close[_ngcontent-%COMP%]:hover { background: rgba(255, 255, 255, 0.3); }\n.mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__close[_ngcontent-%COMP%] { opacity: 0; pointer-events: none; }\n\n\n\n.mj-profile__main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__main[_ngcontent-%COMP%] {\n    transform: translateX(-12%);\n    pointer-events: none;\n}\n\n.mj-profile__hero[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    padding: 22px 24px 56px;\n    position: relative;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.mj-profile__hero[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    inset: -50%;\n    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);\n    animation: _ngcontent-%COMP%_mj-profile-rotate 24s linear infinite;\n    pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n    .mj-profile__hero[_ngcontent-%COMP%]::before { animation: none; }\n}\n@keyframes _ngcontent-%COMP%_mj-profile-rotate { to { transform: rotate(360deg); } }\n\n.mj-profile__hero-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    opacity: 0.85;\n    position: relative;\n    z-index: 1;\n}\n\n.mj-profile__avatar-zone[_ngcontent-%COMP%] {\n    position: relative;\n    width: 96px;\n    height: 96px;\n    margin: -48px auto 12px;\n    z-index: 2;\n}\n.mj-profile__avatar[_ngcontent-%COMP%] {\n    width: 96px;\n    height: 96px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 32px;\n    font-weight: 700;\n    border: 4px solid var(--mj-bg-surface);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);\n    object-fit: cover;\n    overflow: hidden;\n}\nimg.mj-profile__avatar[_ngcontent-%COMP%] { background: var(--mj-bg-surface-card); }\n.mj-profile__avatar--icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 36px; }\n\n.mj-profile__avatar-edit[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 2px; right: 2px;\n    width: 30px; height: 30px;\n    border-radius: 50%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n    transition: transform 0.15s;\n}\n.mj-profile__avatar-edit[_ngcontent-%COMP%]:hover { transform: scale(1.1); }\n\n.mj-profile__identity[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 0 24px 16px;\n    flex-shrink: 0;\n}\n.mj-profile__name[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    font-size: 22px;\n    font-weight: 700;\n    letter-spacing: -0.4px;\n    color: var(--mj-text-primary);\n}\n.mj-profile__email[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    word-break: break-all;\n}\n.mj-profile__chips[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n.mj-profile__chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__chip--admin[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, #f59e0b 14%, transparent);\n    color: #b45309;\n}\n.mj-profile__chip--dev[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, #10b981 14%, transparent);\n    color: #047857;\n}\n\n.mj-profile__field-list[_ngcontent-%COMP%] {\n    padding: 0 24px;\n    flex-shrink: 0;\n}\n.mj-profile__field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 0;\n    gap: 14px;\n    border-top: 1px solid var(--mj-border-subtle);\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n    font-family: inherit;\n    color: inherit;\n}\n.mj-profile__field[_ngcontent-%COMP%]:first-child { border-top: none; }\n.mj-profile__field--button[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.12s;\n    margin: 0 -8px;\n    padding-left: 8px;\n    padding-right: 8px;\n    border-radius: 8px;\n    border-top: none;\n}\n.mj-profile__field--button[_ngcontent-%COMP%]    + .mj-profile__field--button[_ngcontent-%COMP%] { margin-top: 0; }\n.mj-profile__field--button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.mj-profile__field--button[_ngcontent-%COMP%]:hover   .mj-profile__field-chev[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.mj-profile__field-icon[_ngcontent-%COMP%] {\n    width: 32px; height: 32px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n.mj-profile__field-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-profile__field-label[_ngcontent-%COMP%] {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n}\n.mj-profile__field-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__field-muted[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.mj-profile__field-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    transition: color 0.15s;\n}\n\n.mj-profile__section[_ngcontent-%COMP%] {\n    padding: 16px 24px 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n.mj-profile__section-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n.mj-profile__section-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n}\n.mj-profile__unread[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 100px;\n}\n.mj-profile__channels-loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n    padding: 12px;\n    text-align: center;\n}\n.mj-profile__channels[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__channel[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    font-family: inherit;\n    text-align: left;\n    width: 100%;\n}\n.mj-profile__channel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__channel[_ngcontent-%COMP%]:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__channel-icon[_ngcontent-%COMP%] {\n    width: 32px; height: 32px;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n    transition: all 0.15s;\n}\n.mj-profile__channel--on[_ngcontent-%COMP%]   .mj-profile__channel-icon[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__channel-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.mj-profile__channel-hint[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-profile__channel-state[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    min-width: 36px;\n    display: flex; justify-content: flex-end; align-items: center;\n}\n\n.mj-profile__switch[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 20px;\n    background: var(--mj-border-strong);\n    border-radius: 100px;\n    position: relative;\n    transition: background 0.2s;\n    display: inline-block;\n}\n.mj-profile__switch-knob[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 2px; left: 2px;\n    width: 16px; height: 16px;\n    background: white;\n    border-radius: 50%;\n    transition: transform 0.2s;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.mj-profile__switch--on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mj-profile__switch--on[_ngcontent-%COMP%]   .mj-profile__switch-knob[_ngcontent-%COMP%] { transform: translateX(16px); }\n\n.mj-profile__footer[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-subtle);\n    padding: 14px 20px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n.mj-profile__spacer[_ngcontent-%COMP%] { flex: 1; }\n.mj-profile__btn[_ngcontent-%COMP%] {\n    padding: 9px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.mj-profile__btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mj-profile__btn--primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n.mj-profile__btn--primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.mj-profile__btn--danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n.mj-profile__btn--danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    border-color: var(--mj-status-error);\n}\n\n\n\n.mj-profile__panel[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    background: var(--mj-bg-surface);\n    transform: translateX(100%);\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n    display: flex;\n    flex-direction: column;\n    z-index: 3;\n}\n.mj-profile__panel--open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);\n}\n.mj-profile__panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 18px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.mj-profile__panel-back[_ngcontent-%COMP%] {\n    width: 34px; height: 34px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    transition: all 0.15s;\n    font-family: inherit;\n}\n.mj-profile__panel-back[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__panel-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-profile__panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px 20px;\n}\n\n\n\n.mj-profile__themes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__theme[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 12px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    text-align: left;\n    width: 100%;\n    font-family: inherit;\n}\n.mj-profile__theme[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__theme[_ngcontent-%COMP%]:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__theme--active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card));\n}\n.mj-profile__theme-swatch[_ngcontent-%COMP%] {\n    width: 40px; height: 40px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n    border: 1px solid var(--mj-border-default);\n}\n.mj-profile__theme-swatch--light[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);\n    color: #f59e0b;\n}\n.mj-profile__theme-swatch--dark[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\n    color: #94a3b8;\n    border-color: #334155;\n}\n.mj-profile__theme-swatch--system[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #1e293b 51%, #0f172a 100%);\n    color: var(--mj-text-secondary);\n}\n.mj-profile__theme-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-profile__theme-name[_ngcontent-%COMP%] {\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-profile__theme-desc[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__theme-check[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n@media (max-width: 480px) {\n    .mj-profile__hero[_ngcontent-%COMP%] { padding: 20px 18px 48px; }\n    .mj-profile__avatar-zone[_ngcontent-%COMP%] { width: 88px; height: 88px; margin-top: -44px; }\n    .mj-profile__avatar[_ngcontent-%COMP%] { width: 88px; height: 88px; font-size: 28px; }\n    .mj-profile__name[_ngcontent-%COMP%] { font-size: 19px; }\n    .mj-profile__field-list[_ngcontent-%COMP%], \n   .mj-profile__section[_ngcontent-%COMP%] { padding-left: 18px; padding-right: 18px; }\n    .mj-profile__footer[_ngcontent-%COMP%] { padding: 12px 16px; }\n    .mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__main[_ngcontent-%COMP%] { transform: translateX(-20%); }\n    .mj-profile__panel-body[_ngcontent-%COMP%] { padding: 14px 16px 16px; }\n}"] });
+        } }, dependencies: [CommonModule, ExplorerSettingsModule, i1.UserProfileSettingsComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n.mj-profile[_ngcontent-%COMP%] {\n    display: block;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    height: 100%;\n    min-height: 0;\n    position: relative;\n    font-family: inherit;\n    overflow: hidden;\n}\n.mj-profile__close[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px; right: 12px;\n    width: 36px; height: 36px;\n    border: none; border-radius: 8px;\n    background: rgba(255, 255, 255, 0.18);\n    backdrop-filter: blur(8px);\n    color: #fff;\n    cursor: pointer;\n    font-size: 16px;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.15s, opacity 0.2s;\n    z-index: 4;\n}\n.mj-profile__close[_ngcontent-%COMP%]:hover { background: rgba(255, 255, 255, 0.3); }\n.mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__close[_ngcontent-%COMP%] { opacity: 0; pointer-events: none; }\n\n\n\n.mj-profile__main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__main[_ngcontent-%COMP%] {\n    transform: translateX(-12%);\n    pointer-events: none;\n}\n\n.mj-profile__hero[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    padding: 22px 24px 56px;\n    position: relative;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.mj-profile__hero[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    inset: -50%;\n    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);\n    animation: _ngcontent-%COMP%_mj-profile-rotate 24s linear infinite;\n    pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n    .mj-profile__hero[_ngcontent-%COMP%]::before { animation: none; }\n}\n@keyframes _ngcontent-%COMP%_mj-profile-rotate { to { transform: rotate(360deg); } }\n\n.mj-profile__hero-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    opacity: 0.85;\n    position: relative;\n    z-index: 1;\n}\n\n.mj-profile__avatar-zone[_ngcontent-%COMP%] {\n    position: relative;\n    width: 96px;\n    height: 96px;\n    margin: -48px auto 12px;\n    z-index: 2;\n}\n.mj-profile__avatar[_ngcontent-%COMP%] {\n    width: 96px;\n    height: 96px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 32px;\n    font-weight: 700;\n    border: 4px solid var(--mj-bg-surface);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);\n    object-fit: cover;\n    overflow: hidden;\n}\nimg.mj-profile__avatar[_ngcontent-%COMP%] { background: var(--mj-bg-surface-card); }\n.mj-profile__avatar--icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 36px; }\n\n.mj-profile__avatar-edit[_ngcontent-%COMP%] {\n    position: absolute;\n    bottom: 2px; right: 2px;\n    width: 30px; height: 30px;\n    border-radius: 50%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n    transition: transform 0.15s;\n}\n.mj-profile__avatar-edit[_ngcontent-%COMP%]:hover { transform: scale(1.1); }\n\n.mj-profile__identity[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 0 24px 16px;\n    flex-shrink: 0;\n}\n.mj-profile__name[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    font-size: 22px;\n    font-weight: 700;\n    letter-spacing: -0.4px;\n    color: var(--mj-text-primary);\n}\n.mj-profile__email[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    word-break: break-all;\n}\n.mj-profile__chips[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n.mj-profile__chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__chip--admin[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, #f59e0b 14%, transparent);\n    color: #b45309;\n}\n.mj-profile__chip--dev[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, #10b981 14%, transparent);\n    color: #047857;\n}\n\n.mj-profile__field-list[_ngcontent-%COMP%] {\n    padding: 0 24px;\n    flex-shrink: 0;\n}\n.mj-profile__field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 0;\n    gap: 14px;\n    border-top: 1px solid var(--mj-border-subtle);\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n    font-family: inherit;\n    color: inherit;\n}\n.mj-profile__field[_ngcontent-%COMP%]:first-child { border-top: none; }\n.mj-profile__field--button[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: background 0.12s;\n    margin: 0 -8px;\n    padding-left: 8px;\n    padding-right: 8px;\n    border-radius: 8px;\n    border-top: none;\n}\n.mj-profile__field--button[_ngcontent-%COMP%]    + .mj-profile__field--button[_ngcontent-%COMP%] { margin-top: 0; }\n.mj-profile__field--button[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.mj-profile__field--button[_ngcontent-%COMP%]:hover   .mj-profile__field-chev[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.mj-profile__field-icon[_ngcontent-%COMP%] {\n    width: 32px; height: 32px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n.mj-profile__field-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-profile__field-label[_ngcontent-%COMP%] {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n}\n.mj-profile__field-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__field-muted[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n.mj-profile__field-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    transition: color 0.15s;\n}\n\n.mj-profile__section[_ngcontent-%COMP%] {\n    padding: 16px 24px 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n.mj-profile__section-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n.mj-profile__section-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n}\n.mj-profile__unread[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 100px;\n}\n.mj-profile__channels-loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n    padding: 12px;\n    text-align: center;\n}\n.mj-profile__channels[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__channel[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    font-family: inherit;\n    text-align: left;\n    width: 100%;\n}\n.mj-profile__channel[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__channel[_ngcontent-%COMP%]:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__channel-icon[_ngcontent-%COMP%] {\n    width: 32px; height: 32px;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n    transition: all 0.15s;\n}\n.mj-profile__channel--on[_ngcontent-%COMP%]   .mj-profile__channel-icon[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__channel-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.mj-profile__channel-hint[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-profile__channel-state[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    min-width: 36px;\n    display: flex; justify-content: flex-end; align-items: center;\n}\n\n.mj-profile__switch[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 20px;\n    background: var(--mj-border-strong);\n    border-radius: 100px;\n    position: relative;\n    transition: background 0.2s;\n    display: inline-block;\n}\n.mj-profile__switch-knob[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 2px; left: 2px;\n    width: 16px; height: 16px;\n    background: white;\n    border-radius: 50%;\n    transition: transform 0.2s;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.mj-profile__switch--on[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n.mj-profile__switch--on[_ngcontent-%COMP%]   .mj-profile__switch-knob[_ngcontent-%COMP%] { transform: translateX(16px); }\n\n.mj-profile__footer[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-subtle);\n    padding: 14px 20px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n.mj-profile__spacer[_ngcontent-%COMP%] { flex: 1; }\n.mj-profile__btn[_ngcontent-%COMP%] {\n    padding: 9px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.mj-profile__btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mj-profile__btn--primary[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n.mj-profile__btn--primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.mj-profile__btn--danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n.mj-profile__btn--danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    border-color: var(--mj-status-error);\n}\n\n\n\n.mj-profile__panel[_ngcontent-%COMP%] {\n    position: absolute;\n    inset: 0;\n    background: var(--mj-bg-surface);\n    transform: translateX(100%);\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n    display: flex;\n    flex-direction: column;\n    z-index: 3;\n}\n.mj-profile__panel--open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);\n}\n.mj-profile__panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 18px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.mj-profile__panel-back[_ngcontent-%COMP%] {\n    width: 34px; height: 34px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    transition: all 0.15s;\n    font-family: inherit;\n}\n.mj-profile__panel-back[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__panel-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-profile__panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px 20px;\n}\n\n\n\n.mj-profile__themes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__theme[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 12px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    text-align: left;\n    width: 100%;\n    font-family: inherit;\n}\n.mj-profile__theme[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__theme[_ngcontent-%COMP%]:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__theme--active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card));\n}\n.mj-profile__theme-swatch[_ngcontent-%COMP%] {\n    width: 40px; height: 40px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n    border: 1px solid var(--mj-border-default);\n}\n.mj-profile__theme-swatch--light[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);\n    color: #f59e0b;\n}\n.mj-profile__theme-swatch--dark[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\n    color: #94a3b8;\n    border-color: #334155;\n}\n.mj-profile__theme-swatch--system[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #1e293b 51%, #0f172a 100%);\n    color: var(--mj-text-secondary);\n}\n.mj-profile__theme-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.mj-profile__theme-name[_ngcontent-%COMP%] {\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-profile__theme-desc[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__theme-check[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n\n\n.mj-profile__theme-sep[_ngcontent-%COMP%] {\n    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;\n    color: var(--mj-text-muted); padding: 6px 4px 2px; margin-top: 6px;\n}\n.mj-profile__brand-swatch[_ngcontent-%COMP%] {\n    display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;\n}\n.mj-profile__brand-swatch[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 33%; height: 100%; display: block;\n}\n\n@media (max-width: 480px) {\n    .mj-profile__hero[_ngcontent-%COMP%] { padding: 20px 18px 48px; }\n    .mj-profile__avatar-zone[_ngcontent-%COMP%] { width: 88px; height: 88px; margin-top: -44px; }\n    .mj-profile__avatar[_ngcontent-%COMP%] { width: 88px; height: 88px; font-size: 28px; }\n    .mj-profile__name[_ngcontent-%COMP%] { font-size: 19px; }\n    .mj-profile__field-list[_ngcontent-%COMP%], \n   .mj-profile__section[_ngcontent-%COMP%] { padding-left: 18px; padding-right: 18px; }\n    .mj-profile__footer[_ngcontent-%COMP%] { padding: 12px 16px; }\n    .mj-profile--panel-open[_ngcontent-%COMP%]   .mj-profile__main[_ngcontent-%COMP%] { transform: translateX(-20%); }\n    .mj-profile__panel-body[_ngcontent-%COMP%] { padding: 14px 16px 16px; }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProfileDialogComponent, [{
         type: Component,
@@ -816,12 +933,31 @@ export class ProfileDialogComponent extends BaseAngularComponent {
                             }
                         </button>
                     }
+                    @if (StarredThemes.length) {
+                        <div class="mj-profile__theme-sep">Brand themes</div>
+                        @for (t of StarredThemes; track t.id) {
+                            <button type="button"
+                                    class="mj-profile__theme"
+                                    [class.mj-profile__theme--active]="IsAppliedBrand(t.id)"
+                                    (click)="ApplyStarredTheme(t)">
+                                <div class="mj-profile__theme-swatch mj-profile__brand-swatch">
+                                    @for (c of t.swatches; track $index) { <i [style.background]="c"></i> }
+                                </div>
+                                <div class="mj-profile__theme-info">
+                                    <div class="mj-profile__theme-name">{{ t.name }}</div>
+                                </div>
+                                @if (IsAppliedBrand(t.id)) {
+                                    <i class="fa-solid fa-check mj-profile__theme-check"></i>
+                                }
+                            </button>
+                        }
+                    }
                 </div>
             }
         </div>
     </div>
 </div>
-    `, styles: ["\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n.mj-profile {\n    display: block;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    height: 100%;\n    min-height: 0;\n    position: relative;\n    font-family: inherit;\n    overflow: hidden;\n}\n.mj-profile__close {\n    position: absolute;\n    top: 12px; right: 12px;\n    width: 36px; height: 36px;\n    border: none; border-radius: 8px;\n    background: rgba(255, 255, 255, 0.18);\n    backdrop-filter: blur(8px);\n    color: #fff;\n    cursor: pointer;\n    font-size: 16px;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.15s, opacity 0.2s;\n    z-index: 4;\n}\n.mj-profile__close:hover { background: rgba(255, 255, 255, 0.3); }\n.mj-profile--panel-open .mj-profile__close { opacity: 0; pointer-events: none; }\n\n/* ============ MAIN VIEW ============ */\n.mj-profile__main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mj-profile--panel-open .mj-profile__main {\n    transform: translateX(-12%);\n    pointer-events: none;\n}\n\n.mj-profile__hero {\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    padding: 22px 24px 56px;\n    position: relative;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.mj-profile__hero::before {\n    content: '';\n    position: absolute;\n    inset: -50%;\n    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);\n    animation: mj-profile-rotate 24s linear infinite;\n    pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n    .mj-profile__hero::before { animation: none; }\n}\n@keyframes mj-profile-rotate { to { transform: rotate(360deg); } }\n\n.mj-profile__hero-title {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    opacity: 0.85;\n    position: relative;\n    z-index: 1;\n}\n\n.mj-profile__avatar-zone {\n    position: relative;\n    width: 96px;\n    height: 96px;\n    margin: -48px auto 12px;\n    z-index: 2;\n}\n.mj-profile__avatar {\n    width: 96px;\n    height: 96px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 32px;\n    font-weight: 700;\n    border: 4px solid var(--mj-bg-surface);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);\n    object-fit: cover;\n    overflow: hidden;\n}\nimg.mj-profile__avatar { background: var(--mj-bg-surface-card); }\n.mj-profile__avatar--icon i { font-size: 36px; }\n\n.mj-profile__avatar-edit {\n    position: absolute;\n    bottom: 2px; right: 2px;\n    width: 30px; height: 30px;\n    border-radius: 50%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n    transition: transform 0.15s;\n}\n.mj-profile__avatar-edit:hover { transform: scale(1.1); }\n\n.mj-profile__identity {\n    text-align: center;\n    padding: 0 24px 16px;\n    flex-shrink: 0;\n}\n.mj-profile__name {\n    margin: 0 0 4px;\n    font-size: 22px;\n    font-weight: 700;\n    letter-spacing: -0.4px;\n    color: var(--mj-text-primary);\n}\n.mj-profile__email {\n    margin: 0 0 12px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    word-break: break-all;\n}\n.mj-profile__chips {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n.mj-profile__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__chip--admin {\n    background: color-mix(in srgb, #f59e0b 14%, transparent);\n    color: #b45309;\n}\n.mj-profile__chip--dev {\n    background: color-mix(in srgb, #10b981 14%, transparent);\n    color: #047857;\n}\n\n.mj-profile__field-list {\n    padding: 0 24px;\n    flex-shrink: 0;\n}\n.mj-profile__field {\n    display: flex;\n    align-items: center;\n    padding: 12px 0;\n    gap: 14px;\n    border-top: 1px solid var(--mj-border-subtle);\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n    font-family: inherit;\n    color: inherit;\n}\n.mj-profile__field:first-child { border-top: none; }\n.mj-profile__field--button {\n    cursor: pointer;\n    transition: background 0.12s;\n    margin: 0 -8px;\n    padding-left: 8px;\n    padding-right: 8px;\n    border-radius: 8px;\n    border-top: none;\n}\n.mj-profile__field--button + .mj-profile__field--button { margin-top: 0; }\n.mj-profile__field--button:hover { background: var(--mj-bg-surface-hover); }\n.mj-profile__field--button:hover .mj-profile__field-chev { color: var(--mj-brand-primary); }\n.mj-profile__field-icon {\n    width: 32px; height: 32px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n.mj-profile__field-body { flex: 1; min-width: 0; }\n.mj-profile__field-label {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n}\n.mj-profile__field-value {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__field-muted { color: var(--mj-text-muted); }\n.mj-profile__field-chev {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    transition: color 0.15s;\n}\n\n.mj-profile__section {\n    padding: 16px 24px 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n.mj-profile__section-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n.mj-profile__section-head h4 {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n}\n.mj-profile__unread {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 100px;\n}\n.mj-profile__channels-loading {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n    padding: 12px;\n    text-align: center;\n}\n.mj-profile__channels {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__channel {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    font-family: inherit;\n    text-align: left;\n    width: 100%;\n}\n.mj-profile__channel:hover:not(:disabled) {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__channel:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__channel-icon {\n    width: 32px; height: 32px;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n    transition: all 0.15s;\n}\n.mj-profile__channel--on .mj-profile__channel-icon {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__channel-label {\n    flex: 1;\n    font-size: 13.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.mj-profile__channel-hint {\n    font-size: 11.5px;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-profile__channel-state {\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    min-width: 36px;\n    display: flex; justify-content: flex-end; align-items: center;\n}\n\n.mj-profile__switch {\n    width: 36px;\n    height: 20px;\n    background: var(--mj-border-strong);\n    border-radius: 100px;\n    position: relative;\n    transition: background 0.2s;\n    display: inline-block;\n}\n.mj-profile__switch-knob {\n    position: absolute;\n    top: 2px; left: 2px;\n    width: 16px; height: 16px;\n    background: white;\n    border-radius: 50%;\n    transition: transform 0.2s;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.mj-profile__switch--on { background: var(--mj-brand-primary); }\n.mj-profile__switch--on .mj-profile__switch-knob { transform: translateX(16px); }\n\n.mj-profile__footer {\n    border-top: 1px solid var(--mj-border-subtle);\n    padding: 14px 20px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n.mj-profile__spacer { flex: 1; }\n.mj-profile__btn {\n    padding: 9px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.mj-profile__btn:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mj-profile__btn--primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n.mj-profile__btn--primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.mj-profile__btn--danger {\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n.mj-profile__btn--danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    border-color: var(--mj-status-error);\n}\n\n/* ============ SLIDE-IN PANEL ============ */\n.mj-profile__panel {\n    position: absolute;\n    inset: 0;\n    background: var(--mj-bg-surface);\n    transform: translateX(100%);\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n    display: flex;\n    flex-direction: column;\n    z-index: 3;\n}\n.mj-profile__panel--open {\n    transform: translateX(0);\n    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);\n}\n.mj-profile__panel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 18px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.mj-profile__panel-back {\n    width: 34px; height: 34px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    transition: all 0.15s;\n    font-family: inherit;\n}\n.mj-profile__panel-back:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__panel-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-profile__panel-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px 20px;\n}\n\n/* Theme picker */\n.mj-profile__themes {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__theme {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 12px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    text-align: left;\n    width: 100%;\n    font-family: inherit;\n}\n.mj-profile__theme:hover:not(:disabled) {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__theme:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__theme--active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card));\n}\n.mj-profile__theme-swatch {\n    width: 40px; height: 40px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n    border: 1px solid var(--mj-border-default);\n}\n.mj-profile__theme-swatch--light {\n    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);\n    color: #f59e0b;\n}\n.mj-profile__theme-swatch--dark {\n    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\n    color: #94a3b8;\n    border-color: #334155;\n}\n.mj-profile__theme-swatch--system {\n    background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #1e293b 51%, #0f172a 100%);\n    color: var(--mj-text-secondary);\n}\n.mj-profile__theme-info { flex: 1; min-width: 0; }\n.mj-profile__theme-name {\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-profile__theme-desc {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__theme-check {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n@media (max-width: 480px) {\n    .mj-profile__hero { padding: 20px 18px 48px; }\n    .mj-profile__avatar-zone { width: 88px; height: 88px; margin-top: -44px; }\n    .mj-profile__avatar { width: 88px; height: 88px; font-size: 28px; }\n    .mj-profile__name { font-size: 19px; }\n    .mj-profile__field-list,\n    .mj-profile__section { padding-left: 18px; padding-right: 18px; }\n    .mj-profile__footer { padding: 12px 16px; }\n    .mj-profile--panel-open .mj-profile__main { transform: translateX(-20%); }\n    .mj-profile__panel-body { padding: 14px 16px 16px; }\n}\n    "] }]
+    `, styles: ["\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n.mj-profile {\n    display: block;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    height: 100%;\n    min-height: 0;\n    position: relative;\n    font-family: inherit;\n    overflow: hidden;\n}\n.mj-profile__close {\n    position: absolute;\n    top: 12px; right: 12px;\n    width: 36px; height: 36px;\n    border: none; border-radius: 8px;\n    background: rgba(255, 255, 255, 0.18);\n    backdrop-filter: blur(8px);\n    color: #fff;\n    cursor: pointer;\n    font-size: 16px;\n    display: flex; align-items: center; justify-content: center;\n    transition: background 0.15s, opacity 0.2s;\n    z-index: 4;\n}\n.mj-profile__close:hover { background: rgba(255, 255, 255, 0.3); }\n.mj-profile--panel-open .mj-profile__close { opacity: 0; pointer-events: none; }\n\n/* ============ MAIN VIEW ============ */\n.mj-profile__main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.mj-profile--panel-open .mj-profile__main {\n    transform: translateX(-12%);\n    pointer-events: none;\n}\n\n.mj-profile__hero {\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    padding: 22px 24px 56px;\n    position: relative;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n.mj-profile__hero::before {\n    content: '';\n    position: absolute;\n    inset: -50%;\n    background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);\n    animation: mj-profile-rotate 24s linear infinite;\n    pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n    .mj-profile__hero::before { animation: none; }\n}\n@keyframes mj-profile-rotate { to { transform: rotate(360deg); } }\n\n.mj-profile__hero-title {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    opacity: 0.85;\n    position: relative;\n    z-index: 1;\n}\n\n.mj-profile__avatar-zone {\n    position: relative;\n    width: 96px;\n    height: 96px;\n    margin: -48px auto 12px;\n    z-index: 2;\n}\n.mj-profile__avatar {\n    width: 96px;\n    height: 96px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #264FAF 0%, #0076b6 100%);\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 32px;\n    font-weight: 700;\n    border: 4px solid var(--mj-bg-surface);\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);\n    object-fit: cover;\n    overflow: hidden;\n}\nimg.mj-profile__avatar { background: var(--mj-bg-surface-card); }\n.mj-profile__avatar--icon i { font-size: 36px; }\n\n.mj-profile__avatar-edit {\n    position: absolute;\n    bottom: 2px; right: 2px;\n    width: 30px; height: 30px;\n    border-radius: 50%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border: 2px solid var(--mj-bg-surface);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n    transition: transform 0.15s;\n}\n.mj-profile__avatar-edit:hover { transform: scale(1.1); }\n\n.mj-profile__identity {\n    text-align: center;\n    padding: 0 24px 16px;\n    flex-shrink: 0;\n}\n.mj-profile__name {\n    margin: 0 0 4px;\n    font-size: 22px;\n    font-weight: 700;\n    letter-spacing: -0.4px;\n    color: var(--mj-text-primary);\n}\n.mj-profile__email {\n    margin: 0 0 12px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    word-break: break-all;\n}\n.mj-profile__chips {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: center;\n}\n.mj-profile__chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__chip--admin {\n    background: color-mix(in srgb, #f59e0b 14%, transparent);\n    color: #b45309;\n}\n.mj-profile__chip--dev {\n    background: color-mix(in srgb, #10b981 14%, transparent);\n    color: #047857;\n}\n\n.mj-profile__field-list {\n    padding: 0 24px;\n    flex-shrink: 0;\n}\n.mj-profile__field {\n    display: flex;\n    align-items: center;\n    padding: 12px 0;\n    gap: 14px;\n    border-top: 1px solid var(--mj-border-subtle);\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border-left: none;\n    border-right: none;\n    border-bottom: none;\n    font-family: inherit;\n    color: inherit;\n}\n.mj-profile__field:first-child { border-top: none; }\n.mj-profile__field--button {\n    cursor: pointer;\n    transition: background 0.12s;\n    margin: 0 -8px;\n    padding-left: 8px;\n    padding-right: 8px;\n    border-radius: 8px;\n    border-top: none;\n}\n.mj-profile__field--button + .mj-profile__field--button { margin-top: 0; }\n.mj-profile__field--button:hover { background: var(--mj-bg-surface-hover); }\n.mj-profile__field--button:hover .mj-profile__field-chev { color: var(--mj-brand-primary); }\n.mj-profile__field-icon {\n    width: 32px; height: 32px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    flex-shrink: 0;\n}\n.mj-profile__field-body { flex: 1; min-width: 0; }\n.mj-profile__field-label {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n}\n.mj-profile__field-value {\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__field-muted { color: var(--mj-text-muted); }\n.mj-profile__field-chev {\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    transition: color 0.15s;\n}\n\n.mj-profile__section {\n    padding: 16px 24px 8px;\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n}\n.mj-profile__section-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 10px;\n}\n.mj-profile__section-head h4 {\n    margin: 0;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n}\n.mj-profile__unread {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    padding: 2px 8px;\n    border-radius: 100px;\n}\n.mj-profile__channels-loading {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n    padding: 12px;\n    text-align: center;\n}\n.mj-profile__channels {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__channel {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    font-family: inherit;\n    text-align: left;\n    width: 100%;\n}\n.mj-profile__channel:hover:not(:disabled) {\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__channel:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__channel-icon {\n    width: 32px; height: 32px;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    flex-shrink: 0;\n    transition: all 0.15s;\n}\n.mj-profile__channel--on .mj-profile__channel-icon {\n    background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__channel-label {\n    flex: 1;\n    font-size: 13.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n.mj-profile__channel-hint {\n    font-size: 11.5px;\n    font-weight: 400;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n}\n.mj-profile__channel-state {\n    flex-shrink: 0;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    min-width: 36px;\n    display: flex; justify-content: flex-end; align-items: center;\n}\n\n.mj-profile__switch {\n    width: 36px;\n    height: 20px;\n    background: var(--mj-border-strong);\n    border-radius: 100px;\n    position: relative;\n    transition: background 0.2s;\n    display: inline-block;\n}\n.mj-profile__switch-knob {\n    position: absolute;\n    top: 2px; left: 2px;\n    width: 16px; height: 16px;\n    background: white;\n    border-radius: 50%;\n    transition: transform 0.2s;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n.mj-profile__switch--on { background: var(--mj-brand-primary); }\n.mj-profile__switch--on .mj-profile__switch-knob { transform: translateX(16px); }\n\n.mj-profile__footer {\n    border-top: 1px solid var(--mj-border-subtle);\n    padding: 14px 20px;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n}\n.mj-profile__spacer { flex: 1; }\n.mj-profile__btn {\n    padding: 9px 16px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.mj-profile__btn:hover { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mj-profile__btn--primary {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-color: var(--mj-brand-primary);\n}\n.mj-profile__btn--primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.mj-profile__btn--danger {\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-default));\n}\n.mj-profile__btn--danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    border-color: var(--mj-status-error);\n}\n\n/* ============ SLIDE-IN PANEL ============ */\n.mj-profile__panel {\n    position: absolute;\n    inset: 0;\n    background: var(--mj-bg-surface);\n    transform: translateX(100%);\n    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);\n    display: flex;\n    flex-direction: column;\n    z-index: 3;\n}\n.mj-profile__panel--open {\n    transform: translateX(0);\n    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);\n}\n.mj-profile__panel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 18px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.mj-profile__panel-back {\n    width: 34px; height: 34px;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 13px;\n    transition: all 0.15s;\n    font-family: inherit;\n}\n.mj-profile__panel-back:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.mj-profile__panel-title {\n    margin: 0;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.2px;\n}\n.mj-profile__panel-body {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px 20px;\n}\n\n/* Theme picker */\n.mj-profile__themes {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n.mj-profile__theme {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    padding: 12px 14px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.15s;\n    text-align: left;\n    width: 100%;\n    font-family: inherit;\n}\n.mj-profile__theme:hover:not(:disabled) {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-hover);\n}\n.mj-profile__theme:disabled { cursor: wait; opacity: 0.7; }\n.mj-profile__theme--active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface-card));\n}\n.mj-profile__theme-swatch {\n    width: 40px; height: 40px;\n    border-radius: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n    border: 1px solid var(--mj-border-default);\n}\n.mj-profile__theme-swatch--light {\n    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);\n    color: #f59e0b;\n}\n.mj-profile__theme-swatch--dark {\n    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);\n    color: #94a3b8;\n    border-color: #334155;\n}\n.mj-profile__theme-swatch--system {\n    background: linear-gradient(135deg, #ffffff 0%, #ffffff 49%, #1e293b 51%, #0f172a 100%);\n    color: var(--mj-text-secondary);\n}\n.mj-profile__theme-info { flex: 1; min-width: 0; }\n.mj-profile__theme-name {\n    font-size: 13.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-profile__theme-desc {\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.mj-profile__theme-check {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n/* Starred brand themes shown inline in the theme list */\n.mj-profile__theme-sep {\n    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;\n    color: var(--mj-text-muted); padding: 6px 4px 2px; margin-top: 6px;\n}\n.mj-profile__brand-swatch {\n    display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0;\n}\n.mj-profile__brand-swatch i {\n    width: 33%; height: 100%; display: block;\n}\n\n@media (max-width: 480px) {\n    .mj-profile__hero { padding: 20px 18px 48px; }\n    .mj-profile__avatar-zone { width: 88px; height: 88px; margin-top: -44px; }\n    .mj-profile__avatar { width: 88px; height: 88px; font-size: 28px; }\n    .mj-profile__name { font-size: 19px; }\n    .mj-profile__field-list,\n    .mj-profile__section { padding-left: 18px; padding-right: 18px; }\n    .mj-profile__footer { padding: 12px 16px; }\n    .mj-profile--panel-open .mj-profile__main { transform: translateX(-20%); }\n    .mj-profile__panel-body { padding: 14px 16px 16px; }\n}\n    "] }]
     }], null, { CloseRequested: [{
             type: Output
         }], AvatarUrl: [{
@@ -829,5 +965,5 @@ export class ProfileDialogComponent extends BaseAngularComponent {
         }], AvatarIconClass: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileDialogComponent, { className: "ProfileDialogComponent", filePath: "src/lib/profile/profile-dialog.component.ts", lineNumber: 759 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProfileDialogComponent, { className: "ProfileDialogComponent", filePath: "src/lib/profile/profile-dialog.component.ts", lineNumber: 801 }); })();
 //# sourceMappingURL=profile-dialog.component.js.map