*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f8f7f4;
  --bg2: #f0f0f0;
  --bg3: #ebebeb;
  --surface: #ffffff;
  --editor-surface: #ffffff;
  --card: #f5f5f5;
  --quote: #ededed;
  --number-card: #202020;
  --number-card-text: #ffffff;
  --text: #111111;
  --text2: #555555;
  --text3: #999999;
  --border: rgba(0,0,0,0.11);
  --border2: rgba(0,0,0,0.20);
  --accent: #1d6eed;
  --accent-fg: #ffffff;
  --danger: #dc2626;
  --save-col: #16a34a;
  --hover: rgba(0,0,0,0.05);
  --radius: 7px;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-editor: var(--font-sans);
  --size-editor: 16px;
  --weight-editor: 400;
  --tab-width: 210px;
  --toc-width: 250px;
  --preview-pad-left: 10px;
  --mobile-toc-height: 128px;
  --keyboard-inset: 0px;
  --visual-viewport-top: 0px;
  --mobile-toolbar-height: 34px;
  --mobile-active-toolbar-height: 0px;
  --mobile-tab-height: 27px;
}
body.dark {
  --bg: #181818;
  --bg2: #181818;
  --bg3: #242424;
  --surface: #212121;
  --editor-surface: #212121;
  --card: #2c2c2c;
  --quote: #303030;
  --number-card: #111111;
  --number-card-text: #ffffff;
  --text: #ffffff;
  --text2: #aaaaaa;
  --text3: #777777;
  --border: rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.18);
  --hover: rgba(255,255,255,0.06);
}
body.login-active {
  --bg: #181818;
  --bg2: #181818;
  --bg3: #242424;
  --surface: #212121;
  --editor-surface: #212121;
  --card: #2c2c2c;
  --quote: #303030;
  --number-card: #111111;
  --number-card-text: #ffffff;
  --text: #ffffff;
  --text2: #aaaaaa;
  --text3: #777777;
  --border: rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.18);
  --hover: rgba(255,255,255,0.06);
}
html, body {
  height: 100%; overflow: hidden;
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text); font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
::-webkit-scrollbar { width: 5px; height: 5px; cursor: pointer; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #9F9F9F; border-radius: 3px; cursor: pointer; }
::-webkit-scrollbar-thumb:hover { background: #D1D1D1; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: fixed;
  background: #1a1a1a; color: #fff;
  font-size: 11px; white-space: nowrap;
  padding: 4px 9px; border-radius: 4px;
  pointer-events: none; opacity: 0;
  transition: opacity 0.15s;
  transition-delay: 0s;
  z-index: 9999;
}
body.dark [data-tip]::after { background: #e0e0e0; color: #111; }
[data-tip]:hover::after { opacity: 1; transition-delay: 2s; }
[data-tip].tip-hide::after { opacity: 0 !important; }
#app { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#toolbar-wrapper {
  flex-shrink: 0; overflow: hidden; max-height: 0;
  transition: max-height 0.22s ease;
  background: var(--bg2); border-bottom: 1px solid var(--border); z-index: 9;
}
#toolbar-wrapper.open { max-height: 120px; }
#toolbar {
  padding: 4px 5px;
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
}
.tb-sep { width: 3px; height: 22px; background: transparent; margin: 0; flex-shrink: 0; }
.tb-btn, .act-btn, .weight-btn, .m-btn, .tree-footer-btn, .nf-type-btn {
  font-family: inherit;
}
.tb-btn, .act-btn, #tb-toggle, .weight-btn {
  height: 28px; min-width: 28px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: none; border-radius: 5px;
  padding: 0 6px; cursor: pointer; color: var(--text3);
  font-size: 15px; transition: background 0.15s, color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.tb-btn:hover, .act-btn:hover, #tb-toggle:hover, .weight-btn:hover,
.tb-btn:focus-visible, .act-btn:focus-visible, #tb-toggle:focus-visible, .weight-btn:focus-visible {
  background: var(--hover); color: var(--text); outline: none;
}
.tb-btn:disabled, .act-btn:disabled, .weight-btn:disabled, .tree-footer-btn:disabled, .nf-type-btn:disabled {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.icon-svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  color: currentColor;
}
#tb-toggle .icon-svg { width: 19px; height: 19px; }
#panel-btn .icon-svg, #settings-btn .icon-svg { width: 20px; height: 20px; }
.icon-svg path:not([fill]),
.icon-svg circle:not([fill]),
.icon-svg rect:not([fill]),
.icon-svg polygon:not([fill]) {
  fill: currentColor;
}
.icon-svg[fill="#000000"], .icon-svg[fill="#000"], .icon-svg[fill="#0F0F0F"], .icon-svg[fill="#0f0f0f"],
.icon-svg[fill="#212121"], .icon-svg[fill="#030303"], .icon-svg[fill="#0F1729"], .icon-svg[fill="#0f1729"], .icon-svg[fill="black"],
.icon-svg [fill="#000000"], .icon-svg [fill="#000"], .icon-svg [fill="#0F0F0F"], .icon-svg [fill="#0f0f0f"],
.icon-svg [fill="#212121"], .icon-svg [fill="#030303"], .icon-svg [fill="#0F1729"], .icon-svg [fill="#0f1729"], .icon-svg [fill="black"],
.icon-svg [style*="fill:#"], .icon-svg [style*="fill: #"] {
  fill: currentColor !important;
}
.icon-svg [fill="none"], .icon-svg .cls-1 {
  fill: none !important;
}
.icon-svg[stroke="#000000"], .icon-svg[stroke="#000"], .icon-svg[stroke="black"],
.icon-svg [stroke="#000000"], .icon-svg [stroke="#000"], .icon-svg [stroke="black"],
.icon-svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}
.icon-svg [stroke]:not([fill]) {
  fill: none !important;
}
.tab-rename .icon-svg, .tab-rename .icon-svg path { fill: currentColor !important; color: currentColor; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.history-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#toolbar-tools-slot { display: inline-flex; align-items: center; margin-left: 0; }
#mobile-more-wrap { display: none; }
#mobile-more-menu { display: none; }
#tb-toggle {
  flex-shrink: 0; user-select: none; font-weight: 600; letter-spacing: 0.03em;
  margin-left: auto; position: sticky; right: 2px; z-index: 3;
  box-shadow: -6px 0 10px var(--bg2);
}
#tb-toggle.in-toolbar { position: static !important; right: auto !important; margin-left: 0 !important; box-shadow: none !important; }
#panels-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#resizer { flex-shrink: 0; height: 0; cursor: ns-resize; background: transparent; transition: background 0.15s; display: none; }
#resizer:hover, #resizer.drag { background: var(--accent); }
.panel { display: flex; flex-direction: column; overflow: hidden; min-height: 0; flex: 1; background: var(--surface); }
.tab-bar {
  flex-shrink: 0; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--border); padding: 0 4px; gap: 2px;
  overflow-x: auto; overflow-y: hidden; min-height: 27px;
  background: var(--bg2);
}
.mobile-panel-num {
  display: none;
}
.tab-bar::-webkit-scrollbar { height: 3px; }
.tab-add {
  flex-shrink: 0; width: 26px; height: 24px; background: transparent;
  border: none; border-radius: 4px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s, opacity 0.1s; font-family: inherit;
}
.tab-add:hover { background: var(--hover); color: var(--text); }
.tab {
  display: flex; align-items: center; gap: 3px;
  background: transparent; border: 1px solid var(--border);
  border-bottom: none; border-radius: 4px 4px 0 0; padding: 1px 4px; cursor: pointer;
  width: var(--tab-width); min-width: var(--tab-width); max-width: var(--tab-width); flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s; position: relative; height: 24px; overflow: hidden;
}
.tab.active {
  background: var(--editor-surface);
  margin-bottom: -1px;
  height: 27px;
  z-index: 1;
}
.tab-label-view { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.tab-actions { display: none; align-items: center; justify-content: space-between; gap: 0; width: 100%; min-width: 0; }
.tab.active:hover .tab-label-view { display: none; }
.tab.active:hover .tab-actions { display: flex; }
.tab.actions-open .tab-label-view { display: none; }
.tab.actions-open .tab-actions { display: flex; }
.tab-name { font-size: 12px !important; font-weight: 400; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tab.active .tab-name { color: var(--text2); }
.tab.deleted .tab-name { color: var(--danger); text-decoration: line-through; }
.tab-dirty-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--save-col); flex-shrink: 0; }
.tab.dirty .tab-dirty-dot { display: inline-block; }
.tab-save, .tab-close, .tab-mode, .tab-toc, .tab-rename, .tab-share {
  flex: 1 1 0; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--text3); padding: 0 2px; border-radius: 3px;
  line-height: 1; font-family: inherit; min-width: 0; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab-actions .icon-svg { width: 14px; height: 14px; }
.tab-save { color: var(--text3); }
.tab-save:hover { color: var(--text); background: var(--hover); }
.tab-close:hover { color: var(--text); background: var(--hover); }
.tab-mode:hover, .tab-mode.on, .tab-toc:hover, .tab-toc.on, .tab-rename:hover, .tab-share:hover { color: var(--text); background: var(--hover); }
.tab-rename, .tab-share { color: var(--text3); }
.tab-toc:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.panel-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; position: relative; }
.panel-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--text3); font-size: 14px; text-align: center; padding: 24px; line-height: 1.6;
}
.panel-empty .ei { font-size: 30px; opacity: 0.25; }
.panel-ta {
  flex: 1; width: 100%; padding: 16px 20px;
  font-family: var(--font-editor); font-size: var(--size-editor); font-weight: var(--weight-editor);
  line-height: 1.75; color: var(--text); background: var(--editor-surface); caret-color: var(--text);
  border: none; outline: none; resize: none; overflow-y: auto; overflow-x: hidden; display: none;
}
.panel-ta::placeholder { color: var(--text3); }
.panel-prev {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 26px 18px var(--preview-pad-left);
  display: none; font-family: var(--font-editor); font-size: var(--size-editor); font-weight: var(--weight-editor);
  background: var(--editor-surface); color: var(--text); line-height: 1.75; outline: none; cursor: text; position: relative;
}
.panel-prev.vis { display: block; }
.panel-prev:empty::before { content: 'Start typing...'; color: var(--text3); }
.panel-prev.cm-host {
  padding: 0;
  overflow: hidden;
}
.panel-prev.cm-host:empty::before { content: none; }
.panel-prev.cm-host .cm-editor {
  height: 100%;
  font-family: var(--font-editor);
  font-size: var(--size-editor);
  font-weight: var(--weight-editor);
  line-height: 1.5;
  color: var(--text);
  background: var(--editor-surface);
}
.panel-prev.cm-host .cm-focused { outline: none; }
.panel-prev.cm-host .cm-scroller {
  font-family: var(--font-editor);
  line-height: 1.5;
  overflow: auto;
}
.panel-prev.cm-host .cm-content {
  min-height: 100%;
  padding: 18px 26px 18px var(--preview-pad-left);
  caret-color: var(--text);
  --cm-list-marker-gap: 0.28em;
  --cm-list-number-pad: 0.34em;
  --cm-list-number-min-width: 1.06em;
  --cm-list-bullet-width: 0.56em;
  --cm-list-text-offset: calc(var(--cm-list-number-min-width) + var(--cm-list-marker-gap));
  --cm-list-marker-offset: 0px;
  --cm-list-marker-width: var(--cm-list-number-min-width);
}
.panel-prev.cm-host .cm-line {
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-left: 0;
  padding-right: 0;
}
.panel-prev.cm-host .cm-cursor { border-left-color: var(--text); }
.panel-prev.cm-host .cm-selectionBackground,
.panel-prev.cm-host .cm-focused .cm-selectionBackground {
  background: rgba(29, 110, 237, 0.28);
}
.panel-prev.cm-host .cm-placeholder { color: var(--text3); }
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-line-break-spacer {
  height: 0.08em;
  line-height: 0;
  pointer-events: none;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-heading-line {
  font-weight: 700;
  line-height: 1.25;
  padding-top: 0.82em;
  padding-bottom: 0.22em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-line { font-size: 1.72em; }
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h2-line { font-size: 1.34em; }
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h3-line { font-size: 1.13em; }
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-card-line,
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-card-line {
  background: var(--card);
  box-shadow: -13px 0 0 var(--card), 13px 0 0 var(--card);
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-card-title,
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-doc-card-title,
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-card-line:first-child {
  padding-top: 0.55em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-card-title {
  margin-top: 0.72em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-card-desc {
  padding-bottom: 0;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-doc-card-line {
  padding-bottom: 0.18em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-h1-card-last {
  padding-bottom: 0.55em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-list-line,
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-number-line,
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-numbered-heading-line {
  position: relative;
  padding-left: var(--cm-list-text-offset);
  text-indent: 0;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-list-follow-line {
  padding-left: var(--cm-list-text-offset);
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-hr-line {
  position: relative;
  min-height: 1.5em;
  color: transparent;
  font-family: var(--font-mono);
  opacity: 1;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-hr-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--border2);
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-hr-hidden {
  min-height: 0;
  height: 0;
  line-height: 0;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-hr-hidden::before {
  content: none;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-txt-heading-follow-line {
  color: var(--text);
}
.panel-prev.cm-host .cm-txt-marker,
.panel-prev.cm-host .cm-txt-format-marker {
  color: var(--text3);
  opacity: 0.72;
}
.panel-prev.cm-host .cm-highlightSpace,
.panel-prev.cm-host .cm-highlightTab {
  background-image: none !important;
}
.panel-prev.cm-host .cm-txt-hidden-syntax {
  display: inline-block;
  width: 0;
  max-width: 0;
  overflow: hidden;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  white-space: pre;
  text-indent: 0;
  vertical-align: baseline;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line[data-list-label]::before {
  content: attr(data-list-label);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-indent: 0;
  vertical-align: baseline;
  line-height: 1.5;
  height: 1.5em;
  border-radius: 4px;
  background: var(--card);
  color: var(--text2);
  width: var(--cm-list-marker-width);
  min-width: 0;
  max-width: var(--cm-list-marker-width);
  text-align: center;
  opacity: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line[data-list-label]::before {
  left: var(--cm-list-marker-offset);
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line.cm-txt-bullet-marker-line[data-list-label]::before {
  background: transparent;
  color: var(--text2);
  font-weight: 700;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line.cm-txt-heading-line[data-list-label]::before {
  top: 0.82em;
  height: 1.25em;
  line-height: 1.25;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line.cm-txt-h1-card-title[data-list-label]::before {
  top: 0.55em;
}
.panel-prev.cm-host .cm-txt-visual-mode .cm-line.cm-txt-h1-line.cm-txt-number-marker-line[data-list-label]::before {
  background: var(--number-card);
  color: var(--number-card-text);
}
.panel-prev.cm-host .cm-txt-strong { font-weight: 700; }
.panel-prev.cm-host .cm-txt-emphasis { font-style: italic; }
.panel-prev.cm-host .cm-txt-strike { text-decoration: line-through; }
.panel-prev.cm-host .cm-txt-quote-token {
  background: var(--quote);
  border-radius: 5px;
  padding: 0 0.58em;
  box-shadow: 0 0 0 1px var(--border);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.panel-prev.cm-host .cm-txt-link-text { color: var(--accent); text-decoration: underline; }
.panel-prev.cm-host .cm-txt-image-label { color: var(--accent); font-weight: 700; }
.panel-prev.cm-host .cm-txt-url { color: var(--text2); }
.panel-prev [data-source-line] { cursor: text; }
.panel.visual-split .panel-ta {
  display: block;
  flex: 0 0 46%;
  min-height: 130px;
  border-bottom: 1px solid var(--border);
}
.panel.visual-split .panel-prev {
  flex: 1 1 54%;
  min-height: 120px;
  border-top: 1px solid var(--border);
}
.panel-prev .v-line {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  min-height: 1.75em;
  margin: 0.08em 0;
  color: var(--text);
}
.panel-prev .v-text {
  min-width: 0;
  flex: 1;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panel-prev .v-marker {
  flex: 0 0 auto;
  min-width: 1.35em;
  height: 1.75em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  user-select: none;
  -webkit-user-select: none;
}
.panel-prev .v-blank { min-height: 1.75em; }
.panel-prev .v-p-line { margin: 0.22em 0; }
.panel-prev .v-heading { margin: 0.82em 0 0.22em; font-weight: 700; line-height: 1.25; }
.panel-prev .v-h1 { font-size: 1.72em; }
.panel-prev .v-h2 { font-size: 1.34em; }
.panel-prev .v-h3 { font-size: 1.13em; }
.panel-prev .v-card-line {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 13px;
  margin: 0.25em -13px 0.25em calc(-1 * min(var(--preview-pad-left), 13px));
}
.panel-prev .v-ul-line { padding-left: 0.2em; }
.panel-prev .v-ol-line .v-marker, .panel-prev .v-numbered-heading .v-marker { align-items: flex-start; padding-top: 0.22em; }
.panel-prev .v-hr {
  color: var(--text3);
  font-family: var(--font-mono);
  opacity: 0.8;
}
.panel-prev h1, .panel-prev h2, .panel-prev h3 { font-weight: 700; line-height: 1.25; margin: 1.15em 0 0.45em; color: var(--text); }
.panel-prev h1 { font-size: 1.72em; }
.panel-prev .h1-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 26px 16px var(--preview-pad-left);
  margin: 1.65em -26px 0.8em calc(-1 * var(--preview-pad-left));
}
.panel-prev > .h1-card:first-child { margin-top: 0.55em; }
.panel-prev .h1-card h1 {
  background: transparent; border: none; padding: 0; margin: 0;
}
.panel-prev .h1-desc {
  margin-top: 0.45em; color: var(--text); font-weight: var(--weight-editor);
  line-height: 1.75;
}
.panel-prev .h1-desc-line, .panel-prev .heading-follow-line, .panel-prev .doc-card-line, .panel-prev .doc-card-title {
  min-height: 1.75em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panel-prev h2 { font-size: 1.34em; }
.panel-prev h3 { font-size: 1.13em; }
.panel-prev .heading-group { margin: 1.35em 0 0.45em; }
.panel-prev .heading-group h2, .panel-prev .heading-group h3 { margin: 0 0 0.16em; }
.panel-prev .numbered-heading-group {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.24em; align-items: start;
}
.panel-prev .numbered-heading-group .num-mark {
  grid-column: 1; grid-row: 1; align-self: start;
  height: auto; padding-top: 0.16em; transform: none; align-items: center;
}
.panel-prev .h1-card.numbered-heading-group > .num-mark { padding-top: 0.2em; }
.panel-prev .h1-card.numbered-heading-group .num-chip { font-size: 1.3em; font-weight: 700; background: var(--number-card); color: var(--number-card-text); }
.panel-prev .numbered-heading-group .num-heading-text { grid-column: 2; min-width: 0; }
.panel-prev .numbered-heading-group .heading-follow, .panel-prev .numbered-heading-group .h1-desc { grid-column: 2; }
.panel-prev .heading-follow {
  margin: 0;
  color: var(--text);
  line-height: 1.75;
}
.panel-prev .heading-follow.level-2, .panel-prev .heading-follow.level-3 { padding-left: 0; }
.panel-prev .heading-follow-line.follow-list-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.45em;
  align-items: start;
}
.panel-prev .heading-follow-line.follow-list-line .num-mark {
  grid-column: 1;
  min-width: 1.35em;
  padding-top: 0.34em;
}
.panel-prev .follow-line-text {
  grid-column: 2;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.panel-prev p { margin: 0.65em 0; color: var(--text); line-height: 1.75; }
.panel-prev ul, .panel-prev ol { margin: 0.55em 0 0.55em 1.45em; color: var(--text); line-height: 1.75; }
.panel-prev li { margin: 0.25em 0; padding-left: 0.15em; }
.panel-prev .li-cont { margin: 0.15em 0 0.15em 0; }
.panel-prev .num-block {
  display: flex; align-items: flex-start; gap: 0.45em;
  margin: 0.58em 0; color: var(--text);
}
.panel-prev .num-mark {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-width: 1.35em; height: 1.75em; line-height: 1; padding-top: 0;
}
.panel-prev .num-chip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1em; min-height: 1em; padding: 0.12em 0.24em;
  background: var(--card); border: none; border-radius: 4px;
  color: var(--text2); font-weight: 600; line-height: 1;
}
.panel-prev .num-value {
  display: inline-flex; align-items: flex-start; justify-content: flex-start;
  min-height: 1em; line-height: 1em;
}
.panel-prev .num-body { min-width: 0; flex: 1; line-height: 1.75; }
.panel-prev .num-main { min-height: 1.75em; }
.panel-prev .num-cont { margin: 0.15em 0; }
.panel-prev .numbered-heading {
  display: flex; align-items: flex-start; gap: 0.24em;
}
.panel-prev h1 .num-mark, .panel-prev h2 .num-mark, .panel-prev h3 .num-mark { padding-top: 0; margin-right: 0; }
.panel-prev h2 .num-mark, .panel-prev h3 .num-mark { transform: none; }
.panel-prev h1 .num-chip, .panel-prev h2 .num-chip, .panel-prev h3 .num-chip { vertical-align: top; }
.panel-prev .num-heading-text { min-width: 0; }
.panel-prev .txt-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  padding: 10px 13px; margin: 0.75em 0; color: var(--text);
}
.panel-prev > .txt-card {
  padding: 10px 26px 10px var(--preview-pad-left);
  margin: 0.75em -26px 0.75em calc(-1 * var(--preview-pad-left));
}
.panel-prev > .doc-card {
  padding: 12px 26px 18px var(--preview-pad-left);
  margin: 0 -26px 1.45em calc(-1 * var(--preview-pad-left));
}
.panel-prev .doc-card-title, .panel-prev .doc-card-line {
  font-size: 1em;
  font-weight: var(--weight-editor);
  line-height: 1.75;
}
.panel-prev .doc-card-desc {
  margin-top: 0.18em;
}
.panel-prev .txt-quote {
  display: inline-block; font-family: var(--font-mono); font-size: 0.9em; background: var(--quote);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; margin: 0 2px; color: var(--text);
}
.panel-prev hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.panel-prev a { color: var(--accent); text-decoration: underline; }
.panel-prev strong { font-weight: 700; }
.panel-prev em { font-style: italic; }
.panel-prev img { display: block; max-width: 100%; border-radius: 7px; margin: 0.75em 0; }
.panel-prev del { text-decoration: line-through; }
.panel-prev .blocked-link, .panel-prev .blocked-image { color: var(--danger); background: var(--bg2); border: 1px dashed var(--border2); border-radius: 4px; padding: 1px 6px; }
.panel-prev .visual-space {
  display: inline-block;
  min-width: 0.48em;
  min-height: 1em;
  background: var(--hover);
  border-bottom: 1px solid var(--text3);
  opacity: 0.55;
  vertical-align: baseline;
}
.panel-prev .visual-tab-space {
  min-width: 1.9em;
}
.panel.space-pending::after {
  content: none;
}
.panel-prev .spell-word {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.panel.toc-open .panel-prev, .panel.toc-open .panel-ta {
  width: calc(100% - var(--toc-width, 250px));
  padding-right: 20px;
}
.panel.toc-open .panel-prev.cm-host {
  padding-right: 0;
}
.panel.toc-open .panel-prev.cm-host .cm-content {
  padding-right: 20px;
}
.toc-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--toc-width, 250px);
  min-width: 150px; max-width: 250px;
  display: none; background: var(--surface);
  border-left: 1px solid var(--border2);
  z-index: 5; overflow: hidden; position: absolute; pointer-events: auto;
}
.panel.toc-open .toc-panel { display: flex; }
.toc-close {
  position: absolute; top: 5px; right: 7px; z-index: 7;
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border: none; border-radius: 4px;
  background: var(--surface); color: var(--text3); cursor: pointer;
  font-size: 15px; line-height: 1; opacity: 0; pointer-events: none;
}
.toc-panel:hover .toc-close { opacity: 1; pointer-events: auto; }
.toc-close:hover { color: var(--danger); background: rgba(220,38,38,0.1); }
.toc-list {
  flex: 1; overflow-y: auto; padding: 8px 7px 8px 1px; min-width: 0;
  background: var(--surface); pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.toc-list::-webkit-scrollbar { width: 3px; }
.toc-list::-webkit-scrollbar-track { background: transparent; }
.toc-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.toc-panel:hover .toc-list { scrollbar-color: #9F9F9F transparent; }
.toc-panel:hover .toc-list::-webkit-scrollbar-thumb { background: #9F9F9F; }
.toc-panel:hover .toc-list::-webkit-scrollbar-thumb:hover { background: #D1D1D1; }
.toc-resizer { position: absolute; top: 0; left: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 8; background: transparent; pointer-events: auto; }
.toc-resizer:hover { background: var(--hover); }
.toc-title { font-size: 12px; font-weight: 700; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.toc-item {
  display: block; width: 100%; background: transparent; border: none; color: var(--text2);
  text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1.35;
  padding: 5px 5px 5px 2px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toc-item:hover, .toc-item.active { background: var(--hover); color: var(--text); }
.toc-item.level-1 { font-weight: 700; padding-left: 2px; }
.toc-item.level-2 { padding-left: 10px; }
.toc-item.level-3 { padding-left: 18px; font-size: 12px; }

@media (max-width: 700px) {
  [data-tip]::after {
    display: none !important;
    content: none !important;
  }
  #toolbar-wrapper.open {
    position: fixed;
    top: calc(var(--visual-viewport-top) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    max-height: var(--mobile-toolbar-height);
    height: var(--mobile-toolbar-height);
    overflow: visible;
    z-index: 4000;
    box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(0,0,0,0.12);
  }
  body.toolbar-open #panels-area { padding-top: var(--mobile-toolbar-height); }
  body.toolbar-open { --mobile-active-toolbar-height: var(--mobile-toolbar-height); }
  #toolbar {
    height: var(--mobile-toolbar-height);
    padding: 3px 4px;
    gap: 1px;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: visible;
  }
  #toolbar > :not(.tb-right) { order: 1; }
  .tb-right {
    order: 2;
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 1px;
    flex-shrink: 0;
  }
  .tb-sep { display: none; }
  .tb-btn, .act-btn, #tb-toggle, .weight-btn {
    height: 27px; min-width: 27px; padding: 0 3px; gap: 2px;
    border-radius: 4px; font-size: 13px;
  }
  .icon-svg { width: 20px; height: 20px; }
  #tb-toggle .icon-svg, #panel-btn .icon-svg, #settings-btn .icon-svg { width: 21px; height: 21px; }
  #toolbar [data-fmt="italic"],
  #toolbar [data-fmt="strikethrough"],
  #toolbar [data-fmt="quote"],
  #toolbar [data-fmt="card"],
  #toolbar [data-fmt="hr"],
  #toolbar [data-fmt="link"],
  #toolbar [data-fmt="image"],
  #panel-btn {
    display: none;
  }
  #mobile-more-wrap {
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
  }
  #mobile-more-menu {
    position: fixed;
    top: calc(var(--visual-viewport-top) + env(safe-area-inset-top) + var(--mobile-toolbar-height) + 5px);
    left: 4px;
    right: 4px;
    display: none;
    gap: 2px;
    padding: 4px;
    justify-content: flex-start;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.24);
    z-index: 4100;
  }
  #mobile-more-wrap.open #mobile-more-menu {
    display: flex;
  }
  #mobile-more-menu .tb-btn {
    color: var(--text3);
  }
  #mobile-more-btn .icon-svg {
    width: 19px;
    height: 19px;
  }
  #mobile-more-menu [data-mobile-fmt="link"] .icon-svg,
  #mobile-more-menu [data-mobile-fmt="image"] .icon-svg {
    width: 20px;
    height: 20px;
    display: block;
  }
  .mobile-panel-num {
    display: none;
    flex: 0 0 auto;
    min-width: 10px;
    height: 16px;
    margin: 4px 3px 3px 0;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }
body.two-panels.mobile-keyboard .panel.mobile-active-panel .mobile-panel-num {
    display: inline-flex;
  }
  input,
  select {
    font-size: 16px !important;
  }
  .panel-ta,
  .panel-prev {
    font-size: max(16px, var(--size-editor));
    padding-bottom: calc(18px + var(--keyboard-inset));
    scroll-padding-bottom: calc(24px + var(--keyboard-inset));
    touch-action: auto;
    -webkit-user-select: text;
    user-select: text;
    overscroll-behavior: contain;
    overflow-anchor: none;
    -webkit-overflow-scrolling: auto;
  }
  .panel-prev.cm-host {
    padding-bottom: 0;
  }
  .panel-prev.cm-host .cm-editor {
    font-size: max(16px, var(--size-editor));
  }
  .panel-prev.cm-host .cm-content {
    padding-bottom: calc(18px + var(--keyboard-inset));
    scroll-padding-bottom: calc(24px + var(--keyboard-inset));
  }
  .panel-prev,
  .panel-prev * {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
  body.mobile-keyboard .panel.mobile-active-panel {
    overflow: visible;
  }
  body.mobile-keyboard #panels-area .panel:not(.mobile-active-panel) {
    display: none !important;
  }
  body.mobile-keyboard .panel.mobile-active-panel .tab-bar {
    position: fixed;
    top: calc(var(--visual-viewport-top) + var(--mobile-active-toolbar-height) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: var(--mobile-tab-height);
    z-index: 3999;
    box-shadow: 0 1px 0 var(--border), 0 5px 14px rgba(0,0,0,0.10);
  }
  body.mobile-keyboard .panel.mobile-active-panel .panel-body {
    position: fixed;
    top: calc(var(--visual-viewport-top) + var(--mobile-active-toolbar-height) + var(--mobile-tab-height) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: var(--keyboard-inset);
    z-index: 3998;
    background: var(--editor-surface);
  }
  .tab.active:hover .tab-label-view { display: flex; }
  .tab.active:hover .tab-actions { display: none; }
  .tab.actions-open .tab-label-view { display: none !important; }
  .tab.actions-open .tab-actions { display: flex !important; }
  .panel.toc-open .panel-prev, .panel.toc-open .panel-ta {
    width: 100%;
    padding-right: 20px;
    padding-top: calc(var(--mobile-toc-height) + 18px);
  }
  .panel.toc-open .panel-prev.cm-host {
    padding-top: 0;
    padding-right: 0;
  }
  .panel.toc-open .panel-prev.cm-host .cm-content {
    padding-top: calc(var(--mobile-toc-height) + 18px);
    padding-right: 20px;
  }
  .panel.toc-open .panel-prev.cm-host .cm-scroller {
    scroll-padding-top: calc(var(--mobile-toc-height) + 14px);
  }
  .toc-panel {
    top: 0; left: 0; right: 0; bottom: auto; width: 100%; max-width: none; min-width: 0;
    height: var(--mobile-toc-height); border-left: none; border-bottom: 1px solid var(--border2);
  }
  .toc-list { padding: 7px 26px 7px 4px; }
  .toc-resizer { display: none; }
}

#tree-pop {
  position: fixed; z-index: 2000; background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  width: 300px; max-height: 460px; display: none; flex-direction: column; overflow: hidden;
}
#tree-pop.open { display: flex; }
#tree-hdr { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#tree-search { flex: 1; background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px; padding: 6px 8px; font-size: 14px; color: var(--text); outline: none; font-family: inherit; }
#tree-search::placeholder { color: var(--text3); }
#tree-x { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text3); line-height: 1; padding: 2px 4px; }
#tree-x:hover { color: var(--danger); }
#tree-body { flex: 1; overflow-y: auto; padding: 4px 0; }
#tree-footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 8px; background: var(--bg2); }
.tree-footer-btns, .new-file-actions { display: flex; gap: 8px; }
.tree-footer-btn, .nf-type-btn { flex: 1; padding: 7px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; cursor: pointer; font-size: 13px; }
.tree-footer-btn:hover, .nf-type-btn:hover { border-color: var(--text3); }
#new-file-form { display: flex; flex-direction: column; gap: 8px; }
#new-file-name, #new-file-folder, #new-file-folder-custom { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 9px; outline: none; font-family: inherit; font-size: 14px; }
#new-file-name::placeholder { color: var(--text3); }
.tf-folder { padding: 6px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.tf-file { padding: 6px 10px 6px 20px; font-size: 14px; color: var(--text2); cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 4px; margin: 1px 4px; transition: background 0.1s; white-space: nowrap; overflow: hidden; }
.tf-file:hover { background: var(--hover); color: var(--text); }
.tf-file.root-f { padding-left: 10px; }
.tf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.tree-no-folder { padding: 14px; text-align: center; color: var(--text3); font-size: 13px; line-height: 1.5; }
#statusbar { display: none !important; }
#modal-bg, #settings-modal-bg, #folder-picker-modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 5000;
  align-items: center; justify-content: center; padding: 18px;
}
#modal-bg.open, #settings-modal-bg.open, #folder-picker-modal-bg.open { display: flex; }
.modal-box {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
  padding: 22px 24px; max-width: 420px; width: min(92vw, 420px);
}
.modal-box h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
#settings-box { width: min(96vw, 840px); max-width: 840px; max-height: min(88vh, 780px); overflow-y: auto; }
#folder-picker-box { width: min(92vw, 440px); }
.modal-box p { font-size: 13px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
.m-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.m-btn { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); }
.m-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.m-btn:hover { opacity: 0.84; }
.act-btn.danger { color: var(--danger); border-color: rgba(220,38,38,0.45); }
.settings-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 4px 0 12px; overflow-x: auto; }
.settings-tab { background: transparent; color: var(--text2); border: none; border-bottom: 2px solid transparent; padding: 8px 10px; cursor: pointer; font: inherit; }
.settings-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.settings-panel { display: none !important; }
.settings-panel.active { display: grid !important; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 18px; }
#settings-files.active { display: block !important; }
.setting-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.setting-row label { color: var(--text2); font-size: 13px; }
.setting-row select, .setting-row input[type=number] { width: 100%; background: var(--bg2); border: 1px solid var(--border2); color: var(--text); border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 14px; }
.setting-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-advanced { border-top: 1px solid var(--border); padding-top: 8px; }
.settings-advanced summary { cursor: pointer; color: var(--text); font-weight: 700; }
.settings-advanced .settings-grid { margin-bottom: 0; }
.account-line { align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
.icon-only-btn { width: 28px; padding: 0; flex: 0 0 auto; }
#theme-glyph { display: inline-flex; align-items: center; justify-content: center; }
#theme-glyph .icon-svg, .settings-panel .icon-only-btn .icon-svg { width: 18px; height: 18px; }
.check-row { display: inline-flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; cursor: pointer; }
.check-row input { accent-color: var(--accent); }
.counter-grid { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 10px 0 0; border-top: 1px solid var(--border); }
.counter-label { color: var(--text2); }
.counter-value { color: var(--text); font-weight: 600; }
#counter-scope { color: var(--text2); font-size: 13px; line-height: 1.45; }
.fm-shell {
  height: min(64vh, 560px); min-height: 450px; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column; min-width: 0; background: var(--surface);
}
.fm-toolbar {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px;
  border-bottom: 1px solid var(--border); background: var(--bg2);
}
.fm-toolbar .act-btn {
  min-width: 0; width: 100%; min-height: 34px; justify-content: center; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; touch-action: manipulation;
}
.fm-breadcrumbs {
  min-height: 39px; display: flex; gap: 4px; align-items: center; overflow-x: auto; padding: 7px 8px;
  border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; scrollbar-width: thin;
}
.fm-crumb {
  flex: 0 0 auto; border: 1px solid transparent; background: transparent; color: var(--text2);
  border-radius: 5px; padding: 5px 7px; cursor: pointer; font: inherit; font-size: 12px; touch-action: manipulation;
}
.fm-crumb:hover, .fm-crumb.active { color: var(--text); background: var(--hover); border-color: var(--border); }
.fm-crumb-sep { flex: 0 0 auto; color: var(--text3); font-size: 12px; }
.fm-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; }
.fm-tree { min-height: 0; border-right: 1px solid var(--border); overflow-y: auto; padding: 6px; background: var(--bg); }
.fm-list { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px; min-width: 0; background: var(--surface); }
.fm-tree-row {
  width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent; color: var(--text2); border-radius: 6px; min-height: 34px;
  padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; touch-action: manipulation;
}
.folder-picker-row {
  width: 100%; border: none; background: transparent; color: var(--text2); border-radius: 4px; min-height: 30px;
  padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; touch-action: manipulation;
}
.fm-tree-row:hover, .folder-picker-row:hover { background: var(--hover); color: var(--text); }
.fm-tree-row.active, .folder-picker-row.active {
  background: rgba(29, 110, 237, 0.12); border-color: rgba(29, 110, 237, 0.34); color: var(--text);
}
.fm-tree-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--text3); min-width: 0; }
.fm-tree-row.active .fm-tree-icon, .fm-tree-row:hover .fm-tree-icon { color: var(--text); }
.fm-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-picker-row:disabled { cursor: not-allowed; opacity: 0.4; background: transparent; }
.fm-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: start;
  min-height: 48px; padding: 8px; margin: 2px 0; border: 1px solid transparent; border-radius: 7px;
  cursor: pointer; color: var(--text2); min-width: 0; touch-action: manipulation;
}
.fm-row:hover { background: var(--hover); color: var(--text); }
.fm-row.selected {
  background: rgba(29, 110, 237, 0.13); border-color: rgba(29, 110, 237, 0.45);
  box-shadow: inset 3px 0 0 var(--accent); color: var(--text);
}
.fm-kind { color: var(--text3); display: inline-flex; align-items: center; justify-content: center; padding-top: 2px; }
.fm-row:hover .fm-kind, .fm-row.selected .fm-kind { color: var(--text); }
.fm-icon-svg { width: 22px; height: 22px; display: block; }
.fm-info { min-width: 0; }
.fm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fm-meta { color: var(--text3); font-size: 11px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 9px; line-height: 1.35; min-width: 0; }
.fm-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fm-open-btn {
  border: 1px solid var(--border2); background: var(--surface); color: var(--text2); border-radius: 5px;
  padding: 5px 9px; cursor: pointer; font: inherit; font-size: 12px; min-width: 56px; min-height: 30px;
  align-self: start; touch-action: manipulation;
}
.fm-open-btn:hover { color: var(--text); border-color: var(--text3); }
.fm-empty { color: var(--text3); font-size: 13px; text-align: center; padding: 28px 8px; }
.fm-status {
  flex: 0 0 auto; color: var(--text2); font-size: 12px; min-height: 31px; padding: 8px;
  border-top: 1px solid var(--border); background: var(--bg2); overflow-wrap: anywhere;
}
.folder-picker-list { max-height: min(55vh, 360px); overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; padding: 5px; margin-bottom: 8px; }
.dictionary-panel { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 230px; display: flex; flex-direction: column; }
.dictionary-head { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--bg2); color: var(--text); font-weight: 700; font-size: 13px; }
.dictionary-word-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; color: var(--text2); font-size: 13px; }
.dictionary-word-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; color: var(--text); }
.dictionary-word-row:hover { background: var(--hover); }
.dictionary-word-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dictionary-word-remove {
  width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent;
  color: var(--text3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.dictionary-word-remove:hover { color: var(--danger); background: rgba(220,38,38,0.1); }
.drive-files-panel { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 320px; display: flex; flex-direction: column; }
.drive-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); background: var(--bg2); }
.drive-panel-tab { background: transparent; border: none; color: var(--text2); padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; border-bottom: 2px solid transparent; }
.drive-panel-tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--surface); }
.drive-files-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 700; }
.drive-backup-date-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 7px 8px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.drive-date-tab { flex: 0 0 auto; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); border-radius: 4px; padding: 5px 8px; cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
.drive-date-tab.active { color: var(--text); border-color: var(--accent); }
.drive-files-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }
.drive-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px 7px 20px; margin: 1px 4px; border-radius: 4px; color: var(--text2); }
.drive-file-row:last-child { border-bottom: none; }
.drive-file-row:hover { background: var(--hover); color: var(--text); }
.drive-file-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-file-time { color: var(--text3); font-size: 12px; margin-top: 2px; }
.drive-download { color: var(--text3); text-decoration: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; }
.drive-download:hover { color: var(--text); background: var(--hover); }
.drive-download .icon-svg { width: 17px; height: 17px; }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(6px); background: #111; color: #fff; font-size: 13px; padding: 8px 15px; border-radius: 7px; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; max-width: calc(100vw - 32px); white-space: normal; text-align: center; z-index: 9998; }
body.dark #toast { background: #ddd; color: #111; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spell-menu {
  position: fixed; z-index: 9999; min-width: 170px; max-width: min(260px, calc(100vw - 16px));
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.24); padding: 5px; color: var(--text);
}
.spell-menu button {
  display: block; width: 100%; border: none; background: transparent; color: var(--text);
  text-align: left; padding: 7px 9px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spell-menu button:hover:not(:disabled) { background: var(--hover); }
.spell-menu button:disabled { color: var(--text3); cursor: default; }
.spell-menu .spell-add-word { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; color: var(--accent); }
.login-screen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)),
    #181818;
  color: #ffffff;
}
.login-box {
  width: min(92vw, 360px);
  background: #212121;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 26px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.32);
}
.login-box h1 { font-size: 22px; margin-bottom: 8px; }
.login-box p { color: #aaaaaa; line-height: 1.5; margin-bottom: 18px; }
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 6px;
  background: #1d6eed;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}
.login-button:hover { filter: brightness(1.08); }
.login-error { margin-top: 12px; color: #f87171; font-size: 13px; line-height: 1.45; }
.settings-subhead {
  color: var(--text);
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 2px;
}
.setting-value { color: var(--text2); font-size: 13px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

@media (max-width: 700px) {
  #settings-box { width: min(96vw, 520px); max-height: min(90vh, 780px); padding: 18px 16px; }
  .settings-tabs { margin-bottom: 10px; }
  .fm-shell { height: min(70vh, 620px); min-height: 0; }
  .fm-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-toolbar .act-btn { min-height: 36px; padding-left: 8px; padding-right: 8px; }
  .fm-layout { display: flex; flex-direction: column; }
  .fm-tree { flex: 0 0 136px; border-right: none; border-bottom: 1px solid var(--border); }
  .fm-list { flex: 1 1 auto; }
  .fm-row { grid-template-columns: 30px minmax(0, 1fr); min-height: 52px; align-items: start; }
  .fm-meta { gap: 1px 7px; }
  .fm-open-btn { grid-column: 2; justify-self: start; margin-top: 2px; min-height: 30px; }
  .folder-picker-list { max-height: min(58vh, 420px); }
}