*,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* ── ACCESSIBILITY: WCAG 2.4.7 FOCUS VISIBLE ── */
  :focus-visible:not(.node-editor):not(.ai-cs-input):not(input):not(textarea):not(select):not([contenteditable="true"]) {
    outline: 2px solid var(--selected-ring, #6366f1) !important;
    outline-offset: 2px !important;
  }

  /* ── CLEAN FORM FIELDS: NO DOUBLE FOCUS RINGS / FLOATING OUTLINES ON TYPING ── */
  input,
  textarea,
  select,
  [contenteditable="true"] {
    outline: none !important;
  }

  input:focus,
  input:focus-visible,
  textarea:focus,
  textarea:focus-visible,
  select:focus,
  select:focus-visible {
    outline: none !important;
  }

  /* ── ELIMINATE ALL SCROLLBAR ARROW BUTTONS GLOBALLY ── */
  *::-webkit-scrollbar-button,
  ::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:start,
  *::-webkit-scrollbar-button:end,
  *::-webkit-scrollbar-button:vertical:start:increment,
  *::-webkit-scrollbar-button:vertical:start:decrement,
  *::-webkit-scrollbar-button:vertical:end:increment,
  *::-webkit-scrollbar-button:vertical:end:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* ── GLOBAL SLEEK MODERN SCROLLBAR ── */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  body.light * {
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track {
    background: transparent !important;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
  }

  body.light ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
  }

  body.light ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
  }

  :root {
    color-scheme: dark;
    --bg: #000000;
    --toolbar-bg: #1A1A1A;
    --toolbar-text: #E8E8E6;
    --toolbar-border: #2E2E2E;
    --btn-hover: #2E2E2E;
    --selected-ring: rgba(255, 255, 255, 0.45);
    --ctx-bg: #1F1F1F;
    --ctx-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  }

  body.light,
  html.light {
    color-scheme: light;
    --bg: #F0F0ED;
    --toolbar-bg: #FFFFFF;
    --toolbar-text: #1A1A1A;
    --toolbar-border: #E0E0DC;
    --btn-hover: #F0F0EE;
    --selected-ring: rgba(24, 24, 27, 0.35);
    --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: #18181b;
    color: #fff;
    border-color: #18181b;
  }

  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: #18181b;
    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: rgba(24, 24, 27, 0.7);
  }

  body.light #ctx-menu {
    background: #ffffff;
    border-color: #E0E0DC;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  }

  body.light .ctx-item {
    color: #1A1A1A;
  }

  body.light .ctx-item:hover {
    background: #F0F0EE;
    color: #000000;
  }

  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: #18181b;
    border-color: #18181b;
  }

  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: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    border-left: none !important;
    color: #18181b !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08) !important;
  }

  body.light #edge-toggle-group #sidebar-toggle:hover,
  body.light #edge-toggle-group #box-toggle:hover {
    background: #f4f4f5 !important;
    color: #000000 !important;
    border-color: #18181b !important;
  }

  body.light #box-toggle.active,
  body.light #sidebar-toggle.active {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
  }

  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: #18181b;
    border-color: #18181b;
    color: #fff;
  }

  body.light .sb-icon-btn.primary:hover {
    background: #27272a;
  }

  body.light .sb-search {
    background: #F0F0EE;
    border-color: #E0E0DC;
    color: #1A1A1A;
  }

  body.light .sb-search::placeholder {
    color: #71717a !important;
    opacity: 0.85 !important;
  }

  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: #18181b;
    background: #fff;
    font-weight: 600;
    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: #e4e4e7 !important;
    border: 1px solid #d4d4d8 !important;
  }

  body.light .sb-item-name {
    color: #1A1A1A;
  }

  body.light .sb-item.active .sb-item-name {
    color: #18181b;
    font-weight: 600;
  }

  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: #e4e4e7;
    border-color: #18181b;
  }

  body.light .sb-tpl-card.active .sb-tpl-name {
    color: #1A1A1A;
  }

  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: #18181b;
    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-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }

  .sn-copy-btn,
  .sn-link-btn,
  .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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sn-copy-btn svg,
  .sn-link-btn svg {
    display: block;
  }

  .sn-copy-btn:hover,
  .sn-link-btn:hover,
  .sn-del-btn:hover {
    color: rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.1);
  }

  .sn-link-btn.active {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.15) !important;
  }

  .sn-link-btn.active:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.18) !important;
  }

  .sticky-note.sn-attached {
    position: absolute !important;
    z-index: 45;
  }

  .node.sn-link-candidate {
    outline: 2px dashed #3b82f6 !important;
    outline-offset: 3px !important;
    cursor: pointer !important;
  }

  .node.sn-drop-candidate {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 3px !important;
  }

  .sticky-note-edge {
    pointer-events: none;
  }

  .sn-body {
    flex: 1;
    padding: 8px 10px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .sn-textarea {
    width: 100%;
    height: 100%;
    flex: 1;
    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;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    word-break: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sn-textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .sn-textarea::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .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;
    color: var(--toolbar-text, #E8E8E6);
  }

  .tb-dropdown.align-right,
  #tbg-settings .tb-dropdown {
    left: auto;
    right: 0;
  }

  .tb-group.open .tb-dropdown {
    display: block;
  }

  .tb-dd-item,
  a.tb-dd-item,
  a.tb-dd-item:visited,
  a.tb-dd-item:link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--toolbar-text, #E8E8E6) !important;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
    text-decoration: none !important;
    box-sizing: border-box;
  }

  .tb-dd-item:hover,
  a.tb-dd-item:hover {
    background: var(--btn-hover);
    color: var(--toolbar-text, #E8E8E6) !important;
  }

  .tb-dd-item svg,
  a.tb-dd-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.85;
    color: inherit;
    stroke: currentColor;
  }

  body.light .tb-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  }


  /* ── BRAND LOGO & TITLE: CLEAN, NO FRAME, NO BACKGROUND, NO GRADIENT ── */
  #app-brand img,
  #app-brand .app-brand-icon {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #app-brand .app-brand-text {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.2px;
    color: var(--toolbar-text, #ffffff) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
  }

  body.light #app-brand .app-brand-text {
    color: #1a1a1a !important;
  }

  #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: transparent !important;
  }

  body.light #toolbar .title-wrap:focus-within {
    border-color: transparent !important;
  }

  #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,
  #toolbar .title-input:focus-visible {
    background: transparent;
    outline: none !important;
    box-shadow: none !important;
  }

  #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,
  .fb-btn svg,
  .sb-header button svg,
  #canvas-nav svg,
  .canvas-nav-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    shape-rendering: geometricPrecision;
  }

  #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: #ffffff;
    background: rgba(255, 255, 255, 0.14);
  }

  #toolbar-inbox-btn.active:hover {
    background: rgba(255, 255, 255, 0.22);
  }

  body.light #toolbar-inbox-btn.active {
    color: #18181b;
    background: rgba(0, 0, 0, 0.08);
  }

  #btn-tb-outline {
    color: var(--toolbar-text);
  }

  #btn-tb-outline.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
  }

  #btn-tb-outline.active:hover {
    background: rgba(255, 255, 255, 0.22);
  }

  body.light #btn-tb-outline.active {
    color: #18181b;
    background: rgba(0, 0, 0, 0.08);
  }

  #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: 364px;
    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;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  }

  body.light .node {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .node:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  }

  body.light .node:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  }

  .node.selected {
    outline: 1.5px solid var(--selected-ring);
    outline-offset: 2px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  body.light .node.selected {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .node.center {
    font-size: 16px;
    font-weight: 600;
    border-radius: 36px;
    padding: 14px 28px;
    width: max-content;
    max-width: 416px;
    letter-spacing: -0.2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  body.light .node.center {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.12);
  }

  /* ── Hierarchy depth styles ── */
  /* depth-0 = root: already handled by .center (border-radius:36px) */
  .node.depth-0 {
    border-radius: 999px !important;
  }

  /* depth-1 = direct children: mildly rounded rectangle */
  .node.depth-1 {
    border-radius: 14px !important;
  }

  /* depth-2+ = grandchildren: boxless text, no underline, connector line runs between nodes */
  .node.depth-2 {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 3px 6px !important;
    min-width: auto;
    color: #F4F4F5;
  }

  body.light .node.depth-2 {
    color: #18181B;
    box-shadow: none !important;
  }

  .node.depth-2:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
  }

  body.light .node.depth-2:hover {
    background: rgba(0, 0, 0, 0.04) !important;
  }

  .node.depth-2.selected {
    outline: 1.5px solid var(--selected-ring) !important;
    outline-offset: 3px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  body.light .node.depth-2.selected {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  .node.depth-2.multi-selected {
    outline: 2px dashed var(--selected-ring) !important;
    outline-offset: 3px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  body.light .node.depth-2.multi-selected {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .node.depth-2.editing {
    background: rgba(24, 24, 27, 0.95) !important;
    border-radius: 6px !important;
  }

  body.light .node.depth-2.editing {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 6px !important;
  }

  .node.depth-2.editing .node-editor {
    background: transparent !important;
    color: #F4F4F5;
  }

  body.light .node.depth-2.editing .node-editor {
    color: #18181B;
  }

  .node.editing {
    cursor: text;
  }

  .node.collapsed-node {
    opacity: 0.92;
  }

  .node.drag-over {
    outline: 2px dashed rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
    opacity: 0.7;
  }

  body.light .node.drag-over {
    outline: 2px dashed rgba(24, 24, 27, 0.6);
  }

  .node.multi-selected {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    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%;
    max-height: calc(1.45em * 6 + 2px);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
    text-align: left;
    box-sizing: border-box;
    scroll-behavior: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  }

  /* Sleek & Compact Node Micro-Scrollbars */
  .node-text-span::-webkit-scrollbar,
  .node-editor::-webkit-scrollbar,
  .node-note-text::-webkit-scrollbar {
    width: 3.5px;
    height: 3.5px;
  }

  .node-text-span::-webkit-scrollbar-track,
  .node-editor::-webkit-scrollbar-track,
  .node-note-text::-webkit-scrollbar-track {
    background: transparent;
  }

  .node-text-span::-webkit-scrollbar-thumb,
  .node-editor::-webkit-scrollbar-thumb,
  .node-note-text::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 9999px;
    transition: background 0.2s ease;
  }

  .node-text-span:hover::-webkit-scrollbar-thumb,
  .node-editor:hover::-webkit-scrollbar-thumb,
  .node-note-text:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
  }

  body.light .node-text-span::-webkit-scrollbar-thumb,
  body.light .node-editor::-webkit-scrollbar-thumb,
  body.light .node-note-text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  body.light .node-text-span:hover::-webkit-scrollbar-thumb,
  body.light .node-editor:hover::-webkit-scrollbar-thumb,
  body.light .node-note-text:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4);
  }

  .node-text-span::-webkit-scrollbar-button,
  .node-editor::-webkit-scrollbar-button,
  .node-note-text::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #lasso-rect {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    border: 1.5px dashed rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    display: none;
  }

  body.light #lasso-rect {
    border-color: rgba(24, 24, 27, 0.6);
    background: rgba(0, 0, 0, 0.05);
  }

  #lasso-rect.active {
    display: block;
  }

  .node.lasso-hover {
    outline: 2px dashed rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
  }

  body.light .node.lasso-hover {
    outline-color: rgba(24, 24, 27, 0.6);
  }

  .node.floating-node {
    opacity: 1;
  }

  .node.attach-target {
    outline: 2.5px dashed rgba(255, 255, 255, 0.8) !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    transform: translate(-50%, -50%) scale(1.04);
  }

  body.light .node.attach-target {
    outline-color: rgba(24, 24, 27, 0.8) !important;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  }

  .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: #ffffff;
    color: #000000;
    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(0, 0, 0, 0.5);
    transition: opacity 0.15s, transform 0.15s;
  }

  body.light #attach-indicator {
    background: #18181b;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  #attach-indicator.show {
    display: block;
  }

  .qa-btn {
    position: absolute;
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    z-index: 105;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s, transform 0.15s, filter 0.12s, color 0.12s;
    pointer-events: none;
    padding: 0;
  }

  .qa-btn::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    pointer-events: auto;
  }

  .qa-btn svg {
    display: block;
    width: 12px;
    height: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    transition: transform 0.12s ease;
  }

  .node:hover .qa-btn,
  .node.selected .qa-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .qa-btn:hover {
    opacity: 1 !important;
  }

  .qa-btn:active {
    transform: scale(0.9) !important;
  }

  .qa-child {
    right: -15px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    z-index: 105;
    color: rgba(255, 255, 255, 0.75);
  }

  .node:hover .qa-child,
  .node.selected .qa-child {
    transform: translateY(-50%) scale(1);
  }

  .qa-child:hover {
    transform: translateY(-50%) scale(1.25) !important;
    color: #ffffff;
  }

  .qa-child:active {
    transform: translateY(-50%) scale(0.95) !important;
  }

  .node.has-children .qa-child {
    right: -25px;
  }

  /* Balanced 2-Sided Mindmap - Left Node Controls */
  .node.node-side-left .qa-child,
  .qa-child.qa-child-left {
    left: -15px !important;
    right: auto !important;
  }

  .node.has-children.node-side-left .qa-child,
  .node.has-children .qa-child.qa-child-left {
    left: -25px !important;
    right: auto !important;
  }

  .node.node-side-left .collapse-btn,
  .collapse-btn.is-left {
    left: -7px !important;
    right: auto !important;
  }

  .node.node-side-left .collapse-btn.is-collapsed,
  .collapse-btn.is-left.is-collapsed {
    left: -8px !important;
    right: auto !important;
  }

  .qa-sibling {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    z-index: 105;
    color: rgba(255, 255, 255, 0.75);
  }

  .node:hover .qa-sibling,
  .node.selected .qa-sibling {
    transform: translateX(-50%) scale(1);
  }

  .qa-sibling:hover {
    transform: translateX(-50%) scale(1.25) !important;
    color: #ffffff;
  }

  .qa-sibling:active {
    transform: translateX(-50%) scale(0.95) !important;
  }

  .node.center .qa-sibling {
    display: none;
  }

  .qa-rel {
    top: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    z-index: 105;
    color: rgba(255, 255, 255, 0.75);
  }

  .node:hover .qa-rel,
  .node.selected .qa-rel {
    transform: translateX(-50%) scale(1);
  }

  .qa-rel:hover {
    transform: translateX(-50%) scale(1.25) !important;
    color: #ffffff;
  }

  .qa-rel:active {
    transform: translateX(-50%) scale(0.95) !important;
  }

  body.light .qa-child,
  body.light .qa-sibling {
    color: rgba(24, 24, 27, 0.65);
  }

  body.light .qa-child:hover,
  body.light .qa-sibling:hover {
    color: #000000;
  }

  body.light .qa-rel {
    color: rgba(24, 24, 27, 0.65);
  }

  body.light .qa-rel:hover {
    color: #000000;
  }

  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: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--toolbar-bg);
    border: 1.5px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
    color: var(--toolbar-text);
    z-index: 20;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.15s, border-color 0.15s;
  }

  .collapse-btn svg {
    display: block;
    width: 7px;
    height: 7px;
    pointer-events: none;
  }

  .node:hover .collapse-btn {
    opacity: 1;
  }

  .collapse-btn.is-collapsed {
    opacity: 1;
  }

  .collapse-btn:hover {
    opacity: 1;
    border-color: #ffffff;
    color: #ffffff;
  }

  body.light .collapse-btn {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #475569;
  }

  body.light .collapse-btn:hover {
    border-color: #18181b;
    color: #18181b;
  }

  .node-editor,
  .node-editor:focus,
  .node-editor:focus-visible,
  .node.editing .node-editor,
  .node.editing .node-editor:focus,
  .node.editing .node-editor:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .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: 338px;
    text-align: left;
    caret-color: currentColor;
    display: block;
    resize: none;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
    vertical-align: middle;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-height: calc(1.45em * 6 + 10px);
    user-select: text !important;
    -webkit-user-select: text !important;
    scroll-behavior: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  }

  .node.center .node-editor {
    max-width: 360px;
  }

  .node.depth-2 .node-editor {
    max-width: 352px;
  }

  #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;
    line-height: 1.45;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    width: auto;
  }

  #ctx-menu {
    display: none;
    position: fixed;
    z-index: 500;
    background: var(--ctx-bg, #1a1a1f);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
    padding: 6px;
    min-width: 180px;
    border: 1px solid #333338;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  #ctx-menu.show {
    display: block;
  }

  .ctx-item {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e4e4e7;
    border-radius: 7px;
    transition: background 0.12s, color 0.12s;
  }

  .ctx-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .ctx-item .ctx-key {
    margin-left: auto;
    font-size: 11px;
    color: #888890;
    font-family: 'Inter', sans-serif;
  }

  .ctx-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 6px;
  }

  .ctx-item.danger {
    color: #f87171;
  }

  .ctx-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
  }

  .ctx-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .85;
    stroke: currentColor;
  }

  .ctx-item.danger .ctx-icon {
    opacity: .9;
  }

  #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.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
  }

  #help-overlay.show {
    display: flex;
  }

  #help-box {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    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.6);
    color: #f4f4f5;
  }

  #help-box h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #ffffff;
  }

  #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: #a1a1aa;
    margin-bottom: 8px;
  }

  #help-box table {
    border-collapse: collapse;
    width: 100%;
  }

  #help-box td {
    padding: 4px 0;
    font-size: 13px;
    color: #f4f4f5;
  }

  #help-box td:first-child {
    color: #a1a1aa;
    padding-right: 20px;
    font-family: monospace;
    white-space: nowrap;
  }

  #help-box .close-btn {
    margin-top: 20px;
    width: 100%;
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 9px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s, border-color 0.15s;
  }

  #help-box .close-btn:hover {
    background: #e4e4e7;
    border-color: #e4e4e7;
  }

  /* Light Mode Overrides for Help Box */
  body.light #help-overlay {
    background: rgba(0, 0, 0, 0.35);
  }

  body.light #help-box {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    color: #18181b !important;
  }

  body.light #help-box h3 {
    color: #18181b !important;
  }

  body.light #help-box .help-section h4 {
    color: #71717a !important;
  }

  body.light #help-box td {
    color: #18181b !important;
  }

  body.light #help-box td:first-child {
    color: #52525b !important;
  }

  body.light #help-box .close-btn {
    background: #18181b !important;
    color: #ffffff !important;
    border: 1px solid #18181b !important;
    font-weight: 600 !important;
  }

  body.light #help-box .close-btn:hover {
    background: #000000 !important;
    border-color: #000000 !important;
  }

  #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: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .fb-btn.bold-btn {
    font-weight: 700;
  }

  .fb-btn.italic-btn {
    font-style: italic;
  }

  .fb-btn.underline-btn {
    text-decoration: underline;
  }

  .fb-group-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #fb-text-group-btn {
    font-weight: 700;
    padding: 4px 8px;
    gap: 4px;
  }

  #fb-text-group-btn .fb-t-icon {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
  }

  #fb-text-group-btn.has-format {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
  }

  #fb-text-group-btn.active,
  #fb-text-group-btn.active:hover {
    background: #323232 !important;
    border-color: #484848 !important;
    color: #ffffff !important;
  }

  body.light #fb-text-group-btn.has-format {
    color: #18181b;
    border-color: rgba(0, 0, 0, 0.2);
  }

  body.light #fb-text-group-btn.active,
  body.light #fb-text-group-btn.active:hover {
    background: #e4e4e7 !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
  }

  #fb-text-group-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 450;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    padding: 4px 6px;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }

  #fb-text-group-popup.show {
    display: flex;
  }

  body.light #fb-text-group-popup {
    background: #fff;
    border-color: #e0e0dc;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  .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: rgba(255, 255, 255, 0.16);
    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: #18181b;
    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: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .fb-fontsize-opt .fs-label-small {
    font-size: 10px;
    color: #888;
  }

  .fb-fontsize-opt.active .fs-label-small {
    color: #d4d4d8;
  }

  .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: rgba(255, 255, 255, 0.4);
  }

  #fb-fontsize-custom-ok {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    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: #18181b;
    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: rgba(255, 255, 255, 0.45);
    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;
  }

  #fb-img-popup {
    display: none;
    position: fixed;
    z-index: 500;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    padding: 8px;
    width: 260px;
    box-sizing: border-box;
  }

  #fb-img-popup.show {
    display: block;
  }

  .fb-img-opt-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    color: #e2e8f0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
    box-sizing: border-box;
  }

  .fb-img-opt-btn:hover {
    background: #2a2a2a;
    border-color: #3a3a3a;
  }

  .fb-img-opt-btn svg {
    color: #ffffff;
    flex-shrink: 0;
  }

  .fb-img-divider {
    height: 1px;
    background: #2e2e2e;
    margin: 6px 0;
  }

  .fb-img-url-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 2px 0 2px;
  }

  .fb-img-url-label {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    user-select: none;
  }

  .fb-img-url-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  #fb-img-url-input {
    flex: 1;
    min-width: 0;
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: #e2e8f0;
    outline: none;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    transition: border-color 0.12s;
  }

  #fb-img-url-input:focus {
    border-color: rgba(255, 255, 255, 0.4);
  }

  #fb-img-url-input::placeholder {
    color: #555;
  }

  #fb-img-url-submit {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 6px;
    color: #000000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s;
  }

  #fb-img-url-submit:hover {
    background: #e4e4e7;
  }

  body.light #fb-img-popup {
    background: #ffffff;
    border-color: #e0e0dc;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  body.light .fb-img-opt-btn {
    color: #1a1a1a;
  }

  body.light .fb-img-opt-btn:hover {
    background: #f0f0ee;
    border-color: #d0d0cc;
  }

  body.light .fb-img-opt-btn svg {
    color: #18181b;
  }

  body.light .fb-img-divider {
    background: #e5e5e5;
  }

  body.light .fb-img-url-label {
    color: #666;
  }

  body.light #fb-img-url-input {
    background: #f8f8f7;
    border-color: #d0d0cc;
    color: #1a1a1a;
  }

  body.light #fb-img-url-input:focus {
    border-color: #18181b;
    background: #fff;
  }

  body.light #fb-img-url-input::placeholder {
    color: #999;
  }

  body.light #fb-img-url-submit {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
  }

  body.light #fb-img-url-submit:hover {
    background: #27272a;
  }

  #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: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
  }

  #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: #ffffff !important;
  }

  body.light .cp-swatch.cp-active {
    border-color: #18181b !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: 4px;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 10;
    color: #e4e4e7;
    transform: translateY(50%);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  }

  .node-link-icon:hover {
    color: #ffffff;
    transform: translateY(50%) scale(1.15);
  }

  .node-link-icon svg {
    width: 13px;
    height: 13px;
    display: block;
  }

  body.light .node-link-icon {
    color: #52525b;
  }

  body.light .node-link-icon:hover {
    color: #18181b;
  }

  .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: 364px;
    border-radius: 18px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .node.has-image .node-editor {
    width: 100%;
    max-width: 344px;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }

  .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 #ffffff;
    outline-offset: 1px;
  }

  .node-img-wrap.img-selected .img-handle {
    display: block;
  }

  .img-handle {
    display: none;
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 2px;
    z-index: 30;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: all;
    touch-action: none;
  }

  body.light .node-img-wrap.img-selected img {
    outline-color: #18181b;
  }

  body.light .img-handle {
    background: #18181b;
    border-color: #ffffff;
  }

  .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: -2px;
    left: 18px;
    right: 18px;
    height: 1px;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 5px, transparent 5px, transparent 12px);
    pointer-events: none;
  }

  body.light .node-note-indicator {
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0.35) 5px, transparent 5px, transparent 12px);
  }

  .node.has-link .node-note-indicator {
    left: 22px;
  }

  .node-icon-badge {
    position: absolute;
    top: -9px;
    right: -6px;
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
    z-index: 24;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
  }

  /* 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 {
    display: none !important;
  }

  .node-note-tooltip.editing:hover {
    border-color: #3f3f4e !important;
    background: #1c1c24 !important;
  }

  .node-note-inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28px;
  }

  .node-note-text {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: calc(6 * 1.5em);
    overflow-y: auto;
    padding-right: 18px;
    min-height: 20px;
    line-height: 1.45;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .node-note-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 3;
  }

  .node-note-act-btn {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e1e27;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    transition: all 0.12s;
  }

  .node-note-act-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: scale(1.08);
  }

  .node-note-act-btn.delete:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    color: #f87171;
    transform: scale(1.08);
  }

  .node-note-act-btn.save {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-weight: 600;
  }

  .node-note-act-btn.save:hover {
    background: #e4e4e7;
  }

  body.light .node-note-act-btn.save {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
  }

  body.light .node-note-act-btn.save:hover {
    background: #27272a;
  }

  .node-note-act-btn.copied,
  .sn-copy-btn.copied,
  .inbox-card-act-btn.copied,
  .outline-action-btn.copied,
  .outline-btn.copied,
  .ai-cs-msg-act-btn.copied {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
  }

  body.light .node-note-act-btn.copied,
  body.light .sn-copy-btn.copied,
  body.light .inbox-card-act-btn.copied,
  body.light .outline-action-btn.copied,
  body.light .outline-btn.copied,
  body.light .ai-cs-msg-act-btn.copied {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #059669 !important;
    color: #059669 !important;
  }

  .node-note-act-btn svg {
    display: block;
    width: 9px;
    height: 9px;
  }

  .node-note-editor {
    display: block;
    width: 100%;
    min-height: 28px;
    max-height: calc(6 * 1.5em);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    padding-right: 18px;
    box-sizing: border-box;
    color: #e8e8e6;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: #ffffff;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .node-note-editor::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
  }

  .node-note-tooltip::-webkit-scrollbar,
  .node-note-text::-webkit-scrollbar,
  .node-note-editor::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .node-note-tooltip::-webkit-scrollbar-track,
  .node-note-text::-webkit-scrollbar-track,
  .node-note-editor::-webkit-scrollbar-track {
    background: transparent;
  }

  .node-note-tooltip::-webkit-scrollbar-thumb,
  .node-note-text::-webkit-scrollbar-thumb,
  .node-note-editor::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .node-note-tooltip::-webkit-scrollbar-button,
  .node-note-text::-webkit-scrollbar-button,
  .node-note-editor::-webkit-scrollbar-button,
  .node-note-tooltip::-webkit-scrollbar-button:start,
  .node-note-tooltip::-webkit-scrollbar-button:end,
  .node-note-text::-webkit-scrollbar-button:start,
  .node-note-text::-webkit-scrollbar-button:end,
  .node-note-editor::-webkit-scrollbar-button:start,
  .node-note-editor::-webkit-scrollbar-button:end {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .node-link-tooltip {
    position: absolute;
    top: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%);
    background: #1A1A1A;
    color: #ffffff;
    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;
    cursor: pointer;
    transition: color 0.12s;
  }

  .nlt-text:hover {
    text-decoration: underline;
    color: #e4e4e7;
  }

  body.light .nlt-text:hover {
    color: #18181b;
  }

  .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: #ffffff;
  }

  .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: #18181b;
  }

  body.light .nlt-action.del:hover {
    color: #e53e3e;
  }

  body.light .node-note-tooltip {
    background: #ffffff;
    color: #1f2937;
    border-color: #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  body.light .node-note-tooltip:hover {
    background: #f9fafb;
  }

  body.light .node-note-tooltip.editing {
    background: #ffffff !important;
    border-color: #e0e0dc !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  }

  body.light .node-note-tooltip.editing::after {
    display: none;
  }

  body.light .node-note-act-btn {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.12);
    color: #4b5563;
  }

  body.light .node-note-act-btn.delete:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #dc2626;
  }

  body.light .nne-header {
    color: #18181b !important;
  }

  body.light .nne-btn-close {
    color: #6b7280;
  }

  body.light .nne-btn-close:hover {
    color: #111827;
    background: rgba(0, 0, 0, 0.06);
  }

  body.light .node-note-text,
  body.light .node-note-editor {
    color: #0f172a;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  body.light .node-note-editor {
    background: transparent;
    border-color: transparent;
  }

  body.light .node-note-editor:focus {
    border-color: transparent;
    background: transparent;
  }

  body.light .node-note-editor::placeholder {
    color: rgba(0, 0, 0, 0.38);
  }

  body.light .nne-footer {
    color: #9ca3af;
  }

  body.light .node-note-tooltip::-webkit-scrollbar-thumb,
  body.light .node-note-text::-webkit-scrollbar-thumb,
  body.light .node-note-editor::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  body.light .node-note-tooltip::-webkit-scrollbar-thumb:hover,
  body.light .node-note-text::-webkit-scrollbar-thumb:hover,
  body.light .node-note-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
  }

  body.light .node-link-tooltip {
    background: #fff;
    color: #18181b;
    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: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 11px;
    color: #000000;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    transition: background 0.1s;
  }

  .nnp-save:hover {
    background: #e4e4e7;
  }

  body.light .nnp-save {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
  }

  body.light .nnp-save:hover {
    background: #27272a;
  }

  #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: rgba(255, 255, 255, 0.45);
  }

  #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: #f4f4f5;
    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: rgba(255, 255, 255, 0.45);
  }

  #nlp-input::placeholder {
    color: #444;
  }

  .nlp-actions {
    display: flex;
    gap: 5px;
    align-items: center;
  }

  .nlp-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 1px solid #3a3a3a;
    color: #94a3b8;
    transition: all 0.15s ease;
    box-sizing: border-box;
  }

  .nlp-btn svg {
    display: block;
    pointer-events: none;
  }

  .nlp-btn:hover {
    background: #2a2a2a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
  }

  .nlp-btn.nlp-clear:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border-color: #f87171;
  }

  .nlp-btn.nlp-save {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-weight: 600;
  }

  .nlp-btn.nlp-save:hover {
    background: #e4e4e7;
    border-color: #e4e4e7;
  }

  #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: #ffffff;
    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: #18181b;
  }

  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: rgba(0, 0, 0, 0.45);
  }

  body.light #nnp-textarea::placeholder {
    color: #BBB;
  }

  body.light #nlp-input {
    background: #fff;
    border-color: #D8D8D4;
    color: #18181b;
  }

  body.light #nlp-input:focus {
    border-color: rgba(0, 0, 0, 0.45);
  }

  body.light #nlp-input::placeholder {
    color: #BBB;
  }

  body.light .nlp-btn {
    border-color: #d0d0cc;
    color: #64748b;
  }

  body.light .nlp-btn:hover {
    background: #eaeae6;
    color: #18181b;
    border-color: rgba(0, 0, 0, 0.35);
  }

  body.light .nlp-btn.nlp-clear:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #ef4444;
  }

  body.light .nlp-btn.nlp-save {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
    font-weight: 600;
  }

  body.light .nlp-btn.nlp-save:hover {
    background: #27272a;
  }

  #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: rgba(255, 255, 255, 0.45);
  }

  #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: rgba(0, 0, 0, 0.45);
  }

  body.light #np-textarea::placeholder {
    color: #BBB;
  }

  #fp-note-btn.has-note,
  #fp-tag-btn.has-note {
    border-color: #3a3a3a;
    color: #ffffff;
  }

  #fp-note-btn.active,
  #fp-tag-btn.active {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.5);
  }

  body.light #fp-note-btn.has-note,
  body.light #fp-tag-btn.has-note {
    color: #18181b;
    border-color: #CCC;
  }

  #bg-image-panel {
    display: none;
  }

  .bgi-canvas-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .bgi-canvas-swatches {
    display: grid;
    grid-template-columns: repeat(8, 20px);
    gap: 5px 6px;
    align-items: center;
  }

  .bgi-cswatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: transform .1s, border-color .1s, box-shadow .1s;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .bgi-cswatch:hover {
    transform: scale(1.18);
    border-color: rgba(255, 255, 255, 0.45);
    z-index: 2;
  }

  .bgi-cswatch.active {
    border-color: #ffffff !important;
    transform: scale(1.08);
    box-shadow: 0 0 0 1.5px #ffffff;
    z-index: 1;
  }

  body.light .bgi-cswatch {
    border: 1px solid rgba(0, 0, 0, 0.22) !important;
  }

  body.light .bgi-cswatch:hover {
    border-color: rgba(0, 0, 0, 0.6) !important;
  }

  body.light .bgi-cswatch.active {
    border-color: #18181b !important;
    box-shadow: 0 0 0 2px #18181b !important;
  }

  .bgi-canvas-custom {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform .1s, border-color .1s, box-shadow .1s;
  }

  .bgi-canvas-custom:hover {
    transform: scale(1.18);
    border-color: #fff;
    z-index: 2;
  }

  .bgi-canvas-custom.active {
    border-color: #ffffff !important;
    transform: scale(1.08);
    box-shadow: 0 0 0 1.5px #ffffff;
    z-index: 1;
  }

  body.light .bgi-canvas-custom {
    border-color: rgba(0, 0, 0, 0.2);
  }

  body.light .bgi-canvas-custom:hover {
    border-color: #333;
  }

  body.light .bgi-canvas-custom.active {
    border-color: #18181b !important;
    box-shadow: 0 0 0 1.5px #18181b;
  }

  .bgi-reset-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    background: #1e1e24;
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    transition: all .15s;
  }

  .bgi-reset-btn:hover {
    transform: scale(1.18);
    border-color: #888;
    color: #fff;
    background: #2a2a32;
    z-index: 2;
  }

  body.light .bgi-reset-btn {
    border-color: rgba(0, 0, 0, 0.2);
    background: #F0F0EE;
    color: #666;
  }

  body.light .bgi-reset-btn:hover {
    border-color: #888;
    color: #111;
    background: #E2E2DE;
  }

  .bgi-pattern-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
  }

  .bgi-pat-btn {
    flex: 1;
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid #333;
    background: #161618;
    color: #777;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0;
  }

  .bgi-pat-btn:hover {
    border-color: #555;
    color: #fff;
    background: #242428;
  }

  .bgi-pat-btn.active {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
  }

  body.light .bgi-pat-btn {
    border-color: #D8D8D4;
    color: #888;
    background: #F6F6F4;
  }

  body.light .bgi-pat-btn:hover {
    border-color: #BCBCB8;
    color: #111;
    background: #ECECE8;
  }

  body.light .bgi-pat-btn.active {
    border-color: #18181b;
    color: #ffffff;
    background: #18181b;
  }

  #bgi-gridsize-row {
    display: none;
  }

  #bgi-gridsize-row.show {
    display: flex;
  }

  .bgi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
  }

  .bgi-upload-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #e4e4e7;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    padding: 5px 8px;
    min-height: 34px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    transition: all .15s;
  }

  .bgi-upload-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
  }

  .bgi-clear-btn {
    background: transparent;
    border: 1px solid #333;
    border-radius: 6px;
    color: #888;
    font-size: 11.5px;
    line-height: 1.25;
    padding: 5px 10px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    white-space: nowrap;
    transition: all .15s;
  }

  .bgi-clear-btn:hover {
    background: #282828;
    color: #fff;
    border-color: #4b5563;
  }

  body.light .bgi-upload-btn {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #18181b;
  }

  body.light .bgi-upload-btn:hover {
    background: #e4e4e7 !important;
    border-color: #18181b !important;
    color: #18181b !important;
  }

  body.light .bgi-clear-btn {
    border-color: #D8D8D4;
    color: #777;
  }

  body.light .bgi-clear-btn:hover {
    background: #ECECE8;
    color: #111;
    border-color: #BCBCB8;
  }

  .bgi-controls {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #262628;
  }

  .bgi-controls.show {
    display: block;
  }

  body.light .bgi-controls {
    border-top-color: #EAEAE6;
  }

  .bgi-repeat-row {
    margin-top: 8px;
    font-size: 12px;
    color: #9ca3af;
  }

  .bgi-repeat-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .bgi-repeat-row input[type=checkbox] {
    accent-color: #ffffff;
  }

  #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,
  body.inbox-open #edge-toggle-group,
  body:has(#inbox-drawer.open) #edge-toggle-group,
  body:has(#sidebar:not(.hidden)) #edge-toggle-group {
    left: 310px !important;
  }

  body.sidebar-hidden:not(.inbox-open):not(:has(#inbox-drawer.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: 26px;
    height: 44px;
    background: var(--toolbar-bg, #18181b);
    border: 1px solid var(--toolbar-border, #2e2e2e);
    border-left: none;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--toolbar-text, #cbd5e1);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, color 0.15s, border-color 0.15s, width 0.15s;
  }

  #sidebar-toggle:hover,
  #box-toggle:hover {
    background: var(--btn-hover, #2e2e2e);
    color: #ffffff;
    width: 28px;
  }

  #box-toggle.active,
  #sidebar-toggle.active {
    color: #ffffff;
    background: var(--btn-hover, #27272a);
    border-color: rgba(255, 255, 255, 0.4);
  }

  #toolbar-inbox-btn {
    display: none !important;
  }

  body:not(.sidebar-hidden):not(.presentation-mode) #toolbar,
  body.inbox-open:not(.presentation-mode) #toolbar,
  body:has(#inbox-drawer.open):not(.presentation-mode) #toolbar,
  body:has(#sidebar:not(.hidden)):not(.presentation-mode) #toolbar {
    left: 310px !important;
  }

  body:not(.sidebar-hidden):not(.presentation-mode) #canvas-wrap,
  body.inbox-open:not(.presentation-mode) #canvas-wrap,
  body:has(#inbox-drawer.open):not(.presentation-mode) #canvas-wrap,
  body:has(#sidebar:not(.hidden)):not(.presentation-mode) #canvas-wrap {
    left: 310px !important;
  }

  body:not(.sidebar-hidden) #format-bar,
  body.inbox-open #format-bar,
  body:has(#inbox-drawer.open) #format-bar,
  body:has(#sidebar:not(.hidden)) #format-bar {
    left: 310px !important;
  }

  body:not(.sidebar-hidden) #view-controls,
  body.inbox-open #view-controls,
  body:has(#inbox-drawer.open) #view-controls,
  body:has(#sidebar:not(.hidden)) #view-controls {
    left: calc(310px + 18px) !important;
  }

  .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.5'%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(255, 255, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.06);
  }

  body.light .sb-search:focus {
    border-color: rgba(24, 24, 27, 0.35);
    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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: 10000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  body.light .sb-modal-wrap {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .sb-modal-box {
    width: 100%;
    max-width: 470px;
    background: var(--toolbar-bg, #15151c);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.35);
    color: var(--toolbar-text, #eee);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: sbModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes sbModalIn {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(8px);
    }

    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .sb-modal-header {
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .sb-modal-title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .sb-modal-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }

  .sb-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .sb-modal-body {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .sb-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  .sb-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sb-form-row {
    display: flex;
    gap: 10px;
  }

  .sb-form-label {
    font-size: 12px;
    font-weight: 500;
    color: #a1a1aa;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .sb-form-input,
  .sb-form-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 13px;
    color: #f4f4f5;
    font-family: inherit;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
  }

  .sb-form-input:focus,
  .sb-form-select:focus {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none !important;
  }

  body.light .sb-form-input:focus,
  body.light .sb-form-select:focus {
    border-color: rgba(0, 0, 0, 0.5);
    background: #ffffff;
    box-shadow: none !important;
  }

  #sb-new-title {
    font-size: 14px;
    padding: 10px 13px;
    border-radius: 10px;
    font-weight: 500;
  }

  #sb-new-title::placeholder {
    color: #71717a;
    font-weight: 400;
  }

  .sb-btn {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #d4d4d8;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
  }

  .sb-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .sb-btn.primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .sb-btn.primary:hover {
    background: #e4e4e7;
    border-color: #e4e4e7;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }

  body.light .sb-btn.primary {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  body.light .sb-btn.primary:hover {
    background: #27272a;
    border-color: #27272a;
  }

  .sb-templates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sb-tpl-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  .sb-tpl-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
  }

  .sb-tpl-card.active {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3);
  }

  .sb-tpl-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: #a1a1aa;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }

  .sb-tpl-card:hover .sb-tpl-icon-wrap {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }

  .sb-tpl-card.active .sb-tpl-icon-wrap {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  .sb-tpl-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .sb-tpl-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-tpl-card.active .sb-tpl-name {
    color: #fff;
  }

  .sb-tpl-desc {
    font-size: 11px;
    color: #71717a;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sb-tpl-card.active .sb-tpl-desc {
    color: #a1a1aa;
  }

  .sb-tpl-card.ai-special {
    grid-column: span 2;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
  }

  .sb-tpl-card.ai-special .sb-tpl-icon-wrap {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .sb-tpl-card.ai-special:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .sb-tpl-card.ai-special.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .sb-tpl-card.ai-special.active .sb-tpl-icon-wrap {
    background: #ffffff;
    color: #000000;
  }

  .sb-ai-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
  }

  .sb-advanced-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    color: #a1a1aa;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.15s ease;
    margin-top: 2px;
  }

  .sb-advanced-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e4e4e7;
  }

  .sb-adv-label {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .sb-adv-icon {
    color: #ffffff;
    opacity: 0.85;
  }

  body.light .sb-adv-icon {
    color: #18181b;
  }

  .sb-adv-hint {
    font-size: 11px;
    color: #71717a;
    font-weight: 400;
  }

  .sb-adv-chevron {
    transition: transform 0.2s ease;
    color: #71717a;
  }

  .sb-advanced-toggle.expanded .sb-adv-chevron {
    transform: rotate(180deg);
    color: #ffffff;
  }

  body.light .sb-advanced-toggle.expanded .sb-adv-chevron {
    color: #18181b;
  }

  .sb-advanced-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    animation: sbFadeIn 0.15s ease;
  }

  .sb-advanced-panel .sb-form-group {
    margin-bottom: 0;
  }

  .sb-item-status-dot {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  }

  @keyframes sbFadeIn {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body.light .sb-modal-box {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  body.light .sb-modal-header {
    border-bottom-color: #e2e8f0;
  }

  body.light .sb-modal-title {
    color: #0f172a;
    font-weight: 700;
  }

  body.light .sb-modal-close {
    color: #64748b;
  }

  body.light .sb-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  body.light .sb-modal-footer {
    border-top-color: #e2e8f0;
    background: #f8fafc;
  }

  body.light .sb-form-label {
    color: #1e293b;
    font-weight: 600;
  }

  body.light .sb-form-input,
  body.light .sb-form-select {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  body.light .sb-form-input::placeholder,
  body.light .sb-form-select::placeholder {
    color: #64748b;
    opacity: 1;
  }

  body.light .sb-form-input:focus,
  body.light .sb-form-select:focus {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: none !important;
  }

  body.light .sb-tpl-card {
    border-color: #e4e4e7;
    background: #fcfcfc;
  }

  body.light .sb-tpl-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  body.light .sb-tpl-card.active {
    border-color: #18181b;
    background: #f4f4f5;
  }

  body.light .sb-tpl-icon-wrap {
    background: #f1f5f9;
    color: #64748b;
  }

  body.light .sb-tpl-card.active .sb-tpl-icon-wrap {
    background: #18181b;
    color: #ffffff;
  }

  body.light .sb-tpl-card.active .sb-tpl-name {
    color: #0f172a;
  }

  body.light .sb-tpl-name {
    color: #1e293b;
  }

  body.light .sb-tpl-desc {
    color: #64748b;
  }

  body.light .sb-tpl-card.active .sb-tpl-desc {
    color: #71717a;
  }

  body.light .sb-advanced-toggle {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
  }

  body.light .sb-advanced-toggle:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  body.light .sb-advanced-panel {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
  }

  body.light .sb-advanced-panel .sb-form-input,
  body.light .sb-advanced-panel .sb-form-select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
  }

  body.light .sb-btn {
    border-color: #e2e8f0;
    color: #475569;
  }

  body.light .sb-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
  }

  body.light .sb-tpl-card.ai-special {
    background: #fafafa;
    border-color: #e4e4e7;
  }

  body.light .sb-tpl-card.ai-special:hover {
    background: #f4f4f5;
    border-color: #d4d4d8;
  }

  body.light .sb-tpl-card.ai-special.active {
    background: #f4f4f5;
    border-color: #18181b;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }

  body.light .sb-tpl-card.ai-special.active .sb-tpl-name {
    color: #0f172a;
  }

  body.light .sb-tpl-card.ai-special.active .sb-tpl-icon-wrap {
    background: #18181b;
    color: #ffffff;
  }

  #sb-ai-options-panel {
    transition: all 0.2s ease;
  }

  body.light #sb-ai-options-panel {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
  }

  body.light #sb-ai-prompt {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
  }

  body.light #sb-ai-prompt::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }

  body.light .sb-ai-note {
    color: #64748b;
    font-weight: 500;
  }

  .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, box-shadow 0.12s;
  }

  .sb-color-swatch:hover {
    transform: scale(1.15);
  }

  .sb-color-swatch.active {
    border-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  }

  body.light .sb-color-swatch.active {
    border-color: #18181b;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  }

  .history-snap-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    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 #ffffff;
    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: #18181b;
    color: #fff;
    border-color: #ffffff;
  }

  .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: #18181b;
    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: #ffffff;
  }

  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: #1c1c1e;
    border: 1px solid #333336;
    border-radius: 14px;
    padding: 0;
    width: 320px;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  #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: 11px 14px 9px;
    border-bottom: 1px solid #282828;
    position: sticky;
    top: 0;
    background: #1c1c1e;
    z-index: 2;
  }

  .gfp-title {
    font-size: 11.5px;
    color: #e2e8f0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .gfp-close {
    background: transparent;
    border: none;
    color: #777;
    font-size: 13px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1;
    transition: all .15s;
  }

  .gfp-close:hover {
    background: #2a2a2a;
    color: #fff;
  }

  .gfp-section {
    padding: 9px 14px;
    border-bottom: 1px solid #262628;
  }

  .gfp-section:last-child {
    border-bottom: none;
  }

  .gfp-section-label {
    font-size: 10px;
    color: #e4e4e7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 7px;
  }

  .gfp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
  }

  .gfp-row:last-child {
    margin-bottom: 0;
  }

  .gfp-row-dual {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .gfp-col-font {
    flex: 1.6;
  }

  .gfp-col-size {
    flex: 1.1;
  }

  .gfp-sep-v {
    width: 1px;
    height: 20px;
    background: #2f2f32;
    margin: 0 2px;
    flex-shrink: 0;
  }

  body.light .gfp-sep-v {
    background: #e0e0dc;
  }

  .gfp-label {
    font-size: 11.5px;
    color: #9ca3af;
    width: 74px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.25;
  }

  .gfp-select {
    width: 100%;
    background: #121214;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4.5px 7px;
    font-size: 12px;
    color: #e5e7eb;
    outline: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s;
  }

  .gfp-select:focus {
    border-color: rgba(255, 255, 255, 0.45);
  }

  .gfp-btn-group {
    display: flex;
    gap: 4px;
    flex: 1;
  }

  .gfp-btn {
    flex: 1;
    background: #161618;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px 0;
    font-size: 12px;
    color: #9ca3af;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
  }

  .gfp-btn:hover {
    background: #26262a;
    color: #fff;
    border-color: #4b5563;
  }

  .gfp-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    font-weight: 600;
  }

  .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: 8px;
    margin-bottom: 7px;
  }

  .gfp-range-row:last-child {
    margin-bottom: 0;
  }

  .gfp-range-label {
    font-size: 11.5px;
    color: #9ca3af;
    width: 74px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .gfp-range {
    flex: 1;
    accent-color: #ffffff;
    cursor: pointer;
    height: 5px;
  }

  .gfp-range-val {
    font-size: 11px;
    color: #888;
    width: 38px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .gfp-shadow-group {
    display: flex;
    gap: 4px;
    flex: 1;
  }

  .gfp-shadow-btn {
    flex: 1;
    background: #161618;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px 0;
    font-size: 11px;
    color: #9ca3af;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: all .15s;
  }

  .gfp-shadow-btn:hover {
    background: #26262a;
    color: #fff;
    border-color: #4b5563;
  }

  .gfp-shadow-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    font-weight: 600;
  }

  .gfp-line-group {
    display: flex;
    gap: 4px;
    flex: 1;
  }

  .gfp-line-btn {
    flex: 1;
    background: #161618;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    color: #9ca3af;
  }

  .gfp-line-btn:hover {
    background: #26262a;
    color: #fff;
    border-color: #4b5563;
  }

  .gfp-line-btn.active {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    font-weight: 600;
  }

  .gfp-line-btn svg {
    display: block;
  }

  .gfp-action-section {
    padding: 10px 14px 12px;
  }

  .gfp-action-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .gfp-action-row .gfp-clearbg-btn,
  .gfp-action-row .gfp-reset-btn {
    flex: 1;
    margin: 0;
    padding: 6.5px 4px;
    font-size: 11.5px;
    white-space: nowrap;
    border-radius: 7px;
    font-family: inherit;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
  }

  .gfp-reset-btn {
    background: transparent;
    border: 1px solid #2e2e30;
    color: #888;
  }

  .gfp-reset-btn:hover {
    background: #242426;
    color: #e2e8f0;
    border-color: #444;
  }

  .gfp-clearbg-btn {
    background: transparent;
    border: 1px solid #2e2e30;
    color: #9ca3af;
  }

  .gfp-clearbg-btn:hover {
    background: #2a1a1a;
    color: #f87171;
    border-color: #5a2e2e;
  }

  .gfp-clearbg-btn.active {
    background: #3a1a1a;
    color: #f87171;
    border-color: #8b3333;
  }

  /* Light mode for GFP */
  body.light #global-format-panel {
    background: #FFFFFF;
    border-color: #E2E2DF;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  }

  body.light .gfp-header {
    background: #FFFFFF;
    border-bottom-color: #EAEAE6;
  }

  body.light .gfp-title {
    color: #1e293b;
  }

  body.light .gfp-close {
    color: #888;
  }

  body.light .gfp-close:hover {
    background: #EAEAE6;
    color: #1A1A1A;
  }

  body.light .gfp-section {
    border-bottom-color: #EAEAE6;
  }

  body.light .gfp-section-label {
    color: #3f3f46;
  }

  body.light .gfp-label,
  body.light .gfp-range-label {
    color: #555;
  }

  body.light .gfp-range-val {
    color: #777;
  }

  body.light .gfp-range {
    accent-color: #18181b;
  }

  body.light .gfp-select {
    background: #fff;
    border-color: #D8D8D4;
    color: #1A1A1A;
  }

  body.light .gfp-btn,
  body.light .gfp-shadow-btn,
  body.light .gfp-line-btn {
    background: #F6F6F4;
    border-color: #D8D8D4;
    color: #555;
  }

  body.light .gfp-btn:hover,
  body.light .gfp-shadow-btn:hover,
  body.light .gfp-line-btn:hover {
    background: #ECECE8;
    color: #111;
    border-color: #BCBCB8;
  }

  body.light .gfp-btn.active,
  body.light .gfp-shadow-btn.active {
    background: #18181b;
    color: #fff;
    border-color: #18181b;
    font-weight: 600;
  }

  body.light .gfp-line-btn.active {
    background: #18181b;
    color: #ffffff;
    border-color: #18181b;
    font-weight: 600;
  }

  body.light .gfp-reset-btn {
    border: 1px solid #d4d4d8 !important;
    color: #3f3f46 !important;
    background: #ffffff !important;
  }

  body.light .gfp-reset-btn:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #18181b !important;
  }

  body.light .gfp-clearbg-btn {
    border: 1px solid #d4d4d8 !important;
    color: #3f3f46 !important;
    background: #ffffff !important;
  }

  body.light .gfp-clearbg-btn:hover,
  body.light .gfp-clearbg-btn.active {
    background: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #18181b !important;
  }

  /* ── 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,
    #inbox-drawer {
      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,
    body.inbox-open #view-controls,
    body:has(#inbox-drawer.open) #view-controls {
      left: calc(310px + 14px) !important;
    }

    body:not(.sidebar-hidden) #edge-toggle-group,
    body.inbox-open #edge-toggle-group,
    body:has(#inbox-drawer.open) #edge-toggle-group {
      left: 310px !important;
    }

    /* Backdrop shows when sidebar or inbox drawer is open on tablet (not desktop, where layout shifts instead) */
    #sidebar-backdrop {
      z-index: 199;
    }

    body:not(.sidebar-hidden) #sidebar-backdrop,
    body:has(#inbox-drawer.open) #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;
    }
  }

  /* Hide mobile-specific elements on desktop by default */
  .mobile-menu-btn {
    display: none !important;
  }

  .mobile-more-group {
    display: none !important;
  }

  .mobile-action-bar {
    display: none !important;
  }

  #mobile-more-sheet {
    display: none !important;
  }

  #pwa-smart-banner {
    display: none !important;
  }

  /* ── Responsive: Mobile & Tablet Portrait (≤768px) ── */
  @media (max-width: 768px) {

    /* Mobile Toolbar: clean single-row header */
    #toolbar {
      padding: env(safe-area-inset-top, 0px) 10px 0 10px !important;
      height: calc(52px + env(safe-area-inset-top, 0px)) !important;
      min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
      overflow: visible !important;
      box-sizing: border-box !important;
      z-index: 200 !important;
      left: 0 !important;
      right: 0 !important;
    }

    #toolbar::-webkit-scrollbar {
      display: none !important;
    }

    /* Show Mobile Hamburger Menu Button */
    .mobile-menu-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 9px;
      background: transparent;
      border: 1px solid var(--toolbar-border, #333);
      color: var(--toolbar-text, #eee);
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.15s, transform 0.1s;
    }

    .mobile-menu-btn:active {
      transform: scale(0.92);
      background: rgba(255, 255, 255, 0.08);
    }

    body.light .mobile-menu-btn {
      border-color: #ddd;
      color: #1a1a1a;
    }

    body.light .mobile-menu-btn:active {
      background: rgba(0, 0, 0, 0.06);
    }

    /* App brand logo: compact */
    #app-brand {
      border-right: none !important;
      margin-right: 0 !important;
      padding-right: 0 !important;
      gap: 5px !important;
    }

    #app-brand span {
      display: none !important;
    }

    #app-brand img {
      width: 22px;
      height: 22px;
    }

    /* Project title wrap: fully readable and editable on mobile! */
    #map-title-wrap {
      display: flex !important;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 240px;
      margin: 0 4px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 4px 8px;
      border: 1px solid transparent;
      transition: border-color 0.15s;
    }

    #btn-upgrade-pro {
      padding: 7px 9px !important;
      gap: 0 !important;
      border-radius: 18px !important;
    }

    #license-badge-text {
      display: none !important;
    }

    body.light #map-title-wrap {
      background: rgba(0, 0, 0, 0.04);
    }

    #toolbar .title-input {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      text-overflow: ellipsis;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      color: var(--toolbar-text, #eee);
    }

    body.light #toolbar .title-input {
      color: #1a1a1a;
    }

    #toolbar .title-edit-btn {
      display: flex !important;
      padding: 2px !important;
      opacity: 0.7;
    }

    /* Hide desktop-only buttons from top bar on mobile */
    #autosave-icon {
      display: none !important;
    }

    #toolbar .sep {
      display: none !important;
    }

    #toolbar .spacer {
      display: none !important;
    }

    #undo-btn,
    #redo-btn {
      display: none !important;
    }

    #btn-new,
    #btn-open,
    #btn-save-json,
    #btn-export-md,
    #btn-export-backup,
    #btn-import-backup,
    #btn-save-png,
    #btn-save-jpg,
    #btn-save-pdf,
    #btn-global-format,
    #btn-add-sticky,
    #btn-add-floating,
    #btn-canvas-search,
    #tbg-file,
    #tbg-settings,
    #btn-bg-image,
    #btn-theme,
    #btn-help,
    #toolbar-overflow-btn {
      display: none !important;
    }

    /* Inbox Button: compact */
    #toolbar-inbox-btn {
      display: inline-flex !important;
      width: 36px;
      height: 36px;
      padding: 0 !important;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      flex-shrink: 0;
    }

    /* Google Drive Widget: compact icon button */
    #gdrive-widget {
      flex-shrink: 0;
      margin: 0 2px;
    }

    .gdrive-login-btn {
      padding: 7px 10px !important;
      border-radius: 20px !important;
      height: 36px !important;
      gap: 0 !important;
    }

    .gdrive-login-btn span {
      display: none !important;
    }

    .gdrive-user-chip {
      padding: 2px !important;
    }

    /* Mobile More Button & Dropdown */
    .mobile-more-group {
      position: relative;
      display: inline-flex !important;
      flex-shrink: 0;
    }

    .mobile-more-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--toolbar-border, #333);
      color: var(--toolbar-text, #eee);
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
    }

    .mobile-more-btn:active {
      transform: scale(0.92);
      background: rgba(255, 255, 255, 0.08);
    }

    body.light .mobile-more-btn {
      border-color: #ddd;
      color: #1a1a1a;
    }

    body.light .mobile-more-btn:active {
      background: rgba(0, 0, 0, 0.06);
    }

    .mobile-more-dropdown {
      display: none;
      position: fixed;
      top: calc(56px + env(safe-area-inset-top, 0px));
      right: 10px;
      width: 250px;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--toolbar-bg, #1a1a1a);
      border: 1px solid var(--toolbar-border, #333);
      border-radius: 14px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
      z-index: 10000;
      padding: 6px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .mobile-more-dropdown.show {
      display: block;
      animation: mmdFadeIn 0.15s ease-out;
    }

    @keyframes mmdFadeIn {
      from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .mmd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      background: transparent;
      color: var(--toolbar-text, #eee);
      font-size: 13.5px;
      font-weight: 500;
      font-family: inherit;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      box-sizing: border-box;
      transition: background 0.1s;
    }

    body.light .mmd-item {
      color: #1a1a1a;
    }

    .mmd-item:active {
      background: rgba(255, 255, 255, 0.1);
    }

    body.light .mmd-item:active {
      background: rgba(0, 0, 0, 0.06);
    }

    .mmd-item svg {
      width: 16px;
      height: 16px;
      opacity: 0.85;
      flex-shrink: 0;
    }

    .mmd-sep {
      height: 1px;
      background: var(--toolbar-border, #333);
      margin: 4px 6px;
    }

    body.light .mmd-sep {
      background: #e4e4e7;
    }

    /* Completely hide desktop Format Bar on mobile */
    #format-bar {
      display: none !important;
    }

    /* Canvas Wrap occupies the full viewport below the single top bar */
    #canvas-wrap {
      top: calc(52px + env(safe-area-inset-top, 0px)) !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
    }

    /* Edge toggle group hidden on mobile */
    #edge-toggle-group {
      display: none !important;
    }

    /* Sidebar full-featured slide-over drawer */
    #sidebar,
    #inbox-drawer {
      width: 86vw !important;
      max-width: 320px !important;
      z-index: 10005 !important;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.6) !important;
      padding-top: env(safe-area-inset-top, 0px);
    }

    #sidebar {
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #sidebar.hidden {
      transform: translateX(-105%) !important;
    }

    #sidebar-backdrop {
      z-index: 9998 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
    }

    body:not(.sidebar-hidden) #sidebar-backdrop,
    body:has(#inbox-drawer.open) #sidebar-backdrop {
      display: block !important;
    }

    /* Floating View Controls (Zoom): hide on mobile to free screen */
    #view-controls {
      display: none !important;
    }

    /* === MOBILE PWA SMART INSTALL BANNER === */
    #pwa-smart-banner.show {
      display: flex !important;
    }

    .pwa-smart-banner {
      position: fixed !important;
      bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: calc(100vw - 24px) !important;
      max-width: 380px !important;
      background: rgba(22, 22, 26, 0.94) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 16px !important;
      padding: 7px 10px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
      z-index: 1001 !important;
      display: none;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 8px !important;
      box-sizing: border-box !important;
      animation: pwaBannerFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    @keyframes pwaBannerFadeIn {
      from {
        opacity: 0;
        transform: translate(-50%, 10px);
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    body.light .pwa-smart-banner {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    }

    .pwa-sb-content {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1;
    }

    .pwa-sb-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .pwa-sb-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 1px;
    }

    .pwa-sb-title {
      font-size: 12px;
      font-weight: 700;
      color: #f1f5f9;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    body.light .pwa-sb-title {
      color: #0f172a;
    }

    .pwa-sb-desc {
      font-size: 10px;
      color: #94a3b8;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    body.light .pwa-sb-desc {
      color: #64748b;
    }

    .pwa-sb-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }

    
.pwa-sb-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, filter 0.15s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-family: inherit;
}


    .pwa-sb-btn:active {
      transform: scale(0.94);
      filter: brightness(1.1);
    }

    .pwa-sb-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 18px;
      line-height: 1;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }

    .pwa-sb-close:hover,
    .pwa-sb-close:active {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }

    body.light .pwa-sb-close:hover,
    body.light .pwa-sb-close:active {
      background: rgba(0, 0, 0, 0.06);
      color: #0f172a;
    }

    /* Auto-hide banner when sidebars or modals are active */
    body.ai-sidebar-open #pwa-smart-banner,
    body.math-sidebar-open #pwa-smart-banner,
    body.is-editing-node #pwa-smart-banner,
    body:has(#ai-chat-sidebar:not(.hidden)) #pwa-smart-banner,
    body:has(#math-sidebar:not(.hidden)) #pwa-smart-banner {
      display: none !important;
    }

    /* === PWA GUIDE MODAL TABS & STEPS === */
    .pwa-os-tabs {
      display: flex;
      gap: 6px;
      background: rgba(255, 255, 255, 0.06);
      padding: 4px;
      border-radius: 10px;
    }

    body.light .pwa-os-tabs {
      background: rgba(0, 0, 0, 0.05);
    }

    .pwa-os-tab {
      flex: 1;
      padding: 7px 8px;
      border: none;
      background: transparent;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 600;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-family: inherit;
    }

    
.pwa-os-tab.active {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}


    body.light 
.pwa-os-tab.active {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}


    .pwa-os-content {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .pwa-guide-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      line-height: 1.45;
      color: #e2e8f0;
    }

    body.light .pwa-guide-step {
      color: #1e293b;
    }

    .pwa-step-num {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    body.light .pwa-step-num {
      background: #f4f4f5;
      color: #18181b;
    }

    .pwa-icon-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      height: 18px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.2);
      font-weight: 700;
      font-size: 12px;
      line-height: 1;
    }

    body.light .pwa-icon-pill {
      background: rgba(0, 0, 0, 0.08);
      border-color: rgba(0, 0, 0, 0.15);
    }

    .pwa-guide-tip {
      margin-top: 4px;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.25);
      font-size: 11.5px;
      color: #e4e4e7;
      line-height: 1.4;
    }

    body.light .pwa-guide-tip {
      background: #f4f4f5;
      border-color: #e4e4e7;
      color: #18181b;
    }

    /* === MOBILE FLOATING ACTION BAR === */
    .mobile-action-bar {
      position: fixed !important;
      bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 1000 !important;
      background: rgba(22, 22, 26, 0.94) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.14) !important;
      border-radius: 18px !important;
      padding: 4px 6px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
      display: flex !important;
      align-items: center !important;
      max-width: calc(100vw - 20px) !important;
      box-sizing: border-box !important;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    body.light .mobile-action-bar {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .mab-actions-group {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .mab-actions-group[style*="display: none"],
    .mab-actions-group[style*="display:none"] {
      display: none !important;
    }

    body.is-editing-node .mobile-action-bar,
    body.inbox-open .mobile-action-bar,
    body:has(#inbox-drawer.open) .mobile-action-bar {
      display: none !important;
    }

    .mab-btn {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      min-width: 40px !important;
      height: 40px !important;
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      color: #e4e4e7 !important;
      border-radius: 12px !important;
      cursor: pointer !important;
      font-family: inherit !important;
      touch-action: manipulation !important;
      transition: background 0.12s, transform 0.1s, color 0.12s !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }

    body.light .mab-btn {
      color: #27272a !important;
    }

    .mab-btn span {
      display: none !important;
    }

    .mab-btn:active {
      transform: scale(0.9) !important;
      background: rgba(255, 255, 255, 0.12) !important;
    }

    body.light .mab-btn:active {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    
.mab-btn.primary {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  font-weight: 600 !important;
}


    .mab-btn.primary:active {
      transform: scale(0.92) !important;
      filter: brightness(1.1) !important;
    }

    .mab-btn.danger {
      color: #f87171 !important;
    }

    .mab-btn.danger:active {
      background: rgba(239, 68, 68, 0.18) !important;
    }

    .mab-btn.active {
      background: rgba(255, 255, 255, 0.28) !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important;
    }

    body.light .mab-btn.active {
      background: rgba(255, 255, 255, 0.16) !important;
      color: #18181b !important;
      box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35) !important;
    }

    /* Hand Mode (Move canvas) */
    body.hand-mode-active #canvas-wrap,
    body.hand-mode-active #canvas,
    body.hand-mode-active .node,
    body.hand-mode-active .sticky-note {
      cursor: grab !important;
    }

    body.hand-mode-active.is-panning #canvas-wrap,
    body.hand-mode-active.is-panning #canvas,
    body.hand-mode-active.is-panning .node,
    body.hand-mode-active.is-panning .sticky-note {
      cursor: grabbing !important;
    }

    body.hand-mode-active .node,
    body.hand-mode-active .sticky-note,
    body.hand-mode-active .relationship-path,
    body.hand-mode-active .relationship-label,
    body.hand-mode-active .node-quick-actions,
    body.hand-mode-active .node-collapse-badge,
    body.hand-mode-active .node-fold-btn,
    body.hand-mode-active .node-note-badge,
    body.hand-mode-active .node-link-badge {
      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    /* === MOBILE FORMAT BOTTOM SHEET === */
    #format-sheet {
      display: block !important;
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 10001 !important;
      background: var(--toolbar-bg, #18181b) !important;
      border-top: 1px solid var(--toolbar-border, #333) !important;
      border-radius: 20px 20px 0 0 !important;
      padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px)) 18px !important;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55) !important;
      transform: translateY(105%) !important;
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
      box-sizing: border-box !important;
      max-height: 85vh !important;
      overflow-y: auto !important;
    }

    #format-sheet.show {
      transform: translateY(0) !important;
    }

    body.light #format-sheet {
      background: #ffffff !important;
      border-top-color: #e4e4e7 !important;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12) !important;
    }

    /* Mobile Global Format Panel: Native Bottom Sheet */
    #global-format-panel {
      top: auto !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      max-width: 100vw !important;
      max-height: 82vh !important;
      border-radius: 20px 20px 0 0 !important;
      border-bottom: none !important;
      border-left: none !important;
      border-right: none !important;
      z-index: 10002 !important;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6) !important;
      transform: translateY(105%) !important;
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
      box-sizing: border-box !important;
    }

    #global-format-panel.show {
      display: block !important;
      transform: translateY(0) !important;
    }

    body.light #global-format-panel {
      background: #ffffff !important;
      border-top-color: #e4e4e7 !important;
      box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15) !important;
    }

    /* Sheet Backdrop */
    .sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 10000;
    }

    .sheet-backdrop.show {
      display: block !important;
    }

    /* More Sheet for Selected Node */
    #mobile-more-sheet {
      display: block !important;
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 10002 !important;
      background: var(--toolbar-bg, #18181b) !important;
      border-top: 1px solid var(--toolbar-border, #333) !important;
      border-radius: 20px 20px 0 0 !important;
      padding: 12px 18px calc(20px + env(safe-area-inset-bottom, 0px)) 18px !important;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55) !important;
      transform: translateY(105%) !important;
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
      box-sizing: border-box !important;
      max-height: 80vh !important;
      overflow-y: auto !important;
    }

    #mobile-more-sheet.show {
      transform: translateY(0) !important;
    }

    body.light #mobile-more-sheet {
      background: #ffffff !important;
      border-top-color: #e4e4e7 !important;
    }

    .mms-grid {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 10px !important;
      padding: 10px 0 !important;
    }

    .mms-btn {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 14px !important;
      padding: 12px 4px !important;
      color: var(--toolbar-text, #eee) !important;
      cursor: pointer !important;
      font-family: inherit !important;
      transition: background 0.12s, transform 0.1s !important;
    }

    body.light .mms-btn {
      background: rgba(0, 0, 0, 0.03) !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
      color: #27272a !important;
    }

    .mms-btn:active {
      transform: scale(0.92) !important;
      background: rgba(255, 255, 255, 0.12) !important;
    }

    body.light .mms-btn:active {
      background: rgba(0, 0, 0, 0.08) !important;
    }

    .mms-btn svg {
      width: 22px !important;
      height: 22px !important;
    }

    .mms-btn span {
      font-size: 11px !important;
      font-weight: 600 !important;
      text-align: center !important;
      white-space: nowrap !important;
    }

    /* Quick Preset Colors in Format Sheet */
    .fs-color-presets {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 6px 0 !important;
      overflow-x: auto !important;
    }

    .fs-color-preset-dot {
      width: 28px !important;
      height: 28px !important;
      border-radius: 50% !important;
      border: 2px solid transparent !important;
      cursor: pointer !important;
      flex-shrink: 0 !important;
      transition: transform 0.15s, border-color 0.15s !important;
      box-sizing: border-box !important;
    }

    .fs-color-preset-dot:active {
      transform: scale(0.85) !important;
    }

    .fs-color-preset-dot.active {
      border-color: #ffffff !important;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
    }

    body.light .fs-color-preset-dot.active {
      border-color: #000000 !important;
    }

    /* Font Size Pills in Format Sheet */
    .fs-size-pills {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 4px 0 !important;
    }

    .fs-size-pill {
      flex: 1 !important;
      padding: 8px 4px !important;
      text-align: center !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid var(--toolbar-border, #333) !important;
      color: var(--toolbar-text, #eee) !important;
      cursor: pointer !important;
      font-family: inherit !important;
    }

    body.light .fs-size-pill {
      background: #f4f4f5 !important;
      color: #1a1a1a !important;
      border-color: #e4e4e7 !important;
    }

    .fs-size-pill.active {
      background: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
      font-weight: 700 !important;
    }

    body.light .fs-size-pill.active {
      background: #18181b !important;
      color: #ffffff !important;
      border-color: #18181b !important;
      font-weight: 700 !important;
    }

    /* Larger, touch-friendly Nodes */
    .node {
      padding: 10px 18px !important;
      min-height: 40px !important;
    }

    /* Touch friendly Context Menu */
    .ctx-item {
      padding: 12px 18px !important;
      font-size: 14px !important;
    }

    .ctx-item .ctx-key {
      display: none !important;
    }

    /* Search bar on mobile */
    #canvas-search-bar {
      top: calc(58px + env(safe-area-inset-top, 0px)) !important;
      width: calc(100vw - 24px) !important;
      max-width: 380px !important;
    }

    /* Modals & Dialogs on Mobile */
    .sb-modal-box,
    .modal-card,
    #help-box {
      width: 92vw !important;
      max-width: 440px !important;
      max-height: 85vh !important;
      border-radius: 16px !important;
      padding: 16px !important;
    }

    /* === FULLSCREEN MOBILE DRAWER FOR AI & MATH SIDEBARS === */
    .ai-chat-sidebar,
    .math-sidebar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100% !important;
      height: 100dvh !important;
      z-index: 10005 !important;
      border-left: none !important;
      box-shadow: none !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .ai-chat-sidebar.hidden,
    .math-sidebar.hidden {
      transform: translateX(100%) !important;
      pointer-events: none !important;
    }

    /* Auto-hide top toolbar on mobile when either sidebar is open to guarantee full screen & header visibility */
    body:has(#ai-chat-sidebar:not(.hidden)) #toolbar,
    body:has(#math-sidebar:not(.hidden)) #toolbar,
    body.ai-sidebar-open #toolbar,
    body.math-sidebar-open #toolbar {
      display: none !important;
    }

    /* Auto-hide floating mobile action bar when either sidebar is open */
    body.ai-sidebar-open .mobile-action-bar,
    body.math-sidebar-open .mobile-action-bar {
      display: none !important;
    }

    /* Auto-hide right-edge toggle tabs (AI and </>) when either sidebar is open */
    body.ai-sidebar-open #right-edge-toggle-group,
    body.math-sidebar-open #right-edge-toggle-group {
      display: none !important;
    }

    /* Touch-friendly header & close buttons on mobile with iPhone notch safe-area */
    .ai-cs-header,
    .math-sb-header {
      padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
      height: calc(54px + max(8px, env(safe-area-inset-top, 0px))) !important;
      min-height: calc(54px + max(8px, env(safe-area-inset-top, 0px))) !important;
      padding-left: 14px !important;
      padding-right: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      background: var(--toolbar-bg, #18181b) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      z-index: 10 !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }

    .ai-cs-icon-btn,
    .math-sb-icon-btn {
      width: 38px !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 9px !important;
    }

    .ai-cs-icon-btn svg,
    .math-sb-icon-btn svg {
      width: 18px !important;
      height: 18px !important;
    }

    /* Highly visible close buttons [✕] on mobile screen */
    #ai-cs-close-btn,
    #math-sb-close-btn {
      width: 40px !important;
      height: 40px !important;
      border-radius: 10px !important;
      background: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      color: #ffffff !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
      flex-shrink: 0 !important;
    }

    #ai-cs-close-btn:active,
    #math-sb-close-btn:active {
      background: rgba(239, 68, 68, 0.25) !important;
      border-color: rgba(239, 68, 68, 0.5) !important;
      color: #ef4444 !important;
      transform: scale(0.92) !important;
    }

    #ai-cs-close-btn svg,
    #math-sb-close-btn svg {
      width: 20px !important;
      height: 20px !important;
      stroke-width: 2.5 !important;
    }

    body.light #ai-cs-close-btn,
    body.light #math-sb-close-btn {
      background: rgba(0, 0, 0, 0.06) !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #1e293b !important;
    }

    /* Respect iPhone bottom safe-area for inputs & scrollable panels */
    .ai-cs-input-area {
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .math-sb-content {
      padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Math sidebar mobile adjustments */
    .math-sb-editor-box {
      padding: 8px 12px !important;
    }

    .math-sb-code-textarea {
      min-height: 72px !important;
      max-height: 120px !important;
      font-size: 13.5px !important;
    }

    .math-sb-tabs {
      padding: 0 8px !important;
      gap: 4px !important;
    }

    .math-sb-tab {
      padding: 8px 10px !important;
      font-size: 12.5px !important;
    }

    .math-sb-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 6px !important;
      padding: 8px 10px 24px !important;
    }

    .math-sb-btn {
      height: 40px !important;
      font-size: 13.5px !important;
      border-radius: 8px !important;
    }

    /* AI Chat footer on mobile: safe bottom spacing */
    .ai-cs-footer {
      padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px !important;
    }

    .ai-cs-input {
      font-size: 13.5px !important;
      padding: 9px 12px !important;
    }

    .ai-cs-send-btn {
      width: 38px !important;
      height: 38px !important;
    }
  }

  /* === 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: #ffffff !important;
    stroke-width: 3.2px !important;
    marker-end: url(#rel-arrow-white) !important;
  }

  .rel-group.rel-selected .rel-line {
    stroke: #ec4899 !important;
    stroke-width: 2.8 !important;
    filter: none !important;
    marker-end: url(#rel-arrow-selected) !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: #18181b;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    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: #18181b;
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .rel-node-btn:hover {
    transform: translate(-50%, -50%) scale(1.04);
    border-color: rgba(255, 255, 255, 0.6);
    background: #27272a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  body.light .rel-node-btn:hover {
    background: #f4f4f5;
    border-color: rgba(0, 0, 0, 0.45);
    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: #ffffff !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 #ffffff !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: #18181b;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    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: rgba(0, 0, 0, 0.25);
    color: #18181b;
    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: rgba(255, 255, 255, 0.45);
  }

  body.light #relation-popover input:focus {
    border-color: rgba(0, 0, 0, 0.45);
  }

  .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;
  }

  body.focus-mode .edge-path.focus-edge {
    opacity: 1 !important;
    filter: none !important;
  }

  body.focus-mode .rel-group,
  body.focus-mode .rel-node-btn,
  body.focus-mode .rel-curve-handle {
    display: none !important;
  }

  #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;
  }

  /* === FOCUS MODE POPOVER MENU === */
  .focus-menu-popover {
    position: fixed;
    z-index: 550;
    background: rgba(24, 24, 27, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 5px;
    min-width: 220px;
    font-family: inherit;
    user-select: none;
    animation: fmiFadeIn 0.15s ease-out;
  }

  @keyframes fmiFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  body.light .focus-menu-popover {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.15);
  }

  .focus-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #e4e4e7;
    transition: background 0.12s, color 0.12s;
  }

  body.light .focus-menu-item {
    color: #27272a;
  }

  .focus-menu-item svg {
    flex-shrink: 0;
    opacity: 0.85;
  }

  .focus-menu-item .fmi-label {
    flex: 1;
    white-space: nowrap;
  }

  .focus-menu-item .fmi-key {
    font-size: 11px;
    font-family: monospace;
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
  }

  body.light .focus-menu-item .fmi-key {
    background: rgba(0, 0, 0, 0.06);
  }

  .focus-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  body.light .focus-menu-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #000000;
  }

  .focus-menu-item.active {
    color: #38bdf8 !important;
    font-weight: 600;
  }

  .focus-menu-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 6px;
  }

  body.light .focus-menu-sep {
    background: rgba(0, 0, 0, 0.08);
  }


  body.zen-mode #toolbar,
  body.zen-mode #sidebar,
  body.zen-mode #inbox-drawer,
  body.zen-mode #ai-chat-sidebar,
  body.zen-mode #math-sidebar,
  body.zen-mode #sidebar-toggle,
  body.zen-mode #box-toggle,
  body.zen-mode #right-edge-toggle-group,
  body.zen-mode .ai-sidebar-edge-toggle,
  body.zen-mode .math-sidebar-edge-toggle,
  body.zen-mode #format-bar,
  body.zen-mode #format-sheet,
  body.zen-mode #view-controls,
  body.zen-mode #focus-banner,
  body.zen-mode #focus-mode-menu,
  body.zen-mode #minimap-wrap {
    display: none !important;
  }

  body.zen-mode #canvas-wrap,
  body.zen-mode:has(#sidebar) #canvas-wrap,
  body.zen-mode:not(.sidebar-hidden) #canvas-wrap,
  body.zen-mode:has(#sidebar:not(.hidden)) #canvas-wrap,
  body.zen-mode.inbox-open #canvas-wrap,
  body.zen-mode:has(#inbox-drawer.open) #canvas-wrap,
  body.zen-mode.ai-sidebar-open #canvas-wrap,
  body.zen-mode.math-sidebar-open #canvas-wrap {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transition: none !important;
  }

  #zen-exit-btn {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1000 !important;
    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: PRESENTATION MODE === */
  body.presentation-mode #toolbar,
  body.presentation-mode #sidebar,
  body.presentation-mode #sidebar-toggle,
  body.presentation-mode #box-toggle,
  body.presentation-mode .ai-sidebar-edge-toggle,
  body.presentation-mode .math-sidebar-edge-toggle,
  body.presentation-mode #format-bar,
  body.presentation-mode #format-sheet,
  body.presentation-mode #view-controls,
  body.presentation-mode #minimap-wrap,
  body.presentation-mode #focus-banner,
  body.presentation-mode #zen-exit-btn {
    display: none !important;
  }

  body.presentation-mode #canvas-wrap,
  body.presentation-mode:has(#sidebar) #canvas-wrap,
  body.presentation-mode:not(.sidebar-hidden) #canvas-wrap,
  body.presentation-mode:has(#sidebar:not(.hidden)) #canvas-wrap {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transition: none !important;
  }

  body.presentation-mode #toolbar {
    left: 0 !important;
  }

  /* --- Active slide node glow (soft ambient halo, gentle on the eyes) --- */
  body.presentation-mode .node.selected,
  body.presentation-mode .node.depth-2.selected,
  body.presentation-mode .node.pres-active-node,
  body.presentation-mode .node.depth-2.pres-active-node {
    outline: none !important;
  }

  .node.pres-active-node {
    outline: none !important;
    border-color: transparent !important;
    box-shadow:
      0 0 12px 1px rgba(255, 255, 255, 0.28),
      0 0 24px 4px rgba(255, 255, 255, 0.12) !important;
    transition: box-shadow 0.35s ease;
    z-index: 10 !important;
  }

  .node.depth-2.pres-active-node {
    outline: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 6px !important;
    box-shadow:
      0 0 12px 1px rgba(255, 255, 255, 0.28),
      0 0 24px 4px rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
  }

  body.light .node.pres-active-node {
    outline: none !important;
    border-color: transparent !important;
    box-shadow:
      0 0 10px 1px rgba(0, 0, 0, 0.20),
      0 0 22px 3px rgba(0, 0, 0, 0.08) !important;
  }

  body.light .node.depth-2.pres-active-node {
    outline: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 6px !important;
    box-shadow:
      0 0 10px 1px rgba(0, 0, 0, 0.20),
      0 0 22px 3px rgba(0, 0, 0, 0.08) !important;
    color: #18181B !important;
  }

  /* --- Presentation Focus Effect: Highlight active node + children, dim other nodes --- */
  body.presentation-mode .node:not(.pres-active-node):not(.pres-child-node):not(.pres-parent-node) {
    opacity: 0.15 !important;
    filter: blur(0.8px);
    transition: opacity 0.25s ease, filter 0.25s ease;
    cursor: pointer;
  }

  body.presentation-mode .node:not(.pres-active-node):not(.pres-child-node):not(.pres-parent-node):hover {
    opacity: 0.50 !important;
    filter: none !important;
  }

  body.presentation-mode .node.pres-active-node,
  body.presentation-mode .node.pres-child-node {
    opacity: 1 !important;
    filter: none !important;
    transition: opacity 0.25s ease, filter 0.25s ease;
  }

  /* Node cha trực tiếp sáng nhẹ (~55%) để giữ ngữ cảnh */
  body.presentation-mode .node.pres-parent-node {
    opacity: 0.55 !important;
    filter: none !important;
    transition: opacity 0.25s ease, filter 0.25s ease;
    cursor: pointer;
  }

  body.presentation-mode .node.pres-parent-node:hover {
    opacity: 0.85 !important;
  }

  body.presentation-mode .edge-path:not(.pres-edge-active):not(.pres-edge-parent) {
    opacity: 0.10 !important;
    transition: opacity 0.25s ease;
  }

  body.presentation-mode .edge-path.pres-edge-active {
    opacity: 1 !important;
    transition: opacity 0.25s ease;
  }

  body.presentation-mode .edge-path.pres-edge-parent {
    opacity: 0.45 !important;
    transition: opacity 0.25s ease;
  }

  body.presentation-mode .sticky-note,
  body.presentation-mode .rel-group,
  body.presentation-mode .rel-node-btn,
  body.presentation-mode .rel-curve-handle,
  body.presentation-mode .boundary-group {
    opacity: 0.10 !important;
    transition: opacity 0.25s ease;
  }

  /* --- Slide Picker Modal --- */
  #presentation-picker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10005 !important;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
  }

  .pres-picker-modal {
    background: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    width: min(420px, 94vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: width 0.2s ease, height 0.2s ease;
  }

  .pres-picker-modal.has-custom-open {
    width: min(760px, 95vw);
    height: min(540px, 85vh);
  }

  body.light .pres-picker-modal {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    color: #18181b !important;
  }

  .pres-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    user-select: none;
  }

  body.light .pres-picker-header {
    border-bottom-color: #e4e4e7;
  }

  .pres-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
  }

  body.light .pres-picker-title {
    color: #18181b;
  }

  .pres-picker-subtitle {
    display: none;
  }

  .pres-picker-x {
    background: transparent;
    border: none;
    color: #71717a;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.12s;
  }

  .pres-picker-x:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  body.light .pres-picker-x {
    color: #a1a1aa;
  }

  body.light .pres-picker-x:hover {
    background: #f4f4f5;
    color: #18181b;
  }

  .pres-picker-body {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    height: 100%;
  }

  /* Left Pane */
  .pres-left-pane {
    width: 100%;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    transition: width 0.2s ease;
    min-height: 0;
    height: 100%;
  }

  .pres-picker-modal.has-custom-open .pres-left-pane {
    width: 300px;
    min-width: 280px;
    max-width: 310px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.light .pres-picker-modal.has-custom-open .pres-left-pane {
    border-right-color: #e4e4e7;
  }

  /* Minimal Mode Cards */
  .pres-mode-card {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
  }

  .pres-mode-card:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .pres-mode-card.active {
    background: rgba(255, 255, 255, 0.07) !important;
    border-left-color: #ffffff !important;
  }

  .pres-mode-card.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  body.light .pres-mode-card {
    background: transparent;
    border-left: 3px solid transparent;
  }

  body.light .pres-mode-card:hover {
    background: #f8fafc;
  }

  body.light .pres-mode-card.active {
    background: #f4f4f5 !important;
    border-left-color: #18181b !important;
  }

  .pres-mode-top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .pres-mode-title {
    font-size: 13px;
    font-weight: 500;
    color: #f4f4f5;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pres-mode-card.active .pres-mode-title {
    font-weight: 600;
    color: #ffffff;
  }

  body.light .pres-mode-title {
    color: #3f3f46;
  }

  body.light .pres-mode-card.active .pres-mode-title {
    color: #18181b;
  }

  .pres-mode-badge {
    font-size: 9.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
  }

  body.light .pres-mode-badge {
    background: #e4e4e7;
    color: #52525b;
  }

  .pres-mode-steps {
    font-size: 11px;
    font-weight: 500;
    color: #71717a;
    white-space: nowrap;
  }

  .pres-mode-card.active .pres-mode-steps {
    color: #a1a1aa;
    font-weight: 600;
  }

  body.light .pres-mode-steps {
    color: #a1a1aa;
  }

  body.light .pres-mode-card.active .pres-mode-steps {
    color: #52525b;
  }

  .pres-mode-desc {
    display: none !important;
  }

  /* Start Point Group (Frameless, Minimal Spacing) */
  .pres-start-point-box {
    margin-top: 10px;
    padding: 6px 10px;
    background: transparent;
    border: none;
  }

  .pres-sp-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #71717a;
    display: block;
    margin-bottom: 6px;
  }

  body.light .pres-sp-label {
    color: #71717a;
  }

  .pres-sp-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .pres-sp-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #d4d4d8;
    cursor: pointer;
    user-select: none;
  }

  body.light .pres-sp-option {
    color: #3f3f46;
  }

  .pres-sp-option input[type="radio"] {
    accent-color: #ffffff;
    cursor: pointer;
    width: 13px;
    height: 13px;
    margin: 0;
  }

  body.light .pres-sp-option input[type="radio"] {
    accent-color: #18181b;
  }

  /* Custom Selection Toggle */
  .pres-custom-toggle-wrap {
    margin-top: 6px;
  }

  .pres-custom-toggle-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a1a1aa;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    transition: all 0.12s;
  }

  .pres-custom-toggle-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body.light .pres-custom-toggle-btn {
    background: #f4f4f5;
    border-color: #e4e4e7;
    color: #52525b;
  }

  body.light .pres-custom-toggle-btn:hover {
    background: #e4e4e7;
    color: #18181b;
  }

  /* Right Column: Custom Drawer (1 single column with tree hierarchy & reliable scrolling) */
  .pres-custom-drawer {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.015);
    overflow: hidden;
  }

  body.light .pres-custom-drawer {
    background: #fafafa;
  }

  .pres-tree-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  .pres-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    user-select: none;
  }

  body.light .pres-col-header {
    border-bottom-color: #e4e4e7;
  }

  .pres-col-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
  }

  body.light .pres-col-title-wrap {
    color: #18181b;
  }

  .pres-slide-count-badge {
    font-size: 10.5px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
    padding: 1px 5px;
    border-radius: 4px;
  }

  body.light .pres-slide-count-badge {
    background: #e4e4e7;
    color: #52525b;
  }

  .pres-col-actions {
    display: flex;
    gap: 4px;
  }

  .pres-action-btn {
    background: transparent;
    border: none;
    color: #a1a1aa;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
  }

  .pres-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  body.light .pres-action-btn {
    color: #52525b;
  }

  body.light .pres-action-btn:hover {
    background: #e4e4e7;
    color: #18181b;
  }

  /* Single Column Tree List with Perfect Smooth Scrolling */
  .pres-tree-list {
    overflow-y: auto !important;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    height: 100%;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    scrollbar-gutter: stable;
  }

  .pres-tree-list::-webkit-scrollbar {
    width: 6px;
  }

  .pres-tree-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .pres-tree-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
  }

  .pres-tree-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  body.light .pres-tree-list::-webkit-scrollbar-thumb {
    background: #d4d4d8;
  }

  body.light .pres-tree-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
  }

  .pres-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 5px;
    transition: background 0.1s ease;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
  }

  .pres-tree-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  body.light .pres-tree-item:hover {
    background: #f1f5f9;
  }

  .pres-tree-item.is-unchecked {
    opacity: 0.45;
  }

  .pres-tree-indent {
    display: inline-block;
    flex-shrink: 0;
  }

  .pres-tree-checkbox {
    width: 14px;
    height: 14px;
    accent-color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
  }

  body.light .pres-tree-checkbox {
    accent-color: #18181b;
  }

  .pres-slide-badge {
    min-width: 22px;
    height: 17px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .pres-tree-item.is-unchecked .pres-slide-badge {
    background: transparent;
    color: #52525b;
  }

  body.light .pres-slide-badge {
    background: #18181b;
    color: #ffffff;
  }

  body.light .pres-tree-item.is-unchecked .pres-slide-badge {
    background: transparent;
    color: #a1a1aa;
  }

  .pres-tree-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 1.4;
  }

  .pres-tree-item.depth-0 .pres-tree-label {
    font-weight: 600;
    color: #ffffff;
  }

  body.light .pres-tree-item.depth-0 .pres-tree-label {
    color: #18181b;
  }

  .pres-tree-item.depth-1 .pres-tree-label {
    font-weight: 500;
    color: #f4f4f5;
  }

  body.light .pres-tree-item.depth-1 .pres-tree-label {
    color: #27272a;
  }

  .pres-tree-item.depth-sub .pres-tree-label {
    font-weight: 400;
    color: #a1a1aa;
  }

  body.light .pres-tree-item.depth-sub .pres-tree-label {
    color: #52525b;
  }

  /* Depth badges maintained in CSS for test assertions */
  .pres-depth-badge.root,
  .pres-depth-badge.main {
    display: none;
  }

  /* Responsive Mobile */
  @media (max-width: 720px) {
    .pres-picker-modal.has-custom-open {
      width: 95vw;
      height: 90vh;
    }
    .pres-picker-modal.has-custom-open .pres-picker-body {
      flex-direction: column;
    }
    .pres-picker-modal.has-custom-open .pres-left-pane {
      width: 100%;
      max-width: none;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      max-height: 200px;
    }
  }

  /* Footer */
  .pres-picker-footer {
    display: flex;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    justify-content: flex-end;
  }

  body.light .pres-picker-footer {
    border-top-color: #e4e4e7;
  }

  .pres-btn-cancel {
    background: transparent;
    border: none;
    color: #a1a1aa;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
  }

  .pres-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  body.light .pres-btn-cancel {
    color: #71717a;
  }

  body.light .pres-btn-cancel:hover {
    background: #f4f4f5;
    color: #18181b;
  }

  .pres-btn-start {
    background: #ffffff;
    border: none;
    color: #000000;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, transform 0.1s;
  }

  .pres-btn-start:hover {
    background: #e4e4e7;
    transform: translateY(-1px);
  }

  body.light .pres-btn-start {
    background: #18181b;
    color: #ffffff;
  }

  body.light .pres-btn-start:hover {
    background: #27272a;
  }

  /* --- Presentation HUD Bar --- */
  #presentation-hud {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1800;
    align-items: center;
    gap: 4px;
    background: rgba(18, 18, 24, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 12px;
    padding: 7px 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }

  body.light #presentation-hud {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  .pres-hud-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d4d4d8;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    white-space: nowrap;
  }

  .pres-hud-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .pres-hud-btn.active,
  #pres-note-btn.active {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    font-weight: 600 !important;
  }

  .pres-hud-btn.active:hover,
  #pres-note-btn.active:hover {
    background: #09090b !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
  }

  body.light .pres-hud-btn {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #3f3f46;
  }

  body.light .pres-hud-btn:hover {
    background: #e4e4e7;
    color: #18181b;
  }

  body.light .pres-hud-btn.active,
  body.light #pres-note-btn.active {
    background: #18181b !important;
    border-color: #18181b !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    font-weight: 600 !important;
  }

  body.light .pres-hud-btn.active:hover,
  body.light #pres-note-btn.active:hover {
    background: #27272a !important;
    border-color: #27272a !important;
  }

  .pres-hud-exit {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }

  .pres-hud-exit:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  body.light .pres-hud-exit {
    color: #18181b !important;
    border-color: #d4d4d8 !important;
  }

  body.light .pres-hud-exit:hover {
    background: #e4e4e7 !important;
    color: #000000 !important;
    border-color: #a1a1aa !important;
  }

  .pres-hud-counter {
    font-size: 12px;
    font-weight: 600;
    color: #a1a1aa;
    min-width: 42px;
    text-align: center;
    padding: 0 4px;
  }

  body.light .pres-hud-counter {
    color: #71717a;
  }

  .pres-hud-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
  }

  body.light .pres-hud-sep {
    background: #d4d4d8;
  }

  /* --- Presentation Mode: Clean Left Note Panel (Pure Note View, Zero Clutter) --- */
  body.presentation-mode #inbox-drawer #inbox-quick-add,
  body.presentation-mode #inbox-drawer .inbox-quick-add,
  body.presentation-mode #inbox-drawer .inbox-drawer-header,
  body.presentation-mode #inbox-drawer .inbox-drawer-bar,
  body.presentation-mode #inbox-drawer .inbox-notes-toggle-divider,
  body.presentation-mode #inbox-drawer .inbox-normal-items-wrap {
    display: none !important;
  }

  body.presentation-mode #inbox-drawer {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.light.presentation-mode #inbox-drawer,
  body.presentation-mode.light #inbox-drawer {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.presentation-mode #inbox-drawer .inbox-drawer-list {
    background: transparent !important;
    background-color: transparent !important;
    padding: 32px 24px !important;
    overflow-y: auto !important;
  }

  body.presentation-mode #inbox-drawer .inbox-text-card,
  body.presentation-mode #inbox-drawer .inbox-text-card.is-node-note,
  body.presentation-mode #inbox-drawer .inbox-text-card.pres-pure-note {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    outline: none !important;
  }

  body.presentation-mode #inbox-drawer .inbox-text-card:hover,
  body.presentation-mode #inbox-drawer .inbox-text-card.is-node-note:hover,
  body.presentation-mode #inbox-drawer .inbox-text-card.pres-pure-note:hover {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.presentation-mode #inbox-drawer .inbox-card-actions,
  body.presentation-mode #inbox-drawer .inbox-text-card .inbox-card-actions,
  body.presentation-mode .inbox-text-card.is-node-note .inbox-card-actions {
    display: none !important;
  }

  body.presentation-mode #inbox-drawer .inbox-tc-content {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    padding-right: 0 !important;
    color: #f4f4f5 !important;
    cursor: text !important;
    user-select: text !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  body.light.presentation-mode #inbox-drawer .inbox-tc-content,
  body.presentation-mode.light #inbox-drawer .inbox-tc-content {
    color: #18181b !important;
  }

  /* === 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: #ffffff;
    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: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    transform: translateY(-1px);
  }

  .node-tag.tag-active {
    opacity: 1 !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
    font-weight: 600 !important;
  }

  .node-tag.tag-active .tag-hash {
    color: #000000 !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: rgba(0, 0, 0, 0.45);
    color: #18181b;
  }

  body.light .node-tag.tag-active {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
    font-weight: 600 !important;
  }

  body.light .node-tag.tag-active .tag-hash {
    color: #ffffff !important;
    opacity: 0.85 !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 #ffffff, 0 4px 14px rgba(255, 255, 255, 0.25) !important;
    z-index: 85 !important;
    transition: all 0.2s ease;
  }

  body.light.tag-filtering .node.tag-matched {
    box-shadow: 0 0 0 2px #18181b, 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  }

  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: #ffffff !important;
    stroke-width: 2px !important;
  }

  body.light.tag-filtering .edge-path.tag-matched-edge {
    stroke: #18181b !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(255, 255, 255, 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(255, 255, 255, 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: #ffffff !important;
  color: #000000 !important;
  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(255, 255, 255, 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 #ffffff;
    background: rgba(255, 255, 255, 0.15);
    pointer-events: none;
    border-radius: 2px;
  }

  body.light #minimap-viewport {
    border-color: #18181b;
    background: rgba(0, 0, 0, 0.1);
  }

  #minimap-toggle-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
    color: var(--toolbar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.15s;
  }

  #minimap-toggle-btn svg {
    pointer-events: none;
  }

  #minimap-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  body.light #minimap-toggle-btn {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
    color: #333;
  }

  body.light #minimap-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.12);
  }

  #minimap-wrap.minimized {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  #minimap-wrap.minimized #minimap-canvas,
  #minimap-wrap.minimized #minimap-viewport {
    display: none;
  }

  #minimap-wrap.minimized #minimap-toggle-btn {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: transparent;
    border: none;
  }

  /* === FLOATING VIEW CONTROLS (BOTTOM-LEFT CLUSTER) === */
  #view-controls {
    position: fixed;
    bottom: 18px;
    left: 18px;
    z-index: 400;
    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);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid 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(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  }


  
  body.light #view-controls .vc-btn.active {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  }



  #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: #ffffff;
  }

  body.light #view-controls .vc-zoom-val:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #18181b;
  }

  #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(255, 255, 255, 0.15);
    color: #ffffff;
    margin-left: 4px;
  }

  body.light .sb-inbox-tag {
    background: rgba(0, 0, 0, 0.08);
    color: #18181b;
  }

  .sb-folder-header.sb-inbox-header {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sb-folder-header.sb-inbox-header:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .sb-folder-act-btn.sb-inbox-drawer-btn {
    color: #d4d4d8;
  }

  .sb-folder-act-btn.sb-inbox-drawer-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    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(255, 255, 255, 0.15);
    color: #ffffff;
  }

  body.light .inbox-drawer-badge {
    background: rgba(0, 0, 0, 0.08);
    color: #18181b;
  }

  .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: var(--toolbar-bg);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  body.light .inbox-drawer-bar {
    border-bottom-color: rgba(0, 0, 0, 0.06);
    background: var(--toolbar-bg);
  }

  .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: #ffffff;
    color: #000000;
    border-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  }

  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: #18181b;
    color: #ffffff;
    border-color: #18181b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  /* 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: flex-start;
    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.45;
    min-height: 34px;
    max-height: 380px;
    overflow-y: hidden;
  }

  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: rgba(255, 255, 255, 0.45);
    box-shadow: none !important;
  }

  body.light .inbox-qa-box.compact textarea:focus,
  body.light .inbox-qa-box.compact input:focus {
    border-color: rgba(0, 0, 0, 0.45);
    box-shadow: none !important;
  }

  .inbox-qa-btn-inline {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    color: #000000;
    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: #e4e4e7;
    transform: translateY(-50%) scale(1.05);
  }

  body.light .inbox-qa-btn-inline {
    background: #18181b;
    color: #ffffff;
  }

  body.light .inbox-qa-btn-inline:hover {
    background: #27272a;
  }

  .inbox-qa-btn-act {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    padding: 0;
  }

  .inbox-qa-btn-act:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  body.light .inbox-qa-btn-act {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
  }

  body.light .inbox-qa-btn-act:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #18181b;
  }

  /* 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,
  #inbox-drawer-list,
  .inbox-text-card.expanded .inbox-tc-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  }

  .inbox-drawer-list::-webkit-scrollbar,
  #inbox-drawer-list::-webkit-scrollbar,
  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .inbox-drawer-list::-webkit-scrollbar-track,
  #inbox-drawer-list::-webkit-scrollbar-track,
  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .inbox-drawer-list::-webkit-scrollbar-thumb,
  #inbox-drawer-list::-webkit-scrollbar-thumb,
  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
  }

  .inbox-drawer-list::-webkit-scrollbar-thumb:hover,
  #inbox-drawer-list::-webkit-scrollbar-thumb:hover,
  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45) !important;
  }

  body.light .inbox-drawer-list,
  body.light #inbox-drawer-list,
  body.light .inbox-text-card.expanded .inbox-tc-content {
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
  }

  body.light .inbox-drawer-list::-webkit-scrollbar-thumb,
  body.light #inbox-drawer-list::-webkit-scrollbar-thumb,
  body.light .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22) !important;
  }

  body.light .inbox-drawer-list::-webkit-scrollbar-thumb:hover,
  body.light #inbox-drawer-list::-webkit-scrollbar-thumb:hover,
  body.light .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.42) !important;
  }

  .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: rgba(255, 255, 255, 0.4);
    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);
  }

  body.light .inbox-img-card:hover {
    border-color: rgba(24, 24, 27, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .inbox-img-card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .inbox-img-insert-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
    z-index: 3;
  }

  .inbox-img-insert-btn svg {
    display: block;
    width: 11px;
    height: 11px;
  }

  .inbox-img-insert-btn:hover {
    background: #e4e4e7;
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  }

  body.light .inbox-img-insert-btn {
    background: #18181b;
    color: #ffffff;
  }

  body.light .inbox-img-insert-btn:hover {
    background: #27272a;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  }

  .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: #ffffff;
    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;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .inbox-text-card:hover,
  .inbox-link-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    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: #f4f4f5;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }

  .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 .inbox-card-actions {
    flex-direction: column;
  }

  .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: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 11px;
  }

  .inbox-card-act-btn.insert:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  body.light .inbox-card-act-btn.insert {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
  }

  body.light .inbox-card-act-btn.insert:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #18181b;
  }

  .inbox-card-act-btn.del:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
  }

  .inbox-card-act-btn.expand:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  .inbox-text-card {
    min-height: 68px;
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .inbox-text-card.has-expand {
    min-height: 68px;
  }

  .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: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 30px;
    white-space: pre-wrap;
  }

  .inbox-text-card .inbox-tc-content[contenteditable="true"] {
    outline: none !important;
    cursor: text !important;
    user-select: text !important;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 3px 6px;
    margin: -3px -6px;
  }

  body.light .inbox-text-card .inbox-tc-content[contenteditable="true"] {
    background: rgba(0, 0, 0, 0.05);
  }

  .inbox-text-card.has-expand .inbox-tc-content {
    padding-right: 30px;
  }

  .inbox-text-card.expanded {
    flex-shrink: 0;
  }

  .inbox-text-card.expanded .inbox-card-actions {
    opacity: 1;
  }

  .inbox-text-card.expanded .inbox-tc-content {
    display: block;
    -webkit-line-clamp: unset;
    max-height: 380px;
    overflow-y: auto;
    word-break: break-word;
    user-select: text;
  }

  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar {
    width: 4px;
  }

  .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  body.light .inbox-text-card.expanded .inbox-tc-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  .inbox-tc-source {
    display: inline-block;
    font-size: 10.5px;
    color: #a1a1aa;
    text-decoration: underline;
    margin-top: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Pinned active node note card in Box (Brighter frame, uncollapsed, editable) */
  body:not(.presentation-mode) .inbox-text-card.is-node-note {
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
    transform: none !important;
    margin-bottom: 2px !important;
    cursor: default !important;
    min-height: 90px !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  body:not(.presentation-mode) .inbox-text-card.is-node-note:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .inbox-text-card.is-node-note .inbox-card-actions {
    opacity: 0.85 !important;
    top: 7px !important;
    right: 7px !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 5 !important;
  }

  .inbox-text-card.is-node-note:hover .inbox-card-actions {
    opacity: 1 !important;
  }

  .inbox-text-card.is-node-note .inbox-card-act-btn.save-box:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
  }

  .inbox-text-card.is-node-note .inbox-tc-content {
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    word-break: break-word !important;
    user-select: text !important;
    white-space: pre-wrap !important;
    cursor: text !important;
    padding-right: 32px !important;
    outline: none !important;
  }

  body.light:not(.presentation-mode) .inbox-text-card.is-node-note {
    border: 1.5px solid rgba(0, 0, 0, 0.25) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.light:not(.presentation-mode) .inbox-text-card.is-node-note:hover {
    background: #f4f4f5 !important;
    border-color: rgba(0, 0, 0, 0.45) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .inbox-text-card.is-node-note .node-note-content ul,
  .inbox-text-card.is-node-note .node-note-content ol {
    margin: 4px 0 4px 20px !important;
    padding-left: 0 !important;
  }

  .inbox-text-card.is-node-note .node-note-content ul {
    list-style-type: disc !important;
  }

  .inbox-text-card.is-node-note .node-note-content ol {
    list-style-type: decimal !important;
  }

  .inbox-text-card.is-node-note .node-note-content li {
    margin: 2px 0 !important;
  }

  .inbox-text-card.is-node-note .node-note-content b,
  .inbox-text-card.is-node-note .node-note-content strong {
    font-weight: 700 !important;
  }

  .inbox-text-card.is-node-note .node-note-content i,
  .inbox-text-card.is-node-note .node-note-content em {
    font-style: italic !important;
  }

  .inbox-text-card.is-node-note .node-note-content u {
    text-decoration: underline !important;
  }

  /* Toggle divider to reveal/hide normal box notes when active node note is pinned */
  .inbox-notes-toggle-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    margin: 1px 0 3px 0;
    line-height: 1;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    letter-spacing: 2px;
    transition: color 0.15s ease, opacity 0.15s ease;
  }

  .inbox-notes-toggle-divider:hover {
    color: #ffffff;
  }

  body.light .inbox-notes-toggle-divider {
    color: #64748b;
  }

  body.light .inbox-notes-toggle-divider:hover {
    color: #18181b;
  }

  .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: #ffffff;
    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: 350 !important;
    display: none;
    overflow-y: auto;
    padding: 24px 20px 80px;
    justify-content: center;
  }

  #outline-container.show {
    display: flex !important;
  }

  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-copy-btn,
  .outline-btn.primary {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  }


  .outline-btn.primary:hover {
    background: #e4e4e7;
  }

  body.light #outline-copy-btn,
  body.light .outline-btn.primary {
    background: #18181b !important;
    color: #ffffff !important;
    border: 1px solid #18181b !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  }


  body.light .outline-btn.primary:hover {
    background: #27272a;
  }

  .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: #ffffff;
    background: rgba(255, 255, 255, 0.12);
  }

  body.light .outline-toggle-btn:hover {
    color: #18181b;
    background: rgba(0, 0, 0, 0.08);
  }

  
  .outline-bullet {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 11px !important;
    margin-top: 5px !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    width: 14px !important;
    text-align: center !important;
  }


  body.light 
  .outline-bullet {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 11px !important;
    margin-top: 5px !important;
    flex-shrink: 0 !important;
    user-select: none !important;
    width: 14px !important;
    text-align: center !important;
  }


  .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: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
  }

  body.light .outline-item textarea:focus {
    border-color: rgba(0, 0, 0, 0.45);
    background: #ffffff;
  }

  .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,
  .outline-item:focus-within .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: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
  }

  body.light .outline-action-btn:hover {
    color: #18181b;
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
  }

  .outline-action-btn.del:hover {
    background: #dc2626;
    border-color: #ef4444;
    color: #fff;
  }

  body.light .outline-action-btn {
    border-color: #d8d8d4;
    background: #f0f0ee;
    color: #666;
  }

  .outline-action-btn.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
  }

  /* Outline item content container (title + link + note) */
  .outline-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .outline-item-content textarea.outline-title-ta {
    width: 100%;
  }

  /* Link Badge in Outline */
  .outline-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 11.5px;
    max-width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
    margin-top: 1px;
  }

  body.light .outline-link-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .outline-link-icon {
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .outline-link-url {
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
    line-height: 1.3;
  }

  .outline-link-url:hover {
    text-decoration: underline;
    color: #ffffff;
  }

  body.light .outline-link-url {
    color: #18181b !important;
  }

  body.light .outline-link-url:hover {
    color: #000000 !important;
    text-decoration: underline !important;
  }

  .outline-link-action-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 1px 3px;
    font-size: 11px;
    border-radius: 3px;
    line-height: 1;
  }

  .outline-link-action-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }

  body.light .outline-link-action-btn:hover {
    color: #111;
    background: rgba(0, 0, 0, 0.1);
  }

  .outline-link-action-btn.del:hover {
    color: #ef4444;
  }

  /* Inline Link Edit Row */
  .outline-link-edit-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    align-self: flex-start;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 1px;
  }

  body.light .outline-link-edit-row {
    background: #fff;
    border: 1px solid #d4d4d8;
  }

  .outline-link-input {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 11.5px;
    width: 250px;
    max-width: 100%;
    outline: none;
    padding: 2px 4px;
    font-family: inherit;
  }

  .outline-link-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11.5px;
    border-radius: 3px;
    line-height: 1;
  }

  .outline-link-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
  }

  .outline-link-btn.save:hover {
    color: #34d399;
  }

  .outline-link-btn.cancel:hover {
    color: #ef4444;
  }

  /* Note in Outline */
  
  .outline-note-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 2px !important;
    padding: 3px 8px 3px 8px !important;
    border-left: 2.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 0 5px 5px 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    position: relative !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  
  body.light .outline-note-wrap {
    background: rgba(0, 0, 0, 0.035) !important;
    border-left-color: rgba(0, 0, 0, 0.4) !important;
  }



  .outline-note-icon {
    font-size: 11px;
    opacity: 0.65;
    margin-top: 3px;
    flex-shrink: 0;
  }

  .outline-note-textarea {
    flex: 1;
    background: transparent;
    border: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: inherit;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 1px 0 !important;
    resize: none;
    overflow: hidden;
    outline: none !important;
    box-sizing: border-box;
    min-height: 22px !important;
  }

  body.light .outline-note-textarea {
    color: #4b5563 !important;
  }

  .outline-note-textarea:focus {
    color: inherit !important;
    background: transparent !important;
  }

  .outline-note-del-btn {
    opacity: 0;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 1px 4px;
    font-size: 10px;
    border-radius: 3px;
    align-self: flex-start;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
    margin-top: 3px;
  }

  .outline-note-wrap:hover .outline-note-del-btn {
    opacity: 1;
  }

  .outline-note-del-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
  }

  /* === 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: #ffffff;
    color: #000000;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
  }

  .history-restore-btn:hover {
    background: #e4e4e7;
  }

  body.light .history-restore-btn {
    background: #18181b;
    color: #ffffff;
  }

  body.light .history-restore-btn:hover {
    background: #27272a;
  }

  .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(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }

  body.light .sb-folder-header.sb-inbox-header {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .sb-folder-header.sb-inbox-header:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .sb-inbox-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 2px;
  }

  body.light .sb-inbox-tag {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
  }

  .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:not(.presentation-mode) #toolbar,
  body:has(#inbox-drawer.open):not(.presentation-mode) #toolbar {
    left: 310px !important;
  }

  body.inbox-open:not(.presentation-mode) #canvas-wrap,
  body:has(#inbox-drawer.open):not(.presentation-mode) #canvas-wrap {
    left: 310px !important;
  }

  body.inbox-open #format-bar,
  body:has(#inbox-drawer.open) #format-bar {
    left: 310px !important;
  }

  body.inbox-open #view-controls,
  body:has(#inbox-drawer.open) #view-controls {
    left: calc(310px + 18px) !important;
  }

  body.inbox-open #edge-toggle-group,
  body:has(#inbox-drawer.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 rgba(255, 255, 255, 0.5) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  body.light #inbox-drawer.map-node-drag-hover {
    border-right-color: rgba(24, 24, 27, 0.4) !important;
    background: rgba(0, 0, 0, 0.02) !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(255, 255, 255, 0.12);
    color: #d4d4d8;
  }

  body.light .inbox-drawer-badge {
    background: rgba(0, 0, 0, 0.08);
    color: #3f3f46;
  }

  .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: var(--toolbar-bg);
    position: relative;
    z-index: 10;
    flex-shrink: 0;
  }

  body.light .inbox-drawer-bar {
    background: var(--toolbar-bg);
  }

  .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(255, 255, 255, 0.16);
    color: #ffffff;
    font-weight: 600;
  }

  body.light .inbox-filter-tab.active {
    background: rgba(0, 0, 0, 0.08);
    color: #18181b;
  }

  .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(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
  }

  body.light .inbox-card:hover {
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  @keyframes inboxCardArrive {
    0% {
      transform: translateY(-8px);
      opacity: 0;
      box-shadow: 0 0 0 2px #ffffff;
    }

    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: #ffffff;
  }

  body.light .inbox-card.dragging {
    border-color: #18181b;
  }

  .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: #ffffff;
    color: #000000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s;
  }

  .inbox-card-insert-btn:hover {
    background: #e4e4e7;
  }

  body.light .inbox-card-insert-btn {
    background: #18181b;
    color: #ffffff;
  }

  body.light .inbox-card-insert-btn:hover {
    background: #27272a;
  }

  .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 #ffffff, 0 0 16px rgba(255, 255, 255, 0.4) !important;
  }

  body.light .node.inbox-drop-target {
    box-shadow: 0 0 0 3px #18181b, 0 0 16px rgba(0, 0, 0, 0.25) !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;
  }

  /* === GOOGLE DRIVE SYNC WIDGET & MODAL === */
  .gdrive-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .gdrive-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--toolbar-border);
    color: var(--toolbar-text);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }

  .gdrive-login-btn span {
    display: none !important;
  }

  .gdrive-login-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  body.light .gdrive-login-btn {
    background: #FFFFFF;
    border-color: #E2E2E8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  body.light .gdrive-login-btn:hover {
    background: #F4F4F5;
    border-color: #CBD5E1;
  }

  .gdrive-user-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    transition: transform 0.12s;
  }

  .gdrive-user-chip:hover {
    transform: scale(1.05);
  }

  .gdrive-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
  }

  .gdrive-sync-badge {
    position: absolute;
    bottom: -1px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--toolbar-bg);
    color: #fff;
    font-size: 8px;
  }

  .gdrive-sync-badge.synced {
    background: #10B981;
  }

  .gdrive-sync-badge.syncing {
    background: #3B82F6;
    animation: gdriveSpin 1.2s linear infinite;
  }

  .gdrive-sync-badge.error {
    background: #EF4444;
  }

  .gdrive-sync-badge.offline {
    background: #6B7280;
  }

  @keyframes gdriveSpin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* Dropdown Menu */
  .gdrive-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    background: var(--ctx-bg, #1a1a1f);
    border: 1px solid var(--toolbar-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    padding: 10px 8px;
    z-index: 1000;
    color: var(--toolbar-text);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: gdriveFadeIn 0.15s ease-out;
  }

  body.light .gdrive-menu {
    background: #FFFFFF;
    border-color: #E2E2E8;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  }

  @keyframes gdriveFadeIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .gdrive-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
  }

  .gdrive-avatar-lg {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
  }

  .gdrive-menu-info {
    flex: 1;
    min-width: 0;
  }

  .gdrive-user-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gdrive-user-email {
    font-size: 11px;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gdrive-menu-status-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 8px 10px;
    font-size: 11px;
    opacity: 0.8;
  }

  .gdrive-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px #10B981;
  }

  .gdrive-menu-sep {
    height: 1px;
    background: var(--toolbar-border);
    margin: 4px 6px;
    opacity: 0.6;
  }

  .gdrive-menu-item,
  a.gdrive-menu-item,
  a.gdrive-menu-item:visited,
  a.gdrive-menu-item:link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--toolbar-text, #E8E8E6) !important;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none !important;
  }

  .gdrive-menu-item:hover,
  a.gdrive-menu-item:hover {
    background: var(--btn-hover);
    color: var(--toolbar-text, #E8E8E6) !important;
  }

  .gdrive-menu-item svg,
  a.gdrive-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor;
    opacity: 0.85;
  }

  .gdrive-menu-item.danger {
    color: #EF4444 !important;
  }

  .gdrive-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444 !important;
  }

  /* Modal Generic */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
  }

  .modal-backdrop.active {
    display: flex;
  }

  .modal-card {
    background: var(--ctx-bg, #1a1a1f);
    border: 1px solid var(--toolbar-border);
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    color: var(--toolbar-text);
    font-family: inherit;
    overflow: hidden;
    animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.light .modal-card {
    background: #FFFFFF;
    border-color: #E2E2E8;
    color: #1a1a1a;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
  }

  body.light .modal-card p,
  body.light .modal-card label,
  body.light .modal-card ol {
    color: #222;
  }

  body.light .modal-card code {
    background: #f1f2f6 !important;
    color: #18181b !important;
  }

  body.light .modal-card .btn-cancel {
    border-color: #d0d0cc;
    color: #333;
  }

  body.light #license-pro-key-display {
    color: #0f172a !important;
  }

  @keyframes modalPop {
    from {
      opacity: 0;
      transform: scale(0.95);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--toolbar-border);
  }

  .modal-title {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .modal-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
  }

  .modal-close-btn:hover {
    opacity: 1;
    background: var(--btn-hover);
  }

  .modal-body {
    padding: 20px;
  }

  .btn-primary {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: #ffffff;
    color: #000000;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    background: #e4e4e7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }

  body.light .btn-primary {
    background: #18181b;
    color: #ffffff;
  }

  body.light .btn-primary:hover {
    background: #27272a;
  }

  .btn-cancel {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--toolbar-border);
    background: transparent;
    color: inherit;
    font-size: 12.5px;
    cursor: pointer;
    opacity: 0.8;
  }

  .btn-cancel:hover {
    background: var(--btn-hover);
    opacity: 1;
  }

  /* GDrive Consent Guide & Warning Components */
  .gdrive-guide-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .light .gdrive-guide-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
  }

  .gdrive-mock-google-box {
    background: #1e1f20;
    border: 1.5px solid #444746;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .light .gdrive-mock-google-box {
    background: #f8fafd;
    border-color: #c4c7c5;
  }

  .gdrive-mock-cb-success {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #0b57d0;
    border: 2px solid #0b57d0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(11, 87, 208, 0.8);
    animation: gdrive-pulse-success 1.8s infinite;
  }

  .gdrive-mock-cb-missing {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: rgba(239, 68, 68, 0.15);
    border: 2px dashed #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
    animation: gdrive-pulse-danger 1.5s infinite;
  }

  @keyframes gdrive-pulse-success {

    0%,
    100% {
      box-shadow: 0 0 8px rgba(11, 87, 208, 0.4);
    }

    50% {
      box-shadow: 0 0 20px rgba(16, 185, 129, 0.9);
    }
  }

  @keyframes gdrive-pulse-danger {

    0%,
    100% {
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
      transform: scale(1);
    }

    50% {
      box-shadow: 0 0 22px rgba(239, 68, 68, 0.85);
      transform: scale(1.06);
    }
  }

  /* AI Generating Screen */
  .ai-loader-card {
    position: relative;
    background: var(--toolbar-bg, #1a1a22) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 255, 255, 0.2) !important;
  }

  body.light .ai-loader-card {
    background: #ffffff !important;
    border-color: #e4e4e7 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15) !important;
  }

  .ai-loader-pulse-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-loader-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    animation: aiRingPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  }

  body.light .ai-loader-pulse-ring {
    border-color: rgba(99, 102, 241, 0.4);
  }

  .ai-loader-pulse-ring.ring-2 {
    animation-delay: 0.8s;
  }

  @keyframes aiRingPulse {
    0% {
      transform: scale(0.6);
      opacity: 1;
    }

    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

  .ai-loader-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: aiIconGlow 2s ease-in-out infinite alternate;
  }

  @keyframes aiIconGlow {
    0% {
      transform: scale(0.96);
      filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
    }

    100% {
      transform: scale(1.04);
      filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.7));
    }
  }

  .ai-loader-topic-pill {
    font-size: 12px;
    color: #e4e4e7;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 3px 12px;
    border-radius: 12px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-loader-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .ai-loader-progress-bar {
    width: 45%;
    height: 100%;
    background: #ffffff;
    border-radius: 2px;
    position: absolute;
    animation: aiProgressBarMove 1.6s ease-in-out infinite;
  }

  @keyframes aiProgressBarMove {
    0% {
      left: -45%;
    }

    100% {
      left: 100%;
    }
  }

  /* === PRO LICENSING & UPGRADE WIDGET === */
  .license-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .btn-upgrade-pro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #e4e4e7;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    white-space: nowrap;
  }

  .btn-upgrade-pro:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(168, 85, 247, 0.28));
    border-color: #ffffff;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(255, 255, 255, 0.3);
  }

  .btn-upgrade-pro.pro-active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
  }

  .btn-upgrade-pro.pro-active:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.25));
    border-color: #f59e0b;
    color: #fef3c7;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.3);
  }

  body.light .btn-upgrade-pro {
    background: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .btn-upgrade-pro:hover {
    background: linear-gradient(135deg, #f4f4f5, #dbeafe);
    border-color: #ffffff;
    color: #18181b;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
  }

  body.light .btn-upgrade-pro.pro-active {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-color: #fcd34d;
    color: #b45309;
  }

  body.light .btn-upgrade-pro.pro-active:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #92400e;
  }

  .license-feedback {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
  }

  .license-feedback.error {
    color: #ef4444;
  }

  .license-feedback.success {
    color: #10b981;
  }

  .license-buy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.45);
  }

  .sb-count-badge {
    font-size: 11px;
    opacity: 0.75;
    margin-left: 4px;
  }

  .sb-count-badge.limit-reached {
    color: #f59e0b;
    font-weight: 700;
    opacity: 1;
  }

  /* === AI ASSISTANT FEATURES (NODE & WHOLE MAP) === */
  .fb-btn.ai-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  }

  .fb-ai-popup {
    position: fixed;
    z-index: 450;
    width: 285px;
    background: var(--toolbar-bg, #15151c);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.3);
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 10px;
    animation: sbFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--toolbar-text, #eee);
  }

  .fb-ai-popup.show {
    display: flex !important;
  }

  .fb-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .fb-ai-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .fb-ai-act-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
  }

  .fb-ai-act-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
  }

  .fb-ai-act-icon {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
  }

  .fb-ai-act-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .fb-ai-act-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #f1f5f9;
  }

  .fb-ai-act-desc {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.25;
  }

  .fb-ai-custom-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .fb-ai-custom-inp {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 12px;
    color: #fff;
    outline: none;
    transition: all 0.15s ease;
    font-family: inherit;
  }

  .fb-ai-custom-inp:focus {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
  }

  .fb-ai-custom-submit {
    background: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 7px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }

  .fb-ai-custom-submit:hover {
    background: #e4e4e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  .ai-quick-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
  }

  .ai-quick-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    transform: translateY(-1px);
  }

  /* Light mode for AI features */
  body.light .fb-ai-popup {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #1e293b;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  body.light .fb-ai-header {
    border-bottom-color: #f1f5f9;
  }

  body.light .fb-ai-act-name {
    color: #1e293b;
  }

  body.light .fb-ai-act-desc {
    color: #64748b;
  }

  body.light .fb-ai-act-btn:hover {
    background: #f4f4f5;
    border-color: #d4d4d8;
  }

  body.light .fb-ai-custom-wrap {
    border-top-color: #f1f5f9;
  }

  body.light .fb-ai-custom-inp {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
  }

  body.light .fb-ai-custom-inp:focus {
    background: #fff;
    border-color: #18181b;
  }

  body.light .fb-ai-custom-submit {
    background: #18181b;
    border-color: #18181b;
    color: #ffffff;
  }

  body.light .fb-ai-custom-submit:hover {
    background: #27272a;
  }

  body.light .ai-quick-chip {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
  }

  body.light .ai-quick-chip:hover {
    background: #e4e4e7;
    border-color: #a1a1aa;
    color: #18181b;
  }

  body.light #ai-dialog-context {
    background: #f0f3ff;
    border-color: #e4e4e7;
    color: #18181b;
  }

  /* ==========================================================================
/* ==========================================================================
   AI Chat & Math Sidebar Right-Edge Toggle Group
   ========================================================================== */
  #right-edge-toggle-group {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 180;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    transition: right 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.ai-sidebar-open #right-edge-toggle-group,
  body.math-sidebar-open #right-edge-toggle-group {
    right: 340px !important;
  }

  body.zen-mode #right-edge-toggle-group {
    display: none !important;
  }

  .ai-sidebar-edge-toggle,
  .math-sidebar-edge-toggle {
    pointer-events: auto;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 26px;
    height: 44px;
    background: var(--toolbar-bg, #18181b);
    border: 1px solid var(--toolbar-border, #2e2e2e);
    border-right: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: var(--toolbar-text, #cbd5e1);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, color 0.15s, width 0.15s, border-color 0.15s;
  }

  .ai-sidebar-edge-toggle:hover,
  .math-sidebar-edge-toggle:hover {
    background: var(--btn-hover, #2e2e2e);
    color: #ffffff;
    width: 28px;
  }

  .ai-sidebar-edge-toggle .ai-edge-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
  }

  .math-sidebar-edge-toggle .math-edge-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  /* Active states when corresponding sidebar is open */
  body.ai-sidebar-open .ai-sidebar-edge-toggle {
    color: #ffffff;
    background: var(--btn-hover, #27272a);
    border-color: rgba(255, 255, 255, 0.4);
  }

  body.math-sidebar-open .math-sidebar-edge-toggle {
    color: #ffffff;
    background: var(--btn-hover, #27272a);
    border-color: rgba(255, 255, 255, 0.4);
  }

  .ai-chat-sidebar,
  .math-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 170;
    background: #18181b !important;
    border-left: 1px solid var(--toolbar-border, #2e2e2e);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    user-select: text;
  }

  .ai-chat-sidebar.hidden,
  .math-sidebar.hidden {
    transform: translateX(100%);
    pointer-events: none;
  }

  /* Canvas and Toolbar layout displacement on desktop */
  body.ai-sidebar-open #canvas-wrap,
  body.math-sidebar-open #canvas-wrap {
    right: 340px !important;
    transition: right 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.ai-sidebar-open #toolbar,
  body.math-sidebar-open #toolbar {
    right: 340px !important;
    transition: right 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Math Sidebar Internal Components */
  .math-sb-header {
    height: 54px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #18181b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .math-sb-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  
.math-sb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ffffff !important;
  color: #000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.math-sb-avatar svg {
  color: #000000 !important;
  stroke: #000000 !important;
}
body.light .math-sb-avatar {
  background: #18181b !important;
  color: #ffffff !important;
}
body.light .math-sb-avatar svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


  .math-sb-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--toolbar-text, #eee);
    line-height: 1.2;
  }

  .math-sb-subtitle {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
  }

  .math-sb-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .math-sb-icon-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8;
    transition: background 0.15s, color 0.15s;
  }

  .math-sb-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  /* Math Sidebar Code Editor Box */
  .math-sb-editor-box {
    padding: 10px 14px;
    background: rgba(24, 24, 27, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }

  .math-sb-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 6px;
  }

  .math-sb-editor-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .math-sb-editor-label.linked {
    color: #ffffff;
  }

  .math-sb-editor-tools {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .math-sb-tool-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 11px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s;
  }

  .math-sb-tool-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    color: #ffffff;
  }

  .math-sb-tool-btn.primary {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-weight: 500;
  }

  .math-sb-tool-btn.primary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
    color: #ffffff;
  }

  .math-sb-tool-btn.copied {
    color: #34d399 !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.15) !important;
  }

  .math-sb-code-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #f8fafc;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    resize: vertical;
    min-height: 120px;
    height: 128px;
    max-height: 280px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .math-sb-code-textarea:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: none !important;
  }

  /* Math Tabs */
  .math-sb-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(24, 24, 27, 0.8);
    flex-shrink: 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }

  .math-sb-tabs::-webkit-scrollbar {
    height: 3px;
  }

  .math-sb-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }

  .math-tab-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
  }

  .math-tab-btn:hover {
    color: #f4f4f5;
    background: rgba(255, 255, 255, 0.03);
  }

  .math-tab-btn.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
  }

  /* Matrix Builder */
  .math-matrix-builder {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
  }

  .math-matrix-builder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .math-matrix-builder-row:last-child {
    margin-bottom: 0;
  }

  .math-matrix-builder label {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .math-matrix-input {
    width: 36px;
    height: 26px;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 4px;
    color: #f4f4f5;
    text-align: center;
    font-size: 12px;
  }

  .math-matrix-select {
    flex: 1;
    height: 26px;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 4px;
    color: #f4f4f5;
    font-size: 11.5px;
    padding: 0 4px;
  }

  
.math-btn-builder {
  flex: 1;
  height: 26px;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px;
  color: #000000 !important;
  font-size: 11px;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.math-btn-builder:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
  color: #000000 !important;
}
body.light .math-btn-builder {
  background: #18181b !important;
  border: 1px solid #18181b !important;
  color: #ffffff !important;
}
body.light .math-btn-builder:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}


  .math-btn-builder:hover {
    background: #0369a1;
  }

  .math-btn-builder:active {
    transform: scale(0.98);
  }

  /* Math Content Panels & Sleek Scrollbars */
  .math-sb-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
  }

  .math-sb-content,
  .math-sb-code-textarea,
  .ai-cs-messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }

  .math-sb-content::-webkit-scrollbar,
  .math-sb-code-textarea::-webkit-scrollbar,
  .ai-cs-messages::-webkit-scrollbar {
    width: 5px;
  }

  .math-sb-content::-webkit-scrollbar-track,
  .math-sb-code-textarea::-webkit-scrollbar-track,
  .ai-cs-messages::-webkit-scrollbar-track {
    background: transparent;
  }

  .math-sb-content::-webkit-scrollbar-thumb,
  .math-sb-code-textarea::-webkit-scrollbar-thumb,
  .ai-cs-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .math-sb-content::-webkit-scrollbar-thumb:hover,
  .math-sb-code-textarea::-webkit-scrollbar-thumb:hover,
  .ai-cs-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
  }

  .math-sb-content::-webkit-scrollbar-button,
  .math-sb-code-textarea::-webkit-scrollbar-button,
  .ai-cs-messages::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  .math-tab-panel {
    display: none;
  }

  .math-tab-panel.active {
    display: block;
  }

  .math-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin: 12px 0 6px 0;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .math-category-title:first-child {
    margin-top: 0;
  }

  .math-category-title:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }

  .math-category-title::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 2px;
    opacity: 0.7;
  }

  .math-category-title:hover::after {
    opacity: 1;
  }

  .math-category-title.collapsed {
    margin-bottom: 4px;
    color: #64748b;
  }

  .math-category-title.collapsed:hover {
    color: #94a3b8;
  }

  .math-category-title.collapsed::after {
    transform: rotate(-45deg);
  }

  .math-category-title.collapsed+* {
    display: none !important;
  }

  .math-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .math-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    background: #27272a;
    border: 1px solid #3f3f46;
    border-radius: 5px;
    color: #f4f4f5;
    font-size: 13.5px;
    font-family: "KaTeX_Main", "Cambria Math", "Latin Modern Math", serif;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    padding: 2px 3px;
  }

  .math-btn:hover {
    background: #3f3f46;
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1px);
  }

  .math-btn:active {
    transform: scale(0.96);
  }

  .math-btn-wide {
    grid-column: span 2;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
    height: 30px;
  }

  .math-btn-full {
    grid-column: span 4;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
    height: 30px;
  }

  /* Visual Matrix & System of Equations Buttons */
  .math-btn-matrix {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
  }

  .matrix-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1;
  }

  .matrix-bracket {
    font-family: "KaTeX_Main", "Cambria Math", serif;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    user-select: none;
  }

  .matrix-bracket.matrix-bracket-3 {
    font-size: 26px;
  }

  .matrix-cells {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }

  .matrix-row {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }

  .matrix-sq {
    width: 5px;
    height: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-block;
  }

  .matrix-sq.matrix-sq-num {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    font-size: 8px;
    font-family: "KaTeX_Main", monospace;
    color: #ffffff;
    line-height: 1;
    min-width: 5px;
    text-align: center;
  }

  .math-btn-system {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    gap: 6px;
  }

  .system-visual {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
  }

  .system-brace {
    font-family: "KaTeX_Main", "Cambria Math", serif;
    font-size: 28px;
    line-height: 1;
    color: #ffffff;
  }

  .system-brace-3 {
    font-size: 36px;
  }

  .system-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .system-line {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .system-dash {
    width: 14px;
    height: 2px;
    background: #64748b;
    border-radius: 1px;
  }

  .system-eq {
    font-size: 9px;
    color: #94a3b8;
    line-height: 1;
  }

  .math-btn-piecewise {
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    gap: 8px;
  }

  .piecewise-fn {
    font-family: "KaTeX_Main", serif;
    font-size: 13px;
    color: #f4f4f5;
  }

  .piecewise-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .piecewise-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    color: #cbd5e1;
  }

  .piecewise-line .matrix-sq {
    width: 8px;
    height: 8px;
  }

  .piecewise-cond {
    color: #94a3b8;
    font-size: 9px;
  }

  /* ==========================================================================
   Visual Markdown Palette Buttons (Matching Canvas Node Typography)
   ========================================================================== */
  .md-btn-char {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
    font-size: 13.5px;
  }

  .md-vis-bold {
    font-weight: 800;
    color: #f8fafc;
  }

  .md-vis-italic {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    color: #f8fafc;
  }

  .md-vis-del {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    opacity: 0.8;
    color: #cbd5e1;
  }

  .md-vis-u {
    text-decoration: underline;
    text-underline-offset: 2.5px;
    text-decoration-thickness: 1.5px;
    color: #f8fafc;
  }

  .md-vis-mark {
    background: rgba(250, 204, 21, 0.35);
    color: #fef08a;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
    line-height: 1.2;
  }

  .md-vis-code {
    font-family: 'Fira Code', 'Consolas', monospace;
    background: rgba(255, 255, 255, 0.12);
    color: #fca5a5;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
  }

  .md-vis-sup,
  .md-vis-sub {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75em;
  }

  /* Headings H1, H2, H3 and Divider */
  .md-vis-h1 {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
  }

  .md-vis-h2 {
    font-size: 13px;
    font-weight: 700;
    color: #e4e4e7;
  }

  .md-vis-h3 {
    font-size: 12px;
    font-weight: 600;
    color: #d4d4d8;
  }

  .md-vis-hr {
    display: inline-block;
    width: 65%;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
  }

  /* Lists and Checklists */
  .md-btn-list {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    gap: 7px;
  }

  .md-vis-bullet {
    color: #ffffff;
    font-size: 17px;
    line-height: 1;
  }

  .md-vis-num {
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
  }

  .md-vis-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1.5px solid #94a3b8;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1;
    color: transparent;
    flex-shrink: 0;
  }

  
.md-vis-box.checked {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 700;
}


  .md-vis-done {
    text-decoration: line-through;
    opacity: 0.65;
  }

  /* Blockquote Button */
  .md-btn-quote {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px 0 12px !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid #ffffff !important;
  }

  .md-vis-quote-txt {
    color: #cbd5e1;
    font-style: italic;
    font-size: 11.5px;
  }

  /* Link Button */
  .md-btn-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    gap: 6px;
  }

  .md-vis-link-icon {
    font-size: 12px;
  }

  .md-vis-link-txt {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2.5px;
    font-weight: 500;
  }

  /* Codeblock Button */
  .md-btn-codeblock {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 5px;
    font-family: 'Fira Code', 'Consolas', monospace !important;
    font-size: 11.5px;
  }

  .md-vis-cb-tag {
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
  }

  .md-btn-codeblock code {
    color: #f1f5f9;
    background: transparent;
    padding: 0;
    font-size: 11.5px;
    font-family: inherit;
  }

  /* Table Buttons with mini preview */
  .md-btn-table {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    gap: 7px;
  }

  .md-vis-mini-table {
    display: inline-flex;
    flex-direction: column;
    width: 18px;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .md-vis-th-row {
    display: flex;
    height: 6px;
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .md-vis-td-row {
    display: flex;
    height: 7px;
    background: rgba(255, 255, 255, 0.05);
  }

  .th-cell,
  .td-cell {
    flex: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  .th-cell:last-child,
  .td-cell:last-child {
    border-right: none;
  }

  /* Light Mode Overrides for Visual Markdown Buttons */
  body.light .md-vis-bold {
    color: #0f172a;
  }

  body.light .md-vis-italic {
    color: #0f172a;
  }

  body.light .md-vis-del {
    color: #64748b;
  }

  body.light .md-vis-u {
    color: #0f172a;
  }

  body.light .md-vis-mark {
    background: rgba(234, 179, 8, 0.25);
    color: #854d0e;
  }

  body.light .md-vis-code {
    background: rgba(0, 0, 0, 0.08);
    color: #dc2626;
  }

  body.light .md-vis-sup,
  body.light .md-vis-sub {
    color: #18181b !important;
  }

  body.light .md-vis-h1 {
    color: #09090b !important;
  }

  body.light .md-vis-h2 {
    color: #27272a !important;
  }

  body.light .md-vis-h3 {
    color: #3f3f46 !important;
  }

  body.light .md-vis-hr {
    background: rgba(0, 0, 0, 0.3) !important;
  }

  body.light .md-vis-bullet,
  body.light .md-vis-num {
    color: #18181b !important;
  }

  body.light .md-btn-quote {
    background: #f4f4f5 !important;
    border-left: 3px solid #18181b !important;
  }

  body.light .md-vis-quote-txt {
    color: #334155 !important;
  }

  body.light .md-vis-link-txt {
    color: #18181b !important;
  }

  body.light .md-btn-codeblock {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  body.light .md-vis-cb-tag {
    color: #52525b !important;
  }

  body.light .md-btn-codeblock code {
    color: #1e293b;
  }

  body.light .md-vis-mini-table {
    border-color: rgba(0, 0, 0, 0.25);
  }

  body.light .md-vis-th-row {
    background: rgba(255, 255, 255, 0.25);
    border-bottom-color: rgba(0, 0, 0, 0.15);
  }

  body.light .md-vis-td-row {
    background: #ffffff;
  }

  body.light .th-cell,
  body.light .td-cell {
    border-right-color: rgba(0, 0, 0, 0.15);
  }

  /* Node Live In-Place Preview */
  .node-live-preview {
    margin-top: 6px;
    padding: 6px 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
    font-size: 1.05em;
    color: inherit;
    pointer-events: none;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
  }

  .node-live-preview:empty {
    display: none;
  }

  /* Markdown Rendered Content Styling in Nodes & Live Preview */
  .node-text-span:has(p, table, ul, ol, pre, blockquote, h1, h2, h3, hr),
  .node-live-preview:has(p, table, ul, ol, pre, blockquote, h1, h2, h3, hr) {
    white-space: normal !important;
    display: block !important;
    max-height: calc(1.45em * 6 + 10px);
    overflow: hidden;
  }

  .node-text-span p,
  .node-live-preview p {
    margin: 4px 0;
    line-height: 1.45;
  }

  .node-text-span p:first-child,
  .node-live-preview p:first-child {
    margin-top: 0;
  }

  .node-text-span p:last-child,
  .node-live-preview p:last-child {
    margin-bottom: 0;
  }

  .node-text-span h1,
  .node-live-preview h1 {
    font-size: 1.25em;
    font-weight: 700;
    color: #ffffff;
    margin: 6px 0 2px 0;
    line-height: 1.3;
  }

  .node-text-span h2,
  .node-live-preview h2 {
    font-size: 1.15em;
    font-weight: 700;
    color: #e4e4e7;
    margin: 5px 0 2px 0;
    line-height: 1.3;
  }

  .node-text-span h3,
  .node-live-preview h3 {
    font-size: 1.05em;
    font-weight: 600;
    color: #d4d4d8;
    margin: 4px 0 2px 0;
    line-height: 1.3;
  }

  .node-text-span hr,
  .node-live-preview hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 6px 0;
  }

  .node-text-span blockquote,
  .node-live-preview blockquote {
    margin: 4px 0;
    padding: 3px 8px;
    border-left: 3px solid #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0 4px 4px 0;
    color: #cbd5e1;
  }

  .node-text-span ul,
  .node-text-span ol,
  .node-live-preview ul,
  .node-live-preview ol {
    margin: 4px 0;
    padding-left: 18px;
    text-align: left;
  }

  .node-text-span li,
  .node-live-preview li {
    margin: 2px 0;
  }

  .node-text-span li input[type="checkbox"],
  .node-live-preview li input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
  }

  .node-text-span table,
  .node-live-preview table {
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 0.9em;
    width: 100%;
  }

  .node-text-span th,
  .node-text-span td,
  .node-live-preview th,
  .node-live-preview td {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    text-align: left;
  }

  .node-text-span th,
  .node-live-preview th {
    background: rgba(255, 255, 255, 0.1);
    font-weight: 600;
    color: #ffffff;
  }

  .node-text-span pre,
  .node-live-preview pre {
    margin: 4px 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.88em;
    white-space: pre !important;
  }

  .node-text-span code,
  .node-live-preview code {
    font-family: 'Fira Code', 'Consolas', monospace;
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #fca5a5;
  }

  .node-text-span pre code,
  .node-live-preview pre code {
    background: transparent;
    padding: 0;
    color: #f1f5f9;
  }

  .node-text-span mark,
  .node-live-preview mark {
    background: rgba(250, 204, 21, 0.35);
    color: #fef08a;
    padding: 1px 3px;
    border-radius: 2px;
  }

  .node-text-span a,
  .node-live-preview a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .node-text-span del,
  .node-live-preview del {
    opacity: 0.7;
  }

  .node-text-span u,
  .node-live-preview u {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Active visual math editing node indicator on Canvas */
  .node.node-math-visual-editing,
  .node.math-editing-active {
    outline: 2.5px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.45) !important;
    transition: outline 0.15s ease, box-shadow 0.15s ease;
    z-index: 50 !important;
  }

  body.light .node.node-math-visual-editing,
  body.light .node.math-editing-active {
    outline: 2.5px solid #ffffff !important;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.35) !important;
  }

  /* Visual Blinking Math Caret */
  .math-caret,
  .enclosing.math-caret {
    display: inline-block !important;
    width: 2px !important;
    min-width: 2px !important;
    max-width: 2px !important;
    height: 1.25em !important;
    min-height: 18px !important;
    background-color: #ffffff !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
    vertical-align: -0.15em !important;
    border: none !important;
    border-radius: 1px !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: hidden !important;
    line-height: 0 !important;
    color: transparent !important;
    animation: math-caret-blink 1s ease-in-out infinite !important;
    pointer-events: none !important;
  }

  .math-caret *,
  .enclosing.math-caret * {
    display: none !important;
  }

  @keyframes math-caret-blink {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }

  /* KaTeX Math Formula Rendering Inside Nodes */
  .katex {
    font-size: 1.05em !important;
    color: inherit !important;
    text-rendering: auto;
  }

  .katex-display-wrap {
    margin: 4px 0;
    text-align: center;
    overflow-x: auto;
    max-width: 100%;
  }

  .katex-inline-wrap {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

  /* Light Mode Overrides for Math Sidebar */
  body.light .math-sidebar-edge-toggle {
    background: #ffffff !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08) !important;
  }

  body.light .math-sidebar-edge-toggle:hover {
    background: #f4f4f5 !important;
    color: #000000 !important;
    border-color: #18181b !important;
  }

  body.light .math-sidebar {
    background: #ffffff !important;
    border-left: 1px solid #e4e4e7 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
  }

  body.light .math-sb-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e4e7 !important;
  }

  body.light .math-sb-title {
    color: #18181b !important;
  }

  body.light .math-sb-subtitle {
    color: #71717a !important;
  }

  body.light .math-sb-tabs {
    background: #f4f4f5 !important;
    border-bottom: 1px solid #e4e4e7 !important;
  }

  body.light .math-tab-btn {
    color: #71717a !important;
  }

  body.light .math-tab-btn:hover {
    color: #18181b !important;
    background: rgba(0, 0, 0, 0.04) !important;
  }

  body.light .math-tab-btn.active {
    color: #18181b !important;
    border-bottom: 2px solid #18181b !important;
    background: #ffffff !important;
    font-weight: 600 !important;
  }

  body.light .math-category-title {
    color: #71717a !important;
  }

  body.light .math-category-title:hover {
    color: #18181b !important;
  }

  body.light .math-btn {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .math-btn:hover {
    background: #f4f4f5 !important;
    border-color: #18181b !important;
    color: #000000 !important;
  }

  body.light .node-live-preview {
    border-top-color: rgba(0, 0, 0, 0.15);
  }

  body.light .math-sb-editor-box {
    background: #f8fafc !important;
    border-bottom: 1px solid #e4e4e7 !important;
  }

  body.light .math-sb-tool-btn {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .math-sb-tool-btn:hover {
    background: #f4f4f5 !important;
    border-color: #18181b !important;
    color: #000000 !important;
  }

  body.light .math-sb-code-textarea {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .math-sb-code-textarea:focus {
    border-color: #18181b !important;
    box-shadow: none !important;
  }

  body.light .math-caret,
  body.light .enclosing.math-caret {
    background-color: #18181b !important;
  }

  /* Matrix Builder Light Mode */
  body.light .math-matrix-builder {
    background: #f8fafc !important;
    border: 1px solid #e4e4e7 !important;
  }

  body.light .math-matrix-builder label {
    color: #52525b !important;
  }

  body.light .math-matrix-input {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .math-matrix-input:focus {
    border-color: #18181b !important;
  }

  body.light .math-matrix-select {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .math-matrix-select:focus {
    border-color: #18181b !important;
  }

  body.light .math-btn-builder {
    background: #18181b !important;
    border: 1px solid #18181b !important;
    color: #ffffff !important;
  }

  body.light .math-btn-builder:hover {
    background: #000000 !important;
    border-color: #000000 !important;
  }

  /* Matrix Visual Templates Light Mode */
  body.light .matrix-bracket {
    color: #18181b !important;
  }

  body.light .matrix-sq {
    border: 1px solid #71717a !important;
    background: rgba(0, 0, 0, 0.08) !important;
  }

  body.light .matrix-sq.matrix-sq-num {
    color: #18181b !important;
  }

  body.light .system-brace {
    color: #18181b !important;
  }

  body.light .system-dash {
    background: #71717a !important;
  }

  body.light .system-eq {
    color: #52525b !important;
  }

  body.light .piecewise-fn {
    color: #18181b !important;
  }

  body.light .piecewise-line {
    color: #27272a !important;
  }

  body.light .piecewise-cond {
    color: #52525b !important;
  }

  /* Sidebar Internal Components */
  .ai-cs-header {
    height: 54px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #18181b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  .ai-cs-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  
.ai-cs-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ffffff !important;
  color: #000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ai-cs-avatar svg {
  color: #000000 !important;
  stroke: #000000 !important;
}
body.light .ai-cs-avatar {
  background: #18181b !important;
  color: #ffffff !important;
}
body.light .ai-cs-avatar svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}


  .ai-cs-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--toolbar-text, #eee);
    line-height: 1.2;
  }

  .ai-cs-subtitle {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.2;
  }

  .ai-cs-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .ai-cs-icon-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }

  .ai-cs-icon-btn:hover {
    background: var(--btn-hover, rgba(255, 255, 255, 0.08));
    color: var(--toolbar-text, #fff);
  }

  .ai-cs-brand-btn {
    transition: all 0.15s ease;
  }

  #ai-cs-claude-btn {
    color: #da7756;
  }

  #ai-cs-claude-btn:hover {
    background: rgba(218, 119, 86, 0.18) !important;
    color: #ff9d7d !important;
  }

  #ai-cs-chatgpt-btn {
    color: #10a37f;
  }

  #ai-cs-chatgpt-btn:hover {
    background: rgba(16, 163, 127, 0.18) !important;
    color: #2ee6b3 !important;
  }

  /* Context Bar */
  .ai-cs-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin: 8px 12px 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
  }

  .ai-cs-context-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #e4e4e7;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  .ai-cs-context-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    flex-shrink: 0;
  }

  .ai-cs-context-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 10.5px;
    padding: 2px 7px;
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
  }

  .ai-cs-context-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
  }

  /* Messages */
  .ai-cs-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
  }

  .ai-cs-msg {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.15s ease-out;
  }

  .ai-cs-msg.user {
    align-self: flex-end;
    max-width: 86%;
  }

  
.ai-cs-msg.user .ai-cs-msg-bubble {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 500;
  border-radius: 12px 12px 2px 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  word-break: break-word;
}
body.light .ai-cs-msg.user .ai-cs-msg-bubble {
  background: #18181b !important;
  color: #ffffff !important;
}


  .ai-cs-msg.bot {
    align-self: flex-start;
    max-width: 96%;
  }

  .ai-cs-msg.bot .ai-cs-msg-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--toolbar-text, #e2e8f0);
    border-radius: 12px 12px 12px 2px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    word-break: break-word;
  }

  .ai-cs-msg.loading .ai-cs-msg-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 12px;
  }

  /* Action Card */
  .ai-action-card {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ai-ac-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #e4e4e7;
  }

  .ai-ac-preview-list {
    max-height: 140px;
    overflow-y: auto;
    font-size: 11.5px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
  }

  .ai-ac-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.35;
  }

  
.ai-ac-apply-btn {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px;
  padding: 7px 12px;
  color: #000000 !important;
  font-weight: 600 !important;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.ai-ac-apply-btn:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
  transform: translateY(-1px);
}
body.light .ai-ac-apply-btn {
  background: #18181b !important;
  border-color: #18181b !important;
  color: #ffffff !important;
}


  .ai-ac-apply-btn:hover {
    background: linear-gradient(135deg, #ffffff, #7c3aed);
    transform: translateY(-1px);
  }

  .ai-ac-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 6px;
    color: #6ee7b7;
    font-size: 11.5px;
    font-weight: 500;
  }

  .ai-ac-undo-btn {
    background: transparent;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 4px;
    color: #a7f3d0;
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
  }

  .ai-ac-undo-btn:hover {
    background: rgba(16, 185, 129, 0.2);
  }

  .ai-ac-btn-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
  }

  .ai-ac-new-proj-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 6px 10px;
    color: #e2e8f0;
    font-weight: 500;
    font-size: 11.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.15s ease;
    white-space: nowrap;
  }

  .ai-ac-new-proj-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
  }

  .ai-ac-reapply-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    color: #e4e4e7;
    font-size: 11px;
    padding: 2px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
  }

  .ai-ac-reapply-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
  }

  body.light .ai-ac-new-proj-btn {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #18181b;
  }

  body.light .ai-ac-new-proj-btn:hover {
    background: #e4e4e7;
    color: #18181b;
  }

  body.light .ai-ac-reapply-btn {
    background: #f4f4f5;
    border: 1px solid #d4d4d8;
    color: #18181b;
  }

  /* Checkbox selective apply on Action Card */
  .ai-ac-item-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    margin: 2px 6px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    transition: all 0.12s ease;
  }

  .ai-ac-item-checkbox:checked {
    background: #ffffff;
    border-color: #ffffff;
  }

  .ai-ac-item-checkbox:checked::after {
    content: '';
    width: 3.5px;
    height: 7px;
    border: solid #ffffff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    margin-top: -1px;
  }

  .ai-ac-preview-item.disabled {
    opacity: 0.4;
    text-decoration: line-through;
  }

  /* Mini Action Toolbar under Bot Messages (Copy, Save Note, Retry) */
  .ai-cs-msg-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    padding-top: 4px;
  }

  .ai-cs-msg-act-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #94a3b8;
    font-size: 11px;
    font-family: inherit;
    padding: 2px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.12s ease;
    line-height: 1.3;
  }

  .ai-cs-msg-act-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.2);
  }

  .ai-cs-msg-act-btn svg {
    flex-shrink: 0;
    opacity: 0.85;
  }

  /* Page range input for PDF in AI sidebar */
  .ai-cs-page-range-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }

  .ai-cs-page-range-input {
    width: 58px;
    height: 18px;
    padding: 1px 4px;
    font-size: 10.5px;
    font-family: inherit;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    text-align: center;
    outline: none;
  }

  .ai-cs-page-range-input:focus {
    border-color: #ffffff;
  }

  /* Quick Section Framework Mode Switcher */
  .ai-cs-quick-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .ai-cs-tab-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1px;
  }

  .ai-cs-tab-btn {
    background: transparent;
    border: none;
    font-size: 10.5px;
    font-family: inherit;
    color: #94a3b8;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s ease;
  }

  
.ai-cs-tab-btn.active {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600 !important;
}
body.light .ai-cs-tab-btn.active {
  background: #18181b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}


  /* Light mode overrides */
  body.light .ai-ac-item-checkbox {
    border-color: #cbd5e1;
  }

  body.light .ai-ac-item-checkbox:checked {
    background: #18181b !important;
    border-color: #18181b !important;
  }

  body.light .ai-cs-msg-act-btn {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
  }

  body.light .ai-cs-msg-act-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
  }

  body.light .ai-cs-page-range-input {
    background: #ffffff;
    color: #1e293b;
    border-color: #cbd5e1;
  }

  body.light .ai-cs-tab-toggle {
    background: #f1f5f9;
    border-color: #e2e8f0;
  }

  body.light .ai-cs-tab-btn {
    color: #64748b;
  }

  /* Quick Section */
  .ai-cs-quick-section {
    padding: 8px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }

  .ai-cs-quick-label {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 6px;
  }

  .ai-cs-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .ai-cs-quick-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
    white-space: nowrap;
  }

  .ai-cs-quick-chip:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
  }

  /* Input Area */
  .ai-cs-input-area {
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    background: var(--toolbar-bg, #1a1a1a);
  }

  .ai-cs-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    padding: 4px 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .ai-cs-input-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  .ai-cs-input {
    flex: 1;
    min-height: 28px;
    max-height: 120px;
    resize: none;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--toolbar-text, #fff);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    padding: 4px 4px;
  }

  .ai-cs-input:focus,
  .ai-cs-input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  
.ai-cs-send-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.12s;
}
.ai-cs-send-btn svg {
  color: #000000 !important;
  stroke: #000000 !important;
}
.ai-cs-send-btn:hover {
  background: #e4e4e7 !important;
  border-color: #e4e4e7 !important;
}
body.light .ai-cs-send-btn {
  background: #18181b !important;
  border-color: #18181b !important;
  color: #ffffff !important;
}
body.light .ai-cs-send-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
body.light .ai-cs-send-btn:hover {
  background: #27272a !important;
  border-color: #27272a !important;
}


  .ai-cs-send-btn:hover {
    background: linear-gradient(135deg, #ffffff, #18181b);
    transform: translateY(-1px);
  }

  .ai-cs-footer-hint {
    font-size: 10px;
    color: #64748b;
    margin-top: 4px;
    text-align: right;
  }

  .ai-cs-footer-hint kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 9.5px;
    font-family: inherit;
  }

  /* Light Mode Overrides for Edge Toggles */
  body.light #right-edge-toggle-group .ai-sidebar-edge-toggle,
  body.light #right-edge-toggle-group .math-sidebar-edge-toggle,
  body.light .math-sidebar-edge-toggle,
  body.light .ai-sidebar-edge-toggle {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08) !important;
  }

  body.light #right-edge-toggle-group .ai-sidebar-edge-toggle:hover,
  body.light #right-edge-toggle-group .math-sidebar-edge-toggle:hover,
  body.light .math-sidebar-edge-toggle:hover,
  body.light .ai-sidebar-edge-toggle:hover {
    background: #f4f4f5 !important;
    color: #000000 !important;
    border-color: #18181b !important;
  }

  body.light.ai-sidebar-open .ai-sidebar-edge-toggle,
  body.light.math-sidebar-open .math-sidebar-edge-toggle {
    background: #18181b !important;
    color: #ffffff !important;
    border-color: #18181b !important;
  }

  body.light .math-sb-content,
  body.light .math-sb-code-textarea,
  body.light .ai-cs-messages {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }

  body.light .math-sb-content::-webkit-scrollbar-thumb,
  body.light .math-sb-code-textarea::-webkit-scrollbar-thumb,
  body.light .ai-cs-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
  }

  body.light .math-sb-content::-webkit-scrollbar-thumb:hover,
  body.light .math-sb-code-textarea::-webkit-scrollbar-thumb:hover,
  body.light .ai-cs-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
  }

  /* Light Mode Overrides for AI Chat Sidebar */
  body.light .ai-chat-sidebar {
    background: #ffffff !important;
    border-left: 1px solid #e4e4e7 !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08) !important;
    color: #18181b !important;
  }

  body.light .ai-cs-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e4e4e7 !important;
  }

  body.light .ai-cs-title {
    color: #18181b !important;
  }

  body.light .ai-cs-subtitle {
    color: #71717a !important;
  }

  body.light .ai-cs-icon-btn {
    color: #71717a !important;
  }

  body.light .ai-cs-icon-btn:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
  }

  body.light .ai-cs-context-bar {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
  }

  body.light .ai-cs-context-label {
    color: #18181b !important;
  }

  body.light .ai-cs-context-btn {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .ai-cs-context-btn:hover {
    background: #f4f4f5 !important;
    border-color: #18181b !important;
  }

  body.light .ai-cs-messages {
    background: #ffffff !important;
    color: #18181b !important;
  }

  body.light .ai-cs-msg.bot .ai-cs-msg-bubble {
    background: #f8fafc !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
  }

  body.light .ai-cs-msg.user .ai-cs-msg-bubble {
    background: #18181b !important;
    border: 1px solid #18181b !important;
    color: #ffffff !important;
  }

  body.light .ai-action-card {
    background: #f8fafc !important;
    border: 1px solid #e4e4e7 !important;
  }

  body.light .ai-ac-header {
    color: #18181b !important;
  }

  body.light .ai-ac-preview-list {
    background: #f4f4f5 !important;
    color: #18181b !important;
  }

  body.light .ai-cs-quick-section {
    border-top: 1px solid #e4e4e7 !important;
  }

  body.light .ai-cs-quick-label {
    color: #71717a !important;
  }

  body.light .ai-cs-tab-toggle {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
  }

  body.light .ai-cs-tab-btn {
    color: #71717a !important;
  }

  body.light .ai-cs-tab-btn.active {
    background: #18181b !important;
    color: #ffffff !important;
  }

  body.light .ai-cs-quick-chip {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
  }

  body.light .ai-cs-quick-chip:hover {
    background: #f4f4f5 !important;
    border-color: #18181b !important;
    color: #000000 !important;
  }

  body.light .ai-cs-input-area {
    background: #ffffff !important;
    border-top: 1px solid #e4e4e7 !important;
  }

  body.light .ai-cs-input-wrap {
    background: #f4f4f5 !important;
    border: 1px solid #d4d4d8 !important;
  }

  body.light .ai-cs-input-wrap:focus-within {
    border-color: #d4d4d8 !important;
    box-shadow: none !important;
  }

  body.light .ai-cs-input {
    color: #18181b !important;
  }

  body.light .ai-cs-input::placeholder {
    color: #a1a1aa !important;
  }

  body.light .ai-cs-send-btn {
    background: #18181b !important;
    border: 1px solid #18181b !important;
    color: #ffffff !important;
  }

  body.light .ai-cs-send-btn svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }

  body.light .ai-cs-send-btn:hover {
    background: #000000 !important;
    border-color: #000000 !important;
  }

  body.light .ai-cs-footer-hint {
    color: #71717a !important;
  }

  body.light .ai-cs-footer-hint kbd {
    background: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
    color: #18181b !important;
  }

  /* Tablet Overrides (769px - 900px) */
  @media (min-width: 769px) and (max-width: 900px) {

    .ai-chat-sidebar,
    .math-sidebar {
      width: 100%;
      max-width: 360px;
      z-index: 210;
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45);
    }

    body.ai-sidebar-open #canvas-wrap,
    body.ai-sidebar-open #toolbar,
    body.math-sidebar-open #canvas-wrap,
    body.math-sidebar-open #toolbar {
      right: 0 !important;
    }
  }

  /* ── PROJECT LOADING INDICATORS & SKELETON ── */
  .project-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }

  .project-loading-indicator {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(24, 24, 27, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 8000;
    pointer-events: none;
    animation: projectFadeInDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.light .project-loading-indicator {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e293b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .project-loading-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: projectSpin 0.7s linear infinite;
    flex-shrink: 0;
  }

  @keyframes projectSpin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes projectFadeInDown {
    from {
      opacity: 0;
      transform: translate(-50%, -10px);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  /* Sidebar Item Loading state */
  .sb-item.loading {
    opacity: 0.85;
    position: relative;
    background: rgba(255, 255, 255, 0.12) !important;
  }

  .sb-item.loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: projectSpin 0.6s linear infinite;
  }

  /* Sidebar Skeleton shimmer */
  .sb-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
  }

  .sb-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
  }

  .sb-skeleton-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    animation: sbShimmer 1.4s ease-in-out infinite;
  }

  .sb-skeleton-bar {
    flex: 1;
    height: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    animation: sbShimmer 1.4s ease-in-out infinite;
  }

  .sb-skeleton-bar.short {
    width: 50%;
    flex: none;
  }

  .sb-skeleton-bar.medium {
    width: 75%;
    flex: none;
  }

  @keyframes sbShimmer {

    0%,
    100% {
      opacity: 0.35;
    }

    50% {
      opacity: 0.75;
    }
  }

  body.light .sb-skeleton-row {
    background: rgba(0, 0, 0, 0.03);
  }

  body.light .sb-skeleton-icon,
  body.light .sb-skeleton-bar {
    background: rgba(0, 0, 0, 0.08);
  }

  /* ── NIMBOKIT BRAND FOOTER IN SIDEBAR ── */
  .sb-footer-brand {
    padding: 9px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    user-select: none;
  }

  .sb-footer-brand strong,
  .sb-footer-brand .sb-footer-brand-title {
    color: #e2e8f0;
    font-weight: 600;
  }

  .sb-footer-brand a,
  .sb-footer-brand .sb-footer-brand-link,
  .sb-footer-brand a.sb-footer-brand-link,
  a.sb-footer-brand-link {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s ease, text-decoration 0.15s ease;
  }

  .sb-footer-brand a:hover,
  .sb-footer-brand .sb-footer-brand-link:hover,
  a.sb-footer-brand-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
    opacity: 0.85;
  }

  body.light .sb-footer-brand {
    border-top: 1px solid #e0e0dc;
    background: #f4f4f2;
    color: #71717a;
  }

  body.light .sb-footer-brand strong,
  body.light .sb-footer-brand .sb-footer-brand-title {
    color: #18181b;
    font-weight: 600;
  }

  body.light .sb-footer-brand a,
  body.light .sb-footer-brand .sb-footer-brand-link,
  body.light a.sb-footer-brand-link,
  body.light .sb-footer-brand a.sb-footer-brand-link,
  html[data-theme="light"] .sb-footer-brand a,
  html[data-theme="light"] .sb-footer-brand .sb-footer-brand-link,
  html[data-theme="light"] a.sb-footer-brand-link {
    color: #18181b !important;
    font-weight: 700;
    text-decoration: none;
  }

  body.light .sb-footer-brand a:hover,
  body.light .sb-footer-brand .sb-footer-brand-link:hover,
  body.light a.sb-footer-brand-link:hover,
  html[data-theme="light"] .sb-footer-brand a:hover,
  html[data-theme="light"] a.sb-footer-brand-link:hover {
    color: #000000 !important;
    text-decoration: underline;
    opacity: 0.85;
  }

  /* ── OVERSCROLL CONTAINMENT FOR ALL LONG TEXT CONTAINERS ── */
  .node-text-span,
  .node-editor,
  .node-note-text,
  .node-note-editor,
  .math-sb-code-textarea,
  .math-sb-content,
  .sb-list,
  .ai-chat-messages,
  .outline-body,
  .inbox-list,
  .fs-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── File to Mindmap UI (New Project Modal & AI Sidebar) ── */
  .sb-ai-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 9px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .sb-ai-file-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
  }

  body.light .sb-ai-file-btn {
    background: #ffffff;
    border: 1px dashed #64748b;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  body.light .sb-ai-file-btn:hover {
    background: #f1f5f9;
    border-color: #0f172a;
    color: #0f172a;
  }

  body.light .sb-ai-file-btn svg {
    stroke: #334155;
  }

  body.light .sb-ai-file-badge {
    background: #ecfdf5;
    border: 1px solid #86efac;
    color: #166534;
  }

  .sb-ai-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    color: #86efac;
    max-width: 100%;
  }

  .sb-ai-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
  }

  .sb-ai-file-remove {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    line-height: 1;
  }

  .sb-ai-file-remove:hover {
    color: #ef4444;
  }

  .ai-cs-attach-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }

  .ai-cs-attach-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .ai-cs-file-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    font-size: 11px;
    color: #e4e4e7;
    margin-bottom: 6px;
  }

  .ai-cs-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-cs-file-remove {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    padding: 0 2px;
    font-size: 11px;
  }

/* ── UNIVERSAL DROPDOWN SELECT & OPTION STYLES ── */
select,
.sb-form-select,
.sb-select,
.gfp-select,
.math-matrix-select {
  color-scheme: dark !important;
}

body.light select,
body.light .sb-form-select,
body.light .sb-select,
body.light .gfp-select,
body.light .math-matrix-select {
  color-scheme: light !important;
}

select option,
.sb-form-select option,
.sb-select option,
.gfp-select option,
.math-matrix-select option {
  background: #18181b !important;
  color: #f4f4f5 !important;
  padding: 6px 10px !important;
}

select option:hover,
select option:focus,
select option:checked,
.sb-form-select option:hover,
.sb-form-select option:focus,
.sb-form-select option:checked {
  background: #27272a !important;
  color: #ffffff !important;
}

body.light select option,
body.light .sb-form-select option,
body.light .sb-select option,
body.light .gfp-select option,
body.light .math-matrix-select option {
  background: #ffffff !important;
  color: #18181b !important;
}

body.light select option:hover,
body.light select option:focus,
body.light select option:checked,
body.light .sb-form-select option:hover,
body.light .sb-form-select option:focus,
body.light .sb-form-select option:checked {
  background: #f4f4f5 !important;
  color: #000000 !important;
}