@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Geist:wght@300;400;500;600&display=swap');

:root {
  --bg: #1e1e1e;
  --bg2: #252526;
  --bg3: #2d2d30;
  --bg4: #333337;
  --border: #3e3e42;
  --text: #d4d4d4;
  --text2: #9d9d9d;
  --text3: #6b6b6b;
  --accent: #569cd6;
  --accent2: #4ec9b0;
  --accent3: #ce9178;
  --green: #6a9955;
  --yellow: #dcdcaa;
  --orange: #d7ba7d;
  --pink: #c586c0;
  --red: #f44747;
  --hover: rgba(255,255,255,0.05);
  --selected: rgba(86,156,214,0.15);
  --font-ui: 'Geist', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --radius: 4px;
  --sidebar-w: 220px;
}

[data-theme="monokai"] {
  --bg: #272822; --bg2: #1e1f1c; --bg3: #2f312a; --bg4: #3a3d31;
  --border: #464741; --text: #f8f8f2; --text2: #a59f85; --text3: #75715e;
  --accent: #66d9e8; --accent2: #a6e22e; --accent3: #fd971f;
  --green: #a6e22e; --yellow: #e6db74; --orange: #fd971f; --pink: #f92672; --red: #f92672;
}

[data-theme="solarized"] {
  --bg: #002b36; --bg2: #073642; --bg3: #0a404d; --bg4: #0d4f5e;
  --border: #1a5c6e; --text: #839496; --text2: #657b83; --text3: #4a6a72;
  --accent: #268bd2; --accent2: #2aa198; --accent3: #cb4b16;
  --green: #859900; --yellow: #b58900; --orange: #cb4b16; --pink: #d33682; --red: #dc322f;
}

[data-theme="dracula"] {
  --bg: #282a36; --bg2: #21222c; --bg3: #2f3140; --bg4: #373a4e;
  --border: #44475a; --text: #f8f8f2; --text2: #a0a8cf; --text3: #6272a4;
  --accent: #8be9fd; --accent2: #50fa7b; --accent3: #ffb86c;
  --green: #50fa7b; --yellow: #f1fa8c; --orange: #ffb86c; --pink: #ff79c6; --red: #ff5555;
}

[data-theme="nord"] {
  --bg: #2e3440; --bg2: #262c38; --bg3: #333b4a; --bg4: #3b4454;
  --border: #434c5e; --text: #d8dee9; --text2: #adb7c9; --text3: #7a8698;
  --accent: #88c0d0; --accent2: #a3be8c; --accent3: #d08770;
  --green: #a3be8c; --yellow: #ebcb8b; --orange: #d08770; --pink: #b48ead; --red: #bf616a;
}

[data-theme="light"] {
  --bg: #f3f3f3; --bg2: #ffffff; --bg3: #e8e8e8; --bg4: #dcdcdc;
  --border: #cccccc; --text: #1e1e1e; --text2: #555555; --text3: #999999;
  --accent: #0078d4; --accent2: #107c41; --accent3: #c05c00;
  --green: #107c41; --yellow: #7a5e00; --orange: #c05c00; --pink: #881798; --red: #c50f1f;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  user-select: none;
}

#app { display: flex; flex-direction: column; height: 100vh; }
#main { display: flex; flex: 1; overflow: hidden; }

#menubar {
  height: 30px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

#sidebar-toggle-btn,
.menu-link {
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius);
}

#sidebar-toggle-btn {
  width: 28px;
  height: 22px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  margin-right: 2px;
}

#sidebar-toggle-btn span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
}

#sidebar-toggle-btn:hover,
.menu-link:hover { background: var(--hover); }

.menu-link {
  padding: 3px 10px;
  font-size: 12px;
}

.menu-item {
  padding: 3px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  position: relative;
  transition: background 0.1s;
}

.menu-item:hover, .menu-item.open { background: var(--hover); }

.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 200;
  padding: 4px;
}

.menu-item.open .menu-dropdown { display: block; }

.menu-dropdown li {
  list-style: none;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  font-size: 12px;
  transition: background 0.1s;
}

.menu-dropdown li:hover { background: var(--selected); color: var(--accent); }
.menu-dropdown li.sep { height: 1px; background: var(--border); padding: 0; margin: 3px 0; pointer-events: none; }
.menu-dropdown li .shortcut { color: var(--text3); font-size: 11px; }

#menubar-title-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

#menubar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

#menubar-title {
  font-size: 12px;
  color: var(--text3);
  pointer-events: none;
}

#rename-active-note {
  width: 20px;
  height: 20px;
  color: var(--text3);
  display: none;
}

#rename-active-note:hover {
  color: var(--text);
}

#menubar #markdown-toggle {
  height: 22px;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--border);
  font-size: 11px;
}

#menubar #markdown-toggle:hover,
#menubar #markdown-toggle.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--hover);
}

#theme-select {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 11px;
  font-family: var(--font-ui);
  padding: 2px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
}

#theme-select:hover { border-color: var(--accent); }

#sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.2s ease, margin-right 0.2s ease, opacity 0.2s ease;
  transform: translateX(0);
}

#sidebar.collapsed {
  transform: translateX(calc(-1 * var(--sidebar-w)));
  margin-right: calc(-1 * var(--sidebar-w));
  opacity: 0;
}

#sidebar-header {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#sidebar-brand {
  display: block;
  padding: 10px 10px 0;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

#sidebar-brand .brand-prefix {
  color: color-mix(in srgb, var(--text3) 85%, white 15%);
}

#sidebar-brand .brand-name {
  color: color-mix(in srgb, var(--text) 90%, white 10%);
}

#sidebar-brand:hover {
  color: inherit;
}

#sidebar-brand:hover .brand-prefix {
  color: color-mix(in srgb, var(--text2) 80%, white 20%);
}

#sidebar-brand:hover .brand-name {
  color: white;
}

#sidebar-search {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s;
}

#sidebar-search:focus { border-color: var(--accent); }
#sidebar-search::placeholder { color: var(--text3); }

.icon-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}

.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-mask {
  width: 14px;
  height: 14px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  opacity: 0.9;
}

#sidebar-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

#sidebar-tree::-webkit-scrollbar { width: 4px; }
#sidebar-tree::-webkit-scrollbar-track { background: transparent; }
#sidebar-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#sidebar-ad {
  margin: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  color: var(--text2);
  font-size: 11px;
  line-height: 1.45;
}

.ad-label {
  display: inline-block;
  padding: 1px 5px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--bg4);
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ad-title { color: var(--text); font-weight: 500; margin-bottom: 4px; }
.ad-copy { color: var(--text2); }

.folder { margin-bottom: 2px; }

.folder-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  color: var(--text2);
}

.folder-header:hover { background: var(--hover); color: var(--text); }
.folder-header.dragging-over { background: var(--selected); }

.folder-arrow {
  width: 10px;
  height: 10px;
  color: var(--text3);
  transition: transform 0.15s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.folder-arrow .icon-mask {
  width: 10px;
  height: 10px;
}

.folder-header.open .folder-arrow { transform: rotate(90deg); }
.folder-icon { font-size: 13px; flex-shrink: 0; }
.folder-icon .icon-mask,
.note-icon .icon-mask {
  width: 13px;
  height: 13px;
}

.folder-name {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-actions { display: none; gap: 2px; }
.folder-header:hover .folder-actions { display: flex; }

.folder-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text3);
  font-size: 11px;
  padding: 1px 3px;
  border-radius: 2px;
  transition: color 0.1s, background 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.folder-actions button:hover { color: var(--text); background: var(--bg4); }

.folder-children { padding-left: 14px; display: none; }
.folder-children.open { display: block; }

.note-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
  color: var(--text2);
  margin-bottom: 1px;
}

.note-item:hover { background: var(--hover); color: var(--text); }
.note-item.active { background: var(--selected); color: var(--accent); }
.note-item.dragging { opacity: 0.5; }
.note-icon { font-size: 12px; flex-shrink: 0; }

.note-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-item-actions { display: none; gap: 2px; }
.note-item:hover .note-item-actions { display: flex; }

.note-item-actions button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text3);
  font-size: 11px;
  padding: 1px 3px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.note-item-actions button:hover { color: var(--red); }
.note-item-actions button[data-action="rename-note"]:hover { color: var(--accent); }
.note-item-actions button:hover .icon-mask,
.icon-btn:hover .icon-mask,
.tab-close:hover .icon-mask {
  opacity: 1;
}

#editor-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#tabs-header {
  height: 35px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  padding: 0 4px;
}

#tabs-bar {
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 2px 0 0;
}

#tabs-spacer {
  flex: 1;
  min-width: 0;
}

#btn-tabs-new-note {
  align-self: center;
}

#tabs-bar::-webkit-scrollbar { height: 2px; }
#tabs-bar::-webkit-scrollbar-thumb { background: var(--border); }

.tab {
  height: 30px;
  padding: 0 12px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: var(--bg3);
  color: var(--text3);
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  position: relative;
  margin-top: 5px;
  flex-shrink: 0;
}

.tab:hover { color: var(--text); }
.tab.active { background: var(--bg); color: var(--text); border-color: var(--border); z-index: 1; }
.tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent3); display: none; flex-shrink: 0; }
.tab.modified .tab-dot { display: block; }

.tab-close {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text3);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s, background 0.1s, color 0.1s;
}

.tab-close .icon-mask {
  width: 12px;
  height: 12px;
}

.tab:hover .tab-close, .tab.modified .tab-close { opacity: 1; }
.tab-close:hover { background: var(--bg4); color: var(--red); }

#editor-wrapper {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

#editor-stack {
  flex: 1;
  position: relative;
  min-width: 0;
  background: var(--bg);
}

#editor-wrapper.split #editor-stack { width: 50%; flex: 0 0 50%; }

#line-numbers {
  width: 50px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 8px 16px 0;
  text-align: right;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text3);
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

#highlight-layer,
#editor {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 16px 20px;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
}

#highlight-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: auto;
  pointer-events: none;
  background: var(--bg);
  color: var(--text);
  user-select: none;
}

#highlight-content { display: block; min-height: 100%; }

#editor {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  color: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  user-select: text;
  caret-color: var(--accent);
  z-index: 1;
}

#editor::-webkit-scrollbar { width: 8px; height: 8px; }
#editor::-webkit-scrollbar-track { background: var(--bg); }
#editor::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 4px; }
#editor::-webkit-scrollbar-thumb:hover { background: var(--border); }
#editor::placeholder { color: var(--text3); font-style: italic; }
#editor::selection { background: var(--selected); }
.token.keyword,
.token.atrule,
.token.boolean {
  color: var(--accent);
}

.token.string,
.token.char,
.token.inserted {
  color: var(--accent3);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--green);
}

.token.number,
.token.constant {
  color: var(--yellow);
}

.token.tag,
.token.selector,
.token.deleted {
  color: var(--pink);
}

.token.attr-name,
.token.property,
.token.namespace {
  color: var(--accent2);
}

.token.function,
.token.class-name {
  color: var(--text);
}

.token.operator,
.token.punctuation {
  color: var(--text2);
}

#markdown-preview {
  display: none;
  flex: 0 0 50%;
  width: 50%;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  overflow: auto;
  padding: 16px 20px;
  line-height: 1.7;
  user-select: text;
}

#editor-wrapper.split #markdown-preview { display: block; }

#markdown-preview h1,
#markdown-preview h2,
#markdown-preview h3,
#markdown-preview h4 {
  margin: 0 0 12px;
  color: var(--text);
}

#markdown-preview p,
#markdown-preview ul,
#markdown-preview ol,
#markdown-preview blockquote,
#markdown-preview pre {
  margin: 0 0 12px;
}

#markdown-preview ul,
#markdown-preview ol {
  padding-left: 20px;
}

#markdown-preview code {
  font-family: var(--font-mono);
  background: var(--bg3);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent3);
}

#markdown-preview pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--radius);
  overflow: auto;
}

#markdown-preview pre code {
  background: transparent;
  padding: 0;
  color: var(--text);
}

#markdown-preview blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  color: var(--text2);
}

#markdown-preview a {
  color: var(--accent);
  text-decoration: none;
}

#markdown-preview a:hover { text-decoration: underline; }

#html-result-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

#empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  gap: 12px;
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

#empty-state svg { opacity: 0.2; }
#empty-state p { font-size: 14px; }
#empty-state small { font-size: 12px; opacity: 0.7; }

#statusbar {
  height: 24px;
  background: var(--accent);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 16px;
  flex-shrink: 0;
  font-size: 11.5px;
  color: rgba(0,0,0,0.75);
  font-family: var(--font-ui);
  overflow-x: auto;
  overflow-y: hidden;
}

[data-theme="monokai"] #statusbar { background: var(--pink); }
[data-theme="solarized"] #statusbar { background: #268bd2; }
[data-theme="dracula"] #statusbar { background: var(--pink); }
[data-theme="nord"] #statusbar { background: var(--accent); }
[data-theme="light"] #statusbar { background: var(--accent); color: white; }

.status-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.status-sep { opacity: 0.4; }

.status-toggle {
  display: none;
  height: 18px;
  padding: 0 8px;
  border: none;
  border-radius: 3px;
  background: rgba(0,0,0,0.15);
  color: inherit;
  cursor: pointer;
  align-items: center;
  font-family: inherit;
  font-size: 11.5px;
}

.status-toggle.visible { display: inline-flex; }
.status-toggle:hover,
.status-toggle.active { background: rgba(0,0,0,0.25); }

#status-lang {
  margin-left: auto;
  padding: 0 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  cursor: pointer;
  height: 18px;
  display: flex;
  align-items: center;
  transition: background 0.1s;
}

#status-lang:hover { background: rgba(0,0,0,0.25); }

#statusbar::-webkit-scrollbar {
  height: 0;
}

#lang-picker {
  display: none;
  position: absolute;
  bottom: 28px;
  right: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  z-index: 200;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  min-width: 140px;
}

#lang-picker.open { display: block; }

.lang-opt {
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text2);
  transition: background 0.1s;
}

.lang-opt:hover { background: var(--selected); color: var(--accent); }
.lang-opt.active { color: var(--accent); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  min-width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal h3 { font-size: 14px; margin-bottom: 12px; color: var(--text); font-weight: 500; }

.modal input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius);
  outline: none;
  margin-bottom: 12px;
}

.modal input:focus { border-color: var(--accent); }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; }

.btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { opacity: 0.85; }
.btn-ghost { background: transparent; color: var(--text2); }
.btn-ghost:hover { background: var(--hover); }

.modal-info,
.modal-theme,
.modal-confirm { min-width: 420px; max-width: 560px; }
.modal-info {
  min-width: 420px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.theme-grid label {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.theme-grid span {
  display: block;
  color: var(--text3);
  margin-bottom: 6px;
  font-size: 11px;
}

.about-window {
  border: 1px solid var(--border);
  background: var(--bg3);
}

.about-titlebar {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, white 8%), var(--bg2));
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
}

.about-lines {
  padding: 14px 16px 16px;
  line-height: 1.55;
}

.about-lines p {
  margin: 0;
  color: var(--text2);
  font-family: var(--font-ui);
  font-size: 12px;
}

.about-lines a {
  color: inherit;
  text-decoration: underline;
}

.about-actions {
  justify-content: center;
  padding: 0 16px 16px;
}

.modal-info .btn {
  min-width: 84px;
  border-radius: 0;
  background: var(--bg3);
  color: var(--text);
}

.modal-info .btn:hover {
  background: var(--hover);
}

.modal-confirm p {
  margin: 0 0 14px;
  color: var(--text2);
  line-height: 1.6;
}

#sidebar-context-menu {
  position: fixed;
  display: none;
  min-width: 150px;
  background: var(--bg3);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 4px;
  z-index: 550;
}

#sidebar-context-menu.open { display: block; }

#sidebar-context-menu button {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
}

#sidebar-context-menu button:hover {
  background: var(--selected);
  color: var(--accent);
}

.theme-grid input[type="color"] {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  cursor: pointer;
}

#resize-handle {
  width: 0;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

#resize-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 6px;
  background: transparent;
  transition: background 0.1s;
}

#resize-handle:hover::before,
#resize-handle.resizing::before { background: var(--accent); }

#drop-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(2px);
  z-index: 500;
}

#drop-overlay.open { display: flex; }

#drop-card {
  min-width: 320px;
  max-width: 420px;
  padding: 22px 24px;
  border: 1px solid var(--accent);
  background: var(--bg3);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center;
}

#drop-card strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 8px;
}

#drop-card span {
  display: block;
  color: var(--text2);
  line-height: 1.5;
}

@media (max-width: 900px) {
  #menubar {
    padding-right: 6px;
  }

  #menubar-title {
    display: none;
  }

  #menubar-title-wrap {
    display: none;
  }

  #menubar-actions {
    gap: 4px;
  }

  #sidebar {
    position: fixed;
    top: 30px;
    left: 0;
    bottom: 24px;
    z-index: 220;
    box-shadow: 0 18px 42px rgba(0,0,0,0.45);
  }

  #sidebar.collapsed {
    margin-right: 0;
  }

  #resize-handle {
    display: none;
  }

  #tabs-header {
    overflow-x: auto;
  }

  #statusbar {
    gap: 10px;
    padding: 0 8px;
  }
}

@media (max-width: 680px) {
  #menubar {
    gap: 0;
    padding: 0 4px;
  }

  #m-about {
    display: none;
  }

  .menu-link {
    padding: 3px 7px;
  }

  #menubar #markdown-toggle {
    padding: 0 6px;
    min-width: 0;
  }

  #theme-select {
    max-width: 98px;
    padding: 2px 4px;
  }

  #editor-wrapper.split {
    flex-direction: column;
  }

  #editor-wrapper.split #editor-stack,
  #editor-wrapper.split #markdown-preview {
    width: 100%;
    flex: 1 1 50%;
  }

  #markdown-preview {
    border-left: 0;
    border-top: 1px solid var(--border);
    min-height: 180px;
  }

  #line-numbers {
    width: 42px;
    padding-right: 6px;
  }

  #highlight-layer,
  #editor,
  #markdown-preview {
    padding: 12px 14px;
  }

  #statusbar {
    font-size: 11px;
  }

  #st-words,
  #st-chars,
  .status-sep {
    display: none;
  }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }