/* Extracted from v5 index.html <style> block (lines 343-4149) in Phase 1 Step 2 */
/* Single <style> block, preserved verbatim */

      :root {
        --accent: #0052cc;
        --accent-hover: #0065ff;
        --accent-selected: #e9f2ff;
        --menu-active-bg: #ebecf0;
        --menu-dropdown-hover-bg: var(--accent-selected);
        --menu-dropdown-hover-text: #172b4d;
        --menu-dropdown-shortcut-hover-text: #6b778c;
        --bg-app: #f4f5f7;
        --surface: #ffffff;
        --surface-muted: #fafbfc;
        --surface-hover: #ebecf0;
        --surface-hover-strong: #f0f1f3;
        --surface-overlay: #ffffff;
        --surface-input: #ffffff;
        --border: #dfe1e6;
        --border-soft: #e8e8e8;
        --border-strong: #c1c7d0;
        --text: #172b4d;
        --text-muted: #6b778c;
        --text-subtle: #42526e;
        --text-soft: #97a0af;
        --text-inverse: #ffffff;
        --canvas-area-bg: #e8e8e8;
        --canvas-bg: #ffffff;
        --canvas-grid: #c0c0c0;
        --canvas-ruler-bg: #f4f5f7;
        --canvas-ruler-line: #97a0af;
        --canvas-ruler-border: #c1c7d0;
        --canvas-ruler-text: #6b778c;
        --shape-fill-default: #ffffff;
        --shape-stroke-default: #172b4d;
        --shape-text-default: #172b4d;
        --shape-icon: #42526e;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
        --overlay: rgba(0, 0, 0, 0.4);
        --selection-fill: rgba(0, 82, 204, 0.08);
        --connection-point-border: #ffffff;
        --connection-point-shadow: 0 0 3px rgba(0, 82, 204, 0.5);
        --connection-point-shadow-hover: 0 0 6px rgba(0, 82, 204, 0.8);
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        /* Required for `body { height: 100vh }` to behave correctly inside
         * Forge Custom UI iframes where the iframe parent auto-resizes. Without
         * explicit html{100%}, body's 100vh collapses to content size (min-content). */
        height: 100%;
      }
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        overflow: hidden;
        background: var(--bg-app);
        color: var(--text);
        display: flex;
        flex-direction: column;
        height: 100vh;
        /* Bug #35 cont. (2026-05-07): floor reduced 900px → 600px and
         * max-height added so body never extends beyond the Forge iframe's
         * actual size. Prior 900px floor + Forge's max viewport bucket
         * (~800px, undocumented) made body taller than its host iframe →
         * .left-panel-footer at body-bottom ended up below the iframe's
         * visible area on every screen smaller than 900px.
         *
         * Note: forge-architect verified 2026-05-07 that view.setDimensions
         * does NOT exist (and never will) — the prior comment promising a
         * future bridge replacement was misleading. Forge intentionally hides
         * the iframe-resizer transport. Floor + cap on body height is the
         * correct mechanism. */
        min-height: 600px;
        max-height: 100vh;
      }
      body.dark-mode {
        --accent: #7fb3ff;
        --accent-hover: #a7cdff;
        --bg-app: #10131a;
        --surface: #1d232f;
        --surface-muted: #232b38;
        --surface-hover: #313b4c;
        --surface-hover-strong: #39465a;
        --accent-selected: #30496f;
        --menu-active-bg: #39465a;
        --menu-dropdown-hover-bg: var(--accent-selected);
        --menu-dropdown-hover-text: #f4f6ff;
        --menu-dropdown-shortcut-hover-text: #d6dceb;
        --surface-overlay: #1d232f;
        --surface-input: #111722;
        --border: #3a4353;
        --border-soft: #495366;
        --border-strong: #566277;
        --text: #f4f6ff;
        --text-muted: #b7c0d1;
        --text-subtle: #d6dceb;
        --text-soft: #8d98ac;
        --canvas-area-bg: #111722;
        --canvas-bg: #18202b;
        --canvas-grid: #3a4a5e;
        --canvas-ruler-bg: #1d232f;
        --canvas-ruler-line: #66758b;
        --canvas-ruler-border: #3a4353;
        --canvas-ruler-text: #c6cede;
        --shape-fill-default: #273142;
        --shape-stroke-default: #e2e8f4;
        --shape-text-default: #f4f6ff;
        --shape-icon: #cfd7e6;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
        --overlay: rgba(0, 0, 0, 0.55);
        --connection-point-border: #1d232f;
      }
      body.whiteboard-mode {
        --bg-app: #e8eefb;
        --canvas-area-bg: #dde7fb;
        --canvas-bg: #f9fbff;
        --canvas-grid: rgba(54, 84, 170, 0.18);
      }
      body.dark-mode.whiteboard-mode {
        --bg-app: #0f1520;
        --canvas-area-bg: #121b29;
        --canvas-bg: #182233;
        --canvas-grid: rgba(156, 200, 255, 0.2);
      }
      body.high-contrast-mode {
        --surface: #ffffff;
        --surface-muted: #ffffff;
        --surface-hover: #e9edf5;
        --surface-hover-strong: #dce5f2;
        --surface-overlay: #ffffff;
        --surface-input: #ffffff;
        --border: #000000;
        --border-soft: #000000;
        --border-strong: #000000;
        --text: #000000;
        --text-muted: #111111;
        --text-subtle: #111111;
        --text-soft: #1f1f1f;
        --canvas-area-bg: #ffffff;
        --canvas-bg: #ffffff;
        --canvas-grid: #6b778c;
        --canvas-ruler-bg: #ffffff;
        --canvas-ruler-line: #000000;
        --canvas-ruler-border: #000000;
        --canvas-ruler-text: #000000;
        --shape-fill-default: #ffffff;
        --shape-stroke-default: #000000;
        --shape-text-default: #000000;
        --shape-icon: #000000;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --selection-fill: rgba(0, 82, 204, 0.18);
        --connection-point-shadow: 0 0 0 2px rgba(0, 82, 204, 0.75);
        --connection-point-shadow-hover: 0 0 0 3px rgba(0, 82, 204, 0.9);
      }
      body.dark-mode.high-contrast-mode {
        --bg-app: #000000;
        --surface: #000000;
        --surface-muted: #000000;
        --surface-hover: #151515;
        --surface-hover-strong: #202020;
        --surface-overlay: #000000;
        --surface-input: #000000;
        --border: #ffffff;
        --border-soft: #ffffff;
        --border-strong: #ffffff;
        --text: #ffffff;
        --text-muted: #ffffff;
        --text-subtle: #ffffff;
        --text-soft: #f0f0f0;
        --canvas-area-bg: #000000;
        --canvas-bg: #000000;
        --canvas-grid: #8f9bb3;
        --canvas-ruler-bg: #000000;
        --canvas-ruler-line: #ffffff;
        --canvas-ruler-border: #ffffff;
        --canvas-ruler-text: #ffffff;
        --shape-fill-default: #000000;
        --shape-stroke-default: #ffffff;
        --shape-text-default: #ffffff;
        --shape-icon: #ffffff;
        --selection-fill: rgba(76, 154, 255, 0.24);
        --connection-point-border: #000000;
        --connection-point-shadow: 0 0 0 2px rgba(76, 154, 255, 0.85);
        --connection-point-shadow-hover: 0 0 0 3px rgba(76, 154, 255, 1);
      }
      body.editor-theme-atlas {
        --accent: #0c66e4;
        --accent-hover: #1d7afc;
        --accent-selected: #e9f2ff;
        --menu-active-bg: #dfe7f7;
        --bg-app: #f1f5fb;
        --surface: #fbfcfe;
        --surface-muted: #f6f8fc;
        --surface-hover: #edf2fb;
        --surface-hover-strong: #e3ebf7;
        --surface-overlay: #ffffff;
        --surface-input: #ffffff;
        --border: #ccd6e5;
        --border-soft: #dde5ef;
        --border-strong: #b7c4d8;
        --text: #12315b;
        --text-muted: #52657d;
        --text-subtle: #344563;
        --canvas-area-bg: #e8eef8;
      }
      body.dark-mode.editor-theme-atlas {
        --accent: #7fb3ff;
        --accent-hover: #a7cdff;
        --accent-selected: rgba(127, 179, 255, 0.18);
        --menu-active-bg: #243553;
      }
      body.editor-theme-simple {
        --accent: #0c66e4;
        --accent-hover: #1d7afc;
        --accent-selected: #e9f2ff;
        --menu-active-bg: #dfe7f7;
        --bg-app: #eef3f9;
        --surface: #fbfcfe;
        --surface-muted: #f5f8fc;
        --surface-hover: #edf2fb;
        --surface-hover-strong: #e4ebf6;
        --surface-overlay: #ffffff;
        --surface-input: #ffffff;
        --border: #d0dae8;
        --border-soft: #e1e8f1;
        --border-strong: #bdcadd;
        --canvas-area-bg: #e9eef6;
      }
      body.dark-mode.editor-theme-simple {
        --accent: #7fb3ff;
        --accent-hover: #a7cdff;
        --accent-selected: rgba(127, 179, 255, 0.18);
        --menu-active-bg: #243553;
        --bg-app: #0e1521;
        --surface: #121c2b;
        --surface-muted: #162234;
        --surface-hover: #1b2a40;
        --surface-hover-strong: #20324c;
        --surface-overlay: #162234;
        --surface-input: #0c1521;
        --border: #273548;
        --border-soft: #324156;
        --border-strong: #425168;
        --text: #edf2ff;
        --text-muted: #b4c0d7;
        --text-subtle: #cbd6ef;
        --canvas-area-bg: #0f1725;
        --canvas-bg: #162133;
        --canvas-grid: #30425d;
        --canvas-ruler-bg: #121c2b;
        --canvas-ruler-line: #637795;
        --canvas-ruler-border: #273548;
        --canvas-ruler-text: #c8d3e5;
      }
      body.editor-theme-minimal {
        --accent: #0c66e4;
        --accent-hover: #1d7afc;
        --accent-selected: #e9f2ff;
        --bg-app: #eef2f7;
        --canvas-area-bg: #e6ebf3;
      }
      body.dark-mode.editor-theme-minimal {
        --bg-app: #0e1521;
        --canvas-area-bg: #111927;
      }
      body.editor-theme-dark {
        --accent: #8fb8ff;
        --accent-hover: #b3d4ff;
        --accent-selected: rgba(143, 184, 255, 0.18);
        --menu-active-bg: #1c2a3d;
        --bg-app: #0d1420;
        --surface: #121c2b;
        --surface-muted: #162234;
        --surface-hover: #1b2a40;
        --surface-hover-strong: #20324c;
        --surface-overlay: #162234;
        --surface-input: #0c1521;
        --border: #273548;
        --border-soft: #324156;
        --border-strong: #425168;
        --text: #edf2ff;
        --text-muted: #b4c0d7;
        --text-subtle: #cbd6ef;
        --canvas-area-bg: #0f1725;
        --canvas-bg: #162133;
        --canvas-grid: #30425d;
        --canvas-ruler-bg: #121c2b;
        --canvas-ruler-line: #637795;
        --canvas-ruler-border: #273548;
        --canvas-ruler-text: #c8d3e5;
        --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28);
        --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.36);
      }
      body.editor-theme-sketch {
        --accent: #6554c0;
        --accent-hover: #8777d9;
        --accent-selected: #eee8ff;
        --menu-active-bg: #e8e2fb;
      }
      body.dark-mode.editor-theme-sketch {
        --accent: #a99af6;
        --accent-hover: #c3baff;
        --accent-selected: rgba(169, 154, 246, 0.2);
        --menu-active-bg: #30284d;
      }
      body.high-contrast-mode .menu-dropdown,
      body.high-contrast-mode .context-menu,
      body.high-contrast-mode .modal,
      body.high-contrast-mode .revision-history-preview canvas {
        box-shadow: none;
      }
      /* ===== MENU BAR ===== */
      .menubar {
        display: flex;
        align-items: center;
        height: 32px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 0 8px;
        font-size: 13px;
      }
      .menubar .menu-item {
        position: relative;
        padding: 4px 10px;
        cursor: pointer;
        border-radius: 3px;
        color: var(--text);
      }
      .menubar .menu-item:hover,
      .menubar .menu-item[aria-expanded="true"] {
        background: var(--menu-active-bg);
      }
      .diagram-now-marketplace-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 12px;
        margin-right: 8px;
        border-radius: 999px;
        background: var(--accent, #0c66e4);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
      }
      .diagram-now-marketplace-cta:hover,
      .diagram-now-marketplace-cta:focus-visible {
        background: var(--accent-hover, #0052cc);
        color: #ffffff;
        outline: 2px solid color-mix(in srgb, var(--accent, #0c66e4) 30%, transparent);
        outline-offset: 2px;
      }
      body.forge-confluence-mode .diagram-now-marketplace-cta,
      body.forge-viewer-shell .diagram-now-marketplace-cta,
      body.forge-config-active .diagram-now-marketplace-cta {
        display: none !important;
      }
      .editor-theme-atlas .menubar {
        padding: 0 10px;
        gap: 4px;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--surface) 92%, #e9f2ff 8%),
          var(--surface)
        );
      }
      .editor-theme-atlas .menubar .menu-item,
      .editor-theme-minimal .menubar .menu-item,
      .editor-theme-dark .menubar .menu-item {
        border-radius: 999px;
      }
      .editor-theme-atlas .menubar .menu-item {
        font-weight: 600;
      }
      .editor-theme-simple .menubar {
        display: none;
      }
      .menu-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--surface-overlay);
        border: 1px solid var(--border);
        border-radius: 4px;
        box-shadow: var(--shadow-md);
        min-width: 200px;
        z-index: 1000;
        padding: 4px 0;
      }
      .menu-dropdown.show {
        display: block;
      }
      .menu-dropdown .menu-entry {
        padding: 6px 16px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: var(--text);
        text-decoration: none;
      }
      .menu-dropdown .menu-entry:hover,
      .menu-dropdown .menu-entry:focus-visible {
        background: var(--menu-dropdown-hover-bg);
        color: var(--menu-dropdown-hover-text);
      }
      .menu-dropdown .menu-entry:hover .shortcut,
      .menu-dropdown .menu-entry:focus-visible .shortcut {
        color: var(--menu-dropdown-shortcut-hover-text);
      }
      .menu-dropdown .menu-entry .shortcut {
        color: var(--text-muted);
        margin-left: 24px;
      }
      /* Menu toggle switch */
      .menu-toggle {
        display: inline-block;
        width: 28px;
        height: 14px;
        background: var(--border-strong, #c1c7d0);
        border-radius: 7px;
        position: relative;
        vertical-align: middle;
        margin-left: auto;
        flex-shrink: 0;
        transition: background 0.15s;
      }
      .menu-toggle::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: left 0.15s;
      }
      .menu-toggle.on {
        background: var(--accent, #0052cc);
      }
      .menu-toggle.on::after {
        left: 16px;
      }
      .menu-dropdown .menu-entry:hover .menu-toggle:not(.on) {
        background: var(--text-soft, #97a0af);
      }
      .menu-dropdown .menu-entry.disabled {
        opacity: 0.45;
        pointer-events: none;
      }
      .menu-dropdown .menu-sep {
        height: 1px;
        background: var(--border);
        margin: 4px 0;
      }
      /* ===== TOOLBAR ===== */
      .toolbar {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 4px 8px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
      }
      .toolbar button,
      .toolbar select {
        padding: 4px 8px;
        border: 1px solid transparent;
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
        font-size: 12px;
        color: var(--text);
        height: 28px;
      }
      .toolbar button:hover {
        background: var(--surface-hover);
        border-color: var(--border);
      }
      .toolbar button:focus-visible,
      .toolbar select:focus-visible,
      .shape-item:focus-visible,
      .page-tab:focus-visible,
      .page-tab-add:focus-visible,
      .modal .template-item:focus-visible,
      .modal .btn:focus-visible,
      .panel-button:focus-visible,
      .zoom-controls button:focus-visible,
      .licensed-library-btn:focus-visible,
      .layer-btn:focus-visible,
      .presentation-controls button:focus-visible {
        outline: 3px solid var(--accent);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.18);
      }
      .toolbar button.active {
        background: var(--accent);
        color: var(--text-inverse);
        border-color: var(--accent);
      }
      .toolbar button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .toolbar button:disabled:hover {
        background: transparent;
        border-color: transparent;
      }
      .toolbar button.icon-btn {
        width: 28px;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .toolbar button.icon-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .toolbar button.icon-btn svg rect,
      .toolbar button.icon-btn svg circle {
        fill: currentColor;
        stroke: none;
      }
      .toolbar #tb-select svg rect {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.2;
      }
      .toolbar .sep {
        width: 1px;
        height: 20px;
        background: var(--border);
        margin: 0 3px;
      }
      .toolbar select {
        border: 1px solid var(--border);
        padding: 2px 4px;
        background: var(--surface-input);
      }
      .toolbar input[type="color"] {
        width: 28px;
        height: 28px;
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 2px;
        cursor: pointer;
        background: var(--surface-input);
      }
      .toolbar input[type="number"] {
        width: 50px;
        height: 28px;
        border: 1px solid var(--border);
        border-radius: 3px;
        padding: 2px 4px;
        font-size: 12px;
        background: var(--surface-input);
        color: var(--text);
      }
      .toolbar .comments-launch {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
      }
      .toolbar .comments-launch svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .toolbar .comments-launch-label {
        white-space: nowrap;
      }
      .toolbar-shell {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
        min-width: 0;
      }
      .simple-toolbar-leading,
      .simple-toolbar-trailing {
        display: none;
      }
      .simple-toolbar-menu {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 4px 12px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
        white-space: nowrap;
      }
      .simple-toolbar-menu:hover,
      .simple-toolbar-menu[aria-expanded="true"] {
        background: var(--surface-hover);
        border-color: var(--border);
      }
      .simple-toolbar-menu .menu-dropdown {
        top: calc(100% + 6px);
      }
      #simpleToolbarMoreMenu .menu-dropdown {
        left: auto;
        right: 0;
      }
      .simple-toolbar-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 28px;
        padding: 4px 12px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
        white-space: nowrap;
      }
      .simple-toolbar-button:hover {
        background: var(--surface-hover);
        border-color: var(--border);
      }
      /* Primary variant for a colored CTA like Publish. Same shape as
         regular button but filled with the theme's accent. */
      .simple-toolbar-button--primary {
        background: #0052cc;
        color: #ffffff;
        border-color: #0052cc;
      }
      .simple-toolbar-button--primary:hover {
        background: #0747a6;
        border-color: #0747a6;
      }
      /* Forge config-surface actions (Close + Publish) live in the editor
         skeleton HTML but stay hidden until editor-boot.js flips
         `body.forge-config-active` — which it does only when the macro is
         mounted inside Confluence's config iframe (pencil click). */
      .forge-config-only {
        display: none !important;
      }
      body.forge-config-active .forge-config-only {
        display: inline-flex !important;
      }
      /* Subtle save-status indicator next to Close + Publish. Stays gray
         on success (just informational), turns red on failure so user
         notices. Hidden until first autosave fires. */
      .dn-save-status {
        align-items: center;
        font-size: 12px;
        color: #6B778C;
        padding: 0 8px;
        white-space: nowrap;
        font-family: inherit;
      }
      .dn-save-status[data-state="dirty"] {
        color: #974F0C;
      }
      .dn-save-status[data-state="saving"] {
        color: #6B778C;
        font-style: italic;
      }
      .dn-save-status[data-state="failed"] {
        color: #DE350B;
      }
      /* Override forge-config-only's !important inline-flex when [hidden]
         attribute is set. Needs body.forge-config-active prefix to MATCH
         forge-config-only's specificity (0,2,1) + extra class (0,3,1) to
         win. Both rules use !important so specificity decides. */
      body.forge-config-active .dn-save-status[hidden] {
        display: none !important;
      }
      /* Confluence macro editors keep the underlying grid implementation
         (snap, size, export behavior) but hide the visible Grid toggles so
         the standalone editor can still expose them. */
      body.forge-confluence-mode .forge-confluence-hide-grid {
        display: none !important;
      }
      .editor-theme-atlas .toolbar,
      .editor-theme-atlas .workspace-nav {
        background: color-mix(in srgb, var(--surface) 88%, transparent);
      }
      .editor-theme-minimal .menubar,
      .editor-theme-minimal .toolbar {
        margin: 10px 12px 0;
        width: fit-content;
        max-width: calc(100% - 24px);
        border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
        background: color-mix(in srgb, var(--surface-overlay) 93%, transparent);
        backdrop-filter: blur(10px);
      }
      .editor-theme-minimal .menubar {
        padding: 0 10px;
        gap: 4px;
      }
      .editor-theme-minimal .toolbar {
        padding: 6px 10px;
        gap: 4px;
      }
      .editor-theme-simple .toolbar {
        gap: 12px;
        padding: 8px 14px;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--surface) 94%, #ffffff 6%),
          color-mix(in srgb, var(--surface) 88%, transparent)
        );
      }
      .editor-theme-simple .simple-toolbar-leading,
      .editor-theme-simple .simple-toolbar-trailing {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }
      .editor-theme-simple .simple-toolbar-center {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1 1 520px;
        min-width: 0;
        padding: 4px 8px;
        border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--surface-overlay) 94%, transparent);
        box-shadow: var(--shadow-sm);
      }
      .editor-theme-simple .toolbar .sep,
      .editor-theme-simple .toolbar .toolbar-label,
      .editor-theme-simple #tb-fill,
      .editor-theme-simple #tb-stroke,
      .editor-theme-simple #tb-lineWidth,
      .editor-theme-simple #tb-fontSize,
      .editor-theme-simple #tb-fontFamily,
      .editor-theme-simple .toolbar [data-click-action="alignShapes"],
      .editor-theme-simple .toolbar [data-click-action="distributeH"],
      .editor-theme-simple .toolbar [data-click-action="distributeV"] {
        display: none !important;
      }
      .editor-theme-simple .toolbar button,
      .editor-theme-simple .toolbar select,
      .editor-theme-simple .toolbar input[type="color"] {
        border-radius: 999px;
      }
      .editor-theme-simple .workspace-nav {
        padding: 6px 12px;
        background: color-mix(in srgb, var(--surface) 90%, transparent);
      }
      .editor-theme-dark .menubar,
      .editor-theme-dark .toolbar,
      .editor-theme-dark .workspace-nav,
      .editor-theme-dark .status-bar {
        background: color-mix(in srgb, var(--surface) 96%, #05070c 4%);
        border-color: var(--border);
      }
      .editor-theme-sketch .menubar,
      .editor-theme-sketch .toolbar {
        box-shadow: var(--shadow-sm);
      }
      .comment-count-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: #ff5630;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
      }
      .comment-count-badge[data-state="resolved"] {
        background: #e3fcef;
        color: #006644;
      }
      .comment-count-badge.is-hidden {
        display: none;
      }
      body.dark-mode .comment-count-badge[data-state="resolved"] {
        background: #123524;
        color: #7ee2b8;
      }
      .toolbar-label,
      .themed-muted {
        color: var(--text-muted);
      }
      /* ===== MAIN LAYOUT ===== */
      .workspace-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        min-height: 36px;
      }
      .main {
        display: flex;
        flex: 1;
        min-height: 0;
      }
      body.whiteboard-mode .main {
        position: relative;
      }
      .editor-theme-minimal .workspace-nav {
        padding: 10px 16px 6px;
        background: transparent;
        border-bottom: none;
      }
      .editor-theme-minimal .main {
        position: relative;
        padding: 0 12px 12px;
        gap: 12px;
      }
      /* ===== LEFT PANEL (Shape Libraries) ===== */
      .left-panel {
        --palette-column-count: 3;
        width: 220px;
        background: var(--surface);
        border-right: 1px solid var(--border);
        flex-shrink: 0;
        /* Bug #35 cont. (2026-05-07): canonical "fixed-footer with
         * scrollable content" layout. .left-panel is a flex column that
         * fills its row-cell in .main; .left-panel-scroll grows to take
         * remaining space and scrolls; .left-panel-footer is a flex sibling
         * that never shrinks, so More Shapes button is always visible
         * regardless of how many sections are above it. */
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
      }
      .left-panel-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
      }
      /* Sidebar category grouping (2026-05-08).
       * applySidebarCategoryGrouping() in main.js wraps panel-sections
       * under `.panel-category[data-category="<id>"]` containers, each
       * preceded by an uppercase header that mirrors the More Shapes
       * modal grouping (CORE / SYSTEM / PLATFORM / ENGINEERING / UI /
       * ICONS). Personal section (Scratchpad) stays above the categories
       * WITHOUT a header — single-pinned-item header is visual overhead.
       * Empty categories collapse via .panel-category--empty so a user
       * who disabled all libraries in one bucket doesn't see a stale
       * header with nothing under it. */
      .panel-category {
        display: flex;
        flex-direction: column;
      }
      .panel-category-header {
        padding: 12px 12px 6px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        border-top: 1px solid var(--border);
        background: transparent;
      }
      .panel-category:first-of-type > .panel-category-header {
        border-top: none;
      }
      .panel-category--empty {
        display: none;
      }
      .panel-resizer {
        width: 4px;
        flex: 0 0 4px;
        cursor: col-resize;
        background: rgba(9, 30, 66, 0.08);
        transition: background 0.15s;
      }
      .panel-resizer:hover,
      .panel-resizer.dragging {
        background: var(--accent-hover);
      }
      .editor-theme-atlas .panel-resizer {
        background: rgba(12, 102, 228, 0.12);
      }
      .editor-theme-dark .panel-resizer {
        background: rgba(143, 184, 255, 0.12);
      }
      body.panel-resizing,
      body.panel-resizing * {
        cursor: col-resize !important;
        user-select: none !important;
      }
      body.panel-dragging,
      body.panel-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
      }
      .panel-section {
        border-bottom: 1px solid var(--border);
      }
      /*
       * Phase D.AC (2026-05-05) — Manage link inside Scratchpad heading.
       * Standalone "Manage…" bar above sections looked disconnected from
       * the Scratchpad section it manages. Now the link is appended
       * INSIDE the Scratchpad section's .panel-heading (post-upgrade)
       * as a right-aligned sibling of the toggle button. Only on the
       * canonical Scratchpad section — custom user libraries don't get
       * this link to keep their headers clean.
       *
       * Heading becomes a flex row so [button.panel-header] takes
       * remaining space and [button.user-libraries-manage-link] sits
       * on the right. Both are buttons; the toggle owns most of the
       * row, the manage link is small + muted.
       */
      .panel-section[data-user-library-kind="scratchpad"] .panel-heading {
        display: flex;
        align-items: stretch;
      }
      .panel-section[data-user-library-kind="scratchpad"] .panel-heading > .panel-header {
        flex: 1 1 auto;
      }
      .user-libraries-manage-link {
        flex: 0 0 auto;
        align-self: center;
        margin: 0 8px 0 4px;
        background: none;
        border: none;
        padding: 4px 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--accent);
        cursor: pointer;
        text-decoration: underline;
      }
      .user-libraries-manage-link:hover {
        color: var(--accent);
      }
      .user-libraries-manage-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .left-panel .panel-section {
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        background: var(--surface);
        margin: 0 6px 6px;
        width: calc(100% - 12px);
      }
      .left-panel .panel-section .panel-header {
        width: 100%;
        border: none;
      }
      .panel-header {
        padding: 8px 12px;
        font-size: 11px;
        color: var(--text);
        text-transform: uppercase;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-muted);
      }
      .panel-header:hover {
        background: var(--surface-hover-strong);
      }
      .panel-header:focus-visible,
      .menubar .menu-item:focus-visible,
      .menu-dropdown .menu-entry:focus-visible,
      .context-menu .ctx-item:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .panel-header .arrow {
        transition: transform 0.2s;
      }
      .panel-header .arrow.collapsed {
        transform: rotate(-90deg);
      }
      .left-panel .panel-body {
        padding: 4px 8px;
        display: grid;
        grid-template-columns: repeat(
          var(--palette-column-count),
          minmax(0, 1fr)
        );
        gap: 3px;
      }
      .panel-body.collapsed {
        display: none;
      }
      .shape-item {
        width: 100%;
        aspect-ratio: 1.3;
        border: 1px solid var(--border-soft);
        border-radius: 3px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface);
        transition: all 0.15s;
      }
      .shape-item.generated-shape-item {
        aspect-ratio: auto;
        min-height: 72px;
        padding: 6px 4px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        overflow: hidden;
      }
      .shape-item:hover {
        border-color: var(--accent);
        background: var(--accent-selected);
      }
      .shape-item:focus-visible {
        border-color: var(--accent);
        background: var(--accent-selected);
      }
      .shape-item[draggable="true"] {
        cursor: grab;
      }
      .shape-item[draggable="true"]:active {
        cursor: grabbing;
        opacity: 0.6;
      }
      .shape-item svg:not(.bundled-icon-preview-svg) {
        width: 36px;
        height: 28px;
        stroke: var(--shape-icon);
        stroke-width: 1.5;
        fill: none;
      }
      .shape-item svg.bundled-icon-preview-svg {
        width: 36px;
        height: 28px;
        display: block;
      }
      .shape-item img {
        width: 36px;
        height: 28px;
        object-fit: contain;
        display: block;
      }
      .shape-item.generated-shape-item img {
        flex: 0 0 auto;
      }
      .generated-shape-item-label {
        width: 100%;
        font-size: 9px;
        line-height: 1.2;
        color: var(--text-muted);
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
        text-wrap: balance;
      }
      .shape-item.generated-shape-item:hover .generated-shape-item-label,
      .shape-item.generated-shape-item:focus-visible
        .generated-shape-item-label {
        color: var(--text);
      }
      .shape-item.licensed-shape-item {
        padding: 6px;
      }
      /*
       * Phase D.R (2026-05-05) — specificity bump.
       * Earlier `.licensed-library-panel { display: block }` (specificity
       * 0,1,0) lost the cascade fight against
       * `.left-panel .panel-body { display: grid; grid-template-columns:
       * repeat(var(--palette-column-count), minmax(0, 1fr)) }` (0,2,0).
       * The AWS panel-body silently became a 3-col grid; the single
       * .licensed-library-state child landed in column 1 (~33% of the
       * panel) and our inner .licensed-library-grid divided that 33%
       * by 3 — hence the cluster-on-the-left, right-half-empty render.
       *
       * Two-class selector below has the same specificity (0,2,0) and
       * sits later in the cascade so it wins. Restores the intended
       * block layout — `.licensed-library-state` then takes 100% of the
       * panel-body, and the inner grid distributes 1fr columns across
       * the full panel width.
       */
      /*
       * Phase D.AA (2026-05-05) — :not(.collapsed) gate added.
       *
       * The specificity of `.left-panel .panel-body.licensed-library-panel`
       * (0,3,0) is higher than `.panel-body.collapsed { display: none }`
       * (0,2,0). Without the :not(.collapsed) gate, my v2.145.0 rule
       * silently kept the licensed library panel visible even after the
       * collapsed class was correctly applied to body — DOM said
       * collapsed, CSS said display:block. Users saw icons stay visible
       * after clicking to collapse and reported "doesn't collapse".
       *
       * Confirmed via runtime trace (mode=editor): after 750ms body had
       * .collapsed class but section icons remained on screen.
       *
       * :not(.collapsed) opts this rule out when the body is collapsed,
       * letting the (0,2,0) display:none rule take effect.
       */
      .left-panel .panel-body.licensed-library-panel:not(.collapsed) {
        display: block;
        padding: 4px;
      }
      .licensed-library-state {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      /* Phase D.O — licensed library section is now minimal: just the
       * icon grid for installed packs, or a single link for not-yet-
       * installed. The verbose "Official icons imported / Use Manage
       * Import to..." card is gone. Tighter padding gives the grid
       * room for 2+ columns in the typical narrow sidebar.
       */
      .licensed-library-link {
        display: inline-block;
        padding: 2px 0;
        color: var(--accent);
        font-size: 12px;
        text-decoration: underline;
        cursor: pointer;
      }
      .licensed-library-link:hover {
        text-decoration: none;
      }
      .licensed-library-loading {
        font-size: 11px;
        color: var(--text-muted);
        padding: 4px 0;
      }
      .licensed-library-card {
        border: 1px dashed var(--border);
        border-radius: 6px;
        padding: 10px;
        background: var(--surface-muted);
      }
      .licensed-library-card h5 {
        font-size: 12px;
        color: var(--text);
        margin-bottom: 6px;
      }
      .licensed-library-card p {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.45;
      }
      .licensed-library-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
      }
      .licensed-library-btn {
        padding: 6px 10px;
        border: 1px solid var(--accent);
        border-radius: 4px;
        background: var(--accent);
        color: var(--text-inverse);
        cursor: pointer;
        font-size: 12px;
        line-height: 1.2;
      }
      .licensed-library-btn:hover {
        filter: brightness(0.98);
      }
      .licensed-library-btn.secondary {
        background: var(--surface-input);
        color: var(--text);
        border-color: var(--border);
      }
      .licensed-library-btn.secondary:hover {
        background: var(--surface-hover);
      }
      .licensed-library-btn:disabled {
        opacity: 0.55;
        cursor: wait;
      }
      .licensed-library-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--text-muted);
      }
      .licensed-library-grid {
        display: grid;
        /* Phase D.O — match the rest of the left panel: use the user's
         * --palette-column-count (defaults to 3) so the icon grid keeps
         * the same density as Cisco / IBM Carbon / built-in libraries.
         * Was `repeat(auto-fill, minmax(56px, 1fr))` which forced a
         * single column in the typical ~120 px sidebar.
         *
         * Phase D.Q (2026-05-05) — explicit width:100% needed because
         * .licensed-library-state is a flex column and its grid child
         * was defaulting to its content's intrinsic min-width (3×~40 px
         * shape-items) instead of stretching to the panel width. With
         * width:100% the 1fr columns expand to fill the section width. */
        width: 100%;
        grid-template-columns: repeat(var(--palette-column-count, 3), minmax(0, 1fr));
        gap: 3px;
      }
      .licensed-library-spinner {
        width: 14px;
        height: 14px;
        border: 2px solid var(--border-soft);
        border-top-color: var(--accent);
        border-radius: 50%;
        display: inline-block;
        animation: licensed-spin 0.8s linear infinite;
      }
      .licensed-library-spinner-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text);
      }
      .licensed-library-error {
        font-size: 11px;
        color: #de350b;
        line-height: 1.45;
      }
      @keyframes licensed-spin {
        to {
          transform: rotate(360deg);
        }
      }
      /* ===== INLINE TEXT EDITOR ===== */
      #inlineTextEditorFrame {
        position: absolute;
        display: none;
        flex-direction: column;
        justify-content: center;
        background: transparent;
        border: 2px solid var(--accent);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 520;
        overflow: hidden;
      }
      #inlineTextEditor,
      #inlineTextHtmlEditor {
        width: 100%;
        max-height: 100%;
        outline: none;
        border: none;
        background: transparent;
        color: var(--shape-text-default);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.3;
        caret-color: var(--accent);
        overflow: auto;
      }
      #inlineTextEditor:empty:before {
        content: attr(data-placeholder);
        color: var(--text-soft);
      }
      #inlineTextHtmlEditor {
        display: none;
        resize: none;
        font:
          12px/1.5 ui-monospace,
          SFMono-Regular,
          Menlo,
          monospace;
        white-space: pre;
        overflow-wrap: normal;
        word-break: normal;
        color: var(--text);
      }
      #inlineTextEditorFrame.html-mode #inlineTextEditor {
        display: none !important;
      }
      #inlineTextEditorFrame.html-mode #inlineTextHtmlEditor {
        display: block;
      }
      #inlineTextToolbar {
        position: absolute;
        display: none;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        background: var(--surface-overlay);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 530;
      }
      #inlineTextToolbar button,
      #inlineTextToolbar select,
      #inlineTextToolbar input[type="color"] {
        height: 30px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
        color: var(--text);
      }
      #inlineTextToolbar button {
        min-width: 30px;
        padding: 0 8px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
      }
      #inlineTextToolbar button.icon-btn {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #inlineTextToolbar button.icon-btn svg,
      .right-panel .icon-toggle-group button svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
      }
      #inlineTextToolbar button.icon-btn svg rect,
      #inlineTextToolbar button.icon-btn svg circle,
      .right-panel .icon-toggle-group button svg rect,
      .right-panel .icon-toggle-group button svg circle {
        fill: currentColor;
        stroke: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #inlineTextToolbar button:hover {
        background: var(--surface-hover);
      }
      #inlineTextToolbar button.active {
        background: var(--accent);
        color: var(--text-inverse);
        border-color: var(--accent);
      }
      #inlineTextToolbar button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      #inlineTextToolbar .sep {
        width: 1px;
        height: 20px;
        background: var(--border);
        margin: 0 1px;
      }
      #inlineTextToolbar select {
        padding: 0 8px;
        font-size: 12px;
      }
      #inlineTextToolbar input[type="color"] {
        width: 34px;
        padding: 3px;
        cursor: pointer;
      }
      /* ===== CONNECTION POINTS ===== */
      .conn-point {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid var(--connection-point-border);
        cursor: crosshair;
        z-index: 100;
        display: none;
        transform: translate(-50%, -50%);
        box-shadow: var(--connection-point-shadow);
      }
      .conn-point:hover {
        background: var(--accent-hover);
        box-shadow: var(--connection-point-shadow-hover);
        animation: conn-pulse 1s infinite;
      }
      @keyframes conn-pulse {
        0%,
        100% {
          box-shadow: var(--connection-point-shadow);
        }
        50% {
          box-shadow: 0 0 10px rgba(0, 82, 204, 0.8);
        }
      }
      /* ===== MINIMAP ===== */
      #minimap {
        position: absolute;
        bottom: 32px;
        right: 8px;
        width: 160px;
        height: 120px;
        border: 1px solid var(--border);
        background: var(--surface-overlay);
        z-index: 50;
        box-shadow: var(--shadow-sm);
        border-radius: 4px;
        overflow: hidden;
      }
      #minimapCanvas {
        width: 100%;
        height: 100%;
      }
      /* ===== CANVAS AREA ===== */
      .canvas-area {
        flex: 1;
        position: relative;
        overflow: hidden;
        background: var(--canvas-area-bg);
      }
      .editor-theme-minimal .canvas-area,
      .editor-theme-dark .canvas-area {
        box-shadow: inset 0 0 0 1px rgba(9, 30, 66, 0.08);
      }
      .editor-theme-minimal .canvas-area {
        border-radius: 20px;
      }
      #canvas {
        position: absolute;
        top: 0;
        left: 0;
        cursor: crosshair;
        will-change: transform;
      }
      /* ===== RIGHT PANEL (Properties) ===== */
      .right-panel {
        width: 220px;
        background: var(--surface);
        border-left: 1px solid var(--border);
        overflow: hidden;
        flex-shrink: 0;
        padding: 8px;
        color: var(--text);
        display: flex;
        flex-direction: column;
        min-height: 0;
        box-sizing: border-box;
      }
      .editor-theme-atlas .left-panel,
      .editor-theme-atlas .right-panel,
      .editor-theme-dark .left-panel,
      .editor-theme-dark .right-panel {
        background: var(--surface-muted);
      }
      .right-panel h4 {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        margin: 8px 0 4px;
      }
      .right-panel label {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        margin: 4px 0 2px;
      }
      .right-panel input,
      .right-panel select {
        width: 100%;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 3px;
        font-size: 12px;
        margin-bottom: 4px;
        background: var(--surface-input);
        color: var(--text);
      }
      .right-panel input[type="color"] {
        height: 28px;
        padding: 2px;
      }
      .right-panel input[type="range"] {
        padding: 0;
      }
      .right-panel .range-value {
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.3;
        text-align: right;
        margin: -2px 0 4px;
      }
      .panel-heading {
        margin: 0;
      }
      .side-panel-title {
        margin: 0 0 8px;
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .right-panel-chrome {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .right-panel-chrome .side-panel-title {
        margin: 0;
      }
      .right-panel-drag-handle {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
      }
      .right-panel.is-floating .right-panel-chrome {
        cursor: move;
        user-select: none;
      }
      .right-panel-chrome.dragging {
        cursor: grabbing;
      }
      .side-panel-title-button {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        background: none;
        border: none;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        cursor: pointer;
      }
      .side-panel-title-button:hover {
        color: var(--text);
      }
      .side-panel-title-button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .right-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-right: 2px;
      }
      .right-panel.is-minimized .right-panel-body {
        display: none;
      }
      .right-panel-minimize-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface-input);
        color: var(--text);
        cursor: pointer;
      }
      .right-panel-minimize-button:hover {
        background: var(--surface-hover);
      }
      .right-panel-minimize-button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .right-panel-minimize-button[hidden] {
        display: none !important;
      }
      .right-panel-minimize-icon {
        display: block;
        font-size: 11px;
        line-height: 1;
        transition: transform 0.2s ease;
      }
      .right-panel-minimize-button.is-minimized .right-panel-minimize-icon {
        transform: rotate(180deg);
      }
      .right-panel .panel-section {
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
        background: var(--surface);
        margin-bottom: 8px;
      }
      .right-panel .panel-section:last-of-type {
        margin-bottom: 0;
      }
      .right-panel .panel-header {
        width: 100%;
        border: none;
        padding: 10px 12px;
        background: var(--surface-muted);
        font-size: 11px;
        letter-spacing: 0.04em;
      }
      .right-panel .panel-body {
        display: block;
        padding: 10px 12px;
      }
      .right-panel .panel-body.collapsed {
        display: none;
      }
      .right-panel .props-grid {
        display: grid;
        gap: 8px;
      }
      .right-panel .props-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .right-panel .props-stack {
        display: grid;
        gap: 10px;
      }
      .right-panel .props-field {
        display: grid;
        gap: 2px;
      }
      .right-panel .props-field label {
        margin: 0;
      }
      .right-panel .props-field input,
      .right-panel .props-field select {
        margin-bottom: 0;
      }
      .right-panel .icon-toggle-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 3px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
      }
      .right-panel .icon-toggle-group button {
        height: 30px;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .right-panel .icon-toggle-group button:hover {
        background: var(--surface-hover);
      }
      .right-panel .icon-toggle-group button.active {
        background: var(--accent);
        color: var(--text-inverse);
      }
      .right-panel .icon-toggle-group button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .right-panel .panel-button {
        margin-top: 0;
      }
      .right-panel .layers-panel {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
      }
      .right-panel #layersList {
        margin-top: 4px;
      }
      .right-panel .props-summary {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-subtle);
        background: var(--surface-muted);
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 6px 8px;
        margin-bottom: 8px;
      }
      .right-panel .mixed-field {
        border-style: dashed;
        border-color: var(--text-muted);
      }
      /* ===== TABS (Pages) ===== */
      .page-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        background: transparent;
        padding: 0;
        font-size: 12px;
        color: var(--text);
        scrollbar-width: thin;
      }
      .page-tabs::-webkit-scrollbar {
        height: 4px;
      }
      .page-tabs::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 999px;
      }
      .page-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 6px;
        margin-right: 0;
        border: 1px solid transparent;
        white-space: nowrap;
        flex: 0 0 auto;
        max-width: 220px;
      }
      .page-tab.active {
        background: var(--surface-muted);
        border-color: var(--border);
        font-weight: 600;
      }
      .page-tab:hover {
        background: var(--surface-hover);
      }
      .page-tab:focus-visible,
      .page-tab-add:focus-visible {
        background: var(--accent-selected);
      }
      .page-tab-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .page-tab-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 6px;
        border-radius: 999px;
        background: var(--accent-selected);
        color: var(--accent);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .page-tab-badge.is-broken {
        background: rgba(222, 53, 11, 0.12);
        color: #de350b;
      }
      .page-tab-add {
        padding: 6px 10px;
        cursor: pointer;
        color: var(--accent);
        white-space: nowrap;
        flex: 0 0 auto;
      }
      /* ===== STATUS BAR ===== */
      .status-bar {
        height: 24px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        font-size: 11px;
        color: var(--text-muted);
      }
      .editor-theme-minimal .status-bar {
        padding: 0 16px 12px;
        background: transparent;
        border-top: none;
      }
      .editor-theme-minimal .left-panel,
      .editor-theme-minimal .right-panel {
        position: absolute;
        top: 12px;
        bottom: 12px;
        z-index: 80;
        max-height: calc(100% - 24px);
        border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
        border-radius: 18px;
        box-shadow: var(--shadow-md);
        background: color-mix(in srgb, var(--surface-overlay) 93%, transparent);
        backdrop-filter: blur(10px);
      }
      .editor-theme-minimal #leftPanel {
        left: 24px;
      }
      .editor-theme-minimal #rightPanel {
        right: 24px;
      }
      .editor-theme-minimal #rightPanel.is-floating,
      body.whiteboard-mode #rightPanel.is-floating {
        right: auto;
        bottom: auto;
        z-index: 650;
      }
      .editor-theme-minimal .panel-resizer {
        display: none !important;
      }
      body.whiteboard-mode .left-panel,
      body.whiteboard-mode .right-panel {
        position: absolute;
        top: 16px;
        bottom: 16px;
        z-index: 80;
        max-height: calc(100% - 32px);
        border: 1px solid rgba(9, 30, 66, 0.14);
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(9, 30, 66, 0.18);
        background: rgba(255, 255, 255, 0.96);
      }
      body.dark-mode.whiteboard-mode .left-panel,
      body.dark-mode.whiteboard-mode .right-panel {
        background: rgba(29, 35, 47, 0.96);
        border-color: rgba(255, 255, 255, 0.08);
      }
      body.whiteboard-mode #leftPanel {
        left: 16px;
      }
      body.whiteboard-mode #rightPanel {
        right: 16px;
      }
      body.whiteboard-mode .panel-resizer {
        display: none !important;
      }
      body.whiteboard-mode .workspace-nav {
        background: transparent;
        border-bottom: none;
        padding-top: 8px;
        padding-bottom: 8px;
      }
      body.whiteboard-mode .status-bar {
        background: transparent;
        border-top: none;
      }
      body.whiteboard-mode .toolbar {
        box-shadow: var(--shadow-sm);
      }
      body.editor-theme-minimal #minimap {
        bottom: 20px;
        right: 20px;
      }
      body.whiteboard-mode #minimap {
        bottom: 12px;
        right: 12px;
      }
      .zoom-controls {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        padding: 2px;
        background: var(--surface-muted);
        border: 1px solid var(--border);
        border-radius: 999px;
      }
      .zoom-controls button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 12px;
        color: var(--text-subtle);
        border-radius: 999px;
      }
      .zoom-controls button:hover {
        background: var(--surface-hover);
        border-radius: 3px;
      }
      .zoom-controls span {
        min-width: 48px;
        text-align: center;
        font-size: 11px;
        color: var(--text);
      }
      /* ===== CONTEXT MENU ===== */
      .context-menu {
        display: none;
        position: absolute;
        background: var(--surface-overlay);
        border: 1px solid var(--border);
        border-radius: 4px;
        box-shadow: var(--shadow-md);
        min-width: 180px;
        z-index: 1000;
        padding: 4px 0;
      }
      .context-menu .ctx-item {
        padding: 6px 14px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        color: var(--text);
      }
      .context-menu .ctx-item:hover {
        background: var(--accent-selected);
      }
      .context-menu .ctx-sep {
        height: 1px;
        background: var(--border);
        margin: 4px 0;
      }
      /* ===== MODAL / DIALOG ===== */
      .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--overlay);
        z-index: 2000;
        align-items: center;
        justify-content: center;
      }
      .modal-overlay.show {
        display: flex;
      }
      .modal {
        position: relative;
        background: var(--surface-overlay);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        padding: 24px;
        color: var(--text);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
      }
      .modal::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }
      .modal::-webkit-scrollbar-track {
        background: transparent;
      }
      .modal::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 999px;
      }
      .modal::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
      }
      /* Pickr color picker dark mode overrides */
      body.dark-mode .pcr-app {
        background: var(--surface-overlay);
        border-color: var(--border);
        color: var(--text);
      }
      body.dark-mode .pcr-app .pcr-interaction input {
        background: var(--surface);
        color: var(--text);
        border-color: var(--border);
      }
      body.dark-mode .pcr-app .pcr-interaction .pcr-save,
      body.dark-mode .pcr-app .pcr-interaction .pcr-cancel {
        color: var(--text);
      }
      body.dark-mode .pcr-app .pcr-result {
        background: var(--surface);
        color: var(--text);
        border-color: var(--border);
      }
      .modal-close-x {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        z-index: 1;
      }
      .modal-close-x:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      .modal-close-x:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .modal h3 {
        margin-bottom: 12px;
        color: var(--text);
      }
      .modal .template-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 12px;
      }
      .modal .template-item {
        border: 1px solid var(--border);
        border-radius: 4px;
        padding: 12px;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        background: var(--surface);
      }
      .modal .template-item:hover {
        border-color: var(--accent);
        background: var(--accent-selected);
      }
      .modal.template-library-modal {
        max-width: 860px;
      }
      .template-library-section {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }
      .template-library-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
      }
      .template-library-list {
        display: grid;
        gap: 12px;
      }
      .template-library-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        padding: 12px;
      }
      .template-library-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
      }
      .template-library-card-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
        flex: 1;
      }
      .template-library-card-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }
      .template-library-card-meta {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
        word-break: break-word;
      }
      .template-library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
      }
      .template-library-empty {
        padding: 12px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .template-item-emoji {
        display: block;
        font-size: 20px;
        line-height: 1.1;
        margin-bottom: 6px;
      }
      .template-item-copy {
        display: block;
        font-size: 11px;
        line-height: 1.35;
        color: var(--text-muted);
        margin-top: 6px;
      }
      .template-source-url {
        font-family:
          ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 10px;
        line-height: 1.4;
        word-break: break-all;
      }
      .modal .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        font-size: 13px;
        margin-right: 8px;
      }
      .modal .btn-primary {
        background: var(--accent);
        color: var(--text-inverse);
        transition: background 0.15s, opacity 0.15s;
      }
      .modal .btn-primary:hover {
        background: var(--accent-hover);
      }
      .modal .btn-primary:active {
        opacity: 0.85;
      }
      .modal .btn-secondary {
        background: var(--surface-muted);
        color: var(--text);
        border: 1px solid var(--border);
        transition: background 0.15s, border-color 0.15s;
      }
      .modal .btn-secondary:hover {
        background: var(--surface-hover-strong);
        border-color: var(--border-strong);
      }
      .modal .btn-secondary:active {
        opacity: 0.85;
      }
      .modal .btn:focus-visible,
      .modal .btn-primary:focus-visible,
      .modal .btn-secondary:focus-visible,
      .modal .btn-danger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      /*
       * .btn-danger — destructive action variant. Atlassian Design System
       * tokens: background `color.background.danger.bold` (#CA3521), hover
       * `color.background.danger.bold.hovered` (#AE2A19), text white.
       * Used by #newDiagramConfirmButton ("Replace diagram") and any future
       * destructive primary actions.
       */
      .modal .btn-danger {
        background: #CA3521;
        color: #ffffff;
        transition: background 0.15s, opacity 0.15s;
      }
      .modal .btn-danger:hover {
        background: #AE2A19;
      }
      .modal .btn-danger:active {
        opacity: 0.85;
      }
      /*
       * New-diagram modal — destructive warning layout.
       * Icon + bullet list with bold key terms; replaces the old single
       * muted paragraph. Counts (shapes, undo steps) injected by
       * newDiagram() before the modal opens.
       */
      .new-diagram-warning {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin: 12px 0 20px;
        padding: 12px 14px;
        background: #ffebe6;
        border: 1px solid rgba(202, 53, 33, 0.3);
        border-radius: 6px;
        color: #5e1a0e;
      }
      .new-diagram-warning-icon {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: #CA3521;
        margin-top: 1px;
      }
      .new-diagram-warning-list {
        margin: 0;
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.55;
      }
      .new-diagram-warning-list li + li {
        margin-top: 4px;
      }
      .new-diagram-warning-list strong {
        font-weight: 600;
      }
      .new-diagram-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
      }
      /*
       * Import-pack instructions modal (Phase D.J 2026-05-04). Replaces
       * cramped sidebar download link + drop zone with a roomier dialog
       * that walks through download → import → success in 3 steps.
       * Vendor URL is copy-only (preserves "Runs on Atlassian" eligibility
       * by avoiding permissions.external.fetch).
       */
      .import-instructions-modal h3 {
        margin: 0 0 6px;
      }
      .import-instructions-policy {
        margin: 0 0 18px;
        font-size: 12px;
        line-height: 1.5;
      }
      .import-instructions-step {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
      }
      .import-instructions-step-num {
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--accent);
        color: var(--text-inverse);
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .import-instructions-step-body {
        flex: 1;
        min-width: 0;
      }
      .import-instructions-step-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .import-instructions-step-help {
        margin: 8px 0 0;
        padding-left: 18px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .import-instructions-step-help li + li {
        margin-top: 3px;
      }
      .import-instructions-step-help:empty {
        display: none;
      }
      .import-instructions-url-row {
        display: flex;
        gap: 6px;
      }
      .import-instructions-url-input {
        flex: 1;
        min-width: 0;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface-muted);
        color: var(--text);
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
        font-size: 12px;
      }
      .import-instructions-url-input:focus {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .import-instructions-copy-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
        line-height: 1;
        flex-shrink: 0;
      }
      .import-instructions-copy-btn svg {
        flex-shrink: 0;
        display: block;
      }
      .import-instructions-copy-btn[data-copied="true"] {
        background: #DCFCE7;
        color: #166534;
        border-color: #86EFAC;
      }
      .import-instructions-dropzone {
        border: 2px dashed var(--border-strong, var(--border));
        border-radius: 8px;
        padding: 22px 16px;
        text-align: center;
        background: var(--surface-muted);
        transition: background 120ms, border-color 120ms;
      }
      .import-instructions-dropzone.drag-active {
        border-color: var(--accent);
        background: var(--accent-selected, var(--surface-hover));
      }
      .import-instructions-dropzone-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
      }
      .import-instructions-dropzone-or {
        font-size: 12px;
        color: var(--text-muted);
        margin: 6px 0 8px;
      }
      .import-instructions-progress {
        margin-top: 12px;
      }
      .import-instructions-progress-bar {
        height: 6px;
        background: var(--surface-muted);
        border: 1px solid var(--border);
        border-radius: 3px;
        overflow: hidden;
      }
      .import-instructions-progress-fill {
        height: 100%;
        background: var(--accent);
        width: 0;
        transition: width 120ms;
      }
      .import-instructions-progress-text {
        margin-top: 6px;
        font-size: 12px;
        color: var(--text-muted);
      }
      .import-instructions-message {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .import-instructions-message.error {
        color: #AE2A19;
      }
      .import-instructions-success {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 14px 16px;
        margin: 8px 0 16px;
        background: #DCFCE7;
        border: 1px solid #86EFAC;
        border-radius: 6px;
      }
      .import-instructions-success-icon {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #16A34A;
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .import-instructions-success-title {
        font-size: 14px;
        font-weight: 600;
        color: #166534;
      }
      .import-instructions-success-text {
        font-size: 13px;
        color: #166534;
      }
      .import-instructions-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 8px;
      }
      .plugin-manager-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 18px;
        margin-top: 16px;
      }
      .plugin-manager-section {
        display: grid;
        gap: 12px;
      }
      .plugin-manager-list {
        display: grid;
        gap: 10px;
      }
      .plugin-manager-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
      }
      .plugin-manager-row input[type="checkbox"] {
        margin-top: 2px;
      }
      .plugin-manager-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
        flex: 1;
      }
      .plugin-manager-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
      }
      .plugin-manager-note {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .plugin-manager-inline {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .plugin-manager-inline input[type="text"] {
        flex: 1 1 220px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
        color: var(--text);
      }
      .plugin-manager-empty {
        padding: 12px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .plugin-manager-custom-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .plugin-manager-custom-path {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 11px;
        line-height: 1.45;
        word-break: break-all;
      }
      .plugin-manager-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-top: 18px;
        flex-wrap: wrap;
      }
      .plugin-manager-status {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
        max-width: 520px;
      }
      .theme-settings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        margin-top: 18px;
      }
      .theme-settings-section {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        padding: 14px;
      }
      .theme-settings-section h4 {
        margin: 0 0 10px;
        font-size: 13px;
        color: var(--text);
      }
      .theme-settings-option {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        cursor: pointer;
        color: var(--text);
      }
      .theme-settings-option input {
        margin-top: 2px;
      }
      .theme-settings-option-copy {
        display: grid;
        gap: 3px;
      }
      .theme-settings-option-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
      }
      .theme-settings-option-note {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .theme-settings-summary {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .revision-history-modal {
        max-width: min(980px, 94vw);
      }
      .revision-history-layout {
        display: grid;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
      }
      .revision-history-sidebar {
        display: grid;
        gap: 10px;
      }
      .revision-history-list {
        display: grid;
        gap: 8px;
        max-height: 56vh;
        overflow: auto;
        padding-right: 4px;
      }
      .revision-history-item {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        text-align: left;
        transition:
          border-color 0.15s ease,
          background 0.15s ease,
          box-shadow 0.15s ease;
      }
      .revision-history-item:hover {
        border-color: var(--accent);
        background: var(--accent-selected);
      }
      .revision-history-item.active {
        border-color: var(--accent);
        background: var(--accent-selected);
        box-shadow: 0 0 0 1px rgba(0, 82, 204, 0.15);
      }
      .revision-history-item-title {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
      }
      .revision-history-item-meta {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .revision-history-empty {
        padding: 14px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .revision-history-main {
        display: grid;
        gap: 12px;
        min-width: 0;
      }
      .revision-history-summary {
        display: grid;
        gap: 12px;
      }
      .revision-history-meta {
        display: grid;
        gap: 4px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
      }
      .revision-history-meta-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }
      .revision-history-meta-copy {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .revision-history-page-picker {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .revision-history-page-btn {
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
      }
      .revision-history-page-btn.active {
        border-color: var(--accent);
        background: var(--accent-selected);
        color: var(--accent);
      }
      .revision-history-page-summary {
        font-size: 12px;
        color: var(--text-muted);
      }
      .revision-history-preview {
        display: grid;
        place-items: center;
        min-height: 320px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
      }
      .revision-history-preview canvas {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        box-shadow: var(--shadow-sm);
        background: var(--canvas-bg, #ffffff);
      }
      .revision-history-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        flex-wrap: wrap;
      }
      .revision-history-actions-meta {
        display: grid;
        gap: 10px;
        flex: 1 1 320px;
        min-width: min(320px, 100%);
      }
      .revision-history-status {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .revision-history-confirm {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-left: 4px solid var(--accent);
        border-radius: 8px;
        background: var(--surface-muted);
      }
      .revision-history-confirm-copy {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text);
      }
      .revision-history-confirm-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      @media (max-width: 860px) {
        .revision-history-layout {
          grid-template-columns: 1fr;
        }
        .revision-history-list {
          max-height: 220px;
        }
        .revision-history-preview {
          min-height: 240px;
        }
      }
      .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .shortcut-table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
      }
      .shortcut-table caption {
        margin-bottom: 8px;
        text-align: left;
        color: var(--text-muted);
      }
      .shortcut-table th,
      .shortcut-table td {
        padding: 6px 4px;
        border-bottom: 1px solid var(--border);
        text-align: left;
        vertical-align: top;
      }
      .shortcut-table th {
        font-weight: 600;
        color: var(--text-muted);
      }
      .shortcut-table tr:last-child td {
        border-bottom: none;
      }
      kbd {
        display: inline-block;
        padding: 1px 6px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
        font:
          600 11px/1.5 ui-monospace,
          SFMono-Regular,
          Menlo,
          Monaco,
          Consolas,
          "Liberation Mono",
          "Courier New",
          monospace;
        color: var(--text);
      }
      .diagram-vars-panel {
        display: grid;
        gap: 6px;
        margin-top: 4px;
      }
      .diagram-var-summary-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        font-size: 11px;
        padding: 4px 6px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface-muted);
      }
      .diagram-var-summary-key {
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
      }
      .diagram-var-summary-value {
        color: var(--text);
        text-align: right;
        word-break: break-word;
      }
      .diagram-var-summary-empty {
        font-size: 11px;
        color: var(--text-muted);
        padding: 6px;
        border: 1px dashed var(--border);
        border-radius: 4px;
        background: var(--surface-muted);
      }
      .shape-data-preview {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.45;
        white-space: pre-line;
        word-break: break-word;
        max-height: 140px;
        overflow: auto;
      }
      .shape-data-properties {
        display: grid;
        gap: 6px;
      }
      .shape-data-property {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        gap: 8px;
        font-size: 11px;
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface-muted);
      }
      .shape-data-property-key {
        color: var(--text-muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        word-break: break-word;
      }
      .shape-data-property-value {
        color: var(--text);
        word-break: break-word;
      }
      .shape-data-empty {
        font-size: 11px;
        color: var(--text-muted);
        padding: 6px;
        border: 1px dashed var(--border);
        border-radius: 4px;
        background: var(--surface-muted);
      }
      .diagram-tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .diagram-tag-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface-muted);
        font-size: 11px;
        color: var(--text);
        word-break: break-word;
      }
      .diagram-tag-chip-muted {
        background: var(--surface-input);
        color: var(--text-muted);
      }
      .diagram-search-options,
      .tag-manager-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .diagram-search-option-list,
      .tag-manager-toggle-list {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .checkbox-row.inline {
        display: inline-flex;
        margin: 0;
      }
      .diagram-search-status,
      .tag-manager-summary {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .diagram-search-results,
      .tag-manager-list {
        display: grid;
        gap: 8px;
        max-height: 320px;
        overflow: auto;
        margin-top: 12px;
        padding-right: 4px;
      }
      .diagram-search-result,
      .tag-manager-row {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }
      .diagram-search-result:hover,
      .diagram-search-result.active,
      .tag-manager-row:hover {
        background: var(--surface-hover);
        border-color: var(--accent);
      }
      .diagram-search-result-copy,
      .tag-manager-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
        flex: 1;
      }
      .diagram-search-result-title,
      .tag-manager-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        word-break: break-word;
      }
      .diagram-search-result-meta,
      .tag-manager-meta {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
        word-break: break-word;
      }
      .diagram-search-result-snippet {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text);
        word-break: break-word;
        white-space: pre-line;
      }
      .diagram-search-result-badges,
      .tag-manager-badges {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .diagram-search-result-badge,
      .tag-manager-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface-input);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .tag-manager-row input {
        margin-top: 2px;
      }
      .tag-manager-empty,
      .diagram-search-empty {
        padding: 12px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .panel-button {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 3px;
        background: var(--surface-muted);
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
        margin-top: 6px;
      }
      .panel-button:hover {
        background: var(--surface-hover);
      }
      .panel-button.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-inverse);
      }
      .style-preset-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        gap: 8px;
      }
      .style-preset-button {
        display: grid;
        gap: 8px;
        align-content: start;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        color: var(--text);
        cursor: pointer;
        text-align: left;
        font-size: 12px;
      }
      .style-preset-button:hover {
        background: var(--surface-hover);
        border-color: var(--accent);
      }
      .style-preset-button-title {
        font-weight: 600;
        line-height: 1.2;
      }
      .style-preset-swatches {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .style-preset-swatch {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        background: var(--swatch-color, #ffffff);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
      }
      .style-action-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .style-action-grid .panel-button {
        margin-top: 0;
      }
      .diagram-props-intro {
        font-size: 12px;
        color: var(--text-muted);
        margin-bottom: 12px;
        line-height: 1.4;
      }
      .diagram-props-rows {
        display: grid;
        gap: 8px;
      }
      .diagram-props-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
        gap: 8px;
        align-items: center;
      }
      .diagram-props-row input {
        margin-bottom: 0;
      }
      .custom-fonts-rows {
        display: grid;
        gap: 10px;
        margin-top: 14px;
      }
      .custom-fonts-row {
        display: grid;
        grid-template-columns: minmax(120px, 0.9fr) minmax(160px, 1.2fr) minmax(
            110px,
            0.7fr
          ) minmax(220px, 1.3fr) auto;
        gap: 8px;
        align-items: center;
      }
      .custom-fonts-row input,
      .custom-fonts-row select {
        margin-bottom: 0;
      }
      .custom-fonts-row .btn {
        white-space: nowrap;
      }
      .custom-fonts-preview {
        font-size: 11px;
        color: var(--text-muted);
        grid-column: 1/-2;
        min-height: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .custom-fonts-empty {
        padding: 14px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      @media (max-width: 1120px) {
        .custom-fonts-row {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }
        .custom-fonts-row .custom-fonts-preview {
          grid-column: 1/-1;
        }
        .custom-fonts-row .btn {
          justify-self: start;
        }
      }
      .diagram-props-remove {
        width: 32px;
        height: 32px;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
      }
      .diagram-props-remove:hover {
        background: var(--surface-hover);
      }
      .diagram-xml-modal {
        max-width: min(1040px, 96vw);
        width: min(1040px, 96vw);
      }
      .diagram-xml-textarea {
        width: 100%;
        min-height: min(56vh, 560px);
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-input);
        color: var(--text);
        font:
          12px/1.5 ui-monospace,
          SFMono-Regular,
          Menlo,
          Monaco,
          Consolas,
          "Liberation Mono",
          "Courier New",
          monospace;
        resize: vertical;
        white-space: pre;
        overflow: auto;
      }
      .diagram-xml-meta {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-top: 8px;
        flex-wrap: wrap;
        font-size: 11px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .diagram-xml-status {
        margin-top: 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .diagram-xml-status[data-state="success"] {
        border-color: rgba(0, 135, 90, 0.35);
        background: rgba(54, 179, 126, 0.1);
        color: #006644;
      }
      .diagram-xml-status[data-state="error"] {
        border-color: rgba(222, 53, 11, 0.35);
        background: rgba(255, 86, 48, 0.08);
        color: #bf2600;
      }
      body.dark-mode .diagram-xml-status[data-state="success"] {
        border-color: rgba(126, 226, 184, 0.35);
        background: rgba(18, 53, 36, 0.55);
        color: #7ee2b8;
      }
      body.dark-mode .diagram-xml-status[data-state="error"] {
        border-color: rgba(255, 139, 105, 0.35);
        background: rgba(74, 38, 22, 0.55);
        color: #ffb8a3;
      }
      .diagram-xml-actions {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
      }
      .comments-modal {
        max-width: 760px;
      }
      .diagram-comments-summary {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
        margin: 0 0 14px;
      }
      .diagram-comment-compose,
      .diagram-comment-thread {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        padding: 14px;
      }
      .diagram-comment-compose {
        display: grid;
        gap: 10px;
        margin-bottom: 14px;
      }
      .diagram-comment-compose label,
      .diagram-comment-reply label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 6px;
      }
      .diagram-comment-compose textarea,
      .diagram-comment-reply textarea {
        width: 100%;
        min-height: 84px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-input);
        color: var(--text);
        font-size: 13px;
        font-family: inherit;
        line-height: 1.45;
        box-sizing: border-box;
        resize: vertical;
      }
      .diagram-comment-compose-footer,
      .diagram-comment-reply-footer,
      .diagram-comment-thread-head,
      .diagram-comment-actions {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .diagram-comments-list {
        display: grid;
        gap: 12px;
      }
      .diagram-comments-empty {
        padding: 16px;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .diagram-comment-thread-meta {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .diagram-comment-thread-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
      }
      .diagram-comment-thread-context,
      .diagram-comment-message-meta,
      .diagram-comment-reply-note {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .diagram-comment-thread-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        background: #ffebe6;
        color: #bf2600;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }
      .diagram-comment-thread-status[data-state="resolved"] {
        background: #e3fcef;
        color: #006644;
      }
      body.dark-mode .diagram-comment-thread-status {
        background: #4a2616;
        color: #ffb8a3;
      }
      body.dark-mode .diagram-comment-thread-status[data-state="resolved"] {
        background: #123524;
        color: #7ee2b8;
      }
      .diagram-comment-messages {
        display: grid;
        gap: 10px;
        margin: 14px 0;
      }
      .diagram-comment-message {
        padding: 12px;
        border-radius: 8px;
        background: var(--surface-overlay);
        border: 1px solid var(--border);
      }
      .diagram-comment-message-body {
        font-size: 13px;
        line-height: 1.5;
        color: var(--text);
        white-space: pre-wrap;
        word-break: break-word;
        margin-top: 6px;
      }
      .diagram-comment-actions {
        margin-top: 10px;
      }
      .diagram-comment-actions .btn {
        margin-right: 0;
        padding: 6px 10px;
        font-size: 12px;
      }
      .diagram-comment-actions .btn[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .diagram-comment-reply {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }
      .diagram-comment-reply textarea {
        min-height: 72px;
      }
      .dialog-title {
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--text);
      }
      .dialog-input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: 4px;
        font-size: 13px;
        box-sizing: border-box;
        background: var(--surface-input);
        color: var(--text);
      }
      .dialog-actions {
        margin-top: 12px;
        text-align: right;
      }
      .dialog-btn {
        padding: 4px 12px;
        border-radius: 4px;
        cursor: pointer;
      }
      .dialog-btn-secondary {
        margin-right: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
      }
      .dialog-btn-primary {
        border: none;
        background: var(--accent);
        color: var(--text-inverse);
      }
      /* ===== SEARCH BAR ===== */
      .search-box {
        padding: 6px 8px;
      }
      .search-box input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid var(--border);
        border-radius: 3px;
        font-size: 12px;
        background: var(--surface-input);
        color: var(--text);
      }
      /* ===== MORE SHAPES ===== */
      .panel-section.library-hidden {
        display: none !important;
      }
      /* 2026-05-08: search override — when user types into the sidebar
       * search and a hidden library matches by header / data-lib, reveal
       * it temporarily so the user can discover packs they have not
       * enabled (e.g. AWS, GCP). Cleared on empty query by filterShapes. */
      .panel-section.library-hidden.search-match {
        display: block !important;
      }
      .left-panel-footer {
        /* Bug #35 cont. (2026-05-07): position:sticky removed in favor of
         * the canonical flex-column layout — .left-panel is now a flex
         * column with .left-panel-scroll (flex:1, scrolls) + this footer
         * (flex-shrink:0, intrinsic height) as siblings. Sticky required
         * a real internal-scroll context which never triggered in Forge's
         * fixed-bucket viewportSize:max — body cap at 100vh + min-height
         * 600px (themes.css:body) ensures the iframe stays inside user's
         * viewport, and flex-column anchors the footer at the bottom of
         * .left-panel regardless of section count. */
        flex-shrink: 0;
        padding: 10px 8px 12px;
        background: var(--surface);
        border-top: 1px solid var(--border);
      }
      .more-shapes-launch {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        border: 1.5px dashed var(--accent);
        border-radius: 8px;
        background: var(--surface-muted);
        color: var(--accent);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition:
          background 0.15s,
          border-style 0.15s;
      }
      .more-shapes-launch:hover {
        background: var(--surface-hover);
        border-style: solid;
      }
      .more-shapes-launch span:first-child {
        font-size: 16px;
        line-height: 1;
      }
      .more-shapes-modal {
        max-width: 760px;
      }
      .more-shapes-search {
        margin-top: 12px;
      }
      .more-shapes-search-field {
        display: grid;
        gap: 6px;
      }
      .more-shapes-search-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
      }
      .more-shapes-search-field input {
        width: 100%;
      }
      .more-shapes-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 18px;
        margin-top: 18px;
      }
      .more-shapes-section-title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        margin: 0 0 10px;
      }
      .more-shapes-library-list,
      .more-shapes-import-list {
        display: grid;
        gap: 10px;
      }
      .more-shapes-empty-state {
        padding: 12px;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .more-shapes-library-group {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
      }
      .more-shapes-library-group-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .more-shapes-library-group-copy {
        display: grid;
        gap: 4px;
      }
      .more-shapes-library-group-title {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text);
      }
      .more-shapes-library-group-note {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .more-shapes-library-group-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface-input);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
      }
      .more-shapes-library-group-list {
        display: grid;
        gap: 10px;
      }
      .more-shapes-library-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
      }
      .more-shapes-library-toggle {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        flex: 1;
        cursor: pointer;
      }
      .more-shapes-library-toggle input {
        margin-top: 2px;
      }
      .more-shapes-library-copy {
        display: grid;
        gap: 3px;
      }
      .more-shapes-library-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
      }
      .more-shapes-library-note {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .more-shapes-library-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface-input);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
      }
      .more-shapes-library-side {
        display: grid;
        justify-items: end;
        gap: 8px;
        flex: 0 0 auto;
      }
      .more-shapes-library-status {
        font-size: 11px;
        line-height: 1.4;
        color: var(--text-muted);
      }
      .more-shapes-library-status[data-state="error"] {
        color: #ae2a19;
      }
      .more-shapes-library-badges {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
      }
      .more-shapes-library-status-badge[data-badge-tone="enabled"] {
        background: rgba(0, 135, 90, 0.12);
        border-color: rgba(0, 135, 90, 0.22);
        color: #006644;
      }
      body.dark-mode .more-shapes-library-status-badge[data-badge-tone="enabled"] {
        background: rgba(123, 255, 170, 0.12);
        border-color: rgba(123, 255, 170, 0.24);
        color: #7ee2b8;
      }
      .more-shapes-library-status-badge[data-badge-tone="disabled"] {
        background: rgba(107, 119, 140, 0.12);
        border-color: rgba(107, 119, 140, 0.22);
        color: var(--text-muted);
      }
      body.dark-mode .more-shapes-library-status-badge[data-badge-tone="disabled"] {
        background: rgba(179, 212, 255, 0.08);
        border-color: rgba(179, 212, 255, 0.18);
        color: var(--text-muted);
      }
      .more-shapes-library-status-badge[data-badge-tone="download"] {
        background: rgba(0, 82, 204, 0.12);
        border-color: rgba(0, 82, 204, 0.22);
        color: #0747a6;
      }
      body.dark-mode .more-shapes-library-status-badge[data-badge-tone="download"] {
        background: rgba(133, 184, 255, 0.12);
        border-color: rgba(133, 184, 255, 0.22);
        color: #85b8ff;
      }
      .more-shapes-library-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;
        position: sticky;
        bottom: -24px;
        margin-left: -24px;
        margin-right: -24px;
        margin-bottom: -24px;
        padding: 12px 24px;
        background: var(--surface-overlay);
        border-top: 1px solid var(--border);
        box-shadow: 0 -6px 14px -10px rgba(0, 0, 0, 0.45);
        z-index: 2;
      }
      .more-shapes-library-shortcuts {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .more-shapes-status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .more-shapes-status-text {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .more-shapes-toggle-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text);
        cursor: pointer;
      }
      .more-shapes-toggle-inline input {
        margin: 0;
      }
      @media (max-width: 640px) {
        .more-shapes-library-row {
          flex-direction: column;
        }
        .more-shapes-library-side {
          width: 100%;
          justify-items: start;
        }
        .more-shapes-library-row .licensed-library-actions {
          justify-content: flex-start;
        }
      }
      .user-library-modal {
        max-width: 820px;
      }
      .user-library-modal-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 18px;
        margin-top: 18px;
      }
      .user-library-form {
        display: grid;
        gap: 10px;
      }
      .user-library-form label {
        display: grid;
        gap: 6px;
        font-size: 12px;
        color: var(--text);
      }
      .user-library-form input,
      .user-library-form select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
        color: var(--text);
        font-size: 13px;
      }
      .user-library-inline-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }
      .user-library-helper {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.5;
      }
      .user-library-list {
        display: grid;
        gap: 12px;
        max-height: 420px;
        overflow: auto;
        padding-right: 4px;
      }
      .user-library-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface-muted);
        padding: 12px;
      }
      .user-library-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
      }
      .user-library-card-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }
      .user-library-card-meta {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
        margin-top: 4px;
      }
      .user-library-card-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 6px;
      }
      .user-library-entry-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }
      .user-library-entry-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 10px;
        border: 1px solid var(--border-soft);
        border-radius: 8px;
        background: var(--surface);
      }
      .user-library-entry-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }
      .user-library-entry-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text);
        word-break: break-word;
      }
      .user-library-entry-meta {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.4;
      }
      .user-library-entry-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        flex-shrink: 0;
      }
      .user-library-item {
        aspect-ratio: auto;
        min-height: 92px;
        padding: 6px 4px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 4px;
        overflow: hidden;
      }
      .user-library-item img {
        width: 100%;
        height: 54px;
        object-fit: contain;
        pointer-events: none;
      }
      .user-library-item-label {
        font-size: 11px;
        line-height: 1.3;
        max-width: 100%;
        word-break: break-word;
      }
      .user-library-item-meta {
        font-size: 10px;
        color: var(--text-muted);
        line-height: 1.2;
        text-align: center;
      }
      .panel-empty-state {
        padding: 14px 16px;
        font-size: 12px;
        color: var(--text-muted);
        line-height: 1.6;
        text-align: center;
        opacity: 0.85;
      }
      .custom-shapes-modal {
        max-width: 880px;
      }
      .custom-shapes-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
        gap: 18px;
        margin-top: 18px;
      }
      .custom-shapes-editor textarea {
        width: 100%;
        min-height: 300px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-input);
        color: var(--text);
        font:
          12px/1.5 ui-monospace,
          SFMono-Regular,
          Menlo,
          Monaco,
          Consolas,
          monospace;
        box-sizing: border-box;
        resize: vertical;
      }
      .custom-shapes-editor-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .custom-shapes-helper {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .custom-shapes-summary {
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
        margin-top: 8px;
      }
      .custom-shapes-saved-list {
        display: grid;
        gap: 10px;
        max-height: 420px;
        overflow: auto;
        padding-right: 2px;
      }
      .custom-shapes-saved-card {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        padding: 10px 12px;
      }
      .custom-shapes-saved-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
      }
      .custom-shapes-saved-meta {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
        margin-top: 4px;
      }
      .custom-shapes-saved-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
      }
      .custom-shapes-empty {
        padding: 14px;
        border: 1px dashed var(--border);
        border-radius: 8px;
        background: var(--surface-muted);
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      @media (max-width: 880px) {
        .more-shapes-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 980px) {
        .custom-shapes-grid {
          grid-template-columns: 1fr;
        }
      }
      /* ===== LAYERS PANEL ===== */
      .layers-panel {
        border-top: 1px solid var(--border);
        margin-top: 8px;
        padding-top: 4px;
      }
      .layers-panel h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
      .layer-row {
        display: flex;
        align-items: center;
        padding: 3px 4px;
        border-radius: 3px;
        font-size: 11px;
        gap: 4px;
        cursor: pointer;
      }
      .layer-row:hover {
        background: var(--surface-hover);
      }
      .layer-row.active {
        background: var(--accent-selected);
        font-weight: 600;
      }
      .layer-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 13px;
        padding: 1px 3px;
        border-radius: 2px;
        color: var(--text-muted);
        line-height: 1;
      }
      .layer-btn:hover {
        background: var(--border);
      }
      .layer-btn.off {
        opacity: 0.3;
      }
      .checkbox-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text);
        margin: 4px 0;
      }
      .checkbox-row input {
        width: auto !important;
        margin: 0 !important;
      }
      .checkbox-note {
        font-size: 11px;
        color: var(--text-muted);
        margin: 0 0 8px;
      }
      .presentation-overlay {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 250;
        pointer-events: auto;
      }
      .presentation-controls {
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(11, 16, 32, 0.82);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
        color: #fff;
      }
      .presentation-controls button {
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        padding: 8px 14px;
        font-size: 12px;
        cursor: pointer;
      }
      .presentation-controls button:hover {
        background: rgba(255, 255, 255, 0.24);
      }
      .presentation-controls button:disabled {
        opacity: 0.35;
        cursor: default;
      }
      .presentation-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 180px;
      }
      .presentation-title strong {
        font-size: 13px;
        font-weight: 600;
      }
      .presentation-counter {
        font-size: 11px;
        opacity: 0.78;
      }
      .presentation-overview {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        display: none;
        gap: 12px;
        max-width: calc(100% - 40px);
        padding: 12px 14px;
        border-radius: 18px;
        background: rgba(11, 16, 32, 0.72);
        backdrop-filter: blur(12px);
        overflow-x: auto;
      }
      .slide-thumb {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        padding: 8px;
        cursor: pointer;
        color: #fff;
        min-width: 126px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
      }
      .slide-thumb:hover {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.12);
      }
      .slide-thumb.active {
        border-color: #4c9aff;
        box-shadow: 0 0 0 1px rgba(76, 154, 255, 0.45);
      }
      .slide-thumb canvas {
        display: block;
        width: 110px;
        height: 62px;
        border-radius: 8px;
        background: var(--surface);
      }
      .slide-thumb-label {
        font-size: 11px;
        white-space: nowrap;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .shape-picker {
        position: fixed;
        background: var(--surface-overlay);
        border: 1px solid var(--border);
        border-radius: 6px;
        box-shadow: var(--shadow-lg);
        padding: 8px;
        z-index: 5000;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        min-width: 180px;
      }
      .shape-picker-item {
        padding: 8px 4px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
        font-size: 18px;
        border: 1px solid var(--border-soft);
        background: var(--surface-muted);
        color: var(--text);
      }
      .shape-picker-item:hover {
        background: var(--accent-selected);
        border-color: var(--accent);
      }
      .shape-picker-item-label {
        font-size: 9px;
        color: var(--text-muted);
        margin-top: 2px;
      }
      /* ===== FULLSCREEN ===== */
      .fullscreen-mode .menubar,
      .fullscreen-mode .toolbar,
      .fullscreen-mode .workspace-nav,
      .fullscreen-mode .left-panel,
      .fullscreen-mode .right-panel,
      .fullscreen-mode .panel-resizer,
      .fullscreen-mode .page-tabs,
      .fullscreen-mode .status-bar {
        display: none !important;
      }
      .fullscreen-mode .main {
        height: 100vh !important;
      }
      body.presentation-mode {
        background: #0b1020;
      }
      .presentation-mode .menubar,
      .presentation-mode .toolbar,
      .presentation-mode .workspace-nav,
      .presentation-mode .left-panel,
      .presentation-mode .right-panel,
      .presentation-mode .panel-resizer,
      .presentation-mode .page-tabs,
      .presentation-mode .status-bar {
        display: none !important;
      }
      .presentation-mode .main {
        height: 100vh !important;
      }
      .presentation-mode .canvas-area {
        background: #0b1020;
      }
      .presentation-mode #minimap,
      .presentation-mode #inlineTextToolbar,
      .presentation-mode #inlineTextEditorFrame,
      .presentation-mode #inlineTextEditor {
        display: none !important;
      }
      .presentation-mode .context-menu,
      .presentation-mode .modal-overlay {
        display: none !important;
      }
      .presentation-mode .presentation-overlay {
        display: block;
      }
      .presentation-mode .presentation-controls,
      .presentation-mode .presentation-overview {
        display: flex;
      }
      .published-view-mode .menubar,
      .published-view-mode .toolbar,
      .published-view-mode .workspace-nav,
      .published-view-mode .left-panel,
      .published-view-mode .right-panel,
      .published-view-mode .panel-resizer,
      .published-view-mode .status-bar,
      .published-view-mode #minimap,
      .published-view-mode #inlineTextToolbar,
      .published-view-mode #inlineTextEditorFrame,
      .published-view-mode #inlineTextEditor {
        display: none !important;
      }
      .published-view-mode .canvas-area {
        background: #f7f8fa;
      }
      .published-view-bar {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
        background: var(--surface);
        min-height: 58px;
      }
      .published-view-mode .published-view-bar {
        display: flex;
      }
      .published-view-primary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .published-view-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--accent-selected);
        color: var(--accent);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-transform: uppercase;
      }
      .published-view-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(48vw, 560px);
      }
      .published-view-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .published-view-page-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .published-view-actions button,
      .published-view-page-strip button {
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
      }
      .published-view-actions button:hover,
      .published-view-page-strip button:hover {
        background: var(--surface-hover);
      }
      .published-view-actions button:disabled,
      .published-view-page-strip button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .published-view-page-label {
        font-size: 12px;
        color: var(--text-muted);
        min-width: 82px;
        text-align: center;
      }
      .published-view-page-strip {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        width: 100%;
      }
      .published-view-page-strip button.active {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-inverse);
      }
      .published-view-layers-wrap {
        position: relative;
      }
      .published-view-layers-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        display: none;
        min-width: 240px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        z-index: 70;
      }
      .published-view-layers-menu.show {
        display: grid;
        gap: 6px;
      }
      .published-view-layer-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 7px 9px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-input);
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
        text-align: left;
      }
      .published-view-layer-row:hover {
        background: var(--surface-hover);
      }
      .published-view-layer-row[aria-pressed="false"] {
        opacity: 0.72;
      }
      .published-view-layer-icon {
        width: 18px;
        flex: 0 0 18px;
        text-align: center;
      }
      .published-view-layer-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .published-view-layer-status {
        font-size: 11px;
        color: var(--text-muted);
      }
      #publishedViewCanvasOverlay {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 30;
        background: transparent;
      }
      .published-view-mode #publishedViewCanvasOverlay {
        display: block;
      }
      .published-view-tooltip {
        position: fixed;
        display: none;
        pointer-events: none;
        z-index: 12000;
        max-width: 280px;
        padding: 6px 8px;
        border-radius: 4px;
        background: #172b4d;
        color: #fff;
        font-size: 12px;
        line-height: 1.4;
        white-space: pre-line;
        word-break: break-word;
        box-shadow: 0 6px 20px rgba(9, 30, 66, 0.25);
      }
      .explore-banner {
        position: absolute;
        top: 12px;
        left: 12px;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: min(520px, calc(100% - 24px));
        max-width: min(720px, calc(100% - 24px));
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface-overlay) 94%, transparent);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(6px);
        z-index: 650;
      }
      .explore-banner.show {
        display: flex;
      }
      .explore-banner-copy {
        display: grid;
        gap: 4px;
        min-width: 0;
      }
      .explore-banner-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .explore-banner-meta {
        font-size: 12px;
        color: var(--text-muted);
      }
      .explore-banner-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .explore-banner-actions button {
        padding: 6px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        font-size: 12px;
      }
      .explore-banner-actions button:hover {
        background: var(--surface-hover);
      }
      .explore-banner-actions button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .utility-plugin-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .utility-plugin-actions .panel-button {
        flex: 1 1 150px;
      }
      .utility-plugin-note {
        font-size: 11px;
        color: var(--text-muted);
        line-height: 1.45;
      }
      #extractTextOutput {
        min-height: 260px;
      }
      #diagramSpellCheckInput {
        min-height: 260px;
      }
      .publish-form-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin: 14px 0 12px;
      }
      .publish-form-field {
        display: grid;
        gap: 6px;
        flex: 1;
        min-width: 180px;
      }
      .publish-form-field label {
        font-size: 12px;
        color: var(--text-muted);
      }
      .publish-form-field input,
      .publish-form-field select {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        font-size: 13px;
        background: var(--surface-input);
        color: var(--text);
        box-sizing: border-box;
      }
      .publish-toggle-grid {
        display: grid;
        gap: 8px;
      }
      .publish-toggle-card {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
        cursor: pointer;
      }
      .publish-toggle-card input {
        width: auto !important;
        margin: 2px 0 0 !important;
        flex: 0 0 auto;
      }
      .publish-toggle-text {
        display: grid;
        gap: 2px;
      }
      .publish-toggle-text strong {
        font-size: 13px;
        color: var(--text);
        font-weight: 600;
      }
      .publish-link-options-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
      }
      .publish-link-options-grid label {
        display: grid;
        gap: 6px;
      }
      .publish-link-note {
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-muted);
      }
      .publish-output {
        width: 100%;
        min-height: 240px;
        resize: vertical;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface-input);
        color: var(--text);
        font:
          12px/1.45 ui-monospace,
          SFMono-Regular,
          Menlo,
          Monaco,
          Consolas,
          "Liberation Mono",
          "Courier New",
          monospace;
        box-sizing: border-box;
      }
      .publish-output-meta {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--text-muted);
      }
      .publish-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 14px;
      }
      .publish-actions-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      /* ===== TOAST NOTIFICATIONS ===== */
      #toastContainer {
        position: fixed;
        right: 16px;
        bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        max-width: min(360px, calc(100vw - 32px));
        z-index: 6000;
        pointer-events: none;
      }
      .toast {
        padding: 12px 14px;
        border-radius: 10px;
        box-shadow: var(--shadow-lg);
        font-size: 12px;
        line-height: 1.45;
        color: #fff;
        background: rgba(23, 43, 77, 0.96);
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity 0.18s ease,
          transform 0.18s ease;
        max-width: 100%;
        word-break: break-word;
      }
      .toast.show {
        opacity: 1;
        transform: translateY(0);
      }
      .toast-info {
        background: rgba(23, 43, 77, 0.96);
      }
      .toast-warning {
        background: rgba(255, 171, 0, 0.96);
        color: #172b4d;
      }
      .toast-error {
        background: rgba(222, 53, 11, 0.96);
      }

      /* ===== P3-08c: Import Icon Packs panel ===== */
      .import-pack-card {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
      }
      .import-pack-card:last-child { border-bottom: none; }
      .import-pack-intro {
        margin-bottom: 8px;
        padding: 8px;
        border: 1px solid var(--border-soft);
        border-radius: 6px;
        background: var(--surface-hover);
      }
      .import-pack-intro-line {
        font-size: 11px;
        color: var(--text-muted);
      }
      .import-pack-intro-line + .import-pack-intro-line {
        margin-top: 4px;
      }
      .import-pack-card-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
      }
      .import-pack-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .import-pack-title {
        font-weight: 600;
        font-size: 12px;
        color: var(--text);
      }
      .import-pack-status {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 4px;
      }
      .import-pack-status-installed { color: var(--accent); }
      .import-pack-download {
        display: inline-block;
        font-size: 11px;
        color: var(--accent);
        text-decoration: none;
        margin-bottom: 4px;
      }
      .import-pack-download:hover { text-decoration: underline; }
      .import-pack-help {
        margin-bottom: 6px;
      }
      .import-pack-help-line,
      .import-pack-help-note {
        font-size: 11px;
        color: var(--text-muted);
      }
      .import-pack-help-line + .import-pack-help-line,
      .import-pack-help-note {
        margin-top: 3px;
      }
      .import-pack-dropzone {
        margin-bottom: 6px;
        padding: 8px;
        border: 1px dashed var(--border);
        border-radius: 6px;
        background: var(--surface);
        transition: border-color 0.2s ease, background 0.2s ease;
      }
      .import-pack-dropzone-active {
        border-color: var(--accent);
        background: var(--accent-selected);
      }
      .import-pack-dropzone-title {
        font-size: 11px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 2px;
      }
      .import-pack-dropzone-text {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 6px;
      }
      .import-pack-actions {
        display: flex;
        gap: 6px;
        margin-bottom: 0;
      }
      .import-pack-btn {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 3px;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
      }
      .import-pack-btn:hover { background: var(--surface-hover); }
      .import-pack-btn:disabled {
        opacity: 0.5;
        cursor: default;
      }
      .import-pack-btn-primary {
        background: var(--accent);
        color: var(--text-inverse);
        border-color: var(--accent);
      }
      .import-pack-btn-primary:hover { background: var(--accent-hover); }
      .import-pack-btn-danger {
        color: #de350b;
        border-color: #de350b;
      }
      .import-pack-btn-danger:hover { background: #ffebe6; }
      .import-pack-progress { margin: 4px 0; }
      .import-pack-progress-bar {
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        overflow: hidden;
      }
      .import-pack-progress-fill {
        height: 100%;
        width: 0;
        background: var(--accent);
        transition: width 0.2s ease;
      }
      .import-pack-progress-text {
        font-size: 10px;
        color: var(--text-muted);
        margin-top: 2px;
      }
      .import-pack-message {
        font-size: 11px;
        min-height: 0;
      }
      .import-pack-message-error { color: #de350b; }
      .import-pack-message-success { color: #00875a; }
      .import-pack-loading, .import-pack-error {
        font-size: 11px;
        color: var(--text-muted);
        padding: 8px 0;
      }
      .import-pack-error { color: #de350b; }