:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --preview-width: 760px;
  --preview-size: 17px;
}

[data-font="modern"]    { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }
[data-font="editorial"] { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Newsreader', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }
[data-font="classic"]   { --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Lora', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }
[data-font="humanist"]  { --font-display: 'Libre Franklin', system-ui, sans-serif; --font-body: 'Source Serif 4', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; }
[data-font="plex"]      { --font-display: 'IBM Plex Sans', system-ui, sans-serif; --font-body: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; }

[data-theme="slate"] {
  --bg: #f3f3f1; --bg2: #e9e9e6; --surface: #fbfbfa; --surface2: #efefec;
  --ink: #1c1c1b; --ink-soft: #4a4a47; --ink-faint: #8a8a85;
  --accent: #2e2e2c; --accent2: #000000; --accent-soft: #dededa;
  --border: #dcdcd8; --border2: #c2c2bd; --code-bg: #eaeae7; --sel: #d6d6cf;
}
[data-theme="paper"] {
  --bg: #f4efe6; --bg2: #ece4d6; --surface: #fbf7ef; --surface2: #f3ecdf;
  --ink: #2c2620; --ink-soft: #5b5247; --ink-faint: #8a7f70;
  --accent: #a8542a; --accent2: #823c1c; --accent-soft: #f0d9c8;
  --border: #ddd2bf; --border2: #c7b9a1; --code-bg: #efe7d8; --sel: #e7c9a8;
}
[data-theme="ink"] {
  --bg: #1c1a17; --bg2: #24211c; --surface: #26231e; --surface2: #2e2a24;
  --ink: #ece3d4; --ink-soft: #c2b7a4; --ink-faint: #8d8472;
  --accent: #e0915a; --accent2: #f0a972; --accent-soft: #3a2e22;
  --border: #3a352d; --border2: #4d473c; --code-bg: #201d18; --sel: #5a4326;
}
[data-theme="sage"] {
  --bg: #eef0e8; --bg2: #e3e7d9; --surface: #f6f7f1; --surface2: #eceee3;
  --ink: #2a2e26; --ink-soft: #54594b; --ink-faint: #828a76;
  --accent: #5b7042; --accent2: #43562f; --accent-soft: #dde5cf;
  --border: #d4d9c5; --border2: #bcc4a6; --code-bg: #e6e9dc; --sel: #cbd9b3;
}
[data-theme="dusk"] {
  --bg: #1a1d24; --bg2: #21252e; --surface: #242833; --surface2: #2c313d;
  --ink: #dde3ee; --ink-soft: #aab2c4; --ink-faint: #7c8497;
  --accent: #6ea8d8; --accent2: #8cc0e8; --accent-soft: #2a3340;
  --border: #343a47; --border2: #454c5c; --code-bg: #1e222b; --sel: #3a4a5e;
}
[data-theme="rose"] {
  --bg: #f6edec; --bg2: #efe1df; --surface: #fcf4f3; --surface2: #f5e8e6;
  --ink: #312423; --ink-soft: #614e4c; --ink-faint: #927c79;
  --accent: #b1556a; --accent2: #8c3c50; --accent-soft: #f1d7dc;
  --border: #e3d0ce; --border2: #d0b5b2; --code-bg: #f0e2e0; --sel: #eccbcf;
}

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

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f3f3f1);
  transition: opacity .5s ease, visibility .5s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; }
.pre-mark { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pre-doc { width: 64px; height: 80px; overflow: visible; }
.pre-page {
  fill: var(--surface, #fbfbfa);
  stroke: var(--accent, #2e2e2c); stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
  animation: pre-float 2.4s ease-in-out infinite;
}
.pre-fold { fill: none; stroke: var(--accent, #2e2e2c); stroke-width: 2.5; stroke-linejoin: round; animation: pre-float 2.4s ease-in-out infinite; }
.pre-line {
  stroke: var(--accent, #2e2e2c); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: pre-write 2.4s ease-in-out infinite;
  opacity: .85;
}
.pre-line.l1 { animation-delay: .15s; }
.pre-line.l2 { animation-delay: .4s; }
.pre-line.l3 { animation-delay: .65s; }
.pre-line.l4 { animation-delay: .9s; }
@keyframes pre-write {
  0% { stroke-dashoffset: 40; }
  35%, 70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 40; }
}
@keyframes pre-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.pre-title {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 22px; font-weight: 600; color: var(--ink, #1c1c1b); letter-spacing: -.4px;
}
.pre-title em { font-style: italic; color: var(--accent, #2e2e2c); }
.pre-dots { display: flex; gap: 6px; }
.pre-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #2e2e2c);
  animation: pre-bounce 1.2s ease-in-out infinite;
}
.pre-dots span:nth-child(2) { animation-delay: .2s; }
.pre-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pre-bounce {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50% { transform: translateY(-6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-page, .pre-fold, .pre-line, .pre-dots span { animation: none; }
  .pre-line { stroke-dashoffset: 0; }
}

* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border2); border: 3px solid transparent;
  background-clip: padding-box; border-radius: 8px; transition: background .15s;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent2); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.scroll-compact::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-compact { scrollbar-color: var(--border) transparent; }

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow: hidden; transition: background .3s, color .3s;
}
::selection { background: var(--sel); }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-wrap: wrap; z-index: 30;
}
.brand { display: flex; align-items: baseline; gap: 9px; margin-right: 2px; user-select: none; }
.brand .mark { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent); letter-spacing: -.5px; }
.brand .mark em { font-style: italic; color: var(--ink); }
.brand .tag { font-size: 11px; color: var(--ink-faint); letter-spacing: 1.5px; text-transform: uppercase; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; color: var(--ink-soft); transition: all .15s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--border2); background: var(--bg); }
.icon-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.filename-wrap { display: flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 110px; }
.filename {
  font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  padding: 4px 8px; width: 100%; max-width: 300px; transition: border-color .15s, background .15s;
}
.filename:hover { border-color: var(--border); }
.filename:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; flex-shrink: 0; }
.dirty-dot.on { opacity: 1; }
.spacer { flex: 1; }
.file-actions { display: flex; align-items: center; gap: 10px; }
#moreWrap { display: none; }

.btn {
  font-family: var(--font-body); font-size: 14px; color: var(--ink-soft);
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: all .15s;
}
.btn:hover { color: var(--ink); border-color: var(--border2); background: var(--bg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn .label { display: inline; }
.btn .caret { width: 12px; height: 12px; opacity: .7; }

.seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button {
  font-family: var(--font-body); font-size: 13px; border: none; background: transparent;
  color: var(--ink-soft); padding: 5px 11px; border-radius: 6px; cursor: pointer; transition: all .15s;
}
.seg button.active { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.seg button:not(.active):hover { color: var(--ink); }

.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px; min-width: 190px; z-index: 50; display: none;
  max-height: min(78vh, 560px); overflow-y: auto;
}
.menu.open { display: block; animation: pop .14s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.menu h4 {
  font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--ink-faint); padding: 6px 8px 6px;
}
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: 8px; border: none; background: transparent;
  cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); text-align: left; transition: all .12s;
}
.menu-item:hover { background: var(--surface2); color: var(--ink); }
.menu-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.theme-chip {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2); cursor: pointer;
  font-size: 13px; color: var(--ink-soft); transition: all .12s;
}
.theme-chip:hover { border-color: var(--border2); color: var(--ink); }
.theme-chip.active { border-color: var(--accent); color: var(--ink); }
.swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }

.font-list { display: flex; flex-direction: column; gap: 5px; }
.font-chip {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); cursor: pointer; transition: all .12s;
}
.font-chip:hover { border-color: var(--border2); }
.font-chip.active { border-color: var(--accent); }
.font-name { font-size: 15px; color: var(--ink); line-height: 1.2; }
.font-chip.active .font-name { color: var(--accent); }
.font-sample { font-family: var(--font-body); font-size: 11px; color: var(--ink-faint); }

.font-name[data-font="modern"]    { font-family: 'Space Grotesk', sans-serif; }
.font-name[data-font="editorial"] { font-family: 'Fraunces', serif; }
.font-name[data-font="classic"]   { font-family: 'Playfair Display', serif; }
.font-name[data-font="humanist"]  { font-family: 'Libre Franklin', sans-serif; }
.font-name[data-font="plex"]      { font-family: 'IBM Plex Sans', sans-serif; }

.slider-row { padding: 4px 8px 8px; }
.slider-row label { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-faint); margin-bottom: 5px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent); }

.toolbar {
  display: flex; align-items: center; gap: 3px; padding: 6px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-wrap: nowrap; z-index: 20;
}
.toolbar::-webkit-scrollbar { height: 0; }
.tool {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 7px; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; color: var(--ink-soft); font-family: var(--font-display);
  font-size: 14px; transition: all .12s;
}
.tool:hover { background: var(--surface2); color: var(--ink); border-color: var(--border); }
.tool svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tool-sep { width: 1px; height: 20px; background: var(--border); margin: 0 5px; flex-shrink: 0; }
.tool.b { font-weight: 700; }
.tool.i { font-style: italic; }
.tool-menu-wrap { display: inline-flex; flex-shrink: 0; }
.tool-case { gap: 3px; padding: 0 6px 0 8px; min-width: 0; }
.tool-case .case-aa { font-family: var(--font-display); font-size: 14px; line-height: 1; }
.tool-case .caret { width: 12px; height: 12px; opacity: .6; }
.case-menu {
  position: fixed; top: calc(var(--toolbar-bottom, 96px) + 6px); left: 12px; right: auto;
  min-width: 210px; max-width: calc(100vw - 24px);
}
.case-menu .case-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; flex-shrink: 0; border-radius: 5px;
  background: var(--surface2); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
}

.body-wrap { flex: 1; display: flex; overflow: hidden; min-height: 0; }

.outline {
  width: 248px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  overflow: hidden; transition: width .2s, opacity .2s;
}
.outline.collapsed { width: 0; opacity: 0; border-right: none; }
.outline-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 10px 9px 16px; font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--border);
}
.outline-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: transparent; border-radius: 7px;
  cursor: pointer; color: var(--ink-faint); transition: all .12s;
}
.outline-close:hover { background: var(--surface2); color: var(--ink); }
.outline-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.outline-backdrop {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s;
}
.outline-backdrop.show { opacity: 1; }
.outline-list { flex: 1; overflow-y: auto; padding: 8px 8px 30px; }
.toc-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 14px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .1s;
}
.toc-item:hover { background: var(--surface2); color: var(--ink); }
.toc-item.lvl-1 { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.toc-item.lvl-2 { padding-left: 18px; }
.toc-item.lvl-3 { padding-left: 30px; font-size: 13px; }
.toc-item.lvl-4, .toc-item.lvl-5, .toc-item.lvl-6 { padding-left: 42px; font-size: 12.5px; color: var(--ink-faint); }
.outline-empty { color: var(--ink-faint); font-style: italic; font-size: 13px; padding: 14px 10px; }

.main { flex: 1; display: flex; overflow: hidden; position: relative; min-width: 0; }
.pane { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.main[data-mode="split"] .pane.editor-pane { flex: 0 0 var(--split, 50%); }
.main[data-mode="split"] .pane.preview-pane { flex: 1 1 0; }
.pane-head {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint);
  padding: 9px 22px 7px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.divider {
  width: 7px; flex-shrink: 0; background: var(--border);
  cursor: col-resize; position: relative; transition: background .15s;
}
.divider::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 3px; height: 34px;
  border-radius: 3px; background: var(--border2); transition: background .15s;
}
.divider:hover { background: var(--accent-soft); }
.divider:hover::before { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing .preview-scroll, body.resizing #editor { pointer-events: none; }

.editor-wrap { flex: 1; position: relative; overflow: hidden; display: flex; }
#editor {
  flex: 1; width: 100%; border: none; resize: none; outline: none;
  background: var(--surface); color: var(--ink); font-family: var(--font-mono);
  font-size: 15px; line-height: 1.75; padding: 26px 30px 60px; tab-size: 2;
}
#editor::placeholder { color: var(--ink-faint); }

.preview-scroll { flex: 1; overflow-y: auto; background: var(--bg); }
.preview {
  max-width: var(--preview-width); margin: 0 auto; padding: 44px 48px 90px;
  font-size: var(--preview-size);
}

.main[data-mode="edit"] .pane.preview-pane, .main[data-mode="edit"] .divider { display: none; }
.main[data-mode="preview"] .pane.editor-pane, .main[data-mode="preview"] .divider { display: none; }

.app[data-mode="preview"] .toolbar { display: none; }

.findbar {
  position: absolute; top: 10px; right: 16px; z-index: 25;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px; display: none; flex-direction: column; gap: 8px;
  width: 340px; max-width: calc(100% - 32px);
}
.findbar.open { display: flex; animation: pop .14s ease; }
.findbar .frow { display: flex; align-items: center; gap: 6px; }
.findbar input {
  flex: 1 1 auto; min-width: 0; height: 34px; font-family: var(--font-mono); font-size: 13px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--ink); outline: none; transition: border-color .12s;
}
.findbar input:focus { border-color: var(--accent); }
.findbar .fbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 34px; min-width: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface2); color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: all .12s;
}
.findbar .fbtn:hover { color: var(--ink); border-color: var(--border2); background: var(--bg); }
.findbar .fcount {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 34px; min-width: 50px; padding: 0 6px; font-size: 12px;
  color: var(--ink-faint); font-family: var(--font-mono);
}
.findbar .fclose {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 34px; width: 34px; cursor: pointer; color: var(--ink-faint);
  border: 1px solid transparent; border-radius: 8px; background: none; font-size: 20px; line-height: 1; transition: all .12s;
}
.findbar .fclose:hover { color: var(--ink); background: var(--surface2); }
.findbar .opts { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-soft); padding: 2px 2px 0; }
.findbar .opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.findbar .opts input { accent-color: var(--accent); }

.preview h1, .preview h2, .preview h3, .preview h4, .preview h5, .preview h6 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--ink);
  margin: 1.6em 0 .5em; letter-spacing: -.3px; scroll-margin-top: 20px;
}
.preview h1 { font-size: 2.3em; margin-top: 0; }
.preview h2 { font-size: 1.7em; border-bottom: 1px solid var(--border); padding-bottom: .25em; }
.preview h3 { font-size: 1.35em; }
.preview h4 { font-size: 1.12em; }
.preview h5 { font-size: 1em; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); }
.preview h6 { font-size: .9em; color: var(--ink-faint); }
.preview p { margin: 0 0 1.1em; }
.preview a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: border-color .15s; }
.preview a:hover { border-bottom-color: var(--accent); }
.preview strong { font-weight: 600; color: var(--ink); }
.preview em { font-style: italic; }
.preview ul, .preview ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.preview li { margin: .3em 0; }
.preview li::marker { color: var(--accent); }
.preview blockquote {
  margin: 1.3em 0; padding: .4em 1.2em; border-left: 3px solid var(--accent);
  background: var(--surface2); border-radius: 0 6px 6px 0; color: var(--ink-soft); font-style: italic;
}
.preview blockquote p:last-child { margin-bottom: 0; }
.preview code { font-family: var(--font-mono); font-size: .87em; background: var(--code-bg); padding: .15em .4em; border-radius: 5px; color: var(--accent2); }
.preview pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; margin: 1.3em 0; line-height: 1.55; }
.preview pre code { background: none; padding: 0; color: var(--ink); font-size: .85em; }
.preview hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0; }
.preview img { max-width: 100%; border-radius: var(--radius); margin: .5em 0; }
.preview table { border-collapse: collapse; width: 100%; margin: 1.3em 0; font-size: .95em; }
.preview th, .preview td { border: 1px solid var(--border); padding: 9px 13px; text-align: left; }
.preview th { background: var(--surface2); font-family: var(--font-display); font-weight: 600; }
.preview tr:nth-child(even) td { background: var(--surface2); }
.preview input[type="checkbox"] { margin-right: 8px; accent-color: var(--accent); }
.preview .empty-hint { color: var(--ink-faint); font-style: italic; text-align: center; margin-top: 60px; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--accent); }
.hljs-string, .hljs-attr { color: var(--accent2); }
.hljs-comment { color: var(--ink-faint); font-style: italic; }
.hljs-number, .hljs-literal { color: var(--ink-soft); }
.hljs-title, .hljs-name { color: var(--ink); font-weight: 600; }

.statusbar {
  display: flex; align-items: center; gap: 18px; padding: 5px 18px;
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-faint); flex-wrap: wrap;
}
.statusbar .save-state { display: flex; align-items: center; gap: 6px; }
.statusbar .save-state .ico { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.statusbar .save-state.saved .ico { background: #5b9e5b; }
.statusbar .save-state.saving .ico { background: var(--accent); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.statusbar .grow { flex: 1; }
.statusbar .version {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3px;
  color: var(--ink-faint); opacity: .85; white-space: nowrap;
}
.statusbar .version strong { color: var(--ink-soft); font-weight: 500; }
.statusbar .sel-count {
  display: none; white-space: nowrap; color: var(--accent);
  font-weight: 500; padding: 1px 9px; border-radius: 20px;
  background: var(--accent-soft); border: 1px solid var(--border);
}
.statusbar .sel-count.on { display: inline-block; }

.toast {
  position: fixed; bottom: 54px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: 24px;
  font-size: 14px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .25s; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.drop-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.drop-overlay.show { display: flex; animation: fade .15s; }
.drop-card {
  border: 2.5px dashed var(--accent); border-radius: 18px;
  background: var(--surface); padding: 48px 64px; text-align: center;
  box-shadow: var(--shadow); pointer-events: none; max-width: 90%;
}
.drop-card svg { width: 52px; height: 52px; stroke: var(--accent); fill: none; stroke-width: 1.6; margin-bottom: 14px; }
.drop-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.drop-sub { font-size: 14px; color: var(--ink-faint); margin-top: 6px; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 90; padding: 20px; }
.modal-bg.open { display: flex; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 26px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; }
.modal h3 { font-family: var(--font-display); font-size: 21px; margin-bottom: 6px; color: var(--ink); }
.modal p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.modal input[type="url"] { width: 100%; font-family: var(--font-mono); font-size: 14px; padding: 11px 13px; border: 1px solid var(--border2); border-radius: 8px; background: var(--bg); color: var(--ink); outline: none; transition: border-color .15s; }
.modal input[type="url"]:focus { border-color: var(--accent); }
.modal .row { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.modal .hint { font-size: 12px; color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }
.kbd-list { display: flex; flex-direction: column; gap: 2px; }
.kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.kbd-row:last-child { border-bottom: none; }
.kbd-row span { font-size: 14px; color: var(--ink-soft); }
.kbd-keys { display: flex; gap: 4px; }
kbd {
  font-family: var(--font-mono); font-size: 12px; background: var(--surface2);
  border: 1px solid var(--border2); border-bottom-width: 2px; border-radius: 5px;
  padding: 2px 7px; color: var(--ink); min-width: 22px; text-align: center;
}
.kbd-group-title { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-faint); margin: 16px 0 4px; }
.kbd-group-title:first-child { margin-top: 0; }
.modal-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .3px; color: var(--ink-faint); text-align: center; }

@media (max-width: 1080px) {
  .btn .label { display: none; }
  .btn { padding: 8px 10px; }
  .btn .caret { display: none; }
  .file-actions { gap: 6px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .topbar { padding: 8px 10px; gap: 7px; }
  .brand .tag { display: none; }
  .brand .mark { font-size: 19px; }
  .file-actions { display: none; }   
  #moreWrap { display: block; }
  .seg button { padding: 6px 11px; font-size: 13px; }
  .preview { padding: 28px 22px 80px; }
  #editor { padding: 20px 18px 60px; }
  
  .filename-wrap { order: 10; flex-basis: 100%; min-width: 0; }
  .filename { max-width: none; }
  
  .main[data-mode="split"] .pane.preview-pane,
  .main[data-mode="split"] .divider { display: none; }
  .main[data-mode="split"] .pane.editor-pane { flex: 1 1 auto; }
  .statusbar { gap: 10px; font-size: 11px; }
  
  .outline {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
    box-shadow: 0 0 40px rgba(0,0,0,.3); width: 78%; max-width: 320px;
    transform: translateX(0); transition: transform .25s ease, width 0s;
  }
  .outline.collapsed { width: 78%; max-width: 320px; transform: translateX(-105%); opacity: 1; border-right: 1px solid var(--border); }
  .outline-backdrop { display: block; }
  .outline-backdrop:not(.show) { pointer-events: none; }
  
  .icon-btn { width: 38px; height: 38px; }
  .menu {
    position: fixed; top: calc(var(--topbar-h, 56px) + 8px); right: 10px; left: auto;
    min-width: 0; width: max-content;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - var(--topbar-h, 56px) - 24px);
  }
  .menu-item { padding: 11px 10px; font-size: 15px; }
  .menu-item span { min-width: 0; }
  .case-menu {
    top: calc(var(--toolbar-bottom, 104px) + 6px); left: 10px; right: 10px;
    width: auto; max-width: none;
  }
  .tool { min-width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .brand .mark { font-size: 17px; }
  .topbar { gap: 5px; }
  .seg button { padding: 6px 8px; }
  .preview { padding: 22px 16px 70px; }
  #editor { padding: 16px 14px 60px; }
}

@media print {
  @page { margin: 18mm 16mm; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  .topbar, .statusbar, .pane-head, .editor-pane, .divider, .toast, .modal-bg, .toolbar, .outline, .outline-backdrop, .findbar, .preloader { display: none !important; }
  .app, .body-wrap, .main, .pane, .preview-pane, .preview-scroll {
    display: block !important; height: auto !important; max-height: none !important;
    overflow: visible !important; flex: none !important; width: auto !important;
  }
  .preview { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .preview a { color: #000; border: none; }
  .preview pre, .preview code { background: #f3f3f3 !important; color: #000 !important; }
  .preview h2 { border-color: #ccc; }
  .preview a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  * { scrollbar-width: none !important; }
  *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
}