/* ==================== SUPER GEMINI PRO STUDIO EDITOR (TYPORA & NOTEPAD++) =================== */

/* MOE���OVERRIDES FOR PRO STUDIO EDITOR */
.modal-card.modal-studio-editor {
  width: 1150px !important;
  max-width: 96vw !important;
  height: 92vh !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: var(--bg-modal, rgba(14, 18, 29, 0.96)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  border-top: 1px solid var(--border-glass-specular, rgba(255, 255, 255, 0.2)) !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(99, 102, 241, 0.15) !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-card.modal-studio-editor.is-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  border: none !important;
  inset: 0 !important;
  position: fixed !important;
  z-index: 1000 !important;
}

/* HEADER EXTENSIONS */
.editor-header-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.editor-header-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.editor-header-title {
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--text-main, #e2e8f0) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.editor-title-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  color: var(--text-main, #fff) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  outline: none !important;
  width: 100% !important;
  max-width: 360px !important;
  transition: all 0.2s ease !important;
}

.editor-title-input:focus {
  border-color: var(--primary, #8b5cf6) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
}

.editor-header-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* VIEW MODE SWITCHER PILLS (TYPORA STYLE) */
.editor-view-mode-group {
  display: inline-flex !important;
  flex-direction: row !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 2px !important;
}

.btn-view-mode {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted, #94a3b8) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.btn-view-mode:hover {
  color: var(--text-main, #f8fafc) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.btn-view-mode.active {
  background: var(--primary, #8b5cf6) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4) !important;
}

.btn-editor-tool {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-muted, #94a3b8) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  transition: all 0.15s ease !important;
  flex-shrink: 0 !important;
}

.btn-editor-tool:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* MARKDOWN QUICK RIBBON FORMATTING TOOLBAR */
.editor-ribbon-toolbar {
  background: #11131e !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  padding: 6px 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  white-space: nowrap !important;
}

.ribbon-btn-group {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 2px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.ribbon-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted, #94a3b8) !important;
  min-width: 28px !important;
  height: 26px !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  font-family: var(--font-mono, monospace) !important;
}

.ribbon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.ribbon-btn:active {
  transform: scale(0.95) !important;
}

.ribbon-btn.has-label {
  font-family: inherit !important;
  font-size: 11px !important;
}

.ribbon-sep {
  width: 1px !important;
  height: 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  margin: 0 2px !important;
  flex-shrink: 0 !important;
}

/* FIND & REPLACE DOCK PANEL */
.editor-find-replace-panel {
  background: #0f111a !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  padding: 8px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  animation: slashFadeIn 0.15s ease !important;
  flex-shrink: 0 !important;
}

.find-replace-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.find-input-wrap {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.find-input-wrap i {
  position: absolute !important;
  left: 10px !important;
  font-size: 11px !important;
  color: var(--text-dim, #64748b) !important;
  pointer-events: none !important;
}

.find-input-wrap input {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 6px !important;
  padding: 5px 65px 5px 28px !important;
  color: var(--text-main, #fff) !important;
  font-size: 12.5px !important;
  font-family: inherit !important;
  outline: none !important;
}

.find-input-wrap input:focus {
  border-color: var(--primary, #8b5cf6) !important;
}

.find-counter {
  position: absolute !important;
  right: 10px !important;
  font-size: 11px !important;
  color: var(--text-dim, #64748b) !important;
  font-family: var(--font-mono, monospace) !important;
  pointer-events: none !important;
}

.btn-find-action {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-main, #e2e8f0) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.btn-find-action:hover {
  background: var(--primary, #8b5cf6) !important;
  border-color: var(--primary, #8b5cf6) !important;
  color: #fff !important;
}

/* DUAL-OANE WORKSPACE CONTAINER */
.studio-editor-workspace {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  min-height: 0 !important;
  height: 100% !important;
  position: relative !important;
  background: #0d0f17 !important;
  overflow: hidden !important;
}

/* WORKSPACE VIEW MODES */
.studio-editor-workspace.mode-edit .editor-pane-left {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.studio-editor-workspace.mode-edit .editor-pane-right {
  display: none !important;
}

.studio-editor-workspace.mode-preview .editor-pane-left {
  display: none !important;
}

.studio-editor-workspace.mode-preview .editor-pane-right {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.studio-editor-workspace.mode-split .editor-pane-left {
  flex: 1 1 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}

.studio-editor-workspace.mode-split .editor-pane-right {
  flex: 1 1 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

/* LEFT PANE: NOTEPAD++ CODE EDITOR & GUTTER */
.editor-pane-left {
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  background: #0d0f17 !important;
  overflow: hidden !important;
}

/* NOTEPAD++ GUTTER LINE NUMBERS */
.editor-gutter {
  width: 52px !important;
  flex-shrink: 0 !important;
  background: #090a10 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #4b5563 !important;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, Menlo, monospace !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  padding: 16px 8px 16px 4px !important;
  text-align: right !important;
  user-select: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: block !important;
}

.gutter-line {
  display: block !important;
  height: 21.45px !important;
  line-height: 21.45px !important;
  transition: color 0.1s ease !important;
}

.gutter-line.active {
  color: var(--accent-cyan, #38bdf8) !important;
  font-weight: 700 !important;
}

/* NOTEPAD++ CODE TEXTAREA CONTAINER */
.editor-code-container {
  flex: 1 1 auto !important;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.studio-textarea {
  width: 100% !important;
  height: 100% !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  color: #e2e8f0 !important;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, Menlo, monospace !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  resize: none !important;
  outline: none !important;
  tab-size: 2 !important;
  white-space: pre !important;
  word-wrap: normal !important;
  overflow: auto !important;
  caret-color: #fde68a !important;
  display: block !important;
}

.studio-textarea.wrap-text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* RIGHT PANE: TYPORA KIVE MARKDOWN PREVIEW */
.editor-pane-right {
  height: 100% !important;
  min-height: 0 !important;
  background: #11131e !important;
  overflow-y: auto !important;
  padding: 24px 32px !important;
  box-sizing: border-box !important;
  color: var(--text-main, #e2e8f0) !important;
  display: block !important;
}

.editor-live-preview {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #e2e8f0 !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.editor-live-preview h1, 
.editor-live-preview h2, 
.editor-live-preview h3, 
.editor-live-preview h4 {
  color: #fff !important;
  font-weight: 700 !important;
  margin-top: 1.4em !important;
  margin-bottom: 0.6em !important;
  line-height: 1.3 !important;
}

.editor-live-preview h1 { font-size: 1.85em !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 0.3em !important; }
.editor-live-preview h2 { font-size: 1.45em !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; padding-bottom: 0.25em !important; }
.editor-live-preview h3 { font-size: 1.25px !important; }
.editor-live-preview p { margin: 0.8em 0 !important; }

.editor-live-preview blockquote {
  border-left: 4px solid var(--primary, #8b5cf6) !important;
  padding: 8px 16px !important;
  margin: 1em 0 !important;
  background: rgba(139, 92, 246, 0.08) !important;
  border-radius: 0 8px 8px 0 !important;
  color: #cbd5e1 !important;
}

.editor-live-preview table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.2em 0 !important;
  font-size: 13.5px !important;
}

.editor-live-preview th, 
.editor-live-preview td {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

.editor-live-preview th {
  background: rgba(255, 255, 255, 0.06) !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.editor-live-preview tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02) !important;
}

.editor-live-preview code:not(pre code) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fca5a5 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
}

.editor-live-preview pre {
  background: #090a10 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  margin: 1em 0 !important;
}

.editor-live-preview pre code {
  color: #a5f3fc !important;
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.editor-live-preview hr {
  border: none !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  margin: 2em 0 !important;
}

/* FOOTER STATUS BAR (NOTEPAD++ STYLE) */
.editor-status-bar {
  background: #090a10 !important;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  padding: 8px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 11.5px !important;
  color: var(--text-dim, #64748b) !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.editor-status-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.status-metric-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--text-muted, #94a3b8) !important;
  font-family: var(--font-mono, monospace) !important;
}

.status-metric-item.cursor-pos {
  color: var(--accent-cyan, #38bdf8) !important;
  font-weight: 600 !important;
}

.status-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted, #94a3b8) !important;
}

.editor-status-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ==================== PRO STUDIO EDITOR: OBSIDIAN MOBILE FULL-SCREEN SHEET ==================== */
@media (max-width: 860px) {
  .modal-card.modal-studio-editor {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    inset: 0 !important;
    position: fixed !important;
  }

  .editor-header-controls .btn-fullscreen-toggle {
    display: none !important;
  }

  .editor-view-mode-group button[data-mode="split"] {
    display: none !important;
  }

  .studio-editor-workspace.mode-split .editor-pane-left {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .studio-editor-workspace.mode-split .editor-pane-right {
    display: none !important;
  }

  /* Single-row swipeable formatting toolbar */
  .editor-ribbon-toolbar,
  .editor-toolbar-ribbon {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    scrollbar-width: none !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    flex-shrink: 0 !important;
  }
  .editor-ribbon-toolbar::-webkit-scrollbar,
  .editor-toolbar-ribbon::-webkit-scrollbar {
    display: none !important;
  }

  .editor-find-replace-bar:not(.is-open) {
    display: none !important;
  }

  .ribbon-btn {
    flex-shrink: 0 !important;
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    min-width: 28px !important;
    height: 28px !important;
  }

  .ribbon-btn.hide-mobile,
  .ribbon-btn.has-label:not(.btn-trigger-copilot) span {
    display: none !important;
  }

  /* Compact Tags bar & Auto-Collapse on Mobile */
  .note-meta-editor-bar,
  .editor-meta-tags-bar {
    display: none !important; /* Zen Clean mode on mobile */
  }

  .note-meta-editor-bar.is-open {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 10px !important;
  }

  .related-notes-mini-pills {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .related-notes-mini-pills::-webkit-scrollbar {
    display: none !important;
  }

  /* Mobile Slim Gutter & Spacious Typing Canvas */
  .editor-gutter {
    width: 34px !important;
    min-width: 34px !important;
    padding: 12px 4px 12px 2px !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
  }
  .gutter-line {
    height: 18.4px !important;
    line-height: 18.4px !important;
  }
  .studio-textarea {
    padding: 12px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  /* Compact & Precision Footer in Mobile Note Editor */
  .editor-status-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    background: #090a10 !important;
  }

  .editor-status-left {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 11px !important;
  }

  /* Hide verbose metrics on mobile, keep only cursor pos & words count */
  #noteStatsChars,
  #noteStatsLines,
  #noteStatsReadTime,
  .status-badge {
    display: none !important;
  }

  .editor-status-right {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
  }

  /* Hide Cancel, Download & GDrive sync button on mobile */
  .editor-status-right #btnDownloadSingleNote,
  .editor-status-right .btn-gdrive-sync,
  .editor-status-right .btn-close-modal,
  .editor-status-right .btn-secondary {
    display: none !important;
  }

  /* Full-width Save Note button on mobile */
  .editor-status-right #btnSaveNoteModal,
  .editor-status-right .btn-primary {
    width: 100% !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm, 6px) !important;
  }
}

/* ==================== INLINE COPILOT PROMPT BAR ==================== */
.editor-inline-copilot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 23, 36, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--primary, #6366F1) !important;
  border-top: 1px solid var(--accent-cyan, #38BDF8) !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 6px 12px !important;
  margin: 6px 14px 0 !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px var(--primary-glow) !important;
  animation: copilotSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10 !important;
}

@keyframes copilotSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.editor-inline-copilot.hidden {
  display: none !important;
}

.inline-copilot-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--accent-cyan, #38bdf8) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.inline-copilot-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text-bright, #fff) !important;
  font-size: 12.5px !important;
  padding: 4px 6px !important;
}

.inline-copilot-input::placeholder {
  color: var(--text-dim, #64748b) !important;
  font-size: 12px !important;
}

.btn-copilot-action {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius-sm, 4px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 11px !important;
  transition: all 0.15s ease !important;
  border: none !important;
  flex-shrink: 0 !important;
}

.btn-copilot-submit {
  background: var(--primary, #0078D4) !important;
  color: #fff !important;
}

.btn-copilot-submit:hover:not(:disabled) {
  background: var(--primary-hover, #026ec1) !important;
  transform: scale(1.05) !important;
}

.btn-copilot-submit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.btn-copilot-close {
  background: transparent !important;
  color: var(--text-muted, #94a3b8) !important;
}

.btn-copilot-close:hover {
  background: rgba(248, 81, 73, 0.15) !important;
  color: var(--accent-red, #f85149) !important;
}

/* ==================== OUTLINE TABLE OF CONTENTS SIDEBAR ==================== */
.editor-outline-sidebar {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  background: #10111a !important;
  border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  animation: outlineSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes outlineSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.editor-outline-sidebar.hidden {
  display: none !important;
}

.outline-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: #090a10 !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-main, #e2e8f0) !important;
  user-select: none !important;
}

.btn-close-outline {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim, #64748b) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  transition: all 0.15s ease !important;
}

.btn-close-outline:hover {
  color: var(--accent-red, #f85149) !important;
}

.outline-sidebar-list {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 6px 4px !important;
}

.outline-empty-msg {
  padding: 24px 12px !important;
  font-size: 11px !important;
  color: var(--text-dim, #64748b) !important;
  text-align: center !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

.outline-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  color: var(--text-muted, #94a3b8) !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  user-select: none !important;
}

.outline-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-bright, #fff) !important;
}

.outline-item.outline-level-1 {
  font-weight: 600 !important;
  color: var(--text-bright, #fff) !important;
  padding-left: 8px !important;
}

.outline-item.outline-level-2 {
  padding-left: 18px !important;
}

.outline-item.outline-level-3 {
  padding-left: 28px !important;
  font-size: 11px !important;
  color: var(--text-dim, #94a3b8) !important;
}

.outline-item.outline-level-4 {
  padding-left: 36px !important;
  font-size: 10.5px !important;
  color: var(--text-dim, #64748b) !important;
}

.outline-item-text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

.outline-item-line {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9.5px !important;
  color: var(--text-dim, #64748b) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}