npm - @memberjunction/ng-dashboards - Versions diffs - 6.2.0-edge.6 → 6.2.0-edge.7 - Mend

@memberjunction/ng-dashboards 6.2.0-edge.6 → 6.2.0-edge.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (212) hide show

package/dist/DevTools/graphql-console.component.js CHANGED Viewed

@@ -1406,7 +1406,7 @@ mutation Delete${typeName}($input: Delete${typeName}Input!) {
             i0.ɵɵconditional(ctx.ResponseJson ? 42 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵconditional(ctx.ErrorMessage && !ctx.ResponseJson ? 47 : ctx.ResponseJson ? 48 : 49);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i2.MJEmptyStateComponent, i3.CodeEditorComponent, i4.DatePipe], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n.gc-endpoint[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n.gc-endpoint-meta[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.gc-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n\n.gc-sidebar[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    min-width: 200px;\n    max-width: 560px;\n}\n\n\n.gc-splitter[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-border-subtle);\n    transition: background 0.15s;\n    position: relative;\n}\n.gc-splitter[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary); }\n.gc-splitter[_ngcontent-%COMP%]:active { background: color-mix(in srgb, var(--mj-brand-primary) 80%, black); }\n.gc-splitter--vert[_ngcontent-%COMP%] {\n    width: 4px;\n    cursor: col-resize;\n}\n.gc-splitter--horiz[_ngcontent-%COMP%] {\n    height: 4px;\n    cursor: row-resize;\n}\n\n.gc-splitter[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    inset: -3px;\n}\n.gc-sidebar-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-sidebar-tab[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 10px 8px;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    border-bottom: 2px solid transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.gc-sidebar-tab[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n.gc-sidebar-tab--active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n}\n\n\n.gc-history[_ngcontent-%COMP%] {\n    width: 280px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n}\n.gc-history-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n}\n.gc-history-clear[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.gc-history-clear[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.gc-history-empty[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 20px 16px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    text-align: center;\n    line-height: 1.5;\n}\n.gc-history-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { display: block; font-size: 22px; margin-bottom: 8px; opacity: 0.5; }\n\n.gc-history-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n}\n.gc-history-item[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    padding: 8px 10px;\n    border-radius: 7px;\n    cursor: pointer;\n    margin-bottom: 2px;\n    font-family: inherit;\n    transition: background 0.12s, border-color 0.12s;\n}\n.gc-history-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-subtle);\n}\n.gc-history-item--fav[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.gc-history-item-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-history-status[_ngcontent-%COMP%] {\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-status--ok[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.gc-status--err[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.gc-history-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-history-fav[_ngcontent-%COMP%], \n.gc-history-del[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.gc-history-item[_ngcontent-%COMP%]:hover   .gc-history-fav[_ngcontent-%COMP%], \n.gc-history-item[_ngcontent-%COMP%]:hover   .gc-history-del[_ngcontent-%COMP%] { opacity: 1; }\n.gc-history-item--fav[_ngcontent-%COMP%]   .gc-history-fav[_ngcontent-%COMP%] { opacity: 1; color: var(--mj-status-warning); }\n.gc-history-fav[_ngcontent-%COMP%]:hover { color: var(--mj-status-warning); background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); }\n.gc-history-del[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); }\n\n.gc-history-meta[_ngcontent-%COMP%] {\n    margin-top: 3px;\n    margin-left: 18px;\n    display: flex;\n    gap: 4px;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n}\n\n\n.gc-ent-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-ent-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n}\n.gc-ent-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-ent-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-ent-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-ent-schema[_ngcontent-%COMP%] {\n    padding: 5px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 11.5px;\n    font-family: inherit;\n    cursor: pointer;\n    max-width: 130px;\n}\n\n.gc-ent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-ent-hint[_ngcontent-%COMP%] { font-style: italic; }\n\n.gc-ent-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-ent-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    margin-bottom: 4px;\n    overflow: hidden;\n    transition: border-color 0.12s, box-shadow 0.15s;\n}\n.gc-ent-card[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-default); }\n.gc-ent-card--expanded[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.gc-ent-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    font-family: inherit;\n}\n.gc-ent-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.gc-ent-card--expanded[_ngcontent-%COMP%]   .gc-ent-row[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.gc-ent-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n}\n.gc-ent-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.gc-ent-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.gc-ent-name[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-meta-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    margin-top: 2px;\n    align-items: center;\n}\n.gc-ent-typename[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-schema-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.4px;\n}\n\n.gc-ent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 6px 10px 8px 30px;\n    border-top: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n}\n.gc-ent-op[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 5px 9px;\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-ent-op[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n.gc-ent-op--read[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.gc-ent-op--write[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 50%, var(--mj-border-strong));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-ent-op--danger[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-status-error);\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n.gc-ent-desc[_ngcontent-%COMP%] {\n    padding: 4px 10px 8px 30px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n}\n\n.gc-ent-empty[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 30px 18px;\n    color: var(--mj-text-muted);\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n.gc-ent-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 18px; opacity: 0.5; }\n.gc-ent-clear[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 11.5px;\n    cursor: pointer;\n    font-family: inherit;\n    margin-top: 4px;\n}\n.gc-ent-clear[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.gc-schema-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-schema-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n}\n.gc-schema-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-schema-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-schema-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-schema-reload[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-schema-reload[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.gc-schema-kinds[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-schema-kind[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 5px 6px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    transition: all 0.12s;\n}\n.gc-schema-kind[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.gc-schema-kind[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    padding: 0 6px;\n    border-radius: 100px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n.gc-schema-kind--active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: white;\n}\n.gc-schema-kind--active[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.25);\n    border-color: transparent;\n    color: white;\n}\n\n.gc-schema-state[_ngcontent-%COMP%] {\n    padding: 28px 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    line-height: 1.5;\n}\n.gc-schema-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 22px; opacity: 0.5; }\n\n.gc-schema-disabled[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n.gc-schema-disabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    opacity: 0.85;\n    font-size: 24px;\n    margin-bottom: 4px;\n}\n.gc-schema-disabled-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.gc-schema-disabled-body[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    max-width: 240px;\n}\n\n.gc-schema-state--err[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    align-items: stretch;\n    text-align: left;\n}\n.gc-schema-state--err[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-status-error); opacity: 0.9; align-self: center; }\n.gc-schema-err-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    text-align: center;\n    color: var(--mj-status-error);\n}\n.gc-schema-err-body[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 8px 10px;\n    border-radius: 6px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    word-break: break-word;\n    max-height: 160px;\n    overflow-y: auto;\n}\n\n.gc-schema-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-schema-op[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: left;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    padding: 8px 10px;\n    margin-bottom: 4px;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-schema-op[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n.gc-schema-op-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    margin-bottom: 3px;\n}\n.gc-schema-op-kind[_ngcontent-%COMP%] {\n    font-size: 9.5px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.gc-schema-op--mutation[_ngcontent-%COMP%]   .gc-schema-op-kind[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-schema-op-name[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    word-break: break-all;\n}\n.gc-schema-op-args[_ngcontent-%COMP%], \n.gc-schema-op-return[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n    word-break: break-word;\n}\n.gc-schema-op-return[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n.gc-schema-op-return[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; margin-right: 3px; opacity: 0.6; }\n.gc-schema-op-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 5px;\n    line-height: 1.4;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n}\n\n\n.gc-main[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.gc-editor-wrap[_ngcontent-%COMP%], \n.gc-vars-wrap[_ngcontent-%COMP%], \n.gc-response-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n}\n.gc-editor-wrap[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex: 1;\n    min-height: 200px;\n}\n.gc-response-wrap[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 200px;\n    background: var(--mj-bg-page);\n}\n\n.gc-editor-head[_ngcontent-%COMP%], \n.gc-response-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.gc-editor-label[_ngcontent-%COMP%] { flex: 0 0 auto; }\n.gc-editor-hint[_ngcontent-%COMP%] {\n    font-weight: 500;\n    text-transform: none;\n    letter-spacing: normal;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n}\n.gc-mini-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 4px 10px;\n    border-radius: 5px;\n    font-size: 11px;\n    cursor: pointer;\n    font-family: inherit;\n    text-transform: none;\n    letter-spacing: normal;\n    font-weight: 500;\n}\n.gc-mini-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n}\n.gc-mini-btn--danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n\n\n\nmj-code-editor.gc-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    display: block;\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\nmj-code-editor.gc-editor[_ngcontent-%COMP%]     .cm-editor {\n    height: 100%;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n}\nmj-code-editor.gc-editor[_ngcontent-%COMP%]     .cm-scroller {\n    line-height: 1.55;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\nmj-code-editor.gc-editor--vars[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    flex: 0 0 auto;\n    min-height: 80px;\n    max-height: 160px;\n}\nmj-code-editor.gc-editor--vars[_ngcontent-%COMP%]     .cm-editor {\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.gc-vars-wrap[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-vars-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    border: none;\n    padding: 7px 16px;\n    cursor: pointer;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-family: inherit;\n    text-align: left;\n    transition: background 0.12s;\n}\n.gc-vars-toggle[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.gc-vars-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    transition: transform 0.15s;\n}\n.gc-vars-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.gc-vars-pill[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    padding: 1px 8px;\n    border-radius: 100px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n\n.gc-run-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-run-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\n    border: 1px solid var(--mj-brand-primary);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    transition: background 0.15s, transform 0.1s;\n}\n.gc-run-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.gc-run-btn[_ngcontent-%COMP%]:active:not(:disabled) { transform: scale(0.98); }\n.gc-run-btn[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-muted);\n    box-shadow: none;\n    cursor: wait;\n}\n\n.gc-run-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n}\n.gc-status-badge--ok[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary));\n}\n.gc-status-badge--err[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n}\n.gc-meta-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\n.gc-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n\n.gc-response[_ngcontent-%COMP%] {\n    margin: 0;\n    flex: 1;\n    overflow: auto;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12px;\n    line-height: 1.55;\n}\n.gc-response[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { white-space: pre-wrap; word-break: break-word; }\n\n.gc-error[_ngcontent-%COMP%] {\n    margin: 12px 16px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-subtle));\n    border-radius: 8px;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n    font-size: 12.5px;\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n}\n.gc-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-top: 2px; flex-shrink: 0; }\n.gc-error--inline[_ngcontent-%COMP%] { margin-bottom: 0; }\n\n.gc-empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.gc-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; opacity: 0.4; }\n\n@media (max-width: 900px) {\n    .gc-sidebar[_ngcontent-%COMP%], .gc-history[_ngcontent-%COMP%] { display: none; }\n}"] });
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i2.MJEmptyStateComponent, i3.CodeEditorComponent, i4.DatePipe], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n.gc-endpoint[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n.gc-endpoint-meta[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.gc-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n\n.gc-sidebar[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    min-width: 200px;\n    max-width: 560px;\n}\n\n\n.gc-splitter[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    background: var(--mj-border-subtle);\n    transition: background 0.15s;\n    position: relative;\n}\n.gc-splitter[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary); }\n.gc-splitter[_ngcontent-%COMP%]:active { background: color-mix(in srgb, var(--mj-brand-primary) 80%, black); }\n.gc-splitter--vert[_ngcontent-%COMP%] {\n    width: 4px;\n    cursor: col-resize;\n}\n.gc-splitter--horiz[_ngcontent-%COMP%] {\n    height: 4px;\n    cursor: row-resize;\n}\n\n.gc-splitter[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    inset: -3px;\n}\n.gc-sidebar-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-sidebar-tab[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 10px 8px;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    border-bottom: 2px solid transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.gc-sidebar-tab[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n.gc-sidebar-tab--active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n}\n\n\n.gc-history[_ngcontent-%COMP%] {\n    width: 280px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n}\n.gc-history-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n}\n.gc-history-clear[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.gc-history-clear[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.gc-history-empty[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 20px 16px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    text-align: center;\n    line-height: 1.5;\n}\n.gc-history-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { display: block; font-size: 22px; margin-bottom: 8px; opacity: 0.5; }\n\n.gc-history-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n}\n.gc-history-item[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    padding: 8px 10px;\n    border-radius: 7px;\n    cursor: pointer;\n    margin-bottom: 2px;\n    font-family: inherit;\n    transition: background 0.12s, border-color 0.12s;\n}\n.gc-history-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-subtle);\n}\n.gc-history-item--fav[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.gc-history-item-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-history-status[_ngcontent-%COMP%] {\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-status--ok[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.gc-status--err[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.gc-history-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-history-fav[_ngcontent-%COMP%], \n.gc-history-del[_ngcontent-%COMP%] {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.gc-history-item[_ngcontent-%COMP%]:hover   .gc-history-fav[_ngcontent-%COMP%], \n.gc-history-item[_ngcontent-%COMP%]:hover   .gc-history-del[_ngcontent-%COMP%] { opacity: 1; }\n.gc-history-item--fav[_ngcontent-%COMP%]   .gc-history-fav[_ngcontent-%COMP%] { opacity: 1; color: var(--mj-status-warning); }\n.gc-history-fav[_ngcontent-%COMP%]:hover { color: var(--mj-status-warning); background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); }\n.gc-history-del[_ngcontent-%COMP%]:hover { color: var(--mj-status-error); background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); }\n\n.gc-history-meta[_ngcontent-%COMP%] {\n    margin-top: 3px;\n    margin-left: 18px;\n    display: flex;\n    gap: 4px;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n}\n\n\n.gc-ent-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-ent-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n}\n.gc-ent-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-ent-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-ent-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-ent-schema[_ngcontent-%COMP%] {\n    padding: 5px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 11.5px;\n    font-family: inherit;\n    cursor: pointer;\n    max-width: 130px;\n}\n\n.gc-ent-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-ent-hint[_ngcontent-%COMP%] { font-style: italic; }\n\n.gc-ent-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-ent-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    margin-bottom: 4px;\n    overflow: hidden;\n    transition: border-color 0.12s, box-shadow 0.15s;\n}\n.gc-ent-card[_ngcontent-%COMP%]:hover { border-color: var(--mj-border-default); }\n.gc-ent-card--expanded[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.gc-ent-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    font-family: inherit;\n}\n.gc-ent-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.gc-ent-card--expanded[_ngcontent-%COMP%]   .gc-ent-row[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.gc-ent-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n}\n.gc-ent-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.gc-ent-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n.gc-ent-name[_ngcontent-%COMP%] {\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-meta-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    margin-top: 2px;\n    align-items: center;\n}\n.gc-ent-typename[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-schema-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.4px;\n}\n\n.gc-ent-actions[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 6px 10px 8px 30px;\n    border-top: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n}\n.gc-ent-op[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 5px 9px;\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-ent-op[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n.gc-ent-op--read[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.gc-ent-op--write[_ngcontent-%COMP%]:hover {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 50%, var(--mj-border-strong));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-ent-op--danger[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-status-error);\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n.gc-ent-desc[_ngcontent-%COMP%] {\n    padding: 4px 10px 8px 30px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n}\n\n.gc-ent-empty[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 30px 18px;\n    color: var(--mj-text-muted);\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n.gc-ent-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 18px; opacity: 0.5; }\n.gc-ent-clear[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 11.5px;\n    cursor: pointer;\n    font-family: inherit;\n    margin-top: 4px;\n}\n.gc-ent-clear[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n\n.gc-schema-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-schema-search-wrap[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n}\n.gc-schema-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-schema-search[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-schema-search[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-schema-reload[_ngcontent-%COMP%] {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-schema-reload[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.gc-schema-kinds[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-schema-kind[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 5px 6px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    transition: all 0.12s;\n}\n.gc-schema-kind[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.gc-schema-kind[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    padding: 0 6px;\n    border-radius: 100px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n.gc-schema-kind--active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n.gc-schema-kind--active[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    background: rgba(255, 255, 255, 0.25);\n    border-color: transparent;\n    color: var(--mj-brand-on-primary);\n}\n\n.gc-schema-state[_ngcontent-%COMP%] {\n    padding: 28px 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    line-height: 1.5;\n}\n.gc-schema-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 22px; opacity: 0.5; }\n\n.gc-schema-disabled[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n}\n.gc-schema-disabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    opacity: 0.85;\n    font-size: 24px;\n    margin-bottom: 4px;\n}\n.gc-schema-disabled-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.gc-schema-disabled-body[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    max-width: 240px;\n}\n\n.gc-schema-state--err[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    align-items: stretch;\n    text-align: left;\n}\n.gc-schema-state--err[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-status-error); opacity: 0.9; align-self: center; }\n.gc-schema-err-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 600;\n    text-align: center;\n    color: var(--mj-status-error);\n}\n.gc-schema-err-body[_ngcontent-%COMP%] {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 8px 10px;\n    border-radius: 6px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    word-break: break-word;\n    max-height: 160px;\n    overflow-y: auto;\n}\n\n.gc-schema-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-schema-op[_ngcontent-%COMP%] {\n    width: 100%;\n    text-align: left;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    padding: 8px 10px;\n    margin-bottom: 4px;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-schema-op[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n.gc-schema-op-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    margin-bottom: 3px;\n}\n.gc-schema-op-kind[_ngcontent-%COMP%] {\n    font-size: 9.5px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.gc-schema-op--mutation[_ngcontent-%COMP%]   .gc-schema-op-kind[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-schema-op-name[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    word-break: break-all;\n}\n.gc-schema-op-args[_ngcontent-%COMP%], \n.gc-schema-op-return[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n    word-break: break-word;\n}\n.gc-schema-op-return[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n.gc-schema-op-return[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; margin-right: 3px; opacity: 0.6; }\n.gc-schema-op-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 5px;\n    line-height: 1.4;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n}\n\n\n.gc-main[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.gc-editor-wrap[_ngcontent-%COMP%], \n.gc-vars-wrap[_ngcontent-%COMP%], \n.gc-response-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n}\n.gc-editor-wrap[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex: 1;\n    min-height: 200px;\n}\n.gc-response-wrap[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 200px;\n    background: var(--mj-bg-page);\n}\n\n.gc-editor-head[_ngcontent-%COMP%], \n.gc-response-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.gc-editor-label[_ngcontent-%COMP%] { flex: 0 0 auto; }\n.gc-editor-hint[_ngcontent-%COMP%] {\n    font-weight: 500;\n    text-transform: none;\n    letter-spacing: normal;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n}\n.gc-mini-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 4px 10px;\n    border-radius: 5px;\n    font-size: 11px;\n    cursor: pointer;\n    font-family: inherit;\n    text-transform: none;\n    letter-spacing: normal;\n    font-weight: 500;\n}\n.gc-mini-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n}\n.gc-mini-btn--danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n\n\n\nmj-code-editor.gc-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    display: block;\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\nmj-code-editor.gc-editor[_ngcontent-%COMP%]     .cm-editor {\n    height: 100%;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n}\nmj-code-editor.gc-editor[_ngcontent-%COMP%]     .cm-scroller {\n    line-height: 1.55;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\nmj-code-editor.gc-editor--vars[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    flex: 0 0 auto;\n    min-height: 80px;\n    max-height: 160px;\n}\nmj-code-editor.gc-editor--vars[_ngcontent-%COMP%]     .cm-editor {\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.gc-vars-wrap[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-vars-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    border: none;\n    padding: 7px 16px;\n    cursor: pointer;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-family: inherit;\n    text-align: left;\n    transition: background 0.12s;\n}\n.gc-vars-toggle[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.gc-vars-chev[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    transition: transform 0.15s;\n}\n.gc-vars-chev--down[_ngcontent-%COMP%] { transform: rotate(90deg); }\n.gc-vars-pill[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    padding: 1px 8px;\n    border-radius: 100px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n\n.gc-run-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-run-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: 1px solid var(--mj-brand-primary);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    transition: background 0.15s, transform 0.1s;\n}\n.gc-run-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.gc-run-btn[_ngcontent-%COMP%]:active:not(:disabled) { transform: scale(0.98); }\n.gc-run-btn[_ngcontent-%COMP%]:disabled {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-muted);\n    box-shadow: none;\n    cursor: wait;\n}\n\n.gc-run-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n}\n.gc-status-badge--ok[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary));\n}\n.gc-status-badge--err[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n}\n.gc-meta-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\n.gc-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n\n.gc-response[_ngcontent-%COMP%] {\n    margin: 0;\n    flex: 1;\n    overflow: auto;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12px;\n    line-height: 1.55;\n}\n.gc-response[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] { white-space: pre-wrap; word-break: break-word; }\n\n.gc-error[_ngcontent-%COMP%] {\n    margin: 12px 16px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-subtle));\n    border-radius: 8px;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n    font-size: 12.5px;\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n}\n.gc-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { margin-top: 2px; flex-shrink: 0; }\n.gc-error--inline[_ngcontent-%COMP%] { margin-bottom: 0; }\n\n.gc-empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.gc-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 24px; opacity: 0.4; }\n\n@media (max-width: 900px) {\n    .gc-sidebar[_ngcontent-%COMP%], .gc-history[_ngcontent-%COMP%] { display: none; }\n}"] });
 };
 GraphQLConsoleComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'GraphQLConsoleInspector')
@@ -1414,7 +1414,7 @@ GraphQLConsoleComponent = __decorate([
 export { GraphQLConsoleComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GraphQLConsoleComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-graphql-console', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"GraphQL console\"\n        Title=\"GraphQL Console\"\n        Subtitle=\"Run queries against the connected MJ API\">\n        <div meta>\n            @if (ApiUrl) {\n                <span class=\"gc-endpoint-meta\">\n                    <i class=\"fa-solid fa-plug\" aria-hidden=\"true\"></i>\n                    <code class=\"gc-endpoint\">{{ ApiUrl }}</code>\n                </span>\n            }\n        </div>\n        <div actions>\n            <button mjButton\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    [toggleable]=\"true\"\n                    [(selected)]=\"ShowHistory\"\n                    title=\"Toggle history sidebar\">\n                <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i> <span class=\"mj-action-label\">History</span>\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnCopyAsCurl()\" title=\"Copy as cURL command\">\n                <i class=\"fa-solid fa-terminal\" aria-hidden=\"true\"></i> <span class=\"mj-action-label\">Copy cURL</span>\n            </button>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"gc-body\">\n        @if (ShowHistory) {\n            <aside class=\"gc-sidebar\" [style.width.px]=\"SidebarWidthPx\">\n                <div class=\"gc-sidebar-tabs\">\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'history'\"\n                            (click)=\"OnSidebarTabChange('history')\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i> History\n                    </button>\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'entities'\"\n                            (click)=\"OnSidebarTabChange('entities')\">\n                        <i class=\"fa-solid fa-table-list\"></i> Entities\n                    </button>\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'schema'\"\n                            (click)=\"OnSidebarTabChange('schema')\">\n                        <i class=\"fa-solid fa-sitemap\"></i> Schema\n                    </button>\n                </div>\n\n                @if (SidebarTab === 'history') {\n                <div class=\"gc-history-head\">\n                    <span>{{ History.length }} {{ History.length === 1 ? 'entry' : 'entries' }}</span>\n                    <button class=\"gc-history-clear\"\n                            type=\"button\"\n                            (click)=\"OnClearHistory()\"\n                            title=\"Clear non-favorite history\">\n                        <i class=\"fa-solid fa-broom\"></i>\n                    </button>\n                </div>\n                @if (History.length === 0) {\n                    <mj-empty-state class=\"gc-history-empty\" Size=\"compact\" Icon=\"fa-regular fa-circle-question\"\n                        Title=\"Run a query to see it here\" Message=\"Star a query to keep it.\" />\n                } @else {\n                    <div class=\"gc-history-list\">\n                        @for (h of History; track TrackByHistory($index, h)) {\n                            <button type=\"button\"\n                                    class=\"gc-history-item\"\n                                    [class.gc-history-item--error]=\"h.status === 'error'\"\n                                    [class.gc-history-item--fav]=\"h.favorite\"\n                                    (click)=\"OnRestoreHistory(h)\">\n                                <div class=\"gc-history-item-head\">\n                                    <i class=\"gc-history-status\"\n                                       [class.fa-solid]=\"true\"\n                                       [class.fa-circle-check]=\"h.status === 'ok'\"\n                                       [class.fa-circle-xmark]=\"h.status === 'error'\"\n                                       [class.gc-status--ok]=\"h.status === 'ok'\"\n                                       [class.gc-status--err]=\"h.status === 'error'\"></i>\n                                    <span class=\"gc-history-label\">{{ h.label || 'unnamed' }}</span>\n                                    <button class=\"gc-history-fav\"\n                                            type=\"button\"\n                                            (click)=\"OnToggleFavorite(h, $event)\"\n                                            [title]=\"h.favorite ? 'Unfavorite' : 'Favorite'\">\n                                        <i [class]=\"h.favorite ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                                    </button>\n                                    <button class=\"gc-history-del\"\n                                            type=\"button\"\n                                            (click)=\"OnDeleteHistory(h, $event)\"\n                                            title=\"Remove from history\">\n                                        <i class=\"fa-solid fa-xmark\"></i>\n                                    </button>\n                                </div>\n                                <div class=\"gc-history-meta\">\n                                    <span>{{ h.timestamp | date:'HH:mm:ss' }}</span>\n                                    @if (h.durationMs != null) {\n                                        <span>\u00B7</span>\n                                        <span>{{ h.durationMs }}ms</span>\n                                    }\n                                </div>\n                            </button>\n                        }\n                    </div>\n                }\n                } @else if (SidebarTab === 'entities') {\n                    <div class=\"gc-ent-toolbar\">\n                        <div class=\"gc-ent-search-wrap\">\n                            <i class=\"fa-solid fa-search gc-ent-search-icon\"></i>\n                            <input type=\"search\"\n                                   class=\"gc-ent-search\"\n                                   placeholder=\"Search entities\u2026\"\n                                   [(ngModel)]=\"EntitiesSearch\" />\n                        </div>\n                        @if (KnownSchemas.length > 1) {\n                            <select class=\"gc-ent-schema\" [(ngModel)]=\"EntitySchemaFilter\">\n                                <option value=\"\">All schemas ({{ KnownSchemas.length }})</option>\n                                @for (s of KnownSchemas; track s) {\n                                    <option [value]=\"s\">{{ s }}</option>\n                                }\n                            </select>\n                        }\n                    </div>\n                    <div class=\"gc-ent-meta\">\n                        <span>{{ FilteredEntities.length }} of {{ Entities.length }}</span>\n                        <span class=\"gc-ent-hint\">Click an entity to see operations</span>\n                    </div>\n                    <div class=\"gc-ent-list\">\n                        @for (item of FilteredEntities; track TrackByEntity($index, item)) {\n                            <div class=\"gc-ent-card\" [class.gc-ent-card--expanded]=\"item.expanded\">\n                                <button type=\"button\"\n                                        class=\"gc-ent-row\"\n                                        (click)=\"ToggleEntity(item)\">\n                                    <i class=\"fa-solid fa-chevron-right gc-ent-chev\"\n                                       [class.gc-ent-chev--down]=\"item.expanded\"></i>\n                                    <div class=\"gc-ent-info\">\n                                        <div class=\"gc-ent-name\">{{ item.info.Name }}</div>\n                                        <div class=\"gc-ent-meta-row\">\n                                            <code class=\"gc-ent-typename\">{{ item.typeName }}</code>\n                                            <span class=\"gc-ent-schema-badge\">{{ item.schema }}</span>\n                                        </div>\n                                    </div>\n                                </button>\n                                @if (item.expanded) {\n                                    <div class=\"gc-ent-actions\">\n                                        <button type=\"button\" class=\"gc-ent-op gc-ent-op--read\"\n                                                (click)=\"OnEntityOp(item, 'view', $event)\"\n                                                title=\"Insert a Run View template (Shift-click to append)\">\n                                            <i class=\"fa-solid fa-magnifying-glass\"></i>\n                                            Run view\n                                        </button>\n                                        <button type=\"button\" class=\"gc-ent-op gc-ent-op--read\"\n                                                (click)=\"OnEntityOp(item, 'byId', $event)\"\n                                                title=\"Fetch a single record by ID (Shift-click to append)\">\n                                            <i class=\"fa-solid fa-fingerprint\"></i>\n                                            Get by ID\n                                        </button>\n                                        @if (item.info.AllowCreateAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--write\"\n                                                    (click)=\"OnEntityOp(item, 'create', $event)\"\n                                                    title=\"Create a new record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                Create\n                                            </button>\n                                        }\n                                        @if (item.info.AllowUpdateAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--write\"\n                                                    (click)=\"OnEntityOp(item, 'update', $event)\"\n                                                    title=\"Update an existing record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-pen\"></i>\n                                                Update\n                                            </button>\n                                        }\n                                        @if (item.info.AllowDeleteAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--danger\"\n                                                    (click)=\"OnEntityOp(item, 'delete', $event)\"\n                                                    title=\"Delete a record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-trash\"></i>\n                                                Delete\n                                            </button>\n                                        }\n                                    </div>\n                                    @if (item.info.Description) {\n                                        <div class=\"gc-ent-desc\">{{ item.info.Description }}</div>\n                                    }\n                                }\n                            </div>\n                        }\n                        @if (FilteredEntities.length === 0) {\n                            <mj-empty-state class=\"gc-ent-empty\" Variant=\"no-results\" Size=\"compact\"\n                                Icon=\"fa-solid fa-magnifying-glass\" Title=\"No entities match.\"\n                                [ActionText]=\"(EntitiesSearch || EntitySchemaFilter) ? 'Clear filters' : ''\"\n                                (Action)=\"ClearEntityFilters()\" />\n                        }\n                    </div>\n                } @else {\n                    <div class=\"gc-schema-toolbar\">\n                        <div class=\"gc-schema-search-wrap\">\n                            <i class=\"fa-solid fa-search gc-schema-search-icon\"></i>\n                            <input type=\"search\"\n                                   class=\"gc-schema-search\"\n                                   placeholder=\"Search operations\u2026\"\n                                   [(ngModel)]=\"SchemaSearch\" />\n                        </div>\n                        <button class=\"gc-schema-reload\"\n                                type=\"button\"\n                                (click)=\"OnReloadSchema()\"\n                                [disabled]=\"SchemaLoading\"\n                                title=\"Reload schema\">\n                            <i class=\"fa-solid\" [class.fa-rotate]=\"!SchemaLoading\" [class.fa-spinner]=\"SchemaLoading\" [class.fa-spin]=\"SchemaLoading\"></i>\n                        </button>\n                    </div>\n\n                    @if (Operations.length > 0) {\n                        <div class=\"gc-schema-kinds\">\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'all'\"\n                                    (click)=\"SchemaKindFilter = 'all'\">\n                                All <span>{{ OperationCounts.all }}</span>\n                            </button>\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind gc-schema-kind--query\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'query'\"\n                                    (click)=\"SchemaKindFilter = 'query'\">\n                                <i class=\"fa-solid fa-magnifying-glass\"></i> Query <span>{{ OperationCounts.query }}</span>\n                            </button>\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind gc-schema-kind--mutation\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'mutation'\"\n                                    (click)=\"SchemaKindFilter = 'mutation'\">\n                                <i class=\"fa-solid fa-pen\"></i> Mutation <span>{{ OperationCounts.mutation }}</span>\n                            </button>\n                        </div>\n                    }\n\n                    @if (SchemaLoading) {\n                        <div class=\"gc-schema-state\">\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                            <span>Introspecting schema\u2026</span>\n                        </div>\n                    } @else if (SchemaIntrospectionDisabled) {\n                        <div class=\"gc-schema-state gc-schema-disabled\">\n                            <i class=\"fa-solid fa-lock\"></i>\n                            <div class=\"gc-schema-disabled-title\">Introspection disabled</div>\n                            <div class=\"gc-schema-disabled-body\">\n                                This server has GraphQL introspection turned off (typical in production). Schema browsing isn't available \u2014 write queries directly in the editor, or use the History tab to revisit previous queries.\n                            </div>\n                        </div>\n                    } @else if (SchemaError) {\n                        <div class=\"gc-schema-state gc-schema-state--err\">\n                            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                            <div class=\"gc-schema-err-title\">Couldn't load schema</div>\n                            <div class=\"gc-schema-err-body\">{{ SchemaError }}</div>\n                        </div>\n                    } @else if (FilteredOperations.length === 0) {\n                        <div class=\"gc-schema-state\">\n                            <i class=\"fa-solid fa-search\"></i>\n                            <span>No operations match.</span>\n                        </div>\n                    } @else {\n                        <div class=\"gc-schema-list\">\n                            @for (op of FilteredOperations; track TrackByOp($index, op)) {\n                                <button type=\"button\"\n                                        class=\"gc-schema-op\"\n                                        [class.gc-schema-op--mutation]=\"op.kind === 'mutation'\"\n                                        (click)=\"OnInsertOperation(op, $event)\"\n                                        [title]=\"(op.description || ('Insert ' + op.kind + ' template')) + ' \u00B7 Shift-click to append'\">\n                                    <div class=\"gc-schema-op-head\">\n                                        <span class=\"gc-schema-op-kind\">{{ op.kind }}</span>\n                                        <span class=\"gc-schema-op-name\">{{ op.name }}</span>\n                                    </div>\n                                    @if (op.argSummary) {\n                                        <div class=\"gc-schema-op-args\">({{ op.argSummary }})</div>\n                                    }\n                                    <div class=\"gc-schema-op-return\">\n                                        <i class=\"fa-solid fa-arrow-right\"></i> {{ op.returnSummary }}\n                                    </div>\n                                    @if (op.description) {\n                                        <div class=\"gc-schema-op-desc\">{{ op.description }}</div>\n                                    }\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </aside>\n            <div class=\"gc-splitter gc-splitter--vert\"\n                 (mousedown)=\"OnSplitterDown($event, 'sidebar')\"\n                 title=\"Drag to resize sidebar\"></div>\n        }\n\n        <div class=\"gc-main\">\n            <div class=\"gc-editor-wrap\" [style.flex]=\"'0 0 ' + EditorHeightPct + '%'\">\n                <div class=\"gc-editor-head\">\n                    <span class=\"gc-editor-label\">Query</span>\n                    <span class=\"gc-editor-hint\">\u2318/Ctrl+Enter to run \u00B7 Shift+click an entity/op to append</span>\n                    <button class=\"gc-mini-btn\" type=\"button\" (click)=\"OnFormatQuery()\" title=\"Tidy whitespace\">\n                        <i class=\"fa-solid fa-broom\"></i> Tidy\n                    </button>\n                    <button class=\"gc-mini-btn gc-mini-btn--danger\" type=\"button\" (click)=\"OnClearQuery()\" title=\"Clear editor\">\n                        <i class=\"fa-solid fa-eraser\"></i> Clear\n                    </button>\n                </div>\n                <mj-code-editor\n                    class=\"gc-editor\"\n                    [(ngModel)]=\"Query\"\n                    [language]=\"'graphql'\"\n                    [lineWrapping]=\"true\"\n                    placeholder=\"Enter your GraphQL query\u2026\">\n                </mj-code-editor>\n            </div>\n\n            <div class=\"gc-splitter gc-splitter--horiz\"\n                 (mousedown)=\"OnSplitterDown($event, 'editor')\"\n                 title=\"Drag to resize editor / response\"></div>\n\n            <div class=\"gc-vars-wrap\">\n                <button class=\"gc-vars-toggle\" type=\"button\" (click)=\"ToggleVariables()\">\n                    <i class=\"fa-solid fa-chevron-right gc-vars-chev\" [class.gc-vars-chev--down]=\"ShowVariables\"></i>\n                    Variables\n                    @if (Variables && Variables.trim() !== '{}' && Variables.trim() !== '') {\n                        <span class=\"gc-vars-pill\">configured</span>\n                    }\n                </button>\n                @if (ShowVariables) {\n                    <mj-code-editor\n                        class=\"gc-editor gc-editor--vars\"\n                        [(ngModel)]=\"Variables\"\n                        [language]=\"'json'\"\n                        [lineWrapping]=\"true\"\n                        placeholder=\"{}\">\n                    </mj-code-editor>\n                }\n            </div>\n\n            <div class=\"gc-run-bar\">\n                <button class=\"gc-run-btn\"\n                        type=\"button\"\n                        [disabled]=\"Running\"\n                        (click)=\"OnRun()\">\n                    @if (Running) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Running\u2026\n                    } @else {\n                        <i class=\"fa-solid fa-play\"></i> Run\n                    }\n                </button>\n                @if (ResponseStatus !== 'idle') {\n                    <div class=\"gc-run-meta\">\n                        @if (ResponseStatus === 'ok') {\n                            <span class=\"gc-status-badge gc-status-badge--ok\">\n                                <i class=\"fa-solid fa-circle-check\"></i> 200 OK\n                            </span>\n                        } @else {\n                            <span class=\"gc-status-badge gc-status-badge--err\">\n                                <i class=\"fa-solid fa-triangle-exclamation\"></i> Error\n                            </span>\n                        }\n                        @if (ResponseDurationMs != null) {\n                            <span class=\"gc-meta-pill\"><i class=\"fa-regular fa-clock\"></i> {{ ResponseDurationMs }}ms</span>\n                        }\n                        @if (ResponseSizeBytes != null) {\n                            <span class=\"gc-meta-pill\"><i class=\"fa-solid fa-database\"></i> {{ FormattedSize }}</span>\n                        }\n                    </div>\n                }\n                <span class=\"gc-spacer\"></span>\n                @if (ResponseJson) {\n                    <button mjButton\n                            [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n                            size=\"sm\"\n                            (click)=\"OnCopyResponse()\">\n                        <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n                        {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n                    </button>\n                }\n            </div>\n\n            <div class=\"gc-response-wrap\">\n                <div class=\"gc-response-head\">\n                    <span class=\"gc-editor-label\">Response</span>\n                </div>\n                @if (ErrorMessage && !ResponseJson) {\n                    <div class=\"gc-error\">\n                        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                        <span>{{ ErrorMessage }}</span>\n                    </div>\n                } @else if (ResponseJson) {\n                    @if (ErrorMessage) {\n                        <div class=\"gc-error gc-error--inline\">\n                            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                            <span>{{ ErrorMessage }}</span>\n                        </div>\n                    }\n                    <pre class=\"gc-response\"><code>{{ ResponseJson }}</code></pre>\n                } @else {\n                    <mj-empty-state class=\"gc-empty\" Icon=\"fa-solid fa-arrow-up-from-bracket\"\n                        Title=\"Run a query to see results here.\" />\n                }\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n.gc-endpoint {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n.gc-endpoint-meta {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.gc-body {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n/* Sidebar (history + entities + schema) \u2014 width is bound from component */\n.gc-sidebar {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    min-width: 200px;\n    max-width: 560px;\n}\n\n/* Resizable splitters */\n.gc-splitter {\n    flex-shrink: 0;\n    background: var(--mj-border-subtle);\n    transition: background 0.15s;\n    position: relative;\n}\n.gc-splitter:hover { background: var(--mj-brand-primary); }\n.gc-splitter:active { background: color-mix(in srgb, var(--mj-brand-primary) 80%, black); }\n.gc-splitter--vert {\n    width: 4px;\n    cursor: col-resize;\n}\n.gc-splitter--horiz {\n    height: 4px;\n    cursor: row-resize;\n}\n/* Bigger invisible hit area so the splitter is easier to grab */\n.gc-splitter::before {\n    content: '';\n    position: absolute;\n    inset: -3px;\n}\n.gc-sidebar-tabs {\n    display: flex;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-sidebar-tab {\n    flex: 1;\n    padding: 10px 8px;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    border-bottom: 2px solid transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.gc-sidebar-tab:hover { color: var(--mj-text-primary); }\n.gc-sidebar-tab--active {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n}\n\n/* History sidebar (legacy classname kept for the inner head row) */\n.gc-history {\n    width: 280px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n}\n.gc-history-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n}\n.gc-history-clear {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.gc-history-clear:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.gc-history-empty {\n    width: 100%;\n    padding: 20px 16px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    text-align: center;\n    line-height: 1.5;\n}\n.gc-history-empty i { display: block; font-size: 22px; margin-bottom: 8px; opacity: 0.5; }\n\n.gc-history-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n}\n.gc-history-item {\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    padding: 8px 10px;\n    border-radius: 7px;\n    cursor: pointer;\n    margin-bottom: 2px;\n    font-family: inherit;\n    transition: background 0.12s, border-color 0.12s;\n}\n.gc-history-item:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-subtle);\n}\n.gc-history-item--fav {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.gc-history-item-head {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-history-status {\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-status--ok { color: var(--mj-status-success); }\n.gc-status--err { color: var(--mj-status-error); }\n\n.gc-history-label {\n    flex: 1;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-history-fav,\n.gc-history-del {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.gc-history-item:hover .gc-history-fav,\n.gc-history-item:hover .gc-history-del { opacity: 1; }\n.gc-history-item--fav .gc-history-fav { opacity: 1; color: var(--mj-status-warning); }\n.gc-history-fav:hover { color: var(--mj-status-warning); background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); }\n.gc-history-del:hover { color: var(--mj-status-error); background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); }\n\n.gc-history-meta {\n    margin-top: 3px;\n    margin-left: 18px;\n    display: flex;\n    gap: 4px;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n}\n\n/* ---------- Entities tab ---------- */\n.gc-ent-toolbar {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-ent-search-wrap {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n}\n.gc-ent-search-icon {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-ent-search {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-ent-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-ent-schema {\n    padding: 5px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 11.5px;\n    font-family: inherit;\n    cursor: pointer;\n    max-width: 130px;\n}\n\n.gc-ent-meta {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-ent-hint { font-style: italic; }\n\n.gc-ent-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-ent-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    margin-bottom: 4px;\n    overflow: hidden;\n    transition: border-color 0.12s, box-shadow 0.15s;\n}\n.gc-ent-card:hover { border-color: var(--mj-border-default); }\n.gc-ent-card--expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.gc-ent-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    font-family: inherit;\n}\n.gc-ent-row:hover { background: var(--mj-bg-surface-hover); }\n.gc-ent-card--expanded .gc-ent-row { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.gc-ent-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n}\n.gc-ent-chev--down { transform: rotate(90deg); }\n.gc-ent-info { flex: 1; min-width: 0; }\n.gc-ent-name {\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-meta-row {\n    display: flex;\n    gap: 6px;\n    margin-top: 2px;\n    align-items: center;\n}\n.gc-ent-typename {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-schema-badge {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.4px;\n}\n\n.gc-ent-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 6px 10px 8px 30px;\n    border-top: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n}\n.gc-ent-op {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 5px 9px;\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-ent-op:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n.gc-ent-op--read:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.gc-ent-op--write:hover {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 50%, var(--mj-border-strong));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-ent-op--danger:hover {\n    border-color: var(--mj-status-error);\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n.gc-ent-desc {\n    padding: 4px 10px 8px 30px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n}\n\n.gc-ent-empty {\n    width: 100%;\n    padding: 30px 18px;\n    color: var(--mj-text-muted);\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n.gc-ent-empty i { font-size: 18px; opacity: 0.5; }\n.gc-ent-clear {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 11.5px;\n    cursor: pointer;\n    font-family: inherit;\n    margin-top: 4px;\n}\n.gc-ent-clear:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n/* ---------- Schema explorer ---------- */\n.gc-schema-toolbar {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-schema-search-wrap {\n    position: relative;\n    flex: 1;\n}\n.gc-schema-search-icon {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-schema-search {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-schema-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-schema-reload {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-schema-reload:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.gc-schema-kinds {\n    display: flex;\n    gap: 4px;\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-schema-kind {\n    flex: 1;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 5px 6px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    transition: all 0.12s;\n}\n.gc-schema-kind:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.gc-schema-kind span {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    padding: 0 6px;\n    border-radius: 100px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n.gc-schema-kind--active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: white;\n}\n.gc-schema-kind--active span {\n    background: rgba(255, 255, 255, 0.25);\n    border-color: transparent;\n    color: white;\n}\n\n.gc-schema-state {\n    padding: 28px 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    line-height: 1.5;\n}\n.gc-schema-state i { font-size: 22px; opacity: 0.5; }\n\n.gc-schema-disabled {\n    color: var(--mj-text-secondary);\n}\n.gc-schema-disabled i {\n    color: var(--mj-status-warning);\n    opacity: 0.85;\n    font-size: 24px;\n    margin-bottom: 4px;\n}\n.gc-schema-disabled-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.gc-schema-disabled-body {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    max-width: 240px;\n}\n\n.gc-schema-state--err {\n    color: var(--mj-status-error);\n    align-items: stretch;\n    text-align: left;\n}\n.gc-schema-state--err i { color: var(--mj-status-error); opacity: 0.9; align-self: center; }\n.gc-schema-err-title {\n    font-size: 13px;\n    font-weight: 600;\n    text-align: center;\n    color: var(--mj-status-error);\n}\n.gc-schema-err-body {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 8px 10px;\n    border-radius: 6px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    word-break: break-word;\n    max-height: 160px;\n    overflow-y: auto;\n}\n\n.gc-schema-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-schema-op {\n    width: 100%;\n    text-align: left;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    padding: 8px 10px;\n    margin-bottom: 4px;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-schema-op:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n.gc-schema-op-head {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    margin-bottom: 3px;\n}\n.gc-schema-op-kind {\n    font-size: 9.5px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.gc-schema-op--mutation .gc-schema-op-kind {\n    background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-schema-op-name {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    word-break: break-all;\n}\n.gc-schema-op-args,\n.gc-schema-op-return {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n    word-break: break-word;\n}\n.gc-schema-op-return {\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n.gc-schema-op-return i { font-size: 9px; margin-right: 3px; opacity: 0.6; }\n.gc-schema-op-desc {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 5px;\n    line-height: 1.4;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n}\n\n/* Main panel */\n.gc-main {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.gc-editor-wrap,\n.gc-vars-wrap,\n.gc-response-wrap {\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n}\n.gc-editor-wrap {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex: 1;\n    min-height: 200px;\n}\n.gc-response-wrap {\n    flex: 1;\n    min-height: 200px;\n    background: var(--mj-bg-page);\n}\n\n.gc-editor-head,\n.gc-response-head {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.gc-editor-label { flex: 0 0 auto; }\n.gc-editor-hint {\n    font-weight: 500;\n    text-transform: none;\n    letter-spacing: normal;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n}\n.gc-mini-btn {\n    margin-left: auto;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 4px 10px;\n    border-radius: 5px;\n    font-size: 11px;\n    cursor: pointer;\n    font-family: inherit;\n    text-transform: none;\n    letter-spacing: normal;\n    font-weight: 500;\n}\n.gc-mini-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n}\n.gc-mini-btn--danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n\n/* mj-code-editor host fill \u2014 the component renders CodeMirror internally\n   and we want it to use the full available area of its flex parent. */\nmj-code-editor.gc-editor {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    display: block;\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\nmj-code-editor.gc-editor ::ng-deep .cm-editor {\n    height: 100%;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n}\nmj-code-editor.gc-editor ::ng-deep .cm-scroller {\n    line-height: 1.55;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\nmj-code-editor.gc-editor--vars {\n    background: var(--mj-bg-surface-sunken);\n    flex: 0 0 auto;\n    min-height: 80px;\n    max-height: 160px;\n}\nmj-code-editor.gc-editor--vars ::ng-deep .cm-editor {\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Variables collapsible */\n.gc-vars-wrap {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-vars-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    border: none;\n    padding: 7px 16px;\n    cursor: pointer;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-family: inherit;\n    text-align: left;\n    transition: background 0.12s;\n}\n.gc-vars-toggle:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.gc-vars-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    transition: transform 0.15s;\n}\n.gc-vars-chev--down { transform: rotate(90deg); }\n.gc-vars-pill {\n    margin-left: auto;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    padding: 1px 8px;\n    border-radius: 100px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n/* Run bar */\n.gc-run-bar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-run-btn {\n    background: var(--mj-brand-primary);\n    color: white;\n    border: 1px solid var(--mj-brand-primary);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    transition: background 0.15s, transform 0.1s;\n}\n.gc-run-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.gc-run-btn:active:not(:disabled) { transform: scale(0.98); }\n.gc-run-btn:disabled {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-muted);\n    box-shadow: none;\n    cursor: wait;\n}\n\n.gc-run-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n}\n.gc-status-badge--ok {\n    background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary));\n}\n.gc-status-badge--err {\n    background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n}\n.gc-meta-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\n.gc-spacer { flex: 1; }\n\n/* Response */\n.gc-response {\n    margin: 0;\n    flex: 1;\n    overflow: auto;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12px;\n    line-height: 1.55;\n}\n.gc-response code { white-space: pre-wrap; word-break: break-word; }\n\n.gc-error {\n    margin: 12px 16px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-subtle));\n    border-radius: 8px;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n    font-size: 12.5px;\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n}\n.gc-error i { margin-top: 2px; flex-shrink: 0; }\n.gc-error--inline { margin-bottom: 0; }\n\n.gc-empty {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.gc-empty i { font-size: 24px; opacity: 0.4; }\n\n@media (max-width: 900px) {\n    .gc-sidebar, .gc-history { display: none; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-graphql-console', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"GraphQL console\"\n        Title=\"GraphQL Console\"\n        Subtitle=\"Run queries against the connected MJ API\">\n        <div meta>\n            @if (ApiUrl) {\n                <span class=\"gc-endpoint-meta\">\n                    <i class=\"fa-solid fa-plug\" aria-hidden=\"true\"></i>\n                    <code class=\"gc-endpoint\">{{ ApiUrl }}</code>\n                </span>\n            }\n        </div>\n        <div actions>\n            <button mjButton\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    [toggleable]=\"true\"\n                    [(selected)]=\"ShowHistory\"\n                    title=\"Toggle history sidebar\">\n                <i class=\"fa-solid fa-clock-rotate-left\" aria-hidden=\"true\"></i> <span class=\"mj-action-label\">History</span>\n            </button>\n            <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"OnCopyAsCurl()\" title=\"Copy as cURL command\">\n                <i class=\"fa-solid fa-terminal\" aria-hidden=\"true\"></i> <span class=\"mj-action-label\">Copy cURL</span>\n            </button>\n        </div>\n    </mj-page-header-interior>\n\n    <div class=\"gc-body\">\n        @if (ShowHistory) {\n            <aside class=\"gc-sidebar\" [style.width.px]=\"SidebarWidthPx\">\n                <div class=\"gc-sidebar-tabs\">\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'history'\"\n                            (click)=\"OnSidebarTabChange('history')\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i> History\n                    </button>\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'entities'\"\n                            (click)=\"OnSidebarTabChange('entities')\">\n                        <i class=\"fa-solid fa-table-list\"></i> Entities\n                    </button>\n                    <button type=\"button\"\n                            class=\"gc-sidebar-tab\"\n                            [class.gc-sidebar-tab--active]=\"SidebarTab === 'schema'\"\n                            (click)=\"OnSidebarTabChange('schema')\">\n                        <i class=\"fa-solid fa-sitemap\"></i> Schema\n                    </button>\n                </div>\n\n                @if (SidebarTab === 'history') {\n                <div class=\"gc-history-head\">\n                    <span>{{ History.length }} {{ History.length === 1 ? 'entry' : 'entries' }}</span>\n                    <button class=\"gc-history-clear\"\n                            type=\"button\"\n                            (click)=\"OnClearHistory()\"\n                            title=\"Clear non-favorite history\">\n                        <i class=\"fa-solid fa-broom\"></i>\n                    </button>\n                </div>\n                @if (History.length === 0) {\n                    <mj-empty-state class=\"gc-history-empty\" Size=\"compact\" Icon=\"fa-regular fa-circle-question\"\n                        Title=\"Run a query to see it here\" Message=\"Star a query to keep it.\" />\n                } @else {\n                    <div class=\"gc-history-list\">\n                        @for (h of History; track TrackByHistory($index, h)) {\n                            <button type=\"button\"\n                                    class=\"gc-history-item\"\n                                    [class.gc-history-item--error]=\"h.status === 'error'\"\n                                    [class.gc-history-item--fav]=\"h.favorite\"\n                                    (click)=\"OnRestoreHistory(h)\">\n                                <div class=\"gc-history-item-head\">\n                                    <i class=\"gc-history-status\"\n                                       [class.fa-solid]=\"true\"\n                                       [class.fa-circle-check]=\"h.status === 'ok'\"\n                                       [class.fa-circle-xmark]=\"h.status === 'error'\"\n                                       [class.gc-status--ok]=\"h.status === 'ok'\"\n                                       [class.gc-status--err]=\"h.status === 'error'\"></i>\n                                    <span class=\"gc-history-label\">{{ h.label || 'unnamed' }}</span>\n                                    <button class=\"gc-history-fav\"\n                                            type=\"button\"\n                                            (click)=\"OnToggleFavorite(h, $event)\"\n                                            [title]=\"h.favorite ? 'Unfavorite' : 'Favorite'\">\n                                        <i [class]=\"h.favorite ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                                    </button>\n                                    <button class=\"gc-history-del\"\n                                            type=\"button\"\n                                            (click)=\"OnDeleteHistory(h, $event)\"\n                                            title=\"Remove from history\">\n                                        <i class=\"fa-solid fa-xmark\"></i>\n                                    </button>\n                                </div>\n                                <div class=\"gc-history-meta\">\n                                    <span>{{ h.timestamp | date:'HH:mm:ss' }}</span>\n                                    @if (h.durationMs != null) {\n                                        <span>\u00B7</span>\n                                        <span>{{ h.durationMs }}ms</span>\n                                    }\n                                </div>\n                            </button>\n                        }\n                    </div>\n                }\n                } @else if (SidebarTab === 'entities') {\n                    <div class=\"gc-ent-toolbar\">\n                        <div class=\"gc-ent-search-wrap\">\n                            <i class=\"fa-solid fa-search gc-ent-search-icon\"></i>\n                            <input type=\"search\"\n                                   class=\"gc-ent-search\"\n                                   placeholder=\"Search entities\u2026\"\n                                   [(ngModel)]=\"EntitiesSearch\" />\n                        </div>\n                        @if (KnownSchemas.length > 1) {\n                            <select class=\"gc-ent-schema\" [(ngModel)]=\"EntitySchemaFilter\">\n                                <option value=\"\">All schemas ({{ KnownSchemas.length }})</option>\n                                @for (s of KnownSchemas; track s) {\n                                    <option [value]=\"s\">{{ s }}</option>\n                                }\n                            </select>\n                        }\n                    </div>\n                    <div class=\"gc-ent-meta\">\n                        <span>{{ FilteredEntities.length }} of {{ Entities.length }}</span>\n                        <span class=\"gc-ent-hint\">Click an entity to see operations</span>\n                    </div>\n                    <div class=\"gc-ent-list\">\n                        @for (item of FilteredEntities; track TrackByEntity($index, item)) {\n                            <div class=\"gc-ent-card\" [class.gc-ent-card--expanded]=\"item.expanded\">\n                                <button type=\"button\"\n                                        class=\"gc-ent-row\"\n                                        (click)=\"ToggleEntity(item)\">\n                                    <i class=\"fa-solid fa-chevron-right gc-ent-chev\"\n                                       [class.gc-ent-chev--down]=\"item.expanded\"></i>\n                                    <div class=\"gc-ent-info\">\n                                        <div class=\"gc-ent-name\">{{ item.info.Name }}</div>\n                                        <div class=\"gc-ent-meta-row\">\n                                            <code class=\"gc-ent-typename\">{{ item.typeName }}</code>\n                                            <span class=\"gc-ent-schema-badge\">{{ item.schema }}</span>\n                                        </div>\n                                    </div>\n                                </button>\n                                @if (item.expanded) {\n                                    <div class=\"gc-ent-actions\">\n                                        <button type=\"button\" class=\"gc-ent-op gc-ent-op--read\"\n                                                (click)=\"OnEntityOp(item, 'view', $event)\"\n                                                title=\"Insert a Run View template (Shift-click to append)\">\n                                            <i class=\"fa-solid fa-magnifying-glass\"></i>\n                                            Run view\n                                        </button>\n                                        <button type=\"button\" class=\"gc-ent-op gc-ent-op--read\"\n                                                (click)=\"OnEntityOp(item, 'byId', $event)\"\n                                                title=\"Fetch a single record by ID (Shift-click to append)\">\n                                            <i class=\"fa-solid fa-fingerprint\"></i>\n                                            Get by ID\n                                        </button>\n                                        @if (item.info.AllowCreateAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--write\"\n                                                    (click)=\"OnEntityOp(item, 'create', $event)\"\n                                                    title=\"Create a new record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-plus\"></i>\n                                                Create\n                                            </button>\n                                        }\n                                        @if (item.info.AllowUpdateAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--write\"\n                                                    (click)=\"OnEntityOp(item, 'update', $event)\"\n                                                    title=\"Update an existing record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-pen\"></i>\n                                                Update\n                                            </button>\n                                        }\n                                        @if (item.info.AllowDeleteAPI) {\n                                            <button type=\"button\" class=\"gc-ent-op gc-ent-op--danger\"\n                                                    (click)=\"OnEntityOp(item, 'delete', $event)\"\n                                                    title=\"Delete a record (Shift-click to append)\">\n                                                <i class=\"fa-solid fa-trash\"></i>\n                                                Delete\n                                            </button>\n                                        }\n                                    </div>\n                                    @if (item.info.Description) {\n                                        <div class=\"gc-ent-desc\">{{ item.info.Description }}</div>\n                                    }\n                                }\n                            </div>\n                        }\n                        @if (FilteredEntities.length === 0) {\n                            <mj-empty-state class=\"gc-ent-empty\" Variant=\"no-results\" Size=\"compact\"\n                                Icon=\"fa-solid fa-magnifying-glass\" Title=\"No entities match.\"\n                                [ActionText]=\"(EntitiesSearch || EntitySchemaFilter) ? 'Clear filters' : ''\"\n                                (Action)=\"ClearEntityFilters()\" />\n                        }\n                    </div>\n                } @else {\n                    <div class=\"gc-schema-toolbar\">\n                        <div class=\"gc-schema-search-wrap\">\n                            <i class=\"fa-solid fa-search gc-schema-search-icon\"></i>\n                            <input type=\"search\"\n                                   class=\"gc-schema-search\"\n                                   placeholder=\"Search operations\u2026\"\n                                   [(ngModel)]=\"SchemaSearch\" />\n                        </div>\n                        <button class=\"gc-schema-reload\"\n                                type=\"button\"\n                                (click)=\"OnReloadSchema()\"\n                                [disabled]=\"SchemaLoading\"\n                                title=\"Reload schema\">\n                            <i class=\"fa-solid\" [class.fa-rotate]=\"!SchemaLoading\" [class.fa-spinner]=\"SchemaLoading\" [class.fa-spin]=\"SchemaLoading\"></i>\n                        </button>\n                    </div>\n\n                    @if (Operations.length > 0) {\n                        <div class=\"gc-schema-kinds\">\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'all'\"\n                                    (click)=\"SchemaKindFilter = 'all'\">\n                                All <span>{{ OperationCounts.all }}</span>\n                            </button>\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind gc-schema-kind--query\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'query'\"\n                                    (click)=\"SchemaKindFilter = 'query'\">\n                                <i class=\"fa-solid fa-magnifying-glass\"></i> Query <span>{{ OperationCounts.query }}</span>\n                            </button>\n                            <button type=\"button\"\n                                    class=\"gc-schema-kind gc-schema-kind--mutation\"\n                                    [class.gc-schema-kind--active]=\"SchemaKindFilter === 'mutation'\"\n                                    (click)=\"SchemaKindFilter = 'mutation'\">\n                                <i class=\"fa-solid fa-pen\"></i> Mutation <span>{{ OperationCounts.mutation }}</span>\n                            </button>\n                        </div>\n                    }\n\n                    @if (SchemaLoading) {\n                        <div class=\"gc-schema-state\">\n                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                            <span>Introspecting schema\u2026</span>\n                        </div>\n                    } @else if (SchemaIntrospectionDisabled) {\n                        <div class=\"gc-schema-state gc-schema-disabled\">\n                            <i class=\"fa-solid fa-lock\"></i>\n                            <div class=\"gc-schema-disabled-title\">Introspection disabled</div>\n                            <div class=\"gc-schema-disabled-body\">\n                                This server has GraphQL introspection turned off (typical in production). Schema browsing isn't available \u2014 write queries directly in the editor, or use the History tab to revisit previous queries.\n                            </div>\n                        </div>\n                    } @else if (SchemaError) {\n                        <div class=\"gc-schema-state gc-schema-state--err\">\n                            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                            <div class=\"gc-schema-err-title\">Couldn't load schema</div>\n                            <div class=\"gc-schema-err-body\">{{ SchemaError }}</div>\n                        </div>\n                    } @else if (FilteredOperations.length === 0) {\n                        <div class=\"gc-schema-state\">\n                            <i class=\"fa-solid fa-search\"></i>\n                            <span>No operations match.</span>\n                        </div>\n                    } @else {\n                        <div class=\"gc-schema-list\">\n                            @for (op of FilteredOperations; track TrackByOp($index, op)) {\n                                <button type=\"button\"\n                                        class=\"gc-schema-op\"\n                                        [class.gc-schema-op--mutation]=\"op.kind === 'mutation'\"\n                                        (click)=\"OnInsertOperation(op, $event)\"\n                                        [title]=\"(op.description || ('Insert ' + op.kind + ' template')) + ' \u00B7 Shift-click to append'\">\n                                    <div class=\"gc-schema-op-head\">\n                                        <span class=\"gc-schema-op-kind\">{{ op.kind }}</span>\n                                        <span class=\"gc-schema-op-name\">{{ op.name }}</span>\n                                    </div>\n                                    @if (op.argSummary) {\n                                        <div class=\"gc-schema-op-args\">({{ op.argSummary }})</div>\n                                    }\n                                    <div class=\"gc-schema-op-return\">\n                                        <i class=\"fa-solid fa-arrow-right\"></i> {{ op.returnSummary }}\n                                    </div>\n                                    @if (op.description) {\n                                        <div class=\"gc-schema-op-desc\">{{ op.description }}</div>\n                                    }\n                                </button>\n                            }\n                        </div>\n                    }\n                }\n            </aside>\n            <div class=\"gc-splitter gc-splitter--vert\"\n                 (mousedown)=\"OnSplitterDown($event, 'sidebar')\"\n                 title=\"Drag to resize sidebar\"></div>\n        }\n\n        <div class=\"gc-main\">\n            <div class=\"gc-editor-wrap\" [style.flex]=\"'0 0 ' + EditorHeightPct + '%'\">\n                <div class=\"gc-editor-head\">\n                    <span class=\"gc-editor-label\">Query</span>\n                    <span class=\"gc-editor-hint\">\u2318/Ctrl+Enter to run \u00B7 Shift+click an entity/op to append</span>\n                    <button class=\"gc-mini-btn\" type=\"button\" (click)=\"OnFormatQuery()\" title=\"Tidy whitespace\">\n                        <i class=\"fa-solid fa-broom\"></i> Tidy\n                    </button>\n                    <button class=\"gc-mini-btn gc-mini-btn--danger\" type=\"button\" (click)=\"OnClearQuery()\" title=\"Clear editor\">\n                        <i class=\"fa-solid fa-eraser\"></i> Clear\n                    </button>\n                </div>\n                <mj-code-editor\n                    class=\"gc-editor\"\n                    [(ngModel)]=\"Query\"\n                    [language]=\"'graphql'\"\n                    [lineWrapping]=\"true\"\n                    placeholder=\"Enter your GraphQL query\u2026\">\n                </mj-code-editor>\n            </div>\n\n            <div class=\"gc-splitter gc-splitter--horiz\"\n                 (mousedown)=\"OnSplitterDown($event, 'editor')\"\n                 title=\"Drag to resize editor / response\"></div>\n\n            <div class=\"gc-vars-wrap\">\n                <button class=\"gc-vars-toggle\" type=\"button\" (click)=\"ToggleVariables()\">\n                    <i class=\"fa-solid fa-chevron-right gc-vars-chev\" [class.gc-vars-chev--down]=\"ShowVariables\"></i>\n                    Variables\n                    @if (Variables && Variables.trim() !== '{}' && Variables.trim() !== '') {\n                        <span class=\"gc-vars-pill\">configured</span>\n                    }\n                </button>\n                @if (ShowVariables) {\n                    <mj-code-editor\n                        class=\"gc-editor gc-editor--vars\"\n                        [(ngModel)]=\"Variables\"\n                        [language]=\"'json'\"\n                        [lineWrapping]=\"true\"\n                        placeholder=\"{}\">\n                    </mj-code-editor>\n                }\n            </div>\n\n            <div class=\"gc-run-bar\">\n                <button class=\"gc-run-btn\"\n                        type=\"button\"\n                        [disabled]=\"Running\"\n                        (click)=\"OnRun()\">\n                    @if (Running) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Running\u2026\n                    } @else {\n                        <i class=\"fa-solid fa-play\"></i> Run\n                    }\n                </button>\n                @if (ResponseStatus !== 'idle') {\n                    <div class=\"gc-run-meta\">\n                        @if (ResponseStatus === 'ok') {\n                            <span class=\"gc-status-badge gc-status-badge--ok\">\n                                <i class=\"fa-solid fa-circle-check\"></i> 200 OK\n                            </span>\n                        } @else {\n                            <span class=\"gc-status-badge gc-status-badge--err\">\n                                <i class=\"fa-solid fa-triangle-exclamation\"></i> Error\n                            </span>\n                        }\n                        @if (ResponseDurationMs != null) {\n                            <span class=\"gc-meta-pill\"><i class=\"fa-regular fa-clock\"></i> {{ ResponseDurationMs }}ms</span>\n                        }\n                        @if (ResponseSizeBytes != null) {\n                            <span class=\"gc-meta-pill\"><i class=\"fa-solid fa-database\"></i> {{ FormattedSize }}</span>\n                        }\n                    </div>\n                }\n                <span class=\"gc-spacer\"></span>\n                @if (ResponseJson) {\n                    <button mjButton\n                            [variant]=\"CopyConfirmed ? 'success' : 'secondary'\"\n                            size=\"sm\"\n                            (click)=\"OnCopyResponse()\">\n                        <i class=\"fa-solid\" [class.fa-clipboard]=\"!CopyConfirmed\" [class.fa-check]=\"CopyConfirmed\" aria-hidden=\"true\"></i>\n                        {{ CopyConfirmed ? 'Copied' : 'Copy' }}\n                    </button>\n                }\n            </div>\n\n            <div class=\"gc-response-wrap\">\n                <div class=\"gc-response-head\">\n                    <span class=\"gc-editor-label\">Response</span>\n                </div>\n                @if (ErrorMessage && !ResponseJson) {\n                    <div class=\"gc-error\">\n                        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                        <span>{{ ErrorMessage }}</span>\n                    </div>\n                } @else if (ResponseJson) {\n                    @if (ErrorMessage) {\n                        <div class=\"gc-error gc-error--inline\">\n                            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                            <span>{{ ErrorMessage }}</span>\n                        </div>\n                    }\n                    <pre class=\"gc-response\"><code>{{ ResponseJson }}</code></pre>\n                } @else {\n                    <mj-empty-state class=\"gc-empty\" Icon=\"fa-solid fa-arrow-up-from-bracket\"\n                        Title=\"Run a query to see results here.\" />\n                }\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n.gc-endpoint {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11px;\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n.gc-endpoint-meta {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11.5px;\n    color: var(--mj-text-muted);\n}\n\n.gc-body {\n    display: flex;\n    flex: 1;\n    min-height: 0;\n}\n\n/* Sidebar (history + entities + schema) \u2014 width is bound from component */\n.gc-sidebar {\n    flex-shrink: 0;\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n    min-width: 200px;\n    max-width: 560px;\n}\n\n/* Resizable splitters */\n.gc-splitter {\n    flex-shrink: 0;\n    background: var(--mj-border-subtle);\n    transition: background 0.15s;\n    position: relative;\n}\n.gc-splitter:hover { background: var(--mj-brand-primary); }\n.gc-splitter:active { background: color-mix(in srgb, var(--mj-brand-primary) 80%, black); }\n.gc-splitter--vert {\n    width: 4px;\n    cursor: col-resize;\n}\n.gc-splitter--horiz {\n    height: 4px;\n    cursor: row-resize;\n}\n/* Bigger invisible hit area so the splitter is easier to grab */\n.gc-splitter::before {\n    content: '';\n    position: absolute;\n    inset: -3px;\n}\n.gc-sidebar-tabs {\n    display: flex;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-sidebar-tab {\n    flex: 1;\n    padding: 10px 8px;\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    border-bottom: 2px solid transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.gc-sidebar-tab:hover { color: var(--mj-text-primary); }\n.gc-sidebar-tab--active {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface);\n}\n\n/* History sidebar (legacy classname kept for the inner head row) */\n.gc-history {\n    width: 280px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    display: flex;\n    flex-direction: column;\n}\n.gc-history-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 14px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n}\n.gc-history-clear {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n}\n.gc-history-clear:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n\n.gc-history-empty {\n    width: 100%;\n    padding: 20px 16px;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    text-align: center;\n    line-height: 1.5;\n}\n.gc-history-empty i { display: block; font-size: 22px; margin-bottom: 8px; opacity: 0.5; }\n\n.gc-history-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n}\n.gc-history-item {\n    width: 100%;\n    text-align: left;\n    background: transparent;\n    border: 1px solid transparent;\n    padding: 8px 10px;\n    border-radius: 7px;\n    cursor: pointer;\n    margin-bottom: 2px;\n    font-family: inherit;\n    transition: background 0.12s, border-color 0.12s;\n}\n.gc-history-item:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-subtle);\n}\n.gc-history-item--fav {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.gc-history-item-head {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-history-status {\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-status--ok { color: var(--mj-status-success); }\n.gc-status--err { color: var(--mj-status-error); }\n\n.gc-history-label {\n    flex: 1;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 11.5px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-history-fav,\n.gc-history-del {\n    background: transparent;\n    border: none;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 22px;\n    height: 22px;\n    border-radius: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n    opacity: 0;\n    transition: all 0.12s;\n}\n.gc-history-item:hover .gc-history-fav,\n.gc-history-item:hover .gc-history-del { opacity: 1; }\n.gc-history-item--fav .gc-history-fav { opacity: 1; color: var(--mj-status-warning); }\n.gc-history-fav:hover { color: var(--mj-status-warning); background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); }\n.gc-history-del:hover { color: var(--mj-status-error); background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); }\n\n.gc-history-meta {\n    margin-top: 3px;\n    margin-left: 18px;\n    display: flex;\n    gap: 4px;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n}\n\n/* ---------- Entities tab ---------- */\n.gc-ent-toolbar {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-ent-search-wrap {\n    position: relative;\n    flex: 1;\n    min-width: 0;\n}\n.gc-ent-search-icon {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-ent-search {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-ent-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-ent-schema {\n    padding: 5px 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 11.5px;\n    font-family: inherit;\n    cursor: pointer;\n    max-width: 130px;\n}\n\n.gc-ent-meta {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-ent-hint { font-style: italic; }\n\n.gc-ent-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-ent-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    margin-bottom: 4px;\n    overflow: hidden;\n    transition: border-color 0.12s, box-shadow 0.15s;\n}\n.gc-ent-card:hover { border-color: var(--mj-border-default); }\n.gc-ent-card--expanded {\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n.gc-ent-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 10px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    text-align: left;\n    font-family: inherit;\n}\n.gc-ent-row:hover { background: var(--mj-bg-surface-hover); }\n.gc-ent-card--expanded .gc-ent-row { background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent); }\n.gc-ent-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    width: 12px;\n    flex-shrink: 0;\n    transition: transform 0.15s;\n}\n.gc-ent-chev--down { transform: rotate(90deg); }\n.gc-ent-info { flex: 1; min-width: 0; }\n.gc-ent-name {\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-meta-row {\n    display: flex;\n    gap: 6px;\n    margin-top: 2px;\n    align-items: center;\n}\n.gc-ent-typename {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.gc-ent-schema-badge {\n    font-size: 10px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 1px 6px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.4px;\n}\n\n.gc-ent-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    padding: 6px 10px 8px 30px;\n    border-top: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n}\n.gc-ent-op {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 5px 9px;\n    border-radius: 6px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 11px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-ent-op:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n.gc-ent-op--read:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.gc-ent-op--write:hover {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 50%, var(--mj-border-strong));\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-ent-op--danger:hover {\n    border-color: var(--mj-status-error);\n    color: var(--mj-status-error);\n    background: color-mix(in srgb, var(--mj-status-error) 6%, transparent);\n}\n.gc-ent-desc {\n    padding: 4px 10px 8px 30px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    line-height: 1.45;\n}\n\n.gc-ent-empty {\n    width: 100%;\n    padding: 30px 18px;\n    color: var(--mj-text-muted);\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    font-size: 12px;\n}\n.gc-ent-empty i { font-size: 18px; opacity: 0.5; }\n.gc-ent-clear {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 11.5px;\n    cursor: pointer;\n    font-family: inherit;\n    margin-top: 4px;\n}\n.gc-ent-clear:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n/* ---------- Schema explorer ---------- */\n.gc-schema-toolbar {\n    display: flex;\n    gap: 6px;\n    padding: 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface-card);\n    flex-shrink: 0;\n}\n.gc-schema-search-wrap {\n    position: relative;\n    flex: 1;\n}\n.gc-schema-search-icon {\n    position: absolute;\n    left: 9px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-muted);\n    font-size: 11px;\n    pointer-events: none;\n}\n.gc-schema-search {\n    width: 100%;\n    padding: 6px 10px 6px 26px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-size: 12px;\n    font-family: inherit;\n}\n.gc-schema-search:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.gc-schema-reload {\n    background: transparent;\n    border: 1px solid var(--mj-border-default);\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 11px;\n    flex-shrink: 0;\n}\n.gc-schema-reload:hover:not(:disabled) {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.gc-schema-kinds {\n    display: flex;\n    gap: 4px;\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n    flex-shrink: 0;\n}\n.gc-schema-kind {\n    flex: 1;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 5px 6px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    transition: all 0.12s;\n}\n.gc-schema-kind:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n}\n.gc-schema-kind span {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    padding: 0 6px;\n    border-radius: 100px;\n    font-size: 10px;\n    color: var(--mj-text-muted);\n}\n.gc-schema-kind--active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n.gc-schema-kind--active span {\n    background: rgba(255, 255, 255, 0.25);\n    border-color: transparent;\n    color: var(--mj-brand-on-primary);\n}\n\n.gc-schema-state {\n    padding: 28px 18px;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    line-height: 1.5;\n}\n.gc-schema-state i { font-size: 22px; opacity: 0.5; }\n\n.gc-schema-disabled {\n    color: var(--mj-text-secondary);\n}\n.gc-schema-disabled i {\n    color: var(--mj-status-warning);\n    opacity: 0.85;\n    font-size: 24px;\n    margin-bottom: 4px;\n}\n.gc-schema-disabled-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.gc-schema-disabled-body {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    max-width: 240px;\n}\n\n.gc-schema-state--err {\n    color: var(--mj-status-error);\n    align-items: stretch;\n    text-align: left;\n}\n.gc-schema-state--err i { color: var(--mj-status-error); opacity: 0.9; align-self: center; }\n.gc-schema-err-title {\n    font-size: 13px;\n    font-weight: 600;\n    text-align: center;\n    color: var(--mj-status-error);\n}\n.gc-schema-err-body {\n    font-size: 11.5px;\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 8px 10px;\n    border-radius: 6px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    word-break: break-word;\n    max-height: 160px;\n    overflow-y: auto;\n}\n\n.gc-schema-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 6px;\n}\n.gc-schema-op {\n    width: 100%;\n    text-align: left;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 7px;\n    padding: 8px 10px;\n    margin-bottom: 4px;\n    cursor: pointer;\n    font-family: inherit;\n    transition: all 0.12s;\n}\n.gc-schema-op:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n.gc-schema-op-head {\n    display: flex;\n    align-items: baseline;\n    gap: 8px;\n    margin-bottom: 3px;\n}\n.gc-schema-op-kind {\n    font-size: 9.5px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n}\n.gc-schema-op--mutation .gc-schema-op-kind {\n    background: color-mix(in srgb, var(--mj-status-warning) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-warning) 70%, var(--mj-text-primary));\n}\n.gc-schema-op-name {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    word-break: break-all;\n}\n.gc-schema-op-args,\n.gc-schema-op-return {\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    line-height: 1.4;\n    word-break: break-word;\n}\n.gc-schema-op-return {\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n.gc-schema-op-return i { font-size: 9px; margin-right: 3px; opacity: 0.6; }\n.gc-schema-op-desc {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    margin-top: 5px;\n    line-height: 1.4;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n}\n\n/* Main panel */\n.gc-main {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n}\n\n.gc-editor-wrap,\n.gc-vars-wrap,\n.gc-response-wrap {\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n}\n.gc-editor-wrap {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex: 1;\n    min-height: 200px;\n}\n.gc-response-wrap {\n    flex: 1;\n    min-height: 200px;\n    background: var(--mj-bg-page);\n}\n\n.gc-editor-head,\n.gc-response-head {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 8px 16px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n.gc-editor-label { flex: 0 0 auto; }\n.gc-editor-hint {\n    font-weight: 500;\n    text-transform: none;\n    letter-spacing: normal;\n    color: var(--mj-text-muted);\n    font-size: 11px;\n}\n.gc-mini-btn {\n    margin-left: auto;\n    background: transparent;\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    padding: 4px 10px;\n    border-radius: 5px;\n    font-size: 11px;\n    cursor: pointer;\n    font-family: inherit;\n    text-transform: none;\n    letter-spacing: normal;\n    font-weight: 500;\n}\n.gc-mini-btn:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-default);\n}\n.gc-mini-btn--danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    color: var(--mj-status-error);\n    border-color: color-mix(in srgb, var(--mj-status-error) 40%, var(--mj-border-default));\n}\n\n/* mj-code-editor host fill \u2014 the component renders CodeMirror internally\n   and we want it to use the full available area of its flex parent. */\nmj-code-editor.gc-editor {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    display: block;\n    background: var(--mj-bg-surface);\n    overflow: hidden;\n}\nmj-code-editor.gc-editor ::ng-deep .cm-editor {\n    height: 100%;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n}\nmj-code-editor.gc-editor ::ng-deep .cm-scroller {\n    line-height: 1.55;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\nmj-code-editor.gc-editor--vars {\n    background: var(--mj-bg-surface-sunken);\n    flex: 0 0 auto;\n    min-height: 80px;\n    max-height: 160px;\n}\nmj-code-editor.gc-editor--vars ::ng-deep .cm-editor {\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Variables collapsible */\n.gc-vars-wrap {\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-vars-toggle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    background: var(--mj-bg-surface-card);\n    border: none;\n    padding: 7px 16px;\n    cursor: pointer;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-family: inherit;\n    text-align: left;\n    transition: background 0.12s;\n}\n.gc-vars-toggle:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.gc-vars-chev {\n    color: var(--mj-text-muted);\n    font-size: 10px;\n    transition: transform 0.15s;\n}\n.gc-vars-chev--down { transform: rotate(90deg); }\n.gc-vars-pill {\n    margin-left: auto;\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    font-size: 10px;\n    padding: 1px 8px;\n    border-radius: 100px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n}\n\n/* Run bar */\n.gc-run-bar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    flex-shrink: 0;\n}\n.gc-run-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: 1px solid var(--mj-brand-primary);\n    padding: 8px 18px;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    transition: background 0.15s, transform 0.1s;\n}\n.gc-run-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.gc-run-btn:active:not(:disabled) { transform: scale(0.98); }\n.gc-run-btn:disabled {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-default);\n    color: var(--mj-text-muted);\n    box-shadow: none;\n    cursor: wait;\n}\n\n.gc-run-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n.gc-status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 10px;\n    border-radius: 100px;\n    font-size: 11px;\n    font-weight: 600;\n}\n.gc-status-badge--ok {\n    background: color-mix(in srgb, var(--mj-status-success) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-success) 70%, var(--mj-text-primary));\n}\n.gc-status-badge--err {\n    background: color-mix(in srgb, var(--mj-status-error) 14%, transparent);\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n}\n.gc-meta-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 3px 9px;\n    border-radius: 100px;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n}\n.gc-spacer { flex: 1; }\n\n/* Response */\n.gc-response {\n    margin: 0;\n    flex: 1;\n    overflow: auto;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12px;\n    line-height: 1.55;\n}\n.gc-response code { white-space: pre-wrap; word-break: break-word; }\n\n.gc-error {\n    margin: 12px 16px;\n    padding: 10px 14px;\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-border-subtle));\n    border-radius: 8px;\n    color: color-mix(in srgb, var(--mj-status-error) 70%, var(--mj-text-primary));\n    font-size: 12.5px;\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n}\n.gc-error i { margin-top: 2px; flex-shrink: 0; }\n.gc-error--inline { margin-bottom: 0; }\n\n.gc-empty {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n.gc-empty i { font-size: 24px; opacity: 0.4; }\n\n@media (max-width: 900px) {\n    .gc-sidebar, .gc-history { display: none; }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { QueryEditor: [{
             type: ViewChild,
             args: ['queryEditor']

package/dist/DevTools/lazy-module-status.component.js CHANGED Viewed

@@ -448,7 +448,7 @@ let LazyModuleStatusComponent = class LazyModuleStatusComponent extends BaseReso
             i0.ɵɵproperty("Loading", false);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.Available ? 4 : 5);
-        } }, dependencies: [i1.MJPageHeaderInteriorComponent, i1.MJRefreshButtonComponent, i1.MJEmptyStateComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n\n\n.lz-unavailable[_ngcontent-%COMP%] {\n    margin: 16px 20px;\n    padding: 14px 18px;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-subtle));\n    border-radius: 10px;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    line-height: 1.5;\n}\n.lz-unavailable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 18px;\n    margin-top: 2px;\n}\n\n\n.lz-summary[_ngcontent-%COMP%] {\n    padding: 18px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 24px;\n    align-items: center;\n}\n.lz-progress[_ngcontent-%COMP%] { min-width: 0; }\n.lz-progress-bar[_ngcontent-%COMP%] {\n    height: 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 100px;\n    overflow: hidden;\n    margin-bottom: 8px;\n}\n.lz-progress-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: linear-gradient(90deg, #264FAF 0%, #0076b6 100%);\n    border-radius: 100px;\n    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.lz-progress-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 10px;\n}\n.lz-progress-pct[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    letter-spacing: -0.5px;\n    line-height: 1;\n}\n.lz-progress-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n}\n\n.lz-summary-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 14px;\n}\n.lz-summary-stat[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 10px 14px;\n    text-align: center;\n    min-width: 88px;\n}\n.lz-summary-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.4px;\n    line-height: 1;\n}\n.lz-summary-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n\n.lz-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n}\n.lz-filter[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border-radius: 100px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    cursor: pointer;\n    transition: all 0.12s;\n}\n.lz-filter[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n.lz-filter--active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.lz-filter-count[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 10.5px;\n    padding: 1px 7px;\n    border-radius: 100px;\n    font-weight: 600;\n}\n.lz-filter--active[_ngcontent-%COMP%]   .lz-filter-count[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    color: var(--mj-brand-primary);\n}\n.lz-spacer[_ngcontent-%COMP%] { flex: 1; }\n.lz-refreshed[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n\n.lz-grid[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n    gap: 12px;\n    align-content: start;\n}\n.lz-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n}\n.lz-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-default);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.lz-card--loaded[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-border-subtle));\n}\n\n.lz-card-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n}\n.lz-card-status[_ngcontent-%COMP%] {\n    width: 22px;\n    height: 22px;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.lz-card-status--loaded[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n.lz-card-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n.lz-card-title[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    display: block;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.lz-card-kcount[_ngcontent-%COMP%] {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n}\n\n.lz-load-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: white;\n    border: 1px solid var(--mj-brand-primary);\n    padding: 6px 12px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: background 0.15s, transform 0.1s;\n    flex-shrink: 0;\n}\n.lz-load-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.lz-load-btn[_ngcontent-%COMP%]:active:not(:disabled) { transform: scale(0.97); }\n.lz-load-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.7;\n    cursor: wait;\n}\n\n.lz-card-keys[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    transition: max-height 0.3s ease-out;\n}\n.lz-card-keys--expanded[_ngcontent-%COMP%] {\n    max-height: none;\n}\n.lz-key[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    padding: 2px 7px;\n    border-radius: 5px;\n    line-height: 1.5;\n}\n.lz-card--loaded[_ngcontent-%COMP%]   .lz-key[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-border-subtle));\n}\n.lz-card-expand[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    background: transparent;\n    border: 1px dashed var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 6px 10px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.lz-card-expand[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n.lz-card-expand[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n.lz-empty[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    padding: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n@media (max-width: 700px) {\n    .lz-summary[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    .lz-summary-stats[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(3, 1fr); }\n    .lz-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; padding: 12px 14px; }\n}"] });
+        } }, dependencies: [i1.MJPageHeaderInteriorComponent, i1.MJRefreshButtonComponent, i1.MJEmptyStateComponent], styles: ["[_nghost-%COMP%] { display: block; height: 100%; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mj-inspector[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n\n.mj-inspector__content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n\n.mj-inspector__empty[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}", ".mj-inspector--solo[_ngcontent-%COMP%] { background: var(--mj-bg-page); }\n\n\n.lz-unavailable[_ngcontent-%COMP%] {\n    margin: 16px 20px;\n    padding: 14px 18px;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-subtle));\n    border-radius: 10px;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    line-height: 1.5;\n}\n.lz-unavailable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 18px;\n    margin-top: 2px;\n}\n\n\n.lz-summary[_ngcontent-%COMP%] {\n    padding: 18px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 24px;\n    align-items: center;\n}\n.lz-progress[_ngcontent-%COMP%] { min-width: 0; }\n.lz-progress-bar[_ngcontent-%COMP%] {\n    height: 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 100px;\n    overflow: hidden;\n    margin-bottom: 8px;\n}\n.lz-progress-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    background: linear-gradient(90deg, var(--mj-brand-primary-active) 0%, var(--mj-brand-primary) 100%);\n    border-radius: 100px;\n    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.lz-progress-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: baseline;\n    gap: 10px;\n}\n.lz-progress-pct[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    letter-spacing: -0.5px;\n    line-height: 1;\n}\n.lz-progress-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n}\n\n.lz-summary-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 14px;\n}\n.lz-summary-stat[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 10px 14px;\n    text-align: center;\n    min-width: 88px;\n}\n.lz-summary-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.4px;\n    line-height: 1;\n}\n.lz-summary-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n\n.lz-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n}\n.lz-filter[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border-radius: 100px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    cursor: pointer;\n    transition: all 0.12s;\n}\n.lz-filter[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n.lz-filter--active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.lz-filter-count[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 10.5px;\n    padding: 1px 7px;\n    border-radius: 100px;\n    font-weight: 600;\n}\n.lz-filter--active[_ngcontent-%COMP%]   .lz-filter-count[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    color: var(--mj-brand-primary);\n}\n.lz-spacer[_ngcontent-%COMP%] { flex: 1; }\n.lz-refreshed[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n\n.lz-grid[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n    gap: 12px;\n    align-content: start;\n}\n.lz-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n}\n.lz-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-default);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.lz-card--loaded[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-border-subtle));\n}\n\n.lz-card-head[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n}\n.lz-card-status[_ngcontent-%COMP%] {\n    width: 22px;\n    height: 22px;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.lz-card-status--loaded[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n.lz-card-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n.lz-card-title[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    display: block;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.lz-card-kcount[_ngcontent-%COMP%] {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n}\n\n.lz-load-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: 1px solid var(--mj-brand-primary);\n    padding: 6px 12px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: background 0.15s, transform 0.1s;\n    flex-shrink: 0;\n}\n.lz-load-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.lz-load-btn[_ngcontent-%COMP%]:active:not(:disabled) { transform: scale(0.97); }\n.lz-load-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.7;\n    cursor: wait;\n}\n\n.lz-card-keys[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    transition: max-height 0.3s ease-out;\n}\n.lz-card-keys--expanded[_ngcontent-%COMP%] {\n    max-height: none;\n}\n.lz-key[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    padding: 2px 7px;\n    border-radius: 5px;\n    line-height: 1.5;\n}\n.lz-card--loaded[_ngcontent-%COMP%]   .lz-key[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-border-subtle));\n}\n.lz-card-expand[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    background: transparent;\n    border: 1px dashed var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 6px 10px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.lz-card-expand[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n.lz-card-expand[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n.lz-empty[_ngcontent-%COMP%] {\n    grid-column: 1 / -1;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    padding: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n@media (max-width: 700px) {\n    .lz-summary[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    .lz-summary-stats[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(3, 1fr); }\n    .lz-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; padding: 12px 14px; }\n}"] });
 };
 LazyModuleStatusComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'LazyModuleStatusInspector')
@@ -456,7 +456,7 @@ LazyModuleStatusComponent = __decorate([
 export { LazyModuleStatusComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LazyModuleStatusComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-lazy-module-status', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Lazy loading inspector\"\n        Title=\"Lazy Loading\"\n        Subtitle=\"Code-split chunks: registered, loaded, and on-demand\">\n        <div actions>\n            <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n        </div>\n    </mj-page-header-interior>\n\n    @if (!Available) {\n        <div class=\"lz-unavailable\">\n            <i class=\"fa-solid fa-circle-info\"></i>\n            <div>\n                <strong>Lazy registry not available.</strong>\n                The shell hasn't published the LazyModuleRegistry to globalThis yet, or you're viewing this in an environment that doesn't use it.\n            </div>\n        </div>\n    } @else {\n        <div class=\"lz-summary\">\n            <div class=\"lz-progress\">\n                <div class=\"lz-progress-bar\">\n                    <div class=\"lz-progress-fill\" [style.width.%]=\"Stats.percent\"></div>\n                </div>\n                <div class=\"lz-progress-meta\">\n                    <span class=\"lz-progress-pct\">{{ Stats.percent }}%</span>\n                    <span class=\"lz-progress-label\">{{ Stats.loadedChunks }} of {{ Stats.chunkCount }} chunks loaded</span>\n                </div>\n            </div>\n            <div class=\"lz-summary-stats\">\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.totalKeys }}</div>\n                    <div class=\"lz-summary-label\">Registered keys</div>\n                </div>\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.loadedKeys }}</div>\n                    <div class=\"lz-summary-label\">Loaded keys</div>\n                </div>\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.chunkCount }}</div>\n                    <div class=\"lz-summary-label\">Total chunks</div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"lz-filter-bar\">\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'all'\"\n                    (click)=\"OnFilterClick('all')\">\n                All <span class=\"lz-filter-count\">{{ Stats.chunkCount }}</span>\n            </button>\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'loaded'\"\n                    (click)=\"OnFilterClick('loaded')\">\n                <i class=\"fa-solid fa-check-circle\"></i> Loaded <span class=\"lz-filter-count\">{{ Stats.loadedChunks }}</span>\n            </button>\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'not-loaded'\"\n                    (click)=\"OnFilterClick('not-loaded')\">\n                <i class=\"fa-regular fa-circle\"></i> Not loaded <span class=\"lz-filter-count\">{{ Stats.chunkCount - Stats.loadedChunks }}</span>\n            </button>\n            <span class=\"lz-spacer\"></span>\n            <span class=\"lz-refreshed\">Refreshed {{ LastRefreshedLabel }}</span>\n        </div>\n\n        <div class=\"lz-grid\">\n            @for (chunk of FilteredChunks; track TrackByChunk($index, chunk)) {\n                <div class=\"lz-card\" [class.lz-card--loaded]=\"chunk.loaded\">\n                    <div class=\"lz-card-head\">\n                        <div class=\"lz-card-status\" [class.lz-card-status--loaded]=\"chunk.loaded\">\n                            @if (chunk.loaded) {\n                                <i class=\"fa-solid fa-circle-check\"></i>\n                            } @else {\n                                <i class=\"fa-regular fa-circle\"></i>\n                            }\n                        </div>\n                        <div class=\"lz-card-title\">\n                            <code>{{ chunk.label }}</code>\n                            <span class=\"lz-card-kcount\">{{ chunk.keys.length }} entries</span>\n                        </div>\n                        @if (!chunk.loaded) {\n                            <button type=\"button\"\n                                    class=\"lz-load-btn\"\n                                    [disabled]=\"chunk.loading\"\n                                    (click)=\"OnForceLoad(chunk)\"\n                                    title=\"Force-load this chunk now\">\n                                @if (chunk.loading) {\n                                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading\n                                } @else {\n                                    <i class=\"fa-solid fa-bolt\"></i> Load\n                                }\n                            </button>\n                        }\n                    </div>\n                    <div class=\"lz-card-keys\" [class.lz-card-keys--expanded]=\"chunk.expanded\">\n                        @for (k of VisibleKeys(chunk); track k) {\n                            <span class=\"lz-key\">{{ k }}</span>\n                        }\n                    </div>\n                    @if (HiddenCount(chunk) > 0 || chunk.expanded) {\n                        <button class=\"lz-card-expand\"\n                                type=\"button\"\n                                (click)=\"ToggleChunkExpand(chunk)\">\n                            @if (chunk.expanded) {\n                                <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                            } @else {\n                                <i class=\"fa-solid fa-chevron-down\"></i> Show all {{ chunk.keys.length }} entries\n                            }\n                        </button>\n                    }\n                </div>\n            }\n            @if (FilteredChunks.length === 0) {\n                <mj-empty-state class=\"lz-empty\" Variant=\"no-results\" Size=\"compact\" Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No chunks match the current filter.\" />\n            }\n        </div>\n    }\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n\n/* Unavailable */\n.lz-unavailable {\n    margin: 16px 20px;\n    padding: 14px 18px;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-subtle));\n    border-radius: 10px;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    line-height: 1.5;\n}\n.lz-unavailable i {\n    color: var(--mj-status-warning);\n    font-size: 18px;\n    margin-top: 2px;\n}\n\n/* Summary */\n.lz-summary {\n    padding: 18px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 24px;\n    align-items: center;\n}\n.lz-progress { min-width: 0; }\n.lz-progress-bar {\n    height: 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 100px;\n    overflow: hidden;\n    margin-bottom: 8px;\n}\n.lz-progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #264FAF 0%, #0076b6 100%);\n    border-radius: 100px;\n    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.lz-progress-meta {\n    display: flex;\n    align-items: baseline;\n    gap: 10px;\n}\n.lz-progress-pct {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    letter-spacing: -0.5px;\n    line-height: 1;\n}\n.lz-progress-label {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n}\n\n.lz-summary-stats {\n    display: flex;\n    gap: 14px;\n}\n.lz-summary-stat {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 10px 14px;\n    text-align: center;\n    min-width: 88px;\n}\n.lz-summary-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.4px;\n    line-height: 1;\n}\n.lz-summary-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n/* Filter bar */\n.lz-filter-bar {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n}\n.lz-filter {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border-radius: 100px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    cursor: pointer;\n    transition: all 0.12s;\n}\n.lz-filter:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n.lz-filter--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.lz-filter-count {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 10.5px;\n    padding: 1px 7px;\n    border-radius: 100px;\n    font-weight: 600;\n}\n.lz-filter--active .lz-filter-count {\n    background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    color: var(--mj-brand-primary);\n}\n.lz-spacer { flex: 1; }\n.lz-refreshed {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* Grid */\n.lz-grid {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n    gap: 12px;\n    align-content: start;\n}\n.lz-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n}\n.lz-card:hover {\n    border-color: var(--mj-border-default);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.lz-card--loaded {\n    background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-border-subtle));\n}\n\n.lz-card-head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n}\n.lz-card-status {\n    width: 22px;\n    height: 22px;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.lz-card-status--loaded { color: var(--mj-status-success); }\n\n.lz-card-title {\n    flex: 1;\n    min-width: 0;\n}\n.lz-card-title code {\n    display: block;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.lz-card-kcount {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n}\n\n.lz-load-btn {\n    background: var(--mj-brand-primary);\n    color: white;\n    border: 1px solid var(--mj-brand-primary);\n    padding: 6px 12px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: background 0.15s, transform 0.1s;\n    flex-shrink: 0;\n}\n.lz-load-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.lz-load-btn:active:not(:disabled) { transform: scale(0.97); }\n.lz-load-btn:disabled {\n    opacity: 0.7;\n    cursor: wait;\n}\n\n.lz-card-keys {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    transition: max-height 0.3s ease-out;\n}\n.lz-card-keys--expanded {\n    max-height: none;\n}\n.lz-key {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    padding: 2px 7px;\n    border-radius: 5px;\n    line-height: 1.5;\n}\n.lz-card--loaded .lz-key {\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-border-subtle));\n}\n.lz-card-expand {\n    margin-top: 8px;\n    background: transparent;\n    border: 1px dashed var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 6px 10px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.lz-card-expand:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n.lz-card-expand i { font-size: 10px; }\n\n.lz-empty {\n    grid-column: 1 / -1;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    padding: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n@media (max-width: 700px) {\n    .lz-summary { grid-template-columns: 1fr; }\n    .lz-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); }\n    .lz-grid { grid-template-columns: 1fr; padding: 12px 14px; }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-lazy-module-status', template: "<div class=\"mj-inspector mj-inspector--solo\">\n    <mj-page-header-interior\n        Role=\"region\"\n        AriaLabel=\"Lazy loading inspector\"\n        Title=\"Lazy Loading\"\n        Subtitle=\"Code-split chunks: registered, loaded, and on-demand\">\n        <div actions>\n            <mj-refresh-button [Loading]=\"false\" (Clicked)=\"refresh()\"></mj-refresh-button>\n        </div>\n    </mj-page-header-interior>\n\n    @if (!Available) {\n        <div class=\"lz-unavailable\">\n            <i class=\"fa-solid fa-circle-info\"></i>\n            <div>\n                <strong>Lazy registry not available.</strong>\n                The shell hasn't published the LazyModuleRegistry to globalThis yet, or you're viewing this in an environment that doesn't use it.\n            </div>\n        </div>\n    } @else {\n        <div class=\"lz-summary\">\n            <div class=\"lz-progress\">\n                <div class=\"lz-progress-bar\">\n                    <div class=\"lz-progress-fill\" [style.width.%]=\"Stats.percent\"></div>\n                </div>\n                <div class=\"lz-progress-meta\">\n                    <span class=\"lz-progress-pct\">{{ Stats.percent }}%</span>\n                    <span class=\"lz-progress-label\">{{ Stats.loadedChunks }} of {{ Stats.chunkCount }} chunks loaded</span>\n                </div>\n            </div>\n            <div class=\"lz-summary-stats\">\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.totalKeys }}</div>\n                    <div class=\"lz-summary-label\">Registered keys</div>\n                </div>\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.loadedKeys }}</div>\n                    <div class=\"lz-summary-label\">Loaded keys</div>\n                </div>\n                <div class=\"lz-summary-stat\">\n                    <div class=\"lz-summary-value\">{{ Stats.chunkCount }}</div>\n                    <div class=\"lz-summary-label\">Total chunks</div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"lz-filter-bar\">\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'all'\"\n                    (click)=\"OnFilterClick('all')\">\n                All <span class=\"lz-filter-count\">{{ Stats.chunkCount }}</span>\n            </button>\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'loaded'\"\n                    (click)=\"OnFilterClick('loaded')\">\n                <i class=\"fa-solid fa-check-circle\"></i> Loaded <span class=\"lz-filter-count\">{{ Stats.loadedChunks }}</span>\n            </button>\n            <button type=\"button\"\n                    class=\"lz-filter\"\n                    [class.lz-filter--active]=\"Filter === 'not-loaded'\"\n                    (click)=\"OnFilterClick('not-loaded')\">\n                <i class=\"fa-regular fa-circle\"></i> Not loaded <span class=\"lz-filter-count\">{{ Stats.chunkCount - Stats.loadedChunks }}</span>\n            </button>\n            <span class=\"lz-spacer\"></span>\n            <span class=\"lz-refreshed\">Refreshed {{ LastRefreshedLabel }}</span>\n        </div>\n\n        <div class=\"lz-grid\">\n            @for (chunk of FilteredChunks; track TrackByChunk($index, chunk)) {\n                <div class=\"lz-card\" [class.lz-card--loaded]=\"chunk.loaded\">\n                    <div class=\"lz-card-head\">\n                        <div class=\"lz-card-status\" [class.lz-card-status--loaded]=\"chunk.loaded\">\n                            @if (chunk.loaded) {\n                                <i class=\"fa-solid fa-circle-check\"></i>\n                            } @else {\n                                <i class=\"fa-regular fa-circle\"></i>\n                            }\n                        </div>\n                        <div class=\"lz-card-title\">\n                            <code>{{ chunk.label }}</code>\n                            <span class=\"lz-card-kcount\">{{ chunk.keys.length }} entries</span>\n                        </div>\n                        @if (!chunk.loaded) {\n                            <button type=\"button\"\n                                    class=\"lz-load-btn\"\n                                    [disabled]=\"chunk.loading\"\n                                    (click)=\"OnForceLoad(chunk)\"\n                                    title=\"Force-load this chunk now\">\n                                @if (chunk.loading) {\n                                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading\n                                } @else {\n                                    <i class=\"fa-solid fa-bolt\"></i> Load\n                                }\n                            </button>\n                        }\n                    </div>\n                    <div class=\"lz-card-keys\" [class.lz-card-keys--expanded]=\"chunk.expanded\">\n                        @for (k of VisibleKeys(chunk); track k) {\n                            <span class=\"lz-key\">{{ k }}</span>\n                        }\n                    </div>\n                    @if (HiddenCount(chunk) > 0 || chunk.expanded) {\n                        <button class=\"lz-card-expand\"\n                                type=\"button\"\n                                (click)=\"ToggleChunkExpand(chunk)\">\n                            @if (chunk.expanded) {\n                                <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                            } @else {\n                                <i class=\"fa-solid fa-chevron-down\"></i> Show all {{ chunk.keys.length }} entries\n                            }\n                        </button>\n                    }\n                </div>\n            }\n            @if (FilteredChunks.length === 0) {\n                <mj-empty-state class=\"lz-empty\" Variant=\"no-results\" Size=\"compact\" Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No chunks match the current filter.\" />\n            }\n        </div>\n    }\n</div>\n", styles: [":host { display: block; height: 100%; }\n\n/*\n  Inspector shell \u2014 each Dev Tools sub-page wraps its body in .mj-inspector. The\n  chrome (title icon, title, subtitle, action buttons) was previously rendered\n  via .mj-inspector__header*, but that's been replaced by <mj-page-header-interior>\n  in every inspector template. Action buttons now use the mjButton directive\n  (variant=\"secondary\" / \"success\") so they inherit global button styling. App\n  State + Layout inspectors used to carry an inner left rail (.mj-inspector__body\n  + __sidebar + __nav-item) for L2 sections; that rail was retired 2026-05-19 in\n  favor of <mj-tab-nav> projected into the chrome's [toolbar] slot, matching\n  SystemDiagnostics and the API Keys tab strip. All inspectors are now \"solo\"\n  mode (no sidebar).\n*/\n.mj-inspector {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n    background: var(--mj-bg-page);\n    color: var(--mj-text-primary);\n    font-family: inherit;\n}\n\n/* Content area */\n.mj-inspector__content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-page);\n}\n.mj-inspector__content-head {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: var(--mj-bg-surface-card);\n}\n.mj-inspector__content-title {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n.mj-inspector__content-meta {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n.mj-inspector__editor {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n.mj-inspector__editor mj-code-editor {\n    flex: 1;\n    min-height: 0;\n    display: block;\n}\n\n/* Empty state */\n.mj-inspector__empty {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n}\n\n", ".mj-inspector--solo { background: var(--mj-bg-page); }\n\n/* Unavailable */\n.lz-unavailable {\n    margin: 16px 20px;\n    padding: 14px 18px;\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface-card));\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, var(--mj-border-subtle));\n    border-radius: 10px;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    line-height: 1.5;\n}\n.lz-unavailable i {\n    color: var(--mj-status-warning);\n    font-size: 18px;\n    margin-top: 2px;\n}\n\n/* Summary */\n.lz-summary {\n    padding: 18px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-subtle);\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 24px;\n    align-items: center;\n}\n.lz-progress { min-width: 0; }\n.lz-progress-bar {\n    height: 10px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 100px;\n    overflow: hidden;\n    margin-bottom: 8px;\n}\n.lz-progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, var(--mj-brand-primary-active) 0%, var(--mj-brand-primary) 100%);\n    border-radius: 100px;\n    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.lz-progress-meta {\n    display: flex;\n    align-items: baseline;\n    gap: 10px;\n}\n.lz-progress-pct {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--mj-brand-primary);\n    letter-spacing: -0.5px;\n    line-height: 1;\n}\n.lz-progress-label {\n    color: var(--mj-text-muted);\n    font-size: 12.5px;\n}\n\n.lz-summary-stats {\n    display: flex;\n    gap: 14px;\n}\n.lz-summary-stat {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 10px 14px;\n    text-align: center;\n    min-width: 88px;\n}\n.lz-summary-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.4px;\n    line-height: 1;\n}\n.lz-summary-label {\n    font-size: 10px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 0.5px;\n    margin-top: 4px;\n}\n\n/* Filter bar */\n.lz-filter-bar {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--mj-border-subtle);\n    background: var(--mj-bg-surface);\n}\n.lz-filter {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border-radius: 100px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    font-family: inherit;\n    cursor: pointer;\n    transition: all 0.12s;\n}\n.lz-filter:hover {\n    background: var(--mj-bg-surface-hover);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n.lz-filter--active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n.lz-filter-count {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 10.5px;\n    padding: 1px 7px;\n    border-radius: 100px;\n    font-weight: 600;\n}\n.lz-filter--active .lz-filter-count {\n    background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    color: var(--mj-brand-primary);\n}\n.lz-spacer { flex: 1; }\n.lz-refreshed {\n    font-size: 11px;\n    color: var(--mj-text-muted);\n}\n\n/* Grid */\n.lz-grid {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 16px 20px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n    gap: 12px;\n    align-content: start;\n}\n.lz-card {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;\n}\n.lz-card:hover {\n    border-color: var(--mj-border-default);\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n}\n.lz-card--loaded {\n    background: color-mix(in srgb, var(--mj-status-success) 4%, var(--mj-bg-surface));\n    border-color: color-mix(in srgb, var(--mj-status-success) 25%, var(--mj-border-subtle));\n}\n\n.lz-card-head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 10px;\n}\n.lz-card-status {\n    width: 22px;\n    height: 22px;\n    color: var(--mj-text-muted);\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n.lz-card-status--loaded { color: var(--mj-status-success); }\n\n.lz-card-title {\n    flex: 1;\n    min-width: 0;\n}\n.lz-card-title code {\n    display: block;\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 12.5px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.lz-card-kcount {\n    font-size: 10.5px;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n}\n\n.lz-load-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: 1px solid var(--mj-brand-primary);\n    padding: 6px 12px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 600;\n    cursor: pointer;\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    transition: background 0.15s, transform 0.1s;\n    flex-shrink: 0;\n}\n.lz-load-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 88%, black);\n}\n.lz-load-btn:active:not(:disabled) { transform: scale(0.97); }\n.lz-load-btn:disabled {\n    opacity: 0.7;\n    cursor: wait;\n}\n\n.lz-card-keys {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    transition: max-height 0.3s ease-out;\n}\n.lz-card-keys--expanded {\n    max-height: none;\n}\n.lz-key {\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-subtle);\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', Menlo, Consolas, monospace;\n    font-size: 10.5px;\n    padding: 2px 7px;\n    border-radius: 5px;\n    line-height: 1.5;\n}\n.lz-card--loaded .lz-key {\n    border-color: color-mix(in srgb, var(--mj-status-success) 20%, var(--mj-border-subtle));\n}\n.lz-card-expand {\n    margin-top: 8px;\n    background: transparent;\n    border: 1px dashed var(--mj-border-default);\n    color: var(--mj-text-secondary);\n    padding: 6px 10px;\n    border-radius: 7px;\n    font-size: 11.5px;\n    font-weight: 500;\n    cursor: pointer;\n    font-family: inherit;\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    transition: all 0.15s;\n}\n.lz-card-expand:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n.lz-card-expand i { font-size: 10px; }\n\n.lz-empty {\n    grid-column: 1 / -1;\n    text-align: center;\n    color: var(--mj-text-muted);\n    font-size: 13px;\n    padding: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n}\n\n@media (max-width: 700px) {\n    .lz-summary { grid-template-columns: 1fr; }\n    .lz-summary-stats { display: grid; grid-template-columns: repeat(3, 1fr); }\n    .lz-grid { grid-template-columns: 1fr; padding: 12px 14px; }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LazyModuleStatusComponent, { className: "LazyModuleStatusComponent", filePath: "src/DevTools/lazy-module-status.component.ts", lineNumber: 49 }); })();
 //# sourceMappingURL=lazy-module-status.component.js.map