@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    html, body {
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      overscroll-behavior: none; /* remove top/bottom bounce */
      height: 100%;
      overflow: hidden; /* all scrolling should be inside panels */
    }
    ins { background-color: #dcfce7; text-decoration: none; color: #166534; padding: 1px 2px; border-radius: 2px; }
    del { background-color: #fee2e2; color: #991b1b; opacity: 0.85; text-decoration: line-through; padding: 1px 2px; border-radius: 2px; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
    .shadow-soft { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }
    .modal-overlay { background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); }
    .kbd { border: 1px solid #e2e8f0; background: #fff; border-bottom-width: 2px; padding: 1px 6px; border-radius: 6px; font-size: 11px; color: #475569; }
    .prose pre { background: #0b1220; color: #e2e8f0; }
    .prose code { color: #0f172a; background: #f1f5f9; padding: 0 4px; border-radius: 4px; }
    .prose table { width: 100%; }
    .prose table thead th { background: #f8fafc; }
    .prose table { border-collapse: collapse; }
    .prose table th, .prose table td { border: 1px solid #e2e8f0; }
    /* Read typography: stronger heading hierarchy + spacing */
    .prose h1 { font-size: 1.875rem; line-height: 1.2; margin-top: 1.25em; margin-bottom: 0.6em; }
    .prose h2 { font-size: 1.35rem; line-height: 1.25; margin-top: 1.1em; margin-bottom: 0.55em; }
    .prose h3 { font-size: 1.15rem; line-height: 1.25; margin-top: 1em; margin-bottom: 0.5em; }
    .prose p { margin-top: 0.75em; margin-bottom: 0.75em; }
    .prose ul, .prose ol { margin-top: 0.6em; margin-bottom: 0.8em; }
    .prose hr { margin: 1.25em 0; }

    /* Markdown rendering (VSCode/Cursor-like, self-contained; do not rely on Tailwind Typography plugin) */
    .markdown-body { color: #0f172a; font-size: 16px; line-height: 1.75; }
    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
      font-weight: 800; color: #0f172a; letter-spacing: -0.01em;
      margin-top: 1.2em; margin-bottom: 0.55em;
    }
    /* Use em so headings scale with --md-font-size */
    .markdown-body h1 { font-size: 1.9em; padding-bottom: 0.35rem; border-bottom: 1px solid #e2e8f0; }
    .markdown-body h2 { font-size: 1.35em; padding-bottom: 0.25rem; border-bottom: 1px solid #f1f5f9; }
    .markdown-body h3 { font-size: 1.15em; }
    .markdown-body p { margin: 0.75em 0; }
    .markdown-body ul, .markdown-body ol { margin: 0.75em 0; padding-left: 1.4em; }
    .markdown-body li { margin: 0.25em 0; }
    .markdown-body li > ul, .markdown-body li > ol { margin-top: 0.35em; }
    /* Lists: match common Markdown preview conventions (disc → circle → square) */
    .markdown-body ul { list-style-type: disc; list-style-position: outside; padding-left: 1.6em; }
    .markdown-body ul ul { list-style-type: circle; }
    .markdown-body ul ul ul { list-style-type: square; }
    .markdown-body ol { list-style-type: decimal; list-style-position: outside; padding-left: 1.6em; }
    .markdown-body ol ol { list-style-type: lower-alpha; }
    .markdown-body ol ol ol { list-style-type: lower-roman; }
    .markdown-body li::marker { color: #94a3b8; font-weight: 600; }
    .markdown-body ul ul li::marker { color: #a3b2c7; }
    .markdown-body li > p { margin: 0.35em 0; }
    .markdown-body strong { font-weight: 800; }
    .markdown-body blockquote {
      margin: 1em 0;
      padding: 0.75em 1em;
      border-left: 4px solid #60a5fa;
      background: #f8fafc;
      color: #334155;
      border-radius: 10px;
    }
    .markdown-body blockquote p { margin: 0.25em 0; }
    .markdown-body hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.25em 0; }
    .markdown-body a { color: #2563eb; text-decoration: none; }
    .markdown-body a:hover { text-decoration: underline; }
    .markdown-body code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.92em;
      background: #f1f5f9;
      padding: 0.15em 0.35em;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }
    .markdown-body pre {
      margin: 1em 0;
      padding: 1em;
      background: #0b1220;
      color: #e2e8f0;
      border-radius: 14px;
      overflow: auto;
      border: 1px solid rgba(148, 163, 184, 0.25);
    }
    .markdown-body pre code {
      background: transparent;
      border: none;
      padding: 0;
      color: inherit;
      font-size: 0.9em;
    }
    .markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; }
    .markdown-body th, .markdown-body td { border: 1px solid #e2e8f0; padding: 0.55em 0.7em; vertical-align: top; }
    .markdown-body th { background: #f8fafc; font-weight: 800; color: #0f172a; }
    .markdown-body img { max-width: 100%; border-radius: 12px; border: 1px solid #e2e8f0; }

    /* Sticky table header in read visual */
    .markdown-body table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f8fafc;
    }

    /* Sidebars: collapse + resize */
    .sidebar-collapsed { width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; border: none !important; }
    .resizer { width: 6px; cursor: col-resize; background: transparent; }
    .resizer:hover { background: rgba(37, 99, 235, 0.12); }
    /* Floating open button aligned with collapse button in sidebar header */
    /* Header height (h-14 = 3.5rem = 56px) + top offset (header is at top: 56px) + button center offset (button is ~16px from top of header) */
    .floating-open-btn { position: fixed; top: calc(3.5rem + 0.5rem); z-index: 120; }

    /* Prevent overscroll bounce in scroll containers as well */
    #sidebar-left, #sidebar-right, #right-panel, #center-scroll { overscroll-behavior: none; }

    /* Modal fixed size */
    #modal { height: 80vh; max-height: 80vh; }

    /* Prevent layout shift when scrollbars appear/disappear inside panels */
    #sidebar-left, #right-panel, #center-scroll { scrollbar-gutter: stable; }
    #center-scroll { overflow-y: scroll; }

    /* Force visible scrollbar on WebKit (Chrome/Safari) */
    #center-scroll::-webkit-scrollbar { width: 10px; }
    #center-scroll::-webkit-scrollbar-track { background: transparent; }
    #center-scroll::-webkit-scrollbar-thumb {
      background-color: rgba(148, 163, 184, 0.7);
      border-radius: 8px;
      border: 2px solid transparent;
      background-clip: content-box;
    }

    /* Upload dropzone */
    .dropzone { border: 2px dashed #e2e8f0; background: #f8fafc; border-radius: 16px; }
    .dropzone-active { border-color: #2563eb; background: rgba(37, 99, 235, 0.06); }

    /* ===== UX fixes ===== */
    /* 1) Prevent sidebars from being squeezed by wide content (Chrome flex min-width behavior) */
    #sidebar-left, #sidebar-right { flex: 0 0 auto; flex-shrink: 0; }
    #center-main { min-width: 0; }
    #center-scroll { min-width: 0; }

    /* 2) Reading font sizing (Visual) - controlled via CSS variables */
    :root {
      --md-font-size: 13.5px;
      --md-line-height: 1.65;
    }
    .markdown-body { font-size: var(--md-font-size); line-height: var(--md-line-height); }

    /* 3) Visual editor */
    .markdown-editor-surface[contenteditable="true"]:focus { outline: 2px solid rgba(37, 99, 235, 0.25); outline-offset: 2px; }

    /* TOC active item */
    .toc-active { background: #e0f2fe; }
    .toc-active .toc-title { color: #0c4a6e; }

    /* Resizable table columns (Visual) */
    .markdown-body .md-resize-cell {
      display: block;
      width: 100%;
      overflow: auto;
    }
    .markdown-body .md-resize-table {
      table-layout: fixed;
    }
    .markdown-body th,
    .markdown-body td {
      position: relative;
    }
    .markdown-body .col-resizer {
      position: absolute;
      right: -3px;
      top: 0;
      width: 6px;
      height: 100%;
      cursor: col-resize;
      z-index: 2;
    }
    .markdown-body .col-resizer:hover {
      background: rgba(37, 99, 235, 0.12);
    }

    /* Mermaid fallback */
    .mermaid-fallback {
      margin: 1em 0;
      border: 1px solid #fee2e2;
      background: #fff1f2;
      color: #7f1d1d;
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 12px;
    }
    .mermaid-fallback pre {
      margin-top: 8px;
      background: #0b1220;
      color: #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      overflow: auto;
      border: 1px solid rgba(148, 163, 184, 0.25);
    }

    /* Cursor: pointer by default (clickable); move only when actively dragging */
    .folder-header[draggable="true"],
    .doc-card[draggable="true"] {
      cursor: pointer;
    }
    .folder-header.is-dragging,
    .doc-card.is-dragging {
      cursor: grabbing;
    }

    /* Fix button visibility: only show buttons on the specific item being hovered */
    /* Strategy: Hide child buttons when parent is hovered, but show on direct hover */
    
    /* Folder header buttons: hidden by default, shown on hover */
    .folder-header-buttons {
      opacity: 0 !important;
    }
    
    /* Hide buttons in child folder items when parent folder is hovered (but not the hovered item itself) */
    .folder-item.group:hover .folder-content .folder-item:not(:hover) .folder-header .folder-header-buttons {
      opacity: 0 !important;
    }
    
    /* Hide buttons in child items when root folder is hovered (but not the hovered item itself) */
    .root-folder:hover .root-folder-content .folder-item:not(:hover) .folder-header .folder-header-buttons {
      opacity: 0 !important;
    }
    
    /* Show buttons when directly hovering folder header - must come AFTER hide rules with !important */
    .folder-header:hover .folder-header-buttons {
      opacity: 1 !important;
    }
    
    /* Hide doc card buttons when parent folder is hovered BUT the doc card itself is NOT hovered */
    /* Use :not(:hover) to exclude cards that are directly hovered */
    .folder-item.group:hover .folder-content .doc-card:not(:hover) .doc-card-buttons {
      opacity: 0 !important;
    }
    
    .root-folder:hover .root-folder-content .doc-card:not(:hover) .doc-card-buttons {
      opacity: 0 !important;
    }
    
    /* Show buttons when directly hovering doc card - buttons are now absolutely positioned */
    /* These rules come AFTER hide rules and have higher specificity to ensure they override */
    .doc-card.group:hover .doc-card-buttons {
      opacity: 1 !important;
    }
    
    /* Also show for nested doc cards with even higher specificity */
    .folder-content .doc-card.group:hover .doc-card-buttons,
    .root-folder-content .doc-card.group:hover .doc-card-buttons,
    .folder-item .folder-content .doc-card.group:hover .doc-card-buttons,
    .folder-item.group:hover .folder-content .doc-card.group:hover .doc-card-buttons {
      opacity: 1 !important;
    }