:root{--bg:#f6f4ec;--paper:#fffefa;--green:#204c43;--green-dark:#173c35;--green-soft:#e6eee8;--ink:#233c36;--muted:#6d8077;--line:#dce3db;--red:#b94a3e;--font-size:20px;--shadow:0 7px 28px rgba(34,70,55,.055)}*{box-sizing:border-box}html{font-size:var(--font-size)}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;line-height:1.65}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,[contenteditable]:focus-visible{outline:3px solid #a3bdaf;outline-offset:2px}.hidden{display:none!important}.topbar{height:88px;border-bottom:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1120px)/2));gap:16px}.brand{display:flex;gap:13px;align-items:center;font-size:1.35rem;font-weight:760;color:var(--green)}.brand-symbol{background:var(--green);color:#fff;border-radius:17px;width:64px;height:64px;display:grid;place-items:center;font-size:1.8rem;font-weight:700}.brand-symbol.small{width:46px;height:46px;border-radius:12px;font-size:1.3rem}.top-actions{display:flex;align-items:center;gap:9px}.mini-status{font-size:.7rem;color:var(--muted)}.btn{border:1px solid transparent;border-radius:11px;padding:10px 17px;font-weight:650;min-height:47px;transition:background .13s}.btn-main{background:var(--green);color:#fff}.btn-main:hover{background:var(--green-dark)}.btn-quiet{color:var(--green);background:#eff3ed;border-color:#dce7dd}.btn-quiet:hover{background:#e2ece3}.btn-danger{color:var(--red);background:#fff3ef;border-color:#f4ded8}.btn-icon{border-color:var(--line);background:transparent;color:var(--green);min-width:46px;padding:9px;font-size:1.03rem}.workspace{max-width:1120px;margin:30px auto;padding:0 24px}.tabs{display:flex;gap:9px;margin-bottom:21px}.tab{background:transparent;border:1px solid transparent;color:var(--muted);font-size:1.05rem;padding:13px 32px;border-radius:11px;font-weight:700}.tab.active{background:var(--green);color:white}.panel{background:var(--paper);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);padding:30px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:23px}h1,h2,p{margin-top:0}h2{font-size:1.35rem;line-height:1.25;margin-bottom:6px;color:var(--green)}.help{color:var(--muted);font-size:.8rem;margin:0}.title-input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 2px 17px;color:var(--ink);font-size:1.15rem;font-weight:600;outline:0!important}.title-input::placeholder{color:#91a299}.editor{padding:25px 2px;min-height:345px;white-space:pre-wrap;overflow-wrap:anywhere;outline:0!important;font-size:1rem;line-height:1.85}.editor:empty:before{content:attr(data-placeholder);color:#9baa9f;pointer-events:none}.editor img{display:block;max-width:100%;height:auto;border-radius:10px;margin:16px 0}.editor a{color:#326b65;text-decoration:underline}.editor-footer{border-top:1px solid var(--line);padding-top:21px;display:flex;justify-content:space-between;align-items:center;gap:16px}.save-status{font-size:.78rem;color:var(--muted)}.save-status.error{color:var(--red)}.footer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.search-box{display:flex;align-items:center;gap:11px;border:2px solid #cbd9cd;background:#fff;border-radius:12px;padding:8px 18px}.search-box:focus-within{border-color:var(--green)}.search-box span{font-size:1.6rem;color:var(--green)}.search-box input{font-size:1.06rem;flex:1;width:0;min-height:48px;border:0;outline:0;background:transparent;color:var(--ink)}.results-meta{display:flex;justify-content:space-between;gap:10px;font-size:.75rem;color:var(--muted);padding:23px 4px 10px}.note-card{padding:19px 17px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}.note-card:hover{background:#f1f5ee}.note-card h3{margin:0 0 4px;font-size:1.02rem;color:var(--green)}.note-card p{margin:0 0 5px;color:#586f63;font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-card time{color:#899b90;font-size:.7rem}.pinned{color:var(--red);font-size:.7rem;margin-left:8px}.empty{padding:65px 15px;text-align:center;color:var(--muted)}.pager{display:flex;justify-content:center;align-items:center;gap:18px;padding:20px}.pager button{border:1px solid var(--line);border-radius:8px;background:#f5f7f1;padding:7px 14px}.pager button:disabled{opacity:.35;cursor:default}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:42px;max-width:460px;width:100%;text-align:center}.login-card .brand-symbol{margin:auto auto 17px}.login-card h1{font-size:1.7rem;color:var(--green);margin:0}.login-card p{color:var(--muted);font-size:.85rem}.login-card input[type=password]{display:block;text-align:center;width:100%;height:70px;letter-spacing:9px;font-size:1.4rem;margin:25px 0 12px;border:2px solid var(--line);border-radius:12px}.remember{display:flex;justify-content:center;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:20px}.remember input{width:21px;height:21px;accent-color:var(--green)}.full{width:100%;height:55px}.error{color:var(--red)!important;min-height:1.4em}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:11px;padding:11px 22px;box-shadow:var(--shadow);font-size:.85rem;z-index:10}dialog{border:1px solid var(--line);border-radius:20px;background:var(--paper);width:min(560px,calc(100vw - 30px));max-height:85vh;color:var(--ink);padding:0}dialog::backdrop{background:#132a239e}.dialog-body{padding:25px}.dialog-header{display:flex;justify-content:space-between;align-items:center}.settings-row{border-top:1px solid var(--line);padding:19px 0}.settings-row b{font-size:1rem}.settings-row p,.muted{font-size:.8rem;color:var(--muted)}.pin-change{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.pin-change input{border:1px solid var(--line);border-radius:8px;padding:8px 11px;max-width:130px;font-size:.8rem}.feedback{font-size:.8rem;color:var(--red)}@media(max-width:720px){:root{--font-size:19px}.topbar{height:auto;min-height:76px;padding:12px 16px}.brand{font-size:1.15rem}.brand-symbol.small{width:40px;height:40px}.mini-status{display:none}.top-actions{gap:4px}.btn-icon{min-width:42px}.top-actions #installBtn{font-size:.72rem;padding:7px}.workspace{margin:18px auto;padding:0 12px}.tabs{gap:6px}.tab{flex:1;padding:11px 8px;font-size:.95rem}.panel{padding:18px;border-radius:13px}.editor{min-height:45vh;padding:22px 2px}.panel-header{margin-bottom:15px}.editor-footer{align-items:stretch;flex-direction:column}.footer-actions{justify-content:flex-end}.footer-actions .btn{padding:8px 11px;font-size:.81rem}.results-meta span:last-child{display:none}.login-card{padding:25px}}

/* v1.0.2: airy typography and distraction-free editor */
body{font-family:'Noto Sans SC','Source Han Sans SC','Microsoft YaHei UI','PingFang SC',system-ui,sans-serif;font-weight:400;color:#40574f}
.brand{font-weight:500;color:#344f47}
.brand-symbol{font-weight:500}
.tab{font-weight:500}
h1,h2,.note-card h3{font-weight:500}
.btn{font-weight:500}
.title-input{font-weight:400;color:#40574f}
.editor{color:#40574f;font-weight:400;line-height:1.85;padding-top:18px;min-height:385px}
.editor-options{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin-bottom:8px}
.optional-title-btn{background:none;border:0;padding:5px 3px;color:#72867b;font-size:.78rem;font-weight:400;min-height:35px;cursor:pointer}
.optional-title-btn:hover{color:#b94a3e;text-decoration:underline;text-underline-offset:4px}
.optional-title-btn:focus-visible{outline:2px solid #a3bdaf;outline-offset:2px;border-radius:5px}
.title-container{margin-bottom:7px}
.title-container .title-input{border-bottom:1px solid var(--line);padding:10px 3px 15px}
#copyBtn:disabled{opacity:.42;cursor:default}
@media(max-width:720px){.editor{min-height:50vh;padding-top:14px}.editor-options{margin-bottom:4px}}

/* v1.0.3: unified top alignment, always-visible search and title, icon actions */
.topbar{padding:0 24px}
.topbar-inner{width:100%;max-width:1072px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.workspace{max-width:1120px;padding:0 24px;margin:28px auto}
.search-toolbar{display:flex;gap:14px;margin-bottom:22px;align-items:stretch}
.search-toolbar .search-box{flex:1;min-width:0}
.search-toolbar #trashBtn{flex-shrink:0}
.title-container{margin:0}
.title-container .title-input{padding:4px 2px 19px;font-size:1.12rem;font-weight:400}
.editor{min-height:385px;padding-top:26px}
.action-icon{height:52px;min-height:52px;width:54px;padding:10px;display:inline-flex;align-items:center;justify-content:center}
.action-icon svg{width:26px;height:26px}
.shortcut-hint{font-size:.78rem;color:var(--muted);white-space:nowrap;padding:0 2px}
.panel-header h2{font-weight:500}
@media(max-width:720px){.topbar{padding:12px}.topbar-inner{flex-wrap:wrap}.search-toolbar{gap:8px}.search-toolbar #trashBtn{padding:8px 10px;font-size:.8rem}.action-icon{width:46px;height:46px;min-height:46px}.action-icon svg{width:24px}.shortcut-hint{display:none}}


/* v1.0.5: desktop viewport-sized editor; scroll only the note body. */
.search-toolbar .search-box{width:100%}
.search-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (min-width:721px) and (min-height:600px){
  .app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .topbar{flex:0 0 88px}
  .workspace{width:100%;flex:1;min-height:0;margin:0 auto;padding-top:24px;padding-bottom:24px;display:flex;flex-direction:column}
  .search-toolbar{flex:0 0 auto}
  .workspace > .panel:not(.hidden){display:flex;flex-direction:column;flex:1;min-height:0}
  .panel .title-container,.panel .panel-header,.panel .editor-footer{flex:0 0 auto}
  #writeView .editor,#detailView .editor{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  #searchView .results{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  #searchView .results-meta,#searchView .pager{flex:0 0 auto}
}
@media (max-width:720px){
  /* Small screens keep natural page scroll to avoid keyboard viewport jumps. */
  .search-actions .btn{font-size:.82rem;padding:8px 10px}
  .editor-footer{position:sticky;bottom:0;background:var(--paper);padding-bottom:max(8px,env(safe-area-inset-bottom));z-index:2}
}

/* v1.0.6: search begins at the right edge, retaining normal LTR character order. */
.search-box input, .search-box input::placeholder{ text-align:right; direction:ltr; }
.search-box input{ padding-right:16px; }
/* v1.3.38: allow breathing room between typed search text and native clear (×) control. */
.search-box input::-webkit-search-cancel-button{ margin-left:12px; cursor:pointer; }


/* v1.0.7: red focus highlight for note input area + root favicon support */
.compose-shell{border:1.5px solid transparent;border-radius:16px;padding:0 14px 0 14px;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
.compose-shell.editor-focused{border-color:var(--red);box-shadow:0 0 0 3px rgba(185,74,62,.12);background:linear-gradient(to bottom, rgba(185,74,62,.02), rgba(185,74,62,0));}
.compose-shell .title-container .title-input{padding-left:0;padding-right:0;}
.compose-shell .editor{padding-left:0;padding-right:0;}
#writeView .compose-shell,#detailView .compose-shell{margin-bottom:10px;flex:1;min-height:0;display:flex;flex-direction:column;}
#writeView .compose-shell .editor,#detailView .compose-shell .editor{flex:1;min-height:0;}
#writeView .compose-shell .editor:focus-visible,#detailView .compose-shell .editor:focus-visible{outline:none!important;}
@media (max-width:720px){.compose-shell{padding:0 10px;border-radius:12px}}


/* v1.0.8: focus highlight on the OUTER module panel, not the inner compose area */
.compose-shell{border:0!important;box-shadow:none!important;background:transparent!important;padding:0;transition:none;}
#writeView.panel.panel-focused, #detailView.panel.panel-focused{border-color:var(--red);box-shadow:0 0 0 3px rgba(185,74,62,.14), var(--shadow);}
#writeView.panel.panel-focused .editor-footer, #detailView.panel.panel-focused .editor-footer{border-top-color:#ead3cf;}
#writeView.panel.panel-focused .title-input, #detailView.panel.panel-focused .title-input{border-bottom-color:#ead3cf;}


/* v1.0.9: custom notepad-and-pen icon replaces the old character logo */
.brand-symbol.brand-art{background:transparent;overflow:hidden;border-radius:17px;}
.brand-symbol.brand-art.small{border-radius:12px;}
.brand-symbol.brand-art img{width:100%;height:100%;object-fit:cover;display:block;}


/* v1.1.0 | 温润编辑风：借鉴资料检索页的低饱和米灰、细线和留白。
   保留大字号、红色外层聚焦、固定底部操作区。 */
:root {
  --bg:#f0eee8;
  --paper:#fbfaf6;
  --green:#263f36;
  --green-dark:#1d332b;
  --green-soft:#edf0e9;
  --ink:#283b34;
  --muted:#68756c;
  --line:#dddcd3;
  --red:#b84c43;
  --shadow:0 8px 30px rgba(41,50,40,.045);
}
body {
  background:var(--bg);
  color:var(--ink);
  font-family:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei UI",system-ui,sans-serif;
  font-weight:400;
  letter-spacing:.006em;
}
.topbar {
  background:#f8f7f3;
  border-top:4px solid #c8b997;
  border-bottom:1px solid #d8d6cb;
}
.brand {color:var(--green);font-weight:500;letter-spacing:.025em;}
.panel,.login-card {
  background:var(--paper);
  border:1px solid #deded5;
  border-radius:17px;
  box-shadow:var(--shadow);
}
.panel {transition:border-color .16s ease,box-shadow .16s ease;}
.btn {
  font-weight:500;
  letter-spacing:.006em;
  border-radius:10px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.btn-main {background:var(--green);color:#fffdf8;}
.btn-main:hover {background:var(--green-dark);}
.btn-quiet {background:#f2f1eb;border-color:#dfdfd5;color:var(--green);}
.btn-quiet:hover {background:#e8e8df;}
.btn-icon {background:#faf9f5;border:1px solid #deded5;}
.btn-icon:hover {background:#eeeee7;}
.btn-danger {color:var(--red);background:#fbf2ee;border-color:#efded7;}
.btn:disabled {opacity:.48;cursor:default;}
.search-box {
  background:#fffefa;
  border:1px solid #d2d3c9;
  box-shadow:0 3px 18px rgba(32,46,37,.025);
  border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.search-box:focus-within {border-color:#506c5e;box-shadow:0 0 0 3px rgba(56,88,70,.085);}
.search-box input {color:var(--ink);font-weight:400;}
.search-box input::placeholder {color:#89928a;opacity:1;}
.title-input {color:#334940;font-weight:400;border-bottom-color:#e2e1d7!important;}
.title-input::placeholder {color:#849288;opacity:1;}
.editor {color:#35493f;font-weight:400;line-height:1.85;}
.editor:empty::before {color:#98a198;}
.editor-footer {border-top-color:#e0e1d7;padding-top:18px;}
.save-status {color:#708077;}
h2 {color:var(--green);font-weight:500;}
.help,.muted,.note-card time {color:#7b8379;}
.note-card {border-bottom-color:#e4e3db;}
.note-card:hover {background:#f3f2ec;}
.note-card h3 {font-weight:500;}
.note-card p {color:#68756c;}
#writeView.panel.panel-focused,
#detailView.panel.panel-focused {
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(184,76,67,.12),0 8px 30px rgba(41,50,40,.045);
}
#writeView.panel.panel-focused .title-input,
#detailView.panel.panel-focused .title-input {border-bottom-color:#e2e1d7!important;}
#writeView.panel.panel-focused .editor-footer,
#detailView.panel.panel-focused .editor-footer {border-top-color:#e0e1d7;}
.login-card h1 {font-weight:500;color:var(--green);}
.login-card input[type=password] {background:#fffefa;border-color:#d7d8cf;}
.login-card input[type=password]:focus-visible {outline:2px solid rgba(184,76,67,.35);border-color:var(--red);}
.dialog-body {background:var(--paper);}
@media (max-width:720px) {
  .topbar {border-top-width:3px;}
  .panel {border-radius:14px;}
}


/* v1.2.0: compact, locally hosted TinyMCE toolbar; keep the existing layout */
.tiny-toolbar:empty{display:none}
.tiny-toolbar:not(:empty){flex:0 0 auto;min-height:42px;margin:8px 0 0;border-bottom:1px solid var(--line)}
.tiny-toolbar .tox-tinymce-inline,.tiny-toolbar .tox-editor-header{box-shadow:none!important;border:0!important;background:transparent!important}
.tiny-toolbar .tox-toolbar__primary,.tiny-toolbar .tox-toolbar,.tiny-toolbar .tox-toolbar__group{background:transparent!important}
.tiny-toolbar .tox .tox-tbtn{border-radius:7px!important}
.tiny-toolbar .tox .tox-tbtn:hover{background:#e9ece5!important}
.tiny-toolbar .tox .tox-tbtn--enabled{background:#dee8df!important}
#writeView .editor.tox-edit-focus,#detailView .editor.tox-edit-focus{outline:0!important}
#writeView .editor[contenteditable="true"],#detailView .editor[contenteditable="true"]{cursor:text}
#writeView .editor pre,#detailView .editor pre{font-family:Consolas,"Cascadia Code",monospace;white-space:pre-wrap;tab-size:4;font-size:.86em;background:#f1f1eb;padding:12px;border-radius:7px}
#writeView .editor p,#detailView .editor p{margin:0 0 .65em}
#writeView .editor ul,#detailView .editor ul{padding-left:1.8em}
@media(min-width:721px) and (min-height:600px){#writeView .compose-shell,#detailView .compose-shell{min-height:0;overflow:hidden}#writeView .compose-shell .editor,#detailView .compose-shell .editor{overflow-y:auto}}

/* v1.2.1: preserve code indentation and line breaks after TinyMCE migration */
#writeView .editor pre,#detailView .editor pre{white-space:pre-wrap!important;overflow-wrap:anywhere;tab-size:4;line-height:1.55;margin:12px 0 16px;background:#f0efe9;color:#30473c;}
#writeView .editor p,#detailView .editor p{white-space:pre-wrap;}


/* v1.2.2: new note button + TinyMCE font/color controls */
.new-note-btn{display:inline-flex;align-items:center;justify-content:center;}
.new-note-btn svg{width:23px;height:23px;}
.tiny-toolbar .tox .tox-tbtn{color:var(--ink);}
.tiny-toolbar .tox .tox-tbtn--select{min-width:68px;}
@media(max-width:720px){.new-note-btn{min-width:42px;padding:8px}.new-note-btn svg{width:21px;height:21px;}}

/* v1.2.5: make the font-size selector explicit and distinct from color pickers. */
.tiny-toolbar .tox .tox-tbtn[title*='字号']{min-width:74px!important;}
.tiny-toolbar .tox-toolbar__primary{flex-wrap:wrap!important;}

/* v1.3.0: compact bottom Markdown controls and preview, keep footer anchored */
.editor-footer{gap:12px;flex-wrap:wrap}
.editor-footer-meta{display:flex;flex:1;min-width:240px;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.format-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.format-tabs{display:inline-flex;background:#ebece8;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.format-tab{border:0;background:transparent;color:#66756d;font-size:.74rem;padding:7px 12px;min-height:37px;cursor:pointer;font-weight:500}
.format-tab.active{background:var(--green);color:#fff}
.md-preview-toggle{background:#eef1ea;border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-height:37px;color:var(--green);font-size:.76rem}
.word-count{color:#879289;font-size:.76rem;white-space:nowrap}
.md-source,.md-preview{width:100%;flex:1;min-height:0;border:0;background:transparent;color:var(--ink);font-size:.96rem;line-height:1.7;padding:24px 2px;overflow:auto;outline:none;resize:none}
.md-source{font-family:Consolas,'Cascadia Code','Noto Sans Mono',monospace;tab-size:4;white-space:pre;overflow-wrap:normal}
.md-preview{font-family:inherit;overflow-wrap:anywhere;white-space:normal}
.md-preview h1,.md-preview h2,.md-preview h3{margin:.8em 0 .45em;color:var(--green);line-height:1.4}
.md-preview p{margin:.4em 0 .9em}.md-preview pre{background:#eeeee8;padding:15px;border-radius:9px;overflow:auto;font-family:Consolas,monospace;white-space:pre;line-height:1.55}
.md-preview code{font-family:Consolas,monospace;font-size:.88em}
.md-preview :not(pre)>code{background:#f0eee9;padding:2px 5px;border-radius:4px}
.md-preview blockquote{border-left:3px solid #c5bdab;margin:1em 0;padding:5px 18px;color:#65736c}
.md-preview table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}.md-preview th,.md-preview td{border:1px solid var(--line);padding:7px 13px}
.md-preview img{max-width:100%;height:auto}.md-preview a{color:#286b5b}
@media(min-width:721px) and (min-height:600px){#writeView .compose-shell .md-source,#detailView .compose-shell .md-source,#writeView .compose-shell .md-preview,#detailView .compose-shell .md-preview{flex:1;min-height:0;overflow:auto}}
@media(max-width:720px){.editor-footer-meta{min-width:0}.md-source,.md-preview{min-height:46vh}.format-tab{padding:6px 9px}.editor-footer{position:sticky;bottom:0}}


/* v1.3.3: legible font menu, uniform compact footer controls */
.tiny-toolbar .tox .tox-tbtn[title*="字体"] {min-width:72px!important;}
.tiny-toolbar .tox .tox-tbtn[title*="字号"] {min-width:74px!important;}
#writeView .editor-footer .format-tabs,
#writeView .editor-footer .format-tab,
#writeView .editor-footer .footer-actions .btn,
#writeView .editor-footer .md-preview-toggle {height:38px;min-height:38px;}
#writeView .editor-footer .format-tab {padding-top:4px;padding-bottom:4px;}
#writeView .editor-footer .footer-actions .action-icon {width:42px;min-width:42px;padding:7px;}
#writeView .editor-footer .footer-actions .action-icon svg {height:22px;width:22px;}
#writeView .editor-footer .footer-actions #finishBtn {padding:5px 18px;line-height:1.2;}
#writeView .editor-footer {align-items:center;}
@media(max-width:720px){#writeView .editor-footer .footer-actions .btn{font-size:.82rem;}}


/* v1.3.4 Wider reading surface; control chrome remains stable while text zooms. */
:root { --workspace-max:1360px; --workspace-gutter:clamp(16px,2.35vw,34px); }
.topbar {padding-left:var(--workspace-gutter);padding-right:var(--workspace-gutter)}
.topbar-inner {max-width:calc(var(--workspace-max) - 2 * var(--workspace-gutter));}
.workspace {max-width:var(--workspace-max);padding-left:var(--workspace-gutter);padding-right:var(--workspace-gutter);}
/* These are UI controls, not note text: keep stable physical sizes even after A+/A−. */
.top-actions {gap:9px;flex-shrink:0;}
.top-actions .btn-icon {
  width:46px;min-width:46px;height:46px;min-height:46px;
  padding:0;display:inline-flex;align-items:center;justify-content:center;
  font:500 19px/1 system-ui,"Segoe UI",sans-serif;
  border-radius:11px;
}
.top-actions #newNoteBtn svg {width:21px;height:21px;flex:0 0 auto;}
.top-actions #settingsBtn {font-size:22px;}
.top-actions #installBtn {font-size:15px;min-height:44px;padding:8px 14px;}
.editor-footer {font-size:16px;}
.editor-footer .format-tabs,.editor-footer .format-tab,
.editor-footer .md-preview-toggle,
.editor-footer .footer-actions .btn {
  height:38px;min-height:38px;font-size:16px;line-height:1.2;
}
.editor-footer .format-tab {padding:6px 12px;}
.editor-footer .footer-actions .action-icon {
  flex:0 0 42px;width:42px;min-width:42px;height:38px;min-height:38px;
  display:inline-flex;align-items:center;justify-content:center;padding:7px;
}
.editor-footer .footer-actions .action-icon svg {width:20px;height:20px;flex-shrink:0;}
.editor-footer .footer-actions #finishBtn {padding:5px 17px;font-size:16px;line-height:1.2;}
.editor-footer .save-status,.editor-footer .word-count,.editor-footer .shortcut-hint {font-size:14px;line-height:1.45;}
.editor-footer .footer-actions {gap:9px;flex-wrap:nowrap;}
.editor-footer .editor-footer-meta {min-width:0;}
@media (max-width:720px) {
  :root {--workspace-gutter:12px;}
  .top-actions {gap:5px;}
  .top-actions .btn-icon {width:41px;min-width:41px;height:41px;min-height:41px;font-size:17px;}
  .top-actions #newNoteBtn svg {width:20px;height:20px;}
  .editor-footer .footer-actions {flex-wrap:wrap;justify-content:flex-end;}
  .editor-footer .format-tab,.editor-footer .footer-actions .btn {font-size:15px;}
}


/* v1.3.5 Markdown syntax highlighting (Notepad++-style preview, read-only) */
.md-highlight-toggle.active,.md-preview-toggle.active{background:var(--green);border-color:var(--green);color:#fff;}
.md-syntax-preview{font-family:Consolas,'Cascadia Code','Microsoft YaHei UI',monospace!important;white-space:pre-wrap!important;overflow-wrap:normal!important;tab-size:4;line-height:1.75!important;color:#2c3d35;}
.md-syntax-heading{color:#dc6b1d;font-weight:650;}
.md-syntax-list{color:#2477db;font-weight:650;}
.md-syntax-quote{color:#6f55ac;font-style:italic;}
.md-syntax-emphasis{color:#314ca5;font-weight:600;}
.md-syntax-code{color:#087d53;}
.md-syntax-fence{color:#a7682c;font-weight:600;}
.md-syntax-link{color:#1b7da1;text-decoration:underline;}
.md-syntax-rule{color:#a39982;}
/* Rendered preview has stronger semantic colors too. */
.md-preview:not(.md-syntax-preview) h1{color:#b95027!important;}
.md-preview:not(.md-syntax-preview) h2{color:#b86b25!important;}
.md-preview:not(.md-syntax-preview) h3{color:#326c55!important;}
.md-preview:not(.md-syntax-preview) li::marker{color:#2775bd;font-weight:600;}
.md-preview:not(.md-syntax-preview) blockquote{color:#6f55ac;border-left-color:#a695ca;}
.md-preview:not(.md-syntax-preview) :not(pre)>code{color:#087d53;}


/* v1.3.7: real smart colors in TinyMCE inline content. These rules must be
   loaded from an external stylesheet, not injected into the editor. */
::highlight(note-english){color:#326A93;}
::highlight(note-number){color:#217C64;}
::highlight(note-date){color:#AA6027;}
::highlight(note-quote){color:#825B9B;}
::highlight(note-code){color:#227551;}
#writeView .editor blockquote,#detailView .editor blockquote{border-left:3px solid #AB89B0;padding-left:.85em;color:#795C87;}
#writeView .editor pre,#detailView .editor pre,#writeView .editor code,#detailView .editor code{color:#2A7557;font-family:Consolas,'Cascadia Code',monospace;}

/* v1.3.9: clear separator in both rich editors; logout aligned right. */
.editor hr {border:0;border-top:1px solid #bfc9c0;margin:1.1em 0;}
.settings-logout-row {display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.settings-logout-row > b {flex:0 0 auto;}
.settings-logout-row #logoutBtn {margin-left:auto;}

/* v1.3.11: file fallback and history downloads */
.file-save-btn{border-color:#d8c7aa;background:#f8f0de;color:#74502e;white-space:nowrap}
.note-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-card-top h3{min-width:0;overflow-wrap:anywhere;margin:0 0 4px}
.note-download{flex:0 0 auto;font-size:14px;min-height:34px;padding:5px 12px}
.file-type-badge{font-size:12px;font-weight:400;background:#eef0e7;color:#556d57;border-radius:6px;padding:3px 7px;margin-left:9px;white-space:nowrap}
.file-detail{flex:1;display:flex;align-items:flex-start;gap:20px;padding:32px 18px;overflow-y:auto}
.file-detail-icon{font-size:38px}
.file-detail h3{margin:0 0 8px;font-size:22px;font-weight:500}
.file-detail p{margin:0 0 14px;color:var(--muted);font-size:16px;overflow-wrap:anywhere}
.file-record-view .editor-footer .format-controls,.file-record-view .editor-footer .footer-actions{display:none!important}
.file-record-view .editor-footer{flex:0 0 auto}
@media(max-width:720px){.note-download{font-size:13px;padding:5px 9px}.file-detail{padding:18px 4px}.file-save-btn{font-size:14px}}

/* v1.3.12: recover from oversized unsaved notes without being trapped. */
.oversize-new-dialog{max-width:min(650px,calc(100vw - 32px));width:650px}
.oversize-new-dialog h2{font-size:1.23rem;margin-bottom:16px}
.oversize-new-dialog .muted{font-size:.92rem;line-height:1.75}
.oversize-warning{font-size:.83rem;color:#a34b3c;margin:14px 0 22px}
.oversize-new-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
@media(max-width:720px){.oversize-new-actions{flex-direction:column}.oversize-new-actions button{width:100%}}

/* v1.3.13: two-row footer, status is always on its own line. */
#writeView .editor-footer,#detailView .editor-footer{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
}
.editor-save-row{width:100%;min-width:0;display:flex;align-items:center;}
.editor-save-row .save-status{max-width:100%;overflow-wrap:anywhere;line-height:1.5;}
.editor-footer-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;}
.editor-footer-row .editor-footer-meta{display:flex;align-items:center;justify-content:flex-start;flex:1 1 auto;min-width:0;}
.editor-footer-row .format-controls{justify-content:flex-start;}
.editor-footer-row .footer-actions{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;gap:9px;}
@media (max-width:720px){
  .editor-footer-row{flex-wrap:wrap;gap:10px;}
  .editor-footer-row .editor-footer-meta{flex:1 1 100%;}
  .editor-footer-row .footer-actions{margin-left:auto;flex-wrap:wrap;}
}


/* v1.3.14: quiet icon-only history download and customizable TinyMCE toolbar */
.note-download { flex:0 0 36px!important; width:36px; height:36px; min-height:36px; padding:7px!important; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:9px; color:#687d70; opacity:.74; transition:opacity .15s,border-color .15s,background .15s; }
.note-download svg { width:20px; height:20px; flex:none; }
.note-download:hover,.note-download:focus-visible { opacity:1; background:var(--green-soft); border-color:var(--line); }
.note-card-top h3 { flex:1; }
.toolbar-preset-label{display:block;font-size:15px;color:var(--muted);margin-top:12px;margin-bottom:6px;}
.toolbar-preset{display:block;width:100%;max-width:300px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);font-size:16px;}
.toolbar-checkboxes{display:grid;grid-template-columns:1fr 1fr;gap:11px 15px;margin:18px 0 20px;}
.toolbar-checkboxes label{display:flex;gap:8px;align-items:center;font-size:15px;line-height:1.4;cursor:pointer;}
.toolbar-checkboxes input{width:18px;height:18px;accent-color:var(--green);flex:none;}
#saveToolbarSettings{font-size:16px;}
@media(max-width:520px){.toolbar-checkboxes{grid-template-columns:1fr;}}

/* v1.3.15: sortable paginated history and recycle-bin cleanup */
.results-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:9px;min-width:0}
.results-controls label,.results-controls #pinOrderHint{font-size:13px;color:var(--muted)}
.results-controls select{border:1px solid var(--line);background:var(--paper);color:var(--green);border-radius:8px;padding:7px 10px;font-size:14px;max-width:155px;cursor:pointer}
.results-controls .btn{font-size:13px;min-height:35px;padding:6px 10px}
.note-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.note-purge{min-width:35px;width:35px;height:35px;min-height:35px;padding:7px;display:inline-flex;align-items:center;justify-content:center}
.note-purge svg{width:17px;height:17px}
@media(max-width:720px){.results-meta{flex-wrap:wrap;align-items:center}.results-controls{width:100%;justify-content:flex-start}.results-controls label{display:none}.results-controls #pinOrderHint{display:none!important}}


/* v1.3.18: honor TinyMCE image sizing & paragraph alignment on re-open. */
/* A block image with auto margins always sat on the left, even in centered paragraphs. */
#writeView .editor img, #detailView .editor img {
  display:inline-block;
  max-width:100%;
  vertical-align:middle;
  margin:10px 0;
  border-radius:10px;
}
#writeView .editor img:not([height]):not([style*="height"]),
#detailView .editor img:not([height]):not([style*="height"]) {height:auto;}
#writeView .editor [style*="text-align: center"],
#detailView .editor [style*="text-align: center"] {text-align:center;}


/* v1.3.19: keep image alignment through TinyMCE -> server -> history.
   Earlier CSS margin:10px 0 prevented standalone images from centering.
   Existing paragraph text-align remains effective for inline images;
   block images may use display:block + margin:auto instead. */
#writeView .editor img, #detailView .editor img {
  margin:0;
  max-width:100%;
  border-radius:10px;
  vertical-align:middle;
}
#writeView .editor img[align="center"], #detailView .editor img[align="center"]{
  display:block; margin-left:auto; margin-right:auto;
}
#writeView .editor img[align="right"], #detailView .editor img[align="right"]{
  margin-left:auto; margin-right:0;
}
#writeView .editor img[align="left"], #detailView .editor img[align="left"]{
  margin-left:0; margin-right:auto;
}
#writeView .editor [align="center"], #detailView .editor [align="center"]{text-align:center;}
#writeView .editor [align="right"], #detailView .editor [align="right"]{text-align:right;}
#writeView .editor [align="left"], #detailView .editor [align="left"]{text-align:left;}


/* v1.3.20: history-detail navigation and compact icon actions */
.detail-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
#detailView .detail-icon-action{height:38px;min-height:38px;width:38px;min-width:38px;padding:7px;display:inline-flex;align-items:center;justify-content:center}
#detailView .detail-icon-action svg{width:20px;height:20px;flex-shrink:0}
#detailView .detail-icon-action.is-pinned{background:#e5ede4;border-color:#c3d4c4;color:var(--green)}
#detailView .detail-icon-action.btn-danger{color:var(--red)}
#detailView .detail-icon-action:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:720px){.detail-nav-actions{gap:7px}.detail-nav-actions .btn{padding:7px 10px;font-size:14px;min-height:38px}#detailView .footer-actions{flex-wrap:wrap}}

/* v1.3.21: compact history page jump controls */
.pager{flex-wrap:wrap;row-gap:10px;}
.page-jump{display:inline-flex;align-items:center;gap:8px;margin:0 0 0 10px;font-size:14px;color:var(--muted);}
.page-jump input{width:65px;height:36px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-size:15px;text-align:center;appearance:textfield;-moz-appearance:textfield;}
.page-jump input::-webkit-inner-spin-button,.page-jump input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.page-jump button{min-height:36px;height:36px;padding:5px 12px;white-space:nowrap;}
@media(max-width:720px){.pager{gap:8px}.page-jump{margin-left:0;gap:6px}}

/* v1.3.22: 仅品牌名称改为古典宋体；其余 UI 字体不变。 */
.topbar .brand{gap:12px;min-width:0;}
.topbar .brand-title{
  font-family:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  font-size:30px;
  font-weight:700;
  letter-spacing:.045em;
  line-height:1.2;
  white-space:nowrap;
  color:#253d34;
}
.topbar .brand-version{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 9px;
  border-radius:999px;
  background:#e9ece5;color:#52645b;
  border:1px solid #dce1d8;
  font-family:system-ui,"Segoe UI",sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:0;line-height:1.3;
  white-space:nowrap;
}
@media(max-width:720px){
  .topbar .brand{gap:8px;}
  .topbar .brand-title{font-size:25px;}
  .topbar .brand-version{font-size:10px;padding:2px 6px;}
}


/* v1.3.23: subtle editorial accents for records and actions. */
:root{
  --title-warm:#34473c;
  --accent-warm:#a35f40;
  --accent-warm-soft:#f5ece4;
}
#searchView .panel-header{
  padding:0 0 19px;
  margin-bottom:8px;
  border-bottom:1px solid #d9d8ce;
  align-items:center;
}
#searchView .panel-header h2{
  color:var(--title-warm);
  font-weight:600;
  letter-spacing:.035em;
  position:relative;
  padding-left:13px;
}
#searchView .panel-header h2::before{
  content:"";position:absolute;left:0;top:2px;bottom:1px;
  width:3px;border-radius:3px;background:var(--accent-warm);
}
#searchView .results-meta{padding-top:15px;padding-bottom:13px;}
#searchView .results-controls select{
  border-color:#d8dbd0;
  color:#355348;
  background:#f6f5ee;
}
#searchView .results-controls select:focus-visible{outline:2px solid #9ab8a4;}
#searchView .note-card{transition:background .14s ease,border-color .14s ease;}
#searchView .note-card:hover{background:#f5f4ee;}
#searchView .note-card h3{
  color:#35584b;
  font-weight:600;
  letter-spacing:.007em;
}
#searchView .note-card .pinned{color:var(--accent-warm);}
#searchView .search-actions .btn{
  background:#f4f2ea;
  color:#3a574b;
  border-color:#dfded3;
}
#searchView .search-actions .btn:hover{background:#e9eee6;border-color:#c6d4c5;}
#searchView .search-actions #trashBtn{color:#9f5b43;background:#faf3ee;border-color:#eedfd4;}
#searchView .search-actions #trashBtn:hover{background:#f5e8df;}
#searchView .pager button:not(:disabled):hover{background:#e6eee7;color:#284a3e;}
#searchView .pager button:disabled{opacity:.42;}
@media(max-width:720px){#searchView .panel-header{align-items:flex-start;gap:12px}#searchView .panel-header h2{padding-left:10px}}


/* v1.3.24: 详情页标题区域与历史记录标题采用一致的细分隔线。 */
#detailView .panel-header{
  border-bottom:1px solid #d9d8ce;
  padding-bottom:19px;
  margin-bottom:20px;
}
@media(max-width:720px){
  #detailView .panel-header{padding-bottom:15px;margin-bottom:16px;}
}


/* v1.3.25: seven UI-only color themes; retain legibility and the red edit-focus border. */
:root,html[data-note-theme="classic"]{--bg:#f0eee8;--paper:#fbfaf6;--green:#263f36;--green-dark:#1d332b;--green-soft:#e9eee8;--ink:#34473c;--muted:#68786e;--line:#deded5;--red:#b84c43;--ui-action:#263f36;--ui-action-ink:#fff;--ui-quiet:#f4f2eb;--ui-header:#f8f7f3;--ui-top:#c8b997;--ui-hover:#edf0e9;--ui-rule:#d9d8ce;--ui-heading:#34473c;--ui-note:#35584b;--ui-border-focus:#b84c43;--ui-shadow:rgba(41,50,40,.05);--ui-tool:#f7f6f2;--ui-tint:#e7ece7;--ui-accent:#a35f40;--ui-code:#f0efe9}
html[data-note-theme="blue"]{--bg:#edf2f7;--paper:#fff;--green:#355e92;--green-dark:#284974;--green-soft:#eaf0f9;--ink:#293f57;--muted:#647b8e;--line:#d9e3ee;--red:#b84c43;--ui-action:#355e92;--ui-action-ink:#fff;--ui-quiet:#f0f4fa;--ui-header:#f8fafd;--ui-top:#8da9cb;--ui-hover:#e9f1fb;--ui-rule:#d8e2ed;--ui-heading:#2b527c;--ui-note:#365d8a;--ui-border-focus:#b84c43;--ui-shadow:rgba(29,56,85,.055);--ui-tool:#f7faff;--ui-tint:#eaf1fa;--ui-accent:#6386b2;--ui-code:#edf2f8}
html[data-note-theme="forest"]{--bg:#eaf1e9;--paper:#fcfdf9;--green:#387a5c;--green-dark:#2e624c;--green-soft:#e1eee4;--ink:#2d5040;--muted:#607b68;--line:#d5e4d7;--red:#bb534b;--ui-action:#387a5c;--ui-action-ink:#fff;--ui-quiet:#eef5ee;--ui-header:#f6faf4;--ui-top:#91ae80;--ui-hover:#e5f2e5;--ui-rule:#d6e1d3;--ui-heading:#2c6549;--ui-note:#347352;--ui-border-focus:#bb534b;--ui-shadow:rgba(31,70,42,.055);--ui-tool:#f7fbf6;--ui-tint:#e5f0e5;--ui-accent:#729d77;--ui-code:#e8efe7}
html[data-note-theme="warm"]{--bg:#f2f0ec;--paper:#fefdfc;--green:#64675f;--green-dark:#4f534c;--green-soft:#ebebe5;--ink:#484b46;--muted:#797b74;--line:#deddd7;--red:#b35b4f;--ui-action:#64675f;--ui-action-ink:#fff;--ui-quiet:#f2f1ee;--ui-header:#f9f8f5;--ui-top:#b69c80;--ui-hover:#ecebe6;--ui-rule:#dddbd4;--ui-heading:#545851;--ui-note:#575e54;--ui-border-focus:#b35b4f;--ui-shadow:rgba(55,53,45,.04);--ui-tool:#faf9f7;--ui-tint:#ecebe6;--ui-accent:#b69c80;--ui-code:#f1f0ed}
html[data-note-theme="orange"]{--bg:#f7f1e8;--paper:#fffcf7;--green:#aa613a;--green-dark:#854b2b;--green-soft:#f5e9dc;--ink:#60483b;--muted:#8b7464;--line:#e9dfd4;--red:#b9443f;--ui-action:#aa613a;--ui-action-ink:#fff;--ui-quiet:#fbf2e8;--ui-header:#fff9f0;--ui-top:#d49a57;--ui-hover:#f6eadc;--ui-rule:#e8dccd;--ui-heading:#854e30;--ui-note:#9a5b35;--ui-border-focus:#b9443f;--ui-shadow:rgba(98,55,30,.05);--ui-tool:#fffbf6;--ui-tint:#f6e8d9;--ui-accent:#d49a57;--ui-code:#f7eee3}
html[data-note-theme="dark"]{color-scheme:dark;--bg:#171f28;--paper:#222e39;--green:#80b5d3;--green-dark:#629fbd;--green-soft:#334555;--ink:#e3eaf0;--muted:#a7b8c3;--line:#40515e;--red:#e18b81;--ui-action:#80b5d3;--ui-action-ink:#15212a;--ui-quiet:#2e3b48;--ui-header:#1c2731;--ui-top:#a4865e;--ui-hover:#354653;--ui-rule:#40515e;--ui-heading:#e3eaf0;--ui-note:#b6d8eb;--ui-border-focus:#e18b81;--ui-shadow:rgba(0,0,0,.16);--ui-tool:#2c3945;--ui-tint:#344553;--ui-accent:#d4a46b;--ui-code:#293742}
html[data-note-theme="redwhite"]{--bg:#fff;--paper:#fff;--green:#bf343a;--green-dark:#9f272e;--green-soft:#fcebed;--ink:#27292c;--muted:#686e73;--line:#e2e4e6;--red:#c43c41;--ui-action:#c43c41;--ui-action-ink:#fff;--ui-quiet:#f6f6f6;--ui-header:#fff;--ui-top:#d44e52;--ui-hover:#fff0f1;--ui-rule:#e1e2e3;--ui-heading:#232629;--ui-note:#32373b;--ui-border-focus:#c43c41;--ui-shadow:rgba(40,43,46,.035);--ui-tool:#fafafa;--ui-tint:#fdebed;--ui-accent:#c43c41;--ui-code:#f6f6f6}
html[data-note-theme] body{background:var(--bg);color:var(--ink)}
html[data-note-theme] .topbar{background:var(--ui-header);border-top-color:var(--ui-top);border-bottom-color:var(--line)}
html[data-note-theme] .topbar .brand-title{color:var(--ui-heading)}
html[data-note-theme] .topbar .brand-version{background:var(--ui-tint);border-color:var(--line);color:var(--ink)}
html[data-note-theme] .panel,html[data-note-theme] .login-card,html[data-note-theme] dialog{background:var(--paper);border-color:var(--line);box-shadow:0 8px 30px var(--ui-shadow);color:var(--ink)}
html[data-note-theme] .dialog-body{background:var(--paper)}
html[data-note-theme] .btn-main{background:var(--ui-action);color:var(--ui-action-ink)}
html[data-note-theme] .btn-main:hover{background:var(--green-dark)}
html[data-note-theme] .btn-quiet,html[data-note-theme] .btn-icon,html[data-note-theme] .page-jump button{background:var(--ui-quiet);color:var(--ink);border-color:var(--line)}
html[data-note-theme] .btn-quiet:hover,html[data-note-theme] .btn-icon:hover{background:var(--ui-hover)}
html[data-note-theme] .btn-danger{color:var(--red);background:var(--ui-tint);border-color:var(--line)}
html[data-note-theme] .search-box,html[data-note-theme] .toolbar-preset,html[data-note-theme] .page-jump input{background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-note-theme] .search-box input{color:var(--ink)}
html[data-note-theme] .search-box span{color:var(--green)}
html[data-note-theme] .search-box input::placeholder,html[data-note-theme] .title-input::placeholder{color:var(--muted)}
html[data-note-theme] .search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--ui-tint)}
html[data-note-theme] h2,html[data-note-theme] #searchView .panel-header h2,html[data-note-theme] .login-card h1{color:var(--ui-heading)}
html[data-note-theme] #searchView .panel-header h2::before{background:var(--ui-accent)}
html[data-note-theme] #searchView .panel-header,html[data-note-theme] #detailView .panel-header{border-bottom-color:var(--ui-rule)}
html[data-note-theme] .title-input,html[data-note-theme] .editor{color:var(--ink);border-color:var(--line)}
html[data-note-theme] .editor-footer{border-top-color:var(--line)}
html[data-note-theme] .note-card{border-bottom-color:var(--line)}
html[data-note-theme] .note-card:hover,html[data-note-theme] #searchView .note-card:hover{background:var(--ui-hover)}
html[data-note-theme] .note-card h3,html[data-note-theme] #searchView .note-card h3{color:var(--ui-note)}
html[data-note-theme] .note-card p,html[data-note-theme] .note-card time,html[data-note-theme] .help,html[data-note-theme] .save-status,html[data-note-theme] .results-meta{color:var(--muted)}
html[data-note-theme] #searchView .search-actions .btn,html[data-note-theme] #searchView .results-controls select{background:var(--ui-quiet);color:var(--ink);border-color:var(--line)}
html[data-note-theme] #searchView .search-actions .btn:hover{background:var(--ui-hover)}
html[data-note-theme] #searchView .search-actions #trashBtn{color:var(--red);background:var(--ui-tint);border-color:var(--line)}
html[data-note-theme] .pager button{background:var(--ui-quiet);color:var(--ink);border-color:var(--line)}
html[data-note-theme] .pager button:not(:disabled):hover{background:var(--ui-hover);color:var(--ink)}
html[data-note-theme] .tiny-toolbar .tox .tox-toolbar,html[data-note-theme] .tiny-toolbar .tox .tox-toolbar__primary,html[data-note-theme] .tiny-toolbar .tox .tox-toolbar__group{background:var(--ui-tool)!important;border-color:var(--line)}
html[data-note-theme] .tiny-toolbar .tox .tox-tbtn{color:var(--ink)!important}
html[data-note-theme] .tiny-toolbar .tox .tox-tbtn svg{fill:currentColor!important}
html[data-note-theme] .tiny-toolbar .tox .tox-tbtn:hover{background:var(--ui-hover)!important}
html[data-note-theme] .tiny-toolbar .tox .tox-tbtn--enabled{background:var(--ui-tint)!important}
html[data-note-theme] .editor hr{border-top-color:var(--line)}
html[data-note-theme] #writeView.panel.panel-focused,html[data-note-theme] #detailView.panel.panel-focused{border-color:var(--ui-border-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-border-focus) 15%,transparent),0 8px 30px var(--ui-shadow)}
/* Do not override user-authored inline color/background in TinyMCE rich text. */
html[data-note-theme="dark"] .md-source,html[data-note-theme="dark"] .md-preview,html[data-note-theme="dark"] .md-highlight{background:var(--paper);color:var(--ink)}
html[data-note-theme="dark"] #writeView .editor pre,html[data-note-theme="dark"] #detailView .editor pre{background:var(--ui-code)}
html[data-note-theme="dark"] .tiny-toolbar .tox .tox-tbtn svg{fill:#e3eaf0!important}
html[data-note-theme="dark"] ::highlight(note-english){color:#9dc8ed}
html[data-note-theme="dark"] ::highlight(note-number){color:#79d5ba}
html[data-note-theme="dark"] ::highlight(note-date){color:#e6b57b}
html[data-note-theme="dark"] ::highlight(note-quote){color:#d3abe3}
html[data-note-theme="dark"] ::highlight(note-code){color:#96d8b4}
.theme-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:13px}
.theme-option{display:flex;flex-direction:column;align-items:stretch;gap:6px;cursor:pointer;font-size:13px;color:var(--ink);position:relative}
.theme-option input{position:absolute;opacity:0;pointer-events:none}
.theme-swatch{display:block;position:relative;height:65px;border:1px solid var(--line);border-radius:10px;background:var(--sw-bg);overflow:hidden;transition:box-shadow .12s ease}
.theme-swatch i{position:absolute;inset:11px 12px 9px;background:var(--sw-paper);border-radius:5px;border:1px solid rgba(120,120,120,.13)}
.theme-swatch em{position:absolute;left:19px;right:44px;top:22px;height:5px;border-radius:5px;background:var(--sw-primary)}
.theme-swatch strong{position:absolute;right:19px;bottom:17px;width:26px;height:13px;background:var(--sw-accent);border-radius:4px}
.theme-option input:checked + .theme-swatch{box-shadow:0 0 0 2px var(--green)}
.theme-option input:focus-visible + .theme-swatch{outline:2px solid var(--green);outline-offset:3px}
.theme-option input:checked ~ span:last-child{font-weight:600;color:var(--green)}
@media(max-width:520px){.theme-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.3.27: 常驻顶栏主题选择，固定 UI 控件尺寸，不随正文 A+/A- 放大。 */
.header-theme-control{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:var(--ui-quiet,var(--paper));color:var(--ink);flex-shrink:0;font-family:system-ui,"Microsoft YaHei UI",sans-serif;font-weight:400}
.header-theme-label{font-size:12px;white-space:nowrap;color:var(--muted)}
.header-theme-select{font:500 13px/1.35 system-ui,"Microsoft YaHei UI",sans-serif;color:var(--ink);background:transparent;border:0;outline:none;padding:4px 1px;max-width:110px;cursor:pointer}
.header-theme-control:focus-within{outline:2px solid var(--green);outline-offset:2px}
.header-theme-select option{background:var(--paper);color:var(--ink)}
@media(max-width:720px){.header-theme-control{gap:3px;padding:0 5px;min-height:38px}.header-theme-label{display:none}.header-theme-select{max-width:88px;font-size:12px}}
@media(max-width:430px){.header-theme-select{max-width:72px;font-size:11px}.header-theme-control{padding:0 3px}}


/* v1.3.28 自定义主题菜单：用轻量弹层替代系统原生 select */
.theme-picker{position:relative;flex:0 0 auto;font-family:system-ui,"Microsoft YaHei UI",sans-serif;z-index:30;}
.theme-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;max-width:174px;padding:7px 12px;border:1px solid var(--line);border-radius:11px;background:var(--ui-quiet,var(--paper));color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s;}
.theme-picker-trigger:hover,.theme-picker-trigger[aria-expanded="true"]{background:var(--ui-hover,#f0f0e9);border-color:var(--green);}
.theme-picker-trigger:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.theme-current-swatch{width:15px;height:15px;flex:0 0 15px;border-radius:5px;border:1px solid rgba(127,127,127,.18);background:#263f36;}
.theme-picker-chevron{opacity:.65;transition:transform .16s;}
.theme-picker-trigger[aria-expanded="true"] .theme-picker-chevron{transform:rotate(180deg);}
.theme-picker-menu{position:absolute;right:0;top:calc(100% + 9px);width:210px;max-height:min(410px,75vh);overflow-y:auto;padding:9px;border-radius:15px;background:var(--paper);border:1px solid var(--line);box-shadow:0 14px 40px rgba(24,38,30,.16);z-index:150;color:var(--ink);}
.theme-picker-caption{font-size:11px;color:var(--muted);padding:6px 10px 10px;letter-spacing:.04em;}
.theme-picker-option{width:100%;min-height:39px;display:flex;align-items:center;gap:11px;text-align:left;padding:8px 10px;border:0;border-radius:9px;color:var(--ink);background:transparent;font:500 13px/1.3 system-ui,"Microsoft YaHei UI",sans-serif;cursor:pointer;}
.theme-picker-option:hover,.theme-picker-option:focus-visible{background:var(--ui-hover,#f2f1ed);outline:none;}
.theme-picker-option[aria-checked="true"]{background:var(--ui-tint,#edf0e9);color:var(--ui-heading,var(--ink));}
.theme-option-swatch{height:21px;width:28px;flex:0 0 28px;border-radius:6px;border:1px solid rgba(130,130,130,.16);background:var(--swatch-bg);position:relative;}
.theme-option-swatch::after{content:"";position:absolute;left:5px;right:5px;top:6px;height:7px;border-radius:3px;background:var(--swatch);}
.theme-option-check{margin-left:auto;color:var(--green);font-size:14px;visibility:hidden;}
.theme-picker-option[aria-checked="true"] .theme-option-check{visibility:visible;}
html[data-note-theme="dark"] .theme-picker-menu{box-shadow:0 18px 44px rgba(0,0,0,.36);}
@media(max-width:720px){.theme-picker-trigger{padding:7px 9px;min-height:38px;font-size:12px;max-width:130px;gap:6px}.theme-picker-menu{width:190px;}}
@media(max-width:430px){.theme-picker-trigger{min-width:38px;padding:6px 8px;}.theme-picker-trigger #themePickerLabel{display:none;}.theme-picker-menu{right:-10px;}}

/* v1.3.29: search excerpts and conflict-copy actions */
.search-match{background:#ffe8b2;color:#70431b;padding:0 2px;border-radius:3px;font-weight:600;}
.editor-save-row{gap:12px;align-items:center;flex-wrap:wrap;}
.conflict-copy{min-height:30px;padding:4px 10px;font-size:13px;}

/* v1.3.30: Search matches are browser-only highlights, not saved markup. */
::highlight(note-search-all){background:#fbe7a5;color:#5b4318;}
::highlight(note-search-current){background:#ffc55b;color:#442600;text-decoration:underline;text-decoration-color:#b76d18;text-decoration-thickness:2px;}
.detail-search-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;}
.detail-search-count{background:#fff1cf;color:#865327;border:1px solid #ead5a0;border-radius:6px;padding:3px 9px;font-weight:550;}
.detail-search-step{border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);padding:3px 9px;font-size:13px;cursor:pointer;}
.detail-search-step:hover{background:var(--green-soft);}
.detail-search-close{font-size:16px;padding:1px 10px;}
@media(max-width:720px){.detail-search-nav{gap:5px}.detail-search-step{padding:4px 7px}}

/* v1.3.32: restrained storage audit in settings */
.storage-stats{margin:10px 0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font-size:13px;line-height:1.8;}
.storage-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
.storage-message{font-size:12px;line-height:1.65;margin:6px 0 0;}

/* v1.3.33: visible keyboard focus for searchable history cards */
#searchView .note-card:focus-visible{outline:2px solid var(--ui-accent,#557d65);outline-offset:2px;background:var(--ui-hover,#eef3ec);}
#searchView .note-card:focus:not(:focus-visible){outline:none;}

/* v1.3.34: minimal read-only operations status */
.system-stats{display:grid;gap:7px;margin:12px 0;padding:13px 15px;border:1px solid var(--line,#ddd);border-radius:12px;background:var(--ui-tint,#f8f8f5);font-size:.91em;line-height:1.6;overflow-wrap:anywhere}

/* v1.3.35: Fixed settings header/footer; only the middle settings list scrolls. */
#settingsDialog[open]{display:flex;flex-direction:column;overflow:hidden;max-height:min(88dvh,850px);height:min(88dvh,850px);width:min(700px,calc(100vw - 30px));}
#settingsDialog .settings-layout{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;padding:0;}
#settingsDialog .settings-fixed-head{flex:0 0 auto;padding:27px 30px 16px;border-bottom:1px solid var(--line);background:var(--paper);}
#settingsDialog .settings-fixed-head .dialog-header h2{margin:0;}
#settingsDialog .settings-fixed-head .muted{margin:12px 0 0;line-height:1.55;}
#settingsDialog .settings-scroll-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 30px;scrollbar-gutter:stable;}
#settingsDialog .settings-scroll-content .settings-row:first-child{border-top:0;}
#settingsDialog .settings-fixed-foot{flex:0 0 auto;padding:15px 30px 17px;border-top:1px solid var(--line);background:var(--paper);}
#settingsDialog .settings-fixed-foot .settings-logout-row{margin:0;}
#settingsDialog .settings-fixed-foot #settingsMessage{margin:0;min-height:0;}
#settingsDialog .settings-fixed-foot #settingsMessage:empty{display:none;}
@media(max-width:720px){
  #settingsDialog[open]{height:min(92dvh,850px);max-height:92dvh;width:calc(100vw - 20px);}
  #settingsDialog .settings-fixed-head{padding:18px 18px 13px;}
  #settingsDialog .settings-scroll-content{padding:0 18px;}
  #settingsDialog .settings-fixed-foot{padding:12px 18px 14px;}
  #settingsDialog .settings-fixed-foot #logoutBtn{min-height:42px;padding:8px 12px;}
}
@media(max-height:480px){#settingsDialog[open]{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}#settingsDialog .settings-fixed-head{padding-top:9px;padding-bottom:8px}#settingsDialog .settings-fixed-head .muted{margin-top:3px}#settingsDialog .settings-fixed-foot{padding-top:7px;padding-bottom:7px}}

/* v1.3.40: lightweight recent-document strip between search and editor. */
.recent-documents{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:48px;margin:-8px 0 15px;padding:5px 6px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:0 2px 10px rgba(22,35,28,.035)}
.recent-documents.hidden{display:none!important}
.recent-doc-items{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.recent-doc-tab{border:1px solid transparent;border-radius:9px;background:var(--soft,#f6f6f3);color:var(--ink);padding:8px 11px;min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:.76rem;text-align:center;min-height:36px;font-family:inherit}
.recent-doc-tab:hover{border-color:var(--line);filter:brightness(.98)}
.recent-doc-tab.active{border-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--paper));color:var(--green);font-weight:600}
.recent-doc-tab:focus-visible,.recent-doc-arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.recent-doc-arrow{flex:0 0 37px;height:36px;border:1px solid var(--line);background:var(--paper);border-radius:9px;color:var(--ink);cursor:pointer;font-size:27px;line-height:1}
.recent-doc-arrow:disabled{opacity:.32;cursor:default}
.recent-doc-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--muted);font-size:.75rem}
@media(max-width:720px){.recent-documents{gap:4px;margin:-8px 0 12px;padding:4px}.recent-doc-items{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}.recent-doc-tab{font-size:.69rem;padding:7px 4px;min-height:35px}.recent-doc-arrow{flex-basis:29px;width:29px;height:35px}}

/* v1.3.42 history detail previous/next navigation */
#detailView .editor-footer-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;}
#detailView .footer-actions{justify-content:flex-end;}
.detail-record-nav{grid-column:2;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;}
.detail-record-step{min-height:38px!important;height:38px;padding:6px 11px!important;font-size:14px!important;font-weight:600;}
.detail-record-position{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:47px;text-align:center;}
.detail-record-step:disabled{opacity:.36;cursor:default;}
@media(max-width:1100px){
  #detailView .editor-footer-row{grid-template-columns:1fr auto;}
  #detailView .editor-footer-meta{grid-column:1;grid-row:1;}
  #detailView .footer-actions{grid-column:2;grid-row:1;}
  #detailView .detail-record-nav{grid-column:1/-1;grid-row:2;justify-self:center;}
}
@media(max-width:720px){
  #detailView .editor-footer-row{grid-template-columns:1fr;gap:10px;}
  #detailView .editor-footer-meta{grid-column:1;grid-row:1;}
  #detailView .detail-record-nav{grid-column:1;grid-row:2;}
  #detailView .footer-actions{grid-column:1;grid-row:3;justify-content:flex-end;}
}

/* v1.3.44: history-detail delete confirmation near the footer, above the actions. */
#detailDeleteDialog.detail-delete-dialog{
  position:fixed;inset:auto auto clamp(84px,11vh,154px) 50%;
  transform:translateX(-50%);margin:0;
  width:min(480px,calc(100vw - 32px));max-height:min(330px,calc(100dvh - 32px));
  padding:0;border:1px solid var(--line);border-radius:17px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 16px 45px rgba(0,0,0,.19);overflow:auto;
}
#detailDeleteDialog::backdrop{background:rgba(20,28,27,.24);}
.detail-delete-dialog-inner{padding:22px 23px 20px;display:grid;grid-template-columns:42px 1fr;column-gap:13px;row-gap:15px;align-items:start;}
.detail-delete-dialog-icon{width:42px;height:42px;display:grid;place-items:center;background:color-mix(in srgb,var(--red) 10%,var(--paper));color:var(--red);border-radius:12px;}
.detail-delete-dialog-content h2{margin:0 0 5px;font-size:1.05rem;color:var(--ink);line-height:1.5;}
.detail-delete-dialog-content p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.7;}
.detail-delete-dialog-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;}
.detail-delete-dialog-actions .btn{min-height:40px;padding:7px 16px;font-size:.82rem;}
#detailDeleteConfirm{background:var(--red);color:#fff;border-color:transparent;}
#detailDeleteConfirm:hover{filter:brightness(.94);}
@media(max-width:720px){
  #detailDeleteDialog.detail-delete-dialog{bottom:max(76px,env(safe-area-inset-bottom));width:calc(100vw - 24px);}
  .detail-delete-dialog-inner{padding:17px;}
}

/* v1.3.45: in-dialog extra confirmation for irreversible trash clearing. */
.delete-confirm-phrase{grid-column:1/-1;display:grid;gap:7px;}
.delete-confirm-phrase.hidden{display:none;}
.delete-confirm-phrase label{font-size:.77rem;color:var(--muted);}
.delete-confirm-phrase input{width:100%;min-height:43px;box-sizing:border-box;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:.87rem;}
.delete-confirm-phrase input:focus{outline:2px solid var(--red);outline-offset:1px;}
#detailDeleteConfirm:disabled{opacity:.45;cursor:not-allowed;filter:none;}

/* v1.3.46: Only permanent trash operations use a true viewport-center dialog.
   Keep the normal history-detail soft-delete confirmation near the bottom. */
#detailDeleteDialog.detail-delete-dialog.trash-confirm-centered{
  position:fixed;top:50%;left:50%;right:auto;bottom:auto;
  inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;
  width:min(480px,calc(100vw - 32px));
  max-height:min(85dvh,640px);
}
@media(max-width:720px){
  #detailDeleteDialog.detail-delete-dialog.trash-confirm-centered{
    inset:50% auto auto 50%;bottom:auto;transform:translate(-50%,-50%);
    width:calc(100vw - 24px);
  }
}

/* v1.3.47: TinyMCE list numbers follow the LI's formatting.
   JS mirrors uniform span font/size/color to LI without rewriting numbers. */
#editor li::marker,#detailEditor li::marker{font-size:inherit;font-family:inherit;color:inherit;font-weight:inherit;}

/* v1.3.49: marker begins at the editor text edge; JS sizes the hanging
   gutter to the actual number width, including two/three-digit labels. */
#editor ol,#detailEditor ol,#editor ul,#detailEditor ul{
  margin-inline-start:0;
  padding-inline-start:1.7em;
  list-style-position:outside;
}

/* v1.3.50: enough room for the current font name / size in TinyMCE buttons. */
#writeTinyToolbar .tox-toolbar__group button.tox-tbtn--select,#detailTinyToolbar .tox-toolbar__group button.tox-tbtn--select{max-width:170px;}
#writeTinyToolbar .tox-tbtn__select-label,#detailTinyToolbar .tox-tbtn__select-label{max-width:124px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}