#notes-page {
  max-width: 1440px; flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 3fr);
  gap: 18px; align-items: stretch; padding-bottom: 12px;
  grid-template-rows: minmax(0, 1fr); overflow: hidden;
}
#notes-page.hidden { display: none; }
#notes-page .notes-page-card { min-width: 0; box-shadow: none; }
#notes-page .notes-textarea, #notes-page .notes-select, #notes-page .notes-input { box-shadow: none !important; }
[data-theme="light"] #note-content { background: #fff; color: #334155; border-color: #cbd5e1; }
#notes-tree-panel { padding: 18px 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 8px; }
#notes-tree-panel h3 { margin: 0 8px 16px; font-size: 17px; }
#notes-tree-panel > :not(#notes-tree) { flex-shrink: 0; }
#notes-tree-panel .notes-field-label { margin: 6px 0 0; }
.notes-tree-search-row { display: flex; gap: 6px; }
#notes-page #note-tree-search-clear { flex-shrink: 0; white-space: nowrap; }
#note-tree-search { min-width: 0; }
#note-tree-search-status, #note-category-help { font-size: 12px; color: var(--text-muted); }
#notes-tree { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
#notes-tree details { margin: 8px 0; }
#notes-tree summary { cursor: pointer; padding: 8px; margin-left: calc(var(--tree-depth, 0) * 18px); overflow-wrap: anywhere; }
#notes-tree button { display: block; width: calc(100% - (var(--tree-depth, 0) + 1) * 18px); margin: 3px 0 3px calc((var(--tree-depth, 0) + 1) * 18px); text-align: left; overflow-wrap: anywhere; }
#notes-page button, #notes-page select, #notes-page input { box-shadow: none; transform: none; }
#notes-page button { border: 1px solid #cbd5e1; border-radius: 6px; padding: 7px 10px; background: #eef2f7; color: #4f6078; cursor: pointer; }
#notes-page button:hover { background: #dfe7f0; }
#notes-tree button[aria-current="page"] { background: #dce7f3; border-color: #8ea4bf; color: #263b56; font-weight: 600; }
#notes-page .notes-save-btn { background: #5f6f86; color: white; }
#notes-page .notes-save-btn:hover { background: #4f6078; }
#notes-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#notes-toolbar label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
#notes-toolbar select, #notes-toolbar input { border: 1px solid #cbd5e1; border-radius: 4px; background: #eef2f7; color: #4f6078; min-height: 32px; }
#notes-toolbar input[type="color"] { width: 32px; padding: 2px; }
#notes-toolbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#notes-toolbar-actions > * { white-space: nowrap; }
#notes-page #note-editor-delete:disabled { opacity: 0.55; cursor: not-allowed; background: #eef2f7; }
#note-search-toggle { margin-left: 0; }
#note-search-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#note-search-bar.hidden { display: none; }
#note-search-query { flex: 1; min-width: 100px; width: auto; }
/* The tools are outside the only right-hand scroll container. No overlay needed. */
#notes-editor { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#notes-editor.hidden { display: none; }
#notes-editor > .notes-page-header { flex-shrink: 0; }
#notes-editor > .notes-form { flex: 1; min-height: 0; overflow: hidden; }
#notes-editor .notes-form > :not(#note-content) { flex-shrink: 0; }
#note-content { flex: 1; height: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; resize: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.7; }
#note-content:empty::before { content: attr(data-placeholder); color: #8995a6; pointer-events: none; }
#notes-page :focus-visible { outline: 2px solid #8ea4bf; outline-offset: 2px; box-shadow: none; }
#note-content::highlight(note-search) { background: #d8e7f5; color: #253b55; }
#note-content::highlight(note-search-current) { background: #9fbad8; color: #102a47; }
#notes-save-status { color: var(--text-muted); align-self: center; font-size: 13px; }
#note-tree-operation-status { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
#note-tree-menu { position: fixed; z-index: 10000; min-width: 160px; max-width: calc(100vw - 16px); padding: 5px; border: 1px solid #cbd5e1; border-radius: 6px; background: #eef2f7; color: #4f6078; box-shadow: none; }
#note-tree-menu[hidden] { display: none; }
#note-tree-menu button, #note-tree-menu select { display: block; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: #4f6078; text-align: left; font: inherit; }
#note-tree-menu select { max-width: 300px; }
#note-tree-menu button:hover { background: #dce7f3; }
#note-tree-menu button:disabled { opacity: .5; cursor: not-allowed; }
#notes-tree [data-drop="inside"] { background: #dce7f3; outline: 2px solid #8ea4bf; outline-offset: -2px; }
#notes-tree [data-drop="before"] { border-top: 3px solid #5f6f86; }
#notes-tree [data-drop="after"] { border-bottom: 3px solid #5f6f86; }
#notes-tree [data-drop="invalid"] { outline: 1px dashed #5f6f86; outline-offset: -2px; cursor: not-allowed; }
#notes-tree .note-tree-inline { margin-top: 4px; margin-bottom: 4px; }
#notes-tree .note-tree-inline input { min-width: 0; }
@media (max-width: 760px) {
  #notes-page { grid-template-columns: 1fr; grid-template-rows: minmax(100px, 28%) minmax(0, 1fr); gap: 8px; }
  #notes-tree-panel { gap: 4px; }
  #notes-tree-panel h3, #notes-tree-panel .notes-field-label { display: none; }
  #notes-page .notes-page-card { padding: 14px; }
}