:root {
  --bg: #181819;
  --bg-surface: #181819;
  --bg-input: #181819;
  --border: #fdfdff;
  --text: #e1e1e6;
  --text-muted: #767680;
  --accent: #e5ff00;
  --accent-glow: rgba(240, 203, 66, 0.08);
  --danger: #e05555;
  --success: #4caf7e;
  --radius: 4px;
  --font-ui: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Instrument Serif', serif;
  --topbar-h: 48px;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-surface: #ffffff;
  --bg-input: #ffffff;
  --border: #050505;
  --text: #000000;
  --text-muted: #7c7c85;
  --accent: #39a4eb;
  --accent-glow: rgba(0, 131, 196, 0.06);
  --danger: #e05555;
  --success: #4caf7e;
}

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

html, body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.library-page { overflow: auto; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left, .topbar-right, .topbar-center { display: flex; align-items: center; gap: 12px; }
.topbar-center { justify-content: center; }

.logo { font-family: var(--font-display); font-size: 19px; text-decoration: none; color: var(--text); }
.logo em { color: var(--accent); font-style: normal; }
.separator { color: var(--border); }
.doc-title-display { font-size: 13px; color: var(--text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: flex; gap: 8px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }

.btn-primary, .btn-danger, .btn-text, .btn-icon {
  font-family: var(--font-ui);
  font-size: 13px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--accent); color: #000; font-weight: 500; padding: 6px 14px; }
.btn-primary:hover { opacity: 0.9; }
.btn-danger { background: var(--danger); color: #fff; padding: 6px 14px; }
.btn-danger:hover { opacity: 0.9; }
.btn-text { background: transparent; color: var(--text-muted); padding: 6px 10px; }
.btn-text:hover { color: var(--text); background: var(--bg-input); }
.btn-icon { background: transparent; color: var(--text-muted); padding: 6px; }
.btn-icon:hover { color: var(--text); background: var(--bg-input); }
.btn-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }

[data-theme="dark"] .icon-sun, [data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"] .icon-moon, [data-theme="light"] .icon-sun { display: none; }

.workspace { display: flex; height: calc(100vh - var(--topbar-h)); overflow: hidden; }
.pane { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.pane-header { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.pane-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font-mono); }
.pane-actions { display: flex; gap: 4px; }
.rendering-badge { font-size: 10px; font-family: var(--font-mono); color: var(--success); background: rgba(76,175,126,0.08); padding: 1px 6px; border-radius: 10px; }

.pane-editor { background: var(--bg-input); }
#editor {
  flex: 1; width: 100%; padding: 20px; background: transparent; color: var(--text);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; border: none; outline: none; resize: none; overflow-y: auto;
}
#editor::placeholder { color: var(--text-muted); opacity: 0.5; }

.divider { width: 2px; background: var(--border); cursor: col-resize; transition: background 0.15s; }
.divider:hover, .divider.dragging { background: var(--accent); }

.pane-preview { background: var(--bg); }
#preview { flex: 1; padding: 24px 32px; overflow-y: auto; }

.markdown-body { font-family: var(--font-ui); font-size: 14.5px; line-height: 1.7; color: var(--text); max-width: 680px; margin: 0 auto; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { font-family: var(--font-display); font-weight: normal; margin: 1.5em 0 0.5em; line-height: 1.2; }
.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.markdown-body p { margin-bottom: 0.85em; }
.markdown-body strong { font-weight: 600; }
.markdown-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.markdown-body a:hover { border-color: var(--accent); }
.markdown-body blockquote { border-left: 2px solid var(--accent); padding: 4px 16px; margin: 1.2em 0; background: var(--accent-glow); color: var(--text-muted); font-style: italic; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin-bottom: 0.85em; }
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
.markdown-body img { max-width: 100%; border-radius: var(--radius); }
.markdown-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-surface); padding: 2px 4px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--accent); }
.markdown-body pre { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; overflow-x: auto; margin: 1.2em 0; }
.markdown-body pre code { background: none; border: none; padding: 0; color: var(--text); }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 13px; }
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 12px; }
.markdown-body th { background: var(--bg-input); font-weight: 600; text-align: left; color: var(--text-muted); }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; width: min(380px, 92vw); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-header h3 { font-size: 14px; font-weight: 500; }
.modal-body-text { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.modal-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-ui); font-size: 13px; padding: 8px 10px; margin-bottom: 16px; outline: none; }
.modal-input:focus { border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 16px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 400; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.fullscreen-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 300; flex-direction: column; }
.fullscreen-overlay.open { display: flex; }
.fullscreen-header { padding: 8px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: flex-end; }
#fullscreenContent { flex: 1; overflow-y: auto; padding: 32px; }

.library-main { max-width: 840px; margin: 0 auto; padding: 24px 16px; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.doc-count { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.search-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px; width: min(280px, 100%); }
.search-wrap svg { width: 14px; height: 14px; color: var(--text-muted); }
.search-wrap input { background: none; border: none; outline: none; font-family: var(--font-ui); font-size: 13px; color: var(--text); padding: 6px 0; width: 100%; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.doc-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; position: relative; }
.doc-card:hover { border-color: var(--accent); }
.doc-card-title { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-preview { font-size: 12px; color: var(--text-muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 10px; height: 3em; }
.doc-card-footer { display: flex; align-items: center; justify-content: space-between; }
.doc-card-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.doc-card-actions { display: flex; gap: 2px; }
.doc-card-actions .btn-icon { padding: 2px; }
.doc-card-actions .del-btn:hover { color: var(--danger); background: transparent; }
.loading-state, .empty-state { text-align: center; padding: 40px 0; color: var(--text-muted); font-size: 13px; }

/* Original Pygments/codehilite classes (kept, unused by the static build) */
.highlight .hll { background-color: #2a2a2e }
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs { color: #6e6e78; font-style: italic }
.highlight .err, .highlight .gd, .highlight .gt { color: #e05555 }
.highlight .k, .highlight .kc, .highlight .kn, .highlight .kp, .highlight .kr { color: #c78aed }
.highlight .l, .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .mo, .highlight .il, .highlight .ld { color: #e8c547 }
.highlight .n, .highlight .p, .highlight .w, .highlight .py, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: #e8e8ea }
.highlight .o, .highlight .ow, .highlight .kd, .highlight .kt, .highlight .nb, .highlight .bp, .highlight .nt, .highlight .sr { color: #7ec8c8 }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .si, .highlight .sx, .highlight .s1, .highlight .ss { color: #8fc97e }
.highlight .na, .highlight .nc, .highlight .nd, .highlight .nf, .highlight .nn, .highlight .nx { color: #78c8e8 }

[data-theme="light"] .highlight .c, [data-theme="light"] .highlight .c1, [data-theme="light"] .highlight .cm { color: #9e9e9a; }
[data-theme="light"] .highlight .n, [data-theme="light"] .highlight .p { color: #1a1a1c; }
[data-theme="light"] .highlight .k, [data-theme="light"] .highlight .kc, [data-theme="light"] .highlight .kn, [data-theme="light"] .highlight .kr { color: #8b44c8; }
[data-theme="light"] .highlight .kd, [data-theme="light"] .highlight .kt, [data-theme="light"] .highlight .nc, [data-theme="light"] .highlight .nf, [data-theme="light"] .highlight .na, [data-theme="light"] .highlight .nb, [data-theme="light"] .highlight .o, [data-theme="light"] .highlight .ow { color: #1a6b8a; }
[data-theme="light"] .highlight .s, [data-theme="light"] .highlight .s1, [data-theme="light"] .highlight .s2 { color: #2d7d52; }
[data-theme="light"] .highlight .m, [data-theme="light"] .highlight .mi, [data-theme="light"] .highlight .mf { color: #8b6914; }

/* highlight.js classes (actually used now — same color palette as above,
   mapped onto hljs's own token names since the static build can't run
   Pygments/codehilite server-side anymore) */
.markdown-body .hljs { background: none; color: var(--text); }
.hljs-comment, .hljs-quote { color: #6e6e78; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type, .hljs-doctag { color: #c78aed; }
.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-regexp { color: #8fc97e; }
.hljs-number, .hljs-meta, .hljs-link { color: #e8c547; }
.hljs-title, .hljs-name, .hljs-attribute, .hljs-selector-id, .hljs-selector-class { color: #78c8e8; }
.hljs-built_in, .hljs-builtin-name, .hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-params { color: #7ec8c8; }
.hljs-deletion { color: #e05555; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

[data-theme="light"] .hljs-comment, [data-theme="light"] .hljs-quote { color: #9e9e9a; }
[data-theme="light"] .markdown-body .hljs { color: #1a1a1c; }
[data-theme="light"] .hljs-keyword, [data-theme="light"] .hljs-selector-tag, [data-theme="light"] .hljs-literal, [data-theme="light"] .hljs-type, [data-theme="light"] .hljs-doctag { color: #8b44c8; }
[data-theme="light"] .hljs-built_in, [data-theme="light"] .hljs-builtin-name, [data-theme="light"] .hljs-variable, [data-theme="light"] .hljs-template-variable, [data-theme="light"] .hljs-attr, [data-theme="light"] .hljs-params,
[data-theme="light"] .hljs-title, [data-theme="light"] .hljs-name, [data-theme="light"] .hljs-attribute, [data-theme="light"] .hljs-selector-id, [data-theme="light"] .hljs-selector-class { color: #1a6b8a; }
[data-theme="light"] .hljs-string, [data-theme="light"] .hljs-symbol, [data-theme="light"] .hljs-bullet, [data-theme="light"] .hljs-addition, [data-theme="light"] .hljs-regexp { color: #2d7d52; }
[data-theme="light"] .hljs-number, [data-theme="light"] .hljs-meta, [data-theme="light"] .hljs-link { color: #8b6914; }

@media (max-width: 720px) {
  .workspace { flex-direction: column; }
  .divider { width: 100%; height: 2px; cursor: row-resize; }
  .pane { height: 50%; }
  #preview { padding: 16px; }
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }