*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #000000;
    --toolbar-bg: #1A1A1A;
    --toolbar-text: #E8E8E6;
    --toolbar-border: #2E2E2E;
    --btn-hover: #2E2E2E;
    --selected-ring: #6366F1;
    --ctx-bg: #1F1F1F;
    --ctx-shadow: 0 8px 32px rgba(0,0,0,0.35);
  }
  body.light, html.light {
    --bg: #F0F0ED;
    --toolbar-bg: #FFFFFF;
    --toolbar-text: #1A1A1A;
    --toolbar-border: #E0E0DC;
    --btn-hover: #F0F0EE;
    --selected-ring: #6366F1;
    --ctx-bg: #FFFFFF;
    --ctx-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }
  body.light #toolbar { border-bottom-color: #E0E0DC; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  body.light #toolbar .sep { background: #E0E0DC; }
  body.light #undo-btn, body.light #redo-btn { color: #1A1A1A; }
  body.light #format-bar { background:#F7F7F5; border-bottom-color:#E0E0DC; }
  body.light .fb-sep { background:#D8D8D4; }
  body.light .fb-btn { color:#1A1A1A; }
  body.light .fb-btn:hover { background:#EAEAE6; border-color:#D0D0CC; }
  body.light .fb-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  body.light .fb-swatch { border-color:#AAA; }
  body.light .fb-color-btn { color:#1A1A1A; }
  body.light .fb-color-btn:hover { background:#EAEAE6; border-color:#D0D0CC; }
  body.light #fb-icon-btn { color:#1A1A1A; }
  body.light #fb-icon-btn:hover { background:#EAEAE6; border-color:#D0D0CC; }
  body.light #fb-icon-label { color:#888; }
  body.light .fb-text-input { color:#1A1A1A; border-color:transparent; }
  body.light .fb-text-input:focus { border-color:#6366F1; background:#EAEAE6; }
  body.light .fb-text-input::placeholder { color:#AAA; }
  body.light .fb-text-input.has-value { border-color:#CCC; }
  body.light .fb-clear-btn { color:#AAA; }
  body.light .fb-clear-btn:hover { color:#e53e3e; background:#FFE5E5; }
  body.light #fb-reset-color { color:#AAA; }
  body.light #fb-reset-color:hover { background:#EAEAE6; color:#1A1A1A; border-color:#D0D0CC; }
  body.light .node.multi-selected { outline-color:#818cf8; }
  body.light #ctx-menu { border-color:#E0E0DC; }
  body.light .ctx-item { color:#1A1A1A; }
  body.light .ctx-item:hover { background:#F0F0EE; }
  body.light .ctx-sep { background:#E8E8E4; }
  body.light #icon-picker { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 40px rgba(0,0,0,0.15); }
  body.light .ip-title { color:#888; }
  body.light .ip-clear { border-color:#D0D0CC; color:#666; }
  body.light .ip-clear:hover { background:#EAEAE6; color:#1A1A1A; }
  body.light .ip-group-label { color:#AAA; }
  body.light .ip-icon-btn:hover { background:#EAEAE6; }
  body.light .ip-icon-btn.active { background:#4f46e5; border-color:#6366F1; }
  body.light #color-palette { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 32px rgba(0,0,0,0.14); }
  body.light .cp-label { color:#AAA; }
  body.light .cp-footer { border-top-color:#E0E0DC; }
  body.light .cp-footer-label { color:#888; }
  body.light .cp-reset { border-color:#D0D0CC; color:#888; }
  body.light .cp-reset:hover { background:#EAEAE6; color:#1A1A1A; }
  body.light #sidebar { background:#FAFAF8; border-right-color:#E0E0DC; }
  body.light #edge-toggle-group #sidebar-toggle, body.light #edge-toggle-group #box-toggle { background:#F0F0EE; border-color:#E0E0DC; color:#888; }
  body.light #edge-toggle-group #sidebar-toggle:hover, body.light #edge-toggle-group #box-toggle:hover { background:#E8E8E4; color:#1A1A1A; }
body.light #box-toggle.active, body.light #sidebar-toggle.active { color:#6366f1; background:#E0E7FF; border-color:#818cf8; }
  body.light .sb-header { border-bottom-color:#E0E0DC; }
  body.light .sb-logo { color:#1A1A1A; }
  body.light .sb-count-badge { background:#E8E8E4; color:#666; }
  body.light .sb-icon-btn { background:#F0F0EE; border-color:#E0E0DC; color:#666; }
  body.light .sb-icon-btn:hover { background:#E8E8E4; color:#1A1A1A; border-color:#CCC; }
  body.light .sb-icon-btn.primary { background:#6366F1; border-color:#6366F1; color:#fff; }
  body.light .sb-icon-btn.primary:hover { background:#4f52d6; }
  body.light .sb-search { background:#F0F0EE; border-color:#E0E0DC; color:#1A1A1A; }
  body.light .sb-search::placeholder { color:#AAA; }
  body.light .sb-tabs { background:#F4F4F2; border-bottom-color:#E0E0DC; }
  body.light .sb-tab { color:#666; }
  body.light .sb-tab:hover { color:#111; background:#EAEAE6; }
  body.light .sb-tab.active { color:#4338ca; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
  body.light .sb-filter-bar { background:#F4F4F2; border-bottom-color:#E0E0DC; }
  body.light .sb-select { background:#fff; border-color:#D0D0CC; color:#333; }
  body.light .sb-section { color:#888; }
  body.light .sb-item { background:transparent; border-color:transparent; }
  body.light .sb-item:hover { background:#EFEFEA; border-color:#E0E0DC; }
  body.light .sb-item.active { background:#EEF2FF; border-color:transparent; }
  body.light .sb-item-name { color:#1A1A1A; }
  body.light .sb-item.active .sb-item-name { color:#3730a3; }
  body.light .sb-item-date { color:#888; }
  body.light .sb-badge { color:#666; background:#E5E5E0; }
  body.light .sb-folder-badge { background:#EAEAE5; color:#555; }
  body.light .sb-item-btn { color:#888; }
  body.light .sb-item-btn:hover { color:#1A1A1A; background:#E0E0DC; }
  body.light .sb-item-btn.danger:hover { color:#e53e3e; background:#FFE5E5; }
  body.light .sb-folder-header { background:#F0F0EE; color:#333; }
  body.light .sb-folder-header:hover { background:#E8E8E4; }
  body.light .sb-btn-add-folder { background:#F8F8F6; border-color:#D0D0CC; color:#666; }
  body.light .sb-ctx-menu { background:#fff; border-color:#E0E0DC; color:#333; box-shadow:0 8px 24px rgba(0,0,0,0.12); }
  body.light .sb-ctx-item:hover { background:#F0F0EE; color:#111; }
  body.light .sb-ctx-sep { background:#E8E8E4; }
  body.light .sb-form-input, body.light .sb-form-select { background:#fff; border-color:#D0D0CC; color:#1A1A1A; }
  body.light .sb-btn { background:#F0F0EE; border-color:#D0D0CC; color:#333; }
  body.light .sb-btn:hover { background:#E8E8E4; }
  body.light .sb-tpl-card { background:#F9F9F7; border-color:#E0E0DC; }
  body.light .sb-tpl-card:hover { background:#F0F0EE; }
  body.light .sb-tpl-card.active { background:#EEF2FF; border-color:#6366f1; }
  body.light .sb-tpl-name { color:#1A1A1A; }
  body.light .sb-tpl-desc { color:#777; }
  body.light .sb-color-swatch.active { border-color:#1A1A1A; }
  body.light .sb-rename-input { background:#F0F0EE; border-color:#6366F1; color:#1A1A1A; }
  body.light .sb-empty { color:#888; }
  body.light #bg-image-panel { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 32px rgba(0,0,0,0.12); }
  body.light .bgi-title { color:#888; }
  body.light .bgi-close { color:#AAA; }
  body.light .bgi-close:hover { background:#EAEAE6; color:#1A1A1A; }
  body.light .bgi-canvas-color-row { border-bottom-color:#E0E0DC; }
  body.light .bgi-canvas-color-label { color:#888; }
  body.light .bgi-upload-btn { background:#EAEAE6; border-color:#D0D0CC; color:#1A1A1A; }
  body.light .bgi-upload-btn:hover { background:#E0E0DC; }
  body.light .bgi-clear-btn { border-color:#D0D0CC; color:#888; }
  body.light .bgi-clear-btn:hover { background:#EAEAE6; color:#1A1A1A; }
  body.light .bgi-label-row { color:#AAA; }
  body.light .bgi-repeat-row { color:#AAA; }
  body.light #help-box td { color:#1A1A1A; }
  /* ── Sticky Notes ── */
  .sticky-note {
    position:fixed; z-index:120;
    width:200px; height:180px;
    border-radius:6px; padding:0;
    box-shadow:0 4px 16px rgba(0,0,0,0.22);
    display:flex; flex-direction:column;
    font-family:'Inter',sans-serif; font-size:13px;
    user-select:none; cursor:default;
    transition:box-shadow 0.15s;
    overflow:hidden;
  }
  .sticky-note:hover { box-shadow:0 6px 24px rgba(0,0,0,0.30); }
  .sticky-note.sn-selected { outline:2px solid var(--selected-ring); outline-offset:1px; }
  .sn-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 8px; border-radius:6px 6px 0 0;
    cursor:grab; flex-shrink:0; opacity:0.85;
  }
  .sn-header:active { cursor:grabbing; }
  .sn-color-dots { display:flex; gap:4px; }
  .sn-color-dot {
    width:12px; height:12px; border-radius:50%; border:none; cursor:pointer;
    opacity:0.7; transition:opacity 0.1s, transform 0.1s; padding:0;
  }
  .sn-color-dot:hover { opacity:1; transform:scale(1.2); }
  .sn-color-dot.active { opacity:1; outline:2px solid rgba(255,255,255,0.7); outline-offset:1px; }
  .sn-del-btn {
    background:transparent; border:none; cursor:pointer;
    color:rgba(0,0,0,0.45); font-size:14px; line-height:1;
    padding:2px 3px; border-radius:3px; transition:color 0.1s, background 0.1s;
    flex-shrink:0;
  }
  .sn-del-btn:hover { color:rgba(0,0,0,0.9); background:rgba(0,0,0,0.1); }
  .sn-body {
    flex:1; padding:8px 10px;
    border-radius:0 0 6px 6px;
    overflow:hidden; min-height:0;
  }
  .sn-textarea {
    width:100%; height:100%;
    background:transparent; border:none; outline:none; resize:none;
    font-family:inherit; font-size:13px; line-height:1.5;
    color:rgba(0,0,0,0.8); cursor:text;
  }
  .sn-textarea::placeholder { color:rgba(0,0,0,0.35); }
  .sn-resize-handle {
    position:absolute; bottom:0; right:0;
    width:14px; height:14px; cursor:se-resize;
    opacity:0; transition:opacity 0.15s;
  }
  .sn-resize-handle::after {
    content:''; position:absolute; bottom:3px; right:3px;
    width:7px; height:7px;
    border-right:2px solid rgba(0,0,0,0.35);
    border-bottom:2px solid rgba(0,0,0,0.35);
    border-radius:1px;
  }
  .sticky-note:hover .sn-resize-handle { opacity:1; }
  .sn-body { overflow:hidden; }
  html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
  * { -webkit-tap-highlight-color: transparent; }
  #toolbar {
    position:fixed; top:0; left:0; right:0; z-index:160;
    height:54px; background:var(--toolbar-bg); border-bottom:1px solid var(--toolbar-border);
    display:flex; align-items:center; gap:6px; padding:0 14px; user-select:none;
    flex-wrap:nowrap; overflow:visible;
    transition:left 0.08s cubic-bezier(.4,0,.2,1);
  }
  .tb-group { position:relative; flex-shrink:0; }
  .tb-group-btn {
    background:transparent; border:none; cursor:pointer;
    color:var(--toolbar-text); font-family:'Inter',sans-serif;
    font-size:13px; font-weight:500; padding:6px 10px; border-radius:6px;
    display:flex; align-items:center; gap:5px; transition:background 0.15s; white-space:nowrap;
  }
  .tb-group-btn:hover { background:var(--btn-hover); }
  .tb-group-btn svg.tb-caret { width:8px; height:8px; opacity:0.6; transition:transform 0.15s; }
  .tb-group-btn svg:not(.tb-caret) { width:16px; height:16px; flex-shrink:0; }
  .tb-group.open .tb-group-btn { background:var(--btn-hover); }
  .tb-group.open .tb-caret { transform:rotate(180deg); }
  .tb-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:600;
    background:var(--toolbar-bg); border:1px solid var(--toolbar-border);
    border-radius:8px; padding:4px 0;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    min-width:150px;
  }
  .tb-dropdown.align-right { left:auto; right:0; }
  .tb-group.open .tb-dropdown { display:block; }
  .tb-dd-item {
    display:flex; align-items:center; gap:8px;
    padding:8px 14px; font-size:13px; cursor:pointer;
    color:var(--toolbar-text); background:transparent; border:none;
    width:100%; text-align:left; font-family:'Inter',sans-serif;
    white-space:nowrap; transition:background 0.1s;
  }
  .tb-dd-item:hover { background:var(--btn-hover); }
  .tb-dd-item svg { width:13px; height:13px; flex-shrink:0; opacity:0.75; }
  body.light .tb-dropdown { box-shadow:0 8px 24px rgba(0,0,0,0.14); }
  #toolbar .title-wrap {
    display:inline-flex; align-items:center; position:relative;
    border-radius:6px; transition:background 0.15s, border-color 0.15s;
    border:1px solid transparent; padding-right:2px;
  }
  #toolbar .title-wrap:hover { background:var(--btn-hover); }
  #toolbar .title-wrap:focus-within {
    background:var(--btn-hover);
    border-color:rgba(99,102,241,0.5);
  }
  #toolbar .title-input {
    background:transparent; border:none; outline:none;
    color:var(--toolbar-text); font-family:'Inter',sans-serif;
    font-size:14px; font-weight:600; min-width:80px; max-width:280px;
    padding:5px 6px; border-radius:5px; cursor:text;
  }
  #toolbar .title-edit-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:4px; background:transparent;
    border:none; cursor:pointer; color:var(--toolbar-text);
    opacity:0; padding:0; transition:opacity 0.15s, background 0.15s;
    flex-shrink:0;
  }
  #toolbar .title-wrap:hover .title-edit-btn { opacity:0.6; }
  #toolbar .title-edit-btn:hover { opacity:1 !important; background:rgba(255,255,255,0.1); }
  #toolbar .title-input:hover, #toolbar .title-input:focus { background:transparent; }
  #toolbar .sep { width:1px; height:28px; background:var(--toolbar-border); margin:0 4px; }
  #toolbar button {
    background:transparent; border:none; cursor:pointer;
    color:var(--toolbar-text); font-family:'Inter',sans-serif;
    font-size:13px; font-weight:500; padding:6px 11px; border-radius:6px;
    display:flex; align-items:center; gap:6px; transition:background 0.15s; white-space:nowrap;
  }
  #toolbar button:hover { background:var(--btn-hover); }
  #toolbar button svg { width:16px; height:16px; flex-shrink:0; }
  #toolbar button.icon-only { padding:6px 8px; }
  #toolbar .spacer { flex:1; }
  #undo-btn, #redo-btn { opacity:0.4; }
  #undo-btn.active, #redo-btn.active { opacity:1; }
  #toolbar-inbox-btn { color: var(--toolbar-text); }
  #toolbar-inbox-btn.active { color: #818cf8; background: rgba(129,140,248,0.15); }
  #toolbar-inbox-btn.active:hover { background: rgba(129,140,248,0.22); }
  #autosave-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--toolbar-text);
    padding: 5px;
    margin: 0 3px;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s, transform 0.1s;
  }
  #autosave-icon:hover {
    opacity: 1;
    background: var(--btn-hover);
  }
  #autosave-icon:active {
    transform: scale(0.92);
  }
  #autosave-icon svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  /* Khi luu roi (saved): Dang day (filled), khong mau */
  #autosave-icon .save-icon-outline {
    display: none;
  }
  #autosave-icon .save-icon-filled {
    display: block;
  }
  /* Khi dang luu (saving): Dinh dang vien (outline), khong mau */
  #autosave-icon.saving .save-icon-outline {
    display: block;
    animation: saveOutlinePulse 0.9s ease-in-out infinite;
  }
  #autosave-icon.saving .save-icon-filled {
    display: none;
  }
  @keyframes saveOutlinePulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
  }
  #canvas-wrap {
    position:fixed; top:96px; left:0; right:0; bottom:0;
    overflow:hidden; cursor:default; touch-action:none;
    transition:left 0.08s cubic-bezier(.4,0,.2,1), top 0.1s;
  }
  #canvas { position:absolute; top:0; left:0; transform-origin:0 0; }
  #svg-layer { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; z-index:1; }
  .node {
    position:absolute; border-radius:32px; padding:10px 20px;
    font-size:15px; font-weight:500; cursor:pointer; user-select:none;
    white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
    width:max-content; max-width:280px; min-width:60px; line-height:1.45;
    transform:translate(-50%,-50%);
    transition:box-shadow 0.15s, outline 0.1s, opacity 0.15s;
    outline:2px solid transparent;
    overflow:visible; touch-action:none;
    box-sizing:border-box;
    z-index: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .node:hover { box-shadow:0 4px 16px rgba(0,0,0,0.13); }
  .node.selected { outline:2px solid var(--selected-ring); outline-offset:2px; z-index:100; }
  .node.center { font-size:16px; font-weight:600; border-radius:36px; padding:14px 28px; width:max-content; max-width:320px; }
  .node.editing { cursor:text; }
  .node.collapsed-node { opacity:0.92; }
  .node.drag-over { outline:2px dashed #6366F1; outline-offset:3px; opacity:0.7; }
  .node.multi-selected { outline:2px solid #a5b4fc; outline-offset:2px; }
  .node, .node *, .node img, .fb-node-img, .node-img-wrap, .img-wrap {
    -webkit-user-drag: none !important;
    user-drag: none !important;
  }
  .node-content-wrap {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    max-width:100%; box-sizing:border-box; vertical-align:middle;
  }
  .node-text-span {
    display:block; width:100%;
    white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; line-height:1.45; text-align:left;
    box-sizing:border-box;
  }
  #lasso-rect {
    position:fixed; pointer-events:none; z-index:50;
    border:1.5px dashed #6366F1; background:rgba(99,102,241,0.08);
    border-radius:3px; display:none;
  }
  #lasso-rect.active { display:block; }
  .node.lasso-hover { outline: 2px dashed #6366F1; outline-offset: 2px; }
  .node.floating-node { opacity: 0.9; }
  .node.attach-target {
    outline: 2.5px dashed #6366F1 !important; outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(99,102,241,0.22), 0 8px 24px rgba(99,102,241,0.32) !important;
    transform: translate(-50%,-50%) scale(1.04);
  }
  .node.reparent-candidate {
    outline: 2px dashed #22c55e !important; outline-offset: 4px;
    cursor: pointer !important;
  }
  .node.reparent-candidate:hover {
    box-shadow: 0 0 0 6px rgba(34,197,94,0.25), 0 8px 20px rgba(34,197,94,0.3) !important;
    transform: translate(-50%,-50%) scale(1.05);
  }
  #attach-indicator {
    position: fixed; z-index: 200;
    background: #6366F1; color: #fff;
    font-size: 12px; font-family: 'Inter', sans-serif; font-weight: 600;
    padding: 5px 12px; border-radius: 20px; pointer-events: none;
    display: none; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(99,102,241,0.45);
    transition: opacity 0.15s, transform 0.15s;
  }
  #attach-indicator.show { display: block; }
  .qa-btn {
    position:absolute; width:22px; height:22px; border-radius:50%;
    background:#6366F1; border:2px solid rgba(255,255,255,0.25);
    color:#fff; font-size:14px; font-weight:400; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none; z-index:15;
    box-shadow:0 2px 8px rgba(99,102,241,0.45);
    opacity:0; transform:scale(0.7);
    transition:opacity 0.15s, transform 0.15s, background 0.1s;
    pointer-events:none;
  }
  .node:hover .qa-btn, .node.selected .qa-btn {
    opacity:1; pointer-events:auto;
  }
  .qa-btn:hover { background:#4f52d6; transform:scale(1.15) !important; }
  .qa-btn:active { transform:scale(0.95) !important; }
  .qa-child {
    right:-26px; top:50%; transform:translateY(-50%) scale(0.7);
  }
  .node:hover .qa-child, .node.selected .qa-child {
    transform:translateY(-50%) scale(1);
  }
  .qa-child:hover { transform:translateY(-50%) scale(1.15) !important; }
  .qa-child:active { transform:translateY(-50%) scale(0.95) !important; }
  .node.has-children .qa-child { right:-26px; }
  .qa-sibling {
    bottom:-30px; left:50%; transform:translateX(-50%) scale(0.7); z-index:60;
  }
  .node:hover .qa-sibling, .node.selected .qa-sibling {
    transform:translateX(-50%) scale(1);
  }
  .qa-sibling:hover { transform:translateX(-50%) scale(1.15) !important; }
  .node.center .qa-sibling { display:none; }
  .qa-rel {
    top:-30px; left:50%; transform:translateX(-50%) scale(0.7); z-index:60;
    background:#8b5cf6 !important;
  }
  .node:hover .qa-rel, .node.selected .qa-rel {
    transform:translateX(-50%) scale(1);
  }
  .qa-rel:hover { background:#7c3aed !important; transform:translateX(-50%) scale(1.15) !important; }
  .qa-rel:active { transform:translateX(-50%) scale(0.95) !important; }
  body.is-dragging-node .qa-btn,
  body.is-panning .qa-btn,
  body.is-lassoing .qa-btn,
  .node.editing .qa-btn {
    opacity:0 !important; pointer-events:none !important;
  }
  @media (hover:none) {
    .qa-btn { opacity:0; pointer-events:none; }
    .node.selected .qa-btn { opacity:1; pointer-events:auto; }
  }
  .collapse-btn {
    position:absolute; right:-10px; top:50%; transform:translateY(-50%);
    width:20px; height:20px; border-radius:50%;
    background:var(--toolbar-bg); border:2px solid #555;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:10px; font-weight:700; color:var(--toolbar-text);
    z-index:20; user-select:none;
    box-shadow:0 1px 4px rgba(0,0,0,0.15);
    opacity:0; transition:opacity 0.15s, border-color 0.15s;
  }
  .node:hover .collapse-btn { opacity:1; }
  .collapse-btn.is-collapsed { opacity:1; }
  .collapse-btn:hover { opacity:1; border-color:#6366F1; color:#6366F1; }
  .node-editor {
    background:transparent; border:none; outline:none;
    font-family:'Inter',sans-serif; font-size:inherit; font-weight:inherit; color:inherit;
    width:max-content; min-width:40px; max-width:260px; text-align:center; caret-color:currentColor;
    display:block; resize:none; overflow:hidden; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word;
    line-height:inherit; vertical-align:middle;
    user-select:text !important; -webkit-user-select:text !important;
    pointer-events:auto !important; cursor:text !important;
  }
  #text-ruler {
    position:fixed; top:-9999px; left:-9999px; visibility:hidden;
    white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; font-family:'Inter',sans-serif;
    font-size:15px; font-weight:500; padding:0; box-sizing:border-box;
    display:inline-block; width:auto;
  }
  #ctx-menu {
    display:none; position:fixed; z-index:500;
    background:var(--ctx-bg); border-radius:10px;
    box-shadow:var(--ctx-shadow); padding:4px 0;
    min-width:160px; border:1px solid var(--toolbar-border);
  }
  #ctx-menu.show { display:block; }
  .ctx-item {
    padding:8px 16px; font-size:13px; cursor:pointer;
    display:flex; align-items:center; gap:10px; color:#1A1A1A;
    transition:background 0.1s;
  }
  .ctx-item:hover { background:#F0F0EE; }
  .ctx-item .ctx-key { margin-left:auto; font-size:11px; color:#aaa; font-family:monospace; }
  .ctx-sep { height:1px; background:#efefef; margin:3px 0; }
  .ctx-item.danger { color:#e53e3e; }
  .ctx-item.danger:hover { background:#fff5f5; }
  .ctx-icon { width:13px; height:13px; flex-shrink:0; opacity:.65; }
  .ctx-item.danger .ctx-icon { opacity:.8; }
  #toast {
    display: none !important;
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:#1A1A1A; color:#fff; font-size:13px; padding:8px 16px; border-radius:8px;
    opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:9000;
    white-space:nowrap;
  }
  #toast.show { display: none !important; opacity:0; }
  #confirm-toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    background:#1A1A1A; color:#fff; font-size:13px; padding:10px 16px; border-radius:10px;
    display:none; align-items:center; gap:10px; z-index:9001;
    box-shadow:0 4px 20px rgba(0,0,0,0.5); white-space:nowrap;
  }
  #confirm-toast.show { display:flex; }
  .ct-msg { color:#e8e8e6; }
  .ct-btn {
    background:#3a3a3a; border:1px solid #555; border-radius:5px;
    color:#e8e8e6; font-size:12px; padding:4px 12px; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .ct-btn:hover { background:#4a4a4a; }
  .ct-btn.danger { background:#7f1d1d; border-color:#ef4444; color:#fca5a5; }
  .ct-btn.danger:hover { background:#991b1b; }
  body.light #confirm-toast { background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.18); }
  body.light .ct-msg { color:#1a1a1a; }
  body.light .ct-btn { background:#f0f0ee; border-color:#ddd; color:#1a1a1a; }
  body.light .ct-btn:hover { background:#e0e0dc; }
  body.light .ct-btn.danger { background:#fef2f2; border-color:#fca5a5; color:#dc2626; }
  body.light .ct-btn.danger:hover { background:#fee2e2; }
  #help-overlay {
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.5); align-items:center; justify-content:center;
  }
  #help-overlay.show { display:flex; }
  #help-box {
    background:#fff; border-radius:14px; padding:28px 32px; min-width:360px; max-height:90vh; overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
  }
  #help-box h3 { font-size:16px; font-weight:600; margin-bottom:4px; }
  #help-box .help-section { margin-top:16px; }
  #help-box .help-section h4 { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#aaa; margin-bottom:8px; }
  #help-box table { border-collapse:collapse; width:100%; }
  #help-box td { padding:4px 0; font-size:13px; }
  #help-box td:first-child { color:#888; padding-right:20px; font-family:monospace; white-space:nowrap; }
  #help-box .close-btn {
    margin-top:20px; width:100%; background:#1A1A1A; color:#fff; border:none;
    border-radius:8px; padding:9px; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif;
  }
  #format-bar {
    display:flex; position:fixed; top:54px; left:0; right:0; z-index:150;
    min-height:42px; background:#161616; border-bottom:1px solid #2a2a2a;
    align-items:center; gap:3px; padding:4px 12px; user-select:none;
    flex-wrap:wrap; overflow:visible;
    transition:left 0.08s cubic-bezier(.4,0,.2,1);
  }
  .fb-sep { width:1px; height:22px; background:#2e2e2e; margin:0 4px; flex-shrink:0; }
  .fb-btn {
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 8px; font-size:12px; cursor:pointer; color:#c8c8c6;
    font-family:'Inter',sans-serif; line-height:1.5; transition:background 0.1s;
    white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:4px;
  }
  .fb-btn:hover { background:#2a2a2a; border-color:#3a3a3a; }
  .fb-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  .fb-btn.bold-btn { font-weight:700; }
  .fb-btn.italic-btn { font-style:italic; }
  .fb-btn.underline-btn { text-decoration:underline; }
  .fb-swatch {
    width:18px; height:18px; border-radius:3px; border:1.5px solid #555;
    cursor:pointer; flex-shrink:0; display:inline-block; transition:border-color 0.1s;
    vertical-align:middle;
  }
  .fb-swatch:hover { border-color:#aaa; }
  .fb-color-btn {
    display:flex; align-items:center; gap:5px;
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 8px; cursor:pointer; color:#c8c8c6; font-size:12px;
    font-family:'Inter',sans-serif; transition:background 0.1s; flex-shrink:0;
  }
  .fb-color-btn:hover { background:#2a2a2a; border-color:#3a3a3a; }
  #fb-font-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; }
  #fb-font-btn {
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 20px 4px 7px; font-size:12px; color:#c8c8c6; cursor:pointer;
    font-family:'Inter',sans-serif; outline:none; min-width:80px; max-width:130px;
    transition:background 0.1s; text-align:left; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; position:relative;
  }
  #fb-font-btn:hover { background:#2a2a2a; border-color:#3a3a3a; }
  #fb-font-btn::after {
    content:'▾'; position:absolute; right:5px; top:50%; transform:translateY(-50%);
    font-size:10px; color:#888; pointer-events:none;
  }
  #fb-font-dropdown {
    display:none; position:fixed; z-index:500;
    background:#1e1e1e; border:1px solid #3a3a3a; border-radius:6px;
    box-shadow:0 6px 24px rgba(0,0,0,0.55); padding:3px 0;
    min-width:160px; max-height:none; 
  }
  #fb-font-dropdown.show { display:block; }
  .fb-font-opt {
    padding:5px 12px; font-size:13px; color:#c8c8c6; cursor:pointer;
    white-space:nowrap; transition:background 0.1s;
  }
  .fb-font-opt:hover { background:#2e2e2e; }
  .fb-font-opt.active { background:#3730a3; color:#fff; }
  body.light #fb-font-btn { color:#1A1A1A; }
  body.light #fb-font-btn:hover { background:#EAEAE6; border-color:#D0D0CC; }
  body.light #fb-font-dropdown { background:#fff; border-color:#E0E0DC; box-shadow:0 6px 24px rgba(0,0,0,0.14); }
  body.light .fb-font-opt { color:#1A1A1A; }
  body.light .fb-font-opt:hover { background:#F0F0EE; }
  body.light .fb-font-opt.active { background:#4f46e5; color:#fff; }
  #fb-fontsize-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; }
  #fb-fontsize-btn {
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 18px 4px 6px; font-size:12px; color:#c8c8c6; cursor:pointer;
    font-family:'Inter',sans-serif; outline:none; min-width:44px;
    transition:background 0.1s; text-align:left; white-space:nowrap; position:relative;
  }
  #fb-fontsize-btn:hover { background:#2a2a2a; border-color:#3a3a3a; }
  #fb-fontsize-btn::after {
    content:'▾'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
    font-size:10px; color:#888; pointer-events:none;
  }
  #fb-fontsize-dropdown {
    display:none; position:fixed; z-index:500;
    background:#1e1e1e; border:1px solid #3a3a3a; border-radius:6px;
    box-shadow:0 6px 24px rgba(0,0,0,0.55); padding:3px 0;
    min-width:120px;
  }
  #fb-fontsize-dropdown.show { display:block; }
  .fb-fontsize-opt {
    padding:5px 12px; font-size:13px; color:#c8c8c6; cursor:pointer;
    white-space:nowrap; transition:background 0.1s;
    display:flex; align-items:baseline; gap:8px;
  }
  .fb-fontsize-opt:hover { background:#2e2e2e; }
  .fb-fontsize-opt.active { background:#3730a3; color:#fff; }
  .fb-fontsize-opt .fs-label-small { font-size:10px; color:#888; }
  .fb-fontsize-opt.active .fs-label-small { color:#a5b4fc; }
  .fb-fontsize-custom-row {
    padding:5px 8px; border-top:1px solid #2e2e2e; display:flex; align-items:center; gap:5px;
  }
  #fb-fontsize-custom-inp {
    background:#111; border:1px solid #333; border-radius:4px;
    padding:3px 6px; font-size:12px; color:#c8c8c6; outline:none; width:52px;
    font-family:'Inter',sans-serif;
  }
  #fb-fontsize-custom-inp:focus { border-color:#6366F1; }
  #fb-fontsize-custom-ok {
    background:#3730a3; border:none; border-radius:4px;
    padding:3px 8px; font-size:11px; color:#fff; cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  body.light #fb-fontsize-btn { color:#1A1A1A; }
  body.light #fb-fontsize-btn:hover { background:#EAEAE6; border-color:#D0D0CC; }
  body.light #fb-fontsize-dropdown { background:#fff; border-color:#E0E0DC; box-shadow:0 6px 24px rgba(0,0,0,0.14); }
  body.light .fb-fontsize-opt { color:#1A1A1A; }
  body.light .fb-fontsize-opt:hover { background:#F0F0EE; }
  body.light .fb-fontsize-opt.active { background:#4f46e5; color:#fff; }
  body.light .fb-fontsize-custom-row { border-top-color:#E0E0DC; }
  body.light #fb-fontsize-custom-inp { background:#F0F0EE; border-color:#D0D0CC; color:#1A1A1A; }
  #fb-icon-btn {
    display:flex; align-items:center; gap:4px; min-width:32px;
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 7px; cursor:pointer; color:#c8c8c6; font-size:14px;
    font-family:'Inter',sans-serif; transition:background 0.1s; flex-shrink:0;
  }
  #fb-icon-btn:hover { background:#2a2a2a; border-color:#3a3a3a; }
  #fb-icon-btn.has-icon { border-color:#3a3a3a; }
  #fb-icon-label { font-size:11px; color:#888; }
  .fb-text-input {
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:2px 6px; font-size:12px; color:#c8c8c6; width:140px;
    font-family:'Inter',sans-serif; outline:none; transition:border-color 0.1s;
  }
  .fb-text-input:focus { border-color:#6366F1; background:#1e1e1e; }
  .fb-text-input::placeholder { color:#444; }
  .fb-text-input.has-value { border-color:#3a3a3a; }
  .fb-input-wrap {
    display:flex; align-items:center; gap:2px; flex-shrink:0;
  }
  .fb-clear-btn {
    background:transparent; border:none; cursor:pointer; color:#888;
    font-size:13px; padding:2px 3px; border-radius:3px; line-height:1;
    transition:color 0.1s, background 0.1s; flex-shrink:0; display:none;
    align-items:center; justify-content:center;
  }
  .fb-clear-btn.visible { display:flex; }
  .fb-clear-btn:hover { color:#f87171; background:#2a1a1a; }
  #fb-reset-color {
    background:transparent; border:1px solid transparent; border-radius:4px;
    padding:4px 7px; font-size:11px; cursor:pointer; color:#666;
    font-family:'Inter',sans-serif; transition:background 0.1s; flex-shrink:0;
  }
  #fb-reset-color:hover { background:#2a2a2a; color:#c8c8c6; border-color:#3a3a3a; }
  #fb-more-btn { display:none; }
  #fb-more-popup { display:contents; }
  #icon-picker {
    display:none; position:fixed; z-index:400;
    background:#1e1e1e; border-radius:12px;
    box-shadow:0 8px 40px rgba(0,0,0,0.6); padding:10px 12px;
    border:1px solid #333; width:329px; max-height:70vh; overflow-y:auto;
  }
  #icon-picker.show { display:block; }
  #icon-picker::-webkit-scrollbar { width:5px; }
  #icon-picker::-webkit-scrollbar-track { background:transparent; }
  #icon-picker::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
  .ip-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .ip-title { font-size:11px; color:#888; font-weight:500; }
  .ip-clear {
    background:transparent; border:1px solid #3a3a3a; border-radius:4px;
    padding:2px 8px; font-size:11px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .ip-clear:hover { background:#2a2a2a; color:#c8c8c6; }
  .ip-group-label {
    font-size:10px; color:#555; font-weight:600; text-transform:uppercase;
    letter-spacing:.07em; margin:8px 0 4px;
  }
  .ip-group-label:first-of-type { margin-top:0; }
  .ip-grid { display:flex; flex-wrap:wrap; gap:2px; }
  .ip-icon-btn {
    width:28px; height:28px; border-radius:5px; border:1px solid transparent;
    background:transparent; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.1s; line-height:1;
  }
  .ip-icon-btn:hover { background:#2e2e2e; }
  .ip-icon-btn.active { background:#3730a3; border-color:#6366F1; }
  #color-palette {
    display:none; position:fixed; z-index:300;
    background:#1e1e1e; border-radius:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.55); padding:10px;
    border:1px solid #333;
  }
  #color-palette.show { display:block; }
  .cp-label { font-size:10px; color:#666; text-transform:uppercase;
    letter-spacing:.06em; margin-bottom:6px; }
  .cp-grid { display:grid; grid-template-columns:repeat(10,24px); gap:3px; margin-bottom:8px; }
  .cp-swatch {
    width:24px; height:24px; border-radius:4px; border:2px solid transparent;
    cursor:pointer; transition:transform .1s, border-color .1s;
  }
  .cp-swatch:hover { transform:scale(1.2); border-color:rgba(255,255,255,.4); }
  .cp-swatch.cp-active { border-color:#6366F1 !important; }
  .cp-footer { display:flex; align-items:center; gap:6px;
    padding-top:8px; border-top:1px solid #2e2e2e; }
  .cp-footer-label { font-size:11px; color:#666; }
  .cp-custom {
    width:24px; height:24px; border-radius:4px; border:1px solid #444; cursor:pointer; flex-shrink:0;
    background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  }
  .cp-custom:hover { border-color:#aaa; }
  .cp-custom-input { position:fixed; width:0; height:0; opacity:0; pointer-events:none; }
  .cp-reset {
    margin-left:auto; background:transparent; border:1px solid #3a3a3a; border-radius:5px;
    padding:3px 9px; font-size:11px; color:#888; cursor:pointer; font-family:'Inter',sans-serif;
  }
  .cp-reset:hover { background:#2a2a2a; color:#e8e8e6; }
  .node-link-icon {
    position:absolute; bottom:-2px; left:0px;
    width:12px; height:12px;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:10;
    color:#fff;
  }
  .node-link-icon svg { width:12px; height:12px; }
  body.light .node-link-icon { color:#000; }
  .node-img-wrap {
    display:block; width:100%; text-align:center;
    margin-bottom:6px; position:relative; cursor:pointer;
    overflow:visible;
  }
  .node-img-wrap img {
    display:block; border-radius:10px; width:100%;
    max-height:250px; object-fit:contain; user-select:none;
    vertical-align:middle; min-width:60px;
  }
  /* === Feature: Image nodes (normal card styling, comfortable padding, full interactivity) === */
  .node.has-image {
    min-width: 160px;
    max-width: 320px;
    border-radius: 18px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .node.has-image .node-img-wrap {
    margin-bottom: 4px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .node.has-image .node-img-wrap img {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }
  .node.has-image .node-content-wrap:empty {
    display: none;
  }
  .node-img-wrap.img-selected img { outline:2px solid #6366F1; outline-offset:1px; }
  .node-img-wrap.img-selected .img-handle { display:block; }
  .img-handle {
    display:none; position:absolute; width:12px; height:12px;
    background:#6366F1; border:2px solid #fff; border-radius:2px;
    z-index:30; box-shadow:0 1px 4px rgba(0,0,0,0.4);
    pointer-events:all; touch-action:none;
  }
  .img-handle.tl { top:-6px; left:-6px; cursor:nwse-resize; }
  .img-handle.tr { top:-6px; right:-6px; cursor:nesw-resize; }
  .img-handle.bl { bottom:-6px; left:-6px; cursor:nesw-resize; }
  .img-handle.br { bottom:-6px; right:-6px; cursor:nwse-resize; }
  .img-del-btn {
    display:none; position:absolute; bottom:-9px; right:-9px;
    width:20px; height:20px; border-radius:50%;
    background:#ef4444; border:2px solid #fff;
    color:#fff; cursor:pointer; z-index:32;
    pointer-events:all; align-items:center; justify-content:center;
    box-shadow:0 1px 4px rgba(0,0,0,0.4);
  }
  .img-del-btn svg { width:9px; height:9px; display:block; }
  .node-img-wrap.img-selected .img-del-btn { display:flex; }
  .node-note-indicator {
    position:absolute; bottom:-4px; left:16px; right:16px; height:0;
    border-bottom:2px dashed rgba(255,255,255,0.7);
    pointer-events:none;
  }
  body.light .node-note-indicator { border-bottom-color: rgba(0,0,0,0.28); }
  .node-icon-badge {
    position:absolute; top:-10px; right:-6px;
    font-size:17px; line-height:1;
    pointer-events:none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
  }

  /* Facebook Post Node */
  .node.fb-post-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, outline 0.2s;
    user-select: none;
  }
  body:not(.light) .node.fb-post-node {
    background: #1e2229;
    color: #f1f5f9;
    border-color: #334155;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
  .node.fb-post-node:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  }
  .fb-node-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  body:not(.light) .fb-node-header {
    border-bottom-color: rgba(255,255,255,0.08);
  }
  .fb-node-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
  }
  .fb-node-meta {
    flex: 1;
    min-width: 0;
  }
  .fb-node-author {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }
  .fb-node-group {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  body:not(.light) .fb-node-group {
    color: #94a3b8;
  }
  .fb-node-link-btn {
    color: #1877f2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
  }
  .fb-node-link-btn:hover {
    background: rgba(24, 119, 242, 0.12);
  }
  .fb-node-media-wrap {
    position: relative;
    width: 100%;
    background: #0f1117;
    overflow: hidden;
  }
  .fb-node-media-wrap.single .fb-node-img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
    cursor: pointer;
  }
  .fb-node-media-wrap.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .fb-node-media-wrap.grid-2 .fb-node-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    cursor: pointer;
  }
  .fb-node-media-wrap.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
  }
  .fb-node-media-wrap.grid-3 .fb-node-img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    display: block;
    cursor: pointer;
  }
  .fb-node-media-wrap.grid-4,
  .fb-node-media-wrap.grid-multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    max-height: 340px;
    overflow-y: auto;
  }
  .fb-node-media-wrap.grid-4 .fb-node-img,
  .fb-node-media-wrap.grid-multi .fb-node-img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    display: block;
    cursor: pointer;
  }
  .fb-node-img:hover {
    filter: brightness(1.06);
    transition: filter 0.15s;
  }
  .fb-node-play-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    z-index: 2;
  }
  .fb-node-play-badge svg {
    width: 10px;
    height: 10px;
    fill: #ffffff;
  }
  .fb-node-img {
    cursor: zoom-in;
  }
  .fb-node-video-wrap {
    width: 100%;
    background: #000;
  }
  .fb-node-body {
    padding: 10px 12px 10px 12px;
    position: relative;
  }
  .fb-node-text {
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    padding-right: 20px;
  }
  .fb-node-text.expanded {
    display: block !important;
    -webkit-line-clamp: none !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    padding-right: 20px;
  }
  .fb-node-more-btn {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.38;
    transition: opacity 0.15s ease, background 0.15s ease;
    user-select: none;
  }
  .fb-node-more-btn * {
    pointer-events: none;
  }
  .fb-node-more-btn:hover {
    opacity: 0.8;
    background: rgba(128, 128, 128, 0.18) !important;
    transform: none;
    box-shadow: none !important;
  }
  .fb-node-more-btn:active {
    transform: scale(0.92);
    opacity: 1;
  }
  .fb-node-more-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor !important;
    stroke-width: 2.5;
  }


  .node-note-tooltip {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:#1A1A1A; color:#e8e8e6; font-size:12px; padding:7px 12px; border-radius:8px;
    white-space:pre-wrap; width:max-content; max-width:300px; word-break:break-word;
    pointer-events:auto; z-index:120; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.35); line-height:1.5;
    border:1px solid #2e2e2e;
    opacity:0; pointer-events:none;
    transition:opacity 0.15s;
    max-height:180px; overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
  }
  .node-note-tooltip::after { display:none; }
  .node.selected .node-note-tooltip { opacity:1; pointer-events:auto; }
  .node-note-tooltip:hover { background:#222; }
  .node-note-tooltip.editing {
    opacity:1 !important; pointer-events:auto !important; z-index:250 !important;
    cursor:text;
    width:max-content; max-width:300px; min-width:100px;
    padding:7px 12px; border-color:#6366F1; background:#1c1c24;
    box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.5);
    max-height:180px;
    display:grid; grid-template-columns:1fr; grid-template-rows:1fr;
    overflow-y:auto; overflow-x:hidden;
    box-sizing:border-box;
  }
  .node-note-tooltip.editing::after { display:none; }
  .node-note-ghost {
    grid-area:1 / 1 / 2 / 2;
    visibility:hidden;
    white-space:pre-wrap; word-break:break-word;
    font-family:inherit; font-size:12px; line-height:1.5; letter-spacing:inherit;
    pointer-events:none;
    min-width:100px; min-height:18px;
    box-sizing:border-box;
    padding:0; margin:0;
  }
  .node-note-editor {
    grid-area:1 / 1 / 2 / 2;
    display:block; width:100%; height:100%; min-height:18px;
    background:transparent; border:none; outline:none; resize:none;
    color:inherit; font-family:inherit; font-size:12px; line-height:1.5; letter-spacing:inherit;
    padding:0; margin:0; box-sizing:border-box;
    overflow:hidden; white-space:pre-wrap; word-break:break-word;
    caret-color:#818cf8;
  }
  .node-note-editor::placeholder { color:rgba(255,255,255,0.35); font-style:italic; }
  .node-note-tooltip::-webkit-scrollbar,
  .node-note-editor::-webkit-scrollbar {
    width:5px;
  }
  .node-note-tooltip::-webkit-scrollbar-track,
  .node-note-editor::-webkit-scrollbar-track {
    background:transparent;
  }
  .node-note-tooltip::-webkit-scrollbar-thumb,
  .node-note-editor::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,0.28);
    border-radius:6px;
  }
  .node-note-tooltip::-webkit-scrollbar-thumb:hover,
  .node-note-editor::-webkit-scrollbar-thumb:hover {
    background:rgba(255,255,255,0.48);
  }
  .node-link-tooltip {
    position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:#1A1A1A; color:#a5b4fc; font-size:11px; padding:5px 11px; border-radius:8px;
    white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis;
    pointer-events:auto; z-index:120; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,0.35); line-height:1.4;
    border:1px solid #2e2e2e;
    opacity:0; pointer-events:none;
    transition:opacity 0.15s;
  }
  .node-link-tooltip::before {
    content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-bottom-color:#1A1A1A;
  }
  .node.selected .node-link-tooltip { opacity:1; pointer-events:auto; }
  .node-link-tooltip { display:flex; align-items:center; gap:4px; padding:4px 7px 4px 11px; }
  .nlt-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nlt-action {
    flex-shrink:0; background:transparent; border:none; cursor:pointer;
    color:#888; padding:2px 3px; border-radius:3px; line-height:1;
    display:flex; align-items:center; transition:color 0.1s, background 0.1s;
  }
  .nlt-action:hover { background:rgba(255,255,255,0.1); }
  .nlt-action.edit:hover { color:#a5b4fc; }
  .nlt-action.del:hover  { color:#f87171; }
  body.light .nlt-action:hover { background:rgba(0,0,0,0.06); }
  body.light .nlt-action.edit:hover { color:#4338ca; }
  body.light .nlt-action.del:hover  { color:#e53e3e; }
  body.light .node-note-tooltip { background:#fff; color:#1A1A1A; border-color:#E0E0DC; box-shadow:0 4px 12px rgba(0,0,0,0.12); }
  body.light .node-note-tooltip::after { display:none; }
  body.light .node-note-tooltip.editing {
    background:#fff; border-color:#6366F1;
    box-shadow:0 6px 20px rgba(99,102,241,0.18), 0 0 0 1px rgba(99,102,241,0.4);
  }
  body.light .node-note-tooltip.editing::after { display:none; }
  body.light .node-note-editor::placeholder { color:rgba(0,0,0,0.35); }
  body.light .node-note-tooltip::-webkit-scrollbar-thumb,
  body.light .node-note-editor::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0.22);
  }
  body.light .node-note-tooltip::-webkit-scrollbar-thumb:hover,
  body.light .node-note-editor::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.4);
  }
  body.light .node-link-tooltip { background:#fff; color:#4338ca; box-shadow:0 4px 12px rgba(0,0,0,0.12); border:1px solid #e8e8e8; }
  body.light .node-link-tooltip::before { border-bottom-color:#fff; }
  #node-note-popup, #node-link-popup {
    display:none; position:fixed; z-index:400;
    background:#1e1e1e; border-radius:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.55); padding:10px 12px;
    border:1px solid #333; width:280px;
  }
  #node-note-popup.show, #node-link-popup.show { display:block; }
  .nnp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .nnp-title { font-size:11px; color:#888; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
  .nnp-clear {
    background:transparent; border:1px solid #3a3a3a; border-radius:4px;
    padding:2px 8px; font-size:11px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .nnp-clear:hover { background:#2a2a2a; color:#f87171; border-color:#f87171; }
  .nnp-save {
    background:#4338ca; border:1px solid #6366F1; border-radius:4px;
    padding:2px 10px; font-size:11px; color:#fff; cursor:pointer;
    font-family:'Inter',sans-serif; font-weight:600; transition:background 0.1s;
  }
  .nnp-save:hover { background:#3730a3; }
  body.light .nnp-save { background:#6366F1; border-color:#4338ca; }
  body.light .nnp-save:hover { background:#4338ca; }
  #nnp-textarea {
    width:100%; background:#111; border:1px solid #333; border-radius:6px;
    padding:7px 9px; font-size:12px; color:#e8e8e6; outline:none;
    font-family:'Inter',sans-serif; line-height:1.5; resize:vertical; min-height:72px;
    transition:border-color 0.1s; box-sizing:border-box;
  }
  #nnp-textarea:focus { border-color:#6366F1; }
  #nnp-textarea::placeholder { color:#444; }
  #nlp-input {
    width:100%; background:#111; border:1px solid #333; border-radius:6px;
    padding:7px 9px; font-size:12px; color:#a5b4fc; outline:none;
    font-family:'Inter',sans-serif; line-height:1.5;
    transition:border-color 0.1s; box-sizing:border-box;
  }
  #nlp-input:focus { border-color:#6366F1; }
  #nlp-input::placeholder { color:#444; }
  #nlp-open {
    margin-top:6px; width:100%; background:transparent; border:1px solid #3a3a3a;
    border-radius:5px; padding:4px 8px; font-size:11px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  #nlp-open:hover { background:#2a2a2a; color:#a5b4fc; border-color:#6366F1; }
  #node-tag-popup {
    display: none;
    position: fixed;
    z-index: 450;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    padding: 5px 8px;
    align-items: center;
    gap: 5px;
    width: 175px;
    box-sizing: border-box;
    animation: ntpPop 0.12s ease-out;
  }
  #node-tag-popup.show { display: flex; }
  @keyframes ntpPop {
    from { opacity: 0; transform: translateY(3px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .ntp-hash {
    color: #818cf8;
    font-weight: 700;
    font-size: 13px;
    user-select: none;
    line-height: 1;
  }
  #ntp-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f4f4f5;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
    width: 100%;
    padding: 0;
  }
  #ntp-input::placeholder { color: #71717a; font-size: 11px; }
  #ntp-clear-btn {
    background: transparent;
    border: none;
    color: #71717a;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  #ntp-clear-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
  }
  body.light #node-tag-popup {
    background: #ffffff;
    border-color: #d4d4d8;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }
  body.light .ntp-hash { color: #6366f1; }
  body.light #ntp-input { color: #18181b; }
  body.light #ntp-input::placeholder { color: #a1a1aa; }
  body.light #ntp-clear-btn:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
  }
  body.light #node-note-popup, body.light #node-link-popup { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 32px rgba(0,0,0,0.14); }
  body.light .nnp-title { color:#AAA; }
  body.light .nnp-clear { border-color:#D0D0CC; color:#888; }
  body.light .nnp-clear:hover { background:#EAEAE6; color:#e53e3e; border-color:#e53e3e; }
  body.light #nnp-textarea { background:#fff; border-color:#D8D8D4; color:#1A1A1A; }
  body.light #nnp-textarea:focus { border-color:#6366F1; }
  body.light #nnp-textarea::placeholder { color:#BBB; }
  body.light #nlp-input { background:#fff; border-color:#D8D8D4; color:#4338ca; }
  body.light #nlp-input:focus { border-color:#6366F1; }
  body.light #nlp-input::placeholder { color:#BBB; }
  body.light #nlp-open { border-color:#D0D0CC; color:#888; }
  body.light #nlp-open:hover { background:#EAEAE6; color:#4338ca; border-color:#6366F1; }
  #note-popup {
    display:none; position:fixed; z-index:400;
    background:#1e1e1e; border-radius:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.55); padding:10px 12px;
    border:1px solid #333; width:280px;
  }
  #note-popup.show { display:block; }
  .np-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .np-title { font-size:11px; color:#888; font-weight:500; }
  .np-clear {
    background:transparent; border:1px solid #3a3a3a; border-radius:4px;
    padding:2px 8px; font-size:11px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .np-clear:hover { background:#2a2a2a; color:#f87171; border-color:#f87171; }
  #np-textarea {
    width:100%; background:#111; border:1px solid #333; border-radius:6px;
    padding:7px 9px; font-size:12px; color:#e8e8e6; outline:none;
    font-family:'Inter',sans-serif; line-height:1.5; resize:vertical; min-height:72px;
    transition:border-color 0.1s; box-sizing:border-box;
  }
  #np-textarea:focus { border-color:#6366F1; }
  #np-textarea::placeholder { color:#444; }
  body.light #note-popup { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 32px rgba(0,0,0,0.14); }
  body.light .np-title { color:#AAA; }
  body.light .np-clear { border-color:#D0D0CC; color:#888; }
  body.light .np-clear:hover { background:#EAEAE6; color:#e53e3e; border-color:#e53e3e; }
  body.light #np-textarea { background:#fff; border-color:#D8D8D4; color:#1A1A1A; }
  body.light #np-textarea:focus { border-color:#6366F1; }
  body.light #np-textarea::placeholder { color:#BBB; }
  #fp-note-btn.has-note, #fp-tag-btn.has-note { border-color:#3a3a3a; color:#a5b4fc; }
  #fp-note-btn.active, #fp-tag-btn.active { background:#2a2a2a; border-color:#6366F1; }
  body.light #fp-note-btn.has-note, body.light #fp-tag-btn.has-note { color:#4338ca; border-color:#CCC; }
  #bg-image-panel {
    display:none; position:fixed; z-index:200;
    background:#1e1e1e; border:1px solid #333; border-radius:12px;
    padding:12px 14px; width:240px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
  }
  #bg-image-panel.show { display:block; }
  .bgi-canvas-color-row {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
    padding-bottom:10px; border-bottom:1px solid #2a2a2a;
  }
  .bgi-canvas-color-label { font-size:11px; color:#888; flex:1; }
  .bgi-canvas-swatches { display:flex; gap:4px; flex-wrap:wrap; }
  .bgi-cswatch {
    width:18px; height:18px; border-radius:3px; border:2px solid transparent;
    cursor:pointer; transition:transform .1s, border-color .1s; flex-shrink:0;
  }
  .bgi-cswatch:hover { transform:scale(1.15); border-color:rgba(255,255,255,.3); }
  .bgi-cswatch.active { border-color:#6366F1 !important; }
  .bgi-canvas-custom {
    width:18px; height:18px; border-radius:3px; border:1px solid #444; cursor:pointer;
    background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); flex-shrink:0;
  }
  .bgi-canvas-custom:hover { border-color:#aaa; }
  .bgi-reset-btn {
    width:18px; height:18px; border-radius:3px; border:1px solid #444;
    background:transparent; color:#888; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; padding:0;
    transition:border-color .1s, color .1s;
  }
  .bgi-reset-btn:hover { border-color:#aaa; color:#e8e8e6; }
  body.light .bgi-reset-btn { border-color:#CCC; color:#AAA; }
  body.light .bgi-reset-btn:hover { border-color:#888; color:#1A1A1A; }
  .bgi-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .bgi-title { font-size:12px; color:#aaa; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
  .bgi-close {
    background:transparent; border:none; color:#666; font-size:13px; cursor:pointer;
    padding:2px 5px; border-radius:4px; font-family:'Inter',sans-serif;
  }
  .bgi-close:hover { background:#2a2a2a; color:#ccc; }
  .bgi-row { display:flex; gap:6px; margin-bottom:10px; }
  .bgi-upload-btn {
    flex:1; background:#2a2a2a; border:1px solid #3a3a3a; border-radius:6px;
    color:#c8c8c6; font-size:12px; padding:5px 8px; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .bgi-upload-btn:hover { background:#333; }
  .bgi-clear-btn {
    background:transparent; border:1px solid #3a3a3a; border-radius:6px;
    color:#666; font-size:12px; padding:5px 8px; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.1s;
  }
  .bgi-clear-btn:hover { background:#2a2a2a; color:#c8c8c6; }
  .bgi-controls { display:none; }
  .bgi-controls.show { display:block; }
  .bgi-label-row {
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; color:#888; margin-bottom:3px; margin-top:8px;
  }
  .bgi-range {
    width:100%; accent-color:#6366F1; cursor:pointer;
  }
  .bgi-repeat-row { margin-top:10px; font-size:12px; color:#888; }
  .bgi-repeat-row label { display:flex; align-items:center; gap:6px; cursor:pointer; }
  .bgi-repeat-row input[type=checkbox] { accent-color:#6366F1; }
  .bgi-pattern-row {
    display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px;
    padding-bottom:10px; border-bottom:1px solid #2a2a2a;
  }
  .bgi-pat-btn {
    width:34px; height:34px; border-radius:5px; border:1.5px solid #333;
    background:transparent; color:#666; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .1s, color .1s, background .1s; padding:0;
  }
  .bgi-pat-btn:hover { border-color:#888; color:#c8c8c6; }
  .bgi-pat-btn.active { border-color:#6366F1; color:#a5b4fc; background:#1e1e3a; }
  body.light .bgi-pattern-row { border-bottom-color:#E0E0DC; }
  body.light .bgi-pat-btn { border-color:#D0D0CC; color:#AAA; }
  body.light .bgi-pat-btn:hover { border-color:#888; color:#1A1A1A; }
  body.light .bgi-pat-btn.active { border-color:#6366F1; color:#4338ca; background:#EEEEFF; }
  .bgi-gridsize-row {
    display:none; margin-bottom:6px;
  }
  .bgi-gridsize-row.show { display:block; }
  #sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:90;
    width:310px; background:var(--toolbar-bg); border-right:1px solid var(--toolbar-border);
    display:flex; flex-direction:column; transition:transform 0.08s cubic-bezier(.4,0,.2,1);
    user-select:none; font-family:'Inter',sans-serif;
  }
  #sidebar.hidden { transform:translateX(-310px); }
  #edge-toggle-group {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 180;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    transition: left 0.08s cubic-bezier(.4,0,.2,1);
  }
  body:not(.sidebar-hidden) #edge-toggle-group { left: 310px; }
  body.inbox-open #edge-toggle-group { left: 310px !important; }
  body.sidebar-hidden:not(.inbox-open) #edge-toggle-group { left: 0 !important; }

  #sidebar-toggle, #box-toggle {
    pointer-events: auto;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 20px;
    height: 44px;
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--toolbar-text);
    opacity: 0.82;
    transition: background 0.15s, opacity 0.15s, color 0.15s, border-color 0.15s;
    box-shadow: 2px 0 6px rgba(0,0,0,0.15);
  }
  #sidebar-toggle:hover, #box-toggle:hover {
    background: var(--btn-hover);
    opacity: 1;
  }
  #box-toggle.active, #sidebar-toggle.active {
    color: #818cf8;
    opacity: 1;
    background: var(--btn-hover);
    border-color: rgba(129, 140, 248, 0.4);
  }
  
  #toolbar-inbox-btn { display: none !important; }
  body:not(.sidebar-hidden) #toolbar { left:310px; }
  body:not(.sidebar-hidden) #canvas-wrap { left:310px; }
  body:not(.sidebar-hidden) #format-bar { left:310px; }
  body:not(.sidebar-hidden) #view-controls { left:calc(310px + 18px); }
  .sb-header {
    height:54px; display:flex; align-items:center; padding:0 14px;
    border-bottom:1px solid var(--toolbar-border); gap:8px; flex-shrink:0; background:var(--toolbar-bg);
  }
  .sb-logo {
    font-size:14px; font-weight:600; color:var(--toolbar-text); flex:1;
    display:flex; align-items:center; gap:7px;
  }
  .sb-count-badge {
    font-size:11px; font-weight:500; opacity:0.5; color:var(--toolbar-text);
  }
  .sb-header-actions { display:flex; align-items:center; gap:3px; }
  .sb-icon-btn {
    width:28px; height:28px; border-radius:6px; border:1px solid transparent;
    background:transparent; color:var(--toolbar-text); opacity:0.75;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.12s; flex-shrink:0;
  }
  .sb-icon-btn:hover { background:var(--btn-hover); opacity:1; }
  .sb-search-wrap {
    padding:8px 10px; flex-shrink:0;
  }
  .sb-search {
    width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--toolbar-border);
    border-radius:6px; padding:6px 10px 6px 28px; font-size:12px;
    color:var(--toolbar-text); font-family:'Inter',sans-serif; outline:none;
    transition:border-color 0.15s, background 0.15s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:8px center;
  }
  body.light .sb-search { background-color:rgba(0,0,0,0.03); }
  .sb-search:focus { border-color:rgba(99,102,241,0.6); background-color:rgba(255,255,255,0.06); }
  body.light .sb-search:focus { background-color:#fff; }
  .sb-search::placeholder { color:var(--toolbar-text); opacity:0.4; }
  .sb-tabs {
    display:flex; gap:2px; padding:2px 10px 6px;
    background:var(--toolbar-bg); border-bottom:1px solid var(--toolbar-border); flex-shrink:0;
  }
  .sb-tab {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:5px 4px; font-size:12px; font-weight:500; color:var(--toolbar-text); opacity:0.6;
    border:none; background:transparent; border-radius:5px; cursor:pointer;
    transition:all 0.12s; font-family:'Inter',sans-serif;
  }
  .sb-tab:hover { opacity:0.9; background:var(--btn-hover); }
  .sb-tab.active { opacity:1; background:var(--btn-hover); font-weight:600; }
  .sb-tab-badge {
    font-size:10px; background:rgba(255,255,255,0.1); color:var(--toolbar-text);
    padding:0 5px; border-radius:8px; line-height:1.4; font-weight:600;
  }
  body.light .sb-tab-badge { background:rgba(0,0,0,0.08); }
  .sb-filter-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 10px; gap:6px; border-bottom:1px solid var(--toolbar-border); flex-shrink:0;
    background:var(--toolbar-bg);
  }
  .sb-select {
    flex:1; background:transparent; border:1px solid var(--toolbar-border); border-radius:5px;
    color:var(--toolbar-text); opacity:0.85; font-size:11px; padding:4px 6px; outline:none;
    font-family:'Inter',sans-serif; cursor:pointer; font-weight:500;
  }
  .sb-select:focus { border-color:rgba(99,102,241,0.6); opacity:1; }
  .sb-select option { background:var(--toolbar-bg); color:var(--toolbar-text); }
  .sb-active-tag-banner {
    display:flex; align-items:center; justify-content:space-between;
    padding:5px 12px; background:rgba(99,102,241,0.15); color:var(--toolbar-text);
    font-size:11px; font-weight:600; border-bottom:1px solid var(--toolbar-border); flex-shrink:0;
  }
  .sb-active-tag-banner button {
    background:none; border:none; color:var(--toolbar-text); opacity:0.7; cursor:pointer; font-size:13px;
  }
  .sb-section {
    padding:8px 12px 3px; font-size:11px; color:var(--toolbar-text); opacity:0.45;
    text-transform:uppercase; letter-spacing:.06em; font-weight:600; flex-shrink:0;
    display:flex; align-items:center; justify-content:space-between;
  }
  .sb-list { flex:1; overflow-y:auto; padding:4px 0 12px; }
  .sb-list::-webkit-scrollbar { width:4px; }
  .sb-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }
  body.light .sb-list::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }

  /* Single-line minimalist project item */
  .sb-item {
    display:flex; align-items:center; gap:7px;
    height:32px; padding:0 8px; cursor:pointer; border-radius:6px; margin:1px 8px;
    transition:background 0.12s, color 0.12s; background:transparent;
    border:1px solid transparent; user-select:none; color:var(--toolbar-text);
  }
  .sb-item:hover { background:var(--btn-hover); }
  .sb-item.active {
    background:var(--btn-hover);
    font-weight:600;
  }
  .sb-item.pinned:not(.active) {
  }
  .sb-item.child {
    margin-left:24px; margin-right:8px;
  }
  .sb-pin-btn {
    background:none; border:none; cursor:pointer; padding:2px;
    line-height:1; display:inline-flex; align-items:center; justify-content:center;
    transition:transform 0.15s ease, opacity 0.15s ease; flex-shrink:0; border-radius:4px;
    opacity:0.75;
  }
  .sb-pin-btn svg {
    width:13px; height:13px; display:block;
  }
  .sb-item:hover .sb-pin-btn { opacity:1; }
  .sb-pin-btn.pinned { opacity:1 !important; }
  .sb-pin-btn:hover { opacity:1 !important; transform:scale(1.22); }
  .sb-item-icon {
    flex-shrink:0; opacity:0.55; color:var(--toolbar-text);
    transition:opacity 0.12s;
  }
  .sb-item:hover .sb-item-icon,
  .sb-item.active .sb-item-icon { opacity:0.9; }
  .sb-item-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    margin:0 2px; display:inline-block; opacity:0.85;
    transition:transform 0.15s ease, opacity 0.15s ease;
  }
  .sb-item:hover .sb-item-dot { opacity:1; transform:scale(1.25); }
  .sb-item.active .sb-item-dot { opacity:1; transform:scale(1.25); box-shadow:0 0 6px rgba(99,102,241,0.5); }
  .sb-item-name {
    flex:1; min-width:0; font-size:13px; font-weight:500;
    color:var(--toolbar-text); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; line-height:1.2;
  }
  .sb-more-btn {
    background:none; border:none; cursor:pointer; padding:3px;
    color:var(--toolbar-text); opacity:0; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:opacity 0.12s, background 0.12s;
    width:22px; height:22px;
  }
  .sb-item:hover .sb-more-btn { opacity:0.55; }
  .sb-more-btn:hover { opacity:1 !important; background:rgba(255,255,255,0.08); }
  body.light .sb-more-btn:hover { background:rgba(0,0,0,0.06); }

  /* 2-level folder styles */
  .sb-folder-group { margin:2px 0; }
  .sb-folder-header {
    display:flex; align-items:center; gap:6px;
    height:32px; padding:0 8px; margin:1px 8px;
    border-radius:6px; cursor:pointer; font-size:13px; font-weight:600;
    color:var(--toolbar-text); background:transparent; border:1px solid transparent;
    transition:background 0.12s; user-select:none;
  }
  .sb-folder-header:hover { background:var(--btn-hover); }
  .sb-folder-arrow {
    display:flex; align-items:center; justify-content:center;
    width:14px; height:14px; flex-shrink:0; opacity:0.5;
    color:var(--toolbar-text); transition:transform 0.15s ease;
  }
  .sb-folder-header.open .sb-folder-arrow { transform:rotate(90deg); }
  .sb-folder-icon { opacity:0.7; color:var(--toolbar-text); flex-shrink:0; }
  .sb-folder-title {
    flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .sb-folder-count { font-size:11px; opacity:0.5; font-weight:500; margin-left:2px; }
  .sb-folder-actions {
    display:flex; align-items:center; gap:2px; opacity:0; transition:opacity 0.12s;
  }
  .sb-folder-header:hover .sb-folder-actions { opacity:1; }
  .sb-folder-act-btn {
    background:none; border:none; cursor:pointer; padding:3px;
    border-radius:4px; color:var(--toolbar-text); opacity:0.6;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; transition:all 0.12s;
  }
  .sb-folder-act-btn:hover { opacity:1; background:rgba(255,255,255,0.08); }
  body.light .sb-folder-act-btn:hover { background:rgba(0,0,0,0.06); }
  .sb-folder-body { display:none; }
  .sb-folder-body.open { display:block; }
  .sb-btn-add-folder {
    margin:6px 10px; width:calc(100% - 20px); padding:6px 0; background:transparent;
    border:1px dashed var(--toolbar-border); border-radius:6px; color:var(--toolbar-text);
    opacity:0.75; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.15s;
    font-family:'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .sb-btn-add-folder:hover { opacity:1; background:var(--btn-hover); border-color:var(--toolbar-text); }
  .sb-ctx-menu {
    position:fixed; z-index:400; background:var(--toolbar-bg); border:1px solid var(--toolbar-border);
    border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.45); padding:4px 0;
    min-width:190px; font-size:12.5px; color:var(--toolbar-text); font-family:'Inter',sans-serif;
  }
  .sb-ctx-item {
    padding:7px 12px; cursor:pointer; display:flex; align-items:center; gap:8px;
    transition:background 0.1s; font-weight:500;
  }
  .sb-ctx-item:hover { background:var(--btn-hover); }
  .sb-ctx-item.danger { color:#f87171; }
  .sb-ctx-item.danger:hover { background:rgba(239,68,68,0.15); color:#fca5a5; }
  .sb-ctx-sep { height:1px; background:var(--toolbar-border); margin:3px 0; }
  .sb-ctx-item svg { flex-shrink:0; opacity:0.75; }
  .sb-modal-wrap {
    position:fixed; inset:0; z-index:350; background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  }
  .sb-modal-box {
    width:92%; max-width:480px; background:var(--toolbar-bg, #1a1a22);
    border:1px solid var(--toolbar-border, #383848); border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,0.6); color:var(--toolbar-text, #eee);
    overflow:hidden; display:flex; flex-direction:column; max-height:88vh;
    animation:sbModalIn 0.18s cubic-bezier(.2,0,0,1);
  }
  @keyframes sbModalIn { from { opacity:0; transform:scale(0.96) translateY(6px); } to { opacity:1; transform:scale(1) translateY(0); } }
  .sb-modal-header {
    padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--toolbar-border, #2e2e2e);
  }
  .sb-modal-title { font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
  .sb-modal-close { background:none; border:none; color:#888; font-size:16px; cursor:pointer; padding:2px 6px; border-radius:4px; }
  .sb-modal-close:hover { background:rgba(255,255,255,0.08); color:#fff; }
  .sb-modal-body { padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
  .sb-modal-footer {
    padding:12px 18px; border-top:1px solid var(--toolbar-border, #2e2e2e);
    display:flex; align-items:center; justify-content:flex-end; gap:8px; background:rgba(0,0,0,0.15);
  }
  .sb-form-group { display:flex; flex-direction:column; gap:5px; }
  .sb-form-row { display:flex; gap:10px; }
  .sb-form-label { font-size:11px; font-weight:600; color:#999; text-transform:uppercase; letter-spacing:0.04em; }
  .sb-form-input, .sb-form-select {
    width:100%; background:#121212; border:1px solid #2e2e2e; border-radius:6px;
    padding:8px 10px; font-size:12.5px; color:#e0e0e0; font-family:'Inter',sans-serif;
    outline:none; transition:border-color 0.15s;
  }
  .sb-form-input:focus, .sb-form-select:focus { border-color:#6366f1; }
  .sb-btn {
    padding:7px 14px; font-size:12px; font-weight:500; border-radius:6px;
    border:1px solid #333; background:#222; color:#ccc; cursor:pointer;
    transition:all 0.15s; font-family:'Inter',sans-serif;
  }
  .sb-btn:hover { background:#2e2e2e; color:#fff; }
  .sb-btn.primary { background:#6366f1; border-color:#6366f1; color:#fff; font-weight:600; }
  .sb-btn.primary:hover { background:#4f52d6; border-color:#4f52d6; }
  .sb-templates-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sb-tpl-card {
    border:1px solid #2e2e2e; background:#161616; border-radius:8px;
    padding:10px; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; gap:3px;
  }
  .sb-tpl-card:hover { border-color:#555; background:#1c1c1c; }
  .sb-tpl-card.active { border-color:#6366f1; background:#1c1d33; box-shadow:0 0 0 1px #6366f1; }
  .sb-tpl-icon { font-size:18px; margin-bottom:2px; }
  .sb-tpl-name { font-size:12px; font-weight:600; color:#eee; }
  .sb-tpl-desc { font-size:10px; color:#777; line-height:1.3; }
  .sb-color-picker { display:flex; gap:8px; align-items:center; }
  .sb-color-swatch {
    width:22px; height:22px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition:transform 0.12s;
  }
  .sb-color-swatch:hover { transform:scale(1.18); }
  .sb-color-swatch.active { border-color:#fff; transform:scale(1.18); box-shadow:0 0 8px rgba(0,0,0,0.5); }
  .history-snap-badge {
    font-size:10px; padding:1px 6px; border-radius:4px;
    background:rgba(99,102,241,0.2); color:#818cf8; font-weight:600;
  }
  .history-snap-badge.auto {
    background:rgba(255,255,255,0.08); color:#888; font-weight:normal;
  }
  .history-del-btn {
    background:transparent; border:none; cursor:pointer; color:#777;
    font-size:12px; padding:4px 6px; border-radius:4px; transition:all 0.15s;
  }
  .history-del-btn:hover { background:rgba(239,68,68,0.15); color:#ef4444; }
  .sb-rename-input {
    flex:1; background:#1a1a2e; border:1px solid #6366F1; border-radius:4px;
    padding:2px 5px; font-size:12px; color:#c8c8c6; outline:none;
    font-family:'Inter',sans-serif;
  }
  .sb-empty {
    padding:24px 14px; text-align:center; font-size:12px; color:#555; line-height:1.6;
  }
  .sb-trash-header {
    display:flex; align-items:center; gap:6px; padding:4px 10px;
    cursor:pointer; flex-shrink:0;
  }
  .sb-trash-header:hover .sb-section { color:#888; }
  .sb-trash-toggle { font-size:10px; color:#444; margin-left:auto; }
  .sb-trash-body { flex-shrink:0; overflow:hidden; padding-bottom:8px; }
  .sb-trash-empty-btn {
    width:calc(100% - 20px); margin:4px 10px;
    background:transparent; border:1px solid #3a1a1a; border-radius:5px;
    color:#f87171; font-size:11px; padding:5px 0; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background 0.15s;
  }
  .sb-trash-empty-btn:hover { background:#2a1010; }
  #sidebar-backdrop {
    display:none; position:fixed; inset:0; z-index:89;
    background:rgba(0,0,0,0.5);
  }
  #sidebar-backdrop.show { display:block; }
  #format-sheet {
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:180;
    background:#1a1a1a; border-top:1px solid #2e2e2e;
    border-radius:16px 16px 0 0;
    padding:0 0 env(safe-area-inset-bottom,0);
    transform:translateY(100%);
    transition:transform 0.28s cubic-bezier(.4,0,.2,1);
    touch-action:none;
  }
  #format-sheet.show { transform:translateY(0); }
  body.light #format-sheet { background:#fff; border-top-color:#e0e0dc; }
  .fs-handle {
    width:36px; height:4px; border-radius:2px; background:#3a3a3a;
    margin:10px auto 0; cursor:grab;
  }
  body.light .fs-handle { background:#ccc; }
  .fs-title {
    font-size:11px; color:#666; text-transform:uppercase; letter-spacing:.07em;
    font-weight:600; padding:10px 16px 6px; display:flex; align-items:center;
    justify-content:space-between;
  }
  .fs-close {
    background:transparent; border:none; color:#555; cursor:pointer;
    padding:4px; border-radius:4px; display:flex; align-items:center;
    touch-action:manipulation;
  }
  .fs-close:active { background:#2e2e2e; }
  body.light .fs-close:active { background:#eaeae6; }
  .fs-row {
    display:flex; align-items:center; padding:6px 12px; gap:6px;
    flex-wrap:wrap;
  }
  .fs-label {
    font-size:11px; color:#666; width:52px; flex-shrink:0;
  }
  body.light .fs-label { color:#aaa; }
  .fs-btn {
    background:#242424; border:1px solid #333; border-radius:8px;
    color:#c8c8c6; font-family:'Inter',sans-serif;
    padding:7px 12px; font-size:13px; cursor:pointer;
    display:flex; align-items:center; gap:5px;
    transition:background 0.1s; touch-action:manipulation;
    min-height:36px;
  }
  .fs-btn:active { background:#2e2e2e; }
  .fs-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  .fs-btn.bold-m { font-weight:700; }
  .fs-btn.italic-m { font-style:italic; }
  .fs-btn.underline-m { text-decoration:underline; }
  body.light .fs-btn { background:#f0f0ee; border-color:#ddd; color:#1a1a1a; }
  body.light .fs-btn:active { background:#e0e0dc; }
  body.light .fs-btn.active { background:#4338ca; color:#fff; }
  .fs-swatch-btn {
    display:flex; align-items:center; gap:7px;
    background:#242424; border:1px solid #333; border-radius:8px;
    padding:7px 12px; font-size:13px; cursor:pointer; color:#c8c8c6;
    touch-action:manipulation; min-height:36px;
  }
  body.light .fs-swatch-btn { background:#f0f0ee; border-color:#ddd; color:#1a1a1a; }
  .fs-swatch {
    width:18px; height:18px; border-radius:3px; border:1.5px solid #555; flex-shrink:0;
  }
  .fs-input {
    flex:1; background:#242424; border:1px solid #333; border-radius:8px;
    padding:7px 10px; font-size:13px; color:#c8c8c6; outline:none;
    font-family:'Inter',sans-serif; min-height:36px;
  }
  .fs-input:focus { border-color:#6366F1; }
  body.light .fs-input { background:#f0f0ee; border-color:#ddd; color:#1a1a1a; }
  .fs-sep { height:1px; background:#222; margin:2px 0; flex-shrink:0; }
  body.light .fs-sep { background:#e8e8e4; }
  #global-format-panel {
    display:none; position:fixed; z-index:500;
    background:#1e1e1e; border:1px solid #333; border-radius:12px;
    padding:0; width:260px; max-height:80vh; overflow-y:auto;
    box-shadow:0 8px 32px rgba(0,0,0,0.55);
  }
  #global-format-panel.show { display:block; }
  #global-format-panel::-webkit-scrollbar { width:5px; }
  #global-format-panel::-webkit-scrollbar-track { background:transparent; }
  #global-format-panel::-webkit-scrollbar-thumb { background:#444; border-radius:3px; }
  .gfp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px 8px; border-bottom:1px solid #2a2a2a; position:sticky; top:0;
    background:#1e1e1e; z-index:1;
  }
  .gfp-title {
    font-size:11px; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  }
  .gfp-close {
    background:transparent; border:none; color:#555; font-size:13px; cursor:pointer;
    padding:2px 5px; border-radius:4px; font-family:'Inter',sans-serif; line-height:1;
  }
  .gfp-close:hover { background:#2a2a2a; color:#ccc; }
  .gfp-section { padding:10px 14px; border-bottom:1px solid #2a2a2a; }
  .gfp-section:last-child { border-bottom:none; }
  .gfp-section-label {
    font-size:10px; color:#555; font-weight:600; text-transform:uppercase;
    letter-spacing:.07em; margin-bottom:8px;
  }
  .gfp-row { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
  .gfp-row:last-child { margin-bottom:0; }
  .gfp-label { font-size:12px; color:#888; width:60px; flex-shrink:0; }
  .gfp-select {
    flex:1; background:#111; border:1px solid #333; border-radius:5px;
    padding:4px 7px; font-size:12px; color:#c8c8c6; outline:none;
    font-family:'Inter',sans-serif; cursor:pointer;
  }
  .gfp-select:focus { border-color:#6366F1; }
  .gfp-btn-group { display:flex; gap:3px; }
  .gfp-btn {
    background:#1a1a1a; border:1px solid #333; border-radius:5px;
    padding:4px 9px; font-size:12px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background .1s, color .1s, border-color .1s;
    display:flex; align-items:center; justify-content:center; min-width:28px;
  }
  .gfp-btn:hover { background:#2a2a2a; color:#c8c8c6; border-color:#555; }
  .gfp-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  .gfp-btn.bold-b { font-weight:700; }
  .gfp-btn.italic-b { font-style:italic; }
  .gfp-btn.underline-b { text-decoration:underline; }
  .gfp-range-row { display:flex; align-items:center; gap:6px; margin-bottom:7px; }
  .gfp-range-row:last-child { margin-bottom:0; }
  .gfp-range-label { font-size:12px; color:#888; width:60px; flex-shrink:0; }
  .gfp-range { flex:1; accent-color:#6366F1; cursor:pointer; }
  .gfp-range-val { font-size:11px; color:#666; width:36px; text-align:right; flex-shrink:0; }
  .gfp-shadow-group { display:flex; gap:5px; }
  .gfp-shadow-btn {
    flex:1; background:#1a1a1a; border:1px solid #333; border-radius:5px;
    padding:4px 0; font-size:11px; color:#888; cursor:pointer; text-align:center;
    font-family:'Inter',sans-serif; transition:background .1s, color .1s, border-color .1s;
  }
  .gfp-shadow-btn:hover { background:#2a2a2a; color:#c8c8c6; border-color:#555; }
  .gfp-shadow-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  .gfp-line-group { display:flex; gap:3px; }
  .gfp-line-btn {
    flex:1; background:#1a1a1a; border:1px solid #333; border-radius:5px;
    padding:6px 0; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .1s, border-color .1s;
  }
  .gfp-line-btn:hover { background:#2a2a2a; border-color:#555; }
  .gfp-line-btn.active { background:#3730a3; border-color:#6366F1; }
  .gfp-line-btn svg { display:block; }
  .gfp-reset-btn {
    width:100%; margin-top:2px;
    background:transparent; border:1px solid #2e2e2e; border-radius:6px;
    padding:6px 0; font-size:12px; color:#555; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background .1s, color .1s, border-color .1s;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .gfp-reset-btn:hover { background:#1a1a1a; color:#c8c8c6; border-color:#444; }
  body.light #global-format-panel { background:#F7F7F5; border-color:#E0E0DC; box-shadow:0 8px 32px rgba(0,0,0,0.14); }
  body.light .gfp-header { background:#F7F7F5; border-bottom-color:#E0E0DC; }
  body.light .gfp-title { color:#AAA; }
  body.light .gfp-close { color:#AAA; }
  body.light .gfp-close:hover { background:#EAEAE6; color:#1A1A1A; }
  body.light .gfp-section { border-bottom-color:#E0E0DC; }
  body.light .gfp-section-label { color:#BBB; }
  body.light .gfp-label { color:#AAA; }
  body.light .gfp-range-label { color:#AAA; }
  body.light .gfp-range-val { color:#AAA; }
  body.light .gfp-select { background:#fff; border-color:#D8D8D4; color:#1A1A1A; }
  body.light .gfp-btn { background:#f0f0ee; border-color:#ddd; color:#666; }
  body.light .gfp-btn:hover { background:#e0e0dc; color:#1A1A1A; border-color:#ccc; }
  body.light .gfp-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  body.light .gfp-shadow-btn { background:#f0f0ee; border-color:#ddd; color:#666; }
  body.light .gfp-shadow-btn:hover { background:#e0e0dc; color:#1A1A1A; }
  body.light .gfp-shadow-btn.active { background:#4338ca; color:#fff; border-color:#6366F1; }
  body.light .gfp-line-btn { background:#f0f0ee; border-color:#ddd; }
  body.light .gfp-line-btn:hover { background:#e0e0dc; border-color:#ccc; }
  body.light .gfp-line-btn.active { background:#EEEEFF; border-color:#6366F1; }
  body.light .gfp-reset-btn { border-color:#E0E0DC; color:#AAA; }
  body.light .gfp-reset-btn:hover { background:#EAEAE6; color:#1A1A1A; border-color:#CCC; }
  .gfp-clearbg-btn {
    width:100%; margin-bottom:6px;
    background:transparent; border:1px solid #2e2e2e; border-radius:6px;
    padding:6px 0; font-size:12px; color:#888; cursor:pointer;
    font-family:'Inter',sans-serif; transition:background .1s, color .1s, border-color .1s;
    display:flex; align-items:center; justify-content:center; gap:5px;
  }
  .gfp-clearbg-btn:hover { background:#2a1a1a; color:#f87171; border-color:#5a2e2e; }
  .gfp-clearbg-btn.active { background:#3a1a1a; color:#f87171; border-color:#8b3333; }
  body.light .gfp-clearbg-btn { border-color:#E0E0DC; color:#888; }
  body.light .gfp-clearbg-btn:hover { background:#FFF0F0; color:#e53e3e; border-color:#FFCACA; }
  body.light .gfp-clearbg-btn.active { background:#FFF0F0; color:#e53e3e; border-color:#FFAAAA; }
  /* ── Responsive: Sidebar open on desktop (1200px+) ── */
  /* When sidebar is open on large screens, toolbar+canvas shift right 310px — handled above. */

  /* ── Responsive: Medium screens 901-1200px ── */
  @media (max-width:1200px) {
    /* Toolbar gets tighter — hide text labels on grouped buttons */
    .tb-group-btn > span { display:none; }
    /* App brand text hidden to save space */
    #app-brand span:last-child { display:none; }
    /* Title input narrower */
    #toolbar .title-input { max-width:120px; }
  }

  /* ── Responsive: Tablet 901-900px (sidebar overlay mode) ── */
  @media (max-width:900px) {
    /* Sidebar overlays content — no layout shift */
    #sidebar { z-index:200; }
    #sidebar.hidden { transform:translateX(-310px); }
    body:not(.sidebar-hidden) #toolbar { left:0 !important; }
    body:not(.sidebar-hidden) #canvas-wrap { left:0 !important; }
    body:not(.sidebar-hidden) #format-bar { left:0 !important; }
    body:not(.sidebar-hidden) #view-controls { left:14px !important; }
    body:not(.sidebar-hidden) #edge-toggle-group { left:310px; }
    /* Backdrop shows when sidebar is open on tablet (not desktop, where layout shifts instead) */
    #sidebar-backdrop { z-index:199; }
    body:not(.sidebar-hidden) #sidebar-backdrop { display:block; }
    /* App brand text hidden */
    #app-brand span:last-child { display:none; }
    /* Toolbar scrollable so items don't overflow */
    #toolbar {
      overflow-x:auto; overflow-y:hidden;
      scrollbar-width:none;
    }
    #toolbar::-webkit-scrollbar { height:0; }
    /* Button labels hidden */
    #btn-new span, #btn-open span, #btn-save-json span,
    #btn-export-md span, #btn-fit span, #btn-auto-layout span,
    #btn-bg-image span, #btn-help { display:none; }
    #btn-new, #btn-open, #btn-save-json, #btn-export-md,
    #btn-fit, #btn-auto-layout, #btn-bg-image { padding:5px 7px; }
    #toolbar .title-input { width:100px; max-width:100px; }
    /* Spacer shrinks to push content together */
    #toolbar .spacer { flex:0 0 auto; min-width:4px; }
  }

  /* ── Responsive: Mobile ≤600px ── */
  @media (max-width:600px) {
    #toolbar {
      padding:0 6px; gap:2px; height:54px; min-height:54px;
      flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    }
    #toolbar::-webkit-scrollbar { height:0; }
    /* App brand completely hidden on mobile */
    #app-brand { display:none !important; }
    #toolbar .title-input { display:none; }
    #toolbar .title-edit-btn { display:none; }
    #toolbar .sep { display:none; }
    #toolbar .spacer { display:none; }
    #btn-new, #btn-open, #btn-save-json, #btn-export-md,
    #btn-bg-image, #btn-help { display:none !important; }
    /* Grouped menus still accessible */
    .tb-group-btn > span { display:none; }
    .tb-group-btn { padding:5px 7px; }
    #undo-btn, #redo-btn, #btn-fit, #btn-auto-layout, #btn-theme { flex-shrink:0; padding:5px 6px; }
    #btn-fit span, #btn-auto-layout span { display:none; }
    #btn-fit, #btn-auto-layout { padding:5px 7px; }
    #toolbar-overflow-btn { display:none !important; }
    #canvas-wrap { top:104px; }
    #format-bar {
      padding:4px 6px; gap:2px;
      min-height:42px; flex-wrap:wrap; overflow:visible;
    }
    .fb-color-btn { padding:2px 5px; }
    .fb-color-btn > :not(.fb-swatch) { display:none; }
    #fb-icon-label { display:none; }
    #fb-icon-btn { min-width:auto; padding:2px 5px; }
    #fb-more-btn { display:none !important; }
    #fb-more-popup { display:contents !important; }
    #fp-link-label, #fp-note-label { display:none; }
    #fp-link-btn, #fp-note-btn { padding:2px 5px; min-width:auto; }
    #format-sheet { display:none !important; }
    /* Sidebar full overlay on mobile */
    #sidebar { width:80vw; max-width:300px; z-index:300; }
    #sidebar-backdrop { z-index:299; }
    #sidebar.hidden { transform:translateX(-100%); }
    body:not(.sidebar-hidden) #edge-toggle-group { left:min(80vw, 300px); }
    body:not(.sidebar-hidden) #sidebar-backdrop { display:block; }
    #sidebar-toggle { width:20px; height:44px; border-radius:0 8px 8px 0; }
    /* Context menu larger touch targets */
    .ctx-item { padding:12px 18px; font-size:14px; }
    .ctx-item .ctx-key { display:none; }
    .node { padding:11px 18px; }
    .node-note-tooltip { max-width:200px; }
    .node-link-tooltip { max-width:180px; }
    #icon-picker { width:calc(100vw - 24px); left:12px !important; }
    #color-palette { left:12px !important; right:12px; width:auto; }
    #bg-image-panel { width:calc(100vw - 16px); }
    #help-box { min-width:0; width:90vw; padding:20px 18px; }
  }

  /* === FEATURE 2: RELATIONSHIPS (CROSS-LINKS) === */
  .rel-group { cursor: pointer; }
  .rel-line {
    stroke-linecap: round;
    transition: stroke-width 0.15s, stroke 0.15s, filter 0.15s;
    cursor: pointer;
  }
  .rel-group:hover .rel-line {
    stroke: #a5b4fc !important;
    stroke-width: 3.2px !important;
  }
  .rel-group.rel-selected .rel-line {
    stroke: #ec4899 !important;
    stroke-width: 2.8 !important;
    filter: none !important;
  }
  /* Interactive HTML Relationship Button Badge on Canvas - Compact, neat font, no glare */
  .rel-node-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 25;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    background: #1e1b4b;
    color: #e0e7ff;
    border: 1px solid #818cf8;
    border-radius: 12px;
    padding: 3px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
  }
  body.light .rel-node-btn {
    background: #ffffff;
    color: #1e1b4b;
    border-color: #6366f1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .rel-node-btn:hover {
    transform: translate(-50%, -50%) scale(1.04);
    border-color: #a5b4fc;
    background: #2e2a6b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  }
  body.light .rel-node-btn:hover {
    background: #f5f3ff;
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .rel-node-btn:active {
    transform: translate(-50%, -50%) scale(0.96);
  }
  /* Selected state for relation button - clean accent without blinding glow */
  .rel-node-btn.selected {
    border-color: #ec4899 !important;
    background: #2d122c !important;
    color: #fbcfe8 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
    transform: translate(-50%, -50%);
  }
  body.light .rel-node-btn.selected {
    background: #fdf2f8 !important;
    color: #be185d !important;
    border-color: #ec4899 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* Inline fast editor on label double-click */
  .rel-inline-editor {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 120;
    background: #1e1b4b;
    color: #f1f5f9;
    border: 1.5px solid #ec4899;
    border-radius: 12px;
    padding: 2px 9px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    min-width: 70px;
    max-width: 280px;
    white-space: nowrap;
  }
  body.light .rel-inline-editor {
    background: #ffffff;
    color: #1e1b4b;
    border-color: #ec4899;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  /* Interactive control point handle for curve bending */
  .rel-curve-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ec4899;
    border: 2.5px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    cursor: grab;
    z-index: 35;
    transition: transform 0.12s ease, background 0.12s ease;
  }
  .rel-curve-handle:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background: #f43f5e;
  }
  .rel-curve-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
  }
  /* Calm dashed preview line - rock solid, no jitter or filter clipping */
  #rel-preview-line {
    stroke: #818cf8 !important;
    stroke-width: 2px !important;
    stroke-dasharray: 6 4 !important;
    filter: none !important;
    pointer-events: none !important;
  }
  /* Source node active in connect mode - calm outline, no blinding neon glow */
  .node.rel-source-active {
    outline: 2px solid #818cf8 !important;
    outline-offset: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
  }
  /* Target candidate in connect mode - calm dashed outline, no jump/pulse */
  .node.rel-target-candidate {
    outline: 2px dashed #10b981 !important;
    outline-offset: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important;
    cursor: pointer !important;
  }
  body.is-connecting-rel, body.is-connecting-rel #canvas-wrap {
    cursor: crosshair !important;
  }
  #rel-connect-banner {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #1e1b4b;
    border: 1.5px solid #818cf8;
    color: #e0e7ff;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  body.light #rel-connect-banner {
    background: #ffffff;
    border-color: #6366f1;
    color: #1e1b4b;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
  #rel-connect-cancel-btn {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.1s;
  }
  #rel-connect-cancel-btn:hover { background: #dc2626; }
  /* Context menu for relationship line */
  #rel-ctx-menu {
    display: none;
    position: fixed;
    z-index: 520;
    background: var(--ctx-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: 8px;
    box-shadow: var(--ctx-shadow);
    padding: 4px 0;
    min-width: 170px;
  }
  #rel-ctx-menu.show { display: block; }
  #relation-popover {
    position: fixed;
    z-index: 220;
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    color: var(--toolbar-text);
    display: none;
    flex-direction: column;
    gap: 8px;
    min-width: 190px;
  }
  #relation-popover input {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--toolbar-border);
    border-radius: 5px;
    color: var(--toolbar-text);
    padding: 4px 8px;
    font-size: 12px;
    outline: none;
  }
  #relation-popover input:focus { border-color: #6366F1; }
  .rel-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .rel-pop-btn {
    padding: 3px 8px; border-radius: 5px; font-size: 11px; cursor: pointer;
    border: 1px solid var(--toolbar-border); background: var(--btn-hover); color: var(--toolbar-text);
  }
  .rel-pop-btn.danger { background: #dc2626; color: #fff; border-color: #ef4444; }

  /* === FEATURE 3: FOCUS MODE & ZEN MODE === */
  body.focus-mode .node:not(.focus-active):not(.focus-child),
  body.focus-mode .edge-path:not(.focus-edge),
  body.focus-mode .sticky-note {
    opacity: 0.12 !important;
    filter: blur(1.5px);
    pointer-events: none !important;
    transition: opacity 0.25s, filter 0.25s;
  }
  #focus-banner {
    position: fixed;
    top: 106px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #18181b;
    border: 1px solid #3f3f46;
    color: #f4f4f5;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  body.light #focus-banner {
    background: #ffffff;
    border-color: #e4e4e7;
    color: #18181b;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  }
  #focus-banner-btn {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }
  body.zen-mode #toolbar,
  body.zen-mode #sidebar,
  body.zen-mode #sidebar-toggle,
  body.zen-mode #format-bar,
  body.zen-mode #format-sheet,
  body.zen-mode #view-controls,
  body.zen-mode #minimap-wrap {
    display: none !important;
  }
  body.zen-mode #canvas-wrap {
    top: 0 !important;
  }
  #zen-exit-btn {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 210;
    background: rgba(24, 24, 27, 0.85);
    color: #f4f4f5;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: background 0.15s, transform 0.15s;
  }
  #zen-exit-btn:hover {
    background: #3f3f46;
    transform: scale(1.03);
  }

  /* === FEATURE 4: GROUP BOUNDARIES === */
  .boundary-group {
    transition: opacity 0.2s;
  }
  .boundary-group text {
    user-select: none;
    font-family: 'Inter', sans-serif;
  }

  /* === FEATURE 5: TASK CHECKBOX & PROGRESS === */
  .node-task-checkbox {
    width: 15px;
    height: 15px;
    margin-right: 2px;
    cursor: pointer;
    accent-color: #6366F1;
    flex-shrink: 0;
  }
  .node-task-done {
    text-decoration: line-through;
    opacity: 0.7;
  }
  .task-progress-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    margin-left: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    user-select: none;
  }
  body.light .task-progress-badge {
    background: #d1fae5;
    color: #047857;
  }

  /* === FEATURE 6: TAGS & CANVAS SEARCH === */
  .node-tags-corner {
    position: absolute;
    top: -10px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 25;
    pointer-events: auto;
    white-space: nowrap;
  }
  .node-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 6px;
    background: #23232b;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    user-select: none;
    letter-spacing: 0.1px;
    opacity: 0.95;
  }
  .node-tag .tag-hash {
    opacity: 0.55;
    font-weight: 600;
    font-size: 10px;
    margin-right: 0.5px;
  }
  .node-tag:hover {
    opacity: 1;
    background: #2c2d38;
    border-color: #818cf8;
    color: #c7d2fe;
    transform: translateY(-1px);
  }
  .node-tag.tag-active {
    opacity: 1 !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 1px 6px rgba(79, 70, 229, 0.45) !important;
  }
  .node-tag.tag-active .tag-hash {
    color: #c7d2fe !important;
    opacity: 0.85 !important;
  }

  /* Light mode support */
  body.light .node-tag {
    background: #ffffff;
    color: #334155;
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  body.light .node-tag:hover {
    background: #f1f5f9;
    border-color: #6366f1;
    color: #4338ca;
  }
  body.light .node-tag.tag-active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4338ca !important;
  }

  /* Tag Filtering Global Dimming & Highlight Effects */
  body.tag-filtering .node.tag-dimmed {
    opacity: 0.18 !important;
    filter: grayscale(0.75) blur(0.6px) !important;
    transition: opacity 0.2s ease, filter 0.2s ease;
  }
  body.tag-filtering .node.tag-dimmed .qa-btn {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.tag-filtering .node.tag-matched {
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 0 0 2px #6366f1, 0 4px 14px rgba(99, 102, 241, 0.25) !important;
    z-index: 85 !important;
    transition: all 0.2s ease;
  }
  body.tag-filtering .edge-path {
    opacity: 0.15 !important;
    transition: opacity 0.2s ease;
  }
  body.tag-filtering .edge-path.tag-matched-edge {
    opacity: 1 !important;
    stroke: #818cf8 !important;
    stroke-width: 2px !important;
  }
  body.tag-filtering #rel-svg path,
  body.tag-filtering .sticky-note {
    opacity: 0.15 !important;
    filter: grayscale(0.7) blur(0.6px) !important;
    transition: opacity 0.2s ease, filter 0.2s ease;
  }

  #tag-filter-banner {
    position: fixed;
    top: 106px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: rgba(17, 24, 39, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #e0f2fe;
    border-radius: 999px;
    padding: 6px 14px 6px 16px;
    font-size: 12px;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 14px rgba(56, 189, 248, 0.2);
    user-select: none;
    animation: bannerSlideDown 0.2s ease-out;
  }
  @keyframes bannerSlideDown {
    from { transform: translate(-50%, -8px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
  }
  #tag-filter-banner .tag-filter-badge {
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  #tag-filter-clear {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    cursor: pointer;
    font-weight: 500;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    transition: all 0.15s ease;
  }
  #tag-filter-clear:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
  }
  #tag-filter-delete {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.38);
    color: #fca5a5;
    cursor: pointer;
    font-weight: 500;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
  }
  #tag-filter-delete:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
  }
  body.light #tag-filter-banner {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(2, 132, 199, 0.3);
    color: #0f172a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }
  body.light #tag-filter-clear {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    color: #475569;
  }
  body.light #tag-filter-clear:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #0f172a;
  }
  body.light #tag-filter-delete {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
  }
  body.light #tag-filter-delete:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
  }
  #canvas-search-bar {
    position: fixed;
    top: 106px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: 8px;
    padding: 6px 10px;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    color: var(--toolbar-text);
  }
  #canvas-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--toolbar-text);
    font-size: 13px;
    width: 220px;
  }
  #canvas-search-count {
    font-size: 11px;
    color: #888;
    min-width: 45px;
    text-align: center;
    user-select: none;
  }
  .search-nav-btn {
    background: none;
    border: none;
    color: var(--toolbar-text);
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .search-nav-btn:hover { background: var(--btn-hover); }
  .node.search-matched {
    box-shadow: 0 0 0 3px #f59e0b !important;
  }
  .node.search-active {
    box-shadow: 0 0 0 3.5px #10b981, 0 0 16px rgba(16,185,129,0.5) !important;
  }

  /* === FEATURE 7: MINIMAP / RADAR === */
  #minimap-wrap {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 180px;
    height: 110px;
    z-index: 80;
    background: rgba(24, 24, 27, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: width 0.2s, height 0.2s;
    user-select: none;
  }
  body.light #minimap-wrap {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  #minimap-wrap.minimized {
    width: 32px;
    height: 32px;
  }
  #minimap-wrap.mm-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.18s, transform 0.18s;
  }
  #minimap-wrap:not(.mm-hidden) {
    transition: width 0.2s, height 0.2s, opacity 0.18s, transform 0.18s;
  }
  #minimap-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
  }
  #minimap-viewport {
    position: absolute;
    border: 1.5px solid #6366f1;
    background: rgba(99, 102, 241, 0.18);
    pointer-events: none;
    border-radius: 2px;
  }
  #minimap-toggle-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: var(--toolbar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    z-index: 5;
  }
  #minimap-toggle-btn:hover { background: rgba(255,255,255,0.25); }

  /* === FLOATING VIEW CONTROLS (BOTTOM-LEFT CLUSTER) === */
  #view-controls {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: rgba(24, 24, 27, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    user-select: none;
    transition: left 0.08s cubic-bezier(.4, 0, .2, 1), opacity 0.2s, transform 0.2s;
  }
  body.light #view-controls {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
  #view-controls .vc-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--toolbar-text, #E8E8E6);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
  }
  #view-controls .vc-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }
  #view-controls .vc-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }
  body.light #view-controls .vc-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #111111;
  }
  #view-controls .vc-btn:active {
    transform: scale(0.92);
  }
  #view-controls .vc-btn.active {
    background: rgba(99, 102, 241, 0.28);
    color: #a5b4fc;
  }
  body.light #view-controls .vc-btn.active {
    background: rgba(99, 102, 241, 0.16);
    color: #4338ca;
  }
  #view-controls .vc-zoom-val {
    width: auto;
    min-width: 44px;
    height: 30px;
    padding: 0 4px !important;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
    color: var(--toolbar-text, #E8E8E6);
    user-select: none;
    cursor: pointer;
    border-radius: 6px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;
  }
  #view-controls .vc-zoom-val:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #6366F1;
  }
  body.light #view-controls .vc-zoom-val:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #4f46e5;
  }
  #view-controls .vc-zoom-val:active {
    transform: scale(0.94);
  }
  .vc-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 2px;
    flex-shrink: 0;
  }
  body.light .vc-sep {
    background: rgba(0, 0, 0, 0.12);
  }

  @media (max-width: 900px) {
    #view-controls {
      left: 14px;
      bottom: 14px;
    }
  }
  @media (max-width: 600px) {
    #view-controls {
      left: 8px !important;
      bottom: 8px;
      padding: 3px 4px;
      gap: 1px;
    }
    #view-controls .vc-btn {
      width: 27px;
      height: 27px;
    }
    #view-controls .vc-zoom-val {
      min-width: 36px;
      height: 27px;
      font-size: 10px;
      padding: 0 2px !important;
    }
    #view-controls .vc-btn svg {
      width: 13px;
      height: 13px;
    }
    .vc-sep {
      height: 14px;
      margin: 0 1px;
    }
    /* Auto hide minimap */
    #minimap-wrap {
      display: none !important;
    }
    #tbd-minimap {
      display: none !important;
    }
  }

  /* === INBOX BUCKET DRAWER & SIDEBAR BADGES === */
  .sb-inbox-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #ef4444;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-shadow: 0 0 0 2px var(--toolbar-bg, #1A1A1A);
    pointer-events: none;
  }
  .sb-inbox-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.25);
    color: #818cf8;
    margin-left: 4px;
  }
  body.light .sb-inbox-tag {
    background: rgba(99, 102, 241, 0.14);
    color: #4338ca;
  }
  .sb-folder-header.sb-inbox-header {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
  }
  .sb-folder-header.sb-inbox-header:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
  }
  .sb-folder-act-btn.sb-inbox-drawer-btn {
    color: #818cf8;
  }
  .sb-folder-act-btn.sb-inbox-drawer-btn:hover {
    background: rgba(99, 102, 241, 0.25);
    color: #ffffff;
  }
  .sb-inbox-empty-hint {
    padding: 10px 14px;
    font-size: 11px;
    color: #888;
    font-style: italic;
    line-height: 1.4;
  }

  /* Inbox Drawer Panel (Library of Images, Text, and Links) */
  .inbox-drawer {
    position: fixed;
    top: 54px;
    right: 18px;
    width: 360px;
    max-height: calc(100vh - 78px);
    background: rgba(22, 22, 26, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 95;
    display: none;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    animation: inboxSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes inboxSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  body.light .inbox-drawer {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }
  .inbox-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
  }
  body.light .inbox-drawer-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
  }
  .inbox-drawer-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--toolbar-text, #E8E8E6);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .inbox-drawer-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.25);
    color: #818cf8;
  }
  .inbox-drawer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inbox-drawer-bar {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.light .inbox-drawer-bar {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.015);
  }
  .inbox-filter-tabs {
    display: flex;
    gap: 5px;
  }
  .inbox-filter-tab {
    flex: 1;
    padding: 5px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
    font-family: inherit;
  }
  .inbox-filter-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
  .inbox-filter-tab.active {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  }
  body.light .inbox-filter-tab {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #64748b;
  }
  body.light .inbox-filter-tab.active {
    background: #6366f1;
    color: #fff;
  }

  /* Quick-Add Box */
  .inbox-quick-add {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  body.light .inbox-quick-add {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.02);
  }
  .inbox-qa-box.compact {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .inbox-qa-box.compact textarea,
  .inbox-qa-box.compact input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 6px 32px 6px 9px;
    font-size: 12px;
    color: #ffffff;
    outline: none;
    font-family: inherit;
    resize: none;
    line-height: 1.4;
  }
  body.light .inbox-qa-box.compact textarea,
  body.light .inbox-qa-box.compact input {
    background: #ffffff;
    border-color: #d1d5db;
    color: #111827;
  }
  .inbox-qa-box.compact textarea:focus,
  .inbox-qa-box.compact input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
  }
  .inbox-qa-btn-inline {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: #6366f1;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
    padding: 0;
  }
  .inbox-qa-btn-inline:hover {
    background: #4f52d6;
    transform: translateY(-50%) scale(1.05);
  }

  /* List & Masonry */
  .inbox-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: calc(100vh - 170px);
  }
  .inbox-drawer-list.mode-masonry {
    display: block !important;
    column-count: 2;
    column-gap: 6px;
    padding: 7px 8px;
  }

  /* Pinterest Masonry Image Cards */
  .inbox-img-card {
    break-inside: avoid;
    margin-bottom: 6px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: grab;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .inbox-img-card:hover {
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
  body.light .inbox-img-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
  }
  .inbox-img-card img {
    width: 100%;
    height: auto;
    display: block;
  }
  .inbox-img-insert-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(18, 22, 30, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
    z-index: 3;
  }
  .inbox-img-insert-btn:hover {
    background: #6366f1;
    border-color: #6366f1;
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.6);
  }
  .inbox-img-del-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #cbd5e1;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    z-index: 3;
  }
  .inbox-img-card:hover .inbox-img-del-btn {
    opacity: 0.85;
  }
  .inbox-img-del-btn:hover {
    opacity: 1 !important;
    background: #ef4444;
    color: #ffffff;
  }
  .inbox-img-info {
    padding: 4px 6px 5px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 10.5px;
  }
  body.light .inbox-img-info {
    background: #f8fafc;
  }
  .inbox-img-caption {
    color: var(--toolbar-text, #E8E8E6);
    line-height: 1.35;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .inbox-img-link {
    display: inline-block;
    font-size: 9.5px;
    color: #818cf8;
    text-decoration: none;
    margin-top: 2px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inbox-img-link:hover { text-decoration: underline; }

  /* Text & Link Cards - Minimalist & Compact */
  .inbox-text-card, .inbox-link-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 9px 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    user-select: none;
    margin-bottom: 7px;
  }
  .inbox-text-card:hover, .inbox-link-card:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  body.light .inbox-text-card, body.light .inbox-link-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  body.light .inbox-text-card:hover, body.light .inbox-link-card:hover {
    background: #fbfbfe;
    border-color: #6366f1;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.1);
  }
  .inbox-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 2;
  }
  .inbox-text-card:hover .inbox-card-actions,
  .inbox-link-card:hover .inbox-card-actions {
    opacity: 1;
  }
  @media (hover: none) {
    .inbox-card-actions { opacity: 0.85; }
  }
  .inbox-card-act-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.12s;
    padding: 0;
  }
  body.light .inbox-card-act-btn {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
  }
  .inbox-card-act-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }
  body.light .inbox-card-act-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #0f172a;
  }
  .inbox-card-act-btn.insert {
    background: #6366f1;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
  }
  .inbox-card-act-btn.insert:hover {
    background: #4f52d6;
  }
  .inbox-card-act-btn.del:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
  }
  .inbox-tc-content {
    font-size: 12px;
    line-height: 1.45;
    color: var(--toolbar-text, #E8E8E6);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 50px;
  }
  .inbox-tc-source {
    display: inline-block;
    font-size: 10.5px;
    color: #818cf8;
    text-decoration: none;
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .inbox-lc-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--toolbar-text, #E8E8E6);
    word-break: break-word;
    padding-right: 50px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inbox-link-icon {
    font-size: 11px;
    opacity: 0.8;
  }
  .inbox-lc-url {
    font-size: 10px;
    color: #818cf8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
  }

  .inbox-empty-box {
    padding: 26px 12px;
    text-align: center;
    color: #888;
  }
  .inbox-empty-icon { font-size: 26px; margin-bottom: 6px; }
  .inbox-empty-title { font-size: 13px; font-weight: 600; color: var(--toolbar-text, #E8E8E6); }
  .inbox-empty-desc { font-size: 11px; line-height: 1.5; margin-top: 4px; color: #94a3b8; }
  /* Canvas drop highlight */
  #canvas-wrap.inbox-drag-over {
    outline: none !important;
  }

  @media (max-width: 600px) {
    .inbox-drawer {
      width: calc(100vw - 24px);
      right: 12px;
    }
  }

  /* === FEATURE 8: OUTLINE DOCUMENT VIEW === */
  #outline-container {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #131316;
    z-index: 155;
    display: none;
    overflow-y: auto;
    padding: 24px 20px 60px;
    justify-content: center;
  }
  body.light #outline-container {
    background: #F4F4F6;
  }
  #outline-box {
    width: 100%;
    max-width: 840px;
    background: #1C1C21;
    border: 1px solid #2C2C34;
    border-radius: 14px;
    padding: 26px 34px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    color: #f4f4f5;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 480px;
    align-self: flex-start;
  }
  body.light #outline-box {
    background: #FFFFFF;
    border-color: #E2E2E8;
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
    color: #18181b;
  }
  .outline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #2C2C34;
    padding-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.light .outline-header {
    border-bottom-color: #E2E2E8;
  }
  .outline-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .outline-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
  .outline-hint { font-size: 11px; color: #888; }
  body.light .outline-hint { color: #666; }
  .outline-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .outline-btn {
    background: rgba(255,255,255,0.06);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
  }
  .outline-btn:hover {
    background: rgba(255,255,255,0.12);
  }
  body.light .outline-btn {
    background: #F0F0EE;
    border-color: #D8D8D4;
    color: #1A1A1A;
  }
  body.light .outline-btn:hover {
    background: #E4E4E0;
  }
  .outline-btn.primary {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
  }
  .outline-btn.primary:hover {
    background: #4f52d6;
  }
  .outline-tree {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
  }
  .outline-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.1s;
    position: relative;
  }
  .outline-item:hover {
    background: rgba(255,255,255,0.035);
  }
  body.light .outline-item:hover {
    background: rgba(0,0,0,0.035);
  }
  .outline-toggle-btn {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 10px;
    border-radius: 3px;
    margin-top: 4px;
    flex-shrink: 0;
    transition: color 0.1s, transform 0.1s;
    user-select: none;
  }
  .outline-toggle-btn:hover { color: #6366F1; background: rgba(99,102,241,0.12); }
  .outline-bullet {
    color: #6366f1;
    font-size: 11px;
    margin-top: 5px;
    flex-shrink: 0;
    user-select: none;
    width: 14px;
    text-align: center;
  }
  .outline-item textarea {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    padding: 3px 7px;
    flex: 1;
    resize: none;
    overflow: hidden;
    min-height: 28px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
  }
  .outline-item textarea:focus {
    border-color: #6366f1;
    background: rgba(99,102,241,0.06);
  }
  .outline-item.level-0 textarea {
    font-size: 18px;
    font-weight: 700;
  }
  .outline-item.level-1 textarea {
    font-size: 15px;
    font-weight: 600;
  }
  .outline-row-actions {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    flex-shrink: 0;
  }
  .outline-item:hover .outline-row-actions {
    display: flex;
  }
  .outline-action-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    transition: all 0.1s;
  }
  .outline-action-btn:hover {
    color: #fff;
    background: #6366f1;
    border-color: #6366f1;
  }
  .outline-action-btn.del:hover {
    background: #dc2626;
    border-color: #ef4444;
    color: #fff;
  }
  body.light .outline-action-btn {
    border-color: #d8d8d4;
    background: #f0f0ee;
    color: #666;
  }

  /* === FEATURE 9: VERSION HISTORY MODAL === */
  #history-modal {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
  }
  #history-box {
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    color: var(--toolbar-text);
  }
  .history-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--toolbar-border);
  }
  .history-header h3 { font-size: 16px; font-weight: 600; }
  .history-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--toolbar-border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: background 0.15s;
  }
  .history-item:hover { background: var(--btn-hover); }
  .history-item-info { display: flex; flex-direction: column; gap: 2px; }
  .history-item-time { font-size: 13px; font-weight: 600; }
  .history-item-meta { font-size: 11px; color: #888; }
  .history-restore-btn {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }
  .history-restore-btn:hover { background: #4f52d6; }
  .history-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--toolbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* --- INBOX BUCKET & INBOX DRAWER STYLES --- */
  .sb-folder-header.sb-inbox-header {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
  }
  body.light .sb-folder-header.sb-inbox-header {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
  }
  .sb-folder-header.sb-inbox-header:hover {
    background: rgba(99, 102, 241, 0.14);
  }
  .sb-inbox-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 2px;
  }
  body.light .sb-inbox-tag {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
  }
  .sb-inbox-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    border: 1.5px solid var(--toolbar-bg);
    animation: inboxDotPulse 2s infinite;
  }
  @keyframes inboxDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.8; }
  }
  #inbox-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 310px;
    z-index: 175;
    background: var(--toolbar-bg);
    border-right: 1px solid var(--toolbar-border);
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    /* Only animate the slide, no left transition - canvas won't shift */
    transition: transform 0.08s cubic-bezier(.4,0,.2,1), opacity 0.08s ease;
    user-select: none;
  }
  /* Keep canvas/toolbar frozen at 310px when inbox is open (no layout shift) */
  body.inbox-open #toolbar { left: 310px !important; }
  body.inbox-open #canvas-wrap { left: 310px !important; }
  body.inbox-open #format-bar { left: 310px !important; }
  body.inbox-open #view-controls { left: calc(310px + 18px) !important; }
  body.inbox-open #edge-toggle-group { left: 310px !important; }
  #inbox-drawer.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  #inbox-drawer.map-node-drag-hover {
    border-right: 2.5px solid #6366f1 !important;
    box-shadow: 4px 0 24px rgba(99, 102, 241, 0.3) !important;
    background: rgba(99, 102, 241, 0.03) !important;
  }
  body.light #inbox-drawer.map-node-drag-hover {
    border-right-color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.03) !important;
  }
  .inbox-drawer-header {
    height: 54px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--toolbar-border);
    flex-shrink: 0;
    background: var(--toolbar-bg);
  }
  .inbox-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--toolbar-text);
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .inbox-drawer-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
  }
  body.light .inbox-drawer-badge {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
  }
  .inbox-drawer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inbox-drawer-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--toolbar-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255,255,255,0.02);
  }
  body.light .inbox-drawer-bar {
    background: rgba(0,0,0,0.015);
  }
  .inbox-filter-tabs {
    display: flex;
    gap: 4px;
  }
  .inbox-filter-tab {
    border: none;
    background: transparent;
    color: var(--toolbar-text);
    opacity: 0.65;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .inbox-filter-tab:hover {
    opacity: 1;
    background: var(--btn-hover);
  }
  .inbox-filter-tab.active {
    opacity: 1;
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    font-weight: 600;
  }
  body.light .inbox-filter-tab.active {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
  }
  .inbox-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .inbox-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--toolbar-border);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    user-select: none;
  }
  body.light .inbox-card {
    background: #FFFFFF;
    border-color: #E0E0DC;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .inbox-card:hover {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }
  body.light .inbox-card:hover {
    border-color: #6366f1;
    box-shadow: 0 4px 14px rgba(99,102,241,0.12);
  }
  @keyframes inboxCardArrive {
    0% { transform: translateY(-8px); opacity: 0; box-shadow: 0 0 0 2px #6366f1; }
    100% { transform: translateY(0); opacity: 1; box-shadow: none; }
  }
  .inbox-card.new-arrival {
    animation: inboxCardArrive 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .inbox-card.dragging {
    opacity: 0.45;
    border-style: dashed;
    border-color: #6366f1;
  }
  .inbox-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .inbox-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--toolbar-text);
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  body.light .inbox-card-badge {
    background: rgba(0, 0, 0, 0.06);
  }
  .inbox-card-time {
    font-size: 10.5px;
    color: var(--toolbar-text);
    opacity: 0.5;
  }
  .inbox-card-del-btn {
    background: none;
    border: none;
    color: var(--toolbar-text);
    opacity: 0.4;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: all 0.12s;
  }
  .inbox-card-del-btn:hover {
    opacity: 1;
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
  }
  .inbox-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .inbox-card-thumb-wrap {
    width: 100%;
    max-height: 150px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inbox-card-thumb {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 6px;
  }
  .inbox-card-text {
    font-size: 12px;
    line-height: 1.4;
    color: var(--toolbar-text);
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }
  .inbox-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--toolbar-text);
  }
  .inbox-card-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
  }
  .inbox-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 2px;
  }
  body.light .inbox-card-footer {
    border-top-color: rgba(0,0,0,0.05);
  }
  .inbox-card-drag-hint {
    font-size: 10.5px;
    color: var(--toolbar-text);
    opacity: 0.5;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .inbox-card-insert-btn {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .inbox-card-insert-btn:hover {
    background: #4f52d6;
  }
  .inbox-empty-box {
    padding: 36px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--toolbar-text);
    opacity: 0.6;
  }
  .inbox-empty-icon {
    font-size: 36px;
    margin-bottom: 4px;
  }
  .inbox-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--toolbar-text);
    opacity: 0.85;
  }
  .inbox-empty-desc {
    font-size: 11.5px;
    line-height: 1.5;
    max-width: 240px;
  }
  #canvas-wrap.inbox-drag-over {
    outline: none !important;
  }
  .node.inbox-drop-target {
    box-shadow: 0 0 0 3px #6366f1, 0 0 16px rgba(99,102,241,0.5) !important;
  }
  /* Strictly suppress any browser extension pin buttons or widgets inside Mindmap */
  #mm-img-pin-widget,
  .mm-pin-action-btn,
  .mm-toast-container,
  [id*="mm-img-pin"],
  [class*="mm-pin-action"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -999 !important;
  }
  .node.has-image.image-only {
    padding: 5px;
    min-width: unset;
  }
  .node.has-image.image-only .node-img-wrap {
    margin-bottom: 0;
  }