/* ==================== CODEMIRROR THEMES & PRO STUDIO ==================== */
/* ==================== OFFICIAL VS CODE DARK MODERN CODEMIRROR THEME ==================== */
/* 1:1 Palette Specification based on microsoft/vscode dark_modern.json & palet_warna.md */

.cm-s-vscode-dark-modern.CodeMirror {
  background: #090b11 !important;
  color: #d4d4d4 !important;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  height: 100% !important;
}

.cm-s-vscode-dark-modern .CodeMirror-gutters {
  background: #0b0d14 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.cm-s-vscode-dark-modern .CodeMirror-linenumber {
  color: #6e7681 !important;
  padding: 0 10px 0 6px !important;
  font-size: 11.5px !important;
  min-width: 32px !important;
  text-align: right !important;
  line-height: 1.65 !important;
}

/* MOBILE VIEW: COMPACT 30px LINE NUMBER GUTTER */
@media (max-width: 768px) {
  .cm-s-vscode-dark-modern .CodeMirror-gutters {
    width: 30px !important;
    min-width: 30px !important;
  }
  .cm-s-vscode-dark-modern .CodeMirror-linenumber {
    min-width: 22px !important;
    padding: 0 6px 0 2px !important;
    font-size: 11px !important;
    text-align: right !important;
  }
}

.cm-s-vscode-dark-modern .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.035) !important;
}

.cm-s-vscode-dark-modern .CodeMirror-activeline .CodeMirror-linenumber {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.cm-s-vscode-dark-modern .CodeMirror-cursor {
  border-left: 2px solid #00f0ff !important;
}

.cm-s-vscode-dark-modern .CodeMirror-selected {
  background: rgba(99, 102, 241, 0.28) !important;
}

.cm-s-vscode-dark-modern .CodeMirror-focused .CodeMirror-selected {
  background: rgba(99, 102, 241, 0.35) !important;
}

.cm-s-vscode-dark-modern .CodeMirror-matchingbracket {
  outline: 1px solid #4ec9b0 !important;
  color: #ffffff !important;
}

/* VS Code Dark Modern Tokens */
.cm-s-vscode-dark-modern .cm-tag { color: #569cd6 !important; font-weight: 600 !important; }
.cm-s-vscode-dark-modern .cm-bracket { color: #808080 !important; }
.cm-s-vscode-dark-modern .cm-attribute { color: #9cdcfe !important; }
.cm-s-vscode-dark-modern .cm-string, 
.cm-s-vscode-dark-modern .cm-string-2 { color: #ce9178 !important; }
.cm-s-vscode-dark-modern .cm-keyword { color: #c586c0 !important; font-weight: 600 !important; }
.cm-s-vscode-dark-modern .cm-def { color: #dcdcaa !important; }
.cm-s-vscode-dark-modern .cm-variable { color: #9cdcfe !important; }
.cm-s-vscode-dark-modern .cm-variable-2 { color: #9cdcfe !important; }
.cm-s-vscode-dark-modern .cm-variable-3,
.cm-s-vscode-dark-modern .cm-type { color: #4ec9b0 !important; }
.cm-s-vscode-dark-modern .cm-property { color: #9cdcfe !important; }
.cm-s-vscode-dark-modern .cm-operator { color: #d4d4d4 !important; }
.cm-s-vscode-dark-modern .cm-number { color: #b5cea8 !important; }
.cm-s-vscode-dark-modern .cm-atom { color: #569cd6 !important; }
.cm-s-vscode-dark-modern .cm-comment { color: #6a9955 !important; font-style: italic !important; }
.cm-s-vscode-dark-modern .cm-header { color: #569cd6 !important; font-weight: 700 !important; }
.cm-s-vscode-dark-modern .cm-link { color: #9cdcfe !important; text-decoration: underline !important; }
.cm-s-vscode-dark-modern .cm-quote { color: #6a9955 !important; font-style: italic !important; }

/* CODEMIRROR EMBEDDED IN STUDIO EDITOR WORKSPACE */
.editor-code-container .CodeMirror {
  width: 100% !important;
  height: 100% !important;
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  background: #090b11 !important;
}

/* WORD WRAP TOGGLE IN EDITOR STATUS BAR */
.btn-editor-wrap-toggle {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-dim, #94a3b8) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.btn-editor-wrap-toggle:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-editor-wrap-toggle.active {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #818cf8 !important;
}

@media (max-width: 860px) {
  .btn-editor-wrap-toggle {
    display: none !important;
  }
}
/* ==================== 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) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md, 12px) !important;
  box-shadow: var(--shadow-lg) !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: none !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: none !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-row {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}

.ribbon-sep.desktop-only {
  display: block !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;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  animation: slideDownFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.editor-find-replace-panel.hidden {
  display: none !important;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 140px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.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: CODE EDITOR */
.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;
}

/* OLD GUTTER & SYNTAX OVERLAY HIDDEN FOR CODEMIRROR */
.editor-gutter {
  display: none !important;
}

.gutter-line {
  display: none !important;
}

/* CODE CONTAINER & CODEMIRROR EMBED */
.editor-code-container {
  flex: 1 1 auto !important;
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #080a11 !important;
}

.editor-syntax-highlight {
  display: none !important;
}

.studio-textarea {
  display: none !important;
}

.studio-textarea::selection {
  background: rgba(99, 102, 241, 0.45) !important;
  color: transparent !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: #0B0D14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  margin: 1em 0 !important;
}

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

/* OFFICIAL VS CODE DARK MODERN SYNTAX TOKENS (1:1) FOR EDITOR & PREVIEW */
.editor-live-preview .token-keyword,
.editor-syntax-highlight .token-keyword,
.token-keyword {
  color: #C586C0 !important; /* Control Flow Magenta */
  font-weight: 600;
}

.editor-live-preview .token-storage,
.editor-syntax-highlight .token-storage,
.token-storage {
  color: #569CD6 !important; /* Storage / Types Studio Blue */
  font-weight: 600;
}

.editor-live-preview .token-class,
.editor-syntax-highlight .token-class,
.editor-live-preview .token-type,
.editor-syntax-highlight .token-type,
.editor-live-preview .token-builtin,
.editor-syntax-highlight .token-builtin,
.token-builtin {
  color: #4EC9B0 !important; /* Entity Teal */
  font-weight: 500;
}

.editor-live-preview .token-function,
.editor-syntax-highlight .token-function,
.token-function {
  color: #DCDCAA !important; /* Method / Function Yellow */
  font-weight: 500;
}

.editor-live-preview .token-string,
.editor-syntax-highlight .token-string,
.token-string {
  color: #CE9178 !important; /* Warm Terra Cotta */
}

.editor-live-preview .token-number,
.editor-syntax-highlight .token-number,
.token-number {
  color: #B5CEA8 !important; /* Mint Green */
  font-weight: 500;
}

.editor-live-preview .token-comment,
.editor-syntax-highlight .token-comment,
.token-comment {
  color: #6A9955 !important; /* Olive Green */
  font-style: italic !important;
}

.editor-live-preview .token-decorator,
.editor-syntax-highlight .token-decorator,
.token-decorator {
  color: #DCDCAA !important; /* Decorator Yellow */
  font-weight: 600;
}

.editor-live-preview .token-tag,
.editor-syntax-highlight .token-tag,
.token-tag {
  color: #569CD6 !important; /* HTML/XML Tag Studio Blue */
  font-weight: 600;
}

.editor-live-preview .token-tag-bracket,
.editor-syntax-highlight .token-tag-bracket,
.token-tag-bracket {
  color: #808080 !important; /* Angle Brackets */
}

.editor-live-preview .token-attr,
.editor-syntax-highlight .token-attr,
.token-attr {
  color: #9CDCFE !important; /* Attribute / Property Sky Blue */
}

.editor-live-preview .token-variable,
.editor-syntax-highlight .token-variable,
.token-variable {
  color: #9CDCFE !important; /* Variable Sky Blue */
}

.editor-live-preview .token-constant,
.editor-syntax-highlight .token-constant,
.token-constant {
  color: #4FC1FF !important; /* Constant Electric Blue */
  font-weight: 500;
}

.editor-live-preview .token-punctuation,
.editor-syntax-highlight .token-punctuation,
.token-punctuation {
  color: #D4D4D4 !important; /* Punctuation Light */
}

.editor-live-preview .token-heading,
.editor-syntax-highlight .token-heading,
.token-heading {
  color: #569CD6 !important; /* Markdown Headings */
  font-weight: 700;
}

.editor-live-preview .token-list-bullet,
.editor-syntax-highlight .token-list-bullet,
.token-list-bullet {
  color: #9CDCFE !important; /* List Bullets */
  font-weight: 600;
}

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

.editor-status-right button,
.editor-status-right .btn-secondary,
.editor-status-right .btn-primary,
.editor-status-right #btnDownloadSingleNote,
.editor-status-right #btnSaveNoteModal,
.editor-status-right .btn-close-modal {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.editor-status-right .btn-secondary,
.editor-status-right #btnDownloadSingleNote,
.editor-status-right .btn-close-modal {
  background: #161822 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}

.editor-status-right .btn-secondary:hover,
.editor-status-right #btnDownloadSingleNote:hover,
.editor-status-right .btn-close-modal:hover {
  background: #222638 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

.editor-status-right .btn-primary,
.editor-status-right #btnSaveNoteModal {
  background: #6366f1 !important;
  border: 1px solid #7c7ff6 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  font-weight: 500 !important;
}

.editor-status-right .btn-primary:hover,
.editor-status-right #btnSaveNoteModal:hover {
  background: #4f46e5 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !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;
  }

  /* Double-Row Fixed Formatting & Power Tools Toolbar on Mobile */
  .editor-ribbon-toolbar,
  .editor-toolbar-ribbon {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
    padding: 6px 8px !important;
    gap: 5px !important;
    background: #0d101a !important;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    flex-shrink: 0 !important;
  }

  .ribbon-sep.desktop-only {
    display: none !important;
  }

  /* Row 1: Formatting Tools (Horizontal Swipeable) */
  .ribbon-row-format {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .ribbon-row-format::-webkit-scrollbar {
    display: none !important;
  }

  /* Row 2: Action & AI Power Tools (Full-width distributed) */
  .ribbon-row-tools {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }

  .ribbon-row-tools .ribbon-tools-group {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    padding: 2px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .ribbon-row-tools .ribbon-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--text-muted, #94a3b8) !important;
    background: transparent !important;
  }

  .ribbon-row-tools .ribbon-btn:active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .ribbon-row-tools .ribbon-btn i {
    font-size: 10.5px !important;
  }

  .ribbon-row-tools .ribbon-btn span {
    display: inline !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
  }

  .editor-find-replace-bar:not(.is-open) {
    display: none !important;
  }
  /* Outline Sidebar: Floating Overlay Drawer on Mobile */
  .editor-outline-sidebar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 0 !important;
    max-width: 82vw !important;
    z-index: 50 !important;
    background: #0d101a !important;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.75) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }


  .ribbon-row-format .ribbon-btn {
    flex-shrink: 0 !important;
    padding: 5px 8px !important;
    font-size: 11.5px !important;
    min-width: 28px !important;
    height: 28px !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: var(--bg-card) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 6px 12px !important;
  margin: 6px 14px 0 !important;
  box-shadow: var(--shadow-md) !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;
}