@memberjunction/ng-dashboards 5.48.0 → 5.49.0

package/dist/ThemeStudio/theme-studio-dashboard.component.js

@@ -0,0 +1,2931 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * @fileoverview Theme Studio dashboard (org-theming Phase 5) — the polished authoring
+ * surface for brand themes, matching theme-studio-mockup-v2: a preview-primary layout
+ * with a collapsible, resizable slide-panel editor, three switchable preview surfaces
+ * (Explorer UI style-guide, Skip reports, agent output), and a fullscreen mode.
+ *
+ * Preview fidelity (proposal 16.2 / decision #4): every surface is fed by the SAME
+ * derivation module as the save path (@memberjunction/theme-engine). The mockup's
+ * parallel `--p-*` + JS color math is replaced by the real derived `--mj-*` token map,
+ * pushed onto the preview canvas — so hovers, dark re-point, and status colors are the
+ * true generator output, not an approximation.
+ *
+ * Customization escalates in order (design feedback v1.1): seeds → token overrides
+ * (visual token browser + recipes) → custom CSS (escape hatch, CodeMirror-backed).
+ * @module ThemeStudio
+ */
+import { Component, HostListener, ViewChild, } from '@angular/core';
+import { autocompletion } from '@codemirror/autocomplete';
+import { RunView } from '@memberjunction/core';
+import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+import { BaseDashboard } from '@memberjunction/ng-shared';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { derive, emitOverlayCss, emitScopedCustomCss, MJ_DEFAULT_SEEDS, } from '@memberjunction/theme-engine';
+import { buildCssWarnings, isBuiltInTheme, MJ_CHROME_SELECTOR_INFO, MJ_CHROME_SELECTORS, parseOverridesJson, pickWorstOnPrimary, THEME_RECIPES, TOKEN_CATEGORIES, TOKEN_PREVIEW_TARGETS, } from './theme-studio.constants';
+import { buildThemeStudioAgentContext, resolveThemeByIDOrName } from './theme-agent-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-code-editor";
+const _c0 = ["previewCanvas"];
+const _c1 = ["nameInput"];
+const _c2 = ["stage"];
+const _c3 = ["cssCm"];
+const _c4 = ["galDialog"];
+const _forTrack0 = ($index, $item) => $item.name;
+const _forTrack1 = ($index, $item) => $item.value;
+const _forTrack2 = ($index, $item) => $item.recipe.id;
+const _forTrack3 = ($index, $item) => $item.id;
+const _forTrack4 = ($index, $item) => $item.key;
+const _forTrack5 = ($index, $item) => $item.selector;
+function ThemeStudioDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 86, 2);
+    i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Conditional_9_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.currentName, $event) || (ctx_r2.currentName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ThemeStudioDashboardComponent_Conditional_9_Template_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.commitRename()); })("keydown.escape", function ThemeStudioDashboardComponent_Conditional_9_Template_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelRename()); })("blur", function ThemeStudioDashboardComponent_Conditional_9_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.commitRename()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentName);
+} }
+function ThemeStudioDashboardComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_10_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.startRename()); });
+    i0.ɵɵelement(1, "i", 90);
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "b", 87);
+    i0.ɵɵlistener("dblclick", function ThemeStudioDashboardComponent_Conditional_10_Template_b_dblclick_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.startRename()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, ThemeStudioDashboardComponent_Conditional_10_Conditional_2_Template, 2, 0, "button", 88);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.currentName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r2.isBuiltInSelected ? 2 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1, "DEFAULT");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_14_For_3_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const c_r9 = ctx.$implicit;
+    i0.ɵɵstyleProp("background", c_r9);
+} }
+function ThemeStudioDashboardComponent_Conditional_14_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
+    i0.ɵɵtext(1, "DEFAULT");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_14_For_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 95);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_14_For_3_Template_button_click_0_listener() { const t_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectTheme(t_r8)); });
+    i0.ɵɵelementStart(1, "span", 9);
+    i0.ɵɵrepeaterCreate(2, ThemeStudioDashboardComponent_Conditional_14_For_3_For_3_Template, 1, 2, "i", 96, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "b");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, ThemeStudioDashboardComponent_Conditional_14_For_3_Conditional_6_Template, 2, 0, "span", 11);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r8 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("on", ctx_r2.isCurrentTheme(t_r8.id));
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(t_r8.swatches);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(t_r8.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(t_r8.isDefault ? 6 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 91);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.themePickerOpen = false); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 92);
+    i0.ɵɵrepeaterCreate(2, ThemeStudioDashboardComponent_Conditional_14_For_3_Template, 7, 4, "button", 93, _forTrack3);
+    i0.ɵɵelementStart(4, "button", 94);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.newTheme()); });
+    i0.ɵɵelement(5, "i", 46);
+    i0.ɵɵtext(6, " New theme");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.themes);
+} }
+function ThemeStudioDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 14);
+    i0.ɵɵelement(1, "i", 97);
+    i0.ɵɵtext(2, " Built-in \u00B7 read-only");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵelement(1, "i", 98);
+    i0.ɵɵtext(2, " Draft previewing on your workspace");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 99);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveAsCopy()); });
+    i0.ɵɵtext(1, "Save as copy");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 100);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.save()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r2.saving);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.saving ? "Saving\u2026" : "Save theme");
+} }
+function ThemeStudioDashboardComponent_Conditional_38_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 107);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_38_For_9_Template_button_click_0_listener() { const p_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.choosePreset(p_r14)); });
+    i0.ɵɵelementStart(1, "span", 108);
+    i0.ɵɵelement(2, "span", 109);
+    i0.ɵɵelementStart(3, "span", 110);
+    i0.ɵɵelement(4, "span", 111)(5, "span", 112);
+    i0.ɵɵelementStart(6, "span", 113);
+    i0.ɵɵelement(7, "span", 114)(8, "span", 114)(9, "span", 115);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "b");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const p_r14 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("border-radius", p_r14.seeds.radius ?? 8, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", p_r14.seeds.primary);
+    i0.ɵɵadvance(5);
+    i0.ɵɵstyleProp("background", p_r14.seeds.accent ?? p_r14.seeds.primary);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", p_r14.seeds.tertiary ?? p_r14.seeds.accent ?? p_r14.seeds.primary);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", p_r14.seeds.primary)("border-radius", (p_r14.seeds.radius ?? 8) / 2, "px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(p_r14.name);
+} }
+function ThemeStudioDashboardComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 101);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_38_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closePresetGallery()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 102, 3)(3, "h2");
+    i0.ɵɵtext(4, "Start a new theme");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p", 103);
+    i0.ɵɵtext(6, "Pick a personality first \u2014 everything derives from a few seeds, so you can tune it all after.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 104);
+    i0.ɵɵrepeaterCreate(8, ThemeStudioDashboardComponent_Conditional_38_For_9_Template, 12, 13, "button", 105, _forTrack0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 106)(11, "button", 17);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_38_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closePresetGallery()); });
+    i0.ɵɵtext(12, "Start blank (MJ defaults)");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r2.presets);
+} }
+function ThemeStudioDashboardComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "mj-view-toggle", 23);
+    i0.ɵɵlistener("KeyChange", function ThemeStudioDashboardComponent_Conditional_43_Template_mj_view_toggle_KeyChange_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModeToggle($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 116);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_43_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleFullscreen(false)); });
+    i0.ɵɵtext(3, "Exit full screen ");
+    i0.ɵɵelementStart(4, "span", 117);
+    i0.ɵɵtext(5, "Esc");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Options", ctx_r2.modeOptions)("ActiveKey", ctx_r2.previewMode);
+} }
+function ThemeStudioDashboardComponent_Conditional_45_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "b", 181);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_45_For_9_Template_b_click_0_listener() { const ɵ$index_193_r18 = i0.ɵɵrestoreView(_r17).$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.mockNav = ɵ$index_193_r18); })("keydown.enter", function ThemeStudioDashboardComponent_Conditional_45_For_9_Template_b_keydown_enter_0_listener() { const ɵ$index_193_r18 = i0.ɵɵrestoreView(_r17).$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.mockNav = ɵ$index_193_r18); })("keydown.space", function ThemeStudioDashboardComponent_Conditional_45_For_9_Template_b_keydown_space_0_listener($event) { const ɵ$index_193_r18 = i0.ɵɵrestoreView(_r17).$index; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.mockNav = ɵ$index_193_r18; return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r19 = ctx.$implicit;
+    const ɵ$index_193_r18 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("on", ctx_r2.mockNav === ɵ$index_193_r18);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r19);
+} }
+function ThemeStudioDashboardComponent_Conditional_45_For_33_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 189);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_45_For_33_Template_i_click_0_listener() { const ɵ$index_235_r21 = i0.ɵɵrestoreView(_r20).$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.mockTab = ɵ$index_235_r21); })("keydown.enter", function ThemeStudioDashboardComponent_Conditional_45_For_33_Template_i_keydown_enter_0_listener() { const ɵ$index_235_r21 = i0.ɵɵrestoreView(_r20).$index; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.mockTab = ɵ$index_235_r21); })("keydown.space", function ThemeStudioDashboardComponent_Conditional_45_For_33_Template_i_keydown_space_0_listener($event) { const ɵ$index_235_r21 = i0.ɵɵrestoreView(_r20).$index; const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.mockTab = ɵ$index_235_r21; return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r22 = ctx.$implicit;
+    const ɵ$index_235_r21 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("on", ctx_r2.mockTab === ɵ$index_235_r21);
+    i0.ɵɵattribute("aria-selected", ctx_r2.mockTab === ɵ$index_235_r21);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r22);
+} }
+function ThemeStudioDashboardComponent_Conditional_45_Conditional_146_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "b", 190);
+    i0.ɵɵtext(1, "Renewal funnel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "b", 190);
+    i0.ɵɵtext(3, "Engagement");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 118);
+    i0.ɵɵtext(2, "Explorer UI \u00B7 shell + page chrome + ng-ui-components \u00B7 hover & tab around \u2014 states are live");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 119)(4, "div", 120)(5, "span", 121);
+    i0.ɵɵelement(6, "i", 122);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 123);
+    i0.ɵɵrepeaterCreate(8, ThemeStudioDashboardComponent_Conditional_45_For_9_Template, 2, 3, "b", 124, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 125);
+    i0.ɵɵelement(11, "i", 126);
+    i0.ɵɵtext(12, " Search everything\u2026");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(13, "span", 127);
+    i0.ɵɵelementStart(14, "span", 128);
+    i0.ɵɵtext(15, "AC");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 129)(17, "div", 130)(18, "span", 131);
+    i0.ɵɵelement(19, "i", 132);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div")(21, "div", 133);
+    i0.ɵɵtext(22, "Membership Overview");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 134);
+    i0.ɵɵtext(24, "mj-page-layout \u00B7 mj-page-header \u00B7 mj-page-body");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 135)(26, "button", 136);
+    i0.ɵɵtext(27, "Export");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "button", 137);
+    i0.ɵɵtext(29, "New record");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(30, "div", 138)(31, "span", 139);
+    i0.ɵɵrepeaterCreate(32, ThemeStudioDashboardComponent_Conditional_45_For_33_Template, 2, 4, "i", 140, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 141)(35, "div", 142)(36, "span", 143);
+    i0.ɵɵtext(37, "mjButton \u2014 primary \u00B7 secondary \u00B7 outline \u00B7 danger");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "div", 144)(39, "button", 137);
+    i0.ɵɵtext(40, "Save");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(41, "button", 136);
+    i0.ɵɵtext(42, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(43, "button", 145);
+    i0.ɵɵtext(44, "Configure");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(45, "button", 146);
+    i0.ɵɵtext(46, "Delete");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(47, "div", 142)(48, "span", 143);
+    i0.ɵɵtext(49, "Button states \u2014 rest \u00B7 hover \u00B7 active \u00B7 focus \u00B7 disabled");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "div", 147)(51, "button", 137);
+    i0.ɵɵtext(52, "Rest");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(53, "button", 148);
+    i0.ɵɵtext(54, "Hover");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(55, "button", 149);
+    i0.ɵɵtext(56, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(57, "button", 150);
+    i0.ɵɵtext(58, "Focus");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(59, "button", 151);
+    i0.ɵɵtext(60, "Disabled");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(61, "div", 147)(62, "button", 136);
+    i0.ɵɵtext(63, "Rest");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(64, "button", 152);
+    i0.ɵɵtext(65, "Hover");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(66, "button", 153);
+    i0.ɵɵtext(67, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(68, "button", 154);
+    i0.ɵɵtext(69, "Focus");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(70, "button", 155);
+    i0.ɵɵtext(71, "Disabled");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(72, "div", 147)(73, "button", 145);
+    i0.ɵɵtext(74, "Rest");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(75, "button", 156);
+    i0.ɵɵtext(76, "Hover");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(77, "button", 157);
+    i0.ɵɵtext(78, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(79, "button", 158);
+    i0.ɵɵtext(80, "Focus");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(81, "button", 159);
+    i0.ɵɵtext(82, "Disabled");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(83, "div", 147)(84, "button", 146);
+    i0.ɵɵtext(85, "Rest");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(86, "button", 160);
+    i0.ɵɵtext(87, "Hover");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(88, "button", 161);
+    i0.ɵɵtext(89, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(90, "button", 162);
+    i0.ɵɵtext(91, "Focus");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(92, "button", 163);
+    i0.ɵɵtext(93, "Disabled");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(94, "div", 142)(95, "span", 143);
+    i0.ɵɵtext(96, "mj-input \u00B7 mj-combobox \u00B7 mj-switch");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(97, "div", 144)(98, "span", 164);
+    i0.ɵɵtext(99, "Northwind Tra");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(100, "span", 165);
+    i0.ɵɵtext(101, "Member type ");
+    i0.ɵɵelement(102, "i", 166);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(103, "div", 144)(104, "span", 167);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_45_Template_span_click_104_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockSwitchA = !ctx_r2.mockSwitchA); })("keydown.enter", function ThemeStudioDashboardComponent_Conditional_45_Template_span_keydown_enter_104_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockSwitchA = !ctx_r2.mockSwitchA); })("keydown.space", function ThemeStudioDashboardComponent_Conditional_45_Template_span_keydown_space_104_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.mockSwitchA = !ctx_r2.mockSwitchA; return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(105, "span", 168);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_45_Template_span_click_105_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockSwitchB = !ctx_r2.mockSwitchB); })("keydown.enter", function ThemeStudioDashboardComponent_Conditional_45_Template_span_keydown_enter_105_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockSwitchB = !ctx_r2.mockSwitchB); })("keydown.space", function ThemeStudioDashboardComponent_Conditional_45_Template_span_keydown_space_105_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.mockSwitchB = !ctx_r2.mockSwitchB; return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(106, "span", 169);
+    i0.ɵɵtext(107, "Auto-renew");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(108, "div", 170)(109, "span", 143);
+    i0.ɵɵtext(110, "mj-filter-chip");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(111, "div", 144)(112, "span", 171);
+    i0.ɵɵtext(113, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(114, "span", 172);
+    i0.ɵɵtext(115, "Lapsed");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(116, "span", 172);
+    i0.ɵɵtext(117, "Pending");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(118, "div", 170)(119, "span", 143);
+    i0.ɵɵtext(120, "mj-stat-badge \u00B7 mj-progress-bar");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(121, "div", 144)(122, "span", 173);
+    i0.ɵɵtext(123, "1,204 Members");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(124, "span", 174);
+    i0.ɵɵtext(125, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(126, "span", 175);
+    i0.ɵɵtext(127, "Expiring");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(128, "div", 144)(129, "span", 176);
+    i0.ɵɵelement(130, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(131, "span", 169);
+    i0.ɵɵtext(132, "64%");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(133, "div", 170)(134, "span", 143);
+    i0.ɵɵtext(135, "mj-left-nav \u00B7 mj-accordion \u00B7 mj-alert");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(136, "div", 177)(137, "b", 178);
+    i0.ɵɵelement(138, "i", 179);
+    i0.ɵɵtext(139, " Overview");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(140, "b", 180);
+    i0.ɵɵelement(141, "i", 132);
+    i0.ɵɵtext(142, " Members");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(143, "b", 181);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_45_Template_b_click_143_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockAccordionOpen = !ctx_r2.mockAccordionOpen); })("keydown.enter", function ThemeStudioDashboardComponent_Conditional_45_Template_b_keydown_enter_143_listener() { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.mockAccordionOpen = !ctx_r2.mockAccordionOpen); })("keydown.space", function ThemeStudioDashboardComponent_Conditional_45_Template_b_keydown_space_143_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.mockAccordionOpen = !ctx_r2.mockAccordionOpen; return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelement(144, "i", 182);
+    i0.ɵɵtext(145, " Reports ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(146, ThemeStudioDashboardComponent_Conditional_45_Conditional_146_Template, 4, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(147, "div", 183);
+    i0.ɵɵelement(148, "i");
+    i0.ɵɵtext(149, "12 imports finished overnight");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(150, "div", 170)(151, "span", 143);
+    i0.ɵɵtext(152, "mj-dialog \u00B7 mj-dialog-actions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(153, "div", 184)(154, "div", 185);
+    i0.ɵɵtext(155, "Rename view");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(156, "div", 186)(157, "span", 187);
+    i0.ɵɵtext(158, "Q3 Renewal Pipeline");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(159, "div", 188)(160, "button", 137);
+    i0.ɵɵtext(161, "Save");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(162, "button", 136);
+    i0.ɵɵtext(163, "Cancel");
+    i0.ɵɵelementEnd()()()()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r2.mockNavItems);
+    i0.ɵɵadvance(24);
+    i0.ɵɵrepeater(ctx_r2.mockTabs);
+    i0.ɵɵadvance(72);
+    i0.ɵɵclassProp("off", !ctx_r2.mockSwitchA);
+    i0.ɵɵattribute("aria-checked", ctx_r2.mockSwitchA);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("off", !ctx_r2.mockSwitchB);
+    i0.ɵɵattribute("aria-checked", ctx_r2.mockSwitchB);
+    i0.ɵɵadvance(38);
+    i0.ɵɵattribute("aria-expanded", ctx_r2.mockAccordionOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.mockAccordionOpen)("fa-chevron-right", !ctx_r2.mockAccordionOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.mockAccordionOpen ? 146 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_46_For_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 208)(1, "span", 219);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "span", 220);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r23 = ctx.$implicit;
+    const ɵ$index_522_r24 = ctx.$index;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.barValues[ɵ$index_522_r24]);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("height", h_r23, "%")("background", ctx_r2.vizColors[ɵ$index_522_r24 % ctx_r2.vizColors.length]);
+} }
+function ThemeStudioDashboardComponent_Conditional_46_For_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const c_r25 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(c_r25);
+} }
+function ThemeStudioDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 191)(2, "div", 192);
+    i0.ɵɵelement(3, "span", 193);
+    i0.ɵɵelementStart(4, "div")(5, "div", 194);
+    i0.ɵɵtext(6, "Acme Analytics");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 195);
+    i0.ɵɵtext(8, "Q2 Pipeline Overview");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 196);
+    i0.ɵɵtext(10, "Generated \u00B7 Jul 2026");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 197)(12, "div", 198)(13, "div", 199)(14, "div", 200);
+    i0.ɵɵtext(15, "$4.2M");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 201);
+    i0.ɵɵtext(17, "Pipeline value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 202);
+    i0.ɵɵtext(19, "\u25B2 12.4%");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 199)(21, "div", 200);
+    i0.ɵɵtext(22, "318");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 201);
+    i0.ɵɵtext(24, "Open deals");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 202);
+    i0.ɵɵtext(26, "\u25B2 6.1%");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "div", 199)(28, "div", 200);
+    i0.ɵɵtext(29, "27%");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "div", 201);
+    i0.ɵɵtext(31, "Win rate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "div", 203);
+    i0.ɵɵtext(33, "\u25BC 1.8%");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(34, "div", 204)(35, "div", 205);
+    i0.ɵɵtext(36, "Pipeline by stage");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "div", 206);
+    i0.ɵɵtext(38, "Value in each stage, current quarter");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "div", 207);
+    i0.ɵɵrepeaterCreate(40, ThemeStudioDashboardComponent_Conditional_46_For_41_Template, 4, 5, "div", 208, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "div", 209);
+    i0.ɵɵrepeaterCreate(43, ThemeStudioDashboardComponent_Conditional_46_For_44_Template, 2, 1, "span", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "table", 210)(46, "thead")(47, "tr")(48, "th");
+    i0.ɵɵtext(49, "Account");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(50, "th");
+    i0.ɵɵtext(51, "Stage");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "th", 211);
+    i0.ɵɵtext(53, "Value");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(54, "th", 211);
+    i0.ɵɵtext(55, "Close");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(56, "tbody")(57, "tr")(58, "td")(59, "b");
+    i0.ɵɵtext(60, "Northwind Traders");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(61, "td");
+    i0.ɵɵtext(62, "Negotiate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(63, "td", 211);
+    i0.ɵɵtext(64, "$820,000");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(65, "td", 211);
+    i0.ɵɵtext(66, "Aug 12");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(67, "tr")(68, "td")(69, "b");
+    i0.ɵɵtext(70, "Contoso Ltd");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(71, "td");
+    i0.ɵɵtext(72, "Propose");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(73, "td", 211);
+    i0.ɵɵtext(74, "$465,000");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(75, "td", 211);
+    i0.ɵɵtext(76, "Sep 03");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(77, "tr")(78, "td")(79, "b");
+    i0.ɵɵtext(80, "Fabrikam Inc");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(81, "td");
+    i0.ɵɵtext(82, "Commit");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(83, "td", 211);
+    i0.ɵɵtext(84, "$1,240,000");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(85, "td", 211);
+    i0.ɵɵtext(86, "Jul 29");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(87, "p", 212)(88, "b");
+    i0.ɵɵtext(89, "Summary.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(90, " Northwind expanded into two of Acme's core regions this quarter, hired a new VP of Partnerships, and repriced its mid-tier plan 8% below Acme's.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(91, "div", 213)(92, "div", 214);
+    i0.ɵɵelement(93, "span", 215);
+    i0.ɵɵelementStart(94, "span")(95, "b");
+    i0.ɵɵtext(96, "Regional expansion");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(97, " \u2014 opened Denver and Austin offices");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(98, "span", 175);
+    i0.ɵɵtext(99, "High impact");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(100, "div", 214);
+    i0.ɵɵelement(101, "span", 215);
+    i0.ɵɵelementStart(102, "span")(103, "b");
+    i0.ɵɵtext(104, "Pricing move");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(105, " \u2014 mid-tier repriced to $79/seat");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(106, "span", 173);
+    i0.ɵɵtext(107, "Watch");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(108, "div", 214);
+    i0.ɵɵelement(109, "span", 215);
+    i0.ɵɵelementStart(110, "span")(111, "b");
+    i0.ɵɵtext(112, "Positioning shift");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(113, " \u2014 \"live in 30 days\" campaign");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(114, "span", 216);
+    i0.ɵɵtext(115, "Monitor");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(116, "table", 210)(117, "thead")(118, "tr")(119, "th");
+    i0.ɵɵtext(120, "Source");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(121, "th");
+    i0.ɵɵtext(122, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(123, "th", 211);
+    i0.ɵɵtext(124, "Confidence");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(125, "tbody")(126, "tr")(127, "td")(128, "b");
+    i0.ɵɵtext(129, "Northwind press release");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(130, "td");
+    i0.ɵɵtext(131, "Primary");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(132, "td", 211);
+    i0.ɵɵtext(133, "High");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(134, "tr")(135, "td")(136, "b");
+    i0.ɵɵtext(137, "G2 pricing capture");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(138, "td");
+    i0.ɵɵtext(139, "Primary");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(140, "td", 211);
+    i0.ɵɵtext(141, "High");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(142, "tr")(143, "td")(144, "b");
+    i0.ɵɵtext(145, "LinkedIn hiring signals");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(146, "td");
+    i0.ɵɵtext(147, "Inferred");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(148, "td", 211);
+    i0.ɵɵtext(149, "Medium");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(150, "div", 217)(151, "span");
+    i0.ɵɵtext(152);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(153, "span", 218);
+    i0.ɵɵelementStart(154, "span");
+    i0.ɵɵtext(155, "as of Jul 2026");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(40);
+    i0.ɵɵrepeater(ctx_r2.barHeights);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r2.barCats);
+    i0.ɵɵadvance(109);
+    i0.ɵɵtextInterpolate(ctx_r2.footerNotice);
+} }
+function ThemeStudioDashboardComponent_For_67_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 221);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_For_67_Template_button_click_0_listener() { const p_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.applyPreset(p_r27)); });
+    i0.ɵɵelementStart(1, "span", 9);
+    i0.ɵɵelement(2, "i")(3, "i")(4, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "small");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const p_r27 = ctx.$implicit;
+    i0.ɵɵproperty("title", p_r27.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("background", p_r27.seeds.primary);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", p_r27.seeds.accent);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", p_r27.seeds.tertiary || p_r27.seeds.accent);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(p_r27.name);
+} }
+function ThemeStudioDashboardComponent_Conditional_129_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const worst_r28 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" \u2192 ", worst_r28.check.suggestion.hex);
+} }
+function ThemeStudioDashboardComponent_Conditional_129_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 222);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(2, "em", 223);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, ThemeStudioDashboardComponent_Conditional_129_Conditional_4_Template, 2, 1, "span");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const worst_r28 = ctx;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("warn", !worst_r28.check.passes);
+    i0.ɵɵproperty("title", "light " + ((ctx_r2.onPrimaryDetail.light == null ? null : ctx_r2.onPrimaryDetail.light.ratio) ?? "\u2014") + ":1 \u00B7 dark " + ((ctx_r2.onPrimaryDetail.dark == null ? null : ctx_r2.onPrimaryDetail.dark.ratio) ?? "\u2014") + ":1");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", worst_r28.check.passes ? "\u2713" : "\u26A0", " ", worst_r28.check.ratio, ":1 ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(worst_r28.mode);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!worst_r28.check.passes && worst_r28.check.suggestion ? 4 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_130_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 224);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const d_r29 = ctx;
+    const l_r30 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate4("Per mode: light ", l_r30.ratio, ":1 ", l_r30.passes ? "\u2713" : "\u26A0", " \u00B7 dark ", d_r29.ratio, ":1 ", d_r29.passes ? "\u2713" : "\u26A0");
+} }
+function ThemeStudioDashboardComponent_Conditional_130_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ThemeStudioDashboardComponent_Conditional_130_Conditional_0_Template, 2, 4, "div", 224);
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((tmp_4_0 = ctx_r2.onPrimaryDetail.dark) ? 0 : -1, tmp_4_0);
+} }
+function ThemeStudioDashboardComponent_For_144_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 63);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const f_r31 = ctx.$implicit;
+    i0.ɵɵproperty("value", f_r31.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(f_r31.label);
+} }
+function ThemeStudioDashboardComponent_Conditional_211_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 225);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_211_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.resetViz()); });
+    i0.ɵɵtext(1, "reset");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_For_216_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 226)(1, "span", 227);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 228);
+    i0.ɵɵlistener("input", function ThemeStudioDashboardComponent_For_216_Template_input_input_3_listener($event) { const ɵ$index_1029_r34 = i0.ɵɵrestoreView(_r33).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editViz(ɵ$index_1029_r34, $event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const c_r35 = ctx.$implicit;
+    const ɵ$index_1029_r34 = ctx.$index;
+    i0.ɵɵstyleProp("background", c_r35);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ɵ$index_1029_r34 + 1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", c_r35);
+} }
+function ThemeStudioDashboardComponent_For_239_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementStart(3, "small");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 53)(6, "mj-switch", 62);
+    i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_For_239_Template_mj_switch_ngModelChange_6_listener() { const rs_r37 = i0.ɵɵrestoreView(_r36).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleRecipe(rs_r37.recipe)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const rs_r37 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(rs_r37.recipe.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(rs_r37.recipe.description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", rs_r37.on);
+    i0.ɵɵattribute("aria-label", "Toggle " + rs_r37.recipe.name);
+} }
+function ThemeStudioDashboardComponent_Conditional_246_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p", 85);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(2, "button", 229);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_246_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAdvanced()); });
+    i0.ɵɵtext(3, "Edit");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r2.advancedSummary, " ");
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 255);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const g_r41 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", g_r41.modified, " modified");
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 261);
+    i0.ɵɵtext(1, "modified");
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 266);
+    i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(5); i0.ɵɵtwoWayBindingSet(ctx_r2.editingTokenValue, $event) || (ctx_r2.editingTokenValue = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.commitTokenEdit()); })("keydown.escape", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.cancelTokenEdit()); })("blur", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.commitTokenEdit()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.editingTokenValue);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 263)(1, "input", 228);
+    i0.ɵɵlistener("input", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_6_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r45); const t_r43 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onTokenColorInput(t_r43.name, $event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 267);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const t_r43 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", t_r43.value);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", t_r43.colorValue);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(t_r43.value);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r46 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 268);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r46); const t_r43 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.beginTokenEdit(t_r43)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r43 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", "Edit " + t_r43.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r43.value);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r47 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 269);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r47); const t_r43 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.resetTokenOverride(t_r43.name)); });
+    i0.ɵɵelement(1, "i", 270);
+    i0.ɵɵelementEnd();
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r42 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 258);
+    i0.ɵɵlistener("mouseenter", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Template_div_mouseenter_0_listener() { const t_r43 = i0.ɵɵrestoreView(_r42).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.highlightTokenTargets(t_r43.name)); })("mouseleave", function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.clearTokenHighlight()); });
+    i0.ɵɵelement(1, "span", 259);
+    i0.ɵɵelementStart(2, "code", 260);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_4_Template, 2, 0, "span", 261);
+    i0.ɵɵconditionalCreate(5, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_5_Template, 1, 1, "input", 262)(6, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_6_Template, 4, 3, "label", 263)(7, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_7_Template, 2, 2, "button", 264);
+    i0.ɵɵconditionalCreate(8, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Conditional_8_Template, 2, 0, "button", 265);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r43 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("mod", t_r43.overridden);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background", t_r43.value);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", t_r43.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r43.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(t_r43.overridden ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.editingToken === t_r43.name ? 5 : t_r43.isColor ? 6 : 7);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(t_r43.overridden ? 8 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_For_1_Template, 9, 9, "div", 257, _forTrack0);
+} if (rf & 2) {
+    const g_r41 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(g_r41.rows);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_27_Template(rf, ctx) { if (rf & 1) {
+    const _r40 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 240)(1, "button", 254);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_For_27_Template_button_click_1_listener() { const g_r41 = i0.ɵɵrestoreView(_r40).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleTokenCategory(g_r41.key)); });
+    i0.ɵɵelement(2, "i", 182);
+    i0.ɵɵtext(3);
+    i0.ɵɵconditionalCreate(4, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_4_Template, 2, 1, "span", 255);
+    i0.ɵɵelementStart(5, "span", 256);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(7, ThemeStudioDashboardComponent_Conditional_247_For_27_Conditional_7_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const g_r41 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-chevron-down", ctx_r2.isTokenCategoryOpen(g_r41.key))("fa-chevron-right", !ctx_r2.isTokenCategoryOpen(g_r41.key));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", g_r41.label, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(g_r41.modified > 0 ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(g_r41.rows.length);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.isTokenCategoryOpen(g_r41.key) ? 7 : -1);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_42_Template(rf, ctx) { if (rf & 1) {
+    const _r48 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 271);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_For_42_Template_button_click_0_listener() { const s_r49 = i0.ɵɵrestoreView(_r48).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.insertChromeSelector(s_r49.selector)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const s_r49 = ctx.$implicit;
+    i0.ɵɵproperty("title", s_r49.description);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(s_r49.selector);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 63);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const n_r50 = ctx.$implicit;
+    i0.ɵɵproperty("value", n_r50);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(n_r50);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_For_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 250);
+    i0.ɵɵelement(1, "i", 272);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const w_r51 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", w_r51);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    const _r52 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 253)(1, "button", 273);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_Conditional_63_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r52); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.copyGeneratedCss()); });
+    i0.ɵɵelement(2, "i", 274);
+    i0.ɵɵtext(3, " Copy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 275);
+    i0.ɵɵelement(5, "mj-code-editor", 276);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r2.generatedCss);
+} }
+function ThemeStudioDashboardComponent_Conditional_247_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 230)(1, "span", 231)(2, "b");
+    i0.ɵɵtext(3, "1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4, " Seeds");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 232);
+    i0.ɵɵelementStart(6, "span", 233)(7, "b");
+    i0.ɵɵtext(8, "2");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(9, " Token overrides");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(10, "i", 232);
+    i0.ɵɵelementStart(11, "span", 234)(12, "b");
+    i0.ɵɵtext(13, "3");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(14, " Custom CSS");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "p", 50);
+    i0.ɵɵtext(16, "Escalate in order. Seeds (above) cover most themes; token overrides refine specific surfaces; custom CSS is the escape hatch for what tokens can't express.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 235)(18, "div", 236)(19, "span", 237);
+    i0.ɵɵtext(20, "2");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(21, "Token overrides");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "p", 50);
+    i0.ɵɵtext(23, "The full derived token contract, grouped and searchable. Click a swatch to override; hover a row to see where it's used in the preview. Overrides apply over the derived tokens (both modes).");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "input", 238);
+    i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Conditional_247_Template_input_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.tokenSearch, $event) || (ctx_r2.tokenSearch = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Conditional_247_Template_input_ngModelChange_24_listener() { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTokenSearchChanged()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "div", 239);
+    i0.ɵɵrepeaterCreate(26, ThemeStudioDashboardComponent_Conditional_247_For_27_Template, 8, 8, "div", 240, _forTrack4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "div", 235)(29, "div", 236)(30, "span", 241);
+    i0.ɵɵtext(31, "3");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(32, "Custom CSS");
+    i0.ɵɵelementStart(33, "span", 242);
+    i0.ɵɵtext(34, "escape hatch");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(35, "p", 50);
+    i0.ɵɵtext(36, "Only for what tokens can't express. Appended to the theme overlay, auto-scoped to this theme. ");
+    i0.ɵɵelementStart(37, "code");
+    i0.ɵɵtext(38, "@import");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(39, " is not supported and is removed on save.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "div", 243);
+    i0.ɵɵrepeaterCreate(41, ThemeStudioDashboardComponent_Conditional_247_For_42_Template, 2, 2, "button", 244, _forTrack5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(43, "div", 245)(44, "select", 246);
+    i0.ɵɵlistener("change", function ThemeStudioDashboardComponent_Conditional_247_Template_select_change_44_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onInsertTokenPick($event)); });
+    i0.ɵɵelementStart(45, "option", 247);
+    i0.ɵɵtext(46, "Insert token\u2026");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(47, ThemeStudioDashboardComponent_Conditional_247_For_48_Template, 2, 2, "option", 63, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(49, "div", 248)(50, "mj-code-editor", 249, 4);
+    i0.ɵɵlistener("change", function ThemeStudioDashboardComponent_Conditional_247_Template_mj_code_editor_change_50_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCssEditorChange($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(52, ThemeStudioDashboardComponent_Conditional_247_For_53_Template, 3, 1, "p", 250, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(54, "p", 251);
+    i0.ɵɵtext(55, "The canvas preview of custom CSS is approximate \u2014 the mock's markup differs from the real chrome. Use the workspace preview to author against reality:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(56, "button", 27);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_Template_button_click_56_listener() { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleWorkspacePreview()); });
+    i0.ɵɵelement(57, "i", 182);
+    i0.ɵɵtext(58);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(59, "div", 235)(60, "button", 252);
+    i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Conditional_247_Template_button_click_60_listener() { i0.ɵɵrestoreView(_r39); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showGeneratedCss = !ctx_r2.showGeneratedCss); });
+    i0.ɵɵelement(61, "i", 182);
+    i0.ɵɵtext(62);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(63, ThemeStudioDashboardComponent_Conditional_247_Conditional_63_Template, 6, 1, "div", 253);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(24);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.tokenSearch);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.tokenGroups);
+    i0.ɵɵadvance(15);
+    i0.ɵɵrepeater(ctx_r2.chromeSelectorInfo);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r2.overridableTokens);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r2.customCss)("extensions", ctx_r2.cssEditorExtensions)("lineWrapping", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.cssWarnings);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("variant", ctx_r2.workspacePreviewOn ? "warning" : "outline");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-eye", !ctx_r2.workspacePreviewOn)("fa-eye-slash", ctx_r2.workspacePreviewOn);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.workspacePreviewOn ? "End workspace preview" : "Preview on my workspace", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("fa-eye", !ctx_r2.showGeneratedCss)("fa-eye-slash", ctx_r2.showGeneratedCss);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.showGeneratedCss ? "Hide" : "View", " generated CSS ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.showGeneratedCss ? 63 : -1);
+} }
+/** Panel sizing (Q3): resizable with a min, an advanced-mode preset, and a preview floor. */
+const PANEL_MIN_WIDTH = 392;
+const PANEL_ADVANCED_WIDTH = 600;
+const PREVIEW_MIN_WIDTH = 640;
+const PANEL_MAX_FRACTION = 0.55;
+/** User-settings key for a manually-dragged panel width. */
+const PANEL_WIDTH_KEY = 'mj.themeStudio.panelWidth.v1';
+/** Brand-overlay id used for the temporary "Preview on my workspace" application. */
+const WORKSPACE_PREVIEW_ID = 'theme-studio-draft-preview';
+let ThemeStudioDashboardComponent = class ThemeStudioDashboardComponent extends BaseDashboard {
+    cdRef;
+    themeService;
+    previewCanvas;
+    nameInput;
+    stageEl;
+    cssCm;
+    galDialog;
+    themesChangedSub;
+    presets = [
+        { name: 'MJ Default', seeds: { ...MJ_DEFAULT_SEEDS } },
+        { name: 'Cool Professional', seeds: { primary: '#4f46e5', accent: '#22d3ee', tertiary: '#0ea5e9', neutralChroma: 0.02, vibrancy: 1, radius: 8, depth: 1 } },
+        { name: 'Warm Editorial', seeds: { primary: '#b45309', accent: '#e11d48', tertiary: '#d97706', neutralChroma: 0.05, vibrancy: 1.05, radius: 14, depth: 1 } },
+        { name: 'High Contrast', seeds: { primary: '#0f172a', accent: '#2563eb', tertiary: '#0891b2', neutralChroma: 0, vibrancy: 1.2, radius: 4, depth: 1 } },
+        { name: 'Muted Enterprise', seeds: { primary: '#0f766e', accent: '#64748b', tertiary: '#0e7490', neutralChroma: 0.03, vibrancy: 0.8, radius: 8, depth: 0.8 } },
+    ];
+    fontOptions = [
+        { label: 'Inter (default)', value: MJ_DEFAULT_SEEDS.fontFamily },
+        { label: 'Georgia (serif)', value: "'Georgia', 'Times New Roman', serif" },
+        { label: 'Trebuchet', value: "'Trebuchet MS', Verdana, sans-serif" },
+        { label: 'System UI', value: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" },
+    ];
+    /** Height %s + labels for the demo bar chart. */
+    barHeights = [64, 88, 72, 96, 80, 100];
+    barValues = ['$0.5M', '$0.9M', '$0.7M', '$1.1M', '$0.8M', '$1.2M'];
+    barCats = ['Prospect', 'Qualify', 'Propose', 'Negotiate', 'Commit', 'Won'];
+    seeds = { ...MJ_DEFAULT_SEEDS };
+    derived = derive(this.seeds);
+    themes = [];
+    currentThemeId = null;
+    currentName = 'New Theme';
+    previewMode = 'light';
+    activeView = 'explorer';
+    panelCollapsed = false;
+    fullscreen = false;
+    editingName = false;
+    nameBackup = '';
+    themePickerOpen = false;
+    saving = false;
+    /** Preset gallery shown as step one of "New theme" (Q1#2). */
+    presetGalleryOpen = false;
+    /** Toolbar segmented controls (mj-view-toggle options). */
+    surfaceOptions = [
+        { key: 'explorer', label: 'Explorer UI' },
+        { key: 'artifact', label: 'Artifact' },
+    ];
+    modeOptions = [
+        { key: 'light', label: 'Light', icon: 'fa-solid fa-sun' },
+        { key: 'dark', label: 'Dark', icon: 'fa-solid fa-moon' },
+    ];
+    /** Preview-only branding/density knobs (not part of the seed contract yet). */
+    footerNotice = 'Confidential';
+    baseFontSize = 14;
+    density = 16;
+    /** Interactive-mock state (Q1#6) — clickable tabs/nav/switches/accordion so the
+     *  derived state token families (hover/active/focus) demonstrate themselves live. */
+    mockNavItems = ['Dashboards', 'Data', 'Agents'];
+    mockNav = 0;
+    mockTabs = ['Overview', 'Members', 'Renewals'];
+    mockTab = 0;
+    mockSwitchA = true;
+    mockSwitchB = false;
+    mockAccordionOpen = false;
+    /** Advanced customization (persisted): per-token overrides + raw scoped CSS. */
+    advancedOpen = false;
+    tokenOverrides = {};
+    customCss = '';
+    showGeneratedCss = false;
+    /** Visual token browser state (Q2#1). */
+    tokenSearch = '';
+    tokenGroups = [];
+    openTokenCats = new Set();
+    editingToken = null;
+    editingTokenValue = '';
+    editingTokenOriginal = '';
+    editingTokenWasOverridden = false;
+    /** Recipes (Q2#3): curated intents expanded to token sets. On/off is tracked by
+     *  PROVENANCE — `activeRecipeKeys` records exactly which override keys each active
+     *  recipe produced, so hand-set overrides never masquerade as an active recipe and
+     *  toggling off removes only keys the recipe still owns. */
+    chromeSelectorInfo = MJ_CHROME_SELECTOR_INFO;
+    recipeStates = [];
+    activeRecipeKeys = new Map();
+    /** Inline custom-CSS validation results (Q3#6). */
+    cssWarnings = [];
+    /** Panel sizing (Q3#1/#2). */
+    panelWidth = PANEL_MIN_WIDTH;
+    panelResizing = false;
+    manualPanelWidth = null;
+    /** "Preview on my workspace" (Q3#8). */
+    workspacePreviewOn = false;
+    priorOverlayId = null;
+    workspacePreviewTimer;
+    /** CodeMirror extensions for the custom-CSS editor: MJ selector + token completions. */
+    cssEditorExtensions = [
+        autocompletion({ override: [(ctx) => this.mjCssCompletionSource(ctx)] }),
+    ];
+    tokenHighlightEl = null;
+    appliedVarKeys = new Set();
+    liveTokenCache = null;
+    /** Sheet count the cache was built against — lazy-loaded chunks add stylesheets. */
+    liveTokenCacheSheetCount = -1;
+    constructor(cdRef, themeService) {
+        super();
+        this.cdRef = cdRef;
+        this.themeService = themeService;
+    }
+    ngAfterViewInit() {
+        this.syncPanelWidth();
+        this.applyPreviewVars();
+    }
+    async GetResourceDisplayName(_data) {
+        return 'Theme Studio';
+    }
+    initDashboard() {
+        this.seeds = { ...MJ_DEFAULT_SEEDS };
+        this.loadPersistedPanelWidth();
+        this.refreshRecipeStates();
+        this.recompute();
+        // Keep the switcher list fresh when themes change in the Manage Themes tab.
+        this.themesChangedSub = this.themeService.ThemesChanged$.subscribe(() => {
+            this.loadData();
+        });
+        this.registerAgentTools();
+    }
+    ngOnDestroy() {
+        this.themesChangedSub?.unsubscribe();
+        clearTimeout(this.agentContextTimer);
+        clearTimeout(this.workspacePreviewTimer);
+        if (this.workspacePreviewOn) {
+            void this.endWorkspacePreview(false);
+        }
+        super.ngOnDestroy();
+    }
+    /** Toggle the theme switcher; refresh the list on open so deletes/renames made in the
+     *  Manage Themes tab are reflected without a hard refresh. */
+    async toggleThemePicker() {
+        this.themePickerOpen = !this.themePickerOpen;
+        if (this.themePickerOpen) {
+            await this.loadData();
+        }
+    }
+    async loadData() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Themes',
+                OrderBy: 'Name',
+                ResultType: 'entity_object',
+            });
+            this.themes = (result.Success ? result.Results : []).map((t) => ({
+                id: t.ID,
+                name: t.Name,
+                isDefault: t.IsDefault,
+                swatches: this.swatchesFor(t.Seeds),
+            }));
+        }
+        catch {
+            this.themes = [];
+        }
+        this.publishAgentContext();
+        this.cdRef.detectChanges();
+    }
+    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'];
+        }
+    }
+    // ========================================
+    // Derivation — the single source feeding every preview surface + validation + save
+    // ========================================
+    recompute() {
+        this.derived = derive(this.seeds);
+        this.reexpandActiveRecipes();
+        this.applyPreviewVars();
+        this.rebuildTokenBrowser();
+        this.refreshWorkspacePreviewDebounced();
+    }
+    /** The text-on-primary contrast headline, reporting the WORST of light and dark (Q1#3). */
+    get onPrimaryWorst() {
+        const detail = this.onPrimaryDetail;
+        return pickWorstOnPrimary(detail.light, detail.dark);
+    }
+    /** Per-mode text-on-primary detail shown alongside the worst-of-both headline. */
+    get onPrimaryDetail() {
+        return {
+            light: this.derived.contrast.light.find((c) => c.name === 'text-on-primary'),
+            dark: this.derived.contrast.dark.find((c) => c.name === 'text-on-primary'),
+        };
+    }
+    /** All 10 derived categorical colors (--mj-viz-1..10) — the full chart-palette contract. */
+    get vizColors() {
+        return Array.from({ length: 10 }, (_, i) => this.derived.overlayVars[`--mj-viz-${i + 1}`]).filter(Boolean);
+    }
+    get vizOverridden() {
+        return !!this.seeds.vizPalette && this.seeds.vizPalette.length > 0;
+    }
+    /** Dark-mode primary the theme derives (ramp step), shown as a note on the Brand card. */
+    get darkPrimary() {
+        return this.derived.tokens.dark['--mj-brand-primary'];
+    }
+    /** Secondary (deep brand) derived for light mode. */
+    get secondaryColor() {
+        return this.derived.tokens.light['--mj-brand-secondary'];
+    }
+    editViz(index, event) {
+        const color = event.target.value;
+        const arr = [...(this.seeds.vizPalette ?? this.vizColors)];
+        arr[index] = color;
+        this.seeds.vizPalette = arr;
+        this.recompute();
+        this.publishAgentContextDebounced();
+    }
+    resetViz() {
+        delete this.seeds.vizPalette;
+        this.recompute();
+    }
+    /**
+     * Push the derived token map onto the preview canvas as scoped CSS vars — the
+     * fidelity guarantee. Also sets preview-only density/size vars and the mode attr so
+     * any [data-theme="dark"] rules inside the canvas resolve. Stale keys from removed
+     * overrides (e.g. a recipe toggled off) are cleared before re-applying.
+     */
+    applyPreviewVars() {
+        const el = this.previewCanvas?.nativeElement;
+        if (!el)
+            return;
+        // Advanced token overrides win, layered last — mirrors emitOverlayCss's merge order.
+        const vars = { ...this.derived.overlayVars, ...this.derived.tokens[this.previewMode], ...this.tokenOverrides };
+        for (const k of this.appliedVarKeys) {
+            if (!(k in vars))
+                el.style.removeProperty(k);
+        }
+        this.appliedVarKeys = new Set(Object.keys(vars));
+        for (const [k, v] of Object.entries(vars)) {
+            el.style.setProperty(k, v);
+        }
+        el.style.setProperty('--ts-space', `${this.density}px`);
+        el.style.setProperty('--ts-fs', `${this.baseFontSize}px`);
+        el.setAttribute('data-theme', this.previewMode);
+        this.applyPreviewCustomCss(el);
+    }
+    /** Inject the raw custom CSS into the preview, scoped to the canvas so it only affects
+     *  the preview (approximate — the mock's markup differs from live chrome selectors). */
+    applyPreviewCustomCss(el) {
+        const STYLE_ID = 'ts-preview-custom';
+        let style = el.querySelector(`style#${STYLE_ID}`);
+        const css = this.customCss.trim();
+        if (!css) {
+            style?.remove();
+            return;
+        }
+        if (!style) {
+            style = document.createElement('style');
+            style.id = STYLE_ID;
+            el.appendChild(style);
+        }
+        el.setAttribute('data-ts-preview', '1');
+        // Same hoist-then-scope as the live overlay so @keyframes/@font-face work in preview too.
+        style.textContent = emitScopedCustomCss('[data-ts-preview="1"]', css);
+    }
+    // ========================================
+    // Advanced customization — token browser + recipes + raw CSS
+    // ========================================
+    /** Token names in the derived contract (completion, insert picker, validation). */
+    get overridableTokens() {
+        const names = new Set([...Object.keys(this.derived.overlayVars), ...Object.keys(this.derived.tokens.light)]);
+        return Array.from(names).sort();
+    }
+    /** Overrides/custom CSS don't change derivation — re-apply the preview layer, refresh
+     *  the browser rows + recipe states, and keep any live workspace preview in sync. */
+    onAdvancedChanged() {
+        this.applyPreviewVars();
+        this.rebuildTokenBrowser();
+        this.refreshWorkspacePreviewDebounced();
+        this.publishAgentContextDebounced();
+    }
+    /** Expand/collapse the Advanced card, auto-widening the panel while it's open (Q3#2). */
+    toggleAdvanced() {
+        this.advancedOpen = !this.advancedOpen;
+        this.syncPanelWidth();
+    }
+    /** Closed-state summary — "3 token overrides · 14 lines CSS" (Q3#7). */
+    get advancedSummary() {
+        const overrideCount = Object.keys(this.tokenOverrides).length;
+        const cssLines = this.customCss.trim() ? this.customCss.trim().split('\n').length : 0;
+        if (!overrideCount && !cssLines)
+            return null;
+        const parts = [];
+        if (overrideCount)
+            parts.push(`${overrideCount} token override${overrideCount === 1 ? '' : 's'}`);
+        if (cssLines)
+            parts.push(`${cssLines} line${cssLines === 1 ? '' : 's'} CSS`);
+        return parts.join(' · ');
+    }
+    // ---- Visual token browser (Q2#1) ----
+    /** Rebuild the grouped, searchable token rows. */
+    rebuildTokenBrowser() {
+        const q = this.tokenSearch.trim().toLowerCase();
+        const names = new Set([
+            ...Object.keys(this.derived.overlayVars),
+            ...Object.keys(this.derived.tokens.light),
+            ...Object.keys(this.tokenOverrides),
+        ]);
+        const groups = TOKEN_CATEGORIES.map((c) => ({ key: c.key, label: c.label, rows: [], modified: 0 }));
+        const other = { key: 'other', label: 'Other', rows: [], modified: 0 };
+        for (const name of Array.from(names).sort()) {
+            if (q && !name.toLowerCase().includes(q))
+                continue;
+            const derivedVal = this.derived.tokens[this.previewMode][name] ?? this.derived.overlayVars[name] ?? '';
+            const overridden = name in this.tokenOverrides;
+            const value = overridden ? this.tokenOverrides[name] : derivedVal;
+            const hex = /^#[0-9a-fA-F]{6}$/.test(value.trim());
+            const row = { name, value, overridden, isColor: hex, colorValue: hex ? value.trim() : '#000000' };
+            const catIndex = TOKEN_CATEGORIES.findIndex((c) => c.match.test(name));
+            const group = catIndex >= 0 ? groups[catIndex] : other;
+            group.rows.push(row);
+            if (overridden)
+                group.modified++;
+        }
+        this.tokenGroups = [...groups, other].filter((g) => g.rows.length > 0);
+    }
+    onTokenSearchChanged() {
+        this.rebuildTokenBrowser();
+    }
+    toggleTokenCategory(key) {
+        if (this.openTokenCats.has(key)) {
+            this.openTokenCats.delete(key);
+        }
+        else {
+            this.openTokenCats.add(key);
+        }
+    }
+    /** A category is open when toggled open, or always while a search narrows the rows. */
+    isTokenCategoryOpen(key) {
+        return this.tokenSearch.trim().length > 0 || this.openTokenCats.has(key);
+    }
+    setTokenOverride(name, value) {
+        this.tokenOverrides = { ...this.tokenOverrides, [name]: value };
+        this.releaseRecipeOwnership(name);
+        this.onAdvancedChanged();
+    }
+    resetTokenOverride(name) {
+        const next = { ...this.tokenOverrides };
+        delete next[name];
+        this.tokenOverrides = next;
+        this.releaseRecipeOwnership(name);
+        if (this.editingToken === name)
+            this.editingToken = null;
+        this.onAdvancedChanged();
+    }
+    onTokenColorInput(name, event) {
+        this.setTokenOverride(name, event.target.value);
+    }
+    /** Begin inline text editing for a non-color token value. */
+    beginTokenEdit(row) {
+        this.editingToken = row.name;
+        this.editingTokenValue = row.value;
+        this.editingTokenOriginal = row.value;
+        this.editingTokenWasOverridden = row.overridden;
+    }
+    commitTokenEdit() {
+        if (!this.editingToken)
+            return;
+        const name = this.editingToken;
+        const value = this.editingTokenValue.trim();
+        this.editingToken = null;
+        // An unchanged, previously-underived value is a no-op — don't mark it modified.
+        if (!value || (!this.editingTokenWasOverridden && value === this.editingTokenOriginal))
+            return;
+        this.setTokenOverride(name, value);
+    }
+    cancelTokenEdit() {
+        this.editingToken = null;
+    }
+    // ---- Reverse highlight (Q2#2): token row hover → outline preview elements ----
+    /** Outline the preview elements that use `token` (exact by construction — the canvas
+     *  markup is ours; see TOKEN_PREVIEW_TARGETS). Unmapped tokens simply don't highlight. */
+    highlightTokenTargets(token) {
+        const canvas = this.previewCanvas?.nativeElement;
+        if (!canvas)
+            return;
+        const selectors = TOKEN_PREVIEW_TARGETS[token];
+        if (!selectors?.length) {
+            this.clearTokenHighlight();
+            return;
+        }
+        if (!this.tokenHighlightEl || !this.tokenHighlightEl.isConnected) {
+            this.tokenHighlightEl = document.createElement('style');
+            this.tokenHighlightEl.id = 'ts-token-highlight';
+            canvas.appendChild(this.tokenHighlightEl);
+        }
+        const scoped = selectors.map((s) => `.ts-canvas ${s}`).join(', ');
+        // Fixed magenta on purpose: an inspector affordance that must stand out on any theme.
+        this.tokenHighlightEl.textContent = `${scoped} { outline: 2px solid #e935c1 !important; outline-offset: 2px; }`;
+    }
+    clearTokenHighlight() {
+        if (this.tokenHighlightEl)
+            this.tokenHighlightEl.textContent = '';
+    }
+    // ---- Recipes (Q2#3) — provenance-tracked ----
+    /** Toggle a recipe: expand its token set into overrides (recording ownership), or
+     *  remove exactly the keys it still owns. Keys the user hand-edited after enabling
+     *  were released from ownership at edit time and are never touched here. */
+    toggleRecipe(recipe) {
+        const owned = this.activeRecipeKeys.get(recipe.id);
+        const next = { ...this.tokenOverrides };
+        if (owned) {
+            for (const k of owned)
+                delete next[k];
+            this.activeRecipeKeys.delete(recipe.id);
+        }
+        else {
+            const tokens = recipe.tokens(this.derived, this.seeds);
+            const keys = Object.keys(tokens);
+            if (keys.length === 0)
+                return;
+            Object.assign(next, tokens);
+            this.activeRecipeKeys.set(recipe.id, keys);
+        }
+        this.tokenOverrides = next;
+        this.refreshRecipeStates();
+        this.onAdvancedChanged();
+    }
+    /** Derive the on/off rows shown in the Recipes card from the provenance map. */
+    refreshRecipeStates() {
+        this.recipeStates = THEME_RECIPES.map((recipe) => ({ recipe, on: this.activeRecipeKeys.has(recipe.id) }));
+    }
+    /** A hand edit (set or reset) takes ownership of `name` away from any active recipe,
+     *  so recipe toggle-off / re-expansion never clobbers or deletes the user's value.
+     *  A recipe left with no owned keys is effectively off. */
+    releaseRecipeOwnership(name) {
+        let changed = false;
+        for (const [id, keys] of this.activeRecipeKeys) {
+            if (!keys.includes(name))
+                continue;
+            const remaining = keys.filter((k) => k !== name);
+            if (remaining.length > 0) {
+                this.activeRecipeKeys.set(id, remaining);
+            }
+            else {
+                this.activeRecipeKeys.delete(id);
+            }
+            changed = true;
+        }
+        if (changed)
+            this.refreshRecipeStates();
+    }
+    /** Re-expand active recipes from the CURRENT derived theme so their values follow the
+     *  brand as seeds change. Only recipe-owned keys are rewritten; keys a recipe no
+     *  longer produces are dropped from both the overrides and the ownership record. */
+    reexpandActiveRecipes() {
+        if (this.activeRecipeKeys.size === 0)
+            return;
+        const next = { ...this.tokenOverrides };
+        for (const recipe of THEME_RECIPES) {
+            const owned = this.activeRecipeKeys.get(recipe.id);
+            if (!owned)
+                continue;
+            const tokens = recipe.tokens(this.derived, this.seeds);
+            const remaining = [];
+            for (const key of owned) {
+                if (key in tokens) {
+                    next[key] = tokens[key];
+                    remaining.push(key);
+                }
+                else {
+                    delete next[key];
+                }
+            }
+            if (remaining.length > 0) {
+                this.activeRecipeKeys.set(recipe.id, remaining);
+            }
+            else {
+                this.activeRecipeKeys.delete(recipe.id);
+            }
+        }
+        this.tokenOverrides = next;
+        this.refreshRecipeStates();
+    }
+    /** Rebuild provenance for a freshly loaded override set (no stored provenance):
+     *  a recipe is considered active only when every key it would produce is present
+     *  with EXACTLY the value it would produce — since active recipes track the seeds
+     *  (see reexpandActiveRecipes), a saved active recipe always value-matches. */
+    inferActiveRecipes() {
+        this.activeRecipeKeys.clear();
+        for (const recipe of THEME_RECIPES) {
+            const tokens = recipe.tokens(this.derived, this.seeds);
+            const keys = Object.keys(tokens);
+            if (keys.length > 0 && keys.every((k) => this.tokenOverrides[k] === tokens[k])) {
+                this.activeRecipeKeys.set(recipe.id, keys);
+            }
+        }
+        this.refreshRecipeStates();
+    }
+    // ---- Custom CSS editor (Q3#4/#5/#6) ----
+    onCssEditorChange(value) {
+        this.customCss = value;
+        this.validateCustomCss();
+        this.onAdvancedChanged();
+    }
+    /** All completions offered: real chrome selectors + the theme's derived token names. */
+    get cssSuggestions() {
+        return [...MJ_CHROME_SELECTORS, ...this.overridableTokens];
+    }
+    /** CodeMirror completion source over the MJ chrome selectors + `--mj-*` tokens. */
+    mjCssCompletionSource(context) {
+        const word = context.matchBefore(/[-\w.]+/);
+        if (!word || (word.text.length < 2 && !context.explicit))
+            return null;
+        return {
+            from: word.from,
+            options: this.cssSuggestions.map((s) => ({ label: s, type: s.startsWith('--') ? 'variable' : 'type' })),
+            validFor: /^[-\w.]*$/,
+        };
+    }
+    /** Insert a chrome selector at the caret; on an empty line, scaffold a full rule. */
+    insertChromeSelector(selector) {
+        const view = this.cssCm?.view;
+        if (!view) {
+            const prefix = this.customCss.trim() ? `${this.customCss.replace(/\s+$/, '')}\n\n` : '';
+            this.onCssEditorChange(`${prefix}${selector} {\n  \n}`);
+            return;
+        }
+        const pos = view.state.selection.main.head;
+        const line = view.state.doc.lineAt(pos);
+        if (line.text.trim().length === 0) {
+            const opener = `${selector} {\n  `;
+            view.dispatch({
+                changes: { from: pos, insert: `${opener}\n}` },
+                selection: { anchor: pos + opener.length },
+            });
+        }
+        else {
+            view.dispatch({
+                changes: { from: pos, insert: selector },
+                selection: { anchor: pos + selector.length },
+            });
+        }
+        view.focus();
+    }
+    /** Insert-token picker (same enumeration the overrides use). */
+    onInsertTokenPick(event) {
+        const select = event.target;
+        const token = select.value;
+        select.value = '';
+        if (!token)
+            return;
+        const text = `var(${token})`;
+        const view = this.cssCm?.view;
+        if (!view) {
+            this.onCssEditorChange(this.customCss + text);
+            return;
+        }
+        const pos = view.state.selection.main.head;
+        view.dispatch({ changes: { from: pos, insert: text }, selection: { anchor: pos + text.length } });
+        view.focus();
+    }
+    /** Inline validation at edit time (Q3#6): @import removal + unknown --mj-* names. */
+    validateCustomCss() {
+        this.cssWarnings = buildCssWarnings(this.customCss, this.knownMjTokens());
+    }
+    /** The full known --mj-* set: the derived contract ∪ every token the live app defines. */
+    knownMjTokens() {
+        const known = new Set(this.overridableTokens);
+        for (const t of this.collectLiveMjTokens())
+            known.add(t);
+        return known;
+    }
+    /** Scan loaded stylesheets for every defined `--mj-*` custom property, so the
+     *  unknown-name warning validates against the real base contract (no false positives
+     *  on base tokens outside the derived overlay, e.g. --mj-shadow-sm). Re-scans when
+     *  the stylesheet count changes (lazy-loaded chunks add sheets after first scan). */
+    collectLiveMjTokens() {
+        if (this.liveTokenCache && document.styleSheets.length === this.liveTokenCacheSheetCount) {
+            return this.liveTokenCache;
+        }
+        this.liveTokenCacheSheetCount = document.styleSheets.length;
+        const set = new Set();
+        for (const sheet of Array.from(document.styleSheets)) {
+            let rules;
+            try {
+                rules = sheet.cssRules;
+            }
+            catch {
+                continue; // cross-origin sheet
+            }
+            for (const rule of Array.from(rules)) {
+                this.collectTokensFromRule(rule, set);
+            }
+        }
+        this.liveTokenCache = set;
+        return set;
+    }
+    collectTokensFromRule(rule, set) {
+        if (rule instanceof CSSStyleRule) {
+            for (const prop of Array.from(rule.style)) {
+                if (prop.startsWith('--mj-'))
+                    set.add(prop);
+            }
+        }
+        const children = rule.cssRules;
+        if (children) {
+            for (const child of Array.from(children)) {
+                this.collectTokensFromRule(child, set);
+            }
+        }
+    }
+    /** The actual overlay CSS this theme produces (tokens + advanced layer) — read-only view. */
+    get generatedCss() {
+        return emitOverlayCss(this.currentThemeId ?? 'preview', this.derived, {
+            overrides: this.tokenOverrides,
+            customCss: this.customCss,
+        });
+    }
+    async copyGeneratedCss() {
+        try {
+            await navigator.clipboard.writeText(this.generatedCss);
+            this.notify('Generated CSS copied to clipboard.');
+        }
+        catch {
+            this.notify('Copy failed — select the text and copy manually.');
+        }
+    }
+    // ========================================
+    // View / panel / fullscreen chrome
+    // ========================================
+    setView(view) {
+        this.activeView = view;
+    }
+    setPreviewMode(mode) {
+        this.previewMode = mode;
+        this.applyPreviewVars();
+        this.rebuildTokenBrowser();
+        this.publishAgentContextDebounced();
+    }
+    /** mj-view-toggle (KeyChange) adapter for the light/dark segment. */
+    onModeToggle(key) {
+        this.setPreviewMode(key === 'dark' ? 'dark' : 'light');
+    }
+    /** mj-view-toggle (KeyChange) adapter for the preview-surface chips. */
+    onSurfaceToggle(key) {
+        this.setView(key === 'artifact' ? 'artifact' : 'explorer');
+        this.publishAgentContextDebounced();
+    }
+    togglePanel() {
+        this.panelCollapsed = !this.panelCollapsed;
+        this.publishAgentContextDebounced();
+    }
+    // ---- Panel resize (Q3#1): drag handle, clamped, persisted per user ----
+    /** Clamp a requested panel width: >= the design minimum, <= 55% of the stage, and
+     *  never eating the canvas below its ~640px floor (the resize clamps, not the preview). */
+    clampPanelWidth(width) {
+        const stageWidth = this.stageEl?.nativeElement.clientWidth ?? window.innerWidth;
+        const max = Math.max(PANEL_MIN_WIDTH, Math.min(stageWidth * PANEL_MAX_FRACTION, stageWidth - PREVIEW_MIN_WIDTH));
+        return Math.round(Math.min(max, Math.max(PANEL_MIN_WIDTH, width)));
+    }
+    /** Manually-dragged width wins; otherwise auto-widen while Advanced is open (Q3#2). */
+    syncPanelWidth() {
+        this.panelWidth = this.clampPanelWidth(this.manualPanelWidth ?? (this.advancedOpen ? PANEL_ADVANCED_WIDTH : PANEL_MIN_WIDTH));
+    }
+    loadPersistedPanelWidth() {
+        try {
+            const raw = UserInfoEngine.Instance.GetSetting(PANEL_WIDTH_KEY);
+            const parsed = raw ? parseInt(raw, 10) : NaN;
+            if (Number.isFinite(parsed) && parsed >= PANEL_MIN_WIDTH) {
+                this.manualPanelWidth = parsed;
+            }
+        }
+        catch {
+            // no persisted width — defaults apply
+        }
+        this.syncPanelWidth();
+    }
+    startPanelResize(event) {
+        event.preventDefault();
+        const handle = event.target;
+        this.panelResizing = true;
+        const startX = event.clientX;
+        const startWidth = this.panelWidth;
+        const onMove = (e) => {
+            this.panelWidth = this.clampPanelWidth(startWidth + (startX - e.clientX));
+            this.cdRef.detectChanges();
+        };
+        const end = () => {
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
+            this.panelResizing = false;
+            this.manualPanelWidth = this.panelWidth;
+            UserInfoEngine.Instance.SetSettingDebounced(PANEL_WIDTH_KEY, String(this.panelWidth));
+            this.cdRef.detectChanges();
+        };
+        // Pointer capture routes all events to the handle until release: drags ending
+        // outside the window still fire pointerup, pointercancel (touch interruption) is
+        // handled, and the listeners die with the element if the component is destroyed.
+        handle.setPointerCapture(event.pointerId);
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', end);
+        handle.addEventListener('pointercancel', end);
+    }
+    onWindowResize() {
+        this.syncPanelWidth();
+    }
+    /** Prefer the native Fullscreen API — it promotes the canvas to the browser's top
+     *  layer, so it fills the real screen regardless of any transformed/`contain`ed
+     *  ancestor, and browser Esc reliably exits. Falls back to CSS-fixed overlay if the
+     *  API is unavailable or rejects. */
+    async toggleFullscreen(on) {
+        try {
+            if (on) {
+                const el = this.previewCanvas?.nativeElement;
+                if (el?.requestFullscreen) {
+                    await el.requestFullscreen();
+                    return; // state syncs via fullscreenchange
+                }
+            }
+            else if (document.fullscreenElement) {
+                await document.exitFullscreen();
+                return;
+            }
+        }
+        catch {
+            /* fall through to CSS fallback */
+        }
+        this.fullscreen = on;
+        this.cdRef.detectChanges();
+    }
+    onFullscreenChange() {
+        this.fullscreen = !!document.fullscreenElement;
+        this.cdRef.detectChanges();
+    }
+    onEscape() {
+        if (this.presetGalleryOpen) {
+            this.presetGalleryOpen = false;
+            this.cdRef.detectChanges();
+            return;
+        }
+        // Only needed for the CSS fallback; native fullscreen handles Esc itself.
+        if (this.fullscreen && !document.fullscreenElement) {
+            this.fullscreen = false;
+            this.cdRef.detectChanges();
+        }
+    }
+    onDensityChanged() {
+        this.applyPreviewVars();
+    }
+    onBaseSizeChanged() {
+        this.applyPreviewVars();
+    }
+    // ========================================
+    // Editing
+    // ========================================
+    applyPreset(preset) {
+        this.seeds = { ...preset.seeds };
+        if (!this.currentThemeId) {
+            this.currentName = this.uniqueName(preset.name);
+        }
+        this.recompute();
+    }
+    uniqueName(base) {
+        const taken = new Set(this.themes.map((t) => t.name.trim().toLowerCase()));
+        if (!taken.has(base.trim().toLowerCase()))
+            return base;
+        for (let i = 2; i < 1000; i++) {
+            const candidate = `${base} ${i}`;
+            if (!taken.has(candidate.toLowerCase()))
+                return candidate;
+        }
+        return `${base} ${Date.now()}`;
+    }
+    onSeedsChanged() {
+        this.recompute();
+        this.publishAgentContextDebounced();
+    }
+    async selectTheme(item) {
+        this.themePickerOpen = false;
+        const md = this.ProviderToUse;
+        const entity = await md.GetEntityObject('MJ: Themes');
+        if (!(await entity.Load(item.id))) {
+            this.cdRef.detectChanges();
+            return;
+        }
+        this.currentThemeId = entity.ID;
+        this.currentName = entity.Name;
+        try {
+            this.seeds = { ...MJ_DEFAULT_SEEDS, ...JSON.parse(entity.Seeds) };
+        }
+        catch {
+            this.seeds = { ...MJ_DEFAULT_SEEDS };
+        }
+        this.tokenOverrides = parseOverridesJson(entity.Overrides);
+        this.customCss = entity.CustomCSS ?? '';
+        this.validateCustomCss();
+        // Provenance from the outgoing theme must not survive into the loaded one; the
+        // loaded overrides carry no provenance, so rebuild it by exact value match.
+        this.activeRecipeKeys.clear();
+        this.recompute();
+        this.inferActiveRecipes();
+        this.publishAgentContext();
+        // Async continuation under the OnPush resource wrapper: refresh the header pill,
+        // editor inputs, and preview now that the loaded theme is in place.
+        this.cdRef.detectChanges();
+    }
+    get currentIsDefault() {
+        const id = this.currentThemeId;
+        return id ? this.themes.find((t) => UUIDsEqual(t.id, id))?.isDefault ?? false : false;
+    }
+    /** Whether a picker row is the currently-loaded theme (case-insensitive GUID compare). */
+    isCurrentTheme(id) {
+        return !!this.currentThemeId && UUIDsEqual(id, this.currentThemeId);
+    }
+    /** The protected built-in theme is read-only — editing/saving over it is blocked. */
+    get isBuiltInSelected() {
+        return isBuiltInTheme(this.currentThemeId);
+    }
+    /** Fork the current seeds into a new, editable theme (used to customize the built-in). */
+    saveAsCopy() {
+        this.currentThemeId = null;
+        this.currentName = this.uniqueName(`${this.currentName} Copy`);
+        this.notify(`Editing a copy — "${this.currentName}". Save to create it.`);
+    }
+    /** Inline-rename the current theme in the header. For a saved theme the new name is
+     *  persisted immediately on commit; for an unsaved draft it persists on Save. */
+    startRename() {
+        if (this.isBuiltInSelected) {
+            this.notify('The built-in theme is read-only — use "Save as copy" to rename it.');
+            return;
+        }
+        this.nameBackup = this.currentName;
+        this.editingName = true;
+        setTimeout(() => this.nameInput?.nativeElement.select());
+    }
+    async commitRename() {
+        if (!this.editingName)
+            return;
+        this.editingName = false;
+        this.currentName = this.currentName.trim() || this.nameBackup || 'Untitled theme';
+        // No change, unsaved draft, or built-in → nothing to persist now.
+        if (this.currentName === this.nameBackup || !this.currentThemeId || this.isBuiltInSelected)
+            return;
+        try {
+            const md = this.ProviderToUse;
+            const entity = await md.GetEntityObject('MJ: Themes');
+            if (!(await entity.Load(this.currentThemeId)))
+                return;
+            entity.Name = this.currentName;
+            if (await entity.Save()) {
+                await this.loadData();
+                this.themeService.NotifyThemesChanged();
+                this.notify(`Renamed to "${this.currentName}".`);
+            }
+            else {
+                const msg = entity.LatestResult?.CompleteMessage ?? 'unknown error';
+                this.currentName = this.nameBackup;
+                this.notify(/UQ_Theme_Name|UNIQUE KEY/i.test(msg) ? `A theme named "${entity.Name}" already exists — choose a different name.` : `Rename failed: ${msg}`, 'error');
+            }
+        }
+        catch (e) {
+            this.currentName = this.nameBackup;
+            this.notify(`Rename failed: ${e instanceof Error ? e.message : String(e)}`, 'error');
+        }
+        finally {
+            this.cdRef.detectChanges();
+        }
+    }
+    cancelRename() {
+        this.currentName = this.nameBackup;
+        this.editingName = false;
+    }
+    /**
+     * Start a fresh, unsaved draft. From the UI this opens on the preset gallery
+     * (choosing a personality first, Q1#2); agent-driven calls skip straight to the
+     * MJ default seeds.
+     */
+    newTheme(showGallery = true) {
+        this.themePickerOpen = false;
+        this.currentThemeId = null;
+        this.currentName = 'New Theme';
+        this.seeds = { ...MJ_DEFAULT_SEEDS };
+        this.tokenOverrides = {};
+        this.customCss = '';
+        this.cssWarnings = [];
+        this.activeRecipeKeys.clear();
+        this.refreshRecipeStates();
+        this.recompute();
+        this.presetGalleryOpen = showGallery;
+        if (showGallery)
+            this.focusPresetGallery();
+    }
+    /** Move focus into the gallery once it renders — aria-modal without focus is a trap
+     *  for keyboard/AT users (Esc + Tab must operate on the dialog, not what's behind it). */
+    focusPresetGallery() {
+        setTimeout(() => this.galDialog?.nativeElement.focus());
+    }
+    /** Preset gallery: pick a personality card as step one of a new theme. */
+    choosePreset(preset) {
+        this.presetGalleryOpen = false;
+        this.applyPreset(preset);
+        this.cdRef.detectChanges();
+    }
+    /** Close the gallery keeping the MJ-default draft (the "start blank" path). */
+    closePresetGallery() {
+        this.presetGalleryOpen = false;
+    }
+    discard() {
+        const id = this.currentThemeId;
+        const current = id ? this.themes.find((t) => UUIDsEqual(t.id, id)) : undefined;
+        if (current) {
+            this.selectTheme(current);
+        }
+        else {
+            this.newTheme(false);
+        }
+    }
+    // ========================================
+    // Persistence
+    // ========================================
+    async save() {
+        if (this.isBuiltInSelected) {
+            this.notify('The built-in theme is read-only — use "Save as copy" to customize it.');
+            return;
+        }
+        const name = this.currentName.trim();
+        if (!name) {
+            this.notify('Give the theme a name before saving.');
+            return;
+        }
+        // If this isn't already a loaded theme but the name matches an existing one, treat
+        // Save as an UPDATE to that theme (names are unique, so a match is unambiguous) —
+        // rather than blocking and forcing the user to make a new theme.
+        if (!this.currentThemeId) {
+            const existing = this.themes.find((t) => t.name.trim().toLowerCase() === name.toLowerCase());
+            if (existing) {
+                if (isBuiltInTheme(existing.id)) {
+                    this.notify('The built-in theme is read-only — rename it to save a copy.');
+                    return;
+                }
+                this.currentThemeId = existing.id;
+            }
+        }
+        this.saving = true;
+        try {
+            const md = this.ProviderToUse;
+            const entity = await md.GetEntityObject('MJ: Themes');
+            if (this.currentThemeId) {
+                if (!(await entity.Load(this.currentThemeId))) {
+                    this.notify('Could not load the theme to update — it may have been deleted. Refresh and try again.', 'error');
+                    return;
+                }
+            }
+            else {
+                entity.NewRecord();
+                entity.Status = 'Active';
+            }
+            entity.Name = name;
+            entity.Seeds = JSON.stringify(this.seeds);
+            entity.Overrides = Object.keys(this.tokenOverrides).length ? JSON.stringify(this.tokenOverrides) : null;
+            entity.CustomCSS = this.customCss.trim() || null;
+            if (await entity.Save()) {
+                const wasNew = !this.currentThemeId;
+                this.currentThemeId = entity.ID;
+                // While the draft preview is on, BrandOverlayId is the preview id — the theme
+                // the user actually has applied is the one the preview will restore.
+                const liveOverlayId = this.workspacePreviewOn ? this.priorOverlayId : this.themeService.BrandOverlayId;
+                if (UUIDsEqual(liveOverlayId, entity.ID) || (!wasNew && entity.IsDefault)) {
+                    await this.applyLive();
+                }
+                await this.loadData();
+                this.themeService.NotifyThemesChanged();
+                this.notify(`Saved "${entity.Name}".`);
+            }
+            else {
+                this.notify(`Save failed: ${entity.LatestResult?.CompleteMessage ?? 'unknown error'}`, 'error');
+            }
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            this.notify(/UQ_Theme_Name|UNIQUE KEY/i.test(msg) ? `A theme named "${name}" already exists — choose a different name.` : `Save failed: ${msg}`, 'error');
+        }
+        finally {
+            this.saving = false;
+            this.cdRef.detectChanges();
+        }
+    }
+    async setAsDefault() {
+        if (this.currentThemeId)
+            await this.setDefaultById(this.currentThemeId);
+    }
+    /**
+     * Make theme `id` the single org default and apply it live. Clears any other
+     * default first (app-layer enforcement — there is no DB unique index), then applies
+     * the persisted seeds via ThemeService so the running app re-themes immediately.
+     */
+    async setDefaultById(id) {
+        try {
+            const md = this.ProviderToUse;
+            const rv = new RunView();
+            const others = await rv.RunView({
+                EntityName: 'MJ: Themes',
+                ExtraFilter: `IsDefault = 1 AND ID <> '${id}'`,
+                ResultType: 'entity_object',
+            });
+            if (others.Success) {
+                for (const other of others.Results) {
+                    other.IsDefault = false;
+                    if (!(await other.Save())) {
+                        this.notify(`Could not clear the previous default "${other.Name}": ${other.LatestResult?.CompleteMessage ?? 'unknown error'}`, 'error');
+                        return;
+                    }
+                }
+            }
+            const entity = await md.GetEntityObject('MJ: Themes');
+            if (!(await entity.Load(id)))
+                return;
+            entity.IsDefault = true;
+            if (!(await entity.Save())) {
+                this.notify(`Could not set default: ${entity.LatestResult?.CompleteMessage ?? 'unknown error'}`, 'error');
+                return;
+            }
+            let seeds;
+            try {
+                seeds = { ...MJ_DEFAULT_SEEDS, ...JSON.parse(entity.Seeds) };
+            }
+            catch {
+                seeds = { ...MJ_DEFAULT_SEEDS };
+            }
+            this.abandonWorkspacePreview();
+            this.themeService.RegisterBrandTheme({ id: entity.ID, name: entity.Name, seeds, overrides: entity.Overrides, customCss: entity.CustomCSS });
+            await this.themeService.ApplyBrandOverlay(entity.ID);
+            await this.loadData();
+            this.themeService.NotifyThemesChanged();
+            this.notify(`"${entity.Name}" is now the default and is applied.`);
+        }
+        catch (e) {
+            this.notify(`Could not set default: ${e instanceof Error ? e.message : String(e)}`, 'error');
+        }
+        finally {
+            this.cdRef.detectChanges();
+        }
+    }
+    /** Apply the current (edited) theme to the live app via ThemeService (used on save). */
+    async applyLive() {
+        if (!this.currentThemeId)
+            return;
+        // A real apply supersedes any draft workspace preview — abandon it (no restore;
+        // the overlay applied below takes over) so a later toggle-off can't revert this.
+        this.abandonWorkspacePreview();
+        this.themeService.RegisterBrandTheme({
+            id: this.currentThemeId,
+            name: this.currentName,
+            seeds: this.seeds,
+            overrides: this.tokenOverrides,
+            customCss: this.customCss,
+        });
+        await this.themeService.ApplyBrandOverlay(this.currentThemeId);
+    }
+    /**
+     * Apply this theme to the current user's workspace now and remember it as their
+     * choice (persists across sessions). Distinct from "Set as org default", which is
+     * the organization-wide fallback for everyone.
+     */
+    async applyToMe() {
+        if (!this.currentThemeId)
+            return;
+        await this.applyLive();
+        await this.themeService.SetSelectedBrandTheme(this.currentThemeId);
+        this.notify(`Applied "${this.currentName}" to your workspace — it stays applied across sessions.`);
+        this.cdRef.detectChanges();
+    }
+    // ---- "Preview on my workspace" (Q3#8): draft against the REAL chrome ----
+    /**
+     * Temporarily apply the in-memory draft (seeds + overrides + custom CSS) to the real
+     * app chrome so custom-CSS selectors are authored against reality. The preview stays
+     * on while you navigate other tabs (that's the point — the Studio tab is cached, not
+     * destroyed) and reverts on toggle-off or when the Studio tab is closed. It is never
+     * persisted ({ persist: false }), so a reload always restores the user's real theme.
+     */
+    async toggleWorkspacePreview() {
+        if (this.workspacePreviewOn) {
+            await this.endWorkspacePreview();
+            return;
+        }
+        this.priorOverlayId = this.themeService.BrandOverlayId;
+        this.registerDraftPreview();
+        await this.themeService.ApplyBrandOverlay(WORKSPACE_PREVIEW_ID, { persist: false });
+        this.workspacePreviewOn = true;
+        this.notify('Draft applied to your workspace for preview — edits update live. Toggle off to revert.', 'info');
+        this.cdRef.detectChanges();
+    }
+    registerDraftPreview() {
+        this.themeService.RegisterBrandTheme({
+            id: WORKSPACE_PREVIEW_ID,
+            name: `${this.currentName} (draft preview)`,
+            seeds: this.seeds,
+            overrides: this.tokenOverrides,
+            customCss: this.customCss,
+        });
+    }
+    /** While the workspace preview is on, keep it tracking the draft (debounced). */
+    refreshWorkspacePreviewDebounced() {
+        if (!this.workspacePreviewOn)
+            return;
+        clearTimeout(this.workspacePreviewTimer);
+        this.workspacePreviewTimer = setTimeout(() => {
+            if (!this.workspacePreviewOn)
+                return;
+            this.registerDraftPreview();
+            void this.themeService.ApplyBrandOverlay(WORKSPACE_PREVIEW_ID, { persist: false });
+        }, 400);
+    }
+    /** Drop the draft preview WITHOUT restoring the prior overlay — used when a real
+     *  apply (Apply to me / save-of-live-theme / set org default) is about to take over
+     *  the workspace, so a later toggle-off can't silently revert what the user applied. */
+    abandonWorkspacePreview() {
+        if (!this.workspacePreviewOn)
+            return;
+        this.workspacePreviewOn = false;
+        clearTimeout(this.workspacePreviewTimer);
+        this.priorOverlayId = null;
+    }
+    async endWorkspacePreview(notifyUser = true) {
+        if (!this.workspacePreviewOn)
+            return;
+        this.workspacePreviewOn = false;
+        clearTimeout(this.workspacePreviewTimer);
+        if (this.priorOverlayId) {
+            await this.themeService.ApplyBrandOverlay(this.priorOverlayId);
+        }
+        else {
+            this.themeService.ClearBrandOverlay();
+        }
+        this.priorOverlayId = null;
+        if (notifyUser) {
+            this.notify('Workspace preview ended — your previous theme is back.');
+            this.cdRef.detectChanges();
+        }
+    }
+    notify(message, style = 'success') {
+        MJNotificationService.Instance.CreateSimpleNotification(message, style, 2500);
+    }
+    // ---------------------------------------------------------------
+    // Agent context + tools (read / preview-state / user-scoped only —
+    // see the SAFETY BOUNDARY in theme-agent-context.ts)
+    // ---------------------------------------------------------------
+    agentContextTimer;
+    summaryRows() {
+        return this.themes.map((t) => ({
+            ID: t.id,
+            Name: t.name,
+            Status: 'Active',
+            IsDefault: t.isDefault,
+            BuiltIn: isBuiltInTheme(t.id),
+        }));
+    }
+    publishAgentContext() {
+        this.navigationService.SetAgentContext(this, buildThemeStudioAgentContext({
+            Themes: this.summaryRows(),
+            CurrentThemeID: this.currentThemeId,
+            CurrentThemeName: this.currentName,
+            IsBuiltInSelected: this.isBuiltInSelected,
+            PreviewMode: this.previewMode,
+            PreviewSurface: this.activeView,
+            EditorPanelOpen: !this.panelCollapsed,
+            Seeds: this.seeds,
+            OverrideTokenCount: Object.keys(this.tokenOverrides).length,
+            HasCustomCss: this.customCss.trim().length > 0,
+            Contrast: this.derived.contrast,
+        }));
+    }
+    /** Coalesce slider-drag bursts into one context publish. */
+    publishAgentContextDebounced() {
+        clearTimeout(this.agentContextTimer);
+        this.agentContextTimer = setTimeout(() => this.publishAgentContext(), 300);
+    }
+    registerAgentTools() {
+        this.navigationService.SetAgentClientTools(this, [
+            {
+                Name: 'ListThemes',
+                Description: 'Reload and return the saved brand themes available in the studio.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    await this.loadData();
+                    return { Success: true, Data: { ThemeNames: this.themes.map((t) => t.name).slice(0, 25) } };
+                },
+            },
+            {
+                Name: 'SelectTheme',
+                Description: 'Load a saved theme into the editor, referenced by ID or name (partial, case-insensitive match accepted).',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { theme: { type: 'string', description: 'The theme ID or name.' } },
+                    required: ['theme'],
+                },
+                Handler: async (params) => {
+                    const resolved = resolveThemeByIDOrName(this.summaryRows(), params['theme']);
+                    if (!resolved.ok) {
+                        return { Success: false, ErrorMessage: resolved.error };
+                    }
+                    const item = this.themes.find((t) => UUIDsEqual(t.id, resolved.value.ID));
+                    if (!item) {
+                        return { Success: false, ErrorMessage: 'Theme list changed — run ListThemes and retry.' };
+                    }
+                    await this.selectTheme(item);
+                    return { Success: true, Data: { CurrentThemeName: this.currentName } };
+                },
+            },
+            {
+                Name: 'NewTheme',
+                Description: 'Start a fresh, unsaved theme draft from the MJ default seeds (nothing persists until the user saves).',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    this.newTheme(false);
+                    this.cdRef.detectChanges();
+                    return { Success: true, Data: { CurrentThemeName: this.currentName } };
+                },
+            },
+            {
+                Name: 'ApplyPreset',
+                Description: `Apply a named starting preset to the in-memory draft. Available presets: ${this.presets.map((p) => p.name).join(', ')}.`,
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { preset: { type: 'string', description: 'The preset name (partial match accepted).' } },
+                    required: ['preset'],
+                },
+                Handler: async (params) => {
+                    const ref = typeof params['preset'] === 'string' ? params['preset'].trim().toLowerCase() : '';
+                    const preset = this.presets.find((p) => p.name.toLowerCase() === ref)
+                        ?? this.presets.find((p) => p.name.toLowerCase().includes(ref));
+                    if (!ref || !preset) {
+                        return { Success: false, ErrorMessage: `Unknown preset. Available: ${this.presets.map((p) => p.name).join(', ')}.` };
+                    }
+                    this.presetGalleryOpen = false;
+                    this.applyPreset(preset);
+                    this.publishAgentContext();
+                    this.cdRef.detectChanges();
+                    return { Success: true, Data: { Preset: preset.name } };
+                },
+            },
+            {
+                Name: 'SetSeeds',
+                Description: 'Update one or more brand seeds on the IN-MEMORY draft (preview only — the user saves from the UI). Colors are hex like #0076b6.',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: {
+                        primary: { type: 'string', description: 'Primary brand hex color.' },
+                        accent: { type: 'string', description: 'Accent hex color.' },
+                        tertiary: { type: 'string', description: 'Tertiary hex color.' },
+                        neutralChroma: { type: 'number', description: 'Brand tint in grays, 0–0.08.' },
+                        vibrancy: { type: 'number', description: 'Ramp saturation multiplier, 0.5–1.4.' },
+                        radius: { type: 'number', description: 'Base corner radius in px, 0–20.' },
+                        depth: { type: 'number', description: 'Brand shadow strength, 0–1.' },
+                    },
+                },
+                Handler: async (params) => this.handleSetSeeds(params),
+            },
+            {
+                Name: 'SetPreviewMode',
+                Description: "Switch the preview between 'light' and 'dark'.",
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { mode: { type: 'string', description: "'light' | 'dark'" } },
+                    required: ['mode'],
+                },
+                Handler: async (params) => {
+                    const mode = params['mode'];
+                    if (mode !== 'light' && mode !== 'dark') {
+                        return { Success: false, ErrorMessage: "mode must be 'light' or 'dark'." };
+                    }
+                    this.setPreviewMode(mode);
+                    this.cdRef.detectChanges();
+                    return { Success: true, Data: { PreviewMode: this.previewMode } };
+                },
+            },
+            {
+                Name: 'SetPreviewSurface',
+                Description: "Switch the preview surface between 'explorer' (chrome style guide) and 'artifact' (generated report).",
+                ParameterSchema: {
+                    type: 'object',
+                    properties: { surface: { type: 'string', description: "'explorer' | 'artifact'" } },
+                    required: ['surface'],
+                },
+                Handler: async (params) => {
+                    const surface = params['surface'];
+                    if (surface !== 'explorer' && surface !== 'artifact') {
+                        return { Success: false, ErrorMessage: "surface must be 'explorer' or 'artifact'." };
+                    }
+                    this.setView(surface);
+                    this.cdRef.detectChanges();
+                    return { Success: true, Data: { PreviewSurface: this.activeView } };
+                },
+            },
+            {
+                Name: 'ApplyToMe',
+                Description: "Apply the currently-loaded SAVED theme to the CURRENT USER's workspace (a per-user preference — not the org default). Fails on an unsaved draft.",
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    if (!this.currentThemeId) {
+                        return { Success: false, ErrorMessage: 'The draft is unsaved — the user must save it first.' };
+                    }
+                    await this.applyToMe();
+                    return { Success: true, Data: { AppliedThemeName: this.currentName } };
+                },
+            },
+        ]);
+    }
+    /** Validate + apply a partial seed update from the agent (clamped to the UI ranges). */
+    handleSetSeeds(params) {
+        const HEX = /^#[0-9a-fA-F]{6}$/;
+        const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+        const next = { ...this.seeds };
+        let changed = 0;
+        for (const key of ['primary', 'accent', 'tertiary']) {
+            const v = params[key];
+            if (v !== undefined) {
+                if (typeof v !== 'string' || !HEX.test(v.trim())) {
+                    return { Success: false, ErrorMessage: `${key} must be a 6-digit hex color like #0076b6.` };
+                }
+                next[key] = v.trim().toLowerCase();
+                changed++;
+            }
+        }
+        const numeric = [
+            { key: 'neutralChroma', lo: 0, hi: 0.08 },
+            { key: 'vibrancy', lo: 0.5, hi: 1.4 },
+            { key: 'radius', lo: 0, hi: 20 },
+            { key: 'depth', lo: 0, hi: 1 },
+        ];
+        for (const { key, lo, hi } of numeric) {
+            const v = params[key];
+            if (v !== undefined) {
+                if (typeof v !== 'number' || !Number.isFinite(v)) {
+                    return { Success: false, ErrorMessage: `${key} must be a number between ${lo} and ${hi}.` };
+                }
+                next[key] = clamp(v, lo, hi);
+                changed++;
+            }
+        }
+        if (changed === 0) {
+            return { Success: false, ErrorMessage: 'Provide at least one seed to change.' };
+        }
+        this.seeds = next;
+        this.recompute();
+        this.publishAgentContext();
+        this.cdRef.detectChanges();
+        return { Success: true, Data: { SeedsChanged: changed, ContrastPasses: this.derived.contrast.passes } };
+    }
+    static ɵfac = function ThemeStudioDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ThemeStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ThemeService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ThemeStudioDashboardComponent, selectors: [["mj-theme-studio-dashboard"]], viewQuery: function ThemeStudioDashboardComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5)(_c2, 5)(_c3, 5)(_c4, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.previewCanvas = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.nameInput = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.stageEl = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cssCm = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.galDialog = _t.first);
+        } }, hostBindings: function ThemeStudioDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function ThemeStudioDashboardComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, i0.ɵɵresolveWindow)("fullscreenchange", function ThemeStudioDashboardComponent_fullscreenchange_HostBindingHandler() { return ctx.onFullscreenChange(); }, i0.ɵɵresolveDocument)("keydown.escape", function ThemeStudioDashboardComponent_keydown_escape_HostBindingHandler() { return ctx.onEscape(); }, i0.ɵɵresolveDocument);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 248, vars: 71, consts: [["stage", ""], ["previewCanvas", ""], ["nameInput", ""], ["galDialog", ""], ["cssCm", ""], ["Title", "Theme Studio", "Icon", "fa-solid fa-palette", "Subtitle", "Organization theme & branding"], ["meta", ""], [1, "theme-pick-wrap"], [1, "theme-pick"], [1, "sw"], ["maxlength", "80", "aria-label", "Theme name", 1, "name-input", 3, "ngModel"], [1, "badge"], ["type", "button", "title", "Switch theme", "aria-label", "Switch theme", 1, "pick-caret", 3, "click"], [1, "fa-solid", "fa-chevron-down", "caret"], [1, "readonly-note"], [1, "preview-note"], ["actions", ""], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Apply this theme to your workspace now \u2014 it persists across sessions until you pick another", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", "size", "sm", "title", "Make this the organization-wide default theme for everyone", 3, "click", "disabled"], ["mjButton", "", "variant", "primary", "size", "sm"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "disabled"], ["toolbar", ""], [3, "KeyChange", "Options", "ActiveKey"], [1, "toolbar-spacer"], ["mjButton", "", "variant", "icon", "ariaLabel", "Full screen preview", "title", "Full screen preview", 3, "click"], [1, "fa-solid", "fa-expand"], ["mjButton", "", "size", "sm", 3, "click", "variant"], [1, "fa-solid", "fa-sliders"], [3, "Padding", "Flex"], [1, "ts-stage"], [1, "pv-wrap"], [1, "pv-inner"], [1, "ts-canvas"], [1, "fs-bar"], [1, "pv-scroll"], [1, "pv-view"], ["aria-label", "Theme editor", 1, "ts-panel"], ["role", "separator", "aria-orientation", "vertical", "aria-label", "Resize editor panel", "title", "Drag to resize", 1, "panel-resize", 3, "pointerdown"], [1, "panel-h"], [1, "ic"], [1, "fa-solid", "fa-palette"], ["type", "button", "title", "Collapse panel", 1, "collapse-btn", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "panel-body"], [1, "card"], [1, "fa-solid", "fa-plus"], [1, "preset-row"], ["type", "button", 1, "preset", 3, "title"], [1, "scope"], [1, "sub"], [1, "row"], [1, "lab"], [1, "ctl"], [1, "clr"], ["type", "color", 3, "ngModelChange", "ngModel"], [1, "hex"], [1, "derived-note"], [1, "clr", "static"], [1, "sw-box"], [1, "ok", 3, "warn", "title"], [1, "fa-solid", "fa-font"], [3, "ngModelChange", "ngModel"], [3, "value"], ["type", "range", "min", "0.5", "max", "1.4", "step", "0.05", 3, "ngModelChange", "ngModel"], [1, "val"], ["type", "range", "min", "0", "max", "0.08", "step", "0.005", 3, "ngModelChange", "ngModel"], ["type", "range", "min", "12", "max", "18", "step", "1", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-square"], ["type", "range", "min", "0", "max", "20", "step", "1", 3, "ngModelChange", "ngModel"], ["type", "range", "min", "0", "max", "1", "step", "0.1", 3, "ngModelChange", "ngModel"], [1, "miniseg"], ["type", "button", 3, "click"], [1, "fa-solid", "fa-chart-column"], ["type", "button", 1, "reset-link"], [1, "swrow"], [1, "chip-clr", 3, "background"], [1, "fa-solid", "fa-image"], [1, "tinput", 3, "ngModelChange", "ngModel"], [1, "sub", 2, "margin", "8px 0 0"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "card", "adv-card"], [1, "adv-head", 3, "click"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "caret"], [1, "adv-summary"], ["maxlength", "80", "aria-label", "Theme name", 1, "name-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "theme-name", 3, "dblclick"], ["type", "button", "title", "Rename theme", "aria-label", "Rename theme", 1, "rename-btn"], ["type", "button", "title", "Rename theme", "aria-label", "Rename theme", 1, "rename-btn", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "menu-backdrop", 3, "click"], [1, "theme-menu"], ["type", "button", 1, "theme-menu-item", 3, "on"], ["type", "button", 1, "theme-menu-new", 3, "click"], ["type", "button", 1, "theme-menu-item", 3, "click"], [3, "background"], [1, "fa-solid", "fa-lock"], [1, "fa-solid", "fa-eye"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [1, "gal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-label", "Start a new theme", "tabindex", "-1", 1, "gal"], [1, "gal-sub"], [1, "gal-grid"], ["type", "button", 1, "gal-card"], [1, "gal-foot"], ["type", "button", 1, "gal-card", 3, "click"], [1, "gal-mock"], [1, "gal-mock-bar"], [1, "gal-mock-body"], [1, "gal-line"], [1, "gal-line", "short"], [1, "gal-mock-row"], [1, "gal-dot"], [1, "gal-btn"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "kbd"], [1, "zone-lab"], [1, "mx"], [1, "mx-shell"], [1, "mx-appico"], [1, "fa-solid", "fa-table-cells-large"], [1, "mx-nav"], ["tabindex", "0", "role", "button", 3, "on"], ["tabindex", "0", 1, "mx-search"], [1, "fa-solid", "fa-magnifying-glass"], [1, "mx-sp"], ["tabindex", "0", 1, "mx-av"], [1, "mx-ph"], [1, "mx-ph-top"], [1, "mx-ph-ico"], [1, "fa-solid", "fa-users"], [1, "mx-ph-title"], [1, "mx-ph-sub"], [1, "mx-ph-actions"], [1, "mx-btn", "sec"], [1, "mx-btn", "pri"], [1, "mx-toolbar"], ["role", "tablist", 1, "mx-tabs"], ["tabindex", "0", "role", "tab", 3, "on"], [1, "mx-body"], [1, "mx-cell", "wide"], [1, "mx-cap"], [1, "mx-row"], [1, "mx-btn", "out"], [1, "mx-btn", "dgr"], [1, "mx-row", "states-row"], [1, "mx-btn", "pri", "is-hover"], [1, "mx-btn", "pri", "is-active"], [1, "mx-btn", "pri", "is-focus"], ["disabled", "", 1, "mx-btn", "pri"], [1, "mx-btn", "sec", "is-hover"], [1, "mx-btn", "sec", "is-active"], [1, "mx-btn", "sec", "is-focus"], ["disabled", "", 1, "mx-btn", "sec"], [1, "mx-btn", "out", "is-hover"], [1, "mx-btn", "out", "is-active"], [1, "mx-btn", "out", "is-focus"], ["disabled", "", 1, "mx-btn", "out"], [1, "mx-btn", "dgr", "is-hover"], [1, "mx-btn", "dgr", "is-active"], [1, "mx-btn", "dgr", "is-focus"], ["disabled", "", 1, "mx-btn", "dgr"], [1, "mx-input", "focus", 2, "flex", "1"], ["tabindex", "0", 1, "mx-input", 2, "flex", "1"], [1, "fa-solid", "fa-chevron-down"], ["role", "switch", "tabindex", "0", "aria-label", "Toggle switch", 1, "mx-swch", 3, "click", "keydown.enter", "keydown.space"], ["role", "switch", "tabindex", "0", "aria-label", "Toggle auto-renew", 1, "mx-swch", 3, "click", "keydown.enter", "keydown.space"], [1, "mx-lbl"], [1, "mx-cell"], ["tabindex", "0", 1, "mx-chip", "on"], ["tabindex", "0", 1, "mx-chip"], [1, "mx-stat", "brand"], [1, "mx-stat", "suc"], [1, "mx-stat", "wrn"], [1, "mx-prog"], [1, "mx-lnav"], ["tabindex", "0", 1, "on"], [1, "fa-solid", "fa-house"], ["tabindex", "0"], ["tabindex", "0", "role", "button", 3, "click", "keydown.enter", "keydown.space"], [1, "fa-solid"], [1, "mx-alert"], [1, "mx-dlg"], [1, "mx-dlg-t"], [1, "mx-dlg-b"], [1, "mx-input", "focus", 2, "width", "100%"], [1, "mx-dlg-a"], ["tabindex", "0", "role", "tab", 3, "click", "keydown.enter", "keydown.space"], ["tabindex", "0", 1, "mx-acc-item"], [1, "report"], [1, "rhead"], [1, "logo"], [1, "ti"], [1, "su"], [1, "rt"], [1, "rbody"], [1, "kpis"], [1, "kpi"], [1, "n"], [1, "l"], [1, "d", "up"], [1, "d", "dn"], [1, "chart"], [1, "ct"], [1, "cs"], [1, "bars"], [1, "bar"], [1, "cats"], [1, "grid"], [1, "r"], [1, "ag-sum"], [1, "ag-finds"], [1, "ag-find"], [1, "fdot"], [1, "mx-stat", "neu"], [1, "rfoot"], [1, "dot"], [1, "bv"], [1, "fill"], ["type", "button", 1, "preset", 3, "click", "title"], [1, "ok", 3, "title"], [1, "mode-tag"], [1, "derived-note", "contrast-detail"], ["type", "button", 1, "reset-link", 3, "click"], [1, "chip-clr"], [1, "chip-num"], ["type", "color", 3, "input", "value"], ["type", "button", 1, "reset-link", "adv-edit", 3, "click"], ["aria-hidden", "true", 1, "ladder"], [1, "ladder-step", "done"], [1, "fa-solid", "fa-arrow-right"], [1, "ladder-step"], [1, "ladder-step", "esc"], [1, "adv-sec"], [1, "adv-lab"], [1, "step-num"], ["type", "search", "placeholder", "Search tokens (e.g. hover, surface, viz)\u2026", "spellcheck", "false", 1, "tinput", "tok-search", 3, "ngModelChange", "ngModel"], [1, "tok-groups"], [1, "tok-group"], [1, "step-num", "esc"], [1, "esc-tag"], [1, "sel-chips"], ["type", "button", 1, "sel-chip", 3, "title"], [1, "css-tools"], ["aria-label", "Insert a token at the cursor", 1, "tok-pick", 3, "change"], ["value", ""], [1, "adv-css-editor"], ["language", "css", "setup", "basic", "placeholder", "mj-shell { box-shadow: none; }", 3, "change", "value", "extensions", "lineWrapping"], [1, "css-warn"], [1, "sub", "adv-note"], ["type", "button", 1, "adv-add", 3, "click"], [1, "gen-css"], ["type", "button", 1, "tok-group-h", 3, "click"], [1, "tok-mod-count"], [1, "tok-count"], [1, "tok-row", 3, "mod"], [1, "tok-row", 3, "mouseenter", "mouseleave"], [1, "tok-sw"], [1, "tok-name", 3, "title"], [1, "tok-badge"], ["spellcheck", "false", 1, "tinput", "tok-edit", 3, "ngModel"], [1, "tok-clr", 3, "title"], ["type", "button", 1, "tok-val-btn", 3, "title"], ["type", "button", "title", "Reset to derived value", 1, "tok-reset"], ["spellcheck", "false", 1, "tinput", "tok-edit", 3, "ngModelChange", "keydown.enter", "keydown.escape", "blur", "ngModel"], [1, "tok-val"], ["type", "button", 1, "tok-val-btn", 3, "click", "title"], ["type", "button", "title", "Reset to derived value", 1, "tok-reset", 3, "click"], [1, "fa-solid", "fa-rotate-left"], ["type", "button", 1, "sel-chip", 3, "click", "title"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "button", 1, "gen-copy", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "gen-css-editor"], ["language", "css", "setup", "minimal", "readonly", "", 3, "value"]], template: function ThemeStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 5)(2, "div", 6)(3, "div", 7)(4, "div", 8)(5, "span", 9);
+            i0.ɵɵelement(6, "i")(7, "i")(8, "i");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, ThemeStudioDashboardComponent_Conditional_9_Template, 2, 1, "input", 10)(10, ThemeStudioDashboardComponent_Conditional_10_Template, 3, 2);
+            i0.ɵɵconditionalCreate(11, ThemeStudioDashboardComponent_Conditional_11_Template, 2, 0, "span", 11);
+            i0.ɵɵelementStart(12, "button", 12);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleThemePicker()); });
+            i0.ɵɵelement(13, "i", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(14, ThemeStudioDashboardComponent_Conditional_14_Template, 7, 0);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(15, ThemeStudioDashboardComponent_Conditional_15_Template, 3, 0, "span", 14);
+            i0.ɵɵconditionalCreate(16, ThemeStudioDashboardComponent_Conditional_16_Template, 3, 0, "span", 15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "div", 16)(18, "button", 17);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.discard()); });
+            i0.ɵɵtext(19, "Discard");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "button", 18);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.applyToMe()); });
+            i0.ɵɵtext(21, "Apply to me");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "button", 19);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setAsDefault()); });
+            i0.ɵɵtext(23, "Set as org default");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(24, ThemeStudioDashboardComponent_Conditional_24_Template, 2, 0, "button", 20)(25, ThemeStudioDashboardComponent_Conditional_25_Template, 2, 2, "button", 21);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "div", 22)(27, "mj-view-toggle", 23);
+            i0.ɵɵlistener("KeyChange", function ThemeStudioDashboardComponent_Template_mj_view_toggle_KeyChange_27_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSurfaceToggle($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(28, "span", 24);
+            i0.ɵɵelementStart(29, "mj-view-toggle", 23);
+            i0.ɵɵlistener("KeyChange", function ThemeStudioDashboardComponent_Template_mj_view_toggle_KeyChange_29_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onModeToggle($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "button", 25);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleFullscreen(true)); });
+            i0.ɵɵelement(31, "i", 26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "button", 27);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.togglePanel()); });
+            i0.ɵɵelement(33, "i", 28);
+            i0.ɵɵtext(34, " Edit theme");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(35, "mj-page-body", 29)(36, "div", 30, 0);
+            i0.ɵɵconditionalCreate(38, ThemeStudioDashboardComponent_Conditional_38_Template, 13, 0);
+            i0.ɵɵelementStart(39, "div", 31)(40, "div", 32)(41, "div", 33, 1);
+            i0.ɵɵconditionalCreate(43, ThemeStudioDashboardComponent_Conditional_43_Template, 6, 2, "div", 34);
+            i0.ɵɵelementStart(44, "div", 35);
+            i0.ɵɵconditionalCreate(45, ThemeStudioDashboardComponent_Conditional_45_Template, 164, 12, "div", 36);
+            i0.ɵɵconditionalCreate(46, ThemeStudioDashboardComponent_Conditional_46_Template, 156, 1, "div", 36);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(47, "aside", 37)(48, "div", 38);
+            i0.ɵɵlistener("pointerdown", function ThemeStudioDashboardComponent_Template_div_pointerdown_48_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.startPanelResize($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(49, "div", 39)(50, "span", 40);
+            i0.ɵɵelement(51, "i", 41);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "div")(53, "h2");
+            i0.ɵɵtext(54, "Edit theme");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "small");
+            i0.ɵɵtext(56, "One theme serves light & dark");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(57, "button", 42);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.togglePanel()); });
+            i0.ɵɵelement(58, "i", 43);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(59, "div", 44)(60, "div", 45)(61, "h3")(62, "span", 40);
+            i0.ɵɵelement(63, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(64, "Start from a preset");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(65, "div", 47);
+            i0.ɵɵrepeaterCreate(66, ThemeStudioDashboardComponent_For_67_Template, 7, 8, "button", 48, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(68, "div", 45)(69, "h3")(70, "span", 40);
+            i0.ɵɵelement(71, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(72, "Brand colors");
+            i0.ɵɵelementStart(73, "span", 49);
+            i0.ɵɵtext(74, "Everywhere");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(75, "p", 50);
+            i0.ɵɵtext(76, "Anchor colors only. Ramps, hovers, and dark-mode values derive automatically.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(77, "div", 51)(78, "div", 52);
+            i0.ɵɵtext(79, "Primary");
+            i0.ɵɵelementStart(80, "small");
+            i0.ɵɵtext(81, "Buttons, links, headers");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(82, "div", 53)(83, "span", 54)(84, "input", 55);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_84_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.primary, $event) || (ctx.seeds.primary = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_84_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(85, "span", 56);
+            i0.ɵɵtext(86);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(87, "div", 57);
+            i0.ɵɵelement(88, "i");
+            i0.ɵɵtext(89, "Dark mode uses derived ");
+            i0.ɵɵelementStart(90, "code");
+            i0.ɵɵtext(91);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(92, " (ramp step)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(93, "div", 51)(94, "div", 52);
+            i0.ɵɵtext(95, "Accent");
+            i0.ɵɵelementStart(96, "small");
+            i0.ɵɵtext(97, "Highlights, KPI accents");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(98, "div", 53)(99, "span", 54)(100, "input", 55);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_100_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.accent, $event) || (ctx.seeds.accent = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_100_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(101, "span", 56);
+            i0.ɵɵtext(102);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(103, "div", 51)(104, "div", 52);
+            i0.ɵɵtext(105, "Tertiary");
+            i0.ɵɵelementStart(106, "small");
+            i0.ɵɵtext(107, "Secondary actions, info");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(108, "div", 53)(109, "span", 54)(110, "input", 55);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_110_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.tertiary, $event) || (ctx.seeds.tertiary = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_110_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(111, "span", 56);
+            i0.ɵɵtext(112);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(113, "div", 51)(114, "div", 52);
+            i0.ɵɵtext(115, "Secondary");
+            i0.ɵɵelementStart(116, "small");
+            i0.ɵɵtext(117, "Derived \u2014 deep surfaces");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(118, "div", 53)(119, "span", 58);
+            i0.ɵɵelement(120, "span", 59);
+            i0.ɵɵelementStart(121, "span", 56);
+            i0.ɵɵtext(122);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(123, "div", 51)(124, "div", 52);
+            i0.ɵɵtext(125, "Text on primary");
+            i0.ɵɵelementStart(126, "small");
+            i0.ɵɵtext(127, "Worst of light & dark");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(128, "div", 53);
+            i0.ɵɵconditionalCreate(129, ThemeStudioDashboardComponent_Conditional_129_Template, 5, 7, "span", 60);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(130, ThemeStudioDashboardComponent_Conditional_130_Template, 1, 1);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(131, "div", 45)(132, "h3")(133, "span", 40);
+            i0.ɵɵelement(134, "i", 61);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(135, "Typography");
+            i0.ɵɵelementStart(136, "span", 49);
+            i0.ɵɵtext(137, "Everywhere");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(138, "div", 51)(139, "div", 52);
+            i0.ɵɵtext(140, "Font family");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(141, "div", 53)(142, "select", 62);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_select_ngModelChange_142_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.fontFamily, $event) || (ctx.seeds.fontFamily = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_select_ngModelChange_142_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵrepeaterCreate(143, ThemeStudioDashboardComponent_For_144_Template, 2, 2, "option", 63, _forTrack1);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(145, "div", 51)(146, "div", 52);
+            i0.ɵɵtext(147, "Vibrancy");
+            i0.ɵɵelementStart(148, "small");
+            i0.ɵɵtext(149, "Brand ramp saturation");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(150, "div", 53)(151, "input", 64);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_151_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.vibrancy, $event) || (ctx.seeds.vibrancy = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_151_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(152, "span", 65);
+            i0.ɵɵtext(153);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(154, "div", 51)(155, "div", 52);
+            i0.ɵɵtext(156, "Neutral character");
+            i0.ɵɵelementStart(157, "small");
+            i0.ɵɵtext(158, "Brand tint in grays");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(159, "div", 53)(160, "input", 66);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_160_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.neutralChroma, $event) || (ctx.seeds.neutralChroma = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_160_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(161, "span", 65);
+            i0.ɵɵtext(162);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(163, "div", 51)(164, "div", 52);
+            i0.ɵɵtext(165, "Base size");
+            i0.ɵɵelementStart(166, "small");
+            i0.ɵɵtext(167, "Generated content");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(168, "div", 53)(169, "input", 67);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_169_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.baseFontSize, $event) || (ctx.baseFontSize = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_169_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBaseSizeChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(170, "span", 65);
+            i0.ɵɵtext(171);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(172, "div", 45)(173, "h3")(174, "span", 40);
+            i0.ɵɵelement(175, "i", 68);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(176, "Shape & density");
+            i0.ɵɵelementStart(177, "span", 49);
+            i0.ɵɵtext(178, "Generated content");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(179, "p", 50);
+            i0.ɵɵtext(180, "Applies to Skip / agent components. Explorer chrome keeps MJ shape.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(181, "div", 51)(182, "div", 52);
+            i0.ɵɵtext(183, "Corner radius");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(184, "div", 53)(185, "input", 69);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_185_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.radius, $event) || (ctx.seeds.radius = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_185_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(186, "span", 65);
+            i0.ɵɵtext(187);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(188, "div", 51)(189, "div", 52);
+            i0.ɵɵtext(190, "Elevation depth");
+            i0.ɵɵelementStart(191, "small");
+            i0.ɵɵtext(192, "Brand shadow strength");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(193, "div", 53)(194, "input", 70);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_194_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.seeds.depth, $event) || (ctx.seeds.depth = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_194_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSeedsChanged()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(195, "span", 65);
+            i0.ɵɵtext(196);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(197, "div", 51)(198, "div", 52);
+            i0.ɵɵtext(199, "Density");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(200, "div", 53)(201, "div", 71)(202, "button", 72);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_202_listener() { i0.ɵɵrestoreView(_r1); ctx.density = 16; return i0.ɵɵresetView(ctx.onDensityChanged()); });
+            i0.ɵɵtext(203, "Comfortable");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(204, "button", 72);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_button_click_204_listener() { i0.ɵɵrestoreView(_r1); ctx.density = 9; return i0.ɵɵresetView(ctx.onDensityChanged()); });
+            i0.ɵɵtext(205, "Compact");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(206, "div", 45)(207, "h3")(208, "span", 40);
+            i0.ɵɵelement(209, "i", 73);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(210, "Chart palette ");
+            i0.ɵɵconditionalCreate(211, ThemeStudioDashboardComponent_Conditional_211_Template, 2, 0, "button", 74);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(212, "p", 50);
+            i0.ɵɵtext(213);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(214, "div", 75);
+            i0.ɵɵrepeaterCreate(215, ThemeStudioDashboardComponent_For_216_Template, 4, 4, "label", 76, i0.ɵɵrepeaterTrackByIndex);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(217, "div", 45)(218, "h3")(219, "span", 40);
+            i0.ɵɵelement(220, "i", 77);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(221, "Logo & branding");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(222, "div", 51)(223, "div", 52);
+            i0.ɵɵtext(224, "Footer notice");
+            i0.ɵɵelementStart(225, "small");
+            i0.ɵɵtext(226, "Shown in generated output");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(227, "div", 53)(228, "input", 78);
+            i0.ɵɵtwoWayListener("ngModelChange", function ThemeStudioDashboardComponent_Template_input_ngModelChange_228_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.footerNotice, $event) || (ctx.footerNotice = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(229, "p", 79);
+            i0.ɵɵtext(230, "Logo variant uploads (light / dark / wordmark) are coming with the asset pipeline \u2014 no recolor knob needed.");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(231, "div", 45)(232, "h3")(233, "span", 40);
+            i0.ɵɵelement(234, "i", 80);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(235, "Recipes");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(236, "p", 50);
+            i0.ɵɵtext(237, "Curated looks, expanded to token overrides underneath \u2014 fully reversible.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(238, ThemeStudioDashboardComponent_For_239_Template, 7, 4, "div", 51, _forTrack2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(240, "div", 81)(241, "h3", 82);
+            i0.ɵɵlistener("click", function ThemeStudioDashboardComponent_Template_h3_click_241_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleAdvanced()); });
+            i0.ɵɵelementStart(242, "span", 40);
+            i0.ɵɵelement(243, "i", 83);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(244, "Advanced ");
+            i0.ɵɵelement(245, "i", 84);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(246, ThemeStudioDashboardComponent_Conditional_246_Template, 4, 1, "p", 85);
+            i0.ɵɵconditionalCreate(247, ThemeStudioDashboardComponent_Conditional_247_Template, 64, 16);
+            i0.ɵɵelementEnd()()()()()();
+        } if (rf & 2) {
+            let tmp_39_0;
+            let tmp_40_0;
+            i0.ɵɵadvance(6);
+            i0.ɵɵstyleProp("background", ctx.seeds.primary);
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("background", ctx.seeds.accent);
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("background", ctx.seeds.tertiary);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.editingName ? 9 : 10);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.currentIsDefault ? 11 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.themePickerOpen ? 14 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isBuiltInSelected ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.workspacePreviewOn ? 16 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", !ctx.currentThemeId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", !ctx.currentThemeId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isBuiltInSelected ? 24 : 25);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Options", ctx.surfaceOptions)("ActiveKey", ctx.activeView);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Options", ctx.modeOptions)("ActiveKey", ctx.previewMode);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("variant", ctx.panelCollapsed ? "outline" : "secondary");
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Padding", false)("Flex", true);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("collapsed", ctx.panelCollapsed);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.presetGalleryOpen ? 38 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("fullscreen", ctx.fullscreen);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.fullscreen ? 43 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.activeView === "explorer" ? 45 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.activeView === "artifact" ? 46 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("width", ctx.panelCollapsed ? 0 : ctx.panelWidth, "px");
+            i0.ɵɵclassProp("resizing", ctx.panelResizing);
+            i0.ɵɵadvance(19);
+            i0.ɵɵrepeater(ctx.presets);
+            i0.ɵɵadvance(18);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.primary);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.primary);
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleProp("background", ctx.darkPrimary);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.darkPrimary);
+            i0.ɵɵadvance(9);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.accent);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.accent);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.tertiary);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.tertiary);
+            i0.ɵɵadvance(8);
+            i0.ɵɵstyleProp("background", ctx.secondaryColor);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.secondaryColor);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional((tmp_39_0 = ctx.onPrimaryWorst) ? 129 : -1, tmp_39_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_40_0 = ctx.onPrimaryDetail.light) ? 130 : -1, tmp_40_0);
+            i0.ɵɵadvance(12);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.fontFamily);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.fontOptions);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.vibrancy);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.vibrancy);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.neutralChroma);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.neutralChroma);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.baseFontSize);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.baseFontSize, "px");
+            i0.ɵɵadvance(14);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.radius);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.seeds.radius, "px");
+            i0.ɵɵadvance(7);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.seeds.depth);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.seeds.depth);
+            i0.ɵɵadvance(6);
+            i0.ɵɵclassProp("on", ctx.density === 16);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("on", ctx.density === 9);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.vizOverridden ? 211 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("Series 1 follows Primary until you override it ", ctx.vizOverridden ? "(overridden)" : "", ".");
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.vizColors);
+            i0.ɵɵadvance(13);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.footerNotice);
+            i0.ɵɵadvance(10);
+            i0.ɵɵrepeater(ctx.recipeStates);
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("fa-chevron-down", ctx.advancedOpen)("fa-chevron-right", !ctx.advancedOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.advancedOpen && ctx.advancedSummary ? 246 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.advancedOpen ? 247 : -1);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.RangeValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.MaxLengthValidator, i2.NgModel, i3.MJButtonDirective, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i3.MJViewToggleComponent, i3.MJSwitchComponent, i4.CodeEditorComponent], styles: ["\n\n\n\n\n\n\n\n[_nghost-%COMP%] { display: block; width: 100%; height: 100%; }\n\n\n\n.theme-pick-wrap[_ngcontent-%COMP%] { position: relative; }\n.theme-pick[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 8px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 9px; padding: 5px 6px 5px 10px; color: var(--mj-text-primary); font: inherit; }\n.theme-pick[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%], .theme-menu-item[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%] { display: flex; }\n.theme-pick[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .theme-menu-item[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 9px; height: 16px; display: block; margin-left: -3px; border-radius: 3px; border: 1.5px solid var(--mj-bg-surface); }\n.theme-pick[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child, .theme-menu-item[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { margin-left: 0; }\n.theme-pick[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { font-size: 13px; font-weight: 700; }\n.theme-pick[_ngcontent-%COMP%]   .theme-name[_ngcontent-%COMP%] { cursor: text; }\n.theme-pick[_ngcontent-%COMP%]   .name-input[_ngcontent-%COMP%] { font: inherit; font-size: 13px; font-weight: 700; color: var(--mj-text-primary); background: var(--mj-bg-surface); border: 1px solid var(--mj-brand-primary); border-radius: 6px; padding: 2px 7px; min-width: 120px; outline: none; }\n.rename-btn[_ngcontent-%COMP%] { border: 0; background: transparent; color: var(--mj-text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; line-height: 1; border-radius: 5px; }\n.rename-btn[_ngcontent-%COMP%]:hover { color: var(--mj-brand-primary); background: var(--mj-bg-surface-hover); }\n.pick-caret[_ngcontent-%COMP%] { border: 0; background: transparent; cursor: pointer; padding: 4px 5px; margin-left: 2px; border-radius: 6px; display: inline-flex; align-items: center; }\n.pick-caret[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.theme-pick[_ngcontent-%COMP%]   .caret[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n.badge[_ngcontent-%COMP%] { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); padding: 2px 6px; border-radius: 20px; }\n.menu-backdrop[_ngcontent-%COMP%] { position: fixed; inset: 0; z-index: 19; }\n.theme-menu[_ngcontent-%COMP%] { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 240px; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 10px; box-shadow: var(--mj-shadow-lg); padding: 6px; }\n.theme-menu-item[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--mj-text-primary); font: inherit; }\n.theme-menu-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.theme-menu-item.on[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); }\n.theme-menu-item[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; }\n.theme-menu-new[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 9px; margin-top: 4px; border: 0; border-top: 1px solid var(--mj-border-subtle); background: transparent; color: var(--mj-brand-primary); font: inherit; font-weight: 600; cursor: pointer; }\n.readonly-note[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); margin-left: 8px; }\n.toolbar-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n\n\n.ts-stage[_ngcontent-%COMP%] { flex: 1; display: flex; min-height: 0; overflow: hidden; position: relative; background: var(--mj-bg-page); }\n.pv-wrap[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: auto; padding: 22px 26px 60px; }\n.pv-inner[_ngcontent-%COMP%] { max-width: 1240px; margin: 0 auto; }\n\n\n\n.ts-panel[_ngcontent-%COMP%] { flex-shrink: 0; width: 392px; position: relative; background: var(--mj-bg-surface); border-left: 1px solid var(--mj-border-default); display: flex; flex-direction: column; min-height: 0; transition: width .25s cubic-bezier(.4,0,.2,1); overflow: hidden; }\n.ts-panel.resizing[_ngcontent-%COMP%] { transition: none; user-select: none; }\n.panel-resize[_ngcontent-%COMP%] { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; touch-action: none; }\n.panel-resize[_ngcontent-%COMP%]:hover, .ts-panel.resizing[_ngcontent-%COMP%]   .panel-resize[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n.ts-stage.collapsed[_ngcontent-%COMP%]   .panel-resize[_ngcontent-%COMP%] { display: none; }\n.ts-stage.collapsed[_ngcontent-%COMP%]   .ts-panel[_ngcontent-%COMP%] { width: 0; border-left: none; }\n.ts-stage.collapsed[_ngcontent-%COMP%]   .panel-h[_ngcontent-%COMP%], .ts-stage.collapsed[_ngcontent-%COMP%]   .panel-body[_ngcontent-%COMP%] { opacity: 0; pointer-events: none; }\n.panel-h[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--mj-border-default); flex-shrink: 0; min-width: 392px; }\n.panel-h[_ngcontent-%COMP%]   .ic[_ngcontent-%COMP%] { width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; flex-shrink: 0; }\n.panel-h[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { margin: 0; font-size: 14.5px; font-weight: 700; }\n.panel-h[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 11.5px; display: block; font-weight: 500; }\n.collapse-btn[_ngcontent-%COMP%] { margin-left: auto; width: 30px; height: 30px; border: 1px solid var(--mj-border-default); border-radius: 8px; background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); display: grid; place-items: center; cursor: pointer; }\n.collapse-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n.panel-body[_ngcontent-%COMP%] { flex: 1; overflow: auto; padding: 14px; min-width: 392px; }\n\n\n\n.card[_ngcontent-%COMP%] { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 12px; padding: 14px 15px; margin-bottom: 12px; box-shadow: var(--mj-shadow-sm); }\n.card[_ngcontent-%COMP%]    > h3[_ngcontent-%COMP%] { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }\n.card[_ngcontent-%COMP%]    > h3[_ngcontent-%COMP%]   .ic[_ngcontent-%COMP%] { width: 21px; height: 21px; border-radius: 6px; background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; font-size: 11px; }\n.card[_ngcontent-%COMP%]    > .sub[_ngcontent-%COMP%] { margin: 0 0 10px; font-size: 11.5px; color: var(--mj-text-muted); }\n.scope[_ngcontent-%COMP%] { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mj-text-muted); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); padding: 2px 6px; border-radius: 5px; margin-left: auto; }\n.reset-link[_ngcontent-%COMP%] { margin-left: auto; border: 0; background: transparent; color: var(--mj-text-link); font: inherit; font-size: 11.5px; cursor: pointer; }\n.row[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mj-border-subtle); }\n.row[_ngcontent-%COMP%]:first-of-type { border-top: 0; }\n.lab[_ngcontent-%COMP%] { font-size: 12.5px; font-weight: 600; }\n.lab[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { display: block; font-weight: 500; color: var(--mj-text-muted); font-size: 11px; margin-top: 1px; }\n.ctl[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n.clr[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 7px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 4px 8px 4px 4px; }\n.clr[_ngcontent-%COMP%]   input[type=color][_ngcontent-%COMP%] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; }\n.clr.static[_ngcontent-%COMP%]   .sw-box[_ngcontent-%COMP%] { width: 24px; height: 24px; border-radius: 6px; display: block; border: 1px solid rgba(0,0,0,.15); }\n.hex[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 11.5px; color: var(--mj-text-secondary); min-width: 58px; text-transform: uppercase; }\n.derived-note[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); padding-top: 7px; display: flex; align-items: center; gap: 6px; }\n.derived-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }\n.derived-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 10.5px; }\ninput[type=range][_ngcontent-%COMP%] { appearance: none; -webkit-appearance: none; width: 104px; height: 4px; border-radius: 3px; background: var(--mj-border-strong); cursor: pointer; }\ninput[type=range][_ngcontent-%COMP%]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--mj-brand-primary); border: 2px solid var(--mj-bg-surface); }\n.val[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 11.5px; color: var(--mj-text-secondary); min-width: 44px; text-align: right; }\nselect[_ngcontent-%COMP%], .tinput[_ngcontent-%COMP%] { font: inherit; font-size: 12.5px; color: var(--mj-text-primary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 6px 9px; }\nselect[_ngcontent-%COMP%] { cursor: pointer; min-width: 120px; }\n.tinput[_ngcontent-%COMP%] { width: 170px; }\n.miniseg[_ngcontent-%COMP%] { display: inline-flex; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 2px; }\n.miniseg[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { border: 0; background: transparent; color: var(--mj-text-secondary); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; }\n.miniseg[_ngcontent-%COMP%]   button.on[_ngcontent-%COMP%] { background: var(--mj-bg-surface); color: var(--mj-text-primary); box-shadow: var(--mj-shadow-sm); }\n.ok[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--mj-status-success-text); background: var(--mj-status-success-bg); border: 1px solid var(--mj-status-success-border); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }\n.ok.warn[_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); }\n.preset-row[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 8px; }\n.preset[_ngcontent-%COMP%] { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--mj-border-default); border-radius: 9px; background: var(--mj-bg-surface); padding: 8px 6px; cursor: pointer; width: 64px; }\n.preset[_ngcontent-%COMP%]:hover { border-color: var(--mj-brand-primary); background: var(--mj-bg-surface-hover); }\n.preset[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%] { display: flex; }\n.preset[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 10px; height: 18px; display: block; margin-left: -3px; border-radius: 3px; border: 1.5px solid var(--mj-bg-surface); }\n.preset[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { margin-left: 0; }\n.preset[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] { font-size: 9.5px; color: var(--mj-text-muted); text-align: center; line-height: 1.15; }\n.swrow[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }\n.chip-clr[_ngcontent-%COMP%] { position: relative; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; overflow: hidden; }\n.chip-clr[_ngcontent-%COMP%]   input[type=color][_ngcontent-%COMP%] { position: absolute; inset: -4px; width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer; opacity: 0; }\n.chip-num[_ngcontent-%COMP%] { position: absolute; left: 4px; top: 2px; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.4); }\n\n\n\n.ts-canvas[_ngcontent-%COMP%] { border-radius: 16px; border: 1px solid var(--mj-border-default); overflow: hidden; box-shadow: var(--mj-shadow-lg); background: var(--mj-bg-page); font-family: var(--mj-font-family); font-size: var(--ts-fs, 14px); color: var(--mj-text-primary); }\n.ts-canvas.fullscreen[_ngcontent-%COMP%] { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; overflow: auto; }\n.pv-scroll[_ngcontent-%COMP%] { padding: var(--ts-space, 16px); display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.zone-lab[_ngcontent-%COMP%] { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }\n.zone-lab[_ngcontent-%COMP%]::before { content: \"\"; width: 5px; height: 5px; border-radius: 50%; background: var(--mj-brand-accent); }\n\n\n\n.mx[_ngcontent-%COMP%] { background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); overflow: hidden; }\n.mx-shell[_ngcontent-%COMP%] { height: 44px; background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default); display: flex; align-items: center; gap: 11px; padding: 0 12px; font-size: .82em; }\n.mx-appico[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n.mx-nav[_ngcontent-%COMP%] { display: flex; gap: 3px; }\n.mx-nav[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { padding: 5px 11px; border-radius: var(--mj-radius-sm, 6px); color: var(--mj-text-secondary); font-weight: 500; cursor: pointer; transition: background .12s ease, color .12s ease; }\n.mx-nav[_ngcontent-%COMP%]   b[_ngcontent-%COMP%]:hover:not(.on) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mx-nav[_ngcontent-%COMP%]   b.on[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.mx-search[_ngcontent-%COMP%] { flex: 0 1 190px; min-width: 100px; display: flex; align-items: center; gap: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-sm, 6px); padding: 4px 9px; color: var(--mj-text-muted); }\n.mx-sp[_ngcontent-%COMP%] { flex: 1; }\n.mx-av[_ngcontent-%COMP%] { width: 24px; height: 24px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-brand-on-primary); display: grid; place-items: center; font-size: .72em; font-weight: 700; }\n.mx-ph[_ngcontent-%COMP%] { background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default); padding: 11px 14px 0; }\n.mx-ph-top[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }\n.mx-ph-ico[_ngcontent-%COMP%] { width: 30px; height: 30px; border-radius: var(--mj-radius-sm, 6px); background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; flex-shrink: 0; }\n.mx-ph-title[_ngcontent-%COMP%] { font-size: .95em; font-weight: 700; }\n.mx-ph-sub[_ngcontent-%COMP%] { font-size: .72em; color: var(--mj-text-muted); }\n.mx-ph-actions[_ngcontent-%COMP%] { margin-left: auto; display: flex; align-items: center; gap: 7px; }\n.mx-toolbar[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-top: 1px solid var(--mj-border-default); }\n.mx-tabs[_ngcontent-%COMP%] { display: flex; gap: 2px; }\n.mx-tabs[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-style: normal; font-size: .78em; font-weight: 600; color: var(--mj-text-secondary); padding: 5px 10px 7px; border-bottom: 2px solid transparent; cursor: pointer; transition: color .12s ease, border-color .12s ease; }\n.mx-tabs[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:hover:not(.on) { color: var(--mj-text-primary); border-bottom-color: var(--mj-border-strong); }\n.mx-tabs[_ngcontent-%COMP%]   i.on[_ngcontent-%COMP%] { color: var(--mj-brand-primary); border-bottom-color: var(--mj-brand-primary); }\n.mx-body[_ngcontent-%COMP%] { padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }\n.mx-cell[_ngcontent-%COMP%] { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); padding: 10px 11px; min-width: 0; }\n.mx-cell.wide[_ngcontent-%COMP%] { grid-column: span 2; }\n@media (max-width: 760px) { .mx-cell.wide[_ngcontent-%COMP%] { grid-column: span 1; } }\n.mx-cap[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: .62em; color: var(--mj-text-muted); letter-spacing: .04em; margin-bottom: 8px; display: block; }\n.mx-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }\n.mx-row[_ngcontent-%COMP%]    + .mx-row[_ngcontent-%COMP%] { margin-top: 7px; }\n.mx-btn[_ngcontent-%COMP%] { font: inherit; font-size: .74em; font-weight: 600; padding: 5.5px 11px; border-radius: var(--mj-radius-sm, 6px); cursor: pointer; border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; }\n.mx-btn.pri[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mx-btn.sec[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-primary); border-color: var(--mj-border-default); }\n.mx-btn.out[_ngcontent-%COMP%] { background: transparent; color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n.mx-btn.dgr[_ngcontent-%COMP%] { background: transparent; color: var(--mj-status-error); border-color: var(--mj-status-error); }\n\n\n\n\n\n\n.mx-btn[_ngcontent-%COMP%]:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }\n.mx-btn.pri[_ngcontent-%COMP%]:hover, .mx-btn.pri.is-hover[_ngcontent-%COMP%] { background: var(--mj-brand-primary-hover); }\n.mx-btn.pri[_ngcontent-%COMP%]:active, .mx-btn.pri.is-active[_ngcontent-%COMP%] { background: var(--mj-brand-primary-active); }\n.mx-btn.sec[_ngcontent-%COMP%]:hover, .mx-btn.sec.is-hover[_ngcontent-%COMP%] { background: var(--mj-bg-surface-hover); }\n.mx-btn.sec[_ngcontent-%COMP%]:active, .mx-btn.sec.is-active[_ngcontent-%COMP%] { background: var(--mj-bg-surface-active); }\n.mx-btn.out[_ngcontent-%COMP%]:hover, .mx-btn.out.is-hover[_ngcontent-%COMP%] { color: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n.mx-btn.out[_ngcontent-%COMP%]:active, .mx-btn.out.is-active[_ngcontent-%COMP%] { color: var(--mj-brand-primary-active); border-color: var(--mj-brand-primary-active); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); }\n.mx-btn.dgr[_ngcontent-%COMP%]:hover, .mx-btn.dgr.is-hover[_ngcontent-%COMP%] { background: var(--mj-status-error-bg); }\n.mx-btn.dgr[_ngcontent-%COMP%]:active, .mx-btn.dgr.is-active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 18%, transparent); }\n.ts-canvas[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:focus-visible, .mx-btn.is-focus[_ngcontent-%COMP%] { outline: 2px solid var(--mj-border-focus); outline-offset: 2px; }\n.states-row[_ngcontent-%COMP%] { align-items: center; }\n.mx-input[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-sm, 6px); padding: 5px 9px; font-size: .74em; color: var(--mj-text-secondary); min-width: 0; }\n.mx-input.focus[_ngcontent-%COMP%] { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n.mx-swch[_ngcontent-%COMP%] { width: 32px; height: 18px; border-radius: 20px; background: var(--mj-brand-primary); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s ease; }\n.mx-swch[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover); }\n.mx-swch.off[_ngcontent-%COMP%]:hover { background: var(--mj-text-muted); }\n.mx-swch[_ngcontent-%COMP%]::after { content: \"\"; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--mj-brand-on-primary); }\n.mx-swch.off[_ngcontent-%COMP%] { background: var(--mj-border-strong); }\n.mx-swch.off[_ngcontent-%COMP%]::after { right: auto; left: 2px; }\n.mx-lbl[_ngcontent-%COMP%] { font-size: .72em; color: var(--mj-text-secondary); }\n.mx-chip[_ngcontent-%COMP%] { font-size: .7em; font-weight: 600; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); background: var(--mj-bg-surface); cursor: pointer; transition: background .12s ease, border-color .12s ease; }\n.mx-chip[_ngcontent-%COMP%]:hover:not(.on) { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mx-chip.on[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent); color: var(--mj-brand-primary); }\n.mx-stat[_ngcontent-%COMP%] { font-size: .66em; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 14px; }\n.mx-stat.brand[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); color: var(--mj-brand-primary); }\n.mx-stat.neu[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); border: 1px solid var(--mj-border-default); }\n.mx-stat.suc[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.mx-stat.wrn[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.mx-prog[_ngcontent-%COMP%] { height: 7px; border-radius: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); overflow: hidden; flex: 1; }\n.mx-prog[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { display: block; height: 100%; width: 64%; background: var(--mj-brand-primary); }\n.mx-lnav[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }\n.mx-lnav[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 7px; font-size: .74em; font-weight: 500; color: var(--mj-text-secondary); padding: 6px 9px; border-radius: var(--mj-radius-sm, 6px); cursor: pointer; transition: background .12s ease, color .12s ease; }\n.mx-lnav[_ngcontent-%COMP%]   b[_ngcontent-%COMP%]:hover:not(.on) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mx-lnav[_ngcontent-%COMP%]   b.on[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary); font-weight: 600; }\n.mx-lnav[_ngcontent-%COMP%]   b.mx-acc-item[_ngcontent-%COMP%] { padding-left: 28px; font-weight: 400; }\n.mx-alert[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; font-size: .72em; font-weight: 600; border-radius: var(--mj-radius-sm, 6px); padding: 8px 10px; border: 1px solid var(--mj-status-info-border); background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.mx-alert[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n.mx-dlg[_ngcontent-%COMP%] { border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); overflow: hidden; }\n.mx-dlg-t[_ngcontent-%COMP%] { padding: 8px 11px; background: var(--mj-bg-surface-sunken); font-size: .76em; font-weight: 700; color: var(--mj-text-primary); }\n.mx-dlg-b[_ngcontent-%COMP%] { padding: 10px 11px; }\n.mx-dlg-a[_ngcontent-%COMP%] { display: flex; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--mj-border-default); }\n\n\n\n.pv-grid[_ngcontent-%COMP%] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--ts-space, 16px); align-items: start; }\n@media (max-width: 1180px) { .pv-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; } }\n.report[_ngcontent-%COMP%] { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); overflow: hidden; box-shadow: var(--mj-shadow-brand-md); }\n.rhead[_ngcontent-%COMP%] { background: linear-gradient(105deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 62%, black)); color: var(--mj-brand-on-primary); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }\n.logo[_ngcontent-%COMP%] { width: 34px; height: 34px; border-radius: 9px; background: var(--mj-brand-on-primary); flex-shrink: 0; background-image: var(--mj-logo-mark); background-repeat: no-repeat; background-position: center; background-size: 70%; }\n.rhead[_ngcontent-%COMP%]   .ti[_ngcontent-%COMP%] { font-size: 1.15em; font-weight: 700; line-height: 1.1; }\n.rhead[_ngcontent-%COMP%]   .su[_ngcontent-%COMP%] { font-size: .82em; opacity: .85; margin-top: 1px; }\n.rhead[_ngcontent-%COMP%]   .rt[_ngcontent-%COMP%] { margin-left: auto; font-size: .72em; font-weight: 600; opacity: .9; text-align: right; }\n.rbody[_ngcontent-%COMP%] { padding: var(--ts-space, 16px); display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.kpis[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }\n.kpi[_ngcontent-%COMP%] { background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); padding: 11px; border-top: 3px solid var(--mj-brand-accent); }\n.kpi[_ngcontent-%COMP%]   .n[_ngcontent-%COMP%] { font-size: 1.7em; font-weight: 750; line-height: 1; }\n.kpi[_ngcontent-%COMP%]   .l[_ngcontent-%COMP%] { font-size: .76em; color: var(--mj-text-muted); margin-top: 4px; }\n.kpi[_ngcontent-%COMP%]   .d[_ngcontent-%COMP%] { font-size: .72em; font-weight: 700; margin-top: 5px; display: inline-flex; gap: 3px; }\n.kpi[_ngcontent-%COMP%]   .d.up[_ngcontent-%COMP%] { color: var(--mj-status-success); } .kpi[_ngcontent-%COMP%]   .d.dn[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n.chart[_ngcontent-%COMP%]   .ct[_ngcontent-%COMP%] { font-size: .86em; font-weight: 700; margin-bottom: 2px; }\n.chart[_ngcontent-%COMP%]   .cs[_ngcontent-%COMP%] { font-size: .74em; color: var(--mj-text-muted); margin-bottom: 12px; }\n.bars[_ngcontent-%COMP%] { display: flex; align-items: flex-end; gap: 10px; height: 120px; border-bottom: 1.5px solid var(--mj-border-default); }\n.bar[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }\n.bar[_ngcontent-%COMP%]   .fill[_ngcontent-%COMP%] { width: 100%; border-radius: 5px 5px 0 0; min-height: 4px; }\n.bar[_ngcontent-%COMP%]   .bv[_ngcontent-%COMP%] { font-size: .72em; font-weight: 700; color: var(--mj-text-secondary); }\n.cats[_ngcontent-%COMP%] { display: flex; gap: 10px; margin-top: 7px; }\n.cats[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] { flex: 1; text-align: center; font-size: .68em; color: var(--mj-text-muted); font-weight: 500; }\ntable.grid[_ngcontent-%COMP%] { width: 100%; border-collapse: collapse; font-size: .8em; }\ntable.grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] { text-align: left; font-size: .92em; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); padding: 7px 10px; font-weight: 700; border-bottom: 1px solid var(--mj-border-default); }\ntable.grid[_ngcontent-%COMP%]   th.r[_ngcontent-%COMP%], table.grid[_ngcontent-%COMP%]   td.r[_ngcontent-%COMP%] { text-align: right; }\ntable.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { padding: 7px 10px; border-bottom: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); }\ntable.grid[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even)   td[_ngcontent-%COMP%] { background: var(--mj-bg-surface-card); }\ntable.grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { color: var(--mj-text-primary); font-weight: 600; }\n.rfoot[_ngcontent-%COMP%] { padding: 11px 16px; border-top: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); font-size: .72em; color: var(--mj-text-muted); display: flex; align-items: center; gap: 8px; }\n.rfoot[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] { width: 4px; height: 4px; border-radius: 50%; background: var(--mj-text-muted); }\n.side-stack[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.mini[_ngcontent-%COMP%] { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); padding: 13px; box-shadow: var(--mj-shadow-brand-sm); }\n.mini[_ngcontent-%COMP%]   .mt[_ngcontent-%COMP%] { font-size: .82em; font-weight: 700; margin-bottom: 2px; }\n.mini[_ngcontent-%COMP%]   .ms[_ngcontent-%COMP%] { font-size: .72em; color: var(--mj-text-muted); margin-bottom: 10px; }\n.alertrow[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 7px; }\n.alert[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; font-size: .76em; font-weight: 600; border-radius: var(--mj-radius-sm, 6px); padding: 7px 10px; border: 1px solid; }\n.alert.suc[_ngcontent-%COMP%] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); }\n.alert.wrn[_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); }\n.alert.err[_ngcontent-%COMP%] { color: var(--mj-status-error-text); background: var(--mj-status-error-bg); border-color: var(--mj-status-error-border); }\n.alert[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n.ramp[_ngcontent-%COMP%] { display: flex; border-radius: var(--mj-radius-sm, 6px); overflow: hidden; height: 34px; border: 1px solid var(--mj-border-default); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { flex: 1; }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(1) { background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(2) { background: color-mix(in srgb, var(--mj-brand-primary) 22%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(3) { background: color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(4) { background: color-mix(in srgb, var(--mj-brand-primary) 55%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(5) { background: color-mix(in srgb, var(--mj-brand-primary) 72%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(6) { background: color-mix(in srgb, var(--mj-brand-primary) 88%, var(--mj-bg-surface)); }\n.ramp[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:nth-child(7) { background: var(--mj-brand-primary); }\n.ag-sum[_ngcontent-%COMP%] { font-size: .85em; color: var(--mj-text-secondary); line-height: 1.6; margin: 0 0 12px; }\n.ag-sum[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { color: var(--mj-text-primary); }\n.ag-finds[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }\n.ag-find[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); background: var(--mj-bg-surface-card); font-size: .8em; }\n.ag-find[_ngcontent-%COMP%]   .fdot[_ngcontent-%COMP%] { width: 8px; height: 8px; border-radius: 50%; background: var(--mj-brand-primary); flex-shrink: 0; }\n.ag-find[_ngcontent-%COMP%]   .mx-stat[_ngcontent-%COMP%] { margin-left: auto; flex-shrink: 0; }\n\n\n\n.fs-bar[_ngcontent-%COMP%] { position: fixed; top: 14px; right: 16px; z-index: 41; display: flex; align-items: center; gap: 8px; }\n.fs-bar[_ngcontent-%COMP%]   mj-view-toggle[_ngcontent-%COMP%], .fs-bar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { box-shadow: var(--mj-shadow-lg); }\n.kbd[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 10.5px; border: 1px solid var(--mj-border-strong); border-radius: 5px; padding: 1px 5px; color: var(--mj-text-muted); margin-left: 6px; }\n\n\n\n.adv-head[_ngcontent-%COMP%] { cursor: pointer; user-select: none; }\n.adv-head[_ngcontent-%COMP%]   .caret[_ngcontent-%COMP%] { margin-left: auto; font-size: 12px; color: var(--mj-text-muted); }\n.adv-card[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] { margin: 0 0 10px; font-size: 11.5px; color: var(--mj-text-muted); }\n.adv-card[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 11px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-subtle); border-radius: 4px; padding: 0 4px; }\n.adv-sec[_ngcontent-%COMP%] { padding: 10px 0; border-top: 1px solid var(--mj-border-subtle); }\n.adv-sec[_ngcontent-%COMP%]:first-of-type { border-top: 0; }\n.adv-lab[_ngcontent-%COMP%] { font-size: 12px; font-weight: 700; color: var(--mj-text-primary); margin-bottom: 4px; }\n.adv-note[_ngcontent-%COMP%] { margin-top: 6px !important; font-style: italic; }\n.ovr-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }\n.ovr-key[_ngcontent-%COMP%] { flex: 3 1 0; width: auto; min-width: 0; }\n.ovr-val[_ngcontent-%COMP%] { flex: 2 1 0; width: auto; min-width: 0; }\n.ovr-del[_ngcontent-%COMP%] { flex: 0 0 auto; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; display: grid; place-items: center; }\n.ovr-del[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); border-color: color-mix(in srgb, var(--mj-status-error) 45%, transparent); }\n.adv-add[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--mj-border-strong); background: transparent; color: var(--mj-text-link); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; }\n.adv-add[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.adv-css-wrap[_ngcontent-%COMP%] { position: relative; }\n.adv-css[_ngcontent-%COMP%] { display: block; width: 100%; box-sizing: border-box; font-family: var(--mj-font-family-mono); font-size: 12px; line-height: 1.5; color: var(--mj-text-primary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 9px 10px; resize: vertical; }\n.adv-css[_ngcontent-%COMP%]:focus { outline: none; border-color: var(--mj-brand-primary); }\n.css-ac[_ngcontent-%COMP%] { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 210px; overflow: auto; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px; box-shadow: var(--mj-shadow-lg); }\n.css-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-family: var(--mj-font-family-mono); font-size: 12px; color: var(--mj-text-primary); cursor: pointer; }\n.css-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-muted); width: 12px; text-align: center; }\n.css-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.css-ac[_ngcontent-%COMP%]   li.on[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface)); }\n.gen-css[_ngcontent-%COMP%] { position: relative; margin-top: 8px; }\n.gen-css[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] { max-height: 260px; overflow: auto; margin: 0; font-family: var(--mj-font-family-mono); font-size: 11px; line-height: 1.5; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 10px; white-space: pre; }\n.gen-copy[_ngcontent-%COMP%] { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-secondary); font: inherit; font-size: 11px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }\n.gen-copy[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n\n\n\n.preview-note[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); padding: 2px 8px; border-radius: 20px; margin-left: 8px; }\n\n\n\n.ok[_ngcontent-%COMP%]   .mode-tag[_ngcontent-%COMP%] { font-style: normal; font-weight: 600; opacity: .75; text-transform: uppercase; font-size: 9px; letter-spacing: .05em; }\n.contrast-detail[_ngcontent-%COMP%] { padding-top: 4px; }\n\n\n\n.gal-backdrop[_ngcontent-%COMP%] { position: absolute; inset: 0; z-index: 24; background: var(--mj-bg-overlay, color-mix(in srgb, var(--mj-text-primary) 35%, transparent)); }\n.gal[_ngcontent-%COMP%] { position: absolute; z-index: 25; left: 50%; top: 48px; transform: translateX(-50%); width: min(640px, calc(100% - 48px)); background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 14px; box-shadow: var(--mj-shadow-lg); padding: 20px 22px 16px; }\n.gal[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { margin: 0 0 4px; font-size: 17px; font-weight: 750; }\n.gal[_ngcontent-%COMP%]   .gal-sub[_ngcontent-%COMP%] { margin: 0 0 14px; font-size: 12.5px; color: var(--mj-text-muted); }\n.gal-grid[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }\n.gal-card[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--mj-border-default); border-radius: 11px; background: var(--mj-bg-surface); padding: 10px; cursor: pointer; text-align: left; font: inherit; transition: border-color .12s ease, box-shadow .12s ease; }\n.gal-card[_ngcontent-%COMP%]:hover { border-color: var(--mj-brand-primary); box-shadow: var(--mj-shadow-sm); }\n.gal-card[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { font-size: 12.5px; font-weight: 650; color: var(--mj-text-primary); }\n.gal-mock[_ngcontent-%COMP%] { display: block; overflow: hidden; border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card); }\n.gal-mock-bar[_ngcontent-%COMP%] { display: block; height: 18px; }\n.gal-mock-body[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 5px; padding: 8px; }\n.gal-line[_ngcontent-%COMP%] { display: block; height: 5px; border-radius: 3px; background: var(--mj-border-default); width: 80%; }\n.gal-line.short[_ngcontent-%COMP%] { width: 55%; }\n.gal-mock-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 5px; margin-top: 2px; }\n.gal-dot[_ngcontent-%COMP%] { width: 11px; height: 11px; border-radius: 50%; display: block; }\n.gal-btn[_ngcontent-%COMP%] { display: block; width: 34px; height: 12px; margin-left: auto; }\n.gal-foot[_ngcontent-%COMP%] { display: flex; justify-content: flex-start; margin-top: 12px; }\n\n\n\n.ladder[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 4px 0 8px; }\n.ladder[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-muted); }\n.ladder-step[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 20px; padding: 3px 10px 3px 4px; }\n.ladder-step[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { width: 17px; height: 17px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-text-inverse); display: grid; place-items: center; font-size: 10px; font-weight: 700; }\n.ladder-step.esc[_ngcontent-%COMP%] { border-style: dashed; color: var(--mj-status-warning-text); }\n.ladder-step.esc[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.step-num[_ngcontent-%COMP%] { width: 17px; height: 17px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-text-inverse); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; margin-right: 7px; }\n.step-num.esc[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.esc-tag[_ngcontent-%COMP%] { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); padding: 1px 7px; border-radius: 12px; margin-left: 8px; }\n.adv-summary[_ngcontent-%COMP%] { margin: 6px 0 0; font-size: 12px; color: var(--mj-text-secondary); display: flex; align-items: center; gap: 8px; }\n.adv-summary[_ngcontent-%COMP%]   .adv-edit[_ngcontent-%COMP%] { margin-left: 0; }\n\n\n\n.tok-search[_ngcontent-%COMP%] { width: 100%; box-sizing: border-box; margin-bottom: 8px; }\n.tok-groups[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 4px; }\n.tok-group[_ngcontent-%COMP%] { border: 1px solid var(--mj-border-subtle); border-radius: 9px; overflow: hidden; }\n.tok-group-h[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--mj-bg-surface-card); color: var(--mj-text-primary); font: inherit; font-size: 12px; font-weight: 650; padding: 7px 10px; cursor: pointer; }\n.tok-group-h[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.tok-group-h[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] { font-size: 10px; color: var(--mj-text-muted); width: 11px; }\n.tok-count[_ngcontent-%COMP%] { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--mj-text-muted); }\n.tok-mod-count[_ngcontent-%COMP%] { font-size: 9.5px; font-weight: 700; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); padding: 1px 7px; border-radius: 12px; }\n.tok-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-top: 1px solid var(--mj-border-subtle); }\n.tok-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-card); }\n.tok-row.mod[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.tok-sw[_ngcontent-%COMP%] { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--mj-border-default); flex-shrink: 0; }\n.tok-name[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 10.5px; color: var(--mj-text-primary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tok-badge[_ngcontent-%COMP%] { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }\n.tok-clr[_ngcontent-%COMP%] { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; }\n.tok-clr[_ngcontent-%COMP%]   input[type=color][_ngcontent-%COMP%] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 0; border-radius: 5px; background: none; cursor: pointer; padding: 0; }\n.tok-val[_ngcontent-%COMP%], .tok-val-btn[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 10px; color: var(--mj-text-secondary); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tok-val-btn[_ngcontent-%COMP%] { border: 1px dashed transparent; background: transparent; padding: 2px 5px; border-radius: 5px; cursor: pointer; flex-shrink: 0; }\n.tok-val-btn[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-strong); color: var(--mj-text-primary); }\n.tok-edit[_ngcontent-%COMP%] { flex: 1 1 auto; min-width: 90px; width: auto; font-family: var(--mj-font-family-mono); font-size: 10.5px; padding: 3px 7px; }\n.tok-reset[_ngcontent-%COMP%] { flex: 0 0 auto; border: 0; background: transparent; color: var(--mj-text-muted); cursor: pointer; padding: 2px 4px; border-radius: 5px; font-size: 10.5px; }\n.tok-reset[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: var(--mj-bg-surface-hover); }\n\n\n\n.sel-chips[_ngcontent-%COMP%] { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }\n.sel-chip[_ngcontent-%COMP%] { font-family: var(--mj-font-family-mono); font-size: 10.5px; font-weight: 600; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 14px; padding: 3px 9px; cursor: pointer; transition: color .12s ease, border-color .12s ease; }\n.sel-chip[_ngcontent-%COMP%]:hover { color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n.css-tools[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }\n.tok-pick[_ngcontent-%COMP%] { font: inherit; font-size: 11.5px; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 5px 8px; cursor: pointer; max-width: 100%; }\n.adv-css-editor[_ngcontent-%COMP%] { height: clamp(220px, 34vh, 460px); border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }\n\n\n\n.adv-css-editor[_ngcontent-%COMP%]     .cm-editor { height: 100%; }\n.adv-css-editor[_ngcontent-%COMP%]     mj-code-editor { display: block; height: 100%; }\n.css-warn[_ngcontent-%COMP%] { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 0; font-size: 11.5px; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); border-radius: 8px; padding: 6px 9px; }\n.css-warn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-top: 1px; flex-shrink: 0; }\n.gen-css-editor[_ngcontent-%COMP%] { height: 260px; margin-top: 8px; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.gen-css-editor[_ngcontent-%COMP%]     .cm-editor { height: 100%; }\n.gen-css-editor[_ngcontent-%COMP%]     mj-code-editor { display: block; height: 100%; }\n\n@media (max-width: 900px) {\n  .ts-panel[_ngcontent-%COMP%] { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; box-shadow: var(--mj-shadow-lg); }\n  .kpis[_ngcontent-%COMP%] { grid-template-columns: 1fr 1fr; }\n}"] });
+};
+ThemeStudioDashboardComponent = __decorate([
+    RegisterClass(BaseDashboard, 'ThemeStudioDashboard')
+], ThemeStudioDashboardComponent);
+export { ThemeStudioDashboardComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ThemeStudioDashboardComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-theme-studio-dashboard', template: "<mj-page-layout>\n  <mj-page-header Title=\"Theme Studio\" Icon=\"fa-solid fa-palette\" Subtitle=\"Organization theme &amp; branding\">\n    <!-- [meta] = state: which theme is loaded (picker) + its read-only flag. -->\n    <div meta>\n      <div class=\"theme-pick-wrap\">\n        <div class=\"theme-pick\">\n          <span class=\"sw\">\n            <i [style.background]=\"seeds.primary\"></i>\n            <i [style.background]=\"seeds.accent\"></i>\n            <i [style.background]=\"seeds.tertiary\"></i>\n          </span>\n          @if (editingName) {\n            <input #nameInput class=\"name-input\" [(ngModel)]=\"currentName\"\n                   (keydown.enter)=\"commitRename()\" (keydown.escape)=\"cancelRename()\" (blur)=\"commitRename()\"\n                   maxlength=\"80\" aria-label=\"Theme name\" />\n          } @else {\n            <b class=\"theme-name\" (dblclick)=\"startRename()\">{{ currentName }}</b>\n            @if (!isBuiltInSelected) {\n              <button type=\"button\" class=\"rename-btn\" title=\"Rename theme\" aria-label=\"Rename theme\" (click)=\"startRename()\">\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (currentIsDefault) { <span class=\"badge\">DEFAULT</span> }\n          <button type=\"button\" class=\"pick-caret\" title=\"Switch theme\"\n                  aria-label=\"Switch theme\" (click)=\"toggleThemePicker()\">\n            <i class=\"fa-solid fa-chevron-down caret\"></i>\n          </button>\n        </div>\n        @if (themePickerOpen) {\n          <div class=\"menu-backdrop\" (click)=\"themePickerOpen = false\"></div>\n          <div class=\"theme-menu\">\n            @for (t of themes; track t.id) {\n              <button type=\"button\" class=\"theme-menu-item\" [class.on]=\"isCurrentTheme(t.id)\" (click)=\"selectTheme(t)\">\n                <span class=\"sw\">\n                  @for (c of t.swatches; track $index) { <i [style.background]=\"c\"></i> }\n                </span>\n                <b>{{ t.name }}</b>\n                @if (t.isDefault) { <span class=\"badge\">DEFAULT</span> }\n              </button>\n            }\n            <button type=\"button\" class=\"theme-menu-new\" (click)=\"newTheme()\"><i class=\"fa-solid fa-plus\"></i> New theme</button>\n          </div>\n        }\n      </div>\n      @if (isBuiltInSelected) {\n        <span class=\"readonly-note\"><i class=\"fa-solid fa-lock\"></i> Built-in \u00B7 read-only</span>\n      }\n      @if (workspacePreviewOn) {\n        <span class=\"preview-note\"><i class=\"fa-solid fa-eye\"></i> Draft previewing on your workspace</span>\n      }\n    </div>\n\n    <!-- [actions] = verbs: secondary actions, then the one primary CTA rightmost. -->\n    <div actions>\n      <button mjButton variant=\"flat\" size=\"sm\" (click)=\"discard()\">Discard</button>\n      <button mjButton variant=\"outline\" size=\"sm\" [disabled]=\"!currentThemeId\"\n              title=\"Apply this theme to your workspace now \u2014 it persists across sessions until you pick another\"\n              (click)=\"applyToMe()\">Apply to me</button>\n      <button mjButton variant=\"outline\" size=\"sm\" [disabled]=\"!currentThemeId\"\n              title=\"Make this the organization-wide default theme for everyone\" (click)=\"setAsDefault()\">Set as org default</button>\n      @if (isBuiltInSelected) {\n        <button mjButton variant=\"primary\" size=\"sm\" (click)=\"saveAsCopy()\">Save as copy</button>\n      } @else {\n        <button mjButton variant=\"primary\" size=\"sm\" [disabled]=\"saving\" (click)=\"save()\">{{ saving ? 'Saving\u2026' : 'Save theme' }}</button>\n      }\n    </div>\n\n    <!-- [toolbar] = secondary controls: preview surface / mode, fullscreen, panel toggle. -->\n    <div toolbar>\n      <mj-view-toggle [Options]=\"surfaceOptions\" [ActiveKey]=\"activeView\"\n                      (KeyChange)=\"onSurfaceToggle($event)\"></mj-view-toggle>\n      <span class=\"toolbar-spacer\"></span>\n      <mj-view-toggle [Options]=\"modeOptions\" [ActiveKey]=\"previewMode\"\n                      (KeyChange)=\"onModeToggle($event)\"></mj-view-toggle>\n      <button mjButton variant=\"icon\" ariaLabel=\"Full screen preview\" title=\"Full screen preview\"\n              (click)=\"toggleFullscreen(true)\"><i class=\"fa-solid fa-expand\"></i></button>\n      <button mjButton [variant]=\"panelCollapsed ? 'outline' : 'secondary'\" size=\"sm\"\n              (click)=\"togglePanel()\"><i class=\"fa-solid fa-sliders\"></i> Edit theme</button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Padding]=\"false\" [Flex]=\"true\">\n    <!-- Stage: preview (primary) + slide panel -->\n    <div #stage class=\"ts-stage\" [class.collapsed]=\"panelCollapsed\">\n\n      <!-- New-theme preset gallery (Q1#2): pick a personality before tuning seeds.\n           Deliberately NOT mj-dialog (conscious exception): the gallery is positioned\n           within the stage so the preview stays visible behind it, while mj-dialog is\n           a viewport-centered overlay. Focus lands on the dialog when it opens and\n           the document-level Escape handler closes it. -->\n      @if (presetGalleryOpen) {\n        <div class=\"gal-backdrop\" (click)=\"closePresetGallery()\"></div>\n        <div #galDialog class=\"gal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Start a new theme\" tabindex=\"-1\">\n          <h2>Start a new theme</h2>\n          <p class=\"gal-sub\">Pick a personality first \u2014 everything derives from a few seeds, so you can tune it all after.</p>\n          <div class=\"gal-grid\">\n            @for (p of presets; track p.name) {\n              <button type=\"button\" class=\"gal-card\" (click)=\"choosePreset(p)\">\n                <span class=\"gal-mock\" [style.border-radius.px]=\"p.seeds.radius ?? 8\">\n                  <span class=\"gal-mock-bar\" [style.background]=\"p.seeds.primary\"></span>\n                  <span class=\"gal-mock-body\">\n                    <span class=\"gal-line\"></span>\n                    <span class=\"gal-line short\"></span>\n                    <span class=\"gal-mock-row\">\n                      <span class=\"gal-dot\" [style.background]=\"p.seeds.accent ?? p.seeds.primary\"></span>\n                      <span class=\"gal-dot\" [style.background]=\"p.seeds.tertiary ?? p.seeds.accent ?? p.seeds.primary\"></span>\n                      <span class=\"gal-btn\" [style.background]=\"p.seeds.primary\"\n                            [style.border-radius.px]=\"(p.seeds.radius ?? 8) / 2\"></span>\n                    </span>\n                  </span>\n                </span>\n                <b>{{ p.name }}</b>\n              </button>\n            }\n          </div>\n          <div class=\"gal-foot\">\n            <button mjButton variant=\"flat\" size=\"sm\" (click)=\"closePresetGallery()\">Start blank (MJ defaults)</button>\n          </div>\n        </div>\n      }\n\n      <div class=\"pv-wrap\">\n        <div class=\"pv-inner\">\n          <div #previewCanvas class=\"ts-canvas\" [class.fullscreen]=\"fullscreen\">\n            <!-- Fullscreen floating controls (inside canvas so they render in the top layer) -->\n            @if (fullscreen) {\n              <div class=\"fs-bar\">\n                <mj-view-toggle [Options]=\"modeOptions\" [ActiveKey]=\"previewMode\"\n                                (KeyChange)=\"onModeToggle($event)\"></mj-view-toggle>\n                <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"toggleFullscreen(false)\">Exit full screen <span class=\"kbd\">Esc</span></button>\n              </div>\n            }\n            <div class=\"pv-scroll\">\n\n              <!-- ============ Explorer UI style guide (interactive \u2014 Q1#6) ============ -->\n              @if (activeView === 'explorer') {\n                <div class=\"pv-view\">\n                  <div class=\"zone-lab\">Explorer UI \u00B7 shell + page chrome + ng-ui-components \u00B7 hover &amp; tab around \u2014 states are live</div>\n                  <div class=\"mx\">\n                    <div class=\"mx-shell\">\n                      <span class=\"mx-appico\"><i class=\"fa-solid fa-table-cells-large\"></i></span>\n                      <span class=\"mx-nav\">\n                        @for (item of mockNavItems; track item; let i = $index) {\n                          <b [class.on]=\"mockNav === i\" tabindex=\"0\" role=\"button\"\n                             (click)=\"mockNav = i\" (keydown.enter)=\"mockNav = i\"\n                             (keydown.space)=\"mockNav = i; $event.preventDefault()\">{{ item }}</b>\n                        }\n                      </span>\n                      <span class=\"mx-search\" tabindex=\"0\"><i class=\"fa-solid fa-magnifying-glass\"></i> Search everything\u2026</span>\n                      <span class=\"mx-sp\"></span>\n                      <span class=\"mx-av\" tabindex=\"0\">AC</span>\n                    </div>\n                    <div class=\"mx-ph\">\n                      <div class=\"mx-ph-top\">\n                        <span class=\"mx-ph-ico\"><i class=\"fa-solid fa-users\"></i></span>\n                        <div>\n                          <div class=\"mx-ph-title\">Membership Overview</div>\n                          <div class=\"mx-ph-sub\">mj-page-layout \u00B7 mj-page-header \u00B7 mj-page-body</div>\n                        </div>\n                        <div class=\"mx-ph-actions\">\n                          <button class=\"mx-btn sec\">Export</button>\n                          <button class=\"mx-btn pri\">New record</button>\n                        </div>\n                      </div>\n                      <div class=\"mx-toolbar\">\n                        <span class=\"mx-tabs\" role=\"tablist\">\n                          @for (t of mockTabs; track t; let i = $index) {\n                            <i [class.on]=\"mockTab === i\" tabindex=\"0\" role=\"tab\" [attr.aria-selected]=\"mockTab === i\"\n                               (click)=\"mockTab = i\" (keydown.enter)=\"mockTab = i\"\n                               (keydown.space)=\"mockTab = i; $event.preventDefault()\">{{ t }}</i>\n                          }\n                        </span>\n                      </div>\n                    </div>\n                    <div class=\"mx-body\">\n                      <div class=\"mx-cell wide\">\n                        <span class=\"mx-cap\">mjButton \u2014 primary \u00B7 secondary \u00B7 outline \u00B7 danger</span>\n                        <div class=\"mx-row\">\n                          <button class=\"mx-btn pri\">Save</button>\n                          <button class=\"mx-btn sec\">Cancel</button>\n                          <button class=\"mx-btn out\">Configure</button>\n                          <button class=\"mx-btn dgr\">Delete</button>\n                        </div>\n                      </div>\n                      <div class=\"mx-cell wide\">\n                        <span class=\"mx-cap\">Button states \u2014 rest \u00B7 hover \u00B7 active \u00B7 focus \u00B7 disabled</span>\n                        <div class=\"mx-row states-row\">\n                          <button class=\"mx-btn pri\">Rest</button>\n                          <button class=\"mx-btn pri is-hover\">Hover</button>\n                          <button class=\"mx-btn pri is-active\">Active</button>\n                          <button class=\"mx-btn pri is-focus\">Focus</button>\n                          <button class=\"mx-btn pri\" disabled>Disabled</button>\n                        </div>\n                        <div class=\"mx-row states-row\">\n                          <button class=\"mx-btn sec\">Rest</button>\n                          <button class=\"mx-btn sec is-hover\">Hover</button>\n                          <button class=\"mx-btn sec is-active\">Active</button>\n                          <button class=\"mx-btn sec is-focus\">Focus</button>\n                          <button class=\"mx-btn sec\" disabled>Disabled</button>\n                        </div>\n                        <div class=\"mx-row states-row\">\n                          <button class=\"mx-btn out\">Rest</button>\n                          <button class=\"mx-btn out is-hover\">Hover</button>\n                          <button class=\"mx-btn out is-active\">Active</button>\n                          <button class=\"mx-btn out is-focus\">Focus</button>\n                          <button class=\"mx-btn out\" disabled>Disabled</button>\n                        </div>\n                        <div class=\"mx-row states-row\">\n                          <button class=\"mx-btn dgr\">Rest</button>\n                          <button class=\"mx-btn dgr is-hover\">Hover</button>\n                          <button class=\"mx-btn dgr is-active\">Active</button>\n                          <button class=\"mx-btn dgr is-focus\">Focus</button>\n                          <button class=\"mx-btn dgr\" disabled>Disabled</button>\n                        </div>\n                      </div>\n                      <div class=\"mx-cell wide\">\n                        <span class=\"mx-cap\">mj-input \u00B7 mj-combobox \u00B7 mj-switch</span>\n                        <div class=\"mx-row\">\n                          <span class=\"mx-input focus\" style=\"flex:1\">Northwind Tra</span>\n                          <span class=\"mx-input\" tabindex=\"0\" style=\"flex:1\">Member type <i class=\"fa-solid fa-chevron-down\"></i></span>\n                        </div>\n                        <div class=\"mx-row\">\n                          <span class=\"mx-swch\" [class.off]=\"!mockSwitchA\" role=\"switch\" tabindex=\"0\"\n                                [attr.aria-checked]=\"mockSwitchA\" aria-label=\"Toggle switch\"\n                                (click)=\"mockSwitchA = !mockSwitchA\" (keydown.enter)=\"mockSwitchA = !mockSwitchA\"\n                                (keydown.space)=\"mockSwitchA = !mockSwitchA; $event.preventDefault()\"></span>\n                          <span class=\"mx-swch\" [class.off]=\"!mockSwitchB\" role=\"switch\" tabindex=\"0\"\n                                [attr.aria-checked]=\"mockSwitchB\" aria-label=\"Toggle auto-renew\"\n                                (click)=\"mockSwitchB = !mockSwitchB\" (keydown.enter)=\"mockSwitchB = !mockSwitchB\"\n                                (keydown.space)=\"mockSwitchB = !mockSwitchB; $event.preventDefault()\"></span>\n                          <span class=\"mx-lbl\">Auto-renew</span>\n                        </div>\n                      </div>\n                      <div class=\"mx-cell\">\n                        <span class=\"mx-cap\">mj-filter-chip</span>\n                        <div class=\"mx-row\">\n                          <span class=\"mx-chip on\" tabindex=\"0\">Active</span>\n                          <span class=\"mx-chip\" tabindex=\"0\">Lapsed</span>\n                          <span class=\"mx-chip\" tabindex=\"0\">Pending</span>\n                        </div>\n                      </div>\n                      <div class=\"mx-cell\">\n                        <span class=\"mx-cap\">mj-stat-badge \u00B7 mj-progress-bar</span>\n                        <div class=\"mx-row\"><span class=\"mx-stat brand\">1,204 Members</span><span class=\"mx-stat suc\">Active</span><span class=\"mx-stat wrn\">Expiring</span></div>\n                        <div class=\"mx-row\"><span class=\"mx-prog\"><i></i></span><span class=\"mx-lbl\">64%</span></div>\n                      </div>\n                      <div class=\"mx-cell\">\n                        <span class=\"mx-cap\">mj-left-nav \u00B7 mj-accordion \u00B7 mj-alert</span>\n                        <div class=\"mx-lnav\">\n                          <b class=\"on\" tabindex=\"0\"><i class=\"fa-solid fa-house\"></i> Overview</b>\n                          <b tabindex=\"0\"><i class=\"fa-solid fa-users\"></i> Members</b>\n                          <b tabindex=\"0\" role=\"button\" [attr.aria-expanded]=\"mockAccordionOpen\"\n                             (click)=\"mockAccordionOpen = !mockAccordionOpen\" (keydown.enter)=\"mockAccordionOpen = !mockAccordionOpen\"\n                             (keydown.space)=\"mockAccordionOpen = !mockAccordionOpen; $event.preventDefault()\">\n                            <i class=\"fa-solid\" [class.fa-chevron-down]=\"mockAccordionOpen\" [class.fa-chevron-right]=\"!mockAccordionOpen\"></i> Reports\n                          </b>\n                          @if (mockAccordionOpen) {\n                            <b class=\"mx-acc-item\" tabindex=\"0\">Renewal funnel</b>\n                            <b class=\"mx-acc-item\" tabindex=\"0\">Engagement</b>\n                          }\n                        </div>\n                        <div class=\"mx-alert\"><i></i>12 imports finished overnight</div>\n                      </div>\n                      <div class=\"mx-cell\">\n                        <span class=\"mx-cap\">mj-dialog \u00B7 mj-dialog-actions</span>\n                        <div class=\"mx-dlg\">\n                          <div class=\"mx-dlg-t\">Rename view</div>\n                          <div class=\"mx-dlg-b\"><span class=\"mx-input focus\" style=\"width:100%\">Q3 Renewal Pipeline</span></div>\n                          <div class=\"mx-dlg-a\"><button class=\"mx-btn pri\">Save</button><button class=\"mx-btn sec\">Cancel</button></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n\n              <!-- ============ Artifact \u2014 one generated document, styled by the theme ============ -->\n              @if (activeView === 'artifact') {\n                <div class=\"pv-view\">\n                  <div class=\"report\">\n                    <div class=\"rhead\">\n                      <span class=\"logo\"></span>\n                      <div><div class=\"ti\">Acme Analytics</div><div class=\"su\">Q2 Pipeline Overview</div></div>\n                      <div class=\"rt\">Generated \u00B7 Jul 2026</div>\n                    </div>\n                    <div class=\"rbody\">\n                      <div class=\"kpis\">\n                        <div class=\"kpi\"><div class=\"n\">$4.2M</div><div class=\"l\">Pipeline value</div><div class=\"d up\">\u25B2 12.4%</div></div>\n                        <div class=\"kpi\"><div class=\"n\">318</div><div class=\"l\">Open deals</div><div class=\"d up\">\u25B2 6.1%</div></div>\n                        <div class=\"kpi\"><div class=\"n\">27%</div><div class=\"l\">Win rate</div><div class=\"d dn\">\u25BC 1.8%</div></div>\n                      </div>\n                      <div class=\"chart\">\n                        <div class=\"ct\">Pipeline by stage</div>\n                        <div class=\"cs\">Value in each stage, current quarter</div>\n                        <div class=\"bars\">\n                          @for (h of barHeights; track $index; let i = $index) {\n                            <div class=\"bar\">\n                              <span class=\"bv\">{{ barValues[i] }}</span>\n                              <span class=\"fill\" [style.height.%]=\"h\" [style.background]=\"vizColors[i % vizColors.length]\"></span>\n                            </div>\n                          }\n                        </div>\n                        <div class=\"cats\">\n                          @for (c of barCats; track c) { <span>{{ c }}</span> }\n                        </div>\n                      </div>\n                      <table class=\"grid\">\n                        <thead><tr><th>Account</th><th>Stage</th><th class=\"r\">Value</th><th class=\"r\">Close</th></tr></thead>\n                        <tbody>\n                          <tr><td><b>Northwind Traders</b></td><td>Negotiate</td><td class=\"r\">$820,000</td><td class=\"r\">Aug 12</td></tr>\n                          <tr><td><b>Contoso Ltd</b></td><td>Propose</td><td class=\"r\">$465,000</td><td class=\"r\">Sep 03</td></tr>\n                          <tr><td><b>Fabrikam Inc</b></td><td>Commit</td><td class=\"r\">$1,240,000</td><td class=\"r\">Jul 29</td></tr>\n                        </tbody>\n                      </table>\n                      <p class=\"ag-sum\"><b>Summary.</b> Northwind expanded into two of Acme's core regions this quarter,\n                        hired a new VP of Partnerships, and repriced its mid-tier plan 8% below Acme's.</p>\n                      <div class=\"ag-finds\">\n                        <div class=\"ag-find\"><span class=\"fdot\"></span><span><b>Regional expansion</b> \u2014 opened Denver and Austin offices</span><span class=\"mx-stat wrn\">High impact</span></div>\n                        <div class=\"ag-find\"><span class=\"fdot\"></span><span><b>Pricing move</b> \u2014 mid-tier repriced to $79/seat</span><span class=\"mx-stat brand\">Watch</span></div>\n                        <div class=\"ag-find\"><span class=\"fdot\"></span><span><b>Positioning shift</b> \u2014 \"live in 30 days\" campaign</span><span class=\"mx-stat neu\">Monitor</span></div>\n                      </div>\n                      <table class=\"grid\">\n                        <thead><tr><th>Source</th><th>Type</th><th class=\"r\">Confidence</th></tr></thead>\n                        <tbody>\n                          <tr><td><b>Northwind press release</b></td><td>Primary</td><td class=\"r\">High</td></tr>\n                          <tr><td><b>G2 pricing capture</b></td><td>Primary</td><td class=\"r\">High</td></tr>\n                          <tr><td><b>LinkedIn hiring signals</b></td><td>Inferred</td><td class=\"r\">Medium</td></tr>\n                        </tbody>\n                      </table>\n                    </div>\n                    <div class=\"rfoot\"><span>{{ footerNotice }}</span><span class=\"dot\"></span><span>as of Jul 2026</span></div>\n                  </div>\n                </div>\n              }\n\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Slide panel: editor (resizable \u2014 Q3#1/#2) -->\n      <aside class=\"ts-panel\" aria-label=\"Theme editor\" [class.resizing]=\"panelResizing\"\n             [style.width.px]=\"panelCollapsed ? 0 : panelWidth\">\n        <div class=\"panel-resize\" role=\"separator\" aria-orientation=\"vertical\" aria-label=\"Resize editor panel\"\n             title=\"Drag to resize\" (pointerdown)=\"startPanelResize($event)\"></div>\n        <div class=\"panel-h\">\n          <span class=\"ic\"><i class=\"fa-solid fa-palette\"></i></span>\n          <div><h2>Edit theme</h2><small>One theme serves light &amp; dark</small></div>\n          <button type=\"button\" class=\"collapse-btn\" (click)=\"togglePanel()\" title=\"Collapse panel\"><i class=\"fa-solid fa-chevron-right\"></i></button>\n        </div>\n        <div class=\"panel-body\">\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-plus\"></i></span>Start from a preset</h3>\n            <div class=\"preset-row\">\n              @for (p of presets; track p.name) {\n                <button type=\"button\" class=\"preset\" (click)=\"applyPreset(p)\" [title]=\"p.name\">\n                  <span class=\"sw\"><i [style.background]=\"p.seeds.primary\"></i><i [style.background]=\"p.seeds.accent\"></i><i [style.background]=\"p.seeds.tertiary || p.seeds.accent\"></i></span>\n                  <small>{{ p.name }}</small>\n                </button>\n              }\n            </div>\n          </div>\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-plus\"></i></span>Brand colors<span class=\"scope\">Everywhere</span></h3>\n            <p class=\"sub\">Anchor colors only. Ramps, hovers, and dark-mode values derive automatically.</p>\n            <div class=\"row\"><div class=\"lab\">Primary<small>Buttons, links, headers</small></div>\n              <div class=\"ctl\"><span class=\"clr\"><input type=\"color\" [(ngModel)]=\"seeds.primary\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"hex\">{{ seeds.primary }}</span></span></div></div>\n            <div class=\"derived-note\"><i [style.background]=\"darkPrimary\"></i>Dark mode uses derived <code>{{ darkPrimary }}</code> (ramp step)</div>\n            <div class=\"row\"><div class=\"lab\">Accent<small>Highlights, KPI accents</small></div>\n              <div class=\"ctl\"><span class=\"clr\"><input type=\"color\" [(ngModel)]=\"seeds.accent\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"hex\">{{ seeds.accent }}</span></span></div></div>\n            <div class=\"row\"><div class=\"lab\">Tertiary<small>Secondary actions, info</small></div>\n              <div class=\"ctl\"><span class=\"clr\"><input type=\"color\" [(ngModel)]=\"seeds.tertiary\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"hex\">{{ seeds.tertiary }}</span></span></div></div>\n            <div class=\"row\"><div class=\"lab\">Secondary<small>Derived \u2014 deep surfaces</small></div>\n              <div class=\"ctl\"><span class=\"clr static\"><span class=\"sw-box\" [style.background]=\"secondaryColor\"></span><span class=\"hex\">{{ secondaryColor }}</span></span></div></div>\n            <div class=\"row\"><div class=\"lab\">Text on primary<small>Worst of light &amp; dark</small></div>\n              <div class=\"ctl\">\n                @if (onPrimaryWorst; as worst) {\n                  <span class=\"ok\" [class.warn]=\"!worst.check.passes\"\n                        [title]=\"'light ' + (onPrimaryDetail.light?.ratio ?? '\u2014') + ':1 \u00B7 dark ' + (onPrimaryDetail.dark?.ratio ?? '\u2014') + ':1'\">\n                    {{ worst.check.passes ? '\u2713' : '\u26A0' }} {{ worst.check.ratio }}:1 <em class=\"mode-tag\">{{ worst.mode }}</em>\n                    @if (!worst.check.passes && worst.check.suggestion) { <span> \u2192 {{ worst.check.suggestion.hex }}</span> }\n                  </span>\n                }\n              </div></div>\n            @if (onPrimaryDetail.light; as l) {\n              @if (onPrimaryDetail.dark; as d) {\n                <div class=\"derived-note contrast-detail\">Per mode: light {{ l.ratio }}:1 {{ l.passes ? '\u2713' : '\u26A0' }} \u00B7 dark {{ d.ratio }}:1 {{ d.passes ? '\u2713' : '\u26A0' }}</div>\n              }\n            }\n          </div>\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-font\"></i></span>Typography<span class=\"scope\">Everywhere</span></h3>\n            <div class=\"row\"><div class=\"lab\">Font family</div>\n              <div class=\"ctl\"><select [(ngModel)]=\"seeds.fontFamily\" (ngModelChange)=\"onSeedsChanged()\">\n                @for (f of fontOptions; track f.value) {\n                  <option [value]=\"f.value\">{{ f.label }}</option>\n                }\n              </select></div></div>\n            <div class=\"row\"><div class=\"lab\">Vibrancy<small>Brand ramp saturation</small></div>\n              <div class=\"ctl\"><input type=\"range\" min=\"0.5\" max=\"1.4\" step=\"0.05\" [(ngModel)]=\"seeds.vibrancy\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"val\">{{ seeds.vibrancy }}</span></div></div>\n            <div class=\"row\"><div class=\"lab\">Neutral character<small>Brand tint in grays</small></div>\n              <div class=\"ctl\"><input type=\"range\" min=\"0\" max=\"0.08\" step=\"0.005\" [(ngModel)]=\"seeds.neutralChroma\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"val\">{{ seeds.neutralChroma }}</span></div></div>\n            <div class=\"row\"><div class=\"lab\">Base size<small>Generated content</small></div>\n              <div class=\"ctl\"><input type=\"range\" min=\"12\" max=\"18\" step=\"1\" [(ngModel)]=\"baseFontSize\" (ngModelChange)=\"onBaseSizeChanged()\"><span class=\"val\">{{ baseFontSize }}px</span></div></div>\n          </div>\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-square\"></i></span>Shape &amp; density<span class=\"scope\">Generated content</span></h3>\n            <p class=\"sub\">Applies to Skip / agent components. Explorer chrome keeps MJ shape.</p>\n            <div class=\"row\"><div class=\"lab\">Corner radius</div>\n              <div class=\"ctl\"><input type=\"range\" min=\"0\" max=\"20\" step=\"1\" [(ngModel)]=\"seeds.radius\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"val\">{{ seeds.radius }}px</span></div></div>\n            <div class=\"row\"><div class=\"lab\">Elevation depth<small>Brand shadow strength</small></div>\n              <div class=\"ctl\"><input type=\"range\" min=\"0\" max=\"1\" step=\"0.1\" [(ngModel)]=\"seeds.depth\" (ngModelChange)=\"onSeedsChanged()\"><span class=\"val\">{{ seeds.depth }}</span></div></div>\n            <div class=\"row\"><div class=\"lab\">Density</div>\n              <div class=\"ctl\"><div class=\"miniseg\">\n                <button type=\"button\" [class.on]=\"density === 16\" (click)=\"density = 16; onDensityChanged()\">Comfortable</button>\n                <button type=\"button\" [class.on]=\"density === 9\" (click)=\"density = 9; onDensityChanged()\">Compact</button>\n              </div></div></div>\n          </div>\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-chart-column\"></i></span>Chart palette\n              @if (vizOverridden) {\n                <button type=\"button\" class=\"reset-link\" (click)=\"resetViz()\">reset</button>\n              }\n            </h3>\n            <p class=\"sub\">Series 1 follows Primary until you override it {{ vizOverridden ? '(overridden)' : '' }}.</p>\n            <div class=\"swrow\">\n              @for (c of vizColors; track $index; let i = $index) {\n                <label class=\"chip-clr\" [style.background]=\"c\">\n                  <span class=\"chip-num\">{{ i + 1 }}</span>\n                  <input type=\"color\" [value]=\"c\" (input)=\"editViz(i, $event)\">\n                </label>\n              }\n            </div>\n          </div>\n\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-image\"></i></span>Logo &amp; branding</h3>\n            <div class=\"row\"><div class=\"lab\">Footer notice<small>Shown in generated output</small></div>\n              <div class=\"ctl\"><input class=\"tinput\" [(ngModel)]=\"footerNotice\"></div></div>\n            <p class=\"sub\" style=\"margin:8px 0 0\">Logo variant uploads (light / dark / wordmark) are coming with the asset pipeline \u2014 no recolor knob needed.</p>\n          </div>\n\n          <!-- Recipes (Q2#3): curated intents that expand to reversible token sets. -->\n          <div class=\"card\">\n            <h3><span class=\"ic\"><i class=\"fa-solid fa-wand-magic-sparkles\"></i></span>Recipes</h3>\n            <p class=\"sub\">Curated looks, expanded to token overrides underneath \u2014 fully reversible.</p>\n            @for (rs of recipeStates; track rs.recipe.id) {\n              <div class=\"row\">\n                <div class=\"lab\">{{ rs.recipe.name }}<small>{{ rs.recipe.description }}</small></div>\n                <div class=\"ctl\">\n                  <mj-switch [ngModel]=\"rs.on\" (ngModelChange)=\"toggleRecipe(rs.recipe)\"\n                             [attr.aria-label]=\"'Toggle ' + rs.recipe.name\"></mj-switch>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Advanced: the explicit escalation ladder \u2014 seeds \u2192 token overrides \u2192 CSS (Q3#9). -->\n          <div class=\"card adv-card\">\n            <h3 class=\"adv-head\" (click)=\"toggleAdvanced()\">\n              <span class=\"ic\"><i class=\"fa-solid fa-code\"></i></span>Advanced\n              <i class=\"fa-solid caret\" [class.fa-chevron-down]=\"advancedOpen\" [class.fa-chevron-right]=\"!advancedOpen\"></i>\n            </h3>\n            @if (!advancedOpen && advancedSummary) {\n              <p class=\"adv-summary\">{{ advancedSummary }}\n                <button type=\"button\" class=\"reset-link adv-edit\" (click)=\"toggleAdvanced()\">Edit</button>\n              </p>\n            }\n            @if (advancedOpen) {\n              <div class=\"ladder\" aria-hidden=\"true\">\n                <span class=\"ladder-step done\"><b>1</b> Seeds</span>\n                <i class=\"fa-solid fa-arrow-right\"></i>\n                <span class=\"ladder-step\"><b>2</b> Token overrides</span>\n                <i class=\"fa-solid fa-arrow-right\"></i>\n                <span class=\"ladder-step esc\"><b>3</b> Custom CSS</span>\n              </div>\n              <p class=\"sub\">Escalate in order. Seeds (above) cover most themes; token overrides refine specific surfaces; custom CSS is the escape hatch for what tokens can't express.</p>\n\n              <!-- Step 2: visual token browser (Q2#1) -->\n              <div class=\"adv-sec\">\n                <div class=\"adv-lab\"><span class=\"step-num\">2</span>Token overrides</div>\n                <p class=\"sub\">The full derived token contract, grouped and searchable. Click a swatch to override; hover a row to see where it's used in the preview. Overrides apply over the derived tokens (both modes).</p>\n                <input class=\"tinput tok-search\" type=\"search\" placeholder=\"Search tokens (e.g. hover, surface, viz)\u2026\"\n                       [(ngModel)]=\"tokenSearch\" (ngModelChange)=\"onTokenSearchChanged()\" spellcheck=\"false\">\n                <div class=\"tok-groups\">\n                  @for (g of tokenGroups; track g.key) {\n                    <div class=\"tok-group\">\n                      <button type=\"button\" class=\"tok-group-h\" (click)=\"toggleTokenCategory(g.key)\">\n                        <i class=\"fa-solid\" [class.fa-chevron-down]=\"isTokenCategoryOpen(g.key)\" [class.fa-chevron-right]=\"!isTokenCategoryOpen(g.key)\"></i>\n                        {{ g.label }}\n                        @if (g.modified > 0) { <span class=\"tok-mod-count\">{{ g.modified }} modified</span> }\n                        <span class=\"tok-count\">{{ g.rows.length }}</span>\n                      </button>\n                      @if (isTokenCategoryOpen(g.key)) {\n                        @for (t of g.rows; track t.name) {\n                          <div class=\"tok-row\" [class.mod]=\"t.overridden\"\n                               (mouseenter)=\"highlightTokenTargets(t.name)\" (mouseleave)=\"clearTokenHighlight()\">\n                            <span class=\"tok-sw\" [style.background]=\"t.value\"></span>\n                            <code class=\"tok-name\" [title]=\"t.name\">{{ t.name }}</code>\n                            @if (t.overridden) { <span class=\"tok-badge\">modified</span> }\n                            @if (editingToken === t.name) {\n                              <input class=\"tinput tok-edit\" [(ngModel)]=\"editingTokenValue\" spellcheck=\"false\"\n                                     (keydown.enter)=\"commitTokenEdit()\" (keydown.escape)=\"cancelTokenEdit()\" (blur)=\"commitTokenEdit()\">\n                            } @else if (t.isColor) {\n                              <label class=\"tok-clr\" [title]=\"t.value\">\n                                <input type=\"color\" [value]=\"t.colorValue\" (input)=\"onTokenColorInput(t.name, $event)\">\n                                <span class=\"tok-val\">{{ t.value }}</span>\n                              </label>\n                            } @else {\n                              <button type=\"button\" class=\"tok-val-btn\" [title]=\"'Edit ' + t.name\" (click)=\"beginTokenEdit(t)\">{{ t.value }}</button>\n                            }\n                            @if (t.overridden) {\n                              <button type=\"button\" class=\"tok-reset\" title=\"Reset to derived value\" (click)=\"resetTokenOverride(t.name)\"><i class=\"fa-solid fa-rotate-left\"></i></button>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n\n              <!-- Step 3: custom CSS \u2014 the escape hatch (Q3#4/#5/#6/#8) -->\n              <div class=\"adv-sec\">\n                <div class=\"adv-lab\"><span class=\"step-num esc\">3</span>Custom CSS<span class=\"esc-tag\">escape hatch</span></div>\n                <p class=\"sub\">Only for what tokens can't express. Appended to the theme overlay, auto-scoped to this theme. <code>&#64;import</code> is not supported and is removed on save.</p>\n                <div class=\"sel-chips\">\n                  @for (s of chromeSelectorInfo; track s.selector) {\n                    <button type=\"button\" class=\"sel-chip\" [title]=\"s.description\" (click)=\"insertChromeSelector(s.selector)\">{{ s.selector }}</button>\n                  }\n                </div>\n                <div class=\"css-tools\">\n                  <select class=\"tok-pick\" (change)=\"onInsertTokenPick($event)\" aria-label=\"Insert a token at the cursor\">\n                    <option value=\"\">Insert token\u2026</option>\n                    @for (n of overridableTokens; track n) { <option [value]=\"n\">{{ n }}</option> }\n                  </select>\n                </div>\n                <div class=\"adv-css-editor\">\n                  <mj-code-editor #cssCm language=\"css\" setup=\"basic\"\n                                  [value]=\"customCss\" (change)=\"onCssEditorChange($event)\"\n                                  [extensions]=\"cssEditorExtensions\" [lineWrapping]=\"true\"\n                                  placeholder=\"mj-shell &#123; box-shadow: none; &#125;\"></mj-code-editor>\n                </div>\n                @for (w of cssWarnings; track w) {\n                  <p class=\"css-warn\"><i class=\"fa-solid fa-triangle-exclamation\"></i> {{ w }}</p>\n                }\n                <p class=\"sub adv-note\">The canvas preview of custom CSS is approximate \u2014 the mock's markup differs from the real chrome. Use the workspace preview to author against reality:</p>\n                <button mjButton [variant]=\"workspacePreviewOn ? 'warning' : 'outline'\" size=\"sm\" (click)=\"toggleWorkspacePreview()\">\n                  <i class=\"fa-solid\" [class.fa-eye]=\"!workspacePreviewOn\" [class.fa-eye-slash]=\"workspacePreviewOn\"></i>\n                  {{ workspacePreviewOn ? 'End workspace preview' : 'Preview on my workspace' }}\n                </button>\n              </div>\n\n              <div class=\"adv-sec\">\n                <button type=\"button\" class=\"adv-add\" (click)=\"showGeneratedCss = !showGeneratedCss\">\n                  <i class=\"fa-solid\" [class.fa-eye]=\"!showGeneratedCss\" [class.fa-eye-slash]=\"showGeneratedCss\"></i>\n                  {{ showGeneratedCss ? 'Hide' : 'View' }} generated CSS\n                </button>\n                @if (showGeneratedCss) {\n                  <div class=\"gen-css\">\n                    <button type=\"button\" class=\"gen-copy\" (click)=\"copyGeneratedCss()\"><i class=\"fa-solid fa-copy\"></i> Copy</button>\n                    <div class=\"gen-css-editor\">\n                      <mj-code-editor language=\"css\" setup=\"minimal\" readonly [value]=\"generatedCss\"></mj-code-editor>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n        </div>\n      </aside>\n    </div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Theme Studio (v2 layout). Page chrome comes from the shared trio (mj-page-layout /\n   mj-page-header / mj-page-body) + mjButton / mj-view-toggle; this file styles the\n   theme picker chip (header meta slot), the preview stage + slide-panel editor, and\n   the preview canvas. The studio's own controls use the live app --mj-* tokens; the\n   preview canvas uses the derived --mj-* vars pushed inline by applyPreviewVars().\n   Radius applies app-wide \u2014 MJ chrome components consume var(--mj-radius-*) \u2014 so the\n   Explorer mock (mx-*) uses the radius tokens too, matching the real app. */\n:host { display: block; width: 100%; height: 100%; }\n\n/* ---------- theme picker chip (projected into the header [meta] slot) ---------- */\n.theme-pick-wrap { position: relative; }\n.theme-pick { display: inline-flex; align-items: center; gap: 8px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 9px; padding: 5px 6px 5px 10px; color: var(--mj-text-primary); font: inherit; }\n.theme-pick .sw, .theme-menu-item .sw { display: flex; }\n.theme-pick .sw i, .theme-menu-item .sw i { width: 9px; height: 16px; display: block; margin-left: -3px; border-radius: 3px; border: 1.5px solid var(--mj-bg-surface); }\n.theme-pick .sw i:first-child, .theme-menu-item .sw i:first-child { margin-left: 0; }\n.theme-pick b { font-size: 13px; font-weight: 700; }\n.theme-pick .theme-name { cursor: text; }\n.theme-pick .name-input { font: inherit; font-size: 13px; font-weight: 700; color: var(--mj-text-primary); background: var(--mj-bg-surface); border: 1px solid var(--mj-brand-primary); border-radius: 6px; padding: 2px 7px; min-width: 120px; outline: none; }\n.rename-btn { border: 0; background: transparent; color: var(--mj-text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; line-height: 1; border-radius: 5px; }\n.rename-btn:hover { color: var(--mj-brand-primary); background: var(--mj-bg-surface-hover); }\n.pick-caret { border: 0; background: transparent; cursor: pointer; padding: 4px 5px; margin-left: 2px; border-radius: 6px; display: inline-flex; align-items: center; }\n.pick-caret:hover { background: var(--mj-bg-surface-hover); }\n.theme-pick .caret { font-size: 11px; color: var(--mj-text-muted); }\n.badge { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); padding: 2px 6px; border-radius: 20px; }\n.menu-backdrop { position: fixed; inset: 0; z-index: 19; }\n.theme-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 240px; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 10px; box-shadow: var(--mj-shadow-lg); padding: 6px; }\n.theme-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 9px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--mj-text-primary); font: inherit; }\n.theme-menu-item:hover { background: var(--mj-bg-surface-hover); }\n.theme-menu-item.on { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); }\n.theme-menu-item b { font-size: 13px; font-weight: 600; }\n.theme-menu-new { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 9px; margin-top: 4px; border: 0; border-top: 1px solid var(--mj-border-subtle); background: transparent; color: var(--mj-brand-primary); font: inherit; font-weight: 600; cursor: pointer; }\n.readonly-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mj-text-muted); margin-left: 8px; }\n.toolbar-spacer { flex: 1; }\n\n/* ---------- stage ---------- */\n.ts-stage { flex: 1; display: flex; min-height: 0; overflow: hidden; position: relative; background: var(--mj-bg-page); }\n.pv-wrap { flex: 1; min-width: 0; overflow: auto; padding: 22px 26px 60px; }\n.pv-inner { max-width: 1240px; margin: 0 auto; }\n\n/* ---------- slide panel (resizable \u2014 Q3) ---------- */\n.ts-panel { flex-shrink: 0; width: 392px; position: relative; background: var(--mj-bg-surface); border-left: 1px solid var(--mj-border-default); display: flex; flex-direction: column; min-height: 0; transition: width .25s cubic-bezier(.4,0,.2,1); overflow: hidden; }\n.ts-panel.resizing { transition: none; user-select: none; }\n.panel-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; touch-action: none; }\n.panel-resize:hover, .ts-panel.resizing .panel-resize { background: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent); }\n.ts-stage.collapsed .panel-resize { display: none; }\n.ts-stage.collapsed .ts-panel { width: 0; border-left: none; }\n.ts-stage.collapsed .panel-h, .ts-stage.collapsed .panel-body { opacity: 0; pointer-events: none; }\n.panel-h { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--mj-border-default); flex-shrink: 0; min-width: 392px; }\n.panel-h .ic { width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; flex-shrink: 0; }\n.panel-h h2 { margin: 0; font-size: 14.5px; font-weight: 700; }\n.panel-h small { color: var(--mj-text-muted); font-size: 11.5px; display: block; font-weight: 500; }\n.collapse-btn { margin-left: auto; width: 30px; height: 30px; border: 1px solid var(--mj-border-default); border-radius: 8px; background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); display: grid; place-items: center; cursor: pointer; }\n.collapse-btn:hover { color: var(--mj-text-primary); }\n.panel-body { flex: 1; overflow: auto; padding: 14px; min-width: 392px; }\n\n/* ---------- editor cards ---------- */\n.card { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 12px; padding: 14px 15px; margin-bottom: 12px; box-shadow: var(--mj-shadow-sm); }\n.card > h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }\n.card > h3 .ic { width: 21px; height: 21px; border-radius: 6px; background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; font-size: 11px; }\n.card > .sub { margin: 0 0 10px; font-size: 11.5px; color: var(--mj-text-muted); }\n.scope { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mj-text-muted); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); padding: 2px 6px; border-radius: 5px; margin-left: auto; }\n.reset-link { margin-left: auto; border: 0; background: transparent; color: var(--mj-text-link); font: inherit; font-size: 11.5px; cursor: pointer; }\n.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--mj-border-subtle); }\n.row:first-of-type { border-top: 0; }\n.lab { font-size: 12.5px; font-weight: 600; }\n.lab small { display: block; font-weight: 500; color: var(--mj-text-muted); font-size: 11px; margin-top: 1px; }\n.ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }\n.clr { display: inline-flex; align-items: center; gap: 7px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 4px 8px 4px 4px; }\n.clr input[type=color] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; }\n.clr.static .sw-box { width: 24px; height: 24px; border-radius: 6px; display: block; border: 1px solid rgba(0,0,0,.15); }\n.hex { font-family: var(--mj-font-family-mono); font-size: 11.5px; color: var(--mj-text-secondary); min-width: 58px; text-transform: uppercase; }\n.derived-note { font-size: 11px; color: var(--mj-text-muted); padding-top: 7px; display: flex; align-items: center; gap: 6px; }\n.derived-note i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }\n.derived-note code { font-family: var(--mj-font-family-mono); font-size: 10.5px; }\ninput[type=range] { appearance: none; -webkit-appearance: none; width: 104px; height: 4px; border-radius: 3px; background: var(--mj-border-strong); cursor: pointer; }\ninput[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--mj-brand-primary); border: 2px solid var(--mj-bg-surface); }\n.val { font-family: var(--mj-font-family-mono); font-size: 11.5px; color: var(--mj-text-secondary); min-width: 44px; text-align: right; }\nselect, .tinput { font: inherit; font-size: 12.5px; color: var(--mj-text-primary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 6px 9px; }\nselect { cursor: pointer; min-width: 120px; }\n.tinput { width: 170px; }\n.miniseg { display: inline-flex; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 2px; }\n.miniseg button { border: 0; background: transparent; color: var(--mj-text-secondary); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; }\n.miniseg button.on { background: var(--mj-bg-surface); color: var(--mj-text-primary); box-shadow: var(--mj-shadow-sm); }\n.ok { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--mj-status-success-text); background: var(--mj-status-success-bg); border: 1px solid var(--mj-status-success-border); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }\n.ok.warn { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); }\n.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }\n.preset { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid var(--mj-border-default); border-radius: 9px; background: var(--mj-bg-surface); padding: 8px 6px; cursor: pointer; width: 64px; }\n.preset:hover { border-color: var(--mj-brand-primary); background: var(--mj-bg-surface-hover); }\n.preset .sw { display: flex; }\n.preset .sw i { width: 10px; height: 18px; display: block; margin-left: -3px; border-radius: 3px; border: 1.5px solid var(--mj-bg-surface); }\n.preset .sw i:first-child { margin-left: 0; }\n.preset small { font-size: 9.5px; color: var(--mj-text-muted); text-align: center; line-height: 1.15; }\n.swrow { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }\n.chip-clr { position: relative; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; overflow: hidden; }\n.chip-clr input[type=color] { position: absolute; inset: -4px; width: 46px; height: 46px; border: 0; padding: 0; cursor: pointer; opacity: 0; }\n.chip-num { position: absolute; left: 4px; top: 2px; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.4); }\n\n/* ---------- preview canvas ---------- */\n.ts-canvas { border-radius: 16px; border: 1px solid var(--mj-border-default); overflow: hidden; box-shadow: var(--mj-shadow-lg); background: var(--mj-bg-page); font-family: var(--mj-font-family); font-size: var(--ts-fs, 14px); color: var(--mj-text-primary); }\n.ts-canvas.fullscreen { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; overflow: auto; }\n.pv-scroll { padding: var(--ts-space, 16px); display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.zone-lab { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mj-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }\n.zone-lab::before { content: \"\"; width: 5px; height: 5px; border-radius: 50%; background: var(--mj-brand-accent); }\n\n/* mini-Explorer style guide (chrome \u2014 fixed radii, brand colors follow theme) */\n.mx { background: var(--mj-bg-page); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); overflow: hidden; }\n.mx-shell { height: 44px; background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default); display: flex; align-items: center; gap: 11px; padding: 0 12px; font-size: .82em; }\n.mx-appico { color: var(--mj-brand-primary); }\n.mx-nav { display: flex; gap: 3px; }\n.mx-nav b { padding: 5px 11px; border-radius: var(--mj-radius-sm, 6px); color: var(--mj-text-secondary); font-weight: 500; cursor: pointer; transition: background .12s ease, color .12s ease; }\n.mx-nav b:hover:not(.on) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mx-nav b.on { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary); }\n.mx-search { flex: 0 1 190px; min-width: 100px; display: flex; align-items: center; gap: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-sm, 6px); padding: 4px 9px; color: var(--mj-text-muted); }\n.mx-sp { flex: 1; }\n.mx-av { width: 24px; height: 24px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-brand-on-primary); display: grid; place-items: center; font-size: .72em; font-weight: 700; }\n.mx-ph { background: var(--mj-bg-surface); border-bottom: 1px solid var(--mj-border-default); padding: 11px 14px 0; }\n.mx-ph-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }\n.mx-ph-ico { width: 30px; height: 30px; border-radius: var(--mj-radius-sm, 6px); background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); color: var(--mj-brand-primary); display: grid; place-items: center; flex-shrink: 0; }\n.mx-ph-title { font-size: .95em; font-weight: 700; }\n.mx-ph-sub { font-size: .72em; color: var(--mj-text-muted); }\n.mx-ph-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }\n.mx-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-top: 1px solid var(--mj-border-default); }\n.mx-tabs { display: flex; gap: 2px; }\n.mx-tabs i { font-style: normal; font-size: .78em; font-weight: 600; color: var(--mj-text-secondary); padding: 5px 10px 7px; border-bottom: 2px solid transparent; cursor: pointer; transition: color .12s ease, border-color .12s ease; }\n.mx-tabs i:hover:not(.on) { color: var(--mj-text-primary); border-bottom-color: var(--mj-border-strong); }\n.mx-tabs i.on { color: var(--mj-brand-primary); border-bottom-color: var(--mj-brand-primary); }\n.mx-body { padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }\n.mx-cell { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); padding: 10px 11px; min-width: 0; }\n.mx-cell.wide { grid-column: span 2; }\n@media (max-width: 760px) { .mx-cell.wide { grid-column: span 1; } }\n.mx-cap { font-family: var(--mj-font-family-mono); font-size: .62em; color: var(--mj-text-muted); letter-spacing: .04em; margin-bottom: 8px; display: block; }\n.mx-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }\n.mx-row + .mx-row { margin-top: 7px; }\n.mx-btn { font: inherit; font-size: .74em; font-weight: 600; padding: 5.5px 11px; border-radius: var(--mj-radius-sm, 6px); cursor: pointer; border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; }\n.mx-btn.pri { background: var(--mj-brand-primary); color: var(--mj-brand-on-primary); }\n.mx-btn.sec { background: var(--mj-bg-surface-sunken); color: var(--mj-text-primary); border-color: var(--mj-border-default); }\n.mx-btn.out { background: transparent; color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n.mx-btn.dgr { background: transparent; color: var(--mj-status-error); border-color: var(--mj-status-error); }\n\n/* Interactive states (Q1#6): driven by the derived -hover/-active tokens pushed onto\n   the canvas, so mousing/tabbing around the preview demonstrates the derived state\n   families live \u2014 including the per-mode hover inversion (light hovers darken, dark\n   hovers lighten). The .is-* classes force the same states for the static states row. */\n.mx-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }\n.mx-btn.pri:hover, .mx-btn.pri.is-hover { background: var(--mj-brand-primary-hover); }\n.mx-btn.pri:active, .mx-btn.pri.is-active { background: var(--mj-brand-primary-active); }\n.mx-btn.sec:hover, .mx-btn.sec.is-hover { background: var(--mj-bg-surface-hover); }\n.mx-btn.sec:active, .mx-btn.sec.is-active { background: var(--mj-bg-surface-active); }\n.mx-btn.out:hover, .mx-btn.out.is-hover { color: var(--mj-brand-primary-hover); border-color: var(--mj-brand-primary-hover); background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent); }\n.mx-btn.out:active, .mx-btn.out.is-active { color: var(--mj-brand-primary-active); border-color: var(--mj-brand-primary-active); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); }\n.mx-btn.dgr:hover, .mx-btn.dgr.is-hover { background: var(--mj-status-error-bg); }\n.mx-btn.dgr:active, .mx-btn.dgr.is-active { background: color-mix(in srgb, var(--mj-status-error) 18%, transparent); }\n.ts-canvas :focus-visible, .mx-btn.is-focus { outline: 2px solid var(--mj-border-focus); outline-offset: 2px; }\n.states-row { align-items: center; }\n.mx-input { display: flex; align-items: center; gap: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-sm, 6px); padding: 5px 9px; font-size: .74em; color: var(--mj-text-secondary); min-width: 0; }\n.mx-input.focus { border-color: var(--mj-brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent); }\n.mx-swch { width: 32px; height: 18px; border-radius: 20px; background: var(--mj-brand-primary); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s ease; }\n.mx-swch:hover { background: var(--mj-brand-primary-hover); }\n.mx-swch.off:hover { background: var(--mj-text-muted); }\n.mx-swch::after { content: \"\"; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--mj-brand-on-primary); }\n.mx-swch.off { background: var(--mj-border-strong); }\n.mx-swch.off::after { right: auto; left: 2px; }\n.mx-lbl { font-size: .72em; color: var(--mj-text-secondary); }\n.mx-chip { font-size: .7em; font-weight: 600; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); background: var(--mj-bg-surface); cursor: pointer; transition: background .12s ease, border-color .12s ease; }\n.mx-chip:hover:not(.on) { background: var(--mj-bg-surface-hover); border-color: var(--mj-border-strong); }\n.mx-chip.on { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent); color: var(--mj-brand-primary); }\n.mx-stat { font-size: .66em; font-weight: 700; letter-spacing: .03em; padding: 3px 9px; border-radius: 14px; }\n.mx-stat.brand { background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); color: var(--mj-brand-primary); }\n.mx-stat.neu { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); border: 1px solid var(--mj-border-default); }\n.mx-stat.suc { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n.mx-stat.wrn { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n.mx-prog { height: 7px; border-radius: 6px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); overflow: hidden; flex: 1; }\n.mx-prog i { display: block; height: 100%; width: 64%; background: var(--mj-brand-primary); }\n.mx-lnav { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }\n.mx-lnav b { display: flex; align-items: center; gap: 7px; font-size: .74em; font-weight: 500; color: var(--mj-text-secondary); padding: 6px 9px; border-radius: var(--mj-radius-sm, 6px); cursor: pointer; transition: background .12s ease, color .12s ease; }\n.mx-lnav b:hover:not(.on) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.mx-lnav b.on { background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface)); color: var(--mj-brand-primary); font-weight: 600; }\n.mx-lnav b.mx-acc-item { padding-left: 28px; font-weight: 400; }\n.mx-alert { display: flex; align-items: center; gap: 8px; font-size: .72em; font-weight: 600; border-radius: var(--mj-radius-sm, 6px); padding: 8px 10px; border: 1px solid var(--mj-status-info-border); background: var(--mj-status-info-bg); color: var(--mj-status-info-text); }\n.mx-alert i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n.mx-dlg { border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); overflow: hidden; }\n.mx-dlg-t { padding: 8px 11px; background: var(--mj-bg-surface-sunken); font-size: .76em; font-weight: 700; color: var(--mj-text-primary); }\n.mx-dlg-b { padding: 10px 11px; }\n.mx-dlg-a { display: flex; gap: 7px; padding: 9px 11px; border-top: 1px solid var(--mj-border-default); }\n\n/* Skip / agent report (generated content \u2014 follows --mj-radius-*) */\n.pv-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--ts-space, 16px); align-items: start; }\n@media (max-width: 1180px) { .pv-grid { grid-template-columns: 1fr; } }\n.report { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); overflow: hidden; box-shadow: var(--mj-shadow-brand-md); }\n.rhead { background: linear-gradient(105deg, var(--mj-brand-primary), color-mix(in srgb, var(--mj-brand-primary) 62%, black)); color: var(--mj-brand-on-primary); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }\n.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--mj-brand-on-primary); flex-shrink: 0; background-image: var(--mj-logo-mark); background-repeat: no-repeat; background-position: center; background-size: 70%; }\n.rhead .ti { font-size: 1.15em; font-weight: 700; line-height: 1.1; }\n.rhead .su { font-size: .82em; opacity: .85; margin-top: 1px; }\n.rhead .rt { margin-left: auto; font-size: .72em; font-weight: 600; opacity: .9; text-align: right; }\n.rbody { padding: var(--ts-space, 16px); display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }\n.kpi { background: var(--mj-bg-surface-card); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); padding: 11px; border-top: 3px solid var(--mj-brand-accent); }\n.kpi .n { font-size: 1.7em; font-weight: 750; line-height: 1; }\n.kpi .l { font-size: .76em; color: var(--mj-text-muted); margin-top: 4px; }\n.kpi .d { font-size: .72em; font-weight: 700; margin-top: 5px; display: inline-flex; gap: 3px; }\n.kpi .d.up { color: var(--mj-status-success); } .kpi .d.dn { color: var(--mj-status-error); }\n.chart .ct { font-size: .86em; font-weight: 700; margin-bottom: 2px; }\n.chart .cs { font-size: .74em; color: var(--mj-text-muted); margin-bottom: 12px; }\n.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; border-bottom: 1.5px solid var(--mj-border-default); }\n.bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }\n.bar .fill { width: 100%; border-radius: 5px 5px 0 0; min-height: 4px; }\n.bar .bv { font-size: .72em; font-weight: 700; color: var(--mj-text-secondary); }\n.cats { display: flex; gap: 10px; margin-top: 7px; }\n.cats span { flex: 1; text-align: center; font-size: .68em; color: var(--mj-text-muted); font-weight: 500; }\ntable.grid { width: 100%; border-collapse: collapse; font-size: .8em; }\ntable.grid th { text-align: left; font-size: .92em; text-transform: uppercase; letter-spacing: .04em; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); padding: 7px 10px; font-weight: 700; border-bottom: 1px solid var(--mj-border-default); }\ntable.grid th.r, table.grid td.r { text-align: right; }\ntable.grid td { padding: 7px 10px; border-bottom: 1px solid var(--mj-border-default); color: var(--mj-text-secondary); }\ntable.grid tr:nth-child(even) td { background: var(--mj-bg-surface-card); }\ntable.grid td b { color: var(--mj-text-primary); font-weight: 600; }\n.rfoot { padding: 11px 16px; border-top: 1px solid var(--mj-border-default); background: var(--mj-bg-surface-card); font-size: .72em; color: var(--mj-text-muted); display: flex; align-items: center; gap: 8px; }\n.rfoot .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mj-text-muted); }\n.side-stack { display: flex; flex-direction: column; gap: var(--ts-space, 16px); }\n.mini { background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-lg, 12px); padding: 13px; box-shadow: var(--mj-shadow-brand-sm); }\n.mini .mt { font-size: .82em; font-weight: 700; margin-bottom: 2px; }\n.mini .ms { font-size: .72em; color: var(--mj-text-muted); margin-bottom: 10px; }\n.alertrow { display: flex; flex-direction: column; gap: 7px; }\n.alert { display: flex; align-items: center; gap: 8px; font-size: .76em; font-weight: 600; border-radius: var(--mj-radius-sm, 6px); padding: 7px 10px; border: 1px solid; }\n.alert.suc { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); border-color: var(--mj-status-success-border); }\n.alert.wrn { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border-color: var(--mj-status-warning-border); }\n.alert.err { color: var(--mj-status-error-text); background: var(--mj-status-error-bg); border-color: var(--mj-status-error-border); }\n.alert i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n.ramp { display: flex; border-radius: var(--mj-radius-sm, 6px); overflow: hidden; height: 34px; border: 1px solid var(--mj-border-default); }\n.ramp i { flex: 1; }\n.ramp i:nth-child(1) { background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface)); }\n.ramp i:nth-child(2) { background: color-mix(in srgb, var(--mj-brand-primary) 22%, var(--mj-bg-surface)); }\n.ramp i:nth-child(3) { background: color-mix(in srgb, var(--mj-brand-primary) 38%, var(--mj-bg-surface)); }\n.ramp i:nth-child(4) { background: color-mix(in srgb, var(--mj-brand-primary) 55%, var(--mj-bg-surface)); }\n.ramp i:nth-child(5) { background: color-mix(in srgb, var(--mj-brand-primary) 72%, var(--mj-bg-surface)); }\n.ramp i:nth-child(6) { background: color-mix(in srgb, var(--mj-brand-primary) 88%, var(--mj-bg-surface)); }\n.ramp i:nth-child(7) { background: var(--mj-brand-primary); }\n.ag-sum { font-size: .85em; color: var(--mj-text-secondary); line-height: 1.6; margin: 0 0 12px; }\n.ag-sum b { color: var(--mj-text-primary); }\n.ag-finds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }\n.ag-find { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--mj-border-default); border-radius: var(--mj-radius-md, 8px); background: var(--mj-bg-surface-card); font-size: .8em; }\n.ag-find .fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--mj-brand-primary); flex-shrink: 0; }\n.ag-find .mx-stat { margin-left: auto; flex-shrink: 0; }\n\n/* ---------- fullscreen bar ---------- */\n.fs-bar { position: fixed; top: 14px; right: 16px; z-index: 41; display: flex; align-items: center; gap: 8px; }\n.fs-bar mj-view-toggle, .fs-bar button { box-shadow: var(--mj-shadow-lg); }\n.kbd { font-family: var(--mj-font-family-mono); font-size: 10.5px; border: 1px solid var(--mj-border-strong); border-radius: 5px; padding: 1px 5px; color: var(--mj-text-muted); margin-left: 6px; }\n\n/* ---------- advanced section ---------- */\n.adv-head { cursor: pointer; user-select: none; }\n.adv-head .caret { margin-left: auto; font-size: 12px; color: var(--mj-text-muted); }\n.adv-card .sub { margin: 0 0 10px; font-size: 11.5px; color: var(--mj-text-muted); }\n.adv-card .sub code { font-family: var(--mj-font-family-mono); font-size: 11px; background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-subtle); border-radius: 4px; padding: 0 4px; }\n.adv-sec { padding: 10px 0; border-top: 1px solid var(--mj-border-subtle); }\n.adv-sec:first-of-type { border-top: 0; }\n.adv-lab { font-size: 12px; font-weight: 700; color: var(--mj-text-primary); margin-bottom: 4px; }\n.adv-note { margin-top: 6px !important; font-style: italic; }\n.ovr-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }\n.ovr-key { flex: 3 1 0; width: auto; min-width: 0; }\n.ovr-val { flex: 2 1 0; width: auto; min-width: 0; }\n.ovr-del { flex: 0 0 auto; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-muted); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; display: grid; place-items: center; }\n.ovr-del:hover { color: var(--mj-status-error); border-color: color-mix(in srgb, var(--mj-status-error) 45%, transparent); }\n.adv-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--mj-border-strong); background: transparent; color: var(--mj-text-link); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; }\n.adv-add:hover { background: var(--mj-bg-surface-hover); }\n.adv-css-wrap { position: relative; }\n.adv-css { display: block; width: 100%; box-sizing: border-box; font-family: var(--mj-font-family-mono); font-size: 12px; line-height: 1.5; color: var(--mj-text-primary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 9px 10px; resize: vertical; }\n.adv-css:focus { outline: none; border-color: var(--mj-brand-primary); }\n.css-ac { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 210px; overflow: auto; background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 8px; box-shadow: var(--mj-shadow-lg); }\n.css-ac li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-family: var(--mj-font-family-mono); font-size: 12px; color: var(--mj-text-primary); cursor: pointer; }\n.css-ac li i { font-size: 10px; color: var(--mj-text-muted); width: 12px; text-align: center; }\n.css-ac li:hover { background: var(--mj-bg-surface-hover); }\n.css-ac li.on { background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface)); }\n.gen-css { position: relative; margin-top: 8px; }\n.gen-css pre { max-height: 260px; overflow: auto; margin: 0; font-family: var(--mj-font-family-mono); font-size: 11px; line-height: 1.5; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 10px; white-space: pre; }\n.gen-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--mj-border-default); background: var(--mj-bg-surface); color: var(--mj-text-secondary); font: inherit; font-size: 11px; padding: 4px 8px; border-radius: 6px; cursor: pointer; }\n.gen-copy:hover { background: var(--mj-bg-surface-hover); }\n\n/* ---------- header notes ---------- */\n.preview-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); padding: 2px 8px; border-radius: 20px; margin-left: 8px; }\n\n/* ---------- contrast headline (worst-of-both) ---------- */\n.ok .mode-tag { font-style: normal; font-weight: 600; opacity: .75; text-transform: uppercase; font-size: 9px; letter-spacing: .05em; }\n.contrast-detail { padding-top: 4px; }\n\n/* ---------- new-theme preset gallery ---------- */\n.gal-backdrop { position: absolute; inset: 0; z-index: 24; background: var(--mj-bg-overlay, color-mix(in srgb, var(--mj-text-primary) 35%, transparent)); }\n.gal { position: absolute; z-index: 25; left: 50%; top: 48px; transform: translateX(-50%); width: min(640px, calc(100% - 48px)); background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default); border-radius: 14px; box-shadow: var(--mj-shadow-lg); padding: 20px 22px 16px; }\n.gal h2 { margin: 0 0 4px; font-size: 17px; font-weight: 750; }\n.gal .gal-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--mj-text-muted); }\n.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }\n.gal-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--mj-border-default); border-radius: 11px; background: var(--mj-bg-surface); padding: 10px; cursor: pointer; text-align: left; font: inherit; transition: border-color .12s ease, box-shadow .12s ease; }\n.gal-card:hover { border-color: var(--mj-brand-primary); box-shadow: var(--mj-shadow-sm); }\n.gal-card b { font-size: 12.5px; font-weight: 650; color: var(--mj-text-primary); }\n.gal-mock { display: block; overflow: hidden; border: 1px solid var(--mj-border-subtle); background: var(--mj-bg-surface-card); }\n.gal-mock-bar { display: block; height: 18px; }\n.gal-mock-body { display: flex; flex-direction: column; gap: 5px; padding: 8px; }\n.gal-line { display: block; height: 5px; border-radius: 3px; background: var(--mj-border-default); width: 80%; }\n.gal-line.short { width: 55%; }\n.gal-mock-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }\n.gal-dot { width: 11px; height: 11px; border-radius: 50%; display: block; }\n.gal-btn { display: block; width: 34px; height: 12px; margin-left: auto; }\n.gal-foot { display: flex; justify-content: flex-start; margin-top: 12px; }\n\n/* ---------- escalation ladder (Q3#9) ---------- */\n.ladder { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 4px 0 8px; }\n.ladder > i { font-size: 10px; color: var(--mj-text-muted); }\n.ladder-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 20px; padding: 3px 10px 3px 4px; }\n.ladder-step b { width: 17px; height: 17px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-text-inverse); display: grid; place-items: center; font-size: 10px; font-weight: 700; }\n.ladder-step.esc { border-style: dashed; color: var(--mj-status-warning-text); }\n.ladder-step.esc b { background: var(--mj-status-warning); }\n.step-num { width: 17px; height: 17px; border-radius: 50%; background: var(--mj-brand-primary); color: var(--mj-text-inverse); display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; margin-right: 7px; }\n.step-num.esc { background: var(--mj-status-warning); }\n.esc-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); padding: 1px 7px; border-radius: 12px; margin-left: 8px; }\n.adv-summary { margin: 6px 0 0; font-size: 12px; color: var(--mj-text-secondary); display: flex; align-items: center; gap: 8px; }\n.adv-summary .adv-edit { margin-left: 0; }\n\n/* ---------- visual token browser (Q2#1) ---------- */\n.tok-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }\n.tok-groups { display: flex; flex-direction: column; gap: 4px; }\n.tok-group { border: 1px solid var(--mj-border-subtle); border-radius: 9px; overflow: hidden; }\n.tok-group-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--mj-bg-surface-card); color: var(--mj-text-primary); font: inherit; font-size: 12px; font-weight: 650; padding: 7px 10px; cursor: pointer; }\n.tok-group-h:hover { background: var(--mj-bg-surface-hover); }\n.tok-group-h > i { font-size: 10px; color: var(--mj-text-muted); width: 11px; }\n.tok-count { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--mj-text-muted); }\n.tok-mod-count { font-size: 9.5px; font-weight: 700; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent); padding: 1px 7px; border-radius: 12px; }\n.tok-row { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-top: 1px solid var(--mj-border-subtle); }\n.tok-row:hover { background: var(--mj-bg-surface-card); }\n.tok-row.mod { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.tok-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--mj-border-default); flex-shrink: 0; }\n.tok-name { font-family: var(--mj-font-family-mono); font-size: 10.5px; color: var(--mj-text-primary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tok-badge { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent); padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }\n.tok-clr { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0; }\n.tok-clr input[type=color] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 0; border-radius: 5px; background: none; cursor: pointer; padding: 0; }\n.tok-val, .tok-val-btn { font-family: var(--mj-font-family-mono); font-size: 10px; color: var(--mj-text-secondary); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tok-val-btn { border: 1px dashed transparent; background: transparent; padding: 2px 5px; border-radius: 5px; cursor: pointer; flex-shrink: 0; }\n.tok-val-btn:hover { border-color: var(--mj-border-strong); color: var(--mj-text-primary); }\n.tok-edit { flex: 1 1 auto; min-width: 90px; width: auto; font-family: var(--mj-font-family-mono); font-size: 10.5px; padding: 3px 7px; }\n.tok-reset { flex: 0 0 auto; border: 0; background: transparent; color: var(--mj-text-muted); cursor: pointer; padding: 2px 4px; border-radius: 5px; font-size: 10.5px; }\n.tok-reset:hover { color: var(--mj-status-error); background: var(--mj-bg-surface-hover); }\n\n/* ---------- custom-CSS escape hatch (Q3#4/#5/#6) ---------- */\n.sel-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }\n.sel-chip { font-family: var(--mj-font-family-mono); font-size: 10.5px; font-weight: 600; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 14px; padding: 3px 9px; cursor: pointer; transition: color .12s ease, border-color .12s ease; }\n.sel-chip:hover { color: var(--mj-brand-primary); border-color: var(--mj-brand-primary); }\n.css-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }\n.tok-pick { font: inherit; font-size: 11.5px; color: var(--mj-text-secondary); background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 8px; padding: 5px 8px; cursor: pointer; max-width: 100%; }\n.adv-css-editor { height: clamp(220px, 34vh, 460px); border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }\n/* CodeMirror renders outside this component's encapsulation scope (ng-code-editor is\n   encapsulation-None), so ::ng-deep is required to size the editor to its shell. */\n.adv-css-editor ::ng-deep .cm-editor { height: 100%; }\n.adv-css-editor ::ng-deep mj-code-editor { display: block; height: 100%; }\n.css-warn { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 0; font-size: 11.5px; color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); border: 1px solid var(--mj-status-warning-border); border-radius: 8px; padding: 6px 9px; }\n.css-warn i { margin-top: 1px; flex-shrink: 0; }\n.gen-css-editor { height: 260px; margin-top: 8px; border: 1px solid var(--mj-border-default); border-radius: 8px; overflow: hidden; }\n.gen-css-editor ::ng-deep .cm-editor { height: 100%; }\n.gen-css-editor ::ng-deep mj-code-editor { display: block; height: 100%; }\n\n@media (max-width: 900px) {\n  .ts-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; box-shadow: var(--mj-shadow-lg); }\n  .kpis { grid-template-columns: 1fr 1fr; }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.ThemeService }], { previewCanvas: [{
+            type: ViewChild,
+            args: ['previewCanvas']
+        }], nameInput: [{
+            type: ViewChild,
+            args: ['nameInput']
+        }], stageEl: [{
+            type: ViewChild,
+            args: ['stage']
+        }], cssCm: [{
+            type: ViewChild,
+            args: ['cssCm']
+        }], galDialog: [{
+            type: ViewChild,
+            args: ['galDialog']
+        }], onWindowResize: [{
+            type: HostListener,
+            args: ['window:resize']
+        }], onFullscreenChange: [{
+            type: HostListener,
+            args: ['document:fullscreenchange']
+        }], onEscape: [{
+            type: HostListener,
+            args: ['document:keydown.escape']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ThemeStudioDashboardComponent, { className: "ThemeStudioDashboardComponent", filePath: "src/ThemeStudio/theme-studio-dashboard.component.ts", lineNumber: 113 }); })();
+//# sourceMappingURL=theme-studio-dashboard.component.js.map