/* ============================================================
   Obsidian recreation — theme + layout.
   Variables mirror Obsidian's default theme (dark "Obsidian" /
   light "Moonstone") for close fidelity.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-interface: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-monospace: 'JetBrains Mono', 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-text-size: 16px;
  --font-ui-small: 13px;
  --font-ui-smaller: 12px;
  --line-height-normal: 1.5;
  --file-margins: 32px;
  --shadow-s: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-l: 0 8px 30px rgba(0,0,0,0.4);
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
}

/* ---------- DARK THEME (Obsidian) ---------- */
.theme-dark, .mod-dark {
  --background-primary: #1e1e1e;
  --background-primary-alt: #262626;
  --background-secondary: #161617;
  --background-secondary-alt: #232324;
  --background-modifier-hover: rgba(255,255,255,0.05);
  --background-modifier-active-hover: rgba(255,255,255,0.08);
  --background-modifier-border: #333336;
  --background-modifier-border-hover: #444;
  --background-modifier-border-focus: #4b4b4b;
  --background-modifier-form-field: #262626;
  --background-modifier-form-field-highlighted: #303031;
  --background-modifier-box-shadow: rgba(0,0,0,0.3);
  --background-modifier-success: #26643c;
  --background-modifier-error: #3d1c1c;
  --background-modifier-cover: rgba(0,0,0,0.6);
  --interactive-normal: #2a2a2a;
  --interactive-hover: #303030;
  --interactive-accent: #7f6df2;
  --interactive-accent-hover: #8d7cf8;
  --interactive-success: #197348;
  --text-normal: #dcddde;
  --text-muted: #999999;
  --text-faint: #666666;
  --text-on-accent: #f3f3f3;
  --text-accent: #a68af9;
  --text-accent-hover: #bfa6ff;
  --text-selection: rgba(30,95,140,0.55);
  --text-highlight-bg: rgba(255,208,0,0.4);
  --text-highlight-bg-active: rgba(255,128,0,0.45);
  --text-error: #e16d76;
  --caret-color: #dcddde;
  --code-background: #242526;
  --code-normal: #dcddde;
  --code-comment: #757575;
  --code-keyword: #c586c0;
  --code-string: #ce9178;
  --code-number: #b5cea8;
  --code-function: #dcdcaa;
  --code-property: #9cdcfe;
  --code-operator: #d4d4d4;
  --graph-line: rgba(120,120,140,0.45);
  --graph-text: #8a8a8a;
  --graph-node-unresolved: #555;
  --link-color: #a68af9;
  --link-unresolved-color: #8a7fb0;
  --checkbox-color: #7f6df2;
  --callout-note: #0077dd;
  --callout-tip: #00aaa8;
  --callout-important: #8a5cf5;
  --callout-success: #09ad7a;
  --callout-question: #ec9e10;
  --callout-warning: #ec9e10;
  --callout-failure: #e13333;
  --callout-danger: #e13333;
  --callout-bug: #e13333;
  --callout-example: #8a5cf5;
  --callout-quote: #9e9e9e;
  --callout-abstract: #00aaa8;
  --callout-info: #0077dd;
  --callout-todo: #0077dd;
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: rgba(255,255,255,0.1);
  --scrollbar-thumb-bg-hover: rgba(255,255,255,0.2);
  color-scheme: dark;
}

/* ---------- LIGHT THEME (Moonstone) ---------- */
.theme-light, .mod-light {
  --background-primary: #ffffff;
  --background-primary-alt: #fafafa;
  --background-secondary: #f2f2f2;
  --background-secondary-alt: #eaeaea;
  --background-modifier-hover: rgba(0,0,0,0.05);
  --background-modifier-active-hover: rgba(0,0,0,0.08);
  --background-modifier-border: #d9d9d9;
  --background-modifier-border-hover: #c9c9c9;
  --background-modifier-border-focus: #b5b5b5;
  --background-modifier-form-field: #ffffff;
  --background-modifier-form-field-highlighted: #ffffff;
  --background-modifier-box-shadow: rgba(0,0,0,0.1);
  --background-modifier-success: #a4e7c3;
  --background-modifier-error: #ffd9d9;
  --background-modifier-cover: rgba(0,0,0,0.25);
  --interactive-normal: #f2f2f2;
  --interactive-hover: #e8e8e8;
  --interactive-accent: #705dcf;
  --interactive-accent-hover: #7f6df2;
  --interactive-success: #44b57f;
  --text-normal: #2e2e2e;
  --text-muted: #6f6f6f;
  --text-faint: #ababab;
  --text-on-accent: #ffffff;
  --text-accent: #705dcf;
  --text-accent-hover: #5a4bb8;
  --text-selection: rgba(23,140,210,0.25);
  --text-highlight-bg: rgba(255,208,0,0.55);
  --text-highlight-bg-active: rgba(255,128,0,0.5);
  --text-error: #c62d42;
  --caret-color: #2e2e2e;
  --code-background: #f2f2f2;
  --code-normal: #2e2e2e;
  --code-comment: #8a8a8a;
  --code-keyword: #a32a86;
  --code-string: #a45a22;
  --code-number: #4a6e2e;
  --code-function: #8a6d1d;
  --code-property: #1f6fa8;
  --code-operator: #4a4a4a;
  --graph-line: rgba(80,80,110,0.35);
  --graph-text: #777;
  --graph-node-unresolved: #b5b5b5;
  --link-color: #705dcf;
  --link-unresolved-color: #9a8ec9;
  --checkbox-color: #705dcf;
  --scrollbar-thumb-bg: rgba(0,0,0,0.15);
  --scrollbar-thumb-bg-hover: rgba(0,0,0,0.25);
  --shadow-l: 0 8px 30px rgba(0,0,0,0.15);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: var(--font-interface);
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  background: var(--background-secondary);
}
body { -webkit-font-smoothing: antialiased; }

/* scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
:hover::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-bg); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-bg-hover); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-bg) transparent; }

/* ---------- App shell ---------- */
.app-container { display: flex; flex-direction: column; height: 100%; }
.horizontal-main-container { display: flex; flex: 1; min-height: 0; }

.workspace-ribbon {
  width: 48px; flex: 0 0 48px;
  background: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 0;
  align-items: center;
  z-index: 10;
}
.side-dock-actions, .side-dock-settings { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.side-dock-ribbon-action {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-radius: var(--radius-m); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.side-dock-ribbon-action:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.side-dock-ribbon-action .svg-icon { width: 20px; height: 20px; }

.workspace-split.mod-left-split, .workspace-split.mod-right-split {
  background: var(--background-secondary);
  flex: 0 0 auto; position: relative;
  overflow: hidden;
  transition: width .15s ease;
  display: flex; flex-direction: column;
}
.workspace-split.mod-left-split { border-right: 1px solid var(--background-modifier-border); }
.workspace-split.mod-right-split { border-left: 1px solid var(--background-modifier-border); }
.workspace-split.is-collapsed { width: 0 !important; border: none; }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--background-primary); }

.workspace-split-resize-handle {
  position: absolute; top: 0; bottom: 0; width: 4px; cursor: col-resize; z-index: 20;
}
.workspace-split-resize-handle.mod-right { right: -2px; }
.workspace-split-resize-handle.mod-left { left: -2px; }
.workspace-split-resize-handle:hover { background: var(--interactive-accent); opacity: .5; }

/* sidedock */
.workspace-sidedock-tabs { display: flex; flex-direction: column; height: 100%; }
.workspace-sidedock-tab-header {
  display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--background-modifier-border);
  flex-wrap: wrap;
}
.workspace-sidedock-tab {
  display: flex; align-items: center; gap: 5px; padding: 5px 8px;
  color: var(--text-faint); cursor: pointer; border-radius: var(--radius-s) var(--radius-s) 0 0;
  font-size: var(--font-ui-smaller);
}
.workspace-sidedock-tab:hover { color: var(--text-muted); background: var(--background-modifier-hover); }
.workspace-sidedock-tab.is-active { color: var(--text-normal); box-shadow: inset 0 -2px 0 var(--interactive-accent); }
.workspace-sidedock-tab .svg-icon { width: 15px; height: 15px; }
.workspace-sidedock-tab-label { display: none; }
.workspace-sidedock-content { flex: 1; overflow-y: auto; min-height: 0; }

/* ---------- Workspace root / splits ---------- */
.workspace > .workspace-split { flex: 1; min-width: 0; min-height: 0; }
.workspace-split { display: flex; min-width: 0; min-height: 0; position: relative; }
.workspace-split.mod-horizontal { flex-direction: row; }
.workspace-split.mod-vertical { flex-direction: column; }
.workspace-split-divider { flex: 0 0 4px; background: transparent; z-index: 15; position: relative; transition: background .15s; }
.workspace-split-divider.mod-vertical { cursor: col-resize; width: 4px; }
.workspace-split-divider.mod-horizontal { cursor: row-resize; height: 4px; }
.workspace-split-divider:hover { background: var(--background-modifier-border-hover); }
.workspace-split-divider::after { content:''; position: absolute; inset: -2px; }
body.is-dragging-split { user-select: none; cursor: grabbing; }

.workspace-tabs {
  display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
  background: var(--background-primary);
  position: relative;
}
.workspace-tabs.mod-active {}

/* tab header strip */
.workspace-tab-header-container {
  display: flex; background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-border);
  flex: 0 0 auto; height: 36px; overflow: hidden;
}
.workspace-tab-header-container-inner {
  display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.workspace-tab-header-container-inner::-webkit-scrollbar { display: none; }
.workspace-tab-header {
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px 0 10px; max-width: 220px; min-width: 0; flex: 0 1 auto;
  color: var(--text-muted); cursor: pointer; position: relative;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  user-select: none;
  margin-top: 4px;
}
.workspace-tab-header .svg-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.workspace-tab-header-inner-icon { display: flex; color: var(--text-faint); }
.workspace-tab-header-inner-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--font-ui-small); padding: 6px 4px; min-width: 0;
}
.workspace-tab-header-inner-close-button {
  display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; color: var(--text-faint); flex: 0 0 auto;
}
.workspace-tab-header-inner-close-button .svg-icon { width: 12px; height: 12px; }
.workspace-tab-header:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.workspace-tab-header:hover .workspace-tab-header-inner-close-button { display: flex; }
.workspace-tab-header-inner-close-button:hover { background: var(--background-modifier-active-hover); color: var(--text-normal); }
.workspace-tab-header.is-active {
  background: var(--background-primary); color: var(--text-normal);
  box-shadow: inset 0 1px 0 0 var(--background-primary);
}
.workspace-tab-header.is-active .workspace-tab-header-inner-close-button { display: flex; }
.workspace-tab-header.is-active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: transparent;
}
.workspace-tab-header.is-being-dragged { opacity: 0.4; }
.workspace-tab-header-new-tab {
  display: flex; align-items: center; justify-content: center;
  width: 32px; color: var(--text-faint); cursor: pointer; flex: 0 0 auto;
}
.workspace-tab-header-new-tab:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.workspace-tab-header-spacer { flex: 1; min-width: 20px; }

.workspace-drop-indicator {
  position: absolute; z-index: 30; background: var(--interactive-accent); opacity: .35; pointer-events: none; border-radius: 4px;
}
.workspace-drop-indicator.mod-left { left: 0; top: 36px; bottom: 0; width: 50%; }
.workspace-drop-indicator.mod-right { right: 0; top: 36px; bottom: 0; width: 50%; }
.workspace-drop-indicator.mod-top { left: 0; right: 0; top: 36px; height: 50%; }
.workspace-drop-indicator.mod-bottom { left: 0; right: 0; bottom: 0; height: 50%; }

/* leaf */
.workspace-tab-container { flex: 1; min-height: 0; position: relative; display: flex; }
.workspace-leaf { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--background-primary); }
.workspace-leaf-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.workspace-leaf-content[data-type="markdown"] {}

/* view header */
.view-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 40px; flex: 0 0 auto;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
}
.view-header-left { display: flex; align-items: center; gap: 2px; }
.view-header-nav-buttons { display: flex; gap: 2px; }
.clickable-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-s);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.clickable-icon:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.clickable-icon .svg-icon { width: 18px; height: 18px; }
.view-header-title-container { flex: 1; min-width: 0; display: flex; justify-content: center; }
.view-header-title {
  font-size: var(--font-ui-small); font-weight: 500; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.view-actions { display: flex; gap: 2px; }
.view-content { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

/* ---------- Markdown source view (editor) ---------- */
.markdown-source-view { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.markdown-source-view .cm-host { flex: 1; min-height: 0; }
.cm-editor { height: 100%; }
.cm-editor .cm-scroller { font-family: var(--font-text); }
.cm-editor .cm-content { padding-bottom: 60vh; }

body.is-readable-line-width .markdown-source-view .cm-content,
body.is-readable-line-width .markdown-preview-sizer {
  max-width: calc(700px + 2 * var(--file-margins));
  margin-left: auto; margin-right: auto;
}
.markdown-source-view .cm-line { max-width: 100%; }

.inline-title {
  font-size: 1.8em; font-weight: 700; line-height: 1.3;
  padding: 18px var(--file-margins) 6px;
  color: var(--text-normal);
  outline: none;
  font-family: var(--font-text);
}
.inline-title:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
body.is-readable-line-width .inline-title { max-width: calc(700px + 2 * var(--file-margins)); margin: 0 auto; }
.markdown-reading-view .inline-title { padding-top: 20px; }

/* live preview constructs */
.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 { font-weight: 700; line-height: 1.4; }
.cm-header-1 { font-size: 1.8em; }
.cm-header-2 { font-size: 1.5em; }
.cm-header-3 { font-size: 1.25em; }
.cm-header-4 { font-size: 1.12em; }
.cm-header-5 { font-size: 1.05em; }
.cm-header-6 { font-size: 1em; color: var(--text-muted); }
.cm-formatting, .cm-formatting-header, .cm-formatting-code, .cm-formatting-list, .cm-formatting-task, .cm-formatting-quote { color: var(--text-faint); font-weight: normal; }
.cm-strong { font-weight: 700; }
.cm-em { font-style: italic; }
.cm-strikethrough { text-decoration: line-through; }
.cm-highlight { background: var(--text-highlight-bg); border-radius: 2px; padding: 0 2px; }
.cm-inline-code { font-family: var(--font-monospace); font-size: 0.88em; background: var(--code-background); border-radius: 4px; padding: 0.1em 0.25em; }
.cm-tag, .cm-hashtag {
  color: var(--text-accent);
  background: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
  border-radius: 10px; padding: 0 6px; text-decoration: none; font-size: 0.88em;
}
.cm-quote-line { border-left: 3px solid var(--background-modifier-border-focus); padding-left: 12px !important; color: var(--text-muted); font-style: normal; }
.cm-codeblock-line { background: var(--code-background); font-family: var(--font-monospace); font-size: 0.88em; }
.cm-codeblock-line:first-child { border-radius: 6px 6px 0 0; }
.cm-frontmatter-line { color: var(--text-faint); font-family: var(--font-monospace); font-size: 0.8em; }
.cm-formatting-list-bullet { color: var(--interactive-accent); font-weight: 700; }
.cm-hr-widget { padding: 8px 0; }
.cm-hr-widget hr { border: none; border-top: 1px solid var(--background-modifier-border-focus); margin: 0; }
.cm-table-widget { padding: 8px 0; }
.cm-table-widget table { border-collapse: collapse; font-size: 0.92em; }
.cm-table-widget th, .cm-table-widget td { border: 1px solid var(--background-modifier-border-focus); padding: 4px 12px; }
.cm-table-widget th { background: var(--background-primary-alt); font-weight: 600; }
.cm-task-checkbox { margin: 0 6px 0 0; vertical-align: middle; }
.cm-footref { color: var(--text-accent); font-size: 0.75em; vertical-align: super; }
.cm-internal-link { color: var(--link-color); text-decoration: none; cursor: pointer; }
.cm-internal-link:hover { text-decoration: underline; }
.cm-internal-link.is-unresolved { color: var(--link-unresolved-color); opacity: 0.8; }
.cm-link-text { color: var(--link-color); }
.cm-link { color: var(--link-color); }
.cm-image-embed { display: block; margin: 8px 0; }
.cm-image-embed img { max-width: 100%; border-radius: 6px; }
.cm-note-embed { display: block; }
.cm-codeinfo { color: var(--text-faint); }
.tok-h1,.tok-h2,.tok-h3,.tok-h4,.tok-h5,.tok-h6 { color: var(--text-normal); }
.tok-mono { font-family: var(--font-monospace); background: var(--code-background); border-radius: 3px; }
.tok-link { color: var(--link-color); }
.tok-url { color: var(--text-faint); }
.tok-quote { color: var(--text-muted); }
.tok-keyword { color: var(--code-keyword); }
.tok-string { color: var(--code-string); }
.tok-number { color: var(--code-number); }
.tok-comment { color: var(--code-comment); font-style: italic; }
.tok-function { color: var(--code-function); }
.tok-property { color: var(--code-property); }
.tok-operator { color: var(--code-operator); }
.tok-type { color: var(--code-function); }
.tok-variable { color: var(--code-normal); }
.tok-atom { color: var(--code-keyword); }
.tok-formatting { color: var(--text-faint); }
.tok-hr { color: var(--text-faint); }
.tok-decorator { color: var(--code-function); }
.tok-selector { color: var(--code-property); }
.tok-tag { color: var(--code-keyword); }

/* ---------- Reading view / rendered markdown ---------- */
.markdown-reading-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.markdown-preview-view { flex: 1; overflow-y: auto; padding-bottom: 40vh; }
.markdown-preview-sizer { padding: 0 var(--file-margins); padding-bottom: 16px; }
.markdown-rendered { font-family: var(--font-text); font-size: var(--font-text-size); line-height: var(--line-height-normal); }
.markdown-rendered h1 { font-size: 1.8em; } .markdown-rendered h2 { font-size: 1.5em; }
.markdown-rendered h3 { font-size: 1.25em; } .markdown-rendered h4 { font-size: 1.12em; }
.markdown-rendered h5 { font-size: 1.05em; } .markdown-rendered h6 { font-size: 1em; color: var(--text-muted); }
.markdown-rendered h1, .markdown-rendered h2, .markdown-rendered h3, .markdown-rendered h4, .markdown-rendered h5, .markdown-rendered h6 {
  font-weight: 700; line-height: 1.4; margin: 1.2em 0 0.5em;
}
.markdown-rendered p { margin: 0.5em 0; }
.markdown-rendered a { color: var(--link-color); text-decoration: none; }
.markdown-rendered a:hover { text-decoration: underline; }
.markdown-rendered a.internal-link { cursor: pointer; }
.markdown-rendered a.internal-link.is-unresolved { color: var(--link-unresolved-color); border-bottom: 1px dashed var(--link-unresolved-color); opacity: .85; }
.markdown-rendered a.external-link { color: var(--link-color); }
.markdown-rendered a.external-link::after { content: '↗'; font-size: 0.8em; margin-left: 1px; opacity: .6; }
.markdown-rendered strong { font-weight: 700; color: var(--text-normal); }
.markdown-rendered em { font-style: italic; }
.markdown-rendered mark { background: var(--text-highlight-bg); border-radius: 2px; padding: 0 2px; color: inherit; }
.markdown-rendered del { color: var(--text-muted); }
.markdown-rendered code { font-family: var(--font-monospace); font-size: 0.88em; background: var(--code-background); border-radius: 4px; padding: 0.1em 0.3em; }
.markdown-rendered pre { background: var(--code-background); border-radius: 8px; padding: 12px 16px; overflow-x: auto; margin: 0.8em 0; }
.markdown-rendered pre code { background: none; padding: 0; font-size: 0.85em; line-height: 1.5; }
.markdown-code-block { position: relative; }
.markdown-code-block .code-block-flair { position: absolute; top: 4px; right: 6px; opacity: 0; transition: opacity .15s; z-index: 2; }
.markdown-code-block:hover .code-block-flair { opacity: 1; }
.copy-code-button { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 4px; border-radius: 4px; }
.copy-code-button:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.copy-code-button .svg-icon { width: 15px; height: 15px; }
.markdown-rendered blockquote {
  margin: 0.8em 0; padding: 0 0 0 14px; color: var(--text-muted);
  border-left: 3px solid var(--background-modifier-border-focus); font-style: italic;
}
.markdown-rendered hr { border: none; border-top: 1px solid var(--background-modifier-border-focus); margin: 1.6em 0; }
.markdown-rendered ul, .markdown-rendered ol { margin: 0.4em 0; padding-left: 1.8em; }
.markdown-rendered li { margin: 0.15em 0; }
.markdown-rendered li.task-list-item { list-style: none; margin-left: -1.35em; }
.markdown-rendered .task-list-item-checkbox { margin-right: 8px; accent-color: var(--checkbox-color); width: 14px; height: 14px; cursor: pointer; vertical-align: -0.15em; }
.markdown-rendered .task-list-item.is-checked > * { /* strike handled below */ }
.markdown-rendered li.is-checked { color: var(--text-faint); text-decoration: line-through; }
.markdown-rendered table { border-collapse: collapse; margin: 0.8em 0; font-size: 0.94em; }
.markdown-rendered th, .markdown-rendered td { border: 1px solid var(--background-modifier-border-focus); padding: 5px 14px; text-align: left; }
.markdown-rendered th { background: var(--background-primary-alt); font-weight: 600; }
.markdown-rendered tr:hover td { background: var(--background-modifier-hover); }
.markdown-rendered img { max-width: 100%; border-radius: 4px; }
.markdown-rendered .image-embed { display: inline-block; margin: 6px 0; }
.markdown-rendered .image-embed-caption { font-size: 0.8em; color: var(--text-faint); text-align: center; margin-top: 4px; }
.markdown-rendered .markdown-embed { border-left: 2px solid var(--background-modifier-border); padding-left: 0; margin: 0.5em 0; }
.markdown-rendered .markdown-embed-title { font-size: 0.8em; font-weight: 600; margin-bottom: 2px; }
.markdown-rendered .markdown-embed-content { font-size: 0.92em; color: var(--text-muted); }
.markdown-rendered .tag { color: var(--text-accent); text-decoration: none; background: color-mix(in srgb, var(--interactive-accent) 15%, transparent); border-radius: 10px; padding: 0 6px; font-size: 0.88em; white-space: nowrap; }
.markdown-rendered .tag:hover { background: color-mix(in srgb, var(--interactive-accent) 25%, transparent); text-decoration: none; }
.footnotes { font-size: 0.88em; color: var(--text-muted); border-top: 1px solid var(--background-modifier-border); margin-top: 2em; padding-top: 0.5em; }
.footnotes a { color: var(--text-accent); }
sup .footnote-ref, a.footnote-ref { font-size: 0.75em; }

/* frontmatter properties */
.frontmatter-container { border: 1px solid var(--background-modifier-border); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.frontmatter-section-header { padding: 4px 14px; font-size: 0.78em; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--background-modifier-border); }
.frontmatter-properties { padding: 6px 14px; }
.frontmatter-property { display: flex; gap: 12px; padding: 3px 0; font-size: 0.9em; }
.frontmatter-property-key { color: var(--text-faint); min-width: 100px; }
.frontmatter-property-value { color: var(--text-normal); }

/* callouts */
.callout {
  margin: 0.8em 0; padding: 8px 16px; border-radius: 8px;
  --callout-color: var(--callout-note);
  background: color-mix(in srgb, var(--callout-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--callout-color) 25%, transparent);
}
.callout[data-callout="note"] { --callout-color: var(--callout-note); }
.callout[data-callout="abstract"] { --callout-color: var(--callout-abstract); }
.callout[data-callout="info"] { --callout-color: var(--callout-info); }
.callout[data-callout="todo"] { --callout-color: var(--callout-todo); }
.callout[data-callout="tip"] { --callout-color: var(--callout-tip); }
.callout[data-callout="success"] { --callout-color: var(--callout-success); }
.callout[data-callout="question"] { --callout-color: var(--callout-question); }
.callout[data-callout="warning"] { --callout-color: var(--callout-warning); }
.callout[data-callout="failure"] { --callout-color: var(--callout-failure); }
.callout[data-callout="danger"] { --callout-color: var(--callout-danger); }
.callout[data-callout="bug"] { --callout-color: var(--callout-bug); }
.callout[data-callout="example"] { --callout-color: var(--callout-example); }
.callout[data-callout="quote"] { --callout-color: var(--callout-quote); }
.callout-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--callout-color); padding: 2px 0; user-select: none; }
.callout-title-inner { flex: 1; }
.callout-title-inner p { margin: 0; }
.callout-icon { display: flex; }
.callout-icon .svg-icon { width: 18px; height: 18px; }
.callout-fold { display: flex; }
.callout-fold .svg-icon { width: 16px; height: 16px; transition: transform .15s; }
.callout.is-collapsed .callout-fold .svg-icon { transform: rotate(-90deg); }
.callout.is-collapsed > :not(.callout-title) { display: none; }
.callout p { margin: 0.35em 0; }
.callout-content { color: var(--text-normal); }

/* ---------- File explorer ---------- */
.nav-files-container { display: flex; flex-direction: column; height: 100%; }
.nav-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px; flex: 0 0 auto; }
.nav-files-title { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--font-ui-small); color: var(--text-muted); padding: 4px 4px; cursor: pointer; border-radius: var(--radius-s); }
.nav-files-title:hover { color: var(--text-normal); }
.nav-files-title .svg-icon { width: 16px; height: 16px; }
.nav-buttons-container { display: flex; gap: 1px; }
.nav-action-button { width: 24px; height: 24px; }
.nav-action-button .svg-icon { width: 15px; height: 15px; }
.nav-folder, .nav-files-container-node { flex: 1; overflow-y: auto; padding: 2px 4px 20px; }
.tree-item-self { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: var(--radius-s); cursor: pointer; color: var(--text-muted); min-height: 26px; }
.tree-item-self:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.tree-item-self.is-active, .tree-item-self.is-active.has-focus { background: var(--background-modifier-active-hover); color: var(--text-normal); }
.tree-item-icon { display: flex; align-items: center; color: var(--text-faint); flex: 0 0 auto; }
.tree-item-inner { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-ui-small); }
.tree-item-children { padding-left: 14px; }
.collapse-icon .svg-icon { width: 12px; height: 12px; transition: transform .1s; transform: rotate(90deg); }
.collapse-icon.is-collapsed .svg-icon { transform: rotate(0deg); }
.tree-item-self.is-being-dragged-over { background: color-mix(in srgb, var(--interactive-accent) 25%, transparent); outline: 1px dashed var(--interactive-accent); }
.tree-item-inner-input { flex: 1; background: var(--background-modifier-form-field); border: 1px solid var(--interactive-accent); color: var(--text-normal); font-size: var(--font-ui-small); padding: 2px 6px; border-radius: 4px; outline: none; min-width: 0; }
.nav-empty-state, .pane-empty { color: var(--text-faint); font-size: var(--font-ui-small); padding: 12px; text-align: center; }

/* ---------- Search pane ---------- */
.search-pane { display: flex; flex-direction: column; height: 100%; }
.search-input-container { display: flex; align-items: center; gap: 4px; flex: 1; position: relative; }
.search-input { flex: 1; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); color: var(--text-normal); border-radius: var(--radius-s); padding: 5px 28px 5px 10px; font-size: var(--font-ui-small); outline: none; }
.search-input:focus { border-color: var(--interactive-accent); }
.search-input-clear-button { position: absolute; right: 4px; width: 20px; height: 20px; }
.search-input-clear-button.is-active { color: var(--interactive-accent); }
.search-info-container { padding: 4px 12px; color: var(--text-faint); font-size: var(--font-ui-smaller); }
.search-result-container { flex: 1; overflow-y: auto; padding: 4px; }
.search-result-file-item { margin-bottom: 4px; }
.search-result-file-title { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-weight: 600; color: var(--text-normal); cursor: pointer; border-radius: var(--radius-s); font-size: var(--font-ui-small); }
.search-result-file-title:hover { background: var(--background-modifier-hover); }
.search-result-file-icon { color: var(--text-faint); display: flex; }
.search-result-file-count { margin-left: auto; color: var(--text-faint); font-size: var(--font-ui-smaller); background: var(--background-modifier-hover); border-radius: 8px; padding: 0 7px; }
.search-result-file-matches { padding-left: 14px; }
.search-result-file-match { padding: 3px 8px; cursor: pointer; border-radius: var(--radius-s); color: var(--text-muted); font-size: var(--font-ui-smaller); }
.search-result-file-match:hover { background: var(--background-modifier-hover); }
.search-result-file-matched-text { color: var(--text-normal); background: var(--text-highlight-bg); border-radius: 2px; padding: 0 1px; }
.search-empty-state { color: var(--text-faint); text-align: center; padding: 20px; }
.search-info-empty { font-size: var(--font-ui-smaller); line-height: 1.5; }

/* ---------- Backlinks / outgoing / outline / tags ---------- */
.backlink-pane, .outgoing-pane, .outline-pane, .tags-pane, .starred-pane, .localgraph-pane { display: flex; flex-direction: column; height: 100%; }
.backlink-pane-body, .outline-content, .tags-container, .starred-list { flex: 1; overflow-y: auto; padding: 4px 6px; }
.backlink-pane-file-name { padding: 6px 10px; font-weight: 600; font-size: var(--font-ui-small); }
.backlink-pane-section-header { padding: 6px 10px 2px; font-size: var(--font-ui-smaller); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.backlink-pane-item { padding: 5px 10px; border-radius: var(--radius-s); cursor: pointer; }
.backlink-pane-item:hover { background: var(--background-modifier-hover); }
.backlink-pane-item-source { font-size: var(--font-ui-small); font-weight: 500; color: var(--text-normal); }
.backlink-pane-item-snippet { font-size: var(--font-ui-smaller); color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.backlink-pane-item.is-unresolved .backlink-pane-item-source { color: var(--link-unresolved-color); }
.tag-pane-tag { gap: 6px; }
.tag-pane-tag-count { color: var(--text-faint); font-size: var(--font-ui-smaller); }
.tree-item-flair { margin-left: auto; background: var(--background-modifier-hover); border-radius: 8px; padding: 0 7px; font-size: var(--font-ui-smaller); color: var(--text-faint); }
.tag-children { padding-left: 16px; }
.outline-item { color: var(--text-muted); font-size: var(--font-ui-small); }
.localgraph-canvas-wrap { flex: 1; min-height: 0; position: relative; }
.graph-canvas-wrap { flex: 1; position: relative; min-height: 0; }
.graph-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.graph-canvas.is-dragging { cursor: grabbing; }
.graph-view-content { position: relative; overflow: hidden; }

/* graph controls */
.graph-controls {
  position: absolute; top: 8px; right: 8px; width: 260px; max-height: calc(100% - 16px); overflow-y: auto;
  background: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: 10px;
  box-shadow: var(--shadow-l); padding: 10px; z-index: 5; font-size: var(--font-ui-small);
}
.graph-controls-header { font-weight: 700; padding: 2px 4px 8px; }
.graph-control-section { border-top: 1px solid var(--background-modifier-border); padding: 6px 0; }
.graph-control-section-header { font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 4px; }
.graph-control-section-header:hover { color: var(--text-normal); }
.graph-control-section.is-collapsed > :not(.graph-control-section-header) { display: none; }
.graph-control-row { padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; }
.graph-control-row label { color: var(--text-muted); font-size: var(--font-ui-smaller); }
.graph-control-row.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.graph-control-row.checkbox-row label { order: 2; }
.graph-control-row input[type="range"] { width: 100%; accent-color: var(--interactive-accent); }
.graph-filter-input { width: 100%; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); color: var(--text-normal); border-radius: 4px; padding: 4px 8px; font-size: var(--font-ui-small); }
.graph-group-list { padding: 2px 4px; }
.graph-group-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.graph-group-swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.graph-group-query { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-ui-smaller); }
.graph-group-del { width: 18px; height: 18px; }
.graph-group-add { display: flex; gap: 4px; padding: 4px; align-items: center; }
.graph-group-add .graph-filter-input { flex: 1; min-width: 0; }
.graph-color-input { width: 26px; height: 26px; border: none; padding: 0; background: none; cursor: pointer; }
.graph-group-add button { font-size: var(--font-ui-smaller); padding: 4px 8px; }

/* ---------- Status bar ---------- */
.status-bar {
  flex: 0 0 auto; height: 24px; display: flex; align-items: center; justify-content: space-between;
  background: var(--background-secondary); border-top: 1px solid var(--background-modifier-border);
  padding: 0 10px; font-size: var(--font-ui-smaller); color: var(--text-faint); user-select: none;
}
.status-bar-left, .status-bar-right { display: flex; align-items: center; gap: 4px; }
.status-bar-item { padding: 0 8px; border-radius: 4px; }
.status-bar-item:hover { color: var(--text-muted); }

/* ---------- Empty state ---------- */
.workspace-empty-state { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.empty-state-container { text-align: center; max-width: 340px; }
.empty-state-title { font-size: 1.3em; font-weight: 600; margin-bottom: 18px; color: var(--text-muted); }
.empty-state-action-list { display: flex; flex-direction: column; gap: 2px; }
.empty-state-action { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: var(--radius-m); cursor: pointer; color: var(--text-normal); }
.empty-state-action:hover { background: var(--background-modifier-hover); }
.empty-state-action-hotkey { color: var(--text-faint); font-size: var(--font-ui-smaller); }
.image-view { display: flex; align-items: center; justify-content: center; overflow: auto; }
.image-view-container { padding: 24px; }
.image-view-container img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 6px; box-shadow: var(--shadow-l); }

/* ---------- Menus ---------- */
.menu {
  position: fixed; z-index: 1000; min-width: 180px; max-width: 300px;
  background: var(--background-primary); border: 1px solid var(--background-modifier-border);
  border-radius: 8px; box-shadow: var(--shadow-l); padding: 4px;
  animation: menu-in .08s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius-s); cursor: pointer; color: var(--text-normal); position: relative; }
.menu-item:hover { background: var(--background-modifier-hover); }
.menu-item.is-disabled { opacity: 0.4; cursor: default; }
.menu-item.is-warning { color: var(--text-error); }
.menu-item-icon { width: 18px; display: flex; color: var(--text-muted); flex: 0 0 auto; }
.menu-item-icon .svg-icon { width: 16px; height: 16px; }
.menu-item-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item-hotkey { color: var(--text-faint); font-size: var(--font-ui-smaller); }
.menu-item-tick { position: absolute; left: -2px; }
.menu-separator { height: 1px; background: var(--background-modifier-border); margin: 4px 8px; }
.menu.is-submenu { position: fixed; }

/* ---------- Modals ---------- */
.modal-container {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  background: var(--background-modifier-cover);
  animation: fade-in .12s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.modal {
  position: relative; background: var(--background-primary); border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l); max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden; min-width: 320px;
  animation: modal-in .15s cubic-bezier(.2,.8,.3,1);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.modal-close-button { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); cursor: pointer; border-radius: 4px; z-index: 2; }
.modal-close-button:hover { color: var(--text-normal); background: var(--background-modifier-hover); }
.modal-title { font-size: 1.05em; font-weight: 700; padding: 18px 20px 8px; }
.modal-content { padding: 8px 20px; overflow-y: auto; }
.modal-button-container { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
.modal button, .modal .mod-cta, .modal .mod-warning, .modal .mod-cancel {
  font-family: var(--font-interface); font-size: var(--font-ui-small);
  padding: 6px 14px; border-radius: var(--radius-s); cursor: pointer;
  border: 1px solid var(--background-modifier-border); background: var(--interactive-normal); color: var(--text-normal);
}
.modal button:hover { background: var(--interactive-hover); }
.modal .mod-cta { background: var(--interactive-accent); border-color: transparent; color: var(--text-on-accent); }
.modal .mod-cta:hover { background: var(--interactive-accent-hover); }
.modal .mod-warning { background: transparent; color: var(--text-error); }
.modal .mod-warning:hover { background: var(--background-modifier-error); }
.prompt-input {
  width: 100%; background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border);
  color: var(--text-normal); border-radius: var(--radius-s); padding: 8px 12px; font-size: 1em; outline: none;
  font-family: var(--font-interface);
}
.prompt-input:focus { border-color: var(--interactive-accent); }

/* suggester (palette/switcher) */
.modal.prompt, .modal.mod-suggester { width: min(90vw, 700px); top: 12vh; position: absolute; }
.modal-container:has(.mod-suggester) { align-items: flex-start; }
.prompt-input-container { padding: 14px 14px 8px; }
.mod-suggester .prompt-input { font-size: 1.05em; padding: 10px 14px; border-radius: var(--radius-m); }
.prompt-results { max-height: min(50vh, 480px); overflow-y: auto; padding: 0 8px 8px; }
.suggestion-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-m); cursor: pointer; }
.suggestion-item.is-selected { background: var(--background-modifier-hover); }
.suggestion-icon { color: var(--text-faint); display: flex; flex: 0 0 auto; }
.suggestion-content { flex: 1; min-width: 0; }
.suggestion-title { color: var(--text-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-highlight { color: var(--text-accent); font-weight: 600; }
.suggestion-note { color: var(--text-faint); font-size: var(--font-ui-smaller); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-hotkey { color: var(--text-faint); font-size: var(--font-ui-smaller); flex: 0 0 auto; }
.suggestion-empty { color: var(--text-faint); text-align: center; padding: 16px; }
.prompt-instructions { display: flex; gap: 14px; padding: 8px 16px 12px; border-top: 1px solid var(--background-modifier-border); color: var(--text-faint); }
.prompt-instruction { display: flex; gap: 5px; align-items: center; }
.prompt-instruction-command { background: var(--background-modifier-hover); border-radius: 4px; padding: 1px 6px; font-size: var(--font-ui-smaller); }
.prompt-instruction-text { font-size: var(--font-ui-smaller); }

/* settings modal */
.modal.mod-settings { padding: 0; }
.settings-container { display: flex; flex: 1; min-height: 0; padding: 0; }
.settings-nav { width: 190px; flex: 0 0 auto; background: var(--background-secondary); border-right: 1px solid var(--background-modifier-border); padding: 14px 8px; overflow-y: auto; }
.vertical-tab-nav-header { font-size: var(--font-ui-smaller); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 4px 10px 8px; }
.vertical-tab-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-s); cursor: pointer; color: var(--text-muted); }
.vertical-tab-nav-item:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
.vertical-tab-nav-item.is-active { background: var(--background-modifier-active-hover); color: var(--text-normal); }
.vertical-tab-nav-item-icon { display: flex; }
.settings-content { flex: 1; padding: 16px 28px; overflow-y: auto; }
.vertical-tab-content-title { font-size: 1.1em; font-weight: 700; margin-bottom: 14px; }
.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--background-modifier-border); }
.setting-item:first-of-type { border-top: none; }
.setting-item-name { font-weight: 500; }
.setting-item-description { color: var(--text-faint); font-size: var(--font-ui-smaller); margin-top: 2px; }
.setting-item-control { flex: 0 0 auto; display: flex; align-items: center; }
.checkbox-container { width: 34px; height: 20px; border-radius: 10px; background: var(--background-modifier-border-hover); position: relative; cursor: pointer; transition: background .15s; }
.checkbox-container::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-normal); transition: transform .15s; }
.checkbox-container.is-enabled { background: var(--interactive-accent); }
.checkbox-container.is-enabled::after { transform: translateX(14px); background: var(--text-on-accent); }
.dropdown { background: var(--interactive-normal); border: 1px solid var(--background-modifier-border); color: var(--text-normal); border-radius: var(--radius-s); padding: 5px 8px; font-family: var(--font-interface); font-size: var(--font-ui-small); }
.setting-text { background: var(--background-modifier-form-field); border: 1px solid var(--background-modifier-border); color: var(--text-normal); border-radius: 4px; padding: 5px 8px; }
.accent-color-input { width: 40px; height: 26px; border: 1px solid var(--background-modifier-border); border-radius: 4px; padding: 0; background: none; cursor: pointer; }
.setting-slider-wrap { display: flex; align-items: center; gap: 8px; }
.setting-slider-wrap input[type=range] { accent-color: var(--interactive-accent); width: 120px; }
.setting-slider-label { color: var(--text-muted); font-size: var(--font-ui-smaller); }
.setting-static { color: var(--text-muted); }
.hotkey-list { display: flex; flex-direction: column; }
.hotkey-list-item { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--background-modifier-border); font-size: var(--font-ui-small); }
.hotkey-key { background: var(--background-modifier-hover); border: 1px solid var(--background-modifier-border); border-radius: 4px; padding: 1px 7px; font-size: var(--font-ui-smaller); color: var(--text-muted); font-family: var(--font-monospace); }
.about-obsidian { text-align: center; padding: 30px 0; color: var(--text-muted); }
.about-logo { color: var(--interactive-accent); margin-bottom: 8px; }
.about-version { color: var(--text-faint); font-size: var(--font-ui-smaller); margin-bottom: 12px; }

/* ---------- Notices ---------- */
.notice-container { position: fixed; top: 16px; right: 16px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.notice {
  background: var(--background-primary-alt); border: 1px solid var(--background-modifier-border);
  color: var(--text-normal); padding: 9px 16px; border-radius: 8px; box-shadow: var(--shadow-l);
  font-size: var(--font-ui-small); max-width: 320px; cursor: pointer;
  animation: notice-in .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } }
.notice.is-fading { opacity: 0; transition: opacity .3s; }

/* ---------- Tooltip ---------- */
.tooltip { position: fixed; z-index: 1500; pointer-events: none; }
.tooltip-content {
  background: var(--background-secondary); color: var(--text-normal); border: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller); padding: 4px 9px; border-radius: 5px; box-shadow: var(--shadow-s);
  max-width: 280px;
  animation: fade-in .1s ease-out;
}

/* ---------- Hover preview ---------- */
.popover.hover-editor {
  position: fixed; z-index: 800; width: 420px; max-height: 380px; overflow-y: auto;
  background: var(--background-primary); border: 1px solid var(--background-modifier-border);
  border-radius: 10px; box-shadow: var(--shadow-l);
  animation: fade-in .15s ease-out;
}
.popover.hover-editor .markdown-preview-sizer { padding: 14px 18px; }
.popover.hover-editor .inline-title { padding: 0 0 6px; font-size: 1.3em; }
.popover.hover-editor .markdown-preview-view { padding-bottom: 0; overflow: visible; }

/* ---------- CM search panel tweaks ---------- */
.cm-panel.cm-search input:focus { outline: none; border-color: var(--interactive-accent); }
.cm-panel.cm-search label { color: var(--text-muted); font-size: var(--font-ui-smaller); display: flex; align-items: center; gap: 4px; }
.cm-panels-bottom {}

/* CM autocomplete panel → Obsidian suggestion look */
.cm-tooltip.cm-tooltip-autocomplete { padding: 4px; max-height: 280px; }
.cm-tooltip-autocomplete ul { font-family: var(--font-interface); font-size: var(--font-ui-small); max-height: 260px; }
.cm-tooltip-autocomplete ul li { padding: 4px 10px; border-radius: var(--radius-s); color: var(--text-normal); }
.cm-tooltip-autocomplete ul li[aria-selected] { background: var(--background-modifier-hover); color: var(--text-normal); }
.cm-completionDetail { color: var(--text-faint); font-size: var(--font-ui-smaller); margin-left: 10px; font-style: normal; }
.cm-completionIcon { display: none; }

/* CM misc */
.cm-editor .cm-selectionMatch { background: var(--text-highlight-bg); }
.cm-editor ::selection { background: var(--text-selection); }
.cm-editor.cm-focused .cm-selectionBackground { background: var(--text-selection); }
.cm-gutters { border-right: none !important; }

/* ---------- Narrow / mobile ---------- */
@media (max-width: 900px) {
  :root { --file-margins: 20px; }
}
@media (max-width: 700px) {
  .workspace-ribbon { width: 40px; flex-basis: 40px; }
  .side-dock-ribbon-action { width: 32px; height: 32px; }
  .workspace-split.mod-left-split, .workspace-split.mod-right-split { position: absolute; z-index: 40; height: 100%; box-shadow: var(--shadow-l); }
  .workspace-split.mod-left-split { left: 40px; }
  .workspace-split.mod-right-split { right: 0; }
  .view-header-title-container { display: none; }
  .status-bar { font-size: 10px; }
  .modal.mod-suggester { width: 94vw; }
  .settings-container { flex-direction: column; }
  .settings-nav { width: 100%; border-right: none; border-bottom: 1px solid var(--background-modifier-border); display: flex; overflow-x: auto; padding: 8px; }
  .vertical-tab-nav-items { display: flex; gap: 4px; }
  .vertical-tab-nav-header { display: none; }
  :root { --file-margins: 16px; }
  .graph-controls { width: 220px; }
}